@cfpb/cfpb-design-system 4.2.3 → 4.3.0

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

@@ -0,0 +1,123 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+:host {
+  --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/elements/abstracts/grid-mixins.scss

@@ -0,0 +1,83 @@
+@use 'sass:math';
+@use './vars' as *;
+@use './sizing-vars' as *;
+
+/* ==========================================================================
+   Design System
+   Grid mixins
+   ========================================================================== */
+
+//
+// Wrapper
+//
+
+/* stylelint-disable selector-class-pattern */
+@mixin u-grid-wrapper($grid-wrapper-width: $grid-wrapper-width) {
+  /* stylelint-enable */
+  max-width: ($grid-wrapper-width - $grid-gutter-width);
+  padding-right: math.div($grid-gutter-width, 2);
+  padding-left: math.div($grid-gutter-width, 2);
+  margin: 0 auto;
+  clear: both;
+}
+
+//
+// Columns
+//
+
+/* stylelint-disable selector-class-pattern */
+@mixin u-grid-column($columns: 1, $total: $grid-total-columns) {
+  /* stylelint-enable */
+  display: inline-block;
+  box-sizing: border-box;
+
+  // To calculate the percentage width of the base element, we take the number of
+  // columns it'll span and divide by the total number of columns. As columns are
+  // specified as inline-block elements, standard columns require no further math.
+  //
+  //                      num cols used
+  //  column width in % = -------------
+  //                       total cols
+
+  width: math.percentage(math.div($columns, $total));
+
+  border: solid transparent;
+  border-width: 0 math.div($grid-gutter-width, 2);
+
+  // Remove whitespace caused by setting display to inline-block
+  margin-right: -0.25em;
+  vertical-align: top;
+}
+
+//
+// Push and Pull mixins for source ordering
+//
+
+/* stylelint-disable selector-class-pattern */
+@mixin u-grid-push($offset: 1, $grid-total-columns: $grid-total-columns) {
+  /* stylelint-enable */
+  $push: math.percentage(math.div($offset, $grid-total-columns));
+
+  position: relative;
+  left: $push;
+}
+
+/* stylelint-disable selector-class-pattern */
+@mixin u-grid-pull($offset: 1, $grid-total-columns: $grid-total-columns) {
+  /* stylelint-enable */
+  $pull: math.percentage(math.div($offset, $grid-total-columns));
+
+  position: relative;
+  right: $pull;
+}
+
+//
+// Nested columns
+//
+
+@mixin u-grid-nested-col-group() {
+  display: block;
+  position: relative;
+  margin-left: math.div($grid-gutter-width, 2) * -1;
+  margin-right: math.div($grid-gutter-width, 2) * -1;
+}

package/src/elements/abstracts/heading-mixins.scss

@@ -0,0 +1,346 @@
+@use 'sass:math';
+@use './vars' as *;
+@use './vars-breakpoints' as *;
+@use './media-queries' as *;
+@use './sizing-vars' as *;
+
+/* ==========================================================================
+   Design System
+   Base styles
+   ========================================================================== */
+
+@mixin heading-1(
+  $has-margin-bottom: true,
+  $has-margin-top: true,
+  $is-responsive: true
+) {
+  font-size: math.div($size-i, $base-font-size-px) + em;
+  font-size-adjust: var(--font-adjust-h1);
+  font-weight: 600;
+  letter-spacing: inherit;
+  line-height: 1.25;
+  text-transform: inherit;
+
+  @if $has-margin-bottom {
+    margin-bottom: math.div(15px, $size-i) + em;
+  }
+
+  @if $has-margin-top {
+    p + &,
+    ul + &,
+    ol + &,
+    dl + &,
+    figure + &,
+    img + &,
+    table + &,
+    blockquote + & {
+      margin-top: math.div(60px, $size-i) + em;
+    }
+
+    @if $is-responsive {
+      // Mobile only.
+      @include respond-to-max($bp-xs-max) {
+        p + &,
+        ul + &,
+        ol + &,
+        dl + &,
+        figure + &,
+        img + &,
+        table + &,
+        blockquote + & {
+          margin-top: math.div(45px, $size-ii) + em;
+        }
+        h2 + &,
+        .h2 + &,
+        h3 + &,
+        .h3 + &,
+        h4 + &,
+        .h4 + &,
+        h5 + &,
+        .h5 + &,
+        h6 + &,
+        .h6 + & {
+          margin-top: math.div(30px, $size-ii) + em;
+        }
+      }
+    }
+  }
+
+  @if $is-responsive {
+    // Mobile only.
+    @include respond-to-max($bp-xs-max) {
+      @include heading-2(
+        $has-margin-bottom,
+        $has-margin-top,
+        $is-responsive: false
+      );
+    }
+  }
+}
+
+@mixin heading-2(
+  $has-margin-bottom: true,
+  $has-margin-top: true,
+  $is-responsive: true,
+  $font-weight: 600
+) {
+  font-size: math.div($size-ii, $base-font-size-px) + em;
+  font-size-adjust: var(--font-adjust-h2);
+  font-weight: $font-weight;
+  letter-spacing: inherit;
+  line-height: 1.25;
+  text-transform: inherit;
+
+  @if $has-margin-bottom {
+    margin-bottom: math.div(15px, $size-ii) + em;
+  }
+
+  @if $has-margin-top {
+    p + &,
+    ul + &,
+    ol + &,
+    dl + &,
+    figure + &,
+    img + &,
+    table + &,
+    blockquote + & {
+      margin-top: math.div(45px, $size-ii) + em;
+    }
+
+    h1 + &,
+    .h1 + &,
+    h3 + &,
+    .h3 + &,
+    h4 + &,
+    .h4 + &,
+    h5 + &,
+    .h5 + &,
+    h6 + &,
+    .h6 + & {
+      margin-top: math.div(30px, $size-ii) + em;
+    }
+
+    @if $is-responsive {
+      // Mobile only.
+      @include respond-to-max($bp-xs-max) {
+        p + &,
+        ul + &,
+        ol + &,
+        dl + &,
+        figure + &,
+        img + &,
+        table + &,
+        blockquote + & {
+          margin-top: math.div(30px, $size-iii) + em;
+        }
+      }
+    }
+  }
+
+  @if $is-responsive {
+    // Mobile only.
+    @include respond-to-max($bp-xs-max) {
+      @include heading-3(
+        $has-margin-bottom,
+        $has-margin-top,
+        $is-responsive: false,
+        $font-weight: $font-weight
+      );
+    }
+  }
+}
+
+@mixin heading-3(
+  $has-margin-bottom: true,
+  $has-margin-top: true,
+  $is-responsive: true,
+  $font-weight: normal
+) {
+  font-size: math.div($size-iii, $base-font-size-px) + em;
+  font-size-adjust: var(--font-adjust-h3);
+  font-weight: $font-weight;
+  letter-spacing: inherit;
+  line-height: 1.25;
+  text-transform: inherit;
+
+  @if $has-margin-bottom {
+    margin-bottom: math.div(15px, $size-iii) + em;
+  }
+
+  @if $has-margin-top {
+    p + &,
+    ul + &,
+    ol + &,
+    dl + &,
+    figure + &,
+    img + &,
+    table + &,
+    blockquote + &,
+    h1 + &,
+    .h1 + &,
+    h2 + &,
+    .h2 + &,
+    h4 + &,
+    .h4 + &,
+    h5 + &,
+    .h5 + &,
+    h6 + &,
+    .h6 + & {
+      margin-top: math.div(30px, $size-iii) + em;
+    }
+  }
+
+  @if $is-responsive {
+    // Mobile only.
+    @include respond-to-max($bp-xs-max) {
+      @include heading-4(
+        $has-margin-bottom,
+        $has-margin-top,
+        $is-responsive: false,
+        $font-weight: $font-weight
+      );
+    }
+  }
+}
+
+@mixin heading-4(
+  $has-margin-bottom: true,
+  $has-margin-top: true,
+  $is-responsive: true,
+  $font-weight: 500
+) {
+  font-size: math.div($size-iv, $base-font-size-px) + em;
+  font-size-adjust: var(--font-adjust-h4);
+  font-weight: $font-weight;
+  letter-spacing: inherit;
+  line-height: 1.25;
+  text-transform: inherit;
+
+  @if $has-margin-bottom {
+    margin-bottom: math.div(15px, $size-iv) + em;
+  }
+
+  @if $has-margin-top {
+    p + &,
+    ul + &,
+    ol + &,
+    dl + &,
+    figure + &,
+    img + &,
+    table + &,
+    blockquote + &,
+    h1 + &,
+    .h1 + &,
+    h2 + &,
+    .h2 + &,
+    h3 + &,
+    .h3 + &,
+    h5 + &,
+    .h5 + &,
+    h6 + &,
+    .h6 + & {
+      margin-top: math.div(30px, $size-iv) + em;
+    }
+  }
+
+  @if $is-responsive {
+    // Mobile only.
+    @include respond-to-max($bp-xs-max) {
+      margin-bottom: math.div(10px, $base-font-size-px) + em;
+      font-size: 1em;
+      line-height: math.div(18px, $base-font-size-px);
+    }
+  }
+}
+
+@mixin heading-5($has-margin-bottom: true, $has-margin-top: true) {
+  font-size: math.div($size-v, $base-font-size-px) + em;
+  font-size-adjust: var(--font-adjust-h5);
+  font-weight: 600;
+  letter-spacing: 1px;
+  line-height: 1.25;
+  text-transform: uppercase;
+
+  @if $has-margin-bottom {
+    margin-bottom: math.div(15px, $size-v) + em;
+  }
+
+  @if $has-margin-top {
+    p + &,
+    ul + &,
+    ol + &,
+    dl + &,
+    figure + &,
+    img + &,
+    table + &,
+    blockquote + &,
+    h1 + &,
+    .h1 + &,
+    h2 + &,
+    .h2 + &,
+    h3 + &,
+    .h3 + &,
+    h4 + &,
+    .h4 + &,
+    h6 + &,
+    .h6 + & {
+      margin-top: math.div(30px, $size-v) + em;
+    }
+  }
+}
+
+@mixin heading-6($has-margin-bottom: true, $has-margin-top: true) {
+  font-size: math.div($size-vi, $base-font-size-px) + em;
+  font-size-adjust: var(--font-adjust-h6);
+  font-weight: 600;
+  letter-spacing: 1px;
+  line-height: 1.25;
+  text-transform: uppercase;
+
+  @if $has-margin-bottom {
+    margin-bottom: math.div(15px, $size-vi) + em;
+  }
+
+  @if $has-margin-top {
+    p + &,
+    ul + &,
+    ol + &,
+    dl + &,
+    figure + &,
+    img + &,
+    table + &,
+    blockquote + &,
+    h1 + &,
+    .h1 + &,
+    h2 + &,
+    .h2 + &,
+    h3 + &,
+    .h3 + &,
+    h4 + &,
+    .h4 + &,
+    h5 + &,
+    .h5 + & {
+      margin-top: math.div(30px, $size-vi) + em;
+    }
+  }
+}
+
+@mixin u-lead-paragraph() {
+  margin-top: 0;
+  margin-bottom: 15px;
+
+  @include heading-3(
+    $has-margin-bottom: false,
+    $has-margin-top: false,
+    $is-responsive: true,
+    $font-weight: normal
+  );
+}
+
+// For when you want a heading that's bigger than a normal H1.
+@mixin u-superheading() {
+  margin-bottom: math.div(20px, $size-xl) + em;
+  font-size: math.div($size-xl, $base-font-size-px) + em;
+  font-weight: normal;
+  line-height: 1.25;
+}

package/src/elements/abstracts/index.scss

@@ -0,0 +1,7 @@
+@forward 'custom-props';
+@forward 'vars';
+@forward 'vars-breakpoints';
+@forward 'grid-mixins';
+@forward 'heading-mixins';
+@forward 'media-queries';
+@forward 'sizing-vars';

package/src/elements/abstracts/media-queries.scss

@@ -0,0 +1,35 @@
+@use 'sass:math';
+@use './sizing-vars' as *;
+
+/* ==========================================================================
+   Design System
+   Media queries
+   ========================================================================== */
+
+//
+// Media query mixins
+//
+@mixin respond-to-min($bp) {
+  $ems: math.div($bp, $base-font-size-px) + em;
+
+  @media only screen and (min-width: $ems) {
+    @content;
+  }
+}
+
+@mixin respond-to-max($bp) {
+  $ems: math.div($bp, $base-font-size-px) + em;
+
+  @media only screen and (max-width: $ems) {
+    @content;
+  }
+}
+
+@mixin respond-to-range($bp1, $bp2) {
+  $ems1: math.div($bp1, $base-font-size-px) + em;
+  $ems2: math.div($bp2, $base-font-size-px) + em;
+
+  @media only screen and (min-width: $ems1) and (max-width: $ems2) {
+    @content;
+  }
+}

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

@@ -0,0 +1,65 @@
+@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;
+
+// .a-select
+$select-height: 35px;
+
+// Featured Content Module sizing variables.
+$fcm-visual-width: 270px;
+$fcm-min-height: 220px;
+
+:host {
+// 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-breakpoints.scss

@@ -0,0 +1,16 @@
+/* ==========================================================================
+   Design System
+   Breakpoint variables.
+
+   NOTE: If any of the values in this file are adjusted,
+         they need to be adjusted in vars-breakpoints.js as well.
+   ========================================================================== */
+
+$bp-xs-max: 600px;
+$bp-sm-min: $bp-xs-max + 1px;
+$bp-sm-max: 900px;
+$bp-med-min: $bp-sm-max + 1px;
+$bp-med-max: 1020px;
+$bp-lg-min: $bp-med-max + 1px;
+$bp-lg-max: 1230px;
+$bp-xl-min: $bp-lg-max + 1px;