@cube-dev/ui-kit 0.152.0 → 0.153.0

package/dist/tokens/palette.js

@@ -1,4 +1,5 @@
-/** @license MIT | @cube-dev/ui-kit v0.152.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.153.0 | Cube Dev Team */
+import { getPaletteConfig, getPaletteVersion, resolvePaletteConfig } from "./palette-config.js";
 import { lazyStyles } from "./lazy-styles.js";
 import { glaze } from "@tenphi/glaze";
 
@@ -13,317 +14,144 @@ import { glaze } from "@tenphi/glaze";
 *
 * The `@dark` and `@hc` state aliases are wired up globally in
 * `src/components/Root.tsx` (see `setGlobalPredefinedStates`).
+*
+* This module owns the *recipe* — which colors exist and how each one is
+* positioned relative to its base. The *seeds* it is built from (hue,
+* saturation, pastel, contrast level) live in `./palette-config.ts` and are
+* tunable at runtime; `buildPalette()` below is a pure function of them.
 */
-const PURPLE_HUE = 280.3;
-const SUCCESS_HUE = 156.9;
-const DANGER_HUE = 23.1;
-const WARNING_HUE = 84.3;
-const NOTE_HUE = 302.3;
-/** Seed saturation; per-color saturation factors below are 0–1 of this seed. */
-const SEED_SATURATION = 80;
 const TEXT_TONE = -98;
 const TEXT_SOFT_TONE = -72;
 const TEXT_SOFT2_TONE = -52;
 const SURFACE_2_TEXT_OFFSET = 2;
 const SURFACE_3_TEXT_OFFSET = 4;
-glaze.configure({
-	states: {
-		dark: "@dark",
-		highContrast: "@hc"
-	},
-	modes: {
-		dark: true,
-		highContrast: true
-	},
-	darkTone: [14, 95],
-	darkDesaturation: 0
-});
-const defaultTheme = glaze(PURPLE_HUE, SEED_SATURATION);
-defaultTheme.colors({
-	surface: {
-		tone: 100,
-		saturation: .12
-	},
-	"surface-2": {
-		base: "surface",
-		tone: "-2",
-		saturation: .1,
-		inherit: false
-	},
-	"surface-3": {
-		base: "surface",
-		tone: "-4",
-		saturation: .1,
-		inherit: false
-	},
-	"surface-4": {
-		base: "surface",
-		tone: "-6",
-		saturation: .1,
-		inherit: false
-	},
-	"surface-text": {
-		base: "surface",
-		tone: `${TEXT_TONE - 2}`,
-		saturation: .2,
-		contrast: ["AA", "AAA"]
-	},
-	"surface-text-soft": {
-		base: "surface",
-		tone: `${TEXT_SOFT_TONE - 2}`,
-		saturation: .2,
-		contrast: ["AA", "AAA"],
-		inherit: false
-	},
-	"surface-text-soft-2": {
-		base: "surface",
-		tone: `${TEXT_SOFT2_TONE - 2}`,
-		saturation: .2,
-		contrast: ["AA", "AAA"],
-		inherit: false
-	},
-	"surface-2-text": {
-		base: "surface-2",
-		tone: `${TEXT_TONE + SURFACE_2_TEXT_OFFSET}`,
-		saturation: .2,
-		contrast: ["AA", "AAA"],
-		inherit: false
-	},
-	"surface-2-text-soft": {
-		base: "surface-2",
-		tone: `${TEXT_SOFT_TONE + SURFACE_2_TEXT_OFFSET}`,
-		saturation: .2,
-		contrast: ["AA", "AAA"],
-		inherit: false
-	},
-	"surface-3-text": {
-		base: "surface-3",
-		tone: `${TEXT_TONE + SURFACE_3_TEXT_OFFSET}`,
-		saturation: .2,
-		contrast: ["AA", "AAA"],
-		inherit: false
-	},
-	"surface-3-text-soft": {
-		base: "surface-3",
-		tone: `${TEXT_SOFT_TONE + SURFACE_3_TEXT_OFFSET}`,
-		saturation: .2,
-		contrast: ["AA", "AAA"],
-		inherit: false
-	},
-	border: {
-		base: "surface",
-		tone: ["-10", "-20"],
-		saturation: .175
-	},
-	placeholder: {
-		base: "surface",
-		tone: "-33",
-		saturation: .175,
-		inherit: false
-	},
-	focus: {
-		base: "surface",
-		tone: "-29",
-		saturation: .8625,
-		inherit: false
-	},
-	disabled: {
-		tone: 80.8,
-		saturation: .4,
-		inherit: false
-	},
-	"disabled-surface": {
-		base: "surface",
-		tone: "-3.5",
-		saturation: .2,
-		inherit: false
-	},
-	"disabled-surface-text": {
-		base: "surface",
-		tone: "-23",
-		saturation: .3,
-		inherit: false
-	},
-	"surface-inverse": {
-		tone: 12,
-		saturation: .475,
-		mode: "fixed",
-		inherit: false
-	},
-	"accent-surface-text": {
-		tone: 100,
-		mode: "fixed"
-	},
-	"accent-surface": {
-		base: "accent-surface-text",
-		tone: "-49",
-		contrast: ["AA", "AAA"],
-		mode: "fixed"
-	},
-	"accent-surface-2": {
-		base: "accent-surface-text",
-		tone: "-52",
-		contrast: ["AA", "AAA"],
-		mode: "fixed"
-	},
-	"accent-surface-3": {
-		base: "accent-surface-text",
-		tone: "-55",
-		contrast: ["AA", "AAA"],
-		mode: "fixed"
-	},
-	"accent-surface-hover": {
-		base: "accent-surface-text",
-		tone: "-58",
-		contrast: ["AA", "AAA"],
-		mode: "fixed"
-	},
-	"accent-surface-border": {
-		base: "accent-surface",
-		tone: "+13",
-		mode: "fixed"
-	},
-	"accent-selected-fill": {
-		type: "mix",
-		base: "surface",
-		target: "accent-surface",
-		value: 9,
-		space: "srgb"
-	},
-	"accent-text": {
-		base: "accent-selected-fill",
-		tone: "-49",
-		saturation: 1,
-		contrast: [6, 11]
-	},
-	"accent-text-soft": {
-		base: "accent-selected-fill",
-		tone: "-49",
-		saturation: 1,
-		contrast: ["AA", "AAA"]
-	},
-	"accent-icon": {
-		base: "surface",
-		tone: "-38",
-		saturation: .9375
-	},
-	"accent-disabled-surface": {
-		base: "surface",
-		tone: "-13",
-		saturation: .5,
-		mode: "fixed"
-	},
-	"accent-disabled-surface-text": {
-		base: "accent-disabled-surface",
-		tone: "max",
-		saturation: .4,
-		mode: "fixed"
-	},
+const CODE_STRING_HUE = 280.3;
+/**
+* Saturation factor of the neutral `surface`.
+*
+* Shared with the code theme, which mirrors `surface` to solve its contrast floors
+* against the real page background — the two must not drift apart.
+*/
+const SURFACE_SATURATION = .12;
+const TINTED_SURFACE_SATURATION = .2;
+const TINTED_SURFACE_TONE_OFFSET = 2;
+/**
+* Syntax highlighting for `PrismCode`, as its own theme.
+*
+* A small palette of *adaptive* colored tokens. Each one is anchored to `surface`
+* with a relative tone plus an `['AA','AAA']` readability floor, so it stays legible
+* in light, dark and high contrast. Hues mirror the long-standing PrismCode
+* reference (pink keywords / pink functions / purple strings / green numbers / gray
+* comments); `code-attribute` keeps cyan for HTML attribute names, CSS properties
+* and selectors, while HTML/XML tag names reuse `code-keyword`. Diff insertion and
+* deletion reuse the `success-*` / `danger-*` ramps instead.
+*
+* Two things are deliberately static here. Every hue is an absolute literal, so a
+* re-seeded brand cannot rotate the syntax palette — a green brand would otherwise
+* collide `code-string` with `code-number` (156°). And these factors are relative to
+* the *code* theme's own seed (`themes.code.saturation`), not the palette-level one,
+* so tuning the app's saturation cannot wash out a code block.
+*
+* That separate seed is the only reason these live outside the default theme: a
+* theme colour can never exceed its own seed, and four of these sit at factor `1.0`,
+* so they could not hold their chroma inside a default theme seeded below 80.
+*/
+const CODE_COLORS = {
 	"code-comment": {
 		base: "surface",
 		hue: 280,
 		saturation: .1,
 		tone: "-50",
-		contrast: ["AA", "AAA"],
-		inherit: false
+		contrast: ["AA", "AAA"]
 	},
 	"code-punctuation": {
 		base: "surface",
 		hue: 348,
 		saturation: .4,
 		tone: "-50",
-		contrast: ["AA", "AAA"],
-		inherit: false
+		contrast: ["AA", "AAA"]
 	},
 	"code-keyword": {
 		base: "surface",
 		hue: 348,
 		saturation: 1,
 		tone: "-54",
-		contrast: ["AA", "AAA"],
-		inherit: false
+		contrast: ["AA", "AAA"]
 	},
 	"code-string": {
 		base: "surface",
-		hue: PURPLE_HUE,
+		hue: CODE_STRING_HUE,
 		saturation: 1,
 		tone: "-50",
-		contrast: ["AA", "AAA"],
-		inherit: false
+		contrast: ["AA", "AAA"]
 	},
 	"code-number": {
 		base: "surface",
 		hue: 156,
 		saturation: .9,
 		tone: "-50",
-		contrast: ["AA", "AAA"],
-		inherit: false
+		contrast: ["AA", "AAA"]
 	},
 	"code-function": {
 		base: "surface",
 		hue: 348,
 		saturation: 1,
 		tone: "-54",
-		contrast: ["AA", "AAA"],
-		inherit: false
+		contrast: ["AA", "AAA"]
 	},
 	"code-attribute": {
 		base: "surface",
 		hue: 200,
 		saturation: 1,
 		tone: "-50",
-		contrast: ["AA", "AAA"],
-		inherit: false
-	},
-	"loading-face-1": {
-		base: "surface",
-		tone: "-2",
-		saturation: .3,
-		inherit: false
-	},
-	"loading-face-2": {
-		base: "surface",
-		tone: "-9",
-		saturation: .62,
-		inherit: false
-	},
-	"loading-face-3": {
-		base: "surface",
-		tone: "-21",
-		saturation: .66,
-		inherit: false
-	},
-	"shadow-sm": {
-		type: "shadow",
-		bg: "surface",
-		fg: "surface-text",
-		intensity: 5,
-		inherit: false
-	},
-	"shadow-md": {
-		type: "shadow",
-		bg: "surface",
-		fg: "surface-text",
-		intensity: 10,
-		inherit: false
+		contrast: ["AA", "AAA"]
+	}
+};
+/**
+* Build the standalone theme the `code-*` tokens live in.
+*
+* Its seed is the code saturation, so {@link CODE_COLORS} keeps its authored factors
+* verbatim and resolves identically at any palette saturation. The mirrored `surface`
+* is an implementation detail — it exists only as the contrast base, and is filtered
+* out of the emitted tokens by {@link pickCodeTokens}.
+*/
+function buildCodeTheme(config, instanceConfig) {
+	const codeSaturation = config.themes.code.saturation;
+	const theme = glaze(config.hue, codeSaturation, instanceConfig);
+	let mirrorFactor = SURFACE_SATURATION * (config.saturation / codeSaturation);
+	if (mirrorFactor > 1) {
+		console.warn(`[cube-ui-kit] themes.code.saturation (${codeSaturation}) is too low for saturation ${config.saturation}: the mirrored code surface would need a factor of ${mirrorFactor.toFixed(3)}. Clamped to 1; raise the code saturation to keep syntax contrast accurate.`);
+		mirrorFactor = 1;
+	}
+	theme.colors({
+		surface: {
+			tone: 100,
+			saturation: mirrorFactor
+		},
+		...CODE_COLORS
+	});
+	return theme;
+}
+/** Drop the mirrored `surface`, keeping only the `code-*` tokens. */
+function pickCodeTokens(tokens) {
+	const out = {};
+	for (const name of Object.keys(tokens)) if (name.startsWith("code-") || name.startsWith("#code-")) out[name] = tokens[name];
+	return out;
+}
+glaze.configure({
+	states: {
+		dark: "@dark",
+		highContrast: "@hc"
 	},
-	"shadow-lg": {
-		type: "shadow",
-		bg: "surface",
-		fg: "surface-text",
-		intensity: 15,
-		inherit: false
+	modes: {
+		dark: true,
+		highContrast: true
 	},
-	overlay: {
-		tone: 10,
-		opacity: .5,
-		inherit: false
-	}
+	darkTone: [14, 95],
+	darkDesaturation: 0
 });
-const TINTED_SURFACE_SATURATION = .2;
-const TINTED_SURFACE_TONE_OFFSET = 2;
 /**
-* Per-colored-theme overrides on top of `defaultTheme`:
+* Per-colored-theme overrides on top of the default theme:
 *   - `surface` — bumped saturation so the banner bg is visibly tinted.
 *   - `border`  — bumped saturation so OUTLINE-variant borders pick up the
 *     theme hue (used by `#<theme>-border` in `item-themes.ts`). Mirrors the
@@ -333,13 +161,13 @@ const TINTED_SURFACE_TONE_OFFSET = 2;
 */
 const TINTED_SURFACE_OVERRIDE = {
 	surface: {
-		tone: 100 - TINTED_SURFACE_TONE_OFFSET,
+		tone: [100 - TINTED_SURFACE_TONE_OFFSET, 100 - TINTED_SURFACE_TONE_OFFSET * 2],
 		saturation: TINTED_SURFACE_SATURATION
 	},
 	border: {
 		base: "surface",
-		tone: ["-10", "-20"],
-		saturation: .5
+		tone: ["-10", "-30"],
+		saturation: .3
 	},
 	"surface-text": {
 		base: "surface",
@@ -360,166 +188,511 @@ const TINTED_SURFACE_OVERRIDE = {
 		contrast: ["AA", "AAA"]
 	}
 };
-const primaryTheme = defaultTheme.extend({ colors: TINTED_SURFACE_OVERRIDE });
-const successTheme = defaultTheme.extend({
-	hue: SUCCESS_HUE,
-	colors: TINTED_SURFACE_OVERRIDE
-});
-const dangerTheme = defaultTheme.extend({
-	hue: DANGER_HUE,
-	colors: TINTED_SURFACE_OVERRIDE
-});
-const warningTheme = defaultTheme.extend({
-	hue: WARNING_HUE,
-	colors: TINTED_SURFACE_OVERRIDE
-});
-const noteTheme = defaultTheme.extend({
-	hue: NOTE_HUE,
-	colors: TINTED_SURFACE_OVERRIDE
-});
 /**
-* Standalone theme for `special`-variant components (hero CTAs, banners, etc.)
-* that intentionally sit on a dark surface regardless of the active scheme.
-*
-* Every token here is `mode: 'fixed'` so the resolved value is identical in
-* light, dark, and high-contrast. The shape is purpose-built (not a full
-* mirror of `defaultTheme`) — only what `SPECIAL_*_STYLES` in
-* `src/data/item-themes.ts` consumes is emitted.
+* Build the full palette from a resolved config.
 *
-* Token rundown:
-*   - `surface` — dark L≈12 backdrop (same value as `#surface-inverse`).
-*   - `accent-surface` / `accent-surface-2` / `accent-surface-3` —
-*     brand-purple PRIMARY fill ramp (default → hover → pressed). Mirrors
-*     the `#primary-accent-surface` / `-2` / `-3` ramp on the colored
-*     themes so `SPECIAL_PRIMARY_STYLES.fill` can use the same shape.
-*   - `accent-surface-hover` — legacy alias kept around for the
-*     `#special-hover` color shortcut in `src/tokens/colors.ts`. Item
-*     themes themselves no longer reference it.
-*   - `accent-surface-text` — fixed white (= built-in `#white`), exposed
-*     for explicit references.
-*   - `accent-text` — dark-purple foreground readable on white. Used as
-*     CLEAR-variant text on the always-white pill, and as the
-*     pressed/focused border on the brand-purple primary fill. Matches the
-*     legacy `#fixed-primary-text` alias (= `#primary-accent-surface-hover`).
-*   - `accent-disabled-surface` / `accent-disabled-surface-text` —
-*     brand-tinted disabled chip + label, positioned with relative tone
-*     deltas against the fixed dark `surface` so the disabled state is
-*     scheme-symmetric.
+* Pure: it reads nothing but its argument (and the global Glaze config, which
+* the caller sets first), so re-running it with the same config yields the same
+* tokens. Theme instances are immutable with respect to their hue / saturation
+* seed and a `GlazePalette` has no mutation API, so re-seeding means rebuilding.
 */
-const specialTheme = glaze(PURPLE_HUE, SEED_SATURATION);
-specialTheme.colors({
-	surface: {
-		tone: 12,
-		saturation: .475,
-		mode: "fixed"
-	},
-	"accent-surface-text": {
-		tone: 100,
-		mode: "fixed"
-	},
-	"accent-surface": {
-		base: "accent-surface-text",
-		tone: "-49",
-		contrast: ["AA", "AAA"],
-		mode: "fixed"
-	},
-	"accent-surface-2": {
-		base: "accent-surface-text",
-		tone: "-52",
-		contrast: ["AA", "AAA"],
-		mode: "fixed"
-	},
-	"accent-surface-3": {
-		base: "accent-surface-text",
-		tone: "-55",
-		contrast: ["AA", "AAA"],
-		mode: "fixed"
-	},
-	"accent-surface-border": {
-		base: "accent-surface",
-		tone: "+13",
-		mode: "fixed"
-	},
-	"accent-surface-hover": {
-		base: "accent-surface-text",
-		tone: "-58",
-		contrast: ["AA", "AAA"],
-		mode: "fixed"
-	},
-	"accent-text": {
-		base: "accent-surface-text",
-		tone: "-58",
-		contrast: ["AA", "AAA"],
-		mode: "fixed"
-	},
-	"accent-disabled-surface": {
-		base: "surface",
-		tone: "+4",
-		saturation: .5,
-		mode: "fixed"
-	},
-	"accent-disabled-surface-text": {
-		base: "accent-disabled-surface",
-		tone: "+18",
-		saturation: .4,
-		mode: "fixed"
-	}
-});
+function buildPalette(config, options = {}) {
+	const { hue, baseHue, saturation, pastel, themes, contrastLevel } = config;
+	const overrides = {
+		...pastel ? { pastel: true } : null,
+		...options.isolateContrastLevel ? { contrastLevel } : null
+	};
+	const instanceConfig = Object.keys(overrides).length ? overrides : void 0;
+	const defaultTheme = glaze(hue, saturation, instanceConfig);
+	defaultTheme.colors({
+		surface: {
+			tone: 100,
+			saturation: SURFACE_SATURATION,
+			hue: baseHue
+		},
+		"surface-2": {
+			hue: baseHue,
+			base: "surface",
+			tone: ["-2", "-4"],
+			saturation: .1,
+			inherit: false
+		},
+		"surface-3": {
+			hue: baseHue,
+			base: "surface",
+			tone: ["-4", "-8"],
+			saturation: .1,
+			inherit: false
+		},
+		"surface-4": {
+			hue: baseHue,
+			base: "surface",
+			tone: ["-6", "-12"],
+			saturation: .1,
+			inherit: false
+		},
+		"surface-text": {
+			hue: baseHue,
+			base: "surface",
+			tone: `${TEXT_TONE - 2}`,
+			saturation: .2,
+			contrast: ["AA", "AAA"]
+		},
+		"surface-text-soft": {
+			hue: baseHue,
+			base: "surface",
+			tone: `${TEXT_SOFT_TONE - 2}`,
+			saturation: .2,
+			contrast: ["AA", "AAA"],
+			inherit: false
+		},
+		"surface-text-soft-2": {
+			hue: baseHue,
+			base: "surface",
+			tone: `${TEXT_SOFT2_TONE - 2}`,
+			saturation: .2,
+			contrast: ["AA", "AAA"],
+			inherit: false
+		},
+		"surface-2-text": {
+			hue: baseHue,
+			base: "surface-2",
+			tone: `${TEXT_TONE + SURFACE_2_TEXT_OFFSET}`,
+			saturation: .2,
+			contrast: ["AA", "AAA"],
+			inherit: false
+		},
+		"surface-2-text-soft": {
+			hue: baseHue,
+			base: "surface-2",
+			tone: `${TEXT_SOFT_TONE + SURFACE_2_TEXT_OFFSET}`,
+			saturation: .2,
+			contrast: ["AA", "AAA"],
+			inherit: false
+		},
+		"surface-3-text": {
+			hue: baseHue,
+			base: "surface-3",
+			tone: `${TEXT_TONE + SURFACE_3_TEXT_OFFSET}`,
+			saturation: .2,
+			contrast: ["AA", "AAA"],
+			inherit: false
+		},
+		"surface-3-text-soft": {
+			hue: baseHue,
+			base: "surface-3",
+			tone: `${TEXT_SOFT_TONE + SURFACE_3_TEXT_OFFSET}`,
+			saturation: .2,
+			contrast: ["AA", "AAA"],
+			inherit: false
+		},
+		border: {
+			hue: baseHue,
+			base: "surface",
+			tone: ["-10", "-30"],
+			saturation: .175
+		},
+		placeholder: {
+			hue: baseHue,
+			base: "surface",
+			tone: "-33",
+			saturation: .175,
+			inherit: false
+		},
+		focus: {
+			base: "surface",
+			tone: "-29",
+			saturation: .8625,
+			inherit: false
+		},
+		disabled: {
+			tone: 80.8,
+			saturation: .4,
+			inherit: false
+		},
+		"disabled-surface": {
+			hue: baseHue,
+			base: "surface",
+			tone: "-3.5",
+			saturation: .2,
+			inherit: false
+		},
+		"disabled-surface-text": {
+			base: "surface",
+			tone: "-23",
+			saturation: .3,
+			inherit: false
+		},
+		"surface-inverse": {
+			hue: baseHue,
+			tone: 12,
+			saturation: .475,
+			mode: "fixed",
+			inherit: false
+		},
+		"accent-surface-text": {
+			tone: 100,
+			mode: "fixed"
+		},
+		"accent-surface": {
+			base: "accent-surface-text",
+			tone: "-49",
+			contrast: ["AA", "AAA"],
+			mode: "fixed"
+		},
+		"accent-surface-2": {
+			base: "accent-surface-text",
+			tone: "-52",
+			contrast: ["AA", "AAA"],
+			mode: "fixed"
+		},
+		"accent-surface-3": {
+			base: "accent-surface-text",
+			tone: "-55",
+			contrast: ["AA", "AAA"],
+			mode: "fixed"
+		},
+		"accent-surface-hover": {
+			base: "accent-surface-text",
+			tone: "-58",
+			contrast: ["AA", "AAA"],
+			mode: "fixed"
+		},
+		"accent-surface-border": {
+			base: "accent-surface",
+			tone: "+13",
+			mode: "fixed"
+		},
+		"accent-selected-fill": {
+			type: "mix",
+			base: "surface",
+			target: "accent-surface",
+			value: 9,
+			space: "srgb"
+		},
+		"accent-text": {
+			base: "accent-selected-fill",
+			tone: "-49",
+			saturation: 1,
+			contrast: [6, 11]
+		},
+		"accent-text-soft": {
+			base: "accent-selected-fill",
+			tone: "-49",
+			saturation: 1,
+			contrast: ["AA", "AAA"]
+		},
+		"accent-icon": {
+			base: "surface",
+			tone: "-38",
+			saturation: .9375
+		},
+		"accent-disabled-surface": {
+			base: "surface",
+			tone: "-13",
+			saturation: .5,
+			mode: "fixed"
+		},
+		"accent-disabled-surface-text": {
+			base: "accent-disabled-surface",
+			tone: "max",
+			saturation: .4,
+			mode: "fixed"
+		},
+		"loading-face-1": {
+			base: "surface",
+			tone: "-2",
+			saturation: .3,
+			inherit: false
+		},
+		"loading-face-2": {
+			base: "surface",
+			tone: "-9",
+			saturation: .62,
+			inherit: false
+		},
+		"loading-face-3": {
+			base: "surface",
+			tone: "-21",
+			saturation: .66,
+			inherit: false
+		},
+		"shadow-sm": {
+			type: "shadow",
+			bg: "surface",
+			fg: "surface-text",
+			intensity: 5,
+			inherit: false
+		},
+		"shadow-md": {
+			type: "shadow",
+			bg: "surface",
+			fg: "surface-text",
+			intensity: 10,
+			inherit: false
+		},
+		"shadow-lg": {
+			type: "shadow",
+			bg: "surface",
+			fg: "surface-text",
+			intensity: 15,
+			inherit: false
+		},
+		overlay: {
+			tone: 10,
+			opacity: .5,
+			inherit: false,
+			hue: baseHue
+		}
+	});
+	const primaryTheme = defaultTheme.extend({ colors: TINTED_SURFACE_OVERRIDE });
+	const successTheme = defaultTheme.extend({
+		hue: themes.success.hue,
+		saturation: themes.success.saturation,
+		colors: TINTED_SURFACE_OVERRIDE
+	});
+	const dangerTheme = defaultTheme.extend({
+		hue: themes.danger.hue,
+		saturation: themes.danger.saturation,
+		colors: TINTED_SURFACE_OVERRIDE
+	});
+	const warningTheme = defaultTheme.extend({
+		hue: themes.warning.hue,
+		saturation: themes.warning.saturation,
+		colors: TINTED_SURFACE_OVERRIDE
+	});
+	const noteTheme = defaultTheme.extend({
+		hue: themes.note.hue,
+		saturation: themes.note.saturation,
+		colors: TINTED_SURFACE_OVERRIDE
+	});
+	const specialTheme = glaze(hue, saturation, instanceConfig);
+	specialTheme.colors({
+		surface: {
+			tone: 12,
+			saturation: .475,
+			mode: "fixed"
+		},
+		"accent-surface-text": {
+			tone: 100,
+			mode: "fixed"
+		},
+		"accent-surface": {
+			base: "accent-surface-text",
+			tone: "-49",
+			contrast: ["AA", "AAA"],
+			mode: "fixed"
+		},
+		"accent-surface-2": {
+			base: "accent-surface-text",
+			tone: "-52",
+			contrast: ["AA", "AAA"],
+			mode: "fixed"
+		},
+		"accent-surface-3": {
+			base: "accent-surface-text",
+			tone: "-55",
+			contrast: ["AA", "AAA"],
+			mode: "fixed"
+		},
+		"accent-surface-border": {
+			base: "accent-surface",
+			tone: "+13",
+			mode: "fixed"
+		},
+		"accent-surface-hover": {
+			base: "accent-surface-text",
+			tone: "-58",
+			contrast: ["AA", "AAA"],
+			mode: "fixed"
+		},
+		"accent-text": {
+			base: "accent-surface-text",
+			tone: "-58",
+			contrast: ["AA", "AAA"],
+			mode: "fixed"
+		},
+		"accent-disabled-surface": {
+			base: "surface",
+			tone: "+4",
+			saturation: .5,
+			mode: "fixed"
+		},
+		"accent-disabled-surface-text": {
+			base: "accent-disabled-surface",
+			tone: "+18",
+			saturation: .4,
+			mode: "fixed"
+		}
+	});
+	return {
+		palette: glaze.palette({
+			default: defaultTheme,
+			primary: primaryTheme,
+			purple: primaryTheme,
+			success: successTheme,
+			danger: dangerTheme,
+			warning: warningTheme,
+			note: noteTheme,
+			special: specialTheme
+		}),
+		codeTheme: buildCodeTheme(config, instanceConfig)
+	};
+}
+const TOKEN_PREFIXES = {
+	default: "",
+	primary: "primary-",
+	purple: "purple-",
+	success: "success-",
+	danger: "danger-",
+	warning: "warning-",
+	note: "note-",
+	special: "special-"
+};
+let paletteCache = null;
+let codeThemeCache = null;
+let paletteTokensCache = null;
+let cachedVersion = -1;
 /**
-* Theme map for the palette.
+* Whether *we* are the ones holding a manual level in Glaze's global config.
 *
-* `purple` is the legacy alias for `primary` and resolves to identical tokens
-* (same theme instance, different prefix → no token-value collision).
+* `contrastLevel` is the one palette option that has to be global: a global
+* level pins `modes.highContrast: false` so no high-contrast tier is emitted at
+* all (which is the point — a manual level already carries the preference),
+* whereas a per-instance level would leave the tier in place and report its own
+* values there. `palette.tasty({ modes })` cannot override that either.
 *
-* `default` is emitted with an empty prefix (custom map below), so its tokens
-* appear unprefixed (`#surface`, `#border`, …). All other themes are prefixed
-* with `<themeName>-`.
+* Being global means it is shared with the host app, so we only write it when
+* asked. A host that sets its own `glaze.configure({ contrastLevel })` and never
+* touches `setPaletteConfig({ contrastLevel })` keeps its level — without this
+* flag we would silently reset it to `'auto'` on the first token read.
 */
-const palette = glaze.palette({
-	default: defaultTheme,
-	primary: primaryTheme,
-	purple: primaryTheme,
-	success: successTheme,
-	danger: dangerTheme,
-	warning: warningTheme,
-	note: noteTheme,
-	special: specialTheme
-});
+let ownsContrastLevel = false;
+function applyContrastLevel(contrastLevel) {
+	if (contrastLevel === "auto" && !ownsContrastLevel) return;
+	glaze.configure({ contrastLevel });
+	ownsContrastLevel = contrastLevel !== "auto";
+}
+function refresh() {
+	const version = getPaletteVersion();
+	if (paletteTokensCache && cachedVersion === version) return;
+	const config = getPaletteConfig();
+	applyContrastLevel(config.contrastLevel);
+	const built = buildPalette(config);
+	paletteCache = built.palette;
+	paletteTokensCache = {
+		...built.palette.tasty({
+			prefix: TOKEN_PREFIXES,
+			format: "oklch"
+		}),
+		...pickCodeTokens(built.codeTheme.tasty({ format: "oklch" }))
+	};
+	codeThemeCache = built.codeTheme;
+	cachedVersion = version;
+}
 /**
-* Resolve Glaze palette tokens against the **live** `glaze` global config.
+* Resolve Glaze palette tokens against the current palette config.
 *
-* Memoized on first call so subsequent reads are free. Resolution is deferred
-* (not done at module import) so host apps can call `glaze.configure(...)`
-* after importing `@cube-dev/ui-kit` and still affect these tokens — as long as
-* configure runs before the first `getPaletteTokens()` / `<Root>` paint.
+* Memoized against the config version (see `./palette-config.ts`), so repeated
+* reads are free and `setPaletteConfig()` invalidates them. Resolution is
+* deferred rather than done at module import, so host apps can call
+* `setPaletteConfig(...)` / `glaze.configure(...)` after importing
+* `@cube-dev/ui-kit` and still affect the first paint.
 *
 * Keys use `#name` syntax; values are state maps:
 *   '#surface': { '': 'oklch(...)', '@dark': 'oklch(...)', '@hc': 'oklch(...)' }
 */
-let paletteTokensCache = null;
 function getPaletteTokens() {
-	if (!paletteTokensCache) paletteTokensCache = palette.tasty({
-		prefix: {
-			default: "",
-			primary: "primary-",
-			purple: "purple-",
-			success: "success-",
-			danger: "danger-",
-			warning: "warning-",
-			note: "note-",
-			special: "special-"
-		},
-		format: "oklch"
-	});
+	refresh();
 	return paletteTokensCache;
 }
+/** The live `GlazePalette`. Rebuilt whenever the palette config changes. */
+function getPalette() {
+	refresh();
+	return paletteCache;
+}
+/**
+* The live theme behind the `code-*` tokens. Separate from {@link getPalette}
+* because it carries its own saturation seed — see {@link CODE_COLORS}.
+*/
+function getCodeTheme() {
+	refresh();
+	return codeThemeCache;
+}
+const VARIANT_KEY = {
+	"light:false": "light",
+	"light:true": "lightContrast",
+	"dark:false": "dark",
+	"dark:true": "darkContrast"
+};
+/**
+* Single-entry memo: all four variants of the last config rendered.
+*
+* Keyed on the palette version as well as the config, because the config is not
+* the only input — `buildPalette` also reads Glaze's own global config
+* (`darkTone`, `darkDesaturation`, the state map). A host that drives Glaze
+* directly and then calls `invalidatePaletteTokens()` bumps the version without
+* touching the config, and the region previews have to follow the document.
+*/
+let renderKey = null;
+let renderVariants = {};
+/**
+* Resolve one scheme variant of a palette to flat, literal color values.
+*
+* Unlike {@link getPaletteTokens}, which emits state maps (`@dark` / `@hc`) for
+* the whole document, this collapses the palette to the single variant you ask
+* for. That is what makes a **region** preview possible: applied through a tasty
+* `tokens` prop, the values override the inherited ones for that subtree only, so
+* a dark or high-contrast theme can be shown inside a light page.
+*
+* Prefer `renderColorTokens()` from `./colors` unless you specifically want the
+* palette without the legacy aliases.
+*/
+function renderPaletteTokens(options = {}) {
+	const { scheme = "light", highContrast = false, ...config } = options;
+	const resolved = resolvePaletteConfig(config);
+	const key = `${getPaletteVersion()}:${JSON.stringify(resolved)}`;
+	if (renderKey !== key) {
+		const previousLevel = glaze.getConfig().contrastLevel;
+		try {
+			glaze.configure({ contrastLevel: "auto" });
+			const built = buildPalette(resolved, { isolateContrastLevel: true });
+			const modes = {
+				dark: true,
+				highContrast: true
+			};
+			const themed = built.palette.tokens({
+				prefix: TOKEN_PREFIXES,
+				format: "oklch",
+				modes
+			});
+			const code = built.codeTheme.tokens({
+				format: "oklch",
+				modes
+			});
+			const variants = {};
+			for (const name of Object.keys(themed)) variants[name] = {
+				...themed[name],
+				...pickCodeTokens(code[name] ?? {})
+			};
+			renderVariants = variants;
+			renderKey = key;
+		} finally {
+			glaze.configure({ contrastLevel: previousLevel });
+		}
+	}
+	const flat = renderVariants[VARIANT_KEY[`${scheme}:${highContrast}`]] ?? renderVariants[scheme];
+	const out = {};
+	for (const name of Object.keys(flat)) out[`#${name}`] = flat[name];
+	return out;
+}
 /**
 * Lazy proxy of {@link getPaletteTokens}. Prefer `getPaletteTokens()` in new
-* code. First property / enumeration access resolves against the live glaze
-* config (same memo as the getter).
+* code. Property / enumeration access always reflects the current palette
+* config.
 */
 const PALETTE_TOKENS = lazyStyles(getPaletteTokens);
 
 //#endregion
-export { PALETTE_TOKENS, getPaletteTokens };
+export { PALETTE_TOKENS, getCodeTheme, getPalette, getPaletteTokens, renderPaletteTokens };
 //# sourceMappingURL=palette.js.map