refactor: wt-switcher colors [WTEL-3958]

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
+:::

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>

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>

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>

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>

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