chore: adjust switch style (#2570)

packages/component/package.json

@@ -39,7 +39,7 @@
     "@radix-ui/react-collapsible": "^1.0.3",
     "@radix-ui/react-toast": "^1.1.4",
     "@toeverything/hooks": "workspace:*",
-    "@toeverything/theme": "^0.5.9",
+    "@toeverything/theme": "^0.6.1",
     "@vanilla-extract/dynamic": "^2.0.3",
     "clsx": "^1.2.1",
     "dayjs": "^1.11.7",

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

yarn.lock

@@ -83,7 +83,7 @@ __metadata:
     "@storybook/test-runner": ^0.10.0
     "@storybook/testing-library": ^0.1.0
     "@toeverything/hooks": "workspace:*"
-    "@toeverything/theme": ^0.5.9
+    "@toeverything/theme": ^0.6.1
     "@types/react": ^18.2.6
     "@types/react-dnd": ^3.0.2
     "@types/react-dom": 18.2.4
@@ -8883,13 +8883,20 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@toeverything/theme@npm:0.5.9, @toeverything/theme@npm:^0.5.9":
+"@toeverything/theme@npm:0.5.9":
   version: 0.5.9
   resolution: "@toeverything/theme@npm:0.5.9"
   checksum: 4b0572c7da64e9aa37fe164ba70e8d9c62cc1819e7c1fd2039a1bed397397c03fb9295a1466b89551b7c9f6fd87444ce8f1615eca376277c75423acd6b23fb58
   languageName: node
   linkType: hard
 
+"@toeverything/theme@npm:^0.6.1":
+  version: 0.6.1
+  resolution: "@toeverything/theme@npm:0.6.1"
+  checksum: c7b6e4417db79baefb4907459179cf00d4db8bb896ae0de2b519deecb35b527e182fd2fba47c846953ed13cab5291b9636d96527cded2cf283e54601ff2a8c11
+  languageName: node
+  linkType: hard
+
 "@toeverything/y-indexeddb@workspace:*, @toeverything/y-indexeddb@workspace:packages/y-indexeddb":
   version: 0.0.0-use.local
   resolution: "@toeverything/y-indexeddb@workspace:packages/y-indexeddb"