@cfpb/cfpb-design-system 4.2.4 → 4.3.0

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';

package/src/elements/base/normalize.scss

@@ -0,0 +1,290 @@
+/*! normalize.css v2.1.3 | MIT License | git.io/normalize */
+
+/* ==========================================================================
+    Base
+    ========================================================================== */
+
+/**
+  * 1. Set default font family to sans-serif.
+  * 2. Prevent iOS text size adjust after orientation change, without disabling
+  *    user zoom.
+  */
+
+html {
+  font-family: sans-serif; /* 1 */
+  text-size-adjust: 100%; /* 2 */
+}
+
+/**
+ * Remove default margin.
+ */
+
+body {
+  margin: 0;
+}
+
+/* ==========================================================================
+     Links
+     ========================================================================== */
+
+/**
+ * Address `outline` inconsistency between Chrome and other browsers.
+ */
+
+a:focus {
+  outline: thin dotted;
+}
+
+/**
+ * Improve readability when focused and also mouse hovered in all browsers.
+ */
+
+a:active,
+a:hover {
+  outline: 0;
+}
+
+/* ==========================================================================
+     Typography
+     ========================================================================== */
+
+/**
+ * Address variable `h1` font-size and margin within `section` and `article`
+ * contexts in Firefox 4+, Safari 5, and Chrome.
+ */
+
+h1 {
+  font-size: 2em;
+  margin: 0.67em 0;
+}
+
+/**
+ * Address differences between Firefox and other browsers.
+ */
+
+hr {
+  box-sizing: content-box;
+  height: 0;
+}
+
+/**
+ * Correct font family set oddly in Safari 5 and Chrome.
+ */
+
+code,
+kbd,
+pre,
+samp {
+  font-family: monospace, serif;
+  font-size: 1em;
+}
+
+/**
+ * Improve readability of pre-formatted text in all browsers.
+ */
+
+pre {
+  white-space: pre-wrap;
+}
+
+/**
+ * Set consistent quote types.
+ */
+
+q {
+  quotes: '\201C' '\201D' '\2018' '\2019';
+}
+
+/**
+ * Address inconsistent and variable font size in all browsers.
+ */
+
+small {
+  font-size: 80%;
+}
+
+/**
+ * Prevent `sub` and `sup` affecting `line-height` in all browsers.
+ */
+
+sub,
+sup {
+  font-size: 75%;
+  line-height: 0;
+  position: relative;
+  vertical-align: baseline;
+}
+
+sup {
+  top: -0.5em;
+}
+
+sub {
+  bottom: -0.25em;
+}
+
+/* ==========================================================================
+     Figures
+     ========================================================================== */
+
+/**
+ * Address margin not present in IE 8/9 and Safari 5.
+ */
+
+figure {
+  margin: 0;
+}
+
+/* ==========================================================================
+     Forms
+     ========================================================================== */
+
+/**
+ * Define consistent border, margin, and padding.
+ */
+
+fieldset {
+  border: 1px solid #c0c0c0;
+  margin: 0 2px;
+  padding: 0.35em 0.625em 0.75em;
+}
+
+/**
+ * 1. Correct `color` not being inherited in IE 8/9.
+ * 2. Remove padding so people aren't caught out if they zero out fieldsets.
+ */
+
+legend {
+  border: 0; /* 1 */
+  padding: 0; /* 2 */
+}
+
+/**
+ * 1. Correct font family not being inherited in all browsers.
+ * 2. Correct font size not being inherited in all browsers.
+ * 3. Address margins set differently in Firefox 4+, Safari 5, and Chrome.
+ */
+
+button,
+input,
+select,
+textarea {
+  font-family: inherit; /* 1 */
+  font-size: 100%; /* 2 */
+  margin: 0; /* 3 */
+}
+
+/**
+ * Address Firefox 4+ setting `line-height` on `input` using `!important` in
+ * the UA stylesheet.
+ */
+
+button,
+input {
+  line-height: normal;
+}
+
+/**
+ * Address inconsistent `text-transform` inheritance for `button` and `select`.
+ * All other form control elements do not inherit `text-transform` values.
+ * Correct `button` style inheritance in Chrome, Safari 5+, and IE 8+.
+ * Correct `select` style inheritance in Firefox 4+ and Opera.
+ */
+
+button,
+select {
+  text-transform: none;
+}
+
+/**
+ * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
+ *    and `video` controls.
+ * 2. Correct inability to style clickable `input` types in iOS.
+ * 3. Improve usability and consistency of cursor style between image-type
+ *    `input` and others.
+ */
+
+button,
+  html input[type="button"], /* 1 */
+  input[type="reset"],
+  input[type="submit"] {
+  /* TODO: stylelint wants to convert `appearance: button` to `appearance: auto`
+     Investigate why. */
+  /* stylelint-disable */
+  appearance: button; /* 2 */
+  /* stylelint-enable */
+  cursor: pointer; /* 3 */
+}
+
+/**
+ * Re-set default cursor for disabled elements.
+ */
+
+button[disabled],
+html input[disabled] {
+  cursor: default;
+}
+
+/**
+ * 1. Address box sizing set to `content-box` in IE 8/9/10.
+ * 2. Remove excess padding in IE 8/9/10.
+ */
+
+input[type='checkbox'],
+input[type='radio'] {
+  box-sizing: border-box; /* 1 */
+  padding: 0; /* 2 */
+}
+
+/**
+ * 1. Address `appearance` set to `searchfield` in Safari 5 and Chrome.
+ * 2. Address `box-sizing` set to `border-box` in Safari 5 and Chrome.
+ */
+
+input[type='search'] {
+  appearance: textfield; /* 1 */
+  box-sizing: content-box; /* 2 */
+}
+
+/**
+ * Remove inner padding and search cancel button in Safari 5 and Chrome
+ * on OS X.
+ */
+
+input[type='search']::-webkit-search-cancel-button,
+input[type='search']::-webkit-search-decoration {
+  appearance: none;
+}
+
+/**
+ * Remove inner padding and border in Firefox 4+.
+ */
+
+button::-moz-focus-inner,
+input::-moz-focus-inner {
+  border: 0;
+  padding: 0;
+}
+
+/**
+ * 1. Remove default vertical scrollbar in IE 8/9.
+ * 2. Improve readability and alignment in all browsers.
+ */
+
+textarea {
+  overflow: auto; /* 1 */
+  vertical-align: top; /* 2 */
+}
+
+/* ==========================================================================
+     Tables
+     ========================================================================== */
+
+/**
+ * Remove most spacing between table cells.
+ */
+
+table {
+  border-collapse: collapse;
+  border-spacing: 0;
+}

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

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