Chore: style gutenberg button same as c-button

src/components/button/button.scss

@@ -1,111 +1,21 @@
-@use "../../design-tokens/colors.yml";
-@use "../../design-tokens/font.yml";
-@use "../../design-tokens/motion.yml";
-@use "../../design-tokens/sizes.yml";
-@use "../../mixins/focus";
-@use "../../mixins/ms";
-@use "../../mixins/unit";
-
-/**
- * Button object
- *
- * 1. More overtly actionable cursor appearance. Recently this tweak has come
- *    with some contention, but our experience has been that the average user
- *    doesn't differentiate cursor styles between different styles of action.
- * 2. Although we will be overtly setting some typographic properties, the
- *    shorthand is helpful for completely overriding all system font styles as
- *    a starting point.
- * 3. We set a height to coordinate consistently with `c-input`. Unfortunately
- *    browsers don't consistently size inputs without setting `height`.
- */
+@use "../../mixins/button";
 
 .c-button {
-  background: colors.$primary-brand;
-  border-color: colors.$primary-brand-dark;
-  border-radius: sizes.$radius-medium;
-  border-style: solid;
-  border-width: sizes.$edge-medium;
-  color: colors.$text-light-emphasis;
-  cursor: pointer; /* 1 */
-  display: inline-block;
-  font: inherit; /* 2 */
-  font-style: normal;
-  font-weight: font.$weight-semibold;
-  height: sizes.$control-height; /* 3 */
-  line-height: normal;
-  padding: sizes.$control-pad-vertical sizes.$control-pad-horizontal;
-  position: relative;
-  text-align: center;
-  text-decoration: none;
-  transition: filter motion.$speed-slow motion.$ease-out,
-    transform motion.$speed-quick motion.$ease-out;
-  user-select: none;
-
-  /**
-   * Transform, opacity and filter changes are performant and will work across
-   * many more stylistic modifiers than specific color shifts.
-   */
-
-  &:hover {
-    filter: brightness(motion.$control-brighten);
-    transform: scale(motion.$control-grow);
-  }
-
-  &:active {
-    filter: brightness(motion.$control-dim);
-    transform: scale(motion.$control-shrink);
-  }
-
-  &:disabled {
-    cursor: not-allowed;
-    filter: grayscale(60%);
-    opacity: 0.85;
-    transform: none;
-  }
-
-  @include focus.focus-visible {
-    box-shadow: 0 0 0 sizes.$edge-large colors.$primary-brand-lighter;
-  }
-
-  .t-dark & {
-    background-color: colors.$primary-brand-dark;
-    border-color: colors.$primary-brand-darker;
-  }
+  @include button.default;
 }
 
 /**
  * Modifier: Secondary
  */
 
 .c-button--secondary {
-  border-color: colors.$primary-brand-light;
-  color: colors.$primary-brand;
-
-  &,
-  .t-dark & {
-    background-color: transparent;
-  }
-
-  .t-dark & {
-    border-color: colors.$primary-brand-dark;
-    color: colors.$text-light-emphasis;
-  }
+  @include button.secondary;
 }
 
 /**
  * Modifier: Tertiary
  */
 
 .c-button--tertiary {
-  color: colors.$primary-brand;
-
-  &,
-  .t-dark & {
-    background-color: transparent;
-    border-color: transparent;
-  }
-
-  .t-dark & {
-    color: colors.$text-light-emphasis;
-  }
+  @include button.tertiary;
 }

src/mixins/_button.scss

@@ -0,0 +1,111 @@
+@use "../design-tokens/colors.yml";
+@use "../design-tokens/font.yml";
+@use "../design-tokens/motion.yml";
+@use "../design-tokens/sizes.yml";
+@use "./focus";
+@use "./ms";
+@use "./unit";
+
+/**
+ * Button object
+ *
+ * 1. More overtly actionable cursor appearance. Recently this tweak has come
+ *    with some contention, but our experience has been that the average user
+ *    doesn't differentiate cursor styles between different styles of action.
+ * 2. Although we will be overtly setting some typographic properties, the
+ *    shorthand is helpful for completely overriding all system font styles as
+ *    a starting point.
+ * 3. We set a height to coordinate consistently with `c-input`. Unfortunately
+ *    browsers don't consistently size inputs without setting `height`.
+ */
+
+@mixin default {
+  background: colors.$primary-brand;
+  border-color: colors.$primary-brand-dark;
+  border-radius: sizes.$radius-medium;
+  border-style: solid;
+  border-width: sizes.$edge-medium;
+  color: colors.$text-light-emphasis;
+  cursor: pointer; /* 1 */
+  display: inline-block;
+  font: inherit; /* 2 */
+  font-style: normal;
+  font-weight: font.$weight-semibold;
+  height: sizes.$control-height; /* 3 */
+  line-height: normal;
+  padding: sizes.$control-pad-vertical sizes.$control-pad-horizontal;
+  position: relative;
+  text-align: center;
+  text-decoration: none;
+  transition: filter motion.$speed-slow motion.$ease-out,
+    transform motion.$speed-quick motion.$ease-out;
+  user-select: none;
+
+  /**
+   * Transform, opacity and filter changes are performant and will work across
+   * many more stylistic modifiers than specific color shifts.
+   */
+
+  &:hover {
+    filter: brightness(motion.$control-brighten);
+    transform: scale(motion.$control-grow);
+  }
+
+  &:active {
+    filter: brightness(motion.$control-dim);
+    transform: scale(motion.$control-shrink);
+  }
+
+  &:disabled {
+    cursor: not-allowed;
+    filter: grayscale(60%);
+    opacity: 0.85;
+    transform: none;
+  }
+
+  @include focus.focus-visible {
+    box-shadow: 0 0 0 sizes.$edge-large colors.$primary-brand-lighter;
+  }
+
+  .t-dark & {
+    background-color: colors.$primary-brand-dark;
+    border-color: colors.$primary-brand-darker;
+  }
+}
+
+/**
+ * Modifier: Secondary
+ */
+
+@mixin secondary {
+  border-color: colors.$primary-brand-light;
+  color: colors.$primary-brand;
+
+  &,
+  .t-dark & {
+    background-color: transparent;
+  }
+
+  .t-dark & {
+    border-color: colors.$primary-brand-dark;
+    color: colors.$text-light-emphasis;
+  }
+}
+
+/**
+ * Modifier: Tertiary
+ */
+
+@mixin tertiary {
+  color: colors.$primary-brand;
+
+  &,
+  .t-dark & {
+    background-color: transparent;
+    border-color: transparent;
+  }
+
+  .t-dark & {
+    color: colors.$text-light-emphasis;
+  }
+}

src/vendor/wordpress/_wordpress.scss

@@ -0,0 +1,24 @@
+@use "../../mixins/button";
+@use "../../design-tokens/sizes.yml";
+
+/**
+ * Gutenberg block: Button
+ * Applies our pattern library styles to buttons generated via Gutenberg blocks.
+ *
+ * 1. The block editor allows editors to adjust button border radius. This style
+ *    is applied via an inline style on the `wp-block-button__link` element. In
+ *    order to prevent unwanted border-radius we apply an `!important` tag.
+ */
+
+.wp-block-button {
+  display: inline-block;
+
+  .wp-block-button__link {
+    @include button.default;
+    border-radius: sizes.$radius-medium !important; /* 1 */
+  }
+
+  &.is-style-outline .wp-block-button__link {
+    @include button.secondary;
+  }
+}

src/vendor/wordpress/gutenberg.stories.mdx

@@ -53,8 +53,7 @@ container.
 
 ## Button
 
-The button block adds call-to-action-style links to a post. Container elements provide
-layout.
+The button block adds call-to-action-style links to a post. When multiple buttons are added the `wp-block-buttons` container controls layout.
 
 If chosen, a button can have only an outline (no fill color), which adds the `is-style-outline`
 class on the `.wp-block-button` element.
@@ -65,11 +64,16 @@ and border radius.
 <Preview>
   <Story name="core/button" height="100px">
     {`<div class="wp-block-buttons">
-        <div class="wp-block-button">
-          <a class="wp-block-button__link" href="https:/end wp-themes.com/twentytwenty/" style="border-radius:50px" target="_blank" rel="noopener noreferrer">
+        <div class="wp-block-button is-style-fill">
+          <a class="wp-block-button__link" href="#">
             Button
           </a>
         </div>
+        <div class="wp-block-button is-style-outline">
+          <a class="wp-block-button__link" href="#">
+            Another Outlined button
+          </a>
+        </div>
     </div>`}
   </Story>
 </Preview>