message: Use functional variables in documentation for Text
diff: ---
  title: Text
  ---
  +
  The Text component is a wrapper component that will apply typography styles to the text inside.
  ## Default example
  +
  ```jsx live
  <Text as='p' fontWeight="bold">bold</Text>
  -<Text as='p' color="red.6">red color</Text>
  -<Text as='p' color="white" bg="gray.9" p={2}>white on black</Text>
  +<Text as='p' color="text.danger">danger color</Text>
  +<Text as='p' color="text.inverse" bg="bg.canvasInverse" p={2}>inverse colors</Text>
  ```
  ## System props
  @@ -17,5 +19,5 @@ Text components get `TYPOGRAPHY` and `COMMON` system props. Read our [System Pro
  ## Component props
  | Name | Type | Default | Description |
  -| :- | :- | :-: | :- |
  +| :--- | :----- | :-----: | :---------------------------------- |
  | as | String | `span` | Sets the HTML tag for the component |
  