@dynamic-framework/ui-react 1.9.0 → 1.10.0

package/src/style/abstracts/_mixins.scss

@@ -2,27 +2,33 @@
 @mixin df-button-variant(
   $color-name,
   $default-color: var(--#{$prefix}#{$color-name}-500),
-  $hover-color: var(--#{$prefix}#{$color-name}-700),
-  $active-color: var(--#{$prefix}#{$color-name}-600),
+  $hover-color: var(--#{$prefix}#{$color-name}-600),
+  $focus-color: var(--#{$prefix}#{$color-name}-600),
+  $active-color: var(--#{$prefix}#{$color-name}-700),
   $disabled-color: var(--#{$prefix}#{$color-name}-100),
-  $text-color-100: color-contrast-var(map-get($theme-colors-palletes, #{$color-name}-100)),
-  $text-color-500: color-contrast-var(map-get($theme-colors-palletes, #{$color-name}-500)),
-  $text-color-700: color-contrast-var(map-get($theme-colors-palletes, #{$color-name}-600)),
-  $text-color-900: color-contrast-var(map-get($theme-colors-palletes, #{$color-name}-700)),
+  $default-text-color: color-contrast-var(map-get($theme-colors-palletes, #{$color-name}-500)),
+  $hover-text-color: color-contrast-var(map-get($theme-colors-palletes, #{$color-name}-600)),
+  $focus-text-color: color-contrast-var(map-get($theme-colors-palletes, #{$color-name}-600)),
+  $active-text-color: color-contrast-var(map-get($theme-colors-palletes, #{$color-name}-700)),
+  $disabled-text-color: color-contrast-var(map-get($theme-colors-palletes, #{$color-name}-100)),
 ) {
-  --#{$prefix}btn-color: #{$text-color-500};
+  --#{$prefix}btn-color: #{$default-text-color};
   --#{$prefix}btn-bg: #{$default-color};
   --#{$prefix}btn-border-color: #{$default-color};
 
-  --#{$prefix}btn-hover-color: #{$text-color-900};
+  --#{$prefix}btn-hover-color: #{$hover-text-color};
   --#{$prefix}btn-hover-bg: #{$hover-color};
   --#{$prefix}btn-hover-border-color: #{$hover-color};
 
-  --#{$prefix}btn-active-color: #{$text-color-700};
+  --#{$prefix}btn-focus-color: #{$focus-text-color};
+  --#{$prefix}btn-focus-bg: #{$focus-color};
+  --#{$prefix}btn-focus-border-color: #{$focus-color};
+
+  --#{$prefix}btn-active-color: #{$active-text-color};
   --#{$prefix}btn-active-bg: #{$active-color};
   --#{$prefix}btn-active-border-color: #{$active-color};
 
-  --#{$prefix}btn-disabled-color: #{$text-color-100};
+  --#{$prefix}btn-disabled-color: #{$disabled-text-color};
   --#{$prefix}btn-disabled-bg: #{$disabled-color};
   --#{$prefix}btn-disabled-border-color: #{$disabled-color};
 
@@ -30,41 +36,49 @@
     --#{$prefix}btn-disabled-opacity: 1;
     --#{$prefix}btn-disabled-bg: #{$active-color};
     --#{$prefix}btn-disabled-border-color: #{$active-color};
-    --#{$prefix}btn-disabled-color: #{$text-color-700};
+    --#{$prefix}btn-disabled-color: #{$hover-text-color};
   }
 }
 // scss-docs-end df-btn-variant-mixin
 
 
 // scss-docs-start df-btn-outline-variant-mixin
-@mixin df-button-outline-variant($color-name) {
+@mixin df-button-outline-variant(
+  $color-name,
+  $default-color: var(--#{$prefix}#{$color-name}-600),
+  $hover-bg-color: var(--#{$prefix}#{$color-name}-100),
+  $focus-bg-color: var(--#{$prefix}#{$color-name}-100),
+  $active-bg-color: var(--#{$prefix}#{$color-name}-200),
+  $disabled-color: var(--#{$prefix}#{$color-name}-100),
+  $disabled-text-color: color-contrast-var(map-get($theme-colors-palletes, #{$color-name}-100)),
+) {
   --#{$prefix}btn-bg: transparent;
-  --#{$prefix}btn-border-color: var(--#{$prefix}#{$color-name}-500);
-  --#{$prefix}btn-color: var(--#{$prefix}#{$color-name}-500);
+  --#{$prefix}btn-border-color: #{$default-color};
+  --#{$prefix}btn-color: #{$default-color};
 
-  --#{$prefix}btn-hover-bg: var(--#{$prefix}#{$color-name}-100);
-  --#{$prefix}btn-hover-border-color: var(--#{$prefix}#{$color-name}-600);
-  --#{$prefix}btn-hover-color: var(--#{$prefix}#{$color-name}-600);
+  --#{$prefix}btn-hover-bg: #{$hover-bg-color};
+  --#{$prefix}btn-hover-border-color: #{$default-color};
+  --#{$prefix}btn-hover-color: #{$default-color};
 
-  --#{$prefix}btn-focus-bg: var(--#{$prefix}#{$color-name}-100);
-  --#{$prefix}btn-focus-border-color: var(--#{$prefix}#{$color-name});
-  --#{$prefix}btn-focus-color: var(--#{$prefix}#{$color-name});
+  --#{$prefix}btn-focus-bg: #{$focus-bg-color};
+  --#{$prefix}btn-focus-border-color: #{$default-color};
+  --#{$prefix}btn-focus-color: #{$default-color};
 
-  --#{$prefix}btn-active-bg: var(--#{$prefix}#{$color-name}-300);
-  --#{$prefix}btn-active-border-color: var(--#{$prefix}#{$color-name}-600);
-  --#{$prefix}btn-active-color: var(--#{$prefix}#{$color-name}-600);
+  --#{$prefix}btn-active-bg: #{$active-bg-color};
+  --#{$prefix}btn-active-border-color: #{$default-color};
+  --#{$prefix}btn-active-color: #{$default-color};
 
   --#{$prefix}btn-disabled-bg: transparent;
-  --#{$prefix}btn-disabled-border-color: var(--#{$prefix}#{$color-name}-100);
-  --#{$prefix}btn-disabled-color: var(--#{$prefix}#{$color-name}-100);
+  --#{$prefix}btn-disabled-border-color: #{$disabled-color};
+  --#{$prefix}btn-disabled-color: #{$disabled-text-color};
 
   --#{$prefix}gradient: none;
 
   &.loading {
     --#{$prefix}btn-disabled-opacity: 1;
     --#{$prefix}btn-disabled-bg: transparent;
-    --#{$prefix}btn-disabled-border-color: var(--#{$prefix}#{$color-name}-600);
-    --#{$prefix}btn-disabled-color: var(--#{$prefix}#{$color-name}-600);
+    --#{$prefix}btn-disabled-border-color: #{$default-color};
+    --#{$prefix}btn-disabled-color: #{$default-color};
   }
 }
 // scss-docs-end df-btn-outline-variant-mixin
@@ -72,33 +86,30 @@
 // scss-docs-start df-btn-link-variant-mixin
 @mixin df-button-link-variant(
   $color-name,
-  $text-color-100: var(--#{$prefix}#{$color-name}-100),
-  $text-color-500: var(--#{$prefix}#{$color-name}-500),
-  $text-color-700: var(--#{$prefix}#{$color-name}-600),
-  $text-color-900: var(--#{$prefix}#{$color-name}-700),
+  $default-color: var(--#{$prefix}#{$color-name}-600),
+  $hover-bg-color: var(--#{$prefix}#{$color-name}-100),
+  $active-bg-color: var(--#{$prefix}#{$color-name}-200),
+  $disable-color: var(--#{$prefix}#{$color-name}-300),
 ) {
-  --#{$prefix}btn-padding-x: var(--#{$prefix}btn-link-padding-x);
-  --#{$prefix}btn-padding-y: var(--#{$prefix}btn-link-padding-y);
-
   --#{$prefix}btn-bg: transparent;
   --#{$prefix}btn-border-color: transparent;
-  --#{$prefix}btn-color: #{$text-color-500};
+  --#{$prefix}btn-color: #{$default-color};
 
-  --#{$prefix}btn-hover-bg: transparent;
+  --#{$prefix}btn-hover-bg: #{$hover-bg-color};
   --#{$prefix}btn-hover-border-color: transparent;
-  --#{$prefix}btn-hover-color: #{$text-color-900};
+  --#{$prefix}btn-hover-color: #{$default-color};
 
   --#{$prefix}btn-focus-bg: transparent;
   --#{$prefix}btn-focus-border-color: transparent;
-  --#{$prefix}btn-focus-color: #{$text-color-500};
+  --#{$prefix}btn-focus-color: #{$default-color};
 
-  --#{$prefix}btn-active-bg: transparent;
+  --#{$prefix}btn-active-bg: #{$active-bg-color};
   --#{$prefix}btn-active-border-color: transparent;
-  --#{$prefix}btn-active-color: #{$text-color-700};
+  --#{$prefix}btn-active-color: #{$default-color};
 
   --#{$prefix}btn-disabled-bg: transparent;
   --#{$prefix}btn-disabled-border-color: transparent;
-  --#{$prefix}btn-disabled-color: #{$text-color-100};
+  --#{$prefix}btn-disabled-color: #{$disable-color};
 
   --#{$prefix}btn-focus-outline-offset: 0;
 
@@ -106,7 +117,7 @@
     --#{$prefix}btn-disabled-opacity: 1;
     --#{$prefix}btn-disabled-bg: transparent;
     --#{$prefix}btn-disabled-border-color: transparent;
-    --#{$prefix}btn-disabled-color: var(--#{$prefix}#{$color-name}-600);
+    --#{$prefix}btn-disabled-color: #{$default-color};
   }
 }
 // scss-docs-end df-btn-link-variant-mixin

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

@@ -17,6 +17,7 @@ $alert-dismissible-padding-r: $alert-padding-x * 3 !default; // 3x covers width
 // custom
 $alert-gap: $spacer-3 !default;
 $alert-box-shadow: var(--#{$prefix}box-shadow-sm) !default;
+$alert-close-icon-size: .75rem !default;
 // end custom
 // scss-docs-end alert-variables
 

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

@@ -4,18 +4,18 @@
 
 // scss-docs-start btn-variables
 $btn-color: var(--#{$prefix}body-color) !default;
-$btn-padding-y: $small-font-size !default;
-$btn-padding-x: $spacer-4 !default;
+$btn-padding-y: $spacer-2 !default;
+$btn-padding-x: $spacer-3 !default;
 $btn-font-family: $input-btn-font-family !default;
 $btn-font-size: $input-btn-font-size !default;
-$btn-line-height: 1rem !default;
+$btn-line-height: $line-height-base * 1rem !default;
 $btn-white-space: null !default; // Set to `nowrap` to prevent text wrapping
 
-$btn-padding-y-sm: .625rem !default;
-$btn-padding-x-sm: $spacer-4 !default;
+$btn-padding-y-sm: $spacer-1 !default;
+$btn-padding-x-sm: $spacer-3 !default;
 $btn-font-size-sm: $small-font-size !default;
 
-$btn-padding-y-lg: 1.125rem !default;
+$btn-padding-y-lg: .875rem !default;
 $btn-padding-x-lg: $spacer-4 !default;
 $btn-font-size-lg: $h6-font-size !default;
 
@@ -25,19 +25,13 @@ $btn-font-weight: $font-weight-normal !default;
 $btn-box-shadow: none !default;
 $btn-focus-width: 0 !default;
 $btn-focus-box-shadow: none !default;
-$btn-disabled-opacity: .5 !default;
+$btn-disabled-opacity: 1 !default;
 $btn-active-box-shadow: none !default;
 
 $btn-link-color: var(--#{$prefix}link-color) !default;
 $btn-link-hover-color: var(--#{$prefix}link-hover-color) !default;
 $btn-link-disabled-color: $gray-600 !default;
 
-// custom
-$btn-link-padding-y: $spacer-2 !default;
-$btn-link-padding-x: $spacer-2 !default;
-$btn-link-font-size-sm: $small-font-size !default;
-// end custom
-
 $btn-border-radius: $border-radius-sm !default;
 $btn-border-radius-sm: $border-radius-sm !default;
 $btn-border-radius-lg: $border-radius-lg !default;

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

@@ -80,7 +80,7 @@ $bg-soft-colors: (
 $min-contrast-ratio: 4.5 !default;
 
 // Customize the light and dark text colors for use in our color contrast function.
-$color-contrast-dark: $gray-900 !default;
+$color-contrast-dark: $gray-700 !default;
 $color-contrast-light: $white !default;
 
 // fusv-disable

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

@@ -37,7 +37,7 @@
 @import "d-quick-action-check";
 @import "d-quick-action-switch";
 @import "d-progress";
-@import "d-alert";
+@import "d-toast";
 @import "d-badge";
 @import "d-chip";
 @import "d-modal";

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

@@ -14,10 +14,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-link-padding-y: #{$btn-link-padding-y};
-  --#{$prefix}btn-link-padding-x: #{$btn-link-padding-x};
-  @include rfs($btn-link-font-size-sm, --#{$prefix}btn-link-font-size-sm);
+  --#{$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};
@@ -29,7 +26,6 @@
   --#{$prefix}btn-sm-font-size: #{$btn-font-size-sm};
   --#{$prefix}btn-sm-border-radius: var(--#{$prefix}btn-component-sm-border-radius, #{$btn-border-radius-sm});
 
-
   display: flex;
   flex-direction: row;
   gap: var(--#{$prefix}btn-gap, $spacer-2);
@@ -42,7 +38,7 @@
   line-height: var(--#{$prefix}btn-line-height);
   color: var(--#{$prefix}btn-color);
   text-align: center;
-  text-decoration: if($link-decoration == none, null, none);
+  text-decoration: none;
   white-space: $btn-white-space;
   vertical-align: middle;
   cursor: if($enable-button-pointers, pointer, null);
@@ -53,11 +49,14 @@
   @include box-shadow(var(--#{$prefix}btn-box-shadow));
   @include transition($btn-transition);
 
+  > span {
+    text-decoration: var(--#{$prefix}btn-text-decoration);
+  }
+
   // hover selectors
   &:hover,
   &.hover {
     color: var(--#{$prefix}btn-hover-color);
-    text-decoration: if($link-hover-decoration == underline, none, null);
     background-color: var(--#{$prefix}btn-hover-bg);
     border-color: var(--#{$prefix}btn-hover-border-color);
   }
@@ -74,9 +73,9 @@
   &:focus-visible,
   &.focus-visible {
     // copy of .btn:focus bootstrap + focus var
-    color: var(var(--#{$prefix}btn-focus-color), var(--#{$prefix}btn-hover-color));
-    @include gradient-bg(var(var(--#{$prefix}btn-focus-bg), var(--#{$prefix}btn-hover-bg)));
-    border-color: var(var(--#{$prefix}btn-focus-border-color), var(--#{$prefix}btn-hover-border-color));
+    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: var(--#{$prefix}btn-focus-border-width, var(--#{$prefix}btn-border-width)) solid var(--#{$prefix}btn-focus-outline-color, var(--#{$prefix}focus-ring-color));
@@ -130,29 +129,9 @@
   .btn-outline-#{$color} {
     @include df-button-outline-variant($color);
   }
-}
 
-@each $color, $value in $theme-colors {
   .btn-link-#{$color} {
-    @if $color == "light" {
-      @include df-button-link-variant(
-        $color,
-        $text-color-100: var(--#{$prefix}light),
-        $text-color-500: var(--#{$prefix}light),
-        $text-color-700: var(--#{$prefix}light),
-        $text-color-900: var(--#{$prefix}light),
-      );
-    } @else if $color == "dark" {
-      @include df-button-link-variant(
-        $color,
-        $text-color-100: var(--#{$prefix}dark),
-        $text-color-500: var(--#{$prefix}dark),
-        $text-color-700: var(--#{$prefix}dark),
-        $text-color-900: var(--#{$prefix}dark),
-      );
-    } @else {
-      @include df-button-link-variant($color);
-    }
+    @include df-button-link-variant($color);
   }
 }
 
@@ -174,16 +153,8 @@
   );
 }
 
-[class^="btn-link"] {
-  text-decoration: var(--#{$prefix}link-decoration);
-
-  > span {
-    text-decoration: var(--#{$prefix}link-decoration);
-  }
-
-  &.btn-sm {
-    @include font-size(var(--#{$prefix}btn-link-font-size-sm));
-  }
+[class*="btn-link-"] {
+  --#{$prefix}btn-text-decoration: var(--#{$prefix}link-decoration);
 
   @if $enable-gradients {
     background-image: none;

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

@@ -9,7 +9,7 @@
   --#{$prefix}chip-font-weight: #{$chip-font-weight};
   --#{$prefix}chip-line-height: #{$chip-line-height};
 
-  display: flex;
+  display: inline-flex;
   flex-direction: row;
   gap: var(--#{$prefix}chip-gap);
   align-items: center;

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

@@ -27,6 +27,7 @@
   --#{$prefix}datepicker-month-gap: var(--#{$prefix}ref-fs-small);
   --#{$prefix}datepicker-month-padding: var(--#{$prefix}ref-spacer-3) var(--#{$prefix}ref-spacer-4) var(--#{$prefix}ref-spacer-4);
   --#{$prefix}datepicker-month-margin: 0;
+  --#{$prefix}datepicker-month-color: var(--#{$prefix}white);
 
   --#{$prefix}datepicker-week-gap: 1.875rem;
 
@@ -93,6 +94,14 @@
     }
   }
 
+  &.d-month-picker {
+    .react-datepicker__month-container {
+      .d-icon {
+        --#{$prefix}icon-component-color: var(--#{$prefix}datepicker-month-color);
+      }
+    }
+  }
+
   .react-datepicker__month {
     display: flex;
     flex-direction: column;

package/src/style/components/{_d-alert.scss → _d-toast.scss}

@@ -3,6 +3,7 @@
   --#{$prefix}alert-box-shadow: #{$alert-box-shadow};
   --#{$prefix}alert-icon-color: var(--#{$prefix}alert-component-icon-color, var(--#{$prefix}alert-color));
   --#{$prefix}alert-separator-opacity: var(--#{$prefix}alert-component-separator-opacity);
+  --#{$prefix}alert-close-icon-size: #{$alert-close-icon-size};
 
   display: flex;
   flex-direction: row;
@@ -25,12 +26,13 @@
     --#{$prefix}btn-close-bg: transparent;
   }
 
-  .alert-icon .d-icon {
+  .alert-icon.d-icon {
     --#{$prefix}icon-color: var(--#{$prefix}alert-icon-color);
   }
 
   .alert-close-icon {
     --#{$prefix}icon-color: var(--#{$prefix}alert-icon-color);
+    --#{$prefix}icon-size: var(--#{$prefix}alert-close-icon-size);
   }
 
   @each $theme, $value in $theme-colors {
@@ -42,4 +44,22 @@
       --#{$prefix}alert-link-color: #{$color};
     }
   }
+
+  &.alert-box {
+    --#{$prefix}alert-color: var(--#{$prefix}gray-900);
+
+    border-width: 0 0 0 5px;
+
+    @each $theme, $value in $alert-boxes {
+      $background: nth($value, 1);
+      $color: nth($value, 2);
+
+      &.alert-box-#{$theme} {
+        --#{$prefix}alert-icon-color: #{$color};
+        --#{$prefix}alert-border-color: #{$color};
+
+        --#{$prefix}alert-bg: #{$background};
+      }
+    }
+  }
 }

package/dist/types/components/DAlert/index.d.ts

@@ -1,2 +0,0 @@
-import DAlert from './DAlert';
-export default DAlert;