@codeforamerica/marcomms-design-system 1.18.2 → 1.19.0

package/src/shared/typography.js

@@ -1,397 +0,0 @@
-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;
-  }
-
-  .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

@@ -1,15 +0,0 @@
-@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';