message: Use functional variables in documentation for StyledOcticon
diff: @@ -8,8 +8,8 @@ StyledOcticon renders an [Octicon](https://octicons.github.com) with common syst
  ## Default example
  ```jsx live
  -<StyledOcticon icon={CheckIcon} size={32} color="green.5" mr={2} />
  -<StyledOcticon icon={XIcon} size={32} color="red.5" />
  +<StyledOcticon icon={CheckIcon} size={32} color="icon.success" mr={2} />
  +<StyledOcticon icon={XIcon} size={32} color="icon.danger" />
  ```
  ## System props
  @@ -21,7 +21,7 @@ StyledOcticon components get `COMMON` system props. Read our [System Props](/sys
  StyledOcticon passes all of its props except the common system props down to the [Octicon component](https://github.com/primer/octicons/tree/master/lib/octicons_react#usage), including:
  | Name | Type | Default | Description |
  -| :- | :- | :-: | :- |
  +| :------------ | :-------- | :-----------: | :----------------------------------------------------------------------------------------------------------- |
  | ariaLabel | String | | Specifies the `aria-label` attribute, which is read verbatim by screen readers |
  | icon | Component | | [Octicon component](https://github.com/primer/octicons/tree/master/lib/octicons_react) used in the component |
  | size | Number | 16 | Sets the uniform `width` and `height` of the SVG element |
  