12786408281

Committed 15 Jan 2025 10:30AM CUT coverage: 64.325% (-4.0%) from 68.304%

Build # 12786408281

Build Type

Pull #70

github

Committed by

web-flow

Commit Message

Merge 1ba419364 into b2446e3b9

Pull Request Pull Request #70: Support dark mode

Run Details

188 of 366 branches covered (51.37%)

Branch coverage included in aggregate %.

1 of 46 new or added lines in 2 files covered. (2.17%)

398 of 545 relevant lines covered (73.03%)

25.01 hits per line

Source File
Press 'n' to go to next uncovered line, 'b' for previous

0.0

/src/scripts/generateColorTokens.js

1	// code mostly copied from my personal project and modified with ChatGPT
2	// used to generate color tokens based on contrast values
3
4	import { writeFileSync } from "fs";
5	import { join } from "path";
6	import path from "path";
7	import { fileURLToPath } from "url";
8	import { Theme, Color, BackgroundColor } from "@adobe/leonardo-contrast-colors";
9	import baseColors from "../baseColors.json" with { type: "json" };
10
NEW 11	console.log(baseColors);	×
12
NEW 13	const __filename = fileURLToPath(import.meta.url); // get the resolved path to the file	×
NEW 14	const __dirname = path.dirname(__filename); // get the name of the directory	×
15
16	// -------------------------------------
17	// 2. Utility Functions
18	// -------------------------------------
19	function generateRatios(multiplier = 1) {	×
NEW 20	const baseRatio = 1.35;	×
NEW 21	const ratioCount = 9;	×
NEW 22	return Array.from(	×
23	{ length: ratioCount },
NEW 24	(_, i) => (Math.pow(baseRatio, i + 1) - baseRatio + 1) * multiplier,	×
25	);
26	}
27
28	function smoothRatios(ratios, windowSize = 3) {	×
NEW 29	const smoothed = [...ratios];	×
NEW 30	const halfWindow = Math.floor(windowSize / 2);	×
31
NEW 32	for (let i = 0; i < ratios.length; i++) {	×
NEW 33	let sum = 0;	×
NEW 34	let count = 0;	×
NEW 35	for (	×
NEW 36	let j = Math.max(0, i - halfWindow);	×
37	j < Math.min(ratios.length, i + halfWindow + 1);
38	j++
39	) {
NEW 40	sum += ratios[j];	×
NEW 41	count++;	×
42	}
NEW 43	smoothed[i] = sum / count;	×
44	}
NEW 45	return smoothed;	×
46	}
47
48	// -------------------------------------
49	// 3. Generate Ratios for light, dark, and print modes
50	// -------------------------------------
NEW 51	const lightRatios = smoothRatios(generateRatios(0.8));	×
NEW 52	const darkRatios = smoothRatios(generateRatios(1.3));	×
53
54	// -------------------------------------
55	// 4. Generate the entire color scheme
56	// -------------------------------------
57	function generateColorScheme(baseColors, isLightMode, ratios) {
NEW 58	const backgroundColor = isLightMode	×
59	? baseColors.background
60	: baseColors.foreground;
NEW 61	const textColor = isLightMode ? baseColors.foreground : baseColors.background;	×
62
NEW 63	const background = new BackgroundColor({	×
64	name: "gray",
65	colorKeys: [backgroundColor, textColor],
66	colorspace: "CAM02",
67	output: "HSL",
68	ratios,
69	smooth: true,
70	});
71
72	// Generate color scales for all keys except background/foreground
NEW 73	const colorScales = Object.entries(baseColors)	×
NEW 74	.filter(([key]) => !["background", "foreground"].includes(key))	×
75	.map(
76	([name, color]) =>
NEW 77	new Color({	×
78	name,
79	colorKeys: [color],
80	colorspace: "CAM02",
81	output: "HSL",
82	ratios,
83	smooth: true,
84	}),
85	);
86
NEW 87	const theme = new Theme({	×
88	colors: [background, ...colorScales],
89	output: "HSL",
90	backgroundColor: background,
91	lightness: isLightMode ? 100 : 0,	×
92	contrast: 1,
93	});
94
NEW 95	return theme.contrastColorPairs;	×
96	}
97
98	// Generate light, dark, and print color schemes
NEW 99	const lightColors = generateColorScheme(baseColors, true, lightRatios);	×
NEW 100	const darkColors = generateColorScheme(baseColors, false, darkRatios);	×
101
102	// -------------------------------------
103	// 5. Utility to convert color objects into CSS variables
104	// -------------------------------------
105	function generateColorVariables(colors) {
NEW 106	const variables = Object.entries(colors)	×
107	.map(([key, value]) => {
108	// Convert trailing digit to -digit, e.g. "red100" -> "red-100"
NEW 109	const modifiedKey = key.replace(/(\d+)$/, "-$1");	×
NEW 110	return `--${modifiedKey}: ${value.replace("hsl(", "").replace(")", "")};`;	×
111	})
112	.join("\n ");
113
NEW 114	const backgroundAlias = "var(--gray-100)";	×
NEW 115	const foregroundAlias = "var(--gray-900)";	×
NEW 116	const additionalVariables = `	×
117	--background: ${backgroundAlias};
118	--foreground: ${foregroundAlias};`;
119
NEW 120	return variables + additionalVariables;	×
121	}
122
123	// -------------------------------------
124	// 6. Generate final CSS (without prefers-color-scheme)
125	// -------------------------------------
126	function generateThemeVariables(lightVars, darkVars) {
NEW 127	return `	×
128
129	:root {
130	${lightVars}
131	}
132
133
134	@media (prefers-color-scheme: dark) {
135	:root {
136	${darkVars}
137	}
138	}
139	`;
140	}
141
142	function generateCssVariables() {
NEW 143	const lightVariables = generateColorVariables(lightColors);	×
NEW 144	const darkVariables = generateColorVariables(darkColors);	×
145
NEW 146	return generateThemeVariables(lightVariables, darkVariables);	×
147	}
148
149	// -------------------------------------
150	// 7. Main logic to write to design-tokens.css
151	// -------------------------------------
152	function main() {
NEW 153	const css = generateCssVariables();	×
NEW 154	writeFileSync(join(__dirname, "..", "design-tokens.css"), css);	×
NEW 155	console.log("Design tokens saved to design-tokens.css");	×
156	}
157
158	// -------------------------------------
159	// Run the script
160	// -------------------------------------
NEW 161	main();	×

stacklok / codegate-ui / 12786408281

Source File Press 'n' to go to next uncovered line, 'b' for previous

Source File
Press 'n' to go to next uncovered line, 'b' for previous