snowballtools-base/packages/frontend/tailwind.config.js
2025-02-19 19:16:05 -08:00

303 lines
7.8 KiB
JavaScript

import withMT from '@snowballtools/material-tailwind-react-fork/utils/withMT';
import colors from 'tailwindcss/colors';
import { fontFamily } from "tailwindcss/defaultTheme";
/** @type {import('tailwindcss').Config} */
export default withMT({
darkMode: ["class"],
content: [
'./src/**/*.{js,jsx,ts,tsx}',
'../../node_modules/@snowballtools/material-tailwind-react-fork/components/**/*.{js,ts,jsx,tsx}',
'../../node_modules/@snowballtools/material-tailwind-react-fork/theme/components/**/*.{js,ts,jsx,tsx}',
"./components/**/*.{ts,tsx}",
],
theme: {
container: {
center: true,
padding: '2rem',
screens: {
'2xl': '1400px'
}
},
colors: {
background: '#0F0F0F',
overlay: '#18181A',
overlay2: '#29292E',
overlay3: '#48474F',
primary: '#0000F4',
'primary-hovered': '#0000F4AA',
foreground: '#FBFBFB',
'foreground-secondary': '#8E8E8E',
error: '#B20710',
border: 'hsl(var(--border))',
input: 'hsl(var(--input))',
ring: 'hsl(var(--ring))',
destructive: {
DEFAULT: 'hsl(var(--destructive))',
foreground: 'hsl(var(--destructive-foreground))'
},
muted: {
DEFAULT: 'hsl(var(--muted))',
foreground: 'hsl(var(--muted-foreground))'
},
accent: {
DEFAULT: 'hsl(var(--accent))',
foreground: 'hsl(var(--accent-foreground))'
},
popover: {
DEFAULT: 'hsl(var(--popover))',
foreground: 'hsl(var(--popover-foreground))'
},
card: {
DEFAULT: 'hsl(var(--card))',
foreground: 'hsl(var(--card-foreground))'
}
},
extend: {
screens: {
xxs: '400px',
xs: '480px'
},
borderRadius: {
lg: 'var(--radius)',
md: 'calc(var(--radius) - 2px)',
sm: 'calc(var(--radius) - 4px)'
},
letterSpacing: {
tight: '-0.084px'
},
fontFamily: {
sans: [
'var(--font-sans)',
...fontFamily.sans
],
display: [
'Inter Display',
'sans-serif'
],
mono: [
'DM Mono',
'monospace'
]
},
fontSize: {
'2xs': '0.625rem',
'3xs': '0.5rem'
},
keyframes: {
'accordion-down': {
from: {
height: '0'
},
to: {
height: 'var(--radix-accordion-content-height)'
}
},
'accordion-up': {
from: {
height: 'var(--radix-accordion-content-height)'
},
to: {
height: '0'
}
}
},
animation: {
'accordion-down': 'accordion-down 0.2s ease-out',
'accordion-up': 'accordion-up 0.2s ease-out',
spin: 'spin 3s linear infinite'
},
colors: {
sky: 'colors.sky',
slate: 'colors.slate',
emerald: {
'50': '#ecfdf5',
'100': '#d1fae5',
'200': '#a9f1d0',
'300': '#6ee7b7',
'400': '#34d399',
'500': '#10b981',
'600': '#059669',
'700': '#047857',
'800': '#065f46',
'900': '#064e3b'
},
gray: {
'0': '#ffffff',
'50': '#f8fafc',
'100': '#f1f5f9',
'200': '#e2e9f0',
'300': '#cbd6e1',
'400': '#94a7b8',
'500': '#60788f',
'600': '#475969',
'700': '#334555',
'800': '#1b2d3e',
'900': '#0b1d2e'
},
orange: {
'50': '#fff7ed',
'100': '#ffedd5',
'200': '#fed7aa',
'300': '#fdba74',
'400': '#fb923c',
'500': '#f97316',
'600': '#ea580c',
'700': '#c2410c',
'800': '#9a3412',
'900': '#7c2d12'
},
rose: {
'50': '#fff1f2',
'100': '#ffe4e6',
'200': '#fecdd3',
'300': '#fda4af',
'400': '#fb7185',
'500': '#f43f5e',
'600': '#e11d48',
'700': '#be123c',
'800': '#9f1239',
'900': '#881337'
},
snowball: {
'50': '#ecf6fe',
'100': '#e1f1fe',
'200': '#ddeefd',
'300': '#cfe6fc',
'400': '#74bafb',
'500': '#47a4fa',
'600': '#0f86f5',
'700': '#0977dc',
'800': '#075185',
'900': '#0a3a5c'
},
base: {
canvas: '#ECF6FE',
bg: '#ffffff',
'bg-alternate': '#f8fafc',
'bg-emphasized': '#f1f5f9',
'bg-emphasized-danger': '#fff1f2',
'bg-emphasized-info': '#ecf6fe',
'bg-emphasized-success': '#ecfdf5',
'bg-emphasized-warning': '#fff7ed'
},
border: 'hsl(var(--border))',
controls: {
danger: '#e11d48',
'danger-hovered': '#be123c',
disabled: '#e2e9f0',
'disabled-active': '#74bafb',
elevated: '#ffffff',
inset: '#e2e9f0',
'inset-hovered': '#cbd6e1',
primary: '#0f86f5',
'primary-hovered': '#0977dc',
secondary: '#ddeefd',
'secondary-hovered': '#cfe6fc',
tertiary: '#ffffff',
'tertiary-hovered': '#f8fafc'
},
elements: {
danger: '#e11d48',
disabled: '#94a7b8',
'high-em': '#0b1d2e',
info: '#0f86f5',
link: '#0f86f5',
'link-hovered': '#0977dc',
'low-em': '#60788f',
'mid-em': '#475969',
'on-danger': '#ffffff',
'on-disabled': '#60788f',
'on-disabled-active': '#0a3a5c',
'on-emphasized-danger': '#9f1239',
'on-emphasized-info': '#0a3a5c',
'on-emphasized-success': '#065f46',
'on-emphasized-warning': '#9a3412',
'on-high-contrast': '#ffffff',
'on-primary': '#ffffff',
'on-secondary': '#0977dc',
'on-secondary-tinted': '#075185',
'on-tertiary': '#1b2d3e',
success: '#059669',
warning: '#ea580c'
},
surface: {
card: '#ffffff',
'card-hovered': '#f8fafc',
floating: '#ffffff',
'floating-hovered': '#f1f5f9',
'high-contrast': '#0b1d2e'
},
background: 'hsl(var(--background))',
foreground: 'hsl(var(--foreground))',
card: {
DEFAULT: 'hsl(var(--card))',
foreground: 'hsl(var(--card-foreground))'
},
popover: {
DEFAULT: 'hsl(var(--popover))',
foreground: 'hsl(var(--popover-foreground))'
},
primary: {
DEFAULT: 'hsl(var(--primary))',
foreground: 'hsl(var(--primary-foreground))'
},
secondary: {
DEFAULT: 'hsl(var(--secondary))',
foreground: 'hsl(var(--secondary-foreground))'
},
muted: {
DEFAULT: 'hsl(var(--muted))',
foreground: 'hsl(var(--muted-foreground))'
},
accent: {
DEFAULT: 'hsl(var(--accent))',
foreground: 'hsl(var(--accent-foreground))'
},
destructive: {
DEFAULT: 'hsl(var(--destructive))',
foreground: 'hsl(var(--destructive-foreground))'
},
input: 'hsl(var(--input))',
ring: 'hsl(var(--ring))',
chart: {
'1': 'hsl(var(--chart-1))',
'2': 'hsl(var(--chart-2))',
'3': 'hsl(var(--chart-3))',
'4': 'hsl(var(--chart-4))',
'5': 'hsl(var(--chart-5))'
},
sidebar: {
DEFAULT: 'hsl(var(--sidebar-background))',
foreground: 'hsl(var(--sidebar-foreground))',
primary: 'hsl(var(--sidebar-primary))',
'primary-foreground': 'hsl(var(--sidebar-primary-foreground))',
accent: 'hsl(var(--sidebar-accent))',
'accent-foreground': 'hsl(var(--sidebar-accent-foreground))',
border: 'hsl(var(--sidebar-border))',
ring: 'hsl(var(--sidebar-ring))'
}
},
boxShadow: {
button: '0px -2px 0px 0px rgba(0, 0, 0, 0.04) inset, 0px 0px 4px 0px rgba(255, 255, 255, 0.25) inset',
dropdown: '0px 3px 20px rgba(8, 47, 86, 0.1), 0px 0px 4px rgba(8, 47, 86, 0.14)',
field: '0px 1px 2px rgba(0, 0, 0, 0.04)',
inset: 'inset 0px 1px 0px rgba(8, 47, 86, 0.06)',
card: '0px 0px 0px 1px #E8F0F7, 0px 2px 4px rgba(8, 47, 86, 0.04)',
'card-sm': '0px 1px 2px -1px rgba(4, 25, 47, 0.08)'
},
spacing: {
'2.5': '0.625rem',
'3.25': '0.8125rem',
'3.5': '0.875rem',
'4.5': '1.125rem'
},
zIndex: {
tooltip: '52',
toast: '9999'
}
}
},
plugins: [require("tailwindcss-animate")],
});