@nasa-hds/core 0.0.0 → 0.9.0

package/src/scss/base/_palettes.scss

@@ -1,6 +1,6 @@
 // ============================================================
 // HDS Color Palettes
-// @nasa/hds-core
+// @nasa-hds/core
 // ============================================================
 // Apply via class or data attribute:
 //   <section class="hds-palette-dark">
@@ -15,6 +15,7 @@
 // SECTIONS:
 //   Shared Color Schemes
 //   Palettes
+//   USWDS Surface Bridges
 //   Auto Dark Mode
 // ============================================================
 
@@ -292,6 +293,51 @@
   --hds-palette-bg: #{$hds-color-carbon-black};
 }
 
+// ============================================================
+// USWDS SURFACE BRIDGES
+// ============================================================
+// The government banner, header, footer, and identifier have no
+// HDS theme yet (Issue #86), so they are not palette containers.
+// Their surfaces are decided by USWDS — white for the banner,
+// header, and footer sections, black for the identifier — while
+// the text and links inside them pick up HDS colors from whatever
+// palette happens to wrap the page. When the two disagree the
+// result is unreadable: Carbon 90 identifier links on black in
+// every light palette, and white header/footer links on white
+// inside a dark one.
+//
+// Each bridge pins the palette that matches the surface USWDS
+// paints, which leaves the default appearance untouched and only
+// corrects the mismatch. The background is set explicitly because
+// USWDS gives .usa-header and .usa-footer no background of their
+// own — they assume the body behind them is white, which stops
+// being true inside a palette wrapper.
+//
+// :where() holds specificity at zero, so an adopter who wants a
+// different surface adds a .hds-palette-* class to the same
+// element and wins without !important.
+//
+// Remove these once the components get real HDS theming.
+// ============================================================
+
+:where(.usa-banner, .usa-header, .usa-footer) {
+  @include _scheme-universal;
+  @include _scheme-light;
+
+  --hds-palette-bg: #{$hds-color-spacesuit-white};
+
+  background-color: var(--hds-palette-bg);
+}
+
+:where(.usa-identifier) {
+  @include _scheme-universal;
+  @include _scheme-dark;
+
+  --hds-palette-bg: #{$hds-color-carbon-black};
+
+  background-color: var(--hds-palette-bg);
+}
+
 // ============================================================
 // AUTO DARK MODE
 // ============================================================

package/src/scss/base/_print.scss

@@ -1,6 +1,6 @@
 // ============================================================
 // HDS Base — Print Styles
-// @nasa/hds-core
+// @nasa-hds/core
 // ============================================================
 // Forces readable output when printed regardless of palette.
 // ============================================================

package/src/scss/components/_accordion.scss

@@ -1,6 +1,6 @@
 // ============================================================
 // HDS Component — Accordion
-// @nasa/hds-core
+// @nasa-hds/core
 // ============================================================
 // Tier 1 override of .usa-accordion. Palette-aware, borderless,
 // transparent backgrounds, circled chevron replaces USWDS chevron.
@@ -29,17 +29,26 @@
 @use 'hds-tokens' as *;
 @use 'hds-mixins' as *;
 
+// ── Scope guard ───────────────────────────────────────────────
+// USWDS reuses the .usa-accordion / .usa-accordion__button /
+// .usa-accordion__content classes inside its Banner ("Here's how
+// you know" toggle) and Nav (.usa-nav__primary.usa-accordion,
+// including the mobile drawer submenus). Our HDS Accordion style
+// (borderless, flush headings, circled chevron) must not reach
+// them; it misplaced the banner/nav toggle icon. See Issue #86.
+$_accordion-guard: ':not(.usa-banner *):not(.usa-nav *)';
+
 // ── Container ─────────────────────────────────────────────────
 // Remove USWDS left border
 
-.usa-accordion {
+.usa-accordion#{$_accordion-guard} {
   border-left: 0;
 }
 
 // ── Separator line ────────────────────────────────────────────
 // Between items only, not first or last
 
-.usa-accordion__heading {
+.usa-accordion__heading#{$_accordion-guard} {
   border-top: 1px solid var(--hds-palette-border, #{$hds-color-carbon-20});
 
   // Override USWDS margin-top: units(1) on :not(:first-child) so adjacent
@@ -47,14 +56,14 @@
   margin: 0;
 }
 
-.usa-accordion > .usa-accordion__heading:first-child {
+.usa-accordion#{$_accordion-guard} > .usa-accordion__heading:first-child {
   border-top: 0;
 }
 
 // ── Heading button ────────────────────────────────────────────
 // Transparent, palette-aware, circled chevron
 
-.usa-accordion__button {
+.usa-accordion__button#{$_accordion-guard} {
   // Override USWDS set-text-and-bg mixin
   background-color: transparent;
   color: var(--hds-palette-heading, #{$hds-color-carbon-black});
@@ -137,7 +146,7 @@
 // ── Content area ──────────────────────────────────────────────
 // Transparent, palette-aware text, no top border
 
-.usa-accordion__content {
+.usa-accordion__content#{$_accordion-guard} {
   background-color: transparent;
   color: var(--hds-palette-text, #{$hds-color-carbon-90});
   border-top: 0;

package/src/scss/components/_alert.scss

@@ -1,6 +1,6 @@
 // ============================================================
 // HDS Component — Alert
-// @nasa/hds-core
+// @nasa-hds/core
 // ============================================================
 // Minimal override. Pure USWDS, not in HDS Figma.
 // Colors and fonts apply automatically via theme settings.

package/src/scss/components/_blockquote.scss

@@ -1,6 +1,6 @@
 // ============================================================
 // HDS Component — Blockquote
-// @nasa/hds-core
+// @nasa-hds/core
 // ============================================================
 // Rich blockquote with optional attribution (avatar, name,
 // description). No USWDS equivalent — pure HDS component.

package/src/scss/components/_breadcrumb.scss

@@ -1,6 +1,6 @@
 // ============================================================
 // HDS Component — Breadcrumb
-// @nasa/hds-core
+// @nasa-hds/core
 // ============================================================
 // HDS uses forward-slash separators, not the USWDS chevron.
 // Technique from nasa.gov production: kill the mask-image

package/src/scss/components/_button.scss

@@ -1,6 +1,6 @@
 // ============================================================
 // HDS Component — Button
-// @nasa/hds-core
+// @nasa-hds/core
 // ============================================================
 // Theme tokens (in _hds-uswds-theme.scss) handle border-radius
 // (0), stroke-width (2px), and font-family (Inter via "heading"

package/src/scss/components/_form.scss

@@ -1,6 +1,6 @@
 // ============================================================
 // HDS Component — Form Elements
-// @nasa/hds-core
+// @nasa-hds/core
 // ============================================================
 // Text inputs, textareas, selects, checkboxes, radio buttons,
 // labels, help text, error states, and file inputs.
@@ -154,9 +154,9 @@ $hds-checkbox-icon: url("data:image/svg+xml,%3Csvg viewBox='-2 -2 24 24' xmlns='
 // Light: C20 → C40 (= --hds-palette-control-border).
 // Dark: C80 → inferred C60 (= --hds-palette-border on dark).
 
-.usa-input:hover:not(:disabled, :focus-visible),
-.usa-textarea:hover:not(:disabled, :focus-visible),
-.usa-select:hover:not(:disabled, :focus-visible) {
+.usa-input:hover:not(:disabled, :focus-visible, .usa-input--error),
+.usa-textarea:hover:not(:disabled, :focus-visible, .usa-input--error),
+.usa-select:hover:not(:disabled, :focus-visible, .usa-input--error) {
   border-color: var(--hds-palette-control-border);
 }
 

package/src/scss/components/_grid-utilities.scss

@@ -1,6 +1,6 @@
 // ============================================================
 // HDS Component — Grid Utilities
-// @nasa/hds-core
+// @nasa-hds/core
 // ============================================================
 // Responsive reverse, horizontal lists, and section spacing.
 // Refinements to the core USWDS grid.

package/src/scss/components/_icon-button.scss

@@ -1,6 +1,6 @@
 // ============================================================
 // HDS Component — Icon Button
-// @nasa/hds-core
+// @nasa-hds/core
 // ============================================================
 // Interactive circle containers. Require aria-label when used
 // without visible text. SVG inside always gets aria-hidden="true".

package/src/scss/components/_in-page-nav.scss

@@ -1,6 +1,6 @@
 // ============================================================
 // HDS Component — In-Page Navigation
-// @nasa/hds-core
+// @nasa-hds/core
 // ============================================================
 // Fixed sidebar with scroll spy for long-form articles.
 // Maps to HDS Figma "Tertiary / Local Navigation."

package/src/scss/components/_index.scss

@@ -1,6 +1,6 @@
 // ============================================================
 // HDS Components — Index
-// @nasa/hds-core
+// @nasa-hds/core
 // ============================================================
 // Load order:
 //   1. Foundational — link and button, used/extended by others
@@ -9,7 +9,6 @@
 //   4. Navigation — breadcrumb, pagination, in-page nav
 //   5. Notifications — site alert, alert
 //   6. Layout — grid utilities
-//   7. Phase 2 stubs — navigation, banner
 // ============================================================
 
 // ── Foundational ──
@@ -41,7 +40,3 @@
 
 // ── Layout ──
 @forward 'grid-utilities';
-
-// ── Phase 2 (stubs) ──
-@forward 'navigation';
-@forward 'banner';

package/src/scss/components/_intro-text.scss

@@ -1,6 +1,6 @@
 // ============================================================
 // HDS Component — Intro Text
-// @nasa/hds-core
+// @nasa-hds/core
 // ============================================================
 // HDS override of .usa-intro.
 //

package/src/scss/components/_link.scss

@@ -1,6 +1,6 @@
 // ============================================================
 // HDS Component — Link
-// @nasa/hds-core
+// @nasa-hds/core
 // ============================================================
 // .usa-link and .usa-link--external override.
 // HDS links use a dashed underline as the defining element.

package/src/scss/components/_list.scss

@@ -1,6 +1,6 @@
 // ============================================================
 // HDS Component — List
-// @nasa/hds-core
+// @nasa-hds/core
 // ============================================================
 // Tier 1 — uses standard USWDS .usa-list markup with added
 // role="list" and aria-label per HDS Figma accessibility spec.

package/src/scss/components/_pagination.scss

@@ -1,6 +1,6 @@
 // ============================================================
 // HDS Component — Pagination
-// @nasa/hds-core
+// @nasa-hds/core
 // ============================================================
 // USWDS .usa-pagination override (numbered variant) plus
 // HDS simplified pagination (Previous/Next composed button).

package/src/scss/components/_primary-arrow-button.scss

@@ -1,6 +1,6 @@
 // ============================================================
 // HDS Component — Primary Arrow Button
-// @nasa/hds-core
+// @nasa-hds/core
 // ============================================================
 // Text + CSS ::after red circle with white arrow.
 // Arrow direction auto-swaps for external links via

package/src/scss/components/_prose.scss

@@ -1,6 +1,6 @@
 // ============================================================
 // HDS Component — Prose
-// @nasa/hds-core
+// @nasa-hds/core
 // ============================================================
 // usa-prose reskin: HDS content rules are applied to .usa-prose
 // via the merged @scope block in base/_elements.scss (which

package/src/scss/components/_sidenav.scss

@@ -1,6 +1,6 @@
 // ============================================================
 // HDS Component — Side Navigation
-// @nasa/hds-core
+// @nasa-hds/core
 // ============================================================
 // Section navigation, typically used alongside docs layouts.
 // Maps to HDS Figma "Tertiary / Local Navigation."

package/src/scss/components/_site-alert.scss

@@ -1,13 +1,13 @@
 // ============================================================
 // HDS Component — Site Alert
-// @nasa/hds-core
+// @nasa-hds/core
 // ============================================================
 // Tier 1 override — .usa-site-alert--emergency and
 // .usa-site-alert--info.
 //
 // HDS Figma calls this "Banner" — renamed to match USWDS
 // component name. Not the same as the government compliance
-// banner (components/_banner.scss).
+// banner (.usa-banner), which HDS does not theme.
 //
 // Scoped --hds-palette-* vars on each variant so existing
 // link/heading/text wiring works automatically.

package/src/scss/components/_table.scss

@@ -1,6 +1,6 @@
 // ============================================================
 // HDS Component — Table
-// @nasa/hds-core
+// @nasa-hds/core
 // ============================================================
 // Overrides USWDS .usa-table with exact HDS Carbon colors.
 // USWDS theme settings (in _hds-uswds-theme.scss) provide

package/src/scss/hds-dataviz.scss

@@ -1,6 +1,6 @@
 // ============================================================
 // HDS Core — Data Visualization Tokens
-// @nasa/hds-core
+// @nasa-hds/core
 // ============================================================
 // Use this file to import ONLY the dataviz custom properties.
 // Useful for charting libraries that don't need the full HDS bundle.

package/src/scss/hds-uswds.scss

@@ -1,6 +1,6 @@
 // ============================================================
 // HDS USWDS Addon — Remaining USWDS Packages
-// @nasa/hds-core
+// @nasa-hds/core
 // ============================================================
 // Generates hds-uswds.css. Includes all USWDS component packages
 // and utility classes NOT included in the primary HDS bundle.

package/src/scss/hds.scss

@@ -1,6 +1,6 @@
 // ============================================================
 // HDS Core — Main Entry Point
-// @nasa/hds-core
+// @nasa-hds/core
 // ============================================================
 // Generates hds.css. Includes HDS components, base styles, and
 // the subset of USWDS foundation/component packages that HDS themes.

package/src/scss/components/_banner.scss

@@ -1,29 +0,0 @@
-// ============================================================
-// HDS Component — Banner (Government Compliance)
-// @nasa/hds-core
-// ============================================================
-// STATUS: Phase 2 — CSS exists but incomplete. Not the same as
-// HDS "Banners" (see components/_site-alert.scss). Uses USWDS
-// JS for expand/collapse. Needs creative director review before
-// HDS-specific styling.
-//
-// Restyles: https://designsystem.digital.gov/components/banner/
-// ============================================================
-
-@use 'uswds-core' as *;
-@use 'hds-tokens' as *;
-
-// Always light background, outside palette context.
-
-.usa-banner {
-  background-color: $hds-color-carbon-05;
-  font-size: size('body', '2xs');
-}
-
-.usa-banner__header {
-  padding-block: units(1);
-}
-
-.usa-banner__button {
-  text-decoration-line: underline;
-}

package/src/scss/components/_navigation.scss

@@ -1,126 +0,0 @@
-// ============================================================
-// HDS Component — Navigation
-// @nasa/hds-core
-// ============================================================
-// See docs/DESIGN.md Navigation Component Mapping.
-//
-// STATUS: Phase 2 — inherited from prior work, not yet tested
-// or documented in Storybook. Review before v1.0 whether to
-// ship or remove until Phase 2 implementation.
-//
-// Restyles: https://designsystem.digital.gov/components/header/
-// ============================================================
-
-@use 'uswds-core' as *;
-@use 'hds-tokens' as *;
-@use 'hds-mixins' as *;
-
-// ------------------------------------------------------------
-// Header & Footer Link Resets
-// ------------------------------------------------------------
-
-.usa-header,
-.usa-footer,
-.usa-nav__submenu,
-.usa-megamenu {
-  a {
-    text-decoration-line: none;
-  }
-}
-
-.usa-header--basic .usa-nav-container {
-  align-items: center;
-
-  .usa-navbar {
-    width: auto;
-  }
-}
-
-.usa-footer__primary-content,
-.usa-footer__nav {
-  border: 0 !important;
-}
-
-.usa-footer__nav {
-  @include at-media-max('tablet-lg') {
-    nav > ul {
-      border-bottom-color: $hds-color-carbon-60;
-      padding-bottom: units(2) !important;
-      padding-top: units(2) !important;
-    }
-  }
-}
-
-// ------------------------------------------------------------
-// Agency Navbar
-// ------------------------------------------------------------
-
-.usa-navbar.agency-navbar {
-  border: 0;
-  position: relative;
-
-  .usa-nav__primary > .usa-nav__primary-item > a,
-  .usa-nav__primary button {
-    padding: units(3) units(2);
-  }
-
-  .usa-button--arrow {
-    padding: units(2) 0 !important;
-  }
-
-  @include at-media-max('desktop') {
-    .usa-nav {
-      padding: units(3);
-    }
-  }
-}
-
-// ------------------------------------------------------------
-// Navigation Menu Trigger
-// ------------------------------------------------------------
-
-.usa-nav__global-nav-trigger {
-  span::after {
-    background-color: currentcolor;
-    mask-size: 1em !important;
-    mask-position: top center !important;
-    mask-repeat: no-repeat;
-  }
-
-  &[aria-expanded='true'] span::after {
-    mask-image:
-      url('../assets/img/hds-icons/arrow-chevron-up.svg'), linear-gradient(transparent, transparent) !important;
-  }
-
-  &[aria-expanded='false'] span::after {
-    mask-image:
-      url('../assets/img/hds-icons/arrow-chevron-down.svg'), linear-gradient(transparent, transparent) !important;
-  }
-}
-
-.usa-nav__mobile-menu-trigger {
-  padding-right: units(2.5);
-  width: 100%;
-
-  &[aria-expanded='false'] {
-    background-color: currentcolor;
-    background-image: none;
-    mask-image: url('../assets/img/hds-icons/arrow-chevron-down.svg');
-    mask-position: right center;
-    mask-repeat: no-repeat;
-    mask-size: 1.2rem;
-  }
-
-  &[aria-expanded='true'] {
-    background-color: currentcolor;
-    background-image: none;
-    mask-image: url('../assets/img/hds-icons/arrow-chevron-up.svg');
-    mask-position: right center;
-    mask-repeat: no-repeat;
-    mask-size: 1.2rem;
-  }
-}
-
-.usa-nav__mobile-menu {
-  padding: 1em 0;
-}