@cfpb/cfpb-design-system 4.2.4 → 4.3.1

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

@@ -0,0 +1,123 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+:root {
+  --beige: #bea96f;
+  --beige-30: #f0e8d8;
+  --beige-60: #d8c8a0;
+  --black: #101820;
+  --font-stack: system-ui, sans-serif;
+  --gold: #ff9e1b;
+  --gold-10: #fff6ec;
+  --gold-20: #fff0dd;
+  --gold-30: #ffe8cb;
+  --gold-40: #ffe1b9;
+  --gold-50: #ffd8a3;
+  --gold-60: #ffce8d;
+  --gold-70: #ffc372;
+  --gold-80: #ffb858;
+  --gold-90: #ffab39;
+  --gold-dark: #dc731c;
+  --gold-mid-dark: #ed881b;
+  --gray: #5a5d61;
+  --gray-10: #e7e8e9;
+  --gray-15: #dcdddf;
+  --gray-20: #d2d3d5;
+  --gray-30: #c3c4c4;
+  --gray-40: #b4b5b6;
+  --gray-5: #f7f8f9;
+  --gray-50: #a2a3a4;
+  --gray-60: #919395;
+  --gray-70: #838588;
+  --gray-80: #75787b;
+  --gray-90: #676a6f;
+  --gray-dark: #43484e;
+  --gray-darker: #293037;
+  --gray-mid-dark: #4f5257;
+  --green: #20aa3f;
+  --green-10: #f0f8eb;
+  --green-20: #e2efd8;
+  --green-30: #d4eac6;
+  --green-40: #c7e5b3;
+  --green-50: #bae0a2;
+  --green-60: #addc91;
+  --green-70: #93cf7c;
+  --green-80: #66c368;
+  --green-90: #48b753;
+  --green-dark: #1e9642;
+  --green-mid-dark: #1fa040;
+  --navy: #254b87;
+  --navy-10: #f4f6fa;
+  --navy-20: #d3daeb;
+  --navy-30: #c3cde2;
+  --navy-40: #b3c0d9;
+  --navy-50: #9daecc;
+  --navy-60: #889cc0;
+  --navy-70: #6f88b2;
+  --navy-80: #5674a3;
+  --navy-90: #3e5f95;
+  --navy-dark: #002d72;
+  --navy-mid-dark: #123c7c;
+  --neutral: #8a6c57;
+  --neutral-10: #f8f5f2;
+  --neutral-20: #e7ddd7;
+  --neutral-30: #ddd1c9;
+  --neutral-40: #d3c5bc;
+  --neutral-50: #c6b4a9;
+  --neutral-60: #baa496;
+  --neutral-70: #ad9484;
+  --neutral-80: #a18573;
+  --neutral-90: #957865;
+  --neutral-dark: #745745;
+  --neutral-mid-dark: #7d604b;
+  --pacific: #0072ce;
+  --pacific-10: #eff8fd;
+  --pacific-20: #d6e8fa;
+  --pacific-30: #c3ddf6;
+  --pacific-40: #afd2f2;
+  --pacific-50: #96c4ed;
+  --pacific-60: #7eb7e8;
+  --pacific-70: #61a7e2;
+  --pacific-80: #4497dc;
+  --pacific-90: #2284d5;
+  --pacific-dark: #0050b4;
+  --pacific-mid-dark: #0061c1;
+  --purple: #b4267a;
+  --purple-10: #fdf3f8;
+  --purple-20: #f0d8e2;
+  --purple-30: #ebc9d9;
+  --purple-40: #e3b2cc;
+  --purple-50: #dc9cbf;
+  --purple-60: #d486b2;
+  --purple-70: #cd70a5;
+  --purple-80: #c55998;
+  --purple-90: #be438b;
+  --purple-dark: #a01b68;
+  --purple-mid-dark: #aa2071;
+  --red: #d14124;
+  --red-10: #fbefec;
+  --red-20: #f7e0d9;
+  --red-30: #f3d1c8;
+  --red-40: #f0c3b8;
+  --red-50: #ebb0a3;
+  --red-60: #e79e8e;
+  --red-70: #e28875;
+  --red-80: #dd735d;
+  --red-90: #d75a40;
+  --red-dark: #b63014;
+  --red-mid-dark: #c3381c;
+  --teal: #257675;
+  --teal-10: #f0f7f6;
+  --teal-20: #d4e7e6;
+  --teal-30: #c4dddc;
+  --teal-40: #b4d2d1;
+  --teal-50: #9ec4c3;
+  --teal-60: #89b6b5;
+  --teal-70: #70a6a5;
+  --teal-80: #579695;
+  --teal-90: #3e8685;
+  --teal-dark: #005e5d;
+  --teal-mid-dark: #126b69;
+  --white: #ffffff;
+}

package/src/{abstracts → elements/abstracts}/grid-mixins.scss

@@ -1,5 +1,6 @@
 @use 'sass:math';
-@use './vars.scss' as *;
+@use './vars' as *;
+@use './sizing-vars' as *;
 
 /* ==========================================================================
    Design System

package/src/{abstracts → elements/abstracts}/heading-mixins.scss

@@ -2,6 +2,7 @@
 @use './vars' as *;
 @use './vars-breakpoints' as *;
 @use './media-queries' as *;
+@use './sizing-vars' as *;
 
 /* ==========================================================================
    Design System

package/src/{abstracts → elements/abstracts}/index.scss

@@ -4,3 +4,4 @@
 @forward 'grid-mixins';
 @forward 'heading-mixins';
 @forward 'media-queries';
+@forward 'sizing-vars';

package/src/{abstracts → elements/abstracts}/media-queries.scss

@@ -1,5 +1,5 @@
 @use 'sass:math';
-@use './vars' as *;
+@use './sizing-vars' as *;
 
 /* ==========================================================================
    Design System

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

@@ -0,0 +1,66 @@
+@use 'sass:math';
+
+//  Seperating sizing vars out because for now we are only doing JSON color tokens
+//  Putting these in a partial.  
+$base-font-size: 16;
+$base-font-size-px: 16px;
+$base-line-height-px: 22px;
+$base-line-height: math.div($base-line-height-px, $base-font-size-px);
+$btn-font-size: $base-font-size-px;
+$btn-border-radius-size: 4px;
+$btn-v-padding: 8px;
+$btn-h-padding: 14px;
+$size-xl: 48px; // Super-size
+$size-i: 34px; // h1-size
+$size-ii: 26px; // h2-size
+$size-iii: 22px; // h3-size
+$size-iv: 18px; // h4-size
+$size-v: 14px; // h5-size
+$size-vi: 12px; // h6-size
+$size-code: 13px; // Custom size only for Mono code blocks
+
+// Icons' SVG viewbox are a consistent 19px (h) x variable (w).
+// The height matches the 19px rendered canvas of text set in Source Sans 3
+// sized at 16px (19/16 = 1.1875).
+$cf-icon-height: 1.1875em;
+
+// Grid variables
+
+$grid-wrapper-width: 1230px;
+$grid-total-columns: 12;
+$grid-gutter-width: 30px;
+
+// .a-select
+$select-height: 35px;
+
+// Featured Content Module sizing variables.
+$fcm-visual-width: 270px;
+$fcm-min-height: 220px;
+
+:root {
+// Typography normalization
+    --font-adjust-base: 0.517;
+    --font-adjust-step: 0.0054;
+
+    /* Derived font-size-adjust-values */
+    --font-adjust-h1: calc(
+        var(--font-size-adjust-base) + (5 * var(--font-adjust-step))
+    );
+    --font-adjust-h2: calc(
+        var(--font-size-adjust-base) + (4 * var(--font-adjust-step))
+    );
+    --font-adjust-h3: calc(
+        var(--font-size-adjust-base) + (3 * var(--font-adjust-step))
+    );
+    --font-adjust-h4: calc(
+        var(--font-size-adjust-base) + (2 * var(--font-adjust-step))
+    );
+    --font-adjust-h5: calc(
+        var(--font-size-adjust-base) + (1 * var(--font-adjust-step))
+    );
+    --font-adjust-h6: var(--font-adjust-base);
+    --font-adjust-body: var(--font-adjust-base);
+
+    // .a-select
+    --select-border-width-default: 1px;
+}

package/src/elements/abstracts/vars.css

@@ -0,0 +1,79 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+:root {
+  --block-bg: var(--gray-5);
+  --block-border: var(--gray-40);
+  --choice-bg-default: var(--white);
+  --choice-bg-disabled: var(--gray-10);
+  --choice-bg-selected-default: var(--pacific);
+  --choice-bg-selected-disabled: var(--gray-40);
+  --choice-bg-selected-focus-default: var(--pacific);
+  --choice-border-default: var(--gray-60);
+  --choice-border-disabled: var(--gray-60);
+  --choice-border-error: var(--red);
+  --choice-border-focus-default: var(--pacific);
+  --choice-border-hover-default: var(--pacific);
+  --choice-border-success: var(--green);
+  --choice-border-warning: var(--gold);
+  --choice-label-disabled-default: var(--gray-dark);
+  --choice-outline-focus-default: var(--pacific);
+  --code-bg: var(--gray-5);
+  --content-main-border: var(--gray-40);
+  --form-alert-icon-color-default: var(--gray);
+  --form-alert-icon-color-error: var(--red);
+  --form-alert-icon-color-success: var(--green);
+  --form-alert-icon-color-warning: var(--gold);
+  --form-field-input-lg-target-bg: var(--gray-10);
+  --form-field-input-lg-target-bg-disabled: var(--gray-20);
+  --form-field-input-lg-target-bg-selected: var(--pacific-20);
+  --form-field-input-lg-target-border: var(--pacific);
+  --input-bg-default: var(--white);
+  --input-bg-disabled-default: var(--gray-10);
+  --input-border-default: var(--gray-60);
+  --input-border-disabled: var(--gray-60);
+  --input-border-error: var(--red);
+  --input-border-focus-default: var(--pacific);
+  --input-border-hover-default: var(--pacific);
+  --input-border-success: var(--green);
+  --input-border-warning: var(--gold);
+  --input-text-default: var(--black);
+  --input-text-disabled-default: var(--gray-dark);
+  --input-text-placeholder-default: var(--gray-dark);
+  --label-helper: var(--gray-dark);
+  --link-text: var(--pacific);
+  --link-text-active: var(--navy);
+  --link-text-hover: var(--pacific-dark);
+  --link-text-visited: var(--teal);
+  --link-underline: var(--pacific);
+  --link-underline-active: var(--navy);
+  --link-underline-hover: var(--pacific-dark);
+  --link-underline-visited: var(--teal);
+  --range-bg: var(--gray-10);
+  --range-bg-focused: var(--pacific-20);
+  --range-bg-track: var(--gray-80);
+  --range-border: var(--gray-40);
+  --range-border-focused: var(--pacific);
+  --select-bg-disabled-default: var(--gray-10);
+  --select-border-default: var(--gray-60);
+  --select-border-error: var(--red);
+  --select-border-focus-default: var(--pacific);
+  --select-border-hover-default: var(--pacific);
+  --select-icon-bg-default: var(--gray-10);
+  --select-text-disabled-default: var(--gray-dark);
+  --table-border: var(--gray);
+  --table-head-bg: var(--gray-5);
+  --tag-filter-bg-active-default: var(--teal-60);
+  --tag-filter-bg-default: var(--teal-20);
+  --tag-filter-bg-hover-default: var(--teal-40);
+  --tag-filter-border-default: var(--teal);
+  --tag-filter-outline-focuse-default: var(--teal-dark);
+  --text: var(--black); /** body */
+  --block-border-bottom: var(--block-border);
+  --block-border-left: var(--block-border);
+  --block-border-right: var(--block-border);
+  --block-border-top: var(--block-border);
+  --code-text: var(--text);
+  --table-head-text: var(--text);
+}

package/src/{base → elements/base}/base.scss

@@ -10,7 +10,7 @@
 // Type hierarchy
 //
 body {
-  color: $text;
+  color: var(--text);
   font-family: var(--font-stack);
   font-size: math.div($base-font-size, 16) * 100%;
   font-size-adjust: var(--font-adjust-body);
@@ -154,9 +154,9 @@ li {
 //
 
 a {
-  color: $link-text;
+  color: var(--link-text);
 
-  text-decoration-color: $link-underline;
+  text-decoration-color: var(--link-underline);
   text-decoration-line: underline;
   text-decoration-thickness: 1px;
   text-decoration-style: dotted;
@@ -167,15 +167,15 @@ a {
 
   &:visited,
   &.visited {
-    text-decoration-color: $link-underline-visited;
-    color: $link-text-visited;
+    text-decoration-color: var(--link-underline-visited);
+    color: var(--link-text-visited);
   }
 
   &:hover,
   &.hover {
     text-decoration-style: solid;
-    text-decoration-color: $link-underline-hover;
-    color: $link-text-hover;
+    text-decoration-color: var(--link-underline-hover);
+    color: var(--link-text-hover);
   }
 
   &:focus,
@@ -187,8 +187,8 @@ a {
   &:active,
   &.active {
     text-decoration-style: solid;
-    text-decoration-color: $link-underline-active;
-    color: $link-text-active;
+    text-decoration-color: var(--link-underline-active);
+    color: var(--link-text-active);
   }
 }
 
@@ -260,8 +260,8 @@ td {
   thead & {
     // 10px / 14px
     padding: math.div(10px, $size-v) + em;
-    background: $table-head-bg;
-    color: $table-head-text;
+    background: var(--table-head-bg);
+    color: var(--table-head-text);
     font-size: math.div(16px, $base-font-size-px) + em;
     vertical-align: top;
   }
@@ -269,7 +269,7 @@ td {
 
 thead,
 tbody tr {
-  border-bottom: 1px solid $table-border;
+  border-bottom: 1px solid var(--table-border);
 }
 
 th {
@@ -350,9 +350,9 @@ figure {
 
 pre,
 code {
-  background: $code-bg;
+  background: var(--code-bg);
   border-radius: 4px;
-  color: $code-text;
+  color: var(--code-text);
   font-family: 'Input Mono', Consolas, Monaco, 'Courier New', monospace;
 }
 

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

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

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

@@ -0,0 +1,103 @@
+@use 'sass:math';
+@use './vars' as *;
+@use '@cfpb/cfpb-design-system/src/elements/abstracts' as *;
+
+/*
+  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;
+      box-shadow: none; // Added by secondary variant.
+    }
+
+    &: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;
+    }
+  }
+}
+
+:host {
+  //
+  // Button link
+  //
+
+  .a-btn--link {
+    // Remove any border and background add by primary and secondary button.
+    box-shadow: none;
+    background-color: transparent;
+
+    // Padding added so the focus rectangle falls below the underline.
+    padding: 1.5px 0;
+    border-radius: 0;
+    text-decoration-line: underline;
+    text-decoration-thickness: 1px;
+    text-decoration-style: dotted;
+    text-underline-offset: 4.5px;
+
+    &:has(svg) {
+      // Button links should be closer to their icon.
+      gap: math.div(5px, $base-font-size-px) + rem;
+
+      // Button links shouldn't have a divider.
+      &::before {
+        display: none;
+      }
+    }
+  }
+
+  @include u-btn-link-states(
+    '.a-btn--link',
+    var(--link-text),
+    var(--link-text-hover),
+    var(--link-text),
+    var(--link-text-active)
+  );
+
+  //
+  // Secondary button link
+  //
+
+  // The .a-btn--link.a-btn--secondary combo shouldn't be used,
+  // so we provide no styles.
+
+  //
+  // Destructive action button link
+  //
+
+  @include u-btn-link-states(
+    '.a-btn--link.a-btn--warning',
+    var(--btn-warning-bg),
+    var(--btn-warning-bg-hover),
+    var(--btn-warning-bg),
+    var(--btn-warning-bg-active)
+  );
+}

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

@@ -1,7 +1,7 @@
-@use '@cfpb/cfpb-design-system/src/base' as *;
-@use '@cfpb/cfpb-design-system/src/abstracts' as *;
-@use '@cfpb/cfpb-design-system/src/components/cfpb-buttons/button' as *;
-@use '@cfpb/cfpb-design-system/src/components/cfpb-buttons/button-link' as *;
+@use '@cfpb/cfpb-design-system/src/elements/base' as *;
+@use '@cfpb/cfpb-design-system/src/elements/abstracts' as *;
+@use '@cfpb/cfpb-design-system/src/elements/cfpb-button/cfpb-button' as *;
+@use '@cfpb/cfpb-design-system/src/elements/cfpb-button/cfpb-button-link' as *;
 
 :host {
   // This prevents the child button from having an empty gap after the button.
@@ -13,10 +13,16 @@
   // Mobile only.
   @include respond-to-max($bp-xs-max) {
     width: 100%;
+
+    button,
+    [role='button'] {
+      width: 100%;
+    }
   }
 }
 
 :host([flush-left]) {
+  button,
   [role='button'] {
     border-top-left-radius: 0;
     border-bottom-left-radius: 0;
@@ -24,6 +30,7 @@
 }
 
 :host([flush-right]) {
+  button,
   [role='button'] {
     border-top-right-radius: 0;
     border-bottom-right-radius: 0;