Add new colors :)

cypress/e2e/remove-liquidity.test.ts

@@ -1,4 +1,4 @@
-describe('Remove Liquidity', () => {
+describe('Remove liquidity', () => {
   it('eth remove', () => {
     cy.visit('/remove/v2/ETH/0x1f9840a85d5aF5bf1D1762F925BDADdC4201F984')
     cy.get('#remove-liquidity-tokena-symbol').should('contain.text', 'ETH')

public/index.html

@@ -37,31 +37,33 @@
     -->
     <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/Inter-roman.var.woff2" as="font" type="font/woff2" crossorigin /> -->
+    <link rel="preload" href="%PUBLIC_URL%/fonts/Basel-Grotesk-Essential-Variable.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.
         */
       @font-face {
-        font-family: 'Inter custom';
+        font-family: 'Basel';
         font-weight: 100 900;
         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-Grotesk-Essential-Variable.woff) format('woff');
       }
 
       @supports (font-variation-settings: normal) {
         * {
-          font-family: 'Inter custom', sans-serif;
+          font-family: 'Basel', sans-serif;
+
         }
       }
 
@@ -77,9 +79,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);
       }

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,10 @@ const StyledCard = styled.div<{ $isDarkMode: boolean; $backgroundImgSrc?: string
   display: flex;
   background: ${({ $isDarkMode, $backgroundImgSrc, $type, theme }) =>
     $isDarkMode
-      ? `${$type === CardType.Primary ? theme.backgroundModule : theme.backgroundSurface} ${
+      ? `${$type === CardType.Primary ? theme.surface2 : theme.surface1} ${
           $backgroundImgSrc ? ` url(${$backgroundImgSrc})` : ''
         }`
-      : `${$type === CardType.Primary ? 'white' : theme.backgroundModule} url(${$backgroundImgSrc})`};
+      : `${$type === CardType.Primary ? 'white' : theme.surface2} url(${$backgroundImgSrc})`};
   background-size: auto 100%;
   background-position: right;
   background-repeat: no-repeat;
@@ -26,16 +26,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 +53,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 +64,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 +87,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,