@dynamic-framework/ui-react 2.5.2 → 2.7.0

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

@@ -42,15 +42,33 @@
     height: $carousel-control-height;
     background: var(--#{$prefix}primary);
     padding: var(--#{$prefix}ref-spacer-1);
-    svg {
+
+    // Only invert the default arrow icon (a bare <svg> as a direct child).
+    // Custom icons rendered via `iconArrowLeft`/`iconArrowRight` use DIcon
+    // (wrapped in a .d-icon span) and are reset below, so they are untouched here.
+    > svg {
       filter: invert(1);
     }
+
+    // Splide's default theme applies `fill` and, for the prev arrow, a
+    // `scaleX(-1)` flip to every descendant <svg>, assuming a single arrow
+    // path reused for both directions. `iconArrowLeft`/`iconArrowRight` are
+    // typed as DIcon props, so the only <svg> rendered here is a Lucide icon,
+    // which is always stroke-based with `fill="none"` (see lucide-react
+    // defaultAttributes). Resetting to `fill: none` restores that intended
+    // stroke-only look and lets DIcon's own `color` (applied via `currentColor`
+    // on stroke) keep controlling the icon color; `transform: none` cancels
+    // the flip so the icon keeps its intended orientation.
+    .d-icon svg {
+      fill: none;
+      transform: none;
+    }
   }
 
   .d-carousel-pagination {
     bottom: var(--#{$prefix}carousel-pagination-bottom);
     position: relative;
-    margin-top: var(--#{$prefix}--#{$prefix}ref-spacer-4);
+    margin-top: var(--#{$prefix}ref-spacer-4);
     width: fit-content;
     padding: var(--#{$prefix}ref-spacer-2) var(--#{$prefix}ref-spacer-4);
     border-radius: var(--#{$prefix}border-radius-lg);

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

@@ -52,3 +52,11 @@
     display: block;
   }
 }
+
+.confirm-modal {
+  --#{$prefix}modal-zindex: #{$zindex-modal + 10};
+  --#{$prefix}shadow-confirm-modal: var(--#{$prefix}box-shadow-sm), 0 0 100px 30px rgba(0, 0, 0, .3);
+  .modal-content {
+    --#{$prefix}modal-box-shadow: var(--#{$prefix}shadow-confirm-modal);
+  }
+}

package/src/style/root/_root.scss

@@ -295,6 +295,37 @@
           $focus-shadow-rgb: var(--#{$prefix}gray-900-rgb),
         );
 
+      } @else if $color == "warning" {
+        @include df-button-variant-variables($color);
+        @include df-button-outline-variant-variables($color);
+        @include df-button-link-variant-variables($color);
+
+        // Manual soft warning variant: keep default soft backgrounds,
+        // but force the text one tone darker for better contrast.
+        --#{$prefix}btn-soft-warning-color: var(--#{$prefix}warning-800);
+        --#{$prefix}btn-soft-warning-bg: var(--#{$prefix}warning-50);
+        --#{$prefix}btn-soft-warning-border-color: transparent;
+        --#{$prefix}btn-soft-warning-box-shadow: #{$btn-box-shadow};
+
+        --#{$prefix}btn-soft-warning-hover-color: var(--#{$prefix}warning-800);
+        --#{$prefix}btn-soft-warning-hover-bg: var(--#{$prefix}warning-100);
+        --#{$prefix}btn-soft-warning-hover-border-color: transparent;
+
+        --#{$prefix}btn-soft-warning-focus-color: var(--#{$prefix}warning-800);
+        --#{$prefix}btn-soft-warning-focus-bg: var(--#{$prefix}warning-100);
+        --#{$prefix}btn-soft-warning-focus-border-color: transparent;
+        --#{$prefix}btn-soft-warning-focus-shadow-rgb: var(--#{$prefix}warning-500-rgb);
+
+        --#{$prefix}btn-soft-warning-active-color: var(--#{$prefix}warning-800);
+        --#{$prefix}btn-soft-warning-active-bg: var(--#{$prefix}warning-200);
+        --#{$prefix}btn-soft-warning-active-border-color: transparent;
+        --#{$prefix}btn-soft-warning-active-box-shadow: #{$btn-active-box-shadow};
+
+        --#{$prefix}btn-soft-warning-disabled-color: var(--#{$prefix}warning-800);
+        --#{$prefix}btn-soft-warning-disabled-bg: var(--#{$prefix}warning-50);
+        --#{$prefix}btn-soft-warning-disabled-border-color: transparent;
+        --#{$prefix}btn-soft-warning-disabled-opacity: #{$btn-disabled-opacity};
+
       } @else if $color == "secondary" {
         @include df-button-variant-variables(
           "secondary",