@nxds/core 0.11.0 → 0.12.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/dist/runtime/catalogue.cjs +41 -2
- package/dist/runtime/catalogue.cjs.map +1 -1
- package/dist/runtime/catalogue.d.cts +2 -2
- package/dist/runtime/catalogue.d.ts +2 -2
- package/dist/runtime/catalogue.js +41 -2
- package/dist/runtime/catalogue.js.map +1 -1
- package/dist/runtime/index.cjs +357 -4
- package/dist/runtime/index.cjs.map +1 -1
- package/dist/runtime/index.d.cts +192 -3
- package/dist/runtime/index.d.ts +192 -3
- package/dist/runtime/index.js +346 -4
- package/dist/runtime/index.js.map +1 -1
- package/dist/runtime/{surface-ladder-B950TU4_.d.ts → surface-ladder-CAjRqzCx.d.ts} +6 -1
- package/dist/runtime/{surface-ladder-C8HTwT7z.d.cts → surface-ladder-tv7B_RKy.d.cts} +6 -1
- package/package.json +1 -1
package/dist/runtime/index.d.cts
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { T as Tier, P as PaletteKey, M as Mode } from './palette-BKTIQ0WC.cjs';
|
|
2
2
|
export { N as NxdsSurfaceTone, a as PALETTE_KEYS, b as TIER_THRESHOLDS } from './palette-BKTIQ0WC.cjs';
|
|
3
|
-
import { b as NxdsAppearanceState, d as DerivedTheme } from './surface-ladder-
|
|
4
|
-
export { B as BASE_TONE_OPTIONS, e as BASE_TONE_SEEDS, C as CORNER_OPTIONS, f as DEFAULT_BRAND_COLOR, g as DEFAULT_NXDS_APPEARANCE, h as DENSITY_OPTIONS, E as ELEVATION_OPTIONS,
|
|
3
|
+
import { b as NxdsAppearanceState, d as DerivedTheme, a as NxdsAppearancePrefs } from './surface-ladder-tv7B_RKy.cjs';
|
|
4
|
+
export { B as BASE_TONE_OPTIONS, e as BASE_TONE_SEEDS, C as CORNER_OPTIONS, f as DEFAULT_BRAND_COLOR, g as DEFAULT_NXDS_APPEARANCE, h as DENSITY_OPTIONS, E as ELEVATION_OPTIONS, F as FONT_SIZE_PX_MAX, i as FONT_SIZE_PX_MIN, j as NxdsAppearanceMode, k as NxdsCorners, l as NxdsDensity, m as NxdsElevation, N as NxdsPresetField, n as NxdsStroke, o as NxdsThemeContract, p as STROKE_OPTIONS, q as SurfaceToken, T as ThemeDerivationInput, r as ThemeSeeds, s as TokenMap, t as appearancePrefsToCss, u as createNxdsThemeContract, v as deriveTheme, w as normalizeAppearanceModeIds, x as sanitizeNxdsAppearance, y as sanitizeNxdsAppearancePrefs, z as themeToCss } from './surface-ladder-tv7B_RKy.cjs';
|
|
5
5
|
export { S as SpacingStep } from './token-scales.generated-CCNkHJ3I.cjs';
|
|
6
6
|
|
|
7
7
|
type AdjustContrastTier = Tier;
|
|
@@ -96,6 +96,119 @@ declare function removeNxdsAppearance(): void;
|
|
|
96
96
|
/** Saves the appearance for the first-paint script and, optionally, the server. */
|
|
97
97
|
declare function persistNxdsAppearance(state: NxdsAppearanceState, { storageKey, cookieWriteKey, cookieOptions, }: NxdsAppearancePersistOptions): void;
|
|
98
98
|
|
|
99
|
+
type NxdsFontCategory = 'sans' | 'serif' | 'mono';
|
|
100
|
+
interface NxdsFontOption {
|
|
101
|
+
readonly value: string;
|
|
102
|
+
readonly label: string;
|
|
103
|
+
readonly category: NxdsFontCategory;
|
|
104
|
+
/** The `font-family` stack the appearance prefs store. */
|
|
105
|
+
readonly family: string;
|
|
106
|
+
/** The Fontsource package that self-hosts the font. */
|
|
107
|
+
readonly package: string;
|
|
108
|
+
}
|
|
109
|
+
/** The fonts nxds offers beside the system stacks, self-hosted through Fontsource. */
|
|
110
|
+
declare const FONT_OPTIONS: readonly [{
|
|
111
|
+
readonly value: "geist";
|
|
112
|
+
readonly label: "Geist";
|
|
113
|
+
readonly category: "sans";
|
|
114
|
+
readonly family: "\"Geist Variable\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", sans-serif";
|
|
115
|
+
readonly package: "@fontsource-variable/geist";
|
|
116
|
+
}, {
|
|
117
|
+
readonly value: "inter";
|
|
118
|
+
readonly label: "Inter";
|
|
119
|
+
readonly category: "sans";
|
|
120
|
+
readonly family: "\"Inter Variable\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", sans-serif";
|
|
121
|
+
readonly package: "@fontsource-variable/inter";
|
|
122
|
+
}, {
|
|
123
|
+
readonly value: "figtree";
|
|
124
|
+
readonly label: "Figtree";
|
|
125
|
+
readonly category: "sans";
|
|
126
|
+
readonly family: "\"Figtree Variable\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", sans-serif";
|
|
127
|
+
readonly package: "@fontsource-variable/figtree";
|
|
128
|
+
}, {
|
|
129
|
+
readonly value: "dm-sans";
|
|
130
|
+
readonly label: "DM Sans";
|
|
131
|
+
readonly category: "sans";
|
|
132
|
+
readonly family: "\"DM Sans Variable\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", sans-serif";
|
|
133
|
+
readonly package: "@fontsource-variable/dm-sans";
|
|
134
|
+
}, {
|
|
135
|
+
readonly value: "manrope";
|
|
136
|
+
readonly label: "Manrope";
|
|
137
|
+
readonly category: "sans";
|
|
138
|
+
readonly family: "\"Manrope Variable\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", sans-serif";
|
|
139
|
+
readonly package: "@fontsource-variable/manrope";
|
|
140
|
+
}, {
|
|
141
|
+
readonly value: "ibm-plex-sans";
|
|
142
|
+
readonly label: "IBM Plex Sans";
|
|
143
|
+
readonly category: "sans";
|
|
144
|
+
readonly family: "\"IBM Plex Sans Variable\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", sans-serif";
|
|
145
|
+
readonly package: "@fontsource-variable/ibm-plex-sans";
|
|
146
|
+
}, {
|
|
147
|
+
readonly value: "lora";
|
|
148
|
+
readonly label: "Lora";
|
|
149
|
+
readonly category: "serif";
|
|
150
|
+
readonly family: "\"Lora Variable\", Georgia, serif";
|
|
151
|
+
readonly package: "@fontsource-variable/lora";
|
|
152
|
+
}, {
|
|
153
|
+
readonly value: "playfair-display";
|
|
154
|
+
readonly label: "Playfair Display";
|
|
155
|
+
readonly category: "serif";
|
|
156
|
+
readonly family: "\"Playfair Display Variable\", Georgia, serif";
|
|
157
|
+
readonly package: "@fontsource-variable/playfair-display";
|
|
158
|
+
}, {
|
|
159
|
+
readonly value: "geist-mono";
|
|
160
|
+
readonly label: "Geist Mono";
|
|
161
|
+
readonly category: "mono";
|
|
162
|
+
readonly family: "\"Geist Mono Variable\", ui-monospace, \"SF Mono\", Menlo, monospace";
|
|
163
|
+
readonly package: "@fontsource-variable/geist-mono";
|
|
164
|
+
}, {
|
|
165
|
+
readonly value: "jetbrains-mono";
|
|
166
|
+
readonly label: "JetBrains Mono";
|
|
167
|
+
readonly category: "mono";
|
|
168
|
+
readonly family: "\"JetBrains Mono Variable\", ui-monospace, \"SF Mono\", Menlo, monospace";
|
|
169
|
+
readonly package: "@fontsource-variable/jetbrains-mono";
|
|
170
|
+
}];
|
|
171
|
+
type NxdsFont = (typeof FONT_OPTIONS)[number]['value'];
|
|
172
|
+
|
|
173
|
+
/** The icon libraries nxds components can draw their own icons with. */
|
|
174
|
+
declare const ICON_LIBRARY_OPTIONS: readonly [{
|
|
175
|
+
readonly value: "phosphor";
|
|
176
|
+
readonly label: "Phosphor";
|
|
177
|
+
}, {
|
|
178
|
+
readonly value: "lucide";
|
|
179
|
+
readonly label: "Lucide";
|
|
180
|
+
}, {
|
|
181
|
+
readonly value: "tabler";
|
|
182
|
+
readonly label: "Tabler Icons";
|
|
183
|
+
}, {
|
|
184
|
+
readonly value: "hugeicons";
|
|
185
|
+
readonly label: "HugeIcons";
|
|
186
|
+
}, {
|
|
187
|
+
readonly value: "remix";
|
|
188
|
+
readonly label: "Remix Icon";
|
|
189
|
+
}];
|
|
190
|
+
type NxdsIconLibrary = (typeof ICON_LIBRARY_OPTIONS)[number]['value'];
|
|
191
|
+
declare const DEFAULT_ICON_LIBRARY: NxdsIconLibrary;
|
|
192
|
+
|
|
193
|
+
interface NxdsShuffleOptions {
|
|
194
|
+
/**
|
|
195
|
+
* The fonts the UI and heading fonts come from. Monospace fonts are skipped,
|
|
196
|
+
* so it needs at least one sans or serif font. Leave it out to pick from
|
|
197
|
+
* every curated font.
|
|
198
|
+
*/
|
|
199
|
+
readonly fonts?: readonly NxdsFontOption[];
|
|
200
|
+
/** Returns a number in [0, 1), like `Math.random`. */
|
|
201
|
+
readonly random?: () => number;
|
|
202
|
+
}
|
|
203
|
+
/**
|
|
204
|
+
* A random appearance from nxds's curated options: brand color preset, surface
|
|
205
|
+
* tone, density, corners, elevation, stroke, UI font and heading font. Mode,
|
|
206
|
+
* contrast and the other preferences stay as `state` has them.
|
|
207
|
+
*/
|
|
208
|
+
declare function shuffleNxdsAppearance(state: NxdsAppearanceState, { fonts, random }?: NxdsShuffleOptions): NxdsAppearanceState;
|
|
209
|
+
/** A random icon library. */
|
|
210
|
+
declare function shuffleNxdsIconLibrary({ random, }?: Pick<NxdsShuffleOptions, 'random'>): NxdsIconLibrary;
|
|
211
|
+
|
|
99
212
|
declare const SNAPSHOT_VERSION = 9;
|
|
100
213
|
declare const STATE_COOKIE_VERSION = 6;
|
|
101
214
|
declare const NXDS_APPEARANCE_DATA_ATTRS: readonly ["data-density", "data-radius", "data-shadow", "data-borderwidth"];
|
|
@@ -172,6 +285,82 @@ interface ThemeContrastCheck {
|
|
|
172
285
|
/** Measure every registered APCA pair of a derived theme in both modes. */
|
|
173
286
|
declare function measureThemeContrast(theme: DerivedTheme): ThemeContrastCheck[];
|
|
174
287
|
|
|
288
|
+
/**
|
|
289
|
+
* An app's theme: the appearance it starts from, and the icon library its
|
|
290
|
+
* components draw. The icon library is set when the app installs nxds, so it
|
|
291
|
+
* isn't part of the appearance an app can change at runtime.
|
|
292
|
+
*/
|
|
293
|
+
interface NxdsTheme {
|
|
294
|
+
readonly appearance: NxdsAppearanceState;
|
|
295
|
+
readonly iconLibrary: NxdsIconLibrary;
|
|
296
|
+
}
|
|
297
|
+
declare const DEFAULT_NXDS_THEME: NxdsTheme;
|
|
298
|
+
/** Where a theme part lives in the appearance: a key of it, or of its prefs. */
|
|
299
|
+
type NxdsThemeKey = Exclude<keyof NxdsAppearanceState, 'prefs'> | `prefs.${keyof NxdsAppearancePrefs}`;
|
|
300
|
+
interface NxdsThemeFieldBase {
|
|
301
|
+
/** The flag, without its `--`. */
|
|
302
|
+
readonly flag: string;
|
|
303
|
+
/** What the flag sets, for `--help`. */
|
|
304
|
+
readonly description: string;
|
|
305
|
+
/** The flag's value for `theme`, or undefined when no flag value says it. */
|
|
306
|
+
read(theme: NxdsTheme): string | undefined;
|
|
307
|
+
/** `theme` with the flag's value. Throws when the value doesn't fit. */
|
|
308
|
+
write(theme: NxdsTheme, value: string): NxdsTheme;
|
|
309
|
+
}
|
|
310
|
+
/**
|
|
311
|
+
* One part of a theme, as the `nxds-cli init` flag that sets it. `kind` says
|
|
312
|
+
* which values the flag takes, and `key` the appearance field it sets. The
|
|
313
|
+
* icon library sets none.
|
|
314
|
+
*/
|
|
315
|
+
type NxdsThemeField = NxdsThemeFieldBase & ({
|
|
316
|
+
readonly kind: 'color';
|
|
317
|
+
readonly key: NxdsThemeKey;
|
|
318
|
+
} | {
|
|
319
|
+
readonly kind: 'choice';
|
|
320
|
+
readonly key?: NxdsThemeKey;
|
|
321
|
+
readonly values: readonly string[];
|
|
322
|
+
} | {
|
|
323
|
+
readonly kind: 'integer';
|
|
324
|
+
readonly key: NxdsThemeKey;
|
|
325
|
+
readonly min: number;
|
|
326
|
+
readonly max: number;
|
|
327
|
+
} | {
|
|
328
|
+
readonly kind: 'font';
|
|
329
|
+
readonly key: NxdsThemeKey;
|
|
330
|
+
/** The fallback's value, then each curated font's. */
|
|
331
|
+
readonly values: readonly string[];
|
|
332
|
+
/** The categories of the curated fonts the flag takes. */
|
|
333
|
+
readonly categories: readonly NxdsFontCategory[];
|
|
334
|
+
/**
|
|
335
|
+
* The value that names no curated font, and the family it stands for:
|
|
336
|
+
* the default stack, or null for the UI font.
|
|
337
|
+
*/
|
|
338
|
+
readonly fallback: {
|
|
339
|
+
readonly value: string;
|
|
340
|
+
readonly family: string | null;
|
|
341
|
+
};
|
|
342
|
+
});
|
|
343
|
+
/**
|
|
344
|
+
* Every part of a theme `nxds-cli init` can set, one flag each. Reduce motion,
|
|
345
|
+
* pointer cursors and font smoothing are each person's own preferences, so a
|
|
346
|
+
* theme leaves them out.
|
|
347
|
+
*/
|
|
348
|
+
declare const NXDS_THEME_FIELDS: readonly NxdsThemeField[];
|
|
349
|
+
/**
|
|
350
|
+
* The `nxds-cli init` flags that set `theme`, for each part that differs from
|
|
351
|
+
* nxds's default theme. A part no flag value says, such as a font stack outside
|
|
352
|
+
* the curated fonts, is left out.
|
|
353
|
+
*/
|
|
354
|
+
declare function nxdsThemeFlags(theme: NxdsTheme): {
|
|
355
|
+
flag: string;
|
|
356
|
+
value: string;
|
|
357
|
+
}[];
|
|
358
|
+
/**
|
|
359
|
+
* `theme` with each flag `values` sets, by flag name. A flag left out keeps its
|
|
360
|
+
* part of `theme`. Throws on the first value that doesn't fit.
|
|
361
|
+
*/
|
|
362
|
+
declare function applyNxdsThemeFlags(theme: NxdsTheme, values: Readonly<Record<string, string | undefined>>): NxdsTheme;
|
|
363
|
+
|
|
175
364
|
type TokenCategory = 'surface' | 'text' | 'border' | 'brand' | 'status' | 'chart' | 'syntax' | 'focus' | 'alpha';
|
|
176
365
|
interface SemanticTokenMeta {
|
|
177
366
|
/** Bare token name, without the --nx-color- prefix. */
|
|
@@ -191,4 +380,4 @@ declare const ALPHA_TOKEN_NAMES: readonly ["background-hover-alpha", "border-def
|
|
|
191
380
|
type SemanticColorName = (typeof SURFACE_TOKEN_NAMES)[number] | (typeof TEXT_TOKEN_NAMES)[number] | (typeof BORDER_TOKEN_NAMES)[number] | (typeof BRAND_TOKEN_NAMES)[number] | (typeof STATUS_TOKEN_NAMES)[number] | (typeof CHART_TOKEN_NAMES)[number] | (typeof SYNTAX_TOKEN_NAMES)[number] | (typeof FOCUS_TOKEN_NAMES)[number] | (typeof ALPHA_TOKEN_NAMES)[number];
|
|
192
381
|
declare const SEMANTIC_TOKEN_REGISTRY: readonly SemanticTokenMeta[];
|
|
193
382
|
|
|
194
|
-
export { type AdjustContrastOptions, type AdjustContrastPalette, type AdjustContrastTier, BRAND_COLOR_PRESETS, type BrandColorPreset, DEFAULT_COOKIE_KEY, DEFAULT_STORAGE_KEY, DerivedTheme, Mode, NXDS_APPEARANCE_COOKIE_MAX_AGE_SECONDS, NXDS_APPEARANCE_DATA_ATTRS, type NxdsAppearanceBootstrapScriptOptions, type NxdsAppearanceCookieOptions, type NxdsAppearanceCookieSameSite, type NxdsAppearanceDataAttr, type NxdsAppearancePersistOptions, type NxdsAppearanceSnapshot, NxdsAppearanceState, type NxdsAppearanceStateCookie, type NxdsFirstPaintResolution, type NxdsResolvedAppearanceMode, RUNTIME_LAYER_ORDER, SEMANTIC_TOKEN_REGISTRY, SNAPSHOT_VERSION, type SemanticColorName, type SemanticTokenMeta, type ThemeContrastCheck, Tier, type TokenCategory, adjustContrast, apcaLc, applyNxdsAppearance, createDefaultNxdsAppearanceSnapshot, createNxdsAppearanceBootstrapScript, createNxdsAppearanceSnapshot, createNxdsAppearanceSnapshotFromCookie, createNxdsAppearanceSnapshotFromState, createNxdsAppearanceStateCookie, findBrandColorPreset, isColor, measureThemeContrast, parseNxdsAppearanceStateCookie, persistNxdsAppearance, prefersDarkColorScheme, readStoredNxdsAppearance, removeNxdsAppearance, resolveFirstPaint, resolveNxdsAppearanceMode, sanitizeNxdsAppearanceSnapshot, serializeNxdsAppearanceStateCookie, watchColorScheme };
|
|
383
|
+
export { type AdjustContrastOptions, type AdjustContrastPalette, type AdjustContrastTier, BRAND_COLOR_PRESETS, type BrandColorPreset, DEFAULT_COOKIE_KEY, DEFAULT_ICON_LIBRARY, DEFAULT_NXDS_THEME, DEFAULT_STORAGE_KEY, DerivedTheme, FONT_OPTIONS, ICON_LIBRARY_OPTIONS, Mode, NXDS_APPEARANCE_COOKIE_MAX_AGE_SECONDS, NXDS_APPEARANCE_DATA_ATTRS, NXDS_THEME_FIELDS, type NxdsAppearanceBootstrapScriptOptions, type NxdsAppearanceCookieOptions, type NxdsAppearanceCookieSameSite, type NxdsAppearanceDataAttr, type NxdsAppearancePersistOptions, NxdsAppearancePrefs, type NxdsAppearanceSnapshot, NxdsAppearanceState, type NxdsAppearanceStateCookie, type NxdsFirstPaintResolution, type NxdsFont, type NxdsFontCategory, type NxdsFontOption, type NxdsIconLibrary, type NxdsResolvedAppearanceMode, type NxdsShuffleOptions, type NxdsTheme, type NxdsThemeField, type NxdsThemeKey, RUNTIME_LAYER_ORDER, SEMANTIC_TOKEN_REGISTRY, SNAPSHOT_VERSION, type SemanticColorName, type SemanticTokenMeta, type ThemeContrastCheck, Tier, type TokenCategory, adjustContrast, apcaLc, applyNxdsAppearance, applyNxdsThemeFlags, createDefaultNxdsAppearanceSnapshot, createNxdsAppearanceBootstrapScript, createNxdsAppearanceSnapshot, createNxdsAppearanceSnapshotFromCookie, createNxdsAppearanceSnapshotFromState, createNxdsAppearanceStateCookie, findBrandColorPreset, isColor, measureThemeContrast, nxdsThemeFlags, parseNxdsAppearanceStateCookie, persistNxdsAppearance, prefersDarkColorScheme, readStoredNxdsAppearance, removeNxdsAppearance, resolveFirstPaint, resolveNxdsAppearanceMode, sanitizeNxdsAppearanceSnapshot, serializeNxdsAppearanceStateCookie, shuffleNxdsAppearance, shuffleNxdsIconLibrary, watchColorScheme };
|
package/dist/runtime/index.d.ts
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { T as Tier, P as PaletteKey, M as Mode } from './palette-BKTIQ0WC.js';
|
|
2
2
|
export { N as NxdsSurfaceTone, a as PALETTE_KEYS, b as TIER_THRESHOLDS } from './palette-BKTIQ0WC.js';
|
|
3
|
-
import { b as NxdsAppearanceState, d as DerivedTheme } from './surface-ladder-
|
|
4
|
-
export { B as BASE_TONE_OPTIONS, e as BASE_TONE_SEEDS, C as CORNER_OPTIONS, f as DEFAULT_BRAND_COLOR, g as DEFAULT_NXDS_APPEARANCE, h as DENSITY_OPTIONS, E as ELEVATION_OPTIONS,
|
|
3
|
+
import { b as NxdsAppearanceState, d as DerivedTheme, a as NxdsAppearancePrefs } from './surface-ladder-CAjRqzCx.js';
|
|
4
|
+
export { B as BASE_TONE_OPTIONS, e as BASE_TONE_SEEDS, C as CORNER_OPTIONS, f as DEFAULT_BRAND_COLOR, g as DEFAULT_NXDS_APPEARANCE, h as DENSITY_OPTIONS, E as ELEVATION_OPTIONS, F as FONT_SIZE_PX_MAX, i as FONT_SIZE_PX_MIN, j as NxdsAppearanceMode, k as NxdsCorners, l as NxdsDensity, m as NxdsElevation, N as NxdsPresetField, n as NxdsStroke, o as NxdsThemeContract, p as STROKE_OPTIONS, q as SurfaceToken, T as ThemeDerivationInput, r as ThemeSeeds, s as TokenMap, t as appearancePrefsToCss, u as createNxdsThemeContract, v as deriveTheme, w as normalizeAppearanceModeIds, x as sanitizeNxdsAppearance, y as sanitizeNxdsAppearancePrefs, z as themeToCss } from './surface-ladder-CAjRqzCx.js';
|
|
5
5
|
export { S as SpacingStep } from './token-scales.generated-CCNkHJ3I.js';
|
|
6
6
|
|
|
7
7
|
type AdjustContrastTier = Tier;
|
|
@@ -96,6 +96,119 @@ declare function removeNxdsAppearance(): void;
|
|
|
96
96
|
/** Saves the appearance for the first-paint script and, optionally, the server. */
|
|
97
97
|
declare function persistNxdsAppearance(state: NxdsAppearanceState, { storageKey, cookieWriteKey, cookieOptions, }: NxdsAppearancePersistOptions): void;
|
|
98
98
|
|
|
99
|
+
type NxdsFontCategory = 'sans' | 'serif' | 'mono';
|
|
100
|
+
interface NxdsFontOption {
|
|
101
|
+
readonly value: string;
|
|
102
|
+
readonly label: string;
|
|
103
|
+
readonly category: NxdsFontCategory;
|
|
104
|
+
/** The `font-family` stack the appearance prefs store. */
|
|
105
|
+
readonly family: string;
|
|
106
|
+
/** The Fontsource package that self-hosts the font. */
|
|
107
|
+
readonly package: string;
|
|
108
|
+
}
|
|
109
|
+
/** The fonts nxds offers beside the system stacks, self-hosted through Fontsource. */
|
|
110
|
+
declare const FONT_OPTIONS: readonly [{
|
|
111
|
+
readonly value: "geist";
|
|
112
|
+
readonly label: "Geist";
|
|
113
|
+
readonly category: "sans";
|
|
114
|
+
readonly family: "\"Geist Variable\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", sans-serif";
|
|
115
|
+
readonly package: "@fontsource-variable/geist";
|
|
116
|
+
}, {
|
|
117
|
+
readonly value: "inter";
|
|
118
|
+
readonly label: "Inter";
|
|
119
|
+
readonly category: "sans";
|
|
120
|
+
readonly family: "\"Inter Variable\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", sans-serif";
|
|
121
|
+
readonly package: "@fontsource-variable/inter";
|
|
122
|
+
}, {
|
|
123
|
+
readonly value: "figtree";
|
|
124
|
+
readonly label: "Figtree";
|
|
125
|
+
readonly category: "sans";
|
|
126
|
+
readonly family: "\"Figtree Variable\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", sans-serif";
|
|
127
|
+
readonly package: "@fontsource-variable/figtree";
|
|
128
|
+
}, {
|
|
129
|
+
readonly value: "dm-sans";
|
|
130
|
+
readonly label: "DM Sans";
|
|
131
|
+
readonly category: "sans";
|
|
132
|
+
readonly family: "\"DM Sans Variable\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", sans-serif";
|
|
133
|
+
readonly package: "@fontsource-variable/dm-sans";
|
|
134
|
+
}, {
|
|
135
|
+
readonly value: "manrope";
|
|
136
|
+
readonly label: "Manrope";
|
|
137
|
+
readonly category: "sans";
|
|
138
|
+
readonly family: "\"Manrope Variable\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", sans-serif";
|
|
139
|
+
readonly package: "@fontsource-variable/manrope";
|
|
140
|
+
}, {
|
|
141
|
+
readonly value: "ibm-plex-sans";
|
|
142
|
+
readonly label: "IBM Plex Sans";
|
|
143
|
+
readonly category: "sans";
|
|
144
|
+
readonly family: "\"IBM Plex Sans Variable\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", sans-serif";
|
|
145
|
+
readonly package: "@fontsource-variable/ibm-plex-sans";
|
|
146
|
+
}, {
|
|
147
|
+
readonly value: "lora";
|
|
148
|
+
readonly label: "Lora";
|
|
149
|
+
readonly category: "serif";
|
|
150
|
+
readonly family: "\"Lora Variable\", Georgia, serif";
|
|
151
|
+
readonly package: "@fontsource-variable/lora";
|
|
152
|
+
}, {
|
|
153
|
+
readonly value: "playfair-display";
|
|
154
|
+
readonly label: "Playfair Display";
|
|
155
|
+
readonly category: "serif";
|
|
156
|
+
readonly family: "\"Playfair Display Variable\", Georgia, serif";
|
|
157
|
+
readonly package: "@fontsource-variable/playfair-display";
|
|
158
|
+
}, {
|
|
159
|
+
readonly value: "geist-mono";
|
|
160
|
+
readonly label: "Geist Mono";
|
|
161
|
+
readonly category: "mono";
|
|
162
|
+
readonly family: "\"Geist Mono Variable\", ui-monospace, \"SF Mono\", Menlo, monospace";
|
|
163
|
+
readonly package: "@fontsource-variable/geist-mono";
|
|
164
|
+
}, {
|
|
165
|
+
readonly value: "jetbrains-mono";
|
|
166
|
+
readonly label: "JetBrains Mono";
|
|
167
|
+
readonly category: "mono";
|
|
168
|
+
readonly family: "\"JetBrains Mono Variable\", ui-monospace, \"SF Mono\", Menlo, monospace";
|
|
169
|
+
readonly package: "@fontsource-variable/jetbrains-mono";
|
|
170
|
+
}];
|
|
171
|
+
type NxdsFont = (typeof FONT_OPTIONS)[number]['value'];
|
|
172
|
+
|
|
173
|
+
/** The icon libraries nxds components can draw their own icons with. */
|
|
174
|
+
declare const ICON_LIBRARY_OPTIONS: readonly [{
|
|
175
|
+
readonly value: "phosphor";
|
|
176
|
+
readonly label: "Phosphor";
|
|
177
|
+
}, {
|
|
178
|
+
readonly value: "lucide";
|
|
179
|
+
readonly label: "Lucide";
|
|
180
|
+
}, {
|
|
181
|
+
readonly value: "tabler";
|
|
182
|
+
readonly label: "Tabler Icons";
|
|
183
|
+
}, {
|
|
184
|
+
readonly value: "hugeicons";
|
|
185
|
+
readonly label: "HugeIcons";
|
|
186
|
+
}, {
|
|
187
|
+
readonly value: "remix";
|
|
188
|
+
readonly label: "Remix Icon";
|
|
189
|
+
}];
|
|
190
|
+
type NxdsIconLibrary = (typeof ICON_LIBRARY_OPTIONS)[number]['value'];
|
|
191
|
+
declare const DEFAULT_ICON_LIBRARY: NxdsIconLibrary;
|
|
192
|
+
|
|
193
|
+
interface NxdsShuffleOptions {
|
|
194
|
+
/**
|
|
195
|
+
* The fonts the UI and heading fonts come from. Monospace fonts are skipped,
|
|
196
|
+
* so it needs at least one sans or serif font. Leave it out to pick from
|
|
197
|
+
* every curated font.
|
|
198
|
+
*/
|
|
199
|
+
readonly fonts?: readonly NxdsFontOption[];
|
|
200
|
+
/** Returns a number in [0, 1), like `Math.random`. */
|
|
201
|
+
readonly random?: () => number;
|
|
202
|
+
}
|
|
203
|
+
/**
|
|
204
|
+
* A random appearance from nxds's curated options: brand color preset, surface
|
|
205
|
+
* tone, density, corners, elevation, stroke, UI font and heading font. Mode,
|
|
206
|
+
* contrast and the other preferences stay as `state` has them.
|
|
207
|
+
*/
|
|
208
|
+
declare function shuffleNxdsAppearance(state: NxdsAppearanceState, { fonts, random }?: NxdsShuffleOptions): NxdsAppearanceState;
|
|
209
|
+
/** A random icon library. */
|
|
210
|
+
declare function shuffleNxdsIconLibrary({ random, }?: Pick<NxdsShuffleOptions, 'random'>): NxdsIconLibrary;
|
|
211
|
+
|
|
99
212
|
declare const SNAPSHOT_VERSION = 9;
|
|
100
213
|
declare const STATE_COOKIE_VERSION = 6;
|
|
101
214
|
declare const NXDS_APPEARANCE_DATA_ATTRS: readonly ["data-density", "data-radius", "data-shadow", "data-borderwidth"];
|
|
@@ -172,6 +285,82 @@ interface ThemeContrastCheck {
|
|
|
172
285
|
/** Measure every registered APCA pair of a derived theme in both modes. */
|
|
173
286
|
declare function measureThemeContrast(theme: DerivedTheme): ThemeContrastCheck[];
|
|
174
287
|
|
|
288
|
+
/**
|
|
289
|
+
* An app's theme: the appearance it starts from, and the icon library its
|
|
290
|
+
* components draw. The icon library is set when the app installs nxds, so it
|
|
291
|
+
* isn't part of the appearance an app can change at runtime.
|
|
292
|
+
*/
|
|
293
|
+
interface NxdsTheme {
|
|
294
|
+
readonly appearance: NxdsAppearanceState;
|
|
295
|
+
readonly iconLibrary: NxdsIconLibrary;
|
|
296
|
+
}
|
|
297
|
+
declare const DEFAULT_NXDS_THEME: NxdsTheme;
|
|
298
|
+
/** Where a theme part lives in the appearance: a key of it, or of its prefs. */
|
|
299
|
+
type NxdsThemeKey = Exclude<keyof NxdsAppearanceState, 'prefs'> | `prefs.${keyof NxdsAppearancePrefs}`;
|
|
300
|
+
interface NxdsThemeFieldBase {
|
|
301
|
+
/** The flag, without its `--`. */
|
|
302
|
+
readonly flag: string;
|
|
303
|
+
/** What the flag sets, for `--help`. */
|
|
304
|
+
readonly description: string;
|
|
305
|
+
/** The flag's value for `theme`, or undefined when no flag value says it. */
|
|
306
|
+
read(theme: NxdsTheme): string | undefined;
|
|
307
|
+
/** `theme` with the flag's value. Throws when the value doesn't fit. */
|
|
308
|
+
write(theme: NxdsTheme, value: string): NxdsTheme;
|
|
309
|
+
}
|
|
310
|
+
/**
|
|
311
|
+
* One part of a theme, as the `nxds-cli init` flag that sets it. `kind` says
|
|
312
|
+
* which values the flag takes, and `key` the appearance field it sets. The
|
|
313
|
+
* icon library sets none.
|
|
314
|
+
*/
|
|
315
|
+
type NxdsThemeField = NxdsThemeFieldBase & ({
|
|
316
|
+
readonly kind: 'color';
|
|
317
|
+
readonly key: NxdsThemeKey;
|
|
318
|
+
} | {
|
|
319
|
+
readonly kind: 'choice';
|
|
320
|
+
readonly key?: NxdsThemeKey;
|
|
321
|
+
readonly values: readonly string[];
|
|
322
|
+
} | {
|
|
323
|
+
readonly kind: 'integer';
|
|
324
|
+
readonly key: NxdsThemeKey;
|
|
325
|
+
readonly min: number;
|
|
326
|
+
readonly max: number;
|
|
327
|
+
} | {
|
|
328
|
+
readonly kind: 'font';
|
|
329
|
+
readonly key: NxdsThemeKey;
|
|
330
|
+
/** The fallback's value, then each curated font's. */
|
|
331
|
+
readonly values: readonly string[];
|
|
332
|
+
/** The categories of the curated fonts the flag takes. */
|
|
333
|
+
readonly categories: readonly NxdsFontCategory[];
|
|
334
|
+
/**
|
|
335
|
+
* The value that names no curated font, and the family it stands for:
|
|
336
|
+
* the default stack, or null for the UI font.
|
|
337
|
+
*/
|
|
338
|
+
readonly fallback: {
|
|
339
|
+
readonly value: string;
|
|
340
|
+
readonly family: string | null;
|
|
341
|
+
};
|
|
342
|
+
});
|
|
343
|
+
/**
|
|
344
|
+
* Every part of a theme `nxds-cli init` can set, one flag each. Reduce motion,
|
|
345
|
+
* pointer cursors and font smoothing are each person's own preferences, so a
|
|
346
|
+
* theme leaves them out.
|
|
347
|
+
*/
|
|
348
|
+
declare const NXDS_THEME_FIELDS: readonly NxdsThemeField[];
|
|
349
|
+
/**
|
|
350
|
+
* The `nxds-cli init` flags that set `theme`, for each part that differs from
|
|
351
|
+
* nxds's default theme. A part no flag value says, such as a font stack outside
|
|
352
|
+
* the curated fonts, is left out.
|
|
353
|
+
*/
|
|
354
|
+
declare function nxdsThemeFlags(theme: NxdsTheme): {
|
|
355
|
+
flag: string;
|
|
356
|
+
value: string;
|
|
357
|
+
}[];
|
|
358
|
+
/**
|
|
359
|
+
* `theme` with each flag `values` sets, by flag name. A flag left out keeps its
|
|
360
|
+
* part of `theme`. Throws on the first value that doesn't fit.
|
|
361
|
+
*/
|
|
362
|
+
declare function applyNxdsThemeFlags(theme: NxdsTheme, values: Readonly<Record<string, string | undefined>>): NxdsTheme;
|
|
363
|
+
|
|
175
364
|
type TokenCategory = 'surface' | 'text' | 'border' | 'brand' | 'status' | 'chart' | 'syntax' | 'focus' | 'alpha';
|
|
176
365
|
interface SemanticTokenMeta {
|
|
177
366
|
/** Bare token name, without the --nx-color- prefix. */
|
|
@@ -191,4 +380,4 @@ declare const ALPHA_TOKEN_NAMES: readonly ["background-hover-alpha", "border-def
|
|
|
191
380
|
type SemanticColorName = (typeof SURFACE_TOKEN_NAMES)[number] | (typeof TEXT_TOKEN_NAMES)[number] | (typeof BORDER_TOKEN_NAMES)[number] | (typeof BRAND_TOKEN_NAMES)[number] | (typeof STATUS_TOKEN_NAMES)[number] | (typeof CHART_TOKEN_NAMES)[number] | (typeof SYNTAX_TOKEN_NAMES)[number] | (typeof FOCUS_TOKEN_NAMES)[number] | (typeof ALPHA_TOKEN_NAMES)[number];
|
|
192
381
|
declare const SEMANTIC_TOKEN_REGISTRY: readonly SemanticTokenMeta[];
|
|
193
382
|
|
|
194
|
-
export { type AdjustContrastOptions, type AdjustContrastPalette, type AdjustContrastTier, BRAND_COLOR_PRESETS, type BrandColorPreset, DEFAULT_COOKIE_KEY, DEFAULT_STORAGE_KEY, DerivedTheme, Mode, NXDS_APPEARANCE_COOKIE_MAX_AGE_SECONDS, NXDS_APPEARANCE_DATA_ATTRS, type NxdsAppearanceBootstrapScriptOptions, type NxdsAppearanceCookieOptions, type NxdsAppearanceCookieSameSite, type NxdsAppearanceDataAttr, type NxdsAppearancePersistOptions, type NxdsAppearanceSnapshot, NxdsAppearanceState, type NxdsAppearanceStateCookie, type NxdsFirstPaintResolution, type NxdsResolvedAppearanceMode, RUNTIME_LAYER_ORDER, SEMANTIC_TOKEN_REGISTRY, SNAPSHOT_VERSION, type SemanticColorName, type SemanticTokenMeta, type ThemeContrastCheck, Tier, type TokenCategory, adjustContrast, apcaLc, applyNxdsAppearance, createDefaultNxdsAppearanceSnapshot, createNxdsAppearanceBootstrapScript, createNxdsAppearanceSnapshot, createNxdsAppearanceSnapshotFromCookie, createNxdsAppearanceSnapshotFromState, createNxdsAppearanceStateCookie, findBrandColorPreset, isColor, measureThemeContrast, parseNxdsAppearanceStateCookie, persistNxdsAppearance, prefersDarkColorScheme, readStoredNxdsAppearance, removeNxdsAppearance, resolveFirstPaint, resolveNxdsAppearanceMode, sanitizeNxdsAppearanceSnapshot, serializeNxdsAppearanceStateCookie, watchColorScheme };
|
|
383
|
+
export { type AdjustContrastOptions, type AdjustContrastPalette, type AdjustContrastTier, BRAND_COLOR_PRESETS, type BrandColorPreset, DEFAULT_COOKIE_KEY, DEFAULT_ICON_LIBRARY, DEFAULT_NXDS_THEME, DEFAULT_STORAGE_KEY, DerivedTheme, FONT_OPTIONS, ICON_LIBRARY_OPTIONS, Mode, NXDS_APPEARANCE_COOKIE_MAX_AGE_SECONDS, NXDS_APPEARANCE_DATA_ATTRS, NXDS_THEME_FIELDS, type NxdsAppearanceBootstrapScriptOptions, type NxdsAppearanceCookieOptions, type NxdsAppearanceCookieSameSite, type NxdsAppearanceDataAttr, type NxdsAppearancePersistOptions, NxdsAppearancePrefs, type NxdsAppearanceSnapshot, NxdsAppearanceState, type NxdsAppearanceStateCookie, type NxdsFirstPaintResolution, type NxdsFont, type NxdsFontCategory, type NxdsFontOption, type NxdsIconLibrary, type NxdsResolvedAppearanceMode, type NxdsShuffleOptions, type NxdsTheme, type NxdsThemeField, type NxdsThemeKey, RUNTIME_LAYER_ORDER, SEMANTIC_TOKEN_REGISTRY, SNAPSHOT_VERSION, type SemanticColorName, type SemanticTokenMeta, type ThemeContrastCheck, Tier, type TokenCategory, adjustContrast, apcaLc, applyNxdsAppearance, applyNxdsThemeFlags, createDefaultNxdsAppearanceSnapshot, createNxdsAppearanceBootstrapScript, createNxdsAppearanceSnapshot, createNxdsAppearanceSnapshotFromCookie, createNxdsAppearanceSnapshotFromState, createNxdsAppearanceStateCookie, findBrandColorPreset, isColor, measureThemeContrast, nxdsThemeFlags, parseNxdsAppearanceStateCookie, persistNxdsAppearance, prefersDarkColorScheme, readStoredNxdsAppearance, removeNxdsAppearance, resolveFirstPaint, resolveNxdsAppearanceMode, sanitizeNxdsAppearanceSnapshot, serializeNxdsAppearanceStateCookie, shuffleNxdsAppearance, shuffleNxdsIconLibrary, watchColorScheme };
|