/** * Design Tokens — bridge between Shiraito ThemeManager and Web Awesome. * * Maps existing --color-* custom properties (set by ThemeManager) * to the --wa-color-* tokens consumed by Web Awesome components. * ThemeManager continues to set the Shiraito variables; this file * simply aliases them so WA components inherit the active theme. */ :root { /* --- Primary / Brand --- */ --wa-color-primary-600: var(--color-primary); --wa-color-primary-500: var(--color-accent, var(--color-primary)); /* Bridge Shiraito --color-primary into the WA brand fill/text system. WA filled brand buttons use --wa-color-brand-fill-loud (background) and --wa-color-brand-on-loud (text). */ --wa-color-brand-fill-loud: var(--color-primary); --wa-color-brand-on-loud: #fff; /* --- Neutral / Surface --- */ --wa-color-neutral-0: var(--color-surface); --wa-color-neutral-50: var(--color-background); --wa-color-neutral-100: var(--color-background-light); --wa-color-neutral-700: var(--color-text-secondary); --wa-color-neutral-900: var(--color-text); /* --- Semantic --- */ --wa-color-success-600: var(--color-success); --wa-color-warning-600: var(--color-warning); --wa-color-danger-600: var(--color-danger); --wa-color-info-600: var(--color-info, #17a2b8); /* --- Border --- */ --wa-input-border-color: var(--color-border); --wa-input-border-color-hover: var(--color-border-light, var(--color-border)); --wa-panel-border-color: var(--color-border); /* --- Font --- */ --wa-font-family-body: 'Inter', sans-serif; --wa-font-sans: 'Inter', sans-serif; --wa-font-size-medium: 14px; /* --- Border Radius (keep Shiraito's defaults) --- */ --wa-border-radius-medium: 8px; --wa-border-radius-large: 12px; } /* --------------------------------------------------------------- Dark mode — Shiraito color overrides. Activated by adding .wa-dark to (managed by ThemeManager). Since --wa-color-* tokens above reference var(--color-*), overriding the Shiraito variables here cascades into WA components automatically. --------------------------------------------------------------- */ .wa-dark { /* --- Primary / Brand --- */ --color-primary: #60a5fa; /* blue-400 */ --color-secondary: #a78bfa; /* violet-400 */ --color-accent: #22d3ee; /* cyan-400 */ --color-gradient-start: #0e7490; /* cyan-700 */ --color-gradient-end: #1e1b4b; /* indigo-950 */ /* --- Border --- */ --color-border: rgba(255,255,255,0.1); --color-border-light: rgba(255,255,255,0.05); /* --- Background --- */ --color-background: #0f172a; /* slate-900 */ --color-background-light: #1e293b; /* slate-800 */ --color-background-alt: #0f172a; /* slate-900 */ --color-background-dark: #020617; /* slate-950 */ /* --- Surface --- */ --color-surface: #1e293b; /* slate-800 */ --color-surface-hover: rgba(255,255,255,0.08); --color-surface-active: rgba(255,255,255,0.12); /* --- Text --- */ --color-text: #e2e8f0; /* slate-200 */ --color-text-secondary: #94a3b8; /* slate-400 */ --color-text-tertiary: #64748b; /* slate-500 */ /* --- Semantic --- */ --color-success: #4ade80; /* green-400 */ --color-warning: #fbbf24; /* amber-400 */ --color-danger: #f87171; /* red-400 */ --color-danger-background: rgba(239,68,68,0.15); --color-danger-background-hover: rgba(239,68,68,0.25); --color-info: #22d3ee; /* cyan-400 */ /* --- WA brand overrides for dark --- */ --wa-color-brand-fill-loud: var(--color-primary); --wa-color-brand-on-loud: #020617; }