@dynamic-framework/ui-react 1.25.0 → 1.27.0

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/_input-group.scss

@@ -76,7 +76,7 @@
     $tooltip-bg-color: map-get($data, "tooltip-bg-color");
     $box-shadow: map-get($data, "focus-box-shadow");
 
-    &:has(.form-control.is-#{$state}) {
+    &:has(.form-control.is-#{$state}, .form-select.is-#{$state}) {
       border-color: $border-color;
       box-shadow: $box-shadow;
 

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

@@ -5,6 +5,7 @@
 
   // select
   --#{$prefix}select-menu-shadow: #{$box-shadow-sm};
+  --#{$prefix}select-menu-z-index: #{$zindex-dropdown};
   --#{$prefix}select-option-focus-bg: var(--#{$prefix}gray-100);
   --#{$prefix}select-option-selected-color: var(--#{$prefix}secondary);
   --#{$prefix}select-option-selected-bg: var(--#{$prefix}gray-100);
@@ -101,6 +102,7 @@
   // select menu
   .d-select__menu-list {
     top: calc(var(--#{$prefix}input-border-width) * 2);
+    z-index: var(--#{$prefix}select-menu-z-index);
     margin: calc(var(--#{$prefix}input-border-width) * -1);
     background: $input-bg;
     border-radius: var(--#{$prefix}input-border-radius);

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);
+    }
+  }
+}

package/src/style/root/_root.scss

@@ -167,7 +167,11 @@
   // scss-docs-start root-focus-variables
   --#{$prefix}focus-ring-width: #{$focus-ring-width};
   --#{$prefix}focus-ring-opacity: #{$focus-ring-opacity};
-  --#{$prefix}focus-ring-color: rgba(var(--#{$prefix}#{$focus-ring-color-mapping}), var(--#{$prefix}focus-ring-opacity));
+  --#{$prefix}focus-ring-border-color-rgb: #{$focus-ring-border-color};
+  --#{$prefix}focus-ring-border-color: rgb(var(--#{$prefix}focus-ring-border-color-rgb));
+  --#{$prefix}focus-ring-base-color-rgb: var(--#{$prefix}#{$focus-ring-color-mapping});
+  --#{$prefix}focus-ring-base-color: rgb(var(--#{$prefix}focus-ring-base-color-rgb));
+  --#{$prefix}focus-ring-color: rgba(var(--#{$prefix}focus-ring-base-color-rgb), var(--#{$prefix}focus-ring-opacity));
   // scss-docs-end root-focus-variables
 
   // scss-docs-start root-form-validation-variables
@@ -207,7 +211,7 @@
   --#{$prefix}label-padding-x: var(--#{$prefix}ref-spacer-2);
   --#{$prefix}label-font-size: var(--#{$prefix}fs-small);
   --#{$prefix}label-font-weight: var(--#{$prefix}fw-normal);
-  --#{$prefix}label-color: var(--#{$prefix}gray);
+  --#{$prefix}label-color: var(--#{$prefix}gray-700);
 
   --#{$prefix}btn-border-radius: #{$btn-border-radius};
   --#{$prefix}btn-lg-border-radius: #{$btn-border-radius-lg};
@@ -217,66 +221,68 @@
     @if $color == "light" {
       @include df-button-variant-variables(
         "light",
-        $default-color: var(--#{$prefix}light),
+        $default-color: var(--#{$prefix}gray-100),
+        $default-text-color: color-contrast-var(map-get($all-colors, gray-100)),
         $hover-color: var(--#{$prefix}gray-200),
-        $focus-color: var(--#{$prefix}light),
-        $active-color: var(--#{$prefix}gray-300),
-        $default-text-color: color-contrast-var(map-get($all-colors, light)),
         $hover-text-color: color-contrast-var(map-get($all-colors, gray-200)),
+        $focus-color: var(--#{$prefix}gray-200),
         $focus-text-color: color-contrast-var(map-get($all-colors, gray-200)),
+        $active-color: var(--#{$prefix}gray-300),
         $active-text-color: color-contrast-var(map-get($all-colors, gray-300)),
-        $disabled-opacity: .65
+        $focus-shadow-rgb: var(--#{$prefix}gray-100-rgb),
       );
       @include df-button-outline-variant-variables(
         "light",
-        $default-color: var(--#{$prefix}light),
-        $hover-bg-color: var(--#{$prefix}light),
-        $hover-text-color: color-contrast-var(map-get($all-colors, light)),
-        $focus-text-color: var(--#{$prefix}light),
-        $active-text-color: color-contrast-var(map-get($all-colors, light)),
+        $default-color: var(--#{$prefix}gray-100),
+        $hover-bg-color: var(--#{$prefix}gray-200),
+        $hover-text-color: color-contrast-var(map-get($all-colors, gray-200)),
+        $focus-bg-color: var(--#{$prefix}gray-200),
+        $focus-text-color: color-contrast-var(map-get($all-colors, gray-200)),
         $active-bg-color: var(--#{$prefix}gray-300),
-        $active-border-color: var(--#{$prefix}gray-300)
+        $active-text-color: color-contrast-var(map-get($all-colors, gray-300)),
+        $focus-shadow-rgb: var(--#{$prefix}gray-100-rgb),
       );
       @include df-button-link-variant-variables(
         "light",
-        $default-color: var(--#{$prefix}light),
-        $hover-bg-color: var(--#{$prefix}light),
-        $hover-text-color: color-contrast-var(map-get($all-colors, light)),
-        $focus-text-color: var(--#{$prefix}light),
-        $active-text-color: color-contrast-var(map-get($all-colors, light)),
-        $active-bg-color: var(--#{$prefix}gray-300)
+        $default-color: var(--#{$prefix}gray-100),
+        $hover-text-color: var(--#{$prefix}gray-200),
+        $focus-text-color: var(--#{$prefix}gray-200),
+        $active-text-color: color-contrast-var(map-get($all-colors, gray-300)),
+        $active-bg-color: var(--#{$prefix}gray-300),
+        $focus-shadow-rgb: var(--#{$prefix}gray-100-rgb),
       );
     } @else if $color == "dark" {
       @include df-button-variant-variables(
         "dark",
-        $default-color: var(--#{$prefix}dark),
+        $default-color: var(--#{$prefix}gray-900),
+        $default-text-color: color-contrast-var(map-get($all-colors, gray-900)),
         $hover-color: var(--#{$prefix}gray-800),
-        $focus-color: var(--#{$prefix}dark),
-        $active-color: var(--#{$prefix}gray-700),
-        $default-text-color: color-contrast-var(map-get($all-colors, dark)),
         $hover-text-color: color-contrast-var(map-get($all-colors, gray-800)),
+        $focus-color: var(--#{$prefix}gray-800),
         $focus-text-color: color-contrast-var(map-get($all-colors, gray-800)),
+        $active-color: var(--#{$prefix}gray-700),
         $active-text-color: color-contrast-var(map-get($all-colors, gray-700)),
-        $disabled-opacity: .65
+        $focus-shadow-rgb: var(--#{$prefix}gray-900-rgb),
       );
       @include df-button-outline-variant-variables(
         "dark",
-        $default-color: var(--#{$prefix}dark),
-        $hover-bg-color: var(--#{$prefix}dark),
-        $hover-text-color: color-contrast-var(map-get($all-colors, dark)),
-        $focus-text-color: var(--#{$prefix}dark),
-        $active-text-color: color-contrast-var(map-get($all-colors, dark)),
+        $default-color: var(--#{$prefix}gray-900),
+        $hover-bg-color: var(--#{$prefix}gray-800),
+        $hover-text-color: color-contrast-var(map-get($all-colors, gray-800)),
+        $focus-bg-color: var(--#{$prefix}gray-800),
+        $focus-text-color: color-contrast-var(map-get($all-colors, gray-800)),
         $active-bg-color: var(--#{$prefix}gray-700),
-        $active-border-color: var(--#{$prefix}gray-700)
+        $active-text-color: color-contrast-var(map-get($all-colors, gray-700)),
+        $focus-shadow-rgb: var(--#{$prefix}gray-900-rgb),
       );
       @include df-button-link-variant-variables(
         "dark",
-        $default-color: var(--#{$prefix}dark),
-        $hover-bg-color: var(--#{$prefix}dark),
-        $hover-text-color: color-contrast-var(map-get($all-colors, dark)),
-        $focus-text-color: var(--#{$prefix}dark),
-        $active-text-color: color-contrast-var(map-get($all-colors, dark)),
-        $active-bg-color: var(--#{$prefix}gray-700)
+        $default-color: var(--#{$prefix}gray-900),
+        $hover-text-color: var(--#{$prefix}gray-800),
+        $focus-text-color: var(--#{$prefix}gray-800),
+        $active-text-color: color-contrast-var(map-get($all-colors, gray-700)),
+        $active-bg-color: var(--#{$prefix}gray-700),
+        $focus-shadow-rgb: var(--#{$prefix}gray-900-rgb),
       );
     } @else {
       @include df-button-variant-variables($color);