Add tertiary prop to Text

[martimalek]

Describe the feature you'd like

Currently the Text component accepts a secondary prop which adjusts it's color to indicate secondary information. Since in our semantic colors we already have text.tertiary it would make sense to also add a tertiary prop to indicate tertiary information.

At the moment the only way to do this would be:

export const TertiaryText = styled(Text)`
    color: ${themeGet('semanticColors.text.tertiary')};
`

It would be more user friendly to have something like:

<Text tertiary>I'm a tertiary text</ Text>

Describe alternatives you've considered

We could also consider deprecating the secondary prop to add a color (or similar) prop which accepts secondary | tertiary as value

[lloydaf]

Personally I'm in favour of using a generic color or theme property instead of multiple ones

[nlopin]

Personally I'm in favour of using a generic color or theme property instead of multiple ones

Isn't tertiary just a shortcut for this? I think we shouldn't allow that much freedom for text because we won't be able to provide a good contrast ratio for an arbitrary color

[lloydaf]

We have decided to use the variant property for the Text component and refactor primary, secondary and the proposed tertiary props to use the variant instead. The idea is to make this consistent with Button