fix(graphiql): type the theme custom properties instead of casting

GraphiQL/shared.tsx has no `@ts-strict-ignore`, unlike the two files its code
came from, so `tsc-strict` caught what the `as React.CSSProperties` cast in
useDashboardTheme had been hiding: the cast erased the custom-property keys,
making every `rootStyle["--font-size-*"]` read an implicit any.

Declared the type instead of asserting it, per the repo's TypeScript style.
Intersecting with CSSProperties keeps `style={rootStyle}` assignable at the
three call sites while the Record half types the indexed reads.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>

Author: lkostrowski

src/components/GraphiQL/styles.ts

@@ -65,14 +65,32 @@ export const useEditorStyles = () => {
   };
 };
 
+/**
+ * GraphiQL is sized and coloured through CSS custom properties. React's
+ * `CSSProperties` does not know about custom properties, so intersect it to
+ * keep both the `style={...}` assignability and the indexed reads.
+ */
+type DashboardThemeStyle = React.CSSProperties &
+  Record<
+    | "--font-size-body"
+    | "--font-size-h2"
+    | "--font-size-h3"
+    | "--font-size-h4"
+    | "--font-weight-regular"
+    | "--font-size-hint"
+    | "--font-size-inline-code"
+    | "--color-base",
+    string
+  >;
+
 export const useDashboardTheme = () => {
   const {
     themeValues: {
       colors: { background },
     },
   } = useTheme();
   const match = background.default1.match(/hsla\(([^)]+)\)/);
-  const rootStyle = {
+  const rootStyle: DashboardThemeStyle = {
     "--font-size-body": vars.fontSize[4],
     "--font-size-h2": vars.fontSize[6],
     "--font-size-h3": vars.fontSize[5],
@@ -81,7 +99,7 @@ export const useDashboardTheme = () => {
     "--font-size-hint": vars.fontSize[5],
     "--font-size-inline-code": vars.fontSize[3],
     "--color-base": match ? match[1] : background.default1,
-  } as React.CSSProperties;
+  };
 
   return { rootStyle };
 };