brianfertig
/
Organize
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Fix blueprint theme contrast for paper surfaces and sidebar buttons 

- Dialogs, popovers, and dropdown menus were rendering ghost/outline
  buttons and editor text as white-on-white because they inherited the
  board-level cobalt tokens; restore card (paper) semantics locally.
- Sidebar/rail ghost button hover, focus, and expanded states washed out
  to white-on-white; retarget them to the sidebar accent pair.
This commit is contained in:
Brian Fertig 2026-08-29 18:55:30 -06:00
parent fca66959c2
commit fed65f86e0
1 changed files with 28 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
app/globals.css
View File

@ -980,6 +980,34 @@ html.theme-blueprint {
html.theme-blueprint [data-slot="button"] { html.theme-blueprint [data-slot="button"] {
position: relative; position: relative;
} }
/* Paper surfaces (dialogs, popovers, dropdown menus) carry cobalt ink:
they set `text-popover-foreground`, but the generic button and editor
styles also read `--foreground` / `--background` expecting the usual
light-theme semantics (dark ink, light surface). In blueprint those
tokens are board-level (near-white ink, cobalt surface), so ghost
buttons wash to white-on-white, outline buttons go blue-on-blue, and
the markdown editor's text is invisible on the sheet. Restoring the
paper semantics locally makes every descendant render correctly. */
html.theme-blueprint [data-slot="dialog-content"],
html.theme-blueprint [data-slot="popover-content"],
html.theme-blueprint [data-slot="dropdown-menu-content"] {
--foreground: var(--card-foreground);
--background: var(--card);
}
/* The sidebar and scheduled rail are cobalt board chrome with near-white
ink. The ghost buttons there (theme trigger, log out, collapse, rail
actions) reference `--muted` / `--foreground` for hover + expanded
states, which in blueprint are both paper-bright: a white-on-white
wash-out. Re-target those states to the sidebar's own accent pair:
a slightly lighter cobalt with the same near-white ink. */
html.theme-blueprint .bg-sidebar :is([data-slot="button"], [data-slot="dropdown-menu-trigger"]):hover,
html.theme-blueprint .bg-sidebar :is([data-slot="button"], [data-slot="dropdown-menu-trigger"]):focus-visible,
html.theme-blueprint .bg-sidebar :is([data-slot="button"], [data-slot="dropdown-menu-trigger"])[aria-expanded="true"] {
background-color: var(--sidebar-accent);
color: var(--sidebar-accent-foreground);
}
html.theme-blueprint [data-slot="button"]::before, html.theme-blueprint [data-slot="button"]::before,
html.theme-blueprint [data-slot="button"]::after { html.theme-blueprint [data-slot="button"]::after {
content: ""; content: "";