diff --git a/cypress/platform/current.html b/cypress/platform/current.html index fc7857420..bd4c6315e 100644 --- a/cypress/platform/current.html +++ b/cypress/platform/current.html @@ -76,7 +76,7 @@ stateDiagram-v2 %%{init: {'theme': 'base', 'themeVariables':{ 'primaryColor': '#ff0000'}}}%%
- %%{init: {'theme': 'base'}}%% + %%{init: {'theme': 'dark'}}%% flowchart TB subgraph apa @@ -106,8 +106,8 @@ Note over Bob,Alice: Looks back // console.error('Mermaid error: ', err); }; mermaid.initialize({ - // theme: 'base', - // themeVariables:{primaryColor: '#0000ff'}, + theme: 'forest', + // themeVariables:{primaryColor: '#ff0000'}, // arrowMarkerAbsolute: true, // themeCSS: '.edgePath .path {stroke: red;} .arrowheadPath {fill: red;}', logLevel: 0, diff --git a/cypress/platform/showcase_base.html b/cypress/platform/showcase_base.html index a7f2e56e2..934cb5f6b 100644 --- a/cypress/platform/showcase_base.html +++ b/cypress/platform/showcase_base.html @@ -11,7 +11,6 @@ body { /* background: rgb(221, 208, 208); */ background: #f4f4f4; - /* background: #0c0c0c; */ font-family: 'Arial'; height: 100%; width: 100%; @@ -177,7 +176,7 @@ gantt
-%%{init2: {'securityLevel': 'loose', 'theme':'base'}}%% +%%{init: {'securityLevel': 'loose', 'theme':'base'}}%% stateDiagram-v2 [*] --> Active @@ -234,7 +233,7 @@ journey }; mermaid.initialize({ theme: 'base', - themeVariables: { primaryColor: '#ff0000'}, + themeVariables: // arrowMarkerAbsolute: true, // themeCSS: '.edgePath .path {stroke: red;} .arrowheadPath {fill: red;}', logLevel: 0, diff --git a/cypress/platform/showcase_base_dark.html b/cypress/platform/showcase_base_dark.html new file mode 100644 index 000000000..799241c99 --- /dev/null +++ b/cypress/platform/showcase_base_dark.html @@ -0,0 +1,245 @@ + + + + + + + + + +

Showcases of diagrams

+
+
+ graph TD + A[Christmas] -->|Get money| B(Go shopping) + B --> C{Let me think} + B --> G[/Another/] + C ==>|One| D[Laptop] + C -->|Two| E[iPhone] + C -->|Three| F[fa:fa-car Car] + subgraph section + C + D + E + F + G + end +
+
+%%{init2: {'securityLevel': 'loose', 'theme':'base'}}%% + flowchart TD + A[Christmas] -->|Get money| B(Go shopping) + B --> C{Let me think} + B --> G[Another] + C ==>|One| D[Laptop] + C x--x|Two| E[iPhone] + C o--o|Three| F[fa:fa-car Car] + subgraph section + C + D + E + F + G + end +
+
+ sequenceDiagram + autonumber + par Action 1 + Alice->>John: Hello John, how are you? + and Action 2 + Alice->>Bob: Hello Bob, how are you? + end + Alice->>+John: Hello John, how are you? + Alice->>+John: John, can you hear me? + John-->>-Alice: Hi Alice, I can hear you! + Note right of John: John is perceptive + John-->>-Alice: I feel great! + loop Every minute + John-->Alice: Great! + end +
+
+classDiagram + Animal "1" <|-- Duck + Animal <|-- Fish + Animal <--o Zebra + Animal : +int age + Animal : +String gender + Animal: +isMammal() + Animal: +mate() + class Duck{ + +String beakColor + +swim() + +quack() + } + class Fish{ + -int sizeInFeet + -canEat() + } + class Zebra{ + +bool is_wild + +run() + } +
+
+gantt + dateFormat :YYYY-MM-DD + title Adding GANTT diagram functionality to mermaid + excludes :excludes the named dates/days from being included in a charted task.. + section A section + Completed task :done, des1, 2014-01-06,2014-01-08 + Active task :active, des2, 2014-01-09, 3d + Future task : des3, after des2, 5d + Future task2 : des4, after des3, 5d + + section Critical tasks + Completed task in the critical line :crit, done, 2014-01-06,24h + Implement parser and jison :crit, done, after des1, 2d + Create tests for parser :crit, active, 3d + Future task in critical line :crit, 5d + Create tests for renderer :2d + Add to mermaid :1d + + section Documentation + Describe gantt syntax :active, a1, after des1, 3d + Add gantt diagram to demo page :after a1 , 20h + Add another diagram to demo page :doc1, after a1 , 48h + + section Last section + Describe gantt syntax :after doc1, 3d + Add gantt diagram to demo page :20h + Add another diagram to demo page :48h +
+
+ stateDiagram + [*] --> Active + + state Active { + [*] --> NumLockOff + NumLockOff --> NumLockOn : EvNumLockPressed + NumLockOn --> NumLockOff : EvNumLockPressed + -- + [*] --> CapsLockOff + CapsLockOff --> CapsLockOn : EvCapsLockPressed + CapsLockOn --> CapsLockOff : EvCapsLockPressed + -- + [*] --> ScrollLockOff + ScrollLockOff --> ScrollLockOn : EvCapsLockPressed + ScrollLockOn --> ScrollLockOff : EvCapsLockPressed + } + state SomethingElse { + A --> B + B --> A + } + + Active --> SomethingElse + note right of SomethingElse : This is the note to the right. + + SomethingElse --> [*] + +
+
+stateDiagram-v2 + [*] --> Active + + state Active { + [*] --> NumLockOff + NumLockOff --> NumLockOn : EvNumLockPressed + NumLockOn --> NumLockOff : EvNumLockPressed + -- + [*] --> CapsLockOff + CapsLockOff --> CapsLockOn : EvCapsLockPressed + CapsLockOn --> CapsLockOff : EvCapsLockPressed + -- + [*] --> ScrollLockOff + ScrollLockOff --> ScrollLockOn : EvCapsLockPressed + ScrollLockOn --> ScrollLockOff : EvCapsLockPressed + } + state SomethingElse { + A --> B + B --> A + } + + Active --> SomethingElse2 + note right of SomethingElse2 : This is the note to the right. + + SomethingElse2 --> [*] +
+
+ erDiagram + CUSTOMER }|..|{ DELIVERY-ADDRESS : has + CUSTOMER ||--o{ ORDER : places + CUSTOMER ||--o{ INVOICE : "liable for" + DELIVERY-ADDRESS ||--o{ ORDER : receives + INVOICE ||--|{ ORDER : covers + ORDER ||--|{ ORDER-ITEM : includes + PRODUCT-CATEGORY ||--|{ PRODUCT : contains + PRODUCT ||--o{ ORDER-ITEM : "ordered in" +
+
+journey + title My working day + section Go to work + Make tea: 5: Me + Go upstairs: 3: Me + Do work: 1: Me, Cat + section Go home + Go downstairs: 5: Me + Sit down: 5: Me +
+ + + + + diff --git a/cypress/platform/showcase_dark.html b/cypress/platform/showcase_dark.html index 8cec30f58..e4c090293 100644 --- a/cypress/platform/showcase_dark.html +++ b/cypress/platform/showcase_dark.html @@ -166,6 +166,7 @@ gantt } Active --> SomethingElse + SomethingElse --> [*] note right of SomethingElse : This is the note to the right.
@@ -191,6 +192,7 @@ gantt } Active --> SomethingElse2 + SomethingElse2 --> [*] note right of SomethingElse2 : This is the note to the right.
diff --git a/cypress/platform/showcase_forest.html b/cypress/platform/showcase_forest.html index 196e697ee..c12f46e9b 100644 --- a/cypress/platform/showcase_forest.html +++ b/cypress/platform/showcase_forest.html @@ -167,6 +167,7 @@ gantt Active --> SomethingElse note right of SomethingElse : This is the note to the right. + SomethingElse --> [*]
stateDiagram-v2 diff --git a/src/config.js b/src/config.js index 764216af4..b3b7a809d 100644 --- a/src/config.js +++ b/src/config.js @@ -20,22 +20,18 @@ export const updateCurrentConfig = (siteCfg, _directives) => { const d = _directives[i]; sanitize(d); cfg = assignWithDepth(cfg, d); - if (d.themeVariables) { - themeVariables = d.themeVariables; + if (d.theme) { + cfg.themeVariables = theme[cfg.theme].getThemeVariables(d.themeVariables); } } if (cfg.theme && theme[cfg.theme]) { - // console.warn('cfg beeing updated main bkg', themeVariables, cfg.theme); - const variables = theme[cfg.theme].getThemeVariables(themeVariables); - // console.warn('cfg beeing updated 2 main bkg', variables.mainBkg); + let tVars = assignWithDepth({}, cfg.themeVariables); + tVars = assignWithDepth(tVars, themeVariables); + const variables = theme[cfg.theme].getThemeVariables(tVars); cfg.themeVariables = variables; } - // else { - // console.warn('cfg not beeing updated main bkg', themeVariables, cfg.theme); - // } currentConfig = cfg; - // console.warn('cfg updated main bkg', cfg.sequence); return cfg; }; /** @@ -53,23 +49,20 @@ export const updateCurrentConfig = (siteCfg, _directives) => { * @returns {*} - the siteConfig */ export const setSiteConfig = conf => { - // siteConfig = { ...defaultConfig, ...conf }; + console.warn('Setting site config'); siteConfig = assignWithDepth({}, defaultConfig); siteConfig = assignWithDepth(siteConfig, conf); + + if (conf.theme) { + siteConfig.themeVariables = theme[conf.theme].getThemeVariables(conf.themeVariables); + } + currentConfig = updateCurrentConfig(siteConfig, directives); return siteConfig; }; export const updateSiteConfig = conf => { - // Object.keys(conf).forEach(key => { - // const manipulator = manipulators[key]; - // conf[key] = manipulator ? manipulator(conf[key]) : conf[key]; - // }); siteConfig = assignWithDepth(siteConfig, conf); - console.log('updateSiteConfig', siteConfig); updateCurrentConfig(siteConfig, directives); - // assignWithDesetpth(currentConfig, conf, { clobber: true }); - // // Set theme variables if user has set the theme option - // assignWithDepth(siteConfig, conf); return siteConfig; }; @@ -164,24 +157,7 @@ export const addDirective = directive => { * @param conf - the base currentConfig to reset to (default: current siteConfig ) */ export const reset = () => { - // Object.keys(siteConfig).forEach(key => delete siteConfig[key]); - // Object.keys(currentConfig).forEach(key => delete currentConfig[key]); - // assignWithDepth(siteConfig, conf, { clobber: true }); - // assignWithDepth(currentConfig, conf, { clobber: true }); - // Replace current config with siteConfig directives = []; - // console.warn(siteConfig.sequence); updateCurrentConfig(siteConfig, directives); }; - -// const configApi = Object.freeze({ -// sanitize, -// setSiteConfig, -// getSiteConfig, -// setConfig, -// getConfig, -// reset, -// defaultConfig -// }); -// export default configApi; diff --git a/src/dagre-wrapper/intersect/intersect-node.js b/src/dagre-wrapper/intersect/intersect-node.js index 8164f0f59..70255f46a 100644 --- a/src/dagre-wrapper/intersect/intersect-node.js +++ b/src/dagre-wrapper/intersect/intersect-node.js @@ -1,6 +1,6 @@ module.exports = intersectNode; function intersectNode(node, point) { - console.info('Intersect Node'); + // console.info('Intersect Node'); return node.intersect(point); } diff --git a/src/dagre-wrapper/intersect/intersect-polygon.js b/src/dagre-wrapper/intersect/intersect-polygon.js index b40536d38..c505000b8 100644 --- a/src/dagre-wrapper/intersect/intersect-polygon.js +++ b/src/dagre-wrapper/intersect/intersect-polygon.js @@ -44,7 +44,7 @@ function intersectPolygon(node, polyPoints, point) { } if (!intersections.length) { - console.log('NO INTERSECTION FOUND, RETURN NODE CENTER', node); + // console.log('NO INTERSECTION FOUND, RETURN NODE CENTER', node); return node; } 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-v2.js b/src/diagrams/flowchart/flowRenderer-v2.js index a6a6bdb8e..a8c548dce 100644 --- a/src/diagrams/flowchart/flowRenderer-v2.js +++ b/src/diagrams/flowchart/flowRenderer-v2.js @@ -468,7 +468,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/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/shapes.js b/src/diagrams/state/shapes.js index 34a4de8f6..e6c2df3ce 100644 --- a/src/diagrams/state/shapes.js +++ b/src/diagrams/state/shapes.js @@ -14,8 +14,9 @@ import { logger } from '../../logger'; export const drawStartState = g => g .append('circle') - .style('stroke', 'black') - .style('fill', 'black') + // .style('stroke', 'black') + // .style('fill', 'black') + .attr('class', 'start-state') .attr('r', getConfig().state.sizeUnit) .attr('cx', getConfig().state.padding + getConfig().state.sizeUnit) .attr('cy', getConfig().state.padding + getConfig().state.sizeUnit); @@ -241,8 +242,9 @@ export const addTitleAndBox = (g, stateDef, altBkg) => { const drawEndState = g => { g.append('circle') - .style('stroke', 'black') - .style('fill', 'white') + // .style('stroke', 'black') + // .style('fill', 'white') + .attr('class', 'end-state-outer') .attr('r', getConfig().state.sizeUnit + getConfig().state.miniPadding) .attr( 'cx', @@ -253,13 +255,16 @@ const drawEndState = g => { getConfig().state.padding + getConfig().state.sizeUnit + getConfig().state.miniPadding ); - return g - .append('circle') - .style('stroke', 'black') - .style('fill', 'black') - .attr('r', getConfig().state.sizeUnit) - .attr('cx', getConfig().state.padding + getConfig().state.sizeUnit + 2) - .attr('cy', getConfig().state.padding + getConfig().state.sizeUnit + 2); + return ( + g + .append('circle') + // .style('stroke', 'black') + // .style('fill', 'black') + .attr('class', 'end-state-inner') + .attr('r', getConfig().state.sizeUnit) + .attr('cx', getConfig().state.padding + getConfig().state.sizeUnit + 2) + .attr('cy', getConfig().state.padding + getConfig().state.sizeUnit + 2) + ); }; const drawForkJoinState = (g, stateDef) => { let width = getConfig().state.forkWidth; diff --git a/src/diagrams/state/styles.js b/src/diagrams/state/styles.js index 7cbbd26bd..f3a062d1c 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}; @@ -78,7 +81,7 @@ g.stateGroup line { } .node circle.state-start { - fill: ${options.primaryBorderColor}; + fill: ${options.lineColor}; stroke: black; } .node circle.state-end { @@ -86,6 +89,11 @@ g.stateGroup line { stroke: ${options.background}; stroke-width: 1.5 } +.end-state-inner { + fill: ${options.background}; + // stroke: ${options.background}; + stroke-width: 1.5 +} .node rect { fill: ${options.mainBkg}; diff --git a/src/mermaid.js b/src/mermaid.js index 4f45de49f..966db20fd 100644 --- a/src/mermaid.js +++ b/src/mermaid.js @@ -31,7 +31,7 @@ import utils from './utils'; */ const init = function() { const conf = mermaidAPI.getConfig(); - console.log('Starting rendering diagrams (init) - mermaid.init', conf); + // console.log('Starting rendering diagrams (init) - mermaid.init', conf); let nodes; if (arguments.length >= 2) { /*! sequence config was passed as #1 */ @@ -129,7 +129,7 @@ const init = function() { }; const initialize = function(config) { - mermaidAPI.reset(); + // mermaidAPI.reset(); if (typeof config.mermaid !== 'undefined') { if (typeof config.mermaid.startOnLoad !== 'undefined') { mermaid.startOnLoad = config.mermaid.startOnLoad; diff --git a/src/mermaidAPI.js b/src/mermaidAPI.js index cf1a35211..dba8f6750 100644 --- a/src/mermaidAPI.js +++ b/src/mermaidAPI.js @@ -220,7 +220,7 @@ const render = function(id, _txt, cb, container) { // console.warn('Render fetching config'); const cnf = configApi.getConfig(); - // console.warn('Render with config after adding new directives', cnf.themeVariables.mainBkg); + console.warn('Render with config after adding new directives', cnf.themeVariables.primaryColor); // Check the maximum allowed text size if (_txt.length > cnf.maxTextSize) { txt = 'graph TB;a[Maximum text size in diagram exceeded];style a fill:#faa'; @@ -552,7 +552,7 @@ function reinitialize() { } function initialize(options) { - logger.debug(`mermaidAPI.initialize: v${pkg.version} ${options}`); + console.warn(`mermaidAPI.initialize: v${pkg.version} `, options); // Set default options if (options && options.theme && theme[options.theme]) { @@ -581,7 +581,7 @@ const mermaidAPI = Object.freeze({ getSiteConfig: configApi.getSiteConfig, updateSiteConfig: configApi.updateSiteConfig, reset: () => { - console.warn('reset'); + // console.warn('reset'); configApi.reset(); // const siteConfig = configApi.getSiteConfig(); // updateRendererConfigs(siteConfig); diff --git a/src/themes/theme-base.js b/src/themes/theme-base.js index ddcb80536..b8b2fd38c 100644 --- a/src/themes/theme-base.js +++ b/src/themes/theme-base.js @@ -1,36 +1,40 @@ 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.background = '#f4f4f4'; // this.background = '#0c0c0c'; + // this.darkMode = true; + this.primaryColor = '#fff4dd'; + // 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.noteBkgColor = '#fff5ad'; this.noteTextColor = '#333'; + + // dark + + // this.primaryColor = '#034694'; + // 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'; this.fontFamily = '"trebuchet ms", verdana, arial'; this.fontSize = '16px'; - this.textColor = '#333'; this.updateColors(); this.relationColor = '#000'; } @@ -38,19 +42,19 @@ 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.primaryTextColor = this.darkMode ? '#ddd' : '#333'; // invert(this.primaryColor); + 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); - this.textColor = invert(this.background); + this.textColor = this.primaryTextColor; /* Flowchart variables */ @@ -62,7 +66,9 @@ class Theme { this.clusterBorder = this.tertiaryBorderColor; this.defaultLinkColor = this.lineColor; this.titleColor = this.tertiaryTextColor; - this.edgeLabelBackground = this.labelBackground; + this.edgeLabelBackground = this.darkMode + ? darken(this.secondaryColor, 30) + : this.secondaryColor; /* Sequence Diagram variables */ @@ -80,7 +86,7 @@ class Theme { // this.noteTextColor = this.actorTextColor; this.activationBorderColor = darken(this.secondaryColor, 10); this.activationBkgColor = this.secondaryColor; - this.sequenceNumberColor = 'white'; + this.sequenceNumberColor = invert(this.lineColor); /* Gantt chart 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;