@solexllc/usx 0.1.2 → 0.1.4

package/README.md

@@ -9,7 +9,8 @@ The only build step is regenerating the icon sprite (see **Icons** below).
 
 All design tokens come from `@solexllc/usx-theme` and are runtime-themeable via
 `--usx-*` CSS custom properties. Compile `src/index.scss` for a fully static
-build (no `var()` references), or `src/themed.scss` to enable every hook.
+build (no `var()` references), or `src/themed.scss` to enable every hook and
+pair it with `pkg:@solexllc/usx-theme/themes` for opt-in prebuilt themes.
 See `packages/usx-theme/README.md` for the full theming guide, and the Storybook
 **Documentation → Theme → Playground** to generate a theme visually.
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@solexllc/usx",
-  "version": "0.1.2",
+  "version": "0.1.4",
   "description": "Compiled USWDS-based component styles for USX.",
   "license": "MIT",
   "repository": {
@@ -32,7 +32,7 @@
     "src"
   ],
   "dependencies": {
-    "@solexllc/usx-theme": "0.1.1"
+    "@solexllc/usx-theme": "0.2.1"
   },
   "devDependencies": {
     "sass": "^1.98.0"

package/src/components/_header.scss

@@ -2,15 +2,6 @@
 
 /* stylelint-disable selector-class-pattern, no-descending-specificity -- Public USX classes use BEM naming; intentional cascade order. */
 
-// Keeps utilityContent and the search box on one row regardless of the
-// parent's own flex-direction (USWDS's .usa-nav__secondary stacks its
-// children in a column at desktop).
-.usx-nav__utility {
-  align-items: center;
-  display: flex;
-  gap: 0.5rem;
-}
-
 .usx-header {
   @if $usx-header-bg {
     background-color: $usx-header-bg;
@@ -49,40 +40,52 @@
     }
   }
 
-}
+  :has(> .usx-nav--sticky) {
+    overflow: unset;
+  }
+
+  // Keeps utilityContent and the search box on one row regardless of the
+  // parent's own flex-direction (USWDS's .usa-nav__secondary stacks its
+  // children in a column at desktop).
+  .usx-nav__utility {
+    align-items: center;
+    display: flex;
+    gap: 0.5rem;
+  }
 
-:has(> .usx-nav--sticky) {
-  overflow: unset;
 }
 
-:has(> .usa-header--extended) {
-  // Background is themeable at every width — unlike vendor (which paints no
-  // background at desktop and a hardcoded opaque white at mobile), USX lets a
-  // theme's configured nav color show through the mobile drawer too, so a
-  // dark theme's drawer doesn't revert to an unstyled white panel. Desktop
-  // and mobile can be themed independently since the drawer and the nav bar
-  // are visually distinct surfaces.
-  .usx-nav {
-    @media (width < 64em) {
-      @if $usx-header-nav-bg-mobile {
-        background-color: $usx-header-nav-bg-mobile;
-      }
+// Extended layout only: its nav is a full-width bar under the header (desktop)
+// or an off-canvas drawer (mobile), so it's a distinct surface worth theming.
+// The basic layout's nav sits inline in the header bar and inherits its
+// background. Background is themeable at every width — unlike vendor (which
+// paints no background at desktop and a hardcoded opaque white at mobile),
+// USX lets a theme's configured nav color show through the mobile drawer
+// too, so a dark theme's drawer doesn't revert to an unstyled white panel.
+//
+// Note the extended layout renders <header> and <nav> as siblings (see
+// Header.tsx), so this can't be nested under .usx-header.
+:has(> .usa-header--extended) .usx-nav {
+  @media (width < 64em) {
+    @if $usx-header-nav-bg-mobile {
+      background-color: $usx-header-nav-bg-mobile;
     }
+  }
 
-    @media (width >= 64em) {
-      @if $usx-header-nav-bg {
-        background-color: $usx-header-nav-bg;
-      }
+  @media (width >=64em) {
+    @if $usx-header-nav-bg {
+      background-color: $usx-header-nav-bg;
     }
   }
+}
 
-  // USWDS scopes all of its own .usa-header--extended .usa-nav(__inner) and
+:has(> .usa-header--extended) {  // USWDS scopes all of its own .usa-header--extended .usa-nav(__inner) and
   // hover/current-bar rules to this same desktop breakpoint (the nav is an
   // off-canvas mobile drawer below it, styled by vendor's plain .usa-nav
   // mobile rules instead) — mirror that scoping here, or this desktop-only
   // border/spacing leaks into the mobile drawer (extra 2rem padding on top
   // of the drawer's own).
-  @media (width >= 64em) {
+  @media (width >=64em) {
     .usx-nav {
       @if $usx-header-nav-border-bottom {
         border-bottom: $usx-header-nav-border-bottom;
@@ -90,25 +93,27 @@
 
       @if $usx-header-nav-border-top {
         border-top: $usx-header-nav-border-top;
-      } @else {
+      }
+
+      @else {
         border-top: 1px solid #dfe1e2;
       }
 
       .usa-nav__inner {
-          margin-left: auto;
-          margin-right: auto;
-          max-width: calc($max-layout-width + 4rem);
-          padding-left: 2rem;
-          padding-right: 2rem;
-          position: relative;
+        margin-left: auto;
+        margin-right: auto;
+        max-width: calc($max-layout-width + 4rem);
+        padding-left: 2rem;
+        padding-right: 2rem;
+        position: relative;
 
-          // .usa-nav__close (mobile-only) is hidden at this width, and
-          // .usa-nav__secondary is taken out of flow via its own absolute
-          // positioning — so .usa-nav__primary and .usx-nav__end-slot are the
-          // only two participants in this row, letting margin-left: auto push
-          // the slot flush right, vertically centered with the nav links.
-          display: flex;
-          align-items: center;
+        // .usa-nav__close (mobile-only) is hidden at this width, and
+        // .usa-nav__secondary is taken out of flow via its own absolute
+        // positioning — so .usa-nav__primary and .usx-nav__end-slot are the
+        // only two participants in this row, letting margin-left: auto push
+        // the slot flush right, vertically centered with the nav links.
+        display: flex;
+        align-items: center;
       }
 
       .usx-nav__end-slot {
@@ -123,7 +128,8 @@
       // extended only differs from the basic default (below) by hover being
       // restricted to top-level items and the bar sitting flush at bottom: 0
       // instead of bottom: -0.25rem.
-      .usa-nav__primary-item > .usa-nav__link {
+      .usa-nav__primary-item>.usa-nav__link {
+
         &:hover,
         &.usa-current {
           position: relative;
@@ -163,6 +169,7 @@
   float: right;
 
   @if $usx-header-nav-link-text-hover {
+
     // Vendor's dark-background/white-text expanded look is desktop-only (see
     // the aria-expanded background rule further below), so at mobile a hover
     // on an already-open toggle should still track the theme like any other
@@ -177,7 +184,7 @@
           background-color: $usx-header-nav-link-bg-hover;
         }
 
-        &> span::after {
+        &>span::after {
           @if $usx-header-nav-link-text-hover-mobile {
             background-color: $usx-header-nav-link-text-hover-mobile;
           }
@@ -185,11 +192,11 @@
       }
     }
 
-    @media (width >= 64em) {
+    @media (width >=64em) {
       .usa-nav__primary button:not([aria-expanded="true"]):hover {
         color: $usx-header-nav-link-text-hover;
 
-        &> span::after {
+        &>span::after {
           @if $usx-header-nav-link-text-hover {
             background-color: $usx-header-nav-link-text-hover;
           }
@@ -197,7 +204,7 @@
       }
     }
 
-    .usa-nav__primary > .usa-nav__primary-item > a:hover {
+    .usa-nav__primary>.usa-nav__primary-item>a:hover {
       @media (width < 64em) {
         color: $usx-header-nav-link-text-hover-mobile;
 
@@ -208,7 +215,7 @@
         }
       }
 
-      @media (width >= 64em) {
+      @media (width >=64em) {
         color: $usx-header-nav-link-text-hover;
       }
     }
@@ -221,6 +228,7 @@
   }
 
   .usa-nav__close {
+
     // Only rendered inside the mobile off-canvas drawer, so it tracks the
     // drawer link tokens, not the desktop primary-nav ones.
     // .usa-icon fills via `currentColor`, so tint it with `color`, not
@@ -236,7 +244,7 @@
     }
   }
 
-  @media (width >= 64em) {
+  @media (width >=64em) {
     width: 100%;
     float: none;
 
@@ -258,34 +266,37 @@
       padding-right: 1rem;
     }
 
-    .usa-nav__secondary-item + .usa-nav__secondary-item {
+    .usa-nav__secondary-item+.usa-nav__secondary-item {
+
       // USWDS's own separator is a border color (#dfe1e2), not the link's
       // text color — $usx-header-secondary-link-text was the wrong token.
       @if $usx-header-nav-border-top {
         border-left: $usx-header-nav-border-top;
-      } @else {
+      }
+
+      @else {
         border-left: 1px solid #dfe1e2;
       }
     }
   }
 
   .usa-nav__link {
+
     // Vendor only swaps the expanded toggle to white text at desktop (paired
     // with the dark expanded background); at mobile it gets no special
     // color at all, so it should still track the theme like every other
     // link — excluding it unconditionally left it on the unthemed browser
     // default whenever the drawer was open.
     @media (width < 64em) {
-      &:not(
-        .usa-nav__primary button:hover,
+
+      &:not(.usa-nav__primary button:hover,
         .usa-nav__primary > .usa-nav__primary-item > a:hover,
-        .usa-current
-      ) {
+        .usa-current) {
         @if $usx-header-nav-link-text-mobile {
           color: $usx-header-nav-link-text-mobile;
         }
 
-        &> span::after {
+        &>span::after {
           @if $usx-header-nav-link-text-mobile {
             background-color: $usx-header-nav-link-text-mobile;
           }
@@ -293,18 +304,17 @@
       }
     }
 
-    @media (width >= 64em) {
-      &:not(
-        .usa-nav__primary button[aria-expanded="true"],
+    @media (width >=64em) {
+
+      &:not(.usa-nav__primary button[aria-expanded="true"],
         .usa-nav__primary button:hover,
         .usa-nav__primary > .usa-nav__primary-item > a:hover,
-        .usa-current
-      ) {
+        .usa-current) {
         @if $usx-header-nav-link-text {
           color: $usx-header-nav-link-text;
         }
 
-        &> span::after {
+        &>span::after {
           @if $usx-header-nav-link-text {
             background-color: $usx-header-nav-link-text;
           }
@@ -315,7 +325,7 @@
     // Desktop: current text stays the plain link color — only the bottom bar
     // (above) marks state, matching vendor (no .usa-current color override
     // exists in vendor's desktop rules).
-    @media (width >= 64em) {
+    @media (width >=64em) {
       &.usa-current {
         @if $usx-header-nav-link-text {
           color: $usx-header-nav-link-text;
@@ -359,7 +369,8 @@
     // (left-side) current-page indicator instead, and never shows one on
     // hover at all — showing this bar unconditionally put it on every mobile
     // nav item (including dropdown toggles) on hover, which vendor never does.
-    @media (width >= 64em) {
+    @media (width >=64em) {
+
       &:hover,
       &.usa-current {
         position: relative;
@@ -389,18 +400,19 @@
     // white background and border-top separators are the only styling, so
     // applying this unconditionally painted a dark box (with the still-gray,
     // unthemed link text from above) over the mobile accordion toggle/panel.
-    @media (width >= 64em) {
+    @media (width >=64em) {
       &[aria-expanded="true"] {
         @if $usx-header-nav-link-bg {
           background-color: $usx-header-nav-link-bg !important;
         }
 
-        & + .usa-nav__submenu {
+        &+.usa-nav__submenu {
           @if $usx-header-nav-submenu-bg {
             background-color: $usx-header-nav-submenu-bg;
           }
 
-          &::before, &::after {
+          &::before,
+          &::after {
             @if $usx-header-nav-submenu-bg {
               background-color: $usx-header-nav-submenu-bg;
             }
@@ -410,7 +422,7 @@
     }
   }
 
-  .usa-nav__secondary-item > a {
+  .usa-nav__secondary-item>a {
     @if $usx-header-secondary-link-text {
       color: $usx-header-secondary-link-text;
     }
@@ -423,12 +435,17 @@
   }
 
   @media (width < 64em) {
-    .usa-nav__primary-item, .usa-nav__submenu-item {
+
+    .usa-nav__primary-item,
+    .usa-nav__submenu-item {
+
       // USWDS's own default is a border color (#dfe1e2), not a text color —
       // $usx-header-nav-link-text was the wrong token here.
       @if $usx-header-nav-border-top {
         border-top: $usx-header-nav-border-top;
-      } @else {
+      }
+
+      @else {
         border-top: 1px solid #dfe1e2;
       }
     }
@@ -436,7 +453,7 @@
     // Submenu links are plain <a> tags with no .usa-nav__link class (see
     // Header.tsx), so the rule above never reaches them — left alone they
     // fall back to vendor's hardcoded gray/blue instead of the active theme.
-    .usa-nav__submenu-item > a {
+    .usa-nav__submenu-item>a {
       @if $usx-header-nav-link-text {
         color: $usx-header-nav-link-text;
       }
@@ -461,4 +478,4 @@
     }
   }
 
-}
+}

package/src/components/_hero.scss

@@ -32,7 +32,7 @@
     content: '';
     position: absolute;
     inset: 0;
-    background-color: rgb(0 0 0 / 55%);
+    background-color: rgb(0 0 0 / 35%);
     pointer-events: none;
 
     @if $usx-hero-overlay-bg {
@@ -61,7 +61,7 @@
   &__callout {
     max-width: 40rem;
     padding: 2rem;
-    background-color: rgb(0 0 0 / 60%);
+    background-color: rgb(0 0 0 / 90%);
 
     // Radius follows the app-wide radius-box group (null/square by default,
     // like every other radius-box consumer: image, code, summary-box).

package/src/components/_link.scss

@@ -2,11 +2,9 @@
 
 /* stylelint-disable selector-class-pattern, selector-not-notation, no-descending-specificity -- Public USX classes use BEM naming; preserve original :not() specificity and cascade order. */
 .usx-link,
-.usx-prose a {
+.usx-prose a:not(.usa-button) {
   display: inline-flex;
-  align-items: center;
   width: max-content;
-  gap: 0.25rem;
 
   &:not([class^="text-"]):not([class*=" text-"]) {
     @if $usx-link-text {