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/icons.tsx

@@ -13,8 +13,8 @@ export const LogoIcon = (props: SVGProps) => (
     height="43"
     viewBox="0 0 151 43"
     xmlns="http://www.w3.org/2000/svg"
-    fill={themeVars.colors.blackBlue}
-    color={themeVars.colors.blackBlue}
+    fill={themeVars.colors.textPrimary}
+    color={themeVars.colors.textPrimary}
     {...props}
   >
     <path
@@ -114,7 +114,7 @@ export const ChevronBackwardIcon = (props: SVGProps) => (
   <svg {...props} width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
     <path
       d="M12.7783 21.1514C12.9805 21.3447 13.2266 21.4502 13.5078 21.4502C14.0967 21.4502 14.5537 20.9932 14.5537 20.4131C14.5537 20.123 14.4395 19.8594 14.2373 19.6572L8.08496 13.6455L14.2373 7.65137C14.4395 7.44922 14.5537 7.17676 14.5537 6.89551C14.5537 6.31543 14.0967 5.8584 13.5078 5.8584C13.2266 5.8584 12.9805 5.96387 12.7871 6.15723L5.94922 12.8369C5.70312 13.0654 5.58008 13.3467 5.58008 13.6543C5.58008 13.9619 5.70312 14.2256 5.94043 14.4629L12.7783 21.1514ZM20.6357 21.1514C20.8379 21.3447 21.0752 21.4502 21.3652 21.4502C21.9541 21.4502 22.4111 20.9932 22.4111 20.4131C22.4111 20.123 22.2881 19.8594 22.0947 19.6572L15.9336 13.6455L22.0947 7.65137C22.2969 7.44922 22.4111 7.17676 22.4111 6.89551C22.4111 6.31543 21.9541 5.8584 21.3652 5.8584C21.0752 5.8584 20.8379 5.96387 20.6357 6.15723L13.7979 12.8369C13.5605 13.0654 13.4375 13.3467 13.4287 13.6543C13.4287 13.9619 13.5518 14.2256 13.7979 14.4629L20.6357 21.1514Z"
-      fill={themeVars.colors.darkGray}
+      fill={themeVars.colors.textSecondary}
     />
   </svg>
 )
@@ -136,7 +136,7 @@ export const ChevronUpIcon = ({
     <g clipPath="url(#clip0_564_11230)">
       <path
         d="M7.2207 16.0615L13.9092 9.22363C14.1377 8.97754 14.4102 8.86328 14.7178 8.86328C15.0254 8.86328 15.3066 8.98633 15.5352 9.22363L22.2148 16.0615C22.4082 16.2549 22.5137 16.501 22.5137 16.791C22.5137 17.3799 22.0566 17.8369 21.4766 17.8369C21.1953 17.8369 20.9229 17.7314 20.7207 17.5205L14.7266 11.3594L8.71484 17.5205C8.52148 17.7227 8.24902 17.8369 7.95898 17.8369C7.37891 17.8369 6.92188 17.3799 6.92188 16.791C6.92188 16.5098 7.02734 16.2549 7.2207 16.0615Z"
-        fill={secondaryColor || themeVars.colors.darkGray}
+        fill={secondaryColor || themeVars.colors.textSecondary}
       />
     </g>
     <defs>
@@ -234,7 +234,7 @@ export const CheckmarkDiamondIcon = (props: SVGProps) => (
 export const XMarkIcon = (props: SVGProps) => (
   <svg width="40" height="40" viewBox="0 0 40 40" xmlns="http://www.w3.org/2000/svg" {...props}>
     <path
-      fill={themeVars.colors.darkGray}
+      fill={themeVars.colors.textSecondary}
       d="M10.2706 27.2148C9.74321 27.7421 9.7181 28.6838 10.2831 29.2362C10.8356 29.7887 11.7773 29.7761 12.3046 29.2488L19.9887 21.5521L27.6855 29.2488C28.2254 29.7887 29.1545 29.7887 29.7069 29.2362C30.2468 28.6712 30.2594 27.7547 29.7069 27.2148L22.0228 19.518L29.7069 11.8339C30.2594 11.294 30.2594 10.3649 29.7069 9.81241C29.1419 9.27251 28.2254 9.25995 27.6855 9.79985L19.9887 17.4966L12.3046 9.79985C11.7773 9.27251 10.823 9.2474 10.2831 9.81241C9.73066 10.3649 9.74321 11.3065 10.2706 11.8339L17.9673 19.518L10.2706 27.2148Z"
     />
   </svg>
@@ -351,13 +351,13 @@ export const NewTabIcon = (props: SVGProps) => (
   <svg {...props} width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
     <path
       d="M15.8828 8.50811C15.8828 8.9492 15.6132 9.25144 15.2048 9.25144C14.7964 9.25144 14.5268 8.96554 14.5268 8.51628V6.02762L14.6493 6.0494L13.5548 7.23383L10.704 10.0846C10.5569 10.2317 10.3772 10.3133 10.1485 10.3133C9.73192 10.3133 9.42969 10.0274 9.42969 9.58634C9.42969 9.3903 9.51954 9.20243 9.6584 9.06356L12.5174 6.20461L13.7181 5.10186L13.5758 5.23256H11.2349C10.7857 5.23256 10.4916 4.97117 10.4916 4.55458C10.4916 4.14616 10.7857 3.88477 11.2267 3.88477H15.0496C15.5642 3.88477 15.8828 4.13799 15.8828 4.70978V8.50811Z"
-      fill={themeVars.colors.darkGray}
+      fill={themeVars.colors.textSecondary}
     />
     <path
       fillRule="evenodd"
       clipRule="evenodd"
       d="M9.28446 3.89648H6.19434C4.83831 3.89648 4.12891 4.59333 4.12891 5.94308V13.5833C4.12891 14.9268 4.83831 15.6299 6.19434 15.6299H13.7969C15.1592 15.6299 15.8623 14.9268 15.8623 13.5833V10.4293H14.613V13.4703C14.613 14.0792 14.2866 14.3806 13.7153 14.3806H6.27595C5.69838 14.3806 5.37821 14.0792 5.37821 13.4703V6.05608C5.37821 5.44713 5.69838 5.14579 6.27595 5.14579H9.28446V3.89648Z"
-      fill={themeVars.colors.darkGray}
+      fill={themeVars.colors.textSecondary}
     />
   </svg>
 )
@@ -430,7 +430,7 @@ export const RefreshIcon = (props: SVGProps) => (
   <svg {...props} width="22" height="19" viewBox="0 0 22 19" fill="none" xmlns="http://www.w3.org/2000/svg">
     <path
       d="M21.2734 8.59961H20.0429C19.5244 4.14355 15.6572 0.566406 10.999 0.566406C8.4238 0.566406 6.08591 1.69141 4.46872 3.44922C4.03805 3.87109 4.05563 4.43359 4.40719 4.75879C4.76755 5.09277 5.2861 5.09277 5.72555 4.68848C7.03512 3.27344 8.91598 2.38574 10.999 2.38574C14.708 2.38574 17.705 5.10156 18.206 8.59961H16.8613C16.1845 8.59961 16 9.10059 16.3955 9.64551L18.4961 12.6162C18.8213 13.0557 19.3134 13.0645 19.6299 12.6162L21.7392 9.6543C22.1347 9.10059 21.959 8.59961 21.2734 8.59961ZM0.724578 10.7178H1.96384C2.48239 15.1738 6.34958 18.751 10.999 18.751C13.5918 18.751 15.9297 17.6172 17.5468 15.8594C17.9687 15.4375 17.9511 14.875 17.5996 14.5498C17.2392 14.2158 16.7295 14.2158 16.2812 14.6289C14.9892 16.0439 13.1084 16.9316 10.999 16.9316C7.2988 16.9316 4.30173 14.2158 3.80075 10.7178H5.13669C5.80466 10.7178 5.99801 10.2168 5.60251 9.67188L3.49313 6.70117C3.17673 6.26172 2.68454 6.25293 2.36813 6.70117L0.258757 9.66309C-0.14554 10.2168 0.0390307 10.7178 0.724578 10.7178Z"
-      fill={themeVars.colors.darkGray}
+      fill={themeVars.colors.textSecondary}
     />
   </svg>
 )
@@ -439,11 +439,11 @@ export const CopyIcon = (props: SVGProps) => (
   <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
     <path
       d="M9.97414 3.125C11.0259 3.125 11.842 3.24608 12.4397 3.83995C12.931 4.33285 13.0873 4.9837 13.125 5.80608H11.9822C11.9543 5.34283 11.8567 4.93753 11.6006 4.67599C11.2788 4.35887 10.7328 4.27815 10.1351 4.27815H6.76732C6.15811 4.27815 5.60637 4.35887 5.29027 4.67599C4.97417 4.9931 4.89371 5.54085 4.89371 6.15202V9.5003C4.89371 10.0999 4.97417 10.6419 5.29027 10.959C5.54809 11.2177 5.96268 11.3229 6.43111 11.3529V12.5C5.60751 12.4618 4.94982 12.3011 4.45117 11.8008C3.8592 11.2127 3.75 10.3998 3.75 9.33886V6.28463C3.75 5.24103 3.8592 4.42806 4.45117 3.83995C5.04314 3.24608 5.85925 3.125 6.89951 3.125H9.97414Z"
-      fill={themeVars.colors.darkGray}
+      fill={themeVars.colors.textSecondary}
     />
     <path
       d="M16.186 7.58333C15.5939 6.99496 14.7853 6.875 13.7433 6.875H10.6203C9.5897 6.875 8.78115 6.99496 8.19467 7.58333C7.60819 8.16599 7.5 8.97144 7.5 10.0054V13.1082C7.5 14.1593 7.60819 14.9647 8.19467 15.5474C8.78115 16.1358 9.5897 16.25 10.6317 16.25H13.7433C14.7853 16.25 15.5995 16.1358 16.186 15.5474C16.7668 14.959 16.875 14.1593 16.875 13.1082V10.0225C16.875 8.97144 16.7668 8.16599 16.186 7.58333ZM15.7419 9.86257V13.2681C15.7419 13.8622 15.6679 14.3992 15.3547 14.7134C15.0358 15.0333 14.4949 15.1132 13.9027 15.1132H10.478C9.88578 15.1132 9.33916 15.0276 9.02599 14.7134C8.71282 14.3992 8.63311 13.8622 8.63311 13.2681V9.87399C8.63311 9.26848 8.71282 8.72581 9.02599 8.41163C9.33916 8.09745 9.88579 8.01747 10.4893 8.01747H13.9027C14.4949 8.01747 15.0358 8.09745 15.3547 8.41163C15.6679 8.73152 15.7419 9.26848 15.7419 9.86257Z"
-      fill={themeVars.colors.darkGray}
+      fill={themeVars.colors.textSecondary}
     />
   </svg>
 )
@@ -723,11 +723,11 @@ export const ShareIcon = () => (
   <svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
     <path
       d="M21.8711 20.6436L21.8711 11.8564C21.8711 9.97559 20.8867 9 18.9883 9L17 9L17 10.7227L18.8828 10.7227C19.7002 10.7227 20.1484 11.1533 20.1484 12.0059L20.1484 20.5029C20.1484 21.3555 19.7002 21.7773 18.8828 21.7773L8.98828 21.7773C8.1709 21.7773 7.72266 21.3555 7.72266 20.5029L7.72266 12.0059C7.72266 11.1533 8.1709 10.7227 8.98828 10.7227L11 10.7227L11 9L8.88281 9C6.99317 9 6 9.97559 6 11.8564L6 20.6436C6 22.5244 6.99316 23.5 8.88281 23.5L18.9883 23.5C20.8867 23.5 21.8711 22.5244 21.8711 20.6436Z"
-      fill={themeVars.colors.darkGray}
+      fill={themeVars.colors.textSecondary}
     />
     <path
       d="M14.8519 15.17L14.8519 6.57559L14.787 5.22562L15.3611 5.89148L16.6574 7.25057C16.8056 7.41476 17.0185 7.50597 17.2315 7.50597C17.6481 7.50597 18 7.19584 18 6.77626C18 6.55734 17.9074 6.39316 17.75 6.2381L14.6481 3.28276C14.4259 3.07297 14.2222 3 14 3C13.7778 3 13.5741 3.07297 13.3519 3.28276L10.2407 6.2381C10.0833 6.39316 10 6.55734 10 6.77626C10 7.19584 10.3333 7.50597 10.7593 7.50597C10.963 7.50597 11.1852 7.41476 11.3333 7.25057L12.6389 5.89148L13.213 5.2165L13.1389 6.57559L13.1389 15.17C13.1389 15.6169 13.5278 16 14 16C14.4722 16 14.8519 15.6169 14.8519 15.17Z"
-      fill={themeVars.colors.darkGray}
+      fill={themeVars.colors.textSecondary}
     />
   </svg>
 )
@@ -880,13 +880,13 @@ export const InformationIcon = (props: SVGProps) => (
   <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
     <path
       d="M8.00419 3.00446C5.15653 3.00446 2.80608 5.35491 2.80608 8.19754C2.80608 11.0402 5.16155 13.3906 8.00921 13.3906C10.8518 13.3906 13.1973 11.0402 13.1973 8.19754C13.1973 5.35491 10.8468 3.00446 8.00419 3.00446ZM8.00419 4.03906C10.3094 4.03906 12.1526 5.8923 12.1526 8.19754C12.1526 10.5028 10.3094 12.351 8.00921 12.351C5.70396 12.351 3.85073 10.5028 3.8457 8.19754C3.84068 5.8923 5.69894 4.03906 8.00419 4.03906ZM8.00921 5.69643C7.68276 5.69643 7.41657 5.93248 7.41657 6.25391C7.41657 6.57031 7.67774 6.80636 8.00921 6.80636C8.33566 6.80636 8.60184 6.57031 8.60184 6.25391C8.60184 5.9375 8.33064 5.69643 8.00921 5.69643Z"
-      fill={themeVars.colors.darkGray}
+      fill={themeVars.colors.textSecondary}
     />
     <path
       fillRule="evenodd"
       clipRule="evenodd"
       d="M7.99939 7.22856C8.26764 7.22856 8.4851 7.44602 8.4851 7.71428L8.4851 10.2857C8.4851 10.554 8.26764 10.7714 7.99939 10.7714C7.73113 10.7714 7.51367 10.554 7.51367 10.2857L7.51367 7.71428C7.51367 7.44602 7.73113 7.22856 7.99939 7.22856Z"
-      fill={themeVars.colors.darkGray}
+      fill={themeVars.colors.textSecondary}
     />
   </svg>
 )
@@ -895,23 +895,23 @@ export const FailedListingIcon = (props: SVGProps) => (
   <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
     <path
       d="M9.9933 16.2444C13.5529 16.2444 16.4909 13.3064 16.4909 9.75307C16.4909 6.19978 13.5466 3.26172 9.98703 3.26172C6.43373 3.26172 3.50195 6.19978 3.50195 9.75307C3.50195 13.3064 6.44001 16.2444 9.9933 16.2444ZM8.12877 12.3207C7.78976 12.3207 7.62653 12.1324 7.62653 11.8624V7.63742C7.62653 7.36747 7.78976 7.17913 8.12877 7.17913H8.80678C9.14579 7.17913 9.30901 7.36747 9.30901 7.63742V11.8624C9.30901 12.1324 9.14579 12.3207 8.80678 12.3207H8.12877ZM11.1798 12.3207C10.8471 12.3207 10.6776 12.1324 10.6776 11.8624V7.63742C10.6776 7.36747 10.8471 7.17913 11.1798 7.17913H11.8641C12.1906 7.17913 12.3538 7.36747 12.3538 7.63742V11.8624C12.3538 12.1324 12.1906 12.3207 11.8641 12.3207H11.1798Z"
-      fill={themeVars.colors.darkGray}
+      fill={themeVars.colors.textSecondary}
     />
   </svg>
 )
 
 export const ToggleEyeIcon = () => (
   <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="none" viewBox="0 0 20 20">
-    <circle cx="10" cy="10" r="9" fill={themeVars.colors.blackBlue} transform="rotate(-180 10 10)" />
+    <circle cx="10" cy="10" r="9" fill={themeVars.colors.textPrimary} transform="rotate(-180 10 10)" />
     <g clipPath="url(#clip0_271_11037)">
       <path
-        fill={themeVars.colors.white}
+        fill={themeVars.colors.backgroundSurface}
         d="M13.14.51a10.175 10.175 0 014.918 3.602 10.155 10.155 0 011.43 2.75 9.655 9.655 0 01.51 3.133 9.708 9.708 0 01-.507 3.137 9.997 9.997 0 01-1.43 2.75 10.37 10.37 0 01-2.172 2.177 10.01 10.01 0 01-2.741 1.43 9.64 9.64 0 01-3.136.51 9.671 9.671 0 01-3.14-.51 10.045 10.045 0 01-2.75-1.43 10.338 10.338 0 01-2.177-2.177 10.064 10.064 0 01-1.436-2.75 9.619 9.619 0 01-.511-3.137 9.627 9.627 0 01.511-3.133c.334-.985.818-1.913 1.436-2.75A10.243 10.243 0 014.122 1.94 10.12 10.12 0 016.866.51 9.643 9.643 0 0110.003 0a9.64 9.64 0 013.137.51zM7.678 5.892a8.755 8.755 0 00-1.955.91 8.79 8.79 0 00-1.497 1.175c-.364.35-.686.74-.96 1.163-.22.361-.33.649-.33.864 0 .21.11.496.33.86.273.424.595.814.96 1.163a8.929 8.929 0 003.46 2.084c.751.24 1.536.36 2.326.354a7.492 7.492 0 002.334-.354 8.578 8.578 0 001.958-.91 8.954 8.954 0 001.5-1.174c.365-.349.687-.739.96-1.163.22-.364.33-.65.33-.86 0-.21-.11-.503-.338-.864a6.64 6.64 0 00-.966-1.163 8.905 8.905 0 00-3.46-2.087 7.376 7.376 0 00-2.32-.356 7.418 7.418 0 00-2.332.358zm3.815 1.582c.438.261.804.628 1.064 1.067.263.442.4.948.395 1.463.006.52-.13 1.03-.395 1.478a2.97 2.97 0 01-1.064 1.056c-.45.262-.961.397-1.481.392a2.844 2.844 0 01-1.47-.392 3.01 3.01 0 01-1.065-1.056 2.817 2.817 0 01-.399-1.478 2.787 2.787 0 01.4-1.463A3.096 3.096 0 018.54 7.474a2.78 2.78 0 011.47-.403 2.816 2.816 0 011.482.403zM9.136 9.133a1.196 1.196 0 00-.368.87 1.183 1.183 0 00.368.869 1.178 1.178 0 00.86.368 1.222 1.222 0 00.881-.37 1.18 1.18 0 00.372-.868 1.192 1.192 0 00-.372-.871 1.21 1.21 0 00-1.352-.275c-.147.065-.28.159-.389.277z"
       />
     </g>
     <defs>
       <clipPath id="clip0_271_11037">
-        <path fill={themeVars.colors.blackBlue} d="M0 0h20v20H0z" transform="rotate(-180 10 10)" />
+        <path fill={themeVars.colors.textPrimary} d="M0 0h20v20H0z" transform="rotate(-180 10 10)" />
       </clipPath>
     </defs>
   </svg>
@@ -921,14 +921,14 @@ export const CornerDownLeftIcon = (props: SVGProps) => (
   <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
     <path
       d="M7.4987 8.33331L3.33203 12.5L7.4987 16.6666"
-      stroke={themeVars.colors.darkGray}
+      stroke={themeVars.colors.textSecondary}
       strokeWidth="1.5"
       strokeLinecap="round"
       strokeLinejoin="round"
     />
     <path
       d="M16.6654 3.33331V9.16665C16.6654 10.0507 16.3142 10.8985 15.6891 11.5237C15.0639 12.1488 14.2161 12.5 13.332 12.5H3.33203"
-      stroke={themeVars.colors.darkGray}
+      stroke={themeVars.colors.textSecondary}
       strokeWidth="1.5"
       strokeLinecap="round"
       strokeLinejoin="round"

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)',