@datatechsolutions/tympan-tokens 0.4.0 → 0.4.2

package/fonts/worksans/OFL.txt

@@ -0,0 +1,93 @@
+Copyright 2019 The Work Sans Project Authors (https://github.com/weiweihuanghuang/Work-Sans)
+
+This Font Software is licensed under the SIL Open Font License, Version 1.1.
+This license is copied below, and is also available with a FAQ at:
+http://scripts.sil.org/OFL
+
+
+-----------------------------------------------------------
+SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
+-----------------------------------------------------------
+
+PREAMBLE
+The goals of the Open Font License (OFL) are to stimulate worldwide
+development of collaborative font projects, to support the font creation
+efforts of academic and linguistic communities, and to provide a free and
+open framework in which fonts may be shared and improved in partnership
+with others.
+
+The OFL allows the licensed fonts to be used, studied, modified and
+redistributed freely as long as they are not sold by themselves. The
+fonts, including any derivative works, can be bundled, embedded, 
+redistributed and/or sold with any software provided that any reserved
+names are not used by derivative works. The fonts and derivatives,
+however, cannot be released under any other type of license. The
+requirement for fonts to remain under this license does not apply
+to any document created using the fonts or their derivatives.
+
+DEFINITIONS
+"Font Software" refers to the set of files released by the Copyright
+Holder(s) under this license and clearly marked as such. This may
+include source files, build scripts and documentation.
+
+"Reserved Font Name" refers to any names specified as such after the
+copyright statement(s).
+
+"Original Version" refers to the collection of Font Software components as
+distributed by the Copyright Holder(s).
+
+"Modified Version" refers to any derivative made by adding to, deleting,
+or substituting -- in part or in whole -- any of the components of the
+Original Version, by changing formats or by porting the Font Software to a
+new environment.
+
+"Author" refers to any designer, engineer, programmer, technical
+writer or other person who contributed to the Font Software.
+
+PERMISSION & CONDITIONS
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of the Font Software, to use, study, copy, merge, embed, modify,
+redistribute, and sell modified and unmodified copies of the Font
+Software, subject to the following conditions:
+
+1) Neither the Font Software nor any of its individual components,
+in Original or Modified Versions, may be sold by itself.
+
+2) Original or Modified Versions of the Font Software may be bundled,
+redistributed and/or sold with any software, provided that each copy
+contains the above copyright notice and this license. These can be
+included either as stand-alone text files, human-readable headers or
+in the appropriate machine-readable metadata fields within text or
+binary files as long as those fields can be easily viewed by the user.
+
+3) No Modified Version of the Font Software may use the Reserved Font
+Name(s) unless explicit written permission is granted by the corresponding
+Copyright Holder. This restriction only applies to the primary font name as
+presented to the users.
+
+4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
+Software shall not be used to promote, endorse or advertise any
+Modified Version, except to acknowledge the contribution(s) of the
+Copyright Holder(s) and the Author(s) or with their explicit written
+permission.
+
+5) The Font Software, modified or unmodified, in part or in whole,
+must be distributed entirely under this license, and must not be
+distributed under any other license. The requirement for fonts to
+remain under this license does not apply to any document created
+using the Font Software.
+
+TERMINATION
+This license becomes null and void if any of the above conditions are
+not met.
+
+DISCLAIMER
+THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
+OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
+COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
+INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
+DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
+OTHER DEALINGS IN THE FONT SOFTWARE.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@datatechsolutions/tympan-tokens",
-  "version": "0.4.0",
+  "version": "0.4.2",
   "description": "Tympan design tokens: W3C DTCG source (colour, space, radius, type, elevation and glass, motion, z) and an OKLCH theme generator, with the tympan, fakhir, astrlabe, neutral and high-contrast presets in light and dark (plus opt-in UI themes derived from the print book styles), built to --ty-* CSS custom properties, JSON and a TypeScript export.",
   "license": "FSL-1.1-ALv2",
   "author": "Natalia Mesquita",
@@ -40,6 +40,8 @@
       "default": "./dist/print-aliases.js"
     },
     "./tokens.css": "./dist/tokens.css",
+    "./fonts.css": "./dist/fonts.css",
+    "./fonts/*": "./fonts/*",
     "./print-themes.css": "./dist/print-themes.css",
     "./print-themes/*": "./dist/print-themes/*",
     "./print-themes.json": "./dist/print-themes.json",
@@ -51,14 +53,17 @@
   "files": [
     "dist",
     "src",
+    "fonts",
     "LICENSE",
-    "README.md"
+    "README.md",
+    "THIRD_PARTY_NOTICES.md"
   ],
   "scripts": {
     "build": "node scripts/build.mjs && tsdown",
     "typecheck": "tsc --noEmit -p tsconfig.json && node scripts/build.mjs --check",
     "test": "vitest run",
-    "prepack": "npm run build"
+    "prepack": "npm run build",
+    "fetch-fonts": "node scripts/fetch-fonts.mjs"
   },
   "devDependencies": {
     "style-dictionary": "^5.5.5"

package/src/fonts.ts

@@ -0,0 +1,136 @@
+// Bundled web fonts. Tympan ships every family its themes name as woff2
+// files inside this package (packages/tokens/fonts/, fetched once by
+// scripts/fetch-fonts.mjs and committed), declared with @font-face in
+// dist/fonts.css (imported by tokens.css) and in the print theme sheets.
+// The CJK families are the exception: they ship in the optional
+// @datatechsolutions/tympan-fonts-cjk package (see CJK_FONT_FAMILIES).
+// @font-face only downloads a file when text uses that face and falls in its
+// unicode-range, so nothing is fetched from a third party at runtime and an
+// unused script or theme costs nothing.
+//
+// The lists below are the source of truth for what scripts/fetch-fonts.mjs
+// downloads; the specs use the Google Fonts css2 syntax
+// (`Family Name:axes@values`) because that is where the files come from.
+
+import { SCRIPT_RULES } from './scripts.ts'
+
+/** Base stacks of every preset: Source Serif 4, IBM Plex Sans, IBM Plex Mono. */
+export const BASE_FONT_SPECS: readonly string[] = [
+  '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. */
+export const SCRIPT_FONT_FAMILIES: readonly string[] = [
+  ...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 ?? [])]),
+  ]),
+]
+
+export const SCRIPT_FONT_SPECS: readonly string[] = 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.
+ */
+export const CJK_FONT_FAMILIES: readonly string[] = [
+  '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: string) => CJK_FONT_FAMILIES.includes(spec.split(':')[0]!)
+
+/** Specs whose faces go into the fonts.css of @datatechsolutions/tympan-fonts-cjk. */
+export const CJK_FONT_SPECS: readonly string[] = SCRIPT_FONT_SPECS.filter(isCjkSpec)
+
+/** Every spec whose faces go into dist/fonts.css (and so tokens.css): base and non-CJK Noto. */
+export const CORE_FONT_SPECS: readonly string[] = [...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).
+ */
+export const SYSTEM_FONT_FAMILIES: readonly string[] = [
+  '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',
+]
+
+/** 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 function fontFaceCss(manifest: FontManifest, specs: readonly string[], base: string): string {
+  const ids = new Set<string>()
+  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')
+}

package/src/index.ts

@@ -8,6 +8,7 @@ export * from './flow.ts'
 export * from './print-presets.ts'
 export * from './print-themes.ts'
 export * from './print-aliases.ts'
+export * from './fonts.ts'
 
 import { presets as corePresets } from './presets.ts'
 import { printThemePresets } from './print-themes.ts'

package/src/presets.ts

@@ -110,8 +110,10 @@ export 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
@@ -142,22 +144,30 @@ export const astrlabePreset: ThemeConfig = {
       '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)',
+      // The canvas plane: the app's pale lavender ground.
+      'surface-sunken': '#f2f3fa',
+      // The liquid divider: slate 400 at about a quarter.
+      line: 'rgb(148 163 184 / 0.26)',
       'line-strong': 'rgb(100 116 139 / 0.45)',
       ink: '#0f172a',
-      'ink-2': '#334155',
-      // One step darker than the old #546175 so AA holds on the glass grounds.
-      'ink-3': '#4d5a6b',
+      // Slate 600 for secondary text, as the app always had.
+      'ink-2': '#475569',
+      // Slate 500 fails 4.5:1 on the sunken ground by a hair; this is the
+      // nearest slate that holds AA there.
+      'ink-3': '#5b6779',
       success: '#15803d',
       // Cyan, deliberately off the indigo brand, for the running state.
       info: '#0e7490',
       warning: '#a16207',
       danger: '#be123c',
-      neutral: '#4d5a6b',
+      neutral: '#5b6779',
+      backdrop: 'rgb(15 23 42 / 0.4)',
+      // The three soft colour fields behind the glass: violet above, sky below.
+      'ambient-1': 'rgb(167 139 250 / 0.05)',
+      'ambient-2': 'rgb(56 189 248 / 0.03)',
     },
     dark: {
       brand: '#818cf8',
@@ -165,28 +175,117 @@ export const astrlabePreset: ThemeConfig = {
       '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)',
+      // Slate 950, the app's night ground.
+      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: {
     light: ['#4f46e5', '#7c3aed', '#9333ea'],
     dark: ['#4f46e5', '#7c3aed', '#9333ea'],
   },
+  // 12 px controls, 20 px cards and panels, 24 px dialogs and hero sheets.
+  radii: { card: 20, sheet: 24 },
+  // Glass: a light boost on light grounds (more would amplify the ambient
+  // tint into a grey-lavender wash), a strong one on dark grounds.
+  glassSaturate: { light: 1.15, dark: 1.5 },
+  // The liquid-glass elevation: a soft drop under every sheet, a specular
+  // inner highlight on its top edge, and the role-named elevation scale.
+  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: {
+      // Lit from above: bright top and start edges, grey shaded ones (top end bottom start).
+      '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',
+      // The inner highlight of raised and floating glass.
+      '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)',
+    },
+  },
+  // The app's type scale: 30 px display, 24 px page titles, 18 px sections, 16 px
+  // sub-sections, 14 px labels, tight tracking on titles.
+  strings: {
+    // The display step is the 30 px wordmark of the sign-in screens.
+    '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',
+  },
   // The platform's own UI fonts, headings included (no web font to fetch).
   fonts: {
     display: ['-apple-system', 'BlinkMacSystemFont', 'Segoe UI', 'Roboto', 'Helvetica Neue', 'Noto Sans', 'Arial', 'sans-serif'],

package/src/print-themes.ts

@@ -398,7 +398,20 @@ function draftPrintTheme(style: PrintStyle, override: PrintThemeOverride = PRINT
 /** Every book style as a UI theme, in the order of `printPresets`. */
 export const printThemePresets: readonly ThemeConfig[] = (Object.values(printPresets) as PrintStyle[]).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.
+ */
 export const printThemeFontUrls: Readonly<Record<string, string>> = 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.
+ */
+export const printThemeFontSpecs: Readonly<Record<string, readonly string[]>> = Object.fromEntries(
+  (Object.values(printPresets) as PrintStyle[]).map((s) => [`${PRINT_THEME_PREFIX}${s.name}`, [...s.googleFonts]]),
+)

package/src/stylesheet.ts

@@ -120,6 +120,9 @@ export const FORCED_COLORS_VARS: VarList = [
   ['--ty-shadow-modal', 'none'],
   ['--ty-glass-blur-sheet', '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. */
@@ -130,6 +133,8 @@ export const OPAQUE_VARS: VarList = [
   ['--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'],
 ]

package/src/theme.ts

@@ -70,6 +70,31 @@ 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 const RAMP_STEPS = [50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950] as const
@@ -288,7 +313,7 @@ export interface ResolvedTheme {
   colors: Record<string, Rgba>
   ramps: Record<SeedName, Record<RampStep, Rgba>>
   cta: { 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. */
@@ -471,19 +496,24 @@ export function resolveTheme(config: ThemeConfig, mode: Mode, contrastOverride?:
     }
   }
 
+  const shadowPins = config.shadowPins?.[mode] ?? {}
+  for (const [name, layers] of Object.entries(shadowPins) as Array<[ShadowName, ShadowPin[]]>) {
+    shadows[name] = layers.map((l) => ({ ...l, color: parseColor(l.color) }))
+  }
+
   const R = config.radius
   const dimensions: Record<string, number> = {
     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 * 0.6)),
     'focus-width': contrast === 'high' ? 3 : 2,
     'glass-blur-sheet': config.glass ? 20 : 0,
     'glass-blur-floating': config.glass ? 24 : 0,
   }
-  const numbers: Record<string, number> = { 'glass-saturate': config.glass ? 1.15 : 1 }
+  const numbers: Record<string, number> = { 'glass-saturate': config.glass ? (config.glassSaturate?.[mode] ?? 1.15) : 1 }
 
   const fonts: ResolvedTheme['fonts'] = {}
   for (const role of ['display', 'body', 'mono'] as const) {
@@ -491,7 +521,7 @@ export function resolveTheme(config: ThemeConfig, mode: Mode, contrastOverride?:
     if (list?.length) fonts[FONT_ROLE_TOKENS[role]] = [...list]
   }
 
-  return { name: config.name, mode, contrast, colors, ramps, cta: { angle: 135, stops: ctaStops }, shadows, dimensions, numbers, fonts, strings: config.strings ?? {}, report }
+  return { name: config.name, mode, contrast, colors, ramps, cta: { angle: 135, stops: ctaStops }, shadows, dimensions, numbers, fonts, strings: { ...config.strings, ...(contrast === config.contrast ? config.modeStrings?.[mode] : undefined) }, report }
 }
 
 // ---------------------------------------------------------------------------