From 42fbed116b8e65bede873116beda679914cacbb2 Mon Sep 17 00:00:00 2001
From: Lindsay M <126139086+lindsaym-fa@users.noreply.github.com>
Date: Mon, 15 Jul 2024 11:45:29 -0400
Subject: [PATCH] Increase contrast of interactive element borders in dark mode
 (#2100)

* increase contrast of interactive element borders

* match default button borders to input borders

* revert tag border change
---
 src/components/button/button.styles.ts | 4 ++--
 src/themes/dark.css                    | 8 ++++----
 2 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/components/button/button.styles.ts b/src/components/button/button.styles.ts
index 464b803f..a1da7f79 100644
--- a/src/components/button/button.styles.ts
+++ b/src/components/button/button.styles.ts
@@ -77,7 +77,7 @@ export default css`
   /* Default */
   .button--standard.button--default {
     background-color: var(--sl-color-neutral-0);
-    border-color: var(--sl-color-neutral-300);
+    border-color: var(--sl-input-border-color);
     color: var(--sl-color-neutral-700);
   }
 
@@ -198,7 +198,7 @@ export default css`
 
   /* Default */
   .button--outline.button--default {
-    border-color: var(--sl-color-neutral-300);
+    border-color: var(--sl-input-border-color);
     color: var(--sl-color-neutral-700);
   }
 
diff --git a/src/themes/dark.css b/src/themes/dark.css
index c1aa0530..51545305 100644
--- a/src/themes/dark.css
+++ b/src/themes/dark.css
@@ -427,10 +427,10 @@
   --sl-input-background-color-hover: var(--sl-input-background-color);
   --sl-input-background-color-focus: var(--sl-input-background-color);
   --sl-input-background-color-disabled: var(--sl-color-neutral-100);
-  --sl-input-border-color: var(--sl-color-neutral-300);
-  --sl-input-border-color-hover: var(--sl-color-neutral-400);
-  --sl-input-border-color-focus: var(--sl-color-primary-500);
-  --sl-input-border-color-disabled: var(--sl-color-neutral-300);
+  --sl-input-border-color: var(--sl-color-neutral-400);
+  --sl-input-border-color-hover: var(--sl-color-neutral-500);
+  --sl-input-border-color-focus: var(--sl-color-primary-600);
+  --sl-input-border-color-disabled: var(--sl-color-neutral-400);
   --sl-input-border-width: 1px;
   --sl-input-required-content: '*';
   --sl-input-required-content-offset: -2px;