From e9807a60d5b6009a0aa615f6a0b543654cd779ce Mon Sep 17 00:00:00 2001 From: stephan Date: Sat, 20 Dec 2025 15:53:19 +0100 Subject: [PATCH] ui --- design/CSS_GUIDE.md | 137 ++++++++++++++++++++++++++++ design/component_guide.md | 117 ++++++++++++++++++++++++ design/components.css | 127 ++++++++++++++++++++++++++ design/components_states.css | 68 ++++++++++++++ design/components_tables_alerts.css | 126 +++++++++++++++++++++++++ design/feedback_guide.md | 91 ++++++++++++++++++ design/form-patterns.css | 42 +++++++++ design/layout-admin.css | 62 +++++++++++++ design/tokens.css | 95 +++++++++++++++++++ design/tokens_dark.css | 43 +++++++++ design/ui-skeleton.html | 115 +++++++++++++++++++++++ 11 files changed, 1023 insertions(+) create mode 100644 design/CSS_GUIDE.md create mode 100644 design/component_guide.md create mode 100644 design/components.css create mode 100644 design/components_states.css create mode 100644 design/components_tables_alerts.css create mode 100644 design/feedback_guide.md create mode 100644 design/form-patterns.css create mode 100644 design/layout-admin.css create mode 100644 design/tokens.css create mode 100644 design/tokens_dark.css create mode 100644 design/ui-skeleton.html diff --git a/design/CSS_GUIDE.md b/design/CSS_GUIDE.md new file mode 100644 index 0000000..39cc103 --- /dev/null +++ b/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 + +``` + +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. diff --git a/design/component_guide.md b/design/component_guide.md new file mode 100644 index 0000000..ef5eba8 --- /dev/null +++ b/design/component_guide.md @@ -0,0 +1,117 @@ +# COMPONENT_GUIDE.md + +## Zweck +Dieses Dokument beschreibt die **standardisierten UI-Komponenten** für Buttons und Forms. + +Ziel: +- konsistentes Look & Feel +- vorhersehbare Interaktion +- minimale Variantenvielfalt + +--- + +## Buttons + +### Grundregel + +Buttons sind **Aktionen**, keine Dekoration. + +Maximal **eine Primary-Action pro View**. + +--- + +### Button-Typen + +#### Primary +- wichtigste Aktion +- nutzt Akzentfarbe + +```html + +``` + +#### Secondary +- alternative Aktionen +- kein visueller Fokus + +```html + +``` + +#### Danger +- destruktive Aktionen +- immer bewusst einsetzen + +```html + +``` + +--- + +### Disabled State + +```html + +``` + +Disabled bedeutet: Aktion derzeit nicht möglich – nicht verstecken. + +--- + +## Forms + +### Struktur + +```html +
+ + +
Pflichtfeld
+
+``` + +--- + +### Validierung + +```html +
+ + +
Ungültige Adresse
+
+``` + +Regeln: +- Fehler sind sichtbar +- keine Farbcodes ohne Text + +--- + +## Do / Don’t + +### Do +- klare Button-Texte +- konsistente Platzierung +- sichtbare Fokus-Zustände + +### Don’t +- Icons ohne Text +- mehrere Primary-Buttons +- versteckte Fehlermeldungen + +--- + +## Erweiterbarkeit + +- weitere Komponenten dürfen ergänzt werden +- bestehende Klassen nicht brechen +- Tokens bleiben die Grundlage + +--- + +## Status + +Version: **v1.0 (Baseline)** + +Dieses Dokument ergänzt `DESIGN.md` und `CSS_GUIDE.md`. diff --git a/design/components.css b/design/components.css new file mode 100644 index 0000000..57e52d1 --- /dev/null +++ b/design/components.css @@ -0,0 +1,127 @@ +/* + wlkns-dev-standards + UI Components – Buttons & Forms + Version: v1.0 + + Zweck: + Standardisierte UI-Bausteine auf Basis von tokens.css. + Fokus: Buttons, Inputs, Forms. +*/ + +/* ========================= + Buttons + ========================= */ + +.button { + display: inline-flex; + align-items: center; + justify-content: center; + gap: var(--space-2); + + padding: var(--space-2) var(--space-4); + font-size: var(--font-size-sm); + font-weight: 500; + + border-radius: var(--radius-md); + border: 1px solid transparent; + cursor: pointer; + + background: none; + color: var(--color-text); +} + +.button:disabled { + opacity: 0.5; + cursor: not-allowed; +} + +/* Primary */ +.button.primary { + background: var(--color-accent); + color: #ffffff; +} + +.button.primary:hover { + filter: brightness(0.95); +} + +/* Secondary */ +.button.secondary { + border-color: var(--color-border); + background: var(--color-surface); +} + +.button.secondary:hover { + background: var(--color-bg); +} + +/* Danger */ +.button.danger { + background: var(--color-error); + color: #ffffff; +} + +.button.danger:hover { + filter: brightness(0.95); +} + +/* ========================= + Forms + ========================= */ + +.form-group { + display: flex; + flex-direction: column; + gap: var(--space-1); + margin-bottom: var(--space-4); +} + +label { + font-size: var(--font-size-sm); + color: var(--color-text-muted); +} + +input, +select, +textarea { + padding: var(--space-2) var(--space-3); + font-family: var(--font-ui); + font-size: var(--font-size-sm); + + border: 1px solid var(--color-border); + border-radius: var(--radius-sm); + background: var(--color-surface); + color: var(--color-text); +} + +input:focus, +select:focus, +textarea:focus { + outline: none; + border-color: var(--color-accent); +} + +input:disabled, +select:disabled, +textarea:disabled { + background: var(--color-bg); + color: var(--color-text-muted); +} + +/* Validation */ + +.form-error input, +.form-error textarea, +.form-error select { + border-color: var(--color-error); +} + +.form-error .hint { + color: var(--color-error); +} + +.hint { + font-size: var(--font-size-xs); + color: var(--color-text-muted); +} + diff --git a/design/components_states.css b/design/components_states.css new file mode 100644 index 0000000..e3aaf88 --- /dev/null +++ b/design/components_states.css @@ -0,0 +1,68 @@ +/* + wlkns-dev-standards + UI States – Empty, Loading, Bulk Actions + Version: v1.0 + + Zweck: + Einheitliche Zustände für Admin- und Tool-UIs. +*/ + +/* ========================= + Empty State + ========================= */ + +.empty-state { + text-align: center; + padding: var(--space-6); + color: var(--color-text-muted); +} + +.empty-state h3 { + margin-bottom: var(--space-2); + font-size: var(--font-size-md); + color: var(--color-text); +} + +.empty-state p { + margin-bottom: var(--space-4); +} + +/* ========================= + Loading State + ========================= */ + +.loading-overlay { + position: absolute; + inset: 0; + background: rgba(248, 250, 252, 0.8); + display: flex; + align-items: center; + justify-content: center; + font-size: var(--font-size-sm); + color: var(--color-text-muted); +} + +/* ========================= + Bulk Actions + ========================= */ + +.bulk-bar { + display: flex; + justify-content: space-between; + align-items: center; + padding: var(--space-3) var(--space-4); + background: var(--color-surface); + border: 1px solid var(--color-border); + border-radius: var(--radius-sm); + margin-bottom: var(--space-4); +} + +.bulk-bar .count { + font-size: var(--font-size-sm); +} + +.bulk-bar .actions { + display: flex; + gap: var(--space-2); +} + diff --git a/design/components_tables_alerts.css b/design/components_tables_alerts.css new file mode 100644 index 0000000..a47c4b8 --- /dev/null +++ b/design/components_tables_alerts.css @@ -0,0 +1,126 @@ +/* + wlkns-dev-standards + UI Components – Tables, Lists, Alerts & Toasts + Version: v1.0 + + Zweck: + Erweiterung der Component-Bibliothek für typische Admin-UIs. + Fokus: Tabellen, Listen, Alerts, Toasts. +*/ + +/* ========================= + Tables + ========================= */ + +table { + width: 100%; + border-collapse: collapse; + font-size: var(--font-size-sm); +} + +thead { + background: var(--color-bg); +} + +thead th { + text-align: left; + padding: var(--space-3); + border-bottom: 1px solid var(--color-border); + color: var(--color-text-muted); + font-weight: 500; +} + +tbody td { + padding: var(--space-3); + border-bottom: 1px solid var(--color-border); +} + +tbody tr:hover { + background: var(--color-bg); +} + +/* ========================= + Lists + ========================= */ + +.list { + display: flex; + flex-direction: column; + gap: var(--space-2); +} + +.list-item { + padding: var(--space-3); + border: 1px solid var(--color-border); + border-radius: var(--radius-sm); + background: var(--color-surface); +} + +.list-item-title { + font-weight: 500; +} + +.list-item-meta { + font-size: var(--font-size-xs); + color: var(--color-text-muted); +} + +/* ========================= + Alerts + ========================= */ + +.alert { + padding: var(--space-3) var(--space-4); + border-radius: var(--radius-sm); + font-size: var(--font-size-sm); + border: 1px solid transparent; +} + +.alert.success { + background: rgba(22, 163, 74, 0.1); + border-color: var(--color-success); + color: var(--color-success); +} + +.alert.warning { + background: rgba(217, 119, 6, 0.1); + border-color: var(--color-warning); + color: var(--color-warning); +} + +.alert.error { + background: rgba(220, 38, 38, 0.1); + border-color: var(--color-error); + color: var(--color-error); +} + +/* ========================= + Toasts + ========================= */ + +.toast { + position: fixed; + bottom: var(--space-5); + right: var(--space-5); + min-width: 260px; + + padding: var(--space-3) var(--space-4); + border-radius: var(--radius-md); + font-size: var(--font-size-sm); + + background: var(--color-surface); + border: 1px solid var(--color-border); + box-shadow: var(--shadow-sm); +} + +.toast.success { + border-left: 4px solid var(--color-success); +} + +.toast.warning { + border-left: 4px solid var(--color-warning); +} + +.toast.error { + border-left: 4px solid var(--color-error); +} diff --git a/design/feedback_guide.md b/design/feedback_guide.md new file mode 100644 index 0000000..3e6635b --- /dev/null +++ b/design/feedback_guide.md @@ -0,0 +1,91 @@ +# FEEDBACK_GUIDE.md + +## Zweck +Dieses Dokument definiert **konsistentes visuelles Feedback** in Form von Alerts und Toasts. + +Ziel: +- klare Zustände +- keine Überraschungen +- sofort verständliche Rückmeldungen + +--- + +## Grundregeln + +- Feedback ist immer sichtbar +- Feedback ist textlich eindeutig +- Farbe unterstützt – ersetzt aber nicht die Aussage + +--- + +## Alerts + +Alerts sind **statisch** und kontextgebunden. + +Typische Nutzung: +- Formularfehler +- Systemzustände +- Konfigurationsprobleme + +### Beispiele + +```html +
Einstellungen gespeichert
+
Unvollständige Konfiguration
+
Speichern fehlgeschlagen
+``` + +Regeln: +- Alert steht nahe am betroffenen Inhalt +- kein automatisches Verschwinden + +--- + +## Toasts + +Toasts sind **temporär** und nicht blockierend. + +Typische Nutzung: +- Erfolgsmeldungen +- kurze Hinweise +- Hintergrundaktionen + +### Beispiel + +```html +
Änderungen übernommen
+``` + +Regeln: +- niemals kritisch +- immer zeitlich begrenzt +- dürfen ignoriert werden + +--- + +## Wann was? + +| Situation | Element | +|---------|---------| +| Formular ungültig | Alert | +| Aktion erfolgreich | Toast | +| Kritischer Fehler | Alert | +| Hintergrundinfo | Toast | + +--- + +## Anti-Patterns + +- Toasts für Fehler +- Alerts ohne Text +- Farben ohne Bedeutung +- mehrere Feedback-Typen gleichzeitig + +--- + +## Status + +Version: **v1.0 (Baseline)** + +Dieses Dokument ergänzt `COMPONENT_GUIDE.md`. + diff --git a/design/form-patterns.css b/design/form-patterns.css new file mode 100644 index 0000000..13d6072 --- /dev/null +++ b/design/form-patterns.css @@ -0,0 +1,42 @@ +/* + wlkns-dev-standards + Form Patterns – Search, Filter, Pagination + Version: v1.0 +*/ + +/* Search Bar */ +.search-bar { + display: flex; + gap: var(--space-2); + margin-bottom: var(--space-4); +} + +.search-bar input { + flex: 1; +} + +/* Filter Row */ +.filter-row { + display: flex; + gap: var(--space-3); + margin-bottom: var(--space-4); +} + +/* Pagination */ +.pagination { + display: flex; + gap: var(--space-2); + align-items: center; +} + +.pagination .page { + padding: var(--space-1) var(--space-2); + border: 1px solid var(--color-border); + border-radius: var(--radius-sm); + cursor: pointer; +} + +.pagination .page.active { + background: var(--color-bg); + font-weight: 500; +} diff --git a/design/layout-admin.css b/design/layout-admin.css new file mode 100644 index 0000000..b80f7a9 --- /dev/null +++ b/design/layout-admin.css @@ -0,0 +1,62 @@ +/* + wlkns-dev-standards + Admin Layout – Sidebar / Topbar / Content + Version: v1.0 + + Zweck: + Standard-Layout für Admin- und Tool-UIs. + Ruhig, vorhersehbar, arbeitsfähig. +*/ + +.app { + display: grid; + grid-template-columns: 240px 1fr; + grid-template-rows: 56px 1fr; + min-height: 100vh; +} + +/* Topbar */ +.topbar { + grid-column: 1 / -1; + background: var(--color-primary); + color: var(--color-surface); + display: flex; + align-items: center; + padding: 0 var(--space-4); +} + +.topbar-title { + font-size: var(--font-size-md); + font-weight: 500; +} + +/* Sidebar */ +.sidebar { + background: var(--color-surface); + border-right: 1px solid var(--color-border); + padding: var(--space-4); +} + +.sidebar nav { + display: flex; + flex-direction: column; + gap: var(--space-2); +} + +.sidebar a { + text-decoration: none; + color: var(--color-text); + padding: var(--space-2) var(--space-3); + border-radius: var(--radius-sm); +} + +.sidebar a.active, +.sidebar a:hover { + background: var(--color-bg); +} + +/* Content */ +.content { + background: var(--color-bg); + padding: var(--space-5); +} diff --git a/design/tokens.css b/design/tokens.css new file mode 100644 index 0000000..232564f --- /dev/null +++ b/design/tokens.css @@ -0,0 +1,95 @@ +/* + wlkns-dev-standards + Design Tokens – CSS + Version: v1.0 + + Zweck: + Zentrale, technologieunabhängige Design-Tokens für Web-UIs. + Dieses File ist die Single Source of Truth für Farben, Typografie + und grundlegende Abstände. +*/ + +:root { + /* ========================= + Farben – Identity + ========================= */ + + --color-primary: #1F2A37; /* Header, Navigation, Headlines */ + --color-accent: #0EA5A4; /* Links, Fokus, aktive States */ + + /* ========================= + Farben – Status + ========================= */ + + --color-success: #16A34A; + --color-warning: #D97706; + --color-error: #DC2626; + + /* ========================= + Farben – Neutrals (Light) + ========================= */ + + --color-bg: #F8FAFC; + --color-surface: #FFFFFF; + --color-border: #E5E7EB; + + --color-text: #111827; + --color-text-muted: #4B5563; + + /* ========================= + Typografie + ========================= */ + + --font-ui: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, + 'Segoe UI', sans-serif; + + --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, + Menlo, Consolas, monospace; + + --font-size-xs: 0.75rem; /* 12px */ + --font-size-sm: 0.875rem; /* 14px */ + --font-size-md: 1rem; /* 16px */ + --font-size-lg: 1.125rem; /* 18px */ + --font-size-xl: 1.25rem; /* 20px */ + + --line-height-tight: 1.3; + --line-height-base: 1.6; + + /* ========================= + Spacing (8px Grid) + ========================= */ + + --space-1: 0.25rem; /* 4px */ + --space-2: 0.5rem; /* 8px */ + --space-3: 0.75rem; /* 12px */ + --space-4: 1rem; /* 16px */ + --space-5: 1.5rem; /* 24px */ + --space-6: 2rem; /* 32px */ + + /* ========================= + Radius & Effects + ========================= */ + + --radius-sm: 4px; + --radius-md: 6px; + --radius-lg: 8px; + + --shadow-sm: 0 1px 2px rgba(0,0,0,0.05); +} + +/* ========================= + Base Styles (optional) + ========================= */ + +body { + font-family: var(--font-ui); + font-size: var(--font-size-md); + line-height: var(--line-height-base); + color: var(--color-text); + background-color: var(--color-bg); +} + +code, pre { + font-family: var(--font-mono); + font-size: var(--font-size-sm); +} diff --git a/design/tokens_dark.css b/design/tokens_dark.css new file mode 100644 index 0000000..0f9d9cf --- /dev/null +++ b/design/tokens_dark.css @@ -0,0 +1,43 @@ +/* + wlkns-dev-standards + Design Tokens – Dark Mode + Version: v1.0 + + Zweck: + Dark-Mode-Erweiterung für tokens.css. + Keine neuen Bedeutungen – nur andere Werte. +*/ + +[data-theme="dark"] { + /* ========================= + Farben – Identity + ========================= */ + + --color-primary: #0F172A; + --color-accent: #2DD4BF; + + /* ========================= + Farben – Status + ========================= */ + + --color-success: #22C55E; + --color-warning: #F59E0B; + --color-error: #EF4444; + + /* ========================= + Farben – Neutrals (Dark) + ========================= */ + + --color-bg: #020617; + --color-surface: #020617; + --color-border: #1E293B; + + --color-text: #E5E7EB; + --color-text-muted: #94A3B8; + + /* ========================= + Effects + ========================= */ + + --shadow-sm: 0 1px 2px rgba(0,0,0,0.6); +} diff --git a/design/ui-skeleton.html b/design/ui-skeleton.html new file mode 100644 index 0000000..ed987ec --- /dev/null +++ b/design/ui-skeleton.html @@ -0,0 +1,115 @@ + + + + + + + + wlkns Admin UI + + + + + + + + + + + + + +
+
+
wlkns Admin
+ + +
+ + + +
+ +
+
2 ausgewählt
+
+ + +
+
+ +
+
+ + +
+
+ +
+ + + + + + + + + + + + + + + + + + + + +
NameStatus
Item AActive
Item BInactive
+
+ +
+ Demo Alert – Konfiguration prüfen +
+ +
+
+ + + + +