uswds-jekyll 4.1.0 → 5.3.0

data/_sass/uswds/src/core/mixins/layout-grid/_grid-container.scss

@@ -0,0 +1,14 @@
+@mixin grid-container($props...) {
+  @if length($props) ==0 {
+    @include u-margin-x(auto);
+    @include u-maxw($theme-grid-container-max-width);
+  } @else {
+    $props: nth($props, 1);
+    $margin-x: append-important($props, auto);
+    @include u-margin-x($margin-x);
+    @include u-maxw($props);
+  }
+
+  @include add-responsive-site-margins;
+  @include this-border-box-sizing;
+}

data/_sass/uswds/src/core/mixins/layout-grid/_grid-row.scss

@@ -0,0 +1,7 @@
+@mixin grid-row($props...) {
+  $display: append-important($grid-global, flex);
+  $flex: append-important($grid-global, wrap);
+  @include u-display($display);
+  @include u-flex($flex);
+  @include this-border-box-sizing;
+}

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

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

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/_background-color.scss

@@ -0,0 +1,9 @@
+@mixin u-bg($value...) {
+  $value: unpack($value);
+  $important: null;
+  @if has-important($value) {
+    $value: remove($value, "!important");
+    $important: " !important";
+  }
+  background-color: color($value) #{$important};
+}

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

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

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

@@ -0,0 +1,55 @@
+// Outputs border-radius
+
+@mixin u-radius($value...) {
+  $value: unpack($value);
+  $important: null;
+  @if has-important($value) {
+    $value: remove($value, "!important");
+    $important: " !important";
+  }
+  border-radius: get-uswds-value(border-radius, $value) #{$important};
+}
+
+@mixin u-radius-bottom($value...) {
+  $value: unpack($value);
+  $important: null;
+  @if has-important($value) {
+    $value: remove($value, "!important");
+    $important: " !important";
+  }
+  border-bottom-left-radius: get-uswds-value(border-radius, $value) #{$important};
+  border-bottom-right-radius: get-uswds-value(border-radius, $value) #{$important};
+}
+
+@mixin u-radius-left($value...) {
+  $value: unpack($value);
+  $important: null;
+  @if has-important($value) {
+    $value: remove($value, "!important");
+    $important: " !important";
+  }
+  border-bottom-left-radius: get-uswds-value(border-radius, $value) #{$important};
+  border-top-left-radius: get-uswds-value(border-radius, $value) #{$important};
+}
+
+@mixin u-radius-right($value...) {
+  $value: unpack($value);
+  $important: null;
+  @if has-important($value) {
+    $value: remove($value, "!important");
+    $important: " !important";
+  }
+  border-bottom-right-radius: get-uswds-value(border-radius, $value) #{$important};
+  border-top-right-radius: get-uswds-value(border-radius, $value) #{$important};
+}
+
+@mixin u-radius-top($value...) {
+  $value: unpack($value);
+  $important: null;
+  @if has-important($value) {
+    $value: remove($value, "!important");
+    $important: " !important";
+  }
+  border-top-left-radius: get-uswds-value(border-radius, $value) #{$important};
+  border-top-right-radius: get-uswds-value(border-radius, $value) #{$important};
+}

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

@@ -0,0 +1,32 @@
+// Outputs border-width of $value width
+@mixin u-border-width($value...) {
+  $value: unpack($value);
+  $important: null;
+  @if has-important($value) {
+    $value: remove($value, "!important");
+    $important: " !important";
+  }
+  border-width: get-uswds-value(border-width, $value) #{$important};
+}
+
+@mixin u-border-x-width($value...) {
+  $value: unpack($value);
+  $important: null;
+  @if has-important($value) {
+    $value: remove($value, "!important");
+    $important: " !important";
+  }
+  border-left-width: get-uswds-value(border-width, $value) #{$important};
+  border-right-width: get-uswds-value(border-width, $value) #{$important};
+}
+
+@mixin u-border-y-width($value...) {
+  $value: unpack($value);
+  $important: null;
+  @if has-important($value) {
+    $value: remove($value, "!important");
+    $important: " !important";
+  }
+  border-bottom-width: get-uswds-value(border-width, $value) #{$important};
+  border-top-width: get-uswds-value(border-width, $value) #{$important};
+}

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

@@ -0,0 +1,142 @@
+$border-utilities: (
+  "width":
+    map-collect(
+      map-deep-get($system-properties, border-width, standard),
+      map-deep-get($system-properties, border-width, extended)
+    ),
+  "style":
+    map-collect(
+      map-deep-get($system-properties, border-style, standard),
+      map-deep-get($system-properties, border-style, extended)
+    ),
+);
+
+@mixin border-n($side, $value...) {
+  $important: null;
+  @if has-important($value) {
+    $value: remove($value, "!important");
+    $important: " !important";
+  }
+  $has-style: false;
+  $widths: map-get($border-utilities, "width");
+
+  @each $this-value in $value {
+    $match: false;
+    @if map-has-key($all-color-shortcodes, smart-quote($this-value)) {
+      $match: true;
+      $this-value: smart-quote($this-value);
+      @if $side == n {
+        border-color: color($this-value) #{$important};
+      } @else if $side == x {
+        border-left-color: color($this-value) #{$important};
+        border-right-color: color($this-value) #{$important};
+      } @else if $side == y {
+        border-bottom-color: color($this-value) #{$important};
+        border-top-color: color($this-value) #{$important};
+      } @else {
+        border-#{$side}-color: color($this-value) #{$important};
+      }
+    } @else if type-of($this-value) == "number" {
+      $converted-value: number-to-token($this-value);
+      @if map-has-key($widths, $converted-value) {
+        $match: true;
+        $final-value: map-get($widths, $converted-value);
+        @if $side == n {
+          border-width: unquote("#{$final-value}#{$important}");
+        } @else if $side == x {
+          border-left-width: unquote("#{$final-value}#{$important}");
+          border-right-width: unquote("#{$final-value}#{$important}");
+        } @else if $side == y {
+          border-bottom-width: unquote("#{$final-value}#{$important}");
+          border-top-width: unquote("#{$final-value}#{$important}");
+        } @else {
+          border-#{$side}-width: unquote("#{$final-value}#{$important}");
+        }
+      } @else {
+        @error '#{$this-value} is not a valid border width. Accepted values: #{map-keys($widths)}';
+      }
+    } @else if map-has-key($widths, smart-quote($this-value)) {
+      $match: true;
+      $this-value: smart-quote($this-value);
+      $final-value: map-get($widths, $this-value);
+      @if $side == n {
+        border-width: unquote("#{$final-value}#{$important}");
+      } @else if $side == x {
+        border-left-width: unquote("#{$final-value}#{$important}");
+        border-right-width: unquote("#{$final-value}#{$important}");
+      } @else if $side == y {
+        border-bottom-width: unquote("#{$final-value}#{$important}");
+        border-top-width: unquote("#{$final-value}#{$important}");
+      } @else {
+        border-#{$side}-width: unquote("#{$final-value}#{$important}");
+      }
+    } @else {
+      $converted-value: smart-quote($this-value);
+      $styles: map-get($border-utilities, "style");
+      @if map-has-key($styles, $converted-value) {
+        $match: true;
+        $has-style: true;
+        $final-value: map-get($styles, $converted-value);
+        @if $side == n {
+          border-style: unquote("#{$final-value}#{$important}");
+        } @else if $side == x {
+          border-left-style: unquote("#{$final-value}#{$important}");
+          border-right-style: unquote("#{$final-value}#{$important}");
+        } @else if $side == y {
+          border-bottom-style: unquote("#{$final-value}#{$important}");
+          border-top-style: unquote("#{$final-value}#{$important}");
+        } @else {
+          border-#{$side}-style: unquote("#{$final-value}#{$important}");
+        }
+      } @else {
+        @error '`#{$this-value}` is not a valid `border` token. '
+          + 'Use valid color, units, and border-style tokens '
+          + 'separated by commas.';
+      }
+    }
+    @if not $match {
+      @error '`#{$this-value}` is not a valid `border` token.';
+    }
+  }
+  @if not $has-style {
+    @if $side == n {
+      border-style: solid#{$important};
+    } @else if $side == x {
+      border-left-style: solid#{$important};
+      border-right-style: solid#{$important};
+    } @else if $side == y {
+      border-bottom-style: solid#{$important};
+      border-top-style: solid#{$important};
+    } @else {
+      border-#{$side}-style: solid#{$important};
+    }
+  }
+}
+
+@mixin u-border($value...) {
+  @include border-n(n, $value...);
+}
+
+@mixin u-border-x($value...) {
+  @include border-n(x, $value...);
+}
+
+@mixin u-border-y($value...) {
+  @include border-n(y, $value...);
+}
+
+@mixin u-border-top($value...) {
+  @include border-n(top, $value...);
+}
+
+@mixin u-border-right($value...) {
+  @include border-n(right, $value...);
+}
+
+@mixin u-border-bottom($value...) {
+  @include border-n(bottom, $value...);
+}
+
+@mixin u-border-left($value...) {
+  @include border-n(left, $value...);
+}

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

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

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

@@ -0,0 +1,9 @@
+// Outputs a square
+@mixin u-circle($value...) {
+  $value: unpack($value);
+  $dimension: $value;
+  $radius: append-important($value, pill);
+  @include u-height($dimension);
+  @include u-radius($radius);
+  @include u-width($dimension);
+}

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

@@ -0,0 +1,10 @@
+// Outputs color
+
+@mixin u-color($value...) {
+  $important: null;
+  @if has-important($value) {
+    $value: remove($value, "!important");
+    $important: " !important";
+  }
+  color: color($value) #{$important};
+}

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

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

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

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

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

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

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

@@ -0,0 +1,55 @@
+// Outputs flex
+
+$flex-utililies: (
+  align-items:
+    map-collect(
+      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),
+      map-deep-get($system-properties, flex, extended)
+    ),
+  flex-direction:
+    map-collect(
+      map-deep-get($system-properties, flex-direction, standard),
+      map-deep-get($system-properties, flex-direction, extended)
+    ),
+  flex-wrap:
+    map-collect(
+      map-deep-get($system-properties, flex-wrap, standard),
+      map-deep-get($system-properties, flex-wrap, extended)
+    ),
+  justify-content:
+    map-collect(
+      map-deep-get($system-properties, justify-content, standard),
+      map-deep-get($system-properties, justify-content, extended)
+    ),
+);
+
+@mixin u-flex($value...) {
+  $value: unpack($value);
+  $important: null;
+  @if has-important($value) {
+    $value: remove($value, "!important");
+    $important: " !important";
+  }
+  @each $this-value in $value {
+    $match: false;
+    @each $property, $map in $flex-utililies {
+      @if not $match and map-has-key($map, $this-value) {
+        #{$property}: get-uswds-value($property, $this-value...) #{$important};
+        $match: true;
+      }
+    }
+    @if not $match {
+      @error '`#{$this-value}` is not a valid `flex` value.';
+    }
+  }
+}

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

@@ -0,0 +1,10 @@
+// Outputs line-height
+
+@mixin u-float($value...) {
+  $important: null;
+  @if has-important($value) {
+    $value: remove($value, "!important");
+    $important: " !important";
+  }
+  float: get-uswds-value(float, $value...) #{$important};
+}

data/_sass/uswds/src/core/mixins/utilities/_font-weight.scss

@@ -0,0 +1,10 @@
+// Outputs line-height
+
+@mixin u-font-weight($value...) {
+  $important: null;
+  @if has-important($value) {
+    $value: remove($value, "!important");
+    $important: " !important";
+  }
+  font-weight: get-uswds-value(font-weight, $value...) #{$important};
+}