Skip to content

Color foundations enhancements - Website docs #2335

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Merged
merged 17 commits into from
Aug 20, 2024
Merged

Color foundations enhancements - Website docs #2335

merged 17 commits into from
Aug 20, 2024

Conversation

majedelass
Copy link
Contributor

@majedelass majedelass commented Aug 13, 2024 •
edited by jira bot
Loading

📌 Summary

If merged, this PR will update the foundations color docs to a more comprehensive guide to using our color system.

🛠️ Detailed description

We expanded on how our colors are created, how we use them semantically, and how to be accessible with our color choices.

🔗 External links

Jira ticket: HDS-1360
Figma file: Link to images

💬 Please consider using conventional comments when reviewing this PR.

@vercel Vercel
Copy link

vercel bot commented Aug 13, 2024 •
edited
Loading

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name Status Preview Updated (UTC)
hds-showcase ✅ Ready (Inspect) Visit Preview Aug 19, 2024 7:05pm
hds-website ✅ Ready (Inspect) Visit Preview Aug 19, 2024 7:05pm

@hashibot-hds hashibot-hds added the docs-website Content updates to the documentation website label Aug 13, 2024
@majedelass majedelass requested review from a team August 13, 2024 15:05
@majedelass @andgen404
Update website/docs/foundations/colors/partials/guidelines/guidelines.md
1326281 
Co-authored-by: Andrew Gendel <124841193+andgen404@users.noreply.github.com>
jorytindall
jorytindall approved these changes Aug 13, 2024
View reviewed changes
Copy link
Contributor

@jorytindall jorytindall left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Left a couple of very small comments, but looking good. Much improved over what was currently here! 🎉

heatherlarsen
heatherlarsen requested changes Aug 14, 2024
View reviewed changes
Copy link
Contributor

@heatherlarsen heatherlarsen left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I took a more thorough look. There are several inconsistencies with how we've communicated about colors/tokens in the past, so I'd like to see the terminology corrected (added suggestions and references throughout that are blocking).

I also added a few brevity and grammar suggestions to help with readability. And I'm not sure where the spaces in the style naming conventions came from, but in other documentation, we use Body/200/Link, so it'd be good to make that consistent.

@majedelass @heatherlarsen @jorytindall
Apply suggestions from code review
20f155b 
Updating as per folk's suggestions.

Co-authored-by: Heather Larsen <hlarsen@hashicorp.com>
Co-authored-by: Jory Tindall <jory.tindall@hashicorp.com>
@majedelass
Updated semantic tokens and how they are created. Updated images and …
be829b5 
…removed border / primary from disabled colors section.
@majedelass @KristinLBradley
Apply suggestions from code review
533b9de 
Co-authored-by: Kristin Bradley <kristin.bradley@hashicorp.com>
KristinLBradley
KristinLBradley reviewed Aug 19, 2024
View reviewed changes
Copy link
Contributor

@KristinLBradley KristinLBradley left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looking good! Just added a few minor wording and punctuation suggestions.

majedelass and others added 2 commits August 19, 2024 14:25
@majedelass
Updated phrasing to match Kristin's suggestion
cc8a8cc
@majedelass @KristinLBradley
Apply suggestions from code review
866d75f 
Co-authored-by: Kristin Bradley <kristin.bradley@hashicorp.com>
LilithJames-HDS
LilithJames-HDS reviewed Aug 19, 2024
View reviewed changes
website/docs/foundations/colors/partials/guidelines/guidelines.md

We intend to be conformant with WCAG 2.2 Level AA requirements. In terms of color contrast, this means a luminosity ratio of 4.5:1 for normal sized text, and 3:1 for large text (commonly 22px). Further details are outlined on [WCAG’s understanding of Contrast (Minimum)](https://www.w3.org/WAI/WCAG22/Understanding/contrast-minimum.html). By default, semantic color tokens provide accessible color combinations out of the box with their associated naming conventions, while using palette colors requires manual validation, especially if you plan to mix and match. As an example, if a color has a semantic status name in it, then other associated status colors will be accessible.

It is important to note that we [do not recommend the usage of disabled elements](/patterns/disabled-patterns), especially isolating disabled colors out of context, as they are not accessible.
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Love that you snuck this in 😈 great placement and reminder for people

LilithJames-HDS
LilithJames-HDS reviewed Aug 19, 2024
View reviewed changes
website/docs/foundations/colors/partials/guidelines/guidelines.md

### Using palette colors

The Core Palette is available if semantic colors do not meet your needs. These styles are usage-agnostic, which can introduce challenges in consistently scaling designs but also allow more freedom and flexibility in color pairing.
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is 👩‍🍳 💋 (chef's kiss) — concise and clear without telling consumers not to use palette colours

@majedelass @LilithJames-HDS
Apply suggestions from code review
140b6f5 
Co-authored-by: LilithJames-HDS <lilith.james@hashicorp.com>
heatherlarsen
heatherlarsen approved these changes Aug 19, 2024
View reviewed changes
Copy link
Contributor

@heatherlarsen heatherlarsen left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks for the edits! 👍🏻

@majedelass majedelass merged commit fe8f874 into main Aug 20, 2024
12 checks passed
@majedelass majedelass deleted the webdoc-color-enhancements branch August 20, 2024 13:03
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@KristinLBradley KristinLBradley KristinLBradley left review comments

@jorytindall jorytindall jorytindall approved these changes

@shleewhite shleewhite shleewhite approved these changes

@heatherlarsen heatherlarsen heatherlarsen approved these changes

@LilithJames-HDS LilithJames-HDS LilithJames-HDS approved these changes

@andgen404 andgen404 Awaiting requested review from andgen404

Assignees
No one assigned
Labels
docs-website Content updates to the documentation website
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
8 participants
@majedelass @heatherlarsen @jorytindall @shleewhite @KristinLBradley @andgen404 @LilithJames-HDS @hashibot-hds