This repository was archived by the owner on Nov 26, 2024. It is now read-only.
Added sets of hover& pressed tokens. Also updated warning/success/inverses #586
Merged
brianacnguyen merged 23 commits intomainfrom Jan 24, 2024
Merged
Added sets of hover& pressed tokens. Also updated warning/success/inverses #586brianacnguyen merged 23 commits intomainfrom
brianacnguyen merged 23 commits intomainfrom
Conversation
Collaborator
…nd theme color values
This was referenced Jan 19, 2024
Closed
Collaborator
Collaborator
| "value": "#1E7E34", | ||
| "description": "(HEX: #1E7E34)", | ||
| "value": "#1C8234", | ||
| "description": "(HEX: #1C8234)", |
Comment on lines
+946
to
+963
| "value": "#FFFFFF", | ||
| "type": "color", | ||
| "description": "(white000: #FFFFFF) For elements used on top of primary/default. (Example: label of primary button, check in a checkbox)" | ||
| }, | ||
| "disabled": { | ||
| "value": "#0376C980", | ||
| "description": "(blue500: #0376C9 50% opacity) [DEPRECATED] primary.disabled should be used for all disabled primary action components such as buttons or links", | ||
| "type": "color" | ||
| }, | ||
| "default-hover": { | ||
| "value": "#0379CE", | ||
| "type": "color", | ||
| "description": "(#0379CE) For the \"hover\" state of interactive primary elements" | ||
| }, | ||
| "default-pressed": { | ||
| "value": "#036DB9", | ||
| "type": "color", | ||
| "description": "(#036DB9) For the \"pressed\" state of interactive primary elements" |
| "type": "color" | ||
| "value": "#141618", | ||
| "type": "color", | ||
| "description": "(grey900: #141618) For elements used on top of info/default. Used for text, icon or border" |
Collaborator
There was a problem hiding this comment.
See screenshot above for success inverse update
| it('js tokens for white000 matches figma tokens white000', () => { | ||
| expect(brandColors.white['000']).toStrictEqual( | ||
| designTokens.global.brandColors.white.white000.value.toLowerCase(), | ||
| designTokens.global.brandColors.white.white000.value, |
Collaborator
There was a problem hiding this comment.
Now that the brand color hex values are all uppercase there is no need for this toLowerCase method
src/js/brandColors/brandColors.ts
Outdated
| @@ -2,87 +2,87 @@ import { BrandColors } from './brandColors.types'; | |||
|
|
|||
| export const brandColors: BrandColors = { | |||
| white: { | |||
Collaborator
There was a problem hiding this comment.
Updating casing to uppercase to match with the rest of the javascript color values
| }, | ||
| primary: { | ||
| default: '#1098FC', | ||
| defaultHover: '#0092FA', |
Collaborator
There was a problem hiding this comment.
Matches figma and has css in js and css variable token
| primary: { | ||
| default: '#1098FC', | ||
| defaultHover: '#0092FA', | ||
| defaultPressed: '#54B6FC', |
Collaborator
There was a problem hiding this comment.
Matches figma and has css in js and css variable token
| alternative: '#43AEFC', | ||
| muted: '#1098FC26', | ||
| inverse: '#FCFCFC', | ||
| inverse: '#141618', |
Collaborator
There was a problem hiding this comment.
Matches figma and has css in js and css variable token
| error: { | ||
| default: '#D73847', | ||
| alternative: '#E06470', | ||
| defaultHover: '#FF4D58', |
Collaborator
There was a problem hiding this comment.
Matches figma and has css in js and css variable token
| default: '#D73847', | ||
| alternative: '#E06470', | ||
| defaultHover: '#FF4D58', | ||
| defaultPressed: '#F9868E', |
Collaborator
There was a problem hiding this comment.
Matches figma and has css in js and css variable token
Collaborator
Collaborator
| "description": "(#FFC60A): For warning with stronger contrast." | ||
| }, | ||
| "default-pressed": { | ||
| "value": "#FFEAA3D1", |
Collaborator
There was a problem hiding this comment.
Remove the opacity from the hex
Suggested change
| "value": "#FFEAA3D1", | |
| "value": "#FFEAA3", |
src/figma/tokens.json
Outdated
| "red400": { | ||
| "value": "#E06470", | ||
| "description": "(HEX: #E06470)", | ||
| "value": "#FF5263", |
Collaborator
There was a problem hiding this comment.
This change should be reverted
Suggested change
| "value": "#FF5263", | |
| "value": "#E06470", |
src/figma/tokens.json
Outdated
| "description": "(#FF5263) For high-level alert danger/critical elements. Used for text, background, icon or border" | ||
| }, | ||
| "alternative": { | ||
| "value": "#E06470", |
Collaborator
There was a problem hiding this comment.
Update to red300 #E88F97 value and description
Collaborator
brianacnguyen
approved these changes
Jan 24, 2024
HowardBraham
pushed a commit
to MetaMask/metamask-extension
that referenced
this pull request
Jan 29, 2024
## **Description** This PR updates the design-tokens package to `v1.13.0`, introducing accessibility enhancements to various color categories, including `warning/default`, `success/default`, and inverse colors. Additionally, it incorporates hover and pressed tokens. For a detailed overview of the color updates, please refer to [this PR in the design-tokens repository](MetaMask/design-tokens#586). The accessibility improvements ensure that: - Text using the `warning/default` color now meets WCAG AA color contrast requirements. - Text using the `success/default` color now meets WCAG AA color contrast requirements. - Text using the `primary/inverse`, `error/inverse`, `success/inverse`, and `info/inverse` colors in dark mode now meets WCAG AA color contrast requirements. These updates enhance the accessibility and user experience for vision impaired folks in the extension. ## **Related issues** Related: https://github.com/MetaMask/metamask-extension#workspaces/design-system-61e8a2ae77c3a60012e5003c/issues/zh/329 ## **Manual testing steps** The easiest way to review these accessibility updates is to check storybook 1. Go to the latest build of storybook in this PR 2. Search `HelpText` in the search bar 3. Go to the `Severity` story 4. Check the accessibility tab in storybook 5. See all accessibility tests for color contrast are passing 6. Go to the `Button` story 7. Change the mode to dark mode 8. To make sure it's picking up dark mode colors change something in the controls then use the revert button 9. Check the accessibility tab in storybook 10. See all accessibility tests for color contrast are passing
Merged
13 tasks
georgewrmarshall
added a commit
to MetaMask/metamask-mobile
that referenced
this pull request
Feb 5, 2024
) ## **Description** This PR upgrades the design-tokens package to `v2.0`. The major version update was required due to the node version upgrade from 16 to 18, a requirement discovered during the attempted update of the design tokens package to `1.13` (see [PR #8402](#8402)). In addition to the major version upgrade, this PR includes accessibility enhancements to various color categories from `1.13`. It also updates several TypeScript conventions, notably the preference for types over interfaces, and import paths aligning with the module template standards from shared libraries. For a comprehensive overview of the color updates, please refer to [this PR in the design-tokens repository](MetaMask/design-tokens#586). The accessibility improvements ensure that: - Text using the `warning/default` color now meets WCAG AA color contrast requirements. - Text using the `success/default` color now meets WCAG AA color contrast requirements. - Text using the `primary/inverse`, `error/inverse`, `success/inverse`, and `info/inverse` colors in dark mode now meets WCAG AA color contrast requirements. These updates enhance the accessibility and user experience for vision impaired folks in mobile. ## **Related issues** Related: https://github.com/MetaMask/metamask-extension#workspaces/design-system-61e8a2ae77c3a60012e5003c/issues/zh/329 ## **Manual testing steps** The easiest way to review these accessibility updates is to check storybook 1. Go to the root `index.js` 2. Uncomment storybook 3. Run storybook ## **Screenshots/Recordings** <!-- If applicable, add screenshots and/or recordings to visualize the before and after of your change. --> ### **Before** TBC ### **After** https://github.com/MetaMask/metamask-mobile/assets/14355083/66127055-6194-4632-bcc6-3968c38df5db https://github.com/MetaMask/metamask-mobile/assets/14355083/e8544dd8-980b-486e-aeba-b7f6286657d1 ## **Pre-merge author checklist** - [x] I’ve followed [MetaMask Coding Standards](https://github.com/MetaMask/metamask-mobile/blob/main/.github/guidelines/CODING_GUIDELINES.md). - [x] I've clearly explained what problem this PR is solving and how it is solved. - [x] I've linked related issues - [x] I've included manual testing steps - [x] I've included screenshots/recordings if applicable - [x] I’ve included tests if applicable - [x] I’ve documented my code using [JSDoc](https://jsdoc.app/) format if applicable - [x] I’ve applied the right labels on the PR (see [labeling guidelines](https://github.com/MetaMask/metamask-mobile/blob/main/.github/guidelines/LABELING_GUIDELINES.md)). Not required for external contributors. - [x] I’ve properly set the pull request status: - [x] In case it's not yet "ready for review", I've set it to "draft". - [ ] In case it's "ready for review", I've changed it from "draft" to "non-draft". ## **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.
This file contains hidden or 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
Sign up for free
to subscribe to this conversation on GitHub.
Already have an account?
Sign in.
4 participants
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.
Added
|| LIGHT & DARK THEMES ||
Added
.default-hover&.default-pressedcolors added forprimary,success,error,warning(but not forinfo)Edited
|| LIGHT THEME ||
success.default,success.muted,warning.default,warning.mutedto be more accessibleInversecolors from#FCFCFCto#FFFFFF(white000)|| DARK THEME ||
error.default,error.mutedfor accessibility.Inversecolors from#FCFCFCto#141618(grey900)Fixes: #580