Merge branch '5.x' into 3374467-responsive-tabs

components/accordion/accordion.twig

 {% import "prototype:icons" as icons %}
-{% set control_id = 'accordion-content'|clean_unique_id  %}
-{% set label_id = 'accordion-label'|clean_unique_id  %}
-{% set accordion_classes = ['c-accordion']|merge(classes|default([])) %}
+{% set control_id = "accordion-content"|clean_unique_id  %}
+{% set label_id = "accordion-label"|clean_unique_id  %}
+{% set accordion_classes = ["c-accordion"]|merge(classes|default([])) %}
 
 <article {{ attributes.addClass(accordion_classes).merge(attributes) }}>
-  <h3 class='c-accordion__title'>
-    <button class='c-accordion__button' aria-expanded='false' aria-controls={{ control_id }} id={{ label_id }}>
-      <div class='c-accordion__button-icon'>
-        <span class='expand' aria-hidden='true' focusable='false'>
+  <h3 class="c-accordion__title">
+    <button class="c-accordion__button" aria-expanded="false" aria-controls="{{ control_id }}" id="{{ label_id }}">
+      <div class="c-accordion__button-icon">
+        <span class="expand" aria-hidden="true" focusable="false">
           {{ icons.inline(accordion_expand_icon) }}
         </span>
-        <span class='collapse' aria-hidden='true' focusable='false'>
+        <span class="collapse" aria-hidden="true" focusable="false">
           {{ icons.inline(accordion_collapse_icon) }}
         </span>
       </div>
@@ -18,8 +18,8 @@
     </button>
   </h3>
 
-  <div class='c-accordion__content' id='{{ control_id }}' aria-labelby={{ label_id }} aria-hidden='true'>
-    <div class='c-accordion__content-inner-wrapper'>
+  <div class="c-accordion__content" id="{{ control_id }}" aria-labelby="{{ label_id }}" aria-hidden="true">
+    <div class="c-accordion__content-inner-wrapper">
       {{ accordion_content }}
     </div>
   </div>

components/breadcrumbs/breadcrumbs.component.yml

@@ -14,7 +14,7 @@ props:
         type: object
         properties:
           text:
-            type: string
+            type: object|string
             title: Text
             examples:
               - "Home"

components/teaser/src/teaser.scss

 @use "../../../libraries/partials/partials" as *;
 
 :root {
-  --teaser-panel-padding: 16px;
-
-  @include bp-min(tablet) {
-    --teaser-panel-padding: 30px;
-  }
-
-  @include bp-min(desktop) {
-    --teaser-panel-padding: 60px;
-  }
+  --teaser-panel-padding: var(--prototype-space-60);
 }
 
 .c-teaser__title {
@@ -17,16 +9,20 @@
 }
 
 .c-teaser__media {
-  margin-bottom: 24px;
+  margin-bottom: var(--prototype-space-36);
   overflow: hidden;
 }
 
+.c-teaser__content > * + * {
+  margin-top: var(--prototype-space-rem-8);
+}
+
 .c-teaser__body {
   @include type-scale('body', '16');
 }
 
 .c-teaser__actions {
-  margin: 24px 0 0;
+  margin-top: var(--prototype-space-rem-36);
 }
 
 .c-teaser__more-link {

components/teaser/teaser.component.yml

@@ -5,7 +5,7 @@ description: A Teaser component
 props:
   type: object
   required:
-    - title
+    - teaser_title
   properties:
     attributes:
       type: Drupal\Core\Template\Attribute
@@ -15,16 +15,16 @@ props:
       enum:
         - card
         - panel
-    title:
+    teaser_title:
       type: 'string'
       title: 'Title'
       examples:
         - 'A new exhibit opens at the Student Visitor Center'
-    media:
+    teaser_media:
       type: array
       title: Media
       description: 'The url for the image'
-    more:
+    teaser_link:
       type: 'object'
       title: 'More Link'
       properties:
@@ -32,7 +32,7 @@ props:
           type: string
         url:
           type: string
-    body:
+    teaser_body:
       title: Body
       type: string
       examples:

components/teaser/teaser.css

 :root {
-  --teaser-panel-padding: 16px;
-}
-@media (min-width: 768px) {
-  :root {
-    --teaser-panel-padding: 30px;
-  }
-}
-@media (min-width: 1200px) {
-  :root {
-    --teaser-panel-padding: 60px;
-  }
+  --teaser-panel-padding: var(--prototype-space-60);
 }
 
 .c-teaser__title {
@@ -18,17 +8,21 @@
 }
 
 .c-teaser__media {
-  margin-bottom: 24px;
+  margin-bottom: var(--prototype-space-36);
   overflow: hidden;
 }
 
+.c-teaser__content > * + * {
+  margin-top: var(--prototype-space-rem-8);
+}
+
 .c-teaser__body {
   font-size: var(--prototype-fs-body-16);
   line-height: var(--prototype-lh-body-16);
 }
 
 .c-teaser__actions {
-  margin: 24px 0 0;
+  margin-top: var(--prototype-space-rem-36);
 }
 
 .c-teaser__more-link {

components/teaser/teaser.stories.twig

@@ -7,17 +7,17 @@
 {% endset %}
 
 {% set props = {
-  title: 'Beware of backfeed',
-  media: image_content,
-  body: body_content,
-  more: {
+  teaser_title: 'Beware of backfeed',
+  teaser_media: image_content,
+  teaser_body: body_content,
+  teaser_link: {
     text: 'Read More',
     url: 'https://www.google.com',
   },
 } %}
 
 {% stories teaser with {
-  title: 'Components/Teaser',
+  teaser_title: 'Components/Teaser',
 } %}
 
   {% story card with {
@@ -36,7 +36,7 @@
     <div style="max-width: 600px;">
       {{ include('prototype:teaser', props|merge({
         variant: 'card',
-        media: false,
+        teaser_media: false,
       }), with_context = false) }}
     </div>
   {% endstory %}

components/teaser/teaser.twig

-{% set classes = [
+{% set teaser_classes = [
   'c-teaser',
   'c-teaser--' ~ variant|default('card'),
 ] %}
 
-<article {{ attributes.addClass(classes) }}>
-  {% if media %}
+{% set teaser_classes = teaser_classes|merge(classes|default([])) %}
+
+<article {{ attributes.addClass(teaser_classes) }}>
+
+  {% if teaser_media %}
     <div class="c-teaser__media">
-      {{ media }}
+      {{ teaser_media }}
     </div>
   {% endif %}
 
   <div class="c-teaser__content">
-    <h3 class="c-teaser__title">{{ title }}</h3>
+    <h3 class="c-teaser__title">{{ teaser_title }}</h3>
 
-    {% if body %}
-      <div class="c-teaser__body">{{ body }}</div>
+    {% if teaser_body %}
+      <div class="c-teaser__body">{{ teaser_body }}</div>
     {% endif %}
 
-    {% if more.url is not empty %}
+    {% if teaser_link.url is not empty %}
       <p class="c-teaser__actions">
-        <a class="c-teaser__more-link" href="{{ more.url }}">
-          <span class="text">{{ more.text }}</span>
+        <a class="c-teaser__more-link" href="{{ teaser_link.url }}">
+          <span class="text">{{ teaser_link.text }}</span>
         </a>
       </p>
     {% endif %}

dist/css/global/base/tables.css

@@ -3,22 +3,11 @@ table {
   line-height: var(--prototype-lh-label-16);
   width: 100%;
   max-width: 100%;
-  margin-top: 0;
-  margin-bottom: 72px;
   border-spacing: 0;
   text-align: left;
   border-collapse: collapse;
 }
 
-h1 + table,
-h2 + table,
-h3 + table,
-h4 + table,
-h5 + table,
-table:not(:first-child) {
-  margin-top: 24px;
-}
-
 thead th {
   vertical-align: bottom;
 }

dist/css/global/settings/spacing.css

+/* prettier-ignore */
+:root {
+  --prototype-space-0: 0px;
+  --prototype-space-8: 4px;
+  --prototype-space-20: 8px;
+  --prototype-space-36: 12px;
+  --prototype-space-60: 20px;
+  --prototype-space-96: 30px;
+  --prototype-space-120: 40px;
+  --prototype-space-180: 60px;
+  --prototype-space-rem-8: 0.25rem; /* 4px */
+  --prototype-space-rem-20: 0.5rem; /* 8px */
+  --prototype-space-rem-36: 0.75rem; /* 12px */
+  --prototype-space-rem-60: 1.25rem; /* 20px */
+  --prototype-space-rem-96: 1.875rem; /* 30px */
+  --prototype-space-rem-120: 2.5rem; /* 40px */
+  --prototype-space-rem-180: 3.75rem; /* 60px */
+}
+@media (min-width: 768px) {
+  :root {
+    --prototype-space-8: 8px;
+    --prototype-space-20: 12px;
+    --prototype-space-36: 18px;
+    --prototype-space-60: 32px;
+    --prototype-space-96: 48px;
+    --prototype-space-120: 60px;
+    --prototype-space-180: 90px;
+    --prototype-space-rem-20: 0.75rem; /* 12px */
+    --prototype-space-rem-36: 1.125rem; /* 18px */
+    --prototype-space-rem-60: 2rem; /* 32px */
+    --prototype-space-rem-96: 3rem; /* 48px */
+    --prototype-space-rem-120: 3.75rem; /* 60px */
+    --prototype-space-rem-180: 5.625rem; /* 90px */
+  }
+}
+@media (min-width: 1024px) {
+  :root {
+    --prototype-space-20: 16px;
+    --prototype-space-36: 24px;
+    --prototype-space-60: 40px;
+    --prototype-space-96: 60px;
+    --prototype-space-120: 80px;
+    --prototype-space-180: 120px;
+    --prototype-space-rem-20: 1rem; /* 16px */
+    --prototype-space-rem-36: 1.5rem; /* 24px */
+    --prototype-space-rem-60: 2.5rem; /* 40px */
+    --prototype-space-rem-96: 3.75rem; /* 60px */
+    --prototype-space-rem-120: 5rem; /* 80px */
+    --prototype-space-rem-180: 7.5rem; /* 120px */
+  }
+}
+@media (min-width: 1200px) {
+  :root {
+    --prototype-space-20: 20px;
+    --prototype-space-36: 36px;
+    --prototype-space-60: 60px;
+    --prototype-space-96: 96px;
+    --prototype-space-120: 120px;
+    --prototype-space-180: 180px;
+  }
+}
\ No newline at end of file

dist/css/global/wysiwyg.css

@@ -35,22 +35,11 @@ table {
   line-height: var(--prototype-lh-label-16);
   width: 100%;
   max-width: 100%;
-  margin-top: 0;
-  margin-bottom: 72px;
   border-spacing: 0;
   text-align: left;
   border-collapse: collapse;
 }
 
-h1 + table,
-h2 + table,
-h3 + table,
-h4 + table,
-h5 + table,
-table:not(:first-child) {
-  margin-top: 24px;
-}
-
 thead th {
   vertical-align: bottom;
 }
@@ -623,20 +612,10 @@ blockquote:not(:first-child) {
   line-height: var(--prototype-lh-label-16);
   width: 100%;
   max-width: 100%;
-  margin-top: 0;
-  margin-bottom: 72px;
   border-spacing: 0;
   text-align: left;
   border-collapse: collapse;
 }
-.ck-content h1 + table,
-.ck-content h2 + table,
-.ck-content h3 + table,
-.ck-content h4 + table,
-.ck-content h5 + table,
-.ck-content table:not(:first-child) {
-  margin-top: 24px;
-}
 .ck-content thead th {
   vertical-align: bottom;
 }

libraries/global/base/tables.scss

@@ -6,7 +6,6 @@
 //
 @use 'partials' as *;
 
-
 //------------------------------------
 //  01 - General
 //  A mixin is created and than instantly called here so that we can utilize the same styles within other
@@ -18,28 +17,14 @@
     @include type-scale(label, 16);
     width: 100%;
     max-width: 100%;
-    margin-top: 0;
-    margin-bottom: 72px;
     border-spacing: 0;
     text-align: left;
     border-collapse: collapse;
   }
-
-  h1 + table,
-  h2 + table,
-  h3 + table,
-  h4 + table,
-  h5 + table,
-  table:not(:first-child) {
-    margin-top: 24px;
-  }
 }
 
 @include tables-general();
 
-
-
-
 //------------------------------------
 //  02 - Elements
 //------------------------------------

libraries/global/settings/spacing.scss

+//
+// Settings - Spacing
+//
+// - 01 - Imports
+// - 02 - Spacing Scale
+// - 03 - Custom Properties
+// - 04 - Utility Classes
+
+
+//------------------------------------
+//  01 - Imports
+//------------------------------------
+
+@use '../../partials/functions/calculations' as functions-calculations;
+@use '../../partials/mixins/breakpoints' as mixins-breakpoints;
+@use '../../partials/mixins/spacing' as mixins-spacing;
+
+
+
+//------------------------------------
+//  02 - Spacing Scale
+//  The scale is organized into groups of CSS length values.
+//  Each key represents the target `px` value at the largest
+//  breakpoint. Within each, a target `px` values are set per breakpoint.
+//
+//  The example below shows a `0` value which will be set to 0 and not adjust based on breakpoints.
+//  The `10` value will be default to 4px and will scale up to 8px at the tablet breakpoint and 10px on desktop.
+//  Example:
+//  0: (
+//    mobile: 0,
+//  ),
+//  10: (
+//    mobile: 4,
+//    tablet: 8,
+//    sm-desktop: 10,
+//  ),
+//  20: (
+//    mobile: 8,
+//    tablet: 12,
+//    sm-desktop: 16,
+//    desktop: 20,
+//  ),
+//  36: (
+//    mobile: 12,
+//    tablet: 18,
+//    sm-desktop: 24,
+//    desktop: 36,
+//  ),
+//
+//  Note: The breakpoints listed here must correspond with breakpoints defined in
+//  `libraries/partials/settings/breakpoints.scss`.
+//
+//  $spacing-scale: (
+//    size1: (
+//      breakpoint1: pixelValue,
+//      breakpoint2: pixelValue,
+//      ...
+//    ),
+//    size2: ( ... ),
+//      ...
+//    ),
+//  );
+//
+//------------------------------------
+
+/* prettier-ignore */
+$spacing-scale: (
+  0: (
+    mobile: 0,
+  ),
+  8: (
+    mobile: 4,
+    tablet: 8,
+  ),
+  20: (
+    mobile: 8,
+    tablet: 12,
+    sm-desktop: 16,
+    desktop: 20,
+  ),
+  36: (
+    mobile: 12,
+    tablet: 18,
+    sm-desktop: 24,
+    desktop: 36,
+  ),
+  60: (
+    mobile: 20,
+    tablet: 32,
+    sm-desktop: 40,
+    desktop: 60,
+  ),
+  96: (
+    mobile: 30,
+    tablet: 48,
+    sm-desktop: 60,
+    desktop: 96,
+  ),
+  120: (
+    mobile: 40,
+    tablet: 60,
+    sm-desktop: 80,
+    desktop: 120,
+  ),
+  180: (
+    mobile: 60,
+    tablet: 90,
+    sm-desktop: 120,
+    desktop: 180,
+  ),
+);
+
+//------------------------------------
+//  02 - Custom Properties
+//  Generate custom properties for each value in the spacing scale
+//  across each breakpoint.
+//
+//  Example output:
+//
+//  :root {
+//    --prototype-space-0: 0px;
+//    --prototype-space-8: 4px;
+//    --prototype-space-20: 8px;
+//    ...
+//    --prototype-space-rem-10: 0.25rem;
+//    --prototype-space-rem-20: 0.5rem;
+//  }
+//  @media (min-width: 768px) {
+//    :root {
+//      --prototype-space-8: 8px;
+//      --prototype-space-20: 12px;
+//      ...
+//      --prototype-space-rem-8: 0.5rem;
+//      --prototype-space-rem-20: 0.75rem;
+//    }
+//  }
+//  ...
+//------------------------------------
+@mixin spacing-scale() {
+  @include mixins-spacing.spacing-scale-custom-props($spacing-scale);
+}
+
+@include spacing-scale();
+
+//------------------------------------
+//  03 - Utility Classes
+//  Generate sets of space related utility classes.
+//  These classes can be used to apply padding, margin, and gap to elements.
+//  They are most useful when used in conjunction with Mercury Editor and
+//  corresponding Style Options.
+//
+//  By default, these classes are disabled. To enable them, uncomment the
+//  relevant include statement below.
+//------------------------------------
+
+// Gap utility classes
+//
+// Example output:
+// .u-gap-0 {
+//   gap: var(--prototype-space-0);
+// }
+// .u-gap-8 {
+//   gap: var(--prototype-space-8);
+// }
+// .u-column-gap-0 {
+//   column-gap: var(--prototype-space-0);
+// }
+// .u-column-gap-8 {
+//   column-gap: var(--prototype-space-8);
+// }
+// .u-row-gap-0 {
+//   row-gap: var(--prototype-space-0);
+// }
+// .u-row-gap-8 {
+//   row-gap: var(--prototype-space-8);
+// }
+
+// @include mixins-spacing.gap-utility-classes($spacing-scale);
+
+
+// Padding utility classes
+//
+// Example output:
+// .u-p-0 {
+//   padding: var(--prototype-space-0);
+// }
+// .u-p-8 {
+//   padding: var(--prototype-space-8);
+// }
+// ...
+//
+// .u-pt-0 {
+//   padding-top: var(--prototype-space-0);
+// }
+// .u-pt-8 {
+//   padding-top: var(--prototype-space-8);
+// }
+// ...
+
+// @include mixins-spacing.padding-utility-classes($spacing-scale);
+
+// Margin utility classes
+//
+// Example output:
+// .u-m-0 {
+//   margin: var(--prototype-space-0);
+// }
+// .u-m-8 {
+//   margin: var(--prototype-space-8);
+// }
+// ...
+//
+// .u-mt-0 {
+//   margin-top: var(--prototype-space-0);
+// }
+// .u-mt-8 {
+//   margin-top: var(--prototype-space-8);
+// }
+// ...
+
+// @include mixins-spacing.margin-utility-classes($spacing-scale);

libraries/partials/_partials.scss

@@ -38,4 +38,5 @@
 @forward 'mixins/layout';
 @forward 'mixins/lists';
 @forward 'mixins/media';
+@forward 'mixins/spacing';
 @forward "mixins/typography";

libraries/partials/mixins/_spacing.scss

+//
+// Mixins - Spacing
+// Use these mixins to setup base spacing custom properties and utility classes.
+//
+// - 01 - Custom Properties
+// - 02 - Utitlity Classes
+//
+@use "sass:list";
+@use "sass:map";
+@use "sass:math";
+@use "../../partials/mixins/breakpoints" as bp;
+@use "../../partials/settings/base" as settings-base;
+
+
+// ------------------------------------
+// 01 - Custom Properties
+// The following mixins generate custom properties for spacing scales.
+// ------------------------------------
+
+/// Converts the map to a format that can be used to generate custom properties.
+/// grouped by breakpoint. This allows for more concise output in the final .css file.
+///
+/// @access private
+///
+/// @param {Map} $input-map - The size map
+///   $spacing-scale: (
+///     size1: (
+///       breakpoint1: pixelValue,
+///       breakpoint2: pixelValue,
+///       ...
+///     ),
+///     size2: ( ... ),
+///       ...
+///     ),
+///   );
+/// @return {Map} - The converted map
+///
+/// Example:
+/// $spacing-scale: (
+///   0: (
+///     mobile: 0,
+///   ),
+///   10: (
+///     mobile: 4,
+///     tablet: 8,
+///     sm-desktop: 10,
+///   ),
+/// );
+///
+/// $ouput: convert-spacing-map($input-map);
+///
+/// $output: (
+///   mobile: (
+///     0: (0, 0),
+///     10: (0.25, 4),
+///   ),
+///   tablet: (
+///     10: (0.5, 8),
+///   ),
+///   sm-desktop: (
+///     10: (0.625, 10),
+///   ),
+/// );
+///
+@function convert-spacing-map($input-map) {
+  $output-map: ();
+
+  @each $size, $breakpoints in $input-map {
+    @each $breakpoint, $value in $breakpoints {
+      $output-map: map.deep-merge(
+        $output-map,
+        (
+          $breakpoint: (
+            $size: (math.div($value, 16), $value),
+          ),
+        )
+      );
+    }
+  }
+
+  @return $output-map;
+}
+
+/// This mixin generates a full range of :root definitions for each size, and breakpoint
+/// from a spacing scale.
+///
+/// The spacing scale should be in the format:
+/// $spacing-scale: (
+///   size1: (
+///     breakpoint1: pixelValue,
+///     breakpoint2: pixelValue,
+///     ...
+///   ),
+///   size2: ( ... ),
+///     ...
+///   ),
+/// );
+/// @access public
+///
+/// @param {Map} $map - The size map
+/// @param {String} $prefix - The prefix to use for the CSS custom properties
+///
+/// @example scss - Usage
+///   @include spacing-scale-custom-props($spacing-map);
+///   @include spacing-scale-custom-props($spacing-map, 'theme-name');
+@mixin spacing-scale-custom-props($scale, $prefix: settings-base.$property-prefix) {
+  $map: convert-spacing-map($scale);
+  @if $prefix != "" {
+    $prefix: $prefix + "-";
+  }
+  $new-prefix: $prefix $prefix + "-";
+
+  :root {
+    @each $breakpoint, $sizes in $map {
+      @if ($breakpoint == "mobile") {
+        // px values.
+        @each $size, $value in $sizes {
+          --#{$prefix}space-#{$size}: #{nth($value, 2)}px;
+        }
+
+        // rem values.
+        @each $size, $value in $sizes {
+          @if ($size != nth($value, 2)) {
+            --#{$prefix}space-rem-#{$size}: #{nth($value, 1)}rem; /* #{nth($value, 2)}px */
+          }
+        }
+      } @else {
+        @include bp.bp-min($breakpoint) {
+          // px values.
+          @each $size, $value in $sizes {
+            --#{$prefix}space-#{$size}: #{nth($value, 2)}px;
+          }
+
+          // rem values.
+          @each $size, $value in $sizes {
+            @if ($size != nth($value, 2)) {
+              --#{$prefix}space-rem-#{$size}: #{nth($value, 1)}rem; /* #{nth($value, 2)}px */
+            }
+          }
+        }
+      }
+    }
+  }
+}
+
+// ------------------------------------
+// 02 - Utility Classes
+// The following mixins generate utility classes for padding, margin, and gap.
+// ------------------------------------
+
+/// This mixin generates a full range of gap utility classes for each size in
+/// the provided scale.
+///
+/// @access public
+///
+/// @param {Map} $scale - The spacing scale
+/// @param {String} $prefix - The prefix to use for the CSS custom properties
+///
+/// @example scss - Usage
+///  @include gap-utility-classes($spacing-map, 'theme-name');
+///
+@mixin gap-utility-classes($scale, $prefix: settings-base.$property-prefix) {
+  @if $prefix != "" {
+    $prefix: $prefix + "-";
+  }
+
+  $directions: (
+    column,
+    row,
+  );
+
+  @each $size, $value in $scale {
+    .u-gap-#{$size} {
+      gap: var(--#{$prefix}space-#{$size});
+    }
+  }
+
+  @each $direction in $directions {
+    @each $size, $value in $scale {
+      .u-#{$direction}-gap-#{$size} {
+        #{$direction}-gap: var(--#{$prefix}space-#{$size});
+      }
+    }
+  }
+}
+
+/// This mixin generates a full range of padding utility classes for each size in
+/// the provided scale.
+///
+/// @access public
+///
+/// @param {Map} $scale - The spacing scale
+/// @param {String} $prefix - The prefix to use for the CSS custom properties
+///
+/// @example scss - Usage
+/// @include padding-utility-classes($spacing-map, 'theme-name');
+///
+@mixin padding-utility-classes($scale, $prefix: settings-base.$property-prefix) {
+  @if $prefix != "" {
+    $prefix: $prefix + "-";
+  }
+
+  $directions: (
+    top: 't',
+    right: 'r',
+    bottom: 'b',
+    left: 'l',
+  );
+
+  @each $size, $value in $scale {
+    .u-p-#{$size} {
+      padding: var(--#{$prefix}space-#{$size});
+    }
+  }
+
+  @each $direction, $dir_prefix in $directions {
+    @each $size, $value in $scale {
+      .u-p#{$dir_prefix}-#{$size} {
+        padding-#{$direction}: var(--#{$prefix}space-#{$size});
+      }
+    }
+  }
+}
+
+/// This mixin generates a full range of margin utility classes for each size in
+/// the provided scale.
+///
+/// @access public
+///
+/// @param {Map} $scale - The spacing scale
+/// @param {String} $prefix - The prefix to use for the CSS custom properties
+///
+/// @example scss - Usage
+/// @include margin-utility-classes($spacing-map, 'theme-name');
+///
+@mixin margin-utility-classes($scale, $prefix: settings-base.$property-prefix) {
+  @if $prefix != "" {
+    $prefix: $prefix + "-";
+  }
+
+  $directions: (
+    top: 't',
+    right: 'r',
+    bottom: 'b',
+    left: 'l',
+  );
+
+  @each $size, $value in $scale {
+    .u-m-#{$size} {
+      margin: var(--#{$prefix}space-#{$size});
+    }
+  }
+
+  @each $direction, $dir_prefix in $directions {
+    .u-m#{$dir_prefix}-auto {
+      margin-#{$direction}: auto;
+    }
+
+    @each $size, $value in $scale {
+      .u-m#{$dir_prefix}-#{$size} {
+        margin-#{$direction}: var(--#{$prefix}space-#{$size});
+      }
+    }
+  }
+}

libraries/partials/mixins/_typography.scss

@@ -29,7 +29,7 @@
   line-height: var(--#{$prefix}lh-#{$category}-#{$size});
 }
 
-@function convert-map($input-map) {
+@function convert-type-scale-map($input-map) {
   $output-map: ();
 
   @each $category, $sizes in $input-map {
@@ -93,7 +93,7 @@
 ///   @include type-scale-custom-props($typography-map);
 ///   @include type-scale-custom-props($typography-map, 'theme-name');
 @mixin type-scale-custom-props($scale, $prefix: settings-base.$property-prefix) {
-  $map: convert-map($scale);
+  $map: convert-type-scale-map($scale);
   @if $prefix != "" {
     $prefix: $prefix + "-";
   }

prototype.libraries.yml

@@ -15,6 +15,7 @@ global:
       dist/css/global/region/region--footer.css: {}
       dist/css/global/region/region--navigation.css: {}
       dist/css/global/settings/colors.css: {}
+      dist/css/global/settings/spacing.css: {}
       dist/css/global/settings/typography.css: {}
   dependencies:
     - prototype/fonts

templates/node/node--teaser.html.twig

 {{ include('prototype:teaser', {
+  teaser_title: label|default(''),
   teaser_body: content.body,
-  teaser_layout: 'list-stack',
-  teaser_title_link:{ url: url, title: label|render},
+  teaser_link:{ url: url, text: label|render},
   attr: attributes
 }) }}

templates/styleguide/styleguide-content.html.twig

@@ -4,7 +4,7 @@
 {% endset %}
 
 
-<a name='accordion-group'></a>
+<a id='accordion-group'></a>
 <h2 class='styleguide'>Accordion Group</h2>
 <div class='styleguide'>
   {% embed "prototype:accordion-group" with {
@@ -28,7 +28,7 @@
   {% endembed %}
 </div>
 
-<a name='accordion-group'></a>
+<a id='accordion'></a>
 <h2 class='styleguide'>Accordion
 </h2>
 <div class='styleguide'>
@@ -40,7 +40,7 @@
     })}}
 </div>
 
-<a name='button'></a>
+<a id='button'></a>
 <h2 class='styleguide'>Button</h2>
 <div class='styleguide'>
   {{ include('prototype:button', {
@@ -49,7 +49,7 @@
 }, with_context = false) }}
 </div>
 
-<a name='button_icon'></a>
+<a id='button_icon'></a>
 <h2 class='styleguide'>
   Button with Icon</h2>
 <div class='styleguide'>
@@ -60,7 +60,7 @@
 }, with_context = false) }}
 </div>
 
-<a name='cta'></a>
+<a id='cta'></a>
 <h2 class='styleguide'>CTA</h2>
 <div class='styleguide'>
   {{ include('prototype:cta', {
@@ -72,7 +72,7 @@
 }, with_context = false) }}
 </div>
 
-<a name='figure'></a>
+<a id='figure'></a>
 <h2 class='styleguide'>Figure</h2>
 <div class='styleguide'>
   {{ include('prototype:figure', {
@@ -82,7 +82,7 @@
 }, with_context = false) }}
 </div>
 
-<a name='link'></a>
+<a id='link'></a>
 <h2 class='styleguide'>Link</h2>
 <div class='styleguide'>
   {{ include('prototype:link', {
@@ -91,7 +91,7 @@
 }, with_context = false) }}
 </div>
 
-<a name='link_icon'></a>
+<a id='link_icon'></a>
 <h2 class='styleguide'>Link with icon</h2>
 <div class='styleguide'>
   {{ include('prototype:link', {
@@ -101,7 +101,7 @@
 }, with_context = false) }}
 </div>
 
-<a name='page_title'></a>
+<a id='page_title'></a>
 <h2 class='styleguide'>Page Title</h2>
 <div class='styleguide'>
   {{ include('prototype:page-title', {
@@ -111,7 +111,7 @@
 </div>
 
 
-<a name='pullquote'></a>
+<a id='pullquote'></a>
 <h2 class='styleguide'>Pullquote</h2>
 <div class='styleguide'>
   {{ include('prototype:pullquote', {
@@ -121,7 +121,7 @@
 }, with_context = false) }}
 </div>
 
-<a name='sidebar'></a>
+<a id='sidebar'></a>
 <h2 class='styleguide'>Sidebar</h2>
 <div class='styleguide'>
   {{ include('prototype:sidebar', {
@@ -130,22 +130,19 @@
 }, with_context = false) }}
 </div>
 
-<a name='teaser'></a>
+<a id='teaser'></a>
 <h2 class='styleguide'>Teaser</h2>
 <div class='styleguide'>
   {{ include('prototype:teaser', {
-  teaser_layout: 'list-stack',
+  teaser_title: 'Example teaser title',
   teaser_body: 'Interdum risus tortor turpis gravida sed. Risus sit et egestas tellus ac sed. Purus ut eu fermentum non. Arcu lectus sed in quisque vitae posuere. Adipiscing nullam mauris iaculis leo turpis leo, congue.',
-  teaser_title_link: {url: url, title: 'Example link'},
-  teaser_icon: 'icon-arrow-right',
-  teaser_category: 'Example category',
-  teaser_category_link: {url: url, title: 'Example category link'},
+  teaser_link: {url: url, text: 'Example link'},
   teaser_media: content.40['#content'],
   attr: attributes
 }, with_context = false) }}
 </div>
 
-<a name='video'></a>
+<a id='video'></a>
 <h2 class='styleguide'>Video</h2>
 <div class='styleguide'>
   {{ include('prototype:video', {