@webitel/ui-sdk 1.0.2 → 1.0.3

package/package.json

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

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-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-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,11 +60,8 @@
 
   --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));
@@ -87,7 +79,7 @@
   --transfer--hover-color: hsla(var(--_transfer-color), var(--_opacity--hover)); // DEPRECATED
 
   // 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);