💄 Adds supporting style variables for context menu, and documents

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

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);
 }

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;