chore: remove wtf legacy colors object, reference legacy colors directly

trezor · Sep 26, 2024 · 17f80dd · 17f80dd
1 parent c727023
commit 17f80dd
Show file tree

Hide file tree

Showing 9 changed files with 30 additions and 26 deletions.
diff --git a/packages/components/src/config/colors.ts b/packages/components/src/config/colors.ts
@@ -227,8 +227,6 @@ export const THEME = {
     },
 } as const;
 
-export const colors = THEME.light;
-
 export const intermediaryTheme = {
     light: {
         ...THEME.light,

diff --git a/packages/components/src/config/index.ts b/packages/components/src/config/index.ts
@@ -1,6 +1,5 @@
 import * as animations from './animations';
-import { colors } from './colors';
 import * as motion from './motion';
 import * as variables from './variables';
 
-export { animations, colors, motion, variables };
+export { animations, motion, variables };
diff --git a/packages/components/src/index.ts b/packages/components/src/index.ts
@@ -1,4 +1,4 @@
-import { colors, THEME, intermediaryTheme, SuiteThemeColors } from './config/colors';
+import { THEME, intermediaryTheme, SuiteThemeColors } from './config/colors';
 
 export * as variables from './config/variables';
 export * as animations from './config/animations';
@@ -81,4 +81,4 @@ export * from './utils/useScrollShadow';
 export * from './utils/transientProps';
 export { useMediaQuery } from './utils/useMediaQuery';
 
-export { colors, THEME, intermediaryTheme, type SuiteThemeColors };
+export { THEME, intermediaryTheme, type SuiteThemeColors };
diff --git a/packages/connect-ui/src/components/FloatingMenu.tsx b/packages/connect-ui/src/components/FloatingMenu.tsx
@@ -1,6 +1,6 @@
 import styled from 'styled-components';
 
-import { colors, animations, Icon } from '@trezor/components';
+import { animations, Icon, intermediaryTheme } from '@trezor/components';
 
 const IconWrapper = styled.div`
     width: 40px;
@@ -24,6 +24,6 @@ type FloatingMenuProps = { onShowAnalyticsConsent: () => void };
 
 export const FloatingMenu = ({ onShowAnalyticsConsent }: FloatingMenuProps) => (
     <IconWrapper onClick={onShowAnalyticsConsent} data-testid="@analytics/settings">
-        <Icon name="settings" size={22} color={colors.legacy.TYPE_DARK_GREY} />
+        <Icon name="settings" size={22} color={intermediaryTheme.light.legacy.TYPE_DARK_GREY} />
     </IconWrapper>
 );
diff --git a/packages/connect-ui/src/views/Error.tsx b/packages/connect-ui/src/views/Error.tsx
@@ -3,7 +3,14 @@ import { ReactNode } from 'react';
 
 import styled from 'styled-components';
 
-import { Button, CollapsibleBox, colors, Icon, IconName, variables } from '@trezor/components';
+import {
+    Button,
+    CollapsibleBox,
+    Icon,
+    IconName,
+    intermediaryTheme,
+    variables,
+} from '@trezor/components';
 import { isFirefox } from '@trezor/env-utils';
 
 // eslint-disable-next-line local-rules/no-override-ds-component
@@ -204,13 +211,13 @@ const InnerWrapper = styled.div`
 `;
 
 const H = styled.h1`
-    color: ${colors.legacy.TYPE_RED};
+    color: ${intermediaryTheme.light.legacy.TYPE_RED};
     font-size: 28px;
     font-weight: ${variables.FONT_WEIGHT.DEMI_BOLD};
 `;
 
 const Text = styled.div`
-    color: ${colors.legacy.TYPE_LIGHT_GREY};
+    color: ${intermediaryTheme.light.legacy.TYPE_LIGHT_GREY};
     font-size: ${variables.FONT_SIZE.NORMAL};
 `;
 
@@ -240,7 +247,7 @@ const HeadingText = styled.div`
 `;
 
 const HeadingH1 = styled.div`
-    color: ${colors.legacy.TYPE_DARK_GREY};
+    color: ${intermediaryTheme.light.legacy.TYPE_DARK_GREY};
     font-size: ${variables.FONT_SIZE.NORMAL};
     font-weight: ${variables.FONT_WEIGHT.DEMI_BOLD};
     margin-bottom: 4px;

diff --git a/packages/suite/src/components/suite/QrCode.tsx b/packages/suite/src/components/suite/QrCode.tsx
@@ -1,7 +1,7 @@
 import { QRCodeSVG } from 'qrcode.react';
 import styled from 'styled-components';
 
-import { Icon, Tooltip, colors, variables } from '@trezor/components';
+import { Icon, Tooltip, variables, intermediaryTheme } from '@trezor/components';
 import { Translation } from './Translation';
 
 export const QRCODE_SIZE = 384;
@@ -13,7 +13,7 @@ const Wrapper = styled.div`
 
     /* some qr code scanners can't recognize qr codes on dark background, having white border around helps with this */
     padding: ${QRCODE_PADDING}px;
-    background: ${colors.legacy.BG_WHITE};
+    background: ${intermediaryTheme.light.legacy.BG_WHITE};
     max-width: ${QRCODE_SIZE}px;
     position: relative;
 
@@ -56,8 +56,8 @@ interface QrCodeProps {
 export const QrCode = ({ value, className, bgColor, fgColor, showMessage }: QrCodeProps) => (
     <Wrapper className={className}>
         <QRCodeSVG
-            bgColor={bgColor || colors.legacy.BG_WHITE}
-            fgColor={fgColor || colors.legacy.TYPE_DARK_GREY}
+            bgColor={bgColor || intermediaryTheme.light.legacy.BG_WHITE}
+            fgColor={fgColor || intermediaryTheme.light.legacy.TYPE_DARK_GREY}
             level="Q"
             size={QRCODE_SIZE}
             value={value}
@@ -74,7 +74,7 @@ export const QrCode = ({ value, className, bgColor, fgColor, showMessage }: QrCo
                     <StyledIcon
                         name="info"
                         size={12}
-                        color={fgColor || colors.legacy.TYPE_DARK_GREY}
+                        color={fgColor || intermediaryTheme.light.legacy.TYPE_DARK_GREY}
                     />
                 </StyledTooltip>
             </Message>

diff --git a/packages/suite/src/components/suite/graph/GraphRangeSelector.tsx b/packages/suite/src/components/suite/graph/GraphRangeSelector.tsx
@@ -13,7 +13,7 @@ import {
     differenceInMonths,
 } from 'date-fns';
 
-import { colors, variables, Dropdown, DropdownRef, Timerange } from '@trezor/components';
+import { variables, Dropdown, DropdownRef, Timerange, intermediaryTheme } from '@trezor/components';
 import { GraphRange } from 'src/types/wallet/graph';
 
 const Wrapper = styled.div`
@@ -42,7 +42,7 @@ const RangeItem = styled.div<{ $selected: boolean; $separated?: boolean }>`
     ${({ $separated }) =>
         $separated &&
         css`
-            border-left: 1px solid ${colors.legacy.TYPE_LIGHTER_GREY};
+            border-left: 1px solid ${intermediaryTheme.light.legacy.TYPE_LIGHTER_GREY};
             padding-left: 15px;
             margin-left: 15px;
             text-transform: capitalize;

diff --git a/packages/suite/src/components/suite/modals/Modal/DefaultRenderer.tsx b/packages/suite/src/components/suite/modals/Modal/DefaultRenderer.tsx
@@ -1,6 +1,6 @@
 import { ReactPortal } from 'react';
 import { createPortal } from 'react-dom';
-import { Modal, ModalProps, Icon, colors } from '@trezor/components';
+import { Modal, ModalProps, Icon, intermediaryTheme } from '@trezor/components';
 import { useGuide } from 'src/hooks/guide';
 import { useLayoutSize } from 'src/hooks/suite/useLayoutSize';
 import { useModalTarget } from 'src/support/suite/ModalContext';
@@ -36,7 +36,7 @@ export const DefaultRenderer = ({
                                 <Icon
                                     name="lightbulb"
                                     size={20}
-                                    hoverColor={colors.legacy.TYPE_ORANGE}
+                                    hoverColor={intermediaryTheme.light.legacy.TYPE_ORANGE}
                                     onClick={openGuide}
                                 />
                             )}

diff --git a/packages/suite/src/utils/suite/notification.ts b/packages/suite/src/utils/suite/notification.ts
@@ -1,7 +1,7 @@
 import { NotificationEntry } from '@suite-common/toast-notifications';
-import { colors } from '@trezor/components';
 import { ToastNotificationVariant, AppState } from 'src/types/suite';
 import type { NotificationViewProps } from 'src/components/suite';
+import { intermediaryTheme } from '@trezor/components';
 
 export const getNotificationIcon = (variant: ToastNotificationVariant) => {
     switch (variant) {
@@ -20,13 +20,13 @@ export const getNotificationIcon = (variant: ToastNotificationVariant) => {
 export const getVariantColor = (variant: NotificationViewProps['variant']) => {
     switch (variant) {
         case 'info':
-            return colors.legacy.TYPE_BLUE;
+            return intermediaryTheme.light.legacy.TYPE_BLUE;
         case 'warning':
-            return colors.legacy.TYPE_ORANGE;
+            return intermediaryTheme.light.legacy.TYPE_ORANGE;
         case 'error':
-            return colors.legacy.TYPE_RED;
+            return intermediaryTheme.light.legacy.TYPE_RED;
         case 'success':
-            return colors.legacy.TYPE_GREEN;
+            return intermediaryTheme.light.legacy.TYPE_GREEN;
         case 'transparent':
         default:
             return 'transparent';