388 lines
13 KiB
CSS
388 lines
13 KiB
CSS
/* ==========================================================================
|
|
ASSESSOR Design Tokens
|
|
--------------------------------------------------------------------------
|
|
EINZIGE QUELLE FÜR FARBEN, MASSE, RADIEN, SCHATTEN, TYPOGRAFIE.
|
|
|
|
Regeln:
|
|
- Ausserhalb dieser Datei existiert KEIN Hex-Wert, KEIN rgb(), KEIN hsl().
|
|
- Ausserhalb dieser Datei existiert KEIN px-Wert fuer Abstaende, Hoehen,
|
|
Radien oder Schriftgroessen. Nur var(--token).
|
|
- Dark und Light rendern aus IDENTISCHEN semantischen Rollen.
|
|
Ein Light-Mode-Fix per Selektor-Override ist ein Fehler.
|
|
- Neue Farbe noetig? Erst semantische Rolle definieren, dann beide Themes
|
|
befuellen. Nie einen Einzelwert im Komponenten-CSS.
|
|
========================================================================== */
|
|
|
|
@layer tokens {
|
|
|
|
:root {
|
|
/* ---------- Typografie ---------- */
|
|
--font-ui: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
|
|
--font-mono: "JetBrains Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;
|
|
--font-donut-display: "Bahnschrift Condensed", "Arial Narrow", "Aptos Narrow", "Segoe UI", sans-serif;
|
|
|
|
/* ---------- Verbindlicher Donut-Standard ---------- */
|
|
--donut-rack-surface: #17191D;
|
|
--donut-card-surface: #202329;
|
|
--donut-card-surface-end: #1B1E22;
|
|
--donut-track: #373B42;
|
|
--donut-border: #3F444C;
|
|
--donut-value: #F0F2F5;
|
|
--donut-label: #B7BAC0;
|
|
--donut-all: #348CF2;
|
|
--donut-deviation: #F0AC00;
|
|
--donut-passed: #3DA96C;
|
|
--donut-not-applicable: #7B36F3;
|
|
--donut-not-run: #8A8E95;
|
|
--donut-error: #F23C47;
|
|
--donut-rack-shadow: 0 10px 28px rgba(0, 0, 0, 0.30), inset 0 1px 0 rgba(255, 255, 255, 0.04);
|
|
--donut-card-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 2px 8px rgba(0, 0, 0, 0.24);
|
|
--donut-rack-radius: 10px;
|
|
--donut-card-radius: 8px;
|
|
--donut-card-min-h: 196px;
|
|
--donut-ring-size: 128px;
|
|
--donut-ring-stroke: 11px;
|
|
--donut-title-size: 16px;
|
|
--donut-value-size: 28px;
|
|
--donut-percent-size: 17px;
|
|
|
|
--fs-micro: 11px; /* Badges, Spaltenkoepfe, Zaehler */
|
|
--fs-sm: 12px; /* Tabellenzellen, Sekundaertext, Facetten */
|
|
--fs-base: 13px; /* Controls, Standardtext, Listenzeilen */
|
|
--fs-md: 14px; /* Objekttitel (Tile, ListRow, Inspector) */
|
|
--fs-lg: 16px; /* Panel- und Detailtitel */
|
|
--fs-xl: 18px; /* Seitentitel in der Topbar. Groesster Wert im System. */
|
|
|
|
--fw-regular: 400;
|
|
--fw-medium: 500;
|
|
--fw-semibold: 600;
|
|
|
|
--lh-ui: 1.35;
|
|
--lh-prose: 1.55;
|
|
|
|
--ls-caps: 0.06em; /* nur fuer Versal-Labels in --fs-micro */
|
|
|
|
/* ---------- Raster und Abstaende (4px-Basis) ---------- */
|
|
--space-1: 4px;
|
|
--space-2: 8px;
|
|
--space-3: 12px;
|
|
--space-4: 16px;
|
|
--space-5: 20px;
|
|
--space-6: 24px;
|
|
--space-8: 32px;
|
|
--app-grid-size: 22px 22px;
|
|
|
|
/* ---------- Shell-Masse (in allen Archetypen identisch) ---------- */
|
|
--sidebar-w: 224px;
|
|
--sidebar-w-collapsed: 48px;
|
|
--topbar-h: 44px;
|
|
--band-row-h: 34px;
|
|
--contextstrip-h: 24px;
|
|
--statusbar-h: 24px;
|
|
--inspector-w: 380px;
|
|
--facetrail-w: 236px;
|
|
|
|
/* ---------- Dichte ---------- */
|
|
--control-h: 30px;
|
|
--control-h-sm: 26px;
|
|
--icon-btn: 26px;
|
|
--row-h: 32px;
|
|
--tile-h: 132px;
|
|
--tile-min-w: 260px;
|
|
|
|
/* ---------- Form ---------- */
|
|
--radius-xs: 2px; /* Badges, Chips */
|
|
--radius-sm: 3px; /* Inputs, Selects, Tiles, Zeilen */
|
|
--radius-md: 4px; /* Overlays: Dialog, Floating Window, Popover */
|
|
/* Groessere Radien existieren nicht. Panels und Shell: 0. */
|
|
|
|
/* Verbindliche Buttonform, gilt fuer jede Schaltflaeche unabhaengig von
|
|
ihrer Farbe (Nutzerentscheidung vom 2026-08-05). Abgerundete Ecken,
|
|
knapper Innenabstand oben und unten. Keine Ansicht setzt eigene
|
|
Buttonhoehen, -radien oder -polster. Ausgenommen sind nur zusammen-
|
|
gesetzte Reiter (View-Tabs, Sidebar-Navigation). */
|
|
--btn-radius: 4px;
|
|
--btn-h: 28px;
|
|
--btn-pad-x: 12px;
|
|
|
|
--bw-hairline: 1px;
|
|
--bw-emphasis: 2px; /* Rahmen bei Auswahl und Fokus */
|
|
/* Markierungsstrich: farbige linke Kante, die ein Objekt als aktiv,
|
|
ausgewaehlt oder zugehoerig markiert. Eine Breite fuer die gesamte App,
|
|
Referenz ist die Kante des Result-Fensters. Nie ein anderer Wert. */
|
|
--marker-width: 8px;
|
|
|
|
/* ---------- Motion ---------- */
|
|
--dur-fast: 90ms;
|
|
--dur-base: 140ms;
|
|
--ease: cubic-bezier(0.2, 0, 0.2, 1);
|
|
}
|
|
|
|
/* ==========================================================================
|
|
DICHTEMODI
|
|
Aendern ausschliesslich Hoehen und Abstaende.
|
|
Niemals Farben, Reihenfolge, Komponententypen oder Informationsmenge.
|
|
========================================================================== */
|
|
|
|
:root[data-density="compact"] {
|
|
--control-h: 26px;
|
|
--control-h-sm: 22px;
|
|
--icon-btn: 22px;
|
|
--row-h: 28px;
|
|
--tile-h: 116px;
|
|
--band-row-h: 30px;
|
|
}
|
|
|
|
:root[data-density="reading"] {
|
|
--control-h: 34px;
|
|
--control-h-sm: 30px;
|
|
--icon-btn: 30px;
|
|
--row-h: 40px;
|
|
--tile-h: 148px;
|
|
--band-row-h: 38px;
|
|
}
|
|
|
|
/* ==========================================================================
|
|
THEME: DARK (Standard)
|
|
========================================================================== */
|
|
|
|
:root,
|
|
:root[data-theme="dark"] {
|
|
color-scheme: dark;
|
|
|
|
/* Flaechen.
|
|
Vier Grundfarben, die in JEDEM Panel gelten (Nutzerentscheidung vom
|
|
2026-08-05). Kein Panel, keine Kachel, keine Zeile, kein Widget fuehrt
|
|
einen eigenen Grundton - auch der Donut-Rack nicht:
|
|
Hintergrund #242426 - die Flaeche, auf der alles liegt
|
|
Element #323238 - alles, was darauf sitzt und bedient wird
|
|
Textbox #1A1A1C - eingesenkt, hier wird geschrieben
|
|
Hover und Aktiv sind keine Grundfarben, sondern zwei Helligkeitsstufen
|
|
ueber dem Element. */
|
|
--surface-app: #242426; /* Grundfarbe Hintergrund */
|
|
--surface-shell: #1B1B1D; /* Chrome, kein Panel: Sidebar, Topbar, Statusbar */
|
|
--surface-panel: #242426; /* Grundfarbe Hintergrund */
|
|
--surface-panel-raised: #323238; /* Grundfarbe Element */
|
|
--surface-input: #1A1A1C; /* Grundfarbe Textbox */
|
|
--surface-hover: #3A3A42; /* Element, Hover */
|
|
--surface-active: #43434C; /* Element, gedrueckt */
|
|
--surface-selected: #3A3348; /* violett getoent */
|
|
--surface-overlay: #242426; /* Dialog, Floating Window, Popover */
|
|
--surface-scrim: rgba(6, 6, 9, 0.62);
|
|
--app-grid-pattern: radial-gradient(circle at 1px 1px, #424248 1px, transparent 0);
|
|
--graph-edge: rgba(183, 186, 192, 0.28);
|
|
--graph-finding: #E9A63C;
|
|
--graph-technique: #89939C;
|
|
--graph-tactic: #8B6EF5;
|
|
--graph-selected: #FFFFFF;
|
|
|
|
/* Rahmen */
|
|
--border-subtle: #26262C; /* Zellen-, Zeilentrenner */
|
|
--border-default: #33333B; /* Controls, Tiles, Panels */
|
|
--border-strong: #4A4A55; /* Overlays, Hover-Rahmen */
|
|
|
|
/* Text. Zwei Grundfarben, in jedem Panel dieselben:
|
|
Schrift #E2DFE6 (13.0:1 auf #242426, 9.5:1 auf #323238)
|
|
abgesetzte Schr. #B7BAC0 ( 7.9:1 auf #242426, 6.5:1 auf #323238)
|
|
Sekundaer und gedaempft sind derselbe Ton. */
|
|
--text-primary: #E2DFE6;
|
|
--text-secondary: #B7BAC0;
|
|
--text-muted: #B7BAC0;
|
|
--text-disabled: #55555E;
|
|
--text-inverse: #0D0D10;
|
|
--text-link: #7FA9F0;
|
|
|
|
/* Akzent: ausschliesslich UI-Primaeraktion und Aktivzustand.
|
|
NIE fuer Severity, NIE fuer Erfolg, NIE fuer Markierung. */
|
|
--accent: #7C5CF5;
|
|
--accent-hover: #8E73F7;
|
|
--accent-active: #6845DE;
|
|
--accent-on: #FFFFFF;
|
|
--accent-subtle: #241C3F;
|
|
|
|
/* Command Band (Filter- und Analysemodus, Signaturfarbe) */
|
|
--band-surface: #D9962A;
|
|
--band-surface-hover: #E5A33A;
|
|
--band-surface-active: #C4831C;
|
|
|
|
/* Standardgelb der Anwendung. Jede gefuellte Schaltflaeche traegt genau
|
|
diesen Ton - in Dark wie in Light (Nutzerentscheidung vom 2026-08-05).
|
|
Bewusst getrennt vom Command Band: beide sind gelb, aber das Band ist
|
|
eine Modusflaeche und der Button eine Aktion. */
|
|
--button-accent: #E9A63C;
|
|
--button-accent-hover: #F0B252;
|
|
--button-accent-text: #000000;
|
|
--band-border: #A66E12;
|
|
--band-text: #17130A;
|
|
|
|
/* Severity: ausschliesslich gefuellte Badges mit Textlabel */
|
|
--sev-critical: #E8214F;
|
|
--sev-high: #E2680F;
|
|
--sev-medium: #C99700;
|
|
--sev-low: #2E9E6B;
|
|
--sev-info: #3D8FD1;
|
|
--sev-unknown: #6E6E78;
|
|
--sev-on: #FFFFFF;
|
|
|
|
/* Outcome: ausschliesslich Textfarbe plus Glyph, nie gefuellt.
|
|
Bewusst OHNE Gruen, damit keine Kollision mit Severity low entsteht. */
|
|
--outcome-fail: #F2607F;
|
|
--outcome-pass: #A9A9B4;
|
|
--outcome-warning: #D9A82A;
|
|
--outcome-error: #E88A45;
|
|
--outcome-idle: #74747F;
|
|
|
|
/* Workflow / Review: ausschliesslich Outline-Chip mit Punkt */
|
|
--state-open: #8A8A94;
|
|
--state-progress: #3D8FD1;
|
|
--state-done: #2E9E6B;
|
|
--state-blocked: #E2680F;
|
|
--state-accepted: #74747F;
|
|
|
|
/* Systemzustaende, unabhaengig von Severity */
|
|
--state-bookmark: #1FA89E;
|
|
--state-online: #2E9E6B;
|
|
--state-offline: #E8214F;
|
|
|
|
/* Interaktion */
|
|
--focus-ring: #4CC2FF; /* eigenstaendig, kollidiert mit nichts */
|
|
--selection-border: var(--accent);
|
|
--selection-marker: var(--accent);
|
|
|
|
/* Datenvisualisierung, kategorial. Nie fuer Zustaende verwenden. */
|
|
--viz-1: #7C5CF5;
|
|
--viz-2: #3D8FD1;
|
|
--viz-3: #1FA89E;
|
|
--viz-4: #C99700;
|
|
--viz-5: #E2680F;
|
|
--viz-6: #B45BC4;
|
|
--viz-grid: #2A2A32;
|
|
|
|
/* Schatten: ausschliesslich echte Overlays */
|
|
--shadow-overlay: 0 8px 24px rgba(0, 0, 0, 0.48);
|
|
--shadow-popover: 0 4px 12px rgba(0, 0, 0, 0.42);
|
|
}
|
|
|
|
/* ==========================================================================
|
|
THEME: LIGHT (gleichwertig, kein Nachgedanke)
|
|
Identische Rollen, eigene Werte. Kontraste gegen die jeweilige
|
|
Nachbarflaeche geprueft: Text >= 4.5:1, Rahmen und Fokus >= 3:1.
|
|
========================================================================== */
|
|
|
|
:root[data-theme="light"] {
|
|
color-scheme: light;
|
|
|
|
/* Donut-Standard: identische Geometrie, helle Referenzpalette. */
|
|
--donut-rack-surface: #E7E9ED;
|
|
--donut-card-surface: #FFFFFF;
|
|
--donut-card-surface-end: #F3F4F6;
|
|
--donut-track: #D5D8DE;
|
|
--donut-border: #B9BEC7;
|
|
--donut-value: #20242A;
|
|
--donut-label: #555B65;
|
|
--donut-all: #1C70C9;
|
|
--donut-deviation: #9A6500;
|
|
--donut-passed: #1F7F4B;
|
|
--donut-not-applicable: #6D2CE8;
|
|
--donut-not-run: #626873;
|
|
--donut-error: #D42836;
|
|
--donut-rack-shadow: 0 8px 22px rgba(23, 25, 29, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.70);
|
|
--donut-card-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.86), 0 2px 7px rgba(23, 25, 29, 0.12);
|
|
--surface-app: #F1F1F4;
|
|
--surface-shell: #E4E4EA;
|
|
--surface-panel: #FFFFFF;
|
|
--surface-panel-raised: #F7F7F9;
|
|
--surface-input: #FFFFFF;
|
|
--surface-hover: #EDEDF2;
|
|
--surface-active: #E3E3EA;
|
|
--surface-selected: #EAE4FC;
|
|
--surface-overlay: #FFFFFF;
|
|
--surface-scrim: rgba(24, 24, 30, 0.32);
|
|
--app-grid-pattern: radial-gradient(circle at 1px 1px, #CBCBD3 1px, transparent 0);
|
|
--graph-edge: rgba(69, 73, 82, 0.26);
|
|
--graph-finding: #B87400;
|
|
--graph-technique: #65717C;
|
|
--graph-tactic: #6844D8;
|
|
--graph-selected: #111116;
|
|
|
|
--border-subtle: #E2E2E8;
|
|
--border-default: #CFCFD8;
|
|
--border-strong: #A8A8B4;
|
|
|
|
--text-primary: #17171C;
|
|
--text-secondary: #55555F;
|
|
--text-muted: #74747F;
|
|
--text-disabled: #A0A0AA;
|
|
--text-inverse: #FFFFFF;
|
|
--text-link: #2A5FBF;
|
|
|
|
--accent: #5B34D9;
|
|
--accent-hover: #4A28BE;
|
|
--accent-active: #3F1FA8;
|
|
--accent-on: #FFFFFF;
|
|
--accent-subtle: #EDE7FD;
|
|
|
|
--band-surface: #E9A63C;
|
|
--band-surface-hover: #F0B252;
|
|
--band-surface-active: #D8942A;
|
|
|
|
/* Standardgelb, identisch zum dunklen Skin. */
|
|
--button-accent: #E9A63C;
|
|
--button-accent-hover: #F0B252;
|
|
--button-accent-text: #000000;
|
|
--band-border: #B37B18;
|
|
--band-text: #17130A;
|
|
|
|
--sev-critical: #CE0038;
|
|
--sev-high: #BE4A00;
|
|
--sev-medium: #A16207;
|
|
--sev-low: #0B7A3E;
|
|
--sev-info: #0B6BB0;
|
|
--sev-unknown: #5C5C66;
|
|
--sev-on: #FFFFFF;
|
|
|
|
--outcome-fail: #C60F3E;
|
|
--outcome-pass: #55555F;
|
|
--outcome-warning: #8F6B00;
|
|
--outcome-error: #B85206;
|
|
--outcome-idle: #74747F;
|
|
|
|
--state-open: #6E6E78;
|
|
--state-progress: #2A6FA8;
|
|
--state-done: #1E7A50;
|
|
--state-blocked: #B85206;
|
|
--state-accepted: #74747F;
|
|
|
|
--state-bookmark: #10756D;
|
|
--state-online: #1E7A50;
|
|
--state-offline: #C60F3E;
|
|
|
|
--focus-ring: #0A66C2;
|
|
--selection-border: var(--accent);
|
|
--selection-marker: var(--accent);
|
|
|
|
--viz-1: #5B34D9;
|
|
--viz-2: #2A6FA8;
|
|
--viz-3: #10756D;
|
|
--viz-4: #8F6B00;
|
|
--viz-5: #B85206;
|
|
--viz-6: #92389F;
|
|
--viz-grid: #DFDFE6;
|
|
|
|
--shadow-overlay: 0 8px 24px rgba(20, 20, 28, 0.18);
|
|
--shadow-popover: 0 4px 12px rgba(20, 20, 28, 0.14);
|
|
}
|
|
|
|
/* ==========================================================================
|
|
REDUCED MOTION
|
|
========================================================================== */
|
|
|
|
@media (prefers-reduced-motion: reduce) {
|
|
:root {
|
|
--dur-fast: 0ms;
|
|
--dur-base: 0ms;
|
|
}
|
|
}
|
|
|
|
}
|