This repository has been archived by the owner on Nov 26, 2024. It is now read-only.
fix: updating brand color figma json #702
Merged
Conversation
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
georgewrmarshall
added
the
team-design-system
|
white and black will likely not work, but they will start working with this PR |
Comment on lines
+558
to
+572
| "white": { | ||
| "white": { | ||
| "value": "#ffffff", | ||
| "type": "color", | ||
| "parent": "Brand Colors/v1 - current", | ||
| "description": "" | ||
| } | ||
| }, | ||
| "black": { | ||
| "black": { | ||
| "value": "#000000", | ||
| "type": "color", | ||
| "parent": "Brand Colors/v1 - current", | ||
| "description": "" | ||
| } |
There was a problem hiding this comment.
I've updated this section so that the Figma colors will render in storybook but it's likely we should change it back an update the useJsonColor hook to handle this. @garrettbear would you be able to add the updates you made to handle these colors?
Suggested change
| "white": { | |
| "white": { | |
| "value": "#ffffff", | |
| "type": "color", | |
| "parent": "Brand Colors/v1 - current", | |
| "description": "" | |
| } | |
| }, | |
| "black": { | |
| "black": { | |
| "value": "#000000", | |
| "type": "color", | |
| "parent": "Brand Colors/v1 - current", | |
| "description": "" | |
| } | |
| "white": { | |
| "value": "#ffffff", | |
| "type": "color", | |
| "parent": "Brand Colors/v1 - current", | |
| "description": "" | |
| }, | |
| "black": { | |
| "value": "#000000", | |
| "type": "color", | |
| "parent": "Brand Colors/v1 - current", | |
| "description": "" | |
| } |
Comment on lines
558
to
568
| "white": { | ||
| "value": "#ffffff", | ||
| "type": "color", | ||
| "parent": "Brand Colors/v2- brand evo (preview)", | ||
| "description": "" | ||
| }, | ||
| "black": { | ||
| "value": "#000000", | ||
| "type": "color", | ||
| "parent": "Brand Colors/v2- brand evo (preview)", | ||
| "description": "" |
There was a problem hiding this comment.
This may break storybook unless useJsonColor hook is updated
| @@ -131,7 +131,7 @@ | |||
| "description": "For the stronger contrast primary semantic elements." | |||
| }, | |||
| "muted": { | |||
| "value": "{blue.400-15%}", | |||
| "value": "#43aefc26", | |||
| "value": "{yellow.100-15%}", | ||
| "value": "#ffdf7026", |
| "value": "{purple.400}", | ||
| "value": "{purple.300}", |
Comment on lines
-262
to
+268
| "value": "{blue.400}", | ||
| "value": "{blue.300}", | ||
| "type": "color", | ||
| "parent": "Theme Colors/Dark mode", | ||
| "description": "For informational read-only elements. Used for text, background, icon or border" | ||
| }, | ||
| "muted": { | ||
| "value": "{blue.400-15%}", | ||
| "value": "#43aefc26", |
Comment on lines
-230
to
+242
| "value": "{green.400}", | ||
| "value": "{green.300}", | ||
| "type": "color", | ||
| "parent": "Theme Colors/Dark mode", | ||
| "description": "For the positive semantic elements. Used for text, background, icon or border" | ||
| }, | ||
| "muted": { | ||
| "value": "{green.400-15%}", | ||
| "value": "#28a74526", | ||
| "type": "color", | ||
| "parent": "Theme Colors/Dark mode", | ||
| "description": "For the weakest contrast positive semantic backgrounds." | ||
| }, | ||
| "inverse": { | ||
| "value": "#141618", | ||
| "value": "{grey.900}", |
Comment on lines
-302
to
+308
| "value": "#1098fc66", | ||
| "value": "#43aefc33", | ||
| "type": "color", | ||
| "parent": "Theme Colors/Dark mode", | ||
| "description": "For primary drop shadow color." | ||
| }, | ||
| "error": { | ||
| "value": "#d73a4966", | ||
| "value": "#ff758466", |
Comment on lines
-223
to
-239
| "500-10%": { | ||
| "value": "#1c82341a", | ||
| "type": "color", | ||
| "parent": "Brand Colors/v1 - current", | ||
| "description": "" | ||
| }, | ||
| "025": { | ||
| "value": "#f3fcf5", | ||
| "type": "color", | ||
| "parent": "Brand Colors/v1 - current", | ||
| "description": "" | ||
| }, | ||
| "400-15%": { | ||
| "value": "#28a74526", | ||
| "type": "color", | ||
| "parent": "Brand Colors/v1 - current", | ||
| "description": "" |
Comment on lines
-148
to
-159
| }, | ||
| "500-10%": { | ||
| "value": "#0376c91a", | ||
| "type": "color", | ||
| "parent": "Brand Colors/v1 - current", | ||
| "description": "" | ||
| }, | ||
| "400-15%": { | ||
| "value": "#1098fc26", | ||
| "type": "color", | ||
| "parent": "Brand Colors/v1 - current", | ||
| "description": "" |
Comment on lines
-308
to
-319
| }, | ||
| "500-10%": { | ||
| "value": "#d738471a", | ||
| "type": "color", | ||
| "parent": "Brand Colors/v1 - current", | ||
| "description": "" | ||
| }, | ||
| "400-15%": { | ||
| "value": "#e0647026", | ||
| "type": "color", | ||
| "parent": "Brand Colors/v1 - current", | ||
| "description": "" |
Comment on lines
-388
to
-405
| }, | ||
| "500-10%": { | ||
| "value": "#bf52081a", | ||
| "type": "color", | ||
| "parent": "Brand Colors/v1 - current", | ||
| "description": "" | ||
| }, | ||
| "400-15%": { | ||
| "value": "#f66a0a26", | ||
| "type": "color", | ||
| "parent": "Brand Colors/v1 - current", | ||
| "description": "" | ||
| }, | ||
| "100-15%": { | ||
| "value": "#ffdf7026", | ||
| "type": "color", | ||
| "parent": "Brand Colors/v1 - current", | ||
| "description": "" |
| @@ -169,7 +169,7 @@ | |||
| "description": "For the stronger contrast error semantic elements." | |||
| }, | |||
| "muted": { | |||
| "value": "{red.400-15%}", | |||
| "value": "#e88f9726", | |||
| "value": "#d7384766", | ||
| "value": "#ca354266", |
| "value": "{blue.500-10%}", | ||
| "value": "#0376c91a", |
| "value": "{green.500-10%}", | ||
| "value": "#1c82341a", |
| "value": "{yellow.500-10%}", | ||
| "value": "#bf52081a", |
| "description": "" | ||
| } | ||
| } | ||
| } |
There was a problem hiding this comment.
Removing brand evolution JSON. Will put in a different branch
src/figma/darkTheme.json
Outdated
Comment on lines
16
to
40
| "value": "#2d3034", | ||
| "value": "#282b2e", | ||
| "type": "color", | ||
| "parent": "Theme Colors/Dark mode", | ||
| "description": "For \"hover\" states that use background-default." | ||
| }, | ||
| "default-pressed": { | ||
| "value": "#363b3f", | ||
| "value": "#36383b", | ||
| "type": "color", | ||
| "parent": "Theme Colors/Dark mode", | ||
| "description": "For \"pressed\" states that use background-alternative." | ||
| }, | ||
| "alternative-hover": { | ||
| "value": "#1e2124", | ||
| "value": "#191b1d", | ||
| "type": "color", | ||
| "parent": "Theme Colors/Dark mode", | ||
| "description": "For \"hover\" states that use background-alternative." | ||
| }, | ||
| "alternative-pressed": { | ||
| "value": "#272b2f", | ||
| "value": "#27292a", | ||
| "type": "color", | ||
| "parent": "Theme Colors/Dark mode", | ||
| "description": "For \"pressed\" states that use background-alternative." | ||
| }, | ||
| "hover": { | ||
| "value": "#ffffff0a", | ||
| "value": "#ffffff05", |
There was a problem hiding this comment.
Matches what the current colors are
design-tokens/src/figma/tokens.json
Lines 1259 to 1300 in e74e09f
georgewrmarshall
force-pushed
the
update/json
branch
from
e74e09f to
dbfcd4a
Compare
src/figma/lightTheme.json
Outdated
| "type": "color", | ||
| "parent": "Theme Colors/Light mode", | ||
| "description": "For \"pressed\" states that use background-alternative." | ||
| }, | ||
| "hover": { | ||
| "value": "#0000000a", | ||
| "value": "#00000005", |
There was a problem hiding this comment.
Updating to original colors in prod
design-tokens/src/figma/tokens.json
Lines 830 to 861 in 07764c9
| @@ -71,19 +71,19 @@ | |||
| }, | |||
| "icon": { | |||
| "default": { | |||
| "value": "{text.default}", | |||
| "value": "{grey.000}", | |||
There was a problem hiding this comment.
i think this change was a mistake @georgewrmarshall
| "type": "color", | ||
| "parent": "Theme Colors/Dark mode", | ||
| "description": "For default neutral icons" | ||
| }, | ||
| "alternative": { | ||
| "value": "{text.alternative}", | ||
| "value": "{grey.200}", |
There was a problem hiding this comment.
same here. i remember the designers want the icons to reference the text
I think either work for now. We can change it back to text in a future update once docs updates have been merged it contains the logic to handle those aliases #706 |
brianacnguyen
previously approved these changes
May 29, 2024
Comment on lines
+16
to
+34
| "value": "#313235", | ||
| "type": "color", | ||
| "parent": "Theme Colors/Dark mode", | ||
| "description": "For \"hover\" states that use background-default." | ||
| }, | ||
| "default-pressed": { | ||
| "value": "#363b3f", | ||
| "value": "#3f4145", | ||
| "type": "color", | ||
| "parent": "Theme Colors/Dark mode", | ||
| "description": "For \"pressed\" states that use background-alternative." | ||
| }, | ||
| "alternative-hover": { | ||
| "value": "#1e2124", | ||
| "value": "#1f2123", | ||
| "type": "color", | ||
| "parent": "Theme Colors/Dark mode", | ||
| "description": "For \"hover\" states that use background-alternative." | ||
| }, | ||
| "alternative-pressed": { | ||
| "value": "#272b2f", | ||
| "value": "#2e3033", |
There was a problem hiding this comment.
Matches with Figma
brianacnguyen
approved these changes
May 29, 2024
Sign up for free
to subscribe to this conversation on GitHub.
Already have an account?
Sign in.
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.
Description
This PR updates the Figma JSON to remove all opacity brand color values and adds white and black colors. The reason for this change is to ensure brand consistency and improve the design system by using solid colors for white and black instead of opacity variations.
Related issues
Fixes: N/A
Manual testing steps
Screenshots/Recordings
Before and After screenshots are listed in the code comments for easier review
Pre-merge author checklist
Pre-merge reviewer checklist