uswds-jekyll 5.0.1 → 5.2.0

data/_sass/uswds/src/core/mixins/_media-block-img.scss

@@ -1,4 +1,4 @@
 @mixin media-block-img($margin-right: units(1)) {
-  float: left;
+  flex-shrink: 0;
   margin-right: $margin-right;
 }

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

@@ -0,0 +1,30 @@
+@mixin set-link-from-bg(
+  $bg-color,
+  $preferred-link-color: $theme-link-color,
+  $fallback-link-color: $theme-link-reverse-color,
+  $wcag-target: "AA"
+) {
+  $link-tokens: get-link-tokens-from-bg(
+    $bg-color,
+    $preferred-link-color,
+    $fallback-link-color,
+    $wcag-target
+  );
+
+  $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
+  );
+  color: color($link-token);
+  &:visited {
+    color: color($visited-token);
+  }
+  &:hover,
+  &:active {
+    color: color($hover-token);
+  }
+}

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

@@ -0,0 +1,28 @@
+@mixin set-text-from-bg(
+  $bg-color,
+  $preferred-text-color: "white",
+  $fallback-text-color: "ink",
+  $wcag-target: "AA"
+) {
+  color: get-color-from-bg(
+    $bg-color,
+    $preferred-text-color,
+    $fallback-text-color,
+    $wcag-target
+  );
+}
+
+@mixin set-text-and-bg(
+  $bg-color,
+  $preferred-text-color: "white",
+  $fallback-text-color: "ink",
+  $wcag-target: "AA"
+) {
+  @include set-text-from-bg(
+    $bg-color,
+    $preferred-text-color,
+    $fallback-text-color,
+    $wcag-target
+  );
+  background-color: color($bg-color);
+}

data/_sass/uswds/src/core/mixins/utilities/_align-self.scss

@@ -0,0 +1,11 @@
+// Outputs align-self
+
+@mixin u-align-self($value...) {
+  $value: unpack($value);
+  $important: null;
+  @if has-important($value) {
+    $value: remove($value, "!important");
+    $important: " !important";
+  }
+  align-self: get-uswds-value(align-self, $value) #{$important};
+}

data/_sass/uswds/src/core/mixins/utilities/_border.scss

@@ -8,7 +8,7 @@ $border-utilities: (
     map-collect(
       map-deep-get($system-properties, border-style, standard),
       map-deep-get($system-properties, border-style, extended)
-    )
+    ),
 );
 
 @mixin border-n($side, $value...) {

data/_sass/uswds/src/core/mixins/utilities/_flex.scss

@@ -6,6 +6,11 @@ $flex-utililies: (
       map-deep-get($system-properties, align-items, standard),
       map-deep-get($system-properties, align-items, extended)
     ),
+  align-self:
+    map-collect(
+      map-deep-get($system-properties, align-self, standard),
+      map-deep-get($system-properties, align-self, extended)
+    ),
   flex:
     map-collect(
       map-deep-get($system-properties, flex, standard),
@@ -25,7 +30,7 @@ $flex-utililies: (
     map-collect(
       map-deep-get($system-properties, justify-content, standard),
       map-deep-get($system-properties, justify-content, extended)
-    )
+    ),
 );
 
 @mixin u-flex($value...) {

data/_sass/uswds/src/core/mixins/utilities/_text.scss

@@ -1,6 +1,11 @@
 // Outputs properties based on contents of text()
 
 $text-utililies: (
+  font-feature-settings:
+    map-collect(
+      map-deep-get($system-properties, font-feature-settings, standard),
+      map-deep-get($system-properties, font-feature-settings, extended)
+    ),
   font-style:
     map-collect(
       map-deep-get($system-properties, font-style, standard),
@@ -41,7 +46,7 @@ $text-utililies: (
       map-deep-get($system-properties, white-space, standard),
       map-deep-get($system-properties, white-space, extended)
     ),
-  color: map-collect($tokens-color-required)
+  color: map-collect($tokens-color-required),
 );
 
 @mixin u-text($value...) {

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

@@ -6,6 +6,11 @@
   &:last-child {
     margin-bottom: 0;
   }
+
+  ul,
+  ol {
+    margin-top: 0.25em;
+  }
 }
 
 %usa-list-item {

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

@@ -1,5 +1,5 @@
 $system-color-blue-cool: (
-  'blue-cool': (
+  "blue-cool": (
     5: #e7f2f5,
     10: #dae9ee,
     20: #adcfdc,
@@ -10,7 +10,7 @@ $system-color-blue-cool: (
     70: #224a58,
     80: #14333d,
     90: #0f191c,
-    'vivid': (
+    "vivid": (
       5: #e1f3f8,
       10: #c3ebfa,
       20: #97d4ea,
@@ -23,4 +23,4 @@ $system-color-blue-cool: (
       90: false,
     ),
   ),
-);
+);

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

@@ -1,5 +1,5 @@
 $system-color-blue-warm: (
-  'blue-warm': (
+  "blue-warm": (
     5: #ecf1f7,
     10: #e1e7f1,
     20: #bbcae4,
@@ -10,7 +10,7 @@ $system-color-blue-warm: (
     70: #2f4668,
     80: #252f3e,
     90: #13171f,
-    'vivid': (
+    "vivid": (
       5: #edf5ff,
       10: #d4e5ff,
       20: #adcdff,
@@ -23,4 +23,4 @@ $system-color-blue-warm: (
       90: false,
     ),
   ),
-);
+);

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

@@ -1,5 +1,5 @@
 $system-color-blue: (
-  'blue': (
+  "blue": (
     5: #eff6fb,
     10: #d9e8f6,
     20: #aacdec,
@@ -10,7 +10,7 @@ $system-color-blue: (
     70: #274863,
     80: #1f303e,
     90: #11181d,
-    'vivid': (
+    "vivid": (
       5: #e8f5ff,
       10: #cfe8ff,
       20: #a1d3ff,
@@ -23,4 +23,4 @@ $system-color-blue: (
       90: false,
     ),
   ),
-);
+);

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

@@ -1,5 +1,5 @@
 $system-color-cyan: (
-  'cyan': (
+  "cyan": (
     5: #e7f6f8,
     10: #ccecf2,
     20: #99deea,
@@ -10,7 +10,7 @@ $system-color-cyan: (
     70: #2c4a4e,
     80: #203133,
     90: #111819,
-    'vivid': (
+    "vivid": (
       5: #e5faff,
       10: #a8f2ff,
       20: #52daf2,
@@ -23,4 +23,4 @@ $system-color-cyan: (
       90: false,
     ),
   ),
-);
+);

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

@@ -1,5 +1,5 @@
 $system-color-gold: (
-  'gold': (
+  "gold": (
     5: #f5f0e6,
     10: #f1e5cd,
     20: #dec69a,
@@ -10,7 +10,7 @@ $system-color-gold: (
     70: #4d4438,
     80: #322d26,
     90: #191714,
-    'vivid': (
+    "vivid": (
       5: #fef0c8,
       10: #ffe396,
       20: #ffbe2e,
@@ -23,4 +23,4 @@ $system-color-gold: (
       90: false,
     ),
   ),
-);
+);

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

@@ -1,5 +1,5 @@
 $system-color-gray-cool: (
-  'gray-cool': (
+  "gray-cool": (
     1: #fbfcfd,
     2: #f7f9fa,
     3: #f5f6f7,
@@ -15,4 +15,4 @@ $system-color-gray-cool: (
     80: #2d2e2f,
     90: #1c1d1f,
   ),
-);
+);

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

@@ -1,5 +1,5 @@
 $system-color-gray-warm: (
-  'gray-warm': (
+  "gray-warm": (
     1: #fcfcfb,
     2: #f9f9f7,
     3: #f6f6f2,
@@ -15,4 +15,4 @@ $system-color-gray-warm: (
     80: #2e2e2a,
     90: #171716,
   ),
-);
+);

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

@@ -1,5 +1,5 @@
 $system-color-gray: (
-  'gray': (
+  "gray": (
     1: #fcfcfc,
     2: #f9f9f9,
     3: #f6f6f6,
@@ -16,4 +16,4 @@ $system-color-gray: (
     90: #1b1b1b,
     100: #000000,
   ),
-);
+);

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

@@ -1,5 +1,5 @@
 $system-color-green-cool: (
-  'green-cool': (
+  "green-cool": (
     5: #ecf3ec,
     10: #dbebde,
     20: #b4d0b9,
@@ -10,7 +10,7 @@ $system-color-green-cool: (
     70: #37493b,
     80: #28312a,
     90: #1a1f1a,
-    'vivid': (
+    "vivid": (
       5: #e3f5e1,
       10: #b7f5bd,
       20: #70e17b,
@@ -23,4 +23,4 @@ $system-color-green-cool: (
       90: false,
     ),
   ),
-);
+);

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

@@ -1,5 +1,5 @@
 $system-color-green-warm: (
-  'green-warm': (
+  "green-warm": (
     5: #f1f4d7,
     10: #e7eab7,
     20: #cbd17a,
@@ -10,7 +10,7 @@ $system-color-green-warm: (
     70: #45472f,
     80: #2d2f21,
     90: #171712,
-    'vivid': (
+    "vivid": (
       5: #f5fbc1,
       10: #e7f434,
       20: #c5d30a,
@@ -23,4 +23,4 @@ $system-color-green-warm: (
       90: false,
     ),
   ),
-);
+);

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

@@ -1,5 +1,5 @@
 $system-color-green: (
-  'green': (
+  "green": (
     5: #eaf4dd,
     10: #dfeacd,
     20: #b8d293,
@@ -10,7 +10,7 @@ $system-color-green: (
     70: #3c4a29,
     80: #293021,
     90: #161814,
-    'vivid': (
+    "vivid": (
       5: #ddf9c7,
       10: #c5ee93,
       20: #98d035,
@@ -23,4 +23,4 @@ $system-color-green: (
       90: false,
     ),
   ),
-);
+);

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

@@ -1,5 +1,5 @@
 $system-color-indigo-cool: (
-  'indigo-cool': (
+  "indigo-cool": (
     5: #eef0f9,
     10: #e1e6f9,
     20: #bbc8f5,
@@ -10,17 +10,17 @@ $system-color-indigo-cool: (
     70: #374274,
     80: #292d42,
     90: #151622,
-    'vivid': (
+    "vivid": (
       5: #edf0ff,
       10: #dee5ff,
       20: #b8c8ff,
       30: #94adff,
       40: #628ef4,
       50: #4866ff,
-      60: #4150f2,
-      70: #3e4ded,
-      80: #222fbf,
+      60: #3e4ded,
+      70: #222fbf,
+      80: #1b2b85,
       90: false,
     ),
   ),
-);
+);

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

@@ -1,5 +1,5 @@
 $system-color-indigo-warm: (
-  'indigo-warm': (
+  "indigo-warm": (
     5: #f1eff7,
     10: #e7e3fa,
     20: #cbc4f2,
@@ -10,7 +10,7 @@ $system-color-indigo-warm: (
     70: #453c7b,
     80: #2e2c40,
     90: #18161d,
-    'vivid': (
+    "vivid": (
       5: #f5f2ff,
       10: #e4deff,
       20: #cfc4fd,
@@ -23,4 +23,4 @@ $system-color-indigo-warm: (
       90: false,
     ),
   ),
-);
+);

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

@@ -1,5 +1,5 @@
 $system-color-indigo: (
-  'indigo': (
+  "indigo": (
     5: #efeff8,
     10: #e5e4fa,
     20: #c5c5f3,
@@ -10,7 +10,7 @@ $system-color-indigo: (
     70: #3d4076,
     80: #2b2c40,
     90: #16171f,
-    'vivid': (
+    "vivid": (
       5: #f0f0ff,
       10: #e0e0ff,
       20: #ccceff,
@@ -23,4 +23,4 @@ $system-color-indigo: (
       90: false,
     ),
   ),
-);
+);

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

@@ -1,5 +1,5 @@
 $system-color-magenta: (
-  'magenta': (
+  "magenta": (
     5: #f9f0f2,
     10: #f6e1e8,
     20: #f0bbcc,
@@ -10,7 +10,7 @@ $system-color-magenta: (
     70: #66364b,
     80: #402731,
     90: #1b1617,
-    'vivid': (
+    "vivid": (
       5: #fff2f5,
       10: #ffddea,
       20: #ffb4cf,
@@ -23,4 +23,4 @@ $system-color-magenta: (
       90: false,
     ),
   ),
-);
+);