@design-factory/design-factory 19.1.1 → 20.0.0-next.0

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

@@ -1,5 +1,7 @@
 @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};
@@ -11,6 +13,7 @@
     --#{$prefix}navbar-height: #{$df-navbar-superheader-height};
   }
 }
+
 // CSS for nav
 .navbar {
   --#{$prefix}active-border-width: #{$df-active-border-width};
@@ -65,16 +68,18 @@
   --#{$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}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};
 
-  // Is it still used ?
-  --#{$prefix}navbar-nav-link-box-shadow-color-rgb: #{shades-rgb-css-var('primary', 'bg-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};
@@ -82,15 +87,14 @@
 
   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);
-    @include ltr {
-      margin-left: var(--#{$prefix}navbartext-margin-start);
-    }
-    @include rtl {
-      margin-right: var(--#{$prefix}navbartext-margin-start);
+    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);
     }
   }
 
@@ -111,9 +115,11 @@
   }
 
   .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
@@ -122,80 +128,144 @@
     min-height: var(--#{$prefix}navbarbrand-min-height);
     outline: var(--#{$prefix}navbar-nav-link-outline);
 
-    &:focus {
+    &: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;
+      }
+    }
   }
 
-  @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')};
-      // 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 meta.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)};
+  @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);
       }
-      --#{$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
+          &.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);
           }
         }
       }
-      // Should we custom this. See with UX
-      // .navbar-text {
-      //   color: var(--#{$prefix}navbar-light-text-color);
-      // }
+
       .navbar-toggler {
         &:focus {
-          @if meta.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)};
+          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
+            }
           }
-          --#{$prefix}navbar-toggle-box-shadow: #{$df-navbar-toggle-focused-box-shadow};
         }
-        &:hover {
-          background-color: #{shades-css-var($color, 'bg-hover-color')};
+
+        // Should we custom this. See with UX
+        // .navbar-text {
+        //   color: var(--#{$prefix}navbar-light-text-color);
+        // }
+        .navbar-toggler {
           &:focus {
-            // verify the bg color change
-            @if meta.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};
-            }
+            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
@@ -214,7 +284,7 @@
       border-color: var(--#{$prefix}navbar-nav-link-border-color);
       box-shadow: none;
 
-      &:focus {
+      &:focus-visible {
         // add
         color: var(--#{$prefix}navbar-nav-link-focus-color); // override
         background: var(--#{$prefix}navbar-nav-link-bg-focus-color); // add
@@ -234,7 +304,7 @@
         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 {
+        &:focus-visible {
           //add
           color: var(--#{$prefix}navbar-hover-color); //override
           @if meta.variable-exists($name: 'df-enableBranding2023') and $df-enableBranding2023 {
@@ -245,6 +315,15 @@
         }
       }
 
+      @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;
@@ -253,10 +332,12 @@
         border-radius: inherit;
       }
     }
+
     .active > .nav-link,
     .nav-link.active {
-      &:focus {
+      &:focus-visible {
         border-bottom: none;
+
         &:before {
           bottom: var(--#{$prefix}active-border-width);
         }
@@ -272,13 +353,24 @@
         // 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 {
+
+      @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
   }
 }
@@ -289,13 +381,23 @@
   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 ??
 }
 
@@ -312,10 +414,11 @@
         .navbar-nav {
           .active > .nav-link,
           .nav-link.active {
-            &:focus:before {
+            &:focus-visible:before {
               bottom: 0;
               left: calc(var(--#{$prefix}active-border-width));
             }
+
             &:after {
               content: '';
               position: absolute;
@@ -327,6 +430,7 @@
               border-bottom: none;
             }
           }
+
           .nav-link {
             padding-bottom: var(--#{$prefix}navbar-nav-link-expanded-padding-bottom);
 
@@ -338,6 +442,7 @@
               justify-content: inherit;
             }
           }
+
           .nav-item.dropdown {
             .dropdown-menu {
               margin: var(--#{$prefix}navbar-dropdown-menu-collapse-margin);
@@ -345,6 +450,7 @@
               box-shadow: var(--#{$prefix}navbar-dropdown-menu-collapse-box-shadow);
             }
           }
+
           &:last-of-type {
             .nav-item.dropdown:last-of-type {
               .dropdown-menu {
@@ -362,13 +468,15 @@
             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 {
+            &:focus-visible:before {
               &:before {
                 bottom: var(--#{$prefix}active-border-width);
               }
             }
+
             &:after {
               content: '';
               position: absolute;
@@ -417,6 +525,7 @@
   .navbar {
     box-shadow: var(--#{$prefix}superheader-navbar-boxshadow); // override above settings
   }
+
   header:first-of-type {
     //add
     border-bottom: var(--#{$prefix}superheader-border-bottom);

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

@@ -1,24 +1,48 @@
-@use 'sass:math';
-
 $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-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: 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-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-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: math.div($df-navbar-height - ($df-navbar-nav-font-size * $line-height-base), 2) !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;
@@ -50,14 +74,18 @@ $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('primary', 'bg-subtle-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(
-  #{$df-navbarbrand-min-height + 2 * $df-superheader-firstnav-padding-y + $df-navbar-height} + #{$border-width}
+  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;
@@ -65,6 +93,7 @@ $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