@cfpb/cfpb-design-system 3.11.0 → 3.12.0

package/package.json

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

package/src/abstracts/vars.scss

@@ -82,39 +82,31 @@ $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
 :root {
-  --select-border-default: var(--gray-60); // $input-text
+  // 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;
@@ -123,12 +115,23 @@ $input-icon-error: var(--red);
   --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;
-$form-field-input-border-disabled: var(--gray-60);
-$form-field-inset: var(--white);
+  // .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,37 +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 {
@@ -125,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 {
@@ -241,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);
       }
     }
@@ -250,44 +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;
+        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: $input-bg-disabled-selected;
-        box-shadow: inset 0 0 0 2px $input-bg-disabled;
-        border-color: $form-field-input-border-disabled;
+        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);
       }
     }
   }
@@ -319,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;
       }
@@ -334,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

@@ -57,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/text-input.scss

@@ -1,138 +1,74 @@
 @use 'sass:math';
 @use '@cfpb/cfpb-design-system/src/abstracts' as *;
 
-// Border and  Outline Status styling.
-@mixin u-border-outline-error {
-  border-color: $input-border-error;
-  outline: 1px solid $input-border-error;
-  &:hover,
-  &.hover {
-    border-color: $input-border-error-hover;
-    outline: 1px solid $input-border-error-hover;
-    outline-offset: 0;
-  }
-  &:focus,
-  &.focus {
-    border-color: $input-border-error;
-    box-shadow: 0 0 0 1px $input-border-error;
-    outline: 1px dotted $input-border-error;
-
-    // Both hover and focus simultaenously
-    &:hover,
-    &.hover {
-      border-color: $input-border-error;
-      box-shadow: 0 0 0 1px $input-border-error;
-      outline: 1px dotted $input-border-error;
-      outline-offset: 2px;
-    }
-  }
-}
-
-@mixin u-border-outline-warning {
-  border-color: $input-border-warning;
-  outline: 1px solid $input-border-warning;
-  &:hover,
-  &.hover {
-    border-color: $input-border-warning-hover;
-    outline: 1px solid $input-border-warning-hover;
-    outline-offset: 0;
-  }
-  &:focus,
-  &.focus {
-    border-color: $input-border-warning;
-    box-shadow: 0 0 0 1px $input-border-warning;
-    outline: 1px dotted $input-border-warning;
-
-    // Both hover and focus simultaenously
-    &:hover,
-    &.hover {
-      border-color: $input-border-warning;
-      box-shadow: 0 0 0 1px $input-border-warning;
-      outline: 1px dotted $input-border-warning;
-      outline-offset: 2px;
-    }
-  }
-}
-
-@mixin u-border-outline-success {
-  border-color: $input-border-success;
-  outline: 1px solid $input-border-success;
-  &:hover,
-  &.hover {
-    border-color: $input-border-success-hover;
-    outline: 1px solid $input-border-success-hover;
-    outline-offset: 0;
-  }
-  &:focus,
-  &.focus {
-    border-color: $input-border-success;
-    box-shadow: 0 0 0 1px $input-border-success;
-    outline: 1px dotted $input-border-success;
-
-    // Both hover and focus simultaenously
-    &:hover,
-    &.hover {
-      border-color: $input-border-success;
-      box-shadow: 0 0 0 1px $input-border-success;
-      outline: 1px dotted $input-border-success;
-      outline-offset: 2px;
-    }
-  }
-}
-
 .a-text-input {
+  // Theme variables.
+  --input-text: var(--input-text-default);
+  --input-text-disabled: var(--input-text-disabled-default);
+  --input-text-placeholder: var(--input-text-placeholder-default);
+  --input-border: var(--input-border-default);
+  --input-border-hover: var(--input-border-hover-default);
+  --input-border-focus: var(--input-border-focus-default);
+  --input-bg: var(--input-bg-default);
+  --input-bg-disabled: var(--input-bg-disabled-default);
+
   // Reset the browser's default styling.
   appearance: none;
   display: inline-block;
   padding: math.div(7px, $base-font-size-px) + em;
-  border: 1px solid $input-border;
-  background: $input-bg;
-  color: $input-text;
+  border: 1px solid var(--input-border);
+  outline: 0 solid var(--input-border);
+  background: var(--input-bg);
+  color: var(--input-text);
   box-sizing: border-box;
 
   &:hover,
   &.hover {
-    border-color: $input-border-hover;
-    outline: 1px solid $input-border-hover;
+    border-color: var(--input-border-hover);
+    outline: 1px solid var(--input-border-hover);
   }
 
   &:focus,
   &.focus {
-    border-color: $input-border-focused;
-    box-shadow: 0 0 0 1px $input-border-focused;
-    outline: 1px dotted $input-border-focused;
-
-    // The outline-offset property is not supported everywhere (e.g. IE)
-    // but it adds a nice touch in browsers where it is.
+    border-color: var(--input-border-focus);
+    box-shadow: 0 0 0 1px var(--input-border-focus);
+    outline: 1px dotted var(--input-border-focus);
     outline-offset: 2px;
   }
 
   &:disabled {
+    --input-border: var(--input-border-disabled);
     &,
     &:hover,
     &.hover,
     &:focus,
     &.focus {
-      color: $input-text-disabled;
-      background-color: $input-bg-disabled;
+      color: var(--input-text-disabled);
+      background-color: var(--input-bg-disabled);
       cursor: not-allowed;
 
       // Cancel the hover and focus states.
-      border-color: $input-border;
+      border-color: var(--input-border);
       outline: none;
     }
   }
 
+  &--error,
+  &--warning,
+  &--success {
+    outline-width: 1px;
+  }
+
   &--error {
-    @include u-border-outline-error;
+    --input-border: var(--input-border-error);
   }
 
   &--warning {
-    @include u-border-outline-warning;
+    --input-border: var(--input-border-warning);
   }
 
   &--success {
-    @include u-border-outline-success;
+    --input-border: var(--input-border-success);
   }
 }
 
@@ -144,10 +80,10 @@
 
 // Change place holder text to dark gray (#43484e).
 ::placeholder {
-  color: $input-text-placeholder;
+  color: var(--input-text-placeholder);
 }
 
 // Force placeholder text color change for "date" field type.
 input[type='date']::-webkit-datetime-edit {
-  color: $input-text-placeholder;
+  color: var(--input-text-placeholder);
 }