@design-factory/design-factory 17.0.0 → 17.0.2

package/styles/scss/components/brand-color/_brand-color_container.scss

@@ -1,8 +1,3 @@
-// stylelint-disable scss/dollar-variable-pattern
-$shade-colors-rgb: map-loop($shade-colors, to-rgb, "$value") !default;
-$shade-colors-text: map-loop($shade-colors, color-contrast, "$value") !default;
-$shade-colors-text-rgb: map-loop($shade-colors-text, to-rgb, "$value") !default;
-
 #{$df-css-namespace-selector} {
   --#{$prefix}dark-primary: #{$dark-primary};
   --#{$prefix}yellow-rgb: #{to-rgb($yellow)};
@@ -25,4 +20,4 @@ $shade-colors-text-rgb: map-loop($shade-colors-text, to-rgb, "$value") !default;
   @each $color, $value in $shade-colors-text-rgb {
     --#{$prefix}#{$color}-color-rgb: #{$value};
   }
-}
+}

package/styles/scss/components/button/_button.scss

@@ -21,6 +21,19 @@
 
   &.disabled,
   &:disabled {
+    .btn-check:checked + &,
+    :not(.btn-check) + &:active,
+    &:first-child:active,
+    &.active,
+    &.show {
+      color: var(--#{$prefix}btn-disabled-color);
+      background-color: var(--#{$prefix}btn-disabled-bg);
+      background-image: if($enable-gradients, none, null);
+      border-color: var(--#{$prefix}btn-disabled-border-color);
+      opacity: var(--#{$prefix}btn-disabled-opacity);
+      @include box-shadow(none);
+    }
+
     cursor: var(--#{$prefix}btn-cursor-disabled);
     pointer-events: auto; // override
   }

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

@@ -32,7 +32,7 @@ $df-datepicker-day-hover-color: color-contrast($df-datepicker-day-hover-bg-color
 $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;
+  rgba(to-rgb($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;

package/styles/scss/components/form/_form.scss

@@ -2,21 +2,15 @@
 @use 'sass:map';
 
 form {
-  --#{$prefix}form-input-disabled-color: #{$df-disabled-input-color};
-  --#{$prefix}form-input-disabled-cursor: #{$df-input-disabled-cursor};
   --#{$prefix}form-sm-label-margin-bottom: #{$df-label-margin-bottom-sm};
   --#{$prefix}form-lg-label-margin-bottom: #{$df-label-margin-bottom-sm}; // strange that we use the same value
-  --#{$prefix}form-feedback-warning-color: #{$df-form-feedback-warning-color};
-  --#{$prefix}form-feedback-help-warning-color: #{$df-form-feedback-help-warning-color};
-  --#{$prefix}form-feedback-warning-icon: #{$df-form-feedback-warning-icon};
-  --#{$prefix}form-check-input-sm-width: #{$df-form-check-input-sm-width};
-  --#{$prefix}form-check-input-lg-width: #{$df-form-check-input-lg-width};
+}
+
+.form-switch {
   --#{$prefix}form-switch-sm-width: #{$df-form-switch-sm-width};
   --#{$prefix}form-switch-sm-height: #{math.div($df-form-switch-sm-width, 2)};
   --#{$prefix}form-switch-lg-width: #{$df-form-switch-lg-width};
   --#{$prefix}form-switch-lg-height: #{math.div($df-form-switch-lg-width, 2)};
-  --#{$prefix}form-check-input-sm-margin-top: #{($line-height-sm - $df-form-check-input-sm-width) * 1};
-  --#{$prefix}form-check-input-lg-margin-top: #{($line-height-lg - $df-form-check-input-lg-width) * 0.5};
 }
 
 .form-inline {
@@ -28,11 +22,13 @@ form {
 }
 
 .form-control {
+  --#{$prefix}form-input-disabled-color: #{$df-disabled-input-color};
+  --#{$prefix}form-input-disabled-cursor: #{$df-input-disabled-cursor};
   @if variable-exists($name: 'df-enableBranding2023') and $df-enableBranding2023 {
     --#{$prefix}box-shadow-color: #{$input-focus-border-color};
   } @else {
     --#{$prefix}border-color-opacity: #{$input-btn-focus-color-opacity};
-    --#{$prefix}box-shadow-color: #{shades-rgba-css-var-with-opacity('primary', 'border-color')}
+    --#{$prefix}box-shadow-color: #{shades-rgba-css-var-with-opacity('primary', 'border-color')};
   }
   &:disabled {
     color: var(--#{$prefix}form-input-disabled-color);
@@ -53,6 +49,20 @@ form {
   }
 }
 
+.form-check-input {
+  --#{$prefix}form-check-input-sm-width: #{$df-form-check-input-sm-width};
+  --#{$prefix}form-check-input-lg-width: #{$df-form-check-input-lg-width};
+  --#{$prefix}form-check-input-sm-margin-top: #{($line-height-sm - $df-form-check-input-sm-width) * 1};
+  --#{$prefix}form-check-input-lg-margin-top: #{($line-height-lg - $df-form-check-input-lg-width) * 0.5};
+
+  @if variable-exists($name: 'df-enableBranding2023') and $df-enableBranding2023 {
+    --#{$prefix}box-shadow-color: #{shades-css-var('primary', 'border-color')};
+  } @else {
+    --#{$prefix}border-color-opacity: #{$input-btn-focus-color-opacity};
+    --#{$prefix}box-shadow-color: #{shades-rgba-css-var-with-opacity('primary', 'border-color')};
+  }
+}
+
 // Override warning state color
 .warning-feedback {
   color: var(--#{$prefix}form-feedback-help-warning-color);
@@ -87,7 +97,7 @@ form {
         --#{$prefix}box-shadow-color: #{shades-css-var($colorName, 'border-color')};
       } @else {
         --#{$prefix}border-color-opacity: #{$input-btn-focus-color-opacity};
-        --#{$prefix}box-shadow-color: #{shades-rgba-css-var-with-opacity($colorName, 'border-color')}
+        --#{$prefix}box-shadow-color: #{shades-rgba-css-var-with-opacity($colorName, 'border-color')};
       }
     }
   }

package/styles/scss/components/form/_form.variables.scss

@@ -17,22 +17,13 @@ $df-form-validation-states-names: (
 $form-validation-states: map.merge(
   (
     'warning': (
-      'color': $df-form-feedback-warning-color,
-      'icon': $df-form-feedback-warning-icon
+      'color': var(--#{$prefix}form-warning-color),
+      'icon': $df-form-feedback-warning-icon,
+      'focus-box-shadow': $input-btn-focus-box-shadow
     )
   ),
   $form-validation-states
 );
-//updating focus box shadows
-@each $state, $data in $form-validation-states {
-  $form-validation-data: map.merge(
-    (
-      'focus-box-shadow': $input-btn-focus-box-shadow
-    ),
-    $data
-  );
-  $form-validation-states: map.set($form-validation-states, $state, $form-validation-data);
-}
 
 $df-form-check-input-sm-width: $form-check-input-width * map.get($df-size-ratios, 'sm') !default;
 $df-form-check-input-lg-width: $form-check-input-width * map.get($df-size-ratios, 'lg') !default;

package/styles/scss/components/inputs/_inputs.mixin.scss

@@ -7,7 +7,7 @@
     @if variable-exists($name: 'df-enableBranding2023') and $df-enableBranding2023 {
       --#{$prefix}box-shadow-color: #{shades-css-var($colorName, 'border-color')};
     } @else {
-      --#{$prefix}box-shadow-color: #{rgba($color, $input-btn-focus-color-opacity)}
+      --#{$prefix}box-shadow-color: rgba(#{to-rgb($color)}, #{$input-btn-focus-color-opacity});
     }
     & ~ .#{$state}-feedback,
     .#{$state}-tooltip {

package/styles/scss/components/popover/_popover_container.scss

@@ -27,8 +27,16 @@
     --#{$prefix}popover-arrow-width: #{$popover-arrow-width};
     --#{$prefix}popover-arrow-height: #{$popover-arrow-height};
     --#{$prefix}popover-arrow-border: var(--#{$prefix}popover-border-color);
+
+    --#{$prefix}popover-margin: #{$df-popover-margin};
+    --#{$prefix}popover-padding: #{$df-popover-padding};
+    --#{$prefix}popover-header-line-height: #{$df-popover-header-line-height};
+    --#{$prefix}popover-header-margin: #{$df-popover-header-default-margin};
+    --#{$prefix}popover-body-margin: #{$df-popover-body-default-margin};
+    --#{$prefix}popover-header-font-size: #{$h3-font-size};
+    --#{$prefix}popover-body-font-size: #{$font-size-base};
     // scss-docs-end popover-css-vars
-  
+
     z-index: var(--#{$prefix}popover-zindex);
     display: block;
     max-width: var(--#{$prefix}popover-max-width);
@@ -43,91 +51,92 @@
     border: var(--#{$prefix}popover-border-width) solid var(--#{$prefix}popover-border-color);
     @include border-radius(var(--#{$prefix}popover-border-radius));
     @include box-shadow(var(--#{$prefix}popover-box-shadow));
-  
+
     &.popover-arrow {
       display: block;
       width: var(--#{$prefix}popover-arrow-width);
       height: var(--#{$prefix}popover-arrow-height);
-  
+
       &::before,
       &::after {
         position: absolute;
         display: block;
-        content: "";
+        content: '';
         border-color: transparent;
         border-style: solid;
         border-width: 0;
       }
     }
   }
-  
+
   &.bs-popover-top {
     > .popover-arrow {
       bottom: calc((var(--#{$prefix}popover-arrow-height) * -1)); // stylelint-disable-line function-disallowed-list
-  
+
       &::before,
       &::after {
-        border-width: var(--#{$prefix}popover-arrow-height) calc(var(--#{$prefix}popover-arrow-width) * .5) 0; // stylelint-disable-line function-disallowed-list
+        border-width: var(--#{$prefix}popover-arrow-height) calc(var(--#{$prefix}popover-arrow-width) * 0.5) 0; // stylelint-disable-line function-disallowed-list
       }
-  
+
       &::before {
         bottom: 0;
         border-top-color: var(--#{$prefix}popover-arrow-border);
       }
-  
+
       &::after {
         bottom: var(--#{$prefix}popover-border-width);
         border-top-color: var(--#{$prefix}popover-bg);
       }
     }
   }
-  
+
   /* rtl:begin:ignore */
   &.bs-popover-end {
     > .popover-arrow {
       left: calc((var(--#{$prefix}popover-arrow-height) * -1)); // stylelint-disable-line function-disallowed-list
       width: var(--#{$prefix}popover-arrow-height);
       height: var(--#{$prefix}popover-arrow-width);
-  
+
       &::before,
       &::after {
-        border-width: calc(var(--#{$prefix}popover-arrow-width) * .5) var(--#{$prefix}popover-arrow-height) calc(var(--#{$prefix}popover-arrow-width) * .5) 0; // stylelint-disable-line function-disallowed-list
+        border-width: calc(var(--#{$prefix}popover-arrow-width) * 0.5) var(--#{$prefix}popover-arrow-height)
+          calc(var(--#{$prefix}popover-arrow-width) * 0.5) 0; // stylelint-disable-line function-disallowed-list
       }
-  
+
       &::before {
         left: 0;
         border-right-color: var(--#{$prefix}popover-arrow-border);
       }
-  
+
       &::after {
         left: var(--#{$prefix}popover-border-width);
         border-right-color: var(--#{$prefix}popover-bg);
       }
     }
   }
-  
+
   /* rtl:end:ignore */
-  
+
   &.bs-popover-bottom {
     > .popover-arrow {
       top: calc((var(--#{$prefix}popover-arrow-height) * -1)); // stylelint-disable-line function-disallowed-list
-  
+
       &::before,
       &::after {
-        border-width: 0 calc(var(--#{$prefix}popover-arrow-width) * .5) var(--#{$prefix}popover-arrow-height); // stylelint-disable-line function-disallowed-list
+        border-width: 0 calc(var(--#{$prefix}popover-arrow-width) * 0.5) var(--#{$prefix}popover-arrow-height); // stylelint-disable-line function-disallowed-list
       }
-  
+
       &::before {
         top: 0;
         border-bottom-color: var(--#{$prefix}popover-arrow-border);
       }
-  
+
       &::after {
         top: var(--#{$prefix}popover-border-width);
         border-bottom-color: var(--#{$prefix}popover-bg);
       }
     }
-  
+
     // This will remove the popover-header's border just below the arrow
     .popover-header::before {
       position: absolute;
@@ -135,53 +144,54 @@
       left: 50%;
       display: block;
       width: var(--#{$prefix}popover-arrow-width);
-      margin-left: calc(var(--#{$prefix}popover-arrow-width) * -.5); // stylelint-disable-line function-disallowed-list
-      content: "";
+      margin-left: calc(var(--#{$prefix}popover-arrow-width) * -0.5); // stylelint-disable-line function-disallowed-list
+      content: '';
       border-bottom: var(--#{$prefix}popover-border-width) solid var(--#{$prefix}popover-header-bg);
     }
   }
-  
+
   /* rtl:begin:ignore */
   &.bs-popover-start {
     > .popover-arrow {
       right: calc((var(--#{$prefix}popover-arrow-height) * -1)); // stylelint-disable-line function-disallowed-list
       width: var(--#{$prefix}popover-arrow-height);
       height: var(--#{$prefix}popover-arrow-width);
-  
+
       &::before,
       &::after {
-        border-width: calc(var(--#{$prefix}popover-arrow-width) * .5) 0 calc(var(--#{$prefix}popover-arrow-width) * .5) var(--#{$prefix}popover-arrow-height); // stylelint-disable-line function-disallowed-list
+        border-width: calc(var(--#{$prefix}popover-arrow-width) * 0.5) 0
+          calc(var(--#{$prefix}popover-arrow-width) * 0.5) var(--#{$prefix}popover-arrow-height); // stylelint-disable-line function-disallowed-list
       }
-  
+
       &::before {
         right: 0;
         border-left-color: var(--#{$prefix}popover-arrow-border);
       }
-  
+
       &::after {
         right: var(--#{$prefix}popover-border-width);
         border-left-color: var(--#{$prefix}popover-bg);
       }
     }
   }
-  
+
   /* rtl:end:ignore */
-  
+
   &.bs-popover-auto {
-    &[data-popper-placement^="top"] {
+    &[data-popper-placement^='top'] {
       @extend .bs-popover-top;
     }
-    &[data-popper-placement^="right"] {
+    &[data-popper-placement^='right'] {
       @extend .bs-popover-end;
     }
-    &[data-popper-placement^="bottom"] {
+    &[data-popper-placement^='bottom'] {
       @extend .bs-popover-bottom;
     }
-    &[data-popper-placement^="left"] {
+    &[data-popper-placement^='left'] {
       @extend .bs-popover-start;
     }
   }
-  
+
   // Offset the popover to account for the popover arrow
   &.popover-header {
     padding: var(--#{$prefix}popover-header-padding-y) var(--#{$prefix}popover-header-padding-x);
@@ -191,15 +201,14 @@
     background-color: var(--#{$prefix}popover-header-bg);
     border-bottom: var(--#{$prefix}popover-border-width) solid var(--#{$prefix}popover-border-color);
     @include border-top-radius(var(--#{$prefix}popover-inner-border-radius));
-  
+
     &:empty {
       display: none;
     }
   }
-  
+
   &.popover-body {
     padding: var(--#{$prefix}popover-body-padding-y) var(--#{$prefix}popover-body-padding-x);
     color: var(--#{$prefix}popover-body-color);
   }
-  
 }

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

@@ -1,5 +1,10 @@
 @use 'sass:map';
 
+.form-select,
+.ng-select {
+  --#{$prefix}form-select-focus-border-color: #{$form-select-focus-border-color};
+}
+
 /* Native select */
 .form-select {
   --#{$prefix}box-shadow-color: #{$input-focus-border-color};
@@ -13,14 +18,14 @@
         --#{$prefix}box-shadow-color: #{shades-css-var($colorName, 'border-color')};
       } @else {
         --#{$prefix}border-color-opacity: #{$input-btn-focus-color-opacity};
-        --#{$prefix}box-shadow-color: #{shades-rgba-css-var-with-opacity($colorName, 'border-color')}
+        --#{$prefix}box-shadow-color: #{shades-rgba-css-var-with-opacity($colorName, 'border-color')};
       }
     }
   }
 
   &:focus {
     // override
-    border-color: $input-focus-border-color;
+    border-color: var(--#{$prefix}form-select-focus-border-color);
   }
 
   &:not([disabled]) {
@@ -40,13 +45,13 @@
   &:not([multiple]):disabled {
     // override
     @include ltr {
-      background: $form-select-disabled-bg var(--#{$prefix}select-indicator-disabled) no-repeat right $form-select-padding-x
-        center;
+      background: $form-select-disabled-bg var(--#{$prefix}select-indicator-disabled) no-repeat right
+        $form-select-padding-x center;
       background-size: $form-select-bg-size;
     }
     @include rtl {
-      background: $form-select-disabled-bg var(--#{$prefix}select-indicator-disabled) no-repeat left $form-select-padding-x
-        center;
+      background: $form-select-disabled-bg var(--#{$prefix}select-indicator-disabled) no-repeat left
+        $form-select-padding-x center;
       background-size: $form-select-bg-size;
     }
   }
@@ -172,9 +177,9 @@
     --#{$prefix}box-shadow-color: #{$input-focus-border-color};
   } @else {
     --#{$prefix}border-color-opacity: #{$input-btn-focus-color-opacity};
-    --#{$prefix}box-shadow-color: #{shades-rgba-css-var-with-opacity('primary', 'border-color')}
+    --#{$prefix}box-shadow-color: #{shades-rgba-css-var-with-opacity('primary', 'border-color')};
   }
-  
+
   &.form-control {
     // add
     padding: 0;
@@ -278,7 +283,7 @@
       }
     }
   }
-   &.df-ng-select-readonly {
+  &.df-ng-select-readonly {
     // add
     > .ng-select-container {
       background-color: var(--#{$prefix}select-readonly-bg);
@@ -303,7 +308,7 @@
         --#{$prefix}box-shadow-color: #{shades-css-var($colorName, 'border-color')};
       } @else {
         --#{$prefix}border-color-opacity: #{$input-btn-focus-color-opacity};
-        --#{$prefix}box-shadow-color: #{shades-rgba-css-var-with-opacity($colorName, 'border-color')}
+        --#{$prefix}box-shadow-color: #{shades-rgba-css-var-with-opacity($colorName, 'border-color')};
       }
       $color: map.get($data, color);
       $box-shadow: $df-select-input-box-shadow;
@@ -564,7 +569,6 @@
     }
   }
 
-
   .ng-spinner-zone {
     padding-right: 0.3125rem; // todo check when feature is needed
     padding-top: 0.3125rem; // todo check when feature is needed
@@ -797,4 +801,4 @@
       }
     }
   }
-}
+}

package/styles/scss/components/stepper/_stepper.mixins.scss

@@ -36,7 +36,67 @@
     $valuebghovercolor: shades-css-var($name, 'bg-subtle-hover-color');
     $valueactive: shades-css-var($name, 'text-active-color');
   }
+
   .df-stepper-step-#{$state} {
+    &.btn {
+      &:not(:disabled):not(.disabled) {
+        &:hover,
+        &:hover .df-stepper-label {
+          // override the btn-link feature
+          color: $valuehover;
+          text-decoration: var(--#{$prefix}stepper-text-decoration-hover);
+          background-color: $valuebghovercolor;
+          // Icon with number outline variant
+          .df-stepper-outline-number-#{$state} {
+            @include df-stepper-fill-number($valuehover, $df-stepper-outline-bg-color, $valuehover);
+          }
+          // Icon with number plain version
+          .df-stepper-number-#{$state} {
+            @include df-stepper-fill-number($df-stepper-icon-color, $valuehover, $valuehover);
+          }
+          .df-stepper-icon::before {
+            background-color: $valuehover;
+          }
+        }
+        &:focus:not(:hover),
+        &:focus:not(:hover) .df-stepper-label {
+          text-decoration: var(--#{$prefix}stepper-text-decoration-focus);
+          color: $value;
+        }
+        &.active,
+        &.active .df-stepper-label {
+          text-decoration: var(--#{$prefix}stepper-text-decoration-active);
+          font-weight: $df-font-weight-semi-bold;
+        }
+        &:hover.active,
+        &:hover.active .df-stepper-label {
+          color: $valuehover;
+          .df-stepper-number-#{$state} {
+            @include df-stepper-fill-number($df-stepper-icon-color, $valuehover, $valuehover);
+          }
+        }
+        &:not(:hover).active,
+        &:not(:hover).active .df-stepper-label {
+          color: $valueactive;
+          .df-stepper-number-#{$state} {
+            @include df-stepper-fill-number($df-stepper-icon-color, $valueactive, $valueactive);
+          }
+        }
+        @if variable-exists($name: 'df-enableBranding2023') and $df-enableBranding2023 {
+          &.btn-link:focus {
+            --#{$prefix}box-shadow-color: #{$value};
+            &:hover {
+              --#{$prefix}box-shadow-color: #{$valuehover};
+            }
+            &:active:not(:hover),
+            &.active:not(:hover) {
+              --#{$prefix}box-shadow-color: #{$valueactive};
+            }
+            box-shadow: $df-btn-focus-box-shadow;
+          }
+        }
+      }
+    }
     // Icon with number outline variant
     .df-stepper-outline-number-#{$state} {
       @include df-stepper-common-number();
@@ -47,7 +107,7 @@
       @include df-stepper-common-number();
       @include df-stepper-fill-number($df-stepper-icon-color, $value, $value);
     }
-    
+
     .df-stepper-optional-label {
       // todo correct this
       text-align: var(--#{$prefix}stepper-optional-label-text-align);
@@ -69,57 +129,6 @@
       }
     }
     color: $value; // override btn-link
-    &:not(:disabled):not(.disabled) {
-      &:hover, &:hover .df-stepper-label {
-        // override the btn-link feature
-        color: $valuehover;
-        text-decoration: var(--#{$prefix}stepper-text-decoration-hover);
-        background-color: $valuebghovercolor;
-        // Icon with number outline variant
-        .df-stepper-outline-number-#{$state} {
-          @include df-stepper-fill-number($valuehover, $df-stepper-outline-bg-color, $valuehover);
-        }
-        // Icon with number plain version
-        .df-stepper-number-#{$state} {
-          @include df-stepper-fill-number($df-stepper-icon-color, $valuehover, $valuehover);
-        }
-        .df-stepper-icon::before {
-          background-color: $valuehover;
-        }
-      }
-      &:focus:not(:hover), &:focus:not(:hover) .df-stepper-label {
-        text-decoration: var(--#{$prefix}stepper-text-decoration-focus);
-        color: $value;
-      }
-      &.active, &.active .df-stepper-label {
-        text-decoration: var(--#{$prefix}stepper-text-decoration-active);
-        font-weight: $df-font-weight-semi-bold;
-      }
-      &:hover.active, &:hover.active .df-stepper-label {
-        color: $valuehover;
-        .df-stepper-number-#{$state} {
-          @include df-stepper-fill-number($df-stepper-icon-color, $valuehover, $valuehover);
-        }
-      }
-      &:not(:hover).active, &:not(:hover).active .df-stepper-label {
-        color: $valueactive;
-        .df-stepper-number-#{$state} {
-          @include df-stepper-fill-number($df-stepper-icon-color, $valueactive, $valueactive);
-        }
-      }
-      @if variable-exists($name: 'df-enableBranding2023') and $df-enableBranding2023 {
-        &.btn-link:focus {
-          --#{$prefix}box-shadow-color: #{$value};
-          &:hover {
-            --#{$prefix}box-shadow-color: #{$valuehover};
-          }
-          &:active:not(:hover), &.active:not(:hover) {
-            --#{$prefix}box-shadow-color: #{$valueactive};
-          }
-          box-shadow: $df-btn-focus-box-shadow;
-        }
-      }
-    }
   }
 }
 
@@ -145,9 +154,7 @@
   .df-stepper-step {
     /* stepper icon color*/
     @each $state, $name in $df-stepper-steps-colors {
-      @include df-stepper-icon-variant-size(
-        $state
-      );
+      @include df-stepper-icon-variant-size($state);
     }
   }
 }