chore: refactoring opacity tokens and removing and adding some colors#25158
chore: refactoring opacity tokens and removing and adding some colors#25158georgewrmarshall merged 7 commits intodevelopfrom
Conversation
|
CLA Signature Action: All authors have signed the CLA. You may need to manually re-run the blocking PR check if it doesn't pass in a few minutes. |
| // Temp CSS Variables | ||
| :root { | ||
| --opacity-disabled: 0.5; | ||
| } | ||
|
|
There was a problem hiding this comment.
Moved to opacity.scss as it's now used outside of the component-library components, so it makes sense to place it in the extension global styles folder: https://github.com/MetaMask/metamask-extension/pull/25158/files#diff-0bee63110d632972bcb15aeea3a018010055fb4c48040c989dfc7dbc329e4876
| infoDefault = 'info-default', | ||
| infoMuted = 'info-muted', | ||
| infoInverse = 'info-inverse', | ||
| infoDisabled = 'info-disabled', |
There was a problem hiding this comment.
Must have been a bad merge but infoDisabled no longer exists in the codebase
| // Temp CSS Variables | ||
| :root { | ||
| --opacity-disabled: 0.5; | ||
| } |
There was a problem hiding this comment.
Opacity token still work as expected after refactoring
| @import './utilities/fonts.scss'; | ||
| @import './utilities/pending-colors.scss'; | ||
| @import './utilities/colors.scss'; | ||
| @import './utilities/opacity.scss'; |
There was a problem hiding this comment.
Importing opacity stylesheet in index.css
| 'info-default': --color-info-default, | ||
| 'info-muted': --color-info-muted, | ||
| 'info-inverse': --color-info-inverse, | ||
| 'info-disabled': --color-info-disabled, |
There was a problem hiding this comment.
Must have been a bad merge info-disabled no longer exists in the codebase
| 'warning-muted': --color-warning-muted, | ||
| 'warning-inverse': --color-warning-inverse, | ||
| 'success-default': --color-success-default, | ||
| 'success-alternative': --color-success-alternative, |
There was a problem hiding this comment.
Must have been a bad merge success-alternative no longer exists in the codebase
| var(--color-info-muted) | ||
| var(--color-info-inverse) | ||
| var(--color-info-disabled) [DEPRECATED] | ||
| ``` |
There was a problem hiding this comment.
Updating docs to remove deprecated CSS variables. No instances of color-info-disabled remain.
| var(--color-overlay-alternative) | ||
| var(--color-overlay-inverse) |
There was a problem hiding this comment.
Un-deprecating overlay/inverse as there are use cases and adding overlay/alternative. See CSS variables present in the design tokens stylesheet in this branch
| var(--color-error-default-hover) | ||
| var(--color-error-default-pressed) |
There was a problem hiding this comment.
These CSS variables are present and allowed to be used. Updating the docs to reflect this.
| var(--color-warning-default-hover) | ||
| var(--color-warning-default-pressed) |
There was a problem hiding this comment.
These CSS variables are present and allowed to be used. Updating the docs to reflect this.
| var(--color-success-default-hover) | ||
| var(--color-success-default-pressed) |
There was a problem hiding this comment.
These CSS variables are present and allowed to be used. Updating the docs to reflect this.
Codecov ReportAll modified and coverable lines are covered by tests ✅
Additional details and impacted files@@ Coverage Diff @@
## develop #25158 +/- ##
===========================================
- Coverage 65.64% 65.64% -0.00%
===========================================
Files 1362 1362
Lines 54151 54150 -1
Branches 14074 14074
===========================================
- Hits 35546 35545 -1
Misses 18605 18605 ☔ View full report in Codecov by Sentry. |
Builds ready [e64b050]
Page Load Metrics (49 ± 5 ms)
Bundle size diffs [🚀 Bundle size reduced!]
|
Description
This pull request refactors the opacity token to be outside of the
component-libraryfolder, as it is used outside of the component library. Additionally, it removes some deprecated colors and re-adds missing overlay colors.Reason for the change:
The opacity token is utilized beyond the scope of the
component-library, so it needs to be accessible outside of this folder for better maintainability and usage consistency. Furthermore, removing deprecated colors and re-adding missing overlay colors ensures the codebase is clean and up-to-date with the latest design requirements.Related issues
Part of: #24916
Manual testing steps
disabledcontrol and check opacity token still workssuccess-alternative,infoDisabled, andinfo-disabledto ensure none remainScreenshots/Recordings
Before after screenshots in the code comments for easier review
Pre-merge author checklist
Pre-merge reviewer checklist