@cube-dev/ui-kit 0.0.0-canary-42b50b1 → 0.0.0-canary-0628aca

package/dist/tokens/palette.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-42b50b1 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-0628aca | Cube Dev Team */
 import { getPaletteConfig, getPaletteVersion, resolvePaletteConfig } from "./palette-config.js";
 import { lazyStyles } from "./lazy-styles.js";
 import { glaze } from "@tenphi/glaze";
@@ -36,6 +36,84 @@ const SURFACE_SATURATION = .12;
 const TINTED_SURFACE_SATURATION = .2;
 const TINTED_SURFACE_TONE_OFFSET = 2;
 /**
+* 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.
+*/
+const ACCENT_FILL_CONTRAST = [3, 7];
+/**
+* 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.
+*/
+const ACCENT_TEXT_CONTRAST = [3, 7];
+const ACCENT_TEXT_HOVER_CONTRAST = [4.5, 9];
+/**
+* Tone steps of the brand fill ramp, measured from `accent-surface`.
+*
+* They reproduce the white-anchored `-49 / -52 / -55 / -58` ladder exactly once the
+* fill is pinned, because those four deltas share an anchor and differ by 3 / 6 / 9.
+*/
+const ACCENT_RAMP = {
+	surface2: "-3",
+	surface3: "-6",
+	hover: "-9"
+};
+/**
+* How far the hover brand text sits past the rest one, in tone.
+*
+* Both are pinned to the caller's tone otherwise, and a pair at the same tone behind
+* the same floor resolves to one color — which would silently delete the rest→hover
+* intensify that `accent-text` exists for. Tone is contrast-uniform, so one step is
+* one step in either scheme.
+*/
+const ACCENT_TEXT_HOVER_STEP = 6;
+/**
+* Opaque stand-in for the BASE selected fill used by outline / outline-2 / clear Item
+* types (`#surface|#surface-2|#surface-3` + `#accent-surface.09`).
+*
+* Anchors the `accent-text*` contrast. `value: 9` matches the `.09` alpha overlay;
+* `space: 'srgb'` approximates CSS two-layer compositing. Inherited so colored themes
+* re-resolve against their own `surface` + `accent-surface` (default `surface-2` /
+* `surface-3` are `inherit: false` and can't be the mix base). Primary's tinted
+* `surface` makes this slightly harder than default clear-selected, covering
+* outline / outline-2 selected fills as well.
+*
+* The same in both accent arrangements — it is defined by its two ends, and both of
+* those move with the seed on their own.
+*/
+const ACCENT_SELECTED_FILL = { "accent-selected-fill": {
+	type: "mix",
+	base: "surface",
+	target: "accent-surface",
+	value: 9,
+	space: "srgb"
+} };
+/**
 * Syntax highlighting for `PrismCode`, as its own theme.
 *
 * A small palette of *adaptive* colored tokens. Each one is anchored to `surface`
@@ -240,6 +318,165 @@ const TINT_RECIPE = {
 	}
 };
 /**
+* The brand family, in one of two arrangements.
+*
+* **`null`** — the shipped one, verbatim. Every fill hangs off a fixed white
+* `accent-surface-text` at a relative tone delta behind an `['AA','AAA']` floor, and
+* the text pair hangs off `accent-selected-fill` at `-49`. Those floors are
+* load-bearing rather than decorative: relaxing them moves the shipped `accent-text`
+* light tone from 38.76 to 48.63 and the `accent-surface` high-contrast tone from
+* 36.08 to 51.00. Nothing on this path may change — `palette.test.ts` snapshots it.
+*
+* **A number** — the caller handed us a color, and the job is to render *that*. The
+* fill is pinned to the color's own tone against `surface`, and the floors drop to
+* {@link ACCENT_FILL_CONTRAST}. Both halves are necessary: anchored the shipped way,
+* every accent hue lands at roughly tone 50 whatever lightness went in, and a 4.5
+* floor then crushes anything light on top of that.
+*
+* Three details worth keeping straight:
+*
+* - **`mode: 'static'`, not `'fixed'`.** `fixed` still remaps the authored tone through
+*   `lightTone: [10, 100]`, which lands ~3 tone units off even when no floor binds
+*   (`#7A4DBF` renders `#8053c6`). `static` bypasses the windows, so the color is
+*   byte-exact wherever the floor allows. The floor is still solved per scheme, which
+*   is why a near-black brand correctly lifts off a dark page.
+* - **The ramp carries no floor.** Re-anchored onto the fill, an `['AA','AAA']` floor
+*   is measured against the *fill* rather than white and collapses all three steps to
+*   near-black. A plain tone step is what the relationship actually is.
+* - **The text pair stays `mode: 'auto'`.** Link text has to invert on a dark page, so
+*   byte-exactness belongs to the fill; the text is a brand-toned companion of it.
+*/
+function accentFillColors(accentTone) {
+	if (accentTone == null) return {
+		"accent-surface-text": {
+			tone: 100,
+			mode: "fixed"
+		},
+		"accent-surface": {
+			base: "accent-surface-text",
+			tone: "-49",
+			contrast: ["AA", "AAA"],
+			mode: "fixed"
+		},
+		"accent-surface-2": {
+			base: "accent-surface-text",
+			tone: "-52",
+			contrast: ["AA", "AAA"],
+			mode: "fixed"
+		},
+		"accent-surface-3": {
+			base: "accent-surface-text",
+			tone: "-55",
+			contrast: ["AA", "AAA"],
+			mode: "fixed"
+		},
+		"accent-surface-hover": {
+			base: "accent-surface-text",
+			tone: "-58",
+			contrast: ["AA", "AAA"],
+			mode: "fixed"
+		},
+		"accent-surface-border": {
+			base: "accent-surface",
+			tone: "+13",
+			mode: "fixed"
+		}
+	};
+	return {
+		"accent-surface-text": {
+			tone: 100,
+			mode: "fixed"
+		},
+		"accent-surface": {
+			base: "surface",
+			tone: accentTone,
+			contrast: ACCENT_FILL_CONTRAST,
+			mode: "static"
+		},
+		"accent-surface-2": {
+			base: "accent-surface",
+			tone: ACCENT_RAMP.surface2,
+			mode: "static"
+		},
+		"accent-surface-3": {
+			base: "accent-surface",
+			tone: ACCENT_RAMP.surface3,
+			mode: "static"
+		},
+		"accent-surface-hover": {
+			base: "accent-surface",
+			tone: ACCENT_RAMP.hover,
+			mode: "static"
+		},
+		"accent-surface-border": {
+			base: "accent-surface",
+			tone: "+13",
+			mode: "static"
+		}
+	};
+}
+/**
+* The brand FOREGROUNDS — text on a neutral surface, and the icon.
+*
+* Split from {@link accentFillColors} because the two have different audiences: the
+* fill ramp is shared with the standalone `special` theme, which builds its own
+* purpose-made subset and must not gain tokens it does not consume. Only the default
+* theme (and the colored themes that inherit from it) takes these.
+*
+* These stay `mode: 'auto'` in both arrangements — a link has to invert on a dark page,
+* so exactness belongs to the fill and these are its brand-toned companions.
+*/
+function accentTextColors(accentTone) {
+	if (accentTone == null) return {
+		...ACCENT_SELECTED_FILL,
+		"accent-text": {
+			base: "accent-selected-fill",
+			tone: "-49",
+			saturation: 1,
+			contrast: [6, 11]
+		},
+		"accent-text-soft": {
+			base: "accent-selected-fill",
+			tone: "-49",
+			saturation: 1,
+			contrast: ["AA", "AAA"]
+		},
+		"accent-icon": {
+			base: "surface",
+			tone: "-38",
+			saturation: .9375
+		}
+	};
+	return {
+		...ACCENT_SELECTED_FILL,
+		"accent-text": {
+			base: "accent-selected-fill",
+			tone: Math.max(0, accentTone - ACCENT_TEXT_HOVER_STEP),
+			saturation: 1,
+			contrast: ACCENT_TEXT_HOVER_CONTRAST
+		},
+		"accent-text-soft": {
+			base: "accent-selected-fill",
+			tone: accentTone,
+			saturation: 1,
+			contrast: ACCENT_TEXT_CONTRAST
+		},
+		"accent-icon": {
+			base: "surface",
+			tone: accentTone,
+			saturation: .9375,
+			contrast: ACCENT_TEXT_CONTRAST
+		}
+	};
+}
+/** Every accent token the default theme carries — fills, foregrounds, and the mix. */
+function accentColors(accentTone) {
+	return {
+		...accentFillColors(accentTone),
+		...accentTextColors(accentTone)
+	};
+}
+/**
 * Build the full palette from a resolved config.
 *
 * Pure: it reads nothing but its argument (and the global Glaze config, which
@@ -248,7 +485,7 @@ const TINT_RECIPE = {
 * seed and a `GlazePalette` has no mutation API, so re-seeding means rebuilding.
 */
 function buildPalette(config, options = {}) {
-	const { hue, baseHue, saturation, pastel, themes, contrastLevel } = config;
+	const { hue, baseHue, saturation, accentTone, pastel, themes, contrastLevel } = config;
 	const sharedOverrides = options.isolateContrastLevel ? { contrastLevel } : {};
 	const overrides = {
 		...sharedOverrides,
@@ -386,63 +623,7 @@ function buildPalette(config, options = {}) {
 			mode: "fixed",
 			inherit: false
 		},
-		"accent-surface-text": {
-			tone: 100,
-			mode: "fixed"
-		},
-		"accent-surface": {
-			base: "accent-surface-text",
-			tone: "-49",
-			contrast: ["AA", "AAA"],
-			mode: "fixed"
-		},
-		"accent-surface-2": {
-			base: "accent-surface-text",
-			tone: "-52",
-			contrast: ["AA", "AAA"],
-			mode: "fixed"
-		},
-		"accent-surface-3": {
-			base: "accent-surface-text",
-			tone: "-55",
-			contrast: ["AA", "AAA"],
-			mode: "fixed"
-		},
-		"accent-surface-hover": {
-			base: "accent-surface-text",
-			tone: "-58",
-			contrast: ["AA", "AAA"],
-			mode: "fixed"
-		},
-		"accent-surface-border": {
-			base: "accent-surface",
-			tone: "+13",
-			mode: "fixed"
-		},
-		"accent-selected-fill": {
-			type: "mix",
-			base: "surface",
-			target: "accent-surface",
-			value: 9,
-			space: "srgb"
-		},
-		"accent-text": {
-			base: "accent-selected-fill",
-			tone: "-49",
-			saturation: 1,
-			contrast: [6, 11]
-		},
-		"accent-text-soft": {
-			base: "accent-selected-fill",
-			tone: "-49",
-			saturation: 1,
-			contrast: ["AA", "AAA"]
-		},
-		"accent-icon": {
-			base: "surface",
-			tone: "-38",
-			saturation: .9375
-		},
+		...accentColors(accentTone),
 		"accent-disabled-surface": {
 			base: "surface",
 			tone: "-13",
@@ -502,25 +683,29 @@ function buildPalette(config, options = {}) {
 		}
 	});
 	const primaryTheme = defaultTheme.extend({ colors: TINTED_SURFACE_OVERRIDE });
+	const statusColors = accentTone == null ? TINTED_SURFACE_OVERRIDE : {
+		...TINTED_SURFACE_OVERRIDE,
+		...accentColors(null)
+	};
 	const successTheme = defaultTheme.extend({
 		hue: themes.success.hue,
 		saturation: themes.success.saturation,
-		colors: TINTED_SURFACE_OVERRIDE
+		colors: statusColors
 	});
 	const dangerTheme = defaultTheme.extend({
 		hue: themes.danger.hue,
 		saturation: themes.danger.saturation,
-		colors: TINTED_SURFACE_OVERRIDE
+		colors: statusColors
 	});
 	const warningTheme = defaultTheme.extend({
 		hue: themes.warning.hue,
 		saturation: themes.warning.saturation,
-		colors: TINTED_SURFACE_OVERRIDE
+		colors: statusColors
 	});
 	const noteTheme = defaultTheme.extend({
 		hue: themes.note.hue,
 		saturation: themes.note.saturation,
-		colors: TINTED_SURFACE_OVERRIDE
+		colors: statusColors
 	});
 	const specialTheme = glaze(hue, saturation, instanceConfig);
 	specialTheme.colors({
@@ -529,39 +714,7 @@ function buildPalette(config, options = {}) {
 			saturation: .475,
 			mode: "fixed"
 		},
-		"accent-surface-text": {
-			tone: 100,
-			mode: "fixed"
-		},
-		"accent-surface": {
-			base: "accent-surface-text",
-			tone: "-49",
-			contrast: ["AA", "AAA"],
-			mode: "fixed"
-		},
-		"accent-surface-2": {
-			base: "accent-surface-text",
-			tone: "-52",
-			contrast: ["AA", "AAA"],
-			mode: "fixed"
-		},
-		"accent-surface-3": {
-			base: "accent-surface-text",
-			tone: "-55",
-			contrast: ["AA", "AAA"],
-			mode: "fixed"
-		},
-		"accent-surface-border": {
-			base: "accent-surface",
-			tone: "+13",
-			mode: "fixed"
-		},
-		"accent-surface-hover": {
-			base: "accent-surface-text",
-			tone: "-58",
-			contrast: ["AA", "AAA"],
-			mode: "fixed"
-		},
+		...accentFillColors(accentTone),
 		"accent-text": {
 			base: "accent-surface-text",
 			tone: "-58",