@webitel/ui-sdk 23.12.3 → 23.12.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webitel/ui-sdk",
-  "version": "23.12.3",
+  "version": "23.12.6",
   "private": false,
   "scripts": {
     "build": "vue-cli-service build --target lib --name ui-sdk ./src/install.js",

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

@@ -15,7 +15,7 @@
   --wt-app-navigator-item-gap: var(--wt-app-header-content-gap);
   --wt-app-navigator-item-border: 1px solid;
   --wt-app-navigator-item-border-color: var(--secondary-color);
-  --wt-app-navigator-item-border-color--hover: var(--accent-color);
+  --wt-app-navigator-item-border-color--hover: var(--primary-color);
 
   --wt-header-actions-min-width: 120px;
   --wt-header-actions-content-sections-gap: var(--spacing-lg);

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

@@ -10,7 +10,7 @@
   --avatar-size: var(--avatar-size--size-md);
 
   --online-color: var(--true-color);
-  --dnd-color: var(--accent-color);
+  --dnd-color: var(--primary-color);
   --busy-color: var(--false-color);
   --offline-color: var(--secondary-color);
 

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

@@ -16,7 +16,7 @@
   }
 
   &--accent-color {
-    background: var(--accent-color);
+    background: var(--primary-color);
   }
 
   &--secondary-color {

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

@@ -39,7 +39,7 @@
   --dp-hover-color: var(--secondary-color-50);
   --dp-hover-text-color: var(--contrast-color);
   --dp-hover-icon-color: var(--icon-color--hover);
-  --dp-primary-color: var(--accent-color);
+  --dp-primary-color: var(--primary-color);
   --dp-primary-text-color: var(--main-color);
   --dp-secondary-color: var(--secondary-color);
   --dp-border-color: var(--form-border-color);

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

@@ -5,8 +5,8 @@
   --indicator-dot-offset: var(--spacing-2xs);
 
   --indicator-text-margin: var(--spacing-2xs);
-  
-  --indicator-primary-color: var(--accent-color);
+
+  --indicator-primary-color: var(--primary-color);
 
   --indicator-secondary-color: var(--secondary-color);
 
@@ -19,4 +19,4 @@
   --indicator-transfer-color: var(--transfer-color);
 
   --indicator-break-out-color: hsla(36, 90%, 50%, 1);
-}
+}

package/src/components/wt-load-bar/wt-load-bar.vue

@@ -40,7 +40,7 @@ export default {
   width: 100%;
   padding: var(--load-bar-padding);
   line-height: 0;
-  border: 1px solid var(--accent-color);
+  border: 1px solid var(--primary-color);
   border-radius: var(--border-radius);
 }
 
@@ -49,7 +49,7 @@ export default {
   height: var(--load-bar-height);
   transition: var(--transition);
   border-radius: var(--load-bar-border-radius);
-  background: var(--accent-color);
+  background: var(--primary-color);
   will-change: width;
 }
 </style>

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

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

package/src/components/wt-navigation-bar/wt-navigation-bar.vue

@@ -253,7 +253,7 @@ export default {
     transition: var(--transition);
     opacity: 0;
     border-radius: var(--border-radius);
-    background: var(--accent-color);
+    background: var(--primary-color);
   }
 
   .wt-navigation-bar__expansion-arrow {

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

@@ -1,5 +1,5 @@
 .wt-player {
-  --plyr-color-main: var(--accent-color);
+  --plyr-color-main: var(--primary-color);
   --plyr-audio-control-color: var(--icon-primary-color);
   // --plyr-control-toggle-checked-background: var(--main-color);
   --player-close-icon-transform-translate-x: var(--spacing-md);

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

@@ -4,8 +4,8 @@
   --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--primary: var(--primary-color);
   --progress-bar-bg-color--secondary: var(--secondary-color);
   --progress-bar-bg-color--success: var(--true-color);
   --progress-bar-bg-color--danger: var(--false-color);
-}
+}

package/src/components/wt-progress-bar/wt-progress-bar.vue

@@ -62,7 +62,7 @@ export default {
   display: inline-block;
   height: var(--progress-bar-height);
   will-change: width;
-  background: var(--accent-color);
+  background: var(--primary-color);
   border-radius: var(--progress-bar-border-radius) 0 0 var(--progress-bar-border-radius);
   transition: var(--transition);
 }

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

@@ -1,5 +1,5 @@
 :root {
-  --rounded-action-border-size: 1px;
+  --rounded-action-border-size: 2px;
   --rounded-action-padding: calc(var(--spacing-xs) - var(--rounded-action-border-size));
 
   --rounded-action-rounded-border-radius: var(--border-radius--pill);

package/src/components/wt-rounded-action/wt-rounded-action.vue

@@ -100,17 +100,12 @@ const loaderColor = computed(() => {
   width: fit-content;
   line-height: 0;
   padding: var(--rounded-action-padding);
-  box-shadow: var(--elevation-1);
   border: var(--rounded-action-border-size) solid;
   background: var(--rounded-action-secondary-color);
   border-color: var(--rounded-action-secondary-color);
   border-radius: var(--border-radius);
   transition: var(--transition);
 
-  &:hover {
-    box-shadow: var(--elevation-2);
-  }
-
   &--wide {
     width: 100%;
   }
@@ -179,7 +174,6 @@ const loaderColor = computed(() => {
   &.wt-rounded-action--disabled {
     background: var(--rounded-action-disabled-color);
     border-color: var(--rounded-action-disabled-color);
-    box-shadow: none;
     pointer-events: none;
   }
 

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

@@ -80,7 +80,7 @@ export default {
   computed: {
     progressStyle() { // To achieve the correct color styling:
       const progressPercent = ((this.value - this.min) / (this.max - this.min)) * 100;
-      return `linear-gradient(to right, var(--accent-color) ${progressPercent}%, var(--secondary-color) 0%)`;
+      return `linear-gradient(to right, var(--primary-color) ${progressPercent}%, var(--secondary-color) 0%)`;
     },
     verticalHeight() { // in order to have correct parent height after slider rotation
       return this.vertical ? `${this.height}px` : '100%';

package/src/components/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(--accent-color);
+  --tab--active-border-color: var(--primary-color);
   --tab-z-index: 1;
 }

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

@@ -71,8 +71,8 @@
   --on-transfer-color: var(--white);
 
   // primary colors
-  --primary-color: var(--amber-accent-2);
-  --primary-hover-color: var(--amber-accent-3);
+  --primary-color: var(--amber-accent-3);
+  --primary-hover-color: var(--amber-accent-2);
   --primary-light-color: var(--amber-lighten-4);
   --on-primary-color: var(--black);
 

package/src/modules/AuditForm/components/audit-form-question-read-wrapper.vue

@@ -96,7 +96,7 @@ const isResult = computed(() => !isEmpty(props.result));
   &:not(.audit-form-question-read--readonly) {
     &:hover,
     &:focus-within {
-      border: 1px solid var(--accent-color);
+      border: 1px solid var(--primary-color);
     }
   }