mchus/bible
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add vapor shell preset selection flow for host apps

Browse Source
This commit is contained in:
Michael Chus
2026-02-28 18:55:43 +03:00
parent 0e710ec4ce
commit 7ee984a225
9 changed files with 153 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
kit/patterns/theme-vapor/notes.md
View File

@@ -17,6 +17,7 @@ This module is the active reusable theme source for design-code consumers.
- Pattern contracts should reference shared behavior contracts and rely on this module for visual primitives.
- When baseline visuals change, update this module first to keep downstream integration deterministic.
- For shell color selection, use `palette-catalog.md` and set `data-vapor-shell` on `<html>`.
- For runtime switching, the recommended query key is `vapor_shell` (same IDs as the catalog).
- Keep host-specific brand overrides outside this module unless they are reusable presets.
## Boundary

11
kit/patterns/theme-vapor/palette-catalog.md
View File

@@ -14,6 +14,17 @@ Optional: host project can override shell height without changing preset IDs:
:root { --shell-height: 72px; }
```
## Selection Approach
Recommended precedence for host integration:
1. `?vapor_shell=<preset-id>` query parameter (preview/share links)
2. `localStorage["vapor_shell"]` (remembered user choice)
3. `<html data-vapor-shell="...">` static default from server/templates
4. fallback preset: `miami-sunset`
The scaffold and demo JavaScript implement this precedence.
## Presets (Header + Accent)
| Preset ID | Header core | Accent core | Default shell height |