fix(Tag): try to re-calculate Tag text color on client side in SSR apps

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@makesenseorg/design-system",
-  "version": "1.17.12-next.0",
+  "version": "1.17.12-next.1",
   "engines": {
     "node": "16.x"
   },

src/system/components/atoms/button/Button.vue

@@ -272,20 +272,20 @@ export default {
 
   &--animate-icon {
     transition: all .3s ease;
-  svg {
-    height: 25px;
-    margin-left: 0;
-    margin-right: 0;
-    position: relative;
-    opacity: 0;
-    width: 0;
-    transition: all .3s ease;
-  }
+    svg {
+      height: 25px;
+      margin-left: 0;
+      margin-right: 0;
+      position: relative;
+      opacity: 0;
+      width: 0;
+      transition: all .3s ease;
+    }
 
-  &:hover svg {
-    width: 25px;
-    opacity: 1;
-  }
+    &:hover svg {
+      width: 25px;
+      opacity: 1;
+    }
   }
 
   @mixin type-text {

src/system/components/atoms/tag/Tag.vue

@@ -127,6 +127,11 @@ export default {
     }
   },
   emits: ["click"],
+  data() {
+    return {
+      contrastColor: null
+    }
+  },
   computed: {
     isCliquable() {
       return this.cliquable ? "cliquable" : "not-cliquable";
@@ -138,14 +143,18 @@ export default {
       if (this.label.length > 30) return this.label.substring(0, 30) + "...";
       else return this.label;
     },
-    contrastColor() {
-      if (process.server) return getContrastColor(this.color);
-      if (process.client) return getContrastColor(this.color);
-    },
+    // contrastColor() {
+    //   if (process.server) return getContrastColor(this.color);
+    //   if (process.client) return getContrastColor(this.color);
+    // },
     hoverColor() {
       return getHoverColor(this.color);
     }
   },
+  mounted() {
+    if (process.server) this.contrastColor = getContrastColor(this.color);
+    if (process.client) this.contrastColor = getContrastColor(this.color);
+  },
   methods: {
     onClick: function() {
       this.$emit("click");