@codeforamerica/marcomms-design-system 1.20.0 → 1.21.0

package/src/core/tokens.scss

@@ -1,8 +1,10 @@
 @use 'grid';
 
 :root {
-  
-  // Color
+
+  // COLORS AND GRADIENTS
+
+  // Colors
 
   --black: #000;
   --white: #fff;
@@ -54,24 +56,30 @@
   --sand-60: #C19F8B;
   --sand-80: #3D3129;
 
+  // Brand colors and aliases
+
   --brand-purple: var(--purple-80);
   --brand-red: var(--red-60);
 
-  --accent-color: var(--purple-60);
+  --base-accent-color: var(--purple-60);
+  --accent-color: var(--base-accent-color);
 
-  --text-color: var(--black);
+  --base-text-color: var(--black);
+  --text-color: var(--base-text-color);
 
   --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
+  // Gradients
+
+  --gradient-1: linear-gradient(130deg, var(--purple-80) 0%, var(--purple-40) 100%);
 
-  /* Layout spacing (based on REM) */
+  // SPACING
+
+  // Layout spacing (based on REM)
 
   --spacing-layout-0: 0;
   --spacing-layout-half: 0.75rem;
@@ -85,7 +93,7 @@
   --spacing-layout-8: 12rem;
   --spacing-layout-9: 13.5rem;
 
-  /* Component spacing (based on fractions of layout spacing) */
+  // Component spacing (based on fractions of layout spacing)
 
   --spacing-component-0: 0;
   --spacing-component-1: calc(0.125 * var(--spacing-layout-1));
@@ -98,38 +106,39 @@
   --spacing-component-8: calc(16 * var(--spacing-layout-1));
   --spacing-component-9: calc(32 * var(--spacing-layout-1));
 
-  // =====
-
-  // Layout and grid
+  // LAYOUT AND GRID
 
-  /* Breakpoints */
+  // Breakpoints
 
   --breakpoint-mobile: 480px;
   --breakpoint-tablet: 768px;
   --breakpoint-desktop: 1024px;
   --breakpoint-widescreen: 1600px;
 
-  /* Layout */
+  // Grid
 
   --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 */
+  // Column spans
 
   @for $i from 1 through 12 {
     --column-span-#{$i}: #{grid.column-span($i)};
   }
 
-  // =====
+  // TYPOGRAPHY
 
-  // Typography
+  // Font families
 
   --font-family-serif: 'Source Serif 4', serif;
   --font-family-sans-serif: 'Source Sans 3', sans-serif;
+
+  --base-font-family: var(--font-family-sans-serif);
+  --base-font-size: 20px;
    
-  --font-family-base: var(--font-family-sans-serif);
+  --font-family-base: var(--base-font-family);
   --font-family-heading: var(--font-family-serif);
   --font-family-display-1: var(--font-family-heading);
   --font-family-display-2: var(--font-family-heading);
@@ -139,7 +148,9 @@
   --font-family-h4: var(--font-family-heading);
   --font-family-eyebrow: var(--base-font-family);
 
-  --font-size-base: 20px;
+  // Font sizes
+
+  --font-size: var(--base-font-size);
   --font-size-display-1: 3.052rem; // 61.04px
   --font-size-display-2: 2.441rem; // 48.83px
   --font-size-h1: 1.953rem; // 39.06px
@@ -151,6 +162,8 @@
   --font-size-large: var(--font-size-h3);
   --font-size-small: 0.8rem;
 
+  // Font weights
+
   --font-weight-regular: 400;
   --font-weight-bold: 700;
   --font-weight-display-1: var(--font-weight-bold);
@@ -160,27 +173,32 @@
   --font-weight-h3: var(--font-weight-bold);
   --font-weight-h4: var(--font-weight-bold);
   --font-weight-eyebrow: var(--font-weight-bold);
-  
-  --line-height-base: var(--spacing-layout-1);
-  --line-height-display-1: calc(2 * var(--line-height-base));
-  --line-height-display-2: calc(2 * var(--line-height-base));
-  --line-height-h1: calc(1.5 * var(--line-height-base));
-  --line-height-h2: calc(1.5 * var(--line-height-base));
-  --line-height-h3: calc(1 * var(--line-height-base));
-  --line-height-h4: calc(1 * var(--line-height-base));
-  --line-height-eyebrow: calc(1 * var(--line-height-base));
-  --line-height-extra-large: calc(1.5 * var(--line-height-base));
-  --line-height-large: calc(1 * var(--line-height-base));
-  --line-height-small: calc(0.75 * var(--line-height-base));
-
-  // Line height aliases
+
+  // Line heights
+
+  --base-line-height: var(--spacing-layout-1);
+
+  --line-height: var(--base-line-height);
+  --line-height-display-1: calc(2 * var(--base-line-height));
+  --line-height-display-2: calc(2 * var(--base-line-height));
+  --line-height-h1: calc(1.5 * var(--base-line-height));
+  --line-height-h2: calc(1.5 * var(--base-line-height));
+  --line-height-h3: calc(1 * var(--base-line-height));
+  --line-height-h4: calc(1 * var(--base-line-height));
+  --line-height-eyebrow: calc(1 * var(--base-line-height));
+  --line-height-extra-large: calc(1.5 * var(--base-line-height));
+  --line-height-large: calc(1 * var(--base-line-height));
+  --line-height-small: calc(0.75 * var(--base-line-height));
+
   --line-height-sm: var(--line-height-small);
-  --line-height-md: var(--line-height-base);
+  --line-height-md: var(--line-height);
   --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
+
   --letter-spacing-base: normal;
   --letter-spacing-display-1: normal;
   --letter-spacing-display-2: normal;
@@ -191,7 +209,6 @@
   --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);
@@ -199,34 +216,33 @@
   --letter-spacing-xxl: var(--letter-spacing-display-2);
   --letter-spacing-xxxl: var(--letter-spacing-display-1);
 
+  // Text decoration and highlights
+
   --text-underline-offset: 0.3em;
 
-  // Text highlight
   --highlight-color: var(--yellow-40);
 	--highlight-thickness: 0.4em;
 
-  // =====
+  // BORDERS
 
-  // 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);
+  // FOCUS COLORS AND OUTLINES
 
-  // =====
+  --base-focus-color: var(--blue-40);
+  --focus-color: var(--base-focus-color);
 
-  // Border radius
+  --base-focus-outline: var(--medium) solid var(--focus-color);
+  --focus-outline: var(--base-focus-outline);
 
-  --rounded-corners: var(--spacing-component-2);
+  // ROUNDED CORNERS
 
-  // =====
+  --rounded-corners: var(--spacing-component-2);
 
-  // Shadows
+  // SHADOWS
 
   --shadow-color: rgba(0,0,0,0.1);
   
@@ -245,9 +261,7 @@
     8.6px 30px 35.1px -1.7px var(--shadow-color),
     22.4px 77.8px 91.1px -2.5px var(--shadow-color);
 
-  // =====
-
-  // Background blobs
+  // BLOBS
 
   --bg-blob-1: url("data:image/svg+xml,%3Csvg width='628' height='577' viewBox='0 0 628 577' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M304.482 3.44206C399.413 -5.50752 504.225 1.17063 567.446 72.5295C633.526 147.115 639.549 256.491 613.992 352.793C589.57 444.814 526.084 523.087 438.164 559.679C355.477 594.092 265.039 570.416 184.315 531.621C103.504 492.784 22.0294 438.546 3.59029 350.826C-14.5863 264.355 39.2746 183.666 97.1329 116.868C151.394 54.223 221.956 11.2221 304.482 3.44206Z' fill='currentColor'/%3E%3C/svg%3E");
 

package/src/core/typography.scss

@@ -52,8 +52,8 @@ h1, .h1, .display-1, .display-2 {
 
 .regular {
   font-family: var(--font-family-base);
-  font-size: var(--font-size-base);
-  line-height: var(--line-height-base);
+  font-size: var(--font-size);
+  line-height: var(--line-height);
 }
 
 .display-1 {

package/src/shared/typography.js

@@ -53,8 +53,8 @@ export const typographyStyles = css`
 
   .regular {
     font-family: var(--font-family-base);
-    font-size: var(--font-size-base);
-    line-height: var(--line-height-base);
+    font-size: var(--font-size);
+    line-height: var(--line-height);
   }
 
   .display-1 {