import type { Config } from 'tailwindcss'; // Fase 11: tag colours are picked at runtime from an 8-preset palette // (see public.item_tags.color CHECK constraint). Tailwind cannot statically // see the class names (they're built from the colour string), so safelist // every (variant × intensity) combination the chip + dot use. const TAG_COLORS = ['slate', 'red', 'amber', 'green', 'sky', 'indigo', 'pink', 'stone']; const tagSafelist = TAG_COLORS.flatMap((c) => [ `bg-${c}-100`, `text-${c}-700`, `ring-${c}-200`, `dark:bg-${c}-900/40`, `dark:text-${c}-200`, `dark:ring-${c}-700/50`, `bg-${c}-500` ]); export default { content: ['./src/**/*.{html,js,svelte,ts}'], safelist: tagSafelist, // Fase 9.1: drive dark mode from so the inline // anti-FOUC script in app.html can set the attribute synchronously before // the first paint. Existing `dark:` utilities keep working as-is. darkMode: ['selector', '[data-theme="dark"]'], theme: { extend: { fontFamily: { sans: ['Inter', 'system-ui', 'sans-serif'] }, colors: { // Semantic aliases — "The Monolith Editorial" surface hierarchy. // Use background shifts (never 1px borders) to separate major UI areas. background: 'rgb(var(--background) / )', 'surface-container-low': 'rgb(var(--surface-container-low) / )', surface: 'rgb(var(--surface) / )', 'surface-raised': 'rgb(var(--surface-raised) / )', // Text hierarchy 'text-primary': 'rgb(var(--text-primary) / )', 'text-secondary': 'rgb(var(--text-secondary) / )', 'text-muted': 'rgb(var(--text-muted) / )', // Only non-slate color allowed in the system destructive: 'rgb(var(--destructive) / )' } } }, plugins: [] } satisfies Config;