@solexllc/usx 0.1.4 → 0.1.6

package/src/components/_hero.scss

@@ -16,17 +16,11 @@
   background-repeat: no-repeat;
   color: #fff;
 
-  @if $usx-hero-min-height {
-    min-height: $usx-hero-min-height;
-  }
+  min-height: usx-when($usx-hero-min-height);
 
-  @if $usx-hero-bg {
-    background-color: $usx-hero-bg;
-  }
+  background-color: usx-when($usx-hero-bg);
 
-  @if $usx-hero-text {
-    color: $usx-hero-text;
-  }
+  color: usx-when($usx-hero-text);
 
   &--has-overlay::before {
     content: '';
@@ -35,9 +29,7 @@
     background-color: rgb(0 0 0 / 35%);
     pointer-events: none;
 
-    @if $usx-hero-overlay-bg {
-      background-color: $usx-hero-overlay-bg;
-    }
+    background-color: usx-when($usx-hero-overlay-bg);
   }
 
   &__inner {
@@ -49,16 +41,18 @@
     padding-block: 4rem;
     padding-inline: 1.5rem;
 
-    @if $usx-hero-padding-block {
-      padding-block: $usx-hero-padding-block;
-    }
+    padding-block: usx-when($usx-hero-padding-block);
 
-    @if $usx-hero-padding-inline {
-      padding-inline: $usx-hero-padding-inline;
-    }
+    padding-inline: usx-when($usx-hero-padding-inline);
+  }
+
+  &--has-overlay.usx-hero--custom-overlay::before {
+    background-color: rgb(0 0 0 / clamp(0, var(--hero-overlay-opacity), 1));
   }
 
   &__callout {
+    min-width: 0;
+    overflow-wrap: anywhere;
     max-width: 40rem;
     padding: 2rem;
     background-color: rgb(0 0 0 / 90%);
@@ -67,16 +61,82 @@
     // like every other radius-box consumer: image, code, summary-box).
     border-radius: $usx-hero-callout-radius;
 
-    @if $usx-hero-callout-max-width {
-      max-width: $usx-hero-callout-max-width;
+    max-width: usx-when($usx-hero-callout-max-width);
+
+    padding: usx-when($usx-hero-callout-padding);
+
+    background-color: usx-when($usx-hero-callout-bg);
+  }
+
+  &--content-right &__callout {
+    margin-left: auto;
+  }
+
+  &--content-center &__callout {
+    margin-inline: auto;
+    text-align: center;
+  }
+
+  &--unboxed &__callout {
+    padding: 0;
+    background: transparent;
+    border-radius: 0;
+  }
+
+  &__secondary {
+    min-width: 0;
+    margin-top: 2rem;
+    overflow-wrap: anywhere;
+  }
+
+  &__secondary-heading {
+    margin: 0 0 1rem;
+    font-family: $usx-font-family-heading;
+    font-size: 1.5rem;
+    line-height: 1.3;
+    color: inherit;
+  }
+
+  &__secondary-link {
+    color: inherit;
+    text-decoration: underline;
+    text-underline-offset: 0.2em;
+  }
+
+  &--content-center &__secondary {
+    max-width: 40rem;
+    margin-inline: auto;
+    text-align: center;
+  }
+
+  @media (width >= 64em) {
+    &--split:not(.usx-hero--content-center) &__inner {
+      display: grid;
+      grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
+      align-items: center;
+      gap: 3rem;
     }
 
-    @if $usx-hero-callout-padding {
-      padding: $usx-hero-callout-padding;
+    &--split &__callout {
+      width: 100%;
     }
 
-    @if $usx-hero-callout-bg {
-      background-color: $usx-hero-callout-bg;
+    &--split:not(.usx-hero--content-center) &__secondary {
+      margin-top: 0;
+    }
+
+    &--split.usx-hero--content-right &__inner {
+      grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
+    }
+
+    &--split.usx-hero--content-right &__callout {
+      grid-column: 2;
+      grid-row: 1;
+    }
+
+    &--split.usx-hero--content-right &__secondary {
+      grid-column: 1;
+      grid-row: 1;
     }
   }
 
@@ -89,21 +149,13 @@
     margin-bottom: 1rem;
     color: #fff;
 
-    @if $usx-hero-heading-size {
-      font-size: $usx-hero-heading-size;
-    }
+    font-size: usx-when($usx-hero-heading-size);
 
-    @if $usx-hero-heading-font-weight {
-      font-weight: $usx-hero-heading-font-weight;
-    }
+    font-weight: usx-when($usx-hero-heading-font-weight);
 
-    @if $usx-spacing-md {
-      margin-bottom: $usx-spacing-md;
-    }
+    margin-bottom: usx-when($usx-spacing-md);
 
-    @if $usx-hero-text {
-      color: $usx-hero-text;
-    }
+    color: usx-when($usx-hero-text);
 
     &--alt {
       display: block;
@@ -112,17 +164,11 @@
       margin-bottom: 0.25rem;
       color: #66b5ee;
 
-      @if $usx-hero-alt-size {
-        font-size: $usx-hero-alt-size;
-      }
+      font-size: usx-when($usx-hero-alt-size);
 
-      @if $usx-spacing-xs {
-        margin-bottom: $usx-spacing-xs;
-      }
+      margin-bottom: usx-when($usx-spacing-xs);
 
-      @if $usx-hero-alt-text {
-        color: $usx-hero-alt-text;
-      }
+      color: usx-when($usx-hero-alt-text);
     }
   }
 
@@ -133,17 +179,11 @@
     margin-bottom: 1.5rem;
     color: #fff;
 
-    @if $usx-hero-paragraph-size {
-      font-size: $usx-hero-paragraph-size;
-    }
+    font-size: usx-when($usx-hero-paragraph-size);
 
-    @if $usx-spacing-lg {
-      margin-bottom: $usx-spacing-lg;
-    }
+    margin-bottom: usx-when($usx-spacing-lg);
 
-    @if $usx-hero-text {
-      color: $usx-hero-text;
-    }
+    color: usx-when($usx-hero-text);
   }
 }
 /* stylelint-enable selector-class-pattern */

package/src/components/_icon-list.scss

@@ -12,9 +12,7 @@
 
     // Real USWDS only colors the icon via opt-in BEM modifier classes
     // (.usa-icon-list--primary, etc.) — default it to our theme instead.
-    @if $usx-icon-list-icon-text {
-      color: $usx-icon-list-icon-text;
-    }
+    color: usx-when($usx-icon-list-icon-text);
   }
 
   .usa-icon-list__content {

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

@@ -32,57 +32,39 @@
 }
 
 .usa-in-page-nav__nav {
-  @if $usx-in-page-nav-bg {
-    background-color: $usx-in-page-nav-bg;
-  }
+  background-color: usx-when($usx-in-page-nav-bg);
 
-  @if $usx-in-page-nav-text {
-    color: $usx-in-page-nav-text;
-  }
+  color: usx-when($usx-in-page-nav-text);
 }
 
 .usa-in-page-nav__heading {
-  @if $usx-in-page-nav-text {
-    color: $usx-in-page-nav-text;
-  }
+  color: usx-when($usx-in-page-nav-text);
 }
 
 .usa-in-page-nav__list {
-  @if $usx-in-page-nav-border {
-    border-left-color: $usx-in-page-nav-border;
-  }
+  border-left-color: usx-when($usx-in-page-nav-border);
 
   a:not(.usa-button) {
     &:not(.usa-current) {
-      @if $usx-in-page-nav-link-text {
-        color: $usx-in-page-nav-link-text;
-      }
+      color: usx-when($usx-in-page-nav-link-text);
 
       &:hover {
-        @if $usx-in-page-nav-link-text-hover {
-          color: $usx-in-page-nav-link-text-hover;
-        }
+        color: usx-when($usx-in-page-nav-link-text-hover);
       }
 
       // Matches real USWDS's own compiled selector
       // (a:not(.usa-button):not(.usa-current):visited) class-for-class so
       // this wins the cascade instead of losing to it on specificity.
       &:visited {
-        @if $usx-in-page-nav-link-text {
-          color: $usx-in-page-nav-link-text;
-        }
+        color: usx-when($usx-in-page-nav-link-text);
       }
     }
 
     &.usa-current {
-      @if $usx-in-page-nav-current-text {
-        color: $usx-in-page-nav-current-text;
-      }
+      color: usx-when($usx-in-page-nav-current-text);
 
       &::after {
-        @if $usx-in-page-nav-bar {
-          background-color: $usx-in-page-nav-bar;
-        }
+        background-color: usx-when($usx-in-page-nav-bar);
       }
     }
   }

package/src/components/_input.scss

@@ -11,13 +11,9 @@
 /* ---------------------------------- */
 
 .usa-input.usx-input, .usa-select.usx-select, .usa-combo-box__input {
-  @if $usx-input-radius {
-    border-radius: $usx-input-radius;
-  }
+  border-radius: usx-when($usx-input-radius);
 
-  @if $usx-input-padding {
-    padding: $usx-input-padding;
-  }
+  padding: usx-when($usx-input-padding);
 }
 
 /* ---------------------------------- */
@@ -29,42 +25,26 @@
 .usa-input.usx-input, .usa-select.usx-select {
   &:not(.usa-input--error):not(.usa-input--success) {
     &:not(:disabled) {
-      @if $usx-input-bg {
-        background-color: $usx-input-bg;
-      }
+      background-color: usx-when($usx-input-bg);
 
-      @if $usx-input-text {
-        color: $usx-input-text;
-      }
+      color: usx-when($usx-input-text);
 
-      @if $usx-input-border {
-        border-color: $usx-input-border;
-      }
+      border-color: usx-when($usx-input-border);
     }
   }
 }
 
 .usa-input.usx-input, .usa-select.usx-select {
   &.usa-input--error {
-    @if $usx-input-error-border-width {
-      border-width: $usx-input-error-border-width;
-    }
+    border-width: usx-when($usx-input-error-border-width);
 
-    @if $usx-input-error-border {
-      border-color: $usx-input-error-border;
-    }
+    border-color: usx-when($usx-input-error-border);
 
-    @if $usx-input-error-border-style {
-      border-style: $usx-input-error-border-style;
-    }
+    border-style: usx-when($usx-input-error-border-style);
 
-    @if $usx-input-error-padding-top {
-      padding-top: $usx-input-error-padding-top;
-    }
+    padding-top: usx-when($usx-input-error-padding-top);
 
-    @if $usx-input-error-padding-bottom {
-      padding-bottom: $usx-input-error-padding-bottom;
-    }
+    padding-bottom: usx-when($usx-input-error-padding-bottom);
   }
 }
 
@@ -72,25 +52,15 @@
   // Error can be toggled dynamically (e.g. character-count) on top of a
   // statically-applied success class, so error must win when both are present.
   &.usa-input--success:not(.usa-input--error) {
-    @if $usx-input-success-border-width {
-      border-width: $usx-input-success-border-width;
-    }
+    border-width: usx-when($usx-input-success-border-width);
 
-    @if $usx-input-success-border {
-      border-color: $usx-input-success-border;
-    }
+    border-color: usx-when($usx-input-success-border);
 
-    @if $usx-input-success-border-style {
-      border-style: $usx-input-success-border-style;
-    }
+    border-style: usx-when($usx-input-success-border-style);
 
-    @if $usx-input-success-padding-top {
-      padding-top: $usx-input-success-padding-top;
-    }
+    padding-top: usx-when($usx-input-success-padding-top);
 
-    @if $usx-input-success-padding-bottom {
-      padding-bottom: $usx-input-success-padding-bottom;
-    }
+    padding-bottom: usx-when($usx-input-success-padding-bottom);
   }
 }
 
@@ -102,13 +72,9 @@
 
 .usa-input.usx-input, .usa-select.usx-select, .usa-combo-box__input {
   &:not([disabled]):focus {
-    @if $usx-input-focus-outline {
-      outline: $usx-input-focus-outline;
-    }
+    outline: usx-when($usx-input-focus-outline);
 
-    @if $usx-input-focus-outline-offset {
-      outline-offset: $usx-input-focus-outline-offset;
-    }
+    outline-offset: usx-when($usx-input-focus-outline-offset);
   }
 }
 

package/src/components/_language-selector.scss

@@ -7,19 +7,13 @@
 // the theme's primary-darker shade instead of a static hex.
 .usx-language-selector {
   .usa-language__submenu {
-    @if $usx-language-selector-menu-bg {
-      background-color: $usx-language-selector-menu-bg;
-    }
+    background-color: usx-when($usx-language-selector-menu-bg);
 
     .usa-language__submenu-item a {
-      @if $usx-language-selector-menu-text {
-        color: $usx-language-selector-menu-text;
-      }
+      color: usx-when($usx-language-selector-menu-text);
 
       &:hover {
-        @if $usx-language-selector-menu-text {
-          color: $usx-language-selector-menu-text;
-        }
+        color: usx-when($usx-language-selector-menu-text);
       }
     }
   }

package/src/components/_layout.scss

@@ -4,9 +4,7 @@
 .usx-layout {
   min-height: 100vh;
 
-  @if $usx-surface-1 {
-    background-color: $usx-surface-1;
-  }
+  background-color: usx-when($usx-surface-1);
 
   // ── Single column layout ──────────────────────────────────────────────────
   // Centers content with max-width and responsive gutters

package/src/components/_link.scss

@@ -7,36 +7,26 @@
   width: max-content;
 
   &:not([class^="text-"]):not([class*=" text-"]) {
-    @if $usx-link-text {
-      color: $usx-link-text;
-    }
+    color: usx-when($usx-link-text);
 
     &:hover {
-      @if $usx-link-text-hover {
-        color: $usx-link-text-hover;
-      }
+      color: usx-when($usx-link-text-hover);
     }
 
     &:active {
-      @if $usx-link-text-active {
-        color: $usx-link-text-active;
-      }
+      color: usx-when($usx-link-text-active);
     }
   }
 
   &:not(.usx-no-visited) {
     &:visited,
     &.usx-link--visited {
-      @if $usx-link-text-visited {
-        color: $usx-link-text-visited;
-      }
+      color: usx-when($usx-link-text-visited);
     }
   }
 
   &:focus {
-    @if $usx-input-focus-outline {
-      color: $usx-input-focus-outline;
-    }
+    color: usx-when($usx-input-focus-outline);
   }
 }
 
@@ -45,17 +35,13 @@
 .usa-dark-background .usx-link,
 .usa-dark-background .usx-prose a {
   &:not([class^="text-"]):not([class*=" text-"]) {
-    @if $usx-link-text-dark {
-      color: $usx-link-text-dark;
-    }
+    color: usx-when($usx-link-text-dark);
   }
 
   &:not(.usx-no-visited) {
     &:visited,
     &.usx-link--visited {
-      @if $usx-link-text-visited-dark {
-        color: $usx-link-text-visited-dark;
-      }
+      color: usx-when($usx-link-text-visited-dark);
     }
   }
 }

package/src/components/_misc-banner.scss

@@ -77,9 +77,7 @@
       .usx-misc-banner__dropdown-toggle:focus + .usx-misc-banner__dropdown-button {
         outline: 0.25rem solid #9bdaf1;
 
-        @if $usx-misc-banner-focus {
-          outline-color: $usx-misc-banner-focus;
-        }
+        outline-color: usx-when($usx-misc-banner-focus);
       }
 
       .usx-misc-banner__dropdown-button {

package/src/components/_modal.scss

@@ -2,24 +2,16 @@
 
 /* stylelint-disable selector-class-pattern -- Public USX classes use BEM naming. */
 .usx-modal {
-  @if $usx-modal-bg {
-    background: $usx-modal-bg;
-  }
+  background: usx-when($usx-modal-bg);
 
-  @if $usx-modal-text {
-    color: $usx-modal-text;
-  }
+  color: usx-when($usx-modal-text);
 
   .usa-modal__close {
-    @if $usx-modal-close-text {
-      color: $usx-modal-close-text;
-    }
+    color: usx-when($usx-modal-close-text);
 
     &:hover,
     &:active {
-      @if $usx-modal-close-text-hover {
-        color: $usx-modal-close-text-hover;
-      }
+      color: usx-when($usx-modal-close-text-hover);
     }
   }
 

package/src/components/_page.scss

@@ -5,13 +5,9 @@
   margin-top: 2rem;
   margin-bottom: 4rem;
 
-  @if $usx-page-bg {
-    background-color: $usx-page-bg;
-  }
+  background-color: usx-when($usx-page-bg);
 
-  @if $usx-page-text {
-    color: $usx-page-text;
-  }
+  color: usx-when($usx-page-text);
 
   .usx-page__title {
     margin-top: 0;

package/src/components/_pagination.scss

@@ -57,13 +57,9 @@
 
   // Real USWDS hardcodes the `.usa-pagination` nav to a static white bg /
   // #1b1b1b text — floats as an opaque box over a themed page background.
-  @if $usx-pagination-bg {
-    background-color: $usx-pagination-bg;
-  }
+  background-color: usx-when($usx-pagination-bg);
 
-  @if $usx-pagination-text {
-    color: $usx-pagination-text;
-  }
+  color: usx-when($usx-pagination-text);
 
   .usa-pagination__list {
     gap: 0.5rem;
@@ -79,39 +75,27 @@
   // `.usx-pagination` so it doesn't affect unrelated `.usa-current` usages
   // elsewhere (header nav, in-page-nav, sidenav).
   .usa-pagination__link {
-    @if $usx-pagination-link-text {
-      color: $usx-pagination-link-text;
-    }
+    color: usx-when($usx-pagination-link-text);
 
     &:visited {
-      @if $usx-pagination-link-text {
-        color: $usx-pagination-link-text;
-      }
+      color: usx-when($usx-pagination-link-text);
     }
 
     &:hover {
-      @if $usx-pagination-link-text-hover {
-        color: $usx-pagination-link-text-hover;
-      }
+      color: usx-when($usx-pagination-link-text-hover);
     }
   }
 
   .usa-pagination__button {
-    @if $usx-pagination-link-text {
-      color: $usx-pagination-link-text;
-    }
+    color: usx-when($usx-pagination-link-text);
 
     &:not(.usa-current) {
-      @if $usx-pagination-button-border {
-        border-color: $usx-pagination-button-border;
-      }
+      border-color: usx-when($usx-pagination-button-border);
     }
 
     &:hover {
-      @if $usx-pagination-link-text-hover {
-        color: $usx-pagination-link-text-hover;
-        border-color: $usx-pagination-link-text-hover;
-      }
+      color: usx-when($usx-pagination-link-text-hover);
+      border-color: usx-when($usx-pagination-link-text-hover);
     }
 
     // Real USWDS hardcodes the filled current-page button to a static
@@ -119,24 +103,16 @@
     // specificity than the plain-link rule above so it wins instead of
     // inheriting the link color over its own filled background.
     &.usa-current {
-      @if $usx-pagination-current-bg {
-        background-color: $usx-pagination-current-bg;
-      }
+      background-color: usx-when($usx-pagination-current-bg);
 
-      @if $usx-pagination-current-text {
-        color: $usx-pagination-current-text;
-      }
+      color: usx-when($usx-pagination-current-text);
 
       &:hover,
       &:focus,
       &:active {
-        @if $usx-pagination-current-bg {
-          background-color: $usx-pagination-current-bg;
-        }
+        background-color: usx-when($usx-pagination-current-bg);
 
-        @if $usx-pagination-current-text {
-          color: $usx-pagination-current-text;
-        }
+        color: usx-when($usx-pagination-current-text);
       }
     }
   }

package/src/components/_process-list.scss

@@ -7,24 +7,16 @@
 // themeable defaults instead.
 .usx-process-list {
   .usa-process-list__heading {
-    @if $usx-process-list-heading-text {
-      color: $usx-process-list-heading-text;
-    }
+    color: usx-when($usx-process-list-heading-text);
   }
 
   .usa-process-list__item {
-    @if $usx-process-list-border {
-      border-left-color: $usx-process-list-border;
-    }
+    border-left-color: usx-when($usx-process-list-border);
 
     &::before {
-      @if $usx-process-list-counter-text {
-        color: $usx-process-list-counter-text;
-      }
+      color: usx-when($usx-process-list-counter-text);
 
-      @if $usx-process-list-counter-border {
-        border-color: $usx-process-list-counter-border;
-      }
+      border-color: usx-when($usx-process-list-counter-border);
 
       @if $usx-process-list-counter-ring {
         background-color: $usx-process-list-counter-ring;