marcel/mermaid
1
0
Fork 0
mirror of https://github.com/mermaid-js/mermaid.git synced 2025-09-27 11:19:38 +02:00
Code Issues Packages Projects Releases Wiki Activity

Added themeVariable references and som adjustments in base theme calculations.

Browse Source
This commit is contained in:
Knut Sveidqvist
2020-07-31 15:05:51 +02:00
parent dccb23bb80
commit e9e9b13df0
8 changed files with 195 additions and 113 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
src/diagrams/class/styles.js
View File

@@ -31,7 +31,7 @@ g.clickable {
}
g.classGroup rect {
fill: ${options.nodeBkg};
fill: ${options.mainBkg};
stroke: ${options.nodeBorder};
}
@@ -43,7 +43,7 @@ g.classGroup line {
.classLabel .box {
stroke: none;
stroke-width: 0;
fill: ${options.nodeBkg};
fill: ${options.mainBkg};
opacity: 0.5;
}
@@ -99,13 +99,13 @@ g.classGroup line {
}
#aggregationStart, .aggregation {
fill: ${options.nodeBkg} !important;
fill: ${options.mainBkg} !important;
stroke: ${options.lineColor} !important;
stroke-width: 1;
}
#aggregationEnd, .aggregation {
fill: ${options.nodeBkg} !important;
fill: ${options.mainBkg} !important;
stroke: ${options.lineColor} !important;
stroke-width: 1;
}

6
src/diagrams/flowchart/styles.js
View File

@@ -1,11 +1,11 @@
const getStyles = options =>
`.label {
font-family: ${options.fontFamily};
color: ${options.textColor};
color: ${options.nodeTextColor || options.textColor};
}
.label text {
fill: ${options.textColor};
fill: ${options.nodeTextColor || options.textColor};
}
.node rect,
@@ -66,7 +66,7 @@ const getStyles = options =>
padding: 2px;
font-family: ${options.fontFamily};
font-size: 12px;
background: ${options.secondBkg};
background: ${options.tertiaryColor};
border: 1px solid ${options.border2};
border-radius: 2px;
pointer-events: none;

6
src/diagrams/state/styles.js
View File

@@ -18,7 +18,7 @@ g.stateGroup .state-title {
}
g.stateGroup rect {
fill: ${options.nodeBkg};
fill: ${options.mainBkg};
stroke: ${options.nodeBorder};
}
@@ -57,7 +57,7 @@ g.stateGroup line {
.stateLabel .box {
stroke: none;
stroke-width: 0;
fill: ${options.nodeBkg};
fill: ${options.mainBkg};
opacity: 0.5;
}
@@ -105,7 +105,7 @@ g.stateGroup line {
}
.statediagram-cluster rect {
fill: ${options.nodeBkg};
fill: ${options.mainBkg};
stroke: ${options.nodeBorder};
stroke-width: 1px;
}

5
src/diagrams/user-journey/styles.js
View File

@@ -68,9 +68,6 @@ const getStyles = options =>
}
.cluster rect {
fill: ${options.secondBkg};
stroke: ${options.clusterBorder};
stroke-width: 1px;
}
.cluster text {
@@ -85,7 +82,7 @@ const getStyles = options =>
font-family: 'trebuchet ms', verdana, arial;
font-family: var(--mermaid-font-family);
font-size: 12px;
background: ${options.secondBkg};
background: ${options.tertiaryColor};
border: 1px solid ${options.border2};
border-radius: 2px;
pointer-events: none;

158
src/themes/theme-base.js
View File

@@ -5,12 +5,12 @@ class Theme {
/** # Base variables */
/** * background - used to know what the background color is of the diagram. This is used for deducing colors for istance line color. Defaulr value is #f4f4f4. */
this.background = '#f4f4f4';
this.darkMode = false;
// this.background = '#0c0c0c';
// this.darkMode = true;
this.primaryColor = '#fff4dd';
// this.background = '#0c0c0c';
/** * darkMode -In darkMode the color generation deduces other colors from the primary colors */
this.darkMode = false;
// this.primaryColor = '#1f1f00';
this.noteBkgColor = '#fff5ad';
@@ -31,109 +31,101 @@ class Theme {
// this.secondaryColor = '#dfdfde';
// this.tertiaryColor = '#CCCCFF';
this.border1 = '#9370DB';
this.arrowheadColor = '#333333';
this.fontFamily = '"trebuchet ms", verdana, arial';
this.fontSize = '16px';
this.updateColors();
this.relationColor = '#000';
// this.updateColors();
}
updateColors() {
this.secondBkg = this.tertiaryColor;
// The || is to make sure that if the variable has been defiend by a user override that value is to be used
/* Main */
this.primaryTextColor = this.darkMode ? '#ddd' : '#333'; // invert(this.primaryColor);
this.secondaryColor = adjust(this.primaryColor, { h: -120 });
this.tertiaryColor = adjust(this.primaryColor, { h: 180, l: 5 });
this.primaryTextColor = this.primaryTextColor || (this.darkMode ? '#ddd' : '#333'); // invert(this.primaryColor);
this.secondaryColor = this.secondaryColor || adjust(this.primaryColor, { h: -120 });
this.tertiaryColor = this.tertiaryColor || adjust(this.primaryColor, { h: 180, l: 5 });
this.primaryBorderColor = mkBorder(this.primaryColor, this.darkMode);
this.secondaryBorderColor = mkBorder(this.secondaryColor, this.darkMode);
this.tertiaryBorderColor = mkBorder(this.tertiaryColor, this.darkMode);
this.noteBorderColor = mkBorder(this.noteBkgColor, this.darkMode);
this.primaryBorderColor = this.primaryBorderColor || mkBorder(this.primaryColor, this.darkMode);
this.secondaryBorderColor =
this.secondaryBorderColor || mkBorder(this.secondaryColor, this.darkMode);
this.tertiaryBorderColor =
this.tertiaryBorderColor || mkBorder(this.tertiaryColor, this.darkMode);
this.noteBorderColor = this.noteBorderColor || mkBorder(this.noteBkgColor, this.darkMode);
this.secondaryTextColor = invert(this.secondaryColor);
this.tertiaryTextColor = invert(this.tertiaryColor);
this.lineColor = invert(this.background);
this.textColor = this.primaryTextColor;
this.secondaryTextColor = this.secondaryTextColor || invert(this.secondaryColor);
this.tertiaryTextColor = this.tertiaryTextColor || invert(this.tertiaryColor);
this.lineColor = this.lineColor || invert(this.background);
this.textColor = this.textColor || this.primaryTextColor;
/* Flowchart variables */
this.nodeBkg = this.primaryColor;
this.mainBkg = this.primaryColor;
// console.warn('main bkg ', this.mainBkg);
this.nodeBorder = this.primaryBorderColor;
this.clusterBkg = this.tertiaryColor;
this.clusterBorder = this.tertiaryBorderColor;
this.defaultLinkColor = this.lineColor;
this.titleColor = this.tertiaryTextColor;
this.edgeLabelBackground = this.darkMode
? darken(this.secondaryColor, 30)
: this.secondaryColor;
this.nodeBkg = this.nodeBkg || this.primaryColor;
this.mainBkg = this.mainBkg || this.primaryColor;
this.nodeBorder = this.nodeBorder || this.primaryBorderColor;
this.clusterBkg = this.clusterBkg || this.tertiaryColor;
this.clusterBorder = this.clusterBorder || this.tertiaryBorderColor;
this.defaultLinkColor = this.defaultLinkColor || this.lineColor;
this.titleColor = this.titleColor || this.tertiaryTextColor;
this.edgeLabelBackground =
this.edgeLabelBackground || this.darkMode
? darken(this.secondaryColor, 30)
: this.secondaryColor;
this.nodeTextColor = this.nodeTextColor || this.primaryTextColor;
/* Sequence Diagram variables */
// this.actorBorder = lighten(this.border1, 0.5);
this.actorBorder = this.primaryBorderColor;
this.actorBkg = this.mainBkg;
this.actorTextColor = this.primaryTextColor;
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.noteTextColor = this.actorTextColor;
this.activationBorderColor = darken(this.secondaryColor, 10);
this.activationBkgColor = this.secondaryColor;
this.sequenceNumberColor = invert(this.lineColor);
this.actorBorder = this.actorBorder || this.primaryBorderColor;
this.actorBkg = this.actorBkg || this.mainBkg;
this.actorTextColor = this.actorTextColor || this.primaryTextColor;
this.actorLineColor = this.actorLineColor || 'grey';
this.labelBoxBkgColor = this.labelBoxBkgColor || this.actorBkg;
this.signalColor = this.signalColor || this.textColor;
this.signalTextColor = this.signalTextColor || this.textColor;
this.labelBoxBorderColor = this.labelBoxBorderColor || this.actorBorder;
this.labelTextColor = this.labelTextColor || this.actorTextColor;
this.loopTextColor = this.loopTextColor || this.actorTextColor;
this.activationBorderColor = this.activationBorderColor || darken(this.secondaryColor, 10);
this.activationBkgColor = this.activationBkgColor || this.secondaryColor;
this.sequenceNumberColor = this.sequenceNumberColor || invert(this.lineColor);
/* Gantt chart variables */
this.sectionBkgColor = this.tertiaryColor;
this.altSectionBkgColor = 'white';
this.sectionBkgColor = this.secondaryColor;
this.sectionBkgColor2 = this.tertiaryColor;
this.altSectionBkgColor = 'white';
this.sectionBkgColor2 = this.primaryColor;
this.taskBorderColor = this.primaryBorderColor;
this.taskBkgColor = this.primaryColor;
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';
this.taskTextColor = this.textColor;
this.taskTextOutsideColor = this.textColor;
this.taskTextLightColor = this.textColor;
this.taskTextColor = this.primaryTextColor;
this.taskTextDarkColor = this.textColor;
this.taskTextOutsideColor = 'calculated';
this.taskTextClickableColor = '#003163';
/* state colors */
this.labelColor = this.primaryTextColor;
this.altBackground = this.tertiaryColor;
this.errorBkgColor = '#552222';
this.errorTextColor = '#552222';
this.sectionBkgColor = this.sectionBkgColor || this.tertiaryColor;
this.altSectionBkgColor = this.altSectionBkgColor || 'white';
this.sectionBkgColor = this.sectionBkgColor || this.secondaryColor;
this.sectionBkgColor2 = this.sectionBkgColor2 || this.primaryColor;
this.taskBorderColor = this.taskBorderColor || this.primaryBorderColor;
this.taskBkgColor = this.taskBkgColor || this.primaryColor;
this.activeTaskBorderColor = this.activeTaskBorderColor || this.primaryColor;
this.activeTaskBkgColor = this.activeTaskBkgColor || lighten(this.primaryColor, 23);
this.gridColor = this.gridColor || 'lightgrey';
this.doneTaskBkgColor = this.doneTaskBkgColor || 'lightgrey';
this.doneTaskBorderColor = this.doneTaskBorderColor || 'grey';
this.critBorderColor = this.critBorderColor || '#ff8888';
this.critBkgColor = this.critBkgColor || 'red';
this.todayLineColor = this.todayLineColor || 'red';
this.taskTextColor = this.taskTextColor || this.textColor;
this.taskTextOutsideColor = this.taskTextOutsideColor || this.textColor;
this.taskTextLightColor = this.taskTextLightColor || this.textColor;
this.taskTextColor = this.taskTextColor || this.primaryTextColor;
this.taskTextDarkColor = this.taskTextDarkColor || this.textColor;
this.taskTextClickableColor = this.taskTextClickableColor || '#003163';
/* state colors */
this.labelColor = this.labelColor || this.primaryTextColor;
this.altBackground = this.altBackground || this.tertiaryColor;
this.errorBkgColor = this.errorBkgColor || this.tertiaryColor;
this.errorTextColor = this.errorTextColor || this.tertiaryTextColor;
/* class */
this.classText = this.textColor;
this.classText = 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 });
this.fillType0 = this.fillType0 || this.primaryColor;
this.fillType1 = this.fillType1 || this.secondaryColor;
this.fillType2 = this.fillType2 || adjust(this.primaryColor, { h: 64 });
this.fillType3 = this.fillType3 || adjust(this.secondaryColor, { h: 64 });
this.fillType4 = this.fillType4 || adjust(this.primaryColor, { h: -64 });
this.fillType5 = this.fillType5 || adjust(this.secondaryColor, { h: -64 });
this.fillType6 = this.fillType6 || adjust(this.primaryColor, { h: 128 });
this.fillType7 = this.fillType7 || adjust(this.secondaryColor, { h: 128 });
}
calculate(overrides) {
if (typeof overrides !== 'object') {