Standardise dark theme to cutomizeabletooltips

public/stylesheets/styles.css

@@ -321,11 +321,15 @@ button:focus {
   font-size: 1.4rem;
   line-height: 1.2;
   color: #ffffff;
-  background-color: hsla(0deg, 0%, 5%, 90%);
+  background-color: #0d0d0d;
   border-radius: var(--var-border-radius, 0.3rem);
   padding: 0.7rem;
 }
 
+.c-tooltip-content--dark {
+  border: 0.1rem solid #dddddd;
+}
+
 .c-tooltip-arrow {
   content: " ";
   width: 0;
@@ -333,21 +337,23 @@ button:focus {
   z-index: 4;
   font-size: 0;
   line-height: 0;
-  border-top: 0.55rem solid transparent;
-  border-right: 0.55rem solid transparent;
-  border-bottom: 0.55rem solid transparent;
-  border-left: 0.55rem solid transparent;
+  border: 0.55rem solid #0d0d0d;
   transform: translate(-50%, -100%);
   transition-duration: 0.4s;
 }
 
+.c-tooltip-arrow--dark {
+  border-color: #dddddd;
+}
+
 .c-tooltip--top.c-tooltip-content {
   margin-top: -0.5rem;
 }
 
 .c-tooltip--top.c-tooltip-arrow {
-  border-top: 0.55rem solid hsla(0deg, 0%, 5%, 90%);
+  border-right-color: transparent;
   border-bottom: 0;
+  border-left-color: transparent;
 }
 
 .c-tooltip--bottom.c-tooltip-content {
@@ -356,7 +362,8 @@ button:focus {
 
 .c-tooltip--bottom.c-tooltip-arrow {
   border-top: 0;
-  border-bottom: 0.55rem solid hsla(0deg, 0%, 5%, 90%);
+  border-right-color: transparent;
+  border-left-color: transparent;
 }
 
 .c-tooltip--right.c-tooltip-content {
@@ -364,7 +371,8 @@ button:focus {
 }
 
 .c-tooltip--right.c-tooltip-arrow {
-  border-right: 0.55rem solid hsla(0deg, 0%, 5%, 90%);
+  border-top-color: transparent;
+  border-bottom-color: transparent;
   border-left: 0;
 }
 
@@ -373,8 +381,9 @@ button:focus {
 }
 
 .c-tooltip--left.c-tooltip-arrow {
+  border-top-color: transparent;
   border-right: 0;
-  border-left: 0.55rem solid hsla(0deg, 0%, 5%, 90%);
+  border-bottom-color: transparent;
 }
 
 .c-tooltip-show {

src/components/CustomizeableTooltip.vue

@@ -58,7 +58,8 @@ export default {
   data() {
     return {
       hovering: false,
-      mainContent: null
+      mainContent: null,
+      isDarkTheme: false
     };
   },
   computed: {
@@ -93,9 +94,33 @@ export default {
     },
     showTooltip() {
       return this.show || this.hovering;
+    },
+    // Manual light-dark differentiation instead of just slapping on a .s-base--dark .c-tooltip is needed
+    // to minimise specificity to make the custom class specify more styles
+    tooltipContentLightDarkClass() {
+      return this.isDarkTheme ? "c-tooltip-content--dark" : "";
+    },
+    tooltipArrowLightDarkClass() {
+      return this.isDarkTheme ? "c-tooltip-arrow--dark" : "";
+    },
+    tooltipContentClass() {
+      return [
+        { "c-tooltip-show": this.showTooltip, [this.tooltipType]: true },
+        this.tooltipClass,
+        this.tooltipContentLightDarkClass
+      ];
+    },
+    tooltipArrowClass() {
+      return [
+        { "c-tooltip-show": this.showTooltip, [this.tooltipType]: true },
+        this.tooltipArrowLightDarkClass
+      ];
     }
   },
   methods: {
+    update() {
+      this.isDarkTheme = Theme.current().isDark();
+    },
     showNegativeSign(axis) {
       if (axis === "X") {
         return this.left ? "-" : "";
@@ -119,14 +144,14 @@ export default {
     </div>
     <div
       class="c-tooltip-content"
-      :class="[{'c-tooltip-show': showTooltip, [tooltipType]: true }, tooltipClass]"
+      :class="tooltipContentClass"
       :style="[tooltipContentStyle, positionStyle, { transform: tooltipTransform }]"
     >
       <slot name="tooltipContent" />
     </div>
     <div
       class="c-tooltip-arrow"
-      :class="{'c-tooltip-show': showTooltip, [tooltipType]: true }"
+      :class="tooltipArrowClass"
       :style="[tooltipArrowStyle, positionStyle, { transform: tooltipTransform }]"
     />
   </div>