feat: Change selectedOptionColorPalette values pulled from the theme

README.md

@@ -344,7 +344,13 @@ If you choose to stick with the default `selectedOptionStyle="color"`, you have
 one additional styling option. If you do not like the default of blue for the
 highlight color, you can pass the `selectedOptionColorPalette` prop to change
 it. This prop will accept any named color from your theme's color palette, and
-it will use the `500` value in light mode or the `300` value in dark mode.
+it will use `colorPalette.solid` for the background, and `colorPalette.contrast`
+for the text.
+
+If you'd like to use a custom color palette for this prop, ensure that you have
+properly set up the custom color, including the `solid` and `contrast` semantic
+tokens, accoring to
+[the official guide](https://www.chakra-ui.com/guides/theming-custom-colors).
 
 > [!NOTE]
 >

demo/eslint.config.js

@@ -25,6 +25,13 @@ const eslintConfig = tseslint.config(
       ...react.configs.recommended.rules,
       ...react.configs["jsx-runtime"].rules,
       ...reactHooks.configs.recommended.rules,
+      "@typescript-eslint/consistent-type-imports": [
+        "warn",
+        {
+          prefer: "type-imports",
+          disallowTypeAnnotations: true,
+        },
+      ],
       "react/prop-types": "off",
       "react-refresh/only-export-components": [
         "warn",

demo/src/app.tsx

@@ -10,16 +10,16 @@ import {
   Stack,
   Text,
 } from "@chakra-ui/react";
+import type { GroupBase, LoadingIndicatorProps } from "chakra-react-select";
 import {
   AsyncSelect,
   CreatableSelect,
-  GroupBase,
-  LoadingIndicatorProps,
   Select,
   chakraComponents,
 } from "chakra-react-select";
 import ConnectedSelectMenuExample from "./components/advanced-examples/connected-select-menu-example";
 import CustomIndicatorIconsExample from "./components/advanced-examples/custom-indicator-icons-example";
+import DynamicSelectedOptionColorExample from "./components/advanced-examples/dynamic-selected-option-color-example";
 import MenuPortalTargetExample from "./components/advanced-examples/menu-portal-target-example";
 import OptionsWithIconsExample from "./components/advanced-examples/options-with-icons-example";
 import SelectPopoverExample from "./components/advanced-examples/select-popover-example";
@@ -35,7 +35,8 @@ import {
   SelectValueText,
 } from "./components/ui/select";
 import animeMovies from "./data/anime-movies";
-import { ColorOption, colorOptions, groupedOptions } from "./data/options";
+import type { ColorOption } from "./data/options";
+import { colorOptions, groupedOptions } from "./data/options";
 
 const mappedColorOptions = colorOptions.map((option) => ({
   ...option,
@@ -354,6 +355,16 @@ const App = () => {
           />
         </Field>
 
+        <Field
+          label={
+            <Span>
+              Single Select with dynamic <Code>selectedOptionColorPalette</Code>
+            </Span>
+          }
+        >
+          <DynamicSelectedOptionColorExample />
+        </Field>
+
         <Field
           label={
             <Span>

demo/src/components/advanced-examples/custom-indicator-icons-example.tsx

@@ -1,9 +1,5 @@
-import {
-  GroupBase,
-  Select,
-  SelectComponentsConfig,
-  chakraComponents,
-} from "chakra-react-select";
+import type { GroupBase, SelectComponentsConfig } from "chakra-react-select";
+import { Select, chakraComponents } from "chakra-react-select";
 import { LuArrowDown, LuCircleX } from "react-icons/lu";
 import { groupedOptions } from "../../data/options";
 

demo/src/components/advanced-examples/dynamic-selected-option-color-example.tsx

@@ -0,0 +1,23 @@
+import { useState } from "react";
+import { Select } from "chakra-react-select";
+import type { ColorOption } from "../../data/options";
+import { colorOptions } from "../../data/options";
+
+const DynamicSelectedOptionColorExample = () => {
+  const [selectedOptionColorPalette, setSelectedOptionColorPalette] =
+    useState<ColorOption | null>(colorOptions[0]);
+
+  return (
+    <Select
+      name="colors"
+      options={colorOptions}
+      placeholder="Select a color..."
+      closeMenuOnSelect={false}
+      value={selectedOptionColorPalette}
+      onChange={setSelectedOptionColorPalette}
+      selectedOptionColorPalette={selectedOptionColorPalette?.value}
+    />
+  );
+};
+
+export default DynamicSelectedOptionColorExample;

demo/src/components/advanced-examples/menu-portal-target-example.tsx

@@ -1,6 +1,7 @@
 import { useState } from "react";
 import { Stack } from "@chakra-ui/react";
-import { Select, Props as SelectProps } from "chakra-react-select";
+import type { Props as SelectProps } from "chakra-react-select";
+import { Select } from "chakra-react-select";
 import { colorOptions } from "../../data/options";
 import { Button } from "../ui/button";
 import {

demo/src/components/advanced-examples/select-popover-example.tsx

@@ -1,13 +1,14 @@
 import { useRef, useState } from "react";
 import { Icon } from "@chakra-ui/react";
-import {
+import type {
   ChakraStylesConfig,
-  Select,
   SelectInstance,
   SingleValue,
 } from "chakra-react-select";
+import { Select } from "chakra-react-select";
 import { LuChevronDown, LuSearch } from "react-icons/lu";
-import { StateOption, stateOptions } from "../../data/options";
+import type { StateOption } from "../../data/options";
+import { stateOptions } from "../../data/options";
 import { Button } from "../ui/button";
 import {
   PopoverBody,

demo/src/data/countries.ts

@@ -1,4 +1,4 @@
-import { GroupBase, OptionBase } from "chakra-react-select";
+import type { GroupBase, OptionBase } from "chakra-react-select";
 
 export interface CountryOption extends OptionBase {
   label: string;

demo/src/data/options.ts

@@ -1,18 +1,23 @@
-import { OptionBase } from "chakra-react-select";
+import type { ColorPalette } from "@chakra-ui/react";
+import type { OptionBase } from "chakra-react-select";
 
 export interface ColorOption extends OptionBase {
   label: string;
-  value: string;
-  color: string;
+  value: ColorPalette;
 }
 
 export const colorOptions: ColorOption[] = [
-  { value: "blue", label: "Blue", color: "#0052CC" },
-  { value: "purple", label: "Purple", color: "#5243AA" },
-  { value: "red", label: "Red", color: "#FF5630" },
-  { value: "orange", label: "Orange", color: "#FF8B00" },
-  { value: "yellow", label: "Yellow", color: "#FFC400" },
-  { value: "green", label: "Green", color: "#36B37E" },
+  { value: "gray", label: "Gray" },
+  { value: "red", label: "Red" },
+  { value: "pink", label: "Pink" },
+  { value: "purple", label: "Purple" },
+  { value: "cyan", label: "Cyan" },
+  { value: "blue", label: "Blue" },
+  { value: "teal", label: "Teal" },
+  { value: "green", label: "Green" },
+  { value: "yellow", label: "Yellow" },
+  { value: "orange", label: "Orange" },
+  { value: "brand", label: "Brand" },
 ];
 
 export interface FlavorOption extends OptionBase {

demo/src/theme/index.ts

@@ -46,6 +46,33 @@ const config = defineConfig({
         button: { value: "pointer" },
         option: { value: "pointer" },
       },
+      colors: {
+        brand: {
+          50: { value: "#f3f8fd" },
+          100: { value: "#d1e2f8" },
+          200: { value: "#a9c8f2" },
+          300: { value: "#77a8eb" },
+          400: { value: "#5a96e7" },
+          500: { value: "#327ce1" },
+          600: { value: "#0b63dc" },
+          700: { value: "#004eb9" },
+          800: { value: "#00429d" },
+          900: { value: "#003072" },
+        },
+      },
+    },
+    semanticTokens: {
+      colors: {
+        brand: {
+          solid: { value: "{colors.brand.500}" },
+          contrast: { value: "white" },
+          fg: { value: "{colors.brand.700}" },
+          muted: { value: "{colors.brand.100}" },
+          subtle: { value: "{colors.brand.200}" },
+          emphasized: { value: "{colors.brand.300}" },
+          focusRing: { value: "{colors.brand.500}" },
+        },
+      },
     },
   },
 });

src/chakra-components/menu.tsx

@@ -10,7 +10,7 @@ import type {
   OptionProps,
 } from "react-select";
 import type { SizeProps } from "../types";
-import { cleanCommonProps, useColorModeValue, useSize } from "../utils";
+import { cleanCommonProps, useSize } from "../utils";
 import { CheckIcon } from "./icons";
 
 export const Menu = <
@@ -314,17 +314,6 @@ export const Option = <
 
   const selectStyles = useSlotRecipe({ key: "select" })({ size, variant });
 
-  /**
-   * Use the same selected color as the border/shadow of the select/input components
-   *
-   * @see {@link https://github.com/chakra-ui/chakra-ui/blob/61f965a/packages/components/theme/src/components/input.ts#L92-L93}
-   */
-  const selectedBg = useColorModeValue(
-    `${selectedOptionColorPalette}.500`,
-    `${selectedOptionColorPalette}.300`
-  );
-  const selectedColor = useColorModeValue("white", "black");
-
   // Don't create exta space for the checkmark if using a multi select with
   // options that dissapear when they're selected
   const showCheckIcon =
@@ -337,9 +326,9 @@ export const Option = <
     ...selectStyles.item,
     ...(shouldHighlight
       ? {
-          bg: selectedBg,
-          color: selectedColor,
-          _active: { bg: selectedBg },
+          color: "colorPalette.contrast",
+          bg: "colorPalette.solid",
+          _active: { bg: "colorPalette.solid" },
         }
       : {}),
   };
@@ -351,6 +340,7 @@ export const Option = <
   return (
     <Box
       {...innerProps}
+      colorPalette={selectedOptionColorPalette}
       className={cx(
         {
           option: true,

src/utils.ts

@@ -1,5 +1,4 @@
 import { useBreakpointValue, useChakraContext } from "@chakra-ui/react";
-import { useTheme } from "next-themes";
 import type { CommonPropsAndClassName, GroupBase } from "react-select";
 import type { Size, SizeProp } from "./types";
 
@@ -80,20 +79,3 @@ export const useSize = (size: SizeProp | undefined): Size => {
 
   return useBreakpointValue(responsiveSize) ?? defaultSize;
 };
-
-export function useColorMode() {
-  const { resolvedTheme, setTheme } = useTheme();
-  const toggleColorMode = () => {
-    setTheme(resolvedTheme === "light" ? "dark" : "light");
-  };
-  return {
-    colorMode: resolvedTheme,
-    setColorMode: setTheme,
-    toggleColorMode,
-  };
-}
-
-export function useColorModeValue<T>(light: T, dark: T) {
-  const { colorMode } = useColorMode();
-  return colorMode === "light" ? light : dark;
-}