Document new functional color system #225
Conversation
|
This pull request is being automatically deployed with Vercel (learn more). 🔍 Inspect: https://vercel.com/primer/primitives/9KBVT1DzdWSTYjqhXvt6fQdZfr43 |
|
docs/src/components/swatch-grid.tsx
Outdated
| {variant === 'shadow' && <ShadowPreview name={name} value={value} />} | ||
| {variant === 'default' && <DefaultPreview name={name} value={value} />} | ||
| <Box sx={{fontFamily: 'mono', fontSize: 1, mt: 2}}>{name}</Box> | ||
| <Box sx={{fontFamily: 'mono', fontSize: 0, color: 'text.gray'}}>{`--${getFullName( |
There was a problem hiding this comment.
I wonder if we should wrap this in var(--color-fg-default) to make it more clear it's css? So it would look like this.
There was a problem hiding this comment.
Sounds good to me 👍
|
|
||
| Use for Sponsors-related interfaces. | ||
|
|
||
| <SwatchGrid names={Object.keys(flatten(colors.light)).filter(key => key.split('.')[0] === 'sponsors')} /> |
Problem
The Primer Primitives documentation site does not include clear documentation for our functional color system.
Solution
This PR adds documentation for the new functional color system (added in this PR)
Before
After
CleanShot.2021-09-03.at.13.40.06.mp4