@solexllc/usx 0.1.4 → 0.1.6

package/src/components/_file-input.scss

@@ -9,13 +9,9 @@
 /* ---------------------------------- */
 
 .usa-file-input__target {
-  @if $usx-input-radius {
-    border-radius: $usx-input-radius;
-  }
+  border-radius: usx-when($usx-input-radius);
 
-  @if $usx-input-border {
-    border-color: $usx-input-border;
-  }
+  border-color: usx-when($usx-input-border);
 }
 
 /* ---------------------------------- */
@@ -25,28 +21,20 @@
 /* ---------------------------------- */
 
 .usa-form-group--error .usa-file-input__target {
-    @if $usx-input-error-border {
-        border-color: $usx-input-error-border;
-    }
+    border-color: usx-when($usx-input-error-border);
 
-    @if $usx-file-input-border-width {
-        border-width: $usx-file-input-border-width;
-    }
+    border-width: usx-when($usx-file-input-border-width);
 }
 
 .usa-file-input__target.has-invalid-file {
   // For some reason, they use accent warm here. Very odd.
-  @if $usx-color-accent-warm {
-    border-color: $usx-color-accent-warm;
-  }
+  border-color: usx-when($usx-color-accent-warm);
 }
 
 // USWDS bakes this message to a fixed "secondary-dark" red (#b50909)
 // regardless of theme — reuse the same error color as .usa-error-message.
 .has-invalid-file .usa-file-input__accepted-files-message {
-  @if $usx-color-error {
-    color: $usx-color-error;
-  }
+  color: usx-when($usx-color-error);
 }
 
 /* ---------------------------------- */
@@ -103,26 +91,18 @@
 // so it doesn't track a themed link color otherwise — reuse the same
 // usx-link variables/states rather than introducing a separate token.
 .usa-file-input__choose {
-  @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);
   }
 
   &:visited {
-    @if $usx-link-text-visited {
-      color: $usx-link-text-visited;
-    }
+    color: usx-when($usx-link-text-visited);
   }
 }
 
@@ -130,7 +110,7 @@
 
 /* Managed-multiple file list         */
 
-/* (VA.gov-style per-file delete rows, see FileInput.jsx) */
+/* (VA.gov-style per-file delete rows, see FileInput.tsx) */
 
 /* ---------------------------------- */
 
@@ -154,17 +134,11 @@
   margin-bottom: 0.5rem;
   padding: 0.5rem 1rem;
 
-  @if $usx-input-radius {
-    border-radius: $usx-input-radius;
-  }
+  border-radius: usx-when($usx-input-radius);
 
-  @if $usx-file-input-item-border {
-    border-color: $usx-file-input-item-border;
-  }
+  border-color: usx-when($usx-file-input-item-border);
 
-  @if $usx-file-input-item-border-width {
-    border-width: $usx-file-input-item-border-width;
-  }
+  border-width: usx-when($usx-file-input-item-border-width);
 }
 
 // Info stays on the left and shrinks (long names wrap) so the Delete button
@@ -189,9 +163,7 @@
 }
 
 .usx-file-input__file-size {
-  @if $usx-color-base {
-    color: $usx-color-base;
-  }
+  color: usx-when($usx-color-base);
 }
 
 .usx-file-input__delete-button {

package/src/components/_footer.scss

@@ -2,41 +2,27 @@
 
 /* stylelint-disable selector-class-pattern, no-descending-specificity -- Public USX classes use BEM naming; intentional cascade order. */
 .usx-footer {
-  @if $usx-footer-bg {
-    background-color: $usx-footer-bg;
-  }
+  background-color: usx-when($usx-footer-bg);
 
-  @if $usx-footer-border-top {
-    border-top: $usx-footer-border-top;
-  }
+  border-top: usx-when($usx-footer-border-top);
 
-  @if $usx-footer-text {
-    color: $usx-footer-text;
-  }
+  color: usx-when($usx-footer-text);
 
   // ── Nav columns (big footer) ──────────────────────────────────────────────
   &__nav-column {
     .usa-footer__primary-link {
-      @if $usx-footer-heading-text {
-        color: $usx-footer-heading-text;
-      }
+      color: usx-when($usx-footer-heading-text);
 
       &.usa-footer__primary-link--button {
-        @if $usx-footer-bg {
-          background-color: $usx-footer-bg;
-        }
+        background-color: usx-when($usx-footer-bg);
       }
     }
 
     .usa-footer__secondary-link a {
-      @if $usx-footer-secondary-link-text {
-        color: $usx-footer-secondary-link-text;
-      }
+      color: usx-when($usx-footer-secondary-link-text);
 
       &:hover {
-        @if $usx-footer-secondary-link-text-hover {
-          color: $usx-footer-secondary-link-text-hover;
-        }
+        color: usx-when($usx-footer-secondary-link-text-hover);
       }
     }
   }
@@ -44,15 +30,11 @@
   // ── Sign-up form ─────────────────────────────────────────────────────────
   &__sign-up {
     .usa-sign-up__heading {
-      @if $usx-footer-heading-text {
-        color: $usx-footer-heading-text;
-      }
+      color: usx-when($usx-footer-heading-text);
     }
 
     .usa-button {
-      @if $usx-footer-sign-up-button-bg {
-        background-color: $usx-footer-sign-up-button-bg;
-      }
+      background-color: usx-when($usx-footer-sign-up-button-bg);
     }
   }
 
@@ -60,9 +42,7 @@
   &__logo {
     .usa-footer__logo-heading,
     a.usa-footer__logo-heading {
-      @if $usx-footer-heading-secondary-text {
-        color: $usx-footer-heading-secondary-text;
-      }
+      color: usx-when($usx-footer-heading-secondary-text);
 
       text-decoration: none;
     }
@@ -70,22 +50,14 @@
 
   // ── Social links ─────────────────────────────────────────────────────────
   .usa-social-link {
-    @if $usx-footer-link-text {
-      color: $usx-footer-link-text;
-    }
+    color: usx-when($usx-footer-link-text);
 
-    @if $usx-footer-social-radius {
-      border-radius: $usx-footer-social-radius;
-    }
+    border-radius: usx-when($usx-footer-social-radius);
 
     &:hover {
-      @if $usx-footer-social-bg-hover {
-        background-color: $usx-footer-social-bg-hover;
-      }
+      background-color: usx-when($usx-footer-social-bg-hover);
 
-      @if $usx-footer-social-hover-border {
-        border: $usx-footer-social-hover-border;
-      }
+      border: usx-when($usx-footer-social-hover-border);
 
       @if $usx-footer-social-hover-outline {
         outline: $usx-footer-social-hover-outline;
@@ -94,9 +66,7 @@
     }
 
     .usa-social-link__icon {
-      @if $usx-footer-social-icon-filter {
-        filter: $usx-footer-social-icon-filter;
-      }
+      filter: usx-when($usx-footer-social-icon-filter);
     }
   }
 
@@ -107,20 +77,14 @@
     }
 
     .usa-footer__contact-heading {
-      @if $usx-footer-heading-secondary-text {
-        color: $usx-footer-heading-secondary-text;
-      }
+      color: usx-when($usx-footer-heading-secondary-text);
     }
 
     a {
-      @if $usx-footer-link-text {
-        color: $usx-footer-link-text;
-      }
+      color: usx-when($usx-footer-link-text);
 
       &:hover {
-        @if $usx-footer-link-text-hover {
-          color: $usx-footer-link-text-hover;
-        }
+        color: usx-when($usx-footer-link-text-hover);
       }
     }
   }
@@ -129,32 +93,22 @@
   .usa-footer__secondary-section {
     background-color: unset;
 
-    @if $usx-footer-secondary-section-border-top {
-      border-top: $usx-footer-secondary-section-border-top;
-    }
+    border-top: usx-when($usx-footer-secondary-section-border-top);
   }
 
   .usa-footer__primary-section {
-    @if $usx-footer-primary-bg {
-      background-color: $usx-footer-primary-bg;
-    }
+    background-color: usx-when($usx-footer-primary-bg);
 
-    @if $usx-footer-primary-section-border-top {
-      border-top: $usx-footer-primary-section-border-top;
-    }
+    border-top: usx-when($usx-footer-primary-section-border-top);
   }
 
   // ── Primary-section nav links ────────────────────────────────────────────
   .usa-footer__nav {
     a.usa-footer__primary-link {
-      @if $usx-footer-link-text {
-        color: $usx-footer-link-text;
-      }
+      color: usx-when($usx-footer-link-text);
 
       &:hover {
-        @if $usx-footer-link-text-hover {
-          color: $usx-footer-link-text-hover;
-        }
+        color: usx-when($usx-footer-link-text-hover);
       }
     }
   }

package/src/components/_form-group.scss

@@ -4,29 +4,19 @@
 .usa-label,
 .usa-legend,
 .usa-fieldset > legend {
-  @if $usx-text-ink {
-    color: $usx-text-ink;
-  }
+  color: usx-when($usx-text-ink);
 }
 
 .usa-hint {
-  @if $usx-text-subtle {
-    color: $usx-text-subtle;
-  }
+  color: usx-when($usx-text-subtle);
 }
 
 .usx-form-group.usa-form-group--error {
-  @if $usx-form-group-error-text {
-    border-color: $usx-form-group-error-text;
-  }
+  border-color: usx-when($usx-form-group-error-text);
 
-  @if $usx-form-group-error-border-width {
-    border-width: $usx-form-group-error-border-width;
-  }
+  border-width: usx-when($usx-form-group-error-border-width);
 }
 
 .usa-error-message {
-    @if $usx-color-error {
-        color: $usx-color-error;
-    }
+    color: usx-when($usx-color-error);
 }

package/src/components/_header.scss

@@ -3,21 +3,13 @@
 /* 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;
-  }
+  background-color: usx-when($usx-header-bg);
 
-  @if $usx-header-text {
-    color: $usx-header-text;
-  }
+  color: usx-when($usx-header-text);
 
-  @if $usx-header-border-bottom {
-    border-bottom: $usx-header-border-bottom;
-  }
+  border-bottom: usx-when($usx-header-border-bottom);
 
-  @if $usx-header-border-top {
-    border-top: $usx-header-border-top;
-  }
+  border-top: usx-when($usx-header-border-top);
 
   &::after {
     display: none;
@@ -28,14 +20,10 @@
 
   .usa-navbar {
     .usa-menu-btn {
-      @if $usx-header-menu-btn-bg {
-        background-color: $usx-header-menu-btn-bg;
-      }
+      background-color: usx-when($usx-header-menu-btn-bg);
 
       &:hover {
-        @if $usx-header-menu-btn-bg-hover {
-          background-color: $usx-header-menu-btn-bg-hover;
-        }
+        background-color: usx-when($usx-header-menu-btn-bg-hover);
       }
     }
   }
@@ -55,31 +43,29 @@
 
 }
 
-// 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.
+// .usx-nav is two different surfaces depending on width. Below 64em it is the
+// off-canvas drawer in EVERY layout — vendor paints it a hardcoded opaque
+// white, so a dark theme's drawer would otherwise revert to an unstyled white
+// panel. At desktop it's only a distinct surface in the extended layout (a
+// full-width bar under the header); the basic layout's nav sits inline in the
+// header bar and must inherit the header background instead.
 //
-// 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 {
+// The extended layout renders <header> and <nav> as siblings (see
+// Header.tsx), so neither rule can be nested under .usx-header.
+.usx-nav {
   @media (width < 64em) {
-    @if $usx-header-nav-bg-mobile {
-      background-color: $usx-header-nav-bg-mobile;
-    }
+    background-color: usx-when($usx-header-nav-bg-mobile);
   }
+}
 
+:has(> .usa-header--extended) .usx-nav {
   @media (width >=64em) {
-    @if $usx-header-nav-bg {
-      background-color: $usx-header-nav-bg;
-    }
+    background-color: usx-when($usx-header-nav-bg);
   }
 }
 
-:has(> .usa-header--extended) {  // 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
@@ -87,9 +73,7 @@
   // of the drawer's own).
   @media (width >=64em) {
     .usx-nav {
-      @if $usx-header-nav-border-bottom {
-        border-bottom: $usx-header-nav-border-bottom;
-      }
+      border-bottom: usx-when($usx-header-nav-border-bottom);
 
       @if $usx-header-nav-border-top {
         border-top: $usx-header-nav-border-top;
@@ -180,14 +164,10 @@
 
         // Vendor hardcodes this hover background at mobile only (and resets
         // it to transparent again at desktop) — match that scoping.
-        @if $usx-header-nav-link-bg-hover {
-          background-color: $usx-header-nav-link-bg-hover;
-        }
+        background-color: usx-when($usx-header-nav-link-bg-hover);
 
         &>span::after {
-          @if $usx-header-nav-link-text-hover-mobile {
-            background-color: $usx-header-nav-link-text-hover-mobile;
-          }
+          background-color: usx-when($usx-header-nav-link-text-hover-mobile);
         }
       }
     }
@@ -197,9 +177,7 @@
         color: $usx-header-nav-link-text-hover;
 
         &>span::after {
-          @if $usx-header-nav-link-text-hover {
-            background-color: $usx-header-nav-link-text-hover;
-          }
+          background-color: usx-when($usx-header-nav-link-text-hover);
         }
       }
     }
@@ -210,9 +188,7 @@
 
         // Vendor hardcodes this hover background at mobile only; desktop
         // links get no hover background at all.
-        @if $usx-header-nav-link-bg-hover {
-          background-color: $usx-header-nav-link-bg-hover;
-        }
+        background-color: usx-when($usx-header-nav-link-bg-hover);
       }
 
       @media (width >=64em) {
@@ -233,14 +209,10 @@
     // drawer link tokens, not the desktop primary-nav ones.
     // .usa-icon fills via `currentColor`, so tint it with `color`, not
     // `background-color` (which would draw a solid box behind the icon).
-    @if $usx-header-nav-link-text-mobile {
-      color: $usx-header-nav-link-text-mobile;
-    }
+    color: usx-when($usx-header-nav-link-text-mobile);
 
     &:hover {
-      @if $usx-header-nav-link-text-hover-mobile {
-        color: $usx-header-nav-link-text-hover-mobile;
-      }
+      color: usx-when($usx-header-nav-link-text-hover-mobile);
     }
   }
 
@@ -292,14 +264,10 @@
       &:not(.usa-nav__primary button:hover,
         .usa-nav__primary > .usa-nav__primary-item > a:hover,
         .usa-current) {
-        @if $usx-header-nav-link-text-mobile {
-          color: $usx-header-nav-link-text-mobile;
-        }
+        color: usx-when($usx-header-nav-link-text-mobile);
 
         &>span::after {
-          @if $usx-header-nav-link-text-mobile {
-            background-color: $usx-header-nav-link-text-mobile;
-          }
+          background-color: usx-when($usx-header-nav-link-text-mobile);
         }
       }
     }
@@ -310,14 +278,10 @@
         .usa-nav__primary button:hover,
         .usa-nav__primary > .usa-nav__primary-item > a:hover,
         .usa-current) {
-        @if $usx-header-nav-link-text {
-          color: $usx-header-nav-link-text;
-        }
+        color: usx-when($usx-header-nav-link-text);
 
         &>span::after {
-          @if $usx-header-nav-link-text {
-            background-color: $usx-header-nav-link-text;
-          }
+          background-color: usx-when($usx-header-nav-link-text);
         }
       }
     }
@@ -327,9 +291,7 @@
     // exists in vendor's desktop rules).
     @media (width >=64em) {
       &.usa-current {
-        @if $usx-header-nav-link-text {
-          color: $usx-header-nav-link-text;
-        }
+        color: usx-when($usx-header-nav-link-text);
       }
     }
 
@@ -338,17 +300,13 @@
     // desktop bottom-bar treatment at this width.
     @media (width < 64em) {
       &.usa-current {
-        @if $usx-header-nav-link-text-hover-mobile {
-          color: $usx-header-nav-link-text-hover-mobile;
-        }
+        color: usx-when($usx-header-nav-link-text-hover-mobile);
 
         font-weight: 700;
         position: relative;
 
         &::after {
-          @if $usx-header-nav-link-text-hover-mobile {
-            background-color: $usx-header-nav-link-text-hover-mobile;
-          }
+          background-color: usx-when($usx-header-nav-link-text-hover-mobile);
 
           border-radius: 99rem;
           content: "";
@@ -407,15 +365,11 @@
         }
 
         &+.usa-nav__submenu {
-          @if $usx-header-nav-submenu-bg {
-            background-color: $usx-header-nav-submenu-bg;
-          }
+          background-color: usx-when($usx-header-nav-submenu-bg);
 
           &::before,
           &::after {
-            @if $usx-header-nav-submenu-bg {
-              background-color: $usx-header-nav-submenu-bg;
-            }
+            background-color: usx-when($usx-header-nav-submenu-bg);
           }
         }
       }
@@ -423,14 +377,10 @@
   }
 
   .usa-nav__secondary-item>a {
-    @if $usx-header-secondary-link-text {
-      color: $usx-header-secondary-link-text;
-    }
+    color: usx-when($usx-header-secondary-link-text);
 
     &:hover {
-      @if $usx-header-secondary-link-text-hover {
-        color: $usx-header-secondary-link-text-hover;
-      }
+      color: usx-when($usx-header-secondary-link-text-hover);
     }
   }
 
@@ -454,24 +404,16 @@
     // 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 {
-      @if $usx-header-nav-link-text {
-        color: $usx-header-nav-link-text;
-      }
+      color: usx-when($usx-header-nav-link-text);
 
       &:hover {
-        @if $usx-header-nav-link-text-hover {
-          color: $usx-header-nav-link-text-hover;
-        }
+        color: usx-when($usx-header-nav-link-text-hover);
 
-        @if $usx-header-nav-link-bg-hover {
-          background-color: $usx-header-nav-link-bg-hover;
-        }
+        background-color: usx-when($usx-header-nav-link-bg-hover);
       }
 
       &.usa-current {
-        @if $usx-header-nav-link-text-hover {
-          color: $usx-header-nav-link-text-hover;
-        }
+        color: usx-when($usx-header-nav-link-text-hover);
 
         font-weight: 700;
       }