/* ============================================================================ KOS KLIMA® Intranet – Anwendungs-Tokens (Brücke zum Design-System) ---------------------------------------------------------------------------- Das Intranet war vor dem Redesign auf eine eigene Palette gebaut (Navy #1a2e4a, Akzent #67bed9, Schrift "Outfit"). Diese Palette steckt in rund 1.700 Zeilen CSS in index.html und in den Render-Funktionen der Module – verteilt auf etwa 90 Stellen, die die Variablen unten benutzen. Statt diese Stellen einzeln umzuschreiben (fehleranfällig, und jede künftige Design-Änderung müsste erneut durch alle Dateien), werden hier die alten Variablennamen auf die Tokens des Design-Systems abgebildet. Ergebnis: * Bestehendes CSS und bestehende Inhalte werden unverändert weiter gerendert, erscheinen aber im neuen Design. * Neue Bausteine benutzen direkt die DS-Tokens aus ds-tokens.css. * Eine spätere Design-Änderung wird an genau einer Stelle nachgezogen. Die alten Namen bleiben damit bewusst bestehen. Sie sind keine Altlast, sondern die Schnittstelle zwischen Anwendung und Design-System. ========================================================================== */ :root { /* -------------------------------------------------- Marken-Grundfarben -- Navy und Akzent sind die beiden Farben, an denen das gesamte alte Erscheinungsbild hängt. Sie tragen den größten Teil des Redesigns. */ --navy: var(--blue-dark); /* war #1a2e4a */ --navy-mid: var(--blue-deep); /* war #1e3a5f */ --accent: var(--blue-light); /* war #67bed9 */ /* Der alte Akzent hatte eine eigene Hover-/Dunkelstufe. Im Design-System wird als Hover-Ziel von Akzentflächen das Navy verwendet (Links: #6CADC6 -> #375374), deshalb zeigen beide dorthin. */ --accent-hover: var(--blue-dark); /* war #4aa8c4 */ --accent-dark: var(--blue-dark); /* war #1a6e88 */ --accent-light: var(--accent-12); /* war #edf7fb – jetzt die Akzent-Alphastufe */ /* --white wird hier NICHT erneut gesetzt. Das Design-System definiert es bereits mit demselben Wert; eine Zeile "--white: var(--white)" wäre ein Selbstbezug, den CSS als Zyklus wertet – die Variable würde ungültig und alle 90 Fundstellen im Altbestand verlören ihre Farbe. */ /* ------------------------------------------------------------- Graustufen -- Die alte Grauskala war blaustichig-kühl (#f7f9fb ... #2d3548). Das Design-System arbeitet mit einem warmen Sandton für Flächen und mit Alphastufen des Navy für Linien. Die Zuordnung folgt der VERWENDUNG: 50/100 = Flächen -> Sand bzw. helles Grau 200/300 = Linien/Rahmen -> Haarlinien-Alphastufen 400-800 = Text -> Text- und Meta-Farben */ --gray-50: var(--bg-sand); /* war #f7f9fb – Seitenleiste, Ruheflächen */ --gray-100: var(--bg-gray); /* war #f0f2f6 */ --gray-200: var(--hairline-strong); /* war #e2e6ef – Rahmen, Trennlinien */ --gray-300: var(--ink-22); /* war #cdd3df – kräftigere Rahmen */ --gray-400: var(--text-soft); /* war #9aa3b5 – gedämpfter Text */ --gray-500: var(--text-soft); /* war NIRGENDS definiert – siehe unten */ --gray-600: var(--text); /* war #5a6478 – Fließtext */ --gray-700: var(--text); /* war NIRGENDS definiert – siehe unten */ --gray-800: var(--blue-dark); /* war #2d3548 – dunkler Text */ /* --gray-500 und --gray-700 wurden im alten CSS benutzt, aber nie definiert. Sie liefen damit ins Leere: Der Browser konnte die Deklaration nicht auflösen und fiel auf den ererbten Wert zurück, was an den betroffenen Stellen zu unbeabsichtigt dunklem Text führte. Beide sind hier ergänzt – das ist eine Fehlerbehebung, keine Design-Entscheidung. */ /* ----------------------------------------------------------- Signalfarben -- Rot kommt unverändert aus dem Design-System. Grün und Gelb führt das DS nicht als eigene Tokens; sie sind hier auf die Werte gesetzt, die der Entwurf für "Erledigt" und "Wichtig" in Hinweisboxen benutzt, und in der Sättigung an die Palette angeglichen. */ --danger: var(--red-alert); /* war #e24b4a */ --success: #2e7d5b; /* war #1d9e75 – Wert aus dem Entwurf */ --warning: #b5761a; /* war #ba7517 – leicht entsättigt */ --info: var(--blue-dark); /* war #185fa5 */ /* Rollenfarbe "Manager". Bewusst NICHT auf die Markenpalette gezogen: Rollen-Badges müssen auf einen Blick unterscheidbar bleiben, und Lila ist die einzige Farbe im System, die nirgends sonst vorkommt. */ --manager: #7c3aed; /* ------------------------------------------------------------- Geometrie -- Die alten Werte stimmen zufällig mit der DS-Skala überein (10px/6px), werden aber über die Tokens geführt, damit eine Änderung der Skala durchschlägt. */ --radius: var(--radius-sm); /* 10px, unverändert */ /* Der Altbestand kannte ein --radius-sm mit 6px – im Design-System steht derselbe Name aber für 10px. Beide Bedeutungen unter einem Namen zu führen hätte die DS-Skala verfälscht: jede neue Komponente, die --radius-sm benutzt, hätte 6px statt 10px bekommen. Der Altwert heißt deshalb jetzt --radius-input (er sitzt ausschließlich auf Eingabefeldern und kleinen Knöpfen) und ist in index.html, css/legacy.css und app/blocks.js entsprechend umbenannt. --radius-sm bleibt damit allein dem Design-System vorbehalten. */ --radius-input: var(--radius-xs); /* 6px, war früher --radius-sm */ /* ------------------------------------------------------------- Schatten -- Alt: neutral-blaues Schwarz auf #1a2e4a. Neu: die blau eingefärbten Schatten des Design-Systems. */ --shadow: var(--shadow-pill); --shadow-lg: var(--shadow-menu); /* ------------------------------------------------------------- Bewegung -- Die alten Kurven bleiben als Namen bestehen, zeigen aber auf die DS-Kurven. --ease-press war eine Überschwing-Kurve, dafür gibt es --ease-overshoot; --ease-out entspricht der Reveal-Kurve. */ --ease-out: var(--ease-reveal); --ease-io: var(--ease-standard); --ease-press: var(--ease-overshoot); --t-press: var(--dur-fast); --t-state: var(--dur-fast); --t-enter: var(--dur-hover); --t-sheet: var(--dur-panel); /* --------------------------------------------------------- Layout-Maße -- Der Entwurf gibt eine 64px hohe Kopfzeile und eine 264px breite Seitenleiste vor (vorher 60px / 256px). Beide Werte werden an vielen Stellen für Positionierung und Scroll-Offsets benutzt und sind deshalb hier zentral gepflegt. */ --header-h: 64px; /* war 60px */ --sidebar-w: 264px; /* war 256px */ /* Höhen der Bearbeitungs-Leisten. Werden von JS nachgemessen (measureEditBanner) und hier nur als Startwert gesetzt. */ --edit-banner-h: 38px; --edit-toolbar-h: 50px; }