@nxds/core 0.11.0 → 0.13.0

package/dist/runtime/index.cjs

@@ -26,12 +26,19 @@ __export(src_exports, {
   CORNER_OPTIONS: () => CORNER_OPTIONS,
   DEFAULT_BRAND_COLOR: () => DEFAULT_BRAND_COLOR,
   DEFAULT_COOKIE_KEY: () => DEFAULT_COOKIE_KEY,
+  DEFAULT_ICON_LIBRARY: () => DEFAULT_ICON_LIBRARY,
   DEFAULT_NXDS_APPEARANCE: () => DEFAULT_NXDS_APPEARANCE,
+  DEFAULT_NXDS_THEME: () => DEFAULT_NXDS_THEME,
   DEFAULT_STORAGE_KEY: () => DEFAULT_STORAGE_KEY,
   DENSITY_OPTIONS: () => DENSITY_OPTIONS,
   ELEVATION_OPTIONS: () => ELEVATION_OPTIONS,
+  FONT_OPTIONS: () => FONT_OPTIONS,
+  FONT_SIZE_PX_MAX: () => FONT_SIZE_PX_MAX,
+  FONT_SIZE_PX_MIN: () => FONT_SIZE_PX_MIN,
+  ICON_LIBRARY_OPTIONS: () => ICON_LIBRARY_OPTIONS,
   NXDS_APPEARANCE_COOKIE_MAX_AGE_SECONDS: () => NXDS_APPEARANCE_COOKIE_MAX_AGE_SECONDS,
   NXDS_APPEARANCE_DATA_ATTRS: () => NXDS_APPEARANCE_DATA_ATTRS,
+  NXDS_THEME_FIELDS: () => NXDS_THEME_FIELDS,
   PALETTE_KEYS: () => PALETTE_KEYS,
   RUNTIME_LAYER_ORDER: () => RUNTIME_LAYER_ORDER,
   SEMANTIC_TOKEN_REGISTRY: () => SEMANTIC_TOKEN_REGISTRY,
@@ -42,6 +49,7 @@ __export(src_exports, {
   apcaLc: () => apcaLc,
   appearancePrefsToCss: () => appearancePrefsToCss,
   applyNxdsAppearance: () => applyNxdsAppearance,
+  applyNxdsThemeFlags: () => applyNxdsThemeFlags,
   createDefaultNxdsAppearanceSnapshot: () => createDefaultNxdsAppearanceSnapshot,
   createNxdsAppearanceBootstrapScript: () => createNxdsAppearanceBootstrapScript,
   createNxdsAppearanceSnapshot: () => createNxdsAppearanceSnapshot,
@@ -54,6 +62,7 @@ __export(src_exports, {
   isColor: () => isColor,
   measureThemeContrast: () => measureThemeContrast,
   normalizeAppearanceModeIds: () => normalizeAppearanceModeIds,
+  nxdsThemeFlags: () => nxdsThemeFlags,
   parseNxdsAppearanceStateCookie: () => parseNxdsAppearanceStateCookie,
   persistNxdsAppearance: () => persistNxdsAppearance,
   prefersDarkColorScheme: () => prefersDarkColorScheme,
@@ -65,6 +74,8 @@ __export(src_exports, {
   sanitizeNxdsAppearancePrefs: () => sanitizeNxdsAppearancePrefs,
   sanitizeNxdsAppearanceSnapshot: () => sanitizeNxdsAppearanceSnapshot,
   serializeNxdsAppearanceStateCookie: () => serializeNxdsAppearanceStateCookie,
+  shuffleNxdsAppearance: () => shuffleNxdsAppearance,
+  shuffleNxdsIconLibrary: () => shuffleNxdsIconLibrary,
   themeToCss: () => themeToCss,
   watchColorScheme: () => watchColorScheme
 });
@@ -1961,6 +1972,321 @@ function apcaLc(foreground, background) {
   );
 }
 
+// src/lib/contrast.ts
+var import_apca_w33 = require("apca-w3");
+var import_culori6 = require("culori");
+
+// src/lib/semantic-palette-references.ts
+var STATUS_PALETTE_FAMILIES = {
+  success: "green",
+  warning: "orange",
+  error: "red",
+  information: "blue"
+};
+var CHART_PALETTE_REFERENCES = [
+  { palette: "teal", light: "700", dark: "200" },
+  { palette: "lime", light: "700", dark: "200" },
+  { palette: "orange", light: "600", dark: "200" },
+  { 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 = [
+  "primary",
+  "secondary",
+  "success",
+  "warning",
+  "error",
+  "information"
+];
+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",
+  "popover",
+  "nav-background",
+  "nav-item-hover",
+  "nav-item-active",
+  "nav-border"
+];
+var text = (fg, bg, tier) => ({
+  fg,
+  bg,
+  tier,
+  kind: "text"
+});
+var label = (fg, bg, tier) => ({
+  fg,
+  bg,
+  tier,
+  kind: "label"
+});
+var ink = (fg, bg, tier) => ({
+  fg,
+  bg,
+  tier,
+  kind: "ink"
+});
+var APCA_PAIRS = [
+  text("foreground", "background", "body"),
+  text("foreground", "background-hover", "ui"),
+  text("foreground", "muted", "ui"),
+  text("muted-foreground", "muted", "ui"),
+  text("muted-foreground-subtle", "muted", "incidental"),
+  text("muted-foreground", "container", "ui"),
+  text("muted-foreground-subtle", "container", "incidental"),
+  text("foreground", "muted-extralight", "ui"),
+  text("muted-foreground", "muted-extralight", "ui"),
+  text("disabled-foreground", "disabled", "incidental"),
+  text("container-foreground", "container", "body"),
+  text("foreground", "container", "body"),
+  text("popover-foreground", "popover", "body"),
+  text("popover-foreground", "popover-hover", "ui"),
+  text("foreground", "control-background", "ui"),
+  text("foreground", "control-background-hover", "ui"),
+  text("nav-foreground", "nav-background", "ui"),
+  text("nav-muted-foreground", "nav-background", "incidental"),
+  text("nav-foreground", "nav-item-hover", "ui"),
+  text("nav-foreground", "nav-item-active", "ui"),
+  ink("error-subtle-foreground", "background", "ui"),
+  ink("error-subtle-foreground", "container", "ui"),
+  ...COLOR_FAMILIES.flatMap((family) => [
+    label(`${family}-foreground`, `${family}-background`, "ui"),
+    label(`${family}-foreground`, `${family}-background-hover`, "ui"),
+    label(`${family}-foreground`, `${family}-background-active`, "ui"),
+    ink(`${family}-subtle-foreground`, `${family}-subtle`, "ui"),
+    ink(`${family}-subtle-foreground`, `${family}-subtle-hover`, "ui"),
+    ink(`${family}-subtle-foreground`, `${family}-subtle-active`, "ui")
+  ]),
+  ...CATEGORICAL_INDICES.flatMap(
+    (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) => [
+    {
+      ...ink("focus-default", surface, "incidental"),
+      solveAs: "primary-subtle-foreground"
+    },
+    ink("focus-error", surface, "incidental")
+  ]),
+  ...[
+    "background-active",
+    "container-hover",
+    "container-active",
+    "popover",
+    "popover-hover",
+    "popover-active",
+    "nav-background"
+  ].flatMap((surface) => [
+    text("foreground", surface, "ui"),
+    text("muted-foreground", surface, "ui"),
+    text("muted-foreground-subtle", surface, "incidental")
+  ]),
+  text("muted-foreground", "background", "ui"),
+  text("muted-foreground-subtle", "background", "incidental"),
+  text("container-foreground", "container-hover", "ui"),
+  text("container-foreground", "container-active", "ui"),
+  text("popover-foreground", "popover-active", "ui"),
+  ...["background", "container", "popover"].flatMap((backdrop) => [
+    { ...text("popover-foreground", "popover-alpha", "body"), backdrop },
+    { ...text("foreground", "background-hover-alpha", "ui"), backdrop }
+  ]),
+  ...["#000000", "#ffffff"].map((backdrop) => ({
+    ...text("popover-foreground", "popover-alpha", "body"),
+    backdrop
+  }))
+];
+
+// src/lib/perceptual-ramp.ts
+var import_culori5 = require("culori");
+var EMIT_GAMUT2 = "p3";
+var CUSP_FRACTION2 = 0.95;
+function isColor(value) {
+  return (0, import_culori5.parse)(value) !== void 0;
+}
+function seedOklch(input) {
+  const parsed = (0, import_culori5.parse)(input);
+  if (!parsed)
+    throw new Error(`perceptual-ramp: cannot parse color '${input}'`);
+  const converted = (0, import_culori5.oklch)(parsed);
+  if (!converted)
+    throw new Error(`perceptual-ramp: cannot convert '${input}' to OKLCH`);
+  return converted;
+}
+function pinnedOklch(seedHex, shade, options = {}) {
+  const { capAtSeedChroma = true } = options;
+  const seed = seedOklch(seedHex);
+  const l = PERCEPTUAL_L_GRID[shade];
+  const hue = seed.h ?? 0;
+  const seedC = seed.c ?? 0;
+  const cuspC = (0, import_culori5.clampChroma)({ mode: "oklch", l, c: 0.5, h: hue }, "oklch", EMIT_GAMUT2).c ?? 0;
+  let chroma = cuspC * CUSP_FRACTION2;
+  if (capAtSeedChroma) chroma = Math.min(chroma, seedC);
+  const target = { mode: "oklch", l, c: chroma, h: hue };
+  return formatOklch((0, import_culori5.clampChroma)(target, "oklch", EMIT_GAMUT2));
+}
+function rampFromSeed(seedHex, options = {}) {
+  const ramp = {};
+  for (const shade of SHADES)
+    ramp[shade] = pinnedOklch(seedHex, shade, options);
+  return ramp;
+}
+
+// src/lib/contrast.ts
+var CONTRAST_MIN = 0;
+var CONTRAST_MAX = 100;
+function normalizeContrast(value, fallback = 50) {
+  return typeof value === "number" && Number.isFinite(value) ? Math.round(Math.max(CONTRAST_MIN, Math.min(CONTRAST_MAX, value))) : fallback;
+}
+function contrastTarget(tier, contrast) {
+  return TIER_THRESHOLDS[tier] + 15 * contrast / 100;
+}
+var BISECT_STEPS = 12;
+function bisect(fail, pass, passes) {
+  for (let i = 0; i < BISECT_STEPS; i++) {
+    const middle = (fail + pass) / 2;
+    if (passes(middle)) pass = middle;
+    else fail = middle;
+  }
+  return pass;
+}
+var token = (map, name) => {
+  const value = map[`--nx-color-${name}`];
+  if (value === void 0) throw new Error(`contrast: missing ${name}`);
+  return value;
+};
+function pairBackground(map, pair) {
+  const backdrop = pair.backdrop ? resolveToSrgbInts(
+    pair.backdrop.startsWith("#") ? pair.backdrop : token(map, pair.backdrop)
+  ) : void 0;
+  return resolveToSrgbInts(token(map, pair.bg), backdrop);
+}
+function contrastForPair(map, pair) {
+  const background = pairBackground(map, pair);
+  return Math.abs(
+    (0, import_apca_w33.APCAcontrast)(
+      (0, import_apca_w33.sRGBtoY)(resolveToSrgbInts(token(map, pair.fg), background)),
+      (0, import_apca_w33.sRGBtoY)(background)
+    )
+  );
+}
+var luminance = (color) => (0, import_apca_w33.sRGBtoY)(resolveToSrgbInts(color));
+var score = (foregroundY, backgroundY) => Math.abs((0, import_apca_w33.APCAcontrast)(foregroundY, backgroundY));
+function constraintsFor(map, pairs, contrast, endpointY) {
+  const constraints = [];
+  for (const pair of pairs) {
+    const backgroundY = (0, import_apca_w33.sRGBtoY)(pairBackground(map, pair));
+    const reachable = score(endpointY, backgroundY);
+    if (reachable < TIER_THRESHOLDS[pair.tier]) return void 0;
+    const target = contrastTarget(pair.tier, contrast) + (pair.offset ?? 0);
+    constraints.push({ backgroundY, target: Math.min(target, reachable) });
+  }
+  return constraints;
+}
+var keepsTextSeed = (mode, kind) => mode === "light" && kind === "text";
+function solveForeground(seed, constraints, endpoint, keepSeed) {
+  const passes = (color) => {
+    const y = luminance(color);
+    return constraints.every((c) => score(y, c.backgroundY) >= c.target);
+  };
+  if (keepSeed && passes(seed)) return seed;
+  const parsed = seedOklch(seed);
+  const at = (l) => formatOklch((0, import_culori6.clampChroma)({ ...parsed, l, alpha: 1 }, "oklch", "p3"));
+  return at(
+    bisect(keepSeed ? parsed.l : 1 - endpoint, endpoint, (l) => passes(at(l)))
+  );
+}
+var SOLVE_GROUPS = /* @__PURE__ */ new Map();
+for (const pair of APCA_PAIRS) {
+  const key = pair.solveAs ?? pair.fg;
+  const group = SOLVE_GROUPS.get(key);
+  if (!group) {
+    SOLVE_GROUPS.set(key, { kind: pair.kind, pairs: [pair] });
+    continue;
+  }
+  if (group.kind !== pair.kind)
+    throw new Error(
+      `contrast: ${pair.fg} is '${pair.kind}' but joins '${group.kind}' group ${key}`
+    );
+  group.pairs.push(pair);
+}
+function constrainFamilyFills(map, name, pairs) {
+  const basePair = pairs[0];
+  if (!basePair) throw new Error(`contrast: missing pairs for ${name}`);
+  const baseY = luminance(token(map, basePair.bg));
+  const endpoint = score(1, baseY) >= score(0, baseY) ? 1 : 0;
+  map[`--nx-color-${name}`] = `oklch(${endpoint} 0 0)`;
+  for (const pair of pairs) {
+    const floor = TIER_THRESHOLDS[pair.tier];
+    const value = token(map, pair.bg);
+    if (score(endpoint, luminance(value)) >= floor) continue;
+    const fill = seedOklch(value);
+    const at = (l) => formatOklch((0, import_culori6.clampChroma)({ ...fill, l }, "oklch", "p3"));
+    const readable = (l) => score(endpoint, luminance(at(l))) >= floor;
+    map[`--nx-color-${pair.bg}`] = at(bisect(fill.l, 1 - endpoint, readable));
+  }
+}
+function constrainColors(map, mode, contrast) {
+  for (const [name, { kind, pairs }] of SOLVE_GROUPS)
+    if (kind === "label") constrainFamilyFills(map, name, pairs);
+  const endpoint = mode === "dark" ? 1 : 0;
+  const endpointY = luminance(`oklch(${endpoint} 0 0)`);
+  for (const [name, { kind, pairs }] of SOLVE_GROUPS) {
+    if (kind === "label") continue;
+    const constraints = constraintsFor(map, pairs, contrast, endpointY);
+    if (constraints === void 0)
+      throw new Error(`contrast: no readable ${name} in ${mode}`);
+    const solved = solveForeground(
+      token(map, name),
+      constraints,
+      endpoint,
+      keepsTextSeed(mode, kind)
+    );
+    for (const fg of new Set(pairs.map((pair) => pair.fg).concat(name)))
+      map[`--nx-color-${fg}`] = solved;
+  }
+  return map;
+}
+
+// src/lib/runtime-layer.ts
+var RUNTIME_LAYER_ORDER = "@layer properties, theme, base, components, utilities, nx-runtime;";
+function inRuntimeLayer(css) {
+  return `${RUNTIME_LAYER_ORDER}
+@layer nx-runtime {
+${css}
+}
+`;
+}
+
 // tokens/primitives/typography/typography-default.json
 var typography_default_default = {
   family: {
@@ -2099,6 +2425,13 @@ var typography_default_default = {
         unit: "px"
       },
       $type: "dimension"
+    },
+    code: {
+      $value: {
+        value: 12,
+        unit: "px"
+      },
+      $type: "dimension"
     }
   },
   weight: {
@@ -2131,471 +2464,182 @@ var typography_default_default = {
       $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"
+      $value: 800,
+      $type: "fontWeight"
     },
-    "6xl": {
+    black: {
+      $value: 900,
+      $type: "fontWeight"
+    }
+  },
+  "line-height": {
+    xxs: {
       $value: {
-        value: 60,
+        value: 12,
         unit: "px"
       },
       $type: "dimension"
     },
-    "7xl": {
+    xs: {
       $value: {
-        value: 72,
+        value: 16,
         unit: "px"
       },
       $type: "dimension"
     },
-    "8xl": {
+    sm: {
       $value: {
-        value: 96,
+        value: 20,
         unit: "px"
       },
       $type: "dimension"
     },
-    "9xl": {
+    base: {
       $value: {
-        value: 128,
+        value: 24,
         unit: "px"
       },
       $type: "dimension"
-    }
-  },
-  letterspacing: {
-    tighter: {
+    },
+    lg: {
       $value: {
-        value: -0.800000011920929,
+        value: 28,
         unit: "px"
       },
       $type: "dimension"
     },
-    tight: {
+    xl: {
       $value: {
-        value: -0.4000000059604645,
+        value: 28,
         unit: "px"
       },
       $type: "dimension"
     },
-    normal: {
+    "2xl": {
       $value: {
-        value: 0,
+        value: 32,
         unit: "px"
       },
       $type: "dimension"
     },
-    wide: {
+    "3xl": {
       $value: {
-        value: 0.4000000059604645,
+        value: 36,
         unit: "px"
       },
       $type: "dimension"
     },
-    wider: {
+    "4xl": {
       $value: {
-        value: 0.800000011920929,
+        value: 48,
         unit: "px"
       },
       $type: "dimension"
     },
-    widest: {
+    "5xl": {
       $value: {
-        value: 1.600000023841858,
+        value: 48,
         unit: "px"
       },
       $type: "dimension"
-    }
-  }
-};
-
-// src/lib/contrast.ts
-var import_apca_w33 = require("apca-w3");
-var import_culori6 = require("culori");
-
-// src/lib/semantic-palette-references.ts
-var STATUS_PALETTE_FAMILIES = {
-  success: "green",
-  warning: "orange",
-  error: "red",
-  information: "blue"
-};
-var CHART_PALETTE_REFERENCES = [
-  { palette: "teal", light: "700", dark: "200" },
-  { palette: "lime", light: "700", dark: "200" },
-  { palette: "orange", light: "600", dark: "200" },
-  { 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 = [
-  "primary",
-  "secondary",
-  "success",
-  "warning",
-  "error",
-  "information"
-];
-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",
-  "popover",
-  "nav-background",
-  "nav-item-hover",
-  "nav-item-active",
-  "nav-border"
-];
-var text = (fg, bg, tier) => ({
-  fg,
-  bg,
-  tier,
-  kind: "text"
-});
-var label = (fg, bg, tier) => ({
-  fg,
-  bg,
-  tier,
-  kind: "label"
-});
-var ink = (fg, bg, tier) => ({
-  fg,
-  bg,
-  tier,
-  kind: "ink"
-});
-var APCA_PAIRS = [
-  text("foreground", "background", "body"),
-  text("foreground", "background-hover", "ui"),
-  text("foreground", "muted", "ui"),
-  text("muted-foreground", "muted", "ui"),
-  text("muted-foreground-subtle", "muted", "incidental"),
-  text("muted-foreground", "container", "ui"),
-  text("muted-foreground-subtle", "container", "incidental"),
-  text("foreground", "muted-extralight", "ui"),
-  text("muted-foreground", "muted-extralight", "ui"),
-  text("disabled-foreground", "disabled", "incidental"),
-  text("container-foreground", "container", "body"),
-  text("foreground", "container", "body"),
-  text("popover-foreground", "popover", "body"),
-  text("popover-foreground", "popover-hover", "ui"),
-  text("foreground", "control-background", "ui"),
-  text("foreground", "control-background-hover", "ui"),
-  text("nav-foreground", "nav-background", "ui"),
-  text("nav-muted-foreground", "nav-background", "incidental"),
-  text("nav-foreground", "nav-item-hover", "ui"),
-  text("nav-foreground", "nav-item-active", "ui"),
-  ink("error-subtle-foreground", "background", "ui"),
-  ink("error-subtle-foreground", "container", "ui"),
-  ...COLOR_FAMILIES.flatMap((family) => [
-    label(`${family}-foreground`, `${family}-background`, "ui"),
-    label(`${family}-foreground`, `${family}-background-hover`, "ui"),
-    label(`${family}-foreground`, `${family}-background-active`, "ui"),
-    ink(`${family}-subtle-foreground`, `${family}-subtle`, "ui"),
-    ink(`${family}-subtle-foreground`, `${family}-subtle-hover`, "ui"),
-    ink(`${family}-subtle-foreground`, `${family}-subtle-active`, "ui")
-  ]),
-  ...CATEGORICAL_INDICES.flatMap(
-    (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) => [
-    {
-      ...ink("focus-default", surface, "incidental"),
-      solveAs: "primary-subtle-foreground"
     },
-    ink("focus-error", surface, "incidental")
-  ]),
-  ...[
-    "background-active",
-    "container-hover",
-    "container-active",
-    "popover",
-    "popover-hover",
-    "popover-active",
-    "nav-background"
-  ].flatMap((surface) => [
-    text("foreground", surface, "ui"),
-    text("muted-foreground", surface, "ui"),
-    text("muted-foreground-subtle", surface, "incidental")
-  ]),
-  text("muted-foreground", "background", "ui"),
-  text("muted-foreground-subtle", "background", "incidental"),
-  text("container-foreground", "container-hover", "ui"),
-  text("container-foreground", "container-active", "ui"),
-  text("popover-foreground", "popover-active", "ui"),
-  ...["background", "container", "popover"].flatMap((backdrop) => [
-    { ...text("popover-foreground", "popover-alpha", "body"), backdrop },
-    { ...text("foreground", "background-hover-alpha", "ui"), backdrop }
-  ]),
-  ...["#000000", "#ffffff"].map((backdrop) => ({
-    ...text("popover-foreground", "popover-alpha", "body"),
-    backdrop
-  }))
-];
-
-// src/lib/perceptual-ramp.ts
-var import_culori5 = require("culori");
-var EMIT_GAMUT2 = "p3";
-var CUSP_FRACTION2 = 0.95;
-function isColor(value) {
-  return (0, import_culori5.parse)(value) !== void 0;
-}
-function seedOklch(input) {
-  const parsed = (0, import_culori5.parse)(input);
-  if (!parsed)
-    throw new Error(`perceptual-ramp: cannot parse color '${input}'`);
-  const converted = (0, import_culori5.oklch)(parsed);
-  if (!converted)
-    throw new Error(`perceptual-ramp: cannot convert '${input}' to OKLCH`);
-  return converted;
-}
-function pinnedOklch(seedHex, shade, options = {}) {
-  const { capAtSeedChroma = true } = options;
-  const seed = seedOklch(seedHex);
-  const l = PERCEPTUAL_L_GRID[shade];
-  const hue = seed.h ?? 0;
-  const seedC = seed.c ?? 0;
-  const cuspC = (0, import_culori5.clampChroma)({ mode: "oklch", l, c: 0.5, h: hue }, "oklch", EMIT_GAMUT2).c ?? 0;
-  let chroma = cuspC * CUSP_FRACTION2;
-  if (capAtSeedChroma) chroma = Math.min(chroma, seedC);
-  const target = { mode: "oklch", l, c: chroma, h: hue };
-  return formatOklch((0, import_culori5.clampChroma)(target, "oklch", EMIT_GAMUT2));
-}
-function rampFromSeed(seedHex, options = {}) {
-  const ramp = {};
-  for (const shade of SHADES)
-    ramp[shade] = pinnedOklch(seedHex, shade, options);
-  return ramp;
-}
-
-// src/lib/contrast.ts
-function normalizeContrast(value, fallback = 50) {
-  return typeof value === "number" && Number.isFinite(value) ? Math.round(Math.max(0, Math.min(100, value))) : fallback;
-}
-function contrastTarget(tier, contrast) {
-  return TIER_THRESHOLDS[tier] + 15 * contrast / 100;
-}
-var BISECT_STEPS = 12;
-function bisect(fail, pass, passes) {
-  for (let i = 0; i < BISECT_STEPS; i++) {
-    const middle = (fail + pass) / 2;
-    if (passes(middle)) pass = middle;
-    else fail = middle;
+    "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"
+    }
   }
-  return pass;
-}
-var token = (map, name) => {
-  const value = map[`--nx-color-${name}`];
-  if (value === void 0) throw new Error(`contrast: missing ${name}`);
-  return value;
 };
-function pairBackground(map, pair) {
-  const backdrop = pair.backdrop ? resolveToSrgbInts(
-    pair.backdrop.startsWith("#") ? pair.backdrop : token(map, pair.backdrop)
-  ) : void 0;
-  return resolveToSrgbInts(token(map, pair.bg), backdrop);
-}
-function contrastForPair(map, pair) {
-  const background = pairBackground(map, pair);
-  return Math.abs(
-    (0, import_apca_w33.APCAcontrast)(
-      (0, import_apca_w33.sRGBtoY)(resolveToSrgbInts(token(map, pair.fg), background)),
-      (0, import_apca_w33.sRGBtoY)(background)
-    )
-  );
-}
-var luminance = (color) => (0, import_apca_w33.sRGBtoY)(resolveToSrgbInts(color));
-var score = (foregroundY, backgroundY) => Math.abs((0, import_apca_w33.APCAcontrast)(foregroundY, backgroundY));
-function constraintsFor(map, pairs, contrast, endpointY) {
-  const constraints = [];
-  for (const pair of pairs) {
-    const backgroundY = (0, import_apca_w33.sRGBtoY)(pairBackground(map, pair));
-    const reachable = score(endpointY, backgroundY);
-    if (reachable < TIER_THRESHOLDS[pair.tier]) return void 0;
-    const target = contrastTarget(pair.tier, contrast) + (pair.offset ?? 0);
-    constraints.push({ backgroundY, target: Math.min(target, reachable) });
-  }
-  return constraints;
-}
-var keepsTextSeed = (mode, kind) => mode === "light" && kind === "text";
-function solveForeground(seed, constraints, endpoint, keepSeed) {
-  const passes = (color) => {
-    const y = luminance(color);
-    return constraints.every((c) => score(y, c.backgroundY) >= c.target);
-  };
-  if (keepSeed && passes(seed)) return seed;
-  const parsed = seedOklch(seed);
-  const at = (l) => formatOklch((0, import_culori6.clampChroma)({ ...parsed, l, alpha: 1 }, "oklch", "p3"));
-  return at(
-    bisect(keepSeed ? parsed.l : 1 - endpoint, endpoint, (l) => passes(at(l)))
-  );
-}
-var SOLVE_GROUPS = /* @__PURE__ */ new Map();
-for (const pair of APCA_PAIRS) {
-  const key = pair.solveAs ?? pair.fg;
-  const group = SOLVE_GROUPS.get(key);
-  if (!group) {
-    SOLVE_GROUPS.set(key, { kind: pair.kind, pairs: [pair] });
-    continue;
-  }
-  if (group.kind !== pair.kind)
-    throw new Error(
-      `contrast: ${pair.fg} is '${pair.kind}' but joins '${group.kind}' group ${key}`
-    );
-  group.pairs.push(pair);
-}
-function constrainFamilyFills(map, name, pairs) {
-  const basePair = pairs[0];
-  if (!basePair) throw new Error(`contrast: missing pairs for ${name}`);
-  const baseY = luminance(token(map, basePair.bg));
-  const endpoint = score(1, baseY) >= score(0, baseY) ? 1 : 0;
-  map[`--nx-color-${name}`] = `oklch(${endpoint} 0 0)`;
-  for (const pair of pairs) {
-    const floor = TIER_THRESHOLDS[pair.tier];
-    const value = token(map, pair.bg);
-    if (score(endpoint, luminance(value)) >= floor) continue;
-    const fill = seedOklch(value);
-    const at = (l) => formatOklch((0, import_culori6.clampChroma)({ ...fill, l }, "oklch", "p3"));
-    const readable = (l) => score(endpoint, luminance(at(l))) >= floor;
-    map[`--nx-color-${pair.bg}`] = at(bisect(fill.l, 1 - endpoint, readable));
-  }
-}
-function constrainColors(map, mode, contrast) {
-  for (const [name, { kind, pairs }] of SOLVE_GROUPS)
-    if (kind === "label") constrainFamilyFills(map, name, pairs);
-  const endpoint = mode === "dark" ? 1 : 0;
-  const endpointY = luminance(`oklch(${endpoint} 0 0)`);
-  for (const [name, { kind, pairs }] of SOLVE_GROUPS) {
-    if (kind === "label") continue;
-    const constraints = constraintsFor(map, pairs, contrast, endpointY);
-    if (constraints === void 0)
-      throw new Error(`contrast: no readable ${name} in ${mode}`);
-    const solved = solveForeground(
-      token(map, name),
-      constraints,
-      endpoint,
-      keepsTextSeed(mode, kind)
-    );
-    for (const fg of new Set(pairs.map((pair) => pair.fg).concat(name)))
-      map[`--nx-color-${fg}`] = solved;
-  }
-  return map;
-}
 
-// src/lib/runtime-layer.ts
-var RUNTIME_LAYER_ORDER = "@layer properties, theme, base, components, utilities, nx-runtime;";
-function inRuntimeLayer(css) {
-  return `${RUNTIME_LAYER_ORDER}
-@layer nx-runtime {
-${css}
+// 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)
+      ]
+    )
+  ]);
 }
 
 // src/lib/appearance-model.ts
@@ -2668,16 +2712,17 @@ var DEFAULT_NXDS_APPEARANCE = {
   stroke: "normal",
   prefs: {
     uiFont: '-apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif',
+    headingFont: null,
     codeFont: 'ui-monospace, "SF Mono", Menlo, monospace',
-    uiFontSize: 14,
+    uiFontSize: TYPOGRAPHY_BASE_PX,
     codeFontSize: 12,
     reduceMotion: false,
     pointerCursors: false,
     fontSmoothing: false
   }
 };
-var FONT_PX_MIN = 8;
-var FONT_PX_MAX = 32;
+var FONT_SIZE_PX_MIN = 8;
+var FONT_SIZE_PX_MAX = 32;
 var APPEARANCE_MODES = /* @__PURE__ */ new Set([
   "light",
   "dark",
@@ -2703,19 +2748,9 @@ var FONT_FAMILY_UNSAFE = /[;{}<]/;
 var fontFamilyOr = (value, fallback) => typeof value === "string" && value.length > 0 && !FONT_FAMILY_UNSAFE.test(value) ? value : fallback;
 var boolOr = (value, fallback) => typeof value === "boolean" ? value : fallback;
 var enumOr = (value, values, fallback) => typeof value === "string" && values.has(value) ? value : fallback;
-var clampFontSize = (value, fallback) => typeof value === "number" && Number.isFinite(value) && value > 0 ? Math.min(FONT_PX_MAX, Math.max(FONT_PX_MIN, value)) : fallback;
-function formatPx(value) {
-  return `${Number(value.toFixed(4))}px`;
-}
-function typographyScaleVariables(uiPx) {
-  const scale = uiPx / DEFAULT_NXDS_APPEARANCE.prefs.uiFontSize;
-  const sizeVars = Object.entries(typography_default_default.size).map(
-    ([name, token2]) => `  --nx-typography-size-${name}: ${formatPx(token2.$value.value * scale)};`
-  );
-  const lineHeightVars = Object.entries(typography_default_default["line-height"]).map(
-    ([name, token2]) => `  --nx-typography-line-height-${name}: ${formatPx(token2.$value.value * scale)};`
-  );
-  return [...sizeVars, ...lineHeightVars].join("\n");
+var clampFontSize = (value, fallback) => typeof value === "number" && Number.isFinite(value) && value > 0 ? Math.min(FONT_SIZE_PX_MAX, Math.max(FONT_SIZE_PX_MIN, value)) : fallback;
+function typographyScaleVariables(uiPx, codePx) {
+  return [...typographyScale(uiPx, codePx)].map(([name, value]) => `  ${name}: ${value};`).join("\n");
 }
 var PUBLIC_MODE_RENAME = {
   density: {
@@ -2754,6 +2789,7 @@ function sanitizeNxdsAppearancePrefs(raw) {
   const d = DEFAULT_NXDS_APPEARANCE.prefs;
   return {
     uiFont: fontFamilyOr(o.uiFont, d.uiFont),
+    headingFont: fontFamilyOr(o.headingFont, d.headingFont),
     codeFont: fontFamilyOr(o.codeFont, d.codeFont),
     uiFontSize: clampFontSize(o.uiFontSize, d.uiFontSize),
     codeFontSize: clampFontSize(o.codeFontSize, d.codeFontSize),
@@ -2800,10 +2836,10 @@ function appearancePrefsToCss(prefs) {
   const blocks = [
     inRuntimeLayer(`:root {
   --nx-typography-family-font-sans: ${prefs.uiFont};
+  --nx-typography-family-font-heading: ${prefs.headingFont ?? "var(--nx-typography-family-font-sans)"};
   --nx-typography-family-font-mono: ${prefs.codeFont};
-${typographyScaleVariables(uiPx)}
-}`),
-    `.nx\\:font-mono, .nx\\:typography-code-block, .nx\\:typography-code-inline { font-size: ${codePx}px; }`
+${typographyScaleVariables(uiPx, codePx)}
+}`)
   ];
   if (prefs.fontSmoothing) {
     blocks.push(
@@ -4900,6 +4936,127 @@ function findBrandColorPreset(color) {
   return BRAND_COLOR_PRESETS.find((preset) => preset.color === hex);
 }
 
+// src/lib/font-options.ts
+var SANS_FALLBACK = '-apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif';
+var SERIF_FALLBACK = "Georgia, serif";
+var MONO_FALLBACK = 'ui-monospace, "SF Mono", Menlo, monospace';
+var FONT_OPTIONS = [
+  {
+    value: "geist",
+    label: "Geist",
+    category: "sans",
+    family: `"Geist Variable", ${SANS_FALLBACK}`,
+    package: "@fontsource-variable/geist"
+  },
+  {
+    value: "inter",
+    label: "Inter",
+    category: "sans",
+    family: `"Inter Variable", ${SANS_FALLBACK}`,
+    package: "@fontsource-variable/inter"
+  },
+  {
+    value: "figtree",
+    label: "Figtree",
+    category: "sans",
+    family: `"Figtree Variable", ${SANS_FALLBACK}`,
+    package: "@fontsource-variable/figtree"
+  },
+  {
+    value: "dm-sans",
+    label: "DM Sans",
+    category: "sans",
+    family: `"DM Sans Variable", ${SANS_FALLBACK}`,
+    package: "@fontsource-variable/dm-sans"
+  },
+  {
+    value: "manrope",
+    label: "Manrope",
+    category: "sans",
+    family: `"Manrope Variable", ${SANS_FALLBACK}`,
+    package: "@fontsource-variable/manrope"
+  },
+  {
+    value: "ibm-plex-sans",
+    label: "IBM Plex Sans",
+    category: "sans",
+    family: `"IBM Plex Sans Variable", ${SANS_FALLBACK}`,
+    package: "@fontsource-variable/ibm-plex-sans"
+  },
+  {
+    value: "lora",
+    label: "Lora",
+    category: "serif",
+    family: `"Lora Variable", ${SERIF_FALLBACK}`,
+    package: "@fontsource-variable/lora"
+  },
+  {
+    value: "playfair-display",
+    label: "Playfair Display",
+    category: "serif",
+    family: `"Playfair Display Variable", ${SERIF_FALLBACK}`,
+    package: "@fontsource-variable/playfair-display"
+  },
+  {
+    value: "geist-mono",
+    label: "Geist Mono",
+    category: "mono",
+    family: `"Geist Mono Variable", ${MONO_FALLBACK}`,
+    package: "@fontsource-variable/geist-mono"
+  },
+  {
+    value: "jetbrains-mono",
+    label: "JetBrains Mono",
+    category: "mono",
+    family: `"JetBrains Mono Variable", ${MONO_FALLBACK}`,
+    package: "@fontsource-variable/jetbrains-mono"
+  }
+];
+
+// src/lib/icon-libraries.ts
+var ICON_LIBRARY_OPTIONS = [
+  { value: "phosphor", label: "Phosphor" },
+  { value: "lucide", label: "Lucide" },
+  { value: "tabler", label: "Tabler Icons" },
+  { value: "hugeicons", label: "HugeIcons" },
+  { value: "remix", label: "Remix Icon" }
+];
+var DEFAULT_ICON_LIBRARY = "phosphor";
+
+// src/lib/appearance-shuffle.ts
+function pick(options, random) {
+  const option = options[Math.floor(random() * options.length)];
+  if (option === void 0) throw new Error("No option to pick from.");
+  return option;
+}
+function shuffleNxdsAppearance(state, { fonts = FONT_OPTIONS, random = Math.random } = {}) {
+  const textFonts = fonts.filter((font) => font.category !== "mono").map((font) => font.family);
+  if (textFonts.length === 0) {
+    throw new Error(
+      "shuffleNxdsAppearance: `fonts` needs at least one sans or serif font."
+    );
+  }
+  return {
+    ...state,
+    brandColor: pick(BRAND_COLOR_PRESETS, random).color,
+    surfaceTone: pick(BASE_TONE_OPTIONS, random).value,
+    density: pick(DENSITY_OPTIONS, random).value,
+    corners: pick(CORNER_OPTIONS, random).value,
+    elevation: pick(ELEVATION_OPTIONS, random).value,
+    stroke: pick(STROKE_OPTIONS, random).value,
+    prefs: {
+      ...state.prefs,
+      uiFont: pick(textFonts, random),
+      headingFont: pick([null, ...textFonts], random)
+    }
+  };
+}
+function shuffleNxdsIconLibrary({
+  random = Math.random
+} = {}) {
+  return pick(ICON_LIBRARY_OPTIONS, random).value;
+}
+
 // src/lib/theme-contrast.ts
 var MODES = ["light", "dark"];
 var cssVar = (name) => `--nx-color-${name}`;
@@ -4925,6 +5082,211 @@ function measureThemeContrast(theme) {
   );
 }
 
+// src/lib/theme-fields.ts
+var DEFAULT_NXDS_THEME = {
+  appearance: DEFAULT_NXDS_APPEARANCE,
+  iconLibrary: DEFAULT_ICON_LIBRARY
+};
+function invalid(flag, value, accepted) {
+  return new Error(`--${flag} "${value}" isn't ${accepted}.`);
+}
+function withAppearance(theme, patch) {
+  return { ...theme, appearance: { ...theme.appearance, ...patch } };
+}
+function withPrefs(theme, patch) {
+  return withAppearance(theme, {
+    prefs: { ...theme.appearance.prefs, ...patch }
+  });
+}
+function oneOf(flag, values, value) {
+  const match = values.find((candidate) => candidate === value);
+  if (match === void 0) {
+    throw invalid(flag, value, `one of ${values.join(", ")}`);
+  }
+  return match;
+}
+function enumField(flag, key, description, values) {
+  return {
+    kind: "choice",
+    flag,
+    key,
+    description,
+    values,
+    read: (theme) => theme.appearance[key],
+    write: (theme, value) => withAppearance(theme, {
+      [key]: oneOf(flag, values, value)
+    })
+  };
+}
+function integer(flag, value, min, max) {
+  const parsed = Number(value);
+  if (!/^\d+$/.test(value) || parsed < min || parsed > max) {
+    throw invalid(flag, value, `a whole number from ${min} to ${max}`);
+  }
+  return parsed;
+}
+function contrastField(flag, key, description) {
+  return {
+    kind: "integer",
+    flag,
+    key,
+    description,
+    min: CONTRAST_MIN,
+    max: CONTRAST_MAX,
+    read: (theme) => String(theme.appearance[key]),
+    write: (theme, value) => withAppearance(theme, {
+      [key]: integer(flag, value, CONTRAST_MIN, CONTRAST_MAX)
+    })
+  };
+}
+function fontSizeField(flag, key, description) {
+  return {
+    kind: "integer",
+    flag,
+    key: `prefs.${key}`,
+    description,
+    min: FONT_SIZE_PX_MIN,
+    max: FONT_SIZE_PX_MAX,
+    read: (theme) => String(theme.appearance.prefs[key]),
+    write: (theme, value) => withPrefs(theme, {
+      [key]: integer(flag, value, FONT_SIZE_PX_MIN, FONT_SIZE_PX_MAX)
+    })
+  };
+}
+function fontField(flag, key, description, categories, fallback) {
+  const fonts = FONT_OPTIONS.filter(
+    (font) => categories.includes(font.category)
+  );
+  return {
+    kind: "font",
+    flag,
+    key: `prefs.${key}`,
+    description,
+    values: [fallback.value, ...fonts.map((font) => font.value)],
+    categories,
+    fallback,
+    read: (theme) => {
+      const family = theme.appearance.prefs[key];
+      if (family === fallback.family) return fallback.value;
+      return fonts.find((font) => font.family === family)?.value;
+    },
+    write: (theme, value) => {
+      const family = value === fallback.value ? fallback.family : fonts.find((font) => font.value === value)?.family;
+      if (family === void 0) {
+        throw invalid(
+          flag,
+          value,
+          `one of ${[fallback.value, ...fonts.map((font) => font.value)].join(", ")}`
+        );
+      }
+      return withPrefs(theme, { [key]: family });
+    }
+  };
+}
+var DEFAULT_PREFS = DEFAULT_NXDS_APPEARANCE.prefs;
+var TEXT_FONTS = ["sans", "serif"];
+var NXDS_THEME_FIELDS = [
+  {
+    kind: "color",
+    flag: "brand-color",
+    key: "brandColor",
+    description: 'brand color, as any CSS color, such as "#4f46e5"',
+    read: (theme) => theme.appearance.brandColor,
+    write: (theme, value) => {
+      if (!isColor(value)) throw invalid("brand-color", value, "a CSS color");
+      return withAppearance(theme, { brandColor: value });
+    }
+  },
+  enumField(
+    "surface-tone",
+    "surfaceTone",
+    "neutral tone of backgrounds and borders",
+    BASE_TONE_OPTIONS.map((option) => option.value)
+  ),
+  enumField(
+    "density",
+    "density",
+    "spacing and control size",
+    DENSITY_OPTIONS.map((option) => option.value)
+  ),
+  enumField(
+    "corners",
+    "corners",
+    "corner radius",
+    CORNER_OPTIONS.map((option) => option.value)
+  ),
+  enumField(
+    "elevation",
+    "elevation",
+    "shadow depth",
+    ELEVATION_OPTIONS.map((option) => option.value)
+  ),
+  enumField(
+    "stroke",
+    "stroke",
+    "border width",
+    STROKE_OPTIONS.map((option) => option.value)
+  ),
+  enumField("mode", "mode", "color scheme", ["light", "dark", "system"]),
+  contrastField(
+    "light-contrast",
+    "lightContrast",
+    "light mode contrast, 0 to 100"
+  ),
+  contrastField(
+    "dark-contrast",
+    "darkContrast",
+    "dark mode contrast, 0 to 100"
+  ),
+  fontField("font", "uiFont", "font for UI text", TEXT_FONTS, {
+    value: "system",
+    family: DEFAULT_PREFS.uiFont
+  }),
+  fontField(
+    "heading-font",
+    "headingFont",
+    'font for headings, or "ui" for the UI font',
+    TEXT_FONTS,
+    { value: "ui", family: null }
+  ),
+  fontField("code-font", "codeFont", "font for code", ["mono"], {
+    value: "system",
+    family: DEFAULT_PREFS.codeFont
+  }),
+  fontSizeField("font-size", "uiFontSize", "UI text size in px"),
+  fontSizeField("code-font-size", "codeFontSize", "code text size in px"),
+  {
+    kind: "choice",
+    flag: "icons",
+    description: "icon library nxds components draw",
+    values: ICON_LIBRARY_OPTIONS.map((option) => option.value),
+    read: (theme) => theme.iconLibrary,
+    write: (theme, value) => ({
+      ...theme,
+      iconLibrary: oneOf(
+        "icons",
+        ICON_LIBRARY_OPTIONS.map((option) => option.value),
+        value
+      )
+    })
+  }
+];
+function nxdsThemeFlags(theme) {
+  return NXDS_THEME_FIELDS.flatMap((field) => {
+    const value = field.read(theme);
+    if (value === void 0 || value === field.read(DEFAULT_NXDS_THEME)) {
+      return [];
+    }
+    return [{ flag: field.flag, value }];
+  });
+}
+function applyNxdsThemeFlags(theme, values) {
+  return NXDS_THEME_FIELDS.reduce((current, field) => {
+    const value = values[field.flag];
+    return value === void 0 ? current : field.write(current, value);
+  }, theme);
+}
+
 // src/lib/token-registry.ts
 var SURFACE_TOKEN_NAMES = [
   "background",
@@ -5075,12 +5437,19 @@ var SEMANTIC_TOKEN_REGISTRY = [
   CORNER_OPTIONS,
   DEFAULT_BRAND_COLOR,
   DEFAULT_COOKIE_KEY,
+  DEFAULT_ICON_LIBRARY,
   DEFAULT_NXDS_APPEARANCE,
+  DEFAULT_NXDS_THEME,
   DEFAULT_STORAGE_KEY,
   DENSITY_OPTIONS,
   ELEVATION_OPTIONS,
+  FONT_OPTIONS,
+  FONT_SIZE_PX_MAX,
+  FONT_SIZE_PX_MIN,
+  ICON_LIBRARY_OPTIONS,
   NXDS_APPEARANCE_COOKIE_MAX_AGE_SECONDS,
   NXDS_APPEARANCE_DATA_ATTRS,
+  NXDS_THEME_FIELDS,
   PALETTE_KEYS,
   RUNTIME_LAYER_ORDER,
   SEMANTIC_TOKEN_REGISTRY,
@@ -5091,6 +5460,7 @@ var SEMANTIC_TOKEN_REGISTRY = [
   apcaLc,
   appearancePrefsToCss,
   applyNxdsAppearance,
+  applyNxdsThemeFlags,
   createDefaultNxdsAppearanceSnapshot,
   createNxdsAppearanceBootstrapScript,
   createNxdsAppearanceSnapshot,
@@ -5103,6 +5473,7 @@ var SEMANTIC_TOKEN_REGISTRY = [
   isColor,
   measureThemeContrast,
   normalizeAppearanceModeIds,
+  nxdsThemeFlags,
   parseNxdsAppearanceStateCookie,
   persistNxdsAppearance,
   prefersDarkColorScheme,
@@ -5114,6 +5485,8 @@ var SEMANTIC_TOKEN_REGISTRY = [
   sanitizeNxdsAppearancePrefs,
   sanitizeNxdsAppearanceSnapshot,
   serializeNxdsAppearanceStateCookie,
+  shuffleNxdsAppearance,
+  shuffleNxdsIconLibrary,
   themeToCss,
   watchColorScheme
 });