Adjust fg-neutral

appsmithorg · Jul 4, 2024 · fc6431b · fc6431b
1 parent 6c48a39
commit fc6431b
Show file tree

Hide file tree

Showing 4 changed files with 14 additions and 44 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
@@ -716,25 +716,10 @@ export class DarkModeTheme implements ColorModeTheme {
   }
 
   private get fgNeutral() {
-    // Desatured version of the seed for harmonious combination with backgrounds and accents.
-    const color = this.fgAccent.clone();
-
-    // Minimal contrast that we set for fgAccent (60) is too low for a gray color
-    if (this.bg.contrastAPCA(this.fgAccent) < 75) {
-      color.oklch.l += 0.04;
-    }
-
-    if (this.seedIsAchromatic) {
-      color.oklch.c = 0;
-    }
-
-    if (this.seedIsCold && !this.seedIsAchromatic) {
-      color.oklch.c = 0.03;
-    }
+    // Neutral foreground. Slightly less prominent than main fg
+    const color = this.fg.clone();
 
-    if (!this.seedIsCold && !this.seedIsAchromatic) {
-      color.oklch.c = 0.01;
-    }
+    color.oklch.l -= 0.02;
 
     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
@@ -731,25 +731,10 @@ export class LightModeTheme implements ColorModeTheme {
   }
 
   private get fgNeutral() {
-    // Desatured version of the seed for harmonious combination with backgrounds and accents.
-    const color = this.fgAccent.clone();
-
-    // Minimal contrast that we set for fgAccent (60) is too low for a gray color
-    if (this.bg.contrastAPCA(this.fgAccent) < 75) {
-      color.oklch.l -= 0.2;
-    }
-
-    if (this.seedIsAchromatic) {
-      color.oklch.c = 0;
-    }
-
-    if (this.seedIsCold && !this.seedIsAchromatic) {
-      color.oklch.c = 0.003;
-    }
+    // Neutral foreground. Slightly less prominent than main fg
+    const color = this.fg.clone();
 
-    if (!this.seedIsCold && !this.seedIsAchromatic) {
-      color.oklch.c = 0.001;
-    }
+    color.oklch.l += 0.1;
 
     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
@@ -567,19 +567,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(81.873% 81.873% 81.873%)");
+    expect(fgNeutral).toEqual("rgb(88.912% 88.912% 88.912%)");
   });
 
   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.801% 84.271% 77.971%)");
+    expect(fgNeutral).toEqual("rgb(86.896% 89.904% 87.34%)");
   });
 
   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(81.979% 82.19% 79.311%)");
+    expect(fgNeutral).toEqual("rgb(89.043% 89.298% 85.788%)");
   });
 });
 
@@ -589,7 +589,7 @@ describe("fgNeutralSubtle color", () => {
       "oklch(0.45 0.03 60)",
     ).getColors();
 
-    expect(fgNeutralSubtle).toEqual("rgb(63.258% 63.258% 63.258%)");
+    expect(fgNeutralSubtle).toEqual("rgb(69.98% 69.98% 69.98%)");
   });
 });
 

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
@@ -597,19 +597,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(33.384% 33.384% 33.384%)");
+    expect(fgNeutral).toEqual("rgb(10.396% 10.396% 10.396%)");
   });
 
   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(32.964% 33.592% 33.055%)");
+    expect(fgNeutral).toEqual("rgb(9.6799% 10.739% 9.8424%)");
   });
 
   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(33.392% 33.411% 33.167%)");
+    expect(fgNeutral).toEqual("rgb(10.444% 10.527% 9.2918%)");
   });
 });
 
@@ -619,7 +619,7 @@ describe("fgNeutralSubtle color", () => {
       "oklch(0.45 0.03 60)",
     ).getColors();
 
-    expect(fgNeutralSubtle).toEqual("rgb(44.47% 44.47% 44.47%)");
+    expect(fgNeutralSubtle).toEqual("rgb(19.892% 19.892% 19.892%)");
   });
 });