Merge pull request #7 from papermoonio/eshaben/mermaid-styling

add default styling for diagrams

material-overrides/assets/stylesheets/polkadot.css

@@ -78,7 +78,7 @@ body {
 
   --md-home-hero-bg-color: #dcdcdc;
 
-  /** Optional: For branded code snippets**/
+  /** Branded code snippets**/
   --md-code-fg-color: var(--purple);
   /** Code highlighting color shades **/
   /* Numbers */
@@ -97,6 +97,14 @@ body {
   --md-code-hl-comment-color: #545454;
   /* Table content */
   --md-typeset-table-color: var(--black-transparent-15);
+
+  /** Branded Mermaid Diagrams **/
+  --md-default-fg-color--lightest: var(--black-transparent-15);
+  --md-mermaid-edge-color: var(--black);
+  --md-mermaid-node-bg-color: var(--pink);
+  --md-mermaid-node-fg-color: var(--black);
+  --md-mermaid-label-bg-color: var(--md-default-bg-color);
+  --md-mermaid-label-fg-color: var(--black);
 }
 
 [data-md-color-scheme='slate'] {
@@ -134,7 +142,7 @@ body {
 
   --md-home-hero-bg-color: #000a15;
 
-  /** Optional: For branded code snippets**/
+  /** Branded code snippets**/
   --md-code-fg-color: var(--lime);
   --md-code-bg-color: var(--white-transparent-08);
   /** Code highlighting color shades **/
@@ -156,6 +164,14 @@ body {
   --md-code-hl-comment-color: #D9D9D9;
   /* Table content */
   --md-typeset-table-color: var(--white-transparent-15);
+
+    /** Branded Mermaid Diagrams **/
+  --md-default-fg-color--lightest: var(--white-transparent-10);
+  --md-mermaid-edge-color: var(--white);
+  --md-mermaid-node-bg-color: var(--pink);
+  --md-mermaid-node-fg-color: var(--black);
+  --md-mermaid-label-bg-color: var(--md-default-bg-color);
+  --md-mermaid-label-fg-color: var(--white);
 }
 
 /* General styling */
@@ -1288,4 +1304,4 @@ details.interface>summary::before {
 
 .md-typeset .grid.cards>ul>li:hover {
   border-color: var(--md-default-fg-color--lightest);
-}
+}