message: Use functional variables in documentation for Position
diff: @@ -10,22 +10,38 @@ The Position component is a wrapper component that gives the containing componen
  <Box p={2} mb={200}>
  <Heading mb={2}>Relative + Absolute</Heading>
  <Relative size={128} mx={128} my={6}>
  - <Box border={1} borderColor="gray.2" size="100%">
  - <Absolute left="100%" top={0} bg="red.1" p={1}>rt</Absolute>
  - <Absolute right="100%" top={0} bg="green.1" p={1}>lt</Absolute>
  - <Absolute left="100%" bottom={0} bg="blue.1" p={1}>rb</Absolute>
  - <Absolute right="100%" bottom={0} bg="purple.1" p={1}>lb</Absolute>
  - <Absolute left={0} top="100%" bg="orange.1" p={1}>bl</Absolute>
  - <Absolute right={0} top="100%" bg="yellow.3" p={1}>br</Absolute>
  - <Absolute left={0} bottom="100%" bg="red.1" p={1}>tl</Absolute>
  - <Absolute right={0} bottom="100%" bg="blue.1" p={1}>tr</Absolute>
  + <Box border={1} borderColor="ansi.gray" color="text.inverse" size="100%">
  + <Absolute left="100%" top={0} bg="ansi.red" p={1}>
  + rt
  + </Absolute>
  + <Absolute right="100%" top={0} bg="ansi.green" p={1}>
  + lt
  + </Absolute>
  + <Absolute left="100%" bottom={0} bg="ansi.blue" p={1}>
  + rb
  + </Absolute>
  + <Absolute right="100%" bottom={0} bg="ansi.magenta" p={1}>
  + lb
  + </Absolute>
  + <Absolute left={0} top="100%" bg="ansi.yellow" p={1}>
  + bl
  + </Absolute>
  + <Absolute right={0} top="100%" bg="ansi.cyan" p={1}>
  + br
  + </Absolute>
  + <Absolute left={0} bottom="100%" bg="ansi.redBright" p={1}>
  + tl
  + </Absolute>
  + <Absolute right={0} bottom="100%" bg="ansi.blueBright" p={1}>
  + tr
  + </Absolute>
  </Box>
  </Relative>
  <Heading my={2}>Sticky</Heading>
  - <BorderBox border={1} borderColor="green.5" height={500}>
  - <Sticky top={0} bg="green.2" p={6}>
  + <BorderBox border={1} borderColor="border.success" height={500}>
  + <Sticky top={0} bg="bg.success" p={6}>
  I'm sticky!
  </Sticky>
  </BorderBox>
  @@ -33,7 +49,7 @@ The Position component is a wrapper component that gives the containing componen
  <Heading my={2}>Fixed</Heading>
  <p>(see the bottom right of the screen)</p>
  - <Fixed bottom={0} right={0} bg="red.2" p={2}>
  + <Fixed bottom={0} right={0} bg="bg.danger" p={2}>
  I'm fixed to the bottom right.
  </Fixed>
  </Box>
  