@cfpb/cfpb-design-system 4.2.3 → 4.3.0

package/src/elements/abstracts/vars.css

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

@@ -0,0 +1,375 @@
+@use 'sass:math';
+@use '../abstracts' as *;
+
+/* ==========================================================================
+   Design System
+   Base styles
+   ========================================================================== */
+
+//
+// Type hierarchy
+//
+body {
+  color: var(--text);
+  font-family: var(--font-stack);
+  font-size: math.div($base-font-size, 16) * 100%;
+  font-size-adjust: var(--font-adjust-body);
+  line-height: $base-line-height;
+  -webkit-font-smoothing: antialiased;
+}
+
+button,
+input,
+select,
+textarea {
+  // Must set these explicitly to override Normalize.css's provided default
+  // of `font-family: sans-serif;`
+  font-family: var(--font-stack);
+
+  // Characters in some languages, like Chinese, have a larger x-height,
+  // which will make the button taller than the input.
+  // Fix that by setting the line height on the button and the input.
+  line-height: math.div(19px, $base-font-size-px);
+  font-size-adjust: var(--font-adjust-body);
+}
+
+/*
+ * On iOS Safari the input is collapsed till it's clicked.
+ * This sets the default min width and height to what it would be if the
+ * appearance was a textfield.
+ */
+input[type='date'] {
+  display: revert;
+  min-width: 100px;
+  min-height: 35px;
+  padding-top: 0;
+  padding-bottom: 0;
+
+  &.a-text-input--full {
+    min-width: 100%;
+  }
+}
+
+// Globally remove inset border style from HR elements.
+hr {
+  border: none;
+  border-top: 1px solid var(--gray-40);
+}
+
+strong,
+b {
+  font-weight: 600;
+}
+
+// Resetting default browser styling for margin-top on headings
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  margin-top: 0;
+}
+
+h1,
+.h1 {
+  @include heading-1;
+}
+
+h2,
+.h2 {
+  @include heading-2;
+}
+
+h3,
+.h3 {
+  @include heading-3;
+}
+
+h4,
+.h4 {
+  @include heading-4;
+}
+
+h5,
+.h5 {
+  @include heading-5;
+}
+
+h6,
+.h6 {
+  @include heading-6;
+}
+
+.lead-paragraph {
+  @include u-lead-paragraph;
+}
+
+.superheading {
+  @include u-superheading;
+}
+
+//
+// Body copy element vertical margins
+//
+
+p,
+ul,
+ol,
+dl,
+figure,
+table,
+blockquote {
+  margin-top: 0;
+  margin-bottom: math.div(15px, $base-font-size-px) + em;
+
+  &:last-child {
+    margin-bottom: 0;
+  }
+}
+
+p + ul,
+p + ol {
+  margin-top: math.div(-5px, $base-font-size-px) + em;
+}
+
+ul ul,
+ol ol,
+ul ol,
+ol ul {
+  margin-top: math.div(8px, $base-font-size-px) + em;
+}
+
+li {
+  margin-bottom: math.div(8px, $base-font-size-px) + em;
+
+  &:last-child,
+  nav & {
+    margin-bottom: 0;
+  }
+}
+
+//
+// Default link
+//
+
+a {
+  color: var(--link-text);
+
+  text-decoration-color: var(--link-underline);
+  text-decoration-line: underline;
+  text-decoration-thickness: 1px;
+  text-decoration-style: dotted;
+  text-underline-offset: 4.5px;
+
+  // Note: The class definitions below are only for use in
+  // demonstrating link states. Do not use in production.
+
+  &:visited,
+  &.visited {
+    text-decoration-color: var(--link-underline-visited);
+    color: var(--link-text-visited);
+  }
+
+  &:hover,
+  &.hover {
+    text-decoration-style: solid;
+    text-decoration-color: var(--link-underline-hover);
+    color: var(--link-text-hover);
+  }
+
+  &:focus,
+  &.focus {
+    outline: thin dotted;
+    outline-offset: 1px;
+  }
+
+  &:active,
+  &.active {
+    text-decoration-style: solid;
+    text-decoration-color: var(--link-underline-active);
+    color: var(--link-text-active);
+  }
+}
+
+nav a {
+  // Don't show underlines if they're part of a nav list.
+  text-decoration-line: none;
+}
+
+//
+// Lists
+//
+
+ul {
+  padding-left: math.div(18px, $base-font-size-px) + em;
+  list-style: square;
+}
+
+ul ul {
+  list-style-type: circle;
+}
+
+ol {
+  // Slightly larger than necessary, but this is the minimum value
+  // for numbers to not be partially in the margin in Internet Explorer.
+  padding-left: math.div(21px, $base-font-size-px) + em;
+
+  li:nth-last-child(n + 10),
+  li:nth-last-child(n + 10) ~ li {
+    // 0.5625rem
+    margin-left: math.div(9px, $base-font-size-px) + rem;
+  }
+}
+
+ol ol {
+  list-style-type: lower-alpha;
+
+  // Negate margin added to lists longer than 9 items.
+  li {
+    margin-left: 0 !important;
+  }
+}
+
+ol ol ol {
+  list-style-type: lower-roman;
+}
+
+// Lists in the nav should be unstyled
+nav ul,
+nav ol,
+nav ul ul,
+nav ol ol {
+  list-style: none;
+  list-style-image: none;
+}
+
+//
+// Tables
+//
+
+caption {
+  margin-bottom: math.div(10px, $base-font-size-px) + em;
+  text-align: left;
+}
+
+th,
+td {
+  padding: math.div(10px, $base-font-size-px) + em;
+
+  thead & {
+    // 10px / 14px
+    padding: math.div(10px, $size-v) + em;
+    background: var(--table-head-bg);
+    color: var(--table-head-text);
+    font-size: math.div(16px, $base-font-size-px) + em;
+    vertical-align: top;
+  }
+}
+
+thead,
+tbody tr {
+  border-bottom: 1px solid var(--table-border);
+}
+
+th {
+  font-weight: 600;
+  text-align: left;
+
+  thead & {
+    // Heading elements may at times appear inside `th` elements
+    // as required for navigating the page's content with screenreaders.
+    // These rules prevent those headings from overriding the desired style
+    // of their parent `th` elements.
+    h2,
+    .h2,
+    h3,
+    .h3,
+    h4,
+    .h4,
+    h5,
+    .h5,
+    h6,
+    .h6 {
+      margin: 0;
+      font-size: inherit;
+      font-weight: inherit;
+      letter-spacing: inherit;
+      line-height: inherit;
+      text-transform: inherit;
+    }
+  }
+}
+
+//
+// Block quote
+//
+
+blockquote {
+  margin-right: math.div(15px, $base-font-size-px) + em;
+  margin-left: math.div(15px, $base-font-size-px) + em;
+
+  // Tablet and above.
+  @include respond-to-min($bp-sm-min) {
+    margin-right: math.div(30px, $base-font-size-px) + em;
+    margin-left: math.div(30px, $base-font-size-px) + em;
+  }
+}
+
+//
+// Form elements have been moved to the @cfpb/cfpb-forms component.
+//
+
+//
+// Images
+//
+
+img {
+  max-width: 100%;
+}
+
+//
+// Figure
+//
+
+figure {
+  // reset browser default side margins
+  margin-right: 0;
+  margin-left: 0;
+
+  img {
+    // Removes weird vertical spacing below images.
+    // TODO: Discuss whether this could just be universally applied to img
+    vertical-align: middle;
+  }
+}
+
+//
+// Code blocks
+//
+
+pre,
+code {
+  background: var(--code-bg);
+  border-radius: 4px;
+  color: var(--code-text);
+  font-family: 'Input Mono', Consolas, Monaco, 'Courier New', monospace;
+}
+
+code {
+  padding: math.div(3px, $size-code) + em math.div(3px, $size-code) + em 0;
+  font-size: math.div($size-code, $base-font-size-px) + em;
+}
+
+pre {
+  display: block;
+  padding: math.div(10px, $base-font-size-px) + em
+    math.div(15px, $base-font-size-px) + em;
+  white-space: pre-wrap;
+  overflow-wrap: break-word;
+
+  code {
+    padding: 0;
+    background-color: transparent;
+  }
+}

package/src/elements/base/font.scss

@@ -0,0 +1,27 @@
+@mixin licensed-font($path: '/static/fonts') {
+  /* ==========================================================================
+   Design System
+   Licensed font URLs – for CFPB use only.
+   ========================================================================== */
+
+  @if $path {
+    // Refer to https://fontsource.org/fonts/source-sans-3/install for
+    // generating @font-face rules.
+    @font-face {
+      font-family: 'Source Sans 3 Variable';
+      font-style: normal;
+      font-display: fallback;
+      font-weight: 200 900;
+      src: url('#{$path}/source-sans-3-latin-wght-normal.woff2')
+        format('woff2-variations');
+      unicode-range:
+        U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
+        U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
+        U+2212, U+2215, U+FEFF, U+FFFD;
+    }
+
+    :root {
+      --font-stack: 'Source Sans 3 Variable', arial, sans-serif;
+    }
+  }
+}

package/src/elements/base/index.scss

@@ -0,0 +1,3 @@
+@forward 'normalize';
+@forward 'base';
+@forward 'font';