modifed journey diagram config scheme to contain title specific styles, and undid previous theme-wide changes

Co-authored-by: Shahir Ahmed <ahmeds@dickinson.edu>

docs/config/theming.md

@@ -213,9 +213,6 @@ The theming engine will only recognize hex colors and not color names. So, the v
 | background           | #f4f4f4                            | Used to calculate color for items that should either be background colored or contrasting to the background                      |
 | fontFamily           | trebuchet ms, verdana, arial       |                                                                                                                                  |
 | fontSize             | 16px                               | Font size in pixels                                                                                                              |
-| titleColor           | calculated from textColor          | Color to be used for the title text in Journey Diagrams.                                                                         |
-| titleFontFamily      | trebuchet ms, verdana, arial       | Font family to be used for the title text in Journey Diagrams.                                                                   |
-| titleFontSize        | 16px                               | Font size in pixels to be used for the title text in Journey Diagrams.                                                           |
 | primaryColor         | #fff4dd                            | Color to be used as background in nodes, other colors will be derived from this                                                  |
 | primaryTextColor     | calculated from darkMode #ddd/#333 | Color to be used as text color in nodes using `primaryColor`                                                                     |
 | secondaryColor       | calculated from primaryColor       |                                                                                                                                  |

packages/mermaid/src/config.type.ts

@@ -604,6 +604,18 @@ export interface JourneyDiagramConfig extends BaseDiagramConfig {
   actorColours?: string[];
   sectionFills?: string[];
   sectionColours?: string[];
+  /**
+   * Calculated from textColor
+   */
+  titleColor?: string;
+  /**
+   * Font family to be used for the title text in Journey Diagrams
+   */
+  titleFontFamily?: string;
+  /**
+   * Font size in pixels to be used for the title text in Journey Diagrams
+   */
+  titleFontSize?: string;
 }
 /**
  * This interface was referenced by `MermaidConfig`'s JSON-Schema

packages/mermaid/src/diagrams/user-journey/journeyRenderer.ts

@@ -48,13 +48,11 @@ function drawActorLegend(diagram) {
 const conf = getConfig().journey;
 const LEFT_MARGIN = conf.leftMargin;
 export const draw = function (text, id, version, diagObj) {
-  const configObject = getConfig();
+  const titleColor = conf.titleColor;
-  const conf = configObject.journey;
+  const titleFontSize = conf.titleFontSize;
-  const titleColor = configObject.themeVariables.titleColor;
+  const titleFontFamily = conf.titleFontFamily;
-  const titleFontSize = configObject.themeVariables.titleFontSize;
-  const titleFontFamily = configObject.themeVariables.titleFontFamily;
 
-  const securityLevel = configObject.securityLevel;
+  const securityLevel = getConfig().securityLevel;
   // Handle root and Document for when rendering in sandbox mode
   let sandboxElement;
   if (securityLevel === 'sandbox') {

packages/mermaid/src/schemas/config.schema.yaml

@@ -1473,6 +1473,9 @@ $defs: # JSON Schema definition (maybe we should move these to a separate file)
       - bottomMarginAdj
       - useMaxWidth
       - rightAngles
+      - titleColor
+      - titleFontFamily
+      - titleFontSize
     properties:
       diagramMarginX:
         $ref: '#/$defs/C4DiagramConfig/properties/diagramMarginX'
@@ -1573,6 +1576,18 @@ $defs: # JSON Schema definition (maybe we should move these to a separate file)
         items:
           type: string
         default: ['#fff']
+      titleColor: 
+        description: Calculated from textColor
+        type: string
+        default: "#00ff00"
+      titleFontFamily:
+        description: Font family to be used for the title text in Journey Diagrams
+        type: string
+        default: '"Open Sans", sans-serif'
+      titleFontSize: 
+        description: Font size in pixels to be used for the title text in Journey Diagrams
+        type: string
+        default: '32px'
 
   TimelineDiagramConfig:
     # added by https://github.com/mermaid-js/mermaid/commit/0d5246fbc730bf15463d7183fe4400a1e2fc492c

packages/mermaid/src/themes/theme-default.js

@@ -178,7 +178,7 @@ class Theme {
     this.clusterBkg = this.secondBkg;
     this.clusterBorder = this.border2;
     this.defaultLinkColor = this.lineColor;
-    this.titleColor = this.titleColor === 'calculated' ? this.textColor : this.titleColor;
+    this.titleColor = this.textColor;
     this.edgeLabelBackground = this.labelBackground;
 
     /* Sequence Diagram variables */
@@ -233,8 +233,6 @@ class Theme {
     this.fillType5 = adjust(this.secondaryColor, { h: -64 });
     this.fillType6 = adjust(this.primaryColor, { h: 128 });
     this.fillType7 = adjust(this.secondaryColor, { h: 128 });
-    this.titleFontFamily = this.titleFontFamily || '"trebuchet ms", verdana, arial, sans-serif';
-    this.titleFontSize = this.titleFontSize || '16px';
 
     /* pie */
     this.pie1 = this.pie1 || this.primaryColor;