uswds-jekyll 5.0.1 → 5.2.0

data/_sass/uswds/src/core/system-tokens/_mint-cool.scss

@@ -1,5 +1,5 @@
 $system-color-mint-cool: (
-  'mint-cool': (
+  "mint-cool": (
     5: #e0f7f6,
     10: #c4eeeb,
     20: #9bd4cf,
@@ -10,7 +10,7 @@ $system-color-mint-cool: (
     70: #2a4b45,
     80: #203131,
     90: #111818,
-    'vivid': (
+    "vivid": (
       5: #d5fbf3,
       10: #7efbe1,
       20: #29e1cb,
@@ -23,4 +23,4 @@ $system-color-mint-cool: (
       90: false,
     ),
   ),
-);
+);

data/_sass/uswds/src/core/system-tokens/_mint.scss

@@ -1,5 +1,5 @@
 $system-color-mint: (
-  'mint': (
+  "mint": (
     5: #dbf6ed,
     10: #c7efe2,
     20: #92d9bb,
@@ -10,7 +10,7 @@ $system-color-mint: (
     70: #204e34,
     80: #193324,
     90: #0d1a12,
-    'vivid': (
+    "vivid": (
       5: #c9fbeb,
       10: #83fcd4,
       20: #0ceda6,
@@ -23,4 +23,4 @@ $system-color-mint: (
       90: false,
     ),
   ),
-);
+);

data/_sass/uswds/src/core/system-tokens/_orange-warm.scss

@@ -1,5 +1,5 @@
 $system-color-orange-warm: (
-  'orange-warm': (
+  "orange-warm": (
     5: #faeee5,
     10: #fbe0d0,
     20: #f7bca2,
@@ -10,7 +10,7 @@ $system-color-orange-warm: (
     70: #633a32,
     80: #3d2925,
     90: #1c1615,
-    'vivid': (
+    "vivid": (
       5: #fff3ea,
       10: #ffe2d1,
       20: #fbbaa7,
@@ -23,4 +23,4 @@ $system-color-orange-warm: (
       90: false,
     ),
   ),
-);
+);

data/_sass/uswds/src/core/system-tokens/_orange.scss

@@ -1,5 +1,5 @@
 $system-color-orange: (
-  'orange': (
+  "orange": (
     5: #f6efe9,
     10: #f2e4d4,
     20: #f3bf90,
@@ -10,7 +10,7 @@ $system-color-orange: (
     70: #524236,
     80: #332d27,
     90: #1b1614,
-    'vivid': (
+    "vivid": (
       5: #fef2e4,
       10: #fce2c5,
       20: #ffbc78,
@@ -23,4 +23,4 @@ $system-color-orange: (
       90: false,
     ),
   ),
-);
+);

data/_sass/uswds/src/core/system-tokens/_red-cool.scss

@@ -1,5 +1,5 @@
 $system-color-red-cool: (
-  'red-cool': (
+  "red-cool": (
     5: #f8eff1,
     10: #f3e1e4,
     20: #ecbec6,
@@ -10,7 +10,7 @@ $system-color-red-cool: (
     70: #68363f,
     80: #40282c,
     90: #1e1517,
-    'vivid': (
+    "vivid": (
       5: #fff2f5,
       10: #f8dfe2,
       20: #f8b9c5,
@@ -23,4 +23,4 @@ $system-color-red-cool: (
       90: false,
     ),
   ),
-);
+);

data/_sass/uswds/src/core/system-tokens/_red-warm.scss

@@ -1,5 +1,5 @@
 $system-color-red-warm: (
-  'red-warm': (
+  "red-warm": (
     5: #f6efea,
     10: #f4e3db,
     20: #ecc0a7,
@@ -10,7 +10,7 @@ $system-color-red-warm: (
     70: #524236,
     80: #332d29,
     90: #1f1c18,
-    'vivid': (
+    "vivid": (
       5: #fff5ee,
       10: #fce1d4,
       20: #f6bd9c,
@@ -23,4 +23,4 @@ $system-color-red-warm: (
       90: false,
     ),
   ),
-);
+);

data/_sass/uswds/src/core/system-tokens/_red.scss

@@ -1,5 +1,5 @@
 $system-color-red: (
-  'red': (
+  "red": (
     5: #f9eeee,
     10: #f8e1de,
     20: #f7bbb1,
@@ -10,7 +10,7 @@ $system-color-red: (
     70: #6f3331,
     80: #3e2927,
     90: #1b1616,
-    'vivid': (
+    "vivid": (
       5: #fff3f2,
       10: #fde0db,
       20: #fdb8ae,
@@ -23,4 +23,4 @@ $system-color-red: (
       90: false,
     ),
   ),
-);
+);

data/_sass/uswds/src/core/system-tokens/_violet-warm.scss

@@ -1,5 +1,5 @@
 $system-color-violet-warm: (
-  'violet-warm': (
+  "violet-warm": (
     5: #f8f0f9,
     10: #f6dff8,
     20: #e2bee4,
@@ -10,7 +10,7 @@ $system-color-violet-warm: (
     70: #5c395a,
     80: #382936,
     90: #1b151b,
-    'vivid': (
+    "vivid": (
       5: #fef2ff,
       10: #fbdcff,
       20: #f4b2ff,
@@ -23,4 +23,4 @@ $system-color-violet-warm: (
       90: false,
     ),
   ),
-);
+);

data/_sass/uswds/src/core/system-tokens/_violet.scss

@@ -1,5 +1,5 @@
 $system-color-violet: (
-  'violet': (
+  "violet": (
     5: #f4f1f9,
     10: #ebe3f9,
     20: #d0c3e9,
@@ -10,7 +10,7 @@ $system-color-violet: (
     70: #4c3d69,
     80: #312b3f,
     90: #18161d,
-    'vivid': (
+    "vivid": (
       5: #f7f2ff,
       10: #ede3ff,
       20: #d5bfff,
@@ -23,4 +23,4 @@ $system-color-violet: (
       90: false,
     ),
   ),
-);
+);

data/_sass/uswds/src/core/system-tokens/_yellow.scss

@@ -1,5 +1,5 @@
 $system-color-yellow: (
-  'yellow': (
+  "yellow": (
     5: #faf3d1,
     10: #f5e6af,
     20: #e6c74c,
@@ -10,7 +10,7 @@ $system-color-yellow: (
     70: #504332,
     80: #332d27,
     90: #1a1614,
-    'vivid': (
+    "vivid": (
       5: #fff5c2,
       10: #fee685,
       20: #face00,
@@ -23,4 +23,4 @@ $system-color-yellow: (
       90: false,
     ),
   ),
-);
+);

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

@@ -7,12 +7,10 @@ $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 add-knockout-font-smoothing;
+  @include set-text-and-bg("primary");
   appearance: none;
-  background-color: color("primary");
   border: 0;
   border-radius: radius($theme-button-border-radius);
-  color: color("white");
   cursor: pointer;
   display: inline-block;
   font-weight: font-weight("bold");
@@ -32,16 +30,14 @@ $button-stroke: inset 0 0 0 units($theme-button-stroke-width);
 
   &:hover,
   &.usa-button--hover {
-    background-color: color("primary-dark");
+    @include set-text-and-bg("primary-dark");
     border-bottom: 0;
-    color: color("white");
     text-decoration: none;
   }
 
   &:active,
   &.usa-button--active {
-    background-color: color("primary-darker");
-    color: color("white");
+    @include set-text-and-bg("primary-darker");
   }
 
   &:not([disabled]):focus,
@@ -55,31 +51,42 @@ $button-stroke: inset 0 0 0 units($theme-button-stroke-width);
 }
 
 .usa-button--accent-cool {
-  @include no-knockout-font-smoothing;
-  background-color: color("accent-cool");
-  color: color("ink");
+  @include set-text-and-bg("accent-cool");
 
   &:visited {
-    color: color("ink");
+    @include set-text-and-bg("accent-cool");
   }
 
   &:hover,
   &.usa-button--hover {
-    @include add-knockout-font-smoothing;
-    background-color: color("accent-cool-dark");
-    color: color("white");
+    @include set-text-and-bg("accent-cool-dark");
   }
 
   &:active,
   &.usa-button--active {
-    @include add-knockout-font-smoothing;
-    background-color: color("accent-cool-darker");
-    color: color("white");
+    @include set-text-and-bg("accent-cool-darker");
+  }
+}
+
+.usa-button--accent-warm {
+  @include set-text-and-bg("accent-warm");
+
+  &:visited {
+    @include set-text-and-bg("accent-warm");
+  }
+
+  &:hover,
+  &.usa-button--hover {
+    @include set-text-and-bg("accent-warm-dark");
+  }
+
+  &:active,
+  &.usa-button--active {
+    @include set-text-and-bg("accent-warm-darker");
   }
 }
 
 .usa-button--outline {
-  @include no-knockout-font-smoothing;
   background-color: color("transparent");
   box-shadow: $button-stroke color("primary");
   color: color("primary");
@@ -145,30 +152,30 @@ $button-stroke: inset 0 0 0 units($theme-button-stroke-width);
 }
 
 .usa-button--base {
-  background-color: color("base");
+  @include set-text-and-bg("base");
 
   &:hover,
   &.usa-button--hover {
-    background-color: color("base-dark");
+    @include set-text-and-bg("base-dark");
   }
 
   &:active,
   &.usa-button--active {
-    background-color: color("base-darker");
+    @include set-text-and-bg("base-darker");
   }
 }
 
 .usa-button--secondary {
-  background-color: color("secondary");
+  @include set-text-and-bg("secondary");
 
   &:hover,
   &.usa-button--hover {
-    background-color: color("secondary-dark");
+    @include set-text-and-bg("secondary-dark");
   }
 
   &:active,
   &.usa-button--active {
-    background-color: color("secondary-darker");
+    @include set-text-and-bg("secondary-darker");
   }
 }
 

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

@@ -7,3 +7,5 @@
 @import "text-input";
 @import "character-count";
 @import "combo-box";
+@import "date-picker";
+@import "time-picker";

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

@@ -31,7 +31,7 @@
   cursor: pointer;
   display: inherit;
   font-weight: font-weight("normal");
-  margin-bottom: units(1.5);
+  margin-top: units(1.5);
   padding-left: units($input-select-margin-right + $theme-input-select-size);
   position: relative;
   text-indent: units(-$input-select-margin-right - $theme-input-select-size);
@@ -99,8 +99,10 @@
   @include focus-outline(null, null, null, 0.5);
 }
 
-.usa-checkbox__input:disabled + .usa-checkbox__label {
+.usa-checkbox__input:disabled + .usa-checkbox__label,
+.usa-radio__input:disabled + .usa-radio__label {
   color: color("disabled");
+  cursor: not-allowed;
 }
 
 .usa-checkbox__input:focus + .usa-checkbox__label::before {

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

@@ -1,17 +1,79 @@
 .usa-combo-box {
+  max-width: units($theme-input-max-width);
   position: relative;
 }
 
+.usa-combo-box--pristine {
+  .usa-combo-box__input {
+    padding-right: calc(5em + 4px);
+
+    &::-ms-clear {
+      display: none;
+    }
+  }
+
+  .usa-combo-box__clear-input {
+    display: block;
+  }
+}
+
 .usa-combo-box__input {
   @extend %block-input-general;
   @extend %block-input-styles;
-  @include add-background-svg("arrow-down");
   appearance: none;
-  background-color: color("white");
-  background-position: right units(1.5) center;
-  background-size: units(2);
+  margin-bottom: 0;
+  max-width: none;
+  padding-right: calc(2.5em + 3px);
+}
+
+button.usa-combo-box__toggle-list,
+button.usa-combo-box__clear-input {
+  &:focus {
+    outline-offset: -4px;
+  }
+}
+
+.usa-combo-box__toggle-list__wrapper:focus,
+.usa-combo-box__clear-input__wrapper:focus {
+  outline: 0;
+}
+
+.usa-combo-box__toggle-list,
+.usa-combo-box__clear-input {
+  background-color: transparent;
+  background-position: center;
+  background-size: auto units(1.5);
+  border: 0;
+  cursor: pointer;
   margin-bottom: 0;
   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");
+
+  display: none;
+  right: calc(2.5em + 3px);
+}
+
+.usa-combo-box__toggle-list {
+  @include add-background-svg("arrow-down-gray-60");
+  right: 1px;
+}
+
+.usa-combo-box__input-button-separator {
+  background-color: color("gray-cool-20");
+  position: absolute;
+  top: 1px;
+  margin-bottom: 8px;
+  margin-top: 8px;
+  width: 1px;
+  right: calc(2.5em + 2px);
+  box-sizing: border-box;
+  z-index: z-index(200);
 }
 
 .usa-combo-box__list {
@@ -27,7 +89,11 @@
   padding: 0;
   position: absolute;
   width: 100%;
-  z-index: z-index(100);
+  z-index: z-index(300);
+
+  &:focus {
+    outline: 0;
+  }
 }
 
 .usa-combo-box__list-option {
@@ -36,12 +102,17 @@
   display: block;
   padding: units(1);
 
-  &--focused:focus {
-    outline-offset: -4px;
+  &--focused {
+    @include focus-outline($width: 2px, $offset: -2px, $color: "blue-warm-80v");
+    position: relative;
+    z-index: z-index(100);
+
+    &:focus {
+      outline-offset: -4px;
+    }
   }
 
-  &:hover,
-  &--focused {
+  &--selected {
     background-color: color("primary");
     border-color: color("primary");
     color: color("white");