diff --git a/.ladle/components.tsx b/.ladle/components.tsx index 40cade6..04ee536 100644 --- a/.ladle/components.tsx +++ b/.ladle/components.tsx @@ -5,29 +5,35 @@ import styled from 'styled-components'; import { store } from '@/state/_store'; +import { GlobalStyle } from '@/styles/globalStyle'; + import { SelectMenu, SelectItem } from '@/components/SelectMenu'; +import { AppThemeProvider } from '@/hooks/useAppTheme'; + +import { AppTheme, setAppTheme } from '@/state/configs'; import { setLocaleLoaded } from '@/state/localization'; import '@/index.css'; import './ladle.css'; export const StoryWrapper: React.FC<{ children: React.ReactNode }> = ({ children }) => { - const [theme, setTheme] = useState('Default theme'); + const [theme, setTheme] = useState(AppTheme.Classic); useEffect(() => { + store.dispatch(setAppTheme(theme)); switch (theme) { - case 'Dark theme': { + case AppTheme.Dark: { document?.documentElement?.classList.remove('theme-light'); document?.documentElement?.classList.add('theme-dark'); break; } - case 'Light theme': { + case AppTheme.Light: { document?.documentElement?.classList.remove('theme-dark'); document?.documentElement?.classList.add('theme-light'); break; } - default: { + case AppTheme.Classic: { document?.documentElement?.classList.remove('theme-dark', 'theme-light'); break; } @@ -48,15 +54,15 @@ export const StoryWrapper: React.FC<{ children: React.ReactNode }> = ({ children > {[ { - value: 'Default theme', + value: AppTheme.Classic, label: 'Default theme', }, { - value: 'Dark theme', + value: AppTheme.Dark, label: 'Dark theme', }, { - value: 'Light theme', + value: AppTheme.Light, label: 'Light theme', }, ].map(({ value, label }) => ( @@ -69,8 +75,11 @@ export const StoryWrapper: React.FC<{ children: React.ReactNode }> = ({ children
- {children} - + + + {children} + + ); }; diff --git a/src/App.tsx b/src/App.tsx index ae59c05..416b110 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -16,6 +16,7 @@ import { } from '@/hooks'; import { DydxProvider } from '@/hooks/useDydxClient'; import { AccountsProvider } from '@/hooks/useAccounts'; +import { AppThemeProvider } from '@/hooks/useAppTheme'; import { DialogAreaProvider, useDialogArea } from '@/hooks/useDialogArea'; import { LocaleProvider } from '@/hooks/useLocaleSeparators'; import { NotificationsProvider } from '@/hooks/useNotifications'; @@ -35,6 +36,7 @@ import { GlobalCommandDialog } from '@/views/dialogs/GlobalCommandDialog'; import { config } from '@/lib/wagmi'; import { breakpoints } from '@/styles'; +import { GlobalStyle } from '@/styles/globalStyle'; import { layoutMixins } from '@/styles/layoutMixins'; import { LoadingSpace } from './components/Loading/LoadingSpinner'; @@ -66,49 +68,52 @@ const Content = () => { const { chainTokenLabel } = useTokenConfigs(); return ( - - {isNotTablet && } + <> + + + {isNotTablet && } - - }> - - - } /> - } /> - + + }> + + + } /> + } /> + - } /> - } /> - {isTablet && ( - <> - } /> - } /> - } /> - - )} + } /> + } /> + {isTablet && ( + <> + } /> + } /> + } /> + + )} - }> - } /> - + }> + } /> + - } /> - } /> + } /> + } /> - } /> - - - + } /> + + + - {isTablet ? : } + {isTablet ? : } - + - - - + + + - - + + + ); }; @@ -131,6 +136,7 @@ const providers = [ wrapProvider(LocalNotificationsProvider), wrapProvider(NotificationsProvider), wrapProvider(DialogAreaProvider), + wrapProvider(AppThemeProvider), ]; const App = () => { diff --git a/src/components/Button.tsx b/src/components/Button.tsx index dff6cdb..9c88ac9 100644 --- a/src/components/Button.tsx +++ b/src/components/Button.tsx @@ -89,7 +89,7 @@ const buttonActionVariants = { --button-border: solid var(--border-width) var(--color-border); `, [ButtonAction.Primary]: css` - --button-textColor: var(--color-text-2); + --button-textColor: var(--color-text-0); --button-backgroundColor: var(--color-accent); --button-border: solid var(--border-width) var(--color-border-white); `, @@ -107,7 +107,7 @@ const buttonActionVariants = { `, [ButtonAction.Destroy]: css` - --button-textColor: var(--color-text-2); + --button-textColor: var(--color-text-0); --button-backgroundColor: var(--color-negative); --button-border: solid var(--border-width) var(--color-border-white); `, diff --git a/src/components/MarginUsageRing.tsx b/src/components/MarginUsageRing.tsx index 51483f1..1a63e6c 100644 --- a/src/components/MarginUsageRing.tsx +++ b/src/components/MarginUsageRing.tsx @@ -1,7 +1,8 @@ import styled, { type AnyStyledComponent } from 'styled-components'; import { RiskLevels } from '@/constants/abacus'; -import { UsageColorFromRiskLevel } from '@/styles/colors'; + +import { UsageColorFromRiskLevel } from '@/styles/globalStyle'; import { Ring } from '@/components/Ring'; diff --git a/src/components/UsageBars.tsx b/src/components/UsageBars.tsx index 07322fb..7f6014e 100644 --- a/src/components/UsageBars.tsx +++ b/src/components/UsageBars.tsx @@ -2,7 +2,7 @@ import styled, { type AnyStyledComponent } from 'styled-components'; import { type RiskLevels } from '@/constants/abacus'; -import { UsageColorFromRiskLevel } from '@/styles/colors'; +import { UsageColorFromRiskLevel } from '@/styles/globalStyle'; import { abacusHelper } from '@/lib/abacus'; type ElementProps = { diff --git a/src/hooks/tradingView/useTradingViewTheme.ts b/src/hooks/tradingView/useTradingViewTheme.ts index 302c54f..6436063 100644 --- a/src/hooks/tradingView/useTradingViewTheme.ts +++ b/src/hooks/tradingView/useTradingViewTheme.ts @@ -4,7 +4,6 @@ import { useSelector } from 'react-redux'; import type { IChartingLibraryWidget, ThemeName } from 'public/tradingview/charting_library'; import { AppTheme } from '@/state/configs'; - import { getAppTheme } from '@/state/configsSelectors'; import { getWidgetOverrides } from '@/lib/tradingView/utils'; @@ -29,7 +28,7 @@ export const useTradingViewTheme = ({ tvWidget: (IChartingLibraryWidget & { _id?: string; _ready?: boolean }) | null; isWidgetReady?: boolean; }) => { - const appTheme = useSelector(getAppTheme); + const appTheme: AppTheme = useSelector(getAppTheme); useEffect(() => { if (tvWidget && isWidgetReady) { diff --git a/src/hooks/useAppTheme.tsx b/src/hooks/useAppTheme.tsx new file mode 100644 index 0000000..95ce0c9 --- /dev/null +++ b/src/hooks/useAppTheme.tsx @@ -0,0 +1,13 @@ +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 }) => { + const theme: AppTheme = useSelector(getAppTheme); + + return +}; \ No newline at end of file diff --git a/src/lib/tradingView/utils.ts b/src/lib/tradingView/utils.ts index b4e77ab..5a50209 100644 --- a/src/lib/tradingView/utils.ts +++ b/src/lib/tradingView/utils.ts @@ -1,11 +1,9 @@ -import Color from 'color'; -import isEmpty from 'lodash/isEmpty'; - import { Candle, TradingViewBar, TradingViewSymbol } from '@/constants/candles'; -import { Colors } from '@/styles/colors'; import { AppTheme } from '@/state/configs'; +import { Themes } from '@/styles/themes'; + export const mapCandle = ({ startedAt, open, @@ -49,42 +47,42 @@ export const getHistorySlice = ({ return bars.filter(({ time }) => time >= fromMs); }; -export const getWidgetOverrides = (theme: AppTheme) => { - const colors = Colors[theme]; +export const getWidgetOverrides = (appTheme: AppTheme) => { + const theme = Themes[appTheme]; return { overrides: { - 'paneProperties.background': Color(colors.layer2).hex(), - 'paneProperties.horzGridProperties.color': Color(colors.layer3).hex(), - 'paneProperties.vertGridProperties.color': Color(colors.layer3).hex(), + 'paneProperties.background': theme.layer2, + 'paneProperties.horzGridProperties.color': theme.layer3, + 'paneProperties.vertGridProperties.color': theme.layer3, 'paneProperties.crossHairProperties.style': 1, 'paneProperties.legendProperties.showBarChange': false, 'paneProperties.backgroundType': 'solid', 'mainSeriesProperties.style': 1, - 'mainSeriesProperties.candleStyle.upColor': Color(colors.positive).hex(), - 'mainSeriesProperties.candleStyle.borderUpColor': Color(colors.positive).hex(), - 'mainSeriesProperties.candleStyle.wickUpColor': Color(colors.positive).hex(), - 'mainSeriesProperties.candleStyle.downColor': Color(colors.negative).hex(), - 'mainSeriesProperties.candleStyle.borderDownColor': Color(colors.negative).hex(), - 'mainSeriesProperties.candleStyle.wickDownColor': Color(colors.negative).hex(), + 'mainSeriesProperties.candleStyle.upColor': theme.positive, + 'mainSeriesProperties.candleStyle.borderUpColor': theme.positive, + 'mainSeriesProperties.candleStyle.wickUpColor': theme.positive, + 'mainSeriesProperties.candleStyle.downColor': theme.negative, + 'mainSeriesProperties.candleStyle.borderDownColor': theme.negative, + 'mainSeriesProperties.candleStyle.wickDownColor': theme.negative, 'mainSeriesProperties.statusViewStyle.symbolTextSource': 'ticker', - 'scalesProperties.textColor': Color(colors.text1).hex(), - 'scalesProperties.backgroundColor': Color(colors.layer2).hex(), - 'scalesProperties.lineColor': Color(colors.layer3).hex(), + 'scalesProperties.textColor': theme.textPrimary, + 'scalesProperties.backgroundColor': theme.layer2, + 'scalesProperties.lineColor': theme.layer3, }, studies_overrides: { - 'volume.volume.color.0': Color(colors.negative).hex(), - 'volume.volume.color.1': Color(colors.positive).hex(), + 'volume.volume.color.0': theme.negative, + 'volume.volume.color.1': theme.positive, 'volume.volume ma.visible': false, - 'relative strength index.plot.color': Color(colors.accent).hex(), + 'relative strength index.plot.color': theme.accent, 'relative strength index.plot.linewidth': 1.5, 'relative strength index.hlines background.color': '#134A9F', }, loading_screen: { - backgroundColor: Color(colors.layer2).hex(), - foregroundColor: Color(colors.layer2).hex(), + backgroundColor: theme.layer2, + foregroundColor: theme.layer2, }, }; }; diff --git a/src/styles/colors.css b/src/styles/colors.css index d3a6812..1918da5 100644 --- a/src/styles/colors.css +++ b/src/styles/colors.css @@ -5,66 +5,8 @@ --layer-base-hue --layer-base-saturation --layer-base-lightness - - --color-text-0 - --color-text-1 - --color-text-2 - - --color-accent - --color-positive - --color-negative - --color-success - --color-warning - --color-error - --color-favorite */ - /* Computed: Layers */ - - --color-layer-0: hsl( - var(--layer-base-hue), - var(--layer-base-saturation), - calc(var(--layer-base-lightness) - 12%) - ); - - --color-layer-1: hsl( - var(--layer-base-hue), - var(--layer-base-saturation), - calc(var(--layer-base-lightness) - 8%) - ); - - --color-layer-2: hsl( - var(--layer-base-hue), - var(--layer-base-saturation), - calc(var(--layer-base-lightness) - 4%) - ); - - --color-layer-3: hsl( - var(--layer-base-hue), - var(--layer-base-saturation), - var(--layer-base-lightness) - ); - - --color-layer-4: hsl( - var(--layer-base-hue), - var(--layer-base-saturation), - calc(var(--layer-base-lightness) + 4%) - ); - - --color-layer-5: hsl( - var(--layer-base-hue), - calc(var(--layer-base-saturation) - 2%), - calc(var(--layer-base-lightness) + 7%) - ); - - --color-layer-6: hsl( - var(--layer-base-hue), - calc(var(--layer-base-saturation) - 4%), - calc(var(--layer-base-lightness) + 10%) - ); - - --color-layer-7: hsla(var(--layer-base-hue), 0%, 100%, 0.07); - --color-gradient-base-0: hsl( var(--layer-base-hue), calc(var(--layer-base-saturation) - 5%), @@ -76,12 +18,6 @@ calc(var(--layer-base-saturation) - 1%), calc(var(--layer-base-lightness) + 7%) ); - - /* Computed: Borders */ - - --color-border: var(--color-layer-5); - --color-border-white: hsla(0, 0%, 100%, 0.2); - --color-border-red: hsla(360, 73%, 61%, 0.2); } /* Theme: Classic (default) */ @@ -99,28 +35,12 @@ --layer-base-saturation: 20%; --layer-base-lightness: 16%; - --color-text-0: hsl(245, 11%, 55%); - --color-text-1: hsl(244, 18%, 81%); - --color-text-2: hsl(240, 43%, 99%); - - --color-accent: hsl(var(--theme-classic-hue-purple), 100%, 70%); - --color-positive: var(--theme-classic-color-green); - --color-negative: var(--theme-classic-color-red); - --color-success: var(--theme-classic-color-green); - --color-warning: var(--theme-classic-color-yellow); - --color-error: var(--theme-classic-color-red); - --color-favorite: var(--theme-classic-color-yellow); - --color-white: #fff; --color-black: #000; --color-gradient-positive: hsla(158, 49%, 48%, 0.16); --color-gradient-negative: hsla(0, 100%, 66%, 0.16); --color-accent-faded: hsla(var(--theme-classic-hue-purple), 100%, 70%, 0.16); - - --color-risk-low: var(--theme-classic-color-green); - --color-risk-medium: var(--theme-classic-color-yellow); - --color-risk-high: var(--theme-classic-color-red); } /* Theme: Light */ @@ -137,18 +57,6 @@ --layer-base-hue: var(--theme-light-hue-purple); --layer-base-saturation: 0%; --layer-base-lightness: 86%; - - --color-text-0: hsl(0, 0%, 55%); - --color-text-1: hsl(0, 0%, 40%); - --color-text-2: hsl(0, 0%, 5%); - - --color-accent: hsl(var(--theme-light-hue-purple), 100%, 70%); - --color-positive: var(--theme-light-color-green); - --color-negative: var(--theme-light-color-red); - --color-success: var(--theme-light-color-green); - --color-warning: var(--theme-light-color-yellow); - --color-error: var(--theme-light-color-red); - --color-favorite: var(--theme-light-color-yellow); } /* Theme: Dark */ @@ -165,16 +73,4 @@ --layer-base-hue: 0; --layer-base-saturation: 0%; --layer-base-lightness: 16%; - - --color-text-0: hsl(0, 0%, 47%); - --color-text-1: hsl(0, 0%, 67%); - --color-text-2: hsl(0, 0%, 100%); - - --color-accent: hsl(var(--theme-dark-hue-purple), 100%, 70%); - --color-positive: var(--theme-dark-color-green); - --color-negative: var(--theme-dark-color-red); - --color-success: var(--theme-dark-color-green); - --color-warning: var(--theme-dark-color-yellow); - --color-error: var(--theme-dark-color-red); - --color-favorite: var(--theme-dark-color-yellow); } diff --git a/src/styles/colors.ts b/src/styles/colors.ts deleted file mode 100644 index 8d26d67..0000000 --- a/src/styles/colors.ts +++ /dev/null @@ -1,125 +0,0 @@ -import { css } from 'styled-components'; - -import { type RiskLevels } from '@/constants/abacus'; - -import { AppTheme } from '@/state/configs'; - -const BaseElements = { - [AppTheme.Classic]: { - hue: 240, - saturation: 20, - lightness: 16, - }, - [AppTheme.Dark]: { - hue: 0, - saturation: 0, - lightness: 16, - }, - [AppTheme.Light]: { - hue: 234, - saturation: 0, - lightness: 86, - }, -}; - -const LayerColors = ({ theme }: { theme: AppTheme }) => { - const { hue, saturation, lightness } = BaseElements[theme]; - - return { - layer0: `hsl(${hue}, ${saturation}%, ${lightness - 12}%)`, - layer1: `hsl(${hue}, ${saturation}%, ${lightness - 8}%)`, - layer2: `hsl(${hue}, ${saturation}%, ${lightness - 4}%)`, - layer3: `hsl(${hue}, ${saturation}%, ${lightness}%)`, - layer4: `hsl(${hue}, ${saturation}%, ${lightness + 4}%)`, - layer5: `hsl(${hue}, ${saturation - 2}%, ${lightness + 7}%)`, - layer6: `hsl(${hue}, ${saturation - 4}%, ${lightness + 10}%)`, - }; -}; - -const AccentColor = ({ theme }: { theme: AppTheme }) => { - const purpleHue = { - Classic: 240, - Dark: 240, - Light: 234, - }[theme]; - - return { - accent: `hsl(${purpleHue}, 100%, 70%)`, - }; -}; - -export const Colors = { - [AppTheme.Classic]: { - ...LayerColors({ theme: AppTheme.Classic }), - text0: 'hsl(245, 11%, 55%)', - text1: 'hsl(244, 18%, 81%)', - text2: 'hsl(240, 43%, 99%)', - - ...AccentColor({ theme: AppTheme.Classic }), - green: 'hsl(159, 67%, 39%)', - yellow: 'hsl(36, 100%, 64%)', - red: 'hsl(360, 73%, 61%)', - - positive: 'hsl(159, 67%, 39%)', - negative: 'hsl(360, 73%, 61%)', - - success: 'hsl(159, 67%, 39%)', - warning: 'hsl(36, 100%, 64%)', - error: 'hsl(360, 73%, 61%)', - - favorite: 'hsl(36, 100%, 64%)', - }, - [AppTheme.Dark]: { - ...LayerColors({ theme: AppTheme.Dark }), - text0: 'hsl(0, 0%, 47%)', - text1: 'hsl(0, 0%, 67%)', - text2: 'hsl(0, 0%, 100%)', - - ...AccentColor({ theme: AppTheme.Dark }), - green: 'hsl(159, 67%, 39%)', - yellow: 'hsl(36, 100%, 64%)', - red: 'hsl(360, 73%, 61%)', - - positive: 'hsl(159, 67%, 39%)', - negative: 'hsl(360, 73%, 61%)', - - success: 'hsl(159, 67%, 39%)', - warning: 'hsl(36, 100%, 64%)', - error: 'hsl(360, 73%, 61%)', - - favorite: 'hsl(36, 100%, 64%)', - }, - [AppTheme.Light]: { - ...LayerColors({ theme: AppTheme.Light }), - text0: 'hsl(0, 0%, 55%)', - text1: 'hsl(0, 0%, 40%)', - text2: 'hsl(0, 0%, 5%)', - - ...AccentColor({ theme: AppTheme.Light }), - green: 'hsl(159, 67%, 39%)', - yellow: 'hsl(36, 100%, 64%)', - red: 'hsl(360, 73%, 61%)', - - positive: 'hsl(159, 67%, 39%)', - negative: 'hsl(360, 73%, 61%)', - - success: 'hsl(159, 67%, 39%)', - warning: 'hsl(36, 100%, 64%)', - error: 'hsl(360, 73%, 61%)', - - favorite: 'hsl(36, 100%, 64%)', - }, -}; - -export const UsageColorFromRiskLevel = (riskLevel: RiskLevels) => - ({ - low: css` - color: var(--color-risk-low); - `, - medium: css` - color: var(--color-risk-medium); - `, - high: css` - color: var(--color-risk-high); - `, - }[riskLevel.name]); diff --git a/src/styles/colors/colors.ts b/src/styles/colors/colors.ts index 3c0c1cf..0abf2e6 100644 --- a/src/styles/colors/colors.ts +++ b/src/styles/colors/colors.ts @@ -4,7 +4,8 @@ export type ThemeColors = LayerColors & AccentColors & StatusColors & DirectionalColors & - RiskColors; + RiskColors & + ComponentColors; type LayerColors = { layer0: string; @@ -50,3 +51,8 @@ type RiskColors = { riskMedium: string; riskHigh: string; }; + +type ComponentColors = { + toggleBackground: string; + inputBackground: string; +}; diff --git a/src/styles/formMixins.ts b/src/styles/formMixins.ts index 3345b14..d709bef 100644 --- a/src/styles/formMixins.ts +++ b/src/styles/formMixins.ts @@ -21,7 +21,7 @@ export const formMixins: Record< --input-radius: 0.5em; --input-height: var(--form-input-height); --input-width: 100%; - --input-backgroundColor: var(--color-layer-4); + --input-backgroundColor: ${({ theme }) => theme.inputBackground}; --input-borderColor: var(--color-layer-6); ${layoutMixins.row} diff --git a/src/styles/globalStyle.ts b/src/styles/globalStyle.ts new file mode 100644 index 0000000..050af49 --- /dev/null +++ b/src/styles/globalStyle.ts @@ -0,0 +1,58 @@ +import { createGlobalStyle, css } from 'styled-components'; + +import { type RiskLevels } from '@/constants/abacus'; + +export const GlobalStyle = createGlobalStyle` + :root { + /* Computed: Layers */ + --color-layer-0: ${({ theme }) => theme.layer0}; + --color-layer-1: ${({ theme }) => theme.layer1}; + --color-layer-2: ${({ theme }) => theme.layer2}; + --color-layer-3: ${({ theme }) => theme.layer3}; + --color-layer-4: ${({ theme }) => theme.layer4}; + --color-layer-5: ${({ theme }) => theme.layer5}; + --color-layer-6: ${({ theme }) => theme.layer6}; + --color-layer-7: ${({ theme }) => theme.layer7}; + + /* Computed: Borders */ + --color-border: ${({ theme }) => theme.borderDefault}; + --color-border-white: ${({ theme }) => theme.borderButton}; //xcxc + --color-border-red: ${({ theme }) => theme.borderDestructive}; //xcxc + + /* Computed: Text */ + --color-text-0: ${({ theme }) => theme.textPrimary}; //xcxc + --color-text-1: ${({ theme }) => theme.textSecondary}; //xcxc + --color-text-2: ${({ theme }) => theme.textTertiary}; //xcxc + + /* Computed: Accent */ + --color-accent: ${({ theme }) => theme.accent}; + --color-favorite: ${({ theme }) => theme.favorite}; + + /* Computed: Status */ + --color-success: ${({ theme }) => theme.success}; + --color-warning: ${({ theme }) => theme.warning}; + --color-error: ${({ theme }) => theme.error}; + + /* Computed: Directional */ + --color-positive: ${({ theme }) => theme.positive}; + --color-negative: ${({ theme }) => theme.negative}; + + /* Computed: Risk */ + --color-risk-low: ${({ theme }) => theme.riskLow}; + --color-risk-medium: ${({ theme }) => theme.riskMedium}; + --color-risk-high: ${({ theme }) => theme.riskHigh}; + } +`; + +export const UsageColorFromRiskLevel = (riskLevel: RiskLevels) => + ({ + low: css` + color: var(--color-risk-low); + `, + medium: css` + color: var(--color-risk-medium); + `, + high: css` + color: var(--color-risk-high); + `, + }[riskLevel.name]); diff --git a/src/styles/themes.ts b/src/styles/themes.ts index afea8d3..315ef9f 100644 --- a/src/styles/themes.ts +++ b/src/styles/themes.ts @@ -33,6 +33,9 @@ const ClassicTheme: ThemeColors = { riskLow: ColorToken.Green1, riskMedium: ColorToken.Yellow0, riskHigh: ColorToken.Red2, + + inputBackground: ColorToken.GrayBlue3, + toggleBackground: ColorToken.GrayBlue3, }; const DarkTheme: ThemeColors = { @@ -66,6 +69,9 @@ const DarkTheme: ThemeColors = { riskLow: ColorToken.Green0, riskMedium: ColorToken.Yellow0, riskHigh: ColorToken.Red0, + + inputBackground: ColorToken.DarkGray6, + toggleBackground: ColorToken.DarkGray6, }; const LightTheme: ThemeColors = { @@ -99,6 +105,9 @@ const LightTheme: ThemeColors = { riskLow: ColorToken.Green2, riskMedium: ColorToken.Yellow0, riskHigh: ColorToken.Red1, + + inputBackground: ColorToken.White, + toggleBackground: ColorToken.LightGray4, }; export const Themes = { diff --git a/src/views/forms/TradeForm/TradeSideToggle.tsx b/src/views/forms/TradeForm/TradeSideToggle.tsx index ab269e3..8af0c6a 100644 --- a/src/views/forms/TradeForm/TradeSideToggle.tsx +++ b/src/views/forms/TradeForm/TradeSideToggle.tsx @@ -44,6 +44,7 @@ export const TradeSideToggle = memo(() => { const ToggleContainer = styled(ToggleGroup)<{ value: OrderSide }>` --toggle-radius: 0.5em; --toggle-color: var(--color-negative); + --toggle-background: ${({ theme }) => theme.toggleBackground}; ${({ value }) => value === OrderSide.BUY && @@ -52,7 +53,7 @@ const ToggleContainer = styled(ToggleGroup)<{ value: OrderSide }>` `} border-radius: var(--toggle-radius); - background-color: var(--color-layer-4); + background-color: var(--toggle-background); position: relative; > button {