sync: update from private repo (d8074a7)

ui/tailwind.config.js

@@ -1,13 +1,13 @@
 import typography from '@tailwindcss/typography';
 
 /**
- * UI redesign (Refero-inspired minimal+dense).
+ * UI redesign (Refero-inspired minimal+dense) + dark mode.
  *
- * Neutral palette stays on Tailwind's `slate` scale because the
- * codebase has 700+ existing references; replacing it would be churn
- * without payoff. Refinements happen at the CSS-var layer (canvas /
- * surface / hairline tokens) and rely on Tailwind's stock semantic
- * scales (emerald/amber/red/blue/indigo) for state colors.
+ * The neutral `slate` scale and the semantic surface tokens are mapped to CSS
+ * variables (defined in src/index.css) so existing *-slate-* classes (1454
+ * uses) flip between light and dark with zero component edits. Dark inverts
+ * the slate ramp (50<->950) so fg/bg stay coherent. State colors
+ * (emerald/amber/red/blue/indigo) keep Tailwind's stock scales for now.
  */
 /** @type {import('tailwindcss').Config} */
 export default {
@@ -15,21 +15,29 @@ export default {
   theme: {
     extend: {
       colors: {
-        // Brand accent stays runtime-configurable via /api/branding.
-        // Fallback updated to the minimal-design accent (zinc-900).
         accent: 'var(--brand-primary, #18181b)',
         'accent-deep': 'var(--brand-primary-deep, #09090b)',
         'accent-soft': 'var(--brand-primary-soft, #f4f4f5)',
         'accent-ring': 'var(--brand-primary-ring, rgba(24, 24, 27, 0.25))',
         'accent-fg': 'var(--brand-primary-fg, #ffffff)',
-        ink: '#0f172a',
-        muted: '#64748b',
-        // Refero-inspired surface tokens.
-        canvas: '#ffffff',
-        surface: '#fafafa',
-        'surface-2': '#f4f4f5',
-        hairline: '#e4e4e7',
-        'hairline-soft': '#f4f4f5',
+        ink: 'var(--ink, #0f172a)',
+        muted: 'var(--muted, #64748b)',
+        canvas: 'var(--canvas, #ffffff)',
+        surface: 'var(--surface, #fafafa)',
+        'surface-2': 'var(--surface-2, #f4f4f5)',
+        hairline: 'var(--hairline, #e4e4e7)',
+        'hairline-soft': 'var(--hairline-soft, #f4f4f5)',
+        // Neutral ramp via CSS vars so *-slate-* auto-themes (1454 uses, no
+        // component edits). Light = Tailwind defaults; dark = inverted ramp.
+        slate: {
+          50: 'var(--slate-50)', 100: 'var(--slate-100)', 200: 'var(--slate-200)',
+          300: 'var(--slate-300)', 400: 'var(--slate-400)', 500: 'var(--slate-500)',
+          600: 'var(--slate-600)', 700: 'var(--slate-700)', 800: 'var(--slate-800)',
+          900: 'var(--slate-900)', 950: 'var(--slate-950)',
+        },
+        gray: {
+          400: 'var(--gray-400)', 500: 'var(--gray-500)', 700: 'var(--gray-700)',
+        },
       },
       fontFamily: {
         sans: ['"IBM Plex Sans JP"', '"Hiragino Sans"', 'system-ui', 'sans-serif'],