diff --git a/scss/content/_reboot.scss b/scss/content/_reboot.scss index 0162321ad3..db802f86ad 100644 --- a/scss/content/_reboot.scss +++ b/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)); } } diff --git a/scss/helpers/_colored-links.scss b/scss/helpers/_colored-links.scss deleted file mode 100644 index fdd8b458ea..0000000000 --- a/scss/helpers/_colored-links.scss +++ /dev/null @@ -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)); - } - } - } -} diff --git a/scss/helpers/index.scss b/scss/helpers/index.scss index eb18c98b3a..450afce02a 100644 --- a/scss/helpers/index.scss +++ b/scss/helpers/index.scss @@ -1,5 +1,4 @@ @forward "color-bg"; -@forward "colored-links"; @forward "focus-ring"; @forward "icon-link"; @forward "position"; diff --git a/site/data/sidebar.yml b/site/data/sidebar.yml index 4fd8e75f3d..b22b80f6a1 100644 --- a/site/data/sidebar.yml +++ b/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 diff --git a/site/src/content/docs/content/reboot.mdx b/site/src/content/docs/content/reboot.mdx index 8ce7af8eab..26dd213213 100644 --- a/site/src/content/docs/content/reboot.mdx +++ b/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 `` 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 This is an example link`} /> -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. -This is an example link`} /> +This is an example link`} /> + +Use the theme utility classes to change the link color. + + `${themeColor.title} link`)]} /> 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. diff --git a/site/src/content/docs/helpers/colored-links.mdx b/site/src/content/docs/helpers/colored-links.mdx deleted file mode 100644 index 8dd4ad05d9..0000000000 --- a/site/src/content/docs/helpers/colored-links.mdx +++ /dev/null @@ -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. - - -**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. - - - `

${themeColor.title} link

`), - `

Emphasis link

` -]} /> - -
- -## Link utilities - -Colored links can also be modified by our [link utilities]([[docsref:/utilities/link/]]). - - `

${themeColor.title} link

`), - `

Emphasis link

` -]} />