Remove colored links for theme utilities

scss/content/_reboot.scss

@@ -249,14 +249,14 @@
   // Links
 
   a {
-    color: var(--link-color);
+    color: var(--theme-text, var(--link-color));
     text-decoration: var(--link-decoration);
     text-underline-offset: $link-underline-offset;
 
     &:hover {
       // --link-color: var(--link-hover-color);
       // --link-decoration: var(--link-hover-decoration, var(--link-decoration));
-      color: var(--link-hover-color);
+      color: var(--theme-text-emphasis, var(--link-hover-color));
       text-decoration: var(--link-hover-decoration, var(--link-decoration));
     }
   }

scss/helpers/_colored-links.scss

@@ -1,38 +0,0 @@
-@use "../config" as *;
-@use "../colors" as *;
-@use "../theme" as *;
-@use "../variables" as *;
-
-@layer helpers {
-  @each $color, $value in $new-theme-colors {
-    .link-#{$color} {
-      --link-color: var(--#{$color}-text);
-      // text-decoration-color: color-mix(in srgb, var(--#{$color}-text), transparent var(--link-underline-opacity));
-
-      @if $link-shade-percentage != 0 {
-        &:hover,
-        &:focus {
-          --link-color: var(--#{$color}-text-emphasis);
-          --link-hover-color: var(--#{$color}-text-emphasis);
-          // $hover-color: if(color-contrast($value) == $color-contrast-light, shade-color($value, $link-shade-percentage), tint-color($value, $link-shade-percentage));
-          // color: color-mix(in srgb, $hover-color, transparent var(--link-opacity));
-          // text-decoration-color: color-mix(in srgb, var(--#{$color}-text), transparent var(--link-underline-opacity));
-        }
-      }
-    }
-  }
-
-  // One-off special link helper as a bridge until v6
-  .link-body-emphasis {
-    color: color-mix(in srgb, var(--emphasis-color), transparent var(--link-opacity));
-    text-decoration-color: color-mix(in srgb, var(--emphasis-color), transparent var(--link-underline-opacity));
-
-    @if $link-shade-percentage != 0 {
-      &:hover,
-      &:focus {
-        color: color-mix(in srgb, var(--emphasis-color), transparent var(--link-opacity, .75));
-        text-decoration-color: color-mix(in srgb, var(--emphasis-color), transparent var(--link-underline-opacity, .75));
-      }
-    }
-  }
-}

scss/helpers/index.scss

@@ -1,5 +1,4 @@
 @forward "color-bg";
-@forward "colored-links";
 @forward "focus-ring";
 @forward "icon-link";
 @forward "position";

site/data/sidebar.yml

@@ -110,7 +110,6 @@
   icon_color: orange
   pages:
     - title: Color & background
-    - title: Colored links
     - title: Focus ring
     - title: Icon link
     - title: Position

site/src/content/docs/content/reboot.mdx

@@ -5,6 +5,8 @@ aliases: "/docs/[[config:docs_version]]/content/"
 toc: true
 ---
 
+import { getData } from '@libs/data'
+
 ## Approach
 
 Reboot builds upon Normalize, providing many HTML elements with somewhat opinionated styles using only element selectors. Additional styling is done only with classes. For example, we reboot some `<table>` styles for a simpler baseline and later provide `.table`, `.table-bordered`, and more.
@@ -103,9 +105,13 @@ Links have a default `color` and underline applied. While links change on `:hove
 
 <Example code={`<a href="#">This is an example link</a>`} />
 
-As of v5.3.x, link `color` is set using `rgba()` and new `-rgb` CSS variables, allowing for easy customization of link color opacity. Change the link color opacity with the `--bs-link-opacity` CSS variable:
+Use [`.link-{%}`]([[docsref:/utilities/link/#link-opacity]]) utilities to change the link color opacity.
 
-<Example code={`<a href="#" style="--bs-link-opacity: .5">This is an example link</a>`} />
+<Example code={`<a href="#" class="link-50">This is an example link</a>`} />
+
+Use the theme utility classes to change the link color.
+
+<Example code={[...getData('theme-colors').map((themeColor) => `<a href="#" class="theme-${themeColor.name}">${themeColor.title} link</a>`)]} />
 
 Placeholder links—those without an `href`—are targeted with a more specific selector and have their `color` and `text-decoration` reset to their default values.
 

site/src/content/docs/helpers/colored-links.mdx

@@ -1,31 +0,0 @@
----
-title: Colored links
-description: Colored links with hover states
-toc: true
----
-
-import { getData } from '@libs/data'
-
-## Link colors
-
-You can use the `.link-*` classes to colorize links. Unlike the [`.text-*` classes]([[docsref:/utilities/colors]]), these classes have a `:hover` and `:focus` state. Some of the link styles use a relatively light foreground color, and should only be used on a dark background in order to have sufficient contrast.
-
-<Callout>
-**Heads up!** `.link-body-emphasis` is currently the only colored link that adapts to color modes. It’s treated as a special case until v6 arrives and we can more thoroughly rebuild our theme colors for color modes. Until then, it’s a unique, high-contrast link color with custom `:hover` and `:focus` styles. However, it still responds to the new link utilities.
-</Callout>
-
-<Example code={[
-  ...getData('theme-colors').map((themeColor) => `<p><a href="#" class="link-${themeColor.name}">${themeColor.title} link</a></p>`),
-  `<p><a href="#" class="link-body-emphasis">Emphasis link</a></p>`
-]} />
-
-<Details name="warning-color-assistive-technologies" />
-
-## Link utilities
-
-Colored links can also be modified by our [link utilities]([[docsref:/utilities/link/]]).
-
-<Example code={[
-  ...getData('theme-colors').map((themeColor) => `<p><a href="#" class="link-${themeColor.name} link-offset-2 link-underline-opacity-25 link-underline-opacity-100-hover">${themeColor.title} link</a></p>`),
-  `<p><a href="#" class="link-body-emphasis link-offset-2 link-underline-opacity-25 link-underline-opacity-75-hover">Emphasis link</a></p>`
-]} />