Lyne stellt Farben auf zwei Ebenen bereit: als Grundfarben und als semantische CSS-Variablen. Für Komponenten und Layouts verwendest du die semantischen Variablen. Sie passen sich dem Hell- und Dunkelmodus sowie der Theme-Variante automatisch an.

• Grundfarben wie --sbb-color-milk oder --sbb-color-red sind die Farbwerte der SBB-Farbpalette. Wann welche Farbe eingesetzt wird, beschreiben die Seiten Grundfarben, Off-Brand-Farben und Zusatzfarben.
• Semantische Variablen wie --sbb-background-color-1 oder --sbb-color-error beschreiben einen Zweck. Sie verweisen auf eine Grundfarbe, die je nach Modus und Theme wechselt.

Kontextfarben stehen für die Primärfarbe, die Marke und für Zustände wie Fehler, Warnung oder Erfolg.

Die Theme-Varianten tauschen die Grundfarben hinter den Kontextfarben aus. Off-Brand ist für Anwendungen gedacht, die nicht unter der Marke SBB auftreten. Safety ist für sicherheitsrelevante Anwendungen gedacht. Wer --sbb-color-primary statt --sbb-color-red verwendet, muss beim Wechsel des Themes nichts anpassen.

Eingebunden werden die Varianten über die Theme-Dateien off-brand-theme.css und safety-theme.css (bzw. lean-off-brand-theme.css und lean-safety-theme.css).

Hintergründe sind in vier Ebenen gestuft. Ebene 1 ist die Grundfläche, die höheren Ebenen heben sich zunehmend davon ab.

Ebene 1 hat den höchsten Kontrast. Ebene 5 ist in beiden Modi gleich und hat keine Varianten.

Rahmen verwenden dieselben Grundfarben wie die Texte derselben Ebene.

Hintergrund-, Text- und Rahmenfarben gibt es zusätzlich mit drei Endungen (ausser Ebene 5). Damit lassen sich Flächen gestalten, die unabhängig vom Modus dunkel oder hell bleiben sollen.

Für Schatten gibt es weiche (soft) und harte (hard) Farben in zwei Stufen, jeweils auch mit der Endung -negative. Am einfachsten setzt du Schatten mit den Sass-Mixins, die auf der Seite Shadow beschrieben sind.

Lyne nutzt die native CSS-Eigenschaft color-scheme. Die Komponenten folgen standardmässig der Einstellung des Betriebssystems. Mit den CSS-Klassen sbb-light oder sbb-dark legst du einen Modus fest, für die ganze Seite oder für einzelne Bereiche.

Eigene Farben brauchst du ebenfalls für beide Modi. Verwende dafür die CSS-Funktion light-dark() und gib davor die helle Farbe als Fallback für ältere Browser an:

.class {
  color: var(--sbb-color-cloud);
  color: light-dark(var(--sbb-color-cloud), var(--sbb-color-anthracite));
}

Die semantischen Variablen und die Zusatzfarben wie --sbb-color-sky wechseln von selbst. Die JavaScript-Tokens enthalten nur die Grundfarben. Dort musst du den Modus selbst behandeln, deshalb sind CSS-Variablen vorzuziehen.

Für transparente Farben empfiehlt Lyne die CSS-Funktion color-mix():

.class {
  /* Primärfarbe mit 40 % Deckkraft */
  color: color-mix(in srgb, var(--sbb-color-primary) 40%, transparent);
}

Diese Tokens aus dem Paket @sbb-esta/lyne-design-tokens enthalten die festen Farbwerte. Bei den Zusatz- und Off-Brand-Farben gibt es je einen Wert für hell (-light) und dunkel (-dark). Die CSS-Variable ohne Endung, etwa --sbb-color-sky, wählt den passenden Wert automatisch.