fix: update following MR review

Author: nilloq

scss/_links.scss

@@ -15,8 +15,10 @@
 }
 
 .link {
+  // scss-docs-start link-css-vars
   --#{$prefix}link-icon-size: #{$ouds-link-size-icon-medium};
   --#{$prefix}link-icon-gap: #{$ouds-link-space-column-gap-icon-medium};
+  // scss-docs-end link-css-vars
 
   @extend a;
   @include get-font-size("label-large");

scss/_reboot.scss

@@ -393,7 +393,7 @@ a {
 // causes specificity issues in many other styles that are too complex to fix.
 // See https://github.com/twbs/bootstrap/issues/19402
 
-a:not([href]):not([class]) {
+a:not([href]):not([class]):not([aria-disabled="true"]) {
   &,
   &:hover {
     color: inherit;

scss/_variables.scss

@@ -487,30 +487,18 @@ $body-emphasis-color:       $ouds-color-content-default-light !default; // OUDS
 //
 // Style anchor elements.
 
+// scss-docs-start link-variables
 $link-color:                              $black !default; // OUDS mod
 $link-decoration:                         underline !default;
 $link-font-weight:                        $ouds-font-weight-strong !default;
 $link-shade-percentage:                   20% !default;
 $link-hover-color:                        $primary !default; // OUDS mod
-$link-hover-decoration:                   $link-decoration !default;
+$link-hover-decoration:                   null !default;
+// scss-docs-end link-variables
 
 $stretched-link-pseudo-element:           after !default;
 $stretched-link-z-index:                  1 !default;
 
-// OUDS mod
-// $ouds-link-chevron-after-transform:       rotate(.5turn) translateY(1px) !default;
-// End mod
-
-// Icon links
-// $icon-link-gap:               .3125rem !default; // OUDS mod: instead of `.375rem`
-// $icon-link-underline-offset:  .25em !default;
-// $icon-link-icon-size:         1em !default;
-// scss-docs-start icon-link-variables
-// $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
-
-
 // Paragraphs
 //
 // Style p element.
@@ -2154,7 +2142,7 @@ $back-to-top-title-color:        var(--#{$prefix}body-color) !default;
 $back-to-top-title-bg-color:     var(--#{$prefix}body-bg) !default;
 $back-to-top-bg:                 var(--#{$prefix}highlight-color) !default;
 $back-to-top-icon:               var(--#{$prefix}chevron-icon) !default;
-$back-to-top-icon-width:         add(3rem, 1px) !default;
+$back-to-top-icon-width:         add(.5rem, 1px) !default;
 $back-to-top-icon-height:        subtract(1rem, 1px) !default;
 // scss-docs-end back-to-top
 

site/assets/scss/_sidebar.scss

@@ -51,7 +51,7 @@
   padding: .1875rem .5rem;
   margin-top: .125rem;
   margin-left: 1.375rem; // OUDS mod: changed value
-  font-size: var(--#{$prefix}font-size-body-small); // OUDS mod: instead of `1rem`
+  @include get-font-size("body-small");// OUDS mod: instead of `1rem`
   font-weight: 400; // OUDS mod: no 'bold' for the sidebar links
   // OUDS mod: no `color`
   text-decoration: if($link-decoration == none, null, none);

site/assets/scss/_toc.scss

@@ -27,7 +27,7 @@
     a {
       display: block;
       padding: $ouds-space-fixed-shortest 0 $ouds-space-fixed-shortest $ouds-space-fixed-medium; // OUDS mod
-      font-size: var(--#{$prefix}font-size-body-small); // OUDS mod: instead of `1rem`
+      @include get-font-size("body-small"); // OUDS mod: instead of `1rem`
       font-weight: 400; // OUDS mod: no 'bold' for the sidebar links
       color: inherit;
       text-decoration: none;

site/content/docs/0.1/components/links.md

@@ -22,6 +22,17 @@ Visited links don't have a specific style by default. The `:visited` status can
 </div>
 {{< /example >}}
 
+The `.link` class is intended to be used in conjunction with our link variants used to display chevron or icon, or to serve as a basis for your own custom styles.
+
+## Variants on colored background
+
+OUDS Web offers a few variations to use on [colored backgrounds]({{< docsref "/utilities/background#colored-background" >}}). Their accessibility (readability) is ensured by suitable semi-opaque backgrounds.
+
+{{< callout warning >}}
+**Heads up!**
+- Background utilities used to make colored backgrounds, should always be used with the appropriate color theme (see an example below). Please refer to [backgrounds documentation]({{< docsref "/utilities/background/#data-bs-theme-attribute" >}})
+{{< /callout >}}
+
 {{< example class="p-none">}}
 <div class="bg-brand-primary p-tall">
   <div data-bs-theme="light">
@@ -43,15 +54,13 @@ Visited links don't have a specific style by default. The `:visited` status can
 </div>
 {{< /example >}}
 
-The `.link` class is intended to be used in conjunction with our link variants used to display chevron or icon, or to serve as a basis for your own custom styles.
-
 ## Link chevron
 
 Add `.link-chevron` to enhance your link with a chevron on the right side. Use the additional `.back` class to display the chevron on the left side.
 
 {{< example >}}
 <div><a class="link link-chevron" href="#">This is an example of a link with chevron</a></div>
-<div><a class="link link-chevron back" href="#">This is an example of a link with chevron</a></div>
+<div><a class="link link-chevron back" href="#">This is an example of a link with a back chevron</a></div>
 {{< /example >}}
 
 ## Icon link
@@ -88,6 +97,20 @@ Add `.icon-link-hover` to move the icon to the right on hover.
 {{< /example >}}
 {{< /bootstrap-compatibility >}}
 
+## CSS
+
+### Variables
+
+As part of OUDS Web's evolving CSS variables approach, links use local CSS variables on `.link` for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported too.
+
+{{< scss-docs name="link-css-vars" file="scss/_links.scss" >}}
+
+Each `.link-*` modifier class updates the appropriate CSS variables to minimize additional CSS rules.
+
+### Sass variables
+
+{{< scss-docs name="link-variables" file="scss/_variables.scss" >}}
+
 ### Component tokens
 
 {{< scss-docs name="ouds-component-link" file="scss/tokens/_component.scss" >}}