@vectoriox/iox-ui 5.12.1 → 5.13.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 +67 -7
- package/fesm2022/vectoriox-iox-ui-design-core.mjs +111 -10
- package/fesm2022/vectoriox-iox-ui-design-core.mjs.map +1 -1
- package/fesm2022/vectoriox-iox-ui.mjs +68 -18
- package/fesm2022/vectoriox-iox-ui.mjs.map +1 -1
- package/index.d.ts +26 -7
- package/package.json +1 -1
- package/src/design-core/element-styles.ts +51 -0
- package/src/design-core/flavor-spec.generated.ts +26 -6
- package/src/design-core/public-api.ts +1 -0
- package/src/design-core/token-names.ts +43 -0
- package/styles/iox-forms.css +71 -57
package/design-core/index.d.ts
CHANGED
|
@@ -1330,6 +1330,18 @@ declare const SPEC_ELEMENT_STYLES: readonly [{
|
|
|
1330
1330
|
readonly borderStyle: "solid";
|
|
1331
1331
|
readonly borderColor: "var(--iox-dialog-border)";
|
|
1332
1332
|
};
|
|
1333
|
+
}, {
|
|
1334
|
+
readonly id: "form";
|
|
1335
|
+
readonly label: "Form";
|
|
1336
|
+
readonly group: "Forms";
|
|
1337
|
+
readonly appliesTo: readonly ["Form"];
|
|
1338
|
+
readonly base: {};
|
|
1339
|
+
}, {
|
|
1340
|
+
readonly id: "field";
|
|
1341
|
+
readonly label: "Field";
|
|
1342
|
+
readonly group: "Forms";
|
|
1343
|
+
readonly appliesTo: readonly ["Field"];
|
|
1344
|
+
readonly base: {};
|
|
1333
1345
|
}, {
|
|
1334
1346
|
readonly id: "notice-success";
|
|
1335
1347
|
readonly label: "Success message";
|
|
@@ -1371,6 +1383,8 @@ declare const SPEC_DEFAULT_ELEMENT_STYLE: {
|
|
|
1371
1383
|
readonly Divider: "rule";
|
|
1372
1384
|
readonly Icon: "icon";
|
|
1373
1385
|
readonly Dialog: "dialog";
|
|
1386
|
+
readonly Form: "form";
|
|
1387
|
+
readonly Field: "field";
|
|
1374
1388
|
readonly FormSuccess: "notice-success";
|
|
1375
1389
|
readonly FormError: "notice-error";
|
|
1376
1390
|
};
|
|
@@ -1412,7 +1426,7 @@ declare const SPEC_PALETTE_PRESETS: readonly [{
|
|
|
1412
1426
|
};
|
|
1413
1427
|
}];
|
|
1414
1428
|
declare const SPEC_FIELD_CLASS_BASELINE: {
|
|
1415
|
-
readonly ".iox-field__control": {
|
|
1429
|
+
readonly ".iox-es-field .iox-field__control": {
|
|
1416
1430
|
readonly background: "var(--iox-field-bg)";
|
|
1417
1431
|
readonly color: "var(--iox-field-ink)";
|
|
1418
1432
|
readonly "border-width": "var(--iox-field-border-width)";
|
|
@@ -1424,26 +1438,26 @@ declare const SPEC_FIELD_CLASS_BASELINE: {
|
|
|
1424
1438
|
readonly "font-size": "var(--iox-size-body)";
|
|
1425
1439
|
readonly transition: "border-color var(--iox-dur-base) var(--iox-ease-standard), box-shadow var(--iox-dur-base) var(--iox-ease-standard)";
|
|
1426
1440
|
};
|
|
1427
|
-
readonly ".iox-field__control:focus-visible": {
|
|
1441
|
+
readonly ".iox-es-field .iox-field__control:focus-visible": {
|
|
1428
1442
|
readonly "border-color": "var(--iox-accent)";
|
|
1429
1443
|
readonly "box-shadow": "var(--iox-field-focus)";
|
|
1430
1444
|
readonly outline: "none";
|
|
1431
1445
|
};
|
|
1432
|
-
readonly ".iox-field__label": {
|
|
1446
|
+
readonly ".iox-es-field .iox-field__label": {
|
|
1433
1447
|
readonly "font-family": "var(--iox-font-body)";
|
|
1434
1448
|
readonly "font-size": "var(--iox-field-label-size)";
|
|
1435
1449
|
readonly "font-weight": "var(--iox-field-label-weight)";
|
|
1436
1450
|
readonly color: "var(--iox-text)";
|
|
1437
1451
|
};
|
|
1438
|
-
readonly ".iox-field__help": {
|
|
1452
|
+
readonly ".iox-es-field .iox-field__help": {
|
|
1439
1453
|
readonly "font-size": "var(--iox-size-small)";
|
|
1440
1454
|
readonly color: "var(--iox-text-muted)";
|
|
1441
1455
|
};
|
|
1442
|
-
readonly ".iox-field__error": {
|
|
1456
|
+
readonly ".iox-es-field .iox-field__error": {
|
|
1443
1457
|
readonly "font-size": "var(--iox-size-small)";
|
|
1444
1458
|
readonly color: "var(--iox-danger)";
|
|
1445
1459
|
};
|
|
1446
|
-
readonly ".iox-invalid .iox-field__control": {
|
|
1460
|
+
readonly ".iox-es-field.iox-invalid .iox-field__control": {
|
|
1447
1461
|
readonly "border-color": "var(--iox-danger)";
|
|
1448
1462
|
};
|
|
1449
1463
|
};
|
|
@@ -8363,6 +8377,32 @@ declare function ownedTraitStatus(target: ElementStyleTarget, id: string): Owned
|
|
|
8363
8377
|
* Then the new style is written. Traits neither style owns are never touched.
|
|
8364
8378
|
*/
|
|
8365
8379
|
declare function switchElementStyle(target: ElementStyleTarget, fromId: string | null | undefined, toId: string, baseline?: Readonly<Record<string, unknown>>): SwitchElementStyleResult;
|
|
8380
|
+
/**
|
|
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; every piece of component CSS that
|
|
8383
|
+
* carries the system look is scoped to it, so a node saved before DS2 (no `elementStyle`) keeps its
|
|
8384
|
+
* exact pre-DS2 component CSS no matter which tokens the org holds. This is the ONLY thing a
|
|
8385
|
+
* renderer reads `elementStyle` for.
|
|
8386
|
+
*/
|
|
8387
|
+
declare const ELEMENT_STYLE_MARKER_CLASS = "iox-es";
|
|
8388
|
+
/** `iox-es-<id>` for a known style, else null — an unknown id never reaches a class attribute. */
|
|
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
|
+
/**
|
|
8400
|
+
* The spec's `headingLevelRule`: changing a Heading's level moves it to the new level's DEFAULT
|
|
8401
|
+
* style only when it still wears its old level's default (author changes kept, via
|
|
8402
|
+
* `switchElementStyle`); a Heading wearing any other style — or none — is left alone. Returns null
|
|
8403
|
+
* when nothing switched.
|
|
8404
|
+
*/
|
|
8405
|
+
declare function applyHeadingLevelRule(target: ElementStyleTarget, oldLevel: string | null | undefined, newLevel: string | null | undefined, baseline?: Readonly<Record<string, unknown>>): SwitchElementStyleResult | null;
|
|
8366
8406
|
|
|
8367
8407
|
/**
|
|
8368
8408
|
* BRAND DERIVATION (flavors plan §6, F2): one colour in, an asserted accessible ramp out.
|
|
@@ -8542,5 +8582,25 @@ declare function parseFontFamilies(stack: string): string[];
|
|
|
8542
8582
|
*/
|
|
8543
8583
|
declare function fontsForTokens(tokens: ReadonlyArray<DesignTokenLike> | null | undefined): string[];
|
|
8544
8584
|
|
|
8545
|
-
|
|
8585
|
+
/**
|
|
8586
|
+
* Which `--iox-<name>` a piece of COMPONENT CSS may reference (design-system §3b-bis: "component CSS
|
|
8587
|
+
* may reference ONLY tokens defined in this spec"). DS2 shipped seven names nobody defines
|
|
8588
|
+
* (`card-media-gap`, `gallery-overlay`, `dialog-close-bg`…): a token the contract does not define can
|
|
8589
|
+
* never be set by a flavor, so it is a literal wearing a costume. One guard, run over BOTH
|
|
8590
|
+
* renderers' component CSS (iox-ui's spec; the engine's `verify:token-names`).
|
|
8591
|
+
*/
|
|
8592
|
+
/** The 161 names of the contract's two tiers, plus its legacy aliases. */
|
|
8593
|
+
declare function specTokenNames(): ReadonlySet<string>;
|
|
8594
|
+
/**
|
|
8595
|
+
* Names a PRE-DS2 rule still reads, because changing them would restyle a saved legacy page (D5):
|
|
8596
|
+
* the brand ramp F2 shipped (`deriveBrandTokens`, e.g. the legacy switch's `brand-500`). Computed
|
|
8597
|
+
* from the shipped function — never retyped — and only ever legitimate in an UNMARKED rule.
|
|
8598
|
+
*/
|
|
8599
|
+
declare function legacyTokenNames(): ReadonlySet<string>;
|
|
8600
|
+
/** Every distinct token a stylesheet READS (`var(--iox-x…)`), in first-seen order. */
|
|
8601
|
+
declare function tokenReferences(css: string): string[];
|
|
8602
|
+
/** The referenced names that are neither spec tokens, legacy names, nor in `alsoAllowed`. */
|
|
8603
|
+
declare function unknownTokenReferences(css: string, alsoAllowed?: Iterable<string>): string[];
|
|
8604
|
+
|
|
8605
|
+
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 };
|
|
8546
8606
|
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 };
|
|
@@ -1598,6 +1598,24 @@ const SPEC_ELEMENT_STYLES = [
|
|
|
1598
1598
|
"borderColor": "var(--iox-dialog-border)"
|
|
1599
1599
|
}
|
|
1600
1600
|
},
|
|
1601
|
+
{
|
|
1602
|
+
"id": "form",
|
|
1603
|
+
"label": "Form",
|
|
1604
|
+
"group": "Forms",
|
|
1605
|
+
"appliesTo": [
|
|
1606
|
+
"Form"
|
|
1607
|
+
],
|
|
1608
|
+
"base": {}
|
|
1609
|
+
},
|
|
1610
|
+
{
|
|
1611
|
+
"id": "field",
|
|
1612
|
+
"label": "Field",
|
|
1613
|
+
"group": "Forms",
|
|
1614
|
+
"appliesTo": [
|
|
1615
|
+
"Field"
|
|
1616
|
+
],
|
|
1617
|
+
"base": {}
|
|
1618
|
+
},
|
|
1601
1619
|
{
|
|
1602
1620
|
"id": "notice-success",
|
|
1603
1621
|
"label": "Success message",
|
|
@@ -1645,6 +1663,8 @@ const SPEC_DEFAULT_ELEMENT_STYLE = {
|
|
|
1645
1663
|
"Divider": "rule",
|
|
1646
1664
|
"Icon": "icon",
|
|
1647
1665
|
"Dialog": "dialog",
|
|
1666
|
+
"Form": "form",
|
|
1667
|
+
"Field": "field",
|
|
1648
1668
|
"FormSuccess": "notice-success",
|
|
1649
1669
|
"FormError": "notice-error"
|
|
1650
1670
|
};
|
|
@@ -1690,7 +1710,7 @@ const SPEC_PALETTE_PRESETS = [
|
|
|
1690
1710
|
}
|
|
1691
1711
|
];
|
|
1692
1712
|
const SPEC_FIELD_CLASS_BASELINE = {
|
|
1693
|
-
".iox-field__control": {
|
|
1713
|
+
".iox-es-field .iox-field__control": {
|
|
1694
1714
|
"background": "var(--iox-field-bg)",
|
|
1695
1715
|
"color": "var(--iox-field-ink)",
|
|
1696
1716
|
"border-width": "var(--iox-field-border-width)",
|
|
@@ -1702,26 +1722,26 @@ const SPEC_FIELD_CLASS_BASELINE = {
|
|
|
1702
1722
|
"font-size": "var(--iox-size-body)",
|
|
1703
1723
|
"transition": "border-color var(--iox-dur-base) var(--iox-ease-standard), box-shadow var(--iox-dur-base) var(--iox-ease-standard)"
|
|
1704
1724
|
},
|
|
1705
|
-
".iox-field__control:focus-visible": {
|
|
1725
|
+
".iox-es-field .iox-field__control:focus-visible": {
|
|
1706
1726
|
"border-color": "var(--iox-accent)",
|
|
1707
1727
|
"box-shadow": "var(--iox-field-focus)",
|
|
1708
1728
|
"outline": "none"
|
|
1709
1729
|
},
|
|
1710
|
-
".iox-field__label": {
|
|
1730
|
+
".iox-es-field .iox-field__label": {
|
|
1711
1731
|
"font-family": "var(--iox-font-body)",
|
|
1712
1732
|
"font-size": "var(--iox-field-label-size)",
|
|
1713
1733
|
"font-weight": "var(--iox-field-label-weight)",
|
|
1714
1734
|
"color": "var(--iox-text)"
|
|
1715
1735
|
},
|
|
1716
|
-
".iox-field__help": {
|
|
1736
|
+
".iox-es-field .iox-field__help": {
|
|
1717
1737
|
"font-size": "var(--iox-size-small)",
|
|
1718
1738
|
"color": "var(--iox-text-muted)"
|
|
1719
1739
|
},
|
|
1720
|
-
".iox-field__error": {
|
|
1740
|
+
".iox-es-field .iox-field__error": {
|
|
1721
1741
|
"font-size": "var(--iox-size-small)",
|
|
1722
1742
|
"color": "var(--iox-danger)"
|
|
1723
1743
|
},
|
|
1724
|
-
".iox-invalid .iox-field__control": {
|
|
1744
|
+
".iox-es-field.iox-invalid .iox-field__control": {
|
|
1725
1745
|
"border-color": "var(--iox-danger)"
|
|
1726
1746
|
}
|
|
1727
1747
|
};
|
|
@@ -9484,7 +9504,7 @@ const REDUCED_MOTION_OVERRIDES = SPEC_A11Y.reducedMotion;
|
|
|
9484
9504
|
const REDUCED_TRANSPARENCY_OVERRIDES = SPEC_A11Y.reducedTransparency;
|
|
9485
9505
|
const ROOT = ':root';
|
|
9486
9506
|
const DEFAULT_SCHEME = 'default';
|
|
9487
|
-
const REFERENCE = 'var(';
|
|
9507
|
+
const REFERENCE$1 = 'var(';
|
|
9488
9508
|
const MEDIA_DARK = '(prefers-color-scheme: dark)';
|
|
9489
9509
|
const ACCESSIBILITY_MEDIA = [
|
|
9490
9510
|
{ query: '(prefers-reduced-motion: reduce)', overrides: REDUCED_MOTION_OVERRIDES },
|
|
@@ -9594,7 +9614,7 @@ function compileSchemeCss(tokens, scope) {
|
|
|
9594
9614
|
const resolved = resolveTokenValues(rows, LIGHT);
|
|
9595
9615
|
return nonDefaultSchemes().map(([id, set]) => rule(schemeSelector(id, scope), [
|
|
9596
9616
|
...schemeEntries(set, resolved),
|
|
9597
|
-
...rows.filter(t => !(t.name in set) && t.value.includes(REFERENCE))
|
|
9617
|
+
...rows.filter(t => !(t.name in set) && t.value.includes(REFERENCE$1))
|
|
9598
9618
|
.map((t) => [t.name, t.value]),
|
|
9599
9619
|
])).filter(Boolean).join('\n');
|
|
9600
9620
|
}
|
|
@@ -9605,7 +9625,7 @@ function darkSchemeRules(rows, scope) {
|
|
|
9605
9625
|
const dark = resolveTokenValues(rows, DARK);
|
|
9606
9626
|
const redeclared = rows.filter(t => {
|
|
9607
9627
|
const d = darkOf(t);
|
|
9608
|
-
return d !== null && (t.value.includes(REFERENCE) || d.includes(REFERENCE));
|
|
9628
|
+
return d !== null && (t.value.includes(REFERENCE$1) || d.includes(REFERENCE$1));
|
|
9609
9629
|
});
|
|
9610
9630
|
return nonDefaultSchemes().map(([id, set]) => {
|
|
9611
9631
|
const swapped = Object.fromEntries(Object.entries(set).filter(([, v]) => hasPlaceholder(v)));
|
|
@@ -9868,6 +9888,51 @@ function switchElementStyle(target, fromId, toId, baseline = {}) {
|
|
|
9868
9888
|
writeEntries(target, to, kept);
|
|
9869
9889
|
return { applied: true, kept };
|
|
9870
9890
|
}
|
|
9891
|
+
/**
|
|
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; every piece of component CSS that
|
|
9894
|
+
* carries the system look is scoped to it, so a node saved before DS2 (no `elementStyle`) keeps its
|
|
9895
|
+
* exact pre-DS2 component CSS no matter which tokens the org holds. This is the ONLY thing a
|
|
9896
|
+
* renderer reads `elementStyle` for.
|
|
9897
|
+
*/
|
|
9898
|
+
const ELEMENT_STYLE_MARKER_CLASS = 'iox-es';
|
|
9899
|
+
const MARKER_PREFIX = `${ELEMENT_STYLE_MARKER_CLASS}-`;
|
|
9900
|
+
/** `iox-es-<id>` for a known style, else null — an unknown id never reaches a class attribute. */
|
|
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(' '));
|
|
9920
|
+
}
|
|
9921
|
+
/**
|
|
9922
|
+
* The spec's `headingLevelRule`: changing a Heading's level moves it to the new level's DEFAULT
|
|
9923
|
+
* style only when it still wears its old level's default (author changes kept, via
|
|
9924
|
+
* `switchElementStyle`); a Heading wearing any other style — or none — is left alone. Returns null
|
|
9925
|
+
* when nothing switched.
|
|
9926
|
+
*/
|
|
9927
|
+
function applyHeadingLevelRule(target, oldLevel, newLevel, baseline = {}) {
|
|
9928
|
+
if (target.type !== 'Heading' || oldLevel === newLevel)
|
|
9929
|
+
return null;
|
|
9930
|
+
const from = defaultElementStyleFor('Heading', { level: oldLevel });
|
|
9931
|
+
const to = defaultElementStyleFor('Heading', { level: newLevel });
|
|
9932
|
+
if (!from || !to || target.elementStyle !== from || from === to)
|
|
9933
|
+
return null;
|
|
9934
|
+
return switchElementStyle(target, from, to, baseline);
|
|
9935
|
+
}
|
|
9871
9936
|
|
|
9872
9937
|
function parseHexColor(hex) {
|
|
9873
9938
|
const m = /^#?([0-9a-f]{3}|[0-9a-f]{6})$/i.exec((hex ?? '').trim());
|
|
@@ -10456,6 +10521,42 @@ function springToLinear(stiffness, damping) {
|
|
|
10456
10521
|
return { easing: `linear(${points.join(', ')})`, duration: `${durationMs}ms` };
|
|
10457
10522
|
}
|
|
10458
10523
|
|
|
10524
|
+
/**
|
|
10525
|
+
* Which `--iox-<name>` a piece of COMPONENT CSS may reference (design-system §3b-bis: "component CSS
|
|
10526
|
+
* may reference ONLY tokens defined in this spec"). DS2 shipped seven names nobody defines
|
|
10527
|
+
* (`card-media-gap`, `gallery-overlay`, `dialog-close-bg`…): a token the contract does not define can
|
|
10528
|
+
* never be set by a flavor, so it is a literal wearing a costume. One guard, run over BOTH
|
|
10529
|
+
* renderers' component CSS (iox-ui's spec; the engine's `verify:token-names`).
|
|
10530
|
+
*/
|
|
10531
|
+
/** The 161 names of the contract's two tiers, plus its legacy aliases. */
|
|
10532
|
+
function specTokenNames() {
|
|
10533
|
+
return new Set([
|
|
10534
|
+
...SPEC_TIERS.semantic.map(t => t.name),
|
|
10535
|
+
...SPEC_TIERS.component.map(t => t.name),
|
|
10536
|
+
...Object.keys(SPEC_LEGACY_ALIASES),
|
|
10537
|
+
]);
|
|
10538
|
+
}
|
|
10539
|
+
/**
|
|
10540
|
+
* Names a PRE-DS2 rule still reads, because changing them would restyle a saved legacy page (D5):
|
|
10541
|
+
* the brand ramp F2 shipped (`deriveBrandTokens`, e.g. the legacy switch's `brand-500`). Computed
|
|
10542
|
+
* from the shipped function — never retyped — and only ever legitimate in an UNMARKED rule.
|
|
10543
|
+
*/
|
|
10544
|
+
function legacyTokenNames() {
|
|
10545
|
+
return new Set(deriveBrandTokens('#808080', {}).map(t => t.name));
|
|
10546
|
+
}
|
|
10547
|
+
const REFERENCE = /var\(\s*--iox-([a-z0-9-]+)/gi;
|
|
10548
|
+
/** Every distinct token a stylesheet READS (`var(--iox-x…)`), in first-seen order. */
|
|
10549
|
+
function tokenReferences(css) {
|
|
10550
|
+
return [...new Set(Array.from(css.matchAll(REFERENCE), m => m[1]))];
|
|
10551
|
+
}
|
|
10552
|
+
/** The referenced names that are neither spec tokens, legacy names, nor in `alsoAllowed`. */
|
|
10553
|
+
function unknownTokenReferences(css, alsoAllowed = []) {
|
|
10554
|
+
const spec = specTokenNames();
|
|
10555
|
+
const legacy = legacyTokenNames();
|
|
10556
|
+
const extra = new Set(alsoAllowed);
|
|
10557
|
+
return tokenReferences(css).filter(name => !spec.has(name) && !legacy.has(name) && !extra.has(name));
|
|
10558
|
+
}
|
|
10559
|
+
|
|
10459
10560
|
/**
|
|
10460
10561
|
* @vectoriox/iox-ui/design-core — the shared, FRAMEWORK-FREE core of the design system
|
|
10461
10562
|
* (design-system plan §3e): the token vocabulary, the flavor contract (generated 1:1 from
|
|
@@ -10471,5 +10572,5 @@ function springToLinear(stiffness, damping) {
|
|
|
10471
10572
|
* Generated bundle index. Do not edit.
|
|
10472
10573
|
*/
|
|
10473
10574
|
|
|
10474
|
-
export { ACCENT_TOKEN_NAMES, BUTTON_VARIANT_TO_STYLE, DESIGN_TOKEN_GROUPS, DESIGN_TOKEN_TIERS, DESIGN_TOKEN_TYPES, ELEMENT_STYLES, 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, buildFlavorTokens, buildFontFaceCss, compileSchemeCss, compileTokenCss, compileTokenCssBlocks, cssString, defaultDesignChoices, defaultElementStyleFor, deriveAccentTokens, deriveBrandTokens, elementStyleById, elementStylesFor, flavorSourceStamp, fontsForTokens, isDesignTokenGroup, isDesignTokenTier, isDesignTokenType, oklabToRgb, ownedTraitStatus, parseFontFamilies, parseHexColor, planFlavorRevert, planFlavorSeed, relativeLuminance, resolveTokenReferences, resolveTokenValues, revertAvailable, rgbToOklab, springToLinear, styleKeyToKebab, switchElementStyle, toHexColor, tokensToDarkVarMap, tokensToVarMap, userFontStack, validateFlavorPack, wcagContrastRatio };
|
|
10575
|
+
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 };
|
|
10475
10576
|
//# sourceMappingURL=vectoriox-iox-ui-design-core.mjs.map
|