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

Browse Source
This commit is contained in:
Knut Sveidqvist
2021-05-06 07:50:24 +02:00
parent aa39dcc34f
commit a1cd398e4d
3 changed files with 55 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,5 +1,10 @@
const getStyles = options =>
`g.stateGroup text {
`
defs #statediagram-barbEnd {
fill: ${options.transitionColor};
stroke: ${options.transitionColor};
}
g.stateGroup text {
fill: ${options.nodeBorder};
stroke: none;
font-size: 10px;
@@ -26,7 +31,7 @@ g.stateGroup line {
}
.transition {
stroke: ${options.lineColor};
stroke: ${options.transitionColor};
stroke-width: 1;
fill: none;
}
@@ -64,10 +69,10 @@ g.stateGroup line {
opacity: 0.5;
}
.edgeLabel .label text {
fill: ${options.tertiaryTextColor};
fill: ${options.transitionLabelColor || options.tertiaryTextColor};
}
.label div .edgeLabel {
color: ${options.tertiaryTextColor};
color: ${options.transitionLabelColor || options.tertiaryTextColor};
}
.stateLabel text {
@@ -86,13 +91,13 @@ g.stateGroup line {
stroke-width: 1.5
}
.end-state-inner {
fill: ${options.background};
fill: ${options.compositeBackground || options.background};
// stroke: ${options.background};
stroke-width: 1.5
}
.node rect {
fill: ${options.mainBkg};
fill: ${options.stateBkg || options.mainBkg};
stroke: ${options.nodeBorder};
stroke-width: 1px;
}
@@ -106,13 +111,13 @@ g.stateGroup line {
}
.statediagram-cluster rect {
fill: ${options.mainBkg};
stroke: ${options.nodeBorder};
fill: ${options.clusterTitleBackground};
stroke: ${options.compositeBorder || options.nodeBorder};
stroke-width: 1px;
}
.cluster-label, .nodeLabel {
color: ${options.textColor};
color: ${options.labelColor};
}
.statediagram-cluster rect.outer {
@@ -128,10 +133,10 @@ g.stateGroup line {
ry: 5px;
}
.statediagram-cluster.statediagram-cluster .inner {
fill: ${options.background};
fill: ${options.compositeBackground || options.background};
}
.statediagram-cluster.statediagram-cluster-alt .inner {
fill: #e0e0e0;
fill: ${options.altBackground ? options.altBackground : '#efefef'};
}
.statediagram-cluster .inner {
@@ -174,6 +179,9 @@ g.stateGroup line {
.statediagram-note .nodeLabel {
color: ${options.noteTextColor};
}
.statediagram .edgeLabel {
color: red; // ${options.noteTextColor};
}
#dependencyStart, #dependencyEnd {
fill: ${options.lineColor};

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

@@ -108,10 +108,18 @@ class Theme {
this.taskTextClickableColor = this.taskTextClickableColor || '#003163';
/* state colors */
this.labelColor = this.labelColor || this.primaryTextColor;
this.transitionColor = this.transitionColor || this.lineColor;
this.transitionLabelColor = this.labelColor || this.textColor;
this.labelColor = this.labelColor || this.textColor || this.primaryTextColor;
this.stateBkg = this.stateBkg || this.mainBkg;
this.compositeBackground = this.compositeBackground || this.background || this.tertiaryColor;
this.altBackground = this.altBackground || this.tertiaryColor;
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.classText || this.textColor;