@codeforamerica/marcomms-design-system 1.15.2 → 1.17.0

package/src/shared/typography.js

@@ -1,76 +1,134 @@
 import { css } from "lit";
 
 export const typographyStyles = css`
-  .serif {
-    font-family: var(--font-family-serif) !important;
-  }
+  // =====
 
-  .sans-serif {
-    font-family: var(--font-family-sans-serif) !important;
+  // 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));
+    }
   }
 
-  .normal {
-    font-weight: normal !important;
+  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;
+    }
   }
 
-  .strong {
-    font-weight: bold !important;
+  h1, .h1, .display-1, .display-2 {
+    text-wrap: balance;
   }
 
-  italic {
-    font-style: italic !important;
+  // =====
+
+  // 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-display-1);
+  .display-1 {
+    font-family: var(--font-family-heading);
     font-size: var(--font-size-display-1);
-    font-weight: var(--font-weight-display-1);
-    letter-spacing: var(--letter-spacing-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-display-2);
+    font-family: var(--font-family-heading);
     font-size: var(--font-size-display-2);
-    font-weight: var(--font-weight-display-2);
-    letter-spacing: var(--letter-spacing-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-h1);
+    font-family: var(--font-family-heading);
     font-size: var(--font-size-h1);
-    font-weight: var(--font-weight-h1);
-    letter-spacing: var(--letter-spacing-h1);
+    font-weight: bold;
     line-height: var(--line-height-h1);
+    letter-spacing: var(--letter-spacing-h1);
   }
 
+  h2, 
   .h2 {
-    font-family: var(--font-family-h2);
+    font-family: var(--font-family-heading);
     font-size: var(--font-size-h2);
-    font-weight: var(--font-weight-h2);
-    letter-spacing: var(--letter-spacing-h2);
+    font-weight: bold;
     line-height: var(--line-height-h2);
+    letter-spacing: var(--letter-spacing-h2);
   }
 
+  h3, 
   .h3 {
-    font-family: var(--font-family-h3);
+    font-family: var(--font-family-heading);
     font-size: var(--font-size-h3);
-    font-weight: var(--font-weight-h3);
-    letter-spacing: var(--letter-spacing-h3);
+    font-weight: bold;
     line-height: var(--line-height-h3);
+    letter-spacing: var(--letter-spacing-h3);
   }
 
+  h4, 
   .h4 {
-    font-family: var(--font-family-h4);
+    font-family: var(--font-family-heading);
     font-size: var(--font-size-h4);
-    font-weight: var(--font-weight-h4);
-    letter-spacing: var(--letter-spacing-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-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);
@@ -90,22 +148,272 @@ export const typographyStyles = css`
     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;
+  }
+
+  .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);
+  }
+
+  .ul + *,
+  .content ul + *,
+  * + .ul,
+  * + .content ul {
+    margin-block-start: var(--spacing, var(--spacing-layout-1));
+  }
+
+  .ul > li,
+  .content ul > li {
+    margin-inline-start: 0;
+    padding-left: var(--spacing-component-2);
+  }
+
+  .ul > li + li,
+  .content ul > li + li {
+    margin-block-start: var(--spacing-layout-half);
+  }
+
+  .ul > li > ul,
+  .content ul > li > ul {
+    margin-block-start: var(--spacing-layout-half);
+  }
+
+  .ol,
+  .content ol {
+    list-style-type: decimal;
+    padding-left: var(--spacing-layout-1);
+  }
+
+  .ol + *,
+  .content ol + *,
+  * + .ol,
+  * + .content ol {
+    margin-block-start: var(--spacing, var(--spacing-layout-1));
+  }
+
+  .ol > li,
+  .content ol > li {
+    margin-inline-start: 0;
+    padding-inline-start: var(--spacing-component-2);
+  }
+
+  .ol > li + li,
+  .content ol > li + li {
+    margin-block-start: var(--spacing-layout-half);
+  }
+
+  .ol > li > ul,
+  .content ol > li > ul {
+    margin-block-start: var(--spacing-layout-half);
+  }
+
+  .ul--unstyled {
+    list-style: none;
+    padding: 0;
+  }
+
+  .ul--unstyled > li {
+    margin-inline: 0;
+    padding: 0;
   }
 
-  .eyebrow-with-line::after {
-    border-block-end: var(--hairline) solid var(--text-color);
+  .ul--line-separators > li + li::before {
+    border-block-start: 1px solid var(--gray-20);
     content: "";
-    flex-grow: 1;
-    margin-left: var(--spacing-component-3);
+    display: block;
+    margin-block: var(--spacing-layout-half);
+    width: 100%;
   }
 
-  .small {
-    font-size: var(--font-size-small);
-    letter-spacing: var(--letter-spacing-small);
-    line-height: var(--line-height-small);
+  .ul--inline,
+  .ul--inline-with-separators,
+  .ul--inline-with-line-separators {
+    display: inline;
+    list-style: none;
+    padding-inline: 0 !important;
+    padding-left: 0 !important;
   }
 
-  .subtle {
-    color: var(--text-color-subtle);
+  .ul--inline > li,
+  .ul--inline-with-separators > li,
+  .ul--inline-with-line-separators > li {
+    display: inline-block;
+    margin-inline-end: var(--spacing-component-3);
+    padding: 0 !important;
+  }
+
+  .ul--inline li:last-child,
+  .ul--inline-with-separators li:last-child,
+  .ul--inline-with-line-separators li:last-child {
+    margin-inline-end: 0;
+  }
+
+  .ul--inline > li + li,
+  .ul--inline-with-separators > li + li,
+  .ul--inline-with-line-separators > li + li {
+    margin-block-start: 0;
+  }
+
+  .ul--inline-with-separators li,
+  .ul--inline-with-line-separators li {
+    margin-inline-end: 0;
+  }
+
+  .ul--inline-with-separators > li::after {
+    content: "•";
+    margin-inline: var(--spacing-component-2);
+    opacity: 0.5;
+  }
+
+  .ul--inline-with-separators > li:last-child::after {
+    content: "";
+  }
+
+  .ul--inline-with-line-separators > li::after {
+    content: "|";
+    margin-inline: var(--spacing-component-2);
+    opacity: 0.5;
+  }
+
+  .ul--inline-with-line-separators > 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;
   }
 `;