ui
This commit is contained in:
137
design/CSS_GUIDE.md
Normal file
137
design/CSS_GUIDE.md
Normal file
@ -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.
|
||||||
117
design/component_guide.md
Normal file
117
design/component_guide.md
Normal file
@ -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
|
||||||
|
<button class="button primary">Speichern</button>
|
||||||
|
```
|
||||||
|
|
||||||
|
#### Secondary
|
||||||
|
- alternative Aktionen
|
||||||
|
- kein visueller Fokus
|
||||||
|
|
||||||
|
```html
|
||||||
|
<button class="button secondary">Abbrechen</button>
|
||||||
|
```
|
||||||
|
|
||||||
|
#### Danger
|
||||||
|
- destruktive Aktionen
|
||||||
|
- immer bewusst einsetzen
|
||||||
|
|
||||||
|
```html
|
||||||
|
<button class="button danger">Löschen</button>
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### Disabled State
|
||||||
|
|
||||||
|
```html
|
||||||
|
<button class="button primary" disabled>Speichern</button>
|
||||||
|
```
|
||||||
|
|
||||||
|
Disabled bedeutet: Aktion derzeit nicht möglich – nicht verstecken.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Forms
|
||||||
|
|
||||||
|
### Struktur
|
||||||
|
|
||||||
|
```html
|
||||||
|
<div class="form-group">
|
||||||
|
<label>Name</label>
|
||||||
|
<input type="text" />
|
||||||
|
<div class="hint">Pflichtfeld</div>
|
||||||
|
</div>
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### Validierung
|
||||||
|
|
||||||
|
```html
|
||||||
|
<div class="form-group form-error">
|
||||||
|
<label>Email</label>
|
||||||
|
<input type="email" />
|
||||||
|
<div class="hint">Ungültige Adresse</div>
|
||||||
|
</div>
|
||||||
|
```
|
||||||
|
|
||||||
|
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`.
|
||||||
127
design/components.css
Normal file
127
design/components.css
Normal file
@ -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);
|
||||||
|
}
|
||||||
|
|
||||||
68
design/components_states.css
Normal file
68
design/components_states.css
Normal file
@ -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);
|
||||||
|
}
|
||||||
|
|
||||||
126
design/components_tables_alerts.css
Normal file
126
design/components_tables_alerts.css
Normal file
@ -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);
|
||||||
|
}
|
||||||
91
design/feedback_guide.md
Normal file
91
design/feedback_guide.md
Normal file
@ -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
|
||||||
|
<div class="alert success">Einstellungen gespeichert</div>
|
||||||
|
<div class="alert warning">Unvollständige Konfiguration</div>
|
||||||
|
<div class="alert error">Speichern fehlgeschlagen</div>
|
||||||
|
```
|
||||||
|
|
||||||
|
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
|
||||||
|
<div class="toast success">Änderungen übernommen</div>
|
||||||
|
```
|
||||||
|
|
||||||
|
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`.
|
||||||
|
|
||||||
42
design/form-patterns.css
Normal file
42
design/form-patterns.css
Normal file
@ -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;
|
||||||
|
}
|
||||||
62
design/layout-admin.css
Normal file
62
design/layout-admin.css
Normal file
@ -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);
|
||||||
|
}
|
||||||
95
design/tokens.css
Normal file
95
design/tokens.css
Normal file
@ -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);
|
||||||
|
}
|
||||||
43
design/tokens_dark.css
Normal file
43
design/tokens_dark.css
Normal file
@ -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);
|
||||||
|
}
|
||||||
115
design/ui-skeleton.html
Normal file
115
design/ui-skeleton.html
Normal file
@ -0,0 +1,115 @@
|
|||||||
|
<!--
|
||||||
|
wlkns-dev-standards
|
||||||
|
UI Skeleton – Admin & Tool UI
|
||||||
|
Version: v1.3
|
||||||
|
-->
|
||||||
|
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en" data-theme="light">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
|
<title>wlkns Admin UI</title>
|
||||||
|
|
||||||
|
<link rel="stylesheet" href="tokens.css" />
|
||||||
|
<link rel="stylesheet" href="tokens-dark.css" />
|
||||||
|
<link rel="stylesheet" href="components.css" />
|
||||||
|
<link rel="stylesheet" href="components-tables-alerts.css" />
|
||||||
|
<link rel="stylesheet" href="components-states.css" />
|
||||||
|
<link rel="stylesheet" href="layout-admin.css" />
|
||||||
|
<link rel="stylesheet" href="form-patterns.css" />
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.theme-toggle {
|
||||||
|
margin-left: auto;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 0.5rem;
|
||||||
|
font-size: 0.875rem;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-toggle input {
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
|
||||||
|
<div class="app">
|
||||||
|
<div class="topbar">
|
||||||
|
<div class="topbar-title">wlkns Admin</div>
|
||||||
|
|
||||||
|
<label class="theme-toggle">
|
||||||
|
<span>Dark</span>
|
||||||
|
<input type="checkbox" id="themeToggle" />
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<aside class="sidebar">
|
||||||
|
<nav>
|
||||||
|
<a href="#" class="active">Dashboard</a>
|
||||||
|
<a href="#">Users</a>
|
||||||
|
<a href="#">Settings</a>
|
||||||
|
</nav>
|
||||||
|
</aside>
|
||||||
|
|
||||||
|
<main class="content">
|
||||||
|
|
||||||
|
<div class="bulk-bar">
|
||||||
|
<div class="count">2 ausgewählt</div>
|
||||||
|
<div class="actions">
|
||||||
|
<button class="button secondary">Export</button>
|
||||||
|
<button class="button danger">Löschen</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="section">
|
||||||
|
<div class="search-bar">
|
||||||
|
<input type="text" placeholder="Search…" />
|
||||||
|
<button class="button primary">Search</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="section" style="position: relative;">
|
||||||
|
<table>
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<th></th>
|
||||||
|
<th>Name</th>
|
||||||
|
<th>Status</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
<tr>
|
||||||
|
<td><input type="checkbox" /></td>
|
||||||
|
<td>Item A</td>
|
||||||
|
<td>Active</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td><input type="checkbox" /></td>
|
||||||
|
<td>Item B</td>
|
||||||
|
<td>Inactive</td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="alert warning">
|
||||||
|
Demo Alert – Konfiguration prüfen
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</main>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
const toggle = document.getElementById('themeToggle');
|
||||||
|
const root = document.documentElement;
|
||||||
|
|
||||||
|
toggle.addEventListener('change', () => {
|
||||||
|
root.dataset.theme = toggle.checked ? 'dark' : 'light';
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
Reference in New Issue
Block a user