#1590 Themes tweaked

src/diagrams/er/styles.js

@@ -7,7 +7,7 @@ const getStyles = options =>
 
   .relationshipLabelBox {
     fill: ${options.tertiaryColor};
-    opacity: 0.3;
+    opacity: 0.7;
     background-color: ${options.tertiaryColor};
       rect {
         opacity: 0.5;

src/diagrams/flowchart/flowRenderer.js

@@ -451,7 +451,7 @@ export const draw = function(text, id) {
       rect.setAttribute('ry', 0);
       rect.setAttribute('width', dim.width);
       rect.setAttribute('height', dim.height);
-      rect.setAttribute('style', 'fill:#e8e8e8;');
+      // rect.setAttribute('style', 'fill:#e8e8e8;');
 
       label.insertBefore(rect, label.firstChild);
     }

src/diagrams/flowchart/styles.js

@@ -43,6 +43,8 @@ const getStyles = options =>
     background-color: ${options.edgeLabelBackground};
     rect {
       opacity: 0.5;
+      background-color: ${options.edgeLabelBackground};
+      fill: ${options.edgeLabelBackground};
     }
     text-align: center;
   }

src/diagrams/state/styles.js

@@ -63,11 +63,14 @@ g.stateGroup line {
 
 .edgeLabel .label rect {
   fill: ${options.tertiaryColor};
-  opacity: 0.2;
+  opacity: 0.5;
 }
 .edgeLabel .label text {
   fill: ${options.tertiaryTextColor};
 }
+.label div .edgeLabel {
+  color: ${options.tertiaryTextColor};
+}
 
 .stateLabel text {
   fill: ${options.labelColor};

src/themes/theme-base.js

@@ -1,30 +1,32 @@
 import { darken, lighten, adjust, invert } from 'khroma';
-
-const mkBorder = (col, darkMode) =>
-  darkMode ? adjust(col, { s: -40, l: 10 }) : adjust(col, { s: -40, l: -10 });
+import { mkBorder } from './theme-helpers';
 class Theme {
   constructor() {
     /** # Base variables */
     /** * background - used to know what the background color is of the diagram. This is used for deducing colors for istance line color. Defaulr value is #f4f4f4. */
+    this.primaryColor = '#fff4dd';
+    this.primaryTextColor = this.darkMode ? '#ddd' : '#333'; // invert(this.primaryColor);
     this.background = '#f4f4f4';
     // this.background = '#0c0c0c';
     /** * darkMode -In darkMode the color generation deduces other colors from the primary colors */
     this.darkMode = false;
-    // this.darkMode = true;
     // this.primaryColor = '#1f1f00';
+    // this.darkMode = true;
 
     this.noteBkgColor = '#fff5ad';
     this.noteTextColor = '#333';
+
+    // this.primaryColor = '#f2ee7e';
     // this.primaryColor = '#9f33be';
-    this.primaryColor = '#f0fff0';
+    // this.primaryColor = '#f0fff0';
     // this.primaryColor = '#fa255e';
     // this.primaryColor = '#ECECFF';
 
     // this.secondaryColor = '#c39ea0';
     // this.tertiaryColor = '#f8e5e5';
 
-    this.secondaryColor = '#dfdfde';
-    this.tertiaryColor = '#CCCCFF';
+    // this.secondaryColor = '#dfdfde';
+    // this.tertiaryColor = '#CCCCFF';
 
     this.border1 = '#9370DB';
     this.arrowheadColor = '#333333';
@@ -38,15 +40,14 @@ class Theme {
     this.secondBkg = this.tertiaryColor;
 
     /* Main */
-    this.secondaryColor = adjust(this.primaryColor, { h: 120 });
-    this.tertiaryColor = adjust(this.primaryColor, { h: -160 });
-    console.warn('primary color', this.primaryColor, 'tertiary - color', this.tertiaryColor);
+    this.secondaryColor = adjust(this.primaryColor, { h: -120 });
+    this.tertiaryColor = adjust(this.primaryColor, { h: 180, l: 5 });
+
     this.primaryBorderColor = mkBorder(this.primaryColor, this.darkMode);
     this.secondaryBorderColor = mkBorder(this.secondaryColor, this.darkMode);
     this.tertiaryBorderColor = mkBorder(this.tertiaryColor, this.darkMode);
     this.noteBorderColor = mkBorder(this.noteBkgColor, this.darkMode);
 
-    this.primaryTextColor = invert(this.primaryColor);
     this.secondaryTextColor = invert(this.secondaryColor);
     this.tertiaryTextColor = invert(this.tertiaryColor);
     this.lineColor = invert(this.background);
@@ -62,7 +63,7 @@ class Theme {
     this.clusterBorder = this.tertiaryBorderColor;
     this.defaultLinkColor = this.lineColor;
     this.titleColor = this.tertiaryTextColor;
-    this.edgeLabelBackground = this.labelBackground;
+    this.edgeLabelBackground = this.secondaryColor;
 
     /* Sequence Diagram variables */
 

src/themes/theme-dark.js

@@ -1,10 +1,21 @@
 import { invert, lighten, darken, rgba, adjust } from 'khroma';
-
+import { mkBorder } from './theme-helpers';
 class Theme {
   constructor() {
     this.background = '#333';
     this.primaryColor = '#1f2020';
     this.secondaryColor = lighten(this.primaryColor, 16);
+
+    this.tertiaryColor = adjust(this.primaryColor, { h: -160 });
+    this.primaryBorderColor = mkBorder(this.primaryColor, this.darkMode);
+    this.secondaryBorderColor = mkBorder(this.secondaryColor, this.darkMode);
+    this.tertiaryBorderColor = mkBorder(this.tertiaryColor, this.darkMode);
+    this.primaryTextColor = invert(this.primaryColor);
+    this.secondaryTextColor = invert(this.secondaryColor);
+    this.tertiaryTextColor = invert(this.tertiaryColor);
+    this.lineColor = invert(this.background);
+    this.textColor = invert(this.background);
+
     this.mainBkg = '#1f2020';
     this.secondBkg = 'calculated';
     this.mainContrastColor = 'lightgrey';
@@ -127,7 +138,7 @@ class Theme {
     this.fillType6 = adjust(this.primaryColor, { h: 128 });
     this.fillType7 = adjust(this.secondaryColor, { h: 128 });
     /* class */
-    this.classText = this.nodeBorder;
+    this.classText = this.primaryTextColor;
   }
   calculate(overrides) {
     if (typeof overrides !== 'object') {

src/themes/theme-default.js

@@ -1,10 +1,26 @@
-import { lighten, rgba, adjust } from 'khroma';
+import { invert, lighten, rgba, adjust } from 'khroma';
+import { mkBorder } from './theme-helpers';
 
 class Theme {
   constructor() {
     /* Base variables */
+    this.background = '#f4f4f4';
     this.primaryColor = '#ECECFF';
+
+    this.secondaryColor = adjust(this.primaryColor, { h: 120 });
     this.secondaryColor = '#ffffde';
+    this.tertiaryColor = adjust(this.primaryColor, { h: -160 });
+    this.primaryBorderColor = mkBorder(this.primaryColor, this.darkMode);
+    this.secondaryBorderColor = mkBorder(this.secondaryColor, this.darkMode);
+    this.tertiaryBorderColor = mkBorder(this.tertiaryColor, this.darkMode);
+    // this.noteBorderColor = mkBorder(this.noteBkgColor, this.darkMode);
+
+    this.primaryTextColor = invert(this.primaryColor);
+    this.secondaryTextColor = invert(this.secondaryColor);
+    this.tertiaryTextColor = invert(this.tertiaryColor);
+    this.lineColor = invert(this.background);
+    this.textColor = invert(this.background);
+
     this.background = 'white';
     this.mainBkg = '#ECECFF';
     this.secondBkg = '#ffffde';
@@ -124,7 +140,7 @@ class Theme {
 
     /* state colors */
     /* class */
-    this.classText = this.nodeBorder;
+    this.classText = this.primaryTextColor;
     /* journey */
     this.fillType0 = this.primaryColor;
     this.fillType1 = this.secondaryColor;

src/themes/theme-forest.js

@@ -1,7 +1,9 @@
-import { darken, adjust } from 'khroma';
+import { darken, lighten, adjust, invert } from 'khroma';
+import { mkBorder } from './theme-helpers';
 class Theme {
   constructor() {
     /* Base vales */
+    this.background = '#f4f4f4';
     this.primaryColor = '#cde498';
     this.secondaryColor = '#cdffb2';
     this.background = 'white';
@@ -14,8 +16,17 @@ class Theme {
     this.fontFamily = '"trebuchet ms", verdana, arial';
     this.fontSize = '16px';
 
-    /* Flowchart variables */
+    this.tertiaryColor = lighten('#cde498', 10);
+    this.primaryBorderColor = mkBorder(this.primaryColor, this.darkMode);
+    this.secondaryBorderColor = mkBorder(this.secondaryColor, this.darkMode);
+    this.tertiaryBorderColor = mkBorder(this.tertiaryColor, this.darkMode);
+    this.primaryTextColor = invert(this.primaryColor);
+    this.secondaryTextColor = invert(this.secondaryColor);
+    this.tertiaryTextColor = invert(this.primaryColor);
+    this.lineColor = invert(this.background);
+    this.textColor = invert(this.background);
 
+    /* Flowchart variables */
     this.nodeBkg = 'calculated';
     this.nodeBorder = 'calculated';
     this.clusterBkg = 'calculated';
@@ -99,7 +110,7 @@ class Theme {
 
     /* state colors */
     /* class */
-    this.classText = this.nodeBorder;
+    this.classText = this.primaryTextColor;
     /* journey */
     this.fillType0 = this.primaryColor;
     this.fillType1 = this.secondaryColor;

src/themes/theme-helpers.js

@@ -0,0 +1,4 @@
+import { adjust } from 'khroma';
+
+export const mkBorder = (col, darkMode) =>
+  darkMode ? adjust(col, { s: -40, l: 10 }) : adjust(col, { s: -40, l: -10 });

src/themes/theme-neutral.js

@@ -1,4 +1,5 @@
-import { darken, lighten, adjust } from 'khroma';
+import { invert, darken, lighten, adjust } from 'khroma';
+import { mkBorder } from './theme-helpers';
 
 // const Color = require ( 'khroma/dist/color' ).default
 // Color.format.hex.stringify(Color.parse('hsl(210, 66.6666666667%, 95%)')); // => "#EAF2FB"
@@ -8,7 +9,23 @@ class Theme {
     this.primaryColor = '#eee';
     this.contrast = '#26a';
     this.secondaryColor = lighten(this.contrast, 55);
-    this.background = 'white';
+    this.background = '#ffffff';
+
+    // this.secondaryColor = adjust(this.primaryColor, { h: 120 });
+    this.tertiaryColor = adjust(this.primaryColor, { h: -160 });
+    console.warn('primary color', this.primaryColor, 'tertiary - color', this.tertiaryColor);
+    this.primaryBorderColor = mkBorder(this.primaryColor, this.darkMode);
+    this.secondaryBorderColor = mkBorder(this.secondaryColor, this.darkMode);
+    this.tertiaryBorderColor = mkBorder(this.tertiaryColor, this.darkMode);
+    // this.noteBorderColor = mkBorder(this.noteBkgColor, this.darkMode);
+
+    this.primaryTextColor = invert(this.primaryColor);
+    this.secondaryTextColor = invert(this.secondaryColor);
+    this.tertiaryTextColor = invert(this.tertiaryColor);
+    this.lineColor = invert(this.background);
+    this.textColor = invert(this.background);
+
+    this.altBackground = lighten(this.contrast, 55);
     this.mainBkg = '#eee';
     this.secondBkg = 'calculated';
     this.lineColor = '#666';
@@ -131,7 +148,7 @@ class Theme {
 
     /* state colors */
     /* class */
-    this.classText = this.nodeBorder;
+    this.classText = this.primaryTextColor;
     /* journey */
     this.fillType0 = this.primaryColor;
     this.fillType1 = this.secondaryColor;