Fix/revert participant font color changes

src/components/DiagramFrame/SeqDiagram/LifeLineLayer/Participant.vue

@@ -2,31 +2,38 @@
   <div
     v-if="isDefaultStarter"
     class="participant bg-skin-participant shadow-participant border-transparent text-skin-participant rounded text-base leading-4 flex flex-col justify-center z-10 h-10 top-8"
-    :class="{ selected }"
+    :class="{ selected: selected }"
     ref="participant"
-    :style="themeStyles"
+    :style="{
+      transform: `translateY(${translate}px)`,
+    }"
     @click="onSelect"
   >
     <div
       v-html="icon"
-      class="text-skin-base bg-skin-frame 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-participant 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>
   <div v-else>
     <div
       class="participant bg-skin-participant shadow-participant border-skin-participant text-skin-participant rounded text-base leading-4 flex flex-col justify-center z-10 h-10 top-8"
-      :class="{ selected }"
+      :class="{ selected: selected }"
       ref="participant"
-      :style="themeStyles"
+      :style="{
+        backgroundColor: backgroundColor,
+        color: color,
+        transform: `translateY(${translate}px)`,
+      }"
       @click="onSelect"
     >
       <div
         v-if="!!icon"
         v-html="icon"
-        class="text-skin-base bg-skin-frame 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-participant 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. -->
       <div class="h-5 group flex flex-col justify-center">
         <!-- TODO: create a better solution for participant comments -->
         <!--      <span-->
@@ -52,7 +59,7 @@
 <script>
 import { brightnessIgnoreAlpha, removeAlpha } from "@/utils/Color";
 import iconPath from "../../Tutorial/Icons";
-import { computed, ref, nextTick } from "vue";
+import { computed, ref } from "vue";
 import useDocumentScroll from "@/functions/useDocumentScroll";
 import useIntersectionTop from "@/functions/useIntersectionTop";
 import { useStore } from "vuex";
@@ -69,23 +76,11 @@ export default {
   components: {
     ParticipantLabel,
   },
-  props: {
-    entity: {
-      type: Object,
-      required: true,
-    },
-    offsetTop2: {
-      type: Number,
-      default: 0,
-    },
-  },
   setup(props) {
     const store = useStore();
     const participant = ref(null);
-    const color = ref("inherit");
-
     if (store.state.mode === RenderMode.Static) {
-      return { translate: 0, participant, color };
+      return { translate: 0, participant };
     }
 
     const labelPositions = computed(() => {
@@ -96,7 +91,6 @@ export default {
       const positionArray = Array.from(positions ?? []);
       return positionArray.sort((a, b) => b[0] - a[0]);
     });
-
     const assigneePositions = computed(() => {
       // Sort the label positions in descending order to avoid index shifting when updating code
       const assigneePositions = store.getters.participants.GetAssigneePositions(
@@ -105,10 +99,8 @@ export default {
       const positionArray = Array.from(assigneePositions ?? []);
       return positionArray.sort((a, b) => b[0] - a[0]);
     });
-
     const intersectionTop = useIntersectionTop();
     const [scrollTop] = useDocumentScroll();
-
     const translate = computed(() => {
       const participantOffsetTop = props.offsetTop2 || 0;
       let top = intersectionTop.value + scrollTop.value;
@@ -127,15 +119,32 @@ export default {
         participantOffsetTop
       );
     });
-
+    return { translate, participant, labelPositions, assigneePositions };
+  },
+  props: {
+    entity: {
+      type: Object,
+      required: true,
+    },
+    // offsetTop is a standard HTML property, so we use offsetTop2.
+    offsetTop2: {
+      type: Number,
+      default: 0,
+    },
+  },
+  data() {
     return {
-      translate,
-      participant,
-      labelPositions,
-      assigneePositions,
-      color,
+      color: undefined,
     };
   },
+  mounted() {
+    // Not triggered during theme change
+    this.updateFontColor();
+  },
+  updated() {
+    // Not triggered during theme change
+    this.updateFontColor();
+  },
   computed: {
     isDefaultStarter() {
       return this.entity.name === _STARTER_;
@@ -161,63 +170,38 @@ export default {
       return iconPath[this.entity.type?.toLowerCase()];
     },
     backgroundColor() {
+      // Returning `undefined` so that background-color is not set at all in the style attribute
       try {
         if (!this.entity.color) {
           return undefined;
         }
+        // removing alpha is a compromise to simplify the logic of determining the background color and font color
         return this.entity.color && removeAlpha(this.entity.color);
       } catch (e) {
         return undefined;
       }
     },
-    themeStyles() {
-      return {
-        backgroundColor: this.backgroundColor,
-        color: this.color,
-        transform: `translateY(${this.translate}px)`,
-      };
-    },
   },
   methods: {
     onSelect() {
       this.$store.commit("onSelect", this.entity.name);
     },
     updateFontColor() {
-      nextTick(() => {
-        if (!this.$refs.participant) return;
-        let bgColor = window
-          .getComputedStyle(this.$refs.participant)
-          .getPropertyValue("background-color");
-
-        if (!bgColor) {
-          this.color = "inherit";
-          return;
-        }
-
-        let b = brightnessIgnoreAlpha(bgColor);
-        this.color = b > 128 ? "#000" : "#fff";
-      });
-    },
-  },
-  watch: {
-    // watcher handles explicit color changes through the entity.color property
-    backgroundColor: {
-      handler() {
-        this.updateFontColor();
-      },
-      immediate: true,
-    },
-    // watcher handles theme changes that come through CSS classes and custom properties (CSS variables)
-    "$attrs.class": {
-      handler() {
-        this.updateFontColor();
-      },
-      immediate: true,
+      if (!this.entity.color) {
+        this.color = "inherit";
+        return;
+      }
+      let bgColor = window
+        .getComputedStyle(this.$refs.participant)
+        .getPropertyValue("background-color");
+      if (!bgColor) {
+        this.color = "inherit";
+        return;
+      }
+      let b = brightnessIgnoreAlpha(bgColor);
+      this.color = b > 128 ? "#000" : "#fff";
     },
   },
-  mounted() {
-    this.updateFontColor();
-  },
 };
 </script>