feat: release design system engine, studio and component contracts

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

@@ -0,0 +1,57 @@
+import { test, expect } from "bun:test";
+import {
+  resolveThemeConfig,
+  renderThemeCss,
+  renderActiveThemeCss,
+  DEFAULT_THEMES,
+} from "../src/theme.ts";
+import type { DesignSystem } from "../../design-system/src/index.ts";
+
+const system: DesignSystem = {
+  schemaVersion: 1,
+  id: "square",
+  name: "Square",
+  version: "1.0.0",
+  defaultMode: "dark",
+  tokens: {
+    radius: { type: "dimension", value: "0", legacy: "radius-sm" },
+    primary: { type: "color", value: "#123456", legacy: "color-primary" },
+  },
+  modes: { light: {}, dark: { primary: { type: "color", value: "#abcdef" } } },
+};
+
+test("no opt-in preserves existing defaults and accent behavior", () => {
+  const theme = resolveThemeConfig();
+  expect(theme.themes.dark?.["radius-sm"]).toBe(DEFAULT_THEMES.dark?.["radius-sm"]);
+  expect(theme.defaultAccent).toBe("blue");
+});
+test("opt-in maps existing component variables in SSR and switchable CSS", () => {
+  const theme = resolveThemeConfig({ designSystem: { system } });
+  expect(theme.default).toBe("dark");
+  expect(theme.defaultAccent).toBeUndefined();
+  expect(theme.themes.light?.["color-primary"]).toBe("#123456");
+  expect(theme.themes.dark?.["color-primary"]).toBe("#abcdef");
+  expect(renderActiveThemeCss(theme, "dark")).toContain("--wrn-radius-sm:0;");
+  expect(renderActiveThemeCss(theme, "dark")).toContain("--wrn-color-primary:#abcdef;");
+  expect(renderThemeCss(theme)).toContain('[data-theme="light"]');
+});
+test("explicit app tokens, default, cookies and accent preferences remain authoritative", () => {
+  const theme = resolveThemeConfig(
+    {
+      designSystem: { system },
+      default: "light",
+      themes: { dark: { "radius-sm": "8px" } },
+      accent: { default: "rose" },
+    },
+    { defaults: { path: "/product" } },
+  );
+  expect(theme.default).toBe("light");
+  expect(theme.themes.dark?.["radius-sm"]).toBe("8px");
+  expect(theme.defaultAccent).toBe("rose");
+  expect(theme.themeCookie?.path).toBe("/product");
+});
+test("invalid imported systems fail before emitting stylesheet content", () => {
+  expect(() =>
+    resolveThemeConfig({ designSystem: { system: { ...system, schemaVersion: 99 } as never } }),
+  ).toThrow("WRN-DS-VERSION");
+});