make glyph tooltips work with forced dark glyphs, adjust light glyph colors, adjust glyph tooltip styling

javascripts/core/constants.js

@@ -230,12 +230,12 @@ window.GlyphRarities = [
     minStrength: 3.5,
     name: "Celestial",
     darkColor: "#5151ec",
-    lightColor: "#0000ee"
+    lightColor: "#6666e9"
   }, {
     minStrength: 3.25,
     name: "Transcendent",
     darkColor: "#03ffec",
-    lightColor: "#00ad9f"
+    lightColor: "#00bdad"
   }, {
     minStrength: 3,
     name: "Mythical",
@@ -255,12 +255,12 @@ window.GlyphRarities = [
     minStrength: 2,
     name: "Rare",
     darkColor: "#2196f3",
-    lightColor: "#2090f0"
+    lightColor: "#1187ee"
   }, {
     minStrength: 1.5,
     name: "Uncommon",
     darkColor: "#43a047",
-    lightColor: "#43a047"
+    lightColor: "#3c9040"
   }, {
     minStrength: 1,
     name: "Common",

public/stylesheets/glyphs.css

@@ -2,7 +2,6 @@
   --color-background: white;
   --color-glyph-sac-text-input: #f0f0f0;
   --color-glyph-sac-text-input--focused: #d6d6d6;
-  --color-glyph-sac-text-tooltip: #505050;
   --color-glyph-equipping: #444444;
   --color-background-dark-green-gray: #dbe6db;
   --color-text-light-blue-gray: #3b3b46;
@@ -16,7 +15,6 @@
   --color-background: black;
   --color-glyph-sac-text-input: #333333;
   --color-glyph-sac-text-input--focused: #555555;
-  --color-glyph-sac-text-tooltip: #b4b4b4;
   --color-glyph-equipping: #adadad;
   --color-background-dark-green-gray: #113311;
   --color-text-light-blue-gray: #d4d4ff;
@@ -558,10 +556,8 @@
   text-align: center;
   font-size: 1.2rem;
   font-weight: normal;
-  color: var(--color-text);
   text-shadow: none;
-  background-color: var(--color-background);
-  border: var(--var-border-width, 0.2rem) solid var(--color-background);
+  border: var(--var-border-width, 0.2rem) solid;
   border-radius: var(--var-border-radius, 0.6rem);
   padding: 0 0.6rem;
   padding-bottom: 0.6rem;
@@ -581,7 +577,6 @@
   flex-direction: column;
   width: calc(100% + 2.4rem);
   font-weight: bold;
-  background-color: var(--color-background);
   border: var(--var-border-width, 0.2rem) solid;
   border-radius: var(--var-border-radius, 0.8rem);
   margin: -0.6rem;
@@ -589,14 +584,13 @@
 }
 
 .l-glyph-tooltip__effects {
-  margin-top: 0.8rem;
+  margin-top: 1rem;
   margin-bottom: -0.8rem;
 }
 
 .c-glyph-tooltip__sacrifice {
   font-size: 1rem;
   font-weight: normal;
-  color: var(--color-glyph-sac-text-tooltip);
 }
 
 .c-glyph-tooltip__sacrifice--touchable {

src/components/GlyphComponent.vue

@@ -155,10 +155,10 @@ export default {
       };
     },
     cursedColor() {
-      return Theme.current().isDark() ? "black" : "white";
+      return Theme.current().isDark() || player.options.forceDarkGlyphs ? "black" : "white";
     },
     cursedColorInverted() {
-      return Theme.current().isDark() ? "white" : "black";
+      return Theme.current().isDark() || player.options.forceDarkGlyphs ? "white" : "black";
     },
     innerStyle() {
       const rarityColor = this.isRealityGlyph
@@ -270,6 +270,8 @@ export default {
   created() {
     this.on$(GAME_EVENT.GLYPH_VISUAL_CHANGE, () => {
       this.$recompute("innerStyle");
+      this.$recompute("cursedColor");
+      this.$recompute("cursedColorInverted");
       this.$recompute("showGlyphEffectDots");
     });
     this.on$("tooltip-touched", () => this.hideTooltip());

src/components/GlyphTooltip.vue

@@ -87,17 +87,16 @@ export default {
     rarityInfo() {
       return getRarity(this.strength);
     },
-    textShadowColor() {
-      return Theme.current().isDark() ? "black" : "white";
+    baseColor() {
+      if (this.type === "cursed") return Theme.current().isDark() || player.options.forceDarkGlyphs ? "white" : "black";
+      return Theme.current().isDark() || player.options.forceDarkGlyphs ? "black" : "white";
     },
-    cursedColor() {
-      return Theme.current().isDark() ? "black" : "white";
-    },
-    cursedColorInverted() {
-      return Theme.current().isDark() ? "white" : "black";
+    textColor() {
+      if (this.type === "cursed") return Theme.current().isDark() || player.options.forceDarkGlyphs ? "black" : "white";
+      return Theme.current().isDark() || player.options.forceDarkGlyphs ? "white" : "black";
     },
     mainBorderColor() {
-      if (this.type === "cursed") return this.cursedColor;
+      if (this.type === "cursed") return this.textColor;
       if (this.type === "companion") return GlyphTypes[this.type].color;
       return getColor(this.strength);
     },
@@ -105,11 +104,6 @@ export default {
       const color = this.mainBorderColor;
       return {
         color,
-        "text-shadow": this.type === "cursed"
-          ? undefined
-          : `-0.1rem 0.1rem 0.1rem ${this.textShadowColor}, 0.1rem 0.1rem 0.1rem ${this.textShadowColor},
-            -0.1rem -0.1rem 0.1rem ${this.textShadowColor}, 0.1rem -0.1rem 0.1rem ${this.textShadowColor},
-            0 0 0.3rem ${color}`,
         animation: this.type === "reality" ? "a-reality-glyph-name-cycle 10s infinite" : undefined
       };
     },
@@ -147,7 +141,7 @@ export default {
       // eslint-disable-next-line no-nested-ternary
       const color = this.isLevelCapped
         ? "#ff4444"
-        : (this.isLevelBoosted ? "#44FF44" : "");
+        : (this.isLevelBoosted ? "#44FF44" : undefined);
       return `Level: <span style="color: ${color}">
               ${arrow}${formatInt(this.effectiveLevel)}${arrow}
               </span>`;
@@ -162,13 +156,14 @@ export default {
     glyphTooltipStyle() {
       // With computer mice, it's nice to just totally disable mouse events on the tooltip,
       // which reduces the chances for stupidity
+      const borderColor = this.type === "cursed" ? this.textColor : GlyphTypes[this.type].color;
       return {
         "pointer-events": this.onTouchDevice ? undefined : "none",
-        "border-color": GlyphTypes[this.type].color,
-        "box-shadow": `0 0 0.5rem ${GlyphTypes[this.type].color}, 0 0 0.5rem ${GlyphTypes[this.type].color} inset`,
+        "border-color": borderColor,
+        "box-shadow": `0 0 0.5rem ${borderColor}, 0 0 0.5rem ${borderColor} inset`,
         animation: this.type === "reality" ? "a-reality-glyph-tooltip-cycle 10s infinite" : undefined,
-        color: this.type === "cursed" ? this.cursedColor : undefined,
-        background: this.type === "cursed" ? this.cursedColorInverted : undefined
+        color: this.textColor,
+        background: this.baseColor
       };
     },
     glyphHeaderStyle() {
@@ -176,14 +171,14 @@ export default {
       const isReality = this.type === "reality";
 
       let color = Theme.current().isDark() ? this.rarityInfo.darkColor : this.rarityInfo.lightColor;
-      if (isCursed) color = this.cursedColor;
+      if (isCursed) color = this.textColor;
       if (this.type === "companion") color = GlyphTypes[this.type].color;
       return {
         "border-color": color,
         "box-shadow": `0 0 0.5rem 0.1rem ${color}, 0 0 0.8rem ${color} inset`,
         animation: isReality ? "a-reality-glyph-tooltip-header-cycle 10s infinite" : undefined,
-        color: isCursed ? this.cursedColor : undefined,
-        background: isCursed ? this.cursedColorInverted : undefined
+        color: this.textColor,
+        background: this.baseColor
       };
     }
   },
@@ -237,8 +232,7 @@ export default {
       if (this.type === "companion" || this.type === "cursed") return "";
       const powerText = `${format(this.sacrificeReward, 2, 2)}`;
       const isCurrentAction = this.currentAction === "sacrifice";
-      return `<span style="font-weight: ${isCurrentAction ? "bold" : ""};
-              color: ${isCurrentAction ? this.getFontColor() : ""}">
+      return `<span style="font-weight: ${isCurrentAction ? "bold" : ""};">
               Sacrifice: ${powerText}
               </span>`;
     },

src/components/GlyphTooltipEffect.vue

@@ -67,7 +67,7 @@ export default {
       };
     },
     textShadowColor() {
-      return Theme.current().isDark() ? "white" : "black";
+      return Theme.current().isDark() || player.options.forceDarkGlyphs ? "white" : "black";
     },
   },
   methods: {
@@ -75,7 +75,12 @@ export default {
       return string
         .replace("\n", "<br>")
         .replace("]", "</span>")
-        .replace("[", `<span style="color: ${this.additionColor}; text-shadow: ${this.textShadowColor} 0 0 0.6rem;">`);
+        .replace(
+          "[", `<span style="${Theme.current().isDark() || player.options.forceDarkGlyphs
+            ? "text-shadow: white 0 0 0.6rem;"
+            : ""}
+            font-weight: bold;">`
+        );
     }
   }
 };