ui

design/CSS_GUIDE.md

@@ -0,0 +1,137 @@
+# CSS_GUIDE.md
+
+## Zweck
+Dieses Dokument beschreibt die Nutzung der CSS-Design-Tokens aus `tokens.css`.
+
+Ziel ist eine konsistente, wartbare und wiedererkennbare UI, unabhängig vom Framework oder Projekt.
+
+---
+
+## Grundregeln
+
+- Keine Hardcodes für Farben, Schriften oder Abstände
+- Nutzung ausschließlich über CSS-Variablen
+- Tokens sind stabiler als Klassen
+
+Regel:
+> Wenn ein Wert nicht aus `:root` kommt, gehört er dort hin.
+
+---
+
+## Einbindung
+
+```html
+<link rel="stylesheet" href="tokens.css" />
+```
+
+Frameworks (Beispiele):
+- React / Vue: global importieren
+- NiceGUI / Gradio: über Custom CSS
+
+---
+
+## Farben verwenden
+
+```css
+.header {
+  background: var(--color-primary);
+  color: var(--color-surface);
+}
+
+.link {
+  color: var(--color-accent);
+}
+
+.error {
+  color: var(--color-error);
+}
+```
+
+Regeln:
+- Akzentfarbe nur für Interaktion
+- Error-Farbe ausschließlich für Fehler
+
+---
+
+## Typografie
+
+```css
+h1, h2, h3 {
+  font-weight: 600;
+}
+
+p {
+  font-size: var(--font-size-md);
+}
+
+code {
+  font-family: var(--font-mono);
+}
+```
+
+Keine zusätzliche Schriftdefinition pro Komponente.
+
+---
+
+## Spacing
+
+```css
+.card {
+  padding: var(--space-4);
+  margin-bottom: var(--space-5);
+}
+```
+
+Regel:
+- Abstände folgen dem 8-px-Grid
+- keine krummen Werte
+
+---
+
+## Border & Radius
+
+```css
+.panel {
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-md);
+}
+```
+
+Rahmen sind funktional, nicht dekorativ.
+
+---
+
+## Shadows
+
+```css
+.dropdown {
+  box-shadow: var(--shadow-sm);
+}
+```
+
+Schatten sparsam einsetzen.
+
+---
+
+## Erweiterungen
+
+- Dark Mode: eigenes Token-Set (`[data-theme="dark"]`)
+- Projekt-spezifische Tokens dürfen ergänzt, aber nicht ersetzt werden
+
+---
+
+## Anti-Patterns
+
+- Inline-Styles mit festen Farben
+- Kopierte Farbwerte aus Design-Tools
+- Magic Numbers
+
+Wenn ein UI inkonsistent wirkt, liegt es fast immer an Regelbruch hier.
+
+---
+
+## Status
+
+Version: v1.0 (Baseline)
+
+Dieses Dokument ergänzt `DESIGN.md` und ist verbindlich für Web-UIs.