use LoveIt theme, self hosted

themes/LoveIt/assets/lib/mermaid/mermaid.scss

@@ -0,0 +1,19 @@
+.page .mermaid {
+  width: 100%;
+  margin: 3% auto;
+  text-align: center;
+
+  & > svg {
+    max-width: 100%;
+  }
+
+  @import "themes/neutral/index";
+
+  [theme=dark] & {
+    @import "themes/dark/index";
+  }
+
+  div.mermaidTooltip {
+    z-index: 50;
+  }
+}

themes/LoveIt/assets/lib/mermaid/themes/class.scss

@@ -0,0 +1,91 @@
+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;
+  }
+}
+
+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;
+  stroke: $nodeBorder;
+  stroke-width: 1;
+}
+
+#compositionStart {
+  @include composition;
+}
+
+#compositionEnd {
+  @include composition;
+}
+
+@mixin aggregation {
+  fill: $nodeBkg;
+  stroke: $nodeBorder;
+  stroke-width: 1;
+}
+
+#aggregationStart {
+  @include aggregation;
+}
+
+#aggregationEnd {
+  @include aggregation;
+}
+
+#dependencyStart {
+  @include composition;
+}
+
+#dependencyEnd {
+  @include composition;
+}
+
+#extensionStart {
+  @include composition;
+}
+
+#extensionEnd {
+  @include composition;
+}

themes/LoveIt/assets/lib/mermaid/themes/dark/index.scss

@@ -0,0 +1,62 @@
+$mainBkg: #BDD5EA;
+$secondBkg: #6D6D65;
+$mainContrastColor: lightgrey;
+$darkTextColor: #323D47;
+$lineColor: $mainContrastColor;
+$border1: #81B1DB;
+$border2: rgba(255, 255, 255, 0.25);
+$arrowheadColor: $mainContrastColor;
+
+/* Flowchart variables */
+
+$nodeBkg: $mainBkg;
+$nodeBorder: purple;
+$clusterBkg: $secondBkg;
+$clusterBorder: $border2;
+$defaultLinkColor: $lineColor;
+$titleColor: #F9FFFE;
+$edgeLabelBackground: #e8e8e8;
+
+/* Sequence Diagram variables */
+
+$actorBorder: $border1;
+$actorBkg: $mainBkg;
+$actorTextColor: black;
+$actorLineColor: $mainContrastColor;
+$signalColor: $mainContrastColor;
+$signalTextColor: $mainContrastColor;
+$labelBoxBkgColor: $actorBkg;
+$labelBoxBorderColor: $actorBorder;
+$labelTextColor: $darkTextColor;
+$loopTextColor: $mainContrastColor;
+$noteBorderColor: $border2;
+$noteBkgColor: #fff5ad;
+$activationBorderColor: #666;
+$activationBkgColor: #f4f4f4;
+$sequenceNumberColor: white;
+
+/* 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: black;
+
+@import '../mermaid';

themes/LoveIt/assets/lib/mermaid/themes/default/index.scss

@@ -0,0 +1,60 @@
+$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;
+
+/* 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;
+$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;
+
+@import '../mermaid';

themes/LoveIt/assets/lib/mermaid/themes/flowchart.scss

@@ -0,0 +1,68 @@
+.label {
+  font-family: 'trebuchet ms', verdana, arial;
+  font-family: var(--mermaid-font-family);
+  color: #333;
+}
+
+.label text {
+  fill: #333;
+}
+
+.node rect,
+.node circle,
+.node ellipse,
+.node polygon,
+.node path {
+  fill: $mainBkg;
+  stroke: $nodeBorder;
+  stroke-width: 1px;
+}
+
+.node .label {
+  text-align: center;
+}
+.node.clickable {
+  cursor: pointer;
+}
+
+.arrowheadPath {
+  fill: $arrowheadColor;
+}
+
+.edgePath .path {
+  stroke: $lineColor;
+  stroke-width: 1.5px;
+}
+
+.edgeLabel {
+  background-color: $edgeLabelBackground;
+  rect {
+    opacity: 0.5;
+  }
+  text-align: center;
+}
+
+.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;
+}

themes/LoveIt/assets/lib/mermaid/themes/forest/index.scss

@@ -0,0 +1,61 @@
+$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;
+
+/* 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;
+$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;
+
+@import '../mermaid';

themes/LoveIt/assets/lib/mermaid/themes/gantt.scss

@@ -0,0 +1,259 @@
+/** 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);
+    fill: $taskTextOutsideColor;
+  }
+}
+
+.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 !important;
+}
+
+.taskTextOutside1,
+.taskTextOutside3 {
+  fill: $taskTextOutsideColor !important;
+}
+
+
+/* Active task */
+
+.active0,
+.active1,
+.active2,
+.active3 {
+  fill: $activeTaskBkgColor;
+  stroke: $activeTaskBorderColor;
+}
+
+.activeText0,
+.activeText1,
+.activeText2,
+.activeText3 {
+  fill: $taskTextDarkColor;
+}
+
+
+/* Completed task */
+
+.done0,
+.done1,
+.done2,
+.done3 {
+  stroke: $doneTaskBorderColor;
+  fill: $doneTaskBkgColor;
+  stroke-width: 2;
+}
+
+.doneText0,
+.doneText1,
+.doneText2,
+.doneText3 {
+  fill: $taskTextDarkColor;
+}
+
+
+/* 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;
+}
+
+.activeCritText0,
+.activeCritText1,
+.activeCritText2,
+.activeCritText3 {
+  fill: $taskTextDarkColor;
+}
+
+.titleText {
+  text-anchor: middle;
+  font-size: 18px;
+  fill: $taskTextOutsideColor;
+  font-family: 'trebuchet ms', verdana, arial;
+  font-family: var(--mermaid-font-family);
+}

themes/LoveIt/assets/lib/mermaid/themes/git.scss

@@ -0,0 +1,8 @@
+.commit-id,
+.commit-msg,
+.branch-label {
+  fill: lightgrey;
+  color: lightgrey;
+  font-family: 'trebuchet ms', verdana, arial;
+  font-family: var(--mermaid-font-family);
+}

themes/LoveIt/assets/lib/mermaid/themes/mermaid.scss

@@ -0,0 +1,19 @@
+@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';
+  --mermaid-font-family: "Comic Sans MS", "Comic Sans", cursive;
+  // --mermaid-alt-font-family: '"Lucida Console", Monaco, monospace';
+}
+

themes/LoveIt/assets/lib/mermaid/themes/neutral/index.scss

@@ -0,0 +1,65 @@
+$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;
+
+/* 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;
+$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;
+
+@import '../mermaid';

themes/LoveIt/assets/lib/mermaid/themes/pie.scss

@@ -0,0 +1,11 @@
+.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);
+}

themes/LoveIt/assets/lib/mermaid/themes/sequence.scss

@@ -0,0 +1,97 @@
+.actor {
+  stroke: $actorBorder;
+  fill: $actorBkg;
+}
+
+text.actor {
+  fill: $actorTextColor;
+  stroke: none;
+}
+
+.actor-line {
+  stroke: $actorLineColor;
+}
+
+.messageLine0 {
+  stroke-width: 1.5;
+  stroke-dasharray: '2 2';
+  stroke: $signalColor;
+}
+
+.messageLine1 {
+  stroke-width: 1.5;
+  stroke-dasharray: '2 2';
+  stroke: $signalColor;
+}
+
+#arrowhead {
+  fill: $signalColor;
+}
+
+.sequenceNumber {
+  fill: $sequenceNumberColor;
+}
+
+#sequencenumber {
+  fill: $signalColor;
+}
+
+#crosshead path {
+  fill: $signalColor !important;
+  stroke: $signalColor !important;
+}
+
+.messageText {
+  fill: $signalTextColor;
+  stroke: none;
+}
+
+.labelBox {
+  stroke: $labelBoxBorderColor;
+  fill: $labelBoxBkgColor;
+}
+
+.labelText {
+  fill: $labelTextColor;
+  stroke: none;
+}
+
+.loopText {
+  fill: $loopTextColor;
+  stroke: none;
+}
+
+.loopLine {
+  stroke-width: 2;
+  stroke-dasharray: '2 2';
+  stroke: $labelBoxBorderColor;
+}
+
+.note {
+  //stroke: #decc93;
+  stroke: $noteBorderColor;
+  fill: $noteBkgColor;
+}
+
+.noteText {
+  fill: black;
+  stroke: none;
+  font-family: 'trebuchet ms', verdana, arial;
+  font-family: var(--mermaid-font-family);
+  font-size: 14px;
+}
+
+.activation0 {
+  fill: $activationBkgColor;
+  stroke: $activationBorderColor;
+}
+
+.activation1 {
+  fill: $activationBkgColor;
+  stroke: $activationBorderColor;
+}
+
+.activation2 {
+  fill: $activationBkgColor;
+  stroke: $activationBorderColor;
+}

themes/LoveIt/assets/lib/mermaid/themes/state.scss

@@ -0,0 +1,132 @@
+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;
+  stroke: none;
+  font-size: 10px;
+
+}
+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.5;
+}
+
+.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;
+}