make themeVars optional

ad1992 · Jul 8, 2024 · 18278dc · 18278dc
1 parent 1061231
commit 18278dc
Show file tree

Hide file tree

Showing 6 changed files with 83 additions and 33 deletions.
diff --git 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
@@ -55,14 +55,64 @@ 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.
    * You may also use `themeCSS` to override this value.
    *
    */
   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
@@ -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<D3Section>[] = 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<string, string | null, never> = scaleOrdinal(myGeneratedColors);

diff --git 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
@@ -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
@@ -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 = {};
     }