From 85851f82deef1e27d870e7f0847bc98bfcc9d565 Mon Sep 17 00:00:00 2001
From: Andrew Duthie <andrew.duthie@gsa.gov>
Date: Mon, 29 Mar 2021 12:05:54 -0400
Subject: [PATCH] Reduce border width on default outline button (#205)

* Reduce border width on normal outline button

**Why**: Per Figma design reference, the outline button should only have a border width of 1px, not 2px. The "Big" outline button should still have a 2px border.

* Revert CHANGELOG entry to "Unreleased"

See: https://github.com/18F/identity-style-guide/pull/205/files#r603407014
---
 CHANGELOG.md                          |  6 ++++
 src/scss/components/_buttons.scss     | 40 +++++++++++++++++++++++++++
 src/scss/uswds-theme/_components.scss |  1 +
 3 files changed, 47 insertions(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 99a1789f..aaca956b 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,3 +1,9 @@
+## Unreleased
+
+### Bug Fixes
+
+- Reduce the border width of the normal outline button to the intended width of `1px` (previously `2px`). The big variant of the outline button is unaffected by this change, and remains `2px`.
+
 ## 5.0.3
 
 ### Bug Fixes
diff --git a/src/scss/components/_buttons.scss b/src/scss/components/_buttons.scss
index 32df1d36..88256784 100644
--- a/src/scss/components/_buttons.scss
+++ b/src/scss/components/_buttons.scss
@@ -1,3 +1,5 @@
+$button-stroke-big: inset 0 0 0 units($theme-button-stroke-width * 2);
+
 .usa-button {
   line-height: 1;
 
@@ -109,6 +111,44 @@
     box-shadow: $button-stroke color('disabled');
     color: color('disabled');
   }
+
+  &.usa-button--big {
+    box-shadow: $button-stroke-big color('primary');
+
+    &:not([disabled]):focus,
+    &:not([disabled]).usa-focus {
+      box-shadow: $button-stroke-big color('primary'), roundable-focus-outline-box-shadows();
+    }
+
+    &:hover,
+    &.usa-button--hover {
+      box-shadow: $button-stroke-big color('primary-dark');
+    }
+
+    &:active,
+    &.usa-button--active {
+      box-shadow: $button-stroke-big color('primary-darker');
+    }
+
+    &:disabled,
+    &.usa-button--disabled {
+      box-shadow: $button-stroke-big color('disabled');
+    }
+
+    &.usa-button--inverse {
+      box-shadow: $button-stroke-big color('base-lighter');
+
+      &:hover,
+      &.usa-button--hover {
+        box-shadow: $button-stroke-big color($theme-link-reverse-hover-color);
+      }
+
+      &:active,
+      &.usa-button--active {
+        box-shadow: $button-stroke-big color($theme-link-reverse-active-color);
+      }
+    }
+  }
 }
 
 .usa-button--danger {
diff --git a/src/scss/uswds-theme/_components.scss b/src/scss/uswds-theme/_components.scss
index d42395a7..ab14c836 100644
--- a/src/scss/uswds-theme/_components.scss
+++ b/src/scss/uswds-theme/_components.scss
@@ -31,6 +31,7 @@ $theme-banner-font-family:            'ui';
 $theme-button-font-family:            'ui';
 $theme-button-border-radius:          'md';
 $theme-button-small-width:            6;
+$theme-button-stroke-width:           1px;
 
 // Footer
 $theme-footer-font-family:            'body';