mirror of
https://github.com/mermaid-js/mermaid.git
synced 2025-12-05 03:54:35 +01:00
Merge branch 'develop' into feature/Issue-1465_Class_migration
This commit is contained in:
Ashish Jain
@@ -10,7 +10,7 @@ $arrowheadColor: $mainContrastColor;
|
||||
/* Flowchart variables */
|
||||
|
||||
$nodeBkg: $mainBkg;
|
||||
$nodeBorder: purple;
|
||||
$nodeBorder: $border1;
|
||||
$clusterBkg: $secondBkg;
|
||||
$clusterBorder: $border2;
|
||||
$defaultLinkColor: $lineColor;
|
||||
@@ -34,7 +34,7 @@ $noteBkgColor: #fff5ad;
|
||||
$noteTextColor: $mainBkg;
|
||||
$activationBorderColor: $border1;
|
||||
$activationBkgColor: $secondBkg;
|
||||
$sequenceNumberColor: white;
|
||||
$sequenceNumberColor: black;
|
||||
|
||||
/* Gantt chart variables */
|
||||
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
@import 'flowchart';
|
||||
// @import 'flowchart';
|
||||
@import 'sequence';
|
||||
@import 'gantt';
|
||||
@import 'class';
|
||||
@@ -13,8 +13,9 @@
|
||||
|
||||
:root {
|
||||
--mermaid-font-family: '"trebuchet ms", verdana, arial';
|
||||
--mermaid-font-family: "Comic Sans MS", "Comic Sans", cursive;
|
||||
// --mermaid-alt-font-family: '"Lucida Console", Monaco, monospace';
|
||||
font-family: '"trebuchet ms", verdana, arial';
|
||||
font-family: var(--mermaid-font-family);
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
/* Classes common for multiple diagrams */
|
||||
@@ -52,3 +53,8 @@
|
||||
.marker.cross {
|
||||
stroke: $lineColor;
|
||||
}
|
||||
|
||||
svg {
|
||||
font-family: var(--mermaid-font-family);
|
||||
font-size: 24px;
|
||||
}
|
||||
@@ -9,3 +9,8 @@
|
||||
font-family: 'trebuchet ms', verdana, arial;
|
||||
font-family: var(--mermaid-font-family);
|
||||
}
|
||||
.legend text {
|
||||
font-family: 'trebuchet ms', verdana, arial;
|
||||
font-family: var(--mermaid-font-family);
|
||||
font-size: 17px;
|
||||
}
|
||||
|
||||
@@ -82,7 +82,7 @@ g.stateGroup line {
|
||||
}
|
||||
|
||||
.statediagram-cluster rect {
|
||||
fill: $nodeBkg;
|
||||
// fill: $nodeBkg;
|
||||
stroke: $nodeBorder;
|
||||
stroke-width: 1px;
|
||||
}
|
||||
|
||||
136
src/themes/theme-base.js
Normal file
136
src/themes/theme-base.js
Normal file
@@ -0,0 +1,136 @@
|
||||
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';
|
||||
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 = this.tertiaryColor;
|
||||
this.altSectionBkgColor = 'white';
|
||||
this.sectionBkgColor = this.secondaryColor;
|
||||
this.sectionBkgColor2 = this.tertiaryColor;
|
||||
this.altSectionBkgColor = 'white';
|
||||
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 = this.primaryColor;
|
||||
this.activeTaskBkgColor = lighten(this.primaryColor, 23);
|
||||
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;
|
||||
};
|
||||
159
src/themes/theme-dark.js
Normal file
159
src/themes/theme-dark.js
Normal file
@@ -0,0 +1,159 @@
|
||||
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';
|
||||
this.darkTextColor = lighten(invert('#323D47'), 10);
|
||||
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';
|
||||
this.labelBackground = '#181818';
|
||||
this.textColor = '#ccc';
|
||||
/* Flowchart variables */
|
||||
|
||||
this.nodeBkg = 'calculated';
|
||||
this.nodeBorder = 'calculated';
|
||||
this.clusterBkg = 'calculated';
|
||||
this.clusterBorder = 'calculated';
|
||||
this.defaultLinkColor = 'calculated';
|
||||
this.titleColor = '#F9FFFE';
|
||||
this.edgeLabelBackground = 'calculated';
|
||||
|
||||
/* 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 = darken('#EAE8D9', 30);
|
||||
this.altSectionBkgColor = 'calculated';
|
||||
this.sectionBkgColor2 = '#EAE8D9';
|
||||
this.taskBorderColor = rgba(255, 255, 255, 70);
|
||||
this.taskBkgColor = 'calculated';
|
||||
this.taskTextColor = 'calculated';
|
||||
this.taskTextLightColor = 'calculated';
|
||||
this.taskTextOutsideColor = 'calculated';
|
||||
this.taskTextClickableColor = '#003163';
|
||||
this.activeTaskBorderColor = rgba(255, 255, 255, 50);
|
||||
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 = 'calculated';
|
||||
|
||||
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;
|
||||
this.edgeLabelBackground = lighten(this.labelBackground, 25);
|
||||
|
||||
/* 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.altSectionBkgColor = this.background;
|
||||
this.taskBkgColor = lighten(this.mainBkg, 23);
|
||||
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 */
|
||||
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;
|
||||
}
|
||||
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;
|
||||
};
|
||||
165
src/themes/theme-default.js
Normal file
165
src/themes/theme-default.js
Normal file
@@ -0,0 +1,165 @@
|
||||
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';
|
||||
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 = lighten(this.border1, 0.5);
|
||||
this.actorBorder = lighten(this.border1, 23);
|
||||
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 */
|
||||
/* 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') {
|
||||
// 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;
|
||||
};
|
||||
140
src/themes/theme-forest.js
Normal file
140
src/themes/theme-forest.js
Normal file
@@ -0,0 +1,140 @@
|
||||
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';
|
||||
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 = darken(this.mainBkg, 20);
|
||||
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 */
|
||||
/* 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') {
|
||||
// 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;
|
||||
};
|
||||
173
src/themes/theme-neutral.js
Normal file
173
src/themes/theme-neutral.js
Normal file
@@ -0,0 +1,173 @@
|
||||
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.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 = lighten(this.border1, 23);
|
||||
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 */
|
||||
/* 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') {
|
||||
// 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);
|
||||
console.info('Theme', userOverrides, theme);
|
||||
return theme;
|
||||
};
|
||||
Reference in New Issue
Block a user