From a2020ca69ff1739856036a4c0cc6977fb888ff10 Mon Sep 17 00:00:00 2001
From: dlohvinov <nsblnr@gmail.com>
Date: Mon, 27 Nov 2023 18:06:08 +0200
Subject: [PATCH] refactor: wt-switcher colors [WTEL-3958]

---
 .../components/wt-switcher/Readme.md          |  40 +++++
 .../examples/example-disabled-switcher.vue    |  19 +++
 .../examples/example-switcher-label-left.vue  |  18 ++
 .../wt-switcher/examples/example-switcher.vue |  17 ++
 .../wt-switcher/wt-switcher-docs.vue          | 160 ++++++++----------
 src/components/wt-switcher/_variables.scss    |  37 +++-
 src/components/wt-switcher/wt-switcher.vue    |  72 +++++---
 7 files changed, 237 insertions(+), 126 deletions(-)
 create mode 100644 docs/pages/webitel-ui/components/wt-switcher/Readme.md
 create mode 100644 docs/pages/webitel-ui/components/wt-switcher/examples/example-disabled-switcher.vue
 create mode 100644 docs/pages/webitel-ui/components/wt-switcher/examples/example-switcher-label-left.vue
 create mode 100644 docs/pages/webitel-ui/components/wt-switcher/examples/example-switcher.vue

diff --git a/docs/pages/webitel-ui/components/wt-switcher/Readme.md b/docs/pages/webitel-ui/components/wt-switcher/Readme.md
new file mode 100644
index 000000000..b19108cff
--- /dev/null
+++ b/docs/pages/webitel-ui/components/wt-switcher/Readme.md
@@ -0,0 +1,40 @@
+<script setup>
+import Docs from './wt-switcher-docs.vue';
+import ExampleSwitcher from './examples/example-switcher.vue';
+import ExampleDisabledSwitcher from './examples/example-disabled-switcher.vue';
+import ExampleSwitcherLabelLeft from './examples/example-switcher-label-left.vue';
+</script>
+
+# WtSwitcher
+
+## Props
+::: raw
+<Docs/>
+:::
+
+## Example Switcher
+::: raw
+<ExampleSwitcher/>
+:::
+
+::: details Code
+<<< ./examples/example-switcher.vue
+:::
+
+## Example Disabled Switcher
+::: raw
+<ExampleDisabledSwitcher/>
+:::
+
+::: details Code
+<<< ./examples/example-disabled-switcher.vue
+:::
+
+## Example Switcher with Label Left
+::: raw
+<ExampleSwitcherLabelLeft/>
+:::
+
+::: details Code
+<<< ./examples/example-switcher-label-left.vue
+:::
diff --git a/docs/pages/webitel-ui/components/wt-switcher/examples/example-disabled-switcher.vue b/docs/pages/webitel-ui/components/wt-switcher/examples/example-disabled-switcher.vue
new file mode 100644
index 000000000..6d5ae0256
--- /dev/null
+++ b/docs/pages/webitel-ui/components/wt-switcher/examples/example-disabled-switcher.vue
@@ -0,0 +1,19 @@
+<script setup>
+</script>
+
+<template>
+  <wt-switcher
+    :value="true"
+    label="Disabled Active Switcher"
+    disabled
+  />
+  <wt-switcher
+    :value="false"
+    label="Disabled Inactive Switcher"
+    disabled
+  />
+</template>
+
+<style scoped lang="scss">
+
+</style>
diff --git a/docs/pages/webitel-ui/components/wt-switcher/examples/example-switcher-label-left.vue b/docs/pages/webitel-ui/components/wt-switcher/examples/example-switcher-label-left.vue
new file mode 100644
index 000000000..bbb85ccce
--- /dev/null
+++ b/docs/pages/webitel-ui/components/wt-switcher/examples/example-switcher-label-left.vue
@@ -0,0 +1,18 @@
+<script setup>
+import { ref } from 'vue';
+
+const value = ref(false);
+</script>
+
+<template>
+  <wt-switcher
+    :value="value"
+    label="Label Left Switcher"
+    label-left
+    @change="value = $event"
+  />
+</template>
+
+<style scoped lang="scss">
+
+</style>
diff --git a/docs/pages/webitel-ui/components/wt-switcher/examples/example-switcher.vue b/docs/pages/webitel-ui/components/wt-switcher/examples/example-switcher.vue
new file mode 100644
index 000000000..98f4766d5
--- /dev/null
+++ b/docs/pages/webitel-ui/components/wt-switcher/examples/example-switcher.vue
@@ -0,0 +1,17 @@
+<script setup>
+import { ref } from 'vue';
+
+const value = ref(false);
+</script>
+
+<template>
+  <wt-switcher
+    :value="value"
+    label="Switcher"
+    @change="value = $event"
+  />
+</template>
+
+<style scoped lang="scss">
+
+</style>
diff --git a/docs/pages/webitel-ui/components/wt-switcher/wt-switcher-docs.vue b/docs/pages/webitel-ui/components/wt-switcher/wt-switcher-docs.vue
index 48a38460a..fb99d0a1a 100644
--- a/docs/pages/webitel-ui/components/wt-switcher/wt-switcher-docs.vue
+++ b/docs/pages/webitel-ui/components/wt-switcher/wt-switcher-docs.vue
@@ -1,99 +1,77 @@
 <template>
-  <section>
-    <h2>Switcher</h2>
-    <article>
-      <div class="example-wrapper">
-        <wt-switcher
-          v-model="value"
-          label="Switcher"
-        />
-        <wt-switcher
-          v-model="value"
-          label="Switcher with label left"
-          label-left
-        />
-        <wt-switcher
-          v-model="value"
-          label="Disabled switcher"
-          disabled
-        />
-        <pre><code class="language-html">&lt;wt-switcher v-model="value" label="Switcher"&gt;&lt;/wt-switcher&gt;</code></pre>
-      </div>
-    </article>
-    <component-model
-      event="change"
-    />
-    <component-props
-      :properties="properties"
-    />
-    <component-events
-      :events="events"
-    />
-    <component-slots
-      :slots="slots"
-    />
-  </section>
+  <component-model
+    event="change"
+  />
+  <component-props
+    :properties="properties"
+  />
+  <component-events
+    :events="events"
+  />
+  <component-slots
+    :slots="slots"
+  />
 </template>
 
 <script>
-  import Prism from 'prismjs';
+import Prism from 'prismjs';
 
-  export default {
-    name: 'WtSwitcherDocs',
-    data: () => ({
-      value: false,
-      properties: [
-        {
-          value: 'value',
-          code: '<wt-switcher :value="value"></wt-switcher>',
-          type: 'Boolean',
-          default: 'false',
-        },
-        {
-          value: 'label',
-          code: '<wt-switcher label="Label"></wt-switcher>',
-          type: 'String',
-          default: '',
-        },
-        {
-          value: 'labelLeft',
-          code: '<wt-switcher label-left></wt-switcher>',
-          type: 'Boolean',
-          default: 'false',
-        },
-        {
-          value: 'disabled',
-          code: '<wt-switcher disabled></wt-switcher>',
-          type: 'Boolean',
-          default: 'false',
-        },
-        {
-          value: 'labelProps',
-          code: '<wt-checkbox :label-props="{}"></wt-checkbox>',
-          type: 'Object',
-          description: 'Object with props, passed down to wt-label as props',
-        },
-      ],
-      events: [
-        {
-          value: 'change',
-          params: [
-            { name: 'value', type: 'Boolean', description: 'Returns inverted value' },
-          ],
-        },
-      ],
-      slots: [
-        {
-          name: 'label',
-          scope: [{ name: 'label' }],
-          description: 'Custom label slot',
-        },
-      ],
-    }),
-    mounted() {
-      Prism.highlightAll();
-    },
-  };
+export default {
+  name: 'WtSwitcherDocs',
+  data: () => ({
+    value: false,
+    properties: [
+      {
+        value: 'value',
+        code: '<wt-switcher :value="value"></wt-switcher>',
+        type: 'Boolean',
+        default: 'false',
+      },
+      {
+        value: 'label',
+        code: '<wt-switcher label="Label"></wt-switcher>',
+        type: 'String',
+        default: '',
+      },
+      {
+        value: 'labelLeft',
+        code: '<wt-switcher label-left></wt-switcher>',
+        type: 'Boolean',
+        default: 'false',
+      },
+      {
+        value: 'disabled',
+        code: '<wt-switcher disabled></wt-switcher>',
+        type: 'Boolean',
+        default: 'false',
+      },
+      {
+        value: 'labelProps',
+        code: '<wt-checkbox :label-props="{}"></wt-checkbox>',
+        type: 'Object',
+        description: 'Object with props, passed down to wt-label as props',
+      },
+    ],
+    events: [
+      {
+        value: 'change',
+        params: [
+          { name: 'value', type: 'Boolean', description: 'Returns inverted value' },
+        ],
+      },
+    ],
+    slots: [
+      {
+        name: 'label',
+        scope: [{ name: 'label' }],
+        description: 'Custom label slot',
+      },
+    ],
+  }),
+  mounted() {
+    Prism.highlightAll();
+  },
+};
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/components/wt-switcher/_variables.scss b/src/components/wt-switcher/_variables.scss
index c2e9921e8..0d2815e2c 100644
--- a/src/components/wt-switcher/_variables.scss
+++ b/src/components/wt-switcher/_variables.scss
@@ -6,12 +6,35 @@
   --switcher-cicle-size: 14px;
   --switcher-cicle-margin: 4px;
   --switcher-cicle-translateX: 17px;
-  --switcher-bg-color--off: hsla(var(--_icon-color), var(--_opacity--default));
-  --switcher-bg-color--on: hsla(var(--_accent-color), var(--_opacity--default));
-  --switcher-bg-color--off--hover: hsla(var(--_icon-color), var(--_opacity--hover));
-  --switcher-bg-color--on--hover: hsla(var(--_accent-color), var(--_opacity--hover));
-  --switcher-bg-color--off--disabled: hsla(var(--_icon-color), var(--_opacity--disabled));
-  --switcher-bg-color--on--disabled: hsla(var(--_accent-color), var(--_opacity--disabled));
-  --switcher-circle-bg-color: var(--main-color);
   --switcher-border-radius: 24px;
+
+  // 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-off: var(--grey-lighten-4);
+  --wt-switcher-circle-background-color-off-hover: var(--grey-lighten-5);
+  --wt-switcher-circle-background-color-off-disabled: var(--grey-lighten-3);
+
+  // background
+  --wt-switcher-background-color-on: var(--primary-color);
+  --wt-switcher-background-color-on-hover: var(--primary-hover-color);
+  --wt-switcher-background-color-on-disabled: var(--primary-light-color);
+
+  --wt-switcher-background-color-off: var(--grey-darken-2);
+  --wt-switcher-background-color-off-hover: var(--grey-darken-1);
+  --wt-switcher-background-color-off-disabled: var(--grey-lighten-4);
+}
+
+:root.theme--dark {
+  // circle
+  --wt-switcher-circle-background-color-off: var(--grey-darken-4);
+  --wt-switcher-circle-background-color-off-hover: var(--grey-darken-3);
+  --wt-switcher-circle-background-color-off-disabled: var(--grey-darken-3);
+
+  // background
+  --wt-switcher-background-color-off: var(--grey-lighten-1);
+  --wt-switcher-background-color-off-hover: var(--grey-lighten-2);
+  --wt-switcher-background-color-off-disabled: var(--grey-darken-2);
 }
diff --git a/src/components/wt-switcher/wt-switcher.vue b/src/components/wt-switcher/wt-switcher.vue
index 4ab7268e7..425b18be7 100644
--- a/src/components/wt-switcher/wt-switcher.vue
+++ b/src/components/wt-switcher/wt-switcher.vue
@@ -1,29 +1,30 @@
 <template>
   <div
-    class="wt-switcher"
     :class="{
       'wt-switcher--off': !value,
       'wt-switcher--on': value,
       'wt-switcher--disabled': disabled,
     }"
+    class="wt-switcher"
   >
     <wt-label
-      v-bind="labelProps"
-      class="wt-switcher__wrapper"
       :class="{'wt-switcher__wrapper--label-left': labelLeft}"
+      :disabled="disabled"
+      class="wt-switcher__wrapper"
+      v-bind="labelProps"
     >
       <input
-        class="wt-switcher__input"
-        type="checkbox"
         :checked="value"
         :disabled="disabled"
+        class="wt-switcher__input"
+        type="checkbox"
         @change="inputHandler"
       >
       <span class="wt-switcher__checkmark" />
       <!-- @slot Custom input label -->
       <slot
-        v-bind="{ label, value, disabled }"
         name="label"
+        v-bind="{ label, value, disabled }"
       >
         <div
           v-if="label"
@@ -65,6 +66,9 @@ export default {
       description: 'Object with props, passed down to wt-label as props',
     },
   },
+  emits: [
+    'change',
+  ],
   methods: {
     inputHandler() {
       this.$emit('change', !this.value);
@@ -93,8 +97,8 @@ export default {
   position: relative;
   display: flex;
   align-items: center;
-  user-select: none;
   cursor: pointer;
+  user-select: none;
 
   &.wt-switcher__wrapper--label-left {
     flex-direction: row-reverse;
@@ -106,12 +110,8 @@ export default {
   transition: var(--transition);
 
   .wt-switcher__wrapper--label-left & {
-    margin-left: 0;
     margin-right: var(--switcher-icon-margin);
-  }
-
-  .wt-switcher:hover & {
-    color: var(--form-label--hover-color);
+    margin-left: 0;
   }
 }
 
@@ -119,8 +119,8 @@ export default {
   position: absolute;
   width: 0;
   height: 0;
-  opacity: 0;
   pointer-events: none;
+  opacity: 0;
 }
 
 .wt-switcher__checkmark {
@@ -129,68 +129,84 @@ export default {
   flex: 0 0 var(--switcher-width);
   width: var(--switcher-width);
   height: var(--switcher-height);
-  border-radius: var(--switcher-border-radius);
   transition: var(--transition);
+  border-radius: var(--switcher-border-radius);
 
   &:before {
-    content: '';
     position: absolute;
     bottom: var(--switcher-cicle-margin);
     left: var(--switcher-cicle-margin);
-    height: var(--switcher-cicle-size);
     width: var(--switcher-cicle-size);
-    background: var(--switcher-circle-bg-color);
-    border-radius: 50%;
+    height: var(--switcher-cicle-size);
+    content: '';
     transition: var(--transition);
+    border-radius: 50%;
   }
 }
 
 .wt-switcher--off {
   .wt-switcher__checkmark {
-    background: var(--switcher-bg-color--off);
+    background: var(--wt-switcher-background-color-off);
+
+    &:before {
+      background: var(--wt-switcher-circle-background-color-off);
+    }
   }
 
   &:hover {
     .wt-switcher__checkmark {
-      background: var(--switcher-bg-color--off--hover);
+      background: var(--wt-switcher-background-color-off-hover);
+
+      &:before {
+        background: var(--wt-switcher-circle-background-color-off-hover);
+      }
     }
   }
 
   &.wt-switcher--disabled {
     .wt-switcher__checkmark {
-      background: var(--switcher-bg-color--off--disabled);
+      background: var(--wt-switcher-background-color-off-disabled);
+
+      &:before {
+        background: var(--wt-switcher-circle-background-color-off-disabled);
+      }
     }
   }
 }
 
 .wt-switcher--on {
   .wt-switcher__checkmark {
-    background: var(--switcher-bg-color--on);
+    background: var(--wt-switcher-background-color-on);
 
     /* Show the indicator (dot/circle) when checked */
     &:before {
       transform: translateX(var(--switcher-cicle-translateX));
+      background: var(--wt-switcher-circle-background-color-on);
     }
   }
 
   &:hover {
     .wt-switcher__checkmark {
-      background: var(--switcher-bg-color--on--hover);
+      background: var(--wt-switcher-background-color-on-hover);
+
+      &:before {
+        background: var(--wt-switcher-circle-background-color-on-hover);
+      }
     }
   }
 
   &.wt-switcher--disabled {
     .wt-switcher__checkmark {
-      background: var(--switcher-bg-color--on--disabled);
+      background: var(--wt-switcher-background-color-on-disabled);
+
+      &:before {
+        background: var(--wt-switcher-circle-background-color-on-disabled);
+      }
     }
   }
 }
 
 .wt-switcher--disabled {
   pointer-events: none;
-
-  .wt-switcher__label {
-    color: var(--form-label--disabled-color);
-  }
 }
 </style>