@codeforamerica/marcomms-design-system 1.19.0 → 1.20.0

package/src/core/typography.scss

@@ -0,0 +1,415 @@
+@use '../components/icon';
+
+// =====
+
+// Typography spacing
+
+// Add a single space around paragraphs, blockquotes, and lists
+p, ul, ol, blockquote {
+  & + * {
+    margin-block-start: var(--spacing, var(--spacing-layout-1, 1.5rem));
+  }
+  * + & {
+    margin-block-start: var(--spacing, var(--spacing-layout-1, 1.5rem));
+  }
+}
+
+h1, h2, h3, h4, .h1, .h2, .h3, .h4, .display-1, .display-2 {
+  // Add a single line space after headings
+  & + * {
+    margin-block-start: var(--spacing, var(--spacing-layout-1, 1.5rem));
+  }
+
+  // Add two line spaces before headings
+  * + & {
+    --spacing: var(--spacing-layout-2);
+
+    margin-block-start: --spacing;
+  }
+
+  // Only add a single space between headings and other headings
+  & + & {
+    --spacing: var(--spacing-layout-1);
+  }
+
+  // Reduce space after breadcrumbs and eyebrows
+  cfa-breadcrumbs + & {
+    margin-block-start: var(--spacing-layout-half) !important;
+  }
+
+  .eyebrow + & {
+    margin-block-start: 0 !important;
+  }
+}
+
+h1, .h1, .display-1, .display-2 {
+  text-wrap: balance;
+}
+
+// =====
+
+// Font styles
+
+.regular {
+  font-family: var(--font-family-base);
+  font-size: var(--font-size-base);
+  line-height: var(--line-height-base);
+}
+
+.display-1 {
+  font-family: var(--font-family-heading);
+  font-size: var(--font-size-display-1);
+  font-weight: bold;
+  line-height: var(--line-height-display-1);
+  letter-spacing: var(--letter-spacing-display-1);
+}
+
+.display-2 {
+  font-family: var(--font-family-heading);
+  font-size: var(--font-size-display-2);
+  font-weight: bold;
+  line-height: var(--line-height-display-2);
+  letter-spacing: var(--letter-spacing-display-2);
+}
+
+h1, 
+.h1 {
+  font-family: var(--font-family-heading);
+  font-size: var(--font-size-h1);
+  font-weight: bold;
+  line-height: var(--line-height-h1);
+  letter-spacing: var(--letter-spacing-h1);
+}
+
+h2, 
+.h2 {
+  font-family: var(--font-family-heading);
+  font-size: var(--font-size-h2);
+  font-weight: bold;
+  line-height: var(--line-height-h2);
+  letter-spacing: var(--letter-spacing-h2);
+}
+
+h3, 
+.h3 {
+  font-family: var(--font-family-heading);
+  font-size: var(--font-size-h3);
+  font-weight: bold;
+  line-height: var(--line-height-h3);
+  letter-spacing: var(--letter-spacing-h3);
+}
+
+h4, 
+.h4 {
+  font-family: var(--font-family-heading);
+  font-size: var(--font-size-h4);
+  font-weight: bold;
+  line-height: var(--line-height-h4);
+  letter-spacing: var(--letter-spacing-h4);
+}
+
+.extra-large {
+  font-size: var(--font-size-extra-large);
+  line-height: var(--line-height-extra-large);
+  letter-spacing: var(--letter-spacing-extra-large);
+}
+
+.large {
+  font-size: var(--font-size-large);
+  line-height: var(--line-height-large);
+  letter-spacing: var(--letter-spacing-large);
+}
+
+.small {
+  font-size: var(--font-size-small);
+  line-height: var(--line-height-small);
+  letter-spacing: var(--letter-spacing-small);
+}
+
+.eyebrow {
+  font-family: var(--font-family-sans-serif);
+  font-size: var(--font-size-eyebrow);
+  font-weight: var(--font-weight-eyebrow);
+  letter-spacing: var(--letter-spacing-eyebrow);
+  line-height: var(--line-height-eyebrow);
+  text-transform: uppercase;
+}
+
+.eyebrow-with-line {
+  align-items: center;
+  color: var(--text-color);
+  display: flex;
+  font-family: var(--font-family-eyebrow);
+  font-size: var(--font-size-eyebrow);
+  font-weight: var(--font-weight-eyebrow);
+  letter-spacing: var(--letter-spacing-eyebrow);
+  line-height: var(--line-height-eyebrow);
+  margin-block-end: var(--spacing-layout-half);
+  position: relative;
+  text-transform: uppercase;
+
+  &::after {
+    border-block-end: var(--hairline) solid currentColor;
+    content: "";
+    flex-grow: 1;
+    margin-left: var(--spacing-component-3);
+  }
+}
+
+.subtle {
+  opacity: 0.6;
+}
+
+.serif {
+  font-family: var(--font-family-serif);
+}
+
+.sans-serif {
+  font-family: var(--font-family-sans-serif);
+}
+
+i,
+em,
+.italic {
+  font-style: italic;
+}
+
+b,
+strong,
+.strong {
+  font-weight: bold;
+}
+
+.normal {
+  font-weight: normal;
+}
+
+.balance {
+  text-wrap: balance;
+}
+
+.prominent-link,
+a.prominent-link {
+  --accent-color: var(--purple-60);
+
+  font-weight: bold;
+  text-decoration: underline;
+  text-decoration-color: var(--accent-color);
+  text-decoration-thickness: var(--medium);
+  text-underline-offset: 0.4em;
+  transition: color 0.2s ease-in-out, border-color 0.2s ease-in-out;  
+
+  &:hover {
+    --accent-color: var(--red-60);
+  }
+
+  &:not(:has(cfa-icon))::after {
+    @include icon.icon;
+    
+    content: "arrow_right_alt";
+    display: inline-block;
+    padding-inline-start: 0.1em;
+    text-decoration: none;
+    transition: padding 0.2s ease-in-out;
+    width: 1em;
+  }
+
+  &:not(:has(cfa-icon)):hover::after {
+    padding-inline-start: 0.3em;
+  }
+
+  cfa-icon {
+    text-decoration: none;
+  }
+}
+
+.white-text,
+.text-light /* fallback */ {
+  -moz-osx-font-smoothing: grayscale; // Sharper antialising for white text on a dark background
+  -webkit-font-smoothing: antialiased; // Sharper antialising for white text on a dark background
+  color: var(--white);
+  --link-color: var(--white);
+  --link-hover-color: var(--white);
+}
+
+// =====
+
+// Highlights
+
+.highlight {  
+  --highlight-offset: 0.2em;
+
+	box-decoration-break: clone;
+	display: inline;
+	background: linear-gradient(to top, transparent 0%, transparent var(--highlight-offset), var(--highlight-color) var(--highlight-offset), var(--highlight-color) calc(var(--highlight-offset) + var(--highlight-thickness)), transparent calc(var(--highlight-offset) + var(--highlight-thickness)), transparent 100%);
+	padding-inline: 0.1em;
+  -webkit-box-decoration-break: clone;
+  margin-inline-start: -0.1em;
+  margin-inline-end: -0.1em;
+  word-wrap: break-word;
+}
+
+// ======
+
+// Lists 
+
+.ul,
+.content ul {
+  list-style-type: disc;
+  padding-left: var(--spacing-layout-1);
+
+  & + *,
+  * + & {
+    margin-block-start: var(--spacing, var(--spacing-layout-1));
+  }
+  
+  & > li {
+    margin-inline-start: 0;
+    padding-left: var(--spacing-component-2);
+  }
+
+  & > li + li {
+    margin-block-start:  var(--spacing-layout-half);
+  }
+
+  & > li > ul {
+    margin-block-start:  var(--spacing-layout-half);
+  }
+}
+
+.ol,
+.content ol {
+  list-style-type: decimal;
+  padding-left: var(--spacing-layout-1);
+
+  & + *,
+  * + & {
+    margin-block-start: var(--spacing, var(--spacing-layout-1));
+  }
+  
+  & > li {
+    margin-inline-start: 0;
+    padding-inline-start: var(--spacing-component-2);
+  }
+
+  & > li + li {
+    margin-block-start: var(--spacing-layout-half);
+  }
+
+  & > li > ul {
+    margin-block-start: var(--spacing-layout-half);
+  }
+}
+
+.ul--unstyled {
+  list-style: none;
+  padding: 0;
+
+  & > li {
+    margin-inline: 0;
+    padding: 0;  
+  }
+}
+
+.ul--line-separators {
+  & > li + li::before {
+    border-block-start: 1px solid var(--gray-20);
+    width: 100%;
+    content: "";
+    display: block;
+    margin-block: var(--spacing-layout-half);
+  }
+}
+
+.ul--inline {
+  display: inline;
+  list-style: none;
+  padding-inline: 0 !important;
+
+  & > li {
+    display: inline-block;
+    margin-inline-end: var(--spacing-component-3);
+    padding: 0 !important;
+  }
+
+  li:last-child {
+    margin-inline-end: 0;
+  }
+
+  & > li + li {
+    margin-block-start: 0;
+  }
+}
+
+.ul--inline-with-separators {
+  @extend .ul--inline;
+
+  li {
+    margin-inline-end: 0;
+  }
+
+  & > li::after {
+    content: '•';
+    margin-inline: var(--spacing-component-2);
+    opacity: 0.5;
+  }
+
+  & > li:last-child::after {
+    content: '';
+  }
+}
+
+.ul--inline-with-line-separators {
+  @extend .ul--inline;
+
+  li {
+    margin-inline-end: 0;
+  }
+
+  & > li::after {
+    content: '|';
+    margin-inline: var(--spacing-component-2);
+    opacity: 0.5;
+  }
+
+  & > li:last-child::after {
+    content: '';
+  }
+}
+
+// ===
+
+// Horizontal rule
+
+hr {
+  --color: currentColor;
+
+  background-color: var(--color);
+  border: 0;
+  color: var(--color);
+  display: block;
+  font-size: 0;
+  height: var(--hairline);
+  margin-block: var(--spacing-layout-1);
+  opacity: 0.4;
+}
+
+// ===
+
+// Icons
+
+.icon {
+  -webkit-font-feature-settings: 'liga';
+  direction: ltr;
+  display: inline-block;
+  font-family: 'Material Symbols Rounded';
+  font-feature-settings: 'liga';
+  font-size: 1.4em; 
+  font-style: normal;
+  font-weight: normal;
+  letter-spacing: normal;
+  text-transform: none;
+  vertical-align: middle;
+  white-space: nowrap;
+  word-wrap: normal;
+}

package/src/core.js

@@ -0,0 +1,10 @@
+// Core design system foundation
+// Includes: Design tokens, reset, typography, grid, layout utilities, and common styles
+
+import "./core/reset.scss";
+import "./core/tokens.scss";
+import "./core/base.scss";
+import "./core/grid.scss";
+import "./core/layout.scss";
+import "./core/typography.scss";
+import "./core/helpers.scss";

package/src/index.js

@@ -0,0 +1,43 @@
+// Atoms
+
+import "./components/avatar.js";
+import "./components/blob.js";
+import "./components/button.js";
+import "./components/button.scss";
+import "./components/form-elements.scss";
+import "./components/icon.js";
+import "./components/icon.scss";
+import "./components/label.js";
+import "./components/loader.scss";
+import "./components/pill.js";
+import "./components/pullquote.js";
+import "./components/quote.js";
+import "./components/social-icon.js";
+import "./components/stat.js";
+
+// Molecules
+
+import "./components/accordion.js";
+import "./components/bar.js";
+import "./components/box.js";
+import "./components/breadcrumbs.js";
+import "./components/callout.js";
+import "./components/card.js";
+import "./components/link-list.scss";
+import "./components/logo-card.js";
+import "./components/nav.js";
+import "./components/page-nav.js";
+import "./components/pager.js";
+import "./components/pagination.js";
+import "./components/person-card.js";
+import "./components/promo.js";
+import "./components/reveal.js";
+import "./components/slide.js";
+import "./components/tab.js";
+import "./components/tab-list.js";
+import "./components/tile.js";
+import "./components/transcript.js";
+
+// Organisms
+
+import "./components/carousel.js";

package/src/shared/common.js

@@ -0,0 +1,65 @@
+import { css } from "lit";
+
+export const commonStyles = css`
+  *:focus-visible,
+  *:target {
+    outline: var(--focus-outline);
+    position: relative;
+  }
+
+  // RESET
+
+  // Use a more-intuitive box-sizing model.
+  *, *::before, *::after {
+    box-sizing: border-box;
+  }
+
+  // Remove default margin
+  * {
+    margin: 0;
+  }
+
+  // Set default text-wrap of 'pretty'
+  * {
+    text-wrap: pretty;
+  }
+
+  // Wrap overly long words
+  * {
+    overflow-wrap: break-word;
+    text-overflow: ellipsis;
+    word-break: break-word;
+  }
+
+  // Fix Safari antialiasing for variable fonts
+  * {
+    font-synthesis: none !important;
+  }
+
+  // Improve text rendering
+  body {
+    -webkit-font-smoothing: antialiased;
+  }
+
+  // Reasonable media defaults
+  img, picture, video, canvas, svg {
+    display: block;
+    height: auto;
+    max-width: 100%;
+  }
+
+  // Remove built-in form typography styles
+  input, button, textarea, select {
+    font: inherit;
+  }
+
+  // Avoid text overflows
+  p, h1, h2, h3, h4, h5, h6 {
+    overflow-wrap: break-word;
+  }
+
+  // Create a root stacking context
+  #root, #__next {
+    isolation: isolate;
+  }
+`;

package/src/shared/layout.js

@@ -0,0 +1,14 @@
+import { css } from "lit";
+
+export const layoutStyles = css`
+  .wrapper {
+    box-sizing: border-box;
+    margin: 0 auto;
+    max-width: var(--grid-max-width);
+  }
+
+  .container-fluid {
+    margin-inline: auto;
+    padding-inline: var(--outer-margin);
+  }
+`;