From 6d1b94c21ea534a3ced8c3d0086c5865d65053e5 Mon Sep 17 00:00:00 2001
From: Tobias Ahlin Bjerrome <hello@tobiasahlin.com>
Date: Mon, 19 Apr 2021 17:25:09 +0200
Subject: [PATCH] Add small variant, and update documentation

---
 docs/content/components/marketing-buttons.md | 13 +++++++++----
 src/marketing/buttons/button.scss            |  9 +++++++--
 2 files changed, 16 insertions(+), 6 deletions(-)

diff --git a/docs/content/components/marketing-buttons.md b/docs/content/components/marketing-buttons.md
index ed8ab324..2769bad5 100644
--- a/docs/content/components/marketing-buttons.md
+++ b/docs/content/components/marketing-buttons.md
@@ -25,14 +25,19 @@ The solid blue and solid green buttons have more visual emphasis than the blue o
 
 ## Sizes
 
-Available in two sizes, marketing buttons have a default size and a large size.
+Available in three sizes, marketing buttons have a default size and a large size.
 
 ```html live
+<button class="btn-mktg btn-sm-mktg mr-2" type="button">Learn more</button>
+<button class="btn-mktg btn-primary-mktg btn-sm-mktg mr-2" type="button">Sign up</button>
+<button class="btn-mktg btn-outline-mktg btn-sm-mktg mr-2" type="button">Learn more</button>
+<hr>
 <button class="btn-mktg mr-2" type="button">Learn more</button>
 <button class="btn-mktg btn-primary-mktg mr-2" type="button">Sign up</button>
 <button class="btn-mktg btn-outline-mktg mr-2" type="button">Learn more</button>
 <hr>
-<button class="btn-mktg btn-large-mktg mr-2" type="button">Learn more</button>
-<button class="btn-mktg btn-primary-mktg btn-large-mktg mr-2" type="button">Sign up</button>
-<button class="btn-mktg btn-outline-mktg btn-large-mktg mr-2" type="button">Learn more</button>
+<button class="btn-mktg btn-lg-mktg mr-2" type="button">Learn more</button>
+<button class="btn-mktg btn-primary-mktg btn-lg-mktg mr-2" type="button">Sign up</button>
+<button class="btn-mktg btn-outline-mktg btn-lg-mktg mr-2" type="button">Learn more</button>
+<hr>
 ```
diff --git a/src/marketing/buttons/button.scss b/src/marketing/buttons/button.scss
index eeeae427..a8f0478c 100644
--- a/src/marketing/buttons/button.scss
+++ b/src/marketing/buttons/button.scss
@@ -69,9 +69,14 @@
   transition: box-shadow 0.4s, color 0.4s;
 }
 
-// Large
+// Size modifiers
 
-.btn-large-mktg {
+.btn-sm-mktg {
+  // stylelint-disable-next-line primer/spacing
+  padding: rem(10px) rem($spacer-4) rem(12px);
+}
+
+.btn-lg-mktg {
   // stylelint-disable-next-line primer/spacing
   padding: 20px 30px 22px !important;
 }