More consistent column gaps (#1896)

Author: tylersticka

.changeset/sweet-pumpkins-dance.md

@@ -0,0 +1,5 @@
+---
+'@cloudfour/patterns': minor
+---
+
+Made Cloud Cover column gaps consistent with the Deck layout object to improve visual relationship of `content` and `extra` blocks

src/components/cloud-cover/cloud-cover.scss

@@ -2,8 +2,8 @@
 @use '../../compiled/tokens/scss/breakpoint';
 @use '../../compiled/tokens/scss/color';
 @use '../../compiled/tokens/scss/size';
-@use '../../mixins/ms';
 @use '../../mixins/fluid';
+@use '../../mixins/spacing';
 
 /// Setting the breakpoint to `m` (40em) results in an awkward layout
 /// when using the Subscribe form in the `extra` slot. However, setting
@@ -13,14 +13,22 @@
 
 $_cloud-cover-breakpoint: 45em;
 
-/// We can't use `grid-gap` exclusively due to some containers only being present
-/// some of the time, so we re-use this value for `grid-gap` and for `margin`
-/// later on.
+/// We can't use `gap` exclusively due to some containers only being present
+/// some of the time, so we re-use this value for `gap` and for `margin` later
+/// on.
 ///
 /// @type Number
 /// @access private
 
-$_gap: ms.step(1);
+$_row_gap: size.$rhythm-default;
+
+/// At wider sizes we want to add a bit more horizontal/inline space between
+/// content sections.
+///
+/// @type Number
+/// @access private
+
+$_column_gap: spacing.$fluid-gap;
 
 /// The ideal cloud size is a factor of both the viewport width and height, and
 /// we size other elements based on factors of this value. This function returns
@@ -146,8 +154,8 @@ $_gap: ms.step(1);
 
 .c-cloud-cover__inner {
   align-items: center;
+  column-gap: $_column_gap;
   display: grid;
-  grid-column-gap: $_gap;
   grid-template-areas:
     '.'
     'scene'
@@ -242,7 +250,7 @@ $_gap: ms.step(1);
    */
 
   @media (width < $_cloud-cover-breakpoint) {
-    margin-block-start: $_gap;
+    margin-block-start: $_row_gap;
   }
 }
 
@@ -267,7 +275,7 @@ $_gap: ms.step(1);
 
   @media (width < $_cloud-cover-breakpoint) {
     block-size: _cloud-space(2);
-    margin-block-end: $_gap;
+    margin-block-end: $_row_gap;
   }
 
   /**
@@ -295,7 +303,7 @@ $_gap: ms.step(1);
 
   @media (width < $_cloud-cover-breakpoint) {
     block-size: _cloud-space(3);
-    margin-block: $_gap 0;
+    margin-block: $_row_gap 0;
   }
 
   /**

src/components/cloud-cover/demo/extra.twig

@@ -2,19 +2,12 @@
   {% block heading %}
     {% include '@cloudfour/components/heading/heading.twig' with {
       level: -2,
-      content: 'What We Do'
+      content: 'Articles'
     } only %}
   {% endblock %}
   {% block content %}
     <p>
-      We
-      {% include '@cloudfour/components/icon/icon.twig' with {
-        name: 'heart',
-        title: 'love',
-        inline: true
-      } only %}
-      <span class="u-hidden-visually">love</span>
-      solving tough puzzles through design and&nbsp;code.
+      Sharing what we learn exploring the frontier of the web.
     </p>
   {% endblock %}
   {% block extra %}

src/mixins/_spacing.scss

@@ -29,6 +29,12 @@ $fluid-spacing-inline-negative: fluid.fluid-clamp(
   $fluid-spacing-breakpoint-min,
   $fluid-spacing-breakpoint-max
 );
+$fluid-gap: fluid.fluid-clamp(
+  size.$spacing-gap-fluid-min,
+  size.$spacing-gap-fluid-max,
+  $fluid-spacing-breakpoint-min,
+  $fluid-spacing-breakpoint-max
+);
 
 @mixin fluid-padding-block() {
   padding-block: $fluid-spacing-block;

src/objects/deck/deck.scss

@@ -1,26 +1,18 @@
 @use '../../compiled/tokens/scss/breakpoint';
 @use '../../compiled/tokens/scss/size';
-@use '../../mixins/fluid';
 @use '../../mixins/media-query';
 @use '../../mixins/spacing';
 
 /**
  * 1. If horizontal items are shown at the wrong column count, they will appear
  *    to break the grid. This rule keeps items densely packed so it will always
  *    appear visually correct.
- *
- * @todo Use progressive enhancement so older browsers get a minimal fallback.
  */
 
 .o-deck {
   display: grid;
   grid-auto-flow: dense; /* 1 */
-  grid-gap: fluid.fluid-clamp(
-    size.$spacing-gap-fluid-min,
-    size.$spacing-gap-fluid-max,
-    breakpoint.$s,
-    breakpoint.$xl
-  );
+  grid-gap: spacing.$fluid-gap;
 
   /**
    * We define a media query for our initial grid so child elements will flex