fix(card): allow light(est/er) and dark(est/er) color palettes

[adamjohnson]

What I did

1. In Clefairy, <rh-card> changed to only accept the following values for color-palette:
   • lightest
   • lighter
   • darker
   • darkest
2. Previously, card accepted all six color palettes (including light and dark).
3. This PR allows the card's color-palette attribute to accept all six color palette attributes.
   • Previously, if you put color-palette="dark", JS would automatically update it to darker, etc.
4. If a parent has any color palette, card will either be:
   1. var(--rh-color-surface-lightest, #ffffff) OR
   2. var(--rh-color-surface-darkest, #151515) (depending on the parents color scheme)
5. ...but if we have a color-palette attribute explcitly set on an <rh-card>, the background of the card will change to any one of the six background colors.
   • eg: <rh-card color-palette="light"> changes the background color of the card to "light" (#e0e0e0).
   • This is "Option 3" discussed in the thread on Slack.

Testing Instructions

1. Load up all the card demos in the DP, especially the following:
   • Card
   • Color Context
   • Promo
   • Promo Standard
2. Change the color palettes of each of these cards in the demos and make sure they match design specs.
3. If a card doesn't have a color-palette attribute, add one and make sure it behaves as expected.
4. Clone this PR locally, view the demos above via the dev server, and change the color scheme via the switcher. Ensure card is either lightest or darkest in all cases in this view (as color-palette is being inherited from a parent).
5. Review the recent slack messages about this topic (in #rhds channel and others).
6. Make sure these changes are aligned with previous and future RHDS goals.

Notes to Reviewers

If this is to go out in a patch, change the base branch to main.

[changeset-bot[bot]]

🦋 Changeset detected

Latest commit: b4a0712a7c6d0e155c97e4c77f1b82c7f85ceb6f

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

This PR includes changesets to release 1 package

Name	Type
@rhds/elements	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

[netlify[bot]]

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

Name	Link
🔨 Latest commit	b4a0712a7c6d0e155c97e4c77f1b82c7f85ceb6f
🔍 Latest deploy log	https://app.netlify.com/projects/red-hat-design-system/deploys/682cdc2f983da6000702962a
😎 Deploy Preview	https://deploy-preview-2329--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 project configuration.

[github-actions[bot]]

Size Change: -156 B (-0.07%)

Total Size: 234 kB

Filename	Size	Change
./elements.js	538 B	-3 B (-0.55%)
./elements/rh-card/rh-card.js	3.28 kB	-153 B (-4.46%)

ℹ️ View Unchanged

Filename	Size
./elements/rh-accordion/context.js	162 B
./elements/rh-accordion/rh-accordion-header.js	2.67 kB
./elements/rh-accordion/rh-accordion-panel.js	1.26 kB
./elements/rh-accordion/rh-accordion.js	3.32 kB
./elements/rh-alert/rh-alert.js	4.98 kB
./elements/rh-announcement/rh-announcement.js	2.12 kB
./elements/rh-audio-player/rh-audio-player-about.js	1.81 kB
./elements/rh-audio-player/rh-audio-player-rate-stepper.js	1.76 kB
./elements/rh-audio-player/rh-audio-player-scrolling-text-overflow.js	1.52 kB
./elements/rh-audio-player/rh-audio-player-subscribe.js	1.4 kB
./elements/rh-audio-player/rh-audio-player.js	13 kB
./elements/rh-audio-player/rh-cue.js	1.95 kB
./elements/rh-audio-player/rh-transcript.js	2.68 kB
./elements/rh-avatar/random-pattern-controller.js	2.72 kB
./elements/rh-avatar/rh-avatar.js	2.68 kB
./elements/rh-back-to-top/rh-back-to-top.js	1.96 kB
./elements/rh-badge/rh-badge.js	1.53 kB
./elements/rh-blockquote/rh-blockquote.js	1.37 kB
./elements/rh-breadcrumb/rh-breadcrumb.js	1.84 kB
./elements/rh-button/rh-button.js	3.29 kB
./elements/rh-chip/context.js	165 B
./elements/rh-chip/rh-chip-group.js	1.58 kB
./elements/rh-chip/rh-chip.js	2.06 kB
./elements/rh-code-block/prism.css.js	667 B
./elements/rh-code-block/prism.js	572 B
./elements/rh-code-block/rh-code-block.js	7.25 kB
./elements/rh-cta/rh-cta.js	3.96 kB
./elements/rh-dialog/rh-dialog.js	4.81 kB
./elements/rh-dialog/yt-api.js	617 B
./elements/rh-disclosure/rh-disclosure.js	2.09 kB
./elements/rh-footer/rh-footer-block.js	714 B
./elements/rh-footer/rh-footer-copyright.js	362 B
./elements/rh-footer/rh-footer-links.js	1.19 kB
./elements/rh-footer/rh-footer-social-link.js	1.15 kB
./elements/rh-footer/rh-footer-universal.js	3.96 kB
./elements/rh-footer/rh-footer.js	4.84 kB
./elements/rh-health-index/rh-health-index.js	2.4 kB
./elements/rh-icon/rh-icon.js	2.49 kB
./elements/rh-icon/ssr.js	181 B
./elements/rh-jump-links/context.js	179 B
./elements/rh-jump-links/rh-jump-link.js	1.46 kB
./elements/rh-jump-links/rh-jump-links-list.js	1.15 kB
./elements/rh-jump-links/rh-jump-links.js	2.35 kB
./elements/rh-menu/rh-menu.js	1.21 kB
./elements/rh-navigation-primary/context.js	176 B
./elements/rh-navigation-primary/rh-navigation-primary-item-menu.js	1.03 kB
./elements/rh-navigation-primary/rh-navigation-primary-item.js	3.4 kB
./elements/rh-navigation-primary/rh-navigation-primary-overlay.js	534 B
./elements/rh-navigation-primary/rh-navigation-primary.js	7.32 kB
./elements/rh-navigation-primary/test/fixtures.js	4.49 kB
./elements/rh-navigation-secondary/rh-navigation-secondary-dropdown.js	2.57 kB
./elements/rh-navigation-secondary/rh-navigation-secondary-menu-section.js	1.32 kB
./elements/rh-navigation-secondary/rh-navigation-secondary-menu.js	1.75 kB
./elements/rh-navigation-secondary/rh-navigation-secondary-overlay.js	562 B
./elements/rh-navigation-secondary/rh-navigation-secondary.js	5.26 kB
./elements/rh-navigation-secondary/test/fixtures.js	769 B
./elements/rh-pagination/rh-pagination.js	5.4 kB
./elements/rh-site-status/rh-site-status.js	2.38 kB
./elements/rh-skip-link/rh-skip-link.js	1.19 kB
./elements/rh-spinner/rh-spinner.js	1.29 kB
./elements/rh-stat/rh-stat.js	2.08 kB
./elements/rh-subnav/rh-subnav.js	2.44 kB
./elements/rh-surface/rh-surface.js	893 B
./elements/rh-surface/test/elements.js	763 B
./elements/rh-switch/rh-switch.js	2.89 kB
./elements/rh-table/rh-sort-button.js	1.4 kB
./elements/rh-table/rh-table.js	2.89 kB
./elements/rh-tabs/context.js	226 B
./elements/rh-tabs/rh-tab-panel.js	973 B
./elements/rh-tabs/rh-tab.js	2.95 kB
./elements/rh-tabs/rh-tabs.js	3.62 kB
./elements/rh-tag/rh-tag.js	2.66 kB
./elements/rh-tile/rh-tile-group.js	1.78 kB
./elements/rh-tile/rh-tile.js	4.89 kB
./elements/rh-timestamp/rh-timestamp.js	983 B
./elements/rh-tooltip/rh-tooltip.js	2.71 kB
./elements/rh-video-embed/rh-video-embed.js	4.6 kB
./lib/color-palettes.js	851 B
./lib/context/headings/consumer.js	593 B
./lib/context/headings/provider.js	1.2 kB
./lib/elements/rh-context-demo/rh-context-demo.js	1.16 kB
./lib/elements/rh-context-picker/rh-context-picker.js	2.18 kB
./lib/environment.js	194 B
./lib/functions.js	175 B
./lib/I18nController.js	1.37 kB
./lib/ScreenSizeController.js	876 B
./lib/ssr-controller.js	201 B
./lib/themable.js	549 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-announcement/rh-announcement.js	189 B
./react/rh-audio-player/rh-audio-player-about.js	191 B
./react/rh-audio-player/rh-audio-player-rate-stepper.js	213 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-chip/rh-chip-group.js	182 B
./react/rh-chip/rh-chip.js	187 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-disclosure/rh-disclosure.js	192 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-jump-links/rh-jump-link.js	196 B
./react/rh-jump-links/rh-jump-links-list.js	189 B
./react/rh-jump-links/rh-jump-links.js	195 B
./react/rh-menu/rh-menu.js	173 B
./react/rh-navigation-primary/rh-navigation-primary-item-menu.js	205 B
./react/rh-navigation-primary/rh-navigation-primary-item.js	210 B
./react/rh-navigation-primary/rh-navigation-primary-overlay.js	199 B
./react/rh-navigation-primary/rh-navigation-primary.js	189 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
./uxdot/ssr-failure-recoverable.js	581 B
./uxdot/uxdot-best-practice.js	812 B
./uxdot/uxdot-color-scheme-picker.js	1.56 kB
./uxdot/uxdot-copy-button.js	1.24 kB
./uxdot/uxdot-copy-permalink.js	1.1 kB
./uxdot/uxdot-demo.js	1.38 kB
./uxdot/uxdot-example.js	1.14 kB
./uxdot/uxdot-feedback.js	727 B
./uxdot/uxdot-header.js	1.02 kB
./uxdot/uxdot-masthead.js	1.25 kB
./uxdot/uxdot-pattern-ssr-controller-client.js	615 B
./uxdot/uxdot-pattern-ssr-controller-server.js	1.71 kB
./uxdot/uxdot-pattern-ssr-controller.js	213 B
./uxdot/uxdot-pattern.js	2.23 kB
./uxdot/uxdot-repo-status-checklist.js	1.16 kB
./uxdot/uxdot-repo-status-list.js	1.07 kB
./uxdot/uxdot-repo-status-table.js	782 B
./uxdot/uxdot-repo.js	1.17 kB
./uxdot/uxdot-search.js	2.39 kB
./uxdot/uxdot-sidenav.js	2.69 kB
./uxdot/uxdot-spacer-tokens-table.js	2.46 kB
./uxdot/uxdot-toc.js	1.8 kB

_{compressed-size-action}

[adamjohnson]

Adding a note here (mostly for myself). As discussed in office hours, look into moving the isPromo and isStandardPromo variables inside the render method. Since they are not referenced outside of the render() method, there's no reason to expose them elsewhere.