From c18d7ac1fa1946b918b03d2cee2458d9a37f4caf Mon Sep 17 00:00:00 2001 From: vadim Date: Thu, 25 Apr 2024 16:33:23 +0200 Subject: [PATCH] fix: WDS color algo for very light seeds (light mode) (#32964) Fixes #32429 | Before | After | |--------|--------| | ![Screenshot 2024-04-25 at 11-50-18 Untitled application 1 Editor Appsmith](https://github.com/appsmithorg/appsmith/assets/80973/39c7b4da-21e3-4dee-8558-4d3f2a3f5ab7) | ![Screenshot 2024-04-25 at 11-48-20 Untitled application 1 Editor Appsmith](https://github.com/appsmithorg/appsmith/assets/80973/9598a87f-5b79-40a1-894e-983dea4ed98e) | | ![Screenshot 2024-04-25 at 11-09-15 Untitled application 1 Editor Appsmith](https://github.com/appsmithorg/appsmith/assets/80973/f0e02328-b827-419c-9007-a3b2ea1deac7) | ![Screenshot 2024-04-25 at 11-44-55 Untitled application 1 Editor Appsmith](https://github.com/appsmithorg/appsmith/assets/80973/92aa2bbf-4c39-48b1-b39c-c195d0aaafb8) | ## Summary by CodeRabbit - **Refactor** - Enhanced the color properties in Light Mode Theme for better visual appearance of very light seeds - **Tests** - Updated test cases to align with the new color values in Light Mode Theme. --- .../theming/src/color/src/LightModeTheme.ts | 40 +++++-------------- .../src/color/tests/LightModeTheme.test.ts | 30 +++++++------- 2 files changed, 26 insertions(+), 44 deletions(-) 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 5964d854c7..40de493e75 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 @@ -137,14 +137,7 @@ export class LightModeTheme implements ColorModeTheme { // This ensures harmonious combination with main accents and neutrals. const color = this.seedColor.clone(); - // For very light seeds set bg darker than usually, so that accent surfaces are clearly visible against it. - if (this.seedIsVeryLight) { - color.oklch.l = 0.9; - } - - if (!this.seedIsVeryLight) { - color.oklch.l = 0.97; - } + color.oklch.l = 0.97; // Cold colors can have a bit more chroma while staying perceptually neutral if (this.seedIsCold) { @@ -167,9 +160,16 @@ export class LightModeTheme implements ColorModeTheme { // Main accent color. Largely is the same as user-set seed color. const color = this.seedColor.clone(); - // If seed is very light, make bg darker than usual (see above). Make sure then, that the accent is bright enough. - if (this.seedIsVeryLight) { - color.oklch.l = 0.975; + // If seed is very light, make sure that the accent is visible and saturated enough. + if (this.seedIsVeryLight && this.seedColor.oklch.c >= 0.02) { + color.oklch.l = 0.75; + color.oklch.c = 0.1; + } + + // If seed is achromatic make sure we don't produce parasitic coloring and make accent really dark. Our standard achromatic cut-off is set too high for the very light seeds, so using chroma value checks instead. + if (this.seedIsVeryLight && this.seedColor.oklch.c < 0.02) { + color.oklch.l = 0.3; + color.oklch.c = 0; } return color; @@ -217,18 +217,6 @@ export class LightModeTheme implements ColorModeTheme { color.oklch.l += 0.03; } - // For very light seeds it's impossible to produce hover state that is sufficiently perceptibly lighter, therefore switching to darker hovers. - // Yellow has largest amount of chroma available at the top (by lightness) of OKLCh space, compensating by slightly decreasing chroma and decreasing lightness. - if (this.seedIsVeryLight && this.seedIsYellow) { - color.oklch.l = 0.945; - color.oklch.c *= 0.93; - } - - if (this.seedIsVeryLight && !this.seedIsYellow) { - color.oklch.l = 0.95; - color.oklch.c *= 1.15; - } - return color; } @@ -249,12 +237,6 @@ export class LightModeTheme implements ColorModeTheme { color.oklch.l -= 0.01; } - // For very light seeds complement the effect with increased chroma. - if (this.seedIsVeryLight) { - color.oklch.l = 0.935; - color.oklch.c *= 1.15; - } - return color; } 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 1e8798a058..36299f51d6 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 @@ -3,7 +3,7 @@ import { LightModeTheme } from "../src/LightModeTheme"; describe("bg color", () => { it("should return correct color when lightness > 0.93", () => { const { bg } = new LightModeTheme("oklch(0.95 0.09 231)").getColors(); - expect(bg).toBe("rgb(86.508% 87.102% 87.426%)"); + expect(bg).toBe("rgb(95.576% 96.181% 96.511%)"); }); it("should return correct color when lightness < 0.93", () => { @@ -13,7 +13,7 @@ describe("bg color", () => { it("should return correct color when hue > 120 && hue < 300", () => { const { bg } = new LightModeTheme("oklch(0.95 0.07 231)").getColors(); - expect(bg).toBe("rgb(86.508% 87.102% 87.426%)"); + expect(bg).toBe("rgb(95.576% 96.181% 96.511%)"); }); it("should return correct color when hue < 120 or hue > 300", () => { @@ -30,7 +30,7 @@ describe("bg color", () => { describe("bgAccent color", () => { it("should return correct color when lightness > 0.93", () => { const { bgAccent } = new LightModeTheme("oklch(0.95 0.09 231)").getColors(); - expect(bgAccent).toBe("rgb(91.762% 98.141% 100%)"); + expect(bgAccent).toBe("rgb(39.906% 72.747% 88.539%)"); }); }); @@ -88,14 +88,14 @@ describe("bgAccentHover color", () => { const { bgAccentHover } = new LightModeTheme( "oklch(0.95 0.09 70)", ).getColors(); - expect(bgAccentHover).toBe("rgb(100% 90.701% 78.457%)"); + expect(bgAccentHover).toBe("rgb(88.091% 67.511% 43.309%)"); }); it("should return correct color when lightness > 0.93 and hue is not between 116 and 165", () => { const { bgAccentHover } = new LightModeTheme( "oklch(0.95 0.09 120)", ).getColors(); - expect(bgAccentHover).toBe("rgb(89.886% 97.8% 66.657%)"); + expect(bgAccentHover).toBe("rgb(68.605% 75.736% 46.633%)"); }); }); @@ -125,7 +125,7 @@ describe("bgAccentActive color", () => { const { bgAccentActive } = new LightModeTheme( "oklch(0.95 0.09 70)", ).getColors(); - expect(bgAccentActive).toBe("rgb(100% 88.945% 74.563%)"); + expect(bgAccentActive).toBe("rgb(82.901% 62.578% 38.456%)"); }); }); @@ -194,11 +194,11 @@ describe("bgAssistive color", () => { }); describe("bgNeutral color", () => { - it("should return correct color when lightness > 0.85", () => { + it("should return correct color when lightness > 0.85", () => { const { bgNeutral } = new LightModeTheme( "oklch(0.95 0.03 170)", ).getColors(); - expect(bgNeutral).toEqual("rgb(94.099% 94.099% 94.099%)"); + expect(bgNeutral).toEqual("rgb(56.074% 56.074% 56.074%)"); }); it("should return correct color when lightness is between 0.25 and 0.85", () => { @@ -210,19 +210,19 @@ describe("bgNeutral color", () => { const { bgNeutral } = new LightModeTheme( "oklch(0.95 0.02 170)", ).getColors(); - expect(bgNeutral).toEqual("rgb(94.099% 94.099% 94.099%)"); + expect(bgNeutral).toEqual("rgb(56.074% 56.074% 56.074%)"); }); it("should return correct color when hue is between 120 and 300 and chroma is not less than 0.04", () => { const { bgNeutral } = new LightModeTheme( "oklch(0.95 0.06 240)", ).getColors(); - expect(bgNeutral).toEqual("rgb(93.666% 94.196% 94.597%)"); + expect(bgNeutral).toEqual("rgb(55.68% 56.161% 56.526%)"); }); it("should return correct color when hue is not between 120 and 300 and chroma is not less than 0.04", () => { const { bgNeutral } = new LightModeTheme("oklch(0.95 0.06 30)").getColors(); - expect(bgNeutral).toEqual("rgb(94.37% 94.015% 93.949%)"); + expect(bgNeutral).toEqual("rgb(56.319% 55.997% 55.937%)"); }); }); @@ -271,11 +271,11 @@ describe("bgNeutralHover color", () => { expect(bgNeutralHover).toEqual("rgb(60.846% 60.846% 60.846%)"); }); - it("should return correct color when lightness > or equal to 0.955", () => { + it("should return correct color when lightness > or equal to 0.955", () => { const { bgNeutralHover } = new LightModeTheme( "oklch(0.96 0.03 170)", ).getColors(); - expect(bgNeutralHover).toEqual("rgb(92.148% 92.148% 92.148%)"); + expect(bgNeutralHover).toEqual("rgb(60.846% 60.846% 60.846%)"); }); }); @@ -294,11 +294,11 @@ describe("bgNeutralActive color", () => { expect(bgNeutralActive).toEqual("rgb(60.846% 60.846% 60.846%)"); }); - it("should return correct color when lightness > or equal to 0.955", () => { + it("should return correct color when lightness > or equal to 0.955", () => { const { bgNeutralActive } = new LightModeTheme( "oklch(0.96 0.03 170)", ).getColors(); - expect(bgNeutralActive).toEqual("rgb(90.204% 90.204% 90.204%)"); + expect(bgNeutralActive).toEqual("rgb(54.892% 54.892% 54.892%)"); }); });