Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Feat/colors update #12072

Merged
merged 3 commits into from
Apr 19, 2024
Merged

Feat/colors update #12072

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
c97928c
feat(suite): color palette update from export
vytick Apr 18, 2024
32b0835
feat(suite): updated color names to palette mapping
vytick Apr 18, 2024
2d2431b
chore(suite): fix tests for color change
vytick Apr 19, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion packages/suite-web/e2e/tests/settings/autodetect.test.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,7 @@ describe('Language and theme detection', () => {
},
});
cy.contains('Recogida de datos anónimos').should('have.css', 'color', 'rgb(234, 235, 237)');
cy.get('body').should('have.css', 'background-color', 'rgb(22, 22, 22)');
cy.get('body').should('have.css', 'background-color', 'rgb(23, 23, 23)');
});
});

Expand Down
2 changes: 1 addition & 1 deletion packages/suite-web/e2e/tests/suite/database-migration.test.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -150,7 +150,7 @@ describe('Database migration', () => {
.should('eq', testData.btcAddress);
cy.getTestElement('@account-subpage/back').last().click();

cy.get('body').should('have.css', 'background-color', 'rgb(22, 22, 22)');
cy.get('body').should('have.css', 'background-color', 'rgb(23, 23, 23)');
});
});

Expand Down
40 changes: 29 additions & 11 deletions packages/theme/src/colors.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -37,18 +37,21 @@ const light = {

// Figma Colors
backgroundAlertBlueBold: palette.lightAccentBlue600,
backgroundAlertBlueBoldAlt: palette.lightAccentBlue700,
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

btw what does the Alt mean?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I would say ALTERNATIVE, but dunno, it was in the export.

Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hey! The "bold-alt" tokens were added as a hotfix to the current token taxonomy due to missing colors for hover states of alert buttons. They intentionally have this generic name because we didn't want to unnecessarily add more new tokens than necessary for expanding alert buttons to new variants (red, yellow, blue). We would have to create a completely separate group with tokens "default" "hover/pressed", or rename the current tokens from "bold" to "default", which, considering the interconnectedness of tokens in various components, didn't seem like the best idea and would add unnecessary complexity. Therefore, it is primarily a temporary solution for the currently set taxonomy and naming, which is largely outdated, and that's why we are working on a new one.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This smells to me like temporarily–permanent solution 🫣

Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

No way.. work is already underway on the new semantics due to the shortcomings of the current one (issues with accessibility, scalability, and maintenance as our system gradually expands). Unfortunately, it's quite a broad topic that requires extensive analysis to harmonize the requirements for several touchpoints in both design and code simultaneously. Here, we need to address support for multiple platforms simultaneously, while also considering the design aspect and the need to implement a brand facelift with new colors throughout the entire system and so on..

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yes, got it :)

backgroundAlertBlueSubtleOnElevation0: palette.lightAccentBlue300,
backgroundAlertBlueSubtleOnElevation1: palette.lightAccentBlue200,
backgroundAlertBlueSubtleOnElevation2: palette.lightAccentBlue100,
backgroundAlertBlueSubtleOnElevation3: palette.lightAccentBlue50,
backgroundAlertBlueSubtleOnElevationNegative: palette.lightAccentBlue400,
backgroundAlertRedBold: palette.lightAccentRed600,
backgroundAlertRedBoldAlt: palette.lightAccentRed700,
backgroundAlertRedSubtleOnElevation0: palette.lightAccentRed300,
backgroundAlertRedSubtleOnElevation1: palette.lightAccentRed200,
backgroundAlertRedSubtleOnElevation2: palette.lightAccentRed100,
backgroundAlertRedSubtleOnElevation3: palette.lightAccentRed50,
backgroundAlertRedSubtleOnElevationNegative: palette.lightAccentRed400,
backgroundAlertYellowBold: palette.lightAccentYellow600,
backgroundAlertYellowBoldAlt: palette.lightAccentYellow700,
backgroundAlertYellowSubtleOnElevation0: palette.lightAccentYellow300,
backgroundAlertYellowSubtleOnElevation1: palette.lightAccentYellow200,
backgroundAlertYellowSubtleOnElevation2: palette.lightAccentYellow100,
Expand Down Expand Up @@ -87,18 +90,21 @@ const light = {
borderElevation1: palette.lightGray200,
borderElevation2: palette.lightGray200,
borderElevation3: palette.lightGray200,
borderElevationNegative: palette.lightGray300,
borderElevationNegative: palette.lightGray400,
borderSecondary: palette.lightSecondaryEmerald800,
borderSubtleInverted: palette.lightWhiteAlpha400,
iconAlertBlue: palette.lightAccentBlue700,
iconAlertBlue: palette.lightAccentBlue800,
iconAlertRed: palette.lightAccentRed700,
iconAlertYellow: palette.lightAccentYellow700,
iconAlertYellow: palette.lightAccentYellow800,
iconDefault: palette.lightGray1000,
iconDefaultInverted: palette.lightWhiteAlpha1000,
iconDisabled: palette.lightGray600,
iconOnBlue: palette.lightWhiteAlpha1000,
iconOnPrimary: palette.lightWhiteAlpha1000,
iconOnRed: palette.lightWhiteAlpha1000,
iconOnSecondary: palette.lightWhiteAlpha1000,
iconOnTertiary: palette.lightGray800,
iconOnYellow: palette.lightGray1000,
iconPrimaryDefault: palette.lightPrimaryForest800,
iconPrimaryPressed: palette.lightPrimaryForest900,
iconSubdued: palette.lightGray700,
Expand Down Expand Up @@ -142,15 +148,18 @@ const light = {
interactionBackgroundWarningDefaultNormalOnElevation2: palette.lightAccentYellow200,
interactionBackgroundWarningDefaultNormalOnElevation3: palette.lightAccentYellow100,
interactionBackgroundWarningDefaultNormalOnElevationNegative: palette.lightAccentYellow300,
textAlertBlue: palette.lightAccentBlue700,
textAlertBlue: palette.lightAccentBlue800,
textAlertRed: palette.lightAccentRed700,
textAlertYellow: palette.lightAccentYellow700,
textAlertYellow: palette.lightAccentYellow800,
textDefault: palette.lightGray1000,
textDefaultInverted: palette.lightWhiteAlpha1000,
textDisabled: palette.lightGray600,
textOnBlue: palette.lightWhiteAlpha1000,
textOnPrimary: palette.lightWhiteAlpha1000,
textOnRed: palette.lightWhiteAlpha1000,
textOnSecondary: palette.lightWhiteAlpha1000,
textOnTertiary: palette.lightGray800,
textOnYellow: palette.lightGray1000,
textPrimaryDefault: palette.lightPrimaryForest800,
textPrimaryPressed: palette.lightPrimaryForest900,
textSecondaryHighlight: palette.lightSecondaryEmerald800,
Expand Down Expand Up @@ -190,18 +199,21 @@ export const colorVariants: Record<ThemeColorVariant, Colors> = {

// Figma Colors
backgroundAlertBlueBold: palette.darkAccentBlue600,
backgroundAlertBlueBoldAlt: palette.darkAccentBlue700,
backgroundAlertBlueSubtleOnElevation0: palette.darkAccentBlue50,
backgroundAlertBlueSubtleOnElevation1: palette.darkAccentBlue100,
backgroundAlertBlueSubtleOnElevation2: palette.darkAccentBlue200,
backgroundAlertBlueSubtleOnElevation3: palette.darkAccentBlue300,
backgroundAlertBlueSubtleOnElevationNegative: '#FFFFFF',
backgroundAlertRedBold: palette.darkAccentRed600,
backgroundAlertRedBoldAlt: palette.darkAccentRed700,
backgroundAlertRedSubtleOnElevation0: palette.darkAccentRed50,
backgroundAlertRedSubtleOnElevation1: palette.darkAccentRed100,
backgroundAlertRedSubtleOnElevation2: palette.darkAccentRed200,
backgroundAlertRedSubtleOnElevation3: palette.darkAccentRed300,
backgroundAlertRedSubtleOnElevationNegative: '#FFFFFF',
backgroundAlertYellowBold: palette.darkAccentYellow600,
backgroundAlertYellowBoldAlt: palette.darkAccentYellow700,
backgroundAlertYellowSubtleOnElevation0: palette.darkAccentYellow50,
backgroundAlertYellowSubtleOnElevation1: palette.darkAccentYellow100,
backgroundAlertYellowSubtleOnElevation2: palette.darkAccentYellow200,
Expand Down Expand Up @@ -234,13 +246,13 @@ export const colorVariants: Record<ThemeColorVariant, Colors> = {
backgroundTertiaryPressedOnElevationNegative: palette.darkGray100,
borderAlertRed: palette.darkAccentRed600,
borderDashed: palette.darkGray200,
borderFocus: palette.darkGray200,
borderInverted: palette.darkGray000,
borderElevation0: palette.darkGray100,
borderElevation1: palette.darkGray200,
borderElevation2: palette.darkGray300,
borderElevation3: palette.darkGray400,
borderElevationNegative: palette.darkGray200,
borderElevationNegative: palette.darkGray50,
borderFocus: palette.darkGray200,
borderInverted: palette.darkGray000,
borderSecondary: palette.darkSecondaryGreen800,
borderSubtleInverted: '#0000007F',
iconAlertBlue: palette.darkAccentBlue700,
Expand All @@ -249,9 +261,12 @@ export const colorVariants: Record<ThemeColorVariant, Colors> = {
iconDefault: palette.darkGray1000,
iconDefaultInverted: palette.darkGray000,
iconDisabled: palette.darkGray600,
iconOnBlue: palette.darkGray1000,
iconOnPrimary: palette.darkGray000,
iconOnRed: palette.darkGray1000,
iconOnSecondary: palette.darkGray000,
iconOnTertiary: palette.darkGray800,
iconOnYellow: palette.darkGray000,
iconPrimaryDefault: palette.darkPrimaryForest800,
iconPrimaryPressed: palette.darkPrimaryForest900,
iconSubdued: palette.darkGray700,
Expand Down Expand Up @@ -295,15 +310,18 @@ export const colorVariants: Record<ThemeColorVariant, Colors> = {
interactionBackgroundWarningDefaultNormalOnElevation2: palette.darkAccentYellow300,
interactionBackgroundWarningDefaultNormalOnElevation3: palette.darkAccentYellow400,
interactionBackgroundWarningDefaultNormalOnElevationNegative: palette.darkAccentYellow50,
textAlertBlue: palette.darkAccentBlue700,
textAlertRed: palette.darkAccentRed700,
textAlertYellow: palette.darkAccentYellow600,
textAlertBlue: palette.darkAccentBlue800,
textAlertRed: palette.darkAccentRed800,
textAlertYellow: palette.darkAccentYellow700,
textDefault: palette.darkGray1000,
textDefaultInverted: palette.darkGray000,
textDisabled: palette.darkGray600,
textOnBlue: palette.darkAccentBlue800,
textOnPrimary: palette.darkGray000,
textOnRed: palette.darkGray1000,
textOnSecondary: palette.darkGray000,
textOnTertiary: palette.darkGray800,
textOnYellow: palette.darkGray000,
textPrimaryDefault: palette.darkPrimaryForest800,
textPrimaryPressed: palette.darkPrimaryForest900,
textSecondaryHighlight: palette.darkSecondaryGreen800,
Expand Down
Loading
Loading