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