USWDS-Site - Styles: Match table background to the site background - #3254
Open
AKnassa wants to merge 1 commit into
Open
USWDS-Site - Styles: Match table background to the site background#3254AKnassa wants to merge 1 commit into
AKnassa wants to merge 1 commit into
Conversation
Borderless table headers rendered white (#fff) on the site's gray-1 (#fcfcfc) page background because the site never overrode USWDS's $theme-table-background-color. Set it to $site-background-color, following the existing in-page-nav pattern, so table cells blend with the page. Fixes uswds#2748
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Borderless table headers no longer render as white boxes on the site's soft gray background — tables now blend with the page.
Related issue
Closes #2748
Problem statement
The site's page background is gray-1 (
#fcfcfc), but borderless table headers kept USWDS's default white table background, so every borderless table header showed up as a white strip floating on the gray page.Solution
Added one theme setting,
$theme-table-background-color: $site-background-color;, tocss/settings/_uswds-theme-components.scss— the same pattern the file already uses for the in-page nav background. This is the fix the issue itself proposed.One thing reviewers should know: the token also drives plain table cells and stacked-variant cells, so those shift from white to gray-1 too (visually near-imperceptible, and it's what makes tables blend with the page). Striped rows, sorted-state colors, and header-variant backgrounds use separate tokens and are unchanged, and no text-contrast rules changed.
Testing and review
.usa-table--borderless thwent frombackground-color:#fffto#fcfcfc; a full before/after diff of the compiled stylesheet showed only table background colors changed.bundle exec rspecpasses (10 examples, 0 failures).