From 8fc0617ad1bcc0d8d0ab78cffcfc25aa17c9d711 Mon Sep 17 00:00:00 2001
From: Cheton Wu <cheton@gmail.com>
Date: Fri, 10 Jun 2022 17:54:05 +0800
Subject: [PATCH] fix: the track's border color of the `Switch` component
 should be white in light mode (#597)

* fix: fix incorrect track border color in light mode

* feat: change SVG attribute naming

* chore: remove deprecated attributes
---
 packages/react/src/switch/Switch.js | 10 ++++-----
 packages/react/src/switch/styles.js | 33 ++++++++++++++++-------------
 2 files changed, 23 insertions(+), 20 deletions(-)

diff --git a/packages/react/src/switch/Switch.js b/packages/react/src/switch/Switch.js
index 8bded1d199..7225be0ba5 100644
--- a/packages/react/src/switch/Switch.js
+++ b/packages/react/src/switch/Switch.js
@@ -56,33 +56,33 @@ const Switch = forwardRef((
       <ControlBox {...baseStyle}>
         <Box
           as="svg"
-          data-toggle-svg
+          data-switch
           {...switchSVGStyle}
         >
           <Box
             as="rect"
-            data-toggle-switch-track-halo
+            data-switch-track-halo
             x="0"
             y="0"
             {...switchTrackHaloStyle}
           />
           <Box
             as="rect"
-            data-toggle-switch-track-border
+            data-switch-track-border
             x="2"
             y="2"
             {...switchTrackBorderStyle}
           />
           <Box
             as="rect"
-            data-toggle-switch-track
+            data-switch-track
             x="3"
             y="3"
             {...switchTrackStyle}
           />
           <Box
             as="circle"
-            data-toggle-switch-thumb
+            data-switch-thumb
             {...switchThumbStyle}
           />
         </Box>
diff --git a/packages/react/src/switch/styles.js b/packages/react/src/switch/styles.js
index ffa929ddc7..b32daa39cd 100644
--- a/packages/react/src/switch/styles.js
+++ b/packages/react/src/switch/styles.js
@@ -31,46 +31,49 @@ const baseStyle = ({
     dark: `${variantColor}:60`,
     light: `${variantColor}:40`,
   }[colorMode];
-
   const checkedAndHoverColor = {
     dark: `${variantColor}:50`,
     light: `${variantColor}:30`,
   }[colorMode];
+  const trackBorderColor = {
+    dark: 'black',
+    light: 'white',
+  }[colorMode];
 
   return {
     width: switchMaxWidth,
     height: switchMaxHeight,
     _child: {
-      opacity: 1
+      opacity: 1,
     },
     _hover: {
-      '[data-toggle-svg] [data-toggle-switch-track]': {
-        fill: 'gray:50'
+      '[data-switch] [data-switch-track]': {
+        fill: 'gray:50',
       },
     },
     _focus: {
-      '[data-toggle-svg] [data-toggle-switch-track-halo]': {
-        fill: focusAndCheckedColor
+      '[data-switch] [data-switch-track-halo]': {
+        fill: focusAndCheckedColor,
       },
-      '[data-toggle-svg] [data-toggle-switch-track-border]': {
-        fill: 'black'
+      '[data-switch] [data-switch-track-border]': {
+        fill: trackBorderColor,
       }
     },
     _checked: {
-      '[data-toggle-svg] [data-toggle-switch-track]': {
-        fill: focusAndCheckedColor
+      '[data-switch] [data-switch-track]': {
+        fill: focusAndCheckedColor,
       },
-      '[data-toggle-svg] [data-toggle-switch-thumb]': {
-        transform: `translateX(${height}px)`
+      '[data-switch] [data-switch-thumb]': {
+        transform: `translateX(${height}px)`,
       },
     },
     _checkedAndHover: {
-      '[data-toggle-svg] [data-toggle-switch-track]': {
-        fill: checkedAndHoverColor
+      '[data-switch] [data-switch-track]': {
+        fill: checkedAndHoverColor,
       },
     },
     _disabled: {
-      opacity: 0.28
+      opacity: 0.28,
     }
   };
 };