`Text` component requires me to duplicate parent component styles instead of cascading

[alex-page]

Issue summary

When trying to right align typography inside an IndexTable heading I have to provide the following properties:

• variant
• color
• fontWeight
• as
• alignment

Expected behavior

I should only have to provide alignment as I want to follow the parents cascading styles that set fontWeight color and fontSize and for the element to default to a span or p.

Actual behavior

See this PR: #8448

Repeat a lot of code and output more CSS then is needed because I am forced to use properties in the component.

[aaronccasanova]

One possible solution to this issue could be to introduce a variantMap and an inherit variant to the Text component. Essentially, the variantMap would map the variant prop to a set of predefined HTML elements, which reduces the need to set the as prop for each Text instance. Then, we could use the inherit variant to set the remaining style props to inherit (reducing the need to specify them individually) e.g.

Before:

function App() {
  return (
    <Text as="h3" variant="heading" color="primary" fontWeight="bold">
      ...
      <Text as="span" variant="heading" color="primary" fontWeight="bold" align="right">...</Text>
    </Text>
  )
}

After:

function App() {
  return (
    <Text variant="heading" color="primary" fontWeight="bold">
      ...
      <Text variant="inherit" align="right">...</Text>
    </Text>
  )
}

[alex-page]

I was assuming variant would become optional and would inherit by default with no added CSS.