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

Simplify design

Browse Source
This commit is contained in:
Admin
2026-09-23 01:33:25 +02:00
parent d7199b4d1d
commit 2660c124d5
49 changed files with 356 additions and 195 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web-player/src/lib/theme/color.ts
+2 -2
View File
@@ -1,5 +1,5 @@
export const ACCENT_LIGHTNESS = 74;
export const ACCENT_CHROMA = 0.145;
export const ACCENT_HUE = 145;
export const ACCENT_CHROMA = 0.06;
export const ACCENT_HUE = 30;
export const DEFAULT_ACCENT = `oklch(${ACCENT_LIGHTNESS}% ${ACCENT_CHROMA} ${ACCENT_HUE})`;
web-player/src/lib/theme/theme.css
+23 -14
View File
@@ -7,14 +7,14 @@
--mf-tile-shade-c: 0.035;
--mf-text: #d9d8dc;
--mf-text-2: #8a8a8e;
--mf-text-3: #7d7d81;
--mf-text-4: #646468;
--mf-text-2: #b1b0b5;
--mf-surface: rgba(255, 255, 255, 0.022);
--mf-surface-2: rgba(255, 255, 255, 0.045);
--mf-surface-2: rgba(255, 255, 255, 0.055);
--mf-surface-hover: rgba(255, 255, 255, 0.06);
--mf-btn-bg-hover: var(--mf-surface-hover);
--mf-row-hover: rgba(255, 255, 255, 0.035);
--mf-btn-bg: rgba(255, 255, 255, 0.055);
--mf-btn-bg-hover: rgba(255, 255, 255, 0.09);
--mf-border: rgba(255, 255, 255, 0.04);
--mf-border-strong: rgba(255, 255, 255, 0.09);
@@ -24,7 +24,14 @@
--mf-on-art: #fefdfb;
--mf-on-art-2: #cac8c3;
--mf-ink: #0a0a0d;
--mf-cta-strong-bg: #c4c4c8;
--mf-cta-strong-bg: #c6c4cb;
--mf-cta-strong-hover: #d8d7dc;
--mf-danger-fg: oklch(0.885 0.062 18.334);
--mf-motion-fast: 150ms;
--mf-motion-base: 200ms;
--mf-motion-slow: 300ms;
--mf-ease: cubic-bezier(0.16, 1, 0.3, 1);
--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");
@@ -71,15 +78,15 @@
}
:root[data-theme='light'] {
--mf-text: #17171a;
--mf-text-2: #4a4a4e;
--mf-text-3: #6b6b6f;
--mf-text-4: #8c8c90;
--mf-text: #17161c;
--mf-text-2: #5d5c66;
--mf-surface: rgba(0, 0, 0, 0.035);
--mf-surface-2: rgba(0, 0, 0, 0.06);
--mf-surface-hover: #e8eceb;
--mf-btn-bg-hover: var(--mf-surface-hover);
--mf-surface-hover: rgba(26, 24, 38, 0.06);
--mf-row-hover: rgba(26, 24, 38, 0.04);
--mf-btn-bg: rgba(255, 255, 255, 0.7);
--mf-btn-bg-hover: #ffffff;
--mf-scrollbar: rgba(0, 0, 0, 0.18);
--mf-scrollbar-hover: rgba(0, 0, 0, 0.32);
@@ -89,8 +96,10 @@
--mf-track: rgba(0, 0, 0, 0.12);
--mf-scrim: #ffffff;
--mf-ink: #ffffff;
--mf-cta-strong-bg: #17171a;
--mf-ink: #f7f6f9;
--mf-cta-strong-bg: #1b1a20;
--mf-cta-strong-hover: #2e2d36;
--mf-danger-fg: oklch(0.5 0.16 25);
--mf-tile-l: 0.58;
--mf-tile-c: 0.085;
web-player/src/lib/theme/tokens.ts
+45 -44
View File
@@ -2,70 +2,71 @@ function r(value: number, digits = 4): string {
return value.toFixed(digits);
}
function tc(alpha: number, l: number, hue: number): string {
const lightness = 0.37 - l / 380;
const chroma = Math.max(0, 0.15 - l / 1600);
return `oklch(${r(lightness)} ${r(chroma)} ${r(hue, 1)} / ${alpha})`;
}
function tcLight(alpha: number, l: number, hue: number): string {
const depth = (88 - l) / 58;
const lightness = 0.9 - 0.14 * depth;
const chroma = 0.05 + 0.13 * depth;
return `oklch(${r(lightness)} ${r(chroma)} ${r(hue, 1)} / ${alpha})`;
}
export interface ThemeTokens {
[cssVar: string]: string;
}
export function buildThemeTokens(hue: number, mode: 'dark' | 'light' = 'dark'): ThemeTokens {
const h = ((hue % 360) + 360) % 360;
const h2 = (h + 40) % 360;
const H = r(h, 1);
const H2 = r(h2, 1);
const light = mode === 'light';
const accentL = light ? 0.8 : 0.8;
const accentC = light ? 0.4 : 0.2;
const titleL = light ? 0.5 : 0.8;
const titleC = light ? 0.1 : 0.05;
const mutedL = light ? 0.48 : 0.79;
const mutedC = light ? 0.06 : 0.035;
const accentL = light ? 0.5 : 0.72;
const accentC = light ? 0.07 : 0.06;
const titleL = light ? 0.36 : 0.86;
const titleC = light ? 0.06 : 0.03;
const mutedL = light ? 0.42 : 0.8;
const mutedC = light ? 0.05 : 0.02;
const accent = `oklch(${r(accentL)} ${r(accentC)} ${H})`;
const g = (l1: number, c1: number, a1: number, l2: number, c2: number, a2: number) =>
`linear-gradient(90deg, oklch(${l1} ${c1} ${H} / ${a1}), oklch(${l2} ${c2} ${H} / ${a2}))`;
const gActive = light
? g(0.82, 0.05, 0.55, 0.87, 0.035, 0.36)
: g(0.46, 0.06, 0.34, 0.4, 0.045, 0.22);
const gHover = light
? g(0.86, 0.035, 0.38, 0.9, 0.025, 0.24)
: g(0.42, 0.045, 0.26, 0.38, 0.035, 0.17);
const glow = (l: number, c: number, a: number) => `oklch(${l} ${c} ${H} / ${a})`;
// Fixed danger hue so error dialogs read red whatever the theme hue is.
const dangerGlow = (l: number, c: number, a: number) => `oklch(${l} ${c} 25 / ${a})`;
return {
'--mf-accent': `oklch(${r(accentL)} ${r(accentC)} ${H})`,
'--mf-accent': accent,
'--mf-accent-title': `oklch(${r(titleL)} ${r(titleC)} ${H})`,
'--mf-accent-muted': `oklch(${r(mutedL)} ${r(mutedC)} ${H})`,
'--mf-accent-soft-bg': `color-mix(in srgb, oklch(${r(accentL)} ${r(accentC)} ${H}) 8%, var(--mf-bg))`,
'--mf-accent-soft-bg': `color-mix(in srgb, ${accent} 12%, var(--mf-bg))`,
'--mf-accent-line': `oklch(${r(accentL)} ${r(accentC)} ${H} / 0.2)`,
'--mf-accent-hair': `oklch(${r(accentL)} ${r(accentC)} ${H} / 0.09)`,
'--mf-accent-btn-bg': `color-mix(in srgb, oklch(${r(accentL)} ${r(accentC)} ${H}) 15%, var(--mf-bg))`,
'--mf-accent-btn-bg-hover': `color-mix(in srgb, oklch(${r(accentL)} ${r(accentC)} ${H}) 24%, var(--mf-bg))`,
'--mf-bg': light ? `oklch(0.97 0.014 ${H})` : `oklch(0.075 0.02 ${H})`,
'--mf-elevated': light ? `oklch(0.99 0.008 ${H})` : `oklch(0.12 0.025 ${H})`,
'--mf-panel-bg': light ? `oklch(0.97 0.014 ${H} / 0.7)` : `oklch(0.1 0.022 ${H} / 0.28)`,
'--mf-bar-bg': light ? `oklch(0.97 0.014 ${H} / 0.9)` : `oklch(0.115 0.025 ${H} / 0.9)`,
'--mf-hairline': light ? `oklch(0.3 0.035 ${H} / 0.1)` : `oklch(0.62 0.05 ${H} / 0.08)`,
'--mf-accent-btn-bg': `color-mix(in srgb, ${accent} 18%, var(--mf-bg))`,
'--mf-accent-btn-bg-hover': `color-mix(in srgb, ${accent} 26%, var(--mf-bg))`,
'--mf-g-active': gActive,
'--mf-g-hover': gHover,
'--mf-bg': light ? `oklch(0.975 0.012 ${H})` : `oklch(0.068 0.008 ${H})`,
'--mf-elevated': light ? `oklch(0.99 0.008 ${H})` : `oklch(0.12 0.012 ${H})`,
'--mf-panel-bg': light ? 'rgba(255, 255, 255, 0.28)' : 'rgba(0, 0, 0, 0.16)',
'--mf-bar-bg': light ? `oklch(0.99 0.01 ${H} / 0.86)` : `oklch(0.105 0.012 ${H} / 0.9)`,
'--mf-hairline': light ? `oklch(0.3 0.02 ${H} / 0.06)` : `oklch(0.62 0.02 ${H} / 0.05)`,
'--mf-ambient': light
? 'none'
: `radial-gradient(95% 85% at 20% 0%, ${tc(0.12, 30, h)}, transparent 88%), radial-gradient(90% 80% at 80% 0%, ${tc(0.09, 40, h)}, transparent 88%)`,
'--mf-hero-tint': light ? tcLight(1, 55, h) : tc(1, 42, h),
? `radial-gradient(80% 70% at 12% 0%, ${glow(0.9, 0.05, 0.55)}, transparent 75%), radial-gradient(70% 60% at 88% 8%, ${glow(0.92, 0.035, 0.4)}, transparent 75%), radial-gradient(90% 70% at 50% 110%, ${glow(0.93, 0.03, 0.35)}, transparent 80%), linear-gradient(180deg, ${glow(0.96, 0.02, 0.4)}, transparent 60%)`
: `radial-gradient(75% 65% at 12% 0%, ${glow(0.3, 0.045, 0.5)}, transparent 75%), radial-gradient(65% 55% at 85% 5%, ${glow(0.24, 0.035, 0.35)}, transparent 75%), radial-gradient(90% 70% at 50% 105%, ${glow(0.18, 0.025, 0.3)}, transparent 80%), linear-gradient(180deg, ${glow(0.14, 0.02, 0.35)}, transparent 55%)`,
'--mf-hero-tint': light ? `oklch(0.8 0.05 ${H})` : `oklch(0.3 0.04 ${H})`,
'--mf-hero-bg': light
? `linear-gradient(${tcLight(0.1, 55, h)}, ${tcLight(0.1, 55, h)})`
: `linear-gradient(${tc(0.1, 38, h)}, ${tc(0.1, 38, h)})`,
? `linear-gradient(120deg, ${glow(0.9, 0.04, 0.6)}, ${glow(0.96, 0.02, 0.4)} 60%)`
: `linear-gradient(120deg, ${glow(0.24, 0.04, 0.55)}, ${glow(0.14, 0.02, 0.35)} 60%, ${glow(0.12, 0.015, 0.25)})`,
'--mf-modal-glow': light
? `linear-gradient(135deg, ${tcLight(0.34, 42, h)} 0%, ${tcLight(0.2, 55, h)} 30%, ${tcLight(0.1, 70, h)} 55%, ${tcLight(0.04, 85, h)} 80%, ${tcLight(0.02, 88, h)} 100%)`
: `linear-gradient(135deg, ${tc(0.34, 42, h)} 0%, ${tc(0.11, 70, h)} 28%, ${tc(0.03, 88, h)} 50%, rgba(6,6,9,0) 70%)`,
? `linear-gradient(135deg, ${glow(0.88, 0.05, 0.5)} 0%, ${glow(0.93, 0.03, 0.2)} 40%, transparent 75%)`
: `linear-gradient(135deg, ${glow(0.3, 0.045, 0.4)} 0%, ${glow(0.2, 0.03, 0.15)} 35%, transparent 70%)`,
'--mf-modal-glow-danger': light
? `linear-gradient(135deg, ${dangerGlow(0.86, 0.07, 0.55)} 0%, ${dangerGlow(0.92, 0.04, 0.22)} 40%, transparent 75%)`
: `linear-gradient(135deg, ${dangerGlow(0.34, 0.1, 0.45)} 0%, ${dangerGlow(0.22, 0.06, 0.18)} 35%, transparent 70%)`,
'--mf-spotlight-bg': light
? `linear-gradient(${tcLight(0.1, 55, h)}, ${tcLight(0.1, 55, h)})`
: `linear-gradient(${tc(0.1, 38, h)}, ${tc(0.1, 38, h)})`,
'--mf-logo-grad': light
? `linear-gradient(140deg, oklch(0.74 0.18 ${H}), oklch(0.58 0.16 ${H2}) 92%)`
: `linear-gradient(140deg, oklch(0.78 0.15 ${H}), oklch(0.62 0.13 ${H2}) 92%)`,
? `linear-gradient(120deg, ${glow(0.9, 0.04, 0.55)}, ${glow(0.96, 0.02, 0.35)} 55%)`
: `linear-gradient(120deg, ${glow(0.22, 0.04, 0.5)}, ${glow(0.13, 0.02, 0.3)} 55%, ${glow(0.11, 0.015, 0.2)})`,
'--mf-logo-grad': `linear-gradient(${accent}, ${accent})`,
'--mf-cover-grad': light
? `linear-gradient(150deg, oklch(0.7 0.16 ${H}), oklch(0.54 0.11 ${H}))`
: `linear-gradient(150deg, oklch(0.5 0.13 ${H}), oklch(0.16 0.035 ${H}))`
? `linear-gradient(150deg, oklch(0.84 0.03 ${H}), oklch(0.74 0.02 ${H}))`
: `linear-gradient(150deg, oklch(0.34 0.03 ${H}), oklch(0.18 0.015 ${H}))`
};
}