chore: Refactor visual accent colors to use tokens

[at-susie]

Description

This PR refactors the visual accent styling for the Box and Badge components.

Changes

• Removed some unnecessary color options
• Updated visual accent colors and badge component's style

Related links, issue #, if available: n/a

How has this been tested?

Review checklist

The following items are to be evaluated by the author(s) and the reviewer(s).

Correctness

• Changes include appropriate documentation updates.
• Changes are backward-compatible if not indicated, see CONTRIBUTING.md.
• Changes do not include unsupported browser features, see CONTRIBUTING.md.
• Changes were manually tested for accessibility, see accessibility guidelines.

Security

• If the code handles URLs: all URLs are validated through the checkSafeUrl function.

Testing

• Changes are covered with new/existing unit tests?
• Changes are covered with new/existing integration tests?

---

By submitting this pull request, I confirm that you can use, modify, copy, and redistribute this contribution, under the terms of your choice.

[codecov]

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 97.62%. Comparing base (2b04fc3) to head (ac49215).

Additional details and impacted files

@@           Coverage Diff           @@
##             main    #4745   +/-   ##
=======================================
  Coverage   97.62%   97.62%           
=======================================
  Files         956      956           
  Lines       31004    31004           
  Branches    11410    11409    -1     
=======================================
  Hits        30269    30269           
- Misses        688      728   +40     
+ Partials       47        7   -40     

☔ View full report in Codecov by Harness.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

[georgylobko]

Why do we need to convert hex to rgba? We already have some tokens defined in hex, so why should these be different?

[at-susie]

In the visual-accent feature, we are introducing a quite a bit of semi-transparent colors that are all associated with primitive color palette like colorGreen500 with different opacity values. If we keep maintaining these only with the rgba it's error prone and hard to maintain. In think in the long term, other rgba values can also use the hexToRgba function for better maintainability.

[georgylobko]

it's error prone and hard to maintain

why?

[at-susie]

We design those styles using primitive color palette like colorGreen* while applying opacities. As soon as we convert them to rgba values, it becomes hard to understand which primitive color is associated with.
Here is an example:

• In design, we define styles like colorIndigo500 with 20% opacity
• If we convert it to rgba it's rgba(35, 42, 68, 0.2) - It's almost impossible to remember that is Indigo500

Maintaining such rgba values for many styles in the code base is not good idea in general.

[georgylobko]

It's almost impossible to remember that is Indigo500

I didn't get it

Maintaining such rgba values for many styles in the code base is not good idea in general.

But that’s exactly what you’ve done in this function - you’ve converted hex values to rgba.

[at-susie]

In other words, rgba is a hard coded value which we should not have, in the same reason why we should not style using hex code. The function is a layer that that converts primitive values to raw values.