feat(mermaid): Style Gantt charts (#494)

Author: 72636c

remark/mermaid/mermaid.config.json

@@ -7,6 +7,16 @@
     "diagramPadding": 1,
     "useMaxWidth": false
   },
+  "gantt": {
+    "barGap": 7,
+    "barHeight": 28,
+    "gridLineStartPadding": 0,
+    "leftPadding": 70,
+    "rightPadding": 70,
+    "titleTopMargin": 0,
+    "topPadding": 70,
+    "useMaxWidth": false
+  },
   "sequence": {
     "bottomMarginAdj": 14,
     "boxMargin": 14,
@@ -15,5 +25,6 @@
     "mirrorActors": true,
     "useMaxWidth": false
   },
-  "themeCSS": "/* loaded from style.css */"
+  "themeCSS": "/* loaded from style.css */",
+  "themeVariables": {}
 }

remark/mermaid/style.css

@@ -1,18 +1,27 @@
 /* Don't panic, Mermaid scopes all styles to the parent SVG ID */
 
 * {
-  --font-family: Roboto, 'Helvetica Neue', HelveticaNeue, Helvetica, Arial,
-    sans-serif;
-  --font-size: 14px;
+  /* https://github.com/mermaid-js/mermaid/blob/v10.1.0/packages/mermaid/src/diagrams/gantt/styles.js#L3-L6 */
+  --mermaid-font-family: Roboto, 'Helvetica Neue', HelveticaNeue, Helvetica,
+    Arial, sans-serif;
+  --mermaid-font-size: 14px;
 
   /* https://github.com/mermaid-js/mermaid/blob/8.11.5/src/diagrams/er/erRenderer.js#L405-L406 */
   --mermaid-er-label-fill: rgba(255, 255, 255, 0.85);
 
   /* https://github.com/seek-oss/braid-design-system/blob/v31.14.0/lib/color/palette.ts */
+  --braid-blue-100: #e3f2fb;
+  --braid-blue-300: #98c9f1;
+  --braid-blue-700: #1d559d;
   --braid-grey-50: #f7f8fb;
   --braid-grey-100: #eaecf1;
   --braid-grey-300: #abb3c1;
   --braid-grey-500: #5a6881;
+  --braid-mint-100: #e2f7f1;
+  --braid-mint-300: #8bdec5;
+  --braid-mint-700: #12784f;
+  --braid-red-300: #fb999a;
+  --braid-red-700: #b91e1e;
   --braid-yellow-100: #fef8de;
   --braid-yellow-500: #fdc221;
 }
@@ -21,8 +30,8 @@
 
 body,
 text {
-  font-family: var(--font-family);
-  font-size: var(--font-size);
+  font-family: var(--mermaid-font-family);
+  font-size: var(--mermaid-font-size);
 }
 
 /* er */
@@ -59,8 +68,8 @@ g.edgeLabel span.edgeLabel,
 g.label div,
 g.node div,
 g.node span.nodeLabel {
-  font-family: var(--font-family);
-  font-size: var(--font-size);
+  font-family: var(--mermaid-font-family);
+  font-size: var(--mermaid-font-size);
 }
 
 g.node foreignObject.label {
@@ -104,12 +113,102 @@ path.arrowMarkerPath {
   fill: var(--braid-grey-500);
 }
 
+/* gantt */
+
+g.grid > g.tick > path,
+rect.task {
+  stroke-width: 1px;
+}
+
+g.grid > g.tick > path {
+  color: var(--braid-grey-100);
+  shape-rendering: crispEdges;
+}
+
+g.grid > g.tick > text,
+text.sectionTitle {
+  fill: var(--braid-grey-500);
+}
+
+path.section0,
+path.section1 {
+  fill: none;
+}
+
+rect.task.active0 {
+  fill: var(--braid-grey-50);
+  stroke: var(--braid-grey-300);
+}
+
+rect.task.active1 {
+  fill: var(--braid-blue-100);
+  stroke: var(--braid-blue-300);
+}
+
+rect.task.done0,
+rect.task.done1 {
+  fill: var(--braid-mint-100);
+  stroke: var(--braid-mint-300);
+}
+
+rect.task.milestone {
+  fill: var(--braid-blue-700);
+  stroke: var(--braid-blue-300);
+}
+
+rect.task.milestone.crit0,
+rect.task.milestone.crit1 {
+  fill: var(--braid-red-700);
+  stroke: var(--braid-red-300);
+}
+
+rect.task.milestone.done0,
+rect.task.milestone.done1 {
+  fill: var(--braid-mint-700);
+  stroke: var(--braid-mint-300);
+}
+
+text.sectionTitle {
+  /* https://github.com/mermaid-js/mermaid/blob/v10.1.0/packages/mermaid/src/diagrams/gantt/ganttRenderer.js#L671 */
+  transform: translateX(-10px);
+}
+
+text.taskText.activeText0,
+text.taskTextOutside0.activeText0,
+text.taskTextOutside1.activeText0 {
+  fill: var(--braid-grey-500) !important;
+}
+
+text.taskText.activeText1,
+text.taskTextOutside0.activeText1,
+text.taskTextOutside1.activeText1,
+text.taskTextOutside0.milestoneText,
+text.taskTextOutside1.milestoneText {
+  fill: var(--braid-blue-700) !important;
+}
+
+text.taskText.doneText0,
+text.taskText.doneText1,
+text.taskTextOutside0.doneText0,
+text.taskTextOutside0.doneText1,
+text.taskTextOutside1.doneText0,
+text.taskTextOutside1.doneText1 {
+  fill: var(--braid-mint-700) !important;
+}
+
+text.taskTextOutside0.milestoneText.critText0,
+text.taskTextOutside0.milestoneText.critText1,
+text.taskTextOutside1.milestoneText.critText0,
+text.taskTextOutside1.milestoneText.critText1 {
+  fill: var(--braid-red-700) !important;
+}
+
 /* sequence */
 
 text.actor,
 text.messageText {
-  font-family: var(--font-family);
-  font-size: var(--font-size);
+  font-family: var(--mermaid-font-family);
+  font-size: var(--mermaid-font-size);
   stroke: none;
   text-anchor: middle;
 }