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

Compare commits

merge into: CremaUIStudio:main
Branches Tags
CremaUIStudio:main CremaUIStudio:fix/popover-opacity
...
pull from: CremaUIStudio:fix/popover-opacity
Branches Tags
CremaUIStudio:fix/popover-opacity CremaUIStudio:main

2 Commits
main ... fix/popove

Author SHA1 Message Date
jules
30ef4c71cf Name a foreground for each chart tint 
An avatar filled with a chart colour drew its initials in white, on the
assumption that every tint is dark enough to carry it. Measured, white
clears AA on two of the ten tint-and-mode combinations: a palette is
tuned so series stay distinct from each other, and dark mode lifts every
tint to stay visible against the dark ground, which puts all five out of
reach. The reported 3.4:1 assistant avatar was dark chart-1, at 3.36.

Each tint now names its own foreground, chosen by measurement — worst
chosen pair 5.32:1. Consumers read them with a white fallback, so a theme
that has not defined them renders exactly as it did.
 2026-08-09 09:50:34 +08:00
jules
c2a414589b Stop menus being windows 
--popover sat at card alpha, but a card and a menu are not the same kind
of surface: a card rests on the page background, while a menu floats over
whatever happens to be underneath it. In dark mode, over the aurora field
at its most saturated, the text behind a dropdown read straight through
the list of items — the two most-used menus in Canvas (the chat switcher
and the account menu) looked broken every time they opened.

Raised to 0.94/0.95. The backdrop blur still carries the depth, so the
glass reads as glass; it just stops being transparent. Every app that
defines --popover for a surface variant already used a fully opaque
value, so this only aligns the default with what each of them had
already decided independently.
 2026-08-08 08:34:00 +08:00
1 changed files with 29 additions and 2 deletions
Expand all files Collapse all files

31
theme.css
View File

@@ -45,7 +45,12 @@
--card: oklch(1 0 0 / 0.58); --card: oklch(1 0 0 / 0.58);
--card-foreground: oklch(0.16 0.025 285); --card-foreground: oklch(0.16 0.025 285);
--popover: oklch(1 0 0 / 0.74); /* Near-opaque on purpose, unlike --card. A popover is the one glass
* surface with nothing behind it: a card sits on the page background,
* but a menu floats over arbitrary content, and at card alpha the text
* underneath reads straight through a list of menu items. The backdrop
* blur below still gives it depth — the tint just stops being a window. */
--popover: oklch(1 0 0 / 0.94);
--popover-foreground: oklch(0.16 0.025 285); --popover-foreground: oklch(0.16 0.025 285);
--primary: oklch(0.55 0.22 295); --primary: oklch(0.55 0.22 295);
@@ -83,6 +88,17 @@
--chart-4: oklch(0.72 0.2 350); --chart-4: oklch(0.72 0.2 350);
--chart-5: oklch(0.5 0.18 150); --chart-5: oklch(0.5 0.18 150);
/* Text drawn ON a chart tint — a filled avatar, a category pill, a bar
* label. A palette is tuned so the series stay distinguishable from each
* other, which says nothing about whether white sits on them: of these
* five, white clears AA on two. Each tint therefore names its own
* foreground, measured (worst pair 5.32:1). */
--chart-1-foreground: oklch(1 0 0);
--chart-2-foreground: oklch(0.16 0.03 295);
--chart-3-foreground: oklch(0.16 0.03 295);
--chart-4-foreground: oklch(0.16 0.03 295);
--chart-5-foreground: oklch(1 0 0);
--sidebar: oklch(1 0 0 / 0.5); --sidebar: oklch(1 0 0 / 0.5);
--sidebar-foreground: oklch(0.16 0.025 285); --sidebar-foreground: oklch(0.16 0.025 285);
--sidebar-primary: oklch(0.55 0.22 295); --sidebar-primary: oklch(0.55 0.22 295);
@@ -193,7 +209,9 @@
--card: oklch(0.22 0.04 290 / 0.55); --card: oklch(0.22 0.04 290 / 0.55);
--card-foreground: oklch(0.97 0.005 280); --card-foreground: oklch(0.97 0.005 280);
--popover: oklch(0.22 0.04 290 / 0.78); /* See the light-mode note: dark is the worse case, because the aurora
* field behind a menu is at its most saturated here. */
--popover: oklch(0.22 0.04 290 / 0.95);
--popover-foreground: oklch(0.97 0.005 280); --popover-foreground: oklch(0.97 0.005 280);
--primary: oklch(0.7 0.2 295); --primary: oklch(0.7 0.2 295);
@@ -227,6 +245,15 @@
--chart-4: oklch(0.82 0.2 350); --chart-4: oklch(0.82 0.2 350);
--chart-5: oklch(0.6 0.18 150); --chart-5: oklch(0.6 0.18 150);
/* Dark lifts every tint to stay visible against the dark ground, which
* puts all five out of reach of white — including chart-1 at 3.36:1,
* the assistant avatar in a chat transcript. */
--chart-1-foreground: oklch(0.16 0.03 295);
--chart-2-foreground: oklch(0.16 0.03 295);
--chart-3-foreground: oklch(0.16 0.03 295);
--chart-4-foreground: oklch(0.16 0.03 295);
--chart-5-foreground: oklch(0.16 0.03 295);
--sidebar: oklch(0.2 0.04 290 / 0.55); --sidebar: oklch(0.2 0.04 290 / 0.55);
--sidebar-foreground: oklch(0.97 0.005 280); --sidebar-foreground: oklch(0.97 0.005 280);
--sidebar-primary: oklch(0.7 0.2 295); --sidebar-primary: oklch(0.7 0.2 295);