40 lines
1.2 KiB
Markdown
40 lines
1.2 KiB
Markdown
# 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`
|