# Stylesheet

Die Flow-Components-Bibliotheken werden über ein gemeinsames Stylesheet, das
auch für sich alleine verwendet werden kann, gestyled. Das kann nützlich sein,
wenn du dein eigenes Framework verwendest, um Components zu bauen, und dich
dabei an die mittwald Styling Guidelines halten willst.

Auf dieser Seite findest du alle Informationen darüber, wie du das Stylesheet
installieren kannst und wie die Klassennamen strukturiert sind.

---

# Installation des Standalone Stylesheets

Die Flow-Stylesheet-Bibliothek wird über NPM veröffentlicht und kann mit einem
Package Manager wie `npm` oder `yarn` installiert werden.

```shell
yarn add @mittwald/flow-stylesheet
```

---

# Styles importieren

Um die Components-Styles zu verwenden, musst du das Stylesheet importieren. Füge
diese Zeile zum Einstiegspunkt deines Projektes hinzu.

```
import "@mittwald/flow-stylesheet/css";
```

---

# Layered-Variante (optional)

Das Standard-Stylesheet (`@mittwald/flow-stylesheet/css`) ist **ungelayert**:
welche Regel gewinnt, entscheidet sich über Spezifität und Quell-Reihenfolge.

Optional gibt es eine **gelayerte Variante**, deren Styles in
[CSS Cascade Layers](https://developer.mozilla.org/de/docs/Web/CSS/@layer)
organisiert sind:

```
import "@mittwald/flow-stylesheet/css-layered";
```

Aus dem `@mittwald/flow-react-components`-Paket entsprechend:

```
import "@mittwald/flow-react-components/all-layered.css";
```

Sie liegt unter einem `flow`-Layer mit dieser Reihenfolge:

```css
@layer flow.tokens, flow.reset, flow.base, flow.components;
```

- `flow.tokens` – die Design-Token als CSS Custom Properties
- `flow.reset` – der globale Reset
- `flow.base` – Schriftarten (`@font-face`) und globale Basis-Styles
- `flow.components` – die Styles der einzelnen Komponenten

---

## Warum die gelayerte Variante?

Nach den Regeln der Cascade Layers gewinnt **ungelayertes** CSS immer gegen
gelayertes – unabhängig von der Spezifität. Mit der gelayerten Variante
überschreibst du Flows Styles daher ohne `!important` oder Spezifitäts-Tricks:

```css
/* Gewinnt gegen Flows .flow--button, ohne !important */
.flow--button {
  border-radius: 0;
}
```

Wenn du selbst mit Cascade Layers arbeitest (z. B. Tailwind), deklariere deine
Layer **nach** `flow`, damit sie Vorrang behalten.

---

## Welche Variante wann?

- **Standard (`css` / `all.css`):** klassisches, spezifitätsbasiertes Verhalten.
  Passt auch für Apps mit einem aggressiven globalen Reset (z. B.
  `* { all: initial }`), der gelayerte Styles sonst vollständig überschreiben
  würde.
- **Layered (`css-layered` / `all-layered.css`):** einfache, spezifitätsfreie
  Überschreibbarkeit und saubere Interop mit eigenen Cascade Layers.

---

# Anwendung des Stylesheets

Um anfangen zu können, solltest du verstehen, wie die Klassennamen strukturiert
sind. Die im Stylesheet bereitgestellten Klassennamen folgen einem konsistenten,
komponentenbasierten und leicht zu verstehendem Schema.

---

## Generelle Klassennamen-Auszeichnungen

Alle Klassennamen sind in Lowercase geschrieben und benutzen `-` um Wörter zu
trennen und `--` um logische Abschnitte zu unterteilen.

Der erste logische Abschnitt ist immer der `flow` Namespace. Andere Abschnitte
könnten beispielsweise so aussehen:

### Components

```css
.flow--button
.flow--heading
.flow--alert-icon
```

### Sub-Components

```css
.flow--navigation
.flow--navigation--navigation-item
```

### Spezialisierung: Verschiedene Varianten

```css
.flow--button--primary
.flow--alert--danger
.flow--icon--fixed-width
```

### Spezialisierung: In einer Komposition verwendete Components

```css
.flow--button--icon
.flow--alert--heading
```

---

## Ein Hinweis zur Spezialisierung

Klassennamen die verwendet werden, um die Basiskomponente zu spezialisieren,
müssen immer **zusätzlich zum Basis-Klassennamen** verwendet werden.

Hier ein paar Beispiele um die diese Anforderung zu verdeutlichen:

```tsx
<button className="flow--button flow--button--success">
  Success Button
</button>
```

### Kombinierte Varianten

```tsx
<button className="flow--button flow--button--success flow--button--size-s">
  Small Success Button
</button>
```

### In einer Komposition verwendete Components

Es ist gängige Praxis, größere Components aus bereits bestehenden kleineren
Components zusammenzusetzen. Der [Alert](https://flow.mittwald.de/components/status/alert) besteht
beispielsweise aus einem [Icon](https://flow.mittwald.de/components/content/icon), einer
[Heading](https://flow.mittwald.de/components/content/heading) und optionalem Inhalt. Die verwendeten
Components müssen ihren Basis-Klassennamen für das grundsätzliche Styling
erhalten (`flow--heading`), sowie den spezialisierten Klassennamen
(`flow--alert--heading`), um spezifische Styles des Inline Alerts zu erhalten.

```tsx
import ExampleSvg from "@/content/get-started/stylesheet/examples/components/ExampleSvg";

<aside className="flow--alert">
  <h3 className="flow--heading flow--heading--s flow--alert--heading">
    <span className="flow--heading--heading-text">
      <ExampleSvg className="flow--icon flow--alert-icon flow--heading--icon" />
      E-Mail-Adresse wurde archiviert
    </span>
  </h3>
  <div className="flow--alert--content">
    Da deine Domain gelöscht wurde, wurde diese
    E-Mail-Adresse archiviert. Um E-Mails empfangen und
    senden zu können musst du die Adresse wieder umbenennen.
  </div>
</aside>
```