ecabs-components 2.0.0-alpha.5 → 2.0.0-alpha.7

package/src/assets/styles/scss/modules/_button.scss

@@ -1,6 +1,7 @@
-@use "../utilities/mixins";
+@use "../utilities/helpers";
 @use "../utilities/fonts";
 @use "../utilities/functions";
+@use "../utilities/mixins";
 @use "../utilities/variables";
 
 .btn {
@@ -11,22 +12,64 @@
   min-height: functions.calc-rem(42px);
   width: max-content;
   padding: functions.calc-rem(8px 24px);
-  font-weight: fonts.$font-weight-regular;
+  font-weight: fonts.$font-weight-semibold;
   line-height: fonts.$base-line-height;
 
   &:after {
-    @extend %pseudos !optional;
+    @extend %pseudos;
 
     border: 1px solid transparent;
     top: 0;
     right: 0;
     bottom: 0;
     left: 0;
-    border-radius: variables.$border-radius-base;
+    border-radius: variables.$border-radius-large;
+  }
+
+  &:hover {
+    transition: filter variables.$trans-duration-style;
+  }
+
+  // #Basic
+  @include mixins.m(basic) {
+    background-color: transparent;
+    color: var(--color-gray-500);
+
+    &:hover {
+      background-color: transparent;
+      color: color-mix(in srgb, var(--color-gray-500), black 30%);
+    }
+
+    @include mixins.m(outline) {
+      background-color: transparent;
+      border-color: var(--color-gray-500);
+      color: var(--color-gray-500);
+
+      &:after {
+        border-color: var(--color-gray-500);
+      }
+
+      &:hover {
+        background-color: var(--color-gray-50);
+        color: color-mix(in srgb, var(--color-gray-500), black 30%);
+      }
+    }
+
+    @include mixins.m(link) {
+      @extend .btn--basic--outline;
+
+      &:after {
+        border-color: transparent;
+      }
+
+      &:hover {
+        background-color: transparent;
+      }
+    }
   }
 
   // #Primary
-  @include mixins.e(primary) {
+  @include mixins.m(primary) {
     background-color: var(--color-brand-dark);
     color: var(--color-white);
 
@@ -44,25 +87,25 @@
       }
 
       &:hover {
-        background-color: var(--color-gray-200);
+        background-color: var(--color-gray-50);
       }
     }
 
     @include mixins.m(link) {
-      @extend .btn__primary--outline;
+      @extend .btn--primary--outline;
 
       &:after {
         border-color: transparent;
       }
 
       &:hover {
-        background-color: var(--color-gray-200);
+        background-color: var(--color-gray-50);
       }
     }
   }
 
   /* #Secondary */
-  @include mixins.e(secondary) {
+  @include mixins.m(secondary) {
     background-color: var(--color-brand-light);
     color: var(--color-white);
 
@@ -80,12 +123,12 @@
       }
 
       &:hover {
-        background-color: var(--color-gray-200);
+        background-color: var(--color-gray-50);
       }
     }
 
     @include mixins.m(link) {
-      @extend .btn__secondary--outline;
+      @extend .btn--secondary--outline;
 
       &:after {
         border-color: transparent;
@@ -94,7 +137,7 @@
   }
 
   /* #Warn */
-  @include mixins.e(warn) {
+  @include mixins.m(warn) {
     background-color: var(--color-error);
     color: var(--color-white);
 
@@ -112,12 +155,12 @@
       }
 
       &:hover {
-        background-color: var(--color-gray-200);
+        background-color: var(--color-gray-50);
       }
     }
 
     @include mixins.m(link) {
-      @extend .btn__warn--outline;
+      @extend .btn--warn--outline;
 
       &:after {
         border-color: transparent;
@@ -126,9 +169,9 @@
   }
 
   /* #Success */
-  @include mixins.e(success) {
-    background-color: var(--color-success);
-    color: var(--color-white);
+  @include mixins.m(success) {
+    background-color: var(--color-success--opacity);
+    color: var(--color-success);
 
     &:hover {
       background-color: rgba(var(--color-success-rgb), .88);
@@ -144,12 +187,12 @@
       }
 
       &:hover {
-        background-color: var(--color-gray-200);
+        background-color: var(--color-gray-50);
       }
     }
 
     @include mixins.m(link) {
-      @extend .btn__warn--outline;
+      @extend .btn--warn--outline;
 
       &:after {
         border-color: transparent;
@@ -169,15 +212,16 @@
       display: flex;
       flex-direction: column;
       gap: 1.2rem;
-    }    
+    }
 
     // Button group
     @include mixins.m(item) {
       min-width: functions.calc-rem(100);
+
       @include mixins.media-q(small) {
         width: 100%;
         margin-right: 0;
-      }     
+      }
 
       &:last-of-type {
         margin-right: 0;
@@ -218,16 +262,25 @@
       display: flex;
       align-items: center;
       justify-content: center;
-
-      i, .mat-icon {
-        display: inline-block;
-        margin-right: .6rem;
-      }
+      gap: .6rem;
     }
   }
 
   /* #Large */
   @include mixins.m(lg) {
-    padding: functions.calc-rem(16 24);
+    padding: functions.calc-rem(16px 24px);
+  }
+
+  /* #Sizes */
+  @include mixins.m(small) {
+    @include mixins.btn-size(32px, 90px, 12px, 12px, 18px);
+  }
+
+  @include mixins.m(medium) {
+    @include mixins.btn-size(40px, 120px, 16px, 14px, 21px);
+  }
+
+  @include mixins.m(large) {
+    @include mixins.btn-size(48px, 140px, 20px, 16px, 24px);
   }
 }

package/src/assets/styles/scss/modules/_card.scss

@@ -1,28 +1,51 @@
-@use "../utilities/variables";
-@use "../utilities/mixins";
 @use "../utilities/fonts";
 @use "../utilities/functions";
+@use "../utilities/mixins";
+@use "../utilities/variables";
 
 .card {
-  box-shadow: variables.$box-shadow-default;
+  border-radius: variables.$border-radius-xl;
+  border: 1px solid var(--color-gray-200);
+  box-shadow: variables.$box-shadow-medium;
+  padding: functions.calc-rem(24px 32px);
 
-  @include mixins.m(subtitle) {
-    @include mixins.fontSize(fonts.$font-size-sm);
+  @include  mixins.m(inset) {
+    @extend .card;
 
-    color: var(--color-gray-500);
+    border-radius: variables.$border-radius-xl;
+    border-color: var(--color-gray-100);
+    box-shadow: none;
+    background-color: var(--color-gray-50);
+    padding: functions.calc-rem(16px);
+  }
+
+  @include mixins.e(header) {
+    padding: functions.calc-rem(0 0 12px 0);
   }
 
-  @include mixins.m(title) {
-    @include mixins.fontSize(fonts.$font-heading-xs);
+  @include mixins.e(title) {
+    @include mixins.fontSize(fonts.$font-size-base);
 
+    line-height: 1.5;
+    padding-bottom: functions.calc-rem(4px);
     margin: 0;
-    padding-top: 2rem;
-    padding-left: 1.5rem;
     color: var(--color-brand-dark);
     font-weight: fonts.$font-weight-semibold;
+
+
+    @include mixins.m(divider) {
+      margin-top: 0;
+    }
+  }
+
+  @include mixins.e(subtitle) {
+    @include mixins.fontSize(fonts.$font-size-sm);
+
+    color: var(--color-gray-500);
+    line-height: 1.5;
   }
 
   @include mixins.e(content) {
-    padding: functions.calc-rem(32 24);
+    padding: functions.calc-rem(20px 0 0 0);
   }
 }

package/src/assets/styles/scss/modules/_chip.scss

@@ -1,7 +1,7 @@
-@use "../utilities/mixins";
 @use "../utilities/fonts";
-@use "../utilities/variables";
 @use "../utilities/functions";
+@use "../utilities/mixins";
+@use "../utilities/variables";
 
 .chip {
   @include mixins.fontSize(fonts.$font-size-base);
@@ -9,49 +9,61 @@
   border-radius: variables.$border-radius-base;
   display: flex;
   width: fit-content;
-  padding: functions.calc-rem(6px 8px);
+  min-width: functions.calc-rem(56px);
+  padding: functions.calc-rem(8px 12px);
   align-items: center;
   justify-content: center;
-  background-color: var(--color-gray-200) !important;
+  background-color: var(--color-gray-50);
   color: var(--color-gray-500);
   font-weight: fonts.$font-weight-regular;
+  cursor: pointer;
+
+  &:hover {
+    border-color: var(--color-gray-300);
+  }
+
+  @include mixins.e(standard) {
+    width: 7.2rem;
+    max-width: 7.2rem;
+  }
 
   // #Info
   @include mixins.m(info) {
-    background-color: rgba(var(--color-info-rgb), .06) !important;
+    background-color: rgba(var(--color-info-rgb), .06);
     color: var(--color-info);
   }
 
   // #Warn
   @include mixins.m(warn) {
-    background-color: rgba(var(--color-warn-rgb), .06) !important;
-    color: var(--color-warn);
+    background-color: var(--color-warning-opacity);
+    color: var(--color-warning);
   }
 
   // #Danger
   @include mixins.m(danger) {
-    background-color: rgba(var(--color-error-rgb), .06) !important;
+    background-color: rgba(var(--color-error-rgb), .06);
     color: var(--color-error);
   }
 
   // #Success
   @include mixins.m(success) {
-    background-color: rgba(var(--color-success-rgb), .06) !important;
+    background-color: var(--color-success--opacity);
     color: var(--color-success);
   }
 
   // #Selected
   @include mixins.m(selected) {
     background-color: var(--color-brand-light) !important;
+
     &, * {
-      color: var(--color-white);
+      color: var(--color-white) !important;
       border-color: var(--color-brand-light);
-    }    
+    }
   }
 
   @include mixins.m(not-selected) {
-    border: 1px solid var(--color-gray-300);
+    border: 1px solid var(--color-gray-300) !important;
     background-color: var(--color-white) !important;
-    color: var(--color-black);
+    color: var(--color-black) !important;
   }
 }

package/src/assets/styles/scss/modules/_dialog.scss

@@ -1,5 +1,5 @@
-@use "../utilities/mixins";
 @use "../utilities/fonts";
+@use "../utilities/mixins";
 @use "../utilities/variables";
 
 .dialog {

package/src/assets/styles/scss/modules/_divider.scss

@@ -1,3 +1,4 @@
 .divider {
-  border-top-color: var(--color-gray-300);
+  border-top-color: var(--color-gray-100);
+  color: var(--color-gray-100);
 }

package/src/assets/styles/scss/modules/_form.scss

@@ -1,6 +1,7 @@
-@use "../utilities/mixins";
+@use "../utilities/helpers";
 @use "../utilities/fonts";
 @use "../utilities/functions";
+@use "../utilities/mixins";
 @use "../utilities/variables";
 
 $form-input-icon-size: 18px;
@@ -31,7 +32,7 @@ form {
 
     // #Label Note
     @include mixins.e(label-note) {
-      @include mixins.fontSize(fonts.$font-size-sm);
+      @include mixins.fontSize(fonts.$font-size-md);
 
       display: inline-block;
       margin-bottom: 0.25rem;
@@ -44,9 +45,9 @@ form {
       @include mixins.fontSize(fonts.$font-size-base);
       display: block;
       width: 100%;
-      padding: functions.calc-rem(8) functions.calc-rem(16);
-      border-radius: variables.$border-radius-base;
-      border: 1px solid var(--color-gray-500);
+      padding: functions.calc-rem(8px 16px);
+      border-radius: variables.$border-radius-medium;
+      border: 1px solid var(--color-gray-300);
       color: var(--color-black);
       line-height: fonts.$base-line-height;
 
@@ -54,19 +55,94 @@ form {
         border-color: var(--color-brand-dark);
       }
 
+      &:focus-visible {
+        outline: none;
+      }
+
       @include mixins.m(wrapper) {
         // wrapper
         display: flex;
         position: relative;
         line-height: 1;
+
+        @include mixins.m(fluid) {
+          width: fit-content;
+          max-width: 100%;
+          margin-left: auto; // pin the right edge, grow leftward
+          align-items: stretch;
+          overflow: hidden;
+          border: 1px solid var(--color-gray-300);
+          border-radius: variables.$border-radius-medium;
+          background-color: var(--color-white, #fff);
+
+          &:focus-within {
+            border-color: var(--color-brand-dark);
+          }
+
+          .form-field__input {
+            width: auto;
+            min-width: 0;
+            flex: 0 0 auto;
+            box-sizing: border-box;
+            border: 0;
+            border-radius: 0;
+            padding-right: 0;
+            text-align: right;
+            background-color: transparent;
+
+            &:focus {
+              border-color: transparent;
+            }
+          }
+
+          .form-field__input--suffix {
+            position: static !important;
+            top: auto;
+            right: auto;
+            flex: 0 0 auto;
+            display: inline-flex;
+            align-items: center;
+            transform: none;
+            margin-left: functions.calc-rem(4px); // gap between the value and the symbol
+            padding-right: functions.calc-rem(16px);
+            white-space: nowrap;
+            pointer-events: none;
+
+            &,
+            i,
+            .mat-icon {
+              @include mixins.fontSize(fonts.$font-size-base);
+
+              width: auto;
+              height: auto;
+            }
+          }
+        }
+      }
+
+      @include mixins.m(sizer) {
+        @include mixins.fontSize(fonts.$font-size-base);
+
+        position: absolute;
+        top: 0;
+        left: 0;
+        height: 0;
+        padding: 0 0 0 functions.calc-rem(16px);
+        border: 0;
+        box-sizing: border-box;
+        overflow: hidden;
+        visibility: hidden;
+        pointer-events: none;
+        white-space: pre;
+        line-height: fonts.$base-line-height;
       }
 
       @include mixins.m(suffix) {
         // suffix
         position: absolute !important;
         top: 50%;
-        right: functions.calc-rem(16);
-        color: var(--color-gray-500);
+        right: functions.calc-rem(16px);
+        color: var(--color-gray-300);
         transform: translateY(-50%);
 
         &,
@@ -83,13 +159,14 @@ form {
         @extend .form-field__input--suffix;
 
         right: unset;
-        left: functions.calc-rem(16);
+        left: functions.calc-rem(16px);
       }
 
       @include mixins.m(disabled) {
         // disabled
         background-color: var(--color-gray-100);
-        border-color: transparent;
+        opacity: .5;
+        pointer-events: none;
       }
 
       @include mixins.m(invalid) {
@@ -104,9 +181,9 @@ form {
       @include mixins.fontSize(fonts.$font-size-base);
       display: block;
       width: 100%;
-      padding: functions.calc-rem(16);
-      border-radius: variables.$border-radius-base;
-      border: 1px solid var(--color-gray-500);
+      padding: functions.calc-rem(16px);
+      border-radius: variables.$border-radius-medium;
+      border: 1px solid var(--color-gray-300);
       color: var(--color-black);
       line-height: fonts.$base-line-height;
 
@@ -125,8 +202,8 @@ form {
         // suffix
         position: absolute !important;
         top: 50%;
-        right: functions.calc-rem(16);
-        color: var(--color-gray-500);
+        right: functions.calc-rem(16px);
+        color: var(--color-gray-100);
         transform: translateY(-50%);
 
         &,
@@ -143,13 +220,82 @@ form {
         @extend .form-field__input--suffix;
 
         right: unset;
-        left: functions.calc-rem(16);
+        left: functions.calc-rem(16px);
+      }
+
+      @include mixins.m(disabled) {
+        // disabled
+        background-color: var(--color-gray-100);
+        opacity: .5;
+        pointer-events: none;
+      }
+    }
+
+    // #Range
+    @include mixins.e(range) {
+      @include mixins.fontSize(fonts.$font-size-base);
+      display: block;
+      width: 100%;
+      padding: functions.calc-rem(8px 16px);
+      color: var(--color-black);
+      line-height: fonts.$base-line-height;
+      border: none;
+
+      &:focus-visible {
+        outline: none;
+      }
+
+      @include mixins.m(wrapper) {
+        // wrapper
+        display: grid;
+        grid-template-columns: 1fr auto 1fr;
+        border-radius: functions.calc-rem(variables.$border-radius-large);
+        border: 1px solid var(--color-gray-300);
+        align-items: center;
+        line-height: 1;
+        background-color: var(--color-white);
+
+        &:focus-within {
+          border-color: var(--color-brand-dark);
+        }
+      }
+
+      @include mixins.m(suffix) {
+        // suffix
+        position: absolute !important;
+        top: 50%;
+        right: functions.calc-rem(16px);
+        color: var(--color-gray-100);
+        transform: translateY(-50%);
+
+        &,
+        i,
+        .mat-icon {
+          @include mixins.fontSize($form-input-icon-size);
+          width: functions.calc-rem($form-input-icon-size);
+          height: functions.calc-rem($form-input-icon-size);
+        }
+      }
+
+      @include mixins.m(prefix) {
+        // prefix
+        @extend .form-field__range--suffix;
+
+        right: unset;
+        left: functions.calc-rem(16px);
       }
 
       @include mixins.m(disabled) {
         // disabled
         background-color: var(--color-gray-100);
-        border-color: transparent;
+        opacity: .5;
+        pointer-events: none;
+      }
+
+      @include mixins.m(invalid) {
+        // invalid
+        border-color: var(--color-error) !important;
+        color: var(--color-error) !important;
       }
     }
 
@@ -157,26 +303,34 @@ form {
     @include mixins.m(invalid) {
       &,
       .form-field__input,
-      .form-field__textarea {
+      .form-field__textarea,
+      .form-field__range {
         color: var(--color-error);
         border-color: var(--color-error);
       }
+
+      &,
+      .form-field__range--wrapper {
+        border-color: var(--color-error);
+      }
     }
 
     // #Required
     @include mixins.m(required) {
       .form-field__label {
         &:after {
-          @extend %required !optional;
+          @extend %required;
         }
       }
     }
 
     // #Validation
     @include mixins.e(validation) {
-      padding-top: 0.5rem;
       @include mixins.fontSize(fonts.$font-size-xs);
+
+      padding-top: 0.5rem;
       color: var(--color-error);
+
       @include mixins.m(item) {
         padding-bottom: 0.6rem;
 
@@ -189,18 +343,12 @@ form {
     // #Subscript
     @include mixins.e(subscript) {
       @include mixins.m(wrapper) {
-        @extend %pseudos !optional;
+        @extend %pseudos;
 
         margin-top: 1.2rem;
       }
     }
 
-    &.disabled input,
-    &.disabled textarea {
-      background-color: var(--color-white-opacity-05);
-      border-color: var(--color-gray-300);
-    }
-
     .spinner {
       position: absolute;
       right: 0.25rem;

package/src/assets/styles/scss/modules/_icon.scss

@@ -1,3 +1,4 @@
+@use "../utilities/helpers";
 @use "../utilities/mixins";
 @use "../utilities/variables";
 
@@ -12,7 +13,7 @@
     @extend .icon;
 
     &:after {
-      @extend %pseudos !optional;
+      @extend %pseudos;
 
       border: 1px solid var(--color-gray-400);
       border-radius: variables.$border-radius-base;