Convert the remaining ui components to per-component token maps (#2980)

.agents/skills/core-scss/SKILL.md

@@ -81,8 +81,11 @@ $badge-tokens: defaults(
   block stays byte-identical. Converting a component is output-neutral: prove it with a
   rebuild diff (`html-diff` only covers markup).
 - Sass variables go to `_variables.scss` with `!default`, dark-mode counterparts to `_variables-dark.scss`.
-- Components not yet converted still declare the custom properties inline at the top of the
-  root rule (`--badge-padding-x: #{$badge-padding-x};`); follow the map pattern for new work.
+- Most `ui/` components now use this pattern (`$<component>-tokens`). A few small ones still
+  declare one or two custom properties inline at the top of the root rule
+  (`--icon-size: #{$icon-size};`) — that is fine; reach for a map once there is a cluster.
+- Keep the map value bare (`--card-bg: $card-bg`); only wrap it in `#{…}` when it is a
+  function call or an interpolated expression (`--alert-bg: #{color-transparent(…)}`).
 
 ## 3. Custom properties are authored bare
 

.changeset/component-token-maps-rest.md

@@ -0,0 +1,5 @@
+---
+"@tabler/core": minor
+---
+
+Added per-component token maps (`$accordion-tokens`, `$alert-tokens`, `$btn-tokens`, `$tag-tokens` …) to 19 more `ui/` components.

core/scss/tests/tokens.test.mjs

@@ -34,3 +34,15 @@ describe('$card-tokens compile-time override', () => {
     expect(rule).toContain('--card-accent: hotpink;')
   })
 })
+
+describe('other components render from their token map', () => {
+  // Spot-check a component whose default map holds a Sass function call
+  // (`color-transparent(...)`), not just a plain variable.
+  it('renders $alert-tokens on .alert and takes an override', () => {
+    const src = `@use 'ui/alerts' with ($alert-tokens: (--alert-padding-x: 2rem));`
+    const { css } = compileString(src, { loadPaths: [scssDir, 'node_modules'], style: 'expanded' })
+    const rule = css.match(/\n\.alert \{\n[\s\S]*?\n\}/)[0]
+    expect(rule).toContain('--alert-padding-x: 2rem;')
+    expect(rule).toMatch(/--alert-bg: color-mix\(/)
+  })
+})

core/scss/ui/_accordion.scss

@@ -1,27 +1,39 @@
 @use '../config' as *;
 
-.accordion {
-  // scss-docs-start accordion-css-vars
-  --accordion-color: var(--body-color);
-  --accordion-border-color: var(--border-color);
-  --accordion-border-radius: #{$accordion-border-radius};
-  --accordion-inner-border-radius: #{$accordion-inner-border-radius};
-  --accordion-padding-x: #{$accordion-body-padding-x};
-  --accordion-gap: 0;
-  --accordion-active-color: #{$accordion-button-active-color};
-  --accordion-btn-color: var(--accordion-color);
-  --accordion-btn-bg: #{$accordion-button-bg};
-  --accordion-btn-toggle-width: #{$accordion-btn-toggle-width};
-  --accordion-btn-padding-x: var(--accordion-padding-x);
-  --accordion-btn-padding-y: #{$accordion-button-padding-y};
-  --accordion-btn-font-weight: var(--font-weight-medium);
-  --accordion-btn-line-height: #{$accordion-button-line-height};
-  --accordion-body-padding-x: var(--accordion-padding-x);
-  --accordion-body-padding-y: #{$accordion-body-padding-y};
-  --accordion-btn-gap: #{$accordion-btn-gap};
-  --accordion-header-gap: #{$accordion-header-gap};
-  // scss-docs-end accordion-css-vars
+// stylelint-disable custom-property-no-missing-var-function -- token-map keys are dashed-idents by design, not unwrapped var() references
 
+// scss-docs-start accordion-css-vars
+$accordion-tokens: () !default;
+$accordion-tokens: defaults(
+  (
+    --accordion-color: var(--body-color),
+    --accordion-border-color: var(--border-color),
+    --accordion-border-radius: $accordion-border-radius,
+    --accordion-inner-border-radius: $accordion-inner-border-radius,
+    --accordion-padding-x: $accordion-body-padding-x,
+    --accordion-gap: 0,
+    --accordion-active-color: $accordion-button-active-color,
+    --accordion-btn-color: var(--accordion-color),
+    --accordion-btn-bg: $accordion-button-bg,
+    --accordion-btn-toggle-width: $accordion-btn-toggle-width,
+    --accordion-btn-padding-x: var(--accordion-padding-x),
+    --accordion-btn-padding-y: $accordion-button-padding-y,
+    --accordion-btn-font-weight: var(--font-weight-medium),
+    --accordion-btn-line-height: $accordion-button-line-height,
+    --accordion-body-padding-x: var(--accordion-padding-x),
+    --accordion-body-padding-y: $accordion-body-padding-y,
+    --accordion-btn-gap: $accordion-btn-gap,
+    --accordion-header-gap: $accordion-header-gap,
+    --accordion-btn-focus-box-shadow: $accordion-btn-focus-box-shadow,
+  ),
+  $accordion-tokens
+);
+// scss-docs-end accordion-css-vars
+
+// stylelint-enable custom-property-no-missing-var-function
+
+.accordion {
+  @include tokens($accordion-tokens);
   display: flex;
   flex-direction: column;
   gap: var(--accordion-gap);

core/scss/ui/_alerts.scss

@@ -1,24 +1,35 @@
 @use '../config' as *;
 
-.alert {
-  // scss-docs-start alert-css-vars
-  --alert-variant-color: var(--body-color);
-  --alert-color: var(--alert-variant-color);
-  --alert-bg: #{color-transparent(var(--alert-variant-color), 0.16, var(--bg-surface))};
-  --alert-padding-x: #{$alert-padding-x};
-  --alert-padding-y: #{$alert-padding-y};
-  --alert-margin-bottom: #{$alert-margin-bottom};
-  --alert-border-color: #{color-transparent(var(--alert-variant-color), 0.2, var(--bg-surface))};
-  --alert-border: var(--border-width) solid var(--alert-border-color);
-  --alert-border-radius: var(--border-radius);
-  --alert-link-color: inherit;
-  --alert-heading-font-weight: var(--font-weight-medium);
-  --alert-heading-margin-bottom: #{$alert-heading-margin-bottom};
-  --alert-icon-size: #{$alert-icon-size};
-  --alert-padding-inline-end: #{$alert-padding-inline-end};
-  --alert-gap: #{$alert-gap};
-  // scss-docs-end alert-css-vars
+// stylelint-disable custom-property-no-missing-var-function -- token-map keys are dashed-idents by design, not unwrapped var() references
 
+// scss-docs-start alert-css-vars
+$alert-tokens: () !default;
+$alert-tokens: defaults(
+  (
+    --alert-variant-color: var(--body-color),
+    --alert-color: var(--alert-variant-color),
+    --alert-bg: #{color-transparent(var(--alert-variant-color), 0.16, var(--bg-surface))},
+    --alert-padding-x: $alert-padding-x,
+    --alert-padding-y: $alert-padding-y,
+    --alert-margin-bottom: $alert-margin-bottom,
+    --alert-border-color: #{color-transparent(var(--alert-variant-color), 0.2, var(--bg-surface))},
+    --alert-border: var(--border-width) solid var(--alert-border-color),
+    --alert-border-radius: var(--border-radius),
+    --alert-link-color: inherit,
+    --alert-heading-font-weight: var(--font-weight-medium),
+    --alert-heading-margin-bottom: $alert-heading-margin-bottom,
+    --alert-icon-size: $alert-icon-size,
+    --alert-padding-inline-end: $alert-padding-inline-end,
+    --alert-gap: $alert-gap,
+  ),
+  $alert-tokens
+);
+// scss-docs-end alert-css-vars
+
+// stylelint-enable custom-property-no-missing-var-function
+
+.alert {
+  @include tokens($alert-tokens);
   position: relative;
   padding: var(--alert-padding-y) var(--alert-padding-x);
   margin-bottom: var(--alert-margin-bottom);

core/scss/ui/_breadcrumbs.scss

@@ -2,22 +2,33 @@
 
 @use '../config' as *;
 
-.breadcrumb {
-  // scss-docs-start breadcrumb-css-vars
-  --breadcrumb-padding-x: #{$breadcrumb-padding-x};
-  --breadcrumb-padding-y: #{$breadcrumb-padding-y};
-  --breadcrumb-margin-bottom: #{$breadcrumb-margin-bottom};
-  --breadcrumb-font-size: #{$breadcrumb-font-size};
-  --breadcrumb-bg: #{$breadcrumb-bg};
-  --breadcrumb-border-radius: #{$breadcrumb-border-radius};
-  --breadcrumb-divider-color: #{$breadcrumb-divider-color};
-  --breadcrumb-item-padding-x: #{$breadcrumb-item-padding-x};
-  --breadcrumb-item-active-color: #{$breadcrumb-active-color};
-  --breadcrumb-item-active-font-weight: #{$breadcrumb-active-font-weight};
-  --breadcrumb-item-disabled-color: #{$breadcrumb-disabled-color};
-  --breadcrumb-link-color: #{$breadcrumb-link-color};
-  // scss-docs-end breadcrumb-css-vars
+// stylelint-disable custom-property-no-missing-var-function -- token-map keys are dashed-idents by design, not unwrapped var() references
 
+// scss-docs-start breadcrumb-css-vars
+$breadcrumb-tokens: () !default;
+$breadcrumb-tokens: defaults(
+  (
+    --breadcrumb-padding-x: $breadcrumb-padding-x,
+    --breadcrumb-padding-y: $breadcrumb-padding-y,
+    --breadcrumb-margin-bottom: $breadcrumb-margin-bottom,
+    --breadcrumb-font-size: $breadcrumb-font-size,
+    --breadcrumb-bg: $breadcrumb-bg,
+    --breadcrumb-border-radius: $breadcrumb-border-radius,
+    --breadcrumb-divider-color: $breadcrumb-divider-color,
+    --breadcrumb-item-padding-x: $breadcrumb-item-padding-x,
+    --breadcrumb-item-active-color: $breadcrumb-active-color,
+    --breadcrumb-item-active-font-weight: $breadcrumb-active-font-weight,
+    --breadcrumb-item-disabled-color: $breadcrumb-disabled-color,
+    --breadcrumb-link-color: $breadcrumb-link-color,
+  ),
+  $breadcrumb-tokens
+);
+// scss-docs-end breadcrumb-css-vars
+
+// stylelint-enable custom-property-no-missing-var-function
+
+.breadcrumb {
+  @include tokens($breadcrumb-tokens);
   display: flex;
   flex-wrap: wrap;
   padding: 0;

core/scss/ui/_buttons.scss

@@ -6,17 +6,31 @@
 //
 @use '../config' as *;
 
+// stylelint-disable custom-property-no-missing-var-function -- token-map keys are dashed-idents by design, not unwrapped var() references
+
+// scss-docs-start btn-css-vars
+$btn-tokens: () !default;
+$btn-tokens: defaults(
+  (
+    --btn-icon-size: $input-btn-icon-size,
+    --btn-icon-color: inherit,
+    --btn-bg: var(--bg-surface),
+    --btn-color: var(--body-color),
+    --btn-border-color: $btn-border-color,
+    --btn-hover-bg: var(--hover-bg),
+    --btn-hover-border-color: var(--border-active-color),
+    --btn-active-color: $active-color,
+    --btn-active-bg: var(--active-bg),
+    --btn-active-border-color: $active-border-color,
+  ),
+  $btn-tokens
+);
+// scss-docs-end btn-css-vars
+
+// stylelint-enable custom-property-no-missing-var-function
+
 .btn {
-  --btn-icon-size: #{$input-btn-icon-size};
-  --btn-icon-color: inherit;
-  --btn-bg: var(--bg-surface);
-  --btn-color: var(--body-color);
-  --btn-border-color: #{$btn-border-color};
-  --btn-hover-bg: var(--hover-bg);
-  --btn-hover-border-color: var(--border-active-color);
-  --btn-active-color: #{$active-color};
-  --btn-active-bg: var(--active-bg);
-  --btn-active-border-color: #{$active-border-color};
+  @include tokens($btn-tokens);
   position: relative;
 
   display: inline-flex;

core/scss/ui/_calendars.scss

@@ -1,9 +1,23 @@
 @use '../config' as *;
 
+// stylelint-disable custom-property-no-missing-var-function -- token-map keys are dashed-idents by design, not unwrapped var() references
+
+// scss-docs-start calendar-css-vars
+$calendar-tokens: () !default;
+$calendar-tokens: defaults(
+  (
+    --calendar-padding-y: $calendar-padding-y,
+    --calendar-date-padding: $calendar-date-padding,
+    --calendar-date-size: $calendar-date-size,
+  ),
+  $calendar-tokens
+);
+// scss-docs-end calendar-css-vars
+
+// stylelint-enable custom-property-no-missing-var-function
+
 .calendar {
-  --calendar-padding-y: #{$calendar-padding-y};
-  --calendar-date-padding: #{$calendar-date-padding};
-  --calendar-date-size: #{$calendar-date-size};
+  @include tokens($calendar-tokens);
   display: block;
   font-size: $font-size-sm;
   border: var(--border-width) var(--border-style) var(--border-color);

core/scss/ui/_chat.scss

@@ -1,11 +1,23 @@
 @use '../config' as *;
 
+// stylelint-disable custom-property-no-missing-var-function -- token-map keys are dashed-idents by design, not unwrapped var() references
+
+// scss-docs-start chat-css-vars
+$chat-tokens: () !default;
+$chat-tokens: defaults(
+  (
+    --chat-bubbles-gap: $chat-bubbles-gap,
+    --chat-bubble-padding: $chat-bubble-padding,
+    --chat-bubble-title-margin-bottom: $chat-bubble-title-margin-bottom,
+  ),
+  $chat-tokens
+);
+// scss-docs-end chat-css-vars
+
+// stylelint-enable custom-property-no-missing-var-function
+
 .chat {
-  // scss-docs-start chat-css-vars
-  --chat-bubbles-gap: #{$chat-bubbles-gap};
-  --chat-bubble-padding: #{$chat-bubble-padding};
-  --chat-bubble-title-margin-bottom: #{$chat-bubble-title-margin-bottom};
-  // scss-docs-end chat-css-vars
+  @include tokens($chat-tokens);
 }
 
 .chat-bubbles {

core/scss/ui/_close.scss

@@ -1,14 +1,28 @@
 @use '../config' as *;
 
+// stylelint-disable custom-property-no-missing-var-function -- token-map keys are dashed-idents by design, not unwrapped var() references
+
+// scss-docs-start btn-close-css-vars
+$btn-close-tokens: () !default;
+$btn-close-tokens: defaults(
+  (
+    --btn-close-color: currentColor,
+    --btn-close-bg: #{escape-svg($btn-close-bg)},
+    --btn-close-opacity: $btn-close-opacity,
+    --btn-close-hover-opacity: $btn-close-hover-opacity,
+    --btn-close-focus-shadow: $btn-close-focus-shadow,
+    --btn-close-focus-opacity: $btn-close-focus-opacity,
+    --btn-close-disabled-opacity: $btn-close-disabled-opacity,
+    --btn-close-size: $btn-close-width,
+  ),
+  $btn-close-tokens
+);
+// scss-docs-end btn-close-css-vars
+
+// stylelint-enable custom-property-no-missing-var-function
+
 .btn-close {
-  @include focus-ring-transition();
-  --btn-close-color: currentColor;
-  --btn-close-bg: #{escape-svg($btn-close-bg)};
-  --btn-close-opacity: #{$btn-close-opacity};
-  --btn-close-hover-opacity: #{$btn-close-hover-opacity};
-  --btn-close-focus-opacity: #{$btn-close-focus-opacity};
-  --btn-close-disabled-opacity: #{$btn-close-disabled-opacity};
-  --btn-close-size: #{$btn-close-width};
+  @include tokens($btn-close-tokens);
   position: relative;
   display: block;
 

core/scss/ui/_datagrid.scss

@@ -4,13 +4,24 @@
 
 @use '../config' as *;
 
-.datagrid {
-  // scss-docs-start datagrid-css-vars
-  --datagrid-padding: #{$datagrid-padding};
-  --datagrid-item-width: #{$datagrid-item-width};
-  --datagrid-title-margin-bottom: #{$datagrid-title-margin-bottom};
-  // scss-docs-end datagrid-css-vars
+// stylelint-disable custom-property-no-missing-var-function -- token-map keys are dashed-idents by design, not unwrapped var() references
 
+// scss-docs-start datagrid-css-vars
+$datagrid-tokens: () !default;
+$datagrid-tokens: defaults(
+  (
+    --datagrid-padding: $datagrid-padding,
+    --datagrid-item-width: $datagrid-item-width,
+    --datagrid-title-margin-bottom: $datagrid-title-margin-bottom,
+  ),
+  $datagrid-tokens
+);
+// scss-docs-end datagrid-css-vars
+
+// stylelint-enable custom-property-no-missing-var-function
+
+.datagrid {
+  @include tokens($datagrid-tokens);
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(var(--datagrid-item-width), 1fr));
   grid-gap: var(--datagrid-padding);

core/scss/ui/_dropdowns.scss

@@ -1,15 +1,29 @@
 @use '../config' as *;
 
+// stylelint-disable custom-property-no-missing-var-function -- token-map keys are dashed-idents by design, not unwrapped var() references
+
+// scss-docs-start dropdown-css-vars
+$dropdown-tokens: () !default;
+$dropdown-tokens: defaults(
+  (
+    --dropdown-item-gap: $dropdown-item-gap,
+    --dropdown-item-icon-size: $icon-size,
+    --dropdown-item-icon-color: var(--tertiary),
+    --dropdown-header-padding-bottom: $dropdown-header-padding-bottom,
+    --dropdown-menu-columns-gap: $dropdown-menu-columns-gap,
+    --dropdown-arrow-offset: $dropdown-arrow-offset,
+    --dropdown-arrow-inset: $dropdown-arrow-inset,
+    --dropdown-dropend-offset: $dropdown-dropend-offset,
+    --dropdown-menu-card-min-width: $dropdown-menu-card-min-width,
+  ),
+  $dropdown-tokens
+);
+// scss-docs-end dropdown-css-vars
+
+// stylelint-enable custom-property-no-missing-var-function
+
 .dropdown-menu {
-  --dropdown-item-gap: #{$dropdown-item-gap};
-  --dropdown-item-icon-size: #{$icon-size};
-  --dropdown-item-icon-color: var(--tertiary);
-  --dropdown-header-padding-bottom: #{$dropdown-header-padding-bottom};
-  --dropdown-menu-columns-gap: #{$dropdown-menu-columns-gap};
-  --dropdown-arrow-offset: #{$dropdown-arrow-offset};
-  --dropdown-arrow-inset: #{$dropdown-arrow-inset};
-  --dropdown-dropend-offset: #{$dropdown-dropend-offset};
-  --dropdown-menu-card-min-width: #{$dropdown-menu-card-min-width};
+  @include tokens($dropdown-tokens);
   user-select: none;
   background-clip: border-box;
 

core/scss/ui/_empty.scss

@@ -1,18 +1,29 @@
 @use '../config' as *;
 
-.empty {
-  // scss-docs-start empty-css-vars
-  --empty-padding: #{$empty-padding};
-  --empty-padding-md: #{$empty-padding-md};
-  --empty-icon-size: #{$empty-icon-size};
-  --empty-icon-margin-bottom: #{$empty-icon-margin-bottom};
-  --empty-img-margin-bottom: #{$empty-img-margin-bottom};
-  --empty-header-margin-bottom: #{$empty-header-margin-bottom};
-  --empty-header-font-size: #{$empty-header-font-size};
-  --empty-title-margin-bottom: #{$empty-title-margin-bottom};
-  --empty-action-margin-top: #{$empty-action-margin-top};
-  // scss-docs-end empty-css-vars
+// stylelint-disable custom-property-no-missing-var-function -- token-map keys are dashed-idents by design, not unwrapped var() references
 
+// scss-docs-start empty-css-vars
+$empty-tokens: () !default;
+$empty-tokens: defaults(
+  (
+    --empty-padding: $empty-padding,
+    --empty-padding-md: $empty-padding-md,
+    --empty-icon-size: $empty-icon-size,
+    --empty-icon-margin-bottom: $empty-icon-margin-bottom,
+    --empty-img-margin-bottom: $empty-img-margin-bottom,
+    --empty-header-margin-bottom: $empty-header-margin-bottom,
+    --empty-header-font-size: $empty-header-font-size,
+    --empty-title-margin-bottom: $empty-title-margin-bottom,
+    --empty-action-margin-top: $empty-action-margin-top,
+  ),
+  $empty-tokens
+);
+// scss-docs-end empty-css-vars
+
+// stylelint-enable custom-property-no-missing-var-function
+
+.empty {
+  @include tokens($empty-tokens);
   display: flex;
   flex-direction: column;
   align-items: center;

core/scss/ui/_markdown.scss

@@ -3,14 +3,30 @@
 $markdown-font-size: var(--font-size-h3) !default;
 $markdown-line-height: var(--line-height-lg) !default;
 
-// Prose (formerly markdown)
+// stylelint-disable custom-property-no-missing-var-function -- token-map keys are dashed-idents by design, not unwrapped var() references
+
+// scss-docs-start markdown-css-vars
+$markdown-tokens: () !default;
+$markdown-tokens: defaults(
+  (
+    --markdown-heading-margin-top: $markdown-heading-margin-top,
+    --markdown-blockquote-margin-y: $markdown-blockquote-margin-y,
+    --markdown-blockquote-padding-y: $markdown-blockquote-padding-y,
+    --markdown-blockquote-padding-x: $markdown-blockquote-padding-x,
+    --markdown-pre-max-height: $markdown-pre-max-height,
+  ),
+  $markdown-tokens
+);
+// scss-docs-end markdown-css-vars
+
+// stylelint-enable custom-property-no-missing-var-function
+
+/**
+Prose (formerly markdown)
+ */
 .prose,
 .markdown {
-  --markdown-heading-margin-top: #{$markdown-heading-margin-top};
-  --markdown-blockquote-margin-y: #{$markdown-blockquote-margin-y};
-  --markdown-blockquote-padding-y: #{$markdown-blockquote-padding-y};
-  --markdown-blockquote-padding-x: #{$markdown-blockquote-padding-x};
-  --markdown-pre-max-height: #{$markdown-pre-max-height};
+  @include tokens($markdown-tokens);
   font-size: $markdown-font-size;
   line-height: $markdown-line-height;
 

core/scss/ui/_ribbons.scss

@@ -4,22 +4,33 @@
 
 @use '../config' as *;
 
-.ribbon {
-  // scss-docs-start ribbon-css-vars
-  --ribbon-margin: #{$card-ribbon-margin};
-  --ribbon-border-radius: #{$card-ribbon-border-radius};
-  --ribbon-font-size: #{$card-ribbon-font-size};
-  --ribbon-icon-size: #{$card-ribbon-icon-size};
-  --ribbon-offset: #{$ribbon-offset};
-  --ribbon-padding-y: #{$ribbon-padding-y};
-  --ribbon-padding-x: #{$ribbon-padding-x};
-  --ribbon-min-size: #{$ribbon-min-size};
-  --ribbon-top-width: #{$ribbon-top-width};
-  --ribbon-top-padding-y: #{$ribbon-top-padding-y};
-  --ribbon-bookmark-border-size: #{$ribbon-bookmark-border-size};
-  --ribbon-bookmark-notch-width: #{$ribbon-bookmark-notch-width};
-  // scss-docs-end ribbon-css-vars
+// stylelint-disable custom-property-no-missing-var-function -- token-map keys are dashed-idents by design, not unwrapped var() references
 
+// scss-docs-start ribbon-css-vars
+$ribbon-tokens: () !default;
+$ribbon-tokens: defaults(
+  (
+    --ribbon-margin: $card-ribbon-margin,
+    --ribbon-border-radius: $card-ribbon-border-radius,
+    --ribbon-font-size: $card-ribbon-font-size,
+    --ribbon-icon-size: $card-ribbon-icon-size,
+    --ribbon-offset: $ribbon-offset,
+    --ribbon-padding-y: $ribbon-padding-y,
+    --ribbon-padding-x: $ribbon-padding-x,
+    --ribbon-min-size: $ribbon-min-size,
+    --ribbon-top-width: $ribbon-top-width,
+    --ribbon-top-padding-y: $ribbon-top-padding-y,
+    --ribbon-bookmark-border-size: $ribbon-bookmark-border-size,
+    --ribbon-bookmark-notch-width: $ribbon-bookmark-notch-width,
+  ),
+  $ribbon-tokens
+);
+// scss-docs-end ribbon-css-vars
+
+// stylelint-enable custom-property-no-missing-var-function
+
+.ribbon {
+  @include tokens($ribbon-tokens);
   position: absolute;
   inset-inline-end: calc(-1 * var(--ribbon-margin));
   top: var(--ribbon-offset);

core/scss/ui/_segmented.scss

@@ -1,19 +1,32 @@
 @use '../config' as *;
 
-.nav-segmented {
-  --nav-bg: var(--bg-surface-tertiary);
-  --nav-padding: #{$nav-segmented-padding};
-  --nav-height: #{$nav-segmented-height};
-  --nav-gap: #{$nav-segmented-gap};
-  --nav-active-bg: var(--bg-surface);
-  --nav-font-size: inherit;
-  --nav-radius: #{$nav-segmented-radius};
+// stylelint-disable custom-property-no-missing-var-function -- token-map keys are dashed-idents by design, not unwrapped var() references
 
-  --nav-link-disabled-color: var(--disabled-color);
-  --nav-link-gap: #{$nav-segmented-link-gap};
-  --nav-link-padding-x: #{$nav-segmented-link-padding-x};
-  --nav-link-icon-size: #{$nav-segmented-link-icon-size};
-  --nav-link-icon-margin: #{$nav-segmented-icon-margin};
+// scss-docs-start nav-segmented-css-vars
+$nav-segmented-tokens: () !default;
+$nav-segmented-tokens: defaults(
+  (
+    --nav-bg: var(--bg-surface-tertiary),
+    --nav-padding: $nav-segmented-padding,
+    --nav-height: $nav-segmented-height,
+    --nav-gap: $nav-segmented-gap,
+    --nav-active-bg: var(--bg-surface),
+    --nav-font-size: inherit,
+    --nav-radius: $nav-segmented-radius,
+    --nav-link-disabled-color: var(--disabled-color),
+    --nav-link-gap: $nav-segmented-link-gap,
+    --nav-link-padding-x: $nav-segmented-link-padding-x,
+    --nav-link-icon-size: $nav-segmented-link-icon-size,
+    --nav-link-icon-margin: $nav-segmented-icon-margin,
+  ),
+  $nav-segmented-tokens
+);
+// scss-docs-end nav-segmented-css-vars
+
+// stylelint-enable custom-property-no-missing-var-function
+
+.nav-segmented {
+  @include tokens($nav-segmented-tokens);
   display: inline-flex;
   flex-wrap: wrap;
   gap: var(--nav-gap);

core/scss/ui/_signature.scss

@@ -1,9 +1,23 @@
 @use '../config' as *;
 
+// stylelint-disable custom-property-no-missing-var-function -- token-map keys are dashed-idents by design, not unwrapped var() references
+
+// scss-docs-start signature-css-vars
+$signature-tokens: () !default;
+$signature-tokens: defaults(
+  (
+    --signature-padding: var(--spacer-1),
+    --signature-border-radius: var(--border-radius),
+    --signature-canvas-height: 12.5rem,
+  ),
+  $signature-tokens
+);
+// scss-docs-end signature-css-vars
+
+// stylelint-enable custom-property-no-missing-var-function
+
 .signature {
-  --signature-padding: var(--spacer-1);
-  --signature-border-radius: var(--border-radius);
-  --signature-canvas-height: 12.5rem;
+  @include tokens($signature-tokens);
   padding: var(--signature-padding);
   border: var(--border-width) solid var(--border-color);
   @include border-radius(var(--border-radius));

core/scss/ui/_status.scss

@@ -43,15 +43,26 @@
 //
 // Status
 //
-.status {
-  // scss-docs-start status-css-vars
-  --status-height: #{$status-height};
-  --status-color: #{$text-secondary};
-  --status-padding-y: #{$status-padding-y};
-  --status-padding-x: #{$status-padding-x};
-  --status-gap: #{$status-gap};
-  // scss-docs-end status-css-vars
+// stylelint-disable custom-property-no-missing-var-function -- token-map keys are dashed-idents by design, not unwrapped var() references
 
+// scss-docs-start status-css-vars
+$status-tokens: () !default;
+$status-tokens: defaults(
+  (
+    --status-height: $status-height,
+    --status-color: $text-secondary,
+    --status-padding-y: $status-padding-y,
+    --status-padding-x: $status-padding-x,
+    --status-gap: $status-gap,
+  ),
+  $status-tokens
+);
+// scss-docs-end status-css-vars
+
+// stylelint-enable custom-property-no-missing-var-function
+
+.status {
+  @include tokens($status-tokens);
   display: inline-flex;
   gap: var(--status-gap);
   align-items: center;

core/scss/ui/_steps.scss

@@ -3,13 +3,25 @@
 //
 @use '../config' as *;
 
+// stylelint-disable custom-property-no-missing-var-function -- token-map keys are dashed-idents by design, not unwrapped var() references
+
+// scss-docs-start steps-css-vars
+$steps-tokens: () !default;
+$steps-tokens: defaults(
+  (
+    --steps-color: $steps-color,
+    --steps-inactive-color: $steps-inactive-color,
+    --steps-dot-size: $steps-dot-size,
+    --steps-border-width: $steps-border-width,
+  ),
+  $steps-tokens
+);
+// scss-docs-end steps-css-vars
+
+// stylelint-enable custom-property-no-missing-var-function
+
 .steps {
-  // scss-docs-start steps-css-vars
-  --steps-color: #{$steps-color};
-  --steps-inactive-color: #{$steps-inactive-color};
-  --steps-dot-size: #{$steps-dot-size};
-  --steps-border-width: #{$steps-border-width};
-  // scss-docs-end steps-css-vars
+  @include tokens($steps-tokens);
   display: flex;
   flex-wrap: nowrap;
   width: 100%;

core/scss/ui/_tags.scss

@@ -1,19 +1,31 @@
 @use '../config' as *;
 
+// stylelint-disable custom-property-no-missing-var-function -- token-map keys are dashed-idents by design, not unwrapped var() references
+
+// scss-docs-start tag-css-vars
+$tag-tokens: () !default;
+$tag-tokens: defaults(
+  (
+    --tag-height: $tag-height,
+    --tag-padding-x: $tag-padding-x,
+    --tag-gap: $tag-gap,
+    --tag-close-margin-end: $tag-close-margin-end,
+    --tag-close-margin-start: $tag-close-margin-start,
+    --tag-close-size: $tag-close-size,
+    --tag-close-font-size: $tag-close-font-size,
+    --tag-addon-margin-start: $tag-addon-margin-start,
+    --tag-icon-margin-end: $tag-icon-margin-end,
+    --tag-icon-size: $tag-icon-size,
+    --tag-check-size: $tag-check-size,
+  ),
+  $tag-tokens
+);
+// scss-docs-end tag-css-vars
+
+// stylelint-enable custom-property-no-missing-var-function
+
 .tag {
-  // scss-docs-start tag-css-vars
-  --tag-height: #{$tag-height};
-  --tag-padding-x: #{$tag-padding-x};
-  --tag-gap: #{$tag-gap};
-  --tag-close-margin-end: #{$tag-close-margin-end};
-  --tag-close-margin-start: #{$tag-close-margin-start};
-  --tag-close-size: #{$tag-close-size};
-  --tag-close-font-size: #{$tag-close-font-size};
-  --tag-addon-margin-start: #{$tag-addon-margin-start};
-  --tag-icon-margin-end: #{$tag-icon-margin-end};
-  --tag-icon-size: #{$tag-icon-size};
-  --tag-check-size: #{$tag-check-size};
-  // scss-docs-end tag-css-vars
+  @include tokens($tag-tokens);
   display: inline-flex;
   gap: var(--tag-gap);
   align-items: center;

core/scss/ui/_tracking.scss

@@ -1,12 +1,24 @@
 @use '../config' as *;
 
+// stylelint-disable custom-property-no-missing-var-function -- token-map keys are dashed-idents by design, not unwrapped var() references
+
+// scss-docs-start tracking-css-vars
+$tracking-tokens: () !default;
+$tracking-tokens: defaults(
+  (
+    --tracking-height: $tracking-height,
+    --tracking-gap-width: $tracking-gap-width,
+    --tracking-block-border-radius: $tracking-border-radius,
+    --tracking-block-min-width: $tracking-block-min-width,
+  ),
+  $tracking-tokens
+);
+// scss-docs-end tracking-css-vars
+
+// stylelint-enable custom-property-no-missing-var-function
+
 .tracking {
-  // scss-docs-start tracking-css-vars
-  --tracking-height: #{$tracking-height};
-  --tracking-gap-width: #{$tracking-gap-width};
-  --tracking-block-border-radius: #{$tracking-border-radius};
-  --tracking-block-min-width: #{$tracking-block-min-width};
-  // scss-docs-end tracking-css-vars
+  @include tokens($tracking-tokens);
   display: flex;
   gap: var(--tracking-gap-width);
 }

core/scss/ui/_type.scss

@@ -341,10 +341,24 @@ $text-variants: (
   }
 }
 
+// stylelint-disable custom-property-no-missing-var-function -- token-map keys are dashed-idents by design, not unwrapped var() references
+
+// scss-docs-start callout-css-vars
+$callout-tokens: () !default;
+$callout-tokens: defaults(
+  (
+    --callout-margin-bottom: $callout-margin-bottom,
+    --callout-padding-y: $callout-padding-y,
+    --callout-padding-x: $callout-padding-x,
+  ),
+  $callout-tokens
+);
+// scss-docs-end callout-css-vars
+
+// stylelint-enable custom-property-no-missing-var-function
+
 .callout {
-  --callout-margin-bottom: #{$callout-margin-bottom};
-  --callout-padding-y: #{$callout-padding-y};
-  --callout-padding-x: #{$callout-padding-x};
+  @include tokens($callout-tokens);
   padding: var(--callout-padding-y) var(--callout-padding-x);
   margin-bottom: var(--callout-margin-bottom);
   background: var(--primary-lt);