created colors values shared between javascript and sass

sites/all/modules/figli/edlp_corpus/assets/dist/scripts/corpus.min.js

@@ -11,6 +11,7 @@
 /**
   * depends on :
   *
+
   * physics.js : http://jonobr1.com/Physics/#
   * EaselJS : https://createjs.com/docs/easeljs/modules/EaselJS.html
   *
@@ -39,30 +40,9 @@
     var _node_hover_id = -1;
     var _$entrees_block = $('#block-edlpentreesblock');
     var _$entrees_block_termlinks = $('a.term-link', _$entrees_block);
-    var _entrees_colors = {
-      "130":"rgb(75, 143, 126)",
-      "121":"rgb(134, 142, 36)",
-      "134":"rgb(43, 143, 47)",
-      "121":"rgb(58, 51, 182)",
-      "125":"rgb(44, 159, 87)",
-      "119":"rgb(196, 137, 120)",
-      "132":"rgb(82, 112, 187)",
-      "122":"rgb(251, 84, 211)",
-      "129":"rgb(224, 116, 131)",
-      "120":"rgb(101, 88, 69)",
-      "130":"rgb(126, 8, 104)",
-      "118":"rgb(14, 113, 33)",
-      "127":"rgb(218, 189, 66)",
-      "133":"rgb(3, 153, 187)",
-      "128":"rgb(57, 154, 28)",
-      "124":"rgb(112, 133, 64)",
-      "116":"rgb(25, 27, 255)",
-      "117":"rgb(39, 157, 132)",
-      "131":"rgb(82, 25, 171)",
-      "126":"rgb(212, 156, 182)",
-      "123":"rgb(73, 119, 21)"
-    };
 
+    // Colors depend on edlp_vars loaded by edlptheme
+    // console.log('Corpus : edlp_vars', edlp_vars);
 
     //     ____      _ __
     //    /  _/___  (_) /______
@@ -253,12 +233,18 @@
 
         Node.prototype.draw = function(){
           _ctx.beginPath();
-          _ctx.lineWidth = this.hover ? this.g.l*2 : this.g.l;
+          _ctx.lineWidth = this.g.l*2;//this.hover ? this.g.l*2 : this.g.l;
           var r,d;
           for (var i = 0; i < this.entrees.length; i++) {
-            _ctx.strokeStyle = _entrees_colors[this.entrees[i]];
+            // _ctx.fillStyle = i == 0 ? _entrees_colors[this.entrees[i]] : "#fff";
+            // _ctx.strokeStyle = _entrees_colors[this.entrees[i]];
+            _ctx.fillStyle = i == 0 ? edlp_vars['e_col_'+this.entrees[i]] : "#fff";
+            _ctx.strokeStyle = edlp_vars['e_col_'+this.entrees[i]];
             r = this.base_radius + (this.g.l+this.g.s)*i; // radius
             d = r*2; // diametre
+            if (i == 0) {
+              _ctx.fillRect(this.x - r,this.y - r,d,d);
+            }
             _ctx.strokeRect(this.x - r,this.y - r,d,d);
           }
           _ctx.closePath();
@@ -337,10 +323,10 @@
     //  / /___ | |/ /  __/ / / / /_(__  )
     // /_____/ |___/\___/_/ /_/\__/____/
     function initEvents(){
-      _$container
+      _$canvas
         .on('mousemove', function(event) {
           event.preventDefault();
-          // console.log("onMouseMove", event);
+          console.log("onMouseMove");
           _m_pos.x = event.originalEvent.clientX;
           _m_pos.y = event.originalEvent.clientY;
           // console.log("/ _ / - / _ /");
@@ -383,9 +369,9 @@
         _nodes[i].onUpdate();
       }
       if(_node_hover_id != -1){
-        document.body.style.cursor = 'pointer';
+        _canvas.style.cursor = 'pointer';
       }else{
-        document.body.style.cursor = 'auto';
+        _canvas.style.cursor = 'auto';
       }
     };
 

sites/all/modules/figli/edlp_corpus/assets/scripts/corpus.js

@@ -11,6 +11,7 @@
 /**
   * depends on :
   *
+
   * physics.js : http://jonobr1.com/Physics/#
   * EaselJS : https://createjs.com/docs/easeljs/modules/EaselJS.html
   *
@@ -39,30 +40,9 @@
     var _node_hover_id = -1;
     var _$entrees_block = $('#block-edlpentreesblock');
     var _$entrees_block_termlinks = $('a.term-link', _$entrees_block);
-    var _entrees_colors = {
-      "130":"rgb(75, 143, 126)",
-      "121":"rgb(134, 142, 36)",
-      "134":"rgb(43, 143, 47)",
-      "121":"rgb(58, 51, 182)",
-      "125":"rgb(44, 159, 87)",
-      "119":"rgb(196, 137, 120)",
-      "132":"rgb(82, 112, 187)",
-      "122":"rgb(251, 84, 211)",
-      "129":"rgb(224, 116, 131)",
-      "120":"rgb(101, 88, 69)",
-      "130":"rgb(126, 8, 104)",
-      "118":"rgb(14, 113, 33)",
-      "127":"rgb(218, 189, 66)",
-      "133":"rgb(3, 153, 187)",
-      "128":"rgb(57, 154, 28)",
-      "124":"rgb(112, 133, 64)",
-      "116":"rgb(25, 27, 255)",
-      "117":"rgb(39, 157, 132)",
-      "131":"rgb(82, 25, 171)",
-      "126":"rgb(212, 156, 182)",
-      "123":"rgb(73, 119, 21)"
-    };
 
+    // Colors depend on edlp_vars loaded by edlptheme
+    // console.log('Corpus : edlp_vars', edlp_vars);
 
     //     ____      _ __
     //    /  _/___  (_) /______
@@ -253,12 +233,18 @@
 
         Node.prototype.draw = function(){
           _ctx.beginPath();
-          _ctx.lineWidth = this.hover ? this.g.l*2 : this.g.l;
+          _ctx.lineWidth = this.g.l*2;//this.hover ? this.g.l*2 : this.g.l;
           var r,d;
           for (var i = 0; i < this.entrees.length; i++) {
-            _ctx.strokeStyle = _entrees_colors[this.entrees[i]];
+            // _ctx.fillStyle = i == 0 ? _entrees_colors[this.entrees[i]] : "#fff";
+            // _ctx.strokeStyle = _entrees_colors[this.entrees[i]];
+            _ctx.fillStyle = i == 0 ? edlp_vars['e_col_'+this.entrees[i]] : "#fff";
+            _ctx.strokeStyle = edlp_vars['e_col_'+this.entrees[i]];
             r = this.base_radius + (this.g.l+this.g.s)*i; // radius
             d = r*2; // diametre
+            if (i == 0) {
+              _ctx.fillRect(this.x - r,this.y - r,d,d);
+            }
             _ctx.strokeRect(this.x - r,this.y - r,d,d);
           }
           _ctx.closePath();
@@ -337,10 +323,10 @@
     //  / /___ | |/ /  __/ / / / /_(__  )
     // /_____/ |___/\___/_/ /_/\__/____/
     function initEvents(){
-      _$container
+      _$canvas
         .on('mousemove', function(event) {
           event.preventDefault();
-          // console.log("onMouseMove", event);
+          console.log("onMouseMove");
           _m_pos.x = event.originalEvent.clientX;
           _m_pos.y = event.originalEvent.clientY;
           // console.log("/ _ / - / _ /");
@@ -383,9 +369,9 @@
         _nodes[i].onUpdate();
       }
       if(_node_hover_id != -1){
-        document.body.style.cursor = 'pointer';
+        _canvas.style.cursor = 'pointer';
       }else{
-        document.body.style.cursor = 'auto';
+        _canvas.style.cursor = 'auto';
       }
     };
 

sites/all/modules/figli/edlp_corpus/package.json

@@ -11,6 +11,7 @@
     "gulp-autoprefixer": "latest",
     "gulp-cssmin": "latest",
     "gulp-jsmin": "latest",
+    "gulp-json-to-sass": "0.0.4",
     "gulp-rename": "latest",
     "gulp-sass": "latest",
     "gulp-strip-debug": "latest",

sites/all/themes/custom/edlptheme/README.md

@@ -0,0 +1,7 @@
+# Edlp drupal 8 theme
+
+colors definitions are shared between javscript and sass
+
+they are generated from assets/json/shared_variables.json to js and sass
+
+js values are also used by corpus.js from edlp_corpus drupal module

sites/all/themes/custom/edlptheme/assets/dist/scripts/main.min.js

@@ -1,3 +1,27 @@
+edlp_vars = {
+  "e_col_130": "rgb(126, 8, 104)",
+  "e_col_121": "rgb(58, 51, 182)",
+  "e_col_134": "rgb(43, 143, 47)",
+  "e_col_121": "rgb(58, 51, 182)",
+  "e_col_125": "rgb(44, 159, 87)",
+  "e_col_119": "rgb(196, 137, 120)",
+  "e_col_132": "rgb(82, 112, 187)",
+  "e_col_122": "rgb(251, 84, 211)",
+  "e_col_129": "rgb(224, 116, 131)",
+  "e_col_120": "rgb(101, 88, 69)",
+  "e_col_130": "rgb(126, 8, 104)",
+  "e_col_118": "rgb(14, 113, 33)",
+  "e_col_127": "rgb(218, 189, 66)",
+  "e_col_133": "rgb(3, 153, 187)",
+  "e_col_128": "rgb(57, 154, 28)",
+  "e_col_124": "rgb(112, 133, 64)",
+  "e_col_116": "rgb(25, 27, 255)",
+  "e_col_117": "rgb(39, 157, 132)",
+  "e_col_131": "rgb(82, 25, 171)",
+  "e_col_126": "rgb(212, 156, 182)",
+  "e_col_123": "rgb(73, 119, 21)"
+};
+
 (function($) {
 
 

sites/all/themes/custom/edlptheme/assets/dist/styles/app.min.css

@@ -923,9 +923,13 @@ footer[role="contentinfo"] {
   bottom: 0;
   width: 100%; }
 
+.layout-container {
+  pointer-events: none; }
+
 header[role="banner"] {
   padding: 0 0 1em 0;
-  border-bottom: 1px solid red; }
+  border-bottom: 1px solid red;
+  pointer-events: all; }
 
 #block-edlptheme-branding {
   display: inline-block; }
@@ -995,17 +999,21 @@ header[role="banner"] {
           border-color: red;
           background-color: red; }
 
-main[role="main"] .layout-content .row {
-  height: 100%;
-  overflow: hidden; }
-  main[role="main"] .layout-content .row .col {
-    max-height: 100%;
-    position: relative; }
-  main[role="main"] .layout-content .row .col > * {
-    border-top: 1px solid red;
-    border-bottom: 1px solid red;
-    background-color: rgba(255, 255, 255, 0.9);
-    max-height: 100%; }
+main[role="main"] .layout-content {
+  pointer-events: none; }
+  main[role="main"] .layout-content .row {
+    pointer-events: none;
+    height: 100%;
+    overflow: hidden; }
+    main[role="main"] .layout-content .row .col {
+      pointer-events: all;
+      max-height: 100%;
+      position: relative; }
+    main[role="main"] .layout-content .row .col > * {
+      border-top: 1px solid red;
+      border-bottom: 1px solid red;
+      background-color: rgba(255, 255, 255, 0.9);
+      max-height: 100%; }
 
 #agenda {
   pointer-events: auto;
@@ -1039,7 +1047,8 @@ footer {
   padding: 0 0 0.5em 0; }
   footer > .region {
     display: table-cell;
-    white-space: nowrap; }
+    white-space: nowrap;
+    pointer-events: all; }
   footer .region-footer-left {
     text-align: left; }
   footer .region-footer-center {

sites/all/themes/custom/edlptheme/assets/json/shared_variables.json

@@ -0,0 +1,23 @@
+{
+  "e_col_130": "rgb(75, 143, 126)",
+  "e_col_121": "rgb(134, 142, 36)",
+  "e_col_134": "rgb(43, 143, 47)",
+  "e_col_121": "rgb(58, 51, 182)",
+  "e_col_125": "rgb(44, 159, 87)",
+  "e_col_119": "rgb(196, 137, 120)",
+  "e_col_132": "rgb(82, 112, 187)",
+  "e_col_122": "rgb(251, 84, 211)",
+  "e_col_129": "rgb(224, 116, 131)",
+  "e_col_120": "rgb(101, 88, 69)",
+  "e_col_130": "rgb(126, 8, 104)",
+  "e_col_118": "rgb(14, 113, 33)",
+  "e_col_127": "rgb(218, 189, 66)",
+  "e_col_133": "rgb(3, 153, 187)",
+  "e_col_128": "rgb(57, 154, 28)",
+  "e_col_124": "rgb(112, 133, 64)",
+  "e_col_116": "rgb(25, 27, 255)",
+  "e_col_117": "rgb(39, 157, 132)",
+  "e_col_131": "rgb(82, 25, 171)",
+  "e_col_126": "rgb(212, 156, 182)",
+  "e_col_123": "rgb(73, 119, 21)"
+}

sites/all/themes/custom/edlptheme/assets/scripts/shared_variables.js

@@ -0,0 +1,23 @@
+edlp_vars = {
+  "e_col_130": "rgb(126, 8, 104)",
+  "e_col_121": "rgb(58, 51, 182)",
+  "e_col_134": "rgb(43, 143, 47)",
+  "e_col_121": "rgb(58, 51, 182)",
+  "e_col_125": "rgb(44, 159, 87)",
+  "e_col_119": "rgb(196, 137, 120)",
+  "e_col_132": "rgb(82, 112, 187)",
+  "e_col_122": "rgb(251, 84, 211)",
+  "e_col_129": "rgb(224, 116, 131)",
+  "e_col_120": "rgb(101, 88, 69)",
+  "e_col_130": "rgb(126, 8, 104)",
+  "e_col_118": "rgb(14, 113, 33)",
+  "e_col_127": "rgb(218, 189, 66)",
+  "e_col_133": "rgb(3, 153, 187)",
+  "e_col_128": "rgb(57, 154, 28)",
+  "e_col_124": "rgb(112, 133, 64)",
+  "e_col_116": "rgb(25, 27, 255)",
+  "e_col_117": "rgb(39, 157, 132)",
+  "e_col_131": "rgb(82, 25, 171)",
+  "e_col_126": "rgb(212, 156, 182)",
+  "e_col_123": "rgb(73, 119, 21)"
+};

sites/all/themes/custom/edlptheme/assets/scripts/shared_variables_model.js

@@ -0,0 +1,23 @@
+edlp_vars = {
+  "e_col_130": {{e_col_130}},
+  "e_col_121": {{e_col_121}},
+  "e_col_134": {{e_col_134}},
+  "e_col_121": {{e_col_121}},
+  "e_col_125": {{e_col_125}},
+  "e_col_119": {{e_col_119}},
+  "e_col_132": {{e_col_132}},
+  "e_col_122": {{e_col_122}},
+  "e_col_129": {{e_col_129}},
+  "e_col_120": {{e_col_120}},
+  "e_col_130": {{e_col_130}},
+  "e_col_118": {{e_col_118}},
+  "e_col_127": {{e_col_127}},
+  "e_col_133": {{e_col_133}},
+  "e_col_128": {{e_col_128}},
+  "e_col_124": {{e_col_124}},
+  "e_col_116": {{e_col_116}},
+  "e_col_117": {{e_col_117}},
+  "e_col_131": {{e_col_131}},
+  "e_col_126": {{e_col_126}},
+  "e_col_123": {{e_col_123}}
+};

sites/all/themes/custom/edlptheme/assets/styles/app.scss

@@ -8,14 +8,20 @@
 
 @import 'base/reset';
 @import 'base/colors';
+@import 'base/shared_variables';
 @import 'base/grid';
 @import 'base/layout';
 
 // header
 
+.layout-container{
+  pointer-events: none;
+}
+
 header[role="banner"]{
   padding:0 0 1em 0;
   border-bottom: 1px solid red;
+  pointer-events: all;
 }
 
 #block-edlptheme-branding{
@@ -96,10 +102,13 @@ header[role="banner"]{
 // main
 main[role="main"]{
   .layout-content{
+    pointer-events: none;
     .row{
+      pointer-events: none;
       height:100%;
       overflow: hidden;
       .col{
+        pointer-events:all;
         max-height: 100%;
         position: relative;
       }
@@ -112,8 +121,6 @@ main[role="main"]{
     }
   }
 }
-
-
 #agenda{
   pointer-events: auto;
   background-color: $transparent-bg;
@@ -146,8 +153,8 @@ main[role="main"]{
   }
 }
 
-
 // Footer
+
 @mixin oblique-list {
   display: inline-block;
   position: relative;
@@ -175,6 +182,7 @@ footer{
   >.region{
     display: table-cell;
     white-space: nowrap;
+    pointer-events: all;
     // outline: 1px dotted purple;
     // position: relative;
   }
@@ -309,61 +317,61 @@ footer{
 
         &[tid='134']{
           a.term-link:before, .entree-content span.oblique-wrapper a:before{
-            border-color: $e-col-134;background-color: $e-col-134;}}
+            border-color: $e_col_134;background-color: $e_col_134;}}
         &[tid='121']{
           a.term-link:before, .entree-content span.oblique-wrapper a:before{
-            border-color: $e-col-121;background-color: $e-col-121;}}
+            border-color: $e_col_121;background-color: $e_col_121;}}
         &[tid='125']{
           a.term-link:before, .entree-content span.oblique-wrapper a:before{
-            border-color: $e-col-125;background-color: $e-col-125;}}
+            border-color: $e_col_125;background-color: $e_col_125;}}
         &[tid='119']{
           a.term-link:before, .entree-content span.oblique-wrapper a:before{
-            border-color: $e-col-119;background-color: $e-col-119;}}
+            border-color: $e_col_119;background-color: $e_col_119;}}
         &[tid='132']{
           a.term-link:before, .entree-content span.oblique-wrapper a:before{
-            border-color: $e-col-132;background-color: $e-col-132;}}
+            border-color: $e_col_132;background-color: $e_col_132;}}
         &[tid='122']{
           a.term-link:before, .entree-content span.oblique-wrapper a:before{
-            border-color: $e-col-122;background-color: $e-col-122;}}
+            border-color: $e_col_122;background-color: $e_col_122;}}
         &[tid='129']{
           a.term-link:before, .entree-content span.oblique-wrapper a:before{
-            border-color: $e-col-129;background-color: $e-col-129;}}
+            border-color: $e_col_129;background-color: $e_col_129;}}
         &[tid='120']{
           a.term-link:before, .entree-content span.oblique-wrapper a:before{
-            border-color: $e-col-120;background-color: $e-col-120;}}
+            border-color: $e_col_120;background-color: $e_col_120;}}
         &[tid='130']{
           a.term-link:before, .entree-content span.oblique-wrapper a:before{
-            border-color: $e-col-130;background-color: $e-col-130;}}
+            border-color: $e_col_130;background-color: $e_col_130;}}
         &[tid='118']{
           a.term-link:before, .entree-content span.oblique-wrapper a:before{
-            border-color: $e-col-118;background-color: $e-col-118;}}
+            border-color: $e_col_118;background-color: $e_col_118;}}
         &[tid='127']{
           a.term-link:before, .entree-content span.oblique-wrapper a:before{
-            border-color: $e-col-127;background-color: $e-col-127;}}
+            border-color: $e_col_127;background-color: $e_col_127;}}
         &[tid='133']{
           a.term-link:before, .entree-content span.oblique-wrapper a:before{
-            border-color: $e-col-133;background-color: $e-col-133;}}
+            border-color: $e_col_133;background-color: $e_col_133;}}
         &[tid='128']{
           a.term-link:before, .entree-content span.oblique-wrapper a:before{
-            border-color: $e-col-128;background-color: $e-col-128;}}
+            border-color: $e_col_128;background-color: $e_col_128;}}
         &[tid='124']{
           a.term-link:before, .entree-content span.oblique-wrapper a:before{
-            border-color: $e-col-124;background-color: $e-col-124;}}
+            border-color: $e_col_124;background-color: $e_col_124;}}
         &[tid='116']{
           a.term-link:before, .entree-content span.oblique-wrapper a:before{
-            border-color: $e-col-116;background-color: $e-col-116;}}
+            border-color: $e_col_116;background-color: $e_col_116;}}
         &[tid='117']{
           a.term-link:before, .entree-content span.oblique-wrapper a:before{
-            border-color: $e-col-117;background-color: $e-col-117;}}
+            border-color: $e_col_117;background-color: $e_col_117;}}
         &[tid='131']{
           a.term-link:before, .entree-content span.oblique-wrapper a:before{
-            border-color: $e-col-131;background-color: $e-col-131;}}
+            border-color: $e_col_131;background-color: $e_col_131;}}
         &[tid='126']{
           a.term-link:before, .entree-content span.oblique-wrapper a:before{
-            border-color: $e-col-126;background-color: $e-col-126;}}
+            border-color: $e_col_126;background-color: $e_col_126;}}
         &[tid='123']{
           a.term-link:before, .entree-content span.oblique-wrapper a:before{
-            border-color: $e-col-123;background-color: $e-col-123;}}
+            border-color: $e_col_123;background-color: $e_col_123;}}
 
         // &.highlighted{
         //   a.term_link{

sites/all/themes/custom/edlptheme/assets/styles/base/README.md

@@ -0,0 +1 @@
+# Do NOT EDIT _variables.scss as it is automaticly generated with gulp from assets/json/variables.json

sites/all/themes/custom/edlptheme/assets/styles/base/_colors.scss

@@ -1,23 +1 @@
 $transparent-bg: rgba(255,255,255, 0.9);
-
-$e-col-130: rgb(75, 143, 126);
-$e-col-121: rgb(134, 142, 36);
-$e-col-134: rgb(43, 143, 47);
-$e-col-121: rgb(58, 51, 182);
-$e-col-125: rgb(44, 159, 87);
-$e-col-119: rgb(196, 137, 120);
-$e-col-132: rgb(82, 112, 187);
-$e-col-122: rgb(251, 84, 211);
-$e-col-129: rgb(224, 116, 131);
-$e-col-120: rgb(101, 88, 69);
-$e-col-130: rgb(126, 8, 104);
-$e-col-118: rgb(14, 113, 33);
-$e-col-127: rgb(218, 189, 66);
-$e-col-133: rgb(3, 153, 187);
-$e-col-128: rgb(57, 154, 28);
-$e-col-124: rgb(112, 133, 64);
-$e-col-116: rgb(25, 27, 255);
-$e-col-117: rgb(39, 157, 132);
-$e-col-131: rgb(82, 25, 171);
-$e-col-126: rgb(212, 156, 182);
-$e-col-123: rgb(73, 119, 21);

sites/all/themes/custom/edlptheme/assets/styles/base/_shared_variables.scss

@@ -0,0 +1,19 @@
+$e_col_130: rgb(126, 8, 104);
+$e_col_121: rgb(58, 51, 182);
+$e_col_134: rgb(43, 143, 47);
+$e_col_125: rgb(44, 159, 87);
+$e_col_119: rgb(196, 137, 120);
+$e_col_132: rgb(82, 112, 187);
+$e_col_122: rgb(251, 84, 211);
+$e_col_129: rgb(224, 116, 131);
+$e_col_120: rgb(101, 88, 69);
+$e_col_118: rgb(14, 113, 33);
+$e_col_127: rgb(218, 189, 66);
+$e_col_133: rgb(3, 153, 187);
+$e_col_128: rgb(57, 154, 28);
+$e_col_124: rgb(112, 133, 64);
+$e_col_116: rgb(25, 27, 255);
+$e_col_117: rgb(39, 157, 132);
+$e_col_131: rgb(82, 25, 171);
+$e_col_126: rgb(212, 156, 182);
+$e_col_123: rgb(73, 119, 21);

sites/all/themes/custom/edlptheme/gulpfile.js

@@ -9,6 +9,14 @@ var jsmin = require('gulp-jsmin');
 var cssmin = require('gulp-cssmin');
 var rename = require('gulp-rename');
 var mainBowerFiles = require('main-bower-files');
+var jsonToSass = require('gulp-json-to-sass');
+// var fs = require('fs');
+var json2js = require('gulp-json2js');
+var data = require('gulp-data');
+var concat = require('gulp-concat');
+
+
+// var shared_variables = JSON.parse(fs.readFileSync('./assets/json/shared_variables.json'));
 
 function handleError(err) {
   console.log(err.toString());
@@ -19,11 +27,37 @@ var config = {
   production: !!util.env.production
 }
 
+gulp.task('variables2js', function() {
+  gulp.src('./assets/scripts/shared_variables_model.js')
+    .pipe(rename('shared_variables.js'))
+    .pipe(data(function(file) {
+      delete require.cache['./assets/json/shared_variables.json'];
+      return require('./assets/json/shared_variables.json');
+    }))
+    .pipe(json2js())
+    .pipe(gulp.dest('./assets/scripts/'));
+});
+
 gulp.task('scripts', function () {
-    gulp.src('./assets/scripts/main.js')
-      .pipe(config.production ? jsmin() : util.noop())
-      .pipe(rename({suffix: '.min'}))
-      .pipe(gulp.dest('./assets/dist/scripts/'));
+  gulp.src(['./assets/scripts/shared_variables.js','./assets/scripts/main.js'])
+    .pipe(concat('main.js'))
+    .pipe(config.production ? jsmin() : util.noop())
+    .pipe(rename({suffix: '.min'}))
+    .pipe(gulp.dest('./assets/dist/scripts/'));
+});
+
+// gulp.task('scripts', function() {
+//   return gulp.src(['./lib/file3.js', './lib/file1.js', './lib/file2.js'])
+//     .pipe(concat('all.js'))
+//     .pipe(gulp.dest('./dist/'));
+// });
+
+gulp.task('variables2sass', function () {
+  gulp.src('./assets/json/shared_variables.json')
+    .pipe(jsonToSass({
+      jsonPath: './assets/json/shared_variables.json',
+      scssPath: './assets/styles/base/_shared_variables.scss'
+    }));
 });
 
 gulp.task('styles', function () {
@@ -59,7 +93,8 @@ gulp.task('bower', function() {
 });
 
 // default gulp task
-gulp.task('default', ['bower', 'scripts', 'styles'], function() {
+gulp.task('default', ['bower', 'variables2js', 'scripts', 'variables2sass', 'styles'], function() {
+  gulp.watch('./assets/json/*.json', ['variables2js', 'variables2sass', 'styles', 'scripts']);
   gulp.watch('./assets/styles/*.scss', ['styles']);
   gulp.watch('./assets/styles/base/*.scss', ['styles']);
   gulp.watch('./assets/scripts/*.js', ['scripts']);

sites/all/themes/custom/edlptheme/package.json

@@ -9,8 +9,11 @@
   "devDependencies": {
     "gulp": "latest",
     "gulp-autoprefixer": "latest",
+    "gulp-concat": "latest",
     "gulp-cssmin": "latest",
     "gulp-jsmin": "latest",
+    "gulp-json-to-sass": "latest",
+    "gulp-json2js": "latest",
     "gulp-rename": "latest",
     "gulp-sass": "latest",
     "gulp-strip-debug": "latest",

sites/all/themes/custom/edlptheme/variables.scss

@@ -0,0 +1,19 @@
+$e-col-130: rgb(126, 8, 104);
+$e-col-121: rgb(58, 51, 182);
+$e-col-134: rgb(43, 143, 47);
+$e-col-125: rgb(44, 159, 87);
+$e-col-119: rgb(196, 137, 120);
+$e-col-132: rgb(82, 112, 187);
+$e-col-122: rgb(251, 84, 211);
+$e-col-129: rgb(224, 116, 131);
+$e-col-120: rgb(101, 88, 69);
+$e-col-118: rgb(14, 113, 33);
+$e-col-127: rgb(218, 189, 66);
+$e-col-133: rgb(3, 153, 187);
+$e-col-128: rgb(57, 154, 28);
+$e-col-124: rgb(112, 133, 64);
+$e-col-116: rgb(25, 27, 255);
+$e-col-117: rgb(39, 157, 132);
+$e-col-131: rgb(82, 25, 171);
+$e-col-126: rgb(212, 156, 182);
+$e-col-123: rgb(73, 119, 21);