Hds::Icon - Add support for predefined "foreground" colors in@color argument

[didoo]

📌 Summary

While reviewing #2274, I realized that we don't support pre-defined "foreground" colors for the Hds::Icon, in the same way as we do for the Hds::Text component. This leads to this different way of applying a foreground color:

This PR addresses this difference (while the Hds::Icon has not yet been released, so it's just an extension of the existing API, without impact on our consumers).

Notice: I have tested the change in Cloud UI and it worked as expected

🛠️ Detailed description

In this PR I have:

• added support for predefined “foreground” colors to the @color argument
• updated “colors” section of the showcase page
• updated @color in "Component API" section
• updated “Color” sub-section in “How to use” section

Preview: https://hds-showcase-git-hds-icon-color-argument-hashicorp.vercel.app/components/icon#color

Notice: I haven't added a changelog to this PR because lives on top of the Hds::Icon ones, so the changelog is provided by them.

🔗 Links

• Jira ticket: https://hashicorp.atlassian.net/browse/HDS-3624

📸 Screenshots

---

👀 Component checklist

• Percy was checked for any visual regression

💬 Please consider using conventional comments when reviewing this PR.

[vercel]

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

Name	Status	Preview	Updated (UTC)
hds-showcase	✅ Ready (Inspect)	Visit Preview	Jul 30, 2024 8:51pm
hds-website	✅ Ready (Inspect)	Visit Preview	Jul 30, 2024 8:51pm

[zamoore]

Looks good to me. Added a minor grammar suggestion, but I'm glad that icon color is in alignment with the rest of the components in the system.

[shleewhite]

Nit: you could just do <Shw::Text::H3>Color inheritance</Shw::Text::H4>

[KristinLBradley]

Missed that the @tag was changed initially. If you want the visual style of the smaller H4 here for some reason then this is fine.

[didoo]

Nit: you could just do Shw::Text::H3Color inheritance</Shw::Text::H4>

<Shw::Text::H4 @tag="h3"> means render an <h3> tag with the visual style of a .shw-text-h4

[MelSumner]

(question): wouldn't we want all of these to be HdsColorValues anyway? Is there a need to have them specifically in IconColorValues? It seems reasonable that if these are our ColorValues we'd want them available for everywhere that we use these values. WDYT?

[didoo]

I thought about it, but I ended up keeping them separate for different reasons:

1. we may want to add also the "brand" colors for the icon (but not the text, I don't see use cases for that); at the moment thought is not clear how we would do it: have different brand colors, which ones would be the ones that could be used for an icon?
2. this would require to add a global types.ts file, under packages/components/src/components/hds; not a big deal but maybe something we want to consider a bit more

so my thinking is that we can always do it, it's not something for this specific PR