Support b and strong from c-heading--light

.changeset/fluffy-ads-brush.md

@@ -0,0 +1,5 @@
+---
+'@cloudfour/patterns': minor
+---
+
+Define weights for `b` and `strong` elements nested inside of `c-heading` when `c-heading--light` modifier is applied, allowing certain key words or phrases to be emphasized visually

src/components/heading/demo/weights.twig

@@ -0,0 +1,23 @@
+{% embed '@cloudfour/objects/rhythm/rhythm.twig' with {
+  class: 'o-rhythm--generous'
+} only %}
+  {% block content %}
+    {% include '@cloudfour/components/heading/heading.twig' with {
+      "level": 1,
+      "content": "Default weight"
+    } only %}
+    {% include '@cloudfour/components/heading/heading.twig' with {
+      "level": 1,
+      "weight": "light",
+      "content": "Light weight"
+    } only %}
+    {% embed '@cloudfour/components/heading/heading.twig' with {
+      "level": 1,
+      "weight": "light",
+    } only %}
+      {% block content %}
+        Light weight with <b>bold</b> text
+      {% endblock %}
+    {% endembed %}
+  {% endblock %}
+{% endembed %}

src/components/heading/heading.scss

@@ -72,6 +72,16 @@ $max-width-permalink-shift: math.div($min-width-permalink-shift * 16 - 1, 16);
 
 .c-heading--light {
   font-weight: font-weight.$light;
+
+  /**
+   * Restore default font weight for bold/emphasis elements nested within light
+   * headings. Without this, `b` and `strong` elements will only be one step
+   * up in weight.
+   */
+  b,
+  strong {
+    font-weight: font-weight.$bold;
+  }
 }
 
 /**

src/components/heading/heading.stories.mdx

@@ -1,7 +1,7 @@
 import { Story, Canvas, Meta } from '@storybook/addon-docs/blocks';
 import levelsDemo from './demo/levels.twig';
-import template from './heading.twig';
 import permalinksDemo from './demo/permalinks.twig';
+import weightsDemo from './demo/weights.twig';
 
 <Meta title="Components/Heading" />
 
@@ -53,18 +53,32 @@ You can control the appearance of a `c-heading` component by including a `c-head
 
 ## Light Weight Modifier
 
-The default font weight for headings is normally defined by heading level. This modifier will change the heading to `font-weight.$light`. We do this to maintain the importance of headings without drowning out other content.
+For headings that are large in `font-size` but should have a bit less visual emphasis than others, the `c-heading--light` modifier will apply a lighter weight. You may use `b` or `strong` elements to emphasize key words or phrases within these headings.
 
 <Canvas>
   <Story
-    name="Light weight"
-    args={{
-      level: 1,
-      weight: 'light',
-      content: 'c-heading--light',
+    name="Weights"
+    parameters={{
+      docs: {
+        source: {
+          code: `{% include '@cloudfour/components/heading/heading.twig' with {
+  "level": 1,
+  "weight": "light",
+  "content": "Light weight"
+} only %}
+{% embed '@cloudfour/components/heading/heading.twig' with {
+  "level": 1,
+  "weight": "light",
+} only %}
+  {% block content %}
+    Light weight with <b>bold</b> text
+  {% endblock %}
+{% endembed %}`,
+        },
+      },
     }}
   >
-    {(args) => template(args)}
+    {weightsDemo}
   </Story>
 </Canvas>