chore: update nft grays (#5124)

* chore: update nft grays * forgot to change some out * prettier * add 700

chore: update nft grays (#5124)
* chore: update nft grays * forgot to change some out * prettier * add 700
d951172a · vignesh mohankumar · GitHub · eb35d3a2 · d951172a · d951172a
Commit d951172a authored Nov 08, 2022 by vignesh mohankumar Committed by GitHub Nov 08, 2022
24 changed files
--- a/public/index.html
+++ b/public/index.html
 <!DOCTYPE html>
 <html translate="no">
+  <head>
+    <meta charset="utf-8" />
-<head>
+    <title>Uniswap Interface</title>
-  <meta charset="utf-8" />
+    <meta name="description" content="Swap or provide liquidity on the Uniswap Protocol" />
-  <title>Uniswap Interface</title>
+    <!--
-  <meta name="description" content="Swap or provide liquidity on the Uniswap Protocol" />
-  <!--
      %PUBLIC_URL% will be replaced with the URL of the `public` folder during build.
      Only files inside the `public` folder can be referenced from the HTML.
    -->
-  <link rel="shortcut icon" type="image/png" href="%PUBLIC_URL%/favicon.png" />
+    <link rel="shortcut icon" type="image/png" href="%PUBLIC_URL%/favicon.png" />
-  <link rel="apple-touch-icon" sizes="192x192" href="%PUBLIC_URL%/images/192x192_App_Icon.png" />
+    <link rel="apple-touch-icon" sizes="192x192" href="%PUBLIC_URL%/images/192x192_App_Icon.png" />
-  <link rel="apple-touch-icon" sizes="512x512" href="%PUBLIC_URL%/images/512x512_App_Icon.png" />
+    <link rel="apple-touch-icon" sizes="512x512" href="%PUBLIC_URL%/images/512x512_App_Icon.png" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
-  <meta name="theme-color" content="#FC72FF" />
+    <meta name="theme-color" content="#FC72FF" />
-  <meta http-equiv="Content-Security-Policy" content="script-src 'self' https://www.google-analytics.com https://www.googletagmanager.com 'unsafe-inline'" />
+    <meta
+      http-equiv="Content-Security-Policy"
-  <!--
+      content="script-src 'self' https://www.google-analytics.com https://www.googletagmanager.com 'unsafe-inline'"
+    />
+    <!--
      manifest.json provides metadata used when the app is installed as a PWA.
      See https://developers.google.com/web/fundamentals/web-app-manifest/
    -->
-  <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
-  <link rel="preconnect" href="https://www.google-analytics.com/" />
+    <link rel="preconnect" href="https://www.google-analytics.com/" />
-  <link rel="preload" href="%PUBLIC_URL%/fonts/Inter-roman.var.woff2" as="font" type="font/woff2" crossorigin />
+    <link rel="preload" href="%PUBLIC_URL%/fonts/Inter-roman.var.woff2" as="font" type="font/woff2" crossorigin />
-  <style>
+    <style>
-    * {
+      * {
-      font-family: 'Inter', sans-serif;
+        font-family: 'Inter', sans-serif;
-      box-sizing: border-box;
+        box-sizing: border-box;
-    }
+      }
-    /**
+      /**
          Explicitly load Inter var from public/ so it does not block LCP's critical path.
        */
-    @font-face {
+      @font-face {
-      font-family: 'Inter custom';
+        font-family: 'Inter custom';
-      font-weight: 100 900;
+        font-weight: 100 900;
-      font-style: normal;
+        font-style: normal;
-      font-display: block;
+        font-display: block;
-      font-named-instance: 'Regular';
+        font-named-instance: 'Regular';
-      src: url(%PUBLIC_URL%/fonts/Inter-roman.var.woff2) format('woff2 supports variations(gvar)'),
+        src: url(%PUBLIC_URL%/fonts/Inter-roman.var.woff2) format('woff2 supports variations(gvar)'),
-        url(%PUBLIC_URL%/fonts/Inter-roman.var.woff2) format('woff2-variations'),
+          url(%PUBLIC_URL%/fonts/Inter-roman.var.woff2) format('woff2-variations'),
-        url(%PUBLIC_URL%/fonts/Inter-roman.var.woff2) format('woff2');
+          url(%PUBLIC_URL%/fonts/Inter-roman.var.woff2) format('woff2');
-    }
+      }
-    @supports (font-variation-settings: normal) {
+      @supports (font-variation-settings: normal) {
-      * {
+        * {
-        font-family: 'Inter custom', sans-serif;
+          font-family: 'Inter custom', sans-serif;
+        }
+      }
+      html,
+      body {
+        margin: 0;
+        padding: 0;
+      }
+      button {
+        user-select: none;
      }
-    }
-    html,
-    body {
-      margin: 0;
-      padding: 0;
-    }
-    button {
-      user-select: none;
-    }
-    html {
-      font-size: 16px;
-      font-variant: none;
-      font-smooth: always;
-      -webkit-font-smoothing: antialiased;
-      -moz-osx-font-smoothing: grayscale;
-      -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-    }
-    #background-radial-gradient {
-      background: linear-gradient(180deg, #202738 0%, #070816 100%);
-      position: fixed;
-      top: 0;
-      left: 0;
-      right: 0;
-      pointer-events: none;
-      width: 200vw;
-      height: 200vh;
-      transform: translate(-50vw, -100vh);
-      z-index: -1;
-    }
-    html {
-      min-height: 100%;
-    }
-    @media (prefers-color-scheme: dark) {
      html {
-        background-color: #212429;
+        font-size: 16px;
+        font-variant: none;
+        font-smooth: always;
+        -webkit-font-smoothing: antialiased;
+        -moz-osx-font-smoothing: grayscale;
+        -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+      }
+      #background-radial-gradient {
+        background: linear-gradient(180deg, #202738 0%, #070816 100%);
+        position: fixed;
+        top: 0;
+        left: 0;
+        right: 0;
+        pointer-events: none;
+        width: 200vw;
+        height: 200vh;
+        transform: translate(-50vw, -100vh);
+        z-index: -1;
      }
-    }
-    @media (prefers-color-scheme: light) {
      html {
-        background-color: #f7f8fa;
+        min-height: 100%;
+      }
+      @media (prefers-color-scheme: dark) {
+        html {
+          background-color: #212429;
+        }
      }
-    }
-  </style>
-</head>
-<body>
+      @media (prefers-color-scheme: light) {
-  <noscript>You need to enable JavaScript to run this app.</noscript>
+        html {
+          background-color: #f7f8fa;
+        }
+      }
+    </style>
+  </head>
-  <div id="root">
+  <body>
-    <!-- Triggers the font to load immediately and then is replaced by the app -->
+    <noscript>You need to enable JavaScript to run this app.</noscript>
-    <div>&emsp;</div>
-  </div>
-  <div id="background-radial-gradient"></div>
+    <div id="root">
-</body>
+      <!-- Triggers the font to load immediately and then is replaced by the app -->
+      <div>&emsp;</div>
+    </div>
-</html>
+    <div id="background-radial-gradient"></div>
\ No newline at end of file
+  </body>
+</html>
--- a/public/manifest.json
+++ b/public/manifest.json
@@ -27,4 +27,4 @@
  "short_name": "Uniswap",
  "start_url": ".",
  "theme_color": "#FC72FFs"
 }
\ No newline at end of file
--- a/src/components/Card/index.tsx
+++ b/src/components/Card/index.tsx
@@ -14,15 +14,15 @@ export const LightCard = styled(Card)`
  background-color: ${({ theme }) => theme.deprecated_bg1};
 `
-export const LightGreyCard = styled(Card)`
+export const LightGrayCard = styled(Card)`
  background-color: ${({ theme }) => theme.deprecated_bg2};
 `
-export const GreyCard = styled(Card)`
+export const GrayCard = styled(Card)`
  background-color: ${({ theme }) => theme.deprecated_bg3};
 `
-export const DarkGreyCard = styled(Card)`
+export const DarkGrayCard = styled(Card)`
  background-color: ${({ theme }) => theme.deprecated_bg2};
 `

--- a/src/components/NavBar/SearchBarDropdown.tsx
+++ b/src/components/NavBar/SearchBarDropdown.tsx
@@ -47,7 +47,7 @@ export const SearchBarDropdownSection = ({
 }: SearchBarDropdownSectionProps) => {
  return (
    <Column gap="12">
-      <Row paddingX="16" paddingY="4" gap="8" color="grey300" className={subheadSmall} style={{ lineHeight: '20px' }}>
+      <Row paddingX="16" paddingY="4" gap="8" color="gray300" className={subheadSmall} style={{ lineHeight: '20px' }}>
        {headerIcon ? headerIcon : null}
        <Box>{header}</Box>
      </Row>

--- a/src/components/PositionCard/index.tsx
+++ b/src/components/PositionCard/index.tsx
@@ -18,7 +18,7 @@ import { ExternalLink, ThemedText } from '../../theme'
 import { currencyId } from '../../utils/currencyId'
 import { unwrappedToken } from '../../utils/unwrappedToken'
 import { ButtonEmpty, ButtonPrimary, ButtonSecondary } from '../Button'
-import { GreyCard, LightCard } from '../Card'
+import { GrayCard, LightCard } from '../Card'
 import { AutoColumn } from '../Column'
 import CurrencyLogo from '../CurrencyLogo'
 import DoubleCurrencyLogo from '../DoubleLogo'
@@ -78,7 +78,7 @@ export function MinimalPositionCard({ pair, showUnwrapped = false, border }: Pos
  return (
    <>
      {userPoolBalance && JSBI.greaterThan(userPoolBalance.quotient, JSBI.BigInt(0)) ? (
-        <GreyCard border={border}>
+        <GrayCard border={border}>
          <AutoColumn gap="12px">
            <FixedHeightRow>
              <RowFixed>
@@ -139,7 +139,7 @@ export function MinimalPositionCard({ pair, showUnwrapped = false, border }: Pos
              </FixedHeightRow>
            </AutoColumn>
          </AutoColumn>
-        </GreyCard>
+        </GrayCard>
      ) : (
        <LightCard>
          <ThemedText.DeprecatedSubHeader style={{ textAlign: 'center' }}>

--- a/src/components/PrivacyPolicy/index.tsx
+++ b/src/components/PrivacyPolicy/index.tsx
 import { Trans } from '@lingui/macro'
 import { sendEvent } from 'components/analytics'
-import Card, { DarkGreyCard } from 'components/Card'
+import Card, { DarkGrayCard } from 'components/Card'
 import Row, { AutoRow, RowBetween } from 'components/Row'
 import { useEffect, useRef } from 'react'
 import { ArrowDown, Info, X } from 'react-feather'
@@ -155,7 +155,7 @@ export function PrivacyPolicy() {
        </ThemedText.DeprecatedMain>
        <AutoColumn gap="12px">
          {EXTERNAL_APIS.map(({ name, description }, i) => (
-            <DarkGreyCard key={i}>
+            <DarkGrayCard key={i}>
              <AutoColumn gap="8px">
                <AutoRow gap="4px">
                  <Info size={18} />
@@ -165,7 +165,7 @@ export function PrivacyPolicy() {
                </AutoRow>
                <ThemedText.DeprecatedMain fontSize={14}>{description}</ThemedText.DeprecatedMain>
              </AutoColumn>
-            </DarkGreyCard>
+            </DarkGrayCard>
          ))}
          <ThemedText.DeprecatedBody fontSize={12}>
            <Row justify="center" marginBottom="1rem">

--- a/src/nft/components/bag/BagRow.tsx
+++ b/src/nft/components/bag/BagRow.tsx
@@ -40,7 +40,7 @@ const NoContentContainer = () => (
      left="1/2"
      top="1/2"
      style={{ transform: 'translate3d(-50%, -50%, 0)' }}
-      color="grey500"
+      color="gray500"
      fontSize="12"
      fontWeight="normal"
    >

--- a/src/nft/components/collection/ActivityCells.tsx
+++ b/src/nft/components/collection/ActivityCells.tsx
@@ -295,7 +295,7 @@ const NoContentContainer = () => (
      left="1/2"
      top="1/2"
      style={{ transform: 'translate3d(-50%, -50%, 0)' }}
-      color="grey500"
+      color="gray500"
      fontSize="12"
      fontWeight="normal"
    >

--- a/src/nft/components/collection/Card.tsx
+++ b/src/nft/components/collection/Card.tsx
@@ -664,7 +664,7 @@ const NoContentContainer = ({ uniformHeight }: NoContentContainerProps) => (
          background: `linear-gradient(270deg, ${themeVars.colors.backgroundOutline} 0%, ${themeVars.colors.backgroundSurface} 100%)`,
        }}
        fontWeight="normal"
-        color="grey500"
+        color="gray500"
        className={body}
        justifyContent="center"
        alignItems="center"
@@ -690,7 +690,7 @@ const NoContentContainer = ({ uniformHeight }: NoContentContainerProps) => (
          top="1/2"
          style={{ transform: 'translate3d(-50%, -50%, 0)' }}
          fontWeight="normal"
-          color="grey500"
+          color="gray500"
          className={body}
        >
          Content not

--- a/src/nft/components/explore/ActivityFeed.tsx
+++ b/src/nft/components/explore/ActivityFeed.tsx
@@ -98,7 +98,7 @@ const ActivityRow = ({ event, index, current }: { event: ActivityEvent; index: n
      <Box as="img" src={event.tokenMetadata?.imageUrl} borderRadius="12" marginRight="8" width="40" height="40" />
      <Box as="span" color="explicitWhite">
        <Box as="span">{ActivityEventTypeDisplay[event.eventType]}</Box>
-        <Box as="span" color="grey300" paddingLeft="4" paddingRight="4">
+        <Box as="span" color="gray300" paddingLeft="4" paddingRight="4">
          for
        </Box>
        {formattedPrice} ETH

--- a/src/nft/components/explore/Explore.css.ts
+++ b/src/nft/components/explore/Explore.css.ts
@@ -37,7 +37,7 @@ export const bannerOverlay = style([
    position: 'absolute',
    opacity: '0.7',
    width: 'full',
-    backgroundColor: 'grey900',
+    backgroundColor: 'gray900',
    left: '0',
    top: '0',
  }),
@@ -68,14 +68,14 @@ export const activityRow = style([
 ])
 export const activeRow = sprinkles({
-  backgroundColor: 'grey800',
+  backgroundColor: 'gray800',
 })
 export const timestamp = style([
  sprinkles({
    position: 'absolute',
    fontSize: '12',
-    color: 'grey300',
+    color: 'gray300',
    right: { sm: 'unset', lg: '12' },
    left: { sm: '64', lg: 'unset' },
    top: { sm: '28', lg: 'unset' },

--- a/src/nft/components/icons.tsx
+++ b/src/nft/components/icons.tsx
@@ -780,7 +780,7 @@ export const ClockIcon = () => (
  <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
    <path
      d="M10.7474 4.99984C10.7474 4.58562 10.4116 4.24984 9.9974 4.24984C9.58318 4.24984 9.2474 4.58562 9.2474 4.99984H10.7474ZM9.9974 9.99984H9.2474C9.2474 10.2839 9.4079 10.5436 9.66199 10.6707L9.9974 9.99984ZM12.9953 12.3373C13.3658 12.5226 13.8163 12.3724 14.0015 12.0019C14.1868 11.6314 14.0366 11.1809 13.6661 10.9957L12.9953 12.3373ZM17.5807 9.99984C17.5807 14.188 14.1856 17.5832 9.9974 17.5832V19.0832C15.014 19.0832 19.0807 15.0164 19.0807 9.99984H17.5807ZM9.9974 17.5832C5.80924 17.5832 2.41406 14.188 2.41406 9.99984H0.914062C0.914062 15.0164 4.98081 19.0832 9.9974 19.0832V17.5832ZM2.41406 9.99984C2.41406 5.81168 5.80924 2.4165 9.9974 2.4165V0.916504C4.98081 0.916504 0.914062 4.98325 0.914062 9.99984H2.41406ZM9.9974 2.4165C14.1856 2.4165 17.5807 5.81168 17.5807 9.99984H19.0807C19.0807 4.98325 15.014 0.916504 9.9974 0.916504V2.4165ZM9.2474 4.99984V9.99984H10.7474V4.99984H9.2474ZM9.66199 10.6707L12.9953 12.3373L13.6661 10.9957L10.3328 9.32902L9.66199 10.6707Z"
-      fill={vars.color.grey300}
+      fill={vars.color.gray300}
    />
  </svg>
 )
@@ -1261,7 +1261,7 @@ export const TrendingArrow = (props: SVGProps) => (
  <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
    <path
      d="M17.5 5.8335H18.25C18.25 5.41928 17.9142 5.0835 17.5 5.0835V5.8335ZM11.0227 12.4307L10.4876 12.9562C10.6286 13.0998 10.8214 13.1807 11.0227 13.1807C11.224 13.1807 11.4169 13.0998 11.5579 12.9562L11.0227 12.4307ZM7.61364 8.9585L8.14881 8.43305C8.00778 8.28941 7.81493 8.2085 7.61364 8.2085C7.41234 8.2085 7.21949 8.28941 7.07846 8.43305L7.61364 8.9585ZM1.96483 13.6414C1.67463 13.937 1.67899 14.4118 1.97456 14.702C2.27013 14.9922 2.74498 14.9878 3.03517 14.6923L1.96483 13.6414ZM13.4091 5.0835C12.9949 5.0835 12.6591 5.41928 12.6591 5.8335C12.6591 6.24771 12.9949 6.5835 13.4091 6.5835V5.0835ZM16.75 10.0002C16.75 10.4144 17.0858 10.7502 17.5 10.7502C17.9142 10.7502 18.25 10.4144 18.25 10.0002H16.75ZM16.9648 5.30805L10.4876 11.9053L11.5579 12.9562L18.0352 6.35894L16.9648 5.30805ZM11.5579 11.9053L8.14881 8.43305L7.07846 9.48394L10.4876 12.9562L11.5579 11.9053ZM7.07846 8.43305L1.96483 13.6414L3.03517 14.6923L8.14881 9.48394L7.07846 8.43305ZM13.4091 6.5835H17.5V5.0835H13.4091V6.5835ZM16.75 5.8335V10.0002H18.25V5.8335H16.75Z"
-      fill={vars.color.grey300}
+      fill={vars.color.gray300}
    />
  </svg>
 )

--- a/src/nft/components/layout/Checkbox.tsx
+++ b/src/nft/components/layout/Checkbox.tsx
@@ -24,7 +24,7 @@ export const Checkbox: React.FC<CheckboxProps> = ({ hovered, children, ...props
      {children}
      <Box
        as="span"
-        borderColor={props.checked || hovered ? 'accentAction' : 'grey400'}
+        borderColor={props.checked || hovered ? 'accentAction' : 'gray400'}
        className={styles.checkbox}
        background={props.checked ? 'accentAction' : undefined}
        // This element is purely decorative so

--- a/src/nft/components/layout/Radio.css.ts
+++ b/src/nft/components/layout/Radio.css.ts
@@ -23,10 +23,10 @@ export const radio = style([
  }),
 ])
-export const greyBorderRadio = style([
+export const grayBorderRadio = style([
  radio,
  sprinkles({
-    borderColor: 'grey400',
+    borderColor: 'gray400',
  }),
 ])

--- a/src/nft/components/layout/Radio.tsx
+++ b/src/nft/components/layout/Radio.tsx
@@ -12,7 +12,7 @@ export const Radio = ({ hovered, checked, onClick }: RadioProps) => {
  return (
    <Box
      as="label"
-      className={checked ? styles.selectedRadio : hovered ? styles.blueBorderRadio : styles.greyBorderRadio}
+      className={checked ? styles.selectedRadio : hovered ? styles.blueBorderRadio : styles.grayBorderRadio}
      onClick={onClick}
    />
  )

--- a/src/nft/components/profile/list/ListPage.tsx
+++ b/src/nft/components/profile/list/ListPage.tsx
@@ -454,7 +454,7 @@ const PriceTextInput = ({
            ? 'genieBlue'
            : listPrice != null
            ? 'textSecondary'
-            : 'grey700'
+            : 'gray700'
        }
      >
        <NumericInput

--- a/src/nft/css/sprinkles.css.ts
+++ b/src/nft/css/sprinkles.css.ts
@@ -178,15 +178,24 @@ export const vars = createGlobalTheme(':root', {
    green400: '#1A9550',
    violet200: '#BDB8FA',
    violet400: '#7A7BEB',
-    grey900: '#0E111A',
+    gray50: '#F5F6FC',
-    grey800: '#141B2B',
+    gray100: '#E8ECFB',
-    grey700: '#293249',
+    gray150: '#D2D9EE',
-    grey500: '#5E6887',
+    gray200: '#B8C0DC',
-    grey400: '#7C85A2',
+    gray250: '#A6AFCA',
-    grey300: '#99A1BD',
+    gray300: '#98A1C0',
-    grey200: '#B7BED4',
+    gray350: '#888FAB',
-    grey100: '#DDE3F7',
+    gray400: '#7780A0',
-    grey50: '#F5F6FC',
+    gray450: '#6B7594',
+    gray500: '#5D6785',
+    gray550: '#505A78',
+    gray600: '#404A67',
+    gray650: '#333D59',
+    gray700: '#293249',
+    gray750: '#1B2236',
+    gray800: '#131A2A',
+    gray850: '#0E1524',
+    gray900: '#0D111C',
    accentTextLightTertiary: 'rgba(255, 255, 255, 0.12)',
    outline: 'rgba(153, 161, 189, 0.24)',
    lightGrayOverlay: '#99A1BD14',

--- a/src/nft/themes/darkTheme.ts
+++ b/src/nft/themes/darkTheme.ts
@@ -13,10 +13,10 @@ export const darkTheme: Theme = {
    violet: vars.color.violet200,
    backgroundFloating: '0000000C',
-    backgroundInteractive: vars.color.grey700,
+    backgroundInteractive: vars.color.gray700,
-    backgroundModule: vars.color.grey800,
+    backgroundModule: vars.color.gray800,
    backgroundOutline: `rgba(153,161,189,0.24)`,
-    backgroundSurface: vars.color.grey900,
+    backgroundSurface: vars.color.gray900,
    backgroundBackdrop: '#000',
    modalBackdrop: 'linear-gradient(0deg, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7))',
@@ -24,8 +24,8 @@ export const darkTheme: Theme = {
    stateOverlayHover: `rgba(153,161,189,0.08)`,
    textPrimary: '#FFFFFF',
-    textSecondary: vars.color.grey300,
+    textSecondary: vars.color.gray300,
-    textTertiary: vars.color.grey500,
+    textTertiary: vars.color.gray500,
  },
  shadows: {
    menu: '0px 10px 30px rgba(0, 0, 0, 0.1)',

--- a/src/nft/themes/lightTheme.ts
+++ b/src/nft/themes/lightTheme.ts
@@ -10,8 +10,8 @@ export const lightTheme: Theme = {
    explicitWhite: '#FFFFFF',
    backgroundFloating: '#00000000',
-    backgroundInteractive: vars.color.grey100,
+    backgroundInteractive: vars.color.gray100,
-    backgroundModule: vars.color.grey50,
+    backgroundModule: vars.color.gray50,
    backgroundOutline: `rgba(94,104,135,0.24)`,
    backgroundSurface: '#FFFFFF',
    backgroundBackdrop: '#FFF',
@@ -23,9 +23,9 @@ export const lightTheme: Theme = {
    gold: vars.color.gold400,
    violet: vars.color.violet400,
-    textPrimary: vars.color.grey900,
+    textPrimary: vars.color.gray900,
-    textSecondary: vars.color.grey500,
+    textSecondary: vars.color.gray500,
-    textTertiary: vars.color.grey300,
+    textTertiary: vars.color.gray300,
  },
  shadows: {
    menu: '0px 10px 30px rgba(0, 0, 0, 0.1)',

--- a/src/pages/MigrateV2/MigrateV2Pair.tsx
+++ b/src/pages/MigrateV2/MigrateV2Pair.tsx
@@ -7,7 +7,7 @@ import { useWeb3React } from '@web3-react/core'
 import { sendEvent } from 'components/analytics'
 import Badge, { BadgeVariant } from 'components/Badge'
 import { ButtonConfirmed } from 'components/Button'
-import { BlueCard, DarkGreyCard, LightCard, YellowCard } from 'components/Card'
+import { BlueCard, DarkGrayCard, LightCard, YellowCard } from 'components/Card'
 import DoubleCurrencyLogo from 'components/DoubleLogo'
 import FeeSelector from 'components/FeeSelector'
 import RangeSelector from 'components/RangeSelector'
@@ -585,7 +585,7 @@ function V2PairMigration({
          ) : null}
          {position ? (
-            <DarkGreyCard>
+            <DarkGrayCard>
              <AutoColumn gap="md">
                <LiquidityInfo token0Amount={position.amount0} token1Amount={position.amount1} />
                {chainId && refund0 && refund1 ? (
@@ -600,7 +600,7 @@ function V2PairMigration({
                  </ThemedText.DeprecatedBlack>
                ) : null}
              </AutoColumn>
-            </DarkGreyCard>
+            </DarkGrayCard>
          ) : null}
          <AutoColumn gap="12px">

--- a/src/pages/Swap/index.tsx
+++ b/src/pages/Swap/index.tsx
@@ -31,7 +31,7 @@ import { currencyAmountToPreciseFloat, formatTransactionAmount } from 'utils/for
 import AddressInputPanel from '../../components/AddressInputPanel'
 import { ButtonConfirmed, ButtonError, ButtonLight, ButtonPrimary } from '../../components/Button'
-import { GreyCard } from '../../components/Card'
+import { GrayCard } from '../../components/Card'
 import { AutoColumn } from '../../components/Column'
 import SwapCurrencyInputPanel from '../../components/CurrencyInputPanel/SwapCurrencyInputPanel'
 import Loader from '../../components/Loader'
@@ -660,11 +660,11 @@ export default function Swap() {
                    ) : null}
                  </ButtonPrimary>
                ) : routeNotFound && userHasSpecifiedInputOutput && !routeIsLoading && !routeIsSyncing ? (
-                  <GreyCard style={{ textAlign: 'center' }}>
+                  <GrayCard style={{ textAlign: 'center' }}>
                    <ThemedText.DeprecatedMain mb="4px">
                      <Trans>Insufficient liquidity for this trade.</Trans>
                    </ThemedText.DeprecatedMain>
-                  </GreyCard>
+                  </GrayCard>
                ) : showApproveFlow ? (
                  <AutoRow style={{ flexWrap: 'nowrap', width: '100%' }}>
                    <AutoColumn style={{ width: '100%' }} gap="12px">

--- a/src/pages/Vote/VotePage.tsx
+++ b/src/pages/Vote/VotePage.tsx
@@ -18,7 +18,7 @@ import { useParams } from 'react-router-dom'
 import styled from 'styled-components/macro'
 import { ButtonPrimary } from '../../components/Button'
-import { GreyCard } from '../../components/Card'
+import { GrayCard } from '../../components/Card'
 import { AutoColumn } from '../../components/Column'
 import { CardSection, DataCard } from '../../components/earn/styled'
 import { RowBetween, RowFixed } from '../../components/Row'
@@ -318,7 +318,7 @@ export default function VotePage() {
                </ThemedText.DeprecatedMain>
              </RowBetween>
              {proposalData && proposalData.status === ProposalState.ACTIVE && !showVotingButtons && (
-                <GreyCard>
+                <GrayCard>
                  <ThemedText.DeprecatedBlack>
                    <Trans>
                      Only UNI votes that were self delegated or delegated to another address before block{' '}
@@ -333,7 +333,7 @@ export default function VotePage() {
                      </span>
                    )}
                  </ThemedText.DeprecatedBlack>
-                </GreyCard>
+                </GrayCard>
              )}
            </AutoColumn>
            {showVotingButtons && (

--- a/src/theme/index.tsx
+++ b/src/theme/index.tsx
@@ -146,7 +146,7 @@ function oldColors(darkMode: boolean): Colors {
    deprecated_text4: darkMode ? ColorsPalette.gray200 : ColorsPalette.gray300,
    deprecated_text5: darkMode ? ColorsPalette.gray500 : ColorsPalette.gray50,
-    // backgrounds / greys
+    // backgrounds / grays
    deprecated_bg0: darkMode ? ColorsPalette.gray900 : ColorsPalette.white,
    deprecated_bg1: darkMode ? ColorsPalette.gray800 : ColorsPalette.gray50,
    deprecated_bg2: darkMode ? ColorsPalette.gray700 : ColorsPalette.gray100,

--- a/src/theme/styled.d.ts
+++ b/src/theme/styled.d.ts
@@ -77,7 +77,7 @@ export interface Colors {
  deprecated_text4: Color
  deprecated_text5: Color
-  // backgrounds / greys
+  // backgrounds / grays
  deprecated_bg0: Color
  deprecated_bg1: Color
  deprecated_bg2: Color