@design-factory/design-factory 16.0.2 → 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
   }
@@ -35,7 +48,7 @@
     }
   }
 
-  &:focus:not(:hover):not(:active) {
+  &:focus-visible:not(:hover):not(:active) {
     color: var(--#{$prefix}btn-focus-only-color);
     background-color: var(--#{$prefix}btn-focus-only-bg);
     border-color: var(--#{$prefix}btn-focus-only-border-color);
@@ -50,6 +63,10 @@
   }
 }
 
+.btn-close {
+  --#{$prefix}box-shadow-width: #{$df-btn-close-focus-shadow-width};
+}
+
 .show > .btn:not(:disabled):not(.disabled).dropdown-toggle {
   &:not(.nav-link) {
     color: var(--#{$prefix}btn-active-color);
@@ -62,7 +79,7 @@
   --#{$prefix}btn-icononly-size-sm: #{df-button-icononly-size($btn-padding-y-sm)};
   --#{$prefix}btn-icononly-size-lg: #{df-button-icononly-size($btn-padding-y-lg)};
   --#{$prefix}btn-icononly-size-xl: #{df-button-icononly-size($btn-padding-y-lg)};
-  
+
   --#{$prefix}btn-border-width: #{$df-btn-icononly-border-width};
   --#{$prefix}btn-border-radius: #{$df-btn-icononly-border-radius};
   --#{$prefix}btn-padding-x: #{$df-btn-icononly-padding-x};
@@ -91,7 +108,8 @@
 }
 
 .btn-check {
-  &:focus:not(:checked):not(:hover) { // override BS (issue to open)
+  &:focus-visible:not(:checked):not(:hover) {
+    // override BS (issue to open)
     + .btn {
       color: var(--#{$prefix}btn-focus-only-color);
       @include gradient-bg(var(--#{$prefix}btn-focus-only-bg));
@@ -99,32 +117,35 @@
     }
   }
   @if variable-exists(df-btn-group-hover-box-shadow-color) {
-    &:focus:not(:checked):hover { // override BS (issue to open)
+    &:focus-visible:not(:checked):hover {
+      // override BS (issue to open)
       + .btn {
         --#{$prefix}box-shadow-color: #{$df-btn-group-hover-box-shadow-color};
       }
     }
   }
   @if variable-exists(df-btn-group-checked-box-shadow-color) {
-    &:focus:checked { // override BS (issue to open)
+    &:focus-visible:checked {
+      // override BS (issue to open)
       + .btn {
         --#{$prefix}box-shadow-color: #{$df-btn-group-checked-box-shadow-color};
       }
     }
   }
-  &:focus {
+  &:focus-visible {
     + .btn {
-        // Avoid using mixin so we can pass custom focus shadow properly
-        @if $enable-shadows {
-          box-shadow: var(--#{$prefix}btn-box-shadow), var(--#{$prefix}btn-focus-box-shadow);
-        } @else {
-          box-shadow: var(--#{$prefix}btn-focus-box-shadow);
-        }
+      // Avoid using mixin so we can pass custom focus shadow properly
+      @if $enable-shadows {
+        box-shadow: var(--#{$prefix}btn-box-shadow), var(--#{$prefix}btn-focus-box-shadow);
+      } @else {
+        box-shadow: var(--#{$prefix}btn-focus-box-shadow);
+      }
     }
   }
 
-  &.disabled, &:disabled {
-    + .btn { 
+  &.disabled,
+  &:disabled {
+    + .btn {
       cursor: var(--#{$prefix}btn-cursor-disabled);
       pointer-events: auto;
       color: var(--#{$prefix}btn-disabled-color);
@@ -136,12 +157,7 @@
 }
 
 .df-btn-xl {
-  @include button-size(
-    $df-btn-padding-y-xl,
-    $df-btn-padding-x-xl,
-    $df-btn-font-size-xl,
-    $df-btn-border-radius-xl
-  );
+  @include button-size($df-btn-padding-y-xl, $df-btn-padding-x-xl, $df-btn-font-size-xl, $df-btn-border-radius-xl);
   min-width: var(--#{$prefix}btn-min-width-xl);
 }
 
@@ -201,7 +217,8 @@
     --#{$prefix}btn-padding-x: #{$df-btn-link-padding-x-sm};
   }
 
-  &:disabled, &.disabled {
+  &:disabled,
+  &.disabled {
     color: var(--#{$prefix}btn-disabled-color);
     text-decoration: var(--#{$prefix}btn-link-text-decoration);
   }
@@ -210,10 +227,11 @@
     &:hover {
       text-decoration: var(--#{$prefix}btn-link-hover-text-decoration);
     }
-    &:active, &.active {
+    &:active,
+    &.active {
       text-decoration: var(--#{$prefix}btn-link-active-text-decoration);
     }
-    &:focus {
+    &:focus-visible {
       text-decoration: var(--#{$prefix}btn-link-focus-text-decoration);
       box-shadow: var(--#{$prefix}btn-focus-box-shadow);
       &:hover:not(:active) {
@@ -255,16 +273,16 @@
     --#{$prefix}btn-check-active-hover-border-color: #{var(--#{$prefix}btn-active-border-color)};
     --#{$prefix}btn-focus-shadow-rgb: #{shades-rgb-css-var($color, 'bg-color')};
     // stylelint-enable custom-property-no-missing-var-function
-    &:focus {
+    &:focus-visible {
       --#{$prefix}inner-box-shadow-color: var(--#{$prefix}btn-color);
       --#{$prefix}btn-focus-box-shadow: #{$df-btn-focus-box-shadow}; // override BS
       --#{$prefix}box-shadow-color: #{$df-btn-focus-box-shadow-color};
       box-shadow: var(--#{$prefix}btn-focus-box-shadow);
     }
-    &:focus:hover:not(:active) {
+    &:focus-visible:hover:not(:active) {
       --#{$prefix}box-shadow-color: #{$df-btn-focus-hover-box-shadow-color};
     }
-    &:focus:active {
+    &:focus-visible:active {
       --#{$prefix}box-shadow-color: #{$df-btn-focus-active-box-shadow-color};
     }
   }
@@ -288,21 +306,23 @@
     --#{$prefix}btn-check-active-hover-bg: #{$bgHoverColor};
     --#{$prefix}btn-check-active-hover-border-color: #{var(--#{$prefix}btn-active-border-color)};
     --#{$prefix}btn-focus-shadow-rgb: #{shades-rgb-css-var($color, 'bg-color')};
-      // stylelint-enable custom-property-no-missing-var-function
-    &:focus {
+    // stylelint-enable custom-property-no-missing-var-function
+    &:focus-visible {
       --#{$prefix}btn-focus-box-shadow: #{$df-btn-focus-box-shadow}; // override BS
       --#{$prefix}box-shadow-color: #{$df-btn-outline-focus-box-shadow-color};
       box-shadow: var(--#{$prefix}btn-focus-box-shadow);
     }
-    &:focus:hover:not(:active):not(.active) {
+    &:focus-visible:hover:not(:active):not(.active) {
       --#{$prefix}box-shadow-color: #{$df-btn-outline-focus-hover-box-shadow-color};
     }
-    &:focus:active, &.active:focus {
+    &:focus-visible:active,
+    &.active:focus-visible {
       --#{$prefix}box-shadow-color: #{$df-btn-outline-focus-active-box-shadow-color};
     }
   }
 
-  .btn-check { // override default behavior of outline in case of btn-check
+  .btn-check {
+    // override default behavior of outline in case of btn-check
     &:checked {
       + .btn-outline-#{$color} {
         --#{$prefix}btn-active-color: #{shades-css-var($color, $df-btn-check-active-property, true)};

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

@@ -1,5 +1,5 @@
 @function df-button-icononly-size($padding-y) {
-  @return calc(#{$btn-line-height * 1em} + #{$padding-y * 2} + #{$btn-border-width * 2});
+  @return calc(#{$btn-line-height} * 1em + #{$padding-y} * 2 + #{$btn-border-width} * 2);
 }
 
 @mixin df-reset-buttongroup-radius($radius) {

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

@@ -28,9 +28,7 @@ $df-btn-link-padding-x-lg: $btn-padding-x !default;
 $df-btn-cursor-disabled: var(--#{$prefix}disabled-cursor) !default;
 $df-btn-group-spaced-margin-end: 0.75rem !default; // replace $df-checkbox-radio-margin-end
 $df-btn-group-spaced-margin-bottom: 0.5rem !default; // replace $df-checkbox-radio-margin-bottom
-$df-btn-focus-box-shadow-blur: 0 !default;
-$df-btn-focus-box-shadow-color: rgba(var(--#{$prefix}btn-focus-shadow-rgb), .5) !default;
-$df-btn-focus-box-shadow: $df-focused-box-shadow !default; // this value is the default value in buttons.scss of bootstrap
+$df-btn-focus-box-shadow-color: rgba(var(--#{$prefix}btn-focus-shadow-rgb), 0.5) !default;
 $df-btn-focus-hover-box-shadow-color: $df-btn-focus-box-shadow-color !default;
 $df-btn-focus-active-box-shadow-color: $df-btn-focus-box-shadow-color !default;
 $df-btn-outline-focus-hover-box-shadow-color: $df-btn-focus-box-shadow-color !default;
@@ -38,4 +36,9 @@ $df-btn-outline-focus-active-box-shadow-color: $df-btn-focus-box-shadow-color !d
 $df-btn-check-active-property: 'bg-color' !default;
 $df-btn-bg-color: transparent !default;
 $df-btn-focus-only-bg-color: transparent !default;
-$df-btn-outline-focus-box-shadow-color: $df-btn-focus-box-shadow-color !default;
+$df-btn-outline-focus-box-shadow-color: $df-btn-focus-box-shadow-color !default;
+$df-btn-close-focus-shadow-width: $focus-ring-width !default;
+
+// TODO - To be removed when CSS var and focus-ring will be fully used
+$df-btn-focus-box-shadow-blur: $focus-ring-blur !default;
+$df-btn-focus-box-shadow: $df-focused-box-shadow !default; // this value is the default value in buttons.scss of bootstrap

package/styles/scss/components/fonts/_fonts-family.scss

@@ -45,9 +45,8 @@
 @if variable-exists($name: 'df-enableBranding2023') and $df-enableBranding2023 {
   @font-face {
     font-family: 'Amadeus';
-    src: url('#{$font-path}/amadeus-neue/light/AmadeusNeue-Light.woff2') format('woff2'),
-      url('#{$font-path}/amadeus-neue/light/AmadeusNeue-Light.woff') format('woff'),
-      url('#{$font-path}/amadeus-neue/light/AmadeusNeue-Light.ttf') format('truetype');
+    src: url('#{$font-path}/amadeus-neue/light/AmadeusNeueWeb-Light.woff2') format('woff2'),
+      url('#{$font-path}/amadeus-neue/light/AmadeusNeueWeb-Light.woff') format('woff');
     font-style: normal;
     font-weight: 100;
     font-display: swap;
@@ -55,9 +54,8 @@
 
   @font-face {
     font-family: 'Amadeus';
-    src: url('#{$font-path}/amadeus-neue/light/AmadeusNeue-LightItalic.woff2') format('woff2'),
-      url('#{$font-path}/amadeus-neue/light/AmadeusNeue-LightItalic.woff') format('woff'),
-      url('#{$font-path}/amadeus-neue/light/AmadeusNeue-LightItalic.ttf') format('truetype');
+    src: url('#{$font-path}/amadeus-neue/light/AmadeusNeueWeb-LightItalic.woff2') format('woff2'),
+      url('#{$font-path}/amadeus-neue/light/AmadeusNeueWeb-LightItalic.woff') format('woff');
     font-style: italic;
     font-weight: 100;
     font-display: swap;
@@ -65,9 +63,8 @@
   
   @font-face {
     font-family: 'Amadeus';
-    src: url('#{$font-path}/amadeus-neue/bold/AmadeusNeue-Bold.woff2') format('woff2'),
-      url('#{$font-path}/amadeus-neue/bold/AmadeusNeue-Bold.woff') format('woff'),
-      url('#{$font-path}/amadeus-neue/bold/AmadeusNeue-Bold.ttf') format('truetype');
+    src: url('#{$font-path}/amadeus-neue/bold/AmadeusNeueWeb-Bold.woff2') format('woff2'),
+      url('#{$font-path}/amadeus-neue/bold/AmadeusNeueWeb-Bold.woff') format('woff');
     font-style: normal;
     font-weight: 700;
     font-display: swap;
@@ -75,9 +72,8 @@
 
   @font-face {
     font-family: 'Amadeus';
-    src: url('#{$font-path}/amadeus-neue/bold/AmadeusNeue-BoldItalic.woff2') format('woff2'),
-      url('#{$font-path}/amadeus-neue/bold/AmadeusNeue-BoldItalic.woff') format('woff'),
-      url('#{$font-path}/amadeus-neue/bold/AmadeusNeue-BoldItalic.ttf') format('truetype');
+    src: url('#{$font-path}/amadeus-neue/bold/AmadeusNeueWeb-BoldItalic.woff2') format('woff2'),
+      url('#{$font-path}/amadeus-neue/bold/AmadeusNeueWeb-BoldItalic.woff') format('woff');
     font-style: italic;
     font-weight: 700;
     font-display: swap;
@@ -85,9 +81,8 @@
   
   @font-face {
     font-family: 'Amadeus';
-    src: url('#{$font-path}/amadeus-neue/regular/AmadeusNeue-Regular.woff2') format('woff2'),
-      url('#{$font-path}/amadeus-neue/regular/AmadeusNeue-Regular.woff') format('woff'),
-      url('#{$font-path}/amadeus-neue/regular/AmadeusNeue-Regular.ttf') format('truetype');
+    src: url('#{$font-path}/amadeus-neue/regular/AmadeusNeueWeb-Regular.woff2') format('woff2'),
+      url('#{$font-path}/amadeus-neue/regular/AmadeusNeueWeb-Regular.woff') format('woff');
     font-style: normal;
     font-weight: 400;
     font-display: swap;
@@ -95,9 +90,8 @@
 
   @font-face {
     font-family: 'Amadeus';
-    src: url('#{$font-path}/amadeus-neue/regular/AmadeusNeue-RegularItalic.woff2') format('woff2'),
-      url('#{$font-path}/amadeus-neue/regular/AmadeusNeue-RegularItalic.woff') format('woff'),
-      url('#{$font-path}/amadeus-neue/regular/AmadeusNeue-RegularItalic.ttf') format('truetype');
+    src: url('#{$font-path}/amadeus-neue/regular/AmadeusNeueWeb-RegularItalic.woff2') format('woff2'),
+      url('#{$font-path}/amadeus-neue/regular/AmadeusNeueWeb-RegularItalic.woff') format('woff');
     font-style: italic;
     font-weight: 400;
     font-display: swap;
@@ -105,9 +99,8 @@
 
   @font-face {
     font-family: 'Amadeus';
-    src: url('#{$font-path}/amadeus-neue/medium/AmadeusNeue-Medium.woff2') format('woff2'),
-      url('#{$font-path}/amadeus-neue/medium/AmadeusNeue-Medium.woff') format('woff'),
-      url('#{$font-path}/amadeus-neue/medium/AmadeusNeue-Medium.ttf') format('truetype');
+    src: url('#{$font-path}/amadeus-neue/medium/AmadeusNeueWeb-Medium.woff2') format('woff2'),
+      url('#{$font-path}/amadeus-neue/medium/AmadeusNeueWeb-Medium.woff') format('woff');
     font-style: normal;
     font-weight: 500;
     font-display: swap;
@@ -115,9 +108,8 @@
 
   @font-face {
     font-family: 'Amadeus';
-    src: url('#{$font-path}/amadeus-neue/medium/AmadeusNeue-MediumItalic.woff2') format('woff2'),
-      url('#{$font-path}/amadeus-neue/medium/AmadeusNeue-MediumItalic.woff') format('woff'),
-      url('#{$font-path}/amadeus-neue/medium/AmadeusNeue-MediumItalic.ttf') format('truetype');
+    src: url('#{$font-path}/amadeus-neue/medium/AmadeusNeueWeb-MediumItalic.woff2') format('woff2'),
+      url('#{$font-path}/amadeus-neue/medium/AmadeusNeueWeb-MediumItalic.woff') format('woff');
     font-style: italic;
     font-weight: 500;
     font-display: swap;

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.variables.scss

@@ -43,8 +43,8 @@ $df-select-single-input-padding: $df-select-arrow-pos + $input-padding-x !defaul
 $df-select-single-clear-input-padding: $df-select-single-input-padding + $df-select-clear-width !default;
 $df-select-border: $input-border-width solid $input-border-color !default;
 $df-select-border-radius: $form-select-border-radius !default;
-$df-select-border-radius-sm: $df-select-border-radius * map.get($df-size-ratios, 'sm') !default; // or the sm lg version of the border-radius??
-$df-select-border-radius-lg: $df-select-border-radius * map.get($df-size-ratios, 'lg') !default;
+$df-select-border-radius-sm: calc($df-select-border-radius * map.get($df-size-ratios, 'sm')) !default; // or the sm lg version of the border-radius??
+$df-select-border-radius-lg: calc($df-select-border-radius * map.get($df-size-ratios, 'lg')) !default;
 $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;