feat(toggle): update styles to material 3

konstaui · Aug 5, 2022 · 187942b · 187942b
1 parent d09f2ac
commit 187942b
Show file tree

Hide file tree

Showing 4 changed files with 33 additions and 11 deletions.
diff --git a/src/react/components/Toggle.jsx b/src/react/components/Toggle.jsx
@@ -69,7 +69,9 @@ const Toggle = forwardRef((props, ref) => {
         className={c.input}
       />
       <span className={c.inner[state]} />
-      <span className={c.knob[state]} />
+      <span className={c.knob[state]}>
+        <span className={c.knobBg[state]} />
+      </span>
       {children}
     </Component>
   );

diff --git a/src/shared/classes/ToggleClasses.js b/src/shared/classes/ToggleClasses.js
@@ -6,23 +6,23 @@ export const ToggleClasses = (props, colors, classes, darkClasses) => {
     base: {
       common: cls(
         positionClass('relative', classes),
-        `cursor-pointer select-none inline-block align-middle relative duration-300 rounded-full`
+        `cursor-pointer select-none inline-block align-middle relative duration-300 rounded-full group`
       ),
       ios: 'h-8 w-13 p-0.5',
-      material: 'w-9 h-3.5',
+      material: 'w-14 h-7',
       notChecked: {
         ios: cls(
           'bg-black bg-opacity-10',
           darkClasses('dark:bg-white dark:bg-opacity-20')
         ),
         material: cls(
-          'bg-black bg-opacity-30',
-          darkClasses('dark:bg-white dark:bg-opacity-30')
+          `bg-black bg-opacity-20`,
+          darkClasses('dark:bg-white dark:bg-opacity-20')
         ),
       },
       checked: {
         ios: `${colors.bg}`,
-        material: `${colors.bg} bg-opacity-50`,
+        material: cls(`${colors.bg}`, darkClasses('dark:bg-opacity-40')),
       },
     },
     inner: {
@@ -38,13 +38,29 @@ export const ToggleClasses = (props, colors, classes, darkClasses) => {
     knob: {
       common: 'rounded-full absolute duration-300 transform',
       ios: 'w-7 h-7 shadow-ios-toggle left-0.5 top-0.5 bg-white',
-      material: 'w-5 h-5 shadow-md left-0 -top-0.75',
+      material: 'w-5 h-5 left-1 top-1 group-active:scale-[1.1]',
       checked: {
         ios: 'translate-x-5',
-        material: `${colors.bg} translate-x-4`,
+        material: cls(`bg-white translate-x-7`),
+      },
+      notChecked: {
+        material: cls(
+          'bg-black bg-opacity-40',
+          darkClasses('dark:bg-white dark:bg-opacity-40')
+        ),
+      },
+    },
+    knobBg: {
+      common: '',
+      material: cls(
+        'rounded-full absolute left-0 top-0 w-full h-full duration-300',
+        colors.bg
+      ),
+      checked: {
+        material: cls('opacity-0', darkClasses('dark:opacity-30')),
       },
       notChecked: {
-        material: 'bg-white',
+        material: 'opacity-0',
       },
     },
     input: {

diff --git a/src/svelte/components/Toggle.svelte b/src/svelte/components/Toggle.svelte
@@ -46,6 +46,8 @@
     class={c.input}
   />
   <span class={c.inner[state]} />
-  <span class={c.knob[state]} />
+  <span class={c.knob[state]}>
+    <span class={c.knobBg[state]} />
+  </span>
   <slot />
 </label>
diff --git a/src/vue/components/Toggle.vue b/src/vue/components/Toggle.vue
@@ -10,7 +10,9 @@
       :class="c.input"
     />
     <span :class="c.inner[state]" />
-    <span :class="c.knob[state]" />
+    <span :class="c.knob[state]">
+      <span :class="c.knobBg[state]" />
+    </span>
     <slot />
   </component>
 </template>