From 7db8d15c513007255aaaab64781aae777cfda6b0 Mon Sep 17 00:00:00 2001
From: Jon McClure <jon.r.mcclure@gmail.com>
Date: Tue, 25 Jul 2023 20:35:23 +0100
Subject: [PATCH] typography reset

---
 .storybook/preview.scss                       |   8 ++
 src/components/BodyText/BodyText.svelte       |   2 +-
 .../SiteHeadline/SiteHeadline.svelte          |   2 +-
 src/components/Theme/Theme.stories.svelte     |   2 +-
 src/scss/reset/_main.scss                     |  35 +-----
 src/scss/reset/_typography.scss               | 102 ++++++++++++++++++
 6 files changed, 114 insertions(+), 37 deletions(-)
 create mode 100644 src/scss/reset/_typography.scss

diff --git a/.storybook/preview.scss b/.storybook/preview.scss
index a6699f37..4dfac7e3 100644
--- a/.storybook/preview.scss
+++ b/.storybook/preview.scss
@@ -1,3 +1,7 @@
+body {
+  font-family: "Nunito Sans", Helvetica, Arial, sans-serif;
+}
+
 table.docblock-argstable {
   p {
     font-family: inherit;
@@ -9,6 +13,10 @@ table.docblock-argstable {
   }
 }
 
+div.sbdocs :where(p:not(.sb-anchor, .sb-unstyled, .sb-unstyled p)) {
+  font-size: 16px;
+}
+
 div.sbdocs-content {
   h1 {
     font-family: 'Knowledge', sans-serif;
diff --git a/src/components/BodyText/BodyText.svelte b/src/components/BodyText/BodyText.svelte
index 20293b20..65efb4d3 100644
--- a/src/components/BodyText/BodyText.svelte
+++ b/src/components/BodyText/BodyText.svelte
@@ -28,6 +28,6 @@
   @import '../../scss/mixins';
 
   div.article-block.body-text {
-    @include body-text;
+    // @include body-text;
   }
 </style>
diff --git a/src/components/SiteHeadline/SiteHeadline.svelte b/src/components/SiteHeadline/SiteHeadline.svelte
index 605f77c7..131204fc 100644
--- a/src/components/SiteHeadline/SiteHeadline.svelte
+++ b/src/components/SiteHeadline/SiteHeadline.svelte
@@ -86,7 +86,7 @@
     </div>
     <aside class="article-metadata mt-2 font-subhed">
       <div class="byline-container">
-        <div class="byline text-primary font-bold leading-tight">
+        <div class="byline text-sm text-primary font-bold leading-tight">
           By
           {#if authors.length > 0}
             {#each authors as author, i}
diff --git a/src/components/Theme/Theme.stories.svelte b/src/components/Theme/Theme.stories.svelte
index cc3faed5..e1d6d41f 100644
--- a/src/components/Theme/Theme.stories.svelte
+++ b/src/components/Theme/Theme.stories.svelte
@@ -1,4 +1,4 @@
-<script>
+<script lang="ts">
   import { Meta, Template, Story } from '@storybook/addon-svelte-csf';
 
   // @ts-ignore
diff --git a/src/scss/reset/_main.scss b/src/scss/reset/_main.scss
index cc958be6..f40f83e7 100644
--- a/src/scss/reset/_main.scss
+++ b/src/scss/reset/_main.scss
@@ -1,4 +1,5 @@
 @import 'normalize.css';
+@import 'typography';
 
 *,
 *:before,
@@ -7,40 +8,6 @@
 }
 
 body {
-  font-family: 'Source Sans Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI',
-    Roboto, 'Helvetica Neue', Helvetica, Arial, sans-serif;
   font-size: 1rem;
-  font-weight: 400;
-  line-height: 1.5;
   -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
 }
-
-p {
-  display: block;
-  margin-block-start: 0px;
-  margin-block-end: 0px;
-  margin-inline-start: 0px;
-  margin-inline-end: 0px;
-}
-
-ol,
-ul {
-  padding-left: 2rem;
-}
-
-ol,
-ul {
-  margin-top: 0;
-  margin-bottom: 1rem;
-}
-
-ol ol,
-ul ul,
-ol ul,
-ul ol {
-  margin-bottom: 0;
-}
-
-a {
-  color: inherit;
-}
diff --git a/src/scss/reset/_typography.scss b/src/scss/reset/_typography.scss
new file mode 100644
index 00000000..0e5b5435
--- /dev/null
+++ b/src/scss/reset/_typography.scss
@@ -0,0 +1,102 @@
+@use '../mixins' as *;
+
+body {
+  @include font-sans;
+  @include font-normal;
+  @include leading-normal;
+}
+
+/////////////
+// HEADINGS
+/////////////
+
+h1,
+h2,
+h3,
+h5,
+h6 {
+  @include text-primary;
+  -webkit-font-smoothing: antialiased;
+}
+h1 {
+  @include font-hed;
+  @include text-3xl;
+  @include leading-none;
+}
+h2,
+h3,
+h4,
+h5,
+h6 {
+  @include font-subhed;
+  @include leading-tighter;
+  margin-block-start: calc(var(--theme-font-size-base) * 1.5);
+}
+h2 {
+  @include text-xl;
+  margin-block-end: calc(var(--theme-font-size-base) * 0.75);
+}
+h3 {
+  @include text-lg;
+  margin-block-end: calc(var(--theme-font-size-base) * 0.625);
+}
+h4 {
+  @include text-base;
+  @include text-secondary;
+  @include tracking-wider;
+  text-transform: uppercase;
+  margin-block-end: calc(var(--theme-font-size-base) * 0.5);
+}
+h5 {
+  @include text-sm;
+  margin-block-end: calc(var(--theme-font-size-base) * 0.375);
+}
+h6 {
+  @include text-sm;
+  @include font-normal;
+  text-transform: uppercase;
+  margin-block-end: calc(var(--theme-font-size-base) * 0.375);
+}
+
+//////////////
+// Body text
+//////////////
+
+%body-type-block {
+  display: block;
+  margin-block-start: 0px;
+  margin-block-end: calc(var(--theme-font-size-base) * 1.125);
+  margin-inline-start: 0px;
+  margin-inline-end: 0px;
+  @include font-body;
+  @include text-base;
+  @include font-normal;
+  @include leading-normal;
+  @include text-primary;
+  -webkit-font-smoothing: antialiased;
+}
+
+p {
+  @extend %body-type-block;
+}
+
+ol,
+ul {
+  @extend %body-type-block;
+  padding-left: 2rem;
+  ol,
+  ul {
+    margin-block-end: 0;
+  }
+}
+
+a {
+  color: inherit;
+  text-decoration: underline;
+  text-underline-offset: 2px;
+  text-underline-offset: 8%;
+}
+
+strong {
+  @include font-bold;
+}