Adds color guideline documentation #989
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
…ge, and accessibility guidelines
cleans up imports on color usage page
standardized delivery of usages assets
✅ Deploy Preview for thumbprint ready!
To edit notification comments on pull requests, go to your Netlify site configuration. |
✅ Deploy Preview for thumbprint-gatsby canceled.
|
adds tab nav component for usage tabs adds alt tags for images moves reusable types into utils
adds high emphasis color to accessibility
adds atomicClasses parameter to H2 component for additional flexibiltiy adds rounded corners on color accessibility swatches improves table strucuturing
danoc
reviewed
Aug 27, 2024
| <img src={images.usage.src.src} width="375px" alt={images.usage.alt} /> | ||
| </div> | ||
| </ExampleBox> | ||
| {overviewTable({ list: usageContent })} |
There was a problem hiding this comment.
This works, but the more traditional way to do it with React is to do rename overviewTable to OverviewTable and do: <OverviewTable list={usageContent} />.
| } | ||
|
|
||
| function ColorSection({ values }: { values: Color['values'] }): JSX.Element { | ||
| const [active, setActive] = useState(false); |
There was a problem hiding this comment.
It's better to call these isActive and setIsActive so that we can tell based on the name that it will be a boolean.
| </div> | ||
| {/* tokens */} | ||
| <div className="flex flex-row col-gap2 row-gap2 flex-wrap mv3"> | ||
| {TokenPill({ |
There was a problem hiding this comment.
This is preferred:
<TokenPill title="Hex" value={...} />There was a problem hiding this comment.
🤦♂️ Not sure where my head was at there. Thank you!
changes function delivery to react components adjusts actice <> isActive naming for states
…not in local object removes 400 label from core colors
danoc
approved these changes
Aug 27, 2024
egoens
added a commit
that referenced
this pull request
Aug 28, 2024
egoens
added a commit
that referenced
this pull request
Aug 29, 2024
egoens
added a commit
that referenced
this pull request
Sep 4, 2024
* Revert "Revert "Adds color guideline documentation (#989)" (#990)" This reverts commit f744043. * movees color swatches to overview page removes unnecessary intro text on palette page sets order of palette colors from 100-600 sets open state to default color (400 levels and white) * updates image examples removes yellow 600 from a11y documentation since it's not used atm * updates labeling for secondary color per design feedback adjusts indigo color description to reflect secondary nature of color
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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.
Provide guidelines for how to apply color from a palette perspective (blue, purple, neutral, etc.), as well as from a themed approach (background, border, icon, and text).
Content for the palette and usage pages are pulled from Coda resources that serve as the source of truth
Palette: https://coda.io/d/_dbXyUQb2tJW/Color_susdp#_luYqP
Color usage: https://coda.io/d/_dbXyUQb2tJW/Color_susdp#_luuQl
Handoff doc
https://www.figma.com/design/LgYvyrjOdTGmdH2GJQa6CD/Color-usage-patterns?node-id=3-54&m=dev&focus-id=6-639
Overview
Palette
Usage / Background
Accessibility