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:
366
reactrebuild0825/tailwind.config.js
Normal file
366
reactrebuild0825/tailwind.config.js
Normal file
@@ -0,0 +1,366 @@
|
||||
/** @type {import('tailwindcss').Config} */
|
||||
export default {
|
||||
content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}'],
|
||||
darkMode: ['class', '[data-theme="dark"]'],
|
||||
theme: {
|
||||
extend: {
|
||||
colors: {
|
||||
// Token-based semantic colors
|
||||
background: {
|
||||
primary: 'var(--color-bg-primary)',
|
||||
secondary: 'var(--color-bg-secondary)',
|
||||
tertiary: 'var(--color-bg-tertiary)',
|
||||
elevated: 'var(--color-bg-elevated)',
|
||||
overlay: 'var(--color-bg-overlay)',
|
||||
},
|
||||
text: {
|
||||
primary: 'var(--color-text-primary)',
|
||||
secondary: 'var(--color-text-secondary)',
|
||||
muted: 'var(--color-text-muted)',
|
||||
inverse: 'var(--color-text-inverse)',
|
||||
disabled: 'var(--color-text-disabled)',
|
||||
},
|
||||
glass: {
|
||||
bg: 'var(--color-glass-bg)',
|
||||
border: 'var(--color-glass-border)',
|
||||
shadow: 'var(--color-glass-shadow)',
|
||||
// Legacy opacity-based system for compatibility
|
||||
50: 'rgba(255, 255, 255, 0.05)',
|
||||
100: 'rgba(255, 255, 255, 0.1)',
|
||||
200: 'rgba(255, 255, 255, 0.15)',
|
||||
300: 'rgba(255, 255, 255, 0.2)',
|
||||
400: 'rgba(255, 255, 255, 0.25)',
|
||||
500: 'rgba(255, 255, 255, 0.3)',
|
||||
dark: {
|
||||
50: 'rgba(0, 0, 0, 0.05)',
|
||||
100: 'rgba(0, 0, 0, 0.1)',
|
||||
200: 'rgba(0, 0, 0, 0.15)',
|
||||
300: 'rgba(0, 0, 0, 0.2)',
|
||||
400: 'rgba(0, 0, 0, 0.25)',
|
||||
500: 'rgba(0, 0, 0, 0.3)',
|
||||
},
|
||||
},
|
||||
// Token-based gold system
|
||||
gold: {
|
||||
50: 'var(--color-gold-50)',
|
||||
100: 'var(--color-gold-100)',
|
||||
200: 'var(--color-gold-200)',
|
||||
300: 'var(--color-gold-300)',
|
||||
400: 'var(--color-gold-400)',
|
||||
500: 'var(--color-gold-500)',
|
||||
600: 'var(--color-gold-600)',
|
||||
700: 'var(--color-gold-700)',
|
||||
800: 'var(--color-gold-800)',
|
||||
900: 'var(--color-gold-900)',
|
||||
text: 'var(--color-gold-text)',
|
||||
},
|
||||
// Token-based accent colors
|
||||
primary: {
|
||||
50: 'var(--color-primary-50)',
|
||||
100: 'var(--color-primary-100)',
|
||||
200: 'var(--color-primary-200)',
|
||||
300: 'var(--color-primary-300)',
|
||||
400: 'var(--color-primary-400)',
|
||||
500: 'var(--color-primary-500)',
|
||||
600: 'var(--color-primary-600)',
|
||||
700: 'var(--color-primary-700)',
|
||||
800: 'var(--color-primary-800)',
|
||||
900: 'var(--color-primary-900)',
|
||||
text: 'var(--color-primary-text)',
|
||||
},
|
||||
secondary: {
|
||||
50: 'var(--color-secondary-50)',
|
||||
100: 'var(--color-secondary-100)',
|
||||
200: 'var(--color-secondary-200)',
|
||||
300: 'var(--color-secondary-300)',
|
||||
400: 'var(--color-secondary-400)',
|
||||
500: 'var(--color-secondary-500)',
|
||||
600: 'var(--color-secondary-600)',
|
||||
700: 'var(--color-secondary-700)',
|
||||
800: 'var(--color-secondary-800)',
|
||||
900: 'var(--color-secondary-900)',
|
||||
text: 'var(--color-secondary-text)',
|
||||
},
|
||||
// Token-based semantic colors
|
||||
success: {
|
||||
bg: 'var(--color-success-bg)',
|
||||
border: 'var(--color-success-border)',
|
||||
text: 'var(--color-success-text)',
|
||||
accent: 'var(--color-success-accent)',
|
||||
},
|
||||
warning: {
|
||||
bg: 'var(--color-warning-bg)',
|
||||
border: 'var(--color-warning-border)',
|
||||
text: 'var(--color-warning-text)',
|
||||
accent: 'var(--color-warning-accent)',
|
||||
},
|
||||
error: {
|
||||
bg: 'var(--color-error-bg)',
|
||||
border: 'var(--color-error-border)',
|
||||
text: 'var(--color-error-text)',
|
||||
accent: 'var(--color-error-accent)',
|
||||
},
|
||||
info: {
|
||||
bg: 'var(--color-info-bg)',
|
||||
border: 'var(--color-info-border)',
|
||||
text: 'var(--color-info-text)',
|
||||
accent: 'var(--color-info-accent)',
|
||||
},
|
||||
// Token-based border colors
|
||||
border: {
|
||||
DEFAULT: 'var(--color-border-default)',
|
||||
muted: 'var(--color-border-muted)',
|
||||
strong: 'var(--color-border-strong)',
|
||||
},
|
||||
// Enhanced gradient backgrounds (kept for compatibility)
|
||||
gradient: {
|
||||
primary: {
|
||||
from: '#0ea5e9', // sky-500
|
||||
to: '#2563eb', // blue-600
|
||||
},
|
||||
secondary: {
|
||||
from: '#8b5cf6', // violet-500
|
||||
to: '#9333ea', // purple-600
|
||||
},
|
||||
dark: {
|
||||
from: '#1e293b', // slate-800
|
||||
to: '#0f172a', // slate-900
|
||||
},
|
||||
},
|
||||
// Legacy color system for compatibility
|
||||
border: 'hsl(var(--border))',
|
||||
input: 'hsl(var(--input))',
|
||||
ring: 'hsl(var(--ring))',
|
||||
background: 'hsl(var(--background))',
|
||||
foreground: 'hsl(var(--foreground))',
|
||||
primary: {
|
||||
DEFAULT: 'hsl(var(--primary))',
|
||||
foreground: 'hsl(var(--primary-foreground))',
|
||||
},
|
||||
secondary: {
|
||||
DEFAULT: 'hsl(var(--secondary))',
|
||||
foreground: 'hsl(var(--secondary-foreground))',
|
||||
},
|
||||
destructive: {
|
||||
DEFAULT: 'hsl(var(--destructive))',
|
||||
foreground: 'hsl(var(--destructive-foreground))',
|
||||
},
|
||||
muted: {
|
||||
DEFAULT: 'hsl(var(--muted))',
|
||||
foreground: 'hsl(var(--muted-foreground))',
|
||||
},
|
||||
accent: {
|
||||
DEFAULT: 'hsl(var(--accent))',
|
||||
foreground: 'hsl(var(--accent-foreground))',
|
||||
},
|
||||
popover: {
|
||||
DEFAULT: 'hsl(var(--popover))',
|
||||
foreground: 'hsl(var(--popover-foreground))',
|
||||
},
|
||||
card: {
|
||||
DEFAULT: 'hsl(var(--card))',
|
||||
foreground: 'hsl(var(--card-foreground))',
|
||||
},
|
||||
},
|
||||
fontFamily: {
|
||||
sans: [
|
||||
'Inter',
|
||||
'-apple-system',
|
||||
'BlinkMacSystemFont',
|
||||
'Segoe UI',
|
||||
'Roboto',
|
||||
'Oxygen',
|
||||
'Ubuntu',
|
||||
'Cantarell',
|
||||
'Open Sans',
|
||||
'Helvetica Neue',
|
||||
'sans-serif',
|
||||
],
|
||||
mono: [
|
||||
'JetBrains Mono',
|
||||
'Fira Code',
|
||||
'Consolas',
|
||||
'Monaco',
|
||||
'Courier New',
|
||||
'monospace',
|
||||
],
|
||||
},
|
||||
fontSize: {
|
||||
xs: ['0.75rem', { lineHeight: '1rem' }],
|
||||
sm: ['0.875rem', { lineHeight: '1.25rem' }],
|
||||
base: ['1rem', { lineHeight: '1.5rem' }],
|
||||
lg: ['1.125rem', { lineHeight: '1.75rem' }],
|
||||
xl: ['1.25rem', { lineHeight: '1.75rem' }],
|
||||
'2xl': ['1.5rem', { lineHeight: '2rem' }],
|
||||
'3xl': ['1.875rem', { lineHeight: '2.25rem' }],
|
||||
'4xl': ['2.25rem', { lineHeight: '2.5rem' }],
|
||||
'5xl': ['3rem', { lineHeight: '1' }],
|
||||
'6xl': ['3.75rem', { lineHeight: '1' }],
|
||||
'7xl': ['4.5rem', { lineHeight: '1' }],
|
||||
'8xl': ['6rem', { lineHeight: '1' }],
|
||||
'9xl': ['8rem', { lineHeight: '1' }],
|
||||
},
|
||||
spacing: {
|
||||
xs: 'var(--spacing-xs)',
|
||||
sm: 'var(--spacing-sm)',
|
||||
md: 'var(--spacing-md)',
|
||||
lg: 'var(--spacing-lg)',
|
||||
xl: 'var(--spacing-xl)',
|
||||
'2xl': 'var(--spacing-2xl)',
|
||||
'3xl': 'var(--spacing-3xl)',
|
||||
'4xl': 'var(--spacing-4xl)',
|
||||
'5xl': 'var(--spacing-5xl)',
|
||||
'6xl': 'var(--spacing-6xl)',
|
||||
'7xl': 'var(--spacing-7xl)',
|
||||
'8xl': 'var(--spacing-8xl)',
|
||||
// Legacy spacing values for compatibility
|
||||
18: '4.5rem',
|
||||
88: '22rem',
|
||||
128: '32rem',
|
||||
144: '36rem',
|
||||
},
|
||||
borderRadius: {
|
||||
none: 'var(--radius-none)',
|
||||
sm: 'var(--radius-sm)',
|
||||
md: 'var(--radius-md)',
|
||||
lg: 'var(--radius-lg)',
|
||||
xl: 'var(--radius-xl)',
|
||||
'2xl': 'var(--radius-2xl)',
|
||||
'3xl': 'var(--radius-3xl)',
|
||||
'4xl': 'var(--radius-4xl)',
|
||||
'5xl': 'var(--radius-5xl)',
|
||||
full: 'var(--radius-full)',
|
||||
// Legacy radius values for compatibility
|
||||
DEFAULT: 'var(--radius)',
|
||||
},
|
||||
backdropBlur: {
|
||||
xs: 'var(--blur-xs)',
|
||||
sm: 'var(--blur-sm)',
|
||||
md: 'var(--blur-md)',
|
||||
lg: 'var(--blur-lg)',
|
||||
xl: 'var(--blur-xl)',
|
||||
'2xl': 'var(--blur-2xl)',
|
||||
'3xl': 'var(--blur-3xl)',
|
||||
'4xl': 'var(--blur-4xl)',
|
||||
'5xl': 'var(--blur-5xl)',
|
||||
},
|
||||
animation: {
|
||||
// Existing animations
|
||||
'fade-in': 'fadeIn 0.5s ease-in-out',
|
||||
'slide-up': 'slideUp 0.3s ease-out',
|
||||
float: 'float 6s ease-in-out infinite',
|
||||
// New glassmorphism animations
|
||||
'fade-in-up': 'fadeInUp 0.6s cubic-bezier(0.16, 1, 0.3, 1)',
|
||||
'slide-in-left': 'slideInLeft 0.5s cubic-bezier(0.16, 1, 0.3, 1)',
|
||||
'slide-in-right': 'slideInRight 0.5s cubic-bezier(0.16, 1, 0.3, 1)',
|
||||
'scale-in': 'scaleIn 0.4s cubic-bezier(0.16, 1, 0.3, 1)',
|
||||
'pulse-slow': 'pulse 4s cubic-bezier(0.4, 0, 0.6, 1) infinite',
|
||||
'bounce-slow': 'bounce 3s infinite',
|
||||
glow: 'glow 2s ease-in-out infinite alternate',
|
||||
shimmer: 'shimmer 2.5s linear infinite',
|
||||
},
|
||||
keyframes: {
|
||||
// Existing keyframes
|
||||
fadeIn: {
|
||||
'0%': { opacity: '0' },
|
||||
'100%': { opacity: '1' },
|
||||
},
|
||||
slideUp: {
|
||||
'0%': { transform: 'translateY(20px)', opacity: '0' },
|
||||
'100%': { transform: 'translateY(0)', opacity: '1' },
|
||||
},
|
||||
float: {
|
||||
'0%, 100%': { transform: 'translateY(0px)' },
|
||||
'50%': { transform: 'translateY(-20px)' },
|
||||
},
|
||||
// New premium keyframes
|
||||
fadeInUp: {
|
||||
'0%': {
|
||||
opacity: '0',
|
||||
transform: 'translateY(40px) scale(0.9)',
|
||||
},
|
||||
'100%': {
|
||||
opacity: '1',
|
||||
transform: 'translateY(0) scale(1)',
|
||||
},
|
||||
},
|
||||
slideInLeft: {
|
||||
'0%': {
|
||||
opacity: '0',
|
||||
transform: 'translateX(-40px)',
|
||||
},
|
||||
'100%': {
|
||||
opacity: '1',
|
||||
transform: 'translateX(0)',
|
||||
},
|
||||
},
|
||||
slideInRight: {
|
||||
'0%': {
|
||||
opacity: '0',
|
||||
transform: 'translateX(40px)',
|
||||
},
|
||||
'100%': {
|
||||
opacity: '1',
|
||||
transform: 'translateX(0)',
|
||||
},
|
||||
},
|
||||
scaleIn: {
|
||||
'0%': {
|
||||
opacity: '0',
|
||||
transform: 'scale(0.8)',
|
||||
},
|
||||
'100%': {
|
||||
opacity: '1',
|
||||
transform: 'scale(1)',
|
||||
},
|
||||
},
|
||||
glow: {
|
||||
'0%': {
|
||||
boxShadow: '0 0 20px rgba(217, 158, 52, 0.3)',
|
||||
},
|
||||
'100%': {
|
||||
boxShadow: '0 0 40px rgba(217, 158, 52, 0.6)',
|
||||
},
|
||||
},
|
||||
shimmer: {
|
||||
'0%': {
|
||||
backgroundPosition: '-200% 0',
|
||||
},
|
||||
'100%': {
|
||||
backgroundPosition: '200% 0',
|
||||
},
|
||||
},
|
||||
},
|
||||
boxShadow: {
|
||||
'glass-sm': 'var(--shadow-glass-sm)',
|
||||
glass: 'var(--shadow-glass-md)',
|
||||
'glass-lg': 'var(--shadow-glass-lg)',
|
||||
'glass-xl': 'var(--shadow-glass-xl)',
|
||||
'glow-sm': 'var(--shadow-glow-sm)',
|
||||
glow: 'var(--shadow-glow-md)',
|
||||
'glow-lg': 'var(--shadow-glow-lg)',
|
||||
'glow-xl': 'var(--shadow-glow-xl)',
|
||||
'inner-light': 'var(--shadow-inner-light)',
|
||||
'inner-medium': 'var(--shadow-inner-medium)',
|
||||
'inner-strong': 'var(--shadow-inner-strong)',
|
||||
},
|
||||
backgroundImage: {
|
||||
'gradient-radial': 'radial-gradient(var(--tw-gradient-stops))',
|
||||
'gradient-conic':
|
||||
'conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))',
|
||||
'glass-gradient':
|
||||
'linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.05))',
|
||||
shimmer:
|
||||
'linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent)',
|
||||
},
|
||||
maxWidth: {
|
||||
'8xl': '88rem',
|
||||
'9xl': '96rem',
|
||||
},
|
||||
screens: {
|
||||
xs: '475px',
|
||||
},
|
||||
},
|
||||
},
|
||||
plugins: [],
|
||||
};
|
||||
Reference in New Issue
Block a user