From 9a90d795cab393b1819d7a3cf883da27bee9dfab Mon Sep 17 00:00:00 2001 From: Knut Sveidqvist Date: Fri, 17 Jan 2025 11:46:44 +0100 Subject: [PATCH 1/8] #6195 Updated lexer to not allow quotes in link ids --- cypress/platform/knsv2.html | 26 +++++++++++++------ .../flowchart/parser/flow-node-data.spec.js | 26 +++++++++++++++++++ .../src/diagrams/flowchart/parser/flow.jison | 2 +- 3 files changed, 45 insertions(+), 9 deletions(-) diff --git a/cypress/platform/knsv2.html b/cypress/platform/knsv2.html index dfcd8aa4f..90ecd20ea 100644 --- a/cypress/platform/knsv2.html +++ b/cypress/platform/knsv2.html @@ -78,9 +78,11 @@ font-family: monospace; font-size: 72px; } + pre { width: 100%; } + /* tspan { font-size: 6px !important; } */ @@ -103,16 +105,20 @@ - 
+    
       flowchart LR
-        A --> B
+        AB["apa@apa@"] --> B(("`apa@apa`"))
+    

+    
+      flowchart
+        D(("for D"))
     

     
       flowchart LR
         A e1@==> B
         e1@{ animate: true}
     

-    
+    
 flowchart LR
   A e1@--> B
   classDef animate stroke-width:2,stroke-dasharray:10\,8,stroke-dashoffset:-180,animation: edge-animation-frame 6s linear infinite, stroke-linecap: round
@@ -126,7 +132,7 @@ flowchart LR
   class e1 animate
     

     
Mermaid - edge-animation-slow

-    
+    
 flowchart LR
   A e1@--> B
 e1@{ animation: fast}
@@ -428,7 +434,10 @@ kanban
       window.callback = function () {
         alert('A callback was triggered');
       };
-      mermaid.initialize({
+      function callback() {
+        alert('It worked');
+      }
+      await mermaid.initialize({
         // theme: 'base',
         // theme: 'default',
         // theme: 'forest',
@@ -440,9 +449,11 @@ kanban
         // layout: 'fixed',
         // htmlLabels: false,
         flowchart: { titleTopMargin: 10 },
+
         // fontFamily: 'Caveat',
         // fontFamily: 'Kalam',
         // fontFamily: 'courier',
+        fontFamily: 'arial',
         sequence: {
           actorFontFamily: 'courier',
           noteFontFamily: 'courier',
@@ -454,10 +465,9 @@ kanban
         fontSize: 12,
         logLevel: 0,
         securityLevel: 'loose',
+        callback,
       });
-      function callback() {
-        alert('It worked');
-      }
+
       mermaid.parseError = function (err, hash) {
         console.error('In parse error:');
         console.error(err);
diff --git a/packages/mermaid/src/diagrams/flowchart/parser/flow-node-data.spec.js b/packages/mermaid/src/diagrams/flowchart/parser/flow-node-data.spec.js
index 879572209..0125572ae 100644
--- a/packages/mermaid/src/diagrams/flowchart/parser/flow-node-data.spec.js
+++ b/packages/mermaid/src/diagrams/flowchart/parser/flow-node-data.spec.js
@@ -317,6 +317,32 @@ describe('when parsing directions', function () {
     expect(data4Layout.nodes[3].label).toEqual('for E');
     expect(data4Layout.nodes[4].label).toEqual('for D');
   });
+
+  it('should be possible to use @  syntax in labels', function () {
+    const res = flow.parser.parse(`flowchart TD
+    A["@A@"] --> B["@for@ B@"] & C@{ label: "@for@ c@"} & E{"\`@for@ E@\`"} & D(("@for@ D@"))
+      H1{{"@for@ H@"}}
+      H2{{"\`@for@ H@\`"}}
+      Q1{"@for@ Q@"}
+      Q2{"\`@for@ Q@\`"}
+      AS1>"@for@ AS@"]
+      AS2>"\`@for@ AS@\`"]
+      `);
+
+    const data4Layout = flow.parser.yy.getData();
+    expect(data4Layout.nodes.length).toBe(11);
+    expect(data4Layout.nodes[0].label).toEqual('@A@');
+    expect(data4Layout.nodes[1].label).toEqual('@for@ B@');
+    expect(data4Layout.nodes[2].label).toEqual('@for@ c@');
+    expect(data4Layout.nodes[3].label).toEqual('@for@ E@');
+    expect(data4Layout.nodes[4].label).toEqual('@for@ D@');
+    expect(data4Layout.nodes[5].label).toEqual('@for@ H@');
+    expect(data4Layout.nodes[6].label).toEqual('@for@ H@');
+    expect(data4Layout.nodes[7].label).toEqual('@for@ Q@');
+    expect(data4Layout.nodes[8].label).toEqual('@for@ Q@');
+    expect(data4Layout.nodes[9].label).toEqual('@for@ AS@');
+    expect(data4Layout.nodes[10].label).toEqual('@for@ AS@');
+  });
   it.skip(' should be possible to use @  syntax to add labels with trail spaces', function () {
     const res = flow.parser.parse(
       `flowchart TB
diff --git a/packages/mermaid/src/diagrams/flowchart/parser/flow.jison b/packages/mermaid/src/diagrams/flowchart/parser/flow.jison
index c3ac2b04b..7b2f4386a 100644
--- a/packages/mermaid/src/diagrams/flowchart/parser/flow.jison
+++ b/packages/mermaid/src/diagrams/flowchart/parser/flow.jison
@@ -141,7 +141,7 @@ that id.
 .*direction\s+RL[^\n]*       return 'direction_rl';
 .*direction\s+LR[^\n]*       return 'direction_lr';
 
-[^\s]+\@(?=[^\{])               { return 'LINK_ID'; }
+[^\s\"]+\@(?=[^\{\"])               { return 'LINK_ID'; }
 [0-9]+                       return 'NUM';
 \#                           return 'BRKT';
 ":::"                        return 'STYLE_SEPARATOR';

From 127bac1147034d8a8588cc8f7870abe92ebc945e Mon Sep 17 00:00:00 2001
From: Knut Sveidqvist 
Date: Fri, 17 Jan 2025 11:48:28 +0100
Subject: [PATCH 2/8] Adding changeset

---
 .changeset/chatty-elephants-warn.md | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 .changeset/chatty-elephants-warn.md

diff --git a/.changeset/chatty-elephants-warn.md b/.changeset/chatty-elephants-warn.md
new file mode 100644
index 000000000..07fd53aff
--- /dev/null
+++ b/.changeset/chatty-elephants-warn.md
@@ -0,0 +1,5 @@
+---
+'mermaid': patch
+---
+
+Fix for issue #6195 - allowinf @ signs inside node labels

From 7f47678862eb341183d61a5fb7bf58a9c7328d38 Mon Sep 17 00:00:00 2001
From: Knut Sveidqvist 
Date: Fri, 17 Jan 2025 11:50:22 +0100
Subject: [PATCH 3/8] Spellfix in changeset

---
 .changeset/chatty-elephants-warn.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.changeset/chatty-elephants-warn.md b/.changeset/chatty-elephants-warn.md
index 07fd53aff..225047ece 100644
--- a/.changeset/chatty-elephants-warn.md
+++ b/.changeset/chatty-elephants-warn.md
@@ -2,4 +2,4 @@
 'mermaid': patch
 ---
 
-Fix for issue #6195 - allowinf @ signs inside node labels
+Fix for issue #6195 - allowing @ signs inside node labels

From c432aec2f6cbd28a1dcfd5c45ef129dbb76e3aa6 Mon Sep 17 00:00:00 2001
From: saurabhg772244 
Date: Mon, 20 Jan 2025 20:05:51 +0530
Subject: [PATCH 4/8] fix: styles for Sankey, Gantt, and User Journey diagrams

---
 packages/mermaid/src/diagrams/gantt/styles.js        | 12 ++++++------
 .../mermaid/src/diagrams/sankey/sankeyDiagram.ts     |  2 ++
 .../mermaid/src/diagrams/sankey/sankeyRenderer.ts    |  1 -
 packages/mermaid/src/diagrams/sankey/styles.js       |  6 ++++++
 packages/mermaid/src/diagrams/user-journey/styles.js |  6 ++----
 5 files changed, 16 insertions(+), 11 deletions(-)
 create mode 100644 packages/mermaid/src/diagrams/sankey/styles.js

diff --git a/packages/mermaid/src/diagrams/gantt/styles.js b/packages/mermaid/src/diagrams/gantt/styles.js
index 626ed4e0f..dcb75939d 100644
--- a/packages/mermaid/src/diagrams/gantt/styles.js
+++ b/packages/mermaid/src/diagrams/gantt/styles.js
@@ -1,7 +1,7 @@
 const getStyles = (options) =>
   `
   .mermaid-main-font {
-    font-family: var(--mermaid-font-family, "trebuchet ms", verdana, arial, sans-serif);
+        font-family: ${options.fontFamily ? options.fontFamily : 'Trebuchet MS, Verdana, Arial, sans-serif'};
   }
 
   .exclude-range {
@@ -45,7 +45,7 @@ const getStyles = (options) =>
 
   .sectionTitle {
     text-anchor: start;
-    font-family: var(--mermaid-font-family, "trebuchet ms", verdana, arial, sans-serif);
+    font-family: ${options.fontFamily ? options.fontFamily : 'Trebuchet MS, Verdana, Arial, sans-serif'};
   }
 
 
@@ -58,7 +58,7 @@ const getStyles = (options) =>
   }
 
   .grid .tick text {
-    font-family: ${options.fontFamily};
+    font-family: ${options.fontFamily ? options.fontFamily : 'Trebuchet MS, Verdana, Arial, sans-serif'};
     fill: ${options.textColor};
   }
 
@@ -86,13 +86,13 @@ const getStyles = (options) =>
 
   .taskText {
     text-anchor: middle;
-    font-family: var(--mermaid-font-family, "trebuchet ms", verdana, arial, sans-serif);
+    font-family: ${options.fontFamily ? options.fontFamily : 'Trebuchet MS, Verdana, Arial, sans-serif'};
   }
 
   .taskTextOutsideRight {
     fill: ${options.taskTextDarkColor};
     text-anchor: start;
-    font-family: var(--mermaid-font-family, "trebuchet ms", verdana, arial, sans-serif);
+    font-family: ${options.fontFamily ? options.fontFamily : 'Trebuchet MS, Verdana, Arial, sans-serif'};
   }
 
   .taskTextOutsideLeft {
@@ -248,7 +248,7 @@ const getStyles = (options) =>
     text-anchor: middle;
     font-size: 18px;
     fill: ${options.titleColor || options.textColor};
-    font-family: var(--mermaid-font-family, "trebuchet ms", verdana, arial, sans-serif);
+    font-family: ${options.fontFamily ? options.fontFamily : 'Trebuchet MS, Verdana, Arial, sans-serif'};
   }
 `;
 
diff --git a/packages/mermaid/src/diagrams/sankey/sankeyDiagram.ts b/packages/mermaid/src/diagrams/sankey/sankeyDiagram.ts
index 6fed435ac..54aa40a78 100644
--- a/packages/mermaid/src/diagrams/sankey/sankeyDiagram.ts
+++ b/packages/mermaid/src/diagrams/sankey/sankeyDiagram.ts
@@ -4,11 +4,13 @@ import parser from './parser/sankey.jison';
 import db from './sankeyDB.js';
 import renderer from './sankeyRenderer.js';
 import { prepareTextForParsing } from './sankeyUtils.js';
+import sankeyStyles from './styles.js';
 
 const originalParse = parser.parse.bind(parser);
 parser.parse = (text: string) => originalParse(prepareTextForParsing(text));
 
 export const diagram: DiagramDefinition = {
+  styles: sankeyStyles,
   parser,
   db,
   renderer,
diff --git a/packages/mermaid/src/diagrams/sankey/sankeyRenderer.ts b/packages/mermaid/src/diagrams/sankey/sankeyRenderer.ts
index a981a346e..5e3f04173 100644
--- a/packages/mermaid/src/diagrams/sankey/sankeyRenderer.ts
+++ b/packages/mermaid/src/diagrams/sankey/sankeyRenderer.ts
@@ -136,7 +136,6 @@ export const draw = function (text: string, id: string, _version: string, diagOb
   svg
     .append('g')
     .attr('class', 'node-labels')
-    .attr('font-family', 'sans-serif')
     .attr('font-size', 14)
     .selectAll('text')
     .data(graph.nodes)
diff --git a/packages/mermaid/src/diagrams/sankey/styles.js b/packages/mermaid/src/diagrams/sankey/styles.js
new file mode 100644
index 000000000..bb70bfbd2
--- /dev/null
+++ b/packages/mermaid/src/diagrams/sankey/styles.js
@@ -0,0 +1,6 @@
+const getStyles = (options) =>
+  `.label {
+      font-family: ${options.fontFamily ? options.fontFamily : 'Trebuchet MS, Verdana, Arial, sans-serif'};
+    }`;
+
+export default getStyles;
diff --git a/packages/mermaid/src/diagrams/user-journey/styles.js b/packages/mermaid/src/diagrams/user-journey/styles.js
index 998a73894..87edee576 100644
--- a/packages/mermaid/src/diagrams/user-journey/styles.js
+++ b/packages/mermaid/src/diagrams/user-journey/styles.js
@@ -1,7 +1,6 @@
 const getStyles = (options) =>
   `.label {
-    font-family: 'trebuchet ms', verdana, arial, sans-serif;
-    font-family: var(--mermaid-font-family);
+    font-family: ${options.fontFamily ? options.fontFamily : 'Trebuchet MS, Verdana, Arial, sans-serif'};
     color: ${options.textColor};
   }
   .mouth {
@@ -79,8 +78,7 @@ const getStyles = (options) =>
     text-align: center;
     max-width: 200px;
     padding: 2px;
-    font-family: 'trebuchet ms', verdana, arial, sans-serif;
-    font-family: var(--mermaid-font-family);
+    font-family: ${options.fontFamily ? options.fontFamily : 'Trebuchet MS, Verdana, Arial, sans-serif'};
     font-size: 12px;
     background: ${options.tertiaryColor};
     border: 1px solid ${options.border2};

From 7bbebff583111c45679fb01b1818f707f0022c2d Mon Sep 17 00:00:00 2001
From: saurabhg772244 
Date: Mon, 20 Jan 2025 20:30:28 +0530
Subject: [PATCH 5/8] Updated styles implementation

---
 packages/mermaid/src/diagrams/gantt/styles.js        | 12 ++++++------
 packages/mermaid/src/diagrams/sankey/styles.js       |  4 ++--
 packages/mermaid/src/diagrams/user-journey/styles.js |  4 ++--
 3 files changed, 10 insertions(+), 10 deletions(-)

diff --git a/packages/mermaid/src/diagrams/gantt/styles.js b/packages/mermaid/src/diagrams/gantt/styles.js
index dcb75939d..1f670a16d 100644
--- a/packages/mermaid/src/diagrams/gantt/styles.js
+++ b/packages/mermaid/src/diagrams/gantt/styles.js
@@ -1,7 +1,7 @@
 const getStyles = (options) =>
   `
   .mermaid-main-font {
-        font-family: ${options.fontFamily ? options.fontFamily : 'Trebuchet MS, Verdana, Arial, sans-serif'};
+        font-family: var(--mermaid-font-family), trebuchet ms, verdana, arial, sans-serif;
   }
 
   .exclude-range {
@@ -45,7 +45,7 @@ const getStyles = (options) =>
 
   .sectionTitle {
     text-anchor: start;
-    font-family: ${options.fontFamily ? options.fontFamily : 'Trebuchet MS, Verdana, Arial, sans-serif'};
+    font-family: var(--mermaid-font-family), trebuchet ms, verdana, arial, sans-serif;
   }
 
 
@@ -58,7 +58,7 @@ const getStyles = (options) =>
   }
 
   .grid .tick text {
-    font-family: ${options.fontFamily ? options.fontFamily : 'Trebuchet MS, Verdana, Arial, sans-serif'};
+    font-family: var(--mermaid-font-family), trebuchet ms, verdana, arial, sans-serif;
     fill: ${options.textColor};
   }
 
@@ -86,13 +86,13 @@ const getStyles = (options) =>
 
   .taskText {
     text-anchor: middle;
-    font-family: ${options.fontFamily ? options.fontFamily : 'Trebuchet MS, Verdana, Arial, sans-serif'};
+    font-family: var(--mermaid-font-family), trebuchet ms, verdana, arial, sans-serif;
   }
 
   .taskTextOutsideRight {
     fill: ${options.taskTextDarkColor};
     text-anchor: start;
-    font-family: ${options.fontFamily ? options.fontFamily : 'Trebuchet MS, Verdana, Arial, sans-serif'};
+    font-family: var(--mermaid-font-family), trebuchet ms, verdana, arial, sans-serif;
   }
 
   .taskTextOutsideLeft {
@@ -248,7 +248,7 @@ const getStyles = (options) =>
     text-anchor: middle;
     font-size: 18px;
     fill: ${options.titleColor || options.textColor};
-    font-family: ${options.fontFamily ? options.fontFamily : 'Trebuchet MS, Verdana, Arial, sans-serif'};
+    font-family: var(--mermaid-font-family), trebuchet ms, verdana, arial, sans-serif;
   }
 `;
 
diff --git a/packages/mermaid/src/diagrams/sankey/styles.js b/packages/mermaid/src/diagrams/sankey/styles.js
index bb70bfbd2..f2e31651a 100644
--- a/packages/mermaid/src/diagrams/sankey/styles.js
+++ b/packages/mermaid/src/diagrams/sankey/styles.js
@@ -1,6 +1,6 @@
-const getStyles = (options) =>
+const getStyles = () =>
   `.label {
-      font-family: ${options.fontFamily ? options.fontFamily : 'Trebuchet MS, Verdana, Arial, sans-serif'};
+      font-family: var(--mermaid-font-family), trebuchet ms, verdana, arial, sans-serif;
     }`;
 
 export default getStyles;
diff --git a/packages/mermaid/src/diagrams/user-journey/styles.js b/packages/mermaid/src/diagrams/user-journey/styles.js
index 87edee576..81aef1180 100644
--- a/packages/mermaid/src/diagrams/user-journey/styles.js
+++ b/packages/mermaid/src/diagrams/user-journey/styles.js
@@ -1,6 +1,6 @@
 const getStyles = (options) =>
   `.label {
-    font-family: ${options.fontFamily ? options.fontFamily : 'Trebuchet MS, Verdana, Arial, sans-serif'};
+    font-family: var(--mermaid-font-family), trebuchet ms, verdana, arial, sans-serif;
     color: ${options.textColor};
   }
   .mouth {
@@ -78,7 +78,7 @@ const getStyles = (options) =>
     text-align: center;
     max-width: 200px;
     padding: 2px;
-    font-family: ${options.fontFamily ? options.fontFamily : 'Trebuchet MS, Verdana, Arial, sans-serif'};
+    font-family: var(--mermaid-font-family), trebuchet ms, verdana, arial, sans-serif;
     font-size: 12px;
     background: ${options.tertiaryColor};
     border: 1px solid ${options.border2};

From 32a68d489ed83a5b79f516d6b2fb3a7505c5eb24 Mon Sep 17 00:00:00 2001
From: saurabhg772244 
Date: Tue, 21 Jan 2025 11:35:23 +0530
Subject: [PATCH 6/8] Added changeset

---
 .changeset/stupid-dots-do.md | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 .changeset/stupid-dots-do.md

diff --git a/.changeset/stupid-dots-do.md b/.changeset/stupid-dots-do.md
new file mode 100644
index 000000000..594fa9536
--- /dev/null
+++ b/.changeset/stupid-dots-do.md
@@ -0,0 +1,5 @@
+---
+'mermaid': patch
+---
+
+fix: Gantt, Sankey and User Journey diagram are now able to pick font-family from mermaid config.

From 46c16c963b8b8e57f97a8e30408fed0dba13c22d Mon Sep 17 00:00:00 2001
From: saurabhg772244 
Date: Tue, 21 Jan 2025 15:32:53 +0530
Subject: [PATCH 7/8] Minor change.

---
 packages/mermaid/src/diagrams/gantt/styles.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/mermaid/src/diagrams/gantt/styles.js b/packages/mermaid/src/diagrams/gantt/styles.js
index 1f670a16d..14cbb2430 100644
--- a/packages/mermaid/src/diagrams/gantt/styles.js
+++ b/packages/mermaid/src/diagrams/gantt/styles.js
@@ -58,7 +58,7 @@ const getStyles = (options) =>
   }
 
   .grid .tick text {
-    font-family: var(--mermaid-font-family), trebuchet ms, verdana, arial, sans-serif;
+    font-family: ${options.fontFamily};
     fill: ${options.textColor};
   }
 

From ee6fb832651bb64a0663cc3cc240ea759ad6df97 Mon Sep 17 00:00:00 2001
From: saurabhg772244 
Date: Tue, 21 Jan 2025 18:27:05 +0530
Subject: [PATCH 8/8] Used 'options' instead of 'var(--mermaid-font-family)'

---
 packages/mermaid/src/diagrams/gantt/styles.js        | 10 +++++-----
 packages/mermaid/src/diagrams/sankey/styles.js       |  4 ++--
 packages/mermaid/src/diagrams/user-journey/styles.js |  4 ++--
 3 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/packages/mermaid/src/diagrams/gantt/styles.js b/packages/mermaid/src/diagrams/gantt/styles.js
index 14cbb2430..5b53a1b07 100644
--- a/packages/mermaid/src/diagrams/gantt/styles.js
+++ b/packages/mermaid/src/diagrams/gantt/styles.js
@@ -1,7 +1,7 @@
 const getStyles = (options) =>
   `
   .mermaid-main-font {
-        font-family: var(--mermaid-font-family), trebuchet ms, verdana, arial, sans-serif;
+        font-family: ${options.fontFamily};
   }
 
   .exclude-range {
@@ -45,7 +45,7 @@ const getStyles = (options) =>
 
   .sectionTitle {
     text-anchor: start;
-    font-family: var(--mermaid-font-family), trebuchet ms, verdana, arial, sans-serif;
+    font-family: ${options.fontFamily};
   }
 
 
@@ -86,13 +86,13 @@ const getStyles = (options) =>
 
   .taskText {
     text-anchor: middle;
-    font-family: var(--mermaid-font-family), trebuchet ms, verdana, arial, sans-serif;
+    font-family: ${options.fontFamily};
   }
 
   .taskTextOutsideRight {
     fill: ${options.taskTextDarkColor};
     text-anchor: start;
-    font-family: var(--mermaid-font-family), trebuchet ms, verdana, arial, sans-serif;
+    font-family: ${options.fontFamily};
   }
 
   .taskTextOutsideLeft {
@@ -248,7 +248,7 @@ const getStyles = (options) =>
     text-anchor: middle;
     font-size: 18px;
     fill: ${options.titleColor || options.textColor};
-    font-family: var(--mermaid-font-family), trebuchet ms, verdana, arial, sans-serif;
+    font-family: ${options.fontFamily};
   }
 `;
 
diff --git a/packages/mermaid/src/diagrams/sankey/styles.js b/packages/mermaid/src/diagrams/sankey/styles.js
index f2e31651a..eafb62b05 100644
--- a/packages/mermaid/src/diagrams/sankey/styles.js
+++ b/packages/mermaid/src/diagrams/sankey/styles.js
@@ -1,6 +1,6 @@
-const getStyles = () =>
+const getStyles = (options) =>
   `.label {
-      font-family: var(--mermaid-font-family), trebuchet ms, verdana, arial, sans-serif;
+      font-family: ${options.fontFamily};
     }`;
 
 export default getStyles;
diff --git a/packages/mermaid/src/diagrams/user-journey/styles.js b/packages/mermaid/src/diagrams/user-journey/styles.js
index 81aef1180..9cdbcd12e 100644
--- a/packages/mermaid/src/diagrams/user-journey/styles.js
+++ b/packages/mermaid/src/diagrams/user-journey/styles.js
@@ -1,6 +1,6 @@
 const getStyles = (options) =>
   `.label {
-    font-family: var(--mermaid-font-family), trebuchet ms, verdana, arial, sans-serif;
+    font-family: ${options.fontFamily};
     color: ${options.textColor};
   }
   .mouth {
@@ -78,7 +78,7 @@ const getStyles = (options) =>
     text-align: center;
     max-width: 200px;
     padding: 2px;
-    font-family: var(--mermaid-font-family), trebuchet ms, verdana, arial, sans-serif;
+    font-family: ${options.fontFamily};
     font-size: 12px;
     background: ${options.tertiaryColor};
     border: 1px solid ${options.border2};