ui

2025-12-20 15:53:19 +01:00
parent 769462c439
commit e9807a60d5
11 changed files with 1023 additions and 0 deletions
--- a/design/components.css
+++ 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);
+}
+