@design-factory/design-factory 15.2.3 → 16.0.0

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

@@ -1,148 +1,293 @@
+// We could add this to allow people to get the superheader height from anywhere in the page.
+// .df-superheader {
+//   --#{$prefix}navbar-height: #{$df-navbar-superheader-height};
+// }
+// With this we could have a superheader without the add of the class
+// .df-superheader in the page alert --> if accepted we could remove the doc about this.
+.df-superheader ~ * {
+  .df-page-alert {
+    --#{$prefix}navbar-height: #{$df-navbar-superheader-height};
+  }
+} 
 // CSS for nav
 .navbar {
-  //add
-  font-size: $df-navbar-nav-font-size;
-  box-shadow: $df-navbar-boxshadow;
+  --#{$prefix}active-border-width: #{$df-active-border-width};
+  --#{$prefix}active-font-weight: #{$df-active-font-weight};
+  --#{$prefix}navbar-boxshadow: #{$df-navbar-boxshadow};
+  --#{$prefix}navbar-height: #{$df-navbar-height};
+  --#{$prefix}navbarbrand-padding-right: #{$df-navbarbrand-padding-right};
+  --#{$prefix}navbarbrand-padding-left: #{$df-navbarbrand-padding-left};
+  --#{$prefix}navbarbrand-padding-top: #{$df-navbarbrand-padding-top};
+  --#{$prefix}navbarbrand-padding-bottom: #{$df-navbarbrand-padding-bottom};
+  --#{$prefix}navbarbrand-min-height: #{$df-navbarbrand-min-height};
+  --#{$prefix}navbar-nav-link-bg-hover-color: #{$df-navbar-nav-link-bg-hover-color};
+  --#{$prefix}navbar-nav-link-padding-right: #{$df-navbar-nav-link-padding-right};
+  --#{$prefix}navbar-nav-link-padding-left: #{$df-navbar-nav-link-padding-left};
+  --#{$prefix}navbar-nav-font-size: #{$df-navbar-nav-font-size};
+  --#{$prefix}navbar-nav-link-padding-top: #{$df-navbar-nav-link-padding-top};
+  --#{$prefix}navbar-nav-link-padding-bottom: #{$df-navbar-nav-link-padding-bottom};
+  --#{$prefix}navbar-nav-link-expanded-padding-bottom: #{$df-navbar-nav-link-expanded-padding-bottom};
+  --#{$prefix}navbar-nav-link-border-hover-color: #{$df-navbar-nav-link-border-hover-color};
+  --#{$prefix}navbar-nav-link-border-color: #{$df-navbar-nav-link-border-color};
+  --#{$prefix}navbar-dark-border-color: #{$df-navbar-dark-border-color};
+  --#{$prefix}navbar-dark-hover-focus-border-color: #{$df-navbar-dark-hover-focus-border-color};
+  --#{$prefix}navbar-toggle-margin-left: #{$df-navbar-toggle-margin-left};
+  --#{$prefix}navbar-toggle-margin-right: #{$df-navbar-toggle-margin-right};
+  --#{$prefix}navbar-font-family: #{$df-navbar-font-family};
+  --#{$prefix}navbar-dark-focus-color: #{$df-navbar-dark-focus-color};
+  --#{$prefix}navbar-dark-active-border-color: #{$df-navbar-dark-active-border-color};
+  --#{$prefix}navbartext-white-space: #{$df-navbartext-white-space};
+  --#{$prefix}navbar-collapse-overflow: #{$df-navbar-collapse-overflow};
+  --#{$prefix}navbartext-overflow: #{$df-navbartext-overflow};
+  --#{$prefix}navbartext-text-overflow: #{$df-navbartext-text-overflow};
+  --#{$prefix}navbartext-margin-start: #{$df-navbartext-margin-start};
+  --#{$prefix}navbar-toggle-icon-width: #{$df-navbar-toggle-icon-width};
+  --#{$prefix}navbar-toggle-icon-height: #{$df-navbar-toggle-icon-height};
+  --#{$prefix}navbar-toggle-border: #{$df-navbar-toggle-border};
+  --#{$prefix}navbar-nav-link-bg-focus-color: #{$df-navbar-nav-link-bg-focus-color};
+  --#{$prefix}navbar-nav-link-focus-color: #{$df-navbar-nav-link-focus-color};
+  --#{$prefix}navbar-dark-toggler-hover-bg: #{$df-navbar-dark-toggler-hover-bg};
+  --#{$prefix}navbar-light-toggler-hover-bg: #{$df-navbar-light-toggler-hover-bg};
+  --#{$prefix}navbar-dropdown-menu-collapse-margin: #{$df-navbar-dropdown-menu-collapse-margin};
+  --#{$prefix}navbar-dropdown-menu-collapse-box-shadow: #{$df-navbar-dropdown-menu-collapse-box-shadow};
+  --#{$prefix}navbar-dropdown-menu-collapse-last-item-margin-bottom: #{$df-navbar-dropdown-menu-collapse-last-item-margin-bottom};
+  --#{$prefix}navbar-dropdown-btn-bg: #{$df-navbar-dropdown-btn-bg};
+  --#{$prefix}navbar-superheader-height: #{$df-navbar-superheader-height};
+  --#{$prefix}navbar-nav-link-outline: #{$df-navbar-nav-link-outline};
+  --#{$prefix}navbar-nav-link-focus-box-shadow-width: #{$df-navbar-nav-link-focus-box-shadow-width};
+  --#{$prefix}navbar-link-active-border: #{$df-navbar-link-active-border};
+  --#{$prefix}navbar-light-text-color: #{$df-navbar-light-text-color};
+  --#{$prefix}navbar-light-text-hover-color: #{$df-navbar-light-text-hover-color};
+  --#{$prefix}navbar-light-text-active-color: #{$df-navbar-light-text-active-color};
+  // default (light) system of before
+  --#{$prefix}navbar-color: var(--#{$prefix}navbar-light-text-color);
+  --#{$prefix}navbar-hover-color: var(--#{$prefix}navbar-light-text-hover-color);
+  --#{$prefix}navbar-active-color: var(--#{$prefix}navbar-light-text-active-color);
+  --#{$prefix}navbar-brand-color: var(--#{$prefix}navbar-light-text-color);
+  --#{$prefix}bg-color-opacity: #{$df-navbar-nav-link-box-shadow-opacity};
+  --#{$prefix}box-shadow-color: #{$df-navbar-nav-link-box-shadow-color};
+
+  // Is it still used ?
+  --#{$prefix}navbar-nav-link-box-shadow-color-rgb: #{shades-rgb-css-var('primary', 'bg-color')};
+
+  @if variable-exists($name: 'df-enableBranding2023') and $df-enableBranding2023 {
+    --#{$prefix}inner-box-shadow-color: #{$body-bg};
+    --#{$prefix}box-shadow-color: var(--#{$prefix}navbar-color);
+  }
+
+  --#{$prefix}navbar-toggle-box-shadow: #{$df-navbar-toggle-focused-box-shadow};
+  --#{$prefix}navbar-nav-link-box-shadow: #{$df-navbar-nav-link-box-shadow};
+
+  font-size: var(--#{$prefix}navbar-nav-font-size);
+  box-shadow: var(--#{$prefix}navbar-boxshadow);
   .navbar-text {
-    white-space: $df-navbartext-white-space;
-    overflow: $df-navbartext-overflow;
-    text-overflow: $df-navbartext-text-overflow;
-    margin-left: $df-navbartext-margin-left;
+    white-space: var(--#{$prefix}navbartext-white-space);
+    overflow: var(--#{$prefix}navbartext-overflow);
+    text-overflow: var(--#{$prefix}navbartext-text-overflow);
+    @include ltr {
+      margin-left: var(--#{$prefix}navbartext-margin-start);
+    }
+    @include rtl {
+      margin-right: var(--#{$prefix}navbartext-margin-start);
+    }
+  }
+
+  .nav-item.dropdown {
+    .btn {
+      --#{$prefix}btn-bg: var(--#{$prefix}navbar-dropdown-btn-bg);
+    }
   }
+
   > .navbar-collapse {
-    overflow: $df-navbar-collapse-overflow;
+    overflow: var(--#{$prefix}navbar-collapse-overflow);
   }
 
-  .navbar-nav {
-    // add
-    .nav-link {
-      padding-right: $df-navbar-nav-link-padding-right; // add
-      padding-left: $df-navbar-nav-link-padding-left; // add
-      padding-top: $df-navbar-nav-link-padding-top; // add
-      padding-bottom: $df-navbar-nav-link-padding-bottom; // add
+  .navbar-toggler-icon {
+    // override from _navbar.scss there is no variables for this in BS
+    width: var(--#{$prefix}navbar-toggle-icon-width);
+    height: var(--#{$prefix}navbar-toggle-icon-height);
+  }
+  
+  .navbar-brand {
+    position: relative;
+    display: flex;
+    align-items: center;
+    padding-right: var(--#{$prefix}navbarbrand-padding-right); // add
+    padding-left: var(--#{$prefix}navbarbrand-padding-left); // add
+    padding-top: var(--#{$prefix}navbarbrand-padding-top); // override
+    padding-bottom: var(--#{$prefix}navbarbrand-padding-bottom); // override
+    font-family: var(--#{$prefix}navbar-font-family); // add
+    min-height: var(--#{$prefix}navbarbrand-min-height);
+    outline: var(--#{$prefix}navbar-nav-link-outline);
 
-      // Reinitialize border of nav-link button
-      &.btn {
-        border-top: inherit;
-        border-right: inherit;
-        border-left: inherit;
-        border-radius: inherit;
-      }
+    &:focus {
+      box-shadow: var(--#{$prefix}navbar-nav-link-box-shadow);
     }
   }
-}
 
-.navbar-toggler-icon {
-  // override from _navbar.scss there is no variables for this in BS
-  width: $df-navbar-toggle-icon-width;
-  height: $df-navbar-toggle-icon-height;
-}
+  @each $color, $value in $utilities-bg {
+    &.bg-#{$color} {
+      $colorvalue: color-contrast(from-rgb($value));
+      --#{$prefix}navbar-toggler-icon-bg: #{escape-svg(url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'><path stroke='#{$colorvalue}' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/></svg>"))};
+      $text-color: shades-css-var($color, 'bg-color', true);
+      $text-hover-color: shades-css-var($color, 'bg-hover-color', true);
+      $text-active-color: shades-css-var($color, 'bg-active-color', true);
+      --#{$prefix}navbar-color: #{$text-color};
+      --#{$prefix}navbar-hover-color: #{$text-hover-color};
+      --#{$prefix}navbar-active-color: #{$text-active-color};
+      --#{$prefix}navbar-brand-color: #{$text-color};
+      --#{$prefix}navbar-brand-hover-color: #{$text-hover-color};
 
-.navbar-brand {
-  display: flex;
-  align-items: center;
-  padding-right: $df-navbarbrand-padding-right; // add
-  padding-left: $df-navbarbrand-padding-left; // add
-  padding-top: $df-navbarbrand-padding-top; // override
-  padding-bottom: $df-navbarbrand-padding-bottom; // override
-  margin-right: $df-navbarbrand-margin-right; // override
-  font-family: $df-navbar-font-family; // add
-  min-height: $df-navbarbrand-min-height;
-}
+      // override default theme
+      --#{$prefix}navbar-nav-link-focus-color: #{$text-color};
+      --#{$prefix}navbar-nav-link-bg-focus-color: #{shades-css-var($color, 'bg-color')};
+      // TODo check if still needed
+      --#{$prefix}navbar-nav-link-box-shadow-color-rgb: #{shades-rgb-css-var($color, 'bg-color')};
+      --#{$prefix}navbar-light-toggler-hover-bg: #{shades-css-var($color, 'bg-subtle-hover-color')};
+      --#{$prefix}navbar-nav-link-bg-hover-color: #{shades-css-var($color, 'bg-hover-color')}; // custom this with 2 shades le
+      // plus add the color of the text plus the color of the focus
+      @if variable-exists($name: 'df-enableBranding2023') and $df-enableBranding2023 {
+        --#{$prefix}inner-box-shadow-color: #{shades-css-var($color, 'bg-color')};
+        --#{$prefix}box-shadow-color: var(--#{$prefix}navbar-color);
+      } @else {
+        --#{$prefix}box-shadow-color: #{shades-rgba-css-var-with-opacity($color, 'bg-color', true)};
+      }
+      --#{$prefix}navbar-nav-link-box-shadow: #{$df-navbar-nav-link-box-shadow};
+
+      .navbar-nav {
+        .nav-link {
+          &:hover {
+            // add
+            background: var(--#{$prefix}navbar-nav-link-bg-hover-color); // add
+          }
+        }
+      }
+      // Should we custom this. See with UX
+      // .navbar-text {
+      //   color: var(--#{$prefix}navbar-light-text-color);
+      // }
+      .navbar-toggler {
+        &:focus {
+          @if variable-exists($name: 'df-enableBranding2023') and $df-enableBranding2023 {
+            --#{$prefix}inner-box-shadow-color: #{shades-css-var($color, 'bg-color')};
+            --#{$prefix}box-shadow-color: var(--#{$prefix}navbar-color);
+          } @else {
+            --#{$prefix}box-shadow-color: #{shades-rgba-css-var-with-opacity($color, 'bg-color', true)};
+          }
+          --#{$prefix}navbar-toggle-box-shadow: #{$df-navbar-toggle-focused-box-shadow};
+        }
+        &:hover {
+          background-color: #{shades-css-var($color, 'bg-hover-color')};
+          &:focus {
+            // verify the bg color change
+            @if variable-exists($name: 'df-enableBranding2023') and $df-enableBranding2023 {
+              --#{$prefix}inner-box-shadow-color: #{shades-css-var($color, 'bg-hover-color')};
+              --#{$prefix}box-shadow-color: var(--#{$prefix}navbar-hover-color);
+              --#{$prefix}navbar-toggle-box-shadow: #{$df-navbar-toggle-focused-box-shadow};
+            }
+          }
+        }
+      }
+    }
+  }
 
-.navbar-light {
+  // default without bg-X class
   .navbar-nav {
+    // add
     .nav-link {
-      border-color: $df-navbar-light-border-color;
+      padding-right: var(--#{$prefix}navbar-nav-link-padding-right); // add
+      padding-left: var(--#{$prefix}navbar-nav-link-padding-left); // add
+      padding-top: var(--#{$prefix}navbar-nav-link-padding-top); // add
+      padding-bottom: var(--#{$prefix}navbar-nav-link-padding-bottom); // add
+      outline: var(--#{$prefix}navbar-nav-link-outline);
+      position: relative;
+      border-bottom: none;
 
+      // added to be put to default
+      border-color: var(--#{$prefix}navbar-nav-link-border-color);
+      box-shadow: none;
+    
       &:focus {
         // add
-        color: $df-navbar-nav-link-focus-color; // override
-        background: $df-navbar-nav-link-focus-bg; // add
-        box-shadow: $btn-focus-box-shadow; //add
+        color: var(--#{$prefix}navbar-nav-link-focus-color); // override
+        background: var(--#{$prefix}navbar-nav-link-bg-focus-color); // add
+        &:before {
+          content: "";
+          position: absolute;
+          top: 0;
+          bottom: 0;
+          left: 0;
+          right: 0;
+          box-shadow: var(--#{$prefix}navbar-nav-link-box-shadow);
+        }
       }
 
       &:hover {
         // add
-        color: $navbar-light-hover-color; // override
-        background: $df-navbar-light-background-hover-color; // add
-        border-color: $df-navbar-light-border-hover-color; // add
+        color: var(--#{$prefix}navbar-hover-color); // override
+        background: var(--#{$prefix}navbar-nav-link-bg-hover-color); // add
+        border-color: var(--#{$prefix}navbar-nav-link-border-hover-color); // add
         &:focus {
           //add
-          color: $navbar-light-hover-color; //override
+          color: var(--#{$prefix}navbar-hover-color); //override
+          @if variable-exists($name: 'df-enableBranding2023') and $df-enableBranding2023 {
+            --#{$prefix}box-shadow-color: var(--#{$prefix}navbar-hover-color);
+            --#{$prefix}inner-box-shadow-color: var(--#{$prefix}navbar-nav-link-bg-hover-color);
+            --#{$prefix}navbar-nav-link-box-shadow: #{$df-navbar-nav-link-box-shadow};
+          }
         }
       }
-    }
 
-    .show > .nav-link,
-    .active > .nav-link,
-    .nav-link.show,
-    .nav-link.active {
-      &:not(.dropdown-toggle) {
-        border-color: $df-navbar-nav-link-active-color; // add
-        font-weight: $df-active-font-weight; // add
-      }
-      &:hover {
-        color: $navbar-light-hover-color; // override
-        &:focus {
-          color: $navbar-light-hover-color; // override
-        }
+      // Reinitialize border of nav-link button
+      &.btn {
+        border-top: inherit;
+        border-right: inherit;
+        border-left: inherit;
+        border-radius: inherit;
       }
     }
-  }
-  .navbar-text {
-    color: $df-navbarlight-text-color;
-  }
-  .navbar-toggler {
-    &:hover {
-      background-color: $df-navbar-light-toggler-hover-bg;
-    }
-  }
-}
-
-.navbar-dark {
-  // override (not all) and add
-  .navbar-nav {
-    .nav-link {
-      border-color: $df-navbar-dark-border-color; // add
-      &:hover {
-        color: $navbar-dark-hover-color; // add
-        background: $df-navbar-background-hover-color; // add
-        border-color: $df-navbar-dark-hover-focus-border-color; // add
-      }
+    .active > .nav-link,
+    .nav-link.active {
       &:focus {
-        // override
-        color: $df-navbar-dark-focus-color; // override
-        box-shadow: $btn-focus-box-shadow; // add
-        background: $df-navbar-background-hover-color; // add
-        border-color: $df-navbar-dark-hover-focus-border-color; // add
+        border-bottom: none;
+        &:before {
+          bottom: var(--#{$prefix}active-border-width);
+        }
       }
     }
 
+    // added
     .show > .nav-link,
     .active > .nav-link,
     .nav-link.show,
     .nav-link.active {
       &:not(.dropdown-toggle) {
-        border-color: $df-navbar-dark-active-border-color;
-        font-weight: $df-active-font-weight; // add
+        // todo add the before with a border 1px white
+        font-weight: var(--#{$prefix}active-font-weight); // add
+      }
+      &:hover {
+        color: var(--#{$prefix}navbar-hover-color); // override
+        &:focus {
+          color: var(--#{$prefix}navbar-hover-color); // override
+        }
       }
     }
-  }
-  .navbar-toggler {
-    &:hover {
-      background-color: $df-navbar-dark-toggler-hover-bg;
-    }
+    // end of added
   }
 }
 
 .navbar-toggler {
-  margin-left: $df-navbar-toggle-margin-left; // add
-  margin-right: $df-navbar-toggle-margin-right; // add
-  border: $df-navbar-toggle-border;
+  margin-left: var(--#{$prefix}navbar-toggle-margin-left); // add
+  margin-right: var(--#{$prefix}navbar-toggle-margin-right); // add
+  border: var(--#{$prefix}navbar-toggle-border);
+  min-width: var(--#{$prefix}navbar-toggle-icon-width);
+  min-height: var(--#{$prefix}navbar-toggle-icon-height);
   &:focus {
-    outline: none;
-    box-shadow: $df-focused-box-shadow;
+    outline: var(--#{$prefix}navbar-nav-link-outline);
+    box-shadow: var(--#{$prefix}navbar-toggle-box-shadow);
+  }
+  &:hover {
+    background-color: var(--#{$prefix}navbar-light-toggler-hover-bg);
   }
   // TODO extend if for the closing button of the side nav ??
 }
@@ -156,12 +301,27 @@
     $infix: breakpoint-infix($next, $grid-breakpoints);
 
     &#{$infix} {
-      @include media-breakpoint-down($breakpoint) {
+      @include media-breakpoint-down($next) {
         .navbar-nav {
+          .active > .nav-link,
+          .nav-link.active {
+            &:focus:before {
+              bottom: 0;
+              left: calc(var(--#{$prefix}active-border-width));
+            }
+            &:after {
+              content: "";
+              position: absolute;
+              top: 0;
+              bottom: 0;
+              left: 0;
+              right: 0;
+              border-left: var(--#{$prefix}navbar-link-active-border);
+              border-bottom: none;
+            }
+          }
           .nav-link {
-            border-left-width: $df-active-border-width;
-            border-left-style: $df-active-border-style;
-            padding-bottom: $df-navbar-nav-link-expanded-padding-bottom;
+            padding-bottom: var(--#{$prefix}navbar-nav-link-expanded-padding-bottom);
 
             // Reinitialize border of nav-link button
             &.btn {
@@ -173,14 +333,15 @@
           }
           .nav-item.dropdown {
             .dropdown-menu {
-              margin: $df-navbar-dropdown-menu-collapse-margin;
-              box-shadow: $df-navbar-dropdown-menu-collapse-box-shadow;
+              margin: var(--#{$prefix}navbar-dropdown-menu-collapse-margin);
+              // todo check
+              box-shadow: var(--#{$prefix}navbar-dropdown-menu-collapse-box-shadow);
             }
           }
           &:last-of-type {
             .nav-item.dropdown:last-of-type {
               .dropdown-menu {
-                margin-bottom: $df-navbar-dropdown-menu-collapse-last-item-margin-bottom;
+                margin-bottom: var(--#{$prefix}navbar-dropdown-menu-collapse-last-item-margin-bottom);
               }
             }
           }
@@ -191,10 +352,25 @@
         .navbar-nav {
           // add
           .nav-link {
-            border-bottom-width: $df-active-border-width; // add
-            border-bottom-style: $df-active-border-style; // add
-            padding-right: $df-navbar-nav-link-padding-right; // override
-            padding-left: $df-navbar-nav-link-padding-left; // override
+            padding-right: var(--#{$prefix}navbar-nav-link-padding-right);
+            padding-left: var(--#{$prefix}navbar-nav-link-padding-left);
+          }
+          .active > .nav-link,
+          .nav-link.active {
+            &:focus:before {
+              &:before {
+                bottom: var(--#{$prefix}active-border-width);
+              }
+            }
+            &:after {
+              content: "";
+              position: absolute;
+              top: 0;
+              bottom: 0;
+              left: 0;
+              right: 0;
+              border-bottom: var(--#{$prefix}navbar-link-active-border);
+            }
           }
         }
 
@@ -212,6 +388,7 @@
   }
 }
 
+
 // fix to remove 1px indentation below the white border in the navbar header
 @include media-breakpoint-up(lg) {
   .navbar-brand,
@@ -226,17 +403,22 @@
 
 // Superheader
 .df-superheader {
-  box-shadow: $df-navbar-boxshadow; // add
+  --#{$prefix}superheader-boxshadow: #{$df-navbar-boxshadow};
+  --#{$prefix}superheader-border-bottom: #{$df-superheader-border-bottom};
+  --#{$prefix}superheader-navbar-boxshadow: #{$df-superheader-navbar-boxshadow};
+  --#{$prefix}superheader-firstnav-padding: #{$df-superheader-firstnav-padding};
+  box-shadow: var(--#{$prefix}superheader-boxshadow); // add
   .navbar {
-    box-shadow: $df-superheader-navbar-boxshadow; // override above settings
+    box-shadow: var(--#{$prefix}superheader-navbar-boxshadow); // override above settings
   }
   header:first-of-type {
     //add
-    border-bottom: $df-superheader-border-bottom;
-    padding: $df-superheader-firstnav-padding;
+    border-bottom: var(--#{$prefix}superheader-border-bottom);
+    padding: var(--#{$prefix}superheader-firstnav-padding);
   }
 }
 
+// Flag Angular
 // Utils CSS class to have a scrollbar only on the content section
 router-outlet.df-scroll-content {
   & + * {
@@ -246,6 +428,7 @@ router-outlet.df-scroll-content {
   }
 }
 
+// Flag Angular
 .df-scroll-content:not(router-outlet) {
   overflow-y: auto;
   flex-grow: 1;

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

@@ -1,29 +1,29 @@
 @use 'sass:math';
 
-$df-active-border-width: 0.1875rem !default;
-$df-active-border-style: solid !default;
+$df-active-border-width: 0.1875rem !default; // 3px
+$df-navbar-link-active-border: $df-active-border-width solid var(--#{$prefix}navbar-color, #{shades-css-var('primary', 'bg-color')}) !default;
 $df-active-font-weight: bold !default;
-$df-navbar-boxshadow: $df-box-shadow !default;
-$df-navbar-height: 3.5rem !default; // 56px
+$df-navbar-boxshadow: var(--#{$prefix}box-shadow) !default;
+$df-navbar-height: 3.5rem !default; // 56px to be define at root level
 $df-navbarbrand-padding-right: 1rem !default;
 $df-navbarbrand-padding-left: 1rem !default;
 $df-navbarbrand-padding-top: math.div($df-navbar-height - ($navbar-brand-font-size * $line-height-base), 2) !default;
 $df-navbarbrand-padding-bottom: math.div($df-navbar-height - ($navbar-brand-font-size * $line-height-base), 2) !default;
 $df-navbarbrand-min-height: 
   $df-navbarbrand-padding-top + $df-navbarbrand-padding-bottom + $navbar-brand-font-size * $line-height-base !default;
-$df-navbarbrand-margin-right: 0px !default;
-$df-navbar-background-hover-color: $df-brand-primary-85 !default;
-$df-navbar-light-background-hover-color: $df-hover-bg-color !default;
-$df-navbarbrand-border-bottom-hover: $df-active-border-width $df-active-border-style $df-navbar-background-hover-color !default;
+$df-navbar-light-text-color: shades-css-var('primary', 'bg-color') !default;
+$df-navbar-light-text-hover-color: shades-css-var('primary', 'bg-hover-color') !default;
+$df-navbar-light-text-active-color: shades-css-var('primary', 'bg-active-color') !default;
+$df-navbar-nav-link-bg-hover-color: $df-hover-bg-color !default; // removing $df-hover-bg-color everywhere for this ?
 $df-navbar-nav-link-padding-right: $df-navbarbrand-padding-right !default;
 $df-navbar-nav-link-padding-left: $df-navbarbrand-padding-left !default;
 $df-navbar-nav-font-size: $font-size-base !default;
 $df-navbar-nav-link-padding-top: math.div($df-navbar-height - ($df-navbar-nav-font-size * $line-height-base), 2) !default;
-$df-navbar-nav-link-padding-bottom: 
-  math.div($df-navbar-height - ($df-navbar-nav-font-size * $line-height-base), 2) - $df-active-border-width !default;
+$df-navbar-nav-link-padding-bottom: $df-navbar-nav-link-padding-top !default;
 $df-navbar-nav-link-expanded-padding-bottom: $df-navbar-nav-link-padding-top !default;
-$df-navbar-light-border-hover-color: transparent !default;
-$df-navbar-light-border-color: transparent !default;
+$df-navbar-nav-link-border-hover-color: transparent !default;
+$df-navbar-nav-link-border-color: transparent !default;
+$df-navbar-nav-link-outline: none !default;
 $df-navbar-dark-border-color: transparent !default;
 $df-navbar-dark-hover-focus-border-color: transparent !default;
 
@@ -33,12 +33,11 @@ $df-navbar-font-family: 'Amadeus' !default;
 
 $df-navbar-dark-focus-color: $navbar-dark-color !default;
 $df-navbar-dark-active-border-color: $navbar-dark-color !default;
-$df-navbarlight-text-color: $gray-600 !default;
 $df-navbartext-white-space: nowrap !default;
 $df-navbar-collapse-overflow: visible !default;
 $df-navbartext-overflow: hidden !default;
 $df-navbartext-text-overflow: ellipsis !default;
-$df-navbartext-margin-left: $df-navbar-nav-link-padding-left !default;
+$df-navbartext-margin-start: $df-navbar-nav-link-padding-left !default;
 
 $df-superheader-border-bottom: $border-width solid $gray-300 !default;
 $df-superheader-navbar-boxshadow: none !default;
@@ -48,15 +47,27 @@ $df-superheader-firstnav-padding: $df-superheader-firstnav-padding-y $df-superhe
 $df-navbar-toggle-icon-width: 1.5rem !default;
 $df-navbar-toggle-icon-height: 1.5rem !default;
 $df-navbar-toggle-border: 0 !default;
-$df-navbar-nav-link-active-color: $primary !default;
+$df-navbar-nav-link-bg-focus-color: $body-bg !default;
 $df-navbar-nav-link-focus-color: $navbar-light-color !default;
-$df-navbar-nav-link-focus-bg: $white !default;
-$df-navbar-dark-toggler-hover-bg: df-getBGHoverColor() !default;
-$df-navbar-light-toggler-hover-bg: df-getBGSecondaryHoverColor() !default;
+$df-navbar-dark-toggler-hover-bg: shades-css-var('primary', 'bg-hover-color') !default;
+$df-navbar-light-toggler-hover-bg: shades-css-var('primary', 'bg-subtle-hover-color') !default;
 $df-navbar-dropdown-menu-collapse-margin: 0 $df-navbar-nav-link-padding-right 0 $df-navbar-nav-link-padding-left !default;
 $df-navbar-dropdown-menu-collapse-box-shadow: none !default;
 $df-navbar-dropdown-menu-collapse-last-item-margin-bottom: $df-navbar-nav-link-padding-bottom !default;
+$df-navbar-dropdown-btn-bg: transparent !default;
 
 $df-navbar-superheader-height: calc(
   #{$df-navbarbrand-min-height + 2 * $df-superheader-firstnav-padding-y + $df-navbar-height} + #{$border-width}
 ) !default;
+
+$df-navbar-nav-link-focus-box-shadow-width: $input-btn-focus-width !default;
+$df-navbar-toggle-focused-box-shadow: $df-focused-box-shadow !default;
+$df-navbar-nav-link-box-shadow: $df-focused-inset-box-shadow !default;
+$df-navbar-nav-link-box-shadow-opacity: $input-btn-focus-color-opacity !default;
+$df-navbar-nav-link-box-shadow-color: shades-rgba-css-var-with-opacity('primary', 'bg-color') !default;
+
+// CSS var for navbar height
+// Can't be wrapped as used elsewhere
+:root {
+  --#{$prefix}navbar-height: #{$df-navbar-height};
+}