167 lines
7.2 KiB
CSS
167 lines
7.2 KiB
CSS
/*
|
|
* Kompatibilitaetsschicht des Altbestands.
|
|
*
|
|
* Diese Datei war bis zur Einfuehrung der Designsprache die einzige Quelle
|
|
* fuer Farbe, Dichte und Typografie. Seit `ui-tokens.css` geladen wird, ist
|
|
* sie das nicht mehr: sie bildet die alten Tokennamen ausschliesslich auf
|
|
* die semantischen Rollen der Designsprache ab (Schritt 1 der
|
|
* Umsetzungsreihenfolge in
|
|
* .claude/skills/assessor-ui/references/review-checklist.md).
|
|
*
|
|
* Regel: hier steht kein eigener Farb- oder Massewert mehr. Jede Zeile ist
|
|
* eine Weiterleitung. Die wenigen Ausnahmen sind einzeln begruendet und
|
|
* verschwinden mit der Ansicht, die sie noch braucht.
|
|
*
|
|
* Die Datei schrumpft. Wird eine Ansicht auf die Designsprache umgestellt,
|
|
* verliert sie ihre Verweise auf diese Namen; ist ein Name unbenutzt, wird
|
|
* seine Zeile geloescht - nicht aktualisiert.
|
|
*
|
|
* Der helle Skin wird nicht mehr hier oder in themes.css nachgesteuert. Beide
|
|
* Skins entstehen aus denselben Rollen in ui-tokens.css.
|
|
*/
|
|
:root {
|
|
/* ---------- Flaechen ----------
|
|
Alt: App -> Panel -> erhoben, "inset" ist ein eingesenktes Wertfeld.
|
|
Die Rollen der Designsprache treffen dieselbe Staffelung. */
|
|
--bg: var(--surface-app);
|
|
--header: var(--surface-shell);
|
|
--sidebar: var(--surface-shell);
|
|
--panel: var(--surface-panel);
|
|
--panel-soft: var(--surface-panel);
|
|
--panel-raised: var(--surface-panel-raised);
|
|
--panel-hover: var(--surface-hover);
|
|
--surface-inset: var(--surface-input);
|
|
|
|
/* ---------- Linien ---------- */
|
|
--line: var(--border-subtle);
|
|
--line-strong: var(--border-strong);
|
|
|
|
/* ---------- Text ----------
|
|
Die Designsprache kennt keine eigene Ueberschriftenfarbe: Hierarchie
|
|
entsteht ueber Groesse und Gewicht, nicht ueber Helligkeit. */
|
|
--text: var(--text-primary);
|
|
--heading: var(--text-primary);
|
|
--muted: var(--text-secondary);
|
|
--text-on-accent: var(--accent-on);
|
|
|
|
/* ---------- Zustaende ----------
|
|
Der Aktivton (bernstein) ist in der Designsprache die Signaturfarbe des
|
|
Command Bands. Auswahl ist violett getoent statt blau. */
|
|
--state-selected: var(--surface-selected);
|
|
--state-selected-text: var(--text-primary);
|
|
--state-selected-flat: var(--surface-selected-flat);
|
|
--state-selected-flat-text: var(--text-selected-flat);
|
|
--state-selected-flat-muted: var(--text-muted-selected-flat);
|
|
--state-selected-flat-border: var(--border-selected-flat);
|
|
--state-active: var(--band-surface);
|
|
--state-active-text: var(--band-text);
|
|
--result-color: var(--state-active);
|
|
|
|
/* ---------- Buttons (Ableton Live System) ---------- */
|
|
--button-border: var(--border-default);
|
|
--button-bg: var(--surface-panel-raised);
|
|
--button-bg-hover: var(--surface-hover);
|
|
--button-text: var(--text-primary);
|
|
/* Gefuellte Schaltflaeche: eigenes Standardgelb, nicht mehr der Ton des
|
|
Command Bands. Beide sind gelb, aber das Band ist eine Modusflaeche und
|
|
der Button eine Aktion - sie duerfen sich getrennt bewegen. */
|
|
--button-marked-bg: var(--button-accent);
|
|
--button-marked-bg-hover: var(--button-accent-hover);
|
|
--button-marked-text: var(--button-accent-text);
|
|
|
|
/* ---------- Markenaktion ---------- */
|
|
--legacy-accent: var(--accent);
|
|
--legacy-accent-active: var(--accent-active);
|
|
--accent-strong: var(--accent-hover);
|
|
|
|
/* ---------- Semantik: Meldungen ----------
|
|
Destruktiv ist in der Designsprache kein eigener Ton, sondern
|
|
--sev-critical (siehe .btn--destructive in ui-components.css). */
|
|
--success: var(--state-done);
|
|
--warning: var(--outcome-warning);
|
|
--danger: var(--sev-critical);
|
|
--danger-text: var(--outcome-fail);
|
|
/* Ausnahme: die Designsprache kennt keine getoente Fehlerflaeche. Der Wert
|
|
wird aus der Rolle gemischt, damit hier kein eigener Farbwert entsteht. */
|
|
--danger-surface: color-mix(in srgb, var(--sev-critical) 16%, transparent);
|
|
|
|
/* ---------- Semantik: Severity ----------
|
|
Eine Stufe, ein Ton - in beiden Skins und in jeder Darstellungsform.
|
|
Die frueher eigenstaendigen Badgetoene (--*-badge) waren dunkler als das
|
|
Hexagon derselben Stufe, weil sie weisse Schrift tragen mussten. Damit
|
|
trug ein Fund zwei verschiedene Rotwerte, je nachdem ob er als Sechseck
|
|
oder als Plakette dargestellt war. Die Namen bleiben als Weiterleitung
|
|
bestehen, bis die letzte Ansicht direkt auf --sev-* zeigt. */
|
|
--critical: var(--sev-critical);
|
|
--high: var(--sev-high);
|
|
--medium: var(--sev-medium);
|
|
--low: var(--sev-low);
|
|
--info: var(--sev-info);
|
|
--critical-badge: var(--sev-critical);
|
|
--high-badge: var(--sev-high);
|
|
--medium-badge: var(--sev-medium);
|
|
--low-badge: var(--sev-low);
|
|
--info-badge: var(--sev-info);
|
|
|
|
/* Tinte auf einer gefuellten Severity-Flaeche (Hexagon, Plakette, Graph).
|
|
Folgt dem Skin NICHT mehr: die Fuellung tut es auch nicht. */
|
|
--severity-ink: var(--sev-ink);
|
|
|
|
/* ---------- Masse ----------
|
|
Radien und Abstaende steigen leicht: die Designsprache rastert auf 4px
|
|
und erlaubt 2/3/4px Radius. */
|
|
--legacy-radius-sm: var(--radius-sm);
|
|
--legacy-radius-md: var(--radius-md);
|
|
--radius-lg: var(--radius-md);
|
|
/* Ausnahme: der Ansichtsmodus in der Sidebar ist auf ausdruecklichen
|
|
Nutzerwunsch rund (Entscheidung vom 2026-07-25) und Scrollbalkengriffe
|
|
tragen dieselbe Form. Faellt mit der Umstellung der Shell. */
|
|
--radius-pill: 999px;
|
|
--border-hair: var(--bw-hairline);
|
|
--legacy-space-1: var(--space-1);
|
|
--legacy-space-2: var(--space-2);
|
|
--legacy-space-3: var(--space-3);
|
|
--legacy-space-4: var(--space-4);
|
|
--legacy-space-5: var(--space-5);
|
|
--legacy-space-6: var(--space-6);
|
|
--space-7: var(--space-8);
|
|
--control-height: var(--control-h);
|
|
--row-height: var(--row-h);
|
|
/* Ausnahme: Abstand der Lesespalte zur Trefferliste. Die Designsprache
|
|
regelt Lesebreiten erst mit Archetyp C. */
|
|
--reader-inset: 28px;
|
|
|
|
/* ---------- Schatten ----------
|
|
Die Designsprache verbietet Schatten an Panels, Tiles, Zeilen und
|
|
Buttons. Die Alt-Tokens leiten deshalb ins Leere; die zugehoerigen
|
|
box-shadow-Deklarationen verschwinden mit der jeweiligen Ansicht. */
|
|
--shadow: none;
|
|
--shadow-raised: 0 4px 12px rgba(0, 0, 0, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.08);
|
|
--shadow-raised-hover: 0 8px 20px rgba(0, 0, 0, 0.38), inset 0 1px 0 rgba(255, 255, 255, 0.12);
|
|
|
|
/* ---------- Typografie ----------
|
|
Alte rem-Skala auf die sechs Stufen der Designsprache abgebildet. Die
|
|
Groessen bleiben dadurch unveraendert, nur ihre Quelle wechselt. */
|
|
--font: var(--font-ui);
|
|
--ui-label-size: var(--type-table-head-size);
|
|
--ui-badge-size: var(--type-badge-size);
|
|
--ui-small-size: var(--type-meta-size);
|
|
--ui-value-size: var(--type-label-size);
|
|
--ui-control-size: var(--type-button-size);
|
|
--ui-body-size: var(--type-body-size);
|
|
--ui-heading-size: var(--type-h3-size);
|
|
--ui-reading-size: var(--type-body-size);
|
|
--ui-reading-heading-size: var(--type-h2-size);
|
|
/* Ausnahme: Glyphengroesse der Symbolschaltflaechen. Die Typografieskala
|
|
endet bei 18px, weil sie Text beschreibt; ein Symbol ist kein Text.
|
|
Faellt mit der Umstellung auf .icon-btn. */
|
|
--ui-glyph-size: 21px;
|
|
--ui-label-weight: var(--fw-semibold);
|
|
--ui-strong-weight: var(--fw-semibold);
|
|
--ui-body-weight: var(--fw-regular);
|
|
--ui-label-tracking: var(--ls-caps);
|
|
}
|
|
|
|
/* Diese Datei enthaelt keinen skinabhaengigen Wert mehr. Beide Skins entstehen
|
|
vollstaendig aus den Rollen in ui-tokens.css. */
|