diff --git a/src/config.js b/src/config.js index 937e6e3b3..0c6c27f43 100644 --- a/src/config.js +++ b/src/config.js @@ -7,7 +7,7 @@ import { logger } from './logger'; const themes = {}; for (const themeName of ['default', 'forest', 'dark', 'neutral']) { - themes[themeName] = require(`./theme-${themeName}.js`).default; + themes[themeName] = require(`./themes/theme-${themeName}.js`); } /** * **Configuration methods in Mermaid version 8.6.0 have been updated, to learn more[[click here](8.6.0_docs.md)].** @@ -59,7 +59,7 @@ const config = { * */ theme: 'default', - themeVariables: themes.default, + themeVariables: themes.get, themeCSS: undefined, /* **maxTextSize** - The maximum allowed size of the users text diamgram */ maxTextSize: 50000, diff --git a/src/mermaidAPI.js b/src/mermaidAPI.js index 7eb09667e..170d09259 100644 --- a/src/mermaidAPI.js +++ b/src/mermaidAPI.js @@ -54,7 +54,7 @@ import getStyles from './styles'; const themes = {}; for (const themeName of ['default', 'forest', 'dark', 'neutral']) { - themes[themeName] = require(`./theme-${themeName}.js`); + themes[themeName] = require(`./themes/theme-${themeName}.js`); } function parse(text) { @@ -522,7 +522,7 @@ function reinitialize(options) { console.warn(`mermaidAPI.reinitialize: v${pkg.version}`, options); if (options.theme && themes[options.theme]) { // Todo merge with user options - options.themeVariables = themes[options.theme]; + options.themeVariables = themes[options.theme].getThemeVariables(options.themeVariables); } // Set default options @@ -538,7 +538,7 @@ function initialize(options) { if (options && options.theme && themes[options.theme]) { // Todo merge with user options - options.themeVariables = themes[options.theme]; + options.themeVariables = themes[options.theme].getThemeVariables(options.themeVariables); } else { if (options) options.themeVariables = themes.default; } diff --git a/src/styles.js b/src/styles.js index accb11a6b..894267a2d 100644 --- a/src/styles.js +++ b/src/styles.js @@ -24,8 +24,10 @@ const themes = { journey }; -const getStyles = (type, userStyles, options) => - ` { +export const calcThemeVariables = (theme, userOverRides) => theme.calcColors(userOverRides); + +const getStyles = (type, userStyles, options) => { + return ` { font-family: ${options.fontFamily}; font-size: ${options.fontSize}; } @@ -73,5 +75,6 @@ const getStyles = (type, userStyles, options) => ${userStyles} `; +}; export default getStyles; diff --git a/src/theme-dark.js b/src/theme-dark.js deleted file mode 100644 index c65d7fe11..000000000 --- a/src/theme-dark.js +++ /dev/null @@ -1,67 +0,0 @@ -import { lighten, rgba } from 'khroma'; - -export const mainBkg = '#1f2020'; -export const secondBkg = lighten('#1f2020', 16); -export const mainContrastColor = 'lightgrey'; -export const darkTextColor = '#323D47'; -export const lineColor = mainContrastColor; -export const border1 = '#81B1DB'; -export const border2 = rgba(255, 255, 255, 0.25); -export const arrowheadColor = mainContrastColor; -export const fontFamily = '"trebuchet ms", verdana, arial'; -export const fontSize = '16px'; -/* Flowchart variables */ - -export const nodeBkg = mainBkg; -export const nodeBorder = border1; -export const clusterBkg = secondBkg; -export const clusterBorder = border2; -export const defaultLinkColor = lineColor; -export const titleColor = '#F9FFFE'; -export const edgeLabelBackground = '#e8e8e8'; - -/* Sequence Diagram variables */ - -export const actorBorder = border1; -export const actorBkg = mainBkg; -export const actorTextColor = mainContrastColor; -export const actorLineColor = mainContrastColor; -export const signalColor = mainContrastColor; -export const signalTextColor = mainContrastColor; -export const labelBoxBkgColor = actorBkg; -export const labelBoxBorderColor = actorBorder; -export const labelTextColor = mainContrastColor; -export const loopTextColor = mainContrastColor; -export const noteBorderColor = border2; -export const noteBkgColor = '#fff5ad'; -export const noteTextColor = mainBkg; -export const activationBorderColor = border1; -export const activationBkgColor = secondBkg; -export const sequenceNumberColor = 'black'; - -/* Gantt chart variables */ - -export const sectionBkgColor = rgba(255, 255, 255, 0.3); -export const altSectionBkgColor = 'white'; -export const sectionBkgColor2 = '#EAE8B9'; -export const taskBorderColor = rgba(255, 255, 255, 0.5); -export const taskBkgColor = mainBkg; -export const taskTextColor = darkTextColor; -export const taskTextLightColor = mainContrastColor; -export const taskTextOutsideColor = taskTextLightColor; -export const taskTextClickableColor = '#003163'; -export const activeTaskBorderColor = rgba(255, 255, 255, 0.5); -export const activeTaskBkgColor = '#81B1DB'; -export const gridColor = mainContrastColor; -export const doneTaskBkgColor = mainContrastColor; -export const doneTaskBorderColor = 'grey'; -export const critBorderColor = '#E83737'; -export const critBkgColor = '#E83737'; -export const taskTextDarkColor = darkTextColor; -export const todayLineColor = '#DB5757'; - -/* state colors */ -export const labelColor = 'black'; - -export const errorBkgColor = '#a44141'; -export const errorTextColor = '#ddd'; diff --git a/src/theme-default.js b/src/theme-default.js deleted file mode 100644 index 350da4ce7..000000000 --- a/src/theme-default.js +++ /dev/null @@ -1,64 +0,0 @@ -export const mainBkg = '#ECECFF'; -export const secondBkg = '#ffffde'; -export const lineColor = '#333333'; -export const border1 = '#CCCCFF'; -export const border2 = '#aaaa33'; -export const arrowheadColor = '#333333'; -export const fontFamily = '"trebuchet ms", verdana, arial'; -export const fontSize = '16px'; - -/* Flowchart variables */ - -export const nodeBkg = mainBkg; -export const nodeBorder = '#9370DB'; -export const clusterBkg = secondBkg; -export const clusterBorder = border2; -export const defaultLinkColor = lineColor; -export const titleColor = '#333'; -export const edgeLabelBackground = '#e8e8e8'; - -/* Sequence Diagram variables */ - -export const actorBorder = border1; -export const actorBkg = mainBkg; -export const actorTextColor = 'black'; -export const actorLineColor = 'grey'; -export const signalColor = '#333'; -export const signalTextColor = '#333'; -export const labelBoxBkgColor = actorBkg; -export const labelBoxBorderColor = actorBorder; -export const labelTextColor = actorTextColor; -export const loopTextColor = actorTextColor; -export const noteBorderColor = border2; -export const noteBkgColor = '#fff5ad'; -export const noteTextColor = actorTextColor; -export const activationBorderColor = '#666'; -export const activationBkgColor = '#f4f4f4'; -export const sequenceNumberColor = 'white'; - -/* Gantt chart variables */ - -export const sectionBkgColor = 'rgba(102; 102; 255; 0.49)'; -export const altSectionBkgColor = 'white'; -export const sectionBkgColor2 = '#fff400'; -export const taskBorderColor = '#534fbc'; -export const taskBkgColor = '#8a90dd'; -export const taskTextLightColor = 'white'; -export const taskTextColor = taskTextLightColor; -export const taskTextDarkColor = 'black'; -export const taskTextOutsideColor = taskTextDarkColor; -export const taskTextClickableColor = '#003163'; -export const activeTaskBorderColor = '#534fbc'; -export const activeTaskBkgColor = '#bfc7ff'; -export const gridColor = 'lightgrey'; -export const doneTaskBkgColor = 'lightgrey'; -export const doneTaskBorderColor = 'grey'; -export const critBorderColor = '#ff8888'; -export const critBkgColor = 'red'; -export const todayLineColor = 'red'; - -/* state colors */ -export const labelColor = 'black'; - -export const errorBkgColor = '#552222'; -export const errorTextColor = '#552222'; diff --git a/src/theme-forest.js b/src/theme-forest.js deleted file mode 100644 index f5fad0859..000000000 --- a/src/theme-forest.js +++ /dev/null @@ -1,64 +0,0 @@ -export const mainBkg = '#cde498'; -export const secondBkg = '#cdffb2'; -export const lineColor = 'green'; -export const border1 = '#13540c'; -export const border2 = '#6eaa49'; -export const arrowheadColor = 'green'; -export const fontFamily = '"trebuchet ms", verdana, arial'; -export const fontSize = '16px'; - -/* Flowchart variables */ - -export const nodeBkg = mainBkg; -export const nodeBorder = border1; -export const clusterBkg = secondBkg; -export const clusterBorder = border2; -export const defaultLinkColor = lineColor; -export const titleColor = '#333'; -export const edgeLabelBackground = '#e8e8e8'; - -/* Sequence Diagram variables */ - -export const actorBorder = border1; -export const actorBkg = mainBkg; -export const actorTextColor = 'black'; -export const actorLineColor = 'grey'; -export const signalColor = '#333'; -export const signalTextColor = '#333'; -export const labelBoxBkgColor = actorBkg; -export const labelBoxBorderColor = '#326932'; -export const labelTextColor = actorTextColor; -export const loopTextColor = actorTextColor; -export const noteBorderColor = border2; -export const noteBkgColor = '#fff5ad'; -export const noteTextColor = actorTextColor; -export const activationBorderColor = '#666'; -export const activationBkgColor = '#f4f4f4'; -export const sequenceNumberColor = 'white'; - -/* Gantt chart variables */ - -export const sectionBkgColor = '#6eaa49'; -export const altSectionBkgColor = 'white'; -export const sectionBkgColor2 = '#6eaa49'; -export const taskBorderColor = border1; -export const taskBkgColor = '#487e3a'; -export const taskTextLightColor = 'white'; -export const taskTextColor = taskTextLightColor; -export const taskTextDarkColor = 'black'; -export const taskTextOutsideColor = taskTextDarkColor; -export const taskTextClickableColor = '#003163'; -export const activeTaskBorderColor = taskBorderColor; -export const activeTaskBkgColor = mainBkg; -export const gridColor = 'lightgrey'; -export const doneTaskBkgColor = 'lightgrey'; -export const doneTaskBorderColor = 'grey'; -export const critBorderColor = '#ff8888'; -export const critBkgColor = 'red'; -export const todayLineColor = 'red'; - -/* state colors */ -export const labelColor = 'black'; - -export const errorBkgColor = '#552222'; -export const errorTextColor = '#552222'; diff --git a/src/theme-neutral.js b/src/theme-neutral.js deleted file mode 100644 index 28b9fbb1f..000000000 --- a/src/theme-neutral.js +++ /dev/null @@ -1,71 +0,0 @@ -import { darken, lighten } from 'khroma'; - -export const mainBkg = '#eee'; -export const contrast = '#26a'; -export const secondBkg = lighten(contrast, 55); -export const lineColor = '#666'; -export const border1 = '#999'; -export const border2 = contrast; -export const note = '#ffa'; -export const text = '#333'; -export const critical = '#d42'; -export const done = '#bbb'; -export const arrowheadColor = '#333333'; -export const fontFamily = '"trebuchet ms", verdana, arial'; -export const fontSize = '16px'; - -/* Flowchart variables */ - -export const nodeBkg = mainBkg; -export const nodeBorder = border1; -export const clusterBkg = secondBkg; -export const clusterBorder = border2; -export const defaultLinkColor = lineColor; -export const titleColor = text; -export const edgeLabelBackground = 'white'; - -/* Sequence Diagram variables */ - -export const actorBorder = border1; -export const actorBkg = mainBkg; -export const actorTextColor = text; -export const actorLineColor = lineColor; -export const signalColor = text; -export const signalTextColor = text; -export const labelBoxBkgColor = actorBkg; -export const labelBoxBorderColor = actorBorder; -export const labelTextColor = text; -export const loopTextColor = text; -export const noteBorderColor = darken(note, 60); -export const noteBkgColor = note; -export const noteTextColor = actorTextColor; -export const activationBorderColor = '#666'; -export const activationBkgColor = '#f4f4f4'; -export const sequenceNumberColor = 'white'; - -/* Gantt chart variables */ - -export const sectionBkgColor = lighten(contrast, 30); -export const altSectionBkgColor = 'white'; -export const sectionBkgColor2 = lighten(contrast, 30); -export const taskBorderColor = darken(contrast, 10); -export const taskBkgColor = contrast; -export const taskTextLightColor = 'white'; -export const taskTextColor = taskTextLightColor; -export const taskTextDarkColor = text; -export const taskTextOutsideColor = taskTextDarkColor; -export const taskTextClickableColor = '#003163'; -export const activeTaskBorderColor = taskBorderColor; -export const activeTaskBkgColor = mainBkg; -export const gridColor = lighten(border1, 30); -export const doneTaskBkgColor = done; -export const doneTaskBorderColor = lineColor; -export const critBkgColor = critical; -export const critBorderColor = darken(critBkgColor, 10); -export const todayLineColor = critBkgColor; - -/* state colors */ -export const labelColor = 'black'; - -export const errorBkgColor = '#552222'; -export const errorTextColor = '#552222'; diff --git a/src/themes/theme-dark.js b/src/themes/theme-dark.js new file mode 100644 index 000000000..551e0d2ec --- /dev/null +++ b/src/themes/theme-dark.js @@ -0,0 +1,135 @@ +import { lighten, rgba } from 'khroma'; + +class Theme { + constructor() { + this.mainBkg = '#1f2020'; + this.secondBkg = 'calculated'; + this.mainContrastColor = 'lightgrey'; + this.darkTextColor = '#323D47'; + this.lineColor = 'calculated'; + this.border1 = '#81B1DB'; + this.border2 = rgba(255, 255, 255, 0.25); + this.arrowheadColor = 'calculated'; + this.fontFamily = '"trebuchet ms", verdana, arial'; + this.fontSize = '16px'; + /* Flowchart variables */ + + this.nodeBkg = 'calculated'; + this.nodeBorder = 'calculated'; + this.clusterBkg = 'calculated'; + this.clusterBorder = 'calculated'; + this.defaultLinkColor = 'calculated'; + this.titleColor = '#F9FFFE'; + this.edgeLabelBackground = '#e8e8e8'; + + /* Sequence Diagram variables */ + + this.actorBorder = 'calculated'; + this.actorBkg = 'calculated'; + this.actorTextColor = 'calculated'; + this.actorLineColor = 'calculated'; + this.signalColor = 'calculated'; + this.signalTextColor = 'calculated'; + this.labelBoxBkgColor = 'calculated'; + this.labelBoxBorderColor = 'calculated'; + this.labelTextColor = 'calculated'; + this.loopTextColor = 'calculated'; + this.noteBorderColor = 'calculated'; + this.noteBkgColor = '#fff5ad'; + this.noteTextColor = 'calculated'; + this.activationBorderColor = 'calculated'; + this.activationBkgColor = 'calculated'; + this.sequenceNumberColor = 'black'; + + /* Gantt chart variables */ + + this.sectionBkgColor = rgba(255, 255, 255, 0.3); + this.altSectionBkgColor = 'white'; + this.sectionBkgColor2 = '#EAE8B9'; + this.taskBorderColor = rgba(255, 255, 255, 0.5); + this.taskBkgColor = 'calculated'; + this.taskTextColor = 'calculated'; + this.taskTextLightColor = 'calculated'; + this.taskTextOutsideColor = 'calculated'; + this.taskTextClickableColor = '#003163'; + this.activeTaskBorderColor = rgba(255, 255, 255, 0.5); + this.activeTaskBkgColor = '#81B1DB'; + this.gridColor = 'calculated'; + this.doneTaskBkgColor = 'calculated'; + this.doneTaskBorderColor = 'grey'; + this.critBorderColor = '#E83737'; + this.critBkgColor = '#E83737'; + this.taskTextDarkColor = 'calculated'; + this.todayLineColor = '#DB5757'; + + /* state colors */ + this.labelColor = 'black'; + + this.errorBkgColor = '#a44141'; + this.errorTextColor = '#ddd'; + } + updateColors() { + this.secondBkg = lighten(this.mainBkg, 16); + this.lineColor = this.mainContrastColor; + this.arrowheadColor = this.mainContrastColor; + /* Flowchart variables */ + + this.nodeBkg = this.mainBkg; + this.nodeBorder = this.border1; + this.clusterBkg = this.secondBkg; + this.clusterBorder = this.border2; + this.defaultLinkColor = this.lineColor; + + /* Sequence Diagram variables */ + + this.actorBorder = this.border1; + this.actorBkg = this.mainBkg; + this.actorTextColor = this.mainContrastColor; + this.actorLineColor = this.mainContrastColor; + this.signalColor = this.mainContrastColor; + this.signalTextColor = this.mainContrastColor; + this.labelBoxBkgColor = this.actorBkg; + this.labelBoxBorderColor = this.actorBorder; + this.labelTextColor = this.mainContrastColor; + this.loopTextColor = this.mainContrastColor; + this.noteBorderColor = this.border2; + this.noteTextColor = this.mainBkg; + this.activationBorderColor = this.border1; + this.activationBkgColor = this.secondBkg; + + /* Gantt chart variables */ + + this.taskBkgColor = this.mainBkg; + this.taskTextColor = this.darkTextColor; + this.taskTextLightColor = this.mainContrastColor; + this.taskTextOutsideColor = this.taskTextLightColor; + this.gridColor = this.mainContrastColor; + this.doneTaskBkgColor = this.mainContrastColor; + this.taskTextDarkColor = this.darkTextColor; + + /* state colors */ + } + calculate(overrides) { + if (typeof overrides !== 'object') 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-default.js b/src/themes/theme-default.js new file mode 100644 index 000000000..53d152d98 --- /dev/null +++ b/src/themes/theme-default.js @@ -0,0 +1,146 @@ +import { rgba } from 'khroma'; + +class Theme { + constructor() { + /* Base variables */ + this.mainBkg = '#ECECFF'; + this.secondBkg = '#ffffde'; + this.lineColor = '#333333'; + this.border1 = '#9370DB'; + this.border2 = '#aaaa33'; + this.arrowheadColor = '#333333'; + this.fontFamily = '"trebuchet ms", verdana, arial'; + this.fontSize = '16px'; + this.labelBackground = '#e8e8e8'; + this.textColor = '#333'; + + /* Flowchart variables */ + + this.nodeBkg = 'calculated'; + this.nodeBorder = 'calculated'; + this.clusterBkg = 'calculated'; + this.clusterBorder = 'calculated'; + this.defaultLinkColor = 'calculated'; + this.titleColor = 'calculated'; + this.edgeLabelBackground = 'calculated'; + + /* Sequence Diagram variables */ + + this.actorBorder = 'calculated'; + this.actorBkg = 'calculated'; + this.actorTextColor = 'black'; + this.actorLineColor = 'grey'; + this.signalColor = 'calculated'; + this.signalTextColor = 'calculated'; + this.labelBoxBkgColor = 'calculated'; + this.labelBoxBorderColor = 'calculated'; + this.labelTextColor = 'calculated'; + this.loopTextColor = 'calculated'; + this.noteBorderColor = 'calculated'; + this.noteBkgColor = '#fff5ad'; + this.noteTextColor = 'calculated'; + this.activationBorderColor = '#666'; + this.activationBkgColor = '#f4f4f4'; + this.sequenceNumberColor = 'white'; + + /* Gantt chart variables */ + + this.sectionBkgColor = 'calculated'; + this.altSectionBkgColor = 'calculated'; + this.sectionBkgColor2 = 'calculated'; + this.taskBorderColor = 'calculated'; + this.taskBkgColor = 'calculated'; + this.taskTextLightColor = 'calculated'; + this.taskTextColor = this.taskTextLightColor; + this.taskTextDarkColor = 'calculated'; + this.taskTextOutsideColor = this.taskTextDarkColor; + this.taskTextClickableColor = 'calculated'; + this.activeTaskBorderColor = 'calculated'; + this.activeTaskBkgColor = 'calculated'; + this.gridColor = 'calculated'; + this.doneTaskBkgColor = 'calculated'; + this.doneTaskBorderColor = 'calculated'; + this.critBorderColor = 'calculated'; + this.critBkgColor = 'calculated'; + this.todayLineColor = 'calculated'; + + 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'; + this.updateColors(); + } + updateColors() { + /* Flowchart variables */ + + this.nodeBkg = this.mainBkg; + this.nodeBorder = this.border1; // border 1 + this.clusterBkg = this.secondBkg; + this.clusterBorder = this.border2; + this.defaultLinkColor = this.lineColor; + this.titleColor = this.textColor; + this.edgeLabelBackground = this.labelBackground; + + /* Sequence Diagram variables */ + + this.actorBorder = this.border1; + this.actorBkg = this.mainBkg; + 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; + + /* Gantt chart variables */ + + this.taskTextColor = this.taskTextLightColor; + this.taskTextOutsideColor = this.taskTextDarkColor; + + /* state colors */ + } + calculate(overrides) { + if (typeof overrides !== 'object') 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-forest.js b/src/themes/theme-forest.js new file mode 100644 index 000000000..81ae0a487 --- /dev/null +++ b/src/themes/theme-forest.js @@ -0,0 +1,123 @@ +import { rgba } from 'khroma'; + +class Theme { + constructor() { + /* Base vales */ + this.mainBkg = '#cde498'; + this.secondBkg = '#cdffb2'; + this.lineColor = 'green'; + this.border1 = '#13540c'; + this.border2 = '#6eaa49'; + this.arrowheadColor = 'green'; + this.fontFamily = '"trebuchet ms", verdana, arial'; + this.fontSize = '16px'; + + /* Flowchart variables */ + + this.nodeBkg = 'calculated'; + this.nodeBorder = 'calculated'; + this.clusterBkg = 'calculated'; + this.clusterBorder = 'calculated'; + this.defaultLinkColor = 'calculated'; + this.titleColor = '#333'; + this.edgeLabelBackground = '#e8e8e8'; + + /* Sequence Diagram variables */ + + this.actorBorder = 'calculated'; + this.actorBkg = 'calculated'; + this.actorTextColor = 'black'; + this.actorLineColor = 'grey'; + this.signalColor = '#333'; + this.signalTextColor = '#333'; + this.labelBoxBkgColor = 'calculated'; + this.labelBoxBorderColor = '#326932'; + this.labelTextColor = 'calculated'; + this.loopTextColor = 'calculated'; + this.noteBorderColor = 'calculated'; + this.noteBkgColor = '#fff5ad'; + this.noteTextColor = 'calculated'; + this.activationBorderColor = '#666'; + this.activationBkgColor = '#f4f4f4'; + this.sequenceNumberColor = 'white'; + + /* Gantt chart variables */ + + this.sectionBkgColor = '#6eaa49'; + this.altSectionBkgColor = 'white'; + this.sectionBkgColor2 = '#6eaa49'; + this.taskBorderColor = 'calculated'; + this.taskBkgColor = '#487e3a'; + this.taskTextLightColor = 'white'; + this.taskTextColor = 'calculated'; + this.taskTextDarkColor = 'black'; + this.taskTextOutsideColor = 'calculated'; + this.taskTextClickableColor = '#003163'; + this.activeTaskBorderColor = 'calculated'; + this.activeTaskBkgColor = 'calculated'; + 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'; + } + updateColors() { + /* Flowchart variables */ + + this.nodeBkg = this.mainBkg; + this.nodeBorder = this.border1; + this.clusterBkg = this.secondBkg; + this.clusterBorder = this.border2; + this.defaultLinkColor = this.lineColor; + + /* Sequence Diagram variables */ + + this.actorBorder = this.border1; + this.actorBkg = this.mainBkg; + this.labelBoxBkgColor = this.actorBkg; + this.labelTextColor = this.actorTextColor; + this.loopTextColor = this.actorTextColor; + this.noteBorderColor = this.border2; + this.noteTextColor = this.actorTextColor; + + /* Gantt chart variables */ + + this.taskBorderColor = this.border1; + this.taskTextColor = this.taskTextLightColor; + this.taskTextOutsideColor = this.taskTextDarkColor; + this.activeTaskBorderColor = this.taskBorderColor; + this.activeTaskBkgColor = this.mainBkg; + + /* state colors */ + } + calculate(overrides) { + if (typeof overrides !== 'object') 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-neutral.js b/src/themes/theme-neutral.js new file mode 100644 index 000000000..ea7bf22a4 --- /dev/null +++ b/src/themes/theme-neutral.js @@ -0,0 +1,147 @@ +import { darken, lighten } from 'khroma'; + +class Theme { + constructor() { + this.mainBkg = '#eee'; + this.contrast = '#26a'; + this.secondBkg = 'calculated'; + this.lineColor = '#666'; + this.border1 = '#999'; + this.border2 = 'calculated'; + this.note = '#ffa'; + this.text = '#333'; + this.critical = '#d42'; + this.done = '#bbb'; + this.arrowheadColor = '#333333'; + this.fontFamily = '"trebuchet ms", verdana, arial'; + this.fontSize = '16px'; + + /* Flowchart variables */ + + this.nodeBkg = 'calculated'; + this.nodeBorder = 'calculated'; + this.clusterBkg = 'calculated'; + this.clusterBorder = 'calculated'; + this.defaultLinkColor = 'calculated'; + this.titleColor = 'calculated'; + this.edgeLabelBackground = 'white'; + + /* Sequence Diagram variables */ + + this.actorBorder = 'calculated'; + this.actorBkg = 'calculated'; + this.actorTextColor = 'calculated'; + this.actorLineColor = 'calculated'; + this.signalColor = 'calculated'; + this.signalTextColor = 'calculated'; + this.labelBoxBkgColor = 'calculated'; + this.labelBoxBorderColor = 'calculated'; + this.labelTextColor = 'calculated'; + this.loopTextColor = 'calculated'; + this.noteBorderColor = 'calculated'; + this.noteBkgColor = 'calculated'; + this.noteTextColor = 'calculated'; + this.activationBorderColor = '#666'; + this.activationBkgColor = '#f4f4f4'; + this.sequenceNumberColor = 'white'; + + /* Gantt chart variables */ + + this.sectionBkgColor = 'calculated'; + this.altSectionBkgColor = 'white'; + this.sectionBkgColor2 = 'calculated'; + this.taskBorderColor = 'calculated'; + this.taskBkgColor = 'calculated'; + this.taskTextLightColor = 'white'; + this.taskTextColor = 'calculated'; + this.taskTextDarkColor = 'calculated'; + this.taskTextOutsideColor = 'calculated'; + this.taskTextClickableColor = '#003163'; + this.activeTaskBorderColor = 'calculated'; + this.activeTaskBkgColor = 'calculated'; + this.gridColor = 'calculated'; + this.doneTaskBkgColor = 'calculated'; + this.doneTaskBorderColor = 'calculated'; + this.critBkgColor = 'calculated'; + this.critBorderColor = 'calculated'; + this.todayLineColor = 'calculated'; + + /* state colors */ + this.labelColor = 'black'; + + this.errorBkgColor = '#552222'; + this.errorTextColor = '#552222'; + } + updateColors() { + this.secondBkg = lighten(this.contrast, 55); + this.border2 = this.contrast; + + /* Flowchart variables */ + + this.nodeBkg = this.mainBkg; + this.nodeBorder = this.border1; + this.clusterBkg = this.secondBkg; + this.clusterBorder = this.border2; + this.defaultLinkColor = this.lineColor; + this.titleColor = this.text; + + /* Sequence Diagram variables */ + + this.actorBorder = this.border1; + this.actorBkg = this.mainBkg; + this.actorTextColor = this.text; + this.actorLineColor = this.lineColor; + this.signalColor = this.text; + this.signalTextColor = this.text; + this.labelBoxBkgColor = this.actorBkg; + this.labelBoxBorderColor = this.actorBorder; + this.labelTextColor = this.text; + this.loopTextColor = this.text; + this.noteBorderColor = darken(this.note, 60); + this.noteBkgColor = this.note; + this.noteTextColor = this.actorTextColor; + + /* Gantt chart variables */ + + this.sectionBkgColor = lighten(this.contrast, 30); + this.sectionBkgColor2 = lighten(this.contrast, 30); + this.taskBorderColor = darken(this.contrast, 10); + this.taskBkgColor = this.contrast; + this.taskTextColor = this.taskTextLightColor; + this.taskTextDarkColor = this.text; + this.taskTextOutsideColor = this.taskTextDarkColor; + this.activeTaskBorderColor = this.taskBorderColor; + this.activeTaskBkgColor = this.mainBkg; + this.gridColor = lighten(this.border1, 30); + this.doneTaskBkgColor = this.done; + this.doneTaskBorderColor = this.lineColor; + this.critBkgColor = this.critical; + this.critBorderColor = darken(this.critBkgColor, 10); + this.todayLineColor = this.critBkgColor; + + /* state colors */ + } + calculate(overrides) { + if (typeof overrides !== 'object') 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; +};