🎨 Adds new styles used by config editor

docs/theming.md

@@ -118,6 +118,10 @@ You can target specific elements on the UI with these variables. All are optiona
 - `--side-bar-color` - Color of icons and text within the sidebar. Defaults to `--primary`
 - `--status-check-tooltip-background` - Background color for status check tooltips. Defaults to `--background-darker`
 - `--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`
+
+
 
 #### Non-Color Variables
 - `--outline-color` - Used to outline focused or selected elements

src/styles/color-palette.scss

@@ -76,4 +76,6 @@
   --side-bar-color: var(--primary);
   --status-check-tooltip-background: var(--background-darker);
   --status-check-tooltip-color: var(--primary);
+  --code-editor-color: var(--black);
+  --code-editor-background: var(--white);
 }

src/styles/media-queries.scss

@@ -65,3 +65,9 @@ $extra-large: 2800px;
     @content;
   }
 }
+
+@mixin tablet-down {
+  @media (max-width: #{$small - 1px}) {
+    @content;
+  }
+}