Style horizontal rules and separators

.changeset/fifty-pigs-sniff.md

@@ -0,0 +1,5 @@
+---
+'@cloudfour/patterns': minor
+---
+
+Add default hr styles and improved WordPress Separator block styles

src/base/_defaults.scss

@@ -1,3 +1,4 @@
+@use 'sass:math';
 @use '../compiled/tokens/scss/color';
 @use '../compiled/tokens/scss/size';
 @use '../mixins/border-radius';
@@ -268,3 +269,21 @@ figcaption {
 address {
   font-style: normal;
 }
+
+/**
+ * Horizontal rules
+ *
+ * We use border styles and `currentColor` for greater compatibility with
+ * the WordPress Gutenberg "Separator" block.
+ *
+ * 1. Our goal is for the borders to add together to form the total desired
+ *    width. We do this because that's what WordPress's Gutenberg block does
+ *    in order to support weird border+background style combinations.
+ */
+
+hr {
+  border-color: currentColor;
+  border-style: solid;
+  border-width: math.div(size.$edge-medium, 2) 0; /* 1 */
+  color: var(--theme-color-border-text-group);
+}

src/design/defaults.stories.mdx

@@ -112,3 +112,17 @@ For syntax highlighting, see [our Prism theme](/docs/vendor-prism--bash-shell).
     }}
   </Story>
 </Canvas>
+
+## Horizontal rule
+
+Only use `hr` elements to represent a "thematic break" in content, such as a change in topic within a section. For divisions that are purely presentational, use CSS instead.
+
+To add space between the `hr` and adjacent elements, consider wrapping the section of content in [a Rhythm object](/docs/objects-rhythm--default-story).
+
+<Canvas>
+  <Story name="Horizontal rule">
+    {`<p>…and so ends this topic.</p>
+<hr>
+<p>Shifting our focus to something else entirely…</p>`}
+  </Story>
+</Canvas>

src/vendor/wordpress/core-blocks.stories.mdx

@@ -1,4 +1,4 @@
-import { Story, Canvas, Meta } from '@storybook/addon-docs';
+import { Story, Canvas, Meta, ArgsTable } from '@storybook/addon-docs';
 import blockImageDemo from './demo/image.twig';
 const alignmentClasses = {
   None: '',
@@ -502,15 +502,27 @@ The separator block adds the `wp-block-separator` class to an `hr` element.
 
 Styles controls add `is-style-default`, `is-style-wide` or `is-style-dots` classes.
 
-The color controls, if used, can add both `has-text-color` and `has-background`
-classes, as well as modifier classes for predefined color choices.
+The color controls, if used, can add both `has-text-color` and `has-background` classes, as well as modifier classes for predefined color choices. For consistency with [our default hr](/docs/design-defaults--horizontal-rule), we only support the text color option.
 
-<Canvas>
-  <Story name="Separator">
-    {`<hr class="wp-block-separator has-text-color has-background has-subtle-background-background-color has-subtle-background-color is-style-wide">`}
+<Canvas isColumn>
+  <Story
+    name="Separator"
+    args={{ style: 'default' }}
+    argTypes={{
+      style: {
+        options: ['default', 'wide', 'dots'],
+        control: {
+          type: 'select',
+        },
+      },
+    }}
+  >
+    {(args) => `<hr class="wp-block-separator is-style-${args.style}">`}
   </Story>
 </Canvas>
 
+<ArgsTable story="Separator" />
+
 ## Spacer
 
 The spacer block is a `div` with a class of `wp-block-spacer`.

src/vendor/wordpress/styles/_core-blocks.scss

@@ -281,3 +281,16 @@ $wp-button-gap: size.$spacing-gap-button-group-default;
     text-align: left;
   }
 }
+
+/**
+ * Gutenberg block: Separator
+ *
+ * The default separator is intended to be partial-width, so we apply those
+ * styles selectively here rather than un-applying them to the other modifiers.
+ */
+
+.wp-block-separator.is-style-default {
+  margin-left: auto;
+  margin-right: auto;
+  width: calc(100% / 3);
+}