@codeforamerica/marcomms-design-system 1.19.0 → 1.20.0

package/src/shared/typography.js

@@ -0,0 +1,401 @@
+import { css } from "lit";
+
+export const typographyStyles = css`
+  // =====
+
+  // 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 {
+    list-style-type: disc;
+    padding-left: var(--spacing-layout-1);
+  }
+
+  .ul > li {
+    margin-inline-start: 0;
+    padding-left: var(--spacing-component-2);
+  }
+
+  .ul > li + li {
+    margin-block-start: var(--spacing-layout-half);
+  }
+
+  .ul > li > ul {
+    margin-block-start: var(--spacing-layout-half);
+  }
+
+  .ol {
+    list-style-type: decimal;
+    padding-left: var(--spacing-layout-1);
+  }
+
+  .ol > li {
+    margin-inline-start: 0;
+    padding-inline-start: var(--spacing-component-2);
+  }
+
+  .ol > li + li {
+    margin-block-start: var(--spacing-layout-half);
+  }
+
+  .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;
+  }
+
+  .ul--line-separators > li + li::before {
+    border-block-start: 1px solid var(--gray-20);
+    content: "";
+    display: block;
+    margin-block: var(--spacing-layout-half);
+    width: 100%;
+  }
+
+  .ul--inline,
+  .ul--inline-with-separators,
+  .ul--inline-with-line-separators {
+    display: inline;
+    list-style: none;
+    padding-inline: 0 !important;
+    padding-left: 0 !important;
+  }
+
+  .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;
+  }
+`;

package/src/styles.scss

@@ -0,0 +1,15 @@
+@use './core/reset';
+@use './core/tokens';
+@use './core/base';
+@use './core/grid';
+@use './core/layout';
+@use './core/typography';
+@use './core/helpers';
+
+// Include buttons, icons, and form styles
+@use './components/button';
+@use './components/details';
+@use './components/form-elements';
+@use './components/icon';
+@use './components/loader';
+@use './components/link-list';