knacky/mimic
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(design): refresh tailwind tokens for brutalist terminal aesthetic

Browse Source
This commit is contained in:
Knacky
2026-06-09 18:38:43 +02:00
parent 6c05cc2e11
commit 64da94f10d
2 changed files with 66 additions and 45 deletions
Download Patch File Download Diff File Expand all files Collapse all files

55
frontend/tailwind.config.ts
View File

@@ -1,8 +1,8 @@
import type { Config } from 'tailwindcss';
/**
* Tokens mirror DESIGN.md.
* Forma DJR Micro substitut: Inter (bundled locally via @fontsource-variable/inter).
* 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 = {
@@ -11,7 +11,7 @@ const config: Config = {
theme: {
extend: {
colors: {
// Brand & Accent — primary stays fixed (HP Electric Blue never inverts)
// Brand & Accent — primary stays fixed (never inverts)
primary: {
DEFAULT: '#024ad8',
bright: '#296ef9',
@@ -34,10 +34,19 @@ const config: Config = {
},
charcoal: 'var(--color-charcoal)',
graphite: 'var(--color-graphite)',
// Fixed dark slab — never inverts in dark mode (utility strip, footer, dark bands)
// 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',
@@ -53,26 +62,28 @@ const config: Config = {
},
fontFamily: {
sans: ['"Inter Variable"', 'Inter', 'Arial', 'sans-serif'],
mono: ['"JetBrains Mono Variable"', '"JetBrains Mono"', 'ui-monospace', 'monospace'],
},
fontSize: {
// DESIGN.md typography scale
'display-xxl': ['72px', { lineHeight: '1.0', fontWeight: '500' }],
'display-xl': ['56px', { lineHeight: '1.0', fontWeight: '500' }],
'display-lg': ['44px', { lineHeight: '1.0', fontWeight: '500' }],
'display-md': ['32px', { lineHeight: '1.0', fontWeight: '500' }],
'display-sm': ['24px', { lineHeight: '1.17', fontWeight: '500' }],
'display-xs': ['20px', { lineHeight: '1.0', fontWeight: '500' }],
'body-lg': ['18px', { lineHeight: '1.33', fontWeight: '400' }],
'body-md': ['16px', { lineHeight: '1.38', fontWeight: '400' }],
'body-emphasis': ['16px', { lineHeight: '1.38', fontWeight: '500' }],
// 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.38', fontWeight: '500' }],
'button-md': ['14px', { lineHeight: '1.4', fontWeight: '600', letterSpacing: '0.7px' }],
'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: {
// DESIGN.md spacing tokens (named, complement Tailwind defaults)
// Named tokens complement Tailwind defaults
xxs: '4px',
xs: '8px',
sm: '12px',
@@ -80,19 +91,15 @@ const config: Config = {
lg: '20px',
xl: '24px',
xxl: '32px',
section: '80px',
section: '48px',
},
borderRadius: {
// DESIGN.md radius tokens
// Brutalist: 0 everywhere except status pills and avatars
none: '0px',
xs: '2px',
sm: '3px',
md: '4px',
lg: '8px',
xl: '16px',
pill: '9999px',
},
boxShadow: {
// Kept in config for backwards compat but no component should apply them
'soft-lift': '0 2px 8px rgba(26, 26, 26, 0.08)',
floating: '0 8px 24px rgba(26, 26, 26, 0.12)',
'soft-lift-dark': '0 2px 8px rgba(0, 0, 0, 0.32)',