/* =========================================================================== ERZEUGT — nicht von Hand aendern. Quelle: brand.php · Erzeuger: tools/brand-export.php Wer hier einen Wert aendert, verliert ihn beim naechsten Lauf. Aufbau: 1. Rohsatz --nb-h-* (hell) und --nb-d-* (dunkel). Jeder Hexwert steht GENAU EINMAL im ganzen Stylesheet. 2. Rollen --nb-* zeigt je nach Thema auf den einen oder den anderen. Dreifach deklariert, sonst bricht der Umschalter: Vorgabe hell / Systemthema dunkel / ausdruecklich dunkel. 3. Rahmen, Schatten, Lichtschein 4. Bruecke zu den Toolbox-Bausteinen =========================================================================== */ :root { /* --- hell ------------------------------------------------------ */ --nb-h-grund: #F4F6FA; --nb-h-flaeche: #FFFFFF; --nb-h-flaeche-hoch: var(--nb-h-flaeche); --nb-h-flaeche-tief: #EBEFF5; --nb-h-flaeche-hover: #F0F3F8; --nb-h-linie: #D5DDE7; --nb-h-linie-stark: #77859A; --nb-h-text: #131C28; --nb-h-text-leise: #55637A; --nb-h-primaer: #1B4B8F; --nb-h-primaer-hover: #143A70; --nb-h-primaer-aktiv: #0F2C56; --nb-h-primaer-text: #FFFFFF; --nb-h-primaer-lesbar: #1B4B8F; --nb-h-primaer-still: #E4ECF8; --nb-h-akzent: #6E5B1E; --nb-h-akzent-text: #FFFFFF; --nb-h-akzent-still: #F3EDDD; --nb-h-fokus: #1B4B8F; --nb-h-schleier: rgba(11,17,25,.55); --nb-h-schatten-basis: 19,28,40; --nb-h-ok-vg: #175C33; --nb-h-ok-hg: #E2F0E7; --nb-h-warnung-vg: #7A5407; --nb-h-warnung-hg: #FAEFD8; --nb-h-fehler-vg: #9A241C; --nb-h-fehler-hg: #FBE7E4; --nb-h-info-vg: #12507F; --nb-h-info-hg: #E3EDF8; --nb-h-vollton-text: #FFFFFF; /* --- dunkel ---------------------------------------------------- */ --nb-d-grund: #0E141C; --nb-d-flaeche: #161E29; --nb-d-flaeche-hoch: #1E2836; --nb-d-flaeche-tief: #111925; --nb-d-flaeche-hover: #232E3D; --nb-d-linie: #2C3949; --nb-d-linie-stark: #6D7C93; --nb-d-text: #E6ECF4; --nb-d-text-leise: #9AA9BE; --nb-d-primaer: #2F73C6; --nb-d-primaer-hover: #3576C9; --nb-d-primaer-aktiv: #24589B; --nb-d-primaer-text: #FFFFFF; --nb-d-primaer-lesbar: #8FBAEE; --nb-d-primaer-still: #18293F; --nb-d-akzent: #CDB166; --nb-d-akzent-text: #0E141C; --nb-d-akzent-still: #2A2515; --nb-d-fokus: #8FBAEE; --nb-d-schleier: rgba(4,8,13,.70); --nb-d-schatten-basis: 0,0,0; --nb-d-ok-vg: #6FCB90; --nb-d-ok-hg: #12291D; --nb-d-warnung-vg: #F2B45E; --nb-d-warnung-hg: #2E2411; --nb-d-fehler-vg: #F0918A; --nb-d-fehler-hg: #33201E; --nb-d-info-vg: #7FB2EA; --nb-d-info-hg: #14243A; --nb-d-vollton-text: #0E141C; } /* Vorgabe: helles Thema. */ :root { --nb-grund: var(--nb-h-grund); --nb-flaeche: var(--nb-h-flaeche); --nb-flaeche-hoch: var(--nb-h-flaeche-hoch); --nb-flaeche-tief: var(--nb-h-flaeche-tief); --nb-flaeche-hover: var(--nb-h-flaeche-hover); --nb-linie: var(--nb-h-linie); --nb-linie-stark: var(--nb-h-linie-stark); --nb-text: var(--nb-h-text); --nb-text-leise: var(--nb-h-text-leise); --nb-primaer: var(--nb-h-primaer); --nb-primaer-hover: var(--nb-h-primaer-hover); --nb-primaer-aktiv: var(--nb-h-primaer-aktiv); --nb-primaer-text: var(--nb-h-primaer-text); --nb-primaer-lesbar: var(--nb-h-primaer-lesbar); --nb-primaer-still: var(--nb-h-primaer-still); --nb-akzent: var(--nb-h-akzent); --nb-akzent-text: var(--nb-h-akzent-text); --nb-akzent-still: var(--nb-h-akzent-still); --nb-fokus: var(--nb-h-fokus); --nb-schleier: var(--nb-h-schleier); --nb-schatten-basis: var(--nb-h-schatten-basis); --nb-ok-vg: var(--nb-h-ok-vg); --nb-ok-hg: var(--nb-h-ok-hg); --nb-warnung-vg: var(--nb-h-warnung-vg); --nb-warnung-hg: var(--nb-h-warnung-hg); --nb-fehler-vg: var(--nb-h-fehler-vg); --nb-fehler-hg: var(--nb-h-fehler-hg); --nb-info-vg: var(--nb-h-info-vg); --nb-info-hg: var(--nb-h-info-hg); --nb-vollton-text: var(--nb-h-vollton-text); } /* Systemthema dunkel, sofern nicht ausdruecklich hell gewaehlt. */ @media (prefers-color-scheme: dark) { :root:not([data-thema="hell"]) { --nb-grund: var(--nb-d-grund); --nb-flaeche: var(--nb-d-flaeche); --nb-flaeche-hoch: var(--nb-d-flaeche-hoch); --nb-flaeche-tief: var(--nb-d-flaeche-tief); --nb-flaeche-hover: var(--nb-d-flaeche-hover); --nb-linie: var(--nb-d-linie); --nb-linie-stark: var(--nb-d-linie-stark); --nb-text: var(--nb-d-text); --nb-text-leise: var(--nb-d-text-leise); --nb-primaer: var(--nb-d-primaer); --nb-primaer-hover: var(--nb-d-primaer-hover); --nb-primaer-aktiv: var(--nb-d-primaer-aktiv); --nb-primaer-text: var(--nb-d-primaer-text); --nb-primaer-lesbar: var(--nb-d-primaer-lesbar); --nb-primaer-still: var(--nb-d-primaer-still); --nb-akzent: var(--nb-d-akzent); --nb-akzent-text: var(--nb-d-akzent-text); --nb-akzent-still: var(--nb-d-akzent-still); --nb-fokus: var(--nb-d-fokus); --nb-schleier: var(--nb-d-schleier); --nb-schatten-basis: var(--nb-d-schatten-basis); --nb-ok-vg: var(--nb-d-ok-vg); --nb-ok-hg: var(--nb-d-ok-hg); --nb-warnung-vg: var(--nb-d-warnung-vg); --nb-warnung-hg: var(--nb-d-warnung-hg); --nb-fehler-vg: var(--nb-d-fehler-vg); --nb-fehler-hg: var(--nb-d-fehler-hg); --nb-info-vg: var(--nb-d-info-vg); --nb-info-hg: var(--nb-d-info-hg); --nb-vollton-text: var(--nb-d-vollton-text); } } /* Ausdrueckliche Wahl schlaegt das Systemthema — in beide Richtungen. */ :root[data-thema="dunkel"] { --nb-grund: var(--nb-d-grund); --nb-flaeche: var(--nb-d-flaeche); --nb-flaeche-hoch: var(--nb-d-flaeche-hoch); --nb-flaeche-tief: var(--nb-d-flaeche-tief); --nb-flaeche-hover: var(--nb-d-flaeche-hover); --nb-linie: var(--nb-d-linie); --nb-linie-stark: var(--nb-d-linie-stark); --nb-text: var(--nb-d-text); --nb-text-leise: var(--nb-d-text-leise); --nb-primaer: var(--nb-d-primaer); --nb-primaer-hover: var(--nb-d-primaer-hover); --nb-primaer-aktiv: var(--nb-d-primaer-aktiv); --nb-primaer-text: var(--nb-d-primaer-text); --nb-primaer-lesbar: var(--nb-d-primaer-lesbar); --nb-primaer-still: var(--nb-d-primaer-still); --nb-akzent: var(--nb-d-akzent); --nb-akzent-text: var(--nb-d-akzent-text); --nb-akzent-still: var(--nb-d-akzent-still); --nb-fokus: var(--nb-d-fokus); --nb-schleier: var(--nb-d-schleier); --nb-schatten-basis: var(--nb-d-schatten-basis); --nb-ok-vg: var(--nb-d-ok-vg); --nb-ok-hg: var(--nb-d-ok-hg); --nb-warnung-vg: var(--nb-d-warnung-vg); --nb-warnung-hg: var(--nb-d-warnung-hg); --nb-fehler-vg: var(--nb-d-fehler-vg); --nb-fehler-hg: var(--nb-d-fehler-hg); --nb-info-vg: var(--nb-d-info-vg); --nb-info-hg: var(--nb-d-info-hg); --nb-vollton-text: var(--nb-d-vollton-text); } :root[data-thema="hell"] { --nb-grund: var(--nb-h-grund); --nb-flaeche: var(--nb-h-flaeche); --nb-flaeche-hoch: var(--nb-h-flaeche-hoch); --nb-flaeche-tief: var(--nb-h-flaeche-tief); --nb-flaeche-hover: var(--nb-h-flaeche-hover); --nb-linie: var(--nb-h-linie); --nb-linie-stark: var(--nb-h-linie-stark); --nb-text: var(--nb-h-text); --nb-text-leise: var(--nb-h-text-leise); --nb-primaer: var(--nb-h-primaer); --nb-primaer-hover: var(--nb-h-primaer-hover); --nb-primaer-aktiv: var(--nb-h-primaer-aktiv); --nb-primaer-text: var(--nb-h-primaer-text); --nb-primaer-lesbar: var(--nb-h-primaer-lesbar); --nb-primaer-still: var(--nb-h-primaer-still); --nb-akzent: var(--nb-h-akzent); --nb-akzent-text: var(--nb-h-akzent-text); --nb-akzent-still: var(--nb-h-akzent-still); --nb-fokus: var(--nb-h-fokus); --nb-schleier: var(--nb-h-schleier); --nb-schatten-basis: var(--nb-h-schatten-basis); --nb-ok-vg: var(--nb-h-ok-vg); --nb-ok-hg: var(--nb-h-ok-hg); --nb-warnung-vg: var(--nb-h-warnung-vg); --nb-warnung-hg: var(--nb-h-warnung-hg); --nb-fehler-vg: var(--nb-h-fehler-vg); --nb-fehler-hg: var(--nb-h-fehler-hg); --nb-info-vg: var(--nb-h-info-vg); --nb-info-hg: var(--nb-h-info-hg); --nb-vollton-text: var(--nb-h-vollton-text); } /* --- Rahmen --------------------------------------------------------------- Der Rahmen traegt die Hierarchie, nicht der Schatten. --nb-rahmen-bedien liegt auf JEDEM Bedienelement, auch auf gefuellten Knoepfen: damit erfuellt der Rahmen den Nicht-Textkontrast und nicht die Fuellung. Genau deshalb uebersteht ein Markentausch auf Gruen, Gelb oder Pink die Pruefung. */ :root { --nb-rahmen: 1px solid var(--nb-linie); --nb-rahmen-bedien: 1px solid var(--nb-linie-stark); --nb-schatten-1: 0 1px 2px rgba(var(--nb-schatten-basis), .06); --nb-schatten-2: 0 1px 3px rgba(var(--nb-schatten-basis), .08), 0 8px 20px rgba(var(--nb-schatten-basis), .05); --nb-schatten-3: 0 2px 6px rgba(var(--nb-schatten-basis), .10), 0 20px 44px rgba(var(--nb-schatten-basis), .12); } /* Im dunklen Thema sind Schatten kaum sichtbar — dort traegt zusaetzlich die Linie ab. Deshalb kraeftigere Werte auf reinem Schwarz. */ @media (prefers-color-scheme: dark) { :root:not([data-thema="hell"]) { --nb-schatten-1: 0 1px 2px rgba(0,0,0,.45); --nb-schatten-2: 0 1px 3px rgba(0,0,0,.50), 0 8px 20px rgba(0,0,0,.40); --nb-schatten-3: 0 2px 6px rgba(0,0,0,.55), 0 20px 44px rgba(0,0,0,.50); } } :root[data-thema="dunkel"] { --nb-schatten-1: 0 1px 2px rgba(0,0,0,.45); --nb-schatten-2: 0 1px 3px rgba(0,0,0,.50), 0 8px 20px rgba(0,0,0,.40); --nb-schatten-3: 0 2px 6px rgba(0,0,0,.55), 0 20px 44px rgba(0,0,0,.50); } /* --- Lichtschein ---------------------------------------------------------- Der EINZIGE Schmuck im ganzen System, GENAU EIN VORKOMMEN JE BILDSCHIRM. Erlaubte Orte, abschliessend: hinter dem Hero der Website, hinter der Live-Vorschau im Portal, hinter der Karte der laufenden Box. Aus dem Primaerton, nicht aus dem Akzent — so wandert die Signatur beim Markentausch mit und kann nicht warm kippen. Faellt color-mix aus, bleibt transparent: Schmuck verschwindet, Layout nicht. color-mix erzeugt NIRGENDS eine Flaeche, die Text traegt. Dieser Satz gehoert hierher, sonst ist er in drei Monaten weg. */ :root { --nb-lichtschein: radial-gradient(60% 80% at 50% 0%, color-mix(in srgb, var(--nb-primaer) 14%, transparent) 0%, transparent 70%); } /* --- Bruecke zu den Toolbox-Bausteinen ------------------------------------ Die sechs Vanilla-Komponenten aus ~/Web-Projekte/Toolbox/ fallen auf diese Namen zurueck. Hier stehen sie genau einmal, damit die Bausteine unveraendert laufen. ACHTUNG beim dunklen Thema: die Bausteine tragen durchweg #fff als Rueckfall. Jeder davon muss beim ersten Einbau auf ein --nb-Token gezogen werden, sonst erbt das dunkle Thema weisse Flecken. --color-brand-orange ist ein Erbname aus Fotobox Nidda und steht nur hier; beim ersten Anfassen der Komponenten wird er umbenannt. */ :root { --color-surface: var(--nb-flaeche); --color-surface-mute: var(--nb-flaeche-hover); --color-text: var(--nb-text); --color-text-muted: var(--nb-text-leise); --color-border: var(--nb-linie); --color-brand-orange: var(--nb-primaer); --color-danger: var(--nb-fehler-vg); --radius: var(--nb-r); --radius-sm: var(--nb-r-sm); --shadow: var(--nb-schatten-2); --shadow-lg: var(--nb-schatten-3); }