web-ui: wave-1 foundation — services/web-ui/tailwind.config.js

services/web-ui/tailwind.config.js

@@ -0,0 +1,88 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: [
+    './public/**/*.html',
+    './src/**/*.{css,js}',
+  ],
+  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'),
+  ],
+};