chore: simplify theme types

trezor · Sep 27, 2024 · 8adbeaa · 8adbeaa
1 parent fa4bb0b
commit 8adbeaa
Show file tree

Hide file tree

Showing 6 changed files with 16 additions and 20 deletions.
diff --git a/packages/components/src/config/colors.ts b/packages/components/src/config/colors.ts
@@ -1,10 +1,10 @@
+import { boxShadows, colorVariants } from '@trezor/theme';
+
 // TODO: button hover color could be derived from its based color by applying something like opacity/darkening
 // same goes for gradients
 
-import { boxShadows, colorVariants } from '@trezor/theme';
-
-type LightThemeProps = typeof THEME.light;
-type DarkThemeProps = typeof THEME.dark;
+type LightThemeProps = typeof intermediaryTheme.light;
+type DarkThemeProps = typeof intermediaryTheme.dark;
 
 // extracts values for common props (eg. NEUE_BG_GREEN: "#00854D" | "#e3ede0")
 type CommonThemeProps = {
@@ -19,6 +19,7 @@ export type SuiteThemeColors = CommonThemeProps &
     Partial<PropsOnlyInDarkTheme> &
     Partial<PropsOnlyInLightTheme>;
 
+/** @deprecated Do NOT export it! Use intermediaryTheme instead! */
 const THEME = {
     light: {
         legacy: {

diff --git a/packages/components/src/index.ts b/packages/components/src/index.ts
@@ -1,5 +1,3 @@
-import { intermediaryTheme, SuiteThemeColors } from './config/colors';
-
 export * as variables from './config/variables';
 export * as animations from './config/animations';
 export { motionAnimation, motionEasing } from './config/motion';
@@ -80,4 +78,5 @@ export * from './utils/useScrollShadow';
 export * from './utils/transientProps';
 export { useMediaQuery } from './utils/useMediaQuery';
 
-export { intermediaryTheme, type SuiteThemeColors };
+export { intermediaryTheme } from './config/colors';
+export type { SuiteThemeColors } from './config/colors';
diff --git a/packages/suite/src/support/suite/styles/GlobalStyle.tsx b/packages/suite/src/support/suite/styles/GlobalStyle.tsx
@@ -1,9 +1,8 @@
 import { typography } from '@trezor/theme';
 import animations from './animations';
-import { SuiteThemeColors } from '@trezor/components';
-import { createGlobalStyle } from 'styled-components';
+import { createGlobalStyle, DefaultTheme } from 'styled-components';
 
-const GlobalStyle = createGlobalStyle<{ theme: SuiteThemeColors }>`
+const GlobalStyle = createGlobalStyle<{ theme: DefaultTheme }>`
     #app {
         display: flex;
         flex-direction: column;
@@ -51,7 +50,6 @@ const GlobalStyle = createGlobalStyle<{ theme: SuiteThemeColors }>`
     }
 
     ${animations}
-
     /* https://floating-ui.com/docs/misc#handling-large-content */
     .floating {
         max-width: calc(100vw - 10px);

diff --git a/packages/suite/src/types/suite/index.ts b/packages/suite/src/types/suite/index.ts
@@ -35,7 +35,6 @@ import type { GuideAction } from 'src/actions/suite/guideActions';
 // reexport
 export type { ExtendedMessageDescriptor } from 'src/components/suite/Translation';
 export type { AppState } from 'src/reducers/store';
-export type { SuiteThemeColors } from '@trezor/components';
 export type { PrerequisiteType } from 'src/utils/suite/prerequisites';
 export type { Route };
 export type {

diff --git a/...ket/common/CoinmarketLayout/CoinmarketAccountTransactions/CoinmarketTransactionStatus.tsx b/...ket/common/CoinmarketLayout/CoinmarketAccountTransactions/CoinmarketTransactionStatus.tsx
@@ -1,9 +1,9 @@
-import styled, { useTheme } from 'styled-components';
+import styled, { DefaultTheme, useTheme } from 'styled-components';
 import { Translation } from 'src/components/suite';
 import { getStatusMessage as getBuyStatusMessage } from 'src/utils/wallet/coinmarket/buyUtils';
 import { getStatusMessage as getExchangeStatusMessage } from 'src/utils/wallet/coinmarket/exchangeUtils';
 import { getStatusMessage as getSellStatusMessage } from 'src/utils/wallet/coinmarket/sellUtils';
-import { variables, Icon, SuiteThemeColors } from '@trezor/components';
+import { variables, Icon } from '@trezor/components';
 import { Trade } from 'src/types/wallet/coinmarketCommonTypes';
 import { BuyTradeStatus, ExchangeTradeStatus, SellTradeStatus } from 'invity-api';
 
@@ -18,7 +18,7 @@ const Text = styled.div`
     padding-top: 1px;
 `;
 
-const getBuyTradeData = (status: BuyTradeStatus, theme: SuiteThemeColors) => {
+const getBuyTradeData = (status: BuyTradeStatus, theme: DefaultTheme) => {
     const message = getBuyStatusMessage(status);
     switch (message) {
         case 'TR_BUY_STATUS_PENDING':
@@ -50,7 +50,7 @@ const getBuyTradeData = (status: BuyTradeStatus, theme: SuiteThemeColors) => {
     }
 };
 
-const getSellTradeData = (status: SellTradeStatus, theme: SuiteThemeColors) => {
+const getSellTradeData = (status: SellTradeStatus, theme: DefaultTheme) => {
     const message = getSellStatusMessage(status);
     switch (message) {
         case 'TR_SELL_STATUS_PENDING':
@@ -75,7 +75,7 @@ const getSellTradeData = (status: SellTradeStatus, theme: SuiteThemeColors) => {
     }
 };
 
-const getExchangeTradeData = (status: ExchangeTradeStatus, theme: SuiteThemeColors) => {
+const getExchangeTradeData = (status: ExchangeTradeStatus, theme: DefaultTheme) => {
     const message = getExchangeStatusMessage(status);
     switch (message) {
         case 'TR_EXCHANGE_STATUS_CONFIRMING':

diff --git a/packages/transport-bridge/src/ui/styles/GlobalStyle.tsx b/packages/transport-bridge/src/ui/styles/GlobalStyle.tsx
@@ -1,9 +1,8 @@
-import { createGlobalStyle } from 'styled-components';
+import { createGlobalStyle, DefaultTheme } from 'styled-components';
 
 import { typography } from '@trezor/theme';
-import type { SuiteThemeColors } from '@trezor/components';
 
-export const GlobalStyle = createGlobalStyle<{ theme: SuiteThemeColors }>`
+export const GlobalStyle = createGlobalStyle<{ theme: DefaultTheme }>`
     #app {
         display: flex;
         flex-direction: column;