Skip to content

fix(table): add css token fallbacks - #3204

Open
adamjohnson wants to merge 2 commits into
fix/css-var-fallbacksfrom
fix/table/add-css-token-fallbacks
Open

fix(table): add css token fallbacks#3204
adamjohnson wants to merge 2 commits into
fix/css-var-fallbacksfrom
fix/table/add-css-token-fallbacks

Conversation

@adamjohnson

Copy link
Copy Markdown
Collaborator

What I did

  1. Added canonical light-dark() fallbacks for --rh-color-interactive-primary-default and --rh-color-interactive-primary-hover in rh-table-lightdom.css. Shadow CSS was already clean because <rh-table> is @themable.
  2. Closes [bug]: <rh-table> missing css var fallbacks #3180.

Testing Instructions

  1. Run npm run dev in the RHDS directory. The element demo server starts at http://localhost:8000.
  2. Open the Table demo.
  3. Switch Light, Dark, and System (or use the context picker). Confirm the table still has surface, text, border, and type as designed.
  4. Check demos that include table links the same way. Confirm default and hover link color still resolve:
  5. Run npm run lint in the RHDS directory.
  6. Open the CSS files changed in this PR in your editor. Ensure stylelint does not flag any errors (look for red squiggly lines).
  7. Ensure the changeset is accurate.
  8. Ensure the base branch targets fix/css-var-fallbacks.

Notes to Reviewers

Other elements still fail rhds/require-token-fallback, so Netlify will not publish a deploy preview for this PR. We will likely have to merge this PR with these errors. Don't get led astray by the errors. We will see these lint errors until we have tackled all of #3119.

@changeset-bot

changeset-bot Bot commented Sep 3, 2026

Copy link
Copy Markdown

🦋 Changeset detected

Latest commit: 46f9238

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

@adamjohnson adamjohnson moved this to In Progress 🟢 in Red Hat Design System Sep 3, 2026
@adamjohnson adamjohnson added this to the 2026/Q3 — Horsea release milestone Sep 3, 2026
@adamjohnson adamjohnson linked an issue Sep 3, 2026 that may be closed by this pull request
@github-actions

github-actions Bot commented Sep 3, 2026

Copy link
Copy Markdown
Contributor

Size Change: 0 B

Total Size: 323 kB

ℹ️ View Unchanged
Filename Size
elements.js 838 B
elements/rh-accordion/context.js 162 B
elements/rh-accordion/rh-accordion-header.js 3.33 kB
elements/rh-accordion/rh-accordion-panel.js 2.03 kB
elements/rh-accordion/rh-accordion.js 3.67 kB
elements/rh-alert/rh-alert.js 5.53 kB
elements/rh-announcement/rh-announcement.js 2.84 kB
elements/rh-audio-player/rh-audio-player-about.js 2.28 kB
elements/rh-audio-player/rh-audio-player-rate-stepper.js 2.07 kB
elements/rh-audio-player/rh-audio-player-scrolling-text-overflow.js 1.78 kB
elements/rh-audio-player/rh-audio-player-subscribe.js 1.9 kB
elements/rh-audio-player/rh-audio-player.js 13.2 kB
elements/rh-audio-player/rh-cue.js 2.32 kB
elements/rh-audio-player/rh-transcript.js 3.38 kB
elements/rh-avatar/random-pattern-controller.js 2.72 kB
elements/rh-avatar/rh-avatar.js 3.45 kB
elements/rh-back-to-top/rh-back-to-top.js 2.79 kB
elements/rh-badge/rh-badge.js 2.05 kB
elements/rh-blockquote/rh-blockquote.js 1.93 kB
elements/rh-breadcrumb/rh-breadcrumb.js 2.34 kB
elements/rh-button-group/rh-button-group.js 937 B
elements/rh-button/rh-button.js 4.15 kB
elements/rh-card/rh-card.js 3.46 kB
elements/rh-chip/context.js 165 B
elements/rh-chip/rh-chip-group.js 1.98 kB
elements/rh-chip/rh-chip.js 2.45 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 9.21 kB
elements/rh-cta/rh-cta.js 3.83 kB
elements/rh-dialog/rh-dialog.js 5.04 kB
elements/rh-dialog/yt-api.js 617 B
elements/rh-disclosure/rh-disclosure.js 3.41 kB
elements/rh-footer/rh-footer-block.js 1.11 kB
elements/rh-footer/rh-footer-copyright.js 649 B
elements/rh-footer/rh-footer-links.js 1.65 kB
elements/rh-footer/rh-footer-social-link.js 1.24 kB
elements/rh-footer/rh-footer-universal.js 5.69 kB
elements/rh-footer/rh-footer.js 7.44 kB
elements/rh-health-index/rh-health-index.js 2.48 kB
elements/rh-icon/rh-icon.js 2.98 kB
elements/rh-icon/ssr.js 181 B
elements/rh-jump-links/context.js 179 B
elements/rh-jump-links/rh-jump-link.js 2.05 kB
elements/rh-jump-links/rh-jump-links-list.js 1.67 kB
elements/rh-jump-links/rh-jump-links.js 3.01 kB
elements/rh-menu-dropdown/rh-menu-dropdown.js 4.61 kB
elements/rh-menu/rh-menu-item-group.js 941 B
elements/rh-menu/rh-menu-item.js 2.52 kB
elements/rh-menu/rh-menu.js 2.04 kB
elements/rh-navigation-link/rh-navigation-link.js 2.21 kB
elements/rh-navigation-primary/context.js 176 B
elements/rh-navigation-primary/rh-navigation-primary-item-menu.js 1.48 kB
elements/rh-navigation-primary/rh-navigation-primary-item.js 4.22 kB
elements/rh-navigation-primary/rh-navigation-primary.js 10.1 kB
elements/rh-navigation-secondary/rh-navigation-secondary-dropdown.js 3.15 kB
elements/rh-navigation-secondary/rh-navigation-secondary-menu-section.js 2.02 kB
elements/rh-navigation-secondary/rh-navigation-secondary-menu.js 2.01 kB
elements/rh-navigation-secondary/rh-navigation-secondary-overlay.js 828 B
elements/rh-navigation-secondary/rh-navigation-secondary.js 6.32 kB
elements/rh-navigation-secondary/test/fixtures.js 769 B
elements/rh-navigation-vertical/rh-navigation-vertical-list.js 2.62 kB
elements/rh-navigation-vertical/rh-navigation-vertical.js 1.65 kB
elements/rh-pagination/rh-pagination.js 6.51 kB
elements/rh-progress-stepper/context.js 187 B
elements/rh-progress-stepper/rh-progress-step.js 3.02 kB
elements/rh-progress-stepper/rh-progress-stepper.js 4.78 kB
elements/rh-readtime/rh-readtime.js 2.93 kB
elements/rh-scheme-dropdown/rh-scheme-dropdown.js 3.24 kB
elements/rh-scheme-toggle/rh-scheme-toggle.js 2.85 kB
elements/rh-select/rh-option-group.js 1.6 kB
elements/rh-select/rh-option.js 2.39 kB
elements/rh-select/rh-select.js 9.46 kB
elements/rh-site-status/rh-site-status.js 2.51 kB
elements/rh-skeleton/rh-skeleton.js 742 B
elements/rh-skip-link/rh-skip-link.js 1.42 kB
elements/rh-spinner/rh-spinner.js 1.71 kB
elements/rh-stat/rh-stat.js 2.71 kB
elements/rh-subnav/rh-subnav.js 3.26 kB
elements/rh-surface/rh-surface.js 865 B
elements/rh-surface/test/elements.js 763 B
elements/rh-switch/rh-switch.js 3.25 kB
elements/rh-table/rh-sort-button.js 1.88 kB
elements/rh-table/rh-table.js 3.27 kB
elements/rh-tabs/context.js 223 B
elements/rh-tabs/rh-tab-panel.js 1.19 kB
elements/rh-tabs/rh-tab.js 4 kB
elements/rh-tabs/rh-tabs.js 4.82 kB
elements/rh-tag/rh-tag.js 3.32 kB
elements/rh-tile/rh-tile-group.js 1.97 kB
elements/rh-tile/rh-tile.js 5.09 kB
elements/rh-timestamp/rh-timestamp.js 1.33 kB
elements/rh-tooltip/rh-tooltip.js 3.4 kB
elements/rh-video-embed/rh-video-embed.js 5.45 kB
lib/color-palettes.js 851 B
lib/context/headings/consumer.js 591 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/lib/color-palettes.js 97 B
react/lib/context/headings/consumer.js 103 B
react/lib/context/headings/provider.js 105 B
react/lib/elements/rh-context-demo/rh-context-demo.js 186 B
react/lib/elements/rh-context-picker/rh-context-picker.js 189 B
react/lib/functions.js 92 B
react/lib/I18nController.js 97 B
react/lib/ScreenSizeController.js 102 B
react/lib/ssr-controller.js 97 B
react/lib/themable.js 91 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 202 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 223 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-group/rh-button-group.js 184 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 180 B
react/rh-code-block/rh-code-block.js 193 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 195 B
react/rh-jump-links/rh-jump-link.js 183 B
react/rh-jump-links/rh-jump-links-list.js 189 B
react/rh-jump-links/rh-jump-links.js 182 B
react/rh-menu-dropdown/rh-menu-dropdown.js 198 B
react/rh-menu/rh-menu-item-group.js 190 B
react/rh-menu/rh-menu-item.js 181 B
react/rh-menu/rh-menu.js 182 B
react/rh-navigation-link/rh-navigation-link.js 186 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.js 189 B
react/rh-navigation-secondary/rh-navigation-secondary-dropdown.js 227 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-navigation-vertical/rh-navigation-vertical-list.js 209 B
react/rh-navigation-vertical/rh-navigation-vertical.js 189 B
react/rh-pagination/rh-pagination.js 178 B
react/rh-progress-stepper/rh-progress-step.js 196 B
react/rh-progress-stepper/rh-progress-stepper.js 186 B
react/rh-readtime/rh-readtime.js 175 B
react/rh-scheme-dropdown/rh-scheme-dropdown.js 203 B
react/rh-scheme-toggle/rh-scheme-toggle.js 200 B
react/rh-select/rh-option-group.js 187 B
react/rh-select/rh-option.js 177 B
react/rh-select/rh-select.js 204 B
react/rh-site-status/rh-site-status.js 181 B
react/rh-skeleton/rh-skeleton.js 176 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 200 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 184 B
react/rh-tag/rh-tag.js 171 B
react/rh-tile/rh-tile-group.js 183 B
react/rh-tile/rh-tile.js 181 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-adopt-directive.js 2.02 kB
uxdot/uxdot-best-practice.js 914 B
uxdot/uxdot-copy-button.js 1.34 kB
uxdot/uxdot-copy-permalink.js 1.18 kB
uxdot/uxdot-demo.js 2.95 kB
uxdot/uxdot-example.js 1.15 kB
uxdot/uxdot-feedback.js 1.06 kB
uxdot/uxdot-header.js 961 B
uxdot/uxdot-knob-attribute.js 3.75 kB
uxdot/uxdot-masthead.js 1.48 kB
uxdot/uxdot-pattern-ssr-controller-client.js 386 B
uxdot/uxdot-pattern-ssr-controller-server.js 1.71 kB
uxdot/uxdot-pattern-ssr-controller.js 213 B
uxdot/uxdot-pattern.js 2.4 kB
uxdot/uxdot-repo-status-checklist.js 1.46 kB
uxdot/uxdot-repo-status-list.js 1.33 kB
uxdot/uxdot-repo.js 867 B
uxdot/uxdot-sidenav.js 2.09 kB
uxdot/uxdot-spacer-tokens-table.js 2.67 kB
uxdot/uxdot-toc.js 2.18 kB

compressed-size-action

@github-actions

github-actions Bot commented Sep 3, 2026

Copy link
Copy Markdown
Contributor

Documentation Health

No relevant changes in this PR.

@adamjohnson
adamjohnson marked this pull request as ready for review September 3, 2026 19:00
@qodo-for-redhat-ux

Copy link
Copy Markdown

PR Summary by Qodo

Add theme-adaptive fallbacks for table link colors

🐞 Bug fix 🕐 Less than 10 minutes

Grey Divider

AI Description

• Adds theme-adaptive fallback chains for table link default and hover colors.
• Preserves link styling when semantic RHDS tokens are unavailable.
• Records the fix as an @rhds/elements patch release.
Diagram

graph TD
  A["Link color rules"] --> B{"Semantic token available?"} -->|Yes| C["Semantic color"]
  B -->|No| D["light-dark() fallback"] --> E{"Active color scheme?"} -->|Light| F["Light color chain"]
  E -->|Dark| G["Dark color chain"]
Loading
High-Level Assessment

The nested semantic token, scheme-specific token, and literal fallback chain is the appropriate approach because it preserves theming overrides while guaranteeing canonical colors. Direct hardcoded colors would be simpler but would bypass RHDS tokens and theme customization.

Files changed (2) +23 / -2

Bug fix (1) +18 / -2
rh-table-lightdom.cssAdd resilient table link color fallbacks +18/-2

Add resilient table link color fallbacks

• Adds canonical 'light-dark()' fallback chains for default and hovered table links. Each chain prefers the semantic token, then the scheme-specific token, and finally a literal canonical color.

elements/rh-table/rh-table-lightdom.css

Other (1) +5 / -0
table-token-fallbacks.mdRecord table token fallback patch +5/-0

Record table token fallback patch

• Adds a patch changeset for '@rhds/elements' documenting the new default fallbacks for RHDS tokens used by '<rh-table>'.

.changeset/table-token-fallbacks.md

@qodo-for-redhat-ux

Copy link
Copy Markdown

Code Review by Qodo

🐞 Bugs (0) 📘 Rule violations (0) 📎 Requirement gaps (0)

Grey Divider

Great, no issues found!

Qodo reviewed your code and found no material issues that require review

Grey Divider

Tip of the day
💡 Did you know, you can add REVIEW.md to your repo root and Qodo follows it on every PR

More tips ↗ | Customize Qodo ↗ | Qodo docs ↗

Grey Divider

Qodo Logo

@adamjohnson adamjohnson moved this from In Progress 🟢 to Review 🔍 in Red Hat Design System Sep 3, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

Status: Review 🔍

Development

Successfully merging this pull request may close these issues.

[bug]: <rh-table> missing css var fallbacks

1 participant