@cube-dev/ui-kit 0.0.0-canary-e48f68c → 0.0.0-canary-8ff3280

package/dist/probe/canonicalize.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-e48f68c | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-8ff3280 | Cube Dev Team */
 //#region src/probe/canonicalize.ts
 /**
 * Normalising generated identifiers out of rendered output.

package/dist/probe/css.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-e48f68c | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-8ff3280 | Cube Dev Team */
 import { getCSSTextForNode } from "@tenphi/tasty";
 
 //#region src/probe/css.ts

package/dist/probe/index.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-e48f68c | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-8ff3280 | Cube Dev Team */
 import { canonicalize, canonicalizeClassNames, canonicalizeIds } from "./canonicalize.js";
 import { captureCss, diffRules, splitRules } from "./css.js";
 

package/dist/provider.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-e48f68c | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-8ff3280 | 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-e48f68c | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-8ff3280 | 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-e48f68c | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-8ff3280 | 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-e48f68c | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-8ff3280 | Cube Dev Team */
 //#region src/tokens/base.ts
 /**
 * Base design system tokens.

package/dist/tokens/color-seed.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-e48f68c | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-8ff3280 | Cube Dev Team */
 import { glaze } from "@tenphi/glaze";
 
 //#region src/tokens/color-seed.ts

package/dist/tokens/color-theme.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-e48f68c | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-8ff3280 | Cube Dev Team */
 import { colorSeed } from "./color-seed.js";
 import { DEFAULT_HUE, DEFAULT_SATURATION, getPaletteConfig, getPaletteVersion, usePaletteVersion } from "./palette-config.js";
 import { tintRecipe } from "./palette.js";

package/dist/tokens/colors.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-e48f68c | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-8ff3280 | Cube Dev Team */
 import { getPaletteVersion } from "./palette-config.js";
 import { BASE_TOKENS } from "./base.js";
 import { lazyStyles } from "./lazy-styles.js";

package/dist/tokens/index.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-e48f68c | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-8ff3280 | Cube Dev Team */
 import { colorSeed } from "./color-seed.js";
 import { DEFAULT_PALETTE_CONFIG, MAX_BASE_SATURATION, getPaletteConfig, getPaletteConfigInput, getPaletteVersion, invalidatePaletteTokens, resetPaletteConfig, resolvePaletteConfig, setPaletteConfig, subscribePaletteConfig, usePaletteConfig, usePaletteVersion } from "./palette-config.js";
 import { BASE_TOKENS } from "./base.js";

package/dist/tokens/layout.js

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

package/dist/tokens/lazy-styles.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-e48f68c | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-8ff3280 | Cube Dev Team */
 //#region src/tokens/lazy-styles.ts
 /**
 * Proxy that defers to `factory()` on every property / enumeration access.

package/dist/tokens/palette-config.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-e48f68c | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-8ff3280 | Cube Dev Team */
 import { colorSeed } from "./color-seed.js";
 import { useSyncExternalStore } from "react";
 

package/dist/tokens/palette.js

@@ -1,7 +1,7 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-e48f68c | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-8ff3280 | Cube Dev Team */
 import { SURFACE_SATURATION_SHARE, getPaletteConfig, getPaletteVersion, resolvePaletteConfig } from "./palette-config.js";
 import { lazyStyles } from "./lazy-styles.js";
-import { glaze } from "@tenphi/glaze";
+import { apcaContrast, formatOkhst, glaze, okhslToLinearSrgb, variantToOkhsl } from "@tenphi/glaze";
 
 //#region src/tokens/palette.ts
 /**
@@ -103,42 +103,66 @@ function baseSaturationScale(config) {
 	return config.saturation > 0 ? config.baseSaturation / (SURFACE_SATURATION * config.saturation) : 0;
 }
 /**
-* Contrast floors for a pinned brand color: `[normal, highContrast]`.
-*
-* `3` is WCAG's non-text floor — enough that the button reads as a shape against the
-* page, and low enough that most brands clear it untouched. It is a FLOOR and not a
-* target: a brand already at 5:1 or 17:1 is emitted exactly as given. Lower would let a
-* fill vanish into the page; the shipped `['AA','AAA']` is too high to survive a light
-* brand at all (it crushes `#FFD400` from tone 88 to 50).
-*
-* The high-contrast entry stays at AAA regardless. Fidelity to a requested color is a
-* preference; the high-contrast tier is not — it exists for users who cannot read the
-* normal one, and it is selected by `prefers-contrast: more` or an explicit
-* `data-contrast="high"`, so anyone seeing it has asked for separation over brand.
-* Note the pair also means an unreachable HC target is a real possibility for a very
-* light brand, and Glaze pins it to the nearest tone and warns rather than failing.
+* The floor for a pinned brand FILL, measured from white — APCA `large`, Lc 45.
+*
+* "From white" falls out of the anchor rather than replacing it. The base stays
+* `surface`, and `roleToPolarity('surface')` gives this the `bg` polarity, so Glaze
+* solves `apcaContrast(surface, fill)` — in light, where `surface` IS `oklch(1 0 0)`,
+* that is literally white-on-fill, the pair every `type="primary"` label depends on.
+*
+* Re-anchoring to `accent-surface-text` to say "from white" in both schemes was tried
+* and is wrong: in dark the label root is near-white while the page is not, so the
+* floor stops constraining the fill against the page and a dark brand disappears into
+* it — `#111827` came out at WCAG 1.16 against the dark surface. Keeping `surface`
+* means the floor reads as the label pair in light and as page separation in dark,
+* which is the constraint that actually matters in each.
+*
+* Why APCA and not a WCAG ratio. WCAG 2.x is polarity-blind, so one number means two
+* very different things: the previous `3` measured Lc 56 in light but only Lc 23 in
+* dark (12 hues, spread under 2 Lc — hue is not a factor, polarity is). That is 2.4x
+* stricter in light than in dark, which is why light brands kept getting crushed while
+* dark ones sailed through under the same rule. Lc 45 is one number that means one
+* thing in both schemes.
+*
+* Still a FLOOR, not a target: a brand already past it is emitted exactly as given.
+*
+* The HC entry is `85`, spelled rather than left to Glaze's +15 enhancement, because
+* +15 would land it at Lc 60 — weaker in light than the WCAG `7` it replaces. It also
+* cannot be written as a WCAG ratio: Glaze rejects a `contrast` pair that switches
+* metric ("a WCAG ratio and an APCA Lc are different scales"), which is a fair guard,
+* so the tier moves to APCA with the rest.
+*
+* Lc 85 is the closest single value to the old AAA guarantee, and it cannot reproduce
+* it exactly — WCAG 7 measures Lc 83.5 in light but only Lc 54.4 in dark, so no one
+* number says "AAA" on both sides. At 85 the fill lands ~6.1 in light (a shade under
+* AAA) and ~15 in dark (well past it). Fidelity to a requested color is a preference;
+* the high-contrast tier is not — anyone seeing it has asked for separation over brand.
 */
-const ACCENT_FILL_CONTRAST = [3, 7];
+const ACCENT_FILL_CONTRAST = { apca: [45, 85] };
 /**
-* Floors for the two brand TEXT tokens: rest, then hover.
-*
-* The normal entries relax so a vivid brand can be the actual link color. The
-* high-contrast entries do not — same reasoning as {@link ACCENT_FILL_CONTRAST} — and
-* they stay one step apart so the rest→hover intensify survives the tier that needs it
-* most. A single shared HC number would collapse the pair onto one color: both would
-* simply solve to it.
-*
-* The hover's `9` is measured, not chosen for roundness. It is the highest target
-* reachable across `#7A4DBF` `#EF4444` `#0EA5E9` `#22C55E` `#FFD400` `#111827` in both
-* high-contrast schemes, and it holds a ~2.0 gap over the rest color in every one. The
-* shipped `11` is not usable here: 11:1 from a fully saturated hue against a chromatic
-* `accent-selected-fill` is unreachable, and `#FFD400` in dark high contrast pins to
-* pure black — a hover link *less* readable than its rest state, at 2.23 against 7.07.
-* The shipped palette can afford 11 because its fill is a desaturated mix; a pinned
-* brand color is not.
+* Floors for the two brand TEXT tokens: rest, then hover — APCA `content` and `body`.
+*
+* Also "from white", in the same sense as {@link ACCENT_FILL_CONTRAST}: both solve
+* against `accent-selected-fill`, which is `oklch(0.975 0.0037 284.4)` in light — white
+* for every practical purpose, and the surface these labels actually sit on. These are
+* foreground spots, so they keep the default `fg` polarity and Glaze solves
+* `apcaContrast(text, base)`.
+*
+* Lc 60 is APCA's `content` tier, the floor for ordinary body text, which is what a
+* link is. The hover takes `body`/75 so the rest→hover intensify stays visible; one
+* preset step apart is what keeps the two from solving onto the same color.
+*
+* The HC entries are spelled `85` and `92` rather than left to Glaze's +15, for the
+* same reason as {@link ACCENT_FILL_CONTRAST}, and they stay apart so the rest→hover
+* intensify survives the tier that needs it most. They replace the hand-measured
+* `[4.5, 9]` pair, whose `9` existed only because a WCAG ratio that high is unreachable
+* for a saturated hue against a chromatic base: `#FFD400` in dark high contrast used to
+* pin to pure black and come out a hover link *less* readable than its rest state. An
+* Lc target is reachable in both schemes because it is polarity-aware, so the
+* pathological case has no equivalent here.
 */
-const ACCENT_TEXT_CONTRAST = [3, 7];
-const ACCENT_TEXT_HOVER_CONTRAST = [4.5, 9];
+const ACCENT_TEXT_CONTRAST = { apca: [60, 85] };
+const ACCENT_TEXT_HOVER_CONTRAST = { apca: [75, 92] };
 /**
 * Tone steps of the brand fill ramp, measured from `accent-surface`.
 *
@@ -160,6 +184,93 @@ const ACCENT_RAMP = {
 */
 const ACCENT_TEXT_HOVER_STEP = 6;
 /**
+* The white label's own floor on the brand fill, as an APCA Lc.
+*
+* The same 45 as {@link ACCENT_FILL_CONTRAST}, and deliberately so: it is the same
+* surface being constrained, just against the other thing that has to survive on it.
+*
+* Two floors rather than one because in dark they pull opposite ways, and dropping
+* either one produces the mirror image of the other's failure. The fill has to be dark
+* enough for the `#white` label every `type="primary"` item paints on it, and light
+* enough to separate from a dark page. In light mode the page IS white, so both
+* collapse into the single measurement Glaze already makes and this cap never fires.
+*
+* Measured, in dark, with only the page floor: `#FFFFFF` clears it at WCAG 14.4 while
+* the label lands on **Lc 0** — the label is exactly its own fill. With only the white
+* floor the failure mirrors: `#111827` puts the fill at **Lc 0.0 against the page**, a
+* blazing white label on a shape that is not there. The border does not stand in for
+* the fill here — it is deliberately low-contrast — so the fill has to carry it.
+*/
+const ACCENT_LABEL_LC = 45;
+const accentCapCache = /* @__PURE__ */ new Map();
+/** APCA Lc of pure white on one resolved variant. */
+function labelLcOf(variant) {
+	const { h, s, l } = variantToOkhsl(variant);
+	const gamma = (c) => c <= .0031308 ? 12.92 * c : 1.055 * Math.pow(c, 1 / 2.4) - .055;
+	const y = (rgb) => {
+		const [r, g, b] = rgb.map((c) => Math.max(0, Math.min(1, gamma(c))));
+		return .2126 * r ** 2.4 + .7152 * g ** 2.4 + .0722 * b ** 2.4;
+	};
+	return Math.abs(apcaContrast(y([
+		1,
+		1,
+		1
+	]), y(okhslToLinearSrgb(h, s, l, false))));
+}
+/**
+* Pull a brand tone down until a white label survives on every variant of the fill.
+*
+* The search runs against Glaze's own fixed-mode resolution — the same mapping
+* `accent-surface` goes through — rather than reimplementing the dark tone window, and
+* checks all four variants so the cap is a property of the seed and not of one scheme.
+*
+* Only ever lowers, so a brand already dark enough comes back untouched.
+*/
+function capAccentTone(color, tone) {
+	const cached = accentCapCache.get(color);
+	if (cached !== void 0) return Math.min(tone, cached);
+	const { h: hue, s: saturation } = glaze.color(color).resolve().light;
+	const labelLc = (candidate) => {
+		const resolved = glaze.color({
+			from: formatOkhst(hue, saturation * 100, candidate),
+			mode: "fixed"
+		}).resolve();
+		return Math.min(labelLcOf(resolved.light), labelLcOf(resolved.dark), labelLcOf(resolved.lightContrast), labelLcOf(resolved.darkContrast));
+	};
+	let cap = 100;
+	if (labelLc(tone) < ACCENT_LABEL_LC) {
+		let low = 0;
+		let high = tone;
+		for (let i = 0; i < 24; i++) {
+			const mid = (low + high) / 2;
+			if (labelLc(mid) >= ACCENT_LABEL_LC) low = mid;
+			else high = mid;
+		}
+		cap = low;
+	}
+	accentCapCache.set(color, cap);
+	return Math.min(tone, cap);
+}
+/**
+* The brand seed with its tone capped, rebuilt as a literal Glaze can read.
+*
+* The string has to be rebuilt, not just the number: `from` reads the tone off it, so
+* handing Glaze the original would re-solve at the uncapped tone. An uncapped brand
+* keeps its original literal rather than round-tripping through `okhst()`.
+*/
+function cappedAccent(color, tone) {
+	const capped = capAccentTone(color, tone);
+	if (capped >= tone) return {
+		color,
+		tone
+	};
+	const { h, s } = glaze.color(color).resolve().light;
+	return {
+		color: formatOkhst(h, s * 100, capped),
+		tone: capped
+	};
+}
+/**
 * Opaque stand-in for the BASE selected fill used by outline / outline-2 / clear Item
 * types (`#surface|#surface-2|#surface-3` + `#accent-surface.09`).
 *
@@ -566,10 +677,7 @@ function accentColors(accent) {
 */
 function buildPalette(config, options = {}) {
 	const { hue, baseHue, saturation, accentColor, accentTone, pastel, themes, contrastLevel } = config;
-	const accent = accentColor !== null && accentTone !== null ? {
-		color: accentColor,
-		tone: accentTone
-	} : null;
+	const accent = accentColor !== null && accentTone !== null ? cappedAccent(accentColor, accentTone) : null;
 	const baseTone = surfaceTone(config);
 	const baseScale = baseSaturationScale(config);
 	const baseChroma = (factor) => Math.min(1, factor * baseScale);