Skip to content

Fix blue palette table link contrast - #150

Open
sean-camara wants to merge 1 commit into
nasa:mainfrom
sean-camara:fix/blue-palette-table-links
Open

Fix blue palette table link contrast#150
sean-camara wants to merge 1 commit into
nasa:mainfrom
sean-camara:fix/blue-palette-table-links

Conversation

@sean-camara

Copy link
Copy Markdown
Contributor

What this PR does

Keeps links legible when a light table is rendered inside the blue palette. Tables now own the link color variables appropriate to their fixed surface: dark text and underline colors for light tables, and the existing light treatment for dark tables.

The root cause was that links inherited white text from the surrounding blue palette even though the table itself intentionally renders on a white surface, producing 1:1 contrast.

Closes #146

Type of change

  • Bug fix (patch)
  • New feature or component (minor)
  • Breaking change (see Public API section below)
  • Documentation only
  • Tooling or CI (no effect on published output)

Checklist

  • npm run format:fix and npm run lint:scss:fix pass
  • npm run lint:js and npm run lint:md pass
  • Tested across all 6 palettes in Storybook
  • Tested across mobile, tablet, and desktop viewports
  • Automated a11y checks pass (npm test)
  • Storybook documentation updated (if component changed)

Public API and changesets

  • Ran npm run check:api-snapshot and reviewed the result
  • Changeset added with a patch bump
  • Bump level matches the semver rubric

Visual review

The new Components/Table/Links on blue palette regression story renders the interactive table on the blue palette and verifies that link text uses the table cell's dark foreground color. Existing palette accessibility stories continue to exercise all six palettes.

Notes for reviewers

Validation completed locally:

  • npm run build
  • npm test (241 tests)
  • npm run lint
  • npm run format:fix
  • npm run lint:scss:fix
  • npm run check:api-snapshot
  • npm run check:tokens

@sean-camara
sean-camara marked this pull request as ready for review July 23, 2026 15:04
@abbybowman
abbybowman self-requested a review July 23, 2026 15:13
@sean-camara

Copy link
Copy Markdown
Contributor Author

Hi @abbybowman, just following up on this PR when you have a chance. The code checks are passing, but the Chromatic visual regression check is currently blocked by a missing project token in the repository configuration. I’d appreciate your review, and please let me know if any changes are needed. Thank you!

@abbybowman abbybowman left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks again for this @sean-camara! A few changes requested below

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think we can skip this one. The existing PaletteA11y story already renders AllVariants (which includes interactiveTable with real links) across all six palettes including blue, so the surface your fix targets is already exercised there and will reflect this fix (see screenshot below from Chromatic). We have a limited Chromatic snapshot budget on the free plan so trying to leverage our existing Stories whenever possible, just like you did in #149!

Image

Comment on lines +373 to +376
--hds-palette-link-text: #{$hds-color-spacesuit-white};
--hds-palette-link-underline: #{$hds-color-carbon-30};
--hds-palette-link-arrow: #{$hds-color-carbon-30};

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'd drop these three lines. On the dark and black palettes the ancestor palette already supplies the correct dark link vars, and the table's dark surface (Carbon 90) is the same as the dark palette background, so this block re-declares values that are already right.

It also drifts slightly: --hds-palette-link-arrow is set to Carbon 30 here, but our dark scheme uses Carbon 40 (_palettes.scss:106). So this actually introduces a small inconsistency (see Chromatic screenshot below).

I think the base .usa-table block is all that's needed to fix the blue bug, but if you'd recommend keeping an explicit dark block for self-documentation, that would make sense to me too; let's just match the scheme exactly (arrow → Carbon 40).

Thank you, will look out for your updated PR and get it turned around more quickly, sorry this review took a bit -- greatly appreciate you jumping in to help fix these bugs!

Image

@@ -0,0 +1,5 @@
---
'@nasa/hds-core': patch

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I know main changed underneath you, so just a note to update this line to match our final NPM package name: '@nasa-hds/core': patch

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[Bug]: Table links on the blue palette render white text on a white table surface

2 participants