@codeforamerica/marcomms-design-system 1.18.1 → 1.19.0

package/src/core/typography.scss

@@ -1,411 +0,0 @@
-@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;
-}
-
-.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/index.js

@@ -1,43 +0,0 @@
-// 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

@@ -1,65 +0,0 @@
-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

@@ -1,14 +0,0 @@
-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);
-  }
-`;