diff --git a/docs/config/theming.md b/docs/config/theming.md index a09221305..088d9e755 100644 --- a/docs/config/theming.md +++ b/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 | | diff --git a/packages/mermaid/src/config.type.ts b/packages/mermaid/src/config.type.ts index 86281cd52..4933f767b 100644 --- a/packages/mermaid/src/config.type.ts +++ b/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 diff --git a/packages/mermaid/src/diagrams/user-journey/journeyRenderer.ts b/packages/mermaid/src/diagrams/user-journey/journeyRenderer.ts index 98625510f..f08d386ad 100644 --- a/packages/mermaid/src/diagrams/user-journey/journeyRenderer.ts +++ b/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 conf = configObject.journey; - const titleColor = configObject.themeVariables.titleColor; - const titleFontSize = configObject.themeVariables.titleFontSize; - const titleFontFamily = configObject.themeVariables.titleFontFamily; + const titleColor = conf.titleColor; + const titleFontSize = conf.titleFontSize; + const titleFontFamily = conf.titleFontFamily; - const securityLevel = configObject.securityLevel; + const securityLevel = getConfig().securityLevel; // Handle root and Document for when rendering in sandbox mode let sandboxElement; if (securityLevel === 'sandbox') { diff --git a/packages/mermaid/src/schemas/config.schema.yaml b/packages/mermaid/src/schemas/config.schema.yaml index e1014e889..f6281c140 100644 --- a/packages/mermaid/src/schemas/config.schema.yaml +++ b/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 diff --git a/packages/mermaid/src/themes/theme-default.js b/packages/mermaid/src/themes/theme-default.js index 0cd159148..e0023758e 100644 --- a/packages/mermaid/src/themes/theme-default.js +++ b/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;