hackforla / hackforla/tdm-calculator
Audit the #939393 (gray and secondary.gray) in our design system
- Dominant language
- JavaScript
- Stars
- 68
- Forks
- 47
- Avg merge
- 3d 9h
- Merged PRs (30d)
- 25
Description
### Overview
We need to determine which "gray" color to use to ensure consistency between our design system and the site.
### Details
The border color for popovers is `#939393` on the dev site, but in our design system, 'Grayscale / Gray' is `#939393` with `#000000` (20% opacity) layered on top of it twice. The closest color to that is `#5E5E5E`.
Border color for popovers on the dev site
Grayscale/Gray in our design system
Decide whether we should use #939393 or #5E5E5E or both. Perhaps one functions better than the other, such as for accessibility/color contrast reasons. Or maybe we need both, in which case we need to add a new shade of gray to our design system.
### Action Items
- [x] Add to staging deck
- [x] Decide whether we should use #939393 or #5E5E5E or both.
- [x] Create a mockup using selected color.
- [x] Review with design team. Update if needed.
- [x] Review with product and dev. Update if needed based on feedback
- [ ] Update the [design system ](https://www.figma.com/design/nD9QK56Mzq7xNSaSUoeGx0/TDM-Calculator?node-id=3337-11981)
- [ ] Update the [style guide presentation](https://docs.google.com/presentation/d/1I4q35NL2WW2RpksIyawhHCd8qJnrjme1ZDNIBxu24hQ/edit?slide=id.g2e134a56948_3_13#slide=id.g2e134a56948_3_13rll)
- [ ] Ensure a Dev issue is created
- [ ] Close the issue
### Resources/Instructions
[Figma:Popovers](https://www.figma.com/design/nD9QK56Mzq7xNSaSUoeGx0/TDM-Calculator?node-id=4472-16924)
[Figma: Design System](https://www.figma.com/design/nD9QK56Mzq7xNSaSUoeGx0/TDM-Calculator?node-id=3337-11981)
[Style Guide Presentation: Colors](https://docs.google.com/presentation/d/1I4q35NL2WW2RpksIyawhHCd8qJnrjme1ZDNIBxu24hQ/edit?slide=id.g2e134a56948_3_13#slide=id.g2e134a56948_3_13rl)
How to view popovers on dev site:
1. [Login to TDM Dev site](https://tdm-dev.azurewebsites.net/login)
2. Click the 'Info' icon next to a label to display a popover
3. Use devtool to inspect element color
#### Slides
- [Staging Deck](https://docs.google.com/presentation/d/1crZ3IxqA4hAu3qzD7ns93Ieuqjwh6wyEtuX_46cP-fg)
- Release Deck
- [YYYY-MM-DD Release Deck, slide 2297]
Contributor guide
Research direction
Start with the linked Figma design system, Figma popover mockup, and style guide presentation, then review the completed decisions and selected color. Update the design system and style guide with the agreed shade, ensure a corresponding development issue is created, and confirm all remaining checklist items are complete.
Written by the indexing model from the issue text.
Assessment
- Domain
- design, documentation
- Issue type
- Documentation
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100