Make nested headings inherit font colors (#1506)

This is necessary in Wordpress to be able to apply Gutenberg colors classes to permalinked headings

Author: Paul-Hebert

.changeset/sharp-moles-lick.md

@@ -0,0 +1,5 @@
+---
+'@cloudfour/patterns': patch
+---
+
+Make nested headings inherit font colors

src/components/heading/heading.scss

@@ -113,9 +113,10 @@ $max-width-permalink-shift: math.div($min-width-permalink-shift * 16 - 1, 16);
 
 /// For complex headings (those containing a permalink and/or subheading), the
 /// actual `h*` element must be a child element, so we inherit the container's
-/// font styles. It's important the containing element retain the heading font
-/// styles for vertical rhythm to work as intended!
+/// font and color styles. It's important the containing element retain the
+/// heading font styles for vertical rhythm to work as intended!
 .c-heading__content {
+  color: inherit;
   font: inherit;
 }
 

src/components/heading/heading.stories.mdx

@@ -50,6 +50,10 @@ import demo from './demo/demo.twig';
         options: ['', 'light'],
       },
     },
+    class: {
+      type: 'string',
+      description: 'If necessary, additional classes can be added to headings.',
+    },
   }}
   parameters={{
     docs: {