refactor: better theming (#5259)

src/components/AccountDetails/index.tsx

@@ -7,6 +7,7 @@ import { useAppDispatch } from 'state/hooks'
 import { updateSelectedWallet } from 'state/user/reducer'
 import { removeConnectedWallet } from 'state/wallets/reducer'
 import styled, { useTheme } from 'styled-components/macro'
+import { flexColumnNoWrap, flexRowNoWrap } from 'theme/styles'
 import { isMobile } from 'utils/userAgent'
 
 import { ReactComponent as Close } from '../../assets/images/x.svg'
@@ -20,7 +21,7 @@ import { AutoRow } from '../Row'
 import Transaction from './Transaction'
 
 const HeaderRow = styled.div`
-  ${({ theme }) => theme.flexRowNoWrap};
+  ${flexRowNoWrap};
   padding: 1rem 1rem;
   font-weight: 500;
   color: ${(props) => (props.color === 'blue' ? ({ theme }) => theme.deprecated_primary1 : 'inherit')};
@@ -60,14 +61,14 @@ const InfoCard = styled.div`
 `
 
 const AccountGroupingRow = styled.div`
-  ${({ theme }) => theme.flexRowNoWrap};
+  ${flexColumnNoWrap};
   justify-content: space-between;
   align-items: center;
   font-weight: 400;
   color: ${({ theme }) => theme.deprecated_text1};
 
   div {
-    ${({ theme }) => theme.flexRowNoWrap}
+    ${flexColumnNoWrap};
     align-items: center;
   }
 `
@@ -90,7 +91,7 @@ const YourAccount = styled.div`
 `
 
 const LowerSection = styled.div`
-  ${({ theme }) => theme.flexColumnNoWrap}
+  ${flexColumnNoWrap};
   padding: 1.5rem;
   flex-grow: 1;
   overflow: auto;
@@ -163,7 +164,7 @@ const WalletName = styled.div`
 `
 
 const TransactionListWrapper = styled.div`
-  ${({ theme }) => theme.flexColumnNoWrap};
+  ${flexColumnNoWrap};
 `
 
 const WalletAction = styled(ButtonSecondary)`

src/components/AddressInputPanel/index.tsx

@@ -4,6 +4,7 @@ import { t } from '@lingui/macro'
 import { useWeb3React } from '@web3-react/core'
 import { ChangeEvent, ReactNode, useCallback } from 'react'
 import styled, { useTheme } from 'styled-components/macro'
+import { flexColumnNoWrap } from 'theme/styles'
 
 import useENS from '../../hooks/useENS'
 import { ExternalLink, ThemedText } from '../../theme'
@@ -12,7 +13,7 @@ import { AutoColumn } from '../Column'
 import { RowBetween } from '../Row'
 
 const InputPanel = styled.div`
-  ${({ theme }) => theme.flexColumnNoWrap}
+  ${flexColumnNoWrap};
   position: relative;
   border-radius: 1.25rem;
   background-color: ${({ theme }) => theme.deprecated_bg1};

src/components/Badge/index.tsx

 import { readableColor } from 'polished'
 import { PropsWithChildren } from 'react'
 import styled, { DefaultTheme } from 'styled-components/macro'
-import { Color } from 'theme/styled'
 
 export enum BadgeVariant {
   DEFAULT = 'DEFAULT',
@@ -17,7 +16,7 @@ interface BadgeProps {
   variant?: BadgeVariant
 }
 
-function pickBackgroundColor(variant: BadgeVariant | undefined, theme: DefaultTheme): Color {
+function pickBackgroundColor(variant: BadgeVariant | undefined, theme: DefaultTheme): string {
   switch (variant) {
     case BadgeVariant.NEGATIVE:
       return theme.deprecated_error

src/components/Charts/LineChart.tsx

@@ -4,7 +4,6 @@ import { CurveFactory } from 'd3'
 import React from 'react'
 import { ReactNode } from 'react'
 import { useTheme } from 'styled-components/macro'
-import { Color } from 'theme/styled'
 
 export interface LineChartProps<T> {
   data: T[]
@@ -12,7 +11,7 @@ export interface LineChartProps<T> {
   getY: (t: T) => number
   marginTop?: number
   curve: CurveFactory
-  color?: Color
+  color?: string
   strokeWidth: number
   children?: ReactNode
   width: number

src/components/CurrencyInputPanel/SwapCurrencyInputPanel.tsx

@@ -11,6 +11,7 @@ import { darken } from 'polished'
 import { ReactNode, useCallback, useState } from 'react'
 import { Lock } from 'react-feather'
 import styled, { useTheme } from 'styled-components/macro'
+import { flexColumnNoWrap, flexRowNoWrap } from 'theme/styles'
 import { formatCurrencyAmount } from 'utils/formatCurrencyAmount'
 
 import { ReactComponent as DropDown } from '../../assets/images/dropdown.svg'
@@ -25,7 +26,7 @@ import CurrencySearchModal from '../SearchModal/CurrencySearchModal'
 import { FiatValue } from './FiatValue'
 
 const InputPanel = styled.div<{ hideInput?: boolean }>`
-  ${({ theme }) => theme.flexColumnNoWrap}
+  ${flexColumnNoWrap};
   position: relative;
   border-radius: ${({ hideInput }) => (hideInput ? '16px' : '20px')};
   z-index: 1;
@@ -106,13 +107,13 @@ const CurrencySelect = styled(ButtonGray)<{
 `
 
 const InputRow = styled.div`
-  ${({ theme }) => theme.flexRowNoWrap}
+  ${flexRowNoWrap};
   align-items: center;
   justify-content: space-between;
 `
 
 const LabelRow = styled.div`
-  ${({ theme }) => theme.flexRowNoWrap}
+  ${flexRowNoWrap};
   align-items: center;
   color: ${({ theme }) => theme.textSecondary};
   font-size: 0.75rem;

src/components/CurrencyInputPanel/index.tsx

@@ -11,6 +11,7 @@ import { darken } from 'polished'
 import { ReactNode, useCallback, useState } from 'react'
 import { Lock } from 'react-feather'
 import styled, { useTheme } from 'styled-components/macro'
+import { flexColumnNoWrap, flexRowNoWrap } from 'theme/styles'
 import { formatCurrencyAmount } from 'utils/formatCurrencyAmount'
 
 import { ReactComponent as DropDown } from '../../assets/images/dropdown.svg'
@@ -25,7 +26,7 @@ import CurrencySearchModal from '../SearchModal/CurrencySearchModal'
 import { FiatValue } from './FiatValue'
 
 const InputPanel = styled.div<{ hideInput?: boolean }>`
-  ${({ theme }) => theme.flexColumnNoWrap}
+  ${flexColumnNoWrap};
   position: relative;
   border-radius: ${({ hideInput }) => (hideInput ? '16px' : '20px')};
   background-color: ${({ theme, hideInput }) => (hideInput ? 'transparent' : theme.deprecated_bg2)};
@@ -95,14 +96,14 @@ const CurrencySelect = styled(ButtonGray)<{
 `
 
 const InputRow = styled.div<{ selected: boolean }>`
-  ${({ theme }) => theme.flexRowNoWrap}
+  ${flexRowNoWrap};
   align-items: center;
   justify-content: space-between;
   padding: ${({ selected }) => (selected ? ' 1rem 1rem 0.75rem 1rem' : '1rem 1rem 1rem 1rem')};
 `
 
 const LabelRow = styled.div`
-  ${({ theme }) => theme.flexRowNoWrap}
+  ${flexRowNoWrap};
   align-items: center;
   color: ${({ theme }) => theme.deprecated_text1};
   font-size: 0.75rem;

src/components/Identicon/StatusIcon.tsx

@@ -2,6 +2,7 @@ import { useWeb3React } from '@web3-react/core'
 import { ConnectionType } from 'connection'
 import useENSAvatar from 'hooks/useENSAvatar'
 import styled from 'styled-components/macro'
+import { flexColumnNoWrap } from 'theme/styles'
 
 import CoinbaseWalletIcon from '../../assets/images/coinbaseWalletIcon.svg'
 import WalletConnectIcon from '../../assets/images/walletConnectIcon.svg'
@@ -11,7 +12,7 @@ import Identicon from '../Identicon'
 
 export const IconWrapper = styled.div<{ size?: number }>`
   position: relative;
-  ${({ theme }) => theme.flexColumnNoWrap};
+  ${flexColumnNoWrap};
   align-items: center;
   justify-content: center;
   margin-right: 8px;

src/components/NavigationTabs/index.tsx

@@ -9,12 +9,13 @@ import { resetMintState } from 'state/mint/actions'
 import { resetMintState as resetMintV3State } from 'state/mint/v3/actions'
 import styled, { useTheme } from 'styled-components/macro'
 import { ThemedText } from 'theme'
+import { flexRowNoWrap } from 'theme/styles'
 
 import Row, { RowBetween } from '../Row'
 import SettingsTab from '../Settings'
 
 const Tabs = styled.div`
-  ${({ theme }) => theme.flexRowNoWrap}
+  ${flexRowNoWrap};
   align-items: center;
   border-radius: 3rem;
   justify-content: space-evenly;

src/components/TokenSafety/TokenSafetyLabel.tsx

@@ -4,9 +4,8 @@ import { ReactNode } from 'react'
 import { AlertOctagon, AlertTriangle } from 'react-feather'
 import { Text } from 'rebass'
 import styled from 'styled-components/macro'
-import { Color } from 'theme/styled'
 
-const Label = styled.div<{ color: Color }>`
+const Label = styled.div<{ color: string }>`
   padding: 4px 4px;
   font-size: 12px;
   background-color: ${({ color }) => color + '1F'};

src/components/TokenSafety/TokenSafetyMessage.tsx

@@ -5,9 +5,8 @@ import { AlertOctagon, AlertTriangle } from 'react-feather'
 import { Text } from 'rebass'
 import styled from 'styled-components/macro'
 import { ExternalLink } from 'theme'
-import { Color } from 'theme/styled'
 
-const Label = styled.div<{ color: Color }>`
+const Label = styled.div<{ color: string }>`
   width: 100%;
   padding: 12px 20px 16px;
   background-color: ${({ color }) => color + '1F'};

src/components/Tokens/TokenDetails/About.tsx

@@ -3,7 +3,7 @@ import { darken } from 'polished'
 import { useState } from 'react'
 import styled from 'styled-components/macro'
 import { ThemedText } from 'theme'
-import { textFadeIn } from 'theme/animations'
+import { textFadeIn } from 'theme/styles'
 
 import Resource from './Resource'
 

src/components/Tokens/TokenDetails/Skeleton.tsx

@@ -3,7 +3,7 @@ import { WIDGET_WIDTH } from 'components/Widget'
 import { ArrowLeft } from 'react-feather'
 import { useParams } from 'react-router-dom'
 import styled, { useTheme } from 'styled-components/macro'
-import { textFadeIn } from 'theme/animations'
+import { textFadeIn } from 'theme/styles'
 
 import { LoadingBubble } from '../loading'
 import { LogoContainer } from '../TokenTable/TokenRow'

src/components/Tokens/TokenDetails/StatsSection.tsx

@@ -2,7 +2,7 @@ import { Trans } from '@lingui/macro'
 import { ReactNode } from 'react'
 import styled from 'styled-components/macro'
 import { ThemedText } from 'theme'
-import { textFadeIn } from 'theme/animations'
+import { textFadeIn } from 'theme/styles'
 import { formatDollar } from 'utils/formatNumbers'
 
 import { TokenSortMethod } from '../state'

src/components/WalletDropdown/TransactionMenu.tsx

@@ -5,6 +5,7 @@ import ms from 'ms.macro'
 import { useCallback, useMemo } from 'react'
 import { useAppDispatch } from 'state/hooks'
 import styled from 'styled-components/macro'
+import { flexColumnNoWrap } from 'theme/styles'
 
 import { useAllTransactions } from '../../state/transactions/hooks'
 import { clearAllTransactions } from '../../state/transactions/reducer'
@@ -20,7 +21,7 @@ const Divider = styled.div`
 `
 
 const TransactionListWrapper = styled.div`
-  ${({ theme }) => theme.flexColumnNoWrap};
+  ${flexColumnNoWrap};
 `
 
 interface TransactionInformation {

src/components/WalletModal/Option.tsx

@@ -3,6 +3,7 @@ import { BrowserEvent, ElementName, EventName } from '@uniswap/analytics-events'
 import React from 'react'
 import { Check } from 'react-feather'
 import styled from 'styled-components/macro'
+import { flexColumnNoWrap, flexRowNoWrap } from 'theme/styles'
 
 import { ExternalLink } from '../../theme'
 
@@ -20,7 +21,7 @@ const InfoCard = styled.button<{ isActive?: boolean }>`
 `
 
 const CheckIcon = styled(Check)`
-  ${({ theme }) => theme.flexColumnNoWrap};
+  ${flexColumnNoWrap};
   height: 20px;
   width: 20px;
   align-items: center;
@@ -41,7 +42,7 @@ const OptionCard = styled(InfoCard as any)`
 `
 
 const OptionCardLeft = styled.div`
-  ${({ theme }) => theme.flexColumnNoWrap};
+  ${flexColumnNoWrap};
   justify-content: center;
   height: 100%;
 `
@@ -60,7 +61,7 @@ const OptionCardClickable = styled(OptionCard as any)<{
 `
 
 const HeaderText = styled.div`
-  ${({ theme }) => theme.flexRowNoWrap};
+  ${flexRowNoWrap};
   align-items: center;
   justify-content: center;
   color: ${(props) =>
@@ -76,7 +77,7 @@ const SubHeader = styled.div`
 `
 
 const IconWrapper = styled.div<{ size?: number | null }>`
-  ${({ theme }) => theme.flexColumnNoWrap};
+  ${flexColumnNoWrap};
   align-items: center;
   justify-content: center;
   padding-right: 12px;

src/components/WalletModal/PendingView.tsx

@@ -4,11 +4,12 @@ import { ButtonEmpty, ButtonPrimary } from 'components/Button'
 import { AlertTriangle } from 'react-feather'
 import styled from 'styled-components/macro'
 import { ThemedText } from 'theme'
+import { flexColumnNoWrap, flexRowNoWrap } from 'theme/styles'
 
 import Loader from '../Loader'
 
 const PendingSection = styled.div`
-  ${({ theme }) => theme.flexColumnNoWrap};
+  ${flexColumnNoWrap};
   align-items: center;
   justify-content: center;
   width: 100%;
@@ -33,14 +34,14 @@ const AlertTriangleIcon = styled(AlertTriangle)`
 `
 
 const LoaderContainer = styled.div`
+  ${flexRowNoWrap};
   margin: 16px 0;
-  ${({ theme }) => theme.flexRowNoWrap};
   align-items: center;
   justify-content: center;
 `
 
 const LoadingMessage = styled.div`
-  ${({ theme }) => theme.flexRowNoWrap};
+  ${flexRowNoWrap};
   align-items: center;
   justify-content: center;
   border-radius: 12px;
@@ -51,13 +52,13 @@ const LoadingMessage = styled.div`
 `
 
 const ErrorGroup = styled.div`
-  ${({ theme }) => theme.flexColumnNoWrap};
+  ${flexColumnNoWrap};
   align-items: center;
   justify-content: flex-start;
 `
 
 const LoadingWrapper = styled.div`
-  ${({ theme }) => theme.flexColumnNoWrap};
+  ${flexColumnNoWrap};
   align-items: center;
   justify-content: center;
 `

src/components/WalletModal/index.tsx

@@ -17,6 +17,7 @@ import { useAppDispatch, useAppSelector } from 'state/hooks'
 import { updateSelectedWallet } from 'state/user/reducer'
 import { useConnectedWallets } from 'state/wallets/hooks'
 import styled from 'styled-components/macro'
+import { flexColumnNoWrap, flexRowNoWrap } from 'theme/styles'
 import { isMobile } from 'utils/userAgent'
 
 import { ReactComponent as Close } from '../../assets/images/x.svg'
@@ -48,7 +49,7 @@ const CloseColor = styled(Close)`
 `
 
 const Wrapper = styled.div`
-  ${({ theme }) => theme.flexColumnNoWrap}
+  ${flexColumnNoWrap};
   background-color: ${({ theme }) => theme.backgroundSurface};
   outline: ${({ theme }) => `1px solid ${theme.backgroundOutline}`};
   box-shadow: ${({ theme }) => theme.deepShadow};
@@ -58,7 +59,7 @@ const Wrapper = styled.div`
 `
 
 const HeaderRow = styled.div`
-  ${({ theme }) => theme.flexRowNoWrap};
+  ${flexRowNoWrap};
   padding: 1rem 1rem;
   font-weight: 600;
   size: 16px;

src/components/Web3Status/index.tsx

@@ -14,6 +14,7 @@ import { AlertTriangle, ChevronDown, ChevronUp } from 'react-feather'
 import { useAppSelector } from 'state/hooks'
 import { useDerivedSwapInfo } from 'state/swap/hooks'
 import styled, { useTheme } from 'styled-components/macro'
+import { flexRowNoWrap } from 'theme/styles'
 
 import { useOnClickOutside } from '../../hooks/useOnClickOutside'
 import {
@@ -53,7 +54,7 @@ const ChevronWrapper = styled.button`
 `
 
 const Web3StatusGeneric = styled(ButtonSecondary)`
-  ${({ theme }) => theme.flexRowNoWrap}
+  ${flexRowNoWrap};
   width: 100%;
   align-items: center;
   padding: 0.5rem;
@@ -79,7 +80,7 @@ const Web3StatusError = styled(Web3StatusGeneric)`
 `
 
 const Web3StatusConnectWrapper = styled.div<{ faded?: boolean }>`
-  ${({ theme }) => theme.flexRowNoWrap}
+  ${flexRowNoWrap};
   align-items: center;
   background-color: ${({ theme }) => theme.accentActionSoft};
   border-radius: ${FULL_BORDER_RADIUS}px;

src/components/Widget/index.tsx

@@ -21,12 +21,12 @@ import {
 } from 'lib/utils/analytics'
 import { useCallback, useState } from 'react'
 import { useIsDarkMode } from 'state/user/hooks'
-import { DARK_THEME, LIGHT_THEME } from 'theme/widget'
 import { computeRealizedPriceImpact } from 'utils/prices'
 import { switchChain } from 'utils/switchChain'
 
 import { useSyncWidgetInputs } from './inputs'
 import { useSyncWidgetSettings } from './settings'
+import { DARK_THEME, LIGHT_THEME } from './theme'
 import { useSyncWidgetTransactions } from './transactions'
 
 export const WIDGET_WIDTH = 360

src/components/Widget/theme.ts

+import { darkTheme, lightTheme } from 'theme/colors'
+
+const fonts = {
+  fontFamily: 'Inter custom',
+}
+
+export const LIGHT_THEME = {
+  // surface
+  container: lightTheme.backgroundSurface,
+  interactive: lightTheme.backgroundInteractive,
+  module: lightTheme.backgroundModule,
+  accent: lightTheme.accentAction,
+  dialog: lightTheme.backgroundBackdrop,
+  outline: lightTheme.backgroundOutline,
+  // text
+  primary: lightTheme.textPrimary,
+  secondary: lightTheme.textSecondary,
+  onInteractive: lightTheme.accentTextDarkPrimary,
+  // state
+  success: lightTheme.accentSuccess,
+  warning: lightTheme.accentWarning,
+  error: lightTheme.accentCritical,
+
+  ...fonts,
+}
+
+export const DARK_THEME = {
+  // surface
+  container: darkTheme.backgroundSurface,
+  interactive: darkTheme.backgroundInteractive,
+  module: darkTheme.backgroundModule,
+  accent: darkTheme.accentAction,
+  dialog: darkTheme.backgroundBackdrop,
+  outline: darkTheme.backgroundOutline,
+  // text
+  primary: darkTheme.textPrimary,
+  secondary: darkTheme.textSecondary,
+  onInteractive: darkTheme.accentTextLightPrimary,
+  // state
+  success: darkTheme.accentSuccess,
+  warning: darkTheme.accentWarning,
+  error: darkTheme.accentCritical,
+
+  ...fonts,
+}

src/constants/chainInfo.ts

@@ -6,7 +6,7 @@ import celoLogo from 'assets/svg/celo_logo.svg'
 import optimismLogoUrl from 'assets/svg/optimistic_ethereum.svg'
 import polygonMaticLogo from 'assets/svg/polygon-matic-logo.svg'
 import ms from 'ms.macro'
-import { colorsDark } from 'theme/colors'
+import { darkTheme } from 'theme/colors'
 
 import { SupportedChainId, SupportedL1ChainId, SupportedL2ChainId } from './chains'
 import { ARBITRUM_LIST, CELO_LIST, OPTIMISM_LIST } from './lists'
@@ -61,7 +61,7 @@ const CHAIN_INFO: ChainInfoMap = {
     label: 'Ethereum',
     logoUrl: ethereumLogoUrl,
     nativeCurrency: { name: 'Ether', symbol: 'ETH', decimals: 18 },
-    color: colorsDark.chain_1,
+    color: darkTheme.chain_1,
   },
   [SupportedChainId.RINKEBY]: {
     networkType: NetworkType.L1,
@@ -71,7 +71,7 @@ const CHAIN_INFO: ChainInfoMap = {
     label: 'Rinkeby',
     logoUrl: ethereumLogoUrl,
     nativeCurrency: { name: 'Rinkeby Ether', symbol: 'rETH', decimals: 18 },
-    color: colorsDark.chain_4,
+    color: darkTheme.chain_4,
   },
   [SupportedChainId.ROPSTEN]: {
     networkType: NetworkType.L1,
@@ -81,7 +81,7 @@ const CHAIN_INFO: ChainInfoMap = {
     label: 'Ropsten',
     logoUrl: ethereumLogoUrl,
     nativeCurrency: { name: 'Ropsten Ether', symbol: 'ropETH', decimals: 18 },
-    color: colorsDark.chain_3,
+    color: darkTheme.chain_3,
   },
   [SupportedChainId.KOVAN]: {
     networkType: NetworkType.L1,
@@ -91,7 +91,7 @@ const CHAIN_INFO: ChainInfoMap = {
     label: 'Kovan',
     logoUrl: ethereumLogoUrl,
     nativeCurrency: { name: 'Kovan Ether', symbol: 'kovETH', decimals: 18 },
-    color: colorsDark.chain_420,
+    color: darkTheme.chain_420,
   },
   [SupportedChainId.GOERLI]: {
     networkType: NetworkType.L1,
@@ -101,7 +101,7 @@ const CHAIN_INFO: ChainInfoMap = {
     label: 'Görli',
     logoUrl: ethereumLogoUrl,
     nativeCurrency: { name: 'Görli Ether', symbol: 'görETH', decimals: 18 },
-    color: colorsDark.chain_5,
+    color: darkTheme.chain_5,
   },
   [SupportedChainId.OPTIMISM]: {
     networkType: NetworkType.L2,
@@ -118,8 +118,8 @@ const CHAIN_INFO: ChainInfoMap = {
     statusPage: 'https://optimism.io/status',
     helpCenterUrl: 'https://help.uniswap.org/en/collections/3137778-uniswap-on-optimistic-ethereum-oξ',
     nativeCurrency: { name: 'Ether', symbol: 'ETH', decimals: 18 },
-    color: colorsDark.chain_10,
-    backgroundColor: colorsDark.chain_10_background,
+    color: darkTheme.chain_10,
+    backgroundColor: darkTheme.chain_10_background,
   },
   [SupportedChainId.OPTIMISM_GOERLI]: {
     networkType: NetworkType.L2,
@@ -134,7 +134,7 @@ const CHAIN_INFO: ChainInfoMap = {
     statusPage: 'https://optimism.io/status',
     helpCenterUrl: 'https://help.uniswap.org/en/collections/3137778-uniswap-on-optimistic-ethereum-oξ',
     nativeCurrency: { name: 'Optimism Goerli Ether', symbol: 'görOpETH', decimals: 18 },
-    color: colorsDark.chain_420,
+    color: darkTheme.chain_420,
   },
   [SupportedChainId.ARBITRUM_ONE]: {
     networkType: NetworkType.L2,
@@ -149,8 +149,8 @@ const CHAIN_INFO: ChainInfoMap = {
     defaultListUrl: ARBITRUM_LIST,
     helpCenterUrl: 'https://help.uniswap.org/en/collections/3137787-uniswap-on-arbitrum',
     nativeCurrency: { name: 'Ether', symbol: 'ETH', decimals: 18 },
-    color: colorsDark.chain_42,
-    backgroundColor: colorsDark.chain_42161_background,
+    color: darkTheme.chain_42,
+    backgroundColor: darkTheme.chain_42161_background,
   },
   [SupportedChainId.ARBITRUM_RINKEBY]: {
     networkType: NetworkType.L2,
@@ -164,7 +164,7 @@ const CHAIN_INFO: ChainInfoMap = {
     defaultListUrl: ARBITRUM_LIST,
     helpCenterUrl: 'https://help.uniswap.org/en/collections/3137787-uniswap-on-arbitrum',
     nativeCurrency: { name: 'Rinkeby Arbitrum Ether', symbol: 'rinkArbETH', decimals: 18 },
-    color: colorsDark.chain_421611,
+    color: darkTheme.chain_421611,
   },
   [SupportedChainId.POLYGON]: {
     networkType: NetworkType.L1,
@@ -177,8 +177,8 @@ const CHAIN_INFO: ChainInfoMap = {
     logoUrl: polygonMaticLogo,
     circleLogoUrl: polygonCircleLogoUrl,
     nativeCurrency: { name: 'Polygon Matic', symbol: 'MATIC', decimals: 18 },
-    color: colorsDark.chain_137,
-    backgroundColor: colorsDark.chain_137_background,
+    color: darkTheme.chain_137,
+    backgroundColor: darkTheme.chain_137_background,
   },
   [SupportedChainId.POLYGON_MUMBAI]: {
     networkType: NetworkType.L1,

src/index.tsx

@@ -25,7 +25,7 @@ import LogsUpdater from './state/logs/updater'
 import TransactionUpdater from './state/transactions/updater'
 import UserUpdater from './state/user/updater'
 import ThemeProvider, { ThemedGlobalStyle } from './theme'
-import RadialGradientByChainUpdater from './theme/RadialGradientByChainUpdater'
+import RadialGradientByChainUpdater from './theme/components/RadialGradientByChainUpdater'
 
 const queryClient = new QueryClient()
 

src/nft/components/collection/PriceRange.tsx

@@ -14,7 +14,7 @@ import { default as Slider } from 'rc-slider'
 import { FocusEventHandler, FormEvent, useEffect, useState } from 'react'
 import { useLocation } from 'react-router-dom'
 import styled, { useTheme } from 'styled-components/macro'
-import { colorsDark } from 'theme/colors'
+import { darkTheme } from 'theme/colors'
 
 import * as styles from './PriceRange.css'
 import { TraitsHeader } from './TraitsHeader'
@@ -191,7 +191,7 @@ export const PriceRange = () => {
             backgroundColor: `white`,
             borderRadius: '4px',
             border: 'none',
-            boxShadow: colorsDark.shallowShadow.slice(0, -1),
+            boxShadow: darkTheme.shallowShadow.slice(0, -1),
           }}
           railStyle={{
             top: '3px',

src/nft/css/cssStringFromTheme.ts

+import { darkTheme } from 'nft/themes/darkTheme'
+import { lightTheme } from 'nft/themes/lightTheme'
+
 import { cssObjectFromTheme } from './cssObjectFromTheme'
 import { Theme } from './sprinkles.css'
 
@@ -6,3 +9,7 @@ export function cssStringFromTheme(theme: Theme | (() => Theme), options: { exte
     .map(([key, value]) => `${key}:${value};`)
     .join('')
 }
+
+export function rootCssString(isDarkMode: boolean) {
+  return isDarkMode ? cssStringFromTheme(darkTheme) : cssStringFromTheme(lightTheme)
+}

src/pages/App.tsx

@@ -13,6 +13,7 @@ import { Navigate, Route, Routes, useLocation } from 'react-router-dom'
 import { useIsDarkMode } from 'state/user/hooks'
 import styled from 'styled-components/macro'
 import { SpinnerSVG } from 'theme/components'
+import { flexRowNoWrap } from 'theme/styles'
 import { Z_INDEX } from 'theme/zIndex'
 import { isProductionEnv } from 'utils/env'
 import { getCLS, getFCP, getFID, getLCP, Metric } from 'web-vitals'
@@ -23,7 +24,7 @@ import NavBar from '../components/NavBar'
 import Polling from '../components/Polling'
 import Popups from '../components/Popups'
 import { useIsExpertMode } from '../state/user/hooks'
-import DarkModeQueryParamReader from '../theme/DarkModeQueryParamReader'
+import DarkModeQueryParamReader from '../theme/components/DarkModeQueryParamReader'
 import AddLiquidity from './AddLiquidity'
 import { RedirectDuplicateTokenIds } from './AddLiquidity/redirects'
 import { RedirectDuplicateTokenIdsV2 } from './AddLiquidityV2/redirects'
@@ -78,7 +79,7 @@ const BodyWrapper = styled.div`
 `
 
 const HeaderWrapper = styled.div<{ scrolledState?: boolean }>`
-  ${({ theme }) => theme.flexRowNoWrap}
+  ${flexRowNoWrap};
   background-color: ${({ theme, scrolledState }) => scrolledState && theme.backgroundSurface};
   border-bottom: ${({ theme, scrolledState }) => scrolledState && `1px solid ${theme.backgroundOutline}`};
   width: 100%;

src/theme/colors.ts

 // Based mostly on https://github.com/Uniswap/interface/blob/main/src/theme/index.tsx
-
-import { Color } from './styled'
 import { opacify } from './utils'
 
-export interface GlobalPalette {
-  white: Color
-  black: Color
-  gray50: Color
-  gray100: Color
-  gray150: Color
-  gray200: Color
-  gray250: Color
-  gray300: Color
-  gray350: Color
-  gray400: Color
-  gray450: Color
-  gray500: Color
-  gray550: Color
-  gray600: Color
-  gray650: Color
-  gray700: Color
-  gray750: Color
-  gray800: Color
-  gray850: Color
-  gray900: Color
-  pink50: Color
-  pink100: Color
-  pink200: Color
-  pink300: Color
-  pink400: Color
-  pink500: Color
-  pink600: Color
-  pink700: Color
-  pink800: Color
-  pink900: Color
-  pinkVibrant: Color
-  red50: Color
-  red100: Color
-  red200: Color
-  red300: Color
-  red400: Color
-  red500: Color
-  red600: Color
-  red700: Color
-  red800: Color
-  red900: Color
-  redVibrant: Color
-  yellow50: Color
-  yellow100: Color
-  yellow200: Color
-  yellow300: Color
-  yellow400: Color
-  yellow500: Color
-  yellow600: Color
-  yellow700: Color
-  yellow800: Color
-  yellow900: Color
-  yellowVibrant: Color
-  gold200: Color
-  goldVibrant: Color
-  green50: Color
-  green100: Color
-  green200: Color
-  green300: Color
-  green400: Color
-  green500: Color
-  green600: Color
-  green700: Color
-  green800: Color
-  green900: Color
-  greenVibrant: Color
-  blue50: Color
-  blue100: Color
-  blue200: Color
-  blue300: Color
-  blue400: Color
-  blue500: Color
-  blue600: Color
-  blue700: Color
-  blue800: Color
-  blue900: Color
-  blueVibrant: Color
-  magentaVibrant: Color
-  purple900: Color
-  networkEthereum: Color
-  networkOptimism: Color
-  networkOptimismSoft: Color
-  networkPolygon: Color
-  networkArbitrum: Color
-  networkPolygonSoft: Color
-  networkEthereumSoft: Color
-}
-
-export const colors: GlobalPalette = {
+export const colors = {
   white: '#FFFFFF',
   black: '#000000',
   gray50: '#F5F6FC',
@@ -184,108 +93,9 @@ export const colors: GlobalPalette = {
   networkEthereumSoft: 'rgba(98, 126, 234, 0.16)',
 }
 
-export interface Palette {
-  userThemeColor: Color
-
-  background: string
-  backgroundBackdrop: Color
-  backgroundSurface: Color
-  backgroundInteractive: Color
-  backgroundFloating: Color
-  backgroundModule: Color
-  backgroundOutline: Color
-  backgroundScrim: Color
-  backgroundScrolledSurface: Color
-
-  textPrimary: Color
-  textSecondary: Color
-  textTertiary: Color
-
-  accentAction: Color
-  accentActive: Color
-  accentSuccess: Color
-  accentWarning: Color
-  accentFailure: Color
-  accentCritical: Color
-
-  accentActionSoft: Color
-  accentActiveSoft: Color
-  accentSuccessSoft: Color
-  accentWarningSoft: Color
-  accentFailureSoft: Color
-
-  accentTextDarkPrimary: Color
-  accentTextDarkSecondary: Color
-  accentTextDarkTertiary: Color
-
-  accentTextLightPrimary: Color
-  accentTextLightSecondary: Color
-  accentTextLightTertiary: Color
-
-  white: Color
-  black: Color
-
-  chain_1: Color
-  chain_3: Color
-  chain_4: Color
-  chain_5: Color
-  chain_10: Color
-  chain_137: Color
-  chain_42: Color
-  chain_420: Color
-  chain_42161: Color
-  chain_421611: Color
-  chain_80001: Color
-  chain_137_background: Color
-  chain_10_background: Color
-  chain_42161_background: Color
-
-  shallowShadow: Color
-  deepShadow: Color
-  networkDefaultShadow: Color
-
-  stateOverlayHover: Color
-  stateOverlayPressed: Color
-}
-
-export const colorsLight: Palette = {
-  userThemeColor: colors.pink400,
-
-  background: '#faf9fa', //INTENTIONALLY OFF THEME TO GIVE WHITE BG A SOFTER VISUAL
-  backgroundBackdrop: colors.white,
-  backgroundSurface: colors.white,
-  backgroundModule: colors.gray50,
-  backgroundInteractive: colors.gray100,
-  backgroundFloating: opacify(8, colors.gray700),
-  backgroundOutline: colors.gray100,
-  backgroundScrim: opacify(60, colors.gray900),
-  backgroundScrolledSurface: opacify(72, colors.white),
-
-  textPrimary: colors.gray900,
-  textSecondary: colors.gray400,
-  textTertiary: colors.gray300,
-
-  accentAction: colors.pink400,
-  accentActive: colors.blue400,
-  accentSuccess: colors.green300,
-  accentWarning: colors.gold200,
-  accentFailure: colors.red400,
-  accentCritical: colors.red400,
-
-  accentActionSoft: opacify(24, colors.pink400),
-  accentActiveSoft: opacify(24, colors.blue400),
-  accentSuccessSoft: opacify(24, colors.green400),
-  accentWarningSoft: opacify(24, colors.gold200),
-  accentFailureSoft: opacify(12, colors.red400),
-
-  accentTextDarkPrimary: opacify(80, colors.gray900),
-  accentTextDarkSecondary: opacify(60, colors.gray900),
-  accentTextDarkTertiary: opacify(24, colors.gray900),
-
-  accentTextLightPrimary: colors.gray50,
-  accentTextLightSecondary: opacify(60, colors.gray50),
-  accentTextLightTertiary: opacify(12, colors.gray50),
+export type Theme = typeof darkTheme
 
+const commonTheme = {
   white: colors.white,
   black: colors.black,
 
@@ -304,18 +114,13 @@ export const colorsLight: Palette = {
   chain_10_background: colors.red900,
   chain_42161_background: colors.blue900,
 
-  deepShadow:
-    '8px 12px 20px rgba(51, 53, 72, 0.04), 4px 6px 12px rgba(51, 53, 72, 0.02), 4px 4px 8px rgba(51, 53, 72, 0.04);',
-  shallowShadow:
-    '6px 6px 10px rgba(51, 53, 72, 0.01), 2px 2px 6px rgba(51, 53, 72, 0.02), 1px 2px 2px rgba(51, 53, 72, 0.02);',
-
-  networkDefaultShadow: `0px 40px 120px ${opacify(12, colors.pink400)}`,
-
-  stateOverlayHover: opacify(8, colors.gray300),
-  stateOverlayPressed: opacify(24, colors.gray200),
+  hoverState: opacify(24, colors.blue200),
+  hoverDefault: opacify(8, colors.gray200),
 }
 
-export const colorsDark: Palette = {
+export const darkTheme = {
+  ...commonTheme,
+
   userThemeColor: colors.magentaVibrant,
 
   background: colors.gray800,
@@ -353,24 +158,6 @@ export const colorsDark: Palette = {
   accentTextLightSecondary: opacify(72, colors.gray50),
   accentTextLightTertiary: opacify(12, colors.gray50),
 
-  white: colors.white,
-  black: colors.black,
-
-  chain_1: colors.networkEthereum,
-  chain_3: colors.yellow400,
-  chain_4: colors.pink400,
-  chain_5: colors.green400,
-  chain_10: colors.networkOptimism,
-  chain_137: colors.networkPolygon,
-  chain_42: colors.networkArbitrum,
-  chain_420: colors.networkEthereum,
-  chain_42161: colors.networkEthereum,
-  chain_421611: colors.networkEthereum,
-  chain_80001: colors.networkPolygon,
-  chain_137_background: colors.purple900,
-  chain_10_background: colors.red900,
-  chain_42161_background: colors.blue900,
-
   deepShadow: '12px 16px 24px rgba(0, 0, 0, 0.24), 12px 8px 12px rgba(0, 0, 0, 0.24), 4px 4px 8px rgba(0, 0, 0, 0.32);',
   shallowShadow: '4px 4px 10px rgba(0, 0, 0, 0.24), 2px 2px 4px rgba(0, 0, 0, 0.12), 1px 2px 2px rgba(0, 0, 0, 0.12);',
 
@@ -379,3 +166,54 @@ export const colorsDark: Palette = {
   stateOverlayHover: opacify(8, colors.gray300),
   stateOverlayPressed: opacify(24, colors.gray200),
 }
+
+export const lightTheme: Theme = {
+  ...commonTheme,
+
+  userThemeColor: colors.magentaVibrant,
+
+  background: '#faf9fa', //INTENTIONALLY OFF THEME TO GIVE WHITE BG A SOFTER VISUAL
+  backgroundBackdrop: colors.white,
+  backgroundSurface: colors.white,
+  backgroundModule: colors.gray50,
+  backgroundInteractive: colors.gray100,
+  backgroundFloating: opacify(8, colors.gray700),
+  backgroundOutline: colors.gray150,
+  backgroundScrim: opacify(60, colors.gray900),
+  backgroundScrolledSurface: opacify(72, colors.white),
+
+  textPrimary: colors.gray900,
+  textSecondary: colors.gray400,
+  textTertiary: colors.gray300,
+
+  accentAction: colors.pink400,
+  accentActive: colors.blue400,
+  accentSuccess: colors.green300,
+  accentWarning: colors.gold200,
+  accentFailure: colors.red400,
+  accentCritical: colors.red400,
+
+  accentActionSoft: opacify(24, colors.pink400),
+  accentActiveSoft: opacify(24, colors.blue400),
+  accentSuccessSoft: opacify(24, colors.green400),
+  accentWarningSoft: opacify(24, colors.gold200),
+  accentFailureSoft: opacify(12, colors.red400),
+
+  accentTextDarkPrimary: opacify(80, colors.gray900),
+  accentTextDarkSecondary: opacify(60, colors.gray900),
+  accentTextDarkTertiary: opacify(24, colors.gray900),
+
+  accentTextLightPrimary: colors.gray50,
+  accentTextLightSecondary: opacify(60, colors.gray50),
+  accentTextLightTertiary: opacify(12, colors.gray50),
+
+  deepShadow:
+    '8px 12px 20px rgba(51, 53, 72, 0.04), 4px 6px 12px rgba(51, 53, 72, 0.02), 4px 4px 8px rgba(51, 53, 72, 0.04);',
+  shallowShadow:
+    '6px 6px 10px rgba(51, 53, 72, 0.01), 2px 2px 6px rgba(51, 53, 72, 0.02), 1px 2px 2px rgba(51, 53, 72, 0.02);',
+
+  networkDefaultShadow: `0px 40px 120px ${opacify(12, colors.pink400)}`,
+
+  stateOverlayHover: opacify(8, colors.gray300),
+  stateOverlayPressed: opacify(24, colors.gray200),
+}

src/theme/DarkModeQueryParamReader.tsx → src/theme/components/DarkModeQueryParamReader.tsx

@@ -3,7 +3,7 @@ import { useEffect } from 'react'
 import { useLocation } from 'react-router-dom'
 import { useAppDispatch } from 'state/hooks'
 
-import { updateUserDarkMode } from '../state/user/reducer'
+import { updateUserDarkMode } from '../../state/user/reducer'
 
 export default function DarkModeQueryParamReader(): null {
   const { search } = useLocation()

src/theme/RadialGradientByChainUpdater.ts → src/theme/components/RadialGradientByChainUpdater.ts

@@ -3,8 +3,8 @@ import { useIsNftPage } from 'hooks/useIsNftPage'
 import { useEffect } from 'react'
 import { useDarkModeManager } from 'state/user/hooks'
 
-import { SupportedChainId } from '../constants/chains'
-import { colorsDark, colorsLight } from './colors'
+import { SupportedChainId } from '../../constants/chains'
+import { darkTheme, lightTheme } from '../colors'
 
 const initialStyles = {
   width: '200vw',
@@ -26,6 +26,7 @@ const setBackground = (newValues: TargetBackgroundStyles) =>
       backgroundRadialGradientElement.style[key as keyof typeof backgroundResetStyles] = value
     }
   })
+
 export default function RadialGradientByChainUpdater(): null {
   const { chainId } = useWeb3React()
   const [darkMode] = useDarkModeManager()
@@ -40,8 +41,8 @@ export default function RadialGradientByChainUpdater(): null {
     if (isNftPage) {
       setBackground(initialStyles)
       backgroundRadialGradientElement.style.background = darkMode
-        ? colorsDark.backgroundBackdrop
-        : colorsLight.backgroundBackdrop
+        ? darkTheme.backgroundBackdrop
+        : lightTheme.backgroundBackdrop
       return
     }
 

src/theme/components.tsx → src/theme/components/index.tsx

@@ -14,11 +14,11 @@ import {
 } from 'react-feather'
 import { Link } from 'react-router-dom'
 import styled, { css, keyframes } from 'styled-components/macro'
+import { flexRowNoWrap } from 'theme/styles'
 import { Z_INDEX } from 'theme/zIndex'
 
-import { ReactComponent as TooltipTriangle } from '../assets/svg/tooltip_triangle.svg'
-import { anonymizeLink } from '../utils/anonymizeLink'
-import { Color } from './styled'
+import { ReactComponent as TooltipTriangle } from '../../assets/svg/tooltip_triangle.svg'
+import { anonymizeLink } from '../../utils/anonymizeLink'
 
 // TODO: Break this file into a components folder
 
@@ -343,12 +343,14 @@ const CopyHelperContainer = styled(LinkStyledButton)<{ clicked: boolean }>`
     color: ${({ color, theme }) => color || theme.accentAction};
   }
 `
+
 const CopyHelperText = styled.span<{ fontSize: number }>`
-  ${({ theme }) => theme.flexRowNoWrap};
+  ${flexRowNoWrap};
   font-size: ${({ fontSize }) => fontSize + 'px'};
   font-weight: 400;
   align-items: center;
 `
+
 const CopiedIcon = styled(CheckCircle)`
   color: ${({ theme }) => theme.accentSuccess};
   stroke-width: 1.5px;
@@ -356,12 +358,12 @@ const CopiedIcon = styled(CheckCircle)`
 interface CopyHelperProps {
   link?: boolean
   toCopy: string
-  color?: Color
+  color?: string
   fontSize?: number
   iconSize?: number
   gap?: number
   iconPosition?: 'left' | 'right'
-  iconColor?: Color
+  iconColor?: string
   children: ReactNode
 }
 

src/theme/components/text.tsx

+/**
+ * Preset styles of the Rebass Text component
+ */
+
+import { Text, TextProps as TextPropsOriginal } from 'rebass'
+import styled from 'styled-components/macro'
+
+const TextWrapper = styled(Text)<{ color: keyof string }>`
+  color: ${({ color, theme }) => (theme as any)[color]};
+`
+
+type TextProps = Omit<TextPropsOriginal, 'css'>
+
+// todo: export each component individually
+
+export const ThemedText = {
+  BodyPrimary(props: TextProps) {
+    return <TextWrapper fontWeight={400} fontSize={16} color="textPrimary" {...props} />
+  },
+  BodySecondary(props: TextProps) {
+    return <TextWrapper fontWeight={400} fontSize={16} color="textSecondary" {...props} />
+  },
+  HeadlineSmall(props: TextProps) {
+    return <TextWrapper fontWeight={600} fontSize={20} lineHeight="28px" color="textPrimary" {...props} />
+  },
+  LargeHeader(props: TextProps) {
+    return <TextWrapper fontWeight={400} fontSize={36} color="textPrimary" {...props} />
+  },
+  Link(props: TextProps) {
+    return <TextWrapper fontWeight={600} fontSize={14} color="accentAction" {...props} />
+  },
+  MediumHeader(props: TextProps) {
+    return <TextWrapper fontWeight={400} fontSize={20} color="textPrimary" {...props} />
+  },
+  SubHeader(props: TextProps) {
+    return <TextWrapper fontWeight={600} fontSize={16} color="textPrimary" {...props} />
+  },
+  SubHeaderSmall(props: TextProps) {
+    return <TextWrapper fontWeight={500} fontSize={14} color="textSecondary" {...props} />
+  },
+  DeprecatedMain(props: TextProps) {
+    return <TextWrapper fontWeight={500} color="deprecated_text2" {...props} />
+  },
+  DeprecatedLink(props: TextProps) {
+    return <TextWrapper fontWeight={500} color="deprecated_primary1" {...props} />
+  },
+  DeprecatedLabel(props: TextProps) {
+    return <TextWrapper fontWeight={600} color="deprecated_text1" {...props} />
+  },
+  DeprecatedBlack(props: TextProps) {
+    return <TextWrapper fontWeight={500} color="deprecated_text1" {...props} />
+  },
+  DeprecatedWhite(props: TextProps) {
+    return <TextWrapper fontWeight={500} color="deprecated_white" {...props} />
+  },
+  DeprecatedBody(props: TextProps) {
+    return <TextWrapper fontWeight={400} fontSize={16} color="deprecated_text1" {...props} />
+  },
+  DeprecatedLargeHeader(props: TextProps) {
+    return <TextWrapper fontWeight={600} fontSize={24} {...props} />
+  },
+  DeprecatedMediumHeader(props: TextProps) {
+    return <TextWrapper fontWeight={500} fontSize={20} {...props} />
+  },
+  DeprecatedSubHeader(props: TextProps) {
+    return <TextWrapper fontWeight={400} fontSize={14} {...props} />
+  },
+  DeprecatedSmall(props: TextProps) {
+    return <TextWrapper fontWeight={500} fontSize={11} {...props} />
+  },
+  DeprecatedBlue(props: TextProps) {
+    return <TextWrapper fontWeight={500} color="deprecated_blue1" {...props} />
+  },
+  DeprecatedYellow(props: TextProps) {
+    return <TextWrapper fontWeight={500} color="deprecated_yellow3" {...props} />
+  },
+  DeprecatedDarkGray(props: TextProps) {
+    return <TextWrapper fontWeight={500} color="deprecated_text3" {...props} />
+  },
+  DeprecatedGray(props: TextProps) {
+    return <TextWrapper fontWeight={500} color="deprecated_bg3" {...props} />
+  },
+  DeprecatedItalic(props: TextProps) {
+    return <TextWrapper fontWeight={500} fontSize={12} fontStyle="italic" color="deprecated_text2" {...props} />
+  },
+  DeprecatedError({ error, ...props }: { error: boolean } & TextProps) {
+    return <TextWrapper fontWeight={500} color={error ? 'deprecated_red1' : 'deprecated_text2'} {...props} />
+  },
+}

src/theme/deprecatedColors.ts

+import { colors, darkTheme, lightTheme } from './colors'
+import { opacify } from './utils'
+
+function getDeprecatedTheme(darkMode: boolean) {
+  return {
+    // base
+    deprecated_white: colors.white,
+    deprecated_black: colors.black,
+
+    // text
+    deprecated_text1: darkMode ? darkTheme.textPrimary : lightTheme.textPrimary,
+    deprecated_text2: darkMode ? darkTheme.textSecondary : lightTheme.textSecondary,
+    deprecated_text3: darkMode ? darkTheme.textTertiary : lightTheme.textTertiary,
+    deprecated_text4: darkMode ? colors.gray200 : colors.gray300,
+    deprecated_text5: darkMode ? colors.gray500 : colors.gray50,
+
+    // backgrounds / grays
+    deprecated_bg0: darkMode ? colors.gray900 : colors.white,
+    deprecated_bg1: darkMode ? colors.gray800 : colors.gray50,
+    deprecated_bg2: darkMode ? colors.gray700 : colors.gray100,
+    deprecated_bg3: darkMode ? colors.gray600 : colors.gray200,
+    deprecated_bg4: darkMode ? colors.gray500 : colors.gray300,
+    deprecated_bg5: darkMode ? colors.gray400 : colors.gray400,
+    deprecated_bg6: darkMode ? colors.gray300 : colors.gray500,
+
+    //specialty colors
+    deprecated_modalBG: darkMode ? opacify(40, colors.black) : opacify(30, colors.black),
+    deprecated_advancedBG: darkMode ? opacify(10, colors.black) : opacify(60, colors.white),
+
+    //primary colors
+    deprecated_primary1: darkMode ? darkTheme.accentAction : lightTheme.accentAction,
+    deprecated_primary2: darkMode ? colors.blue400 : colors.pink300,
+    deprecated_primary3: darkMode ? colors.blue300 : colors.pink200,
+    deprecated_primary4: darkMode ? '#376bad70' : '#F6DDE8',
+    deprecated_primary5: darkMode ? '#153d6f70' : '#FDEAF1',
+
+    // color text
+    deprecated_primaryText1: darkMode ? darkTheme.accentAction : lightTheme.accentAction,
+
+    // secondary colors
+    deprecated_secondary1: darkMode ? darkTheme.accentAction : lightTheme.accentAction,
+    deprecated_secondary2: darkMode ? opacify(25, colors.gray900) : '#F6DDE8',
+    deprecated_secondary3: darkMode ? opacify(25, colors.gray900) : '#FDEAF1',
+
+    // other
+    deprecated_red1: darkMode ? darkTheme.accentFailure : lightTheme.accentFailure,
+    deprecated_red2: darkMode ? darkTheme.accentFailure : lightTheme.accentFailure,
+    deprecated_red3: darkMode ? darkTheme.accentFailure : lightTheme.accentFailure,
+    deprecated_green1: darkMode ? darkTheme.accentSuccess : lightTheme.accentSuccess,
+    deprecated_yellow1: colors.yellow400,
+    deprecated_yellow2: colors.yellow500,
+    deprecated_yellow3: colors.yellow600,
+    deprecated_blue1: darkMode ? darkTheme.accentAction : lightTheme.accentAction,
+    deprecated_blue2: darkMode ? darkTheme.accentAction : lightTheme.accentAction,
+    deprecated_error: darkMode ? darkTheme.accentFailure : lightTheme.accentFailure,
+    deprecated_success: darkMode ? darkTheme.accentSuccess : lightTheme.accentSuccess,
+    deprecated_warning: darkMode ? darkTheme.accentWarning : lightTheme.accentWarning,
+
+    // dont wanna forget these blue yet
+    deprecated_blue4: darkMode ? '#153d6f70' : '#C4D9F8',
+  }
+}
+
+export const lightDeprecatedTheme = getDeprecatedTheme(false)
+export const darkDeprecatedTheme = getDeprecatedTheme(true)

src/theme/styled.d.ts

-import { FlattenSimpleInterpolation, ThemedCssFunction } from 'styled-components/macro'
+import { getTheme } from './index'
 
-export type Color = string
-export type AllColors = ThemeColors | Colors
-
-export interface ThemeColors {
-  userThemeColor: string
-
-  background: string
-  backgroundBackdrop: Color
-  backgroundSurface: Color
-  backgroundModule: Color
-  backgroundFloating: Color
-  backgroundInteractive: Color
-  backgroundOutline: Color
-  backgroundScrim: Color
-
-  textPrimary: Color
-  textSecondary: Color
-  textTertiary: Color
-
-  accentAction: Color
-  accentActive: Color
-  accentSuccess: Color
-  accentWarning: Color
-  accentFailure: Color
-  accentCritical: Color
-
-  accentActionSoft: Color
-  accentActiveSoft: Color
-  accentSuccessSoft: Color
-  accentWarningSoft: Color
-  accentFailureSoft: Color
-
-  accentTextDarkPrimary: Color
-  accentTextDarkSecondary: Color
-  accentTextDarkTertiary: Color
-
-  accentTextLightPrimary: Color
-  accentTextLightSecondary: Color
-  accentTextLightTertiary: Color
-
-  white: Color
-  black: Color
-
-  chain_1: Color
-  chain_3: Color
-  chain_4: Color
-  chain_5: Color
-  chain_10: Color
-  chain_137: Color
-  chain_42: Color
-  chain_420: Color
-  chain_42161: Color
-  chain_421611: Color
-  chain_80001: Color
-
-  shallowShadow: Color
-  deepShadow: Color
-  networkDefaultShadow: Color
-  hoverState: Color
-  hoverDefault: Color
-  stateOverlayHover: Color
-  stateOverlayPressed: Color
-}
-
-export interface Colors {
-  darkMode: boolean
-
-  // base
-  deprecated_white: Color
-  deprecated_black: Color
-
-  // text
-  deprecated_text1: Color
-  deprecated_text2: Color
-  deprecated_text3: Color
-  deprecated_text4: Color
-  deprecated_text5: Color
-
-  // backgrounds / grays
-  deprecated_bg0: Color
-  deprecated_bg1: Color
-  deprecated_bg2: Color
-  deprecated_bg3: Color
-  deprecated_bg4: Color
-  deprecated_bg5: Color
-  deprecated_bg6: Color
-
-  deprecated_modalBG: Color
-  deprecated_advancedBG: Color
-
-  //blues
-  deprecated_primary1: Color
-  deprecated_primary2: Color
-  deprecated_primary3: Color
-  deprecated_primary4: Color
-  deprecated_primary5: Color
-
-  deprecated_primaryText1: Color
-
-  // pinks
-  deprecated_secondary1: Color
-  deprecated_secondary2: Color
-  deprecated_secondary3: Color
-
-  // other
-  deprecated_red1: Color
-  deprecated_red2: Color
-  deprecated_red3: Color
-  deprecated_green1: Color
-  deprecated_yellow1: Color
-  deprecated_yellow2: Color
-  deprecated_yellow3: Color
-  deprecated_blue1: Color
-  deprecated_blue2: Color
-
-  deprecated_blue4: Color
-  // deprecated_blue5: Color
-
-  deprecated_error: Color
-  deprecated_success: Color
-  deprecated_warning: Color
-}
+type InferredTheme = ReturnType<typeof getTheme>
 
 declare module 'styled-components/macro' {
-  export interface DefaultTheme extends Colors, ThemeColors {
-    grids: Grids
-
-    // shadows
-    shadow1: Color
-
-    // media queries
-    deprecated_mediaWidth: {
-      deprecated_upToExtraSmall: ThemedCssFunction<DefaultTheme>
-      deprecated_upToSmall: ThemedCssFunction<DefaultTheme>
-      deprecated_upToMedium: ThemedCssFunction<DefaultTheme>
-      deprecated_upToLarge: ThemedCssFunction<DefaultTheme>
-    }
-
-    breakpoint: {
-      sm: number
-      md: number
-      lg: number
-      xl: number
-      xxl: number
-      xxxl: number
-    }
-    transition: {
-      duration: {
-        slow: string
-        medium: string
-        fast: string
-      }
-      timing: {
-        ease: string
-        in: string
-        out: string
-        inOut: string
-      }
-    }
-    opacity: {
-      hover: number
-      click: number
-    }
-    // css snippets
-    flexColumnNoWrap: FlattenSimpleInterpolation
-    flexRowNoWrap: FlattenSimpleInterpolation
+  export interface DefaultTheme extends InferredTheme {
+    // An interface declaring no members is equivalent to its supertype.
+    // That's why we redeclare a `darkMode` property in order to tell TypeScript our Theme is an InferredTheme
+    darkMode: boolean
   }
 }

src/theme/animations.ts → src/theme/styles.ts

 import { css, keyframes } from 'styled-components/macro'
 
+export const flexColumnNoWrap = css`
+  display: flex;
+  flex-flow: column nowrap;
+`
+
+export const flexRowNoWrap = css`
+  display: flex;
+  flex-flow: row nowrap;
+`
+
 const transitions = {
   duration: {
     slow: '500ms',
@@ -15,12 +25,12 @@ const transitions = {
 }
 
 export const fadeIn = keyframes`
-from {
-  opacity: 0;
-}
-to {
-  opacity: 1;
-}
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
 `
 
 export const textFadeIn = css`

src/theme/widget.ts

-import { colorsDark, colorsLight } from './colors'
-
-const fonts = {
-  fontFamily: 'Inter custom',
-}
-
-export const LIGHT_THEME = {
-  // surface
-  container: colorsLight.backgroundSurface,
-  interactive: colorsLight.backgroundInteractive,
-  module: colorsLight.backgroundModule,
-  accent: colorsLight.accentAction,
-  dialog: colorsLight.backgroundBackdrop,
-  outline: colorsLight.backgroundOutline,
-  // text
-  primary: colorsLight.textPrimary,
-  secondary: colorsLight.textSecondary,
-  onInteractive: colorsLight.accentTextDarkPrimary,
-  // state
-  success: colorsLight.accentSuccess,
-  warning: colorsLight.accentWarning,
-  error: colorsLight.accentCritical,
-
-  ...fonts,
-}
-
-export const DARK_THEME = {
-  // surface
-  container: colorsDark.backgroundSurface,
-  interactive: colorsDark.backgroundInteractive,
-  module: colorsDark.backgroundModule,
-  accent: colorsDark.accentAction,
-  dialog: colorsDark.backgroundBackdrop,
-  outline: colorsDark.backgroundOutline,
-  // text
-  primary: colorsDark.textPrimary,
-  secondary: colorsDark.textSecondary,
-  onInteractive: colorsDark.accentTextLightPrimary,
-  // state
-  success: colorsDark.accentSuccess,
-  warning: colorsDark.accentWarning,
-  error: colorsDark.accentCritical,
-
-  ...fonts,
-}