@cube-dev/ui-kit 0.0.0-canary-d8e2a5f → 0.0.0-canary-d03ae24

package/dist/icons/UserIcon.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-d8e2a5f | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-d03ae24 | Cube Dev Team */
 import { wrapIcon } from "./wrap-icon.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 

package/dist/icons/UserLockIcon.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-d8e2a5f | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-d03ae24 | Cube Dev Team */
 import { wrapIcon } from "./wrap-icon.js";
 import { jsx } from "react/jsx-runtime";
 

package/dist/icons/ViewIcon.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-d8e2a5f | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-d03ae24 | Cube Dev Team */
 import { wrapIcon } from "./wrap-icon.js";
 import { jsx } from "react/jsx-runtime";
 

package/dist/icons/WarningFilledIcon.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-d8e2a5f | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-d03ae24 | Cube Dev Team */
 import { wrapIcon } from "./wrap-icon.js";
 import { jsx } from "react/jsx-runtime";
 import { IconAlertTriangleFilled } from "@tabler/icons-react";

package/dist/icons/WarningIcon.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-d8e2a5f | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-d03ae24 | Cube Dev Team */
 import { wrapIcon } from "./wrap-icon.js";
 import { jsx } from "react/jsx-runtime";
 import { IconAlertTriangle } from "@tabler/icons-react";

package/dist/icons/wrap-icon.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-d8e2a5f | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-d03ae24 | Cube Dev Team */
 import { Icon } from "./Icon.js";
 import { jsx } from "react/jsx-runtime";
 

package/dist/index.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-d8e2a5f | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-d03ae24 | Cube Dev Team */
 import { extractStyles } from "./utils/styles.js";
 import { chain } from "./utils/react/chain.js";
 import { forwardRefWithGenerics } from "./utils/react/forwardRefWithGenerics.js";

package/dist/provider.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-d8e2a5f | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-d03ae24 | Cube Dev Team */
 import { EventBusProvider } from "./utils/react/useEventBus.js";
 import { defaultNavigationAdapter } from "./providers/navigationAdapter.default.js";
 import { createContext, useContext, useMemo } from "react";

package/dist/providers/TrackingProvider.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-d8e2a5f | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-d03ae24 | Cube Dev Team */
 import { createContext, useContext, useMemo } from "react";
 import { Fragment as Fragment$1, jsx } from "react/jsx-runtime";
 

package/dist/providers/navigationAdapter.default.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-d8e2a5f | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-d03ae24 | Cube Dev Team */
 //#region src/providers/navigationAdapter.default.ts
 /**
 * Converts a Path object to a string URL

package/dist/tokens/base.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-d8e2a5f | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-d03ae24 | Cube Dev Team */
 //#region src/tokens/base.ts
 /**
 * Base design system tokens.

package/dist/tokens/colors.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-d8e2a5f | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-d03ae24 | Cube Dev Team */
 import { PALETTE_TOKENS } from "./palette.js";
 
 //#region src/tokens/colors.ts
@@ -34,7 +34,6 @@ const LEGACY_ALIASES = {
 	"#light": "#surface-3",
 	"#dark-bg": "#surface-2",
 	"#clear": "transparent",
-	"#pink": "okhsl(5 100% 67%)",
 	"#primary": "#primary-accent-surface",
 	"#primary-text": "#primary-accent-text",
 	"#primary-text-soft": "#primary-accent-text-soft",

package/dist/tokens/colors.js.map

@@ -1 +1 @@
-{"version":3,"file":"colors.js","names":[],"sources":["../../src/tokens/colors.ts"],"sourcesContent":["import { PALETTE_TOKENS } from './palette';\n\nimport type { Styles } from '@tenphi/tasty';\n\n/**\n * Color tokens with `#` prefix for tasty color definitions.\n *\n * The base values come from the Glaze-generated palette (`palette.ts`):\n * `#surface`, `#surface-text*`, `#border`, `#focus`, `#disabled`, `#pink`,\n * `#shadow-*`, `#overlay`, the unprefixed `#accent-*` family, and the per-theme\n * `#primary-*` / `#purple-*` / `#success-*` / `#danger-*` / `#warning-*` /\n * `#note-*` families.\n *\n * Each Glaze token is a state map (`{ '': '...', '@dark': '...', '@hc': '...' }`),\n * giving us light, dark, and high-contrast variants for free. The `@dark` /\n * `@hc` predefined states are wired up globally in `src/components/Root.tsx`.\n *\n * The aliases below preserve backward compatibility with every legacy\n * `#name` used across components, stories, and tests. Each alias resolves\n * to a current Glaze token via tasty's `#token` reference syntax.\n */\n\nconst LEGACY_ALIASES: Styles = {\n  // ---- Neutral text scale (legacy `#dark*`) ----\n  '#text': '#surface-text-soft',\n  '#dark': '#surface-text',\n  '#dark-01': '#surface-text',\n  '#dark-02': '#surface-text-soft',\n  '#dark-03': '#surface-text-soft-2',\n  '#dark-04': '#placeholder',\n  '#dark-05': '#border',\n\n  // Fixed-mode counterpart to `#dark`. Resolves to the same L≈12 surface\n  // but uses Glaze `mode: 'fixed'` so it does NOT invert in dark schemes.\n  // Use this whenever the design intentionally pins a dark color regardless\n  // of scheme. Points at `#special-surface` (`mode: 'fixed'`, L=12),\n  // emitted by the standalone `specialTheme` in `palette.ts` — the canonical\n  // source of fixed-mode color tokens for `special`-variant components.\n  '#fixed-dark': '#special-surface',\n\n  // Fixed-mode counterpart to `#primary-text`. `#primary-text` is anchored\n  // to `surface` with `mode: 'auto'`, so it flips to a *light* purple in\n  // dark schemes (correct on body content, which also inverts). When the\n  // local fill is a fixed color instead (an always-white pill, etc.), the\n  // adaptive text loses contrast (light purple on white) in dark mode.\n  // Points at `#special-accent-text` (`mode: 'fixed'`, cr 6–8.5 vs fixed\n  // white) — a dark purple readable on a white surface that stays put\n  // across schemes.\n  '#fixed-primary-text': '#special-accent-text',\n\n  // ---- Misc neutral ----\n  '#minor': '#surface-text-soft.65',\n  '#shadow': '#shadow-md',\n  '#light': '#surface-3',\n  '#dark-bg': '#surface-2',\n  '#clear': 'transparent',\n\n  // Pink: independent hue, scheme-static (no Glaze adaptation).\n  '#pink': 'okhsl(5 100% 67%)',\n\n  // ---- Disabled state aliases ----\n  // `#disabled-surface` and `#disabled-surface-text` are emitted directly by\n  // the Glaze palette (`palette.ts`) as scheme-symmetric, contrast-driven\n  // tokens — no alias needed here. `#disabled` stays as a brand-tinted\n  // backwards-compat anchor for the per-theme `#<theme>-disabled` aliases below.\n\n  // ---- Primary / Purple legacy ----\n  '#primary': '#primary-accent-surface',\n  '#primary-text': '#primary-accent-text',\n  '#primary-text-soft': '#primary-accent-text-soft',\n  '#primary-bg': '#primary-surface',\n  '#primary-icon': '#primary-accent-icon',\n  '#primary-hover': '#primary-accent-surface-hover',\n  '#primary-desaturated': '#primary-accent-surface-2',\n  '#primary-disabled': '#disabled',\n\n  '#purple': '#purple-accent-surface',\n  '#purple-text': '#purple-accent-text',\n  '#purple-text-soft': '#purple-accent-text-soft',\n  '#purple-bg': '#purple-surface',\n  '#purple-icon': '#purple-accent-icon',\n  '#purple-hover': '#purple-accent-surface-hover',\n  '#purple-disabled': '#disabled',\n\n  // Purple scale (gradient/accent shades) — mapped to the accent-surface ramp.\n  '#purple-01': '#purple-accent-surface',\n  '#purple-02': '#purple-accent-surface-2',\n  '#purple-03': '#purple-accent-surface-3',\n  '#purple-04': '#purple-surface',\n\n  // ---- Danger ----\n  '#danger': '#danger-accent-surface',\n  '#danger-text': '#danger-accent-text',\n  '#danger-text-soft': '#danger-accent-text-soft',\n  '#danger-bg': '#danger-surface',\n  '#danger-icon': '#danger-accent-icon',\n  '#danger-hover': '#danger-accent-surface-hover',\n  '#danger-desaturated': '#danger-accent-surface-2',\n  '#danger-disabled': '#disabled',\n\n  // ---- Success ----\n  '#success': '#success-accent-surface',\n  '#success-text': '#success-accent-text',\n  '#success-text-soft': '#success-accent-text-soft',\n  '#success-bg': '#success-surface',\n  '#success-icon': '#success-accent-icon',\n  '#success-hover': '#success-accent-surface-hover',\n  '#success-desaturated': '#success-accent-surface-2',\n  '#success-disabled': '#disabled',\n\n  // ---- Warning ----\n  '#warning': '#warning-accent-surface',\n  '#warning-text': '#warning-accent-text',\n  '#warning-text-soft': '#warning-accent-text-soft',\n  '#warning-bg': '#warning-surface',\n  '#warning-icon': '#warning-accent-icon',\n  '#warning-hover': '#warning-accent-surface-hover',\n  '#warning-desaturated': '#warning-accent-surface-2',\n  '#warning-disabled': '#disabled',\n\n  // ---- Note ----\n  '#note': '#note-accent-surface',\n  '#note-text': '#note-accent-text',\n  '#note-text-soft': '#note-accent-text-soft',\n  '#note-bg': '#note-surface',\n  '#note-icon': '#note-accent-icon',\n  '#note-hover': '#note-accent-surface-hover',\n  '#note-desaturated': '#note-accent-surface-2',\n  '#note-disabled': '#disabled',\n};\n\n/**\n * Combined color token map: Glaze-generated palette + legacy aliases.\n *\n * `#white` and `#black` are intentionally omitted — they are built-in\n * tasty named colors and resolve automatically.\n */\nexport const COLOR_TOKENS: Styles = {\n  ...PALETTE_TOKENS,\n  ...LEGACY_ALIASES,\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAsBA,MAAM,iBAAyB;CAE7B,SAAS;CACT,SAAS;CACT,YAAY;CACZ,YAAY;CACZ,YAAY;CACZ,YAAY;CACZ,YAAY;CAQZ,eAAe;CAUf,uBAAuB;CAGvB,UAAU;CACV,WAAW;CACX,UAAU;CACV,YAAY;CACZ,UAAU;CAGV,SAAS;CAST,YAAY;CACZ,iBAAiB;CACjB,sBAAsB;CACtB,eAAe;CACf,iBAAiB;CACjB,kBAAkB;CAClB,wBAAwB;CACxB,qBAAqB;CAErB,WAAW;CACX,gBAAgB;CAChB,qBAAqB;CACrB,cAAc;CACd,gBAAgB;CAChB,iBAAiB;CACjB,oBAAoB;CAGpB,cAAc;CACd,cAAc;CACd,cAAc;CACd,cAAc;CAGd,WAAW;CACX,gBAAgB;CAChB,qBAAqB;CACrB,cAAc;CACd,gBAAgB;CAChB,iBAAiB;CACjB,uBAAuB;CACvB,oBAAoB;CAGpB,YAAY;CACZ,iBAAiB;CACjB,sBAAsB;CACtB,eAAe;CACf,iBAAiB;CACjB,kBAAkB;CAClB,wBAAwB;CACxB,qBAAqB;CAGrB,YAAY;CACZ,iBAAiB;CACjB,sBAAsB;CACtB,eAAe;CACf,iBAAiB;CACjB,kBAAkB;CAClB,wBAAwB;CACxB,qBAAqB;CAGrB,SAAS;CACT,cAAc;CACd,mBAAmB;CACnB,YAAY;CACZ,cAAc;CACd,eAAe;CACf,qBAAqB;CACrB,kBAAkB;CACnB;;;;;;;AAQD,MAAa,eAAuB;CAClC,GAAG;CACH,GAAG;CACJ"}
+{"version":3,"file":"colors.js","names":[],"sources":["../../src/tokens/colors.ts"],"sourcesContent":["import { PALETTE_TOKENS } from './palette';\n\nimport type { Styles } from '@tenphi/tasty';\n\n/**\n * Color tokens with `#` prefix for tasty color definitions.\n *\n * The base values come from the Glaze-generated palette (`palette.ts`):\n * `#surface`, `#surface-text*`, `#border`, `#focus`, `#disabled`, `#pink`,\n * `#shadow-*`, `#overlay`, the unprefixed `#accent-*` family, and the per-theme\n * `#primary-*` / `#purple-*` / `#success-*` / `#danger-*` / `#warning-*` /\n * `#note-*` families.\n *\n * Each Glaze token is a state map (`{ '': '...', '@dark': '...', '@hc': '...' }`),\n * giving us light, dark, and high-contrast variants for free. The `@dark` /\n * `@hc` predefined states are wired up globally in `src/components/Root.tsx`.\n *\n * The aliases below preserve backward compatibility with every legacy\n * `#name` used across components, stories, and tests. Each alias resolves\n * to a current Glaze token via tasty's `#token` reference syntax.\n */\n\nconst LEGACY_ALIASES: Styles = {\n  // ---- Neutral text scale (legacy `#dark*`) ----\n  '#text': '#surface-text-soft',\n  '#dark': '#surface-text',\n  '#dark-01': '#surface-text',\n  '#dark-02': '#surface-text-soft',\n  '#dark-03': '#surface-text-soft-2',\n  '#dark-04': '#placeholder',\n  '#dark-05': '#border',\n\n  // Fixed-mode counterpart to `#dark`. Resolves to the same L≈12 surface\n  // but uses Glaze `mode: 'fixed'` so it does NOT invert in dark schemes.\n  // Use this whenever the design intentionally pins a dark color regardless\n  // of scheme. Points at `#special-surface` (`mode: 'fixed'`, L=12),\n  // emitted by the standalone `specialTheme` in `palette.ts` — the canonical\n  // source of fixed-mode color tokens for `special`-variant components.\n  '#fixed-dark': '#special-surface',\n\n  // Fixed-mode counterpart to `#primary-text`. `#primary-text` is anchored\n  // to `surface` with `mode: 'auto'`, so it flips to a *light* purple in\n  // dark schemes (correct on body content, which also inverts). When the\n  // local fill is a fixed color instead (an always-white pill, etc.), the\n  // adaptive text loses contrast (light purple on white) in dark mode.\n  // Points at `#special-accent-text` (`mode: 'fixed'`, cr 6–8.5 vs fixed\n  // white) — a dark purple readable on a white surface that stays put\n  // across schemes.\n  '#fixed-primary-text': '#special-accent-text',\n\n  // ---- Misc neutral ----\n  '#minor': '#surface-text-soft.65',\n  '#shadow': '#shadow-md',\n  '#light': '#surface-3',\n  '#dark-bg': '#surface-2',\n  '#clear': 'transparent',\n\n  // ---- Disabled state aliases ----\n  // `#disabled-surface` and `#disabled-surface-text` are emitted directly by\n  // the Glaze palette (`palette.ts`) as scheme-symmetric, contrast-driven\n  // tokens — no alias needed here. `#disabled` stays as a brand-tinted\n  // backwards-compat anchor for the per-theme `#<theme>-disabled` aliases below.\n\n  // ---- Primary / Purple legacy ----\n  '#primary': '#primary-accent-surface',\n  '#primary-text': '#primary-accent-text',\n  '#primary-text-soft': '#primary-accent-text-soft',\n  '#primary-bg': '#primary-surface',\n  '#primary-icon': '#primary-accent-icon',\n  '#primary-hover': '#primary-accent-surface-hover',\n  '#primary-desaturated': '#primary-accent-surface-2',\n  '#primary-disabled': '#disabled',\n\n  '#purple': '#purple-accent-surface',\n  '#purple-text': '#purple-accent-text',\n  '#purple-text-soft': '#purple-accent-text-soft',\n  '#purple-bg': '#purple-surface',\n  '#purple-icon': '#purple-accent-icon',\n  '#purple-hover': '#purple-accent-surface-hover',\n  '#purple-disabled': '#disabled',\n\n  // Purple scale (gradient/accent shades) — mapped to the accent-surface ramp.\n  '#purple-01': '#purple-accent-surface',\n  '#purple-02': '#purple-accent-surface-2',\n  '#purple-03': '#purple-accent-surface-3',\n  '#purple-04': '#purple-surface',\n\n  // ---- Danger ----\n  '#danger': '#danger-accent-surface',\n  '#danger-text': '#danger-accent-text',\n  '#danger-text-soft': '#danger-accent-text-soft',\n  '#danger-bg': '#danger-surface',\n  '#danger-icon': '#danger-accent-icon',\n  '#danger-hover': '#danger-accent-surface-hover',\n  '#danger-desaturated': '#danger-accent-surface-2',\n  '#danger-disabled': '#disabled',\n\n  // ---- Success ----\n  '#success': '#success-accent-surface',\n  '#success-text': '#success-accent-text',\n  '#success-text-soft': '#success-accent-text-soft',\n  '#success-bg': '#success-surface',\n  '#success-icon': '#success-accent-icon',\n  '#success-hover': '#success-accent-surface-hover',\n  '#success-desaturated': '#success-accent-surface-2',\n  '#success-disabled': '#disabled',\n\n  // ---- Warning ----\n  '#warning': '#warning-accent-surface',\n  '#warning-text': '#warning-accent-text',\n  '#warning-text-soft': '#warning-accent-text-soft',\n  '#warning-bg': '#warning-surface',\n  '#warning-icon': '#warning-accent-icon',\n  '#warning-hover': '#warning-accent-surface-hover',\n  '#warning-desaturated': '#warning-accent-surface-2',\n  '#warning-disabled': '#disabled',\n\n  // ---- Note ----\n  '#note': '#note-accent-surface',\n  '#note-text': '#note-accent-text',\n  '#note-text-soft': '#note-accent-text-soft',\n  '#note-bg': '#note-surface',\n  '#note-icon': '#note-accent-icon',\n  '#note-hover': '#note-accent-surface-hover',\n  '#note-desaturated': '#note-accent-surface-2',\n  '#note-disabled': '#disabled',\n};\n\n/**\n * Combined color token map: Glaze-generated palette + legacy aliases.\n *\n * `#white` and `#black` are intentionally omitted — they are built-in\n * tasty named colors and resolve automatically.\n */\nexport const COLOR_TOKENS: Styles = {\n  ...PALETTE_TOKENS,\n  ...LEGACY_ALIASES,\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAsBA,MAAM,iBAAyB;CAE7B,SAAS;CACT,SAAS;CACT,YAAY;CACZ,YAAY;CACZ,YAAY;CACZ,YAAY;CACZ,YAAY;CAQZ,eAAe;CAUf,uBAAuB;CAGvB,UAAU;CACV,WAAW;CACX,UAAU;CACV,YAAY;CACZ,UAAU;CASV,YAAY;CACZ,iBAAiB;CACjB,sBAAsB;CACtB,eAAe;CACf,iBAAiB;CACjB,kBAAkB;CAClB,wBAAwB;CACxB,qBAAqB;CAErB,WAAW;CACX,gBAAgB;CAChB,qBAAqB;CACrB,cAAc;CACd,gBAAgB;CAChB,iBAAiB;CACjB,oBAAoB;CAGpB,cAAc;CACd,cAAc;CACd,cAAc;CACd,cAAc;CAGd,WAAW;CACX,gBAAgB;CAChB,qBAAqB;CACrB,cAAc;CACd,gBAAgB;CAChB,iBAAiB;CACjB,uBAAuB;CACvB,oBAAoB;CAGpB,YAAY;CACZ,iBAAiB;CACjB,sBAAsB;CACtB,eAAe;CACf,iBAAiB;CACjB,kBAAkB;CAClB,wBAAwB;CACxB,qBAAqB;CAGrB,YAAY;CACZ,iBAAiB;CACjB,sBAAsB;CACtB,eAAe;CACf,iBAAiB;CACjB,kBAAkB;CAClB,wBAAwB;CACxB,qBAAqB;CAGrB,SAAS;CACT,cAAc;CACd,mBAAmB;CACnB,YAAY;CACZ,cAAc;CACd,eAAe;CACf,qBAAqB;CACrB,kBAAkB;CACnB;;;;;;;AAQD,MAAa,eAAuB;CAClC,GAAG;CACH,GAAG;CACJ"}

package/dist/tokens/index.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-d8e2a5f | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-d03ae24 | Cube Dev Team */
 import { BASE_TOKENS } from "./base.js";
 import { COLOR_TOKENS } from "./colors.js";
 import { LAYOUT_TOKENS } from "./layout.js";

package/dist/tokens/layout.js

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

package/dist/tokens/palette.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-d8e2a5f | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-d03ae24 | Cube Dev Team */
 import { glaze } from "@tenphi/glaze";
 
 //#region src/tokens/palette.ts
@@ -8,7 +8,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 +20,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",
@@ -33,254 +38,248 @@ glaze.configure({
 const defaultTheme = glaze(PURPLE_HUE, SEED_SATURATION);
 defaultTheme.colors({
 	surface: {
-		lightness: 100,
+		tone: 100,
 		saturation: .11
 	},
 	"surface-2": {
 		base: "surface",
-		lightness: "-2",
+		tone: "-2",
 		saturation: .15,
 		inherit: false
 	},
 	"surface-3": {
 		base: "surface",
-		lightness: "-4",
+		tone: "-4",
 		saturation: .19,
 		inherit: false
 	},
 	"surface-4": {
 		base: "surface",
-		lightness: "-6",
+		tone: "-6",
 		saturation: .2,
 		inherit: false
 	},
 	"surface-text": {
 		base: "surface",
-		lightness: 2,
-		saturation: .475
+		tone: `${TEXT_TONE}`,
+		saturation: .475,
+		contrast: ["AA", "AAA"]
 	},
 	"surface-text-soft": {
 		base: "surface",
-		lightness: "-1",
+		tone: `${TEXT_SOFT_TONE}`,
 		saturation: .375,
-		contrast: [9, 11],
+		contrast: ["AA", "AAA"],
 		inherit: false
 	},
 	"surface-text-soft-2": {
 		base: "surface",
-		lightness: "-1",
+		tone: `${TEXT_SOFT2_TONE}`,
 		saturation: .24,
-		contrast: [4.5, 5.5],
+		contrast: ["AA", "AAA"],
 		inherit: false
 	},
 	"surface-2-text": {
 		base: "surface-2",
-		lightness: 2,
+		tone: `${TEXT_TONE + SURFACE_2_TEXT_OFFSET}`,
 		saturation: .475,
+		contrast: ["AA", "AAA"],
 		inherit: false
 	},
 	"surface-2-text-soft": {
 		base: "surface-2",
-		lightness: "-1",
+		tone: `${TEXT_SOFT_TONE + SURFACE_2_TEXT_OFFSET}`,
 		saturation: .375,
-		contrast: [9, 11],
+		contrast: ["AA", "AAA"],
 		inherit: false
 	},
 	"surface-3-text": {
 		base: "surface-3",
-		lightness: 2,
+		tone: `${TEXT_TONE + SURFACE_3_TEXT_OFFSET}`,
 		saturation: .475,
+		contrast: ["AA", "AAA"],
 		inherit: false
 	},
 	"surface-3-text-soft": {
 		base: "surface-3",
-		lightness: "-1",
+		tone: `${TEXT_SOFT_TONE + SURFACE_3_TEXT_OFFSET}`,
 		saturation: .375,
-		contrast: [9, 11],
+		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": {
 		base: "surface",
-		lightness: "-1",
+		tone: "-61",
 		saturation: 1,
-		contrast: [6.4, 10]
+		contrast: ["AA", "AAA"]
 	},
 	"accent-text-soft": {
 		base: "surface",
-		lightness: "-1",
+		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",
-		saturation: .5,
-		contrast: [1.4, 1.5]
+		tone: "-13",
+		saturation: .5
 	},
 	"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,7 +304,7 @@ defaultTheme.colors({
 		inherit: false
 	},
 	overlay: {
-		lightness: 10,
+		tone: 10,
 		opacity: .5,
 		inherit: false
 	}
@@ -315,18 +314,18 @@ defaultTheme.colors({
 *   - `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,
+		tone: 96,
 		saturation: .8
 	},
 	border: {
 		base: "surface",
-		lightness: ["-10", "-20"],
+		tone: ["-10", "-20"],
 		saturation: .5
 	}
 };
@@ -372,68 +371,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"
 	}
 });
@@ -461,21 +458,24 @@ const palette = glaze.palette({
 * All Glaze-generated color tokens as a tasty `Styles` map.
 *
 * Keys use `#name` syntax; values are state maps:
-*   '#surface': { '': 'okhsl(...)', '@dark': 'okhsl(...)', '@hc': 'okhsl(...)' }
+*   '#surface': { '': 'oklch(...)', '@dark': 'oklch(...)', '@hc': 'oklch(...)' }
 *
 * Spread into `useGlobalStyles('body', tokens)` (already wired through
 * `src/components/GlobalStyles.tsx`).
 */
-const PALETTE_TOKENS = palette.tasty({ prefix: {
-	default: "",
-	primary: "primary-",
-	purple: "purple-",
-	success: "success-",
-	danger: "danger-",
-	warning: "warning-",
-	note: "note-",
-	special: "special-"
-} });
+const PALETTE_TOKENS = palette.tasty({
+	prefix: {
+		default: "",
+		primary: "primary-",
+		purple: "purple-",
+		success: "success-",
+		danger: "danger-",
+		warning: "warning-",
+		note: "note-",
+		special: "special-"
+	},
+	format: "oklch"
+});
 
 //#endregion
 export { PALETTE_TOKENS };