From 1343a8a76aacd1551eba8f027520ce24b80a8670 Mon Sep 17 00:00:00 2001
From: Jon McClure <jon.r.mcclure@gmail.com>
Date: Wed, 26 Jul 2023 16:21:46 +0100
Subject: [PATCH] first crack at fluid margins and paddings

---
 .../FeaturePhoto/FeaturePhoto.svelte          |  41 +++----
 .../GraphicBlock/GraphicBlock.svelte          |  31 +++--
 src/components/NoteText/NoteText.svelte       |  24 +++-
 .../Scroller/Embedded/Foreground.svelte       |   3 -
 src/components/Scroller/Foreground.svelte     |   3 +
 src/components/SearchInput/SearchInput.svelte |   6 +-
 .../CopyTable/styles.module.scss              |   1 +
 .../styles/tokens/layout/spacers.stories.mdx  |  34 ++++++
 src/scss/_mixins.scss                         |   1 +
 src/scss/mixins/texts/_body.scss              | 107 ------------------
 src/scss/mixins/texts/_graphic.scss           |  66 -----------
 src/scss/reset/_main.scss                     |   1 -
 src/scss/reset/_typography.scss               |  13 ++-
 src/scss/tokens/spacers/_fluid-margin.scss    |  68 +++++++++++
 src/scss/tokens/spacers/_fluid-padding.scss   |  49 ++++++++
 src/scss/tokens/spacers/_main.scss            |   2 +
 src/scss/tokens/spacers/_margin.scss          |   2 +-
 .../tokens/spacers/mixins/_fluid-margin.scss  |  85 ++++++++++++++
 .../tokens/spacers/mixins/_fluid-padding.scss |  85 ++++++++++++++
 src/scss/tokens/spacers/mixins/_main.scss     |   2 +
 20 files changed, 410 insertions(+), 214 deletions(-)
 delete mode 100644 src/scss/mixins/texts/_body.scss
 delete mode 100644 src/scss/mixins/texts/_graphic.scss
 create mode 100644 src/scss/tokens/spacers/_fluid-margin.scss
 create mode 100644 src/scss/tokens/spacers/_fluid-padding.scss
 create mode 100644 src/scss/tokens/spacers/mixins/_fluid-margin.scss
 create mode 100644 src/scss/tokens/spacers/mixins/_fluid-padding.scss
 create mode 100644 src/scss/tokens/spacers/mixins/_main.scss

diff --git a/src/components/FeaturePhoto/FeaturePhoto.svelte b/src/components/FeaturePhoto/FeaturePhoto.svelte
index 21e8b022..a9252114 100644
--- a/src/components/FeaturePhoto/FeaturePhoto.svelte
+++ b/src/components/FeaturePhoto/FeaturePhoto.svelte
@@ -17,6 +17,17 @@
    * @required
    */
   export let altText: string;
+  /**
+   * Add an id to target with custom CSS.
+   * @type {string}
+   */
+  export let id: string = '';
+  /**
+   * Add extra classes to target with custom CSS.
+   * @type {string}
+   */
+  let cls: string = '';
+  export { cls as class };
   /**
    * Caption below the photo
    * @type {string}
@@ -70,34 +81,37 @@
   });
 </script>
 
-<Block width="{width}" class="photo">
-  <figure bind:this="{container}" aria-label="media">
+<Block width="{width}" class="photo {cls}" id="{id}">
+  <figure
+    bind:this="{container}"
+    aria-label="media"
+    class="mt-0 mx-0 mb-6 flex flex-col"
+  >
     {#if !lazy || (intersectable && intersecting)}
-      <img src="{src}" alt="{altText}" />
+      <img class="m-0" src="{src}" alt="{altText}" />
     {:else}
       <div class="placeholder" height="{`${height}px`}"></div>
     {/if}
     {#if caption}
       <PaddingReset containerIsFluid="{width === 'fluid'}">
-        <figcaption>{caption}</figcaption>
+        <figcaption class="font-note my-0 text-xs leading-tight">
+          {caption}
+        </figcaption>
       </PaddingReset>
     {/if}
     {#if !altText}
-      <div class="alt-warning">altText</div>
+      <div class="alt-warning text-xxs py-1 px-2">altText</div>
     {/if}
   </figure>
 </Block>
 
 <style lang="scss">
-  @import '../../scss/fonts/variables';
-
   figure {
     width: 100%;
     position: relative;
 
     img {
       width: 100%;
-      margin: 0;
     }
 
     .placeholder {
@@ -106,22 +120,11 @@
     }
 
     div.alt-warning {
-      font-family: $font-family-display;
-      padding: 5px 10px;
       background-color: red;
       color: white;
       position: absolute;
       top: 0;
       right: 0;
-      font-size: 14px;
-      line-height: 16px;
-    }
-
-    figcaption {
-      font-weight: 400;
-      font-size: 0.8rem;
-      font-family: var(--theme-font-family-note, $font-family-display);
-      color: var(--theme-colour-text-secondary);
     }
   }
 </style>
diff --git a/src/components/GraphicBlock/GraphicBlock.svelte b/src/components/GraphicBlock/GraphicBlock.svelte
index 3ab019e1..06123599 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>{title}</h3>
+          <h3 class="mt-0 mb-2.5">{title}</h3>
           {#if description}
             {@html marked(description)}
           {/if}
@@ -133,15 +133,28 @@
 </Block>
 
 <!-- svelte-ignore css-unused-selector -->
-<style lang="scss">
+<style lang="scss" global>
   @import '../../scss/mixins';
-  // div {
-  //   :global {
-  //     @include graphic-text;
-  //   }
-  // }
 
-  .visually-hidden {
-    @include visually-hidden;
+  div.article-block.graphic {
+    p {
+      @include font-note;
+      @include text-sm;
+      &:last-of-type {
+        margin-block-end: calc(var(--theme-font-size-sm) * 0.875);
+      }
+    }
+    aside {
+      p {
+        @include font-note;
+        @include text-secondary;
+        @include text-xs;
+        margin-block-end: 0;
+        line-height: 1.375;
+      }
+    }
+    .visually-hidden {
+      @include visually-hidden;
+    }
   }
 </style>
diff --git a/src/components/NoteText/NoteText.svelte b/src/components/NoteText/NoteText.svelte
index 9b05c721..a755d4b5 100644
--- a/src/components/NoteText/NoteText.svelte
+++ b/src/components/NoteText/NoteText.svelte
@@ -11,7 +11,7 @@
   import Block from '../Block/Block.svelte';
 </script>
 
-<Block class="notes mb-6">
+<Block class="notes mb-24">
   {#if text}
     {@html marked.parse(text)}
   {/if}
@@ -19,11 +19,27 @@
 
 <!-- svelte-ignore css-unused-selector -->
 <style lang="scss" global>
-  // Same as body text... we probably should unbind these styles from the component
-  // and import them in the app through a separate scss file.
   @import '../../scss/mixins';
 
   div.article-block.notes {
-    @include note-text;
+    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;
+      text-transform: none;
+    }
+
+    p {
+      @include font-note;
+      @include font-light;
+      @include text-sm;
+    }
   }
 </style>
diff --git a/src/components/Scroller/Embedded/Foreground.svelte b/src/components/Scroller/Embedded/Foreground.svelte
index b6b011a4..69ab9ae0 100644
--- a/src/components/Scroller/Embedded/Foreground.svelte
+++ b/src/components/Scroller/Embedded/Foreground.svelte
@@ -41,9 +41,6 @@
 <style lang="scss">
   @import './../../../scss/mixins';
   div.embedded-foreground {
-    :global {
-      @include body-text;
-    }
     :global(p:last-child) {
       margin-bottom: 0;
     }
diff --git a/src/components/Scroller/Foreground.svelte b/src/components/Scroller/Foreground.svelte
index 3fbab04f..e5801a58 100644
--- a/src/components/Scroller/Foreground.svelte
+++ b/src/components/Scroller/Foreground.svelte
@@ -55,6 +55,9 @@
       :global(p:last-child) {
         margin-bottom: 0;
       }
+      :global(*:first-child) {
+        margin-top: 0;
+      }
     }
   }
 
diff --git a/src/components/SearchInput/SearchInput.svelte b/src/components/SearchInput/SearchInput.svelte
index 0f0efb77..85367335 100644
--- a/src/components/SearchInput/SearchInput.svelte
+++ b/src/components/SearchInput/SearchInput.svelte
@@ -44,7 +44,7 @@
 </div>
 
 <style lang="scss">
-  @import '../../scss/fonts/variables';
+  @import '../../scss/mixins';
 
   .search {
     position: relative;
@@ -61,8 +61,8 @@
       fill: var(--theme-colour-brand-rules);
     }
     .search--input {
-      font-family: var(--theme-font-family-hed, $font-family-display);
-      color: var(--theme-colour-text-primary);
+      @include font-sans;
+      @include text-primary;
       padding: 0 0 0 2rem;
       font-size: 0.8rem;
       height: 33px;
diff --git a/src/docs/docs-components/CopyTable/styles.module.scss b/src/docs/docs-components/CopyTable/styles.module.scss
index a49665a1..f03ef5af 100644
--- a/src/docs/docs-components/CopyTable/styles.module.scss
+++ b/src/docs/docs-components/CopyTable/styles.module.scss
@@ -5,6 +5,7 @@ $header: #5e81ac;
   font-size: 18px;
   color: #666;
   margin-bottom: 5px;
+  margin-top: 2rem;
   font-weight: 400;
   a span {
     font-size: 18px;
diff --git a/src/docs/styles/tokens/layout/spacers.stories.mdx b/src/docs/styles/tokens/layout/spacers.stories.mdx
index b9d673d6..5b133d5a 100644
--- a/src/docs/styles/tokens/layout/spacers.stories.mdx
+++ b/src/docs/styles/tokens/layout/spacers.stories.mdx
@@ -9,12 +9,30 @@ import margin from '$lib/scss/tokens/spacers/\_margin.scss?inline';
 {/* @ts-ignore */}
 import padding from '$lib/scss/tokens/spacers/\_padding.scss?inline';
 
+{/* @ts-ignore */}
+import fluidMargin from '$lib/scss/tokens/spacers/\_fluid-margin.scss?inline';
+
+{/* @ts-ignore */}
+import fluidPadding from '$lib/scss/tokens/spacers/\_fluid-padding.scss?inline';
+
 <Meta title="Styles/Tokens/Layout/Spacers" parameters={{ ...parameters }} />
 
 ![](https://graphics.thomsonreuters.com/style-assets/images/logos/reuters-graphics-logo/svg/graphics-logo-color-dark.svg)
 
 # Spacer tokens
 
+Spacers include tokens that control static and fluid margins and paddings.
+
+### What's the difference between "static" and "fluid"?
+
+**Static** margin/padding tokens set values that don't change with the size of the viewport. These tokens are best for creating space between block-like elements — divs, pictures, videos, graphics, etc. The tables below contain dozens of levels so you can finely tune spacing, but their values also are at intervals that help you maintain consistent balance on your page.
+
+**Fluid** token values _do change_ depending on the size of the device and are specifically designed to pair with our fluid font sizes. These tokes have fewer available levels to help make sure our typography is consistent.
+
+As a rule of thumb, if you're setting space between or adjacent to _text elements_, you'll likely want to use **fluid tokens** (`Fluid margin`/`Fluid padding` tables). If you're setting space between _block-like elements_, you probably want **static tokens** (`Margin`/`Padding` tables).
+
+---
+
 <CopyTable
   title="Margin"
   mdnLink="margin"
@@ -30,3 +48,19 @@ import padding from '$lib/scss/tokens/spacers/\_padding.scss?inline';
   body={cssStringToTableArray(padding)}
   copyable={[true, false]}
 />
+
+<CopyTable
+  title="Fluid margin"
+  mdnLink="margin"
+  header={['Class', 'Include', 'Properties']}
+  body={cssStringToTableArray(fluidMargin, true)}
+  copyable={[true, (t) => `@include ${t};`, false]}
+/>
+
+<CopyTable
+  title="Fluid padding"
+  mdnLink="margin"
+  header={['Class', 'Include', 'Properties']}
+  body={cssStringToTableArray(fluidPadding, true)}
+  copyable={[true, (t) => `@include ${t};`, false]}
+/>
diff --git a/src/scss/_mixins.scss b/src/scss/_mixins.scss
index 553b5842..5f23bbc9 100644
--- a/src/scss/_mixins.scss
+++ b/src/scss/_mixins.scss
@@ -1,4 +1,5 @@
 @forward 'mixins/block';
 @forward 'tokens/accessibility/mixins/main';
 @forward 'tokens/backgrounds/mixins/main';
+@forward 'tokens/spacers/mixins/main';
 @forward 'tokens/text/mixins/main';
diff --git a/src/scss/mixins/texts/_body.scss b/src/scss/mixins/texts/_body.scss
deleted file mode 100644
index 3121db3b..00000000
--- a/src/scss/mixins/texts/_body.scss
+++ /dev/null
@@ -1,107 +0,0 @@
-// @import '../fonts/mixins';
-// @import '../fonts/variables';
-// @import '../typography_old/font-size';
-// @import '../colours/thematic/tr';
-@use '../../mixins' as *;
-
-@mixin body-text {
-  h2,
-  h3,
-  h4,
-  h5,
-  h6,
-  p,
-  li,
-  blockquote {
-    @include text-primary;
-  }
-
-  p,
-  ul li,
-  ul li p,
-  ol li,
-  ol li p {
-    -webkit-font-smoothing: antialiased;
-    @include font-serif;
-    @include text-primary;
-    @include text-base;
-
-    a {
-      color: currentColor;
-      background-size: 1px 1px;
-      background-image: url('data:image/svg+xml;utf8,<svg preserveAspectRatio="none" viewBox="0 0 1 1" xmlns="http://www.w3.org/2000/svg"><line x1="0" y1="0" x2="2" y2="2" style="stroke: currentColor; opacity: 0.8;" /></svg>');
-      background-position: 0 1.3rem;
-      background-repeat: repeat-x;
-      text-decoration: none;
-      // TODO: Assign this to background colour CSS var and the underline will skip descenders
-      text-shadow: 1px 1px var(--theme-colour-background, #ffffff),
-        1px -1px var(--theme-colour-background, #ffffff),
-        -1px 1px var(--theme-colour-background, #ffffff),
-        -1px -1px var(--theme-colour-background, #ffffff);
-
-      @media (max-width: 540px) {
-        background-position: 0 1.1rem;
-      }
-
-      &:hover {
-        text-decoration: none;
-      }
-    }
-  }
-
-  h2 {
-    margin: 4rem 0 2rem;
-    text-align: center;
-    font-weight: 600;
-  }
-
-  ul {
-    padding-left: 1.75rem;
-    list-style-type: square;
-  }
-
-  p + ul {
-    margin-top: -0.75rem;
-  }
-
-  blockquote {
-    margin: 30px 0;
-    border-left: 2px solid
-      var(--theme-colour-text-secondary, var(--tr-medium-grey));
-    padding-left: 15px;
-
-    p {
-      @extend .blockquote-size;
-      font-family: var(--theme-font-family-body, $font-family-serif);
-    }
-
-    // Markdown cheat to use for attribution
-    blockquote {
-      border: 0;
-      padding: 0;
-      margin: -5px 0 0;
-
-      p {
-        font-family: var(--theme-font-family-body, $font-family-serif);
-        color: var(--theme-colour-text-primary, var(--tr-dark-grey));
-        font-size: 1rem;
-
-        @media (max-width: 540px) {
-          font-size: 0.9rem;
-        }
-      }
-
-      // Kill any additional nestings...
-      blockquote {
-        display: none;
-      }
-    }
-  }
-
-  &.font-sans {
-    font-family: var(
-      --theme-font-family-sans-serif,
-      $font-family-sans-serif
-    ) !important;
-  }
-}
diff --git a/src/scss/mixins/texts/_graphic.scss b/src/scss/mixins/texts/_graphic.scss
deleted file mode 100644
index 58844e6b..00000000
--- a/src/scss/mixins/texts/_graphic.scss
+++ /dev/null
@@ -1,66 +0,0 @@
-@import '../colours/thematic/tr';
-@import '../fonts/mixins';
-
-@mixin graphic-text {
-  h3 {
-    margin-bottom: 0.5rem;
-    color: var(--theme-colour-text-primary, var(--tr-dark-grey));
-  }
-
-  p {
-    -webkit-font-smoothing: antialiased;
-    @include font-display;
-    font-size: 1.1rem;
-    line-height: 1.5rem;
-    color: var(--theme-colour-text-primary, var(--tr-dark-grey));
-    margin-bottom: 1rem;
-    &:last-of-type {
-      margin-bottom: 1rem;
-    }
-
-    @media (max-width: 540px) {
-      font-size: 1rem;
-      line-height: 1.35rem;
-    }
-
-    a {
-      color: currentColor;
-      background-size: 1px 1px;
-      background-image: url('data:image/svg+xml;utf8,<svg preserveAspectRatio="none" viewBox="0 0 1 1" xmlns="http://www.w3.org/2000/svg"><line x1="0" y1="0" x2="2" y2="2" stroke="rgba(0, 0, 0, 0.8)" /></svg>');
-      background-position: 0 1.1rem;
-      background-repeat: repeat-x;
-      text-decoration: none;
-
-      &:hover {
-        text-decoration: none;
-      }
-    }
-  }
-
-  // Used for footnotes and source lines
-  aside {
-    p {
-      @include font-display;
-      margin-bottom: 0;
-      color: var(--theme-colour-text-secondary, var(--tr-medium-grey));
-      font-size: 0.9rem;
-      line-height: 1.2rem;
-      &:last-of-type {
-        margin-bottom: 0;
-      }
-
-      @media (max-width: 540px) {
-        font-size: 0.8rem;
-        line-height: 1.1rem;
-      }
-
-      a {
-        color: currentColor;
-        text-decoration: underline;
-        &:hover {
-          text-decoration: underline;
-        }
-      }
-    }
-  }
-}
diff --git a/src/scss/reset/_main.scss b/src/scss/reset/_main.scss
index f40f83e7..fd961a1d 100644
--- a/src/scss/reset/_main.scss
+++ b/src/scss/reset/_main.scss
@@ -8,6 +8,5 @@
 }
 
 body {
-  font-size: 1rem;
   -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
 }
diff --git a/src/scss/reset/_typography.scss b/src/scss/reset/_typography.scss
index 6ae30a83..b6fb1a6d 100644
--- a/src/scss/reset/_typography.scss
+++ b/src/scss/reset/_typography.scss
@@ -1,9 +1,11 @@
 @use '../mixins' as *;
 
 body {
+  font-size: 1rem;
   @include font-sans;
   @include font-normal;
   @include leading-normal;
+  -webkit-font-smoothing: antialiased;
 }
 
 /////////////
@@ -93,12 +95,21 @@ ul {
 }
 
 a {
-  color: inherit;
+  color: currentColor;
   text-decoration: underline;
   text-underline-offset: 2px;
   text-underline-offset: 8%;
+  text-decoration-thickness: from-font;
 }
 
 strong {
   @include font-bold;
 }
+
+figcaption {
+  @include text-sm;
+  @include font-normal;
+  @include leading-normal;
+  @include text-secondary;
+  @include font-note;
+}
diff --git a/src/scss/tokens/spacers/_fluid-margin.scss b/src/scss/tokens/spacers/_fluid-margin.scss
new file mode 100644
index 00000000..f9f8b487
--- /dev/null
+++ b/src/scss/tokens/spacers/_fluid-margin.scss
@@ -0,0 +1,68 @@
+@use 'mixins/fluid-margin' as *;
+
+$fluid-margin-placeholder-levels: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9;
+
+@each $level, $value in $fluid-margin-placeholder-levels {
+  .fm-#{$level} {
+    @extend %fm-#{$level};
+  }
+  .fmt-#{$level} {
+    @extend %fmt-#{$level};
+  }
+  .fmr-#{$level} {
+    @extend %fmr-#{$level};
+  }
+  .fmb-#{$level} {
+    @extend %fmb-#{$level};
+  }
+  .fml-#{$level} {
+    @extend %fml-#{$level};
+  }
+  .fmx-#{$level} {
+    @extend %fmx-#{$level};
+  }
+  .fmy-#{$level} {
+    @extend %fmy-#{$level};
+  }
+
+  .\!fm-#{$level} {
+    @extend %\!fm-#{$level};
+  }
+  .\!fmt-#{$level} {
+    @extend %\!fmt-#{$level};
+  }
+  .\!fmr-#{$level} {
+    @extend %\!fmr-#{$level};
+  }
+  .\!fmb-#{$level} {
+    @extend %\!fmb-#{$level};
+  }
+  .\!fml-#{$level} {
+    @extend %\!fml-#{$level};
+  }
+  .\!fmx-#{$level} {
+    @extend %\!fmx-#{$level};
+  }
+  .\!fmy-#{$level} {
+    @extend %\!fmy-#{$level};
+  }
+}
+
+.fm-auto {
+  @extend %fm-auto;
+}
+.fmx-auto {
+  @extend %fmx-auto;
+}
+.fmy-auto {
+  @extend %fmy-auto;
+}
+.\!fm-auto {
+  @extend %\!fm-auto;
+}
+.\!fmx-auto {
+  @extend %\!fmx-auto;
+}
+.\!fmy-auto {
+  @extend %\!fmy-auto;
+}
diff --git a/src/scss/tokens/spacers/_fluid-padding.scss b/src/scss/tokens/spacers/_fluid-padding.scss
new file mode 100644
index 00000000..5403452c
--- /dev/null
+++ b/src/scss/tokens/spacers/_fluid-padding.scss
@@ -0,0 +1,49 @@
+@use 'mixins/fluid-padding' as *;
+
+$fluid-padding-placeholder-levels: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9;
+
+@each $level, $value in $fluid-padding-placeholder-levels {
+  .fp-#{$level} {
+    @extend %fp-#{$level};
+  }
+  .fpt-#{$level} {
+    @extend %fpt-#{$level};
+  }
+  .fpr-#{$level} {
+    @extend %fpr-#{$level};
+  }
+  .fpb-#{$level} {
+    @extend %fpb-#{$level};
+  }
+  .fpl-#{$level} {
+    @extend %fpl-#{$level};
+  }
+  .fpx-#{$level} {
+    @extend %fpx-#{$level};
+  }
+  .fpy-#{$level} {
+    @extend %fpy-#{$level};
+  }
+
+  .\!fp-#{$level} {
+    @extend %\!fp-#{$level};
+  }
+  .\!fpt-#{$level} {
+    @extend %\!fpt-#{$level};
+  }
+  .\!fpr-#{$level} {
+    @extend %\!fpr-#{$level};
+  }
+  .\!fpb-#{$level} {
+    @extend %\!fpb-#{$level};
+  }
+  .\!fpl-#{$level} {
+    @extend %\!fpl-#{$level};
+  }
+  .\!fpx-#{$level} {
+    @extend %\!fpx-#{$level};
+  }
+  .\!fpy-#{$level} {
+    @extend %\!fpy-#{$level};
+  }
+}
diff --git a/src/scss/tokens/spacers/_main.scss b/src/scss/tokens/spacers/_main.scss
index 1ea1520c..2f98f239 100644
--- a/src/scss/tokens/spacers/_main.scss
+++ b/src/scss/tokens/spacers/_main.scss
@@ -1,2 +1,4 @@
+@forward 'fluid-margin';
+@forward 'fluid-padding';
 @forward 'margin';
 @forward 'padding';
diff --git a/src/scss/tokens/spacers/_margin.scss b/src/scss/tokens/spacers/_margin.scss
index 77ddd2b2..d601c1b2 100644
--- a/src/scss/tokens/spacers/_margin.scss
+++ b/src/scss/tokens/spacers/_margin.scss
@@ -60,7 +60,7 @@ $margin-levels: (
     margin-bottom: $value;
   }
 
-  .\!m-#{$level}\! {
+  .\!m-#{$level} {
     margin: $value !important;
   }
   .\!mt-#{$level} {
diff --git a/src/scss/tokens/spacers/mixins/_fluid-margin.scss b/src/scss/tokens/spacers/mixins/_fluid-margin.scss
new file mode 100644
index 00000000..0ab820df
--- /dev/null
+++ b/src/scss/tokens/spacers/mixins/_fluid-margin.scss
@@ -0,0 +1,85 @@
+$fluid-margin-levels: (
+  '0': 0,
+  '1': clamp(0.31rem, calc(0.31rem + 0vw), 0.31rem),
+  '2': clamp(0.56rem, calc(0.52rem + 0.21vw), 0.69rem),
+  '3': clamp(0.88rem, calc(0.83rem + 0.21vw), 1rem),
+  '4': clamp(1.13rem, calc(1.06rem + 0.31vw), 1.31rem),
+  '5': clamp(1.69rem, calc(1.58rem + 0.52vw), 2rem),
+  '6': clamp(2.25rem, calc(2.13rem + 0.63vw), 2.63rem),
+  '7': clamp(3.38rem, calc(3.19rem + 0.94vw), 3.94rem),
+  '8': clamp(4.5rem, calc(4.25rem + 1.25vw), 5.25rem),
+  '9': clamp(6.75rem, calc(6.38rem + 1.88vw), 7.88rem),
+);
+
+@each $level, $value in $fluid-margin-levels {
+  %fm-#{$level} {
+    margin: $value;
+  }
+  %fmt-#{$level} {
+    margin-top: $value;
+  }
+  %fmr-#{$level} {
+    margin-right: $value;
+  }
+  %fmb-#{$level} {
+    margin-bottom: $value;
+  }
+  %fml-#{$level} {
+    margin-left: $value;
+  }
+  %fmx-#{$level} {
+    margin-right: $value;
+    margin-left: $value;
+  }
+  %fmy-#{$level} {
+    margin-top: $value;
+    margin-bottom: $value;
+  }
+
+  %\!fm-#{$level} {
+    margin: $value !important;
+  }
+  %\!fmt-#{$level} {
+    margin-top: $value !important;
+  }
+  %\!fmr-#{$level} {
+    margin-right: $value !important;
+  }
+  %\!fmb-#{$level} {
+    margin-bottom: $value !important;
+  }
+  %\!fml-#{$level} {
+    margin-left: $value !important;
+  }
+  %\!fmx-#{$level} {
+    margin-right: $value !important;
+    margin-left: $value !important;
+  }
+  %\!fmy-#{$level} {
+    margin-top: $value !important;
+    margin-bottom: $value !important;
+  }
+}
+
+%fm-auto {
+  margin: auto;
+}
+%fmx-auto {
+  margin-right: auto;
+  margin-left: auto;
+}
+%fmy-auto {
+  margin-top: auto;
+  margin-bottom: auto;
+}
+%\!fm-auto {
+  margin: auto !important;
+}
+%\!fmx-auto {
+  margin-right: auto !important;
+  margin-left: auto !important;
+}
+%\!fmy-auto {
+  margin-top: auto !important;
+  margin-bottom: auto !important;
+}
diff --git a/src/scss/tokens/spacers/mixins/_fluid-padding.scss b/src/scss/tokens/spacers/mixins/_fluid-padding.scss
new file mode 100644
index 00000000..c16722b5
--- /dev/null
+++ b/src/scss/tokens/spacers/mixins/_fluid-padding.scss
@@ -0,0 +1,85 @@
+$fluid-padding-levels: (
+  '0': 0,
+  '1': clamp(0.31rem, calc(0.31rem + 0vw), 0.31rem),
+  '2': clamp(0.56rem, calc(0.52rem + 0.21vw), 0.69rem),
+  '3': clamp(0.88rem, calc(0.83rem + 0.21vw), 1rem),
+  '4': clamp(1.13rem, calc(1.06rem + 0.31vw), 1.31rem),
+  '5': clamp(1.69rem, calc(1.58rem + 0.52vw), 2rem),
+  '6': clamp(2.25rem, calc(2.13rem + 0.63vw), 2.63rem),
+  '7': clamp(3.38rem, calc(3.19rem + 0.94vw), 3.94rem),
+  '8': clamp(4.5rem, calc(4.25rem + 1.25vw), 5.25rem),
+  '9': clamp(6.75rem, calc(6.38rem + 1.88vw), 7.88rem),
+);
+
+@each $level, $value in $fluid-padding-levels {
+  %fp-#{$level} {
+    padding: $value;
+  }
+  %fpt-#{$level} {
+    padding-top: $value;
+  }
+  %fpr-#{$level} {
+    padding-right: $value;
+  }
+  %fpb-#{$level} {
+    padding-bottom: $value;
+  }
+  %fpl-#{$level} {
+    padding-left: $value;
+  }
+  %fpx-#{$level} {
+    padding-right: $value;
+    padding-left: $value;
+  }
+  %fpy-#{$level} {
+    padding-top: $value;
+    padding-bottom: $value;
+  }
+
+  %\!fp-#{$level} {
+    padding: $value !important;
+  }
+  %\!fpt-#{$level} {
+    padding-top: $value !important;
+  }
+  %\!fpr-#{$level} {
+    padding-right: $value !important;
+  }
+  %\!fpb-#{$level} {
+    padding-bottom: $value !important;
+  }
+  %\!fpl-#{$level} {
+    padding-left: $value !important;
+  }
+  %\!fpx-#{$level} {
+    padding-right: $value !important;
+    padding-left: $value !important;
+  }
+  %\!fpy-#{$level} {
+    padding-top: $value !important;
+    padding-bottom: $value !important;
+  }
+}
+
+%fp-auto {
+  padding: auto;
+}
+%fpx-auto {
+  padding-right: auto;
+  padding-left: auto;
+}
+%fpy-auto {
+  padding-top: auto;
+  padding-bottom: auto;
+}
+%\!fp-auto {
+  padding: auto !important;
+}
+%\!fpx-auto {
+  padding-right: auto !important;
+  padding-left: auto !important;
+}
+%\!fpy-auto {
+  padding-top: auto !important;
+  padding-bottom: auto !important;
+}
diff --git a/src/scss/tokens/spacers/mixins/_main.scss b/src/scss/tokens/spacers/mixins/_main.scss
new file mode 100644
index 00000000..a2901a90
--- /dev/null
+++ b/src/scss/tokens/spacers/mixins/_main.scss
@@ -0,0 +1,2 @@
+@forward 'fluid-margin';
+@forward 'fluid-padding';