Chakra UI中创建组件interface时，color与backgroundColor的正确类型是什么？

定义组件Props接口时，不确定color或backgroundColor属性应使用什么类型——不存在Property.color这类直接可用的类型，但肯定有能覆盖所有可选颜色选项的内置类型。目前用any来规避报错，但这样就丢失了颜色的类型提示功能。

import {
  BackgroundProps,
  Card,
  CardBody,
  ColorProps,
  Colors,
  HStack,
  Icon,
  ResponsiveValue,
  Text,
} from "@chakra-ui/react";
import { HiFolder } from "react-icons/hi";
import { MdKeyboardArrowRight } from "react-icons/md";
import { ReactNode } from "react";

interface Props {
  children: ReactNode;
  color: ResponsiveValue<any>;
  //   backgroundColor: BackgroundProps;
}

function DashboardLinkSectionCard({ children, color }: Props) {
  return (
    <>
      <Card
        // maxW={"ms"}
        maxH={"20"}
        color={color}
        // backgroundColor={backgroundColor}
      >
        <CardBody>
          <HStack gap={2}>
            <Icon as={HiFolder} boxSize={6} />
            <Text>{children}</Text>
            <Icon as={MdKeyboardArrowRight} boxSize={6} />
          </HStack>
        </CardBody>
      </Card>
    </>
  );
}

export default DashboardLinkSectionCard;

这是常规情况下能获得的颜色类型提示：

目前想到的一个可行方案是手动复制所有颜色选项来创建自定义类型，但显然有更优的解决方案。

内容的提问来源于stack exchange，提问作者Muhammad Mubashirullah Durrani