@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.
- package/README.md +11 -2
- package/dist/runtime/catalogue.cjs +1070 -742
- package/dist/runtime/catalogue.cjs.map +1 -1
- package/dist/runtime/catalogue.d.cts +40 -16
- package/dist/runtime/catalogue.d.ts +40 -16
- package/dist/runtime/catalogue.js +1070 -742
- package/dist/runtime/catalogue.js.map +1 -1
- package/dist/runtime/index.cjs +140 -390
- package/dist/runtime/index.cjs.map +1 -1
- package/dist/runtime/index.d.cts +5 -5
- package/dist/runtime/index.d.ts +5 -5
- package/dist/runtime/index.js +137 -390
- package/dist/runtime/index.js.map +1 -1
- package/dist/runtime/palette.cjs.map +1 -1
- package/dist/runtime/palette.js.map +1 -1
- package/dist/runtime/{surface-ladder-CAjRqzCx.d.ts → surface-ladder-B8LyPHC_.d.ts} +64 -3
- package/dist/runtime/{surface-ladder-tv7B_RKy.d.cts → surface-ladder-DQ9Yfwie.d.cts} +64 -3
- package/package.json +1 -1
package/dist/runtime/index.js
CHANGED
|
@@ -1889,329 +1889,59 @@ function apcaLc(foreground, background) {
|
|
|
1889
1889
|
);
|
|
1890
1890
|
}
|
|
1891
1891
|
|
|
1892
|
-
//
|
|
1893
|
-
var
|
|
1894
|
-
|
|
1895
|
-
|
|
1896
|
-
|
|
1897
|
-
|
|
1898
|
-
|
|
1899
|
-
|
|
1900
|
-
|
|
1901
|
-
|
|
1902
|
-
|
|
1903
|
-
|
|
1904
|
-
|
|
1905
|
-
|
|
1906
|
-
|
|
1907
|
-
|
|
1908
|
-
|
|
1909
|
-
|
|
1910
|
-
|
|
1911
|
-
|
|
1912
|
-
|
|
1913
|
-
|
|
1914
|
-
|
|
1915
|
-
|
|
1916
|
-
|
|
1917
|
-
|
|
1918
|
-
|
|
1919
|
-
|
|
1920
|
-
|
|
1921
|
-
|
|
1922
|
-
|
|
1923
|
-
|
|
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 =
|
|
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) =>
|
|
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
|
-
${
|
|
2738
|
-
}
|
|
2739
|
-
|
|
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 =
|
|
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
|
-
|
|
5154
|
-
|
|
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
|
};
|