mirror of
https://github.com/mermaid-js/mermaid.git
synced 2025-01-28 07:03:17 +08:00
#1542 Making sure user overrides from directives ocerrides properly
This commit is contained in:
Knut Sveidqvist
parent
8a018aa0f2
commit
4d280ff010
@ -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 = {
|
||||
* </pre>
|
||||
*/
|
||||
theme: 'default',
|
||||
themeVariables: themes.default,
|
||||
themeVariables: themes.get,
|
||||
themeCSS: undefined,
|
||||
/* **maxTextSize** - The maximum allowed size of the users text diamgram */
|
||||
maxTextSize: 50000,
|
||||
|
||||
@ -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;
|
||||
}
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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';
|
||||
@ -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';
|
||||
@ -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';
|
||||
@ -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';
|
||||
135
src/themes/theme-dark.js
Normal file
135
src/themes/theme-dark.js
Normal file
@ -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;
|
||||
};
|
||||
146
src/themes/theme-default.js
Normal file
146
src/themes/theme-default.js
Normal file
@ -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;
|
||||
};
|
||||
123
src/themes/theme-forest.js
Normal file
123
src/themes/theme-forest.js
Normal file
@ -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;
|
||||
};
|
||||
147
src/themes/theme-neutral.js
Normal file
147
src/themes/theme-neutral.js
Normal file
@ -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;
|
||||
};
|
||||
Loading…
x
Reference in New Issue
Block a user