docs(ui): Make background color of all mermaid diagrams white or grey…

… so that it displays correctly in dark mode (#1987) Co-authored-by: impiyushrb <[email protected]>
kestra-io · Nov 28, 2024 · b90c420 · b90c420
1 parent 0770be9
commit b90c420
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 7 deletions.
diff --git a/components/content/Mermaid.vue b/components/content/Mermaid.vue
@@ -1,5 +1,5 @@
 <template>
-    <div class="mermaid" v-if="show">
+    <div class="mermaid bg-white p-4" v-if="show" >
         <slot></slot>
     </div>
 </template>
@@ -16,4 +16,15 @@
     await mermaid.init();
   })
 
-</script>
+</script>
+
+<style lang="scss">
+.mermaid {
+    border-radius: 10px;
+      
+    span p {
+      color: black;
+      font-size: 22px;
+    }
+}
+</style>
diff --git a/content/docs/04.workflow-components/17.states.md b/content/docs/04.workflow-components/17.states.md
@@ -41,8 +41,8 @@ Here is a brief description of each state:
 
 ```mermaid
 graph LR;
-    classDef transient fill:#add8e6,stroke:#333,stroke-width:2px;
-    classDef terminal fill:#dda0dd,stroke:#333,stroke-width:2px;
+    classDef transient fill:#0ff,stroke:#333,stroke-width:2px;
+    classDef terminal fill:#f9f,stroke:#333,stroke-width:2px;
 
     subgraph Legend
         direction TB
@@ -65,11 +65,13 @@ graph LR;
     F -->|Restart execution| J[RESTARTED]
     J -->|Restart processed| C[RUNNING]
     A -->|System cancelled execution| K[CANCELLED]
-    C -->|User killed execution| L[KILLING]
+    C -->|User  killed execution| L[KILLING]
     L -->|Tasks terminated| M[KILLED]
 
     class A,B,C,G,I,J,L transient;
     class D,E,F,H,K,M terminal;
+
+    linkStyle 0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16 stroke:#2a9d8f, stroke-width:3px;
 ```
 ::
 
@@ -104,8 +106,8 @@ Note how there is no `QUEUED`, `CANCELLED`, `PAUSED` or `RESTARTED` states for t
 
 ```mermaid
 graph LR;
-    classDef transient fill:#add8e6,stroke:#333,stroke-width:2px;
-    classDef terminal fill:#dda0dd,stroke:#333,stroke-width:2px;
+    classDef transient fill:#0ff,stroke:#333,stroke-width:2px;
+    classDef terminal fill:#f9f,stroke:#333,stroke-width:2px;
 
     subgraph Legend
         direction TB
@@ -126,5 +128,7 @@ graph LR;
 
     class A,B,F,H transient;
     class C,D,E,G,I terminal;
+
+    linkStyle 0,1,2,3,4,5,6,7,8,9 stroke:#2a9d8f, stroke-width:3px;
 ```
 ::