From a658b5291efc5b3de72d661595ca6fa23d17a98e Mon Sep 17 00:00:00 2001
From: Prasanta Kumar Dutta <7580745+pkd2512@users.noreply.github.com>
Date: Mon, 7 Aug 2023 18:59:01 +0530
Subject: [PATCH] body text mixins and reset WIP

---
 .../SiteHeadline/SiteHeadline.svelte          |   4 +-
 src/scss/reset/_typography.scss               | 131 +++++++++---------
 .../tokens/spacers/mixins/_fluid-padding.scss |   1 +
 .../tokens/text/mixins/_letter-spacing.scss   |   8 +-
 src/scss/tokens/text/mixins/_line-height.scss |  16 +--
 src/scss/tokens/text/mixins/_main.scss        |   1 +
 src/scss/tokens/text/mixins/_text-role.scss   |  86 ++++++++++++
 7 files changed, 166 insertions(+), 81 deletions(-)
 create mode 100644 src/scss/tokens/text/mixins/_text-role.scss

diff --git a/src/components/SiteHeadline/SiteHeadline.svelte b/src/components/SiteHeadline/SiteHeadline.svelte
index 82e18c27..9108ddeb 100644
--- a/src/components/SiteHeadline/SiteHeadline.svelte
+++ b/src/components/SiteHeadline/SiteHeadline.svelte
@@ -176,9 +176,9 @@
 <style lang="scss">
   @use '../../scss/mixins' as *;
   .byline a {
-    text-decoration: none;
+    text-decoration-line: none;
     &:hover {
-      text-decoration: underline;
+      text-decoration-line: underline;
     }
   }
 
diff --git a/src/scss/reset/_typography.scss b/src/scss/reset/_typography.scss
index 85b1c2bd..f1f83298 100644
--- a/src/scss/reset/_typography.scss
+++ b/src/scss/reset/_typography.scss
@@ -2,12 +2,24 @@
 
 body {
   font-size: 1rem;
+  color: #404040;
   @include font-sans;
   @include font-regular;
-  @include leading-normal;
+  @include leading-tight;
+
   // Font-smoothing
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
+
+  .theme {
+    font-size: calc(0.95 * var(--theme-font-size-base));
+    color: var(--theme-colour-text-primary);
+
+    ::selection {
+      background-color: $theme-colour-text-secondary;
+      color: $theme-colour-background;
+    }
+  }
 }
 
 // SIZE RANGE REFERENCE //
@@ -27,54 +39,22 @@ body {
 // HEADINGS
 /////////////
 
-h1,
-h2,
-h3,
-h5,
-h6 {
-  @include text-primary;
-}
 h1 {
-  @include font-hed;
-  @include text-3xl;
-  @include leading-none;
-
-  margin-block-start: calc(var(--theme-font-size-base) * 1.5);
-  margin-block-end: calc(var(--theme-font-size-base) * 0.75);
+  @include h1;
 }
-h2,
-h3,
+
+h2 {
+  @include h2;
+}
+
+h3 {
+  @include 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-regular;
-  text-transform: uppercase;
-  margin-block-end: calc(var(--theme-font-size-base) * 0.375);
+  @include h4;
 }
 
 //////////////
@@ -83,15 +63,7 @@ h6 {
 
 %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-regular;
-  @include leading-normal;
-  @include text-primary;
+  @include body-text;
 }
 
 p {
@@ -109,17 +81,36 @@ ul {
 }
 
 a {
-  color: currentColor;
-  text-decoration: underline;
-  text-underline-offset: 2px;
-  text-underline-offset: 8%;
-  text-decoration-thickness: from-font;
+  @include body-link;
+}
+
+em {
+  font-style: italic;
 }
 
 strong {
   @include font-bold;
 }
 
+pre,
+code,
+kbd {
+  @include font-mono;
+  @include text-sm;
+  @include text-secondary;
+  @include fmx-0;
+  @include fmt-0;
+  @include fmb-3;
+}
+
+kbd {
+  background-color: $theme-colour-text-primary;
+  color: $theme-colour-background;
+  border-radius: 0.3rem;
+  @include fpx-2;
+  @include fpy-1;
+}
+
 figcaption {
   @include text-sm;
   @include font-regular;
@@ -129,24 +120,30 @@ figcaption {
 }
 
 blockquote {
-  margin-inline: 0;
-  padding-left: 1rem;
-  border-left: 1px solid $theme-colour-brand-rules;
-  @include fmy-6;
+  @include fmx-0;
+  @include fpl-3;
+  @include fpy-3;
+  @include fpr-1;
+  border-left: 2px solid $theme-colour-brand-rules;
+  @include fmy-3;
   p {
     @include font-body;
     @include text-lg;
-    &:last-of-type {
-      @include fmb-2;
-    }
+    @include leading-tight;
+    @include fmb-1;
+    font-style: italic;
   }
   blockquote {
-    margin-block: 0;
+    @include fmb-0;
+    @include fmt-3;
     border: 0;
-    padding-left: 0;
+    @include fpy-0;
+    @include fpl-0;
     p {
       @include text-sm;
       @include font-note;
+      @include fm-0;
+      font-style: normal;
     }
   }
 }
diff --git a/src/scss/tokens/spacers/mixins/_fluid-padding.scss b/src/scss/tokens/spacers/mixins/_fluid-padding.scss
index 2f973566..c873ea00 100644
--- a/src/scss/tokens/spacers/mixins/_fluid-padding.scss
+++ b/src/scss/tokens/spacers/mixins/_fluid-padding.scss
@@ -1,4 +1,5 @@
 // Generated from https://utopia.fyi/space/calculator?c=320,18,1.125,1280,22,1.25,7,3,&s=0.75%7C0.5%7C0.25,1.5%7C2%7C3%7C4%7C6,s-l&g=s,l,xl,12
+@use 'sass:map';
 $fluid-padding-levels: (
   '0': 0,
   '1': clamp(0.31rem, calc(0.29rem + 0.1vw), 0.38rem),
diff --git a/src/scss/tokens/text/mixins/_letter-spacing.scss b/src/scss/tokens/text/mixins/_letter-spacing.scss
index 71c325e3..7df18427 100644
--- a/src/scss/tokens/text/mixins/_letter-spacing.scss
+++ b/src/scss/tokens/text/mixins/_letter-spacing.scss
@@ -2,13 +2,13 @@
   letter-spacing: -0.05em;
 }
 @mixin tracking-tight {
-  letter-spacing: -0.025em;
+  letter-spacing: -0.03em;
 }
 @mixin tracking-normal {
   letter-spacing: 0em;
 }
 @mixin tracking-wide {
-  letter-spacing: 0.025em;
+  letter-spacing: 0.03em;
 }
 @mixin tracking-wider {
   letter-spacing: 0.05em;
@@ -20,13 +20,13 @@
   letter-spacing: -0.05em !important;
 }
 @mixin \!tracking-tight {
-  letter-spacing: -0.025em !important;
+  letter-spacing: -0.03em !important;
 }
 @mixin \!tracking-normal {
   letter-spacing: 0em !important;
 }
 @mixin \!tracking-wide {
-  letter-spacing: 0.025em !important;
+  letter-spacing: 0.03em !important;
 }
 @mixin \!tracking-wider {
   letter-spacing: 0.05em !important;
diff --git a/src/scss/tokens/text/mixins/_line-height.scss b/src/scss/tokens/text/mixins/_line-height.scss
index 8e4340db..9a1d717d 100644
--- a/src/scss/tokens/text/mixins/_line-height.scss
+++ b/src/scss/tokens/text/mixins/_line-height.scss
@@ -2,35 +2,35 @@
   line-height: 1;
 }
 @mixin leading-tighter {
-  line-height: 1.125;
+  line-height: 1.1;
 }
 @mixin leading-tight {
-  line-height: 1.25;
+  line-height: 1.3;
 }
 @mixin leading-normal {
   line-height: 1.5;
 }
 @mixin leading-loose {
-  line-height: 1.75;
+  line-height: 1.7;
 }
 @mixin leading-looser {
-  line-height: 1.875;
+  line-height: 1.9;
 }
 @mixin \!leading-none {
   line-height: 1 !important;
 }
 @mixin \!leading-tighter {
-  line-height: 1.125 !important;
+  line-height: 1.1 !important;
 }
 @mixin \!leading-tight {
-  line-height: 1.25 !important;
+  line-height: 1.3 !important;
 }
 @mixin \!leading-normal {
   line-height: 1.5 !important;
 }
 @mixin \!leading-loose {
-  line-height: 1.75 !important;
+  line-height: 1.7 !important;
 }
 @mixin \!leading-looser {
-  line-height: 1.875 !important;
+  line-height: 1.9 !important;
 }
diff --git a/src/scss/tokens/text/mixins/_main.scss b/src/scss/tokens/text/mixins/_main.scss
index 314f9365..f1d653ac 100644
--- a/src/scss/tokens/text/mixins/_main.scss
+++ b/src/scss/tokens/text/mixins/_main.scss
@@ -5,3 +5,4 @@
 @forward 'letter-spacing';
 @forward 'line-height';
 @forward 'text-stroke';
+@forward 'text-role';
diff --git a/src/scss/tokens/text/mixins/_text-role.scss b/src/scss/tokens/text/mixins/_text-role.scss
new file mode 100644
index 00000000..0979489e
--- /dev/null
+++ b/src/scss/tokens/text/mixins/_text-role.scss
@@ -0,0 +1,86 @@
+@use 'color' as *;
+@use 'font-family' as *;
+@use 'font-size' as *;
+@use 'font-weight' as *;
+@use 'letter-spacing' as *;
+@use 'line-height' as *;
+@use '../../spacers/mixins/main' as *;
+
+@mixin h1 {
+  @include text-primary;
+  @include font-bold;
+  @include font-hed;
+  @include text-3xl;
+  @include leading-none;
+  @include fmt-1;
+  @include fmb-3;
+}
+
+@mixin h2 {
+  @include text-primary;
+  @include font-bold;
+  @include font-subhed;
+  @include leading-tighter;
+  @include text-xl;
+  @include fmt-7;
+  @include fmb-3;
+}
+
+@mixin h3 {
+  @include text-primary;
+  @include font-semibold;
+  @include font-subhed;
+  @include leading-tighter;
+  @include text-base;
+  @include fmt-5;
+  @include fmb-1;
+}
+
+@mixin h4 {
+  @include text-primary;
+  @include font-subhed;
+  @include leading-tight;
+  @include text-sm;
+  @include text-secondary;
+  @include tracking-wide;
+  text-transform: uppercase;
+  @include fmt-4;
+  @include fmb-1;
+}
+
+@mixin body-text {
+  @include fmt-0;
+  @include fmb-3;
+  @include fmx-0;
+  @include font-body;
+  @include text-base;
+  @include font-regular;
+  @include leading-normal;
+  @include text-primary;
+}
+
+@mixin body-note {
+  @include fmt-0;
+  @include fmb-1;
+  @include fmx-0;
+  @include font-note;
+  @include text-base;
+  @include font-light;
+  @include text-primary;
+  @include leading-tight;
+}
+
+@mixin body-link {
+  color: currentColor;
+  text-decoration: underline;
+  text-underline-offset: 5%;
+  text-underline-position: under;
+  text-decoration-style: dotted;
+  text-decoration-thickness: 1px;
+  text-decoration-color: var(--theme-colour-text-secondary);
+}
+
+// @mixin \!h1 {
+//   @include \!text-primary;
+//   @include \!font-bold;
+// }