Fix custom values in spacing props

Signed-off-by: Charles de Dreuille <charles.dedreuille@gmail.com>

packages/canon/src/components/Box/Box.stories.tsx

@@ -148,6 +148,25 @@ export const Padding: Story = {
           <Box {...args}>Padding Left</Box>
         </Box>
       </Flex>
+      <Flex gap="4" align="center">
+        <Box p="10px" style={styleInsideBox}>
+          <Box {...args}>Custom Padding</Box>
+        </Box>
+        <Box px="10px" style={styleInsideBox}>
+          <Box {...args}>Custom Padding X</Box>
+        </Box>
+        <Box py="10px" style={styleInsideBox}>
+          <Box {...args}>Custom Padding Y</Box>
+        </Box>
+      </Flex>
+      <Flex gap="4" align="center">
+        <Box pt="10px" pb="10px" style={styleInsideBox}>
+          <Box {...args}>Custom Padding Top Bottom</Box>
+        </Box>
+        <Box pl="10px" pr="10px" style={styleInsideBox}>
+          <Box {...args}>Custom Padding Left Right</Box>
+        </Box>
+      </Flex>
     </Flex>
   ),
 };
@@ -204,10 +223,32 @@ export const Margin: Story = {
       </Flex>
       <Flex align="center" gap="4">
         <Box style={styleInsideBox}>
-          <Box p="40px" {...args}>
+          <Box m="10px" {...args}>
             Custom Margin
           </Box>
         </Box>
+        <Box style={styleInsideBox}>
+          <Box mx="10px" {...args}>
+            Custom Margin X
+          </Box>
+        </Box>
+        <Box style={styleInsideBox}>
+          <Box my="10px" {...args}>
+            Custom Margin Y
+          </Box>
+        </Box>
+      </Flex>
+      <Flex align="center" gap="4">
+        <Box style={styleInsideBox}>
+          <Box mt="10px" mb="10px" {...args}>
+            Custom Margin Top Bottom
+          </Box>
+        </Box>
+        <Box style={styleInsideBox}>
+          <Box ml="10px" mr="10px" {...args}>
+            Custom Margin Left Right
+          </Box>
+        </Box>
       </Flex>
     </Flex>
   ),

packages/canon/src/css/utilities/m.css

@@ -1,5 +1,5 @@
 .cu-m {
-  margin: var(--p);
+  margin: var(--m);
 }
 
 .cu-m-0\.5 {

packages/canon/src/css/utilities/mb.css

@@ -1,5 +1,5 @@
 .cu-mb {
-  margin-bottom: var(--pb);
+  margin-bottom: var(--mb);
 }
 
 .cu-mb-0\.5 {

packages/canon/src/css/utilities/ml.css

@@ -1,5 +1,5 @@
 .cu-ml {
-  margin-left: var(--pl);
+  margin-left: var(--ml);
 }
 
 .cu-ml-0\.5 {

packages/canon/src/css/utilities/mr.css

@@ -1,5 +1,5 @@
 .cu-mr {
-  margin-right: var(--pr);
+  margin-right: var(--mr);
 }
 
 .cu-mr-0\.5 {

packages/canon/src/css/utilities/mt.css

@@ -1,5 +1,5 @@
 .cu-mt {
-  margin-top: var(--pt);
+  margin-top: var(--mt);
 }
 
 .cu-mt-0\.5 {

packages/canon/src/css/utilities/mx.css

@@ -1,6 +1,6 @@
 .cu-mx {
-  margin-left: var(--px);
-  margin-right: var(--px);
+  margin-left: var(--mx);
+  margin-right: var(--mx);
 }
 
 .cu-mx-0\.5 {

packages/canon/src/css/utilities/my.css

@@ -1,6 +1,6 @@
 .cu-my {
-  margin-top: var(--py);
-  margin-bottom: var(--py);
+  margin-top: var(--my);
+  margin-bottom: var(--my);
 }
 
 .cu-my-0\.5 {

packages/canon/src/props/margin.props.ts

@@ -29,14 +29,14 @@ const marginPropDefs = (spacingValues: string[]) =>
       type: 'enum | string',
       values: spacingValues,
       className: 'cu-mx',
-      customProperties: ['--ml', '--mr'],
+      customProperties: ['--mx'],
       responsive: true,
     },
     my: {
       type: 'enum | string',
       values: spacingValues,
       className: 'cu-my',
-      customProperties: ['--mt', '--mb'],
+      customProperties: ['--my'],
       responsive: true,
     },
     mt: {

packages/canon/src/props/padding.props.ts

@@ -29,14 +29,14 @@ const paddingPropDefs = (spacingValues: string[]) =>
     px: {
       type: 'enum | string',
       className: 'cu-px',
-      customProperties: ['--pl', '--pr'],
+      customProperties: ['--px'],
       values: spacingValues,
       responsive: true,
     },
     py: {
       type: 'enum | string',
       className: 'cu-py',
-      customProperties: ['--pt', '--pb'],
+      customProperties: ['--py'],
       values: spacingValues,
       responsive: true,
     },

packages/canon/src/utils/extractProps.ts

@@ -25,7 +25,7 @@ export function extractProps(
   propDefs: { [key: string]: any },
 ) {
   let className: string[] = (props.className || '').split(' ');
-  let style: React.CSSProperties = props.style || {};
+  let style: React.CSSProperties = { ...props.style };
   const hasProp = (key: string) => props.hasOwnProperty(key);
 
   for (const key in propDefs) {