@cube-dev/ui-kit 0.0.0-canary-9b1eabc → 0.0.0-canary-a296584

package/dist/utils/promise.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-9b1eabc | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-a296584 | Cube Dev Team */
 //#region src/utils/promise.ts
 function timeout(ms = 30) {
 	return new Promise((resolve) => {

package/dist/utils/raf.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-9b1eabc | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-a296584 | Cube Dev Team */
 //#region src/utils/raf.ts
 /**
 * Chains N requestAnimationFrame calls and returns a cancel function.

package/dist/utils/random.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-9b1eabc | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-a296584 | Cube Dev Team */
 //#region src/utils/random.ts
 function random(min, max) {
 	const realMin = min < max ? min : max;

package/dist/utils/range.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-9b1eabc | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-a296584 | Cube Dev Team */
 //#region src/utils/range.ts
 function range(count) {
 	return Array.from({ length: count }, (_, i) => i);

package/dist/utils/react/RenderCache.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-9b1eabc | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-a296584 | Cube Dev Team */
 import { useRef } from "react";
 import { Fragment as Fragment$1, jsx } from "react/jsx-runtime";
 //#region src/utils/react/RenderCache.tsx

package/dist/utils/react/Slots.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-9b1eabc | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-a296584 | Cube Dev Team */
 import { mergeProps } from "./mergeProps.js";
 import { c } from "react/compiler-runtime";
 import { Children, cloneElement, createContext, useContext } from "react";

package/dist/utils/react/chain.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-9b1eabc | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-a296584 | Cube Dev Team */
 //#region src/utils/react/chain.ts
 /**
 * Calls all functions in the order they were chained with the same arguments.

package/dist/utils/react/disabledProps.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-9b1eabc | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-a296584 | Cube Dev Team */
 //#region src/utils/react/disabledProps.ts
 /**
 * Tags where `disabled` is a real HTML attribute. Browsers refuse to dispatch

package/dist/utils/react/forwardRefWithGenerics.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-9b1eabc | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-a296584 | Cube Dev Team */
 //#region src/utils/react/forwardRefWithGenerics.tsx
 /**
 * @deprecated Declare a ref prop on a generic component, or preserve an

package/dist/utils/react/index.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-9b1eabc | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-a296584 | Cube Dev Team */
 import { chain } from "./chain.js";
 import { useLayoutEffect } from "./useLayoutEffect.js";
 import { mergeProps } from "./mergeProps.js";

package/dist/utils/react/interactions.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-9b1eabc | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-a296584 | Cube Dev Team */
 import { useLayoutEffect as useLayoutEffect$1 } from "./useLayoutEffect.js";
 import { c } from "react/compiler-runtime";
 import { useRef, useState } from "react";

package/dist/utils/react/isTextOnly.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-9b1eabc | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-a296584 | Cube Dev Team */
 import { Children, isValidElement } from "react";
 //#region src/utils/react/isTextOnly.ts
 function isTextOnly(children) {

package/dist/utils/react/mapProps.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-9b1eabc | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-a296584 | Cube Dev Team */
 //#region src/utils/react/mapProps.ts
 /** Converts AriaButtonProps to CubeButtonProps */
 function ariaToCubeButtonProps(props) {

package/dist/utils/react/mergeProps.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-9b1eabc | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-a296584 | Cube Dev Team */
 import { chain } from "./chain.js";
 import { mergeIds } from "./useId.js";
 import { mergeStyles } from "@tenphi/tasty";

package/dist/utils/react/nullableValue.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-9b1eabc | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-a296584 | Cube Dev Team */
 //#region src/utils/react/nullableValue.ts
 function castNullableStringValue(props, emptyValue = "") {
 	return castNullableField(props, ["value", "defaultValue"], "string", (v) => String(v), emptyValue);

package/dist/utils/react/overlayKeyPropagation.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-9b1eabc | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-a296584 | Cube Dev Team */
 //#region src/utils/react/overlayKeyPropagation.ts
 /**
 * Keys whose final handling belongs to the overlay around a control, not to

package/dist/utils/react/programmaticFocus.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-9b1eabc | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-a296584 | Cube Dev Team */
 //#region src/utils/react/programmaticFocus.ts
 /**
 * Telling focus the user moved from focus a component moved for them.

package/dist/utils/react/resolveIcon.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-9b1eabc | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-a296584 | Cube Dev Team */
 //#region src/utils/react/resolveIcon.ts
 /**
 * Resolves a dynamic icon prop to its content and slot state.

package/dist/utils/react/sharedStore.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-9b1eabc | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-a296584 | Cube Dev Team */
 import { useEvent } from "../../_internal/hooks/use-event.js";
 import { isDevEnv } from "../is-dev-env.js";
 import { c } from "react/compiler-runtime";

package/dist/utils/react/useBufferedValue.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-9b1eabc | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-a296584 | Cube Dev Team */
 import { useLayoutEffect as useLayoutEffect$1 } from "./useLayoutEffect.js";
 import { useCallback, useRef, useState } from "react";
 //#region src/utils/react/useBufferedValue.ts

package/dist/utils/react/useCombinedRefs.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-9b1eabc | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-a296584 | Cube Dev Team */
 import { c } from "react/compiler-runtime";
 import { useEffect, useRef } from "react";
 //#region src/utils/react/useCombinedRefs.ts

package/dist/utils/react/useControlledFocusVisible.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-9b1eabc | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-a296584 | Cube Dev Team */
 import { createSharedStore } from "./sharedStore.js";
 import { c } from "react/compiler-runtime";
 import { useEffect } from "react";

package/dist/utils/react/useEventBus.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-9b1eabc | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-a296584 | Cube Dev Team */
 import { c } from "react/compiler-runtime";
 import React, { createContext, useCallback, useContext, useEffect, useMemo, useRef } from "react";
 //#region src/utils/react/useEventBus.ts

package/dist/utils/react/useId.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-9b1eabc | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-a296584 | Cube Dev Team */
 import { useLayoutEffect as useLayoutEffect$1 } from "./useLayoutEffect.js";
 import "react/compiler-runtime";
 import { useEffect, useRef, useState } from "react";

package/dist/utils/react/useIsDarwin.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-9b1eabc | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-a296584 | Cube Dev Team */
 import { c } from "react/compiler-runtime";
 import { useEffect, useState } from "react";
 //#region src/utils/react/useIsDarwin.ts

package/dist/utils/react/useKeySymbols.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-9b1eabc | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-a296584 | Cube Dev Team */
 import { useIsDarwin } from "./useIsDarwin.js";
 import { c } from "react/compiler-runtime";
 //#region src/utils/react/useKeySymbols.ts

package/dist/utils/react/useLayoutEffect.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-9b1eabc | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-a296584 | Cube Dev Team */
 import * as React$1 from "react";
 //#region src/utils/react/useLayoutEffect.tsx
 const useLayoutEffect$1 = typeof window !== "undefined" ? React$1.useLayoutEffect : React$1.useEffect;

package/dist/utils/react/useLocalStorage.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-9b1eabc | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-a296584 | Cube Dev Team */
 import { useEvent } from "../../_internal/hooks/use-event.js";
 import { c } from "react/compiler-runtime";
 import { useSyncExternalStore } from "react";

package/dist/utils/react/useMergeStyles.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-9b1eabc | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-a296584 | Cube Dev Team */
 import { mergeStyles } from "@tenphi/tasty";
 import { useMemo } from "react";
 //#region src/utils/react/useMergeStyles.ts

package/dist/utils/react/useOverlayEscapeGuard.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-9b1eabc | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-a296584 | Cube Dev Team */
 import { useEvent } from "../../_internal/hooks/use-event.js";
 import { c } from "react/compiler-runtime";
 import { getEventTarget, nodeContains } from "@react-aria/utils";

package/dist/utils/react/usePopoverSync.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-9b1eabc | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-a296584 | Cube Dev Team */
 import { EventBusContext, useEventBus } from "./useEventBus.js";
 import { c } from "react/compiler-runtime";
 import { useContext, useEffect, useEffectEvent, useRef } from "react";

package/dist/utils/react/useQaProps.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-9b1eabc | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-a296584 | Cube Dev Team */
 //#region src/utils/react/useQaProps.ts
 /**
 * Processes QA props.

package/dist/utils/react/useScheme.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-9b1eabc | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-a296584 | Cube Dev Team */
 import { useSyncExternalStore } from "react";
 //#region src/utils/react/useScheme.ts
 /**

package/dist/utils/react/useViewportSize.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-9b1eabc | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-a296584 | Cube Dev Team */
 import { c } from "react/compiler-runtime";
 import { useEffect, useState } from "react";
 //#region src/utils/react/useViewportSize.ts

package/dist/utils/react/wrapNodeIfPlain.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-9b1eabc | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-a296584 | Cube Dev Team */
 import { Fragment, isValidElement } from "react";
 //#region src/utils/react/wrapNodeIfPlain.ts
 function wrapNodeIfPlain(children, render) {

package/dist/utils/selection.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-9b1eabc | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-a296584 | Cube Dev Team */
 //#region src/utils/selection.ts
 /**
 * Deduplicate/toggle keys in a selection: if a key appears twice it is

package/dist/utils/styles.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-9b1eabc | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-a296584 | Cube Dev Team */
 import { isSelector, mergeStyles } from "@tenphi/tasty";
 //#region src/utils/styles.ts
 function isRecord(value) {

package/dist/utils/tree.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-9b1eabc | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-a296584 | Cube Dev Team */
 //#region src/utils/tree.ts
 function toFlatTree(tree, includingFolders) {
 	return tree.reduce((result, node) => {

package/dist/utils/warnings.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-9b1eabc | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-a296584 | Cube Dev Team */
 import { isDevEnvOrTest } from "./is-dev-env.js";
 //#region src/utils/warnings.ts
 const SUGGESTED_PROP_MAP = {

package/dist/version.js

@@ -1,7 +1,7 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-9b1eabc | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-a296584 | Cube Dev Team */
 //#region src/version.ts
-const VERSION = "0.0.0-canary-9b1eabc";
-const TASTY_VERSION = "3.11.2";
+const VERSION = "0.0.0-canary-a296584";
+const TASTY_VERSION = "3.12.0";
 if (typeof window !== "undefined") {
 	const version = VERSION;
 	const tastyVersion = TASTY_VERSION;

package/docs/tasty/ai-agents.md

@@ -78,6 +78,7 @@ The last row goes the other way — longhands over the shorthand — because `fl
 | `$$name(…)`           | call a CSS `@function` declared via `@function`, `useFunction`, or config                          |
 
 - ❌ `#f5f5f5`, `rgb(0 0 0)`, `oklch(…)`, `okhsl(…)`, `okhst(…)`, `red` → ✅ `#surface` (add the token to the config if it doesn't exist).
+- CSS system colors (`Canvas`, `CanvasText`, `Highlight`, `ButtonText`, `GrayText`, …) are the exception, for `forced-colors` styles: hold one in a token (`'#forced-border': 'CanvasText'`) or write it under a `@media(forced-colors: active)` state.
 - ❌ `var(--gap)` → ✅ `$gap` · ❌ `$accent-color` → ✅ `#accent` · ❌ `transparent` → ✅ `#clear` · ❌ `currentColor` → ✅ `#current`.
 - `#clear` is a default replace token for `transparent`, so `#clear.5` and `#clear.$opacity` stay transparent. It does not read `--clear-color`; override it through `replaceTokens` if needed.
 - A `$name` must be declared as a `'$name': value` key in the same styles object, or in the config.

package/docs/tasty/configuration.md

@@ -212,9 +212,9 @@ useLayoutEffect(() => {
 A `#name` token's value used to be rewritten into a configured color space, so
 `#brand: '#ff8800'` declared `--brand-color: oklch(0.75 0.16 55)`. That existed
 to serve the opacity suffix, which needed numeric channels to write an alpha
-into. Opacity now uses CSS relative color syntax —
-`oklch(from var(--brand-color) l c h / .5)` — which has the browser read the
-channels, so there is nothing left for the setting to decide.
+into. Opacity now mixes the token with `transparent` —
+`color-mix(in oklab, var(--brand-color) 50%, transparent)` — which the browser
+resolves against any color, so there is nothing left for the setting to decide.
 
 A color is emitted exactly as authored:
 
@@ -235,9 +235,10 @@ background: oklch(from var(--brand-color) calc(l * 1.2) c h);
 ```
 
 This works on any `<color>`, including the ones no build-time conversion could
-have evaluated — and it is what the [opacity suffix](dsl.md#color-tokens--opacity)
-itself uses. Its space is always `oklch`, which is unbounded, so a wide-gamut
-color survives a round trip a narrower space would clamp.
+have evaluated, and `oklch` is unbounded, so a wide-gamut color survives a round
+trip a narrower space would clamp. Relative color syntax is Baseline 2024 (Chrome
+125, Firefox 128, Safari 18), so the [opacity suffix](dsl.md#color-tokens--opacity)
+uses the widely available `color-mix()` instead.
 
 ### Migrating off `colorSpace`
 
@@ -270,14 +271,15 @@ color: oklch(var(--brand-color-oklch) / 0.5);
 background: oklch(var(--brand-color-oklch));
 
 /* after */
-color: oklch(from var(--brand-color) l c h / 0.5);
+color: color-mix(in oklab, var(--brand-color) 50%, transparent);
 background: var(--brand-color);
 ```
 
 The replacement is strictly more capable — the companion could only be
-decomposed for a color the engine could evaluate at build time, while relative
-color syntax works on every `<color>`, including a `color-mix()`, a
-`light-dark()`, and a variable Tasty never defined.
+decomposed for a color the engine could evaluate at build time, while
+`color-mix()` works on every `<color>`, including a `color-mix()`, a
+`light-dark()`, and a variable Tasty never defined. It is also what
+`#brand.5` emits.
 
 ---
 

package/docs/tasty/dsl.md

@@ -144,7 +144,7 @@ Keep conditions such as `:last-child` out of `$` and write them as `@own(:last-c
 Named color prefixed with `#` that maps to CSS custom properties. Supports opacity with `.N` suffix:
 
 ```jsx
-fill: '#purple.5'; // → oklch(from var(--purple-color) l c h / .5)
+fill: '#purple.5'; // → color-mix(in oklab, var(--purple-color) 50%, transparent)
 ```
 
 ### Modifier
@@ -173,18 +173,17 @@ color: '(#primary, #secondary)',  // Fallback syntax
 
 `#white`, `#black`, `#border`, and `#outline` are registered by default (see [Default properties](#default-properties)), and `#clear` is a built-in alias for `transparent` (see [below](#clear-is-transparent)), so they work before you define any tokens.
 
-A name that is also a hex color is read as a token with the literal as its fallback, in every color style: `color: '#ddd'` emits `var(--ddd-color, #ddd)`, and `#ddd.5` emits `oklch(from var(--ddd-color, #ddd) l c h / .5)`. A `#ddd` token, if you define one, wins over the literal.
+A name that is also a hex color is read as a token with the literal as its fallback, in every color style: `color: '#ddd'` emits `var(--ddd-color, #ddd)`, and `#ddd.5` emits `color-mix(in oklab, var(--ddd-color, #ddd) 50%, transparent)`. A `#ddd` token, if you define one, wins over the literal.
 
-The suffix sets the alpha on the token's color with CSS relative color syntax:
+The suffix fades the token's color by mixing it with `transparent`:
 
 ```jsx
 fill: '#purple.5';
-// → oklch(from var(--purple-color) l c h / .5)
+// → color-mix(in oklab, var(--purple-color) 50%, transparent)
 ```
 
-The channels are copied over and the alpha slot is written, which asks nothing of
-the color beyond _being_ a color. That means the suffix works on every one of
-these:
+The mix asks nothing of the color beyond _being_ a color. That means the suffix
+works on every one of these:
 
 - a token holding a `color-mix()`, a `light-dark()`, or a `color()` in a space
   Tasty cannot convert — none of which have channels to decompose
@@ -192,13 +191,18 @@ these:
 - a `--name-color` variable declared in your own CSS, with no Tasty token
   definition behind it
 
-Two properties follow from writing the alpha slot rather than compositing:
+`color-mix()` is Baseline widely available (Chrome 111, Firefox 113, Safari
+16.2). Two properties follow from mixing rather than writing an alpha channel:
 
-- **Alpha is replaced, not multiplied.** A token holding `rgb(255 0 0 / .8)`
-  faded to `.5` is alpha `.5`, not `.4`.
-- **The alpha may be a number or a percentage.** `#purple.$fade` emits
-  `/ var(--fade)` unchanged, so it works whether `$fade` holds `.5` or `50%` —
-  which is what `--*-opacity` properties are registered to accept.
+- **Alpha composes.** The mix is premultiplied, so a color that is already
+  translucent is faded further: a token holding `rgb(255 0 0 / .8)` faded to
+  `.5` is alpha `.4`. An opaque token — the usual case — ends at exactly the
+  suffix. System colors are whatever the platform draws, and some are
+  translucent: Chrome and Safari on macOS give `Highlight` an alpha of `.6`, so
+  a token holding it faded to `.5` ends at `.3` there.
+- **A `$prop` alpha must be a number.** `#purple.$fade` emits
+  `calc(var(--fade) * 100%)`, because a mix percentage cannot be a `<number>`,
+  so `$fade` has to hold `.5`, not `50%`.
 
 ### `#clear` is transparent
 
@@ -232,42 +236,23 @@ A color that already reads the color it inherits — `#current`, a `#current` fa
 — is not published into it: resolving such a value a second time at a descendant
 would fade it twice.
 
-One case needs the wider floor to be considered. A token _defined_ as `#current`
-and then faded gives relative color syntax a `currentcolor` origin, which Safari
-supports only from 18:
+### `#current` fades compose
 
-```jsx
-{ '#ink': '#current', fill: '#ink.5' }
-// --ink-color: currentcolor
-// fill: oklch(from currentcolor l c h / .5)  → Chrome, Firefox, Safari 18+
-```
-
-Put the fade in the token instead — `{ '#ink': '#current.5' }` — and it goes
-through `color-mix()`, which works from Safari 16.2 and composes like every other
-`#current` fade.
-
-### `#current` composes instead
-
-`#current` composes alpha, and the difference is deliberate. A token _names_
-a color, so fading it sets its alpha. `currentcolor` is the color an element
-**inherits**, which an ancestor may already have faded — `#current.4` means "40%
-of what reaches me":
+`currentcolor` is the color an element **inherits**, which an ancestor may
+already have faded, so `#current.4` means "40% of what reaches me":
 
 ```jsx
 fill: '#current.4';
 // → color-mix(in oklab, currentcolor 40%, transparent)
 ```
 
-So a `#current` fade nested inside another one composes: a label at `#current.4`
+A `#current` fade nested inside another one composes: a label at `#current.4`
 with a fill of `#current.18` under it lands at `.072`. Color ramps built on
-`#current` depend on that — replacing would double the opacity of every nested
-step. Because a `color-mix()` percentage cannot be a `<number>`, an opacity
-custom property used as `#current.$fade` must hold a unitless number; a token
-accepts either form.
-
-Token fades always use `oklch(from …)`: it is unbounded, so a wide-gamut color
-survives a round trip that a gamut-limited space would clamp. `#current` fades
-mix `in oklab`. Nothing configures either — see
+`#current` depend on that.
+
+Fades always mix `in oklab`: it is unbounded, so a wide-gamut color is not
+clamped, and rectangular, so there is no hue to interpolate against
+`transparent`. Nothing configures it — see
 [Color space](configuration.md#color-space).
 
 ---
@@ -319,9 +304,38 @@ configure({
 });
 
 fill: '#solid.5'; // → hsl(220 90% 50% / .5)
-fill: '#adaptive.5'; // → oklch(from light-dark(…) l c h / .5)
+fill: '#adaptive.5'; // → color-mix(in oklab, light-dark(…) 50%, transparent)
 ```
 
+### Color keywords
+
+CSS named colors (`rebeccapurple`) and system colors (`Canvas`, `CanvasText`,
+`Highlight`, `ButtonText`, `GrayText`, `LinkText`, …) are colors too: they land
+in the color slot of any style and can be a color token's value. System colors
+are what `forced-colors` styles are written in:
+
+```jsx
+const Checkbox = tasty({
+  styles: {
+    '#forced-border': 'CanvasText',
+    border: {
+      '': '1bw #border',
+      '@media(forced-colors: active)': '1bw #forced-border',
+    },
+    outline: { '': false, focused: '2px Highlight' },
+  },
+});
+```
+
+A custom property whose fallback is a single color is read as a color, so it
+also fills the color slot: `border: '1bw var(--accent, Highlight)'`, as does
+`($accent, Highlight)`. Keywords are case-insensitive: a color token keeps the
+case it was written in, and a property value such as `border` or `fill` emits
+them lowercase.
+
+The deprecated system colors (`Menu`, `Window`, `ButtonHighlight`, …) are not
+recognized.
+
 ---
 
 ## Built-in Units

package/docs/tasty/styles.md

@@ -394,6 +394,7 @@ Border shorthand with directional and multi-group support. Use **comma-separated
 | `"1bw longhand"` | All sides: 1bw solid `#border`, output as 4 individual `border-*` properties |
 | `"1bw #red, 2bw #blue top"` | All sides: 1bw solid `#red`, top overridden to 2bw solid `#blue` |
 | `"1bw, dashed top bottom, #purple left right"` | Base: 1bw solid `#border`, top/bottom: 1bw dashed `#border`, left/right: 1bw solid `#purple` |
+| `"1bw CanvasText"` | All sides: 1bw solid in the system color `CanvasText` (see [Color keywords](dsl.md#color-keywords)) |
 
 Later comma-separated groups override earlier groups for conflicting directions.
 
@@ -611,8 +612,11 @@ transition="fade $transition ease-in"
 transition="fill ease-in"           // easing without duration (uses default timing)
 transition="radius ease-in-out"     // easing keyword only
 transition="$$custom-prop"          // custom property transition
+transition="none"                   // no transition at all, e.g. under @media(prefers-reduced-motion: reduce)
 ```
 
+`none` and the CSS-wide keywords (`inherit`, `initial`, `unset`, `revert`, `revert-layer`) are the whole value, not a name to transition.
+
 **Recognized easing keywords:** `ease`, `ease-in`, `ease-out`, `ease-in-out`, `linear`, `step-start`, `step-end`. CSS easing functions (`cubic-bezier(...)`, `steps(...)`, `linear(...)`) are also recognized.
 
 If the name is not a semantic name, it is used as a literal CSS property name.

package/docs/tasty/tasty-static.md

@@ -19,13 +19,15 @@ If the styles depend on props, keep `tasty()`: rendered only on the server, it a
 
 Build-time extraction is part of the main `@tenphi/tasty` package but requires additional peer dependencies depending on your setup:
 
-| Dependency                   | Version | Required for                                         |
-| ---------------------------- | ------- | ---------------------------------------------------- |
-| `@babel/core`                | >= 7.24 | Babel plugin (`@tenphi/tasty/babel-plugin`)          |
-| `@babel/helper-plugin-utils` | >= 7.24 | Babel plugin                                         |
-| `@babel/types`               | >= 7.24 | Babel plugin                                         |
-| `jiti`                       | >= 2.6  | `configFile` only (Babel plugin and Next.js wrapper) |
-| `babel-loader`               | any     | Next.js wrapper (`@tenphi/tasty/zero/next`)          |
+| Dependency                   | Version                | Required for                                         |
+| ---------------------------- | ---------------------- | ---------------------------------------------------- |
+| `@babel/core`                | 7.24+ or 8             | Babel plugin (`@tenphi/tasty/babel-plugin`)          |
+| `@babel/helper-plugin-utils` | 7.24+ or 8             | Babel plugin                                         |
+| `@babel/types`               | 7.24+ or 8             | Babel plugin                                         |
+| `jiti`                       | >= 2.6                 | `configFile` only (Babel plugin and Next.js wrapper) |
+| `babel-loader`               | any (10+ with Babel 8) | Next.js wrapper (`@tenphi/tasty/zero/next`)          |
+
+Install the three Babel packages from the same major. Babel 8 itself needs Node 22.18+ or 24.11+, and `babel-loader` accepts it from version 10.
 
 The Babel packages and `jiti` are optional peer dependencies of `@tenphi/tasty`; `babel-loader` is resolved from your project. `jiti` is loaded only to read a `configFile`, so a setup that passes `config` directly does not need it; without it, `configFile` fails with an error that says to install it. Install what your setup requires:
 
@@ -341,6 +343,18 @@ The configuration is process-wide and shared with the Babel plugin and the runti
 
 `extractStylesForSelector()` output starts with the `@keyframes` its rules animate — local `@keyframes` and configured `keyframes` — under hashed names the `animation` declarations are rewritten to. `extractStylesWithChunks()` returns class rules only.
 
+`mergeStyles()` merges style objects with the rules `tasty(Base, { styles })` extends by — state maps with and without a `''` key, `null`, `false`, `'@inherit'` and sub-elements (see [Extending vs. Replacing State Maps](dsl.md#extending-vs-replacing-state-maps)) — so a build script can layer overrides onto source styles before extracting them, without React:
+
+```ts
+import { extractStylesForSelector, mergeStyles } from '@tenphi/tasty/zero';
+
+const styles = mergeStyles(checkboxStyles, {
+  Indicator: { radius: '0.5r' },
+});
+
+extractStylesForSelector('.checkbox', styles).css;
+```
+
 To write the results to a file the way the Babel plugin does, use `createCSSWriter()`. It deduplicates blocks by key and prepends the generated-file header:
 
 ```ts

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cube-dev/ui-kit",
-  "version": "0.0.0-canary-9b1eabc",
+  "version": "0.0.0-canary-a296584",
   "type": "module",
   "description": "UIKit for Cube Projects",
   "repository": {
@@ -111,7 +111,7 @@
     "@tabler/icons-react": "^3.31.0",
     "@tanstack/react-virtual": "^3.13.12",
     "@tenphi/glaze": "2.0.0",
-    "@tenphi/tasty": "3.11.2",
+    "@tenphi/tasty": "3.12.0",
     "clipboard-copy": "^4.0.1",
     "clsx": "^1.1.1",
     "diff": "^8.0.3",
@@ -156,6 +156,7 @@
     "@testing-library/user-event": "14.6.1",
     "@types/babel__core": "^7.20.5",
     "@types/babel__helper-plugin-utils": "^7.10.3",
+    "@types/chai": "^5.2.3",
     "@types/node": "^24.0.0",
     "@types/react": "19.3.0",
     "@types/react-dom": "19.3.0",