chore: adjust switch style (#2570)

packages/component/src/ui/switch/index.css.ts

@@ -0,0 +1,46 @@
+import { style } from '@vanilla-extract/css';
+
+export const labelStyle = style({
+  display: 'flex',
+  alignItems: 'center',
+  gap: '10px',
+  cursor: 'pointer',
+});
+export const inputStyle = style({
+  opacity: 0,
+  position: 'absolute',
+});
+export const switchStyle = style({
+  position: 'relative',
+  width: '46px',
+  height: '26px',
+  background: 'var(--affine-toggle-disable-background-color)',
+  borderRadius: '37px',
+  transition: '200ms all',
+  border: '1px solid var(--affine-black-10)',
+  boxShadow: 'var(--affine-toggle-circle-shadow)',
+  selectors: {
+    '&:before': {
+      transition: 'all .2s cubic-bezier(0.27, 0.2, 0.25, 1.51)',
+      content: '""',
+      position: 'absolute',
+      width: '20px',
+      height: '20px',
+      borderRadius: '50%',
+      top: '50%',
+      border: '1px solid var(--affine-black-10)',
+      background: 'var(--affine-white)',
+      transform: 'translate(1px, -50%)',
+      boxShadow: 'var(--affine-toggle-circle-shadow)',
+    },
+  },
+});
+export const switchCheckedStyle = style({
+  background: 'var(--affine-primary-color)',
+  selectors: {
+    '&:before': {
+      background: 'var(--affine-toggle-circle-background-color)',
+      transform: 'translate(100%,-50%)',
+    },
+  },
+});

packages/component/src/ui/switch/switch.tsx

@@ -1,55 +1,8 @@
 // components/switch.tsx
+import clsx from 'clsx';
 import { useState } from 'react';
 
-import { styled } from '../../styles';
-
-const StyledLabel = styled('label')(() => {
-  return {
-    display: 'flex',
-    alignItems: 'center',
-    gap: '10px',
-    cursor: 'pointer',
-  };
-});
-const StyledInput = styled('input')(() => {
-  return {
-    opacity: 0,
-    position: 'absolute',
-
-    '&:checked': {
-      '& + span': {
-        background: '#6880FF',
-        '&:before': {
-          transform: 'translate(28px, -50%)',
-        },
-      },
-    },
-  };
-});
-const StyledSwitch = styled('span')(() => {
-  return {
-    position: 'relative',
-    width: '60px',
-    height: '28px',
-    background: '#b3b3b3',
-    borderRadius: '32px',
-    padding: '4px',
-    transition: '300ms all',
-
-    '&:before': {
-      transition: '300ms all',
-      content: '""',
-      position: 'absolute',
-      width: '28px',
-      height: '28px',
-      borderRadius: '35px',
-      top: '50%',
-      left: '4px',
-      background: 'white',
-      transform: 'translate(-4px, -50%)',
-    },
-  };
-});
+import * as styles from './index.css';
 
 type SwitchProps = {
   checked?: boolean;
@@ -68,14 +21,19 @@ export const Switch = (props: SwitchProps) => {
   };
 
   return (
-    <StyledLabel>
+    <label className={clsx(styles.labelStyle)}>
       {children}
-      <StyledInput
+      <input
+        className={clsx(styles.inputStyle)}
         type="checkbox"
         checked={isChecked}
         onChange={handleChange}
       />
-      <StyledSwitch />
-    </StyledLabel>
+      <span
+        className={clsx(styles.switchStyle, {
+          [styles.switchCheckedStyle]: isChecked,
+        })}
+      />
+    </label>
   );
 };