stephan/kiddo
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

docs: add project management structure

Browse Source
This commit is contained in:
Stephan Wilkens
2025-12-28 09:16:22 +01:00
parent 3991362e67
commit 4eb20e2449
50 changed files with 1905 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

62
assets/design/THEME_WATCHTOWER.md Normal file
View File

@ -0,0 +1,62 @@
# Theme: Watchtower (Sci-Fi / Dark)
Dieses Theme basiert auf der `minecraft-watchtower` UI. Es ist ein **High-Contrast Dark Mode** mit Neon-Akzenten, ausgelegt auf technische Dashboards und "Immersive UIs".
## Verwendung
Binde statt `tokens.css` die Datei `tokens_watchtower.css` ein und ergänze `theme_watchtower.css`.
```html
<link rel="stylesheet" href="design/tokens_watchtower.css">
<link rel="stylesheet" href="design/components.css"> <!-- Standard Components -->
<link rel="stylesheet" href="design/theme_watchtower.css"> <!-- Theme Overrides -->
```
Zusätzlich sollte die Klasse `.bg-noise` direkt nach dem `<body>` Tag eingefügt werden:
```html
<body>
<div class="bg-noise"></div>
...
</body>
```
---
## TUI (Terminal User Interface) Adaption
Da dieses Design oft in CLI-Tools oder TUIs verwendet wird, gelten folgende Mappings für Terminals (16/256 Farben).
### Farb-Palette
| Rolle | CSS Variable | ANSI Color (16) | ANSI Code | Hex Fallback |
| :--- | :--- | :--- | :--- | :--- |
| **Background** | `--bg-dark` | Black | `\e[40m` | `#0b0f14` |
| **Text** | `--text` | White (Bright) | `\e[97m` | `#e6edf5` |
| **Muted Text** | `--text-dim` | Cyan (Dim) | `\e[36m` | `#9aa7b8` |
| **Accent** | `--accent` | Cyan (Bright) | `\e[96m` | `#00e08f` |
| **Success** | `--success` | Green (Bright) | `\e[92m` | `#00e08f` (Teal) |
| **Warning** | `--warning` | Yellow (Bright) | `\e[93m` | `#ffb454` |
| **Error** | `--danger` | Red (Bright) | `\e[91m` | `#ff5e5e` |
### Block-Elemente & Rahmen
Für TUI-Rahmen nutzen wir "Heavy" oder "Double" Lines, um den technischen Look zu imitieren.
* **Box Border:** `═` (Double Horizontal), `║` (Double Vertical), `╔ ╗ ╚ ╝` (Corners)
* **Progress Bar:** `█` (Full Block) für den Füllstand, `░` (Light Shade) für den Hintergrund.
### Beispiel (Charm / Bubble Tea - Go)
```go
var (
ColorAccent = lipgloss.Color("#00e08f")
ColorBg = lipgloss.Color("#0b0f14")
ColorText = lipgloss.Color("#e6edf5")
StyleCard = lipgloss.NewStyle().
Border(lipgloss.RoundedBorder()).
BorderForeground(ColorAccent).
Padding(1, 2).
Background(ColorBg)
)
```