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

chore: add unit tests for color algo - bgAccent and bgAccentHover (#26402)

Browse Source 
This PR adds unit tests for bgAccent and bgAccentHover of both DarkMode
and LIghtMode themes.
Related issue - #26018
This commit is contained in:
Pawan Kumar 2023-08-18 14:07:53 +05:30 committed by GitHub
parent 8d9c52df5d
commit 1116d1e8cc
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 134 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

64
app/client/packages/design-system/theming/src/color/DarkModeTheme.test.ts
View File

@ -2,14 +2,64 @@ import { DarkModeTheme } from "./DarkModeTheme";
describe("@design-system/theming/color/DarkModeTheme", () => {
it("checks bg color", () => {
const { bg: aChromaticSeedBg } = new DarkModeTheme(
"oklch(0.92 0.02 110)",
).getColors();
expect(aChromaticSeedBg).toBe("rgb(4.3484% 4.3484% 4.3484%)");
// chroma < 0.04
const { bg: bg1 } = new DarkModeTheme("oklch(0.92 0.02 110)").getColors();
expect(bg1).toBe("rgb(4.3484% 4.3484% 4.3484%)");
const { bg: notAChromaticSeedBg } = new DarkModeTheme(
"oklch(0.92 0.05 110)",
// chroma > 0.04
const { bg: bg2 } = new DarkModeTheme("oklch(0.92 0.05 110)").getColors();
expect(bg2).toBe("rgb(5.3377% 4.7804% 0%)");
});
it("checks bgAccent color", () => {
// lightness < 0.3
const { bgAccent: bgAccent1 } = new DarkModeTheme(
"oklch(0.2 0.09 231)",
).getColors();
expect(notAChromaticSeedBg).toBe("rgb(5.3377% 4.7804% 0%)");
expect(bgAccent1).toBe("rgb(0% 19.987% 30.122%)");
});
it("checks bgAccentHover color", () => {
// lightness < 0.3
const { bgAccentHover: bgAccentHover1 } = new DarkModeTheme(
"oklch(0.2 0.09 231)",
).getColors();
expect(bgAccentHover1).toBe("rgb(0% 25.498% 37.079%)");
// lightness > 0.3 && lightness < 0.45
const { bgAccent: bgAccentHover2 } = new DarkModeTheme(
"oklch(0.35 0.09 231)",
).getColors();
expect(bgAccentHover2).toBe("rgb(0% 25.498% 37.079%)");
// lightness > 0.45 && lightness < 0.77
const { bgAccentHover: bgAccentHover3 } = new DarkModeTheme(
"oklch(0.50 0.09 231)",
).getColors();
expect(bgAccentHover3).toBe("rgb(15.696% 45.773% 58.926%)");
// lightness > 0.77 && lightness < 0.85 && hue > 120 or hue < 300 && chroma > 0.04
const { bgAccentHover: bgAccentHover4 } = new DarkModeTheme(
"oklch(0.80 0.09 150)",
).getColors();
expect(bgAccentHover4).toBe("rgb(51.184% 89.442% 60.062%)");
// l lightness > 0.77 && lightness < 0.85 && hue < 120 or hue > 300 && chroma > 0.04
const { bgAccentHover: bgAccentHover5 } = new DarkModeTheme(
"oklch(0.80 0.09 110)",
).getColors();
expect(bgAccentHover5).toBe("rgb(85.364% 85.594% 0%)");
// lightness > 0.77 && lightness < 0.85 0 && chroma < 0.04
const { bgAccentHover: bgAccentHover6 } = new DarkModeTheme(
"oklch(0.80 0.03 110)",
).getColors();
expect(bgAccentHover6).toBe("rgb(79.687% 80.239% 71.58%)");
// lightness > 0.85
const { bgAccentHover: bgAccentHover7 } = new DarkModeTheme(
"oklch(0.90 0.03 110)",
).getColors();
expect(bgAccentHover7).toBe("rgb(78.426% 78.975% 70.34%)");
});
});

4
app/client/packages/design-system/theming/src/color/DarkModeTheme.ts
View File

@ -44,8 +44,8 @@ export class DarkModeTheme implements ColorModeTheme {
public getColors = () => {
return {
bg: this.bg.to("sRGB").toString(),
bgAccent: this.bgAccent.toString(),
bgAccentHover: this.bgAccentHover.toString(),
bgAccent: this.bgAccent.to("sRGB").toString(),
bgAccentHover: this.bgAccentHover.to("sRGB").toString(),
bgAccentActive: this.bgAccentActive.toString(),
bgAccentSubtleHover: this.bgAccentSubtleHover.toString(),
bgAccentSubtleActive: this.bgAccentSubtleActive.toString(),

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

@ -2,29 +2,88 @@ import { LightModeTheme } from "./LightModeTheme";
describe("@design-system/theming/color/LightModeTheme", () => {
it("checks bg color", () => {
const { bg: veryLightSeedBg } = new LightModeTheme(
// lightness > 0.93
const { bg: bg1 } = new LightModeTheme("oklch(0.95 0.09 231)").getColors();
expect(bg1).toBe("rgb(84.831% 87.516% 88.974%)");
// lightness < 0.93
const { bg: bg2 } = new LightModeTheme("oklch(0.92 0.09 231)").getColors();
expect(bg2).toBe("rgb(95.828% 98.573% 100%)");
// hue > 120 && hue < 300
const { bg: bg3 } = new LightModeTheme("oklch(0.95 0.07 231)").getColors();
expect(bg3).toBe("rgb(84.831% 87.516% 88.974%)");
// hue < 120 or hue > 300
const { bg: bg4 } = new LightModeTheme("oklch(0.92 0.07 110)").getColors();
expect(bg4).toBe("rgb(98.101% 98.258% 96.176%)");
// chroma < 0.04
const { bg: bg5 } = new LightModeTheme("oklch(0.92 0.02 110)").getColors();
expect(bg5).toBe("rgb(98.026% 98.026% 98.026%)");
});
it("checks bgAccent color", () => {
// lightness > 0.93
const { bgAccent: bgAccent1 } = new LightModeTheme(
"oklch(0.95 0.09 231)",
).getColors();
expect(veryLightSeedBg).toBe("rgb(84.831% 87.516% 88.974%)");
expect(bgAccent1).toBe("rgb(91.762% 98.141% 100%)");
});
const { bg: notVerylightSeedBg } = new LightModeTheme(
"oklch(0.92 0.09 231)",
it("checks bgAccentHover color", () => {
// lightness < 0.06
const { bgAccentHover: bgAccentHover1 } = new LightModeTheme(
"oklch(0.05 0.09 231)",
).getColors();
expect(notVerylightSeedBg).toBe("rgb(95.828% 98.573% 100%)");
expect(bgAccentHover1).toBe("rgb(0% 23.271% 34.263%)");
const { bg: coldSeedBg } = new LightModeTheme(
"oklch(0.95 0.07 231)",
// lightness > 0.06 && lightness < 0.14
const { bgAccent: bgAccentHover2 } = new LightModeTheme(
"oklch(0.08 0.09 231)",
).getColors();
expect(coldSeedBg).toBe("rgb(84.831% 87.516% 88.974%)");
expect(bgAccentHover2).toBe("rgb(0% 0% 9.1079%)");
const { bg: notColdSeedBg } = new LightModeTheme(
"oklch(0.92 0.07 110)",
// lightness > 0.14 && lightness < 0.21 && hue > 120 && hue < 300
const { bgAccentHover: bgAccentHover3 } = new LightModeTheme(
"oklch(0.17 0.09 231)",
).getColors();
expect(notColdSeedBg).toBe("rgb(98.101% 98.258% 96.176%)");
expect(bgAccentHover3).toBe("rgb(0% 16.773% 26.103%)");
const { bg: aChromaticSeedBg } = new LightModeTheme(
"oklch(0.92 0.02 110)",
// lightness > 0.14 && lightness < 0.21 && hue < 120 or hue > 300
const { bgAccentHover: bgAccentHover4 } = new LightModeTheme(
"oklch(0.17 0.09 110)",
).getColors();
expect(aChromaticSeedBg).toBe("rgb(98.026% 98.026% 98.026%)");
expect(bgAccentHover4).toBe("rgb(19.339% 18.943% 0%)");
// lightness > 0.21 && lightness < 0.4
const { bgAccentHover: bgAccentHover5 } = new LightModeTheme(
"oklch(0.3 0.09 110)",
).getColors();
expect(bgAccentHover5).toBe("rgb(28.395% 28.425% 0%)");
// lightness > 0.4 && lightness < 0.7
const { bgAccentHover: bgAccentHover6 } = new LightModeTheme(
"oklch(0.5 0.09 110)",
).getColors();
expect(bgAccentHover6).toBe("rgb(45.795% 46.287% 19.839%)");
// lightness > 0.7
const { bgAccentHover: bgAccentHover7 } = new LightModeTheme(
"oklch(0.9 0.09 110)",
).getColors();
expect(bgAccentHover7).toBe("rgb(92.14% 93.271% 65.642%)");
// lightness > 0.93 && hue > 60 && hue < 115
const { bgAccentHover: bgAccentHover8 } = new LightModeTheme(
"oklch(0.95 0.09 70)",
).getColors();
expect(bgAccentHover8).toBe("rgb(100% 90.701% 78.457%)");
// lightness > 0.93 && hue > 116 or hue < 165
const { bgAccentHover: bgAccentHover9 } = new LightModeTheme(
"oklch(0.95 0.09 120)",
).getColors();
expect(bgAccentHover9).toBe("rgb(89.886% 97.8% 66.657%)");
});
});

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

@ -44,8 +44,8 @@ export class LightModeTheme implements ColorModeTheme {
public getColors = () => {
return {
bg: this.bg.to("sRGB").toString(),
bgAccent: this.bgAccent.toString(),
bgAccentHover: this.bgAccentHover.toString(),
bgAccent: this.bgAccent.to("sRGB").toString(),
bgAccentHover: this.bgAccentHover.to("sRGB").toString(),
bgAccentActive: this.bgAccentActive.toString(),
bgAccentSubtleHover: this.bgAccentSubtleHover.toString(),
bgAccentSubtleActive: this.bgAccentSubtleActive.toString(),