@datatechsolutions/tympan-tokens 0.4.0 → 0.4.2

package/dist/index.d.ts

@@ -109,6 +109,29 @@ export interface ThemeConfig {
   elevation?: Elevation;
   /** Arbitrary string variables (e.g. for textures) */
   strings?: Record<string, string>;
+  /**
+   * String variables per mode (`--ty-<name>`), for values that differ
+   * between light and dark: a glass edge, a fill gradient, a brand mark
+   * gradient. Like pins, they are exact design values: the generated
+   * high-contrast variant leaves them out, so components fall back.
+   */
+  modeStrings?: Partial<Record<Mode, Record<string, string>>>;
+  /** Backdrop saturation of glass surfaces per mode (1.15 when omitted). */
+  glassSaturate?: Partial<Record<Mode, number>>;
+  /** Exact shadow layers per mode, replacing the generated ones by name. */
+  shadowPins?: Partial<Record<Mode, Partial<Record<ShadowName, ShadowPin[]>>>>;
+  /** Card and sheet radii in px, when they do not follow the control radius. */
+  radii?: Partial<Record<'card' | 'sheet', number>>;
+}
+export type ShadowName = 'sheet' | 'raised' | 'floating' | 'modal' | 'sheet-inset';
+/** One shadow layer of `shadowPins`, its colour as a CSS colour string. */
+export interface ShadowPin {
+  x: number;
+  y: number;
+  blur: number;
+  spread: number;
+  color: string;
+  inset?: boolean;
 }
 export declare const RAMP_STEPS: readonly [50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950];
 export type RampStep = (typeof RAMP_STEPS)[number];
@@ -156,7 +179,7 @@ export interface ResolvedTheme {
     angle: number;
     stops: Rgba[];
   };
-  shadows: Record<'sheet' | 'raised' | 'floating' | 'modal' | 'sheet-inset', ShadowLayer[]>;
+  shadows: Record<ShadowName, ShadowLayer[]>;
   /** Pixel dimensions (radius, glass blur, focus width). */
   dimensions: Record<string, number>;
   /** Font stacks keyed by token name (`serif`, `sans`, `mono`); empty when the theme keeps the base stacks. */
@@ -201,8 +224,10 @@ export declare const fakhirPreset: ThemeConfig;
 /**
  * The Astrlabe workflow engine's look (`data-ty-theme="astrlabe"`): slate
  * neutrals, an indigo brand (indigo 500 as the accent family, one step darker
- * where text needs 4.5:1 on light grounds), translucent glass surfaces and the
- * rounder corners of that app (12 px controls, about 20 px cards). The call to
+ * where text needs 4.5:1 on light grounds), liquid-glass surfaces (gradient
+ * fills, specular edges, a strong saturation boost at night), the rounder
+ * corners of that app (12 px controls, 20 px cards, 24 px sheets), its
+ * compact type scale and the sky, indigo and violet mark. The call to
  * action is the indigo to purple gradient its primary buttons fill with, and
  * text (headings included) uses the platform's own system fonts. The state
  * contract holds on every ground: running is a cyan clearly off the indigo
@@ -660,8 +685,70 @@ export declare function printStyleToTheme(style: PrintStyle, override?: PrintThe
 export declare function printThemeDroppedPins(style: PrintStyle, override?: PrintThemeOverride): Record<Mode, Partial<Record<RoleName, string>>>;
 /** Every book style as a UI theme, in the order of `printPresets`. */
 export declare const printThemePresets: readonly ThemeConfig[];
-/** Stylesheet URL of the families of each print theme, by theme name (for ThemeProvider's `fonts`). */
+/**
+ * Legacy: Google Fonts stylesheet URL of the families of each print theme, by
+ * theme name. The print theme sheets now declare the bundled fonts
+ * (`printThemeFontSpecs`), so ThemeProvider needs no `fonts` map; this stays
+ * for hosts that prefer Google's CDN.
+ */
 export declare const printThemeFontUrls: Readonly<Record<string, string>>;
+/**
+ * Google Fonts specs of each print theme, by theme name: the families its
+ * stacks name, bundled under fonts/ and declared in the theme's sheet.
+ */
+export declare const printThemeFontSpecs: Readonly<Record<string, readonly string[]>>;
+//#endregion
+//#region src/fonts.d.ts
+/** Base stacks of every preset: Source Serif 4, IBM Plex Sans, IBM Plex Mono. */
+export declare const BASE_FONT_SPECS: readonly string[];
+/** Noto families named by the base stacks and the per-script `:lang()` rules. */
+export declare const SCRIPT_FONT_FAMILIES: readonly string[];
+export declare const SCRIPT_FONT_SPECS: readonly string[];
+/**
+ * The CJK Noto families (about 41 MB of woff2). The token stacks and the
+ * `:lang()` rules still name them, but their files and @font-face rules live
+ * in the optional package @datatechsolutions/tympan-fonts-cjk (activated with
+ * `import '@datatechsolutions/tympan-fonts-cjk/fonts.css'`); without it the
+ * browser falls back to the system CJK faces.
+ */
+export declare const CJK_FONT_FAMILIES: readonly string[];
+/** Specs whose faces go into the fonts.css of @datatechsolutions/tympan-fonts-cjk. */
+export declare const CJK_FONT_SPECS: readonly string[];
+/** Every spec whose faces go into dist/fonts.css (and so tokens.css): base and non-CJK Noto. */
+export declare const CORE_FONT_SPECS: readonly string[];
+/**
+ * Family names that are platform faces, generic keywords or legacy aliases
+ * kept as fallbacks; they get no @font-face (tests check that every other
+ * family a theme names is bundled).
+ */
+export declare const SYSTEM_FONT_FAMILIES: readonly string[];
+/** Shape of fonts/manifest.json (written by scripts/fetch-fonts.mjs). */
+export interface FontManifest {
+  families: Record<string, {
+    slug: string;
+    version: string | null;
+    files: number;
+    bytes: number;
+    license: string;
+    licenseFile: string;
+  }>;
+  faces: Record<string, {
+    family: string;
+    style: string;
+    weights: number[];
+    unicodeRange: string | null;
+    file: string;
+    bytes: number;
+  }>;
+  specs: Record<string, string[]>;
+}
+/**
+ * @font-face rules for the faces of `specs`, with `url(<base><file>)`
+ * (`base` is the path from the stylesheet to the fonts/ folder), font-display
+ * swap and the unicode-range of each slice. Faces shared by several specs
+ * are declared once.
+ */
+export declare function fontFaceCss(manifest: FontManifest, specs: readonly string[], base: string): string;
 //#endregion
 //#region src/index.d.ts
 export declare const allThemes: readonly ThemeConfig[];

package/dist/index.js

@@ -929,19 +929,24 @@ function resolveTheme(config, mode, contrastOverride) {
 		}],
 		"sheet-inset": [inset]
 	};
+	const shadowPins = config.shadowPins?.[mode] ?? {};
+	for (const [name, layers] of Object.entries(shadowPins)) shadows[name] = layers.map((l) => ({
+		...l,
+		color: parseColor(l.color)
+	}));
 	const R = config.radius;
 	const dimensions = {
 		radius: R,
 		"radius-control": R,
-		"radius-card": Math.round(R * 1.6),
-		"radius-sheet": Math.round(R * 2.4),
+		"radius-card": config.radii?.card ?? Math.round(R * 1.6),
+		"radius-sheet": config.radii?.sheet ?? Math.round(R * 2.4),
 		"radius-pill": 999,
 		"radius-agent": Math.max(2, Math.round(R * .6)),
 		"focus-width": contrast === "high" ? 3 : 2,
 		"glass-blur-sheet": config.glass ? 20 : 0,
 		"glass-blur-floating": config.glass ? 24 : 0
 	};
-	const numbers = { "glass-saturate": config.glass ? 1.15 : 1 };
+	const numbers = { "glass-saturate": config.glass ? config.glassSaturate?.[mode] ?? 1.15 : 1 };
 	const fonts = {};
 	for (const role of [
 		"display",
@@ -965,7 +970,10 @@ function resolveTheme(config, mode, contrastOverride) {
 		dimensions,
 		numbers,
 		fonts,
-		strings: config.strings ?? {},
+		strings: {
+			...config.strings,
+			...contrast === config.contrast ? config.modeStrings?.[mode] : void 0
+		},
 		report
 	};
 }
@@ -1169,8 +1177,10 @@ const fakhirPreset = {
 /**
 * The Astrlabe workflow engine's look (`data-ty-theme="astrlabe"`): slate
 * neutrals, an indigo brand (indigo 500 as the accent family, one step darker
-* where text needs 4.5:1 on light grounds), translucent glass surfaces and the
-* rounder corners of that app (12 px controls, about 20 px cards). The call to
+* where text needs 4.5:1 on light grounds), liquid-glass surfaces (gradient
+* fills, specular edges, a strong saturation boost at night), the rounder
+* corners of that app (12 px controls, 20 px cards, 24 px sheets), its
+* compact type scale and the sky, indigo and violet mark. The call to
 * action is the indigo to purple gradient its primary buttons fill with, and
 * text (headings included) uses the platform's own system fonts. The state
 * contract holds on every ground: running is a cyan clearly off the indigo
@@ -1225,20 +1235,23 @@ const astrlabePreset = {
 			"on-brand": "#ffffff",
 			bg: "#f8fafc",
 			surface: "rgb(255 255 255 / 0.72)",
-			"surface-raised": "rgb(255 255 255 / 0.9)",
+			"surface-raised": "rgb(255 255 255 / 0.86)",
 			"surface-solid": "#ffffff",
 			"surface-raised-solid": "#ffffff",
-			"surface-sunken": "#f1f5f9",
-			line: "rgb(148 163 184 / 0.3)",
+			"surface-sunken": "#f2f3fa",
+			line: "rgb(148 163 184 / 0.26)",
 			"line-strong": "rgb(100 116 139 / 0.45)",
 			ink: "#0f172a",
-			"ink-2": "#334155",
-			"ink-3": "#4d5a6b",
+			"ink-2": "#475569",
+			"ink-3": "#5b6779",
 			success: "#15803d",
 			info: "#0e7490",
 			warning: "#a16207",
 			danger: "#be123c",
-			neutral: "#4d5a6b"
+			neutral: "#5b6779",
+			backdrop: "rgb(15 23 42 / 0.4)",
+			"ambient-1": "rgb(167 139 250 / 0.05)",
+			"ambient-2": "rgb(56 189 248 / 0.03)"
 		},
 		dark: {
 			brand: "#818cf8",
@@ -1246,22 +1259,25 @@ const astrlabePreset = {
 			"brand-strong": "#a5b4fc",
 			"brand-soft": "rgb(99 102 241 / 0.2)",
 			"on-brand": "#1e1b4b",
-			bg: "#0b1220",
-			surface: "rgb(30 41 59 / 0.72)",
-			"surface-raised": "rgb(30 41 59 / 0.92)",
+			bg: "#020617",
+			surface: "rgb(30 41 59 / 0.7)",
+			"surface-raised": "rgb(30 41 59 / 0.78)",
 			"surface-solid": "#131c2f",
 			"surface-raised-solid": "#1b2539",
 			"surface-sunken": "#0b1222",
-			line: "rgb(148 163 184 / 0.22)",
+			line: "rgb(148 163 184 / 0.24)",
 			"line-strong": "rgb(148 163 184 / 0.36)",
-			ink: "#f8fafc",
+			ink: "#ffffff",
 			"ink-2": "#cbd5e1",
-			"ink-3": "#a3b0c0",
+			"ink-3": "#94a3b8",
 			success: "#4ade80",
 			info: "#22d3ee",
 			warning: "#fbbf24",
 			danger: "#fb7185",
-			neutral: "#a3b0c0"
+			neutral: "#94a3b8",
+			backdrop: "rgb(0 0 0 / 0.5)",
+			"ambient-1": "rgb(124 58 237 / 0.1)",
+			"ambient-2": "rgb(2 132 199 / 0.08)"
 		}
 	},
 	ctaPins: {
@@ -1276,6 +1292,174 @@ const astrlabePreset = {
 			"#9333ea"
 		]
 	},
+	radii: {
+		card: 20,
+		sheet: 24
+	},
+	glassSaturate: {
+		light: 1.15,
+		dark: 1.5
+	},
+	shadowPins: {
+		light: {
+			sheet: [{
+				x: 0,
+				y: 4,
+				blur: 16,
+				spread: -2,
+				color: "rgb(0 0 0 / 0.1)"
+			}, {
+				x: 0,
+				y: 12,
+				blur: 40,
+				spread: -8,
+				color: "rgb(0 0 0 / 0.06)"
+			}],
+			"sheet-inset": [{
+				x: 0,
+				y: 1,
+				blur: 2,
+				spread: 0,
+				color: "rgb(255 255 255 / 0.7)",
+				inset: true
+			}, {
+				x: 0,
+				y: -1,
+				blur: 2,
+				spread: 0,
+				color: "rgb(0 0 0 / 0.04)",
+				inset: true
+			}],
+			raised: [{
+				x: 0,
+				y: 4,
+				blur: 12,
+				spread: -2,
+				color: "rgb(15 23 42 / 0.08)"
+			}, {
+				x: 0,
+				y: 2,
+				blur: 4,
+				spread: -2,
+				color: "rgb(15 23 42 / 0.04)"
+			}],
+			floating: [{
+				x: 0,
+				y: 12,
+				blur: 24,
+				spread: -8,
+				color: "rgb(15 23 42 / 0.12)"
+			}, {
+				x: 0,
+				y: 4,
+				blur: 8,
+				spread: -4,
+				color: "rgb(15 23 42 / 0.06)"
+			}],
+			modal: [{
+				x: 0,
+				y: 40,
+				blur: 100,
+				spread: -30,
+				color: "rgb(0 0 0 / 0.45)"
+			}, {
+				x: 0,
+				y: 16,
+				blur: 40,
+				spread: -12,
+				color: "rgb(0 0 0 / 0.18)"
+			}]
+		},
+		dark: {
+			sheet: [{
+				x: 0,
+				y: 12,
+				blur: 40,
+				spread: -12,
+				color: "rgb(0 0 0 / 0.5)"
+			}],
+			"sheet-inset": [{
+				x: 0,
+				y: 1,
+				blur: 1,
+				spread: 0,
+				color: "rgb(255 255 255 / 0.12)",
+				inset: true
+			}],
+			raised: [{
+				x: 0,
+				y: 4,
+				blur: 12,
+				spread: -2,
+				color: "rgb(0 0 0 / 0.5)"
+			}, {
+				x: 0,
+				y: 2,
+				blur: 4,
+				spread: -2,
+				color: "rgb(0 0 0 / 0.3)"
+			}],
+			floating: [{
+				x: 0,
+				y: 12,
+				blur: 24,
+				spread: -8,
+				color: "rgb(0 0 0 / 0.6)"
+			}, {
+				x: 0,
+				y: 4,
+				blur: 8,
+				spread: -4,
+				color: "rgb(0 0 0 / 0.4)"
+			}],
+			modal: [{
+				x: 0,
+				y: 40,
+				blur: 100,
+				spread: -30,
+				color: "rgb(0 0 0 / 0.7)"
+			}, {
+				x: 0,
+				y: 16,
+				blur: 40,
+				spread: -12,
+				color: "rgb(0 0 0 / 0.5)"
+			}]
+		}
+	},
+	modeStrings: {
+		light: {
+			"glass-edge": "rgb(255 255 255 / 0.9) rgb(200 200 210 / 0.3) rgb(200 200 210 / 0.25) rgb(255 255 255 / 0.7)",
+			"glass-edge-width": "1.5px",
+			"glass-highlight": "inset 0 1px 2px 0 rgb(255 255 255 / 0.8), inset 0 -1px 2px 0 rgb(0 0 0 / 0.05)",
+			"glass-fill": "linear-gradient(135deg, rgb(255 255 255 / 0.8) 0%, rgb(220 225 240 / 0.62) 40%, rgb(240 245 255 / 0.68) 70%, rgb(255 255 255 / 0.8) 100%)",
+			"glass-fill-raised": "linear-gradient(135deg, rgb(255 255 255 / 0.86) 0%, rgb(215 220 238 / 0.7) 40%, rgb(235 240 255 / 0.76) 70%, rgb(255 255 255 / 0.86) 100%)",
+			"mark-gradient": "linear-gradient(135deg, #38bdf8 0%, #6366f1 40%, #a855f7 100%)",
+			"wordmark-gradient": "linear-gradient(90deg, #0369a1, #4338ca, #7e22ce)"
+		},
+		dark: {
+			"glass-edge": "rgb(255 255 255 / 0.2) rgb(255 255 255 / 0.06) rgb(255 255 255 / 0.04) rgb(255 255 255 / 0.12)",
+			"glass-edge-width": "1.5px",
+			"glass-highlight": "inset 0 1px 1px 0 rgb(255 255 255 / 0.15)",
+			"glass-fill": "linear-gradient(140deg, rgb(30 41 59 / 0.7) 0%, rgb(15 23 42 / 0.6) 45%, rgb(20 30 50 / 0.55) 100%)",
+			"glass-fill-raised": "linear-gradient(140deg, rgb(30 41 59 / 0.78) 0%, rgb(15 23 42 / 0.68) 45%, rgb(20 30 50 / 0.62) 100%)",
+			"mark-gradient": "linear-gradient(135deg, #38bdf8 0%, #6366f1 40%, #a855f7 100%)",
+			"wordmark-gradient": "linear-gradient(90deg, #38bdf8, #818cf8, #a855f7)"
+		}
+	},
+	strings: {
+		"font-size-display": "30px",
+		"font-line-height-display": "36px",
+		"font-size-h1": "24px",
+		"font-line-height-h1": "32px",
+		"font-size-h2": "18px",
+		"font-line-height-h2": "28px",
+		"font-size-h3": "16px",
+		"font-line-height-h3": "24px",
+		"font-size-label": "14px",
+		"font-line-height-label": "20px",
+		"font-tracking-h1": "-0.025em"
+	},
 	fonts: {
 		display: [
 			"-apple-system",
@@ -4610,8 +4794,18 @@ function draftPrintTheme(style, override = PRINT_THEME_OVERRIDES[style.name] ??
 }
 /** Every book style as a UI theme, in the order of `printPresets`. */
 const printThemePresets = Object.values(printPresets).map((s) => printStyleToTheme(s));
-/** Stylesheet URL of the families of each print theme, by theme name (for ThemeProvider's `fonts`). */
+/**
+* Legacy: Google Fonts stylesheet URL of the families of each print theme, by
+* theme name. The print theme sheets now declare the bundled fonts
+* (`printThemeFontSpecs`), so ThemeProvider needs no `fonts` map; this stays
+* for hosts that prefer Google's CDN.
+*/
 const printThemeFontUrls = Object.fromEntries(printThemePresets.filter((t) => t.fontsUrl).map((t) => [t.name, t.fontsUrl]));
+/**
+* Google Fonts specs of each print theme, by theme name: the families its
+* stacks name, bundled under fonts/ and declared in the theme's sheet.
+*/
+const printThemeFontSpecs = Object.fromEntries(Object.values(printPresets).map((s) => [`${PRINT_THEME_PREFIX}${s.name}`, [...s.googleFonts]]));
 //#endregion
 //#region src/scripts.ts
 const SCRIPT_RULES = [
@@ -4905,7 +5099,10 @@ const FORCED_COLORS_VARS = [
 	["--ty-shadow-floating", "none"],
 	["--ty-shadow-modal", "none"],
 	["--ty-glass-blur-sheet", "0px"],
-	["--ty-glass-blur-floating", "0px"]
+	["--ty-glass-blur-floating", "0px"],
+	["--ty-glass-edge", "CanvasText"],
+	["--ty-glass-fill", "Canvas"],
+	["--ty-glass-fill-raised", "Canvas"]
 ];
 /** Reduced transparency (and no backdrop-filter support): opaque surfaces, no blur, no ambient. */
 const OPAQUE_VARS = [
@@ -4915,6 +5112,8 @@ const OPAQUE_VARS = [
 	["--ty-glass-blur-sheet", "0px !important"],
 	["--ty-glass-blur-floating", "0px !important"],
 	["--ty-glass-saturate", "1 !important"],
+	["--ty-glass-fill", "var(--ty-surface-solid) !important"],
+	["--ty-glass-fill-raised", "var(--ty-surface-raised-solid) !important"],
 	["--ty-ambient-1", "transparent !important"],
 	["--ty-ambient-2", "transparent !important"]
 ];
@@ -5135,9 +5334,156 @@ function flowToneRules() {
 	].map((part) => `  --ty-flow-tone${part}: var(--ty-flow-tone-${t}${part});`).join("\n") + "\n}").join("\n\n");
 }
 //#endregion
+//#region src/fonts.ts
+/** Base stacks of every preset: Source Serif 4, IBM Plex Sans, IBM Plex Mono. */
+const BASE_FONT_SPECS = [
+	"Source Serif 4:ital,opsz,wght@0,8..60,400;0,8..60,600;0,8..60,700;1,8..60,400",
+	"IBM Plex Sans:ital,wght@0,400;0,500;0,600;0,700;1,400",
+	"IBM Plex Mono:ital,wght@0,400;0,500;0,600;0,700;1,400"
+];
+const NOTO_WEIGHTS = "wght@400;500;600;700";
+/** Noto families named by the base stacks and the per-script `:lang()` rules. */
+const SCRIPT_FONT_FAMILIES = [.../* @__PURE__ */ new Set([
+	"Noto Sans",
+	"Noto Serif",
+	"Noto Sans Mono",
+	"Noto Naskh Arabic",
+	"Noto Sans Arabic",
+	"Noto Sans Hebrew",
+	"Noto Serif Hebrew",
+	"Noto Sans Devanagari",
+	"Noto Serif Devanagari",
+	"Noto Sans Bengali",
+	"Noto Sans Tamil",
+	"Noto Sans Thai",
+	"Noto Serif Thai",
+	"Noto Sans Ethiopic",
+	"Noto Serif Ethiopic",
+	"Noto Sans Armenian",
+	"Noto Sans Georgian",
+	"Noto Sans JP",
+	"Noto Serif JP",
+	"Noto Sans SC",
+	"Noto Serif SC",
+	"Noto Sans KR",
+	"Noto Serif KR",
+	...SCRIPT_RULES.flatMap((r) => [...r.sans, ...r.serif ?? []])
+])];
+const SCRIPT_FONT_SPECS = SCRIPT_FONT_FAMILIES.map((f) => `${f}:${NOTO_WEIGHTS}`);
+/**
+* The CJK Noto families (about 41 MB of woff2). The token stacks and the
+* `:lang()` rules still name them, but their files and @font-face rules live
+* in the optional package @datatechsolutions/tympan-fonts-cjk (activated with
+* `import '@datatechsolutions/tympan-fonts-cjk/fonts.css'`); without it the
+* browser falls back to the system CJK faces.
+*/
+const CJK_FONT_FAMILIES = [
+	"Noto Sans JP",
+	"Noto Serif JP",
+	"Noto Sans SC",
+	"Noto Serif SC",
+	"Noto Sans TC",
+	"Noto Serif TC",
+	"Noto Sans KR",
+	"Noto Serif KR"
+];
+const isCjkSpec = (spec) => CJK_FONT_FAMILIES.includes(spec.split(":")[0]);
+/** Specs whose faces go into the fonts.css of @datatechsolutions/tympan-fonts-cjk. */
+const CJK_FONT_SPECS = SCRIPT_FONT_SPECS.filter(isCjkSpec);
+/** Every spec whose faces go into dist/fonts.css (and so tokens.css): base and non-CJK Noto. */
+const CORE_FONT_SPECS = [...BASE_FONT_SPECS, ...SCRIPT_FONT_SPECS.filter((s) => !isCjkSpec(s))];
+/**
+* Family names that are platform faces, generic keywords or legacy aliases
+* kept as fallbacks; they get no @font-face (tests check that every other
+* family a theme names is bundled).
+*/
+const SYSTEM_FONT_FAMILIES = [
+	"serif",
+	"sans-serif",
+	"monospace",
+	"cursive",
+	"fantasy",
+	"system-ui",
+	"ui-monospace",
+	"ui-sans-serif",
+	"ui-serif",
+	"-apple-system",
+	"BlinkMacSystemFont",
+	"Segoe UI",
+	"Segoe Print",
+	"Roboto",
+	"Helvetica Neue",
+	"Helvetica",
+	"Arial",
+	"Georgia",
+	"Times New Roman",
+	"Times",
+	"SFMono-Regular",
+	"Menlo",
+	"Monaco",
+	"Consolas",
+	"Liberation Mono",
+	"Courier New",
+	"Courier",
+	"Palatino",
+	"Palatino Linotype",
+	"Book Antiqua",
+	"Garamond",
+	"Baskerville",
+	"Didot",
+	"Futura",
+	"Gill Sans",
+	"Optima",
+	"Impact",
+	"Verdana",
+	"Tahoma",
+	"Trebuchet MS",
+	"Arial Narrow",
+	"Arial Black",
+	"Avenir",
+	"Avenir Next",
+	"American Typewriter",
+	"Rockwell",
+	"Copperplate",
+	"Bodoni 72",
+	"Hoefler Text",
+	"Iowan Old Style",
+	"Charter",
+	"Source Serif Pro"
+];
+/**
+* @font-face rules for the faces of `specs`, with `url(<base><file>)`
+* (`base` is the path from the stylesheet to the fonts/ folder), font-display
+* swap and the unicode-range of each slice. Faces shared by several specs
+* are declared once.
+*/
+function fontFaceCss(manifest, specs, base) {
+	const ids = /* @__PURE__ */ new Set();
+	for (const spec of specs) {
+		const faces = manifest.specs[spec];
+		if (!faces) throw new Error(`Font spec not bundled (run scripts/fetch-fonts.mjs): ${spec}`);
+		for (const id of faces) ids.add(id);
+	}
+	return [...ids].map((id) => {
+		const f = manifest.faces[id];
+		const lo = Math.min(...f.weights);
+		const hi = Math.max(...f.weights);
+		return [
+			"@font-face {",
+			`  font-family: '${f.family}';`,
+			`  font-style: ${f.style};`,
+			`  font-weight: ${lo === hi ? lo : `${lo} ${hi}`};`,
+			"  font-display: swap;",
+			`  src: url('${base}${f.file}') format('woff2');`,
+			...f.unicodeRange ? [`  unicode-range: ${f.unicodeRange};`] : [],
+			"}"
+		].join("\n");
+	}).join("\n");
+}
+//#endregion
 //#region src/index.ts
 const allThemes = [...presets, ...printThemePresets];
 //#endregion
-export { DEFAULT_CHART_HUES, DEFAULT_PRINT_STYLE, DEFAULT_THEME, DENSITIES, ESTADOS_PROVA, FLOW_TOKENS, FLOW_TONES, FONT_ROLE_TOKENS, FORCED_COLORS_VARS, OPAQUE_VARS, PRINT_PRESET_NAMES, PRINT_STYLE_ALIASES, PRINT_THEME_ALIASES, PRINT_THEME_OVERRIDES, PRINT_THEME_PREFIX, RAMP_STEPS, ROLE_ALIASES, ROLE_NAMES, ROTULOS_PROVA, allThemes, apcaContrast, astrlabeControlePreset, astrlabePreset, buildStylesheet, composite, contrastPairs, contrastRatio, deltaE2000, densityToDtcg, densityVariables, fakhirPreset, flatten, flowCssName, flowToDtcg, flowTokenCss, flowToneRules, flowVariables, fontStackToCss, fromDtcgColor, generatePrintThemesCss, generateRamp, generateThemeCss, googleFontsUrl, gradientToCss, highContrastPreset, legibleOn, luminance, mergePrintStyle, neutralPreset, oklchToRgb, papelEscuro, parseColor, parseFontStack, presetThemeVars, presets, printPresetById, printPresets, printStyleAccent, printStyleCoresPb, printStyleToCss, printStyleToTheme, printStyleVariables, printThemeDroppedPins, printThemeFontUrls, printThemePresets, resolvePrintStyle, resolvePrintStyleName, resolvePrintThemeName, resolveTheme, rgbToLab, rgbToOklab, rgbToOklch, seedFromColor, shadowToCss, themeSelectors, themeToDtcg, themeVariables, themeVarsFor, toCss, toDtcgColor, toGrey, toHex, tympanPreset, warnDeprecatedPrintId };
+export { BASE_FONT_SPECS, CJK_FONT_FAMILIES, CJK_FONT_SPECS, CORE_FONT_SPECS, DEFAULT_CHART_HUES, DEFAULT_PRINT_STYLE, DEFAULT_THEME, DENSITIES, ESTADOS_PROVA, FLOW_TOKENS, FLOW_TONES, FONT_ROLE_TOKENS, FORCED_COLORS_VARS, OPAQUE_VARS, PRINT_PRESET_NAMES, PRINT_STYLE_ALIASES, PRINT_THEME_ALIASES, PRINT_THEME_OVERRIDES, PRINT_THEME_PREFIX, RAMP_STEPS, ROLE_ALIASES, ROLE_NAMES, ROTULOS_PROVA, SCRIPT_FONT_FAMILIES, SCRIPT_FONT_SPECS, SYSTEM_FONT_FAMILIES, allThemes, apcaContrast, astrlabeControlePreset, astrlabePreset, buildStylesheet, composite, contrastPairs, contrastRatio, deltaE2000, densityToDtcg, densityVariables, fakhirPreset, flatten, flowCssName, flowToDtcg, flowTokenCss, flowToneRules, flowVariables, fontFaceCss, fontStackToCss, fromDtcgColor, generatePrintThemesCss, generateRamp, generateThemeCss, googleFontsUrl, gradientToCss, highContrastPreset, legibleOn, luminance, mergePrintStyle, neutralPreset, oklchToRgb, papelEscuro, parseColor, parseFontStack, presetThemeVars, presets, printPresetById, printPresets, printStyleAccent, printStyleCoresPb, printStyleToCss, printStyleToTheme, printStyleVariables, printThemeDroppedPins, printThemeFontSpecs, printThemeFontUrls, printThemePresets, resolvePrintStyle, resolvePrintStyleName, resolvePrintThemeName, resolveTheme, rgbToLab, rgbToOklab, rgbToOklch, seedFromColor, shadowToCss, themeSelectors, themeToDtcg, themeVariables, themeVarsFor, toCss, toDtcgColor, toGrey, toHex, tympanPreset, warnDeprecatedPrintId };
 
 //# sourceMappingURL=index.js.map