From 4c300307ed74646e0839f26630bf66c5a4abac74 Mon Sep 17 00:00:00 2001 From: Vadim Vaitenko Date: Wed, 2 Apr 2025 12:18:30 +0200 Subject: [PATCH] chore: Adjust WDS text colors --- .../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 e14c1d94f39e..a9181d16b86a 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 308b3b288b27..17b923dbccda 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 3e99872c8245..27010adc99b6 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 b766060d06f4..f319b8e02ea3 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%)"); }); });