fix(suite): Fix test for colors

Author: jvaclavik

packages/components/src/components/DataAnalytics.tsx

@@ -3,9 +3,8 @@ import { FormattedMessage } from 'react-intl';
 
 import styled from 'styled-components';
 
-import { spacingsPx } from '@trezor/theme';
+import { spacingsPx, typography } from '@trezor/theme';
 
-import { variables } from '../config';
 import { Card } from './Card/Card';
 import { CollapsibleBox } from './CollapsibleBox/CollapsibleBox';
 import { Button } from './buttons/Button/Button';
@@ -32,30 +31,23 @@ const ButtonWrapper = styled.div`
     align-self: center;
 `;
 
-const StyledButton = styled(Button)`
-    min-width: 180px;
-`;
-
 const Label = styled.span`
     margin-left: ${spacingsPx.lg};
-    font-size: ${variables.FONT_SIZE.SMALL};
-    font-weight: ${variables.FONT_WEIGHT.MEDIUM};
-    color: ${({ theme }) => theme.legacy.TYPE_DARK_GREY};
+    ${typography.hint};
+    color: ${({ theme }) => theme.textDefault};
     align-items: center;
     display: flex;
 `;
 
 const Heading = styled.h2`
-    font-size: ${variables.FONT_SIZE.SMALL};
-    font-weight: ${variables.FONT_WEIGHT.DEMI_BOLD};
-    color: ${({ theme }) => theme.legacy.TYPE_DARK_GREY};
+    ${typography.callout};
+    color: ${({ theme }) => theme.textDefault};
     text-align: left;
 `;
 
 const Description = styled.span`
-    font-size: ${variables.FONT_SIZE.SMALL};
-    font-weight: ${variables.FONT_WEIGHT.MEDIUM};
-    color: ${({ theme }) => theme.legacy.TYPE_LIGHT_GREY};
+    ${typography.hint};
+    color: ${({ theme }) => theme.textSubdued};
 `;
 
 const Category = styled.div`
@@ -185,12 +177,13 @@ export const DataAnalytics = ({
                 </ContentWrapper>
 
                 <ButtonWrapper>
-                    <StyledButton
+                    <Button
                         data-testid="@analytics/continue-button"
                         onClick={() => onConfirm(trackingEnabled)}
+                        minWidth={180}
                     >
                         <FormattedMessage id="TR_CONFIRM" defaultMessage="Confirm" />
-                    </StyledButton>
+                    </Button>
                 </ButtonWrapper>
             </Wrapper>
         </Card>

packages/suite-desktop-core/e2e/tests/settings/autodetect.test.ts

@@ -1,9 +1,12 @@
+import { palette } from '@trezor/theme';
+import { hexToRgba } from '@trezor/utils';
+
 import { expect, test } from '../../support/fixtures';
 
-const veryDarkGreyColor = 'rgb(23, 23, 23)';
-const darkGreyColor = 'rgb(31, 31, 31)';
-const veryLightGreyColor = 'rgb(246, 246, 246)';
-const lightGreyColor = 'rgb(234, 235, 237)';
+const veryDarkGreyColor = palette.darkGray50;
+const darkGreyColor = palette.lightGray1000;
+const veryLightGreyColor = palette.lightGray100;
+const lightGreyColor = palette.lightWhiteAlpha1000;
 enum ColorScheme {
     Light = 'light',
     Dark = 'dark',
@@ -40,10 +43,10 @@ testCases.forEach(({ testName, userPreferences, text, textColor, bodyBackgroundC
         test(testName, async ({ onboardingPage, analyticsSection }) => {
             await onboardingPage.optionallyDismissFwHashCheckError();
             await expect(analyticsSection.heading).toHaveText(text);
-            await expect(analyticsSection.heading).toHaveCSS('color', textColor);
+            await expect(analyticsSection.heading).toHaveCSS('color', hexToRgba(textColor));
             await expect(onboardingPage.page.locator('body')).toHaveCSS(
                 'background-color',
-                bodyBackgroundColor,
+                hexToRgba(bodyBackgroundColor),
             );
         });
     });

packages/utils/src/hexToRgba.ts

@@ -1,9 +1,9 @@
-export function hexToRgba(hex: string, alpha: number) {
+export function hexToRgba(hex: string, alpha?: number) {
     const r = parseInt(hex.slice(1, 3), 16);
     const g = parseInt(hex.slice(3, 5), 16);
     const b = parseInt(hex.slice(5, 7), 16);
 
-    if (alpha > 0) {
+    if (alpha && alpha > 0) {
         return `rgba(${r}, ${g}, ${b}, ${alpha})` as `rgba(${number}, ${number}, ${number}, ${number})`;
     }