#154 trweaking some more, state diagram composit backgrounds

mermaid-js · Jul 20, 2020 · ffaf6c1 · ffaf6c1
1 parent 3a6915c
commit ffaf6c1
Show file tree

Hide file tree

Showing 6 changed files with 51 additions and 7 deletions.
diff --git a/src/diagrams/state/styles.js b/src/diagrams/state/styles.js
@@ -114,7 +114,7 @@ g.stateGroup line {
   fill: ${options.background};
 }
 .statediagram-cluster.statediagram-cluster-alt .inner {
-  fill: '#e0e0e0';
+  fill: #e0e0e0;
 }
 
 .statediagram-cluster .inner {

diff --git a/src/themes/state.scss b/src/themes/state.scss
@@ -82,7 +82,7 @@ g.stateGroup line {
 }
 
 .statediagram-cluster rect {
-  fill: $nodeBkg;
+  // fill: $nodeBkg;
   stroke: $nodeBorder;
   stroke-width: 1px;
 }

diff --git a/src/themes/theme-dark.js b/src/themes/theme-dark.js
@@ -1,8 +1,10 @@
-import { invert, lighten, darken, rgba } from 'khroma';
+import { invert, lighten, darken, rgba, adjust } from 'khroma';
 
 class Theme {
   constructor() {
     this.background = '#333';
+    this.primaryColor = '#1f2020';
+    this.secondaryColor = lighten(this.primaryColor, 16);
     this.mainBkg = '#1f2020';
     this.secondBkg = 'calculated';
     this.mainContrastColor = 'lightgrey';
@@ -115,6 +117,15 @@ class Theme {
     /* state colors */
     this.labelColor = this.textColor;
     this.altBackground = lighten(this.background, 20);
+
+    this.fillType0 = this.primaryColor;
+    this.fillType1 = this.secondaryColor;
+    this.fillType2 = adjust(this.primaryColor, { h: 64 });
+    this.fillType3 = adjust(this.secondaryColor, { h: 64 });
+    this.fillType4 = adjust(this.primaryColor, { h: -64 });
+    this.fillType5 = adjust(this.secondaryColor, { h: -64 });
+    this.fillType6 = adjust(this.primaryColor, { h: 128 });
+    this.fillType7 = adjust(this.secondaryColor, { h: 128 });
     /* class */
     this.classText = this.nodeBorder;
   }

diff --git a/src/themes/theme-default.js b/src/themes/theme-default.js
@@ -1,8 +1,10 @@
-import { lighten, rgba } from 'khroma';
+import { lighten, rgba, adjust } from 'khroma';
 
 class Theme {
   constructor() {
     /* Base variables */
+    this.primaryColor = '#ECECFF';
+    this.secondaryColor = '#ffffde';
     this.background = 'white';
     this.mainBkg = '#ECECFF';
     this.secondBkg = '#ffffde';
@@ -123,6 +125,15 @@ class Theme {
     /* state colors */
     /* class */
     this.classText = this.nodeBorder;
+    /* journey */
+    this.fillType0 = this.primaryColor;
+    this.fillType1 = this.secondaryColor;
+    this.fillType2 = adjust(this.primaryColor, { h: 64 });
+    this.fillType3 = adjust(this.secondaryColor, { h: 64 });
+    this.fillType4 = adjust(this.primaryColor, { h: -64 });
+    this.fillType5 = adjust(this.secondaryColor, { h: -64 });
+    this.fillType6 = adjust(this.primaryColor, { h: 128 });
+    this.fillType7 = adjust(this.secondaryColor, { h: 128 });
   }
   calculate(overrides) {
     if (typeof overrides !== 'object') {

diff --git a/src/themes/theme-forest.js b/src/themes/theme-forest.js
@@ -1,7 +1,9 @@
-import { darken } from 'khroma';
+import { darken, adjust } from 'khroma';
 class Theme {
   constructor() {
     /* Base vales */
+    this.primaryColor = '#cde498';
+    this.secondaryColor = '#cdffb2';
     this.background = 'white';
     this.mainBkg = '#cde498';
     this.secondBkg = '#cdffb2';
@@ -98,6 +100,15 @@ class Theme {
     /* state colors */
     /* class */
     this.classText = this.nodeBorder;
+    /* journey */
+    this.fillType0 = this.primaryColor;
+    this.fillType1 = this.secondaryColor;
+    this.fillType2 = adjust(this.primaryColor, { h: 64 });
+    this.fillType3 = adjust(this.secondaryColor, { h: 64 });
+    this.fillType4 = adjust(this.primaryColor, { h: -64 });
+    this.fillType5 = adjust(this.secondaryColor, { h: -64 });
+    this.fillType6 = adjust(this.primaryColor, { h: 128 });
+    this.fillType7 = adjust(this.secondaryColor, { h: 128 });
   }
   calculate(overrides) {
     if (typeof overrides !== 'object') {

diff --git a/src/themes/theme-neutral.js b/src/themes/theme-neutral.js
@@ -1,13 +1,15 @@
-import { darken, lighten } from 'khroma';
+import { darken, lighten, adjust } from 'khroma';
 
 // const Color = require ( 'khroma/dist/color' ).default
 // Color.format.hex.stringify(Color.parse('hsl(210, 66.6666666667%, 95%)')); // => "#EAF2FB"
 
 class Theme {
   constructor() {
+    this.primaryColor = '#eee';
+    this.contrast = '#26a';
+    this.secondaryColor = lighten(this.contrast, 55);
     this.background = 'white';
     this.mainBkg = '#eee';
-    this.contrast = '#26a';
     this.secondBkg = 'calculated';
     this.lineColor = '#666';
     this.border1 = '#999';
@@ -130,6 +132,15 @@ class Theme {
     /* state colors */
     /* class */
     this.classText = this.nodeBorder;
+    /* journey */
+    this.fillType0 = this.primaryColor;
+    this.fillType1 = this.secondaryColor;
+    this.fillType2 = adjust(this.primaryColor, { h: 64 });
+    this.fillType3 = adjust(this.secondaryColor, { h: 64 });
+    this.fillType4 = adjust(this.primaryColor, { h: -64 });
+    this.fillType5 = adjust(this.secondaryColor, { h: -64 });
+    this.fillType6 = adjust(this.primaryColor, { h: 128 });
+    this.fillType7 = adjust(this.secondaryColor, { h: 128 });
   }
   calculate(overrides) {
     if (typeof overrides !== 'object') {