@codeforamerica/marcomms-design-system 1.0.0 → 1.1.0

package/src/core/typography.scss

@@ -0,0 +1,426 @@
+@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 three line spaces before headings
+  * + & {
+    --spacing: var(--spacing-layout-3);
+
+    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 + &,
+  .eyebrow + & {
+    margin-block-start: var(--spacing-layout-half) !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,
+.is-style-eyebrow /* WordPress support */ {
+  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,
+.is-style-eyebrow-with-line /* WordPress support */ {
+  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 {
+  text-decoration: underline;
+  text-decoration-color: var(--highlight-color, var(--yellow-20));
+  text-decoration-thickness: 0.4em;
+  text-decoration-skip-ink: none;
+  text-underline-offset: -0.2em;
+  word-wrap: break-word;
+}
+
+.highlight--yellow {
+  --highlight-color: var(--yellow-20);
+}
+
+.highlight--blue {
+  --highlight-color: var(--blue-20);
+}
+
+.highlight--green {
+  --highlight-color: var(--green-40);
+}
+
+.highlight--white {
+  --highlight-color: var(--white-20);
+}
+
+.highlight--purple {
+  --highlight-color: var(--purple-20);
+}
+
+// ======
+
+// 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-2);
+  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/shared/common.js

@@ -0,0 +1,15 @@
+import { css } from "lit";
+
+export const commonStyles = css`
+  *,
+  *::before,
+  *::after {
+    box-sizing: border-box;
+  }
+
+  *:focus-visible,
+  *:target {
+    outline: var(--focus-outline);
+    position: relative;
+  }
+`;

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);
+  }
+`;

package/src/shared/typography.js

@@ -0,0 +1,111 @@
+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;
+  }
+
+  .normal {
+    font-weight: normal !important;
+  }
+
+  .strong {
+    font-weight: bold !important;
+  }
+
+  italic {
+    font-style: italic !important;
+  }
+
+  .display 1 {
+    font-family: var(--font-family-display-1);
+    font-size: var(--font-size-display-1);
+    font-weight: var(--font-weight-display-1);
+    letter-spacing: var(--letter-spacing-display-1);
+    line-height: var(--line-height-display-1);
+  }
+
+  .display-2 {
+    font-family: var(--font-family-display-2);
+    font-size: var(--font-size-display-2);
+    font-weight: var(--font-weight-display-2);
+    letter-spacing: var(--letter-spacing-display-2);
+    line-height: var(--line-height-display-2);
+  }
+
+  .h1 {
+    font-family: var(--font-family-h1);
+    font-size: var(--font-size-h1);
+    font-weight: var(--font-weight-h1);
+    letter-spacing: var(--letter-spacing-h1);
+    line-height: var(--line-height-h1);
+  }
+
+  .h2 {
+    font-family: var(--font-family-h2);
+    font-size: var(--font-size-h2);
+    font-weight: var(--font-weight-h2);
+    letter-spacing: var(--letter-spacing-h2);
+    line-height: var(--line-height-h2);
+  }
+
+  .h3 {
+    font-family: var(--font-family-h3);
+    font-size: var(--font-size-h3);
+    font-weight: var(--font-weight-h3);
+    letter-spacing: var(--letter-spacing-h3);
+    line-height: var(--line-height-h3);
+  }
+
+  .h4 {
+    font-family: var(--font-family-h4);
+    font-size: var(--font-size-h4);
+    font-weight: var(--font-weight-h4);
+    letter-spacing: var(--letter-spacing-h4);
+    line-height: var(--line-height-h4);
+  }
+
+  .eyebrow {
+    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);
+    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;
+  }
+
+  .eyebrow-with-line::after {
+    border-block-end: var(--hairline) solid var(--text-color);
+    content: "";
+    flex-grow: 1;
+    margin-left: var(--spacing-component-3);
+  }
+
+  .small {
+    font-size: var(--font-size-small);
+    letter-spacing: var(--letter-spacing-small);
+    line-height: var(--line-height-small);
+  }
+
+  .subtle {
+    color: var(--text-color-subtle);
+  }
+`;

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';