feat(theme): finalize design token system with WCAG AA compliance

- Fix gold text contrast in light theme from 3.30:1 to 6.38:1 (AA compliant) - Separate ThemeContext into definition and provider files for ESLint compliance - Update contrast report with final validation results (100% passing tests) - Ensure all accent colors meet WCAG AA standards across light/dark themes - Complete design token system with proper semantic color roles 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
2025-08-16 02:21:19 -06:00
parent a049472a13
commit 6d879d0685
35 changed files with 12075 additions and 0 deletions
--- a/reactrebuild0825/src/design-tokens/themes/dark.json
+++ b/reactrebuild0825/src/design-tokens/themes/dark.json
@@ -0,0 +1,99 @@
+{
+  "name": "dark",
+  "colors": {
+    "background": {
+      "primary": "#0f172a",
+      "secondary": "#1e293b",
+      "tertiary": "#334155",
+      "elevated": "#1e293b",
+      "overlay": "rgba(0, 0, 0, 0.8)"
+    },
+    "text": {
+      "primary": "#f8fafc",
+      "secondary": "#e2e8f0",
+      "muted": "#94a3b8",
+      "inverse": "#0f172a",
+      "disabled": "#64748b"
+    },
+    "glass": {
+      "bg": "rgba(255, 255, 255, 0.1)",
+      "border": "rgba(255, 255, 255, 0.2)",
+      "shadow": "rgba(0, 0, 0, 0.3)"
+    },
+    "accent": {
+      "gold": {
+        "50": "#fefcf0",
+        "100": "#fdf7dc",
+        "200": "#fbecb8",
+        "300": "#f7dc8a",
+        "400": "#f2c55a",
+        "500": "#d99e34",
+        "600": "#c8852d",
+        "700": "#a66b26",
+        "800": "#855424",
+        "900": "#6d4520",
+        "text": "#f2c55a"
+      },
+      "primary": {
+        "50": "#f0f9ff",
+        "100": "#e0f2fe",
+        "200": "#bae6fd",
+        "300": "#7dd3fc",
+        "400": "#38bdf8",
+        "500": "#0ea5e9",
+        "600": "#0284c7",
+        "700": "#0369a1",
+        "800": "#075985",
+        "900": "#0c4a6e"
+      },
+      "secondary": {
+        "50": "#faf5ff",
+        "100": "#f3e8ff",
+        "200": "#e9d5ff",
+        "300": "#d8b4fe",
+        "400": "#c084fc",
+        "500": "#a855f7",
+        "600": "#9333ea",
+        "700": "#7c3aed",
+        "800": "#6b21a8",
+        "900": "#581c87",
+        "text": "#d8b4fe"
+      }
+    },
+    "semantic": {
+      "success": {
+        "bg": "rgba(16, 185, 129, 0.1)",
+        "border": "rgba(16, 185, 129, 0.3)",
+        "text": "#6ee7b7",
+        "accent": "#10b981"
+      },
+      "warning": {
+        "bg": "rgba(245, 158, 11, 0.1)",
+        "border": "rgba(245, 158, 11, 0.3)",
+        "text": "#fcd34d",
+        "accent": "#f59e0b"
+      },
+      "error": {
+        "bg": "rgba(239, 68, 68, 0.1)",
+        "border": "rgba(239, 68, 68, 0.3)",
+        "text": "#fca5a5",
+        "accent": "#ef4444"
+      },
+      "info": {
+        "bg": "rgba(59, 130, 246, 0.1)",
+        "border": "rgba(59, 130, 246, 0.3)",
+        "text": "#93c5fd",
+        "accent": "#3b82f6"
+      }
+    },
+    "border": {
+      "default": "rgba(255, 255, 255, 0.1)",
+      "muted": "rgba(255, 255, 255, 0.05)",
+      "strong": "rgba(255, 255, 255, 0.2)"
+    },
+    "focus": {
+      "ring": "#d99e34",
+      "offset": "#0f172a"
+    }
+  }
+}
--- a/reactrebuild0825/src/design-tokens/themes/light.json
+++ b/reactrebuild0825/src/design-tokens/themes/light.json
@@ -0,0 +1,99 @@
+{
+  "name": "light",
+  "colors": {
+    "background": {
+      "primary": "#ffffff",
+      "secondary": "#f8fafc",
+      "tertiary": "#f1f5f9",
+      "elevated": "#ffffff",
+      "overlay": "rgba(0, 0, 0, 0.5)"
+    },
+    "text": {
+      "primary": "#0f172a",
+      "secondary": "#334155",
+      "muted": "#64748b",
+      "inverse": "#ffffff",
+      "disabled": "#94a3b8"
+    },
+    "glass": {
+      "bg": "rgba(255, 255, 255, 0.8)",
+      "border": "rgba(203, 213, 225, 0.3)",
+      "shadow": "rgba(0, 0, 0, 0.1)"
+    },
+    "accent": {
+      "gold": {
+        "50": "#fefcf0",
+        "100": "#fdf7dc",
+        "200": "#fbecb8",
+        "300": "#f7dc8a",
+        "400": "#f2c55a",
+        "500": "#d99e34",
+        "600": "#c8852d",
+        "700": "#a66b26",
+        "800": "#855424",
+        "900": "#6d4520",
+        "text": "#855424"
+      },
+      "primary": {
+        "50": "#f0f9ff",
+        "100": "#e0f2fe",
+        "200": "#bae6fd",
+        "300": "#7dd3fc",
+        "400": "#38bdf8",
+        "500": "#0ea5e9",
+        "600": "#0284c7",
+        "700": "#0369a1",
+        "800": "#075985",
+        "900": "#0c4a6e",
+        "text": "#0369a1"
+      },
+      "secondary": {
+        "50": "#faf5ff",
+        "100": "#f3e8ff",
+        "200": "#e9d5ff",
+        "300": "#d8b4fe",
+        "400": "#c084fc",
+        "500": "#a855f7",
+        "600": "#9333ea",
+        "700": "#7c3aed",
+        "800": "#6b21a8",
+        "900": "#581c87"
+      }
+    },
+    "semantic": {
+      "success": {
+        "bg": "#ecfdf5",
+        "border": "#bbf7d0",
+        "text": "#065f46",
+        "accent": "#10b981"
+      },
+      "warning": {
+        "bg": "#fffbeb",
+        "border": "#fed7aa",
+        "text": "#92400e",
+        "accent": "#f59e0b"
+      },
+      "error": {
+        "bg": "#fef2f2",
+        "border": "#fecaca",
+        "text": "#991b1b",
+        "accent": "#ef4444"
+      },
+      "info": {
+        "bg": "#eff6ff",
+        "border": "#bfdbfe",
+        "text": "#1e40af",
+        "accent": "#3b82f6"
+      }
+    },
+    "border": {
+      "default": "#e2e8f0",
+      "muted": "#f1f5f9",
+      "strong": "#cbd5e1"
+    },
+    "focus": {
+      "ring": "#d99e34",
+      "offset": "#ffffff"
+    }
+  }
+}