From 1cf75a71699251cefbad30e340c146b87f73eb4f Mon Sep 17 00:00:00 2001
From: Prospector <6166773+Prospector@users.noreply.github.com>
Date: Sun, 20 Nov 2022 12:50:10 -0800
Subject: [PATCH] Improve accessibility on contrast themes (#751)

---
 assets/styles/components.scss | 5 +++++
 assets/styles/global.scss     | 4 ++--
 2 files changed, 7 insertions(+), 2 deletions(-)

diff --git a/assets/styles/components.scss b/assets/styles/components.scss
index c86cf3953..b0e946d39 100644
--- a/assets/styles/components.scss
+++ b/assets/styles/components.scss
@@ -371,6 +371,7 @@
 .button-base {
   @extend .button-animation;
   font-weight: 500;
+  outline: 2px solid transparent;
 
   &:focus-visible:not(&:disabled),
   &:hover:not(&:disabled) {
@@ -563,6 +564,7 @@ tr.button-transparent {
 
 .multiselect {
   color: var(--color-text) !important;
+  outline: 2px solid transparent;
 
   input {
     background: transparent;
@@ -697,6 +699,7 @@ tr.button-transparent {
     border-radius: 50%;
     background: var(--color-toggle-handle);
     transition: all 0.2s cubic-bezier(0.5, 0.1, 0.75, 1.35);
+    outline: 2px solid transparent;
 
     @media (prefers-reduced-motion) {
       transition: none;
@@ -795,6 +798,7 @@ tr.button-transparent {
 
   background: var(--color-raised-bg);
   border-radius: var(--size-rounded-card);
+  outline: 2px solid transparent;
 
   margin-bottom: var(--spacing-card-md);
 
@@ -970,6 +974,7 @@ h1 {
   border-radius: var(--size-rounded-card);
 
   margin-bottom: var(--spacing-card-md);
+  outline: 2px solid transparent;
 
   box-shadow: var(--shadow-card);
 
diff --git a/assets/styles/global.scss b/assets/styles/global.scss
index e7d534e34..1101765e9 100644
--- a/assets/styles/global.scss
+++ b/assets/styles/global.scss
@@ -301,7 +301,7 @@ textarea {
   padding: 0.5rem 1rem;
   font-weight: var(--font-weight-medium);
   border: none;
-  outline: none;
+  outline: 2px solid transparent;
   box-shadow: var(--shadow-inset-sm), 0 0 0 0 transparent;
   transition: box-shadow 0.1s ease-in-out;
   min-height: 40px;
@@ -331,7 +331,7 @@ textarea {
 button, input[type=button] {
   cursor: pointer;
   border: none;
-  outline: none;
+  outline: 2px solid transparent;
 }
 
 kbd {