@vectoriox/iox-ui 5.13.0 → 5.14.0

package/design-core/index.d.ts

@@ -8379,23 +8379,14 @@ declare function ownedTraitStatus(target: ElementStyleTarget, id: string): Owned
 declare function switchElementStyle(target: ElementStyleTarget, fromId: string | null | undefined, toId: string, baseline?: Readonly<Record<string, unknown>>): SwitchElementStyleResult;
 /**
  * The element-style MARKER (design-system §3b-bis, spec `elementStyleMarker`). A node that wears an
- * element style renders `iox-es iox-es-<id>` in BOTH renderers; every piece of component CSS that
- * carries the system look is scoped to it, so a node saved before DS2 (no `elementStyle`) keeps its
- * exact pre-DS2 component CSS no matter which tokens the org holds. This is the ONLY thing a
- * renderer reads `elementStyle` for.
+ * element style renders `iox-es iox-es-<id>` in BOTH renderers, through the one node-class helper
+ * `nodeDesignClasses` (node-classes.ts); every piece of component CSS that carries the system look is
+ * scoped to it, so a node saved before DS2 (no `elementStyle`) keeps its exact pre-DS2 component CSS
+ * no matter which tokens the org holds.
  */
 declare const ELEMENT_STYLE_MARKER_CLASS = "iox-es";
 /** `iox-es-<id>` for a known style, else null — an unknown id never reaches a class attribute. */
 declare function elementStyleClass(id: string | null | undefined): string | null;
-/** The marker classes a node renders: `'iox-es iox-es-<id>'`, or `''` for a node with no (known) style. */
-declare function elementStyleClasses(node: {
-    elementStyle?: string | null;
-} | null | undefined): string;
-/** Make an element's marker match `elementStyle` — the live switch on the canvas, and the
- *  component path's one-time stamp. Removes a stale `iox-es-<old>`; touches no other class. */
-declare function syncElementStyleMarker(el: {
-    classList: DOMTokenList;
-} | null | undefined, elementStyle: string | null | undefined): void;
 /**
  * The spec's `headingLevelRule`: changing a Heading's level moves it to the new level's DEFAULT
  * style only when it still wears its old level's default (author changes kept, via
@@ -8404,6 +8395,91 @@ declare function syncElementStyleMarker(el: {
  */
 declare function applyHeadingLevelRule(target: ElementStyleTarget, oldLevel: string | null | undefined, newLevel: string | null | undefined, baseline?: Readonly<Record<string, unknown>>): SwitchElementStyleResult | null;
 
+/**
+ * The design-system classes a node renders, in BOTH renderers (builder canvas, engine component
+ * path, engine string path) — ONE helper, so the three can never disagree about which class a node
+ * carries:
+ *
+ * - the element-style MARKER `iox-es iox-es-<id>` (design-system §3b-bis) — component CSS carrying
+ *   the system look is scoped to it, so a node saved before DS2 keeps its pre-DS2 look;
+ * - the section colour scheme `iox-scheme-<id>` (§3c) for a non-default `colorScheme` — the class
+ *   `compileSchemeCss` re-declares tokens on, so everything inside re-resolves.
+ *
+ * Renderers read `elementStyle` and `colorScheme` for exactly this and nothing else.
+ */
+/** The section colour schemes — the contract's `schemes` keys. */
+declare enum ColorScheme {
+    Default = "default",
+    Subtle = "subtle",
+    Inverse = "inverse",
+    Accent = "accent"
+}
+/** The content trait (stored in `props`, not a style prop) that picks a node's scheme. */
+declare const COLOR_SCHEME_TRAIT = "colorScheme";
+/** The node types that offer a scheme (spec §3c: Section/Container; LinkedContainer is a Container that links). */
+declare const COLOR_SCHEME_TYPES: ReadonlyArray<string>;
+/** Every scheme in contract order, with the contract's label (Default · Subtle · Inverse · Brand). */
+declare const COLOR_SCHEMES: ReadonlyArray<{
+    readonly id: ColorScheme;
+    readonly label: string;
+}>;
+/** `iox-scheme-<id>` for a known NON-default scheme, else null — an unknown id never reaches a class attribute. */
+declare function colorSchemeClass(id: unknown): string | null;
+/** The node shapes this module reads: a serialized node (`props`) or a builder node (`traits[]`). */
+interface DesignClassSource {
+    elementStyle?: string | null;
+    props?: Readonly<Record<string, unknown>> | null;
+    traits?: ReadonlyArray<{
+        name?: string;
+        default?: unknown;
+    }> | null;
+}
+/** A node's `colorScheme`, from `props` (serialized) or its trait (builder). */
+declare function colorSchemeOf(node: DesignClassSource | null | undefined): string | null;
+/** True when the node wears a known element style — the marker is on it. */
+declare function hasElementStyleMarker(node: {
+    elementStyle?: string | null;
+} | null | undefined): boolean;
+/** The classes a node renders: `'iox-es iox-es-card iox-scheme-inverse'`, or `''` for none. */
+declare function nodeDesignClasses(node: DesignClassSource | null | undefined): string;
+/** Make an element's design classes match the node — the live switch on the canvas and the
+ *  component path's one-time stamp. Removes stale ones; touches no other class. */
+declare function syncNodeDesignClasses(el: {
+    classList: DOMTokenList;
+} | null | undefined, node: DesignClassSource | null | undefined): void;
+
+/**
+ * Empty images (design-system DS3). A MARKED Image (`.iox-es-media`) with no source renders a box in
+ * the `surface-2` token with its aspect ratio kept — on the canvas with an "Add image" label, on the
+ * live site with nothing in it. An UNMARKED empty Image renders exactly as before (no `src`).
+ *
+ * Why a placeholder `src` instead of a src-less `<img>`: Chromium paints a src-less image as a broken
+ * image (a frame, an icon and the alt text) and ignores `aspect-ratio` once alt text is present, and no
+ * pseudo-element paints on an `<img>`. A real image with no natural size of its own (an SVG with no
+ * width/height) is a proper replaced element: `aspect-ratio`/`object-fit` apply, the background shows
+ * through, and its default object size (300×150) is the SAME for the canvas label and the live blank,
+ * so both renderers lay the box out identically. The fill itself is shared CSS (`iox-design.css`)
+ * keyed on {@link EMPTY_IMAGE_ATTRIBUTE}.
+ */
+/** Set on a marked Image while it has no source — the hook the shared fill rule keys on. */
+declare const EMPTY_IMAGE_ATTRIBUTE = "data-iox-empty";
+/** The live site's blank: an SVG with no intrinsic size and nothing in it. */
+declare const EMPTY_IMAGE_SRC: string;
+/**
+ * The canvas blank: the same no-size SVG with `label` centred as a chip. The chip carries its own
+ * light ground, so it reads on every flavor's `surface-2`, light or dark; it is builder chrome, never
+ * site content. Width is estimated from the label length (an image cannot measure text).
+ */
+declare function emptyImageLabelSrc(label: string): string;
+/**
+ * The `src` a node's Image renders when its own source is empty: the canvas label (when `label` is
+ * given) or the live blank for a MARKED node; `null` — render exactly as before — for an unmarked
+ * node or one that has a source.
+ */
+declare function emptyImageSrc(node: {
+    elementStyle?: string | null;
+} | null | undefined, src: unknown, label?: string | null): string | null;
+
 /**
  * BRAND DERIVATION (flavors plan §6, F2): one colour in, an asserted accessible ramp out.
  *
@@ -8591,16 +8667,10 @@ declare function fontsForTokens(tokens: ReadonlyArray<DesignTokenLike> | null |
  */
 /** The 161 names of the contract's two tiers, plus its legacy aliases. */
 declare function specTokenNames(): ReadonlySet<string>;
-/**
- * Names a PRE-DS2 rule still reads, because changing them would restyle a saved legacy page (D5):
- * the brand ramp F2 shipped (`deriveBrandTokens`, e.g. the legacy switch's `brand-500`). Computed
- * from the shipped function — never retyped — and only ever legitimate in an UNMARKED rule.
- */
-declare function legacyTokenNames(): ReadonlySet<string>;
 /** Every distinct token a stylesheet READS (`var(--iox-x…)`), in first-seen order. */
 declare function tokenReferences(css: string): string[];
-/** The referenced names that are neither spec tokens, legacy names, nor in `alsoAllowed`. */
+/** The referenced names that are neither spec tokens nor in `alsoAllowed`. */
 declare function unknownTokenReferences(css: string, alsoAllowed?: Iterable<string>): string[];
 
-export { ACCENT_TOKEN_NAMES, BUTTON_VARIANT_TO_STYLE, DESIGN_TOKEN_GROUPS, DESIGN_TOKEN_TIERS, DESIGN_TOKEN_TYPES, ELEMENT_STYLES, ELEMENT_STYLE_MARKER_CLASS, ELEMENT_STYLE_STATES, ElementStyleState, FLAVOR_SPEC_VERSION, FONT_CATALOG, FONT_FAMILY_TOKENS, OwnedTraitLink, PALETTE_PRESETS, REDUCED_MOTION_OVERRIDES, REDUCED_TRANSPARENCY_OVERRIDES, REVERT_WINDOW_MS, SPEC_A11Y, SPEC_AXES, SPEC_BUTTON_VARIANT_TO_STYLE, SPEC_CONTRAST, SPEC_DEFAULT_ELEMENT_STYLE, SPEC_ELEMENT_STYLES, SPEC_FIELD_CLASS_BASELINE, SPEC_FLAVORS, SPEC_FLAVOR_PACKS, SPEC_FONTS, SPEC_FONT_ROLES, SPEC_LEGACY_ALIASES, SPEC_PALETTE_PRESETS, SPEC_SCHEMES, SPEC_SPRINGS, SPEC_TIERS, SPEC_TIER_IDS, SPEC_TOKEN_TYPES, SWISS_FLAVOR, USER_TOKEN_SOURCE, WCAG_AA_TEXT, apcaLc, applyElementStyle, applyHeadingLevelRule, buildFlavorTokens, buildFontFaceCss, compileSchemeCss, compileTokenCss, compileTokenCssBlocks, cssString, defaultDesignChoices, defaultElementStyleFor, deriveAccentTokens, deriveBrandTokens, elementStyleById, elementStyleClass, elementStyleClasses, elementStylesFor, flavorSourceStamp, fontsForTokens, isDesignTokenGroup, isDesignTokenTier, isDesignTokenType, legacyTokenNames, oklabToRgb, ownedTraitStatus, parseFontFamilies, parseHexColor, planFlavorRevert, planFlavorSeed, relativeLuminance, resolveTokenReferences, resolveTokenValues, revertAvailable, rgbToOklab, specTokenNames, springToLinear, styleKeyToKebab, switchElementStyle, syncElementStyleMarker, toHexColor, tokenReferences, tokensToDarkVarMap, tokensToVarMap, unknownTokenReferences, userFontStack, validateFlavorPack, wcagContrastRatio };
-export type { AccentBackgrounds, AccentTokenName, ApplyElementStyleResult, DensityId, DesignChoices, DesignMode, DesignTokenGroup, DesignTokenLike, DesignTokenRow, DesignTokenTier, DesignTokenType, ElementStyle, ElementStyleTarget, ElementStyleTraitLike, FlavorPack, FlavorPackV2, FlavorRevertPlan, FlavorRevertSnapshot, FlavorSeedPlan, FlavorSpecToken, FlavorTokenDef, FontDescriptor, FontFormat, FontPair, FontRoleToken, FontStyle, LinearSpring, MotionId, OkLab, OwnedTrait, OwnedTraitStatus, PalettePreset, ResolvedMode, Rgb, SchemeId, ShapeId, StoredDesignTokenRow, SwitchElementStyleResult, TokenCssBlocks, TokenCssOptions };
+export { ACCENT_TOKEN_NAMES, BUTTON_VARIANT_TO_STYLE, COLOR_SCHEMES, COLOR_SCHEME_TRAIT, COLOR_SCHEME_TYPES, ColorScheme, DESIGN_TOKEN_GROUPS, DESIGN_TOKEN_TIERS, DESIGN_TOKEN_TYPES, ELEMENT_STYLES, ELEMENT_STYLE_MARKER_CLASS, ELEMENT_STYLE_STATES, EMPTY_IMAGE_ATTRIBUTE, EMPTY_IMAGE_SRC, ElementStyleState, FLAVOR_SPEC_VERSION, FONT_CATALOG, FONT_FAMILY_TOKENS, OwnedTraitLink, PALETTE_PRESETS, REDUCED_MOTION_OVERRIDES, REDUCED_TRANSPARENCY_OVERRIDES, REVERT_WINDOW_MS, SPEC_A11Y, SPEC_AXES, SPEC_BUTTON_VARIANT_TO_STYLE, SPEC_CONTRAST, SPEC_DEFAULT_ELEMENT_STYLE, SPEC_ELEMENT_STYLES, SPEC_FIELD_CLASS_BASELINE, SPEC_FLAVORS, SPEC_FLAVOR_PACKS, SPEC_FONTS, SPEC_FONT_ROLES, SPEC_LEGACY_ALIASES, SPEC_PALETTE_PRESETS, SPEC_SCHEMES, SPEC_SPRINGS, SPEC_TIERS, SPEC_TIER_IDS, SPEC_TOKEN_TYPES, SWISS_FLAVOR, USER_TOKEN_SOURCE, WCAG_AA_TEXT, apcaLc, applyElementStyle, applyHeadingLevelRule, buildFlavorTokens, buildFontFaceCss, colorSchemeClass, colorSchemeOf, compileSchemeCss, compileTokenCss, compileTokenCssBlocks, cssString, defaultDesignChoices, defaultElementStyleFor, deriveAccentTokens, deriveBrandTokens, elementStyleById, elementStyleClass, elementStylesFor, emptyImageLabelSrc, emptyImageSrc, flavorSourceStamp, fontsForTokens, hasElementStyleMarker, isDesignTokenGroup, isDesignTokenTier, isDesignTokenType, nodeDesignClasses, oklabToRgb, ownedTraitStatus, parseFontFamilies, parseHexColor, planFlavorRevert, planFlavorSeed, relativeLuminance, resolveTokenReferences, resolveTokenValues, revertAvailable, rgbToOklab, specTokenNames, springToLinear, styleKeyToKebab, switchElementStyle, syncNodeDesignClasses, toHexColor, tokenReferences, tokensToDarkVarMap, tokensToVarMap, unknownTokenReferences, userFontStack, validateFlavorPack, wcagContrastRatio };
+export type { AccentBackgrounds, AccentTokenName, ApplyElementStyleResult, DensityId, DesignChoices, DesignClassSource, DesignMode, DesignTokenGroup, DesignTokenLike, DesignTokenRow, DesignTokenTier, DesignTokenType, ElementStyle, ElementStyleTarget, ElementStyleTraitLike, FlavorPack, FlavorPackV2, FlavorRevertPlan, FlavorRevertSnapshot, FlavorSeedPlan, FlavorSpecToken, FlavorTokenDef, FontDescriptor, FontFormat, FontPair, FontRoleToken, FontStyle, LinearSpring, MotionId, OkLab, OwnedTrait, OwnedTraitStatus, PalettePreset, ResolvedMode, Rgb, SchemeId, ShapeId, StoredDesignTokenRow, SwitchElementStyleResult, TokenCssBlocks, TokenCssOptions };

package/fesm2022/vectoriox-iox-ui-design-core.mjs

@@ -9890,33 +9890,16 @@ function switchElementStyle(target, fromId, toId, baseline = {}) {
 }
 /**
  * The element-style MARKER (design-system §3b-bis, spec `elementStyleMarker`). A node that wears an
- * element style renders `iox-es iox-es-<id>` in BOTH renderers; every piece of component CSS that
- * carries the system look is scoped to it, so a node saved before DS2 (no `elementStyle`) keeps its
- * exact pre-DS2 component CSS no matter which tokens the org holds. This is the ONLY thing a
- * renderer reads `elementStyle` for.
+ * element style renders `iox-es iox-es-<id>` in BOTH renderers, through the one node-class helper
+ * `nodeDesignClasses` (node-classes.ts); every piece of component CSS that carries the system look is
+ * scoped to it, so a node saved before DS2 (no `elementStyle`) keeps its exact pre-DS2 component CSS
+ * no matter which tokens the org holds.
  */
 const ELEMENT_STYLE_MARKER_CLASS = 'iox-es';
-const MARKER_PREFIX = `${ELEMENT_STYLE_MARKER_CLASS}-`;
+const MARKER_PREFIX$1 = `${ELEMENT_STYLE_MARKER_CLASS}-`;
 /** `iox-es-<id>` for a known style, else null — an unknown id never reaches a class attribute. */
 function elementStyleClass(id) {
-    return elementStyleById(id) ? `${MARKER_PREFIX}${id}` : null;
-}
-/** The marker classes a node renders: `'iox-es iox-es-<id>'`, or `''` for a node with no (known) style. */
-function elementStyleClasses(node) {
-    const own = elementStyleClass(node?.elementStyle);
-    return own ? `${ELEMENT_STYLE_MARKER_CLASS} ${own}` : '';
-}
-/** Make an element's marker match `elementStyle` — the live switch on the canvas, and the
- *  component path's one-time stamp. Removes a stale `iox-es-<old>`; touches no other class. */
-function syncElementStyleMarker(el, elementStyle) {
-    if (!el?.classList)
-        return;
-    const stale = Array.from(el.classList).filter(c => c === ELEMENT_STYLE_MARKER_CLASS || c.startsWith(MARKER_PREFIX));
-    for (const c of stale)
-        el.classList.remove(c);
-    const classes = elementStyleClasses({ elementStyle });
-    if (classes)
-        el.classList.add(...classes.split(' '));
+    return elementStyleById(id) ? `${MARKER_PREFIX$1}${id}` : null;
 }
 /**
  * The spec's `headingLevelRule`: changing a Heading's level moves it to the new level's DEFAULT
@@ -9934,6 +9917,117 @@ function applyHeadingLevelRule(target, oldLevel, newLevel, baseline = {}) {
     return switchElementStyle(target, from, to, baseline);
 }
 
+/**
+ * The design-system classes a node renders, in BOTH renderers (builder canvas, engine component
+ * path, engine string path) — ONE helper, so the three can never disagree about which class a node
+ * carries:
+ *
+ * - the element-style MARKER `iox-es iox-es-<id>` (design-system §3b-bis) — component CSS carrying
+ *   the system look is scoped to it, so a node saved before DS2 keeps its pre-DS2 look;
+ * - the section colour scheme `iox-scheme-<id>` (§3c) for a non-default `colorScheme` — the class
+ *   `compileSchemeCss` re-declares tokens on, so everything inside re-resolves.
+ *
+ * Renderers read `elementStyle` and `colorScheme` for exactly this and nothing else.
+ */
+/** The section colour schemes — the contract's `schemes` keys. */
+var ColorScheme;
+(function (ColorScheme) {
+    ColorScheme["Default"] = "default";
+    ColorScheme["Subtle"] = "subtle";
+    ColorScheme["Inverse"] = "inverse";
+    ColorScheme["Accent"] = "accent";
+})(ColorScheme || (ColorScheme = {}));
+/** The content trait (stored in `props`, not a style prop) that picks a node's scheme. */
+const COLOR_SCHEME_TRAIT = 'colorScheme';
+/** The node types that offer a scheme (spec §3c: Section/Container; LinkedContainer is a Container that links). */
+const COLOR_SCHEME_TYPES = ['Section', 'Container', 'LinkedContainer'];
+/** Every scheme in contract order, with the contract's label (Default · Subtle · Inverse · Brand). */
+const COLOR_SCHEMES = Object.keys(SPEC_SCHEMES).map(id => ({ id, label: SPEC_SCHEMES[id].label }));
+const SCHEME_IDS = new Set(Object.keys(SPEC_SCHEMES));
+const SCHEME_PREFIX = 'iox-scheme-';
+const MARKER_PREFIX = `${ELEMENT_STYLE_MARKER_CLASS}-`;
+/** `iox-scheme-<id>` for a known NON-default scheme, else null — an unknown id never reaches a class attribute. */
+function colorSchemeClass(id) {
+    return typeof id === 'string' && id !== ColorScheme.Default && SCHEME_IDS.has(id) ? `${SCHEME_PREFIX}${id}` : null;
+}
+/** A node's `colorScheme`, from `props` (serialized) or its trait (builder). */
+function colorSchemeOf(node) {
+    if (!node)
+        return null;
+    const fromProps = node.props?.[COLOR_SCHEME_TRAIT];
+    if (fromProps !== undefined)
+        return typeof fromProps === 'string' ? fromProps : null;
+    const trait = node.traits?.find(t => t?.name === COLOR_SCHEME_TRAIT)?.default;
+    return typeof trait === 'string' ? trait : null;
+}
+/** True when the node wears a known element style — the marker is on it. */
+function hasElementStyleMarker(node) {
+    return elementStyleClass(node?.elementStyle) !== null;
+}
+/** The classes a node renders: `'iox-es iox-es-card iox-scheme-inverse'`, or `''` for none. */
+function nodeDesignClasses(node) {
+    const marker = elementStyleClass(node?.elementStyle);
+    return [marker ? `${ELEMENT_STYLE_MARKER_CLASS} ${marker}` : '', colorSchemeClass(colorSchemeOf(node)) ?? '']
+        .filter(Boolean).join(' ');
+}
+const isDesignClass = (c) => c === ELEMENT_STYLE_MARKER_CLASS || c.startsWith(MARKER_PREFIX) || c.startsWith(SCHEME_PREFIX);
+/** Make an element's design classes match the node — the live switch on the canvas and the
+ *  component path's one-time stamp. Removes stale ones; touches no other class. */
+function syncNodeDesignClasses(el, node) {
+    if (!el?.classList)
+        return;
+    for (const c of Array.from(el.classList).filter(isDesignClass))
+        el.classList.remove(c);
+    const classes = nodeDesignClasses(node);
+    if (classes)
+        el.classList.add(...classes.split(' '));
+}
+
+/**
+ * Empty images (design-system DS3). A MARKED Image (`.iox-es-media`) with no source renders a box in
+ * the `surface-2` token with its aspect ratio kept — on the canvas with an "Add image" label, on the
+ * live site with nothing in it. An UNMARKED empty Image renders exactly as before (no `src`).
+ *
+ * Why a placeholder `src` instead of a src-less `<img>`: Chromium paints a src-less image as a broken
+ * image (a frame, an icon and the alt text) and ignores `aspect-ratio` once alt text is present, and no
+ * pseudo-element paints on an `<img>`. A real image with no natural size of its own (an SVG with no
+ * width/height) is a proper replaced element: `aspect-ratio`/`object-fit` apply, the background shows
+ * through, and its default object size (300×150) is the SAME for the canvas label and the live blank,
+ * so both renderers lay the box out identically. The fill itself is shared CSS (`iox-design.css`)
+ * keyed on {@link EMPTY_IMAGE_ATTRIBUTE}.
+ */
+/** Set on a marked Image while it has no source — the hook the shared fill rule keys on. */
+const EMPTY_IMAGE_ATTRIBUTE = 'data-iox-empty';
+const svgUri = (svg) => `data:image/svg+xml,${encodeURIComponent(svg)}`;
+/** The live site's blank: an SVG with no intrinsic size and nothing in it. */
+const EMPTY_IMAGE_SRC = svgUri('<svg xmlns="http://www.w3.org/2000/svg"/>');
+const xmlEscape = (s) => s.replace(/[&<>"']/g, c => `&#${c.charCodeAt(0)};`);
+/**
+ * The canvas blank: the same no-size SVG with `label` centred as a chip. The chip carries its own
+ * light ground, so it reads on every flavor's `surface-2`, light or dark; it is builder chrome, never
+ * site content. Width is estimated from the label length (an image cannot measure text).
+ */
+function emptyImageLabelSrc(label) {
+    const text = xmlEscape(label);
+    const width = Math.round(28 + label.length * 7);
+    return svgUri('<svg xmlns="http://www.w3.org/2000/svg"><svg x="50%" y="50%" overflow="visible">'
+        + `<rect x="${-width / 2}" y="-13" width="${width}" height="26" rx="13" fill="#ffffff" fill-opacity="0.92"/>`
+        + '<text x="0" y="0" text-anchor="middle" dominant-baseline="central" font-family="system-ui, -apple-system, \'Segoe UI\', sans-serif" '
+        + `font-size="12" font-weight="500" fill="#1f1d1b">${text}</text></svg></svg>`);
+}
+/**
+ * The `src` a node's Image renders when its own source is empty: the canvas label (when `label` is
+ * given) or the live blank for a MARKED node; `null` — render exactly as before — for an unmarked
+ * node or one that has a source.
+ */
+function emptyImageSrc(node, src, label) {
+    if (src != null && src !== '')
+        return null;
+    if (!hasElementStyleMarker(node))
+        return null;
+    return label ? emptyImageLabelSrc(label) : EMPTY_IMAGE_SRC;
+}
+
 function parseHexColor(hex) {
     const m = /^#?([0-9a-f]{3}|[0-9a-f]{6})$/i.exec((hex ?? '').trim());
     if (!m)
@@ -10536,25 +10630,16 @@ function specTokenNames() {
         ...Object.keys(SPEC_LEGACY_ALIASES),
     ]);
 }
-/**
- * Names a PRE-DS2 rule still reads, because changing them would restyle a saved legacy page (D5):
- * the brand ramp F2 shipped (`deriveBrandTokens`, e.g. the legacy switch's `brand-500`). Computed
- * from the shipped function — never retyped — and only ever legitimate in an UNMARKED rule.
- */
-function legacyTokenNames() {
-    return new Set(deriveBrandTokens('#808080', {}).map(t => t.name));
-}
 const REFERENCE = /var\(\s*--iox-([a-z0-9-]+)/gi;
 /** Every distinct token a stylesheet READS (`var(--iox-x…)`), in first-seen order. */
 function tokenReferences(css) {
     return [...new Set(Array.from(css.matchAll(REFERENCE), m => m[1]))];
 }
-/** The referenced names that are neither spec tokens, legacy names, nor in `alsoAllowed`. */
+/** The referenced names that are neither spec tokens nor in `alsoAllowed`. */
 function unknownTokenReferences(css, alsoAllowed = []) {
     const spec = specTokenNames();
-    const legacy = legacyTokenNames();
     const extra = new Set(alsoAllowed);
-    return tokenReferences(css).filter(name => !spec.has(name) && !legacy.has(name) && !extra.has(name));
+    return tokenReferences(css).filter(name => !spec.has(name) && !extra.has(name));
 }
 
 /**
@@ -10572,5 +10657,5 @@ function unknownTokenReferences(css, alsoAllowed = []) {
  * Generated bundle index. Do not edit.
  */
 
-export { ACCENT_TOKEN_NAMES, BUTTON_VARIANT_TO_STYLE, DESIGN_TOKEN_GROUPS, DESIGN_TOKEN_TIERS, DESIGN_TOKEN_TYPES, ELEMENT_STYLES, ELEMENT_STYLE_MARKER_CLASS, ELEMENT_STYLE_STATES, ElementStyleState, FLAVOR_SPEC_VERSION, FONT_CATALOG, FONT_FAMILY_TOKENS, OwnedTraitLink, PALETTE_PRESETS, REDUCED_MOTION_OVERRIDES, REDUCED_TRANSPARENCY_OVERRIDES, REVERT_WINDOW_MS, SPEC_A11Y, SPEC_AXES, SPEC_BUTTON_VARIANT_TO_STYLE, SPEC_CONTRAST, SPEC_DEFAULT_ELEMENT_STYLE, SPEC_ELEMENT_STYLES, SPEC_FIELD_CLASS_BASELINE, SPEC_FLAVORS, SPEC_FLAVOR_PACKS, SPEC_FONTS, SPEC_FONT_ROLES, SPEC_LEGACY_ALIASES, SPEC_PALETTE_PRESETS, SPEC_SCHEMES, SPEC_SPRINGS, SPEC_TIERS, SPEC_TIER_IDS, SPEC_TOKEN_TYPES, SWISS_FLAVOR, USER_TOKEN_SOURCE, WCAG_AA_TEXT, apcaLc, applyElementStyle, applyHeadingLevelRule, buildFlavorTokens, buildFontFaceCss, compileSchemeCss, compileTokenCss, compileTokenCssBlocks, cssString, defaultDesignChoices, defaultElementStyleFor, deriveAccentTokens, deriveBrandTokens, elementStyleById, elementStyleClass, elementStyleClasses, elementStylesFor, flavorSourceStamp, fontsForTokens, isDesignTokenGroup, isDesignTokenTier, isDesignTokenType, legacyTokenNames, oklabToRgb, ownedTraitStatus, parseFontFamilies, parseHexColor, planFlavorRevert, planFlavorSeed, relativeLuminance, resolveTokenReferences, resolveTokenValues, revertAvailable, rgbToOklab, specTokenNames, springToLinear, styleKeyToKebab, switchElementStyle, syncElementStyleMarker, toHexColor, tokenReferences, tokensToDarkVarMap, tokensToVarMap, unknownTokenReferences, userFontStack, validateFlavorPack, wcagContrastRatio };
+export { ACCENT_TOKEN_NAMES, BUTTON_VARIANT_TO_STYLE, COLOR_SCHEMES, COLOR_SCHEME_TRAIT, COLOR_SCHEME_TYPES, ColorScheme, DESIGN_TOKEN_GROUPS, DESIGN_TOKEN_TIERS, DESIGN_TOKEN_TYPES, ELEMENT_STYLES, ELEMENT_STYLE_MARKER_CLASS, ELEMENT_STYLE_STATES, EMPTY_IMAGE_ATTRIBUTE, EMPTY_IMAGE_SRC, ElementStyleState, FLAVOR_SPEC_VERSION, FONT_CATALOG, FONT_FAMILY_TOKENS, OwnedTraitLink, PALETTE_PRESETS, REDUCED_MOTION_OVERRIDES, REDUCED_TRANSPARENCY_OVERRIDES, REVERT_WINDOW_MS, SPEC_A11Y, SPEC_AXES, SPEC_BUTTON_VARIANT_TO_STYLE, SPEC_CONTRAST, SPEC_DEFAULT_ELEMENT_STYLE, SPEC_ELEMENT_STYLES, SPEC_FIELD_CLASS_BASELINE, SPEC_FLAVORS, SPEC_FLAVOR_PACKS, SPEC_FONTS, SPEC_FONT_ROLES, SPEC_LEGACY_ALIASES, SPEC_PALETTE_PRESETS, SPEC_SCHEMES, SPEC_SPRINGS, SPEC_TIERS, SPEC_TIER_IDS, SPEC_TOKEN_TYPES, SWISS_FLAVOR, USER_TOKEN_SOURCE, WCAG_AA_TEXT, apcaLc, applyElementStyle, applyHeadingLevelRule, buildFlavorTokens, buildFontFaceCss, colorSchemeClass, colorSchemeOf, compileSchemeCss, compileTokenCss, compileTokenCssBlocks, cssString, defaultDesignChoices, defaultElementStyleFor, deriveAccentTokens, deriveBrandTokens, elementStyleById, elementStyleClass, elementStylesFor, emptyImageLabelSrc, emptyImageSrc, flavorSourceStamp, fontsForTokens, hasElementStyleMarker, isDesignTokenGroup, isDesignTokenTier, isDesignTokenType, nodeDesignClasses, oklabToRgb, ownedTraitStatus, parseFontFamilies, parseHexColor, planFlavorRevert, planFlavorSeed, relativeLuminance, resolveTokenReferences, resolveTokenValues, revertAvailable, rgbToOklab, specTokenNames, springToLinear, styleKeyToKebab, switchElementStyle, syncNodeDesignClasses, toHexColor, tokenReferences, tokensToDarkVarMap, tokensToVarMap, unknownTokenReferences, userFontStack, validateFlavorPack, wcagContrastRatio };
 //# sourceMappingURL=vectoriox-iox-ui-design-core.mjs.map