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

#2045 Adjusted styling css to make use of state diagram theme variables

Browse Source
This commit is contained in:
Knut Sveidqvist
2021-05-06 20:26:00 +02:00
parent 785e5552ae
commit 30faf7bfad
7 changed files with 113 additions and 201 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -17,7 +17,7 @@ g.stateGroup text {
}
g.stateGroup .state-title {
font-weight: bolder;
fill: ${options.labelColor};
fill: ${options.stateLabelColor};
}
g.stateGroup rect {
@@ -65,7 +65,7 @@ g.stateGroup line {
}
.edgeLabel .label rect {
fill: ${options.tertiaryColor};
fill: ${options.labelBackgroundColor};
opacity: 0.5;
}
.edgeLabel .label text {
@@ -76,7 +76,7 @@ g.stateGroup line {
}
.stateLabel text {
fill: ${options.labelColor};
fill: ${options.stateLabelColor};
font-size: 10px;
font-weight: bold;
}
@@ -98,7 +98,7 @@ g.stateGroup line {
.node rect {
fill: ${options.stateBkg || options.mainBkg};
stroke: ${options.nodeBorder};
stroke: ${options.stateBorder || options.nodeBorder};
stroke-width: 1px;
}
.node polygon {
@@ -112,12 +112,12 @@ g.stateGroup line {
.statediagram-cluster rect {
fill: ${options.clusterTitleBackground};
stroke: ${options.compositeBorder || options.nodeBorder};
stroke: ${options.stateBorder || options.nodeBorder};
stroke-width: 1px;
}
.cluster-label, .nodeLabel {
color: ${options.labelColor};
color: ${options.stateLabelColor};
}
.statediagram-cluster rect.outer {
@@ -125,7 +125,7 @@ g.stateGroup line {
ry: 5px;
}
.statediagram-state .divider {
stroke: ${options.nodeBorder};
stroke: ${options.stateBorder || options.nodeBorder};
}
.statediagram-state .title-state {

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

@@ -49,6 +49,8 @@ class Theme {
this.tertiaryBorderColor =
this.tertiaryBorderColor || mkBorder(this.tertiaryColor, this.darkMode);
this.noteBorderColor = this.noteBorderColor || mkBorder(this.noteBkgColor, this.darkMode);
this.noteBkgColor = this.noteBkgColor || '#fff5ad';
this.noteTextColor = this.noteTextColor || '#333';
this.secondaryTextColor = this.secondaryTextColor || invert(this.secondaryColor);
this.tertiaryTextColor = this.tertiaryTextColor || invert(this.tertiaryColor);
@@ -110,8 +112,11 @@ class Theme {
/* state colors */
this.transitionColor = this.transitionColor || this.lineColor;
this.transitionLabelColor = this.labelColor || this.textColor;
this.labelColor = this.labelColor || this.textColor || this.primaryTextColor;
/* The color of the text tables of the tstates*/
this.stateLabelColor = this.stateLabelColor || this.stateBkg || this.primaryTextColor;
this.stateBkg = this.stateBkg || this.mainBkg;
this.labelBackgroundColor = this.labelBackgroundColor || this.stateBkg;
this.compositeBackground = this.compositeBackground || this.background || this.tertiaryColor;
this.altBackground = this.altBackground || this.tertiaryColor;
this.clusterTitleBackground = this.clusterTitleBackground || this.mainBkg;

14
src/themes/theme-dark.js
View File

@@ -127,8 +127,18 @@ class Theme {
this.taskTextDarkColor = this.darkTextColor;
/* state colors */
this.labelColor = this.textColor;
this.altBackground = lighten(this.background, 20);
this.transitionColor = this.transitionColor || this.lineColor;
this.transitionLabelColor = this.transitionLabelColor || this.textColor;
this.stateLabelColor = this.stateLabelColor || this.stateBkg || this.primaryTextColor;
this.stateBkg = this.stateBkg || this.mainBkg;
this.labelBackgroundColor = this.labelBackgroundColor || this.stateBkg;
this.compositeBackground = this.compositeBackground || this.background || this.tertiaryColor;
this.altBackground = this.altBackground || '#555';
this.clusterTitleBackground = this.clusterTitleBackground || this.mainBkg;
this.compositeBorder = this.compositeBorder || this.nodeBorder;
this.errorBkgColor = this.errorBkgColor || this.tertiaryColor;
this.errorTextColor = this.errorTextColor || this.tertiaryTextColor;
this.fillType0 = this.primaryColor;
this.fillType1 = this.secondaryColor;

14
src/themes/theme-default.js
View File

@@ -139,6 +139,20 @@ class Theme {
this.taskTextOutsideColor = this.taskTextDarkColor;
/* state colors */
this.transitionColor = this.transitionColor || this.lineColor;
this.transitionLabelColor = this.labelColor || this.textColor;
this.stateLabelColor = this.stateLabelColor || this.stateBkg || this.primaryTextColor;
this.stateBkg = this.stateBkg || this.mainBkg;
this.labelBackgroundColor = this.labelBackgroundColor || this.stateBkg;
this.compositeBackground = this.compositeBackground || this.background || this.tertiaryColor;
this.altBackground = this.altBackground || '#f0f0f0';
this.clusterTitleBackground = this.clusterTitleBackground || this.mainBkg;
this.compositeBorder = this.compositeBorder || this.nodeBorder;
this.errorBkgColor = this.errorBkgColor || this.tertiaryColor;
this.errorTextColor = this.errorTextColor || this.tertiaryTextColor;
this.transitionColor = this.transitionColor || this.lineColor;
/* class */
this.classText = this.primaryTextColor;
/* journey */

14
src/themes/theme-forest.js
View File

@@ -109,6 +109,20 @@ class Theme {
this.activeTaskBkgColor = this.mainBkg;
/* state colors */
this.transitionColor = this.transitionColor || this.lineColor;
this.transitionLabelColor = this.labelColor || this.textColor;
this.stateLabelColor = this.stateLabelColor || this.stateBkg || this.primaryTextColor;
this.stateBkg = this.stateBkg || this.mainBkg;
this.labelBackgroundColor = this.labelBackgroundColor || this.stateBkg;
this.compositeBackground = this.compositeBackground || this.background || this.tertiaryColor;
this.altBackground = this.altBackground || '#f0f0f0';
this.clusterTitleBackground = this.clusterTitleBackground || this.mainBkg;
this.compositeBorder = this.compositeBorder || this.nodeBorder;
this.errorBkgColor = this.errorBkgColor || this.tertiaryColor;
this.errorTextColor = this.errorTextColor || this.tertiaryTextColor;
this.transitionColor = this.transitionColor || this.lineColor;
/* class */
this.classText = this.primaryTextColor;
/* journey */

22
src/themes/theme-neutral.js
View File

@@ -24,7 +24,7 @@ class Theme {
this.lineColor = invert(this.background);
this.textColor = invert(this.background);
this.altBackground = lighten(this.contrast, 55);
// this.altBackground = lighten(this.contrast, 55);
this.mainBkg = '#eee';
this.secondBkg = 'calculated';
this.lineColor = '#666';
@@ -119,9 +119,9 @@ class Theme {
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;
this.noteBorderColor = '#999';
this.noteBkgColor = '#666';
this.noteTextColor = '#fff';
/* Gantt chart variables */
@@ -146,6 +146,20 @@ class Theme {
this.todayLineColor = this.critBkgColor;
/* state colors */
this.transitionColor = this.transitionColor || '#000';
this.transitionLabelColor = this.labelColor || this.textColor;
this.stateLabelColor = this.stateLabelColor || this.stateBkg || this.primaryTextColor;
this.stateBkg = this.stateBkg || this.mainBkg;
this.labelBackgroundColor = this.labelBackgroundColor || this.stateBkg;
this.compositeBackground = this.compositeBackground || this.background || this.tertiaryColor;
this.altBackground = this.altBackground || '#e0e0e0';
this.clusterTitleBackground = this.clusterTitleBackground || this.mainBkg;
this.stateBorder = this.stateBorder || '#000';
this.errorBkgColor = this.errorBkgColor || this.tertiaryColor;
this.errorTextColor = this.errorTextColor || this.tertiaryTextColor;
/* class */
this.classText = this.primaryTextColor;
/* journey */