Tokenize icon-link and stretched-link helpers (#42696)

* Convert icon-link and stretched-link variables to Sass token maps

Move the icon-link and stretched-link Sass variables out of _config.scss
and into component-scoped token maps, generating scoped CSS custom
properties instead. Updates each helper docs page to document the new
CSS variables.

* Fix icon-link underline color referencing a nonexistent v5 variable

.icon-link relied on the removed --link-color-rgb and --link-opacity
variables, so its underline never picked up custom link colors. Use
color-mix() against --link-color instead.

Author: mdo

scss/_config.scss

@@ -178,18 +178,6 @@ $position-values: (
 $link-decoration:                         underline !default;
 $link-underline-offset:                   .2em !default;
 
-$stretched-link-pseudo-element:           after !default;
-$stretched-link-z-index:                  1 !default;
-
-// Icon links
-// scss-docs-start icon-link-variables
-$icon-link-gap:               .375rem !default;
-$icon-link-underline-offset:  .25em !default;
-$icon-link-icon-size:         1em !default;
-$icon-link-icon-transition:   .2s ease-in-out transform !default;
-$icon-link-icon-transform:    translate3d(.25em, 0, 0) !default;
-// scss-docs-end icon-link-variables
-
 // Components
 //
 // Define common padding and border radius sizes and more.

scss/helpers/_icon-link.scss

@@ -1,29 +1,48 @@
-@use "../config" as *;
+@use "../functions" as *;
+@use "../mixins/tokens" as *;
 @use "../mixins/transition" as *;
 
+$icon-link-tokens: () !default;
+
+// scss-docs-start icon-link-tokens
+// stylelint-disable-next-line scss/dollar-variable-default
+$icon-link-tokens: defaults(
+  (
+    --icon-link-gap: .375rem,
+    --icon-link-underline-offset: .25em,
+    --icon-link-icon-size: 1em,
+    --icon-link-icon-transition: .2s ease-in-out transform,
+    --icon-link-icon-transform: translate3d(.25em, 0, 0),
+  ),
+  $icon-link-tokens
+);
+// scss-docs-end icon-link-tokens
+
 @layer helpers {
   .icon-link {
+    @include tokens($icon-link-tokens);
+
     display: inline-flex;
-    gap: $icon-link-gap;
+    gap: var(--icon-link-gap);
     align-items: center;
-    text-decoration-color: rgba(var(--link-color-rgb), var(--link-opacity, .5));
-    text-underline-offset: $icon-link-underline-offset;
+    text-decoration-color: color-mix(in oklch, var(--link-color) 50%, transparent);
+    text-underline-offset: var(--icon-link-underline-offset);
     backface-visibility: hidden;
 
     > .bi {
       flex-shrink: 0;
-      width: $icon-link-icon-size;
-      height: $icon-link-icon-size;
+      width: var(--icon-link-icon-size);
+      height: var(--icon-link-icon-size);
       fill: currentcolor;
-      @include transition($icon-link-icon-transition);
+      @include transition(var(--icon-link-icon-transition));
     }
   }
 
   .icon-link-hover {
     &:hover,
     &:focus-visible {
       > .bi {
-        transform: var(--icon-link-transform, $icon-link-icon-transform);
+        transform: var(--icon-link-transform, var(--icon-link-icon-transform));
       }
     }
   }

scss/helpers/_stretched-link.scss

@@ -1,11 +1,30 @@
-@use "../config" as *;
+@use "../functions" as *;
+@use "../mixins/tokens" as *;
+
+// scss-docs-start stretched-link-pseudo-element
+$stretched-link-pseudo-element: after !default;
+// scss-docs-end stretched-link-pseudo-element
+
+$stretched-link-tokens: () !default;
+
+// scss-docs-start stretched-link-tokens
+// stylelint-disable-next-line scss/dollar-variable-default
+$stretched-link-tokens: defaults(
+  (
+    --stretched-link-z-index: 1,
+  ),
+  $stretched-link-tokens
+);
+// scss-docs-end stretched-link-tokens
 
 @layer helpers {
   .stretched-link {
+    @include tokens($stretched-link-tokens);
+
     &::#{$stretched-link-pseudo-element} {
       position: absolute;
       inset: 0;
-      z-index: $stretched-link-z-index;
+      z-index: var(--stretched-link-z-index);
       content: "";
     }
   }

site/src/content/docs/helpers/icon-link.mdx

@@ -41,13 +41,13 @@ Add `.icon-link-hover` to move the icon to the right on hover.
     </svg>
   </a>`} />
 
-## Customize
+## CSS
 
-Modify the styling of an icon link with our link CSS variables, Sass variables, utilities, or custom styles.
+### Variables
 
-### CSS variables
+<CSSVariables component="Icon links" className="icon-link" />
 
-Modify the `--bs-link-*` and `--bs-icon-link-*` CSS variables as needed to change the default appearance.
+<ScssDocs name="icon-link-tokens" file="scss/helpers/_icon-link.scss" />
 
 Customize the hover `transform` by overriding the `--bs-icon-link-transform` CSS variable:
 
@@ -59,21 +59,15 @@ Customize the hover `transform` by overriding the `--bs-icon-link-transform` CSS
     Icon link
   </a>`} />
 
-Customize the color by overriding the `--bs-link-*` CSS variable:
+The icon link’s underline color is derived from `--bs-link-color`, so overriding it updates both the text and the underline together:
 
-<Example code={`<a class="icon-link icon-link-hover" style="--bs-link-hover-color-rgb: 25, 135, 84;" href="#">
+<Example code={`<a class="icon-link icon-link-hover" style="--bs-link-color: #198754;" href="#">
     Icon link
     <svg xmlns="http://www.w3.org/2000/svg" class="bi" viewBox="0 0 16 16" aria-hidden="true">
       <path d="M1 8a.5.5 0 0 1 .5-.5h11.793l-3.147-3.146a.5.5 0 0 1 .708-.708l4 4a.5.5 0 0 1 0 .708l-4 4a.5.5 0 0 1-.708-.708L13.293 8.5H1.5A.5.5 0 0 1 1 8z"/>
     </svg>
   </a>`} />
 
-### Sass variables
-
-Customize the icon link Sass variables to modify all icon link styles across your Bootstrap-powered project.
-
-<ScssDocs name="icon-link-variables" file="scss/_config.scss" />
-
 ### Sass utilities API
 
 Modify icon links with any of [our link utilities]([[docsref:/utilities/link/]]) for modifying underline color and offset.

site/src/content/docs/helpers/stretched-link.mdx

@@ -1,6 +1,7 @@
 ---
 title: Stretched link
 description: Make any HTML element or Bootstrap component clickable by “stretching” a nested link via CSS.
+toc: true
 ---
 
 Add `.stretched-link` to a link to make its [containing block](https://developer.mozilla.org/en-US/docs/Web/CSS/Containing_block) clickable via a `::after` pseudo element. In most cases, this means that an element with `position: relative;` that contains a link with the `.stretched-link` class is clickable. Please note given [how CSS `position` works](https://www.w3.org/TR/CSS21/visuren.html#propdef-position), `.stretched-link` cannot be mixed with most table elements.
@@ -62,3 +63,17 @@ If the stretched link doesn’t seem to work, the [containing block](https://dev
       </p>
     </div>
   </div>`} />
+
+## CSS
+
+### Variables
+
+<CSSVariables component="Stretched links" className="stretched-link" />
+
+<ScssDocs name="stretched-link-tokens" file="scss/helpers/_stretched-link.scss" />
+
+### Sass variable
+
+The pseudo-element used to stretch the link defaults to `after` and can be changed via the `$stretched-link-pseudo-element` Sass variable. This can’t be a CSS variable since it’s compiled directly into the generated selector.
+
+<ScssDocs name="stretched-link-pseudo-element" file="scss/helpers/_stretched-link.scss" />