message: Use functional variables in documentation for Label
diff: @@ -7,7 +7,7 @@ The Label component is used to add contextual metadata to a design. Visually it
  ## Default example
  ```jsx live
  - <Label variant="small" outline borderColor="red.2" mr={2} color="red.4">small</Label>
  + <Label variant="small" outline borderColor="border.danger" mr={2} color="text.danger">small</Label>
  <Label variant="medium" mr={2}>medium (default)</Label>
  <Label variant="large" mr={2}>large</Label>
  <Label variant="xl">xl label</Label>
  @@ -27,8 +27,8 @@ Label components get `COMMON` system props. Read our [System Props](/system-prop
  ## Component props
  | Name | Type | Default | Description |
  -| :- | :- | :-: | :- |
  +| :--------- | :------ | :--------------------: | :----------------------------------------------------------------------------- |
  | outline | Boolean | | Creates an outline style label |
  -| variant | String | 'medium' | Can be one of `small`, `medium` (default), `large` or `xl` .
  +| variant | String | 'medium' | Can be one of `small`, `medium` (default), `large` or `xl` . |
  | dropshadow | Boolean | | Adds a dropshadow to the label |
  -| bg | String | 'gray.5' | Part of the `COMMON` system props, used to change the background of the label.
  +| bg | String | 'label.primary.border' | Part of the `COMMON` system props, used to change the background of the label. |
  