feat: new colors * 6

Author: tenphi

src/components/fields/Switch/Switch.tsx

@@ -49,19 +49,25 @@ const SwitchElement = tasty({
     placeSelf: 'center',
     radius: 'round',
     fill: {
-      '': '#dark.50',
+      '': '#white',
       checked: '#purple',
       disabled: '#dark.12',
     },
-    color: '#white',
-    border: false,
+    color: {
+      '': '#dark-03',
+      checked: '#white',
+    },
+    border: {
+      '': '#dark-05',
+      checked: '#purple',
+    },
     width: {
-      '': '5.25x 5.25x',
+      '': '5.5x 5.5x',
       '[data-size="small"]': '3.5x 3.5x',
     },
     height: {
       '': '3x 3x',
-      '[data-size="small"]': '2x 2x',
+      '[data-size="small"]': '2.25x 2.25x',
     },
     outline: {
       '': '#purple-03.0',
@@ -77,24 +83,27 @@ const SwitchElement = tasty({
     Thumb: {
       position: 'absolute',
       width: {
-        '': '2.5x 2.5x',
+        '': '2.25x 2.25x',
         '[data-size="small"]': '1.5x 1.5x',
       },
       height: {
-        '': '2.5x 2.5x',
+        '': '2.25x 2.25x',
         '[data-size="small"]': '1.5x 1.5x',
       },
       radius: 'round',
       fill: {
         '': 'currentColor',
         disabled: '#white.5',
       },
-      shadow: '0px 2px 4px #dark.20;',
-      top: '.25x',
+      top: {
+        '': '.375x',
+        '[data-size="small"]': '.375x',
+      },
       left: {
-        '': '.25x',
-        checked: '2.5x',
-        'checked & [data-size="small"]': '1.75x',
+        '': '.375x',
+        '[data-size="small"]': '.375x',
+        checked: '2.75x',
+        'checked & [data-size="small"]': '1.5x',
       },
       transition: 'left, theme',
       cursor: 'pointer',

src/icons/Icon.tsx

@@ -50,7 +50,7 @@ export const Icon = memo(
     props: CubeIconProps,
     ref: ForwardedRef<HTMLSpanElement>,
   ) {
-    const { size, styles, stroke, ...rest } = props;
+    const { size, stroke, ...rest } = props;
 
     const mergedProps =
       size != null && stroke != null

src/tokens.ts

@@ -34,7 +34,7 @@ const colors = {
   'note-bg': '251 239 219',
   'note-icon': '181 140 44',
   border: '227 227 233',
-  'light-border': '238 238 241',
+  'light-border': '237 237 240',
 };
 
 function color(name, opacity = 1) {
@@ -50,6 +50,7 @@ const TOKENS = {
   'input-letter-spacing': '0.02em',
   'disabled-opacity': '.4',
   gap: '8px',
+  'stroke-width': 1.5,
   'outline-width': 'calc(1rem / 16 * 3)',
   'border-width': '1px',
   radius: '6px',