feat(08-01): define MD3 color tokens and flash prevention script

- Add @custom-variant dark directive for .dark class-based toggling - Define 15 CSS custom property token pairs (light/dark) in @layer base - Map all tokens to Tailwind utility classes via @theme with var() references - Include warning/success tokens (amber + green) for ReviewStep coverage - Add body transition with prefers-reduced-motion guard - Add inline blocking script in index.html head to prevent FOUC
2026-04-01 04:33:31 +02:00
parent 2ea0a1faaf
commit 602755276e
2 changed files with 90 additions and 0 deletions
@@ -1 +1,69 @@
@import "tailwindcss";
+
+/* Override built-in dark variant to use .dark class instead of prefers-color-scheme */
+@custom-variant dark (&:where(.dark, .dark *));
+
+/* Raw color values — overridden per theme */
+@layer base {
+  :root {
+    --r2b-primary:              #4338CA;  /* indigo-700 */
+    --r2b-on-primary:           #FFFFFF;
+    --r2b-surface:              #F9FAFB;  /* gray-50 */
+    --r2b-on-surface:           #111827;  /* gray-900 */
+    --r2b-surface-variant:      #1F2937;  /* gray-800 — code blocks */
+    --r2b-on-surface-variant:   #F3F4F6;  /* gray-100 — text on code blocks */
+    --r2b-surface-container:    #FFFFFF;  /* card/form backgrounds */
+    --r2b-on-surface-container: #374151;  /* gray-700 — labels, secondary text */
+    --r2b-outline:              #D1D5DB;  /* gray-300 — borders */
+    --r2b-error:                #EF4444;  /* red-500 */
+    --r2b-on-error:             #FFFFFF;
+    --r2b-success:              #15803D;  /* green-700 */
+    --r2b-on-success:           #F0FDF4;  /* green-50 */
+    --r2b-warning:              #D97706;  /* amber-600 */
+    --r2b-on-warning:           #FFFBEB;  /* amber-50 */
+  }
+
+  .dark {
+    --r2b-primary:              #A5B4FC;  /* indigo-300 */
+    --r2b-on-primary:           #1E1B4B;  /* indigo-950 */
+    --r2b-surface:              #111827;  /* gray-900 */
+    --r2b-on-surface:           #F9FAFB;  /* gray-50 */
+    --r2b-surface-variant:      #0F172A;  /* slate-900 — code blocks */
+    --r2b-on-surface-variant:   #E5E7EB;  /* gray-200 */
+    --r2b-surface-container:    #1F2937;  /* gray-800 — card/form backgrounds */
+    --r2b-on-surface-container: #D1D5DB;  /* gray-300 — labels, secondary text */
+    --r2b-outline:              #4B5563;  /* gray-600 — borders */
+    --r2b-error:                #FCA5A5;  /* red-300 */
+    --r2b-on-error:             #7F1D1D;  /* red-900 */
+    --r2b-success:              #86EFAC;  /* green-300 */
+    --r2b-on-success:           #14532D;  /* green-900 */
+    --r2b-warning:              #FCD34D;  /* amber-300 */
+    --r2b-on-warning:           #78350F;  /* amber-900 */
+  }
+
+  /* Smooth theme transitions — disabled for users with reduced-motion preference */
+  @media (prefers-reduced-motion: no-preference) {
+    body {
+      transition: background-color 200ms ease, color 200ms ease, border-color 200ms ease;
+    }
+  }
+}
+
+/* Wire raw values to Tailwind utility classes */
+@theme {
+  --color-primary:              var(--r2b-primary);
+  --color-on-primary:           var(--r2b-on-primary);
+  --color-surface:              var(--r2b-surface);
+  --color-on-surface:           var(--r2b-on-surface);
+  --color-surface-variant:      var(--r2b-surface-variant);
+  --color-on-surface-variant:   var(--r2b-on-surface-variant);
+  --color-surface-container:    var(--r2b-surface-container);
+  --color-on-surface-container: var(--r2b-on-surface-container);
+  --color-outline:              var(--r2b-outline);
+  --color-error:                var(--r2b-error);
+  --color-on-error:             var(--r2b-on-error);
+  --color-success:              var(--r2b-success);
+  --color-on-success:           var(--r2b-on-success);
+  --color-warning:              var(--r2b-warning);
+  --color-on-warning:           var(--r2b-on-warning);
+}