@nxds/core 0.12.0 → 0.14.0

package/dist/runtime/index.cjs

@@ -44,7 +44,9 @@ __export(src_exports, {
   SEMANTIC_TOKEN_REGISTRY: () => SEMANTIC_TOKEN_REGISTRY,
   SNAPSHOT_VERSION: () => SNAPSHOT_VERSION,
   STROKE_OPTIONS: () => STROKE_OPTIONS,
+  TEXT_SIZE_OPTIONS: () => TEXT_SIZE_OPTIONS,
   TIER_THRESHOLDS: () => TIER_THRESHOLDS,
+  UI_SCALE_OPTIONS: () => UI_SCALE_OPTIONS,
   adjustContrast: () => adjustContrast,
   apcaLc: () => apcaLc,
   appearancePrefsToCss: () => appearancePrefsToCss,
@@ -76,6 +78,7 @@ __export(src_exports, {
   serializeNxdsAppearanceStateCookie: () => serializeNxdsAppearanceStateCookie,
   shuffleNxdsAppearance: () => shuffleNxdsAppearance,
   shuffleNxdsIconLibrary: () => shuffleNxdsIconLibrary,
+  textSizePx: () => textSizePx,
   themeToCss: () => themeToCss,
   watchColorScheme: () => watchColorScheme
 });
@@ -1972,329 +1975,59 @@ function apcaLc(foreground, background) {
   );
 }
 
-// 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"
-        }
-      }
-    }
-  },
-  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"
-      },
-      $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/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/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 MIN_TEXT_PX = 8;
+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 textSizePx(textSize, scale) {
+  return scaleText(DEFAULT_TEXT_SIZE, scale, textSize);
+}
 
 // src/lib/contrast.ts
 var import_apca_w33 = require("apca-w3");
@@ -2642,6 +2375,13 @@ var BASE_TONE_SEEDS = {
     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" },
@@ -2675,6 +2415,8 @@ var DEFAULT_NXDS_APPEARANCE = {
   surfaceTone: "zinc",
   lightContrast: 50,
   darkContrast: 50,
+  uiScale: "default",
+  textSize: 14,
   density: "default",
   corners: "subtle",
   elevation: "quiet",
@@ -2683,14 +2425,13 @@ var DEFAULT_NXDS_APPEARANCE = {
     uiFont: '-apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif',
     headingFont: null,
     codeFont: 'ui-monospace, "SF Mono", Menlo, monospace',
-    uiFontSize: 14,
     codeFontSize: 12,
     reduceMotion: false,
     pointerCursors: false,
     fontSmoothing: false
   }
 };
-var FONT_SIZE_PX_MIN = 8;
+var FONT_SIZE_PX_MIN = MIN_TEXT_PX;
 var FONT_SIZE_PX_MAX = 32;
 var APPEARANCE_MODES = /* @__PURE__ */ new Set([
   "light",
@@ -2700,6 +2441,10 @@ var APPEARANCE_MODES = /* @__PURE__ */ new Set([
 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)
 );
@@ -2716,21 +2461,8 @@ var isRecord = (value) => typeof value === "object" && value !== null;
 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 enumOr = (value, values, fallback) => 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");
-}
 var PUBLIC_MODE_RENAME = {
   density: {
     nova: "compact",
@@ -2770,7 +2502,6 @@ function sanitizeNxdsAppearancePrefs(raw) {
     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),
     reduceMotion: boolOr(o.reduceMotion, d.reduceMotion),
     pointerCursors: boolOr(o.pointerCursors, d.pointerCursors),
@@ -2787,6 +2518,8 @@ function sanitizeNxdsAppearance(rawInput) {
     surfaceTone: enumOr(raw.surfaceTone, SURFACE_TONES, d.surfaceTone),
     lightContrast: normalizeContrast(raw.lightContrast, d.lightContrast),
     darkContrast: normalizeContrast(raw.darkContrast, d.darkContrast),
+    uiScale: enumOr(raw.uiScale, SCALES, d.uiScale),
+    textSize: enumOr(raw.textSize, TEXT_SIZE_VALUES, d.textSize),
     density: enumOr(raw.density, DENSITIES, d.density),
     corners: enumOr(raw.corners, CORNERS, d.corners),
     elevation: enumOr(raw.elevation, ELEVATIONS, d.elevation),
@@ -2803,11 +2536,19 @@ function createNxdsThemeContract(state) {
     dark: { accent: state.brandColor, ...tone.dark }
   };
 }
+function scaledCodeSizes(codePx) {
+  return UI_SCALE_OPTIONS.flatMap(
+    ({ value: scale }) => TEXT_SIZES.flatMap((textSize) => {
+      const selector = textSizeSelector(scale, textSize);
+      if (selector === null) return [];
+      const px = scaleText(codePx, scale, textSize);
+      return [`${selector} {
+  --nx-typography-code-size: ${px}px;
+}`];
+    })
+  ).join("\n");
+}
 function appearancePrefsToCss(prefs) {
-  const uiPx = clampFontSize(
-    prefs.uiFontSize,
-    DEFAULT_NXDS_APPEARANCE.prefs.uiFontSize
-  );
   const codePx = clampFontSize(
     prefs.codeFontSize,
     DEFAULT_NXDS_APPEARANCE.prefs.codeFontSize
@@ -2817,9 +2558,9 @@ 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; }`
+  --nx-typography-code-size: ${scaleText(codePx, "default")}px;
+}
+${scaledCodeSizes(codePx)}`)
   ];
   if (prefs.fontSmoothing) {
     blocks.push(
@@ -4218,32 +3959,6 @@ var color_default2 = {
   }
 };
 
-// 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) {
@@ -4659,10 +4374,12 @@ ${block(":root.dark", derived.dark)}`
 }
 
 // src/lib/appearance-snapshot.ts
-var SNAPSHOT_VERSION = 9;
+var SNAPSHOT_VERSION = 11;
 var STATE_COOKIE_VERSION = 6;
 var SNAPSHOT_CACHE_LIMIT = 50;
 var NXDS_APPEARANCE_DATA_ATTRS = [
+  "data-ui-scale",
+  "data-text-size",
   "data-density",
   "data-radius",
   "data-shadow",
@@ -4777,6 +4494,8 @@ function resolveFirstPaint(snapshot, systemPrefersDark) {
   return {
     className: dark ? "dark" : "",
     dataAttrs: {
+      "data-ui-scale": state.uiScale,
+      "data-text-size": String(state.textSize),
       "data-density": state.density,
       "data-radius": state.corners,
       "data-shadow": state.elevation,
@@ -4792,7 +4511,7 @@ function escapeInlineScriptJson(value) {
 function createNxdsAppearanceBootstrapScript(options = {}) {
   const storageKey = options.storageKey ?? DEFAULT_STORAGE_KEY;
   const defaultSnapshot = options.defaultSnapshot ? sanitizeNxdsAppearanceSnapshot(options.defaultSnapshot) : createDefaultNxdsAppearanceSnapshot();
-  return `(function(){try{var k=${escapeInlineScriptJson(storageKey)};var f=${escapeInlineScriptJson(defaultSnapshot)};var s=f;try{if(k!==false){var r=window.localStorage&&window.localStorage.getItem(k);if(r){var p=JSON.parse(r);if(p&&p.version===f.version&&p.state&&typeof p.themeCss==="string"&&typeof p.prefsCss==="string"){s=p;}}}}catch(e){}var st=s.state||f.state;var m=st.mode==="dark"||st.mode==="light"||st.mode==="system"?st.mode:f.state.mode;var sys=false;try{sys=m==="system"&&window.matchMedia&&window.matchMedia("(prefers-color-scheme: dark)").matches;}catch(e){}var dark=m==="dark"||sys===true;var root=document.documentElement;root.classList.toggle("dark",dark);root.setAttribute("data-density",typeof st.density==="string"?st.density:f.state.density);root.setAttribute("data-radius",typeof st.corners==="string"?st.corners:f.state.corners);root.setAttribute("data-shadow",typeof st.elevation==="string"?st.elevation:f.state.elevation);root.setAttribute("data-borderwidth",typeof st.stroke==="string"?st.stroke:f.state.stroke);function upsert(attr,css){var list=document.querySelectorAll("style["+attr+"]");var el=list[0]||document.createElement("style");for(var i=1;i<list.length;i++){list[i].remove();}el.setAttribute(attr,"");el.textContent=css||"";if(!el.parentNode){document.head.appendChild(el);}}upsert("data-nxds-appearance-theme",s.themeCss);upsert("data-nxds-appearance-prefs",s.prefsCss);}catch(e){}})();`;
+  return `(function(){try{var k=${escapeInlineScriptJson(storageKey)};var f=${escapeInlineScriptJson(defaultSnapshot)};var s=f;try{if(k!==false){var r=window.localStorage&&window.localStorage.getItem(k);if(r){var p=JSON.parse(r);if(p&&p.version===f.version&&p.state&&typeof p.themeCss==="string"&&typeof p.prefsCss==="string"){s=p;}}}}catch(e){}var st=s.state||f.state;var m=st.mode==="dark"||st.mode==="light"||st.mode==="system"?st.mode:f.state.mode;var sys=false;try{sys=m==="system"&&window.matchMedia&&window.matchMedia("(prefers-color-scheme: dark)").matches;}catch(e){}var dark=m==="dark"||sys===true;var root=document.documentElement;root.classList.toggle("dark",dark);root.setAttribute("data-ui-scale",typeof st.uiScale==="string"?st.uiScale:f.state.uiScale);root.setAttribute("data-text-size",String(typeof st.textSize==="number"?st.textSize:f.state.textSize));root.setAttribute("data-density",typeof st.density==="string"?st.density:f.state.density);root.setAttribute("data-radius",typeof st.corners==="string"?st.corners:f.state.corners);root.setAttribute("data-shadow",typeof st.elevation==="string"?st.elevation:f.state.elevation);root.setAttribute("data-borderwidth",typeof st.stroke==="string"?st.stroke:f.state.stroke);function upsert(attr,css){var list=document.querySelectorAll("style["+attr+"]");var el=list[0]||document.createElement("style");for(var i=1;i<list.length;i++){list[i].remove();}el.setAttribute(attr,"");el.textContent=css||"";if(!el.parentNode){document.head.appendChild(el);}}upsert("data-nxds-appearance-theme",s.themeCss);upsert("data-nxds-appearance-prefs",s.prefsCss);}catch(e){}})();`;
 }
 
 // src/lib/appearance-dom.ts
@@ -5119,20 +4838,6 @@ function contrastField(flag, key, description) {
     })
   };
 }
-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)
@@ -5163,6 +4868,9 @@ function fontField(flag, key, description, categories, fallback) {
     }
   };
 }
+var TEXT_SIZES2 = TEXT_SIZE_OPTIONS.map((option) => option.value);
+var TEXT_SIZE_MIN = Math.min(...TEXT_SIZES2);
+var TEXT_SIZE_MAX = Math.max(...TEXT_SIZES2);
 var DEFAULT_PREFS = DEFAULT_NXDS_APPEARANCE.prefs;
 var TEXT_FONTS = ["sans", "serif"];
 var NXDS_THEME_FIELDS = [
@@ -5183,6 +4891,30 @@ var NXDS_THEME_FIELDS = [
     "neutral tone of backgrounds and borders",
     BASE_TONE_OPTIONS.map((option) => option.value)
   ),
+  enumField(
+    "ui-scale",
+    "uiScale",
+    "size of text, icons and spacing together",
+    UI_SCALE_OPTIONS.map((option) => option.value)
+  ),
+  {
+    kind: "integer",
+    flag: "text-size",
+    key: "textSize",
+    description: `label text size in px at the default UI scale, ${TEXT_SIZE_MIN} to ${TEXT_SIZE_MAX}`,
+    min: TEXT_SIZE_MIN,
+    max: TEXT_SIZE_MAX,
+    read: (theme) => String(theme.appearance.textSize),
+    write: (theme, value) => withAppearance(theme, {
+      // Every whole number from the minimum to the maximum is a text size.
+      textSize: integer(
+        "text-size",
+        value,
+        TEXT_SIZE_MIN,
+        TEXT_SIZE_MAX
+      )
+    })
+  },
   enumField(
     "density",
     "density",
@@ -5233,8 +4965,23 @@ var NXDS_THEME_FIELDS = [
     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: "integer",
+    flag: "code-font-size",
+    key: "prefs.codeFontSize",
+    description: "code text size in px",
+    min: FONT_SIZE_PX_MIN,
+    max: FONT_SIZE_PX_MAX,
+    read: (theme) => String(theme.appearance.prefs.codeFontSize),
+    write: (theme, value) => withPrefs(theme, {
+      codeFontSize: integer(
+        "code-font-size",
+        value,
+        FONT_SIZE_PX_MIN,
+        FONT_SIZE_PX_MAX
+      )
+    })
+  },
   {
     kind: "choice",
     flag: "icons",
@@ -5435,7 +5182,9 @@ var SEMANTIC_TOKEN_REGISTRY = [
   SEMANTIC_TOKEN_REGISTRY,
   SNAPSHOT_VERSION,
   STROKE_OPTIONS,
+  TEXT_SIZE_OPTIONS,
   TIER_THRESHOLDS,
+  UI_SCALE_OPTIONS,
   adjustContrast,
   apcaLc,
   appearancePrefsToCss,
@@ -5467,6 +5216,7 @@ var SEMANTIC_TOKEN_REGISTRY = [
   serializeNxdsAppearanceStateCookie,
   shuffleNxdsAppearance,
   shuffleNxdsIconLibrary,
+  textSizePx,
   themeToCss,
   watchColorScheme
 });