@cube-dev/ui-kit 0.0.0-canary-324d6c4 → 0.0.0-canary-e612701

package/dist/tokens/color-theme.js

@@ -1,7 +1,6 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-324d6c4 | 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";
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-e612701 | Cube Dev Team */
+import { DEFAULT_SATURATION, getPaletteConfig, getPaletteVersion, usePaletteVersion } from "./palette-config.js";
+import { TINT_RECIPE } from "./palette.js";
 import { useGlobalStyles } from "@tenphi/tasty";
 import { glaze } from "@tenphi/glaze";
 
@@ -51,23 +50,12 @@ 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 seed = colorSeed(value);
-	if (!seed) return {
-		hue: DEFAULT_HUE,
-		saturation: DEFAULT_SATURATION
-	};
+	const light = glaze.color(value).resolve().light;
 	return {
-		hue: seed.hue,
-		saturation: seed.saturation
+		hue: light.h,
+		saturation: light.s * 100
 	};
 }
 /**
@@ -110,7 +98,7 @@ function getColorTheme(config) {
 	};
 	const theme = glaze(hue, saturation, Object.keys(overrides).length ? overrides : void 0);
 	theme.colors({
-		...tintRecipe(paletteConfig),
+		...TINT_RECIPE,
 		...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 `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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"}
+{"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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"}

package/dist/tokens/colors.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-324d6c4 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-e612701 | 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,9 +1,8 @@
 
-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 { DEFAULT_PALETTE_CONFIG, PaletteCodeSeed, PaletteConfig, PaletteThemeName, PaletteThemeSeed, ResolvedPaletteConfig, 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,6 +1,5 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-324d6c4 | 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";
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-e612701 | Cube Dev Team */
+import { DEFAULT_PALETTE_CONFIG, 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// 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"}
+{"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"}

package/dist/tokens/layout.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-324d6c4 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-e612701 | 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-324d6c4 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-e612701 | 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,20 +1,5 @@
 
 //#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). */
@@ -37,11 +22,6 @@ 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 = 'default' | 'tinted';
 /** Names of the themes whose seeds can be overridden individually. */
 type PaletteThemeName = 'success' | 'danger' | 'warning' | 'note' | 'code';
 /**
@@ -49,48 +29,6 @@ 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.
    *
@@ -110,63 +48,10 @@ 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} `'default'` 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.
-   *
-   * - `'default'` — `surface` is the extreme: pure white in light, the darkest
-   *   step the dark tone window allows in dark.
-   * - `'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
@@ -181,19 +66,6 @@ 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
@@ -201,20 +73,14 @@ interface PaletteConfig {
    */
   pastel?: boolean;
   /**
-   * 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.
+   * 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.
    */
   contrastLevel?: number | 'auto';
   /** Per-theme seed overrides. */
@@ -231,37 +97,6 @@ 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: {
@@ -390,5 +225,5 @@ declare function usePaletteVersion(): number;
  */
 declare function usePaletteConfig(): readonly [ResolvedPaletteConfig, typeof setPaletteConfig];
 //#endregion
-export { DEFAULT_PALETTE_CONFIG, MAX_BASE_SATURATION, PaletteCodeSeed, PaletteConfig, PaletteThemeName, PaletteThemeSeed, ResolvedPaletteConfig, SurfaceMode, getPaletteConfig, getPaletteConfigInput, invalidatePaletteTokens, resetPaletteConfig, resolvePaletteConfig, setPaletteConfig, subscribePaletteConfig, usePaletteConfig, usePaletteVersion };
+export { DEFAULT_PALETTE_CONFIG, PaletteCodeSeed, PaletteConfig, PaletteThemeName, PaletteThemeSeed, ResolvedPaletteConfig, getPaletteConfig, getPaletteConfigInput, invalidatePaletteTokens, resetPaletteConfig, resolvePaletteConfig, setPaletteConfig, subscribePaletteConfig, usePaletteConfig, usePaletteVersion };
 //# sourceMappingURL=palette-config.d.ts.map

package/dist/tokens/palette-config.js

@@ -1,5 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-324d6c4 | Cube Dev Team */
-import { colorSeed } from "./color-seed.js";
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-e612701 | Cube Dev Team */
 import { useSyncExternalStore } from "react";
 
 //#region src/tokens/palette-config.ts
@@ -7,10 +6,9 @@ import { useSyncExternalStore } from "react";
 * Runtime configuration for the Glaze-generated color palette.
 *
 * The palette recipe itself lives in `./palette.ts`; this module owns only the
-* *seeds* it is built from, plus a version counter the token caches watch. Its only
-* import is the leaf `./color-seed` helper — never the token modules — so there is
-* no import cycle and no ordering hazard. See that file for why reading a colour
-* cannot depend on the global Glaze config `./palette.ts` installs.
+* *seeds* it is built from, plus a version counter the token caches watch. It
+* deliberately imports nothing else — not the token modules, not `glaze` — so
+* there is no import cycle and no ordering hazard.
 *
 * Reading is free; writing rebuilds the palette on the next token read. See
 * `Getting Started/Theming` in Storybook for the full contract.
@@ -24,32 +22,6 @@ const DEFAULT_NOTE_HUE = 302.3;
 /** Seed saturation. Per-color `saturation` in the recipe is a 0–1 factor of it. */
 const DEFAULT_SATURATION = 100;
 /**
-* Share of {@link DEFAULT_SATURATION} the neutral `surface` carries — the recipe's
-* own `SURFACE_SATURATION` factor, as a fraction.
-*
-* It lives here rather than in the recipe because the dependency runs one way:
-* `./palette.ts` imports the config, not the reverse — and the config needs this
-* number to default `baseSaturation`. It is the anchor of the base zone's own 0–100
-* scale: the share the *accent zone* lends the chrome when no `baseColor` names one
-* outright, so an untouched palette lands on `12`.
-*/
-const SURFACE_SATURATION_SHARE = .12;
-/**
-* 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.
-*/
-const MAX_BASE_SATURATION = 50;
-/**
 * Seed saturation for the `code-*` syntax family, deliberately **not** the same
 * constant as {@link DEFAULT_SATURATION}.
 *
@@ -67,35 +39,15 @@ const DEFAULT_THEME_HUES = {
 	warning: DEFAULT_WARNING_HUE,
 	note: DEFAULT_NOTE_HUE
 };
-/**
-* Warned once per process, not once per call.
-*
-* `resolveConfig` runs on every write AND on every `resolvePaletteConfig` preview, so an
-* unguarded warning would fire on every frame of a slider drag.
-*/
-let warnedAboutPastelSaturation = false;
 function resolveConfig(input) {
+	const saturation = input.saturation ?? DEFAULT_SATURATION;
 	const themes = input.themes ?? {};
-	const accent = input.accentColor ? colorSeed(input.accentColor) : null;
-	const base = input.baseColor ? colorSeed(input.baseColor) : null;
-	const pastel = input.pastel ?? input.saturation === void 0;
-	const hue = input.hue ?? accent?.hue ?? DEFAULT_HUE;
-	const baseHue = input.baseHue ?? base?.hue ?? hue;
-	if (input.pastel === true && input.saturation !== void 0 && input.saturation !== DEFAULT_SATURATION && !warnedAboutPastelSaturation) {
-		warnedAboutPastelSaturation = true;
-		console.warn(`[cube-ui-kit] palette \`saturation\` (${input.saturation}) is ignored because \`pastel\` is on — pastel pins it to ${DEFAULT_SATURATION}. Drop \`pastel\`, or set it to \`false\`, to tune saturation yourself.`);
-	}
-	const saturation = pastel ? DEFAULT_SATURATION : input.saturation ?? DEFAULT_SATURATION;
+	const hue = input.hue ?? DEFAULT_HUE;
 	return {
 		hue,
-		baseHue,
+		baseHue: input.baseHue ?? hue,
 		saturation,
-		baseSaturation: input.baseSaturation ?? (base ? Math.min(base.saturation, MAX_BASE_SATURATION, saturation) : Math.min(accent?.saturation ?? saturation, saturation) * SURFACE_SATURATION_SHARE),
-		surfaceMode: input.surfaceMode ?? "default",
-		accentColor: accent ? input.accentColor : null,
-		baseColor: base ? input.baseColor : null,
-		accentTone: accent?.tone ?? null,
-		pastel,
+		pastel: input.pastel ?? true,
 		contrastLevel: input.contrastLevel ?? "auto",
 		themes: {
 			success: {
@@ -161,7 +113,7 @@ function mergeInput(base, patch) {
 	return next;
 }
 function isSameConfig(a, b) {
-	return a.hue === b.hue && a.baseHue === b.baseHue && a.saturation === b.saturation && a.baseSaturation === b.baseSaturation && a.surfaceMode === b.surfaceMode && a.accentColor === b.accentColor && a.baseColor === b.baseColor && a.pastel === b.pastel && a.contrastLevel === b.contrastLevel && a.themes.code.saturation === b.themes.code.saturation && [
+	return a.hue === b.hue && a.baseHue === b.baseHue && a.saturation === b.saturation && a.pastel === b.pastel && a.contrastLevel === b.contrastLevel && a.themes.code.saturation === b.themes.code.saturation && [
 		"success",
 		"danger",
 		"warning",
@@ -180,13 +132,9 @@ function isSameConfig(a, b) {
 function pinSignature(config) {
 	const set = (value) => value === void 0 ? "0" : "1";
 	return [
-		set(config.accentColor),
-		set(config.baseColor),
 		set(config.hue),
 		set(config.baseHue),
 		set(config.saturation),
-		set(config.baseSaturation),
-		set(config.surfaceMode),
 		set(config.pastel),
 		set(config.contrastLevel),
 		set(config.themes?.code?.saturation),
@@ -369,5 +317,5 @@ function usePaletteConfig() {
 }
 
 //#endregion
-export { DEFAULT_HUE, DEFAULT_PALETTE_CONFIG, DEFAULT_SATURATION, MAX_BASE_SATURATION, SURFACE_SATURATION_SHARE, getPaletteConfig, getPaletteConfigInput, getPaletteVersion, invalidatePaletteTokens, resetPaletteConfig, resolvePaletteConfig, setPaletteConfig, subscribePaletteConfig, usePaletteConfig, usePaletteVersion };
+export { DEFAULT_PALETTE_CONFIG, DEFAULT_SATURATION, getPaletteConfig, getPaletteConfigInput, getPaletteVersion, invalidatePaletteTokens, resetPaletteConfig, resolvePaletteConfig, setPaletteConfig, subscribePaletteConfig, usePaletteConfig, usePaletteVersion };
 //# sourceMappingURL=palette-config.js.map