Table palette-aware backgrounds and colors

[abbybowman]

Feature area

Color scheme palettes (light, midtone, dark variants)

Describe the idea

HDS tables currently use a fixed-surface model: white background on light palettes (white, light, midtone) and Carbon 90 background on dark palettes (dark, blue). This was a deliberate Phase 1 decision to ship something that works on the two surfaces Figma specifies (white and Carbon 90), but it means tables don't match their surrounding palette background on 3 of 5 potential palettes.

This affects multiple table colors, not just sorted column tints:

Element	White palette	Light palette (Carbon 05)	Midtone (Carbon 20)
Table body bg	#FFFFFF ✅	#FFFFFF on #F6F6F6 ⚠️	#FFFFFF on #D1D1D1 ⚠️
Sorted even row	#F8FAFE ✅	Lighter than page ⚠️	Much lighter ⚠️
Sorted odd row	#F2F6FE ✅	Lighter than page ⚠️	Much lighter ⚠️
Header bg	#E3E3E3 ✅	Darker than page ✅	Lighter than page ⚠️

Element	Dark palette	Blue palette (NASA Blue)	Black (Carbon Black)
Table body bg	Carbon 90 ✅	Carbon 90 on Blue Shade ⚠️	N/A (palette for header/footer only)
Sorted even row	#252528 ✅	Untested on Blue Shade ⚠️	N/A (palette for header/footer only)
Header bg	Carbon 80 ✅	Carbon 80 on Blue Shade ⚠️	N/A (palette for header/footer only)

The core question for creative director review:

1. Is the fixed-surface model acceptable? Tables as self-contained containers (like cards) with their own background, regardless of palette --- creating a visible boundary between table and page.
2. If not, what are the correct table colors for each palette? Figma only specifies white and Carbon 90 surfaces. We need confirmed values for light, midtone, blue, and black palettes.
3. Which palettes need the most attention? Midtone and blue are the farthest from Figma's white/dark specs and will likely need the most adjustment.

The dark palette variants use the same tint approach as light --- semi-transparent white overlays resolved to hex against Carbon 90. If the table background changes for blue or black palettes, these tints would need recalculation too.

Current shipped approach is Option 1 (fixed surfaces). Options for Phase 2:

1. Keep fixed surfaces --- tables are self-contained containers
2. Palette-aware surfaces --- compute all table colors against each
   palette's actual background
3. Hybrid --- use palette background for the table body but keep fixed header/sorted tints (simplest change, may still look off)

Use case / user story

As a developer building pages across all six HDS palettes, I want tables to look intentional on every background so that users don't see jarring white or dark rectangles that break the visual flow of the page. This is most noticeable on the midtone palette (where a white table is very prominent against Carbon 20) and the blue palette (where a Carbon 90 table sits on NASA Blue Shade).

[abbybowman]

Resolved — keeping fixed table backgrounds across all palettes:

Light surface (white bg, Carbon 10 header): white, light, midtone, blue palettes
Dark surface (Carbon 90 bg, Carbon 80 header): dark, black palettes

Changes:

• _hds-components.scss §16.5: Removed [class*='hds-palette-blue'] from dark table selector — blue palette now uses the light table variant (white surface inside blue section)
• DESIGN.md: Table surface model updated to reflect blue palette using light variant

Palette-aware table backgrounds (where the table surface inherits the exact palette background color) remain deferred to Phase 2.

Sorted column tint contrast on non-white surfaces (Carbon 05 light palette, midtone) is a known minor issue — the even-row tint (#F8FAFE) can be lighter than the page background. Deferred to Phase 2 alongside palette-aware backgrounds.

Creative director approved 2026-03-27.

[abbybowman]

Shipped with 0.6.0