@cfpb/cfpb-design-system 3.10.0 → 3.12.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cfpb/cfpb-design-system",
-  "version": "3.10.0",
+  "version": "3.12.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
 
@@ -82,45 +82,56 @@ $block-border-left: $block-border;
 // .content__main
 $content-main-border: var(--gray-40);
 
-// Form variables
-
-// .a-text-input borders
-$input-border: var(--gray-60);
-$input-border-hover: var(--pacific);
-$input-border-focused: var(--pacific);
-$input-border-error: var(--red);
-$input-border-error-hover: var(--red-dark);
-$input-border-warning: var(--gold);
-$input-border-warning-hover: var(--gold-dark);
-$input-border-success: var(--green);
-$input-border-success-hover: var(--green-dark);
-
-// .a-text-input backgrounds
-$input-bg: var(--white);
-$input-bg-selected: var(--pacific);
-$input-bg-disabled: var(--gray-10);
-$input-bg-disabled-selected: var(--gray-40);
-
-// .a-text-input text
-$input-text: var(--black);
-$input-text-disabled: var(--gray-dark);
-$input-text-placeholder: var(--gray-dark);
-
-// .a-text-input icons
-$input-icon: var(--gray);
-$input-icon-success: var(--green);
-$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;
-
-// .m-form-field
-$form-field-input-border: $input-border;
-$form-field-input-border-disabled: var(--gray-60);
-$form-field-inset: var(--white);
+:root {
+  // Form variables
+
+  // .a-text-input
+  --input-text-default: var(--black);
+  --input-text-disabled-default: var(--gray-dark);
+  --input-text-placeholder-default: var(--gray-dark);
+  --input-border-default: var(--gray-60); // $input-border
+  --input-border-disabled: var(--gray-60);
+  --input-border-success: var(--green);
+  --input-border-warning: var(--gold);
+  --input-border-error: var(--red);
+  --input-border-hover-default: var(--pacific); // $input-border-hover
+  --input-border-focus-default: var(--pacific); // $input-border-focused
+  --input-bg-default: var(--white);
+  --input-bg-disabled-default: var(--gray-10);
+
+  // .a-form-alert icons
+  --form-alert-icon-color-default: var(--gray);
+  --form-alert-icon-color-success: var(--green);
+  --form-alert-icon-color-warning: var(--gold);
+  --form-alert-icon-color-error: var(--red);
+
+  // .a-select
+  --select-border-default: var(--gray-60); // $input-border
+  --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--checkbox .m-form-field--radio
+  --choice-border-default: var(--gray-60); // $input-border
+  --choice-border-disabled: var(--gray-60);
+  --choice-border-success: var(--green); // $input-border-success
+  --choice-border-warning: var(--gold); // $input-border-warning
+  --choice-border-error: var(--red); // $input-border-error
+  --choice-border-hover-default: var(--pacific); // $input-border-hover
+  --choice-border-focus-default: var(--pacific); // $input-border-focused
+  --choice-outline-focus-default: var(--pacific); // $input-border-focused
+  --choice-bg-default: var(--white); // $input-bg
+  --choice-bg-disabled: var(--gray-10); // $input-bg-disabled
+  --choice-bg-selected-default: var(--pacific); // $input-bg-selected
+  --choice-bg-selected-disabled: var(--gray-40);
+  --choice-bg-selected-focus-default: var(--pacific);
+  --choice-label-disabled-default: var(--gray-dark);
+}
 
 // .m-form-field--lg-target
 $form-field-input-lg-target-bg: var(--gray-10);

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

@@ -2,11 +2,13 @@
 @use '@cfpb/cfpb-design-system/src/abstracts' as *;
 
 .a-form-alert {
+  --form-alert-icon-color: var(--form-alert-icon-color-default);
+
   display: flex;
   gap: math.div(5px, $base-font-size-px) + rem;
 
   .cf-icon-svg {
-    color: $input-icon;
+    color: var(--form-alert-icon-color);
     flex: none;
     margin-top: math.div(1px, $base-font-size-px) + rem;
   }
@@ -16,14 +18,14 @@
   }
 
   &--success .cf-icon-svg {
-    color: $input-icon-success;
+    --form-alert-icon-color: var(--form-alert-icon-color-success);
   }
 
-  &--error .cf-icon-svg {
-    color: $input-icon-error;
+  &--warning .cf-icon-svg {
+    --form-alert-icon-color: var(--form-alert-icon-color-warning);
   }
 
-  &--warning .cf-icon-svg {
-    color: $input-icon-warning;
+  &--error .cf-icon-svg {
+    --form-alert-icon-color: var(--form-alert-icon-color-error);
   }
 }

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

@@ -3,6 +3,19 @@
 @use '@cfpb/cfpb-design-system/src/utilities' as *;
 
 .m-form-field {
+  // Theme variables.
+  --choice-border: var(--choice-border-default);
+  --choice-border-hover: var(--choice-border-hover-default);
+  --choice-border-focus: var(--choice-border-focus-default);
+  --choice-outline-focus: var(--choice-outline-focus-default);
+  --choice-bg: var(--choice-bg-default);
+  --choice-bg-selected: var(--choice-bg-selected-default);
+  --choice-bg-selected-focus: var(--choice-bg-selected-focus-default);
+  --choice-label-disabled: var(--choice-label-disabled-default);
+
+  // Private variables.
+  --choice-border-width-addendum: 0;
+
   .a-text-input--full {
     width: 100%;
   }
@@ -14,14 +27,6 @@
   &--checkbox,
   &--radio {
     .a-label {
-      // We need to turn off autoprefixing for the inline-grid because
-      // IE does not handle an inline-grid like other browsers,
-      // leading to an extremely narrow column of text for the label
-      // and the checkbox or radio widget covering the first part of it.
-      // The Autoprefixer control comment below ensures that the following
-      // property is only picked up by browsers with standard support.
-
-      /* autoprefixer: ignore next */
       display: inline-grid;
 
       // 30px is width of checkbox/radio button plus the needed padding.
@@ -36,11 +41,12 @@
         display: inline-block;
         grid-row-start: 1;
         grid-row-end: 3;
-        border: 1px solid $form-field-input-border;
+        border: 1px solid var(--choice-border);
+        outline: var(--choice-border-width-addendum) solid var(--choice-border);
         height: math.div(18px, $base-font-size-px) + em;
         width: math.div(18px, $base-font-size-px) + em;
         margin-right: 10px;
-        background-color: $input-bg;
+        background-color: var(--choice-bg);
         content: '';
         vertical-align: top;
 
@@ -52,24 +58,17 @@
 
       &:hover::before,
       &.hover::before {
-        border-color: $input-border-hover;
+        border-color: var(--choice-border-hover);
       }
     }
 
-    // Ensure the helper text appears on its own line below the label.
-    .a-label__helper {
-      display: block;
-    }
-
     .a-checkbox,
     .a-radio {
       @include u-visually-hidden;
 
       &:focus + .a-label,
       &.focus + .a-label {
-        outline: 1px dotted $input-border-focused;
-
-        // The outline-offset property is not supported in IE.
+        outline: 1px dotted var(--choice-outline-focus);
         outline-offset: 1px;
       }
 
@@ -79,36 +78,62 @@
         &.focus + .a-label::before,
         &:hover + .a-label::before,
         &.hover + .a-label::before {
-          border-color: $input-border;
+          border-color: var(--choice-border);
           outline: none;
           box-shadow: none; // Applies only to radio buttons.
         }
 
         & + .a-label {
           cursor: not-allowed;
-          color: $input-text-disabled;
+          color: var(--choice-label-disabled);
 
           &::before {
-            background: $input-bg-disabled;
-            border-color: $form-field-input-border-disabled;
+            outline: none;
           }
         }
       }
     }
+
+    &:has(.a-checkbox:disabled),
+    &:has(.a-radio:disabled) {
+      --choice-border: var(--choice-border-disabled);
+      --choice-bg: var(--choice-bg-disabled);
+      --choice-bg-selected: var(--choice-bg-selected-disabled);
+    }
+
+    &-success,
+    &-warning,
+    &-error {
+      --choice-border-width-addendum: 1px;
+    }
+
+    &-success {
+      --choice-border: var(--choice-border-success);
+    }
+
+    &-warning {
+      --choice-border: var(--choice-border-warning);
+    }
+
+    &-error {
+      --choice-border: var(--choice-border-error);
+    }
   }
 
   &--checkbox {
     .a-checkbox {
       &:focus + .a-label::before,
       &.focus + .a-label::before {
-        border-color: $input-border-focused;
-        box-shadow: 0 0 0 1px $input-border-focused;
+        border-color: var(--choice-border-focus);
+        box-shadow: 0 0 0 1px var(--choice-border-focus);
+        outline-color: var(--choice-border-focus);
       }
 
       &:hover + .a-label::before,
       &.hover + .a-label::before {
-        border-color: $input-border-hover;
-        box-shadow: 0 0 0 1px $input-border-hover;
+        border-color: var(--choice-border-hover);
+        box-shadow: 0 0 0 1px var(--choice-border-hover);
+        outline-color: var(--choice-border-hover);
       }
 
       &:checked + .a-label::before {
@@ -124,114 +149,6 @@
         --cfpb-background-icon-svg: 'approved rgb(90,93,97)';
       }
     }
-
-    &-error {
-      .a-label {
-        &::before {
-          border-color: $input-border-error;
-          outline: 1px solid $input-border-error;
-        }
-
-        &:hover::before,
-        &.hover::before {
-          border-color: $input-border-hover;
-          outline-color: $input-border-hover;
-        }
-      }
-
-      .a-checkbox {
-        &:hover + .a-label::before,
-        &.hover + .a-label::before {
-          border-color: $input-border-hover;
-          outline-color: $input-border-hover;
-        }
-
-        &:focus + .a-label::before,
-        &.focus + .a-label::before {
-          border-color: $input-border-error;
-          box-shadow: 0 0 0 1px $input-border-error;
-          outline-color: $input-border-error;
-        }
-
-        &:focus + .a-label,
-        &.focus + .a-label {
-          outline: 1px dotted $input-border-error;
-          outline-offset: 1px;
-        }
-      }
-    }
-
-    &-warning {
-      .a-label {
-        &::before {
-          border-color: $input-border-warning;
-          outline: 1px solid $input-border-warning;
-        }
-
-        &:hover::before,
-        &.hover::before {
-          border-color: $input-border-hover;
-          outline-color: $input-border-hover;
-        }
-      }
-
-      .a-checkbox {
-        &:hover + .a-label::before,
-        &.hover + .a-label::before {
-          border-color: $input-border-hover;
-          outline-color: $input-border-hover;
-        }
-
-        &:focus + .a-label::before,
-        &.focus + .a-label::before {
-          border-color: $input-border-warning;
-          box-shadow: 0 0 0 1px $input-border-warning;
-          outline-color: $input-border-warning;
-        }
-
-        &:focus + .a-label,
-        &.focus + .a-label {
-          outline: 1px dotted $input-border-warning;
-          outline-offset: 1px;
-        }
-      }
-    }
-
-    &-success {
-      .a-label {
-        &::before {
-          border-color: $input-border-success;
-          outline: 1px solid $input-border-success;
-        }
-
-        &:hover::before,
-        &.hover::before {
-          border-color: $input-border-hover;
-          outline-color: $input-border-hover;
-        }
-      }
-
-      .a-checkbox {
-        &:hover + .a-label::before,
-        &.hover + .a-label::before {
-          border-color: $input-border-hover;
-          outline-color: $input-border-hover;
-        }
-
-        &:focus + .a-label::before,
-        &.focus + .a-label::before {
-          border-color: $input-border-success;
-          box-shadow: 0 0 0 1px $input-border-success;
-          outline-color: $input-border-success;
-        }
-
-        &:focus + .a-label,
-        &.focus + .a-label {
-          outline: 1px dotted $input-border-success;
-          outline-offset: 1px;
-        }
-      }
-    }
   }
 
   &--radio {
@@ -240,7 +157,7 @@
         border-radius: 50%;
 
         /* The rotate is needed to fix a bug in Firefox where radio
-                   button was not centered. */
+           button was not centered. */
         transform: rotate(0deg);
       }
     }
@@ -249,41 +166,45 @@
       &:focus + .a-label::before,
       &.focus + .a-label::before {
         outline: none;
-        border-color: $input-border-focused;
-        box-shadow: 0 0 0 1px $input-border-focused;
+        border-color: var(--choice-border-focus);
+        box-shadow: 0 0 0 1px var(--choice-border-focus);
       }
 
       &:hover + .a-label::before,
       &.hover + .a-label::before {
         outline: none;
-        border-color: $input-border-hover;
-        box-shadow: 0 0 0 1px $input-border-hover;
+        border-color: var(--choice-border-hover);
+        box-shadow: 0 0 0 1px var(--choice-border-hover);
       }
 
       &:checked + .a-label::before {
-        background-color: $input-bg-selected;
-        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;
+        background-color: var(--choice-bg-selected);
+        box-shadow: inset 0 0 0 2px var(--white); // The radio button ring.
       }
 
       &:focus:checked + .a-label::before,
       &.focus:checked + .a-label::before {
-        border-color: $input-border-focused;
+        background-color: var(--choice-bg-selected-focus);
+        border-color: var(--choice-border-focus);
         box-shadow:
-          0 0 0 1px $input-border-focused,
-          inset 0 0 0 2px $form-field-inset;
+          0 0 0 1px var(--choice-border-focus),
+          inset 0 0 0 2px var(--white); // The radio button ring.
       }
 
       &:hover:checked + .a-label::before,
       &.hover:checked + .a-label::before {
-        border-color: $input-border-hover;
+        border-color: var(--choice-border-hover);
         box-shadow:
-          0 0 0 1px $input-border-hover,
-          inset 0 0 0 2px $form-field-inset;
+          0 0 0 1px var(--choice-border-hover),
+          inset 0 0 0 2px var(--white); // The radio button ring.
+      }
+
+      &:checked:disabled + .a-label::before,
+      &:hover:checked:disabled + .a-label::before,
+      &.hover:checked:disabled + .a-label::before {
+        background-color: var(--choice-bg-selected);
+        box-shadow: inset 0 0 0 2px var(--gray-10); // The radio button ring.
+        border-color: var(--choice-border-disabled);
       }
     }
   }
@@ -315,14 +236,13 @@
       &:focus + .a-label,
       &.focus + .a-label,
       &:checked + .a-label {
-        // The outline-offset property is not supported in IE.
         outline-offset: 1px;
       }
 
       &:disabled + .a-label,
       &:checked:disabled + .a-label,
       &:hover:disabled + .a-label {
-        color: $input-text-disabled;
+        color: var(--choice-label-disabled);
         box-shadow: none;
         background-color: $form-field-input-lg-target-bg-disabled;
       }
@@ -330,7 +250,7 @@
       &:checked:disabled + .a-label {
         &,
         &::before {
-          border: 1px solid $form-field-input-border-disabled;
+          border: 1px solid var(--form-field-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;
     }
@@ -58,7 +57,7 @@ select.o-multiselect {
 
   &__fieldset {
     // Resets
-    border-color: $input-border;
+    border-color: var(--select-border-default);
     border-top: none;
     margin: 0;
     padding: 0;

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);
+  }
 }