chore: remove theme.blue200 (#4533)

* chore: remove theme.blue200

* favorite button changes

src/components/Tokens/TokenTable/FavoriteButton.tsx

@@ -15,9 +15,9 @@ const FavoriteButtonContent = styled.div`
 const StyledFavoriteButton = styled.button<{ active: boolean }>`
   padding: 0px 16px;
   border-radius: 12px;
-  background-color: ${({ theme, active }) => (active ? theme.accentAction : theme.backgroundInteractive)};
+  background-color: ${({ theme, active }) => (active ? theme.accentActiveSoft : theme.backgroundInteractive)};
   border: none;
-  color: ${({ theme, active }) => (active ? theme.white : theme.textPrimary)};
+  color: ${({ theme, active }) => (active ? theme.accentActive : theme.textPrimary)};
   font-size: 16px;
   font-weight: 600;
   cursor: pointer;
@@ -38,7 +38,11 @@ export default function FavoriteButton() {
   return (
     <StyledFavoriteButton onClick={() => setShowFavorites(!showFavorites)} active={showFavorites}>
       <FavoriteButtonContent>
-        <Heart size={17} color={showFavorites ? theme.white : theme.textPrimary} fill="transparent" />
+        <Heart
+          size={17}
+          color={showFavorites ? theme.accentActive : theme.textPrimary}
+          fill={showFavorites ? theme.accentActive : 'transparent'}
+        />
         <FavoriteText>
           <Trans>Favorites</Trans>
         </FavoriteText>

src/components/Tokens/TokenTable/NetworkFilter.tsx

@@ -63,7 +63,7 @@ const MenuTimeFlyout = styled.span`
 const StyledMenuButton = styled.button<{ open: boolean }>`
   width: 100%;
   height: 100%;
-  color: ${({ theme, open }) => (open ? theme.blue200 : theme.textPrimary)};
+  color: ${({ theme, open }) => (open ? theme.accentActive : theme.textPrimary)};
   border: none;
   background-color: ${({ theme, open }) => (open ? theme.accentActiveSoft : theme.backgroundInteractive)};
   margin: 0;
@@ -115,7 +115,7 @@ const StyledMenuContent = styled.div`
 
 const Chevron = styled.span<{ open: boolean }>`
   padding-top: 1px;
-  color: ${({ open, theme }) => (open ? theme.blue200 : theme.textSecondary)};
+  color: ${({ open, theme }) => (open ? theme.accentActive : theme.textSecondary)};
 `
 const NetworkLabel = styled.div`
   display: flex;

src/components/Tokens/TokenTable/TimeSelector.tsx

@@ -81,7 +81,7 @@ const StyledMenuButton = styled.button<{ open: boolean }>`
   width: 100%;
   height: 100%;
   border: none;
-  color: ${({ theme, open }) => (open ? theme.blue200 : theme.textPrimary)};
+  color: ${({ theme, open }) => (open ? theme.accentActive : theme.textPrimary)};
   margin: 0;
   background-color: ${({ theme, open }) => (open ? theme.accentActiveSoft : theme.backgroundInteractive)};
   padding: 6px 12px 6px 12px;
@@ -131,7 +131,7 @@ const StyledMenuContent = styled.div`
 
 const Chevron = styled.span<{ open: boolean }>`
   padding-top: 1px;
-  color: ${({ open, theme }) => (open ? theme.blue200 : theme.textSecondary)};
+  color: ${({ open, theme }) => (open ? theme.accentActive : theme.textSecondary)};
 `
 
 // TODO: change this to reflect data pipeline

src/theme/index.tsx

@@ -131,7 +131,6 @@ function uniswapThemeColors(darkMode: boolean): ThemeColors {
     chain_421611: colorsDark.chain_421611,
     chain_80001: colorsDark.chain_80001,
 
-    blue200: ColorsPalette.blue200,
     shallowShadow: darkMode ? colorsDark.shallowShadow : colorsLight.shallowShadow,
     deepShadow: darkMode ? colorsDark.deepShadow : colorsLight.deepShadow,
     hoverState: opacify(24, ColorsPalette.blue200),

src/theme/styled.d.ts

@@ -53,7 +53,6 @@ export interface ThemeColors {
   chain_421611: Color
   chain_80001: Color
 
-  blue200: Color
   shallowShadow: Color
   deepShadow: Color
   hoverState: Color