From 74b1219d62dd76d98d60abeeb36d4520f64faceb Mon Sep 17 00:00:00 2001
From: Daniel Bartholomae <daniel@bartholomae.name>
Date: Tue, 15 Feb 2022 14:21:04 +0100
Subject: [PATCH] fix(2689): use correct default sans-serif fonts for actors
 and tasks

The previous default font, Open-Sans, does not exist (it is Open Sans).
A generic font family must not be in quotes.
There is no changes to tests, as tests set font-family to Courier
for reproducability.

Fixes 2689
See https://fonts.google.com/specimen/Open+Sans
and https://developer.mozilla.org/en-US/docs/Web/CSS/font-family
---
 docs/Setup.md           | 79 +++++++++--------------------------------
 docs/sequenceDiagram.md |  8 ++---
 src/defaultConfig.js    |  6 ++--
 src/mermaidAPI.js       |  2 +-
 4 files changed, 24 insertions(+), 71 deletions(-)

diff --git a/docs/Setup.md b/docs/Setup.md
index 70e7fdaeb3..85a4fdf3c7 100644
--- a/docs/Setup.md
+++ b/docs/Setup.md
@@ -387,7 +387,7 @@ Default value: false
 | --------------- | ---------------------------------------------------- | ------ | -------- | --------------------------- |
 | actorFontFamily | This sets the font family of the actor's description | string | Required | Any Possible CSS FontFamily |
 
-**Notes:** Default value: "'Open-Sans", "sans-serif"'
+**Notes:** Default value: "'Open Sans", sans-serif'
 
 ### actorFontWeight
 
@@ -938,9 +938,9 @@ Returns **[object][5]** The siteConfig
 
 ### Parameters
 
--   `text`  
+-   `text`
 
-Returns **any** 
+Returns **any**
 
 ## getSiteConfig
 
@@ -1049,81 +1049,36 @@ $(function () {
       inserted. In one is provided a hidden div will be inserted in the body of the page instead. The
       element will be removed when rendering is completed.
 
-Returns **any** 
+Returns **any**
 
 ## updateRendererConfigs
 
 ### Parameters
 
--   `conf` **any** 
+-   `conf` **any**
 
 ## initialize
 
 ### Parameters
 
--   `options` **any** 
+-   `options` **any**
 
-## 
+##
 
 ## mermaidAPI configuration defaults
 
 ```html
 <script>
-  var config = {
-    theme: 'default',
-    logLevel: 'fatal',
-    securityLevel: 'strict',
-    startOnLoad: true,
-    arrowMarkerAbsolute: false,
-
-    er: {
-      diagramPadding: 20,
-      layoutDirection: 'TB',
-      minEntityWidth: 100,
-      minEntityHeight: 75,
-      entityPadding: 15,
-      stroke: 'gray',
-      fill: 'honeydew',
-      fontSize: 12,
-      useMaxWidth: true,
-    },
-    flowchart: {
-      diagramPadding: 8,
-      htmlLabels: true,
-      curve: 'basis',
-    },
-    sequence: {
-      diagramMarginX: 50,
-      diagramMarginY: 10,
-      actorMargin: 50,
-      width: 150,
-      height: 65,
-      boxMargin: 10,
-      boxTextMargin: 5,
-      noteMargin: 10,
-      messageMargin: 35,
-      messageAlign: 'center',
-      mirrorActors: true,
-      bottomMarginAdj: 1,
-      useMaxWidth: true,
-      rightAngles: false,
-      showSequenceNumbers: false,
-    },
-    gantt: {
-      titleTopMargin: 25,
-      barHeight: 20,
-      barGap: 4,
-      topPadding: 50,
-      leftPadding: 75,
-      gridLineStartPadding: 35,
-      fontSize: 11,
-      fontFamily: '"Open-Sans", "sans-serif"',
-      numberSectionStyles: 4,
-      axisFormat: '%Y-%m-%d',
-      topAxis: false,
-    },
-  };
-  mermaid.initialize(config);
+  var config = { theme: 'default', logLevel: 'fatal', securityLevel: 'strict', startOnLoad: true,
+  arrowMarkerAbsolute: false, er: { diagramPadding: 20, layoutDirection: 'TB', minEntityWidth: 100,
+  minEntityHeight: 75, entityPadding: 15, stroke: 'gray', fill: 'honeydew', fontSize: 12, useMaxWidth:
+true, }, flowchart: { diagramPadding: 8, htmlLabels: true, curve: 'basis', }, sequence: {
+  diagramMarginX: 50, diagramMarginY: 10, actorMargin: 50, width: 150, height: 65, boxMargin: 10,
+  boxTextMargin: 5, noteMargin: 10, messageMargin: 35, messageAlign: 'center', mirrorActors: true,
+  bottomMarginAdj: 1, useMaxWidth: true, rightAngles: false, showSequenceNumbers: false, }, gantt: {
+  titleTopMargin: 25, barHeight: 20, barGap: 4, topPadding: 50, leftPadding: 75, gridLineStartPadding:
+35, fontSize: 11, fontFamily: '"Open Sans", sans-serif', numberSectionStyles: 4, axisFormat:
+'%Y-%m-%d', topAxis: false, }, }; mermaid.initialize(config);
 </script>
 ```
 
diff --git a/docs/sequenceDiagram.md b/docs/sequenceDiagram.md
index c5627d8c77..3117a60cd4 100644
--- a/docs/sequenceDiagram.md
+++ b/docs/sequenceDiagram.md
@@ -300,9 +300,7 @@ It is possible to get a sequence number attached to each arrow in a sequence dia
 
 ```html
     <script>
-      mermaid.initialize({
-        sequence: { showSequenceNumbers: true },
-      });
+      mermaid.initialize({ sequence: { showSequenceNumbers: true }, });
     </script>
 ```
 
@@ -493,8 +491,8 @@ mermaid.sequenceConfig = {
 | mirrorActors      | Turns on/off the rendering of actors below the diagram as well as above it                                                                 | false                          |
 | bottomMarginAdj   | Adjusts how far down the graph ended. Wide borders styles with css could generate unwanted clipping which is why this config param exists. | 1                              |
 | actorFontSize     | Sets the font size for the actor's description                                                                                             | 14                             |
-| actorFontFamily   | Sets the font family for the actor's description                                                                                           | "Open-Sans", "sans-serif"      |
-| actorFontWeight   | Sets the font weight for the actor's description                                                                                           | "Open-Sans", "sans-serif"      |
+| actorFontFamily   | Sets the font family for the actor's description                                                                                           | "Open Sans", sans-serif      |
+| actorFontWeight   | Sets the font weight for the actor's description                                                                                           | "Open Sans", sans-serif      |
 | noteFontSize      | Sets the font size for actor-attached notes                                                                                                | 14                             |
 | noteFontFamily    | Sets the font family for actor-attached notes                                                                                              | "trebuchet ms", verdana, arial |
 | noteFontWeight    | Sets the font weight for actor-attached notes                                                                                              | "trebuchet ms", verdana, arial |
diff --git a/src/defaultConfig.js b/src/defaultConfig.js
index f01d3393a9..3003a99975 100644
--- a/src/defaultConfig.js
+++ b/src/defaultConfig.js
@@ -410,9 +410,9 @@ const config = {
      * | --------------- | ---------------------------------------------------- | ------ | -------- | --------------------------- |
      * | actorFontFamily | This sets the font family of the actor's description | string | Required | Any Possible CSS FontFamily |
      *
-     * **Notes:** Default value: "'Open-Sans", "sans-serif"'
+     * **Notes:** Default value: "'Open Sans", sans-serif'
      */
-    actorFontFamily: '"Open-Sans", "sans-serif"',
+    actorFontFamily: '"Open Sans", sans-serif',
 
     /**
      * This sets the font weight of the actor's description
@@ -802,7 +802,7 @@ const config = {
      */
     rightAngles: false,
     taskFontSize: 14,
-    taskFontFamily: '"Open-Sans", "sans-serif"',
+    taskFontFamily: '"Open Sans", sans-serif',
     taskMargin: 50,
     // width of activation box
     activationWidth: 10,
diff --git a/src/mermaidAPI.js b/src/mermaidAPI.js
index e51f224685..b0629becd3 100755
--- a/src/mermaidAPI.js
+++ b/src/mermaidAPI.js
@@ -697,7 +697,7 @@ export default mermaidAPI;
  *       leftPadding: 75,
  *       gridLineStartPadding: 35,
  *       fontSize: 11,
- *       fontFamily: '"Open-Sans", "sans-serif"',
+ *       fontFamily: '"Open Sans", sans-serif',
  *       numberSectionStyles: 4,
  *       axisFormat: '%Y-%m-%d',
  *       topAxis: false,