Fix features not handling refs passed to style props correctly

src/features/achievements/achievement.tsx

@@ -91,7 +91,7 @@ export function createAchievement<T extends AchievementOptions>(
 
         achievement[GatherProps] = function (this: GenericAchievement) {
             const { visibility, display, earned, image, style, classes, mark, id } = this;
-            return { visibility, display, earned, image, style, classes, mark, id };
+            return { visibility, display, earned, image, style: unref(style), classes, mark, id };
         };
 
         if (achievement.shouldEarn) {

src/features/bars/bar.ts

@@ -18,6 +18,7 @@ import {
     ProcessedComputable
 } from "util/computed";
 import { createLazyProxy } from "util/proxies";
+import { unref } from "vue";
 
 export const BarType = Symbol("Bar");
 
@@ -124,7 +125,7 @@ export function createBar<T extends BarOptions>(optionsFunc: () => T & ThisType<
                 direction,
                 display,
                 visibility,
-                style,
+                style: unref(style),
                 classes,
                 borderStyle,
                 textStyle,

src/features/boards/board.ts

@@ -316,7 +316,7 @@ export function createBoard<T extends BoardOptions>(
                 visibility,
                 width,
                 height,
-                style,
+                style: unref(style),
                 classes,
                 links,
                 selectedAction,

src/features/buyable.tsx

@@ -226,7 +226,17 @@ export function createBuyable<T extends BuyableOptions>(
         buyable[GatherProps] = function (this: GenericBuyable) {
             const { display, visibility, style, classes, onClick, canClick, small, mark, id } =
                 this;
-            return { display, visibility, style, classes, onClick, canClick, small, mark, id };
+            return {
+                display,
+                visibility,
+                style: unref(style),
+                classes,
+                onClick,
+                canClick,
+                small,
+                mark,
+                id
+            };
         };
 
         return buyable as unknown as Buyable<T>;

src/features/challenges/challenge.tsx

@@ -247,7 +247,7 @@ export function createChallenge<T extends ChallengeOptions>(
                 canComplete,
                 display,
                 visibility,
-                style,
+                style: unref(style),
                 classes,
                 completed,
                 canStart,

src/features/clickables/clickable.ts

@@ -119,7 +119,7 @@ export function createClickable<T extends ClickableOptions>(
             return {
                 display,
                 visibility,
-                style,
+                style: unref(style),
                 classes,
                 onClick,
                 onHold,

src/features/infoboxes/infobox.ts

@@ -17,7 +17,7 @@ import {
     ProcessedComputable
 } from "util/computed";
 import { createLazyProxy } from "util/proxies";
-import { Ref } from "vue";
+import { Ref, unref } from "vue";
 import { Persistent, makePersistent, PersistentState } from "game/persistence";
 
 export const InfoboxType = Symbol("Infobox");
@@ -103,7 +103,7 @@ export function createInfobox<T extends InfoboxOptions>(
                 title,
                 color,
                 collapsed,
-                style,
+                style: unref(style),
                 titleStyle,
                 bodyStyle,
                 classes,

src/features/milestones/milestone.tsx

@@ -134,7 +134,7 @@ export function createMilestone<T extends MilestoneOptions>(
 
         milestone[GatherProps] = function (this: GenericMilestone) {
             const { visibility, display, style, classes, earned, id } = this;
-            return { visibility, display, style, classes, earned, id };
+            return { visibility, display, style: unref(style), classes, earned, id };
         };
 
         if (milestone.shouldEarn) {

src/features/tabs/tabFamily.ts

@@ -145,7 +145,7 @@ export function createTabFamily<T extends TabFamilyOptions>(
 
         tabFamily[GatherProps] = function (this: GenericTabFamily) {
             const { visibility, activeTab, selected, tabs, style, classes } = this;
-            return { visibility, activeTab, selected, tabs, style, classes };
+            return { visibility, activeTab, selected, tabs, style: unref(style), classes };
         };
 
         // This is necessary because board.types is different from T and TabFamily

src/features/upgrades/upgrade.ts

@@ -154,7 +154,7 @@ export function createUpgrade<T extends UpgradeOptions>(
             return {
                 display,
                 visibility,
-                style,
+                style: unref(style),
                 classes,
                 resource,
                 cost,