@webitel/ui-sdk 23.12.44 → 23.12.45-2

package/package.json

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

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

@@ -4,12 +4,6 @@
   </header>
 </template>
 
-<script>
-export default {
-  name: 'WtAppHeader',
-};
-</script>
-
 <style lang="scss">
 @import './variables.scss';
 </style>

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

@@ -9,8 +9,8 @@
   --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-secondary-background-color: var(--secondary-color);
+  --wt-chip-secondary-text-color: var(--secondary-on-color);
 
   --wt-chip-success-background-color: var(--success-color);
   --wt-chip-success-text-color: var(--success-on-color);
@@ -24,7 +24,3 @@
   --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-indicator/_variables.scss

@@ -1,22 +1,16 @@
 :root {
-  --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(--primary-color);
-
-  --indicator-secondary-color: var(--secondary-color);
-
-  --indicator-disabled-color: var(--disabled-color);
-
-  --indicator-true-color: var(--true-color);
-
-  --indicator-false-color: var(--false-color);
-
-  --indicator-transfer-color: var(--transfer-color);
-
-  --indicator-break-out-color: hsla(36, 90%, 50%, 1);
+  --wt-indicator-dot-size--size-sm: var(--spacing-xs);
+  --wt-indicator-dot-size--size-md: var(--spacing-sm);
+  --wt-indicator-dot-size: var(--wt-indicator-size--size-md);
+  --wt-indicator-dot-offset: var(--spacing-2xs);
+
+  --wt-indicator-text-margin: var(--spacing-2xs);
+
+  --wt-indicator-primary-color: var(--primary-color);
+  --wt-indicator-secondary-color: var(--dp-1-surface-color);
+  --wt-indicator-disabled-color: var(--dp-10-surface-color);
+  --wt-indicator-success-color: var(--success-color);
+  --wt-indicator-error-color: var(--error-color);
+  --wt-indicator-transfer-color: var(--transfer-color);
+  --wt-indicator-break-out-color: var(--warning-color);
 }

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

@@ -27,7 +27,7 @@ export default {
     color: {
       type: String,
       default: 'secondary',
-      options: ['primary', 'secondary', 'accent', 'disabled', 'success', 'danger', 'transfer', 'break-out', 'job'],
+      options: ['primary', 'secondary', 'disabled', 'success', 'error', 'transfer', 'break-out'],
     },
     text: {
       type: [String, Number],
@@ -60,55 +60,50 @@ export default {
 
 .wt-indicator__text {
   @extend %typo-body-1;
-  margin-left: var(--indicator-text-margin);
+  margin-left: var(--wt-indicator-text-margin);
 }
 
 .wt-indicator__indicator {
-  min-width: var(--indicator-dot-size);
-  height: var(--indicator-dot-size);
-  margin: var(--indicator-dot-offset);
-  background: var(--indicator-disabled-color);
+  min-width: var(--wt-indicator-dot-size);
+  height: var(--wt-indicator-dot-size);
+  margin: var(--wt-indicator-dot-offset);
+  background: var(--wt-indicator-disabled-color);
   border-radius: 50%;
 
-  &--primary,
-  &--accent {
-    background: var(--indicator-primary-color);
+  &--primary {
+    background: var(--wt-indicator-primary-color);
   }
 
   &--secondary {
-    background: var(--indicator-secondary-color);
+    background: var(--wt-indicator-secondary-color);
   }
 
   &--disabled {
-    background: var(--indicator-disabled-color);
+    background: var(--wt-indicator-disabled-color);
   }
 
   &--success {
-    background: var(--indicator-true-color);
+    background: var(--wt-indicator-success-color);
   }
 
-  &--danger {
-    background: var(--indicator-false-color);
+  &--error {
+    background: var(--wt-indicator-error-color);
   }
 
   &--transfer {
-    background: var(--indicator-transfer-color);
+    background: var(--wt-indicator-transfer-color);
   }
 
   &--break-out {
-    background: var(--indicator-break-out-color);
-  }
-
-  &--job {
-    background: var(--job-color);
+    background: var(--wt-indicator-break-out-color);
   }
 }
 
 .wt-indicator--size {
   &-sm {
     .wt-indicator__indicator {
-      min-width: var(--indicator-dot-size--size-sm);
-      height: var(--indicator-dot-size--size-sm);
+      min-width: var(--wt-indicator-dot-size--size-sm);
+      height: var(--wt-indicator-dot-size--size-sm);
     }
     .wt-indicator__text {
       @extend %typo-caption;
@@ -116,8 +111,8 @@ export default {
   }
   &-md {
     .wt-indicator__indicator {
-      min-width: var(--indicator-dot-size--size-md);
-      height: var(--indicator-dot-size--size-md);
+      min-width: var(--wt-indicator-dot-size--size-md);
+      height: var(--wt-indicator-dot-size--size-md);
     }
     .wt-indicator__text {
       @extend %typo-body-1;

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

@@ -0,0 +1,5 @@
+
+:root {
+  --wt-stepper-divider-background-color: var(--secondary-color);
+  --wt-stepper-divider-background-completed-color: var(--primary-color);
+}

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

@@ -15,7 +15,7 @@
           />
           <wt-chip
             class="wt-stepper-steps__item"
-            :color="!completed && 'secondary'"
+            :color="completed ? 'primary' : 'secondary'"
           >
             {{ name }}
           </wt-chip>
@@ -53,6 +53,10 @@ const stepWithCompleted = computed(() => props.steps.map((item, idx) => ({
   })));
 </script>
 
+<style lang="scss">
+@import './variables.scss';
+</style>
+
 <style lang="scss" scoped>
 .wt-stepper {
   width: 100%;
@@ -76,10 +80,10 @@ const stepWithCompleted = computed(() => props.steps.map((item, idx) => ({
   &__divider {
     flex: 1 1 auto;
     height: 1px;
-    background: var(--secondary-color);
+    background: var(--wt-stepper-divider-background-color);
 
     &--completed {
-      background-color: var(--chip-bg-color);
+      background-color: var(--wt-stepper-divider-background-completed-color);
     }
   }
 }

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

@@ -11,7 +11,7 @@
   // 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-on-disabled: var(--grey-lighten-3);
 
   --wt-switcher-circle-background-color-off: var(--grey-lighten-4);
   --wt-switcher-circle-background-color-off-hover: var(--grey-lighten-5);

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

@@ -80,6 +80,12 @@
   --primary-light-color: var(--amber-lighten-4);
   --primary-on-color: var(--black);
 
+  // secondary colors
+  --secondary-color: var(--dp-10-surface-color);
+  --secondary-hover-color: var(--dp-14-surface-color);
+  --secondary-light-color: var(--dp-16-surface-color);
+  --secondary-on-color: var(--grey-darken-4);
+
   // accent colors
   --accent-color: var(--purple-lighten-1);
   --sub-accent-color: var(--indigo-darken-3);
@@ -169,6 +175,9 @@
   --primary-light-color: var(--amber-lighten-4);
   --primary-on-color: var(--black);
 
+  // secondary colors
+  --secondary-on-color: var(--grey-lighten-4);
+
   // accent colors
   --accent-color: var(--purple-lighten-1);
   --sub-accent-color: var(--indigo-darken-3);