How to use the @chakra-ui/theme.addOpacity function in @chakra-ui/theme

const outlineStyle = ({ theme: { colors }, color }: PropsWithTheme) => {
  const _color = colors[color] && colors[color][200];
  const darkModeColor = addOpacity(_color, 0.8);
  const boxShadowColor = colors[color] && colors[color][500];
  return {
    light: {
      boxShadow: `inset 0 0 0px 1px ` + boxShadowColor,
      color: get(color, "500"),
    },
    dark: {
      boxShadow: `inset 0 0 0px 1px ` + darkModeColor,
      color: darkModeColor,
    },
  };
};

result = {
      light: {
        color: `${color}.500`,
        bg: "transparent",
        _hover: {
          bg: `${color}.50`,
        },
        _active: {
          bg: `${color}.100`,
        },
      },
      dark: {
        color: `${color}.200`,
        bg: "transparent",
        _hover: {
          bg: addOpacity(_color, 0.12),
        },
        _active: {
          bg: addOpacity(_color, 0.24),
        },
      },
    };
  }

  return result[colorMode];
};

bg: "transparent",
        _hover: {
          bg: `${color}.50`,
        },
        _active: {
          bg: `${color}.100`,
        },
      },
      dark: {
        color: `${color}.200`,
        bg: "transparent",
        _hover: {
          bg: addOpacity(_color, 0.12),
        },
        _active: {
          bg: addOpacity(_color, 0.24),
        },
      },
    };
  }

  return result[colorMode];
};

const solidStyle = ({ theme: { colors }, color }: PropsWithTheme) => {
  const _color = colors[color] && colors[color][500];
  const darkModeBg = addOpacity(_color, 0.6);
  return {
    light: {
      bg: get(color, "500"),
      color: "white",
    },
    dark: {
      bg: darkModeBg,
      color: "whiteAlpha.800",
    },
  };
};