@cube-dev/ui-kit 0.0.0-canary-694a764 → 0.0.0-canary-dcbc0fb

package/dist/tokens/color-seed.d.ts

@@ -0,0 +1,44 @@
+
+//#region src/tokens/color-seed.d.ts
+/**
+ * Turns a colour into the three numbers the palette is seeded from.
+ *
+ * A deliberate LEAF: it imports Glaze and nothing else. `./palette-config` reads it
+ * from inside `resolveConfig`, and `./palette-config` is the one module the token
+ * graph is not allowed to have a cycle through — so anything this file imported
+ * would become a `palette-config` dependency too. Glaze has no edge back into the
+ * token modules, so it is safe; `./palette` (which owns `TINT_RECIPE` and the global
+ * `glaze.configure`) is not.
+ *
+ * There is no ordering hazard either, even though `./palette` runs
+ * `glaze.configure()` at module scope and this file may be called before that
+ * happens. A bare-string colour token defaults to `lightTone: false`, so its light
+ * variant preserves the input tone exactly and its hue and saturation come straight
+ * off the parse — all three readings are independent of the global config.
+ */
+/** Hue, saturation and tone read off a colour, on the palette's own scales. */
+interface ColorSeed {
+  /** 0–360. */
+  hue: number;
+  /** 0–100 — the palette's seed scale, not Glaze's 0–1 factor. */
+  saturation: number;
+  /** 0–100 on the OKHST tone axis. */
+  tone: number;
+}
+/**
+ * Read a colour's hue, saturation and tone.
+ *
+ * Accepts anything Glaze parses — hex, `rgb()`, `hsl()`, `okhsl()`, `okhst()`,
+ * `oklch()`. CSS colour keywords (`rebeccapurple`) are **not** supported.
+ *
+ * Returns `null` on anything unparseable, having warned once, so a caller can fall
+ * back to its numeric seed instead of throwing on a typo in a settings field.
+ *
+ * ```ts
+ * colorSeed('#0ea5e9'); // → { hue: 237.32, saturation: 98.19, tone: 65.78 }
+ * ```
+ */
+declare function colorSeed(value: string): ColorSeed | null;
+//#endregion
+export { ColorSeed, colorSeed };
+//# sourceMappingURL=color-seed.d.ts.map

package/dist/tokens/color-seed.js

@@ -0,0 +1,48 @@
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-dcbc0fb | Cube Dev Team */
+import { glaze } from "@tenphi/glaze";
+
+//#region src/tokens/color-seed.ts
+/**
+* A colour picker being dragged emits a distinct string per frame, and
+* `resolveConfig` runs on every `setPaletteConfig` *and* every
+* `resolvePaletteConfig` preview. One resolve is only ~3µs, so this is insurance
+* against a drag rather than a hot path — hence a cap and a clear rather than an
+* LRU.
+*/
+const CACHE_LIMIT = 256;
+const cache = /* @__PURE__ */ new Map();
+/**
+* Read a colour's hue, saturation and tone.
+*
+* Accepts anything Glaze parses — hex, `rgb()`, `hsl()`, `okhsl()`, `okhst()`,
+* `oklch()`. CSS colour keywords (`rebeccapurple`) are **not** supported.
+*
+* Returns `null` on anything unparseable, having warned once, so a caller can fall
+* back to its numeric seed instead of throwing on a typo in a settings field.
+*
+* ```ts
+* colorSeed('#0ea5e9'); // → { hue: 237.32, saturation: 98.19, tone: 65.78 }
+* ```
+*/
+function colorSeed(value) {
+	const cached = cache.get(value);
+	if (cached !== void 0) return cached;
+	let seed = null;
+	try {
+		const { h, s, t } = glaze.color(value).resolve().light;
+		seed = {
+			hue: h,
+			saturation: s * 100,
+			tone: t * 100
+		};
+	} catch {
+		console.warn(`[cube-ui-kit] could not parse palette colour ${JSON.stringify(value)}; keeping the numeric seed. Accepted: hex, rgb(), hsl(), okhsl(), okhst(), oklch() — CSS colour keywords are not supported.`);
+	}
+	if (cache.size >= CACHE_LIMIT) cache.clear();
+	cache.set(value, seed);
+	return seed;
+}
+
+//#endregion
+export { colorSeed };
+//# sourceMappingURL=color-seed.js.map

package/dist/tokens/color-seed.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"color-seed.js","names":[],"sources":["../../src/tokens/color-seed.ts"],"sourcesContent":["import { glaze } from '@tenphi/glaze';\n\n/**\n * Turns a colour into the three numbers the palette is seeded from.\n *\n * A deliberate LEAF: it imports Glaze and nothing else. `./palette-config` reads it\n * from inside `resolveConfig`, and `./palette-config` is the one module the token\n * graph is not allowed to have a cycle through — so anything this file imported\n * would become a `palette-config` dependency too. Glaze has no edge back into the\n * token modules, so it is safe; `./palette` (which owns `TINT_RECIPE` and the global\n * `glaze.configure`) is not.\n *\n * There is no ordering hazard either, even though `./palette` runs\n * `glaze.configure()` at module scope and this file may be called before that\n * happens. A bare-string colour token defaults to `lightTone: false`, so its light\n * variant preserves the input tone exactly and its hue and saturation come straight\n * off the parse — all three readings are independent of the global config.\n */\n\n/** Hue, saturation and tone read off a colour, on the palette's own scales. */\nexport interface ColorSeed {\n  /** 0–360. */\n  hue: number;\n  /** 0–100 — the palette's seed scale, not Glaze's 0–1 factor. */\n  saturation: number;\n  /** 0–100 on the OKHST tone axis. */\n  tone: number;\n}\n\n/**\n * A colour picker being dragged emits a distinct string per frame, and\n * `resolveConfig` runs on every `setPaletteConfig` *and* every\n * `resolvePaletteConfig` preview. One resolve is only ~3µs, so this is insurance\n * against a drag rather than a hot path — hence a cap and a clear rather than an\n * LRU.\n */\nconst CACHE_LIMIT = 256;\nconst cache = new Map<string, ColorSeed | null>();\n\n/**\n * Read a colour's hue, saturation and tone.\n *\n * Accepts anything Glaze parses — hex, `rgb()`, `hsl()`, `okhsl()`, `okhst()`,\n * `oklch()`. CSS colour keywords (`rebeccapurple`) are **not** supported.\n *\n * Returns `null` on anything unparseable, having warned once, so a caller can fall\n * back to its numeric seed instead of throwing on a typo in a settings field.\n *\n * ```ts\n * colorSeed('#0ea5e9'); // → { hue: 237.32, saturation: 98.19, tone: 65.78 }\n * ```\n */\nexport function colorSeed(value: string): ColorSeed | null {\n  const cached = cache.get(value);\n\n  // `null` is a cached FAILURE, not a miss — which is also what dedupes the\n  // warning, so a bad value in a re-rendered config does not fill the console.\n  if (cached !== undefined) return cached;\n\n  let seed: ColorSeed | null = null;\n\n  try {\n    const { h, s, t } = glaze.color(value).resolve().light;\n\n    // Glaze reports saturation and tone as 0–1 factors; the palette's are 0–100.\n    seed = { hue: h, saturation: s * 100, tone: t * 100 };\n  } catch {\n    console.warn(\n      `[cube-ui-kit] could not parse palette colour ${JSON.stringify(value)}; ` +\n        `keeping the numeric seed. Accepted: hex, rgb(), hsl(), okhsl(), okhst(), ` +\n        `oklch() — CSS colour keywords are not supported.`,\n    );\n  }\n\n  if (cache.size >= CACHE_LIMIT) cache.clear();\n  cache.set(value, seed);\n\n  return seed;\n}\n"],"mappings":";;;;;;;;;;;AAoCA,MAAM,cAAc;AACpB,MAAM,wBAAQ,IAAI,KAA+B;;;;;;;;;;;;;;AAejD,SAAgB,UAAU,OAAiC;CACzD,MAAM,SAAS,MAAM,IAAI,MAAM;AAI/B,KAAI,WAAW,OAAW,QAAO;CAEjC,IAAI,OAAyB;AAE7B,KAAI;EACF,MAAM,EAAE,GAAG,GAAG,MAAM,MAAM,MAAM,MAAM,CAAC,SAAS,CAAC;AAGjD,SAAO;GAAE,KAAK;GAAG,YAAY,IAAI;GAAK,MAAM,IAAI;GAAK;SAC/C;AACN,UAAQ,KACN,gDAAgD,KAAK,UAAU,MAAM,CAAC,6HAGvE;;AAGH,KAAI,MAAM,QAAQ,YAAa,OAAM,OAAO;AAC5C,OAAM,IAAI,OAAO,KAAK;AAEtB,QAAO"}

package/dist/tokens/color-theme.d.ts

@@ -17,7 +17,7 @@ interface ColorThemeConfig {
   saturation?: number;
   pastel?: boolean;
   /**
-   * Extra colour definitions, merged over {@link TINT_RECIPE}. Anything Glaze's
+   * Extra colour definitions, merged over {@link tintRecipe}. Anything Glaze's
    * `theme.colors()` accepts, including `contrast` floors against a sibling.
    */
   colors?: ColorMap;
@@ -45,6 +45,13 @@ interface ColorTheme {
  * ```ts
  * colorThemeSeed('#0ea5e9'); // → { hue: 237.32, saturation: 98.19 }
  * ```
+ *
+ * The tone {@link colorSeed} also reads is dropped here on purpose: a tint theme
+ * re-derives its lightness per scheme, which is what makes it adaptive. The palette's
+ * `accentColor` keeps the tone, because a brand fill has to *be* the colour.
+ *
+ * An unparseable value falls back to the shipped seed rather than throwing — a hue
+ * typed into a settings field should not take the render down.
  */
 declare function colorThemeSeed(value: string): {
   hue: number;

package/dist/tokens/color-theme.js

@@ -1,6 +1,7 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-694a764 | Cube Dev Team */
-import { DEFAULT_SATURATION, getPaletteConfig, getPaletteVersion, usePaletteVersion } from "./palette-config.js";
-import { TINT_RECIPE } from "./palette.js";
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-dcbc0fb | Cube Dev Team */
+import { colorSeed } from "./color-seed.js";
+import { DEFAULT_HUE, DEFAULT_SATURATION, getPaletteConfig, getPaletteVersion, usePaletteVersion } from "./palette-config.js";
+import { tintRecipe } from "./palette.js";
 import { useGlobalStyles } from "@tenphi/tasty";
 import { glaze } from "@tenphi/glaze";
 
@@ -50,12 +51,23 @@ function stableStringify(value) {
 * ```ts
 * colorThemeSeed('#0ea5e9'); // → { hue: 237.32, saturation: 98.19 }
 * ```
+*
+* The tone {@link colorSeed} also reads is dropped here on purpose: a tint theme
+* re-derives its lightness per scheme, which is what makes it adaptive. The palette's
+* `accentColor` keeps the tone, because a brand fill has to *be* the colour.
+*
+* An unparseable value falls back to the shipped seed rather than throwing — a hue
+* typed into a settings field should not take the render down.
 */
 function colorThemeSeed(value) {
-	const light = glaze.color(value).resolve().light;
+	const seed = colorSeed(value);
+	if (!seed) return {
+		hue: DEFAULT_HUE,
+		saturation: DEFAULT_SATURATION
+	};
 	return {
-		hue: light.h,
-		saturation: light.s * 100
+		hue: seed.hue,
+		saturation: seed.saturation
 	};
 }
 /**
@@ -98,7 +110,7 @@ function getColorTheme(config) {
 	};
 	const theme = glaze(hue, saturation, Object.keys(overrides).length ? overrides : void 0);
 	theme.colors({
-		...TINT_RECIPE,
+		...tintRecipe(paletteConfig),
 		...config.colors
 	});
 	const raw = theme.tasty({ format: "oklch" });

package/dist/tokens/color-theme.js.map

@@ -1 +1 @@
-{"version":3,"file":"color-theme.js","names":[],"sources":["../../src/tokens/color-theme.ts"],"sourcesContent":["import { glaze } from '@tenphi/glaze';\nimport { useGlobalStyles } from '@tenphi/tasty';\n\n// Imported for its SIDE EFFECT as much as for `TINT_RECIPE`.\n//\n// `palette.ts` runs `glaze.configure({ states: { dark: '@dark', highContrast:\n// '@hc' }, modes: …, darkTone: … })` at module scope, and that global config is\n// what makes a theme emit `'@dark'` / `'@hc'` keys at all. Without this import\n// a runtime theme falls back to Glaze's defaults — `@media(prefers-color-scheme:\n// dark)` keys and NO high-contrast tier — which still renders, so the failure is\n// silent. `color-theme.test.ts` asserts the `'@hc'` key exists to catch it.\nimport { TINT_RECIPE } from './palette';\nimport {\n  DEFAULT_SATURATION,\n  getPaletteConfig,\n  getPaletteVersion,\n  usePaletteVersion,\n} from './palette-config';\n\nimport type { ColorMap, GlazeConfigOverride } from '@tenphi/glaze';\nimport type { Styles } from '@tenphi/tasty';\n\nexport interface ColorThemeConfig {\n  /**\n   * A hue in 0–360, or any colour Glaze parses — hex, `rgb()`, `hsl()`,\n   * `okhsl()`, `okhst()`, `oklch()`.\n   *\n   * From a colour only the HUE and SATURATION are taken; the lightness is\n   * discarded and re-derived per scheme. That is what makes the result adaptive\n   * rather than a value that happens to work in one theme.\n   */\n  hue: number | string;\n  /** 0–100. @default the palette's own saturation seed */\n  saturation?: number;\n  pastel?: boolean;\n  /**\n   * Extra colour definitions, merged over {@link TINT_RECIPE}. Anything Glaze's\n   * `theme.colors()` accepts, including `contrast` floors against a sibling.\n   */\n  colors?: ColorMap;\n}\n\nexport interface ColorTheme {\n  /**\n   * A hash of the config, and the token prefix — `'tint-1a2b3c'`.\n   *\n   * Content-addressed rather than positional so two components asking for the\n   * same colour name the same theme, and therefore share one injection. Also\n   * makes it safe to stamp on the DOM as an identifier.\n   */\n  name: string;\n  /**\n   * Tasty token declarations, one state map per colour:\n   * `{ '#tint-1a2b3c-surface': { '': …, '@dark': …, '@hc': …, '@dark & @hc': … } }`\n   */\n  tokens: Styles;\n  /** Token references by their unprefixed name — `{ surface: '#tint-1a2b3c-surface' }`. */\n  colors: Record<string, string>;\n}\n\n/**\n * FNV-1a, base36. Short, stable and dependency-free.\n *\n * These hashes name CSS custom properties and land in DOM attributes, so they\n * have to be deterministic across processes (SSR and the client must agree) and\n * safe as identifiers — but not cryptographic.\n */\nexport function hashString(input: string): string {\n  let hash = 0x811c9dc5;\n\n  for (let i = 0; i < input.length; i++) {\n    hash ^= input.charCodeAt(i);\n    // >>> 0 keeps it an unsigned 32-bit int; `Math.imul` is the 32-bit multiply.\n    hash = Math.imul(hash, 0x01000193) >>> 0;\n  }\n\n  return hash.toString(36);\n}\n\n/**\n * Hashes the RESOLVED seed, not the config as written.\n *\n * `{ hue: '#0ea5e9' }` and `{ hue: 237.32, saturation: 98.19 }` are the same\n * colour said two ways; hashing the input would give them two names, two\n * injections and two sets of generated rules. Rounded, because a seed that\n * differs in the twelfth decimal is the same colour to every eye and every\n * renderer — and an unrounded float would defeat the deduplication it is here to\n * provide.\n */\nfunction hashSeed(seed: ResolvedSeed): string {\n  return `tint-${hashString(\n    JSON.stringify([\n      seed.hue.toFixed(4),\n      seed.saturation.toFixed(4),\n      seed.pastel,\n      seed.colors ? stableStringify(seed.colors) : null,\n    ]),\n  )}`;\n}\n\ninterface ResolvedSeed {\n  hue: number;\n  saturation: number;\n  pastel: boolean;\n  colors?: ColorMap;\n}\n\n/** Key order must not change the hash, or two identical configs get two slots. */\nfunction stableStringify(value: unknown): string {\n  if (value === null || typeof value !== 'object') return JSON.stringify(value);\n\n  if (Array.isArray(value)) {\n    return `[${value.map(stableStringify).join(',')}]`;\n  }\n\n  const entries = Object.entries(value as Record<string, unknown>).sort(\n    ([a], [b]) => (a < b ? -1 : a > b ? 1 : 0),\n  );\n\n  return `{${entries\n    .map(([key, item]) => `${JSON.stringify(key)}:${stableStringify(item)}`)\n    .join(',')}}`;\n}\n\n/**\n * The hue and saturation of a colour, for use as a theme seed.\n *\n * ```ts\n * colorThemeSeed('#0ea5e9'); // → { hue: 237.32, saturation: 98.19 }\n * ```\n */\nexport function colorThemeSeed(value: string): {\n  hue: number;\n  saturation: number;\n} {\n  const light = glaze.color(value).resolve().light;\n\n  // Glaze reports saturation as a 0–1 factor; the palette's seeds are 0–100.\n  return { hue: light.h, saturation: light.s * 100 };\n}\n\n/**\n * Cached by `${paletteVersion}:${name}`.\n *\n * The palette version is in the KEY rather than triggering a clear, so a stale\n * entry is simply unreachable. `lastVersion` still clears the map on a change,\n * or repeated `setPaletteConfig` calls would grow it without bound.\n */\nconst cache = new Map<string, ColorTheme>();\nlet lastVersion = -1;\n\n/**\n * Build (or reuse) an adaptive theme from a hue.\n *\n * Pure and memoized: the same config returns the same object identity until the\n * palette is re-seeded. Registering the tokens is {@link useColorTheme}'s job —\n * this only computes them, so it is safe to call while rendering or from a test.\n */\nexport function getColorTheme(config: ColorThemeConfig): ColorTheme {\n  const version = getPaletteVersion();\n\n  if (version !== lastVersion) {\n    cache.clear();\n    lastVersion = version;\n  }\n\n  const paletteConfig = getPaletteConfig();\n  const parsed =\n    typeof config.hue === 'string' ? colorThemeSeed(config.hue) : null;\n  const seed: ResolvedSeed = {\n    hue: parsed ? parsed.hue : (config.hue as number),\n    saturation:\n      config.saturation ??\n      parsed?.saturation ??\n      paletteConfig.saturation ??\n      DEFAULT_SATURATION,\n    pastel: config.pastel ?? paletteConfig.pastel ?? false,\n    colors: config.colors,\n  };\n\n  const name = hashSeed(seed);\n  const cached = cache.get(name);\n\n  if (cached) return cached;\n\n  const { hue, saturation } = seed;\n\n  // `pastel` and `contrastLevel` are instance-level in Glaze, not settable\n  // through `glaze.configure`, so a runtime theme has to carry them itself or it\n  // would ignore a pastel palette. Omitted entirely when off, so the default\n  // output is provably the same as passing nothing.\n  const overrides: GlazeConfigOverride = {\n    ...(paletteConfig.contrastLevel != null\n      ? { contrastLevel: paletteConfig.contrastLevel }\n      : null),\n    ...(seed.pastel ? { pastel: true } : null),\n  };\n\n  const theme = glaze(\n    hue,\n    saturation,\n    Object.keys(overrides).length ? overrides : undefined,\n  );\n\n  theme.colors({ ...TINT_RECIPE, ...config.colors });\n\n  // `prefix` is a palette-only option, so the keys are renamed here. `oklch`\n  // because that is what the palette emits; tasty converts to the configured\n  // colour space on the way out either way.\n  const raw = theme.tasty({ format: 'oklch' }) as Record<string, unknown>;\n  const tokens: Styles = {};\n  const colors: Record<string, string> = {};\n\n  for (const [key, value] of Object.entries(raw)) {\n    // Only the `#colour` entries are renamed; `splitHue` is off, so there are no\n    // `$…-hue` companions to worry about, but a future one must not be mangled.\n    if (!key.startsWith('#')) {\n      (tokens as Record<string, unknown>)[key] = value;\n      continue;\n    }\n\n    const bare = key.slice(1);\n    const token = `#${name}-${bare}`;\n\n    (tokens as Record<string, unknown>)[token] = value;\n    colors[bare] = token;\n  }\n\n  const result: ColorTheme = { name, tokens, colors };\n\n  cache.set(name, result);\n\n  return result;\n}\n\n/**\n * Register an adaptive theme's tokens once per document, and get it back.\n *\n * The tokens land on `body` under a slot keyed by the theme's name, which is a\n * hash of the config — so every component asking for the same colour shares one\n * injection no matter how many of them there are. Tasty's global-style slots are\n * also permanent, which is what makes that safe: one component unmounting cannot\n * strip tokens another is still referencing.\n *\n * `body` rather than `:root`, which emits nothing at all — the same selector\n * `GlobalStyles` uses for the palette's own tokens. Custom properties inherit, so\n * anything rendered inside the document sees them; the one thing this cannot\n * reach is content portalled outside `<body>`, which nothing does.\n *\n * Because the slot id hashes the CONFIG rather than the resolved values,\n * re-seeding the palette replaces the same slot instead of leaking a new one.\n *\n * ```tsx\n * const theme = useColorTheme({ hue: '#0ea5e9' });\n * // theme.colors.surface → '#tint-1a2b3c-surface'\n * ```\n */\nexport function useColorTheme(config: ColorThemeConfig): ColorTheme {\n  // Subscribes this component to a re-seed. `getColorTheme` reads the version\n  // itself for its cache, so the value is unused here — the subscription is the\n  // point, and it is what makes the tokens below re-inject.\n  usePaletteVersion();\n\n  const theme = getColorTheme(config);\n\n  useGlobalStyles('body', theme.tokens, {\n    id: `cube-color-theme-${theme.name}`,\n  });\n\n  return theme;\n}\n"],"mappings":"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"}
+{"version":3,"file":"color-theme.js","names":[],"sources":["../../src/tokens/color-theme.ts"],"sourcesContent":["import { glaze } from '@tenphi/glaze';\nimport { useGlobalStyles } from '@tenphi/tasty';\n\n// Imported for its SIDE EFFECT as much as for `tintRecipe`.\n//\n// `palette.ts` runs `glaze.configure({ states: { dark: '@dark', highContrast:\n// '@hc' }, modes: …, darkTone: … })` at module scope, and that global config is\n// what makes a theme emit `'@dark'` / `'@hc'` keys at all. Without this import\n// a runtime theme falls back to Glaze's defaults — `@media(prefers-color-scheme:\n// dark)` keys and NO high-contrast tier — which still renders, so the failure is\n// silent. `color-theme.test.ts` asserts the `'@hc'` key exists to catch it.\nimport { colorSeed } from './color-seed';\nimport { tintRecipe } from './palette';\nimport {\n  DEFAULT_HUE,\n  DEFAULT_SATURATION,\n  getPaletteConfig,\n  getPaletteVersion,\n  usePaletteVersion,\n} from './palette-config';\n\nimport type { ColorMap, GlazeConfigOverride } from '@tenphi/glaze';\nimport type { Styles } from '@tenphi/tasty';\n\nexport interface ColorThemeConfig {\n  /**\n   * A hue in 0–360, or any colour Glaze parses — hex, `rgb()`, `hsl()`,\n   * `okhsl()`, `okhst()`, `oklch()`.\n   *\n   * From a colour only the HUE and SATURATION are taken; the lightness is\n   * discarded and re-derived per scheme. That is what makes the result adaptive\n   * rather than a value that happens to work in one theme.\n   */\n  hue: number | string;\n  /** 0–100. @default the palette's own saturation seed */\n  saturation?: number;\n  pastel?: boolean;\n  /**\n   * Extra colour definitions, merged over {@link tintRecipe}. Anything Glaze's\n   * `theme.colors()` accepts, including `contrast` floors against a sibling.\n   */\n  colors?: ColorMap;\n}\n\nexport interface ColorTheme {\n  /**\n   * A hash of the config, and the token prefix — `'tint-1a2b3c'`.\n   *\n   * Content-addressed rather than positional so two components asking for the\n   * same colour name the same theme, and therefore share one injection. Also\n   * makes it safe to stamp on the DOM as an identifier.\n   */\n  name: string;\n  /**\n   * Tasty token declarations, one state map per colour:\n   * `{ '#tint-1a2b3c-surface': { '': …, '@dark': …, '@hc': …, '@dark & @hc': … } }`\n   */\n  tokens: Styles;\n  /** Token references by their unprefixed name — `{ surface: '#tint-1a2b3c-surface' }`. */\n  colors: Record<string, string>;\n}\n\n/**\n * FNV-1a, base36. Short, stable and dependency-free.\n *\n * These hashes name CSS custom properties and land in DOM attributes, so they\n * have to be deterministic across processes (SSR and the client must agree) and\n * safe as identifiers — but not cryptographic.\n */\nexport function hashString(input: string): string {\n  let hash = 0x811c9dc5;\n\n  for (let i = 0; i < input.length; i++) {\n    hash ^= input.charCodeAt(i);\n    // >>> 0 keeps it an unsigned 32-bit int; `Math.imul` is the 32-bit multiply.\n    hash = Math.imul(hash, 0x01000193) >>> 0;\n  }\n\n  return hash.toString(36);\n}\n\n/**\n * Hashes the RESOLVED seed, not the config as written.\n *\n * `{ hue: '#0ea5e9' }` and `{ hue: 237.32, saturation: 98.19 }` are the same\n * colour said two ways; hashing the input would give them two names, two\n * injections and two sets of generated rules. Rounded, because a seed that\n * differs in the twelfth decimal is the same colour to every eye and every\n * renderer — and an unrounded float would defeat the deduplication it is here to\n * provide.\n */\nfunction hashSeed(seed: ResolvedSeed): string {\n  return `tint-${hashString(\n    JSON.stringify([\n      seed.hue.toFixed(4),\n      seed.saturation.toFixed(4),\n      seed.pastel,\n      seed.colors ? stableStringify(seed.colors) : null,\n    ]),\n  )}`;\n}\n\ninterface ResolvedSeed {\n  hue: number;\n  saturation: number;\n  pastel: boolean;\n  colors?: ColorMap;\n}\n\n/** Key order must not change the hash, or two identical configs get two slots. */\nfunction stableStringify(value: unknown): string {\n  if (value === null || typeof value !== 'object') return JSON.stringify(value);\n\n  if (Array.isArray(value)) {\n    return `[${value.map(stableStringify).join(',')}]`;\n  }\n\n  const entries = Object.entries(value as Record<string, unknown>).sort(\n    ([a], [b]) => (a < b ? -1 : a > b ? 1 : 0),\n  );\n\n  return `{${entries\n    .map(([key, item]) => `${JSON.stringify(key)}:${stableStringify(item)}`)\n    .join(',')}}`;\n}\n\n/**\n * The hue and saturation of a colour, for use as a theme seed.\n *\n * ```ts\n * colorThemeSeed('#0ea5e9'); // → { hue: 237.32, saturation: 98.19 }\n * ```\n *\n * The tone {@link colorSeed} also reads is dropped here on purpose: a tint theme\n * re-derives its lightness per scheme, which is what makes it adaptive. The palette's\n * `accentColor` keeps the tone, because a brand fill has to *be* the colour.\n *\n * An unparseable value falls back to the shipped seed rather than throwing — a hue\n * typed into a settings field should not take the render down.\n */\nexport function colorThemeSeed(value: string): {\n  hue: number;\n  saturation: number;\n} {\n  const seed = colorSeed(value);\n\n  if (!seed) return { hue: DEFAULT_HUE, saturation: DEFAULT_SATURATION };\n\n  return { hue: seed.hue, saturation: seed.saturation };\n}\n\n/**\n * Cached by `${paletteVersion}:${name}`.\n *\n * The palette version is in the KEY rather than triggering a clear, so a stale\n * entry is simply unreachable. `lastVersion` still clears the map on a change,\n * or repeated `setPaletteConfig` calls would grow it without bound.\n */\nconst cache = new Map<string, ColorTheme>();\nlet lastVersion = -1;\n\n/**\n * Build (or reuse) an adaptive theme from a hue.\n *\n * Pure and memoized: the same config returns the same object identity until the\n * palette is re-seeded. Registering the tokens is {@link useColorTheme}'s job —\n * this only computes them, so it is safe to call while rendering or from a test.\n */\nexport function getColorTheme(config: ColorThemeConfig): ColorTheme {\n  const version = getPaletteVersion();\n\n  if (version !== lastVersion) {\n    cache.clear();\n    lastVersion = version;\n  }\n\n  const paletteConfig = getPaletteConfig();\n  const parsed =\n    typeof config.hue === 'string' ? colorThemeSeed(config.hue) : null;\n  const seed: ResolvedSeed = {\n    hue: parsed ? parsed.hue : (config.hue as number),\n    saturation:\n      config.saturation ??\n      parsed?.saturation ??\n      paletteConfig.saturation ??\n      DEFAULT_SATURATION,\n    pastel: config.pastel ?? paletteConfig.pastel ?? false,\n    colors: config.colors,\n  };\n\n  const name = hashSeed(seed);\n  const cached = cache.get(name);\n\n  if (cached) return cached;\n\n  const { hue, saturation } = seed;\n\n  // `pastel` and `contrastLevel` are instance-level in Glaze, not settable\n  // through `glaze.configure`, so a runtime theme has to carry them itself or it\n  // would ignore a pastel palette. Omitted entirely when off, so the default\n  // output is provably the same as passing nothing.\n  const overrides: GlazeConfigOverride = {\n    ...(paletteConfig.contrastLevel != null\n      ? { contrastLevel: paletteConfig.contrastLevel }\n      : null),\n    ...(seed.pastel ? { pastel: true } : null),\n  };\n\n  const theme = glaze(\n    hue,\n    saturation,\n    Object.keys(overrides).length ? overrides : undefined,\n  );\n\n  // The recipe follows the palette's `surfaceMode`, so a runtime tint sits the same\n  // distance off the page as a built-in status theme does. Safe to read here rather\n  // than hash into the seed: the cache is cleared on every palette version change,\n  // and `surfaceMode` is one of the fields that bumps it.\n  theme.colors({ ...tintRecipe(paletteConfig), ...config.colors });\n\n  // `prefix` is a palette-only option, so the keys are renamed here. `oklch`\n  // because that is what the palette emits; tasty converts to the configured\n  // colour space on the way out either way.\n  const raw = theme.tasty({ format: 'oklch' }) as Record<string, unknown>;\n  const tokens: Styles = {};\n  const colors: Record<string, string> = {};\n\n  for (const [key, value] of Object.entries(raw)) {\n    // Only the `#colour` entries are renamed; `splitHue` is off, so there are no\n    // `$…-hue` companions to worry about, but a future one must not be mangled.\n    if (!key.startsWith('#')) {\n      (tokens as Record<string, unknown>)[key] = value;\n      continue;\n    }\n\n    const bare = key.slice(1);\n    const token = `#${name}-${bare}`;\n\n    (tokens as Record<string, unknown>)[token] = value;\n    colors[bare] = token;\n  }\n\n  const result: ColorTheme = { name, tokens, colors };\n\n  cache.set(name, result);\n\n  return result;\n}\n\n/**\n * Register an adaptive theme's tokens once per document, and get it back.\n *\n * The tokens land on `body` under a slot keyed by the theme's name, which is a\n * hash of the config — so every component asking for the same colour shares one\n * injection no matter how many of them there are. Tasty's global-style slots are\n * also permanent, which is what makes that safe: one component unmounting cannot\n * strip tokens another is still referencing.\n *\n * `body` rather than `:root`, which emits nothing at all — the same selector\n * `GlobalStyles` uses for the palette's own tokens. Custom properties inherit, so\n * anything rendered inside the document sees them; the one thing this cannot\n * reach is content portalled outside `<body>`, which nothing does.\n *\n * Because the slot id hashes the CONFIG rather than the resolved values,\n * re-seeding the palette replaces the same slot instead of leaking a new one.\n *\n * ```tsx\n * const theme = useColorTheme({ hue: '#0ea5e9' });\n * // theme.colors.surface → '#tint-1a2b3c-surface'\n * ```\n */\nexport function useColorTheme(config: ColorThemeConfig): ColorTheme {\n  // Subscribes this component to a re-seed. `getColorTheme` reads the version\n  // itself for its cache, so the value is unused here — the subscription is the\n  // point, and it is what makes the tokens below re-inject.\n  usePaletteVersion();\n\n  const theme = getColorTheme(config);\n\n  useGlobalStyles('body', theme.tokens, {\n    id: `cube-color-theme-${theme.name}`,\n  });\n\n  return theme;\n}\n"],"mappings":"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"}

package/dist/tokens/colors.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-694a764 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-dcbc0fb | Cube Dev Team */
 import { getPaletteVersion } from "./palette-config.js";
 import { BASE_TOKENS } from "./base.js";
 import { lazyStyles } from "./lazy-styles.js";

package/dist/tokens/index.d.ts

@@ -1,8 +1,9 @@
 
-import { DEFAULT_PALETTE_CONFIG, PaletteCodeSeed, PaletteConfig, PaletteThemeName, PaletteThemeSeed, ResolvedPaletteConfig, getPaletteConfig, getPaletteConfigInput, invalidatePaletteTokens, resetPaletteConfig, resolvePaletteConfig, setPaletteConfig, subscribePaletteConfig, usePaletteConfig, usePaletteVersion } from "./palette-config.js";
+import { DEFAULT_PALETTE_CONFIG, MAX_BASE_SATURATION, PaletteCodeSeed, PaletteConfig, PaletteThemeName, PaletteThemeSeed, ResolvedPaletteConfig, SurfaceMode, getPaletteConfig, getPaletteConfigInput, invalidatePaletteTokens, resetPaletteConfig, resolvePaletteConfig, setPaletteConfig, subscribePaletteConfig, usePaletteConfig, usePaletteVersion } from "./palette-config.js";
 import { SIZES, SIZE_NAME_TO_KEY, SIZE_TOKENS, SizeKey, SizeName } from "./sizes.js";
 import { PALETTE_TOKENS, RenderPaletteOptions, getCodeTheme, getPalette, getPaletteTokens, renderPaletteTokens } from "./palette.js";
 import { COLOR_TOKENS, getColorTokens, renderColorTokens } from "./colors.js";
+import { ColorSeed, colorSeed } from "./color-seed.js";
 import { ColorTheme, ColorThemeConfig, colorThemeSeed, getColorTheme, useColorTheme } from "./color-theme.js";
 import { SPACE_TOKENS } from "./spacing.js";
 import { SHADOW_TOKENS } from "./shadows.js";

package/dist/tokens/index.js

@@ -1,5 +1,6 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-694a764 | Cube Dev Team */
-import { DEFAULT_PALETTE_CONFIG, getPaletteConfig, getPaletteConfigInput, getPaletteVersion, invalidatePaletteTokens, resetPaletteConfig, resolvePaletteConfig, setPaletteConfig, subscribePaletteConfig, usePaletteConfig, usePaletteVersion } from "./palette-config.js";
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-dcbc0fb | Cube Dev Team */
+import { colorSeed } from "./color-seed.js";
+import { DEFAULT_PALETTE_CONFIG, MAX_BASE_SATURATION, getPaletteConfig, getPaletteConfigInput, getPaletteVersion, invalidatePaletteTokens, resetPaletteConfig, resolvePaletteConfig, setPaletteConfig, subscribePaletteConfig, usePaletteConfig, usePaletteVersion } from "./palette-config.js";
 import { BASE_TOKENS } from "./base.js";
 import { lazyStyles } from "./lazy-styles.js";
 import { PALETTE_TOKENS, getCodeTheme, getPalette, getPaletteTokens, renderPaletteTokens } from "./palette.js";

package/dist/tokens/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../src/tokens/index.ts"],"sourcesContent":["/**\n * Design tokens for the Cube UI Kit.\n *\n * This module exports all design tokens used throughout the design system.\n * All token keys use $ prefix for CSS custom properties.\n *\n * Categories:\n * - Colors: Base color palette with -color and -color-rgb variants\n * - Typography: Font presets for headings, text, paragraphs, etc.\n * - Sizes: Component size values (XS, SM, MD, LG, XL)\n * - Spacing: Space tokens using gap multipliers\n * - Shadows: Shadow definitions for elevation\n * - Layout: Common layout dimensions\n * - Base: Core design system values\n */\n\nimport { generateTypographyTokens } from '@tenphi/tasty';\n\nimport { BASE_TOKENS } from './base';\nimport { getColorTokens } from './colors';\nimport { LAYOUT_TOKENS } from './layout';\nimport { lazyStyles } from './lazy-styles';\nimport { getPaletteVersion } from './palette-config';\nimport { SHADOW_TOKENS } from './shadows';\nimport { SIZE_TOKENS } from './sizes';\nimport { SPACE_TOKENS } from './spacing';\nimport { TYPOGRAPHY_PRESETS } from './typography';\n\nimport type { Styles } from '@tenphi/tasty';\nimport type { SizeKey, SizeName } from './sizes';\n\n/**\n * All design tokens combined into a single Styles object.\n * Keys use $ prefix for CSS custom properties.\n *\n * Color tokens resolve against the current palette config (see\n * {@link getColorTokens}), and this map is memoized against that config's\n * version so `setPaletteConfig()` invalidates it. Prefer this over the lazy\n * {@link TOKENS} proxy when applying styles from React (`GlobalStyles`).\n *\n * Includes:\n * - Base tokens ($gap, $radius, etc.)\n * - Space tokens ($space-xs, $space-sm, etc.)\n * - Size tokens ($size-xs, $size-sm, etc.)\n * - Shadow tokens ($shadow, $item-shadow, etc.)\n * - Layout tokens ($max-content-width, $topbar-height, etc.)\n * - Typography tokens ($h1-font-size, $t3-line-height, etc.)\n * - Color tokens ($purple-color, $purple-color-rgb, etc.)\n */\nlet tokensCache: Styles | null = null;\nlet cachedVersion = -1;\n\nexport function getTokens(): Styles {\n  const version = getPaletteVersion();\n\n  if (!tokensCache || cachedVersion !== version) {\n    tokensCache = {\n      ...BASE_TOKENS,\n      ...SPACE_TOKENS,\n      ...SIZE_TOKENS,\n      ...SHADOW_TOKENS,\n      ...LAYOUT_TOKENS,\n      ...generateTypographyTokens(TYPOGRAPHY_PRESETS),\n      ...getColorTokens(),\n    };\n    cachedVersion = version;\n  }\n  return tokensCache;\n}\n\n/** Lazy proxy of {@link getTokens}. Prefer `getTokens()` in new code. */\nexport const TOKENS: Styles = lazyStyles(getTokens);\n\n// Re-export category modules for direct access\nexport { COLOR_TOKENS, getColorTokens, renderColorTokens } from './colors';\n// Adaptive one-off themes built at runtime from an arbitrary hue, named by a\n// hash of their config so identical requests share one injection.\nexport { colorThemeSeed, getColorTheme, useColorTheme } from './color-theme';\nexport type { ColorTheme, ColorThemeConfig } from './color-theme';\nexport {\n  getCodeTheme,\n  getPalette,\n  getPaletteTokens,\n  PALETTE_TOKENS,\n  renderPaletteTokens,\n} from './palette';\nexport type { RenderPaletteOptions } from './palette';\nexport {\n  DEFAULT_PALETTE_CONFIG,\n  getPaletteConfig,\n  getPaletteConfigInput,\n  invalidatePaletteTokens,\n  resetPaletteConfig,\n  resolvePaletteConfig,\n  setPaletteConfig,\n  subscribePaletteConfig,\n  usePaletteConfig,\n  usePaletteVersion,\n} from './palette-config';\nexport type {\n  PaletteCodeSeed,\n  PaletteConfig,\n  PaletteThemeName,\n  PaletteThemeSeed,\n  ResolvedPaletteConfig,\n} from './palette-config';\nexport { SIZES, SIZE_NAME_TO_KEY, SIZE_TOKENS } from './sizes';\nexport type { SizeKey, SizeName } from './sizes';\nexport { SPACE_TOKENS } from './spacing';\nexport { SHADOW_TOKENS } from './shadows';\nexport { LAYOUT_TOKENS } from './layout';\nexport { BASE_TOKENS } from './base';\nexport { TYPOGRAPHY_PRESETS } from './typography';\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAiDA,IAAI,cAA6B;AACjC,IAAI,gBAAgB;AAEpB,SAAgB,YAAoB;CAClC,MAAM,UAAU,mBAAmB;AAEnC,KAAI,CAAC,eAAe,kBAAkB,SAAS;AAC7C,gBAAc;GACZ,GAAG;GACH,GAAG;GACH,GAAG;GACH,GAAG;GACH,GAAG;GACH,GAAG,yBAAyB,mBAAmB;GAC/C,GAAG,gBAAgB;GACpB;AACD,kBAAgB;;AAElB,QAAO;;;AAIT,MAAa,SAAiB,WAAW,UAAU"}
+{"version":3,"file":"index.js","names":[],"sources":["../../src/tokens/index.ts"],"sourcesContent":["/**\n * Design tokens for the Cube UI Kit.\n *\n * This module exports all design tokens used throughout the design system.\n * All token keys use $ prefix for CSS custom properties.\n *\n * Categories:\n * - Colors: Base color palette with -color and -color-rgb variants\n * - Typography: Font presets for headings, text, paragraphs, etc.\n * - Sizes: Component size values (XS, SM, MD, LG, XL)\n * - Spacing: Space tokens using gap multipliers\n * - Shadows: Shadow definitions for elevation\n * - Layout: Common layout dimensions\n * - Base: Core design system values\n */\n\nimport { generateTypographyTokens } from '@tenphi/tasty';\n\nimport { BASE_TOKENS } from './base';\nimport { getColorTokens } from './colors';\nimport { LAYOUT_TOKENS } from './layout';\nimport { lazyStyles } from './lazy-styles';\nimport { getPaletteVersion } from './palette-config';\nimport { SHADOW_TOKENS } from './shadows';\nimport { SIZE_TOKENS } from './sizes';\nimport { SPACE_TOKENS } from './spacing';\nimport { TYPOGRAPHY_PRESETS } from './typography';\n\nimport type { Styles } from '@tenphi/tasty';\nimport type { SizeKey, SizeName } from './sizes';\n\n/**\n * All design tokens combined into a single Styles object.\n * Keys use $ prefix for CSS custom properties.\n *\n * Color tokens resolve against the current palette config (see\n * {@link getColorTokens}), and this map is memoized against that config's\n * version so `setPaletteConfig()` invalidates it. Prefer this over the lazy\n * {@link TOKENS} proxy when applying styles from React (`GlobalStyles`).\n *\n * Includes:\n * - Base tokens ($gap, $radius, etc.)\n * - Space tokens ($space-xs, $space-sm, etc.)\n * - Size tokens ($size-xs, $size-sm, etc.)\n * - Shadow tokens ($shadow, $item-shadow, etc.)\n * - Layout tokens ($max-content-width, $topbar-height, etc.)\n * - Typography tokens ($h1-font-size, $t3-line-height, etc.)\n * - Color tokens ($purple-color, $purple-color-rgb, etc.)\n */\nlet tokensCache: Styles | null = null;\nlet cachedVersion = -1;\n\nexport function getTokens(): Styles {\n  const version = getPaletteVersion();\n\n  if (!tokensCache || cachedVersion !== version) {\n    tokensCache = {\n      ...BASE_TOKENS,\n      ...SPACE_TOKENS,\n      ...SIZE_TOKENS,\n      ...SHADOW_TOKENS,\n      ...LAYOUT_TOKENS,\n      ...generateTypographyTokens(TYPOGRAPHY_PRESETS),\n      ...getColorTokens(),\n    };\n    cachedVersion = version;\n  }\n  return tokensCache;\n}\n\n/** Lazy proxy of {@link getTokens}. Prefer `getTokens()` in new code. */\nexport const TOKENS: Styles = lazyStyles(getTokens);\n\n// Re-export category modules for direct access\nexport { COLOR_TOKENS, getColorTokens, renderColorTokens } from './colors';\n// Reads hue / saturation / tone off a colour — what the palette's `accentColor` and\n// `baseColor` seeds are resolved through.\nexport { colorSeed } from './color-seed';\nexport type { ColorSeed } from './color-seed';\n// Adaptive one-off themes built at runtime from an arbitrary hue, named by a\n// hash of their config so identical requests share one injection.\nexport { colorThemeSeed, getColorTheme, useColorTheme } from './color-theme';\nexport type { ColorTheme, ColorThemeConfig } from './color-theme';\nexport {\n  getCodeTheme,\n  getPalette,\n  getPaletteTokens,\n  PALETTE_TOKENS,\n  renderPaletteTokens,\n} from './palette';\nexport type { RenderPaletteOptions } from './palette';\nexport {\n  DEFAULT_PALETTE_CONFIG,\n  getPaletteConfig,\n  getPaletteConfigInput,\n  invalidatePaletteTokens,\n  MAX_BASE_SATURATION,\n  resetPaletteConfig,\n  resolvePaletteConfig,\n  setPaletteConfig,\n  subscribePaletteConfig,\n  usePaletteConfig,\n  usePaletteVersion,\n} from './palette-config';\nexport type {\n  PaletteCodeSeed,\n  PaletteConfig,\n  PaletteThemeName,\n  PaletteThemeSeed,\n  ResolvedPaletteConfig,\n  SurfaceMode,\n} from './palette-config';\nexport { SIZES, SIZE_NAME_TO_KEY, SIZE_TOKENS } from './sizes';\nexport type { SizeKey, SizeName } from './sizes';\nexport { SPACE_TOKENS } from './spacing';\nexport { SHADOW_TOKENS } from './shadows';\nexport { LAYOUT_TOKENS } from './layout';\nexport { BASE_TOKENS } from './base';\nexport { TYPOGRAPHY_PRESETS } from './typography';\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAiDA,IAAI,cAA6B;AACjC,IAAI,gBAAgB;AAEpB,SAAgB,YAAoB;CAClC,MAAM,UAAU,mBAAmB;AAEnC,KAAI,CAAC,eAAe,kBAAkB,SAAS;AAC7C,gBAAc;GACZ,GAAG;GACH,GAAG;GACH,GAAG;GACH,GAAG;GACH,GAAG;GACH,GAAG,yBAAyB,mBAAmB;GAC/C,GAAG,gBAAgB;GACpB;AACD,kBAAgB;;AAElB,QAAO;;;AAIT,MAAa,SAAiB,WAAW,UAAU"}

package/dist/tokens/layout.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-694a764 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-dcbc0fb | Cube Dev Team */
 //#region src/tokens/layout.ts
 /**
 * Layout-related tokens for common UI dimensions.

package/dist/tokens/lazy-styles.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-694a764 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-dcbc0fb | Cube Dev Team */
 //#region src/tokens/lazy-styles.ts
 /**
 * Proxy that defers to `factory()` on every property / enumeration access.

package/dist/tokens/palette-config.d.ts

@@ -1,5 +1,20 @@
 
 //#region src/tokens/palette-config.d.ts
+/**
+ * Ceiling on a {@link PaletteConfig.baseSaturation} derived from a
+ * {@link PaletteConfig.baseColor}.
+ *
+ * A named base color lands the chrome near itself rather than at the 12% share the
+ * accent lends it, which is the whole reason to name one — but a fully saturated
+ * chrome stops being chrome. `50` is well past where the base colors begin to
+ * converge (`surface-inverse` tops out around `25`), so the clip costs nothing that
+ * was still moving and stops a vivid brand hex from being read as an instruction to
+ * paint the page with it.
+ *
+ * The manual slider in the tuner shares the number, so the two agree on what the top
+ * of the range means.
+ */
+declare const MAX_BASE_SATURATION = 50;
 /** Hue / saturation seed override for one colored theme. */
 interface PaletteThemeSeed {
   /** Hue in degrees (0–360). */
@@ -22,6 +37,11 @@ interface PaletteCodeSeed {
   /** Saturation (0–100). Defaults to {@link DEFAULT_CODE_SATURATION}, not to `saturation`. */
   saturation?: number;
 }
+/**
+ * Where the neutral surface ramp sits on the tone scale — see
+ * {@link PaletteConfig.surfaceMode}.
+ */
+type SurfaceMode = 'neutral' | 'tinted';
 /** Names of the themes whose seeds can be overridden individually. */
 type PaletteThemeName = 'success' | 'danger' | 'warning' | 'note' | 'code';
 /**
@@ -29,6 +49,48 @@ type PaletteThemeName = 'success' | 'danger' | 'warning' | 'note' | 'code';
  * and per-theme fields left unset inherit the palette-level value.
  */
 interface PaletteConfig {
+  /**
+   * Accent zone seeded by a **color** rather than a hue — the brand, as you have it.
+   *
+   * Anything Glaze parses: hex, `rgb()`, `hsl()`, `okhsl()`, `okhst()`, `oklch()`.
+   * CSS color keywords (`rebeccapurple`) are not supported. An unparseable value
+   * warns and falls back to the numeric seed.
+   *
+   * Unlike {@link ColorThemeConfig.hue}, which keeps only hue and saturation, this
+   * keeps the **tone** as well — which is the whole point. Without it the brand fill
+   * is authored as a fixed tone step off white, so every accent hue lands at roughly
+   * the same lightness and the color you asked for never actually appears.
+   *
+   * The **light, normal-contrast** variant reproduces the color; dark and high
+   * contrast adapt, as every other color in the palette does. Two things cost
+   * exactness even there: {@link PaletteConfig.pastel} caps chroma (so `#FFD400`
+   * softens), and a color that misses the 3:1 floor against `surface` darkens until
+   * it clears it — and no further.
+   *
+   * {@link PaletteConfig.hue} and {@link PaletteConfig.saturation} still win when
+   * set — the number is the more specific instruction — and the tone keeps coming
+   * from here either way, so a preview can rotate the hue without losing the brand's
+   * lightness.
+   */
+  accentColor?: string;
+  /**
+   * Base zone seeded by a **color** rather than a hue and a saturation.
+   *
+   * Its **hue and saturation** are read; its **tone is discarded**, because the
+   * chrome's lightness ladder is the design — a base color says which way the greys
+   * lean and how far, not how dark they are.
+   *
+   * The saturation is clipped to {@link MAX_BASE_SATURATION}. Naming a base color
+   * says "the chrome is this color", so it lands near it rather than at the 12%
+   * share {@link PaletteConfig.baseSaturation} inherits from the accent — but a
+   * fully saturated chrome is no longer chrome, so there is a ceiling on how far
+   * "near" goes.
+   *
+   * {@link PaletteConfig.baseHue} and {@link PaletteConfig.baseSaturation} each win
+   * over it when set — the number is the more specific instruction, the same
+   * precedence {@link PaletteConfig.accentColor} sits under.
+   */
+  baseColor?: string;
   /**
    * Accent hue in degrees (0–360) — the brand.
    *
@@ -48,10 +110,64 @@ interface PaletteConfig {
    * danger banner should read as red.
    */
   baseHue?: number;
+  /**
+   * Saturation seed (0–100) of the **base** zone — the same family
+   * {@link PaletteConfig.baseHue} governs: `surface` and its ladder, the
+   * `surface-text*` ramp, `border`, `placeholder`.
+   *
+   * On the same 0–100 scale as {@link PaletteConfig.saturation}, and read the same
+   * way: `100` is a fully saturated base hue. **The shipped chrome is `12`** — a
+   * faint tint is what a neutral surface is — so the useful range is mostly below
+   * a third, and the numbers above it are a deliberately tinted theme rather than
+   * a neutral one.
+   *
+   * Left unset it is `saturation × 0.12`, which reproduces the recipe's own factor
+   * exactly and keeps a muted palette muting the chrome along with everything
+   * else. Set it and the base zone stops following the brand: a vivid accent over
+   * near-grey chrome, or a muted accent over visibly warm chrome, are both one
+   * number away and neither is reachable from a single scale.
+   *
+   * The base colors keep their proportions to one another — `border` more than
+   * `surface`, the text ramp more than `border` — until the highest of them hits
+   * the top of the scale, which happens around `25`. Past that they converge.
+   *
+   * Under {@link PaletteConfig.surfaceMode} `'neutral'` this reaches
+   * `surface-2`…`surface-4`, `border`, `placeholder` and the text ramp, but not
+   * the page surface: at the end of the tone scale there is no room for chroma,
+   * whatever the seed says. `'tinted'` is what gives it somewhere to land.
+   */
+  baseSaturation?: number;
+  /**
+   * Global. Where the neutral surface ramp sits on the tone scale.
+   *
+   * - `'neutral'` — `surface` is the extreme: pure white in light, the darkest
+   *   step the dark tone window allows in dark. No room for chroma, so the page
+   *   carries no hue however saturated the base zone is.
+   * - `'tinted'` — the whole ramp moves two tones inward, off the extreme.
+   *
+   * Two tones is not a visible lightness change; what it buys is *room*. Chroma
+   * needs distance from white to exist at all, so at the extreme a light page is
+   * white no matter what {@link PaletteConfig.baseSaturation} says. Tinted trades
+   * two tones of headroom for a page that actually carries its base hue.
+   *
+   * Everything below `surface` is positioned relative to it, so the ladder, the
+   * borders and the text ramp all follow — and the contrast floors on the text
+   * re-solve against the new background rather than drifting.
+   */
+  surfaceMode?: SurfaceMode;
   /**
    * Seed saturation (0–100), and the fallback for every theme that does not set
    * its own.
    *
+   * **Belongs to the non-pastel path**, and setting it says so: with no
+   * {@link PaletteConfig.pastel} beside it, this turns pastel off, because tuning a
+   * saturation is the non-pastel path by definition. Pastel is one flat chroma ceiling,
+   * so under it there is exactly one seed and it is the top of the scale.
+   *
+   * A `pastel: true` written next to a saturation wins and the saturation is ignored
+   * (with a dev warning) — but it is kept rather than dropped, so turning pastel back
+   * off restores your number.
+   *
    * One scale for the whole theme, by design. Every color's own `saturation` is a
    * 0–1 factor of this seed — `surface` at 0.12, `border` at 0.175, the text ramp
    * at 0.2, the accent family at ~1.0 — so moving it rescales the palette while
@@ -66,6 +182,19 @@ interface PaletteConfig {
    * producing a softer, more even palette across hues. Glaze treats `pastel` as
    * instance-level, so it is threaded into every theme.
    *
+   * It also **pins {@link PaletteConfig.saturation} to 100**: the even, hue-independent
+   * ceiling is what pastel is for, and a second saturation scale on top of it would
+   * only undo that. Two paths, then — pastel with no saturation knob, or
+   * `pastel: false` with a free 0–100 one.
+   *
+   * Which is why a lone `saturation` picks the second path for you. State this field
+   * only to override that: it is the coarser of the two choices, so it wins wherever
+   * both are set, and a saturation it shadows is ignored with a dev warning.
+   *
+   * The same ceiling is why an {@link PaletteConfig.accentColor} cannot render
+   * exactly under pastel — `#FFD400` softens to `#e4d8ad`. Under pastel a color
+   * contributes its hue and its tone; turn pastel off to get its chroma too.
+   *
    * Every theme except `code`. The syntax family is calibrated on its own
    * saturation and is deliberately left out — softening it collapses the chroma
    * spread the syntax hues rely on to stay apart. To soften a code block, lower
@@ -73,14 +202,20 @@ interface PaletteConfig {
    */
   pastel?: boolean;
   /**
-   * Global. `'auto'` (the default) keeps the two-tier model: normal colors plus
-   * a separate high-contrast tier driven by `<html data-contrast="high">` /
-   * `prefers-contrast: more`.
-   *
-   * A number (0–100) replaces that switch with a slider — and, because a manual
-   * level already carries the contrast preference, **drops the high-contrast
-   * tier entirely**. `0` reproduces the normal output and `100` the
-   * high-contrast output, bit for bit.
+   * Global. `'auto'` (the default) leaves contrast entirely to the two-tier model:
+   * normal colors plus a high-contrast tier driven by `<html data-contrast="high">`
+   * / `prefers-contrast: more`.
+   *
+   * A number (0–100) additionally positions the **normal** colors on a slider, so
+   * a product can offer its own contrast control. `0` is the shipped palette and
+   * `100` is the high-contrast one, bit for bit.
+   *
+   * The two **compose** rather than replace each other: the high-contrast tier
+   * stays the true high-contrast resolution at every level — identical to what
+   * `'auto'` emits — so a slider raises the baseline while
+   * `prefers-contrast: more` still escalates on top of it. The one exception is
+   * `100`, where the normal colors already *are* the high-contrast ones and a
+   * second tier would only duplicate them.
    */
   contrastLevel?: number | 'auto';
   /** Per-theme seed overrides. */
@@ -97,6 +232,37 @@ interface ResolvedPaletteConfig {
   hue: number;
   baseHue: number;
   saturation: number;
+  baseSaturation: number;
+  surfaceMode: SurfaceMode;
+  /**
+   * The accent color as given, handed to Glaze's `from` so the brand family renders
+   * as that literal value rather than as a shade re-derived from the seed.
+   *
+   * `null` — the common case — means no accent color was supplied and the family keeps
+   * its white-anchored derivation, which is the only arrangement that reproduces the
+   * shipped palette bit for bit.
+   */
+  accentColor: string | null;
+  /**
+   * The base color as given, or `null`.
+   *
+   * Nothing renders from it — the hue and the saturation it derives are what reach the
+   * palette. It is resolved anyway so {@link isSameConfig} can compare it, which is the
+   * only way a write that changes the *string* without changing either derived number
+   * still counts as a change. `MAX_BASE_SATURATION` makes that a live case rather than
+   * a theoretical one: every color above the clip on a given hue derives the same pair,
+   * so without this a color picker's whole upper range — and its entire tone axis, which
+   * a base color discards — would drop writes silently and leave the field stale.
+   */
+  baseColor: string | null;
+  /**
+   * The tone of {@link ResolvedPaletteConfig.accentColor}, or `null` alongside it.
+   *
+   * `from` carries the tone itself, so this exists for the one thing that needs the
+   * *number*: the hover brand text sits a fixed tone step past the rest one, and a
+   * step has to be computed.
+   */
+  accentTone: number | null;
   pastel: boolean;
   contrastLevel: number | 'auto';
   themes: {
@@ -225,5 +391,5 @@ declare function usePaletteVersion(): number;
  */
 declare function usePaletteConfig(): readonly [ResolvedPaletteConfig, typeof setPaletteConfig];
 //#endregion
-export { DEFAULT_PALETTE_CONFIG, PaletteCodeSeed, PaletteConfig, PaletteThemeName, PaletteThemeSeed, ResolvedPaletteConfig, getPaletteConfig, getPaletteConfigInput, invalidatePaletteTokens, resetPaletteConfig, resolvePaletteConfig, setPaletteConfig, subscribePaletteConfig, usePaletteConfig, usePaletteVersion };
+export { DEFAULT_PALETTE_CONFIG, MAX_BASE_SATURATION, PaletteCodeSeed, PaletteConfig, PaletteThemeName, PaletteThemeSeed, ResolvedPaletteConfig, SurfaceMode, getPaletteConfig, getPaletteConfigInput, invalidatePaletteTokens, resetPaletteConfig, resolvePaletteConfig, setPaletteConfig, subscribePaletteConfig, usePaletteConfig, usePaletteVersion };
 //# sourceMappingURL=palette-config.d.ts.map