feat(lib): update mermaid to v8.4.2, echarts to v4.5.0, typeit to v6.1.1(modern)

assets/css/_mermaid/class.scss

@@ -2,7 +2,12 @@ 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.classGroup rect {

assets/css/_mermaid/dark/index.scss

@@ -56,4 +56,7 @@ $critBkgColor: #E83737;
 $taskTextDarkColor: $darkTextColor;
 $todayLineColor: #DB5757;
 
+/* state colors */
+$labelColor: black;
+
 @import '../mermaid';

assets/css/_mermaid/default/index.scss

@@ -54,4 +54,7 @@ $critBorderColor: #ff8888;
 $critBkgColor: red;
 $todayLineColor: red;
 
+/* state colors */
+$labelColor: black;
+
 @import '../mermaid';

assets/css/_mermaid/flowchart.scss

@@ -1,5 +1,6 @@
 .label {
   font-family: 'trebuchet ms', verdana, arial;
+  font-family: var(--mermaid-font-family);
   color: #333;
 }
 
@@ -16,6 +17,9 @@
   stroke-width: 1px;
 }
 
+.node .label {
+  text-align: center;
+}
 .node.clickable {
   cursor: pointer;
 }
@@ -31,6 +35,7 @@
 
 .edgeLabel {
   background-color: $edgeLabelBackground;
+  text-align: center;
 }
 
 .cluster rect {
@@ -49,6 +54,7 @@ div.mermaidTooltip {
   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;

assets/css/_mermaid/forest/index.scss

@@ -55,4 +55,7 @@ $critBorderColor: #ff8888;
 $critBkgColor: red;
 $todayLineColor: red;
 
+/* state colors */
+$labelColor: black;
+
 @import '../mermaid';

assets/css/_mermaid/gantt.scss

@@ -1,5 +1,10 @@
 /** Section styling */
 
+.mermaid-main-font {
+  font-family: "trebuchet ms", verdana, arial;
+  font-family: var(--mermaid-font-family);
+}
+
 .section {
   stroke: none;
   opacity: 0.2;
@@ -39,6 +44,9 @@
   text-anchor: start;
   font-size: 11px;
   text-height: 14px;
+  font-family: 'trebuchet ms', verdana, arial;
+  font-family: var(--mermaid-font-family);
+
 }
 
 
@@ -48,6 +56,10 @@
   stroke: $gridColor;
   opacity: 0.3;
   shape-rendering: crispEdges;
+  text {
+    font-family: 'trebuchet ms', verdana, arial;
+    font-family: var(--mermaid-font-family);
+  }
 }
 
 .grid path {
@@ -74,6 +86,11 @@
 
 .taskText {
   text-anchor: middle;
+  font-family: 'trebuchet ms', verdana, arial;
+  font-family: var(--mermaid-font-family);
+}
+
+.taskText:not([font-size]) {
   font-size: 11px;
 }
 
@@ -81,6 +98,9 @@
   fill: $taskTextDarkColor;
   text-anchor: start;
   font-size: 11px;
+  font-family: 'trebuchet ms', verdana, arial;
+  font-family: var(--mermaid-font-family);
+
 }
 
 .taskTextOutsideLeft {
@@ -233,4 +253,6 @@
   text-anchor: middle;
   font-size: 18px;
   fill: $taskTextDarkColor;
+  font-family: 'trebuchet ms', verdana, arial;
+  font-family: var(--mermaid-font-family);
 }

assets/css/_mermaid/git.scss

@@ -3,4 +3,6 @@
 .branch-label {
   fill: lightgrey;
   color: lightgrey;
+  font-family: 'trebuchet ms', verdana, arial;
+  font-family: var(--mermaid-font-family);
 }

assets/css/_mermaid/mermaid.scss

@@ -4,3 +4,16 @@
 @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';
+}
+

assets/css/_mermaid/neutral/index.scss

@@ -59,4 +59,7 @@ $critBkgColor: $critical;
 $critBorderColor: darken($critBkgColor, 10%);
 $todayLineColor: $critBkgColor;
 
+/* state colors */
+$labelColor: black;
+
 @import '../mermaid';

assets/css/_mermaid/pie.scss

@@ -2,4 +2,10 @@
   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);
 }

assets/css/_mermaid/sequence.scss

@@ -77,6 +77,7 @@ text.actor {
   fill: black;
   stroke: none;
   font-family: 'trebuchet ms', verdana, arial;
+  font-family: var(--mermaid-font-family);
   font-size: 14px;
 }
 

assets/css/_mermaid/state.scss

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