What needs to be done?
Extend the USWDS dark-context palette bridge (added in #166) to cover .usa-dark-background, the third and last USWDS surface that paints its own dark background. #166 mapped .usa-hero__callout and .usa-section--dark onto the HDS dark palette (Carbon 90). .usa-dark-background is the remaining sibling and is currently left to the manual .hds-palette-* path.
Decide whether .usa-dark-background should be auto-bridged like the other two, and if so, onto which surface. Note it differs from the other two: it uses USWDS base-darker (which HDS themes to Carbon gray, not NASA red), so it does not have the red-block bug, but its headings still fall to un-themed USWDS accent-cool cyan and it does not use HDS's designed dark surface.
Also consider a single visible "USWDS surface bridges" reference story (or an embed in the Existing USWDS guide) that shows all three bridged contexts together (.usa-hero__callout, .usa-section--dark, .usa-dark-background), since that is a distinct reference from the full Landing Page template. Can build on the USWDSDarkSections.stories.js added in #166.
Why is this needed?
#166 bridges two of the three USWDS dark contexts; leaving the third unbridged is an inconsistency an adopter will hit (a .usa-dark-background block renders with cyan headings and no HDS dark surface). Deciding this deliberately closes the family. @suthat 's :where() pattern in base/_palettes.scss makes the code change a one-line selector addition, so the work is mostly the design call on the target surface.
Acceptance Criteria
What needs to be done?
Extend the USWDS dark-context palette bridge (added in #166) to cover
.usa-dark-background, the third and last USWDS surface that paints its own dark background. #166 mapped.usa-hero__calloutand.usa-section--darkonto the HDS dark palette (Carbon 90)..usa-dark-backgroundis the remaining sibling and is currently left to the manual.hds-palette-*path.Decide whether
.usa-dark-backgroundshould be auto-bridged like the other two, and if so, onto which surface. Note it differs from the other two: it uses USWDSbase-darker(which HDS themes to Carbon gray, not NASA red), so it does not have the red-block bug, but its headings still fall to un-themed USWDSaccent-coolcyan and it does not use HDS's designed dark surface.Also consider a single visible "USWDS surface bridges" reference story (or an embed in the Existing USWDS guide) that shows all three bridged contexts together (
.usa-hero__callout,.usa-section--dark,.usa-dark-background), since that is a distinct reference from the full Landing Page template. Can build on the USWDSDarkSections.stories.js added in #166.Why is this needed?
#166 bridges two of the three USWDS dark contexts; leaving the third unbridged is an inconsistency an adopter will hit (a
.usa-dark-backgroundblock renders with cyan headings and no HDS dark surface). Deciding this deliberately closes the family. @suthat 's:where()pattern inbase/_palettes.scssmakes the code change a one-line selector addition, so the work is mostly the design call on the target surface.Acceptance Criteria
.usa-dark-backgroundis auto-bridged and onto which surface (likely hds-palette-dark):where(...)selector insrc/scss/base/_palettes.scssand the print reset insrc/scss/base/_print.scss.usa-dark-background(if it becomes auto-bridged)