From 5a3cebf9ff620881166a22ae475dc8495107620d Mon Sep 17 00:00:00 2001
From: Justin Edmund <justin@jedmund.com>
Date: Thu, 6 Jul 2023 01:53:08 -0700
Subject: [PATCH] Add colors for highlights

---
 styles/themes.scss    | 12 ++++++++++++
 styles/variables.scss | 21 +++++++++++++++++++++
 2 files changed, 33 insertions(+)

diff --git a/styles/themes.scss b/styles/themes.scss
index 6ebab807..40458126 100644
--- a/styles/themes.scss
+++ b/styles/themes.scss
@@ -63,6 +63,12 @@
   --toolbar-item-text-hover: #{$toolbar--item--text--light--hover};
   --toolbar-item-text-active: #{$toolbar--item--text--light--active};
 
+  // Dark - Highlights
+  --highlight-bg: #{$highlight--bg--light};
+  --highlight-bg-hover: #{$highlight--bg--light--hover};
+  --highlight-text: #{$highlight--text--light};
+  --highlight-text-hover: #{$highlight--text--light--hover};
+
   // Light - Placeholders
   --placeholder-bound-bg: #{$placeholder--bound--bg--light};
   --placeholder-bound-bg-hover: #{$placeholder--bound--bg--light--hover};
@@ -271,6 +277,12 @@
   --toolbar-item-text-hover: #{$toolbar--item--text--dark--hover};
   --toolbar-item-text-active: #{$toolbar--item--text--dark--active};
 
+  // Dark - Highlights
+  --highlight-bg: #{$highlight--bg--dark};
+  --highlight-bg-hover: #{$highlight--bg--dark--hover};
+  --highlight-text: #{$highlight--text--dark};
+  --highlight-text-hover: #{$highlight--text--dark--hover};
+
   // Dark - Placeholders
   --placeholder-bound-bg: #{$placeholder--bound--bg--dark};
   --placeholder-bound-bg-hover: #{$placeholder--bound--bg--dark--hover};
diff --git a/styles/variables.scss b/styles/variables.scss
index 2b9ccd41..415b5e41 100644
--- a/styles/variables.scss
+++ b/styles/variables.scss
@@ -79,6 +79,13 @@ $orange-75: #ffb461;
 $orange-80: #facea7;
 $orange-90: #ffebd9;
 
+// Yellow -- Highlights
+$yellow-10: #4d3703;
+$yellow-30: #956d11;
+$yellow-50: #c8a657;
+$yellow-70: #fedc8d;
+$yellow-90: #ffed4c;
+
 // Colors -- Interface
 $blue: #275dc5;
 $red: #ff6161;
@@ -96,6 +103,7 @@ $accent--yellow--light: #c89d39;
 $accent--yellow--dark: #f9cc64;
 $yellow-text-10: #a39200;
 $yellow-text-20: #ffed4c;
+$highlight-yellow: #ffed4c55;
 
 $accent--yellow--00: #463805;
 $accent--yellow--20: #7f6a00;
@@ -383,6 +391,19 @@ $toolbar--item--text--dark--hover: $grey-90;
 $toolbar--item--text--light--active: $grey-100;
 $toolbar--item--text--dark--active: $grey-00;
 
+// Color Definitions: Highlights
+$highlight--bg--light: $yellow-70;
+$highlight--bg--dark: $yellow-50;
+
+$highlight--bg--light--hover: $yellow-50;
+$highlight--bg--dark--hover: $yellow-70;
+
+$highlight--text--light: $yellow-30;
+$highlight--text--dark: $yellow-10;
+
+$highlight--text--light--hover: $yellow-10;
+$highlight--text--dark--hover: $yellow-30;
+
 // Color Definitions: Element Toggle
 $toggle--bg--light: $grey-90;
 $toggle--bg--dark: $grey-15;