From 616d370a513e6843c2a580c793248c83d8fccef7 Mon Sep 17 00:00:00 2001
From: Alois Klink <alois@aloisklink.com>
Date: Thu, 13 Apr 2023 05:48:02 +0100
Subject: [PATCH] fix: fix personBorder/Bkg C4 diagram theme vars

The current `personBorder`/`personBkg` theme variables for C4 diagrams
are set to the string `'calculated'`.

However, despite being `'calculated'`, they never seem to change to
anything else, and so become invalid CSS variables.

I've instead changed these to just default to base theme vars,
as that's what they do in [`these-base.js`][1].

[1]: https://github.com/mermaid-js/mermaid/blob/727bf30824e08c672c7f13ed83f111c2d1596935/packages/mermaid/src/themes/theme-base.js#L106-L107
---
 packages/mermaid/src/themes/theme-dark.js    | 5 ++---
 packages/mermaid/src/themes/theme-default.js | 5 ++---
 packages/mermaid/src/themes/theme-forest.js  | 5 ++---
 packages/mermaid/src/themes/theme-neutral.js | 5 ++---
 4 files changed, 8 insertions(+), 12 deletions(-)

diff --git a/packages/mermaid/src/themes/theme-dark.js b/packages/mermaid/src/themes/theme-dark.js
index 9585a2e27..6ee26169d 100644
--- a/packages/mermaid/src/themes/theme-dark.js
+++ b/packages/mermaid/src/themes/theme-dark.js
@@ -81,9 +81,8 @@ class Theme {
     this.todayLineColor = '#DB5757';
 
     /* C4 Context Diagram variables */
-
-    this.personBorder = 'calculated';
-    this.personBkg = 'calculated';
+    this.personBorder = this.primaryBorderColor;
+    this.personBkg = this.mainBkg;
 
     /* state colors */
     this.labelColor = 'calculated';
diff --git a/packages/mermaid/src/themes/theme-default.js b/packages/mermaid/src/themes/theme-default.js
index c91029de3..339bfa48a 100644
--- a/packages/mermaid/src/themes/theme-default.js
+++ b/packages/mermaid/src/themes/theme-default.js
@@ -109,9 +109,8 @@ class Theme {
     this.todayLineColor = 'red';
 
     /* C4 Context Diagram variables */
-
-    this.personBorder = 'calculated';
-    this.personBkg = 'calculated';
+    this.personBorder = this.primaryBorderColor;
+    this.personBkg = this.mainBkg;
 
     /* state colors */
     this.labelColor = 'black';
diff --git a/packages/mermaid/src/themes/theme-forest.js b/packages/mermaid/src/themes/theme-forest.js
index 96d6c35c1..3d47684bc 100644
--- a/packages/mermaid/src/themes/theme-forest.js
+++ b/packages/mermaid/src/themes/theme-forest.js
@@ -83,9 +83,8 @@ class Theme {
     this.todayLineColor = 'red';
 
     /* C4 Context Diagram variables */
-
-    this.personBorder = 'calculated';
-    this.personBkg = 'calculated';
+    this.personBorder = this.primaryBorderColor;
+    this.personBkg = this.mainBkg;
 
     /* state colors */
     this.labelColor = 'black';
diff --git a/packages/mermaid/src/themes/theme-neutral.js b/packages/mermaid/src/themes/theme-neutral.js
index 8bb5ff693..9dce63b8d 100644
--- a/packages/mermaid/src/themes/theme-neutral.js
+++ b/packages/mermaid/src/themes/theme-neutral.js
@@ -95,9 +95,8 @@ class Theme {
     this.todayLineColor = 'calculated';
 
     /* C4 Context Diagram variables */
-
-    this.personBorder = 'calculated';
-    this.personBkg = 'calculated';
+    this.personBorder = this.primaryBorderColor;
+    this.personBkg = this.mainBkg;
 
     /* state colors */
     this.labelColor = 'black';