@cfpb/cfpb-design-system 3.8.0 → 3.10.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cfpb/cfpb-design-system",
-  "version": "3.8.0",
+  "version": "3.10.0",
   "description": "CFPB's UI framework",
   "exports": {
     ".": "./src/index.js",

package/src/abstracts/media-queries.scss

@@ -12,7 +12,7 @@
 @mixin respond-to-min($bp) {
   $ems: math.div($bp, $base-font-size-px) + em;
 
-  @media only all and (min-width: $ems) {
+  @media only screen and (min-width: $ems) {
     @content;
   }
 }
@@ -20,7 +20,7 @@
 @mixin respond-to-max($bp) {
   $ems: math.div($bp, $base-font-size-px) + em;
 
-  @media only all and (max-width: $ems) {
+  @media only screen and (max-width: $ems) {
     @content;
   }
 }
@@ -29,16 +29,7 @@
   $ems1: math.div($bp1, $base-font-size-px) + em;
   $ems2: math.div($bp2, $base-font-size-px) + em;
 
-  @media only all and (min-width: $ems1) and (max-width: $ems2) {
-    @content;
-  }
-}
-
-@mixin respond-to-print() {
-  @media print {
-    @content;
-  }
-  .print {
+  @media only screen and (min-width: $ems1) and (max-width: $ems2) {
     @content;
   }
 }

package/src/base/normalize.scss

@@ -208,7 +208,11 @@ button,
   html input[type="button"], /* 1 */
   input[type="reset"],
   input[type="submit"] {
+  /* TODO: stylelint wants to convert `appearance: button` to `appearance: auto`
+     Investigate why. */
+  /* stylelint-disable */
   appearance: button; /* 2 */
+  /* stylelint-enable */
   cursor: pointer; /* 3 */
 }
 

package/src/components/cfpb-buttons/button.scss

@@ -169,7 +169,6 @@ input.a-btn::-moz-focus-inner {
   &--full-on-xs {
     // Mobile only.
     @include respond-to-max($bp-xs-max) {
-      display: block;
       width: 100%;
     }
   }

package/src/components/cfpb-expandables/expandable-group.scss

@@ -22,7 +22,7 @@
     }
   }
 
-  @include respond-to-print {
+  @media print {
     // Hide the interactive expandable cues when printing
     &__header[aria-expanded='true'] &__cue-close,
     &__header[aria-expanded='false'] &__cue-open {

package/src/components/cfpb-expandables/expandable.scss

@@ -158,7 +158,7 @@
     }
   }
 
-  @include respond-to-print {
+  @media print {
     // Hide the interactive expandable cues when printing
     &__header[aria-expanded='true'] &__cue-close,
     &__header[aria-expanded='false'] &__cue-open {

package/src/components/cfpb-expandables/summary.scss

@@ -43,14 +43,18 @@
 
       // 4px is needed because the 2px movement of the content's bounding box.
       top: calc(-100% + 2px);
+
+      /* TODO: stylelint wants to convert rgba to rgb. Investigate why. */
+      /* stylelint-disable */
       background: linear-gradient(
         to bottom,
         rgba(255, 255, 255, 0%) 0%,
         rgba(255, 255, 255, 100%) 100%
       );
+      /* stylelint-enable */
       content: '';
 
-      @include respond-to-print {
+      @media print {
         background: none;
       }
     }

package/src/components/cfpb-forms/tag.scss

@@ -42,7 +42,7 @@ button.a-tag-filter {
   }
 
   &:active {
-    background-color: var(--teal);
+    background-color: var(--teal-60);
   }
 }
 
@@ -60,7 +60,7 @@ a.a-tag-filter {
     var(--teal),
     var(--teal),
     var(--teal),
-    var(--teal)
+    var(--teal-60)
   );
 }
 

package/src/components/cfpb-typography/list.scss

@@ -18,17 +18,6 @@
   }
 }
 
-//
-// Spaced list modifier
-//
-
-.m-list--spaced {
-  .m-list--spaced,
-  .m-list__item + .m-list__item {
-    margin-top: math.div(24px, $base-font-size-px) + em;
-  }
-}
-
 //
 // Horizontal list modifier
 //

package/src/components/cfpb-typography/mixins.scss

@@ -21,7 +21,12 @@
 
       .#{$jump-link-class}__text {
         color: var(--gray);
+
+        /* TODO: `word-break: break-word` is deprecated should be converted to
+           `overflow-wrap: anywhere` combined with `word-break: normal` */
+        /* stylelint-disable declaration-property-value-keyword-no-deprecated */
         word-break: break-word;
+        /* stylelint-enable declaration-property-value-keyword-no-deprecated */
       }
     } @else {
       font-weight: 500;