@nxds/core 0.9.1 → 0.11.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

@@ -437,6 +437,13 @@ var CHART_PALETTE_REFERENCES = [
   { palette: "rose", light: "600", dark: "200" },
   { palette: "indigo", light: "600", dark: "200" }
 ];
+var SYNTAX_PALETTE_REFERENCES = {
+  keyword: CHART_PALETTE_REFERENCES[3],
+  string: CHART_PALETTE_REFERENCES[1],
+  function: CHART_PALETTE_REFERENCES[4],
+  type: CHART_PALETTE_REFERENCES[0],
+  constant: CHART_PALETTE_REFERENCES[2]
+};
 
 // src/lib/apca-pairs.ts
 var COLOR_FAMILIES = [
@@ -451,6 +458,8 @@ var CATEGORICAL_INDICES = CHART_PALETTE_REFERENCES.map(
   (_, index) => index + 1
 );
 var CHART_STAGGER_LC = 4.5;
+var DIFF_SURFACES = ["success-subtle", "error-subtle"];
+var CODE_SURFACES = ["container", "container-hover", ...DIFF_SURFACES];
 var FOCUS_SURFACES = [
   "background",
   "container",
@@ -510,11 +519,23 @@ var APCA_PAIRS = [
     ink(`${family}-subtle-foreground`, `${family}-subtle-active`, "ui")
   ]),
   ...CATEGORICAL_INDICES.flatMap(
-    (index) => ["container", "background"].map((bg) => ({
+    (index) => ["container", "container-hover", "background"].map((bg) => ({
       ...ink(`chart-categorical-${index}`, bg, "ui"),
       offset: (index - 1) * CHART_STAGGER_LC
     }))
   ),
+  ...CODE_SURFACES.flatMap(
+    (bg) => Object.keys(SYNTAX_PALETTE_REFERENCES).map(
+      (role) => ink(`syntax-${role}`, bg, "ui")
+    )
+  ),
+  // codeBlockTheme also colours code with the text tokens, which already read
+  // on container and container-hover.
+  ...DIFF_SURFACES.flatMap((bg) => [
+    text("foreground", bg, "ui"),
+    text("muted-foreground", bg, "ui"),
+    text("muted-foreground-subtle", bg, "incidental")
+  ]),
   // Focus is the primary accent (components.md § Focus States), so it shares
   // one solved color with primary-subtle-foreground.
   ...FOCUS_SURFACES.flatMap((surface) => [
@@ -2531,10 +2552,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)) {
@@ -2788,6 +2832,14 @@ function deriveChart(mode) {
     ])
   );
 }
+function deriveSyntax(mode) {
+  return Object.fromEntries(
+    Object.entries(SYNTAX_PALETTE_REFERENCES).map(([role, reference]) => [
+      `--nx-color-syntax-${role}`,
+      getPaletteShade(reference.palette, reference[mode])
+    ])
+  );
+}
 function deriveAlpha(surfaceTone, mode, profile) {
   const tone = SURFACE_TONE[surfaceTone];
   const dark = mode === "dark";
@@ -2903,6 +2955,7 @@ function deriveThemeMode(input, mode) {
     ...deriveSecondary(mode),
     ...deriveStatus(mode),
     ...deriveChart(mode),
+    ...deriveSyntax(mode),
     ...deriveAlpha(surfaceTone, mode, profile),
     "--nx-color-focus-error": getPaletteShade(
       STATUS_PALETTE_FAMILIES.error,
@@ -3034,6 +3087,13 @@ var CHART_TOKEN_NAMES = [
   "chart-categorical-4",
   "chart-categorical-5"
 ];
+var SYNTAX_TOKEN_NAMES = [
+  "syntax-keyword",
+  "syntax-string",
+  "syntax-function",
+  "syntax-type",
+  "syntax-constant"
+];
 var FOCUS_TOKEN_NAMES = ["focus-default", "focus-error"];
 var ALPHA_TOKEN_NAMES = [
   "background-hover-alpha",
@@ -3052,6 +3112,7 @@ var SEMANTIC_TOKEN_REGISTRY = [
   ...metas("brand", BRAND_TOKEN_NAMES),
   ...metas("status", STATUS_TOKEN_NAMES),
   ...metas("chart", CHART_TOKEN_NAMES),
+  ...metas("syntax", SYNTAX_TOKEN_NAMES),
   ...metas("focus", FOCUS_TOKEN_NAMES),
   ...metas("alpha", ALPHA_TOKEN_NAMES)
 ];
@@ -3197,6 +3258,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"],
@@ -3413,6 +3483,11 @@ var NEUTRAL_DESCRIPTIONS = {
   "chart-categorical-3": "Third chart series, on container or background.",
   "chart-categorical-4": "Fourth chart series, on container or background.",
   "chart-categorical-5": "Fifth chart series, on container or background.",
+  "syntax-keyword": "Keywords in code, such as const and return, on CodeBlock surfaces.",
+  "syntax-string": "Strings in code, on CodeBlock surfaces.",
+  "syntax-function": "Function and attribute names in code, on CodeBlock surfaces.",
+  "syntax-type": "Type, class and tag names in code, on CodeBlock surfaces.",
+  "syntax-constant": "Numbers and constants in code, on CodeBlock surfaces.",
   "focus-default": "Focus ring of every interactive control, on any surface.",
   "focus-error": "Focus ring of an invalid control.",
   "background-hover-alpha": "Translucent hover fill for controls that sit on an image or an unknown surface.",
@@ -11237,21 +11312,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 +11413,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 +11437,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: