From 1fec55d5f7939ed6bc89c2d08dc15cf0015869cf Mon Sep 17 00:00:00 2001
From: "Mr.Hope" <mister-hope@outlook.com>
Date: Mon, 9 Oct 2023 11:25:09 +0800
Subject: [PATCH] feat(gantt): update styles

---
 packages/mermaid/src/diagrams/gantt/styles.js | 41 ++++++++-----------
 1 file changed, 16 insertions(+), 25 deletions(-)

diff --git a/packages/mermaid/src/diagrams/gantt/styles.js b/packages/mermaid/src/diagrams/gantt/styles.js
index 8193130bbc..626ed4e0f1 100644
--- a/packages/mermaid/src/diagrams/gantt/styles.js
+++ b/packages/mermaid/src/diagrams/gantt/styles.js
@@ -1,9 +1,9 @@
 const getStyles = (options) =>
   `
   .mermaid-main-font {
-    font-family: "trebuchet ms", verdana, arial, sans-serif;
-    font-family: var(--mermaid-font-family);
+    font-family: var(--mermaid-font-family, "trebuchet ms", verdana, arial, sans-serif);
   }
+
   .exclude-range {
     fill: ${options.excludeBkgColor};
   }
@@ -45,11 +45,7 @@ const getStyles = (options) =>
 
   .sectionTitle {
     text-anchor: start;
-    // font-size: ${options.ganttFontSize};
-    // text-height: 14px;
-    font-family: 'trebuchet ms', verdana, arial, sans-serif;
-    font-family: var(--mermaid-font-family);
-
+    font-family: var(--mermaid-font-family, "trebuchet ms", verdana, arial, sans-serif);
   }
 
 
@@ -59,10 +55,11 @@ const getStyles = (options) =>
     stroke: ${options.gridColor};
     opacity: 0.8;
     shape-rendering: crispEdges;
-    text {
-      font-family: ${options.fontFamily};
-      fill: ${options.textColor};
-    }
+  }
+
+  .grid .tick text {
+    font-family: ${options.fontFamily};
+    fill: ${options.textColor};
   }
 
   .grid path {
@@ -89,33 +86,27 @@ const getStyles = (options) =>
 
   .taskText {
     text-anchor: middle;
-    font-family: 'trebuchet ms', verdana, arial, sans-serif;
-    font-family: var(--mermaid-font-family);
+    font-family: var(--mermaid-font-family, "trebuchet ms", verdana, arial, sans-serif);
   }
 
-  // .taskText:not([font-size]) {
-  //   font-size: ${options.ganttFontSize};
-  // }
-
   .taskTextOutsideRight {
     fill: ${options.taskTextDarkColor};
     text-anchor: start;
-    // font-size: ${options.ganttFontSize};
-    font-family: 'trebuchet ms', verdana, arial, sans-serif;
-    font-family: var(--mermaid-font-family);
-
+    font-family: var(--mermaid-font-family, "trebuchet ms", verdana, arial, sans-serif);
   }
 
   .taskTextOutsideLeft {
     fill: ${options.taskTextDarkColor};
     text-anchor: end;
-    // font-size: ${options.ganttFontSize};
   }
 
+
   /* Special case clickable */
+
   .task.clickable {
     cursor: pointer;
   }
+
   .taskText.clickable {
     cursor: pointer;
     fill: ${options.taskTextClickableColor} !important;
@@ -134,6 +125,7 @@ const getStyles = (options) =>
     font-weight: bold;
   }
 
+
   /* Specific task settings for the sections*/
 
   .taskText0,
@@ -255,9 +247,8 @@ const getStyles = (options) =>
   .titleText {
     text-anchor: middle;
     font-size: 18px;
-    fill: ${options.textColor}    ;
-    font-family: 'trebuchet ms', verdana, arial, sans-serif;
-    font-family: var(--mermaid-font-family);
+    fill: ${options.titleColor || options.textColor};
+    font-family: var(--mermaid-font-family, "trebuchet ms", verdana, arial, sans-serif);
   }
 `;