Allow to keep some tokens in output as references

[lukasoppermann]

Summary

This PR makes changes to the way references are used in the css platform. Now, all referenced tokens that are in the output will be used as references, while base tokens that are not in the output will be converted to hex values.

Impact

This work enables a lot of use cases related to customization including.
In short, this update allows us to change design tokens (e.g. colors, text sizes, contrast, etc.) in the browser (e.g. user settings) that will propagate through all of github.

For example:

• A user could define the contrast they want for border colors in the settings
• A user could choose a specific color for e.g. success states

[changeset-bot]

🦋 Changeset detected

Latest commit: 31aed64

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
@primer/primitives	Minor

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[github-actions]

Design Token Diff (CSS)

The message is too long to be displayed here. For more details, please check the job summary.

[lukasoppermann]

Current bug:

Style dictionaries outputReferencesTransformed function does not work with object tokens (composite tokens) as far as I can see.

The output for shadows now has a color value that is: {color.token.reference} [2 digits of hex8 for alpha value] since this this not a valid color, the shadow is broken:

    --shadow-floating-xlarge: 0px 0px 0px 1px #d1d9e0, 
       0px 56px 112px 0px var(--base-color-neutral-12) 52; /* <- this 52 is the problem */

I am currently in contact with the folks from Style Dictionary to figure this out.

[github-actions]

Design Token Diff (StyleLint)

The message is too long to be displayed here. For more details, please check the job summary.