Bookhoard/bookhoard
0
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 12 Wiki Activity

feat(ui): design system foundation

Browse Source 
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
This commit is contained in:
john-okeefe
2026-08-05 16:03:07 -04:00
parent 94a4facc6c
commit f3f908eb7e
7 changed files with 893 additions and 160 deletions
Download Patch File Download Diff File Expand all files Collapse all files
templates/utils.go
+14 -5
View File
@@ -15,11 +15,20 @@ import (
)
func activeClass(current, target string) string {
base := "block px-4 py-2 rounded-lg "
base := "flex items-center gap-3 px-3 py-2 rounded-lg text-sm font-medium transition-colors "
if current == target {
return base + "bg-accent text-bg-primary"
return base + "bg-brand/15 text-brand"
}
return base + "hover:opacity-80"
return base + "text-content-muted hover:bg-surface-hover hover:text-content"
}
// navItemClass returns classes for top-nav links, marking the active route.
func navItemClass(current, target string) string {
base := "text-sm font-medium px-3 py-2 rounded-lg transition-colors "
if current == target {
return base + "text-content bg-surface-hover"
}
return base + "text-content-muted hover:text-content hover:bg-surface-hover"
}
func ContainsString(slice []string, item string) bool {
@@ -66,13 +75,13 @@ func renderStars(rating int32) string {
for i := int32(0); i < totalStars; i++ {
if i < fullStars {
// Filled star - accent color (theme-aware highlight)
stars.WriteString(`<span style="color: var(--accent);">★</span>`)
stars.WriteString(`<span class="text-brand">★</span>`)
} else if i == fullStars && hasHalf {
// Half star - gradient from accent (left) to grey (right)
stars.WriteString(`<span style="background: linear-gradient(90deg, var(--accent) 50%, var(--text-secondary) 50%); -webkit-background-clip: text; -webkit-text-fill-color: transparent;">★</span>`)
} else {
// Empty star - grey using theme variable
stars.WriteString(`<span style="color: var(--text-secondary);">★</span>`)
stars.WriteString(`<span class="text-content-muted/40">★</span>`)
}
}