[Primitives v8] UI color docs #720
Conversation
langermank
temporarily deployed
to
github-pages
GitHub Actions
Inactive
langermank
temporarily deployed
to
github-pages
GitHub Actions
Inactive
langermank
temporarily deployed
to
github-pages
GitHub Actions
Inactive
langermank
requested review from
lukasoppermann,
simurai,
mperrotti and
tbenning
langermank
temporarily deployed
to
github-pages
GitHub Actions
Inactive
There was a problem hiding this comment.
This is looking great so far, I can tell you've put a lot of work into it. I left some ideas / suggestions 🚀
One more thing:
Could we make the iframes for the storybooks at foundations/primitives/color the same height as the tables inside of them? The double scroll feels like a pain IMO. Maybe we could do this for foreground background and border since those are probably most frequently referenced.
| <img | ||
| width="960" | ||
| alt="wip" | ||
| src="https://github.com/primer/react/assets/18661030/200cd7f0-91dd-4e4e-b574-26612bc191b8" | ||
| style="margin-bottom: 1rem; margin-top: 1rem;" | ||
| /> |
There was a problem hiding this comment.
Nitpick: I wonder if in this image, we could add the same purple text label that was used in the previous example and show Component/pattern
There was a problem hiding this comment.
Both examples are the same type, does this image still read that way? Great suggestion.
|
|
||
| import {Box} from '@primer/react' | ||
|
|
||
| ## Overview |
There was a problem hiding this comment.
Suggestion V2:
I wonder if we can have some sort of quick links to help users navigate and find helpful pages regarding color. If I instinctively click color and am looking for the reference, I might not think to look under primitives. Probably a V2, I just wonder if we've considered a pattern like this in our docs before to help with navigation / IA.
Maybe something like:
|
|
||
| <img | ||
| width="960" | ||
| alt="wip" |
There was a problem hiding this comment.
Is now the right time to start to update these wip alt texts?
|
|
||
| ### Assure adequate color contrast | ||
|
|
||
| Color contrast between text and its background must meet [required WCAG standards](https://www.w3.org/WAI/WCAG21/Understanding/contrast-minimum.html). |
There was a problem hiding this comment.
WCAG recommends to use WCAG22 standard. It's the same link but with 22 -> https://www.w3.org/WAI/WCAG22/Understanding/contrast-minimum.html.
Might be worth to ask Tetralogical for review as they are working on a11y documentation at the moment (cc @alliethu)
There was a problem hiding this comment.
Thanks! This is all copy/paste from the original color docs. Let's take the time to get it right even if we're just moving it to a new page 👍
langermank
temporarily deployed
to
github-pages
GitHub Actions
Inactive
langermank
temporarily deployed
to
github-pages
GitHub Actions
Inactive
langermank
temporarily deployed
to
github-pages
GitHub Actions
Inactive
langermank
temporarily deployed
to
github-pages
GitHub Actions
Inactive
✨ New color tokens, new docs! ✨
This PR adds a new folder for color docs, including the following pages:
The main goal for this PR is to ensure the
Overviewpage is sufficient for staff shipping Primitives v8. I want to make sure that Hubbers have access to docs as we introduce them to the new system. Please note theAccessibilitypage is a copy/paste from the old colors docs, and I plan to update it with more content and images later.I also plan to add a page dedicated to explaining Primer themes. Just need more time to work on that and we are staff shipping soon 😄
ALSO note I will add alt text to images once they are finalized and approved by you all!
Feedback
Looking for the following..