john-okeefe
6f271d624f
Add semantic design tokens and base primitives to replace the verbose inline var() styling that made the UI feel dated. - Rename colliding Tailwind color tokens (bg-primary/bg-secondary) to semantic names (surface/surface-raised/content/content-muted/brand/line) - Derive hover, overlay, border-strong, accent-muted and elevation tokens once on <body> so they adapt to every theme automatically - Make :root mirror Tokyo Night to kill the first-paint theme flash - Add component primitives in @layer components: .card (surface + soft shadow, no hard border), .btn variants, .input, .chip, .badge, .icon-btn - Add theme-aware status/priority badges and global focus-visible styling - Add an inline-SVG Icon() component (consistent stroke language) to replace the mixed emoji/SVG iconography - Data-drive theme/wood options and add an active-nav helper - Add skeleton shimmer + x-cloak support
38 lines
1.3 KiB
Go
38 lines
1.3 KiB
Go
package templates
|
|
|
|
// ThemeOption describes a selectable color theme shown in the header picker.
|
|
type ThemeOption struct {
|
|
Name string // CSS theme suffix applied as class theme-<name>
|
|
Label string // Human-readable label
|
|
Color string // Hex swatch colour
|
|
}
|
|
|
|
// ThemeOptions is the full set of selectable colour themes, in display order.
|
|
var ThemeOptions = []ThemeOption{
|
|
{"tokyo-night", "Tokyo Night", "#7aa2f7"},
|
|
{"dracula", "Dracula", "#bd93f9"},
|
|
{"nord", "Nord", "#88c0d0"},
|
|
{"solarized-dark", "Solarized Dark", "#2aa198"},
|
|
{"monokai", "Monokai", "#a6e22e"},
|
|
{"one-dark-pro", "One Dark Pro", "#61dafb"},
|
|
{"material-dark", "Material Dark", "#80cbc4"},
|
|
{"catppuccin-mocha", "Catppuccin Mocha", "#f38ba8"},
|
|
{"catppuccin-macchiato", "Catppuccin Macchiato", "#c6a0f6"},
|
|
{"catppuccin-frappe", "Catppuccin Frappé", "#ca9ee6"},
|
|
{"catppuccin-latte", "Catppuccin Latte", "#d20f39"},
|
|
}
|
|
|
|
// WoodOption describes a selectable bookshelf background texture.
|
|
type WoodOption struct {
|
|
Name string // value stored as data-wood and CSS bg-<name>
|
|
Label string
|
|
}
|
|
|
|
// WoodOptions is the full set of bookshelf background options.
|
|
var WoodOptions = []WoodOption{
|
|
{"none", "None"},
|
|
{"wood-light", "Wood Light"},
|
|
{"wood-dark", "Wood Dark"},
|
|
{"wood-mahogany", "Wood Mahogany"},
|
|
}
|