ui styles

poweron/ui_playground/doc_styles_architecture.md

@@ -0,0 +1,125 @@
+# PowerOn CSS Architektur
+
+## Datei-Struktur
+
+Die CSS-Dateien sind in drei Ebenen organisiert:
+
+### 1. `styles_variables.css` (Grundlage)
+- **Zweck**: Zentrale Definition aller CSS-Variablen und Design-Tokens
+- **Enthält**: Farben, Spacing, Border-Radius, Shadows, etc.
+- **Wird geladen**: Als erste CSS-Datei
+
+### 2. `styles_base.css` (Basis-Komponenten)
+- **Zweck**: Zentrale Definition aller wiederkehrenden Basis-Styles
+- **Enthält**:
+  - Typography (h1-h6, section-header)
+  - Button-Varianten (primary, secondary, danger, outline, icon, etc.) mit allen States (hover, active, disabled)
+  - Input-Felder (text, number, email, password, etc.) mit focus/disabled states
+  - Cards (card, card-header, card-body, card-footer)
+  - Labels und Form-Groups
+  - Links, Lists, Badges
+  - Utility Classes
+- **Wird geladen**: Nach `styles_variables.css`
+
+### 3. Spezifische Styles-Dateien
+- `styles.css`: Layout, Authentication, spezifische Overrides
+- `styles_navigation.css`: Navigation und Sidebar
+- `styles_form.css`: Entity-Forms, Tabellen, Modals
+- `styles_workflow_*.css`: Workflow-spezifische Styles
+- `styles_icons.css`: Icon-Styles
+
+## Verwendung
+
+### Button verwenden
+
+```html
+<!-- Primary Button (Standard) -->
+<button class="btn">Klick mich</button>
+<!-- oder -->
+<button class="btn-primary">Klick mich</button>
+
+<!-- Secondary Button -->
+<button class="btn-secondary">Sekundär</button>
+
+<!-- Danger/Alert Button -->
+<button class="btn-danger">Löschen</button>
+
+<!-- Outline Buttons -->
+<button class="btn-outline">Outline</button>
+<button class="btn-outline-secondary">Outline Secondary</button>
+
+<!-- Icon Button -->
+<button class="btn-icon"><i class="fas fa-trash"></i></button>
+```
+
+### Input-Felder verwenden
+
+```html
+<!-- Standard Input - nutzt automatisch Basis-Styles -->
+<input type="text" placeholder="Name">
+<input type="email" placeholder="Email">
+<textarea></textarea>
+<select></select>
+
+<!-- Mit Label -->
+<label>Name</label>
+<input type="text">
+```
+
+### Cards verwenden
+
+```html
+<div class="card">
+  <div class="card-header">
+    <h3>Titel</h3>
+  </div>
+  <div class="card-body">
+    Inhalt
+  </div>
+  <div class="card-footer">
+    <button class="btn">Aktion</button>
+  </div>
+</div>
+```
+
+## Button States
+
+Alle Buttons haben automatisch:
+- **:hover** - Hover-Effekt
+- **:active** - Active-State mit leichter Translation
+- **:disabled** - Disabled-State mit reduzierter Opacity
+- **:focus** - Focus-State (bei Tastaturnavigation)
+
+## Anpassungen
+
+### Neue Button-Variante erstellen
+
+```css
+/* In der spezifischen CSS-Datei */
+.my-custom-btn {
+  /* Nutzt Basis-Styles von .btn */
+  background-color: var(--color-custom);
+  /* Weitere Anpassungen */
+}
+```
+
+### Spezifisches Override
+
+```css
+/* In der spezifischen CSS-Datei */
+.login-btn {
+  /* Override nur was nötig ist */
+  width: 100%;
+  font-size: 1rem;
+  /* Rest nutzt Basis-Styles */
+}
+```
+
+## Vorteile
+
+1. **Konsistenz**: Alle Komponenten nutzen dieselben Basis-Styles
+2. **Wartbarkeit**: Änderungen nur an einer Stelle
+3. **Schlankheit**: Spezifische CSS-Dateien enthalten nur wirklich spezifische Styles
+4. **Wiederverwendbarkeit**: Basis-Komponenten können überall verwendet werden
+5. **Performance**: Reduzierte CSS-Größe durch zentrale Definitionen
+