@dynamic-framework/ui-react 2.1.1 → 2.3.0

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

@@ -6,9 +6,9 @@
   // select
   --#{$prefix}select-menu-shadow: #{$box-shadow-sm};
   --#{$prefix}select-menu-z-index: #{$zindex-dropdown};
+  --#{$prefix}select-option-selected-bg: var(--#{$prefix}gray-50);
   --#{$prefix}select-option-focus-bg: var(--#{$prefix}gray-100);
   --#{$prefix}select-option-selected-color: var(--#{$prefix}secondary);
-  --#{$prefix}select-option-selected-bg: unset;
   --#{$prefix}select-option-selected-font-weight: var(--#{$prefix}fw-bold);
   --#{$prefix}select-option-is-checkbox-font-size: var(--#{$prefix}body-font-size);
   --#{$prefix}select-option-is-checkbox-font-weight: var(--#{$prefix}fw-normal);
@@ -29,6 +29,18 @@
   --#{$prefix}select-indicator-width: var(--#{$prefix}ref-spacer-5);
   --#{$prefix}select-indicator-height: var(--#{$prefix}ref-spacer-5);
 
+  // checkbox tokens
+  --#{$prefix}select-check-width: 1rem; // 16px
+  --#{$prefix}select-check-height: 1rem; // 16px
+  --#{$prefix}select-check-margin-end: .5rem; // 8px
+  --#{$prefix}select-check-border-width: .0625rem; // 1px
+  --#{$prefix}select-check-border-radius: .125rem; // 2px
+  --#{$prefix}select-check-mark-top: .0625rem; // 1px
+  --#{$prefix}select-check-mark-left: .25rem; // 4px
+  --#{$prefix}select-check-mark-width: .375rem; // 6px
+  --#{$prefix}select-check-mark-height: .625rem; // 10px
+  --#{$prefix}select-check-mark-border-width: .125rem; // 2px
+
   // focus
   &:focus-within {
     .input-group {
@@ -148,6 +160,7 @@
     padding: $input-padding-y $input-padding-x;
   }
 
+  .d-select__option--is-selected.d-select__option--is-focused,
   .d-select__option--is-focused {
     background: var(--#{$prefix}select-option-focus-bg);
   }
@@ -156,30 +169,6 @@
     font-weight: var(--#{$prefix}select-option-selected-font-weight);
     color: var(--#{$prefix}select-option-selected-color);
     background: var(--#{$prefix}select-option-selected-bg);
-
-    &:hover {
-      --#{$prefix}select-option-selected-bg: var(--#{$prefix}gray-100);
-    }
-  }
-
-  // select option with checkbox
-  .d-select__option--is-checkbox {
-    padding: 0;
-
-    > label {
-      width: 100%;
-      padding: $input-padding-x;
-    }
-
-    .form-check-input {
-      margin-right: $input-padding-x;
-    }
-  }
-
-  .d-select__option--is-checkbox label {
-    font-size: var(--#{$prefix}select-option-is-checkbox-font-size);
-    font-weight: var(--#{$prefix}select-option-is-checkbox-font-weight);
-    color: var(--#{$prefix}select-option-is-checkbox-color);
   }
 
   // select multi control
@@ -258,4 +247,49 @@
   &.disabled .d-icon {
     --#{$prefix}icon-color: var(--#{$prefix}input-disabled-color);
   }
+
+  .d-select__check {
+    position: relative;
+    display: inline-block;
+
+    flex-shrink: 0;
+    width: var(--#{$prefix}select-check-width);
+    height: var(--#{$prefix}select-check-height);
+    margin-right: var(--#{$prefix}select-check-margin-end);
+    background: $input-bg;
+
+    border: var(--#{$prefix}select-check-border-width) solid var(--#{$prefix}input-border-color);
+    border-radius: var(--#{$prefix}select-check-border-radius);
+  }
+
+  /* checkmark */
+  .d-select__check::after {
+    position: absolute;
+
+    top: var(--#{$prefix}select-check-mark-top);
+    left: var(--#{$prefix}select-check-mark-left);
+
+    width: var(--#{$prefix}select-check-mark-width);
+    height: var(--#{$prefix}select-check-mark-height);
+    content: "";
+
+    border-right: var(--#{$prefix}select-check-mark-border-width) solid var(--bs-white);
+    border-bottom: var(--#{$prefix}select-check-mark-border-width) solid var(--bs-white);
+
+    opacity: 0;
+
+    transform: rotate(45deg) scale(0);
+    transform-origin: center;
+  }
+
+  /* selected state */
+  .d-select__check--selected {
+    background: var(--#{$prefix}primary-500);
+    border-color: var(--#{$prefix}primary-500);
+  }
+
+  .d-select__check--selected::after {
+    opacity: 1;
+    transform: rotate(45deg) scale(1);
+  }
 }

package/src/style/components/_d-stepper-desktop.scss

@@ -1,6 +1,6 @@
 .d-stepper-desktop {
   /* Icon container */
-  --#{$prefix}step-icon-container-color: var(--#{$prefix}gray-400);
+  --#{$prefix}step-icon-container-color: var(--#{$prefix}gray-500);
   --#{$prefix}step-icon-container-background-color: transparent;
   --#{$prefix}step-icon-container-size: var(--#{$prefix}ref-spacer-9);
   --#{$prefix}step-icon-container-font-size: var(--#{$prefix}ref-spacer-4);
@@ -113,7 +113,7 @@
 
       .d-step-description {
         font-size: var(--#{$prefix}step-description-font-size);
-        color: var(--#{$prefix}gray-400);
+        color: var(--#{$prefix}gray-500);
       }
     }
   }

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

@@ -1,36 +1,25 @@
-.tab-content {
-  margin-bottom: var(--#{$prefix}ref-spacer-4);
-}
-
-.nav-pills {
-  --#{$prefix}nav-pills-link-active-bg: var(--#{$prefix}gray-50);
-  --#{$prefix}nav-pills-link-active-color: var(--#{$prefix}primary-500);
-}
-
-.nav-tabs {
-  --#{$prefix}nav-tabs-border-color: var(--#{$prefix}gray-100);
-  --#{$prefix}nav-tabs-link-active-border-color: var(--#{$prefix}nav-tabs-border-color);
-}
-
 .nav-toggle-button-group {
+  --#{$prefix}toggle-button-group-border-color: var(--#{$prefix}gray-50);
   --#{$prefix}toggle-button-group-border-radius: 4rem;
   --#{$prefix}toggle-button-group-link-active-color: var(--#{$prefix}white);
   --#{$prefix}toggle-button-group-link-active-bg: var(--#{$prefix}primary);
-  --#{$prefix}toggle-button-group-link-hover-bg: var(--#{$prefix}secondary-500);
+  --#{$prefix}toggle-button-group-link-font-weight: var(--#{$prefix}fw-normal);
   --#{$prefix}toggle-button-group-bg: var(--#{$prefix}gray-25);
   --#{$prefix}toggle-button-group-radius: 4rem;
   --#{$prefix}toggle-button-group-padding: .25rem;
+
   padding: var(--#{$prefix}toggle-button-group-padding);
   overflow: hidden;
   background: var(--#{$prefix}toggle-button-group-bg);
-  border: 1px solid var(--#{$prefix}gray-50);
+  border: 1px solid var(--#{$prefix}toggle-button-group-border-color);
   border-radius: var(--#{$prefix}toggle-button-group-radius);
+
   .nav-link {
-    flex: 1;
     border-radius: var(--#{$prefix}toggle-button-group-border-radius);
   }
+
   .nav-link.active {
-    font-weight: var(--#{$prefix}fw-semibold);
+    font-weight: var(--#{$prefix}toggle-button-group-link-font-weight);
     color: var(--#{$prefix}toggle-button-group-link-active-color);
     background: var(--#{$prefix}toggle-button-group-link-active-bg);
   }

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

@@ -4,7 +4,8 @@
   --#{$prefix}timeline-icon-size: 1rem;
   --#{$prefix}timeline-icon-padding: .25rem;
   --#{$prefix}timeline-icon-color: var(--#{$prefix}gray-600);
-  --#{$prefix}timeline-description-color: var(--#{$prefix}gray-400);
+  --#{$prefix}timeline-description-color: var(--#{$prefix}gray-500);
+  --#{$prefix}timeline-description-time-color: var(--#{$prefix}gray-500);
   --#{$prefix}timeline-icon-bg: var(--#{$prefix}white);
   position: relative;
 
@@ -64,8 +65,8 @@
     }
 
     .d-timeline-item-time {
-      font-size: .875rem;
-      color: #999;
+      font-size: var(--#{$prefix}fs-small);
+      color: var(--#{$prefix}timeline-description-time-color);
     }
 
     &.d-timeline-item-success {
@@ -82,8 +83,8 @@
     }
     &.d-timeline-item-warning {
       .d-timeline-item-icon {
-        color: var(--#{$prefix}white);
-        background-color: var(--#{$prefix}warning-500);
+        color: var(--#{$prefix}warning-800);
+        background-color: var(--#{$prefix}warning-300);
       }
     }
     &.d-timeline-item-primary {

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

@@ -1,7 +1,7 @@
 .d-voucher {
   --#{$prefix}voucher-header-gap: var(--#{$prefix}ref-spacer-4);
   --#{$prefix}voucher-amount-padding: var(--#{$prefix}ref-spacer-4);
-  --#{$prefix}voucher-amount-background: var(--#{$prefix}secondary-50);
+  --#{$prefix}voucher-amount-background: var(--#{$prefix}gray-25);
   --#{$prefix}voucher-amount-rounded: var(--#{$prefix}ref-spacer-4);
   --#{$prefix}voucher-footer-gap: var(--#{$prefix}ref-spacer-4);
   --#{$prefix}voucher-margin: 0 0 var(--#{$prefix}ref-spacer-4) 0;
@@ -18,6 +18,7 @@
 
 .d-voucher-amount {
   padding: var(--#{$prefix}voucher-amount-padding);
+  text-align: center;
   background: var(--#{$prefix}voucher-amount-background);
   border-radius: var(--#{$prefix}voucher-amount-rounded);
 }

package/src/style/dynamic-ui.scss

@@ -14,4 +14,6 @@
 
 @import "abstracts/utilities-hover";
 
+@import "abstracts/utilities-dark";
+
 @import "shame";

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

@@ -15,3 +15,4 @@
 
 @import "overlay";
 @import "text-truncate";
+@import "animations";

package/src/style/helpers/_animations.scss

@@ -0,0 +1,13 @@
+// ============================================================
+// Animations
+// Utility classes for common CSS animations.
+// ============================================================
+
+@keyframes fadein {
+  0% { opacity: 0; }
+  100% { opacity: 1; }
+}
+
+.fade-in {
+  animation: fadein .3s ease-in-out;
+}

package/src/style/helpers/_color-bg.scss

@@ -11,9 +11,7 @@
       background-color: RGBA(var(--#{$prefix}#{$color}-rgb), var(--#{$prefix}bg-opacity, 1)) if($enable-important-utilities, !important, null);
     }
   }
-  .hover-bg-#{$color}:hover {
-    background-color: var(--#{$prefix}#{$color}) if($enable-important-utilities, !important, null);
-  }
+
 }
 
 @each $color, $value in $theme-colors {

package/src/style/root/_root.scss

@@ -165,10 +165,14 @@
   // scss-docs-start root-focus-variables
   --#{$prefix}focus-ring-width: #{$focus-ring-width};
   --#{$prefix}focus-ring-opacity: #{$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));
+  @if $focus-ring-border-color == transparent {
+    --#{$prefix}focus-ring-border-color: #{$focus-ring-border-color}; // custom
+  } @else {
+    --#{$prefix}focus-ring-border-color-rgb: #{to-rgb($focus-ring-border-color)}; // custom
+    --#{$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}); // custom
+  --#{$prefix}focus-ring-base-color: rgb(var(--#{$prefix}focus-ring-base-color-rgb)); // custom
   --#{$prefix}focus-ring-color: rgba(var(--#{$prefix}focus-ring-base-color-rgb), var(--#{$prefix}focus-ring-opacity));
   // scss-docs-end root-focus-variables
 
@@ -193,11 +197,6 @@
   @include rfs($small-font-size-value, --#{$prefix}rfs-fs-small);
   --#{$prefix}fs-small: var(--#{$prefix}rfs-fs-small);
 
-  @each $level, $value in $body-font-sizes-value {
-    @include rfs($value, --#{$prefix}rfs-fs-body-#{$level});
-    --#{$prefix}fs-body-#{$level}: var(--#{$prefix}rfs-fs-body-#{$level});
-  }
-
   --#{$prefix}fw-lighter: #{$font-weight-lighter-value};
   --#{$prefix}fw-light: #{$font-weight-light-value};
   --#{$prefix}fw-normal: #{$font-weight-normal-value};