@webitel/ui-sdk 0.9.66 → 1.0.3

package/src/components/organisms/wt-table/wt-table.vue

@@ -3,7 +3,7 @@
     <table class="wt-table__table">
       <thead class="wt-table__head">
       <tr class="wt-table__tr wt-table__tr__head" :style="columnsStyle">
-        <th class="wt-table__th__checkbox" v-if="selectable">
+        <th class="wt-table__th wt-table__th--checkbox" v-if="selectable">
           <wt-checkbox
             :selected="isAllSelected"
             @change="selectAll"
@@ -24,11 +24,13 @@
             class="wt-table__th__sort-arrow wt-table__th__sort-arrow--asc"
             v-if="sortable"
             icon="sort-arrow-up"
+            size="sm"
           ></wt-icon>
           <wt-icon
             class="wt-table__th__sort-arrow wt-table__th__sort-arrow--desc"
             v-if="sortable"
             icon="sort-arrow-down"
+            size="sm"
           ></wt-icon>
         </th>
         <th class="wt-table__th__actions" v-if="gridActions">
@@ -45,7 +47,7 @@
         :key="dataKey"
         :style="columnsStyle"
       >
-        <td class="wt-table__td__checkbox" v-if="selectable">
+        <td class="wt-table__td wt-table__td--checkbox" v-if="selectable">
           <wt-checkbox
             v-model="row._isSelected"
           ></wt-checkbox>
@@ -69,7 +71,7 @@
 
       <tfoot class="wt-table__foot" v-if="isTableFooter">
       <tr class="wt-table__tr wt-table__tr__foot" :style="columnsStyle">
-<!--        empty checkbox column -->
+        <!--        empty checkbox column -->
         <th class="wt-table__th__checkbox" v-if="selectable"></th>
         <td
           class="wt-table__td"
@@ -121,7 +123,7 @@ export default {
 
     dataHeaders() {
       return this.headers
-        .filter((header) => header.show === undefined || header.show);
+                 .filter((header) => header.show === undefined || header.show);
     },
 
     columnsStyle() {
@@ -168,9 +170,10 @@ export default {
 }
 
 .wt-table__head {
-  //display: block;
-  border-bottom: var(--table-head-borer-bottom);
-  border-color: var(--table-head-borer-color);
+  display: block;
+  border-radius: var(--border-radius);
+  border: var(--table-head-border);
+  border-color: var(--table-head-border-color);
 }
 
 //.wt-table__head {
@@ -181,7 +184,6 @@ export default {
   display: grid;
   grid-template-columns: repeat(auto-fit, var(--table-col-min-width));
   grid-column-gap: var(--table-column-gap);
-  min-height: var(--table-min-height);
   padding: var(--table-row-padding);
   transition: var(--transition);
 
@@ -192,12 +194,14 @@ export default {
 
 .wt-table__th,
 .wt-table__td {
-  @extend %typo-body-md;
+  @extend %typo-body-1;
   display: flex;
   align-items: center;
   padding: 0;
   width: 100%;
   max-width: 100%;
+  min-height: var(--table-min-height);
+  height: fit-content;
   overflow-wrap: break-word;
   word-break: break-all;
 
@@ -209,7 +213,6 @@ export default {
 }
 
 .wt-table__th {
-  min-height: 24px; // prevent sort arrow toggling layout shift
   font-weight: normal;
 
   &--sortable {
@@ -235,7 +238,7 @@ export default {
 }
 
 .wt-table__foot {
-  border-top: var(--table-head-borer-bottom);
-  border-color: var(--table-head-borer-color);
+  border-top: var(--table-head-border);
+  border-color: var(--table-head-border-color);
 }
 </style>

package/src/components/organisms/wt-table-actions/wt-table-actions.vue

@@ -82,9 +82,7 @@ export default {
   display: flex;
   align-items: center;
   flex-wrap: wrap;
-
-  & > * {
-    margin-left: var(--table-actions-icon-gap);
-  }
+  gap: var(--table-actions-icon-gap);
+  padding: var(--table-actions-padding);
 }
 </style>

package/src/components/organisms/wt-table-column-select/wt-table-column-select.vue

@@ -111,6 +111,6 @@ export default {
 }
 
 .wt-table-column-select__popup__item {
-  margin-bottom: var(--component-spacing);
+  margin-bottom: var(--spacing-xs);
 }
 </style>

package/src/css/components/_components.scss

@@ -1,4 +1,4 @@
-@import "atoms/wt-badge/variables";
+@import 'atoms/wt-chip/variables';
 @import "atoms/wt-button/variables";
 @import "atoms/wt-icon/variables";
 @import "atoms/wt-indicator/variables";

package/src/css/components/atoms/wt-button/_variables.scss

@@ -1,36 +1,34 @@
-%typo-btn {
-  font: {
-    family: 'Montserrat Semi', monospace;
-    size: 12px;
-  }
-  line-height: 14px;
-}
-
-%typo-btn-lg {
-  font: {
-    family: 'Montserrat Semi', monospace;
-    size: 20px;
-  }
-  line-height: 24px;
-}
 
 :root {
-  --btn-padding: 11px 19px;
-  --btn-lg-padding: 10px 29px;
-  --btn-border: 1px solid;
+  --btn-min-width: 90px;
+  --btn-border-size: 2px;
+  --btn-padding: var(--spacing-xs) var(--spacing-sm);
+
+  --btn-padding--size-md: var(--btn-padding);
+  --btn-padding--size-sm: var(--spacing-2xs) var(--spacing-xs);
+
+  --btn-padding--outline:
+    calc(var(--spacing-xs) - var(--btn-border-size))
+    calc(var(--spacing-sm) - var(--btn-border-size));
+  --btn-padding--size-md--outline: var(--btn-padding--outline);
+  --btn-padding--size-sm--outline:
+    calc(var(--spacing-2xs) - var(--btn-border-size))
+    calc(var(--spacing-xs) - var(--btn-border-size));
+
+  --btn-border: var(--btn-border-size) solid;
 
   // BUTTON COLORS
-  --btn-dark-font-color: #000;
-  --btn-light-font-color: #fff;
+  --btn-dark-font-color: var(--text-primary-color);
+  --btn-light-font-color: var(--text-contrast-color);
 
-  --btn-primary-color: var(--main-accent-color);
-  --btn-primary--hover-color: #EFB917;
+  --btn-accent-color: hsla(var(--_accent-color), var(--_opacity--default));
+  --btn-accent--hover-color: hsla(var(--_accent-color), var(--_opacity--hover));
 
   --btn-secondary-color: hsla(var(--_secondary-color), var(--_opacity--default));
   --btn-secondary--hover-color: hsla(var(--_secondary-color), var(--_opacity--hover));
 
-  --btn-disabled-color: var(--disabled-color);
-  --btn-disabled-bg-color: transparent;
+  --btn-disabled-font-color: var(--secondary-color-50);
+  --btn-disabled-color: hsla(var(--_secondary-color-hue), 15%, 80%, var(--_opacity--active));
 
   --btn-true-color: var(--true-color);
   --btn-true--hover-color: var(--true--hover-color);

package/src/css/components/atoms/wt-chip/_variables.scss

@@ -0,0 +1,7 @@
+
+:root {
+  --chip-padding: var(--spacing-2xs) var(--spacing-xs);
+  --chip-border-radius: var(--spacing-lg);
+  --chip-bg-color: var(--accent-secondary-color);
+  --chip-bg-color--outline: var(--secondary-color);
+}

package/src/css/components/atoms/{wt-badge/wt-badge.scss → wt-chip/wt-chip.scss}

@@ -1,17 +1,18 @@
-.wt-badge {
-  @extend %typo-body-md;
+.wt-chip {
+  @extend %typo-caption;
 
   display: inline-block;
-  padding: var(--badge-padding);
-  background: var(--badge-bg-color);
-  border-radius: var(--badge-border-radius);
+  padding: var(--chip-padding);
+  color: var(--text-primary-color);
+  border-radius: var(--chip-border-radius);
+  background: var(--chip-bg-color);
 
   &--main-color {
-    background: var(--badge-bg-color);
+    background: var(--chip-bg-color);
   }
 
   &--outline-color {
-    background: var(--badge-bg-color--outline);
+    background: var(--chip-bg-color--outline);
   }
 
   &--accent-color {

package/src/css/components/atoms/wt-context-menu/_variables.scss

@@ -6,5 +6,5 @@
 
   --context-menu-background-color: var(--main-color);
 
-  --context-menu-option-padding: var(--spacing--sm);
+  --context-menu-option-padding: var(--spacing-xs);
 }

package/src/css/components/atoms/wt-divider/_variables.scss

@@ -1,5 +1,5 @@
 
 :root {
   --divider-border: 1px solid;
-  --divider-border-color: var(--main-page-bg-color);
+  --divider-border-color: var(--page-bg-color);
 }

package/src/css/components/atoms/wt-indicator/_variables.scss

@@ -1,6 +1,10 @@
 :root {
-  --indicator-size: 14px;
-  --indicator-text-margin: 10px;
+  --indicator-dot-size--size-sm: var(--spacing-xs);
+  --indicator-dot-size--size-md: var(--spacing-sm);
+  --indicator-dot-size: var(--indicator-size--size-md);
+  --indicator-dot-offset: var(--spacing-2xs);
+
+  --indicator-text-margin: var(--spacing-2xs);
   
   --indicator-primary-color: var(--accent-color);
 

package/src/css/components/atoms/wt-label/_variables.scss

@@ -1,5 +1,4 @@
 
 :root {
-  --label-margin: 10px;
   --label--invalid-color: var(--false-color);
 }

package/src/css/components/atoms/wt-loader/_variables.scss

@@ -2,7 +2,7 @@
 :root {
   --loader-size: 44px;
   --loader-dot-size: 6px;
-  --loader-path-color: var(--main-primary-accent-color);
-  --loader-dot-color: var(--main-accent-color);
+  --loader-path-color: var(--contrast-color);
+  --loader-dot-color: var(--accent-color);
   --loader-animation-duration: 3s;
 }

package/src/css/components/atoms/wt-rounded-action/_variables.scss

@@ -1,30 +1,7 @@
 :root {
-  --rounded-action-size--lg: 60px;
-  --rounded-action-size--md: 50px; // default
-  --rounded-action-size--sm: 40px;
-  --rounded-action-border: 1px solid;
+  --rounded-action-padding: var(--spacing-xs);
 
-  // BUTTON COLORS
-  --rounded-action-primary-color: var(--main-accent-color);
-  --rounded-action-primary--hover-color: #EFB917;
+  --rounded-action-padding--outline: calc(var(--spacing-xs) - var(--btn-border-size));
 
-  --rounded-action-secondary-color: #808080;
-  --rounded-action-secondary-bg-color: transparent;
-  --rounded-action-secondary--hover-color: #000;
-  --rounded-action-secondary--active-color: #000;
-
-  --rounded-action-disabled-color: var(--disabled-color);
-  --rounded-action-disabled-bg-color: transparent;
-
-  --rounded-action-true-color: var(--true-color);
-  --rounded-action-true--hover-color: var(--true--hover-color);
-
-  --rounded-action-false-color: var(--false-color);
-  --rounded-action-false--hover-color: var(--false--hover-color);
-
-  --rounded-action-hold-color: var(--hold-color);
-  --rounded-action-hold--hover-color: var(--hold--hover-color);
-
-  --rounded-action-transfer-color: var(--transfer-color);
-  --rounded-action-transfer--hover-color: var(--transfer--hover-color);
+  --rounded-action-bg-color: var(--main-color);
 }

package/src/css/components/atoms/wt-tooltip/_variables.scss

@@ -1,10 +1,12 @@
 
 :root {
-  --tooltip-padding: 10px 20px;
+  --tooltip-padding: var(--spacing-3xs) var(--spacing-2xs);
   --tooltip-z-index: 100;
 
-  --tooltip-light-text-color: #000;
-  --tooltip-light-bg-color: #fff;
-  --tooltip-dark-text-color: #fff;
-  --tooltip-dark-bg-color: #464858;
+  --tooltip-light-text-color: var(--text-primary-color);
+  --tooltip-light-bg-color: var(--main-color);
+  --tooltip-dark-text-color: var(--text-contrast-color);
+  --tooltip-dark-bg-color: var(--contrast-color);
+
+  --tooltip-elevation: var(--elevation-10);
 }

package/src/css/components/molecules/wt-button-select/_variables.scss

@@ -1,19 +1,16 @@
 .wt-button-select {
-  --button-select-button-padding: var(--spacing--md) var(--spacing--lg);
-  /*
-  Reduce 1px from "spacing--md" for align a difference between arrow size in "wt-button-select__select"
-  and line-height of text in "wt-button-select__button"
-  */
-  --button-select-icon-button-padding: calc(var(--spacing--sm) - 1px);
+  --button-select-button-padding: var(--spacing-xs) var(--spacing-sm);
+
+  --button-select-icon-button-padding: var(--spacing-xs);
 
   --button-select-buttons-gap: 1px;
 
-  --button-select-icon-color-primary: var(--btn-primary-color);
+  --button-select-icon-color-primary: var(--btn-accent-color);
   --button-select-icon-color-secondary: var(--btn-secondary-color);
   --button-select-icon-color-dark: var(--btn-dark-font-color);
   --button-select-icon-color-ligth: var(--main-color);
 
-  --button-select-icon-color-primary--hover: var(--btn-primary--hover-color);
+  --button-select-icon-color-primary--hover: var(--btn-accent--hover-color);
   --button-select-icon-color-danger--hover: var(--btn-false--hover-color);
   --button-select-icon-color-success--hover: var(--btn-true--hover-color);
   --button-select-icon-color-transfer--hover: var(--btn-transfer--hover-color);

package/src/css/components/molecules/wt-checkbox/_variables.scss

@@ -1,4 +1,4 @@
 
 :root {
-  --checkbox-icon-margin: 10px;
+  --checkbox-icon-margin: var(--spacing-xs);
 }

package/src/css/components/molecules/wt-datepicker/_variables.scss

@@ -1,20 +1,21 @@
 
 :root {
-  --datepicker-padding: 9px 44px;
-  --datepicker-icon-margin: 10px;
+  --datepicker-padding:
+    var(--input-padding)
+    calc(
+      var(--input-padding)
+    + var(--icon-md-size)
+    + var(--spacing-xs)
+    );
+  --datepicker-icon-margin: var(--spacing-xs);
   --datepicker-border: 1px solid;
 
-  --datepicker-cell-size: 38px;
-  --datepicker-cell-margin: 1px;
-  --datepicker-calendar-padding: 10px;
-  --datepicker-calendar-header-margin: 20px;
-  --datepicker-width: calc(
-          7 * var(--datepicker-cell-size)
-          + 2 * var(--datepicker-calendar-padding)
-          + 8px
-          + 7 * 2 * var(--datepicker-cell-margin)); // 7 cells * 2 sides
+  --datepicker-cell-size: var(--spacing-lg);
+  --datepicker-cell-gap: var(--spacing-xs);
+  --datepicker-calendar-padding: var(--spacing-xs);
+  --datepicker-calendar-header-margin: var(--spacing-xs);
 
-  --datepicker-selected-cell-text-color: var(--main-primary-color);
-  --datepicker-selected-cell-bg-color: var(--main-accent-color);
-  --datepicker-cell--hover-color: #F9F9F9;
+  --datepicker-selected-cell-text-color: var(--main-color);
+  --datepicker-selected-cell-bg-color: var(--accent-color);
+  --datepicker-cell--hover-color: var(--secondary-color-50);
 }

package/src/css/components/molecules/wt-datepicker/datepicker-calendar.scss

@@ -1,9 +1,9 @@
 .vdp-datepicker__calendar {
-  width: var(--datepicker-width);
+  width: fit-content;
   right: 0;
   padding: var(--datepicker-calendar-padding);
-  line-height: var(--datepicker-cell-size);
   border-radius: var(--border-radius);
+  box-shadow: var(-elevation-1);
 
   header {
     display: flex;
@@ -13,8 +13,7 @@
     line-height: 0;
 
     .day__month_btn {
-      @extend %typo-strong-lg;
-      padding-top: 5px;
+      @extend %typo-body-1;
     }
 
     .prev, .next {
@@ -22,47 +21,39 @@
       text-indent: 0;
       color: transparent;
       cursor: pointer;
+      //background: red !important;
+      border: none !important; // hide default arrows
 
       &:hover {
-        background-color: transparent !important;
+        background: none;
       }
 
-      &:after {
-        content: '';
-        position: absolute;
-        top: 5px;
-        width: 24px;
-        height: 24px;
-        background: url("../../../assets/icons/arrow-down--md.svg") center center;
-        background-size: contain;
-        border: none !important; // hide default arrows
-        transform: translateX(-50%) rotate(90deg);
-      }
-
-      &:hover:after {
-        background: url("../../../assets/icons/arrow-down--active--md.svg") center center;
+      &:before, &:after {
+        display: none;
       }
     }
+  }
 
-    .next:after {
-      transform: translateX(-50%) rotate(-90deg);
-    }
+  // cells wrapper
+  & > div:last-child {
+    display: grid;
+    grid-template-columns: repeat(7, 32px);
+    grid-gap: var(--datepicker-cell-gap);
   }
 
   .cell {
-    @extend %typo-body-lg;
+    @extend %typo-body-1;
+    display: flex;
+    align-items: center;
+    justify-content: center;
     width: var(--datepicker-cell-size);
     height: var(--datepicker-cell-size);
-    margin: 1px;
     padding: 0;
-    border: none;
-    line-height: var(--datepicker-cell-size);
+    border: none !important;
     transition: var(--transition);
 
     &.day-header {
-      @extend %typo-body-sm;
-      height: auto;
-      letter-spacing: 0.4px;
+      @extend %typo-caption;
       color: var(--form-label-color);
     }
 
@@ -70,10 +61,8 @@
       border-radius: var(--border-radius);
 
       &.selected {
-        @extend %typo-strong-lg;
         color: var(--datepicker-selected-cell-text-color);
         background: var(--datepicker-selected-cell-bg-color) !important;
-        line-height: var(--datepicker-cell-size);
       }
 
       &:not(.blank):not(.disabled).day:hover,

package/src/css/components/molecules/wt-datetimepicker/_variables.scss

@@ -1,12 +1,12 @@
 
 :root {
-  --datetimepicker-padding: 9px 44px;
-  --datetimepicker-icon-margin: 10px;
+  --datetimepicker-padding: var(--datepicker-padding);
+  --datetimepicker-icon-margin: var(--datepicker-icon-margin);
   --datetimepicker-border: 1px solid;
 
-  --datetimepicker-form-padding: 10px;
-  --datetimepicker-form-bg-color: var(--main-primary-color);
+  --datetimepicker-form-padding: var(--spacing-xs);
+  --datetimepicker-form-bg-color: var(--main-color);
   --datetimepicker-form-z-index: 5; // overflow selects' arrow
 
-  --datetimepicker-form-content-margin: 10px;
+  --datetimepicker-form-content-margin: var(--spacing-xs);
 }

package/src/css/components/molecules/wt-input/_variables.scss

@@ -1,8 +1,8 @@
 
 :root {
-  --input-padding: 9px;
+  --input-padding: calc(var(--spacing-xs) - 1px); // - border
   --input-border: 1px solid;
-  --input-icon-margin: 10px;
+  --input-icon-margin: var(--spacing-xs);
 
-  --input-after-wrapper-gap: var(--spacing--xs);
+  --input-after-wrapper-gap: var(--spacing-2xs);
 }

package/src/css/components/molecules/wt-notification/_variables.scss

@@ -2,9 +2,9 @@
 :root {
   --notification-min-width: 30vw;
   --notification-max-width: 40vw;
-  --notification-padding: 10px;
-  --notification-icon-margin: 10px;
+  --notification-padding: var(--spacing-xs);
+  --notification-icon-margin: var(--spacing-xs);
 
-  --notification-text-color: #000;
-  --notification-bg-color: #fff;
+  --notification-text-color: var(--text-primary-color);
+  --notification-bg-color: var(--main-color);
 }

package/src/css/components/molecules/wt-popup/_variables.scss

@@ -1,12 +1,20 @@
 
 :root {
   --popup-wrapper-z-index: 11;
-  --popup-shadow-opacity: 0.8;
-  --popup-max-height: 80vh;
-  --popup-padding: 10px;
-  --popup-header-padding: 0;
-  --popup-header-title-padding: 15px 20px 0;
-  --popup-main-padding: 10px 20px;
-  --popup-actions-padding: 10px 20px;
-  --popup-bg-color: var(--main-primary-color);
+
+  --popup-shadow-opacity: 0.5;
+  --popup-shadow-color: hsla(var(--_contrast-color), var(--popup-shadow-opacity));
+
+  --popup-max-height: 80%;
+
+  --popup-bg-color: var(--main-color);
+  --popup-sections-gap: var(--spacing-sm);
+  --popup-padding: var(--popup-sections-gap);
+
+  --popup-header-padding: var(--spacing-xs);
+  --popup-header-bg-color: var(--secondary-color);
+
+  --popup-main-section-padding-right: var(--spacing-xs); // scroll offset
+
+  --popup-actions-padding: var(--spacing-xs);
 }

package/src/css/components/molecules/wt-progress-bar/_variables.scss

@@ -1,8 +1,8 @@
 
 :root {
-  --progress-bar-height: 16px;
-  --progress-bar-padding: 2px;
-  --progress-bar-box-shadow: inset 1px 1px 1px rgba(0, 0, 0, 0.05), inset -1px -1px 1px rgba(255, 255, 255, 0.5), inset 0px 0px 8px rgba(0, 0, 0, 0.1);
+  --progress-bar-height: 12px;
+  --progress-bar-padding: var(--spacing-3xs);
+  --progress-bar-border-radius: var(--progress-bar-padding);
 
   --progress-bar-bg-color--primary: var(--accent-color);
   --progress-bar-bg-color--secondary: var(--secondary-color);

package/src/css/components/molecules/wt-radio/_variables.scss

@@ -1,6 +1,6 @@
 
 :root {
-  --radio-icon-margin: 10px;
+  --radio-icon-margin: var(--spacing-xs);
   --radio-checkmark-size: 18px;
   --radio-bullet-size: 8px;
   --radio-border: 2px solid;

package/src/css/components/molecules/wt-search-bar/_variables.scss

@@ -1,4 +1,8 @@
 
 :root {
-  --search-bar-padding: 9px 35px 9px 43px; // sides 10px + 24/16px icon + 10px margin
+  --search-bar-padding:
+    var(--input-padding)
+    calc(var(--input-padding) + var(--icon-sm-size) + var(--spacing-xs))
+    var(--input-padding)
+    calc(var(--input-padding) + var(--icon-md-size) + var(--spacing-xs));
 }