/* ====================================================================== DAVINA UI-SYSTEM · tokens.css · Schicht 1 und 2 ---------------------------------------------------------------------- Aufbau (siehe docs/design/ARCHITEKTUR.md): Schicht 1 Grundwerte --jv-p-* Skalen: Abstand, Schrift, Radius, Schatten, Bewegung, Ebenen. Themen fassen sie nicht an. Schicht 2 Bedeutung --jv-* Was eine Farbe/Form BEDEUTET (Grund, Fläche, Text, Rand, Akzent, gut/achtung/fehler/info). Jedes Thema in themen.css setzt genau diese Werte neu - sonst nichts. Schicht 3 Komponente --jv-knopf-* Vorgaben je Bauteil, stehen bei der Komponente (komponenten.css). Ein Thema darf einzelne davon ändern (z. B. harter Schatten beim Knopf). Regeln: - Komponenten lesen NUR Schicht 2 und 3, nie Grundwerte direkt und nie feste Farben. So trägt ein neues Thema in ~40 Zeilen. - Jede Variable hat hier auf :root einen Wert. Ein Thema kann nichts "vergessen" - es überschreibt, was es anders will. - Namen deutsch wie im übrigen Programm (--grund, --akzent in web/css/themes.css); die Brücke zu den alten Namen: bruecke.css. ====================================================================== */ :root { /* ---------- Schicht 1: Grundwerte ---------- */ /* Abstände, 4-px-Raster. --jv-dichte skaliert alle zusammen (0.85 kompakt, 1 normal, 1.25 luftig, 1.6 Fernseher). */ --jv-dichte: 1; /* die abgeleiteten Abstände stehen unten im Block „Abgeleitet“ */ /* Schriftgrößen: fließend zwischen Handy und Schreibtisch, Basis 16 px. Verhältnis ~1.2 (kleine Terz). --jv-grundgroesse hebt alles (Lesbar: 18 px, Fernseher: 28 px). */ --jv-grundgroesse: 16px; /* Stufen unten im Block „Abgeleitet“ */ --jv-p-radius-0: 0px; --jv-p-radius-1: 3px; --jv-p-radius-2: 6px; --jv-p-radius-3: 12px; --jv-p-radius-4: 20px; --jv-p-radius-rund: 999px; /* Bewegung: kurz = Zustandswechsel, mittel = Öffnen/Schließen, lang = Aufmerksamkeit (Orb, Laufband). Bei reduced-motion: 0 (unten). */ --jv-p-dauer-kurz: 120ms; --jv-p-dauer-mittel: 220ms; --jv-p-dauer-lang: 600ms; --jv-p-kurve: cubic-bezier(.2, .7, .2, 1); --jv-p-kurve-aus: cubic-bezier(.4, 0, 1, 1); /* Ebenen: feste Reihenfolge, nirgends sonst z-index erfinden. */ --jv-z-band: 10; --jv-z-klebend: 20; --jv-z-menue: 30; --jv-z-dialog: 40; --jv-z-hinweis: 50; /* ---------- Schicht 2: Bedeutung (Vorgabe = Thema „karten“) ---------- */ /* Flächen: Grund (Seite) < Grund-2 (vertieft) < Fläche (Karte, Feld) < Fläche-2 (schwebend: Menü, Dialog). */ --jv-grund: #f3f4f8; --jv-grund-2: #e8eaf1; --jv-flaeche: #ffffff; --jv-flaeche-2: #ffffff; --jv-schleier: rgba(20, 24, 40, .45); /* hinter Dialogen */ /* Text: 1 = Lesetext (≥ 7:1), 2 = Nebentext (≥ 4.5:1), 3 = nur für Deaktiviertes/Platzhalter (darf unter 4.5:1 liegen, trägt nie Inhalt). */ --jv-text: #1b1e2b; --jv-text-2: #4f5467; --jv-text-3: #8b8fa3; --jv-rand: #d7dae6; /* Trennlinien, Feldränder */ --jv-rand-2: #a6abc0; /* betonte Ränder, Hover */ --jv-strich: 1px; /* Randstärke der Bauteile */ /* Akzent: EINE Farbe für Handlung und Auswahl. --jv-auf-akzent ist der Text darauf (immer ≥ 4.5:1 prüfen), --jv-akzent-hauch die Tönung für ausgewählte Zeilen und Chips. */ --jv-akzent: #3b4fd8; --jv-akzent-aktiv: #2d3fb3; --jv-auf-akzent: #ffffff; --jv-akzent-hauch: #e6e9fb; /* Fokus: eigene Farbe, nie gleich dem Akzent, damit der Ring auch auf einem Akzentknopf sichtbar bleibt. */ --jv-fokus: #0b7a75; --jv-fokus-breite: 3px; --jv-fokus-abstand: 2px; /* Zustandsfarben: tragen BEDEUTUNG (gut/achtung/fehler/info) und werden nie als Schmuck benutzt. Jede hat eine Tönung (hauch) für Flächen. Farbe steht nie allein - immer mit Text oder Symbol. */ --jv-gut: #1e7f4b; --jv-gut-hauch: #dff3e7; --jv-achtung: #9a5b00; --jv-achtung-hauch: #fdf0d6; --jv-fehler: #b3261e; --jv-fehler-hauch: #fbe4e2; --jv-info: #2f5f9e; --jv-info-hauch: #e3ecf8; /* Schrift: --jv-schrift Lesetext, --jv-schrift-kopf Überschriften, --jv-schrift-mono Zahlen/Kennungen. Alle mit Ersatzkette; die Dateien liegen unter /vendor/fonts/zentrale (nichts von außen). */ --jv-schrift: 'Inter', system-ui, 'Segoe UI', Roboto, sans-serif; --jv-schrift-mono: 'Share Tech Mono', 'Cascadia Mono', Consolas, 'Liberation Mono', monospace; --jv-schrift-serif: Georgia, 'Times New Roman', 'Liberation Serif', serif; --jv-zeile: 1.5; /* Lesetext */ --jv-zeile-eng: 1.2; /* Überschriften, Kacheln */ --jv-gewicht: 400; --jv-gewicht-stark: 600; --jv-kopf-gewicht: 600; --jv-kopf-laufweite: 0; --jv-kopf-versal: none; /* text-transform für Überschriften/Etiketten */ --jv-radius-s: var(--jv-p-radius-1); /* Chips, kleine Knöpfe */ --jv-radius-m: var(--jv-p-radius-2); /* Knöpfe, Felder */ --jv-radius-l: var(--jv-p-radius-3); /* Karten, Dialoge */ --jv-schatten-1: 0 1px 2px rgba(20, 24, 40, .08); --jv-schatten-2: 0 4px 12px rgba(20, 24, 40, .10); --jv-schatten-3: 0 16px 40px rgba(20, 24, 40, .18); /* Bedienhöhen: mindestens 44 px Zielfläche (WCAG 2.5.8 großzügig erfüllt) */ --jv-hoehe-s: 32px; --jv-hoehe-m: 40px; --jv-hoehe-l: 48px; --jv-breite-text: 65ch; /* Zeilenlänge Lesetext */ --jv-breite-seite: 1440px; --jv-rinne: max(16px, env(safe-area-inset-left, 0px)); /* Dekor-Schalter je Thema: 0/1. Komponenten lesen sie, statt thema-spezifische Selektoren zu brauchen. */ --jv-glas: 0; /* Unschärfe hinter Flächen */ --jv-hover-hebt: 0; /* Karten heben sich unter der Maus */ color-scheme: light; } /* ---------- Abgeleitet: gilt auf :root UND auf jedem Element, das ein Thema oder eine Dichte trägt (Teilbaum: Fernsehbild in der Galerie, Übersichtskarten je Thema, eine kompakte Tafel). Grund: eine Variable wird dort aufgelöst, wo sie deklariert ist - setzt ein Teilbaum nur --jv-dichte, blieben die Abstände sonst die des Wurzelelements. ---------- */ :root, [data-thema], [data-dichte] { --jv-p-abstand-1: calc(4px * var(--jv-dichte)); --jv-p-abstand-2: calc(8px * var(--jv-dichte)); --jv-p-abstand-3: calc(12px * var(--jv-dichte)); --jv-p-abstand-4: calc(16px * var(--jv-dichte)); --jv-p-abstand-5: calc(24px * var(--jv-dichte)); --jv-p-abstand-6: calc(32px * var(--jv-dichte)); --jv-p-abstand-7: calc(48px * var(--jv-dichte)); --jv-p-abstand-8: calc(64px * var(--jv-dichte)); } /* Nur Themen-Träger: Schriftstufen und die Werte, die ein Thema ausdrücklich anders setzen darf (verweis, schrift-kopf, flaeche-fest). NICHT auf [data-dichte] - sonst setzte eine kompakte Tafel im Thema Brutal die Verweisfarbe auf den Akzent zurück (Fund der Browser-Prüfung). */ :root, [data-thema] { --jv-p-groesse--1: calc(var(--jv-grundgroesse) * .8125); /* 13 bei 16 */ --jv-p-groesse-0: var(--jv-grundgroesse); /* 16 */ --jv-p-groesse-1: calc(var(--jv-grundgroesse) * 1.125); /* 18 */ --jv-p-groesse-2: calc(var(--jv-grundgroesse) * 1.375); /* 22 */ --jv-p-groesse-3: calc(var(--jv-grundgroesse) * 1.75); /* 28 */ --jv-p-groesse-4: calc(var(--jv-grundgroesse) * 2.25); /* 36 */ --jv-p-groesse-5: calc(var(--jv-grundgroesse) * 3); /* 48 */ --jv-flaeche-fest: var(--jv-flaeche); /* deckende Fläche für klebende Leisten; Glas setzt eigene */ --jv-verweis: var(--jv-akzent); /* Textverweise; ein Thema darf eine dunklere setzen (Brutal) */ --jv-schrift-kopf: var(--jv-schrift); /* Themen setzen eine eigene Kopfschrift */ } /* Ein Teilbaum mit eigenem Thema/eigener Dichte bekommt auch seine Schriftgröße */ [data-thema]:not(html) { font-size: var(--jv-p-groesse-0); } /* Dunkle Themen setzen color-scheme: dark, damit Formularfelder, Rollbalken und dem Thema folgen. (In themen.css.) */ /* ---------- Bewegung: Vorgabe nach Systemeinstellung ---------- */ @media (prefers-reduced-motion: reduce) { :root { --jv-p-dauer-kurz: 0ms; --jv-p-dauer-mittel: 0ms; --jv-p-dauer-lang: 0ms; } } /* Nutzer kann die Vorgabe in der Oberfläche ausdrücklich setzen (data-bewegung="aus" / "an" auf ); das schlägt die Systemeinstellung. */ :root[data-bewegung="aus"] { --jv-p-dauer-kurz: 0ms; --jv-p-dauer-mittel: 0ms; --jv-p-dauer-lang: 0ms; } /* Dichte als Schalter auf oder einem Teilbaum */ [data-dichte="kompakt"] { --jv-dichte: .85; } [data-dichte="luftig"] { --jv-dichte: 1.25; }