hackforla / hackforla/tdm-calculator

Audit the #939393 (gray and secondary.gray) in our design system

Open
#2,297 10 comments 0 reactions 0 assignees View on GitHub
deck: staging not for stakeholder feature: style guide level: easy Participant type: Admin Participant Type: Security Admin priority: SHOULD HAVE role: ui/ux design size: 1pt
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

Image

Image

Grayscale/Gray in our design system

Image

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

Open the contributing 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.