💄 Creates configurable CSS variables for new config editor

src/components/InteractiveEditor/EditItem.vue

@@ -216,8 +216,8 @@ export default {
 
 .edit-item-inner {
   padding: 1rem;
-  background: var(--config-settings-background);
+  background: var(--interactive-editor-background);
-  color: var(--config-settings-color);
+  color: var(--interactive-editor-color);
   height: 100%;
   overflow-y: auto;
   @extend .svg-button;
@@ -238,7 +238,7 @@ export default {
     display: flex;
     padding: 0.5rem 0.25rem;
     &:not(:last-child) {
-      border-bottom: 1px dotted var(--config-settings-color);
+      border-bottom: 1px dotted var(--interactive-editor-color);
     }
     .input-container, .select-container {
         width: 100%;
@@ -259,14 +259,14 @@ export default {
       align-items: center;
       cursor: pointer;
       text-align: center;
-      border: 1px solid var(--config-settings-color);
+      border: 1px solid var(--interactive-editor-color);
       border-radius: var(--curve-factor);
       &:hover {
-        background: var(--config-settings-color);
+        background: var(--interactive-editor-color);
-        color: var(--config-settings-background);
+        color: var(--interactive-editor-background);
         svg {
-          background: var(--config-settings-color);
+          background: var(--interactive-editor-color);
-          path { fill: var(--config-settings-background); }
+          path { fill: var(--interactive-editor-background); }
         }
       }
       svg {
@@ -280,9 +280,9 @@ export default {
   .input-container input.input-field,
   .radio-container div.radio-wrapper,
   .form-dropdown div.vs__dropdown-toggle {
-    color: var(--config-settings-color);
+    color: var(--interactive-editor-color);
-    background: var(--config-settings-background);
+    background: var(--interactive-editor-background);
-    border-color: var(--config-settings-color);
+    border-color: var(--interactive-editor-color);
   }
 }
 </style>

src/components/InteractiveEditor/EditModeSaveMenu.vue

@@ -102,8 +102,8 @@ div.edit-mode-bottom-banner {
   bottom: 0;
   width: 100%;
   padding: 0.25rem 0;
-  border-top: 2px solid var(--primary);
+  border-top: 2px solid var(--interactive-editor-color);
-  background: var(--background-darker);
+  background: var(--interactive-editor-background-darker);
   box-shadow: 0 -5px 7px var(--transparent-50);
   grid-template-columns: 45% 10% 45%;
   @include laptop-up { grid-template-columns: 40% 20% 40%; }
@@ -117,7 +117,7 @@ div.edit-mode-bottom-banner {
     /* Section sub-titles */
     p.section-sub-title {
       margin: 0;
-      color: var(--primary);
+      color: var(--interactive-editor-color);
       font-weight: bold;
       cursor: default;
     }
@@ -125,7 +125,7 @@ div.edit-mode-bottom-banner {
     &.intro-container  {
         p.edit-mode-intro {
         margin: 0;
-        color: var(--primary);
+        color: var(--interactive-editor-color);
         cursor: default;
       }
     }

src/components/InteractiveEditor/EditModeTopBanner.vue

@@ -9,12 +9,12 @@ div.edit-mode-top-banner {
   width: 100%;
   text-align: center;
   padding: 0.2rem 0;
-  background: var(--primary);
+  background: var(--interactive-editor-color);
   opacity: var(--dimming-factor);
   span {
     font-size: 1rem;
     font-weight: bold;
-    color: var(--background);
+    color: var(--interactive-editor-background);
   }
 }
 </style>

src/styles/color-palette.scss

@@ -57,6 +57,9 @@
   --config-settings-background: var(--background-darker);
   --code-editor-color: var(--black);
   --code-editor-background: var(--white);
+  --interactive-editor-color: var(--primary);
+  --interactive-editor-background: var(--background);
+  --interactive-editor-background-darker: var(--background-darker);
   // Search bar (on homepage)
   --search-container-background: var(--background-darker);
   --search-field-background: var(--background);

src/styles/color-themes.scss

@@ -217,6 +217,9 @@ html[data-theme='material-original'] {
   --item-group-heading-text-color-hover: #01579b;
   --config-settings-background: #01579b;
   --config-settings-color: #fff;
+  --interactive-editor-background: #01579b;
+  --interactive-editor-color: #fff;
+  --interactive-editor-background-darker: #29B6F6;
   --heading-text-color: #fff;
   --status-check-tooltip-background: #f2f2f2;
   --status-check-tooltip-color: #01579b;
@@ -263,6 +266,9 @@ html[data-theme='material-dark-original'] {
   --welcome-popup-text-color: var(--primary);
   --config-settings-background: #131a1f;
   --config-settings-color: #41e2ed;
+  --interactive-editor-color: #41e2ed;
+  --interactive-editor-background: #131a1f;
+  --interactive-editor-background-darker: #092b3a;
   --scroll-bar-color: #08B0BB;
   --scroll-bar-background: #131a1f;
   --status-check-tooltip-background: #131a1f;
@@ -514,6 +520,9 @@ html[data-theme='material'] {
   --config-code-color: #363636;
   --config-settings-background: #f5f5f5;
   --config-settings-color: #473f3f;
+  --interactive-editor-color: #473f3f;
+  --interactive-editor-background: #f5f5f5;
+  --interactive-editor-background-darker: #fff;
   --heading-text-color: #fff;
   --curve-factor: 3px;
   --curve-factor-navbar: 8px;
@@ -622,13 +631,16 @@ html[data-theme='material-dark'] {
   --description-tooltip-color: #e0e0e0;
   --curve-factor: 2px;
   --curve-factor-navbar: 0;
-  
   --side-bar-background: #131a1f;
-
   --welcome-popup-background: #131a1f;
   --welcome-popup-text-color: var(--primary);
+
   --config-settings-background: #131a1f;
   --config-settings-color: #41e2ed;
+  --interactive-editor-background: #131a1f;
+  --interactive-editor-background-darker: #131a1f;
+  --interactive-editor-color: #41e2ed;
+
   --scroll-bar-color: #08B0BB;
   --scroll-bar-background: #131a1f;
   // --login-form-color: #131a1f;
@@ -929,6 +941,9 @@ html[data-theme='glow'], html[data-theme=glow-colorful] {
 --nav-link-border-color-hover: var(--blue);
 --config-settings-background: var(--blue);
 --config-settings-color: var(--pink);
+--interactive-editor-background: var(--blue);
+--interactive-editor-background-darker: var(--blue);
+--interactive-editor-color: var(--pink);
 --search-label-color: var(--blue);
 --item-group-background: var(--blue);
 --item-text-color: var(--pale);