uswds-jekyll 4.2.0 → 5.0.0

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

@@ -0,0 +1,26 @@
+$system-color-yellow: (
+  'yellow': (
+    5: #faf3d1,
+    10: #f5e6af,
+    20: #e6c74c,
+    30: #c9ab48,
+    40: #a88f48,
+    50: #8a7237,
+    60: #6b5a39,
+    70: #504332,
+    80: #332d27,
+    90: #1a1614,
+    'vivid': (
+      5: #fff5c2,
+      10: #fee685,
+      20: #face00,
+      30: #ddaa01,
+      40: #b38c00,
+      50: #947100,
+      60: #776017,
+      70: #5c4809,
+      80: #422d19,
+      90: false,
+    ),
+  ),
+);

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

@@ -0,0 +1,217 @@
+// Buttons variables
+
+$button-stroke: inset 0 0 0 units($theme-button-stroke-width);
+
+// Buttons
+
+.usa-button {
+  @include border-box-sizing;
+  @include typeset($theme-button-font-family, null, 1);
+  @include add-knockout-font-smoothing;
+  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");
+  margin-right: units(1);
+  padding: units(1.5) units(2.5);
+  text-align: center;
+  text-decoration: none;
+  width: 100%;
+
+  @include at-media("mobile-lg") {
+    width: auto;
+  }
+
+  &:visited {
+    color: color("white");
+  }
+
+  &:hover,
+  &.usa-button--hover {
+    background-color: color("primary-dark");
+    border-bottom: 0;
+    color: color("white");
+    text-decoration: none;
+  }
+
+  &:active,
+  &.usa-button--active {
+    background-color: color("primary-darker");
+    color: color("white");
+  }
+
+  &:not([disabled]):focus,
+  &:not([disabled]).usa-focus {
+    outline-offset: units(0.5);
+  }
+
+  &:disabled {
+    @include button-disabled;
+  }
+}
+
+.usa-button--accent-cool {
+  @include no-knockout-font-smoothing;
+  background-color: color("accent-cool");
+  color: color("ink");
+
+  &:visited {
+    color: color("ink");
+  }
+
+  &:hover,
+  &.usa-button--hover {
+    @include add-knockout-font-smoothing;
+    background-color: color("accent-cool-dark");
+    color: color("white");
+  }
+
+  &:active,
+  &.usa-button--active {
+    @include add-knockout-font-smoothing;
+    background-color: color("accent-cool-darker");
+    color: color("white");
+  }
+}
+
+.usa-button--outline {
+  @include no-knockout-font-smoothing;
+  background-color: color("transparent");
+  box-shadow: $button-stroke color("primary");
+  color: color("primary");
+
+  &:visited {
+    color: color("primary");
+  }
+
+  &:hover,
+  &.usa-button--hover {
+    background-color: color("transparent");
+    box-shadow: $button-stroke color("primary-dark");
+    color: color("primary-dark");
+  }
+
+  &:active,
+  &.usa-button--active {
+    background-color: color("transparent");
+    box-shadow: $button-stroke color("primary-darker");
+    color: color("primary-darker");
+  }
+
+  &.usa-button--inverse {
+    $button-inverse-color: "base-lighter";
+    $button-inverse-hover-color: "base-lightest";
+    $button-inverse-active-color: "white";
+
+    box-shadow: $button-stroke color("base-lighter");
+    color: color($button-inverse-color);
+
+    &:visited {
+      color: color($button-inverse-color);
+    }
+
+    &:hover,
+    &.usa-button--hover {
+      box-shadow: $button-stroke color($button-inverse-hover-color);
+      color: color($button-inverse-hover-color);
+    }
+
+    &:active,
+    &.usa-button--active {
+      background-color: transparent;
+      box-shadow: $button-stroke color($button-inverse-active-color);
+      color: color($button-inverse-active-color);
+    }
+
+    &.usa-button--unstyled {
+      @include button-unstyled;
+      color: color($button-inverse-color);
+
+      &:hover,
+      &.usa-button--hover {
+        color: color($button-inverse-hover-color);
+      }
+
+      &:active,
+      &.usa-button--active {
+        color: color($button-inverse-active-color);
+      }
+    }
+  }
+}
+
+.usa-button--base {
+  background-color: color("base");
+
+  &:hover,
+  &.usa-button--hover {
+    background-color: color("base-dark");
+  }
+
+  &:active,
+  &.usa-button--active {
+    background-color: color("base-darker");
+  }
+}
+
+.usa-button--secondary {
+  background-color: color("secondary");
+
+  &:hover,
+  &.usa-button--hover {
+    background-color: color("secondary-dark");
+  }
+
+  &:active,
+  &.usa-button--active {
+    background-color: color("secondary-darker");
+  }
+}
+
+.usa-button--big {
+  border-radius: radius($theme-button-border-radius);
+  font-size: font-size($theme-button-font-family, "lg");
+  padding: units(2) units(3);
+}
+
+.usa-button--disabled {
+  @include button-disabled;
+}
+
+.usa-button--outline-disabled,
+.usa-button--outline-inverse-disabled,
+.usa-button--outline:disabled,
+.usa-button--outline-inverse:disabled,
+.usa-button--outline-inverse:disabled {
+  background-color: color("transparent");
+  pointer-events: none;
+
+  &:hover,
+  &.usa-button--hover,
+  &:active,
+  &.usa-button--active,
+  &:focus,
+  &.usa-focus {
+    background-color: color("transparent");
+    border: 0;
+  }
+}
+
+.usa-button--outline-disabled,
+.usa-button--outline:disabled {
+  box-shadow: $button-stroke color("disabled");
+  color: color("disabled");
+  &.usa-button--inverse {
+    background-color: transparent;
+    box-shadow: $button-stroke color("base");
+    color: color("base");
+  }
+}
+
+.usa-button--unstyled {
+  @include button-unstyled;
+}

data/_sass/uswds/{elements → src/elements}/_embed.scss

@@ -1,10 +1,6 @@
 $aspect-height: 9;
 $aspect-width: 16;
 
-@mixin embed-container ($height, $width) {
-  padding-bottom: percentage($height/$width);
-}
-
 .usa-embed-container {
   iframe,
   object,

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

@@ -0,0 +1,7 @@
+img {
+  max-width: 100%;
+}
+
+.usa-media-link {
+  @include media-link();
+}

data/_sass/uswds/src/elements/_layout-grid.scss

@@ -0,0 +1,159 @@
+/* stylelint-disable */
+
+$namespace-grid: ns("grid");
+
+// basic container
+.#{$namespace-grid}container {
+  $props: append-important($grid-global, $theme-grid-container-max-width);
+  @include grid-container($props);
+}
+
+// container with custom widths
+@each $width-key, $width-value in $system-breakpoints {
+  .#{$namespace-grid}container-#{$width-key} {
+    $props: append-important($grid-global, $width-key);
+    @include grid-container($props);
+  }
+}
+
+// responsive containers...
+@each $mq-key, $mq-value in $system-breakpoints {
+  @if map-get($theme-utility-breakpoints, $mq-key) {
+    @include at-media($mq-key) {
+      .#{$mq-key}\:#{$namespace-grid}container {
+        $props: append-important($grid-global, desktop);
+        @include grid-container($props);
+      }
+
+      // ...with custom widths
+      @each $width-key, $width-value in $system-breakpoints {
+        .#{$mq-key}\:#{$namespace-grid}container-#{$width-key} {
+          $props: append-important($grid-global, $width-key);
+          @include grid-container($props);
+        }
+      }
+    }
+  }
+}
+
+// basic row...
+.#{$namespace-grid}row {
+  @include grid-row;
+
+  // ...that includes column gaps
+  &.#{$namespace-grid}gap {
+    @include grid-gap-responsive;
+  }
+  @each $gap-key, $gap-val in map-deep-get($system-properties, gap, standard) {
+    &.#{$namespace-grid}gap-#{$gap-key} {
+      $props: append-important($grid-global, $gap-key);
+      @include grid-gap($props);
+    }
+  }
+
+  // responsive column gaps
+  @each $mq-key, $mq-value in $system-breakpoints {
+    @if map-get($theme-utility-breakpoints, $mq-key) {
+      @include at-media($mq-key) {
+        @each $gap-key,
+          $gap-val in map-deep-get($system-properties, gap, standard)
+        {
+          &.#{$mq-key}\:#{$namespace-grid}gap-#{$gap-key} {
+            $props: append-important($grid-global, $gap-key);
+            @include grid-gap($props);
+          }
+        }
+      }
+    }
+  }
+}
+
+// basic columns...
+[class*="#{$namespace-grid}col"] {
+  @include u-position(relative);
+  @include u-width(full);
+  box-sizing: border-box;
+}
+
+.#{$namespace-grid}col {
+  $props: append-important($grid-global, fill);
+  @include grid-col($props);
+}
+
+.#{$namespace-grid}col-auto {
+  $props: append-important($grid-global, auto);
+  @include grid-col($props);
+}
+
+.#{$namespace-grid}col-fill {
+  $props: append-important($grid-global, fill);
+  @include grid-col($props);
+}
+
+// ...with widths
+@each $width-key, $width-value in $system-layout-grid-widths {
+  .#{$namespace-grid}col-#{$width-key} {
+    $props: append-important($grid-global, $width-key);
+    @include grid-col($props);
+  }
+}
+
+// responsive columns
+@each $mq-key, $mq-value in $system-breakpoints {
+  @if map-get($theme-utility-breakpoints, $mq-key) {
+    @include at-media($mq-key) {
+      .#{$mq-key}\:#{$namespace-grid}col {
+        $props: append-important($grid-global, fill);
+        @include grid-col($props);
+      }
+      .#{$mq-key}\:#{$namespace-grid}col-fill {
+        $props: append-important($grid-global, fill);
+        @include grid-col($props);
+      }
+      .#{$mq-key}\:#{$namespace-grid}col-auto {
+        $props: append-important($grid-global, auto);
+        @include grid-col($props);
+      }
+
+      @each $width-key, $width-value in $system-layout-grid-widths {
+        .#{$mq-key}\:#{$namespace-grid}col-#{$width-key} {
+          $props: append-important($grid-global, $width-key);
+          @include grid-col($props);
+        }
+      }
+    }
+  }
+}
+
+// basic offsets
+@each $width-key, $width-value in $system-layout-grid-widths {
+  .#{$namespace-grid}offset-#{$width-key} {
+    $props: append-important($grid-global, $width-key);
+    @include grid-offset($props);
+  }
+}
+.#{$namespace-grid}offset-none {
+  $props: append-important($grid-global, none);
+  @include grid-offset($props);
+}
+
+// responsive offsets
+@each $mq-key, $mq-value in $system-breakpoints {
+  @if map-get($theme-utility-breakpoints, $mq-key) {
+    @each $width-key, $width-value in $system-layout-grid-widths {
+      @include at-media($mq-key) {
+        .#{$mq-key}\:#{$namespace-grid}offset-#{$width-key} {
+          $props: append-important($grid-global, $width-key);
+          @include grid-offset($props);
+        }
+      }
+    }
+    @include at-media($mq-key) {
+      .#{$mq-key}\:#{$namespace-grid}offset-none {
+        $props: append-important($grid-global, none);
+        @include grid-offset($props);
+      }
+    }
+  }
+}
+/* stylelint-enable */

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

@@ -0,0 +1,7 @@
+.usa-table {
+  @extend %usa-table;
+}
+
+.usa-table--borderless {
+  @extend %usa-table--borderless;
+}

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

@@ -0,0 +1,18 @@
+.usa-tag {
+  @include border-box-sizing;
+  @include u-font("ui", "2xs");
+  @include u-text("white", "uppercase");
+  background-color: color("base-dark");
+  border-radius: radius("sm");
+  margin-right: units(0.5);
+  padding: units(1px) units(1);
+
+  &:only-of-type {
+    margin-right: 0;
+  }
+}
+
+.usa-tag--big {
+  @include u-padding-x(1);
+  @include u-font("ui", $theme-body-font-size);
+}