Make use of Mermaid’s own theming

alephdata · Jun 2, 2023 · c363bd6 · c363bd6
1 parent 11c222b
commit c363bd6
Show file tree

Hide file tree

Showing 3 changed files with 39 additions and 39 deletions.
diff --git a/docs/src/components/common/Mermaid.astro b/docs/src/components/common/Mermaid.astro
@@ -4,9 +4,10 @@ import Spinner from '@components/common/Spinner.astro';
 
 <script>
   import mermaid from 'mermaid';
+  import themeCSS from './mermaid-theme.css?inline';
 
   mermaid.initialize({
-    theme: 'light',
+    themeCSS,
     securityLevel: 'loose',
     fontFamily: 'var(--font-family)',
     startOnLoad: false,
@@ -59,32 +60,6 @@ import Spinner from '@components/common/Spinner.astro';
     left: 50%;
     transform: translate(-50%, -50%);
   }
-
-  .mermaid :global(.label-container) {
-    fill: var(--color-bg-default) !important;
-    stroke: var(--color-border-default) !important;
-  }
-
-  .mermaid :global(.node.clickable:hover .label-container) {
-    fill: var(--color-bg-subtle) !important;
-    stroke: var(--color-border-emphasis) !important;
-  }
-
-  .mermaid :global(.nodeLabel) {
-    color: var(--color-fg-muted) !important;
-  }
-
-  .mermaid :global(.node.clickable:hover .nodeLabel) {
-    color: var(--color-fg-default) !important;
-  }
-
-  .mermaid :global(.flowchart-link) {
-    stroke: var(--color-fg-muted) !important;
-  }
-
-  .mermaid :global(.marker) {
-    fill: var(--color-fg-muted) !important;
-  }
 </style>
 
 <div class="mermaid">

diff --git a/docs/src/components/common/mermaid-theme.css b/docs/src/components/common/mermaid-theme.css
@@ -0,0 +1,36 @@
+.node .label-container {
+  fill: var(--color-bg-default);
+  stroke: var(--color-border-default);
+}
+
+.node.clickable:hover .label-container {
+  fill: var(--color-bg-subtle);
+  stroke: var(--color-border-emphasis);
+}
+
+.node-primary .label-container {
+  fill: var(--color-bg-primary);
+  stroke: var(--color-border-primary);
+}
+
+.node .nodeLabel {
+  color: var(--color-fg-muted);
+}
+
+.node-primary .nodeLabel {
+  color: var(--color-fg-primary);
+}
+
+.node.clickable:hover .nodeLabel {
+  color: var(--color-fg-default);
+}
+
+.flowchart-link {
+  stroke-width: 2px;
+  stroke: var(--color-fg-muted);
+}
+
+.marker {
+  fill: var(--color-fg-muted);
+  stroke: var(--color-fg-muted);
+}
diff --git a/docs/src/components/explorer/SchemaInheritance.astro b/docs/src/components/explorer/SchemaInheritance.astro
@@ -29,24 +29,13 @@ for (const node of nodes) {
   }
 }
 
-graphDef.push(`class ${schema.name} schema-inheritance__current`);
+graphDef.push(`class ${schema.name} node-primary`);
 
 for (const [child, parent] of edges) {
   graphDef.push(`${child.name}-->${parent.name}`);
 }
 ---
 
-<style>
-  .schema-inheritance :global(.schema-inheritance__current .label-container) {
-    fill: var(--color-bg-primary) !important;
-    stroke: var(--color-border-primary) !important;
-  }
-
-  .schema-inheritance :global(.schema-inheritance__current .nodeLabel) {
-    color: var(--color-fg-default) !important;
-  }
-</style>
-
 <div class="schema-inheritance" {...rest}>
   <RichContent>
     <h2 class="beta">Inheritance</h2>