uswds-jekyll 4.2.0 → 5.0.0

data/_sass/uswds/src/core/_notifications.scss

@@ -0,0 +1,86 @@
+/*  notifications.scss
+    ---
+    Adds a notification at the top of each USWDS
+    compile. Use this file for important notifications
+    and updates to the design system.
+
+    This file should started fresh at each
+    major version.
+
+*/
+
+/* prettier-ignore */
+$uswds-notifications:
+    "\A"
+  + "\A --------------------------------------------------------------------"
+  + "\A \2709  USWDS Notifications"
+  + "\A --------------------------------------------------------------------"
+  + "\A 2.7.0:"
+  + "\A - We added new usa-button-group, usa-card, usa-character-count, and"
+  + "\A   usa-combo-box components."
+  + "\A - We updated our guidance and code for numeric fields to use `text`"
+  + "\A   rather than `number` inputs with an `inputmode` of `numeric`."
+  + "\A --------------------------------------------------------------------"
+  + "\A 2.6.0:"
+  + "\A - We updated the markup of usa-search. Existing markup will still"
+  + "\A   work, but we recommend updating to the newest markup."
+  + "\A - We updated some color token values and filled out the vivid color"
+  + "\A   families. This is not a breaking change, but be aware that there"
+  + "\A   may be some subtle changes."
+  + "\A --------------------------------------------------------------------"
+  + "\A 2.5.1:"
+  + "\A - CSSO's forceMediaMerge wasn't exporting media queries in the"
+  + "\A   expected order, so we're disabling it for more reliable CSS"
+  + "\A   output. We recommend that teams remove any media query sorting"
+  + "\A   added with forceMediaMerge."
+  + "\A --------------------------------------------------------------------"
+  + "\A 2.5.0:"
+  + "\A - We updated to Dart Sass for compiling. Consider updating your own"
+  + "\A   build process using `uswds-gulp` as a guide."
+  + "\A - We upgraded our aXe accessibility testing from 2.6.1 to 3.4.1 and"
+  + "\A   improved the accessibility of our markup in the process."
+  + "\A   This introduces minor changes to the markup of 5 components and "
+  + "\A   our documentation template:"
+  + "\A   - banner: is now a <section> instead of a <div> with the ARIA "
+  + "\A     label `Official government website`"
+  + "\A   - footer: nav includes the ARIA label of `Footer navigation`"
+  + "\A   - graphic-list: uses <h2> as a heading default instead of <h3> "
+  + "\A   - hero: includes the ARIA label of `Introduction`"
+  + "\A   - search: the search form is given the ARIA role of `search`"
+  + "\A   - documentation template: includes only the main content in the "
+  + "\A     <main> element. The nav is no longer treated as an <aside>."
+  + "\A - Now state tokens (like 'warning') can can accept non-token"
+  + "\A   colors, just as we introduced for theme colors in 2.4.0."
+  + "\A --------------------------------------------------------------------"
+  + "\A 2.4.0: If your component settings aren't working as expected, make"
+  + "\A sure you're importing the components settings in your Sass entry"
+  + "\A point (often styles.scss) with `@import 'uswds-theme-components'`."
+  + "\A A bug in 2.0 omitted that import."
+  + "\A - We added `$theme-show-notifications: true` to general settings"
+  + "\A --------------------------------------------------------------------"
+  + "\A 2.2.0: We changed the names of some settings."
+  + "\A"
+  + "\A - $theme-navigation-width \2192  $theme-header-min-width"
+  + "\A - $theme-megamenu-logo-text-width \2192  $theme-header-logo-text-width"
+  + "\A --------------------------------------------------------------------"
+  + "\A 2.0.2: We changed the names of some settings and mixins."
+  + "\A"
+  + "\A - $theme-title-font-size \2192  $theme-display-font-size"
+  + "\A - @include title \2192  @include display"
+  + "\A - @include typeset-title \2192  @include typeset-display";
+
+/* prettier-ignore */
+$uswds-notification-disable-message:
+  "\A"
++ "\A --------------------------------------------------------------------"
++ "\A These are notifications from the USWDS team, not necessarily a"
++ "\A problem with your code."
++ "\A"
++ "\A Disable notifications using `$theme-show-notifications: false`"
++ "\A in your general settings file."
++ "\A --------------------------------------------------------------------\A";
+
+@if $theme-show-notifications {
+  @warn "#{$uswds-notifications}"
+    + "#{$uswds-notification-disable-message}";
+}

data/_sass/uswds/src/core/_properties.scss

@@ -0,0 +1,687 @@
+/*
+----------------------------------------
+USWDS Properties
+----------------------------------------
+*/
+
+$standard-colors: map-collect(
+  $tokens-color-theme,
+  $tokens-color-state,
+  $tokens-color-required
+);
+
+$extended-colors: map-collect($system-colors, $tokens-color-basic);
+
+$partial-values: (
+  zero-zero: (
+    0: 0
+  ),
+  none: (
+    "none": none
+  ),
+  auto: (
+    "auto": auto
+  ),
+  full-percent: (
+    "full": 100%
+  ),
+  full-viewport-height: (
+    "viewport": 100vh
+  ),
+  full-viewport-width: (
+    "viewport": 100vw
+  )
+);
+
+$system-properties: (
+  align-items: (
+    standard: (
+      "align-start": flex-start,
+      "align-end": flex-end,
+      "align-center": center,
+      "align-stretch": stretch,
+      "align-baseline": baseline
+    ),
+    extended: ()
+  ),
+  background-color: (
+    standard: $standard-colors,
+    extended: $extended-colors
+  ),
+  border: (
+    standard:
+      map-collect(
+        map-get($system-spacing, "smaller"),
+        map-get($system-spacing, "small"),
+        map-get($partial-values, "zero-zero"),
+        (
+          "noValue": 1px
+        )
+      ),
+    extended: ()
+  ),
+  border-color: (
+    standard: $standard-colors,
+    extended: $extended-colors
+  ),
+  border-radius: (
+    standard: $project-border-radius,
+    extended:
+      map-collect(
+        map-get($system-spacing, "smaller"),
+        map-get($system-spacing, "small")
+      )
+  ),
+  border-style: (
+    standard: (
+      "dashed": dashed,
+      "dotted": dotted,
+      "solid": solid
+    ),
+    extended: ()
+  ),
+  border-width: (
+    standard:
+      map-collect(
+        map-get($system-spacing, "smaller"),
+        map-get($system-spacing, "small"),
+        map-get($partial-values, "zero-zero")
+      ),
+    extended: ()
+  ),
+  bottom: (
+    standard:
+      map-collect(
+        map-get($system-spacing, "smaller"),
+        map-get($system-spacing, "small"),
+        map-get($system-spacing, "smaller-negative"),
+        map-get($system-spacing, "small-negative"),
+        map-get($partial-values, "zero-zero"),
+        map-get($partial-values, "auto"),
+        map-get($partial-values, "full-percent")
+      ),
+    extended: ()
+  ),
+  box-shadow: (
+    standard: (
+      "none": none,
+      1: 0 units(1px) units(0.5) 0 rgba(0, 0, 0, 0.1),
+      2: 0 units(0.5) units(1) 0 rgba(0, 0, 0, 0.1),
+      3: 0 units(1) units(2) 0 rgba(0, 0, 0, 0.1),
+      4: 0 units(1.5) units(3) 0 rgba(0, 0, 0, 0.1),
+      5: 0 units(2) units(4) 0 rgba(0, 0, 0, 0.1)
+    ),
+    extended: ()
+  ),
+  breakpoints: (
+    standard:
+      map-collect(
+        map-get($system-spacing, "large"),
+        map-get($system-spacing, "larger"),
+        map-get($system-spacing, "largest")
+      ),
+    extended: ()
+  ),
+  circle: (
+    standard:
+      map-collect(
+        map-get($system-spacing, "smaller"),
+        map-get($system-spacing, "small"),
+        map-get($system-spacing, "medium"),
+        map-get($system-spacing, "large")
+      ),
+    extended: ()
+  ),
+  color: (
+    standard: $standard-colors,
+    extended: $extended-colors
+  ),
+  cursor: (
+    standard: (
+      "auto": auto,
+      "default": default,
+      "pointer": pointer,
+      "wait": wait,
+      "move": move,
+      "not-allowed": not-allowed
+    ),
+    extended: ()
+  ),
+  display: (
+    standard: (
+      "block": block,
+      "flex": flex,
+      "none": none,
+      "inline": inline,
+      "inline-block": inline-block,
+      "inline-flex": inline-flex,
+      "table": table,
+      "table-cell": table-cell,
+      "table-row": table-row
+    ),
+    extended: ()
+  ),
+  flex: (
+    standard: (
+      1: 1 0 0,
+      2: 2 0 0,
+      3: 3 0 0,
+      4: 4 0 0,
+      5: 5 0 0,
+      6: 6 0 0,
+      7: 7 0 0,
+      8: 8 0 0,
+      9: 9 0 0,
+      10: 10 0 0,
+      11: 11 0 0,
+      12: 12 0 0,
+      "fill": 1 0 0,
+      "auto": 0 0 auto
+    ),
+    extended: ()
+  ),
+  flex-direction: (
+    standard: (
+      "row": row,
+      "column": column
+    ),
+    extended: ()
+  ),
+  flex-wrap: (
+    standard: (
+      "wrap": wrap,
+      "no-wrap": nowrap
+    ),
+    extended: ()
+  ),
+  float: (
+    standard: (
+      "left": left,
+      "none": none,
+      "right": right
+    ),
+    extended: ()
+  ),
+  font-family: (
+    standard: $project-font-stacks,
+    extended: ()
+  ),
+  font-feature-settings: (
+    standard: (
+      "tabular": unquote('"tnum" 1, "kern" 1'),
+      "no-tabular": unquote('"kern" 1')
+    ),
+    extended: ()
+  ),
+  font-style: (
+    standard: (
+      "italic": italic,
+      "no-italic": normal
+    ),
+    extended: ()
+  ),
+  font-weight: (
+    standard: (
+      "thin": $theme-font-weight-thin,
+      "light": $theme-font-weight-light,
+      "normal": normal,
+      "medium": $theme-font-weight-medium,
+      "semibold": $theme-font-weight-semibold,
+      "bold": bold,
+      "heavy": $theme-font-weight-heavy
+    ),
+    extended: (
+      100: 100,
+      200: 200,
+      300: 300,
+      400: 400,
+      500: 500,
+      600: 600,
+      700: 700,
+      800: 800,
+      900: 900
+    )
+  ),
+  gap: (
+    standard:
+      map-collect(
+        $system-column-gaps,
+        (
+          "sm": $theme-column-gap-sm,
+          "md": $theme-column-gap-md,
+          "lg": $theme-column-gap-lg
+        )
+      ),
+    extended: ()
+  ),
+  height: (
+    standard:
+      map-collect(
+        map-get($system-spacing, "smaller"),
+        map-get($system-spacing, "small"),
+        map-get($system-spacing, "medium"),
+        map-get($system-spacing, "large"),
+        map-get($partial-values, "zero-zero"),
+        map-get($partial-values, "auto"),
+        map-get($partial-values, "full-percent"),
+        map-get($partial-values, "full-viewport-height")
+      ),
+    extended: ()
+  ),
+  justify-content: (
+    standard: (
+      "justify-center": center,
+      "justify-start": flex-start,
+      "justify-end": flex-end,
+      "justify": space-between
+    ),
+    extended: ()
+  ),
+  left: (
+    standard:
+      map-collect(
+        map-get($system-spacing, "smaller"),
+        map-get($system-spacing, "small"),
+        map-get($system-spacing, "smaller-negative"),
+        map-get($system-spacing, "small-negative"),
+        map-get($partial-values, "zero-zero"),
+        map-get($partial-values, "auto")
+      ),
+    extended: ()
+  ),
+  letter-spacing: (
+    standard: (
+      "ls-auto": initial,
+      "ls-neg-3": -0.03em,
+      "ls-neg-2": -0.02em,
+      "ls-neg-1": -0.01em,
+      "ls-1": 0.025em,
+      "ls-2": 0.1em,
+      "ls-3": 0.15em
+    ),
+    extended: (),
+    function: (
+      "auto": initial,
+      -3: -0.03em,
+      -2: -0.02em,
+      -1: -0.01em,
+      1: 0.025em,
+      2: 0.1em,
+      3: 0.15em
+    )
+  ),
+  line-height: (
+    standard: (
+      "sans-1": lh("sans", 1),
+      "sans-2": lh("sans", 2),
+      "sans-3": lh("sans", 3),
+      "sans-4": lh("sans", 4),
+      "sans-5": lh("sans", 5),
+      "sans-6": lh("sans", 6),
+      "serif-1": lh("serif", 1),
+      "serif-2": lh("serif", 2),
+      "serif-3": lh("serif", 3),
+      "serif-4": lh("serif", 4),
+      "serif-5": lh("serif", 5),
+      "serif-6": lh("serif", 6),
+      "mono-1": lh("mono", 1),
+      "mono-2": lh("mono", 2),
+      "mono-3": lh("mono", 3),
+      "mono-4": lh("mono", 4),
+      "mono-5": lh("mono", 5),
+      "mono-6": lh("mono", 6),
+      "cond-1": lh("cond", 1),
+      "cond-2": lh("cond", 2),
+      "cond-3": lh("cond", 3),
+      "cond-4": lh("cond", 4),
+      "cond-5": lh("cond", 5),
+      "cond-6": lh("cond", 6),
+      "heading-1": lh("heading", 1),
+      "heading-2": lh("heading", 2),
+      "heading-3": lh("heading", 3),
+      "heading-4": lh("heading", 4),
+      "heading-5": lh("heading", 5),
+      "heading-6": lh("heading", 6),
+      "ui-1": lh("ui", 1),
+      "ui-2": lh("ui", 2),
+      "ui-3": lh("ui", 3),
+      "ui-4": lh("ui", 4),
+      "ui-5": lh("ui", 5),
+      "ui-6": lh("ui", 6),
+      "body-1": lh("body", 1),
+      "body-2": lh("body", 2),
+      "body-3": lh("body", 3),
+      "body-4": lh("body", 4),
+      "body-5": lh("body", 5),
+      "body-6": lh("body", 6),
+      "code-1": lh("code", 1),
+      "code-2": lh("code", 2),
+      "code-3": lh("code", 3),
+      "code-4": lh("code", 4),
+      "code-5": lh("code", 5),
+      "code-6": lh("code", 6),
+      "alt-1": lh("alt", 1),
+      "alt-2": lh("alt", 2),
+      "alt-3": lh("alt", 3),
+      "alt-4": lh("alt", 4),
+      "alt-5": lh("alt", 5),
+      "alt-6": lh("alt", 6)
+    ),
+    extended: (
+      1: 1,
+      2: 1.1,
+      3: 1.35,
+      4: 1.5,
+      5: 1.62,
+      6: 1.75
+    )
+  ),
+  margin: (
+    standard:
+      map-collect(
+        map-get($system-spacing, "smaller"),
+        map-get($system-spacing, "small"),
+        map-get($system-spacing, "medium"),
+        map-get($system-spacing-em, "small"),
+        map-get($partial-values, "zero-zero")
+      ),
+    extended: ()
+  ),
+  margin-horizontal: (
+    standard:
+      map-collect(
+        map-get($system-spacing, "smaller"),
+        map-get($system-spacing, "small"),
+        map-get($system-spacing, "smaller-negative"),
+        map-get($system-spacing, "small-negative"),
+        map-get($system-spacing, "medium"),
+        map-get($system-spacing, "large"),
+        map-get($system-spacing-em, "small"),
+        map-get($partial-values, "zero-zero"),
+        map-get($partial-values, "auto")
+      ),
+    extended: ()
+  ),
+  margin-vertical: (
+    standard:
+      map-collect(
+        map-get($system-spacing, "smaller"),
+        map-get($system-spacing, "small"),
+        map-get($system-spacing, "smaller-negative"),
+        map-get($system-spacing, "small-negative"),
+        map-get($system-spacing, "medium"),
+        map-get($system-spacing-em, "small"),
+        map-get($partial-values, "zero-zero"),
+        map-get($partial-values, "auto")
+      ),
+    extended: ()
+  ),
+  max-height: (
+    standard:
+      map-collect(
+        map-get($system-spacing, "small"),
+        map-get($system-spacing, "medium"),
+        map-get($system-spacing, "large"),
+        map-get($system-spacing, "larger"),
+        map-get($partial-values, "none"),
+        map-get($partial-values, "full-viewport-height")
+      ),
+    extended: ()
+  ),
+  max-width: (
+    standard:
+      map-collect(
+        map-get($system-spacing, "small"),
+        map-get($system-spacing, "medium"),
+        map-get($system-spacing, "large"),
+        map-get($system-spacing, "larger"),
+        map-get($system-spacing, "largest"),
+        map-get($partial-values, "none"),
+        map-get($partial-values, "full-percent")
+      ),
+    extended: ()
+  ),
+  measure: (
+    standard: (
+      1: $system-measure-smaller,
+      2: $system-measure-small,
+      3: $system-measure-base,
+      4: $system-measure-large,
+      5: $system-measure-larger,
+      6: $system-measure-largest,
+      "none": none
+    ),
+    extended: ()
+  ),
+  min-height: (
+    standard:
+      map-collect(
+        map-get($system-spacing, "smaller"),
+        map-get($system-spacing, "small"),
+        map-get($system-spacing, "medium"),
+        map-get($system-spacing, "large"),
+        map-get($system-spacing, "larger"),
+        map-get($partial-values, "zero-zero"),
+        map-get($partial-values, "full-percent"),
+        map-get($partial-values, "full-viewport-height")
+      ),
+    extended: ()
+  ),
+  min-width: (
+    standard:
+      map-collect(
+        map-get($system-spacing, "small"),
+        map-get($system-spacing, "medium"),
+        map-get($partial-values, "zero-zero")
+      ),
+    extended: ()
+  ),
+  opacity: (
+    standard: (
+      0: 0,
+      10: 0.1,
+      20: 0.2,
+      30: 0.3,
+      40: 0.4,
+      50: 0.5,
+      60: 0.6,
+      70: 0.7,
+      80: 0.8,
+      90: 0.9,
+      100: 1
+    ),
+    extended: ()
+  ),
+  order: (
+    standard: (
+      "first": -1,
+      "last": 999,
+      "initial": initial,
+      0: 0,
+      1: 1,
+      2: 2,
+      3: 3,
+      4: 4,
+      5: 5,
+      6: 6,
+      7: 7,
+      8: 8,
+      9: 9,
+      10: 10,
+      11: 11
+    ),
+    extended: ()
+  ),
+  outline: (
+    standard:
+      map-collect(
+        map-get($system-spacing, "smaller"),
+        map-get($partial-values, "zero-zero"),
+        (
+          "05": spacing-multiple(0.5)
+        )
+      ),
+    extended: ()
+  ),
+  outline-color: (
+    standard: map-collect($tokens-color-required),
+    extended: $extended-colors
+  ),
+  overflow: (
+    standard: (
+      "hidden": hidden,
+      "scroll": scroll,
+      "auto": auto,
+      "visible": visible
+    ),
+    extended: ()
+  ),
+  padding: (
+    standard:
+      map-collect(
+        map-get($system-spacing, "smaller"),
+        map-get($system-spacing, "small"),
+        map-get($system-spacing, "medium"),
+        map-get($partial-values, "zero-zero")
+      ),
+    extended: ()
+  ),
+  position: (
+    standard: (
+      "absolute": absolute,
+      "fixed": fixed,
+      "relative": relative,
+      "static": static,
+      "sticky": sticky
+    ),
+    extended: ()
+  ),
+  right: (
+    standard:
+      map-collect(
+        map-get($system-spacing, "smaller"),
+        map-get($system-spacing, "small"),
+        map-get($system-spacing, "smaller-negative"),
+        map-get($system-spacing, "small-negative"),
+        map-get($partial-values, "zero-zero"),
+        map-get($partial-values, "auto")
+      ),
+    extended: ()
+  ),
+  square: (
+    standard:
+      map-collect(
+        map-get($system-spacing, "smaller"),
+        map-get($system-spacing, "small"),
+        map-get($system-spacing, "medium"),
+        map-get($system-spacing, "large")
+      ),
+    extended: ()
+  ),
+  text-align: (
+    standard: (
+      "center": center,
+      "left": left,
+      "justify": justify,
+      "right": right
+    ),
+    extended: ()
+  ),
+  text-decoration: (
+    standard: (
+      "strike": line-through,
+      "underline": underline,
+      "no-underline": none,
+      "no-strike": none
+    ),
+    extended: ()
+  ),
+  text-decoration-color: (
+    standard: map-collect($standard-colors, map-get($partial-values, "auto")),
+    extended: $extended-colors
+  ),
+  text-indent: (
+    standard:
+      map-collect(
+        map-get($partial-values, "zero-zero"),
+        map-get($system-spacing, "small"),
+        map-get($system-spacing, "small-negative"),
+        map-get($system-spacing, "medium"),
+        map-get($system-spacing, "medium-negative")
+      ),
+    extended: ()
+  ),
+  text-transform: (
+    standard: (
+      "uppercase": uppercase,
+      "no-uppercase": none,
+      "lowercase": lowercase,
+      "no-lowercase": none
+    ),
+    extended: ()
+  ),
+  top: (
+    standard:
+      map-collect(
+        map-get($system-spacing, "smaller"),
+        map-get($system-spacing, "small"),
+        map-get($system-spacing, "smaller-negative"),
+        map-get($system-spacing, "small-negative"),
+        map-get($partial-values, "zero-zero"),
+        map-get($partial-values, "auto")
+      ),
+    extended: ()
+  ),
+  vertical-align: (
+    standard: (
+      "baseline": baseline,
+      "bottom": bottom,
+      "middle": middle,
+      "sub": sub,
+      "super": super,
+      "tbottom": text-bottom,
+      "ttop": text-top,
+      "top": top
+    ),
+    extended: ()
+  ),
+  white-space: (
+    standard: (
+      "pre": pre,
+      "pre-line": pre-line,
+      "pre-wrap": pre-wrap,
+      "wrap": normal,
+      "no-wrap": nowrap
+    ),
+    extended: ()
+  ),
+  width: (
+    standard:
+      map-collect(
+        map-get($system-spacing, "smaller"),
+        map-get($system-spacing, "small"),
+        map-get($system-spacing, "medium"),
+        map-get($system-spacing, "large"),
+        map-get($system-spacing, "larger"),
+        map-get($system-spacing, "largest"),
+        map-get($partial-values, "zero-zero"),
+        map-get($partial-values, "full-percent"),
+        map-get($partial-values, "auto")
+      ),
+    extended: ()
+  ),
+  z-index: (
+    standard: (
+      "auto": auto,
+      "bottom": -100,
+      "top": 99999,
+      0: 0,
+      100: 100,
+      200: 200,
+      300: 300,
+      400: 400,
+      500: 500
+    ),
+    extended: ()
+  )
+);