Add Vapor shell palette presets and contract docs

2026-02-28 18:37:53 +03:00
parent 1553eb1394
commit 0e710ec4ce
8 changed files with 507 additions and 62 deletions
--- a/kit/patterns/theme-vapor/palette-catalog.md
+++ b/kit/patterns/theme-vapor/palette-catalog.md
@@ -0,0 +1,39 @@
+# Vapor Shell Palette Catalog
+
+This catalog defines reusable `app-shell` presets for host projects that consume `theme-vapor`.
+
+Apply a preset on the root element:
+
+```html
+<html data-vapor-shell="miami-sunset">
+```
+
+Optional: host project can override shell height without changing preset IDs:
+
+```css
+:root { --shell-height: 72px; }
+```
+
+## Presets (Header + Accent)
+
+| Preset ID | Header core | Accent core | Default shell height |
+|---|---|---|---|
+| `miami-sunset` | `#fbe5f8` | `#ff7ec7` | `66px` |
+| `neon-grid` | `#f5eeff` | `#ff4fd8` | `64px` |
+| `laser-flamingo` | `#ffe8f4` | `#ff6fae` | `70px` |
+| `synth-lagoon` | `#e8f6ff` | `#67d7ff` | `62px` |
+| `mall-soft` | `#fff1f8` | `#ffb5d7` | `68px` |
+| `hologram-sky` | `#edf9ff` | `#5ce4ff` | `64px` |
+| `peach-drive` | `#fff0e6` | `#ff9a6a` | `72px` |
+| `ultraviolet-plaza` | `#f0e8ff` | `#b26dff` | `66px` |
+| `cyber-mint` | `#ebfff7` | `#57f0c1` | `62px` |
+
+## Token Surface
+
+Each preset resolves these tokens in `static/vapor.css`:
+
+- `--shell-height`
+- `--shell-bg-light`, `--shell-bg-dark`
+- `--shell-border-light`, `--shell-border-dark`
+- `--shell-accent-light`, `--shell-accent-dark`
+- `--shell-accent-line-light`, `--shell-accent-line-dark`