@codeforamerica/marcomms-design-system 1.0.0 → 1.0.1

package/src/core/_tokens.scss

@@ -0,0 +1,251 @@
+@use 'grid';
+
+:root {
+  
+  // Color
+
+  --black: #000;
+  --white: #fff;
+
+  --black-10: rgba(0,0,0,0.1);
+  --black-20: rgba(0,0,0,0.2);
+  --black-40: rgba(0,0,0,0.4);
+  --black-60: rgba(0,0,0,0.6);
+  --black-80: rgba(0,0,0,0.8);
+
+  --white-20: rgba(255,255,255,0.2);
+  --white-40: rgba(255,255,255,0.4);
+  --white-60: rgba(255,255,255,0.6);
+  --white-80: rgba(255,255,255,0.8);
+
+  --gray-20: #ececec;
+  --gray-40: #b4b4b4;
+  --gray-60: #555555;
+  --gray-80: #292929;
+
+  --purple-10: #f4f4fb;
+  --purple-20: #DBDAF1;
+  --purple-40: #ADA9FF;
+  --purple-60: #4B49B2;
+  --purple-80: #2B1A78;
+
+  --red-20: #FBDADC;
+  --red-40: #FF999F;
+  --red-60: #AF121D;
+  --red-80: #5C0A0F;
+
+  --blue-20: #E6EBF9;
+  --blue-40: #B3C7FF;
+  --blue-60: #7595F0;
+  --blue-80: #172C68;
+
+  --yellow-20: #FFEBCC;
+  --yellow-40: #FFD699;
+  --yellow-60: #F2AA40;
+  --yellow-80: #663D00;
+
+  --green-20: #D6F5ED;
+  --green-40: #ADF0E0;
+  --green-60: #39AA8E;
+  --green-80: #004239;
+
+  --sand-20: #F5F0ED;
+  --sand-40: #F8D5BF;
+  --sand-60: #C19F8B;
+  --sand-80: #3D3129;
+
+  --brand-purple: var(--purple-80);
+  --brand-red: var(--red-60);
+
+  --accent-color: var(--purple-60);
+
+  --text-color: var(--black);
+
+  --base-link-color: var(--purple-80);
+  --base-link-hover-color: var(--red-60);
+
+  --link-color: var(--base-link-color);
+  --link-hover-color: var(--base-link-hover-color);
+  
+  // =====
+
+  // Spacing
+
+  /* Layout spacing (based on REM) */
+
+  --spacing-layout-0: 0;
+  --spacing-layout-half: 0.75rem;
+  --spacing-layout-1: 1.5rem;
+  --spacing-layout-2: 3rem;
+  --spacing-layout-3: 4.5rem;
+  --spacing-layout-4: 6rem;
+  --spacing-layout-5: 7.5rem;
+  --spacing-layout-6: 9rem;
+  --spacing-layout-7: 10.5rem;
+  --spacing-layout-8: 12rem;
+  --spacing-layout-9: 13.5rem;
+
+  /* Component spacing (based on PX) */
+
+  --spacing-component-0: 0;
+  --spacing-component-1: 4px;
+  --spacing-component-2: 8px;
+  --spacing-component-3: 16px;
+  --spacing-component-4: 32px;
+  --spacing-component-5: 64px;
+  --spacing-component-6: 128px;
+  --spacing-component-7: 256px;
+  --spacing-component-8: 512px;
+  --spacing-component-9: 1024px;
+
+  // =====
+
+  // Layout and grid
+
+  /* Breakpoints */
+
+  --breakpoint-mobile: 480px;
+  --breakpoint-tablet: 768px;
+  --breakpoint-desktop: 1024px;
+  --breakpoint-widescreen: 1600px;
+
+  /* Layout */
+
+  --gutter-width: var(--spacing-layout-1);
+  --outer-margin: var(--spacing-layout-1);
+  --grid-max-width: 1200px;
+  --grid-max-width-wp: calc(var(--grid-max-width) - var(--outer-margin) * 2);
+
+  /* Column sizes */
+
+  @for $i from 1 through 12 {
+    --column-span-#{$i}: #{grid.column-span($i)};
+  }
+
+  // =====
+
+  // Typography
+
+  --font-family-serif: 'Source Serif 4', serif;
+  --font-family-sans-serif: 'Source Sans 3', sans-serif;
+   
+  --font-family-base: var(--font-family-sans-serif);
+  --font-family-heading: var(--font-family-serif);
+  --font-family-display-1: var(--font-family-heading);
+  --font-family-display-2: var(--font-family-heading);
+  --font-family-h1: var(--font-family-heading);
+  --font-family-h2: var(--font-family-heading); 
+  --font-family-h3: var(--font-family-heading);
+  --font-family-h4: var(--font-family-heading);
+  --font-family-eyebrow: var(--base-font-family);
+
+  --font-size-base: 20px;
+  --font-size-display-1: 3.052rem; // 61.04px
+  --font-size-display-2: 2.441rem; // 48.83px
+  --font-size-h1: 1.953rem; // 39.06px
+  --font-size-h2: 1.563rem; // 31.25px 
+  --font-size-h3: 1.25rem; // 25px
+  --font-size-h4: 1rem; // 20px
+  --font-size-eyebrow: 0.7rem; // 16px
+  --font-size-extra-large: var(--font-size-h2);
+  --font-size-large: var(--font-size-h3);
+  --font-size-small: 0.8rem;
+
+  // Font size aliases
+  --font-size-sm: var(--font-size-small);
+  --font-size-md: var(--font-size-base);
+  --font-size-lg: var(--font-size-large);
+  --font-size-xl: var(--font-size-extra-large);
+  --font-size-xxl: var(--font-size-display-2);
+  --font-size-xxxl: var(--font-size-display-1);
+
+  --font-weight-regular: 400;
+  --font-weight-bold: 700;
+  --font-weight-display-1: var(--font-weight-bold);
+  --font-weight-display-2: var(--font-weight-bold);
+  --font-weight-h1: var(--font-weight-bold);
+  --font-weight-h2: var(--font-weight-bold);
+  --font-weight-h3: var(--font-weight-bold);
+  --font-weight-h4: var(--font-weight-bold);
+  --font-weight-eyebrow: var(--font-weight-bold);
+  
+  --line-height-base: calc(1.5 * var(--font-size-base, 20px));
+  --line-height-display-1: 1.2em;
+  --line-height-display-2: 1.2em;
+  --line-height-h1: 1.2em;
+  --line-height-h2: 1.2em;
+  --line-height-h3: 1.3em;
+  --line-height-h4: 1.3em;
+  --line-height-eyebrow: 1em;
+  --line-height-extra-large: var(--line-height-h2);
+  --line-height-large: var(--line-height-h3);
+  --line-height-small: 1.6em;
+
+    // Line height aliases
+    --line-height-sm: var(--line-height-small);
+    --line-height-md: var(--line-height-base);
+    --line-height-lg: var(--line-height-large);
+    --line-height-xl: var(--line-height-extra-large);
+    --line-height-xxl: var(--line-height-display-2);
+    --line-height-xxxl: var(--line-height-display-1);
+
+  --letter-spacing-base: normal;
+  --letter-spacing-display-1: normal;
+  --letter-spacing-display-2: normal;
+  --letter-spacing-h1: normal;
+  --letter-spacing-h2: normal;
+  --letter-spacing-h3: normal;
+  --letter-spacing-h4: normal;
+  --letter-spacing-eyebrow: 0.1em;
+  --letter-spacing-small: normal;
+
+    // Letter spacing aliases
+    --letter-spacing-sm: var(--letter-spacing-small);
+    --letter-spacing-md: var(--letter-spacing-base);
+    --letter-spacing-lg: var(--letter-spacing-large);
+    --letter-spacing-xl: var(--letter-spacing-extra-large);
+    --letter-spacing-xxl: var(--letter-spacing-display-2);
+    --letter-spacing-xxxl: var(--letter-spacing-display-1);
+
+  --text-underline-offset: 0.3em;
+
+  // =====
+
+  // Borner thicknesses
+  
+  --hairline: 1px;
+  --thin: 2px;
+  --medium: 4px;
+  --thick: 8px;
+
+  // Focus Outline
+  --focus-color: var(--blue-40);
+  --focus-outline: var(--medium) solid var(--focus-color);
+
+  // =====
+
+  // Border radius
+
+  --rounded-corners: var(--spacing-component-2);
+
+  // =====
+
+  // Shadows
+
+  --shadow-color: rgba(0,0,0,0.1);
+  
+  --shadow-small:
+    0.2px 0.7px 0.8px var(--shadow-color),
+    0.9px 3px 3.5px -2.5px var(--shadow-color),
+    -2px -2px 2px -2px var(--shadow-color);
+  --shadow-medium:
+    0.2px 0.7px 0.8px var(--shadow-color),
+    1.1px 3.8px 4.5px -1.2px var(--shadow-color),
+    4.3px 14.8px 17.3px -2.5px var(--shadow-color),
+    -2px -2px 2px -2px var(--shadow-color);
+  --shadow-large:
+    0.2px 0.7px 0.8px var(--shadow-color),
+    2.9px 10px 11.7px -0.8px var(--shadow-color),
+    8.6px 30px 35.1px -1.7px var(--shadow-color),
+    22.4px 77.8px 91.1px -2.5px var(--shadow-color);
+}

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/core/_wordpress.scss

@@ -0,0 +1,27 @@
+// Adjustments to integrate the pattern library with WordPress
+
+// Typography
+
+.has-sm-font-size {
+  line-height: var(--line-height-sm);
+}
+
+.has-md-font-size {
+  line-height: var(--line-height-md);
+}
+
+.has-lg-font-size {
+  line-height: var(--line-height-lg);
+}
+
+.has-xl-font-size {
+  line-height: var(--line-height-xl);
+}
+
+.has-xxl-font-size {
+  line-height: var(--line-height-xxl);
+}
+
+.has-xxxl-font-size {
+  line-height: var(--line-height-xxxl);
+}