@cube-dev/ui-kit 0.149.2 → 0.150.0

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 { COLOR_TOKENS } from './colors';\nimport { LAYOUT_TOKENS } from './layout';\nimport { SHADOW_TOKENS } from './shadows';\nimport { SIZE_NAME_TO_KEY, SIZE_TOKENS, SIZES } 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 * Ready for use with useGlobalStyles('body', TOKENS).\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 */\nexport const TOKENS: Styles = {\n  ...BASE_TOKENS,\n  ...SPACE_TOKENS,\n  ...SIZE_TOKENS,\n  ...SHADOW_TOKENS,\n  ...LAYOUT_TOKENS,\n  ...generateTypographyTokens(TYPOGRAPHY_PRESETS),\n  ...COLOR_TOKENS,\n};\n\n// Re-export category modules for direct access\nexport { COLOR_TOKENS } from './colors';\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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA4CA,MAAa,SAAiB;CAC5B,GAAG;CACH,GAAG;CACH,GAAG;CACH,GAAG;CACH,GAAG;CACH,GAAG,yBAAyB,mBAAmB;CAC/C,GAAG;CACJ"}
+{"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 { 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 live glaze config on first call (see\n * {@link getColorTokens}). Prefer this over the lazy {@link TOKENS} proxy\n * 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;\n\nexport function getTokens(): Styles {\n  if (!tokensCache) {\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  }\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 } from './colors';\nexport { getPaletteTokens, PALETTE_TOKENS } from './palette';\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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA+CA,IAAI,cAA6B;AAEjC,SAAgB,YAAoB;AAClC,KAAI,CAAC,YACH,eAAc;EACZ,GAAG;EACH,GAAG;EACH,GAAG;EACH,GAAG;EACH,GAAG;EACH,GAAG,yBAAyB,mBAAmB;EAC/C,GAAG,gBAAgB;EACpB;AAEH,QAAO;;;AAIT,MAAa,SAAiB,WAAW,UAAU"}

package/dist/tokens/layout.js

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

package/dist/tokens/lazy-styles.js

@@ -0,0 +1,33 @@
+/** @license MIT | @cube-dev/ui-kit v0.150.0 | Cube Dev Team */
+//#region src/tokens/lazy-styles.ts
+/**
+* Proxy that materializes a `Styles` map on first property / enumeration
+* access. Used so token exports stay import-safe while resolution can wait
+* until after a host app calls `glaze.configure(...)`.
+*/
+function lazyStyles(factory) {
+	let cache;
+	const resolve = () => cache ??= factory();
+	return new Proxy({}, {
+		get(_target, prop) {
+			if (prop === Symbol.toStringTag) return "Object";
+			return Reflect.get(resolve(), prop);
+		},
+		ownKeys() {
+			return Reflect.ownKeys(resolve());
+		},
+		getOwnPropertyDescriptor(_target, prop) {
+			return Object.getOwnPropertyDescriptor(resolve(), prop);
+		},
+		has(_target, prop) {
+			return Reflect.has(resolve(), prop);
+		},
+		getPrototypeOf() {
+			return Object.prototype;
+		}
+	});
+}
+
+//#endregion
+export { lazyStyles };
+//# sourceMappingURL=lazy-styles.js.map

package/dist/tokens/lazy-styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"lazy-styles.js","names":[],"sources":["../../src/tokens/lazy-styles.ts"],"sourcesContent":["import type { Styles } from '@tenphi/tasty';\n\n/**\n * Proxy that materializes a `Styles` map on first property / enumeration\n * access. Used so token exports stay import-safe while resolution can wait\n * until after a host app calls `glaze.configure(...)`.\n */\nexport function lazyStyles(factory: () => Styles): Styles {\n  let cache: Styles | undefined;\n  const resolve = () => (cache ??= factory());\n  return new Proxy({} as Styles, {\n    get(_target, prop) {\n      if (prop === Symbol.toStringTag) return 'Object';\n      return Reflect.get(resolve(), prop);\n    },\n    ownKeys() {\n      return Reflect.ownKeys(resolve());\n    },\n    getOwnPropertyDescriptor(_target, prop) {\n      return Object.getOwnPropertyDescriptor(resolve(), prop);\n    },\n    has(_target, prop) {\n      return Reflect.has(resolve(), prop);\n    },\n    getPrototypeOf() {\n      return Object.prototype;\n    },\n  });\n}\n"],"mappings":";;;;;;;AAOA,SAAgB,WAAW,SAA+B;CACxD,IAAI;CACJ,MAAM,gBAAiB,UAAU,SAAS;AAC1C,QAAO,IAAI,MAAM,EAAE,EAAY;EAC7B,IAAI,SAAS,MAAM;AACjB,OAAI,SAAS,OAAO,YAAa,QAAO;AACxC,UAAO,QAAQ,IAAI,SAAS,EAAE,KAAK;;EAErC,UAAU;AACR,UAAO,QAAQ,QAAQ,SAAS,CAAC;;EAEnC,yBAAyB,SAAS,MAAM;AACtC,UAAO,OAAO,yBAAyB,SAAS,EAAE,KAAK;;EAEzD,IAAI,SAAS,MAAM;AACjB,UAAO,QAAQ,IAAI,SAAS,EAAE,KAAK;;EAErC,iBAAiB;AACf,UAAO,OAAO;;EAEjB,CAAC"}

package/dist/tokens/palette.d.ts

@@ -0,0 +1,15 @@
+
+import { Styles } from "@tenphi/tasty";
+import "@tenphi/glaze";
+
+//#region src/tokens/palette.d.ts
+declare function getPaletteTokens(): Styles;
+/**
+ * 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).
+ */
+declare const PALETTE_TOKENS: Styles;
+//#endregion
+export { PALETTE_TOKENS, getPaletteTokens };
+//# sourceMappingURL=palette.d.ts.map

package/dist/tokens/palette.js

@@ -1,4 +1,5 @@
-/** @license MIT | @cube-dev/ui-kit v0.149.2 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.150.0 | Cube Dev Team */
+import { lazyStyles } from "./lazy-styles.js";
 import { glaze } from "@tenphi/glaze";
 
 //#region src/tokens/palette.ts
@@ -8,7 +9,7 @@ import { glaze } from "@tenphi/glaze";
 * Produces light, dark, and high-contrast color variants from a single
 * source of truth. Every color token is emitted as a tasty state map:
 *
-*   '#surface': { '': 'okhsl(...)', '@dark': 'okhsl(...)', '@hc': 'okhsl(...)' }
+*   '#surface': { '': 'oklch(...)', '@dark': 'oklch(...)', '@hc': 'oklch(...)' }
 *
 * The `@dark` and `@hc` state aliases are wired up globally in
 * `src/components/Root.tsx` (see `setGlobalPredefinedStates`).
@@ -20,6 +21,11 @@ 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",
@@ -28,259 +34,263 @@ glaze.configure({
 	modes: {
 		dark: true,
 		highContrast: true
-	}
+	},
+	darkTone: [14, 95],
+	darkDesaturation: 0
 });
 const defaultTheme = glaze(PURPLE_HUE, SEED_SATURATION);
 defaultTheme.colors({
 	surface: {
-		lightness: 100,
-		saturation: .11
+		tone: 100,
+		saturation: .12
 	},
 	"surface-2": {
 		base: "surface",
-		lightness: "-2",
-		saturation: .15,
+		tone: "-2",
+		saturation: .1,
 		inherit: false
 	},
 	"surface-3": {
 		base: "surface",
-		lightness: "-4",
-		saturation: .19,
+		tone: "-4",
+		saturation: .1,
 		inherit: false
 	},
 	"surface-4": {
 		base: "surface",
-		lightness: "-6",
-		saturation: .2,
+		tone: "-6",
+		saturation: .1,
 		inherit: false
 	},
 	"surface-text": {
 		base: "surface",
-		lightness: 2,
-		saturation: .475
+		tone: `${TEXT_TONE - 2}`,
+		saturation: .2,
+		contrast: ["AA", "AAA"]
 	},
 	"surface-text-soft": {
 		base: "surface",
-		lightness: "-1",
-		saturation: .375,
-		contrast: [9, 11],
+		tone: `${TEXT_SOFT_TONE - 2}`,
+		saturation: .2,
+		contrast: ["AA", "AAA"],
 		inherit: false
 	},
 	"surface-text-soft-2": {
 		base: "surface",
-		lightness: "-1",
-		saturation: .24,
-		contrast: [4.5, 5.5],
+		tone: `${TEXT_SOFT2_TONE - 2}`,
+		saturation: .2,
+		contrast: ["AA", "AAA"],
 		inherit: false
 	},
 	"surface-2-text": {
 		base: "surface-2",
-		lightness: 2,
-		saturation: .475,
+		tone: `${TEXT_TONE + SURFACE_2_TEXT_OFFSET}`,
+		saturation: .2,
+		contrast: ["AA", "AAA"],
 		inherit: false
 	},
 	"surface-2-text-soft": {
 		base: "surface-2",
-		lightness: "-1",
-		saturation: .375,
-		contrast: [9, 11],
+		tone: `${TEXT_SOFT_TONE + SURFACE_2_TEXT_OFFSET}`,
+		saturation: .2,
+		contrast: ["AA", "AAA"],
 		inherit: false
 	},
 	"surface-3-text": {
 		base: "surface-3",
-		lightness: 2,
-		saturation: .475,
+		tone: `${TEXT_TONE + SURFACE_3_TEXT_OFFSET}`,
+		saturation: .2,
+		contrast: ["AA", "AAA"],
 		inherit: false
 	},
 	"surface-3-text-soft": {
 		base: "surface-3",
-		lightness: "-1",
-		saturation: .375,
-		contrast: [9, 11],
+		tone: `${TEXT_SOFT_TONE + SURFACE_3_TEXT_OFFSET}`,
+		saturation: .2,
+		contrast: ["AA", "AAA"],
 		inherit: false
 	},
 	border: {
 		base: "surface",
-		lightness: ["-10", "-20"],
+		tone: ["-10", "-20"],
 		saturation: .175
 	},
 	placeholder: {
 		base: "surface",
-		lightness: 67,
+		tone: "-33",
 		saturation: .175,
 		inherit: false
 	},
 	focus: {
 		base: "surface",
-		lightness: 71,
+		tone: "-29",
 		saturation: .8625,
 		inherit: false
 	},
 	disabled: {
-		lightness: 80.8,
+		tone: 80.8,
 		saturation: .4,
 		inherit: false
 	},
 	"disabled-surface": {
 		base: "surface",
-		lightness: "-1",
+		tone: "-3.5",
 		saturation: .2,
-		contrast: [1.1, 1.2],
 		inherit: false
 	},
 	"disabled-surface-text": {
 		base: "surface",
-		lightness: "-1",
+		tone: "-23",
 		saturation: .3,
-		contrast: [2, 2.5],
 		inherit: false
 	},
 	"surface-inverse": {
-		lightness: 12,
+		tone: 12,
 		saturation: .475,
 		mode: "fixed",
 		inherit: false
 	},
 	"accent-surface-text": {
-		lightness: 100,
+		tone: 100,
 		mode: "fixed"
 	},
 	"accent-surface": {
 		base: "accent-surface-text",
-		lightness: "-1",
-		contrast: [4.5, 7],
+		tone: "-49",
+		contrast: ["AA", "AAA"],
 		mode: "fixed"
 	},
 	"accent-surface-2": {
 		base: "accent-surface-text",
-		lightness: "-1",
-		contrast: [5, 8],
+		tone: "-52",
+		contrast: ["AA", "AAA"],
 		mode: "fixed"
 	},
 	"accent-surface-3": {
 		base: "accent-surface-text",
-		lightness: "-1",
-		contrast: [5.5, 9],
+		tone: "-55",
+		contrast: ["AA", "AAA"],
 		mode: "fixed"
 	},
 	"accent-surface-hover": {
 		base: "accent-surface-text",
-		lightness: "-1",
-		contrast: [6, 10],
+		tone: "-58",
+		contrast: ["AA", "AAA"],
 		mode: "fixed"
 	},
 	"accent-surface-border": {
 		base: "accent-surface",
-		lightness: "+1",
-		contrast: [1.4, 1.8],
+		tone: "+13",
 		mode: "fixed"
 	},
-	"accent-text": {
+	"accent-selected-fill": {
+		type: "mix",
 		base: "surface",
-		lightness: "-1",
+		target: "accent-surface",
+		value: 9,
+		space: "srgb"
+	},
+	"accent-text": {
+		base: "accent-selected-fill",
+		tone: "-49",
 		saturation: 1,
-		contrast: [6.4, 10]
+		contrast: [6, 11]
 	},
 	"accent-text-soft": {
-		base: "surface",
-		lightness: "-1",
+		base: "accent-selected-fill",
+		tone: "-49",
 		saturation: 1,
-		contrast: [4.5, 7]
+		contrast: ["AA", "AAA"]
 	},
 	"accent-icon": {
 		base: "surface",
-		lightness: "-1",
-		saturation: .9375,
-		contrast: [3.2, 5]
+		tone: "-38",
+		saturation: .9375
 	},
 	"accent-disabled-surface": {
 		base: "surface",
-		lightness: "-1",
+		tone: "-13",
 		saturation: .5,
-		contrast: [1.4, 1.5]
+		mode: "fixed"
 	},
 	"accent-disabled-surface-text": {
 		base: "accent-disabled-surface",
-		lightness: "+1",
+		tone: "max",
 		saturation: .4,
-		contrast: 1.51,
 		mode: "fixed"
 	},
 	"code-comment": {
 		base: "surface",
 		hue: 280,
 		saturation: .1,
-		lightness: "-1",
-		contrast: [4.5, 7],
+		tone: "-50",
+		contrast: ["AA", "AAA"],
 		inherit: false
 	},
 	"code-punctuation": {
 		base: "surface",
 		hue: 348,
 		saturation: .4,
-		lightness: "-1",
-		contrast: [4.5, 7],
+		tone: "-50",
+		contrast: ["AA", "AAA"],
 		inherit: false
 	},
 	"code-keyword": {
 		base: "surface",
 		hue: 348,
 		saturation: 1,
-		lightness: "-1",
-		contrast: [5, 7.5],
+		tone: "-54",
+		contrast: ["AA", "AAA"],
 		inherit: false
 	},
 	"code-string": {
 		base: "surface",
 		hue: PURPLE_HUE,
 		saturation: 1,
-		lightness: "-1",
-		contrast: [4.5, 7],
+		tone: "-50",
+		contrast: ["AA", "AAA"],
 		inherit: false
 	},
 	"code-number": {
 		base: "surface",
 		hue: 156,
 		saturation: .9,
-		lightness: "-1",
-		contrast: [4.5, 7],
+		tone: "-50",
+		contrast: ["AA", "AAA"],
 		inherit: false
 	},
 	"code-function": {
 		base: "surface",
 		hue: 348,
 		saturation: 1,
-		lightness: "-1",
-		contrast: [5, 7.5],
+		tone: "-54",
+		contrast: ["AA", "AAA"],
 		inherit: false
 	},
 	"code-attribute": {
 		base: "surface",
 		hue: 200,
 		saturation: 1,
-		lightness: "-1",
-		contrast: [4.5, 7],
+		tone: "-50",
+		contrast: ["AA", "AAA"],
 		inherit: false
 	},
 	"loading-face-1": {
 		base: "surface",
-		lightness: 98,
+		tone: "-2",
 		saturation: .3,
-		contrast: [1.04, 1.5],
 		inherit: false
 	},
 	"loading-face-2": {
 		base: "surface",
-		lightness: 91,
+		tone: "-9",
 		saturation: .62,
-		contrast: [1.24, 2.5],
 		inherit: false
 	},
 	"loading-face-3": {
 		base: "surface",
-		lightness: 79,
+		tone: "-21",
 		saturation: .66,
-		contrast: [1.75, 4],
 		inherit: false
 	},
 	"shadow-sm": {
@@ -305,29 +315,49 @@ defaultTheme.colors({
 		inherit: false
 	},
 	overlay: {
-		lightness: 10,
+		tone: 10,
 		opacity: .5,
 		inherit: false
 	}
 });
+const TINTED_SURFACE_SATURATION = .2;
+const TINTED_SURFACE_TONE_OFFSET = 2;
 /**
 * Per-colored-theme overrides on top of `defaultTheme`:
 *   - `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
-*     default-theme `border` shape (`base: 'surface'`, lightness window) but
+*     default-theme `border` shape (`base: 'surface'`, tone window) but
 *     with higher saturation. Glaze's `extend({ colors })` redefines each
 *     listed color from scratch, so we restate the full definition here.
 */
 const TINTED_SURFACE_OVERRIDE = {
 	surface: {
-		lightness: 96,
-		saturation: .8
+		tone: 100 - TINTED_SURFACE_TONE_OFFSET,
+		saturation: TINTED_SURFACE_SATURATION
 	},
 	border: {
 		base: "surface",
-		lightness: ["-10", "-20"],
+		tone: ["-10", "-20"],
 		saturation: .5
+	},
+	"surface-text": {
+		base: "surface",
+		tone: `${TEXT_TONE - TINTED_SURFACE_TONE_OFFSET}`,
+		saturation: .25,
+		contrast: ["AA", "AAA"]
+	},
+	"surface-text-soft": {
+		base: "surface",
+		tone: `${TEXT_SOFT_TONE - TINTED_SURFACE_TONE_OFFSET}`,
+		saturation: .25,
+		contrast: ["AA", "AAA"]
+	},
+	"surface-text-soft-2": {
+		base: "surface",
+		tone: `${TEXT_SOFT2_TONE - TINTED_SURFACE_TONE_OFFSET}`,
+		saturation: .25,
+		contrast: ["AA", "AAA"]
 	}
 };
 const primaryTheme = defaultTheme.extend({ colors: TINTED_SURFACE_OVERRIDE });
@@ -372,68 +402,66 @@ const noteTheme = defaultTheme.extend({
 *     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, contrast-driven against the fixed
-*     dark `surface` so the disabled state is scheme-symmetric.
+*     brand-tinted disabled chip + label, positioned with relative tone
+*     deltas against the fixed dark `surface` so the disabled state is
+*     scheme-symmetric.
 */
 const specialTheme = glaze(PURPLE_HUE, SEED_SATURATION);
 specialTheme.colors({
 	surface: {
-		lightness: 12,
+		tone: 12,
 		saturation: .475,
 		mode: "fixed"
 	},
 	"accent-surface-text": {
-		lightness: 100,
+		tone: 100,
 		mode: "fixed"
 	},
 	"accent-surface": {
 		base: "accent-surface-text",
-		lightness: "-1",
-		contrast: [4.5, 7],
+		tone: "-49",
+		contrast: ["AA", "AAA"],
 		mode: "fixed"
 	},
 	"accent-surface-2": {
 		base: "accent-surface-text",
-		lightness: "-1",
-		contrast: [5, 8],
+		tone: "-52",
+		contrast: ["AA", "AAA"],
 		mode: "fixed"
 	},
 	"accent-surface-3": {
 		base: "accent-surface-text",
-		lightness: "-1",
-		contrast: [5.5, 9],
+		tone: "-55",
+		contrast: ["AA", "AAA"],
 		mode: "fixed"
 	},
 	"accent-surface-border": {
 		base: "accent-surface",
-		lightness: "+1",
-		contrast: [1.4, 1.8],
+		tone: "+13",
 		mode: "fixed"
 	},
 	"accent-surface-hover": {
 		base: "accent-surface-text",
-		lightness: "-1",
-		contrast: [6, 8.5],
+		tone: "-58",
+		contrast: ["AA", "AAA"],
 		mode: "fixed"
 	},
 	"accent-text": {
 		base: "accent-surface-text",
-		lightness: "-1",
-		contrast: [6, 8.5],
+		tone: "-58",
+		contrast: ["AA", "AAA"],
 		mode: "fixed"
 	},
 	"accent-disabled-surface": {
 		base: "surface",
-		lightness: "+1",
+		tone: "+4",
 		saturation: .5,
-		contrast: [1.4, 1.5],
 		mode: "fixed"
 	},
 	"accent-disabled-surface-text": {
 		base: "accent-disabled-surface",
-		lightness: "+1",
+		tone: "+18",
 		saturation: .4,
-		contrast: 1.51,
 		mode: "fixed"
 	}
 });
@@ -458,25 +486,40 @@ const palette = glaze.palette({
 	special: specialTheme
 });
 /**
-* All Glaze-generated color tokens as a tasty `Styles` map.
+* Resolve Glaze palette tokens against the **live** `glaze` global config.
 *
-* Keys use `#name` syntax; values are state maps:
-*   '#surface': { '': 'okhsl(...)', '@dark': 'okhsl(...)', '@hc': 'okhsl(...)' }
+* 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.
 *
-* Spread into `useGlobalStyles('body', tokens)` (already wired through
-* `src/components/GlobalStyles.tsx`).
+* 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"
+	});
+	return paletteTokensCache;
+}
+/**
+* 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).
 */
-const PALETTE_TOKENS = palette.tasty({ prefix: {
-	default: "",
-	primary: "primary-",
-	purple: "purple-",
-	success: "success-",
-	danger: "danger-",
-	warning: "warning-",
-	note: "note-",
-	special: "special-"
-} });
+const PALETTE_TOKENS = lazyStyles(getPaletteTokens);
 
 //#endregion
-export { PALETTE_TOKENS };
+export { PALETTE_TOKENS, getPaletteTokens };
 //# sourceMappingURL=palette.js.map