From e29c3d612504edf83864ad000ede78be3cf64e1f Mon Sep 17 00:00:00 2001
From: ashishj <ashishjain0512@gmail.com>
Date: Tue, 14 Jun 2022 20:36:26 +0200
Subject: [PATCH] #3095 Added support for commit & tag label font size

---
 docs/gitgraph.md            | 56 +++++++++++++++++++++++++++++++++++++
 src/diagrams/git/styles.js  |  8 ++++--
 src/themes/theme-base.js    |  2 ++
 src/themes/theme-dark.js    |  2 ++
 src/themes/theme-default.js |  2 ++
 src/themes/theme-forest.js  |  2 ++
 src/themes/theme-neutral.js |  2 ++
 7 files changed, 71 insertions(+), 3 deletions(-)

diff --git a/docs/gitgraph.md b/docs/gitgraph.md
index fe8f9b05a..3bd3b2969 100644
--- a/docs/gitgraph.md
+++ b/docs/gitgraph.md
@@ -819,6 +819,62 @@ Now let's override the default values for the `commitLabelColor` to `commitLabel
 
 ```
 See how the commit label color and background color are changed to the values specified in the theme variables.
+
+### Customizing Commit Label Font Size
+You can customize commit using the `commitLabelFontSize`  theme variables for changing in the font soze of the commit label .
+
+Example:
+Now let's override the default values for the `commitLabelFontSize` variable:
+
+```mermaid-example
+    %%{init: { 'logLevel': 'debug', 'theme': 'default' , 'themeVariables': {
+              'commitLabelColor': '#ff0000',
+              'commitLabelBackground': '#00ff00',
+              'commitLabelFontSize': '16px'
+       } } }%%
+       gitGraph
+       commit
+       branch develop
+       commit tag:"v1.0.0"
+       commit
+       checkout main
+       commit type: HIGHLIGHT
+       commit
+       merge develop
+       commit
+       branch featureA
+       commit
+
+```
+See how the commit label font size changed.
+
+### Customizing Tag Label Font Size
+You can customize commit using the `tagLabelFontSize`  theme variables for changing in the font soze of the tag label .
+
+Example:
+Now let's override the default values for the `tagLabelFontSize` variable:
+
+```mermaid-example
+    %%{init: { 'logLevel': 'debug', 'theme': 'default' , 'themeVariables': {
+              'commitLabelColor': '#ff0000',
+              'commitLabelBackground': '#00ff00',
+              'tagLabelFontSize': '16px'
+       } } }%%
+       gitGraph
+       commit
+       branch develop
+       commit tag:"v1.0.0"
+       commit
+       checkout main
+       commit type: HIGHLIGHT
+       commit
+       merge develop
+       commit
+       branch featureA
+       commit
+
+```
+See how the tag label font size changed.
 ### Customizing Tag colors
 You can customize tag using the `tagLabelColor`,`tagLabelBackground` and `tagLabelBorder`  theme variables for changes in the tag label color,tag label background color and tag label border respectively.
 Example:
diff --git a/src/diagrams/git/styles.js b/src/diagrams/git/styles.js
index 203af8c7d..7e09ff7e0 100644
--- a/src/diagrams/git/styles.js
+++ b/src/diagrams/git/styles.js
@@ -26,9 +26,11 @@ const getStyles = (options) =>
     stroke: ${options.lineColor};
     stroke-dasharray: 2;
   }
-  .commit-label { font-size: 10px; fill: ${options.commitLabelColor};}
-  .commit-label-bkg { font-size: 10px; fill: ${options.commitLabelBackground}; opacity: 0.5; }
-  .tag-label { font-size: 10px; fill: ${options.tagLabelColor};}
+  .commit-label { font-size: ${options.commitLabelFontSize}; fill: ${options.commitLabelColor};}
+  .commit-label-bkg { font-size: ${options.commitLabelFontSize}; fill: ${
+    options.commitLabelBackground
+  }; opacity: 0.5; }
+  .tag-label { font-size: ${options.tagLabelFontSize}; fill: ${options.tagLabelColor};}
   .tag-label-bkg { fill: ${options.tagLabelBackground}; stroke: ${options.tagLabelBorder}; }
   .tag-hole { fill: ${options.textColor}; }
 
diff --git a/src/themes/theme-base.js b/src/themes/theme-base.js
index 551103ee3..35feae00e 100644
--- a/src/themes/theme-base.js
+++ b/src/themes/theme-base.js
@@ -215,8 +215,10 @@ class Theme {
     this.tagLabelColor = this.tagLabelColor || this.primaryTextColor;
     this.tagLabelBackground = this.tagLabelBackground || this.primaryColor;
     this.tagLabelBorder = this.tagBorder || this.primaryBorderColor;
+    this.tagLabelFontSize = this.tagLabelFontSize || '10px';
     this.commitLabelColor = this.commitLabelColor || this.secondaryTextColor;
     this.commitLabelBackground = this.commitLabelBackground || this.secondaryColor;
+    this.commitLabelFontSize = this.commitLabelFontSize || '10px';
   }
   calculate(overrides) {
     if (typeof overrides !== 'object') {
diff --git a/src/themes/theme-dark.js b/src/themes/theme-dark.js
index ecccaa876..a8b4c5477 100644
--- a/src/themes/theme-dark.js
+++ b/src/themes/theme-dark.js
@@ -214,8 +214,10 @@ class Theme {
     this.tagLabelColor = this.tagLabelColor || this.primaryTextColor;
     this.tagLabelBackground = this.tagLabelBackground || this.primaryColor;
     this.tagLabelBorder = this.tagBorder || this.primaryBorderColor;
+    this.tagLabelFontSize = this.tagLabelFontSize || '10px';
     this.commitLabelColor = this.commitLabelColor || this.secondaryTextColor;
     this.commitLabelBackground = this.commitLabelBackground || this.secondaryColor;
+    this.commitLabelFontSize = this.commitLabelFontSize || '10px';
   }
   calculate(overrides) {
     if (typeof overrides !== 'object') {
diff --git a/src/themes/theme-default.js b/src/themes/theme-default.js
index a91a9a249..0d7939618 100644
--- a/src/themes/theme-default.js
+++ b/src/themes/theme-default.js
@@ -253,8 +253,10 @@ class Theme {
     this.tagLabelColor = this.tagLabelColor || this.primaryTextColor;
     this.tagLabelBackground = this.tagLabelBackground || this.primaryColor;
     this.tagLabelBorder = this.tagBorder || this.primaryBorderColor;
+    this.tagLabelFontSize = this.tagLabelFontSize || '10px';
     this.commitLabelColor = this.commitLabelColor || this.secondaryTextColor;
     this.commitLabelBackground = this.commitLabelBackground || this.secondaryColor;
+    this.commitLabelFontSize = this.commitLabelFontSize || '10px';
   }
   calculate(overrides) {
     if (typeof overrides !== 'object') {
diff --git a/src/themes/theme-forest.js b/src/themes/theme-forest.js
index b92291d2a..7f2566de3 100644
--- a/src/themes/theme-forest.js
+++ b/src/themes/theme-forest.js
@@ -215,8 +215,10 @@ class Theme {
     this.tagLabelColor = this.tagLabelColor || this.primaryTextColor;
     this.tagLabelBackground = this.tagLabelBackground || this.primaryColor;
     this.tagLabelBorder = this.tagBorder || this.primaryBorderColor;
+    this.tagLabelFontSize = this.tagLabelFontSize || '10px';
     this.commitLabelColor = this.commitLabelColor || this.secondaryTextColor;
     this.commitLabelBackground = this.commitLabelBackground || this.secondaryColor;
+    this.commitLabelFontSize = this.commitLabelFontSize || '10px';
   }
   calculate(overrides) {
     if (typeof overrides !== 'object') {
diff --git a/src/themes/theme-neutral.js b/src/themes/theme-neutral.js
index 78873392e..9c1ad5d1b 100644
--- a/src/themes/theme-neutral.js
+++ b/src/themes/theme-neutral.js
@@ -257,8 +257,10 @@ class Theme {
     this.tagLabelColor = this.tagLabelColor || this.primaryTextColor;
     this.tagLabelBackground = this.tagLabelBackground || this.primaryColor;
     this.tagLabelBorder = this.tagBorder || this.primaryBorderColor;
+    this.tagLabelFontSize = this.tagLabelFontSize || '10px';
     this.commitLabelColor = this.commitLabelColor || this.secondaryTextColor;
     this.commitLabelBackground = this.commitLabelBackground || this.secondaryColor;
+    this.commitLabelFontSize = this.commitLabelFontSize || '10px';
   }
   calculate(overrides) {
     if (typeof overrides !== 'object') {