refactor: deprecate theme.none (#4362)

src/components/Button/index.tsx

@@ -105,7 +105,7 @@ export const ButtonLight = styled(BaseButton)<{ redesignFlag?: boolean }>`
     opacity: 0.4;
     :hover {
       cursor: auto;
-      background-color: ${({ theme, redesignFlag }) => (redesignFlag ? theme.none : theme.deprecated_primary5)};
+      background-color: ${({ theme, redesignFlag }) => (redesignFlag ? 'transparent' : theme.deprecated_primary5)};
       box-shadow: none;
       border: 1px solid transparent;
       outline: none;

src/components/CurrencyInputPanel/index.tsx

@@ -31,7 +31,7 @@ const InputPanel = styled.div<{ hideInput?: boolean; redesignFlag: boolean }>`
   position: relative;
   border-radius: ${({ hideInput }) => (hideInput ? '16px' : '20px')};
   background-color: ${({ theme, redesignFlag, hideInput }) =>
-    redesignFlag ? theme.none : hideInput ? 'transparent' : theme.deprecated_bg2};
+    redesignFlag ? 'transparent' : hideInput ? 'transparent' : theme.deprecated_bg2};
   z-index: 1;
   width: ${({ hideInput }) => (hideInput ? '100%' : 'initial')};
   transition: height 1s ease;
@@ -43,7 +43,7 @@ const FixedContainer = styled.div<{ redesignFlag: boolean }>`
   height: 100%;
   position: absolute;
   border-radius: 20px;
-  background-color: ${({ theme, redesignFlag }) => (redesignFlag ? theme.none : theme.deprecated_bg2)};
+  background-color: ${({ theme, redesignFlag }) => (redesignFlag ? 'transparent' : theme.deprecated_bg2)};
   display: flex;
   align-items: center;
   justify-content: center;
@@ -52,8 +52,8 @@ const FixedContainer = styled.div<{ redesignFlag: boolean }>`
 
 const Container = styled.div<{ hideInput: boolean; disabled: boolean; redesignFlag: boolean }>`
   border-radius: ${({ hideInput }) => (hideInput ? '16px' : '20px')};
-  border: 1px solid ${({ theme, redesignFlag }) => (redesignFlag ? theme.none : theme.deprecated_bg0)};
-  background-color: ${({ theme, redesignFlag }) => (redesignFlag ? theme.none : theme.deprecated_bg1)};
+  border: 1px solid ${({ theme, redesignFlag }) => (redesignFlag ? 'transparent' : theme.deprecated_bg0)};
+  background-color: ${({ theme, redesignFlag }) => (redesignFlag ? 'transparent' : theme.deprecated_bg1)};
   width: ${({ hideInput }) => (hideInput ? '100%' : 'initial')};
   ${({ theme, hideInput, disabled, redesignFlag }) =>
     !redesignFlag &&

src/components/Explore/TokenDetails/TokenDetail.tsx

@@ -209,7 +209,7 @@ export default function LoadedTokenDetail({ address }: { address: string }) {
               <Heart
                 size={15}
                 color={isFavorited ? theme.accentAction : theme.textSecondary}
-                fill={isFavorited ? theme.accentAction : theme.none}
+                fill={isFavorited ? theme.accentAction : 'transparent'}
               />
             </ClickFavorited>
           </TokenActions>

src/components/Explore/TokenTable/FavoriteButton.tsx

@@ -38,7 +38,7 @@ export default function FavoriteButton() {
   return (
     <StyledFavoriteButton onClick={() => setShowFavorites(!showFavorites)} active={showFavorites}>
       <FavoriteButtonContent>
-        <Heart size={17} color={theme.textPrimary} fill={theme.none} />
+        <Heart size={17} color={theme.textPrimary} fill="transparent" />
         <FavoriteText>Favorites</FavoriteText>
       </FavoriteButtonContent>
     </StyledFavoriteButton>

src/components/Explore/TokenTable/SearchBar.tsx

@@ -17,7 +17,7 @@ const SearchInput = styled.input<{ expanded: boolean }>`
   background-image: ${({ expanded }) => !expanded && `url(${searchIcon})`};
   background-size: 20px 20px;
   background-position: 14px center;
-  background-color: ${({ theme }) => theme.none};
+  background-color: 'transparent';
   border-radius: 12px;
   border: 1px solid ${({ theme }) => theme.backgroundOutline};
   height: 100%;
@@ -38,7 +38,7 @@ const SearchInput = styled.input<{ expanded: boolean }>`
     border: none;
   }
   ::placeholder {
-    color: ${({ expanded, theme }) => (expanded ? theme.textTertiary : theme.none)};
+    color: ${({ expanded, theme }) => (expanded ? theme.textTertiary : 'transparent')};
   }
   ::-webkit-search-cancel-button {
     -webkit-appearance: none;

src/components/Explore/TokenTable/TokenRow.tsx

@@ -129,7 +129,7 @@ const StyledHeaderRow = styled(StyledTokenRow)`
   width: 100%;
 
   &:hover {
-    background-color: ${({ theme }) => theme.none};
+    background-color: 'transparent';
   }
 
   @media only screen and (max-width: ${MAX_WIDTH_MEDIA_BREAKPOINT}) {

src/components/FeatureFlagModal/FeatureFlagModal.tsx

@@ -43,7 +43,7 @@ const Row = styled.div`
 
 const CloseButton = styled.button`
   cursor: pointer;
-  background: ${({ theme }) => theme.none};
+  background: 'transparent';
   border: none;
   color: ${({ theme }) => theme.textPrimary};
 `

src/components/NumericalInput/index.tsx

@@ -12,7 +12,7 @@ const StyledInput = styled.input<{ error?: boolean; fontSize?: string; align?: s
   outline: none;
   border: none;
   flex: 1 1 auto;
-  background-color: ${({ theme, redesignFlag }) => (redesignFlag ? theme.none : theme.deprecated_bg1)};
+  background-color: ${({ theme, redesignFlag }) => (redesignFlag ? 'transparent' : theme.deprecated_bg1)};
   font-size: ${({ fontSize }) => fontSize ?? '28px'};
   text-align: ${({ align }) => align && align};
   white-space: nowrap;

src/components/SearchModal/CommonBases.tsx

@@ -24,7 +24,7 @@ const BaseWrapper = styled.div<{ disable?: boolean; redesignFlag?: boolean }>`
       disable
         ? redesignFlag
           ? theme.accentAction
-          : theme.none
+          : 'transparent'
         : redesignFlag
         ? theme.backgroundOutline
         : theme.deprecated_bg3};

src/components/swap/SwapDetailsDropdown.tsx

@@ -42,9 +42,10 @@ const StyledCard = styled(OutlineCard)<{ redesignFlag: boolean }>`
 
 const StyledHeaderRow = styled(RowBetween)<{ disabled: boolean; open: boolean; redesignFlag: boolean }>`
   padding: ${({ redesignFlag }) => (redesignFlag ? '8px 0px 0px 0px' : '4px 8px')};
-  background-color: ${({ open, theme, redesignFlag }) => (open && !redesignFlag ? theme.deprecated_bg1 : theme.none)};
+  background-color: ${({ open, theme, redesignFlag }) =>
+    open && !redesignFlag ? theme.deprecated_bg1 : 'transparent'};
   align-items: center;
-  border-top: 1px solid ${({ theme, redesignFlag }) => (redesignFlag ? theme.backgroundOutline : theme.none)};
+  border-top: 1px solid ${({ theme, redesignFlag }) => (redesignFlag ? theme.backgroundOutline : 'transparent')};
   margin-top: ${({ redesignFlag }) => redesignFlag && '8px'};
   cursor: ${({ disabled }) => (disabled ? 'initial' : 'pointer')};
   min-height: 40px;

src/pages/AppBody.tsx

@@ -10,7 +10,7 @@ export const BodyWrapper = styled.main<{ margin?: string; maxWidth?: string; red
   width: 100%;
   background: ${({ theme, redesignFlag }) => (redesignFlag ? theme.backgroundSurface : theme.deprecated_bg0)};
   border-radius: ${({ redesignFlag }) => (redesignFlag ? '16px' : '24px')};
-  border: 1px solid ${({ theme, redesignFlag }) => (redesignFlag ? theme.backgroundOutline : theme.none)};
+  border: 1px solid ${({ theme, redesignFlag }) => (redesignFlag ? theme.backgroundOutline : 'transparent')};
   margin-top: 1rem;
   margin-left: auto;
   margin-right: auto;

src/theme/colors.ts

@@ -205,7 +205,6 @@ export interface Palette {
 
   white: Color
   black: Color
-  none: Color
 
   chain_1: Color
   chain_3: Color
@@ -228,8 +227,6 @@ export interface Palette {
 export const colorsLight: Palette = {
   userThemeColor: colors.magentaVibrant,
 
-  none: 'transparent',
-
   backgroundBackdrop: colors.white,
   backgroundSurface: colors.white,
   backgroundModule: colors.gray50,
@@ -321,7 +318,6 @@ export const colorsDark: Palette = {
 
   white: colors.white,
   black: colors.black,
-  none: 'transparent',
 
   chain_1: colors.networkEthereum,
   chain_3: colors.yellow400,

src/theme/index.tsx

@@ -92,7 +92,6 @@ function uniswapThemeColors(darkMode: boolean): ThemeColors {
     accentTextLightSecondary: darkMode ? colorsDark.accentTextLightSecondary : colorsLight.accentTextLightSecondary,
     accentTextLightTertiary: darkMode ? colorsDark.accentTextLightTertiary : colorsLight.accentTextLightTertiary,
 
-    none: colorsDark.none,
     white: ColorsPalette.white,
     black: ColorsPalette.black,
 

src/theme/styled.d.ts

@@ -37,7 +37,6 @@ export interface ThemeColors {
 
   white: Color
   black: Color
-  none: Color
 
   chain_1: Color
   chain_3: Color