From 439abc5281faec41a45e065f806563f3b4266f8a Mon Sep 17 00:00:00 2001
From: Tyler Sticka <tyler@tylersticka.com>
Date: Mon, 9 Aug 2021 13:55:05 -0700
Subject: [PATCH 1/3] Support heading classes, add default rhythm

---
 src/mixins/_spacing.scss              | 3 ++-
 src/objects/rhythm/demo/article.twig  | 8 +++++++-
 src/objects/rhythm/rhythm.scss        | 4 ++++
 src/objects/rhythm/rhythm.stories.mdx | 7 ++++++-
 4 files changed, 19 insertions(+), 3 deletions(-)

diff --git a/src/mixins/_spacing.scss b/src/mixins/_spacing.scss
index effb506b8..117367efe 100644
--- a/src/mixins/_spacing.scss
+++ b/src/mixins/_spacing.scss
@@ -22,7 +22,8 @@
     & > * + h3,
     & > * + h4,
     & > * + h5,
-    & > * + h6 {
+    & > * + h6,
+    & > * + [class*='heading'] {
       margin-top: var(--rhythm-headings);
     }
   }
diff --git a/src/objects/rhythm/demo/article.twig b/src/objects/rhythm/demo/article.twig
index 5617c3498..e46a22023 100644
--- a/src/objects/rhythm/demo/article.twig
+++ b/src/objects/rhythm/demo/article.twig
@@ -17,7 +17,13 @@
           <li>Media queries</li>
         </ul>
         <p>That seems simple enough. But when it comes to defining what is responsive, things get a bit fuzzier.</p>
-        <h2>Is Google Plus responsive?</h2>
+
+        {% include '@cloudfour/components/heading/heading.twig' with {
+          level: 2,
+          content: 'Is Google Plus responsive?',
+          permalink: true,
+        } only %}
+
         <p>The best way to understand where the differences of opinion exist is by looking at an real life example: is <a href="http://plus.google.com">Google Plus</a> responsive?</p>
         {% embed '@cloudfour/objects/embed/embed.twig' with { class: 'o-embed--wide' } only %}
           {% block content %}
diff --git a/src/objects/rhythm/rhythm.scss b/src/objects/rhythm/rhythm.scss
index a57053af6..d8b773a4d 100644
--- a/src/objects/rhythm/rhythm.scss
+++ b/src/objects/rhythm/rhythm.scss
@@ -24,6 +24,10 @@
   --rhythm: #{size.$rhythm-generous};
 }
 
+.o-rhythm--default {
+  --rhythm: #{size.$rhythm-default};
+}
+
 // Heading modifiers
 
 .o-rhythm--generous-headings {
diff --git a/src/objects/rhythm/rhythm.stories.mdx b/src/objects/rhythm/rhythm.stories.mdx
index 3a3298eb9..d0db66fc7 100644
--- a/src/objects/rhythm/rhythm.stories.mdx
+++ b/src/objects/rhythm/rhythm.stories.mdx
@@ -75,9 +75,11 @@ While `o-rhythm--generous` is intended for separating distinct content chunks wi
   </Story>
 </Canvas>
 
+To revert to the default spacing in nested rhythm objects, use the `o-rhythm--default` modifier.
+
 ## Heading Modifiers
 
-The `o-rhythm--generous-headings` modifier helps differentiate sections of articles (or similarly long prose content) by adding more whitespace before headings than other elements.
+The `o-rhythm--generous-headings` modifier helps differentiate sections of articles (or similarly long prose content) by adding more whitespace before headings (or elements with a class name containing `heading`, such as [our heading component](/docs/components-heading--levels#heading)).
 
 <!--
 This example isn't inlined so any media queries affecting the container will
@@ -108,6 +110,9 @@ If you have access to the markup, you can add the `o-rhythm` class to the child
   <div class="o-rhythm">
     <!-- will also be condensed -->
   </div>
+  <div class="o-rhythm o-rhythm--default">
+    <!-- will not be condensed -->
+  </div>
   <!-- ... -->
 </div>
 ```

From 39ddc373a6527faf29bba9c09c4b50a777e8bfa7 Mon Sep 17 00:00:00 2001
From: Tyler Sticka <tyler@tylersticka.com>
Date: Mon, 9 Aug 2021 13:56:43 -0700
Subject: [PATCH 2/3] Add changeset

---
 .changeset/good-ducks-share.md  | 5 +++++
 .changeset/lazy-bees-perform.md | 5 +++++
 2 files changed, 10 insertions(+)
 create mode 100644 .changeset/good-ducks-share.md
 create mode 100644 .changeset/lazy-bees-perform.md

diff --git a/.changeset/good-ducks-share.md b/.changeset/good-ducks-share.md
new file mode 100644
index 000000000..24457659e
--- /dev/null
+++ b/.changeset/good-ducks-share.md
@@ -0,0 +1,5 @@
+---
+'@cloudfour/patterns': minor
+---
+
+The `o-rhythm--default` modifier may now be used to revert to default spacing in nested rhythm objects.
diff --git a/.changeset/lazy-bees-perform.md b/.changeset/lazy-bees-perform.md
new file mode 100644
index 000000000..bbb8f9ff2
--- /dev/null
+++ b/.changeset/lazy-bees-perform.md
@@ -0,0 +1,5 @@
+---
+'@cloudfour/patterns': minor
+---
+
+Elements with a class containing 'heading' will now be affected by `o-rhythm--generous-headings`

From 1b65b6338204aaf28ad78bd1afadd2c98974c6c7 Mon Sep 17 00:00:00 2001
From: Tyler Sticka <tyler@tylersticka.com>
Date: Mon, 9 Aug 2021 14:54:43 -0700
Subject: [PATCH 3/3] Add clarifying comment

---
 src/mixins/_spacing.scss | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/src/mixins/_spacing.scss b/src/mixins/_spacing.scss
index 117367efe..85d6f211a 100644
--- a/src/mixins/_spacing.scss
+++ b/src/mixins/_spacing.scss
@@ -15,7 +15,11 @@
   }
 
   // Where custom properties are supported, also allow headings to receive their
-  // own rhythm.
+  // own rhythm. Note that we also apply this selector to classes containing
+  // `heading`, which covers cases like the `c-heading` component or element
+  // classes like `{component-name}__heading`. This encourages developers to
+  // use semantic markup for headings without worrying about compatibility with
+  // rhythm helpers.
   @supports (--custom: properties) {
     & > * + h1,
     & > * + h2,