@cfpb/cfpb-design-system 4.3.0 → 4.3.1

package/src/abstracts/heading-mixins.scss

@@ -1,345 +0,0 @@
-@use 'sass:math';
-@use './vars' as *;
-@use './vars-breakpoints' as *;
-@use './media-queries' 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/abstracts/index.scss

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

package/src/abstracts/media-queries.scss

@@ -1,35 +0,0 @@
-@use 'sass:math';
-@use './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/abstracts/vars-breakpoints.scss

@@ -1,16 +0,0 @@
-/* ==========================================================================
-   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;

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;