Use new cxs

demo/BasicLink.js

@@ -14,7 +14,7 @@ const BasicLink = props => (
       ':focus': {
         outline: 'none',
         textDecoration: 'underline',
-        color: config.colors.grape
+        color: config.colors.fuschia
       }
     }}
     {...props}

demo/Cta.js

@@ -13,9 +13,9 @@ const Cta = () => (
     <Text
       is='a'
       href='https://github.com/jxnblk/axs'
-      size={2}
+      fontSize={2}
       bold
-      grape
+      fuschia
       children='View on GitHub'
     />
   </Container>

demo/Dit.js

@@ -4,7 +4,7 @@ import { Box } from '../src'
 
 const Dit = (props) => (
   <Box
-    bgGrape
+    bgFuschia
     width={64}
     my2
     css={{

demo/Features.js

@@ -10,30 +10,30 @@ const Features = () => (
     <Flex mx-3 wrap>
       <Box p3 width={[1, 1/2]}>
         <Dit />
-        <Heading size={3} mb2 children='Responsive Typography and Layout' />
+        <Heading fontSize={3} mb2 children='Responsive Typography and Layout' />
         <Text>
           Axs is an abstraction of the most common responsive typographic and layout styling concerns in the form of two UI component primitives.
         </Text>
       </Box>
       <Box p3 width={[1, 1/2]}>
         <Dit />
-        <Heading size={3} mb2 children='From Prototype to UI Library' />
+        <Heading fontSize={3} mb2 children='From Prototype to UI Library' />
         <Text>
           Axs is intended as a way to quickly prototype new UI, handle one-off styles,
           and serve as a foundation for creating your own custom UI component libraries.
         </Text>
       </Box>
       <Box p3 width={[1, 1/2]}>
         <Dit />
-        <Heading size={3} mb2 children='UI Component Primitives' />
+        <Heading fontSize={3} mb2 children='UI Component Primitives' />
         <Text>
           Use the Box component as a starting point for any visual containers or grid systems in your app.
           Use the Text component for headings, labels, messages, or any other UI typography.
         </Text>
       </Box>
       <Box p3 width={[1, 1/2]}>
         <Dit />
-        <Heading size={3} mb2 children='The Power of CSS in JavaScript' />
+        <Heading fontSize={3} mb2 children='The Power of CSS in JavaScript' />
         <Text>
           Each Axs component handles CSS-in-JS with the <code>css</code> prop,
           with support for media queries and pseudoclasses,

demo/Footer.js

@@ -32,8 +32,8 @@ const Footer = () => (
           children='Made by Jxnblk' />
       </Flex>
     </Container>
-    <Flex py4 my4 grape justifyContent='space-around'>
-      <Logo size={48} />
+    <Flex py4 my4 fuschia justifyContent='space-around'>
+      <Logo fontSize={48} />
     </Flex>
   </Box>
 )

demo/Header.js

@@ -11,27 +11,27 @@ import Dit from './Dit'
 
 export default () => (
   <Box is='header' px3 mb4>
-    <Box py4 mb4 white bgGrape>
+    <Box py4 mb4 white bgFuschia>
       <Container py4>
         <Flex wrap align='center'>
-          <Box border='right' css={cx.pipe} pr3 mr3>
-            <Heading level={1} size={[1, null, 0]}>
+          <Box borderRight={4} css={cx.pipe} pr3 mr3>
+            <Heading level={1} fontSize={[1, null, 0]}>
               Axs
             </Heading>
           </Box>
           <Box width={[1, 1/2]}>
-            <Text is='p' bold size={[4, 3 ]} mt2>
+            <Text is='p' bold fontSize={[4, 3 ]} mt2>
               A build-your-own responsive typography and layout UI toolkit for React
             </Text>
-            <Pre size={4} p0 my2 grape1 children='npm i axs' />
+            <Pre fontSize={4} p0 my2 fuschia1 children='npm i axs' />
           </Box>
         </Flex>
       </Container>
     </Box>
     <Flex wrap align='center'>
       <Box width={[1, null, 4/8 ]}>
         <Dit />
-        <Text size={3}>
+        <Text fontSize={3}>
           Axs is a React UI component library
           that serves as a foundation for highly customized UI
           as well as a utility belt for prototyping.

demo/Link.js

@@ -14,10 +14,10 @@ const Link = ({ to, href, ...props }, { basehref = '' }) => {
   return (
     <Text
       href={href || basehref + to}
-      size6
+      fontSize={6}
       bold
       caps
-      grape
+      fuschia
       display='inline-block'
       py2
       {...props}
@@ -26,12 +26,12 @@ const Link = ({ to, href, ...props }, { basehref = '' }) => {
       css={{
         textDecoration: 'none',
         ':hover': {
-          color: config.colors.grape9
+          color: config.colors.fuschia9
         },
         ':focus': {
           outline: 'none',
-          color: config.colors.grape9,
-          boxShadow: `0 0 0 2px ${config.colors.grape1}`
+          color: config.colors.fuschia9,
+          boxShadow: `0 0 0 2px ${config.colors.fuschia1}`
         }
       }}
     />

demo/MiniIcon.js

@@ -9,8 +9,8 @@ const MiniIcon = () => (
   <div style={{ padding: 32 }}>
     <style dangerouslySetInnerHTML={{ __html: css }} />
     <Logo
-      color={config.colors.grape}
-      size={128} />
+      color={config.colors.fuschia}
+      fontSize={128} />
   </div>
 )
 

demo/Nav.js

@@ -14,7 +14,11 @@ const Nav = () => (
       <Link p0
         title='Home'
         to='/'>
-        <Logo color={config.colors.grape} size={32} mr2 />
+        <Logo
+          size={32}
+          mr2
+          color={config.colors.fuschia}
+        />
       </Link>
       <Link
         mr2

demo/Pre.js

@@ -7,8 +7,8 @@ const Pre = props => (
     is='pre'
     m0
     p2
-    size={6}
-    grape8
+    fontSize={6}
+    fuschia8
     {...props}
     css={cx}
   />

demo/Tweet.js

@@ -5,7 +5,7 @@ import { Flex } from 'axs-ui'
 
 export default props => (
   <Flex
-    size={6}
+    fontSize={6}
     width={61}
     my2
     {...props}>

demo/UiHeader.js

@@ -11,14 +11,14 @@ import Dit from './Dit'
 const UiHeader = () => (
   <Box py3>
     <Dit />
-    <Heading level={1} grape>
+    <Heading level={1} fuschia>
       Axs UI
     </Heading>
-    <Text bold size={3} grape>
+    <Text bold fontSize={3} fuschia>
       UI Component Primitives
     </Text>
-    <Pre size={4} p0 py2>npm i axs-ui</Pre>
-    <Text size={[ 4, 3 ]} py2>
+    <Pre fontSize={4} p0 py2>npm i axs-ui</Pre>
+    <Text fontSize={[ 4, 3 ]} py2>
       In addition to the core Box and Text components,
       the optional <code>axs-ui</code> package includes several pre-styled UI component primitives.
     </Text>

demo/Usage.js

@@ -8,8 +8,8 @@ import Pre from './Pre'
 import BasicLink from './BasicLink'
 
 const example = (
-  <Box p2 mb2 white bgGrape>
-    <Text is='h2' size2>
+  <Box p2 mb2 white bgFuschia>
+    <Text is='h2' fontSize={2}>
       Box
     </Text>
   </Box>

demo/entry.js

@@ -32,7 +32,7 @@ module.exports = (locals) => {
   const { renderToString, renderToStaticMarkup } = require('react-dom/server')
 
   const app = renderToString(<App {...locals} basehref={basehref} />)
-  const css = cxs.css
+  const css = cxs.css()
   cxs.reset()
 
   return html({ app, css, basehref })

demo/example-source.js

@@ -13,7 +13,7 @@ import {
 
 const NavLink = props => (
   <Text is='a'
-    size={5}
+    fontSize={5}
     bold
     gray8
     {...props}
@@ -95,7 +95,7 @@ const examples = [
   {
     name: 'Red Button',
     comp: (
-      <Button size={6} caps bgRed>
+      <Button fontSize={6} caps bgRed>
         Red Button
       </Button>
     )
@@ -106,7 +106,7 @@ const examples = [
       <Box>
         <Text
           is='label'
-          size6
+          fontSize={6}
           display='block'
           gray8>
           Email
@@ -127,7 +127,7 @@ const examples = [
             backgroundColor: 'transparent',
             ':focus': {
               outline: 'none',
-              borderColor: config.colors.blue
+              // borderColor: config.colors.blue
             }
           }}
         />
@@ -137,7 +137,7 @@ const examples = [
   {
     name: 'Box',
     comp: (
-      <Box p3 mb2 rounded white bgGrape>
+      <Box p3 mb2 rounded white bgFuschia>
         Box
       </Box>
     )
@@ -148,15 +148,15 @@ const examples = [
       <Box
         m={[0, 1, 2, 3]}
         p={[2, null, 3]}
-        white bgGrape>
+        white bgFuschia>
         Responsive Box
       </Box>
     )
   },
   {
     name: 'Reponsive Heading',
     comp: (
-      <Heading size={[3, 2, 1, 0]}>
+      <Heading fontSize={[3, 2, 1, 0]}>
         Responsive Heading
       </Heading>
     )
@@ -165,7 +165,7 @@ const examples = [
     name: 'NavLink',
     comp: (
       <Text is='a'
-        size={5}
+        fontSize={5}
         bold
         gray8
         css={{
@@ -209,10 +209,10 @@ const examples = [
     name: 'Bar Chart',
     comp: (
       <Box white>
-        <Box py1 mb1 width={1/4} bgGrape>
+        <Box py1 mb1 width={1/4} bgFuschia>
           <Text mx2 bold>25%</Text>
         </Box>
-        <Box py1 width={3/4} bgGrape8>
+        <Box py1 width={3/4} bgFuschia8>
           <Text mx2 bold>75%</Text>
         </Box>
       </Box>
@@ -222,35 +222,35 @@ const examples = [
     name: 'Percentage Bar',
     comp: (
       <Flex white>
-        <Box py1 width={3/8} bgGrape8>
-          <Text size={6} bold center>37.5%</Text>
+        <Box py1 width={3/8} bgFuschia8>
+          <Text fontSize={6} bold center>37.5%</Text>
         </Box>
-        <Box py1 width={1/4} bgGrape6>
-          <Text size={6} bold center>25%</Text>
+        <Box py1 width={1/4} bgFuschia6>
+          <Text fontSize={6} bold center>25%</Text>
         </Box>
-        <Box py1 width={1/4} bgGrape4>
-          <Text size={6} bold center>25%</Text>
+        <Box py1 width={1/4} bgFuschia4>
+          <Text fontSize={6} bold center>25%</Text>
         </Box>
-        <Box py1 width={1/8} bgGrape2>
-          <Text size={6} bold center>12.5%</Text>
+        <Box py1 width={1/8} bgFuschia2>
+          <Text fontSize={6} bold center>12.5%</Text>
         </Box>
       </Flex>
     )
   },
   {
     name: 'Panel',
     comp: (
-      <Box border rounded borderGrape>
-        <Box p2 white bgGrape>
+      <Box border rounded borderFuschia>
+        <Box p2 white bgFuschia>
           <Text bold>Panel</Text>
         </Box>
         <Box p2>
           <Text>
             A panel is great for drawing attention and grouping related content together.
           </Text>
         </Box>
-        <Box p2 border='top' grape borderGrape>
-          <Text size={6}>
+        <Box p2 border='top' fuschia borderFuschia>
+          <Text fontSize={6}>
             Panel footer
           </Text>
         </Box>
@@ -272,7 +272,7 @@ const examples = [
           }}
         />
         <Box px2 py1>
-          <Text bold size={3}>Card</Text>
+          <Text bold fontSize={3}>Card</Text>
           <Text>Card</Text>
         </Box>
       </Box>
@@ -281,20 +281,20 @@ const examples = [
   {
     name: 'Blockquote',
     comp: (
-      <Box is='blockquote' m0 px2 grape>
-        <Text bold size={[4, null, 2 ]}>
+      <Box is='blockquote' m0 px2 fuschia>
+        <Text bold fontSize={[4, null, 2 ]}>
           “In the sixteenth century, a series of common sizes developed among European typographers, and the series survived with little change and few additions for 400 years
           ...
           ”
         </Text>
-        <Text is='cite' size={5}>—Robert Bringhurst</Text>
+        <Text is='cite' fontSize={5}>—Robert Bringhurst</Text>
       </Box>
     )
   },
   {
     name: 'Grid Footer',
     comp: (
-      <Box py3 white bgGrape9>
+      <Box py3 white bgFuschia9>
         <InlineBlock px3 width={[1/2, 1/3, 1/4]} css={{ verticalAlign: 'top' }}>
           <NavLink href='#!' children='Home' />
           <NavLink href='#!' children='Categories' />