@cfpb/cfpb-design-system 3.10.0 → 3.11.0

package/package.json

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

package/src/abstracts/vars.scss

@@ -45,7 +45,7 @@ $size-i: 34px; // h1-size
 $size-ii: 26px; // h2-size
 $size-iii: 22px; // h3-size
 $size-iv: 18px; // h4-size
-$size-v: 14px; // h5-site
+$size-v: 14px; // h5-size
 $size-vi: 12px; // h6-size
 $size-code: 13px; // Custom size only for Mono code blocks
 
@@ -113,9 +113,17 @@ $input-icon-warning: var(--gold);
 $input-icon-error: var(--red);
 
 // .a-select
-$select-border: $input-border;
-$select-icon-bg: var(--gray-10);
-$select-text-disabled: $input-text-disabled;
+:root {
+  --select-border-default: var(--gray-60); // $input-text
+  --select-border-width-default: 1px;
+  --select-border-error: var(--red);
+  --select-border-width-error: 2px;
+  --select-border-hover-default: var(--pacific); // $input-border-hover
+  --select-border-focus-default: var(--pacific); // $input-border-focused
+  --select-bg-disabled-default: var(--gray-10); // $input-bg-disabled
+  --select-icon-bg-default: var(--gray-10);
+  --select-text-disabled-default: var(--gray-dark); // $input-text-disabled
+}
 
 // .m-form-field
 $form-field-input-border: $input-border;

package/src/components/cfpb-forms/form-field.scss

@@ -91,6 +91,7 @@
           &::before {
             background: $input-bg-disabled;
             border-color: $form-field-input-border-disabled;
+            outline: none;
           }
         }
       }
@@ -265,11 +266,6 @@
         box-shadow: inset 0 0 0 2px $form-field-inset;
       }
 
-      &:checked:disabled + .a-label::before {
-        background-color: $input-bg-disabled-selected;
-        box-shadow: inset 0 0 0 2px $input-bg-disabled;
-      }
-
       &:focus:checked + .a-label::before,
       &.focus:checked + .a-label::before {
         border-color: $input-border-focused;
@@ -285,6 +281,14 @@
           0 0 0 1px $input-border-hover,
           inset 0 0 0 2px $form-field-inset;
       }
+
+      &:checked:disabled + .a-label::before,
+      &:hover:checked:disabled + .a-label::before,
+      &.hover:checked:disabled + .a-label::before {
+        background-color: $input-bg-disabled-selected;
+        box-shadow: inset 0 0 0 2px $input-bg-disabled;
+        border-color: $form-field-input-border-disabled;
+      }
     }
   }
 

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

@@ -13,7 +13,7 @@ select.o-multiselect {
   height: 5.5em;
   padding-top: math.div(4px, $base-font-size-px) + em;
   padding-bottom: math.div(4px, $base-font-size-px) + em;
-  border: 1px solid $select-border;
+  border: 1px solid var(--select-border-default);
 
   option {
     padding: math.div(2px, $base-font-size-px) + em
@@ -31,19 +31,18 @@ select.o-multiselect {
       // Arrow box width must be odd size to properly center the bg image
       width: math.div($select-height, $base-font-size-px) + em;
       box-sizing: border-box;
-      border-left: 1px solid $select-border;
+      border: 1px solid var(--select-border-default);
       position: absolute;
       top: 0;
       right: 0;
       bottom: 0;
-      background-color: $select-icon-bg;
+      background-color: var(--select-icon-bg-default);
 
       --cfpb-background-icon-svg: 'down';
 
       background-size: auto $cf-icon-height;
       background-repeat: no-repeat;
       background-position: center center;
-      border: 1px solid $input-border;
       content: '';
       pointer-events: none;
     }

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

@@ -2,8 +2,16 @@
 @use '@cfpb/cfpb-design-system/src/abstracts' as *;
 
 .a-select {
+  --select-border: var(--select-border-default);
+  --select-border-width: var(--select-border-width-default);
+
   position: relative;
-  border: 1px solid $select-border;
+  border: var(--select-border-width) solid var(--select-border);
+
+  &:has(select[disabled]) {
+    border: var(--select-border-width-default) solid
+      var(--select-border-default);
+  }
 
   select {
     width: 100%;
@@ -13,21 +21,22 @@
       em;
     border: 0;
     appearance: none;
-    background-color: $input-bg;
+    background-color: var(--white);
     border-radius: 0;
-    color: $text;
+    color: var(--black);
 
     &:hover,
     &.hover {
-      outline: 2px solid $input-border-hover;
+      outline: 2px solid var(--select-border-hover-default);
       outline-offset: 0;
+      cursor: pointer;
     }
 
     &:active,
     &:focus,
     &.focus {
-      box-shadow: 0 0 0 2px $input-border-focused;
-      outline: 1px dotted $input-border-focused;
+      box-shadow: 0 0 0 2px var(--select-border-focus-default);
+      outline: 1px dotted var(--select-border-focus-default);
 
       // The outline-offset property is not supported everywhere (e.g. IE)
       // but it adds a nice touch in browsers where it is.
@@ -36,8 +45,7 @@
   }
 
   select[disabled] {
-    color: $select-text-disabled;
-    background-color: $input-bg-disabled;
+    background-color: var(--select-bg-disabled-default);
     cursor: not-allowed;
 
     &:hover,
@@ -48,22 +56,23 @@
     }
   }
 
+  select[disabled],
   select[disabled] option,
   select[disabled] option:disabled,
   select option:disabled {
-    color: $select-text-disabled;
+    color: var(--select-text-disabled-default);
   }
 
   &::after {
     // Arrow box width must be odd size to properly center the bg image
     width: math.div($select-height, $base-font-size-px) + em;
     box-sizing: border-box;
-    border-left: 1px solid $select-border;
+    border-left: 1px solid var(--select-border-default);
     position: absolute;
     top: 0;
     right: 0;
     bottom: 0;
-    background-color: $select-icon-bg;
+    background-color: var(--select-icon-bg-default);
 
     --cfpb-background-icon-svg: 'down';
 
@@ -80,4 +89,9 @@
   &--disabled::after {
     --cfpb-background-icon-svg: 'down rgb(90,93,97)';
   }
+
+  &--error {
+    --select-border: var(--select-border-error);
+    --select-border-width: var(--select-border-width-error);
+  }
 }

package/src/utilities/utilities.scss

@@ -80,11 +80,9 @@
 }
 
 .u-show-on-mobile {
-  display: none;
-
-  // Mobile only.
-  @include respond-to-max($bp-xs-max) {
-    display: block;
+  // Tablet and above.
+  @include respond-to-min($bp-sm-min) {
+    display: none;
   }
 }