Set a less prominent color in nested composite state and added demo page of styling

This commit is contained in:
Per Brolin
2024-06-12 14:54:03 +02:00
parent 7ff731163f
commit f17d788ac8
3 changed files with 1469 additions and 4 deletions

File diff suppressed because it is too large Load Diff

View File

@@ -107,7 +107,7 @@ g.stateGroup line {
}
.end-state-inner {
fill: ${options.compositeBackground || options.background};
// stroke: ${options.background};
stroke: ${options.background};
stroke-width: 1.5
}
@@ -152,8 +152,7 @@ g.stateGroup line {
fill: ${options.compositeBackground || options.background};
}
.statediagram-cluster.statediagram-cluster-alt .inner {
fill: ${options.altBackground ? options.altBackground : '#efefef'};
fill: ${options.altBackground ? options.altBackground : '#f0f0f0'};
}
.statediagram-cluster .inner {

View File

@@ -125,7 +125,7 @@ class Theme {
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.altBackground = this.altBackground || '#f0f0f0';
this.compositeTitleBackground = this.compositeTitleBackground || this.mainBkg;
this.compositeBorder = this.compositeBorder || this.nodeBorder;
this.innerEndBackground = this.nodeBorder;