From f6fe352bd694adde456e05319c8339ae32d7ff4b Mon Sep 17 00:00:00 2001 From: Thomas Klepzig Date: Wed, 5 Aug 2026 16:25:32 +0200 Subject: [PATCH] Improve body bg in light theme --- .changeset/light-body-bg-decoupled.md | 7 +++++++ scss/_ada.theme-base.scss | 5 ++++- scss/ada.jupiter-2.scss | 4 ++++ 3 files changed, 15 insertions(+), 1 deletion(-) create mode 100644 .changeset/light-body-bg-decoupled.md diff --git a/.changeset/light-body-bg-decoupled.md b/.changeset/light-body-bg-decoupled.md new file mode 100644 index 0000000..d767a1c --- /dev/null +++ b/.changeset/light-body-bg-decoupled.md @@ -0,0 +1,7 @@ +--- +"ada-ui": patch +--- + +Decoupled the light-mode body background from --100 so themes that lift it for +text contrast no longer wash the page out to near-white, and held jupiter-2's +body at its cream hue diff --git a/scss/_ada.theme-base.scss b/scss/_ada.theme-base.scss index 8435718..4f8a6ea 100644 --- a/scss/_ada.theme-base.scss +++ b/scss/_ada.theme-base.scss @@ -62,7 +62,10 @@ --bg-body: var(--color950); --fg-body: var(--color100); - --bg-body-light: var(--color100); + // Hardcoded pale, NOT var(--color100): themes lift --100 to clear AAA for ink + // on solid buttons (teal 0.98, jupiter-2 0.947), and riding on it washed the + // page out to near-white. This is the ladder pale, so ramp themes are unchanged. + --bg-body-light: oklch(0.91 0.05 var(--hue)); // Light-mode ink, per tone — headings, .input and .command.outline re-resolve // it. L 0.30 (as --reading-light) clears AAA on the pale body. Chroma capped: // darker saturated hues leave sRGB, and Chromium's gamut mapping turns diff --git a/scss/ada.jupiter-2.scss b/scss/ada.jupiter-2.scss index 244780c..9b0f78d 100644 --- a/scss/ada.jupiter-2.scss +++ b/scss/ada.jupiter-2.scss @@ -22,6 +22,10 @@ --100: 0.947 0.007 81; // body + button text (#F0EDE8) // Light theme would otherwise put orange (color800) text on cream — force navy. --fg-body-light: var(--color950); + // Same lightness step as the other themes, but held at the cream hue (81) and + // low chroma: the base pale builds on --base-hue, and 49 at 0.05 is the accent + // orange — the page came out peach. Cream, a shade deeper than --100. + --bg-body-light: oklch(0.91 0.02 81); // Curated to keep the theme's text identity: cream dark, navy ink light // (derived defaults would lean peach / dark-brown off the orange primary).