feat: remove remaining Theme-related types (#8235)

many types gone

codemods/remove-spacer.ts

@@ -3,13 +3,11 @@
 // jscodeshift --parser=tsx -t codemods/remove-spacer.ts src/**/*
 //
 // Afterwards:
-// yarn lint:all
-// yarn prettier-project
-//
+// yarn lint:all; yarn prettier-project
 
 import { Transform } from "jscodeshift"
 
-const toRemove = "Text"
+const toRemove = "Color"
 
 const transform: Transform = (file, { jscodeshift: j }, options) => {
   const source = j(file.source)

package.json

@@ -103,7 +103,6 @@
   "dependencies": {
     "@artsy/cohesion": "4.100.0",
     "@artsy/palette-mobile": "10.0.4",
-    "@artsy/palette-tokens": "4.0.1",
     "@artsy/to-title-case": "1.1.0",
     "@expo/react-native-action-sheet": "3.8.0",
     "@gorhom/bottom-sheet": "4.4.5",

src/app/Components/Cards/CardTag.tsx

@@ -1,5 +1,4 @@
-import { useColor, Text } from "@artsy/palette-mobile"
-import { Color } from "palette"
+import { useColor, Text, Color } from "@artsy/palette-mobile"
 import { View, StyleProp, ViewStyle } from "react-native"
 import { PositionProps } from "styled-system"
 

src/app/Components/DottedLine.tsx

@@ -1,5 +1,4 @@
-import { useTheme } from "@artsy/palette-mobile"
-import { Color } from "palette"
+import { useTheme, Color } from "@artsy/palette-mobile"
 import { requireNativeComponent } from "react-native"
 
 interface Props {

src/app/Components/Icons/ChevronIcon.tsx

@@ -1,5 +1,4 @@
-import { useColor } from "@artsy/palette-mobile"
-import { Color } from "palette"
+import { useColor, Color } from "@artsy/palette-mobile"
 import Svg, { G, Path } from "react-native-svg"
 
 interface ChevronIconProps extends React.Props<ChevronIconProps> {

src/app/Components/Icons/Crosshair.tsx

@@ -1,5 +1,4 @@
-import { useColor } from "@artsy/palette-mobile"
-import { Color } from "palette"
+import { useColor, Color } from "@artsy/palette-mobile"
 import Svg, { Circle, G, Path } from "react-native-svg"
 
 const Crosshair: React.FC<{ color?: Color }> = (props) => {

src/app/Components/Icons/GridViewIcon.tsx

@@ -1,5 +1,4 @@
-import { useColor } from "@artsy/palette-mobile"
-import { Color } from "palette"
+import { useColor, Color } from "@artsy/palette-mobile"
 import Svg, { Path } from "react-native-svg"
 
 interface GridViewIconProps extends React.ComponentProps<typeof Svg> {

src/app/Components/Icons/ListViewIcon.tsx

@@ -1,5 +1,4 @@
-import { useColor } from "@artsy/palette-mobile"
-import { Color } from "palette"
+import { useColor, Color } from "@artsy/palette-mobile"
 import Svg, { Rect } from "react-native-svg"
 
 interface ListViewIconProps extends React.ComponentProps<typeof Svg> {

src/app/Components/Modals/LoadingModal.tsx

@@ -1,5 +1,5 @@
-import { Flex } from "@artsy/palette-mobile"
-import { Color, Spinner } from "palette"
+import { Flex, Color } from "@artsy/palette-mobile"
+import { Spinner } from "palette"
 import { Modal, ModalProps } from "react-native"
 
 interface LoadingModalProps {

src/app/Components/ReadMore.tsx

@@ -5,13 +5,13 @@ import {
   LinkText,
   Text as PaletteText,
   TextProps as PaletteTextProps,
+  Color,
 } from "@artsy/palette-mobile"
 import { navigate } from "app/system/navigation/navigate"
 import { plainTextFromTree } from "app/utils/plainTextFromTree"
 import { defaultRules, renderMarkdown } from "app/utils/renderMarkdown"
 import { sendEmailWithMailTo } from "app/utils/sendEmail"
 import { Schema } from "app/utils/track"
-import { Color } from "palette"
 import React, { useState } from "react"
 import { Text } from "react-native"
 import { useTracking } from "react-tracking"

src/app/Components/Spinner.tsx

@@ -1,4 +1,5 @@
-import { Color, Spinner as PaletteSpinner } from "palette"
+import { Color } from "@artsy/palette-mobile"
+import { Spinner as PaletteSpinner } from "palette"
 import { StyleSheet, View, ViewProps } from "react-native"
 
 interface Props extends ViewProps {

src/app/Components/Toast/types.ts

@@ -1,6 +1,5 @@
-import { IconProps } from "@artsy/palette-mobile"
+import { IconProps, Color } from "@artsy/palette-mobile"
 import { ActionSheetProps } from "@expo/react-native-action-sheet"
-import { Color } from "palette"
 
 export type ToastDuration = "long" | "short"
 

src/app/Scenes/Artwork/Components/ArtworkLotTimer.tsx

@@ -1,4 +1,4 @@
-import { Spacer, TimerIcon, Flex, Text } from "@artsy/palette-mobile"
+import { Spacer, TimerIcon, Flex, Text, Color } from "@artsy/palette-mobile"
 import { ArtworkLotTimer_artwork$data } from "__generated__/ArtworkLotTimer_artwork.graphql"
 import { ArtworkAuctionProgressBar } from "app/Components/Bidding/Components/ArtworkAuctionProgressBar"
 import {
@@ -17,7 +17,6 @@ import { useArtworkBidding } from "app/utils/Websockets/auctions/useArtworkBiddi
 import { getTimerInfo } from "app/utils/saleTime"
 import { Time } from "app/utils/useTimer"
 import moment from "moment"
-import { Color } from "palette/Theme"
 import { useEffect } from "react"
 import { createFragmentContainer, graphql } from "react-relay"
 import { TrackingProp } from "react-tracking"
@@ -48,9 +47,6 @@ const AuctionoWebsocketWrapper: React.FC<AuctionWebsocketWrapperProps> = (props)
 
 export const ArtworkLotTimerWrapper: React.FC<AuctionWebsocketWrapperProps> = (props) => {
   const { artwork, refetchArtwork } = props
-  if (!(artwork.isInAuction && artwork.saleArtwork && artwork.sale)) {
-    return null
-  }
 
   const {
     isPreview,
@@ -59,9 +55,9 @@ export const ArtworkLotTimerWrapper: React.FC<AuctionWebsocketWrapperProps> = (p
     liveStartAt: liveStartsAt,
     startAt: startsAt,
     endAt: saleEndAt,
-  } = props.artwork.sale || {}
+  } = props.artwork.sale ?? {}
 
-  const { endAt: lotEndAt, extendedBiddingEndAt, lotID } = artwork.saleArtwork
+  const { endAt: lotEndAt, extendedBiddingEndAt, lotID } = artwork.saleArtwork ?? {}
 
   const initialBiddingEndAt = extendedBiddingEndAt ?? lotEndAt ?? saleEndAt
 
@@ -72,6 +68,10 @@ export const ArtworkLotTimerWrapper: React.FC<AuctionWebsocketWrapperProps> = (p
     onDataReceived: refetchArtwork,
   })
 
+  if (!(artwork.isInAuction && artwork.saleArtwork && artwork.sale)) {
+    return null
+  }
+
   return (
     <TimeOffsetProvider>
       <CountdownStateManager

src/app/Scenes/Inbox/Components/Conversations/ConversationCTA.tests.tsx

@@ -1,8 +1,7 @@
-import { MoneyFillIcon, AlertCircleFillIcon, Flex } from "@artsy/palette-mobile"
+import { MoneyFillIcon, AlertCircleFillIcon, Flex, Color } from "@artsy/palette-mobile"
 import { ConversationCTATestsQuery } from "__generated__/ConversationCTATestsQuery.graphql"
 import { extractText } from "app/utils/tests/extractText"
 import { renderWithWrappersLEGACY } from "app/utils/tests/renderWithWrappers"
-import { Color } from "palette"
 import { ElementType } from "react"
 import { graphql, QueryRenderer } from "react-relay"
 import { act, ReactTestRenderer } from "react-test-renderer"

src/app/Scenes/Inbox/Components/Conversations/OrderUpdate.tsx

@@ -6,11 +6,11 @@ import {
   Flex,
   Text,
   LinkText,
+  Color,
 } from "@artsy/palette-mobile"
 import { OrderUpdate_event$data } from "__generated__/OrderUpdate_event.graphql"
 
 import { navigate } from "app/system/navigation/navigate"
-import { Color } from "palette"
 import { createFragmentContainer, graphql } from "react-relay"
 import { TimeSince } from "./TimeSince"
 

src/app/Scenes/Inbox/Components/Conversations/ReviewOfferButton.tsx

@@ -6,11 +6,11 @@ import {
   IconProps,
   Flex,
   Text,
+  Color,
 } from "@artsy/palette-mobile"
 import { navigate } from "app/system/navigation/navigate"
 import { useEventTiming } from "app/utils/useEventTiming"
 import { DateTime } from "luxon"
-import { Color } from "palette"
 import { TouchableWithoutFeedback } from "react-native"
 import { useTracking } from "react-tracking"
 

src/app/Scenes/Search/CuratedCollectionItem.tsx

@@ -1,14 +1,13 @@
 import { ActionType, ContextModule, OwnerType } from "@artsy/cohesion"
 import { TappedCollectionGroup } from "@artsy/cohesion/dist/Schema/Events/Tap"
-import { Box, Text } from "@artsy/palette-mobile"
+import { Box, Text, TextProps } from "@artsy/palette-mobile"
 import { CuratedCollectionItem_collection$key } from "__generated__/CuratedCollectionItem_collection.graphql"
 import { CardRailCard, CardRailMetadataContainer } from "app/Components/Home/CardRailCard"
 import { ThreeUpImageLayout } from "app/Components/ThreeUpImageLayout"
 import { navigate } from "app/system/navigation/navigate"
 import { extractNodes } from "app/utils/extractNodes"
 import { isPad } from "app/utils/hardware"
 import { compact } from "lodash"
-import { TextVariantV3 } from "palette"
 import { graphql, useFragment } from "react-relay"
 import { useTracking } from "react-tracking"
 
@@ -25,7 +24,7 @@ export const CuratedCollectionItem: React.FC<CuratedCollectionItemProps> = ({
   const item = useFragment(CuratedCollectionItemFragment, collection)
   const imageURLs = extractNodes(item.artworksConnection, (artwork) => artwork.image?.url)
   const availableArtworkImageURLs = compact(imageURLs)
-  const textVariant: TextVariantV3 = isPad() ? "xs" : "sm-display"
+  const textVariant: TextProps["variant"] = isPad() ? "xs" : "sm-display"
 
   const onPress = () => {
     tracking.trackEvent(trackingEvent.tappedCollectionGroup(item.internalID, item.slug, position))

src/app/Scenes/SellWithArtsy/Components/Header.tsx

@@ -7,8 +7,8 @@ import {
 } from "@artsy/cohesion"
 import { Spacer, Flex, Text } from "@artsy/palette-mobile"
 import { useFeatureFlag } from "app/store/GlobalStore"
-import { Image, ImageBackground } from "react-native"
 import { Button } from "palette"
+import { Image, ImageBackground } from "react-native"
 import { useTracking } from "react-tracking"
 import { useScreenDimensions } from "shared/hooks"
 

src/palette/Theme.tsx

@@ -1,33 +1,11 @@
 import { THEME_V3 } from "@artsy/palette-tokens"
-/// TODO: remove tokens too from package.json
-import { Color as ColorV3BeforeDevPurple } from "@artsy/palette-tokens/dist/themes/v3"
 import {
   TextTreatment as TextTreatmentWithUnits,
   TextVariant as TextVariantV3,
 } from "@artsy/palette-tokens/dist/typography/v3"
 import _ from "lodash"
 import { ThemeProvider } from "styled-components/native"
 
-/**
- * All of the config for the Artsy theming system, based on the
- * design system from our design team:
- * https://www.notion.so/artsy/Master-Library-810612339f474d0997fe359af4285c56
- */
-
-export type Color =
-  | ColorV3BeforeDevPurple
-  | "devpurple"
-  | "yellow150"
-  | "yellow100"
-  | "yellow10"
-  | "orange10"
-  | "orange100" // yellows and orange are temporary, until we add them to palette-tokens
-  | "copper100" // this needs to go once we extract palette-mobile
-  // v5 stuff
-  | "appBackground"
-  | "appForeground"
-export type { TextVariantV3 }
-
 const {
   breakpoints: _eigenDoesntCareAboutBreakpoints,
   mediaQueries: _eigenDoesntCareAboutMediaQueries,
@@ -79,7 +57,7 @@ const fixColorV3 = (
   return colors as any
 }
 
-export interface TextTreatment {
+interface TextTreatment {
   fontSize: number
   lineHeight: number
   letterSpacing?: number
@@ -164,8 +142,8 @@ const THEMES = {
   },
 }
 
-export type ThemeV3Type = typeof THEMES.v3
-export type ThemeType = ThemeV3Type
+type ThemeV3Type = typeof THEMES.v3
+type ThemeType = ThemeV3Type
 
 const figureOutTheme = (theme: keyof typeof THEMES | ThemeType): ThemeType => {
   if (!_.isString(theme)) {
@@ -188,14 +166,3 @@ export const Theme: React.FC<{
   const actualTheme = figureOutTheme(theme)
   return <ThemeProvider theme={actualTheme}>{children}</ThemeProvider>
 }
-
-type ColorAnyString = string & {}
-type Colors = Color | ColorAnyString
-
-export type ColorsTheme = { colors: Record<Colors, any> }
-
-/**
- * Only use this if it's are absolutely neccessary, and only in tests.
- */
-
-export const _test_THEMES = THEMES

src/palette/atoms/BackButton/BackButton.tsx

@@ -1,5 +1,4 @@
-import { ChevronIcon, CloseIcon, Flex } from "@artsy/palette-mobile"
-import { Color } from "palette"
+import { ChevronIcon, CloseIcon, Flex, Color } from "@artsy/palette-mobile"
 import { TouchableOpacity, TouchableOpacityProps } from "react-native"
 
 interface BackButtonProps {

src/palette/elements/Input/Input.tsx

@@ -5,10 +5,11 @@ import {
   Flex,
   useTheme,
   Text,
+  Color,
 } from "@artsy/palette-mobile"
 import { themeGet } from "@styled-system/theme-get"
 import _ from "lodash"
-import { Color, Spinner } from "palette"
+import { Spinner } from "palette"
 import { forwardRef, useEffect, useImperativeHandle, useRef, useState } from "react"
 import {
   LayoutAnimation,

src/palette/elements/LineGraph/LineGraphChart.tsx

@@ -1,6 +1,5 @@
-import { StarCircleIcon, Flex, useColor, Text } from "@artsy/palette-mobile"
+import { StarCircleIcon, Flex, useColor, Text, Color } from "@artsy/palette-mobile"
 import { compact, noop } from "lodash"
-import { Color } from "palette/Theme"
 import { useCallback, useEffect, useRef, useState } from "react"
 import { Dimensions } from "react-native"
 import { Defs, G, LinearGradient, Stop } from "react-native-svg"

src/palette/elements/Pill/Pill.tsx

@@ -6,9 +6,9 @@ import {
   useColor,
   Text,
   useTextStyleForPalette,
+  Color,
 } from "@artsy/palette-mobile"
 import OpaqueImageView from "app/Components/OpaqueImageView/OpaqueImageView"
-import { Color } from "palette/Theme"
 import { useState } from "react"
 import { GestureResponderEvent, Pressable, PressableProps } from "react-native"
 import { config } from "react-spring"

src/palette/elements/ProgressBar/ProgressBar.tsx

@@ -1,5 +1,4 @@
-import { Flex, useColor } from "@artsy/palette-mobile"
-import { Color } from "palette/Theme"
+import { Flex, useColor, Color } from "@artsy/palette-mobile"
 import { useEffect, useState } from "react"
 import Animated, { useAnimatedStyle, useSharedValue, withTiming } from "react-native-reanimated"
 

src/palette/elements/Spinner/Spinner.tsx

@@ -1,5 +1,4 @@
-import { useColor } from "@artsy/palette-mobile"
-import { Color } from "palette/Theme"
+import { Color, useColor } from "@artsy/palette-mobile"
 import React, { useEffect, useMemo } from "react"
 import { Animated, Easing, ViewProps } from "react-native"
 import styled from "styled-components/native"

src/palette/elements/Touchable/TouchableHighlightColor.tsx

@@ -1,5 +1,5 @@
-import { Color } from "palette/Theme"
-import React, { useState } from "react"
+import { Color } from "@artsy/palette-mobile"
+import { useState } from "react"
 import { Touchable, TouchableProps } from "./Touchable"
 
 interface TouchableHighlightState {