diff --git a/apps/studio/src/templates/packs.ts b/apps/studio/src/templates/packs.ts index aa984b8..1a61b37 100644 --- a/apps/studio/src/templates/packs.ts +++ b/apps/studio/src/templates/packs.ts @@ -181,10 +181,8 @@ export const TEMPLATE_PACKS: Record = { 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]; diff --git a/apps/studio/test/templates.test.ts b/apps/studio/test/templates.test.ts index f3dd3cd..73715c8 100644 --- a/apps/studio/test/templates.test.ts +++ b/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. diff --git a/packages/ds-shadcn/scripts/generate.ts b/packages/ds-shadcn/scripts/generate.ts index e854288..b0c092e 100644 --- a/packages/ds-shadcn/scripts/generate.ts +++ b/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.`, diff --git a/packages/ds-shadcn/tokens/system.dark.json b/packages/ds-shadcn/tokens/system.dark.json index 99a8ac3..09150f8 100644 --- a/packages/ds-shadcn/tokens/system.dark.json +++ b/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)" diff --git a/packages/ds-shadcn/tokens/system.light.json b/packages/ds-shadcn/tokens/system.light.json index dd71ff7..12e74e0 100644 --- a/packages/ds-shadcn/tokens/system.light.json +++ b/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": {