Updated toggle styles (#1071)

Signed-off-by: Benjamin Perez <[email protected]> Co-authored-by: Benjamin Perez <[email protected]>
minio · Oct 30, 2024 · 4d7b81b · 4d7b81b
1 parent 4e60486
commit 4d7b81b
Show file tree

Hide file tree

Showing 3 changed files with 9 additions and 2 deletions.
diff --git a/src/components/Toggle/Toggle.styles.ts b/src/components/Toggle/Toggle.styles.ts
@@ -44,7 +44,7 @@ export const toggleItemStyles = (theme: Theme) =>
     "& input": {
       display: "none",
       "& ~.ToggleRail": {
-        backgroundColor: theme.colors["Color/Neutral/Bg/colorBgFields"],
+        backgroundColor: theme.colors["Color/Base/Shark/0"],
         border: `1px solid ${theme.colors["Color/Neutral/Border/colorBorderSubtle"]}`,
         "&:hover": {
           borderColor: theme.colors["Color/Neutral/Border/colorBorderBold"],
@@ -60,7 +60,7 @@ export const toggleItemStyles = (theme: Theme) =>
           borderRadius: "100%",
           backgroundColor:
             theme.colors["Color/Neutral/Text/colorTextLightSolid"],
-          boxShadow: theme.shadows["boxShadow-01"],
+          boxShadow: theme.shadows["toggleShadow"],
           transitionDuration: "0.1s",
         },
       },
@@ -84,6 +84,9 @@ export const toggleItemStyles = (theme: Theme) =>
         cursor: "not-allowed",
         borderColor: theme.colors["Color/Neutral/Border/colorBorderSubtle"],
         backgroundColor: theme.colors["Color/Neutral/Bg/colorBgDisabled"],
+        "&:before": {
+          boxShadow: theme.shadows["toggleShadow-Disabled"],
+        },
       },
     },
   });

diff --git a/src/global/global.types.ts b/src/global/global.types.ts
@@ -53,6 +53,8 @@ export interface ShadowsThemeProps {
   "focusStyle-Light": string;
   "focusStyle-Dark": string;
   "contentShadow-Light": string;
+  toggleShadow: string;
+  "toggleShadow-Disabled": string;
 }
 
 export interface ColorThemeProps {

diff --git a/src/global/themeColors.ts b/src/global/themeColors.ts
@@ -463,4 +463,6 @@ export const themeShadows = {
   "focusStyle-Light": "0px 0px 0px 2px rgba(43, 100, 229, 0.30)",
   "focusStyle-Dark": "0px 0px 0px 2px rgba(100, 164, 245, 0.30)",
   "contentShadow-Light": "0px 2px 2px 0px rgba(121, 135, 151, 0.15)",
+  toggleShadow: "0px 1px 1px 0px rgba(0,0,0,0.20)",
+  "toggleShadow-Disabled": "0px 1px 1px 0px rgba(0,0,0,0.05)",
 };