From 1dc01df7dff203f4017d5d016fda1e45d5c95881 Mon Sep 17 00:00:00 2001
From: Oliver Eyton-Williams <ojeytonwilliams@gmail.com>
Date: Tue, 2 Feb 2021 20:13:32 +0100
Subject: [PATCH] fix(client): repair selection and highlight style (#40879)

---
 client/src/components/layouts/global.css                      | 4 ++--
 client/src/components/layouts/variables.css                   | 4 ++++
 client/src/templates/Challenges/classic/classic.css           | 2 +-
 .../templates/Challenges/components/challenge-description.css | 4 ----
 4 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/client/src/components/layouts/global.css b/client/src/components/layouts/global.css
index d2e542bbc4..75ce69ff3e 100644
--- a/client/src/components/layouts/global.css
+++ b/client/src/components/layouts/global.css
@@ -93,7 +93,7 @@ p {
 }
 
 ::selection {
-  background-color: rgba(var(--highlight-color), 0.3);
+  background-color: var(--selection-color);
 }
 
 @media (max-width: 500px) {
@@ -522,7 +522,7 @@ pre {
 .has-success.checkbox label,
 .has-success.radio-inline label,
 .has-success.checkbox-inline label {
-  color: rgb(var(--highlight-color));
+  color: var(--highlight-color);
 }
 
 .has-error .help-block,
diff --git a/client/src/components/layouts/variables.css b/client/src/components/layouts/variables.css
index 176c804d40..ca1ca42c36 100644
--- a/client/src/components/layouts/variables.css
+++ b/client/src/components/layouts/variables.css
@@ -15,7 +15,9 @@
   --yellow-light: #ffc300;
   --yellow-dark: #4d3800;
   --blue-light: rgb(153, 201, 255);
+  --blue-light-translucent: rgb(153, 201, 255, 0.3);
   --blue-dark: rgb(0, 46, 173);
+  --blue-dark-translucent: rgb(0, 46, 173, 0.3);
   --green-light: #acd157;
   --blue-mid: #198eee;
   --purple-mid: darkviolet;
@@ -39,6 +41,7 @@
   --primary-background: var(--gray-90);
   --highlight-color: var(--blue-light);
   --highlight-background: var(--blue-dark);
+  --selection-color: var(--blue-light-translucent);
   --success-color: var(--green-light);
   --success-background: var(--green-dark);
   --danger-color: var(--red-light);
@@ -58,6 +61,7 @@
   --primary-background: var(--gray-00);
   --highlight-color: var(--blue-dark);
   --highlight-background: var(--blue-light);
+  --selection-color: var(--blue-dark-translucent);
   --success-color: var(--green-dark);
   --success-background: var(--green-light);
   --danger-color: var(--red-dark);
diff --git a/client/src/templates/Challenges/classic/classic.css b/client/src/templates/Challenges/classic/classic.css
index 6b0bb96038..bc5df4e463 100644
--- a/client/src/templates/Challenges/classic/classic.css
+++ b/client/src/templates/Challenges/classic/classic.css
@@ -3,7 +3,7 @@
 }
 
 .monaco-menu .action-label {
-  color: rgb(var(--highlight-color));
+  color: var(--highlight-color);
   letter-spacing: 0.02em;
 }
 
diff --git a/client/src/templates/Challenges/components/challenge-description.css b/client/src/templates/Challenges/components/challenge-description.css
index 74be766f68..39bec9d157 100644
--- a/client/src/templates/Challenges/components/challenge-description.css
+++ b/client/src/templates/Challenges/components/challenge-description.css
@@ -16,7 +16,3 @@
 #instructions ol {
   font-family: 'Lato', sans-serif;
 }
-
-#description ::selection {
-  background-color: rgba(var(--highlight-color), 0.3);
-}