created colors values shared between javascript and sass

This commit is contained in:
Bachir Soussi Chiadmi
2018-01-08 17:26:13 +01:00
parent f117a95e65
commit 5a57d72f00
16 changed files with 265 additions and 120 deletions
@@ -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';
}
};
@@ -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';
}
};
@@ -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",
@@ -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
@@ -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($) {
@@ -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 {
@@ -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)"
}
@@ -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)"
};
@@ -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}}
};
@@ -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{
@@ -0,0 +1 @@
# Do NOT EDIT _variables.scss as it is automaticly generated with gulp from assets/json/variables.json
@@ -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);
@@ -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);
+40 -5
View File
@@ -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']);
@@ -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",
@@ -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);