How to use the typography.body.color function in typography

wrapper: {
      display: "flex",
      justifyContent: "space-between",
      alignItems: "center",
      textDecoration: "none",
      padding: `0 ${themeData["density.spacings.medium"]}`,

      // we can't override the :hover selector on typography's
      // style prop, so we have to style the text from the
      // container element
      "&:hover span": {
        color: themeData["colorScheme.accentColor"]
      },

      "& svg *": {
        fill: themeData["typography.body.color"]
      },

      "&:hover svg *": {
        fill: themeData["colorScheme.accentColor"]
      }
    },

    externalIcon: {
      display: "flex",
      alignItems: "center",
      marginLeft: "auto",
      padding: "6px 2px"
    },

    typography: {
      lineHeight: "26px"

? {
          color: themeData["colorScheme.accentColor"],
          borderLeft: activeBorderLeft
        }
      : { borderLeft: "2px solid transparent" })
  });

  return {
    wrapper: {
      display: "flex",
      alignItems: "stretch",
      paddingLeft: "2px",
      flex: "1 1 auto",
      textDecoration: "none",
      cursor: "pointer",
      color: themeData["typography.body.color"],

      "&:before": activeBorderBefore(props.active || props.activeChildren),

      "&:focus, &:hover": {
        outline: "none",
        color: themeData["colorScheme.accentColor"],

        "svg *": {
          fill: themeData["colorScheme.accentColor"]
        }
      },

      "&:focus:before, &:hover:before": activeBorderBefore(true),

      ...((props.active || props.activeChildren) && {
        "& svg *": {

display: "flex",
      alignItems: "center",
      justifyContent: "center",
      width: "38px",
      "& svg": {
        pointerEvents: "none"
      }
    },

    externalIcon: {
      display: "flex",
      alignItems: "center",
      marginLeft: "auto",
      padding: "6px 10px",
      "& svg *": {
        fill: themeData["typography.body.color"]
      }
    },

    row: {
      display: "flex",
      flexDirection: "row",
      alignItems: "stretch",
      minHeight: "32px",
      marginRight: themeData["density.spacings.extraSmall"],

      "&:hover svg *": {
        fill: themeData["colorScheme.accentColor"],
        pointerEvents: "none"
      }
    },