@solexllc/usx 0.1.5 → 0.1.7

package/package.json

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

package/src/components/_accordion.scss

@@ -22,9 +22,7 @@ $usx-accordion-icon-add: 'data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/20
 
   &.usa-accordion--bordered {
     .usa-accordion__content {
-      @if $usx-accordion-border-width {
-        border-width: $usx-accordion-border-width;
-      }
+      border-width: usx-when($usx-accordion-border-width);
     }
   }
 

package/src/components/_alert.scss

@@ -8,13 +8,9 @@
 	&.usx-alert, .usa-alert__body {
 		position: relative;
 
-		@if $usx-alert-radius {
-			border-radius: $usx-alert-radius;
-		}
+		border-radius: usx-when($usx-alert-radius);
 
-		@if $usx-alert-box-shadow {
-			box-shadow: $usx-alert-box-shadow;
-		}
+		box-shadow: usx-when($usx-alert-box-shadow);
 	}
 }
 
@@ -43,9 +39,7 @@
 
 	.#{$uswds-class-name}.#{$usa-class-name}:not(.usx-site-alert--maintenance *):not(.usx-site-alert--maintenance-warning *),
 	.#{$uswds-class-name}.#{$usa-class-name}:not(.usx-site-alert--maintenance *):not(.usx-site-alert--maintenance-warning *) .usa-alert__body {
-		@if $bg {
-			background-color: $bg;
-		}
+		background-color: usx-when($bg);
 
 		@if $color {
 			color: $color;
@@ -61,13 +55,9 @@
 			}
 		}
 
-		@if $border {
-			border-color: $border;
-		}
+		border-color: usx-when($border);
 
-		@if $usx-alert-border-width {
-			border-width: $usx-alert-border-width;
-		}
+		border-width: usx-when($usx-alert-border-width);
 	}
 }
 
@@ -109,48 +99,30 @@
 
 .usx-alert {
 	.usa-alert--slim {
-		@if $usx-alert-slim-padding-block {
-			padding-block: $usx-alert-slim-padding-block;
-		}
+		padding-block: usx-when($usx-alert-slim-padding-block);
 
-		@if $usx-alert-slim-padding-inline {
-			padding-inline: $usx-alert-slim-padding-inline;
-		}
+		padding-inline: usx-when($usx-alert-slim-padding-inline);
 	}
 
 	.usa-alert--no-icon {
-		@if $usx-alert-no-icon-padding-inline-start {
-			padding-inline-start: $usx-alert-no-icon-padding-inline-start;
-		}
+		padding-inline-start: usx-when($usx-alert-no-icon-padding-inline-start);
 	}
 
 	.usa-alert__body {
-		@if $usx-alert-body-gap {
-			gap: $usx-alert-body-gap;
-		}
+		gap: usx-when($usx-alert-body-gap);
 	}
 
 	.usa-alert__heading {
-		@if $usx-alert-heading-font-size {
-			font-size: $usx-alert-heading-font-size;
-		}
+		font-size: usx-when($usx-alert-heading-font-size);
 
-		@if $usx-alert-heading-font-weight {
-			font-weight: $usx-alert-heading-font-weight;
-		}
+		font-weight: usx-when($usx-alert-heading-font-weight);
 
-		@if $usx-alert-heading-margin-block-end {
-			margin-block-end: $usx-alert-heading-margin-block-end;
-		}
+		margin-block-end: usx-when($usx-alert-heading-margin-block-end);
 	}
 
 	.usa-alert__text {
-		@if $usx-alert-text-font-size {
-			font-size: $usx-alert-text-font-size;
-		}
+		font-size: usx-when($usx-alert-text-font-size);
 
-		@if $usx-alert-text-line-height {
-			line-height: $usx-alert-text-line-height;
-		}
+		line-height: usx-when($usx-alert-text-line-height);
 	}
 }

package/src/components/_attribution.scss

@@ -33,8 +33,6 @@
     font-size: $usx-attribution-secondary-font-size;
     color: #71767a;
 
-    @if $usx-attribution-secondary-text {
-      color: $usx-attribution-secondary-text;
-    }
+    color: usx-when($usx-attribution-secondary-text);
   }
 }

package/src/components/_avatar-group.scss

@@ -25,9 +25,7 @@
         img {
           box-shadow: 0 0 0 2px #00bde3;
 
-          @if $usx-avatar-group-overlap-box-shadow {
-            box-shadow: $usx-avatar-group-overlap-box-shadow;
-          }
+          box-shadow: usx-when($usx-avatar-group-overlap-box-shadow);
         }
       }
     }

package/src/components/_avatar.scss

@@ -4,9 +4,10 @@
 /* stylelint-disable no-descending-specificity -- Size modifiers intentionally precede the base content rule. */
 .usx-avatar {
   text-decoration: none;
-  display: block;
+  display: flex;
   width: 3rem;
   height: 3rem;
+  align-items: center;
 
   &.usx-avatar--size-sm {
     width: 2.5rem;
@@ -41,9 +42,8 @@
   }
 
   .usx-avatar__img {
-    height: 100%;
-    width: 100%;
-    object-fit: cover;
+    height: auto;
+    width: auto;
   }
 
   .usx-avatar__content {

package/src/components/_banner.scss

@@ -2,29 +2,19 @@
 
 /* stylelint-disable selector-class-pattern -- Public USX classes use BEM naming. */
 .usa-banner.usx-banner {
-  @if $usx-banner-bg {
-    background-color: $usx-banner-bg;
-  }
+  background-color: usx-when($usx-banner-bg);
 
-  @if $usx-banner-text {
-    color: $usx-banner-text;
-  }
+  color: usx-when($usx-banner-text);
 
   .usa-banner__header-text, .usa-banner__content {
-    @if $usx-banner-text {
-      color: $usx-banner-text;
-    }
+    color: usx-when($usx-banner-text);
   }
 
   .usa-banner__button {
-    @if $usx-banner-button-text {
-      color: $usx-banner-button-text;
-    }
+    color: usx-when($usx-banner-button-text);
   }
 
   .usa-banner__button::after {
-    @if $usx-banner-chevron-text {
-      background-color: $usx-banner-chevron-text;
-    }
+    background-color: usx-when($usx-banner-chevron-text);
   }
 }

package/src/components/_block.scss

@@ -31,9 +31,7 @@
     background-color: #e2e8f0;
     padding: 1rem 1.25rem;
 
-    @if $usx-block-callout-bg {
-      background-color: $usx-block-callout-bg;
-    }
+    background-color: usx-when($usx-block-callout-bg);
     
     @if $usx-block-border-width {
       border-width: $usx-block-border-width 0 0;

package/src/components/_branding.scss

@@ -45,17 +45,13 @@
 
 .usa-header {
   .usx-logo__title {
-    @if $usx-header-text {
-      color: $usx-header-text;
-    }
+    color: usx-when($usx-header-text);
   }
 }
 
 .usa-footer {
   .usx-logo__title {
-    @if $usx-footer-text {
-      color: $usx-footer-text;
-    }
+    color: usx-when($usx-footer-text);
   }
 }
 

package/src/components/_breadcrumb.scss

@@ -5,31 +5,21 @@
 // Real USWDS hardcodes breadcrumb background/text to fixed #fff/#1b1b1b —
 // give it a themeable default instead (nav/wayfinding element).
 .usx-breadcrumb {
-  @if $usx-breadcrumb-bg {
-    background-color: $usx-breadcrumb-bg;
-  }
+  background-color: usx-when($usx-breadcrumb-bg);
 
-  @if $usx-breadcrumb-text {
-    color: $usx-breadcrumb-text;
-  }
+  color: usx-when($usx-breadcrumb-text);
 
   .usa-breadcrumb__link {
-    @if $usx-breadcrumb-link-text {
-      color: $usx-breadcrumb-link-text;
-    }
+    color: usx-when($usx-breadcrumb-link-text);
 
     &:hover {
-      @if $usx-breadcrumb-link-text-hover {
-        color: $usx-breadcrumb-link-text-hover;
-      }
+      color: usx-when($usx-breadcrumb-link-text-hover);
     }
   }
 
   .usa-breadcrumb__list-item {
     &.usa-current {
-      @if $usx-breadcrumb-current-text {
-        color: $usx-breadcrumb-current-text;
-      }
+      color: usx-when($usx-breadcrumb-current-text);
     }
   }
 }

package/src/components/_button-group.scss

@@ -7,9 +7,7 @@
     &.usa-button-group--segmented {
       .usa-button-group__item {
         &:where(:not(:last-child)) #{$selector}::before {
-          @if $divider {
-            border-right: $divider;
-          }
+          border-right: usx-when($divider);
         }
 
         &:where(:not(:first-child):not(:last-child)) {

package/src/components/_button.scss

@@ -8,14 +8,10 @@
 
 /* ---------------------------------- */
 .usa-button.usx-button:not(.usa-button--unstyled) {
-  @if $usx-radius-button {
-    border-radius: $usx-radius-button;
-  }
+  border-radius: usx-when($usx-radius-button);
 
   &:not(.usa-button--outline) {
-    @if $usx-button-box-shadow {
-      box-shadow: $usx-button-box-shadow;
-    }
+    box-shadow: usx-when($usx-button-box-shadow);
   }
 }
 
@@ -62,40 +58,26 @@
 ) {
   /* Non-disabled buttons only */
   .usa-button.usx-button#{$selector}:not(:disabled):not([aria-disabled="true"]):not(.usx-button--ghost) {
-    @if $bg {
-      background-color: $bg;
-    }
+    background-color: usx-when($bg);
 
-    @if $color {
-      color: $color;
-    }
+    color: usx-when($color);
 
-    @if $box-shadow {
-      box-shadow: $box-shadow;
-    }
+    box-shadow: usx-when($box-shadow);
 
     /* Hover state */
     &.usa-button--hover,
     &:hover {
-      @if $bg-hover {
-        background-color: $bg-hover;
-      }
+      background-color: usx-when($bg-hover);
 
-      @if $color-hover {
-        color: $color-hover;
-      }
+      color: usx-when($color-hover);
     }
 
     /* Active state */
     &.usa-button--active,
     &:active {
-      @if $bg-active {
-        background-color: $bg-active;
-      }
+      background-color: usx-when($bg-active);
 
-      @if $color-active {
-        color: $color-active;
-      }
+      color: usx-when($color-active);
     }
 
     /* Inverse modifier */
@@ -199,33 +181,23 @@
 
     &:not([disabled]):not([aria-disabled="true"]) {
       &.usa-button--primary {
-        @if $usx-color-primary {
-          color: $usx-color-primary;
-        }
+        color: usx-when($usx-color-primary);
       }
 
       &.usa-button--secondary {
-        @if $usx-color-secondary {
-          color: $usx-color-secondary;
-        }
+        color: usx-when($usx-color-secondary);
       }
 
       &.usa-button--accent-cool {
-        @if $usx-color-accent-cool {
-          color: $usx-color-accent-cool;
-        }
+        color: usx-when($usx-color-accent-cool);
       }
 
       &.usa-button--accent-warm {
-        @if $usx-color-accent-warm {
-          color: $usx-color-accent-warm;
-        }
+        color: usx-when($usx-color-accent-warm);
       }
 
       &.usa-button--base {
-        @if $usx-color-base {
-          color: $usx-color-base;
-        }
+        color: usx-when($usx-color-base);
       }
 
       &.usa-button--hover,
@@ -241,9 +213,7 @@
       &.usa-button--inverse {
         color: white;
 
-        @if $usx-surface-1 {
-          color: $usx-surface-1;
-        }
+        color: usx-when($usx-surface-1);
       }
     }
   }

package/src/components/_carousel.scss

@@ -45,9 +45,7 @@
   outline: .25rem solid #2491ff;
   outline-offset: -.25rem;
 
-  @if $usx-carousel-focus {
-    outline-color: $usx-carousel-focus;
-  }
+  outline-color: usx-when($usx-carousel-focus);
 }
 
 /* ============================= */
@@ -64,9 +62,7 @@
   bottom: 10px;
   width: 100%;
 
-  @if $usx-carousel-dot-gap {
-    gap: $usx-carousel-dot-gap;
-  }
+  gap: usx-when($usx-carousel-dot-gap);
 }
 
 .usx-carousel__dots a {
@@ -77,24 +73,18 @@
   display: inline-block;
   text-decoration: none;
 
-  @if $usx-carousel-dot-bg {
-    background: $usx-carousel-dot-bg;
-  }
+  background: usx-when($usx-carousel-dot-bg);
 
   &:hover {
     background: #a0a0a0;
 
-    @if $usx-carousel-dot-bg-hover {
-      background: $usx-carousel-dot-bg-hover;
-    }
+    background: usx-when($usx-carousel-dot-bg-hover);
   }
 
   &:active {
     background: #808080;
 
-    @if $usx-carousel-dot-bg-active {
-      background: $usx-carousel-dot-bg-active;
-    }
+    background: usx-when($usx-carousel-dot-bg-active);
   }
 }
 
@@ -113,9 +103,7 @@
     overflow: hidden;
     background-color: #f8fafc;
 
-    @if $usx-carousel-card-media-bg {
-      background-color: $usx-carousel-card-media-bg;
-    }
+    background-color: usx-when($usx-carousel-card-media-bg);
   }
 
   &.usa-card__media--inset {

package/src/components/_checkbox.scss

@@ -2,15 +2,11 @@
 
 /* stylelint-disable selector-class-pattern -- Public USX classes use BEM naming. */
 .usa-checkbox__label {
-  @if $usx-text-ink {
-    color: $usx-text-ink;
-  }
+  color: usx-when($usx-text-ink);
 }
 
 .usa-checkbox__input--tile + .usa-checkbox__label {
-  @if $usx-surface-1 {
-    background-color: $usx-surface-1;
-  }
+  background-color: usx-when($usx-surface-1);
 }
 
 .usx-checkbox {
@@ -21,23 +17,15 @@
   }
 
   .usa-checkbox__input--tile + .usa-checkbox__label {
-    @if $usx-checkable-tile-border {
-      border-color: $usx-checkable-tile-border;
-    }
+    border-color: usx-when($usx-checkable-tile-border);
 
-    @if $usx-checkable-tile-border-width {
-      border-width: $usx-checkable-tile-border-width;
-    }
+    border-width: usx-when($usx-checkable-tile-border-width);
   }
 
   .usa-checkbox__label::before {
-    @if $usx-checkable-radius {
-      border-radius: $usx-checkable-radius;
-    }
+    border-radius: usx-when($usx-checkable-radius);
 
-    @if $usx-checkable-bg {
-      background-color: $usx-checkable-bg;
-    }
+    background-color: usx-when($usx-checkable-bg);
 
     @if $usx-checkable-border {
       box-shadow: 0 0 0 2px $usx-checkable-border;
@@ -55,9 +43,7 @@
     }
 
     &.usa-checkbox__input--tile + .usa-checkbox__label {
-      @if $usx-color-primary {
-        border-color: $usx-color-primary;
-      }
+      border-color: usx-when($usx-color-primary);
     }
   }
 }

package/src/components/_clickable.scss

@@ -57,25 +57,17 @@
     .usx-clickable__color-on-hover {
       color: #005ea2;
 
-      @if $usx-clickable-text-hover {
-        color: $usx-clickable-text-hover;
-      }
+      color: usx-when($usx-clickable-text-hover);
 
-      @if $usx-color-primary {
-        color: $usx-color-primary;
-      }
+      color: usx-when($usx-color-primary);
     }
 
     .usx-clickable__bg-color-on-hover {
       background-color: #005ea2;
 
-      @if $usx-clickable-text-hover {
-        background-color: $usx-clickable-text-hover;
-      }
+      background-color: usx-when($usx-clickable-text-hover);
 
-      @if $usx-color-primary {
-        background-color: $usx-color-primary;
-      }
+      background-color: usx-when($usx-color-primary);
     }
   }
 }

package/src/components/_collection.scss

@@ -14,14 +14,10 @@
   // (self-contained badge, same class applied directly to the <li>) and
   // must not inherit this muted text color over their own background.
   .usa-collection__meta-item:not(.usa-tag) {
-    @if $usx-collection-meta-text {
-      color: $usx-collection-meta-text;
-    }
+    color: usx-when($usx-collection-meta-text);
   }
 
   .usa-collection__description {
-    @if $usx-collection-description-text {
-      color: $usx-collection-description-text;
-    }
+    color: usx-when($usx-collection-description-text);
   }
 }

package/src/components/_combobox.scss

@@ -21,10 +21,8 @@
 // preset even though it's just the ordinary brand primary color (not a fixed
 // system gray) — chain it to the theme instead.
 .usa-combo-box__list-option--selected {
-  @if $usx-combo-box-selected-bg {
-    background-color: $usx-combo-box-selected-bg;
-    border-color: $usx-combo-box-selected-bg;
-  }
+  background-color: usx-when($usx-combo-box-selected-bg);
+  border-color: usx-when($usx-combo-box-selected-bg);
 }
 
 .usx-combo-box,
@@ -36,24 +34,14 @@
     padding-top: calc(0.5rem - 0.25rem);
     padding-bottom: calc(0.5rem - 0.25rem);
 
-    @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);
   }
 }