diff --git a/packages/mermaid/src/config.type.ts b/packages/mermaid/src/config.type.ts index b7cf27e72b..0f77de5657 100644 --- a/packages/mermaid/src/config.type.ts +++ b/packages/mermaid/src/config.type.ts @@ -62,7 +62,7 @@ export interface MermaidConfig { * */ theme?: 'default' | 'forest' | 'dark' | 'neutral' | 'null'; - themeVariables?: any; + themeVariables?: ThemeVariables; themeCSS?: string; /** * The maximum allowed size of the users text diagram @@ -171,6 +171,205 @@ export interface MermaidConfig { */ suppressErrorRendering?: boolean; } +/** + * Theme variables to create a custom theme. + * + */ +export interface ThemeVariables { + /** + * The CSS `font-family` to use. + */ + fontFamily?: string; + /** + * The font size to use. + */ + fontSize?: number; + /** + * The font weight to use. + */ + fontWeight?: number; + /** + * The primary color to use. + */ + primaryColor?: string; + /** + * The primary text color to use. + */ + primaryTextColor?: string; + /** + * The note background color to use. + */ + noteBkgColor?: string; + /** + * The note text color to use. + */ + noteTextColor?: string; + /** + * The color to use for the first pie chart color. + */ + pie1?: string; + /** + * The color to use for the second pie chart color. + */ + pie2?: string; + /** + * The color to use for the third pie chart color. + */ + pie3?: string; + /** + * The color to use for the fourth pie chart color. + */ + pie4?: string; + /** + * The color to use for the fifth pie chart color. + */ + pie5?: string; + /** + * The color to use for the sixth pie chart color. + */ + pie6?: string; + /** + * The color to use for the seventh pie chart color. + */ + pie7?: string; + /** + * The color to use for the eighth pie chart color. + */ + pie8?: string; + /** + * The color to use for the ninth pie chart color. + */ + pie9?: string; + /** + * The color to use for the tenth pie chart color. + */ + pie10?: string; + /** + * The color to use for the eleventh pie chart color. + */ + pie11?: string; + /** + * The color to use for the twelfth pie chart color. + */ + pie12?: string; + /** + * The width of the stroke around the pie chart. + */ + pieOuterStrokeWidth?: number; + /** + * The color to use for the first quadrant fill. + */ + quadrant1Fill?: string; + /** + * The color to use for the second quadrant fill. + */ + quadrant2Fill?: string; + /** + * The color to use for the third quadrant fill. + */ + quadrant3Fill?: string; + /** + * The color to use for the fourth quadrant fill. + */ + quadrant4Fill?: string; + /** + * The color to use for the first quadrant text fill. + */ + quadrant1TextFill?: string; + /** + * The color to use for the second quadrant text fill. + */ + quadrant2TextFill?: string; + /** + * The color to use for the third quadrant text fill. + */ + quadrant3TextFill?: string; + /** + * The color to use for the fourth quadrant text fill. + */ + quadrant4TextFill?: string; + /** + * The color to use for the quadrant point fill. + */ + quadrantPointFill?: string; + /** + * The color to use for the quadrant point text fill. + */ + quadrantPointTextFill?: string; + /** + * The color to use for the quadrant x-axis text fill. + */ + quadrantXAxisTextFill?: string; + /** + * The color to use for the quadrant y-axis text fill. + */ + quadrantYAxisTextFill?: string; + /** + * The color to use for the quadrant internal border stroke fill. + */ + quadrantInternalBorderStrokeFill?: string; + /** + * The color to use for the quadrant external border stroke fill. + */ + quadrantExternalBorderStrokeFill?: string; + /** + * The color to use for the quadrant title fill. + */ + quadrantTitleFill?: string; + /** + * The color to use for the xy chart. + */ + xyChart?: { + /** + * The color to use for the xy chart background. + */ + backgroundColor?: string; + /** + * The color to use for the xy chart title. + */ + titleColor?: string; + /** + * The color to use for the xy chart x-axis title. + */ + xAxisTitleColor?: string; + /** + * The color to use for the xy chart x-axis label. + */ + xAxisLabelColor?: string; + /** + * The color to use for the xy chart x-axis tick. + */ + xAxisTickColor?: string; + /** + * The color to use for the xy chart x-axis line. + */ + xAxisLineColor?: string; + /** + * The color to use for the xy chart y-axis title. + */ + yAxisTitleColor?: string; + /** + * The color to use for the xy chart y-axis label. + */ + yAxisLabelColor?: string; + /** + * The color to use for the xy chart y-axis tick. + */ + yAxisTickColor?: string; + /** + * The color to use for the xy chart y-axis line. + */ + yAxisLineColor?: string; + /** + * The color to use for the xy chart plot color palette. + */ + plotColorPalette?: string; + }; + /** + * The maximum number of colors allowed in the theme. + */ + THEME_COLOR_LIMIT?: number; +} /** * The object containing configurations specific for flowcharts * diff --git a/packages/mermaid/src/diagrams/pie/pieRenderer.ts b/packages/mermaid/src/diagrams/pie/pieRenderer.ts index 8f3b9cc5b3..cec336db23 100644 --- a/packages/mermaid/src/diagrams/pie/pieRenderer.ts +++ b/packages/mermaid/src/diagrams/pie/pieRenderer.ts @@ -50,7 +50,7 @@ export const draw: DrawDefinition = (text, id, _version, diagObj) => { group.attr('transform', 'translate(' + pieWidth / 2 + ',' + height / 2 + ')'); const { themeVariables } = globalConfig; - let [outerStrokeWidth] = parseFontSize(themeVariables.pieOuterStrokeWidth); + let [outerStrokeWidth] = parseFontSize(themeVariables?.pieOuterStrokeWidth); outerStrokeWidth ??= 2; const textPosition: number = pieConfig.textPosition; @@ -76,21 +76,21 @@ export const draw: DrawDefinition = (text, id, _version, diagObj) => { const arcs: d3.PieArcDatum[] = createPieArcs(sections); const myGeneratedColors = [ - themeVariables.pie1, - themeVariables.pie2, - themeVariables.pie3, - themeVariables.pie4, - themeVariables.pie5, - themeVariables.pie6, - themeVariables.pie7, - themeVariables.pie8, - themeVariables.pie9, - themeVariables.pie10, - themeVariables.pie11, - themeVariables.pie12, + themeVariables?.pie1 ?? null, + themeVariables?.pie2 ?? null, + themeVariables?.pie3 ?? null, + themeVariables?.pie4 ?? null, + themeVariables?.pie5 ?? null, + themeVariables?.pie6 ?? null, + themeVariables?.pie7 ?? null, + themeVariables?.pie8 ?? null, + themeVariables?.pie9 ?? null, + themeVariables?.pie10 ?? null, + themeVariables?.pie11 ?? null, + themeVariables?.pie12 ?? null, ]; // Set the color scale - const color: d3.ScaleOrdinal = scaleOrdinal(myGeneratedColors); + const color: d3.ScaleOrdinal = scaleOrdinal(myGeneratedColors); // Build the pie chart: each part of the pie is a path that we build using the arc function. group diff --git a/packages/mermaid/src/diagrams/quadrant-chart/quadrantDb.ts b/packages/mermaid/src/diagrams/quadrant-chart/quadrantDb.ts index 9e16defa1e..63f4a3c7e7 100644 --- a/packages/mermaid/src/diagrams/quadrant-chart/quadrantDb.ts +++ b/packages/mermaid/src/diagrams/quadrant-chart/quadrantDb.ts @@ -126,21 +126,21 @@ function getQuadrantData() { quadrantBuilder.setConfig(quadrantChartConfig); } quadrantBuilder.setThemeConfig({ - quadrant1Fill: themeVariables.quadrant1Fill, - quadrant2Fill: themeVariables.quadrant2Fill, - quadrant3Fill: themeVariables.quadrant3Fill, - quadrant4Fill: themeVariables.quadrant4Fill, - quadrant1TextFill: themeVariables.quadrant1TextFill, - quadrant2TextFill: themeVariables.quadrant2TextFill, - quadrant3TextFill: themeVariables.quadrant3TextFill, - quadrant4TextFill: themeVariables.quadrant4TextFill, - quadrantPointFill: themeVariables.quadrantPointFill, - quadrantPointTextFill: themeVariables.quadrantPointTextFill, - quadrantXAxisTextFill: themeVariables.quadrantXAxisTextFill, - quadrantYAxisTextFill: themeVariables.quadrantYAxisTextFill, - quadrantExternalBorderStrokeFill: themeVariables.quadrantExternalBorderStrokeFill, - quadrantInternalBorderStrokeFill: themeVariables.quadrantInternalBorderStrokeFill, - quadrantTitleFill: themeVariables.quadrantTitleFill, + quadrant1Fill: themeVariables?.quadrant1Fill, + quadrant2Fill: themeVariables?.quadrant2Fill, + quadrant3Fill: themeVariables?.quadrant3Fill, + quadrant4Fill: themeVariables?.quadrant4Fill, + quadrant1TextFill: themeVariables?.quadrant1TextFill, + quadrant2TextFill: themeVariables?.quadrant2TextFill, + quadrant3TextFill: themeVariables?.quadrant3TextFill, + quadrant4TextFill: themeVariables?.quadrant4TextFill, + quadrantPointFill: themeVariables?.quadrantPointFill, + quadrantPointTextFill: themeVariables?.quadrantPointTextFill, + quadrantXAxisTextFill: themeVariables?.quadrantXAxisTextFill, + quadrantYAxisTextFill: themeVariables?.quadrantYAxisTextFill, + quadrantExternalBorderStrokeFill: themeVariables?.quadrantExternalBorderStrokeFill, + quadrantInternalBorderStrokeFill: themeVariables?.quadrantInternalBorderStrokeFill, + quadrantTitleFill: themeVariables?.quadrantTitleFill, }); quadrantBuilder.setData({ titleText: getDiagramTitle() }); return quadrantBuilder.build(); diff --git a/packages/mermaid/src/diagrams/xychart/xychartDb.ts b/packages/mermaid/src/diagrams/xychart/xychartDb.ts index 23b90724cd..0a545bf6b3 100644 --- a/packages/mermaid/src/diagrams/xychart/xychartDb.ts +++ b/packages/mermaid/src/diagrams/xychart/xychartDb.ts @@ -42,7 +42,7 @@ interface NormalTextType { function getChartDefaultThemeConfig(): XYChartThemeConfig { const defaultThemeVariables = getThemeVariables(); const config = configApi.getConfig(); - return cleanAndMerge(defaultThemeVariables.xyChart, config.themeVariables.xyChart); + return cleanAndMerge(defaultThemeVariables.xyChart, config.themeVariables?.xyChart); } function getChartDefaultConfig(): XYChartConfig { const config = configApi.getConfig(); diff --git a/packages/mermaid/src/schemas/config.schema.yaml b/packages/mermaid/src/schemas/config.schema.yaml index d798ec63b2..037fbb9ebe 100644 --- a/packages/mermaid/src/schemas/config.schema.yaml +++ b/packages/mermaid/src/schemas/config.schema.yaml @@ -68,7 +68,162 @@ properties: 'null': Can be set to disable any pre-defined mermaid theme default: 'default' themeVariables: - tsType: any + title: Theme Variables + description: | + Theme variables to create a custom theme. + type: object + properties: + fontFamily: + description: The CSS `font-family` to use. + type: string + fontSize: + description: The font size to use. + type: number + fontWeight: + description: The font weight to use. + type: number + primaryColor: + description: The primary color to use. + type: string + default: '#fff4dd' + primaryTextColor: + description: The primary text color to use. + type: string + default: '#333' + noteBkgColor: + description: The note background color to use. + type: string + default: '#fff5ad' + noteTextColor: + description: The note text color to use. + type: string + default: '#333' + pie1: + description: The color to use for the first pie chart color. + type: string + pie2: + description: The color to use for the second pie chart color. + type: string + pie3: + description: The color to use for the third pie chart color. + type: string + pie4: + description: The color to use for the fourth pie chart color. + type: string + pie5: + description: The color to use for the fifth pie chart color. + type: string + pie6: + description: The color to use for the sixth pie chart color. + type: string + pie7: + description: The color to use for the seventh pie chart color. + type: string + pie8: + description: The color to use for the eighth pie chart color. + type: string + pie9: + description: The color to use for the ninth pie chart color. + type: string + pie10: + description: The color to use for the tenth pie chart color. + type: string + pie11: + description: The color to use for the eleventh pie chart color. + type: string + pie12: + description: The color to use for the twelfth pie chart color. + type: string + pieOuterStrokeWidth: + description: The width of the stroke around the pie chart. + type: number + default: 2 + quadrant1Fill: + description: The color to use for the first quadrant fill. + type: string + quadrant2Fill: + description: The color to use for the second quadrant fill. + type: string + quadrant3Fill: + description: The color to use for the third quadrant fill. + type: string + quadrant4Fill: + description: The color to use for the fourth quadrant fill. + type: string + quadrant1TextFill: + description: The color to use for the first quadrant text fill. + type: string + quadrant2TextFill: + description: The color to use for the second quadrant text fill. + type: string + quadrant3TextFill: + description: The color to use for the third quadrant text fill. + type: string + quadrant4TextFill: + description: The color to use for the fourth quadrant text fill. + type: string + quadrantPointFill: + description: The color to use for the quadrant point fill. + type: string + quadrantPointTextFill: + description: The color to use for the quadrant point text fill. + type: string + quadrantXAxisTextFill: + description: The color to use for the quadrant x-axis text fill. + type: string + quadrantYAxisTextFill: + description: The color to use for the quadrant y-axis text fill. + type: string + quadrantInternalBorderStrokeFill: + description: The color to use for the quadrant internal border stroke fill. + type: string + quadrantExternalBorderStrokeFill: + description: The color to use for the quadrant external border stroke fill. + type: string + quadrantTitleFill: + description: The color to use for the quadrant title fill. + type: string + xyChart: + description: The color to use for the xy chart. + type: object + properties: + backgroundColor: + description: The color to use for the xy chart background. + type: string + titleColor: + description: The color to use for the xy chart title. + type: string + xAxisTitleColor: + description: The color to use for the xy chart x-axis title. + type: string + xAxisLabelColor: + description: The color to use for the xy chart x-axis label. + type: string + xAxisTickColor: + description: The color to use for the xy chart x-axis tick. + type: string + xAxisLineColor: + description: The color to use for the xy chart x-axis line. + type: string + yAxisTitleColor: + description: The color to use for the xy chart y-axis title. + type: string + yAxisLabelColor: + description: The color to use for the xy chart y-axis label. + type: string + yAxisTickColor: + description: The color to use for the xy chart y-axis tick. + type: string + yAxisLineColor: + description: The color to use for the xy chart y-axis line. + type: string + plotColorPalette: + description: The color to use for the xy chart plot color palette. + type: string + THEME_COLOR_LIMIT: + description: The maximum number of colors allowed in the theme. + type: number + default: 12 themeCSS: type: string maxTextSize: