web-player: base design system tokens
Add, additively (no component migration yet), the tokens from section B.1 of the refactor plan: radii (tag/thumb), cover and icon sizes, container widths, typographic tracking/leading, button colors (--color-btn*), typography @utility recipes (text-display-*, text-eyebrow, text-body, text-count), icon stroke (stroke-thin/regular/bold), surfaces/grids (glass-bar, grid-cards*, theme-transition), and the .animate-enter stagger via --i. Add layout variables (--mf-player-side-w, --mf-menu-w, --mf-submenu-w, --mf-range-*) and semantic z-index in theme.css. Clean up unused color utilities (--color-accent-dim/glow/hair/line/muted, --color-on-accent) and remove --mf-sidebar-bg (no importers) from theme.css and tokens.ts. Scrollbar moves to tokens with a light-mode variant. Verified with npm run build (Tailwind compiles the @utility recipes with responsive variants inside @apply).
This commit is contained in:
@@ -67,9 +67,6 @@ export function buildThemeTokens(hue: number, mode: 'dark' | 'light' = 'dark'):
|
||||
'--mf-accent-btn-bg-hover': `oklch(${r(accentL)} ${r(accentC)} ${H} / 0.24)`,
|
||||
'--mf-bg': light ? `oklch(0.97 0.006 ${H})` : `oklch(0.068 0.008 ${H})`,
|
||||
'--mf-elevated': light ? `oklch(0.99 0.003 ${H})` : `oklch(0.11 0.012 ${H})`,
|
||||
'--mf-sidebar-bg': light
|
||||
? `linear-gradient(180deg, oklch(0.985 0.004 ${H}), oklch(0.965 0.006 ${H}))`
|
||||
: `linear-gradient(180deg, oklch(0.095 0.012 ${H}), oklch(0.068 0.007 ${H}))`,
|
||||
'--mf-panel-bg': light ? `oklch(0.97 0.006 ${H} / 0.7)` : `oklch(0.09 0.01 ${H} / 0.28)`,
|
||||
'--mf-bar-bg': light ? `oklch(0.97 0.006 ${H} / 0.9)` : `oklch(0.105 0.012 ${H} / 0.9)`,
|
||||
'--mf-hairline': light ? `oklch(0.3 0.02 ${H} / 0.1)` : `oklch(0.62 0.03 ${H} / 0.08)`,
|
||||
|
||||
Reference in New Issue
Block a user