@dynamic-framework/ui-react 1.31.0 → 1.32.0

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/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/_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/_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/root/_root.scss

@@ -297,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/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));
-}