@cube-dev/ui-kit 0.0.0-canary-a9d94d7 → 0.0.0-canary-a1aba4f

package/dist/tokens/palette.js

@@ -1,5 +1,5 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-a9d94d7 | Cube Dev Team */
-import { SURFACE_SATURATION_SHARE, getPaletteConfig, getPaletteVersion, resolvePaletteConfig } from "./palette-config.js";
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-a1aba4f | Cube Dev Team */
+import { getPaletteConfig, getPaletteVersion, resolvePaletteConfig } from "./palette-config.js";
 import { lazyStyles } from "./lazy-styles.js";
 import { glaze } from "@tenphi/glaze";
 
@@ -30,156 +30,12 @@ const CODE_STRING_HUE = 280.3;
 * Saturation factor of the neutral `surface`.
 *
 * Shared with the code theme, which mirrors `surface` to solve its contrast floors
-* against the real page background — the two must not drift apart. Shared with the
-* config too, which needs it to default `baseSaturation` to the share of the seed
-* this factor represents; it lives there because the config cannot import from
-* here, and is re-exported under this name because that is what the recipe calls it.
+* against the real page background — the two must not drift apart.
 */
-const SURFACE_SATURATION = SURFACE_SATURATION_SHARE;
+const SURFACE_SATURATION = .12;
 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;
-}
-/**
-* Tone of a TINTED `surface` — a status theme's, or a runtime tint's —
-* as `[light, highContrast]`.
-*
-* A tinted surface is a banner sitting *on* the page, so its tone is authored as
-* an offset from the page's rather than as an absolute. Under
-* `surfaceMode: 'tinted'` the page itself moves down to 98, which is exactly where
-* these used to sit: a `note` banner would come out the same tone as the surface
-* behind it and stop reading as a banner at all. Anchoring both on
-* {@link surfaceTone} keeps the separation the offset was chosen for.
-*
-* The text ramps on these themes are relative (`base: 'surface'`), so they follow
-* on their own — only the absolute tone needs the anchor.
-*/
-function tintedSurfaceTone(config) {
-	const page = surfaceTone(config);
-	return [page - TINTED_SURFACE_TONE_OFFSET, page - TINTED_SURFACE_TONE_OFFSET * 2];
-}
-/**
-* Rescale the base-zone saturation factors onto the base zone's own seed.
-*
-* Every color's `saturation` is a 0–1 factor of its **theme's** seed, and the
-* neutral family shares a theme instance with the accent one — it has to, since
-* `accent-surface` is positioned against `surface`. A separate base seed therefore
-* cannot be a second theme; it arrives as a scale over the authored factors.
-*
-* The scale is anchored on `surface`: dividing by `SURFACE_SATURATION` turns each
-* factor into its share *of the surface's tint*, and multiplying by
-* `baseSaturation / saturation` re-expresses that share against the base seed.
-* `surface` therefore lands on exactly `baseSaturation` on the 0–100 scale, and
-* every sibling keeps its proportion to it. At the shipped
-* `baseSaturation = saturation × 0.12` the scale is `1` and nothing moves.
-*
-* Clamped because Glaze reads the factor as 0–1, which is also why the proportions
-* converge at the top: `surface-inverse` (the highest at `0.475`) saturates first,
-* around `baseSaturation: 25`.
-*
-* A palette seed of `0` leaves no chroma for any factor to scale, so the base zone
-* is grey there whatever it asks for — the ceiling belongs to the theme instance,
-* not to this scale.
-*/
-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.
-*/
-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`
@@ -271,14 +127,14 @@ const CODE_COLORS = {
 function buildCodeTheme(config, instanceConfig) {
 	const codeSaturation = config.themes.code.saturation;
 	const theme = glaze(config.hue, codeSaturation, instanceConfig);
-	let mirrorFactor = config.baseSaturation / codeSaturation;
+	let mirrorFactor = SURFACE_SATURATION * (config.saturation / codeSaturation);
 	if (mirrorFactor > 1) {
-		console.warn(`[cube-ui-kit] themes.code.saturation (${codeSaturation}) is too low for baseSaturation ${config.baseSaturation}: the mirrored code surface would need a factor of ${mirrorFactor.toFixed(3)}. Clamped to 1; raise the code saturation to keep syntax contrast accurate.`);
+		console.warn(`[cube-ui-kit] themes.code.saturation (${codeSaturation}) is too low for saturation ${config.saturation}: the mirrored code surface would need a factor of ${mirrorFactor.toFixed(3)}. Clamped to 1; raise the code saturation to keep syntax contrast accurate.`);
 		mirrorFactor = 1;
 	}
 	theme.colors({
 		surface: {
-			tone: surfaceTone(config),
+			tone: 100,
 			saturation: mirrorFactor
 		},
 		...CODE_COLORS
@@ -304,17 +160,19 @@ glaze.configure({
 	darkDesaturation: 0
 });
 /**
-* The config-free half of a colored theme's overrides — everything anchored to
-* the theme's own `surface` with a *relative* tone, so it follows wherever
-* {@link tintedSurfaceTone} puts that surface.
-*
-*   - `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'`, tone window) but with
-*     higher saturation. Glaze's `extend({ colors })` redefines each listed color
-*     from scratch, so we restate the full definition here.
+* Per-colored-theme overrides on top of the default theme:
+*   - `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'`, 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_RAMP = {
+const TINTED_SURFACE_OVERRIDE = {
+	surface: {
+		tone: [100 - TINTED_SURFACE_TONE_OFFSET, 100 - TINTED_SURFACE_TONE_OFFSET * 2],
+		saturation: TINTED_SURFACE_SATURATION
+	},
 	border: {
 		base: "surface",
 		tone: ["-10", "-30"],
@@ -340,31 +198,13 @@ const TINTED_SURFACE_RAMP = {
 	}
 };
 /**
-* Per-colored-theme overrides on top of the default theme: a `surface` bumped in
-* saturation so the banner background is visibly tinted, plus
-* {@link TINTED_SURFACE_RAMP}.
-*
-* A function of the config because the surface's tone is — see
-* {@link tintedSurfaceTone}.
-*/
-function tintedSurfaceOverride(config) {
-	return {
-		surface: {
-			tone: tintedSurfaceTone(config),
-			saturation: TINTED_SURFACE_SATURATION
-		},
-		...TINTED_SURFACE_RAMP
-	};
-}
-/**
 * A tinted surface, a banding step, and text guaranteed to read on both.
 *
 * The recipe behind {@link getColorTheme} in `./color-theme.ts`, which builds
 * one-off themes at runtime from an arbitrary hue. It lives here so it shares
 * `TINTED_SURFACE_SATURATION`, the tone offsets and the text ramp with
-* {@link tintedSurfaceOverride} above rather than forking them — a runtime tint
-* and a built-in theme's `surface` should be the same colour for the same hue,
-* which also means both have to follow the page when `surfaceMode` moves it.
+* {@link TINTED_SURFACE_OVERRIDE} above rather than forking them — a runtime tint
+* and a built-in theme's `surface` should be the same colour for the same hue.
 *
 * Three colours, because that is what banded, readable table column needs:
 * `surface` for even rows, `surface-2` one tone step down for odd rows and
@@ -376,185 +216,29 @@ function tintedSurfaceOverride(config) {
 * clears it on both bands. The neutral ramp's own `surface-2-text` is shaped the
 * same way for the same reason.
 */
-function tintRecipe(config) {
-	return {
-		surface: {
-			tone: tintedSurfaceTone(config),
-			saturation: TINTED_SURFACE_SATURATION
-		},
-		"surface-2": {
-			base: "surface",
-			tone: ["-2", "-4"],
-			saturation: TINTED_SURFACE_SATURATION
-		},
-		"surface-2-text": {
-			base: "surface-2",
-			tone: `${TEXT_TONE - TINTED_SURFACE_TONE_OFFSET - SURFACE_2_TEXT_OFFSET}`,
-			saturation: .25,
-			contrast: ["AA", "AAA"]
-		},
-		"surface-2-text-soft": {
-			base: "surface-2",
-			tone: `${TEXT_SOFT_TONE - TINTED_SURFACE_TONE_OFFSET - SURFACE_2_TEXT_OFFSET}`,
-			saturation: .25,
-			contrast: ["AA", "AAA"]
-		}
-	};
-}
-/**
-* 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 color** — the caller handed us one, and the job is to render *that*. Glaze's
-* `from` takes the value directly: it supplies the hue, the tone, and an absolute
-* saturation that does not answer to the theme seed, and it reproduces the value
-* exactly in the light/normal-contrast variant. The floors drop to
-* {@link ACCENT_FILL_CONTRAST} on top, because anchored the shipped way every accent
-* lands at roughly tone 50 whatever went in, and a 4.5 floor then crushes anything
-* light besides.
-*
-* Two details worth keeping straight:
-*
-* - **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
-*   exactness belongs to the fill; the text is a brand-toned companion of it.
-*/
-function accentFillColors(accent) {
-	if (accent == 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": {
-			from: accent.color,
-			base: "surface",
-			contrast: ACCENT_FILL_CONTRAST,
-			mode: "fixed"
-		},
-		"accent-surface-2": {
-			base: "accent-surface",
-			tone: ACCENT_RAMP.surface2,
-			mode: "fixed"
-		},
-		"accent-surface-3": {
-			base: "accent-surface",
-			tone: ACCENT_RAMP.surface3,
-			mode: "fixed"
-		},
-		"accent-surface-hover": {
-			base: "accent-surface",
-			tone: ACCENT_RAMP.hover,
-			mode: "fixed"
-		},
-		"accent-surface-border": {
-			base: "accent-surface",
-			tone: "+13",
-			mode: "fixed"
-		}
-	};
-}
-/**
-* 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(accent) {
-	if (accent == 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": {
-			from: accent.color,
-			base: "accent-selected-fill",
-			tone: Math.max(0, accent.tone - ACCENT_TEXT_HOVER_STEP),
-			contrast: ACCENT_TEXT_HOVER_CONTRAST
-		},
-		"accent-text-soft": {
-			from: accent.color,
-			base: "accent-selected-fill",
-			contrast: ACCENT_TEXT_CONTRAST
-		},
-		"accent-icon": {
-			from: accent.color,
-			base: "surface",
-			contrast: ACCENT_TEXT_CONTRAST
-		}
-	};
-}
-/** Every accent token the default theme carries — fills, foregrounds, and the mix. */
-function accentColors(accent) {
-	return {
-		...accentFillColors(accent),
-		...accentTextColors(accent)
-	};
-}
+const TINT_RECIPE = {
+	surface: {
+		tone: [100 - TINTED_SURFACE_TONE_OFFSET, 100 - TINTED_SURFACE_TONE_OFFSET * 2],
+		saturation: TINTED_SURFACE_SATURATION
+	},
+	"surface-2": {
+		base: "surface",
+		tone: ["-2", "-4"],
+		saturation: TINTED_SURFACE_SATURATION
+	},
+	"surface-2-text": {
+		base: "surface-2",
+		tone: `${TEXT_TONE - TINTED_SURFACE_TONE_OFFSET - SURFACE_2_TEXT_OFFSET}`,
+		saturation: .25,
+		contrast: ["AA", "AAA"]
+	},
+	"surface-2-text-soft": {
+		base: "surface-2",
+		tone: `${TEXT_SOFT_TONE - TINTED_SURFACE_TONE_OFFSET - SURFACE_2_TEXT_OFFSET}`,
+		saturation: .25,
+		contrast: ["AA", "AAA"]
+	}
+};
 /**
 * Build the full palette from a resolved config.
 *
@@ -564,14 +248,7 @@ function accentColors(accent) {
 * seed and a `GlazePalette` has no mutation API, so re-seeding means rebuilding.
 */
 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 baseTone = surfaceTone(config);
-	const baseScale = baseSaturationScale(config);
-	const baseChroma = (factor) => Math.min(1, factor * baseScale);
+	const { hue, baseHue, saturation, pastel, themes, contrastLevel } = config;
 	const sharedOverrides = options.isolateContrastLevel ? { contrastLevel } : {};
 	const overrides = {
 		...sharedOverrides,
@@ -585,43 +262,43 @@ function buildPalette(config, options = {}) {
 	const defaultTheme = glaze(hue, saturation, instanceConfig);
 	defaultTheme.colors({
 		surface: {
-			tone: baseTone,
-			saturation: baseChroma(SURFACE_SATURATION),
+			tone: 100,
+			saturation: SURFACE_SATURATION,
 			hue: baseHue
 		},
 		"surface-2": {
 			hue: baseHue,
 			base: "surface",
 			tone: ["-2", "-4"],
-			saturation: baseChroma(.1),
+			saturation: .1,
 			inherit: false
 		},
 		"surface-3": {
 			hue: baseHue,
 			base: "surface",
 			tone: ["-4", "-8"],
-			saturation: baseChroma(.1),
+			saturation: .1,
 			inherit: false
 		},
 		"surface-4": {
 			hue: baseHue,
 			base: "surface",
 			tone: ["-6", "-12"],
-			saturation: baseChroma(.1),
+			saturation: .1,
 			inherit: false
 		},
 		"surface-text": {
 			hue: baseHue,
 			base: "surface",
 			tone: `${TEXT_TONE - 2}`,
-			saturation: baseChroma(.2),
+			saturation: .2,
 			contrast: ["AA", "AAA"]
 		},
 		"surface-text-soft": {
 			hue: baseHue,
 			base: "surface",
 			tone: `${TEXT_SOFT_TONE - 2}`,
-			saturation: baseChroma(.2),
+			saturation: .2,
 			contrast: ["AA", "AAA"],
 			inherit: false
 		},
@@ -629,7 +306,7 @@ function buildPalette(config, options = {}) {
 			hue: baseHue,
 			base: "surface",
 			tone: `${TEXT_SOFT2_TONE - 2}`,
-			saturation: baseChroma(.2),
+			saturation: .2,
 			contrast: ["AA", "AAA"],
 			inherit: false
 		},
@@ -637,7 +314,7 @@ function buildPalette(config, options = {}) {
 			hue: baseHue,
 			base: "surface-2",
 			tone: `${TEXT_TONE + SURFACE_2_TEXT_OFFSET}`,
-			saturation: baseChroma(.2),
+			saturation: .2,
 			contrast: ["AA", "AAA"],
 			inherit: false
 		},
@@ -645,7 +322,7 @@ function buildPalette(config, options = {}) {
 			hue: baseHue,
 			base: "surface-2",
 			tone: `${TEXT_SOFT_TONE + SURFACE_2_TEXT_OFFSET}`,
-			saturation: baseChroma(.2),
+			saturation: .2,
 			contrast: ["AA", "AAA"],
 			inherit: false
 		},
@@ -653,7 +330,7 @@ function buildPalette(config, options = {}) {
 			hue: baseHue,
 			base: "surface-3",
 			tone: `${TEXT_TONE + SURFACE_3_TEXT_OFFSET}`,
-			saturation: baseChroma(.2),
+			saturation: .2,
 			contrast: ["AA", "AAA"],
 			inherit: false
 		},
@@ -661,7 +338,7 @@ function buildPalette(config, options = {}) {
 			hue: baseHue,
 			base: "surface-3",
 			tone: `${TEXT_SOFT_TONE + SURFACE_3_TEXT_OFFSET}`,
-			saturation: baseChroma(.2),
+			saturation: .2,
 			contrast: ["AA", "AAA"],
 			inherit: false
 		},
@@ -669,13 +346,13 @@ function buildPalette(config, options = {}) {
 			hue: baseHue,
 			base: "surface",
 			tone: ["-10", "-30"],
-			saturation: baseChroma(.175)
+			saturation: .175
 		},
 		placeholder: {
 			hue: baseHue,
 			base: "surface",
 			tone: "-33",
-			saturation: baseChroma(.175),
+			saturation: .175,
 			inherit: false
 		},
 		focus: {
@@ -693,7 +370,7 @@ function buildPalette(config, options = {}) {
 			hue: baseHue,
 			base: "surface",
 			tone: "-3.5",
-			saturation: baseChroma(.2),
+			saturation: .2,
 			inherit: false
 		},
 		"disabled-surface-text": {
@@ -705,11 +382,67 @@ function buildPalette(config, options = {}) {
 		"surface-inverse": {
 			hue: baseHue,
 			tone: 12,
-			saturation: baseChroma(.475),
+			saturation: .475,
 			mode: "fixed",
 			inherit: false
 		},
-		...accentColors(accent),
+		"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
+		},
 		"accent-disabled-surface": {
 			base: "surface",
 			tone: "-13",
@@ -768,31 +501,26 @@ function buildPalette(config, options = {}) {
 			hue: baseHue
 		}
 	});
-	const tintedSurface = tintedSurfaceOverride(config);
-	const primaryTheme = defaultTheme.extend({ colors: tintedSurface });
-	const statusColors = accent == null ? tintedSurface : {
-		...tintedSurface,
-		...accentColors(null)
-	};
+	const primaryTheme = defaultTheme.extend({ colors: TINTED_SURFACE_OVERRIDE });
 	const successTheme = defaultTheme.extend({
 		hue: themes.success.hue,
 		saturation: themes.success.saturation,
-		colors: statusColors
+		colors: TINTED_SURFACE_OVERRIDE
 	});
 	const dangerTheme = defaultTheme.extend({
 		hue: themes.danger.hue,
 		saturation: themes.danger.saturation,
-		colors: statusColors
+		colors: TINTED_SURFACE_OVERRIDE
 	});
 	const warningTheme = defaultTheme.extend({
 		hue: themes.warning.hue,
 		saturation: themes.warning.saturation,
-		colors: statusColors
+		colors: TINTED_SURFACE_OVERRIDE
 	});
 	const noteTheme = defaultTheme.extend({
 		hue: themes.note.hue,
 		saturation: themes.note.saturation,
-		colors: statusColors
+		colors: TINTED_SURFACE_OVERRIDE
 	});
 	const specialTheme = glaze(hue, saturation, instanceConfig);
 	specialTheme.colors({
@@ -801,7 +529,39 @@ function buildPalette(config, options = {}) {
 			saturation: .475,
 			mode: "fixed"
 		},
-		...accentFillColors(accent),
+		"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"
+		},
 		"accent-text": {
 			base: "accent-surface-text",
 			tone: "-58",
@@ -990,5 +750,5 @@ function renderPaletteTokens(options = {}) {
 const PALETTE_TOKENS = lazyStyles(getPaletteTokens);
 
 //#endregion
-export { PALETTE_TOKENS, getCodeTheme, getPalette, getPaletteTokens, renderPaletteTokens, tintRecipe };
+export { PALETTE_TOKENS, TINT_RECIPE, getCodeTheme, getPalette, getPaletteTokens, renderPaletteTokens };
 //# sourceMappingURL=palette.js.map