From 1302addcddffcf83e9d04a1ba740e971b9c6d104 Mon Sep 17 00:00:00 2001 From: Knut Sveidqvist Date: Mon, 20 Jul 2020 14:13:05 +0200 Subject: [PATCH 1/4] #1542 Base theme for simple custom themeing --- src/config.js | 2 +- src/diagrams/class/styles.js | 4 +- src/diagrams/er/styles.js | 15 ++- src/diagrams/user-journey/journeyRenderer.js | 4 + src/diagrams/user-journey/styles.js | 25 ++++ src/diagrams/user-journey/svgDraw.js | 6 +- src/mermaidAPI.js | 2 +- src/styles.js | 4 +- src/themes/theme-base.js | 127 +++++++++++++++++++ src/themes/theme-dark.js | 2 + src/themes/theme-default.js | 2 + src/themes/theme-forest.js | 2 + src/themes/theme-neutral.js | 37 ++---- 13 files changed, 195 insertions(+), 37 deletions(-) create mode 100644 src/themes/theme-base.js diff --git a/src/config.js b/src/config.js index 263c46c8f..f762f00ad 100644 --- a/src/config.js +++ b/src/config.js @@ -6,7 +6,7 @@ import { logger } from './logger'; const themes = {}; -for (const themeName of ['default', 'forest', 'dark', 'neutral']) { +for (const themeName of ['default', 'forest', 'dark', 'neutral', 'base']) { themes[themeName] = require(`./themes/theme-${themeName}.js`); } /** diff --git a/src/diagrams/class/styles.js b/src/diagrams/class/styles.js index 5a272e7a9..345784221 100644 --- a/src/diagrams/class/styles.js +++ b/src/diagrams/class/styles.js @@ -1,9 +1,9 @@ const getStyles = options => `g.classGroup text { fill: ${options.nodeBorder}; + fill: ${options.classText}; stroke: none; - font-family: 'trebuchet ms', verdana, arial; - font-family: var(--mermaid-font-family); + font-family: ${options.fontFamily}; font-size: 10px; .title { diff --git a/src/diagrams/er/styles.js b/src/diagrams/er/styles.js index 3e5083a0b..2dec402f1 100644 --- a/src/diagrams/er/styles.js +++ b/src/diagrams/er/styles.js @@ -1,5 +1,18 @@ -const getStyles = () => +Base theme for cusom themeingconst getStyles = options => ` + .entityBox { + fill: ${options.mainBkg}; + stroke: ${options.nodeBorder}; + } + + .relationshipLabelBox { + fill: ${options.edgeLabelBackground}; + fillopactity: 0; + background-color: ${options.edgeLabelBackground}; + rect { + opacity: 0.5; + } + } `; export default getStyles; diff --git a/src/diagrams/user-journey/journeyRenderer.js b/src/diagrams/user-journey/journeyRenderer.js index f1c42e544..7ec69a228 100644 --- a/src/diagrams/user-journey/journeyRenderer.js +++ b/src/diagrams/user-journey/journeyRenderer.js @@ -232,12 +232,14 @@ export const drawTasks = function(diagram, tasks, verticalPos) { let sectionNumber = 0; let fill = '#CCC'; let colour = 'black'; + let num = 0; // Draw the tasks for (let i = 0; i < tasks.length; i++) { let task = tasks[i]; if (lastSection !== task.section) { fill = fills[sectionNumber % fills.length]; + num = sectionNumber % fills.length; colour = textColours[sectionNumber % textColours.length]; const section = { @@ -245,6 +247,7 @@ export const drawTasks = function(diagram, tasks, verticalPos) { y: 50, text: task.section, fill, + num, colour }; @@ -269,6 +272,7 @@ export const drawTasks = function(diagram, tasks, verticalPos) { task.height = conf.diagramMarginY; task.colour = colour; task.fill = fill; + task.num = num; task.actors = taskActors; // Draw the box with the attached line diff --git a/src/diagrams/user-journey/styles.js b/src/diagrams/user-journey/styles.js index c736b4d5f..8c90bad29 100644 --- a/src/diagrams/user-journey/styles.js +++ b/src/diagrams/user-journey/styles.js @@ -88,6 +88,31 @@ const getStyles = options => pointer-events: none; z-index: 100; } + + .task-type-0, .section-type-0 { + ${options.fillType0 ? `fill: ${options.fillType0}` : ''}; + } + .task-type-1, .section-type-1 { + ${options.fillType0 ? `fill: ${options.fillType1}` : ''}; + } + .task-type-2, .section-type-2 { + ${options.fillType0 ? `fill: ${options.fillType2}` : ''}; + } + .task-type-3, .section-type-3 { + ${options.fillType0 ? `fill: ${options.fillType3}` : ''}; + } + .task-type-4, .section-type-4 { + ${options.fillType0 ? `fill: ${options.fillType4}` : ''}; + } + .task-type-5, .section-type-5 { + ${options.fillType0 ? `fill: ${options.fillType5}` : ''}; + } + .task-type-6, .section-type-6 { + ${options.fillType0 ? `fill: ${options.fillType6}` : ''}; + } + .task-type-7, .section-type-7 { + ${options.fillType0 ? `fill: ${options.fillType7}` : ''}; + } `; export default getStyles; diff --git a/src/diagrams/user-journey/svgDraw.js b/src/diagrams/user-journey/svgDraw.js index 7b84262f3..02f63dbde 100644 --- a/src/diagrams/user-journey/svgDraw.js +++ b/src/diagrams/user-journey/svgDraw.js @@ -187,7 +187,7 @@ export const drawSection = function(elem, section, conf) { rect.fill = section.fill; rect.width = conf.width; rect.height = conf.height; - rect.class = 'journey-section'; + rect.class = 'journey-section section-type-' + section.num; rect.rx = 3; rect.ry = 3; drawRect(g, rect); @@ -199,7 +199,7 @@ export const drawSection = function(elem, section, conf) { rect.y, rect.width, rect.height, - { class: 'journey-section' }, + { class: 'journey-section section-type-' + section.num }, conf, section.colour ); @@ -240,7 +240,7 @@ export const drawTask = function(elem, task, conf) { rect.fill = task.fill; rect.width = conf.width; rect.height = conf.height; - rect.class = 'task'; + rect.class = 'task task-type-' + task.num; rect.rx = 3; rect.ry = 3; drawRect(g, rect); diff --git a/src/mermaidAPI.js b/src/mermaidAPI.js index 170d09259..f2eb9d2f1 100644 --- a/src/mermaidAPI.js +++ b/src/mermaidAPI.js @@ -53,7 +53,7 @@ import configApi from './config'; import getStyles from './styles'; const themes = {}; -for (const themeName of ['default', 'forest', 'dark', 'neutral']) { +for (const themeName of ['default', 'forest', 'dark', 'neutral', 'base']) { themes[themeName] = require(`./themes/theme-${themeName}.js`); } diff --git a/src/styles.js b/src/styles.js index 19790b243..810760bdb 100644 --- a/src/styles.js +++ b/src/styles.js @@ -1,5 +1,5 @@ import classDiagram from './diagrams/class/styles'; -import er from './diagrams/flowchart/styles'; +import er from './diagrams/er/styles'; import flowchart from './diagrams/flowchart/styles'; import gantt from './diagrams/gantt/styles'; import git from './diagrams/git/styles'; @@ -75,6 +75,8 @@ const getStyles = (type, userStyles, options) => { ${themes[type](options)} ${userStyles} + + ${type} { fill: apa;} `; }; diff --git a/src/themes/theme-base.js b/src/themes/theme-base.js new file mode 100644 index 000000000..df5cbc920 --- /dev/null +++ b/src/themes/theme-base.js @@ -0,0 +1,127 @@ +import { darken, lighten, rgba, adjust } from 'khroma'; + +class Theme { + constructor() { + /* Base variables */ + this.primaryColor = '#fa255e'; + this.secondaryColor = '#c39ea0'; + this.tertiaryColor = '#f8e5e5'; + this.background = 'white'; + this.lineColor = '#333333'; + this.border1 = '#9370DB'; + this.arrowheadColor = '#333333'; + this.fontFamily = '"trebuchet ms", verdana, arial'; + this.fontSize = '16px'; + this.labelBackground = '#e8e8e8'; + this.textColor = '#333'; + this.noteBkgColor = '#fff5ad'; + this.noteBorderColor = '#aaaa33'; + this.updateColors(); + } + updateColors() { + this.secondBkg = this.tertiaryColor; + + /* Flowchart variables */ + + this.nodeBkg = this.primaryColor; + this.mainBkg = this.primaryColor; + this.nodeBorder = darken(this.primaryColor, 23); // border 1 + this.clusterBkg = this.tertiaryColor; + this.clusterBorder = darken(this.tertiaryColor, 10); + this.defaultLinkColor = this.lineColor; + this.titleColor = this.textColor; + this.edgeLabelBackground = this.labelBackground; + + /* Sequence Diagram variables */ + + // this.actorBorder = lighten(this.border1, 0.5); + this.actorBorder = lighten(this.border1, 23); + this.actorBkg = this.mainBkg; + this.actorTextColor = 'black'; + this.actorLineColor = 'grey'; + this.labelBoxBkgColor = this.actorBkg; + this.signalColor = this.textColor; + this.signalTextColor = this.textColor; + this.labelBoxBorderColor = this.actorBorder; + this.labelTextColor = this.actorTextColor; + this.loopTextColor = this.actorTextColor; + this.noteBorderColor = this.border2; + this.noteTextColor = this.actorTextColor; + this.activationBorderColor = darken(this.secondaryColor, 10); + this.activationBkgColor = this.secondaryColor; + this.sequenceNumberColor = 'white'; + + /* Gantt chart variables */ + + this.taskTextColor = this.taskTextLightColor; + this.taskTextOutsideColor = this.taskTextDarkColor; + this.sectionBkgColor = rgba(102, 102, 255, 0.49); + this.altSectionBkgColor = 'white'; + this.sectionBkgColor2 = '#fff400'; + this.sectionBkgColor = rgba(102, 102, 255, 0.49); + this.altSectionBkgColor = 'white'; + this.sectionBkgColor2 = '#fff400'; + this.taskBorderColor = '#534fbc'; + this.taskBkgColor = '#8a90dd'; + this.taskTextLightColor = 'white'; + this.taskTextColor = 'calculated'; + this.taskTextDarkColor = 'black'; + this.taskTextOutsideColor = 'calculated'; + this.taskTextClickableColor = '#003163'; + this.activeTaskBorderColor = '#534fbc'; + this.activeTaskBkgColor = '#bfc7ff'; + this.gridColor = 'lightgrey'; + this.doneTaskBkgColor = 'lightgrey'; + this.doneTaskBorderColor = 'grey'; + this.critBorderColor = '#ff8888'; + this.critBkgColor = 'red'; + this.todayLineColor = 'red'; + + /* state colors */ + this.labelColor = 'black'; + this.errorBkgColor = '#552222'; + this.errorTextColor = '#552222'; + + /* state colors */ + + /* class */ + this.classText = this.textColor; + + /* user-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') { + // Calculate colors form base colors + this.updateColors(); + return; + } + + const keys = Object.keys(overrides); + + // Copy values from overrides, this is mainly for base colors + keys.forEach(k => { + this[k] = overrides[k]; + }); + + // Calculate colors form base colors + this.updateColors(); + // Copy values from overrides again in case of an override of derived value + keys.forEach(k => { + this[k] = overrides[k]; + }); + } +} + +export const getThemeVariables = userOverrides => { + const theme = new Theme(); + theme.calculate(userOverrides); + return theme; +}; diff --git a/src/themes/theme-dark.js b/src/themes/theme-dark.js index 643a9e565..9101abad1 100644 --- a/src/themes/theme-dark.js +++ b/src/themes/theme-dark.js @@ -114,6 +114,8 @@ class Theme { /* state colors */ this.labelColor = this.textColor; + /* class */ + this.classText = this.nodeBorder; } calculate(overrides) { if (typeof overrides !== 'object') { diff --git a/src/themes/theme-default.js b/src/themes/theme-default.js index 2da7ca9ce..f239b93ab 100644 --- a/src/themes/theme-default.js +++ b/src/themes/theme-default.js @@ -121,6 +121,8 @@ class Theme { this.taskTextOutsideColor = this.taskTextDarkColor; /* state colors */ + /* class */ + this.classText = this.nodeBorder; } calculate(overrides) { if (typeof overrides !== 'object') { diff --git a/src/themes/theme-forest.js b/src/themes/theme-forest.js index 3d15ed740..616b73411 100644 --- a/src/themes/theme-forest.js +++ b/src/themes/theme-forest.js @@ -96,6 +96,8 @@ class Theme { this.activeTaskBkgColor = this.mainBkg; /* state colors */ + /* class */ + this.classText = this.nodeBorder; } calculate(overrides) { if (typeof overrides !== 'object') { diff --git a/src/themes/theme-neutral.js b/src/themes/theme-neutral.js index 540089b9e..4dbe6db03 100644 --- a/src/themes/theme-neutral.js +++ b/src/themes/theme-neutral.js @@ -1,6 +1,4 @@ -import Color from 'color'; -import { lighten } from 'khroma'; -window.lighten = lighten; +import { darken, lighten } from 'khroma'; // const Color = require ( 'khroma/dist/color' ).default // Color.format.hex.stringify(Color.parse('hsl(210, 66.6666666667%, 95%)')); // => "#EAF2FB" @@ -103,29 +101,16 @@ class Theme { this.labelBoxBorderColor = this.actorBorder; this.labelTextColor = this.text; this.loopTextColor = this.text; - this.noteBorderColor = Color(this.note) - .darken(0.6) - .hsl() - .string(); + this.noteBorderColor = darken(this.note, 60); this.noteBkgColor = this.note; this.noteTextColor = this.actorTextColor; /* Gantt chart variables */ - this.sectionBkgColor = Color(this.contrast) - .lighten(0.3) - .hsl() - .string(); + this.sectionBkgColor = lighten(this.contrast, 30); + this.sectionBkgColor2 = lighten(this.contrast, 30); - this.sectionBkgColor2 = Color(this.contrast) - .lighten(0.3) - .hsl() - .string(); - - this.taskBorderColor = Color(this.contrast) - .darken(0.1) - .hsl() - .string(); + this.taskBorderColor = darken(this.contrast, 10); this.taskBkgColor = this.contrast; this.taskTextColor = this.taskTextLightColor; @@ -133,22 +118,18 @@ class Theme { this.taskTextOutsideColor = this.taskTextDarkColor; this.activeTaskBorderColor = this.taskBorderColor; this.activeTaskBkgColor = this.mainBkg; - this.gridColor = Color(this.border1) - .lighten(0.3) - .hsl() - .string(); + this.gridColor = lighten(this.border1, 30); this.doneTaskBkgColor = this.done; this.doneTaskBorderColor = this.lineColor; this.critBkgColor = this.critical; - this.critBorderColor = Color(this.critBkgColor) - .darken(0.1) - .hsl() - .string(); + this.critBorderColor = darken(this.critBkgColor, 10); this.todayLineColor = this.critBkgColor; /* state colors */ + /* class */ + this.classText = this.nodeBorder; } calculate(overrides) { if (typeof overrides !== 'object') { From 93a8c83a687a080309d6e65820dbc8579d332958 Mon Sep 17 00:00:00 2001 From: Knut Sveidqvist Date: Mon, 20 Jul 2020 15:15:03 +0200 Subject: [PATCH 2/4] #1542 Alignment between themes --- src/diagrams/class/styles.js | 8 ++++---- src/diagrams/er/styles.js | 6 +++++- src/diagrams/state/styles.js | 14 +++++++------- src/diagrams/user-journey/styles.js | 3 +++ src/diagrams/user-journey/svgDraw.js | 3 ++- src/themes/theme-base.js | 27 ++++++++++++++++++--------- src/themes/theme-dark.js | 1 + 7 files changed, 40 insertions(+), 22 deletions(-) diff --git a/src/diagrams/class/styles.js b/src/diagrams/class/styles.js index 345784221..bf237241e 100644 --- a/src/diagrams/class/styles.js +++ b/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}; - stroke: ${options.nodeBorder}; + fill: ${options.lineColor}; + stroke: ${options.lineColor}; stroke-width: 1; } #aggregationStart, #aggregationEnd { fill: ${options.nodeBkg}; - stroke: ${options.nodeBorder}; + stroke: ${options.lineColor}; stroke-width: 1; } `; diff --git a/src/diagrams/er/styles.js b/src/diagrams/er/styles.js index 2dec402f1..73e9117b3 100644 --- a/src/diagrams/er/styles.js +++ b/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; diff --git a/src/diagrams/state/styles.js b/src/diagrams/state/styles.js index 8eeaeec1f..1a13f96e5 100644 --- a/src/diagrams/state/styles.js +++ b/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}; - stroke: ${options.nodeBorder}; + fill: ${options.lineColor}; + stroke: ${options.lineColor}; stroke-width: 1; } `; diff --git a/src/diagrams/user-journey/styles.js b/src/diagrams/user-journey/styles.js index 8c90bad29..aabd4c0e9 100644 --- a/src/diagrams/user-journey/styles.js +++ b/src/diagrams/user-journey/styles.js @@ -19,6 +19,9 @@ const getStyles = options => .label text { fill: #333; } + .label { + color: ${options.textColor} + } .face { fill: #FFF8DC; diff --git a/src/diagrams/user-journey/svgDraw.js b/src/diagrams/user-journey/svgDraw.js index 02f63dbde..65b9dbb9a 100644 --- a/src/diagrams/user-journey/svgDraw.js +++ b/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); diff --git a/src/themes/theme-base.js b/src/themes/theme-base.js index df5cbc920..55e5e242e 100644 --- a/src/themes/theme-base.js +++ b/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 = rgba(102, 102, 255, 0.49); + this.sectionBkgColor = this.secondaryColor; + this.sectionBkgColor2 = this.tertiaryColor; this.altSectionBkgColor = 'white'; - this.sectionBkgColor2 = '#fff400'; - this.taskBorderColor = '#534fbc'; - this.taskBkgColor = '#8a90dd'; + this.sectionBkgColor2 = this.primaryColor; + this.taskBorderColor = lighten(this.primaryColor, 23); + this.taskBkgColor = this.primaryColor; this.taskTextLightColor = 'white'; this.taskTextColor = 'calculated'; this.taskTextDarkColor = 'black'; this.taskTextOutsideColor = 'calculated'; this.taskTextClickableColor = '#003163'; - this.activeTaskBorderColor = '#534fbc'; - this.activeTaskBkgColor = '#bfc7ff'; + this.activeTaskBorderColor = this.primaryColor; + this.activeTaskBkgColor = lighten(this.primaryColor, 23); this.gridColor = 'lightgrey'; this.doneTaskBkgColor = 'lightgrey'; this.doneTaskBorderColor = 'grey'; diff --git a/src/themes/theme-dark.js b/src/themes/theme-dark.js index 9101abad1..8eeeefb51 100644 --- a/src/themes/theme-dark.js +++ b/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; } From 3a6915c0b6cef4b1c1a37fba8dba0f3cd2611e9d Mon Sep 17 00:00:00 2001 From: Knut Sveidqvist Date: Mon, 20 Jul 2020 15:24:12 +0200 Subject: [PATCH 3/4] #154 lint fixes --- src/diagrams/user-journey/svgDraw.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/diagrams/user-journey/svgDraw.js b/src/diagrams/user-journey/svgDraw.js index 65b9dbb9a..5b455d996 100644 --- a/src/diagrams/user-journey/svgDraw.js +++ b/src/diagrams/user-journey/svgDraw.js @@ -359,7 +359,7 @@ const _drawTextCandidateFunc = (function() { } } - function byFo(content, g, x, y, width, height, textAttrs, conf, colour) { + function byFo(content, g, x, y, width, height, textAttrs, conf) { const body = g.append('switch'); const f = body .append('foreignObject') From ffaf6c14e4f85beaaaf2cafeed9850b4743acc8a Mon Sep 17 00:00:00 2001 From: Knut Sveidqvist Date: Mon, 20 Jul 2020 17:10:59 +0200 Subject: [PATCH 4/4] #154 trweaking some more, state diagram composit backgrounds --- src/diagrams/state/styles.js | 2 +- src/themes/state.scss | 2 +- src/themes/theme-dark.js | 13 ++++++++++++- src/themes/theme-default.js | 13 ++++++++++++- src/themes/theme-forest.js | 13 ++++++++++++- src/themes/theme-neutral.js | 15 +++++++++++++-- 6 files changed, 51 insertions(+), 7 deletions(-) diff --git a/src/diagrams/state/styles.js b/src/diagrams/state/styles.js index 1a13f96e5..d6877eec7 100644 --- 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 index 0fb7c0f86..ab1d45f83 100644 --- 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 index 8eeeefb51..4dcbdf773 100644 --- 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 index f239b93ab..f3fe47696 100644 --- 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 index 616b73411..c36d037a7 100644 --- 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 index 4dbe6db03..b55506f4f 100644 --- 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') {