feat: types for tokens and useToken

Vendicated · Sep 8, 2024 · f9e446f · f9e446f
1 parent a375741
commit f9e446f
Show file tree

Hide file tree

Showing 8 changed files with 151 additions and 106 deletions.
diff --git a/package.json b/package.json
@@ -56,10 +56,10 @@
         "@types/react-dom": "~18.2.25",
         "@types/yazl": "^2.4.5",
         "@vencord/discord-types": "workspace:^",
-        "diff": "^6.0.0",
+        "diff": "^7.0.0",
         "discord-types": "latest",
         "esbuild": "^0.23.1",
-        "eslint": "^9.9.1",
+        "eslint": "^9.10.0",
         "eslint-plugin-path-alias": "^2.1.0",
         "eslint-plugin-react": "^7.35.2",
         "eslint-plugin-simple-header": "^1.1.1",
@@ -75,7 +75,7 @@
         "ts-patch": "^3.2.1",
         "ts-pattern": "5.0.4",
         "tsx": "^4.19.0",
-        "type-fest": "^4.26.0",
+        "type-fest": "^4.26.1",
         "typescript": "^5.5.4",
         "typescript-eslint": "^8.4.0",
         "typescript-transform-paths": "^3.5.0",
@@ -86,7 +86,7 @@
         "patchedDependencies": {
             "@stylistic/[email protected]": "patches/@[email protected]",
             "[email protected]": "patches/[email protected]",
-            "eslint@9.9.1": "patches/eslint@9.9.1.patch",
+            "eslint@9.10.0": "patches/eslint@9.10.0.patch",
             "[email protected]": "patches/[email protected]"
         },
         "peerDependencyRules": {

diff --git a/packages/discord-types/package.json b/packages/discord-types/package.json
@@ -33,7 +33,7 @@
         "@types/node": "^20.16.5",
         "@types/semver": "^7.5.8",
         "@typescript-eslint/typescript-estree": "^8.4.0",
-        "eslint": "^9.9.1",
+        "eslint": "^9.10.0",
         "eslint-plugin-check-file": "^2.8.0",
         "eslint-plugin-import-x": "^4.2.1",
         "eslint-plugin-simple-header": "^1.1.1",
@@ -43,7 +43,7 @@
         "puppeteer-core": "^23.3.0",
         "semver": "^7.6.3",
         "tsx": "^4.19.0",
-        "type-fest": "^4.26.0",
+        "type-fest": "^4.26.1",
         "typescript": "^5.5.4",
         "typescript-eslint": "^8.4.0"
     }

diff --git a/packages/vencord-types/package.json b/packages/vencord-types/package.json
@@ -23,7 +23,7 @@
         "@vencord/discord-types": "workspace:^",
         "discord-types": "latest",
         "standalone-electron-types": "^1.0.0",
-        "type-fest": "^4.26.0"
+        "type-fest": "^4.26.1"
     },
     "devDependencies": {
         "@types/fs-extra": "^11.0.4",

diff --git a/patches/[email protected] → patches/[email protected] b/patches/[email protected] → patches/[email protected]
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/plugins/showConnections/VerifiedIcon.tsx b/src/plugins/showConnections/VerifiedIcon.tsx
@@ -16,15 +16,14 @@
  * along with this program.  If not, see <https://www.gnu.org/licenses/>.
 */
 
-import { findComponentByCodeLazy, findLazy } from "@webpack";
-import { i18n, useToken } from "@webpack/common";
+import { findComponentByCodeLazy } from "@webpack";
+import { i18n, tokens, useToken } from "@webpack/common";
 
-const ColorMap = findLazy(m => m.colors?.INTERACTIVE_MUTED?.css);
 const VerifiedIconComponent = findComponentByCodeLazy(".CONNECTIONS_ROLE_OFFICIAL_ICON_TOOLTIP");
 
 export function VerifiedIcon() {
-    const color = useToken(ColorMap.colors.INTERACTIVE_MUTED).hex();
-    const forcedIconColor = useToken(ColorMap.colors.INTERACTIVE_ACTIVE).hex();
+    const color = useToken(tokens.colors.INTERACTIVE_MUTED!).hex();
+    const forcedIconColor = useToken(tokens.colors.INTERACTIVE_ACTIVE!).hex();
 
     return (
         <VerifiedIconComponent

diff --git a/src/webpack/common/components.ts b/src/webpack/common/components.ts
@@ -52,7 +52,8 @@ export let Avatar: t.Avatar;
 export let FocusLock: t.FocusLock;
 // token lagger real
 /** css colour resolver stuff, no clue what exactly this does, just copied usage from Discord */
-export let useToken: t.useToken;
+export let useToken: t.TokenHook;
+export const tokens: t.Tokens = findByPropsLazy("unsafe_rawColors", "modules");
 
 export const MaskedLink = waitForComponent<t.MaskedLink>("MaskedLink", filters.componentByCode("MASKED_LINK)"));
 export const Timestamp = waitForComponent<t.Timestamp>("Timestamp", filters.byCode(".Messages.MESSAGE_EDITED_TIMESTAMP_A11Y_LABEL.format"));

diff --git a/src/webpack/common/types/components.d.ts b/src/webpack/common/types/components.d.ts
@@ -61,7 +61,6 @@ export type FormDivider = ComponentType<{
     style?: CSSProperties;
 }>;
 
-
 export type FormText = ComponentType<PropsWithChildren<{
     disabled?: boolean;
     selectable?: boolean;
@@ -422,18 +421,6 @@ export type Popout = ComponentType<{
 
 export type Dialog = ComponentType<JSX.IntrinsicElements["div"]>;
 
-type Resolve = (data: { theme: Theme; saturation: number; }) => {
-    hex: () => string;
-    hsl: () => string;
-    int: () => number;
-    spring: () => string;
-};
-
-export type useToken = (color: {
-    css: string;
-    resolve: Resolve;
-}) => ReturnType<Resolve>;
-
 export type Paginator = ComponentType<{
     currentPage: number;
     maxVisiblePages: number;
@@ -503,3 +490,53 @@ export type Avatar = ComponentType<PropsWithChildren<{
 type FocusLock = ComponentType<PropsWithChildren<{
     containerRef: RefObject<HTMLElement>;
 }>>;
+
+export interface Tokens {
+    colors: Record<string, {
+        css: string;
+        resolve: (options: { saturation: number; theme: Theme; }) => RawColor;
+    }>;
+    modules: {
+        chat: Record<string, number>;
+    };
+    radii: Record<string, number>;
+    shadows: Record<string, {
+        css: string;
+        resolve: (options: { theme: Theme; }) => {
+            boxShadow: string;
+            filter: string;
+            nativeStyles: {
+                elevation: number;
+                shadowColor: string;
+                shadowColorAndroid: string;
+                shadowOffset: {
+                    height: number;
+                    width: number;
+                };
+                shadowOpacity: number;
+                shadowRadius: number;
+            };
+        };
+    }>;
+    spacing: Record<`PX_${number}`, `${number}px`>;
+    themes: typeof Theme;
+    unsafe_rawColors: Record<string, {
+        css: string;
+        resolve: (options: { saturation: number; }) => RawColor;
+    }>;
+}
+
+interface RawColor {
+    hex: ColorFormater<string>;
+    hsl: ColorFormater<string>;
+    int: ColorFormater<number>;
+    spring: ColorFormater<string>;
+}
+
+type ColorFormater<T> = (options?: { opacity?: number | null | undefined /* = 1 */; }) => T;
+
+// For useToken
+export type TokenHook = (
+    color: Pick<Tokens["colors"][never], "resolve">,
+    theme?: Theme | null /* = useTheme() */
+) => RawColor;