@cfpb/cfpb-design-system 4.2.4 → 4.3.1

package/src/abstracts/custom-props.scss

@@ -1,175 +0,0 @@
-@mixin define-custom-props() {
-  :root {
-    // Default font variable.
-    --font-stack: system-ui, sans-serif;
-
-    /* ==========================================================================
-   Design System
-   Color variables
-   ========================================================================== */
-
-    // Official CFPB color palette.
-    // Current as of November 20, 2020.
-    // To view the colors in the Design System, visit:
-    // https://cfpb.github.io/design-system/foundation/color
-    //
-    //           | Beige  | Green  | Teal   | Pacific | Navy   | Purple | Red    | Gold   | Neutral | Gray   |
-    //           | ------ | ------ | ------ | ------- | ------ | ------ | ------ | ------ | ------- | ------ |
-    // darker    |        |        |        |         |        |        |        |        |         | 293037 |
-    // dark      |        | 1e9642 | 005e5d | 0050b4  | 002d72 | a01b68 | b63014 | dc731c | 745745  | 43484e |
-    // mid-dark  |        | 1fa040 | 126b69 | 0061c1  | 123c7c | aa2071 | c3381c | ed881b | 7d604b  | 4f5257 |
-    // base      | bea96f | 20aa3f | 257675 | 0072ce  | 254b87 | b4267a | d14124 | ff9e1b | 8a6c57  | 5a5d61 |
-    //   90      |        | 48b753 | 3e8685 | 2284d5  | 3e5f95 | be438b | d75a40 | ffab39 | 957865  | 676a6f |
-    //   80      |        | 66c368 | 579695 | 4497dc  | 5674a3 | c55998 | dd735d | ffb858 | a18573  | 75787b |
-    //   70      |        | 93cf7c | 70a6a5 | 61a7e2  | 6f88b2 | cd70a5 | e28875 | ffc372 | ad9484  | 838588 |
-    //   60      | d8c8a0 | addc91 | 89b6b5 | 7eb7e8  | 889cc0 | d486b2 | e79e8e | ffce8d | baa496  | 919395 |
-    //   50      |        | bae0a2 | 9ec4c3 | 96c4ed  | 9daecc | dc9cbf | ebb0a3 | ffd8a3 | c6b4a9  | a2a3a4 |
-    //   40      |        | c7e5b3 | b4d2d1 | afd2f2  | b3c0d9 | e3b2cc | f0c3b8 | ffe1b9 | d3c5bc  | b4b5b6 |
-    //   30      | f0e8d8 | d4eac6 | c4dddc | c3ddf6  | c3cde2 | ebc9d9 | f3d1c8 | ffe8cb | ddd1c9  | c3c4c4 |
-    //   20      |        | e2efd8 | d4e7e6 | d6e8fa  | d3daeb | f0d8e2 | f7e0d9 | fff0dd | e7ddd7  | d2d3d5 |
-    //   15      |        |        |        |         |        |        |        |        |         | dcdddf |
-    //   10      |        | f0f8eb | f0f7f6 | eff8fd  | f4f6fa | fdf3f8 | fbefec | fff6ec | f8f5f2  | e7e8e9 |
-    //    5      |        |        |        |         |        |        |        |        |         | f7f8f9 |
-    //
-    // CFPB Black: 101820
-    // CFPB White: ffffff
-
-    // Beige family
-    --beige: #bea96f;
-    --beige-30: #f0e8d8;
-    --beige-60: #d8c8a0;
-
-    // Green family
-    --green-dark: #1e9642;
-    --green-mid-dark: #1fa040;
-    --green: #20aa3f; // Primary brand green color, aka "CFPB Green"
-    --green-90: #48b753;
-    --green-80: #66c368;
-    --green-70: #93cf7c;
-    --green-60: #addc91;
-    --green-50: #bae0a2;
-    --green-40: #c7e5b3;
-    --green-30: #d4eac6;
-    --green-20: #e2efd8;
-    --green-10: #f0f8eb;
-
-    // Teal family
-    --teal-dark: #005e5d;
-    --teal-mid-dark: #126b69;
-    --teal: #257675;
-    --teal-90: #3e8685;
-    --teal-80: #579695;
-    --teal-70: #70a6a5;
-    --teal-60: #89b6b5;
-    --teal-50: #9ec4c3;
-    --teal-40: #b4d2d1;
-    --teal-30: #c4dddc;
-    --teal-20: #d4e7e6;
-    --teal-10: #f0f7f6;
-
-    // Pacific family
-    --pacific-dark: #0050b4;
-    --pacific-mid-dark: #0061c1;
-    --pacific: #0072ce;
-    --pacific-90: #2284d5;
-    --pacific-80: #4497dc;
-    --pacific-70: #61a7e2;
-    --pacific-60: #7eb7e8;
-    --pacific-50: #96c4ed;
-    --pacific-40: #afd2f2;
-    --pacific-30: #c3ddf6;
-    --pacific-20: #d6e8fa;
-    --pacific-10: #eff8fd;
-
-    // Navy family
-    --navy-dark: #002d72;
-    --navy-mid-dark: #123c7c;
-    --navy: #254b87;
-    --navy-90: #3e5f95;
-    --navy-80: #5674a3;
-    --navy-70: #6f88b2;
-    --navy-60: #889cc0;
-    --navy-50: #9daecc;
-    --navy-40: #b3c0d9;
-    --navy-30: #c3cde2;
-    --navy-20: #d3daeb;
-    --navy-10: #f4f6fa;
-
-    // Purple family
-    --purple-dark: #a01b68;
-    --purple-mid-dark: #aa2071;
-    --purple: #b4267a;
-    --purple-90: #be438b;
-    --purple-80: #c55998;
-    --purple-70: #cd70a5;
-    --purple-60: #d486b2;
-    --purple-50: #dc9cbf;
-    --purple-40: #e3b2cc;
-    --purple-30: #ebc9d9;
-    --purple-20: #f0d8e2;
-    --purple-10: #fdf3f8;
-
-    // Red family
-    --red-dark: #b63014;
-    --red-mid-dark: #c3381c;
-    --red: #d14124;
-    --red-90: #d75a40;
-    --red-80: #dd735d;
-    --red-70: #e28875;
-    --red-60: #e79e8e;
-    --red-50: #ebb0a3;
-    --red-40: #f0c3b8;
-    --red-30: #f3d1c8;
-    --red-20: #f7e0d9;
-    --red-10: #fbefec;
-
-    // Gold family
-    --gold-dark: #dc731c;
-    --gold-mid-dark: #ed881b;
-    --gold: #ff9e1b;
-    --gold-90: #ffab39;
-    --gold-80: #ffb858;
-    --gold-70: #ffc372;
-    --gold-60: #ffce8d;
-    --gold-50: #ffd8a3;
-    --gold-40: #ffe1b9;
-    --gold-30: #ffe8cb;
-    --gold-20: #fff0dd;
-    --gold-10: #fff6ec;
-
-    // Neutral family
-    --neutral-dark: #745745;
-    --neutral-mid-dark: #7d604b;
-    --neutral: #8a6c57;
-    --neutral-90: #957865;
-    --neutral-80: #a18573;
-    --neutral-70: #ad9484;
-    --neutral-60: #baa496;
-    --neutral-50: #c6b4a9;
-    --neutral-40: #d3c5bc;
-    --neutral-30: #ddd1c9;
-    --neutral-20: #e7ddd7;
-    --neutral-10: #f8f5f2;
-
-    // Gray family
-    --gray-darker: #293037;
-    --gray-dark: #43484e;
-    --gray-mid-dark: #4f5257;
-    --gray: #5a5d61;
-    --gray-90: #676a6f;
-    --gray-80: #75787b;
-    --gray-70: #838588;
-    --gray-60: #919395;
-    --gray-50: #a2a3a4;
-    --gray-40: #b4b5b6;
-    --gray-30: #c3c4c4;
-    --gray-20: #d2d3d5;
-    --gray-15: #dcdddf;
-    --gray-10: #e7e8e9;
-    --gray-5: #f7f8f9;
-
-    // …with special guests.
-    --black: #101820; // Also known as "CFPB Black"
-    --white: #fff;
-  }
-}

package/src/abstracts/vars.scss

@@ -1,184 +0,0 @@
-@use 'sass:math';
-
-/* ==========================================================================
-   Design System
-   Variables
-   ========================================================================== */
-
-//
-// Theme variables
-//
-
-// Color variables
-
-// body
-$text: var(--black);
-
-// a
-$link-text: var(--pacific);
-$link-underline: var(--pacific);
-$link-text-visited: var(--teal);
-$link-underline-visited: var(--teal);
-$link-text-hover: var(--pacific-dark);
-$link-underline-hover: var(--pacific-dark);
-$link-text-active: var(--navy);
-$link-underline-active: var(--navy);
-
-// table
-$table-head-text: $text;
-$table-head-bg: var(--gray-5);
-$table-border: var(--gray);
-
-// code
-$code-text: $text;
-$code-bg: var(--gray-5);
-
-// Sizing variables
-
-$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);
-$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
-
-// Icon variables
-
-// 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;
-
-// Button sizing variables
-
-$btn-font-size: $base-font-size-px;
-$btn-border-radius-size: 4px;
-$btn-v-padding: 8px;
-$btn-h-padding: 14px;
-
-// Grid variables
-
-$grid-wrapper-width: 1230px;
-$grid-gutter-width: 30px;
-$grid-total-columns: 12;
-
-// Layout variables
-
-// .block
-$block-bg: var(--gray-5);
-$block-border: var(--gray-40);
-$block-border-top: $block-border;
-$block-border-right: $block-border;
-$block-border-bottom: $block-border;
-$block-border-left: $block-border;
-
-// .content__main
-$content-main-border: var(--gray-40);
-
-: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);
-
-  // 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;
-  --select-border-hover-default: var(--pacific); // $input-border-hover
-  --select-border-focus-default: var(--pacific); // $input-border-focused
-  --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--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);
-$form-field-input-lg-target-bg-selected: var(--pacific-20);
-$form-field-input-lg-target-bg-disabled: var(--gray-20);
-$form-field-input-lg-target-border: var(--pacific);
-
-// .a-label__helper
-$label-helper: var(--gray-dark);
-
-// .a-range borders
-$range-border: var(--gray-40);
-$range-border-focused: var(--pacific);
-
-// .a-range backgrounds
-$range-bg: var(--gray-10);
-$range-bg-track: var(--gray-80);
-$range-bg-focused: var(--pacific-20);
-
-// Sizing variables
-
-// .a-select
-$select-height: 35px;
-
-// Featured Content Module sizing variables.
-$fcm-visual-width: 270px;
-$fcm-min-height: 220px;

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

@@ -1,225 +0,0 @@
-@use 'sass:math';
-@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/vars' as *;
-
-:host {
-  // Theme variables.
-  --select-input-border: var(--gray-60);
-  --select-input-border-hover: var(--pacific);
-  --select-input-border-focus: var(--pacific);
-  --select-input-bg: var(--white);
-  --select-input-text: var(--black);
-
-  // Initial and no-js state.
-  select.o-multiselect {
-    display: block;
-    box-sizing: border-box;
-    width: 100%;
-    padding: math.div(7px, $base-font-size-px) + em;
-
-    // Fixed height breaks the bottom border
-    // mid-character to indicate there's more content.
-    height: 5.5em;
-    padding-top: math.div(4px, $base-font-size-px) + em;
-    padding-bottom: math.div(4px, $base-font-size-px) + em;
-    border: 1px solid var(--select-border-default);
-
-    option {
-      padding: math.div(2px, $base-font-size-px) + em
-        math.div(6px, $base-font-size-px) + em;
-    }
-  }
-
-  .o-multiselect {
-    position: relative;
-
-    & header {
-      position: relative;
-
-      &::after {
-        // Arrow box width must be odd size to properly center the bg image
-        width: math.div($select-height, $base-font-size-px) + em;
-        box-sizing: border-box;
-        border: 1px solid var(--select-border-default);
-        position: absolute;
-        top: 0;
-        right: 0;
-        bottom: 0;
-        background-color: var(--select-icon-bg-default);
-
-        --cfpb-background-icon-svg: 'down';
-
-        background-size: auto $cf-icon-height;
-        background-repeat: no-repeat;
-        background-position: center center;
-        content: '';
-        pointer-events: none;
-      }
-    }
-
-    & input[type='text'] {
-      width: 100%;
-      min-height: 35px;
-
-      // Reset the browser's default styling.
-      appearance: none;
-      display: inline-block;
-      padding: math.div(7px, $base-font-size-px) + em;
-      border: 1px solid var(--select-input-border);
-      outline: 0 solid var(--select-input-border);
-      background: var(--select-input-bg);
-      color: var(--select-input-text);
-      box-sizing: border-box;
-
-      &:hover,
-      &.hover {
-        border-color: var(--select-input-border-hover);
-        outline: 1px solid var(--select-input-border-hover);
-      }
-
-      &:focus,
-      &.focus {
-        border-color: var(--select-input-border-focus);
-        box-shadow: 0 0 0 1px var(--select-input-border-focus);
-        outline: 1px dotted var(--select-input-border-focus);
-        outline-offset: 2px;
-      }
-    }
-
-    & fieldset {
-      // Resets
-      border-color: var(--select-border-default);
-      border-top: none;
-      margin: 0;
-      padding: 0;
-
-      // Styles
-      box-sizing: border-box;
-      overflow-x: hidden;
-      overflow-y: scroll;
-      position: absolute;
-      z-index: 10;
-
-      max-height: 0;
-      margin-top: -1px;
-      width: 100%;
-
-      transition: max-height 0.25s ease-out;
-    }
-
-    &.u-active {
-      fieldset {
-        margin-top: 0;
-
-        // This needs to match the value set in _bindEvents in Multiselect.js.
-        // See https://github.com/cfpb/design-system/blob/4d26d5af04317bcc00b4677aa866fe8d526e82e0/packages/cfpb-forms/src/organisms/Multiselect.js#L340
-        max-height: 140px;
-
-        border-color: var(--pacific);
-        border-width: 2px;
-        border-top: 0;
-      }
-
-      // Reverse arrow when search drop-down is open.
-      header::after {
-        --cfpb-background-icon-svg: 'up';
-      }
-    }
-
-    & ul {
-      list-style-type: none;
-      background-color: var(--white);
-      padding: 0;
-      padding-top: math.div(5px, $base-font-size-px) + em;
-      padding-bottom: math.div(5px, $base-font-size-px) + em;
-
-      li {
-        margin: 0;
-      }
-
-      li:first-child {
-        .a-label {
-          padding-top: math.div(10px, $base-font-size-px) + em;
-        }
-      }
-
-      &.u-filtered li:not(.u-filter-match) {
-        display: none;
-      }
-
-      &.u-no-results,
-      &.u-max-selections {
-        padding: math.div(10px, $base-font-size-px) + em;
-        li {
-          display: none;
-        }
-
-        &::after {
-          display: list-item;
-        }
-      }
-
-      &.u-no-results::after {
-        content: 'No results found';
-      }
-
-      &.u-max-selections {
-        pointer-events: none;
-
-        &::after {
-          content: 'Reached maximum number of selections';
-        }
-      }
-    }
-  }
-
-  .u-invisible {
-    visibility: hidden;
-  }
-
-  /* button {
-    // Filter tags appear in filtered contexts, often as part of multiselects.
-    line-height: math.div(19px, $base-font-size-px);
-
-    display: flex;
-    gap: math.div(10px, $btn-font-size) + rem;
-
-    border: 1px solid var(--teal);
-    padding: 4px 6px;
-    background-color: var(--teal-20);
-    border-radius: math.div(3px, $base-font-size-px) + rem;
-    color: var(--black);
-    text-align: left;
-    min-width: fit-content;
-
-    &:hover {
-      background-color: var(--teal-40);
-      cursor: pointer;
-    }
-
-    &:focus {
-      outline: 1px dotted var(--teal);
-      outline-offset: 1px;
-    }
-
-    &:active {
-      background-color: var(--teal-60);
-    }
-  }
-
-  svg {
-    pointer-events: none;
-
-    // Prevent flexbox from squishing icon when tag text is long.
-    flex: none;
-
-    height: 1rem;
-  }
-
-  // If the contents are wrapped in a label, negate the label's display.
-  label {
-    display: contents;
-    pointer-events: none;
-  } */
-}