feat: update Swap styles, update theme colors (#4294)

* toggle

* fixed position

* im bad at spelling

* rm button

* fix

* initial

* fix

* styles

* iteration

* minor updates

* additions

* updates

* rm file

* color update

* updates

* start feature flag

* more flagging

* FLAGZ

* even more flagging

* flagbergasted

* more

* minor updates

* updates

* lets go

* merge

* merge fix

* merge fixes

* theme

* Merge remote-tracking branch 'origin/kg/explore-colorChanges2' into swap_and_colors

* Fix merge conflicts

* themeUpdates

* Update colors based on Phil's latest

* Add new default gradients

* toggle

* fixed position

* im bad at spelling

* rm button

* initial

* fix

* styles

* iteration

* minor updates

* additions

* updates

* rm file

* color update

* updates

* start feature flag

* more flagging

* FLAGZ

* even more flagging

* flagbergasted

* more

* minor updates

* updates

* lets go

* Merge remote-tracking branch 'origin/kg/explore-colorChanges2' into swap_and_colors

* merge

* Fix merge conflicts

* merge fixes

* theme

* themeUpdates

* Update colors based on Phil's latest

* Add new default gradients

* update swap index

* fix merge bugs

* Tweak swap

* update from main

* Fix merge issues and color bug

* Update index.test.tsx.snap

* Remove un-used constants

* updates

* font

* add space

* style

* style

* style

* hover state

* color fixes

* meh

* Update index.tsx

* fix conflict
Co-authored-by: Kaylee George <62825936+kayleegeorge@users.noreply.github.com>

src/components/Button/index.tsx

@@ -77,27 +77,35 @@ export const ButtonPrimary = styled(BaseButton)`
   }
 `
 
-export const ButtonLight = styled(BaseButton)`
-  background-color: ${({ theme }) => theme.deprecated_primary5};
-  color: ${({ theme }) => theme.deprecated_primaryText1};
-  font-size: 16px;
-  font-weight: 500;
+export const ButtonLight = styled(BaseButton)<{ phase0Flag?: boolean }>`
+  background-color: ${({ theme, phase0Flag }) => (phase0Flag ? theme.accentActionSoft : theme.deprecated_primary5)};
+  color: ${({ theme, phase0Flag }) => (phase0Flag ? theme.accentAction : theme.deprecated_primaryText1)};
+  font-size: ${({ phase0Flag }) => (phase0Flag ? '20px' : '16px')};
+  font-weight: ${({ phase0Flag }) => (phase0Flag ? '600' : '500')};
+
   &:focus {
-    box-shadow: 0 0 0 1pt ${({ theme, disabled }) => !disabled && darken(0.03, theme.deprecated_primary5)};
-    background-color: ${({ theme, disabled }) => !disabled && darken(0.03, theme.deprecated_primary5)};
+    box-shadow: 0 0 0 1pt
+      ${({ theme, disabled, phase0Flag }) =>
+        !disabled && (phase0Flag ? theme.accentActionSoft : darken(0.03, theme.deprecated_primary5))};
+    background-color: ${({ theme, disabled, phase0Flag }) =>
+      !disabled && (phase0Flag ? theme.accentActionSoft : darken(0.03, theme.deprecated_primary5))};
   }
   &:hover {
-    background-color: ${({ theme, disabled }) => !disabled && darken(0.03, theme.deprecated_primary5)};
+    background-color: ${({ theme, disabled, phase0Flag }) =>
+      !disabled && (phase0Flag ? theme.accentActionSoft : darken(0.03, theme.deprecated_primary5))};
   }
   &:active {
-    box-shadow: 0 0 0 1pt ${({ theme, disabled }) => !disabled && darken(0.05, theme.deprecated_primary5)};
-    background-color: ${({ theme, disabled }) => !disabled && darken(0.05, theme.deprecated_primary5)};
+    box-shadow: 0 0 0 1pt
+      ${({ theme, disabled, phase0Flag }) =>
+        !disabled && (phase0Flag ? theme.accentActionSoft : darken(0.05, theme.deprecated_primary5))};
+    background-color: ${({ theme, disabled, phase0Flag }) =>
+      !disabled && (phase0Flag ? theme.accentActionSoft : darken(0.05, theme.deprecated_primary5))};
   }
   :disabled {
     opacity: 0.4;
     :hover {
       cursor: auto;
-      background-color: ${({ theme }) => theme.deprecated_primary5};
+      background-color: ${({ theme, phase0Flag }) => (phase0Flag ? theme.none : theme.deprecated_primary5)};
       box-shadow: none;
       border: 1px solid transparent;
       outline: none;

src/components/ErrorBoundary/index.tsx

@@ -20,7 +20,6 @@ const FallbackWrapper = styled.div`
 const BodyWrapper = styled.div<{ margin?: string }>`
   padding: 1rem;
   width: 100%;
-  white-space: ;
 `
 
 const CodeBlockWrapper = styled.div`

src/components/Explore/TokenDetails/LoadingTokenDetail.tsx

@@ -56,6 +56,7 @@ const StatsLoadingContainer = styled.div`
 const ChartAnimation = styled.div`
   display: flex;
   animation: wave 8s cubic-bezier(0.36, 0.45, 0.63, 0.53) infinite;
+  overflow: hidden;
 
   @keyframes wave {
     0% {
@@ -69,6 +70,7 @@ const ChartAnimation = styled.div`
 const Space = styled.div<{ heightSize: number }>`
   height: ${({ heightSize }) => `${heightSize}px`};
 `
+
 /* Loading State: row component with loading bubbles */
 export default function LoadingTokenDetail() {
   return (

src/components/Explore/TokenTable/FavoriteButton.tsx

@@ -15,8 +15,8 @@ const FavoriteButtonContent = styled.div`
 const StyledFavoriteButton = styled.button<{ active: boolean }>`
   padding: 0px 16px;
   border-radius: 12px;
-  background-color: ${({ theme, active }) => (active ? theme.accentAction : theme.none)};
-  border: 1px solid ${({ theme, active }) => (active ? theme.accentActive : theme.backgroundOutline)};
+  background-color: ${({ theme, active }) => (active ? theme.accentAction : theme.backgroundAction)};
+  border: none;
   color: ${({ theme }) => theme.textPrimary};
   font-size: 16px;
   font-weight: 600;

src/components/Explore/TokenTable/NetworkFilter.tsx

@@ -35,7 +35,7 @@ const InternalLinkMenuItem = styled(InternalMenuItem)`
   justify-content: space-between;
   text-decoration: none;
   cursor: pointer;
-  border-radius: 12px;
+  border-radius: 8px;
 
   :hover {
     background-color: ${({ theme }) => theme.hoverState};
@@ -43,7 +43,7 @@ const InternalLinkMenuItem = styled(InternalMenuItem)`
   }
 `
 const MenuTimeFlyout = styled.span`
-  min-width: 200px;
+  min-width: 240px;
   max-height: 350px;
   overflow: auto;
   background-color: ${({ theme }) => theme.backgroundSurface};
@@ -58,21 +58,14 @@ const MenuTimeFlyout = styled.span`
   top: 48px;
   z-index: 100;
   left: 0px;
-
-  ${({ theme }) => theme.mediaWidth.upToMedium`
-    bottom: unset;
-    right: 0;
-    left: unset;
-  `};
 `
 
 const StyledMenuButton = styled.button<{ open: boolean }>`
   width: 100%;
   height: 100%;
   color: ${({ theme, open }) => (open ? theme.blue200 : theme.textPrimary)};
-  background-color: transparent;
-  background-color: ${({ theme, open }) => (open ? theme.accentActionSoft : theme.none)};
-  border: 1px solid ${({ theme, open }) => (open ? theme.accentActiveSoft : theme.backgroundOutline)};
+  border: none;
+  background-color: ${({ theme, open }) => (open ? theme.accentActionSoft : theme.backgroundAction)};
   margin: 0;
   padding: 6px 12px 6px 12px;
   border-radius: 12px;
@@ -80,13 +73,14 @@ const StyledMenuButton = styled.button<{ open: boolean }>`
   line-height: 24px;
   font-weight: 400;
 
-  :hover,
-  :focus {
+  :hover {
     cursor: pointer;
     outline: none;
-    background-color: ${({ theme, open }) => !open && theme.backgroundContainer};
+    background-color: ${({ theme, open }) => (open ? theme.accentActionSoft : theme.backgroundContainer)};
+  }
+  :focus {
+    background-color: ${({ theme, open }) => (open ? theme.accentActionSoft : theme.backgroundAction)};
   }
-
   svg {
     margin-top: 2px;
   }

src/components/Explore/TokenTable/SearchBar.tsx

@@ -16,12 +16,12 @@ const SearchInput = styled.input<{ expanded: boolean }>`
   background: no-repeat scroll 7px 7px;
   background-image: ${({ expanded }) => !expanded && `url(${searchIcon})`};
   background-size: 20px 20px;
-  background-position: 11px center;
+  background-position: 14px center;
   background-color: ${({ theme }) => theme.none};
   border-radius: 12px;
   border: 1px solid ${({ theme }) => theme.backgroundOutline};
   height: 100%;
-  width: ${({ expanded }) => (expanded ? '100%' : '44px')};
+  width: ${({ expanded }) => (expanded ? '100%' : '52px')};
   font-size: 16px;
   padding-left: 18px;
   color: ${({ theme }) => theme.textPrimary};
@@ -38,7 +38,7 @@ const SearchInput = styled.input<{ expanded: boolean }>`
     border: none;
   }
   ::placeholder {
-    color: ${({ expanded, theme }) => expanded && theme.textTertiary};
+    color: ${({ expanded, theme }) => (expanded ? theme.textTertiary : theme.none)};
   }
   ::-webkit-search-cancel-button {
     -webkit-appearance: none;

src/components/Explore/TokenTable/TimeSelector.tsx

@@ -7,7 +7,7 @@ import { useModalIsOpen, useToggleModal } from 'state/application/hooks'
 import { ApplicationModal } from 'state/application/reducer'
 import styled, { useTheme } from 'styled-components/macro'
 
-import { MOBILE_MEDIA_BREAKPOINT } from '../constants'
+import { MOBILE_MEDIA_BREAKPOINT, SMALL_MEDIA_BREAKPOINT } from '../constants'
 import { filterTimeAtom } from '../state'
 
 export const TIME_DISPLAYS: { [key: string]: string } = {
@@ -18,13 +18,13 @@ export const TIME_DISPLAYS: { [key: string]: string } = {
   year: '1Y',
 }
 
-const TIMES = Object.values(TimePeriod)
+const TIMES = [TimePeriod.hour, TimePeriod.day, TimePeriod.week, TimePeriod.month, TimePeriod.year]
 
 const InternalMenuItem = styled.div`
   flex: 1;
   padding: 8px;
   color: ${({ theme }) => theme.textPrimary};
-  border-radius: 12px;
+  border-radius: 8px;
 
   :hover {
     cursor: pointer;
@@ -47,7 +47,7 @@ const InternalLinkMenuItem = styled(InternalMenuItem)`
   }
 `
 const MenuTimeFlyout = styled.span`
-  min-width: 200px;
+  min-width: 240px;
   max-height: 300px;
   overflow: auto;
   background-color: ${({ theme }) => theme.backgroundSurface};
@@ -62,22 +62,20 @@ const MenuTimeFlyout = styled.span`
   top: 48px;
   z-index: 100;
   left: 0px;
-  ${({ theme }) => theme.mediaWidth.upToMedium`
-    bottom: unset;
-    right: 0;
+
+  @media only screen and (max-width: ${SMALL_MEDIA_BREAKPOINT}) {
+    right: 0px;
     left: unset;
-  `};
+  }
 `
 
 const StyledMenuButton = styled.button<{ open: boolean }>`
   width: 100%;
   height: 100%;
   border: none;
-  background-color: transparent;
   color: ${({ theme, open }) => (open ? theme.blue200 : theme.textPrimary)};
   margin: 0;
-  background-color: ${({ theme, open }) => (open ? theme.accentActionSoft : theme.none)};
-  border: 1px solid ${({ theme, open }) => (open ? theme.accentActiveSoft : theme.backgroundOutline)};
+  background-color: ${({ theme, open }) => (open ? theme.accentActionSoft : theme.backgroundAction)};
   padding: 6px 12px 6px 12px;
   border-radius: 12px;
   font-size: 16px;
@@ -87,9 +85,11 @@ const StyledMenuButton = styled.button<{ open: boolean }>`
   :hover {
     cursor: pointer;
     outline: none;
-    background-color: ${({ theme, open }) => !open && theme.backgroundContainer};
+    background-color: ${({ theme, open }) => (open ? theme.accentActionSoft : theme.backgroundContainer)};
+  }
+  :focus {
+    background-color: ${({ theme, open }) => (open ? theme.accentActionSoft : theme.backgroundAction)};
   }
-
   svg {
     margin-top: 2px;
   }

src/components/Explore/TokenTable/TokenRow.tsx

@@ -132,7 +132,7 @@ const StyledHeaderRow = styled(StyledTokenRow)`
   width: 100%;
 
   &:hover {
-    background-color: ${({ theme }) => theme.backgroundSurface};
+    background-color: ${({ theme }) => theme.none};
   }
 
   @media only screen and (max-width: ${MAX_WIDTH_MEDIA_BREAKPOINT}) {
@@ -163,6 +163,7 @@ const DataCell = styled(Cell)<{ sortable: boolean }>`
   }
 `
 const MarketCapCell = styled(DataCell)`
+  padding-right: 8px;
   @media only screen and (max-width: ${MEDIUM_MEDIA_BREAKPOINT}) {
     display: none;
   }
@@ -172,13 +173,12 @@ const NameCell = styled(Cell)`
   padding-left: 8px;
   min-width: 200px;
   gap: 8px;
-
-  @media only screen and (max-width: ${MOBILE_MEDIA_BREAKPOINT}) {
+`
+const PriceCell = styled(DataCell)`
   padding-right: 8px;
-  }
 `
-const PriceCell = styled(DataCell)``
 const PercentChangeCell = styled(DataCell)`
+  padding-right: 8px;
   @media only screen and (max-width: ${MOBILE_MEDIA_BREAKPOINT}) {
     display: none;
   }
@@ -212,7 +212,6 @@ const HeaderCellWrapper = styled.span<{ onClick?: () => void }>`
   display: flex;
   height: 100%;
   justify-content: flex-end;
-  padding-right: 8px;
   width: 100%;
 `
 const SparkLineCell = styled(Cell)`
@@ -266,6 +265,7 @@ const TokenSymbol = styled(Cell)`
   }
 `
 const VolumeCell = styled(DataCell)`
+  padding-right: 8px;
   @media only screen and (max-width: ${LARGE_MEDIA_BREAKPOINT}) {
     display: none;
   }
@@ -381,7 +381,7 @@ export function HeaderRow() {
       address={null}
       header={true}
       favorited={null}
-      listNumber={null}
+      listNumber="#"
       tokenInfo={<Trans>Token Name</Trans>}
       price={<HeaderCell category={Category.price} sortable />}
       percentChange={<HeaderCell category={Category.percentChange} sortable />}
@@ -483,7 +483,7 @@ export default function LoadedRow({
               toggleFavorite()
             }}
           >
-            <Heart size={15} color={heartColor} fill={heartColor} />
+            <Heart size={18} color={heartColor} fill={heartColor} />
           </ClickFavorited>
         }
         listNumber={tokenListIndex + 1}

src/components/NumericalInput/index.tsx

+import { Phase0Variant, usePhase0Flag } from 'featureFlags/flags/phase0'
 import React from 'react'
 import styled from 'styled-components/macro'
 
 import { escapeRegExp } from '../../utils'
 
-const StyledInput = styled.input<{ error?: boolean; fontSize?: string; align?: string }>`
+const StyledInput = styled.input<{ error?: boolean; fontSize?: string; align?: string; phase0Flag: boolean }>`
   color: ${({ error, theme }) => (error ? theme.deprecated_red1 : theme.deprecated_text1)};
   width: 0;
   position: relative;
-  font-weight: 500;
+  font-weight: ${({ phase0Flag }) => (phase0Flag ? 400 : 500)};
   outline: none;
   border: none;
   flex: 1 1 auto;
-  background-color: ${({ theme }) => theme.deprecated_bg1};
+  background-color: ${({ theme, phase0Flag }) => (phase0Flag ? theme.none : theme.deprecated_bg1)};
   font-size: ${({ fontSize }) => fontSize ?? '28px'};
   text-align: ${({ align }) => align && align};
   white-space: nowrap;
@@ -35,7 +36,7 @@ const StyledInput = styled.input<{ error?: boolean; fontSize?: string; align?: s
   }
 
   ::placeholder {
-    color: ${({ theme }) => theme.deprecated_text4};
+    color: ${({ theme, phase0Flag }) => (phase0Flag ? theme.textSecondary : theme.deprecated_text4)};
   }
 `
 
@@ -55,6 +56,8 @@ export const Input = React.memo(function InnerInput({
   align?: 'right' | 'left'
   prependSymbol?: string | undefined
 } & Omit<React.HTMLProps<HTMLInputElement>, 'ref' | 'onChange' | 'as'>) {
+  const phase0Flag = usePhase0Flag()
+  const phase0FlagEnabled = phase0Flag === Phase0Variant.Enabled
   const enforcer = (nextUserInput: string) => {
     if (nextUserInput === '' || inputRegex.test(escapeRegExp(nextUserInput))) {
       onUserInput(nextUserInput)
@@ -65,6 +68,7 @@ export const Input = React.memo(function InnerInput({
     <StyledInput
       {...rest}
       value={prependSymbol && value ? prependSymbol + value : value}
+      phase0Flag={phase0FlagEnabled}
       onChange={(event) => {
         if (prependSymbol) {
           const value = event.target.value
@@ -87,7 +91,7 @@ export const Input = React.memo(function InnerInput({
       // text-specific options
       type="text"
       pattern="^[0-9]*[.,]?[0-9]*$"
-      placeholder={placeholder || '0.0'}
+      placeholder={placeholder || (phase0FlagEnabled ? '0' : '0.0')}
       minLength={1}
       maxLength={79}
       spellCheck="false"

src/components/QuestionHelper/index.tsx

+import { Phase0Variant, usePhase0Flag } from 'featureFlags/flags/phase0'
 import { ReactNode, useCallback, useState } from 'react'
+import { HelpCircle } from 'react-feather'
 import styled from 'styled-components/macro'
 
 import Tooltip from '../Tooltip'
 
-const QuestionWrapper = styled.div`
+const QuestionWrapper = styled.div<{ phase0Flag: boolean }>`
   display: flex;
   align-items: center;
   justify-content: center;
@@ -16,8 +18,8 @@ const QuestionWrapper = styled.div`
   cursor: default;
   border-radius: 36px;
   font-size: 12px;
-  background-color: ${({ theme }) => theme.deprecated_bg2};
-  color: ${({ theme }) => theme.deprecated_text2};
+  border-radius: ${({ phase0Flag }) => phase0Flag && '12px'};
+  color: ${({ theme, phase0Flag }) => !phase0Flag && theme.deprecated_text2};
 
   :hover,
   :focus {
@@ -25,8 +27,12 @@ const QuestionWrapper = styled.div`
   }
 `
 
-const QuestionMark = styled.span`
+const QuestionMark = styled.span<{ phase0Flag?: boolean }>`
   font-size: 14px;
+  margin-left: ${({ phase0Flag }) => phase0Flag && '8px'};
+  align-items: ${({ phase0Flag }) => phase0Flag && 'center'};
+  color: ${({ theme, phase0Flag }) => phase0Flag && theme.textSecondary};
+  margin-top: ${({ phase0Flag }) => phase0Flag && '2.5px'};
 `
 
 export default function QuestionHelper({ text }: { text: ReactNode; size?: number }) {
@@ -34,12 +40,15 @@ export default function QuestionHelper({ text }: { text: ReactNode; size?: numbe
 
   const open = useCallback(() => setShow(true), [setShow])
   const close = useCallback(() => setShow(false), [setShow])
-
+  const phase0Flag = usePhase0Flag()
+  const phase0FlagEnabled = phase0Flag === Phase0Variant.Enabled
   return (
     <span style={{ marginLeft: 4, display: 'flex', alignItems: 'center' }}>
       <Tooltip text={text} show={show}>
-        <QuestionWrapper onClick={open} onMouseEnter={open} onMouseLeave={close}>
-          <QuestionMark>?</QuestionMark>
+        <QuestionWrapper onClick={open} onMouseEnter={open} onMouseLeave={close} phase0Flag={phase0FlagEnabled}>
+          <QuestionMark phase0Flag={phase0FlagEnabled}>
+            {phase0FlagEnabled ? <HelpCircle size={16}></HelpCircle> : '?'}
+          </QuestionMark>
         </QuestionWrapper>
       </Tooltip>
     </span>

src/components/Settings/index.tsx

@@ -3,6 +3,7 @@ import { t, Trans } from '@lingui/macro'
 import { Percent } from '@uniswap/sdk-core'
 import { useWeb3React } from '@web3-react/core'
 import { sendEvent } from 'components/analytics'
+import { Phase0Variant, usePhase0Flag } from 'featureFlags/flags/phase0'
 import { isSupportedChainId } from 'lib/hooks/routing/clientSideSmartOrderRouter'
 import { useContext, useRef, useState } from 'react'
 import { Settings, X } from 'react-feather'
@@ -22,16 +23,16 @@ import { RowBetween, RowFixed } from '../Row'
 import Toggle from '../Toggle'
 import TransactionSettings from '../TransactionSettings'
 
-const StyledMenuIcon = styled(Settings)`
+const StyledMenuIcon = styled(Settings)<{ phase0Flag: boolean }>`
   height: 20px;
   width: 20px;
 
   > * {
-    stroke: ${({ theme }) => theme.deprecated_text1};
+    stroke: ${({ theme, phase0Flag }) => (phase0Flag ? theme.textSecondary : theme.deprecated_text1)};
   }
 `
 
-const StyledCloseIcon = styled(X)`
+const StyledCloseIcon = styled(X)<{ phase0Flag: boolean }>`
   height: 20px;
   width: 20px;
   :hover {
@@ -39,7 +40,7 @@ const StyledCloseIcon = styled(X)`
   }
 
   > * {
-    stroke: ${({ theme }) => theme.deprecated_text1};
+    stroke: ${({ theme, phase0Flag }) => (phase0Flag ? theme.textSecondary : theme.deprecated_text1)};
   }
 `
 
@@ -82,10 +83,10 @@ const StyledMenu = styled.div`
   text-align: left;
 `
 
-const MenuFlyout = styled.span`
+const MenuFlyout = styled.span<{ phase0Flag: boolean }>`
   min-width: 20.125rem;
-  background-color: ${({ theme }) => theme.deprecated_bg2};
-  border: 1px solid ${({ theme }) => theme.deprecated_bg3};
+  background-color: ${({ theme, phase0Flag }) => (phase0Flag ? theme.backgroundSurface : theme.deprecated_bg2)};
+  border: 1px solid ${({ theme, phase0Flag }) => (phase0Flag ? theme.backgroundOutline : theme.deprecated_bg3)};
   box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.01), 0px 4px 8px rgba(0, 0, 0, 0.04), 0px 16px 24px rgba(0, 0, 0, 0.04),
     0px 24px 32px rgba(0, 0, 0, 0.01);
   border-radius: 12px;
@@ -96,6 +97,7 @@ const MenuFlyout = styled.span`
   top: 2rem;
   right: 0rem;
   z-index: 100;
+  color: ${({ theme, phase0Flag }) => phase0Flag && theme.textPrimary};
 
   ${({ theme }) => theme.mediaWidth.upToMedium`
     min-width: 18.125rem;
@@ -121,6 +123,8 @@ const ModalContentWrapper = styled.div`
 
 export default function SettingsTab({ placeholderSlippage }: { placeholderSlippage: Percent }) {
   const { chainId } = useWeb3React()
+  const phase0Flag = usePhase0Flag()
+  const phase0FlagEnabled = phase0Flag === Phase0Variant.Enabled
 
   const node = useRef<HTMLDivElement>()
   const open = useModalIsOpen(ApplicationModal.SETTINGS)
@@ -148,7 +152,7 @@ export default function SettingsTab({ placeholderSlippage }: { placeholderSlippa
               <Text fontWeight={500} fontSize={20}>
                 <Trans>Are you sure?</Trans>
               </Text>
-              <StyledCloseIcon onClick={() => setShowConfirmation(false)} />
+              <StyledCloseIcon onClick={() => setShowConfirmation(false)} phase0Flag={phase0FlagEnabled} />
             </RowBetween>
             <Break />
             <AutoColumn gap="lg" style={{ padding: '0 2rem' }}>
@@ -186,7 +190,7 @@ export default function SettingsTab({ placeholderSlippage }: { placeholderSlippa
         id="open-settings-dialog-button"
         aria-label={t`Transaction Settings`}
       >
-        <StyledMenuIcon />
+        <StyledMenuIcon phase0Flag={phase0FlagEnabled} />
         {expertMode ? (
           <EmojiWrapper>
             <span role="img" aria-label="wizard-icon">
@@ -196,10 +200,10 @@ export default function SettingsTab({ placeholderSlippage }: { placeholderSlippa
         ) : null}
       </StyledMenuButton>
       {open && (
-        <MenuFlyout>
+        <MenuFlyout phase0Flag={phase0FlagEnabled}>
           <AutoColumn gap="md" style={{ padding: '1rem' }}>
             <Text fontWeight={600} fontSize={14}>
-              <Trans>Transaction Settings</Trans>
+              <Trans>{phase0FlagEnabled ? 'Settings' : 'Transaction Settings'}</Trans>
             </Text>
             <TransactionSettings placeholderSlippage={placeholderSlippage} />
             <Text fontWeight={600} fontSize={14}>

src/components/Toggle/index.tsx

+import { Phase0Variant, usePhase0Flag } from 'featureFlags/flags/phase0'
 import { darken } from 'polished'
 import { useState } from 'react'
 import styled, { keyframes } from 'styled-components/macro'
 
-const Wrapper = styled.button<{ isActive?: boolean; activeElement?: boolean }>`
+const Wrapper = styled.button<{ isActive?: boolean; activeElement?: boolean; phase0Flag: boolean }>`
   align-items: center;
-  background: ${({ theme }) => theme.deprecated_bg1};
+  background: ${({ isActive, theme, phase0Flag }) =>
+    phase0Flag && isActive ? theme.accentActionSoft : theme.deprecated_bg1};
   border: none;
   border-radius: 20px;
   cursor: pointer;
@@ -71,6 +73,8 @@ interface ToggleProps {
 
 export default function Toggle({ id, bgColor, isActive, toggle }: ToggleProps) {
   const [isInitialToggleLoad, setIsInitialToggleLoad] = useState(true)
+  const phase0Flag = usePhase0Flag()
+  const phase0FlagEnabled = phase0Flag === Phase0Variant.Enabled
 
   const switchToggle = () => {
     toggle()
@@ -78,7 +82,7 @@ export default function Toggle({ id, bgColor, isActive, toggle }: ToggleProps) {
   }
 
   return (
-    <Wrapper id={id} isActive={isActive} onClick={switchToggle}>
+    <Wrapper id={id} isActive={isActive} onClick={switchToggle} phase0Flag={phase0FlagEnabled}>
       <ToggleElement isActive={isActive} bgColor={bgColor} isInitialToggleLoad={isInitialToggleLoad} />
     </Wrapper>
   )

src/components/TransactionSettings/index.tsx

@@ -3,6 +3,7 @@ import { Percent } from '@uniswap/sdk-core'
 import { useWeb3React } from '@web3-react/core'
 import { L2_CHAIN_IDS } from 'constants/chains'
 import { DEFAULT_DEADLINE_FROM_NOW } from 'constants/misc'
+import { Phase0Variant, usePhase0Flag } from 'featureFlags/flags/phase0'
 import ms from 'ms.macro'
 import { darken } from 'polished'
 import { useContext, useState } from 'react'
@@ -41,8 +42,9 @@ const FancyButton = styled.button`
   }
 `
 
-const Option = styled(FancyButton)<{ active: boolean }>`
+const Option = styled(FancyButton)<{ active: boolean; phase0Flag: boolean }>`
   margin-right: 8px;
+  border-radius: ${({ phase0Flag }) => phase0Flag && '12px'};
   :hover {
     cursor: pointer;
   }
@@ -50,9 +52,10 @@ const Option = styled(FancyButton)<{ active: boolean }>`
   color: ${({ active, theme }) => (active ? theme.deprecated_white : theme.deprecated_text1)};
 `
 
-const Input = styled.input`
+const Input = styled.input<{ phase0Flag: boolean }>`
   background: ${({ theme }) => theme.deprecated_bg1};
   font-size: 16px;
+  border-radius: ${({ phase0Flag }) => phase0Flag && '12px'};
   width: auto;
   outline: none;
   &::-webkit-outer-spin-button,
@@ -63,10 +66,11 @@ const Input = styled.input`
   text-align: right;
 `
 
-const OptionCustom = styled(FancyButton)<{ active?: boolean; warning?: boolean }>`
+const OptionCustom = styled(FancyButton)<{ active?: boolean; warning?: boolean; phase0Flag: boolean }>`
   height: 2rem;
   position: relative;
   padding: 0 0.75rem;
+  border-radius: ${({ phase0Flag }) => phase0Flag && '12px'};
   flex: 1;
   border: ${({ theme, active, warning }) =>
     active
@@ -101,6 +105,8 @@ const THREE_DAYS_IN_SECONDS = ms`3 days` / 1000
 export default function TransactionSettings({ placeholderSlippage }: TransactionSettingsProps) {
   const { chainId } = useWeb3React()
   const theme = useContext(ThemeContext)
+  const phase0Flag = usePhase0Flag()
+  const phase0FlagEnabled = phase0Flag === Phase0Variant.Enabled
 
   const userSlippageTolerance = useUserSlippageTolerance()
   const setUserSlippageTolerance = useSetUserSlippageTolerance()
@@ -176,6 +182,7 @@ export default function TransactionSettings({ placeholderSlippage }: Transaction
         </RowFixed>
         <RowBetween>
           <Option
+            phase0Flag={phase0FlagEnabled}
             onClick={() => {
               parseSlippageInput('')
             }}
@@ -183,7 +190,12 @@ export default function TransactionSettings({ placeholderSlippage }: Transaction
           >
             <Trans>Auto</Trans>
           </Option>
-          <OptionCustom active={userSlippageTolerance !== 'auto'} warning={!!slippageError} tabIndex={-1}>
+          <OptionCustom
+            phase0Flag={phase0FlagEnabled}
+            active={userSlippageTolerance !== 'auto'}
+            warning={!!slippageError}
+            tabIndex={-1}
+          >
             <RowBetween>
               {tooLow || tooHigh ? (
                 <SlippageEmojiContainer>
@@ -193,6 +205,7 @@ export default function TransactionSettings({ placeholderSlippage }: Transaction
                 </SlippageEmojiContainer>
               ) : null}
               <Input
+                phase0Flag={phase0FlagEnabled}
                 placeholder={placeholderSlippage.toFixed(2)}
                 value={
                   slippageInput.length > 0
@@ -242,8 +255,14 @@ export default function TransactionSettings({ placeholderSlippage }: Transaction
             />
           </RowFixed>
           <RowFixed>
-            <OptionCustom style={{ width: '80px' }} warning={!!deadlineError} tabIndex={-1}>
+            <OptionCustom
+              style={{ width: '80px' }}
+              warning={!!deadlineError}
+              tabIndex={-1}
+              phase0Flag={phase0FlagEnabled}
+            >
               <Input
+                phase0Flag={phase0FlagEnabled}
                 placeholder={(DEFAULT_DEADLINE_FROM_NOW / 60).toString()}
                 value={
                   deadlineInput.length > 0

src/components/swap/AdvancedSwapDetails.tsx

@@ -4,6 +4,7 @@ import { useWeb3React } from '@web3-react/core'
 import Card from 'components/Card'
 import { LoadingRows } from 'components/Loader/styled'
 import { SUPPORTED_GAS_ESTIMATE_CHAIN_IDS } from 'constants/chains'
+import { Phase0Variant, usePhase0Flag } from 'featureFlags/flags/phase0'
 import useNativeCurrency from 'lib/hooks/useNativeCurrency'
 import { useContext, useMemo } from 'react'
 import { InterfaceTrade } from 'state/routing/types'
@@ -54,6 +55,8 @@ export function AdvancedSwapDetails({
   const theme = useContext(ThemeContext)
   const { chainId } = useWeb3React()
   const nativeCurrency = useNativeCurrency()
+  const phase0Flag = usePhase0Flag()
+  const phase0FlagEnabled = phase0Flag === Phase0Variant.Enabled
 
   const { expectedOutputAmount, priceImpact } = useMemo(() => {
     return {
@@ -106,7 +109,7 @@ export function AdvancedSwapDetails({
             </ThemedText.DeprecatedBlack>
           </TextWithLoadingPlaceholder>
         </RowBetween>
-        <Separator />
+        <Separator phase0Flag={phase0FlagEnabled} />
         <RowBetween>
           <RowFixed style={{ marginRight: '20px' }}>
             <MouseoverTooltip

src/components/swap/SwapDetailsDropdown.tsx

@@ -10,7 +10,7 @@ import { LoadingOpacityContainer } from 'components/Loader/styled'
 import Row, { RowBetween, RowFixed } from 'components/Row'
 import { MouseoverTooltipContent } from 'components/Tooltip'
 import { SUPPORTED_GAS_ESTIMATE_CHAIN_IDS } from 'constants/chains'
-import { darken } from 'polished'
+import { Phase0Variant, usePhase0Flag } from 'featureFlags/flags/phase0'
 import { useState } from 'react'
 import { ChevronDown, Info } from 'react-feather'
 import { InterfaceTrade } from 'state/routing/types'
@@ -35,23 +35,20 @@ const StyledInfoIcon = styled(Info)`
   color: ${({ theme }) => theme.deprecated_text3};
 `
 
-const StyledCard = styled(OutlineCard)`
+const StyledCard = styled(OutlineCard)<{ phase0Flag: boolean }>`
   padding: 12px;
-  border: 1px solid ${({ theme }) => theme.deprecated_bg2};
+  border: 1px solid ${({ theme, phase0Flag }) => (phase0Flag ? theme.backgroundOutline : theme.deprecated_bg3)};
 `
 
-const StyledHeaderRow = styled(RowBetween)<{ disabled: boolean; open: boolean }>`
-  padding: 4px 8px;
-  border-radius: 12px;
-  background-color: ${({ open, theme }) => (open ? theme.deprecated_bg1 : 'transparent')};
+const StyledHeaderRow = styled(RowBetween)<{ disabled: boolean; open: boolean; phase0Flag: boolean }>`
+  padding: ${({ phase0Flag }) => (phase0Flag ? '8px 0px 0px 0px' : '4px 8px')};
+  background-color: ${({ open, theme, phase0Flag }) => (open && !phase0Flag ? theme.deprecated_bg1 : theme.none)};
   align-items: center;
+  border-top: 1px solid ${({ theme, phase0Flag }) => (phase0Flag ? theme.backgroundOutline : theme.none)};
+  margin-top: ${({ phase0Flag }) => phase0Flag && '8px'};
   cursor: ${({ disabled }) => (disabled ? 'initial' : 'pointer')};
   min-height: 40px;
-
-  :hover {
-    background-color: ${({ theme, disabled }) =>
-      disabled ? theme.deprecated_bg1 : darken(0.015, theme.deprecated_bg1)};
-  }
+  border-radius: ${({ phase0Flag }) => !phase0Flag && '12px'};
 `
 
 const RotatingArrow = styled(ChevronDown)<{ open?: boolean }>`
@@ -131,9 +128,11 @@ export default function SwapDetailsDropdown({
   const theme = useTheme()
   const { chainId } = useWeb3React()
   const [showDetails, setShowDetails] = useState(false)
+  const phase0Flag = usePhase0Flag()
+  const phase0FlagEnabled = phase0Flag === Phase0Variant.Enabled
 
   return (
-    <Wrapper>
+    <Wrapper style={{ marginTop: '8px' }}>
       <AutoColumn gap={'8px'} style={{ width: '100%', marginBottom: '-8px' }}>
         <TraceEvent
           events={[Event.onClick]}
@@ -141,7 +140,12 @@ export default function SwapDetailsDropdown({
           element={ElementName.SWAP_DETAILS_DROPDOWN}
           shouldLogImpression={!showDetails}
         >
-          <StyledHeaderRow onClick={() => setShowDetails(!showDetails)} disabled={!trade} open={showDetails}>
+          <StyledHeaderRow
+            phase0Flag={phase0FlagEnabled}
+            onClick={() => setShowDetails(!showDetails)}
+            disabled={!trade}
+            open={showDetails}
+          >
             <RowFixed style={{ position: 'relative' }}>
               {loading || syncing ? (
                 <StyledPolling>
@@ -208,7 +212,7 @@ export default function SwapDetailsDropdown({
         <AnimatedDropdown open={showDetails}>
           <AutoColumn gap={'8px'} style={{ padding: '0', paddingBottom: '8px' }}>
             {trade ? (
-              <StyledCard>
+              <StyledCard phase0Flag={phase0FlagEnabled}>
                 <AdvancedSwapDetails trade={trade} allowedSlippage={allowedSlippage} syncing={syncing} />
               </StyledCard>
             ) : null}

src/components/swap/SwapModalHeader.tsx

@@ -4,6 +4,7 @@ import { Price } from '@uniswap/sdk-core'
 import { sendAnalyticsEvent } from 'components/AmplitudeAnalytics'
 import { EventName, SWAP_PRICE_UPDATE_USER_RESPONSE } from 'components/AmplitudeAnalytics/constants'
 import { formatPercentInBasisPointsNumber } from 'components/AmplitudeAnalytics/utils'
+import { Phase0Variant, usePhase0Flag } from 'featureFlags/flags/phase0'
 import { useContext, useEffect, useState } from 'react'
 import { AlertTriangle, ArrowDown } from 'react-feather'
 import { Text } from 'rebass'
@@ -24,11 +25,11 @@ import TradePrice from '../swap/TradePrice'
 import { AdvancedSwapDetails } from './AdvancedSwapDetails'
 import { SwapShowAcceptChanges, TruncatedText } from './styleds'
 
-const ArrowWrapper = styled.div`
+const ArrowWrapper = styled.div<{ phase0Flag: boolean }>`
   padding: 4px;
   border-radius: 12px;
-  height: 32px;
-  width: 32px;
+  height: ${({ phase0Flag }) => (phase0Flag ? '40px' : '32px')};
+  width: ${({ phase0Flag }) => (phase0Flag ? '40px' : '32px')};
   position: relative;
   margin-top: -18px;
   margin-bottom: -18px;
@@ -36,9 +37,9 @@ const ArrowWrapper = styled.div`
   display: flex;
   justify-content: center;
   align-items: center;
-  background-color: ${({ theme }) => theme.deprecated_bg1};
+  background-color: ${({ theme, phase0Flag }) => (phase0Flag ? theme.backgroundSurface : theme.deprecated_bg1)};
   border: 4px solid;
-  border-color: ${({ theme }) => theme.deprecated_bg0};
+  border-color: ${({ theme, phase0Flag }) => (phase0Flag ? theme.backgroundContainer : theme.deprecated_bg0)};
   z-index: 2;
 `
 
@@ -84,6 +85,8 @@ export default function SwapModalHeader({
   onAcceptChanges: () => void
 }) {
   const theme = useContext(ThemeContext)
+  const phase0Flag = usePhase0Flag()
+  const phase0FlagEnabled = phase0Flag === Phase0Variant.Enabled
 
   const [showInverted, setShowInverted] = useState<boolean>(false)
   const [lastExecutionPrice, setLastExecutionPrice] = useState(trade.executionPrice)
@@ -134,8 +137,8 @@ export default function SwapModalHeader({
           </RowBetween>
         </AutoColumn>
       </LightCard>
-      <ArrowWrapper>
-        <ArrowDown size="16" color={theme.deprecated_text2} />
+      <ArrowWrapper phase0Flag={phase0FlagEnabled}>
+        <ArrowDown size="16" color={phase0FlagEnabled ? theme.textPrimary : theme.deprecated_text2} />
       </ArrowWrapper>
       <LightCard padding="0.75rem 1rem" style={{ marginBottom: '0.25rem' }}>
         <AutoColumn gap={'8px'}>

src/components/swap/SwapRoute.tsx

@@ -12,6 +12,7 @@ import { LoadingRows } from 'components/Loader/styled'
 import RoutingDiagram from 'components/RoutingDiagram/RoutingDiagram'
 import { AutoRow, RowBetween } from 'components/Row'
 import { SUPPORTED_GAS_ESTIMATE_CHAIN_IDS } from 'constants/chains'
+import { Phase0Variant, usePhase0Flag } from 'featureFlags/flags/phase0'
 import useAutoRouterSupported from 'hooks/useAutoRouterSupported'
 import { memo, useState } from 'react'
 import { Plus } from 'react-feather'
@@ -22,10 +23,12 @@ import { Separator, ThemedText } from 'theme'
 
 import { AutoRouterLabel, AutoRouterLogo } from './RouterLabel'
 
-const Wrapper = styled(AutoColumn)<{ darkMode?: boolean; fixedOpen?: boolean }>`
+const Wrapper = styled(AutoColumn)<{ darkMode?: boolean; fixedOpen?: boolean; phase0Flag: boolean }>`
   padding: ${({ fixedOpen }) => (fixedOpen ? '12px' : '12px 8px 12px 12px')};
   border-radius: 16px;
-  border: 1px solid ${({ theme, fixedOpen }) => (fixedOpen ? 'transparent' : theme.deprecated_bg2)};
+  border: 1px solid
+    ${({ theme, fixedOpen, phase0Flag }) =>
+      fixedOpen ? 'transparent' : phase0Flag ? theme.backgroundOutline : theme.deprecated_bg2};
   cursor: pointer;
 `
 
@@ -53,6 +56,8 @@ export default memo(function SwapRoute({ trade, syncing, fixedOpen = false, ...r
   const routes = getTokenPath(trade)
   const [open, setOpen] = useState(false)
   const { chainId } = useWeb3React()
+  const phase0Flag = usePhase0Flag()
+  const phase0FlagEnabled = phase0Flag === Phase0Variant.Enabled
 
   const [darkMode] = useDarkModeManager()
 
@@ -63,7 +68,7 @@ export default memo(function SwapRoute({ trade, syncing, fixedOpen = false, ...r
     : undefined
 
   return (
-    <Wrapper {...rest} darkMode={darkMode} fixedOpen={fixedOpen}>
+    <Wrapper {...rest} darkMode={darkMode} fixedOpen={fixedOpen} phase0Flag={phase0FlagEnabled}>
       <TraceEvent
         events={[Event.onClick]}
         name={EventName.SWAP_AUTOROUTER_VISUALIZATION_EXPANDED}

src/components/swap/styleds.tsx

@@ -15,18 +15,20 @@ export const Wrapper = styled.div`
   padding: 8px;
 `
 
-export const ArrowWrapper = styled.div<{ clickable: boolean }>`
+export const ArrowWrapper = styled.div<{ clickable: boolean; phase0Flag: boolean }>`
   padding: 4px;
   border-radius: 12px;
-  height: 32px;
-  width: 32px;
+  height: ${({ phase0Flag }) => (phase0Flag ? '40px' : '32px')};
+  width: ${({ phase0Flag }) => (phase0Flag ? '40px' : '32px')};
   position: relative;
   margin-top: -14px;
-  margin-bottom: -14px;
+  margin-bottom: ${({ phase0Flag }) => (phase0Flag ? '-18px' : '-14px')};
   left: calc(50% - 16px);
   /* transform: rotate(90deg); */
-  background-color: ${({ theme }) => theme.deprecated_bg1};
-  border: 4px solid ${({ theme }) => theme.deprecated_bg0};
+  background-color: ${({ theme, phase0Flag }) => (phase0Flag ? theme.backgroundSurface : theme.deprecated_bg1)};
+  border: 4px solid;
+  border-color: ${({ theme, phase0Flag }) => (phase0Flag ? theme.backgroundContainer : theme.deprecated_bg0)};
+
   z-index: 2;
   ${({ clickable }) =>
     clickable

src/pages/AppBody.tsx

+import { Phase0Variant, usePhase0Flag } from 'featureFlags/flags/phase0'
 import React from 'react'
 import styled from 'styled-components/macro'
 import { Z_INDEX } from 'theme'
 
-export const BodyWrapper = styled.main<{ margin?: string; maxWidth?: string }>`
+export const BodyWrapper = styled.main<{ margin?: string; maxWidth?: string; phase0Flag?: boolean }>`
   position: relative;
   margin-top: ${({ margin }) => margin ?? '0px'};
-  max-width: ${({ maxWidth }) => maxWidth ?? '480px'};
+  max-width: ${({ maxWidth, phase0Flag }) => maxWidth ?? (phase0Flag ? '420px' : '480px')};
   width: 100%;
-  background: ${({ theme }) => theme.deprecated_bg0};
-  box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.01), 0px 4px 8px rgba(0, 0, 0, 0.04), 0px 16px 24px rgba(0, 0, 0, 0.04),
-    0px 24px 32px rgba(0, 0, 0, 0.01);
-  border-radius: 24px;
+  background: ${({ theme, phase0Flag }) => (phase0Flag ? theme.backgroundSurface : theme.deprecated_bg0)};
+  border-radius: ${({ phase0Flag }) => (phase0Flag ? '16px' : '24px')};
+  border: 1px solid ${({ theme, phase0Flag }) => (phase0Flag ? theme.backgroundOutline : theme.none)};
   margin-top: 1rem;
   margin-left: auto;
   margin-right: auto;
   z-index: ${Z_INDEX.deprecated_content};
+  font-feature-settings: ${({ phase0Flag }) => phase0Flag && "'ss02' off"};
+  box-shadow: ${({ phase0Flag }) =>
+    !phase0Flag &&
+    '0px 0px 1px rgba(0, 0, 0, 0.01), 0px 4px 8px rgba(0, 0, 0, 0.04), 0px 16px 24px rgba(0, 0, 0, 0.04), 0px 24px 32px rgba(0, 0, 0, 0.01)'};
 `
 
 /**
  * The styled container element that wraps the content of most pages and the tabs.
  */
 export default function AppBody({ children, ...rest }: { children: React.ReactNode }) {
-  return <BodyWrapper {...rest}>{children}</BodyWrapper>
+  const phase0Flag = usePhase0Flag()
+  const phase0FlagEnabled = phase0Flag === Phase0Variant.Enabled
+  return (
+    <BodyWrapper {...rest} phase0Flag={phase0FlagEnabled}>
+      {children}
+    </BodyWrapper>
+  )
 }

src/pages/Explore/index.tsx

@@ -31,7 +31,7 @@ const TitleContainer = styled.div`
 const FiltersContainer = styled.div`
   display: flex;
   gap: 8px;
-  height: 44px;
+  height: 40px;
 
   @media only screen and (max-width: ${MEDIUM_MEDIA_BREAKPOINT}) {
     order: 2;

src/theme/RadialGradientByChainUpdater.ts

 import { useWeb3React } from '@web3-react/core'
+import { BaseVariant } from 'featureFlags'
+import { usePhase0Flag } from 'featureFlags/flags/phase0'
 import { useEffect } from 'react'
 import { useDarkModeManager } from 'state/user/hooks'
 
@@ -29,6 +31,8 @@ const setBackground = (newValues: TargetBackgroundStyles) =>
 export default function RadialGradientByChainUpdater(): null {
   const { chainId } = useWeb3React()
   const [darkMode] = useDarkModeManager()
+  const phase0Flag = usePhase0Flag()
+  const phase0FlagEnabled = phase0Flag === BaseVariant.Enabled
   // manage background color
   useEffect(() => {
     if (!backgroundRadialGradientElement) {
@@ -39,40 +43,72 @@ export default function RadialGradientByChainUpdater(): null {
       case SupportedChainId.ARBITRUM_ONE:
       case SupportedChainId.ARBITRUM_RINKEBY:
         setBackground(backgroundResetStyles)
-        const arbitrumLightGradient = 'radial-gradient(150% 100% at 50% 0%, #CDE8FB 0%, #FCF3F9 50%, #FFFFFF 100%)'
-        const arbitrumDarkGradient = 'radial-gradient(150% 100% at 50% 0%, #0A294B 0%, #221E30 50%, #1F2128 100%)'
+        const arbitrumLightGradient = phase0FlagEnabled
+          ? 'radial-gradient(100% 100% at 50% 0%, rgba(205, 232, 251, 0.7) 0%, rgba(252, 243, 249, 0.6536) 49.48%, rgba(255, 255, 255, 0) 100%), #FFFFFF'
+          : 'radial-gradient(150% 100% at 50% 0%, #CDE8FB 0%, #FCF3F9 50%, #FFFFFF 100%)'
+        const arbitrumDarkGradient = phase0FlagEnabled
+          ? 'radial-gradient(100% 100% at 50% 0%, rgba(10, 41, 75, 0.7) 0%, rgba(34, 30, 48, 0.6536) 49.48%, rgba(31, 33, 40, 0) 100%), #0D0E0E'
+          : 'radial-gradient(150% 100% at 50% 0%, #0A294B 0%, #221E30 50%, #1F2128 100%)'
         backgroundRadialGradientElement.style.background = darkMode ? arbitrumDarkGradient : arbitrumLightGradient
         break
       case SupportedChainId.OPTIMISM:
       case SupportedChainId.OPTIMISTIC_KOVAN:
         setBackground(backgroundResetStyles)
-        const optimismLightGradient = 'radial-gradient(150% 100% at 50% 0%, #FFFBF2 2%, #FFF4F9 53%, #FFFFFF 100%)'
-        const optimismDarkGradient = 'radial-gradient(150% 100% at 50% 0%, #3E2E38 2%, #2C1F2D 53%, #1F2128 100%)'
+        const optimismLightGradient = phase0FlagEnabled
+          ? 'radial-gradient(100% 100% at 50% 0%, rgba(255, 251, 242, 0.8) 0%, rgba(255, 244, 249, 0.6958) 50.52%, rgba(255, 255, 255, 0) 100%), #FFFFFF'
+          : 'radial-gradient(150% 100% at 50% 0%, #FFFBF2 2%, #FFF4F9 53%, #FFFFFF 100%)'
+        const optimismDarkGradient = phase0FlagEnabled
+          ? 'radial-gradient(100% 100% at 50% 0%, rgba(62, 46, 56, 0.8) 0%, rgba(44, 31, 45, 0.6958) 50.52%, rgba(31, 33, 40, 0) 100%), #0D0E0E'
+          : 'radial-gradient(150% 100% at 50% 0%, #3E2E38 2%, #2C1F2D 53%, #1F2128 100%)'
         backgroundRadialGradientElement.style.background = darkMode ? optimismDarkGradient : optimismLightGradient
         break
       case SupportedChainId.POLYGON:
       case SupportedChainId.POLYGON_MUMBAI:
         setBackground(backgroundResetStyles)
-        const polygonLightGradient =
-          'radial-gradient(153.32% 100% at 47.26% 0%, rgba(130, 71, 229, 0.0864) 0%, rgba(0, 41, 255, 0.06) 48.19%, rgba(0, 41, 255, 0.012) 100%), #FFFFFF'
-        const polygonDarkGradient =
-          'radial-gradient(150.6% 98.22% at 48.06% 0%, rgba(130, 71, 229, 0.6) 0%, rgba(200, 168, 255, 0) 100%), #1F2128'
+        const polygonLightGradient = phase0FlagEnabled
+          ? 'radial-gradient(100% 100% at 50% 0%, rgba(130, 71, 229, 0.2) 0%, rgba(200, 168, 255, 0.05) 52.6%, rgba(0, 0, 0, 0) 100%), #FFFFFF'
+          : 'radial-gradient(153.32% 100% at 47.26% 0%, rgba(130, 71, 229, 0.0864) 0%, rgba(0, 41, 255, 0.06) 48.19%, rgba(0, 41, 255, 0.012) 100%), #FFFFFF'
+        const polygonDarkGradient = phase0FlagEnabled
+          ? 'radial-gradient(100% 100% at 50% 0%, rgba(130, 71, 229, 0.2) 0%, rgba(200, 168, 255, 0.05) 52.6%, rgba(0, 0, 0, 0) 100%), #0D0E0E'
+          : 'radial-gradient(150.6% 98.22% at 48.06% 0%, rgba(130, 71, 229, 0.6) 0%, rgba(200, 168, 255, 0) 100%), #1F2128'
         backgroundRadialGradientElement.style.background = darkMode ? polygonDarkGradient : polygonLightGradient
-        backgroundRadialGradientElement.style.backgroundBlendMode = darkMode ? 'overlay,normal' : 'multiply,normal'
+        backgroundRadialGradientElement.style.backgroundBlendMode = phase0FlagEnabled
+          ? 'none'
+          : darkMode
+          ? 'overlay,normal'
+          : 'multiply,normal'
         break
       case SupportedChainId.CELO:
       case SupportedChainId.CELO_ALFAJORES:
         setBackground(backgroundResetStyles)
-        const celoLightGradient = 'radial-gradient(150% 100% at 50% 0%,#35D07F35 0, #FBCC5C35 100%)'
-        const celoDarkGradient =
-          'radial-gradient(150% 100% at 50% 0%, rgb(2 80 47) 2%, rgb(12 41 28) 53%, rgb(31, 33, 40) 100%)'
+        const celoLightGradient = phase0FlagEnabled
+          ? 'radial-gradient(100% 100% at 50% 0%, rgba(186, 228, 210, 0.7) 0%, rgba(252, 243, 249, 0.6536) 49.48%, rgba(255, 255, 255, 0) 100%), #FFFFFF'
+          : 'radial-gradient(150% 100% at 50% 0%,#35D07F35 0, #FBCC5C35 100%)'
+        const celoDarkGradient = phase0FlagEnabled
+          ? 'radial-gradient(100% 100% at 50% 0%, rgba(20, 49, 37, 0.29) 0%, rgba(12, 31, 23, 0.6536) 49.48%, rgba(31, 33, 40, 0) 100%, rgba(31, 33, 40, 0) 100%), #0D0E0E'
+          : 'radial-gradient(150% 100% at 50% 0%, rgb(2 80 47) 2%, rgb(12 41 28) 53%, rgb(31, 33, 40) 100%)'
         backgroundRadialGradientElement.style.background = darkMode ? celoDarkGradient : celoLightGradient
-        backgroundRadialGradientElement.style.backgroundBlendMode = darkMode ? 'overlay,normal' : 'multiply,normal'
+        backgroundRadialGradientElement.style.backgroundBlendMode = phase0FlagEnabled
+          ? 'none'
+          : darkMode
+          ? 'overlay,normal'
+          : 'multiply,normal'
         break
       default:
         setBackground(initialStyles)
-        backgroundRadialGradientElement.style.background = ''
+        const defaultLightGradient = phase0FlagEnabled
+          ? 'radial-gradient(100% 100% at 50% 0%, rgba(255, 184, 226, 0.51) 0%, rgba(255, 255, 255, 0) 100%), #FFFFFF'
+          : 'radial-gradient(50% 50% at 50% 50%,#fc077d10 0,rgba(255,255,255,0) 100%)'
+        const defaultDarkGradient = phase0FlagEnabled
+          ? 'linear-gradient(180deg, #202738 0%, #070816 100%)'
+          : 'radial-gradient(50% 50% at 50% 50%,#fc077d10 0,rgba(255,255,255,0) 100%)'
+        backgroundRadialGradientElement.style.background = darkMode ? defaultDarkGradient : defaultLightGradient
+        backgroundRadialGradientElement.style.backgroundBlendMode = phase0FlagEnabled
+          ? 'none'
+          : darkMode
+          ? 'overlay,normal'
+          : 'multiply,normal'
     }
-  }, [darkMode, chainId])
+  }, [darkMode, chainId, phase0FlagEnabled])
   return null
 }

src/theme/colors.ts

@@ -87,73 +87,73 @@ export interface GlobalPalette {
 export const colors: GlobalPalette = {
   white: '#FFFFFF',
   black: '#000000',
-  gray50: '#F4F6FE',
-  gray100: '#DBE1F5',
-  gray200: '#C0C7DE',
+  gray50: '#F8F9FF',
+  gray100: '#DDE3F7',
+  gray200: '#B7BED4',
   gray300: '#99A1BD',
-  gray400: '#747D9C',
-  gray500: '#5F667D',
-  gray600: '#44495A',
-  gray700: '#272A35',
-  gray800: '#181B24',
-  gray900: '#070A15',
-  pink50: '#FFF2F7',
-  pink100: '#FFD7E3',
+  gray400: '#7C85A2',
+  gray500: '#5E6887',
+  gray600: '#404963',
+  gray700: '#293249',
+  gray800: '#141B2B',
+  gray900: '#0E111A',
+  pink50: '#F9ECF1',
+  pink100: '#FFD9E4',
   pink200: '#FBA4C0',
   pink300: '#FF6FA3',
-  pink400: '#EF368E',
+  pink400: '#FB118E',
   pink500: '#C41969',
   pink600: '#8C0F49',
   pink700: '#55072A',
   pink800: '#350318',
   pink900: '#2B000B',
   pinkVibrant: '#F51A70',
-  red50: '#FFF4EE',
-  red100: '#FFD9CE',
-  red200: '#FDA799',
-  red300: '#FF776D',
-  red400: '#FD4040',
-  red500: '#C52533',
+  red50: '#FAECEA',
+  red100: '#FED5CF',
+  red200: '#FEA79B',
+  red300: '#FD766B',
+  red400: '#FA2B39',
+  red500: '#C4292F',
   red600: '#891E20',
-  red700: '#530F10',
-  red800: '#350700',
-  red900: '#2C0000',
+  red700: '#530F0F',
+  red800: '#380A03',
+  red900: '#240800',
   redVibrant: '#F14544',
-  yellow50: '#FFF5E8',
-  yellow100: '#F8DEB6',
-  yellow200: '#F3B71E',
-  yellow300: '#DC910D',
-  yellow400: '#AE780C',
-  yellow500: '#8F5C0F',
-  yellow600: '#643F07',
-  yellow700: '#3F2208',
-  yellow800: '#26130A',
-  yellow900: '#110A00',
+  yellow50: '#F6F2D5',
+  yellow100: '#DBBC19',
+  yellow200: '#DBBC19',
+  yellow300: '#BB9F13',
+  yellow400: '#A08116',
+  yellow500: '#866311',
+  yellow600: '#5D4204',
+  yellow700: '#3E2B04',
+  yellow800: '#231902',
+  yellow900: '#180F02',
   yellowVibrant: '#FAF40A',
   // TODO: add gold 50-900
   gold200: '#EEB317',
   goldVibrant: '#FEB239',
-  green50: '#EAFAED',
-  green100: '#BDECC8',
-  green200: '#75D090',
-  green300: '#35AD63',
-  green400: '#1A9550',
-  green500: '#07773D',
+  green50: '#E3F3E6',
+  green100: '#BFEECA',
+  green200: '#76D191',
+  green300: '#40B66B',
+  green400: '#209853',
+  green500: '#0B783E',
   green600: '#0C522A',
   green700: '#053117',
-  green800: '#031C0A',
-  green900: '#020E04',
+  green800: '#091F10',
+  green900: '#09130B',
   greenVibrant: '#5CFE9D',
-  blue50: '#F4F6FF',
-  blue100: '#DBDFFF',
-  blue200: '#AABAFF',
-  blue300: '#829BFF',
-  blue400: '#407CF8',
-  blue500: '#1869D8',
+  blue50: '#EDEFF8',
+  blue100: '#DEE1FF',
+  blue200: '#ADBCFF',
+  blue300: '#869EFF',
+  blue400: '#4C82FB',
+  blue500: '#1267D6',
   blue600: '#1D4294',
   blue700: '#09265E',
-  blue800: '#06163B',
-  blue900: '#00072F',
+  blue800: '#0B193F',
+  blue900: '#040E34',
   blueVibrant: '#587BFF',
   // TODO: add magenta 50-900
   magentaVibrant: '#FC72FF',
@@ -230,11 +230,11 @@ export const colorsLight: Palette = {
   none: 'transparent',
 
   backgroundBackdrop: colors.white,
-  backgroundSurface: colors.gray50,
+  backgroundSurface: colors.white,
   backgroundContainer: opacify(8, colors.gray500),
-  backgroundAction: colors.gray100,
+  backgroundAction: opacify(8, colors.gray700),
   backgroundOutline: opacify(24, colors.gray500),
-  backgroundScrim: opacify(72, colors.white),
+  backgroundScrim: opacify(60, colors.gray900),
 
   textPrimary: colors.gray900,
   textSecondary: colors.gray500,
@@ -278,7 +278,8 @@ export const colorsLight: Palette = {
   chain_10_background: colors.red900,
   chain_42161_background: colors.blue900,
 
-  flyoutDropShadow: colors.black,
+  flyoutDropShadow:
+    '0px 24px 32px rgba(0, 0, 0, 0.04), 0px 16px 24px rgba(0, 0, 0, 0.04), 0px 4px 8px rgba(0, 0, 0, 0.04), 0px 0px 1px rgba(0, 0, 0, 0.12);',
 }
 
 export const colorsDark: Palette = {
@@ -301,7 +302,7 @@ export const colorsDark: Palette = {
   accentWarning: colors.gold200,
   accentFailure: colors.red400,
 
-  accentActionSoft: opacify(12, colors.blue400),
+  accentActionSoft: opacify(24, colors.blue400),
   accentActiveSoft: opacify(12, colors.blue400),
   accentSuccessSoft: opacify(12, colors.green400),
   accentWarningSoft: opacify(12, colors.gold200),
@@ -334,5 +335,6 @@ export const colorsDark: Palette = {
   chain_10_background: colors.red900,
   chain_42161_background: colors.blue900,
 
-  flyoutDropShadow: colors.black,
+  flyoutDropShadow:
+    '0px 24px 32px rgba(0, 0, 0, 0.04), 0px 16px 24px rgba(0, 0, 0, 0.04), 0px 4px 8px rgba(0, 0, 0, 0.04), 0px 0px 1px rgba(0, 0, 0, 0.12);',
 }

src/theme/components.tsx

@@ -296,8 +296,8 @@ export const SmallOnly = styled.span`
   `};
 `
 
-export const Separator = styled.div`
+export const Separator = styled.div<{ phase0Flag?: boolean }>`
   width: 100%;
   height: 1px;
-  background-color: ${({ theme }) => theme.deprecated_bg2};
+  background-color: ${({ theme, phase0Flag }) => (phase0Flag ? theme.backgroundOutline : theme.deprecated_bg2)};
 `