@cfpb/cfpb-design-system 4.3.0 → 4.3.2

package/src/components/cfpb-buttons/button-link.scss

@@ -1,52 +1,8 @@
 @use 'sass:math';
 @use './vars.scss' as *;
-@use '@cfpb/cfpb-design-system/src/abstracts' as *;
+@use '@cfpb/cfpb-design-system/src/elements/abstracts' as *;
+@use '@cfpb/cfpb-design-system/src/elements/cfpb-button/cfpb-button-link' as *;
 
-//
-// Button link
-//
-
-/*
-Link text and underline.
-$v: Link link and visited color.
-$h: Link hover color.
-$f: Link focus color.
-$a: Link active color.
-*/
-@mixin u-btn-link-states($selector, $v, $h, $f, $a) {
-  #{$selector} {
-    &,
-    &:link,
-    &:visited {
-      text-decoration-color: $v;
-      background-color: transparent;
-      color: $v;
-    }
-
-    &:hover,
-    &.hover {
-      text-decoration-color: $h;
-      text-decoration-style: solid;
-      background-color: transparent;
-      color: $h;
-    }
-
-    &:focus,
-    &.focus {
-      background-color: transparent;
-      outline: 1px dotted $f;
-      color: $f;
-    }
-
-    &:active,
-    &.active {
-      text-decoration-color: $a;
-      text-decoration-style: solid;
-      background-color: transparent;
-      color: $a;
-    }
-  }
-}
 
 .a-btn--link {
   // Padding added so the focus rectangle falls below the underline.
@@ -70,10 +26,10 @@ $a: Link active color.
 
 @include u-btn-link-states(
   '.a-btn--link',
-  $link-text,
-  $link-text-hover,
-  $link-text,
-  $link-text-active
+  var(--link-text),
+  var(--link-text-hover),
+  var(--link-text),
+  var(--link-text-active)
 );
 
 //
@@ -89,8 +45,8 @@ $a: Link active color.
 
 @include u-btn-link-states(
   '.a-btn--link.a-btn--warning',
-  $btn-warning-bg,
-  $btn-warning-bg-hover,
-  $btn-warning-bg,
-  $btn-warning-bg-active
+  var(--btn-warning-bg),
+  var(--btn-warning-bg-hover),
+  var(--btn-warning-bg),
+  var(--btn-warning-bg-active)
 );

package/src/components/cfpb-buttons/button.scss

@@ -1,6 +1,6 @@
 @use 'sass:math';
 @use './vars.scss' as *;
-@use '@cfpb/cfpb-design-system/src/abstracts' as *;
+@use '@cfpb/cfpb-design-system/src/elements/abstracts' as *;
 
 //
 // Default button
@@ -13,7 +13,7 @@ input.a-btn::-moz-focus-inner {
   border: 0;
 }
 
-@mixin u-btn-divider() {
+@mixin legacy-u-btn-divider() {
   content: '';
   border-left: 1px solid $btn-divider;
   order: 2;
@@ -193,7 +193,7 @@ input.a-btn::-moz-focus-inner {
   // Handle button with icon divider logic.
   &:not(.a-btn--hide-icon):has(svg + span)::before,
   &:not(.a-btn--hide-icon):has(span + svg)::before {
-    @include u-btn-divider;
+    @include legacy-u-btn-divider;
   }
 
   // Handle different coloring in divider.

package/src/components/cfpb-buttons/vars.scss

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

package/src/components/cfpb-expandables/expandable-group.scss

@@ -1,6 +1,6 @@
 @use 'sass:math';
 @use './vars' as *;
-@use '@cfpb/cfpb-design-system/src/abstracts' as *;
+@use '@cfpb/cfpb-design-system/src/elements/abstracts' as *;
 
 /* ==========================================================================
    Design System

package/src/components/cfpb-expandables/expandable.scss

@@ -1,6 +1,6 @@
 @use 'sass:math';
 @use './vars' as *;
-@use '@cfpb/cfpb-design-system/src/abstracts' as *;
+@use '@cfpb/cfpb-design-system/src/elements/abstracts' as *;
 
 /* ==========================================================================
    Design System

package/src/components/cfpb-expandables/summary.scss

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

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

@@ -1,5 +1,5 @@
 @use 'sass:math';
-@use '@cfpb/cfpb-design-system/src/abstracts' as *;
+@use '@cfpb/cfpb-design-system/src/elements/abstracts' as *;
 
 .a-form-alert {
   --form-alert-icon-color: var(--form-alert-icon-color-default);

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

@@ -1,5 +1,5 @@
 @use 'sass:math';
-@use '@cfpb/cfpb-design-system/src/abstracts' as *;
+@use '@cfpb/cfpb-design-system/src/elements/abstracts' as *;
 @use '@cfpb/cfpb-design-system/src/utilities' as *;
 
 .m-form-field {
@@ -216,21 +216,21 @@
       box-sizing: border-box;
       width: 100%;
       padding: 15px;
-      background-color: $form-field-input-lg-target-bg;
+      background-color: var(--form-field-input-lg-target-bg);
     }
 
     .a-checkbox,
     .a-radio {
       &:checked + .a-label {
-        background-color: $form-field-input-lg-target-bg-selected;
-        box-shadow: inset 0 0 0 1px $form-field-input-lg-target-border;
+        background-color: var(--form-field-input-lg-target-bg-selected);
+        box-shadow: inset 0 0 0 1px var(--form-field-input-lg-target-border);
       }
 
       &:hover + .a-label,
       &.hover + .a-label,
       &:focus + .a-label,
       &.focus + .a-label {
-        box-shadow: inset 0 0 0 2px $form-field-input-lg-target-border;
+        box-shadow: inset 0 0 0 2px var(--form-field-input-lg-target-border);
       }
 
       &:focus + .a-label,
@@ -244,7 +244,7 @@
       &:hover:disabled + .a-label {
         color: var(--choice-label-disabled);
         box-shadow: none;
-        background-color: $form-field-input-lg-target-bg-disabled;
+        background-color: var(--form-field-input-lg-target-bg-disabled);
       }
 
       &:checked:disabled + .a-label {

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

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

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

@@ -1,11 +1,11 @@
 @use 'sass:math';
-@use '@cfpb/cfpb-design-system/src/abstracts' as *;
+@use '@cfpb/cfpb-design-system/src/elements/abstracts' as *;
 
 .a-label {
   display: inline-block;
 
   &__helper {
-    color: $label-helper;
+    color: var(--label-helper);
     font-size: math.div(16px, $base-font-size-px) + rem;
     font-weight: normal;
 

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

@@ -1,5 +1,5 @@
 @use 'sass:math';
-@use '@cfpb/cfpb-design-system/src/abstracts' as *;
+@use '@cfpb/cfpb-design-system/src/elements/abstracts' as *;
 
 // Initial and no-js state.
 select.o-multiselect {

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

@@ -1,11 +1,11 @@
 @use 'sass:math';
-@use '@cfpb/cfpb-design-system/src/abstracts' as *;
+@use '@cfpb/cfpb-design-system/src/elements/abstracts' as *;
 
 @mixin u-range-track-styles() {
   height: math.div(11px, $base-font-size-px) + rem;
   width: 100%;
-  background-color: $range-bg-track;
-  border: 1px solid $range-border;
+  background-color: var(--range-bg-track);
+  border: 1px solid var(--range-border);
   border-radius: 8px;
   cursor: pointer;
 }
@@ -15,15 +15,15 @@
   width: math.div(45px, $base-font-size-px) + rem;
   margin-top: math.div(-18px, $base-font-size-px) + rem;
   appearance: none;
-  border: 1px solid $range-border;
+  border: 1px solid var(--range-border);
   border-radius: 50%;
-  background-color: $range-bg;
+  background-color: var(--range-bg);
   cursor: pointer;
 }
 
 @mixin u-range-thumb-focus-styles() {
-  background-color: $range-bg-focused;
-  border: 2px solid $range-border-focused;
+  background-color: var(--range-bg-focused);
+  border: 2px solid var(--range-border-focused);
 }
 
 .a-range {

package/src/components/cfpb-forms/search-input.scss

@@ -1,5 +1,5 @@
 @use 'sass:math';
-@use '@cfpb/cfpb-design-system/src/abstracts' as *;
+@use '@cfpb/cfpb-design-system/src/elements/abstracts' as *;
 
 .o-search-input {
   display: flex;

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

@@ -1,5 +1,5 @@
 @use 'sass:math';
-@use '@cfpb/cfpb-design-system/src/abstracts' as *;
+@use '@cfpb/cfpb-design-system/src/elements/abstracts' as *;
 
 .a-select {
   --select-border: var(--select-border-default);

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

@@ -1,5 +1,5 @@
 @use 'sass:math';
-@use '@cfpb/cfpb-design-system/src/abstracts' as *;
+@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-typography/mixins' as *;
 

package/src/components/cfpb-forms/text-input.scss

@@ -1,5 +1,5 @@
 @use 'sass:math';
-@use '@cfpb/cfpb-design-system/src/abstracts' as *;
+@use '@cfpb/cfpb-design-system/src/elements/abstracts' as *;
 
 .a-text-input {
   // Theme variables.

package/src/components/cfpb-icons/icon.scss

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

package/src/components/cfpb-layout/card-group.scss

@@ -1,5 +1,5 @@
 @use 'sass:math';
-@use '@cfpb/cfpb-design-system/src/abstracts' as *;
+@use '@cfpb/cfpb-design-system/src/elements/abstracts' as *;
 
 // Grid-based "column" card group layouts.
 .o-card-group {

package/src/components/cfpb-layout/card.scss

@@ -1,5 +1,5 @@
 @use 'sass:math';
-@use '@cfpb/cfpb-design-system/src/abstracts' as *;
+@use '@cfpb/cfpb-design-system/src/elements/abstracts' as *;
 
 // $c = default state.
 // $v = `:visited` state.

package/src/components/cfpb-layout/email-signup.scss

@@ -1,5 +1,5 @@
 @use 'sass:math';
-@use '@cfpb/cfpb-design-system/src/abstracts' as *;
+@use '@cfpb/cfpb-design-system/src/elements/abstracts' as *;
 
 .o-email-signup {
   .m-notification {

package/src/components/cfpb-layout/featured-content-module.scss

@@ -1,5 +1,5 @@
 @use 'sass:math';
-@use '@cfpb/cfpb-design-system/src/abstracts' as *;
+@use '@cfpb/cfpb-design-system/src/elements/abstracts' as *;
 
 .o-featured-content-module {
   min-height: $fcm-min-height;

package/src/components/cfpb-layout/hero.scss

@@ -1,5 +1,5 @@
 @use 'sass:math';
-@use '@cfpb/cfpb-design-system/src/abstracts' as *;
+@use '@cfpb/cfpb-design-system/src/elements/abstracts' as *;
 
 // Hero variables
 $hero-desktop-height: 285px;

package/src/components/cfpb-layout/layout.scss

@@ -1,5 +1,5 @@
 @use 'sass:math';
-@use '@cfpb/cfpb-design-system/src/abstracts' as *;
+@use '@cfpb/cfpb-design-system/src/elements/abstracts' as *;
 
 /* ==========================================================================
    Design System
@@ -63,7 +63,7 @@
 
 .content__line {
   height: 1px;
-  background: $block-border;
+  background: var(--block-border);
 }
 
 //
@@ -125,7 +125,7 @@
         position: relative;
         &::after {
           content: '';
-          border-left: 1px solid $content-main-border;
+          border-left: 1px solid var(--content-main-border);
           position: absolute;
           top: math.div(($grid-gutter-width * 1.5), $base-font-size-px) + em;
           bottom: 0;
@@ -176,23 +176,23 @@
   margin-bottom: math.div($grid-gutter-width * 2, $base-font-size-px) + em;
 
   &--border-top {
-    border-top: 1px solid $block-border-top;
+    border-top: 1px solid var(--block-border-top);
   }
 
   &--border-right {
-    border-right: 1px solid $block-border-right;
+    border-right: 1px solid var(--block-border-right);
   }
 
   &--border-bottom {
-    border-bottom: 1px solid $block-border-bottom;
+    border-bottom: 1px solid var(--block-border-bottom);
   }
 
   &--border-left {
-    border-left: 1px solid $block-border-left;
+    border-left: 1px solid var(--block-border-left);
   }
 
   &--border {
-    border: 1px solid $block-border;
+    border: 1px solid var(--block-border);
   }
 
   &--flush-top {
@@ -268,7 +268,7 @@
     padding: math.div($grid-gutter-width, $base-font-size-px) + em
       math.div(math.div($grid-gutter-width, 2), $base-font-size-px) + em;
     padding-bottom: math.div($grid-gutter-width * 2, $base-font-size-px) + em;
-    background: $block-bg;
+    background: var(--block-bg);
 
     // Tablet and above.
     @include respond-to-min($bp-sm-min) {

package/src/components/cfpb-layout/well.scss

@@ -1,5 +1,5 @@
 @use 'sass:math';
-@use '@cfpb/cfpb-design-system/src/abstracts' as *;
+@use '@cfpb/cfpb-design-system/src/elements/abstracts' as *;
 
 .o-well {
   box-sizing: border-box;

package/src/components/cfpb-notifications/banner.scss

@@ -1,6 +1,6 @@
 @use 'sass:math';
 @use './vars.scss' as *;
-@use '@cfpb/cfpb-design-system/src/abstracts' as *;
+@use '@cfpb/cfpb-design-system/src/elements/abstracts' as *;
 @use '@cfpb/cfpb-design-system/src/utilities' as *;
 
 //

package/src/components/cfpb-notifications/notification.scss

@@ -1,6 +1,6 @@
 @use 'sass:math';
 @use './vars.scss' as *;
-@use '@cfpb/cfpb-design-system/src/abstracts' as *;
+@use '@cfpb/cfpb-design-system/src/elements/abstracts' as *;
 @use '@cfpb/cfpb-design-system/src/utilities' as *;
 
 //

package/src/components/cfpb-pagination/pagination.scss

@@ -1,6 +1,6 @@
 @use 'sass:math';
 @use './vars.scss' as *;
-@use '@cfpb/cfpb-design-system/src/abstracts' as *;
+@use '@cfpb/cfpb-design-system/src/elements/abstracts' as *;
 
 //
 // Pagination

package/src/components/cfpb-tables/table.scss

@@ -1,6 +1,6 @@
 @use 'sass:math';
 @use './vars' as *;
-@use '@cfpb/cfpb-design-system/src/abstracts' as *;
+@use '@cfpb/cfpb-design-system/src/elements/abstracts' as *;
 
 /* ==========================================================================
    Design System

package/src/components/cfpb-tooltips/tooltip.scss

@@ -1,5 +1,5 @@
 @use 'sass:math';
-@use '@cfpb/cfpb-design-system/src/abstracts' as *;
+@use '@cfpb/cfpb-design-system/src/elements/abstracts' as *;
 @use 'tippy.js/dist/tippy.css';
 @use 'tippy.js/dist/border.css';
 

package/src/components/cfpb-typography/date.scss

@@ -1,5 +1,5 @@
 @use './vars.scss' as *;
-@use '@cfpb/cfpb-design-system/src/abstracts' as *;
+@use '@cfpb/cfpb-design-system/src/elements/abstracts' as *;
 
 .a-date {
   color: $date;

package/src/components/cfpb-typography/list.scss

@@ -1,5 +1,5 @@
 @use 'sass:math';
-@use '@cfpb/cfpb-design-system/src/abstracts' as *;
+@use '@cfpb/cfpb-design-system/src/elements/abstracts' as *;
 
 //
 // Unstyled list modifier

package/src/components/cfpb-typography/meta-header.scss

@@ -1,5 +1,5 @@
 @use 'sass:math';
-@use '@cfpb/cfpb-design-system/src/abstracts' as *;
+@use '@cfpb/cfpb-design-system/src/elements/abstracts' as *;
 
 $meta-header-item-gap: 21px;
 

package/src/components/cfpb-typography/mixins.scss

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

package/src/components/cfpb-typography/pull-quote.scss

@@ -1,5 +1,5 @@
 @use './vars' as *;
-@use '@cfpb/cfpb-design-system/src/abstracts' as *;
+@use '@cfpb/cfpb-design-system/src/elements/abstracts' as *;
 
 .m-pull-quote {
   &__body {

package/src/components/cfpb-typography/slug-header.scss

@@ -1,6 +1,6 @@
 @use 'sass:math';
 @use './vars.scss' as *;
-@use '@cfpb/cfpb-design-system/src/abstracts' as *;
+@use '@cfpb/cfpb-design-system/src/elements/abstracts' as *;
 
 .m-slug-header {
   border-top: 1px solid $slug-header-border-thin;

package/src/components/cfpb-typography/tagline.scss

@@ -1,5 +1,5 @@
 @use 'sass:math';
-@use '@cfpb/cfpb-design-system/src/abstracts' as *;
+@use '@cfpb/cfpb-design-system/src/elements/abstracts' as *;
 
 .a-tagline {
   font-size: math.div(12px, $base-font-size-px) + rem;

package/src/elements/abstracts/custom-props.css

@@ -2,7 +2,7 @@
  * Do not edit directly, this file was auto-generated.
  */
 
-:host {
+:root {
   --beige: #bea96f;
   --beige-30: #f0e8d8;
   --beige-60: #d8c8a0;

package/src/elements/abstracts/sizing-vars.scss

@@ -28,6 +28,7 @@ $cf-icon-height: 1.1875em;
 
 $grid-wrapper-width: 1230px;
 $grid-total-columns: 12;
+$grid-gutter-width: 30px;
 
 // .a-select
 $select-height: 35px;
@@ -36,7 +37,7 @@ $select-height: 35px;
 $fcm-visual-width: 270px;
 $fcm-min-height: 220px;
 
-:host {
+:root {
 // Typography normalization
     --font-adjust-base: 0.517;
     --font-adjust-step: 0.0054;

package/src/elements/abstracts/vars.css

@@ -2,7 +2,7 @@
  * Do not edit directly, this file was auto-generated.
  */
 
-:host {
+:root {
   --block-bg: var(--gray-5);
   --block-border: var(--gray-40);
   --choice-bg-default: var(--white);

package/src/elements/base/font.scss

@@ -21,7 +21,7 @@
     }
 
     :root {
-      --font-stack: 'Source Sans 3 Variable', arial, sans-serif;
+      --font-stack: 'Source Sans 3 Variable', arial, sans-serif !important;
     }
   }
 }

package/src/elements/cfpb-button/cfpb-button-group.scss

@@ -1,10 +1,12 @@
 @use 'sass:math';
 @use '@cfpb/cfpb-design-system/src/elements/abstracts' as *;
 
-.m-btn-group {
-  display: flex;
-  gap: math.div(15px, $base-font-size-px) + rem;
-  flex-wrap: wrap;
-  align-items: center;
-  width: fit-content;
+:host {
+  .m-btn-group {
+    display: flex;
+    gap: math.div(15px, $base-font-size-px) + rem;
+    flex-wrap: wrap;
+    align-items: center;
+    width: fit-content;
+  }
 }