@dynamic-framework/ui-react 2.1.1 → 2.3.0

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

@@ -1,6 +1,6 @@
 // Alerts
 // scss-docs-start alert-variables
-$alert-border-radius: var(--#{$prefix}border-radius-sm) !default;
+$alert-border-radius: var(--#{$prefix}border-radius) !default;
 $alert-link-font-weight: var(--#{$prefix}fw-bold) !default;
 // scss-docs-end alert-variables
 

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

@@ -15,3 +15,12 @@ $border-radius-xl: 1.5rem !default;
 $border-radius-xxl: 2rem !default;
 $border-radius-pill: 50rem !default;
 // scss-docs-end border-radius-variables
+
+$border-widths: (
+  1: var(--#{$prefix}border-width),
+  2: calc(var(--#{$prefix}border-width) * 2),
+  3: calc(var(--#{$prefix}border-width) * 3),
+  4: calc(var(--#{$prefix}border-width) * 4),
+  5: calc(var(--#{$prefix}border-width) * 5),
+  6: calc(var(--#{$prefix}border-width) * 6)
+) !default;

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

@@ -7,7 +7,7 @@ $btn-color: var(--#{$prefix}body-color) !default;
 $btn-padding-y: $spacer-2 !default;
 $btn-padding-x: $spacer-4 !default;
 $btn-line-height: 1.5 !default;
-$btn-font-weight: $font-weight-semibold !default;
+$btn-font-weight: $font-weight-normal !default;
 
 $btn-padding-y-sm: $spacer-1 !default;
 $btn-padding-x-sm: $spacer-3 !default;

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

@@ -2,7 +2,19 @@
 
 // scss-docs-start carousel-variables
 $carousel-control-color: var(--#{$prefix}white) !default;
-$carousel-indicator-active-bg: var(--#{$prefix}white) !default;
+$carousel-indicator-bg: var(--#{$prefix}primary-100) !default;
+$carousel-indicator-border: 1px solid var(--#{$prefix}primary-200) !default;
+$carousel-indicator-width: 16px !default;
+$carousel-indicator-height: 16px !default;
+$carousel-indicator-radius: 100px !default;
+$carousel-indicator-active-width: 26px !default;
+$carousel-indicator-active-bg: var(--#{$prefix}primary) !default;
+$carousel-indicator-active-border: var(--#{$prefix}primary) !default;
+$carousel-indicator-hover-bg: var(--#{$prefix}primary-200) !default;
+$carousel-control-bg: var(--#{$prefix}primary) !default;
+$carousel-control-width: 24px !default;
+$carousel-control-height: 24px !default;
+$carousel-control-radius: 48px !default;
 $carousel-caption-color: var(--#{$prefix}white) !default;
 // scss-docs-end carousel-variables
 

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

@@ -41,7 +41,7 @@ $purple: #4848b7 !default;
 $pink: #d81b60 !default;
 $red: #dc3545 !default;
 $orange: #fd7e14 !default;
-$yellow: #ffc107 !default;
+$yellow: #ffb300 !default;
 $green: #198754 !default;
 $teal: #20c997 !default;
 $cyan: #0dcaf0 !default;
@@ -404,7 +404,7 @@ $info-text-emphasis: var(--#{$prefix}info-600) !default;
 $warning-text-emphasis: var(--#{$prefix}warning-800) !default;
 $danger-text-emphasis: var(--#{$prefix}danger-600) !default;
 $light-text-emphasis: var(--#{$prefix}gray-600) !default;
-$dark-text-emphasis: var(--#{$prefix}gray-600) !default;
+$dark-text-emphasis: var(--#{$prefix}gray-25) !default;
 // scss-docs-end theme-text-variables
 
 // scss-docs-start theme-bg-subtle-variables

package/src/style/abstracts/variables/_input-phone.scss

@@ -36,7 +36,7 @@ $input-phone-dropdown-item-text-color: $input-phone-text-color !default;
 $input-phone-dropdown-item-dial-code-color: var(--#{$prefix}gray-500) !default;
 $input-phone-dropdown-item-height: 28px !default;
 $input-phone-dropdown-item-padding: var(--#{$prefix}ref-spacer-3) var(--#{$prefix}ref-spacer-3) !default;
-$input-phone-dropdown-item-font-size: var(--#{$prefix}fs-body-small) !default;
+$input-phone-dropdown-item-font-size: var(--#{$prefix}font-size-sm) !default;
 $input-phone-dropdown-item-font-weight: var(--#{$prefix}fw-normal) !default;
 
 // Selected / hover items

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

@@ -1,34 +1,30 @@
 // Navs
 
 // scss-docs-start nav-variables
-$nav-link-padding-y: $spacer-2 !default;
-$nav-link-padding-x: $spacer-4 !default;
-$nav-link-font-size: var(--#{$prefix}body-font-size) !default;
-$nav-link-font-weight: var(--#{$prefix}fw-normal) !default;
-$nav-link-color: var(--#{$prefix}gray-900) !default;
-$nav-link-hover-color: var(--#{$prefix}primary-600) !default;
-$nav-link-hover-bg: transparent !default; // Custom
-$nav-link-disabled-color: var(--#{$prefix}gray-300) !default;
+$nav-link-padding-y:                $spacer-2 !default;
+$nav-link-padding-x:                $spacer-4 !default;
+$nav-link-font-size:                var(--#{$prefix}body-font-size) !default;
+$nav-link-font-weight:              var(--#{$prefix}fw-normal) !default;
+$nav-link-color:                    var(--#{$prefix}gray-900) !default;
+$nav-link-hover-color:              var(--#{$prefix}primary-600) !default;
+$nav-link-transition:               color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out !default;
+$nav-link-disabled-color:           var(--#{$prefix}gray-300) !default;
+$nav-link-focus-box-shadow:         $focus-ring-box-shadow !default;
 
-// custom
-$nav-link-border-active-font-weight: var(--#{$prefix}fw-bold) !default;
-// end custom
+$nav-tabs-border-color:             var(--#{$prefix}gray-100) !default;
+$nav-tabs-border-width:             var(--#{$prefix}border-width) !default;
+$nav-tabs-border-radius:            var(--#{$prefix}border-radius-sm) !default;
+$nav-tabs-link-hover-border-color:  $nav-tabs-border-color !default;
+$nav-tabs-link-active-color:        var(--#{$prefix}primary) !default;
+$nav-tabs-link-active-bg:           var(--#{$prefix}white) !default;
+$nav-tabs-link-active-border-color: var(--#{$prefix}nav-tabs-border-color) !default;
 
-$nav-tabs-border-radius: var(--#{$prefix}border-radius-sm) !default;
-$nav-tabs-link-active-color: var(--#{$prefix}primary) !default;
-$nav-tabs-link-active-bg: var(--#{$prefix}white) !default;
-$nav-tabs-link-active-border-color: var(--#{$prefix}gray-300) !default;
-$nav-tabs-border-color: var(--#{$prefix}gray-300) !default;
+$nav-pills-border-radius:           var(--#{$prefix}border-radius-sm) !default;
+$nav-pills-link-active-color:       var(--#{$prefix}primary-500) !default;
+$nav-pills-link-active-bg:          var(--#{$prefix}gray-50) !default;
 
-// custom
-$nav-nav-gap: var(--#{$prefix}ref-spacer-0) !default;
-// end custom
-
-$nav-pills-border-radius: var(--#{$prefix}border-radius-sm) !default;
-$nav-pills-link-active-color: var(--#{$prefix}white) !default;
-$nav-pills-link-active-bg: var(--#{$prefix}primary) !default;
+$nav-underline-gap:                 1rem !default;
+$nav-underline-border-width:        2px !default;
+$nav-underline-link-active-color:   var(--#{$prefix}primary) !default;
+$nav-underline-font-weight:         var(--#{$prefix}fw-normal) !default; // custom
 // scss-docs-end nav-variables
-
-$nav-underline-link-active-color: var(--#{$prefix}primary) !default;
-$nav-underline-border-width: 2px !default;
-$nav-underline-border-color: transparent !default;

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

@@ -9,8 +9,8 @@ $tooltip-padding-y: var(--#{$prefix}ref-spacer-2) !default;
 $tooltip-padding-x: var(--#{$prefix}ref-spacer-1) !default;
 
 // custom
-$tooltip-font-size-sm: var(--#{$prefix}fs-body-small) !default;
-$tooltip-font-size-lg: var(--#{$prefix}fs-body-medium) !default;
+$tooltip-font-size-sm: var(--#{$prefix}fs-small) !default;
+$tooltip-font-size-lg: var(--#{$prefix}fs-5) !default;
 // end custom
 
 // scss-docs-end tooltip-variables

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

@@ -15,8 +15,6 @@ $font-size-sm: var(--#{$prefix}fs-small) !default;
 $font-size-sm-value: .875em !default;
 // end custom
 
-$font-size-lg: $font-size-base * 1.125 !default;  // 18px
-
 // custom
 $font-weight-lighter-value: lighter !default;
 $font-weight-light-value: 200 !default;
@@ -39,40 +37,6 @@ $line-height-base: 1.5 !default;
 $line-height-sm: 1.25 !default;
 $line-height-lg: 2 !default;
 
-// custom
-$body-large-font-size-value: $font-size-base * 1.5 !default;   // 24px - 21.525px
-$body-medium-font-size-value: $font-size-base * 1.25 !default; // 20px - 20px
-$body-normal-font-size-value: $font-size-base * 1 !default;    // 16px - 16px
-$body-small-font-size-value: $font-size-base * .875 !default;  // 14px - 14px
-$body-tiny-font-size-value: $font-size-base * .8125 !default;  // 13px - 13px
-
-$body-large-font-size: var(--#{$prefix}fs-body-large) !default;
-$body-medium-font-size: var(--#{$prefix}fs-body-medium) !default;
-$body-normal-font-size: var(--#{$prefix}fs-body-normal) !default;
-$body-small-font-size: var(--#{$prefix}fs-body-small) !default;
-$body-tiny-font-size: var(--#{$prefix}fs-body-tiny) !default;
-// end custom
-// scss-docs-end font-variables
-
-// scss-docs-start body-font-sizes
-// custom
-$body-font-sizes-value: (
-  large: $body-large-font-size-value,
-  medium: $body-medium-font-size-value,
-  normal: $body-normal-font-size-value,
-  small: $body-small-font-size-value,
-  tiny: $body-tiny-font-size-value,
-) !default;
-
-$body-font-sizes: (
-  large: $body-large-font-size,
-  medium: $body-medium-font-size,
-  normal: $body-normal-font-size,
-  small: $body-small-font-size,
-  tiny: $body-tiny-font-size,
-) !default;
-// end custom
-// scss-docs-end body-font-sizes
 
 // custom
 $h1-font-size-value: $font-size-base * 3 !default;    // 48px - 30.675px
@@ -169,10 +133,6 @@ $small-font-size-value: $font-size-sm-value !default;
 
 $sub-sup-font-size: .75em !default;
 
-// // fusv-disable
-// $text-muted: var(--#{$prefix}gray-400) !default;
-// // fusv-enable
-
 $blockquote-margin-y: var(--#{$prefix}ref-spacer-4) !default;
 $blockquote-footer-color: var(--#{$prefix}gray-600) !default;
 

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

@@ -59,3 +59,4 @@
 @import "tooltip";
 @import "placeholder";
 @import "nav";
+@import "carousel"

package/src/style/base/_badge.scss

@@ -3,8 +3,8 @@
   --#{$prefix}badge-icon-size: #{$badge-font-size};
   --#{$prefix}badge-bg: #{$badge-bg};
   --#{$prefix}badge-color: #{$badge-color};
-  --#{$prefix}badge-sm-font-size: var(--#{$prefix}fs-body-small);
-  --#{$prefix}badge-lg-font-size: var(--#{$prefix}fs-body-large);
+  --#{$prefix}badge-sm-font-size: var(--#{$prefix}fs-small);
+  --#{$prefix}badge-lg-font-size: var(--#{$prefix}fs-5);
 
   display: inline-flex;
   gap: var(--#{$prefix}badge-gap);

package/src/style/base/_carousel.scss

@@ -0,0 +1,44 @@
+.carousel-indicators {
+  position: relative;
+  [data-bs-target] {
+    width: $carousel-indicator-width;
+    height: $carousel-indicator-height;
+    text-align: left;
+    text-indent: 0;
+    background: $carousel-indicator-bg;
+    border: $carousel-indicator-border;
+    border-radius: $carousel-indicator-radius;
+    opacity: 1;
+    transition: .3s;
+    &.active {
+      width: $carousel-indicator-active-width;
+      background: $carousel-indicator-active-bg;
+      border-color: $carousel-indicator-active-border;
+      transition: .3s;
+      &:hover {
+        background: $carousel-indicator-active-bg;
+      }
+    }
+    &:hover {
+      background: $carousel-indicator-hover-bg;
+    }
+  }
+}
+
+.carousel-control-prev,
+.carousel-control-next {
+  top: calc(50% - 20px);
+  bottom: auto;
+  width: $carousel-control-width;
+  height: $carousel-control-height;
+  padding: var(--#{$prefix}ref-spacer-1);
+  margin-inline: var(--#{$prefix}ref-spacer-1);
+  background: $carousel-control-bg;
+  border-radius: $carousel-control-radius;
+  opacity: .85;
+}
+
+.carousel-control-next-icon,
+.carousel-control-prev-icon {
+  filter: invert(1);
+}

package/src/style/base/_collapse.scss

@@ -14,6 +14,8 @@
   --#{$prefix}collapse-separator-display: none;
   --#{$prefix}collapse-separator-height: 1px;
   --#{$prefix}collapse-separator-bg: var(--#{$prefix}gray-200);
+  --#{$prefix}collapse-interpolate-size: allow-keywords;
+  --#{$prefix}collapse-transition: all ease-in-out .3s allow-discrete;
 
   background-color: var(--#{$prefix}collapse-bg);
   border-radius: var(--#{$prefix}collapse-border-radius);
@@ -40,15 +42,26 @@
     position: relative;
     padding: var(--#{$prefix}collapse-body-padding-y) var(--#{$prefix}collapse-body-padding-x);
     padding-top: 0;
+  }
 
-    &::before {
-      position: absolute;
-      top: 0;
-      display: var(--#{$prefix}collapse-separator-display);
-      width: calc(100% - (var(--#{$prefix}collapse-body-padding-x) * 2));
-      height: var(--#{$prefix}collapse-separator-height);
-      content: " ";
-      background-color: var(--#{$prefix}collapse-separator-bg);
+  .collapse-body-wrapper {
+    height: 0;
+    overflow: hidden;
+    opacity: 0;
+    transition: var(--#{$prefix}collapse-transition);
+    interpolate-size: var(--#{$prefix}collapse-interpolate-size);
+    &.show {
+      display: block;
+      height: auto;
+      opacity: 1;
     }
   }
+
+  @starting-style {
+    .collapse-body-wrapper.show {
+      height: 0;
+      opacity: 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

@@ -1,3 +1,5 @@
+/* stylelint-disable declaration-no-important */
+
 //
 // Headings
 //
@@ -34,17 +36,12 @@
 // Type display classes
 [class*="display-"] {
   font-family: $display-font-family;
-  font-size: var(--#{$prefix}display-font-size);
+  font-size: var(--#{$prefix}display-font-size) !important;
   font-style: $display-font-style;
   font-weight: $display-font-weight;
   line-height: $display-line-height;
 }
 
-// Body display classes
-[class*="fs-body-"] {
-  font-size: var(--#{$prefix}fs-body-font-size);
-}
-
 //
 // Emphasis
 //
@@ -107,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;
 }