chore(colors): update color palettes #2015
Conversation
|
✅ Deploy Preview for stacks ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
✅ Deploy Preview for stacks-svelte ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
| // | ||
| // tl;dr: don't put inline after values in this file | ||
|
|
||
| // TODO SPARK update default values for white and black sets |
There was a problem hiding this comment.
@CGuindon currently we have black and white colors with no stop (used like bg-black for example. What should those values be?
Here's what they are now for reference:
- white
- light:
hsl(0, 0%, 100%) - dark:
hsl(210, 3%, 15%) - light HC:
hsl(0, 0%, 100%) - dark HC:
hsl(0, 0%, 0%)
- light:
- black
- light:
hsl(0, 0%, 0%) - dark:
hsl(0, 0%, 100%) - light HC:
hsl(0, 0%, 0%) - dark HC:
hsl(0, 0%, 100%)
- light:
There was a problem hiding this comment.
I'm assuming we can keep them all the same expect for the White > dark which looks custom.
I think that must be our background color when in dark mode? It's not a pure black background (like our pure white background in black). That value is hsl(0, 0%, 8%)
There was a problem hiding this comment.
Note to reviewers: This file is where the vast majority of changes have happened.
|
|
||
| // highlight | ||
| // TODO consult with design to potentially map static colors to new colors variables | ||
| // TODO SHINE request colors for use in code blocks (or verify these can be used for now) |
There was a problem hiding this comment.
@CGuindon These highlight sets are used for syntax-highlighted code (see Code blocks). Do we expect to change these colors now or should we keep them as-is for the moment?
There was a problem hiding this comment.
@dancormier These colors have their own custom hex/hsl code associations? I would keep the same
| } | ||
|
|
||
| // translucent utility colors (HC set represents both light and dark HC modes) | ||
| // TODO SHINE remove once they're no longer used (probably once focus ring is updated -- currently used ) |
There was a problem hiding this comment.
@CGuindon we have these translucent colors which are used as focus rings (and around the stepped variant of the progress bar). Can you remind me of the plan for focus rings?
If we can make them non-translucent across the board (as they currently are on buttons), I think we can get rid of these sets.
There was a problem hiding this comment.
@dancormier Yes our plan would be to transition everything from translucent to use actual color stops. So for that stepped progress bar, we'd use a solid blue-100 on the outer ring instead of something with opacity (if I understood that correctly). Focus-rings should use a solid color (like buttons). Anything with a translucent style (like that stepped progress bar will get removed once it gets redesigned). We removed it from the activity indicator so I see this no longer being part of our visual language moving forward.
Are you able to get a list of all the translucent places? Rule of thumb re-mapping would be to use the 100 stop variant instead for now until we redesign that component altogether.
2 participants
SPARK-49
Deploy preview
This PR updates Stacks to use the new SHINE color palettes.
TODO
cc @leileitun3