engineering/make_post_sell
1
0
Fork 0
Code Issues 2 Pull requests Projects Releases 2 Packages Wiki Activity Actions

fix: MPS-24 — edit-page well dark-mode color (was glaring white)

Browse source 
Operator: a .well on the product edit page lost its dark-mode color in
a recent upgrade that improved light mode.

div.edit-page > section.well2 used var(--surface, #fff) and
var(--color-border, #eee) — but neither --surface nor --color-border
is a real token in tokens.css, so BOTH fell back to the light literals
(#fff/#eee) in dark mode too -> white cards on the dark edit page.
Switched to --surface-base (#FFFFFF light / #0d1117 dark) and
--border-light (#eeeeee light / #5599dd dark): light mode is byte-for-
byte identical, dark mode now correct. CSS-only, cache-busted.
This commit is contained in:
russell@unturf.com 2026-05-17 11:13:36 -04:00
parent 2bc1e20958
commit d6ae00073f
No known key found for this signature in database
1 changed files with 7 additions and 2 deletions
Download patch file Download diff file Expand all files Collapse all files

9
make_post_sell/static/css/common.css
View file

@ -2296,10 +2296,15 @@ div.edit-page textarea.mps-content-description {
border accent, and a subtle hover lift. The goal: each section border accent, and a subtle hover lift. The goal: each section
reads as a discrete step the owner can act on. */ reads as a discrete step the owner can act on. */
div.edit-page > section.well2 { div.edit-page > section.well2 {
background: var(--surface, #fff); /* --surface / --color-border are NOT real tokens, so these used to
fall back to the light literals (#fff / #eee) in dark mode too —
glaring white cards on the dark edit page. --surface-base and
--border-light DO have dark values (#0d1117 / #5599dd) and keep
the light-mode look identical (#FFFFFF / #eeeeee). */
background: var(--surface-base, #fff);
border-radius: var(--radius-lg, 12px); border-radius: var(--radius-lg, 12px);
box-shadow: var(--elevation-1, 0 1px 3px rgba(0,0,0,0.06)); box-shadow: var(--elevation-1, 0 1px 3px rgba(0,0,0,0.06));
border: 1px solid var(--color-border, #eee); border: 1px solid var(--border-light, #eee);
transition: box-shadow var(--motion-fast, 150ms) ease, transition: box-shadow var(--motion-fast, 150ms) ease,
transform var(--motion-fast, 150ms) ease; transform var(--motion-fast, 150ms) ease;
} }