Design tokens - create border radius tokens (HDS-3948)

[KristinLBradley]

📌 Summary

If merged, this PR adds design tokens for border radius values and updates relevant CSS code to make use of the tokens.

Code documentation: https://hds-website-git-hds-3948-create-border-tokens-hashicorp.vercel.app/foundations/border?tab=code

🛠️ Detailed description

• Added global design tokens for border radius sizes
• Replaced values within CSS to use the new tokens
• Added "code" documentation for the Helios website

🔗 External links

• Jira ticket: HDS-3948

---

👀 Component checklist

• Percy was checked for any visual regression
• A changelog entry was added via Changesets if needed (see templates here)

💬 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	Dec 16, 2024 10:10pm
hds-website	✅ Ready (Inspect)	Visit Preview	Dec 16, 2024 10:10pm

[didoo]

I have left a couple of comments (one may be a blocker, in the sense that requires some conversation with the designers).

Apart from that (and the need for two changeset entries, I think) everything else makes sense to me (I've also checked all the replacements in CSS and they match the old ones)

[didoo]

[issue/blocker]: comment for @jorytindall and @hashicorp/hds-design in general: this is the first case of t-shirt naming for our design tokens; what if we need to add a 4px border radius in the future? what would be the name?

should we use a different naming convention? maybe

--token-border-radius-300: 3px;
--token-border-radius-500: 5px;
--token-border-radius-600: 6px;
--token-border-radius-800: 8px;

or maybe simply:

--token-border-radius-3: 3px;
--token-border-radius-5: 5px;
--token-border-radius-6: 6px;
--token-border-radius-8: 8px;

(I know, the last one is controversial, but that's what has been done for the spacing variables in Figma)

[jorytindall]

Let me surface this to the broader team for discussion, it's a valid point. We discussed initially what to do here and I can't quite remember what the reasoning was.

[KristinLBradley]

Related Slack discussion thread: https://hashicorp.slack.com/archives/C025N5V4PFZ/p1734029185471359

[KristinLBradley]

@KristinLBradley I did a quick check in your branch (sorry I didn't do in your previous review) and there are some extra cases for which we may want to consider using the new tokens:

• there is a 6px border radius in design-system-power-select-overrides.scss
• there is a 4px border radius in the IconTile component; check with @jorytindall if this has been updated (it's not one of the tokenized ones)
• in the pagination the indicator/underline has a 2px border; probably it's OK to be one off, but maybe discuss with @jorytindall
• in the app-sidenav the indicator bar has a 2px as well, maybe discuss with @jorytindall
• the Card component has a $hds-card-container-border-radius: 6px; that probably should use a token
• the Code Block has a border-radius: 6px; that probably should use a token
• the CopySnippet has a border-radius: 5px; that probably should use a token
• the FormSelect[multiple] option has a border-radius: 3px; that probably should use a token

@didoo I crossed out updated ones above.

[KristinLBradley]

So anyway, other than the question on token naming (and whether to even have the tokens) does this PR look good (for now)?