@webitel/ui-sdk 23.12.43 → 23.12.44

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webitel/ui-sdk",
-  "version": "23.12.43",
+  "version": "23.12.44",
   "private": false,
   "scripts": {
     "dev": "vite",

package/src/components/wt-checkbox/wt-checkbox.vue

@@ -3,12 +3,12 @@
     class="wt-checkbox"
     :class="{
       'wt-checkbox--active': isChecked,
-      'wt-checkbox--outline': outline,
       'wt-checkbox--disabled': disabled,
     }"
   >
     <wt-label
       v-bind="labelProps"
+      :disabled="disabled"
       class="wt-checkbox__wrapper"
     >
       <input
@@ -65,10 +65,6 @@ export default {
       type: Boolean,
       default: false,
     },
-    outline: {
-      type: Boolean,
-      default: false,
-    },
     labelProps: {
       type: Object,
       description: 'Object with props, passed down to wt-label as props',
@@ -151,46 +147,12 @@ export default {
 }
 
 .wt-checkbox:hover {
-  .wt-checkbox__label {
-    color: var(--form-label--hover-color);
-  }
-
-  ::v-deep .wt-icon__icon {
-    fill: var(--icon-color--hover);
-  }
-}
-
-.wt-checkbox--active {
-  .wt-checkbox__label {
-    color: var(--form-label--active-color);
-  }
-}
-
-.wt-checkbox--outline {
-  .wt-checkbox__label {
-    color: var(--form-outline-label-color);
-  }
-
-  ::v-deep .wt-icon__icon {
-    fill: var(--icon-outline-color);
-  }
-
-  &.wt-checkbox--active {
-    .wt-checkbox__label {
-      color: var(--form-label--active-color);
-    }
-
-    ::v-deep .wt-icon__icon {
-      fill: var(--icon-outline--active-color);
-    }
+  :deep .wt-icon__icon {
+    fill: var(--icon-active-color);
   }
 }
 
 .wt-checkbox--disabled {
   pointer-events: none;
-
-  .wt-checkbox__label {
-    color: var(--form-label--disabled-color);
-  }
 }
 </style>

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

@@ -2,6 +2,29 @@
 :root {
   --chip-padding: var(--spacing-2xs) var(--spacing-sm);
   --chip-border-radius: var(--spacing-lg);
-  --chip-bg-color: var(--accent-secondary-color);
-  --chip-bg-color--outline: var(--secondary-color);
+
+  --wt-chip-main-background-color: var(--primary-light-color);
+  --wt-chip-main-text-color: var(--primary-on-color);
+
+  --wt-chip-primary-background-color: var(--primary-color);
+  --wt-chip-primary-text-color: var(--primary-on-color);
+
+  --wt-chip-secondary-background-color: var(--dp-14-surface-color);
+  --wt-chip-secondary-text-color: var(--grey-darken-4);
+
+  --wt-chip-success-background-color: var(--success-color);
+  --wt-chip-success-text-color: var(--success-on-color);
+
+  --wt-chip-warning-background-color: var(--warning-color);
+  --wt-chip-warning-text-color: var(--warning-on-color);
+
+  --wt-chip-error-background-color: var(--error-color);
+  --wt-chip-error-text-color: var(--error-on-color);
+
+  --wt-chip-transfer-background-color: var(--transfer-color);
+  --wt-chip-transfer-text-color: var(--transfer-on-color);
+}
+
+:root.theme--dark {
+  --wt-chip-secondary-text-color: var(--grey-lighten-4);
 }

package/src/components/wt-chip/wt-chip.scss

@@ -3,39 +3,42 @@
 
   display: inline-block;
   padding: var(--chip-padding);
-  color: var(--text-primary-color);
+  color: var(--wt-chip-main-text-color);
   border-radius: var(--chip-border-radius);
-  background: var(--chip-bg-color);
+  background: var(--wt-chip-main-background-color);
 
   &--main-color {
-    background: var(--chip-bg-color);
+    background: var(--wt-chip-main-background-color);
+    color: var(--wt-chip-main-text-color);
   }
 
-  &--outline-color {
-    background: var(--chip-bg-color--outline);
-  }
-
-  &--accent-color {
-    background: var(--primary-color);
+  &--primary-color {
+    background: var(--wt-chip-primary-background-color);
+    color: var(--wt-chip-primary-text-color);
   }
 
   &--secondary-color {
-    background: var(--secondary-color);
+    background: var(--wt-chip-secondary-background-color);
+    color: var(--wt-chip-secondary-text-color);
   }
 
-  &--secondary-50-color {
-    background: var(--secondary-color-50);
+  &--success-color {
+    background: var(--wt-chip-success-background-color);
+    color: var(--wt-chip-success-text-color);
   }
 
-  &--success-color {
-    background: var(--true-color);
+  &--warning-color {
+    background: var(--wt-chip-warning-background-color);
+    color: var(--wt-chip-warning-text-color);
   }
 
-  &--danger-color {
-    background: var(--false-color);
+  &--error-color {
+    background: var(--wt-chip-error-background-color);
+    color: var(--wt-chip-error-text-color);
   }
 
   &--transfer-color {
-    background: var(--transfer-color);
+    background: var(--wt-chip-transfer-background-color);
+    color: var(--wt-chip-transfer-text-color);
   }
 }

package/src/components/wt-chip/wt-chip.vue

@@ -11,11 +11,13 @@
 export default {
   name: 'WtChip',
   props: {
+    /**
+     * The color of the chip
+     * @values main, primary, secondary, success, warning, error, transfer
+     */
     color: {
       type: String,
       default: 'main',
-      options: ['main', 'outline', 'accent', 'secondary', 'secondary-50', 'success', 'danger', 'transfer'],
-      notes: '"main" and "outline" are chip-specific colors',
     },
   },
 };

package/src/components/wt-icon-btn/wt-icon-btn.vue

@@ -5,8 +5,9 @@
     type="button"
     @click="emit('click', $event)"
   >
+<!--    prevent icon-btn classes to fall to wt-icon -->
     <wt-icon
-      v-bind="$attrs"
+      v-bind="{ ...$attrs, class: '' }"
       :disabled="disabled"
     />
   </button>

package/src/components/wt-input/wt-input.vue

@@ -307,7 +307,7 @@ onMounted(() => {
   .wt-input--disabled & {
     @include wt-placeholder('disabled');
     border-color: var(--wt-text-field-input-border-disabled-color);
-    background: var(--form-border--disabled-color);
+    background: var(--wt-text-field-input-background-disabled-color);
   }
 }
 

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

@@ -3,16 +3,17 @@
   --popup-wrapper-z-index: 11;
 
   --popup-shadow-opacity: 0.8;
-  --popup-shadow-color: hsla(var(--_contrast-color), var(--popup-shadow-opacity));
+  --wt-popup-shadow-color: hsla(0, 0%, 0%, var(--popup-shadow-opacity));
 
   --popup-max-height: 90%;
 
-  --popup-bg-color: var(--main-color);
+  --wt-popup-background-color: var(--dp-24-surface-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);
+  --wt-popup-header-background-color: var(--dp-18-surface-color);
+  --wt-popup-header-text-color: var(--text-main-color);
 
   --popup-main-section-padding-right: var(--spacing-xs); // scroll offset
 

package/src/components/wt-popup/wt-popup.vue

@@ -50,6 +50,7 @@ export default {
       default: false,
     },
   },
+  emits: ['close'],
   computed: {
     popupStyle() {
       let style = '';
@@ -77,7 +78,7 @@ export default {
   display: flex;
   align-items: center;
   justify-content: center;
-  background: var(--popup-shadow-color);
+  background: var(--wt-popup-shadow-color);
 }
 
 .wt-popup__popup {
@@ -88,7 +89,7 @@ export default {
   margin: var(--popup-padding);
   padding: var(--popup-padding);
   border-radius: var(--border-radius);
-  background: var(--popup-bg-color);
+  background: var(--wt-popup-background-color);
   box-shadow: var(--elevation-10);
   gap: var(--popup-sections-gap);
 }
@@ -99,9 +100,10 @@ export default {
   display: flex;
   align-items: center;
   justify-content: space-between;
+  color: var(--wt-popup-header-text-color);
   padding: var(--popup-header-padding);
   border-radius: var(--border-radius);
-  background: var(--popup-header-bg-color);
+  background: var(--wt-popup-header-background-color);
   gap: var(--popup-header-padding);
 
   .wt-popup__title {

package/src/components/wt-select/_multiselect.scss

@@ -1,5 +1,5 @@
 
-.multiselect ::v-deep {
+.multiselect :deep {
   cursor: pointer;
   position: relative;
 
@@ -11,6 +11,7 @@
     transition: var(--transition);
     width: fit-content; // reset default
     height: fit-content; // reset default
+    background: transparent;
 
     &:before {
       display: none; // reset default
@@ -29,12 +30,13 @@
   }
 
 
+  // visible select input wrapper
   .multiselect__tags {
     padding: calc(var(--spacing-xs) - 1px); // borders
-    color: var(--form-input-color);
     border: var(--select-tags-border);
-    border-color: var(--form-border-color);
+    border-color: var(--wt-text-field-input-border-color);
     border-radius: var(--border-radius);
+    background: transparent;
   }
 
 
@@ -48,13 +50,9 @@
     margin: 0; // reset default
   }
 
-  .multiselect__input:focus {
-    @include wt-placeholder('focus');
-  }
-
   .multiselect__custom-tag,
   .multiselect__single-label {
-    color: var(--form-input-color);
+    color: var(--wt-text-field-placeholder-color);
   }
 
   .multiselect__placeholder {
@@ -68,17 +66,22 @@
     text-overflow: ellipsis;
   }
 
+  // select options wrapper
   .multiselect__content-wrapper {
     @extend %wt-distant-scrollbar;
     transition: var(--transition);
     border: var(--select-tags-border);
-    border-color: var(--form-border-color);
+    border-color: var(--wt-text-field-select-option-wrapper-border-color);
     border-radius: var(--border-radius);
+    box-shadow: var(--elevation-10);
   }
 
+  // select options
   .multiselect__option {
     @extend %typo-body-1;
     padding: var(--select-options-padding);
+    color: var(--wt-text-field-select-option-text-color);
+    background: var(--wt-text-field-select-option-background-color);
 
     &:after {
       display: none;
@@ -86,53 +89,28 @@
 
 
     &--highlight {
-      color: var(--form-input-color);
-      //background: var(--select-option--hover-color);
-      background: none;
+      color: var(--wt-text-field-select-option-text-hover-color);
+      background: var(--wt-text-field-select-option-background-hover-color);
     }
 
 
     &--selected {
-      font-weight: normal;
-      background: var(--select-option--active-color)
+      font-weight: normal; // reset
+      color: var(--wt-text-field-select-option-text-selected-color);
+      background: var(--wt-text-field-select-option-background-selected-color)
     }
   }
 }
 
-.multiselect--active ::v-deep {
+.multiselect--active :deep {
   .multiselect__select .wt-icon__icon {
-    fill: var(--icon-color--hover);
-  }
-
-  .multiselect__tags {
-    border-color: var(--form-border--active-color);
-
-    .multiselect__placeholder {
-      //@extend %wt-placeholder--focus;
-    }
-  }
-
-}
-
-.wt-select:hover,
-.wt-tags-input:hover {
-  .multiselect ::v-deep {
-    .multiselect__tags {
-      border-color: var(--form-border--hover-color);
-    }
-
-    .multiselect__select,
-    .multiselect__clear {
-      .wt-icon__icon {
-        fill: var(--icon-color--hover);
-      }
-    }
+    fill: var(--icon-active-color);
   }
 }
 
 .wt-select--loading,
 .wt-tags-input--loading {
-  ::v-deep {
+  :deep {
     .multiselect__content-wrapper {
       overflow-y: hidden;
     }
@@ -155,11 +133,21 @@
 
 .wt-select.wt-select--invalid,
 .wt-tags-input.wt-tags-input--invalid {
-  .multiselect ::v-deep {
+  .multiselect :deep {
     .multiselect__tags {
-      border-color: var(--false-color);
+      border-color: var(--wt-text-field-input-border-error-color);
       outline: none; // prevent outline overlapping false color
     }
+
+    .multiselect__custom-tag,
+    .multiselect__single-label {
+      color: var(--wt-text-field-placeholder-error-color);
+    }
+
+    .multiselect__placeholder {
+      @extend %wt-placeholder--error;
+      //color: var(--form-placeholder--disabled-color);
+    }
   }
 }
 
@@ -176,16 +164,11 @@
     background: transparent; // reset default
   }
 
-  .multiselect__arrow-caret ::v-deep .wt-icon__icon,
-  .multiselect__clear ::v-deep .wt-icon__icon {
-    fill: var(--icon-color-disabled);
-  }
-
   .multiselect {
-    ::v-deep {
+    :deep {
       .multiselect__tags {
-        border-color: var(--form-border--disabled-color);
-        background: var(--form-border--disabled-color);
+        border-color: var(--wt-text-field-input-border-disabled-color);
+        background: var(--wt-text-field-input-background-disabled-color);
 
         .multiselect__placeholder {
           @extend %wt-placeholder--disabled;
@@ -195,3 +178,16 @@
     }
   }
 }
+
+// override .wt-select colors on chips
+.wt-tags-input,
+.wt-tags-input--invalid {
+  .multiselect :deep {
+    .multiselect__tags {
+      .multiselect__custom-tag,
+      .multiselect__single-label {
+        color: var(--wt-chip-main-text-color);
+      }
+    }
+  }
+}

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

@@ -8,7 +8,4 @@
   --select-tags-border: var(--input-border);  // right pos = 10px spacing + clear icon size + clear offset
 
   --select-options-padding: var(--input-padding);
-
-  --select-option--hover-color: var(--accent-secondary-color);
-  --select-option--active-color: var(--accent-secondary-color);
 }

package/src/components/wt-select/wt-select.vue

@@ -176,21 +176,7 @@ export default {
   min-width: 0;
 }
 
-.wt-label {
-  .wt-select:hover &,
-  .wt-select:focus-within &, {
-    color: var(--form-label--hover-color);
-  }
-}
-
-.wt-select--invalid,
-.wt-select--invalid:hover {
-  .wt-label {
-    color: var(--false-color);
-  }
-}
-
-.multiselect ::v-deep {
+.multiselect :deep {
   .multiselect__custom-tag,
   .multiselect__single-label {
     // text overflow 3 dots
@@ -202,7 +188,7 @@ export default {
   }
 }
 
-.multiselect--active ::v-deep {
+.multiselect--active :deep {
   .multiselect__tags-wrap,
   .multiselect__strong {
     display: none;
@@ -214,7 +200,7 @@ export default {
 // default case
 .wt-select {
   // all is fine
-  .multiselect ::v-deep {
+  .multiselect :deep {
     .multiselect__tags {
       padding: var(--input-padding) calc(
         var(--input-padding)
@@ -227,7 +213,7 @@ export default {
 
 // only chip
 .wt-select.wt-select--multiple:not(.wt-select--clearable) {
-  .multiselect ::v-deep {
+  .multiselect :deep {
     $multiselect-limit-right-pos: calc(
       var(--select-caret-right-pos) // caret offet from border
       + var(--icon-md-size) // caret size
@@ -248,9 +234,9 @@ export default {
 
 // only clearable
 .wt-select.wt-select--clearable:not(.wt-select--multiple) {
-  .multiselect ::v-deep {
+  .multiselect :deep {
     $multiselect-clear-right-pos: calc(
-      var(--select-caret-right-pos) // caret offet from border
+      var(--select-caret-right-pos) // caret offset from border
       + var(--icon-md-size) // caret size
       + var(--input-padding) // caret-to-chip offset
     );
@@ -268,8 +254,9 @@ export default {
   }
 }
 
+// clearable and chip
 .wt-select.wt-select--multiple.wt-select--clearable {
-  .multiselect ::v-deep {
+  .multiselect :deep {
     $multiselect-clear-right-pos: calc(
       var(--select-caret-right-pos)// caret offet from border
       + var(--icon-md-size)// caret size

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

@@ -6,12 +6,35 @@
   --switcher-cicle-size: 14px;
   --switcher-cicle-margin: 4px;
   --switcher-cicle-translateX: 17px;
-  --switcher-bg-color--off: hsla(var(--_icon-color), var(--_opacity--default));
-  --switcher-bg-color--on: hsla(var(--_accent-color), var(--_opacity--default));
-  --switcher-bg-color--off--hover: hsla(var(--_icon-color), var(--_opacity--hover));
-  --switcher-bg-color--on--hover: hsla(var(--_accent-color), var(--_opacity--hover));
-  --switcher-bg-color--off--disabled: hsla(var(--_icon-color), var(--_opacity--disabled));
-  --switcher-bg-color--on--disabled: hsla(var(--_accent-color), var(--_opacity--disabled));
-  --switcher-circle-bg-color: var(--main-color);
   --switcher-border-radius: 24px;
+
+  // circle
+  --wt-switcher-circle-background-color-on: var(--grey-darken-3);
+  --wt-switcher-circle-background-color-on-hover: var(--grey-darken-4);
+  --wt-switcher-circle-background-color-on-disabled: var(--grey-darken-3);
+
+  --wt-switcher-circle-background-color-off: var(--grey-lighten-4);
+  --wt-switcher-circle-background-color-off-hover: var(--grey-lighten-5);
+  --wt-switcher-circle-background-color-off-disabled: var(--grey-lighten-3);
+
+  // background
+  --wt-switcher-background-color-on: var(--primary-color);
+  --wt-switcher-background-color-on-hover: var(--primary-hover-color);
+  --wt-switcher-background-color-on-disabled: var(--primary-light-color);
+
+  --wt-switcher-background-color-off: var(--grey-darken-2);
+  --wt-switcher-background-color-off-hover: var(--grey-darken-1);
+  --wt-switcher-background-color-off-disabled: var(--grey-lighten-4);
+}
+
+:root.theme--dark {
+  // circle
+  --wt-switcher-circle-background-color-off: var(--grey-darken-4);
+  --wt-switcher-circle-background-color-off-hover: var(--grey-darken-3);
+  --wt-switcher-circle-background-color-off-disabled: var(--grey-darken-3);
+
+  // background
+  --wt-switcher-background-color-off: var(--grey-lighten-1);
+  --wt-switcher-background-color-off-hover: var(--grey-lighten-2);
+  --wt-switcher-background-color-off-disabled: var(--grey-darken-2);
 }