Two o-rhythm improvements

.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.

.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`

src/mixins/_spacing.scss

@@ -15,14 +15,19 @@
   }
 
   // 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,
     & > * + h3,
     & > * + h4,
     & > * + h5,
-    & > * + h6 {
+    & > * + h6,
+    & > * + [class*='heading'] {
       margin-top: var(--rhythm-headings);
     }
   }

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 %}

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 {

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>
 ```