🎨 PD Shared Theme Tokens – Farb- und Designkonzept

Diese Datei beschreibt die Verwendung und Struktur der zentralen Design-Tokens im pd-shared-styles Paket. Sie dient als Leitfaden für Entwickler:innen zur Anwendung und Erweiterung des zentralen Farb- und Styling-Systems.

✅ Farb-Mapping Grid

| Verwendung / Kontext | Variable | Empfohlene Farbe | Beschreibung | |-----------------------------------|-------------------------------------------|-------------------------------|--------------| | Primäre Schriftfarbe | color | --pd-default-darkest-col | Gut lesbar, hoher Kontrast | | Sekundäre Schriftfarbe | color | --pd-default-dark-col | Für weniger dominante Texte | | Inaktive Schriftfarbe | color | --pd-default-disabled-dark-col | Für deaktivierte Inhalte | | Link-Farbe (default) | color | --pd-default-font-link-col | Standard-Linkfarbe | | Link-Farbe (hover) | color | --pd-default-font-link-col-hover | Hover-Zustand |

Primary Color (abgestuft)

| UI-Kontext | Variable | Farbe | |----------------------------------|----------------------------------|-------------------------------| | Hauptbutton (Primary) | background-color | --pd-default-col | | Hover-Zustand | background-color | --pd-default-light-col | | Fokus oder Aktivrahmen | border-color, outline | --pd-default-dark-col | | Sekundärbutton | color, border-color | --pd-default-dark-col | | Icons | fill, stroke | --pd-default-darker-col | | Disabled (Borders) | border-color | --pd-default-disabled-light-col | | Disabled (Subtle BG) | background-color | --pd-default-disabled-lightest-col |

Secondary Color (vereinfacht)

| UI-Kontext | Variable | Farbe | |----------------------------------|----------------------------------|-------------------------------| | Kontrast-CTA Button | background-color | --pd-secondary-col | | Hover | background-color | --pd-secondary-light-col | | Label / Hinweistext | color | --pd-secondary-dark-col |

Fehler / Statusfarben

| Kontext | Variable | Farbe | |----------------------------------|----------------------------------|-------------------------------| | Fehlertext | color | --pd-default-error-col | | Fehlerrahmen | border-color | --pd-default-error-dark-col | | Fehlerhintergrund | background-color | --pd-default-error-light-col|

Erfolg / Bestätigung

| Kontext | Variable | Farbe | |----------------------------------|----------------------------------|-------------------------------| | Erfolgstext | color | --pd-default-success-col | | Erfolgsrahmen | border-color | --pd-default-success-dark-col| | Erfolgshintergrund | background-color | --pd-default-success-light-col|

🧾 Übersicht aller Tokens

🎨 Farb-Variablen

| Name | Beschreibung | |------|--------------| | --pd-default-col | Hauptfarbe | | --pd-default-lighter-col bis --pd-default-darkest-col | Helligkeitsabstufungen | | --pd-secondary-col, --pd-secondary-light-col, --pd-secondary-dark-col | Sekundärfarben | | --pd-default-error-* | Fehlerfarben | | --pd-default-success-* | Erfolgsfarben | | --pd-default-disabled-* | Farben für deaktivierte Zustände | | --pd-default-hover-col | Hover-Farbe | | --pd-default-bg-col, --pd-default-bg-light-col, --pd-default-bg-dark-col | Hintergrundfarben |

🔤 Font-Variablen

| Name | Beschreibung | |------|--------------| | --pd-default-font-title-family | Schriftfamilie für Titel | | --pd-default-font-content-family | Schriftfamilie für Inhalte | | --pd-default-font-input-family | Schriftfamilie für Formulare | | --pd-default-font-link-family | Schriftfamilie für Links | | --pd-default-font-title-col | Titelfarbe | | --pd-default-font-content-col | Inhaltsfarbe | | --pd-default-font-input-col | Eingabefarbe | | --pd-default-font-link-col / --hover | Linkfarben | | --pd-default-font-content-size | Standardgröße Text | | --pd-default-font-link-size | Schriftgröße Links | | --pd-default-font-input-size | Schriftgröße Eingabe |

🧱 Styling (Spacing, Radius, Shadow)

| Name | Beschreibung | |------|--------------| | --pd-spacing-xs bis --lg | Abstände | | --pd-radius-sm bis --lg | Rundungen | | --pd-border-width | Standard-Border | | --pd-shadow-sm bis --lg | Schattenabstufungen |

💡 Empfehlung

• Verwende ausschließlich --pd-* Tokens in Komponenten
• --app-* können vom App-Entwickler gesetzt werden und überschreiben zentrale Werte
• Theming erfolgt durch Umschalten des Attributes theme="light" | "dark" auf dem <html>- oder <body>-Element