@dynamic-framework/ui-react 1.36.2 → 2.0.0-dev.10

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

@@ -3,7 +3,7 @@
 // Dropdown menu container and contents.
 
 // scss-docs-start dropdown-variables
-$dropdown-padding-x: var(--#{$prefix}--#{$prefix}ref-spacer-2) !default;
+$dropdown-padding-x: var(--#{$prefix}ref-spacer-2) !default;
 $dropdown-bg: var(--#{$prefix}white) !default;
 $dropdown-border-radius: var(--#{$prefix}border-radius-sm) !default;
 $dropdown-border-width: 0 !default;
@@ -11,8 +11,10 @@ $dropdown-border-width: 0 !default;
 $dropdown-divider-margin-y: var(--#{$prefix}ref-spacer-2) !default;
 $dropdown-box-shadow: var(--#{$prefix}box-shadow-sm) !default;
 
-$dropdown-link-color: rgb(var(--#{$prefix}gray-500-rgb)) !default;
-$dropdown-link-hover-bg: rgb(var(--#{$prefix}gray-100-rgb)) !default;
+$dropdown-link-color: rgb(var(--#{$prefix}gray-700-rgb)) !default;
+$dropdown-link-hover-color: rgb(var(--#{$prefix}gray-700-rgb)) !default;
+$dropdown-link-hover-bg: rgb(var(--#{$prefix}gray-25-rgb)) !default;
+$dropdown-link-active-bg: rgb(var(--#{$prefix}gray-50-rgb)) !default;
 
 $dropdown-item-padding-y: var(--#{$prefix}ref-spacer-2) !default;
 $dropdown-item-padding-x: var(--#{$prefix}ref-spacer-4) !default;
@@ -28,7 +30,7 @@ $dropdown-header-color: var(--#{$prefix}gray-600) !default;
 $dropdown-dark-color: var(--#{$prefix}gray-300) !default;
 $dropdown-dark-bg: var(--#{$prefix}gray-800) !default;
 $dropdown-dark-link-hover-color: var(--#{$prefix}white) !default;
-$dropdown-dark-link-hover-bg: rgba(var(--#{$prefix}white-rgb), .15) !default;
+$dropdown-dark-link-hover-bg: var(--#{$prefix}gray-50) !default;
 $dropdown-dark-link-disabled-color: var(--#{$prefix}gray-500) !default;
 $dropdown-dark-header-color: var(--#{$prefix}gray-500) !default;
 // scss-docs-end dropdown-dark-variables

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

@@ -1,6 +1,6 @@
 // scss-docs-start form-text-variables
 $form-text-margin-top: var(--#{$prefix}ref-spacer-1) !default;
-$form-text-color: var(--#{$prefix}body-color) !default;
+$form-text-color: var(--#{$prefix}bs-gray-400) !default;
 // scss-docs-end form-text-variables
 
 // scss-docs-start form-label-variables
@@ -11,8 +11,8 @@ $form-label-color: var(--#{$prefix}label-color) !default;
 // scss-docs-end form-label-variables
 
 // scss-docs-start form-input-variables
-$input-padding-y: $spacer-3 !default;
-$input-padding-x: $spacer-4 !default;
+$input-padding-y: $spacer-2 !default;
+$input-padding-x: $spacer-3 !default;
 
 $input-padding-x-sm: $spacer-2 !default;
 $input-padding-y-sm: $spacer-1 !default;
@@ -35,7 +35,7 @@ $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: $component-focus-border-color !default; // unused
+$input-focus-border-color: var(--#{$prefix}gray-200) !default;
 $input-focus-width: $input-btn-focus-width !default;
 
 $input-placeholder-color: var(--#{$prefix}border-color) !default;

package/src/style/abstracts/variables/_list-group.scss

@@ -3,7 +3,7 @@
 // scss-docs-start list-group-variables
 $list-group-color: var(--#{$prefix}dark) !default;
 $list-group-bg: transparent !default;
-$list-group-border-color: var(--#{$prefix}gray-300) !default;
+$list-group-border-color: var(--#{$prefix}gray-100) !default;
 $list-group-border-radius: var(--#{$prefix}border-radius-sm) !default;
 
 $list-group-item-padding-y: var(--#{$prefix}ref-spacer-3) !default;
@@ -14,7 +14,7 @@ $list-group-item-bg-scale: 0% !default;
 $list-group-item-color-scale: 40% !default;
 // fusv-enable
 
-$list-group-hover-bg: var(--#{$prefix}surface-primary) !default;
+$list-group-hover-bg: var(--#{$prefix}subtle-primary) !default;
 
 $list-group-disabled-color: var(--#{$prefix}gray-600) !default;
 

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

@@ -19,19 +19,20 @@ $modal-backdrop-bg: var(--#{$prefix}black) !default;
 $modal-backdrop-opacity: .3 !default;
 
 $modal-header-border-color: transparent !default;
-$modal-header-padding-y: var(--#{$prefix}ref-spacer-4) !default;
+$modal-header-padding-y: var(--#{$prefix}ref-spacer-6) !default;
 $modal-header-padding-x: var(--#{$prefix}ref-spacer-4) !default;
 $modal-header-padding: var(--#{$prefix}ref-spacer-4) !default; // Keep this for backwards compatibility
+$modal-body-padding: var(--#{$prefix}ref-spacer-4) var(--#{$prefix}ref-spacer-6) !default;
 
 $modal-footer-border-color: transparent !default;
 
 // custom
 $modal-separator-bg: var(--#{$prefix}gray-100) !default;
 $modal-separator-height: 1px !default;
-$modal-separator-margin-x: var(--#{$prefix}ref-spacer-4) !default;
+$modal-separator-margin-x: 0 !default;
 // end custom
 
 // custom
-$modal-footer-padding: var(--#{$prefix}ref-spacer-4) !default;
+$modal-footer-padding: var(--#{$prefix}ref-spacer-4) var(--#{$prefix}ref-spacer-6) !default;
 // end custom
 // scss-docs-end modal-variables

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

@@ -3,6 +3,7 @@
 // scss-docs-start offcanvas-variables
 $offcanvas-padding-y: var(--#{$prefix}ref-spacer-4) !default;
 $offcanvas-padding-x: var(--#{$prefix}ref-spacer-4) !default;
+$offcanvas-box-shadow: var(--#{$prefix}box-shadow-lg) !default;
 
 // custom
 $offcanvas-header-gap: var(--#{$prefix}ref-spacer-4) !default;

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

@@ -12,7 +12,7 @@ $pagination-padding-x-lg: var(--#{$prefix}ref-spacer-1) !default;
 $pagination-page-item-size: $spacer-8 !default;
 $pagination-page-item-size-lg: $spacer-10 !default;
 $pagination-page-item-size-sm: $spacer-6 !default;
-$pagination-page-border-radius: $pagination-page-item-size !default;
+$pagination-page-border-radius: var(--#{$prefix}border-radius) !default;
 $pagination-page-control-color: var(--#{$prefix}primary) !default;
 $pagination-page-control-disabled-color: var(--#{$prefix}primary-200) !default;
 // end custom
@@ -22,7 +22,7 @@ $pagination-bg: transparent !default;
 $pagination-border-width: 0 !default;
 
 $pagination-hover-color: var(--#{$prefix}body-color) !default;
-$pagination-hover-bg: var(--#{$prefix}primary-50) !default;
+$pagination-hover-bg: var(--#{$prefix}gray-50) !default;
 $pagination-hover-border-color: 0 !default; // Todo in v6: remove this?
 
 $pagination-focus-color: #{$pagination-hover-color} !default;
@@ -33,6 +33,6 @@ $pagination-focus-outline: 0 !default;
 $pagination-disabled-color: var(--#{$prefix}body-color) !default;
 $pagination-disabled-bg: var(--#{$prefix}transparent) !default;
 
-$pagination-border-radius-sm: $pagination-page-item-size-sm !default;
-$pagination-border-radius-lg: $pagination-page-item-size-lg !default;
+// $pagination-border-radius-sm: $pagination-page-item-size-sm !default;
+// $pagination-border-radius-lg: $pagination-page-item-size-lg !default;
 // scss-docs-end pagination-variables

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

@@ -0,0 +1 @@
+$box-shadow-lg: 0 10px 10px rgba(0, 0, 0, .02) !default;

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

@@ -10,17 +10,22 @@ $table-bg-scale: -100% !default;
 
 $table-striped-color: $table-color !default;
 $table-striped-bg-factor: .05 !default;
-$table-striped-bg: unquote("color-mix(in srgb, var(--#{$prefix}white), var(--#{$prefix}black) #{(100% - $table-bg-scale) * $table-striped-bg-factor})") !default;
 
 $table-active-color: $table-color !default;
 $table-active-bg-factor: .1 !default;
-$table-active-bg: unquote("color-mix(in srgb, var(--#{$prefix}white), var(--#{$prefix}black) #{(100% - $table-bg-scale) * $table-active-bg-factor})") !default;
 
 $table-hover-color: $table-color !default;
 $table-hover-bg-factor: .075 !default;
-$table-hover-bg: unquote("color-mix(in srgb, var(--#{$prefix}white), var(--#{$prefix}black) #{(100% - $table-bg-scale) * $table-hover-bg-factor})") !default;
+
+
+$table-bg-color-default: var(--#{$prefix}gray-25) !default;
+
+$table-hover-bg: $table-bg-color-default !default;
+$table-striped-bg: $table-bg-color-default !default;
+$table-active-bg: $table-bg-color-default !default;
 
 $table-border-factor: .1 !default;
+$table-border-color: var(--#{$prefix}gray-50) !default;
 
 
 // scss-docs-end table-variables

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

@@ -1,7 +1,7 @@
 // scss-docs-start tooltip-variables
 $tooltip-font-size: var(--#{$prefix}body-font-size) !default;
 $tooltip-max-width:  300px !default;
-$tooltip-color:  var(--#{$prefix}body-bg) !default;
+$tooltip-color: var(--#{$prefix}body-bg) !default;
 $tooltip-bg: var(--#{$prefix}emphasis-color) !default;
 $tooltip-border-radius: var(--#{$prefix}ref-spacer-1) !default;
 $tooltip-opacity: 1 !default;

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

@@ -3,7 +3,7 @@
 // Font, line-height, and color for body text, headings, and more.
 
 // scss-docs-start font-variables
-$font-family-sans-serif: "Source Sans 3", sans-serif !default;
+$font-family-sans-serif: "Jost", sans-serif !default;
 
 // $font-size-root affects the value of `rem`, which is used for as well font sizes, paddings, and margins
 // $font-size-base affects the font size of the body text
@@ -21,9 +21,9 @@ $font-size-lg: $font-size-base * 1.125 !default;  // 18px
 $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-semibold-value: 500 !default;
+$font-weight-bold-value: 600 !default;
+$font-weight-bolder-value: 600 !default;
 
 $font-weight-lighter: var(--#{$prefix}fw-lighter) !default;
 $font-weight-light: var(--#{$prefix}fw-light) !default;
@@ -169,9 +169,9 @@ $small-font-size-value: $font-size-sm-value !default;
 
 $sub-sup-font-size: .75em !default;
 
-// fusv-disable
-$text-muted: var(--#{$prefix}gray) !default;
-// fusv-enable
+// // fusv-disable
+// $text-muted: var(--#{$prefix}gray-400) !default;
+// // fusv-enable
 
 $blockquote-margin-y: var(--#{$prefix}ref-spacer-4) !default;
 $blockquote-footer-color: var(--#{$prefix}gray-600) !default;

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

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

package/src/style/base/_alert.scss

@@ -1,7 +1,7 @@
 .alert {
   --#{$prefix}alert-gap: #{$alert-gap};
   --#{$prefix}alert-close-icon-size: #{$alert-close-icon-size};
-  --#{$prefix}alert-icon-size: var(--#{$prefix}ref-spacer-5);
+  --#{$prefix}alert-icon-size: var(--#{$prefix}ref-spacer-6);
 
   display: flex;
   flex-direction: row;
@@ -20,30 +20,4 @@
       color: var(--#{$prefix}icon-color);
     }
   }
-
-  @each $theme, $value in map-remove($theme-colors, "light", "dark") {
-    &.alert-#{$theme} {
-      --#{$prefix}alert-icon-color: var(--#{$prefix}#{$theme}-500);
-      --#{$prefix}alert-color: var(--#{$prefix}body-color);
-
-      --#{$prefix}alert-bg: var(--#{$prefix}surface-#{$theme});
-      --#{$prefix}alert-border-color: var(--#{$prefix}surface-#{$theme});
-    }
-  }
-
-  &.alert-light {
-    --#{$prefix}alert-icon-color: var(--#{$prefix}gray-500);
-    --#{$prefix}alert-color: var(--#{$prefix}body-color);
-
-    --#{$prefix}alert-bg: var(--#{$prefix}surface-gray);
-    --#{$prefix}alert-border-color: var(--#{$prefix}surface-gray);
-  }
-
-  &.alert-dark {
-    --#{$prefix}alert-icon-color: var(--#{$prefix}light);
-    --#{$prefix}alert-color: var(--#{$prefix}white);
-
-    --#{$prefix}alert-bg: var(--#{$prefix}gray-500);
-    --#{$prefix}alert-border-color: var(--#{$prefix}gray-500);
-  }
 }

package/src/style/base/_badge.scss

@@ -3,15 +3,17 @@
   --#{$prefix}badge-icon-size: #{$badge-font-size};
   --#{$prefix}badge-bg: #{$badge-bg};
   --#{$prefix}badge-color: #{$badge-color};
+  --#{$prefix}badge-sm-font-size: var(--#{$prefix}fs-body-small);
+  --#{$prefix}badge-lg-font-size: var(--#{$prefix}fs-body-large);
 
   display: inline-flex;
   gap: var(--#{$prefix}badge-gap);
+  align-items: center;
   color: var(--#{$prefix}badge-color);
-
   background-color: var(--#{$prefix}badge-bg);
 
   .d-icon {
-    --#{$prefix}icon-size: var(--#{$prefix}badge-icon-size);
+    --#{$prefix}icon-size: .75rem;
   }
 
   @each $theme, $value in map-remove($theme-colors, "light") {
@@ -23,23 +25,58 @@
     }
   }
 
-  &.badge-light {
-    --#{$prefix}badge-bg: var(--#{$prefix}gray-200);
+
+  &.badge-sm {
+    --#{$prefix}badge-font-size: var(--#{$prefix}badge-sm-font-size);
+  }
+
+  &.badge-lg {
+    --#{$prefix}badge-font-size: var(--#{$prefix}badge-lg-font-size);
+  }
+
+  &.badge-secondary {
+    --#{$prefix}badge-bg: var(--#{$prefix}gray-100);
     --#{$prefix}badge-color: var(--#{$prefix}gray-900);
   }
 
-  @each $theme, $value in map-remove($theme-colors, "light", "dark") {
-    $color: color-contrast-var($value);
+  &.badge-light {
+    --#{$prefix}badge-bg: var(--#{$prefix}gray-25);
+    --#{$prefix}badge-color: var(--#{$prefix}gray-700);
+  }
 
-    &.badge-soft-#{$theme} {
-      --#{$prefix}badge-bg: var(--#{$prefix}surface-#{$theme});
-      --#{$prefix}badge-color: var(--#{$prefix}body-color);
-    }
+  &.badge-soft-primary {
+    --#{$prefix}badge-bg: var(--#{$prefix}primary-50);
+    --#{$prefix}badge-color: var(--#{$prefix}primary-700);
+  }
+
+  &.badge-soft-secondary {
+    --#{$prefix}badge-bg: var(--#{$prefix}gray-50);
+    --#{$prefix}badge-color: var(--#{$prefix}gray-700);
+  }
+
+  &.badge-soft-success {
+    --#{$prefix}badge-bg: var(--#{$prefix}success-50);
+    --#{$prefix}badge-color: var(--#{$prefix}success-700);
+  }
+
+  &.badge-soft-warning {
+    --#{$prefix}badge-bg: var(--#{$prefix}warning-50);
+    --#{$prefix}badge-color: var(--#{$prefix}warning-800);
+  }
+
+  &.badge-soft-info {
+    --#{$prefix}badge-bg: var(--#{$prefix}info-50);
+    --#{$prefix}badge-color: var(--#{$prefix}info-700);
+  }
+
+  &.badge-soft-danger {
+    --#{$prefix}badge-bg: var(--#{$prefix}danger-50);
+    --#{$prefix}badge-color: var(--#{$prefix}danger-700);
   }
 
   &.badge-soft-light {
-    --#{$prefix}badge-bg: var(--#{$prefix}gray-700);
-    --#{$prefix}badge-color: var(--#{$prefix}white);
+    --#{$prefix}badge-bg: var(--#{$prefix}gray-25);
+    --#{$prefix}badge-color: var(--#{$prefix}gray-500);
   }
 
   &.badge-soft-dark {
@@ -47,3 +84,4 @@
     --#{$prefix}badge-color: var(--#{$prefix}body-color);
   }
 }
+

package/src/style/base/_buttons.scss

@@ -16,11 +16,14 @@
   --#{$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};
+  --#{$prefix}btn-lg-font-size: #{$btn-lg-font-size};
   --#{$prefix}btn-sm-padding-y: #{$btn-padding-y-sm};
   --#{$prefix}btn-sm-padding-x: #{$btn-padding-x-sm};
   --#{$prefix}btn-sm-font-size: #{$btn-font-size-sm};
+  --#{$prefix}btn-box-shadow: #{btn-box-shadow};
+  --#{$prefix}btn-loading-gap: #{$btn-loading-gap};
 
+  position: relative;
   display: inline-flex;
   flex-direction: row;
   gap: var(--#{$prefix}btn-gap, $spacer-2);
@@ -28,7 +31,6 @@
   justify-content: center;
   padding: var(--#{$prefix}btn-padding-y) var(--#{$prefix}btn-padding-x);
   font-family: var(--#{$prefix}btn-font-family);
-  @include font-size(var(--#{$prefix}btn-font-size));
   font-weight: var(--#{$prefix}btn-font-weight);
   line-height: var(--#{$prefix}btn-line-height);
   color: var(--#{$prefix}btn-color);
@@ -40,14 +42,12 @@
   user-select: none;
   border: var(--#{$prefix}btn-border-width) solid var(--#{$prefix}btn-border-color);
   border-radius: var(--#{$prefix}btn-border-radius);
+  box-shadow: var(--#{$prefix}btn-box-shadow);
+  @include font-size(var(--#{$prefix}btn-font-size));
   @include gradient-bg(var(--#{$prefix}btn-bg));
   @include box-shadow(var(--#{$prefix}btn-box-shadow));
   @include transition($btn-transition);
 
-  > span {
-    text-decoration: var(--#{$prefix}btn-text-decoration);
-  }
-
   // hover selectors
   &.hover,
   &:hover {
@@ -79,6 +79,16 @@
       box-shadow: var(--#{$prefix}btn-focus-box-shadow);
     }
   }
+  /* stylelint-disable-next-line scss/selector-no-union-class-name */
+  &-loading {
+    position: relative;
+    display: inline-flex;
+    gap: var(--#{$prefix}btn-loading-gap);
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    height: 100%;
+  }
 
   .btn-check.focus-visible + &,
   .btn-check:focus-visible + & {
@@ -128,11 +138,13 @@
   &.disabled,
   &:disabled,
   fieldset:disabled & {
+
     color: var(--#{$prefix}btn-disabled-color);
     pointer-events: none;
     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);
   }
@@ -143,16 +155,18 @@
 }
 
 @each $color, $value in $theme-colors {
-  .btn-#{$color} {
-    @include df-button-variant-mapper($color);
-  }
+  @if not map-has-key($theme-colors-extra, $color) {
+    .btn-#{$color} {
+      @include df-button-variant-mapper($color);
+    }
 
-  .btn-outline-#{$color} {
-    @include df-button-variant-mapper($color, "outline");
-  }
+    .btn-link-#{$color} {
+      @include df-button-variant-mapper($color, "link");
+    }
 
-  .btn-link-#{$color} {
-    @include df-button-variant-mapper($color, "link");
+    .btn-outline-#{$color} {
+      @include df-button-variant-outline-mapper($color);
+    }
   }
 }
 
@@ -177,8 +191,9 @@
 [class*="btn-link-"] {
   --#{$prefix}btn-text-decoration: var(--#{$prefix}link-decoration);
 
+  &.hover,
   &:hover {
-    --#{$prefix}btn-text-decoration: underline;
+    background: rgba(0, 0, 0, .03);
   }
 
   @if $enable-gradients {
@@ -192,40 +207,28 @@
 
 // Make a button look and behave like a link
 .btn-link {
-  --#{$prefix}btn-font-weight: #{$font-weight-normal};
   --#{$prefix}btn-color: #{$btn-link-color};
   --#{$prefix}btn-bg: transparent;
   --#{$prefix}btn-border-color: transparent;
-  --#{$prefix}btn-hover-color: #{$btn-link-hover-color};
+  --#{$prefix}btn-hover-color: #{$btn-link-color};
   --#{$prefix}btn-hover-border-color: transparent;
-  --#{$prefix}btn-active-color: #{$btn-link-hover-color};
+  --#{$prefix}btn-active-color: #{$btn-link-color};
   --#{$prefix}btn-active-border-color: transparent;
   --#{$prefix}btn-disabled-color: #{$btn-link-disabled-color};
   --#{$prefix}btn-disabled-border-color: transparent;
   --#{$prefix}btn-box-shadow: 0 0 0 #000; // Can't use `none` as keyword negates all values when used with multiple shadows
   --#{$prefix}btn-focus-shadow-rgb: #{$btn-link-focus-shadow-rgb};
+  --#{$prefix}btn-box-shadow: none;
 
   text-decoration: $link-decoration;
   @if $enable-gradients {
     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);
-  }
-
   // No need for an active state here
 }

package/src/style/base/_dropdown.scss

@@ -1,3 +1,21 @@
+// .dropdown-item {
+//   --#{$prefix}dropdown-item-border-radius: #{$dropdown-item-border-radius};
+// }
+
 .dropdown-item {
   --#{$prefix}dropdown-item-border-radius: #{$dropdown-item-border-radius};
+  --#{$prefix}dropdown-item-active-bg: var(--#{$prefix}gray-25);
+  --#{$prefix}dropdown-item-active-color: inherit;
+  &:active {
+    color: var(--#{$prefix}dropdown-item-active-color);
+    background-color: var(--#{$prefix}dropdown-item-active-bg);
+  }
+  &.dropdown-item-danger {
+    color: var(--#{$prefix}danger-500);
+    &:hover,
+    &:active,
+    &:focus {
+      background-color: var(--#{$prefix}danger-25);
+    }
+  }
 }

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

@@ -65,6 +65,7 @@
   --#{$prefix}input-disabled-border-color: #{$input-disabled-border-color};
   --#{$prefix}input-disabled-bg: #{$input-disabled-bg};
   --#{$prefix}input-disabled-color: #{$input-disabled-color};
+  --#{$prefix}btn-group-text-color: #{$gray-400};
 
   // input group icon sizes
   --#{$prefix}input-group-sm-icon-size: #{$input-group-sm-icon-size};
@@ -137,3 +138,7 @@
     margin: -1px;
   }
 }
+
+.input-group-text {
+  color: var(--#{$prefix}btn-group-text-color);
+}

package/src/style/base/_label.scss

@@ -9,8 +9,4 @@ label {
   font-size: var(--#{$prefix}label-font-size);
   font-weight: var(--#{$prefix}label-font-weight);
   color: var(--#{$prefix}label-color);
-
-  .d-icon {
-    --#{$prefix}icon-color: var(--#{$prefix}focus-ring-color);
-  }
 }

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

@@ -0,0 +1,6 @@
+.list-group-item {
+  --#{$prefix}list-group-item-gap: .75rem;
+  display: flex;
+  gap: var(--#{$prefix}list-group-item-gap);
+  align-items: center;
+}

package/src/style/base/_pagination.scss

@@ -3,6 +3,7 @@
   --#{$prefix}pagination-border-radius: #{$pagination-page-border-radius};
   --#{$prefix}pagination-page-control-color: #{$pagination-page-control-color};
   --#{$prefix}pagination-page-control-disabled-color: #{$pagination-page-control-disabled-color};
+  gap: var(--#{$prefix}ref-spacer-1);
   margin: 0;
 
   .page-item {
@@ -26,6 +27,7 @@
     justify-content: center;
     width: 100%;
     height: 100%;
+    padding-inline: .5rem;
     border-radius: var(--#{$prefix}pagination-border-radius);
   }
 

package/src/style/base/_tables.scss

@@ -52,6 +52,10 @@
   border-top: calc(#{$table-border-width} * 2) solid $table-group-separator-color;
 }
 
+th {
+  font-weight: var(--#{$prefix}fw-semibold);
+}
+
 //
 // Change placement of captions with a class
 //

package/src/style/base/_tooltip.scss

@@ -2,7 +2,7 @@
   --#{$prefix}tooltip-sm-font-size: #{$tooltip-font-size-sm};
   --#{$prefix}tooltip-lg-font-size: #{$tooltip-font-size-lg};
 
-  fill: var(--#{$prefix}tooltip-bg);
+  // fill: var(--#{$prefix}tooltip-bg);
 
   &.tooltip-sm {
     --#{$prefix}tooltip-font-size: var(--#{$prefix}tooltip-sm-font-size);
@@ -11,13 +11,4 @@
   &.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: #{$color};
-      --#{$prefix}tooltip-bg: var(--#{$prefix}#{$theme});
-    }
-  }
 }

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

@@ -2,16 +2,16 @@
 @import "d-icon";
 @import "d-input-pin";
 @import "d-button-icon";
-@import "d-quick-action-button";
-@import "d-quick-action-select";
-@import "d-quick-action-check";
-@import "d-quick-action-switch";
 @import "d-chip";
+@import "d-tabs";
 @import "d-modal";
+@import "d-timeline";
+@import "d-box";
 @import "d-offcanvas";
 @import "d-collapse-icon-text";
 @import "d-datepicker";
 @import "d-timepicker";
+@import "d-voucher";
 @import "d-close";
 @import "d-popover";
 @import "d-box-file";
@@ -22,3 +22,4 @@
 @import "d-select";
 @import "d-table-head";
 @import "d-input-phone";
+@import "d-credit-card";