@nxds/core 0.9.1 → 0.10.0

package/README.md

@@ -173,7 +173,7 @@ at build time.
 ### Generate CSS
 
 ```bash
-pnpm tokens:tailwind      # From the repo root: build core and generate @nxds/tailwind CSS
+pnpm tokens:tailwind      # From the repo root: generate the token scales, build core and generate @nxds/tailwind CSS
 ```
 
 ### Output Files
@@ -197,4 +197,4 @@ When multi-platform support is needed, tools like Style Dictionary can be added
 - **Color** is engine-owned: edit the derivation in `src/lib/surface-ladder.ts` / `src/lib/derive-theme.ts` (color primitives live in `tokens/primitives/color.json`).
 - **Non-color** (spacing, radius, shadow, borderwidth, motion, typography): edit the DTCG token files in `tokens/` (`$value`, `$type`, `$description`).
 
-Then run `make tokens` (or `pnpm tokens:tailwind`) to regenerate CSS; the output is copied into the `@nxds/tailwind` package. A new or renamed token file also needs an import in `src/catalogue/token-files.ts`; `pnpm test:unit` fails until the manifest matches the files on disk.
+Then run `make tokens` (or `pnpm tokens:tailwind`) to regenerate the spacing steps and palette names in `src/lib/token-scales.generated.ts` and the CSS; the CSS is copied into the `@nxds/tailwind` package. A new or renamed token file also needs an import in `src/catalogue/token-files.ts`; `pnpm test:unit` fails until the manifest matches the files on disk.

package/dist/runtime/catalogue.cjs

@@ -2531,10 +2531,33 @@ var color_default = {
   }
 };
 
+// src/lib/token-scales.generated.ts
+var PRIMITIVE_PALETTE_NAMES = [
+  "green",
+  "emerald",
+  "teal",
+  "cyan",
+  "sky",
+  "indigo",
+  "violet",
+  "purple",
+  "fuchsia",
+  "pink",
+  "slate",
+  "rose",
+  "lime",
+  "yellow",
+  "blue",
+  "gray",
+  "zinc",
+  "neutral",
+  "stone",
+  "red",
+  "orange",
+  "amber"
+];
+
 // src/lib/primitive-palette.ts
-var PRIMITIVE_PALETTE_NAMES = Object.keys(color_default).filter(
-  (name) => name !== "white" && name !== "black"
-);
 var rampCache = /* @__PURE__ */ new Map();
 function getPaletteRamp(palette) {
   if (!PRIMITIVE_PALETTE_NAMES.includes(palette)) {
@@ -3197,6 +3220,15 @@ function formatShadowStyle(tokenPath, value, primitiveMap) {
   const isInset = tokenPath.length === 1 && tokenPath[0] === "inner";
   return formatShadowComposite(value, primitiveMap, isInset);
 }
+function inlineVariables(value, values) {
+  return value.replace(/var\((--[\w-]+)\)/g, (reference, name) => {
+    const literal = values.get(name);
+    if (literal === void 0) {
+      throw new Error(`inlineVariables: ${reference} has no value`);
+    }
+    return literal;
+  });
+}
 var TYPOGRAPHY_PROPERTIES = [
   ["fontFamily", "font-family"],
   ["fontSize", "font-size"],
@@ -11237,21 +11269,46 @@ function typographyStyleEntry(lookup) {
     };
   };
 }
-function shadowStyleEntry(lookup) {
-  return ({ leaf }) => {
+function shadowLayerSets(layers, lookup) {
+  const sets = /* @__PURE__ */ new Map();
+  for (const { preset, mode, leaf } of layers) {
+    const key = `${preset}/${mode}`;
+    const set = sets.get(key) ?? { preset, mode, values: /* @__PURE__ */ new Map() };
+    set.values.set(
+      primitiveName("shadow", leaf.path),
+      resolveValue(leaf.value, lookup, leaf.type, leaf.path)
+    );
+    sets.set(key, set);
+  }
+  return [...sets.values()];
+}
+function shadowStyleTokens(layers, lookup) {
+  const sets = shadowLayerSets(layers, lookup);
+  return styleLeaves("shadow", SHADOW_STYLES_FILE).map(({ leaf }) => {
     const key = pathToCssVarPrefixed(leaf.path, "shadow");
-    const property = `--${key}`;
+    const name = `--nx-${key}`;
+    const composite = formatShadowStyle(leaf.path, leaf.value, lookup);
     return {
-      name: `--nx-${key}`,
-      aliases: [cssVariable(property)],
-      declarations: [
-        {
-          property,
-          value: formatShadowStyle(leaf.path, leaf.value, lookup)
-        }
-      ]
+      name,
+      family: "shadow",
+      group: leafGroup("shadow", leaf.path),
+      type: leaf.type,
+      description: leaf.description ?? null,
+      aliases: [cssVariable(`--${key}`)],
+      control: PRESET_CONTROLS.shadow ?? null,
+      variants: sets.map(({ preset, mode, values }) => ({
+        mode,
+        preset,
+        source: { file: SHADOW_STYLES_FILE, path: leaf.path },
+        appearance: null,
+        authoredValue: structuredClone(leaf.value),
+        declarations: [
+          { property: name, value: inlineVariables(composite, values) }
+        ],
+        references: []
+      }))
     };
-  };
+  });
 }
 function styleLeaves(family, file) {
   return fileLeaves(family, file, SINGLE_SOURCE).filter(
@@ -11313,8 +11370,13 @@ function runtimeColorTokens() {
 function createTokenCatalogue() {
   const primitives = PRIMITIVE_FAMILIES.flatMap(primitiveLeaves);
   const lookup = primitiveLookup(primitives);
+  const shadowLayers = primitives.filter(({ family }) => family === "shadow");
   return [
-    ...authoredTokens(primitives, lookup, primitiveEntry(lookup)),
+    ...authoredTokens(
+      primitives.filter((leaf) => leaf.family !== "shadow"),
+      lookup,
+      primitiveEntry(lookup)
+    ),
     ...runtimeColorTokens(),
     ...authoredTokens(spacingLeaves(), lookup, spacingEntry),
     ...authoredTokens(
@@ -11332,11 +11394,7 @@ function createTokenCatalogue() {
       lookup,
       typographyStyleEntry(lookup)
     ),
-    ...authoredTokens(
-      styleLeaves("shadow", SHADOW_STYLES_FILE),
-      lookup,
-      shadowStyleEntry(lookup)
-    )
+    ...shadowStyleTokens(shadowLayers, lookup)
   ];
 }
 // Annotate the CommonJS export names for ESM import in node: