diff --git a/theme.css b/theme.css index 93a34e9..d4eebde 100644 --- a/theme.css +++ b/theme.css @@ -245,6 +245,112 @@ --glass-saturate: 200%; } +/* ── Accent palettes ────────────────────────────────────────────── + * Apply by setting `data-palette="sky|rose|sage"` on `` (or any + * subtree). Pairs with `.dark`. Violet is the default — no attribute + * needed. Calibrated to Prism's L/C scale so the crystal-glass surfaces + * stay coherent; we don't try to match Avalon's flatter palette. + * Consumed by arcadia-personal-cloud-web's accent picker. */ + +/* Sky — calm blue, the default consumer accent on me.sky-ai.com. */ +[data-palette="sky"] { + --primary: oklch(0.55 0.18 235); + --primary-foreground: oklch(1 0 0); + --accent: oklch(0.93 0.04 235); + --accent-foreground: oklch(0.25 0.05 235); + --ring: oklch(0.55 0.18 235 / 0.55); + --chart-1: oklch(0.55 0.2 235); + --sidebar-primary: oklch(0.55 0.18 235); + --sidebar-accent: oklch(0.93 0.04 235); + --sidebar-accent-foreground: oklch(0.25 0.05 235); + --sidebar-ring: oklch(0.55 0.18 235 / 0.55); + --chat-user-bg: oklch(0.48 0.18 235); + --syntax-keyword: oklch(0.5 0.18 235); +} + +/* Rose — warm coral-pink. */ +[data-palette="rose"] { + --primary: oklch(0.6 0.2 10); + --primary-foreground: oklch(1 0 0); + --accent: oklch(0.93 0.05 10); + --accent-foreground: oklch(0.28 0.08 10); + --ring: oklch(0.6 0.2 10 / 0.55); + --chart-1: oklch(0.6 0.22 10); + --sidebar-primary: oklch(0.6 0.2 10); + --sidebar-accent: oklch(0.93 0.05 10); + --sidebar-accent-foreground: oklch(0.28 0.08 10); + --sidebar-ring: oklch(0.6 0.2 10 / 0.55); + --chat-user-bg: oklch(0.52 0.2 10); + --syntax-keyword: oklch(0.55 0.18 10); +} + +/* Sage — calm green, personal and organic. */ +[data-palette="sage"] { + --primary: oklch(0.55 0.13 155); + --primary-foreground: oklch(1 0 0); + --accent: oklch(0.92 0.045 150); + --accent-foreground: oklch(0.3 0.08 155); + --ring: oklch(0.55 0.13 155 / 0.55); + --chart-1: oklch(0.55 0.15 155); + --sidebar-primary: oklch(0.55 0.13 155); + --sidebar-accent: oklch(0.92 0.045 150); + --sidebar-accent-foreground: oklch(0.3 0.08 155); + --sidebar-ring: oklch(0.55 0.13 155 / 0.55); + --chat-user-bg: oklch(0.48 0.13 155); + --syntax-keyword: oklch(0.5 0.13 155); +} + +.dark[data-palette="sky"], +.dark [data-palette="sky"] { + --primary: oklch(0.72 0.18 235); + --primary-foreground: oklch(0.14 0.04 235); + --accent: oklch(0.32 0.06 235); + --accent-foreground: oklch(0.95 0.04 235); + --ring: oklch(0.72 0.18 235 / 0.55); + --chart-1: oklch(0.7 0.2 235); + --sidebar-primary: oklch(0.72 0.18 235); + --sidebar-primary-foreground: oklch(0.14 0.04 235); + --sidebar-accent: oklch(0.32 0.06 235); + --sidebar-accent-foreground: oklch(0.95 0.04 235); + --sidebar-ring: oklch(0.72 0.18 235 / 0.55); + --chat-user-bg: oklch(0.56 0.18 235); + --syntax-keyword: oklch(0.78 0.16 235); +} + +.dark[data-palette="rose"], +.dark [data-palette="rose"] { + --primary: oklch(0.74 0.18 10); + --primary-foreground: oklch(0.16 0.04 10); + --accent: oklch(0.32 0.06 10); + --accent-foreground: oklch(0.95 0.04 10); + --ring: oklch(0.74 0.18 10 / 0.55); + --chart-1: oklch(0.72 0.2 10); + --sidebar-primary: oklch(0.74 0.18 10); + --sidebar-primary-foreground: oklch(0.16 0.04 10); + --sidebar-accent: oklch(0.32 0.06 10); + --sidebar-accent-foreground: oklch(0.95 0.04 10); + --sidebar-ring: oklch(0.74 0.18 10 / 0.55); + --chat-user-bg: oklch(0.58 0.2 10); + --syntax-keyword: oklch(0.8 0.16 10); +} + +.dark[data-palette="sage"], +.dark [data-palette="sage"] { + --primary: oklch(0.72 0.13 155); + --primary-foreground: oklch(0.14 0.04 155); + --accent: oklch(0.3 0.05 155); + --accent-foreground: oklch(0.95 0.04 155); + --ring: oklch(0.72 0.13 155 / 0.55); + --chart-1: oklch(0.7 0.15 155); + --sidebar-primary: oklch(0.72 0.13 155); + --sidebar-primary-foreground: oklch(0.14 0.04 155); + --sidebar-accent: oklch(0.3 0.05 155); + --sidebar-accent-foreground: oklch(0.95 0.04 155); + --sidebar-ring: oklch(0.72 0.13 155 / 0.55); + --chat-user-bg: oklch(0.56 0.13 155); + --syntax-keyword: oklch(0.8 0.13 155); +} + @layer base { body { background-attachment: fixed;