feat: Spore colors refresh (#7118)

* Add colors and type and fix everywhere

* fix text.tsx

* Color and text adjustments

* Further tweaks

* Removed promotional gradient

Changed to pink

* Add new icons and tweak broken colors

* Kill shadows

Removes shadows from NFT cards, Pools and Tokens tables

* Update icons

Update filled and info icons to filled versions

* Update bag icon

Changed to fill style

* Change share icon

Changed to the new filled arrow

* Fix merge errors

* update tests

* Complete find and replace old colors

* Fix colors on pool pages

* Update index.test.tsx.snap

* fix header hover states

* update test

* Update connect button hover state

* Update styles design bash

* Update tests

* Update fonts

* fix buy button font weight

* update tests

* fix jumping input boxes

* lint

* lints

* update tests

* redo auth header

* fix issues

* fix snapshots

* use individual weights instead of variable for nicer $ signn

* update tests

* make dark mode glow distinct

* remove commented out code

* icons in react

* update textSecondary

* fix feedback

* port over token test fix

* lint

* fix: make popups appear above drawer and near top conditionally only when drawer is open

* Revert "fix: make popups appear above drawer and near top conditionally only when drawer is open"

This reverts commit 994697144374ae3fc0cdf9275bce538fda5fc8de.

---------
Co-authored-by: Callil Capuozzo <callil.capuozzo@gmail.com>
Co-authored-by: pp-hh-ii-ll <111304124+pp-hh-ii-ll@users.noreply.github.com>
Co-authored-by: Callil Capuozzo <callil@uniswap.org>

cypress.config.ts

@@ -6,7 +6,7 @@ export default defineConfig({
   defaultCommandTimeout: 24000, // 2x average block time
   chromeWebSecurity: false,
   experimentalMemoryManagement: true, // better memory management, see https://github.com/cypress-io/cypress/pull/25462
-  retries: { runMode: 2 },
+  retries: { runMode: process.env.CYPRESS_RETRIES ? +process.env.CYPRESS_RETRIES : 2 },
   video: false, // GH provides 2 CPUs, and cypress video eats one up, see https://github.com/cypress-io/cypress/issues/20468#issuecomment-1307608025
   e2e: {
     async setupNodeEvents(on, config) {

cypress/e2e/token-details.test.ts

@@ -108,7 +108,7 @@ describe('Token details', () => {
 
     it('should automatically navigate to the new TDP', () => {
       cy.get(`#swap-currency-output .open-currency-select-button`).click()
-      cy.contains('WETH').click()
+      cy.get('[data-reach-dialog-content]').contains('WETH').click()
       cy.url().should('include', `${WETH9[1].address}`)
       cy.url().should('not.include', `${UNI_MAINNET.address}`)
     })

cypress/e2e/wallet-dropdown.test.ts

@@ -115,7 +115,7 @@ describe('Wallet Dropdown', () => {
       cy.get(getTestSelector('web3-status-connected')).click()
       cy.get(getTestSelector('wallet-settings')).click()
       cy.get(getTestSelector('theme-auto')).click()
-      cy.get(getTestSelector('wallet-header')).should('have.css', 'color', 'rgb(152, 161, 192)')
+      cy.get(getTestSelector('wallet-header')).should('have.css', 'color', 'rgb(155, 155, 155)')
     })
 
     it('should properly use light system theme when auto theme setting is selected', () => {
@@ -123,7 +123,7 @@ describe('Wallet Dropdown', () => {
       cy.get(getTestSelector('web3-status-connected')).click()
       cy.get(getTestSelector('wallet-settings')).click()
       cy.get(getTestSelector('theme-auto')).click()
-      cy.get(getTestSelector('wallet-header')).should('have.css', 'color', 'rgb(119, 128, 160)')
+      cy.get(getTestSelector('wallet-header')).should('have.css', 'color', 'rgb(125, 125, 125)')
     })
   })
 

functions/nfts/asset/__snapshots__/nft.test.ts.snap

@@ -37,31 +37,43 @@ exports[`should inject metadata for valid assets 1`] = `
     -->
     <link rel="manifest" href="/manifest.json" />
 
-    <link rel="preload" href="/fonts/Inter-roman.var.woff2" as="font" type="font/woff2" crossorigin />
+    <link rel="preload" href="/fonts/Basel-Book.woff" as="font" type="font/woff" crossorigin />
+    <link rel="preload" href="/fonts/Basel-Medium.woff" as="font" type="font/woff" crossorigin />
+
    
     <style>
       * {
-        font-family: 'Inter', sans-serif;
+        font-family: 'Basel', sans-serif;
         box-sizing: border-box;
       }
 
       /**
-          Explicitly load Inter var from public/ so it does not block LCP's critical path.
+          Explicitly load Basel var from public/ so it does not block LCP's critical path.
         */
       @font-face {
-        font-family: 'Inter custom';
-        font-weight: 100 900;
+        font-family: 'Basel';
+        font-weight: 535;
+        font-style: normal;
+        font-display: block;
+        font-named-instance: 'Book';
+        src: 
+          url(/fonts/Basel-Medium.woff) format('woff');
+      }
+
+      @font-face {
+        font-family: 'Basel';
+        font-weight: 485;
         font-style: normal;
         font-display: block;
-        font-named-instance: 'Regular';
-        src: url(/fonts/Inter-roman.var.woff2) format('woff2 supports variations(gvar)'),
-          url(/fonts/Inter-roman.var.woff2) format('woff2-variations'),
-          url(/fonts/Inter-roman.var.woff2) format('woff2');
+        font-named-instance: 'Book';
+        src: 
+          url(/fonts/Basel-Book.woff) format('woff');
       }
 
       @supports (font-variation-settings: normal) {
         * {
-          font-family: 'Inter custom', sans-serif;
+          font-family: 'Basel', sans-serif;
+          
         }
       }
 
@@ -77,9 +89,11 @@ exports[`should inject metadata for valid assets 1`] = `
 
       html {
         font-size: 16px;
+        font-weight: 485;
         font-variant: none;
         font-smooth: always;
-        -webkit-font-smoothing: antialiased;
+        text-rendering: optimizeLegibility !important;
+        -webkit-font-smoothing: antialiased !important;
         -moz-osx-font-smoothing: grayscale;
         -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
       }
@@ -168,31 +182,43 @@ exports[`should inject metadata for valid assets 2`] = `
     -->
     <link rel="manifest" href="/manifest.json" />
 
-    <link rel="preload" href="/fonts/Inter-roman.var.woff2" as="font" type="font/woff2" crossorigin />
+    <link rel="preload" href="/fonts/Basel-Book.woff" as="font" type="font/woff" crossorigin />
+    <link rel="preload" href="/fonts/Basel-Medium.woff" as="font" type="font/woff" crossorigin />
+
    
     <style>
       * {
-        font-family: 'Inter', sans-serif;
+        font-family: 'Basel', sans-serif;
         box-sizing: border-box;
       }
 
       /**
-          Explicitly load Inter var from public/ so it does not block LCP's critical path.
+          Explicitly load Basel var from public/ so it does not block LCP's critical path.
         */
       @font-face {
-        font-family: 'Inter custom';
-        font-weight: 100 900;
+        font-family: 'Basel';
+        font-weight: 535;
         font-style: normal;
         font-display: block;
-        font-named-instance: 'Regular';
-        src: url(/fonts/Inter-roman.var.woff2) format('woff2 supports variations(gvar)'),
-          url(/fonts/Inter-roman.var.woff2) format('woff2-variations'),
-          url(/fonts/Inter-roman.var.woff2) format('woff2');
+        font-named-instance: 'Book';
+        src: 
+          url(/fonts/Basel-Medium.woff) format('woff');
+      }
+
+      @font-face {
+        font-family: 'Basel';
+        font-weight: 485;
+        font-style: normal;
+        font-display: block;
+        font-named-instance: 'Book';
+        src: 
+          url(/fonts/Basel-Book.woff) format('woff');
       }
 
       @supports (font-variation-settings: normal) {
         * {
-          font-family: 'Inter custom', sans-serif;
+          font-family: 'Basel', sans-serif;
+          
         }
       }
 
@@ -208,9 +234,11 @@ exports[`should inject metadata for valid assets 2`] = `
 
       html {
         font-size: 16px;
+        font-weight: 485;
         font-variant: none;
         font-smooth: always;
-        -webkit-font-smoothing: antialiased;
+        text-rendering: optimizeLegibility !important;
+        -webkit-font-smoothing: antialiased !important;
         -moz-osx-font-smoothing: grayscale;
         -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
       }
@@ -299,31 +327,43 @@ exports[`should inject metadata for valid assets 3`] = `
     -->
     <link rel="manifest" href="/manifest.json" />
 
-    <link rel="preload" href="/fonts/Inter-roman.var.woff2" as="font" type="font/woff2" crossorigin />
+    <link rel="preload" href="/fonts/Basel-Book.woff" as="font" type="font/woff" crossorigin />
+    <link rel="preload" href="/fonts/Basel-Medium.woff" as="font" type="font/woff" crossorigin />
+
    
     <style>
       * {
-        font-family: 'Inter', sans-serif;
+        font-family: 'Basel', sans-serif;
         box-sizing: border-box;
       }
 
       /**
-          Explicitly load Inter var from public/ so it does not block LCP's critical path.
+          Explicitly load Basel var from public/ so it does not block LCP's critical path.
         */
       @font-face {
-        font-family: 'Inter custom';
-        font-weight: 100 900;
+        font-family: 'Basel';
+        font-weight: 535;
+        font-style: normal;
+        font-display: block;
+        font-named-instance: 'Book';
+        src: 
+          url(/fonts/Basel-Medium.woff) format('woff');
+      }
+
+      @font-face {
+        font-family: 'Basel';
+        font-weight: 485;
         font-style: normal;
         font-display: block;
-        font-named-instance: 'Regular';
-        src: url(/fonts/Inter-roman.var.woff2) format('woff2 supports variations(gvar)'),
-          url(/fonts/Inter-roman.var.woff2) format('woff2-variations'),
-          url(/fonts/Inter-roman.var.woff2) format('woff2');
+        font-named-instance: 'Book';
+        src: 
+          url(/fonts/Basel-Book.woff) format('woff');
       }
 
       @supports (font-variation-settings: normal) {
         * {
-          font-family: 'Inter custom', sans-serif;
+          font-family: 'Basel', sans-serif;
+          
         }
       }
 
@@ -339,9 +379,11 @@ exports[`should inject metadata for valid assets 3`] = `
 
       html {
         font-size: 16px;
+        font-weight: 485;
         font-variant: none;
         font-smooth: always;
-        -webkit-font-smoothing: antialiased;
+        text-rendering: optimizeLegibility !important;
+        -webkit-font-smoothing: antialiased !important;
         -moz-osx-font-smoothing: grayscale;
         -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
       }

functions/nfts/collection/__snapshots__/collection.test.ts.snap

@@ -37,31 +37,43 @@ exports[`should inject metadata for valid collections 1`] = `
     -->
     <link rel="manifest" href="/manifest.json" />
 
-    <link rel="preload" href="/fonts/Inter-roman.var.woff2" as="font" type="font/woff2" crossorigin />
+    <link rel="preload" href="/fonts/Basel-Book.woff" as="font" type="font/woff" crossorigin />
+    <link rel="preload" href="/fonts/Basel-Medium.woff" as="font" type="font/woff" crossorigin />
+
    
     <style>
       * {
-        font-family: 'Inter', sans-serif;
+        font-family: 'Basel', sans-serif;
         box-sizing: border-box;
       }
 
       /**
-          Explicitly load Inter var from public/ so it does not block LCP's critical path.
+          Explicitly load Basel var from public/ so it does not block LCP's critical path.
         */
       @font-face {
-        font-family: 'Inter custom';
-        font-weight: 100 900;
+        font-family: 'Basel';
+        font-weight: 535;
+        font-style: normal;
+        font-display: block;
+        font-named-instance: 'Book';
+        src: 
+          url(/fonts/Basel-Medium.woff) format('woff');
+      }
+
+      @font-face {
+        font-family: 'Basel';
+        font-weight: 485;
         font-style: normal;
         font-display: block;
-        font-named-instance: 'Regular';
-        src: url(/fonts/Inter-roman.var.woff2) format('woff2 supports variations(gvar)'),
-          url(/fonts/Inter-roman.var.woff2) format('woff2-variations'),
-          url(/fonts/Inter-roman.var.woff2) format('woff2');
+        font-named-instance: 'Book';
+        src: 
+          url(/fonts/Basel-Book.woff) format('woff');
       }
 
       @supports (font-variation-settings: normal) {
         * {
-          font-family: 'Inter custom', sans-serif;
+          font-family: 'Basel', sans-serif;
+          
         }
       }
 
@@ -77,9 +89,11 @@ exports[`should inject metadata for valid collections 1`] = `
 
       html {
         font-size: 16px;
+        font-weight: 485;
         font-variant: none;
         font-smooth: always;
-        -webkit-font-smoothing: antialiased;
+        text-rendering: optimizeLegibility !important;
+        -webkit-font-smoothing: antialiased !important;
         -moz-osx-font-smoothing: grayscale;
         -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
       }
@@ -168,31 +182,43 @@ exports[`should inject metadata for valid collections 2`] = `
     -->
     <link rel="manifest" href="/manifest.json" />
 
-    <link rel="preload" href="/fonts/Inter-roman.var.woff2" as="font" type="font/woff2" crossorigin />
+    <link rel="preload" href="/fonts/Basel-Book.woff" as="font" type="font/woff" crossorigin />
+    <link rel="preload" href="/fonts/Basel-Medium.woff" as="font" type="font/woff" crossorigin />
+
    
     <style>
       * {
-        font-family: 'Inter', sans-serif;
+        font-family: 'Basel', sans-serif;
         box-sizing: border-box;
       }
 
       /**
-          Explicitly load Inter var from public/ so it does not block LCP's critical path.
+          Explicitly load Basel var from public/ so it does not block LCP's critical path.
         */
       @font-face {
-        font-family: 'Inter custom';
-        font-weight: 100 900;
+        font-family: 'Basel';
+        font-weight: 535;
         font-style: normal;
         font-display: block;
-        font-named-instance: 'Regular';
-        src: url(/fonts/Inter-roman.var.woff2) format('woff2 supports variations(gvar)'),
-          url(/fonts/Inter-roman.var.woff2) format('woff2-variations'),
-          url(/fonts/Inter-roman.var.woff2) format('woff2');
+        font-named-instance: 'Book';
+        src: 
+          url(/fonts/Basel-Medium.woff) format('woff');
+      }
+
+      @font-face {
+        font-family: 'Basel';
+        font-weight: 485;
+        font-style: normal;
+        font-display: block;
+        font-named-instance: 'Book';
+        src: 
+          url(/fonts/Basel-Book.woff) format('woff');
       }
 
       @supports (font-variation-settings: normal) {
         * {
-          font-family: 'Inter custom', sans-serif;
+          font-family: 'Basel', sans-serif;
+          
         }
       }
 
@@ -208,9 +234,11 @@ exports[`should inject metadata for valid collections 2`] = `
 
       html {
         font-size: 16px;
+        font-weight: 485;
         font-variant: none;
         font-smooth: always;
-        -webkit-font-smoothing: antialiased;
+        text-rendering: optimizeLegibility !important;
+        -webkit-font-smoothing: antialiased !important;
         -moz-osx-font-smoothing: grayscale;
         -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
       }
@@ -299,31 +327,43 @@ exports[`should inject metadata for valid collections 3`] = `
     -->
     <link rel="manifest" href="/manifest.json" />
 
-    <link rel="preload" href="/fonts/Inter-roman.var.woff2" as="font" type="font/woff2" crossorigin />
+    <link rel="preload" href="/fonts/Basel-Book.woff" as="font" type="font/woff" crossorigin />
+    <link rel="preload" href="/fonts/Basel-Medium.woff" as="font" type="font/woff" crossorigin />
+
    
     <style>
       * {
-        font-family: 'Inter', sans-serif;
+        font-family: 'Basel', sans-serif;
         box-sizing: border-box;
       }
 
       /**
-          Explicitly load Inter var from public/ so it does not block LCP's critical path.
+          Explicitly load Basel var from public/ so it does not block LCP's critical path.
         */
       @font-face {
-        font-family: 'Inter custom';
-        font-weight: 100 900;
+        font-family: 'Basel';
+        font-weight: 535;
+        font-style: normal;
+        font-display: block;
+        font-named-instance: 'Book';
+        src: 
+          url(/fonts/Basel-Medium.woff) format('woff');
+      }
+
+      @font-face {
+        font-family: 'Basel';
+        font-weight: 485;
         font-style: normal;
         font-display: block;
-        font-named-instance: 'Regular';
-        src: url(/fonts/Inter-roman.var.woff2) format('woff2 supports variations(gvar)'),
-          url(/fonts/Inter-roman.var.woff2) format('woff2-variations'),
-          url(/fonts/Inter-roman.var.woff2) format('woff2');
+        font-named-instance: 'Book';
+        src: 
+          url(/fonts/Basel-Book.woff) format('woff');
       }
 
       @supports (font-variation-settings: normal) {
         * {
-          font-family: 'Inter custom', sans-serif;
+          font-family: 'Basel', sans-serif;
+          
         }
       }
 
@@ -339,9 +379,11 @@ exports[`should inject metadata for valid collections 3`] = `
 
       html {
         font-size: 16px;
+        font-weight: 485;
         font-variant: none;
         font-smooth: always;
-        -webkit-font-smoothing: antialiased;
+        text-rendering: optimizeLegibility !important;
+        -webkit-font-smoothing: antialiased !important;
         -moz-osx-font-smoothing: grayscale;
         -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
       }

functions/tokens/__snapshots__/token.test.ts.snap

@@ -37,31 +37,43 @@ exports[`should inject metadata for valid tokens 1`] = `
     -->
     <link rel="manifest" href="/manifest.json" />
 
-    <link rel="preload" href="/fonts/Inter-roman.var.woff2" as="font" type="font/woff2" crossorigin />
+    <link rel="preload" href="/fonts/Basel-Book.woff" as="font" type="font/woff" crossorigin />
+    <link rel="preload" href="/fonts/Basel-Medium.woff" as="font" type="font/woff" crossorigin />
+
    
     <style>
       * {
-        font-family: 'Inter', sans-serif;
+        font-family: 'Basel', sans-serif;
         box-sizing: border-box;
       }
 
       /**
-          Explicitly load Inter var from public/ so it does not block LCP's critical path.
+          Explicitly load Basel var from public/ so it does not block LCP's critical path.
         */
       @font-face {
-        font-family: 'Inter custom';
-        font-weight: 100 900;
+        font-family: 'Basel';
+        font-weight: 535;
         font-style: normal;
         font-display: block;
-        font-named-instance: 'Regular';
-        src: url(/fonts/Inter-roman.var.woff2) format('woff2 supports variations(gvar)'),
-          url(/fonts/Inter-roman.var.woff2) format('woff2-variations'),
-          url(/fonts/Inter-roman.var.woff2) format('woff2');
+        font-named-instance: 'Book';
+        src: 
+          url(/fonts/Basel-Medium.woff) format('woff');
+      }
+
+      @font-face {
+        font-family: 'Basel';
+        font-weight: 485;
+        font-style: normal;
+        font-display: block;
+        font-named-instance: 'Book';
+        src: 
+          url(/fonts/Basel-Book.woff) format('woff');
       }
 
       @supports (font-variation-settings: normal) {
         * {
-          font-family: 'Inter custom', sans-serif;
+          font-family: 'Basel', sans-serif;
+          
         }
       }
 
@@ -77,9 +89,11 @@ exports[`should inject metadata for valid tokens 1`] = `
 
       html {
         font-size: 16px;
+        font-weight: 485;
         font-variant: none;
         font-smooth: always;
-        -webkit-font-smoothing: antialiased;
+        text-rendering: optimizeLegibility !important;
+        -webkit-font-smoothing: antialiased !important;
         -moz-osx-font-smoothing: grayscale;
         -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
       }
@@ -168,31 +182,43 @@ exports[`should inject metadata for valid tokens 2`] = `
     -->
     <link rel="manifest" href="/manifest.json" />
 
-    <link rel="preload" href="/fonts/Inter-roman.var.woff2" as="font" type="font/woff2" crossorigin />
+    <link rel="preload" href="/fonts/Basel-Book.woff" as="font" type="font/woff" crossorigin />
+    <link rel="preload" href="/fonts/Basel-Medium.woff" as="font" type="font/woff" crossorigin />
+
    
     <style>
       * {
-        font-family: 'Inter', sans-serif;
+        font-family: 'Basel', sans-serif;
         box-sizing: border-box;
       }
 
       /**
-          Explicitly load Inter var from public/ so it does not block LCP's critical path.
+          Explicitly load Basel var from public/ so it does not block LCP's critical path.
         */
       @font-face {
-        font-family: 'Inter custom';
-        font-weight: 100 900;
+        font-family: 'Basel';
+        font-weight: 535;
         font-style: normal;
         font-display: block;
-        font-named-instance: 'Regular';
-        src: url(/fonts/Inter-roman.var.woff2) format('woff2 supports variations(gvar)'),
-          url(/fonts/Inter-roman.var.woff2) format('woff2-variations'),
-          url(/fonts/Inter-roman.var.woff2) format('woff2');
+        font-named-instance: 'Book';
+        src: 
+          url(/fonts/Basel-Medium.woff) format('woff');
+      }
+
+      @font-face {
+        font-family: 'Basel';
+        font-weight: 485;
+        font-style: normal;
+        font-display: block;
+        font-named-instance: 'Book';
+        src: 
+          url(/fonts/Basel-Book.woff) format('woff');
       }
 
       @supports (font-variation-settings: normal) {
         * {
-          font-family: 'Inter custom', sans-serif;
+          font-family: 'Basel', sans-serif;
+          
         }
       }
 
@@ -208,9 +234,11 @@ exports[`should inject metadata for valid tokens 2`] = `
 
       html {
         font-size: 16px;
+        font-weight: 485;
         font-variant: none;
         font-smooth: always;
-        -webkit-font-smoothing: antialiased;
+        text-rendering: optimizeLegibility !important;
+        -webkit-font-smoothing: antialiased !important;
         -moz-osx-font-smoothing: grayscale;
         -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
       }
@@ -299,31 +327,43 @@ exports[`should inject metadata for valid tokens 3`] = `
     -->
     <link rel="manifest" href="/manifest.json" />
 
-    <link rel="preload" href="/fonts/Inter-roman.var.woff2" as="font" type="font/woff2" crossorigin />
+    <link rel="preload" href="/fonts/Basel-Book.woff" as="font" type="font/woff" crossorigin />
+    <link rel="preload" href="/fonts/Basel-Medium.woff" as="font" type="font/woff" crossorigin />
+
    
     <style>
       * {
-        font-family: 'Inter', sans-serif;
+        font-family: 'Basel', sans-serif;
         box-sizing: border-box;
       }
 
       /**
-          Explicitly load Inter var from public/ so it does not block LCP's critical path.
+          Explicitly load Basel var from public/ so it does not block LCP's critical path.
         */
       @font-face {
-        font-family: 'Inter custom';
-        font-weight: 100 900;
+        font-family: 'Basel';
+        font-weight: 535;
         font-style: normal;
         font-display: block;
-        font-named-instance: 'Regular';
-        src: url(/fonts/Inter-roman.var.woff2) format('woff2 supports variations(gvar)'),
-          url(/fonts/Inter-roman.var.woff2) format('woff2-variations'),
-          url(/fonts/Inter-roman.var.woff2) format('woff2');
+        font-named-instance: 'Book';
+        src: 
+          url(/fonts/Basel-Medium.woff) format('woff');
+      }
+
+      @font-face {
+        font-family: 'Basel';
+        font-weight: 485;
+        font-style: normal;
+        font-display: block;
+        font-named-instance: 'Book';
+        src: 
+          url(/fonts/Basel-Book.woff) format('woff');
       }
 
       @supports (font-variation-settings: normal) {
         * {
-          font-family: 'Inter custom', sans-serif;
+          font-family: 'Basel', sans-serif;
+          
         }
       }
 
@@ -339,9 +379,11 @@ exports[`should inject metadata for valid tokens 3`] = `
 
       html {
         font-size: 16px;
+        font-weight: 485;
         font-variant: none;
         font-smooth: always;
-        -webkit-font-smoothing: antialiased;
+        text-rendering: optimizeLegibility !important;
+        -webkit-font-smoothing: antialiased !important;
         -moz-osx-font-smoothing: grayscale;
         -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
       }
@@ -430,31 +472,43 @@ exports[`should inject metadata for valid tokens 4`] = `
     -->
     <link rel="manifest" href="/manifest.json" />
 
-    <link rel="preload" href="/fonts/Inter-roman.var.woff2" as="font" type="font/woff2" crossorigin />
+    <link rel="preload" href="/fonts/Basel-Book.woff" as="font" type="font/woff" crossorigin />
+    <link rel="preload" href="/fonts/Basel-Medium.woff" as="font" type="font/woff" crossorigin />
+
    
     <style>
       * {
-        font-family: 'Inter', sans-serif;
+        font-family: 'Basel', sans-serif;
         box-sizing: border-box;
       }
 
       /**
-          Explicitly load Inter var from public/ so it does not block LCP's critical path.
+          Explicitly load Basel var from public/ so it does not block LCP's critical path.
         */
       @font-face {
-        font-family: 'Inter custom';
-        font-weight: 100 900;
+        font-family: 'Basel';
+        font-weight: 535;
         font-style: normal;
         font-display: block;
-        font-named-instance: 'Regular';
-        src: url(/fonts/Inter-roman.var.woff2) format('woff2 supports variations(gvar)'),
-          url(/fonts/Inter-roman.var.woff2) format('woff2-variations'),
-          url(/fonts/Inter-roman.var.woff2) format('woff2');
+        font-named-instance: 'Book';
+        src: 
+          url(/fonts/Basel-Medium.woff) format('woff');
+      }
+
+      @font-face {
+        font-family: 'Basel';
+        font-weight: 485;
+        font-style: normal;
+        font-display: block;
+        font-named-instance: 'Book';
+        src: 
+          url(/fonts/Basel-Book.woff) format('woff');
       }
 
       @supports (font-variation-settings: normal) {
         * {
-          font-family: 'Inter custom', sans-serif;
+          font-family: 'Basel', sans-serif;
+          
         }
       }
 
@@ -470,9 +524,11 @@ exports[`should inject metadata for valid tokens 4`] = `
 
       html {
         font-size: 16px;
+        font-weight: 485;
         font-variant: none;
         font-smooth: always;
-        -webkit-font-smoothing: antialiased;
+        text-rendering: optimizeLegibility !important;
+        -webkit-font-smoothing: antialiased !important;
         -moz-osx-font-smoothing: grayscale;
         -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
       }

public/index.html

@@ -36,31 +36,43 @@
     -->
     <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
 
-    <link rel="preload" href="%PUBLIC_URL%/fonts/Inter-roman.var.woff2" as="font" type="font/woff2" crossorigin />
+    <link rel="preload" href="%PUBLIC_URL%/fonts/Basel-Book.woff" as="font" type="font/woff" crossorigin />
+    <link rel="preload" href="%PUBLIC_URL%/fonts/Basel-Medium.woff" as="font" type="font/woff" crossorigin />
+
    
     <style>
       * {
-        font-family: 'Inter', sans-serif;
+        font-family: 'Basel', sans-serif;
         box-sizing: border-box;
       }
 
       /**
-          Explicitly load Inter var from public/ so it does not block LCP's critical path.
+          Explicitly load Basel var from public/ so it does not block LCP's critical path.
         */
       @font-face {
-        font-family: 'Inter custom';
-        font-weight: 100 900;
+        font-family: 'Basel';
+        font-weight: 535;
         font-style: normal;
         font-display: block;
-        font-named-instance: 'Regular';
-        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');
+        font-named-instance: 'Book';
+        src: 
+          url(%PUBLIC_URL%/fonts/Basel-Medium.woff) format('woff');
+      }
+
+      @font-face {
+        font-family: 'Basel';
+        font-weight: 485;
+        font-style: normal;
+        font-display: block;
+        font-named-instance: 'Book';
+        src: 
+          url(%PUBLIC_URL%/fonts/Basel-Book.woff) format('woff');
       }
 
       @supports (font-variation-settings: normal) {
         * {
-          font-family: 'Inter custom', sans-serif;
+          font-family: 'Basel', sans-serif;
+          
         }
       }
 
@@ -76,9 +88,11 @@
 
       html {
         font-size: 16px;
+        font-weight: 485;
         font-variant: none;
         font-smooth: always;
-        -webkit-font-smoothing: antialiased;
+        text-rendering: optimizeLegibility !important;
+        -webkit-font-smoothing: antialiased !important;
         -moz-osx-font-smoothing: grayscale;
         -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
       }

public/nft/svgs/marketplaces/looksrare-grey.svg

 <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M6.64864 2L1 7.65256L10.5 17.1487L20 7.65256L14.3514 2H6.64864ZM6.13513 5.59458C8.5352 3.18398 12.4648 3.18396 14.8649 5.59456L16.9189 7.64866L14.8649 9.70272C12.4648 12.1133 8.5352 12.1133 6.13513 9.70274L4.08109 7.64866L6.13513 5.59458ZM7.54702 7.64848C7.54702 9.27987 8.86966 10.6012 10.4997 10.6012C12.1298 10.6012 13.4524 9.27987 13.4524 7.64848C13.4524 6.01708 12.1298 4.69576 10.4997 4.69576C8.86966 4.69576 7.54702 6.01708 7.54702 7.64848ZM10.4997 8.93225C9.791 8.93225 9.21593 8.35778 9.21593 7.64848C9.21593 6.93917 9.791 6.3647 10.4997 6.3647C11.2084 6.3647 11.7835 6.93917 11.7835 7.64848C11.7835 8.35778 11.2084 8.93225 10.4997 8.93225Z" fill="#5D6785"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M6.64864 2L1 7.65256L10.5 17.1487L20 7.65256L14.3514 2H6.64864ZM6.13513 5.59458C8.5352 3.18398 12.4648 3.18396 14.8649 5.59456L16.9189 7.64866L14.8649 9.70272C12.4648 12.1133 8.5352 12.1133 6.13513 9.70274L4.08109 7.64866L6.13513 5.59458ZM7.54702 7.64848C7.54702 9.27987 8.86966 10.6012 10.4997 10.6012C12.1298 10.6012 13.4524 9.27987 13.4524 7.64848C13.4524 6.01708 12.1298 4.69576 10.4997 4.69576C8.86966 4.69576 7.54702 6.01708 7.54702 7.64848ZM10.4997 8.93225C9.791 8.93225 9.21593 8.35778 9.21593 7.64848C9.21593 6.93917 9.791 6.3647 10.4997 6.3647C11.2084 6.3647 11.7835 6.93917 11.7835 7.64848C11.7835 8.35778 11.2084 8.93225 10.4997 8.93225Z" fill="#9B9B9B"/>
 </svg>

public/nft/svgs/marketplaces/opensea-grey.svg

 <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M10 1C5.0302 1 1 5.0302 1 10C1 14.9698 5.0302 19 10 19C14.9698 19 19 14.9698 19 10C19 5.0302 14.9716 1 10 1ZM5.4406 10.3024L5.4784 10.2412L7.8202 6.5782C7.8544 6.526 7.9354 6.5314 7.9606 6.589C8.3512 7.4656 8.6896 8.5564 8.5312 9.235C8.4646 9.514 8.2792 9.892 8.0704 10.2412C8.0434 10.2916 8.0146 10.342 7.9822 10.3906C7.9678 10.4122 7.9426 10.4248 7.9156 10.4248H5.509C5.4442 10.4248 5.4064 10.3546 5.4406 10.3024ZM15.8752 11.5624C15.8752 11.5966 15.8554 11.6254 15.8266 11.638C15.6448 11.7154 15.0238 12.0016 14.7664 12.3598C14.1076 13.276 13.6054 14.5864 12.4804 14.5864H7.7896C6.1264 14.5864 4.78 13.2346 4.78 11.566V11.512C4.78 11.4688 4.816 11.4328 4.861 11.4328H7.4746C7.5268 11.4328 7.5646 11.4796 7.561 11.5318C7.5412 11.701 7.5736 11.8756 7.6546 12.034C7.8094 12.349 8.1316 12.5452 8.479 12.5452H9.7732V11.5354H8.4934C8.4286 11.5354 8.389 11.4598 8.4268 11.4058C8.4412 11.3842 8.4556 11.3626 8.4736 11.3374C8.5942 11.1646 8.767 10.8982 8.9398 10.594C9.0568 10.3888 9.1702 10.1692 9.262 9.9496C9.28 9.91 9.2944 9.8686 9.3106 9.829C9.3358 9.7588 9.361 9.6922 9.379 9.6274C9.397 9.5716 9.4132 9.514 9.4276 9.46C9.4708 9.2728 9.4888 9.0748 9.4888 8.8696C9.4888 8.7886 9.4852 8.704 9.478 8.6248C9.4744 8.5366 9.4636 8.4484 9.4528 8.3602C9.4456 8.2828 9.4312 8.2054 9.4168 8.1262C9.397 8.0092 9.3718 7.8922 9.343 7.7752L9.3322 7.7302C9.3106 7.6492 9.2908 7.5736 9.2656 7.4926C9.1918 7.2406 9.109 6.994 9.019 6.7636C8.9866 6.6718 8.9506 6.5836 8.9128 6.4972C8.8588 6.364 8.803 6.2434 8.7526 6.13C8.7256 6.0778 8.704 6.031 8.6824 5.9824C8.6572 5.9284 8.632 5.8744 8.605 5.8222C8.587 5.7826 8.5654 5.7448 8.551 5.7088L8.3926 5.4172C8.371 5.3776 8.407 5.329 8.4502 5.3416L9.4402 5.6098H9.4438C9.4456 5.6098 9.4456 5.6098 9.4474 5.6098L9.577 5.6476L9.721 5.6872L9.7732 5.7016V5.1148C9.7732 4.8304 10 4.6 10.2826 4.6C10.423 4.6 10.5508 4.6576 10.6408 4.7512C10.7326 4.8448 10.7902 4.9726 10.7902 5.1148V5.9878L10.8964 6.0166C10.9036 6.0202 10.9126 6.0238 10.9198 6.0292C10.945 6.0472 10.9828 6.076 11.0296 6.112C11.0674 6.1408 11.107 6.1768 11.1538 6.2146C11.2492 6.292 11.3644 6.391 11.4886 6.5044C11.521 6.5332 11.5534 6.562 11.584 6.5926C11.7442 6.742 11.9242 6.9166 12.097 7.111C12.1456 7.1668 12.1924 7.2208 12.241 7.2802C12.2878 7.3396 12.34 7.3972 12.3832 7.4548C12.4426 7.5322 12.5038 7.6132 12.5596 7.6978C12.5848 7.7374 12.6154 7.7788 12.6388 7.8184C12.7108 7.9246 12.772 8.0344 12.8314 8.1442C12.8566 8.1946 12.8818 8.2504 12.9034 8.3044C12.97 8.452 13.0222 8.6014 13.0546 8.7526C13.0654 8.785 13.0726 8.8192 13.0762 8.8516V8.8588C13.087 8.902 13.0906 8.9488 13.0942 8.9974C13.1086 9.1504 13.1014 9.3052 13.069 9.46C13.0546 9.5248 13.0366 9.586 13.015 9.6526C12.9916 9.7156 12.97 9.7804 12.9412 9.8434C12.8854 9.9712 12.8206 10.1008 12.7432 10.2196C12.718 10.2646 12.6874 10.3114 12.6586 10.3564C12.6262 10.4032 12.592 10.4482 12.5632 10.4914C12.5218 10.5472 12.4786 10.6048 12.4336 10.657C12.394 10.711 12.3544 10.765 12.3094 10.8136C12.2482 10.8874 12.1888 10.9558 12.1258 11.0224C12.0898 11.0656 12.0502 11.1106 12.0088 11.1502C11.9692 11.1952 11.9278 11.2348 11.8918 11.2708C11.8288 11.3338 11.7784 11.3806 11.7352 11.422L11.6326 11.5138C11.6182 11.5282 11.5984 11.5354 11.5786 11.5354H10.7902V12.5452H11.782C12.0034 12.5452 12.214 12.4678 12.385 12.322C12.4426 12.2716 12.6964 12.052 12.997 11.7208C13.0078 11.7082 13.0204 11.701 13.0348 11.6974L15.7726 10.9054C15.8248 10.891 15.8752 10.9288 15.8752 10.9828V11.5624Z" fill="#5D6785"/>
+<path d="M10 1C5.0302 1 1 5.0302 1 10C1 14.9698 5.0302 19 10 19C14.9698 19 19 14.9698 19 10C19 5.0302 14.9716 1 10 1ZM5.4406 10.3024L5.4784 10.2412L7.8202 6.5782C7.8544 6.526 7.9354 6.5314 7.9606 6.589C8.3512 7.4656 8.6896 8.5564 8.5312 9.235C8.4646 9.514 8.2792 9.892 8.0704 10.2412C8.0434 10.2916 8.0146 10.342 7.9822 10.3906C7.9678 10.4122 7.9426 10.4248 7.9156 10.4248H5.509C5.4442 10.4248 5.4064 10.3546 5.4406 10.3024ZM15.8752 11.5624C15.8752 11.5966 15.8554 11.6254 15.8266 11.638C15.6448 11.7154 15.0238 12.0016 14.7664 12.3598C14.1076 13.276 13.6054 14.5864 12.4804 14.5864H7.7896C6.1264 14.5864 4.78 13.2346 4.78 11.566V11.512C4.78 11.4688 4.816 11.4328 4.861 11.4328H7.4746C7.5268 11.4328 7.5646 11.4796 7.561 11.5318C7.5412 11.701 7.5736 11.8756 7.6546 12.034C7.8094 12.349 8.1316 12.5452 8.479 12.5452H9.7732V11.5354H8.4934C8.4286 11.5354 8.389 11.4598 8.4268 11.4058C8.4412 11.3842 8.4556 11.3626 8.4736 11.3374C8.5942 11.1646 8.767 10.8982 8.9398 10.594C9.0568 10.3888 9.1702 10.1692 9.262 9.9496C9.28 9.91 9.2944 9.8686 9.3106 9.829C9.3358 9.7588 9.361 9.6922 9.379 9.6274C9.397 9.5716 9.4132 9.514 9.4276 9.46C9.4708 9.2728 9.4888 9.0748 9.4888 8.8696C9.4888 8.7886 9.4852 8.704 9.478 8.6248C9.4744 8.5366 9.4636 8.4484 9.4528 8.3602C9.4456 8.2828 9.4312 8.2054 9.4168 8.1262C9.397 8.0092 9.3718 7.8922 9.343 7.7752L9.3322 7.7302C9.3106 7.6492 9.2908 7.5736 9.2656 7.4926C9.1918 7.2406 9.109 6.994 9.019 6.7636C8.9866 6.6718 8.9506 6.5836 8.9128 6.4972C8.8588 6.364 8.803 6.2434 8.7526 6.13C8.7256 6.0778 8.704 6.031 8.6824 5.9824C8.6572 5.9284 8.632 5.8744 8.605 5.8222C8.587 5.7826 8.5654 5.7448 8.551 5.7088L8.3926 5.4172C8.371 5.3776 8.407 5.329 8.4502 5.3416L9.4402 5.6098H9.4438C9.4456 5.6098 9.4456 5.6098 9.4474 5.6098L9.577 5.6476L9.721 5.6872L9.7732 5.7016V5.1148C9.7732 4.8304 10 4.6 10.2826 4.6C10.423 4.6 10.5508 4.6576 10.6408 4.7512C10.7326 4.8448 10.7902 4.9726 10.7902 5.1148V5.9878L10.8964 6.0166C10.9036 6.0202 10.9126 6.0238 10.9198 6.0292C10.945 6.0472 10.9828 6.076 11.0296 6.112C11.0674 6.1408 11.107 6.1768 11.1538 6.2146C11.2492 6.292 11.3644 6.391 11.4886 6.5044C11.521 6.5332 11.5534 6.562 11.584 6.5926C11.7442 6.742 11.9242 6.9166 12.097 7.111C12.1456 7.1668 12.1924 7.2208 12.241 7.2802C12.2878 7.3396 12.34 7.3972 12.3832 7.4548C12.4426 7.5322 12.5038 7.6132 12.5596 7.6978C12.5848 7.7374 12.6154 7.7788 12.6388 7.8184C12.7108 7.9246 12.772 8.0344 12.8314 8.1442C12.8566 8.1946 12.8818 8.2504 12.9034 8.3044C12.97 8.452 13.0222 8.6014 13.0546 8.7526C13.0654 8.785 13.0726 8.8192 13.0762 8.8516V8.8588C13.087 8.902 13.0906 8.9488 13.0942 8.9974C13.1086 9.1504 13.1014 9.3052 13.069 9.46C13.0546 9.5248 13.0366 9.586 13.015 9.6526C12.9916 9.7156 12.97 9.7804 12.9412 9.8434C12.8854 9.9712 12.8206 10.1008 12.7432 10.2196C12.718 10.2646 12.6874 10.3114 12.6586 10.3564C12.6262 10.4032 12.592 10.4482 12.5632 10.4914C12.5218 10.5472 12.4786 10.6048 12.4336 10.657C12.394 10.711 12.3544 10.765 12.3094 10.8136C12.2482 10.8874 12.1888 10.9558 12.1258 11.0224C12.0898 11.0656 12.0502 11.1106 12.0088 11.1502C11.9692 11.1952 11.9278 11.2348 11.8918 11.2708C11.8288 11.3338 11.7784 11.3806 11.7352 11.422L11.6326 11.5138C11.6182 11.5282 11.5984 11.5354 11.5786 11.5354H10.7902V12.5452H11.782C12.0034 12.5452 12.214 12.4678 12.385 12.322C12.4426 12.2716 12.6964 12.052 12.997 11.7208C13.0078 11.7082 13.0204 11.701 13.0348 11.6974L15.7726 10.9054C15.8248 10.891 15.8752 10.9288 15.8752 10.9828V11.5624Z" fill="#9B9B9B"/>
 </svg>

public/nft/svgs/marketplaces/x2y2-grey.svg

 <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M17.146 4.52803C15.767 3.18049 13.8805 2.35 11.8 2.35C7.57502 2.35 4.15 5.77502 4.15 10C4.15 14.225 7.57502 17.65 11.8 17.65C13.8805 17.65 15.767 16.8195 17.146 15.472C15.501 17.617 12.912 19 10 19C5.02944 19 1 14.9706 1 10C1 5.02944 5.02944 1 10 1C12.912 1 15.501 2.38301 17.146 4.52803Z" fill="#5D6785"/>
-<path d="M6.08317 14.3776C7.18644 15.4556 8.69563 16.12 10.36 16.12C13.74 16.12 16.48 13.38 16.48 10C16.48 6.62002 13.74 3.88 10.36 3.88C8.69563 3.88 7.18644 4.54439 6.08317 5.62243C7.39916 3.90641 9.47037 2.8 11.8 2.8C15.7765 2.8 19 6.02355 19 10C19 13.9764 15.7764 17.2 11.8 17.2C9.47037 17.2 7.39916 16.0936 6.08317 14.3776Z" fill="#5D6785"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M15.4 10C15.4 12.9823 12.9823 15.4 10 15.4C7.01766 15.4 4.6 12.9823 4.6 10C4.6 7.01766 7.01766 4.6 10 4.6C12.9823 4.6 15.4 7.01766 15.4 10ZM13.6 10C13.6 11.9882 11.9882 13.6 10 13.6C8.01177 13.6 6.4 11.9882 6.4 10C6.4 8.01178 8.01177 6.4 10 6.4C11.9882 6.4 13.6 8.01178 13.6 10Z" fill="#5D6785"/>
+<path d="M17.146 4.52803C15.767 3.18049 13.8805 2.35 11.8 2.35C7.57502 2.35 4.15 5.77502 4.15 10C4.15 14.225 7.57502 17.65 11.8 17.65C13.8805 17.65 15.767 16.8195 17.146 15.472C15.501 17.617 12.912 19 10 19C5.02944 19 1 14.9706 1 10C1 5.02944 5.02944 1 10 1C12.912 1 15.501 2.38301 17.146 4.52803Z" fill="#9B9B9B"/>
+<path d="M6.08317 14.3776C7.18644 15.4556 8.69563 16.12 10.36 16.12C13.74 16.12 16.48 13.38 16.48 10C16.48 6.62002 13.74 3.88 10.36 3.88C8.69563 3.88 7.18644 4.54439 6.08317 5.62243C7.39916 3.90641 9.47037 2.8 11.8 2.8C15.7765 2.8 19 6.02355 19 10C19 13.9764 15.7764 17.2 11.8 17.2C9.47037 17.2 7.39916 16.0936 6.08317 14.3776Z" fill="#9B9B9B"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M15.4 10C15.4 12.9823 12.9823 15.4 10 15.4C7.01766 15.4 4.6 12.9823 4.6 10C4.6 7.01766 7.01766 4.6 10 4.6C12.9823 4.6 15.4 7.01766 15.4 10ZM13.6 10C13.6 11.9882 11.9882 13.6 10 13.6C8.01177 13.6 6.4 11.9882 6.4 10C6.4 8.01178 8.01177 6.4 10 6.4C11.9882 6.4 13.6 8.01178 13.6 10Z" fill="#9B9B9B"/>
 </svg>

src/assets/images/buy.svg

+<svg width="19" height="14" viewBox="0 0 19 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M18.7501 2.99994V4.24994H0.750122V2.99994C0.750122 0.999939 1.75012 -6.10352e-05 3.75012 -6.10352e-05H15.7501C17.7501 -6.10352e-05 18.7501 0.999939 18.7501 2.99994ZM18.7501 5.74994V10.9999C18.7501 12.9999 17.7501 13.9999 15.7501 13.9999H3.75012C1.75012 13.9999 0.750122 12.9999 0.750122 10.9999V5.74994H18.7501ZM8.50012 9.99994C8.50012 9.58594 8.16412 9.24994 7.75012 9.24994H4.75012C4.33612 9.24994 4.00012 9.58594 4.00012 9.99994C4.00012 10.4139 4.33612 10.7499 4.75012 10.7499H7.75012C8.16412 10.7499 8.50012 10.4139 8.50012 9.99994Z" fill="currentColor"/>
+</svg>

src/assets/images/gas-icon.svg

-<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M10.0047 9.26921H10.2714C11.0078 9.26921 11.6047 9.86617 11.6047 10.6025V12.1359C11.6047 12.7987 12.142 13.3359 12.8047 13.3359C13.4675 13.3359 14.0047 12.7995 14.0047 12.1367V5.22059C14.0047 4.86697 13.7758 4.56227 13.5258 4.31223L10.6714 1.33594M4.00472 2.00254H8.00472C8.7411 2.00254 9.33805 2.59949 9.33805 3.33587V14.0015H2.67139V3.33587C2.67139 2.59949 3.26834 2.00254 4.00472 2.00254ZM14.0047 5.33587C14.0047 6.07225 13.4078 6.66921 12.6714 6.66921C11.935 6.66921 11.3381 6.07225 11.3381 5.33587C11.3381 4.59949 11.935 4.00254 12.6714 4.00254C13.4078 4.00254 14.0047 4.59949 14.0047 5.33587Z" stroke="white"/>
-<line x1="4" y1="9.99414" x2="8" y2="9.99414" stroke="white"/>
-<line x1="4" y1="11.9941" x2="8" y2="11.9941" stroke="white"/>
-<path d="M4 8.16113H8" stroke="white"/>
-</svg>

src/assets/svg/eye.svg

-<svg width="54" height="40" viewBox="0 0 54 40" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M1.3335 19.9997C1.3335 19.9997 10.6668 1.33301 27.0002 1.33301C43.3335 1.33301 52.6668 19.9997 52.6668 19.9997C52.6668 19.9997 43.3335 38.6663 27.0002 38.6663C10.6668 38.6663 1.3335 19.9997 1.3335 19.9997Z" stroke="#98A1C0" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-<path d="M27.0002 26.9997C30.8662 26.9997 34.0002 23.8657 34.0002 19.9997C34.0002 16.1337 30.8662 12.9997 27.0002 12.9997C23.1342 12.9997 20.0002 16.1337 20.0002 19.9997C20.0002 23.8657 23.1342 26.9997 27.0002 26.9997Z" stroke="#98A1C0" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
+  <path d="M14.75 12C14.75 13.517 13.517 14.75 12 14.75C10.483 14.75 9.25004 13.517 9.25004 12C9.25004 11.651 9.32196 11.32 9.44096 11.012C9.63496 11.166 9.86903 11.272 10.136 11.272C10.763 11.272 11.272 10.763 11.272 10.136C11.272 9.86899 11.166 9.63492 11.012 9.44092C11.32 9.32192 11.651 9.25 12 9.25C13.517 9.25 14.75 10.483 14.75 12ZM20.5921 13.4771C19.3651 15.5311 16.609 19 12 19C7.39104 19 4.635 15.5311 3.408 13.4771C2.864 12.5671 2.864 11.4329 3.408 10.5229C4.635 8.46895 7.39104 5 12 5C16.609 5 19.3651 8.46895 20.5921 10.5229C21.1361 11.4329 21.1361 12.5671 20.5921 13.4771ZM16.25 12C16.25 9.657 14.344 7.75 12 7.75C9.65604 7.75 7.75004 9.657 7.75004 12C7.75004 14.343 9.65604 16.25 12 16.25C14.344 16.25 16.25 14.343 16.25 12Z" fill="currentColor"/>
 </svg>
\ No newline at end of file

src/assets/svg/filter.svg

+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M5.5 3H18.5C19.328 3 20 3.672 20 4.5V6.75699C20 7.15499 19.842 7.53599 19.561 7.81799L14.4399 12.939C14.1589 13.22 14.001 13.602 14.001 14V21L10.001 18V14C10.001 13.602 9.84302 13.221 9.56202 12.939L4.44104 7.81799C4.16004 7.53699 4.00196 7.15499 4.00196 6.75699V4.5C3.99996 3.672 4.672 3 5.5 3Z" fill="#9B9B9B"/>
+</svg>

src/assets/svg/gas-icon.svg

+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M15.3078 0.278393C15.7064 -0.103884 16.3395 -0.0906517 16.7217 0.307949L20.9689 4.73645C21.2428 4.97487 21.4729 5.26217 21.6459 5.58477C21.8481 5.93184 22 6.34831 22 6.8271V17.2013C22 18.7486 20.7455 20.0001 19.2 20.0001C17.6536 20.0001 16.4 18.7465 16.4 17.2001V14.9C16.4 14.3477 15.9523 13.9 15.4 13.9H15V21.0001C15 21.0691 14.9965 21.1374 14.9897 21.2046C14.9515 21.5802 14.8095 21.925 14.5927 22.2099C14.2274 22.6901 13.6499 23.0001 13 23.0001H5C4.30964 23.0001 3.70098 22.6503 3.34157 22.1183C3.12592 21.7991 3.00001 21.4143 3 21.0001V4.00003C3 2.34317 4.34315 1.00003 6 1.00003H12C13.6569 1.00003 15 2.34317 15 4.00003V11.9H15.4C17.0569 11.9 18.4 13.2432 18.4 14.9V17.2001C18.4 17.642 18.7582 18.0001 19.2 18.0001C19.6427 18.0001 20 17.6423 20 17.2013V9.82932C19.6872 9.93987 19.3506 10 19 10C17.3431 10 16 8.65688 16 7.00003C16 5.78863 16.718 4.74494 17.7517 4.27129L15.2783 1.6923C14.896 1.2937 14.9092 0.660671 15.3078 0.278393ZM19.6098 6.20743C19.441 6.07738 19.2296 6.00003 19 6.00003C18.4477 6.00003 18 6.44774 18 7.00003C18 7.55231 18.4477 8.00003 19 8.00003C19.5523 8.00003 20 7.55231 20 7.00003C20 6.84096 19.9629 6.69057 19.8968 6.55705C19.8303 6.45176 19.7349 6.33571 19.6098 6.20743ZM5 11C5 10.4477 5.44772 10 6 10H9H12C12.5523 10 13 10.4477 13 11C13 11.5523 12.5523 12 12 12H6C5.44772 12 5 11.5523 5 11ZM5 15C5 14.4477 5.44772 14 6 14H12C12.5523 14 13 14.4477 13 15C13 15.5523 12.5523 16 12 16H6C5.44772 16 5 15.5523 5 15ZM6 18C5.44772 18 5 18.4477 5 19C5 19.5523 5.44772 20 6 20H12C12.5523 20 13 19.5523 13 19C13 18.4477 12.5523 18 12 18H6Z" fill="currentColor"/>
+</svg>
\ No newline at end of file

src/assets/svg/search.svg

-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#99A1BD" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-search"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>
\ No newline at end of file
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
+  <path d="M21.53 20.47L17.689 16.629C18.973 15.106 19.75 13.143 19.75 11C19.75 6.175 15.825 2.25 11 2.25C6.175 2.25 2.25 6.175 2.25 11C2.25 15.825 6.175 19.75 11 19.75C13.143 19.75 15.106 18.973 16.629 17.689L20.47 21.53C20.616 21.676 20.808 21.75 21 21.75C21.192 21.75 21.384 21.677 21.53 21.53C21.823 21.238 21.823 20.763 21.53 20.47ZM3.75 11C3.75 7.002 7.002 3.75 11 3.75C14.998 3.75 18.25 7.002 18.25 11C18.25 14.998 14.998 18.25 11 18.25C7.002 18.25 3.75 14.998 3.75 11Z" fill="#9B9B9B"/>
+</svg>
\ No newline at end of file

src/assets/svg/settings.svg

-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-  <path
-    d="M20.83 14.6C19.9 14.06 19.33 13.07 19.33 12C19.33 10.93 19.9 9.93999 20.83 9.39999C20.99 9.29999 21.05 9.1 20.95 8.94L19.28 6.06C19.22 5.95 19.11 5.89001 19 5.89001C18.94 5.89001 18.88 5.91 18.83 5.94C18.37 6.2 17.85 6.34 17.33 6.34C16.8 6.34 16.28 6.19999 15.81 5.92999C14.88 5.38999 14.31 4.41 14.31 3.34C14.31 3.15 14.16 3 13.98 3H10.02C9.83999 3 9.69 3.15 9.69 3.34C9.69 4.41 9.12 5.38999 8.19 5.92999C7.72 6.19999 7.20001 6.34 6.67001 6.34C6.15001 6.34 5.63001 6.2 5.17001 5.94C5.01001 5.84 4.81 5.9 4.72 6.06L3.04001 8.94C3.01001 8.99 3 9.05001 3 9.10001C3 9.22001 3.06001 9.32999 3.17001 9.39999C4.10001 9.93999 4.67001 10.92 4.67001 11.99C4.67001 13.07 4.09999 14.06 3.17999 14.6H3.17001C3.01001 14.7 2.94999 14.9 3.04999 15.06L4.72 17.94C4.78 18.05 4.89 18.11 5 18.11C5.06 18.11 5.12001 18.09 5.17001 18.06C6.11001 17.53 7.26 17.53 8.19 18.07C9.11 18.61 9.67999 19.59 9.67999 20.66C9.67999 20.85 9.82999 21 10.02 21H13.98C14.16 21 14.31 20.85 14.31 20.66C14.31 19.59 14.88 18.61 15.81 18.07C16.28 17.8 16.8 17.66 17.33 17.66C17.85 17.66 18.37 17.8 18.83 18.06C18.99 18.16 19.19 18.1 19.28 17.94L20.96 15.06C20.99 15.01 21 14.95 21 14.9C21 14.78 20.94 14.67 20.83 14.6ZM12 15C10.34 15 9 13.66 9 12C9 10.34 10.34 9 12 9C13.66 9 15 10.34 15 12C15 13.66 13.66 15 12 15Z"
-    fill="currentColor" />
-</svg>
\ No newline at end of file

src/assets/svg/share.svg

-<svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="#fff">
-  <path stroke-linecap="round" stroke-linejoin="round" d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4m14-7-5-5-5 5m5-5v12"/>
-</svg>

src/assets/wallets/browser-wallet-light.svg

 <svg width="42" height="42" viewBox="0 0 42 42" fill="none" xmlns="http://www.w3.org/2000/svg">
 <rect x="1" y="1" width="40" height="40" fill="#FB118E" fill-opacity="0.12"/>
 <path fill-rule="evenodd" clip-rule="evenodd" d="M19.454 12.6305C15.6973 13.4936 12.8284 16.6822 12.4439 20.5998H16.6425C16.8586 17.7339 17.8329 14.9847 19.454 12.6305ZM23.546 12.6305C25.1671 14.9847 26.1413 17.7339 26.3574 20.5998H30.5561C30.1715 16.6822 27.3027 13.4936 23.546 12.6305ZM24.5517 20.5998C24.3127 17.7852 23.2508 15.103 21.5 12.8882C19.7491 15.103 18.6872 17.7852 18.4483 20.5998H24.5517ZM18.4483 22.3998H24.5516C24.3126 25.2143 23.2507 27.8963 21.5 30.111C19.7492 27.8963 18.6873 25.2143 18.4483 22.3998ZM16.6426 22.3998H12.4439C12.8286 26.3172 15.6974 29.5056 19.454 30.3687C17.833 28.0146 16.8587 25.2656 16.6426 22.3998ZM23.546 30.3687C25.167 28.0146 26.1412 25.2656 26.3574 22.3998H30.556C30.1713 26.3172 27.3026 29.5056 23.546 30.3687ZM21.5 32.3996C15.4801 32.3996 10.6 27.5195 10.6 21.4996C10.6 15.4797 15.4801 10.5996 21.5 10.5996C27.5199 10.5996 32.4 15.4797 32.4 21.4996V21.4998C32.3999 27.5196 27.5198 32.3996 21.5 32.3996Z" fill="#FB118E"/>
-<rect x="0.75" y="0.75" width="40.5" height="40.5" stroke="#5D6785" stroke-opacity="0.24" stroke-width="0.5"/>
+<rect x="0.75" y="0.75" width="40.5" height="40.5" stroke="#9B9B9B" stroke-opacity="0.24" stroke-width="0.5"/>
 </svg>

src/components/About/AboutFooter.tsx

@@ -88,26 +88,26 @@ const LinkGroup = styled.div`
 const LinkGroupTitle = styled.span`
   font-size: 16px;
   line-height: 20px;
-  font-weight: 700;
+  font-weight: 535;
 `
 
 const ExternalTextLink = styled(ExternalLink)`
   font-size: 16px;
   line-height: 20px;
-  color: ${({ theme }) => theme.textSecondary};
+  color: ${({ theme }) => theme.neutral2};
 `
 
 const TextLink = styled(StyledRouterLink)`
   font-size: 16px;
   line-height: 20px;
-  color: ${({ theme }) => theme.textSecondary};
+  color: ${({ theme }) => theme.neutral2};
 `
 
 const Copyright = styled.span`
   font-size: 16px;
   line-height: 20px;
   margin: 1rem 0 0 0;
-  color: ${({ theme }) => theme.textTertiary};
+  color: ${({ theme }) => theme.neutral3};
 `
 
 const LogoSectionContent = () => {

src/components/About/Card.tsx

@@ -14,10 +14,8 @@ const StyledCard = styled.div<{ $isDarkMode: boolean; $backgroundImgSrc?: string
   display: flex;
   background: ${({ $isDarkMode, $backgroundImgSrc, $type, theme }) =>
     $isDarkMode
-      ? `${$type === CardType.Primary ? theme.backgroundModule : theme.backgroundSurface} ${
-          $backgroundImgSrc ? ` url(${$backgroundImgSrc})` : ''
-        }`
-      : `${$type === CardType.Primary ? 'white' : theme.backgroundModule} url(${$backgroundImgSrc})`};
+      ? `${theme.surface2} ${$backgroundImgSrc ? ` url(${$backgroundImgSrc})` : ''}`
+      : `${$type === CardType.Primary ? 'white' : theme.surface2} url(${$backgroundImgSrc})`};
   background-size: auto 100%;
   background-position: right;
   background-repeat: no-repeat;
@@ -26,16 +24,15 @@ const StyledCard = styled.div<{ $isDarkMode: boolean; $backgroundImgSrc?: string
   flex-direction: column;
   justify-content: space-between;
   text-decoration: none;
-  color: ${({ theme }) => theme.textPrimary};
+  color: ${({ theme }) => theme.neutral1};
   padding: 24px;
   height: 212px;
   border-radius: 24px;
-  border: 1px solid ${({ theme, $type }) => ($type === CardType.Primary ? 'transparent' : theme.backgroundOutline)};
-  box-shadow: 0px 10px 24px 0px rgba(51, 53, 72, 0.04);
+  border: 1px solid ${({ theme, $type }) => ($type === CardType.Primary ? 'transparent' : theme.surface3)};
   transition: ${({ theme }) => `${theme.transition.duration.medium} ${theme.transition.timing.ease} border`};
 
   &:hover {
-    border: 1px solid ${({ theme, $isDarkMode }) => ($isDarkMode ? theme.backgroundInteractive : theme.textTertiary)};
+    border: 1px solid ${({ theme, $isDarkMode }) => ($isDarkMode ? theme.surface3 : theme.neutral3)};
   }
   @media screen and (min-width: ${BREAKPOINTS.sm}px) {
     height: ${({ $backgroundImgSrc }) => ($backgroundImgSrc ? 360 : 260)}px;
@@ -54,7 +51,7 @@ const TitleRow = styled.div`
 const CardTitle = styled.div`
   font-size: 20px;
   line-height: 28px;
-  font-weight: 600;
+  font-weight: 535;
 
   @media screen and (min-width: ${BREAKPOINTS.lg}px) {
     font-size: 28px;
@@ -65,9 +62,9 @@ const CardTitle = styled.div`
 const getCardDescriptionColor = (type: CardType, theme: DefaultTheme) => {
   switch (type) {
     case CardType.Secondary:
-      return theme.textSecondary
+      return theme.neutral2
     default:
-      return theme.textPrimary
+      return theme.neutral1
   }
 }
 
@@ -88,8 +85,8 @@ const CardDescription = styled.div<{ type: CardType }>`
 `
 
 const CardCTA = styled(CardDescription)`
-  color: ${({ theme }) => theme.accentAction};
-  font-weight: 500;
+  color: ${({ theme }) => theme.accent1};
+  font-weight: 535;
   margin: 24px 0 0;
   cursor: pointer;
 

src/components/About/ProtocolBanner.tsx

@@ -41,7 +41,7 @@ const TextContainer = styled.div`
 `
 
 const HeaderText = styled.div`
-  font-weight: 700;
+  font-weight: 535;
   font-size: 28px;
   line-height: 36px;
 
@@ -53,7 +53,7 @@ const HeaderText = styled.div`
 
 const DescriptionText = styled.div`
   margin: 10px 10px 0 0;
-  font-weight: 500;
+  font-weight: 535;
   font-size: 16px;
   line-height: 20px;
 

src/components/About/constants.tsx

@@ -44,7 +44,7 @@ export const MORE_CARDS = [
     external: true,
     title: 'Buy crypto',
     description: 'Buy crypto with your credit card or bank account at the best rates.',
-    lightIcon: <DollarSign color={lightTheme.textTertiary} size={48} />,
+    lightIcon: <DollarSign color={lightTheme.neutral3} size={48} />,
     darkIcon: <StyledCardLogo src={darkDollarImgSrc} alt="Earn" />,
     cta: 'Buy now',
     elementName: InterfaceElementName.ABOUT_PAGE_BUY_CRYPTO_CARD,
@@ -63,7 +63,7 @@ export const MORE_CARDS = [
     external: true,
     title: 'Build dApps',
     description: 'Build apps and tools on the largest DeFi protocol on Ethereum.',
-    lightIcon: <Terminal color={lightTheme.textTertiary} size={48} />,
+    lightIcon: <Terminal color={lightTheme.neutral3} size={48} />,
     darkIcon: <StyledCardLogo src={darkTerminalImgSrc} alt="Developers" />,
     cta: 'Developer docs',
     elementName: InterfaceElementName.ABOUT_PAGE_DEV_DOCS_CARD,

src/components/AccountDrawer/AuthenticatedHeader.tsx

@@ -5,6 +5,10 @@ import { useWeb3React } from '@web3-react/core'
 import { sendAnalyticsEvent, TraceEvent } from 'analytics'
 import { ButtonEmphasis, ButtonSize, LoadingButtonSpinner, ThemeButton } from 'components/Button'
 import Column from 'components/Column'
+import { ArrowChangeDown } from 'components/Icons/ArrowChangeDown'
+import { ArrowChangeUp } from 'components/Icons/ArrowChangeUp'
+import { Power } from 'components/Icons/Power'
+import { Settings } from 'components/Icons/Settings'
 import { AutoRow } from 'components/Row'
 import { LoadingBubble } from 'components/Tokens/loading'
 import { formatDelta } from 'components/Tokens/TokenDetails/PriceChart'
@@ -16,7 +20,7 @@ import { useProfilePageState, useSellAsset, useWalletCollections } from 'nft/hoo
 import { useIsNftClaimAvailable } from 'nft/hooks/useIsNftClaimAvailable'
 import { ProfilePageStateType } from 'nft/types'
 import { useCallback, useState } from 'react'
-import { ArrowDownRight, ArrowUpRight, CreditCard, IconProps, Info, LogOut, Settings } from 'react-feather'
+import { CreditCard, IconProps, Info } from 'react-feather'
 import { useNavigate } from 'react-router-dom'
 import { useAppDispatch } from 'state/hooks'
 import { updateSelectedWallet } from 'state/user/reducer'
@@ -85,9 +89,9 @@ const IconContainer = styled.div`
     }
   }
 `
-const FiatOnrampNotAvailableText = styled(ThemedText.Caption)`
+const FiatOnrampNotAvailableText = styled(ThemedText.BodySmall)`
   align-items: center;
-  color: ${({ theme }) => theme.textSecondary};
+  color: ${({ theme }) => theme.neutral2};
   display: flex;
   justify-content: center;
 `
@@ -124,7 +128,7 @@ const StyledInfoIcon = styled(Info)`
   flex: 1 1 auto;
 `
 const StyledLoadingButtonSpinner = styled(LoadingButtonSpinner)`
-  fill: ${({ theme }) => theme.accentAction};
+  fill: ${({ theme }) => theme.accent1};
 `
 
 const HeaderWrapper = styled.div`
@@ -150,16 +154,12 @@ const PortfolioDrawerContainer = styled(Column)`
 export function PortfolioArrow({ change, ...rest }: { change: number } & IconProps) {
   const theme = useTheme()
   return change < 0 ? (
-    <ArrowDownRight color={theme.accentCritical} size={20} {...rest} />
+    <ArrowChangeDown color={theme.critical} width={16} {...rest} />
   ) : (
-    <ArrowUpRight color={theme.accentSuccess} size={20} {...rest} />
+    <ArrowChangeUp color={theme.success} width={16} {...rest} />
   )
 }
 
-const LogOutCentered = styled(LogOut)`
-  transform: translateX(2px);
-`
-
 export default function AuthenticatedHeader({ account, openSettings }: { account: string; openSettings: () => void }) {
   const { connector } = useWeb3React()
   const { ENSName } = useENSName(account)
@@ -245,7 +245,7 @@ export default function AuthenticatedHeader({ account, openSettings }: { account
               </ThemedText.SubHeader>
               {/* Displays smaller view of account if ENS name was rendered above */}
               {ENSName && (
-                <ThemedText.BodySmall color="textTertiary">
+                <ThemedText.BodySmall color="neutral2">
                   <CopyText toCopy={account}>{shortenAddress(account)}</CopyText>
                 </ThemedText.BodySmall>
               )}
@@ -268,7 +268,7 @@ export default function AuthenticatedHeader({ account, openSettings }: { account
               data-testid="wallet-disconnect"
               onConfirm={disconnect}
               onShowConfirm={setShowDisconnectConfirm}
-              Icon={LogOutCentered}
+              Icon={Power}
               text="Disconnect"
               dismissOnHoverOut
             />
@@ -278,7 +278,7 @@ export default function AuthenticatedHeader({ account, openSettings }: { account
       <PortfolioDrawerContainer>
         {totalBalance !== undefined ? (
           <FadeInColumn gap="xs">
-            <ThemedText.HeadlineLarge fontWeight={500} data-testid="portfolio-total-balance">
+            <ThemedText.HeadlineLarge fontWeight={535} data-testid="portfolio-total-balance">
               {formatNumber(totalBalance, NumberType.PortfolioBalance)}
             </ThemedText.HeadlineLarge>
             <AutoRow marginBottom="20px">
@@ -305,14 +305,14 @@ export default function AuthenticatedHeader({ account, openSettings }: { account
             data-testid="nft-view-self-nfts"
             onClick={navigateToProfile}
             size={ButtonSize.medium}
-            emphasis={ButtonEmphasis.medium}
+            emphasis={ButtonEmphasis.highSoft}
           >
             <Trans>View and sell NFTs</Trans>
           </HeaderButton>
         )}
         <HeaderButton
           size={ButtonSize.medium}
-          emphasis={ButtonEmphasis.medium}
+          emphasis={ButtonEmphasis.highSoft}
           onClick={handleBuyCryptoClick}
           disabled={disableBuyCryptoButton}
           data-testid="wallet-buy-crypto"

src/components/AccountDrawer/DownloadButton.tsx

@@ -14,13 +14,13 @@ const StyledButton = styled.button<{ padded?: boolean; branded?: boolean }>`
   padding: 8px 24px;
   border: none;
   white-space: nowrap;
-  background: ${({ theme, branded }) => (branded ? theme.promotionalGradient : theme.backgroundInteractive)};
+  background: ${({ theme, branded }) => (branded ? theme.accent1 : theme.surface3)};
   border-radius: 12px;
 
-  font-weight: 600;
+  font-weight: 535;
   font-size: 14px;
   line-height: 16px;
-  color: ${({ theme, branded }) => (branded ? theme.accentTextLightPrimary : theme.textPrimary)};
+  color: ${({ theme, branded }) => (branded ? theme.deprecated_accentTextLightPrimary : theme.neutral1)};
 `
 
 function BaseButton({ onClick, branded, children }: PropsWithChildren<{ onClick?: () => void; branded?: boolean }>) {

src/components/AccountDrawer/GitVersionRow.tsx

@@ -18,7 +18,7 @@ export function GitVersionRow() {
       }}
     >
       <Tooltip text="Copied" show={isCopied}>
-        <ThemedText.BodySmall color="textTertiary">
+        <ThemedText.BodySmall color="neutral3">
           <Trans>Version: </Trans>
           {' ' + process.env.REACT_APP_GIT_COMMIT_HASH.substring(0, 6)}
         </ThemedText.BodySmall>

src/components/AccountDrawer/IconButton.tsx

@@ -7,7 +7,7 @@ import { TRANSITION_DURATIONS } from '../../theme/styles'
 import Row from '../Row'
 
 export const IconHoverText = styled.span`
-  color: ${({ theme }) => theme.textPrimary};
+  color: ${({ theme }) => theme.neutral1};
   position: absolute;
   top: 28px;
   border-radius: 8px;
@@ -22,7 +22,7 @@ const getWidthTransition = ({ theme }: { theme: DefaultTheme }) =>
   `width ${theme.transition.timing.inOut} ${theme.transition.duration.fast}`
 
 const IconStyles = css<{ hideHorizontal?: boolean }>`
-  background-color: ${({ theme }) => theme.backgroundInteractive};
+  background-color: ${({ theme }) => theme.surface1};
   transition: ${getWidthTransition};
   border-radius: 12px;
   display: flex;
@@ -32,9 +32,9 @@ const IconStyles = css<{ hideHorizontal?: boolean }>`
   overflow: hidden;
   height: 32px;
   width: ${({ hideHorizontal }) => (hideHorizontal ? '0px' : '32px')};
-  color: ${({ theme }) => theme.textPrimary};
+  color: ${({ theme }) => theme.neutral2};
   :hover {
-    background-color: ${({ theme }) => theme.hoverState};
+    background-color: ${({ theme }) => theme.surface2};
     transition: ${({
       theme: {
         transition: { duration, timing },
@@ -46,7 +46,7 @@ const IconStyles = css<{ hideHorizontal?: boolean }>`
     }
   }
   :active {
-    background-color: ${({ theme }) => theme.backgroundSurface};
+    background-color: ${({ theme }) => theme.surface1};
     transition: background-color ${({ theme }) => theme.transition.duration.fast} linear, ${getWidthTransition};
   }
 `
@@ -62,10 +62,12 @@ const IconBlockButton = styled.button`
 `
 
 const IconWrapper = styled.span`
-  width: 16px;
-  height: 16px;
+  width: 24px;
+  height: 24px;
   margin: auto;
   display: flex;
+  align-items: center;
+  justify-content: center;
 `
 interface BaseProps {
   Icon: Icon
@@ -90,7 +92,7 @@ const IconBlock = forwardRef<HTMLAnchorElement | HTMLDivElement, IconBlockProps>
 const IconButton = ({ Icon, ...rest }: IconButtonProps | IconLinkProps) => (
   <IconBlock {...rest}>
     <IconWrapper>
-      <Icon strokeWidth={1.5} size={16} />
+      <Icon size={24} />
     </IconWrapper>
   </IconBlock>
 )
@@ -108,6 +110,7 @@ const TextWrapper = styled.div`
   flex-shrink: 0;
   overflow: hidden;
   min-width: min-content;
+  font-weight: 485;
 `
 
 const TextHide = styled.div`
@@ -151,7 +154,10 @@ export const IconWithConfirmTextButton = ({
   const dimensions = (() => {
     // once opened, we avoid updating it to prevent constant resize loop
     if (!showText) {
-      dimensionsRef.current = { frame: frameObserver.width || 0, innerText: hiddenObserver.width || 0 }
+      dimensionsRef.current = {
+        frame: frameObserver.width || 0,
+        innerText: hiddenObserver.width || 0,
+      }
     }
     return dimensionsRef.current
   })()
@@ -231,7 +237,7 @@ export const IconWithConfirmTextButton = ({
     >
       <Row height="100%" gap="xs">
         <IconWrapper>
-          <Icon strokeWidth={1.5} size={16} />
+          <Icon width={24} height={24} />
         </IconWrapper>
 
         {/* this outer div is so we can cut it off but keep the inner text width full-width so we can measure it */}

src/components/AccountDrawer/LanguageMenu.tsx

@@ -18,7 +18,7 @@ const InternalLinkMenuItem = styled(Link)`
   padding: 12px 0;
   justify-content: space-between;
   text-decoration: none;
-  color: ${({ theme }) => theme.textPrimary};
+  color: ${({ theme }) => theme.neutral1};
 `
 
 function LanguageMenuItem({ locale, isActive }: { locale: SupportedLocale; isActive: boolean }) {
@@ -30,7 +30,7 @@ function LanguageMenuItem({ locale, isActive }: { locale: SupportedLocale; isAct
   return (
     <InternalLinkMenuItem onClick={onClick} to={to}>
       <ThemedText.BodySmall data-testid="wallet-language-item">{LOCALE_LABEL[locale]}</ThemedText.BodySmall>
-      {isActive && <Check color={theme.accentActive} opacity={1} size={20} />}
+      {isActive && <Check color={theme.accent1} opacity={1} size={20} />}
     </InternalLinkMenuItem>
   )
 }

src/components/AccountDrawer/MiniPortfolio/Activity/ActivityRow.tsx

@@ -19,12 +19,12 @@ import { useTimeSince } from './parseRemote'
 import { Activity } from './types'
 
 const ActivityRowDescriptor = styled(ThemedText.BodySmall)`
-  color: ${({ theme }) => theme.textSecondary};
+  color: ${({ theme }) => theme.neutral2};
   ${EllipsisStyle}
 `
 
-const StyledTimestamp = styled(ThemedText.Caption)`
-  color: ${({ theme }) => theme.textSecondary};
+const StyledTimestamp = styled(ThemedText.BodySmall)`
+  color: ${({ theme }) => theme.neutral2};
   font-variant: small;
   font-feature-settings: 'tnum' on, 'lnum' on, 'ss02' on;
 `
@@ -79,7 +79,7 @@ export function ActivityRow({ activity }: { activity: Activity }) {
           </Row>
         }
         descriptor={
-          <ActivityRowDescriptor color="textSecondary">
+          <ActivityRowDescriptor color="neutral2">
             {descriptor}
             {ENSName ?? shortenAddress(otherAccount)}
           </ActivityRowDescriptor>

src/components/AccountDrawer/MiniPortfolio/Activity/OffchainActivityModal.tsx

@@ -50,7 +50,7 @@ const StyledXButton = styled(X)`
   cursor: pointer;
   justify-self: flex-end;
 
-  color: ${({ theme }) => theme.textPrimary};
+  color: ${({ theme }) => theme.neutral1};
   ${OpacityHoverState};
 `
 
@@ -82,7 +82,7 @@ const Success = styled(AnimatedEntranceConfirmationIcon)`
 `
 
 const LearnMoreLink = styled(ExternalLink)`
-  font-weight: 600;
+  font-weight: 535;
 `
 const DescriptionText = styled(ThemedText.LabelMicro)`
   text-align: center;
@@ -136,11 +136,11 @@ export function OrderContent({ order }: { order: SelectedOrderInfo }) {
           </ThemedText.SubHeaderLarge>
           <Column>
             {amounts && <TradeSummary trade={amounts} />}
-            <ThemedText.Caption paddingTop="48px" textAlign="center">
+            <ThemedText.BodySmall paddingTop="48px" textAlign="center">
               <ExternalLink href="https://support.uniswap.org/hc/en-us/articles/17515415311501">
                 <Trans>Learn more about swapping with UniswapX</Trans>
               </ExternalLink>
-            </ThemedText.Caption>
+            </ThemedText.BodySmall>
           </Column>
         </ContentContainer>
       )
@@ -154,13 +154,13 @@ export function OrderContent({ order }: { order: SelectedOrderInfo }) {
           </ThemedText.SubHeaderLarge>
           <Column>
             {amounts && <TradeSummary trade={amounts} />}
-            <ThemedText.Caption paddingTop="48px" textAlign="center">
+            <ThemedText.BodySmall paddingTop="48px" textAlign="center">
               {explorerLink && (
                 <ExternalLink href={explorerLink}>
                   <Trans>View on Explorer</Trans>
                 </ExternalLink>
               )}
-            </ThemedText.Caption>
+            </ThemedText.BodySmall>
           </Column>
         </ContentContainer>
       )

src/components/AccountDrawer/MiniPortfolio/Activity/index.tsx

@@ -116,7 +116,7 @@ export function ActivityTab({ account }: { account: string }) {
       <PortfolioTabWrapper>
         {activityGroups.map((activityGroup) => (
           <ActivityGroupWrapper key={activityGroup.title}>
-            <ThemedText.SubHeader color="textSecondary" marginLeft="16px">
+            <ThemedText.SubHeader color="neutral2" marginLeft="16px">
               {activityGroup.title}
             </ThemedText.SubHeader>
             <Column data-testid="activity-content">

src/components/AccountDrawer/MiniPortfolio/ExpandoRow.tsx

@@ -7,13 +7,13 @@ import styled from 'styled-components'
 import { ThemedText } from 'theme'
 
 const ExpandIcon = styled(ChevronDown)<{ $expanded: boolean }>`
-  color: ${({ theme }) => theme.textSecondary};
+  color: ${({ theme }) => theme.neutral2};
   transform: ${({ $expanded }) => ($expanded ? 'rotate(180deg)' : 'rotate(0deg)')};
   transition: transform ${({ theme }) => theme.transition.duration.medium};
 `
 
 const ToggleButton = styled(Row)`
-  background-color: ${({ theme }) => theme.backgroundInteractive};
+  background-color: ${({ theme }) => theme.surface3};
   border-radius: 12px;
   padding: 4px 8px 4px 12px;
   height: 100%;
@@ -37,11 +37,11 @@ export function ExpandoRow({ title = t`Hidden`, numItems, isExpanded, toggle, ch
   return (
     <>
       <Row align="center" justify="space-between" padding="16px">
-        <ThemedText.SubHeader color="textSecondary" variant="subheadSmall">
+        <ThemedText.SubHeader color="neutral2" variant="subheadSmall">
           {`${title} (${numItems})`}
         </ThemedText.SubHeader>
         <ToggleButton align="center" onClick={toggle}>
-          <ThemedText.LabelSmall color="textSecondary" variant="buttonLabelSmall">
+          <ThemedText.LabelSmall color="neutral2" variant="buttonLabelSmall">
             {isExpanded ? t`Hide` : t`Show`}
           </ThemedText.LabelSmall>
           <ExpandIcon $expanded={isExpanded} />

src/components/AccountDrawer/MiniPortfolio/NFTs/NFTItem.tsx

@@ -90,9 +90,9 @@ function NFTDetails({ asset }: { asset: WalletAsset }) {
         {asset.collectionIsVerified && <Verified />}
       </Row>
       <FloorPrice>
-        <ThemedText.Caption color="textSecondary">
+        <ThemedText.BodySmall color="neutral2">
           {asset.floorPrice ? `${floorFormatter(asset.floorPrice)} ETH` : ' '}
-        </ThemedText.Caption>
+        </ThemedText.BodySmall>
       </FloorPrice>
     </Box>
   )

src/components/AccountDrawer/MiniPortfolio/Pools/index.tsx

@@ -101,7 +101,7 @@ export default function Pools({ account }: { account: string }) {
 
 const ActiveDot = styled.span<{ closed: boolean; outOfRange: boolean }>`
   background-color: ${({ theme, closed, outOfRange }) =>
-    closed ? theme.textSecondary : outOfRange ? theme.accentWarning : theme.accentSuccess};
+    closed ? theme.neutral2 : outOfRange ? theme.deprecated_accentWarning : theme.success};
   border-radius: 50%;
   height: 8px;
   width: 8px;
@@ -160,17 +160,20 @@ function PositionListItem({ positionInfo }: { positionInfo: PositionInfo }) {
             </ThemedText.SubHeader>
           </Row>
         }
-        descriptor={<ThemedText.Caption>{`${pool.fee / 10000}%`}</ThemedText.Caption>}
+        descriptor={<ThemedText.BodySmall>{`${pool.fee / 10000}%`}</ThemedText.BodySmall>}
         right={
           <>
             <MouseoverTooltip
               placement="left"
               text={
                 <div style={{ padding: '4px 0px' }}>
-                  <ThemedText.Caption>{`${formatNumber(
+                  <ThemedText.BodySmall>{`${formatNumber(
                     liquidityValue,
                     NumberType.PortfolioBalance
-                  )} (liquidity) + ${formatNumber(feeValue, NumberType.PortfolioBalance)} (fees)`}</ThemedText.Caption>
+                  )} (liquidity) + ${formatNumber(
+                    feeValue,
+                    NumberType.PortfolioBalance
+                  )} (fees)`}</ThemedText.BodySmall>
                 </div>
               }
             >
@@ -180,9 +183,9 @@ function PositionListItem({ positionInfo }: { positionInfo: PositionInfo }) {
             </MouseoverTooltip>
 
             <Row justify="flex-end">
-              <ThemedText.Caption color="textSecondary">
+              <ThemedText.BodySmall color="neutral2">
                 {closed ? t`Closed` : inRange ? t`In range` : t`Out of range`}
-              </ThemedText.Caption>
+              </ThemedText.BodySmall>
               <ActiveDot closed={closed} outOfRange={!inRange} />
             </Row>
           </>

src/components/AccountDrawer/MiniPortfolio/PortfolioLogo.tsx

@@ -11,7 +11,7 @@ import { Loader } from 'react-feather'
 import styled from 'styled-components'
 
 const UnknownContract = styled(UnknownStatus)`
-  color: ${({ theme }) => theme.textSecondary};
+  color: ${({ theme }) => theme.neutral2};
 `
 
 const DoubleLogoContainer = styled.div`
@@ -65,13 +65,13 @@ const CircleLogoImage = styled.img<{ size: string }>`
 `
 
 const L2LogoContainer = styled.div<{ hasSquareLogo?: boolean }>`
-  background-color: ${({ theme, hasSquareLogo }) => (hasSquareLogo ? theme.backgroundSurface : theme.textPrimary)};
+  background-color: ${({ theme, hasSquareLogo }) => (hasSquareLogo ? theme.surface2 : theme.neutral1)};
   border-radius: 2px;
   height: 16px;
   left: 60%;
   position: absolute;
   top: 60%;
-  outline: 2px solid ${({ theme }) => theme.backgroundSurface};
+  outline: 2px solid ${({ theme }) => theme.surface1};
   width: 16px;
   display: flex;
   align-items: center;

src/components/AccountDrawer/MiniPortfolio/__snapshots__/PortfolioLogo.test.tsx.snap

@@ -49,7 +49,7 @@ exports[`PortfolioLogo renders with L2 icon 1`] = `
 }
 
 .c3 {
-  background-color: #0D111C;
+  background-color: #222222;
   border-radius: 2px;
   height: 16px;
   left: 60%;

src/components/AccountDrawer/MiniPortfolio/index.tsx

@@ -30,7 +30,7 @@ const Wrapper = styled(Column)`
 
   ${PortfolioRowWrapper} {
     &:hover {
-      background: ${({ theme }) => theme.hoverDefault};
+      background: ${({ theme }) => theme.deprecated_hoverDefault};
     }
   }
 `
@@ -41,14 +41,14 @@ const Nav = styled(AutoRow)`
 
 const NavItem = styled(ThemedText.SubHeader)<{ active?: boolean }>`
   align-items: center;
-  color: ${({ theme, active }) => (active ? theme.textPrimary : theme.textTertiary)};
+  color: ${({ theme, active }) => (active ? theme.neutral1 : theme.neutral2)};
   cursor: pointer;
   display: flex;
   justify-content: space-between;
   transition: ${({ theme }) => `${theme.transition.duration.medium} ${theme.transition.timing.ease} color`};
 
   &:hover {
-    ${({ theme, active }) => !active && `color: ${theme.textSecondary}`};
+    ${({ theme, active }) => !active && `color: ${theme.neutral2}`};
   }
 `
 
@@ -137,7 +137,7 @@ export default function MiniPortfolio({ account }: { account: string }) {
                         <LoaderV2 />
                       ) : (
                         <svg width="8" height="8" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg">
-                          <circle cx="4" cy="4" r="4" fill={theme.accentAction} />
+                          <circle cx="4" cy="4" r="4" fill={theme.accent1} />
                         </svg>
                       )}
                     </>

src/components/AccountDrawer/SettingsMenu.tsx

@@ -23,7 +23,7 @@ const Container = styled(Column)`
 `
 
 const SectionTitle = styled(ThemedText.SubHeader)`
-  color: ${({ theme }) => theme.textSecondary};
+  color: ${({ theme }) => theme.neutral2};
   padding-bottom: 24px;
 `
 
@@ -39,7 +39,7 @@ const SettingsButtonWrapper = styled(Row)`
 `
 
 const StyledChevron = styled(ChevronRight)`
-  color: ${({ theme }) => theme.textSecondary};
+  color: ${({ theme }) => theme.neutral2};
 `
 
 const LanguageLabel = styled(Row)`

src/components/AccountDrawer/SettingsToggle.tsx

@@ -6,6 +6,7 @@ import { ThemedText } from 'theme'
 
 const StyledColumn = styled(Column)`
   width: 100%;
+  margin-right: 10px;
 `
 
 interface SettingsToggleProps {
@@ -21,13 +22,13 @@ export function SettingsToggle({ title, description, dataid, isActive, toggle }:
     <Row align="center">
       <StyledColumn>
         <Row>
-          <ThemedText.SubHeaderSmall color="textPrimary">{title}</ThemedText.SubHeaderSmall>
+          <ThemedText.SubHeaderSmall color="neutral1">{title}</ThemedText.SubHeaderSmall>
         </Row>
         {description && (
           <Row>
-            <ThemedText.Caption color="textSecondary" lineHeight="16px">
+            <ThemedText.BodySmall color="neutral2" lineHeight="16px">
               {description}
-            </ThemedText.Caption>
+            </ThemedText.BodySmall>
           </Row>
         )}
       </StyledColumn>

src/components/AccountDrawer/SlideOutMenu.tsx

@@ -27,7 +27,7 @@ const StyledArrow = styled(ArrowLeft)`
 `
 
 const Header = styled.div`
-  color: ${({ theme }) => theme.textPrimary};
+  color: ${({ theme }) => theme.neutral1};
 
   display: flex;
   justify-content: space-between;

src/components/AccountDrawer/UniwalletModal.tsx

@@ -34,7 +34,7 @@ const QRCodeWrapper = styled(RowBetween)`
   padding: 10px;
 `
 const Divider = styled.div`
-  border-bottom: 1px solid ${({ theme }) => theme.backgroundOutline};
+  border-bottom: 1px solid ${({ theme }) => theme.surface3};
   width: 100%;
 `
 
@@ -77,7 +77,7 @@ export default function UniwalletModal() {
               width="100%"
               height="100%"
               level="M"
-              fgColor={theme.darkMode ? theme.backgroundSurface : theme.black}
+              fgColor={theme.darkMode ? theme.surface1 : theme.black}
               imageSettings={{
                 src: uniPng,
                 height: 33,
@@ -105,14 +105,14 @@ function InfoSection() {
   return (
     <InfoSectionWrapper>
       <AutoColumn gap="4px">
-        <ThemedText.SubHeaderSmall color="textPrimary">
+        <ThemedText.SubHeaderSmall color="neutral1">
           <Trans>Don&apos;t have Uniswap Wallet?</Trans>
         </ThemedText.SubHeaderSmall>
-        <ThemedText.Caption color="textSecondary">
+        <ThemedText.BodySmall color="neutral2">
           <Trans>
             Download in the App Store to safely store your tokens and NFTs, swap tokens, and connect to crypto apps.
           </Trans>
-        </ThemedText.Caption>
+        </ThemedText.BodySmall>
       </AutoColumn>
       <Column>
         <DownloadButton element={InterfaceElementName.UNISWAP_WALLET_MODAL_DOWNLOAD_BUTTON} />

src/components/AccountDrawer/index.tsx

@@ -48,7 +48,7 @@ const ScrimBackground = styled.div<{ open: boolean }>`
   position: fixed;
   width: 100%;
   height: 100%;
-  background-color: ${({ theme }) => theme.backgroundScrim};
+  background-color: ${({ theme }) => theme.scrim};
 
   opacity: 0;
   pointer-events: none;
@@ -129,15 +129,15 @@ const AccountDrawerWrapper = styled.div<{ open: boolean }>`
   border-radius: 12px;
   width: ${DRAWER_WIDTH};
   font-size: 16px;
-  background-color: ${({ theme }) => theme.backgroundSurface};
-  border: ${({ theme }) => `1px solid ${theme.backgroundOutline}`};
+  background-color: ${({ theme }) => theme.surface1};
+  border: ${({ theme }) => `1px solid ${theme.surface3}`};
 
-  box-shadow: ${({ theme }) => theme.deepShadow};
+  box-shadow: ${({ theme }) => theme.deprecated_deepShadow};
   transition: margin-right ${({ theme }) => theme.transition.duration.medium};
 `
 
 const CloseIcon = styled(ChevronsRight).attrs({ size: 24 })`
-  stroke: ${({ theme }) => theme.textSecondary};
+  stroke: ${({ theme }) => theme.neutral2};
 `
 
 const CloseDrawer = styled.div`
@@ -152,7 +152,7 @@ const CloseDrawer = styled.div`
   &:hover {
     z-index: -1;
     margin: 0 -8px 0 0;
-    background-color: ${({ theme }) => theme.stateOverlayHover};
+    background-color: ${({ theme }) => theme.deprecated_stateOverlayHover};
   }
   @media only screen and (max-width: ${({ theme }) => `${theme.breakpoint.sm}px`}) {
     display: none;

src/components/AddressInputPanel/index.tsx

@@ -16,7 +16,7 @@ const InputPanel = styled.div`
   ${flexColumnNoWrap};
   position: relative;
   border-radius: 1.25rem;
-  background-color: ${({ theme }) => theme.deprecated_bg1};
+  background-color: ${({ theme }) => theme.surface1};
   z-index: 1;
   width: 100%;
 `
@@ -26,10 +26,10 @@ const ContainerRow = styled.div<{ error: boolean }>`
   justify-content: center;
   align-items: center;
   border-radius: 1.25rem;
-  border: 1px solid ${({ error, theme }) => (error ? theme.accentFailure : theme.backgroundInteractive)};
+  border: 1px solid ${({ error, theme }) => (error ? theme.critical : theme.surface3)};
   transition: border-color 300ms ${({ error }) => (error ? 'step-end' : 'step-start')},
     color 500ms ${({ error }) => (error ? 'step-end' : 'step-start')};
-  background-color: ${({ theme }) => theme.deprecated_bg1};
+  background-color: ${({ theme }) => theme.surface1};
 `
 
 const InputContainer = styled.div`
@@ -43,15 +43,15 @@ const Input = styled.input<{ error?: boolean }>`
   border: none;
   flex: 1 1 auto;
   width: 0;
-  background-color: ${({ theme }) => theme.deprecated_bg1};
+  background-color: ${({ theme }) => theme.surface1};
   transition: color 300ms ${({ error }) => (error ? 'step-end' : 'step-start')};
-  color: ${({ error, theme }) => (error ? theme.accentFailure : theme.textPrimary)};
+  color: ${({ error, theme }) => (error ? theme.critical : theme.neutral1)};
   overflow: hidden;
   text-overflow: ellipsis;
-  font-weight: 500;
+  font-weight: 535;
   width: 100%;
   ::placeholder {
-    color: ${({ theme }) => theme.deprecated_text4};
+    color: ${({ theme }) => theme.neutral3};
   }
   padding: 0px;
   -webkit-appearance: textfield;
@@ -66,7 +66,7 @@ const Input = styled.input<{ error?: boolean }>`
   }
 
   ::placeholder {
-    color: ${({ theme }) => theme.deprecated_text4};
+    color: ${({ theme }) => theme.neutral3};
   }
 `
 
@@ -109,7 +109,7 @@ export default function AddressInputPanel({
         <InputContainer>
           <AutoColumn gap="md">
             <RowBetween>
-              <ThemedText.DeprecatedBlack color={theme.textSecondary} fontWeight={500} fontSize={14}>
+              <ThemedText.DeprecatedBlack color={theme.neutral2} fontWeight={535} fontSize={14}>
                 {label ?? <Trans>Recipient</Trans>}
               </ThemedText.DeprecatedBlack>
               {address && chainId && (

src/components/AirdropModal/index.tsx

@@ -32,7 +32,7 @@ const Body = styled.div`
 
 const ClaimButton = styled(ThemeButton)`
   width: 100%;
-  background-color: ${({ theme }) => theme.accentAction};
+  background-color: ${({ theme }) => theme.accent1};
   border-radius: 12px;
   color: ${({ theme }) => theme.white};
 `
@@ -62,7 +62,7 @@ const StyledImage = styled.img`
 `
 
 const USDCLabel = styled.div`
-  font-weight: 700;
+  font-weight: 535;
   font-size: 36px;
   line-height: 44px;
   margin-top: 8px;
@@ -84,7 +84,7 @@ const RewardsDetailsContainer = styled.div`
 
 const CurrencyText = styled.span`
   color: white;
-  font-weight: 500;
+  font-weight: 535;
   font-size: 12px;
   line-height: 14.5px;
 `
@@ -99,7 +99,7 @@ const ClaimContainer = styled.div`
 `
 
 const SuccessText = styled.div`
-  font-weight: 400;
+  font-weight: 485;
   font-size: 16px;
   line-height: 24px;
   margin-top: 24px;
@@ -128,8 +128,8 @@ const SyledCloseIcon = styled(CloseIcon)`
 
 const Error = styled.div`
   display: flex;
-  color: ${({ theme }) => theme.accentCritical};
-  font-weight: 500;
+  color: ${({ theme }) => theme.critical};
+  font-weight: 535;
   line-height: 24px;
   border-radius: 16px;
   padding: 12px 20px;
@@ -156,12 +156,12 @@ const RewardsInformationText = styled.span`
   display: inline-block;
   font-size: 14px;
   line-height: 20px;
-  color: ${({ theme }) => theme.textPrimary};
+  color: ${({ theme }) => theme.neutral1};
   margin-bottom: 28px;
 `
 
 const MainHeader = styled.span`
-  font-weight: 600;
+  font-weight: 535;
   font-size: 16px;
   line-height: 20px;
   color: ${({ theme }) => theme.white};

src/components/Badge/RangeBadge.tsx

@@ -11,14 +11,14 @@ const BadgeWrapper = styled.div`
 `
 
 const BadgeText = styled.div`
-  font-weight: 500;
+  font-weight: 535;
   font-size: 12px;
   line-height: 14px;
   margin-right: 8px;
 `
 
 const ActiveDot = styled.span`
-  background-color: ${({ theme }) => theme.accentSuccess};
+  background-color: ${({ theme }) => theme.success};
   border-radius: 50%;
   height: 8px;
   width: 8px;
@@ -38,7 +38,7 @@ export default function RangeBadge({ removed, inRange }: { removed?: boolean; in
     <BadgeWrapper>
       {removed ? (
         <MouseoverTooltip text={<Trans>Your position has 0 liquidity, and is not earning fees.</Trans>}>
-          <LabelText color={theme.textSecondary}>
+          <LabelText color={theme.neutral2}>
             <BadgeText>
               <Trans>Closed</Trans>
             </BadgeText>
@@ -53,7 +53,7 @@ export default function RangeBadge({ removed, inRange }: { removed?: boolean; in
             </Trans>
           }
         >
-          <LabelText color={theme.accentSuccess}>
+          <LabelText color={theme.success}>
             <BadgeText>
               <Trans>In Range</Trans>
             </BadgeText>
@@ -68,7 +68,7 @@ export default function RangeBadge({ removed, inRange }: { removed?: boolean; in
             </Trans>
           }
         >
-          <LabelText color={theme.accentWarning}>
+          <LabelText color={theme.deprecated_accentWarning}>
             <BadgeText>
               <Trans>Out of range</Trans>
             </BadgeText>

src/components/Badge/index.tsx

@@ -26,26 +26,26 @@ function pickBackgroundColor(variant: BadgeVariant | undefined, theme: DefaultTh
     case BadgeVariant.PROMOTIONAL:
       return theme.promotionalGradient
     case BadgeVariant.NEGATIVE:
-      return theme.accentCritical
+      return theme.critical
     case BadgeVariant.POSITIVE:
-      return theme.accentSuccess
+      return theme.success
     case BadgeVariant.SOFT:
-      return theme.accentActionSoft
+      return theme.accent2
     case BadgeVariant.PRIMARY:
-      return theme.accentAction
+      return theme.accent1
     case BadgeVariant.WARNING:
-      return theme.accentWarning
+      return theme.deprecated_accentWarning
     case BadgeVariant.WARNING_OUTLINE:
       return 'transparent'
     default:
-      return theme.backgroundInteractive
+      return theme.surface2
   }
 }
 
 function pickBorder(variant: BadgeVariant | undefined, theme: DefaultTheme): string {
   switch (variant) {
     case BadgeVariant.WARNING_OUTLINE:
-      return `1px solid ${theme.accentWarning}`
+      return `1px solid ${theme.deprecated_accentWarning}`
     default:
       return 'unset'
   }
@@ -54,19 +54,19 @@ function pickBorder(variant: BadgeVariant | undefined, theme: DefaultTheme): str
 function pickFontColor(variant: BadgeVariant | undefined, theme: DefaultTheme): string {
   switch (variant) {
     case BadgeVariant.BRANDED:
-      return theme.darkMode ? theme.accentTextDarkPrimary : theme.white
+      return theme.darkMode ? theme.neutral1 : theme.white
     case BadgeVariant.NEGATIVE:
-      return readableColor(theme.accentFailure)
+      return readableColor(theme.critical)
     case BadgeVariant.POSITIVE:
-      return readableColor(theme.accentSuccess)
+      return readableColor(theme.success)
     case BadgeVariant.SOFT:
-      return theme.accentAction
+      return theme.accent1
     case BadgeVariant.WARNING:
-      return readableColor(theme.accentWarning)
+      return readableColor(theme.deprecated_accentWarning)
     case BadgeVariant.WARNING_OUTLINE:
-      return theme.accentWarning
+      return theme.deprecated_accentWarning
     default:
-      return readableColor(theme.backgroundInteractive)
+      return readableColor(theme.neutral2)
   }
 }
 
@@ -79,7 +79,7 @@ const Badge = styled.div<PropsWithChildren<BadgeProps>>`
   display: inline-flex;
   padding: 4px 6px;
   justify-content: center;
-  font-weight: 500;
+  font-weight: 535;
 `
 
 export default Badge

src/components/Banner/BaseAnnouncementBanner/styled.tsx

@@ -25,7 +25,7 @@ export const PopupContainer = styled.div<{ show: boolean }>`
     ${({ theme }) => theme.transition.timing.inOut};
 
   background-color: ${({ theme }) => theme.chain_84531};
-  color: ${({ theme }) => theme.textPrimary};
+  color: ${({ theme }) => theme.neutral1};
   position: fixed;
   z-index: ${Z_INDEX.sticky};
 
@@ -37,9 +37,9 @@ export const PopupContainer = styled.div<{ show: boolean }>`
   width: 390px;
   height: 164px;
 
-  border: 1px solid ${({ theme }) => theme.backgroundOutline};
+  border: 1px solid ${({ theme }) => theme.surface3};
 
-  box-shadow: ${({ theme }) => theme.deepShadow};
+  box-shadow: ${({ theme }) => theme.deprecated_deepShadow};
 
   @media only screen and (max-width: ${({ theme }) => `${theme.breakpoint.md}px`}) {
     bottom: 62px;

src/components/Card/index.tsx

@@ -10,34 +10,36 @@ const Card = styled(Box)<{ width?: string; padding?: string; border?: string; $b
 export default Card
 
 export const LightCard = styled(Card)`
-  border: 1px solid ${({ theme }) => theme.backgroundInteractive};
-  background-color: ${({ theme }) => theme.deprecated_bg1};
+  border: 1px solid ${({ theme }) => theme.surface3};
+  background-color: ${({ theme }) => theme.surface2};
 `
 
 export const GrayCard = styled(Card)`
-  background-color: ${({ theme }) => theme.deprecated_bg3};
+  background-color: ${({ theme }) => theme.surface2};
 `
 
 export const DarkGrayCard = styled(Card)`
-  background-color: ${({ theme }) => theme.backgroundInteractive};
+  background-color: ${({ theme }) => theme.surface3};
 `
 
 export const DarkCard = styled(Card)`
-  background-color: ${({ theme }) => theme.backgroundSurface};
+  background-color: ${({ theme }) => theme.surface1};
+  border: 1px solid ${({ theme }) => theme.surface3};
 `
 
 export const OutlineCard = styled(Card)`
-  border: 1px solid ${({ theme }) => theme.deprecated_bg3};
+  border: 1px solid ${({ theme }) => theme.surface3};
+  background-color: ${({ theme }) => theme.surface2};
 `
 
 export const YellowCard = styled(Card)`
   background-color: rgba(243, 132, 30, 0.05);
   color: ${({ theme }) => theme.deprecated_yellow3};
-  font-weight: 500;
+  font-weight: 535;
 `
 
 export const BlueCard = styled(Card)`
-  background-color: ${({ theme }) => theme.deprecated_primary5};
-  color: ${({ theme }) => theme.accentAction};
+  background-color: ${({ theme }) => theme.accent2};
+  color: ${({ theme }) => theme.accent1};
   border-radius: 12px;
 `

src/components/Charts/AnimatedInLineChart.tsx

@@ -57,7 +57,7 @@ function AnimatedInLineChart<T>({
     }
   })
   const theme = useTheme()
-  const lineColor = color ?? theme.accentAction
+  const lineColor = color ?? theme.accent1
 
   return (
     <Group top={marginTop}>

src/components/Charts/FadeInLineChart.tsx

@@ -57,7 +57,7 @@ function FadedInLineChart<T>({
     }
   })
   const theme = useTheme()
-  const lineColor = color ?? theme.accentAction
+  const lineColor = color ?? theme.accent1
 
   return (
     <Group top={marginTop}>

src/components/Charts/LineChart.tsx

@@ -36,7 +36,7 @@ function LineChart<T>({
       <Group top={marginTop}>
         <LinePath
           curve={curve}
-          stroke={color ?? theme.accentAction}
+          stroke={color ?? theme.accent1}
           strokeWidth={strokeWidth}
           data={data}
           x={getX}

src/components/Charts/SparklineChart.tsx

@@ -58,7 +58,7 @@ function _SparklineChart({ width, height, tokenData, pricePercentChange, sparkli
       getY={(p: PricePoint) => rdScale(p.value)}
       curve={curveCardinal.tension(curveTension)}
       marginTop={5}
-      color={pricePercentChange && pricePercentChange < 0 ? theme.accentFailure : theme.accentSuccess}
+      color={pricePercentChange && pricePercentChange < 0 ? theme.critical : theme.success}
       strokeWidth={1.5}
       width={width}
       height={height}

src/components/Common/index.tsx

@@ -3,7 +3,7 @@ import { css } from 'styled-components'
 export const ScrollBarStyles = css<{ $isHorizontalScroll?: boolean }>`
   // Firefox scrollbar styling
   scrollbar-width: thin;
-  scrollbar-color: ${({ theme }) => `${theme.backgroundOutline} transparent`};
+  scrollbar-color: ${({ theme }) => `${theme.surface3} transparent`};
   height: 100%;
 
   // safari and chrome scrollbar styling
@@ -25,7 +25,7 @@ export const ScrollBarStyles = css<{ $isHorizontalScroll?: boolean }>`
   }
 
   ::-webkit-scrollbar-thumb {
-    background: ${({ theme }) => theme.backgroundOutline};
+    background: ${({ theme }) => theme.surface3};
     border-radius: 8px;
   }
 `

src/components/ConnectedAccountBlocked/index.tsx

@@ -45,7 +45,7 @@ export default function ConnectedAccountBlocked(props: ConnectedAccountBlockedPr
           toCopy="compliance@uniswap.org"
           fontSize={14}
           iconSize={16}
-          color={theme.accentAction}
+          color={theme.accent1}
           iconPosition="right"
         >
           compliance@uniswap.org

src/components/CurrencyInputPanel/FiatValue.tsx

@@ -24,11 +24,11 @@ export function FiatValue({
 }) {
   const priceImpactColor = useMemo(() => {
     if (!priceImpact) return undefined
-    if (priceImpact.lessThan('0')) return 'accentSuccess'
+    if (priceImpact.lessThan('0')) return 'success'
     const severity = warningSeverity(priceImpact)
-    if (severity < 1) return 'textTertiary'
+    if (severity < 1) return 'neutral3'
     if (severity < 3) return 'deprecated_yellow1'
-    return 'accentFailure'
+    return 'critical'
   }, [priceImpact])
 
   if (fiatValue.isLoading) {
@@ -37,7 +37,7 @@ export function FiatValue({
 
   return (
     <Row gap="sm">
-      <ThemedText.BodySmall color="textSecondary">
+      <ThemedText.BodySmall color="neutral2">
         {fiatValue.data ? (
           formatNumber(fiatValue.data, NumberType.FiatTokenPrice)
         ) : (

src/components/CurrencyInputPanel/SwapCurrencyInputPanel.tsx

@@ -60,27 +60,27 @@ const CurrencySelect = styled(ButtonGray)<{
   disabled?: boolean
 }>`
   align-items: center;
-  background-color: ${({ selected, theme }) => (selected ? theme.backgroundInteractive : theme.accentAction)};
+  background-color: ${({ selected, theme }) => (selected ? theme.surface1 : theme.accent1)};
   opacity: ${({ disabled }) => (!disabled ? 1 : 0.4)};
-  box-shadow: ${({ selected }) => (selected ? 'none' : '0px 6px 10px rgba(0, 0, 0, 0.075)')};
-  color: ${({ selected, theme }) => (selected ? theme.textPrimary : theme.white)};
+  color: ${({ selected, theme }) => (selected ? theme.neutral1 : theme.white)};
   cursor: pointer;
   height: unset;
   border-radius: 16px;
   outline: none;
   user-select: none;
-  border: none;
+  border: 1px solid ${({ selected, theme }) => (selected ? theme.surface3 : theme.accent1)};
   font-size: 24px;
-  font-weight: 500;
+  font-weight: 485;
   width: ${({ hideInput }) => (hideInput ? '100%' : 'initial')};
   padding: ${({ selected }) => (selected ? '4px 8px 4px 4px' : '6px 6px 6px 8px')};
   gap: 8px;
   justify-content: space-between;
   margin-left: ${({ hideInput }) => (hideInput ? '0' : '12px')};
+  box-shadow: ${({ theme }) => theme.deprecated_shallowShadow};
 
   &:hover,
   &:active {
-    background-color: ${({ theme, selected }) => (selected ? theme.backgroundInteractive : theme.accentAction)};
+    background-color: ${({ theme, selected }) => (selected ? theme.surface2 : theme.accent1)};
   }
 
   &:before {
@@ -97,11 +97,11 @@ const CurrencySelect = styled(ButtonGray)<{
   }
 
   &:hover:before {
-    background-color: ${({ theme }) => theme.stateOverlayHover};
+    background-color: ${({ theme }) => theme.deprecated_stateOverlayHover};
   }
 
   &:active:before {
-    background-color: ${({ theme }) => theme.stateOverlayPressed};
+    background-color: ${({ theme }) => theme.deprecated_stateOverlayPressed};
   }
 
   visibility: ${({ visible }) => (visible ? 'visible' : 'hidden')};
@@ -116,19 +116,19 @@ const InputRow = styled.div`
 const LabelRow = styled.div`
   ${flexRowNoWrap};
   align-items: center;
-  color: ${({ theme }) => theme.textSecondary};
+  color: ${({ theme }) => theme.neutral2};
   font-size: 0.75rem;
   line-height: 1rem;
 
   span:hover {
     cursor: pointer;
-    color: ${({ theme }) => darken(0.2, theme.textSecondary)};
+    color: ${({ theme }) => darken(0.2, theme.neutral2)};
   }
 `
 
 const FiatRow = styled(LabelRow)`
   justify-content: flex-end;
-  min-height: 20px;
+  min-height: 24px;
   padding: 8px 0px 0px 0px;
 `
 
@@ -145,7 +145,7 @@ const StyledDropDown = styled(DropDown)<{ selected: boolean }>`
   margin-left: 8px;
 
   path {
-    stroke: ${({ selected, theme }) => (selected ? theme.textPrimary : theme.white)};
+    stroke: ${({ selected, theme }) => (selected ? theme.neutral1 : theme.white)};
     stroke-width: 2px;
   }
 `
@@ -153,16 +153,16 @@ const StyledDropDown = styled(DropDown)<{ selected: boolean }>`
 const StyledTokenName = styled.span<{ active?: boolean }>`
   ${({ active }) => (active ? '  margin: 0 0.25rem 0 0.25rem;' : '  margin: 0 0.25rem 0 0.25rem;')}
   font-size: 20px;
-  font-weight: 600;
+  font-weight: 535;
 `
 
 const StyledBalanceMax = styled.button<{ disabled?: boolean }>`
   background-color: transparent;
   border: none;
-  color: ${({ theme }) => theme.accentAction};
+  color: ${({ theme }) => theme.accent1};
   cursor: pointer;
   font-size: 14px;
-  font-weight: 600;
+  font-weight: 535;
   opacity: ${({ disabled }) => (!disabled ? 1 : 0.4)};
   padding: 4px 6px;
   pointer-events: ${({ disabled }) => (!disabled ? 'initial' : 'none')};
@@ -180,8 +180,8 @@ const StyledNumericalInput = styled(NumericalInput)<{ $loading: boolean }>`
   ${loadingOpacityMixin};
   text-align: left;
   font-size: 36px;
-  line-height: 44px;
-  font-variant: small-caps;
+  font-weight: 485;
+  max-height: 44px;
 `
 
 interface SwapCurrencyInputPanelProps {
@@ -249,14 +249,14 @@ export default function SwapCurrencyInputPanel({
         <FixedContainer>
           <AutoColumn gap="sm" justify="center">
             <Lock />
-            <ThemedText.DeprecatedLabel fontSize="12px" textAlign="center" padding="0 12px">
+            <ThemedText.BodySecondary fontSize="12px" textAlign="center" padding="0 12px">
               <Trans>The market price is outside your specified price range. Single-asset deposit only.</Trans>
-            </ThemedText.DeprecatedLabel>
+            </ThemedText.BodySecondary>
           </AutoColumn>
         </FixedContainer>
       )}
       <Container hideInput={hideInput}>
-        <ThemedText.SubHeaderSmall color="textTertiary">{label}</ThemedText.SubHeaderSmall>
+        <ThemedText.SubHeaderSmall style={{ userSelect: 'none' }}>{label}</ThemedText.SubHeaderSmall>
         <InputRow style={hideInput ? { padding: '0', borderRadius: '8px' } : {}}>
           {!hideInput && (
             <StyledNumericalInput
@@ -315,11 +315,11 @@ export default function SwapCurrencyInputPanel({
                 {fiatValue && <FiatValue fiatValue={fiatValue} priceImpact={priceImpact} />}
               </LoadingOpacityContainer>
               {account ? (
-                <RowFixed style={{ height: '17px' }}>
+                <RowFixed style={{ height: '16px' }}>
                   <ThemedText.DeprecatedBody
                     data-testid="balance-text"
-                    color={theme.textSecondary}
-                    fontWeight={400}
+                    color={theme.neutral2}
+                    fontWeight={485}
                     fontSize={14}
                     style={{ display: 'inline' }}
                   >

src/components/CurrencyInputPanel/index.tsx

@@ -27,7 +27,8 @@ const InputPanel = styled.div<{ hideInput?: boolean }>`
   ${flexColumnNoWrap};
   position: relative;
   border-radius: ${({ hideInput }) => (hideInput ? '16px' : '20px')};
-  background-color: ${({ theme, hideInput }) => (hideInput ? 'transparent' : theme.backgroundInteractive)};
+  background-color: ${({ theme, hideInput }) => (hideInput ? 'transparent' : theme.surface2)};
+
   z-index: 1;
   width: ${({ hideInput }) => (hideInput ? '100%' : 'initial')};
   transition: height 1s ease;
@@ -36,15 +37,15 @@ const InputPanel = styled.div<{ hideInput?: boolean }>`
 
 const Container = styled.div<{ hideInput: boolean; disabled: boolean }>`
   border-radius: ${({ hideInput }) => (hideInput ? '16px' : '20px')};
-  border: 1px solid ${({ theme }) => theme.backgroundSurface};
-  background-color: ${({ theme }) => theme.deprecated_bg1};
+  border: 1px solid ${({ theme }) => theme.surface3};
+  background-color: ${({ theme }) => theme.surface2};
   width: ${({ hideInput }) => (hideInput ? '100%' : 'initial')};
   ${({ theme, hideInput, disabled }) =>
     !disabled &&
     `
     :focus,
     :hover {
-      border: 1px solid ${hideInput ? ' transparent' : theme.deprecated_bg3};
+      border: 1px solid ${hideInput ? ' transparent' : theme.surface2};
     }
   `}
 `
@@ -57,16 +58,17 @@ const CurrencySelect = styled(ButtonGray)<{
   pointerEvents?: string
 }>`
   align-items: center;
-  background-color: ${({ selected, theme }) => (selected ? theme.backgroundInteractive : theme.accentAction)};
+  background-color: ${({ selected, theme }) => (selected ? theme.surface1 : theme.accent1)};
   opacity: ${({ disabled }) => (!disabled ? 1 : 0.4)};
-  color: ${({ selected, theme }) => (selected ? theme.textPrimary : theme.white)};
+  box-shadow: ${({ theme }) => theme.deprecated_shallowShadow};
+  color: ${({ selected, theme }) => (selected ? theme.neutral1 : theme.white)};
   cursor: pointer;
   border-radius: 16px;
   outline: none;
   user-select: none;
   border: none;
   font-size: 24px;
-  font-weight: 500;
+  font-weight: 535;
   height: ${({ hideInput }) => (hideInput ? '2.8rem' : '2.4rem')};
   width: ${({ hideInput }) => (hideInput ? '100%' : 'initial')};
   padding: 0 8px;
@@ -74,7 +76,7 @@ const CurrencySelect = styled(ButtonGray)<{
   margin-left: ${({ hideInput }) => (hideInput ? '0' : '12px')};
   :focus,
   :hover {
-    background-color: ${({ selected, theme }) => (selected ? theme.deprecated_bg3 : darken(0.05, theme.accentAction))};
+    background-color: ${({ selected, theme }) => (selected ? theme.surface2 : darken(0.05, theme.accent1))};
   }
   visibility: ${({ visible }) => (visible ? 'visible' : 'hidden')};
   ${({ pointerEvents }) => pointerEvents && `pointer-events: none`}
@@ -90,13 +92,13 @@ const InputRow = styled.div<{ selected: boolean }>`
 const LabelRow = styled.div`
   ${flexRowNoWrap};
   align-items: center;
-  color: ${({ theme }) => theme.textPrimary};
+  color: ${({ theme }) => theme.neutral1};
   font-size: 0.75rem;
   line-height: 1rem;
   padding: 0 1rem 1rem;
   span:hover {
     cursor: pointer;
-    color: ${({ theme }) => darken(0.2, theme.textSecondary)};
+    color: ${({ theme }) => darken(0.2, theme.neutral2)};
   }
 `
 
@@ -106,11 +108,13 @@ const FiatRow = styled(LabelRow)`
   height: 32px;
 `
 
+// note the line height 0 ensures even if we change font/font-size it doesn't break centering
 const Aligner = styled.span`
   display: flex;
   align-items: center;
   justify-content: space-between;
   width: 100%;
+  line-height: 0px;
 `
 
 const StyledDropDown = styled(DropDown)<{ selected: boolean }>`
@@ -118,7 +122,7 @@ const StyledDropDown = styled(DropDown)<{ selected: boolean }>`
   height: 35%;
 
   path {
-    stroke: ${({ selected, theme }) => (selected ? theme.textPrimary : theme.white)};
+    stroke: ${({ selected, theme }) => (selected ? theme.neutral1 : theme.white)};
     stroke-width: 1.5px;
   }
 `
@@ -130,13 +134,13 @@ const StyledTokenName = styled.span<{ active?: boolean }>`
 
 const StyledBalanceMax = styled.button<{ disabled?: boolean }>`
   background-color: transparent;
-  background-color: ${({ theme }) => theme.deprecated_primary5};
+  background-color: ${({ theme }) => theme.accent2};
   border: none;
   border-radius: 12px;
-  color: ${({ theme }) => theme.accentAction};
+  color: ${({ theme }) => theme.accent1};
   cursor: pointer;
   font-size: 11px;
-  font-weight: 500;
+  font-weight: 535;
   margin-left: 0.25rem;
   opacity: ${({ disabled }) => (!disabled ? 1 : 0.4)};
   padding: 4px 6px;
@@ -276,8 +280,8 @@ export default function CurrencyInputPanel({
                     <RowFixed style={{ height: '17px' }}>
                       <ThemedText.DeprecatedBody
                         onClick={onMax}
-                        color={theme.textTertiary}
-                        fontWeight={500}
+                        color={theme.neutral3}
+                        fontWeight={535}
                         fontSize={14}
                         style={{ display: 'inline', cursor: 'pointer' }}
                       >

src/components/ErrorBoundary/index.tsx

@@ -42,31 +42,31 @@ const StretchedRow = styled.div`
 `
 
 const Code = styled.code`
-  font-weight: 300;
+  font-weight: 485;
   font-size: 12px;
   line-height: 16px;
   word-wrap: break-word;
   width: 100%;
-  color: ${({ theme }) => theme.textPrimary};
+  color: ${({ theme }) => theme.neutral1};
   font-family: ${({ theme }) => theme.fonts.code};
   overflow: scroll;
   max-height: calc(100vh - 450px);
 `
 
 const Separator = styled.div`
-  border-bottom: 1px solid ${({ theme }) => theme.backgroundOutline};
+  border-bottom: 1px solid ${({ theme }) => theme.surface3};
 `
 
 const CodeBlockWrapper = styled.div`
   display: flex;
   flex-direction: column;
-  background: ${({ theme }) => theme.backgroundModule};
+  background: ${({ theme }) => theme.surface2};
   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;
   padding: 24px;
   gap: 10px;
-  color: ${({ theme }) => theme.textPrimary};
+  color: ${({ theme }) => theme.neutral1};
 `
 
 const ShowMoreButton = styled.div`
@@ -76,7 +76,7 @@ const ShowMoreButton = styled.div`
 `
 
 const CopyIcon = styled(Copy)`
-  stroke: ${({ theme }) => theme.textSecondary};
+  stroke: ${({ theme }) => theme.neutral2};
 `
 
 const ShowMoreIcon = styled(ChevronUpIcon)<{ $isExpanded?: boolean }>`
@@ -104,7 +104,7 @@ const Fallback = ({ error, eventId }: { error: Error; eventId: string | null })
 
   const showMoreButton = (
     <ShowMoreButton onClick={() => setExpanded((s) => !s)}>
-      <ThemedText.Link color="textSecondary">
+      <ThemedText.Link color="neutral2">
         <Trans>{isExpanded ? 'Show less' : 'Show more'}</Trans>
       </ThemedText.Link>
       <ShowMoreIcon $isExpanded={isExpanded} secondaryWidth="20" secondaryHeight="20" />
@@ -123,7 +123,7 @@ const Fallback = ({ error, eventId }: { error: Error; eventId: string | null })
                 <Title textAlign="center">
                   <Trans>Something went wrong</Trans>
                 </Title>
-                <Description textAlign="center" color="textSecondary">
+                <Description textAlign="center" color="neutral2">
                   <Trans>
                     Sorry, an error occured while processing your request. If you request support, be sure to provide
                     your error ID.
@@ -155,7 +155,7 @@ const Fallback = ({ error, eventId }: { error: Error; eventId: string | null })
                 <Title textAlign="center">
                   <Trans>Something went wrong</Trans>
                 </Title>
-                <Description textAlign="center" color="textSecondary">
+                <Description textAlign="center" color="neutral2">
                   <Trans>
                     Sorry, an error occured while processing your request. If you request support, be sure to copy the
                     details of this error.

src/components/Expand/index.tsx

@@ -13,7 +13,7 @@ const ButtonContainer = styled(Row)`
 `
 
 const ExpandIcon = styled(ChevronDown)<{ $isOpen: boolean }>`
-  color: ${({ theme }) => theme.textSecondary};
+  color: ${({ theme }) => theme.neutral2};
   transform: ${({ $isOpen }) => ($isOpen ? 'rotate(180deg)' : 'rotate(0deg)')};
   transition: transform ${({ theme }) => theme.transition.duration.medium};
 `

src/components/FeatureFlagModal/FeatureFlagModal.tsx

@@ -22,16 +22,16 @@ const StyledModal = styled.div`
   transform: translate(-50%, -50%);
   width: 400px;
   height: fit-content;
-  color: ${({ theme }) => theme.textPrimary};
+  color: ${({ theme }) => theme.neutral1};
   font-size: 18px;
   padding: 20px;
-  background-color: ${({ theme }) => theme.backgroundSurface};
+  background-color: ${({ theme }) => theme.surface2};
   border-radius: 12px;
-  border: 1px solid ${({ theme }) => theme.backgroundOutline};
+  border: 1px solid ${({ theme }) => theme.surface3};
   z-index: 100;
   flex-direction: column;
   gap: 8px;
-  border: 1px solid ${({ theme }) => theme.backgroundOutline};
+  border: 1px solid ${({ theme }) => theme.surface3};
 `
 
 function Modal({ open, children }: { open: boolean; children: ReactNode }) {
@@ -49,52 +49,52 @@ const CloseButton = styled.button`
   cursor: pointer;
   background: transparent;
   border: none;
-  color: ${({ theme }) => theme.textPrimary};
+  color: ${({ theme }) => theme.neutral1};
 `
 
 const ToggleButton = styled.button`
   cursor: pointer;
   background: transparent;
   border: none;
-  color: ${({ theme }) => theme.textPrimary};
+  color: ${({ theme }) => theme.neutral1};
 `
 
 const Header = styled(Row)`
-  font-weight: 600;
+  font-weight: 535;
   font-size: 16px;
-  border-bottom: 1px solid ${({ theme }) => theme.backgroundOutline};
+  border-bottom: 1px solid ${({ theme }) => theme.surface3};
   margin-bottom: 8px;
 `
 const FlagName = styled.span`
   font-size: 16px;
   line-height: 20px;
-  color: ${({ theme }) => theme.textPrimary};
+  color: ${({ theme }) => theme.neutral1};
 `
 const FlagGroupName = styled.span`
   font-size: 20px;
   line-height: 24px;
-  color: ${({ theme }) => theme.textPrimary};
-  font-weight: 600;
+  color: ${({ theme }) => theme.neutral1};
+  font-weight: 535;
 `
 const FlagDescription = styled.span`
   font-size: 12px;
   line-height: 16px;
-  color: ${({ theme }) => theme.textSecondary};
+  color: ${({ theme }) => theme.neutral2};
   display: flex;
   align-items: center;
 `
 const FlagVariantSelection = styled.select`
   border-radius: 12px;
   padding: 8px;
-  background: ${({ theme }) => theme.backgroundInteractive};
-  font-weight: 600;
+  background: ${({ theme }) => theme.surface3};
+  font-weight: 535;
   font-size: 16px;
   border: none;
-  color: ${({ theme }) => theme.textPrimary};
+  color: ${({ theme }) => theme.neutral1};
   cursor: pointer;
 
   :hover {
-    background: ${({ theme }) => theme.backgroundOutline};
+    background: ${({ theme }) => theme.surface3};
   }
 `
 
@@ -107,15 +107,15 @@ const FlagInfo = styled.div`
 const SaveButton = styled.button`
   border-radius: 12px;
   padding: 8px;
-  background: ${({ theme }) => theme.backgroundInteractive};
-  font-weight: 600;
+  background: ${({ theme }) => theme.surface3};
+  font-weight: 535;
   font-size: 16px;
   border: none;
-  color: ${({ theme }) => theme.textPrimary};
+  color: ${({ theme }) => theme.neutral1};
   cursor: pointer;
 
   :hover {
-    background: ${({ theme }) => theme.backgroundOutline};
+    background: ${({ theme }) => theme.surface3};
   }
 `
 

src/components/FeeSelector/FeeOption.tsx

@@ -37,7 +37,7 @@ export function FeeOption({ feeAmount, active, poolState, distributions, onClick
           <ResponsiveText>
             <Trans>{FEE_AMOUNT_DETAIL[feeAmount].label}%</Trans>
           </ResponsiveText>
-          <ThemedText.DeprecatedMain fontWeight={400} fontSize="12px" textAlign="left">
+          <ThemedText.DeprecatedMain fontWeight={485} fontSize="12px" textAlign="left">
             {FEE_AMOUNT_DETAIL[feeAmount].description}
           </ThemedText.DeprecatedMain>
         </AutoColumn>

src/components/FeeSelector/index.tsx

@@ -34,8 +34,8 @@ const pulse = (color: string) => keyframes`
   }
 `
 const FocusedOutlineCard = styled(Card)<{ pulsing: boolean }>`
-  border: 1px solid ${({ theme }) => theme.backgroundInteractive};
-  animation: ${({ pulsing, theme }) => pulsing && pulse(theme.accentAction)} 0.6s linear;
+  border: 1px solid ${({ theme }) => theme.surface3};
+  animation: ${({ pulsing, theme }) => pulsing && pulse(theme.accent1)} 0.6s linear;
   align-self: center;
 `
 
@@ -152,7 +152,7 @@ export default function FeeSelector({
                   <ThemedText.DeprecatedLabel>
                     <Trans>Fee tier</Trans>
                   </ThemedText.DeprecatedLabel>
-                  <ThemedText.DeprecatedMain fontWeight={400} fontSize="12px" textAlign="left">
+                  <ThemedText.DeprecatedMain fontWeight={485} fontSize="12px" textAlign="left">
                     <Trans>The % you will earn in fees.</Trans>
                   </ThemedText.DeprecatedMain>
                 </>

src/components/FiatOnrampModal/index.tsx

@@ -15,7 +15,7 @@ const Wrapper = styled.div<{ isDarkMode: boolean }>`
   // #1c1c1e is the background color for the darkmode moonpay iframe as of 2/16/2023
   background-color: ${({ isDarkMode, theme }) => (isDarkMode ? MOONPAY_DARK_BACKGROUND : theme.white)};
   border-radius: 20px;
-  box-shadow: ${({ theme }) => theme.deepShadow};
+  box-shadow: ${({ theme }) => theme.deprecated_deepShadow};
   display: flex;
   flex-flow: column nowrap;
   margin: 0;
@@ -26,7 +26,7 @@ const Wrapper = styled.div<{ isDarkMode: boolean }>`
 `
 
 const ErrorText = styled(ThemedText.BodyPrimary)`
-  color: ${({ theme }) => theme.accentFailure};
+  color: ${({ theme }) => theme.critical};
   margin: auto !important;
   text-align: center;
   width: 90%;
@@ -96,7 +96,7 @@ export default function FiatOnrampModal() {
         method: 'POST',
         body: JSON.stringify({
           theme: isDarkMode ? 'dark' : 'light',
-          colorCode: theme.accentAction,
+          colorCode: theme.accent1,
           defaultCurrencyCode: 'eth',
           redirectUrl: 'https://app.uniswap.org/#/swap',
           walletAddresses: JSON.stringify(
@@ -118,7 +118,7 @@ export default function FiatOnrampModal() {
     } finally {
       setLoading(false)
     }
-  }, [account, isDarkMode, theme.accentAction])
+  }, [account, isDarkMode, theme.accent1])
 
   useEffect(() => {
     fetchSignedIframeUrl()

src/components/Icons/AlertTriangleFilled.tsx

@@ -5,7 +5,13 @@ import { StyledSVG } from './shared'
 export default function AlertTriangleFilled({ size = '16px', ...rest }: { size?: string; [k: string]: any }) {
   const theme = useTheme()
   return (
-    <StyledSVG viewBox="0 0 16 16" fill={theme.accentWarning} xmlns="http://www.w3.org/2000/svg" size={size} {...rest}>
+    <StyledSVG
+      viewBox="0 0 16 16"
+      fill={theme.deprecated_accentWarning}
+      xmlns="http://www.w3.org/2000/svg"
+      size={size}
+      {...rest}
+    >
       <path d="M8.982 1.566a1.13 1.13 0 0 0-1.96 0L.165 13.233c-.457.778.091 1.767.98 1.767h13.713c.889 0 1.438-.99.98-1.767L8.982 1.566zM8 5c.535 0 .954.462.9.995l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 5.995A.905.905 0 0 1 8 5zm.002 6a1 1 0 1 1 0 2a1 1 0 0 1 0-2z" />
     </StyledSVG>
   )

src/components/Icons/ArrowChangeDown.tsx

+import { ComponentProps } from 'react'
+
+export const ArrowChangeDown = (props: ComponentProps<'svg'>) => (
+  <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+    <path
+      d="M10.6979 16.2453L6.31787 9.75247C5.58184 8.66118 6.2058 7 7.35185 7L16.6482 7C17.7942 7 18.4182 8.66243 17.6821 9.75247L13.3021 16.2453C12.623 17.2516 11.377 17.2516 10.6979 16.2453Z"
+      fill="currentColor"
+    />
+  </svg>
+)

src/components/Icons/ArrowChangeUp.tsx

+import { ComponentProps } from 'react'
+
+export const ArrowChangeUp = (props: ComponentProps<'svg'>) => (
+  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" {...props}>
+    <path
+      d="M13.3021 7.7547L17.6821 14.2475C18.4182 15.3388 17.7942 17 16.6482 17L7.3518 17C6.2058 17 5.5818 15.3376 6.3179 14.2475L10.6979 7.7547C11.377 6.7484 12.623 6.7484 13.3021 7.7547Z"
+      fill="currentColor"
+    />
+  </svg>
+)

src/components/Icons/Gas.tsx

+import { ComponentProps } from 'react'
+
+export const Gas = (props: ComponentProps<'svg'>) => (
+  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" {...props}>
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M15.3078 0.278393C15.7064 -0.103884 16.3395 -0.0906517 16.7217 0.307949L20.9689 4.73645C21.2428 4.97487 21.4729 5.26217 21.6459 5.58477C21.8481 5.93184 22 6.34831 22 6.8271V17.2013C22 18.7486 20.7455 20.0001 19.2 20.0001C17.6536 20.0001 16.4 18.7465 16.4 17.2001V14.9C16.4 14.3477 15.9523 13.9 15.4 13.9H15V21.0001C15 21.0691 14.9965 21.1374 14.9897 21.2046C14.9515 21.5802 14.8095 21.925 14.5927 22.2099C14.2274 22.6901 13.6499 23.0001 13 23.0001H5C4.30964 23.0001 3.70098 22.6503 3.34157 22.1183C3.12592 21.7991 3.00001 21.4143 3 21.0001V4.00003C3 2.34317 4.34315 1.00003 6 1.00003H12C13.6569 1.00003 15 2.34317 15 4.00003V11.9H15.4C17.0569 11.9 18.4 13.2432 18.4 14.9V17.2001C18.4 17.642 18.7582 18.0001 19.2 18.0001C19.6427 18.0001 20 17.6423 20 17.2013V9.82932C19.6872 9.93987 19.3506 10 19 10C17.3431 10 16 8.65688 16 7.00003C16 5.78863 16.718 4.74494 17.7517 4.27129L15.2783 1.6923C14.896 1.2937 14.9092 0.660671 15.3078 0.278393ZM19.6098 6.20743C19.441 6.07738 19.2296 6.00003 19 6.00003C18.4477 6.00003 18 6.44774 18 7.00003C18 7.55231 18.4477 8.00003 19 8.00003C19.5523 8.00003 20 7.55231 20 7.00003C20 6.84096 19.9629 6.69057 19.8968 6.55705C19.8303 6.45176 19.7349 6.33571 19.6098 6.20743ZM5 11C5 10.4477 5.44772 10 6 10H9H12C12.5523 10 13 10.4477 13 11C13 11.5523 12.5523 12 12 12H6C5.44772 12 5 11.5523 5 11ZM5 15C5 14.4477 5.44772 14 6 14H12C12.5523 14 13 14.4477 13 15C13 15.5523 12.5523 16 12 16H6C5.44772 16 5 15.5523 5 15ZM6 18C5.44772 18 5 18.4477 5 19C5 19.5523 5.44772 20 6 20H12C12.5523 20 13 19.5523 13 19C13 18.4477 12.5523 18 12 18H6Z"
+      fill="currentColor"
+    />
+  </svg>
+)

src/components/Icons/Info.tsx

+import { ComponentProps } from 'react'
+
+export const Info = (props: ComponentProps<'svg'>) => (
+  <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+    <path
+      d="M12 2C6.477 2 2 6.477 2 12C2 17.523 6.477 22 12 22C17.523 22 22 17.523 22 12C22 6.477 17.523 2 12 2ZM12.75 16.5C12.75 16.914 12.414 17.25 12 17.25C11.586 17.25 11.25 16.914 11.25 16.5V11.929C11.25 11.515 11.586 11.179 12 11.179C12.414 11.179 12.75 11.515 12.75 11.929V16.5ZM12.02 9.5C11.468 9.5 11.0149 9.052 11.0149 8.5C11.0149 7.948 11.458 7.5 12.01 7.5H12.02C12.573 7.5 13.02 7.948 13.02 8.5C13.02 9.052 12.572 9.5 12.02 9.5Z"
+      fill="#9B9B9B"
+    />
+  </svg>
+)

src/components/Icons/LoadingSpinner.tsx

@@ -24,7 +24,7 @@ export default function Loader({
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
       size={size}
-      stroke={stroke ?? theme.accentActive}
+      stroke={stroke ?? theme.accent1}
       {...rest}
     >
       <path
@@ -41,14 +41,14 @@ export function LoaderV2() {
   const theme = useTheme()
   return (
     <StyledRotatingSVG size="16px" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-      <StyledSVG size="16px" viewBox="0 0 16 16" fill={theme.backgroundOutline} xmlns="http://www.w3.org/2000/svg">
+      <StyledSVG size="16px" viewBox="0 0 16 16" fill={theme.surface3} xmlns="http://www.w3.org/2000/svg">
         <path
           fillRule="evenodd"
           clipRule="evenodd"
           d="M8 2.66667C5.05448 2.66667 2.66667 5.05448 2.66667 8C2.66667 10.9455 5.05448 13.3333 8 13.3333C10.9455 13.3333 13.3333 10.9455 13.3333 8C13.3333 5.05448 10.9455 2.66667 8 2.66667ZM0 8C0 3.58172 3.58172 0 8 0C12.4183 0 16 3.58172 16 8C16 12.4183 12.4183 16 8 16C3.58172 16 0 12.4183 0 8Z"
         />
       </StyledSVG>
-      <StyledSVG size="16px" viewBox="0 0 16 16" fill={theme.accentAction} xmlns="http://www.w3.org/2000/svg">
+      <StyledSVG size="16px" viewBox="0 0 16 16" fill={theme.accent1} xmlns="http://www.w3.org/2000/svg">
         <path
           fillRule="evenodd"
           clipRule="evenodd"
@@ -66,18 +66,18 @@ export function LoaderV3({ size = '16px', color, ...rest }: { size?: string; col
       size={size}
       viewBox="0 0 54 54"
       xmlns="http://www.w3.org/2000/svg"
-      fill={color ?? theme.textTertiary}
-      stroke={color ?? theme.textTertiary}
+      fill={color ?? theme.neutral3}
+      stroke={color ?? theme.neutral3}
       {...rest}
     >
       <path
         opacity="0.1"
         d="M53.6666 26.9999C53.6666 41.7275 41.7276 53.6666 27 53.6666C12.2724 53.6666 0.333313 41.7275 0.333313 26.9999C0.333313 12.2723 12.2724 0.333252 27 0.333252C41.7276 0.333252 53.6666 12.2723 53.6666 26.9999ZM8.33331 26.9999C8.33331 37.3092 16.6907 45.6666 27 45.6666C37.3093 45.6666 45.6666 37.3092 45.6666 26.9999C45.6666 16.6906 37.3093 8.33325 27 8.33325C16.6907 8.33325 8.33331 16.6906 8.33331 26.9999Z"
-        fill={color ?? theme.textTertiary}
+        fill={color ?? theme.neutral3}
       />
       <path
         d="M49.6666 26.9999C51.8758 26.9999 53.6973 25.1992 53.3672 23.0149C53.0452 20.884 52.4652 18.7951 51.6368 16.795C50.2966 13.5597 48.3324 10.62 45.8562 8.14374C43.3799 5.66751 40.4402 3.70326 37.2049 2.36313C35.2048 1.53466 33.1159 0.954747 30.985 0.632693C28.8007 0.30256 27 2.12411 27 4.33325C27 6.54239 28.8108 8.29042 30.9695 8.76019C32.0523 8.99585 33.1146 9.32804 34.1434 9.75417C36.4081 10.6923 38.4659 12.0672 40.1993 13.8006C41.9327 15.534 43.3076 17.5918 44.2457 19.8565C44.6719 20.8853 45.004 21.9476 45.2397 23.0304C45.7095 25.1891 47.4575 26.9999 49.6666 26.9999Z"
-        fill={color ?? theme.textTertiary}
+        fill={color ?? theme.neutral3}
       />
     </StyledRotatingSVG>
   )

src/components/Icons/Power.tsx

+import { ComponentProps } from 'react'
+
+export const Power = (props: ComponentProps<'svg'>) => (
+  <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+    <path
+      d="M8 7.3335C7.63133 7.3335 7.33333 7.03483 7.33333 6.66683V2.00016C7.33333 1.63216 7.63133 1.3335 8 1.3335C8.36867 1.3335 8.66667 1.63216 8.66667 2.00016V6.66683C8.66667 7.03483 8.36867 7.3335 8 7.3335ZM14 8.66683C14 6.5375 12.8506 4.5462 11.002 3.47087C10.6833 3.28553 10.2753 3.39343 10.0907 3.71143C9.90532 4.03009 10.0134 4.43822 10.3314 4.62288C11.772 5.46088 12.6667 7.01083 12.6667 8.66683C12.6667 11.2402 10.5727 13.3335 8 13.3335C5.42733 13.3335 3.33333 11.2402 3.33333 8.66683C3.33333 7.01083 4.22795 5.46088 5.66862 4.62288C5.98729 4.43822 6.09534 4.02943 5.90934 3.71143C5.72334 3.39343 5.31538 3.2842 4.99805 3.47087C3.14938 4.54687 2 6.5375 2 8.66683C2 11.9748 4.69133 14.6668 8 14.6668C11.3087 14.6668 14 11.9748 14 8.66683Z"
+      fill="currentColor"
+    />
+  </svg>
+)

src/components/Icons/Search.tsx

+import { ComponentProps } from 'react'
+
+export const Search = (props: ComponentProps<'svg'>) => (
+  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" {...props}>
+    <path
+      d="M21.53 20.47L17.689 16.629C18.973 15.106 19.75 13.143 19.75 11C19.75 6.175 15.825 2.25 11 2.25C6.175 2.25 2.25 6.175 2.25 11C2.25 15.825 6.175 19.75 11 19.75C13.143 19.75 15.106 18.973 16.629 17.689L20.47 21.53C20.616 21.676 20.808 21.75 21 21.75C21.192 21.75 21.384 21.677 21.53 21.53C21.823 21.238 21.823 20.763 21.53 20.47ZM3.75 11C3.75 7.002 7.002 3.75 11 3.75C14.998 3.75 18.25 7.002 18.25 11C18.25 14.998 14.998 18.25 11 18.25C7.002 18.25 3.75 14.998 3.75 11Z"
+      fill="#9B9B9B"
+    />
+  </svg>
+)

src/components/Icons/Settings.tsx

+import { ComponentProps } from 'react'
+
+export const Settings = (props: ComponentProps<'svg'>) => (
+  <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+    <path
+      d="M20.83 14.6C19.9 14.06 19.33 13.07 19.33 12C19.33 10.93 19.9 9.93999 20.83 9.39999C20.99 9.29999 21.05 9.1 20.95 8.94L19.28 6.06C19.22 5.95 19.11 5.89001 19 5.89001C18.94 5.89001 18.88 5.91 18.83 5.94C18.37 6.2 17.85 6.34 17.33 6.34C16.8 6.34 16.28 6.19999 15.81 5.92999C14.88 5.38999 14.31 4.41 14.31 3.34C14.31 3.15 14.16 3 13.98 3H10.02C9.83999 3 9.69 3.15 9.69 3.34C9.69 4.41 9.12 5.38999 8.19 5.92999C7.72 6.19999 7.20001 6.34 6.67001 6.34C6.15001 6.34 5.63001 6.2 5.17001 5.94C5.01001 5.84 4.81 5.9 4.72 6.06L3.04001 8.94C3.01001 8.99 3 9.05001 3 9.10001C3 9.22001 3.06001 9.32999 3.17001 9.39999C4.10001 9.93999 4.67001 10.92 4.67001 11.99C4.67001 13.07 4.09999 14.06 3.17999 14.6H3.17001C3.01001 14.7 2.94999 14.9 3.04999 15.06L4.72 17.94C4.78 18.05 4.89 18.11 5 18.11C5.06 18.11 5.12001 18.09 5.17001 18.06C6.11001 17.53 7.26 17.53 8.19 18.07C9.11 18.61 9.67999 19.59 9.67999 20.66C9.67999 20.85 9.82999 21 10.02 21H13.98C14.16 21 14.31 20.85 14.31 20.66C14.31 19.59 14.88 18.61 15.81 18.07C16.28 17.8 16.8 17.66 17.33 17.66C17.85 17.66 18.37 17.8 18.83 18.06C18.99 18.16 19.19 18.1 19.28 17.94L20.96 15.06C20.99 15.01 21 14.95 21 14.9C21 14.78 20.94 14.67 20.83 14.6ZM12 15C10.34 15 9 13.66 9 12C9 10.34 10.34 9 12 9C13.66 9 15 10.34 15 12C15 13.66 13.66 15 12 15Z"
+      fill="currentColor"
+    />
+  </svg>
+)

src/components/Icons/Share.tsx

+import { ComponentProps } from 'react'
+
+export const Share = (props: ComponentProps<'svg'>) => (
+  <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+    <path
+      d="M13 4.99092C13 4.09592 14.094 3.66096 14.709 4.31196L20.637 10.582C21.121 11.094 21.121 11.894 20.637 12.406L14.709 18.676C14.094 19.326 13 18.891 13 17.997V14.4919C5.437 14.4919 4.93602 16.962 4.96802 19.529C4.97402 20.019 4.32501 20.1811 4.08301 19.7561C3.46701 18.6751 3 17.1999 3 15.4909C3 8.99592 10 8.49702 13 8.49702V4.99092Z"
+      fill="#9B9B9B"
+    />
+  </svg>
+)

src/components/Icons/shared.tsx

@@ -18,7 +18,7 @@ export const StyledSVG = styled.svg<{ size: string; stroke?: string; fill?: stri
   width: ${({ size }) => size};
   path {
     stroke: ${({ stroke }) => stroke};
-    background: ${({ theme }) => theme.textSecondary};
+    background: ${({ theme }) => theme.neutral2};
     fill: ${({ fill }) => fill};
   }
 `

src/components/Identicon/StatusIcon.tsx

@@ -14,7 +14,7 @@ export const IconWrapper = styled.div<{ size?: number }>`
   ${flexColumnNoWrap};
   align-items: center;
   justify-content: center;
-  margin-right: 8px;
+  margin-right: 4px;
   & > img,
   span {
     height: ${({ size }) => (size ? size + 'px' : '32px')};
@@ -35,9 +35,9 @@ const MiniIconContainer = styled.div<{ side: 'left' | 'right' }>`
   bottom: -4px;
   ${({ side }) => `${side === 'left' ? 'left' : 'right'}: -4px;`}
   border-radius: 50%;
-  outline: 2px solid ${({ theme }) => theme.backgroundSurface};
+  outline: 2px solid ${({ theme }) => theme.surface1};
   outline-offset: -0.1px;
-  background-color: ${({ theme }) => theme.backgroundSurface};
+  background-color: ${({ theme }) => theme.surface1};
   overflow: hidden;
   @supports (overflow: clip) {
     overflow: clip;

src/components/Identicon/__snapshots__/StatusIcon.test.tsx.snap

@@ -18,7 +18,7 @@ exports[`StatusIcon with account renders children in correct order 1`] = `
   -webkit-justify-content: center;
   -ms-flex-pack: center;
   justify-content: center;
-  margin-right: 8px;
+  margin-right: 4px;
 }
 
 .c0 > img,
@@ -146,7 +146,7 @@ exports[`StatusIcon with no account renders children in correct order 1`] = `
   -webkit-justify-content: center;
   -ms-flex-pack: center;
   justify-content: center;
-  margin-right: 8px;
+  margin-right: 4px;
 }
 
 .c0 > img,

src/components/Identicon/index.tsx

@@ -7,7 +7,7 @@ const StyledIdenticon = styled.div<{ iconSize: number }>`
   height: ${({ iconSize }) => `${iconSize}px`};
   width: ${({ iconSize }) => `${iconSize}px`};
   border-radius: 50%;
-  background-color: ${({ theme }) => theme.deprecated_bg4};
+  background-color: ${({ theme }) => theme.surface3};
   font-size: initial;
 `
 

src/components/InputStepCounter/InputStepCounter.tsx

@@ -34,14 +34,14 @@ const SmallButton = styled(ButtonGray)`
 `
 
 const FocusedOutlineCard = styled(OutlineCard)<{ active?: boolean; pulsing?: boolean }>`
-  border-color: ${({ active, theme }) => active && theme.accentAction};
+  border-color: ${({ active, theme }) => active && theme.accent1};
   padding: 12px;
-  animation: ${({ pulsing, theme }) => pulsing && pulse(theme.accentAction)} 0.8s linear;
+  animation: ${({ pulsing, theme }) => pulsing && pulse(theme.accent1)} 0.8s linear;
 `
 
 const StyledInput = styled(NumericalInput)<{ usePercent?: boolean }>`
   background-color: transparent;
-  font-weight: 500;
+  font-weight: 535;
   text-align: left;
   width: 100%;
 
@@ -55,13 +55,13 @@ const InputColumn = styled(AutoColumn)`
 `
 
 const InputTitle = styled(ThemedText.DeprecatedSmall)`
-  color: ${({ theme }) => theme.textSecondary};
+  color: ${({ theme }) => theme.neutral2};
   font-size: 12px;
-  font-weight: 500;
+  font-weight: 535;
 `
 
 const ButtonLabel = styled(ThemedText.DeprecatedWhite)<{ disabled: boolean }>`
-  color: ${({ theme, disabled }) => (disabled ? theme.textSecondary : theme.textPrimary)} !important;
+  color: ${({ theme, disabled }) => (disabled ? theme.neutral2 : theme.neutral1)} !important;
 `
 
 interface StepCounterProps {

src/components/LiquidityChartRangeInput/Area.tsx

@@ -6,8 +6,8 @@ import { ChartEntry } from './types'
 
 const Path = styled.path<{ fill?: string }>`
   opacity: 0.5;
-  stroke: ${({ fill, theme }) => fill ?? theme.accentAction};
-  fill: ${({ fill, theme }) => fill ?? theme.accentAction};
+  stroke: ${({ fill, theme }) => fill ?? theme.accent1};
+  fill: ${({ fill, theme }) => fill ?? theme.accent1};
 `
 
 export const Area = ({

src/components/LiquidityChartRangeInput/AxisBottom.tsx

@@ -8,7 +8,7 @@ const StyledGroup = styled.g`
   }
 
   text {
-    color: ${({ theme }) => theme.textSecondary};
+    color: ${({ theme }) => theme.neutral2};
     transform: translateY(5px);
   }
 `

src/components/LiquidityChartRangeInput/Brush.tsx

@@ -28,13 +28,13 @@ const LabelGroup = styled.g<{ visible: boolean }>`
 `
 
 const TooltipBackground = styled.rect`
-  fill: ${({ theme }) => theme.backgroundInteractive};
+  fill: ${({ theme }) => theme.surface3};
 `
 
 const Tooltip = styled.text`
   text-anchor: middle;
   font-size: 13px;
-  fill: ${({ theme }) => theme.textPrimary};
+  fill: ${({ theme }) => theme.neutral1};
 `
 
 // flips the handles draggers when close to the container edges

src/components/LiquidityChartRangeInput/Line.tsx

@@ -5,7 +5,7 @@ import styled from 'styled-components'
 const StyledLine = styled.line`
   opacity: 0.5;
   stroke-width: 2;
-  stroke: ${({ theme }) => theme.textPrimary};
+  stroke: ${({ theme }) => theme.neutral1};
   fill: none;
 `
 

src/components/LiquidityChartRangeInput/Zoom.tsx

@@ -18,8 +18,8 @@ const Wrapper = styled.div<{ count: number }>`
 
 const Button = styled(ButtonGray)`
   &:hover {
-    background-color: ${({ theme }) => theme.backgroundInteractive};
-    color: ${({ theme }) => theme.textPrimary};
+    background-color: ${({ theme }) => theme.surface3};
+    color: ${({ theme }) => theme.neutral1};
   }
 
   width: 32px;

src/components/LiquidityChartRangeInput/index.tsx

@@ -163,19 +163,19 @@ export default function LiquidityChartRangeInput({
       {isUninitialized ? (
         <InfoBox
           message={<Trans>Your position will appear here.</Trans>}
-          icon={<Inbox size={56} stroke={theme.textPrimary} />}
+          icon={<Inbox size={56} stroke={theme.neutral1} />}
         />
       ) : isLoading ? (
-        <InfoBox icon={<Loader size="40px" stroke={theme.deprecated_text4} />} />
+        <InfoBox icon={<Loader size="40px" stroke={theme.neutral2} />} />
       ) : error ? (
         <InfoBox
           message={<Trans>Liquidity data not available.</Trans>}
-          icon={<CloudOff size={56} stroke={theme.deprecated_text4} />}
+          icon={<CloudOff size={56} stroke={theme.neutral2} />}
         />
       ) : !formattedData || formattedData.length === 0 || !price ? (
         <InfoBox
           message={<Trans>There is no liquidity data.</Trans>}
-          icon={<BarChart2 size={56} stroke={theme.deprecated_text4} />}
+          icon={<BarChart2 size={56} stroke={theme.neutral2} />}
         />
       ) : (
         <ChartWrapper>
@@ -185,12 +185,12 @@ export default function LiquidityChartRangeInput({
             margins={{ top: 10, right: 2, bottom: 20, left: 0 }}
             styles={{
               area: {
-                selection: theme.accentAction,
+                selection: theme.accent1,
               },
               brush: {
                 handle: {
-                  west: saturate(0.1, tokenAColor) ?? theme.accentFailure,
-                  east: saturate(0.1, tokenBColor) ?? theme.accentAction,
+                  west: saturate(0.1, tokenAColor) ?? theme.critical,
+                  east: saturate(0.1, tokenBColor) ?? theme.accent1,
                 },
               },
             }}

src/components/Loader/styled.tsx

@@ -14,9 +14,9 @@ const shimmerMixin = css`
   animation-fill-mode: both;
   background: linear-gradient(
     to left,
-    ${({ theme }) => theme.deprecated_bg1} 25%,
-    ${({ theme }) => theme.backgroundInteractive} 50%,
-    ${({ theme }) => theme.deprecated_bg1} 75%
+    ${({ theme }) => theme.surface1} 25%,
+    ${({ theme }) => theme.surface3} 50%,
+    ${({ theme }) => theme.surface1} 75%
   );
   background-size: 400%;
   will-change: background-position;

src/components/Logo/AssetLogo.tsx

@@ -7,10 +7,10 @@ import styled from 'styled-components'
 export const MissingImageLogo = styled.div<{ size?: string }>`
   --size: ${({ size }) => size};
   border-radius: 100px;
-  color: ${({ theme }) => theme.textPrimary};
-  background-color: ${({ theme }) => theme.backgroundInteractive};
+  color: ${({ theme }) => theme.neutral1};
+  background-color: ${({ theme }) => theme.surface3};
   font-size: calc(var(--size) / 3);
-  font-weight: 500;
+  font-weight: 535;
   height: ${({ size }) => size ?? '24px'};
   line-height: ${({ size }) => size ?? '24px'};
   text-align: center;
@@ -31,7 +31,7 @@ const LogoImage = styled.img<{ size: string; imgLoaded?: boolean }>`
 const LogoImageWrapper = styled.div<{ size: string; imgLoaded?: boolean }>`
   width: ${({ size }) => size};
   height: ${({ size }) => size};
-  background: ${({ theme, imgLoaded }) => (imgLoaded ? 'none' : theme.backgroundInteractive)};
+  background: ${({ theme, imgLoaded }) => (imgLoaded ? 'none' : theme.surface3)};
   transition: background-color ${({ theme }) => `${theme.transition.duration.medium} ${theme.transition.timing.in}`};
   box-shadow: 0 0 1px white;
   border-radius: 50%;

src/components/Logo/UniswapXBrandMark.tsx

@@ -13,7 +13,7 @@ export default function UniswapXBrandMark({ fontWeight, ...props }: UniswapXBran
       <ThemedText.BodySecondary
         fontSize="inherit"
         {...(fontWeight === 'bold' && {
-          fontWeight: '500',
+          fontWeight: '535',
         })}
       >
         <Trans>UniswapX</Trans>

src/components/Menu/index.tsx

@@ -15,7 +15,7 @@ export enum FlyoutAlignment {
 
 const StyledMenuIcon = styled(MenuIcon)`
   path {
-    stroke: ${({ theme }) => theme.textPrimary};
+    stroke: ${({ theme }) => theme.neutral1};
   }
 `
 
@@ -32,10 +32,10 @@ const MenuFlyout = styled.span<{ flyoutAlignment?: FlyoutAlignment }>`
   min-width: 196px;
   max-height: 350px;
   overflow: auto;
-  background-color: ${({ theme }) => theme.deprecated_bg1};
+  background-color: ${({ theme }) => theme.surface1};
   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: 1px solid ${({ theme }) => theme.backgroundSurface};
+  border: 1px solid ${({ theme }) => theme.surface1};
   border-radius: 12px;
   padding: 0.5rem;
   display: flex;
@@ -62,9 +62,9 @@ const MenuItem = styled(ExternalLink)`
   align-items: center;
   padding: 0.5rem 0.5rem;
   justify-content: space-between;
-  color: ${({ theme }) => theme.textSecondary};
+  color: ${({ theme }) => theme.neutral2};
   :hover {
-    color: ${({ theme }) => theme.textPrimary};
+    color: ${({ theme }) => theme.neutral1};
     cursor: pointer;
     text-decoration: none;
   }
@@ -73,11 +73,11 @@ const MenuItem = styled(ExternalLink)`
 const InternalMenuItem = styled(Link)`
   flex: 1;
   padding: 0.5rem 0.5rem;
-  color: ${({ theme }) => theme.textSecondary};
+  color: ${({ theme }) => theme.neutral2};
   width: max-content;
   text-decoration: none;
   :hover {
-    color: ${({ theme }) => theme.textPrimary};
+    color: ${({ theme }) => theme.neutral1};
     cursor: pointer;
     text-decoration: none;
   }

src/components/Modal/index.tsx

@@ -25,7 +25,7 @@ const StyledDialogOverlay = styled(AnimatedDialogOverlay)<{ $scrollOverlay?: boo
     overflow-y: ${({ $scrollOverlay }) => $scrollOverlay && 'scroll'};
     justify-content: center;
 
-    background-color: ${({ theme }) => theme.backgroundScrim};
+    background-color: ${({ theme }) => theme.scrim};
   }
 `
 
@@ -43,9 +43,9 @@ const StyledDialogContent = styled(AnimatedDialogContent)<StyledDialogProps>`
 
   &[data-reach-dialog-content] {
     margin: auto;
-    background-color: ${({ theme }) => theme.backgroundSurface};
-    border: ${({ theme, $hideBorder }) => !$hideBorder && `1px solid ${theme.backgroundOutline}`};
-    box-shadow: ${({ theme }) => theme.deepShadow};
+    background-color: ${({ theme }) => theme.surface2};
+    border: ${({ theme, $hideBorder }) => !$hideBorder && `1px solid ${theme.surface3}`};
+    box-shadow: ${({ theme }) => theme.deprecated_deepShadow};
     padding: 0px;
     width: 50vw;
     overflow-y: auto;

src/components/ModalViews/index.tsx

@@ -50,7 +50,7 @@ export function SubmittedView({ children, onDismiss, hash }: { children: any; on
         <CloseIcon onClick={onDismiss} />
       </RowBetween>
       <ConfirmedIcon>
-        <ArrowUpCircle strokeWidth={0.5} size={90} color={theme.accentAction} />
+        <ArrowUpCircle strokeWidth={0.5} size={90} color={theme.accent1} />
       </ConfirmedIcon>
       <AutoColumn gap="100px" justify="center">
         {children}

src/components/NavBar/Bag.tsx

@@ -7,9 +7,9 @@ import styled from 'styled-components'
 import { shallow } from 'zustand/shallow'
 
 const CounterDot = styled.div`
-  background-color: ${({ theme }) => theme.accentAction};
+  background-color: ${({ theme }) => theme.accent1};
   border-radius: 100px;
-  color: ${({ theme }) => theme.accentTextLightPrimary};
+  color: ${({ theme }) => theme.deprecated_accentTextLightPrimary};
   font-size: 10px;
   line-height: 12px;
   min-height: 16px;

src/components/NavBar/ChainSelector.css.ts

@@ -6,18 +6,18 @@ import { sprinkles } from '../../nft/css/sprinkles.css'
 export const ChainSelector = style([
   lightGrayOverlayOnHover,
   sprinkles({
-    borderRadius: '8',
-    height: '40',
+    borderRadius: '20',
+    height: '36',
     cursor: 'pointer',
     border: 'none',
-    color: 'textPrimary',
+    color: 'neutral1',
     background: 'none',
   }),
 ])
 
 export const Image = style([
   sprinkles({
-    width: '20',
-    height: '20',
+    width: '24',
+    height: '24',
   }),
 ])

src/components/NavBar/ChainSelector.tsx

@@ -136,7 +136,7 @@ export const ChainSelector = ({ leftAlign }: ChainSelectorProps) => {
   const chevronProps = {
     height: 20,
     width: 20,
-    color: theme.textSecondary,
+    color: theme.neutral2,
   }
 
   return (
@@ -147,11 +147,11 @@ export const ChainSelector = ({ leftAlign }: ChainSelectorProps) => {
           as="button"
           gap="8"
           className={styles.ChainSelector}
-          background={isOpen ? 'accentActiveSoft' : 'none'}
+          background={isOpen ? 'accent2' : 'none'}
           onClick={() => setIsOpen(!isOpen)}
         >
           {!isSupported ? (
-            <AlertTriangle size={20} color={theme.textSecondary} />
+            <AlertTriangle size={20} color={theme.neutral2} />
           ) : (
             <img src={info.logoUrl} alt={info.label} className={styles.Image} data-testid="chain-selector-logo" />
           )}

src/components/NavBar/ChainSelectorRow.tsx

@@ -13,7 +13,7 @@ const Container = styled.button<{ disabled: boolean }>`
   background: none;
   border: none;
   border-radius: 12px;
-  color: ${({ theme }) => theme.textPrimary};
+  color: ${({ theme }) => theme.neutral1};
   cursor: ${({ disabled }) => (disabled ? 'auto' : 'pointer')};
   display: grid;
   grid-template-columns: min-content 1fr min-content;
@@ -31,7 +31,7 @@ const Container = styled.button<{ disabled: boolean }>`
   }
 
   &:hover {
-    background-color: ${({ disabled, theme }) => (disabled ? 'none' : theme.backgroundOutline)};
+    background-color: ${({ disabled, theme }) => (disabled ? 'none' : theme.surface3)};
   }
 `
 
@@ -39,6 +39,7 @@ const Label = styled.div`
   grid-column: 2;
   grid-row: 1;
   font-size: 16px;
+  font-weight: 485;
 `
 
 const Status = styled.div`
@@ -50,7 +51,7 @@ const Status = styled.div`
 `
 
 const CaptionText = styled.div`
-  color: ${({ theme }) => theme.textSecondary};
+  color: ${({ theme }) => theme.neutral2};
   font-size: 12px;
   grid-column: 2;
   grid-row: 2;
@@ -96,7 +97,7 @@ export default function ChainSelectorRow({ disabled, targetChain, onSelectChain,
         </CaptionText>
       )}
       <Status>
-        {active && <CheckMarkIcon width={LOGO_SIZE} height={LOGO_SIZE} color={theme.accentActive} />}
+        {active && <CheckMarkIcon width={LOGO_SIZE} height={LOGO_SIZE} color={theme.accent1} />}
         {!active && isPending && <Loader width={LOGO_SIZE} height={LOGO_SIZE} />}
       </Status>
     </Container>

src/components/NavBar/MenuDropdown.css.ts

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