@vectoriox/iox-ui 5.13.1 → 5.14.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/design-core/index.d.ts +91 -15
- package/fesm2022/vectoriox-iox-ui-design-core.mjs +118 -24
- package/fesm2022/vectoriox-iox-ui-design-core.mjs.map +1 -1
- package/fesm2022/vectoriox-iox-ui.mjs +39 -6
- package/fesm2022/vectoriox-iox-ui.mjs.map +1 -1
- package/index.d.ts +25 -4
- package/package.json +1 -1
- package/src/design-core/element-styles.ts +4 -20
- package/src/design-core/empty-image.ts +52 -0
- package/src/design-core/node-classes.ts +82 -0
- package/src/design-core/public-api.ts +2 -0
- package/styles/iox-design.css +30 -0
package/design-core/index.d.ts
CHANGED
|
@@ -8379,23 +8379,14 @@ declare function ownedTraitStatus(target: ElementStyleTarget, id: string): Owned
|
|
|
8379
8379
|
declare function switchElementStyle(target: ElementStyleTarget, fromId: string | null | undefined, toId: string, baseline?: Readonly<Record<string, unknown>>): SwitchElementStyleResult;
|
|
8380
8380
|
/**
|
|
8381
8381
|
* The element-style MARKER (design-system §3b-bis, spec `elementStyleMarker`). A node that wears an
|
|
8382
|
-
* element style renders `iox-es iox-es-<id>` in BOTH renderers
|
|
8383
|
-
*
|
|
8384
|
-
*
|
|
8385
|
-
*
|
|
8382
|
+
* element style renders `iox-es iox-es-<id>` in BOTH renderers, through the one node-class helper
|
|
8383
|
+
* `nodeDesignClasses` (node-classes.ts); every piece of component CSS that carries the system look is
|
|
8384
|
+
* scoped to it, so a node saved before DS2 (no `elementStyle`) keeps its exact pre-DS2 component CSS
|
|
8385
|
+
* no matter which tokens the org holds.
|
|
8386
8386
|
*/
|
|
8387
8387
|
declare const ELEMENT_STYLE_MARKER_CLASS = "iox-es";
|
|
8388
8388
|
/** `iox-es-<id>` for a known style, else null — an unknown id never reaches a class attribute. */
|
|
8389
8389
|
declare function elementStyleClass(id: string | null | undefined): string | null;
|
|
8390
|
-
/** The marker classes a node renders: `'iox-es iox-es-<id>'`, or `''` for a node with no (known) style. */
|
|
8391
|
-
declare function elementStyleClasses(node: {
|
|
8392
|
-
elementStyle?: string | null;
|
|
8393
|
-
} | null | undefined): string;
|
|
8394
|
-
/** Make an element's marker match `elementStyle` — the live switch on the canvas, and the
|
|
8395
|
-
* component path's one-time stamp. Removes a stale `iox-es-<old>`; touches no other class. */
|
|
8396
|
-
declare function syncElementStyleMarker(el: {
|
|
8397
|
-
classList: DOMTokenList;
|
|
8398
|
-
} | null | undefined, elementStyle: string | null | undefined): void;
|
|
8399
8390
|
/**
|
|
8400
8391
|
* The spec's `headingLevelRule`: changing a Heading's level moves it to the new level's DEFAULT
|
|
8401
8392
|
* style only when it still wears its old level's default (author changes kept, via
|
|
@@ -8404,6 +8395,91 @@ declare function syncElementStyleMarker(el: {
|
|
|
8404
8395
|
*/
|
|
8405
8396
|
declare function applyHeadingLevelRule(target: ElementStyleTarget, oldLevel: string | null | undefined, newLevel: string | null | undefined, baseline?: Readonly<Record<string, unknown>>): SwitchElementStyleResult | null;
|
|
8406
8397
|
|
|
8398
|
+
/**
|
|
8399
|
+
* The design-system classes a node renders, in BOTH renderers (builder canvas, engine component
|
|
8400
|
+
* path, engine string path) — ONE helper, so the three can never disagree about which class a node
|
|
8401
|
+
* carries:
|
|
8402
|
+
*
|
|
8403
|
+
* - the element-style MARKER `iox-es iox-es-<id>` (design-system §3b-bis) — component CSS carrying
|
|
8404
|
+
* the system look is scoped to it, so a node saved before DS2 keeps its pre-DS2 look;
|
|
8405
|
+
* - the section colour scheme `iox-scheme-<id>` (§3c) for a non-default `colorScheme` — the class
|
|
8406
|
+
* `compileSchemeCss` re-declares tokens on, so everything inside re-resolves.
|
|
8407
|
+
*
|
|
8408
|
+
* Renderers read `elementStyle` and `colorScheme` for exactly this and nothing else.
|
|
8409
|
+
*/
|
|
8410
|
+
/** The section colour schemes — the contract's `schemes` keys. */
|
|
8411
|
+
declare enum ColorScheme {
|
|
8412
|
+
Default = "default",
|
|
8413
|
+
Subtle = "subtle",
|
|
8414
|
+
Inverse = "inverse",
|
|
8415
|
+
Accent = "accent"
|
|
8416
|
+
}
|
|
8417
|
+
/** The content trait (stored in `props`, not a style prop) that picks a node's scheme. */
|
|
8418
|
+
declare const COLOR_SCHEME_TRAIT = "colorScheme";
|
|
8419
|
+
/** The node types that offer a scheme (spec §3c: Section/Container; LinkedContainer is a Container that links). */
|
|
8420
|
+
declare const COLOR_SCHEME_TYPES: ReadonlyArray<string>;
|
|
8421
|
+
/** Every scheme in contract order, with the contract's label (Default · Subtle · Inverse · Brand). */
|
|
8422
|
+
declare const COLOR_SCHEMES: ReadonlyArray<{
|
|
8423
|
+
readonly id: ColorScheme;
|
|
8424
|
+
readonly label: string;
|
|
8425
|
+
}>;
|
|
8426
|
+
/** `iox-scheme-<id>` for a known NON-default scheme, else null — an unknown id never reaches a class attribute. */
|
|
8427
|
+
declare function colorSchemeClass(id: unknown): string | null;
|
|
8428
|
+
/** The node shapes this module reads: a serialized node (`props`) or a builder node (`traits[]`). */
|
|
8429
|
+
interface DesignClassSource {
|
|
8430
|
+
elementStyle?: string | null;
|
|
8431
|
+
props?: Readonly<Record<string, unknown>> | null;
|
|
8432
|
+
traits?: ReadonlyArray<{
|
|
8433
|
+
name?: string;
|
|
8434
|
+
default?: unknown;
|
|
8435
|
+
}> | null;
|
|
8436
|
+
}
|
|
8437
|
+
/** A node's `colorScheme`, from `props` (serialized) or its trait (builder). */
|
|
8438
|
+
declare function colorSchemeOf(node: DesignClassSource | null | undefined): string | null;
|
|
8439
|
+
/** True when the node wears a known element style — the marker is on it. */
|
|
8440
|
+
declare function hasElementStyleMarker(node: {
|
|
8441
|
+
elementStyle?: string | null;
|
|
8442
|
+
} | null | undefined): boolean;
|
|
8443
|
+
/** The classes a node renders: `'iox-es iox-es-card iox-scheme-inverse'`, or `''` for none. */
|
|
8444
|
+
declare function nodeDesignClasses(node: DesignClassSource | null | undefined): string;
|
|
8445
|
+
/** Make an element's design classes match the node — the live switch on the canvas and the
|
|
8446
|
+
* component path's one-time stamp. Removes stale ones; touches no other class. */
|
|
8447
|
+
declare function syncNodeDesignClasses(el: {
|
|
8448
|
+
classList: DOMTokenList;
|
|
8449
|
+
} | null | undefined, node: DesignClassSource | null | undefined): void;
|
|
8450
|
+
|
|
8451
|
+
/**
|
|
8452
|
+
* Empty images (design-system DS3). A MARKED Image (`.iox-es-media`) with no source renders a box in
|
|
8453
|
+
* the `surface-2` token with its aspect ratio kept — on the canvas with an "Add image" label, on the
|
|
8454
|
+
* live site with nothing in it. An UNMARKED empty Image renders exactly as before (no `src`).
|
|
8455
|
+
*
|
|
8456
|
+
* Why a placeholder `src` instead of a src-less `<img>`: Chromium paints a src-less image as a broken
|
|
8457
|
+
* image (a frame, an icon and the alt text) and ignores `aspect-ratio` once alt text is present, and no
|
|
8458
|
+
* pseudo-element paints on an `<img>`. A real image with no natural size of its own (an SVG with no
|
|
8459
|
+
* width/height) is a proper replaced element: `aspect-ratio`/`object-fit` apply, the background shows
|
|
8460
|
+
* through, and its default object size (300×150) is the SAME for the canvas label and the live blank,
|
|
8461
|
+
* so both renderers lay the box out identically. The fill itself is shared CSS (`iox-design.css`)
|
|
8462
|
+
* keyed on {@link EMPTY_IMAGE_ATTRIBUTE}.
|
|
8463
|
+
*/
|
|
8464
|
+
/** Set on a marked Image while it has no source — the hook the shared fill rule keys on. */
|
|
8465
|
+
declare const EMPTY_IMAGE_ATTRIBUTE = "data-iox-empty";
|
|
8466
|
+
/** The live site's blank: an SVG with no intrinsic size and nothing in it. */
|
|
8467
|
+
declare const EMPTY_IMAGE_SRC: string;
|
|
8468
|
+
/**
|
|
8469
|
+
* The canvas blank: the same no-size SVG with `label` centred as a chip. The chip carries its own
|
|
8470
|
+
* light ground, so it reads on every flavor's `surface-2`, light or dark; it is builder chrome, never
|
|
8471
|
+
* site content. Width is estimated from the label length (an image cannot measure text).
|
|
8472
|
+
*/
|
|
8473
|
+
declare function emptyImageLabelSrc(label: string): string;
|
|
8474
|
+
/**
|
|
8475
|
+
* The `src` a node's Image renders when its own source is empty: the canvas label (when `label` is
|
|
8476
|
+
* given) or the live blank for a MARKED node; `null` — render exactly as before — for an unmarked
|
|
8477
|
+
* node or one that has a source.
|
|
8478
|
+
*/
|
|
8479
|
+
declare function emptyImageSrc(node: {
|
|
8480
|
+
elementStyle?: string | null;
|
|
8481
|
+
} | null | undefined, src: unknown, label?: string | null): string | null;
|
|
8482
|
+
|
|
8407
8483
|
/**
|
|
8408
8484
|
* BRAND DERIVATION (flavors plan §6, F2): one colour in, an asserted accessible ramp out.
|
|
8409
8485
|
*
|
|
@@ -8596,5 +8672,5 @@ declare function tokenReferences(css: string): string[];
|
|
|
8596
8672
|
/** The referenced names that are neither spec tokens nor in `alsoAllowed`. */
|
|
8597
8673
|
declare function unknownTokenReferences(css: string, alsoAllowed?: Iterable<string>): string[];
|
|
8598
8674
|
|
|
8599
|
-
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,
|
|
8600
|
-
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 };
|
|
8675
|
+
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 };
|
|
8676
|
+
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 };
|
|
@@ -9890,33 +9890,16 @@ function switchElementStyle(target, fromId, toId, baseline = {}) {
|
|
|
9890
9890
|
}
|
|
9891
9891
|
/**
|
|
9892
9892
|
* The element-style MARKER (design-system §3b-bis, spec `elementStyleMarker`). A node that wears an
|
|
9893
|
-
* element style renders `iox-es iox-es-<id>` in BOTH renderers
|
|
9894
|
-
*
|
|
9895
|
-
*
|
|
9896
|
-
*
|
|
9893
|
+
* element style renders `iox-es iox-es-<id>` in BOTH renderers, through the one node-class helper
|
|
9894
|
+
* `nodeDesignClasses` (node-classes.ts); every piece of component CSS that carries the system look is
|
|
9895
|
+
* scoped to it, so a node saved before DS2 (no `elementStyle`) keeps its exact pre-DS2 component CSS
|
|
9896
|
+
* no matter which tokens the org holds.
|
|
9897
9897
|
*/
|
|
9898
9898
|
const ELEMENT_STYLE_MARKER_CLASS = 'iox-es';
|
|
9899
|
-
const MARKER_PREFIX = `${ELEMENT_STYLE_MARKER_CLASS}-`;
|
|
9899
|
+
const MARKER_PREFIX$1 = `${ELEMENT_STYLE_MARKER_CLASS}-`;
|
|
9900
9900
|
/** `iox-es-<id>` for a known style, else null — an unknown id never reaches a class attribute. */
|
|
9901
9901
|
function elementStyleClass(id) {
|
|
9902
|
-
return elementStyleById(id) ? `${MARKER_PREFIX}${id}` : null;
|
|
9903
|
-
}
|
|
9904
|
-
/** The marker classes a node renders: `'iox-es iox-es-<id>'`, or `''` for a node with no (known) style. */
|
|
9905
|
-
function elementStyleClasses(node) {
|
|
9906
|
-
const own = elementStyleClass(node?.elementStyle);
|
|
9907
|
-
return own ? `${ELEMENT_STYLE_MARKER_CLASS} ${own}` : '';
|
|
9908
|
-
}
|
|
9909
|
-
/** Make an element's marker match `elementStyle` — the live switch on the canvas, and the
|
|
9910
|
-
* component path's one-time stamp. Removes a stale `iox-es-<old>`; touches no other class. */
|
|
9911
|
-
function syncElementStyleMarker(el, elementStyle) {
|
|
9912
|
-
if (!el?.classList)
|
|
9913
|
-
return;
|
|
9914
|
-
const stale = Array.from(el.classList).filter(c => c === ELEMENT_STYLE_MARKER_CLASS || c.startsWith(MARKER_PREFIX));
|
|
9915
|
-
for (const c of stale)
|
|
9916
|
-
el.classList.remove(c);
|
|
9917
|
-
const classes = elementStyleClasses({ elementStyle });
|
|
9918
|
-
if (classes)
|
|
9919
|
-
el.classList.add(...classes.split(' '));
|
|
9902
|
+
return elementStyleById(id) ? `${MARKER_PREFIX$1}${id}` : null;
|
|
9920
9903
|
}
|
|
9921
9904
|
/**
|
|
9922
9905
|
* 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 = {}) {
|
|
|
9934
9917
|
return switchElementStyle(target, from, to, baseline);
|
|
9935
9918
|
}
|
|
9936
9919
|
|
|
9920
|
+
/**
|
|
9921
|
+
* The design-system classes a node renders, in BOTH renderers (builder canvas, engine component
|
|
9922
|
+
* path, engine string path) — ONE helper, so the three can never disagree about which class a node
|
|
9923
|
+
* carries:
|
|
9924
|
+
*
|
|
9925
|
+
* - the element-style MARKER `iox-es iox-es-<id>` (design-system §3b-bis) — component CSS carrying
|
|
9926
|
+
* the system look is scoped to it, so a node saved before DS2 keeps its pre-DS2 look;
|
|
9927
|
+
* - the section colour scheme `iox-scheme-<id>` (§3c) for a non-default `colorScheme` — the class
|
|
9928
|
+
* `compileSchemeCss` re-declares tokens on, so everything inside re-resolves.
|
|
9929
|
+
*
|
|
9930
|
+
* Renderers read `elementStyle` and `colorScheme` for exactly this and nothing else.
|
|
9931
|
+
*/
|
|
9932
|
+
/** The section colour schemes — the contract's `schemes` keys. */
|
|
9933
|
+
var ColorScheme;
|
|
9934
|
+
(function (ColorScheme) {
|
|
9935
|
+
ColorScheme["Default"] = "default";
|
|
9936
|
+
ColorScheme["Subtle"] = "subtle";
|
|
9937
|
+
ColorScheme["Inverse"] = "inverse";
|
|
9938
|
+
ColorScheme["Accent"] = "accent";
|
|
9939
|
+
})(ColorScheme || (ColorScheme = {}));
|
|
9940
|
+
/** The content trait (stored in `props`, not a style prop) that picks a node's scheme. */
|
|
9941
|
+
const COLOR_SCHEME_TRAIT = 'colorScheme';
|
|
9942
|
+
/** The node types that offer a scheme (spec §3c: Section/Container; LinkedContainer is a Container that links). */
|
|
9943
|
+
const COLOR_SCHEME_TYPES = ['Section', 'Container', 'LinkedContainer'];
|
|
9944
|
+
/** Every scheme in contract order, with the contract's label (Default · Subtle · Inverse · Brand). */
|
|
9945
|
+
const COLOR_SCHEMES = Object.keys(SPEC_SCHEMES).map(id => ({ id, label: SPEC_SCHEMES[id].label }));
|
|
9946
|
+
const SCHEME_IDS = new Set(Object.keys(SPEC_SCHEMES));
|
|
9947
|
+
const SCHEME_PREFIX = 'iox-scheme-';
|
|
9948
|
+
const MARKER_PREFIX = `${ELEMENT_STYLE_MARKER_CLASS}-`;
|
|
9949
|
+
/** `iox-scheme-<id>` for a known NON-default scheme, else null — an unknown id never reaches a class attribute. */
|
|
9950
|
+
function colorSchemeClass(id) {
|
|
9951
|
+
return typeof id === 'string' && id !== ColorScheme.Default && SCHEME_IDS.has(id) ? `${SCHEME_PREFIX}${id}` : null;
|
|
9952
|
+
}
|
|
9953
|
+
/** A node's `colorScheme`, from `props` (serialized) or its trait (builder). */
|
|
9954
|
+
function colorSchemeOf(node) {
|
|
9955
|
+
if (!node)
|
|
9956
|
+
return null;
|
|
9957
|
+
const fromProps = node.props?.[COLOR_SCHEME_TRAIT];
|
|
9958
|
+
if (fromProps !== undefined)
|
|
9959
|
+
return typeof fromProps === 'string' ? fromProps : null;
|
|
9960
|
+
const trait = node.traits?.find(t => t?.name === COLOR_SCHEME_TRAIT)?.default;
|
|
9961
|
+
return typeof trait === 'string' ? trait : null;
|
|
9962
|
+
}
|
|
9963
|
+
/** True when the node wears a known element style — the marker is on it. */
|
|
9964
|
+
function hasElementStyleMarker(node) {
|
|
9965
|
+
return elementStyleClass(node?.elementStyle) !== null;
|
|
9966
|
+
}
|
|
9967
|
+
/** The classes a node renders: `'iox-es iox-es-card iox-scheme-inverse'`, or `''` for none. */
|
|
9968
|
+
function nodeDesignClasses(node) {
|
|
9969
|
+
const marker = elementStyleClass(node?.elementStyle);
|
|
9970
|
+
return [marker ? `${ELEMENT_STYLE_MARKER_CLASS} ${marker}` : '', colorSchemeClass(colorSchemeOf(node)) ?? '']
|
|
9971
|
+
.filter(Boolean).join(' ');
|
|
9972
|
+
}
|
|
9973
|
+
const isDesignClass = (c) => c === ELEMENT_STYLE_MARKER_CLASS || c.startsWith(MARKER_PREFIX) || c.startsWith(SCHEME_PREFIX);
|
|
9974
|
+
/** Make an element's design classes match the node — the live switch on the canvas and the
|
|
9975
|
+
* component path's one-time stamp. Removes stale ones; touches no other class. */
|
|
9976
|
+
function syncNodeDesignClasses(el, node) {
|
|
9977
|
+
if (!el?.classList)
|
|
9978
|
+
return;
|
|
9979
|
+
for (const c of Array.from(el.classList).filter(isDesignClass))
|
|
9980
|
+
el.classList.remove(c);
|
|
9981
|
+
const classes = nodeDesignClasses(node);
|
|
9982
|
+
if (classes)
|
|
9983
|
+
el.classList.add(...classes.split(' '));
|
|
9984
|
+
}
|
|
9985
|
+
|
|
9986
|
+
/**
|
|
9987
|
+
* Empty images (design-system DS3). A MARKED Image (`.iox-es-media`) with no source renders a box in
|
|
9988
|
+
* the `surface-2` token with its aspect ratio kept — on the canvas with an "Add image" label, on the
|
|
9989
|
+
* live site with nothing in it. An UNMARKED empty Image renders exactly as before (no `src`).
|
|
9990
|
+
*
|
|
9991
|
+
* Why a placeholder `src` instead of a src-less `<img>`: Chromium paints a src-less image as a broken
|
|
9992
|
+
* image (a frame, an icon and the alt text) and ignores `aspect-ratio` once alt text is present, and no
|
|
9993
|
+
* pseudo-element paints on an `<img>`. A real image with no natural size of its own (an SVG with no
|
|
9994
|
+
* width/height) is a proper replaced element: `aspect-ratio`/`object-fit` apply, the background shows
|
|
9995
|
+
* through, and its default object size (300×150) is the SAME for the canvas label and the live blank,
|
|
9996
|
+
* so both renderers lay the box out identically. The fill itself is shared CSS (`iox-design.css`)
|
|
9997
|
+
* keyed on {@link EMPTY_IMAGE_ATTRIBUTE}.
|
|
9998
|
+
*/
|
|
9999
|
+
/** Set on a marked Image while it has no source — the hook the shared fill rule keys on. */
|
|
10000
|
+
const EMPTY_IMAGE_ATTRIBUTE = 'data-iox-empty';
|
|
10001
|
+
const svgUri = (svg) => `data:image/svg+xml,${encodeURIComponent(svg)}`;
|
|
10002
|
+
/** The live site's blank: an SVG with no intrinsic size and nothing in it. */
|
|
10003
|
+
const EMPTY_IMAGE_SRC = svgUri('<svg xmlns="http://www.w3.org/2000/svg"/>');
|
|
10004
|
+
const xmlEscape = (s) => s.replace(/[&<>"']/g, c => `&#${c.charCodeAt(0)};`);
|
|
10005
|
+
/**
|
|
10006
|
+
* The canvas blank: the same no-size SVG with `label` centred as a chip. The chip carries its own
|
|
10007
|
+
* light ground, so it reads on every flavor's `surface-2`, light or dark; it is builder chrome, never
|
|
10008
|
+
* site content. Width is estimated from the label length (an image cannot measure text).
|
|
10009
|
+
*/
|
|
10010
|
+
function emptyImageLabelSrc(label) {
|
|
10011
|
+
const text = xmlEscape(label);
|
|
10012
|
+
const width = Math.round(28 + label.length * 7);
|
|
10013
|
+
return svgUri('<svg xmlns="http://www.w3.org/2000/svg"><svg x="50%" y="50%" overflow="visible">'
|
|
10014
|
+
+ `<rect x="${-width / 2}" y="-13" width="${width}" height="26" rx="13" fill="#ffffff" fill-opacity="0.92"/>`
|
|
10015
|
+
+ '<text x="0" y="0" text-anchor="middle" dominant-baseline="central" font-family="system-ui, -apple-system, \'Segoe UI\', sans-serif" '
|
|
10016
|
+
+ `font-size="12" font-weight="500" fill="#1f1d1b">${text}</text></svg></svg>`);
|
|
10017
|
+
}
|
|
10018
|
+
/**
|
|
10019
|
+
* The `src` a node's Image renders when its own source is empty: the canvas label (when `label` is
|
|
10020
|
+
* given) or the live blank for a MARKED node; `null` — render exactly as before — for an unmarked
|
|
10021
|
+
* node or one that has a source.
|
|
10022
|
+
*/
|
|
10023
|
+
function emptyImageSrc(node, src, label) {
|
|
10024
|
+
if (src != null && src !== '')
|
|
10025
|
+
return null;
|
|
10026
|
+
if (!hasElementStyleMarker(node))
|
|
10027
|
+
return null;
|
|
10028
|
+
return label ? emptyImageLabelSrc(label) : EMPTY_IMAGE_SRC;
|
|
10029
|
+
}
|
|
10030
|
+
|
|
9937
10031
|
function parseHexColor(hex) {
|
|
9938
10032
|
const m = /^#?([0-9a-f]{3}|[0-9a-f]{6})$/i.exec((hex ?? '').trim());
|
|
9939
10033
|
if (!m)
|
|
@@ -10563,5 +10657,5 @@ function unknownTokenReferences(css, alsoAllowed = []) {
|
|
|
10563
10657
|
* Generated bundle index. Do not edit.
|
|
10564
10658
|
*/
|
|
10565
10659
|
|
|
10566
|
-
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,
|
|
10660
|
+
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 };
|
|
10567
10661
|
//# sourceMappingURL=vectoriox-iox-ui-design-core.mjs.map
|