chore: Adjust WDS text colors

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,15 +725,15 @@ 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) {
       color.oklch.c = 0;
     }
 
     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;
   }

app/client/packages/design-system/theming/src/color/src/LightModeTheme.ts

@@ -725,19 +725,19 @@ 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) {
       color.oklch.c = 0;
     }
 
     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,15 +767,15 @@ 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;
   }
 
   private get fgNeutralSubtle() {
     const color = this.fgNeutral.clone();
 
-    color.oklch.l += 0.35;
+    color.oklch.l += 0.22;
 
     return color;
   }

app/client/packages/design-system/theming/src/color/tests/DarkModeTheme.test.ts

@@ -610,47 +610,47 @@ 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%)");
   });
 });
 
 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%)");
   });
 });
 
 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%)");
   });
 });
 

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%)");
   });
 });