generated from MetaMask/metamask-module-template
-
Notifications
You must be signed in to change notification settings - Fork 15
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: Update CSS variables with new tokens #691
Merged
Merged
Changes from 7 commits
Commits
Show all changes
10 commits
Select commit
Hold shift + click to select a range
25bee1b
feat: updated css color variables
brianacnguyen f3f96f3
feat: updated migration doc with token changes
brianacnguyen 11b2131
fix: updated comments in css variables
brianacnguyen c9d5dad
refactor: updated spacing
brianacnguyen 91cc421
feat: added descriptions as comments to themed tokens
brianacnguyen 3635e45
fix: removed newline
brianacnguyen bf2ab80
fix: updated css format
brianacnguyen babc482
fix: updated lime800 color
brianacnguyen 339f7e4
fix: removed root from dark colors
brianacnguyen d52a01f
adding line breaks in migration doc
georgewrmarshall File filter
Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -34,43 +34,94 @@ This new path points to the `dist` directory, ensuring that you're importing the | |
## From version 3.0.0 to 4.0.0 | ||
|
||
### Brand Colors | ||
|
||
### Brand Colors Brand Evolution | ||
- Grey updates | ||
- grey000 added | ||
- grey025 added | ||
- grey050 added | ||
- grey030 removed | ||
- grey040 removed | ||
- grey750 removed | ||
- grey1000 added | ||
|
||
- Blue updates | ||
- blue000 no longer exist | ||
- blue000 removed | ||
- blue025 added | ||
- blue 050 added | ||
|
||
- Orange updates | ||
- orange000 no longer exist | ||
- orange 025 added | ||
- orange 050 added | ||
- blue050 added | ||
- blue400-15 added | ||
- blue500-10 added | ||
|
||
- Green updates | ||
- green000 no longer exist | ||
- green000 removed | ||
- green025 added | ||
- green 050 added | ||
- green050 added | ||
- green400-15 added | ||
- green500-10 added | ||
|
||
- Red updates | ||
- red000 no longer exist | ||
- red000 removed | ||
- red025 added | ||
- red050 added | ||
- red400-15 added | ||
- red500-10 added | ||
|
||
- Yellow updates | ||
- yellow000 no longer exist | ||
- yellow000 removed | ||
- yellow025 added | ||
- yellow050 added | ||
- yellow100-15 added | ||
- yellow400-15 added | ||
- yellow500-10 added | ||
- yellow700 added | ||
- yellow800 added | ||
- yellow900 added | ||
|
||
- Violet no longer exist | ||
- Orange updates | ||
- orange000 removed | ||
- orange025 added | ||
- orange050 added | ||
|
||
- Violet removed | ||
|
||
- Purple added | ||
|
||
- Lime added | ||
|
||
- White and black updates | ||
- white000 renamed to white | ||
- white010 removed | ||
- black000 renamed to black | ||
|
||
### Brand Colors Brand Evolution | ||
- Blue updates | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. These brand colors brand evolution updates are compared against the updated brand colors |
||
- blue300-15 added | ||
- blue400-15 removed | ||
|
||
- Green updates | ||
- green300-15 added | ||
- green400-15 removed | ||
|
||
- Red updates | ||
- red300-15 added | ||
- red400-15 removed | ||
|
||
### Themed Colors | ||
- overlay-inverse removed | ||
- primary-shadow removed | ||
- primary-disabled removed | ||
- secondary colors removed | ||
- error-shadow removed | ||
- error-disabled removed | ||
- warning-alternative removed | ||
- warning-disabled removed | ||
- success-alternative removed | ||
- success-disabled removed | ||
- info-alternative removed | ||
- info-disabled removed | ||
- network colors removed | ||
- shadow-primary added | ||
- shadow-error added | ||
- button colors removed | ||
|
||
## Step-by-step Migration Process | ||
|
||
1. **Step 1**: Description of step 1 | ||
|
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,83 +1,116 @@ | ||
/** | ||
* @deprecated these brand colors have been deprecated in favor of the new brand colors | ||
* Brand Colors | ||
* Do not use "--brand-colors" in your code | ||
* Instead use the "--color-" variables to ensure | ||
* theme compatible styles | ||
*/ | ||
|
||
:root { | ||
/* White and Black */ | ||
--brand-colors-white-white000: #ffffff; | ||
--brand-colors-white-white010: #fcfcfc; | ||
--brand-colors-black-black000: #000000; | ||
/* Grey */ | ||
--brand-colors-grey-grey030: #fafbfc; | ||
--brand-colors-grey-grey040: #f2f4f6; | ||
--brand-colors-grey-grey000: #ffffff; | ||
--brand-colors-grey-grey025: #fafbfc; | ||
--brand-colors-grey-grey050: #f2f4f6; | ||
--brand-colors-grey-grey100: #d6d9dc; | ||
--brand-colors-grey-grey200: #bbc0c5; | ||
--brand-colors-grey-grey300: #9fa6ae; | ||
--brand-colors-grey-grey400: #848c96; | ||
--brand-colors-grey-grey500: #6a737d; | ||
--brand-colors-grey-grey600: #535a61; | ||
--brand-colors-grey-grey700: #3b4046; | ||
--brand-colors-grey-grey750: #2e3339; | ||
--brand-colors-grey-grey800: #24272a; | ||
--brand-colors-grey-grey900: #141618; | ||
/* Blue */ | ||
--brand-colors-blue-blue000: #eaf6ff; | ||
--brand-colors-grey-grey1000: #000000; | ||
/* Blue - primary/info */ | ||
--brand-colors-blue-blue025: #eaf6ff; | ||
--brand-colors-blue-blue050: #eaf6ff; | ||
--brand-colors-blue-blue100: #a7d9fe; | ||
--brand-colors-blue-blue200: #75c4fd; | ||
--brand-colors-blue-blue300: #43aefc; | ||
--brand-colors-blue-blue400: #1098fc; | ||
--brand-colors-blue-blue400-15: #1098fc26; | ||
--brand-colors-blue-blue500: #0376c9; | ||
--brand-colors-blue-blue500-10: #0376c91a; | ||
--brand-colors-blue-blue600: #0260a4; | ||
--brand-colors-blue-blue700: #024272; | ||
--brand-colors-blue-blue800: #01253f; | ||
--brand-colors-blue-blue900: #00080d; | ||
/* Orange */ | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. reordered to match with json file |
||
--brand-colors-orange-orange000: #fef5ef; | ||
--brand-colors-orange-orange100: #fde2cf; | ||
--brand-colors-orange-orange200: #fbc49d; | ||
--brand-colors-orange-orange300: #faa66c; | ||
--brand-colors-orange-orange400: #f8883b; | ||
--brand-colors-orange-orange500: #f66a0a; | ||
--brand-colors-orange-orange600: #bf5208; | ||
--brand-colors-orange-orange700: #954005; | ||
--brand-colors-orange-orange800: #632b04; | ||
--brand-colors-orange-orange900: #321602; | ||
/* Green */ | ||
--brand-colors-green-green000: #f3fcf5; | ||
--brand-colors-green-green100: #d6ffdf; | ||
--brand-colors-green-green200: #afecbd; | ||
--brand-colors-green-green300: #86e29b; | ||
--brand-colors-green-green400: #5dd879; | ||
--brand-colors-green-green500: #28a745; | ||
--brand-colors-green-green600: #1c8234; | ||
/* Green - success */ | ||
--brand-colors-green-green025: #f3fcf5; | ||
--brand-colors-green-green050: #d6ffdf; | ||
--brand-colors-green-green100: #afecbd; | ||
--brand-colors-green-green200: #5dd879; | ||
--brand-colors-green-green300: #28a745; | ||
--brand-colors-green-green400: #28a745; | ||
--brand-colors-green-green400-15: #28a74526; | ||
--brand-colors-green-green500: #1c8234; | ||
--brand-colors-green-green500-10: #1c82341a; | ||
--brand-colors-green-green600: #145523; | ||
--brand-colors-green-green700: #145523; | ||
--brand-colors-green-green800: #0a2c12; | ||
--brand-colors-green-green900: #041007; | ||
/* Red */ | ||
--brand-colors-red-red000: #fcf2f3; | ||
/* Red - error */ | ||
--brand-colors-red-red025: #fcf2f3; | ||
--brand-colors-red-red050: #fcf2f3; | ||
--brand-colors-red-red100: #f7d5d8; | ||
--brand-colors-red-red200: #f1b9be; | ||
--brand-colors-red-red300: #e88f97; | ||
--brand-colors-red-red400: #e06470; | ||
--brand-colors-red-red400-15: #e0647026; | ||
--brand-colors-red-red500: #d73847; | ||
--brand-colors-red-red600: #b92534; | ||
--brand-colors-red-red700: #8e1d28; | ||
--brand-colors-red-red800: #64141c; | ||
--brand-colors-red-red500-10: #d738471a; | ||
--brand-colors-red-red600: #8e1d28; | ||
--brand-colors-red-red700: #64141c; | ||
--brand-colors-red-red800: #3a0c10; | ||
--brand-colors-red-red900: #3a0c10; | ||
/* Purple */ | ||
/* Yellow - warning */ | ||
--brand-colors-yellow-yellow025: #fefcde; | ||
--brand-colors-yellow-yellow050: #fff2c5; | ||
--brand-colors-yellow-yellow100: #ffdf70; | ||
--brand-colors-yellow-yellow100-15: #ffdf7026; | ||
--brand-colors-yellow-yellow200: #ffc70a; | ||
--brand-colors-yellow-yellow300: #f8883b; | ||
--brand-colors-yellow-yellow400: #f66a0a; | ||
--brand-colors-yellow-yellow400-15: #f66a0a26; | ||
--brand-colors-yellow-yellow500: #bf5208; | ||
--brand-colors-yellow-yellow500-10: #bf52081a; | ||
--brand-colors-yellow-yellow600: #954005; | ||
--brand-colors-yellow-yellow700: #632b04; | ||
--brand-colors-yellow-yellow800: #321602; | ||
--brand-colors-yellow-yellow900: #321602; | ||
/* Orange - brand */ | ||
--brand-colors-orange-orange025: #fef5ef; | ||
--brand-colors-orange-orange050: #fde2cf; | ||
--brand-colors-orange-orange100: #fbc49d; | ||
--brand-colors-orange-orange200: #faa66c; | ||
--brand-colors-orange-orange300: #f8883b; | ||
--brand-colors-orange-orange400: #f66a0a; | ||
--brand-colors-orange-orange500: #bf5208; | ||
--brand-colors-orange-orange600: #954005; | ||
--brand-colors-orange-orange700: #632b04; | ||
--brand-colors-orange-orange800: #321602; | ||
--brand-colors-orange-orange900: #321602; | ||
/* Purple - brand */ | ||
--brand-colors-purple-purple025: #fcf6ff; | ||
--brand-colors-purple-purple050: #fbf2ff; | ||
--brand-colors-purple-purple100: #efd2ff; | ||
--brand-colors-purple-purple200: #cfb5f0; | ||
--brand-colors-purple-purple300: #d27dff; | ||
--brand-colors-purple-purple400: #b864f5; | ||
--brand-colors-purple-purple500: #8b45b6; | ||
/* Violet */ | ||
--brand-colors-violet-violet300: #cfb5f0; | ||
/* Yellow */ | ||
--brand-colors-yellow-yellow000: #fffdf8; | ||
--brand-colors-yellow-yellow100: #fefcde; | ||
--brand-colors-yellow-yellow200: #fff2c5; | ||
--brand-colors-yellow-yellow300: #ffeaa3; | ||
--brand-colors-yellow-yellow400: #ffdf70; | ||
--brand-colors-yellow-yellow500: #ffd33d; | ||
--brand-colors-yellow-yellow600: #ffc70a; | ||
--brand-colors-purple-purple600: #6c2ab2; | ||
--brand-colors-purple-purple700: #4c1178; | ||
--brand-colors-purple-purple800: #32054d; | ||
--brand-colors-purple-purple900: #280a00; | ||
/* Lime - brand */ | ||
--brand-colors-lime-lime025: #effed9; | ||
--brand-colors-lime-lime050: #e3febd; | ||
--brand-colors-lime-lime100: #b8ef4a; | ||
--brand-colors-lime-lime200: #95ca45; | ||
--brand-colors-lime-lime300: #7ab040; | ||
--brand-colors-lime-lime400: #64993d; | ||
--brand-colors-lime-lime500: #457a39; | ||
--brand-colors-lime-lime600: #275b35; | ||
--brand-colors-lime-lime700: #093a31; | ||
--brand-colors-lime-lime800: #022321; | ||
--brand-colors-lime-lime900: #011515; | ||
} |
Oops, something went wrong.
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
In the final migration documentation, it would be beneficial to include specific code changes. Added
JS
Added
Removed
CSS
Added
Removed
This detail will aid engineers who are searching for removed tokens in the codebase. cc @garrettbear
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
do you want me to update this to reflect that?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
tho the colors will be the same for both changes, the difference is syntax. curious if theres a better way to list this instead of duplicating it