@design-factory/design-factory 17.0.0 → 17.0.1

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/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/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);
     }
   }
 }

package/styles/scss/themes/brand2023/_variables.scss

@@ -424,16 +424,16 @@ $shade-maps: () !default;
 $shade-maps: map.set($shade-maps, 'dark-primary', $dark-primaries-mapping);
 // stylelint-enable  scss/dollar-variable-default
 
-$body-bg: var(--#{$prefix}white) !default;
-$body-color: var(--#{$prefix}gray-900) !default;
-$color-contrast-dark: $gray-900 !default; // should be same as $body-color but not a CSS var
+$body-bg: $white !default;
+$body-color: $gray-900 !default;
+$color-contrast-dark: $body-color !default; // should be same as $body-color but not a CSS var
 $df-disabled-color: var(--#{$prefix}gray-400) !default;
 $df-disabled-bg-color: var(--#{$prefix}gray-200) !default;
 $df-focused-inset-box-shadow:
-  inset 0 0 0 2px var(--#{$prefix}inner-box-shadow-color, $body-bg),
+  inset 0 0 0 2px var(--#{$prefix}inner-box-shadow-color, var(--#{$prefix}body-bg)),
   inset 0 0 0 4px var(--#{$prefix}box-shadow-color, $primary) !default;
 $input-btn-focus-box-shadow:
-  0 0 0 2px var(--#{$prefix}inner-box-shadow-color, $body-bg),
+  0 0 0 2px var(--#{$prefix}inner-box-shadow-color, var(--#{$prefix}body-bg)),
   0 0 0 4px var(--#{$prefix}box-shadow-color, $primary) !default;
 $input-focus-border-color: var(--#{$prefix}gray-700) !default;
 $input-border-color: $gray-700 !default;
@@ -465,7 +465,7 @@ $df-btn-focus-active-box-shadow-color: var(--#{$prefix}btn-active-bg) !default;
 $df-btn-outline-focus-hover-box-shadow-color: var(--#{$prefix}btn-hover-color) !default;
 $df-btn-outline-focus-active-box-shadow-color: var(--#{$prefix}btn-active-color) !default;
 $df-btn-focus-box-shadow:
-  0 0 0 2px var(--#{$prefix}inner-box-shadow-color, $body-bg),
+  0 0 0 2px var(--#{$prefix}inner-box-shadow-color, var(--#{$prefix}body-bg)),
   0 0 0 4px var(--#{$prefix}box-shadow-color, $primary) !default;
 $df-btn-focus-box-shadow-color: rgba(var(--#{$prefix}btn-focus-shadow-rgb), 1) !default;
 $df-btn-check-active-property: 'bg-active-color' !default;
@@ -566,7 +566,7 @@ $df-sidenav-item-active-border-color: var(--#{$prefix}primary-800) !default;
 
 // Scrollspy
 $df-scrollspy-navpill-active-border-left: 3px solid var(--#{$prefix}primary-800) !default;
-$df-scrollspy-active-color: $body-color !default;
+$df-scrollspy-active-color: var(--#{$prefix}body-color) !default;
 
 // Stepper
 $df-stepper-steps-colors: (
@@ -578,8 +578,8 @@ $df-stepper-steps-colors: (
 
 // Tabset
 $df-tabs-focus-box-shadow: $df-focused-inset-box-shadow !default;
-$nav-tabs-link-active-color: $body-color !default;
-$nav-pills-link-active-color: $body-color !default;
+$nav-tabs-link-active-color: var(--#{$prefix}body-color) !default;
+$nav-pills-link-active-color: var(--#{$prefix}body-color) !default;
 $df-tabs-between-item-margin: 0px !default;
 $df-tabs-active-border-bottom: 3px solid var(--#{$prefix}primary-800) !default;
 $df-tabs-item-active-font-weight: 700 !default; // $font-weight-bold