uswds-jekyll 5.3.0 → 5.4.0

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

@@ -60,6 +60,10 @@ Sets:
   color: color($theme-link-color);
   text-decoration: underline;
 
+  &:visited {
+    color: color($theme-link-visited-color);
+  }
+
   &:hover {
     color: color($theme-link-hover-color);
   }
@@ -71,10 +75,6 @@ Sets:
   &:focus {
     @include focus-outline;
   }
-
-  &:visited {
-    color: color($theme-link-visited-color);
-  }
 }
 
 @mixin display {

data/_sass/uswds/src/core/mixins/_usa-table-styles.scss

@@ -5,4 +5,32 @@
   .usa-table--borderless {
     @extend %usa-table--borderless;
   }
+  .usa-table--compact {
+    @extend %usa-table--compact;
+  }
+  .usa-table--striped {
+    @extend %usa-table--striped;
+  }
+  .usa-table--stacked {
+    @include at-media-max("mobile-lg") {
+      @include table-stacked-styles;
+    }
+  }
+  .usa-table--stacked-header {
+    @include at-media-max("mobile-lg") {
+      @include table-stacked-styles;
+      @include table-stacked-header-styles;
+    }
+  }
+  .width-mobile {
+    .usa-table--stacked {
+      @extend %usa-table--stacked;
+    }
+    .usa-table--stacked-header {
+      @extend %usa-table--stacked-header;
+    }
+  }
+  .usa-table-container--scrollable {
+    @extend %usa-table-container--scrollable;
+  }
 }

data/_sass/uswds/src/core/placeholders/_table.scss

@@ -3,34 +3,34 @@
   @include typeset;
   border-collapse: collapse;
   border-spacing: 0;
+  color: color($theme-table-text-color);
   margin: units(2.5) 0;
+  text-align: left;
 
   thead {
     th {
-      font-weight: $theme-font-weight-bold;
+      font-weight: fw("bold");
     }
 
     th,
     td {
-      background-color: color("base-lightest");
+      background-color: color($theme-table-header-background-color);
+      color: color($theme-table-header-text-color);
     }
   }
 
-  th {
-    text-align: left;
-  }
-
   th,
   td {
-    @include u-border(1px, "base-dark");
+    @include u-border(1px, $theme-table-border-color);
     background-color: color("white");
-    font-weight: $theme-font-weight-normal;
+    font-weight: fw("normal");
     padding: units(1) units(2);
+    text-align: inherit;
   }
 
   caption {
     @include u-font("body", "xs");
-    font-weight: $theme-font-weight-bold;
+    font-weight: fw("bold");
     margin-bottom: units(1.5);
     text-align: left;
   }
@@ -49,10 +49,116 @@
     border-left: 0;
     border-right: 0;
   }
+}
+
+%usa-table--compact {
+  th,
+  td {
+    padding: units(0.5) units(1.5);
+  }
+}
+
+%usa-table--striped {
+  tbody {
+    tr:nth-child(odd) {
+      td,
+      th {
+        background-color: color($theme-table-stripe-background-color);
+        color: color($theme-table-stripe-text-color);
+      }
+    }
+  }
+}
+
+@mixin table-stacked-styles {
+  thead {
+    display: none;
+  }
+
+  th,
+  td {
+    border-bottom-width: 0;
+    display: block;
+    width: 100%;
+  }
+
+  tr {
+    @include u-border-bottom(0.5, $theme-table-border-color);
+    border-top-width: 0;
+    display: block;
+    width: 100%;
+    th:first-child,
+    td:first-child {
+      border-top-width: 0;
+    }
+    &:nth-child(odd) {
+      td,
+      th {
+        background-color: inherit;
+      }
+    }
 
-  th {
     &:first-child {
-      padding-left: 0;
+      th:first-child,
+      td:first-child {
+        @include u-border-top(0.5, $theme-table-border-color);
+      }
+    }
+  }
+
+  th[data-label],
+  td[data-label] {
+    padding-bottom: units(1.5);
+
+    &:before {
+      content: attr(data-label);
+      display: block;
+      font-weight: fw("bold");
+      margin: units(-1) units(-2) units(0);
+      padding: units(1.5) units(2) units(0.5);
     }
   }
 }
+
+@mixin table-stacked-header-styles {
+  tr {
+    td:first-child,
+    th:first-child {
+      @include typeset(
+        $theme-body-font-family,
+        $theme-h4-font-size,
+        $theme-heading-line-height
+      );
+      background-color: color($theme-table-header-background-color);
+      color: color($theme-table-header-text-color);
+      font-weight: fw("bold");
+      padding: units(1.5) units(2);
+      &:before {
+        display: none;
+      }
+    }
+  }
+}
+
+%usa-table--stacked {
+  @include table-stacked-styles;
+}
+
+%usa-table--stacked-header {
+  @include table-stacked-styles;
+  @include table-stacked-header-styles;
+}
+
+%usa-table-container--scrollable {
+  margin: units(2.5) 0;
+  overflow-y: hidden;
+
+  .usa-table {
+    margin: 0;
+  }
+
+  th,
+  td {
+    white-space: nowrap;
+  }
+}

data/_sass/uswds/src/elements/_buttons.scss

@@ -1,5 +1,6 @@
 // Buttons variables
 
+$button-context: "Button";
 $button-stroke: inset 0 0 0 units($theme-button-stroke-width);
 
 // Buttons
@@ -7,7 +8,7 @@ $button-stroke: inset 0 0 0 units($theme-button-stroke-width);
 .usa-button {
   @include border-box-sizing;
   @include typeset($theme-button-font-family, null, 1);
-  @include set-text-and-bg("primary");
+  @include set-text-and-bg("primary", $context: $button-context);
   appearance: none;
   border: 0;
   border-radius: radius($theme-button-border-radius);
@@ -30,14 +31,14 @@ $button-stroke: inset 0 0 0 units($theme-button-stroke-width);
 
   &:hover,
   &.usa-button--hover {
-    @include set-text-and-bg("primary-dark");
+    @include set-text-and-bg("primary-dark", $context: $button-context);
     border-bottom: 0;
     text-decoration: none;
   }
 
   &:active,
   &.usa-button--active {
-    @include set-text-and-bg("primary-darker");
+    @include set-text-and-bg("primary-darker", $context: $button-context);
   }
 
   &:not([disabled]):focus,
@@ -51,38 +52,38 @@ $button-stroke: inset 0 0 0 units($theme-button-stroke-width);
 }
 
 .usa-button--accent-cool {
-  @include set-text-and-bg("accent-cool");
+  @include set-text-and-bg("accent-cool", $context: $button-context);
 
   &:visited {
-    @include set-text-and-bg("accent-cool");
+    @include set-text-and-bg("accent-cool", $context: $button-context);
   }
 
   &:hover,
   &.usa-button--hover {
-    @include set-text-and-bg("accent-cool-dark");
+    @include set-text-and-bg("accent-cool-dark", $context: $button-context);
   }
 
   &:active,
   &.usa-button--active {
-    @include set-text-and-bg("accent-cool-darker");
+    @include set-text-and-bg("accent-cool-darker", $context: $button-context);
   }
 }
 
 .usa-button--accent-warm {
-  @include set-text-and-bg("accent-warm");
+  @include set-text-and-bg("accent-warm", $context: $button-context);
 
   &:visited {
-    @include set-text-and-bg("accent-warm");
+    @include set-text-and-bg("accent-warm", $context: $button-context);
   }
 
   &:hover,
   &.usa-button--hover {
-    @include set-text-and-bg("accent-warm-dark");
+    @include set-text-and-bg("accent-warm-dark", $context: $button-context);
   }
 
   &:active,
   &.usa-button--active {
-    @include set-text-and-bg("accent-warm-darker");
+    @include set-text-and-bg("accent-warm-darker", $context: $button-context);
   }
 }
 
@@ -138,6 +139,10 @@ $button-stroke: inset 0 0 0 units($theme-button-stroke-width);
       @include button-unstyled;
       color: color($button-inverse-color);
 
+      &:visited {
+        color: color($button-inverse-color);
+      }
+
       &:hover,
       &.usa-button--hover {
         color: color($button-inverse-hover-color);
@@ -152,30 +157,30 @@ $button-stroke: inset 0 0 0 units($theme-button-stroke-width);
 }
 
 .usa-button--base {
-  @include set-text-and-bg("base");
+  @include set-text-and-bg("base", $context: $button-context);
 
   &:hover,
   &.usa-button--hover {
-    @include set-text-and-bg("base-dark");
+    @include set-text-and-bg("base-dark", $context: $button-context);
   }
 
   &:active,
   &.usa-button--active {
-    @include set-text-and-bg("base-darker");
+    @include set-text-and-bg("base-darker", $context: $button-context);
   }
 }
 
 .usa-button--secondary {
-  @include set-text-and-bg("secondary");
+  @include set-text-and-bg("secondary", $context: $button-context);
 
   &:hover,
   &.usa-button--hover {
-    @include set-text-and-bg("secondary-dark");
+    @include set-text-and-bg("secondary-dark", $context: $button-context);
   }
 
   &:active,
   &.usa-button--active {
-    @include set-text-and-bg("secondary-darker");
+    @include set-text-and-bg("secondary-darker", $context: $button-context);
   }
 }
 

data/_sass/uswds/src/elements/_table.scss

@@ -5,3 +5,38 @@
 .usa-table--borderless {
   @extend %usa-table--borderless;
 }
+
+.usa-table--compact {
+  @extend %usa-table--compact;
+}
+
+.usa-table--striped {
+  @extend %usa-table--striped;
+}
+
+.usa-table--stacked {
+  @include at-media-max("mobile-lg") {
+    @include table-stacked-styles;
+  }
+}
+
+.usa-table--stacked-header {
+  @include at-media-max("mobile-lg") {
+    @include table-stacked-styles;
+    @include table-stacked-header-styles;
+  }
+}
+
+.width-mobile {
+  .usa-table--stacked {
+    @extend %usa-table--stacked;
+  }
+
+  .usa-table--stacked-header {
+    @extend %usa-table--stacked-header;
+  }
+}
+
+.usa-table-container--scrollable {
+  @extend %usa-table-container--scrollable;
+}

data/_sass/uswds/src/elements/form-controls/_checkbox-and-radio.scss

@@ -61,6 +61,7 @@
   box-shadow: 0 0 0 units($theme-input-select-border-width) color("base");
   line-height: units($theme-input-select-size);
   margin-right: units($input-select-margin-right);
+  text-indent: 0;
 }
 
 .usa-checkbox__input:checked + .usa-checkbox__label::before,
@@ -115,3 +116,27 @@
   box-shadow: 0 0 0 units($theme-input-select-border-width) color("disabled");
   cursor: not-allowed;
 }
+
+// Checkboxes and radios with tap-friendly targets
+.usa-checkbox__input--tile + .usa-checkbox__label,
+.usa-radio__input--tile + .usa-radio__label {
+  border: units($theme-input-tile-border-width) solid
+    color($theme-input-tile-border-color);
+  border-radius: radius($theme-input-tile-border-radius);
+  margin: units(1) 0;
+  padding: units(1.5) units(2) units(1.5) units(5);
+}
+
+.usa-checkbox__input--tile:checked + .usa-checkbox__label,
+.usa-radio__input--tile:checked + .usa-radio__label {
+  background-color: color($theme-input-tile-background-color-selected);
+  border-color: color($theme-input-tile-border-color-selected);
+}
+
+.usa-checkbox__label-description,
+.usa-radio__label-description {
+  display: block;
+  font-size: size("ui", "2xs");
+  margin-top: units(1);
+  text-indent: 0;
+}

data/_sass/uswds/src/elements/form-controls/_combo-box.scss

@@ -42,25 +42,26 @@ button.usa-combo-box__clear-input {
 .usa-combo-box__clear-input {
   background-color: transparent;
   background-position: center;
-  background-size: auto units(1.5);
+  background-size: auto units(3);
   border: 0;
+  bottom: 1px;
   cursor: pointer;
   margin-bottom: 0;
+  opacity: 0.6;
   padding-right: units(4);
   position: absolute;
   top: 1px;
-  height: 2.25em;
   z-index: z-index(100);
 }
 .usa-combo-box__clear-input {
-  @include add-background-svg("close-gray-60");
-
+  @include add-background-svg("usa-icons/close");
   display: none;
   right: calc(2.5em + 3px);
 }
 
 .usa-combo-box__toggle-list {
-  @include add-background-svg("arrow-down-gray-60");
+  @include add-background-svg("usa-icons/expand_more");
+  background-size: auto units(4);
   right: 1px;
 }