@design-factory/design-factory 19.1.3 → 20.0.0-next.1

package/styles/scss/components/link/_link.mixins.scss

@@ -1,108 +1,105 @@
-@mixin df-link-normal {
-  color: var(--#{$prefix}link-color);
-  border-bottom: var(--#{$prefix}link-border-bottom);
-}
-
-@mixin df-link-hover {
-  color: var(--#{$prefix}link-hover-color);
-  background-color: var(--#{$prefix}link-hover-background);
-  border-bottom-width: var(--#{$prefix}link-hover-border-bottom-width);
-  text-decoration: var(--#{$prefix}link-hover-text-decoration);
-}
-
-@mixin df-link-visited {
-  color: var(--#{$prefix}link-visited-color);
-  border-bottom-color: var(--#{$prefix}link-visited-color);
-  text-decoration: none;
-}
-
-@mixin df-link-focus {
-  outline: var(--#{$prefix}link-focus-outline);
-  outline-offset: var(--#{$prefix}link-focus-outline-offset);
-  box-shadow: var(--#{$prefix}link-focus-box-shadow);
-}
-
-@mixin df-link-visited-hover {
-  color: var(--#{$prefix}link-visited-hover-text-color);
-  background-color: var(--#{$prefix}link-visited-hover-background);
-  border-bottom-width: var(--#{$prefix}link-visited-hover-border-bottom-width);
-  border-bottom-color: var(--#{$prefix}link-visited-hover-border-bottom-color);
-}
-
-@mixin df-link-visited-active {
-  color: var(--#{$prefix}link-visited-active-text-color);
-  background-color: var(--#{$prefix}link-visited-active-background);
-  border-bottom-width: var(--#{$prefix}link-visited-active-border-bottom-width);
-  border-bottom-color: var(--#{$prefix}link-visited-active-border-bottom-color);
+@mixin df-link-external-content {
+  content: $df-link-external-icon;
+  font-family: $df-link-external-font-family;
+  position: relative;
+  bottom: var(--#{$prefix}link-external-icon-bottom);
+  font-size: var(--#{$prefix}link-external-icon-size);
 }
 
-@mixin df-link-disabled {
+%df-disabled-link-style {
   color: var(--#{$prefix}link-disabled-color);
+  background-color: var(--#{$prefix}link-disabled-background);
   display: var(--#{$prefix}link-disabled-display);
   cursor: var(--#{$prefix}link-disabled-cursor);
   text-decoration: var(--#{$prefix}link-disabled-text-decoration);
   border-bottom-color: var(--#{$prefix}link-disabled-border-bottom-color);
-  background-color: var(--#{$prefix}link-disabled-background);
+  border-bottom-width: var(--#{$prefix}link-disabled-border-bottom-width);
   outline: none;
   box-shadow: none;
 }
 
-@mixin df-link-active {
-  color: var(--#{$prefix}link-active-color);
-  border-bottom-width: var(--#{$prefix}link-active-border-bottom-width);
-  border-bottom-color: var(--#{$prefix}link-active-color);
-  background-color: var(--#{$prefix}link-active-background);
-}
+@mixin df-disabled-link {
+  &[aria-disabled='true'] {
+    @extend %df-disabled-link-style;
 
-@mixin df-link-external-content {
-  content: $df-link-external-icon;
-  font-family: $df-link-external-font-family;
-  position: relative;
-  bottom: var(--#{$prefix}link-external-icon-bottom);
-  font-size: var(--#{$prefix}link-external-icon-size);
+    &:hover,
+    &:active,
+    &:visited,
+    &:visited:hover {
+      @extend %df-disabled-link-style;
+    }
+  }
 }
 
+//TODO: move the mixin to the links after branding2023 removal and clean the include of this link
 @mixin df-link {
-  &:link {
-    @include df-link-normal;
+  color: var(--#{$prefix}link-color);
+  border-bottom: var(--#{$prefix}link-border-bottom);
+
+  &:hover {
+    color: var(--#{$prefix}link-hover-color);
+    background-color: var(--#{$prefix}link-hover-background);
+    border-bottom-width: var(--#{$prefix}link-hover-border-bottom-width);
+    text-decoration: var(--#{$prefix}link-hover-text-decoration);
+  }
+  &:active {
+    color: var(--#{$prefix}link-active-color);
+    border-bottom-width: var(--#{$prefix}link-active-border-bottom-width);
+    border-bottom-color: var(--#{$prefix}link-active-color);
+    background-color: var(--#{$prefix}link-active-background);
   }
 
-  &:hover:not([aria-disabled='true']) {
-    @include df-link-hover;
+  &:focus-visible {
+    outline: var(--#{$prefix}link-focus-outline);
+    outline-offset: var(--#{$prefix}link-focus-outline-offset);
+    box-shadow: var(--#{$prefix}link-focus-box-shadow);
   }
 
   &:visited {
-    @include df-link-visited;
-  }
+    color: var(--#{$prefix}link-visited-color);
+    border-bottom-color: var(--#{$prefix}link-visited-color);
+
+    &:hover {
+      color: var(--#{$prefix}link-visited-hover-text-color);
+      background-color: var(--#{$prefix}link-visited-hover-background);
+      border-bottom-width: var(--#{$prefix}link-visited-hover-border-bottom-width);
+      border-bottom-color: var(--#{$prefix}link-visited-hover-border-bottom-color);
+    }
 
-  &:visited:hover {
-    @include df-link-visited;
-    @include df-link-visited-hover;
+    &:active {
+      color: var(--#{$prefix}link-visited-active-text-color);
+      background-color: var(--#{$prefix}link-visited-active-background);
+      border-bottom-width: var(--#{$prefix}link-visited-active-border-bottom-width);
+      border-bottom-color: var(--#{$prefix}link-visited-active-border-bottom-color);
+    }
   }
 
-  &:active:not([aria-disabled='true']) {
-    @include df-link-active;
-  }
+  @include df-disabled-link();
+}
 
-  &:focus-visible {
-    @include df-link-focus;
-  }
+//TODO remove mixin when we find change the web portal to avoid using links as buttons or make a different decision
+@mixin a-btn {
+  &:visited {
+    color: var(--#{$prefix}link-color);
+    border-color: var(--#{$prefix}btn-hover-border-color);
 
-  &:visited:active {
-    @include df-link-visited-active;
-  }
+    &:hover {
+      color: var(--#{$prefix}btn-hover-color);
+      background-color: var(--#{$prefix}btn-hover-bg);
+    }
 
-  &[aria-disabled='true'] {
-    &:hover,
-    &:active,
-    &:visited,
-    &:visited:hover,
-    &:link {
-      @include df-link-disabled;
+    &:active {
+      color: var(--#{$prefix}btn-active-color);
+      background-color: var(--#{$prefix}btn-active-bg);
     }
   }
+  &:hover,
+  &:active {
+    border-width: var(--#{$prefix}btn-border-width);
+  }
 }
 
+//TODO: Remove after branding2023 removal
 @mixin df-link-more-normal {
   text-transform: var(--#{$prefix}link-more-text-transform);
   font-weight: var(--#{$prefix}font-weight-semi-bold);

package/styles/scss/components/link/_link.scss

@@ -1,14 +1,6 @@
 @use 'sass:meta';
 @import 'link.mixins';
 
-p,
-ul:not([class]),
-ol:not([class]) {
-  a {
-    @include df-link();
-  }
-}
-
 a {
   --#{$prefix}link-color: #{shades-css-var('links', 'text-color')};
   --#{$prefix}link-border-bottom-width: #{$df-link-border-bottom-width};
@@ -24,7 +16,7 @@ a {
   --#{$prefix}link-visited-border-bottom-width: #{$df-link-visited-border-bottom-width};
   --#{$prefix}link-visited-hover-border-bottom-width: #{$df-link-visited-hover-border-bottom-width};
   --#{$prefix}link-visited-border-bottom: #{$df-link-visited-border-bottom};
-  --#{$prefix}link-visited-hover-background: #{shades-css-var('links', 'bg-visisted-hover-color')};
+  --#{$prefix}link-visited-hover-background: #{shades-css-var('links', 'bg-visited-hover-color')};
   --#{$prefix}link-visited-hover-text-color: #{shades-css-var('links', 'text-visited-hover-color')};
   --#{$prefix}link-visited-active-text-color: #{shades-css-var('links', 'text-visited-active-color')};
   --#{$prefix}link-visited-active-background: #{shades-css-var('links', 'bg-visited-active-color')};
@@ -41,6 +33,7 @@ a {
   --#{$prefix}link-disabled-background: #{$df-link-disabled-background};
   --#{$prefix}link-external-icon-bottom: #{$df-link-external-icon-bottom};
   --#{$prefix}link-external-icon-size: #{$df-link-external-icon-size};
+  //TODO: remove link-more with old branding removal
   --#{$prefix}link-more-text-transform: #{$df-link-more-text-transform};
   --#{$prefix}link-more-text-decoration-underline: #{$df-link-more-text-decoration-underline};
   --#{$prefix}link-more-icon-margin-left: #{$df-link-more-icon-margin-left};
@@ -58,6 +51,12 @@ a {
   --#{$prefix}link-icononly-border-radius: #{$df-link-icononly-border-radius};
   --#{$prefix}link-icononly-hover-bg-color: #{$df-link-icononly-hover-bg-color};
 
+  @include df-link();
+
+  &.btn {
+    @include a-btn();
+  }
+
   &:focus-visible {
     --#{$prefix}box-shadow-color: #{$df-link-focus-box-shadow-color};
     box-shadow: var(--#{$prefix}link-focus-box-shadow);
@@ -65,15 +64,13 @@ a {
   }
 
   @if meta.variable-exists($name: 'df-enableBranding2023') and $df-enableBranding2023 {
-    &:not(.df-link-icononly) {
-      &:hover {
-        --#{$prefix}box-shadow-color: var(--#{$prefix}link-hover-color);
-      }
-
-      &:active,
-      &.active {
-        --#{$prefix}box-shadow-color: var(--#{$prefix}link-active-color);
-      }
+    &:hover {
+      --#{$prefix}box-shadow-color: #{shades-css-var('links', 'box-shadow-hover-color')};
+    }
+
+    &:active,
+    &.active {
+      --#{$prefix}box-shadow-color: #{shades-css-var('links', 'box-shadow-active-color')};
     }
   }
 
@@ -118,7 +115,8 @@ a {
   font-size: $font-size-lg;
 }
 
-%df-link-icononly-common {
+a.df-link-icononly {
+  border-bottom: 0;
   border-radius: var(--#{$prefix}link-icononly-border-radius);
   text-align: var(--#{$prefix}link-icononly-text-align);
   display: var(--#{$prefix}link-icononly-display);
@@ -126,39 +124,35 @@ a {
   text-decoration: var(--#{$prefix}link-icononly-decoration);
   align-items: var(--#{$prefix}link-icononly-align);
   justify-content: var(--#{$prefix}link-icononly-justify-content);
+  //overridden by sizing sm and lg
+  line-height: var(--#{$prefix}link-icononly-height);
+  height: var(--#{$prefix}link-icononly-height);
+  width: var(--#{$prefix}link-icononly-height);
 
   &:hover {
-    color: var(--#{$prefix}link-icononly-color);
+    color: $df-link-icononly-hover-color;
     background-color: var(--#{$prefix}link-icononly-hover-bg-color);
     text-decoration: var(--#{$prefix}link-icononly-decoration);
   }
 
   &:focus-visible {
+    --#{$prefix}box-shadow-color: #{$df-link-icononly-focus-box-shadow-color};
     box-shadow: var(--#{$prefix}link-focus-box-shadow);
     outline: var(--#{$prefix}link-focus-outline);
   }
-}
-
-.df-link-icononly {
-  @extend %df-link-icononly-common;
-  line-height: var(--#{$prefix}link-icononly-height);
-  height: var(--#{$prefix}link-icononly-height);
-  width: var(--#{$prefix}link-icononly-height);
 
-  &:focus-visible {
-    --#{$prefix}box-shadow-color: #{$df-link-icononly-focus-box-shadow-color};
+  &:active {
+    color: $df-link-icononly-active-color;
+    background-color: $df-link-icononly-active-bg-color;
   }
 
-
   &.df-link-sm {
-    @extend %df-link-icononly-common;
     line-height: var(--#{$prefix}link-icononly-height-sm);
     height: var(--#{$prefix}link-icononly-height-sm);
     width: var(--#{$prefix}link-icononly-height-sm);
   }
 
   &.df-link-lg {
-    @extend %df-link-icononly-common;
     line-height: var(--#{$prefix}link-icononly-height-lg);
     height: var(--#{$prefix}link-icononly-height-lg);
     width: var(--#{$prefix}link-icononly-height-lg);

package/styles/scss/components/link/_link.variables.scss

@@ -42,8 +42,11 @@ $df-link-icononly-align: center !default;
 $df-link-icononly-justify-content: center !default;
 $df-link-icononly-text-align: center !default;
 $df-link-icononly-color: $gray-600 !default;
+$df-link-icononly-hover-color: $gray-600 !default;
+$df-link-icononly-active-color: $gray-600 !default;
 $df-link-icononly-decoration: none !default;
 $df-link-icononly-border-radius: 50% !default;
 $df-link-icononly-hover-bg-color: shades-css-var('secondary', 'bg-subtle-hover-color') !default;
+$df-link-icononly-active-bg-color: shades-css-var('secondary', 'bg-subtle-hover-color') !default;
 $df-link-icononly-focus-box-shadow-color: inherit !default;
 $df-link-focus-outline: none !default;

package/styles/scss/components/list-group/_list-group.scss

@@ -1,20 +1,39 @@
+%df-disabled-style {
+  color: var(--#{$prefix}list-group-disabled-color);
+  background-color: var(--#{$prefix}list-group-disabled-bg);
+  cursor: var(--#{$prefix}list-group-disabled-cursor);
+  pointer-events: auto;
+}
+
 .list-group-item {
   --#{$prefix}list-group-disabled-cursor: #{$df-list-group-disabled-cursor};
   --#{$prefix}list-group-item-active-border-color: #{$df-list-group-item-active-border-color};
   --#{$prefix}list-group-item-border-left-active: #{$df-list-group-item-border-left-active};
   --#{$prefix}list-group-item-padding-left: #{$df-list-group-item-padding-left};
+  color: var(--#{$prefix}list-group-color);
   border-color: var(--#{$prefix}list-group-border-color);
 
   &[aria-disabled='true'],
   &.disabled,
   &[disabled] {
-    color: var(--#{$prefix}list-group-disabled-color);
-    cursor: var(--#{$prefix}list-group-disabled-cursor);
-    pointer-events: auto;
+    &,
+    &:hover,
+    &:active {
+      @extend %df-disabled-style;
+    }
   }
 
   &.list-group-item-action {
     &:not([aria-disabled='true']):not(.disabled):not([disabled]) {
+      &:active {
+        border-bottom-color: var(--#{$prefix}list-group-border-color);
+      }
+
+      &:hover {
+        //Reset to default
+        border-bottom-width: var(--#{$prefix}border-width);
+      }
+
       &:focus-visible {
         --#{$prefix}box-shadow-color: var(--#{$prefix}list-group-active-color);
         box-shadow: $df-list-group-focus-box-shadow;
@@ -26,6 +45,7 @@
         &:active,
         &.active {
           --#{$prefix}inner-box-shadow-color: var(--#{$prefix}list-group-action-active-bg);
+          color: var(--#{$prefix}list-group-active-color);
         }
 
         &:hover {
@@ -33,16 +53,21 @@
           background-color: var(--#{$prefix}list-group-action-hover-bg);
         }
       }
+
       //we use the .active class for the active item and the :active pseudo-class to style when it is pressed
       &.active {
         border-color: var(--#{$prefix}list-group-item-active-border-color); // override
         background-color: var(--#{$prefix}list-group-action-active-bg);
         padding-inline-start: var(--#{$prefix}list-group-item-padding-left);
         border-inline-start: var(--#{$prefix}list-group-item-border-left-active);
+        font-weight: $df-list-group-active-font-weight;
+
         &:hover {
           background-color: var(--#{$prefix}list-group-action-hover-bg);
         }
+
         &:active {
+          border-color: var(--#{$prefix}list-group-item-active-border-color);
           background-color: var(--#{$prefix}list-group-action-active-bg);
         }
       }
@@ -51,10 +76,10 @@
 }
 
 .list-group {
-  font-size: var(--#{$prefix}list-group-font-size);
+  font-size: $font-size-base;
   @each $extension, $ratio in $df-size-ratios {
     &.df-list-group-#{$extension} {
-      --#{$prefix}list-group-font-size: #{$font-size-base * $ratio};
+      --#{$prefix}list-group-font-size: #{get-sizing-brand2023($extension, $ratio, $font-size-base, true)};
       --#{$prefix}list-group-item-padding-y: #{$list-group-item-padding-y * $ratio};
 
       .list-group-item {

package/styles/scss/components/list-group/_list-group.variables.scss

@@ -1,6 +1,10 @@
 $df-list-group-disabled-cursor: var(--#{$prefix}disabled-cursor) !default;
 $df-list-group-item-active-border-width: 0.1875rem !default; // same as sidenav
 $df-list-group-item-active-border-color: $gray-100 !default;
-$df-list-group-item-border-left-active: $df-list-group-item-active-border-width solid var(--#{$prefix}list-group-active-color) !default; // todo check with Max if should be inert color ?
-$df-list-group-item-padding-left: calc(#{$list-group-item-padding-x} - #{$df-list-group-item-active-border-width} + #{$list-group-border-width}) !default;
+$df-list-group-item-border-left-active: $df-list-group-item-active-border-width solid
+  var(--#{$prefix}list-group-active-color) !default; // todo check with Max if should be inert color ?
+$df-list-group-item-padding-left: calc(
+  #{$list-group-item-padding-x} - #{$df-list-group-item-active-border-width} + #{$list-group-border-width}
+) !default;
 $df-list-group-focus-box-shadow: var(--#{$prefix}focused-box-shadow) !default;
+$df-list-group-active-font-weight: inherit !default;

package/styles/scss/components/media/_media.scss

@@ -45,6 +45,10 @@
   &.df-font-sm,
   &.card-sm {
     @include border-radius(var(--#{$prefix}interactive-media-border-radius-sm));
+    time,
+    & > * {
+      font-size: $df-interactive-media-font-size-sm;
+    }
     @include heading {
       font-size: var(--#{$prefix}interactive-media-heading-font-size-sm);
     }
@@ -53,11 +57,14 @@
   &.df-font-lg,
   &.card-lg {
     @include border-radius(var(--#{$prefix}interactive-media-border-radius-lg));
+    time,
+    & > * {
+      font-size: $df-interactive-media-font-size-lg;
+    }
     @include heading {
       font-size: var(--#{$prefix}interactive-media-heading-font-size-lg);
     }
   }
-
   time {
     color: var(--#{$prefix}interactive-media-date-color);
   }

package/styles/scss/components/media/_media.variables.scss

@@ -14,3 +14,5 @@ $df-interactive-media-heading-font-size-sm: 1.125rem !default;
 $df-interactive-media-heading-font-size: 1.25rem !default;
 $df-interactive-media-heading-font-size-lg: 1.5rem !default;
 $df-interactive-media-heading-margin-block: 0.25rem !default;
+$df-interactive-media-font-size-sm: $font-size-base !default;
+$df-interactive-media-font-size-lg: $font-size-base !default;

package/styles/scss/components/modal/_modal.scss

@@ -41,6 +41,7 @@
   --#{$prefix}modal-xs-footer-margin-top: #{$df-modal-xs-footer-margin-top};
   --#{$prefix}modal-last-paragraph-margin-bottom: #{$df-modal-last-paragraph-margin-bottom};
   --#{$prefix}modal-footer-padding: #{$df-modal-footer-padding};
+  --#{$prefix}modal-body-padding: #{$df-modal-body-padding};
 
   overflow-x: hidden;
   overflow-y: auto;
@@ -70,11 +71,14 @@
             margin-right: auto;
             margin-left: 0;
           }
-          &:focus:not(:hover):not(:active) {
+          &:focus:not(:focus-visible) {
+            box-shadow: none;
+          }
+          &:focus-visible:not(:hover):not(:active) {
             color: var(--#{$prefix}modal-header-button-color-focus);
             --#{$prefix}box-shadow-color: var(--#{$prefix}modal-header-button-color-focus);
           }
-          &:focus:hover:not(:active) {
+          &:focus-visible:hover:not(:active) {
             --#{$prefix}box-shadow-color: var(--#{$prefix}modal-header-button-color-hover-focus);
             color: var(--#{$prefix}modal-header-button-color-hover-focus);
           }
@@ -84,16 +88,24 @@
             $btn-close-bg: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%231a1a1a'><path d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z'/></svg>");
             background: var(--#{$prefix}modal-header-button-color-hover-bg) $btn-close-bg center/0.8rem auto no-repeat;
           }
-          &:focus:active:not(:hover) {
+          &:focus-visible:active:not(:hover) {
             color: var(--#{$prefix}modal-header-button-active-color);
             --#{$prefix}box-shadow-color: var(--#{$prefix}modal-header-button-active-color);
 
             $btn-close-bg: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000000'><path d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z'/></svg>");
             background: var(--#{$prefix}modal-header-button-active-bg) $btn-close-bg center/0.8rem auto no-repeat;
           }
-          &:focus:active:hover {
+          &:focus-visible:active:hover {
             --#{$prefix}box-shadow-color: var(--#{$prefix}modal-header-button-color-hover-focus);
           }
+          @if meta.variable-exists($name: 'df-enableBranding2023') and $df-enableBranding2023 {
+            &:hover {
+              background-color: var(--#{$prefix}button-text-basic-color-neutral-hovered-background);
+            }
+            &:active {
+              background-color: var(--#{$prefix}button-text-basic-color-neutral-pressed-background);
+            }
+          }
         }
 
         .alert-modal-icon {
@@ -110,6 +122,7 @@
       }
 
       .modal-body {
+        padding: var(--#{$prefix}modal-body-padding);
         p:last-child {
           margin-bottom: var(--#{$prefix}modal-last-paragraph-margin-bottom);
         }

package/styles/scss/components/modal/_modal.variables.scss

@@ -24,5 +24,6 @@ $df-modal-xs-footer-margin-top: 0.9375rem !default;
 
 $df-modal-last-paragraph-margin-bottom: 0 !default;
 $df-modal-footer-padding: map.get($spacers, 5) map.get($spacers, 6) !default;
+$df-modal-body-padding: map.get($spacers, 5) map.get($spacers, 6) !default;
 $df-modal-btn-close-opacity: 1 !default;
 $df-modal-btn-close-hover-opacity: 1 !default;

package/styles/scss/components/navbar/_navbar.mixins.scss

@@ -0,0 +1,55 @@
+@mixin navlink($prefix-vars) {
+  color: var(#{$prefix-vars}-default-foreground);
+
+  &:hover {
+    --#{$prefix}inner-box-shadow-color: var(#{$prefix-vars}-hovered-background);
+    color: var(#{$prefix-vars}-hovered-foreground);
+    background-color: var(#{$prefix-vars}-hovered-background);
+
+    &:focus-visible {
+      --#{$prefix}navbar-nav-link-focus-color: var(#{$prefix-vars}-hovered-border);
+    }
+  }
+
+  &:active {
+    color: var(#{$prefix-vars}-pressed-foreground);
+    background-color: var(#{$prefix-vars}-pressed-background);
+
+    &:focus-visible {
+      --#{$prefix}navbar-nav-link-focus-color: var(#{$prefix-vars}-pressed-border);
+    }
+  }
+
+  &:focus-visible {
+    --#{$prefix}navbar-nav-link-focus-color: var(#{$prefix-vars}-default-border);
+  }
+}
+
+@mixin navlink-active($prefix-vars) {
+  color: var(#{$prefix-vars}-active-foreground);
+
+  &:hover {
+    --#{$prefix}inner-box-shadow-color: var(#{$prefix-vars}-activeHovered-background);
+    color: var(#{$prefix-vars}-activeHovered-foreground);
+    // the :active state should still use the background color from the mixin above
+    &:not(:active) {
+      background-color: var(#{$prefix-vars}-activeHovered-background);
+    }
+
+    &:focus-visible {
+      --#{$prefix}navbar-nav-link-focus-color: var(#{$prefix-vars}-activeHovered-border);
+    }
+  }
+
+  &:active {
+    color: var(#{$prefix-vars}-activePressed-foreground);
+
+    &:focus-visible {
+      --#{$prefix}navbar-nav-link-focus-color: var(#{$prefix-vars}-activePressed-border);
+    }
+  }
+
+  &:focus-visible {
+    --#{$prefix}navbar-nav-link-focus-color: var(#{$prefix-vars}-active-border);
+  }
+}