@dynamic-framework/ui-react 1.26.0 → 1.28.0

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
@@ -126,7 +100,7 @@ $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: $component-focus-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
@@ -152,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/_options.scss

@@ -12,7 +12,7 @@ $enable-reduced-motion: true !default;
 $enable-smooth-scroll: true !default;
 $enable-grid-classes: true !default;
 $enable-container-classes: true !default;
-$enable-cssgrid: false !default;
+$enable-cssgrid: true !default;
 $enable-button-pointers: true !default;
 $enable-rfs: true !default;
 $enable-validation-icons: false !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/abstracts/variables/_toast.scss

@@ -0,0 +1,5 @@
+$toast-background-color: var(--#{$prefix}white) !default;
+$toast-header-color: var(--#{$prefix}body-color) !default;
+$toast-header-background-color: var(--#{$prefix}white) !default;
+$toast-border-color: var(--#{$prefix}border-color) !default;
+$toast-box-shadow: var(--#{$prefix}box-shadow-sm) !default;

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

@@ -54,4 +54,5 @@
 @import "label";
 @import "avatar";
 @import "backdrop";
+@import "toast";
 @import "tooltip";

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

@@ -1,58 +1,9 @@
 .form-switch {
-  --#{$prefix}input-switch-bg: var(--#{$prefix}gray-300);
-  --#{$prefix}input-switch-border-color: var(--#{$prefix}gray-500);
-  --#{$prefix}input-switch-dot: #{escape-svg($form-switch-bg-image)};
-  --#{$prefix}input-switch-hover-border-color: var(--#{$prefix}focus-ring-color);
-  --#{$prefix}input-switch-focus-outline-color: var(--#{$prefix}focus-ring-color);
-  --#{$prefix}input-switch-active-border-color: var(--#{$prefix}focus-ring-color);
-  --#{$prefix}input-switch-active-bg: var(--#{$prefix}focus-ring-color);
-  --#{$prefix}input-switch-disabled-border-color: var(--#{$prefix}gray-300);
-  --#{$prefix}input-switch-disabled-bg: var(--#{$prefix}gray-100);
-  --#{$prefix}input-switch-disabled-dot: #{escape-svg($form-switch-disabled-bg-image)};
-  --#{$prefix}input-switch-label-color: #{$form-switch-label-color};
-  --#{$prefix}input-switch-active-label-color: #{$form-switch-active-label-color};
-
-  .form-check-label {
-    color: var(--#{$prefix}input-switch-label-color);
-  }
-
-  .form-check-input:checked ~ .form-check-label {
-    color: var(--#{$prefix}input-switch-active-label-color);
-  }
-
-  .form-check-input {
-    background-color: var(--#{$prefix}input-switch-bg);
-    background-image: var(--#{$prefix}input-switch-dot);
-    border: 1px solid var(--#{$prefix}input-switch-border-color);
-
-    &:checked {
-      background-color: var(--#{$prefix}input-switch-active-bg);
-      border-color: var(--#{$prefix}input-switch-active-border-color);
-    }
-
-    &[disabled]:not(:checked),
-    &:disabled:not(:checked) {
-      background-color: var(--#{$prefix}input-switch-disabled-bg);
-      background-image: var(--#{$prefix}input-switch-disabled-dot);
-      border-color: var(--#{$prefix}input-switch-disabled-border-color);
-    }
-  }
-
-  &:hover {
-    &.form-switch {
-      .form-check-input:not([disabled]),
-      .form-check-input:not(:disabled) {
-        border-color: var(--#{$prefix}input-switch-hover-border-color);
-      }
-    }
+  .form-check-input.is-valid:not(:checked) {
+    --bs-form-switch-bg: #{escape-svg($form-switch-valid-bg-image)};
   }
 
-  &:focus-within {
-    &.form-switch {
-      .form-check-input {
-        outline: 2px solid var(--#{$prefix}input-switch-focus-outline-color);
-        outline-offset: 2px;
-      }
-    }
+  .form-check-input.is-invalid:not(:checked) {
+    --bs-form-switch-bg: #{escape-svg($form-switch-invalid-bg-image)};
   }
 }

package/src/style/base/_toast.scss

@@ -0,0 +1,56 @@
+.toast {
+  --#{$prefix}toast-header-gap: var(--#{$prefix}ref-spacer-2);
+  --#{$prefix}toast-color: var(--#{$prefix}gray-900);
+  --#{$prefix}toast-close-color: var(--#{$prefix}gray-900);
+  --#{$prefix}toast-header-color: var(--#{$prefix}gray-900);
+
+  .toast-title {
+    margin-right: auto;
+    margin-bottom: 0;
+  }
+
+  .toast-header {
+    gap: var(--#{$prefix}toast-header-gap);
+  }
+
+  .toast-body {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+  }
+
+  .toast-icon.d-icon {
+    --#{$prefix}icon-color: var(--#{$prefix}toast-icon-color);
+  }
+
+  @each $theme, $value in map-remove($theme-colors, "light", "dark") {
+    $color: color-contrast-var($value);
+    &.toast-#{$theme} {
+      --#{$prefix}toast-border-color: var(--#{$prefix}#{$theme});
+      --#{$prefix}toast-color: #{$color};
+      --#{$prefix}toast-close-color: #{$color};
+      --#{$prefix}toast-header-color: #{$color};
+      --#{$prefix}toast-bg: var(--#{$prefix}#{$theme});
+      --#{$prefix}toast-header-bg: var(--#{$prefix}#{$theme});
+
+      .d-close {
+        color: var(--#{$prefix}toast-close-color);
+      }
+    }
+  }
+
+  &.toast-soft {
+    --#{$prefix}toast-color: var(--#{$prefix}gray-900);
+    --#{$prefix}toast-close-color: var(--#{$prefix}gray-900);
+    --#{$prefix}toast-header-color: var(--#{$prefix}gray-900);
+
+    @each $theme, $value in map-remove($theme-colors, "light", "dark") {
+      &.toast-#{$theme} {
+        --#{$prefix}toast-icon-color: var(--#{$prefix}#{$theme}-500);
+        --#{$prefix}toast-border-color: var(--#{$prefix}#{$theme}-100);
+        --#{$prefix}toast-bg: var(--#{$prefix}#{$theme}-100);
+        --#{$prefix}toast-header-bg: var(--#{$prefix}#{$theme}-100);
+      }
+    }
+  }
+}

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

@@ -1,7 +1,6 @@
-@import "node_modules/react-toastify/scss/main";
-
 @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";
@@ -13,6 +12,7 @@
 @import "d-datepicker";
 @import "d-timepicker";
 @import "d-tabs";
+@import "d-close";
 @import "d-popover";
 @import "d-box-file";
 @import "d-carousel";
@@ -20,3 +20,4 @@
 @import "d-stepper-mobile";
 @import "d-card-account";
 @import "d-select";
+@import "d-table-head";

package/src/style/components/_d-button-icon.scss

@@ -0,0 +1,26 @@
+.d-button-icon {
+  --#{$prefix}btn-padding-x: var(--#{$prefix}ref-spacer-3);
+  --#{$prefix}btn-padding-y: var(--#{$prefix}ref-spacer-3);
+  --#{$prefix}btn-lg-padding-y: var(--#{$prefix}ref-spacer-4);
+  --#{$prefix}btn-lg-padding-x: var(--#{$prefix}ref-spacer-4);
+  --#{$prefix}btn-sm-padding-y: var(--#{$prefix}ref-spacer-2);
+  --#{$prefix}btn-sm-padding-x: var(--#{$prefix}ref-spacer-2);
+}
+
+.btn-lg {
+  @include button-size(
+    var(--#{$prefix}btn-lg-padding-y),
+    var(--#{$prefix}btn-lg-padding-x),
+    var(--#{$prefix}btn-lg-font-size),
+    var(--#{$prefix}btn-lg-border-radius),
+  );
+}
+
+.btn-sm {
+  @include button-size(
+    var(--#{$prefix}btn-sm-padding-y),
+    var(--#{$prefix}btn-sm-padding-x),
+    var(--#{$prefix}btn-sm-font-size),
+    var(--#{$prefix}btn-sm-border-radius),
+  );
+}

package/src/style/components/_d-close.scss

@@ -0,0 +1,11 @@
+.d-close {
+  display: flex;
+  align-self: center;
+  padding: 0;
+  background: transparent;
+  border: 0;
+
+  .d-icon {
+    --#{$prefix}icon-size: var(--#{$prefix}ref-spacer-4);
+  }
+}

package/src/style/components/_d-modal.scss

@@ -16,17 +16,6 @@
     }
   }
 
-  .d-modal-close {
-    align-self: flex-start;
-    padding: 0;
-    background: transparent;
-    border: 0;
-
-    .d-icon {
-      --#{$prefix}icon-size: var(--#{$prefix}ref-spacer-4);
-    }
-  }
-
   .d-modal-separator {
     height: var(--#{$prefix}modal-separator-height);
     margin: 0 var(--#{$prefix}modal-separator-margin-x);

package/src/style/components/_d-offcanvas.scss

@@ -23,17 +23,6 @@
     padding: var(--#{$prefix}offcanvas-padding-y) var(--#{$prefix}offcanvas-padding-x);
   }
 
-  .d-offcanvas-close {
-    align-self: flex-start;
-    padding: 0;
-    background: transparent;
-    border: 0;
-
-    .d-icon {
-      --#{$prefix}icon-size: var(--#{$prefix}ref-spacer-4);
-    }
-  }
-
   .d-offcanvas-action-fill > * {
     flex: 1;
   }

package/src/style/components/_d-quick-action-switch.scss

@@ -8,7 +8,6 @@
 
   --#{$prefix}quick-action-switch-label-font-size: #{$quick-action-switch-label-font-size};
   --#{$prefix}quick-action-switch-label-font-weight: #{$quick-action-switch-label-font-weight};
-  --#{$prefix}quick-action-switch-label-color: #{$quick-action-switch-label-color};
 
   --#{$prefix}quick-action-switch-hint-font-size: #{$quick-action-switch-hint-font-size};
   --#{$prefix}quick-action-switch-hint-font-weight: #{$quick-action-switch-hint-font-weight};
@@ -17,7 +16,6 @@
   --#{$prefix}quick-action-switch-hover-bg: #{$quick-action-switch-hover-bg};
 
   --#{$prefix}quick-action-switch-checked-bg: #{$quick-action-switch-checked-bg};
-  --#{$prefix}quick-action-switch-checked-label-color: #{$quick-action-switch-checked-label-color};
   --#{$prefix}quick-action-switch-checked-hint-color: #{$quick-action-switch-checked-hint-color};
 
   display: flex;
@@ -38,10 +36,6 @@
   &:has(input:checked) {
     background: var(--#{$prefix}quick-action-switch-checked-bg);
 
-    .d-quick-action-switch-label {
-      color: var(--#{$prefix}quick-action-switch-checked-label-color);
-    }
-
     .d-quick-action-switch-hint {
       color: var(--#{$prefix}quick-action-switch-checked-hint-color);
     }
@@ -56,7 +50,6 @@
   label {
     --#{$prefix}label-font-size: var(--#{$prefix}quick-action-switch-label-font-size);
     --#{$prefix}label-font-weight: var(--#{$prefix}quick-action-switch-label-font-weight);
-    --#{$prefix}label-color: var(--#{$prefix}quick-action-switch-label-color);
   }
 
   .d-quick-action-switch-hint {

package/src/style/components/_d-table-head.scss

@@ -0,0 +1,18 @@
+.d-table-head {
+  button {
+    display: inline-flex;
+    flex: 1;
+    align-items: center;
+    justify-content: space-between;
+    width: 100%;
+    padding: 0;
+    font-size: inherit;
+    font-weight: inherit;
+    background: transparent;
+    border: unset;
+
+    .d-icon {
+      --#{$prefix}icon-size: var(--#{$prefix}fs-small);
+    }
+  }
+}