173 lines
5.2 KiB
TypeScript
173 lines
5.2 KiB
TypeScript
import type { Config } from 'tailwindcss'
|
|
import typography from '@tailwindcss/typography'
|
|
import forms from '@tailwindcss/forms'
|
|
import aspectRatio from '@tailwindcss/aspect-ratio'
|
|
|
|
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: {
|
|
border: 'hsl(var(--border))',
|
|
input: 'hsl(var(--input))',
|
|
ring: 'hsl(var(--ring))',
|
|
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))',
|
|
hover: 'hsl(var(--accent) / 0.85)',
|
|
soft: 'hsl(var(--accent) / 0.2)',
|
|
foreground: 'hsl(var(--accent-foreground))',
|
|
},
|
|
destructive: {
|
|
DEFAULT: 'hsl(var(--destructive))',
|
|
foreground: 'hsl(var(--destructive-foreground))',
|
|
},
|
|
success: '#10B981',
|
|
warning: '#F59E0B',
|
|
error: '#EF4444',
|
|
info: '#3B82F6',
|
|
surface: {
|
|
950: 'rgb(var(--surface-950))',
|
|
900: 'rgb(var(--surface-900))',
|
|
850: 'rgb(var(--surface-850))',
|
|
800: 'rgb(var(--surface-800))',
|
|
700: 'rgb(var(--surface-700))',
|
|
600: 'rgb(var(--surface-600))',
|
|
500: 'rgb(var(--surface-500))',
|
|
400: 'rgb(var(--surface-400))',
|
|
overlay: 'rgb(var(--surface-overlay))',
|
|
},
|
|
text: {
|
|
primary: 'rgb(var(--text-primary))',
|
|
secondary: 'rgb(var(--text-secondary))',
|
|
muted: 'rgb(var(--text-muted))',
|
|
disabled: 'rgb(var(--text-disabled))',
|
|
},
|
|
brand: {
|
|
primary: 'rgb(var(--brand-primary))',
|
|
bright: 'rgb(var(--brand-primary-bright))',
|
|
accent: 'rgb(var(--brand-accent))',
|
|
ember: 'rgb(var(--brand-ember))',
|
|
forest: 'rgb(var(--brand-forest))',
|
|
coal: 'rgb(var(--brand-coal))',
|
|
olive: 'rgb(var(--brand-olive))',
|
|
teal: 'rgb(var(--brand-teal))',
|
|
steel: 'rgb(var(--brand-steel))',
|
|
},
|
|
neutral: {
|
|
100: 'rgb(var(--neutral-100))',
|
|
200: 'rgb(var(--neutral-200))',
|
|
300: 'rgb(var(--neutral-300))',
|
|
400: 'rgb(var(--neutral-400))',
|
|
},
|
|
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))',
|
|
},
|
|
},
|
|
fontFamily: {
|
|
sans: [
|
|
'var(--font-kanit)',
|
|
'Kanit',
|
|
'system-ui',
|
|
'-apple-system',
|
|
'BlinkMacSystemFont',
|
|
'"Segoe UI"',
|
|
'sans-serif',
|
|
],
|
|
display: [
|
|
'var(--font-rajdhani)',
|
|
'Rajdhani',
|
|
'Kanit',
|
|
'system-ui',
|
|
'sans-serif',
|
|
],
|
|
mono: ['JetBrains Mono', 'Consolas', 'monospace'],
|
|
},
|
|
spacing: {
|
|
'2xs': 'var(--space-2xs)',
|
|
xs: 'var(--space-xs)',
|
|
sm: 'var(--space-sm)',
|
|
md: 'var(--space-md)',
|
|
lg: 'var(--space-lg)',
|
|
xl: 'var(--space-xl)',
|
|
'2xl': 'var(--space-2xl)',
|
|
'3xl': 'var(--space-3xl)',
|
|
},
|
|
borderRadius: {
|
|
none: 'var(--radius-none)',
|
|
sm: 'var(--radius-sm)',
|
|
DEFAULT: 'var(--radius)',
|
|
md: 'var(--radius-md)',
|
|
lg: 'var(--radius-lg)',
|
|
xl: 'var(--radius-xl)',
|
|
full: 'var(--radius-full)',
|
|
},
|
|
boxShadow: {
|
|
soft: 'var(--shadow-soft)',
|
|
strong: 'var(--shadow-strong)',
|
|
outline: 'var(--shadow-outline)',
|
|
},
|
|
animation: {
|
|
'fade-in': 'fadeIn var(--motion-duration-sm) var(--motion-ease-standard)',
|
|
'fade-out':
|
|
'fadeOut var(--motion-duration-sm) var(--motion-ease-standard)',
|
|
},
|
|
keyframes: {
|
|
fadeIn: {
|
|
'0%': { opacity: '0' },
|
|
'100%': { opacity: '1' },
|
|
},
|
|
fadeOut: {
|
|
'0%': { opacity: '1' },
|
|
'100%': { opacity: '0' },
|
|
},
|
|
},
|
|
transitionDuration: {
|
|
120: 'var(--motion-duration-xs)',
|
|
200: 'var(--motion-duration-sm)',
|
|
320: 'var(--motion-duration-md)',
|
|
480: 'var(--motion-duration-lg)',
|
|
},
|
|
transitionTimingFunction: {
|
|
standard: 'var(--motion-ease-standard)',
|
|
emphasized: 'var(--motion-ease-emphasized)',
|
|
entrance: 'var(--motion-ease-entrance)',
|
|
exit: 'var(--motion-ease-exit)',
|
|
},
|
|
},
|
|
},
|
|
plugins: [typography, forms, aspectRatio],
|
|
}
|
|
|
|
export default config
|