@dynamic-framework/ui-react 1.18.0 → 1.19.1

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

@@ -5,8 +5,8 @@ $form-text-color: $text-muted !default;
 
 // scss-docs-start form-label-variables
 $form-label-margin-bottom: 0 !default;
-$form-label-font-size: var(--#{$prefix}ref-fs-small) !default;
-$form-label-font-weight: var(--#{$prefix}ref-fw-bold) !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;
 // scss-docs-end form-label-variables
 
@@ -27,9 +27,10 @@ $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) !default;
+$input-color: var(--#{$prefix}gray-900) !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-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;
@@ -48,9 +49,9 @@ $input-plaintext-color: var(--#{$prefix}body-color) !default;
 $form-check-size-multiplier: 1.5 !default;
 // end custom
 $form-check-input-width: 1em * $form-check-size-multiplier !default;
-$form-check-min-height: $font-size-base * $line-height-base * $form-check-size-multiplier !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 * $form-check-size-multiplier !default;
+$form-check-margin-bottom: .125rem !default;
 
 // custom
 $form-check-input-border-color: var(--#{$prefix}gray-400) !default;
@@ -69,9 +70,7 @@ $form-check-input-hover-border-color: var(--#{$prefix}focus-ring-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='#{$secondary}' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10h8'/></svg>") !default;
-
-$form-check-input-disabled-opacity: 1 !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;

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

@@ -2,7 +2,7 @@
 
 // scss-docs-start nav-variables
 $nav-link-font-size: var(--#{$prefix}body-font-size) !default;
-$nav-link-font-weight: var(--#{$prefix}ref-fw-normal) !default;
+$nav-link-font-weight: var(--#{$prefix}fw-normal) !default;
 $nav-link-color: var(--#{$prefix}gray-500) !default;
 $nav-link-hover-color: var(--#{$prefix}secondary-600) !default;
 $nav-link-disabled-color: var(--#{$prefix}gray-200) !default;
@@ -12,7 +12,7 @@ $nav-link-border-height: 2px !default;
 $nav-link-line-height: var(--#{$prefix}ref-spacer-6) !default;
 $nav-link-border-border-radius: $border-radius-pill !default;
 $nav-link-border-active-color: var(--#{$prefix}secondary) !default;
-$nav-link-border-active-font-weight: var(--#{$prefix}ref-fw-bold) !default;
+$nav-link-border-active-font-weight: var(--#{$prefix}fw-bold) !default;
 $nav-link-border-active-bg: var(--#{$prefix}secondary) !default;
 // end custom
 

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

@@ -3,10 +3,10 @@
 // scss-docs-start pagination-variables
 $pagination-padding-y: var(--#{$prefix}ref-spacer-1) !default;
 $pagination-padding-x: var(--#{$prefix}ref-spacer-1) !default;
-$pagination-padding-y-sm: var(--#{$prefix}ref-spacer-1) !default;
-$pagination-padding-x-sm: var(--#{$prefix}ref-spacer-1) !default;
-$pagination-padding-y-lg: var(--#{$prefix}ref-spacer-2) !default;
-$pagination-padding-x-lg: var(--#{$prefix}ref-spacer-2) !default;
+$pagination-padding-y-sm: var(--#{$prefix}ref-spacer-0) !default;
+$pagination-padding-x-sm: var(--#{$prefix}ref-spacer-0) !default;
+$pagination-padding-y-lg: var(--#{$prefix}ref-spacer-1) !default;
+$pagination-padding-x-lg: var(--#{$prefix}ref-spacer-1) !default;
 
 // custom
 $pagination-page-item-size: $spacer-8 !default;

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

@@ -1,7 +1,7 @@
 // Progress bars
 
 // scss-docs-start progress-variables
-$progress-font-size: var(--#{$prefix}ref-fs-small) !default;
+$progress-font-size: var(--#{$prefix}fs-small) !default;
 $progress-bg: var(--#{$prefix}secondary-100) !default;
 $progress-border-radius: var(--#{$prefix}border-radius-pill) !default;
 $progress-box-shadow: none !default;
@@ -9,6 +9,6 @@ $progress-bar-color: var(--#{$prefix}white) !default;
 $progress-bar-bg: var(--#{$prefix}secondary) !default;
 
 // custom
-$progress-font-weight: var(--#{$prefix}ref-fw-bold) !default;
+$progress-font-weight: var(--#{$prefix}fw-bold) !default;
 // end custom
 // scss-docs-end progress-variables

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

@@ -5,12 +5,12 @@ $quick-action-button-border: 1px solid var(--#{$prefix}secondary-100) !default;
 $quick-action-button-border-radius: var(--#{$prefix}border-radius) !default;
 $quick-action-button-box-shadow: none !default;
 
-$quick-action-button-line1-font-size: var(--#{$prefix}ref-fs-6) !default;
-$quick-action-button-line1-font-weight: var(--#{$prefix}ref-fw-bold) !default;
+$quick-action-button-line1-font-size: var(--#{$prefix}fs-6) !default;
+$quick-action-button-line1-font-weight: var(--#{$prefix}fw-bold) !default;
 $quick-action-button-line1-color: var(--#{$prefix}body-color) !default;
 
-$quick-action-button-line2-font-size: var(--#{$prefix}ref-fs-small) !default;
-$quick-action-button-line2-font-weight: var(--#{$prefix}ref-fw-normal) !default;
+$quick-action-button-line2-font-size: var(--#{$prefix}fs-small) !default;
+$quick-action-button-line2-font-weight: var(--#{$prefix}fw-normal) !default;
 $quick-action-button-line2-color: var(--#{$prefix}gray-500) !default;
 
 $quick-action-button-representative-image-size: var(--#{$prefix}ref-spacer-9) !default;

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

@@ -4,15 +4,15 @@ $quick-action-check-bg: var(--#{$prefix}white) !default;
 $quick-action-check-border-radius: var(--#{$prefix}border-radius-sm) !default;
 
 $quick-action-check-line1-font-size: var(--#{$prefix}body-font-size) !default;
-$quick-action-check-line1-font-weight: var(--#{$prefix}ref-fw-bold) !default;
+$quick-action-check-line1-font-weight: var(--#{$prefix}fw-bold) !default;
 $quick-action-check-line1-color: var(--#{$prefix}gray-900) !default;
 
-$quick-action-check-line2-font-size: var(--#{$prefix}ref-fs-small) !default;
-$quick-action-check-line2-font-weight: var(--#{$prefix}ref-fw-normal) !default;
+$quick-action-check-line2-font-size: var(--#{$prefix}fs-small) !default;
+$quick-action-check-line2-font-weight: var(--#{$prefix}fw-normal) !default;
 $quick-action-check-line2-color: var(--#{$prefix}gray) !default;
 
 $quick-action-check-line3-font-size: var(--#{$prefix}body-font-size) !default;
-$quick-action-check-line3-font-weight: var(--#{$prefix}ref-fw-bold) !default;
+$quick-action-check-line3-font-weight: var(--#{$prefix}fw-bold) !default;
 $quick-action-check-line3-color: var(--#{$prefix}gray) !default;
 
 $quick-action-check-hover-bg: var(--#{$prefix}gray-100) !default;

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

@@ -2,12 +2,12 @@ $quick-action-select-padding: var(--#{$prefix}ref-spacer-4) !default;
 $quick-action-select-bg: var(--#{$prefix}gray-100) !default;
 $quick-action-select-border-radius: var(--#{$prefix}border-radius-sm) !default;
 
-$quick-action-select-line1-font-size: var(--#{$prefix}ref-fs-small) !default;
-$quick-action-select-line1-font-weight: var(--#{$prefix}ref-fw-normal) !default;
+$quick-action-select-line1-font-size: var(--#{$prefix}fs-small) !default;
+$quick-action-select-line1-font-weight: var(--#{$prefix}fw-normal) !default;
 $quick-action-select-line1-color: var(--#{$prefix}secondary) !default;
 
 $quick-action-select-line2-font-size: var(--#{$prefix}body-font-size) !default;
-$quick-action-select-line2-font-weight: var(--#{$prefix}ref-fw-bold) !default;
+$quick-action-select-line2-font-weight: var(--#{$prefix}fw-bold) !default;
 $quick-action-select-line2-color: var(--#{$prefix}light-text-emphasis) !default;
 
 $quick-action-select-hover-bg: var(--#{$prefix}gray-200) !default;

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

@@ -9,8 +9,8 @@ $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}ref-fs-small) !default;
-$quick-action-switch-hint-font-weight: var(--#{$prefix}ref-fw-normal) !default;
+$quick-action-switch-hint-font-size: var(--#{$prefix}fs-small) !default;
+$quick-action-switch-hint-font-weight: var(--#{$prefix}fw-normal) !default;
 $quick-action-switch-hint-color: var(--#{$prefix}gray-400) !default;
 
 $quick-action-switch-hover-bg: var(--#{$prefix}secondary-soft) !default;

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

@@ -0,0 +1,16 @@
+// scss-docs-start tooltip-variables
+$tooltip-font-size: var(--#{$prefix}tooltip-component-font-size, var(--#{$prefix}body-font-size)) !default;
+$tooltip-max-width: var(--#{$prefix}tooltip-component-max-width, 300px) !default;
+$tooltip-color: var(--#{$prefix}tooltip-component-color, var(--#{$prefix}body-bg)) !default;
+$tooltip-bg: var(--#{$prefix}tooltip-component-bg, var(--#{$prefix}emphasis-color)) !default;
+$tooltip-border-radius: var(--#{$prefix}tooltip-component-border-radius, var(--#{$prefix}ref-spacer-1)) !default;
+$tooltip-opacity: 1 !default;
+$tooltip-padding-y: var(--#{$prefix}ref-spacer-1) !default;
+$tooltip-padding-x: var(--#{$prefix}ref-spacer-2) !default;
+
+// custom
+$tooltip-font-size-sm: var(--#{$prefix}fs-small) !default;
+$tooltip-font-size-lg: var(--#{$prefix}fs-6) !default;
+// end custom
+
+// scss-docs-end tooltip-variables

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

@@ -9,29 +9,63 @@ $font-family-sans-serif: "Source Sans 3", sans-serif !default;
 // $font-size-base affects the font size of the body text
 $font-size-root: 16px !default;
 $font-size-base: 1rem !default; // Assumes the browser default, typically `16px`
-$font-size-sm: $font-size-base * .875 !default;   // 14px
+
+// custom
+$font-size-sm: var(--#{$prefix}fs-small) !default;
+$font-size-sm-value: .875em !default;
+// end custom
+
 $font-size-lg: $font-size-base * 1.125 !default;  // 18px
 
-$font-weight-lighter: lighter !default;
-$font-weight-light: 200 !default;
-$font-weight-normal: 400 !default;
-$font-weight-semibold: 600 !default;
-$font-weight-bold: 700 !default;
-$font-weight-bolder: 800 !default;
+// custom
+$font-weight-lighter-value: lighter !default;
+$font-weight-light-value: 200 !default;
+$font-weight-normal-value: 400 !default;
+$font-weight-semibold-value: 600 !default;
+$font-weight-bold-value: 700 !default;
+$font-weight-bolder-value: 800 !default;
+
+$font-weight-lighter: var(--#{$prefix}fw-lighter) !default;
+$font-weight-light: var(--#{$prefix}fw-light) !default;
+$font-weight-normal: var(--#{$prefix}fw-normal) !default;
+$font-weight-semibold: var(--#{$prefix}fw-semibold) !default;
+$font-weight-bold: var(--#{$prefix}fw-bold) !default;
+$font-weight-bolder: var(--#{$prefix}fw-bolder) !default;
+// end custom
 
 $font-weight-base: $font-weight-normal !default;
 
 $line-height-base: 1.5 !default;
 
-$h1-font-size: $font-size-base * 4 !default;
-$h2-font-size: $font-size-base * 3.5 !default;
-$h3-font-size: $font-size-base * 3 !default;
-$h4-font-size: $font-size-base * 2 !default;
-$h5-font-size: $font-size-base * 1.5 !default;
-$h6-font-size: $font-size-base * 1.125 !default;
+// custom
+$h1-font-size-value: $font-size-base * 4 !default;
+$h2-font-size-value: $font-size-base * 3.5 !default;
+$h3-font-size-value: $font-size-base * 3 !default;
+$h4-font-size-value: $font-size-base * 2 !default;
+$h5-font-size-value: $font-size-base * 1.5 !default;
+$h6-font-size-value: $font-size-base * 1.125 !default;
+
+$h1-font-size: var(--#{$prefix}fs-1) !default;
+$h2-font-size: var(--#{$prefix}fs-2) !default;
+$h3-font-size: var(--#{$prefix}fs-3) !default;
+$h4-font-size: var(--#{$prefix}fs-4) !default;
+$h5-font-size: var(--#{$prefix}fs-5) !default;
+$h6-font-size: var(--#{$prefix}fs-6) !default;
+// end custom
 // scss-docs-end font-variables
 
 // scss-docs-start font-sizes
+// custom
+$font-size-values: (
+  1: $h1-font-size-value,
+  2: $h2-font-size-value,
+  3: $h3-font-size-value,
+  4: $h4-font-size-value,
+  5: $h5-font-size-value,
+  6: $h6-font-size-value
+) !default;
+// end custom
+
 $font-sizes: (
   1: $h1-font-size,
   2: $h2-font-size,
@@ -45,16 +79,35 @@ $font-sizes: (
 // scss-docs-start headings-variables
 $headings-margin-bottom: 0 !default;
 $headings-font-weight: $font-weight-bold !default;
-$headings-line-height: 1.2 !default;
+$headings-line-height-value: 1.2 !default;
+$headings-line-height: var(--#{$prefix}heading-line-height) !default;
 // scss-docs-end headings-variables
 
 // scss-docs-start display-headings
-$display1-font-size: 7.5rem !default;
-$display2-font-size: 4.5rem !default;
-$display3-font-size: 4rem !default;
-$display4-font-size: 3.5rem !default;
-$display5-font-size: 3rem !default;
-$display6-font-size: 2.5rem !default;
+// custom
+$display1-font-size-value: 7.5rem !default;
+$display2-font-size-value: 4.5rem !default;
+$display3-font-size-value: 4rem !default;
+$display4-font-size-value: 3.5rem !default;
+$display5-font-size-value: 3rem !default;
+$display6-font-size-value: 2.5rem !default;
+
+$display1-font-size: var(--#{$prefix}fs-display-1) !default;
+$display2-font-size: var(--#{$prefix}fs-display-2) !default;
+$display3-font-size: var(--#{$prefix}fs-display-3) !default;
+$display4-font-size: var(--#{$prefix}fs-display-4) !default;
+$display5-font-size: var(--#{$prefix}fs-display-5) !default;
+$display6-font-size: var(--#{$prefix}fs-display-6) !default;
+
+$display-font-size-values: (
+  1: $display1-font-size-value,
+  2: $display2-font-size-value,
+  3: $display3-font-size-value,
+  4: $display4-font-size-value,
+  5: $display5-font-size-value,
+  6: $display6-font-size-value
+) !default;
+// end custom
 
 $display-font-sizes: (
   1: $display1-font-size,
@@ -72,7 +125,10 @@ $display-line-height: $headings-line-height !default;
 // scss-docs-start type-variables
 $lead-font-weight: $font-weight-normal !default;
 
+// custom
 $small-font-size: $font-size-sm !default;
+$small-font-size-value: $font-size-sm-value !default;
+// end custom
 
 $sub-sup-font-size: .75em !default;
 

package/src/style/abstracts/variables/_z-index.scss

@@ -0,0 +1,11 @@
+// Z-index master list
+//
+// Warning: Avoid customizing these values. They're used for a bird's eye view
+// of components dependent on the z-axis and are designed to all work together.
+
+// scss-docs-start zindex-stack
+$zindex-offcanvas-backdrop: 1050 !default;
+$zindex-offcanvas: 1055 !default;
+$zindex-modal-backdrop: 1050 !default;
+$zindex-modal: 1055 !default;
+// scss-docs-end zindex-stack

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

@@ -1,6 +1,6 @@
 @import "bootstrap/scss/reboot";
 
-@import "bootstrap/scss/type";
+// @import "bootstrap/scss/type"; we use our own bootstrap based implementation
 
 @import "bootstrap/scss/images";
 @import "bootstrap/scss/containers";
@@ -34,6 +34,7 @@
 @import "bootstrap/scss/placeholders";
 @import "bootstrap/scss/badge";
 
+@import "type";
 @import "body";
 @import "accordion";
 @import "form-switch";
@@ -41,7 +42,8 @@
 @import "form-control";
 @import "form-text";
 @import "input-group";
-@import "button";
+@import "buttons";
+@import "button-group";
 @import "progress";
 @import "alert";
 @import "collapse";
@@ -49,3 +51,6 @@
 @import "breadcrumb";
 @import "dropdown";
 @import "label";
+@import "avatar";
+@import "backdrop";
+@import "tooltip";

package/src/style/base/_avatar.scss

@@ -0,0 +1,61 @@
+.avatar {
+  --#{$prefix}avatar-size: var(--#{$prefix}ref-spacer-8);
+  --#{$prefix}avatar-title-bg: var(--#{$prefix}gray-500);
+  --#{$prefix}avatar-title-color: var(--#{$prefix}white);
+  --#{$prefix}avatar-radius: var(--#{$prefix}border-radius-pill);
+
+  position: relative;
+  display: inline-block;
+  width: var(--#{$prefix}avatar-size);
+  height: var(--#{$prefix}avatar-size);
+  font-size: calc(var(--#{$prefix}avatar-size) / 3);
+
+  .avatar-img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    border-radius: var(--#{$prefix}avatar-radius);
+  }
+
+  .avatar-title {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    height: 100%;
+    color: var(--#{$prefix}avatar-title-color);
+    white-space: pre-wrap;
+    background-color: var(--#{$prefix}avatar-title-bg);
+    border-radius: var(--#{$prefix}avatar-radius);
+  }
+}
+
+.avatar-xs {
+  --#{$prefix}avatar-size: var(--#{$prefix}ref-spacer-4);
+}
+
+.avatar-sm {
+  --#{$prefix}avatar-size: var(--#{$prefix}ref-spacer-6);
+}
+
+.avatar-lg {
+  --#{$prefix}avatar-size: var(--#{$prefix}ref-spacer-10);
+}
+
+.avatar-xl {
+  --#{$prefix}avatar-size: var(--#{$prefix}ref-spacer-12);
+}
+
+.avatar-xxl {
+  --#{$prefix}avatar-size: var(--#{$prefix}ref-spacer-14);
+}
+
+.avatar-group {
+  .avatar-img {
+    box-shadow: -2px 0 2px rgba(0, 0, 0, .1);
+  }
+
+  .avatar + .avatar {
+    margin-left: calc(var(--#{$prefix}avatar-size) * -.25);
+  }
+}

package/src/style/base/_backdrop.scss

@@ -0,0 +1,9 @@
+.backdrop {
+  // scss-docs-start modal-backdrop-css-vars
+  --#{$prefix}backdrop-zindex: #{$zindex-modal};
+  --#{$prefix}backdrop-bg: #{$modal-backdrop-bg};
+  --#{$prefix}backdrop-opacity: #{$modal-backdrop-opacity};
+  // scss-docs-end modal-backdrop-css-vars
+
+  @include overlay-backdrop(var(--#{$prefix}backdrop-zindex), var(--#{$prefix}backdrop-bg), var(--#{$prefix}backdrop-opacity));
+}

package/src/style/base/_button-group.scss

@@ -0,0 +1,13 @@
+.btn-group-vertical {
+  .btn {
+    --#{$prefix}btn-border-radius: var(--#{$prefix}border-radius-sm);
+  }
+
+  &.btn-group-lg .btn {
+    --#{$prefix}btn-border-radius: var(--#{$prefix}border-radius);
+  }
+
+  &.btn-group-sm .btn {
+    --#{$prefix}btn-border-radius: var(--#{$prefix}border-radius-sm);
+  }
+}

package/src/style/base/{_button.scss → _buttons.scss}

@@ -39,7 +39,7 @@
   cursor: if($enable-button-pointers, pointer, null);
   user-select: none;
   border: var(--#{$prefix}btn-border-width) solid var(--#{$prefix}btn-border-color);
-  @include border-radius(var(--#{$prefix}btn-border-radius));
+  border-radius: var(--#{$prefix}btn-border-radius);
   @include gradient-bg(var(--#{$prefix}btn-bg));
   @include box-shadow(var(--#{$prefix}btn-box-shadow));
   @include transition($btn-transition);
@@ -66,14 +66,18 @@
 
   // focus selectors
   .btn-check:focus-visible + &,
-  &:focus-visible,
-  &.focus-visible {
+  &:focus-visible:not(:hover),
+  &.focus-visible:not(:hover) {
     // copy of .btn:focus bootstrap + focus var
     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
+  }
 
+  .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));
   }
@@ -119,57 +123,15 @@
 
 @each $color, $value in $theme-colors {
   .btn-#{$color} {
-    @if $color == "light" { // default bootstrap style
-      @include button-variant(
-        $value,
-        $value,
-        $hover-background: shade-color($value, $btn-hover-bg-shade-amount),
-        $hover-border: shade-color($value, $btn-hover-border-shade-amount),
-        $active-background: shade-color($value, $btn-active-bg-shade-amount),
-        $active-border: shade-color($value, $btn-active-border-shade-amount)
-      );
-    } @else if $color == "dark" { // default bootstrap style
-      @include button-variant(
-        $value,
-        $value,
-        $hover-background: tint-color($value, $btn-hover-bg-tint-amount),
-        $hover-border: tint-color($value, $btn-hover-border-tint-amount),
-        $active-background: tint-color($value, $btn-active-bg-tint-amount),
-        $active-border: tint-color($value, $btn-active-border-tint-amount)
-      );
-    } @else {
-      @include df-button-variant($color);
-    }
+    @include df-button-variant-mapper($color);
   }
 
   .btn-outline-#{$color} {
-    @if $color == "light" or $color == "dark" { // default bootstrap style
-      @include button-outline-variant($value);
-    } @else {
-      @include df-button-outline-variant($color);
-    }
+    @include df-button-variant-mapper($color, "outline");
   }
 
   .btn-link-#{$color} {
-    span {
-      text-decoration: underline;
-    }
-
-    @if $color == "light" {
-      @include df-button-link-variant(
-        "gray",
-        $default-color: $value,
-        $hover-bg-color: var(--#{$prefix}gray-300),
-        $active-bg-color: var(--#{$prefix}gray-500)
-      );
-    } @else if $color == "dark" {
-      @include df-button-link-variant(
-        "gray",
-        $default-color: $value
-      );
-    } @else {
-      @include df-button-link-variant($color);
-    }
+    @include df-button-variant-mapper($color, "link");
   }
 }
 
@@ -194,6 +156,10 @@
 [class*="btn-link-"] {
   --#{$prefix}btn-text-decoration: var(--#{$prefix}link-decoration);
 
+  span {
+    text-decoration: underline;
+  }
+
   @if $enable-gradients {
     background-image: none;
   }

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

@@ -13,8 +13,9 @@
     border-color: $form-check-input-checked-border-color;
   }
 
-  &:disabled {
+  &:disabled:not(:checked, :indeterminate) {
     background-color: $form-check-input-disabled-bg;
     border-color: $form-check-input-disabled-border-color;
+    opacity: 1;
   }
 }

package/src/style/base/_input-group.scss

@@ -1,12 +1,12 @@
 // bootstrap reset layer
+.input-group-text + .form-control {
+  padding-left: 0;
+}
+
 .input-group > .form-select,
 .input-group > .form-control {
   border: 0;
 
-  &:not(:first-child) {
-    padding-left: 0;
-  }
-
   &:focus {
     border: 0;
     box-shadow: none;
@@ -18,7 +18,7 @@
   background-position: right 0 center;
 }
 
-.input-group > .form-control:not(:last-child) {
+.form-control:has(~ .input-group-text) {
   padding-right: 0;
 }
 
@@ -62,7 +62,6 @@
   --#{$prefix}input-disabled-bg: #{$input-disabled-bg};
   --#{$prefix}input-disabled-color: #{$input-disabled-color};
 
-
   border: var(--#{$prefix}input-border-width) solid var(--#{$prefix}input-border-color);
   @include border-radius(var(--#{$prefix}input-border-radius), 0);
 
@@ -111,4 +110,10 @@
   button:disabled .d-icon {
     --#{$prefix}icon-color: var(--#{$prefix}input-disabled-color);
   }
+
+  > .btn {
+    --#{$prefix}btn-border-radius: var(--#{$prefix}input-border-radius);
+
+    margin: -1px;
+  }
 }

package/src/style/base/_tooltip.scss

@@ -0,0 +1,23 @@
+.tooltip {
+  --#{$prefix}tooltip-sm-font-size: #{$tooltip-font-size-sm};
+  --#{$prefix}tooltip-lg-font-size: #{$tooltip-font-size-lg};
+
+  fill: var(--#{$prefix}tooltip-bg);
+
+  &.tooltip-sm {
+    --#{$prefix}tooltip-font-size: var(--#{$prefix}tooltip-sm-font-size);
+  }
+
+  &.tooltip-lg {
+    --#{$prefix}tooltip-font-size: var(--#{$prefix}tooltip-lg-font-size);
+  }
+
+  @each $theme, $value in $theme-colors {
+    $color: color-contrast-var($value);
+
+    &.tooltip-#{$theme} {
+      --#{$prefix}tooltip-color: var(--#{$prefix}tooltip-component-color, #{$color});
+      --#{$prefix}tooltip-bg: var(--#{$prefix}tooltip-component-bg, var(--#{$prefix}#{$theme}));
+    }
+  }
+}