ds-shadcn: emit DTCG aliases for shadcn's own var() references, and put the template back

apps/studio/src/templates/packs.ts

@@ -181,10 +181,8 @@ export const TEMPLATE_PACKS: Record<string, TemplatePack> = {
 export const TEMPLATE_NAMES = [
   // Polyxd's own, plainest first.
   "mono", "civic", "sketch", "wireframe", "editorial", "pastel", "health", "finance", "glass", "terminal", "brutalist", "neon",
-  // Modelled on published design systems, for a team whose product already uses one. shadcn is
-  // not among them yet: five of its tokens carry shadcn's own `var(--surface)` CSS instead of an
-  // alias, so a copy would land in a workspace with broken aliases showing.
-  "material3", "carbon", "fluent", "antd", "bootstrap", "mantine", "radix", "polaris", "primer", "spectrum", "chakra", "govuk",
+  // Modelled on published design systems, for a team whose product already uses one.
+  "material3", "carbon", "fluent", "shadcn", "antd", "bootstrap", "mantine", "radix", "polaris", "primer", "spectrum", "chakra", "govuk",
 ] as const;
 export type TemplateName = (typeof TEMPLATE_NAMES)[number];
 

apps/studio/test/templates.test.ts

@@ -55,8 +55,8 @@ test("a template's summary has a character line, swatches from its own tokens, a
   assert.ok(sketch.font, "a display face");
   assert.match(sketch.radius, /px$/);
   const all = allTemplates();
-  // Blank, Polyxd's twelve, and the twelve modelled on published design systems.
-  assert.equal(all.length, 25);
+  // Blank, Polyxd's twelve, and the thirteen modelled on published design systems.
+  assert.equal(all.length, 26);
   assert.equal(all[0].name, BLANK);
   assert.ok(all.every((t) => t.character && t.swatches.length >= 8), all.filter((t) => !t.character || t.swatches.length < 8).map((t) => t.name).join(", "));
   // A pack modelled on someone else's system says so, and still carries a full set of swatches.

packages/ds-shadcn/scripts/generate.ts

@@ -66,9 +66,13 @@ function systemTier(shadcn: Vars, tw: Vars, mode: "light" | "dark"): Json {
   const color: Json = { $type: "color" };
   for (const [name, value] of Object.entries(shadcn)) {
     if (name === "--radius") continue;
-    // The docs theme points its chart ramp at Tailwind blues; resolve those to values.
-    const resolved = /^var\((--color-[a-z]+-\d+)\)$/.exec(value)?.[1];
-    color[name.slice(2)] = { $value: resolved ? tw[resolved] : value };
+    const ref = /^var\((--[a-z0-9-]+)\)$/.exec(value)?.[1];
+    // The docs theme points its chart ramp at Tailwind blues; resolve those to values. Where it
+    // points one of its own variables at another (--code: var(--surface)), that is an alias, and
+    // DTCG has a way to say so — leaving the CSS in would read as a broken alias to a consumer.
+    const aliases = ref && ref !== "--radius" && ref in shadcn;
+    const resolved = aliases ? `{shadcn.${ref!.slice(2)}}` : ref && ref in tw ? tw[ref] : value;
+    color[name.slice(2)] = { $value: resolved };
   }
   return {
     $description: `shadcn/ui default theme, ${mode} (${PINNED["shadcn/ui"]}), variable names unchanged.`,

packages/ds-shadcn/tokens/system.dark.json

@@ -36,10 +36,10 @@
       "$value": "oklch(42.4% 0.199 265.638)"
     },
     "code": {
-      "$value": "var(--surface)"
+      "$value": "{shadcn.surface}"
     },
     "code-foreground": {
-      "$value": "var(--surface-foreground)"
+      "$value": "{shadcn.surface-foreground}"
     },
     "code-highlight": {
       "$value": "oklch(0.27 0 0)"

packages/ds-shadcn/tokens/system.light.json

@@ -36,10 +36,10 @@
       "$value": "oklch(42.4% 0.199 265.638)"
     },
     "code": {
-      "$value": "var(--surface)"
+      "$value": "{shadcn.surface}"
     },
     "code-foreground": {
-      "$value": "var(--surface-foreground)"
+      "$value": "{shadcn.surface-foreground}"
     },
     "code-highlight": {
       "$value": "oklch(0.96 0 0)"
@@ -120,7 +120,7 @@
       "$value": "oklch(0.98 0 0)"
     },
     "surface-foreground": {
-      "$value": "var(--foreground)"
+      "$value": "{shadcn.foreground}"
     }
   },
   "tailwind": {