add margin and padding space prop

Author: kelseyyim

packages/gatsby-theme/src/components/shared/base.tsx

@@ -1,5 +1,6 @@
 import { styled } from '../../styles';
 import {
+  space,
   color,
   width,
   height,
@@ -45,6 +46,7 @@ export const Box = styled('div')<BoxProps>(
   {
     boxSizing: 'border-box',
   },
+  space,
   width,
   fontSize,
   color,

packages/gatsby-theme/src/styles/theme/index.ts

@@ -114,6 +114,18 @@ export const sizes: Sizes = {
   // [C] Nav
   navHeight: 64,
   brandHeight: 40,
+  // Spaces
+  space: [
+    // margin and padding
+    0,
+    4,
+    8,
+    16,
+    32,
+    64,
+    128,
+    256,
+  ],
   // Font
   fontSizes: [12, 14, 16, 20, 28, 32, 48, 64],
   fontWeights: [300, 400, 600, 700],