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.

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

feat: Updating blue to brand evolution blurple #474

Merged
merged 9 commits into from
Mar 12, 2025
Merged

Conversation

georgewrmarshall
Copy link
Contributor

@georgewrmarshall georgewrmarshall commented Mar 12, 2025

Description

This PR updates the design tokens to align with the brand evolution "blurple" colors and fixes some casing inconsistencies introduced in #428. The changes primarily affect the blue color palette across our design system, ensuring consistency between Figma values and our implementation.

Key updates include:

  1. Updating the blue color scale in brand colors from the current palette to the new "blurple" palette
  2. Adjusting primary, info, and shadow colors in both light and dark themes to use the new blue values
  3. Fixing casing consistency in color values to ensure they match Figma exactly

Related issues

Fixes: #475

Manual testing steps

  1. Pull the branch and build storybook yarn storybook
  2. Verify that all blue colors have been updated to the new "blurple" palette
  3. Check that primary colors in both light and dark themes reflect the new values
  4. Confirm that all color hex values match their comments exactly (casing)
  5. Run tests using yarn workspace @metamask/design-tokens jest src/js to verify changes

Screenshots/Recordings

Before

Blue color values (old):

  • Blue500: #0376c9
  • Blue300: #43aefc
  • Primary default (light): #0376c9
  • Primary default (dark): #43aefc
before720.mov

After

Blue color values (new):

  • Blue500: #4459ff
  • Blue300: #8b99ff
  • Primary default (light): #4459ff
  • Primary default (dark): #8b99ff
after720.mov

Pre-merge author checklist

  • I've followed MetaMask Contributor Docs
  • I've completed the PR template to the best of my ability
  • I've included tests if applicable
  • I've documented my code using JSDoc format if applicable
  • I've applied the right labels on the PR

Pre-merge reviewer checklist

  • I've manually tested the PR (e.g. pull and build branch, run the app, test code being changed)
  • I confirm that this PR addresses all acceptance criteria described in the ticket it closes and includes the necessary testing evidence such as recordings and or screenshots

@georgewrmarshall georgewrmarshall self-assigned this Mar 12, 2025
@georgewrmarshall georgewrmarshall changed the title Feat/blurple feat: Updating blue to brand evolution blurple Mar 12, 2025
@georgewrmarshall georgewrmarshall marked this pull request as ready for review March 12, 2025 19:29
@georgewrmarshall georgewrmarshall requested a review from a team as a code owner March 12, 2025 19:29
@@ -19,7 +19,7 @@
"description": "For raised neutral surface above background/default."
},
"default-hover": {
"value": "#1A1B1C",
"value": "#1a1b1c",
Copy link
Contributor Author

Choose a reason for hiding this comment

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

Same color. Just changing to lowercase. We are pretty inconsistent with this across the board so we can resolve in a enablement sprint

@@ -77,7 +77,7 @@ export type ThemeColors = {
inverse: string;
};
primary: {
/** For primary semantic elements: interactive, active, selected... */
/** For primary semantic elements: interactive, active, selected */
Copy link
Contributor Author

Choose a reason for hiding this comment

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

Removing three dots

brianacnguyen
brianacnguyen previously approved these changes Mar 12, 2025
Co-authored-by: Brian August Nguyen <brianacnguyen@gmail.com>
Adjusted values for
- primary.default-hover to #384DF5
- primary.default-pressed #2B3EDA
Adjusted primary-default-hover to "9EAAFF"
@Akatori-Design
Copy link
Contributor

@georgewrmarshall
I just made minor color adjusetments on 3 colors (2 in light, 1 in dark)

LIGHT

  • primary.default.hover
    -primary.default.pressed

DARK

  • primary.default.hover

cc:@brianacnguyen

@brianacnguyen brianacnguyen merged commit 283ae41 into main Mar 12, 2025
30 checks passed
@brianacnguyen brianacnguyen deleted the feat/blurple branch March 12, 2025 23:12
@georgewrmarshall georgewrmarshall mentioned this pull request Mar 13, 2025
6 tasks
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Update blue to blurple
3 participants