/* * mipla · Komponenten-Tokens (Spezifikation: brand/components.md) * * Dritte Ebene über tokens.css: primitiv -> semantisch -> Komponente. Hier steht, welche * semantische Rolle ein wiederkehrendes Element benutzt, damit nicht jede Oberfläche ihren * eigenen Knopf erfindet. * * Zwei Regeln tragen diese Datei: * * 1. Kein --c-* hier. Eine Komponente liest nie eine primitive Variable, sondern nur * semantische Rollen oder ihre eigenen Component-Tokens. So lässt sich ein Knopf * ändern, ohne die Marke anzufassen, und die Marke ändern, ohne jeden Knopf zu suchen. * 2. Kein Dark-Block. Jeder Wert hier zeigt auf eine semantische Rolle, und die schaltet * sich in tokens.css selbst um. var() wird bei der Verwendung aufgelöst, nicht bei der * Deklaration; ein zweiter Block hier wäre eine zweite Wahrheit, die auseinanderläuft. * Wer hier einen modusabhängigen Wert braucht, hat die falsche Ebene erwischt. * * Diese Datei enthält Werte, keine Regelsätze: kein Framework, keine Klassen-Bibliothek. * Die Oberflächen sind serverseitig gerendert und bringen ihr eigenes CSS mit; sie lesen * hier die Werte und halten sich an brand/components.md. Der Beleg, dass beides zusammen * trägt, ist brand/belege/komponenten.html. * * `transparent` und `currentColor` sind keine Farbwerte der Marke, sondern die Abwesenheit * einer Fläche und der Verweis auf die Textfarbe. Sie sind hier erlaubt. * * Kontraste gemessen, nicht geschätzt: brand/tools/contrast_check.py liest diese Datei * mit und prüft jede Rolle in Light und Dark. */ :root { /* ===== Dichte und Abstände ======================================================== * Nicht nach Gefühl, sondern nach Rolle. Wer einen Abstand setzt, sucht die Rolle und * nimmt deren Token; wer eine --space-*-Stufe direkt greift, setzt eine neue Konvention. * Nähe bedeutet Zusammengehörigkeit: der Abstand innerhalb einer Gruppe muss kleiner * sein als der zur nächsten, sonst liest das Auge die falsche Gruppierung. */ --gap-inline: var(--space-2); /* Symbol zu Text, Chip zu Chip, Knopf zu Knopf */ --gap-stack: var(--space-3); /* zwei Zeilen innerhalb einer Komponente */ --gap-group: var(--space-4); /* Feld zu Feld, Kachel zu Kachel */ --gap-block: var(--space-5); /* Abschnitt zu Abschnitt innerhalb einer Fläche */ --gap-section: var(--space-6); /* Fläche zu Fläche, Abstand zum Seitenende */ --pad-compact: var(--space-3); /* Kachel, Tabellenzelle, Listenzeile */ --pad-comfort: var(--space-5); /* Anmeldefläche, Dialog, alles mit einer Aufgabe */ /* Tippziel. 2.75rem = 44 px bei Standardschrift, die kleinste Fläche, die auf einem Handy zuverlässig getroffen wird. Gilt für Knopf, Feld und Navigationseintrag. */ --target-min: 2.75rem; /* ===== Fokusring ================================================================== * Ein einziger Ring, überall gleich. Nie `outline: none` ohne Ersatz. * Der Versatz ist nicht Dekoration: mit ihm liegt der Ring auf der umgebenden Fläche * und misst gegen sie, nicht gegen die Komponente, die er umschliesst. */ --focus-ring-width: 2px; --focus-ring-offset: 2px; --focus-ring-color: var(--focus); /* Auf einer Markenfläche (Kopfzeile, primärer Knopf) hält --focus keine 3:1 gegen --accent, beide sind die Marke. Dort trägt die Gegenfarbe der Markenfläche. */ --focus-ring-color-on-accent: var(--accent-ink); /* ===== Fläche und Karte =========================================================== * Drei Ebenen, immer in dieser Richtung: --surface trägt die Seite, --surface-raised * den Inhalt, --surface-sunken das Vertiefte (Tabellenkopf, Spur, Ruhefläche). * Eine Karte auf einer Karte gibt es nicht: wer eine dritte Ebene braucht, braucht * eine Trennlinie. */ --card-bg: var(--surface-raised); --card-border: var(--line); --card-radius: var(--radius); --card-shadow: var(--shadow-card); --card-pad: var(--pad-compact); --card-gap: var(--gap-stack); --sunken-bg: var(--surface-sunken); --sunken-border: var(--line-soft); /* Trennlinien: strukturell trennt Bereiche, dekorativ trennt gleichartige Zeilen. */ --divider-strong: var(--line); /* Abschnittskante, Panel-Fuss, Tabellenkopf */ --divider-soft: var(--line-soft); /* Zeilentrenner, kein Kontrastziel */ /* ===== Eingabefeld ================================================================ * Der Rand ist ein UI-Element und muss 3:1 halten: --line, niemals --line-soft. * Ein Feld ohne sichtbaren Rand ist kein Feld, sondern eine Vermutung. */ --field-bg: var(--surface-raised); --field-ink: var(--ink); --field-border: var(--line); --field-border-hover: var(--ink-faint); --field-border-focus: var(--accent); --field-border-width: 1px; --field-radius: var(--radius); --field-pad-x: var(--space-3); --field-pad-y: var(--space-2); --field-min-height: var(--target-min); --field-gap: var(--space-1); /* Beschriftung zu Feld, Feld zu Hilfetext */ --field-label-ink: var(--ink-soft); --field-hint-ink: var(--ink-faint); --field-placeholder-ink: var(--ink-faint); /* Pflichtfeld: das Sternchen ist die Abkürzung, nicht die Aussage. Es steht neben einer ausgeschriebenen Legende, und das Feld trägt `required`. */ --field-required-ink: var(--state-critical); /* Fehler: Farbe, Randstärke und Text zugleich. Der Rand ist eine Linie, also der Flächenwert; die Meldung darunter ist Text, also der Textwert. */ --field-error-border: var(--state-critical-area); --field-error-width: 2px; --field-error-ink: var(--state-critical); --field-error-bg: var(--state-critical-tint); /* Deaktiviert. WCAG nimmt inaktive Elemente vom Kontrastziel aus; hier hält der Text trotzdem 4.5:1, weil ein deaktiviertes Feld gelesen werden muss, um zu verstehen, warum es deaktiviert ist. */ --field-disabled-bg: var(--surface-sunken); --field-disabled-ink: var(--ink-faint); --field-disabled-border: var(--line-soft); /* ===== Knöpfe ===================================================================== * Vier Rollen, eine Hierarchie. Genau EIN primärer Knopf pro Fläche, das ist eine * Regel, keine Empfehlung: zwei primäre Knöpfe stellen zwei Fragen gleichzeitig. * Ein destruktiver Knopf ersetzt den primären auf seiner Fläche. */ --btn-min-height: var(--target-min); --btn-pad-x: var(--space-4); --btn-gap: var(--gap-inline); --btn-radius: var(--radius); --btn-weight: var(--weight-medium); --btn-border-width: 1px; /* Gedrückt: der Inhalt rückt um eine Haarlinie nach, farblich bleibt es beim Hover-Zustand. Ein dritter Markenton für 120 ms Mausdruck wäre ein Wert, den niemand nachrechnen will. */ --btn-active-shift: 1px; --btn-primary-bg: var(--accent); --btn-primary-ink: var(--accent-ink); --btn-primary-border: var(--accent); --btn-primary-bg-hover: var(--accent-strong); --btn-secondary-bg: transparent; --btn-secondary-ink: var(--accent); --btn-secondary-border: var(--line); --btn-secondary-bg-hover: var(--accent-tint); --btn-quiet-bg: transparent; --btn-quiet-ink: var(--accent); --btn-quiet-border: transparent; --btn-quiet-bg-hover: var(--accent-tint); /* Destruktiv: ruhend konturiert, erst im Hover gefüllt. Eine Aktion, die etwas löscht, wird nicht beworben; und die gefüllte Fläche im Hover zeigt unmissverständlich, dass gleich etwas passiert. */ --btn-danger-bg: transparent; --btn-danger-ink: var(--state-critical); --btn-danger-border: var(--state-critical-area); --btn-danger-bg-hover: var(--state-critical); --btn-danger-ink-hover: var(--state-ink); /* Knopf auf einer Markenfläche (Kopfzeile). Fläche transparent, Kontur und Text in der Gegenfarbe, Hover in der starken Markenstufe. */ --btn-on-accent-bg: transparent; --btn-on-accent-ink: var(--accent-ink); --btn-on-accent-border: var(--accent-ink); --btn-on-accent-bg-hover: var(--accent-strong); --btn-disabled-bg: var(--surface-sunken); --btn-disabled-ink: var(--ink-faint); --btn-disabled-border: var(--line-soft); /* ===== Anmeldefläche ============================================================== * Eine Fläche mit genau einer Aufgabe, also --pad-comfort und genau ein primärer Knopf. * Sie trägt das volle Logo, nicht das Logo-Icon: hier weist die Marke aus, wer fragt, und * hier ist Platz dafür (brand/logo/README.md). Deshalb steht auf ihr auch kein * Wasserzeichen - zwei Zeichen auf einer Fläche konkurrieren um dieselbe Aussage. * --login-gap ist zugleich der Schutzraum unter dem Logo (15.0 px bei 4.8rem Höhe). */ --login-width: 24rem; --login-logo-height: 4.8rem; --login-logo-ink: var(--accent); --login-pad: var(--pad-comfort); --login-gap: var(--gap-group); /* ===== Tabelle ==================================================================== * Kopf vertieft, Zeilen dekorativ getrennt, Zahlen rechts und tabellarisch. */ --table-head-bg: var(--surface-sunken); --table-head-ink: var(--ink-faint); --table-head-weight: var(--weight-medium); --table-head-size: var(--step--1); --table-head-tracking: var(--tracking-caps); --table-head-edge: var(--divider-strong); --table-row-line: var(--divider-soft); --table-row-hover-bg: var(--surface-sunken); --table-pad-x: var(--pad-compact); --table-pad-y: var(--space-2); --table-size: var(--step--1); --table-line-height: var(--lh-data); --table-numeric: var(--numeric-tabular); /* Auf schmalen Viewports scrollt die Tabelle waagrecht in ihrem eigenen Kasten, nicht die Seite. Die Kante zeigt, dass dort noch etwas ist. */ --table-scroll-edge: var(--divider-strong); /* ===== Feld-Wert-Liste ============================================================ * Zwei Spalten, Bezeichnung und Wert (Domain, PHP-Version, Ablauf). Kein Formular: die * Bezeichnung beschriftet einen Wert, den man liest, nicht ein Feld, das man ausfüllt. * Deshalb eigene Rollen statt --field-label-*, und dieselben Kapitälchen mit Laufweite * wie im Tabellenkopf, weil beide dieselbe Aufgabe haben: eine Spalte benennen. */ --kv-label-ink: var(--ink-faint); --kv-label-size: var(--step--1); --kv-label-tracking: var(--tracking-caps); --kv-value-ink: var(--ink); --kv-numeric: var(--numeric-tabular); --kv-pad: var(--pad-compact); --kv-row-gap: var(--space-1); /* Zeile zu Zeile: enger als Spalte zu Spalte */ --kv-col-gap: var(--gap-group); /* ===== Zustands-Badge ============================================================= * Fünf Ausprägungen: die drei Zustände, neutral und Akzent. Farbe allein trägt nie * die Aussage, der Zustand steht immer auch im Text. */ --badge-radius: var(--radius-pill); --badge-pad-x: var(--space-2); --badge-gap: var(--space-1); --badge-min-height: 1.5rem; --badge-font: var(--font-data); --badge-size: var(--step--1); --badge-weight: var(--weight-medium); --badge-tracking: var(--tracking-caps); --badge-border-width: 1px; --badge-ok-ink: var(--state-ok); --badge-ok-bg: var(--state-ok-tint); --badge-ok-border: var(--state-ok-area); --badge-warn-ink: var(--state-warn); --badge-warn-bg: var(--state-warn-tint); --badge-warn-border: var(--state-warn-area); --badge-critical-ink: var(--state-critical); --badge-critical-bg: var(--state-critical-tint); --badge-critical-border: var(--state-critical-area); --badge-neutral-ink: var(--ink-soft); --badge-neutral-bg: var(--surface-sunken); --badge-neutral-border: var(--line); --badge-accent-ink: var(--accent); --badge-accent-bg: var(--accent-tint); --badge-accent-border: var(--accent); /* ===== Limit-Anzeige ============================================================== * , kein Div mit Inline-Breite: die CSP der Oberflächen verbietet Inline-Styles, * value/max sind Attribute. Die Füllung ist eine Fläche und nimmt den -area-Wert; der * Textwert daneben („9 von 10") bleibt der Textwert. */ --meter-height: var(--space-2); --meter-radius: var(--radius-pill); --meter-track: var(--surface-sunken); --meter-fill: var(--accent); --meter-fill-warn: var(--state-warn-area); --meter-fill-critical: var(--state-critical-area); --meter-label-ink: var(--ink-soft); --meter-numeric: var(--numeric-tabular); /* ===== Kopfzeile ================================================================== * Die Markenfläche der Oberfläche, und die einzige Fläche, auf der der übliche Fokusring * nicht trägt: dort gilt --focus-ring-color-on-accent, der Knopf darauf --btn-on-accent-*. * * Die beiden Logo-Höhen sind gerechnet, nicht gewählt (brand/logo/README.md): * Logo 3.2rem = 51.2 px hoch, 98.3 px breit (Minimum 90), mit Schutzraum 71.2 px * Logo-Icon 1.9rem = 30.4 px hoch (Minimum 24), 20.2 px breit, mit Schutzraum 47.3 px * Die erste Zeile passt in --topbar-height, die zweite in --topbar-height-compact. * --topbar-gap und --topbar-pad-x halten den seitlichen Schutzraum frei (10.0 px / 8.5 px); * innerhalb davon steht kein Text. */ --topbar-bg: var(--accent); --topbar-ink: var(--accent-ink); --topbar-pad-x: var(--space-4); --topbar-gap: var(--gap-group); --topbar-logo-height: 3.2rem; --topbar-icon-height: 1.9rem; /* ===== Navigation ================================================================= * Der aktive Eintrag ist ohne Farbe erkennbar: Kante, Gewicht und aria-current. * Wer die Seite in Graustufen ansieht, sieht immer noch, wo er steht. */ --nav-bg: var(--surface-raised); --nav-edge: var(--divider-strong); --nav-ink: var(--ink); --nav-size: var(--step--1); --nav-item-min-height: var(--target-min); --nav-item-pad-x: var(--space-2); --nav-item-gap: var(--gap-inline); --nav-item-radius: var(--radius); --nav-hover-bg: var(--surface-sunken); --nav-current-bg: var(--accent-tint); --nav-current-ink: var(--accent-strong); --nav-current-marker: var(--accent); --nav-marker-width: 2px; --nav-current-weight: var(--weight-medium); --nav-group-ink: var(--ink-faint); --nav-group-size: var(--step--1); --nav-group-tracking: var(--tracking-caps); /* ===== Symbole ==================================================================== * Eine Familie, gleiche Strichstärke, ausschliesslich SVG. Ein Symbol ist ein * grafisches Objekt und hält 3:1; es steht nie allein für eine Aussage. */ --icon-size: 1.15rem; --icon-stroke: 1.6; --icon-ink: var(--accent); --icon-ink-quiet: var(--ink-faint); /* ===== Logo-Icon als Fläche ======================================================= * Das Muster aus brand/logo/README.md: das Logo-Icon stark vergrössert und angeschnitten * als Wasserzeichen. Als Maske, nicht als Bild: ein Hintergrundbild erbt kein * currentColor, und eine zweite eingefärbte Datei wäre ein Farbwert ausserhalb der * Token-Dateien. So kommt die Farbe aus einem Token und Light/Dark stimmen von selbst. * * Der Pfad ist relativ zu DIESER Datei. Wer brand/ ausliefert, liefert die Struktur mit; * wer die Dateien anders ablegt, überschreibt --watermark-image in seiner Oberfläche. * * Höchstens eine solche Fläche pro Seite, nie zusammen mit dem Logo auf derselben * Fläche, nie gedreht oder gespiegelt. Text darüber: siehe brand/components.md. */ --watermark-image: url("logo/mipla-icon-mono.svg"); --watermark-fill: var(--accent-veil); --watermark-size: 18rem; --watermark-position: right -4rem top -6rem; }