@nxds/core 0.13.0 → 0.14.0

package/dist/runtime/catalogue.js

@@ -1,3 +1,178 @@
+// 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"
+];
+var PAGE_WIDTHS_REM = {
+  "3xs": 16,
+  "2xs": 18,
+  xs: 20,
+  sm: 24,
+  md: 28,
+  lg: 32,
+  xl: 36,
+  "2xl": 42,
+  "3xl": 48,
+  "4xl": 56,
+  "5xl": 64,
+  "6xl": 72,
+  "7xl": 80
+};
+
+// src/token-source/ui-scale.ts
+var UI_SCALES = {
+  small: { spacing: 0.9, text: 12 / 14, icon: 14 / 16 },
+  default: { spacing: 1, text: 1, icon: 1 },
+  large: { spacing: 1.1, text: 16 / 14, icon: 18 / 16 },
+  larger: { spacing: 1.25, text: 18 / 14, icon: 20 / 16 }
+};
+var NON_DEFAULT_UI_SCALES = Object.keys(UI_SCALES).filter((scale) => scale !== "default");
+var uiScaleSelector = (scale) => `[data-ui-scale='${scale}']`;
+var TEXT_SIZES = [12, 13, 14, 15, 16];
+var DEFAULT_TEXT_SIZE = 14;
+function textSizeAttr(scale, textSize) {
+  const sizeAttr = `[data-text-size='${textSize}']`;
+  return scale === "default" ? sizeAttr : `${uiScaleSelector(scale)}${sizeAttr}`;
+}
+function textSizeSelector(scale, textSize) {
+  if (textSize !== DEFAULT_TEXT_SIZE) return textSizeAttr(scale, textSize);
+  return scale === "default" ? null : uiScaleSelector(scale);
+}
+var FULL_RADIUS = "9999px";
+var MIN_TEXT_PX = 8;
+var px = (value) => Number.parseFloat(value);
+var evenPx = (value) => 2 * Math.round(value / 2);
+function scaleLength(value, factor) {
+  const scaled = value * factor;
+  return scaled >= 16 ? evenPx(scaled) : Math.round(scaled);
+}
+var textFactor = (scale, textSize) => UI_SCALES[scale].text * (textSize / DEFAULT_TEXT_SIZE);
+function scaleText(size, scale, textSize = DEFAULT_TEXT_SIZE) {
+  return Math.max(MIN_TEXT_PX, Math.round(size * textFactor(scale, textSize)));
+}
+function scaleLineHeight(lineHeight, scale, textSize) {
+  return Math.max(
+    MIN_TEXT_PX,
+    evenPx(lineHeight * textFactor(scale, textSize))
+  );
+}
+function above(previous) {
+  const next = previous + 1;
+  return next >= 16 && next % 2 === 1 ? next + 1 : next;
+}
+var stepOf = (cssName) => Number(cssName.replace("spacing-", "").replace("_", "."));
+function scaleMode(tokens, factor) {
+  const scaled = new Map(
+    tokens.filter(({ step }) => !step).map(({ cssName, value }) => [
+      cssName,
+      value === FULL_RADIUS ? value : `${scaleLength(px(value), factor)}px`
+    ])
+  );
+  const steps = [...scaled].filter(([cssName]) => /^spacing-\d/.test(cssName)).sort(([a], [b]) => stepOf(a) - stepOf(b));
+  let previous = -1;
+  for (const [cssName, value] of steps) {
+    const length = px(value) > previous ? px(value) : above(previous);
+    scaled.set(cssName, `${length}px`);
+    previous = length;
+  }
+  return tokens.map(({ cssName, step }) => {
+    const value = scaled.get(step ?? cssName);
+    if (value === void 0) {
+      throw new Error(
+        `scaleMode: ${cssName} references ${step}, which its mode lacks`
+      );
+    }
+    return { cssName, value };
+  });
+}
+function widthTokens(widths, scale) {
+  const factor = UI_SCALES[scale].spacing;
+  return [
+    { cssName: "ui-scale", value: String(factor) },
+    ...Object.entries(widths).map(([name, rem]) => ({
+      cssName: `container-${name}`,
+      value: `${Number((rem * factor).toFixed(4))}rem`
+    }))
+  ];
+}
+var groupValues = (group) => Object.fromEntries(
+  Object.entries(group).map(([name, token2]) => [name, token2.$value.value])
+);
+function uiScaleBase(typography, icon) {
+  return {
+    sizes: groupValues(typography.size),
+    lineHeights: groupValues(typography["line-height"]),
+    codeSize: typography.code.size.$value.value,
+    glyphs: groupValues(icon.glyph),
+    widths: PAGE_WIDTHS_REM
+  };
+}
+function typeTokens({ sizes, lineHeights, codeSize }, scale, textSize) {
+  return [
+    ...Object.entries(sizes).map(([name, size]) => ({
+      cssName: `typography-size-${name}`,
+      value: `${scaleText(size, scale, textSize)}px`
+    })),
+    ...Object.entries(lineHeights).map(([name, lineHeight]) => ({
+      cssName: `typography-line-height-${name}`,
+      value: `${scaleLineHeight(lineHeight, scale, textSize)}px`
+    })),
+    {
+      cssName: "typography-code-size",
+      value: `${scaleText(codeSize, scale, textSize)}px`
+    }
+  ];
+}
+function scaleBlocks(base) {
+  const { glyphs, widths } = base;
+  const root = { selectors: [":root"], tokens: widthTokens(widths, "default") };
+  return [
+    root,
+    ...NON_DEFAULT_UI_SCALES.map((scale) => {
+      const { icon } = UI_SCALES[scale];
+      const tokens = [
+        ...typeTokens(base, scale, DEFAULT_TEXT_SIZE),
+        ...Object.entries(glyphs).map(([name, glyph]) => ({
+          cssName: `icon-glyph-${name}`,
+          value: `${evenPx(glyph * icon)}px`
+        })),
+        ...widthTokens(widths, scale)
+      ];
+      return { selectors: [uiScaleSelector(scale)], tokens };
+    })
+  ];
+}
+function textSizeBlocks(base) {
+  return Object.keys(UI_SCALES).flatMap(
+    (scale) => TEXT_SIZES.filter((textSize) => textSize !== DEFAULT_TEXT_SIZE).map(
+      (textSize) => ({
+        selectors: [textSizeAttr(scale, textSize)],
+        tokens: typeTokens(base, scale, textSize)
+      })
+    )
+  );
+}
+
 // src/lib/contrast.ts
 import { APCAcontrast as APCAcontrast2, sRGBtoY as sRGBtoY2 } from "apca-w3";
 import { clampChroma as clampChroma4 } from "culori";
@@ -719,495 +894,151 @@ function constrainColors(map, mode, contrast) {
   return map;
 }
 
-// tokens/primitives/typography/typography-default.json
-var typography_default_default = {
-  family: {
-    "font-sans": {
-      $value: "ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif",
-      $type: "fontFamily",
-      $extensions: {
-        "nx-font-source": {
-          type: "system"
-        }
-      }
+// src/lib/appearance-model.ts
+var DEFAULT_BRAND_COLOR = "#0a0a0a";
+var BASE_TONE_OPTIONS = [
+  { value: "stone", label: "Stone", color: "#747271" },
+  { value: "neutral", label: "Neutral", color: "#737373" },
+  { value: "zinc", label: "Zinc", color: "#717175" },
+  { value: "slate", label: "Slate", color: "#717376" },
+  { value: "gray", label: "Gray", color: "#707274" }
+];
+var BASE_TONE_SEEDS = {
+  stone: {
+    light: { background: "#fafaf9", foreground: "#1c1917" },
+    dark: { background: "#1c1917", foreground: "#fafaf9" }
+  },
+  neutral: {
+    light: { background: "#fafafa", foreground: "#171717" },
+    dark: { background: "#171717", foreground: "#fafafa" }
+  },
+  zinc: {
+    light: { background: "#fafafa", foreground: "#09090b" },
+    dark: { background: "#09090b", foreground: "#fafafa" }
+  },
+  slate: {
+    light: { background: "#f8fafc", foreground: "#0f172a" },
+    dark: { background: "#0f172a", foreground: "#f8fafc" }
+  },
+  gray: {
+    light: { background: "#f9fafb", foreground: "#111827" },
+    dark: { background: "#111827", foreground: "#f9fafb" }
+  }
+};
+var UI_SCALE_OPTIONS = [
+  { value: "small", label: "Small" },
+  { value: "default", label: "Default" },
+  { value: "large", label: "Large" },
+  { value: "larger", label: "Larger" }
+];
+var TEXT_SIZE_OPTIONS = TEXT_SIZES.map((value) => ({ value, label: `${value}px` }));
+var DENSITY_OPTIONS = [
+  { value: "tight", label: "Tight" },
+  { value: "compact", label: "Compact" },
+  { value: "default", label: "Default" },
+  { value: "comfortable", label: "Comfortable" },
+  { value: "relaxed", label: "Relaxed" },
+  { value: "spacious", label: "Spacious" }
+];
+var CORNER_OPTIONS = [
+  { value: "square", label: "Square" },
+  { value: "subtle", label: "Subtle" },
+  { value: "smooth", label: "Smooth" },
+  { value: "round", label: "Round" },
+  { value: "extra-round", label: "Extra Round" }
+];
+var ELEVATION_OPTIONS = [
+  { value: "flat", label: "Flat" },
+  { value: "quiet", label: "Quiet" },
+  { value: "soft", label: "Soft" },
+  { value: "standard", label: "Standard" },
+  { value: "strong", label: "Strong" }
+];
+var STROKE_OPTIONS = [
+  { value: "fine", label: "Fine" },
+  { value: "normal", label: "Normal" },
+  { value: "strong", label: "Strong" }
+];
+var DEFAULT_NXDS_APPEARANCE = {
+  mode: "light",
+  brandColor: DEFAULT_BRAND_COLOR,
+  surfaceTone: "zinc",
+  lightContrast: 50,
+  darkContrast: 50,
+  uiScale: "default",
+  textSize: 14,
+  density: "default",
+  corners: "subtle",
+  elevation: "quiet",
+  stroke: "normal",
+  prefs: {
+    uiFont: '-apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif',
+    headingFont: null,
+    codeFont: 'ui-monospace, "SF Mono", Menlo, monospace',
+    codeFontSize: 12,
+    reduceMotion: false,
+    pointerCursors: false,
+    fontSmoothing: false
+  }
+};
+var SURFACE_TONES = new Set(
+  BASE_TONE_OPTIONS.map((option) => option.value)
+);
+var SCALES = new Set(
+  UI_SCALE_OPTIONS.map((option) => option.value)
+);
+var TEXT_SIZE_VALUES = new Set(TEXT_SIZES);
+var DENSITIES = new Set(
+  DENSITY_OPTIONS.map((option) => option.value)
+);
+var CORNERS = new Set(
+  CORNER_OPTIONS.map((option) => option.value)
+);
+var ELEVATIONS = new Set(
+  ELEVATION_OPTIONS.map((option) => option.value)
+);
+var STROKES = new Set(
+  STROKE_OPTIONS.map((option) => option.value)
+);
+function createNxdsThemeContract(state) {
+  const tone = BASE_TONE_SEEDS[state.surfaceTone];
+  return {
+    surfaceTone: state.surfaceTone,
+    contrast: { light: state.lightContrast, dark: state.darkContrast },
+    light: { accent: state.brandColor, ...tone.light },
+    dark: { accent: state.brandColor, ...tone.dark }
+  };
+}
+
+// src/lib/derive-theme.ts
+import { clampChroma as clampChroma5 } from "culori";
+
+// tokens/primitives/color.json
+var color_default = {
+  green: {
+    "50": {
+      $value: "#f1f7ef",
+      $type: "color"
     },
-    "font-heading": {
-      $value: "ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif",
-      $type: "fontFamily",
-      $extensions: {
-        "nx-font-source": {
-          type: "system"
-        }
-      }
+    "100": {
+      $value: "#e6f3e3",
+      $type: "color"
     },
-    "font-serif": {
-      $value: "Georgia",
-      $type: "fontFamily",
-      $extensions: {
-        "nx-font-source": {
-          type: "system"
-        }
-      }
+    "200": {
+      $value: "#cce2c7",
+      $type: "color"
     },
-    "font-mono": {
-      $value: "ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace",
-      $type: "fontFamily",
-      $extensions: {
-        "nx-font-source": {
-          type: "system"
-        }
-      }
-    }
-  },
-  size: {
-    xxs: {
-      $value: {
-        value: 11,
-        unit: "px"
-      },
-      $type: "dimension"
+    "300": {
+      $value: "#a6c99e",
+      $type: "color"
     },
-    xs: {
-      $value: {
-        value: 12,
-        unit: "px"
-      },
-      $type: "dimension"
+    "400": {
+      $value: "#7fb175",
+      $type: "color"
     },
-    sm: {
-      $value: {
-        value: 14,
-        unit: "px"
-      },
-      $type: "dimension"
-    },
-    base: {
-      $value: {
-        value: 16,
-        unit: "px"
-      },
-      $type: "dimension"
-    },
-    lg: {
-      $value: {
-        value: 18,
-        unit: "px"
-      },
-      $type: "dimension"
-    },
-    xl: {
-      $value: {
-        value: 20,
-        unit: "px"
-      },
-      $type: "dimension"
-    },
-    "2xl": {
-      $value: {
-        value: 24,
-        unit: "px"
-      },
-      $type: "dimension"
-    },
-    "3xl": {
-      $value: {
-        value: 30,
-        unit: "px"
-      },
-      $type: "dimension"
-    },
-    "4xl": {
-      $value: {
-        value: 36,
-        unit: "px"
-      },
-      $type: "dimension"
-    },
-    "5xl": {
-      $value: {
-        value: 48,
-        unit: "px"
-      },
-      $type: "dimension"
-    },
-    "6xl": {
-      $value: {
-        value: 60,
-        unit: "px"
-      },
-      $type: "dimension"
-    },
-    "7xl": {
-      $value: {
-        value: 72,
-        unit: "px"
-      },
-      $type: "dimension"
-    },
-    "8xl": {
-      $value: {
-        value: 96,
-        unit: "px"
-      },
-      $type: "dimension"
-    },
-    "9xl": {
-      $value: {
-        value: 128,
-        unit: "px"
-      },
-      $type: "dimension"
-    },
-    code: {
-      $value: {
-        value: 12,
-        unit: "px"
-      },
-      $type: "dimension"
-    }
-  },
-  weight: {
-    thin: {
-      $value: 100,
-      $type: "fontWeight"
-    },
-    extralight: {
-      $value: 200,
-      $type: "fontWeight"
-    },
-    light: {
-      $value: 300,
-      $type: "fontWeight"
-    },
-    normal: {
-      $value: 400,
-      $type: "fontWeight"
-    },
-    medium: {
-      $value: 500,
-      $type: "fontWeight"
-    },
-    semibold: {
-      $value: 600,
-      $type: "fontWeight"
-    },
-    bold: {
-      $value: 700,
-      $type: "fontWeight"
-    },
-    extrabold: {
-      $value: 800,
-      $type: "fontWeight"
-    },
-    black: {
-      $value: 900,
-      $type: "fontWeight"
-    }
-  },
-  "line-height": {
-    xxs: {
-      $value: {
-        value: 12,
-        unit: "px"
-      },
-      $type: "dimension"
-    },
-    xs: {
-      $value: {
-        value: 16,
-        unit: "px"
-      },
-      $type: "dimension"
-    },
-    sm: {
-      $value: {
-        value: 20,
-        unit: "px"
-      },
-      $type: "dimension"
-    },
-    base: {
-      $value: {
-        value: 24,
-        unit: "px"
-      },
-      $type: "dimension"
-    },
-    lg: {
-      $value: {
-        value: 28,
-        unit: "px"
-      },
-      $type: "dimension"
-    },
-    xl: {
-      $value: {
-        value: 28,
-        unit: "px"
-      },
-      $type: "dimension"
-    },
-    "2xl": {
-      $value: {
-        value: 32,
-        unit: "px"
-      },
-      $type: "dimension"
-    },
-    "3xl": {
-      $value: {
-        value: 36,
-        unit: "px"
-      },
-      $type: "dimension"
-    },
-    "4xl": {
-      $value: {
-        value: 48,
-        unit: "px"
-      },
-      $type: "dimension"
-    },
-    "5xl": {
-      $value: {
-        value: 48,
-        unit: "px"
-      },
-      $type: "dimension"
-    },
-    "6xl": {
-      $value: {
-        value: 60,
-        unit: "px"
-      },
-      $type: "dimension"
-    },
-    "7xl": {
-      $value: {
-        value: 72,
-        unit: "px"
-      },
-      $type: "dimension"
-    },
-    "8xl": {
-      $value: {
-        value: 96,
-        unit: "px"
-      },
-      $type: "dimension"
-    },
-    "9xl": {
-      $value: {
-        value: 128,
-        unit: "px"
-      },
-      $type: "dimension"
-    }
-  },
-  letterspacing: {
-    tighter: {
-      $value: {
-        value: -0.800000011920929,
-        unit: "px"
-      },
-      $type: "dimension"
-    },
-    tight: {
-      $value: {
-        value: -0.4000000059604645,
-        unit: "px"
-      },
-      $type: "dimension"
-    },
-    normal: {
-      $value: {
-        value: 0,
-        unit: "px"
-      },
-      $type: "dimension"
-    },
-    wide: {
-      $value: {
-        value: 0.4000000059604645,
-        unit: "px"
-      },
-      $type: "dimension"
-    },
-    wider: {
-      $value: {
-        value: 0.800000011920929,
-        unit: "px"
-      },
-      $type: "dimension"
-    },
-    widest: {
-      $value: {
-        value: 1.600000023841858,
-        unit: "px"
-      },
-      $type: "dimension"
-    }
-  }
-};
-
-// src/lib/typography-scale.ts
-var TYPOGRAPHY_BASE_PX = 14;
-function formatPx(value) {
-  return `${Number(value.toFixed(4))}px`;
-}
-var CODE_SIZE = "code";
-function typographyScale(uiPx, codePx) {
-  const scale = uiPx / TYPOGRAPHY_BASE_PX;
-  return new Map([
-    ...Object.entries(typography_default_default.size).map(
-      ([name, token2]) => [
-        `--nx-typography-size-${name}`,
-        formatPx(name === CODE_SIZE ? codePx : token2.$value.value * scale)
-      ]
-    ),
-    ...Object.entries(typography_default_default["line-height"]).map(
-      ([name, token2]) => [
-        `--nx-typography-line-height-${name}`,
-        formatPx(token2.$value.value * scale)
-      ]
-    )
-  ]);
-}
-var isCodeSize = (path) => path[0] === "size" && path[1] === CODE_SIZE;
-
-// src/lib/appearance-model.ts
-var DEFAULT_BRAND_COLOR = "#0a0a0a";
-var BASE_TONE_OPTIONS = [
-  { value: "stone", label: "Stone", color: "#747271" },
-  { value: "neutral", label: "Neutral", color: "#737373" },
-  { value: "zinc", label: "Zinc", color: "#717175" },
-  { value: "slate", label: "Slate", color: "#717376" },
-  { value: "gray", label: "Gray", color: "#707274" }
-];
-var BASE_TONE_SEEDS = {
-  stone: {
-    light: { background: "#fafaf9", foreground: "#1c1917" },
-    dark: { background: "#1c1917", foreground: "#fafaf9" }
-  },
-  neutral: {
-    light: { background: "#fafafa", foreground: "#171717" },
-    dark: { background: "#171717", foreground: "#fafafa" }
-  },
-  zinc: {
-    light: { background: "#fafafa", foreground: "#09090b" },
-    dark: { background: "#09090b", foreground: "#fafafa" }
-  },
-  slate: {
-    light: { background: "#f8fafc", foreground: "#0f172a" },
-    dark: { background: "#0f172a", foreground: "#f8fafc" }
-  },
-  gray: {
-    light: { background: "#f9fafb", foreground: "#111827" },
-    dark: { background: "#111827", foreground: "#f9fafb" }
-  }
-};
-var DENSITY_OPTIONS = [
-  { value: "tight", label: "Tight" },
-  { value: "compact", label: "Compact" },
-  { value: "default", label: "Default" },
-  { value: "comfortable", label: "Comfortable" },
-  { value: "relaxed", label: "Relaxed" },
-  { value: "spacious", label: "Spacious" }
-];
-var CORNER_OPTIONS = [
-  { value: "square", label: "Square" },
-  { value: "subtle", label: "Subtle" },
-  { value: "smooth", label: "Smooth" },
-  { value: "round", label: "Round" },
-  { value: "extra-round", label: "Extra Round" }
-];
-var ELEVATION_OPTIONS = [
-  { value: "flat", label: "Flat" },
-  { value: "quiet", label: "Quiet" },
-  { value: "soft", label: "Soft" },
-  { value: "standard", label: "Standard" },
-  { value: "strong", label: "Strong" }
-];
-var STROKE_OPTIONS = [
-  { value: "fine", label: "Fine" },
-  { value: "normal", label: "Normal" },
-  { value: "strong", label: "Strong" }
-];
-var DEFAULT_NXDS_APPEARANCE = {
-  mode: "light",
-  brandColor: DEFAULT_BRAND_COLOR,
-  surfaceTone: "zinc",
-  lightContrast: 50,
-  darkContrast: 50,
-  density: "default",
-  corners: "subtle",
-  elevation: "quiet",
-  stroke: "normal",
-  prefs: {
-    uiFont: '-apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif',
-    headingFont: null,
-    codeFont: 'ui-monospace, "SF Mono", Menlo, monospace',
-    uiFontSize: TYPOGRAPHY_BASE_PX,
-    codeFontSize: 12,
-    reduceMotion: false,
-    pointerCursors: false,
-    fontSmoothing: false
-  }
-};
-var SURFACE_TONES = new Set(
-  BASE_TONE_OPTIONS.map((option) => option.value)
-);
-var DENSITIES = new Set(
-  DENSITY_OPTIONS.map((option) => option.value)
-);
-var CORNERS = new Set(
-  CORNER_OPTIONS.map((option) => option.value)
-);
-var ELEVATIONS = new Set(
-  ELEVATION_OPTIONS.map((option) => option.value)
-);
-var STROKES = new Set(
-  STROKE_OPTIONS.map((option) => option.value)
-);
-function createNxdsThemeContract(state) {
-  const tone = BASE_TONE_SEEDS[state.surfaceTone];
-  return {
-    surfaceTone: state.surfaceTone,
-    contrast: { light: state.lightContrast, dark: state.darkContrast },
-    light: { accent: state.brandColor, ...tone.light },
-    dark: { accent: state.brandColor, ...tone.dark }
-  };
-}
-
-// src/lib/derive-theme.ts
-import { clampChroma as clampChroma5 } from "culori";
-
-// tokens/primitives/color.json
-var color_default = {
-  green: {
-    "50": {
-      $value: "#f1f7ef",
-      $type: "color"
-    },
-    "100": {
-      $value: "#e6f3e3",
-      $type: "color"
-    },
-    "200": {
-      $value: "#cce2c7",
-      $type: "color"
-    },
-    "300": {
-      $value: "#a6c99e",
-      $type: "color"
-    },
-    "400": {
-      $value: "#7fb175",
-      $type: "color"
-    },
-    "500": {
-      $value: "#569947",
-      $type: "color"
+    "500": {
+      $value: "#569947",
+      $type: "color"
     },
     "600": {
       $value: "#3f7932",
@@ -2558,32 +2389,6 @@ 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 rampCache = /* @__PURE__ */ new Map();
 function getPaletteRamp(palette) {
@@ -3310,6 +3115,22 @@ function spacingTokenKind(tokenPath) {
     `spacingTokenKind: unknown top-level key "${root}" in path [${tokenPath.join(".")}] \u2014 extend SPACING_NUMERIC_ROOTS / SPACING_ROLE_ROOTS`
   );
 }
+function referencedStep(token2, fileTokens) {
+  if (!isReference(token2.value)) return void 0;
+  const reference = extractRefPath(token2.value);
+  const step = fileTokens.find(
+    ({ path }) => path.join(".") === reference && spacingTokenKind(path) === "numeric"
+  );
+  if (!step || isReference(step.value)) {
+    throw new Error(
+      `referencedStep: ${token2.path.join(".")} references {${reference}}, which is not a spacing step with a value`
+    );
+  }
+  return step;
+}
+function spacingValue(token2, fileTokens) {
+  return (referencedStep(token2, fileTokens) ?? token2).value;
+}
 var FAMILY_TO_UTILITY = {
   "padding-x": { prefix: "px", properties: ["padding-left", "padding-right"] },
   "padding-y": { prefix: "py", properties: ["padding-top", "padding-bottom"] },
@@ -3394,6 +3215,32 @@ function durationUtility(key) {
     ]
   };
 }
+function iconSizeUtility(key) {
+  const value = `var(--nx-icon-${key})`;
+  return {
+    name: `size-icon-${key}`,
+    declarations: [
+      { property: "width", value },
+      { property: "height", value },
+      { property: "--nx-icon-size", value }
+    ]
+  };
+}
+var ICON_STROKE_UTILITY = {
+  name: "icon-stroke",
+  selectors: ["&:is(svg)", "&:is(svg) *", "& svg", "& svg *"],
+  declarations: [
+    {
+      property: "stroke-width",
+      value: "calc(var(--nx-icon-stroke-base) + var(--nx-icon-size, var(--nx-icon-glyph-default)) * var(--nx-icon-stroke-ratio))"
+    },
+    { property: "vector-effect", value: "non-scaling-stroke" }
+  ]
+};
+function iconUtility(path) {
+  if (path[0] === "stroke") return ICON_STROKE_UTILITY;
+  return iconSizeUtility(path.join("-"));
+}
 var DEFAULT_TRANSITION = {
   duration: "default",
   ease: "enter"
@@ -3614,6 +3461,67 @@ var borderwidth_strong_default = {
   }
 };
 
+// tokens/primitives/icon.json
+var icon_default = {
+  glyph: {
+    xs: {
+      $value: {
+        value: 12,
+        unit: "px"
+      },
+      $type: "dimension",
+      $description: "Small icon in a compact part, such as Kbd. It follows the UI scale and is the same at every density."
+    },
+    sm: {
+      $value: {
+        value: 14,
+        unit: "px"
+      },
+      $type: "dimension",
+      $description: "Small icon, such as a Badge icon or the small Switch. It follows the UI scale and is the same at every density."
+    },
+    default: {
+      $value: {
+        value: 16,
+        unit: "px"
+      },
+      $type: "dimension",
+      $description: "Icon in a control, at every control size, and the Checkbox, Radio and Switch size. It follows the UI scale and is the same at every density."
+    },
+    lg: {
+      $value: {
+        value: 24,
+        unit: "px"
+      },
+      $type: "dimension",
+      $description: "Large standalone icon, such as in an EmptyState. It follows the UI scale and is the same at every density."
+    },
+    xl: {
+      $value: {
+        value: 32,
+        unit: "px"
+      },
+      $type: "dimension",
+      $description: "Extra large standalone icon, such as in a vertical Attachment. It follows the UI scale and is the same at every density."
+    }
+  },
+  stroke: {
+    base: {
+      $value: {
+        value: 0.5,
+        unit: "px"
+      },
+      $type: "dimension",
+      $description: "Line a stroked icon, such as Lucide, Tabler or HugeIcons, draws before it grows with the icon. The line is this plus the icon size times the stroke ratio: 1.5px at 16px. Filled icons, such as Phosphor and Remix, keep their own line."
+    },
+    ratio: {
+      $value: 0.0625,
+      $type: "number",
+      $description: "Line a stroked icon adds for each pixel of its size. 0.0625 adds 1px of line for every 16px of icon."
+    }
+  }
+};
+
 // tokens/primitives/motion/motion-snappy.json
 var motion_snappy_default = {
   duration: {
@@ -8683,14 +8591,154 @@ var shadow_strong_light_default = {
       },
       y: {
         $value: {
-          value: 3,
+          value: 3,
+          unit: "px"
+        },
+        $type: "dimension"
+      },
+      blur: {
+        $value: {
+          value: 6,
+          unit: "px"
+        },
+        $type: "dimension"
+      },
+      spread: {
+        $value: {
+          value: -1,
+          unit: "px"
+        },
+        $type: "dimension"
+      },
+      color: {
+        $value: "#0000001f",
+        $type: "color"
+      }
+    }
+  },
+  md: {
+    "layer-1": {
+      x: {
+        $value: {
+          value: 0,
+          unit: "px"
+        },
+        $type: "dimension"
+      },
+      y: {
+        $value: {
+          value: 1,
+          unit: "px"
+        },
+        $type: "dimension"
+      },
+      blur: {
+        $value: {
+          value: 3,
+          unit: "px"
+        },
+        $type: "dimension"
+      },
+      spread: {
+        $value: {
+          value: 0,
+          unit: "px"
+        },
+        $type: "dimension"
+      },
+      color: {
+        $value: "#0000001f",
+        $type: "color"
+      }
+    },
+    "layer-2": {
+      x: {
+        $value: {
+          value: 0,
+          unit: "px"
+        },
+        $type: "dimension"
+      },
+      y: {
+        $value: {
+          value: 4,
+          unit: "px"
+        },
+        $type: "dimension"
+      },
+      blur: {
+        $value: {
+          value: 8,
+          unit: "px"
+        },
+        $type: "dimension"
+      },
+      spread: {
+        $value: {
+          value: -1,
+          unit: "px"
+        },
+        $type: "dimension"
+      },
+      color: {
+        $value: "#0000001f",
+        $type: "color"
+      }
+    }
+  },
+  lg: {
+    "layer-1": {
+      x: {
+        $value: {
+          value: 0,
+          unit: "px"
+        },
+        $type: "dimension"
+      },
+      y: {
+        $value: {
+          value: 1,
+          unit: "px"
+        },
+        $type: "dimension"
+      },
+      blur: {
+        $value: {
+          value: 3,
+          unit: "px"
+        },
+        $type: "dimension"
+      },
+      spread: {
+        $value: {
+          value: 0,
+          unit: "px"
+        },
+        $type: "dimension"
+      },
+      color: {
+        $value: "#00000026",
+        $type: "color"
+      }
+    },
+    "layer-2": {
+      x: {
+        $value: {
+          value: 0,
+          unit: "px"
+        },
+        $type: "dimension"
+      },
+      y: {
+        $value: {
+          value: 8,
           unit: "px"
         },
         $type: "dimension"
       },
       blur: {
         $value: {
-          value: 6,
+          value: 16,
           unit: "px"
         },
         $type: "dimension"
@@ -8703,12 +8751,12 @@ var shadow_strong_light_default = {
         $type: "dimension"
       },
       color: {
-        $value: "#0000001f",
+        $value: "#00000026",
         $type: "color"
       }
     }
   },
-  md: {
+  xl: {
     "layer-1": {
       x: {
         $value: {
@@ -8739,7 +8787,7 @@ var shadow_strong_light_default = {
         $type: "dimension"
       },
       color: {
-        $value: "#0000001f",
+        $value: "#0000002e",
         $type: "color"
       }
     },
@@ -8753,14 +8801,14 @@ var shadow_strong_light_default = {
       },
       y: {
         $value: {
-          value: 4,
+          value: 16,
           unit: "px"
         },
         $type: "dimension"
       },
       blur: {
         $value: {
-          value: 8,
+          value: 24,
           unit: "px"
         },
         $type: "dimension"
@@ -8773,12 +8821,12 @@ var shadow_strong_light_default = {
         $type: "dimension"
       },
       color: {
-        $value: "#0000001f",
+        $value: "#0000002e",
         $type: "color"
       }
     }
   },
-  lg: {
+  "2xl": {
     "layer-1": {
       x: {
         $value: {
@@ -8809,11 +8857,13 @@ var shadow_strong_light_default = {
         $type: "dimension"
       },
       color: {
-        $value: "#00000026",
+        $value: "#0000004d",
         $type: "color"
       }
-    },
-    "layer-2": {
+    }
+  },
+  inner: {
+    "layer-1": {
       x: {
         $value: {
           value: 0,
@@ -8823,171 +8873,363 @@ var shadow_strong_light_default = {
       },
       y: {
         $value: {
-          value: 8,
+          value: 2,
           unit: "px"
         },
         $type: "dimension"
       },
       blur: {
         $value: {
-          value: 16,
+          value: 6,
           unit: "px"
         },
         $type: "dimension"
       },
       spread: {
         $value: {
-          value: -1,
+          value: 0,
           unit: "px"
         },
         $type: "dimension"
       },
       color: {
-        $value: "#00000026",
+        $value: "#00000014",
         $type: "color"
       }
     }
+  }
+};
+
+// tokens/primitives/typography/typography-default.json
+var typography_default_default = {
+  family: {
+    "font-sans": {
+      $value: "ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif",
+      $type: "fontFamily",
+      $extensions: {
+        "nx-font-source": {
+          type: "system"
+        }
+      }
+    },
+    "font-heading": {
+      $value: "ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif",
+      $type: "fontFamily",
+      $extensions: {
+        "nx-font-source": {
+          type: "system"
+        }
+      }
+    },
+    "font-serif": {
+      $value: "Georgia",
+      $type: "fontFamily",
+      $extensions: {
+        "nx-font-source": {
+          type: "system"
+        }
+      }
+    },
+    "font-mono": {
+      $value: "ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace",
+      $type: "fontFamily",
+      $extensions: {
+        "nx-font-source": {
+          type: "system"
+        }
+      }
+    }
   },
-  xl: {
-    "layer-1": {
-      x: {
-        $value: {
-          value: 0,
-          unit: "px"
-        },
-        $type: "dimension"
+  size: {
+    xxs: {
+      $value: {
+        value: 11,
+        unit: "px"
+      },
+      $type: "dimension"
+    },
+    xs: {
+      $value: {
+        value: 12,
+        unit: "px"
+      },
+      $type: "dimension"
+    },
+    sm: {
+      $value: {
+        value: 14,
+        unit: "px"
+      },
+      $type: "dimension"
+    },
+    base: {
+      $value: {
+        value: 16,
+        unit: "px"
+      },
+      $type: "dimension"
+    },
+    lg: {
+      $value: {
+        value: 18,
+        unit: "px"
+      },
+      $type: "dimension"
+    },
+    xl: {
+      $value: {
+        value: 20,
+        unit: "px"
+      },
+      $type: "dimension"
+    },
+    "2xl": {
+      $value: {
+        value: 24,
+        unit: "px"
+      },
+      $type: "dimension"
+    },
+    "3xl": {
+      $value: {
+        value: 30,
+        unit: "px"
+      },
+      $type: "dimension"
+    },
+    "4xl": {
+      $value: {
+        value: 36,
+        unit: "px"
+      },
+      $type: "dimension"
+    },
+    "5xl": {
+      $value: {
+        value: 48,
+        unit: "px"
+      },
+      $type: "dimension"
+    },
+    "6xl": {
+      $value: {
+        value: 60,
+        unit: "px"
+      },
+      $type: "dimension"
+    },
+    "7xl": {
+      $value: {
+        value: 72,
+        unit: "px"
+      },
+      $type: "dimension"
+    },
+    "8xl": {
+      $value: {
+        value: 96,
+        unit: "px"
+      },
+      $type: "dimension"
+    },
+    "9xl": {
+      $value: {
+        value: 128,
+        unit: "px"
+      },
+      $type: "dimension"
+    }
+  },
+  weight: {
+    thin: {
+      $value: 100,
+      $type: "fontWeight"
+    },
+    extralight: {
+      $value: 200,
+      $type: "fontWeight"
+    },
+    light: {
+      $value: 300,
+      $type: "fontWeight"
+    },
+    normal: {
+      $value: 400,
+      $type: "fontWeight"
+    },
+    medium: {
+      $value: 500,
+      $type: "fontWeight"
+    },
+    semibold: {
+      $value: 600,
+      $type: "fontWeight"
+    },
+    bold: {
+      $value: 700,
+      $type: "fontWeight"
+    },
+    extrabold: {
+      $value: 800,
+      $type: "fontWeight"
+    },
+    black: {
+      $value: 900,
+      $type: "fontWeight"
+    }
+  },
+  "line-height": {
+    xxs: {
+      $value: {
+        value: 12,
+        unit: "px"
+      },
+      $type: "dimension"
+    },
+    xs: {
+      $value: {
+        value: 16,
+        unit: "px"
+      },
+      $type: "dimension"
+    },
+    sm: {
+      $value: {
+        value: 20,
+        unit: "px"
+      },
+      $type: "dimension"
+    },
+    base: {
+      $value: {
+        value: 24,
+        unit: "px"
+      },
+      $type: "dimension"
+    },
+    lg: {
+      $value: {
+        value: 28,
+        unit: "px"
+      },
+      $type: "dimension"
+    },
+    xl: {
+      $value: {
+        value: 28,
+        unit: "px"
       },
-      y: {
-        $value: {
-          value: 1,
-          unit: "px"
-        },
-        $type: "dimension"
+      $type: "dimension"
+    },
+    "2xl": {
+      $value: {
+        value: 32,
+        unit: "px"
       },
-      blur: {
-        $value: {
-          value: 3,
-          unit: "px"
-        },
-        $type: "dimension"
+      $type: "dimension"
+    },
+    "3xl": {
+      $value: {
+        value: 36,
+        unit: "px"
       },
-      spread: {
-        $value: {
-          value: 0,
-          unit: "px"
-        },
-        $type: "dimension"
+      $type: "dimension"
+    },
+    "4xl": {
+      $value: {
+        value: 48,
+        unit: "px"
       },
-      color: {
-        $value: "#0000002e",
-        $type: "color"
-      }
+      $type: "dimension"
     },
-    "layer-2": {
-      x: {
-        $value: {
-          value: 0,
-          unit: "px"
-        },
-        $type: "dimension"
+    "5xl": {
+      $value: {
+        value: 48,
+        unit: "px"
       },
-      y: {
-        $value: {
-          value: 16,
-          unit: "px"
-        },
-        $type: "dimension"
+      $type: "dimension"
+    },
+    "6xl": {
+      $value: {
+        value: 60,
+        unit: "px"
       },
-      blur: {
-        $value: {
-          value: 24,
-          unit: "px"
-        },
-        $type: "dimension"
+      $type: "dimension"
+    },
+    "7xl": {
+      $value: {
+        value: 72,
+        unit: "px"
       },
-      spread: {
-        $value: {
-          value: -1,
-          unit: "px"
-        },
-        $type: "dimension"
+      $type: "dimension"
+    },
+    "8xl": {
+      $value: {
+        value: 96,
+        unit: "px"
       },
-      color: {
-        $value: "#0000002e",
-        $type: "color"
-      }
+      $type: "dimension"
+    },
+    "9xl": {
+      $value: {
+        value: 128,
+        unit: "px"
+      },
+      $type: "dimension"
     }
   },
-  "2xl": {
-    "layer-1": {
-      x: {
-        $value: {
-          value: 0,
-          unit: "px"
-        },
-        $type: "dimension"
-      },
-      y: {
-        $value: {
-          value: 1,
-          unit: "px"
-        },
-        $type: "dimension"
+  letterspacing: {
+    tighter: {
+      $value: {
+        value: -0.800000011920929,
+        unit: "px"
       },
-      blur: {
-        $value: {
-          value: 3,
-          unit: "px"
-        },
-        $type: "dimension"
+      $type: "dimension"
+    },
+    tight: {
+      $value: {
+        value: -0.4000000059604645,
+        unit: "px"
       },
-      spread: {
-        $value: {
-          value: 0,
-          unit: "px"
-        },
-        $type: "dimension"
+      $type: "dimension"
+    },
+    normal: {
+      $value: {
+        value: 0,
+        unit: "px"
       },
-      color: {
-        $value: "#0000004d",
-        $type: "color"
-      }
-    }
-  },
-  inner: {
-    "layer-1": {
-      x: {
-        $value: {
-          value: 0,
-          unit: "px"
-        },
-        $type: "dimension"
+      $type: "dimension"
+    },
+    wide: {
+      $value: {
+        value: 0.4000000059604645,
+        unit: "px"
       },
-      y: {
-        $value: {
-          value: 2,
-          unit: "px"
-        },
-        $type: "dimension"
+      $type: "dimension"
+    },
+    wider: {
+      $value: {
+        value: 0.800000011920929,
+        unit: "px"
       },
-      blur: {
-        $value: {
-          value: 6,
-          unit: "px"
-        },
-        $type: "dimension"
+      $type: "dimension"
+    },
+    widest: {
+      $value: {
+        value: 1.600000023841858,
+        unit: "px"
       },
-      spread: {
-        $value: {
-          value: 0,
-          unit: "px"
-        },
-        $type: "dimension"
+      $type: "dimension"
+    }
+  },
+  code: {
+    size: {
+      $value: {
+        value: 12,
+        unit: "px"
       },
-      color: {
-        $value: "#00000014",
-        $type: "color"
-      }
+      $type: "dimension",
+      $description: "Code text size. The code font size setting writes it, and the code text styles read it."
     }
   }
 };
@@ -9063,189 +9305,189 @@ var spacing_comfortable_default = {
     },
     "3": {
       $value: {
-        value: 12,
+        value: 13,
         unit: "px"
       },
       $type: "dimension"
     },
     "4": {
       $value: {
-        value: 16,
+        value: 17,
         unit: "px"
       },
       $type: "dimension"
     },
     "5": {
       $value: {
-        value: 20,
+        value: 22,
         unit: "px"
       },
       $type: "dimension"
     },
     "6": {
       $value: {
-        value: 24,
+        value: 26,
         unit: "px"
       },
       $type: "dimension"
     },
     "7": {
       $value: {
-        value: 28,
+        value: 30,
         unit: "px"
       },
       $type: "dimension"
     },
     "8": {
       $value: {
-        value: 32,
+        value: 34,
         unit: "px"
       },
       $type: "dimension"
     },
     "9": {
       $value: {
-        value: 36,
+        value: 38,
         unit: "px"
       },
       $type: "dimension"
     },
     "10": {
       $value: {
-        value: 40,
+        value: 42,
         unit: "px"
       },
       $type: "dimension"
     },
     "11": {
       $value: {
-        value: 44,
+        value: 46,
         unit: "px"
       },
       $type: "dimension"
     },
     "12": {
       $value: {
-        value: 48,
+        value: 50,
         unit: "px"
       },
       $type: "dimension"
     },
     "14": {
       $value: {
-        value: 56,
+        value: 58,
         unit: "px"
       },
       $type: "dimension"
     },
     "16": {
       $value: {
-        value: 64,
+        value: 66,
         unit: "px"
       },
       $type: "dimension"
     },
     "20": {
       $value: {
-        value: 80,
+        value: 82,
         unit: "px"
       },
       $type: "dimension"
     },
     "24": {
       $value: {
-        value: 96,
+        value: 98,
         unit: "px"
       },
       $type: "dimension"
     },
     "28": {
       $value: {
-        value: 112,
+        value: 114,
         unit: "px"
       },
       $type: "dimension"
     },
     "32": {
       $value: {
-        value: 128,
+        value: 130,
         unit: "px"
       },
       $type: "dimension"
     },
     "36": {
       $value: {
-        value: 144,
+        value: 146,
         unit: "px"
       },
       $type: "dimension"
     },
     "40": {
       $value: {
-        value: 160,
+        value: 162,
         unit: "px"
       },
       $type: "dimension"
     },
     "44": {
       $value: {
-        value: 176,
+        value: 178,
         unit: "px"
       },
       $type: "dimension"
     },
     "48": {
       $value: {
-        value: 192,
+        value: 194,
         unit: "px"
       },
       $type: "dimension"
     },
     "52": {
       $value: {
-        value: 208,
+        value: 210,
         unit: "px"
       },
       $type: "dimension"
     },
     "56": {
       $value: {
-        value: 224,
+        value: 226,
         unit: "px"
       },
       $type: "dimension"
     },
     "60": {
       $value: {
-        value: 240,
+        value: 242,
         unit: "px"
       },
       $type: "dimension"
     },
     "64": {
       $value: {
-        value: 256,
+        value: 258,
         unit: "px"
       },
       $type: "dimension"
     },
     "72": {
       $value: {
-        value: 288,
+        value: 290,
         unit: "px"
       },
       $type: "dimension"
     },
     "80": {
       $value: {
-        value: 320,
+        value: 322,
         unit: "px"
       },
       $type: "dimension"
     },
     "96": {
       $value: {
-        value: 384,
+        value: 386,
         unit: "px"
       },
       $type: "dimension"
@@ -9266,48 +9508,36 @@ var spacing_comfortable_default = {
     },
     "2_5": {
       $value: {
-        value: 10,
+        value: 11,
         unit: "px"
       },
       $type: "dimension"
     },
     "3_5": {
       $value: {
-        value: 14,
+        value: 15,
         unit: "px"
       },
       $type: "dimension"
     }
   },
-  container: {
-    p: {
-      $value: {
-        value: 28,
-        unit: "px"
-      },
+  container: {
+    p: {
+      $value: "{spacing.6}",
       $type: "dimension"
     },
     gap: {
-      $value: {
-        value: 20,
-        unit: "px"
-      },
+      $value: "{spacing.4}",
       $type: "dimension"
     }
   },
   layout: {
     "section-gap": {
-      $value: {
-        value: 40,
-        unit: "px"
-      },
+      $value: "{spacing.8}",
       $type: "dimension"
     },
     "stack-gap": {
-      $value: {
-        value: 10,
-        unit: "px"
-      },
+      $value: "{spacing.2}",
       $type: "dimension"
     }
   }
@@ -9339,21 +9569,21 @@ var spacing_compact_default = {
     },
     "3": {
       $value: {
-        value: 10,
+        value: 12,
         unit: "px"
       },
       $type: "dimension"
     },
     "4": {
       $value: {
-        value: 14,
+        value: 15,
         unit: "px"
       },
       $type: "dimension"
     },
     "5": {
       $value: {
-        value: 18,
+        value: 19,
         unit: "px"
       },
       $type: "dimension"
@@ -9409,119 +9639,119 @@ var spacing_compact_default = {
     },
     "14": {
       $value: {
-        value: 52,
+        value: 54,
         unit: "px"
       },
       $type: "dimension"
     },
     "16": {
       $value: {
-        value: 60,
+        value: 62,
         unit: "px"
       },
       $type: "dimension"
     },
     "20": {
       $value: {
-        value: 76,
+        value: 78,
         unit: "px"
       },
       $type: "dimension"
     },
     "24": {
       $value: {
-        value: 92,
+        value: 94,
         unit: "px"
       },
       $type: "dimension"
     },
     "28": {
       $value: {
-        value: 108,
+        value: 110,
         unit: "px"
       },
       $type: "dimension"
     },
     "32": {
       $value: {
-        value: 124,
+        value: 126,
         unit: "px"
       },
       $type: "dimension"
     },
     "36": {
       $value: {
-        value: 140,
+        value: 142,
         unit: "px"
       },
       $type: "dimension"
     },
     "40": {
       $value: {
-        value: 156,
+        value: 158,
         unit: "px"
       },
       $type: "dimension"
     },
     "44": {
       $value: {
-        value: 172,
+        value: 174,
         unit: "px"
       },
       $type: "dimension"
     },
     "48": {
       $value: {
-        value: 188,
+        value: 190,
         unit: "px"
       },
       $type: "dimension"
     },
     "52": {
       $value: {
-        value: 204,
+        value: 206,
         unit: "px"
       },
       $type: "dimension"
     },
     "56": {
       $value: {
-        value: 220,
+        value: 222,
         unit: "px"
       },
       $type: "dimension"
     },
     "60": {
       $value: {
-        value: 236,
+        value: 238,
         unit: "px"
       },
       $type: "dimension"
     },
     "64": {
       $value: {
-        value: 252,
+        value: 254,
         unit: "px"
       },
       $type: "dimension"
     },
     "72": {
       $value: {
-        value: 284,
+        value: 286,
         unit: "px"
       },
       $type: "dimension"
     },
     "80": {
       $value: {
-        value: 316,
+        value: 318,
         unit: "px"
       },
       $type: "dimension"
     },
     "96": {
       $value: {
-        value: 380,
+        value: 382,
         unit: "px"
       },
       $type: "dimension"
@@ -9542,14 +9772,14 @@ var spacing_compact_default = {
     },
     "2_5": {
       $value: {
-        value: 9,
+        value: 10,
         unit: "px"
       },
       $type: "dimension"
     },
     "3_5": {
       $value: {
-        value: 12,
+        value: 14,
         unit: "px"
       },
       $type: "dimension"
@@ -9557,33 +9787,21 @@ var spacing_compact_default = {
   },
   container: {
     p: {
-      $value: {
-        value: 20,
-        unit: "px"
-      },
+      $value: "{spacing.6}",
       $type: "dimension"
     },
     gap: {
-      $value: {
-        value: 12,
-        unit: "px"
-      },
+      $value: "{spacing.4}",
       $type: "dimension"
     }
   },
   layout: {
     "section-gap": {
-      $value: {
-        value: 28,
-        unit: "px"
-      },
+      $value: "{spacing.8}",
       $type: "dimension"
     },
     "stack-gap": {
-      $value: {
-        value: 6,
-        unit: "px"
-      },
+      $value: "{spacing.2}",
       $type: "dimension"
     }
   }
@@ -9833,33 +10051,21 @@ var spacing_default_default = {
   },
   container: {
     p: {
-      $value: {
-        value: 24,
-        unit: "px"
-      },
+      $value: "{spacing.6}",
       $type: "dimension"
     },
     gap: {
-      $value: {
-        value: 16,
-        unit: "px"
-      },
+      $value: "{spacing.4}",
       $type: "dimension"
     }
   },
   layout: {
     "section-gap": {
-      $value: {
-        value: 32,
-        unit: "px"
-      },
+      $value: "{spacing.8}",
       $type: "dimension"
     },
     "stack-gap": {
-      $value: {
-        value: 8,
-        unit: "px"
-      },
+      $value: "{spacing.2}",
       $type: "dimension"
     }
   }
@@ -9891,7 +10097,7 @@ var spacing_relaxed_default = {
     },
     "3": {
       $value: {
-        value: 14,
+        value: 13,
         unit: "px"
       },
       $type: "dimension"
@@ -9905,7 +10111,7 @@ var spacing_relaxed_default = {
     },
     "5": {
       $value: {
-        value: 22,
+        value: 23,
         unit: "px"
       },
       $type: "dimension"
@@ -10109,33 +10315,21 @@ var spacing_relaxed_default = {
   },
   container: {
     p: {
-      $value: {
-        value: 28,
-        unit: "px"
-      },
+      $value: "{spacing.6}",
       $type: "dimension"
     },
     gap: {
-      $value: {
-        value: 20,
-        unit: "px"
-      },
+      $value: "{spacing.4}",
       $type: "dimension"
     }
   },
   layout: {
     "section-gap": {
-      $value: {
-        value: 40,
-        unit: "px"
-      },
+      $value: "{spacing.8}",
       $type: "dimension"
     },
     "stack-gap": {
-      $value: {
-        value: 10,
-        unit: "px"
-      },
+      $value: "{spacing.2}",
       $type: "dimension"
     }
   }
@@ -10167,189 +10361,189 @@ var spacing_spacious_default = {
     },
     "3": {
       $value: {
-        value: 12,
+        value: 14,
         unit: "px"
       },
       $type: "dimension"
     },
     "4": {
       $value: {
-        value: 16,
+        value: 19,
         unit: "px"
       },
       $type: "dimension"
     },
     "5": {
       $value: {
-        value: 20,
+        value: 25,
         unit: "px"
       },
       $type: "dimension"
     },
     "6": {
       $value: {
-        value: 24,
+        value: 30,
         unit: "px"
       },
       $type: "dimension"
     },
     "7": {
       $value: {
-        value: 28,
+        value: 34,
         unit: "px"
       },
       $type: "dimension"
     },
     "8": {
       $value: {
-        value: 32,
+        value: 38,
         unit: "px"
       },
       $type: "dimension"
     },
     "9": {
       $value: {
-        value: 36,
+        value: 42,
         unit: "px"
       },
       $type: "dimension"
     },
     "10": {
       $value: {
-        value: 40,
+        value: 46,
         unit: "px"
       },
       $type: "dimension"
     },
     "11": {
       $value: {
-        value: 44,
+        value: 50,
         unit: "px"
       },
       $type: "dimension"
     },
     "12": {
       $value: {
-        value: 48,
+        value: 54,
         unit: "px"
       },
       $type: "dimension"
     },
     "14": {
       $value: {
-        value: 56,
+        value: 62,
         unit: "px"
       },
       $type: "dimension"
     },
     "16": {
       $value: {
-        value: 64,
+        value: 70,
         unit: "px"
       },
       $type: "dimension"
     },
     "20": {
       $value: {
-        value: 80,
+        value: 86,
         unit: "px"
       },
       $type: "dimension"
     },
     "24": {
       $value: {
-        value: 96,
+        value: 102,
         unit: "px"
       },
       $type: "dimension"
     },
     "28": {
       $value: {
-        value: 112,
+        value: 118,
         unit: "px"
       },
       $type: "dimension"
     },
     "32": {
       $value: {
-        value: 128,
+        value: 134,
         unit: "px"
       },
       $type: "dimension"
     },
     "36": {
       $value: {
-        value: 144,
+        value: 150,
         unit: "px"
       },
       $type: "dimension"
     },
     "40": {
       $value: {
-        value: 160,
+        value: 166,
         unit: "px"
       },
       $type: "dimension"
     },
     "44": {
       $value: {
-        value: 176,
+        value: 182,
         unit: "px"
       },
       $type: "dimension"
     },
     "48": {
       $value: {
-        value: 192,
+        value: 198,
         unit: "px"
       },
       $type: "dimension"
     },
     "52": {
       $value: {
-        value: 208,
+        value: 214,
         unit: "px"
       },
       $type: "dimension"
     },
     "56": {
       $value: {
-        value: 224,
+        value: 230,
         unit: "px"
       },
       $type: "dimension"
     },
     "60": {
       $value: {
-        value: 240,
+        value: 246,
         unit: "px"
       },
       $type: "dimension"
     },
     "64": {
       $value: {
-        value: 256,
+        value: 262,
         unit: "px"
       },
       $type: "dimension"
     },
     "72": {
       $value: {
-        value: 288,
+        value: 294,
         unit: "px"
       },
       $type: "dimension"
     },
     "80": {
       $value: {
-        value: 320,
+        value: 326,
         unit: "px"
       },
       $type: "dimension"
     },
     "96": {
       $value: {
-        value: 384,
+        value: 390,
         unit: "px"
       },
       $type: "dimension"
@@ -10370,14 +10564,14 @@ var spacing_spacious_default = {
     },
     "2_5": {
       $value: {
-        value: 10,
+        value: 11,
         unit: "px"
       },
       $type: "dimension"
     },
     "3_5": {
       $value: {
-        value: 14,
+        value: 17,
         unit: "px"
       },
       $type: "dimension"
@@ -10385,33 +10579,21 @@ var spacing_spacious_default = {
   },
   container: {
     p: {
-      $value: {
-        value: 40,
-        unit: "px"
-      },
+      $value: "{spacing.6}",
       $type: "dimension"
     },
     gap: {
-      $value: {
-        value: 24,
-        unit: "px"
-      },
+      $value: "{spacing.4}",
       $type: "dimension"
     }
   },
   layout: {
     "section-gap": {
-      $value: {
-        value: 56,
-        unit: "px"
-      },
+      $value: "{spacing.8}",
       $type: "dimension"
     },
     "stack-gap": {
-      $value: {
-        value: 16,
-        unit: "px"
-      },
+      $value: "{spacing.2}",
       $type: "dimension"
     }
   }
@@ -10443,189 +10625,189 @@ var spacing_tight_default = {
     },
     "3": {
       $value: {
-        value: 12,
+        value: 11,
         unit: "px"
       },
       $type: "dimension"
     },
     "4": {
       $value: {
-        value: 16,
+        value: 14,
         unit: "px"
       },
       $type: "dimension"
     },
     "5": {
       $value: {
-        value: 20,
+        value: 17,
         unit: "px"
       },
       $type: "dimension"
     },
     "6": {
       $value: {
-        value: 24,
+        value: 20,
         unit: "px"
       },
       $type: "dimension"
     },
     "7": {
       $value: {
-        value: 30,
+        value: 24,
         unit: "px"
       },
       $type: "dimension"
     },
     "8": {
       $value: {
-        value: 32,
+        value: 28,
         unit: "px"
       },
       $type: "dimension"
     },
     "9": {
       $value: {
-        value: 36,
+        value: 32,
         unit: "px"
       },
       $type: "dimension"
     },
     "10": {
       $value: {
-        value: 42,
+        value: 36,
         unit: "px"
       },
       $type: "dimension"
     },
     "11": {
       $value: {
-        value: 48,
+        value: 40,
         unit: "px"
       },
       $type: "dimension"
     },
     "12": {
       $value: {
-        value: 48,
+        value: 44,
         unit: "px"
       },
       $type: "dimension"
     },
     "14": {
       $value: {
-        value: 60,
+        value: 52,
         unit: "px"
       },
       $type: "dimension"
     },
     "16": {
       $value: {
-        value: 64,
+        value: 60,
         unit: "px"
       },
       $type: "dimension"
     },
     "20": {
       $value: {
-        value: 80,
+        value: 76,
         unit: "px"
       },
       $type: "dimension"
     },
     "24": {
       $value: {
-        value: 96,
+        value: 92,
         unit: "px"
       },
       $type: "dimension"
     },
     "28": {
       $value: {
-        value: 120,
+        value: 108,
         unit: "px"
       },
       $type: "dimension"
     },
     "32": {
       $value: {
-        value: 128,
+        value: 124,
         unit: "px"
       },
       $type: "dimension"
     },
     "36": {
       $value: {
-        value: 144,
+        value: 140,
         unit: "px"
       },
       $type: "dimension"
     },
     "40": {
       $value: {
-        value: 160,
+        value: 156,
         unit: "px"
       },
       $type: "dimension"
     },
     "44": {
       $value: {
-        value: 180,
+        value: 172,
         unit: "px"
       },
       $type: "dimension"
     },
     "48": {
       $value: {
-        value: 192,
+        value: 188,
         unit: "px"
       },
       $type: "dimension"
     },
     "52": {
       $value: {
-        value: 210,
+        value: 204,
         unit: "px"
       },
       $type: "dimension"
     },
     "56": {
       $value: {
-        value: 224,
+        value: 220,
         unit: "px"
       },
       $type: "dimension"
     },
     "60": {
       $value: {
-        value: 240,
+        value: 236,
         unit: "px"
       },
       $type: "dimension"
     },
     "64": {
       $value: {
-        value: 256,
+        value: 252,
         unit: "px"
       },
       $type: "dimension"
     },
     "72": {
       $value: {
-        value: 288,
+        value: 284,
         unit: "px"
       },
       $type: "dimension"
     },
     "80": {
       $value: {
-        value: 320,
+        value: 316,
         unit: "px"
       },
       $type: "dimension"
     },
     "96": {
       $value: {
-        value: 384,
+        value: 380,
         unit: "px"
       },
       $type: "dimension"
@@ -10653,7 +10835,7 @@ var spacing_tight_default = {
     },
     "3_5": {
       $value: {
-        value: 15,
+        value: 13,
         unit: "px"
       },
       $type: "dimension"
@@ -10661,33 +10843,21 @@ var spacing_tight_default = {
   },
   container: {
     p: {
-      $value: {
-        value: 24,
-        unit: "px"
-      },
+      $value: "{spacing.6}",
       $type: "dimension"
     },
     gap: {
-      $value: {
-        value: 16,
-        unit: "px"
-      },
+      $value: "{spacing.4}",
       $type: "dimension"
     }
   },
   layout: {
     "section-gap": {
-      $value: {
-        value: 32,
-        unit: "px"
-      },
+      $value: "{spacing.8}",
       $type: "dimension"
     },
     "stack-gap": {
-      $value: {
-        value: 8,
-        unit: "px"
-      },
+      $value: "{spacing.2}",
       $type: "dimension"
     }
   }
@@ -11035,7 +11205,7 @@ var typography_default = {
       $type: "typography",
       $value: {
         fontFamily: "{family.font-mono}",
-        fontSize: "{size.code}",
+        fontSize: "{code.size}",
         fontWeight: "{weight.normal}",
         lineHeight: "{line-height.sm}",
         letterSpacing: {
@@ -11048,7 +11218,7 @@ var typography_default = {
       $type: "typography",
       $value: {
         fontFamily: "{family.font-mono}",
-        fontSize: "{size.code}",
+        fontSize: "{code.size}",
         fontWeight: "{weight.semibold}",
         lineHeight: "auto",
         letterSpacing: {
@@ -11066,6 +11236,7 @@ var TOKEN_FILES = {
   "primitives/borderwidth/borderwidth-normal.json": borderwidth_normal_default,
   "primitives/borderwidth/borderwidth-strong.json": borderwidth_strong_default,
   "primitives/color.json": color_default,
+  "primitives/icon.json": icon_default,
   "primitives/motion/motion-snappy.json": motion_snappy_default,
   "primitives/radius/radius-extra-round.json": radius_extra_round_default,
   "primitives/radius/radius-round.json": radius_round_default,
@@ -11099,6 +11270,7 @@ var TOKEN_FILES = {
 var PRIMITIVE_FAMILIES = [
   "borderwidth",
   "color",
+  "icon",
   "motion",
   "radius",
   "shadow",
@@ -11110,35 +11282,40 @@ var BREAKPOINTS_FILE = "semantic/breakpoints.json";
 var TYPOGRAPHY_STYLES_FILE = "styles/typography.json";
 var SHADOW_STYLES_FILE = "styles/shadows.json";
 var SINGLE_SOURCE = { mode: null, preset: null };
-var PRESET_CONTROLS = {
-  spacing: { kind: "preset", field: "density" },
-  radius: { kind: "preset", field: "corners" },
-  borderwidth: { kind: "preset", field: "stroke" },
-  shadow: { kind: "preset", field: "elevation" }
+var UI_SCALE = { kind: "scale", field: "uiScale" };
+var TEXT_SIZE = { kind: "scale", field: "textSize" };
+var FAMILY_CONTROLS = {
+  spacing: [{ kind: "preset", field: "density" }, UI_SCALE],
+  radius: [{ kind: "preset", field: "corners" }, UI_SCALE],
+  borderwidth: [{ kind: "preset", field: "stroke" }],
+  shadow: [{ kind: "preset", field: "elevation" }]
 };
-function typographyControl(path) {
+function typographyControls(path) {
   const [group, key] = path;
-  if (isCodeSize(path)) return { kind: "pref", field: "codeFontSize" };
+  if (group === "code" && key === "size") {
+    return [{ kind: "pref", field: "codeFontSize" }, UI_SCALE, TEXT_SIZE];
+  }
   if (group === "size" || group === "line-height") {
-    return { kind: "pref", field: "uiFontSize" };
+    return [UI_SCALE, TEXT_SIZE];
   }
-  if (group !== "family") return null;
-  if (key === "font-sans") return { kind: "pref", field: "uiFont" };
-  if (key === "font-heading") return { kind: "pref", field: "headingFont" };
-  if (key === "font-mono") return { kind: "pref", field: "codeFont" };
-  return null;
+  if (group !== "family") return [];
+  if (key === "font-sans") return [{ kind: "pref", field: "uiFont" }];
+  if (key === "font-heading") return [{ kind: "pref", field: "headingFont" }];
+  if (key === "font-mono") return [{ kind: "pref", field: "codeFont" }];
+  return [];
 }
-function leafControl({
+function leafControls({
   family,
   file,
   preset,
   leaf
 }) {
   if (family === "typography" && file.startsWith("primitives/")) {
-    return typographyControl(leaf.path);
+    return typographyControls(leaf.path);
   }
-  if (preset === null) return null;
-  return PRESET_CONTROLS[family] ?? null;
+  if (family === "icon") return leaf.path[0] === "glyph" ? [UI_SCALE] : [];
+  if (preset === null) return [];
+  return FAMILY_CONTROLS[family] ?? [];
 }
 var cssVariable = (name) => ({
   kind: "css-variable",
@@ -11241,7 +11418,7 @@ function authoredTokens(leaves, lookup, entryFor) {
       type: leaf.type,
       description: leaf.description ?? null,
       aliases,
-      control: leafControl(authored),
+      controls: leafControls(authored),
       variants: []
     };
     token2.variants.push({
@@ -11259,6 +11436,7 @@ function authoredTokens(leaves, lookup, entryFor) {
 }
 function primitiveAliases(family, path) {
   const key = path.join("-");
+  if (family === "icon") return [utility(iconUtility(path).name)];
   if (family === "radius") return [cssVariable(`--radius-${key}`)];
   if (family === "borderwidth") {
     return [
@@ -11285,7 +11463,7 @@ function primitiveAliases(family, path) {
   }
   return [];
 }
-function primitiveEntry(lookup, scaled) {
+function primitiveEntry(lookup) {
   return ({ family, leaf }) => {
     const name = primitiveName(family, leaf.path);
     const reference = leaf.path.join(".");
@@ -11299,24 +11477,35 @@ function primitiveEntry(lookup, scaled) {
       declarations: [
         {
           property: name,
-          value: scaled.get(name) ?? resolveValue(leaf.value, lookup, leaf.type, leaf.path)
+          value: resolveValue(leaf.value, lookup, leaf.type, leaf.path)
         }
       ]
     };
   };
 }
-function spacingEntry({ leaf }) {
-  const key = leaf.path.join("-");
-  const name = `--nx-${key}`;
-  const alias = spacingTokenKind(leaf.path) === "role" ? utility(spacingRoleUtility(leaf.path).name) : cssVariable(`--${key}`);
+function spacingName(path) {
+  return `--nx-${path.join("-")}`;
+}
+function spacingStepLookup(leaves) {
+  return new Map(
+    leaves.filter(({ leaf }) => spacingTokenKind(leaf.path) === "numeric").map(({ leaf }) => {
+      const name = spacingName(leaf.path);
+      return [
+        leaf.path.join("."),
+        { cssName: name.slice("--".length), name }
+      ];
+    })
+  );
+}
+function spacingEntry({ file, leaf }) {
+  const name = spacingName(leaf.path);
+  const alias = spacingTokenKind(leaf.path) === "role" ? utility(spacingRoleUtility(leaf.path).name) : cssVariable(`--${leaf.path.join("-")}`);
+  const value = spacingValue(leaf, extractTokens(TOKEN_FILES[file]));
   return {
     name,
     aliases: [alias],
     declarations: [
-      {
-        property: name,
-        value: formatTokenValue(leaf.value, leaf.type, leaf.path)
-      }
+      { property: name, value: formatTokenValue(value, leaf.type, leaf.path) }
     ]
   };
 }
@@ -11381,7 +11570,7 @@ function shadowStyleTokens(layers, lookup) {
       type: leaf.type,
       description: leaf.description ?? null,
       aliases: [cssVariable(`--${key}`)],
-      control: PRESET_CONTROLS.shadow ?? null,
+      controls: FAMILY_CONTROLS.shadow ?? [],
       variants: sets.map(({ preset, mode, values }) => ({
         mode,
         preset,
@@ -11426,7 +11615,7 @@ function runtimeColorTokens(appearance) {
       type: "color",
       description: RUNTIME_COLOR_DESCRIPTIONS[name] ?? null,
       aliases: runtimeColorAliases(name),
-      control: null,
+      controls: [],
       variants: themes.map(({ mode, appearance: appearance2, values }) => {
         const value = values[property];
         if (value === void 0) {
@@ -11445,24 +11634,130 @@ function runtimeColorTokens(appearance) {
     };
   });
 }
+function uiScaleToken({ cssName, value }, {
+  family,
+  type,
+  description
+}) {
+  const name = `--nx-${cssName}`;
+  return {
+    name,
+    family,
+    group: family,
+    type,
+    description,
+    aliases: [],
+    controls: [UI_SCALE],
+    variants: [
+      {
+        mode: null,
+        preset: null,
+        source: null,
+        appearance: null,
+        authoredValue: null,
+        declarations: [{ property: name, value }],
+        references: []
+      }
+    ]
+  };
+}
+function uiScaleEntry(token2) {
+  if (token2.cssName === "ui-scale") {
+    return uiScaleToken(token2, {
+      family: "ui-scale",
+      type: "number",
+      description: "The UI scale as a factor of the Default scale. Multiply a fixed size by it, such as `calc(16rem*var(--nx-ui-scale))`, so the size follows the UI scale."
+    });
+  }
+  const width = token2.cssName.replace("container-", "");
+  return uiScaleToken(token2, {
+    family: "width",
+    type: "dimension",
+    description: `The \`nx:max-w-${width}\` and \`nx:w-${width}\` width. It follows the UI scale.`
+  });
+}
+var CSS_NAME_START = "--nx-".length;
+function variantValue(variant) {
+  return variant?.declarations[0]?.value;
+}
+function scaledPresets(tokens, family, factor) {
+  const modes = /* @__PURE__ */ new Map();
+  for (const token2 of tokens.filter((each) => each.family === family)) {
+    for (const variant of token2.variants) {
+      const value = variantValue(variant);
+      if (variant.preset === null || value === void 0) continue;
+      const target = variant.references[0]?.target;
+      const mode = modes.get(variant.preset) ?? [];
+      mode.push({
+        cssName: token2.name.slice(CSS_NAME_START),
+        value,
+        ...target && { step: target.slice(CSS_NAME_START) }
+      });
+      modes.set(variant.preset, mode);
+    }
+  }
+  return [...modes].flatMap(
+    ([preset, mode]) => scaleMode(mode, factor).map(({ cssName, value }) => [
+      `${preset}/--nx-${cssName}`,
+      value
+    ])
+  );
+}
+function sizeValues(tokens, { uiScale, textSize }) {
+  const base = uiScaleBase(
+    TOKEN_FILES["primitives/typography/typography-default.json"],
+    TOKEN_FILES["primitives/icon.json"]
+  );
+  const selectors = [
+    uiScaleSelector(uiScale),
+    textSizeSelector(uiScale, textSize)
+  ];
+  const values = [...scaleBlocks(base), ...textSizeBlocks(base)].filter((block) => block.selectors.some((each) => selectors.includes(each))).flatMap((block) => block.tokens).map(({ cssName, value }) => [`--nx-${cssName}`, value]);
+  if (uiScale === "default") return values;
+  const { spacing } = UI_SCALES[uiScale];
+  return [
+    ...values,
+    ...scaledPresets(tokens, "spacing", spacing),
+    ...scaledPresets(tokens, "radius", spacing)
+  ];
+}
+function atSizes(tokens, appearance) {
+  const { uiScale, textSize, prefs } = appearance;
+  const scaled = new Map([
+    ...sizeValues(tokens, appearance),
+    [
+      "--nx-typography-code-size",
+      `${scaleText(prefs.codeFontSize, uiScale, textSize)}px`
+    ]
+  ]);
+  return tokens.map((token2) => ({
+    ...token2,
+    variants: token2.variants.map((variant) => {
+      const value = scaled.get(`${variant.preset}/${token2.name}`) ?? scaled.get(token2.name);
+      if (value === void 0) return variant;
+      return {
+        ...variant,
+        declarations: variant.declarations.map((each) => ({
+          ...each,
+          value
+        }))
+      };
+    })
+  }));
+}
 function createTokenCatalogue(appearance = DEFAULT_NXDS_APPEARANCE) {
   const primitives = PRIMITIVE_FAMILIES.flatMap(primitiveLeaves);
   const lookup = primitiveLookup(primitives);
   const shadowLayers = primitives.filter(({ family }) => family === "shadow");
-  return [
+  const spacing = spacingLeaves();
+  const tokens = [
     ...authoredTokens(
       primitives.filter((leaf) => leaf.family !== "shadow"),
       lookup,
-      primitiveEntry(
-        lookup,
-        typographyScale(
-          appearance.prefs.uiFontSize,
-          appearance.prefs.codeFontSize
-        )
-      )
+      primitiveEntry(lookup)
     ),
     ...runtimeColorTokens(appearance),
-    ...authoredTokens(spacingLeaves(), lookup, spacingEntry),
+    ...authoredTokens(spacing, spacingStepLookup(spacing), spacingEntry),
     ...authoredTokens(
       fileLeaves("z-index", Z_INDEX_FILE, SINGLE_SOURCE),
       lookup,
@@ -11478,8 +11773,10 @@ function createTokenCatalogue(appearance = DEFAULT_NXDS_APPEARANCE) {
       lookup,
       typographyStyleEntry(lookup)
     ),
-    ...shadowStyleTokens(shadowLayers, lookup)
+    ...shadowStyleTokens(shadowLayers, lookup),
+    ...widthTokens(PAGE_WIDTHS_REM, "default").map(uiScaleEntry)
   ];
+  return atSizes(tokens, appearance);
 }
 export {
   DARK_SURFACE_LADDER,