# Color.

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.

## Zwei Ebenen.

- **Grundfarben** wie `--sbb-color-milk` oder `--sbb-color-red` sind die Farbwerte der SBB-Farbpalette. Wann welche Farbe eingesetzt wird, beschreiben die Seiten [Grundfarben](https://digital.sbb.ch/de/foundation/colors/base-colors/), [Off-Brand-Farben](https://digital.sbb.ch/de/foundation/colors/off-brand-colors/) und [Zusatzfarben](https://digital.sbb.ch/de/foundation/colors/additional-colors/).
- **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.

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

| CSS-Variable | Hell | Dunkel | Verwendung |
| --- | --- | --- | --- |
| `--sbb-color-primary` | `red` | `red` | Primärfarbe, im Standard-Theme Rot. |
| `--sbb-color-primary85` | `red85` | `red85` | Hellere Abstufung der Primärfarbe. |
| `--sbb-color-primary125` | `red125` | `red125` | Dunklere Abstufung der Primärfarbe. |
| `--sbb-color-primary150` | `red150` | `red150` | Noch dunklere Abstufung der Primärfarbe. |
| `--sbb-color-error` | `red125` | `red85` | Fehlerzustände. Im Dunkelmodus heller, damit der Kontrast reicht. |
| `--sbb-color-warning` | `peach` | `peach` | Warnungen. |
| `--sbb-color-success` | `green` | `green` | Erfolgsmeldungen. |
| `--sbb-color-brand` | `red` | `red` | Markenfarbe, etwa für das Logo. |

### Theme-Varianten.

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.

| CSS-Variable | Standard | Off-Brand | Safety |
| --- | --- | --- | --- |
| `--sbb-color-primary` | `red` | `royal` | `royal` |
| `--sbb-color-primary85` | `red85` | `royal85` | `royal85` |
| `--sbb-color-primary125` | `red125` | `royal125` | `royal125` |
| `--sbb-color-primary150` | `red150` | `royal150` | `royal150` |
| `--sbb-color-brand` | `red` | `red` | `metal` |

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`).

## Hintergrundfarben.

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

| CSS-Variable | Hell | Dunkel |
| --- | --- | --- |
| `--sbb-background-color-1` | `white` | `midnight` |
| `--sbb-background-color-2` | `white` | `charcoal` |
| `--sbb-background-color-3` | `milk` | `charcoal` |
| `--sbb-background-color-4` | `cloud` | `iron` |

## Textfarben.

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

| CSS-Variable | Hell | Dunkel |
| --- | --- | --- |
| `--sbb-color-1` | `midnight` | `white` |
| `--sbb-color-2` | `charcoal` | `white` |
| `--sbb-color-3` | `charcoal` | `milk` |
| `--sbb-color-4` | `iron` | `cloud` |
| `--sbb-color-5` | `smoke` | `smoke` |
| `--sbb-color-6` | `anthracite` | `platinum` |

## Rahmenfarben.

Rahmen verwenden dieselben Grundfarben wie die Texte derselben Ebene.

| CSS-Variable | Hell | Dunkel |
| --- | --- | --- |
| `--sbb-border-color-1` | `midnight` | `white` |
| `--sbb-border-color-2` | `charcoal` | `white` |
| `--sbb-border-color-3` | `charcoal` | `milk` |
| `--sbb-border-color-4` | `iron` | `cloud` |
| `--sbb-border-color-5` | `smoke` | `smoke` |
| `--sbb-border-color-6` | `anthracite` | `platinum` |

## Varianten: negative und inverted.

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.

| Endung | Hell | Dunkel | Wirkung |
| --- | --- | --- | --- |
| `--sbb-background-color-1` | `white` | `midnight` | Normales Farbpaar. |
| `-negative` | `midnight` | `midnight` | Immer die dunkle Farbe des Paars, etwa für negative Komponenten. |
| `-inverted` | `midnight` | `white` | Helle und dunkle Farbe vertauscht. |
| `-negative-inverted` | `white` | `white` | Immer die helle Farbe des Paars. |

## Schattenfarben.

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](https://digital.sbb.ch/de/design-system/lyne/design-tokens/shadow/) beschrieben sind.

| CSS-Variable | Hell | Dunkel |
| --- | --- | --- |
| `--sbb-shadow-color-soft-1` |  |  |
| `--sbb-shadow-color-soft-2` |  |  |
| `--sbb-shadow-color-hard-1` |  |  |
| `--sbb-shadow-color-hard-2` |  |  |

## Hell- und Dunkelmodus.

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:

```css
.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.

## Transparenz.

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

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

## Grundfarben als Tokens.

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.

### Grundfarben.

| CSS-Variable | Wert |
| --- | --- |
| `--sbb-color-black` | `#000000` |
| `--sbb-color-midnight` | `#151515` |
| `--sbb-color-blue` | `#2d327d` |
| `--sbb-color-charcoal` | `#212121` |
| `--sbb-color-iron` | `#444444` |
| `--sbb-color-anthracite` | `#5a5a5a` |
| `--sbb-color-granite` | `#686868` |
| `--sbb-color-metal` | `#767676` |
| `--sbb-color-smoke` | `#8d8d8d` |
| `--sbb-color-storm` | `#a8a8a8` |
| `--sbb-color-graphite` | `#b7b7b7` |
| `--sbb-color-cement` | `#bdbdbd` |
| `--sbb-color-platinum` | `#cdcdcd` |
| `--sbb-color-aluminium` | `#d2d2d2` |
| `--sbb-color-silver` | `#dcdcdc` |
| `--sbb-color-cloud` | `#e5e5e5` |
| `--sbb-color-milk` | `#f6f6f6` |
| `--sbb-color-red` | `#eb0000` |
| `--sbb-color-red85` | `#ff3838` |
| `--sbb-color-red125` | `#c60018` |
| `--sbb-color-red150` | `#a20013` |
| `--sbb-color-white` | `#ffffff` |

### Off-Brand-Farben.

| CSS-Variable | Wert |
| --- | --- |
| `--sbb-color-royal-light` | `#06348b` |
| `--sbb-color-royal-dark` | `#0053ef` |
| `--sbb-color-royal85-light` | `#4077df` |
| `--sbb-color-royal85-dark` | `#4077df` |
| `--sbb-color-royal125-light` | `#032668` |
| `--sbb-color-royal125-dark` | `#245ecb` |
| `--sbb-color-royal150-light` | `#021c4e` |
| `--sbb-color-royal150-dark` | `#3c65b3` |

### Zusatzfarben.

| CSS-Variable | Wert |
| --- | --- |
| `--sbb-color-sky-light` | `#0074bf` |
| `--sbb-color-sky-dark` | `#128ede` |
| `--sbb-color-night-light` | `#143a85` |
| `--sbb-color-night-dark` | `#6587ca` |
| `--sbb-color-violet-light` | `#6f2282` |
| `--sbb-color-violet-dark` | `#b36cc5` |
| `--sbb-color-pink-light` | `#c7387a` |
| `--sbb-color-pink-dark` | `#e45295` |
| `--sbb-color-autumn-light` | `#cf3b00` |
| `--sbb-color-autumn-dark` | `#f05313` |
| `--sbb-color-orange-light` | `#f27e00` |
| `--sbb-color-orange-dark` | `#fb8e19` |
| `--sbb-color-peach-light` | `#fcbb00` |
| `--sbb-color-peach-dark` | `#ffc727` |
| `--sbb-color-lemon-light` | `#ffde15` |
| `--sbb-color-lemon-dark` | `#ffe547` |
| `--sbb-color-brown-light` | `#a05400` |
| `--sbb-color-brown-dark` | `#cf6f04` |
| `--sbb-color-green-light` | `#008233` |
| `--sbb-color-green-dark` | `#109d47` |
| `--sbb-color-turquoise-light` | `#007e84` |
| `--sbb-color-turquoise-dark` | `#00a59b` |

---

Source: https://digital.sbb.ch/de/design-system/lyne/design-tokens/color/