diff --git a/src/diagrams/er/styles.js b/src/diagrams/er/styles.js index 82e43dc6e..f659f071e 100644 --- a/src/diagrams/er/styles.js +++ b/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; diff --git a/src/diagrams/flowchart/flowRenderer.js b/src/diagrams/flowchart/flowRenderer.js index 390809d6c..d844c47fa 100644 --- a/src/diagrams/flowchart/flowRenderer.js +++ b/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); } diff --git a/src/diagrams/flowchart/styles.js b/src/diagrams/flowchart/styles.js index 9b9899c21..7bdee8b80 100644 --- a/src/diagrams/flowchart/styles.js +++ b/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; } diff --git a/src/diagrams/state/styles.js b/src/diagrams/state/styles.js index 7cbbd26bd..7246f1c17 100644 --- a/src/diagrams/state/styles.js +++ b/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}; diff --git a/src/themes/theme-base.js b/src/themes/theme-base.js index ddcb80536..694887142 100644 --- a/src/themes/theme-base.js +++ b/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 */ diff --git a/src/themes/theme-dark.js b/src/themes/theme-dark.js index 666da235f..c912f61a6 100644 --- a/src/themes/theme-dark.js +++ b/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') { diff --git a/src/themes/theme-default.js b/src/themes/theme-default.js index c2f7bf84a..41e6a96d4 100644 --- a/src/themes/theme-default.js +++ b/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; diff --git a/src/themes/theme-forest.js b/src/themes/theme-forest.js index 9d1ed28ff..d8592f233 100644 --- a/src/themes/theme-forest.js +++ b/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; diff --git a/src/themes/theme-helpers.js b/src/themes/theme-helpers.js new file mode 100644 index 000000000..491b03aa5 --- /dev/null +++ b/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 }); diff --git a/src/themes/theme-neutral.js b/src/themes/theme-neutral.js index e93d3542f..4d3518365 100644 --- a/src/themes/theme-neutral.js +++ b/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;