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

chore: add unit test for bgAssitive + bgAccentSubtleActive + bgAccentSubtleHover (#27021)

Browse Source 
Related #26018
This commit is contained in:
Pawan Kumar 2023-09-08 17:17:11 +05:30 committed by GitHub
parent 3323e8cc2f
commit 59d6316e98
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 227 additions and 47 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,91 +1,190 @@
import { DarkModeTheme } from "../src/DarkModeTheme";
describe("@design-system/theming/color/DarkModeTheme", () => {
it("checks bg color", () => {
// chroma < 0.04
describe("bg color", () => {
it("should return correct color when chroma is less than 0.04", () => {
const { bg: bg1 } = new DarkModeTheme("oklch(0.92 0.02 110)").getColors();
expect(bg1).toBe("rgb(4.3484% 4.3484% 4.3484%)");
});
// chroma > 0.04
it("should return correct color when chroma is greater than 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
describe("bgAccent color", () => {
it("should return correct color when lightness is less than 0.3", () => {
const { bgAccent: bgAccent1 } = new DarkModeTheme(
"oklch(0.2 0.09 231)",
).getColors();
expect(bgAccent1).toBe("rgb(0% 19.987% 30.122%)");
});
});
it("checks bgAccentHover color", () => {
// lightness < 0.3
describe("bgAccentHover color", () => {
it("should return correct color when lightness is less than 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(
it("should return correct color when lightness is between 0.3 and 0.45", () => {
const { bgAccentHover: bgAccentHover2 } = new DarkModeTheme(
"oklch(0.35 0.09 231)",
).getColors();
expect(bgAccentHover2).toBe("rgb(0% 25.498% 37.079%)");
expect(bgAccentHover2).toBe("rgb(0% 29.954% 42.35%)");
});
// lightness > 0.45 && lightness < 0.77
it("should return correct color when lightness is between 0.45 and 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
it("should return correct color when lightness is between 0.77 and 0.85, hue is outside 120-300, and chroma is greater than 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
it("should return correct color when lightness is between 0.77 and 0.85, hue is inside 120-300, and chroma is greater than 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
it("should return correct color when lightness is between 0.77 and 0.85, and chroma is less than 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
it("should return correct color when lightness is greater than 0.85", () => {
const { bgAccentHover: bgAccentHover7 } = new DarkModeTheme(
"oklch(0.90 0.03 110)",
).getColors();
expect(bgAccentHover7).toBe("rgb(78.426% 78.975% 70.34%)");
});
});
it("it checks bgAccentActive color", () => {
// seedLightness < 0.4
describe("bgAccentActive color", () => {
it("should return correct color when seedLightness is less than 0.4", () => {
const { bgAccentActive: bgAccentActive1 } = new DarkModeTheme(
"oklch(0.2 0.09 231)",
).getColors();
expect(bgAccentActive1).toBe("rgb(0% 17.836% 27.428%)");
});
// seedLightness >= 0.4 && seedLightness < 0.7
it("should return correct color when seedLightness is between 0.4 and 0.7", () => {
const { bgAccentActive: bgAccentActive2 } = new DarkModeTheme(
"oklch(0.45 0.09 231)",
).getColors();
expect(bgAccentActive2).toBe("rgb(0% 32.155% 44.665%)");
});
// seedLightness >= 0.7 && seedLightness < 0.85
it("should return correct color when seedLightness is between 0.7 and 0.85", () => {
const { bgAccentActive: bgAccentActive3 } = new DarkModeTheme(
"oklch(0.75 0.09 231)",
).getColors();
expect(bgAccentActive3).toBe("rgb(37.393% 66.165% 80.119%)");
});
// seedLightness >= 0.85
it("should return correct color when seedLightness is greater than or equal to 0.85", () => {
const { bgAccentActive: bgAccentActive4 } = new DarkModeTheme(
"oklch(0.90 0.09 231)",
).getColors();
expect(bgAccentActive4).toBe("rgb(46.054% 74.898% 89.15%)");
});
});
describe("bgAccentSubtle color", () => {
it("should return correct color when seedLightness is greater than 0.25", () => {
const { bgAccentSubtle: bgAccentSubtle1 } = new DarkModeTheme(
"oklch(0.30 0.09 231)",
).getColors();
expect(bgAccentSubtle1).toBe("rgb(0% 14.671% 23.499%)");
});
it("should return correct color when seedLightness is less than 0.2", () => {
const { bgAccentSubtle: bgAccentSubtle2 } = new DarkModeTheme(
"oklch(0.15 0.09 231)",
).getColors();
expect(bgAccentSubtle2).toBe("rgb(0% 9.5878% 17.677%)");
});
it("should return correct color when seedChroma is greater than 0.1", () => {
const { bgAccentSubtle: bgAccentSubtle3 } = new DarkModeTheme(
"oklch(0.30 0.15 231)",
).getColors();
expect(bgAccentSubtle3).toBe("rgb(0% 14.556% 23.9%)");
});
it("should return correct color when seedChroma is less than 0.04", () => {
const { bgAccentSubtle: bgAccentSubtle4 } = new DarkModeTheme(
"oklch(0.30 0.03 231)",
).getColors();
expect(bgAccentSubtle4).toBe("rgb(13.15% 13.15% 13.15%)");
});
});
describe("bgAccentSubtle color", () => {
it("should return correct color when seedLightness is greater than 0.25", () => {
const { bgAccentSubtle: bgAccentSubtle1 } = new DarkModeTheme(
"oklch(0.30 0.09 231)",
).getColors();
expect(bgAccentSubtle1).toBe("rgb(0% 14.671% 23.499%)");
});
it("should return correct color when seedLightness is less than 0.2", () => {
const { bgAccentSubtle: bgAccentSubtle2 } = new DarkModeTheme(
"oklch(0.15 0.09 231)",
).getColors();
expect(bgAccentSubtle2).toBe("rgb(0% 9.5878% 17.677%)");
});
it("should return correct color when seedChroma is greater than 0.1", () => {
const { bgAccentSubtle: bgAccentSubtle3 } = new DarkModeTheme(
"oklch(0.30 0.15 231)",
).getColors();
expect(bgAccentSubtle3).toBe("rgb(0% 14.556% 23.9%)");
});
it("should return correct color when seedChroma is less than 0.04", () => {
const { bgAccentSubtle: bgAccentSubtle4 } = new DarkModeTheme(
"oklch(0.30 0.03 231)",
).getColors();
expect(bgAccentSubtle4).toBe("rgb(13.15% 13.15% 13.15%)");
});
});
describe("bgAccentSubtleHover color", () => {
it("should return correct color for bgAccentSubtleHover1", () => {
const { bgAccentSubtleHover: bgAccentSubtleHover1 } = new DarkModeTheme(
"oklch(0.35 0.09 70)",
).getColors();
expect(bgAccentSubtleHover1).toBe("rgb(25.181% 12.291% 0%)");
});
});
describe("bgAccentSubtleActive color", () => {
it("should return correct color for bgAccentSubtleActive1", () => {
const { bgAccentSubtleActive: bgAccentSubtleActive1 } = new DarkModeTheme(
"oklch(0.35 0.09 70)",
).getColors();
expect(bgAccentSubtleActive1).toBe("rgb(19.651% 7.4427% 0%)");
});
});
describe("bgAssistive color", () => {
it("should return correct color for bgAssistive1 when seed is achromatic", () => {
const { bgAssistive: bgAssistive1 } = new DarkModeTheme(
"oklch(0.95 0.03 170)",
).getColors();
expect(bgAssistive1).toBe("rgb(92.148% 92.148% 92.148%)");
});
});

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

@ -1,115 +1,196 @@
import { LightModeTheme } from "../src/LightModeTheme";
describe("@design-system/theming/color/LightModeTheme", () => {
it("checks bg color", () => {
// lightness > 0.93
describe("bg color", () => {
it("should return correct color when 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
it("should return correct color when 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
it("should return correct color when 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
it("should return correct color when 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
it("should return correct color when 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
describe("bgAccent color", () => {
it("should return correct color when lightness > 0.93", () => {
const { bgAccent: bgAccent1 } = new LightModeTheme(
"oklch(0.95 0.09 231)",
).getColors();
expect(bgAccent1).toBe("rgb(91.762% 98.141% 100%)");
});
});
it("checks bgAccentHover color", () => {
// lightness < 0.06
describe("bgAccentHover color", () => {
it("should return correct color when lightness is less than 0.06", () => {
const { bgAccentHover: bgAccentHover1 } = new LightModeTheme(
"oklch(0.05 0.09 231)",
).getColors();
expect(bgAccentHover1).toBe("rgb(0% 23.271% 34.263%)");
});
// lightness > 0.06 && lightness < 0.14
const { bgAccent: bgAccentHover2 } = new LightModeTheme(
it("should return correct color when lightness is between 0.06 and 0.14", () => {
const { bgAccentHover: bgAccentHover2 } = new LightModeTheme(
"oklch(0.08 0.09 231)",
).getColors();
expect(bgAccentHover2).toBe("rgb(0% 0% 9.1079%)");
expect(bgAccentHover2).toBe("rgb(0% 17.836% 27.428%)");
});
// lightness > 0.14 && lightness < 0.21 && hue > 120 && hue < 300
it("should return correct color when lightness is between 0.14 and 0.21 and hue is between 120 and 300", () => {
const { bgAccentHover: bgAccentHover3 } = new LightModeTheme(
"oklch(0.17 0.09 231)",
).getColors();
expect(bgAccentHover3).toBe("rgb(0% 16.773% 26.103%)");
});
// lightness > 0.14 && lightness < 0.21 && hue < 120 or hue > 300
it("should return correct color when lightness is between 0.14 and 0.21 and hue is not between 120 and 300", () => {
const { bgAccentHover: bgAccentHover4 } = new LightModeTheme(
"oklch(0.17 0.09 110)",
).getColors();
expect(bgAccentHover4).toBe("rgb(19.339% 18.943% 0%)");
});
// lightness > 0.21 && lightness < 0.4
it("should return correct color when lightness is between 0.21 and 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
it("should return correct color when lightness is between 0.4 and 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
it("should return correct color when lightness is greater than 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
it("should return correct color when lightness is greater than 0.93 and hue is between 60 and 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
it("should return correct color when lightness is greater than 0.93 and hue is not between 116 and 165", () => {
const { bgAccentHover: bgAccentHover9 } = new LightModeTheme(
"oklch(0.95 0.09 120)",
).getColors();
expect(bgAccentHover9).toBe("rgb(89.886% 97.8% 66.657%)");
});
});
it("checks bgAccentActive color", () => {
// lightness < 0.4
describe("bgAccentActive color", () => {
it("should return correct color when lightness is less than 0.4", () => {
const { bgAccentActive: bgAccentActive1 } = new LightModeTheme(
"oklch(0.35 0.09 70)",
).getColors();
expect(bgAccentActive1).toBe("rgb(28.712% 15.185% 0%)");
});
// lightness >= 0.4 && lightness < 0.7)
it("should return correct color when lightness is between 0.4 and 0.7", () => {
const { bgAccentActive: bgAccentActive2 } = new LightModeTheme(
"oklch(0.50 0.09 70)",
).getColors();
expect(bgAccentActive2).toBe("rgb(49.27% 32.745% 10.549%)");
});
// lightness >= 0.7
it("should return correct color when lightness is greater than or equal to 0.7", () => {
const { bgAccentActive: bgAccentActive3 } = new LightModeTheme(
"oklch(0.75 0.09 70)",
).getColors();
expect(bgAccentActive3).toBe("rgb(81.395% 63.124% 41.808%)");
});
// lightness > 0.93
it("should return correct color when lightness is greater than 0.93", () => {
const { bgAccentActive: bgAccentActive4 } = new LightModeTheme(
"oklch(0.95 0.09 70)",
).getColors();
expect(bgAccentActive4).toBe("rgb(100% 88.945% 74.563%)");
});
});
describe("bgAccentSubtle color", () => {
it("should return correct color when seedLightness is greater than 0.93", () => {
const { bgAccentSubtle: bgAccentSubtle1 } = new LightModeTheme(
"oklch(0.95 0.09 231)",
).getColors();
expect(bgAccentSubtle1).toBe("rgb(85.876% 96.17% 100%)");
});
it("should return correct color when seedLightness is less than 0.93", () => {
const { bgAccentSubtle: bgAccentSubtle2 } = new LightModeTheme(
"oklch(0.92 0.09 231)",
).getColors();
expect(bgAccentSubtle2).toBe("rgb(78.235% 93.705% 100%)");
});
it("should return correct color when seedChroma is greater than 0.09 and hue is between 116 and 165", () => {
const { bgAccentSubtle: bgAccentSubtle3 } = new LightModeTheme(
"oklch(0.95 0.10 120)",
).getColors();
expect(bgAccentSubtle3).toBe("rgb(90.964% 97.964% 71.119%)");
});
it("should return correct color when seedChroma is greater than 0.06 and hue is not between 116 and 165", () => {
const { bgAccentSubtle: bgAccentSubtle4 } = new LightModeTheme(
"oklch(0.95 0.07 170)",
).getColors();
expect(bgAccentSubtle4).toBe("rgb(75.944% 100% 91.359%)");
});
it("should return correct color when seedChroma is less than 0.04", () => {
const { bgAccentSubtle: bgAccentSubtle5 } = new LightModeTheme(
"oklch(0.95 0.03 170)",
).getColors();
expect(bgAccentSubtle5).toBe("rgb(94.099% 94.099% 94.099%)");
});
});
describe("bgAccentSubtleHover color", () => {
it("should return correct color", () => {
const { bgAccentSubtleHover: bgAccentSubtleHover1 } = new LightModeTheme(
"oklch(0.35 0.09 70)",
).getColors();
expect(bgAccentSubtleHover1).toBe("rgb(100% 91.599% 80.256%)");
});
});
describe("bgAccentSubtleActive color", () => {
it("should return correct color", () => {
const { bgAccentSubtleActive: bgAccentSubtleActive1 } = new LightModeTheme(
"oklch(0.35 0.09 70)",
).getColors();
expect(bgAccentSubtleActive1).toBe("rgb(100% 87.217% 72.911%)");
});
});
describe("bgAssistive color", () => {
it("should return correct color when seed is achromatic", () => {
const { bgAssistive: bgAssistive1 } = new LightModeTheme(
"oklch(0.95 0.03 170)",
).getColors();
expect(bgAssistive1).toBe("rgb(5.1758% 5.1758% 5.1759%)");
});
});