@schukai/monster 4.148.9 → 4.149.0

package/test/cases/components/style/theme-modern.mjs

@@ -0,0 +1,439 @@
+import { readFileSync } from "node:fs";
+import { expect } from "chai";
+
+const themeSource = readFileSync(
+	new URL(
+		"../../../../source/components/style/theme-modern.pcss",
+		import.meta.url,
+	),
+	"utf8",
+);
+const commonSource = readFileSync(
+	new URL("../../../../source/components/style/common.pcss", import.meta.url),
+	"utf8",
+);
+const normalizeSource = readFileSync(
+	new URL(
+		"../../../../source/components/style/normalize.pcss",
+		import.meta.url,
+	),
+	"utf8",
+);
+const generatedCss = readFileSync(
+	new URL(
+		"../../../../source/components/style/theme-modern.css",
+		import.meta.url,
+	),
+	"utf8",
+);
+const generatedStyleSheet = readFileSync(
+	new URL(
+		"../../../../source/components/stylesheet/theme-modern.mjs",
+		import.meta.url,
+	),
+	"utf8",
+);
+
+const requiredCompatibilityTokens = [
+	"--monster-color-primary-1",
+	"--monster-bg-color-primary-1",
+	"--monster-color-secondary-1",
+	"--monster-bg-color-secondary-4",
+	"--monster-color-tertiary-1",
+	"--monster-bg-color-tertiary-4",
+	"--monster-color-success-1",
+	"--monster-bg-color-success-1",
+	"--monster-color-warning-1",
+	"--monster-bg-color-warning-1",
+	"--monster-color-error-1",
+	"--monster-bg-color-error-1",
+	"--monster-color-gradient-1",
+	"--monster-color-gradient-2",
+	"--monster-color-gradient-3",
+	"--monster-theme-control-bg-color",
+	"--monster-theme-control-color",
+	"--monster-theme-control-border-color",
+	"--monster-button-padding",
+	"--monster-tree-menu-font-size-level-3",
+	"--monster-tree-menu-font-size-deep",
+	"--monster-tree-menu-button-min-block-size",
+	"--monster-input-group-background-color",
+	"--monster-input-group-hover-background-color",
+	"--monster-input-group-field-hover-background-color",
+	"--monster-action-menu-padding",
+	"--monster-action-menu-border-color",
+	"--monster-action-menu-item-padding",
+	"--monster-action-menu-item-border-width",
+	"--monster-action-menu-item-hover-background-color",
+	"--monster-action-button-popper-border-color",
+	"--monster-action-button-item-background-color",
+	"--monster-action-button-item-hover-background-color",
+	"--monster-full-screen-control-size",
+	"--monster-full-screen-control-background-color",
+	"--monster-full-screen-control-active-background-color",
+	"--monster-split-panel-dragger-background-color",
+	"--monster-split-panel-dragger-hover-background-color",
+	"--monster-split-panel-handle-background-color",
+	"--monster-split-panel-handle-hover-background-color",
+	"--monster-split-panel-transition-duration",
+	"--monster-tabs-nav-background-color",
+	"--monster-tabs-button-active-border-color",
+	"--monster-tabs-indicator-background-color",
+	"--monster-vertical-tabs-control-min-block-size",
+	"--monster-vertical-tabs-nav-min-block-size",
+	"--monster-vertical-tabs-label-writing-mode",
+];
+
+const contrastPairs = [
+	["theme-text", "theme-surface-canvas", 4.5],
+	["theme-text", "theme-surface", 4.5],
+	["theme-text-secondary", "theme-surface", 4.5],
+	["theme-text-muted", "theme-surface", 4.5],
+	["theme-border", "theme-surface", 3],
+	["theme-text", "theme-surface-subtle", 4.5],
+	["theme-text-secondary", "theme-surface-subtle", 4.5],
+	["theme-secondary", "theme-surface-subtle", 3],
+	["theme-secondary", "theme-secondary-subtle", 4.5],
+	["theme-tertiary", "theme-surface-subtle", 3],
+	["theme-success", "theme-surface-subtle", 3],
+	["theme-warning", "theme-surface-subtle", 3],
+	["theme-error", "theme-surface-subtle", 3],
+	["theme-on-accent", "theme-accent", 4.5],
+	["theme-on-accent", "theme-accent-hover", 4.5],
+	["theme-on-accent", "theme-secondary", 4.5],
+	["theme-on-accent", "theme-secondary-strong", 4.5],
+	["theme-on-accent", "theme-tertiary", 4.5],
+	["theme-on-accent", "theme-success", 4.5],
+	["theme-on-accent", "theme-warning", 4.5],
+	["theme-on-accent", "theme-error", 4.5],
+	["theme-on-warning", "theme-warning-emphasis", 4.5],
+	["theme-text", "theme-success-subtle", 4.5],
+	["theme-text", "theme-warning-subtle", 4.5],
+	["theme-text", "theme-error-subtle", 4.5],
+	["theme-text", "theme-info-subtle", 4.5],
+	["theme-text", "theme-selection", 4.5],
+	["theme-focus-ring", "theme-surface", 3],
+	["theme-focus-ring", "theme-surface-canvas", 3],
+];
+
+const darkSemanticTokens = [
+	"theme-surface-canvas",
+	"theme-surface",
+	"theme-surface-subtle",
+	"theme-surface-strong",
+	"theme-text",
+	"theme-text-secondary",
+	"theme-text-muted",
+	"theme-border",
+	"theme-border-strong",
+	"theme-accent",
+	"theme-accent-hover",
+	"theme-accent-subtle",
+	"theme-secondary",
+	"theme-secondary-subtle",
+	"theme-secondary-strong",
+	"theme-tertiary",
+	"theme-tertiary-subtle",
+	"theme-on-accent",
+	"theme-focus-ring",
+	"theme-selection",
+	"theme-success",
+	"theme-success-subtle",
+	"theme-warning",
+	"theme-warning-subtle",
+	"theme-warning-emphasis",
+	"theme-on-warning",
+	"theme-error",
+	"theme-error-subtle",
+	"theme-info",
+	"theme-info-subtle",
+	"theme-disabled",
+	"theme-disabled-surface",
+];
+
+const darkContrastPairs = [
+	...contrastPairs,
+	["theme-disabled", "theme-disabled-surface", 4.5],
+];
+
+describe("Modern theme stylesheet", () => {
+	it("scopes the opt-in theme to the existing theme-name contract", () => {
+		expect(themeSource).to.include(':root[data-monster-theme-name="modern"]');
+		expect(themeSource).to.include("color-scheme: light dark");
+	});
+
+	it("maps the established Monster theme tokens", () => {
+		for (const token of requiredCompatibilityTokens) {
+			expect(themeSource, token).to.include(token);
+		}
+	});
+
+	it("keeps the generated theme artifacts in sync", () => {
+		expect(generatedCss).to.include(":root[data-monster-theme-name=modern]");
+		expect(generatedCss).to.include("--monster-theme-surface-canvas:#efeee9");
+		expect(generatedCss).to.include("--monster-theme-focus-ring:#236b5b");
+		expect(generatedCss).to.include("--monster-theme-warning-emphasis:#f2c94c");
+		expect(generatedCss).to.include(
+			"--monster-color-warning-1:var(--monster-theme-on-warning)",
+		);
+		expect(generatedCss).to.include(
+			"--monster-bg-color-warning-4:var(--monster-theme-warning-emphasis)",
+		);
+		expect(generatedCss).to.include("--monster-border-radius:0.25rem");
+		expect(generatedCss).to.include(
+			"--monster-theme-control-border-radius:0.25rem",
+		);
+		expect(generatedCss).to.include(
+			"--monster-control-min-block-size:max(2.75rem,44px)",
+		);
+		expect(generatedCss).to.include(
+			"--monster-button-padding:0.5rem 0.875rem",
+		);
+		expect(generatedCss).to.include(
+			"--monster-tree-menu-font-size-level-2:0.9375rem",
+		);
+		expect(generatedCss).to.include(
+			"--monster-tree-menu-font-size-level-3:0.875rem",
+		);
+		expect(generatedCss).to.include(
+			"--monster-tree-menu-font-size-deep:0.875rem",
+		);
+		expect(generatedCss).to.include(
+			"--monster-tree-menu-button-min-block-size:2rem",
+		);
+		expect(generatedCss).to.include(
+			"--monster-input-group-background-color:var(--monster-theme-surface)",
+		);
+		expect(generatedCss).to.include(
+			"--monster-input-group-field-hover-background-color:transparent",
+		);
+		expect(generatedCss).to.include(
+			"--monster-action-menu-item-min-block-size:max(2.75rem,44px)",
+		);
+		expect(generatedCss).to.include(
+			"--monster-action-menu-item-border-width:0",
+		);
+		expect(generatedCss).to.include(
+			"--monster-action-menu-item-padding:0.625rem 0.75rem",
+		);
+		expect(generatedCss).to.include(
+			"--monster-box-shadow-2:0 2px 0 rgba(36,35,31,.18)",
+		);
+		expect(generatedCss).to.include(
+			"--monster-tabs-nav-border-width:0 0 1px",
+		);
+		expect(generatedCss).to.include("--monster-dragger-width:0.75rem");
+		expect(generatedCss).to.include(
+			"--monster-split-panel-handle-border-radius:999px",
+		);
+		expect(generatedCss).to.include(
+			"--monster-tabs-button-active-border-color:var(--monster-theme-tertiary)",
+		);
+		expect(generatedCss).to.include(
+			"--monster-tabs-indicator-active-opacity:0",
+		);
+		expect(generatedCss).to.include(
+			"--monster-vertical-tabs-control-min-block-size:9rem",
+		);
+		expect(generatedCss).to.include(
+			"--monster-vertical-tabs-nav-min-block-size:9rem",
+		);
+		expect(generatedCss).to.include(
+			"--monster-vertical-tabs-label-writing-mode:horizontal-tb",
+		);
+		expect(generatedCss).to.include("--monster-button-bar-gap:0");
+		expect(generatedCss).to.include("--monster-button-bar-item-spacing:0");
+		expect(generatedCss).to.include(
+			"--monster-action-menu-min-inline-size:11rem",
+		);
+		expect(generatedCss).to.include(
+			"--monster-action-button-item-background-color:var(",
+		);
+		expect(generatedCss).to.include(
+			"--monster-full-screen-control-size:var(--monster-control-min-block-size)",
+		);
+		expect(generatedCss).to.match(
+			/--monster-full-screen-control-active-background-color:var\(\s*--monster-theme-accent\s*\)/u,
+		);
+		expect(generatedCss).to.match(
+			/--monster-action-button-item-hover-background-color:var\(\s*--monster-action-menu-item-hover-background-color\s*\)/u,
+		);
+		expect(generatedStyleSheet).to.include("export { ThemeModernStyleSheet }");
+		expect(generatedStyleSheet).to.include(
+			":root[data-monster-theme-name=modern]",
+		);
+	});
+
+	it("uses a neutral warm foundation without blue-tinted gray surfaces", () => {
+		for (const token of [
+			"theme-surface-canvas",
+			"theme-surface",
+			"theme-surface-subtle",
+			"theme-surface-strong",
+			"theme-text",
+			"theme-text-secondary",
+			"theme-text-muted",
+			"theme-border",
+			"theme-border-strong",
+		]) {
+			const channels = getHexToken(themeSource, token)
+				.slice(1)
+				.match(/.{2}/gu)
+				.map((channel) => Number.parseInt(channel, 16));
+
+			expect(channels[0], token).to.be.at.least(channels[1]);
+			expect(channels[1], token).to.be.at.least(channels[2]);
+		}
+	});
+
+	it("uses neutral secondary content with warm subtle surfaces", () => {
+		expect(themeSource).to.include("--monster-theme-accent-subtle: #ece7df");
+		expect(themeSource).to.include("--monster-theme-secondary: #4d4b45");
+		expect(themeSource).to.include("--monster-theme-secondary-subtle: #f2e4d5");
+		expect(themeSource).to.include("--monster-theme-secondary-strong: #3b3935");
+		expect(themeSource).to.include("--monster-theme-focus-ring: #236b5b");
+		expect(themeSource).to.include("--monster-theme-selection: #dcefe6");
+		for (const level of [2, 3]) {
+			expect(themeSource).to.include(
+				`--monster-bg-color-secondary-${level}: var(--monster-theme-secondary-subtle)`,
+			);
+		}
+		expect(themeSource).to.include(
+			"--monster-bg-color-secondary-4: var(--monster-theme-secondary-strong)",
+		);
+		for (const violet of ["#674fd1", "#e7e0f8", "#ddd4f5"]) {
+			expect(themeSource).to.not.include(violet);
+		}
+	});
+
+	it("preserves the standard gradient colors in light and dark mode", () => {
+		for (const declaration of [
+			"--monster-color-gradient-1: #833ab4",
+			"--monster-color-gradient-2: #fd1d1d",
+			"--monster-color-gradient-3: #fcb045",
+			"--monster-color-gradient-1: #ffe0b2",
+			"--monster-color-gradient-2: #ad8275",
+			"--monster-color-gradient-3: #771ba3",
+		]) {
+			expect(themeSource, declaration).to.include(declaration);
+		}
+
+		expect(themeSource).to.include("@media (prefers-color-scheme: dark)");
+		expect(generatedCss).to.include("--monster-color-gradient-1:#833ab4");
+		expect(generatedCss).to.include("--monster-color-gradient-2:#fd1d1d");
+		expect(generatedCss).to.include("--monster-color-gradient-3:#fcb045");
+		expect(generatedCss).to.include("--monster-color-gradient-1:#ffe0b2");
+		expect(generatedCss).to.include("--monster-color-gradient-2:#ad8275");
+		expect(generatedCss).to.include("--monster-color-gradient-3:#771ba3");
+	});
+
+	it("defines a complete automatic dark semantic palette", () => {
+		const darkThemeSource = getDarkThemeSource(themeSource);
+
+		for (const token of darkSemanticTokens) {
+			expect(getHexToken(darkThemeSource, token), token).to.match(
+				/^#[0-9a-f]{6}$/iu,
+			);
+		}
+
+		expect(generatedCss).to.include(
+			"@media (prefers-color-scheme:dark){:root[data-monster-theme-name=modern]",
+		);
+		expect(generatedCss).to.include(
+			"--monster-theme-surface-canvas:#161512",
+		);
+		expect(generatedCss).to.include("--monster-theme-text:#f4f0e8");
+		expect(generatedCss).to.include("--monster-theme-secondary:#d2ccc0");
+		expect(generatedCss).to.include("--monster-theme-secondary-subtle:#302d29");
+		expect(generatedCss).to.include("--monster-theme-focus-ring:#72cbb0");
+		expect(generatedCss).to.include("--monster-theme-selection:#24483e");
+		expect(generatedStyleSheet).to.include(
+			"--monster-theme-disabled-surface:#37342f",
+		);
+	});
+
+	for (const [foreground, background, minimum] of contrastPairs) {
+		it(`${foreground} on ${background} has at least ${minimum}:1 contrast`, () => {
+			const ratio = getContrastRatio(
+				getHexToken(themeSource, foreground),
+				getHexToken(themeSource, background),
+			);
+			expect(ratio).to.be.at.least(minimum);
+		});
+	}
+
+	for (const [foreground, background, minimum] of darkContrastPairs) {
+		it(`dark ${foreground} on ${background} has at least ${minimum}:1 contrast`, () => {
+			const darkThemeSource = getDarkThemeSource(themeSource);
+			const ratio = getContrastRatio(
+				getHexToken(darkThemeSource, foreground),
+				getHexToken(darkThemeSource, background),
+			);
+			expect(ratio).to.be.at.least(minimum);
+		});
+	}
+
+	it("uses the shared focus-ring tokens for document controls", () => {
+		for (const source of [commonSource, normalizeSource]) {
+			expect(source).to.include(":focus-visible");
+			expect(source).to.include("var(--monster-focus-ring-width");
+			expect(source).to.include("var(--monster-focus-ring-color");
+			expect(source).to.not.match(/:focus-visible\s*\{\s*outline:\s*none;/u);
+		}
+	});
+});
+
+function getHexToken(source, name) {
+	const match = source.match(
+		new RegExp(`--monster-${name}:\\s*(#[0-9a-f]{6})`, "iu"),
+	);
+	expect(match, `--monster-${name}`).to.not.equal(null);
+	return match[1];
+}
+
+function getDarkThemeSource(source) {
+	const mediaStart = source.indexOf("@media (prefers-color-scheme: dark)");
+	expect(mediaStart, "dark media query").to.be.at.least(0);
+
+	const selectorStart = source.indexOf(
+		':root[data-monster-theme-name="modern"]',
+		mediaStart,
+	);
+	expect(selectorStart, "modern dark selector").to.be.at.least(0);
+
+	const blockStart = source.indexOf("{", selectorStart);
+	let depth = 1;
+	let cursor = blockStart + 1;
+	while (cursor < source.length && depth > 0) {
+		if (source[cursor] === "{") {
+			depth += 1;
+		} else if (source[cursor] === "}") {
+			depth -= 1;
+		}
+		cursor += 1;
+	}
+
+	expect(depth, "balanced dark theme block").to.equal(0);
+	return source.slice(blockStart + 1, cursor - 1);
+}
+
+function getContrastRatio(foreground, background) {
+	const foregroundLuminance = getRelativeLuminance(foreground);
+	const backgroundLuminance = getRelativeLuminance(background);
+	return (
+		(Math.max(foregroundLuminance, backgroundLuminance) + 0.05) /
+		(Math.min(foregroundLuminance, backgroundLuminance) + 0.05)
+	);
+}
+
+function getRelativeLuminance(hex) {
+	const channels = hex
+		.slice(1)
+		.match(/.{2}/gu)
+		.map((channel) => Number.parseInt(channel, 16) / 255)
+		.map((channel) =>
+			channel <= 0.04045 ? channel / 12.92 : ((channel + 0.055) / 1.055) ** 2.4,
+		);
+
+	return 0.2126 * channels[0] + 0.7152 * channels[1] + 0.0722 * channels[2];
+}

package/test/cases/components/style/theme-review-regressions.mjs

@@ -0,0 +1,41 @@
+import { strict as assert } from "node:assert";
+import { readFile } from "node:fs/promises";
+import { resolve } from "node:path";
+
+const projectRoot = resolve(import.meta.dirname, "../../../..");
+
+describe("Theme review component regressions", () => {
+	it("keeps reviewed responsive styles in generated component sheets", async () => {
+		const checks = [
+			["content", "copy", "cursor: pointer", "cursor:pointer"],
+			["form", "sheet", '[part="context-menu"]', "[part=context-menu]"],
+			["notify", "notify", "width: min(25rem, 100%)", "width:min(25rem,100%)"],
+			["state", "log", "box-sizing: border-box", "box-sizing:border-box"],
+		];
+
+		for (const [family, name, sourceToken, generatedToken] of checks) {
+			const [source, generated] = await Promise.all([
+				readFile(
+					resolve(
+						projectRoot,
+						`source/components/${family}/style/${name}.pcss`,
+					),
+					"utf8",
+				),
+				readFile(
+					resolve(
+						projectRoot,
+						`source/components/${family}/stylesheet/${name}.mjs`,
+					),
+					"utf8",
+				),
+			]);
+
+			assert.ok(source.includes(sourceToken), `${family}/${name} source`);
+			assert.ok(
+				generated.includes(generatedToken),
+				`${family}/${name} generated`,
+			);
+		}
+	});
+});