@codeforamerica/marcomms-design-system 1.0.0 → 1.0.1

package/src/core/colors.mdx

@@ -0,0 +1,100 @@
+import { Meta, ColorPalette, ColorItem } from '@storybook/blocks';
+ 
+<Meta title="Colors" />
+ 
+<ColorPalette>
+  <ColorItem
+    title="Grayscale"
+    subtitle=""
+    colors={{ 
+      "white": "#fff", 
+      "gray-20": "#ececec",
+      "gray-40": "#b4b4b4", 
+      "gray-60": "#555555", 
+      "gray-80": "#292929", 
+      "black": "#000", 
+    }}
+  />
+  <ColorItem
+    title="Transparent Black"
+    subtitle=""
+    colors={{ 
+      "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)",
+    }}
+  />
+  <ColorItem
+    title="Transparent White"
+    subtitle=""
+    colors={{ 
+      "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)",
+    }}
+  />
+  <ColorItem
+    title="Purple"
+    subtitle="Our primary brand color"
+    colors={{ 
+      "purple-10": "#f4f4fb",
+      "purple-20": "#dbdaf1",
+      "purple-40": "#ada9ff",
+      "purple-60": "#4b49b2",
+      "purple-80": "#2b1a78",
+    }}
+  />
+  <ColorItem
+    title="Red"
+    subtitle=""
+    colors={{ 
+      "red-20": "#fbdadc",
+      "red-40": "#ff999f",
+      "red-60": "#af121d",
+      "red-80": "#5c0a0f",
+    }}
+  />
+  <ColorItem
+    title="Blue"
+    subtitle=""
+    colors={{ 
+      "blue-20": "#e6ebf9",
+      "blue-40": "#b3c7ff",
+      "blue-60": "#7595f0",
+      "blue-80": "#172c68",
+    }}
+  />
+  <ColorItem
+    title="Yellow"
+    subtitle=""
+    colors={{ 
+      "yellow-20": "#ffebcc",
+      "yellow-40": "#ffd699",
+      "yellow-60": "#f2aa40",
+      "yellow-80": "#663d00",
+    }}
+  />
+  <ColorItem
+    title="Green"
+    subtitle=""
+    colors={{ 
+      "green-20": "#d6f5ed",
+      "green-40": "#adf0e0",
+      "green-60": "#39aa8e",
+      "green-80": "#004239",
+    }}
+  />
+  <ColorItem
+    title="Sand"
+    subtitle=""
+    colors={{ 
+      "sand-20": "#f5f0ed",
+      "sand-40": "#f8d5bf",
+      "sand-60": "#c19f8b",
+      "sand-80": "#3d3129",
+    }}
+  />
+</ColorPalette>

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"]}
+/>

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,16 @@
+@use './core/reset';
+@use './core/tokens';
+@use './core/base';
+@use './core/grid';
+@use './core/layout';
+@use './core/typography';
+@use './core/helpers';
+@use './core/wordpress';
+
+// 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';