[UI] Move color variables

src/def.d.ts

@@ -340,11 +340,9 @@ interface VendettaObject {
             getAssetByID: (id: number) => Asset;
             getAssetIDByName: (name: string) => number;
         };
-        color: {
         // TODO: Make a vain attempt to type these
-            map: Indexable<any>;
-            raw: Indexable<any>;
-        }
+        semanticColors: Indexable<any>;
+        rawColors: Indexable<any>;
     };
     plugins: {
         plugins: Indexable<Plugin>;

src/lib/windowObject.ts

@@ -12,6 +12,7 @@ import * as common from "@metro/common";
 import * as components from "@ui/components";
 import * as toasts from "@ui/toasts";
 import * as assets from "@ui/assets";
+import * as color from "@ui/color";
 import * as utils from "@utils";
 
 function without<T extends Record<string, any>>(object: T, ...keys: string[]) {
@@ -32,6 +33,7 @@ export default async function windowObject(unloads: any[]): Promise<VendettaObje
             components,
             toasts,
             assets,
+            ...color,
         },
         plugins: without(plugins, "initPlugins"),
         commands: without(commands, "patchCommands"),

src/ui/color.ts

@@ -6,7 +6,7 @@ import { constants } from "@metro/hoist";
 const colorModule = findByProps("SemanticColorsByThemeTable");
 
 //? SemanticColor is effectively ThemeColorMap
-export const map = (colorModule?.SemanticColor ?? constants.ThemeColorMap);
+export const semanticColors = (constants.ThemeColorMap ?? colorModule?.SemanticColor);
 
 //? RawColor is effectively Colors
-export const raw = (colorModule?.RawColor ?? constants.Colors);
+export const rawColors = (constants.Colors ?? colorModule?.RawColor);

src/ui/settings/components/PluginCard.tsx

@@ -4,7 +4,7 @@ import { Forms, General } from "@ui/components";
 import { Plugin } from "@types";
 import { getAssetIDByName } from "@ui/assets";
 import { showToast } from "@ui/toasts";
-import { map as colorMap } from "@ui/color";
+import { semanticColors } from "@ui/color";
 import { removePlugin, startPlugin, stopPlugin, getSettings } from "@lib/plugins";
 import copyText from "@utils/copyText";
 
@@ -17,14 +17,14 @@ const { TouchableOpacity, Image } = General;
 // TODO: These styles work weirdly. iOS has cramped text, Android with low DPI probably does too. Fix?
 const styles = stylesheet.createThemedStyleSheet({
     card: {
-        backgroundColor: colorMap?.BACKGROUND_SECONDARY,
+        backgroundColor: semanticColors?.BACKGROUND_SECONDARY,
         borderRadius: 5,
         marginHorizontal: 10,
         marginBottom: 10,
     },
     header: {
         padding: 0,
-        backgroundColor: colorMap?.BACKGROUND_TERTIARY,
+        backgroundColor: semanticColors?.BACKGROUND_TERTIARY,
         borderTopLeftRadius: 5,
         borderTopRightRadius: 5,
     },
@@ -36,7 +36,7 @@ const styles = stylesheet.createThemedStyleSheet({
         width: 22,
         height: 22,
         marginLeft: 5,
-        tintColor: colorMap?.INTERACTIVE_NORMAL,
+        tintColor: semanticColors?.INTERACTIVE_NORMAL,
     }
 })