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 `