v0.7.1

[abbybowman]

This will be the first published release of HDS Core. It introduces a new build system, a three-bundle CSS architecture, and significant improvements to component theming and accessibility. Note there are breaking changes from the previous version (v0.6.0).

Highlights

New build system. Replaced Gulp + @uswds/compile with native Dart Sass + PostCSS. The USWDS gulp ecosystem depends on the deprecated Dart Sass Legacy JS API. This migration puts HDS Core on a modern, sustainable compilation pipeline.

Three-bundle architecture. HDS Core now ships three CSS bundles instead of one:

• hds.css - selective USWDS components + all HDS theming (279 KB / 27 KB gzipped)
• hds-uswds.css - remaining USWDS components and utilities (696 KB / 74 KB gzipped)
• hds-dataviz.css - data visualization color tokens and custom properties (small today, designed to grow as HDS dataviz patterns expand)

New sites load only hds.css for a 70% smaller payload compared to the previous single 895 KB bundle. Sites that need full USWDS coverage add hds-uswds.css. Sites with charts or data visualizations add hds-dataviz.css.

Design tokens. HDS Core now ships tokens.json in the W3C Design Tokens Community Group (DTCG) 2025.10 format. 309 tokens across seven domain groups (color, spacing, breakpoint, border, focus, layout, dataviz). Token $description fields include machine-readable usage constraints for design tooling and AI-assisted development workflows. A Style Dictionary example configuration is included for teams running custom token pipelines.

Accessibility improvements. Focus states migrated from :focus to :focus-visible across all components. Focus ring system standardized via shared tokens and mixins. Chromatic visual regression testing added for palette accessibility verification across all six HDS color palettes. Focus ring contrast values are under active review for WCAG 1.4.11 compliance (Issue #40).

Breaking Changes

If upgrading from v0.6.0, the following changes require action:

CSS bundle renamed and split. styles.css is removed. Replace with hds.css. Sites needing full USWDS coverage must also load hds-uswds.css before hds.css (load order determines cascade priority).

<!-- HDS only (most sites) -->
<link rel="stylesheet" href="hds.min.css" />

<!-- Full USWDS coverage -->
<link rel="stylesheet" href="hds-uswds.min.css" />
<link rel="stylesheet" href="hds.min.css" />

Typography utilities consolidated. .hds-label and .hds-eyebrow removed. Replace with .hds-overline.

Focus states changed. All :focus pseudo-classes migrated to :focus-visible. No code changes required but interactive elements will no longer show focus rings on mouse click, only on keyboard navigation.

Link underlines. Global link underline style changed from dotted to dashed, matching NASA.gov production styling.

Build system. Gulp tasks removed. Use npm run build for all compilation. See ARCHITECTURE.md for details.

Added

• Blockquote component with palette-adaptive token
• List component styles with marker palette token
• Prose component styles and documentation
• Side Navigation component with multi-level support
• Data visualization color tokens (categorical + sequential)
• Design tokens file (tokens.json) in W3C DTCG 2025.10 format
• Style Dictionary example configuration (tools/sd-example/)
• Section 508 accessibility checklist
• Guides: React setup, USWDS migration
• USWDS package hash verification on install
• Chromatic visual regression testing infrastructure

Changed

• In-Page Navigation restyled to match Figma specifications
• Icon buttons refactored to 2-layer architecture with Figma-accurate focus and hover states
• Focus rings standardized via shared tokens and mixins
• SCSS split from monolithic file into modular base/ and components/ directories

Fixed

• Pagination: invisible page numbers on dark palettes
• Pagination: arrows disappearing at high browser zoom
• Breadcrumb: buggy focus ring on first item
• Button: squished circle on primary external arrows
• Grid: visible gutters in documentation
• CSS load order corrected in hds-uswds.scss code comment

Internal

• Removed: gulp, gulp-clean-css, gulp-rename, gulp-svg-sprite, gulp-terser, @uswds/compile
• Added: sass, postcss, postcss-cli, autoprefixer, cssnano, svg-sprite
• Updated: vitest, playwright, prettier, Storybook packages

---

This discussion was created from the release v0.7.1.