From b52f03aab238a6b087e5df81af8daf49a6868098 Mon Sep 17 00:00:00 2001 From: vadim Date: Wed, 2 Apr 2025 14:34:17 +0200 Subject: [PATCH] chore: Adjust WDS text colors (#40034) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit ## Description Fixes #39956 Increased lightness (in light mode) and chroma for `fg`, `fgNeutral`, `fgNeutralSubtle`, `fgAccent` colors (and dependant child styles). | Before | After | |--------|--------| | Screenshot 2025-04-02 at 11 14 01 | Screenshot 2025-04-02 at 11 33 05 |
Examples with other seeds, changes to dark mode etc.

Screenshot 2025-04-02 at 11 37 42 Screenshot 2025-04-02 at 11 38 02 Screenshot 2025-04-02 at 11 38 08 Screenshot 2025-04-02 at 11 38 13

## Automation /ok-to-test tags="@tag.Sanity" ### :mag: Cypress test results > [!IMPORTANT] > 🟣 🟣 🟣 Your tests are running. > Tests running at: > Commit: 4c300307ed74646e0839f26630bf66c5a4abac74 > Workflow: `PR Automation test suite` > Tags: `@tag.Sanity` > Spec: `` >
Wed, 02 Apr 2025 11:50:42 UTC ## Communication Should the DevRel and Marketing teams inform users about this change? - [ ] Yes - [x] No ## Summary by CodeRabbit - **New Features** - - **Light Mode Enhancements:** The light mode theme has been refreshed with optimized foreground and accent colors, enhancing readability and overall visual clarity. - **Dark Mode Enhancements:** Updated the dark mode palette now delivers a more balanced interface with refined contrasts and accent details for improved visual appeal. --- .../theming/src/color/src/DarkModeTheme.ts | 14 +++++++------- .../theming/src/color/src/LightModeTheme.ts | 14 +++++++------- .../src/color/tests/DarkModeTheme.test.ts | 18 +++++++++--------- .../src/color/tests/LightModeTheme.test.ts | 14 +++++++------- 4 files changed, 30 insertions(+), 30 deletions(-) diff --git a/app/client/packages/design-system/theming/src/color/src/DarkModeTheme.ts b/app/client/packages/design-system/theming/src/color/src/DarkModeTheme.ts index e14c1d94f3..a9181d16b8 100644 --- a/app/client/packages/design-system/theming/src/color/src/DarkModeTheme.ts +++ b/app/client/packages/design-system/theming/src/color/src/DarkModeTheme.ts @@ -415,8 +415,8 @@ export class DarkModeTheme implements ColorModeTheme { color.oklch.l = 0.22; } - if (this.seedChroma > 0.005) { - color.oklch.c = 0.005; + if (this.seedChroma > 0.025) { + color.oklch.c = 0.025; } if (this.seedIsAchromatic) { @@ -725,7 +725,7 @@ export class DarkModeTheme implements ColorModeTheme { // This ensures harmonious combination with main accents and neutrals. const color = this.seedColor.clone(); - color.oklch.l = 0.935; + color.oklch.l = 0.91; // If seed color didn't have substantial amount of chroma make sure fg is achromatic. if (this.seedIsAchromatic) { @@ -733,7 +733,7 @@ export class DarkModeTheme implements ColorModeTheme { } if (!this.seedIsAchromatic) { - color.oklch.c = 0.012; + color.oklch.c = 0.065; } return color; @@ -745,14 +745,14 @@ export class DarkModeTheme implements ColorModeTheme { // For light content on dark background APCA contrast is negative. βˆ’60 is β€œThe minimum level recommended for content text that is not body, column, or block text. In other words, text you want people to read.” Failure to reach this contrast level is most likely due to low lightness. Lightness and chroma are set to ones that reach the threshold universally regardless of hue. if (this.bg.contrastAPCA(this.seedColor) >= -60) { - color.oklch.l = 0.82; + color.oklch.l = 0.86; if (this.seedIsAchromatic) { color.oklch.c = 0; } if (!this.seedIsAchromatic) { - color.oklch.c = 0.136; + color.oklch.c = 0.225; } } @@ -763,7 +763,7 @@ export class DarkModeTheme implements ColorModeTheme { // Neutral foreground. Slightly less prominent than main fg const color = this.fg.clone(); - color.oklch.l -= 0.1; + color.oklch.c = 0; return color; } diff --git a/app/client/packages/design-system/theming/src/color/src/LightModeTheme.ts b/app/client/packages/design-system/theming/src/color/src/LightModeTheme.ts index 308b3b288b..17b923dbcc 100644 --- a/app/client/packages/design-system/theming/src/color/src/LightModeTheme.ts +++ b/app/client/packages/design-system/theming/src/color/src/LightModeTheme.ts @@ -725,11 +725,11 @@ export class LightModeTheme implements ColorModeTheme { private get fg() { // Main application foreground color. - // Applies to static text and similar. In light mode it is extremely dark (and therefore desatured) shade of user-set seed color. + // Applies to static text and similar. In light mode it is dark shade of user-set seed color. // This ensures harmonious combination with main accents and neutrals. const color = this.seedColor.clone(); - color.oklch.l = 0.12; + color.oklch.l = 0.37; // If seed color didn't have substantial amount of chroma make sure fg is achromatic. if (this.seedIsAchromatic) { @@ -737,7 +737,7 @@ export class LightModeTheme implements ColorModeTheme { } if (!this.seedIsAchromatic) { - color.oklch.c = 0.006; + color.oklch.c = 0.039; } return color; @@ -749,14 +749,14 @@ export class LightModeTheme implements ColorModeTheme { // For dark content on light background APCA contrast is positive. 60 is β€œThe minimum level recommended for content text that is not body, column, or block text. In other words, text you want people to read.” Failure to reach this contrast level is most likely due to high lightness. Lightness and chroma are set to ones that reach the threshold universally regardless of hue. if (this.bg.contrastAPCA(this.seedColor) <= 60) { - color.oklch.l = 0.35; + color.oklch.l = 0.5; if (this.seedIsAchromatic) { color.oklch.c = 0; } if (!this.seedIsAchromatic) { - color.oklch.c = 0.164; + color.oklch.c = 0.185; } } @@ -767,7 +767,7 @@ export class LightModeTheme implements ColorModeTheme { // Neutral foreground. Slightly less prominent than main fg const color = this.fg.clone(); - color.oklch.l += 0.125; + color.oklch.c -= 0.09; return color; } @@ -775,7 +775,7 @@ export class LightModeTheme implements ColorModeTheme { private get fgNeutralSubtle() { const color = this.fgNeutral.clone(); - color.oklch.l += 0.35; + color.oklch.l += 0.22; return color; } diff --git a/app/client/packages/design-system/theming/src/color/tests/DarkModeTheme.test.ts b/app/client/packages/design-system/theming/src/color/tests/DarkModeTheme.test.ts index 3e99872c82..27010adc99 100644 --- a/app/client/packages/design-system/theming/src/color/tests/DarkModeTheme.test.ts +++ b/app/client/packages/design-system/theming/src/color/tests/DarkModeTheme.test.ts @@ -610,13 +610,13 @@ describe("fg color", () => { it("should return correct color when chroma < 0.04", () => { const { fg } = new DarkModeTheme("oklch(0.45 0.03 60)").getColors(); - expect(fg).toEqual("rgb(91.499% 91.499% 91.499%)"); + expect(fg).toEqual("rgb(88.268% 88.268% 88.268%)"); }); it("should return correct color when chroma > 0.04", () => { const { fg } = new DarkModeTheme("oklch(0.45 0.1 60)").getColors(); - expect(fg).toEqual("rgb(94.05% 90.903% 88.505%)"); + expect(fg).toEqual("rgb(100% 84.682% 71.568%)"); }); }); @@ -624,13 +624,13 @@ describe("fgAccent color", () => { it("should return correct color when chroma < 0.04", () => { const { fgAccent } = new DarkModeTheme("oklch(0.45 0.03 60)").getColors(); - expect(fgAccent).toEqual("rgb(76.823% 76.823% 76.823%)"); + expect(fgAccent).toEqual("rgb(81.873% 81.873% 81.873%)"); }); it("should return correct color when chroma > 0.04", () => { const { fgAccent } = new DarkModeTheme("oklch(0.45 0.1 60)").getColors(); - expect(fgAccent).toEqual("rgb(100% 68.135% 38.832%)"); + expect(fgAccent).toEqual("rgb(100% 74.36% 48.84%)"); }); }); @@ -638,19 +638,19 @@ describe("fgNeutral color", () => { it("should return correct color when chroma < 0.04", () => { const { fgNeutral } = new DarkModeTheme("oklch(0.45 0.03 60)").getColors(); - expect(fgNeutral).toEqual("rgb(78.709% 78.709% 78.709%)"); + expect(fgNeutral).toEqual("rgb(88.268% 88.268% 88.268%)"); }); it("should return correct color when chroma > 0.04 and hue is between 120 and 300", () => { const { fgNeutral } = new DarkModeTheme("oklch(0.45 0.1 150)").getColors(); - expect(fgNeutral).toEqual("rgb(76.736% 79.678% 77.172%)"); + expect(fgNeutral).toEqual("rgb(88.268% 88.268% 88.268%)"); }); it("should return correct color when chroma > 0.04 and hue is not between 120 and 300", () => { const { fgNeutral } = new DarkModeTheme("oklch(0.45 0.1 110)").getColors(); - expect(fgNeutral).toEqual("rgb(78.837% 79.085% 75.653%)"); + expect(fgNeutral).toEqual("rgb(88.268% 88.268% 88.268%)"); }); }); @@ -660,7 +660,7 @@ describe("fgNeutralSubtle color", () => { "oklch(0.45 0.03 60)", ).getColors(); - expect(fgNeutralSubtle).toEqual("rgb(42.772% 42.772% 42.772%)"); + expect(fgNeutralSubtle).toEqual("rgb(51.374% 51.374% 51.374%)"); }); }); @@ -792,7 +792,7 @@ describe("bd color", () => { it("should return correct color", () => { const { bd } = new DarkModeTheme("oklch(0.45 0.5 60)").getColors(); - expect(bd).toEqual("rgb(30.094% 27.562% 25.617%)"); + expect(bd).toEqual("rgb(38.135% 24.611% 12.977%)"); }); }); diff --git a/app/client/packages/design-system/theming/src/color/tests/LightModeTheme.test.ts b/app/client/packages/design-system/theming/src/color/tests/LightModeTheme.test.ts index b766060d06..f319b8e02e 100644 --- a/app/client/packages/design-system/theming/src/color/tests/LightModeTheme.test.ts +++ b/app/client/packages/design-system/theming/src/color/tests/LightModeTheme.test.ts @@ -642,13 +642,13 @@ describe("fg color", () => { it("should return correct color when chroma < 0.04", () => { const { fg } = new LightModeTheme("oklch(0.45 0.03 60)").getColors(); - expect(fg).toEqual("rgb(2.2326% 2.2326% 2.2326%)"); + expect(fg).toEqual("rgb(24.944% 24.944% 24.944%)"); }); it("should return correct color when chroma > 0.04", () => { const { fg } = new LightModeTheme("oklch(0.45 0.1 60)").getColors(); - expect(fg).toEqual("rgb(2.8027% 2.0973% 1.6301%)"); + expect(fg).toEqual("rgb(31.079% 23.115% 16.707%)"); }); }); @@ -670,19 +670,19 @@ describe("fgNeutral color", () => { it("should return correct color when chroma < 0.04", () => { const { fgNeutral } = new LightModeTheme("oklch(0.45 0.03 60)").getColors(); - expect(fgNeutral).toEqual("rgb(12.685% 12.685% 12.685%)"); + expect(fgNeutral).toEqual("rgb(0% 26.839% 41.548%)"); }); it("should return correct color when chroma > 0.04 and hue is between 120 and 300", () => { const { fgNeutral } = new LightModeTheme("oklch(0.45 0.1 150)").getColors(); - expect(fgNeutral).toEqual("rgb(11.952% 13.038% 12.117%)"); + expect(fgNeutral).toEqual("rgb(31.034% 21.083% 30.044%)"); }); it("should return correct color when chroma > 0.04 and hue is not between 120 and 300", () => { const { fgNeutral } = new LightModeTheme("oklch(0.45 0.1 110)").getColors(); - expect(fgNeutral).toEqual("rgb(12.734% 12.82% 11.553%)"); + expect(fgNeutral).toEqual("rgb(24.783% 23.161% 34.901%)"); }); }); @@ -692,7 +692,7 @@ describe("fgNeutralSubtle color", () => { "oklch(0.45 0.03 60)", ).getColors(); - expect(fgNeutralSubtle).toEqual("rgb(49.631% 49.631% 49.631%)"); + expect(fgNeutralSubtle).toEqual("rgb(27.658% 51.819% 68%)"); }); }); @@ -834,7 +834,7 @@ describe("bd color", () => { it("should return correct color", () => { const { bd } = new LightModeTheme("oklch(0.45 0.5 60)").getColors(); - expect(bd).toEqual("rgb(75.553% 74.037% 72.885%)"); + expect(bd).toEqual("rgb(82.064% 72.324% 64.769%)"); }); });