From 46d01de5124d5c1422a82cdf66407fae4dddc227 Mon Sep 17 00:00:00 2001
From: Alicia Sykes <sykes.alicia@gmail.com>
Date: Thu, 24 Jun 2021 20:54:07 +0100
Subject: [PATCH] :lipstick: Adds supporting style variables for context menu,
 and documents

---
 docs/theming.md               | 5 +++--
 src/styles/color-palette.scss | 4 ++++
 src/styles/dimensions.scss    | 1 +
 3 files changed, 8 insertions(+), 2 deletions(-)

diff --git a/docs/theming.md b/docs/theming.md
index dcd8721b..b70ef628 100644
--- a/docs/theming.md
+++ b/docs/theming.md
@@ -120,8 +120,9 @@ You can target specific elements on the UI with these variables. All are optiona
 - `--status-check-tooltip-color` - Text color for the status check tooltips. Defaults to `--primary`
 - `--code-editor-color` - Text color used within raw code editors. Defaults to `--black`
 - `--code-editor-background` - Background color for raw code editors. Defaults to `--white`
-
-
+- `--context-menu-color` - Text color for right-click context menu over items. Defaults to `--primary`
+- `--context-menu-background` - Background color of right-click context menu. Defaults to `--background`
+- `--context-menu-secondary-color` - Border and outline color for context menu. Defaults to `--background-darker`
 
 #### Non-Color Variables
 - `--outline-color` - Used to outline focused or selected elements
diff --git a/src/styles/color-palette.scss b/src/styles/color-palette.scss
index 2acf6a25..bb90b2d2 100644
--- a/src/styles/color-palette.scss
+++ b/src/styles/color-palette.scss
@@ -78,4 +78,8 @@
   --status-check-tooltip-color: var(--primary);
   --code-editor-color: var(--black);
   --code-editor-background: var(--white);
+
+  --context-menu-background: var(--background);
+  --context-menu-color: var(--primary);
+  --context-menu-secondary-color: var(--background-darker);
 }
diff --git a/src/styles/dimensions.scss b/src/styles/dimensions.scss
index 13eed42a..442cfb7d 100644
--- a/src/styles/dimensions.scss
+++ b/src/styles/dimensions.scss
@@ -19,6 +19,7 @@
   --item-icon-transform: drop-shadow(2px 4px 6px var(--transparent-50)) saturate(0.65);
   --item-icon-transform-hover: drop-shadow(4px 8px 3px var(--transparent-50)) saturate(2);
   --item-group-shadow: var(--item-shadow);
+  --context-menu-shadow: var(--item-shadow);
 
   /* Settings and config menu */
   --settings-container-shadow: none;