ecabs-components 2.0.0-alpha.3 → 2.0.0-alpha.6

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

@@ -1,14 +1,28 @@
+@use "../utilities/helpers";
+@use "../utilities/functions";
+@use "../utilities/mixins";
+@use "../utilities/variables";
+
 .autocomplete-ui {
-  box-shadow: $box-shadow-default;
-  border-radius: $border-radius-base;
-  display: flex;
-  flex-direction: column;
+  position: relative;
 
-  @include m(item) {
-    @include fontSize(16px);
+  @include mixins.e(container) {
     width: 100%;
-    padding: calc-rem(16);
+    background-color: var(--color-white);
+    box-shadow: variables.$box-shadow-default;
+    border-radius: functions.calc-rem(variables.$border-radius-large);
+    z-index: 1000;
+  }
+
+  @include mixins.m(item) {
+    @include mixins.fontSize(14px);
+
+    position: relative;
+    background-color: var(--color-white);
+    width: 100%;
+    padding: functions.calc-rem(12px);
     color: var(--color-black);
+    cursor: pointer;
 
     &::after {
       @extend %pseudos;
@@ -17,7 +31,7 @@
       left: 0;
       right: 0;
       height: 1px;
-      background-color: var(--color-gray-100);
+      background-color: var(--color-gray-50);
     }
 
     &:last-of-type {
@@ -25,5 +39,9 @@
         background-color: transparent;
       }
     }
+
+    &.active {
+      background-color: var(--color-brand-light2)
+    }
   }
 }

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

@@ -1,13 +1,19 @@
+@use "../utilities/helpers";
+@use "../utilities/fonts";
+@use "../utilities/functions";
+@use "../utilities/mixins";
+@use "../utilities/variables";
+
 .btn {
-  @include fontSize($font-size-base);
+  @include mixins.fontSize(fonts.$font-size-base);
 
   border: 0;
-  min-width: calc-rem(111px);
-  min-height: calc-rem(42px);
+  min-width: functions.calc-rem(111px);
+  min-height: functions.calc-rem(42px);
   width: max-content;
-  padding: calc-rem(8px 24px);
-  font-weight: $font-weight-regular;
-  line-height: $base-line-height;
+  padding: functions.calc-rem(8px 24px);
+  font-weight: fonts.$font-weight-semibold;
+  line-height: fonts.$base-line-height;
 
   &:after {
     @extend %pseudos;
@@ -17,11 +23,53 @@
     right: 0;
     bottom: 0;
     left: 0;
-    border-radius: $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 e(primary) {
+  @include mixins.m(primary) {
     background-color: var(--color-brand-dark);
     color: var(--color-white);
 
@@ -29,7 +77,7 @@
       background-color: rgba(var(--color-brand-dark-rgb), .88);
     }
 
-    @include m(outline) {
+    @include mixins.m(outline) {
       background-color: transparent;
       border-color: var(--color-brand-dark);
       color: var(--color-brand-dark);
@@ -39,25 +87,25 @@
       }
 
       &:hover {
-        background-color: var(--color-gray-200);
+        background-color: var(--color-gray-50);
       }
     }
 
-    @include m(link) {
-      @extend .btn__primary--outline;
+    @include mixins.m(link) {
+      @extend .btn--primary--outline;
 
       &:after {
         border-color: transparent;
       }
 
       &:hover {
-        background-color: var(--color-gray-200);
+        background-color: var(--color-gray-50);
       }
     }
   }
 
   /* #Secondary */
-  @include e(secondary) {
+  @include mixins.m(secondary) {
     background-color: var(--color-brand-light);
     color: var(--color-white);
 
@@ -65,7 +113,7 @@
       background-color: rgba(var(--color-brand-light-rgb), .88);
     }
 
-    @include m(outline) {
+    @include mixins.m(outline) {
       background-color: transparent;
       border-color: var(--color-brand-light);
       color: var(--color-brand-light);
@@ -75,12 +123,12 @@
       }
 
       &:hover {
-        background-color: var(--color-gray-200);
+        background-color: var(--color-gray-50);
       }
     }
 
-    @include m(link) {
-      @extend .btn__secondary--outline;
+    @include mixins.m(link) {
+      @extend .btn--secondary--outline;
 
       &:after {
         border-color: transparent;
@@ -89,7 +137,7 @@
   }
 
   /* #Warn */
-  @include e(warn) {
+  @include mixins.m(warn) {
     background-color: var(--color-error);
     color: var(--color-white);
 
@@ -97,7 +145,7 @@
       background-color: rgba(var(--color-error-rgb), .88);
     }
 
-    @include m(outline) {
+    @include mixins.m(outline) {
       background-color: transparent;
       border-color: var(--color-error);
       color: var(--color-error);
@@ -107,12 +155,12 @@
       }
 
       &:hover {
-        background-color: var(--color-gray-200);
+        background-color: var(--color-gray-50);
       }
     }
 
-    @include m(link) {
-      @extend .btn__warn--outline;
+    @include mixins.m(link) {
+      @extend .btn--warn--outline;
 
       &:after {
         border-color: transparent;
@@ -121,15 +169,15 @@
   }
 
   /* #Success */
-  @include 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);
     }
 
-    @include m(outline) {
+    @include mixins.m(outline) {
       background-color: transparent;
       border-color: var(--color-success);
       color: var(--color-success);
@@ -139,12 +187,12 @@
       }
 
       &:hover {
-        background-color: var(--color-gray-200);
+        background-color: var(--color-gray-50);
       }
     }
 
-    @include m(link) {
-      @extend .btn__warn--outline;
+    @include mixins.m(link) {
+      @extend .btn--warn--outline;
 
       &:after {
         border-color: transparent;
@@ -153,29 +201,28 @@
   }
 
   /* #Group */
-  @include e(group) {
+  @include mixins.e(group) {
     display: flex;
     width: 100%;
     align-items: center;
     column-gap: 1rem;
+    margin-top: 1.2rem;
 
-    @include media-q(small) {
+    @include mixins.media-q(small) {
       display: flex;
       flex-direction: column;
       gap: 1.2rem;
     }
 
-    margin-top: 1.2rem;
-
     // Button group
-    @include m(item) {
-      @include media-q(small) {
+    @include mixins.m(item) {
+      min-width: functions.calc-rem(100);
+
+      @include mixins.media-q(small) {
         width: 100%;
         margin-right: 0;
       }
 
-      min-width: calc-rem(100);
-
       &:last-of-type {
         margin-right: 0;
       }
@@ -183,14 +230,14 @@
   }
 
   /* #Disabled */
-  @include e(disabled) {
+  @include mixins.e(disabled) {
     background-color: var(--color-gray-300);
     color: var(--color-gray-400);
     cursor: not-allowed;
     pointer-events: none;
     user-select: none;
 
-    @include m(outline) {
+    @include mixins.m(outline) {
       @extend .btn__disabled;
 
       background-color: transparent;
@@ -210,21 +257,30 @@
   }
 
   /* #Icon */
-  @include e(with-icon) {
-    @include m(wrapper) {
+  @include mixins.e(with-icon) {
+    @include mixins.m(wrapper) {
       display: flex;
       align-items: center;
       justify-content: center;
-
-      i, .mat-icon {
-        display: inline-block;
-        margin-right: .6rem;
-      }
+      gap: .6rem;
     }
   }
 
   /* #Large */
-  @include m(lg) {
-    padding: calc-rem(16 24);
+  @include mixins.m(lg) {
+    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,23 +1,51 @@
+@use "../utilities/fonts";
+@use "../utilities/functions";
+@use "../utilities/mixins";
+@use "../utilities/variables";
+
 .card {
-  box-shadow: $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 m(subtitle) {
-    @include fontSize($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 m(title) {
-    @include fontSize($font-heading-xs);
+  @include mixins.e(header) {
+    padding: functions.calc-rem(0 0 12px 0);
+  }
 
+  @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: $font-weight-semibold;
+    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 e(content) {
-    padding: calc-rem(32 24);
+  @include mixins.e(content) {
+    padding: functions.calc-rem(20px 0 0 0);
   }
 }

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

@@ -1,53 +1,69 @@
+@use "../utilities/fonts";
+@use "../utilities/functions";
+@use "../utilities/mixins";
+@use "../utilities/variables";
+
 .chip {
-  @include fontSize($font-size-base);
+  @include mixins.fontSize(fonts.$font-size-base);
 
-  border-radius: $border-radius-base;
+  border-radius: variables.$border-radius-base;
   display: flex;
   width: fit-content;
-  padding: 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);
+  background-color: var(--color-gray-50);
   color: var(--color-gray-500);
-  font-weight: $font-weight-regular;
+  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 m(info) {
+  @include mixins.m(info) {
     background-color: rgba(var(--color-info-rgb), .06);
     color: var(--color-info);
   }
 
   // #Warn
-  @include m(warn) {
-    background-color: rgba(var(--color-warn-rgb), .06);
-    color: var(--color-warn);
+  @include mixins.m(warn) {
+    background-color: var(--color-warning-opacity);
+    color: var(--color-warning);
   }
 
   // #Danger
-  @include m(danger) {
+  @include mixins.m(danger) {
     background-color: rgba(var(--color-error-rgb), .06);
     color: var(--color-error);
   }
 
   // #Success
-  @include m(success) {
-    background-color: rgba(var(--color-success-rgb), .06);
+  @include mixins.m(success) {
+    background-color: var(--color-success--opacity);
     color: var(--color-success);
   }
 
   // #Selected
-  @include m(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);
     }
-
-    background-color: var(--color-brand-light);
   }
 
-  @include m(not-selected) {
-    border: 1px solid var(--color-gray-300);
-    background-color: var(--color-white);
-    color: var(--color-black);
+  @include mixins.m(not-selected) {
+    border: 1px solid var(--color-gray-300) !important;
+    background-color: var(--color-white) !important;
+    color: var(--color-black) !important;
   }
 }

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

@@ -1,7 +1,10 @@
-@import "../utilities/index";
+@use "../utilities/index";
+@use "../utilities/functions";
+@use "../utilities/mixins";
+
 
 .datepicker-ui {
-  @include e(toggle) {
+  @include mixins.e(toggle) {
     position: absolute !important;
     right: 0;
     line-height: 1.25;
@@ -27,7 +30,7 @@ ecabs-date-picker {
       flex: 1;
       padding-left: 10px;
       vertical-align: top;
-      max-width: calc-rem(160);
+      max-width: functions.calc-rem(160);
 
       ecabs-timepicker .timeInputWrapper {
         display: block;
@@ -89,7 +92,7 @@ ecabs-date-picker {
       background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDI1LjQuMSwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IgoJIHZpZXdCb3g9IjAgMCA0OCA0OCIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgNDggNDg7IiB4bWw6c3BhY2U9InByZXNlcnZlIj4KPHN0eWxlIHR5cGU9InRleHQvY3NzIj4KCS5zdDB7ZmlsbDojNkI2RDczO30KPC9zdHlsZT4KPHBhdGggY2xhc3M9InN0MCIgZD0iTTksNDRjLTAuOCwwLTEuNS0wLjMtMi4xLTAuOUM2LjMsNDIuNSw2LDQxLjgsNiw0MVYxMGMwLTAuOCwwLjMtMS41LDAuOS0yLjFTOC4yLDcsOSw3aDMuMlY0aDMuMnYzaDE3VjRoMy4ydjMKCUgzOWMwLjgsMCwxLjUsMC4zLDIuMSwwLjlDNDEuNyw4LjUsNDIsOS4yLDQyLDEwdjMxYzAsMC44LTAuMywxLjUtMC45LDIuMUM0MC41LDQzLjcsMzkuOCw0NCwzOSw0NEg5eiBNOSw0MWgzMGwwLDBsMCwwVjE5LjVIOVY0MQoJTDksNDFMOSw0MXogTTksMTYuNWgzMFYxMGwwLDBsMCwwSDlsMCwwbDAsMFYxNi41eiBNOSwxNi41VjEwbDAsMGwwLDBsMCwwbDAsMFYxNi41eiIvPgo8L3N2Zz4K);
       background-position: center center;
       background-repeat: no-repeat;
-      background-size: calc-rem(22);
+      background-size: functions.calc-rem(22);
 
       &.disabled {
         cursor: not-allowed;

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

@@ -1,15 +1,19 @@
+@use "../utilities/fonts";
+@use "../utilities/mixins";
+@use "../utilities/variables";
+
 .dialog {
-  @include e(title) {
-    @include fontSize($font-heading-xs);
+  @include mixins.e(title) {
+    @include mixins.fontSize(fonts.$font-heading-xs);
 
-    font-weight: $font-weight-semibold;
+    font-weight: fonts.$font-weight-semibold;
     color: var(--color-brand-dark);
-    line-height: $base-line-height;
+    line-height: fonts.$base-line-height;
   }
 
-  @include m(maps) {
+  @include mixins.m(maps) {
     padding: 1px;
-    border-radius: $border-radius-base * 2;
+    border-radius: variables.$border-radius-base * 2;
     background: #9cc0f9;
   }
 }

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);
 }