@dynamic-framework/ui-react 1.25.0 → 1.27.0

package/src/style/abstracts/_mixins.scss

@@ -2,18 +2,22 @@
 @mixin df-button-variant-variables(
   $color-name,
   $default-color: var(--#{$prefix}#{$color-name}-500),
-  $hover-color: var(--#{$prefix}#{$color-name}-600),
-  $focus-color: var(--#{$prefix}#{$color-name}-500),
-  $active-color: var(--#{$prefix}#{$color-name}-700),
   $default-text-color: color-contrast-var(map-get($theme-colors-palettes, #{$color-name}-500)),
+  $hover-color: var(--#{$prefix}#{$color-name}-600),
   $hover-text-color: color-contrast-var(map-get($theme-colors-palettes, #{$color-name}-600)),
+  $focus-color: var(--#{$prefix}#{$color-name}-600),
   $focus-text-color: color-contrast-var(map-get($theme-colors-palettes, #{$color-name}-600)),
+  $active-color: var(--#{$prefix}#{$color-name}-700),
   $active-text-color: color-contrast-var(map-get($theme-colors-palettes, #{$color-name}-700)),
-  $disabled-opacity: .65
+  $disabled-opacity: $btn-disabled-opacity,
+  $box-shadow: $btn-box-shadow,
+  $focus-shadow-rgb: var(--#{$prefix}#{$color-name}-500-rgb),
+  $active-box-shadow: $btn-active-box-shadow,
 ) {
   --#{$prefix}btn-#{$color-name}-color: #{$default-text-color};
   --#{$prefix}btn-#{$color-name}-bg: #{$default-color};
   --#{$prefix}btn-#{$color-name}-border-color: #{$default-color};
+  --#{$prefix}btn-#{$color-name}-box-shadow: #{$box-shadow};
 
   --#{$prefix}btn-#{$color-name}-hover-color: #{$hover-text-color};
   --#{$prefix}btn-#{$color-name}-hover-bg: #{$hover-color};
@@ -22,10 +26,12 @@
   --#{$prefix}btn-#{$color-name}-focus-color: #{$focus-text-color};
   --#{$prefix}btn-#{$color-name}-focus-bg: #{$focus-color};
   --#{$prefix}btn-#{$color-name}-focus-border-color: #{$focus-color};
+  --#{$prefix}btn-#{$color-name}-focus-shadow-rgb: #{$focus-shadow-rgb};
 
   --#{$prefix}btn-#{$color-name}-active-color: #{$active-text-color};
   --#{$prefix}btn-#{$color-name}-active-bg: #{$active-color};
   --#{$prefix}btn-#{$color-name}-active-border-color: #{$active-color};
+  --#{$prefix}btn-#{$color-name}-active-box-shadow: #{$active-box-shadow};
 
   --#{$prefix}btn-#{$color-name}-disabled-color: #{$default-text-color};
   --#{$prefix}btn-#{$color-name}-disabled-bg: #{$default-color};
@@ -38,29 +44,35 @@
 @mixin df-button-outline-variant-variables(
   $color-name,
   $default-color: var(--#{$prefix}#{$color-name}-500),
-  $hover-bg-color: var(--#{$prefix}#{$color-name}-100),
-  $hover-text-color: var(--#{$prefix}#{$color-name}-500),
-  $focus-text-color: var(--#{$prefix}#{$color-name}-500),
-  $active-text-color: var(--#{$prefix}#{$color-name}-700),
-  $active-bg-color: var(--#{$prefix}#{$color-name}-100),
-  $active-border-color: var(--#{$prefix}#{$color-name}-700),
-  $disabled-opacity: .65
+  $hover-bg-color: var(--#{$prefix}#{$color-name}-600),
+  $hover-text-color: color-contrast-var(map-get($theme-colors-palettes, #{$color-name}-600)),
+  $focus-bg-color: var(--#{$prefix}#{$color-name}-600),
+  $focus-text-color: color-contrast-var(map-get($theme-colors-palettes, #{$color-name}-600)),
+  $active-bg-color: var(--#{$prefix}#{$color-name}-700),
+  $active-text-color: color-contrast-var(map-get($theme-colors-palettes, #{$color-name}-700)),
+  $disabled-opacity: $btn-disabled-opacity,
+  $box-shadow: $btn-box-shadow,
+  $focus-shadow-rgb: var(--#{$prefix}#{$color-name}-500-rgb),
+  $active-box-shadow: $btn-active-box-shadow,
 ) {
   --#{$prefix}btn-outline-#{$color-name}-color: #{$default-color};
   --#{$prefix}btn-outline-#{$color-name}-bg: transparent;
   --#{$prefix}btn-outline-#{$color-name}-border-color: #{$default-color};
+  --#{$prefix}btn-outline-#{$color-name}-box-shadow: #{$box-shadow};
 
   --#{$prefix}btn-outline-#{$color-name}-hover-color: #{$hover-text-color};
   --#{$prefix}btn-outline-#{$color-name}-hover-bg: #{$hover-bg-color};
-  --#{$prefix}btn-outline-#{$color-name}-hover-border-color: #{$default-color};
+  --#{$prefix}btn-outline-#{$color-name}-hover-border-color: #{$hover-bg-color};
 
   --#{$prefix}btn-outline-#{$color-name}-focus-color: #{$focus-text-color};
-  --#{$prefix}btn-outline-#{$color-name}-focus-bg: transparent;
-  --#{$prefix}btn-outline-#{$color-name}-focus-border-color: #{$default-color};
+  --#{$prefix}btn-outline-#{$color-name}-focus-bg: #{$focus-bg-color};
+  --#{$prefix}btn-outline-#{$color-name}-focus-border-color: #{$focus-bg-color};
+  --#{$prefix}btn-outline-#{$color-name}-focus-shadow-rgb: #{$focus-shadow-rgb};
 
   --#{$prefix}btn-outline-#{$color-name}-active-color: #{$active-text-color};
   --#{$prefix}btn-outline-#{$color-name}-active-bg: #{$active-bg-color};
-  --#{$prefix}btn-outline-#{$color-name}-active-border-color: #{$active-border-color};
+  --#{$prefix}btn-outline-#{$color-name}-active-border-color: #{$active-bg-color};
+  --#{$prefix}btn-outline-#{$color-name}-active-box-shadow: #{$active-box-shadow};
 
   --#{$prefix}btn-outline-#{$color-name}-disabled-color: #{$default-color};
   --#{$prefix}btn-outline-#{$color-name}-disabled-bg: transparent;
@@ -73,28 +85,33 @@
 @mixin df-button-link-variant-variables(
   $color-name,
   $default-color: var(--#{$prefix}#{$color-name}-500),
-  $hover-bg-color: var(--#{$prefix}#{$color-name}-100),
-  $hover-text-color: var(--#{$prefix}#{$color-name}-500),
-  $focus-text-color: var(--#{$prefix}#{$color-name}-500),
+  $hover-text-color: var(--#{$prefix}#{$color-name}-600),
+  $focus-text-color: var(--#{$prefix}#{$color-name}-600),
   $active-text-color: var(--#{$prefix}#{$color-name}-700),
-  $active-bg-color: var(--#{$prefix}#{$color-name}-100),
-  $disabled-opacity: .65
+  $active-bg-color: var(--#{$prefix}#{$color-name}-200),
+  $disabled-opacity: $btn-disabled-opacity,
+  $box-shadow: $btn-box-shadow,
+  $active-box-shadow: $btn-active-box-shadow,
+  $focus-shadow-rgb: var(--#{$prefix}#{$color-name}-500-rgb),
 ) {
   --#{$prefix}btn-link-#{$color-name}-bg: transparent;
   --#{$prefix}btn-link-#{$color-name}-border-color: transparent;
   --#{$prefix}btn-link-#{$color-name}-color: #{$default-color};
+  --#{$prefix}btn-link-#{$color-name}-box-shadow: #{$box-shadow};
 
-  --#{$prefix}btn-link-#{$color-name}-hover-bg: #{$hover-bg-color};
+  --#{$prefix}btn-link-#{$color-name}-hover-bg: transparent;
   --#{$prefix}btn-link-#{$color-name}-hover-border-color: transparent;
   --#{$prefix}btn-link-#{$color-name}-hover-color: #{$hover-text-color};
 
   --#{$prefix}btn-link-#{$color-name}-focus-bg: transparent;
   --#{$prefix}btn-link-#{$color-name}-focus-border-color: transparent;
   --#{$prefix}btn-link-#{$color-name}-focus-color: #{$focus-text-color};
+  --#{$prefix}btn-link-#{$color-name}-focus-shadow-rgb: #{$focus-shadow-rgb};
 
   --#{$prefix}btn-link-#{$color-name}-active-bg: #{$active-bg-color};
   --#{$prefix}btn-link-#{$color-name}-active-border-color: transparent;
   --#{$prefix}btn-link-#{$color-name}-active-color: #{$active-text-color};
+  --#{$prefix}btn-link-#{$color-name}-active-box-shadow: #{$active-box-shadow};
 
   --#{$prefix}btn-link-#{$color-name}-disabled-bg: transparent;
   --#{$prefix}btn-link-#{$color-name}-disabled-border-color: transparent;
@@ -112,6 +129,7 @@
   --#{$prefix}btn-color: var(--#{$prefix}btn-#{$variant-name}#{$color-name}-color);
   --#{$prefix}btn-bg: var(--#{$prefix}btn-#{$variant-name}#{$color-name}-bg);
   --#{$prefix}btn-border-color: var(--#{$prefix}btn-#{$variant-name}#{$color-name}-border-color);
+  --#{$prefix}btn-box-shadow: var(--#{$prefix}btn-#{$variant-name}#{$color-name}-box-shadow);
 
   --#{$prefix}btn-hover-color: var(--#{$prefix}btn-#{$variant-name}#{$color-name}-hover-color);
   --#{$prefix}btn-hover-bg: var(--#{$prefix}btn-#{$variant-name}#{$color-name}-hover-bg);
@@ -120,10 +138,12 @@
   --#{$prefix}btn-focus-color: var(--#{$prefix}btn-#{$variant-name}#{$color-name}-focus-color);
   --#{$prefix}btn-focus-bg: var(--#{$prefix}btn-#{$variant-name}#{$color-name}-focus-bg);
   --#{$prefix}btn-focus-border-color: var(--#{$prefix}btn-#{$variant-name}#{$color-name}-focus-border-color);
+  --#{$prefix}btn-focus-shadow-rgb: var(--#{$prefix}btn-#{$variant-name}#{$color-name}-focus-shadow-rgb);
 
   --#{$prefix}btn-active-color: var(--#{$prefix}btn-#{$variant-name}#{$color-name}-active-color);
   --#{$prefix}btn-active-bg: var(--#{$prefix}btn-#{$variant-name}#{$color-name}-active-bg);
   --#{$prefix}btn-active-border-color: var(--#{$prefix}btn-#{$variant-name}#{$color-name}-active-border-color);
+  --#{$prefix}btn-active-box-shadow: var(--#{$prefix}btn-#{$variant-name}#{$color-name}-active-box-shadow);
 
   --#{$prefix}btn-disabled-color: var(--#{$prefix}btn-#{$variant-name}#{$color-name}-disabled-color);
   --#{$prefix}btn-disabled-bg: var(--#{$prefix}btn-#{$variant-name}#{$color-name}-disabled-bg);

package/src/style/abstracts/variables/_+import.scss

@@ -16,15 +16,20 @@ $prefix: $variable-prefix !default;
 @import "box-shadow";
 
 // scss-docs-start focus-ring-variables
-$focus-ring-opacity: 1 !default;
+$focus-ring-width: .25rem !default;
+$focus-ring-opacity: .25 !default;
+$focus-ring-blur: 0 !default;
 // custom
+$focus-ring-border-color: var(--#{$prefix}secondary-300-rgb) !default;
 $focus-ring-color-mapping: "secondary-rgb" !default;
 $focus-ring-color: var(--#{$prefix}focus-ring-color) !default;
 // end custom
+$focus-ring-box-shadow: 0 0 $focus-ring-blur $focus-ring-width $focus-ring-color !default;
 // scss-docs-end focus-ring-variables
 
 $component-active-color: var(--#{$prefix}white) !default;
-$component-active-bg: $focus-ring-color !default;
+$component-active-bg: var(--#{$prefix}primary) !default;
+$component-focus-border-color: var(--#{$prefix}focus-ring-border-color) !default;
 
 $transition-fade: opacity .3s linear !default;
 
@@ -39,7 +44,11 @@ $transition-fade: opacity .3s linear !default;
 $input-btn-padding-y: $spacer-3 !default;
 $input-btn-padding-x: $spacer-4 !default;
 
-$input-btn-focus-width: 0 !default;
+$input-btn-focus-width: $focus-ring-width !default;
+$input-btn-focus-color-opacity: $focus-ring-opacity !default;
+$input-btn-focus-color: $focus-ring-color !default;
+$input-btn-focus-blur: $focus-ring-blur !default;
+$input-btn-focus-box-shadow: $focus-ring-box-shadow !default;
 $input-btn-focus-color-opacity: 1 !default;
 $input-btn-focus-color: rgba(var(--#{$prefix}secondary-rgb), $input-btn-focus-color-opacity) !default;
 $input-btn-focus-blur: 0 !default;

package/src/style/abstracts/variables/_border.scss

@@ -3,7 +3,7 @@
 // Define common padding and border radius sizes and more.
 
 // scss-docs-start border-variables
-$border-color: var(--#{$prefix}gray-200) !default;
+$border-color: var(--#{$prefix}gray-300) !default;
 $border-color-translucent: rgba(var(--#{$prefix}black-rgb), .175) !default;
 // scss-docs-end border-variables
 

package/src/style/abstracts/variables/_buttons.scss

@@ -18,11 +18,9 @@ $btn-font-size-lg: $h6-font-size !default;
 
 $btn-border-width: $input-btn-border-width !default;
 
-$btn-box-shadow: none !default;
-$btn-focus-width: 0 !default;
-$btn-focus-box-shadow: none !default;
-$btn-disabled-opacity: 1 !default;
-$btn-active-box-shadow: none !default;
+$btn-box-shadow: 0 0 0 transparent !default; // to avoid the none in the bootstrap box-shadow calculation
+$btn-disabled-opacity: .65 !default;
+$btn-active-box-shadow: 0 0 0 transparent !default; // to avoid the none in the bootstrap box-shadow calculation
 
 $btn-border-radius: var(--#{$prefix}border-radius-pill) !default;
 $btn-border-radius-sm: var(--#{$prefix}border-radius-pill) !default;

package/src/style/abstracts/variables/_colors.scss

@@ -3,16 +3,16 @@
 // scss-docs-start gray-color-variables
 $white: #fff !default;
 $gray-25: #fbfbfc !default;
-$gray-50: #f7f8f8 !default;
-$gray-100: #eff0f2 !default;
-$gray-200: #dee1e5 !default;
-$gray-300: #ced3d7 !default;
-$gray-400: #bdc4ca !default;
-$gray-500: #adb5bd !default;
-$gray-600: #8a9197 !default;
-$gray-700: #686d71 !default;
-$gray-800: #45484c !default;
-$gray-900: #232426 !default;
+$gray-50: #f0f0f2 !default;
+$gray-100: #e1e1e6 !default;
+$gray-200: #c4c4cd !default;
+$gray-300: #a7a7b4 !default;
+$gray-400: #8a8a9b !default;
+$gray-500: #6d6d82 !default;
+$gray-600: #575768 !default;
+$gray-700: #41414e !default;
+$gray-800: #2b2b34 !default;
+$gray-900: #15151a !default;
 $black: #000 !default;
 // scss-docs-end gray-color-variables
 

package/src/style/abstracts/variables/_forms.scss

@@ -1,13 +1,13 @@
 // scss-docs-start form-text-variables
 $form-text-margin-top: $spacer-2 !default;
-$form-text-color: $text-muted !default;
+$form-text-color: var(--#{$prefix}body-color) !default;
 // scss-docs-end form-text-variables
 
 // scss-docs-start form-label-variables
 $form-label-margin-bottom: 0 !default;
-$form-label-font-size: var(--#{$prefix}fs-small) !default;
-$form-label-font-weight: var(--#{$prefix}fw-bold) !default;
-$form-label-color: var(--#{$prefix}gray) !default;
+$form-label-font-size: var(--#{$prefix}label-font-size) !default;
+$form-label-font-weight: var(--#{$prefix}label-font-weight) !default;
+$form-label-color: var(--#{$prefix}label-color) !default;
 // scss-docs-end form-label-variables
 
 // scss-docs-start form-input-variables
@@ -27,74 +27,49 @@ $input-disabled-color: var(--#{$prefix}gray-300) !default;
 $input-disabled-bg: var(--#{$prefix}gray-100) !default;
 $input-disabled-border-color: var(--#{$prefix}gray-300) !default;
 
-$input-color: var(--#{$prefix}gray-900) !default;
+$input-color: var(--#{$prefix}body-color) !default;
 $input-box-shadow: 0 0 0 transparent !default; // to avoid the none in the bootstrap box-shadow calculation
 
-$input-border-color: var(--#{$prefix}gray-300) !default;
+$input-border-color: var(--#{$prefix}border-color) !default;
 $input-border-radius: var(--#{$prefix}border-radius-sm) !default;
 $input-border-radius-sm: var(--#{$prefix}border-radius-sm) !default;
 $input-border-radius-lg: var(--#{$prefix}border-radius-sm) !default;
 
-$input-focus-border-color: var(--#{$prefix}focus-ring-color) !default; // unused
-$input-focus-width: 1px !default;
-$input-focus-box-shadow: 0 0 0 1px rgba(var(--#{$prefix}secondary-rgb)) !default;
+$input-focus-border-color: $component-focus-border-color !default; // unused
+$input-focus-width: $input-btn-focus-width !default;
 
-$input-placeholder-color: var(--#{$prefix}gray-300) !default;
+$input-placeholder-color: var(--#{$prefix}border-color) !default;
 
 $input-plaintext-color: var(--#{$prefix}body-color) !default;
 // scss-docs-end form-input-variables
 
 // scss-docs-start form-check-variables
-// custom
-$form-check-size-multiplier: 1.5 !default;
-// end custom
-$form-check-input-width: 1em * $form-check-size-multiplier !default;
+$form-check-input-width: 1em !default;
 $form-check-min-height: $form-check-input-width !default;
-$form-check-padding-start: $form-check-input-width - .5em * $form-check-size-multiplier !default;
-$form-check-margin-bottom: .125rem !default;
-
-// custom
-$form-check-input-border-color: var(--#{$prefix}gray-400) !default;
-// end custom
-
-$form-check-input-focus-box-shadow: none !default;
-
-// custom
-$form-check-input-focus-border-color: $form-check-input-border-color !default;
-$form-check-input-focus-outline-color: var(--#{$prefix}focus-ring-color) !default;
-$form-check-input-focus-outline: 2px solid $form-check-input-focus-outline-color !default;
-$form-check-input-focus-outline-offset: 2px !default;
-$form-check-input-hover-border-color: var(--#{$prefix}focus-ring-color) !default;
-// end custom
-
+$form-check-padding-start: $form-check-input-width - .5em !default;
+$form-check-input-focus-box-shadow: var(--#{$prefix}form-check-input-focus-box-shadow) !default;
+$form-check-input-focus-border: var(--#{$prefix}form-check-input-focus-border-color) !default;
 $form-check-input-checked-bg-image: url("data:image/svg+xml, <svg viewBox='-4 -6 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'><path fill-rule='evenodd' clip-rule='evenodd' d='M14.294 0.594229C14.3863 0.498719 14.4966 0.422536 14.6186 0.370127C14.7406 0.317718 14.8719 0.290132 15.0046 0.288978C15.1374 0.287824 15.2691 0.313126 15.392 0.363407C15.5149 0.413688 15.6265 0.487941 15.7204 0.581833C15.8143 0.675726 15.8886 0.787378 15.9389 0.910275C15.9891 1.03317 16.0144 1.16485 16.0133 1.29763C16.0121 1.43041 15.9846 1.56163 15.9321 1.68363C15.8797 1.80564 15.8036 1.91598 15.708 2.00823L6.70804 11.0082C6.52051 11.1957 6.26621 11.301 6.00104 11.301C5.73588 11.301 5.48157 11.1957 5.29404 11.0082L0.293041 6.00723C0.110883 5.81863 0.0100885 5.56602 0.0123669 5.30383C0.0146453 5.04163 0.119815 4.79082 0.305223 4.60541C0.490631 4.42 0.741443 4.31483 1.00364 4.31255C1.26584 4.31028 1.51844 4.41107 1.70704 4.59323L6.00104 8.88723L14.294 0.594229V0.594229Z' fill='#{$white}'/></svg>") !default;
 $form-check-radio-checked-bg-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'><circle r='2' fill='#{$white}'/></svg>") !default;
 
 $form-check-input-indeterminate-bg-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path fill='none' stroke='#{$white}' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10h8'/></svg>") !default;
-
-// custom
-$form-check-input-disabled-border-color: var(--#{$prefix}gray-300) !default;
-$form-check-input-disabled-bg: var(--#{$prefix}gray-100) !default;
-// end custom
-
 // scss-docs-end form-check-variables
 
 // scss-docs-start form-switch-variables
 $form-switch-color: var(--#{$prefix}white) !default;
-$form-switch-width: 3em !default;
-$form-switch-bg-image: url("data:image/svg+xml,<svg viewBox='-4 -4 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'><rect x='0.5' y='0.5' width='15' height='15' rx='7.5' fill='#{$white}' stroke='#{$gray-500}'/></svg>") !default;
-$form-switch-focus-color: var(--#{$prefix}tertiary) !default;
-$form-switch-focus-bg-image: url("data:image/svg+xml,<svg viewBox='-4 -4 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'><rect x='0.5' y='0.5' width='15' height='15' rx='7.5' fill='#{$white}' stroke='#{$gray-500}'/></svg>") !default;
-
-$form-switch-checked-color: var(--#{$prefix}white) !default;
-$form-switch-checked-bg-image: url("data:image/svg+xml,<svg viewBox='-4 -4 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'><rect x='0.5' y='0.5' width='15' height='15' rx='7.5' fill='#{$white}' stroke='#{$gray-500}'/></svg>") !default;
+$form-switch-width: 2em !default;
+$form-switch-padding-start: $form-switch-width !default;
+$form-switch-bg-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'><circle r='3' fill='#{$gray-300}'/></svg>") !default;
+$form-switch-focus-color: $component-focus-border-color !default;
+$form-switch-focus-bg-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'><circle r='3' fill='#{$secondary-300}'/></svg>") !default;
 
 // custom
-$form-switch-disabled-bg-image: url("data:image/svg+xml,<svg viewBox='-4 -4 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'><rect x='0.5' y='0.5' width='15' height='15' rx='7.5' fill='#{$white}' stroke='#{$gray-300}'/></svg>") !default;
-$form-switch-label-color: var(--#{$prefix}gray) !default;
-$form-switch-active-label-color: var(--#{$prefix}gray-700) !default;
+$form-switch-valid-bg-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'><circle r='3' fill='#{$success}'/></svg>") !default;
+$form-switch-invalid-bg-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'><circle r='3' fill='#{$danger}'/></svg>") !default;
 // end custom
 
+$form-switch-checked-color: var(--#{$prefix}white) !default;
+$form-switch-checked-bg-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'><circle r='3' fill='#{$white}'/></svg>") !default;
 // scss-docs-end form-switch-variables
 
 // scss-docs-start input-group-variables
@@ -105,7 +80,6 @@ $input-group-addon-border-color: transparent !default;
 // custom
 $form-text-padding-y: 0 !default;
 $form-text-padding-x: $spacer-2 !default;
-$form-text-color: var(--#{$prefix}gray) !default;
 // end custom
 
 // scss-docs-start form-select-variables
@@ -120,9 +94,13 @@ $form-select-box-shadow: none !default;
 
 // scss-docs-start form-range-variables
 $form-range-track-bg: var(--#{$prefix}gray-300) !default;
+$form-range-track-height: $spacer-1 !default;
+$form-range-track-border-radius: var(--#{$prefix}ref-spacer-6) !default;
+$form-range-track-box-shadow: none !default;
 
+$form-range-thumb-width: $spacer-4 !default;
 $form-range-thumb-box-shadow: 0 .1rem .25rem rgba(var(--#{$prefix}black-rgb), .1) !default;
-$form-range-thumb-focus-box-shadow: 0 0 0 1px var(--#{$prefix}body-bg), $input-focus-box-shadow !default;
+$form-range-thumb-focus-box-shadow: 0 0 0 4px rgba(var(--#{$prefix}primary-rgb), .4) !default;
 $form-range-thumb-active-bg: $component-active-bg !default;
 $form-range-thumb-disabled-bg: var(--#{$prefix}gray-500) !default;
 // scss-docs-end form-range-variables
@@ -148,7 +126,7 @@ $form-feedback-icon-invalid: null !default;
 // scss-docs-end form-feedback-variables
 
 // scss-docs-start form-validation-colors
-$form-valid-color: $form-label-color !default;
+$form-valid-color: $form-feedback-icon-valid-color !default;
 $form-valid-border-color: $form-feedback-valid-color !default;
 $form-invalid-color: $form-feedback-invalid-color !default;
 $form-invalid-border-color: $form-feedback-invalid-color !default;

package/src/style/abstracts/variables/_quick-action-switch.scss

@@ -7,7 +7,6 @@ $quick-action-switch-content-gap: var(--#{$prefix}ref-spacer-1) !default;
 
 $quick-action-switch-label-font-size: $font-size-base !default;
 $quick-action-switch-label-font-weight: $form-label-font-weight !default;
-$quick-action-switch-label-color: $form-switch-label-color !default;
 
 $quick-action-switch-hint-font-size: var(--#{$prefix}fs-small) !default;
 $quick-action-switch-hint-font-weight: var(--#{$prefix}fw-normal) !default;
@@ -16,6 +15,5 @@ $quick-action-switch-hint-color: var(--#{$prefix}gray-400) !default;
 $quick-action-switch-hover-bg: var(--#{$prefix}secondary-soft) !default;
 
 $quick-action-switch-checked-bg: var(--#{$prefix}white) !default;
-$quick-action-switch-checked-label-color: $form-switch-active-label-color !default;
 $quick-action-switch-checked-hint-color: var(--#{$prefix}gray-500) !default;
 

package/src/style/base/_+import.scss

@@ -40,6 +40,7 @@
 @import "form-switch";
 @import "form-check";
 @import "form-control";
+@import "form-range";
 @import "form-text";
 @import "input-group";
 @import "buttons";

package/src/style/base/_alert.scss

@@ -47,7 +47,7 @@
 
   &.alert-soft {
     --#{$prefix}alert-color: var(--#{$prefix}gray-900);
-    border-width: 0 0 0 5px;
+    --#{$prefix}alert-border: 0;
 
     @each $theme, $value in map-remove($theme-colors, "light", "dark") {
       &.alert-#{$theme} {

package/src/style/base/_buttons.scss

@@ -13,7 +13,7 @@
   --#{$prefix}btn-box-shadow: #{$btn-box-shadow};
   --#{$prefix}btn-disabled-opacity: #{$btn-disabled-opacity};
   --#{$prefix}btn-focus-box-shadow: 0 0 0 #{$btn-focus-width} rgba(var(--#{$prefix}btn-focus-shadow-rgb), .5);
-  --#{$prefix}btn–text-decoration: if($link-decoration == none, null, none);
+  --#{$prefix}btn–text-decoration: #{if($link-decoration == none, null, none)};
   --#{$prefix}btn-lg-padding-y: #{$btn-padding-y-lg};
   --#{$prefix}btn-lg-padding-x: #{$btn-padding-x-lg};
   --#{$prefix}btn-lg-font-size: #{$btn-font-size-lg};
@@ -49,14 +49,15 @@
   }
 
   // hover selectors
-  &:hover,
-  &.hover {
+  &.hover,
+  &:hover {
     color: var(--#{$prefix}btn-hover-color);
     text-decoration: none;
     background-color: var(--#{$prefix}btn-hover-bg);
     border-color: var(--#{$prefix}btn-hover-border-color);
   }
 
+  .btn-check + &.hover,
   .btn-check + &:hover {
     // override for the checkbox/radio buttons
     color: var(--#{$prefix}btn-color);
@@ -65,21 +66,30 @@
   }
 
   // focus selectors
-  .btn-check:focus-visible + &,
-  &:focus-visible:not(:hover),
-  &.focus-visible:not(:hover) {
-    // copy of .btn:focus bootstrap + focus var
+  &.focus-visible,
+  &:focus-visible {
     color: var(--#{$prefix}btn-focus-color, var(--#{$prefix}btn-hover-color));
     @include gradient-bg(var(--#{$prefix}btn-focus-bg, var(--#{$prefix}btn-hover-bg)));
     border-color: var(--#{$prefix}btn-focus-border-color, var(--#{$prefix}btn-hover-border-color));
-    // end copy
+    outline: 0;
+    // 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);
+    }
   }
 
-  .btn-check:focus-visible + &,
-  &:focus-visible,
-  &.focus-visible {
-    outline: var(--#{$prefix}btn-focus-border-width, var(--#{$prefix}btn-border-width)) solid var(--#{$prefix}btn-focus-outline-color, var(--#{$prefix}focus-ring-color));
-    outline-offset: var(--#{$prefix}btn-focus-outline-offset, var(--#{$prefix}btn-border-width));
+  .btn-check.focus-visible + &,
+  .btn-check:focus-visible + & {
+    border-color: var(--#{$prefix}btn-hover-border-color);
+    outline: 0;
+
+    @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);
+    }
   }
 
   .btn-check:checked + &,
@@ -92,20 +102,31 @@
     // Remove CSS gradients if they're enabled
     background-image: if($enable-gradients, none, null);
     border-color: var(--#{$prefix}btn-active-border-color);
-    @include box-shadow(var(--#{$prefix}btn-active-shadow));
+    @include box-shadow(var(--#{$prefix}btn-active-box-shadow));
 
+    &.focus-visible,
     &:focus-visible {
       // Avoid using mixin so we can pass custom focus shadow properly
       @if $enable-shadows {
-        box-shadow: var(--#{$prefix}btn-active-shadow), var(--#{$prefix}btn-focus-box-shadow);
+        box-shadow: var(--#{$prefix}btn-active-box-shadow), var(--#{$prefix}btn-focus-box-shadow);
       } @else {
         box-shadow: var(--#{$prefix}btn-focus-box-shadow);
       }
     }
   }
 
-  &:disabled,
+  .btn-check:checked.focus-visible + &,
+  .btn-check:checked:focus-visible + & {
+    // Avoid using mixin so we can pass custom focus shadow properly
+    @if $enable-shadows {
+      box-shadow: var(--#{$prefix}btn-active-box-shadow), var(--#{$prefix}btn-focus-box-shadow);
+    } @else {
+      box-shadow: var(--#{$prefix}btn-focus-box-shadow);
+    }
+  }
+
   &.disabled,
+  &:disabled,
   fieldset:disabled & {
     color: var(--#{$prefix}btn-disabled-color);
     pointer-events: none;
@@ -189,15 +210,19 @@
     background-image: none;
   }
 
+  &.hover,
   &:hover,
+  &.focus-visible,
   &:focus-visible {
     text-decoration: $link-hover-decoration;
   }
 
+  &.focus-visible,
   &:focus-visible {
     color: var(--#{$prefix}btn-color);
   }
 
+  &.hover,
   &:hover {
     color: var(--#{$prefix}btn-hover-color);
   }

package/src/style/base/_form-check.scss

@@ -1,21 +1,4 @@
 .form-check-input {
-  &:hover {
-    border-color: $form-check-input-hover-border-color;
-  }
-
-  &:focus {
-    border-color: $form-check-input-focus-border-color;
-    outline: $form-check-input-focus-outline;
-    outline-offset: $form-check-input-focus-outline-offset;
-  }
-
-  &:checked {
-    border-color: $form-check-input-checked-border-color;
-  }
-
-  &:disabled:not(:checked, :indeterminate) {
-    background-color: $form-check-input-disabled-bg;
-    border-color: $form-check-input-disabled-border-color;
-    opacity: 1;
-  }
+  --bs-form-check-input-focus-border-color: #{$component-focus-border-color};
+  --bs-form-check-input-focus-box-shadow: #{$input-btn-focus-box-shadow};
 }

package/src/style/base/_form-range.scss

@@ -0,0 +1,52 @@
+.form-range {
+
+  &.form-range-value-indicator {
+    &::-webkit-slider-runnable-track {
+      background:
+        linear-gradient(
+          to right,
+          $component-active-bg 0%,
+          $component-active-bg var(--#{$prefix}form-range-component-value),
+          $form-range-track-bg var(--#{$prefix}form-range-component-value),
+          $form-range-track-bg 100%
+        );
+    }
+
+    &::-moz-range-track {
+      background:
+        linear-gradient(
+          to right,
+          $component-active-bg 0%,
+          $component-active-bg var(--#{$prefix}form-range-component-value),
+          $form-range-track-bg var(--#{$prefix}form-range-component-value),
+          $form-range-track-bg 100%
+        );
+    }
+  }
+
+  &:disabled {
+    &.form-range-value-indicator {
+      &::-webkit-slider-runnable-track {
+        background:
+          linear-gradient(
+            to right,
+            $form-range-thumb-disabled-bg 0%,
+            $form-range-thumb-disabled-bg var(--#{$prefix}form-range-component-value),
+            $form-range-track-bg var(--#{$prefix}form-range-component-value),
+            $form-range-track-bg 100%
+          );
+      }
+
+      &::-moz-range-track {
+        background:
+          linear-gradient(
+            to right,
+            $form-range-thumb-disabled-bg 0%,
+            $form-range-thumb-disabled-bg var(--#{$prefix}form-range-component-value),
+            $form-range-track-bg var(--#{$prefix}form-range-component-value),
+            $form-range-track-bg 100%
+          );
+      }
+    }
+  }
+}