uswds-jekyll 2.0.1 → 2.1.0

data/assets/uswds/scss/core/_base.scss

@@ -28,3 +28,8 @@ body {
 [hidden] {
   display: none !important; /* stylelint-disable-line declaration-no-important */
 }
+
+*:focus,
+.usa-focus {
+  @include focus;
+}

data/assets/uswds/scss/core/_utilities.scss

@@ -30,12 +30,18 @@
 }
 
 @mixin h6 {
-  font-family: $font-sans;
   font-size: $h6-font-size;
   font-weight: $font-normal;
+  line-height: $base-line-height;
   text-transform: uppercase;
 }
 
+// Focus state mixin
+@mixin focus {
+  outline: $focus-outline;
+  outline-offset: $focus-spacing;
+}
+
 // Mobile-first media query helper
 @mixin media($bp) {
   @media screen and (min-width: #{$bp}) {
@@ -49,6 +55,15 @@
   left: -999em;
 }
 
+// This "negates" the sr-only() helper; useful if
+// we want the default state of something to be
+// for screen readers only, but we want to force
+// it to show for sighted users under more specific
+// conditions.
+@mixin not-sr-only() {
+  position: static;
+}
+
 .usa-sr-only {
   @include sr-only();
 }
@@ -132,8 +147,8 @@
 
 @mixin display-icon($icon, $direction, $size, $margin, $hover) {
   &::#{$direction} {
-    background-image: url(#{$image-path}/#{$icon}.png);
-    background-image: url(#{$image-path}/#{$icon}.svg);
+    background-image: url('#{$image-path}/#{$icon}.png');
+    background-image: url('#{$image-path}/#{$icon}.svg');
     background-size: 100%;
     content: '';
     display: inline-block;
@@ -151,8 +166,8 @@
 
   @if $hover == 'hover' {
     &:hover::#{$direction} {
-      background-image: url(#{$image-path}/#{$icon}-hover.png);
-      background-image: url(#{$image-path}/#{$icon}-hover.svg);
+      background-image: url('#{$image-path}/#{$icon}-hover.png');
+      background-image: url('#{$image-path}/#{$icon}-hover.svg');
     }
   }
 }
@@ -186,6 +201,7 @@
     }
 
     &:focus {
+      outline-offset: 0;
       position: relative;
       z-index: 1;
     }
@@ -224,6 +240,10 @@
     a {
       padding-left: 3.8rem;
 
+      &:focus {
+        outline-offset: 0;
+      }
+
       &:hover {
         padding-left: 3.8rem;
       }

data/assets/uswds/scss/core/_variables.scss

@@ -28,60 +28,82 @@ $lead-line-height:    1.7 !default;
 $font-sans:           'Source Sans Pro', $helvetica !default;
 $font-serif:          'Merriweather', $georgia !default;
 
+// TODO these should be called font-weight-${}
 $font-normal:         400 !default;
 $font-bold:           700 !default;
 
 // Color
-$color-primary:              #0071bc !default;
-$color-primary-darker:       #205493 !default;
-$color-primary-darkest:      #112e51 !default;
-
-$color-primary-alt:          #02bfe7 !default;
-$color-primary-alt-dark:     #00a6d2 !default;
-$color-primary-alt-darkest:  #046b99 !default;
-$color-primary-alt-light:    #9bdaf1 !default; // lighten($color-primary-alt, 60%)
-$color-primary-alt-lightest: #e1f3f8 !default; // lighten($color-primary-alt, 90%)
-
-$color-secondary:            #e31c3d !default;
-$color-secondary-dark:       #cd2026 !default;
-$color-secondary-darkest:    #981b1e !default;
-$color-secondary-light:      #e59393 !default; // lighten($color-secondary, 60%)
-$color-secondary-lightest:   #f9dede !default; // lighten($color-secondary, 90%)
+$color-blue:                 #0071bc !default;
+$color-blue-darker:          #205493 !default;
+$color-blue-darkest:         #112e51 !default;
+
+$color-aqua:                 #02bfe7 !default;
+$color-aqua-dark:            #00a6d2 !default;
+$color-aqua-darkest:         #046b99 !default;
+$color-aqua-light:           #9bdaf1 !default;
+$color-aqua-lightest:        #e1f3f8 !default;
+
+$color-red:                  #e31c3d !default;
+$color-red-dark:             #cd2026 !default;
+$color-red-darkest:          #981b1e !default;
+$color-red-light:            #e59393 !default;
+$color-red-lightest:         #f9dede !default;
 
 $color-white:                #ffffff !default;
-$color-base:                 #212121 !default;
 $color-black:                #000000 !default;
+$color-black-light:          #212121 !default;
 
 $color-gray-dark:            #323a45 !default;
-$color-gray:                 #5b616b !default; // lighten($color-gray-dark, 20%)
-$color-gray-medium:          #757575 !default; // lightest gray that passes color contrast
-$color-gray-light:           #aeb0b5 !default; // lighten($color-gray-dark, 60%)
-$color-gray-lighter:         #d6d7d9 !default; // lighten($color-gray-dark, 80%)
-$color-gray-lightest:        #f1f1f1 !default; // lighten($color-gray-dark, 91%)
+$color-gray:                 #5b616b !default;
+$color-gray-medium:          #757575 !default;
+$color-gray-light:           #aeb0b5 !default;
+$color-gray-lighter:         #d6d7d9 !default;
+$color-gray-lightest:        #f1f1f1 !default;
 
 $color-gray-warm-dark:       #494440 !default;
-$color-gray-warm-light:      #e4e2e0 !default; // lighten($color-gray-warm-dark, 90%)
-$color-gray-cool-light:      #dce4ef !default; // lighten($color-primary, 90%)
+$color-gray-warm-light:      #e4e2e0 !default;
+$color-gray-cool-light:      #dce4ef !default;
 
 $color-gold:                 #fdb81e !default;
-$color-gold-light:           #f9c642 !default; //  lighten($color-gold, 20%)
-$color-gold-lighter:         #fad980 !default; //  lighten($color-gold, 60%)
-$color-gold-lightest:        #fff1d2 !default; //  lighten($color-gold, 83%)
+$color-gold-light:           #f9c642 !default;
+$color-gold-lighter:         #fad980 !default;
+$color-gold-lightest:        #fff1d2 !default;
 
 $color-green:                #2e8540 !default;
-$color-green-light:          #4aa564 !default; // lighten($color-green, 20%)
-$color-green-lighter:        #94bfa2 !default; // lighten($color-green, 60%)
-$color-green-lightest:       #e7f4e4 !default; // lighten($color-green, 60%)
+$color-green-light:          #4aa564 !default;
+$color-green-lighter:        #94bfa2 !default;
+$color-green-lightest:       #e7f4e4 !default;
 
 $color-cool-blue:            #205493 !default;
-$color-cool-blue-light:      #4773aa !default; // lighten($color-cool-blue, 20%)
-$color-cool-blue-lighter:    #8ba6ca !default; // lighten($color-cool-blue, 60%)
-$color-cool-blue-lightest:   #dce4ef !default; // lighten($color-cool-blue, 90%)
+$color-cool-blue-light:      #4773aa !default;
+$color-cool-blue-lighter:    #8ba6ca !default;
+$color-cool-blue-lightest:   #dce4ef !default;
 
-$color-focus:                #3e94cf !default;
-$color-visited:              #4c2c92 !default;
+$color-purple:               #4c2c92 !default;
+
+// Functional colors
+$color-primary:              $color-blue !default;
+$color-primary-darker:       $color-blue-darker !default;
+$color-primary-darkest:      $color-blue-darkest !default;
+
+$color-primary-alt:          $color-aqua !default;
+$color-primary-alt-dark:     $color-aqua-dark !default;
+$color-primary-alt-darkest:  $color-aqua-darkest !default;
+$color-primary-alt-light:    $color-aqua-light !default;
+$color-primary-alt-lightest: $color-aqua-lightest !default;
+
+$color-secondary:            $color-red !default;
+$color-secondary-dark:       $color-red-dark !default;
+$color-secondary-darkest:    $color-red-darkest !default;
+$color-secondary-light:      $color-red-light !default;
+$color-secondary-lightest:   $color-red-lightest !default;
+
+$color-base:                 $color-black-light !default;
+$color-focus:                $color-gray-light !default;
+$color-visited:              $color-purple !default;
 
 $color-shadow:               rgba(#000, 0.3) !default;
+$color-transparent:          rgba(#000, 0) !default;
 
 // Mobile First Breakpoints
 $small-screen:  481px !default;
@@ -106,18 +128,28 @@ $image-path:  '../img' !default;
 $asset-pipeline:      false !default;
 
 // Magic Numbers
-$text-max-width:      53rem !default;
-$lead-max-width:      77rem !default;
-$site-max-width:      1040px !default;
-$site-margins:        3rem !default;
-$site-margins-mobile: 1.5rem !default;
-$article-max-width:   600px !default;
-$input-max-width:     46rem !default;
-$border-radius:       3px !default;
-$box-shadow:          0 0 2px $color-shadow !default;
-$focus-shadow:        0 0 3px $color-focus, 0 0 7px $color-focus !default;
-$nav-width:           951px !default;
+$text-max-width:          66ch !default; // 66 characters per line
+$lead-max-width:          77rem !default;
+$site-max-width:          1040px !default;
+$site-margins:            3rem !default;
+$site-margins-mobile:     1.5rem !default;
+$article-max-width:       600px !default;
+$input-max-width:         46rem !default;
+$label-border-radius:     2px !default;
+$checkbox-border-radius:  2px !default;
+$border-radius:           3px !default;
+$button-border-radius:    5px !default;
+$box-shadow:              0 0 2px $color-shadow !default;
+$focus-outline:           2px dotted $color-gray-light;
+$focus-spacing:           3px;
+$nav-width:               951px !default;
 
 // 44 x 44 pixels hit target following Apple iOS Human Interface
 // Guidelines
 $hit-area: 4.4rem !default;
+
+$spacing-x-small: 0.5rem;
+$spacing-small: 1rem;
+$spacing-md-small: 1.5rem;
+$spacing-medium: 2rem;
+$spacing-large: 3rem;

data/assets/uswds/scss/elements/_buttons.scss

@@ -4,6 +4,24 @@ $button-stroke: inset 0 0 0 2px;
 
 // Buttons
 
+// This mixin is only needed until we fully remove the
+// deprecated usa-button-disabled style.
+@mixin disabledesque {
+  background-color: $color-gray-lighter;
+  pointer-events: none;
+
+  &:hover,
+  &.usa-button-hover,
+  &:active,
+  &.usa-button-active,
+  &:focus,
+  &.usa-focus {
+    background-color: $color-gray-lighter;
+    border: 0;
+    box-shadow: none;
+  }
+}
+
 /* stylelint-disable selector-no-qualifying-type */
 .usa-button,
 .usa-button-primary,
@@ -19,7 +37,7 @@ button,
   appearance: none;
   background-color: $color-primary;
   border: 0;
-  border-radius: $border-radius;
+  border-radius: $button-border-radius;
   color: $color-white;
   cursor: pointer;
   display: inline-block;
@@ -27,7 +45,6 @@ button,
   font-size: $base-font-size;
   font-weight: $font-bold;
   line-height: 1;
-  outline: none;
   padding: 1rem 2rem;
   text-align: center;
   text-decoration: none;
@@ -45,11 +62,6 @@ button,
     text-decoration: none;
   }
 
-  &:focus,
-  &.usa-button-focus {
-    box-shadow: $focus-shadow;
-  }
-
   &:active,
   &.usa-button-active {
     background-color: $color-primary-darkest;
@@ -72,111 +84,125 @@ button,
   }
 
   &.usa-button-secondary {
-    background-color: $color-secondary;
+    background-color: $color-white;
+    box-shadow: $button-stroke $color-primary;
+    color: $color-primary;
 
     &:hover,
     &.usa-button-hover {
-      background-color: $color-secondary-dark;
+      box-shadow: $button-stroke $color-primary-darker;
+      color: $color-primary-darker;
     }
 
     &:active,
     &.usa-button-active {
-      background-color: $color-secondary-darkest;
+      box-shadow: $button-stroke $color-primary-darkest;
+      color: $color-primary-darkest;
     }
   }
 
-  &.usa-button-gray {
-    background-color: $color-gray;
+  &.usa-button-secondary-inverse,
+  &.usa-button-outline-inverse {    // Outline inverse to be deprecated in 2.0
+    background: transparent;
+    box-shadow: $button-stroke $color-white;
+    color: $color-white;
 
     &:hover,
     &.usa-button-hover {
-      background-color: $color-gray-dark;
+      box-shadow: $button-stroke $color-gray-lighter;
+      color: $color-gray-lighter;
     }
 
     &:active,
     &.usa-button-active {
-      background-color: $color-base;
+      box-shadow: $button-stroke $color-gray-light;
+      color: $color-gray-lighter;
     }
   }
 
-  &.usa-button-outline {
-    background-color: $color-white;
-    box-shadow: $button-stroke $color-primary;
-    color: $color-primary;
+  &.usa-button-gray {
+    background-color: $color-gray;
 
     &:hover,
     &.usa-button-hover {
-      box-shadow: $button-stroke $color-primary-darker;
-      color: $color-primary-darker;
+      background-color: $color-gray-dark;
     }
 
     &:active,
     &.usa-button-active {
-      box-shadow: $button-stroke $color-primary-darkest;
-      color: $color-primary-darkest;
-    }
-
-    &:focus,
-    &.usa-button-focus {
-      box-shadow: $button-stroke $color-primary-darkest, $focus-shadow;
+      background-color: $color-base;
     }
   }
 
-  &.usa-button-outline-inverse {
-    background: transparent;
-    box-shadow: $button-stroke $color-white;
-    color: $color-white;
+  &.usa-button-red {
+    background-color: $color-secondary;
 
     &:hover,
     &.usa-button-hover {
-      box-shadow: $button-stroke $color-gray-lighter;
-      color: $color-gray-lighter;
+      background-color: $color-secondary-dark;
     }
 
     &:active,
     &.usa-button-active {
-      box-shadow: $button-stroke $color-gray-light;
-      color: $color-gray-lighter;
-    }
-
-    &:focus,
-    &.usa-button-focus {
-      box-shadow: $button-stroke $color-gray-light, $focus-shadow;
+      background-color: $color-secondary-darkest;
     }
   }
 
   &.usa-button-big {
-    font-size: 1.9rem;
+    border-radius: 8px;
+    font-size: 2.4rem;
     padding: 1.5rem 3rem;
   }
+
+  &:disabled {
+    @include disabledesque;
+  }
 }
 /* stylelint-disable */
 
-.usa-button:disabled,
-.usa-button-disabled {
-  background-color: $color-gray-lighter;
-  color: $color-gray-dark;
+.usa-button-disabled  // Deprecated
+{
+  @include disabledesque
+}
+
+.usa-button-secondary-disabled,          // Deprecated
+.usa-button-secondary-inverse-disabled,  // Deprecated
+.usa-button-secondary:disabled,
+.usa-button-secondary-inverse:disabled,
+.usa-button-outline-inverse:disabled {   // Outline inverse to be deprecated in 2.0
+  box-shadow: $button-stroke $color-gray-lighter;
   pointer-events: none;
+  color: $color-gray-lighter;
 
   &:hover,
   &.usa-button-hover,
   &:active,
   &.usa-button-active,
-  &:focus {
-    background-color: $color-gray-lighter;
+  &:focus,
+  &.usa-focus {
+    background-color: $color-white;
     border: 0;
-    box-shadow: none;
-    color: $color-gray-dark;
   }
 }
 
+html .usa-button-secondary-disabled,          // Deprecated
+.usa-button-secondary:disabled {
+  background-color: $color-white;
+}
+
+html .usa-button-secondary-inverse-disabled,  // Deprecated
+.usa-button-secondary-inverse:disabled {
+  background-color: transparent;
+  color: $color-gray;
+  box-shadow: $button-stroke $color-gray;
+}
+
 @mixin button-unstyled {
   background-color: transparent;
   border: 0;
   border-radius: 0;
   font-weight: $font-normal;
   margin: 0;
-  outline: 0;
   padding: 0;
   text-align: left;
   -webkit-font-smoothing: auto;