#1542 Alignment between themes

src/diagrams/class/styles.js

@@ -38,7 +38,7 @@ g.classGroup line {
 }
 
 .relation {
-  stroke: ${options.nodeBorder};
+  stroke: ${options.lineColor};
   stroke-width: 1;
   fill: none;
 }
@@ -48,14 +48,14 @@ g.classGroup line {
 }
 
 #compositionStart, #compositionEnd, #dependencyStart, #dependencyEnd, #extensionStart, #extensionEnd {
-  fill: ${options.nodeBorder};
+  fill: ${options.lineColor};
-  stroke: ${options.nodeBorder};
+  stroke: ${options.lineColor};
   stroke-width: 1;
 }
 
 #aggregationStart, #aggregationEnd  {
     fill: ${options.nodeBkg};
-  stroke: ${options.nodeBorder};
+  stroke: ${options.lineColor};
   stroke-width: 1;
 }
 `;

src/diagrams/er/styles.js

@@ -1,4 +1,4 @@
-Base theme for cusom themeingconst getStyles = options =>
+const getStyles = options =>
   `
   .entityBox {
     fill: ${options.mainBkg};
@@ -13,6 +13,10 @@ Base theme for cusom themeingconst getStyles = options =>
         opacity: 0.5;
       }
   }
+
+    .relationshipLine {
+      stroke: ${options.lineColor};
+    }
 `;
 
 export default getStyles;

src/diagrams/state/styles.js

@@ -23,12 +23,12 @@ g.stateGroup rect {
 }
 
 g.stateGroup line {
-  stroke: ${options.nodeBorder};
+  stroke: ${options.lineColor};
   stroke-width: 1;
 }
 
 .transition {
-  stroke: ${options.nodeBorder};
+  stroke: ${options.lineColor};
   stroke-width: 1;
   fill: none;
 }
@@ -85,7 +85,7 @@ g.stateGroup line {
   stroke-width: 1px;
 }
 #statediagram-barbEnd {
-  fill: ${options.nodeBorder};
+  fill: ${options.lineColor};
 }
 
 .statediagram-cluster rect {
@@ -114,7 +114,7 @@ g.stateGroup line {
   fill: ${options.background};
 }
 .statediagram-cluster.statediagram-cluster-alt .inner {
-  fill: #e0e0e0;
+  fill: '#e0e0e0';
 }
 
 .statediagram-cluster .inner {
@@ -128,7 +128,7 @@ g.stateGroup line {
 }
 .statediagram-state rect.divider {
   stroke-dasharray: 10,10;
-  fill: #efefef;
+  fill: ${options.altBackground ? options.altBackground : '#efefef'};
 }
 
 .note-edge {
@@ -155,8 +155,8 @@ g.stateGroup line {
 }
 
 #dependencyStart, #dependencyEnd {
-  fill: ${options.nodeBorder};
+  fill: ${options.lineColor};
-  stroke: ${options.nodeBorder};
+  stroke: ${options.lineColor};
   stroke-width: 1;
 }
 `;

src/diagrams/user-journey/styles.js

@@ -19,6 +19,9 @@ const getStyles = options =>
   .label text {
     fill: #333;
   }
+  .label {
+    color: ${options.textColor}
+  }
 
   .face {
     fill: #FFF8DC;

src/diagrams/user-journey/svgDraw.js

@@ -377,10 +377,11 @@ const _drawTextCandidateFunc = (function() {
 
     text
       .append('div')
+      .attr('class', 'label')
       .style('display', 'table-cell')
       .style('text-align', 'center')
       .style('vertical-align', 'middle')
-      .style('color', colour)
+      // .style('color', colour)
       .text(content);
 
     byTspan(content, body, x, y, width, height, textAttrs, conf);

src/themes/theme-base.js

@@ -1,11 +1,20 @@
-import { darken, lighten, rgba, adjust } from 'khroma';
+import { darken, lighten, adjust } from 'khroma';
 
 class Theme {
   constructor() {
     /* Base variables */
+    this.primaryColor = '#039fbe';
+    this.secondaryColor = '#b20238';
+    this.tertiaryColor = lighten('#e8d21d', 30);
+    this.relationColor = '#000';
     this.primaryColor = '#fa255e';
     this.secondaryColor = '#c39ea0';
     this.tertiaryColor = '#f8e5e5';
+
+    this.primaryColor = '#ECECFF';
+    this.secondaryColor = '#ffffde';
+    this.tertiaryColor = '#ffffde';
+
     this.background = 'white';
     this.lineColor = '#333333';
     this.border1 = '#9370DB';
@@ -55,21 +64,21 @@ class Theme {
 
     this.taskTextColor = this.taskTextLightColor;
     this.taskTextOutsideColor = this.taskTextDarkColor;
-    this.sectionBkgColor = rgba(102, 102, 255, 0.49);
+    this.sectionBkgColor = this.tertiaryColor;
     this.altSectionBkgColor = 'white';
-    this.sectionBkgColor2 = '#fff400';
+    this.sectionBkgColor = this.secondaryColor;
-    this.sectionBkgColor = rgba(102, 102, 255, 0.49);
+    this.sectionBkgColor2 = this.tertiaryColor;
     this.altSectionBkgColor = 'white';
-    this.sectionBkgColor2 = '#fff400';
+    this.sectionBkgColor2 = this.primaryColor;
-    this.taskBorderColor = '#534fbc';
+    this.taskBorderColor = lighten(this.primaryColor, 23);
-    this.taskBkgColor = '#8a90dd';
+    this.taskBkgColor = this.primaryColor;
     this.taskTextLightColor = 'white';
     this.taskTextColor = 'calculated';
     this.taskTextDarkColor = 'black';
     this.taskTextOutsideColor = 'calculated';
     this.taskTextClickableColor = '#003163';
-    this.activeTaskBorderColor = '#534fbc';
+    this.activeTaskBorderColor = this.primaryColor;
-    this.activeTaskBkgColor = '#bfc7ff';
+    this.activeTaskBkgColor = lighten(this.primaryColor, 23);
     this.gridColor = 'lightgrey';
     this.doneTaskBkgColor = 'lightgrey';
     this.doneTaskBorderColor = 'grey';

src/themes/theme-dark.js

@@ -114,6 +114,7 @@ class Theme {
 
     /* state colors */
     this.labelColor = this.textColor;
+    this.altBackground = lighten(this.background, 20);
     /* class */
     this.classText = this.nodeBorder;
   }