@design-factory/design-factory 20.0.1 → 21.0.0-next.0

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

@@ -1,563 +0,0 @@
-@use 'sass:map';
-@use 'sass:meta';
-@import 'navbar.mixins';
-
-// 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 {
-  --#{$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: #{$df-navbar-light-brand-color};
-  --#{$prefix}navbar-brand-hover-color: #{$df-navbar-light-brand-hover-color};
-  --#{$prefix}bg-color-opacity: #{$df-navbar-nav-link-box-shadow-opacity};
-  --#{$prefix}box-shadow-color: #{$df-navbar-nav-link-box-shadow-color};
-
-  @if meta.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-toggler-icon-bg: none;
-    --#{$prefix}navbar-nav-link-bg-hover-color: var(--#{$prefix}navbar-color-alt-hovered-background);
-    --#{$prefix}navbar-nav-link-border-hover-color: var(--#{$prefix}navbar-color-alt-hovered-border);
-    background-color: var(--#{$prefix}navbar-color-inert-alt-background);
-  }
-
-  --#{$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: var(--#{$prefix}navbartext-white-space);
-    overflow: var(--#{$prefix}navbartext-overflow);
-    text-overflow: var(--#{$prefix}navbartext-text-overflow);
-    margin-inline-start: var(--#{$prefix}navbartext-margin-start);
-    @if meta.variable-exists($name: 'df-enableBranding2023') and $df-enableBranding2023 {
-      color: var(--#{$prefix}navbar-color-inert-subtext-foreground);
-    }
-  }
-
-  .nav-item.dropdown {
-    .btn {
-      --#{$prefix}btn-bg: var(--#{$prefix}navbar-dropdown-btn-bg);
-    }
-  }
-
-  > .navbar-collapse {
-    overflow: var(--#{$prefix}navbar-collapse-overflow);
-  }
-
-  .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 {
-    border-bottom: 0;
-    position: relative;
-    display: flex;
-    align-items: center;
-    font-weight: $df-navbar-brand-font-weight;
-    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);
-
-    &:focus-visible {
-      box-shadow: var(--#{$prefix}navbar-nav-link-box-shadow);
-    }
-
-    @if meta.variable-exists($name: 'df-enableBranding2023') and $df-enableBranding2023 {
-      background-color: var(--#{$prefix}navbar-color-productName-alt-default-background);
-      @include navlink(--#{$prefix}navbar-color-productName-alt);
-    } @else {
-      &:hover {
-        background-color: inherit;
-      }
-    }
-  }
-
-  @if meta.variable-exists($name: 'df-enableBranding2023') and $df-enableBranding2023 {
-    // in DF 21 we will only support main and alt variants, not bg-success and stuff
-    &.bg-dark-primary {
-      --#{$prefix}navbar-color: var(--#{$prefix}navbar-color-inert-main-foreground);
-      --#{$prefix}navbar-hover-color: var(--#{$prefix}navbar-color-inert-main-foreground);
-      --#{$prefix}navbar-active-color: var(--#{$prefix}navbar-color-inert-main-foreground);
-      --#{$prefix}navbar-brand-color: var(--#{$prefix}navbar-color-productName-main-default-foreground);
-      --#{$prefix}navbar-brand-hover-color: var(--#{$prefix}navbar-color-productName-main-hovered-foreground);
-      --#{$prefix}navbar-nav-link-bg-hover-color: var(--#{$prefix}navbar-color-main-hovered-background);
-      --#{$prefix}navbar-nav-link-border-hover-color: var(--#{$prefix}navbar-color-main-hovered-border);
-      --#{$prefix}navbar-nav-link-bg-focus-color: var(--#{$prefix}navbar-color-inert-main-background);
-      --#{$prefix}inner-box-shadow-color: var(--#{$prefix}navbar-color-inert-main-background);
-      background-color: var(--#{$prefix}navbar-color-inert-main-background) !important;
-
-      .navbar-text {
-        color: var(--#{$prefix}navbar-color-inert-main-foreground);
-      }
-
-      .navbar-brand {
-        background-color: var(--#{$prefix}navbar-color-inert-main-background);
-        @include navlink(--#{$prefix}navbar-color-productName-main);
-      }
-
-      .navbar-nav {
-        .nav-link {
-          &.dropdown-toggle {
-            @include navlink(--#{$prefix}navbar-color-dropdown-main);
-          }
-
-          &:not(.dropdown-toggle) {
-            @include navlink(--#{$prefix}navbar-color-main);
-          }
-        }
-
-        .show > .nav-link,
-        .active > .nav-link,
-        .nav-link.show,
-        .nav-link.active {
-          &.dropdown-toggle {
-            @include navlink-active(--#{$prefix}navbar-color-dropdown-main);
-          }
-
-          &:not(.dropdown-toggle) {
-            @include navlink-active(--#{$prefix}navbar-color-main);
-          }
-        }
-      }
-
-      .navbar-toggler {
-        &:focus {
-          box-shadow: none;
-        }
-
-        @include navlink(--#{$prefix}navbar-color-main);
-      }
-    }
-  } @else {
-    @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};
-
-        // override default theme
-        --#{$prefix}navbar-nav-link-focus-color: #{$text-color};
-        --#{$prefix}navbar-nav-link-bg-focus-color: #{shades-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
-        --#{$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 {
-            box-shadow: none;
-          }
-
-          &:focus-visible {
-            --#{$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')};
-          }
-        }
-      }
-    }
-
-    //Override link behaviour since tokens are missing
-    .nav-link {
-      color: var(--#{$prefix}nav-link-color);
-    }
-    .navbar-brand {
-      color: var(--#{$prefix}navbar-brand-color);
-      &:hover {
-        color: var(--#{$prefix}navbar-brand-hover-color);
-      }
-    }
-  }
-
-  // default without bg-X class
-  .navbar-nav {
-    // add
-    .nav-link {
-      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-visible {
-        // 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: 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-visible {
-          //add
-          color: var(--#{$prefix}navbar-hover-color); //override
-          @if meta.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};
-          }
-        }
-      }
-
-      @if meta.variable-exists($name: 'df-enableBranding2023') and $df-enableBranding2023 {
-        &.dropdown-toggle {
-          @include navlink(--#{$prefix}navbar-color-dropdown-alt);
-        }
-        &:not(.dropdown-toggle) {
-          @include navlink(--#{$prefix}navbar-color-alt);
-        }
-      }
-
-      // Reinitialize border of nav-link button
-      &.btn {
-        border-top: inherit;
-        border-right: inherit;
-        border-left: inherit;
-        border-radius: inherit;
-      }
-
-      span[data-text] {
-        text-align: center;
-        &::before {
-          content: attr(data-text);
-          font-weight: var(--#{$prefix}typo-weight-bold);
-          visibility: hidden;
-          height: 0;
-          overflow: hidden;
-          display: block;
-        }
-      }
-    }
-
-    .active > .nav-link,
-    .nav-link.active {
-      &:focus-visible {
-        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) {
-        // todo add the before with a border 1px white
-        font-weight: var(--#{$prefix}active-font-weight); // add
-      }
-
-      @if meta.variable-exists($name: 'df-enableBranding2023') and $df-enableBranding2023 {
-        &.dropdown-toggle {
-          @include navlink-active(--#{$prefix}navbar-color-dropdown-alt);
-        }
-        &:not(.dropdown-toggle) {
-          @include navlink-active(--#{$prefix}navbar-color-alt);
-        }
-      } @else {
-        &:hover {
-          color: var(--#{$prefix}navbar-hover-color); // override
-          &:focus-visible {
-            color: var(--#{$prefix}navbar-hover-color); // override
-          }
-        }
-      }
-    }
-
-    // end of added
-  }
-}
-
-.navbar-toggler {
-  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 {
-    box-shadow: none;
-  }
-
-  &:focus-visible {
-    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);
-  }
-
-  @if meta.variable-exists($name: 'df-enableBranding2023') and $df-enableBranding2023 {
-    @include navlink(--#{$prefix}navbar-color-alt);
-  }
-  // TODO extend if for the closing button of the side nav ??
-}
-
-// Generate series of `.navbar-expand-*` responsive classes for configuring
-// where your navbar collapses.
-.navbar-expand {
-  // override
-  @each $breakpoint in map.keys($grid-breakpoints) {
-    $next: breakpoint-next($breakpoint, $grid-breakpoints);
-    $infix: breakpoint-infix($next, $grid-breakpoints);
-
-    &#{$infix} {
-      @include media-breakpoint-down($next) {
-        .navbar-nav {
-          .active > .nav-link,
-          .nav-link.active {
-            &:focus-visible: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 {
-            padding-bottom: var(--#{$prefix}navbar-nav-link-expanded-padding-bottom);
-
-            // Reinitialize border of nav-link button
-            &.btn {
-              height: inherit;
-              border-bottom: inherit;
-              width: 100%;
-              justify-content: inherit;
-            }
-          }
-
-          .nav-item.dropdown {
-            .dropdown-menu {
-              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: var(--#{$prefix}navbar-dropdown-menu-collapse-last-item-margin-bottom);
-              }
-            }
-          }
-        }
-      }
-
-      @include media-breakpoint-up($next) {
-        .navbar-nav {
-          // add
-          .nav-link {
-            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-visible: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);
-            }
-          }
-        }
-
-        .navbar-collapse.d {
-          @each $breakpoint2 in map.keys($grid-breakpoints) {
-            $next2: breakpoint-next($breakpoint2, $grid-breakpoints);
-            $infix2: breakpoint-infix($next2, $grid-breakpoints);
-            &#{$infix2}-none {
-              display: none !important; // override
-            }
-          }
-        }
-      }
-    }
-  }
-}
-
-// fix to remove 1px indentation below the white border in the navbar header
-@include media-breakpoint-up(lg) {
-  .navbar-brand,
-  .navbar-collapse,
-  .navbar-nav,
-  .navbar-nav .nav-item,
-  .navbar-nav .nav-link,
-  .navbar-nav .dropdown-toggle {
-    height: 100%;
-  }
-}
-
-// Superheader
-.df-superheader {
-  --#{$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: var(--#{$prefix}superheader-navbar-boxshadow); // override above settings
-  }
-
-  header:first-of-type {
-    //add
-    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 {
-  & + * {
-    overflow-y: auto;
-    flex-grow: 1;
-    flex-basis: 0;
-  }
-}
-
-// Flag Angular
-.df-scroll-content:not(router-outlet) {
-  overflow-y: auto;
-  flex-grow: 1;
-  flex-basis: 0;
-}

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

@@ -1,102 +0,0 @@
-$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: 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: calc(($df-navbar-height - ($navbar-brand-font-size * $line-height-base)) / 2) !default;
-$df-navbarbrand-padding-bottom: calc(($df-navbar-height - ($navbar-brand-font-size * $line-height-base)) / 2) !default;
-$df-navbarbrand-min-height: calc(
-  $df-navbarbrand-padding-top + $df-navbarbrand-padding-bottom + $navbar-brand-font-size * $line-height-base
-) !default;
-$df-navbar-light-text-color: shades-css-var-brand2023(
-  'navbar-color-inert-alt-foreground',
-  'primary',
-  'bg-color'
-) !default;
-$df-navbar-light-text-hover-color: shades-css-var-brand2023(
-  'navbar-color-inert-alt-foreground',
-  'primary',
-  'bg-hover-color'
-) !default;
-$df-navbar-light-text-active-color: shades-css-var-brand2023(
-  'navbar-color-inert-alt-foreground',
-  'primary',
-  'bg-active-color'
-) !default;
-$df-navbar-light-brand-color: shades-css-var-brand2023(
-  'navbar-color-productName-alt-default-foreground',
-  'primary',
-  'bg-color'
-) !default;
-$df-navbar-light-brand-hover-color: shades-css-var-brand2023(
-  'navbar-color-productName-alt-hovered-foreground',
-  'primary',
-  'bg-hover-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: calc(
-  ($df-navbar-height - ($df-navbar-nav-font-size * $line-height-base)) / 2
-) !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-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;
-
-$df-navbar-toggle-margin-left: 1rem !default;
-$df-navbar-toggle-margin-right: 1rem !default;
-$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-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-start: $df-navbar-nav-link-padding-left !default;
-
-$df-superheader-border-bottom: $border-width solid $gray-300 !default;
-$df-superheader-navbar-boxshadow: none !default;
-$df-superheader-firstnav-padding-y: 0rem !default;
-$df-superheader-firstnav-padding-x: 0rem !default;
-$df-superheader-firstnav-padding: $df-superheader-firstnav-padding-y $df-superheader-firstnav-padding-x !default;
-$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-bg-focus-color: $body-bg !default;
-$df-navbar-nav-link-focus-color: $navbar-light-color !default;
-$df-navbar-dark-toggler-hover-bg: shades-css-var('primary', 'bg-hover-color') !default;
-$df-navbar-light-toggler-hover-bg: shades-css-var-brand2023(
-  'navbar-color-alt-hovered-background',
-  '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(
-  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;
-$df-navbar-brand-font-weight: inherit !default;
-
-// CSS var for navbar height
-// Can't be wrapped as used elsewhere
-:root {
-  --#{$prefix}navbar-height: #{$df-navbar-height};
-}