chore(merge main): patched commit → 803d9d4 (#1854)

Co-authored-by: louismaxime.piton <louismaxime.piton@orange.com>

.bundlewatch.config.json

@@ -2,11 +2,11 @@
   "files": [
     {
       "path": "./dist/css/boosted-grid.css",
-      "maxSize": "12.75 kB"
+      "maxSize": "13.25 kB"
     },
     {
       "path": "./dist/css/boosted-grid.min.css",
-      "maxSize": "12.0 kB"
+      "maxSize": "12.25 kB"
     },
     {
       "path": "./dist/css/boosted-reboot.css",
@@ -18,19 +18,19 @@
     },
     {
       "path": "./dist/css/boosted-utilities.css",
-      "maxSize": "11.5 kB"
+      "maxSize": "12.5 kB"
     },
     {
       "path": "./dist/css/boosted-utilities.min.css",
-      "maxSize": "10.75 kB"
+      "maxSize": "11.5 kB"
     },
     {
       "path": "./dist/css/boosted.css",
-      "maxSize": "41.5 kB"
+      "maxSize": "42.0 kB"
     },
     {
       "path": "./dist/css/boosted.min.css",
-      "maxSize": "38.25 kB"
+      "maxSize": "38.75 kB"
     },
     {
       "path": "./dist/js/boosted.bundle.js",

scss/_helpers.scss

@@ -2,6 +2,7 @@
 @import "helpers/color-bg";
 @import "helpers/colored-links";
 @import "helpers/focus-ring";
+@import "helpers/icon-link";
 @import "helpers/ratio";
 @import "helpers/position";
 @import "helpers/stacks";

scss/_maps.scss

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

scss/_root.scss

@@ -152,7 +152,7 @@
 // scss-docs-start root-dark-rule
 // Boosted mod
 [class*="bg-black"],
-[class*="-dark"]:not(.border-dark):not(.text-dark):not(.btn-dark):not(.focus-ring-dark),
+[class*="-dark"]:not(.border-dark):not(.text-dark):not(.btn-dark):not(.focus-ring-dark):not(.link-underline-dark):not(.link-dark),
 [class*="bg-secondary"] {
   --#{$prefix}primary-text-rgb: #{to-rgb($brand-orange)};
   --#{$prefix}link-color: #{$link-color-inverted};

scss/_type.scss

@@ -239,35 +239,6 @@ h2,
   }
 }
 
-//
-// Links // Boosted mod
-//
-.link-chevron {
-  font-weight: $font-weight-bold;
-  text-decoration: if($link-decoration == none, null, none);
-
-  &::after {
-    display: inline-block;
-    width: $linked-chevron-icon-width;
-    height: $linked-chevron-icon-height;
-    margin-left: $linked-chevron-margin-left;
-    vertical-align: middle;
-    content: "";
-    background-image: var(--#{$boosted-prefix}chevron-icon);
-    background-repeat: no-repeat;
-    transform: $linked-chevron-transform;
-  }
-
-  &:hover {
-    text-decoration: $link-decoration;
-
-    &::after {
-      filter: $orange-filter;
-    }
-  }
-}
-// End mod
-
 //
 // Misc
 //

scss/_utilities.scss

@@ -613,6 +613,56 @@ $utilities: map-merge(
       values: $utilities-text-emphasis-colors
     ),
     // scss-docs-end utils-color
+    // 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": (
+      // css-var: true,
+      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: (
+        10: .1,
+        25: .25,
+        50: .5,
+        75: .75,
+        100: 1
+      ),
+    ),
+    // scss-docs-end utils-links
     // scss-docs-start utils-bg-color
     "background-color": (
       property: background-color,

scss/helpers/_chevron-link.scss

@@ -0,0 +1,26 @@
+// Boosted mod
+.link-chevron {
+  font-weight: $font-weight-bold;
+  text-decoration: if($link-decoration == none, null, none);
+
+  &::after {
+    display: inline-block;
+    width: $linked-chevron-icon-width;
+    height: $linked-chevron-icon-height;
+    margin-left: $linked-chevron-margin-left;
+    vertical-align: middle;
+    content: "";
+    background-image: var(--#{$boosted-prefix}chevron-icon);
+    background-repeat: no-repeat;
+    transform: $linked-chevron-transform;
+  }
+
+  &:hover {
+    text-decoration: $link-decoration;
+
+    &::after {
+      filter: $orange-filter;
+    }
+  }
+}
+// End mod

scss/helpers/_colored-links.scss

@@ -1,12 +1,18 @@
+// stylelint-disable function-name-case
+
+// All-caps `RGBA()` function used because of this Sass bug: https://github.com/sass/node-sass/issues/2251
 @each $color, $value in ("primary": $accessible-orange, "light": $light) { // Boosted mod: restrict to primary and light
   .link-#{$color} {
-    color: $value if($enable-important-utilities, !important, null);
+    --#{$prefix}link-color-rgb: #{to-rgb($value)};
+    text-decoration-color: RGBA(to-rgb($value), var(--#{$prefix}link-underline-opacity, 1));
     background-color: color-contrast($value) if($enable-important-utilities, !important, null); // Boosted mod: ensure contrast
 
     @if $link-shade-percentage != 0 {
       // Boosted mod: no &:focus
       &:hover {
-        color: if(color-contrast($value) == $color-contrast-light, shade-color($value, $link-shade-percentage), tint-color($value, $link-shade-percentage)) if($enable-important-utilities, !important, null);
+        $hover-color: if(color-contrast($value) == $color-contrast-light, shade-color($value, $link-shade-percentage), tint-color($value, $link-shade-percentage));
+        --#{$prefix}link-color-rgb: #{to-rgb($hover-color)};
+        text-decoration-color: RGBA(to-rgb($hover-color), var(--#{$prefix}link-underline-opacity, 1));
       }
     }
   }

scss/helpers/_icon-link.scss

@@ -0,0 +1,26 @@
+@import "chevron-link"; // Boosted mod
+
+.icon-link {
+  display: inline-flex;
+  gap: .3125rem; // Boosted mod: instead of .375rem
+  align-items: center;
+  text-decoration-color: rgba(var(--#{$prefix}link-color-rgb), var(--#{$prefix}link-opacity, .5));
+  text-underline-offset: .5rem;
+  backface-visibility: hidden;
+
+  > .bi {
+    flex-shrink: 0;
+    width: 1em;
+    height: 1em;
+    @include transition(.2s ease-in-out transform);
+  }
+}
+
+.icon-link-hover {
+  &:hover,
+  &:focus-visible {
+    > .bi {
+      transform: var(--#{$prefix}icon-link-transform, translate3d(.25em, 0, 0));
+    }
+  }
+}

site/assets/scss/_content.scss

@@ -12,7 +12,7 @@
   > h2,
   > h3,
   > h4 {
-    --#{$prefix}heading-color: #fff;
+    --bs-heading-color: var(--bs-emphasis-color);
   }
 
   > h2:not(:first-child) {
@@ -80,7 +80,7 @@
 }
 
 .bd-title {
-  --#{$prefix}heading-color: #fff;
+  --bs-heading-color: var(--bs-emphasis-color);
   @include font-size(3rem);
 }
 
@@ -96,26 +96,6 @@
   fill: currentcolor;
 }
 
-.icon-link {
-  display: flex;
-  align-items: center;
-  // Boosted mod: no text-decoration-color
-  text-underline-offset: .5rem;
-  backface-visibility: hidden;
-
-  .bi {
-    width: .75em; // Boosted mod
-    height: .75em; // Boosted mod
-    transition: .2s ease-in-out transform; // stylelint-disable-line property-disallowed-list
-  }
-
-  &:hover {
-    .bi {
-      transform: translate3d(5px, 0, 0);
-    }
-  }
-}
-
 .border-lg-start {
   @include media-breakpoint-up(lg) {
     border-left: var(--bs-border-width) solid $border-color;

site/content/docs/5.3/content/typography.md

@@ -303,11 +303,7 @@ Links in content are black and underlined. They adapt to their context otherwise
 
 ### With chevron
 
-Add `.link-chevron` to bold your link and enhance them with a chevron.
-
-{{< example >}}
-<a class="link-chevron" href="#links">This is a sample link with chevron</a>
-{{< /example >}}
+Use our [link chevron helper]({{< docsref "/helpers/icon-link#link-chevron" >}}) to bold your link and enhance them with a chevron.
 <!-- End mod -->
 
 ## Lists

site/content/docs/5.3/helpers/colored-links.md

@@ -5,13 +5,28 @@ description: Colored links with hover states
 group: helpers
 aliases:
   - "/docs/helpers/colored-links/"
-toc: false
+toc: true
 ---
 
-You can use the `.link-*` classes to colorize links. Unlike the [`.text-*` classes]({{< docsref "/utilities/colors" >}}), these classes have a `:hover` and `:focus` state.
+## 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.
+
+<!--Boosted mod: feature limited to primary and light, we don't loop over "theme-colors"-->
 {{< example >}}
-<a href="#" class="link-primary">Primary link</a>
-<a href="#" class="link-light">Light link</a>
+<p><a href="#" class="link-primary">Primary link</a></p>
+<p><a href="#" class="link-light">Light link</a></p>
 {{< /example >}}
 
+<!--Boosted mod: removed callout not applicable to our modified example-->
+
+## Link utilities
+
+{{< added-in "5.3.0" >}}
+
+Colored links can also be modified by [our link utilities]({{< docsref "/utilities/link/" >}}).
+
+{{< example >}}
+<p><a href="#" class="link-primary link-offset-2 link-underline-opacity-10 link-underline-opacity-100-hover">Primary link</a></p>
+<p><a href="#" class="link-light link-offset-2 link-underline-opacity-10 link-underline-opacity-100-hover">Light link</a></p>
+{{< /example >}}