From 602755276ed84dae918823f74038bbf5cf960fa2 Mon Sep 17 00:00:00 2001 From: Kawa Date: Wed, 1 Apr 2026 04:33:31 +0200 Subject: [PATCH] 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 --- index.html | 22 +++++++++++++++++ src/index.css | 68 +++++++++++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 90 insertions(+) diff --git a/index.html b/index.html index ebe86c8..95f0b68 100644 --- a/index.html +++ b/index.html @@ -2,6 +2,28 @@ + Ready2Blob diff --git a/src/index.css b/src/index.css index f1d8c73..da21110 100644 --- a/src/index.css +++ b/src/index.css @@ -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); +}