Zac Gaetano
3b89cf2d5f
Three bugs found during task 20 verify, all fixed: 1. Tailwind CLI does NOT read postcss.config.js. Switched Dockerfile to npx postcss + postcss-cli so the postcss plugin chain actually runs. 2. postcss-import was not installed but app.css uses @import for the primitive component files. Added postcss-import + cssnano (for prod minification under --env production). 3. @import statements must come BEFORE any other rules per CSS spec. app.css had @tailwind base/components ABOVE @import, so postcss-import silently skipped every component @import. Moved all @imports to the top, @tailwind directives below. Bundle went from 121KB with 0 wd-* classes to 138KB with 116 wd-* classes. Also added tailwind safelist for wd-/is-/nav-dev-badge so the wave-2 migration of HTML files cannot accidentally tree-shake primitives.
93 lines
3 KiB
JavaScript
93 lines
3 KiB
JavaScript
/** @type {import('tailwindcss').Config} */
|
|
module.exports = {
|
|
content: [
|
|
'./public/**/*.html',
|
|
'./src/**/*.{css,js}',
|
|
],
|
|
safelist: [
|
|
{ pattern: /^wd-/ },
|
|
{ pattern: /^is-/ },
|
|
'nav-dev-badge',
|
|
],
|
|
darkMode: 'class',
|
|
theme: {
|
|
extend: {
|
|
colors: {
|
|
// ── Surfaces (5-step depth, tinted toward brand hue 266) ──
|
|
'bg-deep': 'oklch(8% 0.011 266)',
|
|
'bg-base': 'oklch(11% 0.010 266)',
|
|
'bg-panel': 'oklch(15% 0.013 266)',
|
|
'bg-surface': 'oklch(19% 0.014 266)',
|
|
'bg-raised': 'oklch(24% 0.015 266)',
|
|
'bg-hover': 'oklch(28% 0.015 266)',
|
|
|
|
// ── Accent (brand) ──
|
|
accent: {
|
|
DEFAULT: 'oklch(45% 0.20 266)',
|
|
subtle: 'oklch(55% 0.20 266 / 0.12)',
|
|
border: 'oklch(55% 0.20 266 / 0.36)',
|
|
},
|
|
|
|
// ── Text ──
|
|
'text-primary': 'oklch(94% 0.008 266)',
|
|
'text-secondary': 'oklch(72% 0.014 266)',
|
|
// tertiary bumped from 52% to 56% per a11y section in the spec
|
|
'text-tertiary': 'oklch(56% 0.012 266)',
|
|
'text-disabled': 'oklch(38% 0.010 266)',
|
|
|
|
// ── Borders ──
|
|
'border-faint': 'oklch(22% 0.013 266)',
|
|
'border-default': 'oklch(28% 0.015 266)',
|
|
'border-strong': 'oklch(38% 0.018 266)',
|
|
|
|
// ── Status / semantic signal ──
|
|
'signal-good': 'oklch(70% 0.18 148)',
|
|
'signal-bad': 'oklch(64% 0.22 25)',
|
|
'signal-warn': 'oklch(80% 0.16 90)',
|
|
'signal-idle': 'oklch(58% 0.012 266)',
|
|
'signal-good-bg': 'oklch(70% 0.18 148 / 0.12)',
|
|
'signal-bad-bg': 'oklch(64% 0.22 25 / 0.12)',
|
|
'signal-warn-bg': 'oklch(80% 0.16 90 / 0.12)',
|
|
},
|
|
fontFamily: {
|
|
sans: ['Inter', '-apple-system', 'BlinkMacSystemFont', 'Segoe UI', 'system-ui', 'sans-serif'],
|
|
mono: ['"JetBrains Mono"', 'ui-monospace', '"SF Mono"', 'Consolas', 'monospace'],
|
|
},
|
|
fontSize: {
|
|
// tighter scale per density target
|
|
'xs': ['11px', { lineHeight: '1.4' }],
|
|
'sm': ['13px', { lineHeight: '1.5' }],
|
|
'base': ['14px', { lineHeight: '1.5' }],
|
|
'md': ['16px', { lineHeight: '1.4' }],
|
|
'lg': ['18px', { lineHeight: '1.4' }],
|
|
'xl': ['22px', { lineHeight: '1.3' }],
|
|
'2xl': ['28px', { lineHeight: '1.2' }],
|
|
'3xl': ['40px', { lineHeight: '1.1' }],
|
|
'tc': ['64px', { lineHeight: '1' }], // tally-grade timecode
|
|
},
|
|
borderRadius: {
|
|
'sm': '4px',
|
|
'md': '6px',
|
|
'lg': '8px',
|
|
},
|
|
transitionTimingFunction: {
|
|
'out-quart': 'cubic-bezier(0.25, 1, 0.5, 1)',
|
|
'out-expo': 'cubic-bezier(0.16, 1, 0.3, 1)',
|
|
},
|
|
transitionDuration: {
|
|
'120': '120ms',
|
|
'180': '180ms',
|
|
'240': '240ms',
|
|
},
|
|
zIndex: {
|
|
'dropdown': '40',
|
|
'overlay': '80',
|
|
'panel': '90',
|
|
'toast': '200',
|
|
},
|
|
},
|
|
},
|
|
plugins: [
|
|
require('flyonui'),
|
|
],
|
|
};
|