uswds-jekyll 5.3.0 → 5.4.0

data/_sass/uswds/src/core/_notifications.scss

@@ -15,11 +15,24 @@ $uswds-notifications:
   + "\A --------------------------------------------------------------------"
   + "\A \2709  USWDS Notifications"
   + "\A --------------------------------------------------------------------"
+  + "\A 2.10.1:"
+  + "\A - We updated the `$theme-breadcrumb-background-color` default"
+  + "\A   to `default` from `'white'`. "
+  + "\A - We updated the `$theme-alert-icon-size` default to `5` from `4`."
+  + "\A - [Footer] We updated `usa-footer__logo-heading` to use a `p`."
+  + "\A   instead of an `h3`. "
+  + "\A --------------------------------------------------------------------"
+  + "\A 2.10.0:"
+  + "\A - We updated the Spanish language link to USAGov in the identifier. "
+  + "\A   The link should now read 'Visite USAGov en Español'. "
+  + "\A - We improved the accessibility of SVG images in the banner. "
+  + "\A   See the full release notes for more information."
+  + "\A --------------------------------------------------------------------"
   + "\A 2.9.0:"
   + "\A - We updated the formatting of `usa-legend`. If you use a visible "
   + "\A   legend and wish to preserve the old styling, add a "
   + "\A   `usa-legend--large` modifier to the element."
- + "\A --------------------------------------------------------------------"
+  + "\A --------------------------------------------------------------------"
   + "\A 2.8.0:"
   + "\A - We updated the text of the gov banner and its settings."
   + "\A   Please see the full release notes for more information and update"

data/_sass/uswds/src/core/_properties.scss

@@ -237,7 +237,7 @@ $system-properties: (
       "normal": normal,
       "medium": $theme-font-weight-medium,
       "semibold": $theme-font-weight-semibold,
-      "bold": bold,
+      "bold": $theme-font-weight-bold,
       "heavy": $theme-font-weight-heavy,
     ),
     extended: (

data/_sass/uswds/src/core/_system-tokens.scss

@@ -415,54 +415,89 @@ Luminance ranges
 ----------------------------------------
 */
 
-$system-luminance-grade-ranges: (
-  0: (
-    1,
-    1,
+$system-color-grades: (
+  100: (
+    "min": 0,
+    "max": 0,
   ),
-  5: (
-    0.85,
-    0.93,
+  90: (
+    "min": 0.005,
+    "max": 0.015,
   ),
-  10: (
-    0.75,
-    0.82,
+  80: (
+    "min": 0.02,
+    "max": 0.04,
   ),
-  20: (
-    0.5,
-    0.65,
+  70: (
+    "min": 0.05,
+    "max": 0.07,
   ),
-  30: (
-    0.35,
-    0.45,
+  60: (
+    "min": 0.1,
+    "max": 0.125,
+  ),
+  50: (
+    "min": 0.175,
+    "max": 0.183,
   ),
   40: (
-    0.25,
-    0.3,
+    "min": 0.25,
+    "max": 0.3,
   ),
-  50: (
-    0.175,
-    0.183,
+  30: (
+    "min": 0.35,
+    "max": 0.45,
   ),
-  60: (
-    0.1,
-    0.125,
+  20: (
+    "min": 0.5,
+    "max": 0.65,
   ),
-  70: (
-    0.05,
-    0.07,
+  10: (
+    "min": 0.75,
+    "max": 0.82,
   ),
-  80: (
-    0.02,
-    0.04,
+  5: (
+    "min": 0.85,
+    "max": 0.93,
   ),
-  90: (
-    0.005,
-    0.015,
+  0: (
+    "min": 1,
+    "max": 1,
   ),
-  100: (
-    0,
-    0,
+);
+
+$theme-color-grades: (
+  "lightest": (
+    "min": 5,
+    "max": 10,
+  ),
+  "lighter": (
+    "min": 10,
+    "max": 20,
+  ),
+  "light": (
+    "min": 30,
+    "max": 40,
+  ),
+  "root": (
+    "min": 50,
+    "max": 50,
+    "vivid": (
+      "min": 30,
+      "max": 50,
+    ),
+  ),
+  "dark": (
+    "min": 60,
+    "max": 60,
+  ),
+  "darker": (
+    "min": 70,
+    "max": 80,
+  ),
+  "darkest": (
+    "min": 90,
+    "max": 90,
   ),
 );
 

data/_sass/uswds/src/core/_variables.scss

@@ -378,6 +378,10 @@ $project-state-colors: (
     "default": color($theme-color-disabled, set-theme),
     "dark": color($theme-color-disabled-dark, set-theme),
   ),
+  "emergency": (
+    "default": color($theme-color-emergency, set-theme),
+    "dark": color($theme-color-emergency-dark, set-theme),
+  ),
 );
 
 $all-project-colors: map-collect($project-colors, $project-state-colors);
@@ -402,7 +406,7 @@ $assignments-theme-color: (
   "base-dark": $theme-color-base-dark,
   "base-darker": $theme-color-base-darker,
   "base-darkest": $theme-color-base-darkest,
-  "ink": $theme-color-base-darkest,
+  "ink": $theme-color-base-ink,
   "primary-lightest": $theme-color-primary-lightest,
   "primary-lighter": $theme-color-primary-lighter,
   "primary-light": $theme-color-primary-light,
@@ -456,6 +460,8 @@ $assignments-theme-color: (
   "disabled-light": $theme-color-disabled-light,
   "disabled": $theme-color-disabled,
   "disabled-dark": $theme-color-disabled-dark,
+  "emergency": $theme-color-emergency,
+  "emergency-dark": $theme-color-emergency-dark,
 );
 
 $tokens-color-theme: (
@@ -532,6 +538,8 @@ $tokens-color-state: (
   "disabled-light": color($theme-color-disabled-light, set-theme, no-warn),
   "disabled": color($theme-color-disabled, set-theme, no-warn),
   "disabled-dark": color($theme-color-disabled-dark, set-theme, no-warn),
+  "emergency": color($theme-color-emergency, set-theme, no-warn),
+  "emergency-dark": color($theme-color-emergency-dark, set-theme, no-warn),
 );
 
 $project-color-shortcodes: map-collect(
@@ -547,6 +555,18 @@ $all-color-shortcodes: map-collect(
 
 $color-palette-grayscale: $system-color-gray;
 
+/*
+----------------------------------------
+System magic numbers for color contrast
+----------------------------------------
+*/
+
+$system-wcag-magic-numbers: (
+  "AA": 50,
+  "AAA": 70,
+  "AA-large": 40,
+);
+
 /*
 ----------------------------------------
 Build the project type scale map
@@ -575,6 +595,7 @@ Border-radius
 
 $project-border-radius: (
   0: 0,
+  "none": 0,
   "sm": units($theme-border-radius-sm),
   "md": units($theme-border-radius-md),
   "lg": units($theme-border-radius-lg),
@@ -616,6 +637,7 @@ $grid-global: "";
 Aspect Ratios
 ----------------------------------------
 */
+
 $project-aspect-ratios: (
   "9x16": 177.77778%,
   "16x9": 56.25%,
@@ -634,3 +656,17 @@ Easing
 ----------------------------------------
 */
 $project-easing: 0.2s ease-in-out;
+
+/*
+----------------------------------------
+Project defaults
+----------------------------------------
+*/
+
+$project-defaults: (
+  "bg-color": $theme-body-background-color,
+  "preferred-text-token": $theme-text-reverse-color,
+  "fallback-text-token": $theme-text-color,
+  "preferred-link-token": $theme-link-reverse-color,
+  "fallback-link-token": $theme-link-color,
+);

data/_sass/uswds/src/core/mixins/_add-success-mark.scss

@@ -1,7 +1,7 @@
 @mixin add-success-mark {
   &::before {
-    @include add-background-svg("correct9");
+    @include add-background-svg("usa-icons-bg/check--blue-60v");
     background-position: center;
-    background-size: units(2.5);
+    background-size: units(3);
   }
 }

data/_sass/uswds/src/core/mixins/_alert-slim-styles.scss

@@ -0,0 +1,15 @@
+@mixin alert-slim-styles {
+  background-position: $alert-padding-left units(1.5);
+  background-size: units(3);
+  padding-bottom: units($theme-alert-bar-width);
+  padding-top: units($theme-alert-bar-width);
+
+  .usa-alert__body {
+    padding-left: units(4);
+  }
+
+  .usa-alert__text:only-child {
+    margin-bottom: units(0.5);
+    padding-top: units(0.5);
+  }
+}

data/_sass/uswds/src/core/mixins/_alert-status-styles.scss

@@ -0,0 +1,40 @@
+@mixin alert-status-styles($name, $icon) {
+  $bgcolor: if($name != "emergency", "#{$name}-lighter", $name);
+  $banner-text-color-token: get-color-token-from-bg(
+    $bgcolor,
+    $context: "Alert text"
+  );
+  $icon-path: if(
+    $banner-text-color-token == "ink",
+    "usa-icons/#{$icon}",
+    "alerts/#{$icon}-white"
+  );
+  @include add-background-svg($icon-path);
+  background-color: color($bgcolor);
+  color: color($banner-text-color-token);
+
+  &::before {
+    background-color: color($name);
+  }
+
+  .usa-alert__body {
+    padding-left: units($theme-alert-icon-size) + units($theme-alert-padding-x);
+  }
+
+  .usa-link {
+    @include set-link-from-bg(
+      $bgcolor,
+      $theme-alert-link-reverse-color,
+      $theme-alert-link-color,
+      $context: "Alert (#{$name})"
+    );
+  }
+
+  &.usa-alert--no-icon {
+    background-image: none;
+
+    .usa-alert__body {
+      padding-left: 0;
+    }
+  }
+}

data/_sass/uswds/src/core/mixins/_all.scss

@@ -66,6 +66,8 @@
 @import "add-link-styles";
 @import "add-list-reset";
 @import "add-responsive-site-margins";
+@import "alert-slim-styles";
+@import "alert-status-styles";
 @import "at-media";
 @import "button-disabled";
 @import "button-unstyled";

data/_sass/uswds/src/core/mixins/_external-link.scss

@@ -11,7 +11,7 @@
     background-size: 100%;
     content: "";
     display: inline;
-    margin-left: units(0.5);
+    margin-left: units(2px);
     padding-left: $icon-size;
   }
 

data/_sass/uswds/src/core/mixins/_icon.scss

@@ -116,7 +116,7 @@
     map-get($icon-object, "path"),
     $theme-image-path
   );
-  $ie11-variant: get-token-from-bg($contrast-bg, $color-variant, "black");
+  $ie11-variant: get-color-token-from-bg($contrast-bg, $color-variant, "black");
   $filename-ie11-variant: if($ie11-variant == "black", null, $ie11-variant);
   $filename: if(
     $filename-ie11-variant,
@@ -136,7 +136,7 @@
   }
 
   // Mask supportered styles
-  @supports (mask: url("")) or (-webkit-mask: url("")) {
+  @supports (mask: url("")) {
     background: none;
     background-color: color($color);
     mask: $image-props;

data/_sass/uswds/src/core/mixins/_nav-list.scss

@@ -18,7 +18,7 @@ $sidenav-level-4-inset: 8;
     }
   }
 
-  a {
+  a:not(.usa-button) {
     color: color("base-dark");
     display: block;
     padding: units(1) units($sidenav-level-1-inset);
@@ -78,17 +78,17 @@ $sidenav-level-4-inset: 8;
   }
 
   // level 2+
-  a {
+  a:not(.usa-button) {
     padding-left: units($sidenav-level-2-inset);
   }
 
   // level 3+
-  & & a {
+  & & a:not(.usa-button) {
     padding-left: units($sidenav-level-3-inset);
   }
 
   // level 4+
-  & & & a {
+  & & & a:not(.usa-button) {
     content: "foobar";
     padding-left: units($sidenav-level-4-inset);
   }

data/_sass/uswds/src/core/mixins/_screen-reader.scss

@@ -2,11 +2,13 @@
 @mixin sr-only {
   position: absolute;
   left: -999em;
+  right: auto;
 }
 
 @mixin add-sr-only {
   position: absolute;
   left: -999em;
+  right: auto;
 }
 
 // This "negates" the sr-only helper; useful if

data/_sass/uswds/src/core/mixins/_set-link-from-bg.scss

@@ -1,23 +1,28 @@
 @mixin set-link-from-bg(
-  $bg-color,
-  $preferred-link-color: $theme-link-color,
-  $fallback-link-color: $theme-link-reverse-color,
-  $wcag-target: "AA"
+  $bg-color: "default",
+  $preferred-link-color: "default",
+  $fallback-link-color: "default",
+  $wcag-target: "AA",
+  $context: false
 ) {
   $link-tokens: get-link-tokens-from-bg(
     $bg-color,
     $preferred-link-color,
     $fallback-link-color,
-    $wcag-target
+    $wcag-target,
+    $context
   );
-
+  $bg-color: if($bg-color == "default", get-default("bg-color"), $bg-color);
   $link-token: nth($link-tokens, 1);
   $hover-token: nth($link-tokens, 2);
   $visited-token: if(
-    abs(get-color-grade($theme-link-visited-color) - get-color-grade($bg-color))
-      < 50,
-    $link-token,
-    $theme-link-visited-color
+    is-accessible-magic-number(
+      $theme-link-visited-color,
+      $bg-color,
+      $wcag-target
+    ),
+    $theme-link-visited-color,
+    $link-token
   );
   color: color($link-token);
   &:visited {

data/_sass/uswds/src/core/mixins/_set-text-from-bg.scss

@@ -1,28 +1,34 @@
 @mixin set-text-from-bg(
-  $bg-color,
-  $preferred-text-color: "white",
-  $fallback-text-color: "ink",
-  $wcag-target: "AA"
+  $bg-color: "default",
+  $preferred-text-color: "default",
+  $fallback-text-color: "default",
+  $wcag-target: "AA",
+  $context: false
 ) {
-  color: get-color-from-bg(
+  $accessible-color-token: get-color-token-from-bg(
     $bg-color,
     $preferred-text-color,
     $fallback-text-color,
-    $wcag-target
+    $wcag-target,
+    $context
   );
+  color: color($accessible-color-token);
 }
 
 @mixin set-text-and-bg(
-  $bg-color,
-  $preferred-text-color: "white",
-  $fallback-text-color: "ink",
-  $wcag-target: "AA"
+  $bg-color: "default",
+  $preferred-text-color: "default",
+  $fallback-text-color: "default",
+  $wcag-target: "AA",
+  $context: false
 ) {
   @include set-text-from-bg(
     $bg-color,
     $preferred-text-color,
     $fallback-text-color,
-    $wcag-target
+    $wcag-target,
+    $context
   );
+  $bg-color: if($bg-color == "default", get-default("bg-color"), $bg-color);
   background-color: color($bg-color);
 }