Add constant spacing

src/rsg-components/ComponentsList/ComponentsListRenderer.js

@@ -4,30 +4,30 @@ import cx from 'classnames';
 import Link from 'rsg-components/Link';
 import Styled from 'rsg-components/Styled';
 
-const styles = ({ base, font, small }) => ({
+const styles = ({ base, font, small, spacing, fonts }) => ({
 	list: {
 		margin: 0,
-		paddingLeft: 15,
+		paddingLeft: spacing[2],
 	},
 	item: {
 		color: base,
 		display: 'block',
-		margin: [[7, 0, 7, 0]],
+		margin: [[spacing[1], 0, spacing[1], 0]],
 		fontFamily: font,
-		fontSize: 15,
+		fontSize: fonts.size14,
 		listStyle: 'none',
 		overflow: 'hidden',
 		textOverflow: 'ellipsis',
 	},
 	isChild: {
 		[small]: {
 			display: 'inline-block',
-			margin: [[0, 7, 0, 0]],
+			margin: [[0, spacing[1], 0, 0]],
 		},
 	},
 	heading: {
 		color: base,
-		marginTop: 7,
+		marginTop: spacing[1],
 		fontFamily: font,
 		fontWeight: 'bold',
 	},

src/rsg-components/Editor/EditorLoaderRenderer.js

@@ -2,11 +2,11 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import Styled from 'rsg-components/Styled';
 
-const styles = ({ font, monospace, light, codeBackground }) => ({
+const styles = ({ font, monospace, light, codeBackground, spacing, fonts }) => ({
 	root: {
-		padding: [[7, 16, 10, 7]],
+		padding: [[spacing[1], spacing[2], spacing[1], spacing[1]]],
 		fontFamily: font,
-		fontSize: 12,
+		fontSize: fonts.size12,
 		color: light,
 		backgroundColor: codeBackground,
 	},
@@ -15,8 +15,8 @@ const styles = ({ font, monospace, light, codeBackground }) => ({
 		'.CodeMirror.CodeMirror': {
 			fontFamily: monospace,
 			height: 'auto',
-			padding: [[5, 12]],
-			fontSize: 12,
+			padding: [[spacing[0], spacing[2]]],
+			fontSize: fonts.size12,
 		},
 		'.CodeMirror-scroll.CodeMirror-scroll': {
 			height: 'auto',

src/rsg-components/ExamplePlaceholder/ExamplePlaceholderRenderer.js

@@ -4,10 +4,10 @@ import Styled from 'rsg-components/Styled';
 import Markdown from 'rsg-components/Markdown';
 import { DOCS_DOCUMENTING } from '../../../scripts/consts';
 
-const styles = ({ font, light, lightest }) => ({
+const styles = ({ font, light, lightest, fonts }) => ({
 	button: {
 		padding: 0,
-		fontSize: 15,
+		fontSize: fonts.size14,
 		fontFamily: font,
 		textDecoration: 'underline',
 		color: light,

src/rsg-components/Heading/HeadingRenderer.js

@@ -3,25 +3,26 @@ import PropTypes from 'prop-types';
 import cx from 'classnames';
 import Styled from 'rsg-components/Styled';
 
-export const styles = ({ base, link, linkHover }) => ({
+export const styles = ({ base, link, linkHover, spacing, fonts }) => ({
 	heading: {
 		color: base,
 		position: 'relative',
 		overflow: 'visible',
-		marginLeft: -30,
-		paddingLeft: 30,
+		marginLeft: `-${spacing[4]}`,
+		paddingLeft: spacing[4],
 		'&:hover > $anchor': {
 			isolate: false,
 			visibility: 'visible',
 		},
 	},
 	anchor: {
 		position: 'absolute',
-		bottom: '.125em',
-		left: 10,
+		top: '50%',
+		transform: 'translateY(-50%)',
+		left: spacing[1],
 		display: 'block',
 		color: link,
-		fontSize: '0.65em',
+		fontSize: fonts.h3,
 		fontWeight: 'normal',
 		textDecoration: 'none',
 		visibility: 'hidden',

src/rsg-components/Logo/LogoRenderer.js

@@ -2,12 +2,12 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import Styled from 'rsg-components/Styled';
 
-const styles = ({ base, font }) => ({
+const styles = ({ base, font, fonts }) => ({
 	logo: {
 		color: base,
 		margin: 0,
 		fontFamily: font,
-		fontSize: 18,
+		fontSize: fonts.size18,
 		fontWeight: 'normal',
 	},
 });

src/rsg-components/Markdown/Markdown.js

@@ -65,7 +65,7 @@ const getInlineOverrides = memoize(classes => {
 	};
 }, () => 'getInlineOverrides');
 
-const styles = ({ base, font, monospace, link, linkHover, border, codeBackground }) => ({
+const styles = ({ base, font, fonts, monospace, link, linkHover, border, codeBackground, spacing }) => ({
 	base: {
 		color: base,
 		fontFamily: font,
@@ -75,38 +75,38 @@ const styles = ({ base, font, monospace, link, linkHover, border, codeBackground
 		color: base,
 		fontFamily: font,
 		fontSize: 'inherit',
-		margin: [[0, 0, 15, 0]],
+		margin: [[0, 0, spacing.spacing16, 0]],
 		lineHeight: 1.5,
 	},
 	a: linkStyles({ link, linkHover }).link,
 	h1: {
 		composes: '$para',
-		fontSize: 36,
+		fontSize: fonts.h1,
 		fontWeight: 'normal',
 	},
 	h2: {
 		composes: '$para',
-		fontSize: 32,
+		fontSize: fonts.h2,
 		fontWeight: 'normal',
 	},
 	h3: {
 		composes: '$para',
-		fontSize: 26,
+		fontSize: fonts.h3,
 		fontWeight: 'normal',
 	},
 	h4: {
 		composes: '$para',
-		fontSize: 21,
+		fontSize: fonts.h4,
 		fontWeight: 'normal',
 	},
 	h5: {
 		composes: '$para',
-		fontSize: 16,
+		fontSize: fonts.h5,
 		fontWeight: 'normal',
 	},
 	h6: {
 		composes: '$para',
-		fontSize: 16,
+		fontSize: fonts.h6,
 		fontWeight: 'normal',
 		fontStyle: 'italic',
 	},
@@ -115,12 +115,12 @@ const styles = ({ base, font, monospace, link, linkHover, border, codeBackground
 	},
 	ul: {
 		composes: '$para',
-		paddingLeft: 20,
+		paddingLeft: spacing[3],
 	},
 	ol: {
 		composes: '$para',
 		listStyleType: 'decimal',
-		paddingLeft: 20,
+		paddingLeft: spacing[3],
 	},
 	li: {
 		composes: '$base',
@@ -134,8 +134,8 @@ const styles = ({ base, font, monospace, link, linkHover, border, codeBackground
 	},
 	blockquote: {
 		composes: '$para',
-		fontSize: 14,
-		margin: [[15, 30]],
+		fontSize: fonts.size14,
+		margin: [[spacing[2], spacing[4]]],
 		padding: 0,
 	},
 	hr: {
@@ -163,8 +163,8 @@ const styles = ({ base, font, monospace, link, linkHover, border, codeBackground
 		composes: '$para',
 		backgroundColor: codeBackground,
 		border: [[1, border, 'solid']],
-		padding: [[12, 15]],
-		fontSize: 12,
+		padding: [[spacing[1], spacing[2]]],
+		fontSize: fonts.size12,
 		borderRadius: 3,
 		whiteSpace: 'pre',
 	},
@@ -179,8 +179,8 @@ const styles = ({ base, font, monospace, link, linkHover, border, codeBackground
 	},
 	td: {
 		fontFamily: font,
-		padding: [[6, 15, 6, 0]],
-		fontSize: 14,
+		padding: [[spacing[0], spacing[2], spacing[0], 0]],
+		fontSize: fonts.size14,
 	},
 	th: {
 		composes: '$td',

src/rsg-components/Message/MessageRenderer.js

@@ -3,9 +3,9 @@ import PropTypes from 'prop-types';
 import Markdown from 'rsg-components/Markdown';
 import Styled from 'rsg-components/Styled';
 
-const styles = () => ({
+const styles = (spacing) => ({
 	root: {
-		marginBottom: 30,
+		marginBottom: spacing[4],
 	},
 });
 

src/rsg-components/Methods/MethodsRenderer.js

@@ -6,7 +6,7 @@ import Styled from 'rsg-components/Styled';
 import Group from 'react-group';
 import cx from 'classnames';
 
-const styles = ({ base, font, border, light, name, type }) => ({
+const styles = ({ base, font, border, light, name, type, spacing, fonts }) => ({
 	table: {
 		width: '100%',
 		borderCollapse: 'collapse',
@@ -20,36 +20,36 @@ const styles = ({ base, font, border, light, name, type }) => ({
 	},
 	cell: {
 		color: base,
-		paddingRight: 15,
-		paddingTop: 6,
+		paddingRight: spacing[2],
+		paddingTop: spacing[1],
 		verticalAlign: 'top',
 		fontFamily: font,
-		fontSize: 13,
+		fontSize: fonts.size12,
 	},
 	cellHeading: {
 		color: base,
-		paddingRight: 15,
-		paddingBottom: 6,
+		paddingRight: spacing[2],
+		paddingBottom: spacing[1],
 		textAlign: 'left',
 		fontFamily: font,
 		fontWeight: 'bold',
-		fontSize: 13,
+		fontSize: fonts.size12,
 	},
 	cellDesc: {
 		width: '70%',
-		paddingLeft: 15,
+		paddingLeft: spacing[2],
 	},
 	required: {
 		fontFamily: font,
-		fontSize: 13,
+		fontSize: fonts.size12,
 		color: light,
 	},
 	name: {
-		fontSize: 13,
+		fontSize: fonts.size12,
 		color: name,
 	},
 	type: {
-		fontSize: 13,
+		fontSize: fonts.size12,
 		color: type,
 	},
 });

src/rsg-components/Playground/PlaygroundRenderer.js

@@ -5,29 +5,30 @@ import Link from 'rsg-components/Link';
 import Preview from 'rsg-components/Preview';
 import Styled from 'rsg-components/Styled';
 
-const styles = ({ base, font, link, linkHover, border, baseBackground, codeBackground }) => ({
+const styles = ({ base, font, link, linkHover, border, baseBackground, codeBackground, spacing, fonts }) => ({
 	root: {
 		color: base,
 		position: 'relative',
-		marginBottom: 30,
+		marginBottom: spacing[4],
 		border: [[1, border, 'solid']],
 		borderRadius: '3px 3px 0 3px',
+		marginTop: spacing[0],
 		'&:hover $isolatedLink': {
 			isolate: false,
 			opacity: 1,
 		},
 	},
 	preview: {
-		marginBottom: 3,
-		padding: 15,
+		marginBottom: spacing[0],
+		padding: spacing[2],
 	},
 	codeToggle: {
 		position: 'absolute',
 		right: -1,
 		margin: 0,
-		padding: [[6, 8]],
+		padding: [[spacing[0], spacing[1]]],
 		fontFamily: font,
-		fontSize: 14,
+		fontSize: fonts.size14,
 		lineHeight: 1,
 		color: link,
 		border: [[1, border, 'solid']],
@@ -52,9 +53,9 @@ const styles = ({ base, font, link, linkHover, border, baseBackground, codeBackg
 		position: 'absolute',
 		top: 0,
 		right: 0,
-		padding: [[6, 8]],
+		padding: [[spacing[0], spacing[1]]],
 		fontFamily: font,
-		fontSize: 14,
+		fontSize: fonts.size14,
 		opacity: 0,
 		transition: 'opacity ease-in-out .15s .2s',
 	},