refactor: change to kebab case

Author: carwack

content/2.styled-system/1.style-props.md

@@ -108,16 +108,16 @@ each group.
 ```html
 <template>
   <!-- font-size of `theme.fontSizes.md` -->
-  <c-text fontSize="md" />
+  <c-text font-size="md" />
 
   <!-- font-size `32px` -->
-  <c-text fontSize="32" />
+  <c-text font-size="32" />
 
   <!-- font-size `'2em'` -->
-  <c-text fontSize="2em" />
+  <c-text font-size="2em" />
 
   <!-- text-align `left` on all viewports and `center` from the first breakpoint and up -->
-  <c-text :textAlign="[ 'left', 'center' ]" />
+  <c-text :text-align="[ 'left', 'center' ]" />
 </template>
 ```
 
@@ -176,13 +176,13 @@ each group.
   <c-box :display="{ base: 'none', md: 'block' }" />
 
   <!-- shorthand -->
-  <c-box hideBelow='md' />
+  <c-box hide-below='md' />
 
   <!-- hide the element from 'md' up -->
   <c-box :display="{ base: 'block', md: 'none' }" />
 
   <!-- shorthand -->
-  <c-box hideFrom='md' />
+  <c-box hide-from='md' />
 </template>
 ```
 
@@ -234,7 +234,7 @@ each group.
 ```html
 <template>
   <!-- verbose -->
-  <c-box display="grid" gridGap="2" gridAutoFlow="row dense">
+  <c-box display="grid" grid-gap="2" grid-auto-flow="row dense">
     Grid
   </c-box>
 
@@ -268,13 +268,13 @@ each group.
 <template>
   <!-- verbose -->
   <c-box
-    backgroundImage="url('/images/kyuubi.png')"
-    backgroundPosition="center"
-    backgroundRepeat="no-repeat"
+    background-image="url('/images/kyuubi.png')"
+    background-position="center"
+    background-repeat="no-repeat"
   >
 
   <!-- shorthand -->
-  <c-box bgImage="url('/images/gaara.png')" bgPos="center" bgRepeat="no-repeat" >
+  <c-box bg-image="url('/images/gaara.png')" bg-pos="center" bg-repeat="no-repeat" >
 </template>
 ```
 
@@ -291,7 +291,7 @@ each group.
 
 ```html
 <template>
-  <c-box border="1px" borderRadius="md" borderColor="gray.200">
+  <c-box border="1px" border-radius="md" border-color="gray.200">
     Card
   </c-box>
 </template>
@@ -335,13 +335,13 @@ each group.
 ```html
 <template>
   <!-- This button will have no right borderRadius -->
-  <c-button roundedRight="0">Button 1</c-button>
+  <c-button rounded-right="0">Button 1</c-button>
 
   <!-- This button will have no left borderRadius*/ -->
-  <c-button roundedLeft="0">Button 2</c-button>
+  <c-button rounded-left="0">Button 2</c-button>
 
   <!-- top left and top right radius will be `theme.radii.md` => 4px -->
-  <c-button roundedTop="md">Button 2</c-button>
+  <c-button rounded-top="md">Button 2</c-button>
 </template>
 ```
 
@@ -399,10 +399,10 @@ each group.
   <!-- verbose -->
   <!-- text-shadow will be `theme.shadows.sm` -->
   <!-- box-shadow will be `theme.shadows.md` -->
-  <c-box textShadow="sm" boxShadow="md" />
+  <c-box text-shadow="sm" box-shadow="md" />
 
   <!-- raw CSS values -->
-  <c-text textShadow="2px 2px #ff0000" boxShadow="5px 10px #888888">
+  <c-text text-shadow="2px 2px #ff0000" box-shadow="5px 10px #888888">
     Text with shadows
   </c-text>
 </template>