pass control props to select and hard-code text color for solid danger button

Author: tom2drum

toolkit/chakra/select.tsx

@@ -260,21 +260,35 @@ export interface SelectProps extends SelectRootProps {
   loading?: boolean;
   errorText?: string;
   contentProps?: SelectContentProps;
+  controlProps?: SelectControlProps;
   contentHeader?: React.ReactNode;
   multipleConfig?: SelectValueTextProps['multipleConfig'];
   itemFilter?: (item: SelectOption) => boolean;
   mode?: ViewMode;
 }
 
 export const Select = React.forwardRef<HTMLDivElement, SelectProps>((props, ref) => {
-  const { collection, placeholder, portalled = true, loading, errorText, contentProps, contentHeader, itemFilter, mode, multipleConfig, ...rest } = props;
+  const {
+    collection,
+    placeholder,
+    portalled = true,
+    loading,
+    errorText,
+    contentProps,
+    controlProps,
+    contentHeader,
+    itemFilter,
+    mode,
+    multipleConfig,
+    ...rest
+  } = props;
   return (
     <SelectRoot
       ref={ ref }
       collection={ collection }
       { ...rest }
     >
-      <SelectControl loading={ loading }>
+      <SelectControl loading={ loading } { ...controlProps }>
         <SelectValueText
           placeholder={ placeholder }
           size={ props.size }

toolkit/theme/recipes/button.recipe.ts

@@ -33,14 +33,14 @@ export const recipe = defineRecipe({
       },
       solid_danger: {
         bg: 'red.600',
-        color: 'button.solid.text',
+        color: 'white',
         _hover: {
           bg: 'red.500',
         },
         _loading: {
           opacity: 1,
           '& .chakra-spinner': {
-            borderColor: 'button.solid.text',
+            borderColor: 'white',
             borderBottomColor: 'spinner.track',
             borderInlineStartColor: 'spinner.track',
           },