From cd314cb523f2a6ee33148b53e5a008ce3e1cd4cf Mon Sep 17 00:00:00 2001
From: Alicia Sykes <sykes.alicia@gmail.com>
Date: Sun, 20 Jun 2021 20:43:55 +0100
Subject: [PATCH] :art: Adds new styles used by config editor

---
 docs/theming.md               | 4 ++++
 src/styles/color-palette.scss | 2 ++
 src/styles/media-queries.scss | 6 ++++++
 3 files changed, 12 insertions(+)

diff --git a/docs/theming.md b/docs/theming.md
index 7b6966fb..dcd8721b 100644
--- a/docs/theming.md
+++ b/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
diff --git a/src/styles/color-palette.scss b/src/styles/color-palette.scss
index 24c734d7..059ed77d 100644
--- a/src/styles/color-palette.scss
+++ b/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);
 }
diff --git a/src/styles/media-queries.scss b/src/styles/media-queries.scss
index 5775ee53..43b60f59 100644
--- a/src/styles/media-queries.scss
+++ b/src/styles/media-queries.scss
@@ -65,3 +65,9 @@ $extra-large: 2800px;
     @content;
   }
 }
+
+@mixin tablet-down {
+  @media (max-width: #{$small - 1px}) {
+    @content;
+  }
+}
\ No newline at end of file