uswds-jekyll 4.2.0 → 5.0.0

data/_sass/uswds/src/core/mixins/_add-aspect.scss

@@ -0,0 +1,17 @@
+@mixin add-aspect($ratio...) {
+  $ratio: unpack($ratio);
+  $important: null;
+  @if has-important($ratio) {
+    $ratio: nth($ratio, 1);
+    $important: "!important";
+  }
+
+  @if map-has-key($project-aspect-ratios, $ratio) {
+    box-sizing: border-box #{$important};
+    height: 0 #{$important};
+    overflow: hidden #{$important};
+    padding: 0 0 map-get($project-aspect-ratios, $ratio) #{$important};
+  } @else {
+    @error '`#{$ratio}` is not a valid key in $project-aspect-ratios. Valid values: #{map-keys($project-aspect-ratios)}';
+  }
+}

data/_sass/uswds/src/core/mixins/_add-background-svg.scss

@@ -0,0 +1,9 @@
+// Ensure browsers that don't support SVG in background-image (IE 11 and below) fall back to PNG.
+// See https://css-tricks.com/a-complete-guide-to-svg-fallbacks/
+
+@mixin add-background-svg($image-name, $image-path: $theme-image-path) {
+  $image-name: unquote($image-name);
+  background-image: url("#{$image-path}/#{$image-name}.svg"),
+    linear-gradient(transparent, transparent);
+  background-repeat: no-repeat;
+}

data/_sass/uswds/src/core/mixins/_add-bar.scss

@@ -0,0 +1,43 @@
+@mixin add-bar(
+  $weight: 1,
+  $color: "ink",
+  $side: "left",
+  $radius: 0,
+  $offset-x: 0,
+  $offset-y: 0
+) {
+  $weight: if($weight == null, 1, $weight);
+  $color: if($color == null, "ink", $color);
+  $side: if($side == null, "left", $side);
+  $radius: if($radius == null, 0, $radius);
+  $offset-x: if($offset-x == null, 0, $offset-x);
+  $offset-y: if($offset-y == null, 0, $offset-y);
+
+  position: relative;
+
+  &::after {
+    background-color: color($color);
+    border-radius: radius($radius);
+    content: "";
+    display: block;
+    position: absolute;
+
+    @if $side == ("left" or "right") {
+      bottom: units($offset-y);
+      top: units($offset-y);
+      width: units($weight);
+      #{unquote($side)}: units($offset-x);
+    } @else {
+      height: units($weight);
+      left: units($offset-x);
+      right: units($offset-x);
+      #{unquote($side)}: units($offset-y);
+    }
+  }
+}
+
+@mixin remove-bar {
+  &::after {
+    display: none;
+  }
+}

data/_sass/uswds/src/core/mixins/_add-checkbox-placeholder.scss

@@ -0,0 +1,15 @@
+@mixin add-checkbox-placeholder {
+  $placeholder-width: units(4);
+  $placeholder-margin: units(1);
+
+  text-indent: ($placeholder-width + $placeholder-margin) * -1;
+
+  &::before {
+    content: " ";
+    display: inline-block;
+    height: units(2);
+    margin-left: units(-0.5);
+    margin-right: units(1.5);
+    width: $placeholder-width;
+  }
+}

data/_sass/uswds/src/core/mixins/_add-kerning.scss

@@ -0,0 +1,4 @@
+@mixin add-kerning {
+  font-feature-settings: "kern" 1;
+  font-kerning: normal;
+}

data/_sass/uswds/src/core/mixins/_add-knockout-font-smoothing.scss

@@ -0,0 +1,9 @@
+@mixin add-knockout-font-smoothing {
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-font-smoothing: antialiased;
+}
+
+@mixin no-knockout-font-smoothing {
+  -moz-osx-font-smoothing: auto;
+  -webkit-font-smoothing: subpixel-antialiased;
+}

data/_sass/uswds/src/core/mixins/_add-list-reset.scss

@@ -0,0 +1,15 @@
+@mixin add-list-reset($value...) {
+  $important: null;
+  @if length($value) > 0 and has-important($value) {
+    $value: remove($value, "!important");
+    $important: " !important";
+  }
+  margin-bottom: 0#{$important};
+  margin-top: 0#{$important};
+  list-style-type: none#{$important};
+  padding-left: 0#{$important};
+}
+
+@mixin list-reset($value...) {
+  @include add-list-reset($value...);
+}

data/_sass/uswds/src/core/mixins/_add-responsive-site-margins.scss

@@ -0,0 +1,6 @@
+@mixin add-responsive-site-margins {
+  @include u-padding-x($theme-site-margins-mobile-width);
+  @include at-media($theme-site-margins-breakpoint) {
+    @include u-padding-x($theme-site-margins-width);
+  }
+}

data/_sass/uswds/src/core/mixins/_add-success-mark.scss

@@ -0,0 +1,7 @@
+@mixin add-success-mark {
+  &::before {
+    @include add-background-svg("correct9");
+    background-position: center;
+    background-size: units(2.5);
+  }
+}

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

@@ -0,0 +1,86 @@
+// utility mixins
+@import "utilities/align-items";
+@import "utilities/background-color";
+@import "utilities/border";
+@import "utilities/border-color";
+@import "utilities/border-width";
+@import "utilities/border-radius";
+@import "utilities/bottom";
+@import "utilities/circle";
+@import "utilities/color";
+@import "utilities/cursor";
+@import "utilities/display";
+@import "utilities/flex";
+@import "utilities/flex-direction";
+@import "utilities/float";
+@import "utilities/font";
+@import "utilities/font-weight";
+@import "utilities/height";
+@import "utilities/justify-content";
+@import "utilities/left";
+@import "utilities/line-height";
+@import "utilities/margin";
+@import "utilities/max-height";
+@import "utilities/max-width";
+@import "utilities/measure";
+@import "utilities/min-height";
+@import "utilities/min-width";
+@import "utilities/outline";
+@import "utilities/outline-color";
+@import "utilities/order";
+@import "utilities/overflow";
+@import "utilities/padding";
+@import "utilities/pin";
+@import "utilities/position";
+@import "utilities/right";
+@import "utilities/shadow";
+@import "utilities/square";
+@import "utilities/text";
+@import "utilities/text-align";
+@import "utilities/text-decoration";
+@import "utilities/text-decoration-color";
+@import "utilities/text-indent";
+@import "utilities/top";
+@import "utilities/vertical-align";
+@import "utilities/white-space";
+@import "utilities/width";
+@import "utilities/z-index";
+
+// grid mixins
+@import "layout-grid/grid-container";
+@import "layout-grid/grid-row";
+
+// helper mixins
+@import "border-box-sizing";
+@import "override-prose";
+
+// general mixins
+@import "add-aspect";
+@import "add-bar";
+@import "add-background-svg";
+@import "add-checkbox-placeholder";
+@import "add-success-mark";
+@import "add-kerning";
+@import "add-knockout-font-smoothing";
+@import "add-list-reset";
+@import "add-responsive-site-margins";
+@import "at-media";
+@import "button-disabled";
+@import "button-unstyled";
+@import "clearfix";
+@import "embed-container";
+@import "external-link";
+@import "focus";
+@import "font-face";
+@import "icon";
+@import "layout-grid";
+@import "media-block-img";
+@import "media-link";
+@import "nav-list";
+@import "screen-reader";
+@import "typography";
+@import "unstyled-list";
+@import "usa-list-styles";
+@import "usa-table-styles";
+@import "usa-typography";
+@import "utility-builder";

data/_sass/uswds/src/core/mixins/_at-media.scss

@@ -0,0 +1,36 @@
+// Mobile-first media query helper
+
+@mixin at-media($bp) {
+  $quoted-bp: smart-quote($bp);
+  $our-breakpoints: map-deep-get($system-properties, breakpoints, standard);
+  @if map-has-key($our-breakpoints, $quoted-bp) {
+    @if $theme-respect-user-font-size {
+      $bp: rem-to-user-em(map-get($our-breakpoints, $quoted-bp));
+    } @else {
+      $bp: rem-to-px(map-get($our-breakpoints, $quoted-bp));
+    }
+  } @else {
+    @warn '`#{$bp}` is not a valid USWDS project breakpoint. Valid values: #{map-keys($our-breakpoints)}';
+  }
+  @media all and (min-width: #{$bp}) {
+    @content;
+  }
+}
+
+// Max-width media query
+@mixin at-media-max($bp) {
+  $quoted-bp: smart-quote($bp);
+  $our-breakpoints: map-deep-get($system-properties, breakpoints, standard);
+  @if map-has-key($our-breakpoints, $quoted-bp) {
+    @if $theme-respect-user-font-size {
+      $bp: rem-to-user-em(map-get($our-breakpoints, $quoted-bp)) - 0.01em;
+    } @else {
+      $bp: rem-to-px(map-get($our-breakpoints, $quoted-bp)) - 1px;
+    }
+  } @else {
+    @warn '`#{$bp}` is not a valid USWDS project breakpoint. Valid values: #{map-keys($our-breakpoints)}';
+  }
+  @media all and (max-width: #{$bp}) {
+    @content;
+  }
+}

data/_sass/uswds/src/core/mixins/_border-box-sizing.scss

@@ -0,0 +1,19 @@
+@mixin border-box-sizing {
+  @if not $theme-global-border-box-sizing {
+    box-sizing: border-box;
+
+    &::after,
+    &::before,
+    & *,
+    & *::after,
+    & *::before {
+      box-sizing: inherit;
+    }
+  }
+}
+
+@mixin this-border-box-sizing {
+  @if not $theme-global-border-box-sizing {
+    box-sizing: border-box;
+  }
+}

data/_sass/uswds/src/core/mixins/_button-disabled.scss

@@ -0,0 +1,17 @@
+@mixin button-disabled {
+  @include add-knockout-font-smoothing;
+  background-color: color("disabled");
+  color: color("white");
+  pointer-events: none;
+
+  &:hover,
+  &.usa-button--hover,
+  &:active,
+  &.usa-button--active,
+  &:focus,
+  &.usa-focus {
+    background-color: color("disabled");
+    border: 0;
+    box-shadow: none;
+  }
+}

data/_sass/uswds/src/core/mixins/_button-unstyled.scss

@@ -0,0 +1,20 @@
+@mixin button-unstyled {
+  @include no-knockout-font-smoothing;
+  @include typeset-link;
+  background-color: transparent;
+  border: 0;
+  border-radius: 0;
+  box-shadow: none;
+  font-weight: font-weight("normal");
+  margin: 0;
+  padding: 0;
+  text-align: left;
+
+  &:hover,
+  &:active {
+    @include no-knockout-font-smoothing;
+    background-color: transparent;
+    box-shadow: none;
+    text-decoration: underline;
+  }
+}

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

@@ -0,0 +1,7 @@
+@mixin clearfix {
+  &::after {
+    clear: both;
+    content: "";
+    display: block;
+  }
+}

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

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

data/_sass/uswds/src/core/mixins/_external-link.scss

@@ -0,0 +1,21 @@
+@mixin external-link(
+  $external-link,
+  $external-link-hover,
+  $image-path: $theme-image-path
+) {
+  &::after {
+    $icon-size: 0.65em;
+    background-image: url("#{$image-path}/#{$external-link}.svg");
+    background-position: 50% 60%;
+    background-repeat: no-repeat;
+    background-size: 100%;
+    content: "";
+    display: inline;
+    margin-left: units(0.5);
+    padding-left: $icon-size;
+  }
+
+  &:hover::after {
+    @include add-background-svg("#{$external-link-hover}", $image-path);
+  }
+}

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

@@ -0,0 +1,14 @@
+// Focus state mixin
+@mixin focus-outline(
+  $width: $theme-focus-width,
+  $style: $theme-focus-style,
+  $color: $theme-focus-color,
+  $offset: $theme-focus-offset
+) {
+  $width: if($width == null, $theme-focus-width, $width);
+  $style: if($style == null, $theme-focus-style, $style);
+  $color: if($color == null, $theme-focus-color, $color);
+  $offset: if($offset == null, $theme-focus-offset, $offset);
+  outline: units($width) $style color($color);
+  outline-offset: units($offset);
+}

data/_sass/uswds/src/core/mixins/_font-face.scss

@@ -0,0 +1,103 @@
+// Output the @font-face rule
+@mixin at-font-face($display-name, $file-path, $font-weight, $font-style) {
+  $file-path: unquote($file-path);
+
+  // TODO: If $theme-use-rails-pipeline use font-url() statements
+  // instead of url()
+  // Dunno why I can't do this without an error...
+
+  @font-face {
+    font-family: unquote($display-name);
+    font-style: unquote($font-style);
+    font-weight: $font-weight;
+    font-display: fallback;
+    src: url(#{$file-path}.woff2) format("woff2"),
+      url(#{$file-path}.woff) format("woff"),
+      url(#{$file-path}.ttf) format("truetype");
+  }
+}
+
+// Loop through weights, then call at-font-face
+@mixin generate-font-face(
+  $font-style-src,
+  $output-weights,
+  $display-name,
+  $dir,
+  $font-style
+) {
+  @each $font-weight, $filename in $font-style-src {
+    @each $key, $output-weight in $output-weights {
+      @if $output-weight == $font-weight and $filename {
+        @include at-font-face(
+          "#{$display-name}",
+          "#{$theme-font-path}/#{$dir}/#{$filename}",
+          #{$font-weight},
+          unquote("#{$font-style}")
+        );
+      }
+    }
+  }
+}
+
+// Collect all font metadata, then call generate-font-face
+@mixin render-font-face($typeface-token, $src) {
+  $generate: false;
+  $this-src: ();
+  $output-weights: $project-font-weights;
+  @if $theme-generate-all-weights {
+    $output-weights: (
+      100: 100,
+      200: 200,
+      300: 300,
+      400: 400,
+      500: 500,
+      600: 600,
+      700: 700,
+      800: 800,
+      900: 900
+    );
+  }
+
+  $typeface-metadata: map-get($all-typeface-tokens, $typeface-token);
+
+  // If the typeface has src in its USWDS metadata, generate and
+  // set $this-src
+  @if map-get($typeface-metadata, src) {
+    $generate: true;
+    $this-src: map-get($typeface-metadata, src);
+  }
+
+  // If the typeface has custom src sefined, generate and override
+  // any existing USWDS src
+  @if $src {
+    $generate: true;
+    $this-src: $src;
+  }
+
+  @if $generate {
+    $display-name: map-get($typeface-metadata, display-name);
+    $roman: map-get($this-src, roman);
+    $italic: map-get($this-src, italic);
+    $dir: map-get($this-src, dir);
+
+    @if $roman {
+      @include generate-font-face(
+        $roman,
+        $output-weights,
+        $display-name,
+        $dir,
+        normal
+      );
+    }
+
+    @if $italic {
+      @include generate-font-face(
+        $italic,
+        $output-weights,
+        $display-name,
+        $dir,
+        italic
+      );
+    }
+  }
+}