101 lines
2.7 KiB
JavaScript
101 lines
2.7 KiB
JavaScript
const plugin = require('tailwindcss/plugin');
|
|
|
|
/** @type {import('tailwindcss').Config} */
|
|
module.exports = {
|
|
content: [
|
|
'./index.html',
|
|
'./src/**/*.{html,ts,css}'
|
|
],
|
|
darkMode: 'class',
|
|
theme: {
|
|
extend: {
|
|
screens: {
|
|
xs: '320px',
|
|
sm: '640px',
|
|
md: '768px',
|
|
lg: '1024px',
|
|
xl: '1280px',
|
|
'2xl': '1536px',
|
|
},
|
|
colors: {
|
|
// Core semantic tokens
|
|
bg: 'var(--bg)',
|
|
'bg-main': 'var(--bg-main)',
|
|
'bg-muted': 'var(--bg-muted)',
|
|
fg: 'var(--fg)',
|
|
card: 'var(--card)',
|
|
elevated: 'var(--elevated)',
|
|
'text-main': 'var(--text-main)',
|
|
'text-muted': 'var(--text-muted)',
|
|
muted: 'var(--muted)',
|
|
border: 'var(--border)',
|
|
|
|
// Surfaces
|
|
surface1: 'var(--surface-1)',
|
|
surface2: 'var(--surface-2)',
|
|
sidebar: 'var(--sidebar-bg)',
|
|
|
|
// Brand & accents
|
|
primary: 'var(--primary)',
|
|
brand: 'var(--brand)',
|
|
'brand-700': 'var(--brand-700)',
|
|
'brand-800': 'var(--brand-800)',
|
|
secondary: 'var(--secondary)',
|
|
accent: 'var(--accent)',
|
|
|
|
// Status
|
|
success: 'var(--success)',
|
|
warning: 'var(--warning)',
|
|
danger: 'var(--danger)',
|
|
info: 'var(--info)',
|
|
|
|
// UI elements
|
|
chip: 'var(--chip-bg)',
|
|
link: 'var(--link)',
|
|
'link-hover': 'var(--link-hover)',
|
|
ring: 'var(--ring)',
|
|
|
|
// Legacy nimbus (keep for compatibility)
|
|
nimbus: {
|
|
50: '#f0f9ff',
|
|
500: '#0ea5e9',
|
|
900: '#0c4a6e'
|
|
}
|
|
},
|
|
ringColor: {
|
|
DEFAULT: 'var(--ring)'
|
|
},
|
|
boxShadow: {
|
|
surface: '0 1px 2px 0 var(--shadow-color)',
|
|
'surface-md': '0 12px 32px -16px var(--shadow-color)',
|
|
focus: '0 0 0 var(--focus-ring-size) var(--ring)'
|
|
},
|
|
borderRadius: {
|
|
sm: 'var(--radius-sm)',
|
|
DEFAULT: 'var(--radius-md)',
|
|
md: 'var(--radius-md)',
|
|
lg: 'var(--radius-lg)',
|
|
xl: 'var(--radius-xl)',
|
|
'2xl': 'calc(var(--radius-xl) + 0.5rem)',
|
|
full: 'var(--radius-full)'
|
|
},
|
|
fontFamily: {
|
|
sans: ['var(--font-sans)', 'system-ui', 'sans-serif'],
|
|
mono: ['var(--font-mono)', 'ui-monospace', 'SFMono-Regular', 'monospace']
|
|
},
|
|
transitionTimingFunction: {
|
|
base: 'var(--transition-base)',
|
|
fast: 'var(--transition-fast)',
|
|
slow: 'var(--transition-slow)'
|
|
}
|
|
}
|
|
},
|
|
plugins: [
|
|
require('@tailwindcss/forms'),
|
|
require('@tailwindcss/typography'),
|
|
plugin(({ addVariant }) => {
|
|
addVariant('theme-dark', ':is([data-theme="dark"] &)');
|
|
})
|
|
]
|
|
};
|