feat(mobile): mobile experimental feature setting (#8922)

close AF-1802

![CleanShot 2024-11-26 at 10.02.27.gif](https://graphite-user-uploaded-assets-prod.s3.amazonaws.com/LakojjjzZNf6ogjOVwKE/09d24e35-a524-497d-b5aa-840bf74f128f.gif)

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

@@ -1,6 +1,18 @@
 import { cssVar } from '@toeverything/theme';
-import { style } from '@vanilla-extract/css';
+import { createVar, style } from '@vanilla-extract/css';
+
+export const switchHeightVar = createVar('switchSize');
+export const switchPaddingVar = createVar('switchPadding');
+const switchWidthVar = createVar('switchWidth');
+const dotSizeVar = createVar('dotSize');
+
 export const labelStyle = style({
+  vars: {
+    [switchHeightVar]: '26px',
+    [switchPaddingVar]: '3px',
+    [switchWidthVar]: `calc((${switchHeightVar} - ${switchPaddingVar}) * 2)`,
+    [dotSizeVar]: `calc(${switchHeightVar} - ${switchPaddingVar} * 2)`,
+  },
   display: 'flex',
   alignItems: 'center',
   gap: '10px',
@@ -12,8 +24,8 @@ export const inputStyle = style({
 });
 export const switchStyle = style({
   position: 'relative',
-  width: '46px',
-  height: '26px',
+  height: switchHeightVar,
+  width: switchWidthVar,
   background: cssVar('toggleDisableBackgroundColor'),
   borderRadius: '37px',
   transition: '200ms all',
@@ -22,12 +34,12 @@ export const switchStyle = style({
       transition: 'all .2s cubic-bezier(0.27, 0.2, 0.25, 1.51)',
       content: '""',
       position: 'absolute',
-      width: '20px',
-      height: '20px',
+      width: dotSizeVar,
+      height: dotSizeVar,
       borderRadius: '50%',
       top: '50%',
       background: cssVar('toggleCircleBackgroundColor'),
-      transform: 'translate(3px, -50%)',
+      transform: `translate(${switchPaddingVar}, -50%)`,
     },
   },
 });
@@ -36,7 +48,7 @@ export const switchCheckedStyle = style({
   selectors: {
     '&:before': {
       borderColor: cssVar('pureBlack10'),
-      transform: 'translate(23px,-50%)',
+      transform: `translate(calc(${switchHeightVar} - ${switchPaddingVar}), -50%)`,
     },
   },
 });