Update Color page on Helios website (Foundations section) #2870
Conversation
This file contains hidden or 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
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
shleewhite
previously approved these changes
May 14, 2025
website/docs/foundations/colors/partials/guidelines/guidelines.md
Outdated
Show resolved
Hide resolved
website/docs/foundations/colors/partials/guidelines/guidelines.md
Outdated
Show resolved
Hide resolved
website/docs/foundations/colors/partials/guidelines/guidelines.md
Outdated
Show resolved
Hide resolved
website/docs/foundations/colors/partials/guidelines/guidelines.md
Outdated
Show resolved
Hide resolved
There was a problem hiding this comment.
Praise: Love this update to the diagram!
jorytindall
previously approved these changes
May 14, 2025
|
|
||
| Color-naming syntax and usage can vary depending on context and tooling. This overview will clarify what naming conventions are typically used and how they align with the HDS standards implemented in our libraries. | ||
| Color-naming syntax and usage can vary depending on context and tooling. Naming conventions within our system allow us to implement standards in our libraries. |
There was a problem hiding this comment.
[non-blocking suggestion] This second sentence read slightly weird to me, what do you think about this addition?
Suggested change
| Color-naming syntax and usage can vary depending on context and tooling. Naming conventions within our system allow us to implement standards in our libraries. | |
| Color-naming syntax and usage can vary depending on context and tooling. Usage-based naming conventions within our system allow us to implement consistent standards in our libraries. |
There was a problem hiding this comment.
Do you think calling them usage-based rather than semantic is confusing?
There was a problem hiding this comment.
Good point, maybe using "Semantic" instead of usage-based is better here.
website/docs/foundations/colors/partials/guidelines/guidelines.md
Outdated
Show resolved
Hide resolved
website/docs/foundations/colors/partials/guidelines/guidelines.md
Outdated
Show resolved
Hide resolved
|
|
||
| ## What are semantic colors? | ||
|
|
||
| The Semantic Palette helps ensure proper color usage across applications by embedding meaning directly into the name. | ||
| The Semantic Palette embeds meaning into color names, making it easier to select correct consistent values across applications. |
There was a problem hiding this comment.
[non-blocking suggestion]
Suggested change
| The Semantic Palette embeds meaning into color names, making it easier to select correct consistent values across applications. | |
| The Semantic Palette embeds meaning into color names, making it easier to select correct and consistent values across applications. |
website/docs/foundations/colors/partials/guidelines/guidelines.md
Outdated
Show resolved
Hide resolved
| The **element** and the **role** are referenced in the name to help make more informed color decisions. | ||
| ### How are semantic names created | ||
|
|
||
| In semantic token naming, the **element** and the **role** are defined to make color decisions easier and more consistent. HDS organizes semantic tokens into **element** categories with **roles** appended. |
There was a problem hiding this comment.
This is a great, concise breakdown! 👏
website/docs/foundations/colors/partials/guidelines/guidelines.md
Outdated
Show resolved
Hide resolved
website/docs/foundations/colors/partials/guidelines/guidelines.md
Outdated
Show resolved
Hide resolved
website/docs/foundations/colors/partials/guidelines/guidelines.md
Outdated
Show resolved
Hide resolved
LilithJames-HDS
dismissed stale reviews from jorytindall and KristinLBradley
via
089e8be
Co-authored-by: Jory Tindall <[email protected]>
Co-authored-by: Jory Tindall <[email protected]>
Co-authored-by: Lee White <[email protected]>
Co-authored-by: Lee White <[email protected]>
Co-authored-by: Lee White <[email protected]>
Adopting changes from review comments Co-authored-by: Jory Tindall <[email protected]> Co-authored-by: Lee White <[email protected]>
jorytindall
previously approved these changes
May 15, 2025
|
|
||
| Color-naming syntax and usage can vary depending on context and tooling. This overview will clarify what naming conventions are typically used and how they align with the HDS standards implemented in our libraries. | ||
| Color-naming syntax and usage can vary depending on context and tooling. Naming conventions within our system allow us to implement standards in our libraries. |
There was a problem hiding this comment.
Good point, maybe using "Semantic" instead of usage-based is better here.
…rp/design-system into lilith-colors-doc-revamp
LilithJames-HDS
requested review from
jorytindall,
shleewhite and
KristinLBradley
LilithJames-HDS
changed the title
jorytindall
approved these changes
May 16, 2025
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.
📌 Summary
If merged, this PR will update the Colors page of the Helios website to make the content more scannable and concise.
I've updated language around the use of color in Figma to briefly explain Variables, cut some content wording to hopefully make the sections more scannable, and updated the images in the Semantic color section to give clearer diagrams of our naming conventions and layers.
Direct link:
https://hds-website-git-lilith-colors-doc-revamp-hashicorp.vercel.app/foundations/colors
🔗 External links
Jira ticket: HDS-4421
👀 Component checklist
💬 Please consider using conventional comments when reviewing this PR.