@nxds/core 0.12.0 → 0.13.0

package/dist/runtime/index.js

@@ -1889,6 +1889,321 @@ function apcaLc(foreground, background) {
   );
 }
 
+// src/lib/contrast.ts
+import { APCAcontrast as APCAcontrast3, sRGBtoY as sRGBtoY3 } from "apca-w3";
+import { clampChroma as clampChroma5 } from "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
+import { clampChroma as clampChroma4, oklch as oklch5, parse as parse5 } from "culori";
+var EMIT_GAMUT2 = "p3";
+var CUSP_FRACTION2 = 0.95;
+function isColor(value) {
+  return parse5(value) !== void 0;
+}
+function seedOklch(input) {
+  const parsed = parse5(input);
+  if (!parsed)
+    throw new Error(`perceptual-ramp: cannot parse color '${input}'`);
+  const converted = oklch5(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 = clampChroma4({ 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(clampChroma4(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(
+    APCAcontrast3(
+      sRGBtoY3(resolveToSrgbInts(token(map, pair.fg), background)),
+      sRGBtoY3(background)
+    )
+  );
+}
+var luminance = (color) => sRGBtoY3(resolveToSrgbInts(color));
+var score = (foregroundY, backgroundY) => Math.abs(APCAcontrast3(foregroundY, backgroundY));
+function constraintsFor(map, pairs, contrast, endpointY) {
+  const constraints = [];
+  for (const pair of pairs) {
+    const backgroundY = sRGBtoY3(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(clampChroma5({ ...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(clampChroma5({ ...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: {
@@ -2027,6 +2342,13 @@ var typography_default_default = {
         unit: "px"
       },
       $type: "dimension"
+    },
+    code: {
+      $value: {
+        value: 12,
+        unit: "px"
+      },
+      $type: "dimension"
     }
   },
   weight: {
@@ -2148,384 +2470,93 @@ var typography_default_default = {
     "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/contrast.ts
-import { APCAcontrast as APCAcontrast3, sRGBtoY as sRGBtoY3 } from "apca-w3";
-import { clampChroma as clampChroma5 } from "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"
+        unit: "px"
+      },
+      $type: "dimension"
     },
-    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
-import { clampChroma as clampChroma4, oklch as oklch5, parse as parse5 } from "culori";
-var EMIT_GAMUT2 = "p3";
-var CUSP_FRACTION2 = 0.95;
-function isColor(value) {
-  return parse5(value) !== void 0;
-}
-function seedOklch(input) {
-  const parsed = parse5(input);
-  if (!parsed)
-    throw new Error(`perceptual-ramp: cannot parse color '${input}'`);
-  const converted = oklch5(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 = clampChroma4({ 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(clampChroma4(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;
+    "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(
-    APCAcontrast3(
-      sRGBtoY3(resolveToSrgbInts(token(map, pair.fg), background)),
-      sRGBtoY3(background)
-    )
-  );
-}
-var luminance = (color) => sRGBtoY3(resolveToSrgbInts(color));
-var score = (foregroundY, backgroundY) => Math.abs(APCAcontrast3(foregroundY, backgroundY));
-function constraintsFor(map, pairs, contrast, endpointY) {
-  const constraints = [];
-  for (const pair of pairs) {
-    const backgroundY = sRGBtoY3(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(clampChroma5({ ...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(clampChroma5({ ...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
@@ -2600,7 +2631,7 @@ var DEFAULT_NXDS_APPEARANCE = {
     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,
@@ -2635,18 +2666,8 @@ var fontFamilyOr = (value, fallback) => typeof value === "string" && value.lengt
 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_SIZE_PX_MAX, Math.max(FONT_SIZE_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");
+function typographyScaleVariables(uiPx, codePx) {
+  return [...typographyScale(uiPx, codePx)].map(([name, value]) => `  ${name}: ${value};`).join("\n");
 }
 var PUBLIC_MODE_RENAME = {
   density: {
@@ -2734,9 +2755,8 @@ function appearancePrefsToCss(prefs) {
   --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(