Use new pattern color system

src/block_manager/view/BlockView.js

@@ -53,8 +53,9 @@ module.exports = Backbone.View.extend({
 
   render() {
     const el = this.el;
-    const className = `${this.ppfx}block`;
-    el.className += ` ${className}`;
+    const pfx = this.ppfx;
+    const className = `${pfx}block`;
+    el.className += ` ${className} ${pfx}one-bg ${pfx}four-color-h`;
     el.innerHTML = `<div class="${className}-label">${this.model.get('label')}</div>`;
     return this;
   },

src/editor/view/EditorView.js

@@ -31,7 +31,7 @@ module.exports = Backbone.View.extend({
 
     el.append(model.get('Canvas').render());
     el.append(this.pn.render());
-    el.attr('class', `${pfx}editor`);
+    el.attr('class', `${pfx}editor ${pfx}one-bg ${pfx}two-color`);
     contEl.addClass(`${pfx}editor-cont`).empty().append(el);
 
     return this;

src/modal_dialog/view/ModalView.js

@@ -1,33 +1,35 @@
-var Backbone = require('backbone');
+module.exports = require('backbone').View.extend({
 
-module.exports = Backbone.View.extend({
-  template: _.template(`
-    <div class="<%= pfx %>dialog">
-      <div class="<%= pfx %>header">
-        <div class="<%= pfx %>title"><%= title %></div>
-        <div class="<%= pfx %>btn-close">&Cross;</div>
+  template({pfx, ppfx, content, title}) {
+    return `<div class="${pfx}dialog ${ppfx}one-bg">
+      <div class="${pfx}header">
+        <div class="${pfx}title">${title}</div>
+        <div class="${pfx}btn-close">&Cross;</div>
       </div>
-      <div class="<%= pfx %>content">
-        <div id="<%= pfx %>c"> <%= content %> </div>
+      <div class="${pfx}content">
+        <div id="${pfx}c">${content}</div>
         <div style="clear:both"></div>
       </div>
     </div>
-    <div class="<%= pfx %>backlayer"></div>
-    <div class="<%= pfx %>collector" style="display: none"></div>`),
+    <div class="${pfx}backlayer"></div>
+    <div class="${pfx}collector" style="display: none"></div>`;
+  },
 
   events: {},
 
   initialize(o) {
-    this.config = o.config || {};
-    this.pfx = this.config.stylePrefix || '';
-    this.listenTo(this.model, 'change:open', this.updateOpen);
-    this.listenTo(this.model, 'change:title', this.updateTitle);
-    this.listenTo(this.model, 'change:content', this.updateContent);
-    this.events['click .'+this.pfx+'btn-close']  = 'hide';
-
-    if(this.config.backdrop)
-      this.events['click .'+this.pfx+'backlayer'] = 'hide';
-
+    const model = this.model;
+    const config = o.config || {};
+    const pfx = config.stylePrefix || '';
+    const bkd = config.backdrop;
+    this.config = config;
+    this.pfx = pfx;
+    this.ppfx = config.pStylePrefix || '';
+    this.listenTo(model, 'change:open', this.updateOpen);
+    this.listenTo(model, 'change:title', this.updateTitle);
+    this.listenTo(model, 'change:content', this.updateContent);
+    this.events[`click .${pfx}btn-close`]  = 'hide';
+    bkd && (this.events[`click .${pfx}backlayer`] = 'hide');
     this.delegateEvents();
   },
 
@@ -116,10 +118,14 @@ module.exports = Backbone.View.extend({
   },
 
   render() {
-    var  obj = this.model.toJSON();
+    const el = this.$el;
+    const pfx = this.pfx;
+    const ppfx = this.ppfx;
+    const obj = this.model.toJSON();
     obj.pfx = this.pfx;
-    this.$el.html( this.template(obj) );
-    this.$el.attr('class', this.pfx + 'container');
+    obj.ppfx = this.ppfx;
+    el.html(this.template(obj));
+    el.attr('class', `${pfx}container`);
     this.updateOpen();
     return this;
   },

src/navigator/view/ItemView.js

@@ -18,7 +18,7 @@ module.exports = Backbone.View.extend({
     <i id="<%= prefix %>btn-eye" class="btn fa fa-eye <%= (visible ? '' : 'fa-eye-slash') %>" data-toggle-visible></i>
   <% } %>
 
-  <div class="<%= prefix %>title-c">
+  <div class="<%= prefix %>title-c <%= ppfx %>one-bg">
     <div class="<%= prefix %>title <%= addClass %>" style="padding-left: <%= 30 + level * 10 %>px" data-toggle-select>
       <div class="<%= prefix %>title-inn">
         <i id="<%= prefix %>caret" class="fa fa-chevron-right <%= caretCls %>" data-toggle-open></i>
@@ -298,7 +298,7 @@ module.exports = Backbone.View.extend({
     const el = this.$el;
     const level = this.level + 1;
 
-    el.html( this.template({
+    el.html(this.template({
       title: model.getName(),
       icon: model.getIcon(),
       addClass: (count ? '' : pfx+'no-chld'),

src/panels/view/ButtonView.js

@@ -10,14 +10,16 @@ module.exports = Backbone.View.extend({
     var cls = this.model.get('className');
     this.config = o.config || {};
     this.em = this.config.em || {};
-    this.pfx = this.config.stylePrefix || '';
+    const pfx = this.config.stylePrefix || '';
+    const ppfx = this.config.pStylePrefix || '';
+    this.pfx = pfx;
     this.ppfx = this.config.pStylePrefix || '';
-    this.id = this.pfx + this.model.get('id');
-    this.activeCls = this.pfx + 'active';
-    this.disableCls = this.pfx + 'active';
-    this.btnsVisCls = this.pfx + 'visible';
+    this.id = pfx + this.model.get('id');
+    this.activeCls = `${pfx}active ${ppfx}four-color`;
+    this.disableCls = pfx + 'active';
+    this.btnsVisCls = pfx + 'visible';
     this.parentM = o.parentM || null;
-    this.className = this.pfx + 'btn' + (cls ? ' ' + cls : '');
+    this.className = pfx + 'btn' + (cls ? ' ' + cls : '');
     this.listenTo(this.model, 'change:active updateActive', this.updateActive);
     this.listenTo(this.model, 'checkActive', this.checkActive);
     this.listenTo(this.model, 'change:bntsVis', this.updateBtnsVis);
@@ -27,7 +29,7 @@ module.exports = Backbone.View.extend({
 
     if(this.model.get('buttons').length){
       this.$el.on('mousedown', this.startTimer);
-      this.$el.append($('<div>',{class: this.pfx + 'arrow-rd'}));
+      this.$el.append($('<div>',{class: pfx + 'arrow-rd'}));
     }
 
     if(this.em && this.em.get)

src/panels/view/PanelView.js

@@ -4,8 +4,10 @@ var ButtonsView = require('./ButtonsView');
 module.exports = Backbone.View.extend({
 
   initialize(o) {
-    this.config = o.config || {};
-    this.pfx = this.config.stylePrefix || '';
+    const config = o.config || {};
+    this.config = config;
+    this.pfx = config.stylePrefix || '';
+    this.ppfx = config.pStylePrefix || '';
     this.buttons = this.model.get('buttons');
     this.className = this.pfx + 'panel';
     this.id = this.pfx + this.model.get('id');
@@ -76,20 +78,20 @@ module.exports = Backbone.View.extend({
   },
 
   render() {
-    this.$el.attr('class', this.className);
-
-    if(this.id)
-      this.$el.attr('id', this.id);
+    const el = this.$el;
+    const pfx = this.ppfx;
+    el.attr('class', `${this.className} ${pfx}one-bg`);
+    this.id && el.attr('id', this.id);
 
     if (this.buttons.length) {
       var buttons  = new ButtonsView({
         collection: this.buttons,
         config: this.config,
       });
-      this.$el.append(buttons.render().el);
+      el.append(buttons.render().el);
     }
 
-    this.$el.append(this.model.get('content'));
+    el.append(this.model.get('content'));
     return this;
   },
 

src/rich_text_editor/index.js

@@ -63,7 +63,7 @@ module.exports = () => {
       this.pfx = config.stylePrefix;
       actions = config.actions || [];
       toolbar = document.createElement('div');
-      toolbar.className = `${ppfx}rte-toolbar`;
+      toolbar.className = `${ppfx}rte-toolbar ${ppfx}one-bg`;
       globalRte = this.initRte(document.createElement('div'));
 
       //Avoid closing on toolbar clicking

src/selector_manager/view/ClassTagView.js

@@ -16,7 +16,6 @@ module.exports = Backbone.View.extend({
     this.ppfx = this.config.pStylePrefix || '';
     this.inputProp = 'readonly';
     this.target = this.config.em;
-    this.className = this.pfx + 'tag';
     this.closeId = this.pfx + 'close';
     this.chkId = this.pfx + 'checkbox';
     this.labelId = this.pfx + 'tag-label';
@@ -124,13 +123,15 @@ module.exports = Backbone.View.extend({
 
 
   render() {
+    const pfx = this.pfx;
+    const ppfx = this.ppfx;
     this.$el.html( this.template({
       label: this.model.get('label'),
-      pfx: this.pfx,
-      ppfx: this.ppfx,
+      pfx,
+      ppfx,
       inputProp: this.inputProp,
     }));
-    this.$el.attr('class', this.className);
+    this.$el.attr('class', `${pfx}tag ${ppfx}three-bg`);
     this.updateStatus();
     this.updateInputLabel();
     return this;

src/style_manager/view/PropertyView.js

@@ -87,7 +87,7 @@ module.exports = Backbone.View.extend({
     const pfx = this.pfx;
     const ppfx = this.ppfx;
     const config = this.config;
-    const updatedCls = `${ppfx}color-hl`;
+    const updatedCls = `${ppfx}four-color`;
     const computedCls = `${ppfx}color-warn`;
     const labelEl = this.$el.children(`.${pfx}label`);
     const clearStyle = this.getClearEl().style;

src/styles/scss/_gjs_blocks.scss

@@ -23,8 +23,6 @@
 .#{$app-prefix}block {
   @include user-select(none);
 
-  @extend .#{$app-prefix}bg-main;
-
   width: 45%;
   padding: 1em;
   box-sizing: border-box;

src/styles/scss/_gjs_inputs.scss

@@ -90,14 +90,13 @@
 }
 
 .#{$app-prefix}field {
-  background-color: $mainDkColor;
+  background-color: rgba(0, 0, 0, 0.2);
   border: none;
   box-shadow: none;
   border-radius: 2px;
   box-sizing: border-box;
   padding: 0;
   position: relative;
-  color: $inputFontColor;
 
   textarea {
     resize: vertical;
@@ -320,8 +319,7 @@
 }
 
 .#{$app-prefix}btn-prim {
-  @extend .#{$app-prefix}color-main;
-
+  color: inherit;
   background-color: $mainLhColor;
   border-radius: 2px;
   padding: 3px 6px;

src/styles/scss/_gjs_layers.scss

@@ -62,10 +62,6 @@
   }
 }
 
-.#{$nv-prefix}item .#{$nv-prefix}title-c {
-  @extend .#{$app-prefix}bg-main;
-}
-
 .#{$nv-prefix}title {
   @extend .#{$app-prefix}category-title;
 

src/styles/scss/_gjs_rte.scss

@@ -1,6 +1,5 @@
 .#{$rte-prefix} {
   &toolbar {
-    @extend .#{$app-prefix}bg-main;
     @extend .#{$app-prefix}no-user-select;
 
     border: 1px solid $mainDkColor;
@@ -14,8 +13,6 @@
   }
 
   &action {
-  	@extend .#{$app-prefix}color-main;
-
     display: flex;
     align-items: center;
     justify-content: center;

src/styles/scss/_gjs_style_manager.scss

@@ -167,8 +167,6 @@
     }
 
     &.#{$sm-prefix}composite {
-      @extend .#{$app-prefix}color-main;
-
       border-radius: 2px;
     }
 

src/styles/scss/_gjs_variables.scss

@@ -14,9 +14,11 @@ $cv-prefix:         $app-prefix + 'cv-' !default;
 $clm-prefix:        $app-prefix + 'clm-' !default;
 $trt-prefix:        $app-prefix + 'trt-' !default;
 
-
-/* Colors / Theme */
-
+/* New Pattern Color System - */
+$primaryColor:      #444 !default;
+$secondaryColor:    #ddd !default;
+$tertiaryColor:     #804f7b !default;
+$quaternaryColor:   #d278c9 !default;
 
 /* Dark theme */
 $mainColor:         #444 !default; /* Light: #573454 Dark: #3b2639 -moz-linear-gradient(top, #fca99b 0%, #6e2842 100%) */

src/styles/scss/main.scss

@@ -48,6 +48,58 @@
   transform: $v;
 }
 
+$prefix: $app-prefix;
+
+.#{$prefix} {
+  &one {
+    &-bg {
+      background-color: $primaryColor;
+    }
+
+    &-color {
+      color: $primaryColor;
+    }
+  }
+
+  &two {
+    &-bg {
+      background-color: $secondaryColor;
+    }
+
+    &-color {
+      color: $secondaryColor;
+    }
+  }
+
+  &three {
+    &-bg {
+      background-color: $tertiaryColor;
+    }
+
+    &-color {
+      color: $tertiaryColor;
+
+      &-h:hover {
+        color: $tertiaryColor;
+      }
+    }
+  }
+
+  &four {
+    &-bg {
+      background-color: $quaternaryColor;
+    }
+
+    &-color {
+      color: $quaternaryColor;
+
+      &-h:hover {
+        color: $quaternaryColor;
+      }
+    }
+  }
+}
+
 
 .#{$app-prefix}bg {
   &-main {
@@ -193,9 +245,9 @@
  	@include user-select(none);
 }
 
-.#{$app-prefix}editor{
+.#{$app-prefix}editor {
 	font-family: $mainFont;
-	background-color: $mainColor;
+	//background-color: $mainColor;
 	position:relative;
 	box-sizing: border-box;
 	height: 100%;
@@ -313,8 +365,8 @@
 /********* PANELS **********/
 
 .#{$pn-prefix}panel {
-  @extend .#{$app-prefix}bg-main;
-  @extend .#{$app-prefix}color-main;
+  //@extend .#{$app-prefix}bg-main;
+  //@extend .#{$app-prefix}color-main;
   display: inline-block;
   padding: 5px;
   position: absolute;
@@ -362,14 +414,13 @@
   }
 }
 
-.#{$pn-prefix}buttons{
+.#{$pn-prefix}buttons {
   align-items: center;
   display: flex;
-  justify-content: center;
+  justify-content: space-between;
 }
 
-.#{$pn-prefix}btn, .#{$app-prefix}btnt{
-  @extend .#{$app-prefix}color-main;
+.#{$pn-prefix}btn, .#{$app-prefix}btnt {
 	box-sizing: border-box;
 	height: 30px; width: 30px;
 	line-height: 21px;
@@ -382,8 +433,7 @@
 	padding: 5px;
 	position: relative;
 
-	&.#{$pn-prefix}active{
-    @extend .#{$app-prefix}color-active;
+	&.#{$pn-prefix}active {
 		background-color: rgba(0, 0, 0, 0.15);
     box-shadow: 0 0 3px rgba(0, 0, 0, 0.25) inset;
 	}
@@ -559,14 +609,10 @@
 	}
 
 	.#{$clm-prefix}tag {
-		background-color: $tagBg;
-		border: 1px solid darken($tagBg, 12%);
-		box-shadow: 1px 1px lighten($tagBg, 9%) inset;
-		text-shadow: 1px 1px darken($tagBg, 7%);
 		display: inline-block;
 		border-radius:3px;
 		margin: 0 3px 3px 0;
-    padding: 4px;
+    padding: 5px;
     cursor: default;
 	}
 	##{$clm-prefix}close {
@@ -619,8 +665,6 @@
 }
 
 .#{$mdl-prefix}dialog {
-  	@extend .#{$app-prefix}bg-main;
-    @extend .#{$app-prefix}color-main;
   	text-shadow: -1px -1px 0 rgba(0, 0, 0, 0.05);
     animation: #{$app-prefix}slide-down 0.215s;
   	margin: 30px auto 0;
@@ -646,14 +690,13 @@
 	padding:10px 15px;
 	clear: both;
 }
+
 .#{$mdl-prefix}header{
 	position: relative;
 	border-bottom: 1px solid $mainDkColor;
 	padding: 15px 15px 7px;
 }
-.#{$mdl-prefix}content{
-	border-top: 1px solid $mainLhColor;
-}
+
 .#{$app-prefix}export-dl::after{
   content: "";
   clear: both;