@nxds/core 0.9.1 → 0.11.0

package/dist/runtime/catalogue.d.cts

@@ -15,8 +15,8 @@ type DeepReadonly<T> = T extends object ? {
 type CatalogueFamily = 'borderwidth' | 'breakpoint' | 'color' | 'motion' | 'radius' | 'shadow' | 'spacing' | 'typography' | 'z-index';
 /**
  * Canonical identity: an identifier in the `--nx-*` custom property scheme.
- * Most tokens declare it in the generated CSS. Typography and shadow styles
- * and breakpoints do not; they declare a theme property or a utility instead.
+ * Most tokens declare it in the generated CSS. Typography styles and
+ * breakpoints do not; they declare a utility or a theme property instead.
  */
 type CatalogueTokenName = `--nx-${string}`;
 /** Another name that maps onto the canonical token. */
@@ -52,7 +52,7 @@ interface CatalogueDeclaration {
 interface CatalogueVariant {
     /**
      * The theme mode the value applies in (`light` / `dark` for a runtime
-     * colour or a shadow layer), or `null` when it applies in both.
+     * colour or a shadow), or `null` when it applies in both.
      */
     readonly mode: Mode | null;
     /**
@@ -68,8 +68,8 @@ interface CatalogueVariant {
     readonly authoredValue: TokenValue | null;
     /**
      * What the generated CSS declares: one custom property for a scalar or a
-     * shadow style (`--nx-spacing-4`, or `--breakpoint-md` and `--shadow-sm` for
-     * a token declared only under `@theme`), or the `@utility` body for a
+     * shadow style (`--nx-spacing-4`, `--nx-shadow-sm`, or `--breakpoint-md`
+     * for a token declared only under `@theme`), or the `@utility` body for a
      * typography style.
      */
     readonly declarations: readonly CatalogueDeclaration[];
@@ -106,6 +106,7 @@ interface CatalogueToken {
 /**
  * Every nxds token, identified by its `--nx-*` name: primitives, runtime
  * colours, spacing, z-index, breakpoints, and typography and shadow styles.
+ * Shadow layer primitives only compose the shadow styles.
  * Runtime colours are computed from `DEFAULT_NXDS_APPEARANCE` in explicit
  * light and dark modes; each variant records the appearance it used.
  */

package/dist/runtime/catalogue.d.ts

@@ -15,8 +15,8 @@ type DeepReadonly<T> = T extends object ? {
 type CatalogueFamily = 'borderwidth' | 'breakpoint' | 'color' | 'motion' | 'radius' | 'shadow' | 'spacing' | 'typography' | 'z-index';
 /**
  * Canonical identity: an identifier in the `--nx-*` custom property scheme.
- * Most tokens declare it in the generated CSS. Typography and shadow styles
- * and breakpoints do not; they declare a theme property or a utility instead.
+ * Most tokens declare it in the generated CSS. Typography styles and
+ * breakpoints do not; they declare a utility or a theme property instead.
  */
 type CatalogueTokenName = `--nx-${string}`;
 /** Another name that maps onto the canonical token. */
@@ -52,7 +52,7 @@ interface CatalogueDeclaration {
 interface CatalogueVariant {
     /**
      * The theme mode the value applies in (`light` / `dark` for a runtime
-     * colour or a shadow layer), or `null` when it applies in both.
+     * colour or a shadow), or `null` when it applies in both.
      */
     readonly mode: Mode | null;
     /**
@@ -68,8 +68,8 @@ interface CatalogueVariant {
     readonly authoredValue: TokenValue | null;
     /**
      * What the generated CSS declares: one custom property for a scalar or a
-     * shadow style (`--nx-spacing-4`, or `--breakpoint-md` and `--shadow-sm` for
-     * a token declared only under `@theme`), or the `@utility` body for a
+     * shadow style (`--nx-spacing-4`, `--nx-shadow-sm`, or `--breakpoint-md`
+     * for a token declared only under `@theme`), or the `@utility` body for a
      * typography style.
      */
     readonly declarations: readonly CatalogueDeclaration[];
@@ -106,6 +106,7 @@ interface CatalogueToken {
 /**
  * Every nxds token, identified by its `--nx-*` name: primitives, runtime
  * colours, spacing, z-index, breakpoints, and typography and shadow styles.
+ * Shadow layer primitives only compose the shadow styles.
  * Runtime colours are computed from `DEFAULT_NXDS_APPEARANCE` in explicit
  * light and dark modes; each variant records the appearance it used.
  */

package/dist/runtime/catalogue.js

@@ -408,6 +408,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 = [
@@ -422,6 +429,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",
@@ -481,11 +490,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) => [
@@ -2502,10 +2523,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)) {
@@ -2759,6 +2803,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";
@@ -2874,6 +2926,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,
@@ -3005,6 +3058,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",
@@ -3023,6 +3083,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)
 ];
@@ -3168,6 +3229,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"],
@@ -3384,6 +3454,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.",
@@ -11208,21 +11283,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(
@@ -11284,8 +11384,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(
@@ -11303,11 +11408,7 @@ function createTokenCatalogue() {
       lookup,
       typographyStyleEntry(lookup)
     ),
-    ...authoredTokens(
-      styleLeaves("shadow", SHADOW_STYLES_FILE),
-      lookup,
-      shadowStyleEntry(lookup)
-    )
+    ...shadowStyleTokens(shadowLayers, lookup)
   ];
 }
 export {