feat: introduce design token system foundation

- Add semantic OKLch color tokens with light/dark themes
- Add typography, spacing, effects, breakpoints, z-index tokens
- Refactor base.css with backward-compatible aliases
- Add prefers-reduced-motion support
- Add MIGRATION.md for Phase 2 component audit
This commit is contained in:
Will Miao
2026-05-21 21:03:57 +08:00
parent 24b2078f21
commit f51f125cf1
9 changed files with 434 additions and 94 deletions

View File

@@ -0,0 +1,25 @@
:root {
--radius-none: 0px;
--radius-xs: 4px;
--radius-sm: 6px;
--radius-md: 8px;
--radius-lg: 12px;
--radius-xl: 16px;
--radius-full: 9999px;
--shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.05);
--shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.05);
--shadow-md: 0 2px 4px rgba(0, 0, 0, 0.1);
--shadow-lg: 0 3px 5px rgba(0, 0, 0, 0.08);
--shadow-xl: 0 4px 16px rgba(0, 0, 0, 0.15);
--shadow-focus: 0 0 0 1px var(--color-accent);
--shadow-glow: 0 2px 6px var(--color-info-glow);
--transition-fast: 150ms ease;
--transition-base: 200ms ease;
--transition-slow: 300ms ease;
--transition-bounce: 200ms cubic-bezier(0.34, 1.56, 0.64, 1);
--border-width-thin: 1px;
--border-width-thick: 2px;
}