Files
mimic/frontend/tailwind.config.ts
Knacky 573281f454 fix(design): code-reviewer polish — dedupe tag-mitre recipe, drop dead boxShadow tokens, cover StatusBadge classes
F1: MitreTechniqueTag inline classes replaced with className="tag-mitre gap-xxs"
    (index.css .tag-mitre is now the single source of truth for technique tags).
F2: boxShadow block removed from tailwind.config.ts — no component referenced
    shadow-soft-lift / shadow-floating / *-dark; DESIGN.md §Don'ts prohibits shadows.
F4: StatusBadge.test.tsx gains 3 class assertions (bg-warn-soft / bg-primary-soft / bg-cloud)
    mirroring SimulationStatusBadge.test.tsx pattern. Test count: 136 → 139.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-06-10 05:53:53 +02:00

110 lines
3.8 KiB
TypeScript

import type { Config } from 'tailwindcss';
/**
* Tokens mirror DESIGN.md (terminal-SOC aesthetic, sprint 7).
* Inter Variable: body/headers/labels. JetBrains Mono Variable: data cells only.
* Dark mode: class-based, toggled by adding 'dark' to <html>.
*/
const config: Config = {
content: ['./index.html', './src/**/*.{ts,tsx}'],
darkMode: 'class',
theme: {
extend: {
colors: {
// Brand & Accent — primary stays fixed (never inverts)
primary: {
DEFAULT: '#024ad8',
bright: '#296ef9',
deep: '#0e3191',
soft: '#c9e0fc',
},
// Surface — backed by CSS vars so dark mode works via .dark class
canvas: 'var(--color-canvas)',
paper: 'var(--color-paper)',
cloud: 'var(--color-cloud)',
fog: 'var(--color-fog)',
steel: 'var(--color-steel)',
hairline: 'var(--color-hairline)',
// Text — also CSS vars
ink: {
DEFAULT: 'var(--color-ink)',
deep: 'var(--color-ink-deep)',
soft: 'var(--color-ink-soft)',
on: 'var(--color-ink-on)',
},
charcoal: 'var(--color-charcoal)',
graphite: 'var(--color-graphite)',
// Fixed dark slab — never inverts in dark mode
slab: '#111827',
'slab-text': '#f9fafb',
'slab-muted': '#6b7280',
// Semantic status tokens — light+dark variants via CSS vars
success: {
DEFAULT: 'var(--color-success)',
soft: 'var(--color-success-soft)',
},
warn: {
DEFAULT: 'var(--color-warn)',
soft: 'var(--color-warn-soft)',
},
// Semantic / decorative — fixed (not themeable)
bloom: {
coral: '#ff5050',
rose: '#f9d4d2',
deep: '#b3262b',
wine: '#5a1313',
},
storm: {
mist: '#8ebdce',
sea: '#7fadbe',
deep: '#356373',
},
},
fontFamily: {
sans: ['"Inter Variable"', 'Inter', 'Arial', 'sans-serif'],
mono: ['"JetBrains Mono Variable"', '"JetBrains Mono"', 'ui-monospace', 'monospace'],
},
fontSize: {
// Terminal-SOC display scale — reduced per §0 D9
'display-xxl': ['40px', { lineHeight: '1.1', fontWeight: '500' }],
'display-xl': ['32px', { lineHeight: '1.1', fontWeight: '500' }],
'display-lg': ['28px', { lineHeight: '1.1', fontWeight: '500' }],
'display-md': ['24px', { lineHeight: '1.1', fontWeight: '500' }],
'display-sm': ['20px', { lineHeight: '1.1', fontWeight: '500' }],
'display-xs': ['16px', { lineHeight: '1.1', fontWeight: '600' }],
'body-lg': ['18px', { lineHeight: '1.4', fontWeight: '400' }],
'body-md': ['16px', { lineHeight: '1.4', fontWeight: '400' }],
'body-emphasis': ['16px', { lineHeight: '1.4', fontWeight: '500' }],
'caption-md': ['14px', { lineHeight: '1.5', fontWeight: '400' }],
'caption-bold': ['14px', { lineHeight: '1.3', fontWeight: '700' }],
'caption-sm': ['12px', { lineHeight: '1.33', fontWeight: '400' }],
'link-md': ['16px', { lineHeight: '1.4', fontWeight: '500' }],
'button-md': ['14px', { lineHeight: '1.4', fontWeight: '600' }],
'button-sm': ['12.6px', { lineHeight: '1.0', fontWeight: '700' }],
},
spacing: {
// Named tokens complement Tailwind defaults
xxs: '4px',
xs: '8px',
sm: '12px',
md: '16px',
lg: '20px',
xl: '24px',
xxl: '32px',
section: '48px',
},
borderRadius: {
// Brutalist: 0 everywhere except status pills and avatars
none: '0px',
pill: '9999px',
},
maxWidth: {
page: '1366px',
},
},
},
plugins: [],
};
export default config;