Protei/PromucFlow_constructor
2
0
Fork 0
Code Issues Pull Requests Actions 2 Packages Projects Releases Wiki Activity

fix: WDS color algo for very light seeds (light mode) (#32964)

Browse Source 
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)
|

<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->

## 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.

<!-- end of auto-generated comment: release notes by coderabbit.ai -->
This commit is contained in:
vadim 2024-04-25 16:33:23 +02:00 committed by GitHub
parent 57dd91f85e
commit c18d7ac1fa
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 26 additions and 44 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -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;
}

30
app/client/packages/design-system/theming/src/color/tests/LightModeTheme.test.ts
View File

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