refactor: wt-indicator colors [WTEL-3936]

docs/pages/webitel-ui/components/wt-indicator/Readme.md

@@ -0,0 +1,30 @@
+<script setup>
+import Docs from './wt-indicator-docs.vue';
+import ExampleIndicatorDifferentColors from './examples/example-indicator-different-colors.vue';
+import ExampleIndicatorDifferentSizes from './examples/example-indicator-different-sizes.vue';
+</script>
+
+# WtIndicator
+
+## Props
+::: raw
+<Docs/>
+:::
+
+## Example Indicator Different Colors
+::: raw
+<ExampleIndicatorDifferentColors/>
+:::
+
+::: details Code
+<<< ./examples/example-indicator-different-colors.vue
+:::
+
+## Example Indicator Different Sizes
+::: raw
+<ExampleIndicatorDifferentSizes/>
+:::
+
+::: details Code
+<<< ./examples/example-indicator-different-sizes.vue
+:::

docs/pages/webitel-ui/components/wt-indicator/examples/example-indicator-different-colors.vue

@@ -0,0 +1,24 @@
+<script setup>
+const colors = [
+  'primary',
+  'secondary',
+  'success',
+  'error',
+  'transfer',
+  'disabled',
+  'break-out',
+];
+</script>
+
+<template>
+  <wt-indicator
+    v-for="color of colors"
+    :key="color"
+    :color="color"
+    :text="color"
+  />
+</template>
+
+<style scoped lang="scss">
+
+</style>

docs/pages/webitel-ui/components/wt-indicator/examples/example-indicator-different-sizes.vue

@@ -0,0 +1,19 @@
+<script setup>
+  const sizes = [
+    'sm',
+    'md',
+  ];
+</script>
+
+<template>
+  <wt-indicator
+    v-for="size of sizes"
+    :key="size"
+    :size="size"
+    :text="size"
+  />
+</template>
+
+<style scoped lang="scss">
+
+</style>

docs/pages/webitel-ui/components/wt-indicator/wt-indicator-docs.vue

@@ -1,90 +1,40 @@
 <template>
-  <section>
-    <h2>Indicator</h2>
-    <article>
-      <div class="example-wrapper">
-        <wt-indicator
-          color="primary"
-          text="Indicator"
-        />
-        <pre><code class="language-html">&lt;wt-indicator color="primary" text="Indicator"&gt;&lt;/wt-indicator&gt;</code></pre>
-      </div>
-      <div class="example-wrapper">
-        <wt-indicator
-          color="primary"
-          text="Sm size Indicator"
-          size="sm"
-        />
-        <pre><code class="language-html">&lt;wt-indicator color="primary" text="Sm size Indicator" size="sm"&gt;&lt;/wt-indicator&gt;</code></pre>
-      </div>
-      <div class="example-wrapper">
-        <wt-indicator
-          color="primary"
-          text="Primary color"
-        />
-        <wt-indicator
-          color="secondary"
-          text="Secondary color"
-        />
-        <wt-indicator
-          color="disabled"
-          text="Disabled color"
-        />
-        <wt-indicator
-          color="success"
-          text="Success color"
-        />
-        <wt-indicator
-          color="danger"
-          text="Danger color"
-        />
-        <wt-indicator
-          color="break-out"
-          text="Break-out color"
-        />
-        <wt-indicator
-          color="transfer"
-          text="Transfer color"
-        />
-      </div>
-    </article>
-    <component-props
-      :properties="properties"
-    />
-  </section>
+  <component-props
+    :properties="properties"
+  />
 </template>
 
 <script>
-  import Prism from 'prismjs';
+import Prism from 'prismjs';
 
-  export default {
-    name: 'WtIndicatorDocs',
-    data: () => ({
-      properties: [
-        {
-          value: 'color',
-          code: '<wt-indicator color="danger"></wt-indicator>',
-          type: ['String', 'Number'],
-          options: ['primary', 'secondary', 'success', 'danger', 'transfer', 'disabled', 'break-out'],
-          default: 'secondary',
-        },
-        {
-          value: 'text',
-          code: '<wt-indicator text="Hello there!"></wt-indicator>',
-          type: 'String',
-        },
-        {
-          value: 'size',
-          code: '<wt-indicator size="sm"></wt-indicator>',
-          type: 'String',
-          options: ['sm', 'md'],
-        },
-      ],
-    }),
-    mounted() {
-      Prism.highlightAll();
-    },
-  };
+export default {
+  name: 'WtIndicatorDocs',
+  data: () => ({
+    properties: [
+      {
+        value: 'color',
+        code: '<wt-indicator color="danger"></wt-indicator>',
+        type: ['String', 'Number'],
+        options: ['primary', 'secondary', 'success', 'error', 'transfer', 'disabled', 'break-out'],
+        default: 'secondary',
+      },
+      {
+        value: 'text',
+        code: '<wt-indicator text="Hello there!"></wt-indicator>',
+        type: 'String',
+      },
+      {
+        value: 'size',
+        code: '<wt-indicator size="sm"></wt-indicator>',
+        type: 'String',
+        options: ['sm', 'md'],
+      },
+    ],
+  }),
+  mounted() {
+    Prism.highlightAll();
+  },
+};
 </script>
 
 <style lang="scss" scoped>

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);
 }

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,64 +60,59 @@ 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;
     }
   }
   &-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;