From 24e6d3268855bd5f00f04b5c52bc62c8cb6724e0 Mon Sep 17 00:00:00 2001
From: Eliza Khachatryan <eli97736@esri.com>
Date: Wed, 11 Jan 2023 09:48:23 -0800
Subject: [PATCH] fix(button): neutral and outline button now has correct
 border color (#6269)

**Related Issue:** #5331

## Summary
When `Button` is `appearance="outline"` and `color="neutral"`, the
border color is set to `borderColor.color.1`.
---
 src/components/button/button.scss       | 2 +-
 src/components/button/button.stories.ts | 3 +++
 2 files changed, 4 insertions(+), 1 deletion(-)

diff --git a/src/components/button/button.scss b/src/components/button/button.scss
index 5cfacce2cac..e83ebaba204 100644
--- a/src/components/button/button.scss
+++ b/src/components/button/button.scss
@@ -463,7 +463,7 @@
   button,
   a {
     @apply text-color-1  bg-transparent;
-    border-color: theme("backgroundColor.foreground.3");
+    border-color: theme("borderColor.color.1");
     &:hover {
       box-shadow: inset 0 0 0 1px var(--calcite-ui-foreground-3);
     }
diff --git a/src/components/button/button.stories.ts b/src/components/button/button.stories.ts
index 3c32286d09d..4753837c84f 100644
--- a/src/components/button/button.stories.ts
+++ b/src/components/button/button.stories.ts
@@ -156,3 +156,6 @@ export const darkModeRTL_TestOnly = (): string => html`
 `;
 
 darkModeRTL_TestOnly.parameters = { modes: modesDarkDefault };
+
+export const outlineNeutralBorderColor_TestOnly = (): string =>
+  html`<calcite-button appearance="outline" kind="neutral">Test</calcite-button>`;