From e53e0911ad7f592d454b858f9f879934d2035627 Mon Sep 17 00:00:00 2001
From: Prasanta Kumar Dutta <7580745+pkd2512@users.noreply.github.com>
Date: Tue, 8 Aug 2023 17:30:05 +0530
Subject: [PATCH] scrub text styles into components

---
 src/components/BeforeAfter/BeforeAfter.svelte |  25 +-
 .../DatawrapperChart.stories.svelte           |   4 +-
 .../DatawrapperChart/DatawrapperChart.svelte  |   6 -
 .../DocumentCloud/DocumentCloud.svelte        |   2 +-
 .../FeaturePhoto/FeaturePhoto.svelte          |   6 +-
 .../GraphicBlock/GraphicBlock.svelte          |   2 +-
 src/components/NoteText/NoteText.svelte       |  15 +-
 .../PhotoCarousel/PhotoCarousel.svelte        |   6 +-
 .../PhotoPack/PhotoPack.stories.svelte        |   2 +-
 src/components/PhotoPack/PhotoPack.svelte     |  40 ++--
 .../ReferralBlock/ReferralBlock.svelte        |  61 ++---
 src/components/Scroller/Background.svelte     |   2 +-
 src/components/Scroller/Foreground.svelte     |   8 +-
 .../SiteHeadline/SiteHeadline.svelte          |  14 +-
 src/scss/reset/_main.scss                     |  21 ++
 src/scss/reset/_typography.scss               |  12 +-
 src/scss/tokens/spacers/_fluid-margin.scss    |  12 +-
 .../tokens/spacers/mixins/_fluid-margin.scss  | 214 +++++++++++++++++-
 .../tokens/spacers/mixins/_fluid-padding.scss | 210 +++++++++++++++++
 src/scss/tokens/text/mixins/_text-role.scss   |   2 +-
 20 files changed, 531 insertions(+), 133 deletions(-)

diff --git a/src/components/BeforeAfter/BeforeAfter.svelte b/src/components/BeforeAfter/BeforeAfter.svelte
index 373d1599..1d0b94a0 100644
--- a/src/components/BeforeAfter/BeforeAfter.svelte
+++ b/src/components/BeforeAfter/BeforeAfter.svelte
@@ -41,7 +41,7 @@
   /** Drag handle colour */
   export let handleColour = 'white';
   /** Drag handle opacity */
-  export let handleInactiveOpacity = 0.6;
+  export let handleInactiveOpacity = 0.9;
   /** Margin at the edge of the image to stop dragging */
   export let handleMargin = 20;
   /** Percentage of the component width the handle will travel ona key press */
@@ -225,7 +225,7 @@
     </div>
     {#if $$slots.caption}
       <PaddingReset containerIsFluid="{width === 'fluid'}">
-        <aside class="before-after-caption my-0 mx-auto" id="{`${id}-caption`}">
+        <aside class="before-after-caption mx-auto" id="{`${id}-caption`}">
           <!-- Caption for image credits -->
           <slot name="caption" />
         </aside>
@@ -236,6 +236,7 @@
 
 <style lang="scss">
   @use '../../scss/mixins' as *;
+
   figure.before-after-container {
     box-sizing: content-box;
 
@@ -261,9 +262,8 @@
           margin-bottom: 0;
         }
         p {
-          @include font-note;
-          @include text-sm;
-          @include leading-tight;
+          @include body-caption;
+          color: #ffffff;
         }
       }
       &.before {
@@ -289,14 +289,17 @@
     top: calc(50% - 20px);
     border: 4px solid var(--before-after-handle-colour);
     opacity: var(--before-after-handle-inactive-opacity, 0.6);
+    box-shadow: 1px 1px 3px #333;
     &:hover,
     &:active,
     &:focus {
       opacity: 1;
     }
+
     &:before,
     &:after {
       content: '';
+      box-shadow: 0 0 3px #333;
       height: 9999px;
       position: absolute;
       left: calc(50% - 2px);
@@ -328,18 +331,12 @@
       border-right: 10px solid var(--before-after-handle-colour);
     }
   }
+
   aside.before-after-caption {
-    @include font-note;
-    @include text-secondary;
+    @include fmt-2;
     :global {
       p {
-        @include font-note;
-        @include text-secondary;
-        @include text-xs;
-        @include leading-tight;
-        &:last-of-type {
-          margin-bottom: 0;
-        }
+        @include body-caption;
       }
     }
   }
diff --git a/src/components/DatawrapperChart/DatawrapperChart.stories.svelte b/src/components/DatawrapperChart/DatawrapperChart.stories.svelte
index 2636c30d..e4c74159 100644
--- a/src/components/DatawrapperChart/DatawrapperChart.stories.svelte
+++ b/src/components/DatawrapperChart/DatawrapperChart.stories.svelte
@@ -37,7 +37,7 @@
 <Story
   name="Default"
   args="{{
-    src: 'https://graphics.reuters.com/USA-ABORTION/lgpdwggnwvo/media-embed.html',
+    src: 'https://reuters.com/graphics/USA-ABORTION/lgpdwggnwvo/media-embed.html',
     id: 'abortion-rights-map',
     ariaLabel: 'map',
     frameTitle: 'Global abortion access',
@@ -49,7 +49,7 @@
     frameTitle="Global abortion access"
     ariaLabel="map"
     id="abortion-rights-map"
-    src="https://graphics.reuters.com/USA-ABORTION/lgvdwemlbpo/media-embed.html"
+    src="https://reuters.com/graphics/USA-ABORTION/lgvdwemlbpo/media-embed.html"
     title="Global abortion access"
     description="A map of worldwide access to abortion."
     notes="{'Note: Different indicators and additional restrictions, including different gestational limits, apply in some countries. Refer to source for full classification. Current as of May 4, 2022.\n\nSource: Center for Reproductive Rights'}"
diff --git a/src/components/DatawrapperChart/DatawrapperChart.svelte b/src/components/DatawrapperChart/DatawrapperChart.svelte
index 87637907..12bd9bcb 100644
--- a/src/components/DatawrapperChart/DatawrapperChart.svelte
+++ b/src/components/DatawrapperChart/DatawrapperChart.svelte
@@ -111,9 +111,3 @@
     <slot name="notes" />
   {/if}
 </GraphicBlock>
-
-<style lang="scss">
-  .datawrapper-chart {
-    margin: auto;
-  }
-</style>
diff --git a/src/components/DocumentCloud/DocumentCloud.svelte b/src/components/DocumentCloud/DocumentCloud.svelte
index 89ad0e94..454dbe03 100644
--- a/src/components/DocumentCloud/DocumentCloud.svelte
+++ b/src/components/DocumentCloud/DocumentCloud.svelte
@@ -32,11 +32,11 @@
 
 <Block width="{width}" id="{id}" class="photo {cls}">
   <iframe
+    class="h-screen"
     src="https://embed.documentcloud.org/documents/{slug}/?embed=1&amp;responsive=1&amp;title=1"
     title="{altText}"
     width="700"
     height="540"
-    style="border: 1px solid #aaa; width: 100%; height: 800px; height: calc(100vh - 100px);"
     sandbox="allow-scripts allow-same-origin allow-popups allow-forms allow-popups-to-escape-sandbox"
   ></iframe>
 </Block>
diff --git a/src/components/FeaturePhoto/FeaturePhoto.svelte b/src/components/FeaturePhoto/FeaturePhoto.svelte
index 707e5e13..f9d7807e 100644
--- a/src/components/FeaturePhoto/FeaturePhoto.svelte
+++ b/src/components/FeaturePhoto/FeaturePhoto.svelte
@@ -85,16 +85,16 @@
   <figure
     bind:this="{container}"
     aria-label="media"
-    class="w-full mt-0 mx-0 mb-6 flex flex-col relative"
+    class="w-full flex flex-col relative"
   >
     {#if !lazy || (intersectable && intersecting)}
-      <img class="w-full m-0" src="{src}" alt="{altText}" />
+      <img class="w-full my-0" src="{src}" alt="{altText}" />
     {:else}
       <div class="placeholder w-full" style="{`height: ${height}px;`}"></div>
     {/if}
     {#if caption}
       <PaddingReset containerIsFluid="{width === 'fluid'}">
-        <figcaption class="font-note my-0 text-xs leading-tight">
+        <figcaption>
           {caption}
         </figcaption>
       </PaddingReset>
diff --git a/src/components/GraphicBlock/GraphicBlock.svelte b/src/components/GraphicBlock/GraphicBlock.svelte
index 4aed718c..e77e2082 100644
--- a/src/components/GraphicBlock/GraphicBlock.svelte
+++ b/src/components/GraphicBlock/GraphicBlock.svelte
@@ -92,7 +92,7 @@
     {:else if title}
       <PaddingReset containerIsFluid="{width === 'fluid'}">
         <TextBlock width="{textWidth}">
-          <h3 class="mt-0 fmb-1">{title}</h3>
+          <h3>{title}</h3>
           {#if description}
             {@html marked(description)}
           {/if}
diff --git a/src/components/NoteText/NoteText.svelte b/src/components/NoteText/NoteText.svelte
index cb3af85e..5be9f160 100644
--- a/src/components/NoteText/NoteText.svelte
+++ b/src/components/NoteText/NoteText.svelte
@@ -22,24 +22,21 @@
   @import '../../scss/mixins';
 
   .article-block.notes {
+    @include fmb-9;
+    @include fmt-7;
+
     h2,
     h3,
     h4,
     h5,
     h6 {
-      margin: var(--theme-font-size-base) 0 0;
-      @include text-sm;
-      @include text-primary;
-      @include leading-tight;
-      @include tracking-normal;
-      @include font-bold;
+      @include h3;
       text-transform: none;
     }
+
     p {
-      @include font-note;
-      @include font-light;
+      @include body-note;
       @include text-sm;
-      @include leading-tight;
     }
   }
 </style>
diff --git a/src/components/PhotoCarousel/PhotoCarousel.svelte b/src/components/PhotoCarousel/PhotoCarousel.svelte
index 0e72e419..57655272 100644
--- a/src/components/PhotoCarousel/PhotoCarousel.svelte
+++ b/src/components/PhotoCarousel/PhotoCarousel.svelte
@@ -98,7 +98,7 @@
 </script>
 
 <Block width="{width}" id="{id}" class="photo-carousel {cls}">
-  <div class="carousel-container mb-2" bind:clientWidth="{containerWidth}">
+  <div class="carousel-container" bind:clientWidth="{containerWidth}">
     <Splide
       hasTrack="{false}"
       options="{{
@@ -120,7 +120,7 @@
                   style="height: {carouselHeight}px;"
                 >
                   <img
-                    class="w-full h-full"
+                    class="w-full h-full my-0"
                     data-splide-lazy="{photo.src}"
                     alt="{photo.altText}"
                     style:object-fit="{photo.objectFit ||
@@ -154,7 +154,7 @@
             {:else}
               {#key activeImageIndex}
                 <p
-                  class="caption font-note text-secondary text-xs mb-0 mx-0 mt-0.5"
+                  class="caption body-caption fmt-2"
                   in:fly|local="{{ x: 20, duration: 175 }}"
                 >
                   {photos[activeImageIndex].caption}
diff --git a/src/components/PhotoPack/PhotoPack.stories.svelte b/src/components/PhotoPack/PhotoPack.stories.svelte
index 3449aaba..a86927a2 100644
--- a/src/components/PhotoPack/PhotoPack.stories.svelte
+++ b/src/components/PhotoPack/PhotoPack.stories.svelte
@@ -66,7 +66,7 @@
     Class: 'mb-2',
     Width: 'wide',
     CaptionWidth: 'normal',
-    Gap: '10',
+    Gap: '15',
     Images: [
       {
         Src: 'https://via.placeholder.com/1024x768.jpg',
diff --git a/src/components/PhotoPack/PhotoPack.svelte b/src/components/PhotoPack/PhotoPack.svelte
index 50ebe903..aae28998 100644
--- a/src/components/PhotoPack/PhotoPack.svelte
+++ b/src/components/PhotoPack/PhotoPack.svelte
@@ -25,7 +25,7 @@
    * Gap between images.
    * @type {number}
    */
-  export let gap = 10;
+  export let gap = 15;
 
   const random4 = () =>
     Math.floor((1 + Math.random()) * 0x10000)
@@ -120,18 +120,16 @@
     {/each}
   </div>
   <PaddingReset containerIsFluid="{width === 'fluid'}">
-    <Block width="{captionWidth}">
-      <div class="captions-container">
-        {#each rows as row, ri}
-          {#each row as img, i}
-            {#if img.caption}
-              <div id="{id}-figure-{ri}-{i}" class="caption mt-0 mx-0 fmb-2">
-                {@html marked(img.caption)}
-              </div>
-            {/if}
-          {/each}
+    <Block width="{captionWidth}" class="photopack-captions-container">
+      {#each rows as row, ri}
+        {#each row as img, i}
+          {#if img.caption}
+            <div id="{id}-figure-{ri}-{i}" class="caption">
+              {@html marked(img.caption)}
+            </div>
+          {/if}
         {/each}
-      </div>
+      {/each}
     </Block>
   </PaddingReset>
 </Block>
@@ -152,17 +150,13 @@
     }
   }
 
-  div.captions-container {
-    div.caption {
-      &:last-of-type {
-        margin-bottom: 0;
-      }
-      :global(p) {
-        @include text-xs;
-        @include leading-tight;
-        @include font-note;
-        @include text-secondary;
-        margin: 0;
+  :global {
+    .photopack-captions-container {
+      @include \!fmy-2;
+      div.caption {
+        p {
+          @include body-caption;
+        }
       }
     }
   }
diff --git a/src/components/ReferralBlock/ReferralBlock.svelte b/src/components/ReferralBlock/ReferralBlock.svelte
index 10e7dd80..d8f1999f 100644
--- a/src/components/ReferralBlock/ReferralBlock.svelte
+++ b/src/components/ReferralBlock/ReferralBlock.svelte
@@ -79,14 +79,14 @@
   <Block width="{width}" id="{id}" class="referrals-block {cls}">
     {#if heading}
       <div
-        class="heading font-subhed text-secondary underline text-xs font-bold"
+        class="heading h4 font-bold"
         class:stacked="{clientWidth && clientWidth < 750}"
       >
         {heading}
       </div>
     {/if}
     <div
-      class="referral-container inline-flex flex-wrap w-full justify-center"
+      class="referral-container inline-flex flex-wrap w-full justify-between"
       class:stacked="{clientWidth && clientWidth < 750}"
       class:xs="{clientWidth && clientWidth < 450}"
       bind:clientWidth="{clientWidth}"
@@ -103,22 +103,13 @@
                 class="headline"
                 class:xs="{clientWidth && clientWidth < 450}"
               >
-                <div
-                  class="kicker m-0 font-note text-secondary"
-                  data-chromatic="ignore"
-                >
+                <div class="kicker m-0 body-caption" data-chromatic="ignore">
                   {referral.kicker.name}
                 </div>
-                <div
-                  class="title m-0 font-subhed font-bold text-primary"
-                  data-chromatic="ignore"
-                >
+                <div class="title m-0 body-caption" data-chromatic="ignore">
                   {referral.title}
                 </div>
-                <div
-                  class="publish-time font-note text-secondary"
-                  data-chromatic="ignore"
-                >
+                <div class="publish-time body-caption" data-chromatic="ignore">
                   {getTime(new Date(referral.display_time))}
                 </div>
               </div>
@@ -146,15 +137,12 @@
   @use '../../scss/mixins' as *;
 
   div.heading {
-    margin: 0 0 5px;
     &.stacked {
       max-width: 450px;
-      margin: 0 auto 5px;
     }
   }
 
   .referral-container {
-    gap: 10px 40px;
     a {
       text-decoration: none;
     }
@@ -162,14 +150,15 @@
       .referral {
         width: 100%;
         .headline {
-          padding: 0 10px 0 0;
+          width: calc(100% - 7rem);
         }
       }
     }
     .referral {
       display: block;
-      width: calc(50% - 20px);
+      width: calc(50% - 30px);
       max-width: 450px;
+      @include fmy-1;
 
       &:hover {
         .title {
@@ -182,42 +171,34 @@
 
       .headline {
         display: inline-block;
-        width: calc(100% - 140px);
-        padding: 0 10px 0 0;
+        width: calc(100% - 9rem);
+        @include fpr-2;
         &.xs {
-          width: calc(100% - 80px);
-          .kicker {
-            font-size: 0.85rem;
-          }
-          .title {
-            font-size: 0.9rem;
-            line-height: 1.1rem;
-          }
         }
         .kicker {
-          font-size: 0.9rem;
+          @include text-xxs;
         }
         .title {
-          font-size: 0.95rem;
-          line-height: 1.15rem;
+          @include font-medium;
+          @include text-sm;
+          @include text-primary;
         }
         .publish-time {
-          font-size: 0.75rem;
-          margin: 2px 0 0;
+          @include text-xxs;
         }
       }
       .image-container {
-        border-radius: 10px;
+        border-radius: 0.25rem;
         border: 1px solid $theme-colour-brand-rules;
-        width: 140px;
-        height: 90px;
+        width: 9rem;
         &.xs {
-          width: 80px;
-          height: 60px;
+          width: 7rem;
         }
         img {
+          width: 100%;
+          height: 100%;
+          object-fit: cover;
           transition: filter 0.1s;
-          height: inherit;
         }
       }
     }
diff --git a/src/components/Scroller/Background.svelte b/src/components/Scroller/Background.svelte
index ebd7bbd0..f98a7511 100644
--- a/src/components/Scroller/Background.svelte
+++ b/src/components/Scroller/Background.svelte
@@ -26,7 +26,7 @@
 
 <style lang="scss">
   .step-background {
-    transition: 0.5s opacity ease;
+    transition: 0.35s opacity ease;
 
     &.hidden {
       opacity: 0;
diff --git a/src/components/Scroller/Foreground.svelte b/src/components/Scroller/Foreground.svelte
index c54d6532..094eaf3e 100644
--- a/src/components/Scroller/Foreground.svelte
+++ b/src/components/Scroller/Foreground.svelte
@@ -46,9 +46,11 @@
     width: initial;
     max-width: initial;
     .step-foreground {
-      max-width: 550px;
-      padding: 1.2rem 30px;
-      background: rgba(255, 255, 255, 0.8);
+      max-width: calc($column-width-normal * 0.9);
+      @include fpy-5;
+      @include fpx-4;
+      background: rgba(255, 255, 255, 0.9);
+
       :global(p:last-child) {
         margin-bottom: 0;
       }
diff --git a/src/components/SiteHeadline/SiteHeadline.svelte b/src/components/SiteHeadline/SiteHeadline.svelte
index 109d1fbe..0e4a3252 100644
--- a/src/components/SiteHeadline/SiteHeadline.svelte
+++ b/src/components/SiteHeadline/SiteHeadline.svelte
@@ -115,7 +115,7 @@
     </div>
     <aside class="article-metadata mt-2 font-subhed">
       <div class="byline-container">
-        <div class="byline body-caption !font-bold">
+        <div class="byline body-caption">
           By
           {#if authors.length > 0}
             {#each authors as author, i}
@@ -171,10 +171,14 @@
 
 <style lang="scss">
   @use '../../scss/mixins' as *;
-  .byline a {
-    text-decoration-line: none;
-    &:hover {
-      text-decoration-line: underline;
+
+  .byline {
+    @include font-bold;
+    a {
+      text-decoration-line: none;
+      &:hover {
+        text-decoration-line: underline;
+      }
     }
   }
 
diff --git a/src/scss/reset/_main.scss b/src/scss/reset/_main.scss
index fd961a1d..c0e6ddf7 100644
--- a/src/scss/reset/_main.scss
+++ b/src/scss/reset/_main.scss
@@ -1,3 +1,4 @@
+@use '../mixins' as *;
 @import 'normalize.css';
 @import 'typography';
 
@@ -9,4 +10,24 @@
 
 body {
   -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+
+  ::selection {
+    background-color: $theme-colour-text-secondary;
+    color: $theme-colour-background;
+  }
+}
+
+img {
+  max-width: 100%;
+  @include fmy-5;
+}
+
+figure {
+  @include fmy-5;
+  @include fmx-auto;
+}
+
+iframe {
+  border: 0;
+  width: 100%;
 }
diff --git a/src/scss/reset/_typography.scss b/src/scss/reset/_typography.scss
index f1f83298..dadd19bc 100644
--- a/src/scss/reset/_typography.scss
+++ b/src/scss/reset/_typography.scss
@@ -14,11 +14,6 @@ body {
   .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;
-    }
   }
 }
 
@@ -112,11 +107,8 @@ kbd {
 }
 
 figcaption {
-  @include text-sm;
-  @include font-regular;
-  @include leading-normal;
-  @include text-secondary;
-  @include font-note;
+  @include fmt-2;
+  @include body-caption;
 }
 
 blockquote {
diff --git a/src/scss/tokens/spacers/_fluid-margin.scss b/src/scss/tokens/spacers/_fluid-margin.scss
index bebb5973..9c0cfdda 100644
--- a/src/scss/tokens/spacers/_fluid-margin.scss
+++ b/src/scss/tokens/spacers/_fluid-margin.scss
@@ -17,12 +17,10 @@
     margin-left: $value;
   }
   %fmx-#{$level} {
-    margin-right: $value;
-    margin-left: $value;
+    margin-inline: $value;
   }
   %fmy-#{$level} {
-    margin-top: $value;
-    margin-bottom: $value;
+    margin-block: $value;
   }
 
   %\!fm-#{$level} {
@@ -41,12 +39,10 @@
     margin-left: $value !important;
   }
   %\!fmx-#{$level} {
-    margin-right: $value !important;
-    margin-left: $value !important;
+    margin-inline: $value !important;
   }
   %\!fmy-#{$level} {
-    margin-top: $value !important;
-    margin-bottom: $value !important;
+    margin-block: $value !important;
   }
 }
 
diff --git a/src/scss/tokens/spacers/mixins/_fluid-margin.scss b/src/scss/tokens/spacers/mixins/_fluid-margin.scss
index e16b0188..c87a5e37 100644
--- a/src/scss/tokens/spacers/mixins/_fluid-margin.scss
+++ b/src/scss/tokens/spacers/mixins/_fluid-margin.scss
@@ -34,6 +34,27 @@ $fluid-margin-levels: (
 @mixin fmr-0 {
   margin-right: map.get($fluid-margin-levels, '0');
 }
+@mixin \!fm-0 {
+  margin: map.get($fluid-margin-levels, '0') !important;
+}
+@mixin \!fmx-0 {
+  margin-inline: map.get($fluid-margin-levels, '0') !important;
+}
+@mixin \!fmy-0 {
+  margin-block: map.get($fluid-margin-levels, '0') !important;
+}
+@mixin \!fmt-0 {
+  margin-top: map.get($fluid-margin-levels, '0') !important;
+}
+@mixin \!fmb-0 {
+  margin-bottom: map.get($fluid-margin-levels, '0') !important;
+}
+@mixin \!fml-0 {
+  margin-left: map.get($fluid-margin-levels, '0') !important;
+}
+@mixin \!fmr-0 {
+  margin-right: map.get($fluid-margin-levels, '0') !important;
+}
 
 @mixin fm-1 {
   margin: map.get($fluid-margin-levels, '1');
@@ -53,8 +74,29 @@ $fluid-margin-levels: (
 @mixin fml-1 {
   margin-left: map.get($fluid-margin-levels, '1');
 }
-@mixin fmr-1 {
-  margin-right: map.get($fluid-margin-levels, '1');
+@mixin \!fmr-1 {
+  margin-right: map.get($fluid-margin-levels, '1') !important;
+}
+@mixin \!fm-1 {
+  margin: map.get($fluid-margin-levels, '1') !important;
+}
+@mixin \!fmx-1 {
+  margin-inline: map.get($fluid-margin-levels, '1') !important;
+}
+@mixin \!fmy-1 {
+  margin-block: map.get($fluid-margin-levels, '1') !important;
+}
+@mixin \!fmt-1 {
+  margin-top: map.get($fluid-margin-levels, '1') !important;
+}
+@mixin \!fmb-1 {
+  margin-bottom: map.get($fluid-margin-levels, '1') !important;
+}
+@mixin \!fml-1 {
+  margin-left: map.get($fluid-margin-levels, '1') !important;
+}
+@mixin \!fmr-1 {
+  margin-right: map.get($fluid-margin-levels, '1') !important;
 }
 
 @mixin fm-2 {
@@ -78,6 +120,27 @@ $fluid-margin-levels: (
 @mixin fmr-2 {
   margin-right: map.get($fluid-margin-levels, '2');
 }
+@mixin \!fm-2 {
+  margin: map.get($fluid-margin-levels, '2') !important;
+}
+@mixin \!fmx-2 {
+  margin-inline: map.get($fluid-margin-levels, '2') !important;
+}
+@mixin \!fmy-2 {
+  margin-block: map.get($fluid-margin-levels, '2') !important;
+}
+@mixin \!fmt-2 {
+  margin-top: map.get($fluid-margin-levels, '2') !important;
+}
+@mixin \!fmb-2 {
+  margin-bottom: map.get($fluid-margin-levels, '2') !important;
+}
+@mixin \!fml-2 {
+  margin-left: map.get($fluid-margin-levels, '2') !important;
+}
+@mixin \!fmr-2 {
+  margin-right: map.get($fluid-margin-levels, '2') !important;
+}
 
 @mixin fm-3 {
   margin: map.get($fluid-margin-levels, '3');
@@ -100,6 +163,27 @@ $fluid-margin-levels: (
 @mixin fmr-3 {
   margin-right: map.get($fluid-margin-levels, '3');
 }
+@mixin \!fm-3 {
+  margin: map.get($fluid-margin-levels, '3') !important;
+}
+@mixin \!fmx-3 {
+  margin-inline: map.get($fluid-margin-levels, '3') !important;
+}
+@mixin \!fmy-3 {
+  margin-block: map.get($fluid-margin-levels, '3') !important;
+}
+@mixin \!fmt-3 {
+  margin-top: map.get($fluid-margin-levels, '3') !important;
+}
+@mixin \!fmb-3 {
+  margin-bottom: map.get($fluid-margin-levels, '3') !important;
+}
+@mixin \!fml-3 {
+  margin-left: map.get($fluid-margin-levels, '3') !important;
+}
+@mixin \!fmr-3 {
+  margin-right: map.get($fluid-margin-levels, '3') !important;
+}
 
 @mixin fm-4 {
   margin: map.get($fluid-margin-levels, '4');
@@ -122,6 +206,27 @@ $fluid-margin-levels: (
 @mixin fmr-4 {
   margin-right: map.get($fluid-margin-levels, '4');
 }
+@mixin \!fm-4 {
+  margin: map.get($fluid-margin-levels, '4') !important;
+}
+@mixin \!fmx-4 {
+  margin-inline: map.get($fluid-margin-levels, '4') !important;
+}
+@mixin \!fmy-4 {
+  margin-block: map.get($fluid-margin-levels, '4') !important;
+}
+@mixin \!fmt-4 {
+  margin-top: map.get($fluid-margin-levels, '4') !important;
+}
+@mixin \!fmb-4 {
+  margin-bottom: map.get($fluid-margin-levels, '4') !important;
+}
+@mixin \!fml-4 {
+  margin-left: map.get($fluid-margin-levels, '4') !important;
+}
+@mixin \!fmr-4 {
+  margin-right: map.get($fluid-margin-levels, '4') !important;
+}
 
 @mixin fm-5 {
   margin: map.get($fluid-margin-levels, '5');
@@ -144,6 +249,27 @@ $fluid-margin-levels: (
 @mixin fmr-5 {
   margin-right: map.get($fluid-margin-levels, '5');
 }
+@mixin \!fm-5 {
+  margin: map.get($fluid-margin-levels, '5') !important;
+}
+@mixin \!fmx-5 {
+  margin-inline: map.get($fluid-margin-levels, '5') !important;
+}
+@mixin \!fmy-5 {
+  margin-block: map.get($fluid-margin-levels, '5') !important;
+}
+@mixin \!fmt-5 {
+  margin-top: map.get($fluid-margin-levels, '5') !important;
+}
+@mixin \!fmb-5 {
+  margin-bottom: map.get($fluid-margin-levels, '5') !important;
+}
+@mixin \!fml-5 {
+  margin-left: map.get($fluid-margin-levels, '5') !important;
+}
+@mixin \!fmr-5 {
+  margin-right: map.get($fluid-margin-levels, '5') !important;
+}
 
 @mixin fm-6 {
   margin: map.get($fluid-margin-levels, '6');
@@ -166,6 +292,27 @@ $fluid-margin-levels: (
 @mixin fmr-6 {
   margin-right: map.get($fluid-margin-levels, '6');
 }
+@mixin \!fm-6 {
+  margin: map.get($fluid-margin-levels, '6') !important;
+}
+@mixin \!fmx-6 {
+  margin-inline: map.get($fluid-margin-levels, '6') !important;
+}
+@mixin \!fmy-6 {
+  margin-block: map.get($fluid-margin-levels, '6') !important;
+}
+@mixin \!fmt-6 {
+  margin-top: map.get($fluid-margin-levels, '6') !important;
+}
+@mixin \!fmb-6 {
+  margin-bottom: map.get($fluid-margin-levels, '6') !important;
+}
+@mixin \!fml-6 {
+  margin-left: map.get($fluid-margin-levels, '6') !important;
+}
+@mixin \!fmr-6 {
+  margin-right: map.get($fluid-margin-levels, '6') !important;
+}
 
 @mixin fm-7 {
   margin: map.get($fluid-margin-levels, '7');
@@ -188,6 +335,27 @@ $fluid-margin-levels: (
 @mixin fmr-7 {
   margin-right: map.get($fluid-margin-levels, '7');
 }
+@mixin \!fm-7 {
+  margin: map.get($fluid-margin-levels, '7') !important;
+}
+@mixin \!fmx-7 {
+  margin-inline: map.get($fluid-margin-levels, '7') !important;
+}
+@mixin \!fmy-7 {
+  margin-block: map.get($fluid-margin-levels, '7') !important;
+}
+@mixin \!fmt-7 {
+  margin-top: map.get($fluid-margin-levels, '7') !important;
+}
+@mixin \!fmb-7 {
+  margin-bottom: map.get($fluid-margin-levels, '7') !important;
+}
+@mixin \!fml-7 {
+  margin-left: map.get($fluid-margin-levels, '7') !important;
+}
+@mixin \!fmr-7 {
+  margin-right: map.get($fluid-margin-levels, '7') !important;
+}
 
 @mixin fm-8 {
   margin: map.get($fluid-margin-levels, '8');
@@ -210,6 +378,27 @@ $fluid-margin-levels: (
 @mixin fmr-8 {
   margin-right: map.get($fluid-margin-levels, '8');
 }
+@mixin \!fm-8 {
+  margin: map.get($fluid-margin-levels, '8') !important;
+}
+@mixin \!fmx-8 {
+  margin-inline: map.get($fluid-margin-levels, '8') !important;
+}
+@mixin \!fmy-8 {
+  margin-block: map.get($fluid-margin-levels, '8') !important;
+}
+@mixin \!fmt-8 {
+  margin-top: map.get($fluid-margin-levels, '8') !important;
+}
+@mixin \!fmb-8 {
+  margin-bottom: map.get($fluid-margin-levels, '8') !important;
+}
+@mixin \!fml-8 {
+  margin-left: map.get($fluid-margin-levels, '8') !important;
+}
+@mixin \!fmr-8 {
+  margin-right: map.get($fluid-margin-levels, '8') !important;
+}
 
 @mixin fm-9 {
   margin: map.get($fluid-margin-levels, '9');
@@ -232,6 +421,27 @@ $fluid-margin-levels: (
 @mixin fmr-9 {
   margin-right: map.get($fluid-margin-levels, '9');
 }
+@mixin \!fm-9 {
+  margin: map.get($fluid-margin-levels, '9') !important;
+}
+@mixin \!fmx-9 {
+  margin-inline: map.get($fluid-margin-levels, '9') !important;
+}
+@mixin \!fmy-9 {
+  margin-block: map.get($fluid-margin-levels, '9') !important;
+}
+@mixin \!fmt-9 {
+  margin-top: map.get($fluid-margin-levels, '9') !important;
+}
+@mixin \!fmb-9 {
+  margin-bottom: map.get($fluid-margin-levels, '9') !important;
+}
+@mixin \!fml-9 {
+  margin-left: map.get($fluid-margin-levels, '9') !important;
+}
+@mixin \!fmr-9 {
+  margin-right: map.get($fluid-margin-levels, '9') !important;
+}
 
 @mixin fm-auto {
   margin: auto;
diff --git a/src/scss/tokens/spacers/mixins/_fluid-padding.scss b/src/scss/tokens/spacers/mixins/_fluid-padding.scss
index c873ea00..4356677c 100644
--- a/src/scss/tokens/spacers/mixins/_fluid-padding.scss
+++ b/src/scss/tokens/spacers/mixins/_fluid-padding.scss
@@ -34,6 +34,27 @@ $fluid-padding-levels: (
 @mixin fpr-0 {
   padding-right: map.get($fluid-padding-levels, '0');
 }
+@mixin \!fp-0 {
+  padding: map.get($fluid-padding-levels, '0') !important;
+}
+@mixin \!fpx-0 {
+  padding-inline: map.get($fluid-padding-levels, '0') !important;
+}
+@mixin \!fpy-0 {
+  padding-block: map.get($fluid-padding-levels, '0') !important;
+}
+@mixin \!fpt-0 {
+  padding-top: map.get($fluid-padding-levels, '0') !important;
+}
+@mixin \!fpb-0 {
+  padding-bottom: map.get($fluid-padding-levels, '0') !important;
+}
+@mixin \!fpl-0 {
+  padding-left: map.get($fluid-padding-levels, '0') !important;
+}
+@mixin \!fpr-0 {
+  padding-right: map.get($fluid-padding-levels, '0') !important;
+}
 
 @mixin fp-1 {
   padding: map.get($fluid-padding-levels, '1');
@@ -56,6 +77,27 @@ $fluid-padding-levels: (
 @mixin fpr-1 {
   padding-right: map.get($fluid-padding-levels, '1');
 }
+@mixin \!fp-1 {
+  padding: map.get($fluid-padding-levels, '1') !important;
+}
+@mixin \!fpx-1 {
+  padding-inline: map.get($fluid-padding-levels, '1') !important;
+}
+@mixin \!fpy-1 {
+  padding-block: map.get($fluid-padding-levels, '1') !important;
+}
+@mixin \!fpt-1 {
+  padding-top: map.get($fluid-padding-levels, '1') !important;
+}
+@mixin \!fpb-1 {
+  padding-bottom: map.get($fluid-padding-levels, '1') !important;
+}
+@mixin \!fpl-1 {
+  padding-left: map.get($fluid-padding-levels, '1') !important;
+}
+@mixin \!fpr-1 {
+  padding-right: map.get($fluid-padding-levels, '1') !important;
+}
 
 @mixin fp-2 {
   padding: map.get($fluid-padding-levels, '2');
@@ -78,6 +120,27 @@ $fluid-padding-levels: (
 @mixin fpr-2 {
   padding-right: map.get($fluid-padding-levels, '2');
 }
+@mixin \!fp-2 {
+  padding: map.get($fluid-padding-levels, '2') !important;
+}
+@mixin \!fpx-2 {
+  padding-inline: map.get($fluid-padding-levels, '2') !important;
+}
+@mixin \!fpy-2 {
+  padding-block: map.get($fluid-padding-levels, '2') !important;
+}
+@mixin \!fpt-2 {
+  padding-top: map.get($fluid-padding-levels, '2') !important;
+}
+@mixin \!fpb-2 {
+  padding-bottom: map.get($fluid-padding-levels, '2') !important;
+}
+@mixin \!fpl-2 {
+  padding-left: map.get($fluid-padding-levels, '2') !important;
+}
+@mixin \!fpr-2 {
+  padding-right: map.get($fluid-padding-levels, '2') !important;
+}
 
 @mixin fp-3 {
   padding: map.get($fluid-padding-levels, '3');
@@ -100,6 +163,27 @@ $fluid-padding-levels: (
 @mixin fpr-3 {
   padding-right: map.get($fluid-padding-levels, '3');
 }
+@mixin \!fp-3 {
+  padding: map.get($fluid-padding-levels, '3') !important;
+}
+@mixin \!fpx-3 {
+  padding-inline: map.get($fluid-padding-levels, '3') !important;
+}
+@mixin \!fpy-3 {
+  padding-block: map.get($fluid-padding-levels, '3') !important;
+}
+@mixin \!fpt-3 {
+  padding-top: map.get($fluid-padding-levels, '3') !important;
+}
+@mixin \!fpb-3 {
+  padding-bottom: map.get($fluid-padding-levels, '3') !important;
+}
+@mixin \!fpl-3 {
+  padding-left: map.get($fluid-padding-levels, '3') !important;
+}
+@mixin \!fpr-3 {
+  padding-right: map.get($fluid-padding-levels, '3') !important;
+}
 
 @mixin fp-4 {
   padding: map.get($fluid-padding-levels, '4');
@@ -122,6 +206,27 @@ $fluid-padding-levels: (
 @mixin fpr-4 {
   padding-right: map.get($fluid-padding-levels, '4');
 }
+@mixin \!fp-4 {
+  padding: map.get($fluid-padding-levels, '4') !important;
+}
+@mixin \!fpx-4 {
+  padding-inline: map.get($fluid-padding-levels, '4') !important;
+}
+@mixin \!fpy-4 {
+  padding-block: map.get($fluid-padding-levels, '4') !important;
+}
+@mixin \!fpt-4 {
+  padding-top: map.get($fluid-padding-levels, '4') !important;
+}
+@mixin \!fpb-4 {
+  padding-bottom: map.get($fluid-padding-levels, '4') !important;
+}
+@mixin \!fpl-4 {
+  padding-left: map.get($fluid-padding-levels, '4') !important;
+}
+@mixin \!fpr-4 {
+  padding-right: map.get($fluid-padding-levels, '4') !important;
+}
 
 @mixin fp-5 {
   padding: map.get($fluid-padding-levels, '5');
@@ -144,6 +249,27 @@ $fluid-padding-levels: (
 @mixin fpr-5 {
   padding-right: map.get($fluid-padding-levels, '5');
 }
+@mixin \!fp-5 {
+  padding: map.get($fluid-padding-levels, '5') !important;
+}
+@mixin \!fpx-5 {
+  padding-inline: map.get($fluid-padding-levels, '5') !important;
+}
+@mixin \!fpy-5 {
+  padding-block: map.get($fluid-padding-levels, '5') !important;
+}
+@mixin \!fpt-5 {
+  padding-top: map.get($fluid-padding-levels, '5') !important;
+}
+@mixin \!fpb-5 {
+  padding-bottom: map.get($fluid-padding-levels, '5') !important;
+}
+@mixin \!fpl-5 {
+  padding-left: map.get($fluid-padding-levels, '5') !important;
+}
+@mixin \!fpr-5 {
+  padding-right: map.get($fluid-padding-levels, '5') !important;
+}
 
 @mixin fp-6 {
   padding: map.get($fluid-padding-levels, '6');
@@ -166,6 +292,27 @@ $fluid-padding-levels: (
 @mixin fpr-6 {
   padding-right: map.get($fluid-padding-levels, '6');
 }
+@mixin \!fp-6 {
+  padding: map.get($fluid-padding-levels, '6') !important;
+}
+@mixin \!fpx-6 {
+  padding-inline: map.get($fluid-padding-levels, '6') !important;
+}
+@mixin \!fpy-6 {
+  padding-block: map.get($fluid-padding-levels, '6') !important;
+}
+@mixin \!fpt-6 {
+  padding-top: map.get($fluid-padding-levels, '6') !important;
+}
+@mixin \!fpb-6 {
+  padding-bottom: map.get($fluid-padding-levels, '6') !important;
+}
+@mixin \!fpl-6 {
+  padding-left: map.get($fluid-padding-levels, '6') !important;
+}
+@mixin \!fpr-6 {
+  padding-right: map.get($fluid-padding-levels, '6') !important;
+}
 
 @mixin fp-7 {
   padding: map.get($fluid-padding-levels, '7');
@@ -188,6 +335,27 @@ $fluid-padding-levels: (
 @mixin fpr-7 {
   padding-right: map.get($fluid-padding-levels, '7');
 }
+@mixin \!fp-7 {
+  padding: map.get($fluid-padding-levels, '7') !important;
+}
+@mixin \!fpx-7 {
+  padding-inline: map.get($fluid-padding-levels, '7') !important;
+}
+@mixin \!fpy-7 {
+  padding-block: map.get($fluid-padding-levels, '7') !important;
+}
+@mixin \!fpt-7 {
+  padding-top: map.get($fluid-padding-levels, '7') !important;
+}
+@mixin \!fpb-7 {
+  padding-bottom: map.get($fluid-padding-levels, '7') !important;
+}
+@mixin \!fpl-7 {
+  padding-left: map.get($fluid-padding-levels, '7') !important;
+}
+@mixin \!fpr-7 {
+  padding-right: map.get($fluid-padding-levels, '7') !important;
+}
 
 @mixin fp-8 {
   padding: map.get($fluid-padding-levels, '8');
@@ -210,6 +378,27 @@ $fluid-padding-levels: (
 @mixin fpr-8 {
   padding-right: map.get($fluid-padding-levels, '8');
 }
+@mixin \!fp-8 {
+  padding: map.get($fluid-padding-levels, '8') !important;
+}
+@mixin \!fpx-8 {
+  padding-inline: map.get($fluid-padding-levels, '8') !important;
+}
+@mixin \!fpy-8 {
+  padding-block: map.get($fluid-padding-levels, '8') !important;
+}
+@mixin \!fpt-8 {
+  padding-top: map.get($fluid-padding-levels, '8') !important;
+}
+@mixin \!fpb-8 {
+  padding-bottom: map.get($fluid-padding-levels, '8') !important;
+}
+@mixin \!fpl-8 {
+  padding-left: map.get($fluid-padding-levels, '8') !important;
+}
+@mixin \!fpr-8 {
+  padding-right: map.get($fluid-padding-levels, '8') !important;
+}
 
 @mixin fp-9 {
   padding: map.get($fluid-padding-levels, '9');
@@ -232,6 +421,27 @@ $fluid-padding-levels: (
 @mixin fpr-9 {
   padding-right: map.get($fluid-padding-levels, '9');
 }
+@mixin \!fp-9 {
+  padding: map.get($fluid-padding-levels, '9') !important;
+}
+@mixin \!fpx-9 {
+  padding-inline: map.get($fluid-padding-levels, '9') !important;
+}
+@mixin \!fpy-9 {
+  padding-block: map.get($fluid-padding-levels, '9') !important;
+}
+@mixin \!fpt-9 {
+  padding-top: map.get($fluid-padding-levels, '9') !important;
+}
+@mixin \!fpb-9 {
+  padding-bottom: map.get($fluid-padding-levels, '9') !important;
+}
+@mixin \!fpl-9 {
+  padding-left: map.get($fluid-padding-levels, '9') !important;
+}
+@mixin \!fpr-9 {
+  padding-right: map.get($fluid-padding-levels, '9') !important;
+}
 
 %fp-auto {
   padding: auto;
diff --git a/src/scss/tokens/text/mixins/_text-role.scss b/src/scss/tokens/text/mixins/_text-role.scss
index 6424b007..289284f0 100644
--- a/src/scss/tokens/text/mixins/_text-role.scss
+++ b/src/scss/tokens/text/mixins/_text-role.scss
@@ -31,6 +31,7 @@
   @include font-semibold;
   @include font-subhed;
   @include leading-tighter;
+  @include tracking-normal;
   @include text-base;
   @include fmt-5;
   @include fmb-1;
@@ -82,7 +83,6 @@
 @mixin body-link {
   color: currentColor;
   text-decoration: underline;
-  text-underline-offset: 5%;
   text-underline-position: under;
   text-decoration-style: dotted;
   text-decoration-thickness: 1px;