@nxds/core 0.12.0 → 0.14.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1889,329 +1889,59 @@ function apcaLc(foreground, background) {
1889
1889
  );
1890
1890
  }
1891
1891
 
1892
- // tokens/primitives/typography/typography-default.json
1893
- var typography_default_default = {
1894
- family: {
1895
- "font-sans": {
1896
- $value: "ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif",
1897
- $type: "fontFamily",
1898
- $extensions: {
1899
- "nx-font-source": {
1900
- type: "system"
1901
- }
1902
- }
1903
- },
1904
- "font-heading": {
1905
- $value: "ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif",
1906
- $type: "fontFamily",
1907
- $extensions: {
1908
- "nx-font-source": {
1909
- type: "system"
1910
- }
1911
- }
1912
- },
1913
- "font-serif": {
1914
- $value: "Georgia",
1915
- $type: "fontFamily",
1916
- $extensions: {
1917
- "nx-font-source": {
1918
- type: "system"
1919
- }
1920
- }
1921
- },
1922
- "font-mono": {
1923
- $value: "ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace",
1924
- $type: "fontFamily",
1925
- $extensions: {
1926
- "nx-font-source": {
1927
- type: "system"
1928
- }
1929
- }
1930
- }
1931
- },
1932
- size: {
1933
- xxs: {
1934
- $value: {
1935
- value: 11,
1936
- unit: "px"
1937
- },
1938
- $type: "dimension"
1939
- },
1940
- xs: {
1941
- $value: {
1942
- value: 12,
1943
- unit: "px"
1944
- },
1945
- $type: "dimension"
1946
- },
1947
- sm: {
1948
- $value: {
1949
- value: 14,
1950
- unit: "px"
1951
- },
1952
- $type: "dimension"
1953
- },
1954
- base: {
1955
- $value: {
1956
- value: 16,
1957
- unit: "px"
1958
- },
1959
- $type: "dimension"
1960
- },
1961
- lg: {
1962
- $value: {
1963
- value: 18,
1964
- unit: "px"
1965
- },
1966
- $type: "dimension"
1967
- },
1968
- xl: {
1969
- $value: {
1970
- value: 20,
1971
- unit: "px"
1972
- },
1973
- $type: "dimension"
1974
- },
1975
- "2xl": {
1976
- $value: {
1977
- value: 24,
1978
- unit: "px"
1979
- },
1980
- $type: "dimension"
1981
- },
1982
- "3xl": {
1983
- $value: {
1984
- value: 30,
1985
- unit: "px"
1986
- },
1987
- $type: "dimension"
1988
- },
1989
- "4xl": {
1990
- $value: {
1991
- value: 36,
1992
- unit: "px"
1993
- },
1994
- $type: "dimension"
1995
- },
1996
- "5xl": {
1997
- $value: {
1998
- value: 48,
1999
- unit: "px"
2000
- },
2001
- $type: "dimension"
2002
- },
2003
- "6xl": {
2004
- $value: {
2005
- value: 60,
2006
- unit: "px"
2007
- },
2008
- $type: "dimension"
2009
- },
2010
- "7xl": {
2011
- $value: {
2012
- value: 72,
2013
- unit: "px"
2014
- },
2015
- $type: "dimension"
2016
- },
2017
- "8xl": {
2018
- $value: {
2019
- value: 96,
2020
- unit: "px"
2021
- },
2022
- $type: "dimension"
2023
- },
2024
- "9xl": {
2025
- $value: {
2026
- value: 128,
2027
- unit: "px"
2028
- },
2029
- $type: "dimension"
2030
- }
2031
- },
2032
- weight: {
2033
- thin: {
2034
- $value: 100,
2035
- $type: "fontWeight"
2036
- },
2037
- extralight: {
2038
- $value: 200,
2039
- $type: "fontWeight"
2040
- },
2041
- light: {
2042
- $value: 300,
2043
- $type: "fontWeight"
2044
- },
2045
- normal: {
2046
- $value: 400,
2047
- $type: "fontWeight"
2048
- },
2049
- medium: {
2050
- $value: 500,
2051
- $type: "fontWeight"
2052
- },
2053
- semibold: {
2054
- $value: 600,
2055
- $type: "fontWeight"
2056
- },
2057
- bold: {
2058
- $value: 700,
2059
- $type: "fontWeight"
2060
- },
2061
- extrabold: {
2062
- $value: 800,
2063
- $type: "fontWeight"
2064
- },
2065
- black: {
2066
- $value: 900,
2067
- $type: "fontWeight"
2068
- }
2069
- },
2070
- "line-height": {
2071
- xxs: {
2072
- $value: {
2073
- value: 12,
2074
- unit: "px"
2075
- },
2076
- $type: "dimension"
2077
- },
2078
- xs: {
2079
- $value: {
2080
- value: 16,
2081
- unit: "px"
2082
- },
2083
- $type: "dimension"
2084
- },
2085
- sm: {
2086
- $value: {
2087
- value: 20,
2088
- unit: "px"
2089
- },
2090
- $type: "dimension"
2091
- },
2092
- base: {
2093
- $value: {
2094
- value: 24,
2095
- unit: "px"
2096
- },
2097
- $type: "dimension"
2098
- },
2099
- lg: {
2100
- $value: {
2101
- value: 28,
2102
- unit: "px"
2103
- },
2104
- $type: "dimension"
2105
- },
2106
- xl: {
2107
- $value: {
2108
- value: 28,
2109
- unit: "px"
2110
- },
2111
- $type: "dimension"
2112
- },
2113
- "2xl": {
2114
- $value: {
2115
- value: 32,
2116
- unit: "px"
2117
- },
2118
- $type: "dimension"
2119
- },
2120
- "3xl": {
2121
- $value: {
2122
- value: 36,
2123
- unit: "px"
2124
- },
2125
- $type: "dimension"
2126
- },
2127
- "4xl": {
2128
- $value: {
2129
- value: 48,
2130
- unit: "px"
2131
- },
2132
- $type: "dimension"
2133
- },
2134
- "5xl": {
2135
- $value: {
2136
- value: 48,
2137
- unit: "px"
2138
- },
2139
- $type: "dimension"
2140
- },
2141
- "6xl": {
2142
- $value: {
2143
- value: 60,
2144
- unit: "px"
2145
- },
2146
- $type: "dimension"
2147
- },
2148
- "7xl": {
2149
- $value: {
2150
- value: 72,
2151
- unit: "px"
2152
- },
2153
- $type: "dimension"
2154
- },
2155
- "8xl": {
2156
- $value: {
2157
- value: 96,
2158
- unit: "px"
2159
- },
2160
- $type: "dimension"
2161
- },
2162
- "9xl": {
2163
- $value: {
2164
- value: 128,
2165
- unit: "px"
2166
- },
2167
- $type: "dimension"
2168
- }
2169
- },
2170
- letterspacing: {
2171
- tighter: {
2172
- $value: {
2173
- value: -0.800000011920929,
2174
- unit: "px"
2175
- },
2176
- $type: "dimension"
2177
- },
2178
- tight: {
2179
- $value: {
2180
- value: -0.4000000059604645,
2181
- unit: "px"
2182
- },
2183
- $type: "dimension"
2184
- },
2185
- normal: {
2186
- $value: {
2187
- value: 0,
2188
- unit: "px"
2189
- },
2190
- $type: "dimension"
2191
- },
2192
- wide: {
2193
- $value: {
2194
- value: 0.4000000059604645,
2195
- unit: "px"
2196
- },
2197
- $type: "dimension"
2198
- },
2199
- wider: {
2200
- $value: {
2201
- value: 0.800000011920929,
2202
- unit: "px"
2203
- },
2204
- $type: "dimension"
2205
- },
2206
- widest: {
2207
- $value: {
2208
- value: 1.600000023841858,
2209
- unit: "px"
2210
- },
2211
- $type: "dimension"
2212
- }
2213
- }
1892
+ // src/lib/token-scales.generated.ts
1893
+ var PRIMITIVE_PALETTE_NAMES = [
1894
+ "green",
1895
+ "emerald",
1896
+ "teal",
1897
+ "cyan",
1898
+ "sky",
1899
+ "indigo",
1900
+ "violet",
1901
+ "purple",
1902
+ "fuchsia",
1903
+ "pink",
1904
+ "slate",
1905
+ "rose",
1906
+ "lime",
1907
+ "yellow",
1908
+ "blue",
1909
+ "gray",
1910
+ "zinc",
1911
+ "neutral",
1912
+ "stone",
1913
+ "red",
1914
+ "orange",
1915
+ "amber"
1916
+ ];
1917
+
1918
+ // src/token-source/ui-scale.ts
1919
+ var UI_SCALES = {
1920
+ small: { spacing: 0.9, text: 12 / 14, icon: 14 / 16 },
1921
+ default: { spacing: 1, text: 1, icon: 1 },
1922
+ large: { spacing: 1.1, text: 16 / 14, icon: 18 / 16 },
1923
+ larger: { spacing: 1.25, text: 18 / 14, icon: 20 / 16 }
2214
1924
  };
1925
+ var NON_DEFAULT_UI_SCALES = Object.keys(UI_SCALES).filter((scale) => scale !== "default");
1926
+ var uiScaleSelector = (scale) => `[data-ui-scale='${scale}']`;
1927
+ var TEXT_SIZES = [12, 13, 14, 15, 16];
1928
+ var DEFAULT_TEXT_SIZE = 14;
1929
+ function textSizeAttr(scale, textSize) {
1930
+ const sizeAttr = `[data-text-size='${textSize}']`;
1931
+ return scale === "default" ? sizeAttr : `${uiScaleSelector(scale)}${sizeAttr}`;
1932
+ }
1933
+ function textSizeSelector(scale, textSize) {
1934
+ if (textSize !== DEFAULT_TEXT_SIZE) return textSizeAttr(scale, textSize);
1935
+ return scale === "default" ? null : uiScaleSelector(scale);
1936
+ }
1937
+ var MIN_TEXT_PX = 8;
1938
+ var textFactor = (scale, textSize) => UI_SCALES[scale].text * (textSize / DEFAULT_TEXT_SIZE);
1939
+ function scaleText(size, scale, textSize = DEFAULT_TEXT_SIZE) {
1940
+ return Math.max(MIN_TEXT_PX, Math.round(size * textFactor(scale, textSize)));
1941
+ }
1942
+ function textSizePx(textSize, scale) {
1943
+ return scaleText(DEFAULT_TEXT_SIZE, scale, textSize);
1944
+ }
2215
1945
 
2216
1946
  // src/lib/contrast.ts
2217
1947
  import { APCAcontrast as APCAcontrast3, sRGBtoY as sRGBtoY3 } from "apca-w3";
@@ -2559,6 +2289,13 @@ var BASE_TONE_SEEDS = {
2559
2289
  dark: { background: "#111827", foreground: "#f9fafb" }
2560
2290
  }
2561
2291
  };
2292
+ var UI_SCALE_OPTIONS = [
2293
+ { value: "small", label: "Small" },
2294
+ { value: "default", label: "Default" },
2295
+ { value: "large", label: "Large" },
2296
+ { value: "larger", label: "Larger" }
2297
+ ];
2298
+ var TEXT_SIZE_OPTIONS = TEXT_SIZES.map((value) => ({ value, label: `${value}px` }));
2562
2299
  var DENSITY_OPTIONS = [
2563
2300
  { value: "tight", label: "Tight" },
2564
2301
  { value: "compact", label: "Compact" },
@@ -2592,6 +2329,8 @@ var DEFAULT_NXDS_APPEARANCE = {
2592
2329
  surfaceTone: "zinc",
2593
2330
  lightContrast: 50,
2594
2331
  darkContrast: 50,
2332
+ uiScale: "default",
2333
+ textSize: 14,
2595
2334
  density: "default",
2596
2335
  corners: "subtle",
2597
2336
  elevation: "quiet",
@@ -2600,14 +2339,13 @@ var DEFAULT_NXDS_APPEARANCE = {
2600
2339
  uiFont: '-apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif',
2601
2340
  headingFont: null,
2602
2341
  codeFont: 'ui-monospace, "SF Mono", Menlo, monospace',
2603
- uiFontSize: 14,
2604
2342
  codeFontSize: 12,
2605
2343
  reduceMotion: false,
2606
2344
  pointerCursors: false,
2607
2345
  fontSmoothing: false
2608
2346
  }
2609
2347
  };
2610
- var FONT_SIZE_PX_MIN = 8;
2348
+ var FONT_SIZE_PX_MIN = MIN_TEXT_PX;
2611
2349
  var FONT_SIZE_PX_MAX = 32;
2612
2350
  var APPEARANCE_MODES = /* @__PURE__ */ new Set([
2613
2351
  "light",
@@ -2617,6 +2355,10 @@ var APPEARANCE_MODES = /* @__PURE__ */ new Set([
2617
2355
  var SURFACE_TONES = new Set(
2618
2356
  BASE_TONE_OPTIONS.map((option) => option.value)
2619
2357
  );
2358
+ var SCALES = new Set(
2359
+ UI_SCALE_OPTIONS.map((option) => option.value)
2360
+ );
2361
+ var TEXT_SIZE_VALUES = new Set(TEXT_SIZES);
2620
2362
  var DENSITIES = new Set(
2621
2363
  DENSITY_OPTIONS.map((option) => option.value)
2622
2364
  );
@@ -2633,21 +2375,8 @@ var isRecord = (value) => typeof value === "object" && value !== null;
2633
2375
  var FONT_FAMILY_UNSAFE = /[;{}<]/;
2634
2376
  var fontFamilyOr = (value, fallback) => typeof value === "string" && value.length > 0 && !FONT_FAMILY_UNSAFE.test(value) ? value : fallback;
2635
2377
  var boolOr = (value, fallback) => typeof value === "boolean" ? value : fallback;
2636
- var enumOr = (value, values, fallback) => typeof value === "string" && values.has(value) ? value : fallback;
2378
+ var enumOr = (value, values, fallback) => values.has(value) ? value : fallback;
2637
2379
  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;
2638
- function formatPx(value) {
2639
- return `${Number(value.toFixed(4))}px`;
2640
- }
2641
- function typographyScaleVariables(uiPx) {
2642
- const scale = uiPx / DEFAULT_NXDS_APPEARANCE.prefs.uiFontSize;
2643
- const sizeVars = Object.entries(typography_default_default.size).map(
2644
- ([name, token2]) => ` --nx-typography-size-${name}: ${formatPx(token2.$value.value * scale)};`
2645
- );
2646
- const lineHeightVars = Object.entries(typography_default_default["line-height"]).map(
2647
- ([name, token2]) => ` --nx-typography-line-height-${name}: ${formatPx(token2.$value.value * scale)};`
2648
- );
2649
- return [...sizeVars, ...lineHeightVars].join("\n");
2650
- }
2651
2380
  var PUBLIC_MODE_RENAME = {
2652
2381
  density: {
2653
2382
  nova: "compact",
@@ -2687,7 +2416,6 @@ function sanitizeNxdsAppearancePrefs(raw) {
2687
2416
  uiFont: fontFamilyOr(o.uiFont, d.uiFont),
2688
2417
  headingFont: fontFamilyOr(o.headingFont, d.headingFont),
2689
2418
  codeFont: fontFamilyOr(o.codeFont, d.codeFont),
2690
- uiFontSize: clampFontSize(o.uiFontSize, d.uiFontSize),
2691
2419
  codeFontSize: clampFontSize(o.codeFontSize, d.codeFontSize),
2692
2420
  reduceMotion: boolOr(o.reduceMotion, d.reduceMotion),
2693
2421
  pointerCursors: boolOr(o.pointerCursors, d.pointerCursors),
@@ -2704,6 +2432,8 @@ function sanitizeNxdsAppearance(rawInput) {
2704
2432
  surfaceTone: enumOr(raw.surfaceTone, SURFACE_TONES, d.surfaceTone),
2705
2433
  lightContrast: normalizeContrast(raw.lightContrast, d.lightContrast),
2706
2434
  darkContrast: normalizeContrast(raw.darkContrast, d.darkContrast),
2435
+ uiScale: enumOr(raw.uiScale, SCALES, d.uiScale),
2436
+ textSize: enumOr(raw.textSize, TEXT_SIZE_VALUES, d.textSize),
2707
2437
  density: enumOr(raw.density, DENSITIES, d.density),
2708
2438
  corners: enumOr(raw.corners, CORNERS, d.corners),
2709
2439
  elevation: enumOr(raw.elevation, ELEVATIONS, d.elevation),
@@ -2720,11 +2450,19 @@ function createNxdsThemeContract(state) {
2720
2450
  dark: { accent: state.brandColor, ...tone.dark }
2721
2451
  };
2722
2452
  }
2453
+ function scaledCodeSizes(codePx) {
2454
+ return UI_SCALE_OPTIONS.flatMap(
2455
+ ({ value: scale }) => TEXT_SIZES.flatMap((textSize) => {
2456
+ const selector = textSizeSelector(scale, textSize);
2457
+ if (selector === null) return [];
2458
+ const px = scaleText(codePx, scale, textSize);
2459
+ return [`${selector} {
2460
+ --nx-typography-code-size: ${px}px;
2461
+ }`];
2462
+ })
2463
+ ).join("\n");
2464
+ }
2723
2465
  function appearancePrefsToCss(prefs) {
2724
- const uiPx = clampFontSize(
2725
- prefs.uiFontSize,
2726
- DEFAULT_NXDS_APPEARANCE.prefs.uiFontSize
2727
- );
2728
2466
  const codePx = clampFontSize(
2729
2467
  prefs.codeFontSize,
2730
2468
  DEFAULT_NXDS_APPEARANCE.prefs.codeFontSize
@@ -2734,9 +2472,9 @@ function appearancePrefsToCss(prefs) {
2734
2472
  --nx-typography-family-font-sans: ${prefs.uiFont};
2735
2473
  --nx-typography-family-font-heading: ${prefs.headingFont ?? "var(--nx-typography-family-font-sans)"};
2736
2474
  --nx-typography-family-font-mono: ${prefs.codeFont};
2737
- ${typographyScaleVariables(uiPx)}
2738
- }`),
2739
- `.nx\\:font-mono, .nx\\:typography-code-block, .nx\\:typography-code-inline { font-size: ${codePx}px; }`
2475
+ --nx-typography-code-size: ${scaleText(codePx, "default")}px;
2476
+ }
2477
+ ${scaledCodeSizes(codePx)}`)
2740
2478
  ];
2741
2479
  if (prefs.fontSmoothing) {
2742
2480
  blocks.push(
@@ -4135,32 +3873,6 @@ var color_default2 = {
4135
3873
  }
4136
3874
  };
4137
3875
 
4138
- // src/lib/token-scales.generated.ts
4139
- var PRIMITIVE_PALETTE_NAMES = [
4140
- "green",
4141
- "emerald",
4142
- "teal",
4143
- "cyan",
4144
- "sky",
4145
- "indigo",
4146
- "violet",
4147
- "purple",
4148
- "fuchsia",
4149
- "pink",
4150
- "slate",
4151
- "rose",
4152
- "lime",
4153
- "yellow",
4154
- "blue",
4155
- "gray",
4156
- "zinc",
4157
- "neutral",
4158
- "stone",
4159
- "red",
4160
- "orange",
4161
- "amber"
4162
- ];
4163
-
4164
3876
  // src/lib/primitive-palette.ts
4165
3877
  var rampCache = /* @__PURE__ */ new Map();
4166
3878
  function getPaletteRamp(palette) {
@@ -4576,10 +4288,12 @@ ${block(":root.dark", derived.dark)}`
4576
4288
  }
4577
4289
 
4578
4290
  // src/lib/appearance-snapshot.ts
4579
- var SNAPSHOT_VERSION = 9;
4291
+ var SNAPSHOT_VERSION = 11;
4580
4292
  var STATE_COOKIE_VERSION = 6;
4581
4293
  var SNAPSHOT_CACHE_LIMIT = 50;
4582
4294
  var NXDS_APPEARANCE_DATA_ATTRS = [
4295
+ "data-ui-scale",
4296
+ "data-text-size",
4583
4297
  "data-density",
4584
4298
  "data-radius",
4585
4299
  "data-shadow",
@@ -4694,6 +4408,8 @@ function resolveFirstPaint(snapshot, systemPrefersDark) {
4694
4408
  return {
4695
4409
  className: dark ? "dark" : "",
4696
4410
  dataAttrs: {
4411
+ "data-ui-scale": state.uiScale,
4412
+ "data-text-size": String(state.textSize),
4697
4413
  "data-density": state.density,
4698
4414
  "data-radius": state.corners,
4699
4415
  "data-shadow": state.elevation,
@@ -4709,7 +4425,7 @@ function escapeInlineScriptJson(value) {
4709
4425
  function createNxdsAppearanceBootstrapScript(options = {}) {
4710
4426
  const storageKey = options.storageKey ?? DEFAULT_STORAGE_KEY;
4711
4427
  const defaultSnapshot = options.defaultSnapshot ? sanitizeNxdsAppearanceSnapshot(options.defaultSnapshot) : createDefaultNxdsAppearanceSnapshot();
4712
- 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){}})();`;
4428
+ 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){}})();`;
4713
4429
  }
4714
4430
 
4715
4431
  // src/lib/appearance-dom.ts
@@ -5036,20 +4752,6 @@ function contrastField(flag, key, description) {
5036
4752
  })
5037
4753
  };
5038
4754
  }
5039
- function fontSizeField(flag, key, description) {
5040
- return {
5041
- kind: "integer",
5042
- flag,
5043
- key: `prefs.${key}`,
5044
- description,
5045
- min: FONT_SIZE_PX_MIN,
5046
- max: FONT_SIZE_PX_MAX,
5047
- read: (theme) => String(theme.appearance.prefs[key]),
5048
- write: (theme, value) => withPrefs(theme, {
5049
- [key]: integer(flag, value, FONT_SIZE_PX_MIN, FONT_SIZE_PX_MAX)
5050
- })
5051
- };
5052
- }
5053
4755
  function fontField(flag, key, description, categories, fallback) {
5054
4756
  const fonts = FONT_OPTIONS.filter(
5055
4757
  (font) => categories.includes(font.category)
@@ -5080,6 +4782,9 @@ function fontField(flag, key, description, categories, fallback) {
5080
4782
  }
5081
4783
  };
5082
4784
  }
4785
+ var TEXT_SIZES2 = TEXT_SIZE_OPTIONS.map((option) => option.value);
4786
+ var TEXT_SIZE_MIN = Math.min(...TEXT_SIZES2);
4787
+ var TEXT_SIZE_MAX = Math.max(...TEXT_SIZES2);
5083
4788
  var DEFAULT_PREFS = DEFAULT_NXDS_APPEARANCE.prefs;
5084
4789
  var TEXT_FONTS = ["sans", "serif"];
5085
4790
  var NXDS_THEME_FIELDS = [
@@ -5100,6 +4805,30 @@ var NXDS_THEME_FIELDS = [
5100
4805
  "neutral tone of backgrounds and borders",
5101
4806
  BASE_TONE_OPTIONS.map((option) => option.value)
5102
4807
  ),
4808
+ enumField(
4809
+ "ui-scale",
4810
+ "uiScale",
4811
+ "size of text, icons and spacing together",
4812
+ UI_SCALE_OPTIONS.map((option) => option.value)
4813
+ ),
4814
+ {
4815
+ kind: "integer",
4816
+ flag: "text-size",
4817
+ key: "textSize",
4818
+ description: `label text size in px at the default UI scale, ${TEXT_SIZE_MIN} to ${TEXT_SIZE_MAX}`,
4819
+ min: TEXT_SIZE_MIN,
4820
+ max: TEXT_SIZE_MAX,
4821
+ read: (theme) => String(theme.appearance.textSize),
4822
+ write: (theme, value) => withAppearance(theme, {
4823
+ // Every whole number from the minimum to the maximum is a text size.
4824
+ textSize: integer(
4825
+ "text-size",
4826
+ value,
4827
+ TEXT_SIZE_MIN,
4828
+ TEXT_SIZE_MAX
4829
+ )
4830
+ })
4831
+ },
5103
4832
  enumField(
5104
4833
  "density",
5105
4834
  "density",
@@ -5150,8 +4879,23 @@ var NXDS_THEME_FIELDS = [
5150
4879
  value: "system",
5151
4880
  family: DEFAULT_PREFS.codeFont
5152
4881
  }),
5153
- fontSizeField("font-size", "uiFontSize", "UI text size in px"),
5154
- fontSizeField("code-font-size", "codeFontSize", "code text size in px"),
4882
+ {
4883
+ kind: "integer",
4884
+ flag: "code-font-size",
4885
+ key: "prefs.codeFontSize",
4886
+ description: "code text size in px",
4887
+ min: FONT_SIZE_PX_MIN,
4888
+ max: FONT_SIZE_PX_MAX,
4889
+ read: (theme) => String(theme.appearance.prefs.codeFontSize),
4890
+ write: (theme, value) => withPrefs(theme, {
4891
+ codeFontSize: integer(
4892
+ "code-font-size",
4893
+ value,
4894
+ FONT_SIZE_PX_MIN,
4895
+ FONT_SIZE_PX_MAX
4896
+ )
4897
+ })
4898
+ },
5155
4899
  {
5156
4900
  kind: "choice",
5157
4901
  flag: "icons",
@@ -5351,7 +5095,9 @@ export {
5351
5095
  SEMANTIC_TOKEN_REGISTRY,
5352
5096
  SNAPSHOT_VERSION,
5353
5097
  STROKE_OPTIONS,
5098
+ TEXT_SIZE_OPTIONS,
5354
5099
  TIER_THRESHOLDS,
5100
+ UI_SCALE_OPTIONS,
5355
5101
  adjustContrast,
5356
5102
  apcaLc,
5357
5103
  appearancePrefsToCss,
@@ -5383,6 +5129,7 @@ export {
5383
5129
  serializeNxdsAppearanceStateCookie,
5384
5130
  shuffleNxdsAppearance,
5385
5131
  shuffleNxdsIconLibrary,
5132
+ textSizePx,
5386
5133
  themeToCss,
5387
5134
  watchColorScheme
5388
5135
  };