From 10612319fd56d798c63f477cd90dbd5a0bcd20d1 Mon Sep 17 00:00:00 2001 From: Aakansha Doshi Date: Mon, 8 Jul 2024 19:54:22 +0530 Subject: [PATCH 1/6] fix: make themeVariables typesafe --- packages/mermaid/src/config.ts | 2 +- .../mermaid/src/diagrams/pie/pieRenderer.ts | 26 +++++++++---------- packages/mermaid/src/mermaid.ts | 2 +- packages/mermaid/src/mermaidAPI.ts | 4 +-- 4 files changed, 17 insertions(+), 17 deletions(-) diff --git a/packages/mermaid/src/config.ts b/packages/mermaid/src/config.ts index 1229bcd22b..9abcc60021 100644 --- a/packages/mermaid/src/config.ts +++ b/packages/mermaid/src/config.ts @@ -189,7 +189,7 @@ export const addDirective = (directive: MermaidConfig) => { sanitizeDirective(directive); // If the directive has a fontFamily, but no themeVariables, add the fontFamily to the themeVariables - if (directive.fontFamily && !directive.themeVariables?.fontFamily) { + if (directive.fontFamily && !directive.themeVariables.fontFamily) { directive.themeVariables = { fontFamily: directive.fontFamily }; } diff --git a/packages/mermaid/src/diagrams/pie/pieRenderer.ts b/packages/mermaid/src/diagrams/pie/pieRenderer.ts index 8f3b9cc5b3..b82cb83fb2 100644 --- a/packages/mermaid/src/diagrams/pie/pieRenderer.ts +++ b/packages/mermaid/src/diagrams/pie/pieRenderer.ts @@ -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/mermaid.ts b/packages/mermaid/src/mermaid.ts index eb9007f9cd..286c5dde7e 100644 --- a/packages/mermaid/src/mermaid.ts +++ b/packages/mermaid/src/mermaid.ts @@ -188,7 +188,7 @@ const runThrowsErrors = async function ( /** * Used to set configurations for mermaid. - * This function should be called before the run function. +* This function should be called before the run function. * @param config - Configuration object for mermaid. */ diff --git a/packages/mermaid/src/mermaidAPI.ts b/packages/mermaid/src/mermaidAPI.ts index 7bca4d995e..da19a3f1ef 100644 --- a/packages/mermaid/src/mermaidAPI.ts +++ b/packages/mermaid/src/mermaidAPI.ts @@ -471,9 +471,9 @@ const render = async function ( /** * @param options - Initial Mermaid options */ -function initialize(options: MermaidConfig = {}) { +function initialize(options: MermaidConfig = { themeVariables: {} }) { // Handle legacy location of font-family configuration - if (options?.fontFamily && !options.themeVariables?.fontFamily) { + if (options?.fontFamily && !options.themeVariables.fontFamily) { if (!options.themeVariables) { options.themeVariables = {}; } From 18278dc45e6b024b3f3877411b49a5edaff2222a Mon Sep 17 00:00:00 2001 From: Aakansha Doshi Date: Mon, 8 Jul 2024 20:05:12 +0530 Subject: [PATCH 2/6] make themeVars optional --- packages/mermaid/src/config.ts | 2 +- packages/mermaid/src/config.type.ts | 52 ++++++++++++++++++- .../mermaid/src/diagrams/pie/pieRenderer.ts | 26 +++++----- .../src/diagrams/quadrant-chart/quadrantDb.ts | 30 +++++------ .../mermaid/src/diagrams/xychart/xychartDb.ts | 2 +- packages/mermaid/src/mermaidAPI.ts | 4 +- 6 files changed, 83 insertions(+), 33 deletions(-) diff --git a/packages/mermaid/src/config.ts b/packages/mermaid/src/config.ts index 9abcc60021..1229bcd22b 100644 --- a/packages/mermaid/src/config.ts +++ b/packages/mermaid/src/config.ts @@ -189,7 +189,7 @@ export const addDirective = (directive: MermaidConfig) => { sanitizeDirective(directive); // If the directive has a fontFamily, but no themeVariables, add the fontFamily to the themeVariables - if (directive.fontFamily && !directive.themeVariables.fontFamily) { + if (directive.fontFamily && !directive.themeVariables?.fontFamily) { directive.themeVariables = { fontFamily: directive.fontFamily }; } diff --git a/packages/mermaid/src/config.type.ts b/packages/mermaid/src/config.type.ts index b7cf27e72b..b712b020d7 100644 --- a/packages/mermaid/src/config.type.ts +++ b/packages/mermaid/src/config.type.ts @@ -55,6 +55,56 @@ export type DOMPurifyConfiguration = import('dompurify').Config; */ export type CSSFontSize = string | number; +export interface ThemeVariables { + fontFamily?: string; + fontSize?: CSSFontSize; + fontWeight?: number; + primaryColor?: string; + primaryTextColor?: string; + pie1?: string; + pie2?: string; + pie3?: string; + pie4?: string; + pie5?: string; + pie6?: string; + pie7?: string; + pie8?: string; + pie9?: string; + pie10?: string; + pie11?: string; + pie12?: string; + pieOuterStrokeWidth?:number; + quadrant1Fill?: string; + quadrant2Fill?: string; + quadrant3Fill?: string; + quadrant4Fill?: string; + quadrant1TextFill?: string; + quadrant2TextFill?: string; + quadrant3TextFill?: string; + quadrant4TextFill?: string; + quadrantPointFill?: string; + quadrantPointTextFill?: string; + quadrantXAxisTextFill?: string; + quadrantYAxisTextFill?: string; + quadrantInternalBorderStrokeFill?: string; + quadrantExternalBorderStrokeFill?: string; + quadrantTitleFill?: string; + xyChart?: { + backgroundColor?: string; + titleColor?: string; + xAxisTitleColor?: string; + xAxisLabelColor?: string; + xAxisTickColor?: string; + xAxisLineColor?: string; + yAxisTitleColor?: string; + yAxisLabelColor?: string; + yAxisTickColor?: string; + yAxisLineColor?: string; + plotColorPalette?: string; + }; + THEME_COLOR_LIMIT?: number; + +} export interface MermaidConfig { /** * Theme, the CSS style sheet. @@ -62,7 +112,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 diff --git a/packages/mermaid/src/diagrams/pie/pieRenderer.ts b/packages/mermaid/src/diagrams/pie/pieRenderer.ts index b82cb83fb2..16da81173c 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,18 +76,18 @@ export const draw: DrawDefinition = (text, id, _version, diagObj) => { const arcs: d3.PieArcDatum[] = createPieArcs(sections); const myGeneratedColors = [ - 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, + 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); 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/mermaidAPI.ts b/packages/mermaid/src/mermaidAPI.ts index da19a3f1ef..7bca4d995e 100644 --- a/packages/mermaid/src/mermaidAPI.ts +++ b/packages/mermaid/src/mermaidAPI.ts @@ -471,9 +471,9 @@ const render = async function ( /** * @param options - Initial Mermaid options */ -function initialize(options: MermaidConfig = { themeVariables: {} }) { +function initialize(options: MermaidConfig = {}) { // Handle legacy location of font-family configuration - if (options?.fontFamily && !options.themeVariables.fontFamily) { + if (options?.fontFamily && !options.themeVariables?.fontFamily) { if (!options.themeVariables) { options.themeVariables = {}; } From fe41f1b5e65b088bb960cc2bb6b7a98e93e2f327 Mon Sep 17 00:00:00 2001 From: Aakansha Doshi Date: Mon, 8 Jul 2024 20:06:59 +0530 Subject: [PATCH 3/6] use nullish coalescing operator --- .../mermaid/src/diagrams/pie/pieRenderer.ts | 24 +++++++++---------- 1 file changed, 12 insertions(+), 12 deletions(-) diff --git a/packages/mermaid/src/diagrams/pie/pieRenderer.ts b/packages/mermaid/src/diagrams/pie/pieRenderer.ts index 16da81173c..cec336db23 100644 --- a/packages/mermaid/src/diagrams/pie/pieRenderer.ts +++ b/packages/mermaid/src/diagrams/pie/pieRenderer.ts @@ -76,18 +76,18 @@ export const draw: DrawDefinition = (text, id, _version, diagObj) => { const arcs: d3.PieArcDatum[] = createPieArcs(sections); const myGeneratedColors = [ - 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, + 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); From c89f1ea02c4f5ab7c4497bbed39c9c6f39e85681 Mon Sep 17 00:00:00 2001 From: Aakansha Doshi Date: Mon, 8 Jul 2024 20:10:15 +0530 Subject: [PATCH 4/6] pretty fix --- packages/mermaid/src/mermaid.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/mermaid/src/mermaid.ts b/packages/mermaid/src/mermaid.ts index 286c5dde7e..eb9007f9cd 100644 --- a/packages/mermaid/src/mermaid.ts +++ b/packages/mermaid/src/mermaid.ts @@ -188,7 +188,7 @@ const runThrowsErrors = async function ( /** * Used to set configurations for mermaid. -* This function should be called before the run function. + * This function should be called before the run function. * @param config - Configuration object for mermaid. */ From b6fa3658c39795cfc17c18a8f9c346371b2339d3 Mon Sep 17 00:00:00 2001 From: Aakansha Doshi Date: Tue, 9 Jul 2024 12:33:15 +0530 Subject: [PATCH 5/6] update config-schema.yaml --- packages/mermaid/src/config.type.ts | 242 ++++++++++++++---- .../mermaid/src/schemas/config.schema.yaml | 146 ++++++++++- 2 files changed, 336 insertions(+), 52 deletions(-) diff --git a/packages/mermaid/src/config.type.ts b/packages/mermaid/src/config.type.ts index b712b020d7..32814219ab 100644 --- a/packages/mermaid/src/config.type.ts +++ b/packages/mermaid/src/config.type.ts @@ -55,56 +55,6 @@ export type DOMPurifyConfiguration = import('dompurify').Config; */ export type CSSFontSize = string | number; -export interface ThemeVariables { - fontFamily?: string; - fontSize?: CSSFontSize; - fontWeight?: number; - primaryColor?: string; - primaryTextColor?: string; - pie1?: string; - pie2?: string; - pie3?: string; - pie4?: string; - pie5?: string; - pie6?: string; - pie7?: string; - pie8?: string; - pie9?: string; - pie10?: string; - pie11?: string; - pie12?: string; - pieOuterStrokeWidth?:number; - quadrant1Fill?: string; - quadrant2Fill?: string; - quadrant3Fill?: string; - quadrant4Fill?: string; - quadrant1TextFill?: string; - quadrant2TextFill?: string; - quadrant3TextFill?: string; - quadrant4TextFill?: string; - quadrantPointFill?: string; - quadrantPointTextFill?: string; - quadrantXAxisTextFill?: string; - quadrantYAxisTextFill?: string; - quadrantInternalBorderStrokeFill?: string; - quadrantExternalBorderStrokeFill?: string; - quadrantTitleFill?: string; - xyChart?: { - backgroundColor?: string; - titleColor?: string; - xAxisTitleColor?: string; - xAxisLabelColor?: string; - xAxisTickColor?: string; - xAxisLineColor?: string; - yAxisTitleColor?: string; - yAxisLabelColor?: string; - yAxisTickColor?: string; - yAxisLineColor?: string; - plotColorPalette?: string; - }; - THEME_COLOR_LIMIT?: number; - -} export interface MermaidConfig { /** * Theme, the CSS style sheet. @@ -112,7 +62,197 @@ export interface MermaidConfig { * */ theme?: 'default' | 'forest' | 'dark' | 'neutral' | 'null'; - themeVariables?: ThemeVariables; + /** + * Theme variables to create a custom theme. + * + */ + 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 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; + }; themeCSS?: string; /** * The maximum allowed size of the users text diagram diff --git a/packages/mermaid/src/schemas/config.schema.yaml b/packages/mermaid/src/schemas/config.schema.yaml index d798ec63b2..29d3ac5e63 100644 --- a/packages/mermaid/src/schemas/config.schema.yaml +++ b/packages/mermaid/src/schemas/config.schema.yaml @@ -68,7 +68,151 @@ properties: 'null': Can be set to disable any pre-defined mermaid theme default: 'default' themeVariables: - tsType: any + 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 + primaryTextColor: + description: The primary text color to use. + type: string + 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: From 33eaeb29c69c98894bb257c1e07682a4f4b4c264 Mon Sep 17 00:00:00 2001 From: Aakansha Doshi Date: Tue, 9 Jul 2024 13:07:05 +0530 Subject: [PATCH 6/6] add title to schema --- packages/mermaid/src/config.type.ts | 391 +++++++++--------- .../mermaid/src/schemas/config.schema.yaml | 11 + 2 files changed, 211 insertions(+), 191 deletions(-) diff --git a/packages/mermaid/src/config.type.ts b/packages/mermaid/src/config.type.ts index 32814219ab..0f77de5657 100644 --- a/packages/mermaid/src/config.type.ts +++ b/packages/mermaid/src/config.type.ts @@ -62,197 +62,7 @@ export interface MermaidConfig { * */ theme?: 'default' | 'forest' | 'dark' | 'neutral' | 'null'; - /** - * Theme variables to create a custom theme. - * - */ - 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 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; - }; + themeVariables?: ThemeVariables; themeCSS?: string; /** * The maximum allowed size of the users text diagram @@ -361,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/schemas/config.schema.yaml b/packages/mermaid/src/schemas/config.schema.yaml index 29d3ac5e63..037fbb9ebe 100644 --- a/packages/mermaid/src/schemas/config.schema.yaml +++ b/packages/mermaid/src/schemas/config.schema.yaml @@ -68,6 +68,7 @@ properties: 'null': Can be set to disable any pre-defined mermaid theme default: 'default' themeVariables: + title: Theme Variables description: | Theme variables to create a custom theme. type: object @@ -84,9 +85,19 @@ properties: 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