feat: add default typography styles

package.json

@@ -18,7 +18,7 @@
   ],
   "scripts": {
     "start": "storybook dev -p 6006",
-    "build": "sass --pkg-importer=node --no-source-map --style=expanded src/scss:dist/css ",
+    "build": "sass --pkg-importer=node --no-source-map --style=expanded src/scss:dist/css",
     "build:storybook": "storybook build",
     "lint": "npm run lint:eslint && npm run lint:prettier",
     "lint:eslint": "eslint",

src/scss/base/_index.scss

@@ -1 +1,2 @@
 @forward "normalize";
+@forward "reset";

src/scss/base/_normalize.scss

@@ -1,3 +1,3 @@
-@import "pkg:normalize-scss/sass/normalize";
+@use "pkg:normalize-scss/sass/normalize";
 
-@include normalize();
+@include normalize.normalize();

src/scss/base/_reset.scss

@@ -0,0 +1,18 @@
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+a,
+button {
+  cursor: pointer;
+}
+
+strong {
+  font-weight: bold;
+}
+
+em {
+  font-style: italic;
+}

src/scss/iati.scss

@@ -1 +1,3 @@
 @use "base";
+@use "tokens";
+@use "typography";

src/scss/tokens/_color.scss

@@ -0,0 +1,61 @@
+$color-blue-50: #06dbe4;
+
+$color-teal-10: #e6f9fe;
+$color-teal-20: #cae6ef;
+$color-teal-30: #add3df;
+$color-teal-40: #90c0cf;
+$color-teal-50: #73adbf;
+$color-teal-60: #5c97a9;
+$color-teal-70: #448093;
+$color-teal-80: #2d6a7d;
+$color-teal-90: #155366;
+
+$color-green-10: #ebfffa;
+$color-green-20: #b0eddf;
+$color-green-30: #75dfc7;
+$color-green-40: #3bd2af;
+$color-green-50: #00c497;
+$color-green-60: #05ab85;
+$color-green-70: #0a9172;
+$color-green-80: #0f775f;
+$color-green-90: #145d4c;
+
+$color-orange-10: #fff0f0;
+$color-orange-20: #ffc3be;
+$color-orange-30: #ffa8a0;
+$color-orange-40: #ff8d82;
+$color-orange-50: #ff7264;
+$color-orange-60: #db584b;
+$color-orange-70: #b73e32;
+$color-orange-80: #932419;
+$color-orange-90: #6e0900;
+
+$color-red-10: #fff0f3;
+$color-red-20: #fabdc8;
+$color-red-30: #f98fa2;
+$color-red-40: #f8617d;
+$color-red-50: #f73357;
+$color-red-60: #d32c4b;
+$color-red-70: #af243e;
+$color-red-80: #8b1d31;
+$color-red-90: #6d091b;
+
+$color-purple-10: #f6f0ff;
+$color-purple-20: #dfcbf6;
+$color-purple-30: #ccacf2;
+$color-purple-40: #b98dee;
+$color-purple-50: #a66ee9;
+$color-purple-60: #8b54cc;
+$color-purple-70: #6f3aaf;
+$color-purple-80: #542092;
+$color-purple-90: #380674;
+
+$color-grey-10: #f6f6f6;
+$color-grey-20: #dadada;
+$color-grey-30: #bdbdbd;
+$color-grey-40: #a1a1a1;
+$color-grey-50: #848484;
+$color-grey-60: #686868;
+$color-grey-70: #4b4b4b;
+$color-grey-80: #2f2f2f;
+$color-grey-90: #121212;

src/scss/tokens/_font.scss

@@ -0,0 +1,3 @@
+$font-stack-heading: "Avenir", Helvetica, Arial, sans-serif;
+$font-stack-body: "Avenir", Helvetica, Arial, sans-serif;
+$font-stack-monospace: monospace;

src/scss/tokens/_index.scss

@@ -0,0 +1,3 @@
+@forward "color";
+@forward "font";
+@forward "spacing";

src/scss/tokens/_spacing.scss

@@ -0,0 +1,3 @@
+$border-width: 4px;
+
+$padding-block: 1rem;

src/scss/typography/_body.scss

@@ -0,0 +1,31 @@
+@use "../tokens/color" as *;
+@use "../tokens/font" as *;
+@use "../tokens/spacing" as *;
+
+html {
+  font-family: $font-stack-body;
+  color: $color-grey-90;
+}
+
+p,
+a,
+li {
+  line-height: 2;
+  font-weight: 300;
+}
+
+a {
+  color: $color-teal-80;
+  text-decoration: underline;
+  line-height: inherit;
+
+  &:hover {
+    text-decoration: none;
+  }
+}
+
+blockquote {
+  border-left: 4px solid $color-grey-90;
+  padding: 0 $padding-block;
+  margin-left: $padding-block;
+}

src/scss/typography/_code.scss

@@ -0,0 +1,33 @@
+@use "../tokens/color" as *;
+@use "../tokens/font" as *;
+@use "../tokens/spacing" as *;
+
+.iati-code {
+  font-family: $font-stack-monospace;
+  background-color: $color-grey-10;
+  border: 1px solid $color-grey-20;
+  padding: 0.1em 0.2em;
+
+  &--block {
+    display: block;
+    padding: $padding-block;
+    overflow-x: scroll;
+  }
+}
+
+code {
+  @extend .iati-code;
+}
+
+pre {
+  @extend .iati-code;
+  @extend .iati-code--block;
+}
+
+kbd {
+  @extend .iati-code;
+
+  kbd {
+    border: none;
+  }
+}

src/scss/typography/_headings.scss

@@ -0,0 +1,36 @@
+@use "../tokens/font" as *;
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  font-family: $font-stack-heading;
+  margin: 0.5em 0;
+  font-weight: bold;
+}
+
+h1 {
+  font-size: 2.5rem;
+}
+
+h2 {
+  font-size: 2rem;
+}
+
+h3 {
+  font-size: 1.6rem;
+}
+
+h4 {
+  font-size: 1.4rem;
+}
+
+h5 {
+  font-size: 1.2rem;
+}
+
+h6 {
+  font-size: 1.1rem;
+}

src/scss/typography/_index.scss

@@ -0,0 +1,3 @@
+@forward "body";
+@forward "code";
+@forward "headings";

src/scss/typography/typography.stories.ts

@@ -0,0 +1,114 @@
+import type { Meta, StoryObj } from "@storybook/web-components";
+
+import { html } from "lit";
+
+const meta: Meta = {
+  title: "Core/Typography",
+  tags: ["autodocs"],
+};
+
+export default meta;
+type Story = StoryObj;
+
+export const Headings: Story = {
+  render: () => html`
+    <h1>Heading 1</h1>
+    <h2>Heading 2</h2>
+    <h3>Heading 3</h3>
+    <h4>Heading 4</h4>
+    <h5>Heading 5</h5>
+    <h6>Heading 6</h6>
+  `,
+};
+
+export const Body: Story = {
+  render: () => html`
+    <p>
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris auctor
+      tortor vitae magna aliquam, nec interdum libero bibendum. Donec lacinia et
+      est at tempus. Nullam libero neque, lobortis vitae enim mattis, porttitor
+      dapibus purus. Vestibulum sed dolor nec libero convallis sollicitudin in
+      sed ligula. Nulla aliquet quam at vehicula dictum.
+    </p>
+    <p>
+      Integer lorem leo, rutrum quis erat in, commodo tincidunt magna. Aenean ut
+      libero at dolor tempus porta eget hendrerit mi. Curabitur molestie est id
+      libero molestie, vel convallis urna mollis. Etiam ut felis gravida,
+      ultrices ante at, bibendum risus.
+    </p>
+    <p>
+      Nulla tempor porta dignissim. Quisque pellentesque nisi a massa aliquet,
+      id facilisis sem dapibus. Quisque at diam aliquet, convallis tellus a,
+      bibendum justo. Proin in est feugiat, rhoncus sapien eu, suscipit ante.
+    </p>
+  `,
+};
+
+export const Links: Story = {
+  render: () => html`
+    <a>This is a link.</a>
+    <p>This paragraph contains a <a>link</a>.</p>
+  `,
+};
+
+export const Lists: Story = {
+  render: () => html`
+    <p>
+      This section shows the different types of lists. Below is an unordered
+      list:
+    </p>
+    <ul>
+      <li>This is an unordered list.</li>
+      <li>It has bulleted items.</li>
+    </ul>
+    <p>Below is an ordered list:</p>
+    <ol>
+      <li>This is an ordered list.</li>
+      <li>It has numbered items.</li>
+    </ol>
+  `,
+};
+
+export const Quotes: Story = {
+  render: () => html`
+    <p>
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris auctor
+      tortor vitae magna aliquam, nec interdum libero bibendum. Donec lacinia et
+      est at tempus. Nullam libero neque, lobortis vitae enim mattis, porttitor
+      dapibus purus. Vestibulum sed dolor nec libero convallis sollicitudin in
+      sed ligula. Nulla aliquet quam at vehicula dictum.
+    </p>
+    <blockquote>
+      <p>
+        Integer lorem leo, rutrum quis erat in, commodo tincidunt magna. Aenean
+        ut libero at dolor tempus porta eget hendrerit mi. Curabitur molestie
+        est id libero molestie, vel convallis urna mollis. Etiam ut felis
+        gravida, ultrices ante at, bibendum risus.
+      </p>
+    </blockquote>
+    <p>
+      Nulla tempor porta dignissim. Quisque pellentesque nisi a massa aliquet,
+      id facilisis sem dapibus. Quisque at diam aliquet, convallis tellus a,
+      bibendum justo. Proin in est feugiat, rhoncus sapien eu, suscipit ante.
+    </p>
+  `,
+};
+
+export const Code: Story = {
+  render: () => html`
+    <h3>This heading contains <span class="iati-code">inline code</span>.</h3>
+    <p>
+      This paragraph contains
+      <span class="iati-code">inline code</span>.
+    </p>
+    <code class="iati-code iati-code--block">
+      <span>print("This is a block of code")</span>
+    </code>
+    <p>
+      This paragraph contains a key-binding: <kbd>Ctrl</kbd> + <kbd>C</kbd>.
+      Key-bindings can be nested, e.g.
+      <kbd><kbd>Ctrl</kbd>+<kbd>C</kbd></kbd>
+      .
+    </p>
+  `,
+};