From 288d7adcb2b0002e76b447eb25420703543fcde9 Mon Sep 17 00:00:00 2001
From: Danny Roosevelt <danny@pipedream.com>
Date: Thu, 4 Dec 2025 20:23:13 +1100
Subject: [PATCH 1/7] Dark mode polish

---
 packages/connect-react/package.json           |  1 +
 .../src/components/ControlApp.tsx             | 44 ++++++++++
 .../src/components/SelectApp.tsx              | 83 ++++++++++++++++++-
 .../src/components/SelectComponent.tsx        | 76 ++++++++++++++++-
 .../src/hooks/customization-context.tsx       |  2 +
 5 files changed, 204 insertions(+), 2 deletions(-)

diff --git a/packages/connect-react/package.json b/packages/connect-react/package.json
index bcd1a8a0d89f4..d7039ff9eeaaa 100644
--- a/packages/connect-react/package.json
+++ b/packages/connect-react/package.json
@@ -6,6 +6,7 @@
     "dist"
   ],
   "type": "module",
+  "main": "./dist/connect-react.umd.js",
   "browser": "./dist/connect-react.umd.js",
   "module": "./dist/connect-react.es.js",
   "types": "./dist/connect-react.umd.d.ts",
diff --git a/packages/connect-react/src/components/ControlApp.tsx b/packages/connect-react/src/components/ControlApp.tsx
index 2c97211dfd320..4e72cb86f16ac 100644
--- a/packages/connect-react/src/components/ControlApp.tsx
+++ b/packages/connect-react/src/components/ControlApp.tsx
@@ -5,6 +5,7 @@ import { useFormFieldContext } from "../hooks/form-field-context";
 import { useFormContext } from "../hooks/form-context";
 import { useCustomize } from "../hooks/customization-context";
 import type { BaseReactSelectProps } from "../hooks/customization-context";
+import { defaultTheme } from "../theme";
 import { useMemo } from "react";
 import type { CSSProperties } from "react";
 import type { OptionProps } from "react-select";
@@ -48,6 +49,23 @@ export function ControlApp({ app }: ControlAppProps) {
   const {
     getProps, select, theme,
   } = useCustomize();
+  const resolveColor = (
+    key: keyof typeof defaultTheme.colors,
+    fallback: string,
+  ) => {
+    const current = theme.colors[key];
+    const baseline = defaultTheme.colors[key];
+    return current && current !== baseline
+      ? current
+      : fallback;
+  };
+
+  const surface = resolveColor("neutral0", "var(--pd-surface, #0f1011)");
+  const border = resolveColor("neutral20", "var(--pd-border, rgba(255,255,255,0.16))");
+  const text = resolveColor("neutral80", "var(--pd-text, #e5e7eb)");
+  const textStrong = resolveColor("neutral90", "var(--pd-text-strong, #f9fafb)");
+  const primary25 = resolveColor("primary25", "var(--pd-primary-25, rgba(59,130,246,0.18))");
+  const surfaceStrong = resolveColor("neutral10", "var(--pd-surface-strong, rgba(255,255,255,0.06))");
 
   const baseStyles: CSSProperties = {
     color: theme.colors.neutral60,
@@ -71,8 +89,34 @@ export function ControlApp({ app }: ControlAppProps) {
       control: (base) => ({
         ...base,
         gridArea: "control",
+        backgroundColor: surface,
+        borderColor: border,
+        color: text,
         boxShadow: theme.boxShadow.input,
       }),
+      menu: (base) => ({
+        ...base,
+        backgroundColor: surface,
+        boxShadow: theme.boxShadow.dropdown,
+      }),
+      singleValue: (base) => ({
+        ...base,
+        color: text,
+      }),
+      input: (base) => ({
+        ...base,
+        color: text,
+      }),
+      option: (base, state) => ({
+        ...base,
+        backgroundColor: state.isSelected
+          ? primary25
+          : state.isFocused
+            ? surfaceStrong
+            : base.backgroundColor
+              ?? surface,
+        color: textStrong,
+      }),
     },
   };
   const selectProps = select.getProps("controlAppSelect", baseSelectProps);
diff --git a/packages/connect-react/src/components/SelectApp.tsx b/packages/connect-react/src/components/SelectApp.tsx
index d44989e8d2852..bee97edac8314 100644
--- a/packages/connect-react/src/components/SelectApp.tsx
+++ b/packages/connect-react/src/components/SelectApp.tsx
@@ -6,6 +6,11 @@ import type {
   MenuListProps, OptionProps, SingleValueProps,
 } from "react-select";
 import { useApps } from "../hooks/use-apps";
+import { defaultTheme } from "../theme";
+import {
+  useCustomize,
+  type BaseReactSelectProps,
+} from "../hooks/customization-context";
 import type {
   App,
   AppsListRequest,
@@ -62,6 +67,7 @@ export function SelectApp({
     SingleValue,
     MenuList,
   } = components;
+  const { select, theme } = useCustomize();
   const isLoadingMoreRef = useRef(isLoadingMore);
   isLoadingMoreRef.current = isLoadingMore;
 
@@ -87,6 +93,70 @@ export function SelectApp({
     loadMore,
   ]);
 
+  const resolveColor = (
+    key: keyof typeof defaultTheme.colors,
+    fallback: string,
+  ) => {
+    const current = theme.colors[key];
+    const baseline = defaultTheme.colors[key];
+    return current && current !== baseline
+      ? current
+      : fallback;
+  };
+
+  const surface = resolveColor("neutral0", "#18181b");
+  const border = resolveColor("neutral20", "rgba(255,255,255,0.16)");
+  const text = resolveColor("neutral80", "#a1a1aa");
+  const textStrong = resolveColor("neutral90", "#e4e4e7");
+  // Hover state - visible gray
+  const hoverBg = "#27272a";
+  // Selected state - subtle blue
+  const selectedBg = "rgba(59,130,246,0.2)";
+  // Selected + hover - brighter blue
+  const selectedHoverBg = "rgba(59,130,246,0.35)";
+
+  const baseSelectProps: BaseReactSelectProps<App> = {
+    styles: {
+      control: (base) => ({
+        ...base,
+        backgroundColor: surface,
+        borderColor: border,
+        color: text,
+        boxShadow: theme.boxShadow.input,
+      }),
+      menu: (base) => ({
+        ...base,
+        backgroundColor: surface,
+        boxShadow: theme.boxShadow.dropdown,
+      }),
+      singleValue: (base) => ({
+        ...base,
+        color: text,
+      }),
+      input: (base) => ({
+        ...base,
+        color: text,
+      }),
+      option: (base, state) => {
+        let bg = surface;
+        if (state.isSelected && state.isFocused) {
+          bg = selectedHoverBg;
+        } else if (state.isSelected) {
+          bg = selectedBg;
+        } else if (state.isFocused) {
+          bg = hoverBg;
+        }
+        return {
+          ...base,
+          backgroundColor: bg,
+          color: textStrong,
+        };
+      },
+    },
+  };
+
+  const selectProps = select.getProps("selectApp", baseSelectProps);
+
   // Memoize custom components to prevent remounting
   const customComponents = useMemo(() => ({
     Option: (optionProps: OptionProps<App>) => (
@@ -100,6 +170,9 @@ export function SelectApp({
             style={{
               height: 24,
               width: 24,
+              backgroundColor: "#fff",
+              borderRadius: 6,
+              padding: 2,
             }}
             alt={optionProps.data.name}
           />
@@ -121,6 +194,9 @@ export function SelectApp({
             style={{
               height: 24,
               width: 24,
+              backgroundColor: "#fff",
+              borderRadius: 6,
+              padding: 2,
             }}
             alt={singleValueProps.data.name}
           />
@@ -157,8 +233,12 @@ export function SelectApp({
     <Select
       instanceId={instanceId}
       className="react-select-container text-sm"
+      {...selectProps}
       classNamePrefix="react-select"
-      components={customComponents}
+      components={{
+        ...selectProps.components,
+        ...customComponents,
+      }}
       options={apps || []}
       getOptionLabel={(o: App) => o.name || o.nameSlug}
       getOptionValue={(o: App) => o.nameSlug}
@@ -179,6 +259,7 @@ export function SelectApp({
       }
       menuPosition="fixed"
       styles={{
+        ...(selectProps.styles ?? {}),
         menuPortal: (base) => ({
           ...base,
           zIndex: 99999,
diff --git a/packages/connect-react/src/components/SelectComponent.tsx b/packages/connect-react/src/components/SelectComponent.tsx
index 5763d544024b7..d8e2b375e3938 100644
--- a/packages/connect-react/src/components/SelectComponent.tsx
+++ b/packages/connect-react/src/components/SelectComponent.tsx
@@ -11,6 +11,11 @@ import {
 import Select, { components } from "react-select";
 import type { MenuListProps } from "react-select";
 import { useComponents } from "../hooks/use-components";
+import { defaultTheme } from "../theme";
+import {
+  useCustomize,
+  type BaseReactSelectProps,
+} from "../hooks/customization-context";
 
 type SelectComponentProps = {
   app?: Partial<App> & { nameSlug: string; };
@@ -38,6 +43,28 @@ export function SelectComponent({
   });
 
   const { MenuList } = components;
+  const { select, theme } = useCustomize();
+  const resolveColor = (
+    key: keyof typeof defaultTheme.colors,
+    fallback: string,
+  ) => {
+    const current = theme.colors[key];
+    const baseline = defaultTheme.colors[key];
+    return current && current !== baseline
+      ? current
+      : fallback;
+  };
+
+  const surface = resolveColor("neutral0", "#18181b");
+  const border = resolveColor("neutral20", "rgba(255,255,255,0.16)");
+  const text = resolveColor("neutral80", "#a1a1aa");
+  const textStrong = resolveColor("neutral90", "#e4e4e7");
+  // Hover state - visible gray
+  const hoverBg = "#27272a";
+  // Selected state - subtle blue
+  const selectedBg = "rgba(59,130,246,0.2)";
+  // Selected + hover - brighter blue
+  const selectedHoverBg = "rgba(59,130,246,0.35)";
   const isLoadingMoreRef = useRef(isLoadingMore);
   isLoadingMoreRef.current = isLoadingMore;
 
@@ -60,6 +87,48 @@ export function SelectComponent({
     loadMore,
   ]);
 
+  const baseSelectProps: BaseReactSelectProps<Component> = {
+    styles: {
+      control: (base) => ({
+        ...base,
+        backgroundColor: surface,
+        borderColor: border,
+        color: text,
+        boxShadow: theme.boxShadow.input,
+      }),
+      menu: (base) => ({
+        ...base,
+        backgroundColor: surface,
+        boxShadow: theme.boxShadow.dropdown,
+      }),
+      singleValue: (base) => ({
+        ...base,
+        color: text,
+      }),
+      input: (base) => ({
+        ...base,
+        color: text,
+      }),
+      option: (base, state) => {
+        let bg = surface;
+        if (state.isSelected && state.isFocused) {
+          bg = selectedHoverBg;
+        } else if (state.isSelected) {
+          bg = selectedBg;
+        } else if (state.isFocused) {
+          bg = hoverBg;
+        }
+        return {
+          ...base,
+          backgroundColor: bg,
+          color: textStrong,
+        };
+      },
+    },
+  };
+
+  const selectProps = select.getProps("selectComponent", baseSelectProps);
+
   // Memoize custom components to prevent remounting
   const customComponents = useMemo(() => ({
     MenuList: (props: MenuListProps<Component>) => (
@@ -89,6 +158,7 @@ export function SelectComponent({
     <Select
       instanceId={instanceId}
       className="react-select-container text-sm"
+      {...selectProps}
       classNamePrefix="react-select"
       options={componentsList}
       getOptionLabel={(o) => o.name || o.key}
@@ -97,7 +167,10 @@ export function SelectComponent({
       onChange={(o) => onChange?.((o as Component) || undefined)}
       onMenuScrollToBottom={handleMenuScrollToBottom}
       isLoading={isLoading}
-      components={customComponents}
+      components={{
+        ...selectProps.components,
+        ...customComponents,
+      }}
       menuPortalTarget={
         typeof document !== "undefined"
           ? document.body
@@ -105,6 +178,7 @@ export function SelectComponent({
       }
       menuPosition="fixed"
       styles={{
+        ...(selectProps.styles ?? {}),
         menuPortal: (base) => ({
           ...base,
           zIndex: 99999,
diff --git a/packages/connect-react/src/hooks/customization-context.tsx b/packages/connect-react/src/hooks/customization-context.tsx
index bd9b377ffa87c..f9422dc789148 100644
--- a/packages/connect-react/src/hooks/customization-context.tsx
+++ b/packages/connect-react/src/hooks/customization-context.tsx
@@ -54,6 +54,8 @@ export const defaultComponents = {
 export type ReactSelectComponents = {
   controlAppSelect: typeof ControlApp;
   controlSelect: typeof ControlSelect;
+  selectApp: never;
+  selectComponent: never;
 };
 
 export type CustomComponents<Option, IsMulti extends boolean, Group extends GroupBase<Option>> = {

From 67fd47d367b248823d1ab99d9128289bd9248236 Mon Sep 17 00:00:00 2001
From: Danny Roosevelt <danny@pipedream.com>
Date: Thu, 4 Dec 2025 20:27:54 +1100
Subject: [PATCH 2/7] Linting

---
 packages/connect-react/src/components/SelectApp.tsx       | 4 +++-
 packages/connect-react/src/components/SelectComponent.tsx | 4 +++-
 2 files changed, 6 insertions(+), 2 deletions(-)

diff --git a/packages/connect-react/src/components/SelectApp.tsx b/packages/connect-react/src/components/SelectApp.tsx
index bee97edac8314..4750e98000cb1 100644
--- a/packages/connect-react/src/components/SelectApp.tsx
+++ b/packages/connect-react/src/components/SelectApp.tsx
@@ -67,7 +67,9 @@ export function SelectApp({
     SingleValue,
     MenuList,
   } = components;
-  const { select, theme } = useCustomize();
+  const {
+    select, theme,
+  } = useCustomize();
   const isLoadingMoreRef = useRef(isLoadingMore);
   isLoadingMoreRef.current = isLoadingMore;
 
diff --git a/packages/connect-react/src/components/SelectComponent.tsx b/packages/connect-react/src/components/SelectComponent.tsx
index d8e2b375e3938..578000d0893e7 100644
--- a/packages/connect-react/src/components/SelectComponent.tsx
+++ b/packages/connect-react/src/components/SelectComponent.tsx
@@ -43,7 +43,9 @@ export function SelectComponent({
   });
 
   const { MenuList } = components;
-  const { select, theme } = useCustomize();
+  const {
+    select, theme,
+  } = useCustomize();
   const resolveColor = (
     key: keyof typeof defaultTheme.colors,
     fallback: string,

From d389f09223cb03904ee423b0655d883e286f4eff Mon Sep 17 00:00:00 2001
From: Danny Roosevelt <danny@pipedream.com>
Date: Thu, 4 Dec 2025 20:34:12 +1100
Subject: [PATCH 3/7] pr feedback

---
 .../src/components/ControlApp.tsx             | 39 +++++++++++--------
 .../src/components/SelectApp.tsx              | 10 ++---
 .../src/components/SelectComponent.tsx        | 10 ++---
 packages/connect-react/src/theme.ts           |  8 ++++
 4 files changed, 39 insertions(+), 28 deletions(-)

diff --git a/packages/connect-react/src/components/ControlApp.tsx b/packages/connect-react/src/components/ControlApp.tsx
index 4e72cb86f16ac..f59c0dc0bb976 100644
--- a/packages/connect-react/src/components/ControlApp.tsx
+++ b/packages/connect-react/src/components/ControlApp.tsx
@@ -60,12 +60,14 @@ export function ControlApp({ app }: ControlAppProps) {
       : fallback;
   };
 
-  const surface = resolveColor("neutral0", "var(--pd-surface, #0f1011)");
-  const border = resolveColor("neutral20", "var(--pd-border, rgba(255,255,255,0.16))");
-  const text = resolveColor("neutral80", "var(--pd-text, #e5e7eb)");
-  const textStrong = resolveColor("neutral90", "var(--pd-text-strong, #f9fafb)");
-  const primary25 = resolveColor("primary25", "var(--pd-primary-25, rgba(59,130,246,0.18))");
-  const surfaceStrong = resolveColor("neutral10", "var(--pd-surface-strong, rgba(255,255,255,0.06))");
+  const surface = resolveColor("neutral0", "#18181b");
+  const border = resolveColor("neutral20", "rgba(255,255,255,0.16)");
+  const text = resolveColor("neutral80", "#a1a1aa");
+  const textStrong = resolveColor("neutral90", "#e4e4e7");
+  // Option state backgrounds - theme-aware with dark mode fallbacks
+  const hoverBg = theme.colors.optionHover ?? "#27272a";
+  const selectedBg = theme.colors.optionSelected ?? "rgba(59,130,246,0.2)";
+  const selectedHoverBg = theme.colors.optionSelectedHover ?? "rgba(59,130,246,0.35)";
 
   const baseStyles: CSSProperties = {
     color: theme.colors.neutral60,
@@ -107,16 +109,21 @@ export function ControlApp({ app }: ControlAppProps) {
         ...base,
         color: text,
       }),
-      option: (base, state) => ({
-        ...base,
-        backgroundColor: state.isSelected
-          ? primary25
-          : state.isFocused
-            ? surfaceStrong
-            : base.backgroundColor
-              ?? surface,
-        color: textStrong,
-      }),
+      option: (base, state) => {
+        let bg = surface;
+        if (state.isSelected && state.isFocused) {
+          bg = selectedHoverBg;
+        } else if (state.isSelected) {
+          bg = selectedBg;
+        } else if (state.isFocused) {
+          bg = hoverBg;
+        }
+        return {
+          ...base,
+          backgroundColor: bg,
+          color: textStrong,
+        };
+      },
     },
   };
   const selectProps = select.getProps("controlAppSelect", baseSelectProps);
diff --git a/packages/connect-react/src/components/SelectApp.tsx b/packages/connect-react/src/components/SelectApp.tsx
index 4750e98000cb1..36d02fa21bebd 100644
--- a/packages/connect-react/src/components/SelectApp.tsx
+++ b/packages/connect-react/src/components/SelectApp.tsx
@@ -110,12 +110,10 @@ export function SelectApp({
   const border = resolveColor("neutral20", "rgba(255,255,255,0.16)");
   const text = resolveColor("neutral80", "#a1a1aa");
   const textStrong = resolveColor("neutral90", "#e4e4e7");
-  // Hover state - visible gray
-  const hoverBg = "#27272a";
-  // Selected state - subtle blue
-  const selectedBg = "rgba(59,130,246,0.2)";
-  // Selected + hover - brighter blue
-  const selectedHoverBg = "rgba(59,130,246,0.35)";
+  // Option state backgrounds - theme-aware with dark mode fallbacks
+  const hoverBg = theme.colors.optionHover ?? "#27272a";
+  const selectedBg = theme.colors.optionSelected ?? "rgba(59,130,246,0.2)";
+  const selectedHoverBg = theme.colors.optionSelectedHover ?? "rgba(59,130,246,0.35)";
 
   const baseSelectProps: BaseReactSelectProps<App> = {
     styles: {
diff --git a/packages/connect-react/src/components/SelectComponent.tsx b/packages/connect-react/src/components/SelectComponent.tsx
index 578000d0893e7..56203b1828e11 100644
--- a/packages/connect-react/src/components/SelectComponent.tsx
+++ b/packages/connect-react/src/components/SelectComponent.tsx
@@ -61,12 +61,10 @@ export function SelectComponent({
   const border = resolveColor("neutral20", "rgba(255,255,255,0.16)");
   const text = resolveColor("neutral80", "#a1a1aa");
   const textStrong = resolveColor("neutral90", "#e4e4e7");
-  // Hover state - visible gray
-  const hoverBg = "#27272a";
-  // Selected state - subtle blue
-  const selectedBg = "rgba(59,130,246,0.2)";
-  // Selected + hover - brighter blue
-  const selectedHoverBg = "rgba(59,130,246,0.35)";
+  // Option state backgrounds - theme-aware with dark mode fallbacks
+  const hoverBg = theme.colors.optionHover ?? "#27272a";
+  const selectedBg = theme.colors.optionSelected ?? "rgba(59,130,246,0.2)";
+  const selectedHoverBg = theme.colors.optionSelectedHover ?? "rgba(59,130,246,0.35)";
   const isLoadingMoreRef = useRef(isLoadingMore);
   isLoadingMoreRef.current = isLoadingMore;
 
diff --git a/packages/connect-react/src/theme.ts b/packages/connect-react/src/theme.ts
index 0c670d8d5516f..ce08bf3f45b63 100644
--- a/packages/connect-react/src/theme.ts
+++ b/packages/connect-react/src/theme.ts
@@ -59,6 +59,14 @@ export type Colors = {
   // select.singleValue:color
   neutral80: string;
   neutral90: string;
+
+  // Option state backgrounds (dark mode friendly)
+  // select.option:hover:backgroundColor
+  optionHover?: string;
+  // select.option:selected:backgroundColor
+  optionSelected?: string;
+  // select.option:selected:hover:backgroundColor
+  optionSelectedHover?: string;
 };
 
 export type Shadows = {

From 73177bb4594f728d0d6c132df4e755f5dfdec61b Mon Sep 17 00:00:00 2001
From: Danny Roosevelt <danny@pipedream.com>
Date: Thu, 4 Dec 2025 20:59:51 +1100
Subject: [PATCH 4/7] pr feedback

---
 .../src/components/SelectApp.tsx              | 66 +++++----------
 .../src/components/SelectComponent.tsx        | 68 +++++-----------
 .../connect-react/src/utils/select-styles.ts  | 81 +++++++++++++++++++
 3 files changed, 121 insertions(+), 94 deletions(-)
 create mode 100644 packages/connect-react/src/utils/select-styles.ts

diff --git a/packages/connect-react/src/components/SelectApp.tsx b/packages/connect-react/src/components/SelectApp.tsx
index 36d02fa21bebd..a03f7d49a5e70 100644
--- a/packages/connect-react/src/components/SelectApp.tsx
+++ b/packages/connect-react/src/components/SelectApp.tsx
@@ -6,11 +6,11 @@ import type {
   MenuListProps, OptionProps, SingleValueProps,
 } from "react-select";
 import { useApps } from "../hooks/use-apps";
-import { defaultTheme } from "../theme";
 import {
   useCustomize,
   type BaseReactSelectProps,
 } from "../hooks/customization-context";
+import { createBaseSelectStyles } from "../utils/select-styles";
 import type {
   App,
   AppsListRequest,
@@ -95,64 +95,36 @@ export function SelectApp({
     loadMore,
   ]);
 
+  // Resolve theme color with fallback - uses theme value if defined, otherwise fallback
   const resolveColor = (
-    key: keyof typeof defaultTheme.colors,
+    key: keyof typeof theme.colors,
     fallback: string,
-  ) => {
+  ): string => {
     const current = theme.colors[key];
-    const baseline = defaultTheme.colors[key];
-    return current && current !== baseline
-      ? current
-      : fallback;
+    return current !== undefined ? current : fallback;
   };
 
   const surface = resolveColor("neutral0", "#18181b");
   const border = resolveColor("neutral20", "rgba(255,255,255,0.16)");
   const text = resolveColor("neutral80", "#a1a1aa");
   const textStrong = resolveColor("neutral90", "#e4e4e7");
-  // Option state backgrounds - theme-aware with dark mode fallbacks
-  const hoverBg = theme.colors.optionHover ?? "#27272a";
-  const selectedBg = theme.colors.optionSelected ?? "rgba(59,130,246,0.2)";
-  const selectedHoverBg = theme.colors.optionSelectedHover ?? "rgba(59,130,246,0.35)";
+  const hoverBg = resolveColor("optionHover", "#27272a");
+  const selectedBg = resolveColor("optionSelected", "rgba(59,130,246,0.2)");
+  const selectedHoverBg = resolveColor("optionSelectedHover", "rgba(59,130,246,0.35)");
 
   const baseSelectProps: BaseReactSelectProps<App> = {
-    styles: {
-      control: (base) => ({
-        ...base,
-        backgroundColor: surface,
-        borderColor: border,
-        color: text,
-        boxShadow: theme.boxShadow.input,
-      }),
-      menu: (base) => ({
-        ...base,
-        backgroundColor: surface,
-        boxShadow: theme.boxShadow.dropdown,
-      }),
-      singleValue: (base) => ({
-        ...base,
-        color: text,
-      }),
-      input: (base) => ({
-        ...base,
-        color: text,
-      }),
-      option: (base, state) => {
-        let bg = surface;
-        if (state.isSelected && state.isFocused) {
-          bg = selectedHoverBg;
-        } else if (state.isSelected) {
-          bg = selectedBg;
-        } else if (state.isFocused) {
-          bg = hoverBg;
-        }
-        return {
-          ...base,
-          backgroundColor: bg,
-          color: textStrong,
-        };
+    styles: createBaseSelectStyles<App>({
+      colors: {
+        surface,
+        border,
+        text,
+        textStrong,
+        hoverBg,
+        selectedBg,
+        selectedHoverBg,
       },
-    },
+      boxShadow: theme.boxShadow,
+    }),
   };
 
   const selectProps = select.getProps("selectApp", baseSelectProps);
diff --git a/packages/connect-react/src/components/SelectComponent.tsx b/packages/connect-react/src/components/SelectComponent.tsx
index 56203b1828e11..9e122d5c79341 100644
--- a/packages/connect-react/src/components/SelectComponent.tsx
+++ b/packages/connect-react/src/components/SelectComponent.tsx
@@ -11,11 +11,11 @@ import {
 import Select, { components } from "react-select";
 import type { MenuListProps } from "react-select";
 import { useComponents } from "../hooks/use-components";
-import { defaultTheme } from "../theme";
 import {
   useCustomize,
   type BaseReactSelectProps,
 } from "../hooks/customization-context";
+import { createBaseSelectStyles } from "../utils/select-styles";
 
 type SelectComponentProps = {
   app?: Partial<App> & { nameSlug: string; };
@@ -46,25 +46,24 @@ export function SelectComponent({
   const {
     select, theme,
   } = useCustomize();
+
+  // Resolve theme color with fallback - uses theme value if defined, otherwise fallback
   const resolveColor = (
-    key: keyof typeof defaultTheme.colors,
+    key: keyof typeof theme.colors,
     fallback: string,
-  ) => {
+  ): string => {
     const current = theme.colors[key];
-    const baseline = defaultTheme.colors[key];
-    return current && current !== baseline
-      ? current
-      : fallback;
+    return current !== undefined ? current : fallback;
   };
 
   const surface = resolveColor("neutral0", "#18181b");
   const border = resolveColor("neutral20", "rgba(255,255,255,0.16)");
   const text = resolveColor("neutral80", "#a1a1aa");
   const textStrong = resolveColor("neutral90", "#e4e4e7");
-  // Option state backgrounds - theme-aware with dark mode fallbacks
-  const hoverBg = theme.colors.optionHover ?? "#27272a";
-  const selectedBg = theme.colors.optionSelected ?? "rgba(59,130,246,0.2)";
-  const selectedHoverBg = theme.colors.optionSelectedHover ?? "rgba(59,130,246,0.35)";
+  const hoverBg = resolveColor("optionHover", "#27272a");
+  const selectedBg = resolveColor("optionSelected", "rgba(59,130,246,0.2)");
+  const selectedHoverBg = resolveColor("optionSelectedHover", "rgba(59,130,246,0.35)");
+
   const isLoadingMoreRef = useRef(isLoadingMore);
   isLoadingMoreRef.current = isLoadingMore;
 
@@ -88,43 +87,18 @@ export function SelectComponent({
   ]);
 
   const baseSelectProps: BaseReactSelectProps<Component> = {
-    styles: {
-      control: (base) => ({
-        ...base,
-        backgroundColor: surface,
-        borderColor: border,
-        color: text,
-        boxShadow: theme.boxShadow.input,
-      }),
-      menu: (base) => ({
-        ...base,
-        backgroundColor: surface,
-        boxShadow: theme.boxShadow.dropdown,
-      }),
-      singleValue: (base) => ({
-        ...base,
-        color: text,
-      }),
-      input: (base) => ({
-        ...base,
-        color: text,
-      }),
-      option: (base, state) => {
-        let bg = surface;
-        if (state.isSelected && state.isFocused) {
-          bg = selectedHoverBg;
-        } else if (state.isSelected) {
-          bg = selectedBg;
-        } else if (state.isFocused) {
-          bg = hoverBg;
-        }
-        return {
-          ...base,
-          backgroundColor: bg,
-          color: textStrong,
-        };
+    styles: createBaseSelectStyles<Component>({
+      colors: {
+        surface,
+        border,
+        text,
+        textStrong,
+        hoverBg,
+        selectedBg,
+        selectedHoverBg,
       },
-    },
+      boxShadow: theme.boxShadow,
+    }),
   };
 
   const selectProps = select.getProps("selectComponent", baseSelectProps);
diff --git a/packages/connect-react/src/utils/select-styles.ts b/packages/connect-react/src/utils/select-styles.ts
new file mode 100644
index 0000000000000..0e81c5a63c3e5
--- /dev/null
+++ b/packages/connect-react/src/utils/select-styles.ts
@@ -0,0 +1,81 @@
+import type { CSSObjectWithLabel, GroupBase, StylesConfig } from "react-select";
+import type { Shadows } from "../theme";
+
+export type SelectColorConfig = {
+  surface: string;
+  border: string;
+  text: string;
+  textStrong: string;
+  hoverBg: string;
+  selectedBg: string;
+  selectedHoverBg: string;
+};
+
+export type SelectStyleConfig = {
+  colors: SelectColorConfig;
+  boxShadow: Shadows;
+};
+
+/**
+ * Creates base styles for react-select components with dark mode support.
+ * Shared across SelectApp, SelectComponent, and ControlApp.
+ */
+export function createBaseSelectStyles<
+  Option,
+  IsMulti extends boolean = false,
+  Group extends GroupBase<Option> = GroupBase<Option>,
+>(config: SelectStyleConfig): StylesConfig<Option, IsMulti, Group> {
+  const {
+    colors: {
+      surface,
+      border,
+      text,
+      textStrong,
+      hoverBg,
+      selectedBg,
+      selectedHoverBg,
+    },
+    boxShadow,
+  } = config;
+
+  return {
+    control: (base: CSSObjectWithLabel) => ({
+      ...base,
+      backgroundColor: surface,
+      borderColor: border,
+      color: text,
+      boxShadow: boxShadow.input,
+    }),
+    menu: (base: CSSObjectWithLabel) => ({
+      ...base,
+      backgroundColor: surface,
+      boxShadow: boxShadow.dropdown,
+    }),
+    singleValue: (base: CSSObjectWithLabel) => ({
+      ...base,
+      color: text,
+    }),
+    input: (base: CSSObjectWithLabel) => ({
+      ...base,
+      color: text,
+    }),
+    option: (
+      base: CSSObjectWithLabel,
+      state: { isSelected: boolean; isFocused: boolean },
+    ) => {
+      let bg = surface;
+      if (state.isSelected && state.isFocused) {
+        bg = selectedHoverBg;
+      } else if (state.isSelected) {
+        bg = selectedBg;
+      } else if (state.isFocused) {
+        bg = hoverBg;
+      }
+      return {
+        ...base,
+        backgroundColor: bg,
+        color: textStrong,
+      };
+    },
+  };
+}

From 80dd06126864660bb02905706ad90405bcc2791a Mon Sep 17 00:00:00 2001
From: Danny Roosevelt <danny@pipedream.com>
Date: Thu, 4 Dec 2025 21:15:59 +1100
Subject: [PATCH 5/7] PR feedback, linting

---
 .../src/components/ControlApp.tsx             | 74 ++++++++-----------
 .../src/components/SelectApp.tsx              | 10 ++-
 .../src/components/SelectComponent.tsx        |  4 +-
 .../src/hooks/customization-context.tsx       |  6 +-
 packages/connect-react/src/theme.ts           |  3 +
 .../connect-react/src/utils/select-styles.ts  |  4 +-
 6 files changed, 49 insertions(+), 52 deletions(-)

diff --git a/packages/connect-react/src/components/ControlApp.tsx b/packages/connect-react/src/components/ControlApp.tsx
index f59c0dc0bb976..5f6b8fa9e682b 100644
--- a/packages/connect-react/src/components/ControlApp.tsx
+++ b/packages/connect-react/src/components/ControlApp.tsx
@@ -3,9 +3,11 @@ import { useFrontendClient } from "../hooks/frontend-client-context";
 import { useAccounts } from "../hooks/use-accounts";
 import { useFormFieldContext } from "../hooks/form-field-context";
 import { useFormContext } from "../hooks/form-context";
-import { useCustomize } from "../hooks/customization-context";
-import type { BaseReactSelectProps } from "../hooks/customization-context";
-import { defaultTheme } from "../theme";
+import {
+  useCustomize,
+  type BaseReactSelectProps,
+} from "../hooks/customization-context";
+import { createBaseSelectStyles } from "../utils/select-styles";
 import { useMemo } from "react";
 import type { CSSProperties } from "react";
 import type { OptionProps } from "react-select";
@@ -49,13 +51,14 @@ export function ControlApp({ app }: ControlAppProps) {
   const {
     getProps, select, theme,
   } = useCustomize();
+
+  // Resolve theme color with fallback - uses theme value if defined, otherwise fallback
   const resolveColor = (
-    key: keyof typeof defaultTheme.colors,
+    key: keyof typeof theme.colors,
     fallback: string,
-  ) => {
+  ): string => {
     const current = theme.colors[key];
-    const baseline = defaultTheme.colors[key];
-    return current && current !== baseline
+    return current !== undefined
       ? current
       : fallback;
   };
@@ -64,10 +67,9 @@ export function ControlApp({ app }: ControlAppProps) {
   const border = resolveColor("neutral20", "rgba(255,255,255,0.16)");
   const text = resolveColor("neutral80", "#a1a1aa");
   const textStrong = resolveColor("neutral90", "#e4e4e7");
-  // Option state backgrounds - theme-aware with dark mode fallbacks
-  const hoverBg = theme.colors.optionHover ?? "#27272a";
-  const selectedBg = theme.colors.optionSelected ?? "rgba(59,130,246,0.2)";
-  const selectedHoverBg = theme.colors.optionSelectedHover ?? "rgba(59,130,246,0.35)";
+  const hoverBg = resolveColor("optionHover", "#27272a");
+  const selectedBg = resolveColor("optionSelected", "rgba(59,130,246,0.2)");
+  const selectedHoverBg = resolveColor("optionSelectedHover", "rgba(59,130,246,0.35)");
 
   const baseStyles: CSSProperties = {
     color: theme.colors.neutral60,
@@ -83,47 +85,29 @@ export function ControlApp({ app }: ControlAppProps) {
     gridArea: "control",
   };
 
+  const baseStyles2 = createBaseSelectStyles<SelectValue>({
+    colors: {
+      surface,
+      border,
+      text,
+      textStrong,
+      hoverBg,
+      selectedBg,
+      selectedHoverBg,
+    },
+    boxShadow: theme.boxShadow,
+  });
+
   const baseSelectProps: BaseReactSelectProps<SelectValue> = {
     components: {
       Option: BaseOption,
     },
     styles: {
-      control: (base) => ({
-        ...base,
+      ...baseStyles2,
+      control: (base, state) => ({
+        ...(baseStyles2.control?.(base, state) ?? base),
         gridArea: "control",
-        backgroundColor: surface,
-        borderColor: border,
-        color: text,
-        boxShadow: theme.boxShadow.input,
-      }),
-      menu: (base) => ({
-        ...base,
-        backgroundColor: surface,
-        boxShadow: theme.boxShadow.dropdown,
       }),
-      singleValue: (base) => ({
-        ...base,
-        color: text,
-      }),
-      input: (base) => ({
-        ...base,
-        color: text,
-      }),
-      option: (base, state) => {
-        let bg = surface;
-        if (state.isSelected && state.isFocused) {
-          bg = selectedHoverBg;
-        } else if (state.isSelected) {
-          bg = selectedBg;
-        } else if (state.isFocused) {
-          bg = hoverBg;
-        }
-        return {
-          ...base,
-          backgroundColor: bg,
-          color: textStrong,
-        };
-      },
     },
   };
   const selectProps = select.getProps("controlAppSelect", baseSelectProps);
diff --git a/packages/connect-react/src/components/SelectApp.tsx b/packages/connect-react/src/components/SelectApp.tsx
index a03f7d49a5e70..da8398c41cd32 100644
--- a/packages/connect-react/src/components/SelectApp.tsx
+++ b/packages/connect-react/src/components/SelectApp.tsx
@@ -101,7 +101,9 @@ export function SelectApp({
     fallback: string,
   ): string => {
     const current = theme.colors[key];
-    return current !== undefined ? current : fallback;
+    return current !== undefined
+      ? current
+      : fallback;
   };
 
   const surface = resolveColor("neutral0", "#18181b");
@@ -111,6 +113,7 @@ export function SelectApp({
   const hoverBg = resolveColor("optionHover", "#27272a");
   const selectedBg = resolveColor("optionSelected", "rgba(59,130,246,0.2)");
   const selectedHoverBg = resolveColor("optionSelectedHover", "rgba(59,130,246,0.35)");
+  const appIconBg = resolveColor("appIconBackground", "#fff");
 
   const baseSelectProps: BaseReactSelectProps<App> = {
     styles: createBaseSelectStyles<App>({
@@ -142,7 +145,7 @@ export function SelectApp({
             style={{
               height: 24,
               width: 24,
-              backgroundColor: "#fff",
+              backgroundColor: appIconBg,
               borderRadius: 6,
               padding: 2,
             }}
@@ -166,7 +169,7 @@ export function SelectApp({
             style={{
               height: 24,
               width: 24,
-              backgroundColor: "#fff",
+              backgroundColor: appIconBg,
               borderRadius: 6,
               padding: 2,
             }}
@@ -200,6 +203,7 @@ export function SelectApp({
     Option,
     SingleValue,
     MenuList,
+    appIconBg,
   ]);
   return (
     <Select
diff --git a/packages/connect-react/src/components/SelectComponent.tsx b/packages/connect-react/src/components/SelectComponent.tsx
index 9e122d5c79341..1fd3888f08432 100644
--- a/packages/connect-react/src/components/SelectComponent.tsx
+++ b/packages/connect-react/src/components/SelectComponent.tsx
@@ -53,7 +53,9 @@ export function SelectComponent({
     fallback: string,
   ): string => {
     const current = theme.colors[key];
-    return current !== undefined ? current : fallback;
+    return current !== undefined
+      ? current
+      : fallback;
   };
 
   const surface = resolveColor("neutral0", "#18181b");
diff --git a/packages/connect-react/src/hooks/customization-context.tsx b/packages/connect-react/src/hooks/customization-context.tsx
index f9422dc789148..db0f3d977e3af 100644
--- a/packages/connect-react/src/hooks/customization-context.tsx
+++ b/packages/connect-react/src/hooks/customization-context.tsx
@@ -54,8 +54,10 @@ export const defaultComponents = {
 export type ReactSelectComponents = {
   controlAppSelect: typeof ControlApp;
   controlSelect: typeof ControlSelect;
-  selectApp: never;
-  selectComponent: never;
+  // SelectApp and SelectComponent use react-select but don't have specific component types
+  // They just use the customization system for styles/classNames
+  selectApp: typeof ControlApp;
+  selectComponent: typeof ControlSelect;
 };
 
 export type CustomComponents<Option, IsMulti extends boolean, Group extends GroupBase<Option>> = {
diff --git a/packages/connect-react/src/theme.ts b/packages/connect-react/src/theme.ts
index ce08bf3f45b63..70de50177555f 100644
--- a/packages/connect-react/src/theme.ts
+++ b/packages/connect-react/src/theme.ts
@@ -67,6 +67,9 @@ export type Colors = {
   optionSelected?: string;
   // select.option:selected:hover:backgroundColor
   optionSelectedHover?: string;
+
+  // App icon background color (for visibility in dark mode)
+  appIconBackground?: string;
 };
 
 export type Shadows = {
diff --git a/packages/connect-react/src/utils/select-styles.ts b/packages/connect-react/src/utils/select-styles.ts
index 0e81c5a63c3e5..c0e4052e0c7a1 100644
--- a/packages/connect-react/src/utils/select-styles.ts
+++ b/packages/connect-react/src/utils/select-styles.ts
@@ -1,4 +1,6 @@
-import type { CSSObjectWithLabel, GroupBase, StylesConfig } from "react-select";
+import type {
+  CSSObjectWithLabel, GroupBase, StylesConfig,
+} from "react-select";
 import type { Shadows } from "../theme";
 
 export type SelectColorConfig = {

From 9dbc18330bc3a2be7ad9043e7d78066a148083bf Mon Sep 17 00:00:00 2001
From: Danny Roosevelt <danny@pipedream.com>
Date: Thu, 4 Dec 2025 21:46:58 +1100
Subject: [PATCH 6/7] PR review, code cleanup

---
 .../src/components/ControlApp.tsx             | 38 ++++++++-----------
 .../src/components/SelectApp.tsx              | 34 +++++++----------
 .../src/components/SelectComponent.tsx        | 32 +++++++---------
 .../src/hooks/customization-context.tsx       |  2 -
 .../connect-react/src/utils/select-styles.ts  | 26 ++++++++++++-
 5 files changed, 68 insertions(+), 64 deletions(-)

diff --git a/packages/connect-react/src/components/ControlApp.tsx b/packages/connect-react/src/components/ControlApp.tsx
index 5f6b8fa9e682b..484a098bbab8d 100644
--- a/packages/connect-react/src/components/ControlApp.tsx
+++ b/packages/connect-react/src/components/ControlApp.tsx
@@ -7,7 +7,10 @@ import {
   useCustomize,
   type BaseReactSelectProps,
 } from "../hooks/customization-context";
-import { createBaseSelectStyles } from "../utils/select-styles";
+import {
+  createBaseSelectStyles,
+  resolveSelectColors,
+} from "../utils/select-styles";
 import { useMemo } from "react";
 import type { CSSProperties } from "react";
 import type { OptionProps } from "react-select";
@@ -52,24 +55,15 @@ export function ControlApp({ app }: ControlAppProps) {
     getProps, select, theme,
   } = useCustomize();
 
-  // Resolve theme color with fallback - uses theme value if defined, otherwise fallback
-  const resolveColor = (
-    key: keyof typeof theme.colors,
-    fallback: string,
-  ): string => {
-    const current = theme.colors[key];
-    return current !== undefined
-      ? current
-      : fallback;
-  };
-
-  const surface = resolveColor("neutral0", "#18181b");
-  const border = resolveColor("neutral20", "rgba(255,255,255,0.16)");
-  const text = resolveColor("neutral80", "#a1a1aa");
-  const textStrong = resolveColor("neutral90", "#e4e4e7");
-  const hoverBg = resolveColor("optionHover", "#27272a");
-  const selectedBg = resolveColor("optionSelected", "rgba(59,130,246,0.2)");
-  const selectedHoverBg = resolveColor("optionSelectedHover", "rgba(59,130,246,0.35)");
+  const {
+    surface,
+    border,
+    text,
+    textStrong,
+    hoverBg,
+    selectedBg,
+    selectedHoverBg,
+  } = resolveSelectColors(theme.colors);
 
   const baseStyles: CSSProperties = {
     color: theme.colors.neutral60,
@@ -85,7 +79,7 @@ export function ControlApp({ app }: ControlAppProps) {
     gridArea: "control",
   };
 
-  const baseStyles2 = createBaseSelectStyles<SelectValue>({
+  const selectStyles = createBaseSelectStyles<SelectValue>({
     colors: {
       surface,
       border,
@@ -103,9 +97,9 @@ export function ControlApp({ app }: ControlAppProps) {
       Option: BaseOption,
     },
     styles: {
-      ...baseStyles2,
+      ...selectStyles,
       control: (base, state) => ({
-        ...(baseStyles2.control?.(base, state) ?? base),
+        ...(selectStyles.control?.(base, state) ?? base),
         gridArea: "control",
       }),
     },
diff --git a/packages/connect-react/src/components/SelectApp.tsx b/packages/connect-react/src/components/SelectApp.tsx
index da8398c41cd32..1f546a495e981 100644
--- a/packages/connect-react/src/components/SelectApp.tsx
+++ b/packages/connect-react/src/components/SelectApp.tsx
@@ -10,7 +10,10 @@ import {
   useCustomize,
   type BaseReactSelectProps,
 } from "../hooks/customization-context";
-import { createBaseSelectStyles } from "../utils/select-styles";
+import {
+  createBaseSelectStyles,
+  resolveSelectColors,
+} from "../utils/select-styles";
 import type {
   App,
   AppsListRequest,
@@ -95,25 +98,16 @@ export function SelectApp({
     loadMore,
   ]);
 
-  // Resolve theme color with fallback - uses theme value if defined, otherwise fallback
-  const resolveColor = (
-    key: keyof typeof theme.colors,
-    fallback: string,
-  ): string => {
-    const current = theme.colors[key];
-    return current !== undefined
-      ? current
-      : fallback;
-  };
-
-  const surface = resolveColor("neutral0", "#18181b");
-  const border = resolveColor("neutral20", "rgba(255,255,255,0.16)");
-  const text = resolveColor("neutral80", "#a1a1aa");
-  const textStrong = resolveColor("neutral90", "#e4e4e7");
-  const hoverBg = resolveColor("optionHover", "#27272a");
-  const selectedBg = resolveColor("optionSelected", "rgba(59,130,246,0.2)");
-  const selectedHoverBg = resolveColor("optionSelectedHover", "rgba(59,130,246,0.35)");
-  const appIconBg = resolveColor("appIconBackground", "#fff");
+  const {
+    surface,
+    border,
+    text,
+    textStrong,
+    hoverBg,
+    selectedBg,
+    selectedHoverBg,
+    appIconBg,
+  } = resolveSelectColors(theme.colors);
 
   const baseSelectProps: BaseReactSelectProps<App> = {
     styles: createBaseSelectStyles<App>({
diff --git a/packages/connect-react/src/components/SelectComponent.tsx b/packages/connect-react/src/components/SelectComponent.tsx
index 1fd3888f08432..41147672ff23c 100644
--- a/packages/connect-react/src/components/SelectComponent.tsx
+++ b/packages/connect-react/src/components/SelectComponent.tsx
@@ -15,7 +15,10 @@ import {
   useCustomize,
   type BaseReactSelectProps,
 } from "../hooks/customization-context";
-import { createBaseSelectStyles } from "../utils/select-styles";
+import {
+  createBaseSelectStyles,
+  resolveSelectColors,
+} from "../utils/select-styles";
 
 type SelectComponentProps = {
   app?: Partial<App> & { nameSlug: string; };
@@ -47,24 +50,15 @@ export function SelectComponent({
     select, theme,
   } = useCustomize();
 
-  // Resolve theme color with fallback - uses theme value if defined, otherwise fallback
-  const resolveColor = (
-    key: keyof typeof theme.colors,
-    fallback: string,
-  ): string => {
-    const current = theme.colors[key];
-    return current !== undefined
-      ? current
-      : fallback;
-  };
-
-  const surface = resolveColor("neutral0", "#18181b");
-  const border = resolveColor("neutral20", "rgba(255,255,255,0.16)");
-  const text = resolveColor("neutral80", "#a1a1aa");
-  const textStrong = resolveColor("neutral90", "#e4e4e7");
-  const hoverBg = resolveColor("optionHover", "#27272a");
-  const selectedBg = resolveColor("optionSelected", "rgba(59,130,246,0.2)");
-  const selectedHoverBg = resolveColor("optionSelectedHover", "rgba(59,130,246,0.35)");
+  const {
+    surface,
+    border,
+    text,
+    textStrong,
+    hoverBg,
+    selectedBg,
+    selectedHoverBg,
+  } = resolveSelectColors(theme.colors);
 
   const isLoadingMoreRef = useRef(isLoadingMore);
   isLoadingMoreRef.current = isLoadingMore;
diff --git a/packages/connect-react/src/hooks/customization-context.tsx b/packages/connect-react/src/hooks/customization-context.tsx
index db0f3d977e3af..a6f3511f738e7 100644
--- a/packages/connect-react/src/hooks/customization-context.tsx
+++ b/packages/connect-react/src/hooks/customization-context.tsx
@@ -54,8 +54,6 @@ export const defaultComponents = {
 export type ReactSelectComponents = {
   controlAppSelect: typeof ControlApp;
   controlSelect: typeof ControlSelect;
-  // SelectApp and SelectComponent use react-select but don't have specific component types
-  // They just use the customization system for styles/classNames
   selectApp: typeof ControlApp;
   selectComponent: typeof ControlSelect;
 };
diff --git a/packages/connect-react/src/utils/select-styles.ts b/packages/connect-react/src/utils/select-styles.ts
index c0e4052e0c7a1..78b2df9416fa1 100644
--- a/packages/connect-react/src/utils/select-styles.ts
+++ b/packages/connect-react/src/utils/select-styles.ts
@@ -1,7 +1,9 @@
 import type {
   CSSObjectWithLabel, GroupBase, StylesConfig,
 } from "react-select";
-import type { Shadows } from "../theme";
+import type {
+  Colors, Shadows,
+} from "../theme";
 
 export type SelectColorConfig = {
   surface: string;
@@ -18,6 +20,28 @@ export type SelectStyleConfig = {
   boxShadow: Shadows;
 };
 
+/**
+ * Resolves theme colors with fallbacks for dark mode styling.
+ * Returns the theme value if defined, otherwise the fallback.
+ */
+export function resolveSelectColors(colors: Partial<Colors>): SelectColorConfig & { appIconBg: string } {
+  const resolve = <K extends keyof Colors>(key: K, fallback: string): string => {
+    const current = colors[key];
+    return current !== undefined ? current : fallback;
+  };
+
+  return {
+    surface: resolve("neutral0", "#18181b"),
+    border: resolve("neutral20", "rgba(255,255,255,0.16)"),
+    text: resolve("neutral80", "#a1a1aa"),
+    textStrong: resolve("neutral90", "#e4e4e7"),
+    hoverBg: resolve("optionHover", "#27272a"),
+    selectedBg: resolve("optionSelected", "rgba(59,130,246,0.2)"),
+    selectedHoverBg: resolve("optionSelectedHover", "rgba(59,130,246,0.35)"),
+    appIconBg: resolve("appIconBackground", "#fff"),
+  };
+}
+
 /**
  * Creates base styles for react-select components with dark mode support.
  * Shared across SelectApp, SelectComponent, and ControlApp.

From c5628407336f399575a20ff7ecdd241896d21c9f Mon Sep 17 00:00:00 2001
From: Danny Roosevelt <danny@pipedream.com>
Date: Thu, 4 Dec 2025 21:50:52 +1100
Subject: [PATCH 7/7] Update select-styles.ts

---
 packages/connect-react/src/utils/select-styles.ts | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/packages/connect-react/src/utils/select-styles.ts b/packages/connect-react/src/utils/select-styles.ts
index 78b2df9416fa1..fe32a228a7ef8 100644
--- a/packages/connect-react/src/utils/select-styles.ts
+++ b/packages/connect-react/src/utils/select-styles.ts
@@ -27,7 +27,9 @@ export type SelectStyleConfig = {
 export function resolveSelectColors(colors: Partial<Colors>): SelectColorConfig & { appIconBg: string } {
   const resolve = <K extends keyof Colors>(key: K, fallback: string): string => {
     const current = colors[key];
-    return current !== undefined ? current : fallback;
+    return current !== undefined
+      ? current
+      : fallback;
   };
 
   return {