refactor(docs): switch to Material native Mermaid with EKGF colors

- Remove mkdocs-mermaid2-plugin in favor of Material for MkDocs native support
- Configure custom theme colors (indigo primary, orange accent)
- Add CSS overrides for Mermaid diagrams to use EKGF blue/orange scheme
- Fix instant loading compatibility issues with Mermaid rendering
- Node backgrounds: indigo blue (#4051b5)
- Borders and connector lines: EKGF orange (#ff6f00)
- Text on nodes: white for contrast

Author: jgeluk

docs/stylesheets/extra.css

@@ -1,7 +1,87 @@
 :root {
-  --md-primary-fg-color:        #4A23D9;
-  --md-primary-fg-color--light: #4A23D9;
-  --md-primary-fg-color--dark:  #25126A;
+  /* EKGF custom colors - used by entire theme including Mermaid diagrams */
+  --md-primary-fg-color:        #4051b5;  /* Material Indigo 500 for primary elements */
+  --md-primary-fg-color--light: #5c6bc0;  /* Lighter indigo */
+  --md-primary-fg-color--dark:  #303f9f;  /* Darker indigo */
+  --md-accent-fg-color:         #ff6f00;  /* EKGF orange for accents */
+  --md-accent-fg-color--light:  #ff9800;  /* Lighter orange */
+  --md-accent-fg-color--dark:   #e65100;  /* Darker orange */
+}
+
+/* Dark mode color adjustments */
+[data-md-color-scheme="slate"] {
+  --md-primary-fg-color:        #4051b5;
+  --md-primary-fg-color--light: #5c6bc0;
+  --md-primary-fg-color--dark:  #303f9f;
+  --md-accent-fg-color:         #ff6f00;
+  --md-accent-fg-color--light:  #ff9800;
+  --md-accent-fg-color--dark:   #e65100;
+}
+
+/* Force Mermaid diagram elements to use EKGF colors */
+/* Node backgrounds - indigo blue */
+.mermaid .node rect,
+.mermaid .node circle,
+.mermaid .node ellipse,
+.mermaid .node polygon,
+.mermaid .cluster rect,
+.mermaid g.classGroup rect {
+  fill: #4051b5 !important;
+}
+
+/* Node borders - orange */
+.mermaid .node rect,
+.mermaid .node circle,
+.mermaid .node ellipse,
+.mermaid .node polygon,
+.mermaid .cluster rect,
+.mermaid g.classGroup rect {
+  stroke: #ff6f00 !important;
+  stroke-width: 2px !important;
+}
+
+/* Connector lines and arrows - orange */
+.mermaid .edgePath path,
+.mermaid .flowchart-link,
+.mermaid line.relation,
+.mermaid path.relation,
+.mermaid line[class*="messageLine"],
+.mermaid path[class*="messageLine"] {
+  stroke: #ff6f00 !important;
+  stroke-width: 2px !important;
+}
+
+/* Arrow markers - orange */
+.mermaid marker path,
+.mermaid defs marker path {
+  fill: #ff6f00 !important;
+  stroke: #ff6f00 !important;
+}
+
+/* Text labels on nodes - white */
+.mermaid .nodeLabel,
+.mermaid text.nodeLabel,
+.mermaid .node text,
+.mermaid .classLabel .label,
+.mermaid tspan {
+  fill: #ffffff !important;
+  color: #ffffff !important;
+}
+
+/* Edge labels - keep dark for readability */
+.mermaid .edgeLabel,
+.mermaid .edgeLabel text,
+.mermaid .edgeLabel tspan {
+  fill: #333333 !important;
+  color: #333333 !important;
+}
+
+/* Dark mode edge label adjustments */
+[data-md-color-scheme="slate"] .mermaid .edgeLabel,
+[data-md-color-scheme="slate"] .mermaid .edgeLabel text,
+[data-md-color-scheme="slate"] .mermaid .edgeLabel tspan {
+  fill: #ffffff !important;
+  color: #ffffff !important;
 }
 
 /* Card Design Enhancements */
@@ -575,3 +655,4 @@
 .md-typeset blockquote p:last-child {
   margin-bottom: 0;
 }
+

mkdocs.yml

@@ -26,17 +26,17 @@ theme:
   palette:
     - media: "(prefers-color-scheme: light)"
       scheme: default
-      primary: indigo
-      accent: light blue
+      primary: custom
+      accent: custom
       toggle:
 #        icon: material/toggle-switch-off-outline
 #        icon: material/lightbulb-outline
         icon: material/weather-sunny
         name: Switch to dark mode
     - media: "(prefers-color-scheme: dark)"
       scheme: slate
-      primary: indigo
-      accent: deep orange
+      primary: custom
+      accent: custom
       toggle:
 #        icon: material/toggle-switch
 #        icon: material/lightbulb
@@ -83,26 +83,6 @@ plugins:
   - search:
       lang:
         - en
-  - mermaid2:
-      javascript: "https://unpkg.com/mermaid/dist/mermaid.min.js"
-      arguments:
-        # Use a consistent “EKGF blue” background with white text for all Mermaid diagrams.
-        # We use theme "base" so we can control colors via themeVariables.
-        theme: "base"
-        themeVariables:
-          # Match MkDocs Material "indigo" (nav bar) for node fills, but keep the canvas white
-          # so connectors remain visible.
-          background: "#ffffff"
-          primaryColor: "#4051b5"       # Material Indigo 500 (close to the nav bar)
-          secondaryColor: "#4051b5"
-          tertiaryColor: "#4051b5"
-          primaryTextColor: "#ffffff"
-          secondaryTextColor: "#ffffff"
-          tertiaryTextColor: "#ffffff"
-          primaryBorderColor: "#ff6f00" # EKGF orange (lines/borders)
-          lineColor: "#ff6f00"          # EKGF orange
-          textColor: "#ffffff"
-        securityLevel: 'loose'
   - exclude-search:
       exclude:
         - 'fragment/*'
@@ -174,7 +154,7 @@ markdown_extensions:
       custom_fences:
         - name: mermaid
           class: mermaid
-          format: !!python/name:mermaid2.fence_mermaid
+          format: !!python/name:pymdownx.superfences.fence_code_format
   - pymdownx.tabbed:
       alternate_style: true
       slugify: !!python/object/apply:pymdownx.slugs.slugify