# Text

## Use

from somewhere inside of a `ThemeProvider`:

```js
import { Text } from '@tedconf/monterey';

const MyView = () => (
  <div>
    <h1>
      <Text variant="6">Welcome to this website</Text>
    </h1>
  </div>
);
```

## Details

The `<Text />` primitive should be treated as a dumb building block. by default
it renders as a `span`. It should be wrapped with whichever semantic attributes
necessary - they shouldn't be applied directly to it. `<Text />` should be your
new default wrapping element for any text content. You should _only ever_ use
this component and its variants to style text.

## Variants

![available variants: default, -2r, -2u, -1r, -1b, 1r, 1b, 2r, 2b, 3, 4, 5, 6](https://i.imgur.com/XhSMokT.png)

```js
<Text>Welcome to this website</Text>
<Text variant="-2r">Welcome to this website</Text>
<Text variant="-2u">Welcome to this website</Text>
<Text variant="-1r">Welcome to this website</Text>
<Text variant="-1b">Welcome to this website</Text>
<Text variant="1r">Welcome to this website</Text>
<Text variant="1b">Welcome to this website</Text>
<Text variant="2r">Welcome to this website</Text>
<Text variant="2b">Welcome to this website</Text>
<Text variant="3">Welcome to this website</Text>
<Text variant="4">Welcome to this website</Text>
<Text variant="5">Welcome to this website</Text>
<Text variant="6">Welcome to this website</Text>
```

## Color

By default, the `<Text>` primitive inherits color from its parent. For
convenience, it can also accept a `color` property whererin you can pass any
[token color](../tokens/README.md#colors).

## Media Queries

The props applied to `<Text>`, like all Monterey components, employ the [styled
system syntax](https://styled-system.com/responsive-styles) for responsive
styles. Simply pass an array with values corresponding to media queries, like
this:

```jsx
<Text variant={['-2u', null, null, '1r']}>
  Small and uppercase by default, then regular at the 4th media query (768px).
  `null` means "don't change at this size".
</Text>
```