diff --git a/.changeset/fluffy-ads-brush.md b/.changeset/fluffy-ads-brush.md new file mode 100644 index 000000000..e7fee24b1 --- /dev/null +++ b/.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 diff --git a/src/components/heading/demo/weights.twig b/src/components/heading/demo/weights.twig new file mode 100644 index 000000000..22f6248f1 --- /dev/null +++ b/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 bold text + {% endblock %} + {% endembed %} + {% endblock %} +{% endembed %} diff --git a/src/components/heading/heading.scss b/src/components/heading/heading.scss index 61cdff73f..e18f8e636 100644 --- a/src/components/heading/heading.scss +++ b/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; + } } /** diff --git a/src/components/heading/heading.stories.mdx b/src/components/heading/heading.stories.mdx index 98569489a..df7de588a 100644 --- a/src/components/heading/heading.stories.mdx +++ b/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'; @@ -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. bold text + {% endblock %} +{% endembed %}`, + }, + }, }} > - {(args) => template(args)} + {weightsDemo}