diff --git a/apps/wallet-mobile/.storybook/stories/Button/ExampleButton.js b/apps/wallet-mobile/.storybook/stories/Button/ExampleButton.js
index 7ade4979b0..a219c6dbff 100644
--- a/apps/wallet-mobile/.storybook/stories/Button/ExampleButton.js
+++ b/apps/wallet-mobile/.storybook/stories/Button/ExampleButton.js
@@ -18,10 +18,10 @@ const useStyles = () => {
container: {
...atoms.px_lg,
...atoms.py_sm,
- backgroundColor: color.primary_c500,
+ backgroundColor: color.primary_500,
borderRadius: 8,
},
- text: {color: color.gray_cmin},
+ text: {color: color.gray_min},
})
return styles
diff --git a/apps/wallet-mobile/package.json b/apps/wallet-mobile/package.json
index aa724435f6..46da6db6b3 100644
--- a/apps/wallet-mobile/package.json
+++ b/apps/wallet-mobile/package.json
@@ -135,7 +135,7 @@
"@yoroi/setup-wallet": "^1.0.1",
"@yoroi/staking": "^1.5.2",
"@yoroi/swap": "^2.0.1",
- "@yoroi/theme": "^1.0.0",
+ "@yoroi/theme": "^2.0.0",
"@yoroi/transfer": "^1.0.1",
"add": "2.0.6",
"assert": "^2.0.0",
diff --git a/apps/wallet-mobile/src/WalletNavigator.tsx b/apps/wallet-mobile/src/WalletNavigator.tsx
index 4b64dc7397..19011da328 100644
--- a/apps/wallet-mobile/src/WalletNavigator.tsx
+++ b/apps/wallet-mobile/src/WalletNavigator.tsx
@@ -274,10 +274,10 @@ const useStyles = () => {
})
const colors = {
- active: color.text_primary_high,
+ active: color.text_primary_max,
inactive: color.text_gray_medium,
- background: color.gray_cmin,
- divider: color.gray_c200,
+ background: color.gray_min,
+ divider: color.gray_200,
}
return {colors, styles}
diff --git a/apps/wallet-mobile/src/components/Accordion/Accordion.tsx b/apps/wallet-mobile/src/components/Accordion/Accordion.tsx
index 4c934ecb0e..a8b586b009 100644
--- a/apps/wallet-mobile/src/components/Accordion/Accordion.tsx
+++ b/apps/wallet-mobile/src/components/Accordion/Accordion.tsx
@@ -71,7 +71,7 @@ const useStyles = () => {
const styles = StyleSheet.create({
root: {
...atoms.flex_1,
- backgroundColor: color.bg_color_high,
+ backgroundColor: color.bg_color_max,
},
header: {
...atoms.flex_row,
@@ -85,7 +85,7 @@ const useStyles = () => {
headerLabel: {
...atoms.body_1_lg_medium,
...atoms.font_semibold,
- color: color.gray_c800,
+ color: color.gray_800,
},
content: {
...atoms.flex_1,
@@ -99,7 +99,7 @@ const useStyles = () => {
},
})
const colors = {
- gray: color.gray_c800,
+ gray: color.gray_800,
}
return {styles, colors} as const
}
diff --git a/apps/wallet-mobile/src/components/AmountItem/AmountItem.tsx b/apps/wallet-mobile/src/components/AmountItem/AmountItem.tsx
index 883a0d464a..b2c3e12d19 100644
--- a/apps/wallet-mobile/src/components/AmountItem/AmountItem.tsx
+++ b/apps/wallet-mobile/src/components/AmountItem/AmountItem.tsx
@@ -131,12 +131,12 @@ const useStyles = () => {
height: 56,
},
placeholderElement1: {
- backgroundColor: color.gray_c200,
+ backgroundColor: color.gray_200,
borderRadius: 8,
flexGrow: 3,
},
placeholderElement2: {
- backgroundColor: color.gray_c200,
+ backgroundColor: color.gray_200,
borderRadius: 8,
flexGrow: 1,
},
@@ -150,20 +150,20 @@ const useStyles = () => {
alignItems: 'flex-end',
},
name: {
- color: color.gray_c900,
+ color: color.gray_900,
fontSize: 16,
lineHeight: 22,
fontWeight: '500',
fontFamily: 'Rubik-Medium',
},
detail: {
- color: color.gray_c600,
+ color: color.gray_600,
fontSize: 12,
lineHeight: 18,
maxWidth: 140,
},
quantity: {
- color: color.gray_c900,
+ color: color.gray_900,
...atoms.body_1_lg_regular,
textAlign: 'right',
flexGrow: 1,
@@ -176,8 +176,8 @@ const useStyles = () => {
})
const colors = {
- text: color.gray_c900,
- icon: color.secondary_c600,
+ text: color.gray_900,
+ icon: color.secondary_600,
}
return {styles, colors}
diff --git a/apps/wallet-mobile/src/components/Analytics/Analytics.tsx b/apps/wallet-mobile/src/components/Analytics/Analytics.tsx
index 9a629aee81..f2905f13e6 100644
--- a/apps/wallet-mobile/src/components/Analytics/Analytics.tsx
+++ b/apps/wallet-mobile/src/components/Analytics/Analytics.tsx
@@ -191,7 +191,7 @@ const useStyles = () => {
const styles = StyleSheet.create({
container: {
flex: 1,
- backgroundColor: color.bg_color_high,
+ backgroundColor: color.bg_color_max,
},
content: {
alignItems: 'center',
@@ -211,7 +211,7 @@ const useStyles = () => {
alignItems: 'baseline',
},
link: {
- color: color.primary_c600,
+ color: color.primary_600,
textAlign: 'center',
},
title: {
@@ -222,15 +222,15 @@ const useStyles = () => {
borderWidth: 0,
},
skipText: {
- color: color.primary_c900,
+ color: color.primary_900,
},
tick: {
- color: color.primary_c700,
+ color: color.primary_700,
paddingRight: 8,
fontSize: 16,
},
cross: {
- color: color.sys_magenta_c500,
+ color: color.sys_magenta_500,
paddingRight: 8,
fontSize: 16,
},
@@ -243,13 +243,13 @@ const useStyles = () => {
width: '100%',
position: 'absolute',
bottom: 0,
- backgroundColor: color.bg_color_high,
+ backgroundColor: color.bg_color_max,
height: BOTTOM_BUTTON_ROW_HEIGHT,
padding: 16,
},
borderTop: {
borderTopWidth: 1,
- borderTopColor: color.gray_c500,
+ borderTopColor: color.gray_500,
},
})
diff --git a/apps/wallet-mobile/src/components/Banner/Banner.tsx b/apps/wallet-mobile/src/components/Banner/Banner.tsx
index d1f6bfac71..d05f310697 100644
--- a/apps/wallet-mobile/src/components/Banner/Banner.tsx
+++ b/apps/wallet-mobile/src/components/Banner/Banner.tsx
@@ -51,16 +51,16 @@ const useStyles = () => {
const {color, atoms} = useTheme()
const styles = StyleSheet.create({
banner: {
- backgroundColor: color.gray_c100,
+ backgroundColor: color.gray_100,
...atoms.p_lg,
alignItems: 'center',
justifyContent: 'center',
},
textError: {
- color: color.sys_magenta_c500,
+ color: color.sys_magenta_500,
},
bannerError: {
- backgroundColor: color.bg_color_high,
+ backgroundColor: color.bg_color_max,
...atoms.py_sm,
},
label: {
diff --git a/apps/wallet-mobile/src/components/Boundary/Boundary.tsx b/apps/wallet-mobile/src/components/Boundary/Boundary.tsx
index f3efe8b76f..d17826f6d8 100644
--- a/apps/wallet-mobile/src/components/Boundary/Boundary.tsx
+++ b/apps/wallet-mobile/src/components/Boundary/Boundary.tsx
@@ -249,7 +249,7 @@ const useStyles = () => {
},
container: {
...atoms.flex_1,
- backgroundColor: color.bg_color_high,
+ backgroundColor: color.bg_color_max,
...atoms.align_center,
...atoms.p_lg,
},
diff --git a/apps/wallet-mobile/src/components/Button/Button.tsx b/apps/wallet-mobile/src/components/Button/Button.tsx
index b40c8f2fcc..40840e03ba 100644
--- a/apps/wallet-mobile/src/components/Button/Button.tsx
+++ b/apps/wallet-mobile/src/components/Button/Button.tsx
@@ -106,7 +106,7 @@ const useStyles = () => {
const buttonOutline = {
borderWidth: 2,
- borderColor: color.gray_cmin,
+ borderColor: color.gray_min,
backgroundColor: 'transparent',
}
const styles = StyleSheet.create({
@@ -114,7 +114,7 @@ const useStyles = () => {
flex: 1,
},
button: {
- backgroundColor: color.secondary_c500,
+ backgroundColor: color.secondary_500,
minHeight: 48,
maxHeight: 54,
borderRadius: 8,
@@ -129,11 +129,11 @@ const useStyles = () => {
...buttonOutline,
},
mainTheme: {
- backgroundColor: color.primary_c500,
+ backgroundColor: color.primary_500,
},
buttonOutlineOnLight: {
...buttonOutline,
- borderColor: color.secondary_c500,
+ borderColor: color.secondary_500,
},
buttonOutlineShelley: {
...buttonOutline,
@@ -147,7 +147,7 @@ const useStyles = () => {
textTransform: 'uppercase',
},
textOutlineOnLight: {
- color: color.secondary_c500,
+ color: color.secondary_500,
},
textOutlineShelley: {
color: color.text_primary_medium,
@@ -159,20 +159,20 @@ const useStyles = () => {
color: color.text_gray_min,
},
shelleyTheme: {
- backgroundColor: color.primary_c500,
+ backgroundColor: color.primary_500,
},
shelleyOutlineOnLight: {
backgroundColor: 'transparent',
- borderColor: color.primary_c600,
+ borderColor: color.primary_600,
borderWidth: 2,
},
textShelleyOutlineOnLight: {
- color: color.primary_c600,
+ color: color.primary_600,
fontWeight: '600',
},
isCopying: {
position: 'absolute',
- backgroundColor: color.gray_cmax,
+ backgroundColor: color.gray_max,
alignItems: 'center',
justifyContent: 'center',
top: -50,
@@ -181,7 +181,7 @@ const useStyles = () => {
zIndex: 10,
},
copiedText: {
- color: color.gray_cmin,
+ color: color.gray_min,
textAlign: 'center',
...atoms.p_sm,
...atoms.body_2_md_medium,
diff --git a/apps/wallet-mobile/src/components/ChainWarning/GradientWarning.tsx b/apps/wallet-mobile/src/components/ChainWarning/GradientWarning.tsx
index 90da57cf8f..80345d7df8 100644
--- a/apps/wallet-mobile/src/components/ChainWarning/GradientWarning.tsx
+++ b/apps/wallet-mobile/src/components/ChainWarning/GradientWarning.tsx
@@ -26,7 +26,7 @@ export const GradientWarning = ({title, description, onClose}: Props) => {
>
{onClose != null && (
-
+
)}
@@ -52,12 +52,12 @@ const useStyles = () => {
title: {
...atoms.body_1_lg_medium,
...atoms.font_semibold,
- color: color.gray_cmax,
+ color: color.gray_max,
},
description: {
...atoms.body_2_md_regular,
...atoms.font_normal,
- color: color.gray_c900,
+ color: color.gray_900,
},
closeButton: {
...atoms.absolute,
diff --git a/apps/wallet-mobile/src/components/Checkbox/Checkbox.tsx b/apps/wallet-mobile/src/components/Checkbox/Checkbox.tsx
index 28aecbef3c..cc816fff7f 100644
--- a/apps/wallet-mobile/src/components/Checkbox/Checkbox.tsx
+++ b/apps/wallet-mobile/src/components/Checkbox/Checkbox.tsx
@@ -38,7 +38,7 @@ const useStyles = () => {
text: {
flex: 1,
...atoms.body_1_lg_regular,
- color: color.gray_c900,
+ color: color.gray_900,
},
icon: {
...atoms.py_xs,
diff --git a/apps/wallet-mobile/src/components/ConfirmTx/ConfirmTx.tsx b/apps/wallet-mobile/src/components/ConfirmTx/ConfirmTx.tsx
index 30b8d77ce0..d0cb76a882 100644
--- a/apps/wallet-mobile/src/components/ConfirmTx/ConfirmTx.tsx
+++ b/apps/wallet-mobile/src/components/ConfirmTx/ConfirmTx.tsx
@@ -317,7 +317,7 @@ const useStyles = () => {
const {color} = useTheme()
const styles = StyleSheet.create({
root: {
- backgroundColor: color.bg_color_high,
+ backgroundColor: color.bg_color_max,
},
actionContainer: {
justifyContent: 'space-between',
diff --git a/apps/wallet-mobile/src/components/ConfirmTxWithOsModal/ConfirmTxWithOsModal.tsx b/apps/wallet-mobile/src/components/ConfirmTxWithOsModal/ConfirmTxWithOsModal.tsx
index e2788fe781..bd4ba92c97 100644
--- a/apps/wallet-mobile/src/components/ConfirmTxWithOsModal/ConfirmTxWithOsModal.tsx
+++ b/apps/wallet-mobile/src/components/ConfirmTxWithOsModal/ConfirmTxWithOsModal.tsx
@@ -70,7 +70,7 @@ const useStyles = () => {
...atoms.px_lg,
},
errorMessage: {
- color: color.sys_magenta_c500,
+ color: color.sys_magenta_500,
textAlign: 'center',
},
})
diff --git a/apps/wallet-mobile/src/components/ConfirmTxWithSpendingPasswordModal/ConfirmTxWithSpendingPasswordModal.tsx b/apps/wallet-mobile/src/components/ConfirmTxWithSpendingPasswordModal/ConfirmTxWithSpendingPasswordModal.tsx
index 975e1cf69e..f7581653b4 100644
--- a/apps/wallet-mobile/src/components/ConfirmTxWithSpendingPasswordModal/ConfirmTxWithSpendingPasswordModal.tsx
+++ b/apps/wallet-mobile/src/components/ConfirmTxWithSpendingPasswordModal/ConfirmTxWithSpendingPasswordModal.tsx
@@ -134,7 +134,7 @@ const useStyles = () => {
paddingBottom: 8,
},
errorMessage: {
- color: color.sys_magenta_c500,
+ color: color.sys_magenta_500,
textAlign: 'center',
},
loading: {
diff --git a/apps/wallet-mobile/src/components/CopyButton.tsx b/apps/wallet-mobile/src/components/CopyButton.tsx
index d2d5fd9f02..b7a18259ac 100644
--- a/apps/wallet-mobile/src/components/CopyButton.tsx
+++ b/apps/wallet-mobile/src/components/CopyButton.tsx
@@ -70,13 +70,13 @@ const useStyles = () => {
const {color, atoms} = useTheme()
const colors = {
- gray: color.gray_c900,
+ gray: color.gray_900,
}
const styles = StyleSheet.create({
isCopying: {
position: 'absolute',
- backgroundColor: color.gray_cmax,
+ backgroundColor: color.gray_max,
alignItems: 'center',
justifyContent: 'center',
bottom: 20,
@@ -86,7 +86,7 @@ const useStyles = () => {
zIndex: 10,
},
copiedText: {
- color: color.gray_cmin,
+ color: color.gray_min,
textAlign: 'center',
padding: 8,
flex: 1,
diff --git a/apps/wallet-mobile/src/components/ErrorBoundary/ErrorBoundary.tsx b/apps/wallet-mobile/src/components/ErrorBoundary/ErrorBoundary.tsx
index 636d64400f..247787b6fa 100644
--- a/apps/wallet-mobile/src/components/ErrorBoundary/ErrorBoundary.tsx
+++ b/apps/wallet-mobile/src/components/ErrorBoundary/ErrorBoundary.tsx
@@ -100,30 +100,30 @@ const useStyles = () => {
justifyContent: 'center',
alignItems: 'center',
paddingTop: 70,
- backgroundColor: color.bg_color_high,
+ backgroundColor: color.bg_color_max,
},
scroll: {
width: '100%',
},
title: {
...atoms.heading_4_regular,
- color: color.el_gray_high,
+ color: color.el_gray_max,
},
headerView: {
alignItems: 'center',
},
paragraph: {
...atoms.body_2_md_regular,
- color: color.el_gray_high,
+ color: color.el_gray_max,
},
errorSection: {
...atoms.py_lg,
- color: color.el_gray_high,
+ color: color.el_gray_max,
},
errorSectionHeader: {
flexDirection: 'row',
justifyContent: 'space-between',
- color: color.el_gray_high,
+ color: color.el_gray_max,
},
})
return styles
diff --git a/apps/wallet-mobile/src/components/ErrorBoundary/ExpandableItem/ExpandableItem.tsx b/apps/wallet-mobile/src/components/ErrorBoundary/ExpandableItem/ExpandableItem.tsx
index a65534884c..0728f9f6ea 100644
--- a/apps/wallet-mobile/src/components/ErrorBoundary/ExpandableItem/ExpandableItem.tsx
+++ b/apps/wallet-mobile/src/components/ErrorBoundary/ExpandableItem/ExpandableItem.tsx
@@ -52,12 +52,12 @@ const useStyles = () => {
...atoms.p_md,
},
disabled: {
- color: color.gray_c600,
+ color: color.gray_600,
},
contentWrapper: {
...atoms.p_lg,
},
})
- return {styles, colors: {icon: color.gray_cmax}} as const
+ return {styles, colors: {icon: color.gray_max}} as const
}
diff --git a/apps/wallet-mobile/src/components/ErrorModal/ErrorModal.tsx b/apps/wallet-mobile/src/components/ErrorModal/ErrorModal.tsx
index 9ca760b4f1..7dd700fee8 100644
--- a/apps/wallet-mobile/src/components/ErrorModal/ErrorModal.tsx
+++ b/apps/wallet-mobile/src/components/ErrorModal/ErrorModal.tsx
@@ -91,7 +91,7 @@ export const ErrorModal = ({visible, title, errorMessage, errorLogs, onRequestCl
const useStyles = () => {
const {color, atoms} = useTheme()
const text = {
- color: color.gray_cmax,
+ color: color.gray_max,
...atoms.body_2_md_regular,
}
const styles = StyleSheet.create({
@@ -124,7 +124,7 @@ const useStyles = () => {
showErrorTrigger: {
flex: 1,
...text,
- color: color.gray_c700,
+ color: color.gray_700,
},
errorSectionView: {
elevation: 1,
@@ -132,7 +132,7 @@ const useStyles = () => {
shadowRadius: 12,
shadowOpacity: 0.06,
shadowColor: color.black_static,
- backgroundColor: color.bg_color_high,
+ backgroundColor: color.bg_color_max,
borderRadius: 8,
},
errorSectionContent: {
@@ -143,7 +143,7 @@ const useStyles = () => {
},
})
const colors = {
- icon: color.gray_c400,
+ icon: color.gray_400,
}
return {styles, colors}
}
diff --git a/apps/wallet-mobile/src/components/ErrorPanel/ErrorPanel.tsx b/apps/wallet-mobile/src/components/ErrorPanel/ErrorPanel.tsx
index d8187bfeb2..3da8859aab 100644
--- a/apps/wallet-mobile/src/components/ErrorPanel/ErrorPanel.tsx
+++ b/apps/wallet-mobile/src/components/ErrorPanel/ErrorPanel.tsx
@@ -35,7 +35,7 @@ const useStyles = () => {
},
})
const colors = {
- icon: color.sys_magenta_c500,
+ icon: color.sys_magenta_500,
}
return {styles, colors}
}
diff --git a/apps/wallet-mobile/src/components/ExpandableInfoCard/ExpandableInfoCard.tsx b/apps/wallet-mobile/src/components/ExpandableInfoCard/ExpandableInfoCard.tsx
index 2eb8a0b850..3b390582c9 100644
--- a/apps/wallet-mobile/src/components/ExpandableInfoCard/ExpandableInfoCard.tsx
+++ b/apps/wallet-mobile/src/components/ExpandableInfoCard/ExpandableInfoCard.tsx
@@ -190,16 +190,16 @@ const useStyles = () => {
const styles = StyleSheet.create({
container: {
...atoms.p_lg,
- borderColor: color.gray_c200,
- backgroundColor: color.bg_color_high,
+ borderColor: color.gray_200,
+ backgroundColor: color.bg_color_max,
borderRadius: 8,
borderWidth: 1,
width: '100%',
height: 'auto',
},
shadowProp: {
- backgroundColor: color.bg_color_high,
- shadowColor: color.gray_cmax,
+ backgroundColor: color.bg_color_max,
+ shadowColor: color.gray_max,
shadowOffset: {
width: 0,
height: 1,
@@ -222,15 +222,15 @@ const useStyles = () => {
text: {
textAlign: 'left',
...atoms.body_1_lg_regular,
- color: color.gray_cmax,
+ color: color.gray_max,
},
gray: {
- color: color.gray_c600,
+ color: color.gray_600,
...atoms.body_1_lg_regular,
},
buttonLabel: {
paddingTop: 13,
- color: color.gray_cmax,
+ color: color.gray_max,
...atoms.body_2_md_medium,
},
info: {
@@ -241,10 +241,10 @@ const useStyles = () => {
textAlign: 'right',
flexShrink: 1,
...atoms.body_1_lg_regular,
- color: color.gray_c900,
+ color: color.gray_900,
},
label: {
- color: color.gray_c600,
+ color: color.gray_600,
paddingRight: 8,
...atoms.body_1_lg_regular,
},
@@ -254,8 +254,8 @@ const useStyles = () => {
})
const colors = {
- skeletonBackground: color.gray_c200,
- gray: color.gray_cmax,
+ skeletonBackground: color.gray_200,
+ gray: color.gray_max,
}
return {styles, colors}
diff --git a/apps/wallet-mobile/src/components/Hr/Hr.tsx b/apps/wallet-mobile/src/components/Hr/Hr.tsx
index 6e25e6dbf3..a9a909b1c7 100644
--- a/apps/wallet-mobile/src/components/Hr/Hr.tsx
+++ b/apps/wallet-mobile/src/components/Hr/Hr.tsx
@@ -15,7 +15,7 @@ const useStyles = () => {
},
})
const colors = {
- bgLine: color.gray_c200,
+ bgLine: color.gray_200,
}
return {styles, colors} as const
}
diff --git a/apps/wallet-mobile/src/components/Icon/Direction.tsx b/apps/wallet-mobile/src/components/Icon/Direction.tsx
index 5344657f63..2abcf7195b 100644
--- a/apps/wallet-mobile/src/components/Icon/Direction.tsx
+++ b/apps/wallet-mobile/src/components/Icon/Direction.tsx
@@ -40,24 +40,24 @@ export const styleMap: (
color: ThemedPalette,
) => Record = (color) => ({
SELF: {
- text: color.gray_c900,
- background: color.gray_c100,
- icon: color.gray_c900,
+ text: color.gray_900,
+ background: color.gray_100,
+ icon: color.gray_900,
},
SENT: {
- text: color.primary_c600,
- background: color.primary_c100,
- icon: color.primary_c500,
+ text: color.primary_600,
+ background: color.primary_100,
+ icon: color.primary_500,
},
RECEIVED: {
- text: color.secondary_c600,
- background: color.secondary_c100,
- icon: color.secondary_c600,
+ text: color.secondary_600,
+ background: color.secondary_100,
+ icon: color.secondary_600,
},
MULTI: {
- text: color.gray_c900,
- background: color.gray_c100,
- icon: color.gray_c900,
+ text: color.gray_900,
+ background: color.gray_100,
+ icon: color.gray_900,
size: 50,
},
})
diff --git a/apps/wallet-mobile/src/components/Icon/EmptyCheckbox.tsx b/apps/wallet-mobile/src/components/Icon/EmptyCheckbox.tsx
index 2d9e5f7b61..339d0773e7 100644
--- a/apps/wallet-mobile/src/components/Icon/EmptyCheckbox.tsx
+++ b/apps/wallet-mobile/src/components/Icon/EmptyCheckbox.tsx
@@ -12,7 +12,7 @@ export const EmptyCheckbox = (props: SvgProps) => {
fillRule="evenodd"
clipRule="evenodd"
d="M13 2H3a1 1 0 00-1 1v10a1 1 0 001 1h10a1 1 0 001-1V3a1 1 0 00-1-1zM2 0a2 2 0 00-2 2v12a2 2 0 002 2h12a2 2 0 002-2V2a2 2 0 00-2-2H2z"
- fill={color.gray_c900}
+ fill={color.gray_900}
/>
diff --git a/apps/wallet-mobile/src/components/Icon/Switch.tsx b/apps/wallet-mobile/src/components/Icon/Switch.tsx
index 13fad7a790..212273fdd8 100644
--- a/apps/wallet-mobile/src/components/Icon/Switch.tsx
+++ b/apps/wallet-mobile/src/components/Icon/Switch.tsx
@@ -6,7 +6,7 @@ type Props = {size: number; color?: string}
export const Switch = (props: Props) => {
const {color: colors} = useTheme()
- const {size, color = colors.primary_c500} = props
+ const {size, color = colors.primary_500} = props
return (