mirror of
https://github.com/mermaid-js/mermaid.git
synced 2025-12-02 10:34:22 +01:00
getting there
This commit is contained in:
Ashish Jain
@@ -1,96 +1,96 @@
|
||||
g.classGroup text {
|
||||
fill: $nodeBorder;
|
||||
stroke: none;
|
||||
font-family: 'trebuchet ms', verdana, arial;
|
||||
font-family: var(--mermaid-font-family);
|
||||
font-size: 10px;
|
||||
|
||||
.title {
|
||||
font-weight: bolder;
|
||||
}
|
||||
}
|
||||
|
||||
.divider {
|
||||
stroke: $nodeBorder;
|
||||
stroke-width: 1;
|
||||
}
|
||||
|
||||
g.clickable {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
g.classGroup rect {
|
||||
fill: $nodeBkg;
|
||||
stroke: $nodeBorder;
|
||||
}
|
||||
|
||||
g.classGroup line {
|
||||
stroke: $nodeBorder;
|
||||
stroke-width: 1;
|
||||
}
|
||||
|
||||
.classLabel .box {
|
||||
stroke: none;
|
||||
stroke-width: 0;
|
||||
fill: $nodeBkg;
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.classLabel .label {
|
||||
fill: $nodeBorder;
|
||||
font-size: 10px;
|
||||
}
|
||||
|
||||
.relation {
|
||||
stroke: $nodeBorder;
|
||||
stroke-width: 1;
|
||||
fill: none;
|
||||
}
|
||||
|
||||
.dashed-line{
|
||||
stroke-dasharray: 3;
|
||||
}
|
||||
|
||||
@mixin composition {
|
||||
fill: $nodeBorder !important ;
|
||||
stroke: $nodeBorder !important ;
|
||||
stroke-width: 1;
|
||||
}
|
||||
|
||||
#compositionStart, .composition {
|
||||
@include composition;
|
||||
}
|
||||
|
||||
#compositionEnd, .composition {
|
||||
@include composition;
|
||||
}
|
||||
|
||||
@mixin aggregation {
|
||||
fill: $nodeBkg !important ;
|
||||
stroke: $nodeBorder !important ;
|
||||
stroke-width: 1;
|
||||
}
|
||||
|
||||
#aggregationStart, .aggregation {
|
||||
@include aggregation;
|
||||
}
|
||||
|
||||
#aggregationEnd, .aggregation {
|
||||
@include aggregation;
|
||||
}
|
||||
|
||||
#dependencyStart, .dependency {
|
||||
@include composition;
|
||||
}
|
||||
|
||||
#dependencyEnd, .dependency {
|
||||
@include composition;
|
||||
}
|
||||
|
||||
#extensionStart , .extension{
|
||||
@include composition;
|
||||
}
|
||||
|
||||
#extensionEnd, .extension {
|
||||
@include composition;
|
||||
}
|
||||
g.classGroup text {
|
||||
fill: $nodeBorder;
|
||||
stroke: none;
|
||||
font-family: 'trebuchet ms', verdana, arial;
|
||||
font-family: var(--mermaid-font-family);
|
||||
font-size: 10px;
|
||||
|
||||
.title {
|
||||
font-weight: bolder;
|
||||
}
|
||||
}
|
||||
|
||||
.divider {
|
||||
stroke: $nodeBorder;
|
||||
stroke-width: 1;
|
||||
}
|
||||
|
||||
g.clickable {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
g.classGroup rect {
|
||||
fill: $nodeBkg;
|
||||
stroke: $nodeBorder;
|
||||
}
|
||||
|
||||
g.classGroup line {
|
||||
stroke: $nodeBorder;
|
||||
stroke-width: 1;
|
||||
}
|
||||
|
||||
.classLabel .box {
|
||||
stroke: none;
|
||||
stroke-width: 0;
|
||||
fill: $nodeBkg;
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.classLabel .label {
|
||||
fill: $nodeBorder;
|
||||
font-size: 10px;
|
||||
}
|
||||
|
||||
.relation {
|
||||
stroke: $nodeBorder;
|
||||
stroke-width: 1;
|
||||
fill: none;
|
||||
}
|
||||
|
||||
.dashed-line{
|
||||
stroke-dasharray: 3;
|
||||
}
|
||||
|
||||
@mixin composition {
|
||||
fill: $nodeBorder !important ;
|
||||
stroke: $nodeBorder !important ;
|
||||
stroke-width: 1;
|
||||
}
|
||||
|
||||
#compositionStart, .composition {
|
||||
@include composition;
|
||||
}
|
||||
|
||||
#compositionEnd, .composition {
|
||||
@include composition;
|
||||
}
|
||||
|
||||
@mixin aggregation {
|
||||
fill: $nodeBkg !important ;
|
||||
stroke: $nodeBorder !important ;
|
||||
stroke-width: 1;
|
||||
}
|
||||
|
||||
#aggregationStart, .aggregation {
|
||||
@include aggregation;
|
||||
}
|
||||
|
||||
#aggregationEnd, .aggregation {
|
||||
@include aggregation;
|
||||
}
|
||||
|
||||
#dependencyStart, .dependency {
|
||||
@include composition;
|
||||
}
|
||||
|
||||
#dependencyEnd, .dependency {
|
||||
@include composition;
|
||||
}
|
||||
|
||||
#extensionStart , .extension{
|
||||
@include composition;
|
||||
}
|
||||
|
||||
#extensionEnd, .extension {
|
||||
@include composition;
|
||||
}
|
||||
|
||||
@@ -1,67 +1,67 @@
|
||||
$mainBkg: #1f2020;
|
||||
$secondBkg: lighten(#1f2020, 16);
|
||||
$mainContrastColor: lightgrey;
|
||||
$darkTextColor: #fefefe;
|
||||
$lineColor: $mainContrastColor;
|
||||
$border1: #81B1DB;
|
||||
$border2: rgba(255, 255, 255, 0.25);
|
||||
$arrowheadColor: $mainContrastColor;
|
||||
|
||||
/* Flowchart variables */
|
||||
|
||||
$nodeBkg: $mainBkg;
|
||||
$nodeBorder: $border1;
|
||||
$clusterBkg: $secondBkg;
|
||||
$clusterBorder: $border2;
|
||||
$defaultLinkColor: $lineColor;
|
||||
$titleColor: #F9FFFE;
|
||||
$edgeLabelBackground: #e8e8e8;
|
||||
$edgeLabelcolor: #333;
|
||||
|
||||
/* Sequence Diagram variables */
|
||||
|
||||
$actorBorder: $border1;
|
||||
$actorBkg: $mainBkg;
|
||||
$actorTextColor: $mainContrastColor;
|
||||
$actorLineColor: $mainContrastColor;
|
||||
$signalColor: $mainContrastColor;
|
||||
$signalTextColor: $mainContrastColor;
|
||||
$labelBoxBkgColor: $actorBkg;
|
||||
$labelBoxBorderColor: $actorBorder;
|
||||
$labelTextColor: $mainContrastColor;
|
||||
$loopTextColor: $mainContrastColor;
|
||||
$noteBorderColor: $border2;
|
||||
$noteBkgColor: #fff5ad;
|
||||
$noteTextColor: $mainBkg;
|
||||
$activationBorderColor: $border1;
|
||||
$activationBkgColor: $secondBkg;
|
||||
$sequenceNumberColor: black;
|
||||
|
||||
/* Gantt chart variables */
|
||||
|
||||
$sectionBkgColor: rgba(255, 255, 255, 0.3);
|
||||
$altSectionBkgColor: white;
|
||||
$sectionBkgColor2: #EAE8B9;
|
||||
$taskBorderColor: rgba(255, 255, 255, 0.5);
|
||||
$taskBkgColor: $mainBkg;
|
||||
$taskTextColor: $darkTextColor;
|
||||
$taskTextLightColor: $mainContrastColor;
|
||||
$taskTextOutsideColor: $taskTextLightColor;
|
||||
$taskTextClickableColor: #003163;
|
||||
$activeTaskBorderColor: rgba(255, 255, 255, 0.5);
|
||||
$activeTaskBkgColor: #81B1DB;
|
||||
$gridColor: $mainContrastColor;
|
||||
$doneTaskBkgColor: $mainContrastColor;
|
||||
$doneTaskBorderColor: grey;
|
||||
$critBorderColor: #E83737;
|
||||
$critBkgColor: #E83737;
|
||||
$taskTextDarkColor: $darkTextColor;
|
||||
$todayLineColor: #DB5757;
|
||||
|
||||
/* state colors */
|
||||
$labelColor: #f4f4f4;
|
||||
|
||||
$errorBkgColor: #a44141;
|
||||
$errorTextColor: #ddd;
|
||||
|
||||
@import '../mermaid';
|
||||
$mainBkg: #1f2020;
|
||||
$secondBkg: lighten(#1f2020, 16);
|
||||
$mainContrastColor: lightgrey;
|
||||
$darkTextColor: #fefefe;
|
||||
$lineColor: $mainContrastColor;
|
||||
$border1: #81B1DB;
|
||||
$border2: rgba(255, 255, 255, 0.25);
|
||||
$arrowheadColor: $mainContrastColor;
|
||||
|
||||
/* Flowchart variables */
|
||||
|
||||
$nodeBkg: $mainBkg;
|
||||
$nodeBorder: $border1;
|
||||
$clusterBkg: $secondBkg;
|
||||
$clusterBorder: $border2;
|
||||
$defaultLinkColor: $lineColor;
|
||||
$titleColor: #F9FFFE;
|
||||
$edgeLabelBackground: #e8e8e8;
|
||||
$edgeLabelcolor: #333;
|
||||
|
||||
/* Sequence Diagram variables */
|
||||
|
||||
$actorBorder: $border1;
|
||||
$actorBkg: $mainBkg;
|
||||
$actorTextColor: $mainContrastColor;
|
||||
$actorLineColor: $mainContrastColor;
|
||||
$signalColor: $mainContrastColor;
|
||||
$signalTextColor: $mainContrastColor;
|
||||
$labelBoxBkgColor: $actorBkg;
|
||||
$labelBoxBorderColor: $actorBorder;
|
||||
$labelTextColor: $mainContrastColor;
|
||||
$loopTextColor: $mainContrastColor;
|
||||
$noteBorderColor: $border2;
|
||||
$noteBkgColor: #fff5ad;
|
||||
$noteTextColor: $mainBkg;
|
||||
$activationBorderColor: $border1;
|
||||
$activationBkgColor: $secondBkg;
|
||||
$sequenceNumberColor: black;
|
||||
|
||||
/* Gantt chart variables */
|
||||
|
||||
$sectionBkgColor: rgba(255, 255, 255, 0.3);
|
||||
$altSectionBkgColor: white;
|
||||
$sectionBkgColor2: #EAE8B9;
|
||||
$taskBorderColor: rgba(255, 255, 255, 0.5);
|
||||
$taskBkgColor: $mainBkg;
|
||||
$taskTextColor: $darkTextColor;
|
||||
$taskTextLightColor: $mainContrastColor;
|
||||
$taskTextOutsideColor: $taskTextLightColor;
|
||||
$taskTextClickableColor: #003163;
|
||||
$activeTaskBorderColor: rgba(255, 255, 255, 0.5);
|
||||
$activeTaskBkgColor: #81B1DB;
|
||||
$gridColor: $mainContrastColor;
|
||||
$doneTaskBkgColor: $mainContrastColor;
|
||||
$doneTaskBorderColor: grey;
|
||||
$critBorderColor: #E83737;
|
||||
$critBkgColor: #E83737;
|
||||
$taskTextDarkColor: $darkTextColor;
|
||||
$todayLineColor: #DB5757;
|
||||
|
||||
/* state colors */
|
||||
$labelColor: #f4f4f4;
|
||||
|
||||
$errorBkgColor: #a44141;
|
||||
$errorTextColor: #ddd;
|
||||
|
||||
@import '../mermaid';
|
||||
|
||||
@@ -1,65 +1,65 @@
|
||||
$mainBkg: #ECECFF;
|
||||
$secondBkg: #ffffde;
|
||||
$lineColor: #333333;
|
||||
$border1: #CCCCFF;
|
||||
$border2: #aaaa33;
|
||||
$arrowheadColor: #333333;
|
||||
|
||||
/* Flowchart variables */
|
||||
|
||||
$nodeBkg: $mainBkg;
|
||||
$nodeBorder: #9370DB;
|
||||
$clusterBkg: $secondBkg;
|
||||
$clusterBorder: $border2;
|
||||
$defaultLinkColor: $lineColor;
|
||||
$titleColor: #333;
|
||||
$edgeLabelBackground: #e8e8e8;
|
||||
$edgeLabelcolor: #333;
|
||||
|
||||
/* Sequence Diagram variables */
|
||||
|
||||
$actorBorder: $border1;
|
||||
$actorBkg: $mainBkg;
|
||||
$actorTextColor: black;
|
||||
$actorLineColor: grey;
|
||||
$signalColor: #333;
|
||||
$signalTextColor: #333;
|
||||
$labelBoxBkgColor: $actorBkg;
|
||||
$labelBoxBorderColor: $actorBorder;
|
||||
$labelTextColor: $actorTextColor;
|
||||
$loopTextColor: $actorTextColor;
|
||||
$noteBorderColor: $border2;
|
||||
$noteBkgColor: #fff5ad;
|
||||
$noteTextColor: $actorTextColor;
|
||||
$activationBorderColor: #666;
|
||||
$activationBkgColor: #f4f4f4;
|
||||
$sequenceNumberColor: white;
|
||||
|
||||
/* Gantt chart variables */
|
||||
|
||||
$sectionBkgColor: rgba(102, 102, 255, 0.49);
|
||||
$altSectionBkgColor: white;
|
||||
$sectionBkgColor2: #fff400;
|
||||
$taskBorderColor: #534fbc;
|
||||
$taskBkgColor: #8a90dd;
|
||||
$taskTextLightColor: white;
|
||||
$taskTextColor: $taskTextLightColor;
|
||||
$taskTextDarkColor: black;
|
||||
$taskTextOutsideColor: $taskTextDarkColor;
|
||||
$taskTextClickableColor: #003163;
|
||||
$activeTaskBorderColor: #534fbc;
|
||||
$activeTaskBkgColor: #bfc7ff;
|
||||
$gridColor: lightgrey;
|
||||
$doneTaskBkgColor: lightgrey;
|
||||
$doneTaskBorderColor: grey;
|
||||
$critBorderColor: #ff8888;
|
||||
$critBkgColor: red;
|
||||
$todayLineColor: red;
|
||||
|
||||
/* state colors */
|
||||
$labelColor: black;
|
||||
|
||||
$errorBkgColor: #552222;
|
||||
$errorTextColor: #552222;
|
||||
|
||||
@import '../mermaid';
|
||||
$mainBkg: #ECECFF;
|
||||
$secondBkg: #ffffde;
|
||||
$lineColor: #333333;
|
||||
$border1: #CCCCFF;
|
||||
$border2: #aaaa33;
|
||||
$arrowheadColor: #333333;
|
||||
|
||||
/* Flowchart variables */
|
||||
|
||||
$nodeBkg: $mainBkg;
|
||||
$nodeBorder: #9370DB;
|
||||
$clusterBkg: $secondBkg;
|
||||
$clusterBorder: $border2;
|
||||
$defaultLinkColor: $lineColor;
|
||||
$titleColor: #333;
|
||||
$edgeLabelBackground: #e8e8e8;
|
||||
$edgeLabelcolor: #333;
|
||||
|
||||
/* Sequence Diagram variables */
|
||||
|
||||
$actorBorder: $border1;
|
||||
$actorBkg: $mainBkg;
|
||||
$actorTextColor: black;
|
||||
$actorLineColor: grey;
|
||||
$signalColor: #333;
|
||||
$signalTextColor: #333;
|
||||
$labelBoxBkgColor: $actorBkg;
|
||||
$labelBoxBorderColor: $actorBorder;
|
||||
$labelTextColor: $actorTextColor;
|
||||
$loopTextColor: $actorTextColor;
|
||||
$noteBorderColor: $border2;
|
||||
$noteBkgColor: #fff5ad;
|
||||
$noteTextColor: $actorTextColor;
|
||||
$activationBorderColor: #666;
|
||||
$activationBkgColor: #f4f4f4;
|
||||
$sequenceNumberColor: white;
|
||||
|
||||
/* Gantt chart variables */
|
||||
|
||||
$sectionBkgColor: rgba(102, 102, 255, 0.49);
|
||||
$altSectionBkgColor: white;
|
||||
$sectionBkgColor2: #fff400;
|
||||
$taskBorderColor: #534fbc;
|
||||
$taskBkgColor: #8a90dd;
|
||||
$taskTextLightColor: white;
|
||||
$taskTextColor: $taskTextLightColor;
|
||||
$taskTextDarkColor: black;
|
||||
$taskTextOutsideColor: $taskTextDarkColor;
|
||||
$taskTextClickableColor: #003163;
|
||||
$activeTaskBorderColor: #534fbc;
|
||||
$activeTaskBkgColor: #bfc7ff;
|
||||
$gridColor: lightgrey;
|
||||
$doneTaskBkgColor: lightgrey;
|
||||
$doneTaskBorderColor: grey;
|
||||
$critBorderColor: #ff8888;
|
||||
$critBkgColor: red;
|
||||
$todayLineColor: red;
|
||||
|
||||
/* state colors */
|
||||
$labelColor: black;
|
||||
|
||||
$errorBkgColor: #552222;
|
||||
$errorTextColor: #552222;
|
||||
|
||||
@import '../mermaid';
|
||||
|
||||
@@ -1,78 +1,78 @@
|
||||
.label {
|
||||
font-family: 'trebuchet ms', verdana, arial;
|
||||
font-family: var(--mermaid-font-family);
|
||||
fill: $titleColor;
|
||||
color: $titleColor;
|
||||
}
|
||||
|
||||
.label text {
|
||||
fill: $titleColor;
|
||||
}
|
||||
|
||||
.node rect,
|
||||
.node circle,
|
||||
.node ellipse,
|
||||
.node polygon,
|
||||
.node path {
|
||||
fill: $mainBkg;
|
||||
stroke: $nodeBorder;
|
||||
stroke-width: 1px;
|
||||
}
|
||||
|
||||
.node .label {
|
||||
text-align: center;
|
||||
fill: $titleColor;
|
||||
}
|
||||
.node.clickable {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.arrowheadPath {
|
||||
fill: $arrowheadColor;
|
||||
}
|
||||
|
||||
.edgePath .path {
|
||||
stroke: $lineColor;
|
||||
stroke-width: 1.5px;
|
||||
}
|
||||
|
||||
.flowchart-link {
|
||||
stroke: $lineColor;
|
||||
fill: none;
|
||||
}
|
||||
|
||||
.edgeLabel {
|
||||
background-color: $edgeLabelBackground;
|
||||
rect {
|
||||
opacity: 0.9;
|
||||
}
|
||||
text-align: center;
|
||||
span {
|
||||
color: $edgeLabelcolor;
|
||||
}
|
||||
}
|
||||
|
||||
.cluster rect {
|
||||
fill: $secondBkg;
|
||||
stroke: $clusterBorder;
|
||||
stroke-width: 1px;
|
||||
}
|
||||
|
||||
.cluster text {
|
||||
fill: $titleColor;
|
||||
}
|
||||
|
||||
div.mermaidTooltip {
|
||||
position: absolute;
|
||||
text-align: center;
|
||||
max-width: 200px;
|
||||
padding: 2px;
|
||||
font-family: 'trebuchet ms', verdana, arial;
|
||||
font-family: var(--mermaid-font-family);
|
||||
font-size: 12px;
|
||||
background: $secondBkg;
|
||||
border: 1px solid $border2;
|
||||
border-radius: 2px;
|
||||
pointer-events: none;
|
||||
z-index: 100;
|
||||
}
|
||||
.label {
|
||||
font-family: 'trebuchet ms', verdana, arial;
|
||||
font-family: var(--mermaid-font-family);
|
||||
fill: $titleColor;
|
||||
color: $titleColor;
|
||||
}
|
||||
|
||||
.label text {
|
||||
fill: $titleColor;
|
||||
}
|
||||
|
||||
.node rect,
|
||||
.node circle,
|
||||
.node ellipse,
|
||||
.node polygon,
|
||||
.node path {
|
||||
fill: $mainBkg;
|
||||
stroke: $nodeBorder;
|
||||
stroke-width: 1px;
|
||||
}
|
||||
|
||||
.node .label {
|
||||
text-align: center;
|
||||
fill: $titleColor;
|
||||
}
|
||||
.node.clickable {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.arrowheadPath {
|
||||
fill: $arrowheadColor;
|
||||
}
|
||||
|
||||
.edgePath .path {
|
||||
stroke: $lineColor;
|
||||
stroke-width: 1.5px;
|
||||
}
|
||||
|
||||
.flowchart-link {
|
||||
stroke: $lineColor;
|
||||
fill: none;
|
||||
}
|
||||
|
||||
.edgeLabel {
|
||||
background-color: $edgeLabelBackground;
|
||||
rect {
|
||||
opacity: 0.9;
|
||||
}
|
||||
text-align: center;
|
||||
span {
|
||||
color: $edgeLabelcolor;
|
||||
}
|
||||
}
|
||||
|
||||
.cluster rect {
|
||||
fill: $secondBkg;
|
||||
stroke: $clusterBorder;
|
||||
stroke-width: 1px;
|
||||
}
|
||||
|
||||
.cluster text {
|
||||
fill: $titleColor;
|
||||
}
|
||||
|
||||
div.mermaidTooltip {
|
||||
position: absolute;
|
||||
text-align: center;
|
||||
max-width: 200px;
|
||||
padding: 2px;
|
||||
font-family: 'trebuchet ms', verdana, arial;
|
||||
font-family: var(--mermaid-font-family);
|
||||
font-size: 12px;
|
||||
background: $secondBkg;
|
||||
border: 1px solid $border2;
|
||||
border-radius: 2px;
|
||||
pointer-events: none;
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
@@ -1,65 +1,65 @@
|
||||
$mainBkg: #cde498;
|
||||
$secondBkg: #cdffb2;
|
||||
$lineColor: #1a3318;
|
||||
$lineColor: green;
|
||||
$border1: #13540c;
|
||||
$border2: #6eaa49;
|
||||
$arrowheadColor: green;
|
||||
|
||||
/* Flowchart variables */
|
||||
|
||||
$nodeBkg: $mainBkg;
|
||||
$nodeBorder: $border1;
|
||||
$clusterBkg: $secondBkg;
|
||||
$clusterBorder: $border2;
|
||||
$defaultLinkColor: $lineColor;
|
||||
$titleColor: #333;
|
||||
$edgeLabelBackground: #e8e8e8;
|
||||
$edgeLabelcolor: #333;
|
||||
/* Sequence Diagram variables */
|
||||
|
||||
$actorBorder: $border1;
|
||||
$actorBkg: $mainBkg;
|
||||
$actorTextColor: black;
|
||||
$actorLineColor: grey;
|
||||
$signalColor: #333;
|
||||
$signalTextColor: #333;
|
||||
$labelBoxBkgColor: $actorBkg;
|
||||
$labelBoxBorderColor: #326932;
|
||||
$labelTextColor: $actorTextColor;
|
||||
$loopTextColor: $actorTextColor;
|
||||
$noteBorderColor: $border2;
|
||||
$noteBkgColor: #fff5ad;
|
||||
$noteTextColor: $actorTextColor;
|
||||
$activationBorderColor: #666;
|
||||
$activationBkgColor: #f4f4f4;
|
||||
$sequenceNumberColor: white;
|
||||
|
||||
/* Gantt chart variables */
|
||||
|
||||
$sectionBkgColor: #6eaa49;
|
||||
$altSectionBkgColor: white;
|
||||
$sectionBkgColor2: #6eaa49;
|
||||
$taskBorderColor: $border1;
|
||||
$taskBkgColor: #487e3a;
|
||||
$taskTextLightColor: white;
|
||||
$taskTextColor: $taskTextLightColor;
|
||||
$taskTextDarkColor: black;
|
||||
$taskTextOutsideColor: $taskTextDarkColor;
|
||||
$taskTextClickableColor: #003163;
|
||||
$activeTaskBorderColor: $taskBorderColor;
|
||||
$activeTaskBkgColor: $mainBkg;
|
||||
$gridColor: lightgrey;
|
||||
$doneTaskBkgColor: lightgrey;
|
||||
$doneTaskBorderColor: grey;
|
||||
$critBorderColor: #ff8888;
|
||||
$critBkgColor: red;
|
||||
$todayLineColor: red;
|
||||
|
||||
/* state colors */
|
||||
$labelColor: black;
|
||||
|
||||
$errorBkgColor: #552222;
|
||||
$errorTextColor: #552222;
|
||||
|
||||
@import '../mermaid';
|
||||
$mainBkg: #cde498;
|
||||
$secondBkg: #cdffb2;
|
||||
$lineColor: #1a3318;
|
||||
$lineColor: green;
|
||||
$border1: #13540c;
|
||||
$border2: #6eaa49;
|
||||
$arrowheadColor: green;
|
||||
|
||||
/* Flowchart variables */
|
||||
|
||||
$nodeBkg: $mainBkg;
|
||||
$nodeBorder: $border1;
|
||||
$clusterBkg: $secondBkg;
|
||||
$clusterBorder: $border2;
|
||||
$defaultLinkColor: $lineColor;
|
||||
$titleColor: #333;
|
||||
$edgeLabelBackground: #e8e8e8;
|
||||
$edgeLabelcolor: #333;
|
||||
/* Sequence Diagram variables */
|
||||
|
||||
$actorBorder: $border1;
|
||||
$actorBkg: $mainBkg;
|
||||
$actorTextColor: black;
|
||||
$actorLineColor: grey;
|
||||
$signalColor: #333;
|
||||
$signalTextColor: #333;
|
||||
$labelBoxBkgColor: $actorBkg;
|
||||
$labelBoxBorderColor: #326932;
|
||||
$labelTextColor: $actorTextColor;
|
||||
$loopTextColor: $actorTextColor;
|
||||
$noteBorderColor: $border2;
|
||||
$noteBkgColor: #fff5ad;
|
||||
$noteTextColor: $actorTextColor;
|
||||
$activationBorderColor: #666;
|
||||
$activationBkgColor: #f4f4f4;
|
||||
$sequenceNumberColor: white;
|
||||
|
||||
/* Gantt chart variables */
|
||||
|
||||
$sectionBkgColor: #6eaa49;
|
||||
$altSectionBkgColor: white;
|
||||
$sectionBkgColor2: #6eaa49;
|
||||
$taskBorderColor: $border1;
|
||||
$taskBkgColor: #487e3a;
|
||||
$taskTextLightColor: white;
|
||||
$taskTextColor: $taskTextLightColor;
|
||||
$taskTextDarkColor: black;
|
||||
$taskTextOutsideColor: $taskTextDarkColor;
|
||||
$taskTextClickableColor: #003163;
|
||||
$activeTaskBorderColor: $taskBorderColor;
|
||||
$activeTaskBkgColor: $mainBkg;
|
||||
$gridColor: lightgrey;
|
||||
$doneTaskBkgColor: lightgrey;
|
||||
$doneTaskBorderColor: grey;
|
||||
$critBorderColor: #ff8888;
|
||||
$critBkgColor: red;
|
||||
$todayLineColor: red;
|
||||
|
||||
/* state colors */
|
||||
$labelColor: black;
|
||||
|
||||
$errorBkgColor: #552222;
|
||||
$errorTextColor: #552222;
|
||||
|
||||
@import '../mermaid';
|
||||
|
||||
@@ -1,258 +1,258 @@
|
||||
/** Section styling */
|
||||
|
||||
.mermaid-main-font {
|
||||
font-family: "trebuchet ms", verdana, arial;
|
||||
font-family: var(--mermaid-font-family);
|
||||
}
|
||||
|
||||
.section {
|
||||
stroke: none;
|
||||
opacity: 0.2;
|
||||
}
|
||||
|
||||
.section0 {
|
||||
fill: $sectionBkgColor;
|
||||
}
|
||||
|
||||
.section2 {
|
||||
fill: $sectionBkgColor2;
|
||||
}
|
||||
|
||||
.section1,
|
||||
.section3 {
|
||||
fill: $altSectionBkgColor;
|
||||
opacity: 0.2;
|
||||
}
|
||||
|
||||
.sectionTitle0 {
|
||||
fill: $titleColor;
|
||||
}
|
||||
|
||||
.sectionTitle1 {
|
||||
fill: $titleColor;
|
||||
}
|
||||
|
||||
.sectionTitle2 {
|
||||
fill: $titleColor;
|
||||
}
|
||||
|
||||
.sectionTitle3 {
|
||||
fill: $titleColor;
|
||||
}
|
||||
|
||||
.sectionTitle {
|
||||
text-anchor: start;
|
||||
font-size: 11px;
|
||||
text-height: 14px;
|
||||
font-family: 'trebuchet ms', verdana, arial;
|
||||
font-family: var(--mermaid-font-family);
|
||||
|
||||
}
|
||||
|
||||
|
||||
/* Grid and axis */
|
||||
|
||||
.grid .tick {
|
||||
stroke: $gridColor;
|
||||
opacity: 0.8;
|
||||
shape-rendering: crispEdges;
|
||||
text {
|
||||
font-family: 'trebuchet ms', verdana, arial;
|
||||
font-family: var(--mermaid-font-family);
|
||||
}
|
||||
}
|
||||
|
||||
.grid path {
|
||||
stroke-width: 0;
|
||||
}
|
||||
|
||||
|
||||
/* Today line */
|
||||
|
||||
.today {
|
||||
fill: none;
|
||||
stroke: $todayLineColor;
|
||||
stroke-width: 2px;
|
||||
}
|
||||
|
||||
|
||||
/* Task styling */
|
||||
|
||||
/* Default task */
|
||||
|
||||
.task {
|
||||
stroke-width: 2;
|
||||
}
|
||||
|
||||
.taskText {
|
||||
text-anchor: middle;
|
||||
font-family: 'trebuchet ms', verdana, arial;
|
||||
font-family: var(--mermaid-font-family);
|
||||
}
|
||||
|
||||
.taskText:not([font-size]) {
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
.taskTextOutsideRight {
|
||||
fill: $taskTextDarkColor;
|
||||
text-anchor: start;
|
||||
font-size: 11px;
|
||||
font-family: 'trebuchet ms', verdana, arial;
|
||||
font-family: var(--mermaid-font-family);
|
||||
|
||||
}
|
||||
|
||||
.taskTextOutsideLeft {
|
||||
fill: $taskTextDarkColor;
|
||||
text-anchor: end;
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
/* Special case clickable */
|
||||
.task.clickable {
|
||||
cursor: pointer;
|
||||
}
|
||||
.taskText.clickable {
|
||||
cursor: pointer;
|
||||
fill: $taskTextClickableColor !important;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.taskTextOutsideLeft.clickable {
|
||||
cursor: pointer;
|
||||
fill: $taskTextClickableColor !important;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.taskTextOutsideRight.clickable {
|
||||
cursor: pointer;
|
||||
fill: $taskTextClickableColor !important;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
/* Specific task settings for the sections*/
|
||||
|
||||
.taskText0,
|
||||
.taskText1,
|
||||
.taskText2,
|
||||
.taskText3 {
|
||||
fill: $taskTextColor;
|
||||
}
|
||||
|
||||
.task0,
|
||||
.task1,
|
||||
.task2,
|
||||
.task3 {
|
||||
fill: $taskBkgColor;
|
||||
stroke: $taskBorderColor;
|
||||
}
|
||||
|
||||
.taskTextOutside0,
|
||||
.taskTextOutside2
|
||||
{
|
||||
fill: $taskTextOutsideColor;
|
||||
}
|
||||
|
||||
.taskTextOutside1,
|
||||
.taskTextOutside3 {
|
||||
fill: $taskTextOutsideColor;
|
||||
}
|
||||
|
||||
|
||||
/* Active task */
|
||||
|
||||
.active0,
|
||||
.active1,
|
||||
.active2,
|
||||
.active3 {
|
||||
fill: $activeTaskBkgColor;
|
||||
stroke: $activeTaskBorderColor;
|
||||
}
|
||||
|
||||
.activeText0,
|
||||
.activeText1,
|
||||
.activeText2,
|
||||
.activeText3 {
|
||||
fill: $taskTextDarkColor !important;
|
||||
}
|
||||
|
||||
|
||||
/* Completed task */
|
||||
|
||||
.done0,
|
||||
.done1,
|
||||
.done2,
|
||||
.done3 {
|
||||
stroke: $doneTaskBorderColor;
|
||||
fill: $doneTaskBkgColor;
|
||||
stroke-width: 2;
|
||||
}
|
||||
|
||||
.doneText0,
|
||||
.doneText1,
|
||||
.doneText2,
|
||||
.doneText3 {
|
||||
fill: $taskTextDarkColor !important;
|
||||
}
|
||||
|
||||
|
||||
/* Tasks on the critical line */
|
||||
|
||||
.crit0,
|
||||
.crit1,
|
||||
.crit2,
|
||||
.crit3 {
|
||||
stroke: $critBorderColor;
|
||||
fill: $critBkgColor;
|
||||
stroke-width: 2;
|
||||
}
|
||||
|
||||
.activeCrit0,
|
||||
.activeCrit1,
|
||||
.activeCrit2,
|
||||
.activeCrit3 {
|
||||
stroke: $critBorderColor;
|
||||
fill: $activeTaskBkgColor;
|
||||
stroke-width: 2;
|
||||
}
|
||||
|
||||
.doneCrit0,
|
||||
.doneCrit1,
|
||||
.doneCrit2,
|
||||
.doneCrit3 {
|
||||
stroke: $critBorderColor;
|
||||
fill: $doneTaskBkgColor;
|
||||
stroke-width: 2;
|
||||
cursor: pointer;
|
||||
shape-rendering: crispEdges;
|
||||
}
|
||||
|
||||
.milestone {
|
||||
transform: rotate(45deg) scale(0.8,0.8);
|
||||
}
|
||||
|
||||
.milestoneText {
|
||||
font-style: italic;
|
||||
}
|
||||
.doneCritText0,
|
||||
.doneCritText1,
|
||||
.doneCritText2,
|
||||
.doneCritText3 {
|
||||
fill: $taskTextDarkColor !important;
|
||||
}
|
||||
|
||||
.activeCritText0,
|
||||
.activeCritText1,
|
||||
.activeCritText2,
|
||||
.activeCritText3 {
|
||||
fill: $taskTextDarkColor !important;
|
||||
}
|
||||
|
||||
.titleText {
|
||||
text-anchor: middle;
|
||||
font-size: 18px;
|
||||
fill: $taskTextDarkColor;
|
||||
font-family: 'trebuchet ms', verdana, arial;
|
||||
font-family: var(--mermaid-font-family);
|
||||
}
|
||||
/** Section styling */
|
||||
|
||||
.mermaid-main-font {
|
||||
font-family: "trebuchet ms", verdana, arial;
|
||||
font-family: var(--mermaid-font-family);
|
||||
}
|
||||
|
||||
.section {
|
||||
stroke: none;
|
||||
opacity: 0.2;
|
||||
}
|
||||
|
||||
.section0 {
|
||||
fill: $sectionBkgColor;
|
||||
}
|
||||
|
||||
.section2 {
|
||||
fill: $sectionBkgColor2;
|
||||
}
|
||||
|
||||
.section1,
|
||||
.section3 {
|
||||
fill: $altSectionBkgColor;
|
||||
opacity: 0.2;
|
||||
}
|
||||
|
||||
.sectionTitle0 {
|
||||
fill: $titleColor;
|
||||
}
|
||||
|
||||
.sectionTitle1 {
|
||||
fill: $titleColor;
|
||||
}
|
||||
|
||||
.sectionTitle2 {
|
||||
fill: $titleColor;
|
||||
}
|
||||
|
||||
.sectionTitle3 {
|
||||
fill: $titleColor;
|
||||
}
|
||||
|
||||
.sectionTitle {
|
||||
text-anchor: start;
|
||||
font-size: 11px;
|
||||
text-height: 14px;
|
||||
font-family: 'trebuchet ms', verdana, arial;
|
||||
font-family: var(--mermaid-font-family);
|
||||
|
||||
}
|
||||
|
||||
|
||||
/* Grid and axis */
|
||||
|
||||
.grid .tick {
|
||||
stroke: $gridColor;
|
||||
opacity: 0.8;
|
||||
shape-rendering: crispEdges;
|
||||
text {
|
||||
font-family: 'trebuchet ms', verdana, arial;
|
||||
font-family: var(--mermaid-font-family);
|
||||
}
|
||||
}
|
||||
|
||||
.grid path {
|
||||
stroke-width: 0;
|
||||
}
|
||||
|
||||
|
||||
/* Today line */
|
||||
|
||||
.today {
|
||||
fill: none;
|
||||
stroke: $todayLineColor;
|
||||
stroke-width: 2px;
|
||||
}
|
||||
|
||||
|
||||
/* Task styling */
|
||||
|
||||
/* Default task */
|
||||
|
||||
.task {
|
||||
stroke-width: 2;
|
||||
}
|
||||
|
||||
.taskText {
|
||||
text-anchor: middle;
|
||||
font-family: 'trebuchet ms', verdana, arial;
|
||||
font-family: var(--mermaid-font-family);
|
||||
}
|
||||
|
||||
.taskText:not([font-size]) {
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
.taskTextOutsideRight {
|
||||
fill: $taskTextDarkColor;
|
||||
text-anchor: start;
|
||||
font-size: 11px;
|
||||
font-family: 'trebuchet ms', verdana, arial;
|
||||
font-family: var(--mermaid-font-family);
|
||||
|
||||
}
|
||||
|
||||
.taskTextOutsideLeft {
|
||||
fill: $taskTextDarkColor;
|
||||
text-anchor: end;
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
/* Special case clickable */
|
||||
.task.clickable {
|
||||
cursor: pointer;
|
||||
}
|
||||
.taskText.clickable {
|
||||
cursor: pointer;
|
||||
fill: $taskTextClickableColor !important;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.taskTextOutsideLeft.clickable {
|
||||
cursor: pointer;
|
||||
fill: $taskTextClickableColor !important;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.taskTextOutsideRight.clickable {
|
||||
cursor: pointer;
|
||||
fill: $taskTextClickableColor !important;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
/* Specific task settings for the sections*/
|
||||
|
||||
.taskText0,
|
||||
.taskText1,
|
||||
.taskText2,
|
||||
.taskText3 {
|
||||
fill: $taskTextColor;
|
||||
}
|
||||
|
||||
.task0,
|
||||
.task1,
|
||||
.task2,
|
||||
.task3 {
|
||||
fill: $taskBkgColor;
|
||||
stroke: $taskBorderColor;
|
||||
}
|
||||
|
||||
.taskTextOutside0,
|
||||
.taskTextOutside2
|
||||
{
|
||||
fill: $taskTextOutsideColor;
|
||||
}
|
||||
|
||||
.taskTextOutside1,
|
||||
.taskTextOutside3 {
|
||||
fill: $taskTextOutsideColor;
|
||||
}
|
||||
|
||||
|
||||
/* Active task */
|
||||
|
||||
.active0,
|
||||
.active1,
|
||||
.active2,
|
||||
.active3 {
|
||||
fill: $activeTaskBkgColor;
|
||||
stroke: $activeTaskBorderColor;
|
||||
}
|
||||
|
||||
.activeText0,
|
||||
.activeText1,
|
||||
.activeText2,
|
||||
.activeText3 {
|
||||
fill: $taskTextDarkColor !important;
|
||||
}
|
||||
|
||||
|
||||
/* Completed task */
|
||||
|
||||
.done0,
|
||||
.done1,
|
||||
.done2,
|
||||
.done3 {
|
||||
stroke: $doneTaskBorderColor;
|
||||
fill: $doneTaskBkgColor;
|
||||
stroke-width: 2;
|
||||
}
|
||||
|
||||
.doneText0,
|
||||
.doneText1,
|
||||
.doneText2,
|
||||
.doneText3 {
|
||||
fill: $taskTextDarkColor !important;
|
||||
}
|
||||
|
||||
|
||||
/* Tasks on the critical line */
|
||||
|
||||
.crit0,
|
||||
.crit1,
|
||||
.crit2,
|
||||
.crit3 {
|
||||
stroke: $critBorderColor;
|
||||
fill: $critBkgColor;
|
||||
stroke-width: 2;
|
||||
}
|
||||
|
||||
.activeCrit0,
|
||||
.activeCrit1,
|
||||
.activeCrit2,
|
||||
.activeCrit3 {
|
||||
stroke: $critBorderColor;
|
||||
fill: $activeTaskBkgColor;
|
||||
stroke-width: 2;
|
||||
}
|
||||
|
||||
.doneCrit0,
|
||||
.doneCrit1,
|
||||
.doneCrit2,
|
||||
.doneCrit3 {
|
||||
stroke: $critBorderColor;
|
||||
fill: $doneTaskBkgColor;
|
||||
stroke-width: 2;
|
||||
cursor: pointer;
|
||||
shape-rendering: crispEdges;
|
||||
}
|
||||
|
||||
.milestone {
|
||||
transform: rotate(45deg) scale(0.8,0.8);
|
||||
}
|
||||
|
||||
.milestoneText {
|
||||
font-style: italic;
|
||||
}
|
||||
.doneCritText0,
|
||||
.doneCritText1,
|
||||
.doneCritText2,
|
||||
.doneCritText3 {
|
||||
fill: $taskTextDarkColor !important;
|
||||
}
|
||||
|
||||
.activeCritText0,
|
||||
.activeCritText1,
|
||||
.activeCritText2,
|
||||
.activeCritText3 {
|
||||
fill: $taskTextDarkColor !important;
|
||||
}
|
||||
|
||||
.titleText {
|
||||
text-anchor: middle;
|
||||
font-size: 18px;
|
||||
fill: $taskTextDarkColor;
|
||||
font-family: 'trebuchet ms', verdana, arial;
|
||||
font-family: var(--mermaid-font-family);
|
||||
}
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
.commit-id,
|
||||
.commit-msg,
|
||||
.branch-label {
|
||||
fill: lightgrey;
|
||||
color: lightgrey;
|
||||
font-family: 'trebuchet ms', verdana, arial;
|
||||
font-family: var(--mermaid-font-family);
|
||||
}
|
||||
.commit-id,
|
||||
.commit-msg,
|
||||
.branch-label {
|
||||
fill: lightgrey;
|
||||
color: lightgrey;
|
||||
font-family: 'trebuchet ms', verdana, arial;
|
||||
font-family: var(--mermaid-font-family);
|
||||
}
|
||||
|
||||
@@ -6,18 +6,18 @@ import { getThemeVariables as neutralThemeVariables } from './theme-neutral';
|
||||
|
||||
export default {
|
||||
base: {
|
||||
getThemeVariables: baseThemeVariables
|
||||
getThemeVariables: baseThemeVariables,
|
||||
},
|
||||
dark: {
|
||||
getThemeVariables: darkThemeVariables
|
||||
getThemeVariables: darkThemeVariables,
|
||||
},
|
||||
default: {
|
||||
getThemeVariables: defaultThemeVariables
|
||||
getThemeVariables: defaultThemeVariables,
|
||||
},
|
||||
forest: {
|
||||
getThemeVariables: forestThemeVariables
|
||||
getThemeVariables: forestThemeVariables,
|
||||
},
|
||||
neutral: {
|
||||
getThemeVariables: neutralThemeVariables
|
||||
}
|
||||
getThemeVariables: neutralThemeVariables,
|
||||
},
|
||||
};
|
||||
|
||||
@@ -1,60 +1,60 @@
|
||||
// @import 'flowchart';
|
||||
@import 'sequence';
|
||||
@import 'gantt';
|
||||
@import 'class';
|
||||
@import 'git';
|
||||
@import 'pie';
|
||||
@import 'state';
|
||||
|
||||
// .composit {
|
||||
// fill: white;
|
||||
// border-bottom: 1px
|
||||
// }
|
||||
|
||||
:root {
|
||||
--mermaid-font-family: '"trebuchet ms", verdana, arial';
|
||||
font-family: '"trebuchet ms", verdana, arial';
|
||||
font-family: var(--mermaid-font-family);
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
/* Classes common for multiple diagrams */
|
||||
|
||||
.error-icon {
|
||||
fill: $errorBkgColor;
|
||||
}
|
||||
.error-text {
|
||||
fill: $errorTextColor;
|
||||
stroke: $errorTextColor;
|
||||
}
|
||||
|
||||
.edge-thickness-normal {
|
||||
// stroke: $lineColor;
|
||||
stroke-width: 2px;
|
||||
}
|
||||
.edge-thickness-thick {
|
||||
// stroke: $lineColor;
|
||||
stroke-width: 3.5px
|
||||
}
|
||||
.edge-pattern-solid {
|
||||
stroke-dasharray: 0;
|
||||
}
|
||||
|
||||
.edge-pattern-dashed{
|
||||
stroke-dasharray: 3;
|
||||
}
|
||||
.edge-pattern-dotted {
|
||||
stroke-dasharray: 2;
|
||||
}
|
||||
|
||||
.marker {
|
||||
fill: $lineColor;
|
||||
}
|
||||
.marker.cross {
|
||||
stroke: $lineColor;
|
||||
}
|
||||
|
||||
svg {
|
||||
font-family: var(--mermaid-font-family);
|
||||
font-size: 24px;
|
||||
// @import 'flowchart';
|
||||
@import 'sequence';
|
||||
@import 'gantt';
|
||||
@import 'class';
|
||||
@import 'git';
|
||||
@import 'pie';
|
||||
@import 'state';
|
||||
|
||||
// .composit {
|
||||
// fill: white;
|
||||
// border-bottom: 1px
|
||||
// }
|
||||
|
||||
:root {
|
||||
--mermaid-font-family: '"trebuchet ms", verdana, arial';
|
||||
font-family: '"trebuchet ms", verdana, arial';
|
||||
font-family: var(--mermaid-font-family);
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
/* Classes common for multiple diagrams */
|
||||
|
||||
.error-icon {
|
||||
fill: $errorBkgColor;
|
||||
}
|
||||
.error-text {
|
||||
fill: $errorTextColor;
|
||||
stroke: $errorTextColor;
|
||||
}
|
||||
|
||||
.edge-thickness-normal {
|
||||
// stroke: $lineColor;
|
||||
stroke-width: 2px;
|
||||
}
|
||||
.edge-thickness-thick {
|
||||
// stroke: $lineColor;
|
||||
stroke-width: 3.5px
|
||||
}
|
||||
.edge-pattern-solid {
|
||||
stroke-dasharray: 0;
|
||||
}
|
||||
|
||||
.edge-pattern-dashed{
|
||||
stroke-dasharray: 3;
|
||||
}
|
||||
.edge-pattern-dotted {
|
||||
stroke-dasharray: 2;
|
||||
}
|
||||
|
||||
.marker {
|
||||
fill: $lineColor;
|
||||
}
|
||||
.marker.cross {
|
||||
stroke: $lineColor;
|
||||
}
|
||||
|
||||
svg {
|
||||
font-family: var(--mermaid-font-family);
|
||||
font-size: 24px;
|
||||
}
|
||||
@@ -1,70 +1,70 @@
|
||||
$mainBkg: #eee;
|
||||
$contrast: #26a;
|
||||
$secondBkg: lighten($contrast, 55%);
|
||||
$lineColor: #666;
|
||||
$border1: #999;
|
||||
$border2: $contrast;
|
||||
$note: #ffa;
|
||||
$text: #333;
|
||||
$critical: #d42;
|
||||
$done: #bbb;
|
||||
$arrowheadColor: #333333;
|
||||
|
||||
/* Flowchart variables */
|
||||
|
||||
$nodeBkg: $mainBkg;
|
||||
$nodeBorder: $border1;
|
||||
$clusterBkg: $secondBkg;
|
||||
$clusterBorder: $border2;
|
||||
$defaultLinkColor: $lineColor;
|
||||
$titleColor: $text;
|
||||
$edgeLabelBackground: white;
|
||||
$edgeLabelcolor: #333;
|
||||
|
||||
/* Sequence Diagram variables */
|
||||
|
||||
$actorBorder: $border1;
|
||||
$actorBkg: $mainBkg;
|
||||
$actorTextColor: $text;
|
||||
$actorLineColor: $lineColor;
|
||||
$signalColor: $text;
|
||||
$signalTextColor: $text;
|
||||
$labelBoxBkgColor: $actorBkg;
|
||||
$labelBoxBorderColor: $actorBorder;
|
||||
$labelTextColor: $text;
|
||||
$loopTextColor: $text;
|
||||
$noteBorderColor: darken($note, 60%);
|
||||
$noteBkgColor: $note;
|
||||
$noteTextColor: $actorTextColor;
|
||||
$activationBorderColor: #666;
|
||||
$activationBkgColor: #f4f4f4;
|
||||
$sequenceNumberColor: white;
|
||||
|
||||
/* Gantt chart variables */
|
||||
|
||||
$sectionBkgColor: lighten($contrast, 30%);
|
||||
$altSectionBkgColor: white;
|
||||
$sectionBkgColor2: lighten($contrast, 30%);
|
||||
$taskBorderColor: darken($contrast, 10%);
|
||||
$taskBkgColor: $contrast;
|
||||
$taskTextLightColor: white;
|
||||
$taskTextColor: $taskTextLightColor;
|
||||
$taskTextDarkColor: $text;
|
||||
$taskTextOutsideColor: $taskTextDarkColor;
|
||||
$taskTextClickableColor: #003163;
|
||||
$activeTaskBorderColor: $taskBorderColor;
|
||||
$activeTaskBkgColor: $mainBkg;
|
||||
$gridColor: lighten($border1, 30%);
|
||||
$doneTaskBkgColor: $done;
|
||||
$doneTaskBorderColor: $lineColor;
|
||||
$critBkgColor: $critical;
|
||||
$critBorderColor: darken($critBkgColor, 10%);
|
||||
$todayLineColor: $critBkgColor;
|
||||
|
||||
/* state colors */
|
||||
$labelColor: black;
|
||||
|
||||
$errorBkgColor: #552222;
|
||||
$errorTextColor: #552222;
|
||||
|
||||
@import '../mermaid';
|
||||
$mainBkg: #eee;
|
||||
$contrast: #26a;
|
||||
$secondBkg: lighten($contrast, 55%);
|
||||
$lineColor: #666;
|
||||
$border1: #999;
|
||||
$border2: $contrast;
|
||||
$note: #ffa;
|
||||
$text: #333;
|
||||
$critical: #d42;
|
||||
$done: #bbb;
|
||||
$arrowheadColor: #333333;
|
||||
|
||||
/* Flowchart variables */
|
||||
|
||||
$nodeBkg: $mainBkg;
|
||||
$nodeBorder: $border1;
|
||||
$clusterBkg: $secondBkg;
|
||||
$clusterBorder: $border2;
|
||||
$defaultLinkColor: $lineColor;
|
||||
$titleColor: $text;
|
||||
$edgeLabelBackground: white;
|
||||
$edgeLabelcolor: #333;
|
||||
|
||||
/* Sequence Diagram variables */
|
||||
|
||||
$actorBorder: $border1;
|
||||
$actorBkg: $mainBkg;
|
||||
$actorTextColor: $text;
|
||||
$actorLineColor: $lineColor;
|
||||
$signalColor: $text;
|
||||
$signalTextColor: $text;
|
||||
$labelBoxBkgColor: $actorBkg;
|
||||
$labelBoxBorderColor: $actorBorder;
|
||||
$labelTextColor: $text;
|
||||
$loopTextColor: $text;
|
||||
$noteBorderColor: darken($note, 60%);
|
||||
$noteBkgColor: $note;
|
||||
$noteTextColor: $actorTextColor;
|
||||
$activationBorderColor: #666;
|
||||
$activationBkgColor: #f4f4f4;
|
||||
$sequenceNumberColor: white;
|
||||
|
||||
/* Gantt chart variables */
|
||||
|
||||
$sectionBkgColor: lighten($contrast, 30%);
|
||||
$altSectionBkgColor: white;
|
||||
$sectionBkgColor2: lighten($contrast, 30%);
|
||||
$taskBorderColor: darken($contrast, 10%);
|
||||
$taskBkgColor: $contrast;
|
||||
$taskTextLightColor: white;
|
||||
$taskTextColor: $taskTextLightColor;
|
||||
$taskTextDarkColor: $text;
|
||||
$taskTextOutsideColor: $taskTextDarkColor;
|
||||
$taskTextClickableColor: #003163;
|
||||
$activeTaskBorderColor: $taskBorderColor;
|
||||
$activeTaskBkgColor: $mainBkg;
|
||||
$gridColor: lighten($border1, 30%);
|
||||
$doneTaskBkgColor: $done;
|
||||
$doneTaskBorderColor: $lineColor;
|
||||
$critBkgColor: $critical;
|
||||
$critBorderColor: darken($critBkgColor, 10%);
|
||||
$todayLineColor: $critBkgColor;
|
||||
|
||||
/* state colors */
|
||||
$labelColor: black;
|
||||
|
||||
$errorBkgColor: #552222;
|
||||
$errorTextColor: #552222;
|
||||
|
||||
@import '../mermaid';
|
||||
|
||||
@@ -1,16 +1,16 @@
|
||||
.pieTitleText {
|
||||
text-anchor: middle;
|
||||
font-size: 25px;
|
||||
fill: $taskTextDarkColor;
|
||||
font-family: 'trebuchet ms', verdana, arial;
|
||||
font-family: var(--mermaid-font-family);
|
||||
}
|
||||
.slice {
|
||||
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;
|
||||
}
|
||||
.pieTitleText {
|
||||
text-anchor: middle;
|
||||
font-size: 25px;
|
||||
fill: $taskTextDarkColor;
|
||||
font-family: 'trebuchet ms', verdana, arial;
|
||||
font-family: var(--mermaid-font-family);
|
||||
}
|
||||
.slice {
|
||||
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;
|
||||
}
|
||||
|
||||
@@ -1,96 +1,96 @@
|
||||
.actor {
|
||||
stroke: $actorBorder;
|
||||
fill: $actorBkg;
|
||||
}
|
||||
|
||||
text.actor > tspan {
|
||||
fill: $actorTextColor;
|
||||
stroke: none;
|
||||
}
|
||||
|
||||
.actor-line {
|
||||
stroke: $actorLineColor;
|
||||
}
|
||||
|
||||
.messageLine0 {
|
||||
stroke-width: 1.5;
|
||||
stroke-dasharray: none;
|
||||
stroke: $signalColor;
|
||||
}
|
||||
|
||||
.messageLine1 {
|
||||
stroke-width: 1.5;
|
||||
stroke-dasharray: 2, 2;
|
||||
stroke: $signalColor;
|
||||
}
|
||||
|
||||
#arrowhead path {
|
||||
fill: $signalColor;
|
||||
stroke: $signalColor;
|
||||
}
|
||||
|
||||
.sequenceNumber {
|
||||
fill: $sequenceNumberColor;
|
||||
}
|
||||
|
||||
#sequencenumber {
|
||||
fill: $signalColor;
|
||||
}
|
||||
|
||||
#crosshead path {
|
||||
fill: $signalColor;
|
||||
stroke: $signalColor;
|
||||
}
|
||||
|
||||
.messageText {
|
||||
fill: $signalTextColor;
|
||||
stroke: $signalTextColor;
|
||||
}
|
||||
|
||||
.labelBox {
|
||||
stroke: $labelBoxBorderColor;
|
||||
fill: $labelBoxBkgColor;
|
||||
}
|
||||
|
||||
.labelText, .labelText > tspan {
|
||||
fill: $labelTextColor;
|
||||
stroke: none;
|
||||
}
|
||||
|
||||
.loopText, .loopText > tspan {
|
||||
fill: $loopTextColor;
|
||||
stroke: none;
|
||||
}
|
||||
|
||||
.loopLine {
|
||||
stroke-width: 2px;
|
||||
stroke-dasharray: 2, 2;
|
||||
stroke: $labelBoxBorderColor;
|
||||
fill: $labelBoxBorderColor;
|
||||
}
|
||||
|
||||
.note {
|
||||
//stroke: #decc93;
|
||||
stroke: $noteBorderColor;
|
||||
fill: $noteBkgColor;
|
||||
}
|
||||
|
||||
.noteText, .noteText > tspan {
|
||||
fill: $noteTextColor;
|
||||
stroke: none;
|
||||
}
|
||||
|
||||
.activation0 {
|
||||
fill: $activationBkgColor;
|
||||
stroke: $activationBorderColor;
|
||||
}
|
||||
|
||||
.activation1 {
|
||||
fill: $activationBkgColor;
|
||||
stroke: $activationBorderColor;
|
||||
}
|
||||
|
||||
.activation2 {
|
||||
fill: $activationBkgColor;
|
||||
stroke: $activationBorderColor;
|
||||
}
|
||||
.actor {
|
||||
stroke: $actorBorder;
|
||||
fill: $actorBkg;
|
||||
}
|
||||
|
||||
text.actor > tspan {
|
||||
fill: $actorTextColor;
|
||||
stroke: none;
|
||||
}
|
||||
|
||||
.actor-line {
|
||||
stroke: $actorLineColor;
|
||||
}
|
||||
|
||||
.messageLine0 {
|
||||
stroke-width: 1.5;
|
||||
stroke-dasharray: none;
|
||||
stroke: $signalColor;
|
||||
}
|
||||
|
||||
.messageLine1 {
|
||||
stroke-width: 1.5;
|
||||
stroke-dasharray: 2, 2;
|
||||
stroke: $signalColor;
|
||||
}
|
||||
|
||||
#arrowhead path {
|
||||
fill: $signalColor;
|
||||
stroke: $signalColor;
|
||||
}
|
||||
|
||||
.sequenceNumber {
|
||||
fill: $sequenceNumberColor;
|
||||
}
|
||||
|
||||
#sequencenumber {
|
||||
fill: $signalColor;
|
||||
}
|
||||
|
||||
#crosshead path {
|
||||
fill: $signalColor;
|
||||
stroke: $signalColor;
|
||||
}
|
||||
|
||||
.messageText {
|
||||
fill: $signalTextColor;
|
||||
stroke: $signalTextColor;
|
||||
}
|
||||
|
||||
.labelBox {
|
||||
stroke: $labelBoxBorderColor;
|
||||
fill: $labelBoxBkgColor;
|
||||
}
|
||||
|
||||
.labelText, .labelText > tspan {
|
||||
fill: $labelTextColor;
|
||||
stroke: none;
|
||||
}
|
||||
|
||||
.loopText, .loopText > tspan {
|
||||
fill: $loopTextColor;
|
||||
stroke: none;
|
||||
}
|
||||
|
||||
.loopLine {
|
||||
stroke-width: 2px;
|
||||
stroke-dasharray: 2, 2;
|
||||
stroke: $labelBoxBorderColor;
|
||||
fill: $labelBoxBorderColor;
|
||||
}
|
||||
|
||||
.note {
|
||||
//stroke: #decc93;
|
||||
stroke: $noteBorderColor;
|
||||
fill: $noteBkgColor;
|
||||
}
|
||||
|
||||
.noteText, .noteText > tspan {
|
||||
fill: $noteTextColor;
|
||||
stroke: none;
|
||||
}
|
||||
|
||||
.activation0 {
|
||||
fill: $activationBkgColor;
|
||||
stroke: $activationBorderColor;
|
||||
}
|
||||
|
||||
.activation1 {
|
||||
fill: $activationBkgColor;
|
||||
stroke: $activationBorderColor;
|
||||
}
|
||||
|
||||
.activation2 {
|
||||
fill: $activationBkgColor;
|
||||
stroke: $activationBorderColor;
|
||||
}
|
||||
|
||||
@@ -1,140 +1,140 @@
|
||||
g.stateGroup text {
|
||||
fill: $nodeBorder;
|
||||
stroke: none;
|
||||
font-size: 10px;
|
||||
font-family: 'trebuchet ms', verdana, arial;
|
||||
font-family: var(--mermaid-font-family);
|
||||
}
|
||||
g.stateGroup text {
|
||||
fill: $nodeBorder;
|
||||
fill: $titleColor;
|
||||
stroke: none;
|
||||
font-size: 10px;
|
||||
|
||||
}
|
||||
g.statediagram-cluster .cluster-label text {
|
||||
fill: $titleColor;
|
||||
}
|
||||
g.stateGroup .state-title {
|
||||
font-weight: bolder;
|
||||
fill: $labelColor;
|
||||
}
|
||||
|
||||
g.stateGroup rect {
|
||||
fill: $nodeBkg;
|
||||
stroke: $nodeBorder;
|
||||
}
|
||||
|
||||
g.stateGroup line {
|
||||
stroke: $nodeBorder;
|
||||
stroke-width: 1;
|
||||
}
|
||||
|
||||
.transition {
|
||||
stroke: $nodeBorder;
|
||||
stroke-width: 1;
|
||||
fill: none;
|
||||
}
|
||||
|
||||
.stateGroup .composit {
|
||||
fill: white;
|
||||
border-bottom: 1px
|
||||
}
|
||||
|
||||
.stateGroup .alt-composit {
|
||||
fill: #e0e0e0;
|
||||
border-bottom: 1px
|
||||
}
|
||||
|
||||
.state-note {
|
||||
stroke: $noteBorderColor;
|
||||
fill: $noteBkgColor;
|
||||
|
||||
text {
|
||||
fill: black;
|
||||
stroke: none;
|
||||
font-size: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.stateLabel .box {
|
||||
stroke: none;
|
||||
stroke-width: 0;
|
||||
fill: $nodeBkg;
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
.edgeLabel text {
|
||||
fill: #333;
|
||||
}
|
||||
|
||||
.stateLabel text {
|
||||
fill: $labelColor;
|
||||
font-size: 10px;
|
||||
font-weight: bold;
|
||||
font-family: 'trebuchet ms', verdana, arial;
|
||||
font-family: var(--mermaid-font-family);
|
||||
}
|
||||
|
||||
.node circle.state-start {
|
||||
fill: black;
|
||||
stroke: black;
|
||||
}
|
||||
.node circle.state-end {
|
||||
fill: black;
|
||||
stroke: white;
|
||||
stroke-width: 1.5
|
||||
}
|
||||
#statediagram-barbEnd {
|
||||
fill: $nodeBorder
|
||||
}
|
||||
|
||||
.statediagram-cluster rect {
|
||||
// fill: $nodeBkg;
|
||||
stroke: $nodeBorder;
|
||||
stroke-width: 1px;
|
||||
}
|
||||
.statediagram-cluster rect.outer {
|
||||
rx: 5px;
|
||||
ry: 5px;
|
||||
}
|
||||
.statediagram-state .divider {
|
||||
stroke: $nodeBorder;
|
||||
}
|
||||
|
||||
.statediagram-state .title-state {
|
||||
rx: 5px;
|
||||
ry: 5px;
|
||||
}
|
||||
.statediagram-cluster.statediagram-cluster .inner {
|
||||
fill: white;
|
||||
}
|
||||
.statediagram-cluster.statediagram-cluster-alt .inner {
|
||||
fill: #e0e0e0;
|
||||
}
|
||||
|
||||
.statediagram-cluster .inner {
|
||||
rx:0;
|
||||
ry:0;
|
||||
}
|
||||
|
||||
.statediagram-state rect.basic {
|
||||
rx: 5px;
|
||||
ry: 5px;
|
||||
}
|
||||
.statediagram-state rect.divider {
|
||||
stroke-dasharray: 10,10;
|
||||
fill: #efefef;
|
||||
}
|
||||
|
||||
.note-edge {
|
||||
stroke-dasharray: 5;
|
||||
}
|
||||
|
||||
.statediagram-note rect {
|
||||
fill: $noteBkgColor;
|
||||
stroke: $noteBorderColor;
|
||||
stroke-width: 1px;
|
||||
rx: 0;
|
||||
ry: 0;
|
||||
}
|
||||
g.stateGroup text {
|
||||
fill: $nodeBorder;
|
||||
stroke: none;
|
||||
font-size: 10px;
|
||||
font-family: 'trebuchet ms', verdana, arial;
|
||||
font-family: var(--mermaid-font-family);
|
||||
}
|
||||
g.stateGroup text {
|
||||
fill: $nodeBorder;
|
||||
fill: $titleColor;
|
||||
stroke: none;
|
||||
font-size: 10px;
|
||||
|
||||
}
|
||||
g.statediagram-cluster .cluster-label text {
|
||||
fill: $titleColor;
|
||||
}
|
||||
g.stateGroup .state-title {
|
||||
font-weight: bolder;
|
||||
fill: $labelColor;
|
||||
}
|
||||
|
||||
g.stateGroup rect {
|
||||
fill: $nodeBkg;
|
||||
stroke: $nodeBorder;
|
||||
}
|
||||
|
||||
g.stateGroup line {
|
||||
stroke: $nodeBorder;
|
||||
stroke-width: 1;
|
||||
}
|
||||
|
||||
.transition {
|
||||
stroke: $nodeBorder;
|
||||
stroke-width: 1;
|
||||
fill: none;
|
||||
}
|
||||
|
||||
.stateGroup .composit {
|
||||
fill: white;
|
||||
border-bottom: 1px
|
||||
}
|
||||
|
||||
.stateGroup .alt-composit {
|
||||
fill: #e0e0e0;
|
||||
border-bottom: 1px
|
||||
}
|
||||
|
||||
.state-note {
|
||||
stroke: $noteBorderColor;
|
||||
fill: $noteBkgColor;
|
||||
|
||||
text {
|
||||
fill: black;
|
||||
stroke: none;
|
||||
font-size: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.stateLabel .box {
|
||||
stroke: none;
|
||||
stroke-width: 0;
|
||||
fill: $nodeBkg;
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
.edgeLabel text {
|
||||
fill: #333;
|
||||
}
|
||||
|
||||
.stateLabel text {
|
||||
fill: $labelColor;
|
||||
font-size: 10px;
|
||||
font-weight: bold;
|
||||
font-family: 'trebuchet ms', verdana, arial;
|
||||
font-family: var(--mermaid-font-family);
|
||||
}
|
||||
|
||||
.node circle.state-start {
|
||||
fill: black;
|
||||
stroke: black;
|
||||
}
|
||||
.node circle.state-end {
|
||||
fill: black;
|
||||
stroke: white;
|
||||
stroke-width: 1.5
|
||||
}
|
||||
#statediagram-barbEnd {
|
||||
fill: $nodeBorder
|
||||
}
|
||||
|
||||
.statediagram-cluster rect {
|
||||
// fill: $nodeBkg;
|
||||
stroke: $nodeBorder;
|
||||
stroke-width: 1px;
|
||||
}
|
||||
.statediagram-cluster rect.outer {
|
||||
rx: 5px;
|
||||
ry: 5px;
|
||||
}
|
||||
.statediagram-state .divider {
|
||||
stroke: $nodeBorder;
|
||||
}
|
||||
|
||||
.statediagram-state .title-state {
|
||||
rx: 5px;
|
||||
ry: 5px;
|
||||
}
|
||||
.statediagram-cluster.statediagram-cluster .inner {
|
||||
fill: white;
|
||||
}
|
||||
.statediagram-cluster.statediagram-cluster-alt .inner {
|
||||
fill: #e0e0e0;
|
||||
}
|
||||
|
||||
.statediagram-cluster .inner {
|
||||
rx:0;
|
||||
ry:0;
|
||||
}
|
||||
|
||||
.statediagram-state rect.basic {
|
||||
rx: 5px;
|
||||
ry: 5px;
|
||||
}
|
||||
.statediagram-state rect.divider {
|
||||
stroke-dasharray: 10,10;
|
||||
fill: #efefef;
|
||||
}
|
||||
|
||||
.note-edge {
|
||||
stroke-dasharray: 5;
|
||||
}
|
||||
|
||||
.statediagram-note rect {
|
||||
fill: $noteBkgColor;
|
||||
stroke: $noteBorderColor;
|
||||
stroke-width: 1px;
|
||||
rx: 0;
|
||||
ry: 0;
|
||||
}
|
||||
|
||||
@@ -3,7 +3,10 @@ import { mkBorder } from './theme-helpers';
|
||||
class Theme {
|
||||
constructor() {
|
||||
/** # 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. */
|
||||
/**
|
||||
* - 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;
|
||||
|
||||
@@ -31,7 +34,7 @@ class Theme {
|
||||
// this.secondaryColor = '#dfdfde';
|
||||
// this.tertiaryColor = '#CCCCFF';
|
||||
|
||||
this.fontFamily = '"trebuchet ms", verdana, arial';
|
||||
this.fontFamily = '"trebuchet ms", verdana, arial, sans-serif';
|
||||
this.fontSize = '16px';
|
||||
// this.updateColors();
|
||||
}
|
||||
@@ -49,6 +52,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);
|
||||
@@ -64,9 +69,8 @@ class Theme {
|
||||
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.edgeLabelBackground ||
|
||||
(this.darkMode ? darken(this.secondaryColor, 30) : this.secondaryColor);
|
||||
this.nodeTextColor = this.nodeTextColor || this.primaryTextColor;
|
||||
/* Sequence Diagram variables */
|
||||
|
||||
@@ -91,6 +95,7 @@ class Theme {
|
||||
this.altSectionBkgColor = this.altSectionBkgColor || 'white';
|
||||
this.sectionBkgColor = this.sectionBkgColor || this.secondaryColor;
|
||||
this.sectionBkgColor2 = this.sectionBkgColor2 || this.primaryColor;
|
||||
this.excludeBkgColor = this.excludeBkgColor || '#eeeeee';
|
||||
this.taskBorderColor = this.taskBorderColor || this.primaryBorderColor;
|
||||
this.taskBkgColor = this.taskBkgColor || this.primaryColor;
|
||||
this.activeTaskBorderColor = this.activeTaskBorderColor || this.primaryColor;
|
||||
@@ -109,10 +114,22 @@ class Theme {
|
||||
this.taskTextClickableColor = this.taskTextClickableColor || '#003163';
|
||||
|
||||
/* state colors */
|
||||
this.labelColor = this.labelColor || this.primaryTextColor;
|
||||
this.transitionColor = this.transitionColor || this.lineColor;
|
||||
this.transitionLabelColor = this.transitionLabelColor || this.textColor;
|
||||
/* 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.compositeTitleBackground = this.compositeTitleBackground || this.mainBkg;
|
||||
this.compositeBorder = this.compositeBorder || this.nodeBorder;
|
||||
this.innerEndBackground = this.nodeBorder;
|
||||
this.errorBkgColor = this.errorBkgColor || this.tertiaryColor;
|
||||
this.errorTextColor = this.errorTextColor || this.tertiaryTextColor;
|
||||
this.transitionColor = this.transitionColor || this.lineColor;
|
||||
this.specialStateColor = this.lineColor;
|
||||
|
||||
/* class */
|
||||
this.classText = this.classText || this.textColor;
|
||||
@@ -126,6 +143,40 @@ class Theme {
|
||||
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 });
|
||||
|
||||
/* pie */
|
||||
this.pie1 = this.pie1 || this.primaryColor;
|
||||
this.pie2 = this.pie2 || this.secondaryColor;
|
||||
this.pie3 = this.pie3 || this.tertiaryColor;
|
||||
this.pie4 = this.pie4 || adjust(this.primaryColor, { l: -10 });
|
||||
this.pie5 = this.pie5 || adjust(this.secondaryColor, { l: -10 });
|
||||
this.pie6 = this.pie6 || adjust(this.tertiaryColor, { l: -10 });
|
||||
this.pie7 = this.pie7 || adjust(this.primaryColor, { h: +60, l: -10 });
|
||||
this.pie8 = this.pie8 || adjust(this.primaryColor, { h: -60, l: -10 });
|
||||
this.pie9 = this.pie9 || adjust(this.primaryColor, { h: 120, l: 0 });
|
||||
this.pie10 = this.pie10 || adjust(this.primaryColor, { h: +60, l: -20 });
|
||||
this.pie11 = this.pie11 || adjust(this.primaryColor, { h: -60, l: -20 });
|
||||
this.pie12 = this.pie12 || adjust(this.primaryColor, { h: 120, l: -10 });
|
||||
this.pieTitleTextSize = this.pieTitleTextSize || '25px';
|
||||
this.pieTitleTextColor = this.pieTitleTextColor || this.taskTextDarkColor;
|
||||
this.pieSectionTextSize = this.pieSectionTextSize || '17px';
|
||||
this.pieSectionTextColor = this.pieSectionTextColor || this.textColor;
|
||||
this.pieLegendTextSize = this.pieLegendTextSize || '17px';
|
||||
this.pieLegendTextColor = this.pieLegendTextColor || this.taskTextDarkColor;
|
||||
this.pieStrokeColor = this.pieStrokeColor || 'black';
|
||||
this.pieStrokeWidth = this.pieStrokeWidth || '2px';
|
||||
this.pieOpacity = this.pieOpacity || '0.7';
|
||||
|
||||
/* requirement-diagram */
|
||||
this.requirementBackground = this.requirementBackground || this.primaryColor;
|
||||
this.requirementBorderColor = this.requirementBorderColor || this.primaryBorderColor;
|
||||
this.requirementBorderSize = this.requirementBorderSize || this.primaryBorderColor;
|
||||
this.requirementTextColor = this.requirementTextColor || this.primaryTextColor;
|
||||
this.relationColor = this.relationColor || this.lineColor;
|
||||
this.relationLabelBackground =
|
||||
this.relationLabelBackground ||
|
||||
(this.darkMode ? darken(this.secondaryColor, 30) : this.secondaryColor);
|
||||
this.relationLabelColor = this.relationLabelColor || this.actorTextColor;
|
||||
}
|
||||
calculate(overrides) {
|
||||
if (typeof overrides !== 'object') {
|
||||
@@ -137,20 +188,20 @@ class Theme {
|
||||
const keys = Object.keys(overrides);
|
||||
|
||||
// Copy values from overrides, this is mainly for base colors
|
||||
keys.forEach(k => {
|
||||
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 => {
|
||||
keys.forEach((k) => {
|
||||
this[k] = overrides[k];
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
export const getThemeVariables = userOverrides => {
|
||||
export const getThemeVariables = (userOverrides) => {
|
||||
const theme = new Theme();
|
||||
theme.calculate(userOverrides);
|
||||
return theme;
|
||||
|
||||
@@ -24,7 +24,7 @@ class Theme {
|
||||
this.border1 = '#81B1DB';
|
||||
this.border2 = rgba(255, 255, 255, 0.25);
|
||||
this.arrowheadColor = 'calculated';
|
||||
this.fontFamily = '"trebuchet ms", verdana, arial';
|
||||
this.fontFamily = '"trebuchet ms", verdana, arial, sans-serif';
|
||||
this.fontSize = '16px';
|
||||
this.labelBackground = '#181818';
|
||||
this.textColor = '#ccc';
|
||||
@@ -109,8 +109,9 @@ class Theme {
|
||||
this.labelBoxBorderColor = this.actorBorder;
|
||||
this.labelTextColor = this.mainContrastColor;
|
||||
this.loopTextColor = this.mainContrastColor;
|
||||
this.noteBorderColor = this.border2;
|
||||
this.noteTextColor = this.mainBkg;
|
||||
this.noteBorderColor = this.secondaryBorderColor;
|
||||
this.noteBkgColor = this.secondBkg;
|
||||
this.noteTextColor = this.secondaryTextColor;
|
||||
this.activationBorderColor = this.border1;
|
||||
this.activationBkgColor = this.secondBkg;
|
||||
|
||||
@@ -126,8 +127,20 @@ 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.compositeTitleBackground = this.compositeTitleBackground || this.mainBkg;
|
||||
this.compositeBorder = this.compositeBorder || this.nodeBorder;
|
||||
this.innerEndBackground = this.primaryBorderColor;
|
||||
this.specialStateColor = '#f4f4f4'; // this.lineColor;
|
||||
|
||||
this.errorBkgColor = this.errorBkgColor || this.tertiaryColor;
|
||||
this.errorTextColor = this.errorTextColor || this.tertiaryTextColor;
|
||||
|
||||
this.fillType0 = this.primaryColor;
|
||||
this.fillType1 = this.secondaryColor;
|
||||
@@ -137,8 +150,43 @@ class Theme {
|
||||
this.fillType5 = adjust(this.secondaryColor, { h: -64 });
|
||||
this.fillType6 = adjust(this.primaryColor, { h: 128 });
|
||||
this.fillType7 = adjust(this.secondaryColor, { h: 128 });
|
||||
|
||||
/* pie */
|
||||
this.pie1 = this.pie1 || '#0b0000';
|
||||
this.pie2 = this.pie2 || '#4d1037';
|
||||
this.pie3 = this.pie3 || '#3f5258';
|
||||
this.pie4 = this.pie4 || '#4f2f1b';
|
||||
this.pie5 = this.pie5 || '#6e0a0a';
|
||||
this.pie6 = this.pie6 || '#3b0048';
|
||||
this.pie7 = this.pie7 || '#995a01';
|
||||
this.pie8 = this.pie8 || '#154706';
|
||||
this.pie9 = this.pie9 || '#161722';
|
||||
this.pie10 = this.pie10 || '#00296f';
|
||||
this.pie11 = this.pie11 || '#01629c';
|
||||
this.pie12 = this.pie12 || '#010029';
|
||||
this.pieTitleTextSize = this.pieTitleTextSize || '25px';
|
||||
this.pieTitleTextColor = this.pieTitleTextColor || this.taskTextDarkColor;
|
||||
this.pieSectionTextSize = this.pieSectionTextSize || '17px';
|
||||
this.pieSectionTextColor = this.pieSectionTextColor || this.textColor;
|
||||
this.pieLegendTextSize = this.pieLegendTextSize || '17px';
|
||||
this.pieLegendTextColor = this.pieLegendTextColor || this.taskTextDarkColor;
|
||||
this.pieStrokeColor = this.pieStrokeColor || 'black';
|
||||
this.pieStrokeWidth = this.pieStrokeWidth || '2px';
|
||||
this.pieOpacity = this.pieOpacity || '0.7';
|
||||
|
||||
/* class */
|
||||
this.classText = this.primaryTextColor;
|
||||
|
||||
/* requirement-diagram */
|
||||
this.requirementBackground = this.requirementBackground || this.primaryColor;
|
||||
this.requirementBorderColor = this.requirementBorderColor || this.primaryBorderColor;
|
||||
this.requirementBorderSize = this.requirementBorderSize || this.primaryBorderColor;
|
||||
this.requirementTextColor = this.requirementTextColor || this.primaryTextColor;
|
||||
this.relationColor = this.relationColor || this.lineColor;
|
||||
this.relationLabelBackground =
|
||||
this.relationLabelBackground ||
|
||||
(this.darkMode ? darken(this.secondaryColor, 30) : this.secondaryColor);
|
||||
this.relationLabelColor = this.relationLabelColor || this.actorTextColor;
|
||||
}
|
||||
calculate(overrides) {
|
||||
if (typeof overrides !== 'object') {
|
||||
@@ -150,20 +198,20 @@ class Theme {
|
||||
const keys = Object.keys(overrides);
|
||||
|
||||
// Copy values from overrides, this is mainly for base colors
|
||||
keys.forEach(k => {
|
||||
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 => {
|
||||
keys.forEach((k) => {
|
||||
this[k] = overrides[k];
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
export const getThemeVariables = userOverrides => {
|
||||
export const getThemeVariables = (userOverrides) => {
|
||||
const theme = new Theme();
|
||||
theme.calculate(userOverrides);
|
||||
return theme;
|
||||
|
||||
@@ -28,7 +28,7 @@ class Theme {
|
||||
this.border1 = '#9370DB';
|
||||
this.border2 = '#aaaa33';
|
||||
this.arrowheadColor = '#333333';
|
||||
this.fontFamily = '"trebuchet ms", verdana, arial';
|
||||
this.fontFamily = '"trebuchet ms", verdana, arial, sans-serif';
|
||||
this.fontSize = '16px';
|
||||
this.labelBackground = '#e8e8e8';
|
||||
this.textColor = '#333';
|
||||
@@ -67,6 +67,7 @@ class Theme {
|
||||
this.sectionBkgColor = 'calculated';
|
||||
this.altSectionBkgColor = 'calculated';
|
||||
this.sectionBkgColor2 = 'calculated';
|
||||
this.excludeBkgColor = '#eeeeee';
|
||||
this.taskBorderColor = 'calculated';
|
||||
this.taskBkgColor = 'calculated';
|
||||
this.taskTextLightColor = 'calculated';
|
||||
@@ -139,6 +140,22 @@ class Theme {
|
||||
this.taskTextOutsideColor = this.taskTextDarkColor;
|
||||
|
||||
/* state colors */
|
||||
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 || '#f0f0f0';
|
||||
this.compositeTitleBackground = this.compositeTitleBackground || this.mainBkg;
|
||||
this.compositeBorder = this.compositeBorder || this.nodeBorder;
|
||||
this.innerEndBackground = this.nodeBorder;
|
||||
this.specialStateColor = this.lineColor;
|
||||
|
||||
this.errorBkgColor = this.errorBkgColor || this.tertiaryColor;
|
||||
this.errorTextColor = this.errorTextColor || this.tertiaryTextColor;
|
||||
this.transitionColor = this.transitionColor || this.lineColor;
|
||||
/* class */
|
||||
this.classText = this.primaryTextColor;
|
||||
/* journey */
|
||||
@@ -150,6 +167,38 @@ class Theme {
|
||||
this.fillType5 = adjust(this.secondaryColor, { h: -64 });
|
||||
this.fillType6 = adjust(this.primaryColor, { h: 128 });
|
||||
this.fillType7 = adjust(this.secondaryColor, { h: 128 });
|
||||
|
||||
/* pie */
|
||||
this.pie1 = this.pie1 || this.primaryColor;
|
||||
this.pie2 = this.pie2 || this.secondaryColor;
|
||||
this.pie3 = this.pie3 || adjust(this.tertiaryColor, { l: -40 });
|
||||
this.pie4 = this.pie4 || adjust(this.primaryColor, { l: -10 });
|
||||
this.pie5 = this.pie5 || adjust(this.secondaryColor, { l: -30 });
|
||||
this.pie6 = this.pie6 || adjust(this.tertiaryColor, { l: -20 });
|
||||
this.pie7 = this.pie7 || adjust(this.primaryColor, { h: +60, l: -20 });
|
||||
this.pie8 = this.pie8 || adjust(this.primaryColor, { h: -60, l: -40 });
|
||||
this.pie9 = this.pie9 || adjust(this.primaryColor, { h: 120, l: -40 });
|
||||
this.pie10 = this.pie10 || adjust(this.primaryColor, { h: +60, l: -40 });
|
||||
this.pie11 = this.pie11 || adjust(this.primaryColor, { h: -90, l: -40 });
|
||||
this.pie12 = this.pie12 || adjust(this.primaryColor, { h: 120, l: -30 });
|
||||
this.pieTitleTextSize = this.pieTitleTextSize || '25px';
|
||||
this.pieTitleTextColor = this.pieTitleTextColor || this.taskTextDarkColor;
|
||||
this.pieSectionTextSize = this.pieSectionTextSize || '17px';
|
||||
this.pieSectionTextColor = this.pieSectionTextColor || this.textColor;
|
||||
this.pieLegendTextSize = this.pieLegendTextSize || '17px';
|
||||
this.pieLegendTextColor = this.pieLegendTextColor || this.taskTextDarkColor;
|
||||
this.pieStrokeColor = this.pieStrokeColor || 'black';
|
||||
this.pieStrokeWidth = this.pieStrokeWidth || '2px';
|
||||
this.pieOpacity = this.pieOpacity || '0.7';
|
||||
|
||||
/* requirement-diagram */
|
||||
this.requirementBackground = this.requirementBackground || this.primaryColor;
|
||||
this.requirementBorderColor = this.requirementBorderColor || this.primaryBorderColor;
|
||||
this.requirementBorderSize = this.requirementBorderSize || this.primaryBorderColor;
|
||||
this.requirementTextColor = this.requirementTextColor || this.primaryTextColor;
|
||||
this.relationColor = this.relationColor || this.lineColor;
|
||||
this.relationLabelBackground = this.relationLabelBackground || this.labelBackground;
|
||||
this.relationLabelColor = this.relationLabelColor || this.actorTextColor;
|
||||
}
|
||||
calculate(overrides) {
|
||||
if (typeof overrides !== 'object') {
|
||||
@@ -161,20 +210,20 @@ class Theme {
|
||||
const keys = Object.keys(overrides);
|
||||
|
||||
// Copy values from overrides, this is mainly for base colors
|
||||
keys.forEach(k => {
|
||||
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 => {
|
||||
keys.forEach((k) => {
|
||||
this[k] = overrides[k];
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
export const getThemeVariables = userOverrides => {
|
||||
export const getThemeVariables = (userOverrides) => {
|
||||
const theme = new Theme();
|
||||
theme.calculate(userOverrides);
|
||||
return theme;
|
||||
|
||||
@@ -13,7 +13,7 @@ class Theme {
|
||||
this.border1 = '#13540c';
|
||||
this.border2 = '#6eaa49';
|
||||
this.arrowheadColor = 'green';
|
||||
this.fontFamily = '"trebuchet ms", verdana, arial';
|
||||
this.fontFamily = '"trebuchet ms", verdana, arial, sans-serif';
|
||||
this.fontSize = '16px';
|
||||
|
||||
this.tertiaryColor = lighten('#cde498', 10);
|
||||
@@ -59,6 +59,7 @@ class Theme {
|
||||
this.sectionBkgColor = '#6eaa49';
|
||||
this.altSectionBkgColor = 'white';
|
||||
this.sectionBkgColor2 = '#6eaa49';
|
||||
this.excludeBkgColor = '#eeeeee';
|
||||
this.taskBorderColor = 'calculated';
|
||||
this.taskBkgColor = '#487e3a';
|
||||
this.taskTextLightColor = 'white';
|
||||
@@ -109,6 +110,22 @@ class Theme {
|
||||
this.activeTaskBkgColor = this.mainBkg;
|
||||
|
||||
/* state colors */
|
||||
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 || '#f0f0f0';
|
||||
this.compositeTitleBackground = this.compositeTitleBackground || this.mainBkg;
|
||||
this.compositeBorder = this.compositeBorder || this.nodeBorder;
|
||||
this.innerEndBackground = this.primaryBorderColor;
|
||||
this.specialStateColor = this.lineColor;
|
||||
|
||||
this.errorBkgColor = this.errorBkgColor || this.tertiaryColor;
|
||||
this.errorTextColor = this.errorTextColor || this.tertiaryTextColor;
|
||||
this.transitionColor = this.transitionColor || this.lineColor;
|
||||
/* class */
|
||||
this.classText = this.primaryTextColor;
|
||||
/* journey */
|
||||
@@ -120,6 +137,38 @@ class Theme {
|
||||
this.fillType5 = adjust(this.secondaryColor, { h: -64 });
|
||||
this.fillType6 = adjust(this.primaryColor, { h: 128 });
|
||||
this.fillType7 = adjust(this.secondaryColor, { h: 128 });
|
||||
|
||||
/* pie */
|
||||
this.pie1 = this.pie1 || this.primaryColor;
|
||||
this.pie2 = this.pie2 || this.secondaryColor;
|
||||
this.pie3 = this.pie3 || this.tertiaryColor;
|
||||
this.pie4 = this.pie4 || adjust(this.primaryColor, { l: -30 });
|
||||
this.pie5 = this.pie5 || adjust(this.secondaryColor, { l: -30 });
|
||||
this.pie6 = this.pie6 || adjust(this.tertiaryColor, { h: +40, l: -40 });
|
||||
this.pie7 = this.pie7 || adjust(this.primaryColor, { h: +60, l: -10 });
|
||||
this.pie8 = this.pie8 || adjust(this.primaryColor, { h: -60, l: -10 });
|
||||
this.pie9 = this.pie9 || adjust(this.primaryColor, { h: 120, l: 0 });
|
||||
this.pie10 = this.pie10 || adjust(this.primaryColor, { h: +60, l: -50 });
|
||||
this.pie11 = this.pie11 || adjust(this.primaryColor, { h: -60, l: -50 });
|
||||
this.pie12 = this.pie12 || adjust(this.primaryColor, { h: 120, l: -50 });
|
||||
this.pieTitleTextSize = this.pieTitleTextSize || '25px';
|
||||
this.pieTitleTextColor = this.pieTitleTextColor || this.taskTextDarkColor;
|
||||
this.pieSectionTextSize = this.pieSectionTextSize || '17px';
|
||||
this.pieSectionTextColor = this.pieSectionTextColor || this.textColor;
|
||||
this.pieLegendTextSize = this.pieLegendTextSize || '17px';
|
||||
this.pieLegendTextColor = this.pieLegendTextColor || this.taskTextDarkColor;
|
||||
this.pieStrokeColor = this.pieStrokeColor || 'black';
|
||||
this.pieStrokeWidth = this.pieStrokeWidth || '2px';
|
||||
this.pieOpacity = this.pieOpacity || '0.7';
|
||||
|
||||
/* requirement-diagram */
|
||||
this.requirementBackground = this.requirementBackground || this.primaryColor;
|
||||
this.requirementBorderColor = this.requirementBorderColor || this.primaryBorderColor;
|
||||
this.requirementBorderSize = this.requirementBorderSize || this.primaryBorderColor;
|
||||
this.requirementTextColor = this.requirementTextColor || this.primaryTextColor;
|
||||
this.relationColor = this.relationColor || this.lineColor;
|
||||
this.relationLabelBackground = this.relationLabelBackground || this.edgeLabelBackground;
|
||||
this.relationLabelColor = this.relationLabelColor || this.actorTextColor;
|
||||
}
|
||||
calculate(overrides) {
|
||||
if (typeof overrides !== 'object') {
|
||||
@@ -131,20 +180,20 @@ class Theme {
|
||||
const keys = Object.keys(overrides);
|
||||
|
||||
// Copy values from overrides, this is mainly for base colors
|
||||
keys.forEach(k => {
|
||||
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 => {
|
||||
keys.forEach((k) => {
|
||||
this[k] = overrides[k];
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
export const getThemeVariables = userOverrides => {
|
||||
export const getThemeVariables = (userOverrides) => {
|
||||
const theme = new Theme();
|
||||
theme.calculate(userOverrides);
|
||||
return theme;
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import { adjust } from 'khroma';
|
||||
|
||||
export const mkBorder = (col, darkMode) =>
|
||||
darkMode ? adjust(col, { s: -40, l: 10 }) : adjust(col, { s: -40, l: -10 });
|
||||
import { adjust } from 'khroma';
|
||||
|
||||
export const mkBorder = (col, darkMode) =>
|
||||
darkMode ? adjust(col, { s: -40, l: 10 }) : adjust(col, { s: -40, l: -10 });
|
||||
|
||||
@@ -7,7 +7,7 @@ import { mkBorder } from './theme-helpers';
|
||||
class Theme {
|
||||
constructor() {
|
||||
this.primaryColor = '#eee';
|
||||
this.contrast = '#26a';
|
||||
this.contrast = '#707070';
|
||||
this.secondaryColor = lighten(this.contrast, 55);
|
||||
this.background = '#ffffff';
|
||||
|
||||
@@ -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';
|
||||
@@ -35,7 +35,7 @@ class Theme {
|
||||
this.critical = '#d42';
|
||||
this.done = '#bbb';
|
||||
this.arrowheadColor = '#333333';
|
||||
this.fontFamily = '"trebuchet ms", verdana, arial';
|
||||
this.fontFamily = '"trebuchet ms", verdana, arial, sans-serif';
|
||||
this.fontSize = '16px';
|
||||
|
||||
/* Flowchart variables */
|
||||
@@ -72,6 +72,7 @@ class Theme {
|
||||
this.sectionBkgColor = 'calculated';
|
||||
this.altSectionBkgColor = 'white';
|
||||
this.sectionBkgColor2 = 'calculated';
|
||||
this.excludeBkgColor = '#eeeeee';
|
||||
this.taskBorderColor = 'calculated';
|
||||
this.taskBkgColor = 'calculated';
|
||||
this.taskTextLightColor = 'white';
|
||||
@@ -119,9 +120,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 +147,22 @@ class Theme {
|
||||
this.todayLineColor = this.critBkgColor;
|
||||
|
||||
/* state colors */
|
||||
this.transitionColor = this.transitionColor || '#000';
|
||||
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 || '#f4f4f4';
|
||||
this.compositeTitleBackground = this.compositeTitleBackground || this.mainBkg;
|
||||
this.stateBorder = this.stateBorder || '#000';
|
||||
this.innerEndBackground = this.primaryBorderColor;
|
||||
this.specialStateColor = '#222';
|
||||
|
||||
this.errorBkgColor = this.errorBkgColor || this.tertiaryColor;
|
||||
this.errorTextColor = this.errorTextColor || this.tertiaryTextColor;
|
||||
|
||||
/* class */
|
||||
this.classText = this.primaryTextColor;
|
||||
/* journey */
|
||||
@@ -157,6 +174,51 @@ class Theme {
|
||||
this.fillType5 = adjust(this.secondaryColor, { h: -64 });
|
||||
this.fillType6 = adjust(this.primaryColor, { h: 128 });
|
||||
this.fillType7 = adjust(this.secondaryColor, { h: 128 });
|
||||
|
||||
// /* pie */
|
||||
this.pie1 = this.pie1 || '#F4F4F4';
|
||||
this.pie2 = this.pie2 || '#555';
|
||||
this.pie3 = this.pie3 || '#BBB';
|
||||
this.pie4 = this.pie4 || '#777';
|
||||
this.pie5 = this.pie5 || '#999';
|
||||
this.pie6 = this.pie6 || '#DDD';
|
||||
this.pie7 = this.pie7 || '#FFF';
|
||||
this.pie8 = this.pie8 || '#DDD';
|
||||
this.pie9 = this.pie9 || '#BBB';
|
||||
this.pie10 = this.pie10 || '#999';
|
||||
this.pie11 = this.pie11 || '#777';
|
||||
this.pie12 = this.pie12 || '#555';
|
||||
this.pieTitleTextSize = this.pieTitleTextSize || '25px';
|
||||
this.pieTitleTextColor = this.pieTitleTextColor || this.taskTextDarkColor;
|
||||
this.pieSectionTextSize = this.pieSectionTextSize || '17px';
|
||||
this.pieSectionTextColor = this.pieSectionTextColor || this.textColor;
|
||||
this.pieLegendTextSize = this.pieLegendTextSize || '17px';
|
||||
this.pieLegendTextColor = this.pieLegendTextColor || this.taskTextDarkColor;
|
||||
this.pieStrokeColor = this.pieStrokeColor || 'black';
|
||||
this.pieStrokeWidth = this.pieStrokeWidth || '2px';
|
||||
this.pieOpacity = this.pieOpacity || '0.7';
|
||||
|
||||
// this.pie1 = this.pie1 || '#212529';
|
||||
// this.pie2 = this.pie2 || '#343A40';
|
||||
// this.pie3 = this.pie3 || '#495057';
|
||||
// this.pie4 = this.pie4 || '#6C757D';
|
||||
// this.pie5 = this.pie5 || adjust(this.secondaryColor, { l: -10 });
|
||||
// this.pie6 = this.pie6 || adjust(this.tertiaryColor, { l: -10 });
|
||||
// this.pie7 = this.pie7 || adjust(this.primaryColor, { h: +60, l: -10 });
|
||||
// this.pie8 = this.pie8 || adjust(this.primaryColor, { h: -60, l: -10 });
|
||||
// this.pie9 = this.pie9 || adjust(this.primaryColor, { h: 120, l: 0 });
|
||||
// this.pie10 = this.pie10 || adjust(this.primaryColor, { h: +60, l: -20 });
|
||||
// this.pie11 = this.pie11 || adjust(this.primaryColor, { h: -60, l: -20 });
|
||||
// this.pie12 = this.pie12 || adjust(this.primaryColor, { h: 120, l: -10 });
|
||||
|
||||
/* requirement-diagram */
|
||||
this.requirementBackground = this.requirementBackground || this.primaryColor;
|
||||
this.requirementBorderColor = this.requirementBorderColor || this.primaryBorderColor;
|
||||
this.requirementBorderSize = this.requirementBorderSize || this.primaryBorderColor;
|
||||
this.requirementTextColor = this.requirementTextColor || this.primaryTextColor;
|
||||
this.relationColor = this.relationColor || this.lineColor;
|
||||
this.relationLabelBackground = this.relationLabelBackground || this.edgeLabelBackground;
|
||||
this.relationLabelColor = this.relationLabelColor || this.actorTextColor;
|
||||
}
|
||||
calculate(overrides) {
|
||||
if (typeof overrides !== 'object') {
|
||||
@@ -168,20 +230,20 @@ class Theme {
|
||||
const keys = Object.keys(overrides);
|
||||
|
||||
// Copy values from overrides, this is mainly for base colors
|
||||
keys.forEach(k => {
|
||||
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 => {
|
||||
keys.forEach((k) => {
|
||||
this[k] = overrides[k];
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
export const getThemeVariables = userOverrides => {
|
||||
export const getThemeVariables = (userOverrides) => {
|
||||
const theme = new Theme();
|
||||
theme.calculate(userOverrides);
|
||||
return theme;
|
||||
|
||||
Reference in New Issue
Block a user