From 379559c9922dc90ebeaaa3426f91f2d10eaeae56 Mon Sep 17 00:00:00 2001 From: nourhenta Date: Mon, 28 Apr 2025 23:06:02 +0100 Subject: [PATCH 1/3] docs(theme): document fontFamily customization in themeVariables --- docs/config/theming.md | 47 +++++++++++---------- packages/mermaid/src/docs/config/theming.md | 47 +++++++++++---------- 2 files changed, 48 insertions(+), 46 deletions(-) diff --git a/docs/config/theming.md b/docs/config/theming.md index 088d9e755..b6c344560 100644 --- a/docs/config/theming.md +++ b/docs/config/theming.md @@ -207,29 +207,30 @@ The theming engine will only recognize hex colors and not color names. So, the v ## Theme Variables -| Variable | Default value | Description | -| -------------------- | ---------------------------------- | -------------------------------------------------------------------------------------------------------------------------------- | -| darkMode | false | Affects how derived colors are calculated. Set value to `true` for dark mode. | -| 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 | -| 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 | | -| primaryBorderColor | calculated from primaryColor | Color to be used as border in nodes using `primaryColor` | -| secondaryBorderColor | calculated from secondaryColor | Color to be used as border in nodes using `secondaryColor` | -| secondaryTextColor | calculated from secondaryColor | Color to be used as text color in nodes using `secondaryColor` | -| tertiaryColor | calculated from primaryColor | | -| tertiaryBorderColor | calculated from tertiaryColor | Color to be used as border in nodes using `tertiaryColor` | -| tertiaryTextColor | calculated from tertiaryColor | Color to be used as text color in nodes using `tertiaryColor` | -| noteBkgColor | #fff5ad | Color used as background in notes | -| noteTextColor | #333 | Text color in note rectangles | -| noteBorderColor | calculated from noteBkgColor | Border color in note rectangles | -| lineColor | calculated from background | | -| textColor | calculated from primaryTextColor | Text in diagram over the background for instance text on labels and on signals in sequence diagram or the title in Gantt diagram | -| mainBkg | calculated from primaryColor | Background in flowchart objects like rects/circles, class diagram classes, sequence diagram etc | -| errorBkgColor | tertiaryColor | Color for syntax error message | -| errorTextColor | tertiaryTextColor | Color for syntax error message | +| Variable | Default value | Description | +| ---------- | ---------------------------- | ----------------------------------------------------------------------------------------------------------- | +| darkMode | false | Affects how derived colors are calculated. Set value to `true` for dark mode. | +| background | #f4f4f4 | Used to calculate color for items that should either be background colored or contrasting to the background | +| fontFamily | trebuchet ms, verdana, arial | Font family for diagram text; can be customized via `themeVariables`. | + +\| fontSize | 16px | Font size in pixels | +\| 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 | | +\| primaryBorderColor | calculated from primaryColor | Color to be used as border in nodes using `primaryColor` | +\| secondaryBorderColor | calculated from secondaryColor | Color to be used as border in nodes using `secondaryColor` | +\| secondaryTextColor | calculated from secondaryColor | Color to be used as text color in nodes using `secondaryColor` | +\| tertiaryColor | calculated from primaryColor | | +\| tertiaryBorderColor | calculated from tertiaryColor | Color to be used as border in nodes using `tertiaryColor` | +\| tertiaryTextColor | calculated from tertiaryColor | Color to be used as text color in nodes using `tertiaryColor` | +\| noteBkgColor | #fff5ad | Color used as background in notes | +\| noteTextColor | #333 | Text color in note rectangles | +\| noteBorderColor | calculated from noteBkgColor | Border color in note rectangles | +\| lineColor | calculated from background | | +\| textColor | calculated from primaryTextColor | Text in diagram over the background for instance text on labels and on signals in sequence diagram or the title in Gantt diagram | +\| mainBkg | calculated from primaryColor | Background in flowchart objects like rects/circles, class diagram classes, sequence diagram etc | +\| errorBkgColor | tertiaryColor | Color for syntax error message | +\| errorTextColor | tertiaryTextColor | Color for syntax error message | ## Flowchart Variables diff --git a/packages/mermaid/src/docs/config/theming.md b/packages/mermaid/src/docs/config/theming.md index 5643dc7fb..4a030a853 100644 --- a/packages/mermaid/src/docs/config/theming.md +++ b/packages/mermaid/src/docs/config/theming.md @@ -129,29 +129,30 @@ The theming engine will only recognize hex colors and not color names. So, the v ## Theme Variables -| Variable | Default value | Description | -| -------------------- | ---------------------------------- | -------------------------------------------------------------------------------------------------------------------------------- | -| darkMode | false | Affects how derived colors are calculated. Set value to `true` for dark mode. | -| 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 | -| 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 | | -| primaryBorderColor | calculated from primaryColor | Color to be used as border in nodes using `primaryColor` | -| secondaryBorderColor | calculated from secondaryColor | Color to be used as border in nodes using `secondaryColor` | -| secondaryTextColor | calculated from secondaryColor | Color to be used as text color in nodes using `secondaryColor` | -| tertiaryColor | calculated from primaryColor | | -| tertiaryBorderColor | calculated from tertiaryColor | Color to be used as border in nodes using `tertiaryColor` | -| tertiaryTextColor | calculated from tertiaryColor | Color to be used as text color in nodes using `tertiaryColor` | -| noteBkgColor | #fff5ad | Color used as background in notes | -| noteTextColor | #333 | Text color in note rectangles | -| noteBorderColor | calculated from noteBkgColor | Border color in note rectangles | -| lineColor | calculated from background | | -| textColor | calculated from primaryTextColor | Text in diagram over the background for instance text on labels and on signals in sequence diagram or the title in Gantt diagram | -| mainBkg | calculated from primaryColor | Background in flowchart objects like rects/circles, class diagram classes, sequence diagram etc | -| errorBkgColor | tertiaryColor | Color for syntax error message | -| errorTextColor | tertiaryTextColor | Color for syntax error message | +| Variable | Default value | Description | +| ---------- | ---------------------------- | ----------------------------------------------------------------------------------------------------------- | +| darkMode | false | Affects how derived colors are calculated. Set value to `true` for dark mode. | +| background | #f4f4f4 | Used to calculate color for items that should either be background colored or contrasting to the background | +| fontFamily | trebuchet ms, verdana, arial | Font family for diagram text; can be customized via `themeVariables`. | + +| fontSize | 16px | Font size in pixels | +| 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 | | +| primaryBorderColor | calculated from primaryColor | Color to be used as border in nodes using `primaryColor` | +| secondaryBorderColor | calculated from secondaryColor | Color to be used as border in nodes using `secondaryColor` | +| secondaryTextColor | calculated from secondaryColor | Color to be used as text color in nodes using `secondaryColor` | +| tertiaryColor | calculated from primaryColor | | +| tertiaryBorderColor | calculated from tertiaryColor | Color to be used as border in nodes using `tertiaryColor` | +| tertiaryTextColor | calculated from tertiaryColor | Color to be used as text color in nodes using `tertiaryColor` | +| noteBkgColor | #fff5ad | Color used as background in notes | +| noteTextColor | #333 | Text color in note rectangles | +| noteBorderColor | calculated from noteBkgColor | Border color in note rectangles | +| lineColor | calculated from background | | +| textColor | calculated from primaryTextColor | Text in diagram over the background for instance text on labels and on signals in sequence diagram or the title in Gantt diagram | +| mainBkg | calculated from primaryColor | Background in flowchart objects like rects/circles, class diagram classes, sequence diagram etc | +| errorBkgColor | tertiaryColor | Color for syntax error message | +| errorTextColor | tertiaryTextColor | Color for syntax error message | ## Flowchart Variables From c364ff463a3daa8336443dd132aa5040ae105436 Mon Sep 17 00:00:00 2001 From: nourhenta Date: Tue, 29 Apr 2025 13:31:42 +0100 Subject: [PATCH 2/3] docs(theme): fix table formatting by removing extra line between fontFamily and fontSize --- docs/config/theming.md | 47 ++++++++++----------- packages/mermaid/src/docs/config/theming.md | 47 ++++++++++----------- 2 files changed, 46 insertions(+), 48 deletions(-) diff --git a/docs/config/theming.md b/docs/config/theming.md index b6c344560..2d8fff23c 100644 --- a/docs/config/theming.md +++ b/docs/config/theming.md @@ -207,30 +207,29 @@ The theming engine will only recognize hex colors and not color names. So, the v ## Theme Variables -| Variable | Default value | Description | -| ---------- | ---------------------------- | ----------------------------------------------------------------------------------------------------------- | -| darkMode | false | Affects how derived colors are calculated. Set value to `true` for dark mode. | -| background | #f4f4f4 | Used to calculate color for items that should either be background colored or contrasting to the background | -| fontFamily | trebuchet ms, verdana, arial | Font family for diagram text; can be customized via `themeVariables`. | - -\| fontSize | 16px | Font size in pixels | -\| 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 | | -\| primaryBorderColor | calculated from primaryColor | Color to be used as border in nodes using `primaryColor` | -\| secondaryBorderColor | calculated from secondaryColor | Color to be used as border in nodes using `secondaryColor` | -\| secondaryTextColor | calculated from secondaryColor | Color to be used as text color in nodes using `secondaryColor` | -\| tertiaryColor | calculated from primaryColor | | -\| tertiaryBorderColor | calculated from tertiaryColor | Color to be used as border in nodes using `tertiaryColor` | -\| tertiaryTextColor | calculated from tertiaryColor | Color to be used as text color in nodes using `tertiaryColor` | -\| noteBkgColor | #fff5ad | Color used as background in notes | -\| noteTextColor | #333 | Text color in note rectangles | -\| noteBorderColor | calculated from noteBkgColor | Border color in note rectangles | -\| lineColor | calculated from background | | -\| textColor | calculated from primaryTextColor | Text in diagram over the background for instance text on labels and on signals in sequence diagram or the title in Gantt diagram | -\| mainBkg | calculated from primaryColor | Background in flowchart objects like rects/circles, class diagram classes, sequence diagram etc | -\| errorBkgColor | tertiaryColor | Color for syntax error message | -\| errorTextColor | tertiaryTextColor | Color for syntax error message | +| Variable | Default value | Description | +| -------------------- | ---------------------------------- | -------------------------------------------------------------------------------------------------------------------------------- | +| darkMode | false | Affects how derived colors are calculated. Set value to `true` for dark mode. | +| background | #f4f4f4 | Used to calculate color for items that should either be background colored or contrasting to the background | +| fontFamily | trebuchet ms, verdana, arial | Font family for diagram text; can be customized via `themeVariables` | +| fontSize | 16px | Font size in pixels | +| 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 | | +| primaryBorderColor | calculated from primaryColor | Color to be used as border in nodes using `primaryColor` | +| secondaryBorderColor | calculated from secondaryColor | Color to be used as border in nodes using `secondaryColor` | +| secondaryTextColor | calculated from secondaryColor | Color to be used as text color in nodes using `secondaryColor` | +| tertiaryColor | calculated from primaryColor | | +| tertiaryBorderColor | calculated from tertiaryColor | Color to be used as border in nodes using `tertiaryColor` | +| tertiaryTextColor | calculated from tertiaryColor | Color to be used as text color in nodes using `tertiaryColor` | +| noteBkgColor | #fff5ad | Color used as background in notes | +| noteTextColor | #333 | Text color in note rectangles | +| noteBorderColor | calculated from noteBkgColor | Border color in note rectangles | +| lineColor | calculated from background | | +| textColor | calculated from primaryTextColor | Text in diagram over the background for instance text on labels and on signals in sequence diagram or the title in Gantt diagram | +| mainBkg | calculated from primaryColor | Background in flowchart objects like rects/circles, class diagram classes, sequence diagram etc | +| errorBkgColor | tertiaryColor | Color for syntax error message | +| errorTextColor | tertiaryTextColor | Color for syntax error message | ## Flowchart Variables diff --git a/packages/mermaid/src/docs/config/theming.md b/packages/mermaid/src/docs/config/theming.md index 4a030a853..c60216822 100644 --- a/packages/mermaid/src/docs/config/theming.md +++ b/packages/mermaid/src/docs/config/theming.md @@ -129,30 +129,29 @@ The theming engine will only recognize hex colors and not color names. So, the v ## Theme Variables -| Variable | Default value | Description | -| ---------- | ---------------------------- | ----------------------------------------------------------------------------------------------------------- | -| darkMode | false | Affects how derived colors are calculated. Set value to `true` for dark mode. | -| background | #f4f4f4 | Used to calculate color for items that should either be background colored or contrasting to the background | -| fontFamily | trebuchet ms, verdana, arial | Font family for diagram text; can be customized via `themeVariables`. | - -| fontSize | 16px | Font size in pixels | -| 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 | | -| primaryBorderColor | calculated from primaryColor | Color to be used as border in nodes using `primaryColor` | -| secondaryBorderColor | calculated from secondaryColor | Color to be used as border in nodes using `secondaryColor` | -| secondaryTextColor | calculated from secondaryColor | Color to be used as text color in nodes using `secondaryColor` | -| tertiaryColor | calculated from primaryColor | | -| tertiaryBorderColor | calculated from tertiaryColor | Color to be used as border in nodes using `tertiaryColor` | -| tertiaryTextColor | calculated from tertiaryColor | Color to be used as text color in nodes using `tertiaryColor` | -| noteBkgColor | #fff5ad | Color used as background in notes | -| noteTextColor | #333 | Text color in note rectangles | -| noteBorderColor | calculated from noteBkgColor | Border color in note rectangles | -| lineColor | calculated from background | | -| textColor | calculated from primaryTextColor | Text in diagram over the background for instance text on labels and on signals in sequence diagram or the title in Gantt diagram | -| mainBkg | calculated from primaryColor | Background in flowchart objects like rects/circles, class diagram classes, sequence diagram etc | -| errorBkgColor | tertiaryColor | Color for syntax error message | -| errorTextColor | tertiaryTextColor | Color for syntax error message | +| Variable | Default value | Description | +| -------------------- | ---------------------------------- | -------------------------------------------------------------------------------------------------------------------------------- | +| darkMode | false | Affects how derived colors are calculated. Set value to `true` for dark mode. | +| background | #f4f4f4 | Used to calculate color for items that should either be background colored or contrasting to the background | +| fontFamily | trebuchet ms, verdana, arial | Font family for diagram text; can be customized via `themeVariables` | +| fontSize | 16px | Font size in pixels | +| 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 | | +| primaryBorderColor | calculated from primaryColor | Color to be used as border in nodes using `primaryColor` | +| secondaryBorderColor | calculated from secondaryColor | Color to be used as border in nodes using `secondaryColor` | +| secondaryTextColor | calculated from secondaryColor | Color to be used as text color in nodes using `secondaryColor` | +| tertiaryColor | calculated from primaryColor | | +| tertiaryBorderColor | calculated from tertiaryColor | Color to be used as border in nodes using `tertiaryColor` | +| tertiaryTextColor | calculated from tertiaryColor | Color to be used as text color in nodes using `tertiaryColor` | +| noteBkgColor | #fff5ad | Color used as background in notes | +| noteTextColor | #333 | Text color in note rectangles | +| noteBorderColor | calculated from noteBkgColor | Border color in note rectangles | +| lineColor | calculated from background | | +| textColor | calculated from primaryTextColor | Text in diagram over the background for instance text on labels and on signals in sequence diagram or the title in Gantt diagram | +| mainBkg | calculated from primaryColor | Background in flowchart objects like rects/circles, class diagram classes, sequence diagram etc | +| errorBkgColor | tertiaryColor | Color for syntax error message | +| errorTextColor | tertiaryTextColor | Color for syntax error message | ## Flowchart Variables From 819843cf2abf716fc46f63897531dfec2b08b6d1 Mon Sep 17 00:00:00 2001 From: nourhenta Date: Thu, 1 May 2025 20:53:37 +0100 Subject: [PATCH 3/3] corrected font size text --- docs/config/theming.md | 2 +- packages/mermaid/src/docs/config/theming.md | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/config/theming.md b/docs/config/theming.md index 2d8fff23c..5464e3a1d 100644 --- a/docs/config/theming.md +++ b/docs/config/theming.md @@ -211,7 +211,7 @@ The theming engine will only recognize hex colors and not color names. So, the v | -------------------- | ---------------------------------- | -------------------------------------------------------------------------------------------------------------------------------- | | darkMode | false | Affects how derived colors are calculated. Set value to `true` for dark mode. | | background | #f4f4f4 | Used to calculate color for items that should either be background colored or contrasting to the background | -| fontFamily | trebuchet ms, verdana, arial | Font family for diagram text; can be customized via `themeVariables` | +| fontFamily | trebuchet ms, verdana, arial | Font family for diagram text | | fontSize | 16px | Font size in pixels | | 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` | diff --git a/packages/mermaid/src/docs/config/theming.md b/packages/mermaid/src/docs/config/theming.md index c60216822..8fd05812a 100644 --- a/packages/mermaid/src/docs/config/theming.md +++ b/packages/mermaid/src/docs/config/theming.md @@ -133,7 +133,7 @@ The theming engine will only recognize hex colors and not color names. So, the v | -------------------- | ---------------------------------- | -------------------------------------------------------------------------------------------------------------------------------- | | darkMode | false | Affects how derived colors are calculated. Set value to `true` for dark mode. | | background | #f4f4f4 | Used to calculate color for items that should either be background colored or contrasting to the background | -| fontFamily | trebuchet ms, verdana, arial | Font family for diagram text; can be customized via `themeVariables` | +| fontFamily | trebuchet ms, verdana, arial | Font family for diagram text | | fontSize | 16px | Font size in pixels | | 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` |