schalli/tessera-ctl
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 14 Wiki Activity

style(web): Design-Tokens Mosaik (Fluent 2 / GitHub)

Browse Source 
Kuehlgraue Arbeitsflaeche, weisse Karten mit Fluent-Schatten statt
Rahmen, dunkle App-Leiste, Link-Blau, neutraler Fokusring, 6/8/12 px
Radien, Segoe-UI-Schriftstapel, Knopf-/Link-Klassen, Fluent-Eingabefeld
und reduzierte Bewegung. Die persoenliche Akzentfarbe setzt nur noch
--primary.

Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
This commit is contained in:
Schalli
2026-09-25 14:32:37 +02:00
parent 3fc33e3507
commit 3c62a1a29c
2 changed files with 264 additions and 56 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/web/src/lib/stores/auth-store.ts
+8 -14
View File
@@ -21,24 +21,18 @@ interface AuthState {
function applyAccentColor(color: string | null | undefined) {
if (typeof document === 'undefined') return;
const root = document.documentElement;
// Design „Mosaik“: die persoenliche Akzentfarbe setzt nur noch `--primary`
// (Hauptknoepfe, Auswahlpille der Seitenleiste, Reiter-Unterstrich, Logo).
// Fokusring und Auswahlflaeche der Seitenleiste bleiben neutral — eine
// helle Akzentfarbe (Standard Gelb) waere als Fokusring auf Weiss kaum
// sichtbar (1,3:1). Alte Werte frueherer Fassungen werden entfernt.
root.style.removeProperty('--ring');
root.style.removeProperty('--sidebar-accent');
root.style.removeProperty('--sidebar-accent-foreground');
if (color) {
root.style.setProperty('--primary', color);
root.style.setProperty('--ring', color);
// Sidebar active state: accent color with 15% opacity (#rrggbbaa, 0x26 ≈ 15%)
root.style.setProperty('--sidebar-accent', `${color}26`);
// Full-saturation accent text only reads well against the dark-mode sidebar's
// tinted-dark background; in light mode it's near-white behind it, so keep
// the theme's default (dark, high-contrast) foreground there instead.
if (root.classList.contains('dark')) {
root.style.setProperty('--sidebar-accent-foreground', color);
} else {
root.style.removeProperty('--sidebar-accent-foreground');
}
} else {
root.style.removeProperty('--primary');
root.style.removeProperty('--ring');
root.style.removeProperty('--sidebar-accent');
root.style.removeProperty('--sidebar-accent-foreground');
}
}