clean up UI

.ladle/components.tsx

@@ -9,9 +9,9 @@ import { GlobalStyle } from '@/styles/globalStyle';
 
 import { SelectMenu, SelectItem } from '@/components/SelectMenu';
 
-import { AppThemeAndColorModeProvider } from '@/hooks/useAppThemeAndColorMode';
+import { AppThemeProvider } from '@/hooks/useAppTheme';
 
-import { AppTheme, AppColorMode, setAppTheme, setAppColorMode } from '@/state/configs';
+import { AppTheme, setAppTheme } from '@/state/configs';
 import { setLocaleLoaded } from '@/state/localization';
 
 import '@/index.css';
@@ -19,12 +19,9 @@ import './ladle.css';
 
 export const StoryWrapper: React.FC<{ children: React.ReactNode }> = ({ children }) => {
   const [theme, setTheme] = useState(AppTheme.Classic);
-  const [colorMode, setColorMode] = useState(AppColorMode.GreenUp);
 
   useEffect(() => {
     store.dispatch(setAppTheme(theme));
-    store.dispatch(setAppColorMode(colorMode));
-
     switch (theme) {
       case AppTheme.Dark: {
         document?.documentElement?.classList.remove('theme-light');
@@ -41,7 +38,7 @@ export const StoryWrapper: React.FC<{ children: React.ReactNode }> = ({ children
         break;
       }
     }
-  }, [theme, colorMode]);
+  }, [theme]);
 
   useEffect(() => {
     store.dispatch(setLocaleLoaded(true));
@@ -51,7 +48,10 @@ export const StoryWrapper: React.FC<{ children: React.ReactNode }> = ({ children
     <Provider store={store}>
       <StoryHeader>
         <h4>Active Theme:</h4>
-        <SelectMenu value={theme} onValueChange={setTheme}>
+        <SelectMenu
+          value={theme}
+          onValueChange={setTheme}
+        >
           {[
             {
               value: AppTheme.Classic,
@@ -66,31 +66,20 @@ export const StoryWrapper: React.FC<{ children: React.ReactNode }> = ({ children
               label: 'Light theme',
             },
           ].map(({ value, label }) => (
-            <SelectItem key={value} value={value} label={label} />
-          ))}
-        </SelectMenu>
-        <h4>Active Color Mode:</h4>
-        <SelectMenu value={colorMode} onValueChange={setColorMode}>
-          {[
-            {
-              value: AppColorMode.GreenUp,
-              label: 'Green up',
-            },
-            {
-              value: AppColorMode.RedUp,
-              label: 'Red up',
-            },
-          ].map(({ value, label }) => (
-            <SelectItem key={value} value={value} label={label} />
+            <SelectItem
+              key={value}
+              value={value}
+              label={label}
+            />
           ))}
         </SelectMenu>
       </StoryHeader>
       <hr />
-      <AppThemeAndColorModeProvider>
+      <AppThemeProvider>
         <GlobalStyle />
         <StoryContent>{children}</StoryContent>
-      </AppThemeAndColorModeProvider>
-    </Provider>
+      </AppThemeProvider>
+      </Provider>
   );
 };
 

public/configs/potentialMarketParameters.csv

@@ -1,69 +1,68 @@
-base_asset,reference_price,num_oracles,liquidity_tier,asset_name,p,atomic_resolution,min_exchanges,min_price_change_ppm,price_exponent,step_base_quantum,ticksize_exponent,subticks_per_tick,min_order_size,quantum_conversion_exponent
-AAVE,88.41933533,7,2,AAVE,1,-7,3,4000,-8,1000000,-3,1000000,1000000,-9
-ADA,0.4713770925,9,1,Cardano,-1,-5,3,2500,-10,1000000,-3,1000000,1000000,-9
-AGIX,0.2111443656,6,2,SingularityNET,-1,-5,3,4000,-10,1000000,-3,1000000,1000000,-9
-ALGO,0.1613430877,6,2,Algorand,-1,-5,3,4000,-10,1000000,-3,1000000,1000000,-9
-APE,1.121514886,7,2,ApeCoin,0,-6,3,4000,-9,1000000,-3,1000000,1000000,-9
-APT,7.323447408,8,2,Aptos,0,-6,3,4000,-9,1000000,-3,1000000,1000000,-9
-ARB,1.701673341,8,1,Arbitrum,0,-6,3,2500,-9,1000000,-3,1000000,1000000,-9
-ATOM,8.050389759,8,2,Cosmos,0,-6,3,4000,-9,1000000,-3,1000000,1000000,-9
-AVAX,30.38272818,9,1,Avalanche,1,-7,3,2500,-8,1000000,-3,1000000,1000000,-9
-BCH,236.328774,9,1,Bitcoin Cash,2,-8,3,2500,-7,1000000,-3,1000000,1000000,-9
-BLUR,0.6050104719,7,2,Blur,-1,-5,3,4000,-10,1000000,-3,1000000,1000000,-9
-BNB,243.1294766,6,2,Binance Coin,2,-8,3,4000,-7,1000000,-3,1000000,1000000,-9
-BONK,1.09E-05,6,2,Bonk Token,-5,-1,3,4000,-14,1000000,-3,1000000,1000000,-9
-BTC,39909.14585,9,1,Bitcoin,4,-10,3,2500,-5,1000000,-3,1000000,1000000,-9
-CFX,0.1454384387,5,2,Conflux Token,-1,-5,3,4000,-10,1000000,-3,1000000,1000000,-9
-CHZ,0.08712744693,6,2,Chiliz,-2,-4,3,4000,-11,1000000,-3,1000000,1000000,-9
-COMP,52.74250938,5,2,Compound Coin,1,-7,3,4000,-8,1000000,-3,1000000,1000000,-9
-CRV,0.4443624604,6,2,Curve DAO Token,-1,-5,3,4000,-10,1000000,-3,1000000,1000000,-9
-DOGE,0.07793177878,9,1,Dogecoin,-2,-4,3,2500,-11,1000000,-3,1000000,1000000,-9
-DOT,6.452414058,8,1,Polkadot,0,-6,3,2500,-9,1000000,-3,1000000,1000000,-9
-EGLD,39.03897897,5,2,MultiversX,1,-7,3,4000,-8,1000000,-3,1000000,1000000,-9
-ENS,14.85690244,6,2,Ethereum Name Service (ENS),1,-7,3,4000,-8,1000000,-3,1000000,1000000,-9
-EOS,0.5977251446,8,2,Eos,-1,-5,3,4000,-10,1000000,-3,1000000,1000000,-9
-ETC,22.84861344,8,1,Ethereum Classic,1,-7,3,2500,-8,1000000,-3,1000000,1000000,-9
-ETH,2211.721168,9,1,Ethereum,3,-9,3,2500,-6,1000000,-3,1000000,1000000,-9
-FET,0.5864541562,6,2,Fetch AI,-1,-5,3,4000,-10,1000000,-3,1000000,1000000,-9
-FIL,4.930296959,8,1,Filecoin,0,-6,3,2500,-9,1000000,-3,1000000,1000000,-9
-FLOW,0.5828593278,5,2,Flow - Dapper Labs,-1,-5,3,4000,-10,1000000,-3,1000000,1000000,-9
-FTM,0.3359983176,6,2,Fantom,-1,-5,3,4000,-10,1000000,-3,1000000,1000000,-9
-GALA,0.01840015547,6,2,Gala,-2,-4,3,4000,-11,1000000,-3,1000000,1000000,-9
-GMT,0.2045438866,5,2,STEPN,-1,-5,3,4000,-10,1000000,-3,1000000,1000000,-9
-GRT,0.128018834,7,2,The Graph,-1,-5,3,4000,-10,1000000,-3,1000000,1000000,-9
-HBAR,0.07127967284,7,2,Hedera Hashgraph,-2,-4,3,4000,-11,1000000,-3,1000000,1000000,-9
-ICP,11.47442186,7,2,Internet Computer,1,-7,3,4000,-8,1000000,-3,1000000,1000000,-9
-INJ,31.78305093,7,2,Injective Protocol,1,-7,3,4000,-8,1000000,-3,1000000,1000000,-9
-JTO,1.886208515,6,2,Jito,0,-6,3,4000,-9,1000000,-3,1000000,1000000,-9
-JUP,0.69,6,2,Jupiter,-1,-5,3,4000,-10,1000000,-3,1000000,1000000,-9
-KAVA,0.5751546332,6,2,Kava,-1,-5,3,4000,-10,1000000,-3,1000000,1000000,-9
-LDO,2.524539255,8,2,Lido DAO,0,-6,3,4000,-9,1000000,-3,1000000,1000000,-9
-LINK,13.81655633,8,1,ChainLink,1,-7,3,2500,-8,1000000,-3,1000000,1000000,-9
-LTC,65.43204352,9,1,Litecoin,1,-7,3,2500,-8,1000000,-3,1000000,1000000,-9
-MANA,0.3716510229,7,2,Decentraland,-1,-5,3,4000,-10,1000000,-3,1000000,1000000,-9
-MASK,2.787727403,7,2,Mask Network,0,-6,3,4000,-9,1000000,-3,1000000,1000000,-9
-MATIC,0.7288467315,9,1,Matic Network,-1,-5,3,2500,-10,1000000,-3,1000000,1000000,-9
-MEME,0.01801497104,5,2,Memecoin Price,-2,-4,3,4000,-11,1000000,-3,1000000,1000000,-9
-MINA,1.008126033,5,2,Mina,0,-6,3,4000,-9,1000000,-3,1000000,1000000,-9
-MKR,2113.151651,6,2,Maker,3,-9,3,4000,-6,1000000,-3,1000000,1000000,-9
-NEAR,2.674751578,8,1,Near,0,-6,3,2500,-9,1000000,-3,1000000,1000000,-9
-OP,2.456951554,7,2,Optimism,0,-6,3,4000,-9,1000000,-3,1000000,1000000,-9
-ORDI,43.0494516,6,2,Ordinals,1,-7,3,4000,-8,1000000,-3,1000000,1000000,-9
-PEOPLE,0.02194591464,5,2,ConstitutionDAO,-2,-4,3,4000,-11,1000000,-3,1000000,1000000,-9
-PEPE,1.02E-06,6,2,Pepe,-6,0,3,4000,-15,1000000,-3,1000000,1000000,-9
-RNDR,3.777241656,6,2,Render Token,0,-6,3,4000,-9,1000000,-3,1000000,1000000,-9
-SAND,0.3751083804,7,2,SAND,-1,-5,3,4000,-10,1000000,-3,1000000,1000000,-9
-SEI,0.6149970988,7,2,Sei,-1,-5,3,4000,-10,1000000,-3,1000000,1000000,-9
-SHIB,8.84E-06,8,1,Shiba Inu,-6,0,3,2500,-15,1000000,-3,1000000,1000000,-9
-SNX,3.130619706,6,2,Synthetix Network Token,0,-6,3,4000,-9,1000000,-3,1000000,1000000,-9
-SOL,87.46988589,9,1,Solana,1,-7,3,2500,-8,1000000,-3,1000000,1000000,-9
-STX,1.255152213,7,2,Stacks,0,-6,3,4000,-9,1000000,-3,1000000,1000000,-9
-SUI,1.224271493,6,2,SuiNetwork,0,-6,3,4000,-9,1000000,-3,1000000,1000000,-9
-SUSHI,0.8926299706,6,2,Sushi,-1,-5,3,4000,-10,1000000,-3,1000000,1000000,-9
-TIA,15.55257715,7,2,Celestia,1,-7,3,4000,-8,1000000,-3,1000000,1000000,-9
-TRX,0.09702155504,8,2,TRON,-2,-4,3,4000,-11,1000000,-3,1000000,1000000,-9
-UNI,5.760612586,7,2,Uniswap,0,-6,3,4000,-9,1000000,-3,1000000,1000000,-9
-WAVES,2.145700544,5,2,Waves,0,-6,3,4000,-9,1000000,-3,1000000,1000000,-9
-WLD,1.907665645,6,2,Worldcoin WLD,0,-6,3,4000,-9,1000000,-3,1000000,1000000,-9
-XLM,0.1116437262,8,1,Stellar,-1,-5,3,2500,-10,1000000,-3,1000000,1000000,-9
-XRP,0.5112717386,9,1,Ripple,-1,-5,3,2500,-10,1000000,-3,1000000,1000000,-9
+base_asset,reference_price,num_oracles,liquidity_tier,asset_name,p,atomic_resolution,min_exchanges,min_price_change_ppm,price_exponent,step_base_quantum,ticksize_exponent,subticks_per_tick,min_order_size,quantum_conversion_exponent
+AAVE,88.41933533,7,2,AAVE,1,-7,3,4000,-8,1000000,-3,1000000,1000000,-9
+ADA,0.4713770925,9,1,Cardano,-1,-5,3,2500,-10,1000000,-3,1000000,1000000,-9
+AGIX,0.2111443656,6,2,SingularityNET,-1,-5,3,4000,-10,1000000,-3,1000000,1000000,-9
+ALGO,0.1613430877,6,2,Algorand,-1,-5,3,4000,-10,1000000,-3,1000000,1000000,-9
+APE,1.121514886,7,2,ApeCoin,0,-6,3,4000,-9,1000000,-3,1000000,1000000,-9
+APT,7.323447408,8,2,Aptos,0,-6,3,4000,-9,1000000,-3,1000000,1000000,-9
+ARB,1.701673341,8,1,Arbitrum,0,-6,3,2500,-9,1000000,-3,1000000,1000000,-9
+ATOM,8.050389759,8,2,Cosmos,0,-6,3,4000,-9,1000000,-3,1000000,1000000,-9
+AVAX,30.38272818,9,1,Avalanche,1,-7,3,2500,-8,1000000,-3,1000000,1000000,-9
+BCH,236.328774,9,1,Bitcoin Cash,2,-8,3,2500,-7,1000000,-3,1000000,1000000,-9
+BLUR,0.6050104719,7,2,Blur,-1,-5,3,4000,-10,1000000,-3,1000000,1000000,-9
+BNB,243.1294766,6,2,Binance Coin,2,-8,3,4000,-7,1000000,-3,1000000,1000000,-9
+BONK,1.09E-05,6,2,Bonk Token,-5,-1,3,4000,-14,1000000,-3,1000000,1000000,-9
+BTC,39909.14585,9,1,Bitcoin,4,-10,3,2500,-5,1000000,-3,1000000,1000000,-9
+CFX,0.1454384387,5,2,Conflux Token,-1,-5,3,4000,-10,1000000,-3,1000000,1000000,-9
+CHZ,0.08712744693,6,2,Chiliz,-2,-4,3,4000,-11,1000000,-3,1000000,1000000,-9
+COMP,52.74250938,5,2,Compound Coin,1,-7,3,4000,-8,1000000,-3,1000000,1000000,-9
+CRV,0.4443624604,6,2,Curve DAO Token,-1,-5,3,4000,-10,1000000,-3,1000000,1000000,-9
+DOGE,0.07793177878,9,1,Dogecoin,-2,-4,3,2500,-11,1000000,-3,1000000,1000000,-9
+DOT,6.452414058,8,1,Polkadot,0,-6,3,2500,-9,1000000,-3,1000000,1000000,-9
+EGLD,39.03897897,5,2,MultiversX,1,-7,3,4000,-8,1000000,-3,1000000,1000000,-9
+ENS,14.85690244,6,2,Ethereum Name Service (ENS),1,-7,3,4000,-8,1000000,-3,1000000,1000000,-9
+EOS,0.5977251446,8,2,Eos,-1,-5,3,4000,-10,1000000,-3,1000000,1000000,-9
+ETC,22.84861344,8,1,Ethereum Classic,1,-7,3,2500,-8,1000000,-3,1000000,1000000,-9
+ETH,2211.721168,9,1,Ethereum,3,-9,3,2500,-6,1000000,-3,1000000,1000000,-9
+FET,0.5864541562,6,2,Fetch AI,-1,-5,3,4000,-10,1000000,-3,1000000,1000000,-9
+FIL,4.930296959,8,1,Filecoin,0,-6,3,2500,-9,1000000,-3,1000000,1000000,-9
+FLOW,0.5828593278,5,2,Flow - Dapper Labs,-1,-5,3,4000,-10,1000000,-3,1000000,1000000,-9
+FTM,0.3359983176,6,2,Fantom,-1,-5,3,4000,-10,1000000,-3,1000000,1000000,-9
+GALA,0.01840015547,6,2,Gala,-2,-4,3,4000,-11,1000000,-3,1000000,1000000,-9
+GMT,0.2045438866,5,2,STEPN,-1,-5,3,4000,-10,1000000,-3,1000000,1000000,-9
+GRT,0.128018834,7,2,The Graph,-1,-5,3,4000,-10,1000000,-3,1000000,1000000,-9
+HBAR,0.07127967284,7,2,Hedera Hashgraph,-2,-4,3,4000,-11,1000000,-3,1000000,1000000,-9
+ICP,11.47442186,7,2,Internet Computer,1,-7,3,4000,-8,1000000,-3,1000000,1000000,-9
+INJ,31.78305093,7,2,Injective Protocol,1,-7,3,4000,-8,1000000,-3,1000000,1000000,-9
+JTO,1.886208515,6,2,Jito,0,-6,3,4000,-9,1000000,-3,1000000,1000000,-9
+KAVA,0.5751546332,6,2,Kava,-1,-5,3,4000,-10,1000000,-3,1000000,1000000,-9
+LDO,2.524539255,8,2,Lido DAO,0,-6,3,4000,-9,1000000,-3,1000000,1000000,-9
+LINK,13.81655633,8,1,ChainLink,1,-7,3,2500,-8,1000000,-3,1000000,1000000,-9
+LTC,65.43204352,9,1,Litecoin,1,-7,3,2500,-8,1000000,-3,1000000,1000000,-9
+MANA,0.3716510229,7,2,Decentraland,-1,-5,3,4000,-10,1000000,-3,1000000,1000000,-9
+MASK,2.787727403,7,2,Mask Network,0,-6,3,4000,-9,1000000,-3,1000000,1000000,-9
+MATIC,0.7288467315,9,1,Matic Network,-1,-5,3,2500,-10,1000000,-3,1000000,1000000,-9
+MEME,0.01801497104,5,2,Memecoin Price,-2,-4,3,4000,-11,1000000,-3,1000000,1000000,-9
+MINA,1.008126033,5,2,Mina,0,-6,3,4000,-9,1000000,-3,1000000,1000000,-9
+MKR,2113.151651,6,2,Maker,3,-9,3,4000,-6,1000000,-3,1000000,1000000,-9
+NEAR,2.674751578,8,1,Near,0,-6,3,2500,-9,1000000,-3,1000000,1000000,-9
+OP,2.456951554,7,2,Optimism,0,-6,3,4000,-9,1000000,-3,1000000,1000000,-9
+ORDI,43.0494516,6,2,Ordinals,1,-7,3,4000,-8,1000000,-3,1000000,1000000,-9
+PEOPLE,0.02194591464,5,2,ConstitutionDAO,-2,-4,3,4000,-11,1000000,-3,1000000,1000000,-9
+PEPE,1.02E-06,6,2,Pepe,-6,0,3,4000,-15,1000000,-3,1000000,1000000,-9
+RNDR,3.777241656,6,2,Render Token,0,-6,3,4000,-9,1000000,-3,1000000,1000000,-9
+SAND,0.3751083804,7,2,SAND,-1,-5,3,4000,-10,1000000,-3,1000000,1000000,-9
+SEI,0.6149970988,7,2,Sei,-1,-5,3,4000,-10,1000000,-3,1000000,1000000,-9
+SHIB,8.84E-06,8,1,Shiba Inu,-6,0,3,2500,-15,1000000,-3,1000000,1000000,-9
+SNX,3.130619706,6,2,Synthetix Network Token,0,-6,3,4000,-9,1000000,-3,1000000,1000000,-9
+SOL,87.46988589,9,1,Solana,1,-7,3,2500,-8,1000000,-3,1000000,1000000,-9
+STX,1.255152213,7,2,Stacks,0,-6,3,4000,-9,1000000,-3,1000000,1000000,-9
+SUI,1.224271493,6,2,SuiNetwork,0,-6,3,4000,-9,1000000,-3,1000000,1000000,-9
+SUSHI,0.8926299706,6,2,Sushi,-1,-5,3,4000,-10,1000000,-3,1000000,1000000,-9
+TIA,15.55257715,7,2,Celestia,1,-7,3,4000,-8,1000000,-3,1000000,1000000,-9
+TRX,0.09702155504,8,2,TRON,-2,-4,3,4000,-11,1000000,-3,1000000,1000000,-9
+UNI,5.760612586,7,2,Uniswap,0,-6,3,4000,-9,1000000,-3,1000000,1000000,-9
+WAVES,2.145700544,5,2,Waves,0,-6,3,4000,-9,1000000,-3,1000000,1000000,-9
+WLD,1.907665645,6,2,Worldcoin WLD,0,-6,3,4000,-9,1000000,-3,1000000,1000000,-9
+XLM,0.1116437262,8,1,Stellar,-1,-5,3,2500,-10,1000000,-3,1000000,1000000,-9
+XRP,0.5112717386,9,1,Ripple,-1,-5,3,2500,-10,1000000,-3,1000000,1000000,-9

src/App.tsx

@@ -16,7 +16,7 @@ import {
 } from '@/hooks';
 import { DydxProvider } from '@/hooks/useDydxClient';
 import { AccountsProvider } from '@/hooks/useAccounts';
-import { AppThemeAndColorModeProvider } from '@/hooks/useAppThemeAndColorMode';
+import { AppThemeProvider } from '@/hooks/useAppTheme';
 import { DialogAreaProvider, useDialogArea } from '@/hooks/useDialogArea';
 import { LocaleProvider } from '@/hooks/useLocaleSeparators';
 import { NotificationsProvider } from '@/hooks/useNotifications';
@@ -141,7 +141,8 @@ const providers = [
   wrapProvider(LocalNotificationsProvider),
   wrapProvider(NotificationsProvider),
   wrapProvider(DialogAreaProvider),
-  wrapProvider(AppThemeAndColorModeProvider),
+  wrapProvider(PotentialMarketsProvider),
+  wrapProvider(AppThemeProvider),
 ];
 
 const App = () => {

src/components/Button.tsx

@@ -102,13 +102,13 @@ const buttonActionVariants = {
 
   [ButtonAction.Create]: css`
     --button-textColor: var(--color-text-2);
-    --button-backgroundColor: var(--color-success);
+    --button-backgroundColor: var(--color-positive);
     --button-border: solid var(--border-width) var(--color-border-white);
   `,
 
   [ButtonAction.Destroy]: css`
     --button-textColor: var(--color-text-2);
-    --button-backgroundColor: var(--color-error);
+    --button-backgroundColor: var(--color-negative);
     --button-border: solid var(--border-width) var(--color-border-white);
   `,
 
@@ -119,7 +119,7 @@ const buttonActionVariants = {
   `,
 
   [ButtonAction.Reset]: css`
-    --button-textColor: var(--color-error);
+    --button-textColor: var(--color-negative);
     --button-backgroundColor: var(--color-layer-3);
     --button-border: solid var(--border-width) var(--color-border-red);
   `,

src/components/ComboboxMenu.tsx

@@ -50,11 +50,11 @@ export const ComboboxMenu = <MenuItemValue extends string, MenuGroupValue extend
       label={title}
       // value={highlightedCommand}
       // onValueChange={setHighlightedCommand}
-      filter={(value: string, search: string) =>
+      filter={(value: string, search: string) => {
         value.replace(/ /g, '').toLowerCase().includes(search.replace(/ /g, '').toLowerCase())
           ? 1
-          : 0
-      }
+          : 0;
+      }}
       className={className}
       $withStickyLayout={withStickyLayout}
     >

src/components/CopyButton.tsx

@@ -87,7 +87,7 @@ Styled.Icon = styled(Icon)<{ copied: boolean }>`
   ${({ copied }) =>
     copied &&
     css`
-      color: var(--color-success);
+      color: var(--color-positive);
     `}
 `;
 
@@ -96,7 +96,7 @@ Styled.IconButton = styled(IconButton)<{ copied: boolean }>`
     copied &&
     css`
       svg {
-        color: var(--color-success);
+        color: var(--color-positive);
       }
     `}
 `;

src/components/DiffArrow.tsx

@@ -62,6 +62,6 @@ Styled.DiffArrowContainer = styled.span<DiffArrowProps>`
       `,
       down: css`
         transform: rotate(90deg);
-      `,
+      `
     }[direction || 'right'])}
 `;

src/components/DiffOutput.tsx

@@ -75,7 +75,7 @@ Styled.DiffValue = styled.div<{ hasInvalidNewValue?: boolean }>`
   ${({ hasInvalidNewValue }) =>
     hasInvalidNewValue &&
     css`
-      color: var(--color-error);
+      color: var(--color-negative);
     `}
 `;
 

src/components/DropdownMenu.stories.tsx

@@ -6,34 +6,29 @@ import { StoryWrapper } from '.ladle/components';
 
 export const DropdownMenuStory: Story<Parameters<typeof DropdownMenu>> = (args) => {
   const exampleItems = [
-    {
-      value: '0',
-      label: 'Item 0',
-      onSelect: () => alert('Item 0 action'),
-    },
     {
       value: '1',
-      label: 'Item 1 (accent)',
+      label: 'Item 1',
       onSelect: () => alert('Item 1 action'),
-      highlightColor: 'accent',
     },
     {
       value: '2',
-      label: 'Item 2 (create)',
+      label: 'Item 2',
       onSelect: () => alert('Item 2 action'),
-      highlightColor: 'create',
     },
     {
       value: '3',
-      label: 'Item 3 (destroy)',
+      label: 'Item 3',
       onSelect: () => alert('Item 3 action'),
-      highlightColor: 'destroy',
     },
   ];
 
   return (
     <StoryWrapper>
-      <DropdownMenu {...args} items={exampleItems}>
+      <DropdownMenu
+        {...args}
+        items={exampleItems}
+      >
         <span>Menu</span>
       </DropdownMenu>
     </StoryWrapper>

src/components/DropdownMenu.tsx

@@ -13,7 +13,7 @@ export type DropdownMenuItem<T> = {
   label: React.ReactNode;
   onSelect?: () => void;
   separator?: boolean;
-  highlightColor?: 'accent' | 'create' | 'destroy';
+  highlightColor?: 'accent' | 'positive' | 'negative';
 };
 
 type StyleProps = {
@@ -82,7 +82,7 @@ Styled.Separator = styled(Separator)`
   margin: 0.25rem 1rem;
 `;
 
-Styled.Item = styled(Item)<{ $highlightColor: 'accent' | 'create' | 'destroy' }>`
+Styled.Item = styled(Item)<{ $highlightColor: 'accent' | 'positive' | 'negative' }>`
   ${popoverMixins.item}
   --item-font-size: var(--dropdownMenu-item-font-size);
   ${({ $highlightColor }) =>
@@ -90,11 +90,11 @@ Styled.Item = styled(Item)<{ $highlightColor: 'accent' | 'create' | 'destroy' }>
       ['accent']: `
         --item-highlighted-textColor: var(--color-accent);
       `,
-      ['create']: `
-        --item-highlighted-textColor: var(--color-success);
+      ['positive']: `
+        --item-highlighted-textColor: var(--color-positive);
       `,
-      ['destroy']: `
-        --item-highlighted-textColor: var(--color-error);
+      ['negative']: `
+        --item-highlighted-textColor: var(--color-negative);
       `,
     }[$highlightColor])}
 

src/components/WithConfirmationPopover.tsx

@@ -117,7 +117,7 @@ Styled.ConfirmButton = styled(Styled.IconButton)`
   --button-backgroundColor: hsla(203, 25%, 19%, 1);
 
   svg {
-    color: var(--color-success);
+    color: var(--color-positive);
   }
 `;
 
@@ -125,7 +125,7 @@ Styled.CancelButton = styled(Styled.IconButton)`
   --button-backgroundColor: hsla(296, 16%, 18%, 1);
 
   svg {
-    color: var(--color-error);
+    color: var(--color-negative);
     width: 0.8em;
     height: 0.8em;
 

src/constants/localStorage.ts

@@ -20,7 +20,6 @@ export enum LocalStorageKey {
   SelectedLocale = 'dydx.SelectedLocale',
   SelectedNetwork = 'dydx.SelectedNetwork',
   SelectedTheme = 'dydx.SelectedTheme',
-  SelectedColorMode = 'dydx.SelectedColorMode',
   SelectedTradeLayout = 'dydx.SelectedTradeLayout',
   TradingViewChartConfig = 'dydx.TradingViewChartConfig',
   HasSeenLaunchIncentives = 'dydx.HasSeenLaunchIncentives',

src/constants/styles/colors.ts

@@ -1,11 +1,4 @@
-import { AppColorMode } from '@/state/configs';
-
-export type Theme = {
-  [AppColorMode.GreenUp]: ThemeColorBase;
-  [AppColorMode.RedUp]: ThemeColorBase;
-};
-
-export type ThemeColorBase = LayerColors &
+export type ThemeColors = LayerColors &
   BorderColors &
   TextColors &
   GradientColors &
@@ -54,13 +47,8 @@ type StatusColors = {
   success: string;
   warning: string;
   error: string;
-  successFaded: string;
-  warningFaded: string;
-  errorFaded: string;
 };
 
-/** ##InvertDirectionalColors
- * When adding colors here, make sure to update linked function to invert colors for AppColorMode. */
 type DirectionalColors = {
   positive: string;
   negative: string;

src/hooks/Orderbook/useDrawOrderbook.ts

@@ -12,9 +12,8 @@ import {
   ORDERBOOK_WIDTH,
 } from '@/constants/orderbook';
 
-import { useAppThemeAndColorModeContext } from '@/hooks/useAppThemeAndColorMode';
-
 import { getCurrentMarketConfig, getCurrentMarketOrderbookMap } from '@/state/perpetualsSelectors';
+import { getAppTheme } from '@/state/configsSelectors';
 
 import { MustBigNumber } from '@/lib/numbers';
 
@@ -24,6 +23,7 @@ import {
   getXByColumn,
   getYForElements,
 } from '@/lib/orderbookHelpers';
+import { useAppThemeContext } from '../useAppTheme';
 
 type ElementProps = {
   data: Array<PerpetualMarketOrderbookLevel | undefined>;
@@ -53,7 +53,7 @@ export const useDrawOrderbook = ({
   const { stepSizeDecimals = TOKEN_DECIMALS, tickSizeDecimals = SMALL_USD_DECIMALS } =
     useSelector(getCurrentMarketConfig, shallowEqual) || {};
   const prevData = useRef<typeof data>(data);
-  const theme = useAppThemeAndColorModeContext();
+  const theme = useAppThemeContext();
 
   /**
    * Scale canvas using device pixel ratio to unblur drawn text

src/hooks/tradingView/useTradingView.ts

@@ -11,7 +11,7 @@ import { useDydxClient, useLocalStorage } from '@/hooks';
 import { store } from '@/state/_store';
 
 import { getSelectedNetwork } from '@/state/appSelectors';
-import { getAppTheme, getAppColorMode } from '@/state/configsSelectors';
+import { getAppTheme } from '@/state/configsSelectors';
 import { getSelectedLocale } from '@/state/localizationSelectors';
 import { getCurrentMarketId, getMarketIds } from '@/state/perpetualsSelectors';
 
@@ -30,7 +30,6 @@ export const useTradingView = ({
 }) => {
   const marketId = useSelector(getCurrentMarketId);
   const appTheme = useSelector(getAppTheme);
-  const appColorMode = useSelector(getAppColorMode);
   const marketIds = useSelector(getMarketIds, shallowEqual);
   const selectedLocale = useSelector(getSelectedLocale);
   const selectedNetwork = useSelector(getSelectedNetwork);
@@ -47,7 +46,7 @@ export const useTradingView = ({
   useEffect(() => {
     if (hasMarkets && isClientConnected && marketId) {
       const widgetOptions = getWidgetOptions();
-      const widgetOverrides = getWidgetOverrides({ appTheme, appColorMode });
+      const widgetOverrides = getWidgetOverrides(appTheme);
       const options = {
         // debug: true,
         ...widgetOptions,
@@ -76,14 +75,7 @@ export const useTradingView = ({
       tvWidgetRef.current = null;
       setIsChartReady(false);
     };
-  }, [
-    getCandlesForDatafeed,
-    isClientConnected,
-    hasMarkets,
-    selectedLocale,
-    selectedNetwork,
-    !!marketId,
-  ]);
+  }, [getCandlesForDatafeed, isClientConnected, hasMarkets, selectedLocale, selectedNetwork, !!marketId]);
 
   return { savedResolution };
 };

src/hooks/tradingView/useTradingViewTheme.ts

@@ -3,8 +3,8 @@ import { useSelector } from 'react-redux';
 
 import type { IChartingLibraryWidget, ThemeName } from 'public/tradingview/charting_library';
 
-import { AppColorMode, AppTheme } from '@/state/configs';
-import { getAppTheme, getAppColorMode } from '@/state/configsSelectors';
+import { AppTheme } from '@/state/configs';
+import { getAppTheme } from '@/state/configsSelectors';
 
 import { getWidgetOverrides } from '@/lib/tradingView/utils';
 
@@ -29,7 +29,6 @@ export const useTradingViewTheme = ({
   isWidgetReady?: boolean;
 }) => {
   const appTheme: AppTheme = useSelector(getAppTheme);
-  const appColorMode: AppColorMode = useSelector(getAppColorMode);
 
   useEffect(() => {
     if (tvWidget && isWidgetReady) {
@@ -56,24 +55,10 @@ export const useTradingViewTheme = ({
             }
           }
 
-          const { overrides, studies_overrides } = getWidgetOverrides({ appTheme, appColorMode });
+          const { overrides, studies_overrides } = getWidgetOverrides(appTheme);
           tvWidget?.applyOverrides(overrides);
           tvWidget?.applyStudiesOverrides(studies_overrides);
-
-          // Necessary to update existing indicators
-          const volumeStudyId = tvWidget
-            ?.activeChart()
-            ?.getAllStudies()
-            ?.find((x) => x.name === 'Volume')?.id;
-
-          if (volumeStudyId) {
-            const volume = tvWidget?.activeChart()?.getStudyById(volumeStudyId);
-            volume.applyOverrides({
-              'volume.color.0': studies_overrides['volume.volume.color.0'],
-              'volume.color.1': studies_overrides['volume.volume.color.1'],
-            });
-          }
         });
     }
-  }, [appTheme, appColorMode]);
+  }, [appTheme]);
 };

src/hooks/useAppTheme.tsx

@@ -0,0 +1,16 @@
+import { useSelector } from 'react-redux';
+import { ThemeProvider } from 'styled-components';
+
+import { AppTheme } from '@/state/configs';
+import { getAppTheme } from '@/state/configsSelectors';
+
+import { Themes } from '@/styles/themes';
+
+export const AppThemeProvider = ({ ...props }) => {
+    return <ThemeProvider theme={useAppThemeContext()} {...props} />
+};
+
+export const useAppThemeContext = () => {
+    const theme: AppTheme = useSelector(getAppTheme);
+    return Themes[theme];
+}

src/hooks/useAppThemeAndColorMode.tsx

@@ -1,18 +0,0 @@
-import { useSelector } from 'react-redux';
-import { ThemeProvider } from 'styled-components';
-
-import { AppTheme, AppColorMode } from '@/state/configs';
-import { getAppTheme, getAppColorMode } from '@/state/configsSelectors';
-
-import { Themes } from '@/styles/themes';
-
-export const AppThemeAndColorModeProvider = ({ ...props }) => {
-  return <ThemeProvider theme={useAppThemeAndColorModeContext()} {...props} />;
-};
-
-export const useAppThemeAndColorModeContext = () => {
-  const theme: AppTheme = useSelector(getAppTheme);
-  const colorMode: AppColorMode = useSelector(getAppColorMode);
-
-  return Themes[theme][colorMode];
-};

src/hooks/useSubaccount.tsx

@@ -433,8 +433,7 @@ export const useSubaccountContext = ({ localDydxWallet }: { localDydxWallet?: Lo
         params,
         utils.getGovAddNewMarketTitle(params.ticker),
         utils.getGovAddNewMarketSummary(params.ticker, newMarketProposal.delayBlocks),
-        // @ts-ignore - Need to change type in v4-client-js
-        BigInt(newMarketProposal.initialDepositAmount).toString()
+        newMarketProposal.initialDepositAmount
       );
 
       return response;

src/icons/logo-short.tsx

@@ -1,7 +1,7 @@
-import { useAppThemeAndColorModeContext } from '@/hooks/useAppThemeAndColorMode';
+import { useAppThemeContext } from '@/hooks/useAppTheme';
 
 const LogoShortIcon: React.FC<{ id?: string }> = ({ id }: { id?: string }) => {
-  const theme = useAppThemeAndColorModeContext();
+  const theme = useAppThemeContext();
   const fill = theme.logoFill;
 
   return (

src/layout/Footer/FooterDesktop.tsx

@@ -127,7 +127,7 @@ Styled.StatusDot = styled.div<{ exchangeStatus: ExchangeStatus }>`
   background-color: ${({ exchangeStatus }) =>
     ({
       [ExchangeStatus.Degraded]: css`var(--color-warning)`,
-      [ExchangeStatus.Operational]: css`var(--color-success)`,
+      [ExchangeStatus.Operational]: css`var(--color-positive)`,
     }[exchangeStatus])};
 `;
 

src/lib/orders.ts

@@ -43,19 +43,19 @@ export const getStatusIconInfo = ({
     case AbacusOrderStatus.filled: {
       return {
         statusIcon: IconName.OrderFilled,
-        statusIconColor: `var(--color-success)`,
+        statusIconColor: `var(--color-positive)`,
       };
     }
     case AbacusOrderStatus.cancelled: {
       return {
         statusIcon: IconName.OrderCanceled,
-        statusIconColor: `var(--color-error)`,
+        statusIconColor: `var(--color-negative)`,
       };
     }
     case AbacusOrderStatus.canceling: {
       return {
         statusIcon: IconName.OrderPending,
-        statusIconColor: `var(--color-error)`,
+        statusIconColor: `var(--color-negative)`,
       };
     }
     case AbacusOrderStatus.untriggered: {

src/lib/tradingView/utils.ts

@@ -1,6 +1,6 @@
 import { Candle, TradingViewBar, TradingViewSymbol } from '@/constants/candles';
 
-import { AppTheme, AppColorMode } from '@/state/configs';
+import { AppTheme } from '@/state/configs';
 
 import { Themes } from '@/styles/themes';
 
@@ -47,14 +47,8 @@ export const getHistorySlice = ({
   return bars.filter(({ time }) => time >= fromMs);
 };
 
-export const getWidgetOverrides = ({
-  appTheme,
-  appColorMode,
-}: {
-  appTheme: AppTheme;
-  appColorMode: AppColorMode;
-}) => {
-  const theme = Themes[appTheme][appColorMode];
+export const getWidgetOverrides = (appTheme: AppTheme) => {
+  const theme = Themes[appTheme];
 
   return {
     overrides: {

src/pages/Profile.tsx

@@ -286,10 +286,10 @@ Styled.ConnectedIcon = styled.div`
   height: 0.5rem;
   width: 0.5rem;
   margin-right: 0.25rem;
-  background: var(--color-success);
+  background: var(--color-positive);
 
   border-radius: 50%;
-  box-shadow: 0 0 0 0.2rem var(--color-gradient-success);
+  box-shadow: 0 0 0 0.2rem var(--color-gradient-positive);
 `;
 
 Styled.Address = styled.h1`
@@ -318,7 +318,7 @@ Styled.ActionButton = styled(IconButton)<{ iconName?: IconName }>`
   ${({ iconName }) =>
     iconName === IconName.Close
       ? css`
-          --button-textColor: var(--color-error);
+          --button-textColor: var(--color-negative);
           --button-icon-size: 0.75em;
         `
       : iconName === IconName.Transfer &&

src/state/configs.ts

@@ -12,14 +12,8 @@ export enum AppTheme {
   Light = 'Light',
 }
 
-export enum AppColorMode {
-  GreenUp = 'GreenUp',
-  RedUp = 'RedUp',
-}
-
 export interface ConfigsState {
   appTheme: AppTheme;
-  appColorMode: AppColorMode;
   feeTiers?: kollections.List<FeeTier>;
   feeDiscounts?: FeeDiscount[];
   network?: NetworkConfigs;
@@ -47,10 +41,6 @@ const initialState: ConfigsState = {
     key: LocalStorageKey.SelectedTheme,
     defaultValue: AppTheme.Classic,
   }),
-  appColorMode: getLocalStorage({
-    key: LocalStorageKey.SelectedColorMode,
-    defaultValue: AppColorMode.GreenUp,
-  }),
   feeDiscounts: undefined,
   feeTiers: undefined,
   network: undefined,
@@ -71,10 +61,6 @@ export const configsSlice = createSlice({
       changeTheme(payload);
       state.appTheme = payload;
     },
-    setAppColorMode: (state: ConfigsState, { payload }: PayloadAction<AppColorMode>) => {
-      setLocalStorage({ key: LocalStorageKey.SelectedColorMode, value: payload });
-      state.appColorMode = payload;
-    },
     setConfigs: (state: ConfigsState, action: PayloadAction<Nullable<Configs>>) => ({
       ...state,
       ...action.payload,
@@ -86,5 +72,4 @@ export const configsSlice = createSlice({
   },
 });
 
-export const { setAppTheme, setAppColorMode, setConfigs, markLaunchIncentivesSeen } =
-  configsSlice.actions;
+export const { setAppTheme, setConfigs, markLaunchIncentivesSeen } = configsSlice.actions;

src/state/configsSelectors.ts

@@ -2,8 +2,6 @@ import type { RootState } from './_store';
 
 export const getAppTheme = (state: RootState) => state.configs.appTheme;
 
-export const getAppColorMode = (state: RootState) => state.configs.appColorMode;
-
 export const getFeeTiers = (state: RootState) => state.configs.feeTiers?.toArray();
 
 export const getFeeDiscounts = (state: RootState) => state.configs.feeDiscounts;

src/styles/globalStyle.ts

@@ -29,9 +29,6 @@ export const GlobalStyle = createGlobalStyle`
     --color-success: ${({ theme }) => theme.success};
     --color-warning: ${({ theme }) => theme.warning};
     --color-error: ${({ theme }) => theme.error};
-    --color-gradient-success: ${({ theme }) => theme.successFaded};
-    --color-gradient-warning: ${({ theme }) => theme.warningFaded};
-    --color-gradient-error: ${({ theme }) => theme.errorFaded};
 
     --color-positive: ${({ theme }) => theme.positive};
     --color-negative: ${({ theme }) => theme.negative};

src/styles/themes.ts

@@ -1,9 +1,9 @@
-import { AppTheme, AppColorMode } from '@/state/configs';
-import type { Theme, ThemeColorBase } from '@/constants/styles/colors';
+import { AppTheme } from '@/state/configs';
+import type { ThemeColors } from '@/constants/styles/colors';
 import { ColorToken, OpacityToken } from '@/constants/styles/base';
 import { generateFadedColorVariant } from '@/lib/styles';
 
-const ClassicThemeBase: ThemeColorBase = {
+const ClassicTheme: ThemeColors = {
   layer0: ColorToken.GrayBlue7,
   layer1: ColorToken.GrayBlue6,
   layer2: ColorToken.GrayBlue5,
@@ -31,9 +31,6 @@ const ClassicThemeBase: ThemeColorBase = {
   success: ColorToken.Green1,
   warning: ColorToken.Yellow0,
   error: ColorToken.Red2,
-  successFaded: generateFadedColorVariant(ColorToken.Green1, OpacityToken.Opacity16),
-  warningFaded: generateFadedColorVariant(ColorToken.Yellow0, OpacityToken.Opacity16),
-  errorFaded: generateFadedColorVariant(ColorToken.Red2, OpacityToken.Opacity16),
 
   positive: ColorToken.Green1,
   negative: ColorToken.Red2,
@@ -55,7 +52,7 @@ const ClassicThemeBase: ThemeColorBase = {
   tooltipBackground: generateFadedColorVariant(ColorToken.GrayBlue3, OpacityToken.Opacity66),
 };
 
-const DarkThemeBase: ThemeColorBase = {
+const DarkTheme: ThemeColors = {
   layer0: ColorToken.Black,
   layer1: ColorToken.DarkGray11,
   layer2: ColorToken.DarkGray13,
@@ -83,9 +80,6 @@ const DarkThemeBase: ThemeColorBase = {
   success: ColorToken.Green0,
   warning: ColorToken.Yellow0,
   error: ColorToken.Red0,
-  successFaded: generateFadedColorVariant(ColorToken.Green0, OpacityToken.Opacity16),
-  warningFaded: generateFadedColorVariant(ColorToken.Yellow0, OpacityToken.Opacity16),
-  errorFaded: generateFadedColorVariant(ColorToken.Red0, OpacityToken.Opacity16),
 
   positive: ColorToken.Green0,
   negative: ColorToken.Red0,
@@ -107,7 +101,7 @@ const DarkThemeBase: ThemeColorBase = {
   tooltipBackground: generateFadedColorVariant(ColorToken.DarkGray6, OpacityToken.Opacity66),
 };
 
-const LightThemeBase: ThemeColorBase = {
+const LightTheme: ThemeColors = {
   layer0: ColorToken.White,
   layer1: ColorToken.LightGray6,
   layer2: ColorToken.White,
@@ -135,9 +129,6 @@ const LightThemeBase: ThemeColorBase = {
   success: ColorToken.Green2,
   warning: ColorToken.Yellow0,
   error: ColorToken.Red1,
-  successFaded: generateFadedColorVariant(ColorToken.Green2, OpacityToken.Opacity16),
-  warningFaded: generateFadedColorVariant(ColorToken.Yellow0, OpacityToken.Opacity16),
-  errorFaded: generateFadedColorVariant(ColorToken.Red1, OpacityToken.Opacity16),
 
   positive: ColorToken.Green2,
   negative: ColorToken.Red1,
@@ -159,22 +150,8 @@ const LightThemeBase: ThemeColorBase = {
   tooltipBackground: generateFadedColorVariant(ColorToken.LightGray7, OpacityToken.Opacity66),
 };
 
-const generateTheme = (themeBase: ThemeColorBase): Theme => {
-  return {
-    [AppColorMode.GreenUp]: themeBase,
-    [AppColorMode.RedUp]: {
-      ...themeBase,
-      // #InvertDirectionalColors
-      positive: themeBase.negative,
-      negative: themeBase.positive,
-      positiveFaded: themeBase.negativeFaded,
-      negativeFaded: themeBase.positiveFaded,
-    },
-  };
-};
-
 export const Themes = {
-  [AppTheme.Classic]: generateTheme(ClassicThemeBase),
-  [AppTheme.Dark]: generateTheme(DarkThemeBase),
-  [AppTheme.Light]: generateTheme(LightThemeBase),
+  [AppTheme.Classic]: ClassicTheme,
+  [AppTheme.Dark]: DarkTheme,
+  [AppTheme.Light]: LightTheme,
 };

src/views/AccountInfo/AccountInfoConnectedState.tsx

@@ -231,7 +231,7 @@ Styled.CircleContainer = styled.div`
 `;
 
 Styled.Icon = styled(Icon)`
-  color: var(--color-error);
+  color: var(--color-negative);
 `;
 
 Styled.WithUsage = styled.div`

src/views/PositionInfo.tsx

@@ -557,11 +557,11 @@ Styled.PositionTile = styled(PositionTile)``;
 
 Styled.ClosePositionButton = styled(Button)`
   --button-border: solid var(--border-width) var(--color-border-red);
-  --button-textColor: var(--color-error);
+  --button-textColor: var(--color-negative);
 `;
 
 Styled.ClosePositionToggleButton = styled(ToggleButton)`
   --button-border: solid var(--border-width) var(--color-border-red);
-  --button-toggle-off-textColor: var(--color-error);
-  --button-toggle-on-textColor: var(--color-error);
+  --button-toggle-off-textColor: var(--color-negative);
+  --button-toggle-on-textColor: var(--color-negative);
 `;

src/views/dialogs/DisplaySettingsDialog.tsx

@@ -5,8 +5,8 @@ import { Root, Item, Indicator } from '@radix-ui/react-radio-group';
 
 import { useStringGetter } from '@/hooks';
 
-import { AppTheme, AppColorMode, setAppTheme, setAppColorMode } from '@/state/configs';
-import { getAppTheme, getAppColorMode } from '@/state/configsSelectors';
+import { AppTheme, setAppTheme } from '@/state/configs';
+import { getAppTheme } from '@/state/configsSelectors';
 
 import { layoutMixins } from '@/styles/layoutMixins';
 import { Themes } from '@/styles/themes';
@@ -26,7 +26,6 @@ export const DisplaySettingsDialog = ({ setIsOpen }: ElementProps) => {
   const stringGetter = useStringGetter();
 
   const currentTheme: AppTheme = useSelector(getAppTheme);
-  const currentColorMode: AppColorMode = useSelector(getAppColorMode);
 
   const sectionHeader = (heading: string) => {
     return (
@@ -57,13 +56,13 @@ export const DisplaySettingsDialog = ({ setIsOpen }: ElementProps) => {
           <Styled.AppThemeItem
             key={theme}
             value={theme}
-            backgroundcolor={Themes[theme][currentColorMode].layer2}
-            gridcolor={Themes[theme][currentColorMode].borderDefault}
+            backgroundcolor={Themes[theme].layer2}
+            gridcolor={Themes[theme].borderDefault}
             onClick={() => {
               dispatch(setAppTheme(theme));
             }}
           >
-            <Styled.AppThemeHeader textcolor={Themes[theme][currentColorMode].textPrimary}>
+            <Styled.AppThemeHeader textcolor={Themes[theme].textPrimary}>
               {stringGetter({ key: label })}
             </Styled.AppThemeHeader>
             <Styled.Image src="/chart-bars.svg" />
@@ -76,48 +75,6 @@ export const DisplaySettingsDialog = ({ setIsOpen }: ElementProps) => {
     );
   };
 
-  const colorModeOptions = () => {
-    return (
-      <Styled.ColorPreferenceRoot value={currentColorMode}>
-        {[
-          {
-            colorMode: AppColorMode.GreenUp,
-            label: STRING_KEYS.GREEN_IS_UP,
-          },
-          {
-            colorMode: AppColorMode.RedUp,
-            label: STRING_KEYS.RED_IS_UP,
-          },
-        ].map(({ colorMode, label }) => (
-          <Styled.ColorPreferenceItem
-            key={colorMode}
-            value={colorMode}
-            onClick={() => {
-              dispatch(setAppColorMode(colorMode));
-            }}
-          >
-            <Styled.ColorPreferenceLabel>
-              <Styled.ArrowIconContainer>
-                <Styled.ArrowIcon
-                  iconName={IconName.Arrow}
-                  direction="up"
-                  color={colorMode === AppColorMode.GreenUp ? 'green' : 'red'}
-                />
-                <Styled.ArrowIcon
-                  iconName={IconName.Arrow}
-                  direction="down"
-                  color={colorMode === AppColorMode.GreenUp ? 'red' : 'green'}
-                />
-              </Styled.ArrowIconContainer>
-              {stringGetter({ key: label })}
-            </Styled.ColorPreferenceLabel>
-            <Styled.DotIndicator $selected={currentColorMode === colorMode} />
-          </Styled.ColorPreferenceItem>
-        ))}
-      </Styled.ColorPreferenceRoot>
-    );
-  };
-
   return (
     <Dialog
       isOpen
@@ -128,10 +85,6 @@ export const DisplaySettingsDialog = ({ setIsOpen }: ElementProps) => {
         {sectionHeader(stringGetter({ key: STRING_KEYS.THEME }))}
         {themePanels()}
       </Styled.Section>
-      <Styled.Section>
-        {sectionHeader(stringGetter({ key: STRING_KEYS.DIRECTION_COLOR_PREFERENCE }))}
-        {colorModeOptions()}
-      </Styled.Section>
     </Dialog>
   );
 };
@@ -157,11 +110,6 @@ Styled.AppThemeRoot = styled(Root)`
   grid-template-columns: 1fr 1fr;
 `;
 
-Styled.ColorPreferenceRoot = styled(Root)`
-  ${gridStyle}
-  grid-template-columns: 1fr;
-`;
-
 Styled.Item = styled(Item)`
   --border-color: var(--color-border);
   --item-padding: 0.75rem;
@@ -172,19 +120,9 @@ Styled.Item = styled(Item)`
 
   border: solid var(--border-width) var(--border-color);
   border-radius: 0.875rem;
-
   padding: var(--item-padding);
 `;
 
-Styled.ColorPreferenceItem = styled(Styled.Item)`
-  &[data-state='checked'] {
-    background-color: var(--color-layer-4);
-  }
-
-  ${layoutMixins.row}
-  justify-content: space-between;
-`;
-
 Styled.AppThemeItem = styled(Styled.Item)<{ backgroundcolor: string; gridcolor: string }>`
   ${({ backgroundcolor, gridcolor }) => css`
     --themePanel-backgroundColor: ${backgroundcolor};
@@ -195,7 +133,6 @@ Styled.AppThemeItem = styled(Styled.Item)<{ backgroundcolor: string; gridcolor:
   flex-direction: column;
   position: relative;
   width: 100%;
-
   background-color: var(--themePanel-backgroundColor);
 
   &::before {
@@ -232,43 +169,6 @@ Styled.Image = styled.img`
   z-index: 1;
 `;
 
-Styled.ColorPreferenceLabel = styled.div`
-  ${layoutMixins.inlineRow};
-  gap: 1ch;
-`;
-
-Styled.ArrowIconContainer = styled.div`
-  ${layoutMixins.column}
-  gap: 0.5ch;
-
-  svg {
-    height: 0.75em;
-    width: 0.75em;
-  }
-`;
-
-Styled.ArrowIcon = styled(Icon)<{ direction: 'up' | 'down'; color: 'green' | 'red' }>`
-  ${({ direction }) =>
-    ({
-      ['up']: css`
-        transform: rotate(-90deg);
-      `,
-      ['down']: css`
-        transform: rotate(90deg);
-      `,
-    }[direction])}
-
-  ${({ color }) =>
-    ({
-      ['green']: css`
-        color: var(--color-success);
-      `,
-      ['red']: css`
-        color: var(--color-error);
-      `,
-    }[color])}
-`;
-
 const indicatorStyle = css`
   --indicator-size: 1.25rem;
   --icon-size: 0.5rem;
@@ -282,33 +182,9 @@ const indicatorStyle = css`
   justify-content: center;
 `;
 
-Styled.DotIndicator = styled.div<{ $selected: boolean }>`
-  ${indicatorStyle}
-  --background-color: var(--color-layer-2);
-  --border-color: var(--color-border);
-
-  ${({ $selected }) =>
-    $selected &&
-    css`
-      --background-color: var(--color-accent);
-      --border-color: var(--color-accent);
-
-      &::after {
-        content: '';
-        display: block;
-        width: var(--icon-size);
-        height: var(--icon-size);
-        background-color: var(--color-layer-2);
-        border-radius: 50%;
-      }
-    `}
-
-  background-color: var(--background-color);
-  border: solid var(--border-width) var(--border-color);
-`;
-
 Styled.CheckIndicator = styled(Indicator)`
   ${indicatorStyle}
+
   position: absolute;
   bottom: var(--item-padding);
   right: var(--item-padding);

src/views/dialogs/OnboardingDialog/GenerateKeys.tsx

@@ -323,7 +323,7 @@ Styled.ReceiptArea = styled.div`
 `;
 
 Styled.Green = styled.span`
-  color: var(--color-success);
+  color: var(--color-positive);
 `;
 
 Styled.GreenCheckCircle = styled(GreenCheckCircle)`

src/views/forms/AccountManagementForms/WithdrawForm.tsx

@@ -453,6 +453,6 @@ Styled.FormInputButton = styled(Button)`
 Styled.CheckIcon = styled(Icon)`
   margin: 0 1ch;
 
-  color: var(--color-success);
+  color: var(--color-positive);
   font-size: 0.625rem;
 `;

src/views/forms/TransferForm.tsx

@@ -441,7 +441,7 @@ Styled.DestinationInputLabel = styled.span`
   ${layoutMixins.inlineRow}
 
   svg {
-    color: var(--color-success);
+    color: var(--color-positive);
   }
 `;
 

src/views/menus/AccountMenu.tsx

@@ -203,7 +203,7 @@ export const AccountMenu = () => {
                 value: 'MnemonicExport',
                 icon: <Icon iconName={IconName.ExportKeys} />,
                 label: <span>{stringGetter({ key: STRING_KEYS.EXPORT_SECRET_PHRASE })}</span>,
-                highlightColor: 'destroy',
+                highlightColor: 'negative',
                 onSelect: () => dispatch(openDialog({ type: DialogTypes.MnemonicExport })),
               },
             ].filter(isTruthy)
@@ -212,7 +212,7 @@ export const AccountMenu = () => {
           value: 'Disconnect',
           icon: <Icon iconName={IconName.BoxClose} />,
           label: stringGetter({ key: STRING_KEYS.DISCONNECT }),
-          highlightColor: 'destroy',
+          highlightColor: 'negative',
           onSelect: () => dispatch(openDialog({ type: DialogTypes.DisconnectWallet })),
         },
       ].filter(isTruthy)}

src/views/notifications/BlockRewardNotification/index.tsx

@@ -72,7 +72,7 @@ Styled.Notification = styled(Notification)`
 Styled.Output = styled(Output)`
   &:before {
     content: '+';
-    color: var(--color-success);
+    color: var(--color-positive);
     margin-right: 0.5ch;
   }
 `;

src/views/notifications/TransferStatusNotification/TransferStatusSteps.tsx

@@ -179,7 +179,7 @@ Styled.Icon = styled.div<{ state: 'complete' | 'default' }>`
   ${({ state }) =>
     ({
       ['complete']: css`
-        color: var(--color-success);
+        color: var(--color-positive);
       `,
       ['default']: css`
         color: var(--color-text-0);

src/views/tables/OrdersTable/OrderActionsCell.tsx

@@ -82,6 +82,6 @@ Styled.ActionButton = styled(IconButton)`
 
 Styled.CancelButton = styled(Styled.ActionButton)`
   &:not(:disabled) {
-    --button-textColor: var(--color-error);
+    --button-textColor: var(--color-negative);
   }
 `;