NotS1mp/Musify
0
0
Fork 0
Code Issues 23 Pull Requests Actions Packages Projects Releases Wiki Activity

web-player: base design system tokens

Browse Source 
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:
Admin
2026-09-20 22:21:04 +02:00
parent 96c75a32c8
commit 11789e78fe
5 changed files with 137 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web-player/src/routes/layout.css
+115 -13
View File
@@ -20,15 +20,9 @@
--color-muted: var(--mf-text-4);
--color-accent: var(--mf-accent);
--color-accent-soft: var(--mf-accent-title);
--color-accent-muted: var(--mf-accent-muted);
--color-accent-tint: var(--mf-accent-soft-bg);
--color-accent-line: var(--mf-accent-line);
--color-accent-hair: var(--mf-accent-hair);
--color-accent-btn: var(--mf-accent-btn-bg);
--color-accent-btn-hover: var(--mf-accent-btn-bg-hover);
--color-accent-glow: var(--mf-accent-glow);
--color-accent-dim: var(--mf-accent-dim);
--color-on-accent: var(--mf-on-art);
--color-ink: var(--mf-ink);
--color-cta-strong: var(--mf-cta-strong-bg);
--color-scrim: var(--mf-scrim);
@@ -36,13 +30,42 @@
--color-on-art-2: var(--mf-on-art-2);
--color-danger: oklch(63.7% 0.15 25.331);
--color-danger-fg: oklch(88.5% 0.062 18.334);
--color-btn: var(--mf-btn-bg);
--color-btn-hover: var(--mf-btn-bg-hover);
--color-btn-glass: var(--mf-btn-secondary-bg);
--color-btn-glass-hover: var(--mf-btn-secondary-bg-hover);
--radius-tag: 0.25rem;
--radius-thumb: 0.5rem;
--radius-control: 0.625rem;
--radius-panel: 1.125rem;
--radius-panel-lg: 1.375rem;
--radius-art: 0.8125rem;
--radius-art-lg: 1.125rem;
--radius-art-round: 1.75rem;
--radius-panel: 1.125rem;
--radius-panel-lg: 1.375rem;
--spacing-cover-xs: 2.25rem;
--spacing-cover-sm: 2.625rem;
--spacing-cover-md: 3rem;
--spacing-cover-lg: 3.5rem;
--spacing-cover-xl: 5.5rem;
--spacing-cover-2xl: 8.5rem;
--spacing-cover-hero: 9rem;
--spacing-cover-hero-sm: 10.25rem;
--spacing-icon-xs: 0.875rem;
--spacing-icon-sm: 1rem;
--spacing-icon-md: 1.125rem;
--spacing-icon-lg: 1.25rem;
--spacing-icon-xl: 2.25rem;
--container-prose-sm: 26rem;
--container-hero: 34rem;
--container-search: 30rem;
--container-cta: 20rem;
--tracking-display: -0.02em;
--tracking-eyebrow: 0.1em;
--leading-body: 1.65;
}
@utility page-x {
@@ -73,6 +96,84 @@
scrollbar-gutter: stable;
}
@utility stroke-thin {
stroke-width: 1.3;
}
@utility stroke-regular {
stroke-width: 1.8;
}
@utility stroke-bold {
stroke-width: 2.5;
}
@utility text-display-1 {
@apply font-display text-3xl font-medium tracking-tight sm:text-4xl;
}
@utility text-display-2 {
@apply font-display text-2xl font-medium tracking-tight;
}
@utility text-display-3 {
@apply font-display text-xl font-medium tracking-display;
}
@utility text-display-4 {
@apply font-display text-lg font-medium tracking-tight;
}
@utility text-eyebrow {
@apply text-xs font-medium tracking-widest uppercase;
}
@utility text-body {
@apply text-sm leading-body;
}
@utility text-count {
@apply text-xs tabular-nums;
}
@utility theme-transition {
transition: background 0.5s ease-out;
}
@utility glass-bar {
background-image: var(--mf-bar-bg);
border-top: 1px solid var(--mf-hairline);
backdrop-filter: blur(24px);
transition: background 0.5s ease-out;
}
@utility grid-cards {
display: grid;
gap: --spacing(3);
grid-template-columns: repeat(auto-fill, minmax(9.375rem, 1fr));
@media (width >= 40rem) {
gap: --spacing(4);
grid-template-columns: repeat(auto-fill, minmax(10.3125rem, 1fr));
}
}
@utility grid-cards-lg {
display: grid;
gap: --spacing(3);
grid-template-columns: repeat(auto-fill, minmax(11.25rem, 1fr));
@media (width >= 40rem) {
gap: --spacing(4);
grid-template-columns: repeat(auto-fill, minmax(13.125rem, 1fr));
}
}
@utility grid-tiles {
display: grid;
gap: --spacing(5);
grid-template-columns: repeat(auto-fill, minmax(10.25rem, 1fr));
}
@utility grid-wide {
display: grid;
gap: --spacing(3.5);
grid-template-columns: repeat(auto-fill, minmax(16.5rem, 1fr));
}
@layer base {
svg.lucide {
stroke-width: 1.8;
}
}
:root {
color-scheme: dark;
}
@@ -161,6 +262,7 @@ button:disabled {
.animate-enter {
animation: fade-up 0.35s cubic-bezier(0.16, 1, 0.3, 1) both;
animation-delay: calc(min(var(--i, 0), 10) * 45ms);
}
.animate-pop {
@@ -193,7 +295,7 @@ button:disabled {
html {
scroll-behavior: smooth;
scrollbar-width: thin;
scrollbar-color: rgba(255, 255, 255, 0.18) transparent;
scrollbar-color: var(--mf-scrollbar) transparent;
background-color: var(--mf-bg);
-webkit-tap-highlight-color: transparent;
overflow-x: hidden;
@@ -212,7 +314,7 @@ body::after {
content: '';
position: fixed;
inset: 0;
z-index: 80;
z-index: var(--z-grain);
pointer-events: none;
opacity: 0.035;
mix-blend-mode: overlay;
@@ -225,12 +327,12 @@ body::after {
}
::-webkit-scrollbar-thumb {
background-color: rgba(255, 255, 255, 0.18);
background-color: var(--mf-scrollbar);
border-radius: 9999px;
}
::-webkit-scrollbar-thumb:hover {
background-color: rgba(255, 255, 255, 0.32);
background-color: var(--mf-scrollbar-hover);
}
::-webkit-scrollbar-track {