[OUDS] Link component

scss/_helpers.scss

@@ -3,7 +3,7 @@
 // OUDS mod: no @import "helpers/colored-links";
 @import "helpers/focus-ring";
 @import "helpers/icon";
-@import "helpers/icon-link";
+// OUDS mod: no import of `icon-link`
 @import "helpers/ratio";
 @import "helpers/position";
 @import "helpers/stacks";

scss/_links.scss

@@ -0,0 +1,136 @@
+//
+// Orange component link
+//
+
+.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 %link-properties;
+  @include get-font-size("label-large");
+  display: inline-flex;
+  align-items: center;
+  min-width: $ouds-link-size-min-width-medium;
+  min-height: $ouds-link-size-min-height-medium;
+  padding: $ouds-link-space-padding-block $ouds-link-space-padding-inline;
+  text-align: start;
+  text-wrap: pretty;
+  vertical-align: middle;
+  background: transparent;
+  border: 0;
+
+  &:has(svg, img, .icon):not(:hover, :active, :focus-visible, :focus[data-focus-visible]) {
+    text-decoration: none;
+  }
+
+  svg,
+  img,
+  .icon {
+    flex-shrink: 0;
+    width: 1em;
+    height: 1em;
+    margin-right: var(--#{$prefix}link-icon-gap);
+    overflow: hidden;
+    font-size: var(--#{$prefix}link-icon-size);
+    line-height: 1;
+  }
+}
+
+.link-chevron {
+  --#{$prefix}link-arrow-gap: #{$ouds-link-space-column-gap-arrow-medium};
+  --#{$prefix}link-arrow-color: #{$ouds-link-color-arrow-enabled};
+  --#{$prefix}link-arrow-hover-color: #{$ouds-link-color-arrow-hover};
+  --#{$prefix}link-arrow-focus-color: #{$ouds-link-color-arrow-focus};
+  --#{$prefix}link-arrow-pressed-color: #{$ouds-link-color-arrow-pressed};
+  --#{$prefix}link-arrow-disabled-color: #{$ouds-color-action-disabled};
+
+  // Extend for Boosted compatibility in which .link-chevron can be used without .link
+  @extend .link;
+  text-decoration: none;
+
+  &:hover,
+  &:active,
+  &:focus-visible,
+  &:focus[data-focus-visible] {
+    text-decoration: underline;
+  }
+
+  &:hover::before,
+  &:hover::after {
+    background-color: var(--#{$prefix}link-arrow-hover-color);
+  }
+
+  &:focus-visible::before,
+  &:focus[data-focus-visible]::before,
+  &:focus-visible::after,
+  &:focus[data-focus-visible]::after {
+    background-color: var(--#{$prefix}link-arrow-focus-color);
+  }
+
+  &:active::before,
+  &:active::after {
+    background-color: var(--#{$prefix}link-arrow-pressed-color);
+  }
+
+  &[aria-disabled="true"]::before,
+  &[aria-disabled="true"]::after {
+    background-color: var(--#{$prefix}link-arrow-disabled-color);
+  }
+
+  &:not(.back) {
+    display: inline-block;
+  }
+
+  // Chevron icon
+  &.back::before,
+  &:not(.back)::after {
+    display: inline-block;
+    width: var(--#{$prefix}link-icon-size);
+    min-width: var(--#{$prefix}link-icon-size);
+    height: var(--#{$prefix}link-icon-size);
+    margin-right: var(--#{$prefix}link-arrow-gap);
+    vertical-align: middle;
+    content: "";
+    background-color: var(--#{$prefix}link-arrow-color);
+    mask: var(--#{$prefix}chevron-icon) center no-repeat;
+    mask-size: var(--#{$prefix}link-icon-size);
+  }
+
+  &:not(.back)::after {
+    margin-right: 0;
+    margin-left: var(--#{$prefix}link-arrow-gap);
+    transform: rotate(180deg) translateY(1px);
+  }
+}
+
+.link-on-colored-bg {
+  --#{$prefix}link-color: #{$ouds-link-color-content-enabled-mono};
+  --#{$prefix}link-hover-color: #{$ouds-link-color-content-hover-mono};
+  --#{$prefix}link-focus-color: #{$ouds-link-color-content-focus-mono};
+  --#{$prefix}link-active-color: #{$ouds-link-color-content-pressed-mono};
+  --#{$prefix}link-disabled-color: #{$ouds-link-color-content-disabled-mono};
+  --#{$prefix}link-visited-color: #{$ouds-link-color-content-enabled-mono};
+  --#{$prefix}link-arrow-color: #{$ouds-link-color-content-enabled-mono};
+  --#{$prefix}link-arrow-hover-color: #{$ouds-link-color-content-hover-mono};
+  --#{$prefix}link-arrow-focus-color: #{$ouds-link-color-content-focus-mono};
+  --#{$prefix}link-arrow-pressed-color: #{$ouds-link-color-content-pressed-mono};
+  --#{$prefix}link-arrow-disabled-color: #{$ouds-link-color-content-disabled-mono};
+}
+
+.link-sm {
+  --#{$prefix}link-icon-size: #{$ouds-link-size-icon-small};
+  --#{$prefix}link-icon-gap: #{$ouds-link-space-column-gap-icon-small};
+  --#{$prefix}link-arrow-gap: #{$ouds-link-space-column-gap-arrow-small};
+
+  @include get-font-size("label-medium");
+  min-width: $ouds-link-size-min-width-small;
+  min-height: $ouds-link-size-min-height-small;
+}
+
+@if $enable-bootstrap-compatibility {
+  .icon-link {
+    @extend .link;
+  }
+}

scss/_maps.scss

@@ -377,7 +377,7 @@ $utilities-border-subtle: (
 ) !default;
 // scss-docs-end utilities-border-colors
 
-$utilities-links-underline: map-loop($utilities-colors, rgba-css-var, "$key", "link-underline") !default;
+// OUDS mod : no $utilities-links-underline
 
 $negative-spacers: if($enable-negative-margins, negativify-map($spacers), null) !default;
 

scss/_reboot.scss

@@ -349,22 +349,62 @@ sup { top: -.5em; }
 
 // Links
 
-a {
-  color: rgba(var(--#{$prefix}link-color-rgb), var(--#{$prefix}link-opacity, 1));
+// OUDS mod: define link properties in a placeholder to be reused in link component
+%link-properties {
+  font-weight: $link-font-weight; // OUDS mod
+  color: var(--#{$prefix}link-color); // OUDS mod: instead of rgba(var(--#{$prefix}link-color-rgb), var(--#{$prefix}link-opacity, 1));
   text-decoration: $link-decoration;
 
   &:hover {
-    --#{$prefix}link-color-rgb: var(--#{$prefix}link-hover-color-rgb);
+    color: var(--#{$prefix}link-hover-color); // OUDS mod
+    text-decoration: $link-hover-decoration;
+  }
+
+
+  .visited-links &:visited:not(.link, .link-chevron, .icon-link, :hover, :active, :focus-visible, :focus[data-focus-visible]),
+  &:visited.visited-links:not(.link, .link-chevron, .icon-link, :hover, :active, :focus-visible, :focus[data-focus-visible]) {
+    color: var(--#{$prefix}link-visited-color);
+  }
+
+  &:focus-visible,
+  &:focus[data-focus-visible-added] {
+    color: var(--#{$prefix}link-focus-color);
+    text-decoration: $link-hover-decoration;
+  }
+
+  &:active {
+    color: var(--#{$prefix}link-active-color);
     text-decoration: $link-hover-decoration;
   }
+
+  &[aria-disabled="true"] {
+    color: var(--#{$prefix}link-disabled-color);
+    pointer-events: none;
+  }
+
+  .colored-bg &,
+  &.colored-bg {
+    --#{$prefix}link-color: #{$ouds-link-color-content-enabled-mono};
+    --#{$prefix}link-hover-color: #{$ouds-link-color-content-hover-mono};
+    --#{$prefix}link-focus-color: #{$ouds-link-color-content-focus-mono};
+    --#{$prefix}link-active-color: #{$ouds-link-color-content-pressed-mono};
+    --#{$prefix}link-disabled-color: #{$ouds-link-color-content-disabled-mono};
+    --#{$prefix}link-visited-color: #{$ouds-link-color-content-enabled-mono};
+  }
+}
+// End mod
+
+a {
+  // OUDS mod: use link properties placeholder
+  @extend %link-properties;
 }
 
 // And undo these styles for placeholder links/named anchors (without href).
 // It would be more straightforward to just use a[href] in previous block, but that
 // 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"]) { // OUDS mod: Added `:not([aria-disabled="true])`
   &,
   &:hover {
     color: inherit;

scss/_root.scss

@@ -245,15 +245,27 @@
   // scss-docs-end root-body-variables
 
   --#{$prefix}heading-color: #{$headings-color};
-  --#{$prefix}link-color: #{$link-color};
-  --#{$prefix}link-color-rgb: #{to-rgb($link-color)};
-  --#{$prefix}link-decoration: #{$link-decoration};
 
-  --#{$prefix}link-hover-color: #{$link-hover-color};
-  --#{$prefix}link-hover-color-rgb: #{to-rgb($link-hover-color)};
+  // OUDS mod
+  // scss-docs-start root-link-var-ouds
+  --#{$prefix}link-color: #{$ouds-link-color-content-enabled};
+  --#{$prefix}link-hover-color: #{$ouds-link-color-content-hover};
+  --#{$prefix}link-focus-color: #{$ouds-link-color-content-focus};
+  --#{$prefix}link-active-color: #{$ouds-link-color-content-pressed};
+  --#{$prefix}link-disabled-color: #{$ouds-color-action-disabled};
+  --#{$prefix}link-visited-color: #{$ouds-color-action-visited};
+  // scss-docs-end root-link-var-ouds
+  // End mod
+
+  @if $enable-bootstrap-compatibility {
+    --#{$prefix}link-color-rgb: #{to-rgb($link-color)};
+    --#{$prefix}link-decoration: #{$link-decoration};
 
-  @if $link-hover-decoration != null {
-    --#{$prefix}link-hover-decoration: #{$link-hover-decoration};
+    --#{$prefix}link-hover-color-rgb: #{to-rgb($link-hover-color)};
+
+    @if $link-hover-decoration != null {
+      --#{$prefix}link-hover-decoration: #{$link-hover-decoration};
+    }
   }
 
   @if $enable-bootstrap-compatibility {
@@ -491,12 +503,10 @@
 
     --#{$prefix}heading-color: #{$headings-color-dark};
 
-    --#{$prefix}link-color: #{$link-color-dark};
-    --#{$prefix}link-hover-color: #{$link-hover-color-dark};
-    --#{$prefix}link-color-rgb: #{to-rgb($link-color-dark)};
-    --#{$prefix}link-hover-color-rgb: #{to-rgb($link-hover-color-dark)};
-
     @if $enable-bootstrap-compatibility {
+      --#{$prefix}link-color-rgb: #{to-rgb($link-color-dark)};
+      --#{$prefix}link-hover-color-rgb: #{to-rgb($link-hover-color-dark)};
+
       --#{$prefix}code-color: #{$code-color-dark};
       --#{$prefix}highlight-color: #{$mark-color-dark};
       --#{$prefix}highlight-bg: #{$mark-bg-dark};

scss/_utilities.scss

@@ -990,56 +990,10 @@ $utilities: map-merge(
       values: $ouds-text-colors
     ),
     // scss-docs-end utils-color-ouds
-    // scss-docs-start utils-links
-    "link-opacity": (
-      css-var: true,
-      class: link-opacity,
-      state: hover,
-      values: (
-        10: .1,
-        25: .25,
-        50: .5,
-        75: .75,
-        100: 1
-      )
-    ),
-    "link-offset": (
-      property: text-underline-offset,
-      class: link-offset,
-      state: hover,
-      values: (
-        1: .125em,
-        2: .25em,
-        3: .375em,
-      )
-    ),
-    "link-underline": (
-      property: text-decoration-color,
-      class: link-underline,
-      local-vars: (
-        "link-underline-opacity": 1
-      ),
-      values: map-merge(
-        $utilities-links-underline,
-        (
-          null: rgba(var(--#{$prefix}link-color-rgb), var(--#{$prefix}link-underline-opacity, 1)),
-        )
-      )
-    ),
-    "link-underline-opacity": (
-      css-var: true,
-      class: link-underline-opacity,
-      state: hover,
-      values: (
-        0: 0,
-        10: .1,
-        25: .25,
-        50: .5,
-        75: .75,
-        100: 1
-      ),
-    ),
-    // scss-docs-end utils-links
+    // OUDS mod: no "link-opacity"
+    // OUDS mod: no "link-offset"
+    // OUDS mod: no "link-underline
+    // OUDS mod: no "link-underline-opacity"
     // scss-docs-start utils-bg-color
     "background-color": (
       property: background-color,

scss/_variables.scss

@@ -365,7 +365,7 @@ $escaped-characters: (
 
 // OUDS mod
 //// SVG as Data-URi
-$chevron-icon:          url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 9 14'><path d='M9 2 7 0 0 7l7 7 2-2-5-5 5-5z'/></svg>") !default;
+$chevron-icon:          url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 1000'><path d='M597.22 225 402.78 421.43 325 500l77.78 78.57L597.22 775 675 696.43 480.56 500 675 303.57z'/></svg>") !default;
 $cross-icon:            url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30' fill='#{$black}'><path d='m15 17.121-8.132 8.132-2.121-2.12L12.879 15 4.747 6.868l2.12-2.121L15 12.879l8.132-8.132 2.12 2.121L17.122 15l8.132 8.132-2.121 2.12L15 17.123z'/></svg>") !default;
 $cross-icon-stroke:     url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='116 116 767 767' fill='#{$black}'><path d='M817.493 676.165a49.977 49.977 0 0 1 0 70.664l-70.664 70.664a49.977 49.977 0 0 1-70.664 0L499.5 640.828 322.835 817.493a49.977 49.977 0 0 1-70.664 0l-70.664-70.664a49.977 49.977 0 0 1 0-70.664L358.172 499.5 181.507 322.835a49.977 49.977 0 0 1 0-70.664l70.664-70.664a49.977 49.977 0 0 1 70.664 0L499.5 358.172l176.665-176.665a49.977 49.977 0 0 1 70.664 0l70.664 70.664a49.977 49.977 0 0 1 0 70.664L640.828 499.5Z'/></svg>") !default;
 $check-icon:            url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 15 12'><path fill='#{$black}' d='M13 0 5 8 2 5 0 7l5 5L15 2z'/></svg>") !default;
@@ -487,31 +487,28 @@ $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; // OUDS mod
 $link-shade-percentage:                   20% !default;
 $link-hover-color:                        $primary !default; // OUDS mod
 $link-hover-decoration:                   null !default;
+// scss-docs-end link-variables
 
 $stretched-link-pseudo-element:           after !default;
 $stretched-link-z-index:                  1 !default;
 
-// OUDS mod
-$linked-chevron-icon-width:   subtract(.5rem, 1px) !default;
-$linked-chevron-icon-height:  $spacer * .5 !default;
-$linked-chevron-transform:    rotate(.5turn) translateY(1px) !default;
-$linked-chevron-margin-left:  $spacer * .25 !default;
-// End mod
-
+// OUDS mod: no longer used
 // Icon links
 // scss-docs-start icon-link-variables
-$icon-link-gap:               .3125rem !default; // OUDS mod: instead of `.375rem`
-$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;
+// $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
-
+// End mod
 
 // Paragraphs
 //