Update to @cfpb/[email protected]

cfgov/unprocessed/apps/ask-cfpb/css/autocomplete.scss

@@ -1,4 +1,5 @@
 @use 'sass:math';
+@use '@cfpb/cfpb-design-system/src/abstracts' as *;
 
 .m-autocomplete {
   position: relative;
@@ -30,7 +31,7 @@
 
     &:hover,
     &.m-autocomplete__selected {
-      background-color: $block-bg;
+      background-color: var(--gray-5);
     }
 
     &:last-child {

cfgov/unprocessed/apps/ask-cfpb/css/main.scss

@@ -1,6 +1,6 @@
 @use 'sass:math';
-@import '../../../css/main';
-@import './autocomplete';
+@use '@cfpb/cfpb-design-system/src/abstracts' as *;
+@use './autocomplete';
 
 /* ==========================================================================
    consumerfinance.gov

cfgov/unprocessed/apps/ask-cfpb/js/Autocomplete.js

@@ -2,7 +2,7 @@ import {
   EventObserver,
   checkDom,
   setInitFlag,
-} from '@cfpb/cfpb-atomic-component';
+} from '@cfpb/cfpb-design-system/src/index.js';
 import throttle from 'lodash.throttle';
 
 // Class constants

cfgov/unprocessed/apps/careers/css/main.scss

@@ -1,5 +1,5 @@
 @use 'sass:math';
-@import 'cfpb-core';
+@use '@cfpb/cfpb-design-system/src/abstracts' as *;
 
 dl.vacancy-announcement dt {
   margin-top: math.div(12px, $base-font-size-px) + em;

cfgov/unprocessed/apps/ccdb-search/css/main.scss

@@ -1,6 +1,7 @@
 @use 'sass:math';
+@use '@cfpb/cfpb-design-system/src/abstracts' as *;
+
 @import '../node_modules/@cfpb/ccdb5-ui/dist/ccdb5.css';
-@import 'cfpb-core';
 
 // TODO: CCDB requires a number of undesirable overrides here, since it imports
 //       the DS into its codebase independent of the import that happens for the

cfgov/unprocessed/apps/cfpb-chart-builder/css/cfpb-chart-builder.scss

@@ -1,8 +1,8 @@
+// cf-core is included for cf-brand-colors and media queries.
+@use '@cfpb/cfpb-design-system/src/abstracts' as *;
 @use './vars' as *;
-@import 'highcharts/css/highcharts.css';
 
-// cf-core is included for cf-brand-colors and media queries.
-@import '@cfpb/cfpb-core/src/cfpb-core';
+@import 'highcharts/css/highcharts.css';
 @import './mixins';
 
 // Import chart-type specific styling.

cfgov/unprocessed/apps/cfpb-chart-builder/css/chart-tilemap.scss

@@ -1,3 +1,5 @@
+@use '@cfpb/cfpb-design-system/src/abstracts' as *;
+
 /* TODO: Investigate whether responsive styles can be remove here and handled
          via class set in JS, like how the other chart types work. */
 .cfpb-chart[data-chart-type='tile_map'] {

cfgov/unprocessed/apps/cfpb-chart-builder/css/mixins.scss

@@ -1,3 +1,5 @@
+@use '@cfpb/cfpb-design-system/src/abstracts' as *;
+
 // Set up default label settings.
 @mixin u-chart-label() {
   font-size: $base-font-size-px;

cfgov/unprocessed/apps/cfpb-chart-builder/js/charts/GeoMap.js

@@ -1,4 +1,4 @@
-import { EventObserver } from '@cfpb/cfpb-atomic-component';
+import { EventObserver } from '@cfpb/cfpb-design-system/src/index.js';
 import Highcharts from 'highcharts/highmaps';
 import accessibility from 'highcharts/modules/accessibility';
 import colorRange from '../utils/color-range';

cfgov/unprocessed/apps/cfpb-chart-builder/js/charts/LineChartComparison.js

@@ -1,7 +1,7 @@
 import Highcharts from 'highcharts/highstock';
 import accessibility from 'highcharts/modules/accessibility';
 import { processDelinquencies } from '../utils/process-json';
-import { EventObserver } from '@cfpb/cfpb-atomic-component';
+import { EventObserver } from '@cfpb/cfpb-design-system/src/index.js';
 
 accessibility(Highcharts);
 

cfgov/unprocessed/apps/filing-instruction-guide/css/main.scss

@@ -1,6 +1,7 @@
 @use 'sass:math';
-@import '../../../css/main';
-@import '../node_modules/ctrl-f/dist/css/index.css';
+@use '@cfpb/cfpb-design-system/src/abstracts' as *;
+
+@use '../node_modules/ctrl-f/dist/css/index.css';
 
 .o-fig__main {
   // Bump up all heading sizes to improve readability

cfgov/unprocessed/apps/filing-instruction-guide/js/fig-search.js

@@ -4,7 +4,7 @@
 import { addEventListenerToSelector } from '../../../apps/analytics-gtm/js/util/analytics-util';
 import { analyticsSendEvent } from '@cfpb/cfpb-analytics';
 import search from 'ctrl-f';
-import varsBreakpoints from '@cfpb/cfpb-core/src/vars-breakpoints.js';
+import { varsBreakpoints } from '@cfpb/cfpb-design-system/src/index.js';
 import { scrollIntoViewWithOffset } from './fig-sidenav-utils.js';
 
 let secondaryNav;

cfgov/unprocessed/apps/filing-instruction-guide/js/fig-sidenav.js

@@ -1,7 +1,7 @@
 /* istanbul ignore file */
 /* Cypress tests cover all the UI interactions on this page. */
 
-import varsBreakpoints from '@cfpb/cfpb-core/src/vars-breakpoints.js';
+import { varsBreakpoints } from '@cfpb/cfpb-design-system/src/index.js';
 
 import { addEventListenerToSelector } from '../../../apps/analytics-gtm/js/util/analytics-util';
 import { analyticsSendEvent } from '@cfpb/cfpb-analytics';

cfgov/unprocessed/apps/financial-well-being/css/main.scss

@@ -1,5 +1,5 @@
 @use 'sass:math';
-@import 'cfpb-core';
+@use '@cfpb/cfpb-design-system/src/abstracts' as *;
 
 .save-links {
   padding-bottom: 15px;

cfgov/unprocessed/apps/financial-well-being/js/fwb-results.js

@@ -1,5 +1,5 @@
 import { analyticsSendEvent } from '@cfpb/cfpb-analytics';
-import { Expandable } from '@cfpb/cfpb-expandables';
+import { Expandable } from '@cfpb/cfpb-design-system/src/index.js';
 
 let buttonsDom;
 

cfgov/unprocessed/apps/find-a-housing-counselor/css/hud.scss

@@ -1,4 +1,5 @@
 @use 'sass:math';
+@use '@cfpb/cfpb-design-system/src/abstracts' as *;
 
 .hud-search-container {
   background: var(--gray-5);

cfgov/unprocessed/apps/find-a-housing-counselor/css/main.scss

@@ -1,5 +1,3 @@
 // Import required CF components.
-@import 'cfpb-core';
-@import 'cfpb-grid';
 @import './hud';
 @import './hud_print.css';

cfgov/unprocessed/apps/form-explainer/css/form-explainer.scss

@@ -1,6 +1,8 @@
 @use 'sass:math';
 @use 'sass:list';
 @use 'sass:map';
+@use '@cfpb/cfpb-design-system/src/abstracts' as *;
+@use '@cfpb/cfpb-design-system/src/utilities' as *;
 
 /* ==========================================================================
    "Form explainer" custom styles

cfgov/unprocessed/apps/form-explainer/js/FormExplainer.js

@@ -1,6 +1,6 @@
 import { scrollIntoView } from '../../../js/modules/util/scroll.js';
 import DT from './dom-tools.js';
-import { ExpandableGroup } from '@cfpb/cfpb-expandables';
+import { ExpandableGroup } from '@cfpb/cfpb-design-system/src/index.js';
 
 const CSS = {
   HAS_ATTENTION: 'has-attention',

cfgov/unprocessed/apps/know-before-you-owe/css/main.scss

@@ -1,5 +1,5 @@
 @use 'sass:math';
-@import 'cfpb-core';
+@use '@cfpb/cfpb-design-system/src/abstracts' as *;
 
 .kbyo-professional-resources,
 .kbyo-footer {

cfgov/unprocessed/apps/owning-a-home/css/a-range.scss

@@ -1,4 +1,6 @@
 @use 'sass:math';
+@use './vars' as *;
+@use '@cfpb/cfpb-design-system/src/abstracts' as *;
 
 /*
     Range slider for credit score
@@ -76,14 +78,14 @@
     width: 22px;
     height: 21px;
     border: 0;
-    background: transparent url('#{$image-path}/slider-handle$2x.png') no-repeat
+    background: transparent url('#{$image-path}/slider-handle@2x.png') no-repeat
       0 0;
     background-size: 100%;
 
     &.warning {
       width: 22px;
       height: 21px;
-      background: transparent url('#{$image-path}/slider-handle$2x.png')
+      background: transparent url('#{$image-path}/slider-handle@2x.png')
         no-repeat 0 100%;
       background-size: 100%;
     }

cfgov/unprocessed/apps/owning-a-home/css/brand-footer.scss

@@ -1,4 +1,5 @@
 @use 'sass:math';
+@use '@cfpb/cfpb-design-system/src/abstracts' as *;
 
 /* ==========================================================================
    "Brand footer" custom styles

cfgov/unprocessed/apps/owning-a-home/css/brand-header.scss

@@ -1,4 +1,5 @@
 @use 'sass:math';
+@use '@cfpb/cfpb-design-system/src/abstracts' as *;
 
 // TODO: Remove this code when owning-a-home is migrated Wagtail.
 .brand-header {

cfgov/unprocessed/apps/owning-a-home/css/explore-rates.scss

@@ -1,4 +1,7 @@
 @use 'sass:math';
+@use './vars' as *;
+@use '@cfpb/cfpb-design-system/src/abstracts' as *;
+@use '@cfpb/cfpb-design-system/src/utilities' as *;
 
 /* ==========================================================================
    "Rate checker" custom styles
@@ -212,7 +215,7 @@
       (math.div(20px, $base-font-size-px) + em) 0;
 
     &.geolocating {
-      background: transparent url('#{$image-path}icon_spinner.gif') scroll
+      background: transparent url('#{$image-path}/icon_spinner.gif') scroll
         no-repeat center center;
       #chart {
         opacity: 0;

cfgov/unprocessed/apps/owning-a-home/css/helpers.scss

@@ -1,4 +1,5 @@
 @use 'sass:math';
+@use '@cfpb/cfpb-design-system/src/abstracts' as *;
 
 /* ==========================================================================
    Helper Classes & Styles

cfgov/unprocessed/apps/owning-a-home/css/main.scss

@@ -3,13 +3,9 @@
    Main Less file
    ========================================================================== */
 
-// Image path
-$image-path: '/static/apps/owning-a-home/img/';
-
-@import '../../../css/main';
-@import './brand-header';
-@import './brand-footer';
-@import './explore-rates';
-@import './helpers';
-@import './tab';
-@import './a-range';
+@use './brand-header';
+@use './brand-footer';
+@use './explore-rates';
+@use './helpers';
+@use './tab';
+@use './a-range';

cfgov/unprocessed/apps/owning-a-home/css/tab.scss

@@ -1,4 +1,5 @@
 @use 'sass:math';
+@use '@cfpb/cfpb-design-system/src/abstracts' as *;
 
 /* ==========================================================================
    "Tabs" custom styles

cfgov/unprocessed/apps/owning-a-home/css/vars.scss

@@ -0,0 +1,2 @@
+// Image path
+$image-path: '/static/apps/owning-a-home/img';

cfgov/unprocessed/apps/owning-a-home/js/explore-rates/Slider.js

@@ -1,5 +1,5 @@
 // Required modules.
-import { checkDom, setInitFlag } from '@cfpb/cfpb-atomic-component';
+import { checkDom, setInitFlag } from '@cfpb/cfpb-design-system/src/index.js';
 import rangesliderJs from 'rangeslider-js';
 
 const BASE_CLASS = 'a-range';

cfgov/unprocessed/apps/paying-for-college/css/cf-enhancements.scss

@@ -1,4 +1,5 @@
 @use 'sass:math';
+@use '@cfpb/cfpb-design-system/src/abstracts' as *;
 
 /* ==========================================================================
    Design System

cfgov/unprocessed/apps/paying-for-college/css/college-costs/charts.scss

@@ -1,4 +1,5 @@
 @use 'sass:math';
+@use '@cfpb/cfpb-design-system/src/abstracts' as *;
 
 .college-costs {
   &__tool-section--school-results {

cfgov/unprocessed/apps/paying-for-college/css/college-costs/college-costs.scss

@@ -1,5 +1,5 @@
 @use 'sass:math';
-@import 'cfpb-core';
+@use '@cfpb/cfpb-design-system/src/abstracts' as *;
 
 .college-costs {
   // remove border between sidebar and main content

cfgov/unprocessed/apps/paying-for-college/css/college-costs/financial-item.scss

@@ -1,4 +1,5 @@
 @use 'sass:math';
+@use '@cfpb/cfpb-design-system/src/abstracts' as *;
 
 .financial-item {
   margin-top: math.div(30px, $base-font-size-px) + em;

cfgov/unprocessed/apps/paying-for-college/css/college-costs/nav.scss

@@ -1,4 +1,5 @@
 @use 'sass:math';
+@use '@cfpb/cfpb-design-system/src/abstracts' as *;
 
 .o-college-costs-nav {
   // Tablet and below.

cfgov/unprocessed/apps/paying-for-college/css/college-costs/number-callout.scss

@@ -1,4 +1,5 @@
 @use 'sass:math';
+@use '@cfpb/cfpb-design-system/src/abstracts' as *;
 
 .number-callout {
   &__header {

cfgov/unprocessed/apps/paying-for-college/css/college-costs/search.scss

@@ -1,4 +1,5 @@
 @use 'sass:math';
+@use '@cfpb/cfpb-design-system/src/abstracts' as *;
 
 #college-costs_school-search {
   position: relative;

cfgov/unprocessed/apps/paying-for-college/css/college-costs/state-based.scss

@@ -1,3 +1,5 @@
+@use '@cfpb/cfpb-design-system/src/abstracts' as *;
+
 main.college-costs {
   .undergrad-content,
   .associates-content,

cfgov/unprocessed/apps/paying-for-college/css/disclosures.scss

@@ -1,4 +1,5 @@
 @use 'sass:math';
+@use '@cfpb/cfpb-design-system/src/abstracts' as *;
 
 /* ==========================================================================
    Global

cfgov/unprocessed/apps/paying-for-college/css/print.scss

@@ -1,3 +1,5 @@
+@use '@cfpb/cfpb-design-system/src/abstracts' as *;
+
 @include respond-to-print {
   body {
     font-family: 'Avenir Next', Arial, sans-serif;

cfgov/unprocessed/apps/paying-for-college/js/college-costs/CostsGroup.js

@@ -6,7 +6,7 @@ import {
   FlyoutMenu,
   MaxHeightTransition,
   EventObserver,
-} from '@cfpb/cfpb-atomic-component';
+} from '@cfpb/cfpb-design-system/src/index.js';
 
 const BASE_CLASS = 'o-costs-group';
 

cfgov/unprocessed/apps/prepaid-agreements/css/main.scss

@@ -1,4 +1,6 @@
 @use 'sass:math';
+@use '@cfpb/cfpb-design-system/src/abstracts' as *;
+
 @import '../../../css/main';
 @import './search';
 @import './search-bar';

cfgov/unprocessed/apps/prepaid-agreements/css/search-bar.scss

@@ -1,4 +1,5 @@
 @use 'sass:math';
+@use '@cfpb/cfpb-design-system/src/abstracts' as *;
 
 // The code is borrowed, with some modifications, from
 // ccdb5-ui's App.scss, SearchBar.scss, and select.scss

cfgov/unprocessed/apps/prepaid-agreements/css/search.scss

@@ -1,4 +1,5 @@
 @use 'sass:math';
+@use '@cfpb/cfpb-design-system/src/abstracts' as *;
 
 .search__wrapper {
   &.o-well {

cfgov/unprocessed/apps/prepaid-agreements/js/common.js

@@ -1,2 +1,2 @@
-import { ExpandableGroup } from '@cfpb/cfpb-expandables';
+import { ExpandableGroup } from '@cfpb/cfpb-design-system/src/index.js';
 ExpandableGroup.init();

cfgov/unprocessed/apps/regulations3k/css/main.scss

@@ -3,6 +3,8 @@
    Main Less file for Regulations pages
    ========================================================================== */
 
+@use '@cfpb/cfpb-design-system/src/utilities' as *;
+
 @import '../../../css/main';
 @import './reg-listing';
 @import './reg-landing-page';

cfgov/unprocessed/apps/regulations3k/css/reg-listing.scss

@@ -1,4 +1,5 @@
 @use 'sass:math';
+@use '@cfpb/cfpb-design-system/src/abstracts' as *;
 
 /* ==========================================================================
    Regulations 3000

cfgov/unprocessed/apps/regulations3k/css/reg-navigation.scss

@@ -1,4 +1,5 @@
 @use 'sass:math';
+@use '@cfpb/cfpb-design-system/src/abstracts' as *;
 
 /* ==========================================================================
    Regulations 3000

cfgov/unprocessed/apps/regulations3k/css/reg-search.scss

@@ -1,4 +1,5 @@
 @use 'sass:math';
+@use '@cfpb/cfpb-design-system/src/abstracts' as *;
 
 /* ==========================================================================
    Regulations 3000

cfgov/unprocessed/apps/regulations3k/css/reg-text.scss

@@ -1,4 +1,5 @@
 @use 'sass:math';
+@use '@cfpb/cfpb-design-system/src/abstracts' as *;
 
 /* ==========================================================================
    Regulations 3000

cfgov/unprocessed/apps/regulations3k/css/reg-wayfinder.scss

@@ -1,4 +1,5 @@
 @use 'sass:math';
+@use '@cfpb/cfpb-design-system/src/abstracts' as *;
 
 /* ==========================================================================
    Regulations 3000

cfgov/unprocessed/apps/regulations3k/js/index.js

@@ -1,5 +1,5 @@
 import { handleContentClick, handleNavClick } from './analytics.js';
-import { Expandable } from '@cfpb/cfpb-expandables';
+import { Expandable } from '@cfpb/cfpb-design-system/src/index.js';
 
 const navHeader = document.querySelector('.o-regs3k-navigation__header');
 const navItems = document.querySelector('.o-regs3k-sections');