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>
This commit is contained in:
99
reactrebuild0825/src/design-tokens/themes/dark.json
Normal file
99
reactrebuild0825/src/design-tokens/themes/dark.json
Normal file
@@ -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"
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user