@codeforamerica/marcomms-design-system 1.0.0 → 1.1.0

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.mdx

@@ -0,0 +1,66 @@
+import { Meta, Typeset } from '@storybook/blocks';
+ 
+<Meta title="Typography" />
+
+export const typography = {
+  type: {
+    serif: '"Source Serif 4"',
+    "sans-serif": '"Source Sans 3"',
+  },
+  weight: {
+    regular: '400',
+    bold: '700',
+  },
+  size: {
+    base: 20,
+    "display-1": 61,
+    "display-2": 49,
+    h1: 39,
+    h2: 31,
+    h3: 25,
+    h4: 20,
+    small: 16,
+  },
+};
+
+export const SampleText = 'We’ve been working for more than a decade with governments and communities across the country to break down barriers and find real solutions.';
+ 
+# Typography
+
+We use two font families on the Code for America website: **{typography.type.serif}** and **{typography.type["sans-serif"]}**. Our base font size is `20px` and our typography uses a _major third_ type scale.
+ 
+## Headings
+ 
+Headings are set in **{typography.type.serif}**.
+
+We have large _display_ sizes for headlines (`display-1` and `display-2`), and four standard heading levels (`h1` to `h4`).
+
+<Typeset
+  fontSizes={[
+    Number(typography.size["display-1"]),
+    Number(typography.size["display-2"]),
+    Number(typography.size.h1),
+    Number(typography.size.h2),
+    Number(typography.size.h3),
+    Number(typography.size.h4),
+  ]}
+  fontWeight={typography.weight.bold}
+  sampleText={SampleText}
+  fontFamily={typography.type.serif}
+/>
+
+## Body text
+ 
+Body text is set in **{typography.type["sans-serif"]}**. We have a size variations for variation in emphasis: `extra-large`, `large`, and `small`. 
+
+<Typeset
+  fontSizes={[
+    Number(typography.size.h2),
+    Number(typography.size.h3),
+    Number(typography.size.base),
+    Number(typography.size.small),
+  ]}
+  fontWeight={typography.weight.regular}
+  sampleText={SampleText}
+  fontFamily={typography.type["sans-serif"]}
+/>