@cfpb/cfpb-design-system 5.1.0 → 5.3.0

package/package.json

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

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

@@ -1,6 +1,7 @@
 @use 'sass:math';
 @use '@cfpb/cfpb-design-system/src/elements/abstracts' as *;
 @use '@cfpb/cfpb-design-system/src/utilities' as *;
+@use '@cfpb/cfpb-design-system/src/components/cfpb-icons/icons-lib' as *;
 
 .m-form-field {
   // Theme variables.
@@ -137,16 +138,14 @@
       }
 
       &:checked + .a-label::before {
-        --cfpb-background-icon-svg: 'approved';
+        background-image: $cfpb-background-icon-svg-approved;
 
         background-size: auto $cf-icon-height;
         background-repeat: no-repeat;
         background-position: center 0;
       }
       &:disabled:checked + .a-label::before {
-        // RGB values are CFPB gray (#5a5d61).
-        // For some reason SVG isn't accepting hex values for the fill.
-        --cfpb-background-icon-svg: 'approved rgb(90,93,97)';
+        background-image: $cfpb-background-icon-svg-approved-gray;
       }
     }
   }

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

@@ -10,8 +10,7 @@ import { create } from './multiselect-utils.js';
 
 import * as MultiselectStyles from './multiselect.scss';
 
-import * as closeIconSrc from '../cfpb-icons/icons/error.svg?raw';
-const closeIcon = closeIconSrc.default;
+import { errorIcon as closeIcon } from '../cfpb-icons/icons-lib.js';
 
 const BASE_CLASS = 'o-multiselect';
 const CHECKBOX_INPUT_CLASS = 'a-checkbox';

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

@@ -1,5 +1,6 @@
 @use 'sass:math';
 @use '@cfpb/cfpb-design-system/src/elements/abstracts' as *;
+@use '@cfpb/cfpb-design-system/src/components/cfpb-icons/icons-lib' as *;
 
 // Initial and no-js state.
 select.o-multiselect {
@@ -38,7 +39,7 @@ select.o-multiselect {
       bottom: 0;
       background-color: var(--select-icon-bg-default);
 
-      --cfpb-background-icon-svg: 'down';
+      background-image: $cfpb-background-icon-svg-down;
 
       background-size: auto $cf-icon-height;
       background-repeat: no-repeat;
@@ -91,7 +92,7 @@ select.o-multiselect {
 
     // Reverse arrow when search drop-down is open.
     .o-multiselect__header::after {
-      --cfpb-background-icon-svg: 'up';
+      background-image: $cfpb-background-icon-svg-up;
     }
   }
 

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

@@ -1,5 +1,6 @@
 @use 'sass:math';
 @use '@cfpb/cfpb-design-system/src/elements/abstracts' as *;
+@use '@cfpb/cfpb-design-system/src/components/cfpb-icons/icons-lib' as *;
 
 .a-select {
   --select-border: var(--select-border-default);
@@ -74,7 +75,7 @@
     bottom: 0;
     background-color: var(--select-icon-bg-default);
 
-    --cfpb-background-icon-svg: 'down';
+    background-image: $cfpb-background-icon-svg-down;
 
     background-size: auto $cf-icon-height;
     background-repeat: no-repeat;
@@ -87,7 +88,7 @@
   // Unfortunately, we can't target this to apply when only
   // the select[disabled] is present and need the additional class.
   &--disabled::after {
-    --cfpb-background-icon-svg: 'down rgb(90,93,97)';
+    background-image: $cfpb-background-icon-svg-down-gray;
   }
 
   &--error {