feat(links): with chevron 🎉

.bundlewatch.config.json

@@ -26,11 +26,11 @@
     },
     {
       "path": "./dist/css/boosted.css",
-      "maxSize": "23.4 kB"
+      "maxSize": "23.75 kB"
     },
     {
       "path": "./dist/css/boosted.min.css",
-      "maxSize": "21.5 kB"
+      "maxSize": "21.75 kB"
     },
     {
       "path": "./dist/js/boosted.bundle.js",

scss/_type.scss

@@ -239,6 +239,35 @@ 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: escape-svg($chevron-icon);
+    background-repeat: no-repeat;
+    transform: $linked-chevron-transform;
+  }
+
+  &:hover,
+  &:focus {
+    text-decoration: $link-decoration;
+
+    &::after {
+      filter: $orange-filter;
+    }
+  }
+}
+// End mod
 
 //
 // Misc

scss/_variables.scss

@@ -236,6 +236,7 @@ $escaped-characters: (
 ) !default;
 
 // Boosted mod
+// For colored filters, see https://codepen.io/sosuke/pen/Pjoqqp
 $chevron-icon:          url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 9 14'><path d='M9 2L7 0 0 7l7 7 2-2-5-5 5-5z'/></svg>") !default;
 $chevron-icon-disabled: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 9 14'><path fill='#{$gray-700}' d='M9 2L7 0 0 7l7 7 2-2-5-5 5-5z'/></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.121l-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;
@@ -245,6 +246,7 @@ $info-icon:             url("data:image/svg+xml,<svg xmlns='http://www.w3.org/20
 $warning-icon:          url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'><path fill='#{$warning}' d='M15 0a15 15 0 100 30 15 15 0 000-30zm.15 5.39h.01c1.12 0 2 .95 1.92 2.06l-.63 10.43c0 .7-.58.97-1.29.97-.72 0-1.28-.27-1.28-.97l-.63-10.46c-.06-1.09.8-2.01 1.9-2.03zm-.3 15.33c.11 0 .21 0 .31.02 2.19.35 2.19 3.5 0 3.84-2.77.44-3.1-3.86-.3-3.86z'/></svg>") !default;
 $danger-icon:           url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 140 125'><path fill='#{$danger}' d='M70.3 0c-5.8 0-10.8 3.1-13.5 7.8L2.3 101.3l-.2.2A15.6 15.6 0 0015.6 125H125a15.6 15.6 0 0013.5-23.5L83.8 7.8A15.6 15.6 0 0070.3 0zm19.2 50a6.4 6.4 0 014.4 1.9 6.4 6.4 0 010 9L79.4 75.6l15 15a6.4 6.4 0 010 9.2 6.4 6.4 0 01-4.5 1.9 6.4 6.4 0 01-4.6-2l-15-15-15 15a6.4 6.4 0 01-4.6 2 6.4 6.4 0 01-4.6-2 6.4 6.4 0 010-9l15-15L46.8 61a6.4 6.4 0 119-9.1l14.6 14.5L84.8 52a6.4 6.4 0 014.7-1.9z'/></svg>") !default;
 $invert-filter:         invert(1) !default;
+$orange-filter:         invert(46%) sepia(60%) saturate(2878%) hue-rotate(6deg) brightness(98%) contrast(104%) !default;
 // End mod
 
 // Options
@@ -329,6 +331,15 @@ $link-hover-decoration:                   null !default;
 $stretched-link-pseudo-element:           after !default;
 $stretched-link-z-index:                  1 !default;
 
+
+// Boosted mod
+$linked-chevron-icon-width:   subtract(.5rem, 1px) !default;
+$linked-chevron-icon-height:  $spacer / 2 !default;
+$linked-chevron-transform:    rotate(.5turn) translateY(1px) !default;
+$linked-chevron-margin-left:  $spacer / 4 !default;
+// End mod
+
+
 // Paragraphs
 //
 // Style p element.

site/assets/scss/_boosted.scss

@@ -65,7 +65,8 @@ body {
 .bd-guidelines .bd-content > h2 + p,
 .bd-guidelines .bd-content > h3 + p,
 #with-labels + p,
-#with-icons + p {
+#with-icons + p,
+#links + .row h3 + p {
   display: flex;
   align-items: center;
   padding: 0 0 $spacer / 2;

site/content/docs/5.0/content/typography.md

@@ -361,6 +361,20 @@ Use text utilities as needed to change the alignment of your blockquote.
 </figure>
 {{< /example >}}
 
+<!-- Boosted mod -->
+## Links
+
+Links in content are black and underlined. They adapt to their context otherwise, mainly in navigation components like [Navs & tabs]({{< docsref "/components/navs-tabs" >}}) or [Navbar]({{< docsref "/components/navbar" >}}).
+
+### 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 >}}
+<!-- End mod -->
+
 ## Lists
 
 ### Unstyled

site/content/docs/5.0/guidelines/navigation.md

@@ -9,19 +9,28 @@ toc: true
 
 ## Links
 
-<div class="row gy-3 mt-4">
-  <div class="col-2">
-    <h3 class="h6">Default</h3>
+[Documentation]({{< docsref "/content/typography" >}}#links)
+
+<div class="row row-cols-2 gy-5 pt-3 mb-5">
+  <div>
+    <h3 class="h5">Main navigation links —&nbsp;{{< anchor web-nav-lnk-001 >}}</h3>
+    <a href="#links" class="nav-link">Text link</a>
   </div>
-  <div class="col-4">
-    <a href="#links" class="fw-bold" id="web-nav-lnk-003">Text link</a>
+  <div>
+    <h3 class="h5">Small navigation links —&nbsp;{{< anchor web-nav-lnk-002 >}}</h3>
+    <a href="#links" class="nav-link small">Text link</a>
   </div>
-  <div class="col-6">
-    <h4 class="h6 m-0" id="web-nav-lnk-005">With chevrons</h4>
-
-  {{< callout info >}}
-  This feature will be delivered with [#520]({{< param repo >}}/issues/520).
-  {{< /callout >}}
+  <div>
+    <h3 class="h5">Links with underline —&nbsp;{{< anchor web-nav-lnk-003 >}}</h3>
+    <a href="#links" class="fw-bold">Text link</a>
+  </div>
+  <div>
+    <h3 class="h5">Small links width underline —&nbsp;{{< anchor web-nav-lnk-004 >}}</h3>
+    <a href="#links" class="fw-bold small">Text link</a>
+  </div>
+  <div class="col-12">
+    <h3 class="h5">With chevron —&nbsp;{{< anchor web-nav-lnk-005 >}}</h3>
+    <a href="#links" class="link-chevron">Text link</a>
   </div>
 </div>