uswds-jekyll 5.3.0 → 5.4.0

data/_sass/uswds/src/elements/form-controls/_date-picker.scss

@@ -45,7 +45,7 @@
 
 .usa-date-picker__button {
   @extend %usa-date-picker__button;
-  @include add-background-svg("calendar-alt-solid");
+  @include add-background-svg("usa-icons/calendar_today");
   align-self: stretch;
   background-color: transparent;
   background-position: center;
@@ -115,25 +115,25 @@
 .usa-date-picker__calendar__next-month {
   @extend %usa-date-picker__button;
   background-position: center;
-  background-size: auto units(2.5);
+  background-size: auto units(3);
   height: units(3);
   padding: 20px 10px;
 }
 
 .usa-date-picker__calendar__previous-year:not([disabled]) {
-  @include add-background-svg("angle-double-left-solid");
+  @include add-background-svg("usa-icons/navigate_far_before");
 }
 
 .usa-date-picker__calendar__previous-month:not([disabled]) {
-  @include add-background-svg("angle-left-solid");
+  @include add-background-svg("usa-icons/navigate_before");
 }
 
 .usa-date-picker__calendar__next-year:not([disabled]) {
-  @include add-background-svg("angle-double-right-solid");
+  @include add-background-svg("usa-icons/navigate_far_next");
 }
 
 .usa-date-picker__calendar__next-month:not([disabled]) {
-  @include add-background-svg("angle-right-solid");
+  @include add-background-svg("usa-icons/navigate_next");
 }
 
 .usa-date-picker__calendar__day-of-week {
@@ -282,11 +282,11 @@
 }
 
 .usa-date-picker__calendar__previous-year-chunk:not([disabled]) {
-  @include add-background-svg("angle-left-solid");
+  @include add-background-svg("usa-icons/navigate_before");
 }
 
 .usa-date-picker__calendar__next-year-chunk:not([disabled]) {
-  @include add-background-svg("angle-right-solid");
+  @include add-background-svg("usa-icons/navigate_next");
 }
 
 .usa-date-picker__calendar__year {

data/_sass/uswds/src/elements/form-controls/_dropdown.scss

@@ -1,11 +1,11 @@
 .usa-select {
   @extend %block-input-general;
   @extend %block-input-styles;
-  @include add-background-svg("arrow-both");
+  @include add-background-svg("usa-icons/unfold_more");
   appearance: none;
   background-color: color("white");
-  background-position: right units(1.5) center;
-  background-size: units(1);
+  background-position: right units(1) center;
+  background-size: units(2.5);
   padding-right: units(4);
 
   &::-ms-expand {

data/_sass/uswds/src/elements/form-controls/_file-input.scss

@@ -190,7 +190,7 @@
   }
 
   .usa-file-input__box {
-    background-color: color($theme-color-disabled-light);
+    background-color: color("disabled-light");
   }
 
   .usa-file-input__input[type] {

data/_sass/uswds/src/elements/form-controls/_global.scss

@@ -80,7 +80,8 @@ $input-select-margin-right: 1.5;
   margin-top: 0;
 }
 
-.usa-label--required {
+.usa-label--required,
+.usa-hint--required {
   color: color("error-dark");
 }
 
@@ -89,3 +90,8 @@ $input-select-margin-right: 1.5;
   font-weight: font-weight("bold");
   margin-top: units(2);
 }
+
+// Don't show dotted underline with "required" asterisk because it can cause legibility issues ad appear as an ellipsis...
+abbr[title="required"] {
+  text-decoration: none;
+}

data/_sass/uswds/src/elements/typography/_content.scss

@@ -47,6 +47,10 @@
   a {
     color: color("base-lighter");
 
+    &:visited {
+      color: color("base-lighter");
+    }
+
     &:hover {
       color: color("white");
     }

data/_sass/uswds/src/elements/typography/_links.scss

@@ -7,9 +7,15 @@
 // [href^='https:']:not([href*='my-domain.com'])
 
 .usa-link--external {
-  @include external-link(external-link, external-link-hover);
+  @include external-link(
+    usa-icons-bg/launch--blue-60v,
+    usa-icons-bg/launch--blue-70v
+  );
 
   &.usa-link--alt {
-    @include external-link(external-link-alt, external-link-alt-hover);
+    @include external-link(
+      usa-icons-bg/launch--gray-5,
+      usa-icons-bg/launch--white
+    );
   }
 }

data/_sass/uswds/src/packages/_usa-collection.scss

@@ -0,0 +1,2 @@
+// src
+@import "../components/collection";

data/_sass/uswds/src/packages/_usa-icon.scss

@@ -0,0 +1 @@
+@import "../components/icon";

data/_sass/uswds/src/packages/_usa-site-alert.scss

@@ -0,0 +1,5 @@
+// dependencies
+@import "../components/alerts";
+
+// src
+@import "../components/site-alert";

data/_sass/uswds/src/packages/_uswds-components.scss

@@ -29,20 +29,25 @@
 @import "../components/button-groups";
 @import "../components/card";
 @import "../components/checklist";
+@import "../components/collection";
 @import "../components/footer";
 @import "../components/forms";
 @import "../components/graphic-list";
 @import "../components/header";
 @import "../components/hero";
+@import "../components/icon";
 @import "../components/layout";
 @import "../components/media-block";
 @import "../components/megamenu";
 @import "../components/nav-container";
 @import "../components/navbar";
 @import "../components/navigation";
+@import "../components/process-list";
 @import "../components/step-indicator";
 @import "../components/search";
 @import "../components/section";
 @import "../components/sidenav";
+@import "../components/site-alert";
 @import "../components/skipnav";
+@import "../components/summary-box";
 @import "../components/tooltip";

data/_sass/uswds/src/settings/_settings-color.scss

@@ -7,7 +7,7 @@
 ========================================
 ========================================
 ----------------------------------------
-USWDS 2.9.0
+USWDS 2.10.1
 ----------------------------------------
 COLOR SETTINGS
 ----------------------------------------
@@ -122,12 +122,23 @@ $theme-color-disabled-light: "gray-10" !default;
 $theme-color-disabled: "gray-20" !default;
 $theme-color-disabled-dark: "gray-30" !default;
 
+// Emergency colors
+$theme-color-emergency: "red-warm-60v" !default;
+$theme-color-emergency-dark: "red-warm-80" !default;
+
 /*
 ----------------------------------------
 General colors
 ----------------------------------------
 */
 
+// Body
+$theme-body-background-color: "white" !default;
+
+// Text
+$theme-text-color: "ink" !default;
+$theme-text-reverse-color: "white" !default;
+
 // Links
 $theme-link-color: "primary" !default;
 $theme-link-visited-color: "violet-70v" !default;

data/_sass/uswds/src/settings/_settings-components.scss

@@ -7,7 +7,7 @@
 ========================================
 ========================================
 ----------------------------------------
-USWDS 2.9.0
+USWDS 2.10.1
 ----------------------------------------
 COMPONENT SETTINGS
 ----------------------------------------
@@ -25,8 +25,12 @@ $theme-accordion-font-family: "body" !default;
 // Alert
 $theme-alert-bar-width: 1 !default;
 $theme-alert-font-family: "ui" !default;
-$theme-alert-icon-size: 4 !default;
+$theme-alert-icon-size: 5 !default;
 $theme-alert-padding-x: 2.5 !default;
+$theme-alert-text-color: default !default;
+$theme-alert-text-reverse-color: default !default;
+$theme-alert-link-color: default !default;
+$theme-alert-link-reverse-color: default !default;
 
 // Banner
 $theme-banner-background-color: "base-lightest" !default;
@@ -35,7 +39,7 @@ $theme-banner-link-color: default !default;
 $theme-banner-max-width: "desktop" !default;
 
 // Breadcrumb
-$theme-breadcrumb-background-color: "white" !default;
+$theme-breadcrumb-background-color: "default" !default;
 $theme-breadcrumb-font-size: "sm" !default;
 $theme-breadcrumb-font-family: "body" !default;
 $theme-breadcrumb-link-color: default !default;
@@ -64,6 +68,10 @@ $theme-card-margin-bottom: 4 !default;
 $theme-card-padding-perimeter: 3 !default;
 $theme-card-padding-y: 2 !default;
 
+// Collection
+$theme-collection-font-family: "ui" !default;
+$theme-collection-header-typeset: "ui", "md", 3 !default;
+
 // Footer
 $theme-footer-font-family: "body" !default;
 $theme-footer-max-width: "desktop" !default;
@@ -76,6 +84,11 @@ $theme-input-max-width: "mobile-lg" !default;
 $theme-input-select-border-width: 2px !default;
 $theme-input-select-size: 2.5 !default;
 $theme-input-state-border-width: 0.5 !default;
+$theme-input-tile-background-color-selected: "primary-lighter" !default;
+$theme-input-tile-border-radius: "md" !default;
+$theme-input-tile-border-width: 2px !default;
+$theme-input-tile-border-color: "base-lighter" !default;
+$theme-input-tile-border-color-selected: "primary-light" !default;
 
 // Header
 $theme-header-font-family: "ui" !default;
@@ -87,12 +100,31 @@ $theme-header-min-width: "desktop" !default;
 $theme-hero-image: "#{$theme-image-path}/hero.png" !default;
 
 // Identifier
-$theme-identifier-font-family: "ui" !default;
 $theme-identifier-background-color: "base-darkest" !default;
+$theme-identifier-font-family: "ui" !default;
 $theme-identifier-identity-domain-color: "base-light" !default;
 $theme-identifier-max-width: "desktop" !default;
+$theme-identifier-primary-link-color: default !default;
 $theme-identifier-secondary-link-color: "base-light" !default;
 
+// Process List
+$theme-process-list-counter-background-color: "white" !default;
+$theme-process-list-counter-border-color: "ink" !default;
+$theme-process-list-counter-border-width: 0.5 !default;
+$theme-process-list-counter-font-family: "ui" !default;
+$theme-process-list-counter-font-size: "lg" !default;
+$theme-process-list-counter-gap-color: "white" !default;
+$theme-process-list-counter-gap-width: 0.5 !default;
+$theme-process-list-counter-size: 5 !default;
+$theme-process-list-counter-text-color: "ink" !default;
+$theme-process-list-connector-color: "primary-lighter" !default;
+$theme-process-list-connector-width: 1 !default;
+$theme-process-list-font-family: "ui" !default;
+$theme-process-list-font-size: "sm" !default;
+$theme-process-list-heading-color: "ink" !default;
+$theme-process-list-heading-font-family: "ui" !default;
+$theme-process-list-heading-font-size: "lg" !default;
+
 // Navigation
 $theme-navigation-font-family: "ui" !default;
 $theme-megamenu-columns: 3 !default;
@@ -105,6 +137,9 @@ $theme-search-min-width: 27ch !default;
 $theme-sidenav-current-border-width: 0.5 !default;
 $theme-sidenav-font-family: "ui" !default;
 
+// Site Alert
+$theme-site-alert-max-width: "desktop" !default;
+
 // Step indicator
 $step-indicator-background-color: "white" !default;
 $theme-step-indicator-counter-gap: 0.5 !default;
@@ -123,6 +158,23 @@ $theme-step-indicator-segment-gap: 2px !default;
 $theme-step-indicator-segment-height: 1 !default;
 $theme-step-indicator-text-pending-color: "base-dark" !default;
 
+// Summary box
+$theme-summary-box-background-color: "info-lighter" !default;
+$theme-summary-box-border-color: "info-light" !default;
+$theme-summary-box-border-width: 1px !default;
+$theme-summary-box-border-radius: "md" !default;
+$theme-summary-box-font-family: "ui" !default;
+$theme-summary-box-link-color: default !default;
+$theme-summary-box-text-color: default !default;
+
+// Table
+$theme-table-border-color: "ink" !default;
+$theme-table-header-background-color: "base-lighter" !default;
+$theme-table-header-text-color: "ink" !default;
+$theme-table-stripe-background-color: "base-lightest" !default;
+$theme-table-stripe-text-color: "ink" !default;
+$theme-table-text-color: "ink" !default;
+
 // Tooltips
 $theme-tooltip-background-color: "ink" !default;
 $theme-tooltip-font-color: "base-lightest" !default;

data/_sass/uswds/src/settings/_settings-general.scss

@@ -7,7 +7,7 @@
 ========================================
 ========================================
 ----------------------------------------
-USWDS 2.9.0
+USWDS 2.10.1
 ----------------------------------------
 GENERAL SETTINGS
 ----------------------------------------

data/_sass/uswds/src/settings/_settings-spacing.scss

@@ -7,7 +7,7 @@
 ========================================
 ========================================
 ----------------------------------------
-USWDS 2.9.0
+USWDS 2.10.1
 ----------------------------------------
 SPACING SETTINGS
 ----------------------------------------

data/_sass/uswds/src/settings/_settings-typography.scss

@@ -7,7 +7,7 @@
 ========================================
 ========================================
 ----------------------------------------
-USWDS 2.9.0
+USWDS 2.10.1
 ----------------------------------------
 TYPOGRAPHY SETTINGS
 ----------------------------------------

data/_sass/uswds/src/settings/_settings-utilities.scss

@@ -7,7 +7,7 @@
 ========================================
 ========================================
 ----------------------------------------
-USWDS 2.9.0
+USWDS 2.10.1
 ----------------------------------------
 UTILITIES SETTINGS
 ----------------------------------------

data/_sass/uswds/src/theme/_uswds-theme-color.scss

@@ -7,7 +7,7 @@
 ========================================
 ========================================
 ----------------------------------------
-USWDS 2.9.0
+USWDS 2.10.1
 ----------------------------------------
 COLOR SETTINGS
 ----------------------------------------
@@ -120,12 +120,23 @@ $theme-color-disabled-light: "gray-10";
 $theme-color-disabled: "gray-20";
 $theme-color-disabled-dark: "gray-30";
 
+// Emergency colors
+$theme-color-emergency: "red-warm-60v";
+$theme-color-emergency-dark: "red-warm-80";
+
 /*
 ----------------------------------------
 General colors
 ----------------------------------------
 */
 
+// Body
+$theme-body-background-color: "white";
+
+// Text
+$theme-text-color: "ink";
+$theme-text-reverse-color: "white";
+
 // Links
 $theme-link-color: "primary";
 $theme-link-visited-color: "violet-70v";

data/_sass/uswds/src/theme/_uswds-theme-components.scss

@@ -7,7 +7,7 @@
 ========================================
 ========================================
 ----------------------------------------
-USWDS 2.9.0
+USWDS 2.10.1
 ----------------------------------------
 COMPONENT SETTINGS
 ----------------------------------------
@@ -25,8 +25,12 @@ $theme-accordion-font-family: "body";
 // Alert
 $theme-alert-bar-width: 1;
 $theme-alert-font-family: "ui";
-$theme-alert-icon-size: 4;
+$theme-alert-icon-size: 5;
 $theme-alert-padding-x: 2.5;
+$theme-alert-text-color: default;
+$theme-alert-text-reverse-color: default;
+$theme-alert-link-color: default;
+$theme-alert-link-reverse-color: default;
 
 // Banner
 $theme-banner-background-color: "base-lightest";
@@ -35,7 +39,7 @@ $theme-banner-link-color: default;
 $theme-banner-max-width: "desktop";
 
 // Breadcrumb
-$theme-breadcrumb-background-color: "white";
+$theme-breadcrumb-background-color: "default";
 $theme-breadcrumb-font-size: "sm";
 $theme-breadcrumb-font-family: "body";
 $theme-breadcrumb-link-color: default;
@@ -64,6 +68,10 @@ $theme-card-margin-bottom: 4;
 $theme-card-padding-perimeter: 3;
 $theme-card-padding-y: 2;
 
+// Collection
+$theme-collection-font-family: "ui";
+$theme-collection-header-typeset: "ui", "md", 3;
+
 // Footer
 $theme-footer-font-family: "body";
 $theme-footer-max-width: "desktop";
@@ -76,6 +84,11 @@ $theme-input-max-width: "mobile-lg";
 $theme-input-select-border-width: 2px;
 $theme-input-select-size: 2.5;
 $theme-input-state-border-width: 0.5;
+$theme-input-tile-background-color-selected: "primary-lighter";
+$theme-input-tile-border-radius: "md";
+$theme-input-tile-border-width: 2px;
+$theme-input-tile-border-color: "base-lighter";
+$theme-input-tile-border-color-selected: "primary-light";
 
 // Header
 $theme-header-font-family: "ui";
@@ -87,12 +100,31 @@ $theme-header-min-width: "desktop";
 $theme-hero-image: "#{$theme-image-path}/hero.png";
 
 // Identifier
-$theme-identifier-font-family: "ui";
 $theme-identifier-background-color: "base-darkest";
+$theme-identifier-font-family: "ui";
 $theme-identifier-identity-domain-color: "base-light";
 $theme-identifier-max-width: "desktop";
+$theme-identifier-primary-link-color: default;
 $theme-identifier-secondary-link-color: "base-light";
 
+// Process List
+$theme-process-list-counter-background-color: "white";
+$theme-process-list-counter-border-color: "ink";
+$theme-process-list-counter-border-width: 0.5;
+$theme-process-list-counter-font-family: "ui";
+$theme-process-list-counter-font-size: "lg";
+$theme-process-list-counter-gap-color: "white";
+$theme-process-list-counter-gap-width: 0.5;
+$theme-process-list-counter-size: 5;
+$theme-process-list-counter-text-color: "ink";
+$theme-process-list-connector-color: "primary-lighter";
+$theme-process-list-connector-width: 1;
+$theme-process-list-font-family: "ui";
+$theme-process-list-font-size: "sm";
+$theme-process-list-heading-color: "ink";
+$theme-process-list-heading-font-family: "ui";
+$theme-process-list-heading-font-size: "lg";
+
 // Navigation
 $theme-navigation-font-family: "ui";
 $theme-megamenu-columns: 3;
@@ -105,6 +137,9 @@ $theme-search-min-width: 27ch;
 $theme-sidenav-current-border-width: 0.5;
 $theme-sidenav-font-family: "ui";
 
+// Site Alert
+$theme-site-alert-max-width: "desktop";
+
 // Step indicator
 $step-indicator-background-color: "white";
 $theme-step-indicator-counter-gap: 0.5;
@@ -123,6 +158,23 @@ $theme-step-indicator-segment-gap: 2px;
 $theme-step-indicator-segment-height: 1;
 $theme-step-indicator-text-pending-color: "base-dark";
 
+// Summary box
+$theme-summary-box-background-color: "info-lighter";
+$theme-summary-box-border-color: "info-light";
+$theme-summary-box-border-width: 1px;
+$theme-summary-box-border-radius: "md";
+$theme-summary-box-font-family: "ui";
+$theme-summary-box-link-color: default;
+$theme-summary-box-text-color: default;
+
+// Table
+$theme-table-border-color: "ink";
+$theme-table-header-background-color: "base-lighter";
+$theme-table-header-text-color: "ink";
+$theme-table-stripe-background-color: "base-lightest";
+$theme-table-stripe-text-color: "ink";
+$theme-table-text-color: "ink";
+
 // Tooltips
 $theme-tooltip-background-color: "ink";
 $theme-tooltip-font-color: "base-lightest";