Add new space sizes

Author: kelseyyim

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

@@ -1,6 +1,6 @@
-import styled, { css } from '../style/styled';
-import { mobile } from '../style/media';
-import { SpaceSizes } from '../style/theme';
+import { styled, css } from '../../styles';
+import { mobile } from '../../styles/mobile';
+import { SpaceSizes } from '../../styles/theme/index';
 
 type Props = {
   width?: SpaceSizes;

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

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

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

@@ -114,19 +114,6 @@ 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],
@@ -141,3 +128,24 @@ export const theme: ThemeInterface = {
   ...sizes,
   ...zIndex,
 };
+
+export type SpaceSizes =
+  | 0
+  | 4
+  | 8
+  | 12
+  | 16
+  | 21
+  | 24
+  | 32
+  | 40
+  | 48
+  | 56
+  | 64
+  | 72
+  | 80
+  | 96
+  | 100
+  | 116
+  | 132
+  | 144;