@cardstack/boxel-cli 0.13.0-unstable.4 → 0.13.0-unstable.5

package/bundled-test-harness/assets/theme-card-test-dVNz4tgU.js

@@ -0,0 +1,621 @@
+import { s as __toESM } from "./chunk-Rp0pCe6z.js";
+import { r as initializeDeferredDecorator, t as decorateFieldV2 } from "./runtime--fcdnjmJ-BoCBNIsz.js";
+import { Br as testRealmURL, Rc as Deferred } from "./runtime-common-BTaLJEw-.js";
+import { wt as setComponentTemplate } from "./cache-DtDz7X5V-Wn8jRDfL.js";
+import { H as templateFactory } from "./index-DaCZcoCY-CgzbilMy.js";
+import { n as src_default } from "./src-DPaAwa4H.js";
+import "./component-BJO47HTh.js";
+import "./template-factory-ds9s0u8l.js";
+import { B as BoxelInput } from "./components-Ck24ubaT.js";
+import { d as click, s as fillIn } from "./dist-BOAdzfkP.js";
+import { t as require_qunit } from "./qunit-C-Foo4Nd.js";
+import { D as realmConfigCardJSON, Et as percySnapshot, F as setupLocalIndexing, I as setupOnSave, L as setupRealmCacheTeardown, Z as withCachedRealmSetup, a as SYSTEM_CARD_FIXTURE_CONTENTS, ct as setupApplicationTest, j as setupAcceptanceTestRealm, mt as setupAuthEndpoints, st as visitOperatorMode, t as setupMockMatrix, z as setupUserSubscription } from "./mock-matrix-FjsXmU7-.js";
+import { r as getService } from "./dist-CPfIHBla.js";
+import { t as SOFT_POP_VARS } from "./theme-fixtures-Cbx3kJqv.js";
+//#region tests/acceptance/theme-card-test.gts
+var import_qunit = /* @__PURE__ */ __toESM(require_qunit());
+var ROOT_CSS_VARS = {
+	background: "#0a0f23",
+	foreground: "#f4f1e8",
+	primary: "#ffd700",
+	primaryForeground: "#0a0f23",
+	secondary: "#2d3561",
+	secondaryForeground: "#c5c2b0",
+	destructive: "#cd5c5c",
+	destructiveForeground: "#f4f1e8",
+	muted: "#1e2347",
+	mutedForeground: "#8a8772",
+	accent: "#ffb347",
+	accentForeground: "#1a1f3a",
+	card: "#1a1f3a",
+	cardForeground: "#e8e5d3",
+	ring: "#ffd700",
+	input: "#2d3561",
+	popover: "#242952",
+	popoverForeground: "#f4f1e8",
+	sidebar: "#0f1428",
+	sidebarForeground: "#c5c2b0",
+	border: "#3a4073",
+	fontMono: "'Source Code Pro', 'Courier New', monospace",
+	fontSans: "'Libre Baskerville', 'Georgia', serif",
+	fontSerif: "'Crimson Text', 'Times New Roman', serif",
+	spacing: "0.3rem",
+	trackingNormal: "0.01em",
+	radius: "0.75rem",
+	shadow: "0 6px 12px rgba(255, 215, 0, 0.3)",
+	shadow2xl: "0 6px 12px rgba(255, 215, 0, 0.5)",
+	chart1: "#ffb347"
+};
+var DARK_MODE_VARS = {
+	background: "#050813",
+	foreground: "#f7f4e9",
+	primary: "#ffef94",
+	primaryForeground: "#050813",
+	secondary: "#1e2347",
+	secondaryForeground: "#d0cd98",
+	accent: "#ffc975",
+	accentForeground: "#0f1428",
+	muted: "#141933",
+	mutedForeground: "#9d9a85",
+	destructive: "#e07a7a",
+	destructiveForeground: "#f7f4e9",
+	card: "#0f1428",
+	cardForeground: "#ebe8d5",
+	popover: "#1a1f3a",
+	popoverForeground: "#f7f4e9",
+	sidebar: "#050813",
+	sidebarForeground: "#d0cd98",
+	ring: "#ffef94",
+	input: "#1e2347",
+	border: "#2d3561",
+	radius: "0.75rem",
+	shadow: "0 6px 12px rgba(255, 239, 148, 0.35)",
+	spacing: "0.3rem",
+	fontMono: "'Source Code Pro', 'Courier New', monospace",
+	fontSans: "'Libre Baskerville', 'Georgia', serif",
+	fontSerif: "'Crimson Text', 'Times New Roman', serif",
+	trackingNormal: "0.01em"
+};
+var DARK_GOLD_THEME_VARS = {
+	primary: "#ffd700",
+	primaryForeground: "#0a0f23",
+	border: "#3a4073",
+	background: "#1a1f3a",
+	spacing: "0.3rem"
+};
+var OCEAN_BLUE_THEME_VARS = {
+	primary: "#0058A3",
+	primaryForeground: "#FFFFFF",
+	border: "#003B6F",
+	background: "#E3F2FD",
+	spacing: "0.25rem"
+};
+var FOREST_GREEN_THEME_VARS = {
+	primary: "#2e7d32",
+	primaryForeground: "#FFFFFF",
+	border: "#1b5e20",
+	background: "#E8F5E9",
+	spacing: "0.25rem"
+};
+function computedProperty(selector, property) {
+	let el = document.querySelector(selector);
+	if (!el) throw new Error(`expected to find element: ${selector}`);
+	return src_default.getComputedStyle(el).getPropertyValue(property).trim();
+}
+function hexToRgb(hex) {
+	return `rgb(${parseInt(hex.slice(1, 3), 16)}, ${parseInt(hex.slice(3, 5), 16)}, ${parseInt(hex.slice(5, 7), 16)})`;
+}
+(0, import_qunit.module)("Acceptance | theme-card-test", function(hooks) {
+	setupApplicationTest(hooks);
+	setupLocalIndexing(hooks);
+	setupOnSave(hooks);
+	setupRealmCacheTeardown(hooks);
+	let mockMatrixUtils = setupMockMatrix(hooks, {
+		loggedInAs: "@testuser:localhost",
+		activeRealms: [testRealmURL]
+	});
+	let { createAndJoinRoom } = mockMatrixUtils;
+	const themeCardId = `${testRealmURL}starry-night`;
+	const softPopCardId = `${testRealmURL}soft-pop`;
+	const styleRefCardId = `${testRealmURL}style-ref-starry-night`;
+	hooks.beforeEach(async function() {
+		createAndJoinRoom({
+			sender: "@testuser:localhost",
+			name: "room-test"
+		});
+		setupUserSubscription();
+		setupAuthEndpoints();
+		let loader = getService("loader-service").loader;
+		let cardApi;
+		let booleanMod;
+		cardApi = await loader.import("@cardstack/base/card-api");
+		booleanMod = await loader.import("@cardstack/base/boolean");
+		let { field, contains, CardDef, Component } = cardApi;
+		let { default: BooleanField } = booleanMod;
+		class CheckboxCard extends CardDef {
+			static displayName = "Checkbox Card";
+			static {
+				decorateFieldV2(this.prototype, "isChecked", [field], function() {
+					return contains(BooleanField);
+				});
+			}
+			#isChecked = (initializeDeferredDecorator(this, "isChecked"), void 0);
+			static isolated = class Isolated extends Component {
+				static {
+					setComponentTemplate(templateFactory({
+						"id": "TX+YzjiH",
+						"block": "[[[10,\"h2\"],[12],[1,\"Checkbox Card\"],[13],[1,\"\\n\"],[8,[32,0],[[24,\"data-test-checkbox-checked\",\"\"]],[[\"@type\",\"@value\"],[\"checkbox\",true]],null],[1,\"\\n\"],[8,[32,0],[[24,\"data-test-checkbox-unchecked\",\"\"]],[[\"@type\",\"@value\"],[\"checkbox\",false]],null]],[],[]]",
+						"moduleName": "/home/runner/work/boxel/boxel/packages/host/tests/acceptance/theme-card-test.gts",
+						"scope": () => [BoxelInput],
+						"isStrictMode": true
+					}), this);
+				}
+			};
+		}
+		await withCachedRealmSetup(async () => {
+			await setupAcceptanceTestRealm({
+				mockMatrixUtils,
+				contents: {
+					...SYSTEM_CARD_FIXTURE_CONTENTS,
+					"checkbox-card.gts": { CheckboxCard },
+					"realm.json": realmConfigCardJSON({ name: "Theme Playground" }),
+					"starry-night.json": { data: {
+						meta: { adoptsFrom: {
+							name: "default",
+							module: "@cardstack/base/structured-theme"
+						} },
+						type: "card",
+						attributes: {
+							cardInfo: {
+								name: "Starry Night",
+								summmary: "A celestial theme",
+								cardThumbnailURL: "https://images.unsplash.com/photo-1506905925346-21bda4d32df4?q=80&w=400&auto=format&fit=crop"
+							},
+							cssImports: [
+								"https://fonts.googleapis.com/css2?family=Libre+Baskerville:ital,wght@0,400;0,700;1,400&display=swap",
+								"https://fonts.googleapis.com/css2?family=Crimson+Text:ital,wght@0,400;0,600;1,400&display=swap",
+								"https://fonts.googleapis.com/css2?family=Source+Code+Pro:ital,wght@0,300;0,400;0,500;0,600;1,400&display=swap"
+							],
+							rootVariables: ROOT_CSS_VARS,
+							darkModeVariables: DARK_MODE_VARS
+						}
+					} },
+					"style-ref-starry-night.json": { data: {
+						meta: { adoptsFrom: {
+							name: "default",
+							module: "@cardstack/base/style-reference"
+						} },
+						type: "card",
+						attributes: {
+							cardInfo: {
+								notes: "Color palette extracted from the famous painting: deep Prussian blue (#0a0f23), golden yellow (#ffd700), warm amber (#ffb347), and creamy highlights (#f4f1e8). Uses elegant serif fonts to match the artistic, classical nature of the inspiration.",
+								name: "Starry Night",
+								summary: "A celestial theme inspired by Van Gogh's masterpiece, featuring deep midnight blues swirling with golden yellows and warm amber accents.",
+								cardThumbnailURL: "https://images.unsplash.com/photo-1506905925346-21bda4d32df4?q=80&w=400&auto=format&fit=crop"
+							},
+							styleName: "Starry Night",
+							visualDNA: "A celestial theme inspired by Van Gogh's masterpiece, featuring deep midnight blues swirling with golden yellows and warm amber accents. The palette captures the cosmic energy of a starlit night with flowing, organic movements and luminous highlights that dance across dark surfaces.",
+							cssImports: [
+								"https://fonts.googleapis.com/css2?family=Libre+Baskerville:ital,wght@0,400;0,700;1,400&display=swap",
+								"https://fonts.googleapis.com/css2?family=Crimson+Text:ital,wght@0,400;0,600;1,400&display=swap",
+								"https://fonts.googleapis.com/css2?family=Source+Code+Pro:ital,wght@0,300;0,400;0,500;0,600;1,400&display=swap"
+							],
+							inspirations: [
+								"Van Gogh",
+								"Post-Impressionism",
+								"Cosmic swirls",
+								"Night sky",
+								"Cypress trees",
+								"Village lights",
+								"Impasto technique",
+								"Dynamic brushstrokes"
+							],
+							rootVariables: ROOT_CSS_VARS,
+							wallpaperImages: [
+								"https://images.unsplash.com/photo-1506905925346-21bda4d32df4?q=80&w=1200&auto=format&fit=crop",
+								"https://images.unsplash.com/photo-1447433589675-4aaa569f3e05?q=80&w=1200&auto=format&fit=crop",
+								"https://images.unsplash.com/photo-1419242902214-272b3f66ee7a?q=80&w=1200&auto=format&fit=crop"
+							],
+							darkModeVariables: DARK_MODE_VARS
+						}
+					} },
+					"soft-pop.json": { data: {
+						meta: { adoptsFrom: {
+							name: "default",
+							module: "@cardstack/base/structured-theme"
+						} },
+						type: "card",
+						attributes: { cardInfo: {
+							name: "Soft Pop",
+							summary: "A theme with soft color pops"
+						} }
+					} },
+					"dark-gold-theme.json": { data: {
+						meta: { adoptsFrom: {
+							name: "default",
+							module: "@cardstack/base/structured-theme"
+						} },
+						type: "card",
+						attributes: {
+							cardInfo: { name: "Dark Gold" },
+							rootVariables: DARK_GOLD_THEME_VARS,
+							typography: { body: { fontSize: "18px" } }
+						}
+					} },
+					"ocean-blue-theme.json": { data: {
+						meta: { adoptsFrom: {
+							name: "default",
+							module: "@cardstack/base/structured-theme"
+						} },
+						type: "card",
+						attributes: {
+							cardInfo: { name: "Ocean Blue" },
+							rootVariables: OCEAN_BLUE_THEME_VARS,
+							typography: { body: { fontSize: "14px" } }
+						}
+					} },
+					"forest-green-theme.json": { data: {
+						meta: { adoptsFrom: {
+							name: "default",
+							module: "@cardstack/base/structured-theme"
+						} },
+						type: "card",
+						attributes: {
+							cardInfo: { name: "Forest Green" },
+							rootVariables: FOREST_GREEN_THEME_VARS,
+							typography: { body: { fontSize: "16px" } }
+						}
+					} },
+					"checkbox-dark-gold.json": { data: {
+						meta: { adoptsFrom: {
+							name: "CheckboxCard",
+							module: `${testRealmURL}checkbox-card`
+						} },
+						type: "card",
+						attributes: {
+							isChecked: true,
+							cardInfo: { name: "Dark Gold Checkbox" }
+						},
+						relationships: { "cardInfo.theme": { links: { self: `${testRealmURL}dark-gold-theme` } } }
+					} },
+					"checkbox-ocean-blue.json": { data: {
+						meta: { adoptsFrom: {
+							name: "CheckboxCard",
+							module: `${testRealmURL}checkbox-card`
+						} },
+						type: "card",
+						attributes: {
+							isChecked: true,
+							cardInfo: { name: "Ocean Blue Checkbox" }
+						},
+						relationships: { "cardInfo.theme": { links: { self: `${testRealmURL}ocean-blue-theme` } } }
+					} },
+					"checkbox-forest-green-2.json": { data: {
+						meta: { adoptsFrom: {
+							name: "CheckboxCard",
+							module: `${testRealmURL}checkbox-card`
+						} },
+						type: "card",
+						attributes: {
+							isChecked: false,
+							cardInfo: { name: "Second Forest Green Checkbox" }
+						},
+						relationships: { "cardInfo.theme": { links: { self: `${testRealmURL}forest-green-theme` } } }
+					} },
+					"checkbox-forest-green.json": { data: {
+						meta: { adoptsFrom: {
+							name: "CheckboxCard",
+							module: `${testRealmURL}checkbox-card`
+						} },
+						type: "card",
+						attributes: {
+							isChecked: true,
+							cardInfo: { name: "Forest Green Checkbox" }
+						},
+						relationships: { "cardInfo.theme": { links: { self: `${testRealmURL}forest-green-theme` } } }
+					} }
+				}
+			});
+		});
+	});
+	(0, import_qunit.module)("style-reference-card", () => {
+		(0, import_qunit.test)("renders with scoped theme css variables", async function(assert) {
+			await visitOperatorMode({ stacks: [[{
+				id: styleRefCardId,
+				format: "isolated"
+			}]] });
+			let cardSelector = `[data-test-card="${styleRefCardId}"]`;
+			assert.dom(`${cardSelector} h1`).hasText("Starry Night");
+			assert.dom(cardSelector).hasClass("boxel-card-container--themed");
+			assert.dom(cardSelector).hasAttribute("data-boxel-theme-scope");
+			assert.strictEqual(computedProperty(cardSelector, "--background"), ROOT_CSS_VARS.background, "computed --background matches the theme root variable");
+			assert.strictEqual(computedProperty(cardSelector, "--primary"), ROOT_CSS_VARS.primary, "computed --primary matches the theme root variable");
+			let computedFontFamily = computedProperty(cardSelector, "font-family");
+			assert.ok(computedFontFamily.includes("Libre Baskerville"), `computed font-family includes themed value`);
+		});
+	});
+	(0, import_qunit.module)("structured-theme-card", () => {
+		(0, import_qunit.test)("renders with scoped theme css variables", async function(assert) {
+			await visitOperatorMode({ stacks: [[{
+				id: themeCardId,
+				format: "isolated"
+			}]] });
+			let cardSelector = `[data-test-card="${themeCardId}"]`;
+			assert.dom(`${cardSelector} h1`).hasText("Starry Night");
+			assert.dom("[data-test-css-field]").containsText("--radius: 0.75rem;");
+			assert.dom(cardSelector).hasClass("boxel-card-container--themed");
+			assert.dom(cardSelector).hasAttribute("data-boxel-theme-scope");
+			let containerScope = document.querySelector(cardSelector).getAttribute("data-boxel-theme-scope");
+			let dashboardScope = document.querySelector(`${cardSelector} article[data-boxel-theme-scope]`).getAttribute("data-boxel-theme-scope");
+			assert.true(containerScope.startsWith(`${themeCardId}-`), "scope derives from the theme card id");
+			assert.strictEqual(dashboardScope, containerScope, "dashboard scope matches the container scope");
+			assert.strictEqual(computedProperty(cardSelector, "--background"), "#0a0f23", "computed --background matches the root variable");
+			assert.strictEqual(computedProperty(cardSelector, "--chart-1"), "#ffb347", "computed --chart-1 matches the root variable");
+			assert.strictEqual(computedProperty(cardSelector, "--shadow-2xl"), "0 6px 12px rgba(255, 215, 0, 0.5)", "computed --shadow-2xl matches the root variable");
+			let computedFontFamily = computedProperty(cardSelector, "font-family");
+			assert.ok(computedFontFamily.includes("Libre Baskerville"), `computed font-family includes themed value`);
+			assert.dom(`${cardSelector} [data-test-pill-preview]`).exists({ count: 6 }, "the color system previews all pill variants");
+			assert.strictEqual(computedProperty(`${cardSelector} [data-test-pill-preview="primary"]`, "background-color"), hexToRgb(ROOT_CSS_VARS.primary), "the primary pill previews the theme primary color");
+			assert.strictEqual(computedProperty(`${cardSelector} [data-test-pill-preview="destructive"]`, "background-color"), hexToRgb(ROOT_CSS_VARS.destructive), "the destructive pill previews the theme destructive color");
+			assert.dom(`${cardSelector} [data-test-action-sample]`).exists({ count: 3 }, "default, primary, and secondary action samples render");
+			await visitOperatorMode({
+				stacks: [],
+				codePath: themeCardId,
+				submode: "code"
+			});
+			assert.dom(`${cardSelector} h1`).hasText("Starry Night");
+			assert.dom("[data-test-css-field]").containsText("--radius: 0.75rem;");
+			assert.dom(cardSelector).hasAttribute("data-boxel-theme-scope");
+			assert.strictEqual(computedProperty(cardSelector, "--background"), "#0a0f23", "computed --background matches the root variable in code submode");
+			await percySnapshot(assert);
+		});
+		(0, import_qunit.test)("dark mode preview toggle applies dark theme variables to the dashboard", async function(assert) {
+			await visitOperatorMode({ stacks: [[{
+				id: themeCardId,
+				format: "isolated"
+			}]] });
+			let dashboardSelector = `[data-test-card="${themeCardId}"] .detailed-style-reference`;
+			assert.strictEqual(computedProperty(dashboardSelector, "--background"), ROOT_CSS_VARS.background, "dashboard shows root variables before toggling");
+			await click("[data-test-mode=\"toggle-dark\"]");
+			assert.strictEqual(computedProperty(dashboardSelector, "--background"), DARK_MODE_VARS.background, "dashboard shows dark mode variables after toggling dark");
+			assert.strictEqual(computedProperty(dashboardSelector, "--primary"), DARK_MODE_VARS.primary, "dashboard --primary flips to the dark value");
+			await click("[data-test-mode=\"toggle-light\"]");
+			assert.strictEqual(computedProperty(dashboardSelector, "--background"), ROOT_CSS_VARS.background, "dashboard shows root variables again after toggling light");
+		});
+		(0, import_qunit.test)("dark mode preview keeps dark defaults for tokens the theme omits", async function(assert) {
+			await visitOperatorMode({ stacks: [[{
+				id: themeCardId,
+				format: "isolated"
+			}]] });
+			let scopeSelector = `[data-test-card="${themeCardId}"] [data-test-theme-dashboard]`;
+			assert.strictEqual(computedProperty(scopeSelector, "--canvas"), "#f8f7fa", "an omitted token resolves to the boxel light default");
+			await click("[data-test-mode=\"toggle-dark\"]");
+			assert.strictEqual(computedProperty(scopeSelector, "--canvas"), "#1e1b26", "an omitted token resolves to the boxel dark default in the dark preview");
+			assert.strictEqual(computedProperty(scopeSelector, "--background"), DARK_MODE_VARS.background, "the theme still overrides the tokens it defines");
+		});
+		(0, import_qunit.test)("dark mode variables apply when the ambient scheme is dark", async function(assert) {
+			await visitOperatorMode({ stacks: [[{
+				id: themeCardId,
+				format: "isolated"
+			}]] });
+			let cardSelector = `[data-test-card="${themeCardId}"]`;
+			assert.strictEqual(computedProperty(cardSelector, "--background"), ROOT_CSS_VARS.background, "root variables apply under the default light scheme");
+			document.documentElement.setAttribute("data-theme", "dark");
+			try {
+				assert.strictEqual(computedProperty(cardSelector, "--background"), DARK_MODE_VARS.background, "dark mode variables apply when the ambient scheme is dark");
+				assert.strictEqual(computedProperty(cardSelector, "--primary"), DARK_MODE_VARS.primary, "dark mode --primary applies when the ambient scheme is dark");
+			} finally {
+				document.documentElement.removeAttribute("data-theme");
+			}
+			assert.strictEqual(computedProperty(cardSelector, "--background"), ROOT_CSS_VARS.background, "root variables apply again when the ambient scheme returns to light");
+		});
+		(0, import_qunit.test)("applies pasted custom CSS variables", async function(assert) {
+			assert.expect(11);
+			await visitOperatorMode({ stacks: [[{
+				id: softPopCardId,
+				format: "isolated"
+			}]] });
+			let deferred = new Deferred();
+			this.onSave((url, json) => {
+				if (typeof json === "string") throw new Error("expected JSON save data");
+				assert.strictEqual(url.href, softPopCardId);
+				assert.strictEqual(json?.data.attributes?.rootVariables?.primary, "oklch(0.5106 0.2301 276.9656)", "primary root var is saved");
+				assert.strictEqual(json?.data.attributes?.rootVariables?.fontSans, "DM Sans, sans-serif", "font-sans root var is saved");
+				assert.strictEqual(json?.data.attributes?.darkModeVariables?.foreground, "oklch(1.0000 0 0)", "dark foreground is saved");
+				deferred.fulfill();
+			});
+			assert.dom("[data-test-dashboard-empty-state]").exists("a theme-less isolated view shows the empty state");
+			await click("[data-test-edit-button]");
+			await fillIn("[data-test-custom-css-variables]", SOFT_POP_VARS);
+			await click("[data-test-import-theme]");
+			assert.dom("[data-test-root-vars] [data-test-field=\"secondary\"] [data-test-color-text-input]").hasValue("oklch(0.7038 0.1230 182.5025)");
+			assert.dom("[data-test-css-field]").containsText("--background: oklch(0.9789 0.0082 121.6272);");
+			assert.dom("[data-test-css-field]").containsText("--background: oklch(0 0 0);");
+			assert.dom("[data-test-root-vars] [data-test-field=\"accent\"] [data-test-color-text-input]").hasValue("oklch(0.7686 0.1647 70.0804)");
+			await click("[data-test-mode=\"toggle-dark\"]");
+			assert.dom("[data-test-dark-vars] [data-test-field=\"muted\"] [data-test-color-text-input]").hasValue("oklch(0.3211 0 0)");
+			assert.dom("[data-test-dark-vars] [data-test-field=\"accent\"] [data-test-color-text-input]").hasValue("oklch(0.8790 0.1534 91.6054)");
+		});
+		(0, import_qunit.test)("updates CSS variables when editing textarea values", async function(assert) {
+			assert.expect(16);
+			await visitOperatorMode({ stacks: [[{
+				id: themeCardId,
+				format: "isolated"
+			}]] });
+			let deferred = new Deferred();
+			this.onSave((url, json) => {
+				if (typeof json === "string") throw new Error("expected JSON save data");
+				assert.strictEqual(url.href, themeCardId);
+				const rootVars = json?.data.attributes?.rootVariables;
+				const darkVars = json?.data.attributes?.darkModeVariables;
+				assert.strictEqual(rootVars?.background, "#455A68", "background value is updated");
+				assert.strictEqual(rootVars?.foreground, "#FCD2A7", "foreground value is updated");
+				assert.strictEqual(rootVars?.card, "#1a1f3a", "card value did not change");
+				assert.strictEqual(darkVars?.background, "#050813", "dark background did not change");
+				assert.strictEqual(darkVars?.card, "black", "dark card background is updated");
+				deferred.fulfill();
+			});
+			assert.dom("[data-test-root-vars] [data-test-var-value=\"--background\"]").containsText("#0a0f23");
+			assert.dom("[data-test-root-vars] [data-test-var-value=\"--card\"]").containsText("#1a1f3a");
+			await click("[data-test-mode=\"toggle-dark\"]");
+			assert.dom("[data-test-dark-vars] [data-test-var-value=\"--background\"]").containsText("#050813");
+			await click("[data-test-mode=\"toggle-light\"]");
+			await click("[data-test-edit-button]");
+			await fillIn("[data-test-custom-css-variables]", ":root { --background: #455A68; --foreground: #FCD2A7; } .dark { --card: black; }");
+			await click("[data-test-import-theme]");
+			assert.dom("[data-test-root-vars] [data-test-field=\"background\"] [data-test-color-text-input]").hasValue("#455A68", "value is updated");
+			assert.dom("[data-test-root-vars] [data-test-field=\"card\"] [data-test-color-text-input]").hasValue("#1a1f3a", "existing value remains");
+			assert.dom("[data-test-css-field]").containsText("--background: #455A68;");
+			assert.dom("[data-test-css-field]").containsText("--card: #1a1f3a;");
+			assert.dom("[data-test-root-vars] [data-test-field=\"foreground\"] [data-test-color-text-input]").hasValue("#FCD2A7", "foreground is updated in edit mode");
+			await click("[data-test-mode=\"toggle-dark\"]");
+			assert.dom("[data-test-dark-vars] [data-test-field=\"card\"] [data-test-color-text-input]").hasValue("black", "dark card background is updated in edit mode");
+			assert.dom("[data-test-dark-vars] [data-test-field=\"background\"] [data-test-color-text-input]").hasValue("#050813", "existing value remains in edit mode");
+		});
+		(0, import_qunit.test)("recomputes cssVariables after editing fields", async function(assert) {
+			assert.expect(4);
+			const NEW_FOREGROUND = "#a6f4ca";
+			await visitOperatorMode({ stacks: [[{
+				id: themeCardId,
+				format: "edit"
+			}]] });
+			let deferred = new Deferred();
+			this.onSave((url, json) => {
+				if (typeof json === "string") throw new Error("expected JSON save data");
+				assert.strictEqual(url.href, themeCardId);
+				const rootVars = json?.data.attributes?.rootVariables;
+				assert.strictEqual(rootVars?.background, "#0a0f23", "background value did not change");
+				assert.strictEqual(rootVars?.foreground, NEW_FOREGROUND, "foreground value is updated");
+				deferred.fulfill();
+			});
+			await fillIn("[data-test-root-vars] [data-test-field=\"foreground\"] [data-test-boxel-input]", NEW_FOREGROUND);
+			await visitOperatorMode({ stacks: [[{
+				id: themeCardId,
+				format: "isolated"
+			}]] });
+			assert.dom("[data-test-css-field]").containsText(` --foreground: ${NEW_FOREGROUND}; `);
+		});
+		(0, import_qunit.test)("can reset all css variables", async function(assert) {
+			await visitOperatorMode({ stacks: [[{
+				id: themeCardId,
+				format: "isolated"
+			}]] });
+			assert.dom("[data-test-var-value=\"--accent\"] [data-test-swatch=\"#ffb347\"]").exists();
+			assert.dom("[data-test-reset]").doesNotExist("the reset button is an edit mode tool");
+			await click("[data-test-edit-button]");
+			await click("[data-test-reset]");
+			assert.dom("[data-test-css-field]").containsText("/* No CSS defined */");
+			assert.dom("[data-test-custom-css-variables]").exists("the import editor remains available in edit mode");
+			await visitOperatorMode({ stacks: [[{
+				id: themeCardId,
+				format: "isolated"
+			}]] });
+			assert.dom("[data-test-dashboard-empty-state]").exists("a reset theme shows the isolated empty state");
+			assert.dom("[data-test-root-vars]").doesNotExist("the visualizer is hidden once the theme is reset");
+			assert.dom("[data-test-custom-css-variables]").doesNotExist("the importer is an edit mode tool");
+		});
+	});
+	(0, import_qunit.module)("themed-checkbox", () => {
+		(0, import_qunit.test)("dark gold theme applies correct checkbox styles", async function(assert) {
+			let cardId = `${testRealmURL}checkbox-dark-gold`;
+			await visitOperatorMode({ stacks: [[{
+				id: cardId,
+				format: "isolated"
+			}]] });
+			assert.dom(`[data-test-card="${cardId}"]`).hasClass("boxel-card-container--themed");
+			let container = document.querySelector(`[data-test-card="${cardId}"]`);
+			assert.ok(container, "themed card container is present");
+			assert.dom(`[data-test-card="${cardId}"]`).hasAttribute("data-boxel-theme-scope");
+			assert.strictEqual(computedProperty(`[data-test-card="${cardId}"]`, "--primary"), "#ffd700", "computed --primary matches the theme");
+			assert.strictEqual(computedProperty(`[data-test-card="${cardId}"]`, "--border"), "#3a4073", "computed --border matches the theme");
+			assert.strictEqual(computedProperty(`[data-test-card="${cardId}"]`, "--background"), "#1a1f3a", "computed --background matches the theme");
+			assert.strictEqual(computedProperty(`[data-test-card="${cardId}"]`, "--theme-body-font-size"), "18px", "computed --theme-body-font-size matches the theme");
+			assert.dom("[data-test-checkbox-checked]").exists("checked checkbox renders");
+			assert.dom("[data-test-checkbox-unchecked]").exists("unchecked checkbox renders");
+			let checkedEl = document.querySelector("[data-test-checkbox-checked]");
+			let uncheckedEl = document.querySelector("[data-test-checkbox-unchecked]");
+			assert.strictEqual(src_default.getComputedStyle(checkedEl).getPropertyValue("background-color"), hexToRgb("#ffd700"), "checked checkbox background-color matches --primary");
+			assert.strictEqual(src_default.getComputedStyle(uncheckedEl).getPropertyValue("border-color"), hexToRgb("#3a4073"), "unchecked checkbox border-color matches --border");
+			assert.strictEqual(src_default.getComputedStyle(uncheckedEl).getPropertyValue("background-color"), hexToRgb("#1a1f3a"), "unchecked checkbox background-color matches --background");
+			assert.strictEqual(src_default.getComputedStyle(checkedEl).getPropertyValue("width"), "18px", "checkbox size matches --theme-body-font-size");
+		});
+		(0, import_qunit.test)("ocean blue theme applies correct checkbox styles", async function(assert) {
+			let cardId = `${testRealmURL}checkbox-ocean-blue`;
+			await visitOperatorMode({ stacks: [[{
+				id: cardId,
+				format: "isolated"
+			}]] });
+			assert.dom(`[data-test-card="${cardId}"]`).hasClass("boxel-card-container--themed");
+			let container = document.querySelector(`[data-test-card="${cardId}"]`);
+			assert.ok(container, "themed card container is present");
+			assert.dom(`[data-test-card="${cardId}"]`).hasAttribute("data-boxel-theme-scope");
+			assert.strictEqual(computedProperty(`[data-test-card="${cardId}"]`, "--primary"), "#0058A3", "computed --primary matches the theme");
+			assert.strictEqual(computedProperty(`[data-test-card="${cardId}"]`, "--border"), "#003B6F", "computed --border matches the theme");
+			assert.strictEqual(computedProperty(`[data-test-card="${cardId}"]`, "--background"), "#E3F2FD", "computed --background matches the theme");
+			assert.strictEqual(computedProperty(`[data-test-card="${cardId}"]`, "--theme-body-font-size"), "14px", "computed --theme-body-font-size matches the theme");
+			assert.dom("[data-test-checkbox-checked]").exists("checked checkbox renders");
+			assert.dom("[data-test-checkbox-unchecked]").exists("unchecked checkbox renders");
+			let checkedEl = document.querySelector("[data-test-checkbox-checked]");
+			let uncheckedEl = document.querySelector("[data-test-checkbox-unchecked]");
+			assert.strictEqual(src_default.getComputedStyle(checkedEl).getPropertyValue("background-color"), hexToRgb("#0058A3"), "checked checkbox background-color matches --primary");
+			assert.strictEqual(src_default.getComputedStyle(uncheckedEl).getPropertyValue("border-color"), hexToRgb("#003B6F"), "unchecked checkbox border-color matches --border");
+			assert.strictEqual(src_default.getComputedStyle(uncheckedEl).getPropertyValue("background-color"), hexToRgb("#E3F2FD"), "unchecked checkbox background-color matches --background");
+			assert.strictEqual(src_default.getComputedStyle(checkedEl).getPropertyValue("width"), "14px", "checkbox size matches --theme-body-font-size");
+		});
+		(0, import_qunit.test)("forest green theme applies correct checkbox styles", async function(assert) {
+			let cardId = `${testRealmURL}checkbox-forest-green`;
+			await visitOperatorMode({ stacks: [[{
+				id: cardId,
+				format: "isolated"
+			}]] });
+			assert.dom(`[data-test-card="${cardId}"]`).hasClass("boxel-card-container--themed");
+			let container = document.querySelector(`[data-test-card="${cardId}"]`);
+			assert.ok(container, "themed card container is present");
+			assert.dom(`[data-test-card="${cardId}"]`).hasAttribute("data-boxel-theme-scope");
+			assert.strictEqual(computedProperty(`[data-test-card="${cardId}"]`, "--primary"), "#2e7d32", "computed --primary matches the theme");
+			assert.strictEqual(computedProperty(`[data-test-card="${cardId}"]`, "--border"), "#1b5e20", "computed --border matches the theme");
+			assert.strictEqual(computedProperty(`[data-test-card="${cardId}"]`, "--background"), "#E8F5E9", "computed --background matches the theme");
+			assert.strictEqual(computedProperty(`[data-test-card="${cardId}"]`, "--theme-body-font-size"), "16px", "computed --theme-body-font-size matches the theme");
+			assert.dom("[data-test-checkbox-checked]").exists("checked checkbox renders");
+			assert.dom("[data-test-checkbox-unchecked]").exists("unchecked checkbox renders");
+			let checkedEl = document.querySelector("[data-test-checkbox-checked]");
+			let uncheckedEl = document.querySelector("[data-test-checkbox-unchecked]");
+			assert.strictEqual(src_default.getComputedStyle(checkedEl).getPropertyValue("background-color"), hexToRgb("#2e7d32"), "checked checkbox background-color matches --primary");
+			assert.strictEqual(src_default.getComputedStyle(uncheckedEl).getPropertyValue("border-color"), hexToRgb("#1b5e20"), "unchecked checkbox border-color matches --border");
+			assert.strictEqual(src_default.getComputedStyle(uncheckedEl).getPropertyValue("background-color"), hexToRgb("#E8F5E9"), "unchecked checkbox background-color matches --background");
+			assert.strictEqual(src_default.getComputedStyle(checkedEl).getPropertyValue("width"), "16px", "checkbox size matches --theme-body-font-size");
+		});
+		(0, import_qunit.test)("cards sharing a theme emit identical scoped stylesheets with only one active copy", async function(assert) {
+			let cardId = `${testRealmURL}checkbox-forest-green`;
+			let otherCardId = `${testRealmURL}checkbox-forest-green-2`;
+			await visitOperatorMode({ stacks: [[{
+				id: cardId,
+				format: "isolated"
+			}], [{
+				id: otherCardId,
+				format: "isolated"
+			}]] });
+			let themeStyleText = (id) => {
+				return [...document.querySelector(`[data-test-card="${id}"]`).querySelectorAll("style")].map((style) => style.textContent?.trim()).filter((text) => text?.includes("data-boxel-theme-scope")).join("");
+			};
+			let scope = document.querySelector(`[data-test-card="${cardId}"]`).getAttribute("data-boxel-theme-scope");
+			let otherScope = document.querySelector(`[data-test-card="${otherCardId}"]`).getAttribute("data-boxel-theme-scope");
+			assert.ok(scope, "theme scope is set");
+			assert.true(scope.startsWith(`${testRealmURL}forest-green-theme-`), "scope derives from the theme card id plus a content hash");
+			assert.strictEqual(scope, otherScope, "cards sharing a theme share a scope");
+			assert.ok(themeStyleText(cardId).length, "theme stylesheet is rendered within the card container");
+			assert.strictEqual(themeStyleText(cardId), themeStyleText(otherCardId), "cards sharing a theme emit byte-identical theme stylesheets");
+			let copies = () => [...document.querySelectorAll("style")].filter((style) => style.textContent?.includes(`data-boxel-theme-scope="${testRealmURL}forest-green-theme-`));
+			assert.strictEqual(copies().length, 2, "each card emits its own copy");
+			assert.strictEqual(copies().filter((style) => !style.disabled).length, 1, "exactly one copy participates in style matching");
+			assert.strictEqual(computedProperty(`[data-test-card="${cardId}"]`, "--primary"), "#2e7d32", "the first card resolves the theme variables");
+			assert.strictEqual(computedProperty(`[data-test-card="${otherCardId}"]`, "--primary"), "#2e7d32", "the second card resolves the theme variables");
+			copies().find((style) => !style.disabled).remove();
+			await new Promise((resolve) => setTimeout(resolve, 0));
+			assert.strictEqual(copies().length, 1, "one copy remains");
+			assert.false(copies()[0].disabled, "the surviving copy is re-enabled");
+			assert.strictEqual(computedProperty(`[data-test-card="${otherCardId}"]`, "--primary"), "#2e7d32", "the theme stays applied after the active copy is removed");
+		});
+	});
+});
+//#endregion