Refactor ArrowMixin and update Participant icon style and theme colors.

mermaid-js · Nov 21, 2024 · 887704d · 887704d
1 parent 89698f0
commit 887704d
Show file tree

Hide file tree

Showing 3 changed files with 5 additions and 2 deletions.
diff --git a/src/assets/tailwind.css b/src/assets/tailwind.css
@@ -373,6 +373,7 @@
   .theme-nab {
     --color-bg-base: 242, 244, 246;
     --color-bg-canvas: 242, 244, 246;
+    --color-text-base: #ffffff;
 
     /* Participant */
     --color-bg-participant: 195, 0, 0;

diff --git a/src/components/DiagramFrame/SeqDiagram/LifeLineLayer/Participant.vue b/src/components/DiagramFrame/SeqDiagram/LifeLineLayer/Participant.vue
@@ -11,7 +11,7 @@
   >
     <div
       v-html="icon"
-      class="text-skin-base bg-skin-participant px-1 absolute rounded left-1/2 transform -translate-x-1/2 h-8 [&>svg]:w-full [&>svg]:h-full"
+      class="text-skin-base bg-skin-base px-1 absolute rounded left-1/2 transform -translate-x-1/2 h-8 [&>svg]:w-full [&>svg]:h-full"
       :aria-description="`icon for ${entity.name}`"
     ></div>
   </div>
@@ -30,7 +30,7 @@
       <div
         v-if="!!icon"
         v-html="icon"
-        class="text-skin-base bg-skin-participant px-1 absolute rounded left-1/2 transform -translate-x-1/2 -translate-y-full h-8 [&>svg]:w-full [&>svg]:h-full"
+        class="text-skin-base bg-skin-base px-1 absolute rounded left-1/2 transform -translate-x-1/2 -translate-y-full h-8 [&>svg]:w-full [&>svg]:h-full"
         :aria-description="`icon for ${entity.name}`"
       ></div>
       <!-- Put in a div to give it a fixed height, because stereotype is dynamic. -->

diff --git a/src/components/DiagramFrame/SeqDiagram/MessageLayer/Block/Statement/ArrowMixin.ts b/src/components/DiagramFrame/SeqDiagram/MessageLayer/Block/Statement/ArrowMixin.ts
@@ -3,6 +3,7 @@ import sequenceParser from "@/generated-parser/sequenceParser";
 import { _STARTER_ } from "@/parser/OrderedParticipants";
 import { LIFELINE_WIDTH } from "@/positioning/Constants";
 import Anchor from "@/positioning/Anchor";
+import { mapGetters } from "vuex";
 // Define interfaces for your properties
 interface BorderWidthStyle {
   borderLeftWidth: string;
@@ -45,6 +46,7 @@ export default defineComponent({
   },
 
   computed: {
+    ...mapGetters(["centerOf"]),
     anchorOrigin: function (): Anchor {
       return new Anchor(this.centerOf(this.origin), this.originOffset);
     },