claritas-web-framework 7.0.0 → 8.0.0

package/sass/mixins/_button.scss

@@ -1,261 +1,153 @@
 @use "sass:color";
-@use "~rfs/scss" as *;
 @use "./../variables" as *;
 @use "./../functions" as *;
-@use "./../mixins/borderRadius" as *;
-@use "./../mixins/boxShadow" as *;
-@use "./../mixins/gradient" as *;
 
 @mixin button-variant(
-  $background,
-  $border: $button-border-color,
-  $color: color-contrast($background),
-  $hover-background:
-    if(
-      $color == $color-contrast-light,
-      color.mix(black, $background, $button-hover-background-shade-amount),
-      color.mix(white, $background, $button-hover-background-tint-amount)
-    ),
-  $hover-border:
-    if(
-      $color == $color-contrast-light,
-      color.mix(black, $border, $button-hover-border-shade-amount),
-      color.mix(white, $border, $button-hover-border-tint-amount)
-    ),
-  $hover-color: color-contrast($hover-background),
-  $active-background:
-    if(
-      $color == $color-contrast-light,
-      color.mix(black, $background, $button-active-background-shade-amount),
-      color.mix(white, $background, $button-active-background-tint-amount)
-    ),
-  $active-border:
-    if(
-      $color == $color-contrast-light,
-      color.mix(black, $border, $button-active-border-shade-amount),
-      color.mix(white, $border, $button-active-border-tint-amount)
-    ),
-  $active-color: color-contrast($active-background),
-  $disabled-background: $background,
-  $disabled-border: $border,
-  $disabled-color: color-contrast($disabled-background)
+  $main,
+  $value,
+  $color: color-flip($main, $value, $button-color-flip-threshold, $button-color-flip-l)
 ) {
-  --button-color: #{$color};
-  --button-background: #{$background};
-  --button-border-color: #{$border};
-  --button-hover-color: #{$hover-color};
-  --button-hover-background: #{$hover-background};
-  --button-hover-border-color: #{$hover-border};
-  --button-focus-box-shadow: 0 0 #{$input-button-focus-blur} #{$input-button-focus-width} #{rgba(
-      $background,
-      $border-opacity
-    )};
-  --button-active-color: #{$active-color};
-  --button-active-background: #{$active-background};
-  --button-active-border-color: #{$active-border};
-  --button-active-shadow: #{$button-active-box-shadow};
-  --button-disabled-color: #{$disabled-color};
-  --button-disabled-background: #{$disabled-background};
-  --button-disabled-border-color: #{$disabled-border};
+  --button-color: #{color-flip($color, $value, $button-color-flip-threshold, $button-color-flip-l)};
+  --button-hover-color: hsl(var(--white-h) var(--white-s) var(--white-l) / 100%);
+  --button-focus-color: hsl(var(--white-h) var(--white-s) var(--white-l) / 100%);
+  --button-active-color: hsl(var(--white-h) var(--white-s) var(--white-l) / 100%);
+  --button-disabled-color: hsl(var(--white-h) var(--white-s) var(--white-l) / 65%);
+
+  --button-border-color: hsl(var(--#{$main}-h) var(--#{$main}-s) var(--#{$main}-l) / 100%);
+  --button-hover-border-color: hsl(
+    var(--border-color-h) var(--border-color-s) var(--border-color-l) / #{$border-hover-opacity}
+  );
+  --button-focus-border-color: hsl(
+    var(--border-color-h) var(--border-color-s) var(--border-color-l) / #{$border-hover-opacity}
+  );
+  --button-active-border-color: hsl(
+    var(--border-color-h) var(--border-color-s) var(--border-color-l) / #{$border-hover-opacity}
+  );
+  --button-disabled-border-color: hsl(var(--#{$main}-h) var(--#{$main}-s) var(--#{$main}-l) / 65%);
+
+  --button-background: hsl(var(--#{$main}-h) var(--#{$main}-s) var(--#{$main}-l) / 100%);
+  --button-hover-background: hsl(
+    var(--#{$main}-h) var(--#{$main}-s) calc(var(--#{$main}-l) - #{$link-shade-percentage}) / 100%
+  );
+  --button-focus-background: hsl(
+    var(--#{$main}-h) var(--#{$main}-s) calc(var(--#{$main}-l) - #{$link-shade-percentage}) / 100%
+  );
+  --button-active-background: hsl(
+    var(--#{$main}-h) var(--#{$main}-s) calc(var(--#{$main}-l) - #{$link-shade-percentage}) / 100%
+  );
+  --button-disabled-background: hsl(var(--#{$main}-h) var(--#{$main}-s) var(--#{$main}-l) / 65%);
+
+  --button-box-shadow: 0 0 0 0.125em hsl(var(--#{$main}-h) var(--#{$main}-s) var(--#{$main}-l) / 0%);
+  --button-hover-box-shadow: 0 0 0 0.125em hsl(var(--#{$main}-h) var(--#{$main}-s) var(--#{$main}-l) / 0%);
+  --button-focus-box-shadow: 0 0 0 0.125em
+    hsl(var(--#{$main}-h) var(--#{$main}-s) var(--#{$main}-l) / #{$border-opacity});
+  --button-active-box-shadow: 0 0 0 0.125em
+    hsl(var(--#{$main}-h) var(--#{$main}-s) var(--#{$main}-l) / #{$border-opacity});
+  --button-disabled-box-shadow: 0 0 0 0.125em hsl(var(--#{$main}-h) var(--#{$main}-s) var(--#{$main}-l) / 0%);
 }
 
-@mixin button-outline-variant(
-  $color,
-  $color-hover: color-contrast($color),
-  $active-background: $color,
-  $active-border: $color,
-  $active-color: color-contrast($active-background)
-) {
-  --button-color: #{$color};
-  --button-border-color: #{$color};
-  --button-hover-color: #{$color-hover};
-  --button-background: transparent;
-  --button-hover-background: #{$active-background};
-  --button-hover-border-color: #{$active-border};
-  --button-focus-box-shadow: 0 0 #{$input-button-focus-blur} #{$input-button-focus-width} #{rgba(
-      $color,
-      $border-opacity
-    )};
-  --button-active-color: #{$active-color};
-  --button-active-background: #{$active-background};
-  --button-active-border-color: #{$active-border};
-  --button-active-shadow: #{$button-active-box-shadow};
-  --button-disabled-color: #{$color};
-  --button-disabled-background: transparent;
-  --button-disabled-border-color: #{$color};
-  --gradient: none;
+@mixin button-variant-outline($color) {
+  --button-color: hsl(var(--#{$color}-h) var(--#{$color}-s) var(--#{$color}-l) / 100%);
+  --button-hover-color: hsl(var(--white-h) var(--white-s) var(--white-l) / 100%);
+  --button-focus-color: hsl(var(--white-h) var(--white-s) var(--white-l) / 100%);
+  --button-active-color: hsl(var(--white-h) var(--white-s) var(--white-l) / 100%);
+  --button-disabled-color: hsl(var(--#{$color}-h) var(--#{$color}-s) var(--#{$color}-l) / 65%);
+
+  --button-border-color: hsl(var(--#{$color}-h) var(--#{$color}-s) var(--#{$color}-l) / 100%);
+  --button-hover-border-color: hsl(
+    var(--border-color-h) var(--border-color-s) var(--border-color-l) / #{$border-hover-opacity}
+  );
+  --button-focus-border-color: hsl(
+    var(--border-color-h) var(--border-color-s) var(--border-color-l) / #{$border-hover-opacity}
+  );
+  --button-active-border-color: hsl(
+    var(--border-color-h) var(--border-color-s) var(--border-color-l) / #{$border-hover-opacity}
+  );
+  --button-disabled-border-color: hsl(var(--#{$color}-h) var(--#{$color}-s) var(--#{$color}-l) / 65%);
+
+  --button-background: hsl(var(--#{$color}-h) var(--#{$color}-s) var(--#{$color}-l) / 0%);
+  --button-hover-background: hsl(var(--#{$color}-h) var(--#{$color}-s) var(--#{$color}-l) / 100%);
+  --button-focus-background: hsl(var(--#{$color}-h) var(--#{$color}-s) var(--#{$color}-l) / 100%);
+  --button-active-background: hsl(var(--#{$color}-h) var(--#{$color}-s) calc(var(--#{$color}-l) - 10%) / 100%);
+  --button-disabled-background: hsl(var(--#{$color}-h) var(--#{$color}-s) var(--#{$color}-l) / 0%);
+
+  --button-box-shadow: 0 0 0 0.125em hsl(var(--#{$color}-h) var(--#{$color}-s) var(--#{$color}-l) / 0%);
+  --button-hover-box-shadow: 0 0 0 0.125em hsl(var(--#{$color}-h) var(--#{$color}-s) var(--#{$color}-l) / 0%);
+  --button-focus-box-shadow: 0 0 0 0.125em
+    hsl(var(--#{$color}-h) var(--#{$color}-s) var(--#{$color}-l) / #{$border-opacity});
+  --button-active-box-shadow: 0 0 0 0.125em
+    hsl(var(--#{$color}-h) var(--#{$color}-s) var(--#{$color}-l) / #{$border-opacity});
+  --button-disabled-box-shadow: 0 0 0 0.125em hsl(var(--#{$color}-h) var(--#{$color}-s) var(--#{$color}-l) / 0%);
 }
 
-@mixin button-link-variant($color) {
-  --button-color: #{$color};
-  --button-hover-color: #{color.mix(black, $color, $link-shade-percentage)};
-  --button-background: transparent;
-  --button-hover-background: #{rgba($color, $button-hover-border-tint-amount)};
+@mixin button-variant-link($color) {
+  --button-color: hsl(var(--#{$color}-h) var(--#{$color}-s) var(--#{$color}-l) / 100%);
+  --button-hover-color: hsl(
+    var(--#{$color}-h) var(--#{$color}-s) calc(var(--#{$color}-l) - #{$link-shade-percentage}) / 100%
+  );
+  --button-focus-color: hsl(
+    var(--#{$color}-h) var(--#{$color}-s) calc(var(--#{$color}-l) - #{$link-shade-percentage}) / 100%
+  );
+  --button-active-color: hsl(
+    var(--#{$color}-h) var(--#{$color}-s) calc(var(--#{$color}-l) - #{$link-shade-percentage}) / 100%
+  );
+  --button-disabled-color: hsl(var(--#{$color}-h) var(--#{$color}-s) var(--#{$color}-l) / 65%);
+
   --button-border-color: transparent;
   --button-hover-border-color: transparent;
+  --button-focus-border-color: transparent;
   --button-active-border-color: transparent;
-  --button-box-shadow: none;
-  --button-focus-box-shadow: none;
-  --button-disabled-color: #{$color};
-  --button-disabled-background: transparent;
   --button-disabled-border-color: transparent;
-}
 
-@mixin button-unstyled-variant($color) {
-  --button-color: #{$color};
-  --button-hover-color: #{color.mix(black, $color, $link-shade-percentage)};
-  --button-active-color: #{color.mix(black, $color, $link-shade-percentage)};
   --button-background: transparent;
-  --button-hover-background: transparent;
-  --button-active-background: transparent;
-  --button-border-color: transparent;
-  --button-hover-border-color: transparent;
-  --button-active-border-color: transparent;
-  --button-box-shadow: none;
-  --button-focus-box-shadow: none;
-  --button-padding-x: 0;
-  --button-padding-y: 0;
-  --button-hover-text-decoration: underline;
-  --button-disabled-color: #{$color};
+  --button-hover-background: hsl(var(--#{$color}-h) var(--#{$color}-s) var(--#{$color}-l) / 10%);
+  --button-focus-background: hsl(var(--#{$color}-h) var(--#{$color}-s) var(--#{$color}-l) / 10%);
+  --button-active-background: hsl(var(--#{$color}-h) var(--#{$color}-s) var(--#{$color}-l) / 10%);
   --button-disabled-background: transparent;
-  --button-disabled-border-color: transparent;
-}
-
-@mixin button-size($padding-y, $padding-x, $font-size, $border-radius) {
-  --button-padding-y: #{$padding-y};
-  --button-padding-x: #{$padding-x};
-
-  @include rfs($font-size, --button-font-size);
 
-  --button-border-radius: #{$border-radius};
+  --button-box-shadow: none;
+  --button-hover-box-shadow: none;
+  --button-focus-box-shadow: none;
+  --button-active-box-shadow: none;
+  --button-disabled-box-shadow: none;
 }
 
-@mixin button-variant-link(
-  $color-title: "primary",
-  $shade: $link-shade-percentage,
-  $alpha: $button-hover-link-background-a
-) {
-  --button-color: hsl(
-    var(--#{$color-title}-h) var(--#{$color-title}-s) var(--#{$color-title}-l) / var(--#{$color-title}-a)
+@mixin button-variant-unstyled($color) {
+  --button-color: hsl(var(--#{$color}-h) var(--#{$color}-s) var(--#{$color}-l) / 100%);
+  --button-hover-color: hsl(
+    var(--#{$color}-h) var(--#{$color}-s) calc(var(--#{$color}-l) - #{$link-shade-percentage}) / 100%
+  );
+  --button-focus-color: hsl(
+    var(--#{$color}-h) var(--#{$color}-s) calc(var(--#{$color}-l) - #{$link-shade-percentage}) / 100%
   );
-  --button-border-color: hsl(var(--#{$color-title}-h) var(--#{$color-title}-s) var(--#{$color-title}-l) / 0%);
-  --button-background: hsl(var(--#{$color-title}-h) var(--#{$color-title}-s) var(--#{$color-title}-l) / 0%);
+  --button-active-color: hsl(
+    var(--#{$color}-h) var(--#{$color}-s) calc(var(--#{$color}-l) - #{$link-shade-percentage}) / 100%
+  );
+  --button-disabled-color: hsl(var(--#{$color}-h) var(--#{$color}-s) var(--#{$color}-l) / 65%);
 
-  &:hover,
-  .button--switch + &:hover {
-    --color: hsl(
-      var(--#{$color-title}-h) var(--#{$color-title}-s) calc(var(--#{$color-title}-l) - #{$shade}) /
-        var(--#{$color-title}-a)
-    );
-    --button-border-color: hsl(var(--#{$color-title}-h) var(--#{$color-title}-s) var(--#{$color-title}-l) / 0%);
-    --button-background: hsl(var(--#{$color-title}-h) var(--#{$color-title}-s) var(--#{$color-title}-l) / #{$alpha});
-  }
+  --button-border-color: transparent;
+  --button-hover-border-color: transparent;
+  --button-focus-border-color: transparent;
+  --button-active-border-color: transparent;
+  --button-disabled-border-color: transparent;
 
-  &:focus-visible,
-  .button--switch:focus-visible + & {
-    --button-color: hsl(
-      var(--#{$color-title}-h) var(--#{$color-title}-s) calc(var(--#{$color-title}-l) - #{$shade}) /
-        var(--#{$color-title}-a)
-    );
-    --button-background: hsl(var(--#{$color-title}-h) var(--#{$color-title}-s) var(--#{$color-title}-l) / #{$alpha});
-    --button-box-shadow-color: hsl(var(--#{$color-title}-h) var(--#{$color-title}-s) var(--#{$color-title}-l) / 0%);
-  }
+  --button-background: transparent;
+  --button-hover-background: transparent;
+  --button-focus-background: transparent;
+  --button-active-background: transparent;
+  --button-disabled-background: transparent;
 
-  .button--switch:checked + &,
-  :not(.button--switch) + &:active,
-  &:first-child:active,
-  &.active,
-  &.show {
-    --button-color: hsl(
-      var(--#{$color-title}-h) var(--#{$color-title}-s) calc(var(--#{$color-title}-l) - #{$shade}) /
-        var(--#{$color-title}-a)
-    );
-    --button-background: hsl(var(--#{$color-title}-h) var(--#{$color-title}-s) var(--#{$color-title}-l) / #{$alpha});
-    --button-border-color: hsl(var(--#{$color-title}-h) var(--#{$color-title}-s) var(--#{$color-title}-l) / 0%);
-  }
-}
+  --button-box-shadow: none;
+  --button-hover-box-shadow: none;
+  --button-focus-box-shadow: none;
+  --button-active-box-shadow: none;
+  --button-disabled-box-shadow: none;
 
-@mixin button-variant-unstyled($color-title: "body-color", $shade: $link-shade-percentage) {
-  --button-color: hsl(
-    var(--#{$color-title}-h) var(--#{$color-title}-s) var(--#{$color-title}-l) / var(--#{$color-title}-a)
-  );
   --button-padding-x: 0;
   --button-padding-y: 0;
-  --button-border-width: 0;
-  --button-border-style: solid;
-  --button-border-color: null;
-  --button-border-radius: 0;
-  --button-background: transparent;
-
-  &:hover,
-  .button--switch + &:hover {
-    --button-text-decoration: underline;
-    --button-color: hsl(
-      var(--#{$color-title}-h) var(--#{$color-title}-s) calc(var(--#{$color-title}-l) - #{$shade}) /
-        var(--#{$color-title}-a)
-    );
-    --button-background: transparent;
-    --button-border-color: transparent;
-  }
-
-  &:focus-visible,
-  .button--switch:focus-visible + & {
-    --button-color: hsl(
-      var(--#{$color-title}-h) var(--#{$color-title}-s) calc(var(--#{$color-title}-l) - #{$shade}) /
-        var(--#{$color-title}-a)
-    );
-    --button-background: transparent;
-    --button-box-shadow-color: transparent;
-  }
-
-  .button--switch:checked + &,
-  :not(.button--switch) + &:active,
-  &:first-child:active,
-  &.active,
-  &.show {
-    --button-color: hsl(
-      var(--#{$color-title}-h) var(--#{$color-title}-s) calc(var(--#{$color-title}-l) - #{$shade}) /
-        var(--#{$color-title}-a)
-    );
-    --button-background: transparent;
-    --button-box-shadow-color: transparent;
-  }
-}
-
-@mixin button-variant-outline($color-title: "body-color", $border-color-hover, $background-active) {
-  --button-color: hsl(
-    var(--#{$color-title}-h) var(--#{$color-title}-s) var(--#{$color-title}-l) / var(--#{$color-title}-a)
-  );
-  --button-border-color: hsl(
-    var(--#{$color-title}-h) var(--#{$color-title}-s) var(--#{$color-title}-l) / var(--#{$color-title}-a)
-  );
-  --button-background: hsl(var(--#{$color-title}-h) var(--#{$color-title}-s) var(--#{$color-title}-l) / 0%);
-
-  &:hover,
-  .button--switch + &:hover {
-    --button-color: hsl(var(--white-h) var(--white-s) var(--white-l) / var(--white-a));
-    --button-background: hsl(
-      var(--#{$color-title}-h) var(--#{$color-title}-s) var(--#{$color-title}-l) / var(--#{$color-title}-a)
-    );
-    --button-border-color: #{$border-color-hover};
-  }
-
-  &:focus-visible,
-  .button--switch:focus-visible + & {
-    --button-color: hsl(var(--white-h) var(--white-s) var(--white-l) / var(--white-a));
-    --button-background: hsl(
-      var(--#{$color-title}-h) var(--#{$color-title}-s) var(--#{$color-title}-l) / var(--#{$color-title}-a)
-    );
-    --button-border-color: #{$border-color-hover};
-  }
+  --button-hover-text-decoration: underline;
 
-  .button--switch:checked + &,
-  :not(.button--switch) + &:active,
-  &:first-child:active,
-  &.active,
-  &.show {
-    --button-color: hsl(var(--white-h) var(--white-s) var(--white-l) / var(--white-a));
-    --button-background: #{$background-active};
-    --button-border-color: #{$border-color-hover};
-  }
+  --button-border-radius: 0;
+  --button-small-border-radius: 0;
+  --button-large-border-radius: 0;
 }

package/sass/mixins/_caret.scss

@@ -1,34 +1,41 @@
 @use "./../variables" as *;
 
-@mixin make-caret() {
+@mixin make-caret($left: false, $position: calc(var(--spacer) * 0.5)) {
   position: relative;
 
   &::after {
     position: absolute;
     content: "";
-    top: calc(50% - calc($spacer * 0.125));
+    inset: 50% auto auto;
+    transform: translateY(-50%);
     width: 0;
     height: 0;
-    border-left: calc($spacer * 0.25) solid transparent;
-    border-right: calc($spacer * 0.25) solid transparent;
+    border-left: calc(var(--spacer) * 0.25) solid transparent;
+    border-right: calc(var(--spacer) * 0.25) solid transparent;
     pointer-events: none;
+
+    @if $left {
+      left: $position;
+    } @else {
+      right: $position;
+    }
   }
 }
 
-@mixin make-caret-down($value) {
-  @include make-caret;
+@mixin make-caret-down($left: false, $color: "body-color", $position: calc(var(--spacer) * 0.5)) {
+  @include make-caret($left);
 
   &::after {
     border-bottom: 0;
-    border-top: calc($spacer * 0.25) solid $value;
+    border-top: calc(var(--spacer) * 0.25) solid hsl(var(--#{$color}-h) var(--#{$color}-s) var(--#{$color}-l) / 100%);
   }
 }
 
-@mixin make-caret-up($value) {
-  @include make-caret;
+@mixin make-caret-up($left: false, $color: "body-color", $position: calc(var(--spacer) * 0.5)) {
+  @include make-caret($left);
 
   &::after {
     border-top: 0;
-    border-bottom: calc($spacer * 0.25) solid $value;
+    border-bottom: calc(var(--spacer) * 0.25) solid hsl(var(--#{$color}-h) var(--#{$color}-s) var(--#{$color}-l) / 100%);
   }
 }

package/sass/mixins/_colors.scss

@@ -6,7 +6,7 @@
   --#{$title}-h: #{color.hue($color)};
   --#{$title}-s: #{color.saturation($color)};
   --#{$title}-l: #{color.lightness($color)};
-  --#{$title}-a: #{color.alpha($color)};
+  --#{$title}-a: #{calc(color.alpha($color) * 100%)};
 }
 
 @mixin make-color($title) {

package/sass/mixins/_gradient.scss

@@ -1,14 +1,6 @@
 @use "sass:color";
 @use "./../variables" as *;
 
-@mixin gradient-background($color: null) {
-  background-color: $color;
-
-  @if $enable-gradients {
-    background-image: var(--gradient);
-  }
-}
-
 // Horizontal gradient, from left to right
 // Creates two color stops, start and end, by specifying a color and position for each color stop.
 @mixin gradient-x($start-color: $gray-7, $end-color: $gray-8, $start-percent: 0%, $end-percent: 100%) {

package/sass/mixins/_group.scss

@@ -15,7 +15,7 @@
   }
 }
 
-@mixin make-group-column($gap: calc($spacer * 0.5)) {
+@mixin make-group-column($gap: calc(var(--spacer) * 0.5)) {
   @include make-group;
 
   flex-direction: column;
@@ -27,7 +27,7 @@
   }
 }
 
-@mixin make-group-row($gap: calc($spacer * 0.5)) {
+@mixin make-group-row($gap: calc(var(--spacer) * 0.5)) {
   @include make-group;
 
   & > * {

package/sass/mixins/_list.scss

@@ -13,7 +13,7 @@
   }
 }
 
-@mixin make-list-inline($gap: calc($spacer * 0.5)) {
+@mixin make-list-inline($gap: calc(var(--spacer) * 0.5)) {
   @include make-group-row($gap);
   @include make-list-unsyled;
 }

package/sass/modules/_alert.scss

@@ -15,13 +15,6 @@
     var(--body-color-h) var(--body-color-s) calc(#{$alert-color-l} - #{$link-shade-percentage}) / var(--body-color-a)
   );
 
-  @each $key in (1, 2, 3, 4, 5, 6) {
-    h#{$key},
-    .h#{$key} {
-      --color: var(--alert-color);
-    }
-  }
-
   color: var(--alert-color);
   border: var(--alert-border-width) var(--alert-border-style) var(--alert-border-color);
   padding: var(--alert-padding-y) var(--alert-padding-x);
@@ -35,6 +28,13 @@
     margin-bottom: 0;
   }
 
+  @each $key in (1, 2, 3, 4, 5, 6) {
+    h#{$key},
+    .h#{$key} {
+      --color: var(--alert-color);
+    }
+  }
+
   & > * {
     &:last-child {
       margin-bottom: 0;
@@ -44,7 +44,7 @@
   & a:not(.button),
   & .button--unstyled {
     color: var(--alert-link-color);
-    font-weight: $font-weight-semibold;
+    font-weight: 600;
 
     &:hover,
     &:focus {

package/sass/modules/_breadcrumbs.scss

@@ -7,7 +7,7 @@
 
   display: flex;
   flex-wrap: wrap;
-  color: $breadcrumb-color;
+  color: var(--medium);
 
   & li {
     position: relative;
@@ -31,10 +31,10 @@
     }
 
     & a {
-      color: $breadcrumb-link-color;
+      color: var(--medium);
 
       &:hover {
-        color: $breadcrumb-link-hover-color;
+        color: hsl(var(--medium-h) var(--medium-s) calc(var(--medium-l) - #{$link-shade-percentage}) / 100%);
       }
     }
   }