From d88945ad95266ca4879f39b83f5df131f56f589a Mon Sep 17 00:00:00 2001
From: Justin Edmund <justin@jedmund.com>
Date: Mon, 21 Aug 2023 19:54:17 -0700
Subject: [PATCH] Add themed variable for mention focus stroke

---
 components/common/MentionTypeahead/index.module.scss | 4 ++--
 styles/themes.scss                                   | 4 ++++
 styles/variables.scss                                | 3 +++
 3 files changed, 9 insertions(+), 2 deletions(-)

diff --git a/components/common/MentionTypeahead/index.module.scss b/components/common/MentionTypeahead/index.module.scss
index 592b84d3..7dde22be 100644
--- a/components/common/MentionTypeahead/index.module.scss
+++ b/components/common/MentionTypeahead/index.module.scss
@@ -149,7 +149,7 @@
     }
   }
 
-  $outline: 2px solid rgba(255, 255, 255, 0.35);
+  $outline: 2px solid var(--transparent-stroke);
 
   &:hover {
     background: var(--null-bg-hover);
@@ -314,7 +314,7 @@
       background: var(--dark-text);
       box-shadow: none;
       color: var(--dark-bg);
-      outline: 2px solid rgba(255, 255, 255, 0.65);
+      outline: $outline;
 
       :global(.rbt-token-remove-button) {
         color: var(--dark-bg);
diff --git a/styles/themes.scss b/styles/themes.scss
index 5f256bd6..39034582 100644
--- a/styles/themes.scss
+++ b/styles/themes.scss
@@ -30,6 +30,8 @@
   --anonymous-bg: #{$anonymous--bg--light};
   --placeholder-bg: #{$grey-80};
 
+  --transparent-stroke: #{$transparent--stroke--light};
+
   // Light - Units
   --unit-bg: #{$unit--bg--light};
   --unit-bg-hover: #{$unit--bg--light--hover};
@@ -252,6 +254,8 @@
   --anonymous-bg: #{$anonymous--bg--dark};
   --placeholder-bg: #{$grey-40};
 
+  --transparent-stroke: #{$transparent--stroke--dark};
+
   // Dark - Units
   --unit-bg: #{$unit--bg--dark};
   --unit-bg-hover: #{$unit--bg--dark--hover};
diff --git a/styles/variables.scss b/styles/variables.scss
index 8877117a..7e91b7d5 100644
--- a/styles/variables.scss
+++ b/styles/variables.scss
@@ -166,6 +166,9 @@ $dark-bg-00: #ba63d8;
 $dark-bg-10: #de7bff;
 $dark-bg-20: #f2cdff;
 
+$transparent--stroke--light: rgba(0, 0, 0, 0.9);
+$transparent--stroke--dark: rgba(255, 255, 255, 0.35);
+
 $page--bg--light: $grey-90;
 $page--bg--dark: $grey-15;