1.2 KiB
1.2 KiB
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 data-vapor-shell="miami-sunset">
Optional: host project can override shell height without changing preset IDs:
: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