chore: align style use between docs and demo

[zeroedin]

What I did

1. Clean up how we are calling different stylesheets across the use cases. Ensure's tokens are included in demos and docs as a layer in the main stylesheets for both in a modular approach. Now a single source of truth for both use cases which is more cleanly organized and can be extended using layers.

Testing Instructions

1. View in localhost:8000 and doc demos localhost:8080 demos should now have the same styles across both environments.

Notes to Reviewers

[changeset-bot]

⚠️ No Changeset found

Latest commit: 2bdb25d

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

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

[netlify]

✅ Deploy Preview for red-hat-design-system ready!

Name	Link
🔨 Latest commit	2bdb25d
🔍 Latest deploy log	https://app.netlify.com/sites/red-hat-design-system/deploys/66e862b5b71d9700087e4e15
😎 Deploy Preview	https://deploy-preview-1862--red-hat-design-system.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[github-actions]

Size Change: 0 B

Total Size: 183 kB

ℹ️ View Unchanged

Filename	Size
./elements.js	463 B
./elements/rh-accordion/context.js	162 B
./elements/rh-accordion/rh-accordion-header.js	2.77 kB
./elements/rh-accordion/rh-accordion-panel.js	1.37 kB
./elements/rh-accordion/rh-accordion.js	3.17 kB
./elements/rh-alert/rh-alert.js	3.96 kB
./elements/rh-audio-player/rh-audio-player-about.js	1.85 kB
./elements/rh-audio-player/rh-audio-player-scrolling-text-overflow.js	1.53 kB
./elements/rh-audio-player/rh-audio-player-subscribe.js	1.43 kB
./elements/rh-audio-player/rh-audio-player.js	14.4 kB
./elements/rh-audio-player/rh-cue.js	2 kB
./elements/rh-audio-player/rh-transcript.js	2.97 kB
./elements/rh-avatar/random-pattern-controller.js	2.72 kB
./elements/rh-avatar/rh-avatar.js	2.9 kB
./elements/rh-back-to-top/rh-back-to-top.js	2.09 kB
./elements/rh-badge/rh-badge.js	1.1 kB
./elements/rh-blockquote/rh-blockquote.js	1.4 kB
./elements/rh-breadcrumb/rh-breadcrumb.js	1.5 kB
./elements/rh-button/rh-button.js	4.24 kB
./elements/rh-card/rh-card.js	3.49 kB
./elements/rh-code-block/prism.css.js	725 B
./elements/rh-code-block/prism.js	556 B
./elements/rh-code-block/rh-code-block.js	6.93 kB
./elements/rh-cta/rh-cta.js	3.9 kB
./elements/rh-dialog/rh-dialog.js	4.78 kB
./elements/rh-dialog/yt-api.js	617 B
./elements/rh-footer/rh-footer-block.js	766 B
./elements/rh-footer/rh-footer-copyright.js	362 B
./elements/rh-footer/rh-footer-links.js	1.17 kB
./elements/rh-footer/rh-footer-social-link.js	964 B
./elements/rh-footer/rh-footer-universal.js	4.05 kB
./elements/rh-footer/rh-footer.js	5.01 kB
./elements/rh-health-index/rh-health-index.js	2.35 kB
./elements/rh-icon/rh-icon.js	2.36 kB
./elements/rh-icon/ssr.js	181 B
./elements/rh-menu/rh-menu.js	1.21 kB
./elements/rh-navigation-secondary/rh-navigation-secondary-dropdown.js	2.47 kB
./elements/rh-navigation-secondary/rh-navigation-secondary-menu-section.js	1.35 kB
./elements/rh-navigation-secondary/rh-navigation-secondary-menu.js	1.75 kB
./elements/rh-navigation-secondary/rh-navigation-secondary-overlay.js	571 B
./elements/rh-navigation-secondary/rh-navigation-secondary.js	5.27 kB
./elements/rh-navigation-secondary/test/fixtures.js	769 B
./elements/rh-pagination/rh-pagination.js	5.46 kB
./elements/rh-site-status/rh-site-status.js	3.07 kB
./elements/rh-skip-link/rh-skip-link.js	1.24 kB
./elements/rh-spinner/rh-spinner.js	1.43 kB
./elements/rh-stat/rh-stat.js	2.2 kB
./elements/rh-subnav/rh-subnav.js	2.7 kB
./elements/rh-surface/rh-surface.js	1.11 kB
./elements/rh-surface/test/elements.js	423 B
./elements/rh-switch/rh-switch.js	3.14 kB
./elements/rh-table/rh-sort-button.js	1.49 kB
./elements/rh-table/rh-table.js	2.91 kB
./elements/rh-tabs/context.js	160 B
./elements/rh-tabs/rh-tab-panel.js	1.14 kB
./elements/rh-tabs/rh-tab.js	2.93 kB
./elements/rh-tabs/rh-tabs.js	3.68 kB
./elements/rh-tag/rh-tag.js	2.84 kB
./elements/rh-tile/rh-tile-group.js	1.81 kB
./elements/rh-tile/rh-tile.js	5.16 kB
./elements/rh-timestamp/rh-timestamp.js	983 B
./elements/rh-tooltip/rh-tooltip.js	2.24 kB
./elements/rh-video-embed/rh-video-embed.js	4.6 kB
./lib/context/color/consumer.js	1.19 kB
./lib/context/color/controller.js	920 B
./lib/context/color/provider.js	2.07 kB
./lib/context/event.js	583 B
./lib/context/headings/consumer.js	722 B
./lib/context/headings/controller.js	1.12 kB
./lib/context/headings/provider.js	1.24 kB
./lib/DirController.js	565 B
./lib/elements/rh-context-demo/rh-context-demo.js	1.28 kB
./lib/elements/rh-context-picker/rh-context-picker.js	2.22 kB
./lib/environment.js	4.09 kB
./lib/functions.js	175 B
./lib/I18nController.js	1.38 kB
./lib/ScreenSizeController.js	849 B
./react/rh-accordion/rh-accordion-header.js	199 B
./react/rh-accordion/rh-accordion-panel.js	185 B
./react/rh-accordion/rh-accordion.js	215 B
./react/rh-alert/rh-alert.js	184 B
./react/rh-audio-player/rh-audio-player-about.js	191 B
./react/rh-audio-player/rh-audio-player-scrolling-text-overflow.js	214 B
./react/rh-audio-player/rh-audio-player-subscribe.js	196 B
./react/rh-audio-player/rh-audio-player.js	183 B
./react/rh-audio-player/rh-cue.js	195 B
./react/rh-audio-player/rh-transcript.js	207 B
./react/rh-avatar/rh-avatar.js	173 B
./react/rh-back-to-top/rh-back-to-top.js	183 B
./react/rh-badge/rh-badge.js	174 B
./react/rh-blockquote/rh-blockquote.js	179 B
./react/rh-breadcrumb/rh-breadcrumb.js	179 B
./react/rh-button/rh-button.js	174 B
./react/rh-card/rh-card.js	172 B
./react/rh-code-block/rh-code-block.js	181 B
./react/rh-cta/rh-cta.js	170 B
./react/rh-dialog/rh-dialog.js	203 B
./react/rh-footer/rh-footer-block.js	184 B
./react/rh-footer/rh-footer-copyright.js	187 B
./react/rh-footer/rh-footer-links.js	185 B
./react/rh-footer/rh-footer-social-link.js	193 B
./react/rh-footer/rh-footer-universal.js	188 B
./react/rh-footer/rh-footer.js	174 B
./react/rh-health-index/rh-health-index.js	184 B
./react/rh-icon/rh-icon.js	202 B
./react/rh-menu/rh-menu.js	173 B
./react/rh-navigation-secondary/rh-navigation-secondary-dropdown.js	217 B
./react/rh-navigation-secondary/rh-navigation-secondary-menu-section.js	205 B
./react/rh-navigation-secondary/rh-navigation-secondary-menu.js	199 B
./react/rh-navigation-secondary/rh-navigation-secondary-overlay.js	201 B
./react/rh-navigation-secondary/rh-navigation-secondary.js	213 B
./react/rh-pagination/rh-pagination.js	178 B
./react/rh-site-status/rh-site-status.js	181 B
./react/rh-skip-link/rh-skip-link.js	181 B
./react/rh-spinner/rh-spinner.js	175 B
./react/rh-stat/rh-stat.js	171 B
./react/rh-subnav/rh-subnav.js	175 B
./react/rh-surface/rh-surface.js	175 B
./react/rh-switch/rh-switch.js	185 B
./react/rh-table/rh-sort-button.js	213 B
./react/rh-table/rh-table.js	174 B
./react/rh-tabs/rh-tab-panel.js	181 B
./react/rh-tabs/rh-tab.js	187 B
./react/rh-tabs/rh-tabs.js	174 B
./react/rh-tag/rh-tag.js	182 B
./react/rh-tile/rh-tile-group.js	183 B
./react/rh-tile/rh-tile.js	194 B
./react/rh-timestamp/rh-timestamp.js	176 B
./react/rh-tooltip/rh-tooltip.js	175 B
./react/rh-video-embed/rh-video-embed.js	227 B

_{compressed-size-action}

[bennypowers]

Im ok with global tokens style sheets in the demos, but nothing more

Users should be able to copy demo contents onto a blank page and get results

[zeroedin]

Users should be able to copy demo contents onto a blank page and get results

This changes nothing about that, this is more just house keeping on our end.

The main thing this does if anything is just provides tokens to typography.css which was already loaded in playground. However when fallbacks were removed we lost the values:

ie:

:where(h1, h2, h3, h4, h5, h6) {
  font-family: var(--rh-font-family-heading);
  line-height: var(--rh-line-height-heading);
}

font-family and line-height were no longer available

[zeroedin]

Im ok with global tokens style sheets in the demos, but nothing more

@bennypowers PTAL a look again, this last commit might have clarified stuff a bit more.

[zeroedin]

Just realized this the part where i run into the dev-server trying to call global.css from the node_modules and gets wrapped in js...

Update: was able to get around that issue by excluding that file in the litcssOptions in web-dev-server config.