diff --git a/packages/core/src/styles/scss/_gjs_assets.scss b/packages/core/src/styles/scss/_gjs_assets.scss
index 1338e628a..255f113b9 100644
--- a/packages/core/src/styles/scss/_gjs_assets.scss
+++ b/packages/core/src/styles/scss/_gjs_assets.scss
@@ -1,4 +1,8 @@
-.#{$app-prefix}dropzone {
+@use 'gjs_main_mixins';
+@use 'gjs_vars';
+@use 'gjs_category_general';
+
+.#{gjs_vars.$app-prefix}dropzone {
   display: none;
   opacity: 0;
   position: absolute;
@@ -11,14 +15,14 @@
   pointer-events: none;
 }
 
-.#{$app-prefix}dropzone-active {
-  .#{$app-prefix}dropzone {
+.#{gjs_vars.$app-prefix}dropzone-active {
+  .#{gjs_vars.$app-prefix}dropzone {
     display: block;
     opacity: 1;
   }
 }
 
-.#{$am-prefix}assets {
+.#{gjs_vars.$am-prefix}assets {
   height: 290px;
   overflow: auto;
   clear: both;
@@ -28,12 +32,12 @@
   align-content: flex-start;
 }
 
-.#{$am-prefix}assets-header {
+.#{gjs_vars.$am-prefix}assets-header {
   padding: 5px;
 }
 
-.#{$am-prefix}add-asset {
-  .#{$am-prefix}add-field {
+.#{gjs_vars.$am-prefix}add-asset {
+  .#{gjs_vars.$am-prefix}add-field {
     width: 70%;
     float: left;
   }
@@ -44,7 +48,7 @@
   }
 }
 
-.#{$am-prefix}preview-cont {
+.#{gjs_vars.$am-prefix}preview-cont {
   position: relative;
   height: 70px;
   width: 30%;
@@ -54,7 +58,7 @@
   overflow: hidden;
 }
 
-.#{$am-prefix}preview {
+.#{gjs_vars.$am-prefix}preview {
   position: absolute;
   background-position: center center;
   background-size: cover;
@@ -64,8 +68,8 @@
   z-index: 1;
 }
 
-.#{$am-prefix}preview-bg {
-  @include opacity(0.5);
+.#{gjs_vars.$am-prefix}preview-bg {
+  @include gjs_main_mixins.opacity(0.5);
 
   position: absolute;
   height: 100%;
@@ -73,13 +77,13 @@
   z-index: 0;
 }
 
-.#{$am-prefix}dimensions {
-  @include opacity(0.5);
+.#{gjs_vars.$am-prefix}dimensions {
+  @include gjs_main_mixins.opacity(0.5);
 
   font-size: 10px;
 }
 
-.#{$am-prefix}meta {
+.#{gjs_vars.$am-prefix}meta {
   width: 70%;
   float: left;
   font-size: 12px;
@@ -91,7 +95,7 @@
   }
 }
 
-.#{$am-prefix}close {
+.#{gjs_vars.$am-prefix}close {
   @extend .btn-cl;
 
   cursor: pointer;
@@ -101,24 +105,24 @@
   display: none;
 }
 
-.#{$am-prefix}asset {
-  border-bottom: 1px solid darken-color(var(--gjs-main-dark-color), 3%);
+.#{gjs_vars.$am-prefix}asset {
+  border-bottom: 1px solid gjs_main_mixins.darken-color(var(--gjs-main-dark-color), 3%);
   padding: 5px;
   cursor: pointer;
   position: relative;
   box-sizing: border-box;
   width: 100%;
 
-  &:hover .#{$am-prefix}close {
+  &:hover .#{gjs_vars.$am-prefix}close {
     display: block;
   }
 }
 
-.#{$am-prefix}highlight {
+.#{gjs_vars.$am-prefix}highlight {
   background-color: var(--gjs-main-light-color);
 }
 
-.#{$am-prefix}assets-cont {
+.#{gjs_vars.$am-prefix}assets-cont {
   background-color: var(--gjs-secondary-dark-color);
   border-radius: 3px;
   box-sizing: border-box;
diff --git a/packages/core/src/styles/scss/_gjs_blocks.scss b/packages/core/src/styles/scss/_gjs_blocks.scss
index 46e44d9be..ed667955e 100644
--- a/packages/core/src/styles/scss/_gjs_blocks.scss
+++ b/packages/core/src/styles/scss/_gjs_blocks.scss
@@ -1,32 +1,36 @@
-.#{$app-prefix}blocks-c {
+@use 'gjs_main_mixins';
+@use 'gjs_vars';
+@use 'gjs_category_general';
+
+.#{gjs_vars.$app-prefix}blocks-c {
   display: flex;
   flex-wrap: wrap;
   justify-content: flex-start;
 }
 
-.#{$app-prefix}block-categories {
+.#{gjs_vars.$app-prefix}block-categories {
   display: flex;
   flex-direction: column;
 }
 
-.#{$app-prefix}block-category {
+.#{gjs_vars.$app-prefix}block-category {
   width: 100%;
 
-  &.#{$app-prefix}open {
-    @extend .#{$app-prefix}category-open;
+  &.#{gjs_vars.$app-prefix}open {
+    @extend .#{gjs_vars.$app-prefix}category-open;
   }
 
-  .#{$app-prefix}title {
-    @extend .#{$app-prefix}category-title;
+  .#{gjs_vars.$app-prefix}title {
+    @extend .#{gjs_vars.$app-prefix}category-title;
   }
 
-  .#{$app-prefix}caret-icon {
+  .#{gjs_vars.$app-prefix}caret-icon {
     margin-right: 5px;
   }
 }
 
-.#{$app-prefix}block {
-  @include user-select(none);
+.#{gjs_vars.$app-prefix}block {
+  @include gjs_main_mixins.user-select(none);
 
   width: 45%;
   min-width: 45px;
@@ -61,22 +65,22 @@
   }
 }
 
-.#{$app-prefix}block-svg {
+.#{gjs_vars.$app-prefix}block-svg {
   width: 54px;
   fill: currentColor;
 }
 
-.#{$app-prefix}block-svg-path {
+.#{gjs_vars.$app-prefix}block-svg-path {
   fill: currentColor;
 }
 
-.#{$app-prefix}block.fa {
+.#{gjs_vars.$app-prefix}block.fa {
   font-size: 2em;
   line-height: 2em;
   padding: 11px;
 }
 
-.#{$app-prefix}block-label {
+.#{gjs_vars.$app-prefix}block-label {
   line-height: normal;
   font-size: 0.65rem;
   font-weight: normal;
@@ -86,7 +90,7 @@
   pointer-events: none;
 }
 
-.#{$app-prefix}block.#{$app-prefix}bdrag {
+.#{gjs_vars.$app-prefix}block.#{gjs_vars.$app-prefix}bdrag {
   width: auto;
   padding: 0;
 }
diff --git a/packages/core/src/styles/scss/_gjs_canvas.scss b/packages/core/src/styles/scss/_gjs_canvas.scss
index 90d7d202f..c9fd9f56c 100644
--- a/packages/core/src/styles/scss/_gjs_canvas.scss
+++ b/packages/core/src/styles/scss/_gjs_canvas.scss
@@ -1,7 +1,11 @@
+@use 'gjs_main_mixins';
+@use 'gjs_vars';
+@use 'gjs_category_general';
+
 $frameAnimation: 0.35s ease !default;
 $guide_pad: 5px !default;
 
-.#{$prefix} {
+.#{gjs_vars.$prefix} {
   &guide-info {
     position: absolute;
 
@@ -29,7 +33,7 @@ $guide_pad: 5px !default;
     &__y {
       padding: 0 $guide_pad;
 
-      .#{$prefix}guide-info {
+      .#{gjs_vars.$prefix}guide-info {
         &__content {
           justify-content: center;
         }
@@ -59,7 +63,7 @@ $guide_pad: 5px !default;
     &__x {
       padding: $guide_pad 0;
 
-      .#{$prefix}guide-info {
+      .#{gjs_vars.$prefix}guide-info {
         &__content {
           align-items: center;
         }
@@ -170,7 +174,7 @@ $guide_pad: 5px !default;
   }
 }
 
-.#{$app-prefix} {
+.#{gjs_vars.$app-prefix} {
   &padding-v,
   &fixedpadding-v {
     &-top {
@@ -192,7 +196,7 @@ $guide_pad: 5px !default;
   }
 }
 
-.#{$cv-prefix}canvas {
+.#{gjs_vars.$cv-prefix}canvas {
   box-sizing: border-box;
   width: calc(100% - var(--gjs-left-width));
   height: calc(100% - var(--gjs-canvas-top));
@@ -207,15 +211,15 @@ $guide_pad: 5px !default;
     background-color: rgba(0, 0, 0, 0.15);
   }
 
-  &.#{$cui-cls} {
+  &.#{gjs_vars.$cui-cls} {
     width: 100%;
     height: 100%;
     top: 0;
   }
 
-  &#{gjs-is(grab)},
-  &#{gjs-is(grabbing)} {
-    .#{$cv-prefix}canvas__frames {
+  &#{gjs_main_mixins.gjs-is(grab)},
+  &#{gjs_main_mixins.gjs-is(grabbing)} {
+    .#{gjs_vars.$cv-prefix}canvas__frames {
       pointer-events: none; // Need this in multi-frame mode
     }
   }
@@ -234,7 +238,7 @@ $guide_pad: 5px !default;
     z-index: 1;
   }
 
-  .#{$app-prefix}ghost {
+  .#{gjs_vars.$app-prefix}ghost {
     display: none;
     pointer-events: none;
     background-color: #5b5b5b;
@@ -242,11 +246,11 @@ $guide_pad: 5px !default;
     position: absolute;
     z-index: 10;
 
-    @include opacity(0.55);
+    @include gjs_main_mixins.opacity(0.55);
   }
 
-  .#{$app-prefix}highlighter,
-  .#{$app-prefix}highlighter-sel {
+  .#{gjs_vars.$app-prefix}highlighter,
+  .#{gjs_vars.$app-prefix}highlighter-sel {
     position: absolute;
     outline: 1px solid var(--gjs-color-blue);
     outline-offset: -1px;
@@ -255,17 +259,17 @@ $guide_pad: 5px !default;
     height: 100%;
   }
 
-  .#{$app-prefix}highlighter-warning {
+  .#{gjs_vars.$app-prefix}highlighter-warning {
     outline: 3px solid var(--gjs-color-yellow);
   }
 
-  .#{$app-prefix}highlighter-sel {
+  .#{gjs_vars.$app-prefix}highlighter-sel {
     outline: 2px solid var(--gjs-color-blue);
     outline-offset: -2px;
   }
 
-  ##{$app-prefix}tools,
-  .#{$app-prefix}tools {
+  ##{gjs_vars.$app-prefix}tools,
+  .#{gjs_vars.$app-prefix}tools {
     width: 100%;
     height: 100%;
     position: absolute;
@@ -275,7 +279,7 @@ $guide_pad: 5px !default;
     z-index: 1;
   }
   /* Always place the tools above the highlighter */
-  ##{$app-prefix}tools {
+  ##{gjs_vars.$app-prefix}tools {
     z-index: 2;
   }
 
@@ -289,11 +293,11 @@ $guide_pad: 5px !default;
   // }
 }
 
-.#{$cv-prefix}canvas * {
+.#{gjs_vars.$cv-prefix}canvas * {
   box-sizing: border-box;
 }
 
-.#{$app-prefix}frame {
+.#{gjs_vars.$app-prefix}frame {
   outline: medium none;
   height: 100%;
   width: 100%;
@@ -310,7 +314,7 @@ $guide_pad: 5px !default;
   right: 0;
 }
 
-.#{$app-prefix}toolbar {
+.#{gjs_vars.$app-prefix}toolbar {
   position: absolute;
   background-color: var(--gjs-color-blue);
   white-space: nowrap;
@@ -320,7 +324,7 @@ $guide_pad: 5px !default;
   left: 0;
 }
 
-.#{$app-prefix}toolbar-item {
+.#{gjs_vars.$app-prefix}toolbar-item {
   width: 26px;
   padding: 5px;
   cursor: pointer;
@@ -332,8 +336,8 @@ $guide_pad: 5px !default;
   }
 }
 
-.#{$app-prefix}resizer-c {
-  @extend .#{$app-prefix}no-pointer-events;
+.#{gjs_vars.$app-prefix}resizer-c {
+  @extend .#{gjs_vars.$app-prefix}no-pointer-events;
 
   position: absolute;
   left: 0;
@@ -343,29 +347,29 @@ $guide_pad: 5px !default;
   z-index: 9;
 }
 
-.#{$app-prefix}margin-v-el,
-.#{$app-prefix}padding-v-el,
-.#{$app-prefix}fixedmargin-v-el,
-.#{$app-prefix}fixedpadding-v-el {
-  @extend .#{$app-prefix}no-pointer-events;
+.#{gjs_vars.$app-prefix}margin-v-el,
+.#{gjs_vars.$app-prefix}padding-v-el,
+.#{gjs_vars.$app-prefix}fixedmargin-v-el,
+.#{gjs_vars.$app-prefix}fixedpadding-v-el {
+  @extend .#{gjs_vars.$app-prefix}no-pointer-events;
 
-  @include opacity(0.1);
+  @include gjs_main_mixins.opacity(0.1);
 
   position: absolute;
   background-color: yellow;
 }
 
-.#{$app-prefix}fixedmargin-v-el,
-.#{$app-prefix}fixedpadding-v-el {
-  @include opacity(0.2);
+.#{gjs_vars.$app-prefix}fixedmargin-v-el,
+.#{gjs_vars.$app-prefix}fixedpadding-v-el {
+  @include gjs_main_mixins.opacity(0.2);
 }
 
-.#{$app-prefix}padding-v-el,
-.#{$app-prefix}fixedpadding-v-el {
+.#{gjs_vars.$app-prefix}padding-v-el,
+.#{gjs_vars.$app-prefix}fixedpadding-v-el {
   background-color: navy;
 }
 
-.#{$app-prefix}resizer-h {
+.#{gjs_vars.$app-prefix}resizer-h {
   pointer-events: all;
   position: absolute;
   border: 3px solid var(--gjs-color-blue);
@@ -375,19 +379,19 @@ $guide_pad: 5px !default;
   margin: var(--gjs-handle-margin);
 }
 
-.#{$app-prefix}resizer-h-tl {
+.#{gjs_vars.$app-prefix}resizer-h-tl {
   top: 0;
   left: 0;
   cursor: nwse-resize;
 }
 
-.#{$app-prefix}resizer-h-tr {
+.#{gjs_vars.$app-prefix}resizer-h-tr {
   top: 0;
   right: 0;
   cursor: nesw-resize;
 }
 
-.#{$app-prefix}resizer-h-tc {
+.#{gjs_vars.$app-prefix}resizer-h-tc {
   top: 0;
   margin: var(--gjs-handle-margin) auto;
   left: 0;
@@ -395,7 +399,7 @@ $guide_pad: 5px !default;
   cursor: ns-resize;
 }
 
-.#{$app-prefix}resizer-h-cl {
+.#{gjs_vars.$app-prefix}resizer-h-cl {
   left: 0;
   margin: auto var(--gjs-handle-margin);
   top: 0;
@@ -403,7 +407,7 @@ $guide_pad: 5px !default;
   cursor: ew-resize;
 }
 
-.#{$app-prefix}resizer-h-cr {
+.#{gjs_vars.$app-prefix}resizer-h-cr {
   margin: auto var(--gjs-handle-margin);
   top: 0;
   bottom: 0;
@@ -411,13 +415,13 @@ $guide_pad: 5px !default;
   cursor: ew-resize;
 }
 
-.#{$app-prefix}resizer-h-bl {
+.#{gjs_vars.$app-prefix}resizer-h-bl {
   bottom: 0;
   left: 0;
   cursor: nesw-resize;
 }
 
-.#{$app-prefix}resizer-h-bc {
+.#{gjs_vars.$app-prefix}resizer-h-bc {
   bottom: 0;
   margin: var(--gjs-handle-margin) auto;
   left: 0;
@@ -425,14 +429,14 @@ $guide_pad: 5px !default;
   cursor: ns-resize;
 }
 
-.#{$app-prefix}resizer-h-br {
+.#{gjs_vars.$app-prefix}resizer-h-br {
   bottom: 0;
   right: 0;
   cursor: nwse-resize;
 }
 
-.#{$pn-prefix}panel {
-  .#{$app-prefix}resizer-h {
+.#{gjs_vars.$pn-prefix}panel {
+  .#{gjs_vars.$app-prefix}resizer-h {
     background-color: rgba(0, 0, 0, 0.2);
     border: none;
     opacity: 0;
@@ -443,63 +447,63 @@ $guide_pad: 5px !default;
     }
   }
 
-  .#{$app-prefix}resizer-h-tc,
-  .#{$app-prefix}resizer-h-bc {
+  .#{gjs_vars.$app-prefix}resizer-h-tc,
+  .#{gjs_vars.$app-prefix}resizer-h-bc {
     margin: 0 auto;
     width: 100%;
   }
 
-  .#{$app-prefix}resizer-h-cr,
-  .#{$app-prefix}resizer-h-cl {
+  .#{gjs_vars.$app-prefix}resizer-h-cr,
+  .#{gjs_vars.$app-prefix}resizer-h-cl {
     margin: auto 0;
     height: 100%;
   }
 }
 
-.#{$app-prefix}resizing .#{$app-prefix}highlighter,
-.#{$app-prefix}resizing .#{$app-prefix}badge {
+.#{gjs_vars.$app-prefix}resizing .#{gjs_vars.$app-prefix}highlighter,
+.#{gjs_vars.$app-prefix}resizing .#{gjs_vars.$app-prefix}badge {
   display: none !important;
 }
 
-.#{$app-prefix}resizing-tl * {
+.#{gjs_vars.$app-prefix}resizing-tl * {
   cursor: nwse-resize !important;
 }
 
-.#{$app-prefix}resizing-tr * {
+.#{gjs_vars.$app-prefix}resizing-tr * {
   cursor: nesw-resize !important;
 }
 
-.#{$app-prefix}resizing-tc * {
+.#{gjs_vars.$app-prefix}resizing-tc * {
   cursor: ns-resize !important;
 }
 
-.#{$app-prefix}resizing-cl * {
+.#{gjs_vars.$app-prefix}resizing-cl * {
   cursor: ew-resize !important;
 }
 
-.#{$app-prefix}resizing-cr * {
+.#{gjs_vars.$app-prefix}resizing-cr * {
   cursor: ew-resize !important;
 }
 
-.#{$app-prefix}resizing-bl * {
+.#{gjs_vars.$app-prefix}resizing-bl * {
   cursor: nesw-resize !important;
 }
 
-.#{$app-prefix}resizing-bc * {
+.#{gjs_vars.$app-prefix}resizing-bc * {
   cursor: ns-resize !important;
 }
 
-.#{$app-prefix}resizing-br * {
+.#{gjs_vars.$app-prefix}resizing-br * {
   cursor: nwse-resize !important;
 }
 
-.btn-cl {
-  @include opacity(0.3);
+// .btn-cl {
+//   @include gjs_main_mixins.opacity(0.3);
 
-  font-size: 25px;
-  cursor: pointer;
+//   font-size: 25px;
+//   cursor: pointer;
 
-  &:hover {
-    @include opacity(0.7);
-  }
-}
+//   &:hover {
+//     @include gjs_main_mixins.opacity(0.7);
+//   }
+// }
diff --git a/packages/core/src/styles/scss/_gjs_category_general.scss b/packages/core/src/styles/scss/_gjs_category_general.scss
new file mode 100644
index 000000000..6e77397e5
--- /dev/null
+++ b/packages/core/src/styles/scss/_gjs_category_general.scss
@@ -0,0 +1,94 @@
+@use 'gjs_vars';
+@use 'gjs_main_mixins';
+
+.#{gjs_vars.$app-prefix}bg {
+  &-main {
+    background-color: var(--gjs-main-color);
+  }
+}
+
+.#{gjs_vars.$app-prefix}color {
+  &-main {
+    color: var(--gjs-font-color);
+    fill: var(--gjs-font-color);
+  }
+
+  &-active {
+    color: var(--gjs-font-color-active);
+    fill: var(--gjs-font-color-active);
+  }
+
+  &-warn {
+    color: var(--gjs-color-warn);
+    fill: var(--gjs-color-warn);
+  }
+
+  &-hl {
+    color: var(--gjs-color-highlight);
+    fill: var(--gjs-color-highlight);
+  }
+}
+
+.#{gjs_vars.$app-prefix}invis-invis,
+.#{gjs_vars.$app-prefix}no-app {
+  background-color: transparent;
+  border: none;
+  color: inherit;
+}
+
+.#{gjs_vars.$app-prefix}no-app {
+  height: 10px;
+}
+
+.opac50 {
+  @include gjs_main_mixins.opacity(0.5);
+}
+
+.#{gjs_vars.$app-prefix}checker-bg,
+.checker-bg {
+  background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAIAAADZF8uwAAAAGUlEQVQYV2M4gwH+YwCGIasIUwhT25BVBADtzYNYrHvv4gAAAABJRU5ErkJggg==');
+}
+
+.#{gjs_vars.$app-prefix}no-user-select {
+  @include gjs_main_mixins.user-select(none);
+}
+
+.#{gjs_vars.$app-prefix}no-pointer-events {
+  pointer-events: none;
+}
+
+.no-select {
+  @include gjs_main_mixins.user-select(none);
+}
+
+.clear {
+  clear: both;
+}
+
+.#{gjs_vars.$app-prefix}category-open {
+  border-bottom: 1px solid rgba(0, 0, 0, 0.25);
+}
+
+.#{gjs_vars.$app-prefix}category-title {
+  @extend .no-select;
+
+  font-weight: lighter;
+  background-color: var(--gjs-secondary-dark-color);
+  letter-spacing: 1px;
+  padding: 9px 10px 9px 20px;
+  border-bottom: 1px solid rgba(0, 0, 0, 0.25);
+  text-align: left;
+  position: relative;
+  cursor: pointer;
+}
+
+.btn-cl {
+  @include gjs_main_mixins.opacity(0.3);
+
+  font-size: 25px;
+  cursor: pointer;
+
+  &:hover {
+    @include gjs_main_mixins.opacity(0.7);
+  }
+}
diff --git a/packages/core/src/styles/scss/_gjs_code_manager.scss b/packages/core/src/styles/scss/_gjs_code_manager.scss
new file mode 100644
index 000000000..a1c7d27e1
--- /dev/null
+++ b/packages/core/src/styles/scss/_gjs_code_manager.scss
@@ -0,0 +1,34 @@
+@use 'gjs_vars';
+
+.#{gjs_vars.$cm-prefix}editor-c {
+  float: left;
+  box-sizing: border-box;
+  width: 50%;
+
+  .CodeMirror {
+    height: 450px;
+  }
+}
+.#{gjs_vars.$cm-prefix}editor {
+  font-size: 12px;
+
+  &##{gjs_vars.$cm-prefix}htmlmixed {
+    padding-right: 10px;
+    border-right: 1px solid var(--gjs-main-dark-color);
+    ##{gjs_vars.$cm-prefix}title {
+      color: #a97d44;
+    }
+  }
+  &##{gjs_vars.$cm-prefix}css {
+    padding-left: 10px;
+    ##{gjs_vars.$cm-prefix}title {
+      color: #ddca7e;
+    }
+  }
+  ##{gjs_vars.$cm-prefix}title {
+    background-color: var(--gjs-main-dark-color);
+    font-size: 12px;
+    padding: 5px 10px 3px;
+    text-align: right;
+  }
+}
diff --git a/packages/core/src/styles/scss/_gjs_commands.scss b/packages/core/src/styles/scss/_gjs_commands.scss
new file mode 100644
index 000000000..395af3ec8
--- /dev/null
+++ b/packages/core/src/styles/scss/_gjs_commands.scss
@@ -0,0 +1,84 @@
+@use 'gjs_vars';
+@use 'gjs_category_general';
+
+.no-dots,
+.ui-resizable-handle {
+  border: none !important;
+  margin: 0 !important;
+  outline: none !important;
+}
+
+.#{gjs_vars.$com-prefix}dashed * {
+  outline: 1px dashed #888;
+  outline-offset: -2px;
+  box-sizing: border-box;
+}
+
+.#{gjs_vars.$com-prefix}no-select,
+.#{gjs_vars.$com-prefix}no-select img {
+  @extend .no-select;
+}
+
+.#{gjs_vars.$com-prefix}badge,
+.#{gjs_vars.$app-prefix}badge {
+  pointer-events: none;
+  background-color: var(--gjs-color-blue);
+  color: #fff;
+  padding: 2px 5px;
+  position: absolute;
+  z-index: 1;
+  font-size: 12px;
+  outline: none;
+  display: none;
+}
+.#{gjs_vars.$app-prefix}badge-warning {
+  background-color: var(--gjs-color-yellow);
+}
+.#{gjs_vars.$app-prefix}placeholder,
+.#{gjs_vars.$com-prefix}placeholder,
+.#{gjs_vars.$nv-prefix}placeholder {
+  position: absolute;
+  z-index: 10;
+  pointer-events: none;
+  display: none;
+}
+
+.#{gjs_vars.$app-prefix}placeholder,
+.#{gjs_vars.$nv-prefix}placeholder {
+  border-style: solid !important;
+  outline: none;
+  box-sizing: border-box;
+  transition:
+    top var(--gjs-animation-duration),
+    left var(--gjs-animation-duration),
+    width var(--gjs-animation-duration),
+    height var(--gjs-animation-duration);
+}
+
+.#{gjs_vars.$app-prefix}placeholder.horizontal,
+.#{gjs_vars.$com-prefix}placeholder.horizontal,
+.#{gjs_vars.$nv-prefix}placeholder.horizontal {
+  border-color: transparent var(--gjs-placeholder-background-color);
+  border-width: 3px 5px;
+  margin: -3px 0 0;
+}
+
+.#{gjs_vars.$app-prefix}placeholder.vertical,
+.#{gjs_vars.$com-prefix}placeholder.vertical,
+.#{gjs_vars.$nv-prefix}placeholder.vertical {
+  border-color: var(--gjs-placeholder-background-color) transparent;
+  border-width: 5px 3px;
+  margin: 0 0 0 -3px;
+}
+
+.#{gjs_vars.$app-prefix}placeholder-int,
+.#{gjs_vars.$com-prefix}placeholder-int,
+.#{gjs_vars.$nv-prefix}placeholder-int {
+  background-color: var(--gjs-placeholder-background-color);
+  box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);
+  height: 100%;
+  width: 100%;
+  pointer-events: none;
+  padding: 1.5px;
+  outline: none;
+}
diff --git a/packages/core/src/styles/scss/_gjs_devices.scss b/packages/core/src/styles/scss/_gjs_devices.scss
index 183b14207..fa71105d6 100644
--- a/packages/core/src/styles/scss/_gjs_devices.scss
+++ b/packages/core/src/styles/scss/_gjs_devices.scss
@@ -1,19 +1,21 @@
-.#{$app-prefix}devices-c {
+@use 'gjs_vars';
+
+.#{gjs_vars.$app-prefix}devices-c {
   display: flex;
   align-items: center;
   padding: 2px 3px 3px 3px;
 
-  .#{$app-prefix}device-label {
+  .#{gjs_vars.$app-prefix}device-label {
     flex-grow: 2;
     text-align: left;
     margin-right: 10px;
   }
 
-  .#{$app-prefix}select {
+  .#{gjs_vars.$app-prefix}select {
     flex-grow: 20;
   }
 
-  .#{$app-prefix}add-trasp {
+  .#{gjs_vars.$app-prefix}add-trasp {
     flex-grow: 1;
     margin-left: 5px;
   }
diff --git a/packages/core/src/styles/scss/_gjs_file_uploader.scss b/packages/core/src/styles/scss/_gjs_file_uploader.scss
new file mode 100644
index 000000000..1a14c8088
--- /dev/null
+++ b/packages/core/src/styles/scss/_gjs_file_uploader.scss
@@ -0,0 +1,38 @@
+@use 'gjs_main_mixins';
+@use 'gjs_vars';
+
+.#{gjs_vars.$am-prefix}file-uploader {
+  width: 55%;
+  float: left;
+
+  > form {
+    background-color: var(--gjs-secondary-dark-color);
+    border: 2px dashed;
+    border-radius: 3px;
+    position: relative;
+    text-align: center;
+    margin-bottom: 15px;
+
+    &.#{gjs_vars.$am-prefix}hover {
+      border: 2px solid var(--gjs-color-green);
+      color: gjs_main_mixins.lighten-color(var(--gjs-color-green), 5%);
+    }
+
+    &.#{gjs_vars.$am-prefix}disabled {
+      border-color: red;
+    }
+
+    ##{gjs_vars.$am-prefix}uploadFile {
+      @include gjs_main_mixins.opacity(0);
+      padding: var(--gjs-upload-padding);
+      width: 100%;
+      box-sizing: border-box;
+    }
+  }
+
+  ##{gjs_vars.$am-prefix}title {
+    position: absolute;
+    padding: var(--gjs-upload-padding);
+    width: 100%;
+  }
+}
diff --git a/packages/core/src/styles/scss/_gjs_inputs.scss b/packages/core/src/styles/scss/_gjs_inputs.scss
index ba8bdc0f7..e44250a58 100644
--- a/packages/core/src/styles/scss/_gjs_inputs.scss
+++ b/packages/core/src/styles/scss/_gjs_inputs.scss
@@ -1,3 +1,7 @@
+@use 'gjs_main_mixins';
+@use 'gjs_vars';
+@use 'gjs_category_general';
+
 /********* Input style **********/
 
 @mixin rangeThumbStyle() {
@@ -16,7 +20,7 @@
   height: 3px;
 }
 
-.#{$app-prefix} {
+.#{gjs_vars.$app-prefix} {
   &label {
     line-height: 18px;
   }
@@ -52,7 +56,7 @@
     input,
     select,
     textarea {
-      @include appearance(none);
+      @include gjs_main_mixins.appearance(none);
 
       color: inherit;
       border: none;
@@ -90,17 +94,17 @@
   }
 }
 
-.#{$app-prefix}select option,
-.#{$app-prefix}field-select option,
-.#{$clm-prefix}select option,
-.#{$sm-prefix}select option,
-.#{$app-prefix}fields option,
-.#{$sm-prefix}unit option {
+.#{gjs_vars.$app-prefix}select option,
+.#{gjs_vars.$app-prefix}field-select option,
+.#{gjs_vars.$clm-prefix}select option,
+.#{gjs_vars.$sm-prefix}select option,
+.#{gjs_vars.$app-prefix}fields option,
+.#{gjs_vars.$sm-prefix}unit option {
   background-color: var(--gjs-main-color);
   color: var(--gjs-font-color);
 }
 
-.#{$app-prefix}field {
+.#{gjs_vars.$app-prefix}field {
   background-color: var(--gjs-main-dark-color);
   border: none;
   box-shadow: none;
@@ -113,7 +117,7 @@
     resize: vertical;
   }
 
-  .#{$app-prefix}sel-arrow {
+  .#{gjs_vars.$app-prefix}sel-arrow {
     height: 100%;
     width: 9px;
     position: absolute;
@@ -122,7 +126,7 @@
     z-index: 0;
   }
 
-  .#{$app-prefix}d-s-arrow {
+  .#{gjs_vars.$app-prefix}d-s-arrow {
     bottom: 0;
     top: 0;
     margin: auto;
@@ -154,14 +158,14 @@
   }
 }
 
-.#{$app-prefix}field-color {
+.#{gjs_vars.$app-prefix}field-color {
   input {
     padding-right: var(--gjs-color-input-padding);
     box-sizing: border-box;
   }
 }
 
-.#{$app-prefix}field-colorp {
+.#{gjs_vars.$app-prefix}field-colorp {
   border-left: 1px solid var(--gjs-main-dark-color);
   box-sizing: border-box;
   height: 100%;
@@ -172,22 +176,22 @@
   width: var(--gjs-color-input-padding);
   z-index: 10;
 
-  .#{$app-prefix}checker-bg {
+  .#{gjs_vars.$app-prefix}checker-bg {
     height: 100%;
     width: 100%;
     border-radius: 1px;
   }
 }
 
-.#{$app-prefix}field-colorp-c {
-  @extend .#{$app-prefix}checker-bg;
+.#{gjs_vars.$app-prefix}field-colorp-c {
+  @extend .#{gjs_vars.$app-prefix}checker-bg;
 
   height: 100%;
   position: relative;
   width: 100%;
 }
 
-.#{$app-prefix}field-color-picker {
+.#{gjs_vars.$app-prefix}field-color-picker {
   background-color: var(--gjs-font-color);
   cursor: pointer;
   height: 100%;
@@ -199,7 +203,7 @@
 }
 
 /* ??? */
-.#{$app-prefix}field-checkbox {
+.#{gjs_vars.$app-prefix}field-checkbox {
   padding: 0;
   width: 17px;
   height: 17px;
@@ -210,14 +214,14 @@
     display: none;
   }
 
-  input:checked + .#{$app-prefix}chk-icon {
+  input:checked + .#{gjs_vars.$app-prefix}chk-icon {
     border-color: rgba(255, 255, 255, 0.5);
     border-width: 0 2px 2px 0;
     border-style: solid;
   }
 }
 
-.#{$app-prefix}radio-item {
+.#{gjs_vars.$app-prefix}radio-item {
   flex: 1 1 auto;
   text-align: center;
   border-left: 1px solid var(--gjs-dark-text-shadow);
@@ -234,7 +238,7 @@
     display: none;
   }
 
-  input:checked + .#{$app-prefix}radio-item-label {
+  input:checked + .#{gjs_vars.$app-prefix}radio-item-label {
     background-color: rgba(255, 255, 255, 0.2);
   }
 
@@ -243,13 +247,13 @@
   }
 }
 
-.#{$app-prefix}radio-item-label {
+.#{gjs_vars.$app-prefix}radio-item-label {
   cursor: pointer;
   display: block;
   padding: var(--gjs-input-padding);
 }
 
-.#{$app-prefix}field-units {
+.#{gjs_vars.$app-prefix}field-units {
   position: absolute;
   margin: auto;
   right: 10px;
@@ -257,7 +261,7 @@
   top: 0;
 }
 
-.#{$app-prefix}field-unit {
+.#{gjs_vars.$app-prefix}field-unit {
   position: absolute;
   right: 10px;
   top: 3px;
@@ -266,12 +270,12 @@
   cursor: pointer;
 }
 
-.#{$app-prefix}input-unit {
+.#{gjs_vars.$app-prefix}input-unit {
   text-align: center;
 }
 
-.#{$app-prefix}field-arrow-u,
-.#{$app-prefix}field-arrow-d {
+.#{gjs_vars.$app-prefix}field-arrow-u,
+.#{gjs_vars.$app-prefix}field-arrow-d {
   position: absolute;
   height: 0;
   width: 0;
@@ -282,17 +286,17 @@
   cursor: pointer;
 }
 
-.#{$app-prefix}field-arrow-u {
+.#{gjs_vars.$app-prefix}field-arrow-u {
   border-bottom: 4px solid var(--gjs-arrow-color);
   border-top: none;
   top: 4px;
 }
 
-.#{$app-prefix}field-select {
+.#{gjs_vars.$app-prefix}field-select {
   padding: 0;
 }
 
-.#{$app-prefix}field-range {
+.#{gjs_vars.$app-prefix}field-range {
   background-color: transparent;
   border: none;
   box-shadow: none;
@@ -336,7 +340,7 @@
   }
 }
 
-.#{$app-prefix}btn {
+.#{gjs_vars.$app-prefix}btn {
   &-prim {
     color: inherit;
     background-color: var(--gjs-main-light-color);
@@ -356,8 +360,8 @@
   }
 }
 
-.#{$app-prefix}chk-icon {
-  @include transform(rotate(45deg));
+.#{gjs_vars.$app-prefix}chk-icon {
+  @include gjs_main_mixins.transform(rotate(45deg));
 
   box-sizing: border-box;
   display: block;
@@ -366,7 +370,7 @@
   width: 6px;
 }
 
-.#{$app-prefix}add-trasp {
+.#{gjs_vars.$app-prefix}add-trasp {
   background: none;
   border: none;
   color: var(--gjs-font-color);
@@ -374,10 +378,10 @@
   font-size: 1em;
   border-radius: 2px;
 
-  @include opacity(0.75);
+  @include gjs_main_mixins.opacity(0.75);
 
   &:hover {
-    @include opacity(1);
+    @include gjs_main_mixins.opacity(1);
   }
 
   &:active {
diff --git a/packages/core/src/styles/scss/_gjs_layers.scss b/packages/core/src/styles/scss/_gjs_layers.scss
index b3347d6a7..11d6b1a4b 100644
--- a/packages/core/src/styles/scss/_gjs_layers.scss
+++ b/packages/core/src/styles/scss/_gjs_layers.scss
@@ -1,12 +1,16 @@
+@use 'gjs_main_mixins';
+@use 'gjs_vars';
+@use 'gjs_category_general';
+
 $layerIconSize: 15px !default;
 
-.#{$nv-prefix} {
+.#{gjs_vars.$nv-prefix} {
   &selected-parent {
     border: 1px solid var(--gjs-color-yellow);
   }
 
   &opac50 {
-    @include opacity(0.5);
+    @include gjs_main_mixins.opacity(0.5);
   }
 
   &layer {
@@ -39,7 +43,7 @@ $layerIconSize: 15px !default;
     }
 
     &-hidden {
-      @include opacity(0.55);
+      @include gjs_main_mixins.opacity(0.55);
     }
 
     &-vis {
@@ -58,11 +62,11 @@ $layerIconSize: 15px !default;
         display: none;
       }
 
-      &.#{$nv-prefix}layer-off {
-        .#{$nv-prefix}layer-vis-on {
+      &.#{gjs_vars.$nv-prefix}layer-off {
+        .#{gjs_vars.$nv-prefix}layer-vis-on {
           display: none;
         }
-        .#{$nv-prefix}layer-vis-off {
+        .#{gjs_vars.$nv-prefix}layer-vis-off {
           display: flex;
         }
       }
@@ -75,10 +79,10 @@ $layerIconSize: 15px !default;
       box-sizing: content-box;
       transform: rotate(90deg);
       display: flex;
-      @include opacity(0.7);
+      @include gjs_main_mixins.opacity(0.7);
 
       &:hover {
-        @include opacity(1);
+        @include gjs_main_mixins.opacity(1);
       }
     }
 
@@ -87,7 +91,7 @@ $layerIconSize: 15px !default;
     }
 
     &-title {
-      @extend .#{$app-prefix}category-title;
+      @extend .#{gjs_vars.$app-prefix}category-title;
 
       padding: 0;
       display: flex;
@@ -126,22 +130,22 @@ $layerIconSize: 15px !default;
       white-space: nowrap;
       max-width: 170px;
       height: auto;
-      @extend .#{$app-prefix}no-user-select;
+      @extend .#{gjs_vars.$app-prefix}no-user-select;
 
       &--no-edit {
         text-overflow: ellipsis;
       }
     }
 
-    > .#{$nv-prefix}layer-children {
+    > .#{gjs_vars.$nv-prefix}layer-children {
       display: none;
     }
 
-    &.open > .#{$nv-prefix}layer-children {
+    &.open > .#{gjs_vars.$nv-prefix}layer-children {
       display: block;
     }
 
-    &-no-chld > .#{$nv-prefix}layer-title-inn > .#{$nv-prefix}layer-caret {
+    &-no-chld > .#{gjs_vars.$nv-prefix}layer-title-inn > .#{gjs_vars.$nv-prefix}layer-caret {
       visibility: hidden;
     }
 
@@ -153,29 +157,29 @@ $layerIconSize: 15px !default;
       cursor: move;
     }
 
-    &.#{$nv-prefix}hovered .#{$nv-prefix}layer-item {
+    &.#{gjs_vars.$nv-prefix}hovered .#{gjs_vars.$nv-prefix}layer-item {
       background-color: var(--gjs-soft-light-color);
     }
 
-    &.#{$nv-prefix}selected .#{$nv-prefix}layer-item {
+    &.#{gjs_vars.$nv-prefix}selected .#{gjs_vars.$nv-prefix}layer-item {
       background-color: var(--gjs-main-light-color);
     }
   }
 }
 
-.#{$app-prefix}layers {
+.#{gjs_vars.$app-prefix}layers {
   position: relative;
   height: 100%;
 
-  ##{$nv-prefix}placeholder {
+  ##{gjs_vars.$nv-prefix}placeholder {
     width: 100%;
     position: absolute;
 
-    ##{$nv-prefix}plh-int {
+    ##{gjs_vars.$nv-prefix}plh-int {
       height: 100%;
       padding: 1px;
 
-      &.#{$nv-prefix}insert {
+      &.#{gjs_vars.$nv-prefix}insert {
         background-color: var(--gjs-color-green);
       }
     }
diff --git a/packages/core/src/styles/scss/_gjs_main_mixins.scss b/packages/core/src/styles/scss/_gjs_main_mixins.scss
new file mode 100644
index 000000000..10ad87d77
--- /dev/null
+++ b/packages/core/src/styles/scss/_gjs_main_mixins.scss
@@ -0,0 +1,42 @@
+@use 'gjs_vars';
+
+$gjs-is-prefix: '.#{gjs_vars.$app-prefix}is__';
+
+@function gjs-is($name) {
+  @return '#{$gjs-is-prefix}#{$name}';
+}
+
+@function darken-color($color, $percentage) {
+  @return color-mix(in srgb, $color, black $percentage);
+}
+
+@function lighten-color($color, $percentage) {
+  @return color-mix(in srgb, $color, white $percentage);
+}
+
+@mixin user-select($v) {
+  -moz-user-select: $v;
+  -khtml-user-select: $v;
+  -webkit-user-select: $v;
+  -ms-user-select: $v;
+  -o-user-select: $v;
+  user-select: $v;
+}
+
+@mixin opacity($v) {
+  opacity: $v;
+  filter: alpha(opacity=$v * 100);
+}
+
+@mixin appearance($v) {
+  -webkit-appearance: $v;
+  -moz-appearance: $v;
+  appearance: $v;
+}
+
+@mixin transform($v) {
+  -ms-transform: $v;
+  -webkit-transform: $v;
+  -moz-transform: $v;
+  transform: $v;
+}
diff --git a/packages/core/src/styles/scss/_gjs_modal.scss b/packages/core/src/styles/scss/_gjs_modal.scss
index 69b8749cd..3a667ecc3 100644
--- a/packages/core/src/styles/scss/_gjs_modal.scss
+++ b/packages/core/src/styles/scss/_gjs_modal.scss
@@ -1,4 +1,7 @@
-.#{$mdl-prefix} {
+@use 'gjs_vars';
+@use 'gjs_category_general';
+
+.#{gjs_vars.$mdl-prefix} {
   &container {
     font-family: var(--gjs-main-font);
     overflow-y: auto;
@@ -14,7 +17,7 @@
 
   &dialog {
     text-shadow: -1px -1px 0 rgba(0, 0, 0, 0.05);
-    animation: #{$app-prefix}slide-down 0.215s;
+    animation: #{gjs_vars.$app-prefix}slide-down 0.215s;
     margin: auto;
     max-width: 850px;
     width: 90%;
@@ -36,8 +39,8 @@
     top: 5px;
   }
 
-  &active .#{$mdl-prefix}dialog {
-    animation: #{$mdl-prefix}slide-down 0.216s;
+  &active .#{gjs_vars.$mdl-prefix}dialog {
+    animation: #{gjs_vars.$mdl-prefix}slide-down 0.216s;
   }
 
   &header,
@@ -53,7 +56,7 @@
   }
 }
 
-.#{$app-prefix}export-dl::after {
+.#{gjs_vars.$app-prefix}export-dl::after {
   content: '';
   clear: both;
   display: block;
diff --git a/packages/core/src/styles/scss/_gjs_panels.scss b/packages/core/src/styles/scss/_gjs_panels.scss
index 0db8c7988..7b269a911 100644
--- a/packages/core/src/styles/scss/_gjs_panels.scss
+++ b/packages/core/src/styles/scss/_gjs_panels.scss
@@ -1,4 +1,6 @@
-.#{$pn-prefix} {
+@use 'gjs_vars';
+
+.#{gjs_vars.$pn-prefix} {
   &panel {
     display: inline-block;
     position: absolute;
@@ -63,7 +65,7 @@
     position: relative;
     cursor: pointer;
 
-    &.#{$pn-prefix}active {
+    &.#{gjs_vars.$pn-prefix}active {
       background-color: rgba(0, 0, 0, 0.15);
       box-shadow: 0 0 3px rgba(0, 0, 0, 0.25) inset;
     }
diff --git a/packages/core/src/styles/scss/_gjs_root.scss b/packages/core/src/styles/scss/_gjs_root.scss
new file mode 100644
index 000000000..6474ddca1
--- /dev/null
+++ b/packages/core/src/styles/scss/_gjs_root.scss
@@ -0,0 +1,37 @@
+@use 'gjs_vars';
+
+:root {
+  --gjs-main-color: #{gjs_vars.$mainColor};
+  --gjs-primary-color: #{gjs_vars.$primaryColor};
+  --gjs-secondary-color: #{gjs_vars.$secondaryColor};
+  --gjs-tertiary-color: #{gjs_vars.$tertiaryColor};
+  --gjs-quaternary-color: #{gjs_vars.$quaternaryColor};
+  --gjs-font-color: #{gjs_vars.$fontColor};
+  --gjs-font-color-active: #{gjs_vars.$fontColorActive};
+  --gjs-main-dark-color: #{gjs_vars.$mainDkColor};
+  --gjs-secondary-dark-color: #{gjs_vars.$mainDklColor};
+  --gjs-main-light-color: #{gjs_vars.$mainLhColor};
+  --gjs-secondary-light-color: #{gjs_vars.$mainLhlColor};
+  --gjs-soft-light-color: #{gjs_vars.$softLhColor};
+  --gjs-color-blue: #{gjs_vars.$colorBlue};
+  --gjs-color-red: #{gjs_vars.$colorRed};
+  --gjs-color-yellow: #{gjs_vars.$colorYell};
+  --gjs-color-green: #{gjs_vars.$colorGreen};
+  --gjs-left-width: #{gjs_vars.$leftWidth};
+  --gjs-color-highlight: #{gjs_vars.$colorHighlight};
+  --gjs-color-warn: #{gjs_vars.$colorWarn};
+  --gjs-handle-margin: #{gjs_vars.$hndlMargin};
+  --gjs-light-border: #{gjs_vars.$lightBorder};
+  --gjs-arrow-color: #{gjs_vars.$arrowColor};
+  --gjs-dark-text-shadow: #{gjs_vars.$darkTextShadow};
+  --gjs-color-input-padding: #{gjs_vars.$colorpSize};
+  --gjs-input-padding: #{gjs_vars.$inputPadding}; // Has to be a single value
+  --gjs-padding-elem-classmanager: #{gjs_vars.$paddElClm};
+  --gjs-upload-padding: #{gjs_vars.$uploadPadding};
+  --gjs-animation-duration: #{gjs_vars.$animSpeed};
+  --gjs-main-font: #{gjs_vars.$mainFont};
+  --gjs-font-size: #{gjs_vars.$fontSize};
+  --gjs-placeholder-background-color: #{gjs_vars.$placeholderColor};
+  --gjs-canvas-top: #{gjs_vars.$canvasTop};
+  --gjs-flex-item-gap: 5px;
+}
diff --git a/packages/core/src/styles/scss/_gjs_rte.scss b/packages/core/src/styles/scss/_gjs_rte.scss
index c0685e66f..b174cef2a 100644
--- a/packages/core/src/styles/scss/_gjs_rte.scss
+++ b/packages/core/src/styles/scss/_gjs_rte.scss
@@ -1,6 +1,9 @@
-.#{$rte-prefix} {
+@use 'gjs_vars';
+@use 'gjs_category_general';
+
+.#{gjs_vars.$rte-prefix} {
   &toolbar {
-    @extend .#{$app-prefix}no-user-select;
+    @extend .#{gjs_vars.$app-prefix}no-user-select;
 
     position: absolute;
     z-index: 10;
diff --git a/packages/core/src/styles/scss/_gjs_selectors.scss b/packages/core/src/styles/scss/_gjs_selectors.scss
index 440642ca1..01401fbb6 100644
--- a/packages/core/src/styles/scss/_gjs_selectors.scss
+++ b/packages/core/src/styles/scss/_gjs_selectors.scss
@@ -1,13 +1,17 @@
-.#{$clm-prefix}field {
-  @extend .#{$sm-prefix}field;
+@use 'gjs_main_mixins';
+@use 'gjs_vars';
+@use 'gjs_style_manager';
+
+.#{gjs_vars.$clm-prefix}field {
+  @extend .#{gjs_vars.$sm-prefix}field;
 }
 
-.#{$clm-prefix}select {
-  @extend .#{$sm-prefix}field, .#{$sm-prefix}select;
+.#{gjs_vars.$clm-prefix}select {
+  @extend .#{gjs_vars.$sm-prefix}field, .#{gjs_vars.$sm-prefix}select;
 }
 
-##{$clm-prefix}add-tag,
-.#{$clm-prefix}tags-btn {
+##{gjs_vars.$clm-prefix}add-tag,
+.#{gjs_vars.$clm-prefix}tags-btn {
   background-color: rgba(255, 255, 255, 0.15);
   border-radius: 2px;
   padding: 3px;
@@ -19,7 +23,7 @@
   cursor: pointer;
 }
 
-.#{$clm-prefix} {
+.#{gjs_vars.$clm-prefix} {
   &tags-btn svg {
     fill: currentColor;
     display: block;
@@ -65,7 +69,7 @@
 
   &sel-id {
     font-size: 0.9em;
-    @include opacity(0.5);
+    @include gjs_main_mixins.opacity(0.5);
   }
 
   &label-sel {
@@ -74,21 +78,21 @@
   }
 }
 
-.#{$clm-prefix}tags {
+.#{gjs_vars.$clm-prefix}tags {
   font-size: var(--gjs-font-size);
   padding: 10px 5px;
 
-  ##{$clm-prefix}sel {
+  ##{gjs_vars.$clm-prefix}sel {
     padding: 7px 0;
     float: left;
   }
 
-  ##{$clm-prefix}sel {
+  ##{gjs_vars.$clm-prefix}sel {
     font-style: italic;
     margin-left: 5px;
   }
 
-  ##{$clm-prefix}tags-field {
+  ##{gjs_vars.$clm-prefix}tags-field {
     clear: both;
     padding: 5px;
     margin-bottom: 5px;
@@ -96,23 +100,23 @@
     flex-wrap: wrap;
   }
 
-  ##{$clm-prefix}tags-c {
+  ##{gjs_vars.$clm-prefix}tags-c {
     display: flex;
     flex-wrap: wrap;
     vertical-align: top;
     overflow: hidden;
   }
 
-  ##{$clm-prefix}new {
-    @extend .#{$app-prefix}invis-invis;
+  ##{gjs_vars.$clm-prefix}new {
+    @extend .#{gjs_vars.$app-prefix}invis-invis;
 
     color: var(--gjs-font-color);
     padding: var(--gjs-padding-elem-classmanager);
     display: none;
   }
 
-  ##{$clm-prefix}close {
-    @include opacity(0.85);
+  ##{gjs_vars.$clm-prefix}close {
+    @include gjs_main_mixins.opacity(0.85);
     font-size: 20px;
     line-height: 0;
     cursor: pointer;
@@ -120,18 +124,18 @@
     @extend .no-select;
 
     &:hover {
-      @include opacity(1);
+      @include gjs_main_mixins.opacity(1);
     }
   }
 
-  ##{$clm-prefix}checkbox {
+  ##{gjs_vars.$clm-prefix}checkbox {
     color: rgba(255, 255, 255, 0.9);
     vertical-align: middle;
     cursor: pointer;
     font-size: 9px;
   }
 
-  ##{$clm-prefix}tag-label {
+  ##{gjs_vars.$clm-prefix}tag-label {
     flex-grow: 1;
     text-overflow: ellipsis;
     overflow: hidden;
diff --git a/packages/core/src/styles/scss/_gjs_spectrum.scss b/packages/core/src/styles/scss/_gjs_spectrum.scss
new file mode 100644
index 000000000..ce27d8217
--- /dev/null
+++ b/packages/core/src/styles/scss/_gjs_spectrum.scss
@@ -0,0 +1,96 @@
+@use 'gjs_vars';
+@use 'spectrum.scss';
+
+.#{gjs_vars.$app-prefix}editor-sp {
+  border: 1px solid var(--gjs-main-dark-color);
+  box-shadow: 0 0 7px var(--gjs-main-dark-color);
+  border-radius: 3px;
+}
+
+.#{gjs_vars.$app-prefix}editor-sp {
+  .sp-hue,
+  .sp-slider {
+    cursor: row-resize;
+  }
+  .sp-color,
+  .sp-dragger {
+    cursor: crosshair;
+  }
+  .sp-alpha-inner,
+  .sp-alpha-handle {
+    cursor: col-resize;
+  }
+  .sp-hue {
+    left: 90%;
+  }
+  .sp-color {
+    right: 15%;
+  }
+  .sp-picker-container {
+    border: none;
+  }
+  .colpick_dark .colpick_color {
+    outline: 1px solid var(--gjs-main-dark-color);
+  }
+  .sp-cancel,
+  .sp-cancel:hover {
+    bottom: -8px;
+    color: #777 !important;
+    font-size: 25px;
+    left: 0;
+    position: absolute;
+    text-decoration: none;
+  }
+  .sp-alpha-handle {
+    background-color: #ccc;
+    border: 1px solid #555;
+    width: 4px;
+  }
+  .sp-color,
+  .sp-hue {
+    border: 1px solid #333333;
+  }
+  .sp-slider {
+    background-color: #ccc;
+    border: 1px solid #555;
+    height: 3px;
+    left: -4px;
+    width: 22px;
+  }
+  .sp-dragger {
+    background: transparent;
+    box-shadow: 0 0 0 1px #111;
+  }
+  .sp-button-container {
+    float: none;
+    width: 100%;
+    position: relative;
+    text-align: right;
+
+    .sp-choose,
+    .sp-choose:hover,
+    .sp-choose:active {
+      background: var(--gjs-main-dark-color);
+      border-color: var(--gjs-main-dark-color);
+      color: var(--gjs-font-color);
+      text-shadow: none;
+      box-shadow: none;
+      padding: 3px 5px;
+    }
+  }
+  .sp-palette-container {
+    border: none;
+    float: none;
+    margin: 0;
+    padding: 5px 10px 0;
+  }
+  .sp-palette .sp-thumb-el,
+  .sp-palette .sp-thumb-el:hover {
+    border: 1px solid rgba(0, 0, 0, 0.9);
+  }
+
+  .sp-palette .sp-thumb-el:hover,
+  .sp-palette .sp-thumb-el.sp-thumb-active {
+    border-color: rgba(0, 0, 0, 0.9);
+  }
+}
diff --git a/packages/core/src/styles/scss/_gjs_status.scss b/packages/core/src/styles/scss/_gjs_status.scss
index 763f548c1..5a1ae7334 100644
--- a/packages/core/src/styles/scss/_gjs_status.scss
+++ b/packages/core/src/styles/scss/_gjs_status.scss
@@ -1,10 +1,11 @@
-$gjs-is-prefix: '.#{$app-prefix}is__';
+@use 'gjs_main_mixins';
+@use 'gjs_vars';
 
 @function gjs-is($name) {
-  @return '#{$gjs-is-prefix}#{$name}';
+  @return '#{gjs_main_mixins.$gjs-is-prefix}#{$name}';
 }
 
-#{$gjs-is-prefix} {
+#{gjs_main_mixins.$gjs-is-prefix} {
   &grab,
   &grab * {
     cursor: grab !important;
@@ -12,7 +13,7 @@ $gjs-is-prefix: '.#{$app-prefix}is__';
 
   &grabbing,
   &grabbing * {
-    @include user-select(none);
+    @include gjs_main_mixins.user-select(none);
     cursor: grabbing !important;
   }
 }
diff --git a/packages/core/src/styles/scss/_gjs_style_manager.scss b/packages/core/src/styles/scss/_gjs_style_manager.scss
index f8354ed91..1fcb0f09b 100644
--- a/packages/core/src/styles/scss/_gjs_style_manager.scss
+++ b/packages/core/src/styles/scss/_gjs_style_manager.scss
@@ -1,4 +1,8 @@
-.#{$sm-prefix} {
+@use 'gjs_main_mixins';
+@use 'gjs_vars';
+@use 'gjs_category_general';
+
+.#{gjs_vars.$sm-prefix} {
   &clear {
     cursor: pointer;
     width: 14px;
@@ -19,7 +23,7 @@
     text-align: left;
 
     &-title {
-      @extend .#{$app-prefix}category-title;
+      @extend .#{gjs_vars.$app-prefix}category-title;
       display: flex;
       align-items: center;
     }
@@ -35,10 +39,10 @@
       margin-left: 5px;
     }
 
-    &.#{$sm-prefix}open {
-      @extend .#{$app-prefix}category-open;
+    &.#{gjs_vars.$sm-prefix}open {
+      @extend .#{gjs_vars.$app-prefix}category-open;
 
-      .#{$sm-prefix}sector-caret {
+      .#{gjs_vars.$sm-prefix}sector-caret {
         transform: none;
       }
     }
@@ -62,7 +66,7 @@
   }
 }
 
-.#{$sm-prefix}close-btn {
+.#{gjs_vars.$sm-prefix}close-btn {
   display: block;
   font-size: 23px;
   position: absolute;
@@ -70,23 +74,23 @@
   right: 5px;
   top: 0;
 
-  @include opacity(0.7);
+  @include gjs_main_mixins.opacity(0.7);
 
   &:hover {
-    @include opacity(0.9);
+    @include gjs_main_mixins.opacity(0.9);
   }
 }
 
 /* ------------------Field-------------------- */
 
-.#{$sm-prefix}field {
+.#{gjs_vars.$sm-prefix}field {
   width: 100%;
   position: relative;
 
   input,
   select {
     background-color: transparent;
-    color: $mainLhlColor;
+    color: gjs_vars.$mainLhlColor;
     border: none;
     width: 100%;
   }
@@ -99,7 +103,7 @@
     position: relative;
     z-index: 1;
 
-    @include appearance(none);
+    @include gjs_main_mixins.appearance(none);
 
     &::-ms-expand {
       display: none;
@@ -116,7 +120,7 @@
     outline: none;
   }
 
-  .#{$sm-prefix}unit {
+  .#{gjs_vars.$sm-prefix}unit {
     position: absolute;
     right: 10px;
     top: 3px;
@@ -125,9 +129,9 @@
     cursor: pointer;
   }
 
-  .#{$clm-prefix}sel-arrow,
-  .#{$sm-prefix}int-arrows,
-  .#{$sm-prefix}sel-arrow {
+  .#{gjs_vars.$clm-prefix}sel-arrow,
+  .#{gjs_vars.$sm-prefix}int-arrows,
+  .#{gjs_vars.$sm-prefix}sel-arrow {
     height: 100%;
     width: 9px;
     position: absolute;
@@ -136,14 +140,14 @@
     cursor: ns-resize;
   }
 
-  .#{$sm-prefix}sel-arrow {
+  .#{gjs_vars.$sm-prefix}sel-arrow {
     cursor: pointer;
   }
 
-  .#{$clm-prefix}d-s-arrow,
-  .#{$sm-prefix}d-arrow,
-  .#{$sm-prefix}d-s-arrow,
-  .#{$sm-prefix}u-arrow {
+  .#{gjs_vars.$clm-prefix}d-s-arrow,
+  .#{gjs_vars.$sm-prefix}d-arrow,
+  .#{gjs_vars.$sm-prefix}d-s-arrow,
+  .#{gjs_vars.$sm-prefix}u-arrow {
     position: absolute;
     height: 0;
     width: 0;
@@ -152,28 +156,28 @@
     cursor: pointer;
   }
 
-  .#{$sm-prefix}u-arrow {
+  .#{gjs_vars.$sm-prefix}u-arrow {
     border-bottom: 4px solid var(--gjs-secondary-light-color);
     top: 4px;
   }
 
-  .#{$clm-prefix}d-s-arrow,
-  .#{$sm-prefix}d-arrow,
-  .#{$sm-prefix}d-s-arrow {
+  .#{gjs_vars.$clm-prefix}d-s-arrow,
+  .#{gjs_vars.$sm-prefix}d-arrow,
+  .#{gjs_vars.$sm-prefix}d-s-arrow {
     border-top: 4px solid var(--gjs-secondary-light-color);
     bottom: 4px;
   }
 
-  .#{$clm-prefix}d-s-arrow,
-  .#{$sm-prefix}d-s-arrow {
+  .#{gjs_vars.$clm-prefix}d-s-arrow,
+  .#{gjs_vars.$sm-prefix}d-s-arrow {
     bottom: 7px;
   }
 
-  &.#{$sm-prefix}color,
-  &.#{$sm-prefix}input,
-  &.#{$sm-prefix}integer,
-  &.#{$sm-prefix}list,
-  &.#{$sm-prefix}select {
+  &.#{gjs_vars.$sm-prefix}color,
+  &.#{gjs_vars.$sm-prefix}input,
+  &.#{gjs_vars.$sm-prefix}integer,
+  &.#{gjs_vars.$sm-prefix}list,
+  &.#{gjs_vars.$sm-prefix}select {
     background-color: var(--gjs-main-dark-color);
     border: 1px solid rgba(0, 0, 0, 0.1);
     box-shadow: 1px 1px 0 var(--gjs-main-light-color);
@@ -183,28 +187,28 @@
     padding: 0 5px;
   }
 
-  &.#{$sm-prefix}composite {
+  &.#{gjs_vars.$sm-prefix}composite {
     border-radius: 2px;
   }
 
-  &.#{$sm-prefix}select {
+  &.#{gjs_vars.$sm-prefix}select {
     padding: 0;
   }
 
-  &.#{$sm-prefix}select select {
+  &.#{gjs_vars.$sm-prefix}select select {
     height: 20px;
   }
 
-  &.#{$sm-prefix}select option {
+  &.#{gjs_vars.$sm-prefix}select option {
     padding: 3px 0;
   }
 
-  &.#{$sm-prefix}composite {
+  &.#{gjs_vars.$sm-prefix}composite {
     background-color: var(--gjs-secondary-dark-color);
     border: 1px solid rgba(0, 0, 0, 0.25);
   }
 
-  &.#{$sm-prefix}list {
+  &.#{gjs_vars.$sm-prefix}list {
     width: auto;
     padding: 0;
     overflow: hidden;
@@ -220,11 +224,11 @@
       display: block;
     }
 
-    .#{$sm-prefix}radio:checked + label {
+    .#{gjs_vars.$sm-prefix}radio:checked + label {
       background-color: rgba(255, 255, 255, 0.2);
     }
 
-    .#{$sm-prefix}icon {
+    .#{gjs_vars.$sm-prefix}icon {
       background-repeat: no-repeat;
       background-position: center;
       text-shadow: none;
@@ -233,7 +237,7 @@
     }
   }
 
-  &.#{$sm-prefix}integer select {
+  &.#{gjs_vars.$sm-prefix}integer select {
     width: auto;
     padding: 0;
   }
@@ -241,7 +245,7 @@
 
 /* ------------------END Field-------------------- */
 
-.#{$sm-prefix}list .#{$sm-prefix}el {
+.#{gjs_vars.$sm-prefix}list .#{gjs_vars.$sm-prefix}el {
   float: left;
   border-left: 1px solid var(--gjs-main-dark-color);
 
@@ -256,15 +260,15 @@
 
 /* ------------------Property-------------------- */
 
-.#{$sm-prefix} {
+.#{gjs_vars.$sm-prefix} {
   &slider {
-    .#{$app-prefix}field-integer {
+    .#{gjs_vars.$app-prefix}field-integer {
       flex: 1 1 65px;
     }
   }
 }
 
-.#{$sm-prefix}property {
+.#{gjs_vars.$sm-prefix}property {
   box-sizing: border-box;
   float: left;
   width: 50%;
@@ -272,21 +276,21 @@
   padding: 0 5px;
 
   &--full,
-  &.#{$sm-prefix}composite,
-  &.#{$sm-prefix}file,
-  &.#{$sm-prefix}list,
-  &.#{$sm-prefix}stack,
-  &.#{$sm-prefix}slider,
-  &.#{$sm-prefix}color {
+  &.#{gjs_vars.$sm-prefix}composite,
+  &.#{gjs_vars.$sm-prefix}file,
+  &.#{gjs_vars.$sm-prefix}list,
+  &.#{gjs_vars.$sm-prefix}stack,
+  &.#{gjs_vars.$sm-prefix}slider,
+  &.#{gjs_vars.$sm-prefix}color {
     width: 100%;
   }
 
-  .#{$sm-prefix}btn {
-    background-color: lighten-color(var(--gjs-main-dark-color), 13%);
+  .#{gjs_vars.$sm-prefix}btn {
+    background-color: gjs_main_mixins.lighten-color(var(--gjs-main-dark-color), 13%);
     border-radius: 2px;
     box-shadow:
-      1px 1px 0 lighten-color(var(--gjs-main-dark-color), 2%),
-      1px 1px 0 lighten-color(var(--gjs-main-dark-color), 17%) inset;
+      1px 1px 0 gjs_main_mixins.lighten-color(var(--gjs-main-dark-color), 2%),
+      1px 1px 0 gjs_main_mixins.lighten-color(var(--gjs-main-dark-color), 17%) inset;
     padding: 5px;
     position: relative;
     text-align: center;
@@ -298,16 +302,16 @@
     text-shadow: -1px -1px 0 var(--gjs-main-dark-color);
     border: none;
 
-    @include opacity(0.85);
+    @include gjs_main_mixins.opacity(0.85);
   }
 
-  .#{$sm-prefix}btn-c {
+  .#{gjs_vars.$sm-prefix}btn-c {
     box-sizing: border-box;
     float: left;
     width: 100%;
   }
 
-  &__text-shadow .#{$sm-prefix}layer-preview-cnt::after {
+  &__text-shadow .#{gjs_vars.$sm-prefix}layer-preview-cnt::after {
     color: #000;
     content: 'T';
     font-weight: 900;
@@ -316,13 +320,13 @@
   }
 }
 
-.#{$sm-prefix}preview-file {
+.#{gjs_vars.$sm-prefix}preview-file {
   background-color: var(--gjs-light-border);
   border-radius: 2px;
   margin-top: 5px;
   position: relative;
   overflow: hidden;
-  border: 1px solid darken-color(var(--gjs-light-border), 1%);
+  border: 1px solid gjs_main_mixins.darken-color(var(--gjs-light-border), 1%);
   padding: 3px 20px;
 
   &-cnt {
@@ -333,7 +337,7 @@
   }
 
   &-close {
-    @extend .#{$sm-prefix}close-btn;
+    @extend .#{gjs_vars.$sm-prefix}close-btn;
 
     top: -5px;
     width: 14px;
@@ -343,36 +347,36 @@
 
 // Layers
 
-.#{$sm-prefix}layers {
+.#{gjs_vars.$sm-prefix}layers {
   margin-top: 5px;
   padding: 1px 3px;
   min-height: 30px;
 }
 
-.#{$sm-prefix}layer {
+.#{gjs_vars.$sm-prefix}layer {
   background-color: rgba(255, 255, 255, 0.055);
   border-radius: 2px;
   margin: 2px 0;
   padding: 7px;
   position: relative;
 
-  &.#{$sm-prefix}active {
+  &.#{gjs_vars.$sm-prefix}active {
     background-color: rgba(255, 255, 255, 0.12);
   }
 
-  .#{$sm-prefix}label-wrp {
+  .#{gjs_vars.$sm-prefix}label-wrp {
     display: flex;
     align-items: center;
   }
 
-  ##{$sm-prefix}move {
+  ##{gjs_vars.$sm-prefix}move {
     height: 14px;
     width: 14px;
     min-width: 14px;
     cursor: grab;
   }
 
-  ##{$sm-prefix}label {
+  ##{gjs_vars.$sm-prefix}label {
     flex-grow: 1;
     overflow: hidden;
     white-space: nowrap;
@@ -398,29 +402,29 @@
     }
   }
 
-  ##{$sm-prefix}close-layer {
+  ##{gjs_vars.$sm-prefix}close-layer {
     display: block;
     cursor: pointer;
     height: 14px;
     width: 14px;
     min-width: 14px;
 
-    @include opacity(0.5);
+    @include gjs_main_mixins.opacity(0.5);
 
     &:hover {
-      @include opacity(0.8);
+      @include gjs_main_mixins.opacity(0.8);
     }
   }
 }
 
 /* ------------------END Property-------------------- */
 
-.#{$sm-prefix}stack .#{$sm-prefix}properties {
+.#{gjs_vars.$sm-prefix}stack .#{gjs_vars.$sm-prefix}properties {
   padding: 5px 0 0;
 }
 
-.#{$sm-prefix}stack ##{$sm-prefix}add {
-  @extend .#{$app-prefix}color-main;
+.#{gjs_vars.$sm-prefix}stack ##{gjs_vars.$sm-prefix}add {
+  @extend .#{gjs_vars.$app-prefix}color-main;
 
   background: none;
   border: none;
@@ -435,12 +439,12 @@
   height: 18px;
 
   &:hover {
-    @include opacity(1);
+    @include gjs_main_mixins.opacity(1);
   }
 }
 
-.#{$sm-prefix}colorp-c {
-  @extend .#{$app-prefix}bg-main;
+.#{gjs_vars.$sm-prefix}colorp-c {
+  @extend .#{gjs_vars.$app-prefix}bg-main;
 
   height: 100%;
   width: 20px;
@@ -451,14 +455,16 @@
   border-radius: 2px;
   padding: 2px;
 
-  .#{$app-prefix}checker-bg {
+  // adding reference to .gjs-field-colorp-c to match rendered CSS before removing the use of @imports
+  .#{gjs_vars.$app-prefix}field-colorp-c,
+  .#{gjs_vars.$app-prefix}checker-bg {
     height: 100%;
     width: 100%;
     border-radius: 1px;
   }
 }
 
-.#{$sm-prefix}color-picker {
+.#{gjs_vars.$sm-prefix}color-picker {
   background-color: var(--gjs-font-color);
   cursor: pointer;
   height: 16px;
@@ -468,7 +474,7 @@
   border-radius: 1px;
 }
 
-.#{$sm-prefix}btn-upload ##{$sm-prefix}upload {
+.#{gjs_vars.$sm-prefix}btn-upload ##{gjs_vars.$sm-prefix}upload {
   left: 0;
   top: 0;
   position: absolute;
@@ -477,12 +483,12 @@
   cursor: pointer;
 }
 
-.#{$sm-prefix}btn-upload ##{$sm-prefix}label {
+.#{gjs_vars.$sm-prefix}btn-upload ##{gjs_vars.$sm-prefix}label {
   padding: 2px 0;
 }
 
-.#{$sm-prefix}layer > ##{$sm-prefix}move {
-  @include opacity(0.7);
+.#{gjs_vars.$sm-prefix}layer > ##{gjs_vars.$sm-prefix}move {
+  @include gjs_main_mixins.opacity(0.7);
 
   cursor: move;
   font-size: 12px;
@@ -490,6 +496,6 @@
   margin: 0 5px 0 0;
 
   &:hover {
-    @include opacity(0.9);
+    @include gjs_main_mixins.opacity(0.9);
   }
 }
diff --git a/packages/core/src/styles/scss/_gjs_traits.scss b/packages/core/src/styles/scss/_gjs_traits.scss
index 60d59a265..a4fd805e9 100644
--- a/packages/core/src/styles/scss/_gjs_traits.scss
+++ b/packages/core/src/styles/scss/_gjs_traits.scss
@@ -1,4 +1,7 @@
-.#{$app-prefix} {
+@use 'gjs_vars';
+@use 'gjs_category_general';
+
+.#{gjs_vars.$app-prefix} {
   &traits-label {
     border-bottom: 1px solid var(--gjs-main-dark-color);
     font-weight: lighter;
@@ -34,26 +37,26 @@
   &trait-category {
     width: 100%;
 
-    &.#{$app-prefix}open {
-      @extend .#{$app-prefix}category-open;
+    &.#{gjs_vars.$app-prefix}open {
+      @extend .#{gjs_vars.$app-prefix}category-open;
     }
 
-    .#{$app-prefix}title {
-      @extend .#{$app-prefix}category-title;
+    .#{gjs_vars.$app-prefix}title {
+      @extend .#{gjs_vars.$app-prefix}category-title;
     }
 
-    .#{$app-prefix}caret-icon {
+    .#{gjs_vars.$app-prefix}caret-icon {
       margin-right: 5px;
     }
   }
 }
 
-.#{$trt-prefix}header {
+.#{gjs_vars.$trt-prefix}header {
   font-weight: lighter;
   padding: 10px;
 }
 
-.#{$trt-prefix}trait {
+.#{gjs_vars.$trt-prefix}trait {
   display: flex;
   justify-content: flex-start;
   padding: 5px 10px;
@@ -66,7 +69,7 @@
     font-size: var(--gjs-font-size);
   }
 
-  .#{$app-prefix}label {
+  .#{gjs_vars.$app-prefix}label {
     text-align: left;
     text-overflow: ellipsis;
     overflow: hidden;
diff --git a/packages/core/src/styles/scss/_gjs_variables.scss b/packages/core/src/styles/scss/_gjs_vars.scss
similarity index 98%
rename from packages/core/src/styles/scss/_gjs_variables.scss
rename to packages/core/src/styles/scss/_gjs_vars.scss
index 47f10462c..25755f0d7 100644
--- a/packages/core/src/styles/scss/_gjs_variables.scss
+++ b/packages/core/src/styles/scss/_gjs_vars.scss
@@ -70,3 +70,5 @@ $fontSize: 0.75rem !default;
 
 /* Tools */
 $placeholderColor: var(--gjs-color-green) !default;
+
+$prefix: $app-prefix;
diff --git a/packages/core/src/styles/scss/main.scss b/packages/core/src/styles/scss/main.scss
index ea51ee427..ac767c625 100644
--- a/packages/core/src/styles/scss/main.scss
+++ b/packages/core/src/styles/scss/main.scss
@@ -1,53 +1,38 @@
 /* stylelint-disable */
-@import 'codemirror/lib/codemirror';
-@import 'codemirror/theme/hopscotch';
-
-@import 'spectrum.scss';
-@import 'gjs_variables.scss';
-
-@function darken-color($color, $percentage) {
-  @return color-mix(in srgb, $color, black $percentage);
-}
-
-@function lighten-color($color, $percentage) {
-  @return color-mix(in srgb, $color, white $percentage);
-}
-
-@mixin user-select($v) {
-  -moz-user-select: $v;
-  -khtml-user-select: $v;
-  -webkit-user-select: $v;
-  -ms-user-select: $v;
-  -o-user-select: $v;
-  user-select: $v;
-}
-
-@mixin opacity($v) {
-  opacity: $v;
-  filter: alpha(opacity=$v * 100);
-}
-
-@mixin appearance($v) {
-  -webkit-appearance: $v;
-  -moz-appearance: $v;
-  appearance: $v;
-}
-
-@mixin transform($v) {
-  -ms-transform: $v;
-  -webkit-transform: $v;
-  -moz-transform: $v;
-  transform: $v;
-}
-
-$prefix: $app-prefix;
-
-@import 'gjs_status';
+@use 'sass:meta';
+@use 'codemirror/lib/codemirror';
+@use 'codemirror/theme/hopscotch';
+
+@use 'gjs_vars.scss';
+@use 'gjs_main_mixins';
+@use 'gjs_status';
+
+@use 'gjs_root';
+@use 'gjs_traits';
+@use 'gjs_canvas';
+@use 'gjs_commands';
+@use 'gjs_panels';
+@use 'gjs_inputs';
+@use 'gjs_devices';
+@use 'gjs_style_manager';
+@use 'gjs_category_general';
+@use 'gjs_blocks';
+@use 'gjs_layers';
+@use 'gjs_selectors';
+@use 'gjs_modal';
+@use 'gjs_assets';
+@use 'gjs_file_uploader';
+@use 'gjs_code_manager';
+@use 'gjs_rte';
+@use 'gjs_spectrum';
+
+// spectrum.scss is now called from _gjs_spectrum.scss
+//@use 'spectrum.scss';
 
 $colorsAll: (one, var(--gjs-primary-color)), (two, var(--gjs-secondary-color)), (three, var(--gjs-tertiary-color)),
   (four, var(--gjs-quaternary-color)), (danger, var(--gjs-color-red));
 
-.#{$prefix} {
+.#{gjs_vars.$prefix} {
   @each $cnum, $ccol in $colorsAll {
     &#{$cnum} {
       &-bg {
@@ -65,70 +50,14 @@ $colorsAll: (one, var(--gjs-primary-color)), (two, var(--gjs-secondary-color)),
   }
 }
 
-.#{$app-prefix}bg {
-  &-main {
-    background-color: var(--gjs-main-color);
-  }
-}
-
-.#{$app-prefix}color {
-  &-main {
-    color: var(--gjs-font-color);
-    fill: var(--gjs-font-color);
-  }
-
-  &-active {
-    color: var(--gjs-font-color-active);
-    fill: var(--gjs-font-color-active);
-  }
-
-  &-warn {
-    color: var(--gjs-color-warn);
-    fill: var(--gjs-color-warn);
-  }
-
-  &-hl {
-    color: var(--gjs-color-highlight);
-    fill: var(--gjs-color-highlight);
-  }
-}
-
-.#{$app-prefix}invis-invis,
-.#{$app-prefix}no-app {
-  background-color: transparent;
-  border: none;
-  color: inherit;
-}
-
-.#{$app-prefix}no-app {
-  height: 10px;
-}
-
-.opac50 {
-  @include opacity(0.5);
-}
-
-.#{$app-prefix}checker-bg,
-.checker-bg {
-  background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAIAAADZF8uwAAAAGUlEQVQYV2M4gwH+YwCGIasIUwhT25BVBADtzYNYrHvv4gAAAABJRU5ErkJggg==');
-}
-
-.#{$app-prefix}no-user-select {
-  @include user-select(none);
-}
-
-.#{$app-prefix}no-pointer-events {
-  pointer-events: none;
-}
-
-.#{$app-prefix}bdrag {
+.#{gjs_vars.$app-prefix}bdrag {
   pointer-events: none !important;
   position: absolute !important;
   z-index: 10 !important;
   width: auto;
 }
 
-.#{$app-prefix}drag-helper {
+.#{gjs_vars.$app-prefix}drag-helper {
   background-color: var(--gjs-color-blue) !important;
   pointer-events: none !important;
   position: absolute !important;
@@ -141,21 +70,21 @@ $colorsAll: (one, var(--gjs-primary-color)), (two, var(--gjs-secondary-color)),
   outline: none !important;
 }
 
-.#{$app-prefix}grabbing,
-.#{$app-prefix}grabbing * {
-  @extend .#{$app-prefix}no-user-select;
+.#{gjs_vars.$app-prefix}grabbing,
+.#{gjs_vars.$app-prefix}grabbing * {
+  @extend .#{gjs_vars.$app-prefix}no-user-select;
 
   cursor: grabbing !important;
   cursor: -webkit-grabbing !important;
 }
 
-.#{$app-prefix}grabbing {
+.#{gjs_vars.$app-prefix}grabbing {
   overflow: hidden;
 }
 
-.#{$app-prefix}off-prv {
-  @extend .#{$app-prefix}color-main;
-  @extend .#{$app-prefix}bg-main;
+.#{gjs_vars.$app-prefix}off-prv {
+  @extend .#{gjs_vars.$app-prefix}color-main;
+  @extend .#{gjs_vars.$app-prefix}bg-main;
   position: relative;
   z-index: 10;
   padding: 5px;
@@ -163,15 +92,15 @@ $colorsAll: (one, var(--gjs-primary-color)), (two, var(--gjs-secondary-color)),
 }
 
 // Custom scrollbars for Chrome
-.#{$app-prefix}editor-cont ::-webkit-scrollbar-track {
+.#{gjs_vars.$app-prefix}editor-cont ::-webkit-scrollbar-track {
   background: var(--gjs-secondary-dark-color);
 }
 
-.#{$app-prefix}editor-cont ::-webkit-scrollbar-thumb {
+.#{gjs_vars.$app-prefix}editor-cont ::-webkit-scrollbar-thumb {
   background-color: rgba(255, 255, 255, 0.2);
 }
 
-.#{$app-prefix}editor-cont ::-webkit-scrollbar {
+.#{gjs_vars.$app-prefix}editor-cont ::-webkit-scrollbar {
   width: 8px;
 }
 
@@ -182,58 +111,14 @@ $colorsAll: (one, var(--gjs-primary-color)), (two, var(--gjs-secondary-color)),
 //   initial-value: #{$inputPadding};
 // }
 
-:root {
-  --gjs-main-color: #{$mainColor};
-  --gjs-primary-color: #{$primaryColor};
-  --gjs-secondary-color: #{$secondaryColor};
-  --gjs-tertiary-color: #{$tertiaryColor};
-  --gjs-quaternary-color: #{$quaternaryColor};
-  --gjs-font-color: #{$fontColor};
-  --gjs-font-color-active: #{$fontColorActive};
-  --gjs-main-dark-color: #{$mainDkColor};
-  --gjs-secondary-dark-color: #{$mainDklColor};
-  --gjs-main-light-color: #{$mainLhColor};
-  --gjs-secondary-light-color: #{$mainLhlColor};
-  --gjs-soft-light-color: #{$softLhColor};
-  --gjs-color-blue: #{$colorBlue};
-  --gjs-color-red: #{$colorRed};
-  --gjs-color-yellow: #{$colorYell};
-  --gjs-color-green: #{$colorGreen};
-  --gjs-left-width: #{$leftWidth};
-  --gjs-color-highlight: #{$colorHighlight};
-  --gjs-color-warn: #{$colorWarn};
-  --gjs-handle-margin: #{$hndlMargin};
-  --gjs-light-border: #{$lightBorder};
-  --gjs-arrow-color: #{$arrowColor};
-  --gjs-dark-text-shadow: #{$darkTextShadow};
-  --gjs-color-input-padding: #{$colorpSize};
-  --gjs-input-padding: #{$inputPadding}; // Has to be a single value
-  --gjs-padding-elem-classmanager: #{$paddElClm};
-  --gjs-upload-padding: #{$uploadPadding};
-  --gjs-animation-duration: #{$animSpeed};
-  --gjs-main-font: #{$mainFont};
-  --gjs-font-size: #{$fontSize};
-  --gjs-placeholder-background-color: #{$placeholderColor};
-  --gjs-canvas-top: #{$canvasTop};
-  --gjs-flex-item-gap: 5px;
-}
-
-.clear {
-  clear: both;
-}
-
-.no-select {
-  @include user-select(none);
-}
-
-.#{$app-prefix} {
+.#{gjs_vars.$app-prefix} {
   &no-touch-actions {
     touch-action: none;
   }
 
   &disabled {
-    @include user-select(none);
-    @include opacity(0.5);
+    @include gjs_main_mixins.user-select(none);
+    @include gjs_main_mixins.opacity(0.5);
   }
 
   &editor {
@@ -245,311 +130,17 @@ $colorsAll: (one, var(--gjs-primary-color)), (two, var(--gjs-secondary-color)),
   }
 }
 
-.#{$app-prefix}freezed,
-.#{$nv-prefix}freezed {
-  @include opacity(0.5);
+.#{gjs_vars.$app-prefix}freezed,
+.#{gjs_vars.$nv-prefix}freezed {
+  @include gjs_main_mixins.opacity(0.5);
   pointer-events: none;
 }
 
-@import 'gjs_traits';
-@import 'gjs_canvas';
-
-/********* COMMANDS **********/
-
-.no-dots,
-.ui-resizable-handle {
-  border: none !important;
-  margin: 0 !important;
-  outline: none !important;
-}
-
-.#{$com-prefix}dashed * {
-  outline: 1px dashed #888;
-  outline-offset: -2px;
-  box-sizing: border-box;
-}
-
-.#{$com-prefix}no-select,
-.#{$com-prefix}no-select img {
-  @extend .no-select;
-}
-
-.#{$com-prefix}badge,
-.#{$app-prefix}badge {
-  pointer-events: none;
-  background-color: var(--gjs-color-blue);
-  color: #fff;
-  padding: 2px 5px;
-  position: absolute;
-  z-index: 1;
-  font-size: 12px;
-  outline: none;
-  display: none;
-}
-.#{$app-prefix}badge-warning {
-  background-color: var(--gjs-color-yellow);
-}
-.#{$app-prefix}placeholder,
-.#{$com-prefix}placeholder,
-.#{$nv-prefix}placeholder {
-  position: absolute;
-  z-index: 10;
-  pointer-events: none;
-  display: none;
-}
-
-.#{$app-prefix}placeholder,
-.#{$nv-prefix}placeholder {
-  border-style: solid !important;
-  outline: none;
-  box-sizing: border-box;
-  transition:
-    top var(--gjs-animation-duration),
-    left var(--gjs-animation-duration),
-    width var(--gjs-animation-duration),
-    height var(--gjs-animation-duration);
-}
-
-.#{$app-prefix}placeholder.horizontal,
-.#{$com-prefix}placeholder.horizontal,
-.#{$nv-prefix}placeholder.horizontal {
-  border-color: transparent var(--gjs-placeholder-background-color);
-  border-width: 3px 5px;
-  margin: -3px 0 0;
-}
-
-.#{$app-prefix}placeholder.vertical,
-.#{$com-prefix}placeholder.vertical,
-.#{$nv-prefix}placeholder.vertical {
-  border-color: var(--gjs-placeholder-background-color) transparent;
-  border-width: 5px 3px;
-  margin: 0 0 0 -3px;
-}
-
-.#{$app-prefix}placeholder-int,
-.#{$com-prefix}placeholder-int,
-.#{$nv-prefix}placeholder-int {
-  background-color: var(--gjs-placeholder-background-color);
-  box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);
-  height: 100%;
-  width: 100%;
-  pointer-events: none;
-  padding: 1.5px;
-  outline: none;
-}
-
-@import 'gjs_panels';
-
-/***********  Components *************/
-
-@import 'gjs_inputs';
-
-@import 'gjs_devices';
-
-/********* General **********/
-
-.#{$app-prefix}category-open {
-  border-bottom: 1px solid rgba(0, 0, 0, 0.25);
-}
-
-.#{$app-prefix}category-title {
-  @extend .no-select;
-
-  font-weight: lighter;
-  background-color: var(--gjs-secondary-dark-color);
-  letter-spacing: 1px;
-  padding: 9px 10px 9px 20px;
-  border-bottom: 1px solid rgba(0, 0, 0, 0.25);
-  text-align: left;
-  position: relative;
-  cursor: pointer;
-}
-
-@import 'gjs_style_manager';
-@import 'gjs_blocks';
-@import 'gjs_layers';
-@import 'gjs_selectors';
-@import 'gjs_modal';
-@import 'gjs_assets';
-
-/********* File uploader **********/
-
-.#{$am-prefix}file-uploader {
-  width: 55%;
-  float: left;
-
-  > form {
-    background-color: var(--gjs-secondary-dark-color);
-    border: 2px dashed;
-    border-radius: 3px;
-    position: relative;
-    text-align: center;
-    margin-bottom: 15px;
-
-    &.#{$am-prefix}hover {
-      border: 2px solid var(--gjs-color-green);
-      color: lighten-color(var(--gjs-color-green), 5%);
-    }
-
-    &.#{$am-prefix}disabled {
-      border-color: red;
-    }
-
-    ##{$am-prefix}uploadFile {
-      @include opacity(0);
-      padding: var(--gjs-upload-padding);
-      width: 100%;
-      box-sizing: border-box;
-    }
-  }
-
-  ##{$am-prefix}title {
-    position: absolute;
-    padding: var(--gjs-upload-padding);
-    width: 100%;
-  }
-}
-
-/********* Code Manager **********/
-
-.#{$cm-prefix}editor-c {
-  float: left;
-  box-sizing: border-box;
-  width: 50%;
-
-  .CodeMirror {
-    height: 450px;
-  }
-}
-.#{$cm-prefix}editor {
-  font-size: 12px;
-
-  &##{$cm-prefix}htmlmixed {
-    padding-right: 10px;
-    border-right: 1px solid var(--gjs-main-dark-color);
-    ##{$cm-prefix}title {
-      color: #a97d44;
-    }
-  }
-  &##{$cm-prefix}css {
-    padding-left: 10px;
-    ##{$cm-prefix}title {
-      color: #ddca7e;
-    }
-  }
-  ##{$cm-prefix}title {
-    background-color: var(--gjs-main-dark-color);
-    font-size: 12px;
-    padding: 5px 10px 3px;
-    text-align: right;
-  }
-}
-
-/*************RTE****************/
-
-@import 'gjs_rte';
-
-/********* Spectrum **********/
-
-.#{$app-prefix}editor-sp {
-  border: 1px solid var(--gjs-main-dark-color);
-  box-shadow: 0 0 7px var(--gjs-main-dark-color);
-  border-radius: 3px;
-}
-
-.#{$app-prefix}editor-sp {
-  .sp-hue,
-  .sp-slider {
-    cursor: row-resize;
-  }
-  .sp-color,
-  .sp-dragger {
-    cursor: crosshair;
-  }
-  .sp-alpha-inner,
-  .sp-alpha-handle {
-    cursor: col-resize;
-  }
-  .sp-hue {
-    left: 90%;
-  }
-  .sp-color {
-    right: 15%;
-  }
-  .sp-picker-container {
-    border: none;
-  }
-  .colpick_dark .colpick_color {
-    outline: 1px solid var(--gjs-main-dark-color);
-  }
-  .sp-cancel,
-  .sp-cancel:hover {
-    bottom: -8px;
-    color: #777 !important;
-    font-size: 25px;
-    left: 0;
-    position: absolute;
-    text-decoration: none;
-  }
-  .sp-alpha-handle {
-    background-color: #ccc;
-    border: 1px solid #555;
-    width: 4px;
-  }
-  .sp-color,
-  .sp-hue {
-    border: 1px solid #333333;
-  }
-  .sp-slider {
-    background-color: #ccc;
-    border: 1px solid #555;
-    height: 3px;
-    left: -4px;
-    width: 22px;
-  }
-  .sp-dragger {
-    background: transparent;
-    box-shadow: 0 0 0 1px #111;
-  }
-  .sp-button-container {
-    float: none;
-    width: 100%;
-    position: relative;
-    text-align: right;
-
-    .sp-choose,
-    .sp-choose:hover,
-    .sp-choose:active {
-      background: var(--gjs-main-dark-color);
-      border-color: var(--gjs-main-dark-color);
-      color: var(--gjs-font-color);
-      text-shadow: none;
-      box-shadow: none;
-      padding: 3px 5px;
-    }
-  }
-  .sp-palette-container {
-    border: none;
-    float: none;
-    margin: 0;
-    padding: 5px 10px 0;
-  }
-  .sp-palette .sp-thumb-el,
-  .sp-palette .sp-thumb-el:hover {
-    border: 1px solid rgba(0, 0, 0, 0.9);
-  }
-
-  .sp-palette .sp-thumb-el:hover,
-  .sp-palette .sp-thumb-el.sp-thumb-active {
-    border-color: rgba(0, 0, 0, 0.9);
-  }
-}
-
-.#{$app-prefix}hidden {
+.#{gjs_vars.$app-prefix}hidden {
   display: none;
 }
 
-@keyframes #{$app-prefix}slide-down {
+@keyframes #{gjs_vars.$app-prefix}slide-down {
   0% {
     transform: translate(0, -3rem);
     opacity: 0;
@@ -560,7 +151,7 @@ $colorsAll: (one, var(--gjs-primary-color)), (two, var(--gjs-secondary-color)),
   }
 }
 
-@keyframes #{$app-prefix}slide-up {
+@keyframes #{gjs_vars.$app-prefix}slide-up {
   0% {
     transform: translate(0, 0);
     opacity: 1;