CremaUIStudio/lib-theme-prism
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: add sky/rose/sage accent palettes
Some checks failed
validate theme / validate (push) Has been cancelled
Details

Browse Source 
Light + dark `[data-palette=...]` blocks. Violet stays default.
Overrides only Prism-defined vars (primary/accent/ring/chart-1/
sidebar-*/chat-user-bg/syntax-keyword) — avoids carrying Avalon-
only vars. Consumed by arcadia-personal-cloud-web's accent picker.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
jules
2026-06-08 15:08:51 +10:00
parent a3369608b6
commit f41849a3fd
1 changed files with 106 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

106
theme.css
View File

@@ -245,6 +245,112 @@
--glass-saturate: 200%; --glass-saturate: 200%;
} }
/* ── Accent palettes ──────────────────────────────────────────────
* Apply by setting `data-palette="sky|rose|sage"` on `<html>` (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 { @layer base {
body { body {
background-attachment: fixed; background-attachment: fixed;