@webitel/ui-sdk 0.9.65 → 1.0.2

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(--main-secondary-accent-color);
+  --chip-bg-color--outline: var(--main-outline-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 {
@@ -22,6 +23,10 @@
     background: var(--secondary-color);
   }
 
+  &--secondary-50-color {
+    background: var(--secondary-color-50);
+  }
+
   &--success-color {
     background: var(--true-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-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-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));
 }

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

@@ -1,25 +1,61 @@
 
 :root {
-  --select-caret-top-pos: 7px;
-  --select-caret-right-pos: 10px;
+  --select-caret-top-pos: var(--spacing-xs);
+  --select-caret-right-pos: var(--spacing-xs);
   --select-caret-z-index: 1;
 
-  --select-clear-top-pos: 11px;
-  --select-clear-right-pos: calc(10px + (var(--icon-md-size) + var(--select-caret-right-pos))); // 10px spacing + caret icon + caret right pos
+  --select-clear-top-pos: var(--spacing-xs);
+
+  --select-clear-right-pos: calc(
+    var(--input-padding)
+    + var(--icon-md-size)
+    + var(--select-caret-right-pos)
+    ); // spacing + caret icon + caret right pos
+
   --select-clear-z-index: var(--select-caret-z-index);
 
-  --select-tags-min-height: 38px;
-  --select-tags-padding: 9px calc(10px + var(--icon-md-size) + var(--select-caret-right-pos)) 9px 9px; // right pos = 10px spacing + caret icon size + caret offset
-  --select-tags-padding--clearable: 9px calc(10px + var(--icon-sm-size) + var(--select-clear-right-pos)) 9px 9px; // right pos = 10px spacing + clear icon size + clear offset
-  --select-tags-border: var(--input-border);
+  --select-tags-min-height: calc(24px + var(--spacing-xs) * 2); // 24px %typo-body-1 line-height
+
+  --select-tags-padding:
+    var(--input-padding)
+    calc(
+      var(--input-padding)
+      + var(--icon-md-size)
+      + var(--select-caret-right-pos)
+    )
+    var(--input-padding)
+    var(--input-padding);  // right pos = 10px spacing + caret icon size + caret offset
+
+  --select-tags-padding--clearable:
+    var(--input-padding)
+    calc(
+      var(--input-padding)
+      + var(--icon-md-size)
+      + var(--select-clear-right-pos)
+    )
+    var(--input-padding)
+    var(--input-padding);
+
+  --select-tags-border: var(--input-border);  // right pos = 10px spacing + clear icon size + clear offset
 
   --select-input-min-height: 18px;
-  --select-badge-right-pos: 44px;
-  --select-badge-right-pos--clearable: 70px;
-  --select-badge-z-index: 1;
+
+  --select-chip-right-pos: calc(
+    var(--spacing-xs)
+    + var(--icon-md-size)
+    + var(--spacing-xs)
+  ); // 2 spacings + arrow down icon
+
+  --select-chip-right-pos--clearable: calc(
+    var(--spacing-xs)
+    + var(--icon-md-size)
+    + var(--select-chip-right-pos)
+  ); // spacing after bottom arrow + "reset" sm icon
+
+  --select-chip-z-index: 1;
 
   --select-options-padding: var(--input-padding);
 
-  --select-option--hover-color: var(--main-secondary-accent-color);
-  --select-option--active-color: var(--main-option-hover-color);
+  --select-option--hover-color: var(--accent-secondary-color);
+  --select-option--active-color: var(--accent-secondary-color);
 }

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

@@ -1,6 +1,6 @@
 
 :root {
-  --switcher-icon-margin: 10px;
+  --switcher-icon-margin: var(--spacing-xs);
   --switcher-width: 40px;
   --switcher-height: 22px;
   --switcher-cicle-size: 14px;

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

@@ -3,12 +3,12 @@
   --tabs-underiline-height: 1px;
   --tabs-underiline-color: transparent;
 
-  --tab-padding: 20px 0;
+  --tab-padding: var(--spacing-2xs);
   --tab-margin: 0 5px;
   --tab-color: var(--text-outline-color);
   --tab--hover-color: var(--text-primary-color);
   --tab--active-color: var(--text-primary-color);
-  --tab-border: 2px solid;
+  --tab-border: 4px solid;
   --tab--active-border-color: var(--main-accent-color);
   --tab-z-index: 1;
 }

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

@@ -1,15 +1,14 @@
 
 :root {
-  --tags-input-min-height: 40px; // 38px + border-box
-  --tags-input-padding: 5px 10px;
+  --tags-input-padding: var(--input-padding);
+  --tags-input-min-height: 40px; // 24px lh + paddings
   --tags-input-border: var(--input-border);
   --tags-input-border-color: var(--form-border-color);
 
-  --tags-input-tag-spacing-margin: 10px;
+  --tags-input-tags-gap: var(--spacing-xs);
   --tags-input-tag-text-color: var(--text-primary-color);
   --tags-input-tag-bg-color: var(--main-secondary-accent-color);
-  --tags-input-tag-border-radius: 20px;
-  --tags-input-tag-actions-margin-left: var(--tags-input-tag-spacing-margin);
+  --tags-input-tag-actions-margin-left: var(--spacing-2xs);
 
   --tags-input-tag-text-color--deletion: var(--text-contrast-color);
   --tags-input-tag-bg-color--deletion: var(--false-color);

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

@@ -1,5 +1,13 @@
 
 :root {
   --textarea-min-height: 100px;
-  --textarea-padding: 9px 35px 9px 9px; // right reset icon 16px
+  --textarea-padding:
+    var(--input-padding)
+    calc(
+      var(--input-padding)
+      + var(--icon-sm-size)
+      + var(--spacing-xs)
+    )
+    var(--input-padding)
+    var(--input-padding); // right reset icon 16px
 }

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

@@ -1,5 +1,5 @@
 
 :root {
   --timepicker-input-width: 75px;
-  --timepicker-input-margin: 10px;
+  --timepicker-input-margin: var(--spacing-xs);
 }