vanilla-framework 2.36.0 → 3.0.0-beta.1

package/scss/_patterns_navigation.scss

@@ -4,18 +4,9 @@ $lightness-threshold: 70;
 
 @mixin vf-p-navigation {
   // placeholders
-  %navigation-row {
-    display: flex;
-    flex-direction: column;
-
-    @media (min-width: $breakpoint-navigation-threshold) {
-      flex-direction: row;
-    }
-  }
-
   %navigation-link-responsive-padding-vertical {
-    padding-bottom: $spv-inner--large;
-    padding-top: $spv-inner--large;
+    padding-bottom: $spv--large;
+    padding-top: $spv--large;
   }
 
   %navigation-link-responsive-padding-left {
@@ -27,7 +18,7 @@ $lightness-threshold: 70;
     }
 
     @media (min-width: $breakpoint-navigation-threshold) {
-      padding-left: $sph-inner;
+      padding-left: $sph--large;
     }
   }
 
@@ -40,7 +31,7 @@ $lightness-threshold: 70;
     }
 
     @media (min-width: $breakpoint-navigation-threshold) {
-      padding-right: $sph-inner;
+      padding-right: $sph--large;
     }
   }
 
@@ -78,7 +69,6 @@ $lightness-threshold: 70;
       }
     }
 
-    &,
     &:visited,
     &:focus,
     &:hover {
@@ -86,37 +76,11 @@ $lightness-threshold: 70;
     }
   }
 
-  %navigation-items {
-    list-style: none;
-    margin: -1px 0 0 0;
-    padding: 0;
-
-    @media (min-width: $breakpoint-navigation-threshold) {
-      display: flex;
-      flex-wrap: wrap;
-      margin-top: 0; // prevents bottom border of nav from moving 1px
-    }
-  }
-
-  %navigation-item {
-    @media (min-width: $breakpoint-navigation-threshold) {
-      $nav-link-max-width: 20em !default;
-
-      max-width: $nav-link-max-width;
-    }
-  }
-
-  %navigation-item-in-logo {
-    @include vf-focus;
-
-    display: flex;
-  }
-
   %vf-reset-horizontal-padding {
     padding-left: 0;
     padding-right: 0;
   }
-  // no colours
+
   .p-navigation {
     display: flex;
     flex-direction: column;
@@ -128,199 +92,334 @@ $lightness-threshold: 70;
       flex-direction: row;
     }
 
-    // navigation row
-    &__row {
-      @extend %fixed-width-container;
-      @extend %navigation-row;
-      @extend %vf-reset-horizontal-padding;
+    // p-search-box overrides
+    .p-search-box {
+      flex: 1 0 auto;
+      margin-left: map-get($grid-margin-widths, small);
+      margin-right: map-get($grid-margin-widths, small);
+      margin-top: -1px;
+      min-width: 10em;
+      order: -1;
+
+      @media (min-width: $threshold-4-6-col) {
+        margin-left: map-get($grid-margin-widths, medium);
+        margin-right: map-get($grid-margin-widths, medium);
+      }
 
-      &--full-width {
-        @extend %navigation-row;
+      @media (min-width: $breakpoint-navigation-threshold) {
+        // align baselines of menu items and input text
+        $input-gap-top: $spv--large - $spv-nudge;
 
-        width: 100%;
+        display: flex;
+        flex: 1 1 auto;
+        margin: $input-gap-top 0 auto auto;
+        max-width: 20rem;
+        min-width: initial;
+        order: 1;
       }
     }
 
-    @include deprecate('3.0.0', 'Use .p-navigation__row / .p-navigation__row--full-width instead') {
-      &.row {
-        @extend %navigation-row;
-      }
+    .u-image-position .u-image-position--right {
+      order: 2; // ensure it is to the right of search
+      // XXX: patch - override utility, as it positions absolutely, which leads to overlap on smaller screens.
+      // Should use flex instead; But that will require changing the markup
+      position: relative;
+      right: initial;
     }
+  }
 
-    &__item,
-    &__item--dropdown-toggle {
-      @extend %navigation-item;
+  // navigation row
+  .p-navigation__row,
+  .p-navigation__row--full-width {
+    display: flex;
+    flex-direction: column;
 
-      // this needs to be nested in __item until in 3.0 we remove deprecated __link styles
-      .p-navigation__link {
-        @extend %navigation-link;
-      }
+    @media (min-width: $breakpoint-navigation-threshold) {
+      flex-direction: row;
     }
+  }
 
-    // navigation logo
-    &__banner {
-      @extend %navigation-link-responsive-padding-left;
+  .p-navigation__row {
+    @extend %fixed-width-container;
+    @extend %vf-reset-horizontal-padding;
+  }
 
-      display: flex;
-      flex: 0 0 auto;
-      justify-content: space-between;
-      padding-right: 0;
+  .p-navigation__row--full-width {
+    width: 100%;
+  }
 
-      @media (min-width: $threshold-4-6-col) {
-        padding-right: 0;
-      }
+  .p-navigation__item,
+  .p-navigation__item--dropdown-toggle {
+    @media (min-width: $breakpoint-navigation-threshold) {
+      $nav-link-max-width: 20em !default;
 
-      @media (min-width: $breakpoint-navigation-threshold) {
-        padding-left: map-get($grid-margin-widths, small);
-      }
+      max-width: $nav-link-max-width;
+    }
+  }
+
+  .p-navigation__link {
+    @extend %navigation-link;
+  }
+
+  // navigation logo
+  .p-navigation__banner {
+    @extend %navigation-link-responsive-padding-left;
+
+    display: flex;
+    flex: 0 0 auto;
+    justify-content: space-between;
+    padding-right: 0;
+
+    @media (min-width: $threshold-4-6-col) {
+      padding-right: 0;
+    }
+
+    @media (min-width: $breakpoint-navigation-threshold) {
+      padding-left: map-get($grid-margin-widths, small);
     }
+  }
+
+  .p-navigation__logo {
+    display: flex;
+    flex: 0 0 auto;
+    height: 3.5rem;
+    margin: 0 $sph--large 0 0;
+
+    .p-navigation__item {
+      @include vf-focus;
 
-    &__logo {
       display: flex;
-      flex: 0 0 auto;
-      height: 3.5rem;
-      margin: 0 $sph-inner 0 0;
+    }
+  }
 
-      .p-navigation__item {
-        @extend %navigation-item-in-logo;
-      }
+  .p-navigation__image {
+    align-self: center;
+    max-height: 2rem;
+    min-height: 1.5rem;
+  }
 
-      @include deprecate('3.0.0', 'Use .p-navigation__items, .p-navigation__item, .p-navigation__link instead.') {
-        .p-navigation__link {
-          @extend %navigation-item-in-logo;
-        }
-      }
+  // navigation items
+  .p-navigation__nav {
+    display: none;
+    flex-direction: column;
+
+    @media (min-width: $breakpoint-navigation-threshold) {
+      display: flex;
+      flex-direction: row;
+      justify-content: space-between;
+      margin-right: map-get($grid-margin-widths, large);
+      width: 100%;
     }
+  }
+
+  .p-navigation__items {
+    list-style: none;
+    margin: -1px 0 0 0;
+    padding: 0;
 
-    &__image {
-      align-self: center;
-      max-height: 2rem;
-      min-height: 1.5rem;
+    @media (min-width: $breakpoint-navigation-threshold) {
+      display: flex;
+      flex-wrap: wrap;
+      margin-top: 0; // prevents bottom border of nav from moving 1px
     }
+  }
+
+  // small screen navigation toggles
+  .p-navigation__toggle--close {
+    display: none;
+  }
+
+  .p-navigation__toggle--open {
+    display: block;
 
-    // navigation items
-    &__nav {
+    @media (min-width: $breakpoint-navigation-threshold) {
       display: none;
-      flex-direction: column;
+    }
+  }
 
-      @media (min-width: $breakpoint-navigation-threshold) {
-        display: flex;
-        flex-direction: row;
-        justify-content: space-between;
-        margin-right: map-get($grid-margin-widths, large);
-        width: 100%;
-      }
+  .p-navigation__toggle--open,
+  .p-navigation__toggle--close {
+    @extend %navigation-link-responsive-padding-horizontal;
+    @extend %navigation-link-responsive-padding-vertical;
+    @include vf-focus;
+
+    margin: 0 0 auto 0;
+
+    &,
+    &:visited,
+    &:focus,
+    &:hover {
+      text-decoration: none;
     }
+  }
 
-    &__items {
-      @extend %navigation-items;
+  .p-navigation:target {
+    &::after {
+      display: none;
     }
 
-    @include deprecate('3.0.0', 'Use .p-navigation__items, .p-navigation__item, .p-navigation__link classes instead.') {
-      &__link {
-        @extend %navigation-item;
+    .p-navigation__nav {
+      display: flex;
+    }
 
-        // stylelint-disable-next-line selector-max-type -- this is deprecated use, will be removed
-        & > a {
-          @extend %navigation-link;
-        }
-      }
+    .p-navigation__toggle--open {
+      display: none;
+    }
+
+    .p-navigation__toggle--close {
+      display: block;
 
-      &__links {
-        @extend %navigation-items;
+      @media (min-width: $breakpoint-navigation-threshold) {
+        display: none;
       }
     }
+  }
 
-    // p-search-box overrides
+  // SEARCH
+
+  // on mobile screens search box is visible inside of the mobile navigation dropdown
+  .p-navigation__search {
+    padding-top: $spv--large;
+
+    // allow search box to take full width
     .p-search-box {
-      flex: 1 0 auto;
-      margin-left: map-get($grid-margin-widths, small);
-      margin-right: map-get($grid-margin-widths, small);
-      margin-top: -1px;
-      min-width: 10em;
-      order: -1;
+      max-width: none;
+    }
+  }
 
-      @media (min-width: $threshold-4-6-col) {
-        margin-left: map-get($grid-margin-widths, medium);
-        margin-right: map-get($grid-margin-widths, medium);
-      }
+  // on mobile screens both search toggle and overlay are not used and hidden from view
+  .p-navigation__link--search-toggle {
+    @extend %navigation-link;
 
-      @media (min-width: $breakpoint-navigation-threshold) {
-        // align baselines of menu items and input text
-        $input-gap-top: $spv-inner--large - $spv-nudge;
+    display: none;
+    height: 100%; // keep the height of the navigation when 'Search' label is hidden
+    padding-left: 0; // on small screens label is hidden, so we remove left padding as well
+    padding-right: 2 * $sph--small + map-get($icon-sizes, default);
+    position: relative;
+  }
 
-        display: flex;
-        flex: 1 1 auto;
-        margin: $input-gap-top 0 auto auto;
-        max-width: 20rem;
-        min-width: initial;
-        order: 1;
-      }
-    }
+  .p-navigation__search-overlay {
+    display: none;
+  }
 
-    &__toggle {
-      &--close {
+  // the expanding search box is only visible on large screens in navigation bar
+  @media (min-width: $breakpoint-navigation-threshold) {
+    .p-navigation__link--search-toggle {
+      display: block;
+
+      // hide "search" label on small screens (only show the icon)
+      .p-navigation__search-label {
         display: none;
       }
 
-      &--open {
+      // show both label and icon on large screens
+      @media (min-width: $breakpoint-large) {
+        padding-left: $sph--large;
+
+        .p-navigation__search-label {
+          display: initial;
+        }
+      }
+
+      &::after {
+        background-position: center;
+        background-repeat: no-repeat;
+        background-size: contain;
+        content: '';
         display: block;
+        height: $spv--large;
+        pointer-events: none;
+        position: absolute;
+        right: map-get($grid-margin-widths, small);
+        text-indent: calc(100% + 10rem);
+        top: calc(#{$spv--large} + #{map-get($nudges, nudge--x-small)});
+        width: map-get($icon-sizes, default);
+
+        @media (min-width: $threshold-4-6-col) {
+          right: map-get($grid-margin-widths, medium);
+        }
 
         @media (min-width: $breakpoint-navigation-threshold) {
-          display: none;
+          right: calc(#{$sph--small} + 1px); // 1px for the border on selects. this aligns it with any selects underneath
         }
       }
+    }
 
-      &--open,
-      &--close {
-        @extend %navigation-link-responsive-padding-horizontal;
-        @extend %navigation-link-responsive-padding-vertical;
-        @include vf-focus;
+    .p-navigation__search {
+      align-items: center;
+      display: none;
+      flex-grow: 1;
+      padding: 0;
+    }
 
-        margin: 0 0 auto 0;
+    .p-navigation__search-overlay {
+      @include vf-animation(opacity, snap);
 
-        &,
-        &:visited,
-        &:focus,
-        &:hover {
-          text-decoration: none;
-        }
-      }
+      background-color: $colors--light-theme--background-overlay;
+      bottom: 0;
+      display: block;
+      height: 100%;
+      left: 0;
+      opacity: 0;
+      pointer-events: none;
+      position: fixed;
+      right: 0;
+      top: 0;
+      width: 100%;
+      z-index: 59;
     }
 
-    // small screen navigation toggles
-    &:target {
-      &::after {
+    // when navigation search is expanded
+    .p-navigation.has-search-open {
+      // hide all navigation items (including search toggle)
+      .p-navigation__items {
         display: none;
       }
 
-      .p-navigation__nav {
+      // show expanded search box
+      .p-navigation__search {
         display: flex;
       }
 
-      .p-navigation__toggle--open {
-        display: none;
+      // fade in search overlay
+      .p-navigation__search-overlay {
+        opacity: 0.5;
+        pointer-events: all;
       }
 
-      .p-navigation__toggle--close {
-        display: block;
-
-        @media (min-width: $breakpoint-navigation-threshold) {
-          display: none;
-        }
+      // make sure search in navigation renders on top of the overlay
+      .p-navigation__nav {
+        z-index: 60;
       }
     }
+  }
 
-    .u-image-position .u-image-position--right {
-      order: 2; // ensure it is to the right of search
-      // XXX: patch - override utility, as it positions absolutely, which leads to overlap on smaller screens.
-      // Should use flex instead; But that will require changing the markup
-      position: relative;
-      right: initial;
+  // DROPDOWNS
+  .p-navigation__dropdown,
+  .p-navigation__dropdown--right {
+    @extend %vf-has-box-shadow;
+    @extend %vf-has-round-corners;
+
+    display: none;
+    margin: 0;
+    min-width: 100%;
+    padding: 0;
+    z-index: 5;
+
+    @media (min-width: $breakpoint-navigation-threshold) {
+      position: absolute;
+      // padding applied to .p-navigation__link + line-heigh of the anchor text inside
+      top: $spv--large * 2 + map-get($line-heights, default-text);
+    }
+
+    @media (max-width: $breakpoint-navigation-threshold - 1) {
+      box-shadow: none;
     }
   }
 
-  // DROPDOWNS
+  .p-navigation__dropdown--right {
+    right: 0;
+  }
 
   .p-navigation__item--dropdown-toggle {
     position: relative;
@@ -331,12 +430,12 @@ $lightness-threshold: 70;
       background-size: contain;
       content: '';
       display: block;
-      height: $spv-inner--large;
+      height: $spv--large;
       pointer-events: none;
       position: absolute;
       right: map-get($grid-margin-widths, small);
       text-indent: calc(100% + 10rem);
-      top: calc(#{$spv-inner--large} + #{map-get($nudges, nudge--x-small)});
+      top: calc(#{$spv--large} + #{map-get($nudges, nudge--x-small)});
       width: map-get($icon-sizes, default);
 
       @media (min-width: $threshold-4-6-col) {
@@ -344,7 +443,7 @@ $lightness-threshold: 70;
       }
 
       @media (min-width: $breakpoint-navigation-threshold) {
-        right: calc(#{$sph-inner--small} + 1px); // 1px for the border on selects. this aligns it with any selects underneath
+        right: calc(#{$sph--small} + 1px); // 1px for the border on selects. this aligns it with any selects underneath
       }
     }
 
@@ -361,47 +460,21 @@ $lightness-threshold: 70;
 
     .p-navigation__link {
       // add padding to accommodate icon
-      padding-right: 2 * $sph-inner--small + map-get($icon-sizes, default);
+      padding-right: 2 * $sph--small + map-get($icon-sizes, default);
     }
   }
 
-  .p-navigation__dropdown,
-  .p-navigation__dropdown--right {
-    @extend %vf-has-box-shadow;
-    @extend %vf-has-round-corners;
-
-    display: none;
-    margin: 0;
-    min-width: 100%;
-    padding: 0;
-    z-index: 5;
-
-    @media (min-width: $breakpoint-navigation-threshold) {
-      position: absolute;
-      // padding applied to .p-navigation__link + line-heigh of the anchor text inside
-      top: $spv-inner--large * 2 + map-get($line-heights, default-text);
-    }
-
-    @media (max-width: $breakpoint-navigation-threshold - 1) {
-      box-shadow: none;
-    }
-  }
-
-  .p-navigation__dropdown--right {
-    right: 0;
-  }
-
   .p-navigation__dropdown-item {
     @extend %navigation-link-responsive-padding-horizontal;
 
     display: block;
-    padding-bottom: $spv-inner--small;
-    padding-top: $spv-inner--small;
+    padding-bottom: $spv--small;
+    padding-top: $spv--small;
     white-space: nowrap;
 
     @media (min-width: $breakpoint-navigation-threshold) {
-      padding-bottom: $spv-inner--medium;
-      padding-top: $spv-inner--medium;
+      padding-bottom: $spv--medium;
+      padding-top: $spv--medium;
     }
 
     &,
@@ -420,7 +493,7 @@ $lightness-threshold: 70;
     }
 
     .p-navigation.is-light {
-      @include vf-navigation-light-theme(true);
+      @include vf-navigation-light-theme;
     }
   } @else {
     .p-navigation {
@@ -428,7 +501,7 @@ $lightness-threshold: 70;
     }
 
     .p-navigation.is-dark {
-      @include vf-navigation-dark-theme(true);
+      @include vf-navigation-dark-theme;
     }
   }
 }
@@ -448,20 +521,11 @@ $lightness-threshold: 70;
 ) {
   background-color: $color-navigation-background;
 
-  %navigation-link-before {
-    // separator color on small screens
-    background: $color-navigation-separator;
-  }
-
-  %navigation-link-hover {
-    background-color: $color-navigation-background--hover;
-  }
-
-  %navigation-link-active {
-    background-color: $color-navigation-background--active;
-  }
-
-  %navigation-link-theme {
+  .p-navigation__link,
+  .p-navigation__link--search-toggle,
+  .p-navigation__toggle--close,
+  .p-navigation__toggle--open,
+  .p-navigation__dropdown-item {
     &,
     &:hover,
     &:visited,
@@ -470,127 +534,68 @@ $lightness-threshold: 70;
     }
 
     &:hover {
-      @extend %navigation-link-hover;
+      background-color: $color-navigation-background--hover;
     }
 
     &:active {
-      @extend %navigation-link-active;
-    }
-  }
-
-  %navigation-link-selected {
-    @extend %navigation-link-hover;
-
-    @include vf-highlight-bar($color-navigation-highlight, left, true);
-
-    @media (min-width: $breakpoint-navigation-threshold) {
-      @include vf-highlight-bar($color-navigation-highlight, bottom, false);
+      background-color: $color-navigation-background--active;
     }
   }
 
-  [class*="p-navigation__item"] > .p-navigation__link, // remove nesting in 3.0 when deprecated __link styles are removed
-  .p-navigation__toggle--close,
-  .p-navigation__toggle--open {
-    @extend %navigation-link-theme;
-  }
-
   .p-navigation__item--dropdown-toggle {
     &::after {
       @include vf-icon-chevron($color-navigation-icon);
     }
 
     &.is-active > .p-navigation__link {
-      @extend %navigation-link-active;
+      background-color: $color-navigation-background--active;
     }
   }
 
+  .p-navigation__item .p-navigation__link--search-toggle::after {
+    @include vf-icon-search($color-navigation-icon);
+  }
+
   .p-navigation__dropdown,
   .p-navigation__dropdown--right {
     background-color: $color-navigation-background;
   }
 
-  .p-navigation__dropdown-item {
-    @extend %navigation-link-theme;
-  }
-
   [class*='p-navigation__item'].is-selected > .p-navigation__link {
-    @extend %navigation-link-selected;
-  }
-
-  [class*='p-navigation__item'] > .p-navigation__link::before {
-    // remove nesting in 3.0 when deprecated __link styles are removed
-    @extend %navigation-link-before;
-  }
+    background-color: $color-navigation-background--hover;
 
-  @include deprecate('3.0.0', 'Use .p-navigation__items, .p-navigation__item, .p-navigation__link classes instead.') {
-    // stylelint-disable selector-max-type -- this is deprecated use, will be removed
-    .p-navigation__link > a {
-      @extend %navigation-link-theme;
-    }
+    @include vf-highlight-bar($color-navigation-highlight, left, true);
 
-    .p-navigation__link.is-selected > a {
-      @extend %navigation-link-selected;
+    @media (min-width: $breakpoint-navigation-threshold) {
+      @include vf-highlight-bar($color-navigation-highlight, bottom, false);
     }
+  }
 
-    .p-navigation__link > a::before {
-      @extend %navigation-link-before;
-    }
-    // stylelint-enable selector-max-type
+  .p-navigation__link::before {
+    background: $color-navigation-separator;
   }
 }
 
-@mixin vf-navigation-light-theme($override-default: false) {
-  @if ($override-default) {
-    @include vf-navigation-theme(
-      $color-navigation-text: $colors--light-theme--text-default,
-      $color-navigation-background: $colors--light-theme--background-default,
-      $color-navigation-background--hover: $colors--light-theme--background-alt,
-      $color-navigation-background--active: $colors--light-theme--background-active,
-      $color-navigation-highlight: $color-accent,
-      $color-navigation-separator: $colors--light-theme--border-low-contrast,
-      $color-navigation-icon: $colors--light-theme--text-muted
-    );
-  } @else {
-    // take $color-navigation-background (that can be overridden) into account
-    $color-navigation-background: $colors--light-theme--background-default !default;
-    $color-navigation-text: if(lightness($color-navigation-background) > $lightness-threshold, $colors--light-theme--text-default, $colors--dark-theme--text-default) !default;
-
-    @include vf-navigation-theme(
-      $color-navigation-text: $color-navigation-text,
-      $color-navigation-background: $color-navigation-background,
-      $color-navigation-background--hover: $colors--light-theme--background-alt,
-      $color-navigation-background--active: $colors--light-theme--background-active,
-      $color-navigation-highlight: $color-accent,
-      $color-navigation-separator: $colors--light-theme--border-low-contrast,
-      $color-navigation-icon: $colors--light-theme--text-muted
-    );
-  }
+@mixin vf-navigation-light-theme {
+  @include vf-navigation-theme(
+    $color-navigation-text: $colors--light-theme--text-default,
+    $color-navigation-background: $colors--light-theme--background-default,
+    $color-navigation-background--hover: $colors--light-theme--background-alt,
+    $color-navigation-background--active: $colors--light-theme--background-active,
+    $color-navigation-highlight: $color-accent,
+    $color-navigation-separator: $colors--light-theme--border-low-contrast,
+    $color-navigation-icon: $colors--light-theme--text-muted
+  );
 }
 
-@mixin vf-navigation-dark-theme($override-default: false) {
-  @if ($override-default) {
-    @include vf-navigation-theme(
-      $color-navigation-text: $colors--dark-theme--text-default,
-      $color-navigation-background: $colors--dark-theme--background-default,
-      $color-navigation-background--hover: $colors--dark-theme--background-hover,
-      $color-navigation-background--active: $colors--dark-theme--background-active,
-      $color-navigation-highlight: $color-accent,
-      $color-navigation-separator: $colors--dark-theme--border-low-contrast,
-      $color-navigation-icon: $colors--dark-theme--text-muted
-    );
-  } @else {
-    // take $color-navigation-background (that can be overridden) into account
-    $color-navigation-background: $colors--dark-theme--background-default !default;
-    $color-navigation-text: if(lightness($color-navigation-background) > $lightness-threshold, $colors--light-theme--text-default, $colors--dark-theme--text-default) !default;
-
-    @include vf-navigation-theme(
-      $color-navigation-text: $color-navigation-text,
-      $color-navigation-background: $color-navigation-background,
-      $color-navigation-background--hover: $colors--dark-theme--background-hover,
-      $color-navigation-background--active: $colors--dark-theme--background-active,
-      $color-navigation-highlight: $color-accent,
-      $color-navigation-separator: $colors--dark-theme--border-low-contrast,
-      $color-navigation-icon: #999
-    );
-  }
+@mixin vf-navigation-dark-theme {
+  @include vf-navigation-theme(
+    $color-navigation-text: $colors--dark-theme--text-default,
+    $color-navigation-background: $colors--dark-theme--background-default,
+    $color-navigation-background--hover: $colors--dark-theme--background-hover,
+    $color-navigation-background--active: $colors--dark-theme--background-active,
+    $color-navigation-highlight: $color-accent,
+    $color-navigation-separator: $colors--dark-theme--border-low-contrast,
+    $color-navigation-icon: $colors--dark-theme--text-muted
+  );
 }