Dark mode polish (#19370)

* Dark mode polish

* Linting

* pr feedback

* pr feedback

* PR feedback, linting

* PR review, code cleanup

* Update select-styles.ts

Author: dannyroosevelt

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",

packages/connect-react/src/components/ControlApp.tsx

@@ -3,8 +3,14 @@ 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 {
+  useCustomize,
+  type BaseReactSelectProps,
+} from "../hooks/customization-context";
+import {
+  createBaseSelectStyles,
+  resolveSelectColors,
+} from "../utils/select-styles";
 import { useMemo } from "react";
 import type { CSSProperties } from "react";
 import type { OptionProps } from "react-select";
@@ -49,6 +55,16 @@ export function ControlApp({ app }: ControlAppProps) {
     getProps, select, theme,
   } = useCustomize();
 
+  const {
+    surface,
+    border,
+    text,
+    textStrong,
+    hoverBg,
+    selectedBg,
+    selectedHoverBg,
+  } = resolveSelectColors(theme.colors);
+
   const baseStyles: CSSProperties = {
     color: theme.colors.neutral60,
     gridArea: "control",
@@ -63,15 +79,28 @@ export function ControlApp({ app }: ControlAppProps) {
     gridArea: "control",
   };
 
+  const selectStyles = createBaseSelectStyles<SelectValue>({
+    colors: {
+      surface,
+      border,
+      text,
+      textStrong,
+      hoverBg,
+      selectedBg,
+      selectedHoverBg,
+    },
+    boxShadow: theme.boxShadow,
+  });
+
   const baseSelectProps: BaseReactSelectProps<SelectValue> = {
     components: {
       Option: BaseOption,
     },
     styles: {
-      control: (base) => ({
-        ...base,
+      ...selectStyles,
+      control: (base, state) => ({
+        ...(selectStyles.control?.(base, state) ?? base),
         gridArea: "control",
-        boxShadow: theme.boxShadow.input,
       }),
     },
   };

packages/connect-react/src/components/SelectApp.tsx

@@ -6,6 +6,14 @@ import type {
   MenuListProps, OptionProps, SingleValueProps,
 } from "react-select";
 import { useApps } from "../hooks/use-apps";
+import {
+  useCustomize,
+  type BaseReactSelectProps,
+} from "../hooks/customization-context";
+import {
+  createBaseSelectStyles,
+  resolveSelectColors,
+} from "../utils/select-styles";
 import type {
   App,
   AppsListRequest,
@@ -62,6 +70,9 @@ export function SelectApp({
     SingleValue,
     MenuList,
   } = components;
+  const {
+    select, theme,
+  } = useCustomize();
   const isLoadingMoreRef = useRef(isLoadingMore);
   isLoadingMoreRef.current = isLoadingMore;
 
@@ -87,6 +98,34 @@ export function SelectApp({
     loadMore,
   ]);
 
+  const {
+    surface,
+    border,
+    text,
+    textStrong,
+    hoverBg,
+    selectedBg,
+    selectedHoverBg,
+    appIconBg,
+  } = resolveSelectColors(theme.colors);
+
+  const baseSelectProps: BaseReactSelectProps<App> = {
+    styles: createBaseSelectStyles<App>({
+      colors: {
+        surface,
+        border,
+        text,
+        textStrong,
+        hoverBg,
+        selectedBg,
+        selectedHoverBg,
+      },
+      boxShadow: theme.boxShadow,
+    }),
+  };
+
+  const selectProps = select.getProps("selectApp", baseSelectProps);
+
   // Memoize custom components to prevent remounting
   const customComponents = useMemo(() => ({
     Option: (optionProps: OptionProps<App>) => (
@@ -100,6 +139,9 @@ export function SelectApp({
             style={{
               height: 24,
               width: 24,
+              backgroundColor: appIconBg,
+              borderRadius: 6,
+              padding: 2,
             }}
             alt={optionProps.data.name}
           />
@@ -121,6 +163,9 @@ export function SelectApp({
             style={{
               height: 24,
               width: 24,
+              backgroundColor: appIconBg,
+              borderRadius: 6,
+              padding: 2,
             }}
             alt={singleValueProps.data.name}
           />
@@ -152,13 +197,18 @@ export function SelectApp({
     Option,
     SingleValue,
     MenuList,
+    appIconBg,
   ]);
   return (
     <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 +229,7 @@ export function SelectApp({
       }
       menuPosition="fixed"
       styles={{
+        ...(selectProps.styles ?? {}),
         menuPortal: (base) => ({
           ...base,
           zIndex: 99999,

packages/connect-react/src/components/SelectComponent.tsx

@@ -11,6 +11,14 @@ import {
 import Select, { components } from "react-select";
 import type { MenuListProps } from "react-select";
 import { useComponents } from "../hooks/use-components";
+import {
+  useCustomize,
+  type BaseReactSelectProps,
+} from "../hooks/customization-context";
+import {
+  createBaseSelectStyles,
+  resolveSelectColors,
+} from "../utils/select-styles";
 
 type SelectComponentProps = {
   app?: Partial<App> & { nameSlug: string; };
@@ -38,6 +46,20 @@ export function SelectComponent({
   });
 
   const { MenuList } = components;
+  const {
+    select, theme,
+  } = useCustomize();
+
+  const {
+    surface,
+    border,
+    text,
+    textStrong,
+    hoverBg,
+    selectedBg,
+    selectedHoverBg,
+  } = resolveSelectColors(theme.colors);
+
   const isLoadingMoreRef = useRef(isLoadingMore);
   isLoadingMoreRef.current = isLoadingMore;
 
@@ -60,6 +82,23 @@ export function SelectComponent({
     loadMore,
   ]);
 
+  const baseSelectProps: BaseReactSelectProps<Component> = {
+    styles: createBaseSelectStyles<Component>({
+      colors: {
+        surface,
+        border,
+        text,
+        textStrong,
+        hoverBg,
+        selectedBg,
+        selectedHoverBg,
+      },
+      boxShadow: theme.boxShadow,
+    }),
+  };
+
+  const selectProps = select.getProps("selectComponent", baseSelectProps);
+
   // Memoize custom components to prevent remounting
   const customComponents = useMemo(() => ({
     MenuList: (props: MenuListProps<Component>) => (
@@ -89,6 +128,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,14 +137,18 @@ 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
           : null
       }
       menuPosition="fixed"
       styles={{
+        ...(selectProps.styles ?? {}),
         menuPortal: (base) => ({
           ...base,
           zIndex: 99999,

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: typeof ControlApp;
+  selectComponent: typeof ControlSelect;
 };
 
 export type CustomComponents<Option, IsMulti extends boolean, Group extends GroupBase<Option>> = {

packages/connect-react/src/theme.ts

@@ -59,6 +59,17 @@ 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;
+
+  // App icon background color (for visibility in dark mode)
+  appIconBackground?: string;
 };
 
 export type Shadows = {