@design-factory/design-factory 15.2.2 → 16.0.0

package/styles/scss/components/carousel/_carousel.variables.scss

@@ -3,9 +3,10 @@
 $df-carousel-indicator-bg-color: color.adjust($black, $alpha: -0.4) !default;
 $df-carousel-indicator-bg-color-hover: $black !default;
 $df-carousel-indicator-border-radius: 50% !default;
-$df-carousel-outline: none !default;
+$df-carousel-outline: var(--#{$prefix}focus-outline) !default;
 $df-carousel-indicator-bottom: -$carousel-indicator-hit-area-height !default;
 $df-carousel-caption-bottom: 0 !default; // we remove 20px here from BS
 // default value is 20 + 20 of the caption bottom - the value we decrease the position of the indicators
 $df-carousel-caption-padding-bottom: 20px + 20px + $df-carousel-indicator-bottom !default;
 $df-carousel-caption-padding-top: 0.75rem !default;
+$df-carousel-focused-box-shadow: $df-focused-box-shadow !default;

package/styles/scss/components/checkbox/_checkbox.scss

@@ -1,6 +1,12 @@
 @use 'sass:math';
 
 .form-check {
+  --#{$prefix}checkbox-invalid-feedback-margin-start: #{math.div($form-check-padding-start, $form-feedback-font-size) * - 1em};
+  --#{$prefix}checkbox-disabled-background-color: #{$df-checkbox-disabled-background-color};
+  --#{$prefix}checkbox-checked-disabled-bg-color: #{$df-checkbox-checked-disabled-bg-color};
+  --#{$prefix}checkbox-disabled-border-color: #{$df-checkbox-disabled-border-color};
+  --#{$prefix}checkbox-disabled-cursor: #{$df-checkbox-disabled-cursor};
+
   .form-check-input {
     &:not([disabled]):not(.disabled) {
       cursor:pointer;
@@ -8,29 +14,29 @@
 
     & ~ .invalid-feedback {
       @include rtl {
-        margin-right: math.div($form-check-padding-start, $form-feedback-font-size) * -1em;
+        margin-right: var(--#{$prefix}checkbox-invalid-feedback-margin-start);
       }
       @include ltr {
-        margin-left: math.div($form-check-padding-start, $form-feedback-font-size) * -1em;
+        margin-left: var(--#{$prefix}checkbox-invalid-feedback-margin-start);
       }
     }
 
     &.disabled,
     &[disabled] {
-      cursor: $df-checkbox-disabled-cursor;
+      cursor: var(--#{$prefix}checkbox-disabled-cursor);
       pointer-events: auto;
-      border-color: $df-checkbox-disabled-border-color;
+      border-color: var(--#{$prefix}checkbox-disabled-border-color);
       &:not([checked]) {
-        background-color: $df-checkbox-disabled-background-color;
+        background-color: var(--#{$prefix}checkbox-disabled-background-color);
       }
       &:checked, &:indeterminate {
         &[type="checkbox"] {
-          background-color: $df-checkbox-checked-disabled-background-color;
+          background-color: var(--#{$prefix}checkbox-checked-disabled-bg-color);
         }
       }
       & ~ .form-check-label {
-        color: $df-checkbox-checked-disabled-background-color;
-        cursor: $df-checkbox-disabled-cursor;
+        color: var(--#{$prefix}checkbox-checked-disabled-bg-color);
+        cursor: var(--#{$prefix}checkbox-disabled-cursor);
       }
     }
   }

package/styles/scss/components/checkbox/_checkbox.variables.scss

@@ -1,6 +1,6 @@
 $df-checkbox-disabled-background-color: $df-disabled-bg-color !default;
-$df-checkbox-checked-disabled-background-color: $gray-300 !default;
+$df-checkbox-checked-disabled-bg-color: $gray-300 !default;
 $df-checkbox-disabled-border-color: $gray-300 !default;
-$df-checkbox-disabled-cursor: $df-disabled-cursor !default;
+$df-checkbox-disabled-cursor: var(--#{$prefix}disabled-cursor) !default;
 $df-checkbox-radio-margin-bottom: 0.5rem !default;
 $df-checkbox-radio-margin-end: 0.75rem !default;

package/styles/scss/components/collapse/_collapse.scss

@@ -1,10 +1,10 @@
 @import '../link/link.mixins';
 
 a.df-collapse[aria-disabled='true'] {
-  color: $df-collapse-disabled-color;
-  display: $df-collapse-disabled-display;
-  cursor: $df-collapse-disabled-cursor;
-  text-decoration: $df-collapse-disabled-text-decoration;
+  color: var(--#{$prefix}collapse-disabled-color);
+  display: var(--#{$prefix}collapse-disabled-display);
+  cursor: var(--#{$prefix}collapse-disabled-cursor);
+  text-decoration: var(--#{$prefix}collapse-disabled-text-decoration);
 
   // Links styles override
   border: none;
@@ -12,14 +12,22 @@ a.df-collapse[aria-disabled='true'] {
 
 // Links styles override
 a.df-collapse {
+  --#{$prefix}collapse-link-color: #{$df-collapse-link-color};
+  --#{$prefix}collapse-link-decoration: #{$df-collapse-link-decoration};
+  --#{$prefix}collapse-disabled-color: #{$df-collapse-disabled-color};
+  --#{$prefix}collapse-disabled-display: #{$df-collapse-disabled-display};
+  --#{$prefix}collapse-disabled-cursor: #{$df-collapse-disabled-cursor};
+  --#{$prefix}collapse-disabled-text-decoration: #{$df-collapse-disabled-text-decoration};
+  --#{$prefix}collapse-hover-border-bottom: #{$df-collapse-hover-border-bottom};
+
   display: inline-flex;
   align-items: center;
 
   &:link,
   &:visited {
-    color: $df-collapse-link-color;
-    text-decoration: $df-collapse-link-decoration;
-    border-bottom: $df-collapse-hover-border-bottom transparent;
+    color: var(--#{$prefix}collapse-link-color);
+    text-decoration: var(--#{$prefix}collapse-link-decoration);
+    border-bottom: var(--#{$prefix}collapse-hover-border-bottom) transparent;
   }
 
   &:hover,

package/styles/scss/components/collapse/_collapse.variables.scss

@@ -1,7 +1,7 @@
-$df-collapse-link-color: $df-link-color !default;
+$df-collapse-link-color: var(--#{$prefix}link-color) !default;
 $df-collapse-link-decoration: $link-decoration !default;
-$df-collapse-disabled-color: $df-disabled-color !default;
+$df-collapse-disabled-color: var(--#{$prefix}disabled-color) !default;
 $df-collapse-disabled-display: inline-block !default;
-$df-collapse-disabled-cursor: $df-disabled-cursor !default;
+$df-collapse-disabled-cursor: var(--#{$prefix}disabled-cursor) !default;
 $df-collapse-disabled-text-decoration: none !default;
 $df-collapse-hover-border-bottom: $df-link-hover-border-bottom-width solid !default;

package/styles/scss/components/datepicker/_datepicker.scss

@@ -16,18 +16,18 @@
 }
 
 .ngb-dp-arrow {
-  justify-content: $df-datepicker-navigation-arrow-justify-contents;
+  justify-content: var(--#{$prefix}datepicker-navigation-arrow-justify-contents);
 
   .ngb-dp-arrow-btn {
     padding-right: 0;
     padding-left: 0;
-    min-width: $df-datepicker-arrow-width;
-    height: $df-datepicker-arrow-height;
-    border-radius: $df-datepicker-arrow-border-radius;
+    min-width: var(--#{$prefix}datepicker-arrow-width);
+    height: var(--#{$prefix}datepicker-arrow-height);
+    border-radius: var(--#{$prefix}datepicker-arrow-border-radius);
     @extend %df-icon-style;
     &:focus {
-      outline: $df-carousel-outline;
-      box-shadow: $df-focused-box-shadow;
+      outline: $df-datepicker-focused-outline;
+      box-shadow: $df-datepicker-focused-box-shadow;
     }
     text-decoration: none;
     &:not(:disabled):not(.disabled):active {
@@ -36,7 +36,7 @@
     }
     &:disabled,
     &.disabled {
-      color: $df-datepicker-arrow-disabled-color;
+      color: var(--#{$prefix}datepicker-arrow-disabled-color);
     }
   }
 
@@ -63,153 +63,209 @@
   }
 }
 
+// Flag Angular
 // stylelint-disable-next-line selector-type-no-unknown
 ngb-datepicker {
-  border: $df-datepicker-panel-border;
-  padding: $df-datepicker-padding;
+  --#{$prefix}datepicker-padding-deactivate: #{$df-datepicker-padding-deactivate};
+  --#{$prefix}datepicker-padding: #{$df-datepicker-padding};
+  --#{$prefix}datepicker-box-shadow: #{$df-datepicker-box-shadow};
+  --#{$prefix}datepicker-radius: #{$df-datepicker-radius};
+  --#{$prefix}datepicker-navigation-arrow-justify-contents: #{$df-datepicker-navigation-arrow-justify-contents};
+  --#{$prefix}datepicker-navigation-arrow-flex: #{$df-datepicker-navigation-arrow-flex};
+  --#{$prefix}datepicker-navigation-literal-font-size: #{$df-datepicker-navigation-literal-font-size};
+  --#{$prefix}datepicker-navigation-literal-font-weight: #{$df-datepicker-navigation-literal-font-weight};
+  --#{$prefix}datepicker-navigation-arrow-color: #{$df-datepicker-navigation-arrow-color};
+  --#{$prefix}datepicker-navigation-literal-flex: #{$df-datepicker-navigation-literal-flex};
+  --#{$prefix}datepicker-day-side: #{$df-datepicker-day-side};
+  --#{$prefix}datepicker-weekday-font-style: #{$df-datepicker-weekday-font-style};
+  --#{$prefix}datepicker-weekday-font-size: #{$df-datepicker-weekday-font-size};
+  --#{$prefix}datepicker-weekday-text-transform: #{$df-datepicker-weekday-text-transform};
+  --#{$prefix}datepicker-day-font-weight: #{$df-datepicker-day-font-weight};
+  --#{$prefix}datepicker-day-align-items: #{$df-datepicker-day-align-items};
+  --#{$prefix}datepicker-day-display: #{$df-datepicker-day-display};
+  --#{$prefix}datepicker-day-size: #{$df-datepicker-day-size};
+  --#{$prefix}datepicker-day-justify-content: #{$df-datepicker-day-justify-content};
+  --#{$prefix}datepicker-day-border-radius: #{$df-datepicker-day-border-radius};
+  --#{$prefix}datepicker-day-text-align: #{$df-datepicker-day-text-align};
+  --#{$prefix}datepicker-day-disabled-color: #{$df-datepicker-day-disabled-color};
+  --#{$prefix}datepicker-day-disabled-opacity: #{$df-datepicker-day-disabled-opacity};
+  --#{$prefix}datepicker-day-disabled-cursor: #{$df-datepicker-day-disabled-cursor};
+  --#{$prefix}datepicker-day-active-bg-color: #{$df-datepicker-day-active-bg-color};
+  --#{$prefix}datepicker-day-active-color: #{$df-datepicker-day-active-color};
+  --#{$prefix}datepicker-day-hover-bg-color: #{$df-datepicker-day-hover-bg-color};
+  --#{$prefix}datepicker-day-hover-color: #{$df-datepicker-day-hover-color};
+  --#{$prefix}datepicker-day-hover-text-decoration: #{$df-datepicker-day-hover-text-decoration};
+  --#{$prefix}datepicker-day-focus-outline-width: #{$df-datepicker-day-focus-outline-width};
+  --#{$prefix}datepicker-day-focus-outline: #{$df-datepicker-day-focus-outline};
+  --#{$prefix}datepicker-day-focus-border: #{$df-datepicker-day-focus-border};
+  --#{$prefix}datepicker-day-focus-active-z-index: #{$df-datepicker-day-focus-active-z-index};
+  --#{$prefix}datepicker-day-focus-active-border-color: #{$df-datepicker-day-focus-active-border-color};
+  --#{$prefix}datepicker-day-focus-active-border-z-index: #{$df-datepicker-day-focus-active-border-z-index};
+  --#{$prefix}datepicker-day-range-bg-color: #{$df-datepicker-day-range-bg-color};
+  --#{$prefix}datepicker-day-range-color: #{$df-datepicker-day-range-color};
+  --#{$prefix}datepicker-input-invalid-color: #{$df-datepicker-input-invalid-color};
+  --#{$prefix}datepicker-input-invalid-z-index: #{$df-datepicker-input-invalid-z-index};
+  --#{$prefix}datepicker-menu-border: #{$df-datepicker-menu-border};
+  --#{$prefix}datepicker-panel-border: #{$df-datepicker-panel-border};
+  --#{$prefix}datepicker-range-dropdown-padding: #{$df-datepicker-range-dropdown-padding};
+  --#{$prefix}datepicker-range-dropdown-border: #{$df-datepicker-range-dropdown-border};
+  --#{$prefix}input-datepicker-range-border: #{$df-input-datepicker-range-border};
+  --#{$prefix}input-datepicker-range-white-space: #{$df-input-datepicker-range-white-space};
+  --#{$prefix}input-datepicker-range-padding: #{$df-input-datepicker-range-padding};
+  --#{$prefix}input-datepicker-range-after-display: #{$df-input-datepicker-range-after-display};
+  --#{$prefix}datepicker-arrow-width: #{$df-datepicker-arrow-width};
+  --#{$prefix}datepicker-arrow-height: #{$df-datepicker-arrow-height};
+  --#{$prefix}datepicker-arrow-border-radius: #{$df-datepicker-arrow-border-radius};
+  --#{$prefix}datepicker-arrow-disabled-color: #{$df-datepicker-arrow-disabled-color};
+
+  border: var(--#{$prefix}datepicker-panel-border) !important;
+  padding: var(--#{$prefix}datepicker-padding);
   &.dropdown-menu.show {
-    padding: $df-datepicker-padding;
-    box-shadow: $df-datepicker-box-shadow;
-    border: $df-datepicker-menu-border;
-    border-radius: $df-datepicker-radius;
-  }
-
-  .ngb-dp- {
-    &header {
-      background-color: inherit;
-      padding-top: $df-datepicker-padding-deactivate;
-    }
-    &month {
-      &:first-child .ngb-dp-week {
-        @include ltr {
-          padding-left: $df-datepicker-padding-deactivate;
-        }
-        @include rtl {
-          padding-right: $df-datepicker-padding-deactivate;
-        }
+    padding: var(--#{$prefix}datepicker-padding);
+    box-shadow: var(--#{$prefix}datepicker-box-shadow);
+    border: var(--#{$prefix}datepicker-menu-border);
+    border-radius: var(--#{$prefix}datepicker-radius);
+  }
+
+  .ngb-dp-header {
+    background-color: inherit;
+    padding-top: var(--#{$prefix}datepicker-padding-deactivate);
+  }
+  .ngb-dp-month {
+    &:first-child .ngb-dp-week {
+      @include ltr {
+        padding-left: var(--#{$prefix}datepicker-padding-deactivate);
       }
-      &:last-child .ngb-dp-week {
-        @include ltr {
-          padding-right: $df-datepicker-padding-deactivate;
-        }
-        @include rtl {
-          padding-left: $df-datepicker-padding-deactivate;
-        }
+      @include rtl {
+        padding-right: var(--#{$prefix}datepicker-padding-deactivate);
       }
-      .ngb-dp-week:last-child {
-        padding-bottom: $df-datepicker-padding-deactivate;
+    }
+    &:last-child .ngb-dp-week {
+      @include ltr {
+        padding-right: var(--#{$prefix}datepicker-padding-deactivate);
       }
-      &-name {
-        background-color: inherit;
-        font-size: $df-datepicker-navigation-literal-font-size;
-        font-weight: $df-datepicker-navigation-literal-font-weight;
-        flex: $df-datepicker-navigation-literal-flex;
+      @include rtl {
+        padding-left: var(--#{$prefix}datepicker-padding-deactivate);
       }
     }
-
-    &arrow {
-      flex: $df-datepicker-navigation-arrow-flex;
-      width: $df-datepicker-day-size;
-      height: $df-datepicker-day-size;
-      button.btn {
-        color: $df-datepicker-navigation-arrow-color;
-      }
+    .ngb-dp-week:last-child {
+      padding-bottom: var(--#{$prefix}datepicker-padding-deactivate);
     }
+  }
+  .ngb-dp-month-name {
+    background-color: inherit;
+    font-size: var(--#{$prefix}datepicker-navigation-literal-font-size);
+    font-weight: var(--#{$prefix}datepicker-navigation-literal-font-weight);
+    flex: var(--#{$prefix}datepicker-navigation-literal-flex);
+  }
 
-    &weekday {
-      color: inherit;
-      width: $df-datepicker-day-side;
-      font-style: $df-datepicker-weekday-font-style;
-      font-size: $df-datepicker-weekday-font-size;
-      text-transform: $df-datepicker-weekday-text-transform;
-      &s {
-        background-color: inherit !important; //TODO: remove it when not needed (probably next ng-bootstrap upgrade)
-        border: none;
-      }
+  .ngb-dp-arrow {
+    flex: var(--#{$prefix}datepicker-navigation-arrow-flex);
+    width: var(--#{$prefix}datepicker-day-size);
+    height: var(--#{$prefix}datepicker-day-size);
+    button.btn {
+      color: var(--#{$prefix}datepicker-navigation-arrow-color);
     }
+  }
 
-    &week-number {
-      min-width: $df-datepicker-day-size;
-    }
+  .ngb-dp-weekday {
+    color: inherit;
+    width: var(--#{$prefix}datepicker-day-side);
+    font-style: var(--#{$prefix}datepicker-weekday-font-style);
+    font-size: var(--#{$prefix}datepicker-weekday-font-size);
+    text-transform: var(--#{$prefix}datepicker-weekday-text-transform);
+  }
 
-    &day {
-      width: $df-datepicker-day-side;
-      height: $df-datepicker-day-side;
-      outline: none;
-      &.disabled {
-        // override the default look
-        cursor: initial;
-        pointer-events: initial;
-      }
+  .ngb-dp-week-number {
+    min-width: var(--#{$prefix}datepicker-day-size);
+  }
+
+  .ngb-dp-day {
+    width: var(--#{$prefix}datepicker-day-side);
+    height: var(--#{$prefix}datepicker-day-side);
+    outline: var(--#{$prefix}datepicker-day-focus-outline);
+    &.disabled {
+      // override the default look
+      cursor: initial;
+      pointer-events: initial;
     }
   }
 }
 .df-datepicker-date {
-  height: $df-datepicker-day-size;
-  width: $df-datepicker-day-size;
-  text-align: $df-datepicker-day-text-align;
-  border-radius: $df-datepicker-day-border-radius;
-  display: $df-datepicker-day-display;
-  align-items: $df-datepicker-day-align-items;
-  justify-content: $df-datepicker-day-justify-content;
-  &.df-datepicker-date- {
-    &disabled {
-      color: $df-datepicker-day-disabled-color;
-      opacity: $df-datepicker-day-disabled-opacity;
-      cursor: $df-datepicker-day-disabled-cursor;
-    }
-    &selected {
-      background-color: $df-datepicker-day-active-bg-color;
-      color: $df-datepicker-day-active-color;
-      font-weight: $df-datepicker-day-bold;
-    }
-    &focused,
-    .ngb-dp-arrow button:focus {
-      border: 0px none;
-      position: relative;
-      &:after {
-        content: '';
-        display: block;
-        position: absolute;
-        top: -$df-datepicker-day-focus-outline-width;
-        bottom: -$df-datepicker-day-focus-outline-width;
-        left: -$df-datepicker-day-focus-outline-width;
-        right: -$df-datepicker-day-focus-outline-width;
-        border-radius: $df-datepicker-day-border-radius + $df-datepicker-day-focus-outline-width;
-        border: $df-datepicker-day-focus-border;
-      }
+  height: var(--#{$prefix}datepicker-day-size);
+  width: var(--#{$prefix}datepicker-day-size);
+  text-align: var(--#{$prefix}datepicker-day-text-align);
+  border-radius: var(--#{$prefix}datepicker-day-border-radius);
+  display: var(--#{$prefix}datepicker-day-display);
+  align-items: var(--#{$prefix}datepicker-day-align-items);
+  justify-content: var(--#{$prefix}datepicker-day-justify-content);
+
+  &.holiday {
+    // important is needed because of the view encapsulation of ng-bootstrap
+    color: #{shades-css-var('orange', 'bg-color', true)} !important;
+    background-color:  #{shades-css-var('orange', 'bg-color')} !important;
+  }
+
+  &.df-datepicker-date-disabled {
+    color: var(--#{$prefix}datepicker-day-disabled-color);
+    opacity: var(--#{$prefix}datepicker-day-disabled-opacity);
+    cursor: var(--#{$prefix}datepicker-day-disabled-cursor);
+  }
+  &.df-datepicker-date-selected {
+    background-color: var(--#{$prefix}datepicker-day-active-bg-color);
+    color: var(--#{$prefix}datepicker-day-active-color);
+    font-weight: var(--#{$prefix}datepicker-day-font-weight);
+  }
+  &.df-datepicker-date-focused,
+  .ngb-dp-arrow button:focus {
+    border: 0px none;
+    position: relative;
+    &:after {
+      content: '';
+      display: block;
+      position: absolute;
+      top: calc(-1 * var(--#{$prefix}datepicker-day-focus-outline-width));
+      bottom: calc(-1 * var(--#{$prefix}datepicker-day-focus-outline-width));
+      left: calc(-1 * var(--#{$prefix}datepicker-day-focus-outline-width));
+      right: calc(-1 * var(--#{$prefix}datepicker-day-focus-outline-width));
+      border-radius: var(--#{$prefix}datepicker-day-border-radius) + var(--#{$prefix}datepicker-day-focus-outline-width);
+      border: var(--#{$prefix}datepicker-day-focus-border);
     }
   }
+
   &:not(.df-datepicker-date-disabled):not(.df-datepicker-date-selected):hover {
-    background-color: $df-datepicker-day-hover-color;
-    color: color-contrast($df-datepicker-day-hover-color);
-    text-decoration: $df-datepicker-day-hover-text-decoration;
+    background-color: var(--#{$prefix}datepicker-day-hover-bg-color);
+    color: var(--#{$prefix}datepicker-day-hover-color);
+    text-decoration: var(--#{$prefix}datepicker-day-hover-text-decoration);
   }
+
   &.df-datepicker-date-from {
-    border-radius: $df-datepicker-day-border-radius 0 0 $df-datepicker-day-border-radius;
+    border-radius: var(--#{$prefix}datepicker-day-border-radius) 0 0 var(--#{$prefix}datepicker-day-border-radius);
     &.df-datepicker-date-focused:after {
-      border-radius: $df-datepicker-day-border-radius 0 0 $df-datepicker-day-border-radius;
+      border-radius: var(--#{$prefix}datepicker-day-border-radius) 0 0 var(--#{$prefix}datepicker-day-border-radius);
     }
   }
+
   &.df-datepicker-date-to {
-    border-radius: 0 $df-datepicker-day-border-radius $df-datepicker-day-border-radius 0;
+    border-radius: 0 var(--#{$prefix}datepicker-day-border-radius) var(--#{$prefix}datepicker-day-border-radius) 0;
     &.df-datepicker-date-focused:after {
-      border-radius: 0 $df-datepicker-day-border-radius $df-datepicker-day-border-radius 0;
+      border-radius: 0 var(--#{$prefix}datepicker-day-border-radius) var(--#{$prefix}datepicker-day-border-radius) 0;
     }
   }
+
   &.df-datepicker-date-between {
     border-radius: 0;
     &.df-datepicker-date-focused:after {
       border-radius: 0;
     }
-    background-color: $df-datepicker-day-range-background-color;
-    color: $df-datepicker-day-range-color;
-    font-weight: $df-datepicker-day-bold;
+    background-color: var(--#{$prefix}datepicker-day-range-bg-color);
+    color: var(--#{$prefix}datepicker-day-range-color);
+    font-weight: var(--#{$prefix}datepicker-day-font-weight);
   }
 }
 
 .ngb-dp-today .df-datepicker-date {
-  font-weight: $df-datepicker-day-bold;
+  font-weight: var(--#{$prefix}datepicker-day-font-weight);
   position: relative;
   &:before {
     content: '.';
@@ -232,20 +288,20 @@ ngb-datepicker {
 }
 
 .df-datepicker-range-dropdown {
-  padding: $df-datepicker-range-dropdown-padding;
-  border: $df-datepicker-range-dropdown-border;
+  padding: var(--#{$prefix}datepicker-range-dropdown-padding);
+  border: var(--#{$prefix}datepicker-range-dropdown-border);
 }
 
 .df-input-datepicker-range {
   &.df-focused {
-    border: $df-input-datepicker-range-border;
+    border: var(--#{$prefix}input-datepicker-range-border);
   }
   .dropdown-toggle {
-    white-space: $df-input-datepicker-range-white-space;
-    padding: $df-input-datepicker-range-padding;
+    white-space: var(--#{$prefix}input-datepicker-range-white-space);
+    padding: var(--#{$prefix}input-datepicker-range-padding) !important;
     &:after {
       // TODO remove this when it is possible to remove the arrow from ng-bootstrap feature
-      display: $df-input-datepicker-range-after-display;
+      display: var(--#{$prefix}input-datepicker-range-after-display);
     }
   }
 }

package/styles/scss/components/datepicker/_datepicker.variables.scss

@@ -2,7 +2,7 @@
 
 $df-datepicker-padding-deactivate: 0 !default;
 $df-datepicker-padding: 1rem !default;
-$df-datepicker-box-shadow: $df-box-shadow !default;
+$df-datepicker-box-shadow: var(--#{$prefix}box-shadow) !default;
 $df-datepicker-radius: 0.25rem !default;
 $df-datepicker-navigation-arrow-justify-contents: space-between !default;
 $df-datepicker-navigation-arrow-flex: 0 1 auto !default;
@@ -10,43 +10,50 @@ $df-datepicker-navigation-literal-font-size: map.get($df-size-ratios, 'lg') * 1r
 $df-datepicker-navigation-literal-font-weight: $df-font-weight-semi-bold !default;
 $df-datepicker-navigation-arrow-color: $gray-600 !default;
 $df-datepicker-navigation-literal-flex: 1 0 auto !default;
-$df-datepicker-day-side: 100% !default;
 $df-datepicker-weekday-font-style: normal !default;
 $df-datepicker-weekday-font-size: 90% !default;
 $df-datepicker-weekday-text-transform: uppercase !default;
-$df-datepicker-day-bold: bold !default;
+$df-datepicker-day-side: 100% !default;
+$df-datepicker-day-font-weight: bold !default;
 $df-datepicker-day-align-items: center !default;
 $df-datepicker-day-display: flex !default;
 $df-datepicker-day-size: 2.25rem !default;
 $df-datepicker-day-justify-content: center !default;
 $df-datepicker-day-border-radius: 0.125rem !default;
 $df-datepicker-day-text-align: center !default;
-$df-datepicker-day-disabled-color: $df-disabled-color !default;
-$df-datepicker-day-disabled-opacity: $df-disabled-opacity !default;
-$df-datepicker-day-disabled-cursor: $df-disabled-cursor !default;
-$df-datepicker-day-active-bg-color: $primary !default;
-$df-datepicker-day-active-color: color-contrast($df-datepicker-day-active-bg-color) !default;
-$df-datepicker-day-hover-color: $df-hover-bg-color !default;
-$df-datepicker-day-hover-text-decoration: underline !default;
+$df-datepicker-day-focus-outline: var(--#{$prefix}focus-outline) !default;
+$df-datepicker-day-disabled-color: var(--#{$prefix}disabled-color) !default;
+$df-datepicker-day-disabled-opacity: var(--#{$prefix}disabled-opacity) !default;
+$df-datepicker-day-disabled-cursor: var(--#{$prefix}disabled-cursor) !default;
+$df-datepicker-day-active-bg-color: shades-css-var('primary', 'bg-color') !default;
+$df-datepicker-day-active-color: shades-css-var('primary', 'bg-color', true) !default;
+$df-datepicker-day-hover-bg-color: $df-hover-bg-color !default;
+$df-datepicker-day-hover-color: color-contrast($df-datepicker-day-hover-bg-color) !default;
+$df-datepicker-day-hover-text-decoration: underline !default; // why underline here add the reason with UX
 $df-datepicker-day-focus-outline-width: 0.2rem !default;
 $df-datepicker-day-focus-border: ($df-datepicker-day-focus-outline-width + 0.05rem) solid
   rgba($input-focus-border-color, 0.5) !default;
 $df-datepicker-day-focus-active-z-index: 0 !default;
 $df-datepicker-day-focus-active-border-color: rgba($white, 0.5) !default;
 $df-datepicker-day-focus-active-border-z-index: -1 !default;
-$df-datepicker-day-range-background-color: $df-primary-lighten-60 !default;
-$df-datepicker-day-range-color: $primary !default;
+$df-datepicker-day-range-bg-color: $df-primary-lighten-60 !default;
+$df-datepicker-day-range-color: shades-css-var('primary', 'bg-color') !default;
 $df-datepicker-input-invalid-color: $danger !default;
 $df-datepicker-input-invalid-z-index: 3 !default;
 $df-datepicker-menu-border: $border-width solid $border-color !default;
-$df-datepicker-panel-border: $df-datepicker-menu-border !important !default;
+// TODO open an issue in ng-bootstrap about the --bs-border-color not correctly prefixed
+// that we could use to change the color of the border
+$df-datepicker-panel-border: $df-datepicker-menu-border !default;
 $df-datepicker-range-dropdown-padding: 0 !default;
 $df-datepicker-range-dropdown-border: none !default;
 $df-input-datepicker-range-border: none !default;
 $df-input-datepicker-range-white-space: initial !default;
-$df-input-datepicker-range-padding: 0 !important !default;
+$df-input-datepicker-range-padding: 0 !default;
 $df-input-datepicker-range-after-display: none !default;
+$df-datepicker-arrow-focus-outline: var(--#{$prefix}focus-outline) !default;
 $df-datepicker-arrow-width: 2.25rem !default;
 $df-datepicker-arrow-height: $df-datepicker-arrow-width !default;
 $df-datepicker-arrow-border-radius: 50% !default;
-$df-datepicker-arrow-disabled-color: $df-disabled-color !default;
+$df-datepicker-arrow-disabled-color: var(--#{$prefix}disabled-color) !default;
+$df-datepicker-focused-box-shadow: $df-focused-box-shadow !default;
+$df-datepicker-focused-outline: var(--#{$prefix}focus-outline) !default;

package/styles/scss/components/dropdown/_dropdown.mixins.scss

@@ -9,18 +9,18 @@
 
 @mixin df-dropdown-orientation($ltr-right, $ltr-left) {
   .dropdown-toggle:not(.df-standalone-dropdown-toggle) {
-    padding-#{$ltr-right}: $df-dropdown-toggle-padding;
+    padding-#{$ltr-right}: var(--#{$prefix}dropdown-toggle-padding);
     &:after {
-      margin-#{$ltr-left}: $df-dropdown-toggle-margin;
+      margin-#{$ltr-left}: var(--#{$prefix}dropdown-toggle-margin);
     }
     & > [class*='icon-']:before {
-      margin-#{$ltr-right}: $df-dropdown-toggle-margin;
+      margin-#{$ltr-right}: var(--#{$prefix}dropdown-toggle-margin);
     }
   }
   .dropdown-menu {
     text-align: #{$ltr-left};
   }
   .btn-primary.dropdown-toggle-split {
-    border-#{$ltr-left}-color: $df-dropdown-toggle-border-color-primary;
+    border-#{$ltr-left}-color: var(--#{$prefix}dropdown-toggle-border-color-primary);
   }
 }