Box: Add new background colors #1867
Conversation
|
✔️ Deploy Preview for gestalt ready! 🔨 Explore the source changes: a49e586 🔍 Inspect the deploy log: https://app.netlify.com/sites/gestalt/deploys/61f85614a7982f00079cc68e 😎 Browse the preview: https://deploy-preview-1867--gestalt.netlify.app |
ayeshakmaz
force-pushed
the
ayesha/box-design-tokens
branch
from
c0895fe
to
656162e
Compare
| description={` | ||
| The following colors can be used to change the background of Box. | ||
|
|
||
| ⚠️ Note that the previous options ('red', 'white', 'lightGray', 'gray', 'darkGray', 'green', 'pine', 'olive', 'blue', 'navy', 'midnight', 'purple', 'orchid', 'eggplant', 'maroon', 'watermelon', 'orange') are still valid but will be deprecated soon. |
There was a problem hiding this comment.
What do you think about adding a section helping with this transition? A table or something that shows "prevColor --> newColor"
There was a problem hiding this comment.
We don't have this mapping yet (part of why I've split this into 2 PRs), but I'll definitely do that for the next PR to help show which are deprecated vs which have new color mappings
There was a problem hiding this comment.
nit: if it's easy, can we display "inverse" on a dark background?
| description={` | ||
| The following colors can be used to change the background of Box. | ||
|
|
||
| ⚠️ Note that the previous options ('red', 'white', 'lightGray', 'gray', 'darkGray', 'green', 'pine', 'olive', 'blue', 'navy', 'midnight', 'purple', 'orchid', 'eggplant', 'maroon', 'watermelon', 'orange') are still valid but will be deprecated soon. |
There was a problem hiding this comment.
nit: if it's easy, can we display "inverse" on a dark background?
|
Definitely going to pair with an announcement. For the docs, I'm going to leave as is, and once we deprecate the other colors, I'll build an internal component for the Box doc examples |
|
@ayeshakmaz Some of the new colors |
|
I can add a line about using these colors based on their intended purposes, given by the name. So only use |
ayeshakmaz
force-pushed
the
ayesha/box-design-tokens
branch
from
e029f3d
to
fdad0d3
Compare
Summary
What changed?
Update Box to support new design token based colors.
Why?
We're working on transitioning away from color names for Box backgrounds ("eggplant") and over to purpose-based design tokens (like "infoBase"). This PR adds the new options as possibilities and updates the documentation. A future PR + codemod will properly deprecate all the old values.
Links
Checklist