feat(lsg): replace spaces

src/lsg/patterns/element/index.tsx

@@ -1,6 +1,7 @@
 import { colors } from '../colors';
 import { Icon, IconName, Size as IconSize } from '../icons';
 import * as React from 'react';
+import { getSpace, Size } from '../space';
 import styled from 'styled-components';
 
 export interface ElementProps {
@@ -19,9 +20,8 @@ const StyledElement = styled.div`
 	display: flex;
 	flex-wrap: wrap;
 	align-items: center;
-	padding: 0 15px;
+	padding: 0 ${getSpace(Size.M)}px;
 	line-height: 30px;
-	margin-top: 0;
 	border-radius: 3px;
 	${(props: ElementProps) =>
 		props.active
@@ -37,7 +37,7 @@ const StyledElement = styled.div`
 
 const StyledElementChild = styled.div`
 	flex-basis: 100%;
-	padding-left: 15px;
+	padding-left: ${getSpace(Size.M)}px;
 	${(props: StyledElementChildProps) => (props.open ? 'display: block;' : 'display: none;')};
 `;
 

src/lsg/patterns/pattern-list-item/index.tsx

@@ -2,6 +2,7 @@ import { colors } from '../colors';
 import { fonts } from '../fonts';
 import { Icon, IconName, Size as IconSize } from '../icons';
 import * as React from 'react';
+import { getSpace, Size } from '../space';
 import styled from 'styled-components';
 
 export interface PatternListItemProps {
@@ -12,7 +13,7 @@ export interface PatternListItemProps {
 const StyledPatternListItem = styled.div`
 	display: flex;
 	align-items: center;
-	padding: 10px;
+	padding: ${getSpace(Size.S)}px;
 	border: 1px solid ${colors.grey90.toString()};
 	border-radius: 3px;
 	background: ${colors.white.toString()};
@@ -22,12 +23,12 @@ const StyledPatternListItem = styled.div`
 `;
 
 const StyledSVG = styled.svg`
-	margin-right: 20px;
+	margin-right: ${getSpace(Size.L)}px;
 	fill: ${colors.grey70.toString()};
 `;
 
 const StyledIcon = styled(Icon)`
-	margin-right: 20px;
+	margin-right: ${getSpace(Size.L)}px;
 `;
 
 const PatternListItem: React.StatelessComponent<PatternListItemProps> = props => (