@dynamic-framework/ui-react 1.30.1 → 1.32.0

package/src/style/abstracts/variables/_list-group.scss

@@ -14,14 +14,14 @@ $list-group-item-bg-scale: 0% !default;
 $list-group-item-color-scale: 40% !default;
 // fusv-enable
 
-$list-group-hover-bg: var(--#{$prefix}gray-100) !default;
+$list-group-hover-bg: var(--#{$prefix}surface-primary) !default;
 
 $list-group-disabled-color: var(--#{$prefix}gray-600) !default;
 
-$list-group-action-color: var(--#{$prefix}gray-700) !default;
+$list-group-action-color: var(--#{$prefix}gray-900) !default;
 $list-group-action-hover-color: $list-group-action-color !default;
 
-$list-group-action-active-bg: var(--#{$prefix}gray-200) !default;
+$list-group-action-active-bg: var(--#{$prefix}primary-100) !default;
 
 // custom
 $list-group-item-border-radius: 0 !default;

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

@@ -1,35 +1,32 @@
 // 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-500) !default;
-$nav-link-hover-color: var(--#{$prefix}secondary-600) !default;
-$nav-link-disabled-color: var(--#{$prefix}gray-200) !default;
+$nav-link-color: var(--#{$prefix}gray-900) !default;
+$nav-link-hover-color: var(--#{$prefix}primary-600) !default;
+$nav-link-hover-bg: var(--#{$prefix}surface-primary) !default;
+$nav-link-disabled-color: var(--#{$prefix}gray-300) !default;
 
 // custom
-$nav-link-border-height: 2px !default;
-$nav-link-line-height: var(--#{$prefix}ref-spacer-6) !default;
-$nav-link-border-border-radius: $border-radius-pill !default;
-$nav-link-border-active-color: var(--#{$prefix}secondary) !default;
 $nav-link-border-active-font-weight: var(--#{$prefix}fw-bold) !default;
-$nav-link-border-active-bg: var(--#{$prefix}secondary) !default;
 // end custom
 
 $nav-tabs-border-radius: var(--#{$prefix}border-radius-sm) !default;
-$nav-tabs-link-active-color: var(--#{$prefix}secondary) !default;
-$nav-tabs-link-active-bg: var(--#{$prefix}secondary-100) !default;
-$nav-tabs-link-active-border-color: var(--#{$prefix}secondary) !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;
 
 // custom
-$nav-nav-padding-x: var(--#{$prefix}ref-spacer-6) !default;
-$nav-nav-padding-y: var(--#{$prefix}ref-spacer-4) !default;
-$nav-nav-gap: var(--#{$prefix}ref-spacer-6) !default;
+$nav-nav-gap: var(--#{$prefix}ref-spacer-0) !default;
 // end custom
 
-$nav-pills-border-radius: 100px !default;
+$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}secondary) !default;
+$nav-pills-link-active-bg: var(--#{$prefix}primary) !default;
 // scss-docs-end nav-variables
 
-$nav-underline-link-active-color: var(--#{$prefix}secondary) !default;
+$nav-underline-link-active-color: var(--#{$prefix}primary) !default;

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

@@ -15,7 +15,7 @@ $enable-container-classes: true !default;
 $enable-cssgrid: true !default;
 $enable-button-pointers: true !default;
 $enable-rfs: true !default;
-$enable-validation-icons: false !default;
+$enable-validation-icons: true !default;
 $enable-negative-margins: false !default;
 $enable-deprecation-messages: true !default;
 $enable-important-utilities: true !default;

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

@@ -5,12 +5,12 @@ $tooltip-color:  var(--#{$prefix}body-bg) !default;
 $tooltip-bg: var(--#{$prefix}emphasis-color) !default;
 $tooltip-border-radius: var(--#{$prefix}ref-spacer-1) !default;
 $tooltip-opacity: 1 !default;
-$tooltip-padding-y: var(--#{$prefix}ref-spacer-1) !default;
-$tooltip-padding-x: var(--#{$prefix}ref-spacer-2) !default;
+$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-small) !default;
-$tooltip-font-size-lg: var(--#{$prefix}fs-6) !default;
+$tooltip-font-size-sm: var(--#{$prefix}fs-body-small) !default;
+$tooltip-font-size-lg: var(--#{$prefix}fs-body-medium) !default;
 // end custom
 
 // scss-docs-end tooltip-variables

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

@@ -53,7 +53,8 @@
 @import "breadcrumb";
 @import "dropdown";
 @import "label";
-@import "avatar";
 @import "backdrop";
 @import "toast";
 @import "tooltip";
+@import "placeholder";
+@import "nav";

package/src/style/base/_alert.scss

@@ -15,6 +15,10 @@
   .alert-icon {
     --#{$prefix}icon-size: var(--#{$prefix}alert-icon-size);
     --#{$prefix}icon-color: var(--#{$prefix}alert-icon-color);
+
+    &:not(.d-icon) {
+      color: var(--#{$prefix}icon-color);
+    }
   }
 
   @each $theme, $value in map-remove($theme-colors, "light", "dark") {
@@ -26,4 +30,20 @@
       --#{$prefix}alert-border-color: var(--#{$prefix}surface-#{$theme});
     }
   }
+
+  &.alert-light {
+    --#{$prefix}alert-icon-color: var(--#{$prefix}gray-500);
+    --#{$prefix}alert-color: var(--#{$prefix}body-color);
+
+    --#{$prefix}alert-bg: var(--#{$prefix}surface-gray);
+    --#{$prefix}alert-border-color: var(--#{$prefix}surface-gray);
+  }
+
+  &.alert-dark {
+    --#{$prefix}alert-icon-color: var(--#{$prefix}light);
+    --#{$prefix}alert-color: var(--#{$prefix}white);
+
+    --#{$prefix}alert-bg: var(--#{$prefix}gray-500);
+    --#{$prefix}alert-border-color: var(--#{$prefix}gray-500);
+  }
 }

package/src/style/base/_form-check.scss

@@ -1,4 +1,8 @@
+.form-check-label {
+  --#{$prefix}label-padding-x: var(--#{$prefix}ref-spacer-2);
+}
+
 .form-check-input {
-  --bs-form-check-input-focus-border-color: #{$component-focus-border-color};
-  --bs-form-check-input-focus-box-shadow: #{$input-btn-focus-box-shadow};
+  --#{$prefix}form-check-input-focus-border-color: #{$component-focus-border-color};
+  --#{$prefix}form-check-input-focus-box-shadow: #{$input-btn-focus-box-shadow};
 }

package/src/style/base/_input-group.scss

@@ -78,7 +78,10 @@
 
     &:has(.form-control.is-#{$state}, .form-select.is-#{$state}) {
       border-color: $border-color;
-      box-shadow: $box-shadow;
+
+      &:focus-within {
+        box-shadow: $box-shadow;
+      }
 
       ~ .form-text {
         color: $border-color;

package/src/style/base/_label.scss

@@ -5,6 +5,7 @@ label {
   gap: var(--#{$prefix}ref-spacer-1);
   align-items: center;
   padding: var(--#{$prefix}label-padding-y) var(--#{$prefix}label-padding-x);
+  margin-bottom: var(--#{$prefix}label-margin-bottom);
   font-size: var(--#{$prefix}label-font-size);
   font-weight: var(--#{$prefix}label-font-weight);
   color: var(--#{$prefix}label-color);

package/src/style/base/_nav.scss

@@ -0,0 +1,72 @@
+.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 {
+      background-color: var(--#{$prefix}nav-link-hover-bg);
+    }
+  }
+}
+
+.nav-pills,
+.nav-underline {
+  gap: var(--#{$prefix}nav-tabs-nav-gap);
+  padding: var(--#{$prefix}nav-link-padding-y) var(--#{$prefix}nav-link-padding-x);
+
+  &.flex-column {
+    flex: 1 0 auto;
+
+    .nav-link {
+      width: 100%;
+    }
+  }
+}
+
+.nav-pills {
+  .nav-link.active {
+    &:hover {
+      color: var(--#{$prefix}nav-link-hover-color);
+    }
+  }
+}
+
+.nav-underline {
+  &.flex-column {
+    .nav-link {
+      border-right: 1px solid var(--#{$prefix}nav-tabs-border-color);
+      border-bottom-color: transparent;
+    }
+    .nav-link.active{
+      background-color: var(--#{$prefix}nav-link-hover-bg);
+      border-right: 1px solid currentcolor;
+    }
+  }
+  .nav-link {
+    padding: var(--#{$prefix}nav-link-padding-y) var(--#{$prefix}nav-link-padding-x);
+    border-bottom: 1px solid var(--#{$prefix}gray-300);
+  }
+}
+
+.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));
+}

package/src/style/base/_pagination.scss

@@ -10,12 +10,14 @@
     min-height: var(--#{$prefix}pagination-page-item-size);
   }
 
-  :is(.page-item:first-child, .page-item:last-child):not(.disabled) .page-link {
-    color: var(--#{$prefix}pagination-page-control-color);
-  }
+  .page-item-arrow {
+    &:is(.page-item:first-child, .page-item:last-child):not(.disabled) .page-link {
+      color: var(--#{$prefix}pagination-page-control-color);
+    }
 
-  :is(.page-item:first-child, .page-item:last-child).disabled .page-link {
-    color: var(--#{$prefix}pagination-page-control-disabled-color);
+    &:is(.page-item:first-child, .page-item:last-child).disabled .page-link {
+      color: var(--#{$prefix}pagination-page-control-disabled-color);
+    }
   }
 
   .page-link {

package/src/style/base/_placeholder.scss

@@ -0,0 +1,3 @@
+.placeholder {
+  background-color: var(--#{$prefix}default-placeholder-bg, currentcolor);
+}

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

@@ -1,3 +1,4 @@
+@import "d-avatar";
 @import "d-icon";
 @import "d-input-pin";
 @import "d-button-icon";
@@ -11,7 +12,6 @@
 @import "d-collapse-icon-text";
 @import "d-datepicker";
 @import "d-timepicker";
-@import "d-tabs";
 @import "d-close";
 @import "d-popover";
 @import "d-box-file";

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

@@ -0,0 +1,85 @@
+.d-avatar {
+  --#{$prefix}avatar-border: 1px solid var(--#{$prefix}avatar-bg);
+  --#{$prefix}avatar-size: var(--#{$prefix}ref-spacer-12);
+  --#{$prefix}avatar-bg: var(--#{$prefix}secondary-100);
+  --#{$prefix}avatar-color: var(--#{$prefix}secondary-500);
+  --#{$prefix}avatar-font-weight: var(--#{$prefix}fw-bold);
+  --#{$prefix}avatar-border-radius: var(--#{$prefix}border-radius-pill);
+
+  position: relative;
+  display: inline-block;
+  width: var(--#{$prefix}avatar-size);
+  height: var(--#{$prefix}avatar-size);
+  font-size: calc(var(--#{$prefix}avatar-size) / 3);
+  border: var(--#{$prefix}avatar-border);
+  border-radius: var(--#{$prefix}avatar-border-radius);
+
+  .d-avatar-img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    border-radius: var(--#{$prefix}avatar-border-radius);
+  }
+
+  .d-avatar-name {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    height: 100%;
+    font-weight: var(--#{$prefix}avatar-font-weight);
+    color: var(--#{$prefix}avatar-color);
+    white-space: pre-wrap;
+    background-color: var(--#{$prefix}avatar-bg);
+    border-radius: var(--#{$prefix}avatar-border-radius);
+  }
+
+  @each $theme, $value in map-remove($theme-colors, "light", "dark") {
+    $color: color-contrast($value);
+    &.d-avatar-#{$theme} {
+      --#{$prefix}avatar-color: var(--#{$prefix}#{$theme}-500);
+      --#{$prefix}avatar-bg: var(--#{$prefix}#{$theme}-100);
+    }
+
+    &.d-avatar-dark-#{$theme} {
+      --#{$prefix}avatar-color: var(--#{$prefix}white);
+      --#{$prefix}avatar-bg: var(--#{$prefix}#{$theme}-500);
+    }
+
+    &.d-avatar-light-#{$theme} {
+      --#{$prefix}avatar-color: var(--#{$prefix}#{$theme}-500);
+      --#{$prefix}avatar-bg: var(--#{$prefix}white);
+    }
+  }
+}
+
+.d-avatar-xs {
+  --#{$prefix}avatar-size: var(--#{$prefix}ref-spacer-8);
+}
+
+.d-avatar-sm {
+  --#{$prefix}avatar-size: var(--#{$prefix}ref-spacer-10);
+}
+
+.d-avatar-lg {
+  --#{$prefix}avatar-size: var(--#{$prefix}ref-spacer-14);
+}
+
+.d-avatar-xl {
+  --#{$prefix}avatar-size: var(--#{$prefix}ref-spacer-16);
+}
+
+.d-avatar-xxl {
+  --#{$prefix}avatar-size: var(--#{$prefix}ref-spacer-18);
+}
+
+.d-avatar-group {
+  .d-avatar-img,
+  .d-avatar-name {
+    box-shadow: -2px 0 2px rgba(0, 0, 0, .1);
+  }
+
+  .d-avatar + .d-avatar {
+    margin-left: calc(var(--#{$prefix}avatar-size) * -.25);
+  }
+}

package/src/style/components/_d-input-pin.scss

@@ -49,9 +49,19 @@
     $border-color: map-get($data, "border-color");
     $tooltip-bg-color: map-get($data, "tooltip-bg-color");
     $box-shadow: map-get($data, "focus-box-shadow");
+    $icon: map-get($data, "icon");
+
+    &:has(.form-control.is-#{$state}) {
+      @if $enable-validation-icons {
+        padding-right: $input-height-inner;
+        background-image: $icon;
+        background-repeat: no-repeat;
+        background-position: right $input-height-inner-quarter center;
+        background-size: $input-height-inner-half $input-height-inner-half;
+      }
 
-    &:has(.form-control.is-#{$state}){
       .form-control {
+        background: $input-bg;
         border-color: $tooltip-bg-color;
         box-shadow: $box-shadow;
       }
@@ -59,10 +69,6 @@
       .form-text {
         color: $border-color;
       }
-
-      .input-group-validation-icon {
-        --#{$prefix}icon-color: #{$tooltip-bg-color};
-      }
     }
   }
 

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

@@ -48,22 +48,31 @@
     border-radius: var(--#{$prefix}input-border-radius);
   }
 
-  // validation states
   @each $state, $data in $form-validation-states {
     $border-color: map-get($data, "border-color");
     $tooltip-bg-color: map-get($data, "tooltip-bg-color");
     $box-shadow: map-get($data, "focus-box-shadow");
+    $icon: map-get($data, "icon");
 
     .input-group:has(.d-select-component.is-#{$state}) {
       border-color: $border-color;
-      box-shadow: $box-shadow;
 
-      ~ .form-text {
-        color: $border-color;
+      .d-select__value-container {
+        @if $enable-validation-icons {
+          padding-right: $input-height-inner;
+          background-image: $icon;
+          background-repeat: no-repeat;
+          background-position: right $input-height-inner-quarter center;
+          background-size: $input-height-inner-half $input-height-inner-half;
+        }
+      }
+
+      &:focus-within {
+        box-shadow: $box-shadow;
       }
 
-      .input-group-validation-icon {
-        --#{$prefix}icon-color: #{$tooltip-bg-color};
+      ~ .form-text {
+        color: $border-color;
       }
     }
   }

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

@@ -29,9 +29,10 @@
   --#{$prefix}step-line-color: var(--#{$prefix}secondary);
 
   /* Step label */
-  --#{$prefix}step-label-padding: var(--#{$prefix}ref-spacer-6);
+  --#{$prefix}step-label-padding: var(--#{$prefix}ref-spacer-4);
   --#{$prefix}step-vertical-label-padding: var(--#{$prefix}ref-spacer-4);
-
+  --#{$prefix}step-label-font-size: var(--#{$prefix}body-font-size);
+  --#{$prefix}step-description-font-size: var(--#{$prefix}fs-body-tiny);
 
   position: relative;
   display: flex;
@@ -97,10 +98,25 @@
       width: 50%;
     }
 
-    .d-step-label {
+    .d-step-text-container {
       padding-right: var(--#{$prefix}step-label-padding);
       padding-left: var(--#{$prefix}step-label-padding);
       text-align: center;
+
+      .d-step-label {
+        font-size: var(--#{$prefix}step-label-font-size);
+      }
+
+      .d-step-description {
+        font-size: var(--#{$prefix}step-description-font-size);
+      }
+    }
+  }
+
+  &.is-align-start {
+    .d-step-text-container {
+      text-align: left;
+      transform: translateX(calc(50% - (var(--#{$prefix}step-icon-container-size) / 2) - var(--#{$prefix}step-label-padding)));
     }
   }
 
@@ -116,12 +132,16 @@
         height: 100%;
       }
 
-      .d-step-label {
+      .d-step-text-container {
         display: flex;
+        flex-direction: column;
         flex-grow: 1;
-        align-items: center;
+        align-items: flex-start;
         min-height: var(--#{$prefix}step-label-height);
         padding: var(--#{$prefix}step-vertical-label-padding);
+      }
+
+      .d-step-label {
         text-align: left;
       }
 

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

@@ -6,7 +6,7 @@
   --#{$prefix}step-progress-outter-size: 62px;
   --#{$prefix}step-progress-outter-z-index: 1;
   --#{$prefix}step-progress-outter-fill-background-color: var(--#{$prefix}secondary-500);
-  --#{$prefix}step-progress-outter-background-color: var(--#{$prefix}gray-300);
+  --#{$prefix}step-progress-outter-background-color: var(--#{$prefix}secondary-100);
 
   /* Inner circle */
   --#{$prefix}step-progress-inner-size: 50px;
@@ -15,14 +15,14 @@
 
   /* Current step */
   --#{$prefix}step-current-step-z-index: 3;
-  --#{$prefix}step-current-step-font-weight: var(--#{$prefix}fw-bold);
-  --#{$prefix}step-current-step-color: var(--#{$prefix}gray-700);
+  --#{$prefix}step-current-step-font-weight: var(--#{$prefix}fw-normal);
+  --#{$prefix}step-current-step-color: var(--#{$prefix}secondary-500);
 
   /* Info circle */
   --#{$prefix}step-info-max-width: 12rem;
-  --#{$prefix}step-info-label-font-size: var(--#{$prefix}fs-6);
-  --#{$prefix}step-info-description-font-size: var(--#{$prefix}fs-small);
-  --#{$prefix}step-info-description-color: var(--#{$prefix}gray-500);
+  --#{$prefix}step-info-label-font-size: var(--#{$prefix}body-font-size);
+  --#{$prefix}step-info-description-font-size: var(--#{$prefix}fs-body-tiny);
+  --#{$prefix}step-info-description-color: var(--#{$prefix}body-color);
 
   display: flex;
   gap: var(--#{$prefix}step-container-gap);

package/src/style/root/_root.scss

@@ -208,7 +208,8 @@
   --#{$prefix}fw-bolder: #{$font-weight-bolder-value};
 
   --#{$prefix}label-padding-y: var(--#{$prefix}ref-spacer-0);
-  --#{$prefix}label-padding-x: var(--#{$prefix}ref-spacer-2);
+  --#{$prefix}label-padding-x: var(--#{$prefix}ref-spacer-0);
+  --#{$prefix}label-margin-bottom: var(--#{$prefix}ref-spacer-1);
   --#{$prefix}label-font-size: var(--#{$prefix}fs-small);
   --#{$prefix}label-font-weight: var(--#{$prefix}fw-normal);
   --#{$prefix}label-color: var(--#{$prefix}gray-700);
@@ -296,6 +297,13 @@
     --#{$prefix}ref-spacer-#{$level}: #{$value};
   }
 
+  // We can't use a css variable in SVG code,
+  --#{$prefix}form-feedback-icon-valid: #{escape-svg(url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='#{$success}' d='M10.97 4.97a.75.75 0 0 1 1.07 1.05l-3.99 4.99a.75.75 0 0 1-1.08.02L4.324 8.384a.75.75 0 1 1 1.06-1.06l2.094 2.093 3.473-4.425z'/></svg>"))};
+  // We can't use a css variable in SVG code,
+  --#{$prefix}form-feedback-icon-invalid: #{escape-svg(url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='#{$danger}'><circle cx='6' cy='6' r='4.5'/><path stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/><circle cx='6' cy='8.2' r='.6' fill='#{$danger}' stroke='none'/></svg>"))};
+
+  --#{$prefix}default-placeholder-bg: var(--#{$prefix}secondary-200);
+
   --#{$prefix}default-accordion-padding-x: var(--#{$prefix}ref-spacer-4);
   --#{$prefix}default-accordion-padding-y: var(--#{$prefix}ref-spacer-6);
   --#{$prefix}default-accordion-color: var(--#{$prefix}gray-700);

package/src/style/abstracts/variables/_box-shadow.scss

@@ -1,6 +0,0 @@
-// scss-docs-start box-shadow-variables
-$box-shadow: 0 12px 14px 0 rgba($dark, .2) !default;
-$box-shadow-sm: 0 8px 12px 0 rgba($dark, .05) !default;
-$box-shadow-lg: 0 20px 22px 0 rgba($dark, .25) !default;
-$box-shadow-inset: inset 0 1px 2px rgba($black, .75) !default;
-// scss-docs-end box-shadow-variables

package/src/style/base/_avatar.scss

@@ -1,61 +0,0 @@
-.avatar {
-  --#{$prefix}avatar-size: var(--#{$prefix}ref-spacer-8);
-  --#{$prefix}avatar-title-bg: var(--#{$prefix}gray-500);
-  --#{$prefix}avatar-title-color: var(--#{$prefix}white);
-  --#{$prefix}avatar-radius: var(--#{$prefix}border-radius-pill);
-
-  position: relative;
-  display: inline-block;
-  width: var(--#{$prefix}avatar-size);
-  height: var(--#{$prefix}avatar-size);
-  font-size: calc(var(--#{$prefix}avatar-size) / 3);
-
-  .avatar-img {
-    width: 100%;
-    height: 100%;
-    object-fit: cover;
-    border-radius: var(--#{$prefix}avatar-radius);
-  }
-
-  .avatar-title {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 100%;
-    height: 100%;
-    color: var(--#{$prefix}avatar-title-color);
-    white-space: pre-wrap;
-    background-color: var(--#{$prefix}avatar-title-bg);
-    border-radius: var(--#{$prefix}avatar-radius);
-  }
-}
-
-.avatar-xs {
-  --#{$prefix}avatar-size: var(--#{$prefix}ref-spacer-4);
-}
-
-.avatar-sm {
-  --#{$prefix}avatar-size: var(--#{$prefix}ref-spacer-6);
-}
-
-.avatar-lg {
-  --#{$prefix}avatar-size: var(--#{$prefix}ref-spacer-10);
-}
-
-.avatar-xl {
-  --#{$prefix}avatar-size: var(--#{$prefix}ref-spacer-12);
-}
-
-.avatar-xxl {
-  --#{$prefix}avatar-size: var(--#{$prefix}ref-spacer-14);
-}
-
-.avatar-group {
-  .avatar-img {
-    box-shadow: -2px 0 2px rgba(0, 0, 0, .1);
-  }
-
-  .avatar + .avatar {
-    margin-left: calc(var(--#{$prefix}avatar-size) * -.25);
-  }
-}

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

@@ -1,44 +0,0 @@
-.nav-pills,
-.nav-tabs,
-.nav-underline {
-  --#{$prefix}nav-tabs-nav-gap: #{$nav-nav-gap};
-  --#{$prefix}nav-tabs-nav-padding-x: #{$nav-nav-padding-x};
-  --#{$prefix}nav-tabs-nav-padding-y: #{$nav-nav-padding-y};
-  --#{$prefix}nav-tabs-link-border-active-font-weight: #{$nav-link-border-active-font-weight};
-}
-
-.nav-pills,
-.nav-underline {
-  gap: var(--#{$prefix}nav-tabs-nav-gap);
-  padding: var(--#{$prefix}nav-tabs-nav-padding-y) var(--#{$prefix}nav-tabs-nav-padding-x);
-
-  &.flex-column {
-    flex: 1 0 auto;
-
-    .nav-link {
-      width: 100%;
-    }
-  }
-}
-
-.nav-tabs {
-  .nav-link {
-    &.active {
-      font-weight: var(--#{$prefix}nav-tabs-link-border-active-font-weight);
-      border-bottom-color: transparent;
-    }
-    &:not(.active):is(:hover, :focus) {
-      border-color: transparent;
-    }
-  }
-}
-
-.nav-underline .nav-link {
-  &:not(.active):hover {
-    border-bottom-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));
-}