@solexllc/usx 0.1.1 → 0.1.3

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.1",
+  "version": "0.1.3",
   "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.0"
   },
   "devDependencies": {
     "sass": "^1.98.0"

package/src/components/_header.scss

@@ -1,6 +1,7 @@
 @use 'pkg:@solexllc/usx-theme/variables' as *;
 
 /* stylelint-disable selector-class-pattern, no-descending-specificity -- Public USX classes use BEM naming; intentional cascade order. */
+
 .usx-header {
   @if $usx-header-bg {
     background-color: $usx-header-bg;
@@ -39,19 +40,10 @@
     }
   }
 
-}
-
-:has(> .usx-nav--sticky) {
-  overflow: unset;
-}
+  :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 {
@@ -59,20 +51,40 @@
       }
     }
 
-    @media (width >= 64em) {
+    @media (width >=64em) {
       @if $usx-header-nav-bg {
         background-color: $usx-header-nav-bg;
       }
     }
   }
 
+  // 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(> .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.
+
+
   // 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;
@@ -80,17 +92,32 @@
 
       @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;
+      }
+
+      .usx-nav__end-slot {
+        flex-shrink: 0;
+        margin-left: auto;
       }
 
       // USWDS's own .usa-header--extended .usa-nav__primary-item > .usa-nav__link:hover::after
@@ -100,7 +127,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;
@@ -140,6 +168,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
@@ -154,7 +183,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;
           }
@@ -162,11 +191,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;
           }
@@ -174,7 +203,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;
 
@@ -185,7 +214,7 @@
         }
       }
 
-      @media (width >= 64em) {
+      @media (width >=64em) {
         color: $usx-header-nav-link-text-hover;
       }
     }
@@ -198,6 +227,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
@@ -213,7 +243,7 @@
     }
   }
 
-  @media (width >= 64em) {
+  @media (width >=64em) {
     width: 100%;
     float: none;
 
@@ -235,34 +265,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;
           }
@@ -270,18 +303,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;
           }
@@ -292,7 +324,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;
@@ -336,7 +368,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;
@@ -366,18 +399,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;
             }
@@ -387,7 +421,7 @@
     }
   }
 
-  .usa-nav__secondary-item > a {
+  .usa-nav__secondary-item>a {
     @if $usx-header-secondary-link-text {
       color: $usx-header-secondary-link-text;
     }
@@ -400,12 +434,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;
       }
     }
@@ -413,7 +452,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;
       }
@@ -438,4 +477,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/_in-page-nav.scss

@@ -10,12 +10,27 @@
 // instead of leaving the compiled defaults frozen.
 
 .usa-in-page-nav-container {
+  // Lets the sticky <aside> inside stick across its ancestor's full height
+  // (e.g. Layout's right sidebar, which stretches via CSS grid) instead of
+  // being bounded by this container's own (much shorter) content height.
+  height: 100%;
+
   main,
   .usx-in-page-nav__content {
     max-width: 100%;
   }
 }
 
+.usx-layout__sidebar--right {
+
+  .usa-in-page-nav-container {
+
+    .usa-in-page-nav.usx-in-page-nav {
+      margin: 0;
+    }
+  }
+}
+
 .usa-in-page-nav__nav {
   @if $usx-in-page-nav-bg {
     background-color: $usx-in-page-nav-bg;

package/src/components/_layout.scss

@@ -13,17 +13,9 @@
   // | gutter | content (max-width 960px) | gutter |
 
   &__single-column {
-    max-width: $max-layout-width;
+    max-width: calc($max-layout-width + units(4));
     margin: 0 auto;
-    padding: 0 units(2.5);
-
-    @include at-media('tablet') {
-      padding: 0 units(4);
-    }
-
-    @include at-media('desktop') {
-      padding: 0;
-    }
+    padding: 0 units(2);
   }
 
   // ── Multi-column grid layout ──────────────────────────────────────────────
@@ -52,6 +44,7 @@
   &__content {
     grid-column: content-start / span content-end;
     grid-row: 1;
+    max-width: calc($max-layout-width + units(4));
 
 
     // Content that leaves space for a left sidebar
@@ -62,8 +55,7 @@
 
       @include at-media('desktop') {
         grid-column: content-start / span right-sidebar-end;
-        width: $dynamic-content-width;
-        margin: 0 units(4) 0 0;
+        padding-right: units(4);
       }
     }
 
@@ -75,9 +67,8 @@
 
       @include at-media('desktop') {
         grid-column: left-sidebar-start / span content-end;
-        width: $dynamic-content-width;
-        margin: 0 0 0 units(4);
         justify-self: flex-end;
+        padding-left: units(4);
       }
     }
   }
@@ -87,11 +78,13 @@
   &__sidebar--left {
     grid-column: left-sidebar-start / span content-start;
     grid-row: 1;
+    height: 100%;
   }
 
   &__sidebar--right {
     grid-column: content-end / span right-sidebar-end;
     grid-row: 1;
+    height: 100%;
   }
 
   // Hide sidebars on mobile/tablet, show on desktop

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 {