@dynamic-framework/ui-react 2.2.0 → 2.3.0

package/src/style/base/_nav.scss

@@ -1,69 +1,20 @@
-.nav-pills,
-.nav-tabs,
-.nav-underline {
-  --#{$prefix}nav-tabs-border-color: #{$nav-tabs-border-color};
-  --#{$prefix}nav-tabs-nav-gap: #{$nav-nav-gap};
-  --#{$prefix}nav-link-padding-x: #{$nav-link-padding-x};
-  --#{$prefix}nav-link-padding-y: #{$nav-link-padding-y};
-  --#{$prefix}nav-tabs-link-border-active-font-weight: #{$nav-link-border-active-font-weight};
-  --#{$prefix}nav-link-hover-bg: #{$nav-link-hover-bg};
-  --#{$prefix}nav-link-hover-color: #{$nav-link-hover-color};
-
-  .nav-link {
-    &:hover:not(.active, .disabled, :disabled) {
-      background-color: var(--#{$prefix}nav-link-hover-bg);
-    }
-  }
-}
-
-.nav-pills,
-.nav-underline {
-  gap: var(--#{$prefix}nav-tabs-nav-gap);
-
-  &.flex-column {
-    flex: 1 0 auto;
-
-    .nav-link {
-      width: 100%;
-    }
+.nav-tabs {
+  .nav-link.active,
+  .nav-item.show .nav-link {
+    border-bottom-color: transparent;
   }
 }
 
 .nav-underline {
-  --#{$prefix}nav-underline-border-width: #{$nav-underline-border-width};
-  --#{$prefix}nav-underline-border-color: #{$nav-underline-border-color};
-
-  &.flex-column {
-    .nav-link {
-      border-right: var(--#{$prefix}nav-underline-border-width) solid var(--#{$prefix}nav-underline-border-color);
-      border-bottom-width: 0;
-    }
-
-    .nav-link.active {
-      background-color: var(--#{$prefix}nav-link-hover-bg);
-      border-right: var(--#{$prefix}nav-underline-border-width) solid currentcolor;
-    }
-  }
+  --#{$prefix}nav-underline-font-weight: #{$nav-underline-font-weight};
 
-  .nav-link {
-    padding: var(--#{$prefix}nav-link-padding-y) var(--#{$prefix}nav-link-padding-x);
-    border-bottom: var(--#{$prefix}nav-underline-border-width) solid var(--#{$prefix}nav-underline-border-color);
+  .nav-link.active,
+  .show > .nav-link {
+    font-weight: var(--#{$prefix}nav-underline-font-weight);
   }
 }
 
-.nav-tabs {
-  .nav-link {
-    &.active {
-      border-bottom-color: transparent;
-    }
-
-    &:not(.active):is(:hover, :focus) {
-      border-color: transparent;
-    }
-  }
-}
 
-.nav-link:focus-visible {
-  --#{$prefix}focus-ring-opacity: .25;
-  --#{$prefix}focus-ring-color: rgba(var(--#{$prefix}secondary-rgb), var(--#{$prefix}focus-ring-opacity));
+.tab-content {
+  margin-bottom: var(--#{$prefix}ref-spacer-4);
 }

package/src/style/base/_type.scss

@@ -104,3 +104,7 @@
     content: "\2014\00A0"; // em dash, nbsp
   }
 }
+
+[class*="link-underline"] {
+  text-decoration: underline;
+}

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

@@ -8,7 +8,6 @@
 @import "d-timeline";
 @import "d-box";
 @import "d-offcanvas";
-@import "d-collapse-icon-text";
 @import "d-datepicker";
 @import "d-timepicker";
 @import "d-voucher";

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

@@ -1,8 +1,8 @@
 .d-avatar {
   --#{$prefix}avatar-border: 1px solid var(--#{$prefix}avatar-bg);
   --#{$prefix}avatar-size: var(--#{$prefix}ref-spacer-12);
-  --#{$prefix}avatar-bg: var(--#{$prefix}gray-100);
-  --#{$prefix}avatar-color: var(--#{$prefix}gray-500);
+  --#{$prefix}avatar-bg: var(--#{$prefix}gray-50);
+  --#{$prefix}avatar-color: var(--#{$prefix}gray-600);
   --#{$prefix}avatar-font-weight: var(--#{$prefix}fw-bold);
   --#{$prefix}avatar-border-radius: var(--#{$prefix}border-radius-pill);
 

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

@@ -5,8 +5,8 @@
   --#{$prefix}carousel-arrow-space: calc(var(--#{$prefix}ref-spacer-4) * -1);
   // Pagination
   --#{$prefix}carousel-pagination-bottom: auto;
-  --#{$prefix}carousel-pagination-page-bg: var(--#{$prefix}secondary-100);
-  --#{$prefix}carousel-pagination-active-page-bg: var(--#{$prefix}secondary);
+  --#{$prefix}carousel-pagination-page-bg: var(--#{$prefix}primary-100);
+  --#{$prefix}carousel-pagination-active-page-bg: var(--#{$prefix}primary);
   // :focus
   --#{$prefix}carousel-focus-outline-color: var(--#{$prefix}focus-ring-color);
 
@@ -22,14 +22,36 @@
   // stylelint-disable
   .splide__pagination__page {
     margin: 0;
+    border: $carousel-indicator-border;
+    width: $carousel-indicator-width;
+    height: $carousel-indicator-width;
+    border-radius: $carousel-indicator-radius;
+    opacity: 1;
+    transition: 0.3s;
+  }
+
+  .splide__pagination__page.is-active {
+    background: $carousel-indicator-active-width;
+    width: $carousel-indicator-active-width;
+    border-color: $carousel-indicator-active-bg;
+    transform: none;
+  }
+
+  .splide__arrow {
+    width: $carousel-control-height;
+    height: $carousel-control-height;
+    background: var(--#{$prefix}primary);
+    padding: var(--#{$prefix}ref-spacer-1);
+    svg {
+      filter: invert(1);
+    }
   }
 
   .d-carousel-pagination {
     bottom: var(--#{$prefix}carousel-pagination-bottom);
     position: relative;
-    top: -0.5rem;
+    margin-top: var(--#{$prefix}--#{$prefix}ref-spacer-4);
     width: fit-content;
-    background: var(--#{$prefix}gray-25);
     padding: var(--#{$prefix}ref-spacer-2) var(--#{$prefix}ref-spacer-4);
     border-radius: var(--#{$prefix}border-radius-lg);
     margin: auto;

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

@@ -37,7 +37,7 @@
     border: 0;
   }
 
-  @each $theme, $value in map-remove($theme-colors, "light", "dark") {
+  @each $theme, $value in map-remove($theme-colors, "light", "dark", "warning") {
     $color: color-contrast($value);
     &.d-chip-#{$theme} {
       --#{$prefix}chip-color: var(--#{$prefix}#{$theme}-700);
@@ -45,8 +45,18 @@
     }
   }
 
+  &.d-chip-warning {
+    --#{$prefix}chip-color: var(--#{$prefix}warning-800);
+    --#{$prefix}chip-bg: var(--#{$prefix}warning-100);
+  }
+
   &.d-chip-light {
-    --#{$prefix}chip-color: var(--#{$prefix}gray);
-    --#{$prefix}chip-bg: var(--#{$prefix}gray-100);
+    --#{$prefix}chip-color: var(--#{$prefix}gray-800);
+    --#{$prefix}chip-bg: var(--#{$prefix}gray-25);
+  }
+
+  &.d-chip-dark {
+    --#{$prefix}chip-color: var(--#{$prefix}white);
+    --#{$prefix}chip-bg: var(--#{$prefix}black);
   }
 }

package/src/style/components/_d-credit-card.scss

@@ -14,25 +14,26 @@
   --#{$prefix}d-credit-card-padding: var(--#{$prefix}ref-spacer-4);
   --#{$prefix}d-credit-card-number-size: inherit;
   --#{$prefix}d-credit-card-chip-size: 30px;
-  flex-direction: column;
+  --#{$prefix}d-credit-card-color: var(--#{$prefix}white);
+  --#{$prefix}d-credit-card-logo-size: 22%;
 
+  position: relative;
+  display: flex;
+  flex-direction: column;
   aspect-ratio: var(--#{$prefix}d-credit-card-aspect-ratio);
   padding: var(--#{$prefix}d-credit-card-padding);
+  overflow: hidden;
+  color: var(--#{$prefix}d-credit-card-color);
   background: var(--#{$prefix}d-credit-card-bg);
-  --#{$prefix}d-credit-card-logo-size: 22%;
+  border-radius: var(--#{$prefix}border-radius-lg);
 
-  > * {
-    display: flex;
-    align-items: center;
+  .d-credit-card-details {
+    display: block;
+    margin-top: auto;
   }
 
-  .d-credit-card-details {
-    .name {
-      font-size: var(--#{$prefix}ref-fs-6);
-    }
-    .date {
-      font-size: var(--#{$prefix}ref-fs-6);
-    }
+  .d-credit-card-name {
+    font-size: var(--#{$prefix}ref-fs-6);
   }
 
   .d-credit-card-logo {
@@ -40,7 +41,9 @@
   }
 
   .d-credit-card-chip {
+    padding: var(--#{$prefix}ref-spacer-1);
     background: var(--#{$prefix}d-credit-card-chip-bg);
+    border-radius: var(--#{$prefix}border-radius-sm);
   }
 
   .d-credit-card-chip-image {
@@ -48,6 +51,7 @@
   }
 
   .d-credit-card-number {
+    margin-bottom: var(--#{$prefix}ref-spacer-4);
     font-family: var(--#{$prefix}d-credit-card-font-family-number);
     font-size: var(--#{$prefix}d-credit-card-number-size);
   }
@@ -59,9 +63,15 @@
   }
 
   .d-credit-card-header {
+    display: flex;
     align-items: center;
     justify-content: space-between;
     min-height: 45px;
   }
 
+  .d-credit-card-holder-text {
+    display: block;
+    opacity: .5;
+  }
+
 }

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

@@ -24,6 +24,23 @@
   }
 }
 
+// Circle background defaults and opacity variable
+.d-icon-has-circle {
+  --#{$prefix}icon-component-bg-opacity: .1;
+  --#{$prefix}icon-component-bg-color: rgba(var(--#{$prefix}body-color-rgb), var(--#{$prefix}icon-component-bg-opacity));
+}
+
+// Generate color classes for icon color and circle background
+@each $theme, $value in $theme-colors {
+  .d-icon-color-#{$theme} {
+    --#{$prefix}icon-component-color: var(--#{$prefix}#{$theme});
+  }
+
+  .d-icon-color-#{$theme}.d-icon-has-circle {
+    --#{$prefix}icon-component-bg-color: rgba(var(--#{$prefix}#{$theme}-rgb), var(--#{$prefix}icon-component-bg-opacity));
+  }
+}
+
 .d-icon-loading {
   animation: loading-icon var(--#{$prefix}icon-loading-duration) infinite linear;
 }

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;

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/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