Update mermaid background (#237)

Author: colinwilson

assets/docs/scss/custom/components/_backgrounds.scss

@@ -6,12 +6,14 @@
     --bg-default: hsl(var(--primary-800-hsl),0.1);
     --bg-default-border: hsl(var(--primary-800-hsl),0.1);
     --bg-default-color: var(--text-default);
+    --bg-mermaid: var(--gray-100);
 }
 
 [data-dark-mode] {
     --bg-default: var(--gray-800);
     --bg-default-border: hsl(var(--primary-200-hsl),0.1);
     --bg-default-color: var(--text-default);
+    --bg-mermaid: var(--gray-800);
 }
 
 .bg-default {

assets/docs/scss/custom/plugins/mermaid/_mermaid.scss

@@ -37,5 +37,12 @@
         text {
             fill: var(--text-default) !important;
         }
+        #sequencenumber circle {
+            fill: var(--bg-mermaid) !important;
+            stroke: var(--text-default) !important;
+        }
+        .sequenceNumber {
+            fill: var(--text-default) !important;
+        }
     }
 }

exampleSite/content/docs/example-content/mermaid.md

@@ -24,6 +24,7 @@ C -->|Two| E[Result 2]
 
 ```mermaid
 sequenceDiagram
+autonumber
 Alice->>John: Hello John, how are you?
 loop Healthcheck
     John->>John: Fight against hypochondria