feat: release design system engine, studio and component contracts

packages/styles/test/design-system-cascade.test.ts

@@ -0,0 +1,47 @@
+import { test, expect } from "bun:test";
+import { readFileSync } from "node:fs";
+import { renderComponent } from "../../test/src/index.ts";
+import { renderDocument } from "../../ssr/src/index.ts";
+import { renderThemeCss, resolveThemeConfig, DEFAULT_THEMES } from "../src/theme.ts";
+import type { DesignSystem } from "../../design-system/src/index.ts";
+import { Window } from "happy-dom";
+
+test("legacy Button inherits opted-in tokens after SSR style extraction and mode switching", async () => {
+  const system: DesignSystem = {
+    schemaVersion: 1,
+    id: "square",
+    name: "Square",
+    version: "1",
+    tokens: { radius: { type: "dimension", value: "0", legacy: "radius-sm" } },
+    modes: { light: {}, dark: {} },
+    defaultMode: "dark",
+  };
+  const source = readFileSync(new URL("../../ui/components/button.wrn", import.meta.url), "utf8");
+  const body = await renderComponent(source, { label: "Save", variant: "outline" });
+  const baseline = renderThemeCss(resolveThemeConfig());
+  const css = renderThemeCss(
+    resolveThemeConfig({ designSystem: { system }, themes: { dark: { "radius-sm": "7px" } } }),
+  );
+  const extraHead = `<style id="design-theme">${css}</style>`;
+  const html = renderDocument({
+    meta: {},
+    body,
+    extraHead,
+    htmlAttrs: ' data-theme="dark"',
+    styleNonce: "design-test",
+  });
+  expect(html.indexOf(extraHead)).toBeLessThan(html.indexOf("data-wrnexus-style"));
+  expect(html).toContain('nonce="design-test"');
+  const window = new Window();
+  try {
+    window.document.write(html);
+    const button = window.document.querySelector("button.wrn-btn")!;
+    expect(window.getComputedStyle(button).borderRadius).toBe("7px");
+    window.document.documentElement.dataset.theme = "light";
+    expect(window.getComputedStyle(button).borderRadius).toBe("0px");
+    window.document.querySelector("#design-theme")!.textContent = baseline;
+    expect(window.getComputedStyle(button).borderRadius).toBe(DEFAULT_THEMES.light!["radius-sm"]!);
+  } finally {
+    await window.happyDOM.close();
+  }
+});