From d787b789c7ec5ddb3c67618118c3796ff97c51cf Mon Sep 17 00:00:00 2001
From: Tyler Sticka <tyler@cloudfour.com>
Date: Mon, 8 Nov 2021 10:32:32 -0800
Subject: [PATCH 1/3] Add separator styles

---
 src/base/_defaults.scss                       | 15 ++++++++++++
 src/design/defaults.stories.mdx               | 14 +++++++++++
 src/vendor/wordpress/core-blocks.stories.mdx  | 24 ++++++++++++++-----
 src/vendor/wordpress/styles/_core-blocks.scss | 13 ++++++++++
 4 files changed, 60 insertions(+), 6 deletions(-)

diff --git a/src/base/_defaults.scss b/src/base/_defaults.scss
index 1c302f3f5..3d6c100fd 100644
--- a/src/base/_defaults.scss
+++ b/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,17 @@ figcaption {
 address {
   font-style: normal;
 }
+
+/**
+ * Horizontal rules
+ *
+ * We use border styles and `currentColor` for greater compatibility with
+ * the WordPress Gutenberg "Separator" block.
+ */
+
+hr {
+  border-color: currentColor;
+  border-style: solid;
+  border-width: math.div(size.$edge-medium, 2) 0;
+  color: var(--theme-color-border-text-group);
+}
diff --git a/src/design/defaults.stories.mdx b/src/design/defaults.stories.mdx
index 2db95e73e..868e406b9 100644
--- a/src/design/defaults.stories.mdx
+++ b/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>
diff --git a/src/vendor/wordpress/core-blocks.stories.mdx b/src/vendor/wordpress/core-blocks.stories.mdx
index 5e5c39ce8..8bf2ddcf0 100644
--- a/src/vendor/wordpress/core-blocks.stories.mdx
+++ b/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`.
diff --git a/src/vendor/wordpress/styles/_core-blocks.scss b/src/vendor/wordpress/styles/_core-blocks.scss
index 97e3221fd..efa2dfe90 100644
--- a/src/vendor/wordpress/styles/_core-blocks.scss
+++ b/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);
+}

From b07e06803b4581424448cd5b565f17f500f34d0b Mon Sep 17 00:00:00 2001
From: Tyler Sticka <tyler@cloudfour.com>
Date: Mon, 8 Nov 2021 10:38:09 -0800
Subject: [PATCH 2/3] Add changeset

---
 .changeset/fifty-pigs-sniff.md | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 .changeset/fifty-pigs-sniff.md

diff --git a/.changeset/fifty-pigs-sniff.md b/.changeset/fifty-pigs-sniff.md
new file mode 100644
index 000000000..5dd3299c3
--- /dev/null
+++ b/.changeset/fifty-pigs-sniff.md
@@ -0,0 +1,5 @@
+---
+'@cloudfour/patterns': minor
+---
+
+Add default hr styles and improved WordPress Separator block styles

From 6566904dead035f4070a3f7f3383501c5952fbce Mon Sep 17 00:00:00 2001
From: Tyler Sticka <tyler@cloudfour.com>
Date: Mon, 8 Nov 2021 14:22:27 -0800
Subject: [PATCH 3/3] Add more border width explanation

---
 src/base/_defaults.scss | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/src/base/_defaults.scss b/src/base/_defaults.scss
index 3d6c100fd..579dd4b6b 100644
--- a/src/base/_defaults.scss
+++ b/src/base/_defaults.scss
@@ -275,11 +275,15 @@ address {
  *
  * 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;
+  border-width: math.div(size.$edge-medium, 2) 0; /* 1 */
   color: var(--theme-color-border-text-group);
 }