feat(tokens)!: Extract RGB color values into their own custom properties [CSS-383]

[Rajdeepc]

Description

To solve our problem of needing to decouple the rgb values from their opacities in order to utilize them in our CSS while also continuing to support the existing values, this PR adds a new postcss plugin called postcss-rgb-mapping.

This is a custom written plugin for this purpose but published separately: https://github.com/castastrophe/postcss-rgb-mapping

This plugin turns this:

.spectrum--lightest {
  --spectrum-seafoam-100: rgba(206, 247, 243);
  --spectrum-seafoam-200: rgba(170, 241, 234, 0.5);
}

Into this:

.spectrum--lightest {
  --spectrum-seafoam-100-rgb: 206, 247, 243;
  --spectrum-seafoam-100: rgba(var(--spectrum-seafoam-100-rgb));
  --spectrum-seafoam-200-rgb: 170, 241, 234;
  --spectrum-seafoam-200-opacity: 0.5;
  --spectrum-seafoam-200: rgba(var(--spectrum-seafoam-200-rgb), var(--spectrum-seafoam-200-opacity));
}

To maintain the existing codebase and add the rgb tokens, this parser separates out the rgb and opacity values and updates the old token to point to these new values. This approach maintains a single-source-of-truth while allowing for backwards compatibility.

To-do list

• If my change impacts other components, I have tested to make sure they don't break.
• If my change impacts documentation, I have updated the documentation accordingly.
• I have read the CONTRIBUTING document.
• This pull request is ready to merge.

References

• fastmod A possible option for shipping a tool to downstream users making it easier for them to make this update.

[github-actions]

🚀 Deployed on https://pr-1590--spectrum-css.netlify.app

[castastrophe]

@Rajdeepc @pfulton and @GarthDB, I've updated the excellent work Rajdeep did to match the solution you & I had discussed Garth. This version updates all rgb or rgba values to their raw formats (255, 255, 255 rather than rgb(255,255,255)) and shows how the CSS needs to be updated.

[pfulton]

oh my goodness, let's ship it!