/** * Naming-bridge compatibility shims (see docs/adr/0003-naming-bridge-shims.md * and docs/adr/0005-shared-token-scoping-bridge.md). * * Some Fuse components read a generic, unnamespaced custom property before * falling back to a real default, e.g. Badge's own internal CSS does * `gap: var(--gap, var(--ep-badge-gap))`. Left alone, any unrelated CSS * elsewhere on the page that happens to declare a property literally named * `--gap` in an ancestor's scope would silently leak into every Badge * instance, since Fuse checks the generic name first, before its own real * namespaced default. * * Each rule below reclaims the generic property directly on the component's * own tag (a directly-matching declaration on an element always wins over * anything merely inherited from an ancestor, regardless of that ancestor * rule's specificity), and exposes our own `--cdcfuse-{block}-{property}` * as the sanctioned, collision-proof override point going forward. Verified * against the real Fuse v27.30.0 CDN component source directly, not * guessed — built only for confirmed cases, not preemptively for every * block. */ @layer fuse-naming-bridge { fuse-badge { --gap: var(--cdcfuse-badge-gap, var(--ep-badge-gap)); --display: var(--cdcfuse-badge-display, flex); --font-size: var(--cdcfuse-badge-font-size, var(--ep-badge-font-size)); --font-weight: var(--cdcfuse-badge-font-weight, var(--ep-badge-font-weight)); --line-height: var(--cdcfuse-badge-line-height, var(--ep-badge-line-height)); --padding: var(--cdcfuse-badge-padding, var(--ep-badge-padding)); --position: var(--cdcfuse-badge-position, static); --bottom: var(--cdcfuse-badge-bottom, 0px); } /* * Rating's content spacing reads --fuse-spacing-1/--fuse-spacing-0-5 * directly — genuinely shared, global tokens with no local --ep-rating-* * alias (confirmed against the real component source). Unlike Badge's * case above, this isn't a cross-component leak risk (nothing else * competes for a property named --fuse-spacing-1 the way arbitrary CSS * might collide with a bare --gap) — the problem here is architectural: * the Class-Based Token Customization Tool's Scope Selector is often a * wrapping ancestor class, not a class on itself, and * ::part() can only ever be reached by a selector that matches the * shadow host directly (a CSS Shadow Parts platform rule, not something * this plugin's code controls) — so a Ruleset-generated * `{selector}::part(rating){--fuse-spacing-1:...}` rule is a dead no-op * whenever the selector sits on a wrapper. Bridging onto the tag itself * moves these into the `host: true` group (see RATING_TOKEN_PART_GROUPS), * which generates a plain `{selector}{...}` rule — that reaches the * component correctly via ordinary custom-property inheritance whether * the selector is a wrapping ancestor or sits directly on the tag, * exactly the "wrapping container" use case the tool is meant to support. * * Fallback is a HARDCODED LITERAL (0.5rem / 0.25rem — tokens.css's * current defaults), not a self-referencing `var(--fuse-spacing-1)`. * That self-reference was tried and empirically confirmed (in a real * browser, not assumed from the spec) to be a genuine cyclic-custom- * property reference — this rule lives in a higher-priority layer than * tokens.css's own `--fuse-spacing-1` declaration, so its own fallback * resolving `var(--fuse-spacing-1)` means "this same declaration, again" * and computes to the guaranteed-invalid value, silently breaking every * Rating instance's default spacing site-wide. KEEP THESE LITERALS IN * SYNC WITH tokens.css — check them as part of every /fuse-update pass, * same discipline sizing-compensation already requires for its own * baseline assumptions. */ fuse-rating { --fuse-spacing-1: var(--cdcfuse-rating-content-spacing, 0.5rem); --fuse-spacing-0-5: var(--cdcfuse-rating-content-spacing-compact, 0.25rem); } /* * Same pattern as Rating above, rolled out to the five blocks * docs/adr/0005 flagged as follow-ups (see docs/adr/0006). Each rule * bridges a shared/borrowed token with no local alias onto the * component's own tag, using a HARDCODED LITERAL fallback (current * value pulled from the pinned Fuse v27.30.0 CDN tokens.css/component.css, * not a self-referencing var() — see Rating's comment above for why that * self-reference is a cyclic-property bug, not just unnecessary). KEEP * THESE LITERALS IN SYNC WITH tokens.css/component.css as part of every * /fuse-update pass. */ fuse-tab { --fuse-color-text: var(--cdcfuse-tab-item-pill-switch-text-color, #141817); --fuse-color-text-inverse: var(--cdcfuse-tab-item-pill-inverse-text-color, #ffffff); --fuse-color-background-neutral-cool: var(--cdcfuse-tab-item-pill-default-background, #f0f2f1); --fuse-color-background-inverse: var(--cdcfuse-tab-item-pill-hover-background, #29302f); --fuse-color-background-interactive-selected: var(--cdcfuse-tab-item-pill-selected-background, #141817); --fuse-color-background: var(--cdcfuse-tab-item-pill-inverse-background, #ffffff); --fuse-size-radius-interactive: var(--cdcfuse-tab-item-pill-border-radius, 100cqmax); --fuse-font-size-body-small: var(--cdcfuse-tab-item-pill-switch-font-size, 0.875rem); --fuse-font-weight-body-bold: var(--cdcfuse-tab-item-pill-switch-font-weight, 700); --fuse-font-line-height-body: var(--cdcfuse-tab-item-switch-line-height, 1.5); --fuse-spacing-1: var(--cdcfuse-tab-item-pill-padding-block, 0.5rem); --fuse-spacing-2: var(--cdcfuse-tab-item-pill-padding-inline, 1rem); --fuse-spacing-0-5: var(--cdcfuse-tab-item-switch-margin, 0.25rem); } /* * fuse-popover's Pill/Switch-equivalent bare-global reads: body top * padding, the three Lightbox label-font-size breakpoints (one manifest * field, three underlying tokens), and the back-button's icon size. */ fuse-popover { --fuse-spacing-1-5: var(--cdcfuse-popover-body-top-padding, 0.75rem); --fuse-font-size-heading-3-sm: var(--cdcfuse-popover-lightbox-label-font-size-sm, 1.25rem); --fuse-font-size-heading-3-md: var(--cdcfuse-popover-lightbox-label-font-size-md, 1.4375rem); --fuse-font-size-heading-3-lg: var(--cdcfuse-popover-lightbox-label-font-size-lg, 1.625rem); --fuse-font-size-icon: var(--cdcfuse-popover-back-button-icon-size, 1.25rem); } /* * fuse-gallery-grid's lightbox disabled-nav-button state borrows Popover's * own --ep-popover-close-button-* namespace wholesale (no gallery-grid- * local alias exists) — bridging here prevents a Container-tier Ruleset * targeting Gallery Grid from also repainting any real * elsewhere in that same scope. Fallback literals come from component.css * (these are component-private tokens, not in tokens.css). */ fuse-gallery-grid { --ep-popover-close-button-color-background-inverse: var(--cdcfuse-gallery-grid-lightbox-nav-disabled-background, #3d4846); --ep-popover-close-button-color-fill: var(--cdcfuse-gallery-grid-lightbox-nav-disabled-icon-color, #141817); --ep-popover-close-button-radius: var(--cdcfuse-gallery-grid-lightbox-nav-border-radius, 50%); } /* * fuse-link's Font family control borrows Button's own private * --ep-button-font-family namespace wholesale (no --link-* alias exists) * — bridging here prevents a Container-tier Ruleset targeting Link from * also repainting any real fuse-button elsewhere in that same scope. * Fallback literal comes from component.css (a component-private token). */ fuse-link { --ep-button-font-family: var(--cdcfuse-link-font-family, 'Apercu Pro', 'Apercu Pro Helvetica Fallback', 'Apercu Pro Arial Fallback', sans-serif); } fuse-feedback-thumbs { --fuse-color-icon-accent: var(--cdcfuse-feedback-thumbs-selected-icon-color, #9653E5); --fuse-color-text-weak: var(--cdcfuse-feedback-thumbs-label-color, #3d4846); --fuse-spacing-1: var(--cdcfuse-feedback-thumbs-gap, 0.5rem); } }