fix: index-theme system mappings bug [CSS-1114]

[castastrophe]

Description

Fixes a bug in the content of all component's dist/index-theme.css file.

Expected index-theme.css to include the component selectors with component-level custom properties mapped to the --system prefixed ones in order to allow a component to support various contexts.

Expected output example for the index-theme.css:

.spectrum-ActionButton {
 --spectrum-actionbutton-background-color-default: var(--system-action-button-background-color-default);
 --spectrum-actionbutton-background-color-hover: var(--system-action-button-background-color-hover);

Broken output:

.spectrum {
 --system-action-button-background-color-default: var(--spectrum-gray-50);
 --system-action-button-background-color-hover: var(--spectrum-gray-100);

How and where has this been tested?

Please tag yourself on the tests you've marked complete to confirm the tests have been run by someone other than the author.

Validation steps

• yarn compare: expect to see major changes to all components' index-theme.css files as documented above & below. (@cdransf)

Screenshots

Note: I did not run VRT on this PR because the index-theme.css file is not used.

To-do list

• I have read the contribution guidelines.
• I have updated relevant storybook stories and templates.
• I have tested these changes in Windows High Contrast mode.
• 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.
• ✨ This pull request is ready to merge. ✨

[changeset-bot]

🦋 Changeset detected

Latest commit: 815545f

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

This PR includes changesets to release 83 packages

Name	Type
@spectrum-css/accordion	Patch
@spectrum-css/actionbar	Patch
@spectrum-css/actionbutton	Patch
@spectrum-css/actiongroup	Patch
@spectrum-css/alertbanner	Patch
@spectrum-css/alertdialog	Patch
@spectrum-css/asset	Patch
@spectrum-css/assetcard	Patch
@spectrum-css/assetlist	Patch
@spectrum-css/avatar	Patch
@spectrum-css/badge	Patch
@spectrum-css/breadcrumb	Patch
@spectrum-css/button	Patch
@spectrum-css/buttongroup	Patch
@spectrum-css/calendar	Patch
@spectrum-css/card	Patch
@spectrum-css/checkbox	Patch
@spectrum-css/clearbutton	Patch
@spectrum-css/closebutton	Patch
@spectrum-css/coachindicator	Patch
@spectrum-css/coachmark	Patch
@spectrum-css/colorarea	Patch
@spectrum-css/colorhandle	Patch
@spectrum-css/colorloupe	Patch
@spectrum-css/colorslider	Patch
@spectrum-css/colorwheel	Patch
@spectrum-css/combobox	Patch
@spectrum-css/contextualhelp	Patch
@spectrum-css/datepicker	Patch
@spectrum-css/dial	Patch
@spectrum-css/dialog	Patch
@spectrum-css/divider	Patch
@spectrum-css/dropindicator	Patch
@spectrum-css/dropzone	Patch
@spectrum-css/fieldgroup	Patch
@spectrum-css/fieldlabel	Patch
@spectrum-css/floatingactionbutton	Patch
@spectrum-css/form	Patch
@spectrum-css/helptext	Patch
@spectrum-css/icon	Patch
@spectrum-css/illustratedmessage	Patch
@spectrum-css/infieldbutton	Patch
@spectrum-css/inlinealert	Patch
@spectrum-css/link	Patch
@spectrum-css/logicbutton	Patch
@spectrum-css/menu	Patch
@spectrum-css/meter	Patch
@spectrum-css/miller	Patch
@spectrum-css/modal	Patch
@spectrum-css/opacitycheckerboard	Patch
@spectrum-css/page	Patch
@spectrum-css/pagination	Patch
@spectrum-css/picker	Patch
@spectrum-css/pickerbutton	Patch
@spectrum-css/popover	Patch
@spectrum-css/progressbar	Patch
@spectrum-css/progresscircle	Patch
@spectrum-css/radio	Patch
@spectrum-css/rating	Patch
@spectrum-css/search	Patch
@spectrum-css/sidenav	Patch
@spectrum-css/slider	Patch
@spectrum-css/splitview	Patch
@spectrum-css/statuslight	Patch
@spectrum-css/steplist	Patch
@spectrum-css/stepper	Patch
@spectrum-css/swatch	Patch
@spectrum-css/swatchgroup	Patch
@spectrum-css/switch	Patch
@spectrum-css/table	Patch
@spectrum-css/tabs	Patch
@spectrum-css/tag	Patch
@spectrum-css/taggroup	Patch
@spectrum-css/textfield	Patch
@spectrum-css/thumbnail	Patch
@spectrum-css/toast	Patch
@spectrum-css/tooltip	Patch
@spectrum-css/tray	Patch
@spectrum-css/treeview	Patch
@spectrum-css/typography	Patch
@spectrum-css/underlay	Patch
@spectrum-css/well	Patch
@spectrum-css/preview	Patch

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

[castastrophe]

I snuck this fix in - it was a debugging comment I was using earlier and didn't mean for it to go into production.

[github-actions]

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

[github-actions]

File metrics

Summary

Total size: 3.22 MB^*

🎉 No changes detected in any packages

* Size determined by adding together the size of the main file for all packages in the library.
* Results are not gzipped or minified.
* An ASCII character in UTF-8 is 8 bits or 1 byte.