118 lines
4.5 KiB
TypeScript
118 lines
4.5 KiB
TypeScript
import type { Config } from 'tailwindcss'
|
|
|
|
// darkMode: 'class' permite alternância via classe 'dark' no <html> ou <body>
|
|
export default {
|
|
darkMode: 'class',
|
|
content: ['./index.html', './src/**/*.{ts,tsx}'],
|
|
theme: {
|
|
extend: {
|
|
colors: {
|
|
// Theme tokens via CSS custom properties (light/dark)
|
|
canvas: 'var(--color-canvas)',
|
|
panel: {
|
|
DEFAULT: 'var(--color-panel)',
|
|
dark: 'var(--color-panel)', // alias: bg-panel-dark
|
|
},
|
|
surface: {
|
|
DEFAULT: 'var(--color-surface)',
|
|
elevated: 'var(--color-surface)', // alias: bg-surface-elevated
|
|
},
|
|
surfaceSecondary: 'var(--color-surface-secondary)',
|
|
|
|
textPrimary: 'var(--color-text-primary)',
|
|
textSecondary: 'var(--color-text-secondary)',
|
|
textTertiary: 'var(--color-text-tertiary)',
|
|
textQuaternary: 'var(--color-text-quaternary)',
|
|
textMuted: 'var(--color-text-muted)',
|
|
|
|
brand: {
|
|
DEFAULT: 'rgb(var(--color-brand-ch) / <alpha-value>)',
|
|
indigo: 'rgb(var(--color-brand-ch) / <alpha-value>)', // alias: bg-brand-indigo
|
|
},
|
|
accent: {
|
|
DEFAULT: 'rgb(var(--color-accent-ch) / <alpha-value>)',
|
|
violet: 'rgb(var(--color-accent-ch) / <alpha-value>)', // alias: text-accent-violet
|
|
},
|
|
accentHover: 'var(--color-accent-hover)',
|
|
security: 'var(--color-security)',
|
|
|
|
statusGreen: 'var(--color-status-green)',
|
|
statusEmerald: 'var(--color-status-emerald)',
|
|
admin: 'var(--color-admin)',
|
|
|
|
borderSubtle: 'var(--border-subtle)',
|
|
borderStandard: 'var(--border-standard)',
|
|
borderPrimary: 'var(--color-border-primary)',
|
|
borderSecondary: 'var(--color-border-secondary)',
|
|
borderTertiary: 'var(--color-border-tertiary)',
|
|
lineTint: 'var(--color-line-tint)',
|
|
lineTertiary: 'var(--color-line-tertiary)',
|
|
},
|
|
fontFamily: {
|
|
inter: [
|
|
'Inter Variable',
|
|
'Inter',
|
|
'SF Pro Display',
|
|
'-apple-system',
|
|
'system-ui',
|
|
'Segoe UI',
|
|
'Roboto',
|
|
'Helvetica Neue',
|
|
'sans-serif',
|
|
],
|
|
mono: [
|
|
'Berkeley Mono',
|
|
'ui-monospace',
|
|
'SF Mono',
|
|
'Menlo',
|
|
'monospace',
|
|
],
|
|
sans: [
|
|
'Inter Variable',
|
|
'Inter',
|
|
'SF Pro Display',
|
|
'-apple-system',
|
|
'system-ui',
|
|
'Segoe UI',
|
|
'Roboto',
|
|
'Helvetica Neue',
|
|
'sans-serif',
|
|
],
|
|
},
|
|
fontWeight: {
|
|
light: '300',
|
|
normal: '400',
|
|
medium: '510',
|
|
semibold: '590',
|
|
bold: '700',
|
|
},
|
|
letterSpacing: {
|
|
'display-xl': '-0.022em', // 72px → -1.584px
|
|
'display-lg': '-0.022em', // 64px → -1.408px
|
|
'display': '-0.022em', // 48px → -1.056px
|
|
'h1': '-0.022em', // 32px → -0.704px
|
|
'h2': '-0.012em', // 24px → -0.288px
|
|
'h3': '-0.012em', // 20px → -0.24px
|
|
'body-lg': '-0.0092em', // 18px → -0.165px
|
|
'caption': '-0.01em', // 13px
|
|
'tight': '-0.015em',
|
|
},
|
|
borderRadius: {
|
|
sm: '4px',
|
|
DEFAULT: '6px',
|
|
md: '6px',
|
|
lg: '9px',
|
|
xl: '12px',
|
|
},
|
|
backdropBlur: {
|
|
navbar: '12px',
|
|
},
|
|
boxShadow: {
|
|
'card': '0 1px 3px rgba(0,0,0,0.3), 0 1px 2px rgba(0,0,0,0.2)',
|
|
'card-hover': '0 4px 12px rgba(0,0,0,0.4), 0 2px 4px rgba(0,0,0,0.3)',
|
|
'focus': '0 0 0 2px rgba(113,112,255,0.4)',
|
|
},
|
|
},
|
|
},
|
|
plugins: [],
|
|
} satisfies Config
|