refactor: Sprinkles Design System Update Color (#4704)

* text primary and secondary

* backgroundOutline

* lightGray

* placeholder

* error and disconnect

* deprecate

* loading

* white opacities

* white

* border cleanup

* organize

* bagQuantity color fix

* fix nav border colors
Co-authored-by: Charles Bachmeier <charlie@genie.xyz>

src/components/NavBar/ChainSelector.css.ts

@@ -10,7 +10,7 @@ export const ChainSelector = style([
     height: '40',
     cursor: 'pointer',
     border: 'none',
-    color: 'blackBlue',
+    color: 'textPrimary',
     background: 'none',
   }),
 ])

src/components/NavBar/ChainSelector.tsx

@@ -97,7 +97,7 @@ export const ChainSelector = ({ leftAlign }: ChainSelectorProps) => {
       >
         {!isSupported ? (
           <>
-            <TokenWarningRedIcon fill={themeVars.colors.darkGray} width={24} height={24} />
+            <TokenWarningRedIcon fill={themeVars.colors.textSecondary} width={24} height={24} />
             <Box as="span" className={subhead} display={{ sm: 'none', xxl: 'flex' }} style={{ lineHeight: '20px' }}>
               Unsupported
             </Box>

src/components/NavBar/MenuDropdown.css.ts

@@ -17,7 +17,7 @@ export const hover = style([
 export const MenuRow = style([
   hover,
   sprinkles({
-    color: 'blackBlue',
+    color: 'textPrimary',
     paddingY: '8',
     paddingX: '8',
     width: 'full',
@@ -40,7 +40,7 @@ export const SecondaryText = style([
   sprinkles({
     paddingY: '8',
     paddingX: '8',
-    color: 'darkGray',
+    color: 'textSecondary',
     width: 'full',
   }),
   {
@@ -55,7 +55,7 @@ export const Separator = style([
   }),
   {
     borderTop: 'solid',
-    borderColor: themeVars.colors.medGray,
+    borderColor: themeVars.colors.backgroundOutline,
     borderWidth: '1px',
   },
 ])

src/components/NavBar/MenuDropdown.tsx

@@ -100,7 +100,7 @@ const Icon = ({ href, children }: { href?: string; children: ReactNode }) => {
         rel={href ? 'noopener noreferrer' : undefined}
         display="flex"
         flexDirection="column"
-        color="blackBlue"
+        color="textPrimary"
         background="none"
         border="none"
         justifyContent="center"
@@ -190,13 +190,28 @@ export const MenuDropdown = () => {
               </Box>
               <IconRow>
                 <Icon href="https://discord.com/invite/FCfyBSbCU5">
-                  <DiscordIconMenu className={styles.hover} width={24} height={24} color={themeVars.colors.darkGray} />
+                  <DiscordIconMenu
+                    className={styles.hover}
+                    width={24}
+                    height={24}
+                    color={themeVars.colors.textSecondary}
+                  />
                 </Icon>
                 <Icon href="https://twitter.com/Uniswap">
-                  <TwitterIconMenu className={styles.hover} width={24} height={24} color={themeVars.colors.darkGray} />
+                  <TwitterIconMenu
+                    className={styles.hover}
+                    width={24}
+                    height={24}
+                    color={themeVars.colors.textSecondary}
+                  />
                 </Icon>
                 <Icon href="https://github.com/Uniswap">
-                  <GithubIconMenu className={styles.hover} width={24} height={24} color={themeVars.colors.darkGray} />
+                  <GithubIconMenu
+                    className={styles.hover}
+                    width={24}
+                    height={24}
+                    color={themeVars.colors.textSecondary}
+                  />
                 </Icon>
               </IconRow>
             </Column>

src/components/NavBar/NavDropdown.css.ts

@@ -4,9 +4,9 @@ import { sprinkles } from '../../nft/css/sprinkles.css'
 
 const baseNavDropdown = style([
   sprinkles({
-    background: 'lightGray',
+    background: 'backgroundSurface',
     borderStyle: 'solid',
-    borderColor: 'medGray',
+    borderColor: 'backgroundOutline',
     borderWidth: '1px',
     paddingBottom: '8',
     paddingTop: '8',

src/components/NavBar/NavIcon.tsx

@@ -15,7 +15,7 @@ export const NavIcon = ({ children, isActive, onClick }: NavIconProps) => {
       as="button"
       className={styles.navIcon}
       background={isActive ? 'accentActiveSoft' : 'none'}
-      color={isActive ? 'blackBlue' : 'darkGray'}
+      color={isActive ? 'textPrimary' : 'textSecondary'}
       onClick={onClick}
       height="40"
     >

src/components/NavBar/SearchBar.css.ts

@@ -12,7 +12,7 @@ const baseSearchStyle = style([
     width: { sm: 'viewWidth' },
     borderStyle: 'solid',
     borderWidth: '1px',
-    borderColor: 'medGray',
+    borderColor: 'backgroundOutline',
   }),
   {
     '@media': {
@@ -43,10 +43,10 @@ export const searchBarContainer = style([
 export const searchBar = style([
   baseSearchStyle,
   sprinkles({
-    color: 'placeholder',
+    color: 'textTertiary',
     paddingX: '16',
     cursor: 'pointer',
-    background: 'lightGray',
+    background: 'backgroundSurface',
   }),
 ])
 
@@ -55,7 +55,7 @@ export const searchBarInput = style([
     padding: '0',
     fontWeight: 'normal',
     fontSize: '16',
-    color: { default: 'blackBlue', placeholder: 'placeholder' },
+    color: { default: 'textPrimary', placeholder: 'textTertiary' },
     border: 'none',
     background: 'none',
   }),
@@ -69,7 +69,7 @@ export const searchBarDropdown = style([
   sprinkles({
     borderBottomLeftRadius: '12',
     borderBottomRightRadius: '12',
-    background: 'lightGray',
+    background: 'backgroundSurface',
     height: { sm: 'viewHeight', md: 'auto' },
   }),
   {
@@ -120,7 +120,7 @@ export const primaryText = style([
     overflow: 'hidden',
     whiteSpace: 'nowrap',
     textOverflow: 'ellipsis',
-    color: 'blackBlue',
+    color: 'textPrimary',
   }),
   {
     lineHeight: '24px',
@@ -130,7 +130,7 @@ export const primaryText = style([
 export const secondaryText = style([
   buttonTextSmall,
   sprinkles({
-    color: 'darkGray',
+    color: 'textSecondary',
   }),
   {
     lineHeight: '20px',
@@ -140,7 +140,7 @@ export const secondaryText = style([
 export const imageHolder = style([
   suggestionImage,
   sprinkles({
-    background: 'loading',
+    background: 'backgroundModule',
     flexShrink: '0',
   }),
 ])
@@ -153,7 +153,7 @@ export const suggestionIcon = sprinkles({
 export const sectionHeader = style([
   subheadSmall,
   sprinkles({
-    color: 'darkGray',
+    color: 'textSecondary',
   }),
   {
     lineHeight: '20px',

src/components/NavBar/SearchBar.tsx

@@ -400,7 +400,7 @@ export const SearchBar = () => {
             <Box display={{ sm: 'none', md: 'flex' }}>
               <MagnifyingGlassIcon />
             </Box>
-            <Box display={{ sm: 'flex', md: 'none' }} color="placeholder" onClick={toggleOpen}>
+            <Box display={{ sm: 'flex', md: 'none' }} color="textTertiary" onClick={toggleOpen}>
               <ChevronLeftIcon />
             </Box>
           </Box>

src/components/NavBar/ShoppingBag.css.ts

@@ -6,7 +6,7 @@ export const bagQuantity = style([
     position: 'absolute',
     top: '4',
     right: '4',
-    backgroundColor: 'magicGradient',
+    backgroundColor: 'backgroundAction',
     borderRadius: 'round',
     color: 'explicitWhite',
     textAlign: 'center',

src/components/NavBar/SuggestionRow.tsx

@@ -180,13 +180,13 @@ export const SkeletonRow = () => {
         <Box className={styles.imageHolder} />
         <Column gap="4" width="full">
           <Row justifyContent="space-between">
-            <Box borderRadius="round" height="20" background="loading" style={{ width: '180px' }} />
-            <Box borderRadius="round" height="20" width="48" background="loading" />
+            <Box borderRadius="round" height="20" background="backgroundModule" style={{ width: '180px' }} />
+            <Box borderRadius="round" height="20" width="48" background="backgroundModule" />
           </Row>
 
           <Row justifyContent="space-between">
-            <Box borderRadius="round" height="16" width="120" background="loading" />
-            <Box borderRadius="round" height="16" width="48" background="loading" />
+            <Box borderRadius="round" height="16" width="120" background="backgroundModule" />
+            <Box borderRadius="round" height="16" width="48" background="backgroundModule" />
           </Row>
         </Column>
       </Row>

src/components/NavBar/style.css.ts

@@ -10,7 +10,7 @@ export const nav = style([
     width: 'full',
     height: '72',
     zIndex: '2',
-    background: 'white08',
+    background: 'backgroundFloating',
   }),
   {
     backdropFilter: 'blur(24px)',
@@ -28,7 +28,7 @@ export const logoContainer = style([
 export const logo = style([
   sprinkles({
     display: 'block',
-    color: 'blackBlue',
+    color: 'textPrimary',
   }),
 ])
 
@@ -96,14 +96,14 @@ const baseMenuItem = style([
 export const menuItem = style([
   baseMenuItem,
   sprinkles({
-    color: 'darkGray',
+    color: 'textSecondary',
   }),
 ])
 
 export const activeMenuItem = style([
   baseMenuItem,
   sprinkles({
-    color: 'blackBlue',
+    color: 'textPrimary',
     background: 'backgroundFloating',
   }),
 ])
@@ -119,6 +119,6 @@ export const mobileBottomBar = style([
     paddingY: '4',
     paddingX: '8',
     height: '56',
-    background: 'lightGray',
+    background: 'backgroundSurface',
   }),
 ])

src/nft/components/bag/Bag.css.ts

@@ -9,8 +9,8 @@ export const bagContainer = style([
     width: 'full',
     height: 'full',
     right: '0',
-    background: 'lightGray',
-    color: 'blackBlue',
+    background: 'backgroundSurface',
+    color: 'textPrimary',
     paddingTop: '20',
     paddingBottom: '24',
     zIndex: { sm: 'offcanvas', md: '3' },
@@ -40,7 +40,7 @@ export const assetsContainer = style([
 export const header = style([
   subhead,
   sprinkles({
-    color: 'blackBlue',
+    color: 'textPrimary',
     justifyContent: 'space-between',
   }),
   {
@@ -50,7 +50,7 @@ export const header = style([
 
 export const clearAll = style([
   sprinkles({
-    color: 'placeholder',
+    color: 'textTertiary',
     cursor: 'pointer',
     fontWeight: 'semibold',
   }),

src/nft/components/bag/Bag.tsx

@@ -31,13 +31,13 @@ const EmptyState = () => {
     <Center height="full">
       <Column gap="12">
         <Center>
-          <LargeBagIcon color={themeVars.colors.placeholder} />
+          <LargeBagIcon color={themeVars.colors.textTertiary} />
         </Center>
         <Column gap="16">
           <Center className={subhead} style={{ lineHeight: '24px' }}>
             Your bag is empty
           </Center>
-          <Center fontSize="12" fontWeight="normal" color="darkGray" style={{ lineHeight: '16px' }}>
+          <Center fontSize="12" fontWeight="normal" color="textSecondary" style={{ lineHeight: '16px' }}>
             Selected NFTs will appear here
           </Center>
         </Column>
@@ -57,8 +57,8 @@ const ScrollingIndicator = ({ top, show }: SeparatorProps) => (
     borderWidth="1px"
     borderStyle="solid"
     borderColor="transparent"
-    borderTopColor={top ? 'transparent' : 'medGray'}
-    borderBottomColor={top ? 'medGray' : 'transparent'}
+    borderTopColor={top ? 'transparent' : 'backgroundOutline'}
+    borderBottomColor={top ? 'backgroundOutline' : 'transparent'}
     opacity={show ? '1' : '0'}
     transition="250"
   />
@@ -75,12 +75,12 @@ const BagHeader = ({ numberOfAssets, toggleBag, resetFlow }: BagHeaderProps) =>
     <Column gap="4" paddingX="32" marginBottom="20">
       <Row className={styles.header}>
         My bag
-        <Box display="flex" padding="2" color="darkGray" cursor="pointer" onClick={toggleBag}>
+        <Box display="flex" padding="2" color="textSecondary" cursor="pointer" onClick={toggleBag}>
           <BagCloseIcon />
         </Box>
       </Row>
       {numberOfAssets > 0 && (
-        <Box fontSize="14" fontWeight="normal" style={{ lineHeight: '20px' }} color="blackBlue">
+        <Box fontSize="14" fontWeight="normal" style={{ lineHeight: '20px' }} color="textPrimary">
           {roundAndPluralize(numberOfAssets, 'NFT')} ·{' '}
           <Box
             as="span"

src/nft/components/bag/BagFooter.css.ts

@@ -9,8 +9,8 @@ export const footerContainer = sprinkles({
 
 export const footer = style([
   sprinkles({
-    background: 'lightGray',
-    color: 'blackBlue',
+    background: 'backgroundSurface',
+    color: 'textPrimary',
     paddingX: '16',
     paddingY: '12',
     borderBottomLeftRadius: '12',
@@ -38,7 +38,7 @@ export const payButton = style([
   body,
   sprinkles({
     background: 'blue400',
-    color: 'blackBlue',
+    color: 'textPrimary',
     border: 'none',
     borderRadius: '12',
     paddingY: '12',
@@ -57,7 +57,7 @@ export const payButton = style([
 
 export const ethPill = style([
   sprinkles({
-    background: 'lightGray',
+    background: 'backgroundSurface',
     gap: '8',
     paddingY: '4',
     paddingLeft: '4',

src/nft/components/bag/BagFooter.tsx

@@ -93,7 +93,7 @@ export const BagFooter = ({
             }
           }}
         >
-          {isPending && <Loader size="20px" stroke="white" />}
+          {isPending && <Loader size="20px" stroke="backgroundSurface" />}
           {!isConnected || walletModalIsOpen
             ? 'Connect wallet'
             : bagStatus === BagStatus.FETCHING_FINAL_ROUTE || bagStatus === BagStatus.CONFIRMING_IN_WALLET

src/nft/components/bag/BagRow.css.ts

@@ -4,7 +4,7 @@ import { sprinkles, themeVars, vars } from 'nft/css/sprinkles.css'
 
 export const bagRow = style([
   sprinkles({
-    color: 'blackBlue',
+    color: 'textPrimary',
     padding: '4',
     gap: '12',
     cursor: 'pointer',
@@ -15,7 +15,7 @@ export const bagRow = style([
     marginLeft: '-4px',
     marginRight: '-4px',
     ':hover': {
-      background: themeVars.colors.darkGray10,
+      background: themeVars.colors.backgroundOutline,
     },
   },
 ])
@@ -23,32 +23,32 @@ export const bagRow = style([
 export const unavailableAssetsContainer = sprinkles({
   background: 'none',
   gap: '12',
-  color: 'blackBlue',
+  color: 'textPrimary',
   paddingY: '16',
   borderStyle: 'solid',
   borderWidth: '1px',
   borderColor: 'transparent',
-  borderTopColor: 'medGray',
-  borderBottomColor: 'medGray',
+  borderTopColor: 'backgroundOutline',
+  borderBottomColor: 'backgroundOutline',
   height: 'full',
 })
 
 export const priceChangeColumn = sprinkles({
   background: 'none',
   gap: '8',
-  color: 'blackBlue',
+  color: 'textPrimary',
   paddingY: '16',
   borderStyle: 'solid',
   borderWidth: '1px',
   borderColor: 'transparent',
-  borderBottomColor: 'medGray',
+  borderBottomColor: 'backgroundOutline',
   height: 'full',
   cursor: 'pointer',
 })
 
 export const priceChangeRow = style([
   sprinkles({
-    color: 'placeholder',
+    color: 'textTertiary',
     gap: '4',
     fontSize: '14',
     fontWeight: 'normal',
@@ -61,13 +61,13 @@ export const priceChangeRow = style([
 export const unavailableAssetRow = style([
   sprinkles({
     gap: '12',
-    color: 'blackBlue',
+    color: 'textPrimary',
     paddingX: '12',
     paddingY: '4',
   }),
   {
     ':hover': {
-      background: themeVars.colors.lightGrayButton,
+      background: themeVars.colors.backgroundInteractive,
     },
   },
 ])
@@ -84,7 +84,7 @@ export const priceChangeButton = style([
   }),
   {
     ':hover': {
-      color: themeVars.colors.placeholder,
+      color: themeVars.colors.textTertiary,
     },
   },
 ])
@@ -104,11 +104,11 @@ export const keepButton = style([
 export const removeButton = style([
   priceChangeButton,
   sprinkles({
-    backgroundColor: 'lightGrayButton',
+    backgroundColor: 'backgroundInteractive',
   }),
   {
     ':hover': {
-      background: `linear-gradient(rgba(76, 130, 251, 0.24), rgba(76, 130, 251, .24)), linear-gradient(${vars.color.lightGrayButton}, ${vars.color.lightGrayButton})`,
+      background: `linear-gradient(rgba(76, 130, 251, 0.24), rgba(76, 130, 251, .24)), linear-gradient(${vars.color.backgroundInteractive}, ${vars.color.backgroundInteractive})`,
     },
   },
 ])
@@ -190,7 +190,7 @@ export const previewImageGrid = style([
 ])
 
 export const toolTip = sprinkles({
-  color: 'darkGray',
+  color: 'textSecondary',
   display: 'flex',
   flexShrink: '0',
 })

src/nft/components/bag/BagRow.tsx

@@ -99,7 +99,7 @@ export const BagRow = ({ asset, removeAsset, showRemove, grayscale, isMobile }:
           overflow="hidden"
           height="full"
           justifyContent="space-between"
-          color={grayscale ? 'darkGray' : 'blackBlue'}
+          color={grayscale ? 'textSecondary' : 'textPrimary'}
         >
           <Column>
             <Row overflow="hidden" whiteSpace="nowrap" gap="2">
@@ -131,7 +131,7 @@ interface PriceChangeBagRowProps {
 export const PriceChangeBagRow = ({ asset, markAssetAsReviewed, top, isMobile }: PriceChangeBagRowProps) => {
   const isPriceIncrease = BigNumber.from(asset.updatedPriceInfo?.ETHPrice).gt(BigNumber.from(asset.priceInfo.ETHPrice))
   return (
-    <Column className={styles.priceChangeColumn} borderTopColor={top ? 'medGray' : 'transparent'}>
+    <Column className={styles.priceChangeColumn} borderTopColor={top ? 'backgroundOutline' : 'transparent'}>
       <Row className={styles.priceChangeRow}>
         {isPriceIncrease ? <SquareArrowUpIcon /> : <SquareArrowDownIcon />}
         <Box>{`Price ${isPriceIncrease ? 'increased' : 'decreased'} from ${formatWeiToDecimal(
@@ -197,7 +197,7 @@ const UnavailableAssetsPreview = ({ assets }: UnavailableAssetsPreviewProps) =>
         height="32"
         borderStyle="solid"
         borderWidth="1px"
-        borderColor="lightGray"
+        borderColor="backgroundSurface"
         borderRadius="4"
         style={{ zIndex: assets.length - index }}
         className={styles.grayscaleImage}
@@ -244,7 +244,7 @@ export const UnavailableAssetsHeaderRow = ({
             position="relative"
             width="20"
             height="20"
-            color="blackBlue"
+            color="textPrimary"
             justifyContent="center"
             cursor="pointer"
             onClick={() => clearUnavailableAssets()}
@@ -266,11 +266,11 @@ export const UnavailableAssetsHeaderRow = ({
               toggleOpen()
             }}
           >
-            <Row gap="12" fontSize="14" color="darkGray" fontWeight="normal" style={{ lineHeight: '20px' }}>
+            <Row gap="12" fontSize="14" color="textSecondary" fontWeight="normal" style={{ lineHeight: '20px' }}>
               {!isOpen && <UnavailableAssetsPreview assets={assets.slice(0, 5)} />}
               {`${assets.length} unavailable NFTs`}
             </Row>
-            <Row color="darkGray">{isOpen ? <ChevronUpBagIcon /> : <ChevronDownBagIcon />}</Row>
+            <Row color="textSecondary">{isOpen ? <ChevronUpBagIcon /> : <ChevronDownBagIcon />}</Row>
           </Row>
           <Column gap="8">
             {isOpen &&

src/nft/components/collection/Card.css.ts

@@ -14,7 +14,7 @@ export const card = style([
     '@media': {
       [`(max-width: ${breakpoints.sm - 1}px)`]: {
         ':hover': {
-          borderColor: themeVars.colors.medGray,
+          borderColor: themeVars.colors.backgroundOutline,
           cursor: 'pointer',
           background: vars.color.lightGrayOverlay,
         },
@@ -24,13 +24,13 @@ export const card = style([
 ])
 
 export const loadingBackground = style({
-  background: `linear-gradient(270deg, ${themeVars.colors.medGray} 0%, ${themeVars.colors.lightGray} 100%)`,
+  background: `linear-gradient(270deg, ${themeVars.colors.backgroundOutline} 0%, ${themeVars.colors.backgroundSurface} 100%)`,
 })
 
 export const notSelectedCard = style([
   card,
   sprinkles({
-    backgroundColor: 'lightGray',
+    backgroundColor: 'backgroundSurface',
     borderColor: 'transparent',
   }),
 ])
@@ -43,7 +43,7 @@ export const selectedCard = style([
   card,
   sprinkles({
     background: 'lightGrayOverlay',
-    borderColor: 'medGray',
+    borderColor: 'backgroundOutline',
   }),
 ])
 
@@ -89,7 +89,7 @@ export const erc1155ButtonRow = sprinkles({
 
 export const erc1155QuantityText = style([
   sprinkles({
-    color: 'blackBlue',
+    color: 'textPrimary',
   }),
   {
     lineHeight: '20px',
@@ -100,7 +100,7 @@ export const erc1155QuantityText = style([
 export const erc1155Button = sprinkles({
   display: 'flex',
   justifyContent: 'center',
-  backgroundColor: 'white90',
+  backgroundColor: 'accentActionSoft',
   textAlign: 'center',
   background: 'none',
   border: 'none',
@@ -113,12 +113,12 @@ export const erc1155Button = sprinkles({
 export const erc1155PlusButton = style([
   erc1155Button,
   sprinkles({
-    color: 'magicGradient',
+    color: 'backgroundSurface',
   }),
   {
     ':hover': {
-      backgroundColor: themeVars.colors.magicGradient,
-      color: themeVars.colors.blackBlue,
+      backgroundColor: themeVars.colors.backgroundAction,
+      color: themeVars.colors.textPrimary,
     },
   },
 ])
@@ -126,12 +126,12 @@ export const erc1155PlusButton = style([
 export const erc1155MinusButton = style([
   erc1155Button,
   sprinkles({
-    color: 'error',
+    color: 'accentFailure',
   }),
   {
     ':hover': {
-      backgroundColor: themeVars.colors.error,
-      color: themeVars.colors.blackBlue,
+      backgroundColor: themeVars.colors.accentFailure,
+      color: themeVars.colors.textPrimary,
     },
   },
 ])
@@ -141,8 +141,8 @@ export const rarityInfo = style([
     display: 'flex',
     borderRadius: '4',
     height: '16',
-    color: 'blackBlue',
-    background: 'lightGrayButton',
+    color: 'textPrimary',
+    background: 'backgroundInteractive',
     fontSize: '10',
     fontWeight: 'semibold',
     paddingX: '4',

src/nft/components/collection/Card.tsx

@@ -379,7 +379,7 @@ const PrimaryInfo = ({ children }: { children: ReactNode }) => {
       overflow="hidden"
       whiteSpace="nowrap"
       textOverflow="ellipsis"
-      color="blackBlue"
+      color="textPrimary"
       fontWeight="medium"
       fontSize="14"
       style={{ lineHeight: '20px' }}
@@ -404,7 +404,7 @@ const SecondaryDetails = ({ children }: { children: ReactNode }) => (
 const SecondaryInfo = ({ children }: { children: ReactNode }) => {
   return (
     <Box
-      color="blackBlue"
+      color="textPrimary"
       overflow="hidden"
       whiteSpace="nowrap"
       textOverflow="ellipsis"
@@ -419,7 +419,7 @@ const SecondaryInfo = ({ children }: { children: ReactNode }) => {
 
 const TertiaryInfo = ({ children }: { children: ReactNode }) => {
   return (
-    <Box marginTop={'8'} color="darkGray">
+    <Box marginTop={'8'} color="textSecondary">
       {children}
     </Box>
   )
@@ -453,16 +453,16 @@ const Button = ({ children, quantity, selectedChildren, onClick, onSelectedClick
             buttonHovered || isMobile
               ? 'explicitWhite'
               : selected
-              ? 'error'
+              ? 'accentFailure'
               : asset.notForSale
-              ? 'placeholder'
+              ? 'textTertiary'
               : 'blue400'
           }
           style={{
             background: `${
               buttonHovered || isMobile
                 ? selected
-                  ? vars.color.error
+                  ? vars.color.accentFailure
                   : vars.color.blue400
                 : selected
                 ? '#FA2B391F'
@@ -596,7 +596,7 @@ const Pool = () => {
       text={<Box fontSize="14">This item is part of an NFT liquidity pool. Price increases as supply decreases.</Box>}
       placement="top"
     >
-      <Box display="flex" flexShrink="0" marginLeft="4" color="darkGray">
+      <Box display="flex" flexShrink="0" marginLeft="4" color="textSecondary">
         <PoolIcon width="20" height="20" />
       </Box>
     </MouseoverTooltip>
@@ -615,7 +615,7 @@ const NoContentContainer = ({ uniformHeight }: NoContentContainerProps) => (
         width="full"
         style={{
           height: `${uniformHeight as number}px`,
-          background: `linear-gradient(270deg, ${themeVars.colors.medGray} 0%, ${themeVars.colors.lightGray} 100%)`,
+          background: `linear-gradient(270deg, ${themeVars.colors.backgroundOutline} 0%, ${themeVars.colors.backgroundSurface} 100%)`,
         }}
         fontWeight="normal"
         color="grey500"
@@ -634,7 +634,7 @@ const NoContentContainer = ({ uniformHeight }: NoContentContainerProps) => (
         width="full"
         style={{
           paddingTop: '100%',
-          background: `linear-gradient(270deg, ${themeVars.colors.medGray} 0%, ${themeVars.colors.lightGray} 100%)`,
+          background: `linear-gradient(270deg, ${themeVars.colors.backgroundOutline} 0%, ${themeVars.colors.backgroundSurface} 100%)`,
         }}
       >
         <Box

src/nft/components/collection/CollectionAsset.css.ts

@@ -10,7 +10,7 @@ export const assetInnerStyle = style([
     cursor: 'pointer',
   }),
   {
-    border: `4px solid ${vars.color.white}`,
+    border: `4px solid ${vars.color.backgroundSurface}`,
   },
 ])
 
@@ -34,12 +34,12 @@ export const buy = style([
     left: '50%',
     transform: 'translateX(-50%)',
   },
-  sprinkles({ color: 'white', position: 'absolute', borderRadius: 'round' }),
+  sprinkles({ color: 'backgroundSurface', position: 'absolute', borderRadius: 'round' }),
 ])
 
 export const tokenQuantityHovered = style([
   {
-    border: `4px solid ${vars.color.white}`,
+    border: `4px solid ${vars.color.backgroundSurface}`,
     display: 'flex',
     justifyContent: 'space-between',
   },
@@ -52,11 +52,11 @@ export const tokenQuantityHovered = style([
 export const tokenQuantity = style([
   {
     padding: '10px 17px',
-    border: `4px solid ${vars.color.white}`,
+    border: `4px solid ${vars.color.backgroundSurface}`,
   },
   sprinkles({
     color: 'genieBlue',
-    backgroundColor: 'white',
+    backgroundColor: 'backgroundSurface',
     borderRadius: 'round',
     textAlign: 'center',
   }),
@@ -65,7 +65,7 @@ export const tokenQuantity = style([
 export const plusIcon = style([
   {
     padding: '10px',
-    border: `4px solid ${vars.color.white}`,
+    border: `4px solid ${vars.color.backgroundSurface}`,
   },
   sprinkles({
     width: '28',
@@ -81,7 +81,7 @@ export const bagIcon = style([
   },
   sprinkles({
     borderRadius: 'round',
-    backgroundColor: 'white',
+    backgroundColor: 'backgroundSurface',
   }),
 ])
 

src/nft/components/collection/CollectionNfts.tsx

@@ -212,7 +212,12 @@ export const CollectionNfts = ({ contractAddress, collectionStats, rarityVerifie
   return (
     <>
       <AnimatedBox position="sticky" top="72" width="full" zIndex="3">
-        <Box backgroundColor="white08" width="full" paddingBottom="8" style={{ backdropFilter: 'blur(24px)' }}>
+        <Box
+          backgroundColor="backgroundFloating"
+          width="full"
+          paddingBottom="8"
+          style={{ backdropFilter: 'blur(24px)' }}
+        >
           <Row marginTop="12" gap="12">
             <FilterButton
               isMobile={isMobile}
@@ -251,7 +256,7 @@ export const CollectionNfts = ({ contractAddress, collectionStats, rarityVerifie
           </div>
         ) : (
           !isLoading && (
-            <Center width="full" color="darkGray" style={{ height: '60vh' }}>
+            <Center width="full" color="textSecondary" style={{ height: '60vh' }}>
               <div style={{ display: 'block', textAlign: 'center' }}>
                 <p className={header2}>No NFTS found</p>
                 <Box className={clsx(bodySmall, buttonTextMedium)} color="blue" cursor="pointer">

src/nft/components/collection/CollectionSearch.tsx

@@ -9,15 +9,15 @@ export const CollectionSearch = () => {
   return (
     <Box
       as="input"
-      borderColor={{ default: 'medGray', focus: 'genieBlue' }}
+      borderColor={{ default: 'backgroundOutline', focus: 'genieBlue' }}
       borderWidth="1px"
       borderStyle="solid"
       borderRadius="12"
       padding="12"
-      backgroundColor="white"
+      backgroundColor="backgroundSurface"
       fontSize="16"
       height="44"
-      color={{ placeholder: 'darkGray', default: 'blackBlue' }}
+      color={{ placeholder: 'textSecondary', default: 'textPrimary' }}
       value={searchByNameText}
       placeholder={'Search by name'}
       onChange={(e: FormEvent<HTMLInputElement>) => {

src/nft/components/collection/CollectionStats.css.ts

@@ -27,7 +27,7 @@ export const baseCollectionImage = sprinkles({
   left: '0',
   borderStyle: 'solid',
   borderWidth: '4px',
-  borderColor: 'white',
+  borderColor: 'backgroundSurface',
 })
 
 export const collectionImage = style([
@@ -96,7 +96,7 @@ export const statsLabel = style([
   bodySmall,
   sprinkles({
     fontWeight: 'normal',
-    color: 'darkGray',
+    color: 'textSecondary',
     whiteSpace: 'nowrap',
   }),
   {

src/nft/components/collection/CollectionStats.tsx

@@ -7,8 +7,7 @@ import { themeVars } from 'nft/css/sprinkles.css'
 import { GenieCollection } from 'nft/types'
 import { ethNumberStandardFormatter } from 'nft/utils/currency'
 import { putCommas } from 'nft/utils/putCommas'
-import { useEffect, useReducer, useRef, useState } from 'react'
-import { ReactNode } from 'react'
+import { ReactNode, useEffect, useReducer, useRef, useState } from 'react'
 import ReactMarkdown from 'react-markdown'
 
 import { DiscordIcon, EllipsisIcon, ExternalIcon, InstagramIcon, TwitterIcon, VerifiedIcon, XMarkIcon } from '../icons'
@@ -25,7 +24,7 @@ const MobileSocialsIcon = ({ children, href }: { children: ReactNode; href: stri
       height="40"
       width="40"
       borderRadius="round"
-      backgroundColor="white"
+      backgroundColor="backgroundSurface"
     >
       {children}
     </Box>
@@ -45,9 +44,9 @@ const MobileSocialsPopover = ({
     <>
       <Row marginLeft="4" onClick={() => toggleCollectionSocials()}>
         {collectionSocialsIsOpen ? (
-          <XMarkIcon width="28" height="28" fill={themeVars.colors.darkGray} />
+          <XMarkIcon width="28" height="28" fill={themeVars.colors.textSecondary} />
         ) : (
-          <EllipsisIcon width="28" height="28" fill={themeVars.colors.darkGray} />
+          <EllipsisIcon width="28" height="28" fill={themeVars.colors.textSecondary} />
         )}
       </Row>
       {collectionSocialsIsOpen && (
@@ -64,7 +63,7 @@ const MobileSocialsPopover = ({
           {collectionStats.discordUrl ? (
             <MobileSocialsIcon href={collectionStats.discordUrl}>
               <Box margin="auto" paddingTop="4">
-                <DiscordIcon width={28} height={28} color={themeVars.colors.darkGray} />
+                <DiscordIcon width={28} height={28} color={themeVars.colors.textSecondary} />
               </Box>
             </MobileSocialsIcon>
           ) : null}
@@ -72,8 +71,8 @@ const MobileSocialsPopover = ({
             <MobileSocialsIcon href={'https://twitter.com/' + collectionStats.twitter}>
               <Box margin="auto" paddingTop="6">
                 <TwitterIcon
-                  fill={themeVars.colors.darkGray}
-                  color={themeVars.colors.darkGray}
+                  fill={themeVars.colors.textSecondary}
+                  color={themeVars.colors.textSecondary}
                   width="28px"
                   height="28px"
                 />
@@ -84,7 +83,7 @@ const MobileSocialsPopover = ({
           {collectionStats.instagram ? (
             <MobileSocialsIcon href={'https://instagram.com/' + collectionStats.instagram}>
               <Box margin="auto" paddingLeft="2" paddingTop="4">
-                <InstagramIcon fill={themeVars.colors.darkGray} width="28px" height="28px" />
+                <InstagramIcon fill={themeVars.colors.textSecondary} width="28px" height="28px" />
               </Box>
             </MobileSocialsIcon>
           ) : null}
@@ -92,7 +91,7 @@ const MobileSocialsPopover = ({
           {collectionStats.externalUrl ? (
             <MobileSocialsIcon href={collectionStats.externalUrl}>
               <Box margin="auto" paddingTop="4">
-                <ExternalIcon fill={themeVars.colors.darkGray} width="28px" height="28px" />
+                <ExternalIcon fill={themeVars.colors.textSecondary} width="28px" height="28px" />
               </Box>
             </MobileSocialsIcon>
           ) : null}
@@ -147,8 +146,8 @@ const CollectionName = ({
           {collectionStats.discordUrl ? (
             <SocialsIcon href={collectionStats.discordUrl}>
               <DiscordIcon
-                fill={themeVars.colors.darkGray}
-                color={themeVars.colors.darkGray}
+                fill={themeVars.colors.textSecondary}
+                color={themeVars.colors.textSecondary}
                 width="26px"
                 height="26px"
               />
@@ -157,8 +156,8 @@ const CollectionName = ({
           {collectionStats.twitter ? (
             <SocialsIcon href={'https://twitter.com/' + collectionStats.twitter}>
               <TwitterIcon
-                fill={themeVars.colors.darkGray}
-                color={themeVars.colors.darkGray}
+                fill={themeVars.colors.textSecondary}
+                color={themeVars.colors.textSecondary}
                 width="26px"
                 height="26px"
               />
@@ -167,12 +166,12 @@ const CollectionName = ({
 
           {collectionStats.instagram ? (
             <SocialsIcon href={'https://instagram.com/' + collectionStats.instagram}>
-              <InstagramIcon fill={themeVars.colors.darkGray} width="26px" height="26px" />
+              <InstagramIcon fill={themeVars.colors.textSecondary} width="26px" height="26px" />
             </SocialsIcon>
           ) : null}
           {collectionStats.externalUrl ? (
             <SocialsIcon href={collectionStats.externalUrl}>
-              <ExternalIcon fill={themeVars.colors.darkGray} width="26px" height="26px" />
+              <ExternalIcon fill={themeVars.colors.textSecondary} width="26px" height="26px" />
             </SocialsIcon>
           ) : null}
         </Row>

src/nft/components/collection/FilterButton.css.ts

@@ -7,8 +7,8 @@ export const filterButton = sprinkles({
 })
 
 export const filterButtonExpanded = style({
-  background: vars.color.lightGrayButton,
-  color: themeVars.colors.blackBlue,
+  background: vars.color.backgroundInteractive,
+  color: themeVars.colors.textPrimary,
 })
 
 export const filterBadge = style([

src/nft/components/collection/Filters.css.ts

@@ -31,7 +31,7 @@ export const rowHover = style([
   }),
   {
     ':hover': {
-      background: themeVars.colors.lightGray,
+      background: themeVars.colors.backgroundSurface,
     },
   },
 ])
@@ -45,29 +45,29 @@ export const rowHoverOpen = style([
   }),
   {
     ':hover': {
-      background: themeVars.colors.medGray,
+      background: themeVars.colors.backgroundOutline,
     },
   },
 ])
 
 export const subRowHover = style({
   ':hover': {
-    background: themeVars.colors.medGray,
+    background: themeVars.colors.backgroundOutline,
   },
 })
 
 export const detailsOpen = sprinkles({
-  background: 'darkGray10',
+  background: 'backgroundModule',
   overflow: 'hidden',
   borderStyle: 'solid',
   borderWidth: '1px',
-  borderColor: 'medGray',
+  borderColor: 'backgroundOutline',
 })
 
 export const summaryOpen = sprinkles({
   borderStyle: 'solid',
   borderWidth: '1px',
-  borderColor: 'medGray',
+  borderColor: 'backgroundOutline',
 })
 
 export const filterDropDowns = style([

src/nft/components/collection/Filters.tsx

@@ -60,7 +60,7 @@ export const Filters = ({
   return (
     <Box className={styles.container}>
       <Row width="full" justifyContent="space-between">
-        <Row as="span" fontSize="20" color="blackBlue">
+        <Row as="span" fontSize="20" color="textPrimary">
           Filters
         </Row>
       </Row>

src/nft/components/collection/MarketplaceSelect.tsx

@@ -69,7 +69,7 @@ const MarketplaceItem = ({
         {title}{' '}
       </Box>
       <Checkbox checked={isCheckboxSelected} hovered={hovered} onChange={handleCheckbox}>
-        <Box as="span" color="darkGray" marginLeft="4" paddingRight={'12'}>
+        <Box as="span" color="textSecondary" marginLeft="4" paddingRight={'12'}>
           {count}
         </Box>
       </Checkbox>
@@ -118,7 +118,7 @@ export const MarketplaceSelect = () => {
       >
         Marketplaces
         <Box
-          color="darkGray"
+          color="textSecondary"
           transition="250"
           height="28"
           width="28"

src/nft/components/collection/PriceRange.tsx

@@ -34,7 +34,7 @@ export const PriceRange = () => {
   }
 
   return (
-    <Row gap="12" marginTop="12" color="blackBlue">
+    <Row gap="12" marginTop="12" color="textPrimary">
       <Row position="relative" style={{ flex: 1 }}>
         <NumericInput
           style={{
@@ -44,7 +44,7 @@ export const PriceRange = () => {
           borderRadius="12"
           padding="12"
           fontSize="14"
-          color={{ placeholder: 'darkGray', default: 'blackBlue' }}
+          color={{ placeholder: 'textSecondary', default: 'textPrimary' }}
           backgroundColor="transparent"
           placeholder="Min"
           defaultValue={minPrice}
@@ -63,11 +63,11 @@ export const PriceRange = () => {
             width: isMobile ? '100%' : '142px',
             border: '2px solid rgba(153, 161, 189, 0.24)',
           }}
-          borderColor={{ default: 'medGray', focus: 'darkGray' }}
+          borderColor={{ default: 'backgroundOutline', focus: 'textSecondary' }}
           borderRadius="12"
           padding="12"
           fontSize="14"
-          color={{ placeholder: 'darkGray', default: 'blackBlue' }}
+          color={{ placeholder: 'textSecondary', default: 'textPrimary' }}
           backgroundColor="transparent"
           placeholder="Max"
           defaultValue={maxPrice}

src/nft/components/collection/TraitSelect.tsx

@@ -8,9 +8,7 @@ import { subheadSmall } from 'nft/css/common.css'
 import { Trait, useCollectionFilters } from 'nft/hooks/useCollectionFilters'
 import { pluralize } from 'nft/utils/roundAndPluralize'
 import { scrollToTop } from 'nft/utils/scrollToTop'
-import { useMemo } from 'react'
-import { FormEvent, MouseEvent } from 'react'
-import { useEffect, useLayoutEffect, useState } from 'react'
+import { FormEvent, MouseEvent, useEffect, useLayoutEffect, useMemo, useState } from 'react'
 
 import * as styles from './Filters.css'
 
@@ -90,7 +88,7 @@ const TraitItem = ({
           : trait.trait_value}
       </Box>
       <Checkbox checked={isCheckboxSelected} hovered={hovered} onChange={handleCheckbox}>
-        <Box as="span" color="darkGray" minWidth={'8'} paddingTop={'2'} paddingRight={'12'} position={'relative'}>
+        <Box as="span" color="textSecondary" minWidth={'8'} paddingTop={'2'} paddingRight={'12'} position={'relative'}>
           {!showFullTraitName && trait.trait_count}
         </Box>
       </Checkbox>
@@ -156,11 +154,11 @@ export const TraitSelect = ({ traits, type, search }: { traits: Trait[]; type: s
       >
         {type}
         <Box display="flex" alignItems="center">
-          <Box color="darkGray" display="inline-block" marginRight="12">
+          <Box color="textSecondary" display="inline-block" marginRight="12">
             {searchedTraits.length}
           </Box>
           <Box
-            color="darkGray"
+            color="textSecondary"
             display="inline-block"
             transition="250"
             height="28"

src/nft/components/common/Loading/LoadingSparkle.tsx

@@ -7,17 +7,17 @@ export const LoadingSparkle = () => {
     <svg width="40" height="41" viewBox="0 0 40 41" fill="none" xmlns="http://www.w3.org/2000/svg">
       <path
         d="M17.8281 10.834C17.6159 9.88757 17.4333 9.13689 17.291 8.58997C17.1751 8.11971 16.9497 7.68339 16.6331 7.31649C16.2834 6.97574 15.8515 6.731 15.3791 6.60601C14.8206 6.43175 14.0365 6.24408 13.0457 6.04301C12.7771 5.98134 12.6321 5.83926 12.6321 5.61405C12.6286 5.56049 12.6369 5.50679 12.6564 5.45676C12.6758 5.40674 12.7061 5.36159 12.7449 5.32448C12.8303 5.25054 12.9343 5.20142 13.0457 5.18241C13.8337 5.03623 14.6127 4.84557 15.3791 4.61136C15.8508 4.48054 16.282 4.23345 16.6331 3.89283C16.9497 3.52593 17.1751 3.08961 17.291 2.61935C17.4468 2.06885 17.6258 1.32623 17.8281 0.39145C17.8791 0.123349 18.016 0 18.2416 0C18.4671 0 18.6095 0.131392 18.6739 0.39145C18.8726 1.32623 19.0516 2.06885 19.211 2.61935C19.3304 3.08988 19.5585 3.52599 19.8769 3.89283C20.229 4.23347 20.6611 4.48052 21.1336 4.61136C21.8997 4.84657 22.6788 5.03724 23.467 5.18241C23.576 5.18865 23.6782 5.23739 23.7515 5.31813C23.8249 5.39887 23.8635 5.50515 23.8591 5.61405C23.8591 5.83926 23.7275 5.98134 23.467 6.04301C22.6802 6.19136 21.9014 6.37926 21.1336 6.60601C20.6605 6.73103 20.2276 6.97574 19.8769 7.31649C19.5585 7.68333 19.3304 8.11943 19.211 8.58997C19.0472 9.12617 18.8672 9.88757 18.6739 10.834C18.6095 11.1021 18.4671 11.2281 18.2416 11.2281C18.016 11.2281 17.8737 11.0967 17.8281 10.834Z"
-        fill={themeVars.colors.darkGray}
+        fill={themeVars.colors.textSecondary}
         className={styles.path}
       />
       <path
         d="M32.4448 19.8364C32.2192 18.6679 32.0079 17.7366 31.8166 17.0452C31.6743 16.4509 31.3902 15.8999 30.9885 15.4396C30.5445 15.0113 29.9992 14.7027 29.4037 14.5425C28.4447 14.2629 27.4703 14.0397 26.4853 13.874C26.1398 13.8226 25.9656 13.6426 25.9656 13.3369C25.9618 13.2674 25.9723 13.1978 25.9964 13.1324C26.0204 13.0671 26.0576 13.0074 26.1055 12.9569C26.2105 12.8597 26.3433 12.7977 26.4853 12.7798C27.4694 12.6134 28.4437 12.3931 29.4037 12.1198C30.0021 11.9667 30.549 11.6571 30.9885 11.2228C31.389 10.7583 31.6729 10.2049 31.8166 9.60859C32.0079 8.91721 32.2192 7.98584 32.4448 6.81449C32.4458 6.74608 32.4607 6.67858 32.4886 6.61609C32.5164 6.5536 32.5567 6.49743 32.6068 6.45096C32.657 6.40448 32.7161 6.3687 32.7806 6.34574C32.845 6.32278 32.9134 6.31313 32.9816 6.31739C33.2672 6.31739 33.4528 6.48309 33.5213 6.81449C33.7479 7.98584 33.9573 8.91721 34.1495 9.60859C34.2907 10.2036 34.5706 10.7567 34.9662 11.2228C35.404 11.6593 35.9516 11.9693 36.551 12.1198C37.515 12.3926 38.493 12.6129 39.4808 12.7798C39.5532 12.7803 39.6248 12.7958 39.6909 12.8254C39.757 12.855 39.8162 12.8981 39.8648 12.9518C39.9134 13.0055 39.9503 13.0687 39.9732 13.1375C39.9961 13.2063 40.0044 13.279 39.9977 13.3512C39.9977 13.6569 39.8263 13.8369 39.4808 13.8883C38.4922 14.0545 37.514 14.2778 36.551 14.5568C35.9543 14.7142 35.4084 15.0232 34.9662 15.4539C34.5695 15.916 34.2894 16.4666 34.1495 17.0595C33.9592 17.7509 33.7498 18.6813 33.5213 19.8507C33.4528 20.185 33.2758 20.3507 32.9816 20.3507C32.912 20.3546 32.8424 20.3442 32.777 20.32C32.7116 20.2958 32.6519 20.2585 32.6015 20.2103C32.5512 20.1621 32.5113 20.104 32.4843 20.0396C32.4573 19.9753 32.4439 19.9062 32.4448 19.8364Z"
-        fill={themeVars.colors.darkGray}
+        fill={themeVars.colors.textSecondary}
         className={styles.path}
       />
       <path
         d="M12.6196 40.6995C12.5109 40.7023 12.4027 40.6829 12.3013 40.6422C12.2 40.6016 12.1075 40.5405 12.0294 40.4627C11.8673 40.3009 11.7574 40.0919 11.7145 39.8639C11.418 38.0492 11.1251 36.5322 10.8358 35.3128C10.6133 34.2663 10.2461 33.258 9.74531 32.3187C9.32818 31.5649 8.73049 30.9334 8.00907 30.4841C7.132 29.9745 6.18128 29.6124 5.19297 29.4117C4.03371 29.1449 2.58684 28.8918 0.852359 28.6523C0.616735 28.6254 0.397657 28.5147 0.23303 28.3393C0.0804808 28.1721 -0.00302245 27.9506 0.000117795 27.7214C-0.00358202 27.4921 0.0799998 27.2703 0.23303 27.1035C0.396979 26.9271 0.616416 26.8162 0.852359 26.7905C2.5886 26.5618 4.03812 26.3114 5.20091 26.0392C6.20136 25.8286 7.16449 25.4614 8.05671 24.9505C8.7902 24.5064 9.40286 23.8792 9.83794 23.1268C10.3473 22.1993 10.7151 21.1968 10.9284 20.1545C11.2054 18.9369 11.4701 17.4162 11.7224 15.5925C11.7547 15.3608 11.8619 15.147 12.0268 14.9855C12.1058 14.9052 12.1997 14.8418 12.3028 14.7993C12.406 14.7567 12.5164 14.7359 12.6276 14.7378C12.7392 14.7338 12.8506 14.7526 12.9551 14.7933C13.0596 14.834 13.1552 14.8956 13.2363 14.9747C13.398 15.1367 13.5079 15.3456 13.5513 15.5735C13.8583 17.3972 14.1565 18.9178 14.4459 20.1354C14.6712 21.1811 15.0382 22.189 15.5363 23.1295C15.9558 23.8807 16.5531 24.5108 17.2726 24.9614C18.1474 25.4733 19.095 25.8407 20.0807 26.0501C21.2347 26.3223 22.6789 26.5727 24.4134 26.8014C24.6493 26.8271 24.8688 26.938 25.0327 27.1144C25.185 27.2815 25.2677 27.5033 25.263 27.7323C25.2662 27.9634 25.1839 28.1872 25.0327 28.3583C24.8722 28.5382 24.6503 28.6474 24.4134 28.6632C22.9509 28.7659 21.4954 28.9559 20.0542 29.232C19.046 29.4136 18.075 29.7698 17.1826 30.2854C16.4365 30.7497 15.8216 31.4065 15.3987 32.1908C14.8949 33.1535 14.531 34.187 14.3188 35.2584C14.04 36.5068 13.7842 38.0429 13.5513 39.8666C13.5238 40.1013 13.4192 40.3193 13.2548 40.4845C13.1681 40.5618 13.0673 40.6207 12.9583 40.6576C12.8492 40.6945 12.7341 40.7087 12.6196 40.6995Z"
-        fill={themeVars.colors.darkGray}
+        fill={themeVars.colors.textSecondary}
         className={styles.path}
       />
     </svg>

src/nft/components/common/SortDropdown/SortDropdown.tsx

@@ -56,13 +56,13 @@ export const SortDropdown = ({
         fontSize="14"
         borderRadius="12"
         borderStyle={isOpen && !mini ? 'solid' : 'none'}
-        background={mini ? 'none' : 'lightGray'}
-        borderColor="medGray"
+        background={mini ? 'none' : 'backgroundModule'}
+        borderColor="backgroundOutline"
         borderWidth="1px"
         borderBottomLeftRadius={isOpen ? '0' : undefined}
         borderBottomRightRadius={isOpen ? '0' : undefined}
         padding={inFilters ? '12' : mini ? '0' : '8'}
-        color="blackBlue"
+        color="textPrimary"
         whiteSpace="nowrap"
         display="flex"
         justifyContent="space-between"
@@ -99,7 +99,7 @@ export const SortDropdown = ({
           <Box
             marginLeft={reversable ? '4' : '0'}
             marginRight={mini ? '2' : '0'}
-            color="blackBlue"
+            color="textPrimary"
             className={buttonTextMedium}
           >
             {mini ? miniPrompt : isOpen ? 'Sort by' : dropDownOptions[selectedIndex].displayText}
@@ -107,7 +107,7 @@ export const SortDropdown = ({
         </Box>
 
         <ChevronUpIcon
-          secondaryColor={mini ? themeVars.colors.blackBlue : undefined}
+          secondaryColor={mini ? themeVars.colors.textPrimary : undefined}
           secondaryWidth={mini ? '20' : undefined}
           secondaryHeight={mini ? '20' : undefined}
           style={{
@@ -122,9 +122,9 @@ export const SortDropdown = ({
         right={inFilters ? '16' : 'auto'}
         paddingBottom="8"
         fontSize="14"
-        background="lightGray"
+        background="backgroundModule"
         borderStyle="solid"
-        borderColor="medGray"
+        borderColor="backgroundOutline"
         borderWidth="1px"
         borderRadius="8"
         borderTopLeftRadius={mini ? undefined : '0'}
@@ -194,10 +194,10 @@ const DropDownItem = ({
       paddingRight={mini ? '20' : '0'}
       width="full"
       background={{
-        default: 'lightGray',
-        hover: 'lightGrayButton',
+        default: 'backgroundModule',
+        hover: 'backgroundInteractive',
       }}
-      color="blackBlue"
+      color="textPrimary"
       onClick={onClick}
       cursor="pointer"
     >

src/nft/components/details/CollectionProfile.tsx

@@ -23,10 +23,10 @@ export const CollectionProfile = ({
         <Box role="img" background="fallbackGradient" height="36" width="36" marginRight="12" borderRadius="round" />
       )}
       <div>
-        <Box as="span" color="darkGray" style={{ textTransform: 'uppercase' }} className={badge}>
+        <Box as="span" color="textSecondary" style={{ textTransform: 'uppercase' }} className={badge}>
           {label}
         </Box>
-        <Row marginTop="4" className={subheadSmall} color="blackBlue">
+        <Row marginTop="4" className={subheadSmall} color="textPrimary">
           {name} {isVerified && <VerifiedIcon />}
         </Row>
       </div>

src/nft/components/details/Details.tsx

@@ -3,9 +3,11 @@ import { shortenAddress } from '../../utils/address'
 import { Box, BoxProps } from '../Box'
 import { Column, Row } from '../Flex'
 
-const DetailItemLabel = (props: BoxProps) => <Box as="span" fontSize="14" color="darkGray" {...props} />
+const DetailItemLabel = (props: BoxProps) => <Box as="span" fontSize="14" color="textSecondary" {...props} />
 
-const DetailItemValue = (props: BoxProps) => <Box as="span" fontSize="14" marginLeft="4" color="blackBlue" {...props} />
+const DetailItemValue = (props: BoxProps) => (
+  <Box as="span" fontSize="14" marginLeft="4" color="textPrimary" {...props} />
+)
 
 const Detail = (props: BoxProps) => (
   <Row justifyContent="space-between" width="full" style={{ minWidth: '224px' }} {...props} />

src/nft/components/details/Traits.tsx

@@ -11,11 +11,11 @@ interface TraitProps {
 }
 
 const Trait: React.FC<TraitProps> = ({ label, value }: TraitProps) => (
-  <Column backgroundColor="lightGray" padding="16" gap="4" borderRadius="12">
+  <Column backgroundColor="backgroundSurface" padding="16" gap="4" borderRadius="12">
     <Box
       as="span"
       className={badge}
-      color="darkGray"
+      color="textSecondary"
       whiteSpace="nowrap"
       overflow="hidden"
       textOverflow="ellipsis"
@@ -27,7 +27,7 @@ const Trait: React.FC<TraitProps> = ({ label, value }: TraitProps) => (
 
     <Box
       as="span"
-      color="blackBlue"
+      color="textPrimary"
       fontSize="16"
       fontWeight="normal"
       whiteSpace="nowrap"

src/nft/components/explore/Banner.tsx

@@ -4,8 +4,7 @@ import { Box } from 'nft/components/Box'
 import { Center, Column, Row } from 'nft/components/Flex'
 import { VerifiedIcon } from 'nft/components/icons'
 import { bodySmall, buttonMedium, header1 } from 'nft/css/common.css'
-import { vars } from 'nft/css/sprinkles.css'
-import { breakpoints } from 'nft/css/sprinkles.css'
+import { breakpoints, vars } from 'nft/css/sprinkles.css'
 import { ActivityFetcher, fetchTrendingCollections } from 'nft/queries'
 import { TimePeriod, TrendingCollection } from 'nft/types'
 import { formatEthPrice } from 'nft/utils/currency'
@@ -112,28 +111,28 @@ const CollectionDetails = ({
     </Row>
     <Row className={bodySmall} marginTop="12" color="explicitWhite">
       <Box>
-        <Box as="span" color="darkGray" marginRight="4">
+        <Box as="span" color="textSecondary" marginRight="4">
           Floor:
         </Box>
         {collection.floor ? formatEthPrice(collection.floor.toString()) : '--'} ETH
       </Box>
       <Box>
         {collection.floorChange ? (
-          <Box as="span" color={collection.floorChange > 0 ? 'green200' : 'error'} marginLeft="4">
+          <Box as="span" color={collection.floorChange > 0 ? 'green200' : 'accentFailure'} marginLeft="4">
             {collection.floorChange > 0 && '+'}
             {formatChange(collection.floorChange)}%
           </Box>
         ) : null}
       </Box>
       <Box marginLeft="24" color="explicitWhite">
-        <Box as="span" color="darkGray" marginRight="4">
+        <Box as="span" color="textSecondary" marginRight="4">
           Volume:
         </Box>
         {collection.volume ? putCommas(+toSignificant(collection.volume.toString())) : '--'} ETH
       </Box>
       <Box>
         {collection.volumeChange ? (
-          <Box as="span" color={collection.volumeChange > 0 ? 'green200' : 'error'} marginLeft="4">
+          <Box as="span" color={collection.volumeChange > 0 ? 'green200' : 'accentFailure'} marginLeft="4">
             {collection.volumeChange > 0 && '+'}
             {formatChange(collection.volumeChange)}%
           </Box>

src/nft/components/layout/ExpandableText.tsx

@@ -11,7 +11,7 @@ const RevealButton = (props: BoxProps) => (
     fontWeight="bold"
     border="none"
     fontSize="14"
-    color="darkGray"
+    color="textSecondary"
     padding="0"
     background="transparent"
     {...props}
@@ -28,7 +28,7 @@ export const ExpandableText = ({ children, ...props }: BoxProps) => {
       alignItems={isExpanded ? 'flex-start' : 'flex-end'}
       justifyContent="flex-start"
       fontSize="14"
-      color="darkGray"
+      color="textSecondary"
       marginTop="0"
       marginBottom="20"
       {...props}

src/nft/components/layout/Input.tsx

@@ -7,13 +7,13 @@ export const Input = forwardRef<HTMLInputElement, BoxProps>((props, ref) => (
   <Box
     ref={ref}
     as="input"
-    borderColor={{ default: 'medGray', focus: 'darkGray' }}
+    borderColor={{ default: 'backgroundOutline', focus: 'textSecondary' }}
     borderWidth="1px"
     borderStyle="solid"
     borderRadius="12"
     padding="12"
     fontSize="14"
-    color={{ placeholder: 'darkGray', default: 'blackBlue' }}
+    color={{ placeholder: 'textSecondary', default: 'textPrimary' }}
     backgroundColor="transparent"
     {...props}
   />

src/nft/components/sell/list/ListPage.css.ts

@@ -16,7 +16,7 @@ export const nftDivider = style([
     borderRadius: '20',
     borderWidth: '0.5px',
     borderStyle: 'solid',
-    borderColor: 'medGray',
+    borderColor: 'backgroundOutline',
   }),
 ])
 
@@ -47,7 +47,7 @@ export const chevronDown = style({
 })
 
 export const dropdown = style({
-  boxShadow: `0px 4px 16px ${themeVars.colors.blackBlue20}`,
+  boxShadow: `0px 4px 16px ${themeVars.colors.backgroundSurface}`,
   marginLeft: '-12px',
 })
 

src/nft/components/sell/list/ListPage.tsx

@@ -48,7 +48,7 @@ const SelectMarketplacesModal = ({
   return (
     <Column alignSelf="flex-start" paddingRight="40" paddingBottom={{ sm: '20', lg: '0' }}>
       <Row className={headlineSmall}>Select marketplaces</Row>
-      <Row className={caption} color="darkGray" marginTop="4">
+      <Row className={caption} color="textSecondary" marginTop="4">
         Increase the visibility of your listings by selecting multiple marketplaces.
       </Row>
       <Row marginTop="14" gap="8" flexWrap="wrap">
@@ -77,7 +77,7 @@ const GlobalMarketplaceButton = ({ market, setSelectedMarkets, selectedMarkets }
     <Row
       gap="6"
       borderRadius="12"
-      backgroundColor="medGray"
+      backgroundColor="backgroundOutline"
       height="44"
       className={clsx(isSelected && styles.buttonSelected)}
       onClick={toggleSelected}
@@ -95,7 +95,7 @@ const GlobalMarketplaceButton = ({ market, setSelectedMarkets, selectedMarkets }
         src={isSelected ? '/nft/svgs/checkmark.svg' : market.icon}
       />
       <Box className={buttonTextMedium}>{market.name}</Box>
-      <Box color="darkGray" className={caption} marginRight="12">
+      <Box color="textSecondary" className={caption} marginRight="12">
         {market.fee}% fee
       </Box>
     </Row>
@@ -151,7 +151,7 @@ const SetDurationModal = () => {
   return (
     <Column marginLeft={{ sm: '0', lg: 'auto' }} marginRight="auto" alignSelf="flex-start">
       <Row className={headlineSmall}>Set duration</Row>
-      <Row className={caption} color="darkGray" marginTop="4">
+      <Row className={caption} color="textSecondary" marginTop="4">
         Select the amount of time your listings are available for purchase. Max 6 months.
       </Row>
       <Row marginTop="14" gap="6" flexWrap="wrap">
@@ -180,7 +180,7 @@ const SetDurationModal = () => {
           setGlobalDuration={setDuration}
         />
         <Row
-          color="medGray"
+          color="backgroundOutline"
           paddingRight="8"
           paddingLeft="12"
           paddingTop="12"
@@ -188,7 +188,7 @@ const SetDurationModal = () => {
           borderRadius="8"
           borderWidth="1px"
           borderStyle="solid"
-          borderColor="medGray"
+          borderColor="backgroundOutline"
           position="relative"
           height="44"
         >
@@ -196,7 +196,7 @@ const SetDurationModal = () => {
             as="input"
             borderStyle="none"
             className={bodySmall}
-            color={{ placeholder: 'darkGray', default: 'blackBlue' }}
+            color={{ placeholder: 'textSecondary', default: 'textPrimary' }}
             placeholder="Set"
             width="32"
             marginRight="4"
@@ -209,7 +209,7 @@ const SetDurationModal = () => {
             display="flex"
             justifyContent="flex-end"
             className={buttonTextMedium}
-            color="blackBlue"
+            color="textPrimary"
             marginTop="24"
             style={{ width: '80px' }}
           >
@@ -276,7 +276,7 @@ const GlobalDurationButton = ({
   return (
     <Row
       borderRadius="12"
-      backgroundColor="medGray"
+      backgroundColor="backgroundOutline"
       height="44"
       className={clsx(isSelected && styles.buttonSelected)}
       onClick={toggleSelected}
@@ -332,7 +332,7 @@ const NFTListingsGrid = ({ selectedMarkets }: { selectedMarkets: ListingMarket[]
           marginLeft={selectedMarkets.length > 1 ? '36' : '0'}
           transition="500"
           className={badge}
-          color="darkGray"
+          color="textSecondary"
           flex="2"
         >
           YOUR NFTS
@@ -341,15 +341,27 @@ const NFTListingsGrid = ({ selectedMarkets }: { selectedMarkets: ListingMarket[]
           <Column className={subheadSmall} style={{ flex: '1.5' }}>
             <SortDropdown dropDownOptions={priceDropdownOptions} mini miniPrompt="Set price by" />
           </Column>
-          <Column className={badge} color="darkGray" flex="1" display={{ sm: 'none', md: 'flex' }} textAlign="right">
+          <Column
+            className={badge}
+            color="textSecondary"
+            flex="1"
+            display={{ sm: 'none', md: 'flex' }}
+            textAlign="right"
+          >
             MARKETPLACE FEE
           </Column>
-          <Column className={badge} color="darkGray" flex="1" display={{ sm: 'none', md: 'flex' }} textAlign="right">
+          <Column
+            className={badge}
+            color="textSecondary"
+            flex="1"
+            display={{ sm: 'none', md: 'flex' }}
+            textAlign="right"
+          >
             ROYALTIES
           </Column>
           <Column
             className={badge}
-            color="darkGray"
+            color="textSecondary"
             style={{ flex: '1.5' }}
             display={{ sm: 'none', md: 'flex' }}
             textAlign="right"
@@ -421,7 +433,7 @@ const PriceTextInput = ({
   return (
     <Column gap="12" position="relative">
       <Row
-        color="medGray"
+        color="backgroundOutline"
         height="44"
         width="min"
         padding="4"
@@ -434,7 +446,7 @@ const PriceTextInput = ({
             : isGlobalPrice
             ? 'genieBlue'
             : listPrice != null
-            ? 'darkGray'
+            ? 'textSecondary'
             : 'grey700'
         }
       >
@@ -443,7 +455,7 @@ const PriceTextInput = ({
           pattern="[0-9]"
           borderStyle="none"
           className={body}
-          color={{ placeholder: 'darkGray', default: 'blackBlue' }}
+          color={{ placeholder: 'textSecondary', default: 'textPrimary' }}
           placeholder="Set"
           marginRight="0"
           marginLeft="14"
@@ -459,7 +471,7 @@ const PriceTextInput = ({
             setListPrice(isNaN(val) ? undefined : val)
           }}
         />
-        <Box color={listPrice && listPrice >= 0 ? 'blackBlue' : 'darkGray'} marginRight="16">
+        <Box color={listPrice && listPrice >= 0 ? 'textPrimary' : 'textSecondary'} marginRight="16">
           &nbsp;ETH
         </Box>
         <Box
@@ -467,7 +479,7 @@ const PriceTextInput = ({
           display={isGlobalPrice || globalOverride ? 'block' : 'none'}
           position="absolute"
           style={{ marginTop: '-36px', marginLeft: '124px' }}
-          backgroundColor="white"
+          backgroundColor="backgroundSurface"
           onClick={() => setGlobalOverride(!globalOverride)}
         >
           {globalOverride ? <AttachPriceIcon /> : <EditPriceIcon />}
@@ -477,7 +489,7 @@ const PriceTextInput = ({
         top="52"
         width="max"
         className={badge}
-        color={warningType === WarningType.BELOW_FLOOR && !focused ? 'orange' : 'darkGray'}
+        color={warningType === WarningType.BELOW_FLOOR && !focused ? 'orange' : 'textSecondary'}
         position="absolute"
       >
         {focused ? (
@@ -528,11 +540,11 @@ const EthPriceDisplay = ({ ethPrice = 0 }: { ethPrice?: number }) => {
   return (
     <Column width="full">
       <Row width="full" justifyContent="flex-end">
-        <Box className={subhead} color={ethPrice !== 0 ? 'blackBlue' : 'darkGray'} marginLeft="auto">
+        <Box className={subhead} color={ethPrice !== 0 ? 'textPrimary' : 'textSecondary'} marginLeft="auto">
           {formatEth(ethPrice)} ETH
         </Box>
         {ethPrice !== 0 && (
-          <Box className={body} color="darkGray" marginLeft="12" marginRight="0">
+          <Box className={body} color="textSecondary" marginLeft="12" marginRight="0">
             {formatUsdPrice(ethPrice * ethConversion)}
           </Box>
         )}
@@ -693,12 +705,12 @@ const MarketplaceRow = ({
         )}
       </Column>
       <Row flex="1" display={{ sm: 'none', md: 'flex' }}>
-        <Box className={body} color="darkGray" width="full" textAlign="right">
+        <Box className={body} color="textSecondary" width="full" textAlign="right">
           {marketplaceFee > 0 ? marketplaceFee + (selectedMarkets.length > 1 ? '% MAX' : '%') : '--%'}
         </Box>
       </Row>
       <Row flex="1" display={{ sm: 'none', md: 'flex' }}>
-        <Box className={body} color="darkGray" width="full" textAlign="right">
+        <Box className={body} color="textSecondary" width="full" textAlign="right">
           {(asset.creatorPercentage * 100).toFixed(1)}%
         </Box>
       </Row>
@@ -706,7 +718,7 @@ const MarketplaceRow = ({
         <Column width="full">
           <EthPriceDisplay ethPrice={userReceives} />
           {(showGlobalPrice ? globalPrice && globalPrice !== 0 : listPrice !== 0) && (
-            <Row marginTop="4" width="full" fontSize="12" color="darkGray">
+            <Row marginTop="4" width="full" fontSize="12" color="textSecondary">
               {profit ? <Box marginLeft="auto">Profit: {formatEth(profit)} ETH</Box> : null}
               {profitPercent ? (
                 <Box marginLeft="8" marginRight="0">
@@ -863,7 +875,7 @@ export const ListPage = () => {
           cursor="pointer"
           width="min"
         >
-          <BackArrowIcon fill={themeVars.colors.darkGray} />
+          <BackArrowIcon fill={themeVars.colors.textSecondary} />
         </Box>
       </Column>
       <Column as="section" gap="48" paddingLeft="18" paddingRight="48" width="full">

src/nft/components/sell/modal/ListingButton.tsx

@@ -170,10 +170,10 @@ export const ListingButton = ({ onClick, buttonText, showWarningOverride = false
           className={`${bodySmall} ${styles.warningTooltip}`}
           transition="250"
           onClick={() => setShowWarning(false)}
-          color="darkGray"
+          color="textSecondary"
           zIndex="3"
           borderRadius="4"
-          backgroundColor="white"
+          backgroundColor="backgroundSurface"
           height={!disableListButton ? '64' : '36'}
           maxWidth="276"
           position="absolute"
@@ -189,7 +189,7 @@ export const ListingButton = ({ onClick, buttonText, showWarningOverride = false
           </Box>
           {!!disableListButton ? (
             <Box paddingTop="6">
-              <XMarkIcon fill="darkGray" height="20" width="20" />
+              <XMarkIcon fill="textSecondary" height="20" width="20" />
             </Box>
           ) : (
             <Row
@@ -232,7 +232,7 @@ export const ListingButton = ({ onClick, buttonText, showWarningOverride = false
       >
         {listingStatus === ListingStatus.SIGNING || listingStatus === ListingStatus.PENDING ? (
           <Row gap="8">
-            <LoadingIcon stroke="white" height="20" width="20" />
+            <LoadingIcon stroke="backgroundSurface" height="20" width="20" />
             {listingStatus === ListingStatus.PENDING ? 'Pending' : 'Proceed in wallet'}
           </Row>
         ) : listingStatus === ListingStatus.APPROVED ? (

src/nft/components/sell/modal/ListingModal.css.ts

@@ -22,7 +22,7 @@ export const sectionDivider = style([
     width: 'full',
     borderWidth: '0.5px',
     borderStyle: 'solid',
-    borderColor: 'medGray',
+    borderColor: 'backgroundOutline',
   }),
 ])
 
@@ -48,7 +48,7 @@ export const listingModalIcon = style([
   sprinkles({
     borderWidth: '1px',
     borderStyle: 'solid',
-    borderColor: 'white',
+    borderColor: 'backgroundSurface',
   }),
   {
     boxSizing: 'border-box',
@@ -72,7 +72,7 @@ export const listingSectionBorder = style([
   sprinkles({
     padding: '8',
     borderRadius: '8',
-    borderColor: 'medGray',
+    borderColor: 'backgroundOutline',
     borderStyle: 'solid',
     borderWidth: '1px',
   }),

src/nft/components/sell/modal/ListingModal.tsx

@@ -155,8 +155,8 @@ const ListingModal = () => {
         <Box
           as="button"
           border="none"
-          color="darkGray"
-          backgroundColor="white"
+          color="textSecondary"
+          backgroundColor="backgroundSurface"
           marginLeft="auto"
           marginRight="0"
           paddingRight="0"
@@ -164,7 +164,7 @@ const ListingModal = () => {
           cursor="pointer"
           onClick={toggleCart}
         >
-          <XMarkIcon height={28} width={28} fill={themeVars.colors.blackBlue} />
+          <XMarkIcon height={28} width={28} fill={themeVars.colors.textPrimary} />
         </Box>
       </Row>
       <Column overflowX="hidden" overflowY="auto" style={{ maxHeight: '60vh' }}>
@@ -207,7 +207,7 @@ const ListingModal = () => {
         </Row>
       </Row>
       {showSuccessScreen ? (
-        <Box as="span" className={caption} color="darkGray">
+        <Box as="span" className={caption} color="textSecondary">
           Status:{' '}
           <Box as="span" color="green200">
             Confirmed
@@ -220,7 +220,7 @@ const ListingModal = () => {
         <Box
           as="button"
           border="none"
-          backgroundColor="white"
+          backgroundColor="backgroundSurface"
           cursor="pointer"
           color="orange"
           className={styles.button}

src/nft/components/sell/modal/ListingSection.tsx

@@ -61,7 +61,7 @@ export const ListingSection = ({
       marginTop="10"
       marginBottom="10"
       onClick={() => rows.length > 0 && setIsOpen(!isOpen)}
-      color={allApproved ? 'green' : 'blackBlue'}
+      color={allApproved ? 'green' : 'textPrimary'}
     >
       {allApproved && <ApprovedCheckmarkIcon style={{ marginRight: '8px' }} />}
       {sectionTitle}
@@ -74,12 +74,12 @@ export const ListingSection = ({
           className={clsx(!isSuccessScreen && styles.listingSectionBorder)}
         >
           {caption && (
-            <Box color="blackBlue" fontWeight="normal" className={caption}>
+            <Box color="textPrimary" fontWeight="normal" className={caption}>
               {caption}
             </Box>
           )}
           {title && (
-            <Box color="darkGray" className={badge}>
+            <Box color="textSecondary" className={badge}>
               {title}
             </Box>
           )}
@@ -107,7 +107,7 @@ export const ListingSection = ({
                       marginLeft="8"
                       marginRight="auto"
                       fontWeight="normal"
-                      color="blackBlue"
+                      color="textPrimary"
                       textOverflow="ellipsis"
                       overflow="hidden"
                       maxWidth={{
@@ -126,7 +126,7 @@ export const ListingSection = ({
                       <ApprovedCheckmarkIcon height="20" width="20" />
                     ) : row.status === ListingStatus.FAILED || row.status === ListingStatus.REJECTED ? (
                       <Row gap="4">
-                        <Box fontWeight="normal" fontSize="14" color="darkGray">
+                        <Box fontWeight="normal" fontSize="14" color="textSecondary">
                           {row.status}
                         </Box>
                         <FailedListingIcon />

src/nft/components/sell/modal/ListingTag.css.ts

@@ -6,7 +6,7 @@ export const tagContainer = style([
     borderRadius: '20',
     borderWidth: '1px',
     borderStyle: 'solid',
-    borderColor: 'medGray',
+    borderColor: 'backgroundOutline',
   }),
   {
     '@media': {

src/nft/components/sell/modal/ListingTag.tsx

@@ -41,7 +41,7 @@ const Cart = () => {
           className={styles.tagContainer}
           width={{ sm: 'full', md: '288' }}
           height={{ sm: 'full', md: 'auto' }}
-          backgroundColor="white"
+          backgroundColor="backgroundSurface"
           marginLeft="0"
           justifyContent="flex-start"
         >
@@ -94,7 +94,7 @@ const BagHeader = ({ bagQuantity }: { bagQuantity: number }) => {
         <Box
           as="button"
           border="none"
-          color="darkGray"
+          color="textSecondary"
           background="black"
           className={styles.closeIcon}
           onClick={toggleCart}

src/nft/components/sell/modal/TagAssetRow.css.ts

@@ -70,7 +70,7 @@ export const removeIcon = style([
 export const tagAssetInfo = style([
   sprinkles({
     fontSize: '14',
-    color: 'blackBlue',
+    color: 'textPrimary',
     display: 'flex',
     flexWrap: 'wrap',
     width: 'full',

src/nft/components/sell/select/FilterSidebar.tsx

@@ -44,7 +44,7 @@ export const FilterSidebar = ({ SortDropdown }: { SortDropdown: () => JSX.Elemen
         width={{ sm: 'full', md: 'auto' }}
       >
         <Row width="full" justifyContent="space-between">
-          <Row as="span" className={headlineSmall} color="blackBlue">
+          <Row as="span" className={headlineSmall} color="textPrimary">
             Filters
           </Row>
           {isMobile && (
@@ -52,10 +52,10 @@ export const FilterSidebar = ({ SortDropdown }: { SortDropdown: () => JSX.Elemen
               as="button"
               border="none"
               backgroundColor="transparent"
-              color="darkGray"
+              color="textSecondary"
               onClick={() => setFiltersExpanded(false)}
             >
-              <XMarkIcon fill={themeVars.colors.blackBlue} />
+              <XMarkIcon fill={themeVars.colors.textPrimary} />
             </Box>
           )}
         </Row>
@@ -112,7 +112,7 @@ const CollectionSelect = ({
             setCollectionSearchText={setCollectionSearchText}
           />
           <Box
-            background="lightGray"
+            background="backgroundSurface"
             borderRadius="12"
             paddingTop="8"
             paddingBottom="8"
@@ -144,16 +144,16 @@ const CollectionFilterSearch = ({
   return (
     <Box
       as="input"
-      borderColor={{ default: 'medGray', focus: 'genieBlue' }}
+      borderColor={{ default: 'backgroundOutline', focus: 'genieBlue' }}
       borderWidth="1px"
       borderStyle="solid"
       borderRadius="8"
       padding="12"
       marginLeft="0"
       marginBottom="24"
-      backgroundColor="white"
+      backgroundColor="backgroundSurface"
       fontSize="14"
-      color={{ placeholder: 'darkGray', default: 'blackBlue' }}
+      color={{ placeholder: 'textSecondary', default: 'textPrimary' }}
       placeholder="Search collections"
       value={collectionSearchText}
       onChange={(e: FormEvent<HTMLInputElement>) => setCollectionSearchText(e.currentTarget.value)}
@@ -190,7 +190,7 @@ const CollectionItem = ({
       paddingRight="14"
       height="44"
       as="li"
-      background={hovered ? 'medGray' : undefined}
+      background={hovered ? 'backgroundOutline' : undefined}
       onMouseEnter={toggleHovered}
       onMouseLeave={toggleHovered}
       onClick={handleCheckbox}
@@ -200,7 +200,7 @@ const CollectionItem = ({
         {collection.name}{' '}
       </Box>
       <Checkbox checked={isChecked(collection.address)} hovered={hovered} onChange={handleCheckbox}>
-        <Box as="span" color="darkGray" marginRight="12" marginLeft="auto">
+        <Box as="span" color="textSecondary" marginRight="12" marginLeft="auto">
           {collection.count}
         </Box>
       </Checkbox>
@@ -223,7 +223,7 @@ const ListStatusFilterButtons = ({
         <Row
           key={index}
           borderRadius="12"
-          backgroundColor="medGray"
+          backgroundColor="backgroundOutline"
           height="44"
           className={value === listFilter ? styles.buttonSelected : null}
           onClick={() => setListFilter(value)}

src/nft/components/sell/select/SelectPage.css.ts

@@ -10,7 +10,7 @@ export const section = style([
   { maxWidth: '1000px', margin: '0 auto' },
 ])
 
-export const filterRowIcon = sprinkles({ color: { default: 'darkGray', hover: 'blue' } })
+export const filterRowIcon = sprinkles({ color: { default: 'textSecondary', hover: 'blue' } })
 
 export const buttonSelected = style({
   border: `2px solid ${vars.color.genieBlue}`,

src/nft/components/sell/select/SelectPage.tsx

@@ -390,7 +390,7 @@ export const WalletAssetDisplay = ({ asset }: { asset: WalletAsset }) => {
       style={{ textDecoration: 'none' }}
     >
       <Column
-        color={'blackBlue'}
+        color={'textPrimary'}
         className={subheadSmall}
         onMouseEnter={toggleBoxHovered}
         onMouseLeave={toggleBoxHovered}
@@ -409,7 +409,7 @@ export const WalletAssetDisplay = ({ asset }: { asset: WalletAsset }) => {
           borderBottomLeftRadius="20"
           borderBottomRightRadius="20"
           transition="250"
-          backgroundColor={boxHovered ? 'medGray' : 'lightGray'}
+          backgroundColor={boxHovered ? 'backgroundOutline' : 'backgroundSurface'}
           paddingY="12"
           paddingX="12"
         >
@@ -420,7 +420,7 @@ export const WalletAssetDisplay = ({ asset }: { asset: WalletAsset }) => {
             {asset.collection?.name}
             {asset.collectionIsVerified ? <VerifiedIcon className={styles.verifiedBadge} /> : null}
           </Box>
-          <Box as="span" fontSize="12" lineHeight="16" color="darkGray" marginTop="8">
+          <Box as="span" fontSize="12" lineHeight="16" color="textSecondary" marginTop="8">
             Last:&nbsp;
             {asset.lastPrice ? (
               <>
@@ -433,7 +433,7 @@ export const WalletAssetDisplay = ({ asset }: { asset: WalletAsset }) => {
               </Box>
             )}
           </Box>
-          <Box as="span" fontSize="12" lineHeight="16" color="darkGray" marginTop="4">
+          <Box as="span" fontSize="12" lineHeight="16" color="textSecondary" marginTop="4">
             Floor:&nbsp;
             {asset.floorPrice ? (
               <>
@@ -453,8 +453,8 @@ export const WalletAssetDisplay = ({ asset }: { asset: WalletAsset }) => {
             borderRadius="12"
             paddingY="8"
             transition="250"
-            color={buttonHovered ? 'blackBlue' : isSelected ? 'red400' : 'genieBlue'}
-            backgroundColor={buttonHovered ? (isSelected ? 'red400' : 'genieBlue') : 'lightGray'}
+            color={buttonHovered ? 'textPrimary' : isSelected ? 'red400' : 'genieBlue'}
+            backgroundColor={buttonHovered ? (isSelected ? 'red400' : 'genieBlue') : 'backgroundSurface'}
             className={subheadSmall}
             onMouseEnter={toggleButtonHovered}
             onMouseLeave={toggleButtonHovered}
@@ -498,7 +498,7 @@ const SelectAllButton = () => {
       alignItems="center"
       marginLeft={{ sm: '8', md: 'auto' }}
       borderRadius="12"
-      backgroundColor="medGray"
+      backgroundColor="backgroundOutline"
       fontWeight="medium"
       height="44"
       paddingTop="12"
@@ -506,7 +506,7 @@ const SelectAllButton = () => {
       paddingRight="16"
       paddingLeft="16"
       cursor="pointer"
-      color="blackBlue"
+      color="textPrimary"
       onClick={toggleAllSelected}
       className={clsx(`${subheadSmall} ${isAllSelected ? styles.buttonSelected : null}`)}
     >
@@ -574,7 +574,7 @@ const CollectionFilterItem = ({
       paddingBottom="4"
       paddingLeft="8"
       borderRadius="12"
-      background="medGray"
+      background="backgroundOutline"
       fontSize="14"
     >
       <Box as="img" borderRadius="round" width="20" height="20" src={collection.image} />
@@ -582,7 +582,7 @@ const CollectionFilterItem = ({
         {collection?.name}
       </Box>
       <Box
-        color="darkGray"
+        color="textSecondary"
         background="none"
         height="28"
         width="28"
@@ -608,14 +608,14 @@ const CollectionSearch = ({
   return (
     <Box
       as="input"
-      borderColor={{ default: 'medGray', focus: 'genieBlue' }}
+      borderColor={{ default: 'backgroundOutline', focus: 'genieBlue' }}
       borderWidth="1px"
       borderStyle="solid"
       borderRadius="8"
       padding="12"
-      backgroundColor="white"
+      backgroundColor="backgroundSurface"
       fontSize="14"
-      color={{ placeholder: 'darkGray', default: 'blackBlue' }}
+      color={{ placeholder: 'textSecondary', default: 'textPrimary' }}
       placeholder="Search by name"
       value={searchText}
       width="full"

src/nft/css/common.css.ts

@@ -71,7 +71,7 @@ export const disabled = style([
     textAlign: 'left',
   },
   sprinkles({
-    color: 'placeholder',
+    color: 'textTertiary',
     fontWeight: 'medium',
     background: 'whitesmoke',
     borderRadius: '14',
@@ -85,7 +85,7 @@ export const buttonTextSmall = sprinkles({ fontWeight: 'normal', fontSize: '14'
 export const buttonSmall = style([
   buttonTextSmall,
   sprinkles({
-    background: 'lightGray',
+    background: 'backgroundSurface',
     borderRadius: '12',
     fontSize: '12',
     color: 'genieBlue',
@@ -100,8 +100,8 @@ export const buttonSmall = style([
     },
     ':disabled': {
       cursor: 'auto',
-      color: themeVars.colors.white,
-      backgroundColor: themeVars.colors.medGray,
+      color: themeVars.colors.backgroundSurface,
+      backgroundColor: themeVars.colors.backgroundOutline,
     },
   },
 ])

src/nft/css/sprinkles.css.ts

@@ -3,35 +3,25 @@ import { createSprinkles, defineProperties } from '@vanilla-extract/sprinkles'
 
 const themeContractValues = {
   colors: {
-    // Pavel's colors, mostly used for the wallet connection. TODO Some may need to be changed / removed
-    error: '',
-    textDisconnect: '',
-    modalBackdrop: '',
-    backgroundSecondary: '',
-    modalClose: '',
-    text: '',
-    modalTextSecondary: '',
+    accentFailure: '',
+    accentActionSoft: '',
 
-    // Bryan's colors from Figma that vary dark vs light
-    blackBlue: '',
-    darkGray: '',
-    medGray: '',
-    lightGray: '',
-    white: '',
-    darkGray10: '',
-    blackBlue20: '',
     explicitWhite: '',
-    magicGradient: '',
-    placeholder: '',
-    lightGrayButton: '',
-    loading: '',
 
-    // Opacities of black and white
-    white95: '',
-    white90: '',
-    white80: '',
-    white08: '',
+    backgroundAction: '',
     backgroundFloating: '',
+    backgroundInteractive: '',
+    backgroundModule: '',
+    backgroundOutline: '',
+    backgroundSurface: '',
+
+    modalBackdrop: '',
+
+    stateOverlayHover: '',
+
+    textPrimary: '',
+    textSecondary: '',
+    textTertiary: '',
   },
 
   shadows: {
@@ -155,11 +145,11 @@ export const vars = createGlobalTheme(':root', {
     black: 'black',
     whitesmoke: '#F5F5F5',
     blue: '#4C82FB',
-    explicitBlackBlue: '#0E111A',
     gray: '#CBCEDC',
     transculent: '#7F7F7F',
     transparent: 'transparent',
     none: 'none',
+    white: '#FFF',
 
     // new uniswap colors:
     blue400: '#4C82FB',
@@ -167,6 +157,7 @@ export const vars = createGlobalTheme(':root', {
     pink400: '#FB118E',
     red700: '#530f10',
     red400: '#FA2C38',
+    red300: '#FD766B',
     green200: '#5CFE9D',
     green400: '#1A9550',
     grey900: '#0E111A',

src/nft/pages/asset/Asset.css.ts

@@ -35,7 +35,7 @@ export const marketplace = sprinkles({ borderRadius: '4' })
 
 export const tab = style([
   subhead,
-  sprinkles({ color: 'darkGray', border: 'none', padding: '0', background: 'transparent', cursor: 'pointer' }),
+  sprinkles({ color: 'textSecondary', border: 'none', padding: '0', background: 'transparent', cursor: 'pointer' }),
   {
     selectors: {
       '&[data-active="true"]': {
@@ -43,7 +43,7 @@ export const tab = style([
         textDecorationColor: vars.color.genieBlue,
         textUnderlineOffset: '8px',
         textDecorationThickness: '2px',
-        color: vars.color.blackBlue,
+        color: vars.color.textPrimary,
       },
     },
   },

src/nft/pages/asset/Asset.tsx

@@ -69,7 +69,7 @@ const CountdownTimer = ({ sellOrder }: { sellOrder: SellOrder }) => {
 
   return (
     <MouseoverTooltip text={<Box fontSize="12">Expires {expires}</Box>}>
-      <Box as="span" fontWeight="normal" className={caption} color="darkGray">
+      <Box as="span" fontWeight="normal" className={caption} color="textSecondary">
         Expires: {days !== 0 ? `${days} days` : ''} {hours !== 0 ? `${hours} hours` : ''} {minutes} minutes {seconds}{' '}
         seconds
       </Box>
@@ -221,8 +221,8 @@ const Asset = () => {
                     paddingLeft="6"
                     paddingRight="4"
                     className={badge}
-                    backgroundColor="lightGray"
-                    color="blackBlue"
+                    backgroundColor="backgroundSurface"
+                    color="textPrimary"
                     borderRadius="4"
                   >
                     #{rarityProvider.rank} <img src="/nft/svgs/rarity.svg" height={15} width={15} alt="Rarity rank" />
@@ -266,7 +266,7 @@ const Asset = () => {
                   {parsed.origin ? (
                     <CornerDownLeftIcon width="28" height="28" />
                   ) : (
-                    <CloseDropDownIcon color={themeVars.colors.darkGray} />
+                    <CloseDropDownIcon color={themeVars.colors.textSecondary} />
                   )}
                 </Center>
               </Row>
@@ -365,10 +365,10 @@ const Asset = () => {
                       alt="Markeplace"
                     />
                   </a>
-                  <Row as="span" className={subhead} color="blackBlue">
+                  <Row as="span" className={subhead} color="textPrimary">
                     {formatEthPrice(asset.priceInfo.ETHPrice)} <Eth2Icon />
                   </Row>
-                  <Box as="span" color="darkGray" className={bodySmall}>
+                  <Box as="span" color="textSecondary" className={bodySmall}>
                     ${toSignificant(asset.priceInfo.USDPrice)}
                   </Box>
                 </Row>

src/nft/pages/collection/index.css.ts

@@ -23,14 +23,14 @@ export const baseActivitySwitcherToggle = style([
 export const activitySwitcherToggle = style([
   baseActivitySwitcherToggle,
   sprinkles({
-    color: 'darkGray',
+    color: 'textSecondary',
   }),
 ])
 
 export const selectedActivitySwitcherToggle = style([
   baseActivitySwitcherToggle,
   sprinkles({
-    color: 'blackBlue',
+    color: 'textPrimary',
   }),
   {
     ':after': {

src/nft/pages/sell/sell.tsx

@@ -59,7 +59,7 @@ const Sell = () => {
           {sellPageState === SellPageStateType.SELECTING ? 'Select NFTs' : 'Create Listing'}
         </Box>
         <Box cursor="pointer" marginLeft="auto" marginRight="0" onClick={exitSellFlow}>
-          <XMarkIcon height={28} width={28} fill={themeVars.colors.blackBlue} />
+          <XMarkIcon height={28} width={28} fill={themeVars.colors.textPrimary} />
         </Box>
       </Row>
       {account != null ? (
@@ -70,7 +70,7 @@ const Sell = () => {
         <Column as="section" gap="60" className={styles.section}>
           <div style={{ minHeight: '70vh' }}>
             <Center className={styles.notConnected} flexDirection="column">
-              <Box as="span" className={header2} color="darkGray" marginBottom="24" display="block">
+              <Box as="span" className={header2} color="textSecondary" marginBottom="24" display="block">
                 No items to display
               </Box>
               <Box as="button" className={buttonMedium} onClick={toggleWalletModal}>

src/nft/themes/darkTheme.ts

-import { Theme, vars } from '../css/sprinkles.css'
+import { Theme, vars } from 'nft/css/sprinkles.css'
 
 export const darkTheme: Theme = {
   colors: {
-    error: '#FF494A',
-    textDisconnect: '#FF494A',
-    modalBackdrop: 'linear-gradient(0deg, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7))',
-    backgroundSecondary: '#23262F',
-    modalClose: 'rgba(255, 255, 255, 0.08)',
-    text: '#fff',
-    modalTextSecondary: 'rgba(255, 255, 255, 0.6)',
+    accentFailure: vars.color.red300,
+    accentActionSoft: '#000000E5',
 
-    // Bryan's colors from Figma that vary dark vs light
-    blackBlue: '#FFFFFF',
-    blackBlue20: '#FFFFFF20',
-    darkGray: vars.color.grey300,
-    medGray: `#99A1BD3D`,
-    lightGray: vars.color.grey900,
-    white: '#000000',
-    darkGray10: `#99A1BD1A`,
     explicitWhite: '#FFFFFF',
-    magicGradient: vars.color.blue400,
-    placeholder: vars.color.grey400,
-    lightGrayButton: vars.color.grey700,
-    loading: vars.color.grey800,
 
-    // Opacities of black and white
-    white95: '#0E111AF2',
-    white90: '#000000E5',
-    white80: '#000000CC',
-    white08: '#0000000C',
+    backgroundAction: vars.color.blue400,
     backgroundFloating: '0000000C',
+    backgroundInteractive: vars.color.grey700,
+    backgroundModule: vars.color.grey800,
+    backgroundOutline: `rgba(153,161,189,0.24)`,
+    backgroundSurface: vars.color.grey900,
+
+    modalBackdrop: 'linear-gradient(0deg, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7))',
+
+    stateOverlayHover: `rgba(153,161,189,0.08)`,
+
+    textPrimary: '#FFFFFF',
+    textSecondary: vars.color.grey300,
+    textTertiary: vars.color.grey500,
   },
   shadows: {
     menu: '0px 10px 30px rgba(0, 0, 0, 0.1)',

src/nft/themes/lightTheme.ts

-import { Theme, vars } from '../css/sprinkles.css'
+import { Theme, vars } from 'nft/css/sprinkles.css'
 
 export const lightTheme: Theme = {
   colors: {
-    error: '#FF494A',
-    textDisconnect: '#FF494A',
-    modalBackdrop: 'rgba(0, 0, 0, 0.3)',
-    backgroundSecondary: '#FCFCFD',
-    modalClose: 'rgba(60, 66, 82, 0.06)',
-    text: '#25292E',
-    modalTextSecondary: 'rgba(60, 66, 82, 0.6)',
+    accentFailure: vars.color.red400,
+    accentActionSoft: '#FFFFFFE5',
 
-    // Bryan's colors from Figma that vary dark vs light
-    blackBlue: vars.color.grey900,
-    blackBlue20: `#0E111A33`,
-    darkGray: vars.color.grey500,
-    medGray: `#5E68873D`,
-    lightGray: '#FFFFFF',
-    white: '#FFFFFF',
-    darkGray10: `#5E68871A`,
     explicitWhite: '#FFFFFF',
-    magicGradient: vars.color.pink400,
-    placeholder: vars.color.grey300,
-    lightGrayButton: vars.color.grey100,
-    loading: vars.color.grey50,
 
-    // Opacities of black and white
-    white95: '#EDEFF7F2',
-    white90: '#FFFFFFE5',
-    white80: '#FFFFFFCC',
-    white08: '#00000000',
-    backgroundFloating: '#29324908',
+    backgroundAction: vars.color.pink400,
+    backgroundFloating: '#00000000',
+    backgroundInteractive: vars.color.grey100,
+    backgroundModule: vars.color.grey50,
+    backgroundOutline: `rgba(94,104,135,0.24)`,
+    backgroundSurface: '#FFFFFF',
+
+    modalBackdrop: 'rgba(0, 0, 0, 0.3)',
+
+    stateOverlayHover: `rgba(153,161,189,0.08)`,
+
+    textPrimary: vars.color.grey900,
+    textSecondary: vars.color.grey500,
+    textTertiary: vars.color.grey300,
   },
   shadows: {
     menu: '0px 10px 30px rgba(0, 0, 0, 0.1)',