144 lines
4.0 KiB
TypeScript
144 lines
4.0 KiB
TypeScript
import type { Config } from 'tailwindcss'
|
|
|
|
const config: Config = {
|
|
darkMode: 'class',
|
|
content: [
|
|
'./src/pages/**/*.{js,ts,jsx,tsx,mdx}',
|
|
'./src/components/**/*.{js,ts,jsx,tsx,mdx}',
|
|
'./src/app/**/*.{js,ts,jsx,tsx,mdx}',
|
|
],
|
|
theme: {
|
|
extend: {
|
|
colors: {
|
|
// Core dark palette sourced from CSS variables for consistency
|
|
surface: {
|
|
900: 'rgb(var(--surface-900))',
|
|
800: 'rgb(var(--surface-800))',
|
|
700: 'rgb(var(--surface-700))',
|
|
600: 'rgb(var(--surface-600))',
|
|
500: 'rgb(var(--surface-500))',
|
|
},
|
|
text: {
|
|
primary: 'rgb(var(--text-primary))',
|
|
secondary: 'rgb(var(--text-secondary))',
|
|
muted: 'rgb(var(--text-muted))',
|
|
disabled: 'rgb(var(--text-disabled))',
|
|
},
|
|
// Accent mapped to CSS vars so UI + utilities stay in sync
|
|
accent: {
|
|
DEFAULT: 'rgb(var(--accent))',
|
|
hover: 'rgb(var(--accent-hover))',
|
|
},
|
|
// Backward-compat aliases used in a few components
|
|
bg: {
|
|
DEFAULT: 'rgb(var(--surface-800))',
|
|
light: 'rgb(var(--surface-700))',
|
|
dark: 'rgb(var(--surface-900))',
|
|
},
|
|
primary: 'rgb(var(--text-primary))',
|
|
success: '#10B981',
|
|
warning: '#F59E0B',
|
|
error: '#EF4444',
|
|
info: '#3B82F6',
|
|
},
|
|
fontFamily: {
|
|
sans: ['Inter', 'system-ui', '-apple-system', 'sans-serif'],
|
|
mono: ['JetBrains Mono', 'Consolas', 'monospace'],
|
|
display: ['Cal Sans', 'Inter', 'sans-serif'],
|
|
},
|
|
fontSize: {
|
|
'2xs': ['0.625rem', { lineHeight: '0.875rem' }],
|
|
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.875rem' }],
|
|
'2xl': ['1.5rem', { lineHeight: '2rem' }],
|
|
'3xl': ['1.875rem', { lineHeight: '2.25rem' }],
|
|
'4xl': ['2.25rem', { lineHeight: '2.75rem' }],
|
|
'5xl': ['3rem', { lineHeight: '3.5rem' }],
|
|
'6xl': ['3.75rem', { lineHeight: '4.25rem' }],
|
|
},
|
|
spacing: {
|
|
// Standard exponential spacing scale
|
|
'0': '0',
|
|
'1': '0.25rem',
|
|
'2': '0.5rem',
|
|
'3': '0.75rem',
|
|
'4': '1rem',
|
|
'5': '1.25rem',
|
|
'6': '1.5rem',
|
|
'7': '1.75rem',
|
|
'8': '2rem',
|
|
'9': '2.25rem',
|
|
'10': '2.5rem',
|
|
'11': '2.75rem',
|
|
'12': '3rem',
|
|
'14': '3.5rem',
|
|
'16': '4rem',
|
|
'20': '5rem',
|
|
'24': '6rem',
|
|
'28': '7rem',
|
|
'32': '8rem',
|
|
'36': '9rem',
|
|
'40': '10rem',
|
|
'44': '11rem',
|
|
'48': '12rem',
|
|
'52': '13rem',
|
|
'56': '14rem',
|
|
'60': '15rem',
|
|
'64': '16rem',
|
|
'72': '18rem',
|
|
'80': '20rem',
|
|
'96': '24rem',
|
|
},
|
|
borderRadius: {
|
|
// Reduced border radius for minimalism
|
|
none: '0',
|
|
sm: '0.125rem',
|
|
DEFAULT: '0.25rem',
|
|
md: '0.375rem',
|
|
lg: '0.5rem',
|
|
xl: '0.75rem',
|
|
'2xl': '1rem',
|
|
'3xl': '1.5rem',
|
|
full: '9999px',
|
|
},
|
|
animation: {
|
|
// Simplified animations
|
|
'fade-in': 'fadeIn 0.15s ease-out',
|
|
'fade-out': 'fadeOut 0.15s ease-in',
|
|
},
|
|
keyframes: {
|
|
fadeIn: {
|
|
'0%': { opacity: '0' },
|
|
'100%': { opacity: '1' },
|
|
},
|
|
fadeOut: {
|
|
'0%': { opacity: '1' },
|
|
'100%': { opacity: '0' },
|
|
},
|
|
},
|
|
transitionDuration: {
|
|
'0': '0ms',
|
|
'75': '75ms',
|
|
'100': '100ms',
|
|
'150': '150ms',
|
|
'200': '200ms',
|
|
'300': '300ms',
|
|
'400': '400ms',
|
|
},
|
|
transitionTimingFunction: {
|
|
smooth: 'cubic-bezier(0.4, 0, 0.2, 1)',
|
|
},
|
|
},
|
|
},
|
|
plugins: [
|
|
require('@tailwindcss/typography'),
|
|
require('@tailwindcss/forms'),
|
|
require('@tailwindcss/aspect-ratio'),
|
|
],
|
|
}
|
|
|
|
export default config
|