Open History to see the last commit
1import { converter } from "culori/fn";
2import { describe, expect, it } from "vite-plus/test";
3
4import "~/index.css";
5import { getStandardPaintedThemeColors } from "./themePalette";
6
7const toRgb = converter("rgb");
8
9function paintedChannels(variable: string, canvas: readonly number[] = [0, 0, 0]): number[] {
10 const probe = document.createElement("div");
11 probe.style.backgroundColor = `var(${variable})`;
12 document.body.append(probe);
13 try {
14 const color = toRgb(getComputedStyle(probe).backgroundColor)!;
15 const alpha = color.alpha ?? 1;
16 return [color.r, color.g, color.b].map(
17 (channel, index) => (channel * alpha + (canvas[index]! / 255) * (1 - alpha)) * 255,
18 );
19 } finally {
20 probe.remove();
21 }
22}
23
24describe("standard painted theme colors", () => {
25 it("match the chip surfaces index.css paints", () => {
26 const root = document.documentElement;
27 try {
28 for (const appearance of ["light", "dark"] as const) {
29 root.classList.toggle("dark", appearance === "dark");
30 const colors = getStandardPaintedThemeColors(appearance);
31 const canvas = paintedChannels("--background");
32 for (const [variable, role] of [
33 ["--background", "canvas"],
34 ["--card", "surface"],
35 ["--surface-raised", "surfaceRaised"],
36 ["--message-surface", "messageSurface"],
37 ] as const) {
38 const expected = toRgb(colors[role])!;
39 const painted = paintedChannels(variable, canvas);
40 [expected.r, expected.g, expected.b].forEach((channel, index) => {
41 expect(Math.abs(channel * 255 - painted[index]!), `${appearance} ${role}`).toBeLessThan(
42 1.5,
43 );
44 });
45 }
46 }
47 } finally {
48 root.classList.remove("dark");
49 }
50 });
51});