@webitel/ui-sdk 1.0.0 → 1.0.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webitel/ui-sdk",
-  "version": "1.0.0",
+  "version": "1.0.4",
   "private": false,
   "scripts": {
     "serve-lib": "vue-cli-service serve",

package/src/components/molecules/wt-datepicker/wt-datepicker.vue

@@ -102,11 +102,6 @@
 </script>
 
 <style lang="scss" scoped>
-  .wt-label {
-    margin-bottom: var(--label-margin);
-    cursor: text;
-  }
-
   .wt-datepicker__calendar-icon {
     position: absolute;
     top: var(--spacing-xs);

package/src/components/molecules/wt-datetimepicker/wt-datetimepicker.vue

@@ -163,11 +163,6 @@
     position: relative;
   }
 
-  .wt-label {
-    margin-bottom: var(--label-margin);
-    cursor: text;
-  }
-
   .wt-datetimepicker__preview {
     position: relative;
     cursor: text;

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

@@ -246,9 +246,6 @@ export default {
   }
 
   .wt-label {
-    margin-bottom: var(--label-margin);
-    cursor: text;
-
     .wt-input:hover &,
     .wt-input:focus-within & {
       color: var(--form-label--hover-color);

package/src/components/molecules/wt-label/wt-label.vue

@@ -59,6 +59,7 @@ export default {
   align-items: center;
   color: var(--form-label-color);
   transition: var(--transition);
+  cursor: text;
 
   &--outline {
     color: var(--form-outline-label-color);
@@ -74,7 +75,9 @@ export default {
 }
 
 .wt-label__hint {
+  cursor: pointer;
   margin-left: var(--spacing-xs);
+
   ::v-deep {
     .wt-tooltip {
       width: max-content; // experimental css property

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

@@ -283,9 +283,6 @@ export default {
 }
 
 .wt-label {
-  margin-bottom: var(--label-margin);
-  cursor: text;
-
   .wt-select:hover &,
   .wt-select:focus-within & {
     color: var(--form-label--hover-color);

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

@@ -153,11 +153,6 @@ export default {
   width: 100%;
 }
 
-.wt-label {
-  margin-bottom: var(--label-margin);
-  cursor: text;
-}
-
 // increase specificity
 .wt-tags-input .wt-tags-input__tags-input {
   width: 100%;

package/src/components/molecules/wt-textarea/wt-textarea.vue

@@ -119,9 +119,6 @@
   }
 
   .wt-label {
-    margin-bottom: var(--label-margin);
-    cursor: text;
-
     .wt-textarea:hover &,
     .wt-textarea:focus-within & {
       color: var(--form-label--hover-color);

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

@@ -137,8 +137,6 @@ import validationMixin from '../../../mixins/validationMixin/validationMixin';
 
   .wt-label {
     text-align: center;
-    margin-bottom: var(--label-margin);
-    cursor: text;
 
     .wt-time-input:hover &,
     .wt-time-input:focus-within & {

package/src/components/molecules/wt-timepicker/wt-timepicker.vue

@@ -146,9 +146,6 @@ export default {
 }
 
 .wt-label {
-  margin-bottom: var(--label-margin);
-  cursor: text;
-
   .wt-timepicker:hover &,
   .wt-timepicker:focus-within & {
     color: var(--form-label--hover-color);

package/src/components/organisms/wt-app-header/wt-app-navigator.vue

@@ -183,6 +183,11 @@ export default {
   z-index: var(--wt-app-header-content-z-index);
   display: flex;
   align-items: center;
+
+  ::v-deep .wt-icon-btn__tooltip {
+    left: 50%;
+    transform: translateX(-100%);
+  }
 }
 
 // dropdown part

package/src/components/organisms/wt-app-header/wt-header-actions.vue

@@ -117,6 +117,11 @@ export default {
   z-index: var(--wt-app-header-content-z-index);
   display: flex;
   align-items: center;
+
+  ::v-deep .wt-icon-btn__tooltip {
+    left: 50%;
+    transform: translateX(-100%);
+  }
 }
 
 .wt-header-actions__panel-wrapper {

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

@@ -121,18 +121,18 @@ export default {
   }
 
   .plyr__control:hover, {
-    background: var(--main-option-hover-color);
+    background: var(--accent-secondary-color);
     color: var(--text-primary-color);
   }
 
   //.plyr__control[role='menuitemradio']::before,
   //.plyr__control[role='menuitemradio']:hover::before {
-  //  border: 2px solid var(--main-secondary-color);
-  //  background: var(--main-primary-color);
+  //  border: 2px solid var(--secondary-color);
+  //  background: var(--main-color);
   //}
   //
   //.plyr__control[role='menuitemradio']::after {
-  //  background: var(--main-secondary-color);
+  //  background: var(--secondary-color);
   //}
 }
 

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

@@ -2,6 +2,6 @@
 :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);
+  --chip-bg-color: var(--accent-secondary-color);
+  --chip-bg-color--outline: var(--secondary-color);
 }

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-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/molecules/wt-tabs/_variables.scss

@@ -9,6 +9,6 @@
   --tab--hover-color: var(--text-primary-color);
   --tab--active-color: var(--text-primary-color);
   --tab-border: 4px solid;
-  --tab--active-border-color: var(--main-accent-color);
+  --tab--active-border-color: var(--accent-color);
   --tab-z-index: 1;
 }

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

@@ -7,7 +7,7 @@
 
   --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-bg-color: var(--accent-secondary-color);
   --tags-input-tag-actions-margin-left: var(--spacing-2xs);
 
   --tags-input-tag-text-color--deletion: var(--text-contrast-color);
@@ -19,6 +19,6 @@
   --tags-input-autocomplete-option-padding: var(--input-padding);
   --tags-input-autocomplete-option--text-color: var(--form-placeholder-color);
 
-  --tags-input-option-bg-color--hover: var(--main-secondary-accent-color);
+  --tags-input-option-bg-color--hover: var(--accent-secondary-color);
   --tags-input-option-text-color--hover: var(--text-primary-color);
 }

package/src/css/components/organisms/wt-app-header/_variables.scss

@@ -1,7 +1,7 @@
 
 :root {
-  --wt-app-header-min-height: 40px;
-  --wt-app-header-padding: var(--spacing-xs) var(--spacing-sm);
+  --wt-app-header-min-height: 56px;
+  --wt-app-header-padding: var(--spacing-sm);
 
   --wt-app-header-content-gap: var(--spacing-sm);
   --wt-app-header-content-panel-margin: var(--spacing-2xs);

package/src/css/components/organisms/wt-player/_variables.scss

@@ -1,7 +1,7 @@
 .wt-player {
-  --plyr-color-main: var(--main-accent-color);
+  --plyr-color-main: var(--accent-color);
   --plyr-audio-control-color: var(--icon-primary-color);
-  // --plyr-control-toggle-checked-background: var(--main-primary-color);
+  // --plyr-control-toggle-checked-background: var(--main-color);
   --player-close-icon-transform-translate-x: var(--spacing-xs);
   // "-1 * var" for use the negative value of a variable
   --player-close-icon-transform-translate-y: calc(-1 * var(--spacing-md));

package/src/css/styleguide/colors/_colors.scss

@@ -34,18 +34,13 @@
 
   // MAIN COLORS
   --accent-color: hsla(var(--_accent-color), 1);
-  --main-accent-color: var(--accent-color); // DEPRECATED
 
   --main-color: hsla(var(--_main-color), 1);
-  --main-primary-color: var(--main-color); // DEPRECATED
 
   --contrast-color: hsla(var(--_contrast-color), 1);
-  --main-primary-accent-color: var(--contrast-color); // DEPRECATED
 
   --secondary-color: hsla(var(--_secondary-color), 1);
   --secondary-color-50: hsla(var(--_secondary-color-50), 1);
-  --main-secondary-color: var(--secondary-color); // DEPRECATED
-  --main-outline-color: var(--secondary-color); // DEPRECATED
 
   // ICON COLORS
   --icon-color: hsla(var(--_icon-color), var(--_opacity--default));
@@ -65,29 +60,26 @@
 
   --page-bg-color: hsla(var(--_page-bg-color), 1);
   --header-color: hsla(var(--_header-color), 1);
-  --main-page-bg-color: var(--page-bg-color); // DEPRECATED
 
   --accent-secondary-color: hsla(var(--_accent-color), 0.3);
-  --main-secondary-accent-color: var(--accent-secondary-color); // DEPRECATED
-  --main-option-hover-color: var(--accent-secondary-color); // DEPRECATED
 
   // SEMANTIC COLORS
   --disabled-color: hsl(var(--_contrast-color), var(--_opacity--disabled));
 
   --true-color: hsla(var(--_positive-color), var(--_opacity--default));
-  --true--hover-color: hsla(var(--_positive-color), var(--_opacity--hover)); // DEPRECATED
+  --true--hover-color: hsla(var(--_positive-color), var(--_opacity--hover));
 
   --false-color: hsla(var(--_negative-color), var(--_opacity--default));
-  --false--hover-color: hsla(var(--_negative-color), var(--_opacity--hover)); // DEPRECATED
+  --false--hover-color: hsla(var(--_negative-color), var(--_opacity--hover));
 
   --hold-color: hsla(var(--_hold-color), var(--_opacity--default));
-  --hold--hover-color: hsla(var(--_hold-color), var(--_opacity--hover)); // DEPRECATED
+  --hold--hover-color: hsla(var(--_hold-color), var(--_opacity--hover));
 
   --transfer-color: hsla(var(--_transfer-color), var(--_opacity--default));
-  --transfer--hover-color: hsla(var(--_transfer-color), var(--_opacity--hover)); // DEPRECATED
+  --transfer--hover-color: hsla(var(--_transfer-color), var(--_opacity--hover));
 
   // SUBORDINATE COLORS
-  --tag-bg-color: var(--main-secondary-accent-color);
+  --tag-bg-color: var(--accent-secondary-color);
 
   // FORM STATES OPACITY
   --form-opacity--default: var(--_opacity--default);