/* * 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. */