NotS1mp/Musify
0
0
Fork 0
Code Issues 23 Pull Requests Actions Packages Projects Releases Wiki Activity
Files
4b3d0b5fbd408dd05e54a3d28d6ab7b5c599a7a0
Musify/web-player/src/lib/theme/theme.css
T
Admin 4b3d0b5fbd web-player: P1 — tokens base del sistema de diseño 
Añade de forma aditiva (sin migrar componentes) los tokens de la
sección B.1 del plan de refactor: radios (tag/thumb), tamaños de
carátula e icono, anchos de contenedor, tracking/leading tipográfico,
colores de botón (--color-btn*), recetas @utility de tipografía
(text-display-*, text-eyebrow, text-body, text-count), trazo de icono
(stroke-thin/regular/bold), superficies/grids (glass-bar, grid-cards*,
theme-transition) y el stagger de .animate-enter vía --i. Añade
variables de layout (--mf-player-side-w, --mf-menu-w, --mf-submenu-w,
--mf-range-*) y z-index semántico en theme.css. Limpia utilidades de
color sin uso (--color-accent-dim/glow/hair/line/muted, --color-on-accent)
y borra --mf-sidebar-bg (sin importadores) de theme.css y tokens.ts.
Scrollbar pasa a tokens con variante de modo claro.

Verificado con npm run build (Tailwind compila los @utility con
variantes responsive dentro de @apply).
2026-09-20 22:21:04 +02:00

178 lines
5.6 KiB
CSS
Raw Blame History

:root {
/* Dynamic tokens: overwritten at runtime from the playing track's hue.
These are the fallback values for the default accent (hue 145) so the
page never flashes unstyled before hydration. See theme/tokens.ts. */
--mf-bg: oklch(0.068 0.008 145);
--mf-elevated: oklch(0.11 0.012 145);
--mf-panel-bg: oklch(0.09 0.01 145 / 0.28);
--mf-bar-bg: oklch(0.105 0.012 145 / 0.9);
--mf-hairline: oklch(0.62 0.03 145 / 0.08);
--mf-ambient:
radial-gradient(52% 38% at 14% 0%, oklch(0.2611 0.0913 145 / 0.26), transparent 54%),
radial-gradient(46% 34% at 78% 0%, oklch(0.2347 0.085 145 / 0.2), transparent 56%);
--mf-hero-bg: linear-gradient(
105deg,
oklch(0.2295 0.0838 145 / 0.34) 0%,
oklch(0.1558 0.0663 145 / 0.11) 37%,
oklch(0.1084 0.055 145 / 0.03) 65%,
rgba(6, 6, 9, 0) 92%
);
--mf-spotlight-bg: linear-gradient(
100deg,
oklch(0.2189 0.0813 145 / 0.28) 0%,
oklch(0.1453 0.0638 145 / 0.1) 40%,
oklch(0.1084 0.055 145 / 0.03) 69%,
rgba(6, 6, 9, 0) 96%
);
--mf-modal-glow: linear-gradient(
135deg,
oklch(0.2295 0.0838 145 / 0.34) 0%,
oklch(0.1558 0.0663 145 / 0.11) 28%,
oklch(0.1084 0.055 145 / 0.03) 50%,
rgba(6, 6, 9, 0) 70%
);
--mf-logo-grad: linear-gradient(140deg, oklch(0.78 0.15 145), oklch(0.62 0.13 185) 92%);
--mf-cover-grad: linear-gradient(150deg, oklch(0.5 0.13 145), oklch(0.16 0.035 145));
--mf-liked-grad: linear-gradient(150deg, oklch(0.4 0.09 330), oklch(0.18 0.04 10));
--mf-tile-l: 0.34;
--mf-tile-c: 0.1;
--mf-tile-shade-l: 0.14;
--mf-tile-shade-c: 0.035;
--mf-accent: oklch(0.74 0.145 145);
--mf-accent-title: oklch(0.87 0.07 145);
--mf-accent-muted: oklch(0.79 0.035 145);
--mf-accent-soft-bg: oklch(0.74 0.145 145 / 0.08);
--mf-accent-line: oklch(0.74 0.145 145 / 0.2);
--mf-accent-hair: oklch(0.74 0.145 145 / 0.09);
--mf-accent-btn-bg: oklch(0.74 0.145 145 / 0.15);
--mf-accent-btn-bg-hover: oklch(0.74 0.145 145 / 0.24);
--mf-accent-glow: color-mix(in oklch, var(--mf-accent) 45%, transparent);
--mf-accent-dim: color-mix(in oklch, var(--mf-accent) 22%, transparent);
/* Fixed neutrals: deliberately hue-less, so only the accent carries color. */
--mf-text: #d9d8dc;
--mf-text-2: #8a8a8e;
--mf-text-3: #7d7d81;
--mf-text-4: #646468;
--mf-surface: rgba(255, 255, 255, 0.022);
--mf-surface-2: rgba(255, 255, 255, 0.045);
--mf-surface-hover: rgba(255, 255, 255, 0.06);
--mf-btn-bg: var(--mf-surface-2);
--mf-btn-bg-hover: var(--mf-surface-hover);
--mf-btn-secondary-bg: rgba(255, 255, 255, 0.045);
--mf-btn-secondary-bg-hover: rgba(255, 255, 255, 0.07);
--mf-border: rgba(255, 255, 255, 0.04);
--mf-border-strong: rgba(255, 255, 255, 0.09);
--mf-track: rgba(255, 255, 255, 0.09);
--mf-scrim: #000000;
--mf-on-art: #fefdfb;
--mf-on-art-2: #cac8c3;
--mf-ink: #0a0a0d;
--mf-cta-strong-bg: #ffffff;
--mf-noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
--mf-sidebar-w: 254px;
--mf-queue-w: 304px;
--mf-nav-h: 66px;
--mf-player-h: 78px;
--mf-safe-b: env(safe-area-inset-bottom, 0px);
--mf-player-side-w: 16rem;
--mf-menu-w: 15rem;
--mf-submenu-w: 16rem;
--mf-range-h: 3.5px;
--mf-range-thumb: 11px;
--mf-volume-w: 84px;
--mf-scrollbar: rgba(255, 255, 255, 0.18);
--mf-scrollbar-hover: rgba(255, 255, 255, 0.32);
--z-raised: 10;
--z-sticky: 20;
--z-backdrop: 30;
--z-menu: 40;
--z-submenu: 50;
--z-modal: 60;
--z-grain: 80;
}
/* PlayerBar switches from its compact row to the full layout at `sm` (640px). */
@media (width >= 40rem) {
:root {
--mf-player-h: 100px;
}
}
/* TabsBar (mobile/tablet nav) is replaced by the Sidebar at `lg` (1024px). */
@media (width >= 64rem) {
:root {
--mf-nav-h: 0px;
}
}
@media (width < 73.75rem) {
:root {
--mf-queue-w: 258px;
}
}
/* "Modo blanco" — flips the neutral canvas/surface/text tokens to a light
palette. Components that reference these tokens re-theme correctly;
components hardcoding literal dark-mode hex colors do not. */
:root[data-theme='light'] {
--mf-bg: oklch(0.97 0.006 90);
--mf-elevated: oklch(0.99 0.003 90);
--mf-panel-bg: oklch(0.97 0.006 90 / 0.7);
--mf-bar-bg: oklch(0.97 0.006 90 / 0.9);
--mf-hairline: rgba(0, 0, 0, 0.08);
--mf-text: #17171a;
--mf-text-2: #4a4a4e;
--mf-text-3: #6b6b6f;
--mf-text-4: #8c8c90;
--mf-surface: rgba(0, 0, 0, 0.035);
--mf-surface-2: rgba(0, 0, 0, 0.06);
--mf-surface-hover: #e8eceb;
--mf-btn-bg: var(--mf-surface-2);
--mf-btn-bg-hover: var(--mf-surface-hover);
--mf-btn-secondary-bg: rgba(0, 0, 0, 0.09);
--mf-btn-secondary-bg-hover: rgba(0, 0, 0, 0.14);
--mf-scrollbar: rgba(0, 0, 0, 0.18);
--mf-scrollbar-hover: rgba(0, 0, 0, 0.32);
--mf-border: rgba(0, 0, 0, 0.08);
--mf-border-strong: rgba(0, 0, 0, 0.14);
--mf-track: rgba(0, 0, 0, 0.12);
--mf-scrim: #ffffff;
--mf-ink: #ffffff;
--mf-cta-strong-bg: #17171a;
--mf-tile-l: 0.58;
--mf-tile-c: 0.085;
--mf-tile-shade-l: 0.42;
--mf-tile-shade-c: 0.05;
--mf-liked-grad: linear-gradient(150deg, oklch(0.62 0.12 330), oklch(0.46 0.08 10));
--mf-ambient: none;
--mf-hero-bg: linear-gradient(oklch(0.789 0.0926 145 / 0.16), oklch(0.789 0.0926 145 / 0.16));
--mf-spotlight-bg: linear-gradient(
oklch(0.789 0.0926 145 / 0.16),
oklch(0.789 0.0926 145 / 0.16)
);
--mf-modal-glow: linear-gradient(
135deg,
oklch(0.7531 0.1172 145 / 0.34) 0%,
oklch(0.789 0.0926 145 / 0.2) 30%,
oklch(0.8303 0.0641 145 / 0.1) 55%,
oklch(0.8717 0.0357 145 / 0.04) 80%,
oklch(0.88 0.03 145 / 0.02) 100%
);
}
Reference in New Issue View Git Blame Copy Permalink