@design-factory/design-factory 15.2.3 → 16.0.0

package/styles/scss/components/select/_select.variables.scss

@@ -9,21 +9,20 @@ $df-select-indicator-disabled: str-replace(
   '%23'
 ) !default;
 /* Ngselect variables*/
-$df-icon-caret-down: '\e9ff' !default; // .icon-caret-down
-$df-select-single-optionselected-background-color: $primary !default;
-$df-select-icon-caret-down: $df-icon-caret-down !default;
+$df-select-single-optionselected-background-color: shades-css-var('primary', 'bg-color') !default;
+$df-select-icon-caret-down: '\e9ff' !default; // .icon-caret-down
 $df-select-optionselected-background-color: $df-primary-lighten-60 !default; // override
 $df-select-value-color: $form-select-color !default; // $input-color
 $df-select-option-textdecoration-hover: underline !default;
-$df-select-option-hover: $df-hover-bg-color !default;
-$df-select-disabled-cursor: $df-disabled-cursor !default;
-$df-select-disabled-color: $df-disabled-color !default; // gray-400
-$df-select-disabled-bg: $df-disabled-bg-color !default; // gray-100
+$df-select-option-hover-bg-color: $df-hover-bg-color !default;
+$df-select-disabled-cursor: var(--#{$prefix}disabled-cursor) !default;
+$df-select-disabled-color: var(--#{$prefix}disabled-color) !default; // gray-400
+$df-select-disabled-bg: var(--#{$prefix}disabled-bg-color) !default; // gray-100
 $df-select-readonly-bg: $df-select-disabled-bg !default;
 $df-select-readonly-color: $body-color !default;
 $df-select-value-lefticon-border-right: $border-width solid $pacific !default;
 $df-select-value-righticon-border-left: none !default;
-$df-select-highlight-color: $primary !default;
+$df-select-highlight-color: shades-css-var('primary', 'bg-color') !default;
 $df-select-panel-min-width: 100% !default;
 $df-select-value-height: $font-size-base * $line-height-base !default;
 $df-select-value-height-sm: $font-size-sm * $line-height-sm !default;
@@ -50,27 +49,24 @@ $df-select-value-margin: $form-select-padding-y !default;
 $df-select-value-margin-sm: $input-padding-y-sm !default;
 $df-select-value-margin-lg: $input-padding-y-lg !default;
 $df-select-panel-border-radius: 2px !default;
-$df-select-panel-box-shadow: $df-box-shadow !default;
+$df-select-panel-box-shadow: var(--#{$prefix}box-shadow) !default;
 $df-select-optgroup-border: $border-width solid $border-color !default;
 $df-select-icon-color: $form-select-indicator-color !default;
 $df-custom-select-background-rtl: $form-select-indicator no-repeat left $form-select-padding-x center /
   $form-select-bg-size !default;
-$df-select-option-color: color-contrast($df-select-option-hover) !default;
+$df-select-option-hover-color: var(--#{$prefix}body-color) !default;
 $df-select-single-optionselected-color: color-contrast($df-select-single-optionselected-background-color) !default;
 $df-select-icon-solid-font-weight: $df-icon-solid-font-weight !default;
 $df-select-icon-font-size: 1rem !default;
 $df-select-icon-font-family: $df-font-family !default;
 $df-select-input-font-weight: $input-font-weight !default;
-$df-select-spinner-loader-border-left: 2px solid $primary !default;
+$df-select-spinner-loader-border-left: 2px solid shades-css-var('primary', 'border-color') !default;
 $df-select-value-disabled-bg-color: $white !default;
 $df-select-value-disabled-border: $border-width solid $white !default;
-$df-select-input-invalid-feedback-focus-box-shadow: 0 0 0 3.2px rgba($form-feedback-invalid-color, 0.25) !default;
-$df-select-input-valid-feedback-focus-box-shadow: 0 0 0 3.2px rgba($form-feedback-valid-color, 0.25) !default;
-$df-select-input-warning-feedback-focus-box-shadow: 0 0 0 3.2px rgba($df-form-feedback-warning-color, 0.25) !default;
 // For the not found text
 $df-select-not-found-disabled: $gray-600 !default;
 $df-select-option-disabled-color: $df-disabled-input-color !default;
-$df-select-clear-button-width: $df-iwi-icon-width !important !default; // important needed to override default ng-select
+$df-select-clear-button-width: $df-iwi-icon-width !default; // important needed to override default ng-select
 $df-select-clear-button-height: $df-iwi-icon-height !default;
 $df-select-clear-button-line-height: $df-select-clear-button-height !default;
 $df-select-clear-button-display: flex !default;
@@ -83,3 +79,7 @@ $df-select-form-check-padding-start: $form-check-padding-start + 0.5em !default;
 $df-select-form-check-margin-start: -0.5em !default;
 $df-select-form-check-margin-bottom: 0 !default; // override $form-check-margin-bottom
 $df-select-form-check-padding-bottom: $form-check-margin-bottom !default;
+$df-select-option-lg-height: 1.95rem !default;
+$df-select-option-sm-height: 1.6rem !default;
+$df-select-input-box-shadow: $input-focus-box-shadow !default;
+$df-select-clear-focus-box-shadow: $df-focused-box-shadow !default;

package/styles/scss/components/separator/_separator.scss

@@ -1,5 +1,6 @@
 .vertical-separator {
-  width: $df-vertical-separator-width;
+  --#{$prefix}vertical-separator-width: #{$df-vertical-separator-width};
+  width: var(--#{$prefix}vertical-separator-width);
   color: $hr-color;
   background-color: currentColor;
   display: inline-block;

package/styles/scss/components/sidenav/_sidenav.scss

@@ -3,25 +3,91 @@
 }
 
 .df-sidenav-toggler-icon {
-  line-height: $df-sidenav-toggler-icon-line-height;
-  display: $df-sidenav-toggler-icon-display;
-  width: $df-sidenav-toggler-icon-width;
-  height: $df-sidenav-toggler-icon-height;
+  line-height: var(--#{$prefix}sidenav-toggler-icon-line-height);
+  display: var(--#{$prefix}sidenav-toggler-icon-display);
+  width: var(--#{$prefix}sidenav-toggler-icon-width);
+  height: var(--#{$prefix}sidenav-toggler-icon-height);
 }
 
 .df-sidenav-light {
-   --#{$prefix}sidenav-item-extra-icon-height: #{$df-sidenav-item-extra-withouticon-height};
-   --#{$prefix}sidenav-item-icon-extra-padding: #{$df-sidenav-item-extra-padding-start};
-  width: $df-sidenav-expand-width;
-  padding-top: $df-sidenav-menu-padding-top;
-  background-color: $df-sidenav-background-color;
-  overflow-x: $df-sidenav-menu-overflow-x;
-  z-index: $df-sidenav-menu-zindex;
+  --#{$prefix}sidenav-item-icon-extra-padding: #{$df-sidenav-item-extra-padding-start};
+  --#{$prefix}sidenav-item-icon-color: #{$df-sidenav-item-icon-color};
+  --#{$prefix}sidenav-bg-color: #{$df-sidenav-bg-color};
+  --#{$prefix}sidenav-icon-font-size: #{$df-sidenav-icon-font-size};
+  --#{$prefix}sidenav-icon-box-width: #{$df-sidenav-icon-box-width};
+  --#{$prefix}sidenav-icon-box-height: #{$df-sidenav-icon-box-height};
+  --#{$prefix}sidenav-icon-padding: #{$df-sidenav-icon-padding};
+  --#{$prefix}sidenav-expand-width: #{$df-sidenav-expand-width};
+  --#{$prefix}sidenav-toggler-icon-width: #{$df-sidenav-toggler-icon-width};
+  --#{$prefix}sidenav-toggler-icon-height: #{$df-sidenav-toggler-icon-height};
+  --#{$prefix}sidenav-toggler-icon-line-height: #{$df-sidenav-toggler-icon-line-height};
+  --#{$prefix}sidenav-toggler-icon-display: #{$df-sidenav-toggler-icon-display};
+  --#{$prefix}sidenav-menu-border: #{$df-sidenav-menu-border};
+  --#{$prefix}sidenav-menu-overflow-x: #{$df-sidenav-menu-overflow-x};
+  --#{$prefix}sidenav-menu-padding-top: #{$df-sidenav-menu-padding-top};
+  --#{$prefix}sidenav-menu-overlay-position: #{$df-sidenav-menu-position};
+  --#{$prefix}sidenav-menu-overlay-height: #{$df-sidenav-menu-overlay-height};
+  --#{$prefix}sidenav-menu-zindex: #{$df-sidenav-menu-zindex};
+  --#{$prefix}sidenav-disabled-opacity: #{$df-sidenav-disabled-opacity};
+  --#{$prefix}sidenav-disabled-cursor: #{$df-sidenav-disabled-cursor};
+  --#{$prefix}sidenav-list-active-color: #{$df-sidenav-list-active-color};
+  --#{$prefix}sidenav-list-item-style: #{$df-sidenav-list-item-style};
+  --#{$prefix}sidenav-list-padding-start: #{$df-sidenav-list-padding-start};
+  --#{$prefix}sidenav-list-padding-end: #{$df-sidenav-list-padding-end};
+  --#{$prefix}sidenav-item-padding-top: #{$df-sidenav-item-padding-top};
+  --#{$prefix}sidenav-item-padding-bottom: #{$df-sidenav-item-padding-bottom};
+  --#{$prefix}sidenav-item-color: #{$df-sidenav-item-color};
+  --#{$prefix}sidenav-item-margin: #{$df-sidenav-item-margin};
+  --#{$prefix}sidenav-item-border: #{$df-sidenav-item-border};
+  --#{$prefix}sidenav-item-border-start: #{$df-sidenav-item-border-start};
+  --#{$prefix}sidenav-item-border-start-active: #{$df-sidenav-item-border-start-active};
+  --#{$prefix}sidenav-item-position: #{$df-sidenav-item-position};
+  --#{$prefix}sidenav-item-extra-icon-height-level3: #{$df-sidenav-item-extra-icon-height-level3};
+  --#{$prefix}sidenav-item-withicon-extra-padding-start: #{$df-sidenav-item-withicon-extra-padding-start};
+  --#{$prefix}sidenav-item-height: #{$df-sidenav-item-height};
+  --#{$prefix}sidenav-item-focus-box-shadow-width: #{$df-sidenav-item-focus-box-shadow-width};
+  --#{$prefix}sidenav-item-text-align: #{$df-sidenav-item-text-align};
+  --#{$prefix}sidenav-item-text-align-rtl: #{$df-sidenav-item-text-align-rtl};
+  --#{$prefix}sidenav-item-active-font-weight: #{$df-sidenav-item-active-font-weight};
+  --#{$prefix}sidenav-item-active-border-width: #{$df-sidenav-item-active-border-width};
+  --#{$prefix}sidenav-item-withactivated-font-weight: #{$df-sidenav-item-withactivated-font-weight};
+  --#{$prefix}sidenav-item-withactivated-bg-color: #{$df-sidenav-item-withactivated-bg-color};
+  --#{$prefix}sidenav-item-withactivated-icon-color: #{$df-sidenav-item-withactivated-icon-color};
+  --#{$prefix}sidenav-item-bg-color: #{$df-sidenav-item-bg-color};
+  --#{$prefix}sidenav-item-first-level-padding-start: #{$df-sidenav-item-first-level-padding-start};
+  --#{$prefix}sidenav-item-third-level-font-size: #{$df-sidenav-item-third-level-font-size};
+  --#{$prefix}sidenav-item-padding-start: #{$df-sidenav-item-padding-start};
+  --#{$prefix}sidenav-item-padding-level2-start: #{$df-sidenav-item-padding-level2-start};
+  --#{$prefix}sidenav-item-padding-level3-start: #{$df-sidenav-item-padding-level3-start};
+  --#{$prefix}sidenav-item-padding-end: #{$df-sidenav-item-padding-end};
+  --#{$prefix}sidenav-item-width: #{$df-sidenav-item-width};
+  --#{$prefix}sidenav-withactivated-item-border-start: #{$df-sidenav-withactivated-item-border-start};
+  @if variable-exists($name: 'df-enableBranding2023') and $df-enableBranding2023 {
+    --#{$prefix}box-shadow-color: var(--#{$prefix}sidenav-item-bg-color);
+    --#{$prefix}inner-box-shadow-color: var(--#{$prefix}sidenav-item-color);
+  }
+  --#{$prefix}sidenav-item-focused-box-shadow: #{$df-sidenav-item-focused-box-shadow};
+  --#{$prefix}sidenav-item-hover-bg-color: #{$df-sidenav-item-hover-bg-color};
+  --#{$prefix}sidenav-item-active-bg-color: #{$df-sidenav-item-active-bg-color};
+  --#{$prefix}sidenav-collapsing-transition: #{$df-sidenav-collapsing-transition};
+  --#{$prefix}sidenav-collapsing-height: #{$df-sidenav-collapsing-height};
+  --#{$prefix}sidenav-title-height: #{$df-sidenav-title-height};
+  --#{$prefix}sidenav-title-font-size: #{$df-sidenav-title-font-size};
+  --#{$prefix}sidenav-item-text-decoration: #{$df-sidenav-item-text-decoration};
+  --#{$prefix}sidenav-minimizing-transition: width 0.5s ease;
+  --#{$prefix}sidenav-icon-box-margin-end: #{$df-sidenav-icon-box-margin-end};
+  --#{$prefix}sidenav-icon-box-margin-start: #{$df-sidenav-icon-box-margin-start};
+
+  width: var(--#{$prefix}sidenav-expand-width);
+  padding-top: var(--#{$prefix}sidenav-menu-padding-top);
+  background-color: var(--#{$prefix}sidenav-bg-color);
+  overflow-x: var(--#{$prefix}sidenav-menu-overflow-x);
+  z-index: var(--#{$prefix}sidenav-menu-zindex);
   @include ltr {
-    border-right: $df-sidenav-menu-border;
+    border-right: var(--#{$prefix}sidenav-menu-border);
   }
   @include rtl {
-    border-left: $df-sidenav-menu-border;
+    border-left: var(--#{$prefix}sidenav-menu-border);
   }
   // When one item is active in the menu only the first element is having the has Active look
   > df-sidenavlist > .df-sidenav-list {
@@ -29,49 +95,56 @@
       button,
       a {
         @include ltr {
-          border-left: $df-sidenav-withactivated-item-border-start;
+          border-left: var(--#{$prefix}sidenav-withactivated-item-border-start);
         }
         @include rtl {
-          border-right: $df-sidenav-withactivated-item-border-start;
+          border-right: var(--#{$prefix}sidenav-withactivated-item-border-start);
         }
       }
     }
   }
   // Three level of sidenav setup
   .df-sidenav-list {
-    padding-left: $df-sidenav-list-padding-start;
-    padding-right: $df-sidenav-list-padding-end;
+    @include ltr {
+      padding-left: var(--#{$prefix}sidenav-list-padding-start);
+      padding-right: var(--#{$prefix}sidenav-list-padding-end);
+    }
+    @include rtl {
+      padding-right: var(--#{$prefix}sidenav-list-padding-start);
+      padding-left: var(--#{$prefix}sidenav-list-padding-end);
+    }
     li {
-      list-style-type: $df-sidenav-list-item-style;
+      list-style-type: var(--#{$prefix}sidenav-list-item-style);
     }
     > .df-sidenav-list-withactivated {
+      --#{$prefix}sidenav-item-withactived-border-width: var(--#{$prefix}sidenav-item-active-border-width);
+      --#{$prefix}sidenav-item-padding-start: #{$df-sidenav-item-padding-start};
       > button,
       > a {
         .df-sidenav-icon {
-          color: $df-sidenav-item-withactivated-icon-color;
+          color: var(--#{$prefix}sidenav-item-withactivated-icon-color);
         }
-        font-weight: $df-sidenav-item-withactivated-font-weight;
-        background-color: $df-sidenav-item-withactivated-bg-color;
+        font-weight: var(--#{$prefix}sidenav-item-withactivated-font-weight);
+        background-color: var(--#{$prefix}sidenav-item-withactivated-bg-color);
       }
     }
     .df-sidenav-list {
       .df-sidenav-item { // Second level override
         @include ltr {
-          padding-left: $df-sidenav-item-padding-level2-start;
+          padding-left: var(--#{$prefix}sidenav-item-padding-level2-start);
         }
         @include rtl {
-          padding-right: $df-sidenav-item-padding-level2-start;
+          padding-right: var(--#{$prefix}sidenav-item-padding-level2-start);
         }
-
       }
       .df-sidenav-list {
-        font-size: $df-sidenav-item-third-level-font-size;
+        font-size: var(--#{$prefix}sidenav-item-third-level-font-size);
         .df-sidenav-item { // Thrid level override
           @include ltr {
-            padding-left: $df-sidenav-item-padding-level3-start;
+            padding-left: var(--#{$prefix}sidenav-item-padding-level3-start);
           }
           @include rtl {
-            padding-right: $df-sidenav-item-padding-level3-start;
+            padding-right: var(--#{$prefix}sidenav-item-padding-level3-start);
           }
         }
       }
@@ -79,42 +152,42 @@
 
     #{$df-sidenav-item-class} { // default
       [class^='icon-'], [class*=" icon-"] {
-          color: $df-sidenav-item-icon-color;
+        color: var(--#{$prefix}sidenav-item-icon-color);
       }
-      width: $df-sidenav-item-width;
-      color: $df-sidenav-item-color;
-      position: $df-sidenav-item-position; // mandatory for the focus shadow
-      border: $df-sidenav-item-border; // reset the default border
-      margin: $df-sidenav-item-margin;
-      padding-top: $df-sidenav-item-padding-top;
-      padding-bottom: $df-sidenav-item-padding-bottom;
+      width: var(--#{$prefix}sidenav-item-width);
+      color: var(--#{$prefix}sidenav-item-color);
+      position: var(--#{$prefix}sidenav-item-position); // mandatory for the focus shadow
+      border: var(--#{$prefix}sidenav-item-border); // reset the default border
+      margin: var(--#{$prefix}sidenav-item-margin);
+      padding-top: var(--#{$prefix}sidenav-item-padding-top);
+      padding-bottom: var(--#{$prefix}sidenav-item-padding-bottom);
       @include ltr {
-        text-align: $df-sidenav-item-text-align;
-        border-left: $df-sidenav-item-border-start;
-        padding-left: $df-sidenav-item-padding-start;
-        padding-right: $df-sidenav-item-padding-end;
+        text-align: var(--#{$prefix}sidenav-item-text-align);
+        border-left: var(--#{$prefix}sidenav-item-border-start);
+        padding-left: var(--#{$prefix}sidenav-item-padding-start);
+        padding-right: var(--#{$prefix}sidenav-item-padding-end);
       }
       @include rtl {
-        text-align: $df-sidenav-item-text-align-rtl;
-        border-right: $df-sidenav-item-border-start;
-        padding-right: $df-sidenav-item-padding-start;
-        padding-left: $df-sidenav-item-padding-end;
+        text-align: var(--#{$prefix}sidenav-item-text-align-rtl);
+        border-right: var(--#{$prefix}sidenav-item-border-start);
+        padding-right: var(--#{$prefix}sidenav-item-padding-start);
+        padding-left: var(--#{$prefix}sidenav-item-padding-end);
       }
-      background-color: $df-sidenav-item-background-color;
-      height: $df-sidenav-item-height;
+      background-color: var(--#{$prefix}sidenav-item-bg-color);
+      height: var(--#{$prefix}sidenav-item-height);
       &:hover {
-        text-decoration: $df-sidenav-item-text-decoration;
+        text-decoration: var(--#{$prefix}sidenav-item-text-decoration);
       }
       &[aria-disabled='true'],
       &.disabled,
       &[disabled] { // TODO see with UX if we could have the case. Disabled item are not yet implemented
-        background-color: $df-sidenav-item-background-color;
-        opacity: $df-sidenav-disabled-opacity;
-        cursor: $df-sidenav-disabled-cursor;
+        background-color: var(--#{$prefix}sidenav-item-bg-color);
+        opacity: var(--#{$prefix}sidenav-disabled-opacity);
+        cursor: var(--#{$prefix}sidenav-disabled-cursor);
       }
       &:not([aria-disabled='true']):not(.disabled):not([disabled]) {
         &:not(.df-sidenav-title):hover {
-          background-color: $df-sidenav-item-background-color-hover;
+          background-color: var(--#{$prefix}sidenav-item-hover-bg-color);
         }
         &:focus,
         &.focus {  // Title can never be focus
@@ -123,114 +196,118 @@
           &:before {
             content: '';
             position: absolute;
-            top: $df-sidenav-item-focus-box-shadow-width;
-            bottom: $df-sidenav-item-focus-box-shadow-width;
+            top: var(--#{$prefix}sidenav-item-focus-box-shadow-width);
+            bottom: var(--#{$prefix}sidenav-item-focus-box-shadow-width);
             @include ltr {
-              left: $df-sidenav-item-focus-box-shadow-start;
-              right: $df-sidenav-item-focus-box-shadow-width;
+              left: var(--#{$prefix}sidenav-item-focus-box-shadow-width);
+              right: var(--#{$prefix}sidenav-item-focus-box-shadow-width);
             }
             @include rtl {
-              left: $df-sidenav-item-focus-box-shadow-width;
-              right: $df-sidenav-item-focus-box-shadow-start; 
-            }
-            // Move the focus box-shadow not to be over the border start
-            @at-root #{selector-replace(&, #{$df-sidenav-item-class}, ".df-sidenav-list-withactivated " + #{$df-sidenav-item-class})} {
-              @include ltr {
-                left: $df-sidenav-item-focus-box-shadow-width;
-              }
-              @include rtl {
-                right: $df-sidenav-item-focus-box-shadow-width;
-              }
+              left: var(--#{$prefix}sidenav-item-focus-box-shadow-width);
+              right: var(--#{$prefix}sidenav-item-focus-box-shadow-width); 
             }
-            z-index: $df-sidenav-item-box-shadow-zindex;
-            box-shadow: $df-sidenav-item-focused-box-shadow; // override
+            box-shadow: var(--#{$prefix}sidenav-item-focused-box-shadow); // override
           }
         }
         &.active { // Title are never active
-           --#{$prefix}sidenav-list-border-width: #{$df-sidenav-item-active-border-width};
-          background-color: $df-sidenav-item-bg-color-active;
-          color: $df-sidenav-list-active-color;
-          font-weight: $df-sidenav-item-active-font-weight;
+           --#{$prefix}sidenav-list-border-width: var(--#{$prefix}sidenav-item-active-border-width);
+          background-color: var(--#{$prefix}sidenav-item-active-bg-color);
+          color: var(--#{$prefix}sidenav-list-active-color);
+          font-weight: var(--#{$prefix}sidenav-item-active-font-weight);
           @include ltr {
-            border-left: $df-sidenav-item-border-start-active;
+            border-left: var(--#{$prefix}sidenav-item-border-start-active);
           }
           @include rtl {
-            border-right: $df-sidenav-item-border-start-active;
+            border-right: var(--#{$prefix}sidenav-item-border-start-active);
           }
           &:focus,
           &.focus {  // Title can never be focus
             &:before {
               @include ltr {
-                left: $df-sidenav-item-focus-box-shadow-width;
+                left: var(--#{$prefix}sidenav-item-focus-box-shadow-width);
               }
               @include rtl {
-                right: $df-sidenav-item-focus-box-shadow-width;
+                right: var(--#{$prefix}sidenav-item-focus-box-shadow-width);
               }
             }
           }
         }
-      }
 
-      // Override in case of icon
-      &.df-sidenav-item-withicon {
-        + df-sidenavlist {
-          > .df-sidenav-list {
-              --#{$prefix}sidenav-item-icon-extra-padding: #{$df-sidenav-item-withicon-extra-padding-start};
+        // Override in case of icon
+        &.df-sidenav-item-withicon {
+          + df-sidenavlist {
+            > .df-sidenav-list {
+                --#{$prefix}sidenav-item-icon-extra-padding: var(--#{$prefix}sidenav-item-withicon-extra-padding-start);
+                --#{$prefix}sidenav-item-padding-level2-start: #{$df-sidenav-item-padding-level2-start};
+                --#{$prefix}sidenav-item-padding-level3-start: #{$df-sidenav-item-padding-level3-start};
+            }
+            --#{$prefix}sidenav-item-extra-icon-height: #{$df-sidenav-item-extra-icon-height};
+            --#{$prefix}sidenav-item-height: #{$df-sidenav-item-height};
+            .df-sidenav-list .df-sidenav-list {
+                --#{$prefix}sidenav-item-extra-icon-height: var(--#{$prefix}sidenav-item-extra-icon-height-level3);
+                --#{$prefix}sidenav-item-height: #{$df-sidenav-item-height};
+            }
           }
           --#{$prefix}sidenav-item-extra-icon-height: #{$df-sidenav-item-extra-icon-height};
-          .df-sidenav-list .df-sidenav-list {
-              --#{$prefix}sidenav-item-extra-icon-height: #{$df-sidenav-item-extra-icon-height-level3};
-          }
+          --#{$prefix}sidenav-item-height: #{$df-sidenav-item-height};
+        }
+        &.df-sidenav-title {
+          height: var(--#{$prefix}sidenav-title-height);
+          font-size: var(--#{$prefix}sidenav-title-font-size);
         }
-        --#{$prefix}sidenav-item-extra-icon-height: #{$df-sidenav-item-extra-icon-height};
-      }
-      &.df-sidenav-title {
-        height: $df-sidenav-title-height;
-        font-size: $df-sidenav-title-font-size;
       }
     }
   }
-}
-
-.df-main-content {
-  width: calc(100vw - #{$df-sidenav-expand-width});
-}
-
-.df-sidenav-wrapper {
-  position: $df-sidenav-wrapper-position;
-  max-width: $df-sidenav-wrapper-maxwidth;
-  overflow: $df-sidenav-wrapper-overflow; // in case the content can not be reduced more than the screen.
-}
-
-.df-sidenav-icon {
-  font-size: $df-sidenav-icon-font-size;
-  width: $df-sidenav-icon-box-width;
-  height: $df-sidenav-icon-box-height;
-  padding: $df-sidenav-icon-padding;
-  @include ltr {
-    margin-left: $df-sidenav-icon-box-margin-start;
-    margin-right: $df-sidenav-icon-box-margin-end;
+  &.df-collapsing {
+    position: $df-sidenav-menu-position;
+    height: $df-sidenav-collapsing-height;
+    width: 0;
+    overflow: hidden;
+    transition: $df-sidenav-collapsing-transition;
   }
-  @include rtl {
-    margin-right: $df-sidenav-icon-box-margin-start;
-    margin-left: $df-sidenav-icon-box-margin-end;
+  &.df-minimizing {
+    position: $df-sidenav-menu-position;
+    width: 50px;
+    overflow: hidden;
+    transition: var(--#{$prefix}sidenav-minimizing-transition);
+  }
+  &.df-sidenav-menu-overlay {
+    position: var(--#{$prefix}sidenav-menu-overlay-position);
+    height: var(--#{$prefix}sidenav-menu-overlay-height);
+  }
+
+  .df-sidenav-icon {
+    font-size: var(--#{$prefix}sidenav-icon-font-size);
+    width: var(--#{$prefix}sidenav-icon-box-width);
+    height: var(--#{$prefix}sidenav-icon-box-height);
+    padding: var(--#{$prefix}sidenav-icon-padding);
+    @include ltr {
+      margin-left: var(--#{$prefix}sidenav-icon-box-margin-start);
+      margin-right: var(--#{$prefix}sidenav-icon-box-margin-end);
+    }
+    @include rtl {
+      margin-right: var(--#{$prefix}sidenav-icon-box-margin-start);
+      margin-left: var(--#{$prefix}sidenav-icon-box-margin-end);
+    }
   }
 }
 
-.df-sidenav-menu-overlay {
-  position: $df-sidenav-menu-position;
-  height: $df-sidenav-menu-overlay-height;
+.df-main-content {
+  --#{$prefix}sidenav-main-content-width: calc(100vw - #{$df-sidenav-expand-width});
+  width: var(--#{$prefix}sidenav-main-content-width);
 }
 
-.df-sidenav-light.df-collapsing {
-  position: $df-sidenav-menu-position;
-  height: $df-sidenav-collapsing-height;
-  width: 0;
-  overflow: hidden;
-  transition: $df-sidenav-collapsing-transition;
+.df-sidenav-wrapper {
+  --#{$prefix}sidenav-wrapper-maxwidth: #{$df-sidenav-wrapper-maxwidth};
+  --#{$prefix}sidenav-wrapper-position: #{$df-sidenav-wrapper-position};
+  --#{$prefix}sidenav-wrapper-overflow: #{$df-sidenav-wrapper-overflow};
+  position: var(--#{$prefix}sidenav-wrapper-position);
+  max-width: var(--#{$prefix}sidenav-wrapper-maxwidth);
+  overflow: var(--#{$prefix}sidenav-wrapper-overflow); // in case the content can not be reduced more than the screen.
 }
 
 // stylelint-disable-next-line selector-type-no-unknown
+// flag angular specific
 df-sidenav {
   &.df-collapse:not(.df-show) {
     display: none !important;
@@ -238,20 +315,16 @@ df-sidenav {
 }
 
 .df-sidenav-overlay {
-  position: $df-sidenav-overlay-position;
-  background-color: $df-sidenav-overlay-background-color;
-  width: $df-sidenav-overlay-width;
-  height: $df-sidenav-overlay-height;
-  z-index: $df-sidenav-overlay-zindex;
-}
-
-// TODO adjust width here
-// Create CSS var to be used in the code of the sidenav JS.
-.df-sidenav-light.df-minimizing {
-  position: $df-sidenav-menu-position;
-  width: 50px;
-  overflow: hidden;
-  transition: width 0.5s ease;
+  --#{$prefix}sidenav-overlay-position: #{$df-sidenav-overlay-position};
+  --#{$prefix}sidenav-overlay-width: #{$df-sidenav-overlay-width};
+  --#{$prefix}sidenav-overlay-height: #{$df-sidenav-overlay-height};
+  --#{$prefix}sidenav-overlay-background-color: #{$df-sidenav-overlay-background-color};
+  --#{$prefix}sidenav-overlay-zindex: #{$df-sidenav-overlay-zindex};
+  position: var(--#{$prefix}sidenav-overlay-position);
+  background-color: var(--#{$prefix}sidenav-overlay-background-color);
+  width: var(--#{$prefix}sidenav-overlay-width);
+  height: var(--#{$prefix}sidenav-overlay-height);
+  z-index: var(--#{$prefix}sidenav-overlay-zindex);
 }
 
 .df-minimized:not(.df-show) {

package/styles/scss/components/sidenav/_sidenav.variables.scss

@@ -1,7 +1,7 @@
 @use 'sass:math';
 @use 'sass:color';
 
-$df-sidenav-background-color: $white !default;
+$df-sidenav-bg-color: $body-bg !default;
 $df-sidenav-icon-font-size: 1.25rem !default;
 $df-sidenav-icon-box-width: 1.5rem !default;
 $df-sidenav-icon-box-height: 1.5rem !default;
@@ -31,8 +31,7 @@ $df-sidenav-overlay-height: 100% !default;
 $df-sidenav-overlay-background-color: rgba(0, 0, 0, 0.5) !default; // TODO find the right color from palette
 $df-sidenav-overlay-zindex: $zindex-fixed + 6 !default;
 
-$df-sidenav-list-active-color: $primary !default;
-$df-sidenav-list-active-background-color: $df-sidenav-list-active-color !default;
+$df-sidenav-list-active-color: shades-css-var('primary', 'inert-color') !default;
 $df-sidenav-list-item-style: none !default;
 $df-sidenav-list-padding-start: 0 !default;
 $df-sidenav-list-padding-end: 0 !default;
@@ -42,46 +41,46 @@ $df-sidenav-item-padding-bottom: 0 !default;
 $df-sidenav-item-color: $body-color !default;
 $df-sidenav-item-margin: 0 !default;
 $df-sidenav-item-active-border-width: 0.1875rem !default;
+$df-sidenav-item-active-font-weight: $df-font-weight-semi-bold !default;
 $df-sidenav-item-border: none !default;
-$df-sidenav-item-border-start: $df-sidenav-item-active-border-width solid transparent !default;
-$df-sidenav-item-border-start-active: $df-sidenav-item-active-border-width solid $df-sidenav-list-active-color !default;
+$df-sidenav-item-border-start: none !default;
+$df-sidenav-item-active-border-color: $df-sidenav-list-active-color !default;
+$df-sidenav-item-border-start-active: $df-sidenav-item-active-border-width solid $df-sidenav-item-active-border-color !default;
 $df-sidenav-item-icon-color: $df-font-icon-color !default;
 $df-sidenav-item-position: relative !default;
 $df-sidenav-item-extra-icon-height: 0.5rem !default;
 $df-sidenav-item-extra-icon-height-level3: 0.25rem !default;
-$df-sidenav-item-height: calc(2.5rem + var( --#{$prefix}sidenav-item-extra-icon-height)) !default;
-$df-sidenav-item-focus-box-shadow-width: $input-btn-focus-width !default;
-$df-sidenav-item-focus-box-shadow-start: 0 !default;
+$df-sidenav-item-basic-height: 2.5rem !default;
+$df-sidenav-item-height: calc(var(--#{$prefix}sidenav-item-basic-height, #{$df-sidenav-item-basic-height}) + var(--#{$prefix}sidenav-item-extra-icon-height, 0rem)) !default;
 $df-sidenav-item-text-align: left !default;
 $df-sidenav-item-text-align-rtl: right !default;
-$df-sidenav-item-active-font-weight: $df-font-weight-semi-bold !default;
+$df-sidenav-item-text-decoration: none !default;
 $df-sidenav-item-withactivated-font-weight: $df-sidenav-item-active-font-weight !default;
 $df-sidenav-item-withactivated-bg-color: $gray-50 !default;
 $df-sidenav-item-withactivated-icon-color: $body-color !default;
-$df-sidenav-item-background-color: transparent !default;
+$df-sidenav-withactivated-item-border-start: $df-sidenav-item-active-border-width solid
+  shades-css-var('secondary', 'bg-subtle-active-color') !default; // because body-bg is white
+$df-sidenav-item-bg-color: transparent !default;
 $df-sidenav-item-first-level-padding-start: 1.3125rem !default; // 24px - 3px border
 $df-sidenav-item-third-level-font-size: 0.875rem !default;
 $df-sidenav-item-class: ".df-sidenav-item" !default;
 $df-sidenav-text-padding-start: 3.5625rem !default; // 60px - 3px border
 $df-sidenav-icon-box-margin-end: calc((#{$df-sidenav-text-padding-start} - #{$df-sidenav-icon-box-width}) / 2) !default;
 $df-sidenav-icon-box-margin-start: calc(#{$df-sidenav-icon-box-margin-end} - #{$df-sidenav-item-first-level-padding-start}) !default;
-
 $df-sidenav-item-withicon-extra-padding-start: $df-sidenav-text-padding-start - $df-sidenav-item-first-level-padding-start !default; // 2.375rem !default;
 $df-sidenav-item-extra-padding-start: 0rem !default;
-$df-sidenav-item-padding-start: calc(#{$df-sidenav-item-first-level-padding-start} + var(--#{$prefix}sidenav-item-icon-extra-padding)) !default;
+$df-sidenav-item-padding-start: calc(#{$df-sidenav-item-first-level-padding-start} + var(--#{$prefix}sidenav-item-icon-extra-padding) - var(--#{$prefix}sidenav-item-withactived-border-width, 0px)) !default;
 $df-sidenav-item-padding-level2-start: calc(#{$df-sidenav-item-padding-start} + 0.5rem) !default;
 $df-sidenav-item-padding-level3-start: calc(#{$df-sidenav-item-padding-start} + 0.5rem + 0.5rem + 0.25rem) !default; // extra 0.25rem for third level
 $df-sidenav-item-padding-end: 1.25rem !default;
 $df-sidenav-item-width: 100% !default;
-$df-sidenav-withactivated-item-border-start: $df-sidenav-item-active-border-width solid
-  color.adjust($df-sidenav-background-color, $lightness: -20%) !default;
-$df-sidenav-item-focused-box-shadow: $btn-focus-box-shadow !default;
-$df-sidenav-item-box-shadow-zindex: $df-sidenav-menu-zindex + 1 !default;
-$df-sidenav-item-background-color-hover: color.adjust($white, $lightness: -10%) !default;
-$df-sidenav-item-bg-color-active: rgba($df-sidenav-list-active-background-color, 0.1) !default;
+$df-sidenav-item-focus-box-shadow-width: $input-btn-focus-width !default;
+$df-sidenav-item-focused-box-shadow: $input-btn-focus-box-shadow !default;
+$df-sidenav-item-hover-bg-color: $df-hover-bg-color !default;
+$df-sidenav-item-active-bg-color: rgba(shades-rgb-css-var('primary', 'bg-color'), 0.1) !default;
+$df-sidenav-item-extra-withouticon-height: 0rem !default;
 $df-sidenav-collapsing-transition: width 0.5s ease !default;
 $df-sidenav-collapsing-height: 100% !default;
 $df-sidenav-title-height: 2.75rem !default;
 $df-sidenav-title-font-size: 0.875rem !default;
-$df-sidenav-item-text-decoration: none !default;
-$df-sidenav-item-extra-withouticon-height: 0rem !default;
+