uswds update; alpha

_sass/uswds/src/components/_banner.scss

@@ -87,7 +87,7 @@ $banner-icon-close: (
 .usa-banner__lock-image {
   $lock-h: 64; // unitless height of svg
   $lock-w: 52; // unitless width of svg
-  $lock-aspect: calc($lock-w / $lock-h);
+  $lock-aspect: $lock-w / $lock-h;
   $icon-height: 1.5ex; // height of the lock icon; use ex for resilience
 
   height: $icon-height;

_sass/uswds/src/components/_breadcrumb.scss

@@ -35,7 +35,7 @@ $breadcrumb-back-icon-aspect: (
 
 // Defines spacing so back icon is optically placed
 @mixin exdent-icon($dim: $breadcrumb-back-icon-aspect) {
-  $aspect: calc(nth($dim, 1) / nth($dim, 2));
+  $aspect: nth($dim, 1) / nth($dim, 2);
   $icon-width: $breadcrumb-icon-height * $aspect;
   padding-left: calc(#{$icon-width} + #{$breadcrumb-icon-spacing});
   text-indent: calc((#{$icon-width} + #{$breadcrumb-icon-spacing}) * -1);

_sass/uswds/src/components/_button-groups.scss

@@ -72,7 +72,7 @@
     &:first-child > .usa-button {
       border-top-right-radius: 0;
       border-bottom-right-radius: 0;
-      margin-right: calc((-units($theme-button-stroke-width)) / 2);
+      margin-right: -(units($theme-button-stroke-width)) / 2;
     }
 
     &:last-child > .usa-button {
@@ -83,15 +83,15 @@
       width: calc(100% + #{units($theme-button-stroke-width)});
 
       @include at-media("mobile-lg") {
-        margin-left: calc((-units($theme-button-stroke-width)) / 2);
+        margin-left: -(units($theme-button-stroke-width)) / 2;
         width: auto;
       }
     }
 
     &:not(:first-child):not(:last-child) > .usa-button {
       border-radius: 0;
-      margin-right: calc((-units($theme-button-stroke-width)) / 2);
-      margin-left: calc((-units($theme-button-stroke-width)) / 2);
+      margin-right: -(units($theme-button-stroke-width)) / 2;
+      margin-left: -(units($theme-button-stroke-width)) / 2;
     }
 
     // Creates separators

_sass/uswds/src/components/_card.scss

@@ -20,7 +20,7 @@
 .usa-card-group {
   @include u-display("flex");
   @include u-flex("column", "wrap", "align-stretch");
-  @include u-margin-x(calc($theme-card-gap / -2));
+  @include u-margin-x($theme-card-gap / -2);
   @include at-media($theme-card-flag-min-width) {
     @include u-flex("row");
   }
@@ -54,7 +54,7 @@
   @include u-display("flex");
   @include u-height("full");
   @include u-flex("column");
-  @include u-margin-x(calc($theme-card-gap / 2));
+  @include u-margin-x($theme-card-gap / 2);
   @include u-position("relative");
   @include u-radius($theme-card-border-radius);
 }
@@ -70,7 +70,7 @@
 // Header
 // ---------------------------------
 .usa-card__header {
-  @include u-padding-bottom(calc($theme-card-padding-y / 2));
+  @include u-padding-bottom($theme-card-padding-y / 2);
   @include u-padding-top($theme-card-padding-perimeter);
   @include u-padding-x($theme-card-padding-perimeter);
 
@@ -121,7 +121,7 @@
 .usa-card__body {
   @include u-flex("fill");
   @include u-padding-x($theme-card-padding-perimeter);
-  @include u-padding-y(calc($theme-card-padding-y / 2));
+  @include u-padding-y($theme-card-padding-y / 2);
   // IE 11
   flex-basis: auto;
 
@@ -143,7 +143,7 @@
 // ---------------------------------
 .usa-card__footer {
   @include u-padding-bottom($theme-card-padding-perimeter);
-  @include u-padding-top(calc($theme-card-padding-y / 2));
+  @include u-padding-top($theme-card-padding-y / 2);
   @include u-padding-x($theme-card-padding-perimeter);
 }
 
@@ -277,10 +277,10 @@
 
     &.usa-card--header-first {
       .usa-card__header {
-        @include u-padding-bottom(calc($theme-card-padding-y / 2));
+        @include u-padding-bottom($theme-card-padding-y / 2);
       }
       .usa-card__body {
-        @include u-padding-top(calc($theme-card-padding-y / 2));
+        @include u-padding-top($theme-card-padding-y / 2);
       }
       .usa-card__media--inset {
         @include u-padding-top($theme-card-padding-perimeter);

_sass/uswds/src/components/_step-indicator.scss

@@ -14,8 +14,8 @@ $step-indicator-counter-size-sm: 3;
   );
   background-color: color($step-indicator-background-color);
   margin-bottom: units($step-indicator-margin-bottom);
-  margin-left: calc(units($theme-step-indicator-segment-gap) / -2);
-  margin-right: calc(units($theme-step-indicator-segment-gap) / -2);
+  margin-left: units($theme-step-indicator-segment-gap) / -2;
+  margin-right: units($theme-step-indicator-segment-gap) / -2;
 
   @include at-media($theme-step-indicator-min-width) {
     @include u-margin-x(0);
@@ -33,8 +33,8 @@ $step-indicator-counter-size-sm: 3;
 .usa-step-indicator__segment {
   @include u-flex("fill");
   counter-increment: usa-step-indicator;
-  margin-left: calc(units($theme-step-indicator-segment-gap) / 2);
-  margin-right: calc(units($theme-step-indicator-segment-gap) / 2);
+  margin-left: units($theme-step-indicator-segment-gap) / 2;
+  margin-right: units($theme-step-indicator-segment-gap) / 2;
   max-width: units("card-lg");
   min-height: units($theme-step-indicator-segment-height);
   position: relative;
@@ -340,15 +340,15 @@ $step-indicator-counter-size-sm: 3;
 }
 
 .usa-step-indicator--no-labels {
-  margin-left: calc(units($theme-step-indicator-segment-gap) / -2);
-  margin-right: calc(units($theme-step-indicator-segment-gap) / -2);
+  margin-left: units($theme-step-indicator-segment-gap) / -2;
+  margin-right: units($theme-step-indicator-segment-gap) / -2;
 
   .usa-step-indicator__segment {
     // Remove extra counter margin
     margin-top: 0;
     // Add gap between segments
-    margin-left: calc(units($theme-step-indicator-segment-gap) / 2);
-    margin-right: calc(units($theme-step-indicator-segment-gap) / 2);
+    margin-left: units($theme-step-indicator-segment-gap) / 2;
+    margin-right: units($theme-step-indicator-segment-gap) / 2;
     &:before {
       // Don't show counters
       display: none;
@@ -373,12 +373,12 @@ $step-indicator-counter-size-sm: 3;
 }
 
 .usa-step-indicator--center {
-  margin-left: calc(units($theme-step-indicator-segment-gap) / -2);
-  margin-right: calc(units($theme-step-indicator-segment-gap) / -2);
+  margin-left: units($theme-step-indicator-segment-gap) / -2;
+  margin-right: units($theme-step-indicator-segment-gap) / -2;
 
   .usa-step-indicator__segment {
-    margin-left: calc(units($theme-step-indicator-segment-gap) / 2);
-    margin-right: calc(units($theme-step-indicator-segment-gap) / 2);
+    margin-left: units($theme-step-indicator-segment-gap) / 2;
+    margin-right: units($theme-step-indicator-segment-gap) / 2;
 
     &:before {
       @if $theme-step-indicator-counter-gap == 0 {

_sass/uswds/src/core/_functions.scss

@@ -4,7 +4,6 @@ Functions
 ----------------------------------------
 */
 
-
 // The following vars need to be set
 // here, before the rest of the system
 // variables are set
@@ -56,7 +55,7 @@ Remove the unit of a length
 
 @function strip-unit($number) {
   @if type-of($number) == "number" and not unitless($number) {
-    @return ($number / ($number * 0 + 1));
+    @return $number / ($number * 0 + 1);
   }
 
   @return $number;
@@ -351,7 +350,7 @@ the desired final units (currently rem)
 */
 
 @function spacing-multiple($unit) {
-  $grid-to-rem: calc(($system-spacing-grid-base * $unit) / $root-font-size-equiv) *
+  $grid-to-rem: ($system-spacing-grid-base * $unit) / $root-font-size-equiv *
     1rem;
 
   @return $grid-to-rem;
@@ -367,7 +366,7 @@ Converts a value in rem to a value in px
 
 @function rem-to-px($value-in-rem) {
   @if unit($value-in-rem) == "rem" {
-    $rem-to-px: calc($value-in-rem / 1rem) * $root-font-size-equiv;
+    $rem-to-px: ($value-in-rem / 1rem) * $root-font-size-equiv;
     @return $rem-to-px;
   }
   @if unit($value-in-rem) != "px" {
@@ -387,7 +386,7 @@ queries
 */
 
 @function rem-to-user-em($grid-in-rem) {
-  $rem-to-user-em: calc(($grid-in-rem / 1rem) * 1em);
+  $rem-to-user-em: ($grid-in-rem / 1rem) * 1em;
 
   @return $rem-to-user-em;
 }
@@ -441,8 +440,8 @@ Converts a value in px to a value in rem
   @if not $pixels {
     @return false;
   }
-  $px-to-rem: calc($pixels / $root-font-size-equiv) * 1rem;
-  $px-to-rem: calc(round($px-to-rem * 100) / 100);
+  $px-to-rem: ($pixels / $root-font-size-equiv) * 1rem;
+  $px-to-rem: round($px-to-rem * 100) / 100;
 
   @return $px-to-rem;
 }
@@ -461,7 +460,7 @@ to a set target
     @return false;
   }
 
-  $this-scale: calc($system-base-cap-height * strip-unit($scale) / $cap-height * 1px);
+  $this-scale: $system-base-cap-height * strip-unit($scale) / $cap-height * 1px;
 
   @return px-to-rem($this-scale);
 }
@@ -540,9 +539,9 @@ a family and a line-height scale unit
 
   $this-cap: map-get($project-cap-heights, $family);
   $this-line-height: map-get($system-line-height, $scale);
-  $normalized-line-height: calc($this-line-height /
-    ($system-base-cap-height / $this-cap));
-  $normalized-line-height: calc(round($normalized-line-height * 10) / 10);
+  $normalized-line-height: $this-line-height /
+    ($system-base-cap-height / $this-cap);
+  $normalized-line-height: round($normalized-line-height * 10) / 10;
 
   @return $normalized-line-height;
 }
@@ -752,7 +751,7 @@ grid.
   }
 
   $numeric-eq: map-get($spacing-to-value, $gap-size);
-  $numeric-eq-half: inspect(calc($numeric-eq / 2));
+  $numeric-eq-half: inspect($numeric-eq / 2);
 
   @if not map-has-key($spacing-to-token, $numeric-eq-half) {
     @error '`#{$gap-size}` is not a valid USWDS gap size token. '
@@ -820,7 +819,7 @@ Ex: columns(2) --> 6
   @if 12 % $number != 0 {
     @error '`#{$number}` must be a divisor of 12.';
   }
-  $columns: calc(12 / $number);
+  $columns: 12 / $number;
   @return $columns;
 }
 
@@ -917,7 +916,7 @@ Includes helper functions
     }
   } @else if $exponent < 0 {
     @for $i from 1 through -$exponent {
-      $value: calc($value / $number);
+      $value: $value / $number;
     }
   }
 
@@ -949,15 +948,15 @@ Includes helper functions
 }
 
 @function exp-maclaurin($x, $n) {
-  @return calc(pow($x, $n) / factorial($n));
+  @return (pow($x, $n) / factorial($n));
 }
 
 @function exp($value) {
   @return summation(get-function("exp-maclaurin"), $value, 0, 100);
 }
 
 @function ln-maclaurin($x, $n) {
-  @return calc(pow(-1, $n + 1) / $n) * (pow($x - 1, $n));
+  @return (pow(-1, $n + 1) / $n) * (pow($x - 1, $n));
 }
 
 @function ln($value) {
@@ -970,7 +969,7 @@ Includes helper functions
 
   @return summation(
       get-function("ln-maclaurin"),
-      calc($value / pow(10, $ten-exp)),
+      $value / pow(10, $ten-exp),
       1,
       100
     ) + $ten-exp * $ln-ten;
@@ -993,9 +992,9 @@ Includes helper functions
     $value: $value / 256;
 
     @if $value < 0.03928 {
-      $value: calc($value / 12.92);
+      $value: $value / 12.92;
     } @else {
-      $value: calc($value + 0.055) / 1.055;
+      $value: ($value + 0.055) / 1.055;
       $value: pow($value, 2.4);
     }
 
@@ -1009,7 +1008,7 @@ Includes helper functions
 
   $lum: (map-get($colors, "red") * 0.2126) +
     (map-get($colors, "green") * 0.7152) + (map-get($colors, "blue") * 0.0722);
-  $lum: calc(round($lum * 1000) / 1000);
+  $lum: round($lum * 1000) / 1000;
 
   @return $lum;
 }
@@ -1056,7 +1055,7 @@ Includes helper functions
       $result: $result * 10 + map-get($numbers, $character);
     } @else {
       $digits: $digits * 10;
-      $result: calc($result + map-get($numbers, $character) / $digits);
+      $result: $result + map-get($numbers, $character) / $digits;
     }
   }
 

_sass/uswds/src/core/mixins/_embed-container.scss

@@ -1,4 +1,3 @@
 @mixin embed-container($height, $width) {
-    padding-bottom: percentage(calc($height/$width))
-    ;
+  padding-bottom: percentage($height/$width);
 }

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

@@ -74,7 +74,7 @@
   $filename-base: map-get($icon-object, "name");
   $svg-height: map-get($icon-object, "svg-height");
   $svg-width: map-get($icon-object, "svg-width");
-  $aspect: calc($svg-width / $svg-height);
+  $aspect: $svg-width / $svg-height;
   $height: if(
     unitless(map-get($icon-object, "height")),
     units(map-get($icon-object, "height")),

_site/about.html

@@ -237,7 +237,7 @@ <h2 id="our-work">Our work</h2>
 
 
 <!--  // Date not working
-     &nbsp; &middot; &nbsp; Last updated: March 29, 2024 at 03:10 PM 
+     &nbsp; &middot; &nbsp; Last updated: March 29, 2024 at 03:46 PM 
 -->
 
       </p>

_site/guide/introduction.html

@@ -290,7 +290,7 @@ <h1>Introduction</h1>
 
 
 <!--  // Date not working
-     &nbsp; &middot; &nbsp; Last updated: March 29, 2024 at 03:10 PM 
+     &nbsp; &middot; &nbsp; Last updated: March 29, 2024 at 03:46 PM 
 -->
 
       </p>

_site/guide/resources.html

@@ -290,7 +290,7 @@ <h1>Resources</h1>
 
 
 <!--  // Date not working
-     &nbsp; &middot; &nbsp; Last updated: March 29, 2024 at 03:10 PM 
+     &nbsp; &middot; &nbsp; Last updated: March 29, 2024 at 03:46 PM 
 -->
 
       </p>

_site/guide/solution.html

@@ -286,7 +286,7 @@ <h1>Solution</h1>
 
 
 <!--  // Date not working
-     &nbsp; &middot; &nbsp; Last updated: March 29, 2024 at 03:10 PM 
+     &nbsp; &middot; &nbsp; Last updated: March 29, 2024 at 03:46 PM 
 -->
 
       </p>

_site/guide/stakeholders.html

@@ -299,7 +299,7 @@ <h1>Stakeholders</h1>
 
 
 <!--  // Date not working
-     &nbsp; &middot; &nbsp; Last updated: March 29, 2024 at 03:10 PM 
+     &nbsp; &middot; &nbsp; Last updated: March 29, 2024 at 03:46 PM 
 -->
 
       </p>

_site/index.html

@@ -347,7 +347,7 @@ <h2 id="get-started">Get started</h2>
 
 
 <!--  // Date not working
-     &nbsp; &middot; &nbsp; Last updated: March 29, 2024 at 03:10 PM 
+     &nbsp; &middot; &nbsp; Last updated: March 29, 2024 at 03:46 PM 
 -->
 
       </p>