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: