From fc6431bd48392a394e705489e652fc3fa0e1115a Mon Sep 17 00:00:00 2001 From: unknown Date: Thu, 4 Jul 2024 16:56:36 +0200 Subject: [PATCH] Adjust fg-neutral --- .../theming/src/color/src/DarkModeTheme.ts | 21 +++---------------- .../theming/src/color/src/LightModeTheme.ts | 21 +++---------------- .../src/color/tests/DarkModeTheme.test.ts | 8 +++---- .../src/color/tests/LightModeTheme.test.ts | 8 +++---- 4 files changed, 14 insertions(+), 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 index c28829cc9aa..b41a90beb4f 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 @@ -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 index a1bceb24600..fef725a58bb 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 @@ -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 index 9a87fab4624..cb5734dee53 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 @@ -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 index c7be28ccda6..abb4944e8fd 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 @@ -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%)"); }); });