fea: support dark mode

artsy · Jan 21, 2025 · 157b9ca · 157b9ca
1 parent 1fa8966
commit 157b9ca
Show file tree

Hide file tree

Showing 133 changed files with 193 additions and 200 deletions.
diff --git a/src/elements/BackButton/BackButton.tsx b/src/elements/BackButton/BackButton.tsx
@@ -14,7 +14,7 @@ export interface BackButtonProps {
 }
 
 export const BackButton: React.FC<BackButtonProps> = ({
-  color = "onBackgroundHigh",
+  color = "black100",
   hitSlop = DEFAULT_HIT_SLOP,
   onPress,
   showX = false,
@@ -40,7 +40,7 @@ export const BackButton: React.FC<BackButtonProps> = ({
 }
 
 export const BackButtonWithBackground: React.FC<BackButtonProps> = ({
-  color = "onBackgroundHigh",
+  color = "black100",
   hitSlop = DEFAULT_HIT_SLOP,
   onPress,
   showX = false,
@@ -49,7 +49,7 @@ export const BackButtonWithBackground: React.FC<BackButtonProps> = ({
   return (
     <TouchableOpacity onPress={onPress} hitSlop={hitSlop}>
       <Flex
-        backgroundColor="background"
+        backgroundColor="white100"
         width={40}
         height={40}
         borderRadius={20}

diff --git a/src/elements/Button/colors.ts b/src/elements/Button/colors.ts
@@ -37,15 +37,15 @@ export const useColorsForVariantAndState = (): Record<
     },
     outline: {
       disabled: {
-        bg: color("background"),
-        border: color("onBackgroundLow"),
-        text: color("onBackgroundLow"),
+        bg: color("black100"),
+        border: color("black30"),
+        text: color("black30"),
       },
       pressed: { bg: color("blue100"), border: color("blue100"), text: color("white100") },
       active: {
-        bg: color("background"),
-        border: color("onBackgroundMedium"),
-        text: color("onBackgroundHigh"),
+        bg: color("black100"),
+        border: color("black60"),
+        text: color("white100"),
       },
     },
     outlineGray: {

diff --git a/src/elements/Chip/Chip.tsx b/src/elements/Chip/Chip.tsx
@@ -31,21 +31,16 @@ export const Chip: FC<ChipProps> = ({ image, title, subtitle, onPress }) => {
   }
 
   return (
-    <Touchable
-      onPress={onPress}
-      onPressIn={handleOnPressIn}
-      onPressOut={handleOnPressOut}
-      noFeedback
-    >
+    <Touchable onPress={onPress} onPressIn={handleOnPressIn} onPressOut={handleOnPressOut}>
       <Flex flexDirection="row" minWidth={200} height={70} overflow="hidden" borderRadius={5}>
         {!!image && <Image src={image} width={70} height={70} />}
 
         <View
-          state={animatedState}
           style={{
             flex: 1,
             padding: space(1),
             justifyContent: "center",
+            backgroundColor: color("black5"),
           }}
         >
           {!!subtitle && (

diff --git a/src/elements/Input/InputTitle.tsx b/src/elements/Input/InputTitle.tsx
@@ -13,20 +13,12 @@ export const InputTitle: React.FC<{
     <Text variant="md" style={{ fontSize: 13, marginBottom: 2, textTransform: "uppercase" }}>
       {title}
       {!!required && (
-        <Text
-          variant="md"
-          style={{ fontSize: 13, textTransform: "none" }}
-          color="onBackgroundMedium"
-        >
+        <Text variant="md" style={{ fontSize: 13, textTransform: "none" }} color="black60">
           Required
         </Text>
       )}
       {!!optional && (
-        <Text
-          variant="md"
-          style={{ fontSize: 13, textTransform: "none" }}
-          color="onBackgroundMedium"
-        >
+        <Text variant="md" style={{ fontSize: 13, textTransform: "none" }} color="black60">
           {" "}
           Optional
         </Text>

diff --git a/src/elements/MenuItem/MenuItem.tsx b/src/elements/MenuItem/MenuItem.tsx
@@ -34,7 +34,7 @@ export const MenuItem = ({
         pr="15px"
       >
         <Flex flexDirection="row" mr={2}>
-          <Text variant="md" color="onBackgroundHigh">
+          <Text variant="md" color="black100">
             {title}
           </Text>
         </Flex>

diff --git a/src/elements/Screen/BottomView.tsx b/src/elements/Screen/BottomView.tsx
@@ -23,7 +23,7 @@ export const BottomView: React.FC<BottomViewProps> = ({ children, darkMode }) =>
         }}
         pointerEvents="none"
       />
-      <Flex px={SCREEN_HORIZONTAL_PADDING} pt={1} pb={4} backgroundColor="background">
+      <Flex px={SCREEN_HORIZONTAL_PADDING} pt={1} pb={4} backgroundColor="white100">
         {children}
       </Flex>
     </>

diff --git a/src/elements/Screen/Header.tsx b/src/elements/Screen/Header.tsx
@@ -46,7 +46,7 @@ export const Header: React.FC<HeaderProps> = ({
       flexDirection="row"
       px={2}
       zIndex={ZINDEX.header}
-      backgroundColor="background"
+      backgroundColor="white100"
       alignItems="center"
     >
       <Flex flex={1}>
@@ -125,7 +125,7 @@ const Left: React.FC<{
     <>
       {leftElements || (
         <Touchable onPress={onBack} underlayColor="transparent" hitSlop={DEFAULT_HIT_SLOP}>
-          <ArrowLeftIcon fill="onBackgroundHigh" />
+          <ArrowLeftIcon fill="black100" />
         </Touchable>
       )}
     </>

diff --git a/src/elements/Screen/ScreenBase.tsx b/src/elements/Screen/ScreenBase.tsx
@@ -18,7 +18,7 @@ export const ScreenBase: React.FC<ScreenBaseProps> = ({
     <ScreenScrollContextProvider>
       <Flex
         flex={1}
-        backgroundColor="background"
+        backgroundColor="white100"
         mt={safeArea ? (insets.top as FlexProps["mt"]) : 0}
         {...flexProps}
       >
@@ -40,7 +40,7 @@ const SafeAreaCover: React.FC<{ safeArea: boolean }> = ({ safeArea }) => {
       right={0}
       top={safeArea ? -insets.top : 0}
       height={insets.top}
-      backgroundColor="background"
+      backgroundColor="white100"
     />
   )
 }
diff --git a/src/elements/SearchInput/SearchInput.tsx b/src/elements/SearchInput/SearchInput.tsx
@@ -15,7 +15,7 @@ export const SearchInput = ({
   return (
     <Flex flexDirection="row" justifyContent="center">
       <Input
-        icon={<MagnifyingGlassIcon width={18} height={18} fill="onBackgroundHigh" />}
+        icon={<MagnifyingGlassIcon width={18} height={18} fill="black100" />}
         autoCorrect={false}
         enableClearButton={enableCancelButton}
         returnKeyType="search"

diff --git a/src/elements/Spacer/Spacer.stories.tsx b/src/elements/Spacer/Spacer.stories.tsx
@@ -18,11 +18,11 @@ const SpacerRow = (props: { x: NoUndefined<SpacerProps["x"]> }) => {
   return (
     <Box>
       <Box flexDirection="row">
-        <Box width={20} height={20} backgroundColor="onBackground" />
+        <Box width={20} height={20} backgroundColor="black100" />
         <Spacer {...props} />
-        <Box width={20} height={20} backgroundColor="onBackground" />
+        <Box width={20} height={20} backgroundColor="black100" />
       </Box>
-      <Text color="onBackground">
+      <Text color="black100">
         {typeof size === "string" ? `${size}` : `${size} ${bullet} ${space(size as any)}px`}
       </Text>
     </Box>
@@ -52,11 +52,11 @@ const SpacerCol = (props: { y: SpacerProps["y"] }) => {
   return (
     <Box>
       <Box flexDirection="column">
-        <Box width={20} height={20} backgroundColor="black" />
+        <Box width={20} height={20} backgroundColor="black100" />
         <Spacer {...props} />
-        <Box width={20} height={20} backgroundColor="black" />
+        <Box width={20} height={20} backgroundColor="black100" />
       </Box>
-      <Text color="black">
+      <Text color="black100">
         {typeof size === "string" ? `${size}` : `${size} ${bullet} ${space(size as any)}px`}
       </Text>
     </Box>

diff --git a/src/elements/Switch/Switch.tsx b/src/elements/Switch/Switch.tsx
@@ -33,8 +33,12 @@ export interface SwitchProps extends CustomSwitchProps {
 
 export const Switch = ({
   value,
-  thumbColorActive = Platform.OS === "ios" ? "white100" : "blue100",
-  thumbColorInactive = Platform.OS === "ios" ? "white100" : "black10",
+  // Regardless of the color scheme, the thumb and track colors are always white
+  // @ts-expect-error
+  thumbColorActive = Platform.OS === "ios" ? "white" : "blue100",
+  // Regardless of the color scheme, the thumb and track colors are always white
+  // @ts-expect-error
+  thumbColorInactive = Platform.OS === "ios" ? "white" : "black10",
   trackColorActive = Platform.OS === "ios" ? "blue100" : "blue10",
   trackColorInactive = "black30",
   disabled,

diff --git a/src/elements/Tabs/TabsContainer.tsx b/src/elements/Tabs/TabsContainer.tsx
@@ -49,7 +49,7 @@ export const TabsContainer: React.FC<TabsContainerProps> = ({
         shadowOpacity: 0,
         shadowRadius: 0,
         elevation: 0,
-        backgroundColor: color("background"),
+        backgroundColor: color("white100"),
       }}
       initialTabName={initialTabName}
       containerStyle={{
@@ -85,11 +85,11 @@ export const TabsContainer: React.FC<TabsContainerProps> = ({
                 )
               }}
               contentContainerStyle={{}}
-              activeColor={color("onBackground")}
-              inactiveColor={color("onBackgroundMedium")}
+              activeColor={color("black100")}
+              inactiveColor={color("black60")}
               labelStyle={{ marginHorizontal: 0 }} // removing the horizonal margin from the lib
               indicatorStyle={{
-                backgroundColor: color("onBackground"),
+                backgroundColor: color("black100"),
                 height: 1,
                 // on android this line breaks the active indicator and it is not visible
                 ...(isIOS && { bottom: -1 }),

diff --git a/src/elements/Text/Text.tsx b/src/elements/Text/Text.tsx
@@ -34,7 +34,7 @@ export const Text = forwardRef(
     {
       variant = "sm",
       italic = false,
-      color = "onBackgroundHigh",
+      color = "black100",
       caps = false,
       weight = "regular",
       underline = false,

diff --git a/src/storybook/decorators.tsx b/src/storybook/decorators.tsx
@@ -46,7 +46,7 @@ export const useDarkModeSwitcher: DecoratorFunction<ReactNode> = (story) => {
     <ScreenDimensionsProvider>
       <SafeAreaProvider>
         <Theme theme={theme}>
-          <Flex flex={1} backgroundColor="background">
+          <Flex flex={1} backgroundColor="white100">
             <Flex flexDirection="row" justifyContent="space-around">
               <Text color="orange">
                 Dark mode: {mode} {mode === "system" && "(" + systemMode + ")"}

diff --git a/src/svgs/AddCircleFillIcon.tsx b/src/svgs/AddCircleFillIcon.tsx
@@ -1,7 +1,7 @@
 import { Icon, IconProps, Path } from "./Icon"
 import { useColor } from "../utils/hooks"
 
-export const AddCircleFillIcon = ({ fill, ...restProps }: IconProps) => {
+export const AddCircleFillIcon = ({ fill = "black100", ...restProps }: IconProps) => {
   const color = useColor()
   return (
     <Icon {...restProps} viewBox="0 0 18 18">

diff --git a/src/svgs/AddCircleIcon.tsx b/src/svgs/AddCircleIcon.tsx
@@ -1,7 +1,7 @@
 import { Icon, IconProps, Path } from "./Icon"
 import { useColor } from "../utils/hooks"
 
-export const AddCircleIcon = ({ fill, ...restProps }: IconProps) => {
+export const AddCircleIcon = ({ fill = "black100", ...restProps }: IconProps) => {
   const color = useColor()
   return (
     <Icon {...restProps} viewBox="0 0 18 18">

diff --git a/src/svgs/AddIcon.tsx b/src/svgs/AddIcon.tsx
@@ -1,7 +1,7 @@
 import { Icon, IconProps, Path } from "./Icon"
 import { useColor } from "../utils/hooks"
 
-export const AddIcon = ({ fill, ...restProps }: IconProps) => {
+export const AddIcon = ({ fill = "black100", ...restProps }: IconProps) => {
   const color = useColor()
   return (
     <Icon {...restProps} viewBox="0 0 18 18">

diff --git a/src/svgs/AlertCircleFillIcon.tsx b/src/svgs/AlertCircleFillIcon.tsx
@@ -1,7 +1,7 @@
 import { Icon, IconProps, Path } from "./Icon"
 import { useColor } from "../utils/hooks"
 
-export const AlertCircleFillIcon = ({ fill, ...restProps }: IconProps) => {
+export const AlertCircleFillIcon = ({ fill = "black100", ...restProps }: IconProps) => {
   const color = useColor()
   return (
     <Icon {...restProps} viewBox="0 0 18 18">

diff --git a/src/svgs/AlertIcon.tsx b/src/svgs/AlertIcon.tsx
@@ -1,7 +1,7 @@
 import { Icon, IconProps, Path } from "./Icon"
 import { useColor } from "../utils/hooks"
 
-export const AlertIcon = ({ fill, ...restProps }: IconProps) => {
+export const AlertIcon = ({ fill = "black100", ...restProps }: IconProps) => {
   const color = useColor()
   return (
     <Icon {...restProps} viewBox="0 0 18 18">

diff --git a/src/svgs/AppleIcon.tsx b/src/svgs/AppleIcon.tsx
@@ -1,7 +1,7 @@
 import { Icon, IconProps, Path } from "./Icon"
 import { useColor } from "../utils/hooks"
 
-export const AppleIcon = ({ fill, ...restProps }: IconProps) => {
+export const AppleIcon = ({ fill = "black100", ...restProps }: IconProps) => {
   const color = useColor()
   return (
     <Icon {...restProps} viewBox="0 0 18 18">

diff --git a/src/svgs/ArrowDownCircleIcon.tsx b/src/svgs/ArrowDownCircleIcon.tsx
@@ -1,7 +1,7 @@
 import { Icon, IconProps, Path } from "./Icon"
 import { useColor } from "../utils/hooks"
 
-export const ArrowDownCircleIcon = ({ fill, ...restProps }: IconProps) => {
+export const ArrowDownCircleIcon = ({ fill = "black100", ...restProps }: IconProps) => {
   const color = useColor()
   return (
     <Icon {...restProps} viewBox="0 0 18 18">

diff --git a/src/svgs/ArrowDownIcon.tsx b/src/svgs/ArrowDownIcon.tsx
@@ -1,7 +1,7 @@
 import { Icon, IconProps, Path } from "./Icon"
 import { useColor } from "../utils/hooks"
 
-export const ArrowDownIcon = ({ fill, ...restProps }: IconProps) => {
+export const ArrowDownIcon = ({ fill = "black100", ...restProps }: IconProps) => {
   const color = useColor()
   return (
     <Icon {...restProps} viewBox="0 0 18 18">

diff --git a/src/svgs/ArrowLeftCircleIcon.tsx b/src/svgs/ArrowLeftCircleIcon.tsx
@@ -1,7 +1,7 @@
 import { Icon, IconProps, Path } from "./Icon"
 import { useColor } from "../utils/hooks"
 
-export const ArrowLeftCircleIcon = ({ fill, ...restProps }: IconProps) => {
+export const ArrowLeftCircleIcon = ({ fill = "black100", ...restProps }: IconProps) => {
   const color = useColor()
   return (
     <Icon {...restProps} viewBox="0 0 18 18">

diff --git a/src/svgs/ArrowRightCircleIcon.tsx b/src/svgs/ArrowRightCircleIcon.tsx
@@ -1,7 +1,7 @@
 import { Icon, IconProps, Path } from "./Icon"
 import { useColor } from "../utils/hooks"
 
-export const ArrowRightCircleIcon = ({ fill, ...restProps }: IconProps) => {
+export const ArrowRightCircleIcon = ({ fill = "black100", ...restProps }: IconProps) => {
   const color = useColor()
   return (
     <Icon {...restProps} viewBox="0 0 18 18">

diff --git a/src/svgs/ArrowRightIcon.tsx b/src/svgs/ArrowRightIcon.tsx
@@ -1,7 +1,7 @@
 import { Icon, IconProps, Path } from "./Icon"
 import { useColor } from "../utils/hooks"
 
-export const ArrowRightIcon = ({ fill, ...restProps }: IconProps) => {
+export const ArrowRightIcon = ({ fill = "black100", ...restProps }: IconProps) => {
   const color = useColor()
   return (
     <Icon {...restProps} viewBox="0 0 18 18">

diff --git a/src/svgs/ArrowUpCircleIcon.tsx b/src/svgs/ArrowUpCircleIcon.tsx
@@ -1,7 +1,7 @@
 import { Icon, IconProps, Path } from "./Icon"
 import { useColor } from "../utils/hooks"
 
-export const ArrowUpCircleIcon = ({ fill, ...restProps }: IconProps) => {
+export const ArrowUpCircleIcon = ({ fill = "black100", ...restProps }: IconProps) => {
   const color = useColor()
   return (
     <Icon {...restProps} viewBox="0 0 18 18">

diff --git a/src/svgs/ArrowUpIcon.tsx b/src/svgs/ArrowUpIcon.tsx
@@ -1,7 +1,7 @@
 import { Icon, IconProps, Path } from "./Icon"
 import { useColor } from "../utils/hooks"
 
-export const ArrowUpIcon = ({ fill, ...restProps }: IconProps) => {
+export const ArrowUpIcon = ({ fill = "black100", ...restProps }: IconProps) => {
   const color = useColor()
   return (
     <Icon {...restProps} viewBox="0 0 18 18">

diff --git a/src/svgs/ArrowUpRightIcon.tsx b/src/svgs/ArrowUpRightIcon.tsx
@@ -1,7 +1,7 @@
 import { Icon, IconProps, Path } from "./Icon"
 import { useColor } from "../utils/hooks"
 
-export const ArrowUpRightIcon = ({ fill, ...restProps }: IconProps) => {
+export const ArrowUpRightIcon = ({ fill = "black100", ...restProps }: IconProps) => {
   const color = useColor()
 
   return (

diff --git a/src/svgs/ArtsyLogoWhiteIcon.tsx b/src/svgs/ArtsyLogoWhiteIcon.tsx
@@ -1,6 +1,6 @@
 import { G, Icon, IconProps, Path } from "./Icon"
 
-export const ArtsyLogoWhiteIcon = ({ fill, ...restProps }: IconProps) => {
+export const ArtsyLogoWhiteIcon = ({ fill = "black100", ...restProps }: IconProps) => {
   return (
     <Icon {...restProps} viewBox="0 0 94 32">
       <G fill="none" fillRule="evenodd">

diff --git a/src/svgs/ArtsyMarkBlackIcon.tsx b/src/svgs/ArtsyMarkBlackIcon.tsx
@@ -1,7 +1,7 @@
 import { G, Icon, IconProps, Path } from "./Icon"
 import { useColor } from "../utils/hooks"
 
-export const ArtsyMarkBlackIcon = ({ fill, ...restProps }: IconProps) => {
+export const ArtsyMarkBlackIcon = ({ fill = "black100", ...restProps }: IconProps) => {
   const color = useColor()
   return (
     <Icon {...restProps} viewBox="0 0 32 32">

diff --git a/src/svgs/ArtsyMarkWhiteIcon.tsx b/src/svgs/ArtsyMarkWhiteIcon.tsx
@@ -1,6 +1,6 @@
 import { G, Icon, IconProps, Path } from "./Icon"
 
-export const ArtsyMarkWhiteIcon = ({ fill, ...restProps }: IconProps) => {
+export const ArtsyMarkWhiteIcon = ({ fill = "black100", ...restProps }: IconProps) => {
   return (
     <Icon {...restProps} viewBox="0 0 32 32">
       <G fill="none" fillRule="evenodd">