@cube-dev/ui-kit 0.197.0 → 0.198.1

package/dist/tokens/palette.js

@@ -1,30 +1,8 @@
-/** @license MIT | @cube-dev/ui-kit v0.197.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.198.1 | Cube Dev Team */
 import { SURFACE_SATURATION_SHARE, getPaletteConfig, getPaletteVersion, resolvePaletteConfig } from "./palette-config.js";
 import { lazyStyles } from "./lazy-styles.js";
 import { apcaContrast, glaze, okhslToLinearSrgb, variantToOkhsl } from "@tenphi/glaze";
-
 //#region src/tokens/palette.ts
-/**
-* Glaze-generated color palette for the Cube UI Kit.
-*
-* 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': { '': 'oklch(...)', '@dark': 'oklch(...)', '@hc': 'oklch(...)' }
-*
-* The `@dark` and `@hc` state aliases are wired up globally in
-* `src/components/Root.tsx` (see `setGlobalPredefinedStates`).
-*
-* This module owns the *recipe* — which colors exist and how each one is
-* positioned relative to its base. The *seeds* it is built from (hue,
-* saturation, pastel, contrast level) live in `./palette-config.ts` and are
-* tunable at runtime; `buildPalette()` below is a pure function of them.
-*/
-const 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;
 const CODE_STRING_HUE = 280.3;
 /**
 * Saturation factor of the neutral `surface`.
@@ -39,24 +17,9 @@ const CODE_STRING_HUE = 280.3;
 const SURFACE_SATURATION = SURFACE_SATURATION_SHARE;
 const TINTED_SURFACE_SATURATION = .2;
 const TINTED_SURFACE_TONE_OFFSET = 2;
-/**
-* How far `surfaceMode: 'tinted'` moves the neutral ramp off the end of the tone
-* scale.
-*
-* Small on purpose. Two tones is below the threshold where a page reads as
-* "grey" rather than "white", and it is not lightness this buys: chroma needs
-* distance from the extreme to exist at all, so at tone 100 a light surface is
-* white whatever saturation it asks for. Two tones is the cheapest room in which
-* the base hue becomes visible.
-*
-* Everything under `surface` is positioned relative to it, so the shift carries
-* the whole ladder — and the text ramp's contrast floors re-solve against the new
-* background instead of drifting.
-*/
-const TINTED_SURFACE_TONE_SHIFT = 2;
 /** Tone of the neutral `surface`, per {@link ResolvedPaletteConfig.surfaceMode}. */
 function surfaceTone(config) {
-	return config.surfaceMode === "tinted" ? 100 - TINTED_SURFACE_TONE_SHIFT : 100;
+	return config.surfaceMode === "tinted" ? 98 : 100;
 }
 /**
 * Tone of a TINTED `surface` — a status theme's, or a runtime tint's —
@@ -74,7 +37,7 @@ function surfaceTone(config) {
 */
 function tintedSurfaceTone(config) {
 	const page = surfaceTone(config);
-	return [page - TINTED_SURFACE_TONE_OFFSET, page - TINTED_SURFACE_TONE_OFFSET * 2];
+	return [page - TINTED_SURFACE_TONE_OFFSET, page - 4];
 }
 /**
 * Rescale the base-zone saturation factors onto the base zone's own seed.
@@ -208,35 +171,6 @@ 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;
-/**
-* How far above {@link ACCENT_LABEL_LC} the ceiling actually searches.
-*
-* The ceiling is computed on the bare seed, but the emitted `accent-surface` then goes
-* through the page floor, which can only LIGHTEN — and a lighter fill is a weaker white
-* label, so the solve eats into the margin the ceiling just established. Measured worst
-* case across 3072 hue/chroma/tone/scheme/tier combinations is 1.8 Lc, in dark high
-* contrast where the page floor pushes hardest; 3 covers it with room.
-*/
-const ACCENT_LABEL_MARGIN = 3;
-/**
 * Keyed on the palette VERSION as well as the seed, because the search resolves
 * through Glaze's global settings — the dark tone window among them. A caller that
 * runs `glaze.configure(...)` and then `invalidatePaletteTokens()` has changed the
@@ -299,7 +233,7 @@ function accentToneCeiling(hue, saturation) {
 		return Math.min(labelLcOf(resolved.light), labelLcOf(resolved.dark), labelLcOf(resolved.lightContrast), labelLcOf(resolved.darkContrast));
 	};
 	let ceiling = 100;
-	const target = ACCENT_LABEL_LC + ACCENT_LABEL_MARGIN;
+	const target = 48;
 	if (labelLc(100) < target) {
 		let low = 0;
 		let high = 100;
@@ -500,26 +434,63 @@ const TINTED_SURFACE_RAMP = {
 	},
 	"surface-text": {
 		base: "surface",
-		tone: `${TEXT_TONE - TINTED_SURFACE_TONE_OFFSET}`,
+		tone: `-100`,
 		saturation: .25,
 		contrast: ["AA", "AAA"]
 	},
 	"surface-text-soft": {
 		base: "surface",
-		tone: `${TEXT_SOFT_TONE - TINTED_SURFACE_TONE_OFFSET}`,
+		tone: `-74`,
 		saturation: .25,
 		contrast: ["AA", "AAA"]
 	},
 	"surface-text-soft-2": {
 		base: "surface",
-		tone: `${TEXT_SOFT2_TONE - TINTED_SURFACE_TONE_OFFSET}`,
+		tone: `-54`,
 		saturation: .25,
 		contrast: ["AA", "AAA"]
 	}
 };
 /**
+* Alert's own fill and border, emitted on the four status themes only.
+*
+* The shared tinted `surface` and `border` are tuned to sit quietly under Item,
+* Tag and the table tints, which leaves a banner built from them reading as grey.
+* Alert needs a theme you can name at a glance, so it gets a stronger pair rather
+* than re-tuning the shared one, which would repaint every one of those consumers.
+* Neither color exists on `default`, `primary` or `special`.
+*
+*   - `alert-surface` — one `-2` step off the theme's own `surface`, away from
+*     the page, at triple its saturation. Dark takes a lower factor: the same
+*     factor there reads about two and a half times as strong, and up to five
+*     times for some hues with pastel off. Still close enough to the page that
+*     the neutral `#dark-02` text keeps its floor on it in every scheme.
+*   - `alert-border` — anchored to `alert-surface` with a slightly wider
+*     normal-contrast step than `border` (`-12` vs `-10`), so the edge holds
+*     against the deeper fill.
+*
+* Both state their dark factor, so a host's global `darkDesaturation` (which an
+* explicit one bypasses) leaves the pair in proportion rather than thinning only
+* the border.
+*/
+const ALERT_COLORS = {
+	"alert-surface": {
+		base: "surface",
+		tone: "-2",
+		saturation: .6,
+		darkSaturation: .4
+	},
+	"alert-border": {
+		base: "alert-surface",
+		tone: ["-12", "-30"],
+		saturation: .6,
+		darkSaturation: .6
+	}
+};
+/**
 * Per-colored-theme overrides on top of the default theme: a `surface` bumped in
-* saturation so the banner background is visibly tinted, plus
+* saturation to a quiet tint for Item, Tag and the table columns (Alert uses the
+* stronger {@link ALERT_COLORS}), plus
 * {@link TINTED_SURFACE_RAMP}.
 *
 * A function of the config because the surface's tone is — see
@@ -567,13 +538,21 @@ function tintRecipe(config) {
 		},
 		"surface-2-text": {
 			base: "surface-2",
-			tone: `${TEXT_TONE - TINTED_SURFACE_TONE_OFFSET - SURFACE_2_TEXT_OFFSET}`,
+			tone: `-102`,
 			saturation: .25,
 			contrast: ["AA", "AAA"]
 		},
+		/**
+		* The softer step, for a tinted column HEADER.
+		*
+		* A neutral header is deliberately muted (`HeadRow` publishes `#dark-03`), so
+		* a tinted one taking the full-strength body text read markedly darker than
+		* the headers either side of it — measured at 16:1 against their 4.9:1. This
+		* keeps the two consistent, and the `AA` floor still applies.
+		*/
 		"surface-2-text-soft": {
 			base: "surface-2",
-			tone: `${TEXT_SOFT_TONE - TINTED_SURFACE_TONE_OFFSET - SURFACE_2_TEXT_OFFSET}`,
+			tone: `-76`,
 			saturation: .25,
 			contrast: ["AA", "AAA"]
 		}
@@ -788,14 +767,14 @@ function buildPalette(config, options = {}) {
 		"surface-text": {
 			hue: baseHue,
 			base: "surface",
-			tone: `${TEXT_TONE - 2}`,
+			tone: `-100`,
 			saturation: baseChroma(.2),
 			contrast: ["AA", "AAA"]
 		},
 		"surface-text-soft": {
 			hue: baseHue,
 			base: "surface",
-			tone: `${TEXT_SOFT_TONE - 2}`,
+			tone: `-74`,
 			saturation: baseChroma(.2),
 			contrast: ["AA", "AAA"],
 			inherit: false
@@ -803,7 +782,7 @@ function buildPalette(config, options = {}) {
 		"surface-text-soft-2": {
 			hue: baseHue,
 			base: "surface",
-			tone: `${TEXT_SOFT2_TONE - 2}`,
+			tone: `-54`,
 			saturation: baseChroma(.2),
 			contrast: ["AA", "AAA"],
 			inherit: false
@@ -811,7 +790,7 @@ function buildPalette(config, options = {}) {
 		"surface-2-text": {
 			hue: baseHue,
 			base: "surface-2",
-			tone: `${TEXT_TONE + SURFACE_2_TEXT_OFFSET}`,
+			tone: `-96`,
 			saturation: baseChroma(.2),
 			contrast: ["AA", "AAA"],
 			inherit: false
@@ -819,7 +798,7 @@ function buildPalette(config, options = {}) {
 		"surface-2-text-soft": {
 			hue: baseHue,
 			base: "surface-2",
-			tone: `${TEXT_SOFT_TONE + SURFACE_2_TEXT_OFFSET}`,
+			tone: `-70`,
 			saturation: baseChroma(.2),
 			contrast: ["AA", "AAA"],
 			inherit: false
@@ -827,7 +806,7 @@ function buildPalette(config, options = {}) {
 		"surface-3-text": {
 			hue: baseHue,
 			base: "surface-3",
-			tone: `${TEXT_TONE + SURFACE_3_TEXT_OFFSET}`,
+			tone: `-94`,
 			saturation: baseChroma(.2),
 			contrast: ["AA", "AAA"],
 			inherit: false
@@ -835,7 +814,7 @@ function buildPalette(config, options = {}) {
 		"surface-3-text-soft": {
 			hue: baseHue,
 			base: "surface-3",
-			tone: `${TEXT_SOFT_TONE + SURFACE_3_TEXT_OFFSET}`,
+			tone: `-68`,
 			saturation: baseChroma(.2),
 			contrast: ["AA", "AAA"],
 			inherit: false
@@ -956,6 +935,10 @@ function buildPalette(config, options = {}) {
 	});
 	const tintedSurface = tintedSurfaceOverride(config);
 	const primaryTheme = defaultTheme.extend({ colors: tintedSurface });
+	const statusSurface = {
+		...tintedSurface,
+		...ALERT_COLORS
+	};
 	/**
 	* One status theme's overrides, on whichever path its own seed is on.
 	*
@@ -975,16 +958,16 @@ function buildPalette(config, options = {}) {
 	* redefines each listed color from scratch, so restating the null arrangement is enough
 	* to undo it.
 	*
-	* **Neither** — the tinted-surface override itself, so the shipped palette is provably
+	* **Neither** — the status surface itself, so every shipped color is provably
 	* untouched.
 	*/
 	const statusColors = (theme) => {
 		if (theme.color !== null && theme.colorTone !== null) return {
-			...tintedSurface,
+			...statusSurface,
 			...accentColors(cappedAccent(theme.hue, theme.saturation, theme.colorTone))
 		};
-		return accent == null ? tintedSurface : {
-			...tintedSurface,
+		return accent == null ? statusSurface : {
+			...statusSurface,
 			...accentColors(null)
 		};
 	};
@@ -1191,7 +1174,8 @@ function renderPaletteTokens(options = {}) {
 			glaze.configure({ contrastLevel: previousLevel });
 		}
 	}
-	const flat = renderVariants[VARIANT_KEY[`${scheme}:${highContrast}`]] ?? renderVariants[scheme];
+	const variant = VARIANT_KEY[`${scheme}:${highContrast}`];
+	const flat = renderVariants[variant] ?? renderVariants[scheme];
 	const out = {};
 	for (const name of Object.keys(flat)) out[`#${name}`] = flat[name];
 	return out;
@@ -1202,7 +1186,7 @@ function renderPaletteTokens(options = {}) {
 * config.
 */
 const PALETTE_TOKENS = lazyStyles(getPaletteTokens);
-
 //#endregion
 export { PALETTE_TOKENS, getCodeTheme, getPalette, getPaletteTokens, renderPaletteTokens, tintRecipe };
+
 //# sourceMappingURL=palette.js.map