66 lines
1.9 KiB
JavaScript
66 lines
1.9 KiB
JavaScript
const plugin = require('tailwindcss/plugin');
|
|
|
|
/** @type {import('tailwindcss').Config} */
|
|
module.exports = {
|
|
content: [
|
|
'./index.html',
|
|
'./src/**/*.{html,ts,css}'
|
|
],
|
|
darkMode: ['class', '[data-theme="dark"]'],
|
|
theme: {
|
|
extend: {
|
|
colors: {
|
|
'bg-main': 'var(--bg-main)',
|
|
'bg-muted': 'var(--bg-muted)',
|
|
card: 'var(--card)',
|
|
elevated: 'var(--elevated)',
|
|
'text-main': 'var(--text-main)',
|
|
'text-muted': 'var(--text-muted)',
|
|
border: 'var(--border)',
|
|
brand: 'var(--brand)',
|
|
'brand-700': 'var(--brand-700)',
|
|
'brand-800': 'var(--brand-800)',
|
|
accent: 'var(--accent)',
|
|
success: 'var(--success)',
|
|
warning: 'var(--warning)',
|
|
danger: 'var(--danger)',
|
|
info: 'var(--info)',
|
|
ring: 'var(--ring)'
|
|
},
|
|
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"] &)');
|
|
})
|
|
]
|
|
};
|