From d7517c13c9c7bf7dd92db7495c1a38a64fca6ff9 Mon Sep 17 00:00:00 2001
From: Prasanta Kumar Dutta <7580745+pkd2512@users.noreply.github.com>
Date: Tue, 8 Aug 2023 13:07:13 +0530
Subject: [PATCH] block and graphic block text styles

---
 src/components/Block/Block.svelte             | 10 ++----
 .../GraphicBlock/GraphicBlock.svelte          | 19 ++++-------
 src/components/NoteText/NoteText.svelte       |  2 +-
 .../SiteHeadline/SiteHeadline.svelte          |  8 ++---
 src/scss/tokens/text/_main.scss               |  1 +
 src/scss/tokens/text/_text-role.scss          | 33 +++++++++++++++++++
 src/scss/tokens/text/mixins/_text-role.scss   | 13 ++++++--
 7 files changed, 57 insertions(+), 29 deletions(-)
 create mode 100644 src/scss/tokens/text/_text-role.scss

diff --git a/src/components/Block/Block.svelte b/src/components/Block/Block.svelte
index bf6a8cdd..8c9f25e2 100644
--- a/src/components/Block/Block.svelte
+++ b/src/components/Block/Block.svelte
@@ -35,14 +35,10 @@
 <style lang="scss">
   @import '../../scss/mixins';
 
-  div.article-block {
+  .article-block {
     max-width: var(--normal-column-width, 660px);
-    margin-left: auto;
-    margin-right: auto;
-    margin-top: 0;
-    &:not(:last-child) {
-      margin-bottom: 3rem;
-    }
+    @include fmx-auto;
+    @include fmy-5;
 
     &.narrower {
       max-width: var(--narrower-column-width, 330px);
diff --git a/src/components/GraphicBlock/GraphicBlock.svelte b/src/components/GraphicBlock/GraphicBlock.svelte
index 90896b6e..4aed718c 100644
--- a/src/components/GraphicBlock/GraphicBlock.svelte
+++ b/src/components/GraphicBlock/GraphicBlock.svelte
@@ -136,23 +136,16 @@
 <style lang="scss" global>
   @import '../../scss/mixins';
 
-  div.article-block.graphic {
+  .article-block.graphic {
+    // Dek
     p {
-      @include font-note;
-      @include text-sm;
-      @include text-primary;
-      &:last-of-type {
-        @include fmb-1;
-      }
+      @include body-note;
     }
-    // Notes text...
+    // Caption and Sources
     aside {
+      @include fmt-2;
       p {
-        @include font-note;
-        @include text-secondary;
-        @include text-xs;
-        @include leading-tight;
-        margin-block-end: 0;
+        @include body-caption;
       }
     }
   }
diff --git a/src/components/NoteText/NoteText.svelte b/src/components/NoteText/NoteText.svelte
index d6bd2b9d..cb3af85e 100644
--- a/src/components/NoteText/NoteText.svelte
+++ b/src/components/NoteText/NoteText.svelte
@@ -21,7 +21,7 @@
 <style lang="scss" global>
   @import '../../scss/mixins';
 
-  div.article-block.notes {
+  .article-block.notes {
     h2,
     h3,
     h4,
diff --git a/src/components/SiteHeadline/SiteHeadline.svelte b/src/components/SiteHeadline/SiteHeadline.svelte
index 9108ddeb..109d1fbe 100644
--- a/src/components/SiteHeadline/SiteHeadline.svelte
+++ b/src/components/SiteHeadline/SiteHeadline.svelte
@@ -115,9 +115,7 @@
     </div>
     <aside class="article-metadata mt-2 font-subhed">
       <div class="byline-container">
-        <div
-          class="byline text-xs text-primary font-bold leading-tighter fmb-1"
-        >
+        <div class="byline body-caption !font-bold">
           By
           {#if authors.length > 0}
             {#each authors as author, i}
@@ -137,9 +135,7 @@
           {/if}
         </div>
       </div>
-      <div
-        class="dateline-container fmt-0 text-secondary text-xs leading-tighter"
-      >
+      <div class="dateline-container fmt-0 body-caption">
         {#if isValidDate(publishTime)}
           <div>
             Published
diff --git a/src/scss/tokens/text/_main.scss b/src/scss/tokens/text/_main.scss
index 53b7189b..7c59ac07 100644
--- a/src/scss/tokens/text/_main.scss
+++ b/src/scss/tokens/text/_main.scss
@@ -12,3 +12,4 @@
 @forward 'vertical-align';
 @forward 'white-space';
 @forward 'word-break';
+@forward 'text-role';
diff --git a/src/scss/tokens/text/_text-role.scss b/src/scss/tokens/text/_text-role.scss
new file mode 100644
index 00000000..74cccbdf
--- /dev/null
+++ b/src/scss/tokens/text/_text-role.scss
@@ -0,0 +1,33 @@
+@use 'mixins/text-role' as *;
+
+.h1 {
+  @include h1;
+}
+
+.h2 {
+  @include h2;
+}
+
+.h3 {
+  @include h3;
+}
+
+.h4 {
+  @include h4;
+}
+
+.body-text {
+  @include body-text;
+}
+
+.body-note {
+  @include body-note;
+}
+
+.body-caption {
+  @include body-caption;
+}
+
+.body-link {
+  @include body-link;
+}
diff --git a/src/scss/tokens/text/mixins/_text-role.scss b/src/scss/tokens/text/mixins/_text-role.scss
index 0979489e..6424b007 100644
--- a/src/scss/tokens/text/mixins/_text-role.scss
+++ b/src/scss/tokens/text/mixins/_text-role.scss
@@ -61,15 +61,24 @@
 
 @mixin body-note {
   @include fmt-0;
-  @include fmb-1;
+  @include fmb-2;
   @include fmx-0;
   @include font-note;
-  @include text-base;
+  font-size: calc(0.95 * var(--theme-font-size-base));
   @include font-light;
   @include text-primary;
   @include leading-tight;
 }
 
+@mixin body-caption {
+  @include font-note;
+  @include text-secondary;
+  @include text-xs;
+  @include leading-tighter;
+  @include font-regular;
+  @include fmb-1;
+}
+
 @mixin body-link {
   color: currentColor;
   text-decoration: underline;