feat(suite): Add new color palette (1.0.0 -> 1.1.0) (#17470)

* feat(suite): Add new color palette

* fix(suite): Fix test for colors

Author: jvaclavik

package.json

@@ -53,6 +53,7 @@
         "nx:format": "yarn nx format:check",
         "_______ Commands _______": "Useful commands and scripts.",
         "patch": "yarn patch-package",
+        "convert-figma-palette": "yarn tsx ./scripts/convertFigmaPalette.ts",
         "update-project-references": "yarn tsx ./scripts/updateProjectReferences.ts",
         "verify-project-references": "yarn update-project-references --test",
         "check-workspace-resolutions": "yarn tsx ./scripts/check-workspace-resolutions.ts",

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/components/src/components/ElevationContext/ElevationContext.stories.tsx

@@ -18,6 +18,7 @@ import {
     useElevation,
 } from './ElevationContext';
 import { Card } from '../Card/Card';
+import { Button } from '../buttons/Button/Button';
 import { Textarea } from '../form/Textarea/Textarea';
 import { Modal } from '../modals/Modal/Modal';
 
@@ -78,6 +79,7 @@ const Box = ({ children }: { children?: ReactNode }) => {
     return (
         <UiBox $elevation={elevation}>
             <div>Elevation: {elevation}</div>
+            <Button variant="tertiary">tertiary button</Button>
             <ElevationUp>{children}</ElevationUp>
         </UiBox>
     );
@@ -90,7 +92,7 @@ export const ElevationContext: StoryObj = {
                 <ElevationDown>
                     <Box />
                 </ElevationDown>
-
+                <Box />
                 <ElevationUp>
                     <Box>
                         <Box>

packages/components/src/components/buttons/buttonStyleUtils.ts

@@ -81,10 +81,10 @@ const mapElevationToButtonBackground = ({
 
         // Button lies always on elevation so for example Button that lies has elevation 0, lies on elevation -1.
         // This is why the values here a shifted by 1.
-        0: `interactionBackgroundTertiaryDefault${capitalizedState}OnElevationNegative`,
-        1: `interactionBackgroundTertiaryDefault${capitalizedState}OnElevation0`,
-        2: `interactionBackgroundTertiaryDefault${capitalizedState}OnElevation1`,
-        3: `interactionBackgroundTertiaryDefault${capitalizedState}OnElevation2`,
+        0: `interactionBackgroundTertiaryDefault${capitalizedState}OnElevation0`,
+        1: `interactionBackgroundTertiaryDefault${capitalizedState}OnElevation1`,
+        2: `interactionBackgroundTertiaryDefault${capitalizedState}OnElevation2`,
+        3: `interactionBackgroundTertiaryDefault${capitalizedState}OnElevation3`,
     };
 
     return theme[map[elevation]];

packages/components/src/components/typography/Text/Text.stories.tsx

@@ -24,38 +24,38 @@ const meta: Meta = {
 } as Meta;
 export default meta;
 
-export const Text: StoryObj = {
-    render: props => (
+export const Text: StoryObj<typeof TextComponent> = {
+    render: ({ variant, color, ...rest }) => (
         <Wrapper>
             <ColoredBlock>
-                <TextComponent {...props}>
+                <TextComponent {...rest}>
                     This is just a plain text with inherited color from its parent
                 </TextComponent>
             </ColoredBlock>
             <Block>
-                <TextComponent variant="default" {...props}>
+                <TextComponent variant="default" {...rest}>
                     This is <strong>default</strong> variant
                 </TextComponent>
-                <TextComponent variant="primary" {...props}>
+                <TextComponent variant="primary" {...rest}>
                     This is <strong>primary</strong> variant
                 </TextComponent>
-                <TextComponent variant="info" {...props}>
+                <TextComponent variant="info" {...rest}>
                     This is <TextComponent typographyStyle="highlight">info</TextComponent> variant
                 </TextComponent>
-                <TextComponent variant="warning" {...props}>
+                <TextComponent variant="warning" {...rest}>
                     This is <strong>warning</strong> variant
                 </TextComponent>
-                <TextComponent variant="destructive" {...props}>
+                <TextComponent variant="destructive" {...rest}>
                     This is <strong>destructive</strong> variant
                 </TextComponent>
             </Block>
             <Block>
-                <TextComponent color="#9be887" {...props}>
+                <TextComponent color="#9be887" {...rest}>
                     This is <strong>custom</strong> color variant
                 </TextComponent>
             </Block>
             <Block>
-                <TextComponent variant="info" typographyStyle="titleMedium" {...props}>
+                <TextComponent variant="info" typographyStyle="titleMedium" {...rest}>
                     This is just a plain Medium Title
                 </TextComponent>
             </Block>

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

@@ -1,9 +1,8 @@
+import { colorVariants } 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)';
 enum ColorScheme {
     Light = 'light',
     Dark = 'dark',
@@ -14,22 +13,22 @@ const testCases = [
         testName: 'Light English',
         userPreferences: { colorScheme: ColorScheme.Light },
         text: 'Anonymous data collection',
-        textColor: darkGreyColor,
-        bodyBackgroundColor: veryLightGreyColor,
+        textColor: colorVariants.standard.textDefault,
+        bodyBackgroundColor: colorVariants.standard.backgroundSurfaceElevation0,
     },
     {
         testName: 'Dark English',
         userPreferences: { colorScheme: ColorScheme.Dark },
         text: 'Anonymous data collection',
-        textColor: lightGreyColor,
-        bodyBackgroundColor: veryDarkGreyColor,
+        textColor: colorVariants.dark.textDefault,
+        bodyBackgroundColor: colorVariants.dark.backgroundSurfaceElevation0,
     },
     {
         testName: 'Dark Spanish',
         userPreferences: { locale: 'es-ES', colorScheme: ColorScheme.Dark },
         text: 'Recogida de datos anónimos',
-        textColor: lightGreyColor,
-        bodyBackgroundColor: veryDarkGreyColor,
+        textColor: colorVariants.dark.textDefault,
+        bodyBackgroundColor: colorVariants.dark.backgroundSurfaceElevation0,
     },
 ];
 
@@ -40,10 +39,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),
             );
         });
     });