Use chakra token for the placeholder color

Author: csandman

src/chakra-components/menu.tsx

@@ -151,13 +151,6 @@ export const LoadingMessage = <
     selectProps: { chakraStyles, size: sizeProp },
   } = props;
 
-  /**
-   * The chakra UI global placeholder color
-   *
-   * @see {@link https://github.com/chakra-ui/chakra-ui/blob/13c6d2e08b61e179773be4722bb81173dd599306/packages/theme/src/styles.ts#L13}
-   */
-  const color = useColorModeValue("gray.400", "whiteAlpha.400");
-
   const size = useSize(sizeProp);
 
   const verticalPaddings: SizeProps = {
@@ -167,7 +160,7 @@ export const LoadingMessage = <
   };
 
   const initialSx: SystemStyleObject = {
-    color,
+    color: "chakra-placeholder-color",
     textAlign: "center",
     paddingY: verticalPaddings[size],
     fontSize: size,

src/chakra-components/placeholder.tsx

@@ -1,7 +1,6 @@
 import React from "react";
 import { Box } from "@chakra-ui/layout";
 import type { SystemStyleObject } from "@chakra-ui/system";
-import { useColorModeValue } from "@chakra-ui/system";
 import type { GroupBase, PlaceholderProps } from "react-select";
 
 const Placeholder = <
@@ -19,16 +18,9 @@ const Placeholder = <
     selectProps: { chakraStyles },
   } = props;
 
-  /**
-   * The chakra UI global placeholder color
-   *
-   * @see {@link https://github.com/chakra-ui/chakra-ui/blob/13c6d2e08b61e179773be4722bb81173dd599306/packages/theme/src/styles.ts#L13}
-   */
-  const color = useColorModeValue("gray.400", "whiteAlpha.400");
-
   const initialSx: SystemStyleObject = {
     gridArea: "1 / 1 / 2 / 3",
-    color,
+    color: "chakra-placeholder-color",
     mx: "0.125rem",
     userSelect: "none",
   };