239 lines
8.5 KiB
JavaScript
239 lines
8.5 KiB
JavaScript
/** @type {import('tailwindcss').Config} */
|
|
|
|
// Helper function to create CSS variable color with alpha support
|
|
const withAlpha = (variableName) => `rgb(var(${variableName}) / <alpha-value>)`
|
|
|
|
export default {
|
|
content: [
|
|
"./index.html",
|
|
"./src/**/*.{js,ts,jsx,tsx}",
|
|
],
|
|
darkMode: 'class',
|
|
theme: {
|
|
extend: {
|
|
colors: {
|
|
// =================================================================
|
|
// CSS VARIABLE COLORS (Dynamic Theming Support)
|
|
// These reference CSS variables defined in index.css
|
|
// Supports alpha via: bg-primary-500/50, text-foreground/80, etc.
|
|
// =================================================================
|
|
|
|
// Primary Palette - Uses CSS Variables
|
|
primary: {
|
|
50: withAlpha('--color-primary-50'),
|
|
100: withAlpha('--color-primary-100'),
|
|
200: withAlpha('--color-primary-200'),
|
|
300: withAlpha('--color-primary-300'),
|
|
400: withAlpha('--color-primary-400'),
|
|
500: withAlpha('--color-primary-500'),
|
|
600: withAlpha('--color-primary-600'),
|
|
700: withAlpha('--color-primary-700'),
|
|
800: withAlpha('--color-primary-800'),
|
|
900: withAlpha('--color-primary-900'),
|
|
DEFAULT: withAlpha('--color-primary-500'),
|
|
},
|
|
// Secondary Palette - Uses CSS Variables
|
|
secondary: {
|
|
50: withAlpha('--color-secondary-50'),
|
|
100: withAlpha('--color-secondary-100'),
|
|
200: withAlpha('--color-secondary-200'),
|
|
300: withAlpha('--color-secondary-300'),
|
|
400: withAlpha('--color-secondary-400'),
|
|
500: withAlpha('--color-secondary-500'),
|
|
600: withAlpha('--color-secondary-600'),
|
|
700: withAlpha('--color-secondary-700'),
|
|
800: withAlpha('--color-secondary-800'),
|
|
900: withAlpha('--color-secondary-900'),
|
|
DEFAULT: withAlpha('--color-secondary-500'),
|
|
},
|
|
// Semantic Colors - Uses CSS Variables
|
|
success: {
|
|
50: withAlpha('--color-success-50'),
|
|
100: withAlpha('--color-success-100'),
|
|
500: withAlpha('--color-success-500'),
|
|
600: withAlpha('--color-success-600'),
|
|
700: withAlpha('--color-success-700'),
|
|
DEFAULT: withAlpha('--color-success-500'),
|
|
light: withAlpha('--color-success-50'),
|
|
dark: withAlpha('--color-success-700'),
|
|
},
|
|
warning: {
|
|
50: withAlpha('--color-warning-50'),
|
|
100: withAlpha('--color-warning-100'),
|
|
500: withAlpha('--color-warning-500'),
|
|
600: withAlpha('--color-warning-600'),
|
|
700: withAlpha('--color-warning-700'),
|
|
DEFAULT: withAlpha('--color-warning-500'),
|
|
light: withAlpha('--color-warning-50'),
|
|
dark: withAlpha('--color-warning-700'),
|
|
},
|
|
danger: {
|
|
50: withAlpha('--color-danger-50'),
|
|
100: withAlpha('--color-danger-100'),
|
|
500: withAlpha('--color-danger-500'),
|
|
600: withAlpha('--color-danger-600'),
|
|
700: withAlpha('--color-danger-700'),
|
|
DEFAULT: withAlpha('--color-danger-500'),
|
|
light: withAlpha('--color-danger-50'),
|
|
dark: withAlpha('--color-danger-700'),
|
|
},
|
|
info: {
|
|
50: withAlpha('--color-info-50'),
|
|
100: withAlpha('--color-info-100'),
|
|
500: withAlpha('--color-info-500'),
|
|
600: withAlpha('--color-info-600'),
|
|
700: withAlpha('--color-info-700'),
|
|
DEFAULT: withAlpha('--color-info-500'),
|
|
light: withAlpha('--color-info-50'),
|
|
dark: withAlpha('--color-info-700'),
|
|
},
|
|
// Neutral Colors - Uses CSS Variables (auto dark/light)
|
|
background: {
|
|
DEFAULT: withAlpha('--color-background'),
|
|
subtle: withAlpha('--color-background-subtle'),
|
|
muted: withAlpha('--color-background-muted'),
|
|
emphasis: withAlpha('--color-background-emphasis'),
|
|
},
|
|
foreground: {
|
|
DEFAULT: withAlpha('--color-foreground'),
|
|
muted: withAlpha('--color-foreground-muted'),
|
|
subtle: withAlpha('--color-foreground-subtle'),
|
|
},
|
|
border: {
|
|
DEFAULT: withAlpha('--color-border'),
|
|
subtle: withAlpha('--color-border-subtle'),
|
|
emphasis: withAlpha('--color-border-emphasis'),
|
|
},
|
|
surface: {
|
|
DEFAULT: withAlpha('--color-surface'),
|
|
hover: withAlpha('--color-surface-hover'),
|
|
card: withAlpha('--color-surface-card'),
|
|
popover: withAlpha('--color-surface-popover'),
|
|
modal: withAlpha('--color-surface-modal'),
|
|
dropdown: withAlpha('--color-surface-dropdown'),
|
|
},
|
|
|
|
// =================================================================
|
|
// STATIC HEX COLORS (Backward Compatibility)
|
|
// Keep these for legacy code - prefix with 'static-'
|
|
// =================================================================
|
|
'static-primary': {
|
|
50: '#E6F3FF',
|
|
100: '#CCE7FF',
|
|
200: '#99CFFF',
|
|
300: '#66B7FF',
|
|
400: '#339FFF',
|
|
500: '#0061A8',
|
|
600: '#004D86',
|
|
700: '#003A65',
|
|
800: '#002643',
|
|
900: '#001322',
|
|
},
|
|
'static-secondary': {
|
|
50: '#E6FFF5',
|
|
100: '#CCFFEB',
|
|
200: '#99FFD6',
|
|
300: '#66FFC2',
|
|
400: '#33FFAD',
|
|
500: '#00A868',
|
|
600: '#008653',
|
|
700: '#00653F',
|
|
800: '#00432A',
|
|
900: '#002215',
|
|
},
|
|
},
|
|
fontFamily: {
|
|
sans: ['Inter', 'system-ui', '-apple-system', 'BlinkMacSystemFont', 'Segoe UI', 'Roboto', 'sans-serif'],
|
|
mono: ['JetBrains Mono', 'Fira Code', 'Consolas', 'Monaco', 'monospace'],
|
|
},
|
|
fontSize: {
|
|
xs: ['0.75rem', { lineHeight: '1rem' }],
|
|
sm: ['0.875rem', { lineHeight: '1.25rem' }],
|
|
base: ['1rem', { lineHeight: '1.5rem' }],
|
|
lg: ['1.125rem', { lineHeight: '1.75rem' }],
|
|
xl: ['1.25rem', { lineHeight: '1.75rem' }],
|
|
'2xl': ['1.5rem', { lineHeight: '2rem' }],
|
|
'3xl': ['1.875rem', { lineHeight: '2.25rem' }],
|
|
'4xl': ['2.25rem', { lineHeight: '2.5rem' }],
|
|
},
|
|
spacing: {
|
|
'18': '4.5rem',
|
|
'88': '22rem',
|
|
},
|
|
borderRadius: {
|
|
sm: '0.125rem',
|
|
DEFAULT: '0.25rem',
|
|
md: '0.375rem',
|
|
lg: '0.5rem',
|
|
xl: '0.75rem',
|
|
'2xl': '1rem',
|
|
'3xl': '1.5rem',
|
|
},
|
|
boxShadow: {
|
|
sm: '0 1px 2px 0 rgb(0 0 0 / 0.05)',
|
|
DEFAULT: '0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)',
|
|
md: '0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)',
|
|
lg: '0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)',
|
|
xl: '0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1)',
|
|
'2xl': '0 25px 50px -12px rgb(0 0 0 / 0.25)',
|
|
inner: 'inset 0 2px 4px 0 rgb(0 0 0 / 0.05)',
|
|
},
|
|
zIndex: {
|
|
dropdown: '1000',
|
|
sticky: '1020',
|
|
fixed: '1030',
|
|
modalBackdrop: '1040',
|
|
modal: '1050',
|
|
popover: '1060',
|
|
tooltip: '1070',
|
|
toast: '1080',
|
|
},
|
|
animation: {
|
|
'fade-in': 'fadeIn 0.2s ease-out',
|
|
'fade-out': 'fadeOut 0.2s ease-in',
|
|
'slide-in': 'slideIn 0.2s ease-out',
|
|
'slide-out': 'slideOut 0.2s ease-in',
|
|
'spin-slow': 'spin 2s linear infinite',
|
|
'pulse-slow': 'pulse 3s ease-in-out infinite',
|
|
},
|
|
keyframes: {
|
|
fadeIn: {
|
|
'0%': { opacity: '0' },
|
|
'100%': { opacity: '1' },
|
|
},
|
|
fadeOut: {
|
|
'0%': { opacity: '1' },
|
|
'100%': { opacity: '0' },
|
|
},
|
|
slideIn: {
|
|
'0%': { transform: 'translateY(-10px)', opacity: '0' },
|
|
'100%': { transform: 'translateY(0)', opacity: '1' },
|
|
},
|
|
slideOut: {
|
|
'0%': { transform: 'translateY(0)', opacity: '1' },
|
|
'100%': { transform: 'translateY(-10px)', opacity: '0' },
|
|
},
|
|
},
|
|
transitionDuration: {
|
|
'0': '0ms',
|
|
'75': '75ms',
|
|
'100': '100ms',
|
|
'150': '150ms',
|
|
'200': '200ms',
|
|
'300': '300ms',
|
|
'500': '500ms',
|
|
'700': '700ms',
|
|
'1000': '1000ms',
|
|
},
|
|
transitionTimingFunction: {
|
|
'ease-in': 'cubic-bezier(0.4, 0, 1, 1)',
|
|
'ease-out': 'cubic-bezier(0, 0, 0.2, 1)',
|
|
'ease-in-out': 'cubic-bezier(0.4, 0, 0.2, 1)',
|
|
},
|
|
},
|
|
},
|
|
plugins: [
|
|
require('@tailwindcss/forms'),
|
|
],
|
|
}
|