From 41345433aaa37ae37a5140e60ee231fcd1f10567 Mon Sep 17 00:00:00 2001 From: Sara Vieira Date: Sat, 6 May 2017 18:34:17 +0100 Subject: [PATCH 1/5] Add constant spacing --- .../ComponentsList/ComponentsListRenderer.js | 12 ++++++------ src/rsg-components/Editor/EditorLoaderRenderer.js | 6 +++--- src/rsg-components/Heading/HeadingRenderer.js | 11 ++++++----- src/rsg-components/Markdown/Markdown.js | 14 +++++++------- src/rsg-components/Message/MessageRenderer.js | 4 ++-- src/rsg-components/Methods/Methods.css | 10 +++++----- src/rsg-components/Methods/MethodsRenderer.js | 12 ++++++------ .../Playground/PlaygroundRenderer.js | 13 +++++++------ .../PlaygroundError/PlaygroundErrorRenderer.js | 6 +++--- src/rsg-components/Props/PropsRenderer.js | 12 ++++++------ .../ReactComponent/ReactComponentRenderer.js | 14 +++++++------- src/rsg-components/Section/SectionRenderer.js | 4 ++-- .../StyleGuide/StyleGuideRenderer.js | 14 +++++++------- .../TableOfContents/TableOfContentsRenderer.js | 6 +++--- src/rsg-components/Welcome/WelcomeRenderer.js | 4 ++-- src/styles/theme.js | 14 +++++++++++++- 16 files changed, 85 insertions(+), 71 deletions(-) diff --git a/src/rsg-components/ComponentsList/ComponentsListRenderer.js b/src/rsg-components/ComponentsList/ComponentsListRenderer.js index 5c3fa4314..959bddbc6 100644 --- a/src/rsg-components/ComponentsList/ComponentsListRenderer.js +++ b/src/rsg-components/ComponentsList/ComponentsListRenderer.js @@ -4,17 +4,17 @@ 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 }) => ({ list: { margin: 0, - paddingLeft: 15, + paddingLeft: spacing.space16, }, item: { color: base, display: 'block', - margin: [[7, 0, 7, 0]], + margin: [[spacing.space8, 0, spacing.space8, 0]], fontFamily: font, - fontSize: 15, + fontSize: spacing.space16, listStyle: 'none', overflow: 'hidden', textOverflow: 'ellipsis', @@ -22,12 +22,12 @@ const styles = ({ base, font, small }) => ({ isChild: { [small]: { display: 'inline-block', - margin: [[0, 7, 0, 0]], + margin: [[0, spacing.space8, 0, 0]], }, }, heading: { color: base, - marginTop: 7, + marginTop: spacing.space8, fontFamily: font, fontWeight: 'bold', }, diff --git a/src/rsg-components/Editor/EditorLoaderRenderer.js b/src/rsg-components/Editor/EditorLoaderRenderer.js index 3f2793a4d..9c3df0991 100644 --- a/src/rsg-components/Editor/EditorLoaderRenderer.js +++ b/src/rsg-components/Editor/EditorLoaderRenderer.js @@ -2,9 +2,9 @@ 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 }) => ({ root: { - padding: [[7, 16, 10, 7]], + padding: [[spacing.space8, spacing.space16, spacing.space8, spacing.space8]], fontFamily: font, fontSize: 12, color: light, @@ -15,7 +15,7 @@ const styles = ({ font, monospace, light, codeBackground }) => ({ '.CodeMirror.CodeMirror': { fontFamily: monospace, height: 'auto', - padding: [[5, 12]], + padding: [[spacing.space4, spacing.space16]], fontSize: 12, }, '.CodeMirror-scroll.CodeMirror-scroll': { diff --git a/src/rsg-components/Heading/HeadingRenderer.js b/src/rsg-components/Heading/HeadingRenderer.js index a37c415d3..cb4c71d7d 100644 --- a/src/rsg-components/Heading/HeadingRenderer.js +++ b/src/rsg-components/Heading/HeadingRenderer.js @@ -3,13 +3,13 @@ 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 }) => ({ heading: { color: base, position: 'relative', overflow: 'visible', - marginLeft: -30, - paddingLeft: 30, + marginLeft: -32, + paddingLeft: spacing.space32, '&:hover > $anchor': { isolate: false, visibility: 'visible', @@ -17,8 +17,9 @@ export const styles = ({ base, link, linkHover }) => ({ }, anchor: { position: 'absolute', - bottom: '.125em', - left: 10, + top: '50%', + transform: 'translateY(-50%)', + left: spacing.space8, display: 'block', color: link, fontSize: '0.65em', diff --git a/src/rsg-components/Markdown/Markdown.js b/src/rsg-components/Markdown/Markdown.js index 1e02d3ec2..5c48db8ca 100644 --- a/src/rsg-components/Markdown/Markdown.js +++ b/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, monospace, link, linkHover, border, codeBackground, spacing }) => ({ base: { color: base, fontFamily: font, @@ -75,7 +75,7 @@ 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, @@ -115,12 +115,12 @@ const styles = ({ base, font, monospace, link, linkHover, border, codeBackground }, ul: { composes: '$para', - paddingLeft: 20, + paddingLeft: spacing.space24, }, ol: { composes: '$para', listStyleType: 'decimal', - paddingLeft: 20, + paddingLeft: spacing.space24, }, li: { composes: '$base', @@ -135,7 +135,7 @@ const styles = ({ base, font, monospace, link, linkHover, border, codeBackground blockquote: { composes: '$para', fontSize: 14, - margin: [[15, 30]], + margin: [[spacing.space16, spacing.space32]], padding: 0, }, hr: { @@ -163,7 +163,7 @@ const styles = ({ base, font, monospace, link, linkHover, border, codeBackground composes: '$para', backgroundColor: codeBackground, border: [[1, border, 'solid']], - padding: [[12, 15]], + padding: [[spacing.space8, spacing.space16]], fontSize: 12, borderRadius: 3, whiteSpace: 'pre', @@ -179,7 +179,7 @@ const styles = ({ base, font, monospace, link, linkHover, border, codeBackground }, td: { fontFamily: font, - padding: [[6, 15, 6, 0]], + padding: [[spacing.space4, spacing.space16, spacing.space4, 0]], fontSize: 14, }, th: { diff --git a/src/rsg-components/Message/MessageRenderer.js b/src/rsg-components/Message/MessageRenderer.js index e5c89e95d..0bd10769f 100644 --- a/src/rsg-components/Message/MessageRenderer.js +++ b/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.space32, }, }); diff --git a/src/rsg-components/Methods/Methods.css b/src/rsg-components/Methods/Methods.css index 718d5ad64..1a369fa5e 100644 --- a/src/rsg-components/Methods/Methods.css +++ b/src/rsg-components/Methods/Methods.css @@ -9,19 +9,19 @@ .tableBody { } .cell { - padding-right: 15px; - padding-top: 6px; + padding-right: 16px; + padding-top: 8px; vertical-align: top; font-size: 13px; } .cellHeading { - padding-right: 15px; - padding-bottom: 6px; + padding-right: 16px; + padding-bottom: 8px; text-align: left; font-size: 13px; } .cellDesc { - padding-left: 15px; + padding-left: 16px; } .methodParam { diff --git a/src/rsg-components/Methods/MethodsRenderer.js b/src/rsg-components/Methods/MethodsRenderer.js index 1a6802687..26f4fa63c 100644 --- a/src/rsg-components/Methods/MethodsRenderer.js +++ b/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 }) => ({ table: { width: '100%', borderCollapse: 'collapse', @@ -20,16 +20,16 @@ const styles = ({ base, font, border, light, name, type }) => ({ }, cell: { color: base, - paddingRight: 15, - paddingTop: 6, + paddingRight: spacing.space16, + paddingTop: spacing.space8, verticalAlign: 'top', fontFamily: font, fontSize: 13, }, cellHeading: { color: base, - paddingRight: 15, - paddingBottom: 6, + paddingRight: spacing.space16, + paddingTop: spacing.space8, textAlign: 'left', fontFamily: font, fontWeight: 'bold', @@ -37,7 +37,7 @@ const styles = ({ base, font, border, light, name, type }) => ({ }, cellDesc: { width: '70%', - paddingLeft: 15, + paddingLeft: spacing.space16, }, required: { fontFamily: font, diff --git a/src/rsg-components/Playground/PlaygroundRenderer.js b/src/rsg-components/Playground/PlaygroundRenderer.js index aa23ef142..740837efa 100644 --- a/src/rsg-components/Playground/PlaygroundRenderer.js +++ b/src/rsg-components/Playground/PlaygroundRenderer.js @@ -5,27 +5,28 @@ 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 }) => ({ root: { color: base, position: 'relative', - marginBottom: 30, + marginBottom: spacing.space32, border: [[1, border, 'solid']], borderRadius: '3px 3px 0 3px', + marginTop: spacing.space4, '&:hover $isolatedLink': { isolate: false, opacity: 1, }, }, preview: { - marginBottom: 3, - padding: 15, + marginBottom: spacing.space4, + padding: spacing.space16, }, codeToggle: { position: 'absolute', right: -1, margin: 0, - padding: [[6, 8]], + padding: [[spacing.space4, spacing.space8]], fontFamily: font, fontSize: 14, lineHeight: 1, @@ -52,7 +53,7 @@ const styles = ({ base, font, link, linkHover, border, baseBackground, codeBackg position: 'absolute', top: 0, right: 0, - padding: [[6, 8]], + padding: [[spacing.space4, spacing.space8]], fontFamily: font, fontSize: 14, opacity: 0, diff --git a/src/rsg-components/PlaygroundError/PlaygroundErrorRenderer.js b/src/rsg-components/PlaygroundError/PlaygroundErrorRenderer.js index 798bdb7b4..8df493d24 100644 --- a/src/rsg-components/PlaygroundError/PlaygroundErrorRenderer.js +++ b/src/rsg-components/PlaygroundError/PlaygroundErrorRenderer.js @@ -2,13 +2,13 @@ import React from 'react'; import PropTypes from 'prop-types'; import Styled from 'rsg-components/Styled'; -const styles = ({ monospace, white, errorBackground }) => ({ +const styles = ({ monospace, white, errorBackground, spacing }) => ({ root: { - margin: [[-15, -15, -18]], + margin: [[-16, -16, -16]], fontFamily: monospace, color: white, backgroundColor: errorBackground, - padding: 15, + padding: spacing.space16, lineHeight: 1.2, fontSize: 13, whiteSpace: 'pre', diff --git a/src/rsg-components/Props/PropsRenderer.js b/src/rsg-components/Props/PropsRenderer.js index 91318b8bb..24102319f 100644 --- a/src/rsg-components/Props/PropsRenderer.js +++ b/src/rsg-components/Props/PropsRenderer.js @@ -6,7 +6,7 @@ import Styled from 'rsg-components/Styled'; import Group from 'react-group'; import { unquote, getType, showSpaces } from './util'; -const styles = ({ base, font, border, light, lightest, name, type }) => ({ +const styles = ({ base, font, border, light, lightest, name, type, spacing }) => ({ table: { width: '100%', borderCollapse: 'collapse', @@ -20,16 +20,16 @@ const styles = ({ base, font, border, light, lightest, name, type }) => ({ }, cell: { color: base, - paddingRight: 15, - paddingTop: 6, + paddingRight: spacing.space16, + paddingTop: spacing.space4, verticalAlign: 'top', fontFamily: font, fontSize: 13, }, cellHeading: { color: base, - paddingRight: 15, - paddingBottom: 6, + paddingRight: spacing.space16, + paddingBottom: spacing.space4, textAlign: 'left', fontFamily: font, fontWeight: 'bold', @@ -38,7 +38,7 @@ const styles = ({ base, font, border, light, lightest, name, type }) => ({ cellDesc: { color: base, width: '99%', - paddingLeft: 15, + paddingLeft: spacing.space16, }, required: { fontFamily: font, diff --git a/src/rsg-components/ReactComponent/ReactComponentRenderer.js b/src/rsg-components/ReactComponent/ReactComponentRenderer.js index 923dfa9a0..ebef21b44 100644 --- a/src/rsg-components/ReactComponent/ReactComponentRenderer.js +++ b/src/rsg-components/ReactComponent/ReactComponentRenderer.js @@ -4,9 +4,9 @@ import Link from 'rsg-components/Link'; import Heading from 'rsg-components/Heading'; import Styled from 'rsg-components/Styled'; -const styles = ({ base, font, monospace, light }) => ({ +const styles = ({ base, font, monospace, light, spacing }) => ({ root: { - marginBottom: 50, + marginBottom: spacing.space48, fontSize: 16, '&:hover $isolatedLink': { isolate: false, @@ -15,7 +15,7 @@ const styles = ({ base, font, monospace, light }) => ({ }, header: { position: 'relative', - marginBottom: 20, + marginBottom: spacing.space24, }, isolatedLink: { position: 'absolute', @@ -30,14 +30,14 @@ const styles = ({ base, font, monospace, light }) => ({ color: base, position: 'relative', marginTop: 0, - marginBottom: 7, + marginBottom: spacing.space8, fontFamily: font, fontSize: 36, fontWeight: 'normal', }, heading: { color: base, - margin: [[0, 0, 7]], + margin: [[0, 0, spacing.space8]], fontFamily: font, fontSize: 20, fontWeight: 'normal', @@ -49,11 +49,11 @@ const styles = ({ base, font, monospace, light }) => ({ }, description: { color: base, - marginBottom: 20, + marginBottom: spacing.space24, fontSize: 16, }, subsection: { - marginBottom: 30, + marginBottom: spacing.space32, }, }); diff --git a/src/rsg-components/Section/SectionRenderer.js b/src/rsg-components/Section/SectionRenderer.js index 518874857..eefcac6d7 100644 --- a/src/rsg-components/Section/SectionRenderer.js +++ b/src/rsg-components/Section/SectionRenderer.js @@ -3,12 +3,12 @@ import PropTypes from 'prop-types'; import Styled from 'rsg-components/Styled'; import Heading from 'rsg-components/Heading'; -const styles = ({ font }) => ({ +const styles = ({ font, spacing }) => ({ root: { marginBottom: 50, }, heading: { - margin: [[0, 0, 20]], + margin: [[0, 0, spacing.space24]], fontFamily: font, fontSize: 38, fontWeight: 'bold', diff --git a/src/rsg-components/StyleGuide/StyleGuideRenderer.js b/src/rsg-components/StyleGuide/StyleGuideRenderer.js index 635eef9e1..42183d177 100644 --- a/src/rsg-components/StyleGuide/StyleGuideRenderer.js +++ b/src/rsg-components/StyleGuide/StyleGuideRenderer.js @@ -5,23 +5,23 @@ import Markdown from 'rsg-components/Markdown'; import Styled from 'rsg-components/Styled'; import cx from 'classnames'; -const styles = ({ font, base, light, border, baseBackground, codeBackground, small }) => ({ +const styles = ({ font, base, light, sidebarWidth, border, baseBackground, codeBackground, small, spacing }) => ({ root: { color: base, backgroundColor: baseBackground, }, hasSidebar: { - paddingLeft: 200, + paddingLeft: sidebarWidth, [small]: { paddingLeft: 0, }, }, content: { maxWidth: 1000, - padding: [[15, 30]], + padding: [[spacing.space16, spacing.space32]], margin: [[0, 'auto']], [small]: { - padding: 15, + padding: spacing.space16, }, display: 'block', }, @@ -33,17 +33,17 @@ const styles = ({ font, base, light, border, baseBackground, codeBackground, sma top: 0, left: 0, bottom: 0, - width: 200, + width: sidebarWidth, overflow: 'auto', [small]: { position: 'static', width: 'auto', borderWidth: [[1, 0, 0, 0]], - paddingBottom: 5, + paddingBottom: spacing.space4, }, }, logo: { - padding: 15, + padding: spacing.space16, borderBottom: [[1, border, 'solid']], }, footer: { diff --git a/src/rsg-components/TableOfContents/TableOfContentsRenderer.js b/src/rsg-components/TableOfContents/TableOfContentsRenderer.js index a535d5b8a..fd81bceec 100644 --- a/src/rsg-components/TableOfContents/TableOfContentsRenderer.js +++ b/src/rsg-components/TableOfContents/TableOfContentsRenderer.js @@ -2,17 +2,17 @@ import React from 'react'; import PropTypes from 'prop-types'; import Styled from 'rsg-components/Styled'; -const styles = ({ font, base, border, link, baseBackground }) => ({ +const styles = ({ font, base, border, link, baseBackground, spacing }) => ({ root: { fontFamily: font, }, search: { - padding: 15, + padding: spacing.space16, }, input: { display: 'block', width: '100%', - padding: [[6, 12]], + padding: [[spacing.space4, spacing.space8]], color: base, backgroundColor: baseBackground, fontFamily: font, diff --git a/src/rsg-components/Welcome/WelcomeRenderer.js b/src/rsg-components/Welcome/WelcomeRenderer.js index 7c63d74d6..f9548607d 100644 --- a/src/rsg-components/Welcome/WelcomeRenderer.js +++ b/src/rsg-components/Welcome/WelcomeRenderer.js @@ -4,11 +4,11 @@ import Markdown from 'rsg-components/Markdown'; import Styled from 'rsg-components/Styled'; import { DOCS_COMPONENTS } from '../../../scripts/consts'; -const styles = () => ({ +const styles = (spacing) => ({ root: { maxWidth: 900, margin: [[0, 'auto']], - padding: 30, + padding: spacing.space32, }, }); diff --git a/src/styles/theme.js b/src/styles/theme.js index c312d3f34..39350c5ff 100644 --- a/src/styles/theme.js +++ b/src/styles/theme.js @@ -1,3 +1,5 @@ +const spacingFactor = 8; + export const white = '#fff'; export const base = '#333'; export const light = '#999'; @@ -10,7 +12,17 @@ export const type = '#b77daa'; export const baseBackground = '#fff'; export const errorBackground = '#c00'; export const codeBackground = '#f5f5f5'; -export const font = ['-apple-system', 'BlinkMacSystemFont', '"Segoe UI"', '"Roboto"', '"Oxygen"', '"Ubuntu"', +export const font = ['"Roboto"', '-apple-system', 'BlinkMacSystemFont', '"Segoe UI"', '"Roboto"', '"Oxygen"', '"Ubuntu"', '"Cantarell"', '"Fira Sans"', '"Droid Sans"', '"Helvetica Neue"', 'sans-serif']; export const monospace = ['Consolas', '"Liberation Mono"', 'Menlo', 'monospace']; export const small = '@media (max-width: 600px)'; +export const sidebarWidth = 200; +export const spacing = { + space4: `${spacingFactor / 2}px`, // 4 + space8: `${spacingFactor}px`, // 8 + space16: `${spacingFactor * 2}px`, // 16 + space24: `${spacingFactor * 3}px`, // 24 + space32: `${spacingFactor * 4}px`, // 32 + space40: `${spacingFactor * 5}px`, // 40 + space48: `${spacingFactor * 6}px`, // 48 +}; From 90af30a6f8a1c62f37c6c4c179392e67e4fc34c4 Mon Sep 17 00:00:00 2001 From: Sara Vieira Date: Sun, 7 May 2017 12:24:45 +0100 Subject: [PATCH 2/5] requested changes --- .../sections/src/components/Button/Readme.md | 2 +- .../ComponentsList/ComponentsListRenderer.js | 4 +-- .../Editor/EditorLoaderRenderer.js | 6 ++-- .../ExamplePlaceholderRenderer.js | 4 +-- src/rsg-components/Heading/HeadingRenderer.js | 6 ++-- src/rsg-components/Logo/LogoRenderer.js | 4 +-- src/rsg-components/Markdown/Markdown.js | 20 +++++------ src/rsg-components/Methods/Methods.css | 36 ------------------- src/rsg-components/Methods/MethodsRenderer.js | 14 ++++---- .../Playground/PlaygroundRenderer.js | 6 ++-- .../PlaygroundErrorRenderer.js | 7 ++-- src/rsg-components/Props/PropsRenderer.js | 14 ++++---- .../ReactComponent/ReactComponentRenderer.js | 12 +++---- src/rsg-components/Section/SectionRenderer.js | 4 +-- .../StyleGuide/StyleGuideRenderer.js | 4 +-- .../TableOfContentsRenderer.js | 4 +-- src/styles/theme.js | 12 +++++++ 17 files changed, 68 insertions(+), 91 deletions(-) delete mode 100644 src/rsg-components/Methods/Methods.css diff --git a/examples/sections/src/components/Button/Readme.md b/examples/sections/src/components/Button/Readme.md index a584ff0c5..1fee45550 100644 --- a/examples/sections/src/components/Button/Readme.md +++ b/examples/sections/src/components/Button/Readme.md @@ -1,6 +1,6 @@ Basic button: - + jhdsjk Big pink button: diff --git a/src/rsg-components/ComponentsList/ComponentsListRenderer.js b/src/rsg-components/ComponentsList/ComponentsListRenderer.js index 959bddbc6..b685f1658 100644 --- a/src/rsg-components/ComponentsList/ComponentsListRenderer.js +++ b/src/rsg-components/ComponentsList/ComponentsListRenderer.js @@ -4,7 +4,7 @@ import cx from 'classnames'; import Link from 'rsg-components/Link'; import Styled from 'rsg-components/Styled'; -const styles = ({ base, font, small, spacing }) => ({ +const styles = ({ base, font, small, spacing, fonts }) => ({ list: { margin: 0, paddingLeft: spacing.space16, @@ -14,7 +14,7 @@ const styles = ({ base, font, small, spacing }) => ({ display: 'block', margin: [[spacing.space8, 0, spacing.space8, 0]], fontFamily: font, - fontSize: spacing.space16, + fontSize: fonts.size14, listStyle: 'none', overflow: 'hidden', textOverflow: 'ellipsis', diff --git a/src/rsg-components/Editor/EditorLoaderRenderer.js b/src/rsg-components/Editor/EditorLoaderRenderer.js index 9c3df0991..9d5477e53 100644 --- a/src/rsg-components/Editor/EditorLoaderRenderer.js +++ b/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, spacing }) => ({ +const styles = ({ font, monospace, light, codeBackground, spacing, fonts }) => ({ root: { padding: [[spacing.space8, spacing.space16, spacing.space8, spacing.space8]], fontFamily: font, - fontSize: 12, + fontSize: fonts.size12, color: light, backgroundColor: codeBackground, }, @@ -16,7 +16,7 @@ const styles = ({ font, monospace, light, codeBackground, spacing }) => ({ fontFamily: monospace, height: 'auto', padding: [[spacing.space4, spacing.space16]], - fontSize: 12, + fontSize: fonts.size12, }, '.CodeMirror-scroll.CodeMirror-scroll': { height: 'auto', diff --git a/src/rsg-components/ExamplePlaceholder/ExamplePlaceholderRenderer.js b/src/rsg-components/ExamplePlaceholder/ExamplePlaceholderRenderer.js index 44b57a2f3..4cdb47be4 100644 --- a/src/rsg-components/ExamplePlaceholder/ExamplePlaceholderRenderer.js +++ b/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, diff --git a/src/rsg-components/Heading/HeadingRenderer.js b/src/rsg-components/Heading/HeadingRenderer.js index cb4c71d7d..3123e6c18 100644 --- a/src/rsg-components/Heading/HeadingRenderer.js +++ b/src/rsg-components/Heading/HeadingRenderer.js @@ -3,12 +3,12 @@ import PropTypes from 'prop-types'; import cx from 'classnames'; import Styled from 'rsg-components/Styled'; -export const styles = ({ base, link, linkHover, spacing }) => ({ +export const styles = ({ base, link, linkHover, spacing, fonts }) => ({ heading: { color: base, position: 'relative', overflow: 'visible', - marginLeft: -32, + marginLeft: `-${spacing.space32}`, paddingLeft: spacing.space32, '&:hover > $anchor': { isolate: false, @@ -22,7 +22,7 @@ export const styles = ({ base, link, linkHover, spacing }) => ({ left: spacing.space8, display: 'block', color: link, - fontSize: '0.65em', + fontSize: fonts.h3, fontWeight: 'normal', textDecoration: 'none', visibility: 'hidden', diff --git a/src/rsg-components/Logo/LogoRenderer.js b/src/rsg-components/Logo/LogoRenderer.js index 7f8129eaa..28468a869 100644 --- a/src/rsg-components/Logo/LogoRenderer.js +++ b/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', }, }); diff --git a/src/rsg-components/Markdown/Markdown.js b/src/rsg-components/Markdown/Markdown.js index 5c48db8ca..70bd72342 100644 --- a/src/rsg-components/Markdown/Markdown.js +++ b/src/rsg-components/Markdown/Markdown.js @@ -65,7 +65,7 @@ const getInlineOverrides = memoize(classes => { }; }, () => 'getInlineOverrides'); -const styles = ({ base, font, monospace, link, linkHover, border, codeBackground, spacing }) => ({ +const styles = ({ base, font, fonts, monospace, link, linkHover, border, codeBackground, spacing }) => ({ base: { color: base, fontFamily: font, @@ -81,32 +81,32 @@ const styles = ({ base, font, monospace, link, linkHover, border, codeBackground 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', }, @@ -134,7 +134,7 @@ const styles = ({ base, font, monospace, link, linkHover, border, codeBackground }, blockquote: { composes: '$para', - fontSize: 14, + fontSize: fonts.size14, margin: [[spacing.space16, spacing.space32]], padding: 0, }, @@ -164,7 +164,7 @@ const styles = ({ base, font, monospace, link, linkHover, border, codeBackground backgroundColor: codeBackground, border: [[1, border, 'solid']], padding: [[spacing.space8, spacing.space16]], - fontSize: 12, + fontSize: fonts.size12, borderRadius: 3, whiteSpace: 'pre', }, @@ -180,7 +180,7 @@ const styles = ({ base, font, monospace, link, linkHover, border, codeBackground td: { fontFamily: font, padding: [[spacing.space4, spacing.space16, spacing.space4, 0]], - fontSize: 14, + fontSize: fonts.size14, }, th: { composes: '$td', diff --git a/src/rsg-components/Methods/Methods.css b/src/rsg-components/Methods/Methods.css deleted file mode 100644 index 1a369fa5e..000000000 --- a/src/rsg-components/Methods/Methods.css +++ /dev/null @@ -1,36 +0,0 @@ -.table { - width: 100%; - border-collapse: collapse; -} -.tableHead { - composes: border from "../../styles/colors.css"; - border-width: 0 0 1px 0; -} -.tableBody { -} -.cell { - padding-right: 16px; - padding-top: 8px; - vertical-align: top; - font-size: 13px; -} -.cellHeading { - padding-right: 16px; - padding-bottom: 8px; - text-align: left; - font-size: 13px; -} -.cellDesc { - padding-left: 16px; -} - -.methodParam { - min-width: 200px; -} - -.name { - composes: name from "../../styles/colors.css"; -} -.type { - composes: type from "../../styles/colors.css"; -} diff --git a/src/rsg-components/Methods/MethodsRenderer.js b/src/rsg-components/Methods/MethodsRenderer.js index 26f4fa63c..84828ed25 100644 --- a/src/rsg-components/Methods/MethodsRenderer.js +++ b/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, spacing }) => ({ +const styles = ({ base, font, border, light, name, type, spacing, fonts }) => ({ table: { width: '100%', borderCollapse: 'collapse', @@ -24,16 +24,16 @@ const styles = ({ base, font, border, light, name, type, spacing }) => ({ paddingTop: spacing.space8, verticalAlign: 'top', fontFamily: font, - fontSize: 13, + fontSize: fonts.size12, }, cellHeading: { color: base, paddingRight: spacing.space16, - paddingTop: spacing.space8, + paddingBottom: spacing.space8, textAlign: 'left', fontFamily: font, fontWeight: 'bold', - fontSize: 13, + fontSize: fonts.size12, }, cellDesc: { width: '70%', @@ -41,15 +41,15 @@ const styles = ({ base, font, border, light, name, type, spacing }) => ({ }, 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, }, }); diff --git a/src/rsg-components/Playground/PlaygroundRenderer.js b/src/rsg-components/Playground/PlaygroundRenderer.js index 740837efa..bd531ef74 100644 --- a/src/rsg-components/Playground/PlaygroundRenderer.js +++ b/src/rsg-components/Playground/PlaygroundRenderer.js @@ -5,7 +5,7 @@ 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, spacing }) => ({ +const styles = ({ base, font, link, linkHover, border, baseBackground, codeBackground, spacing, fonts }) => ({ root: { color: base, position: 'relative', @@ -28,7 +28,7 @@ const styles = ({ base, font, link, linkHover, border, baseBackground, codeBackg margin: 0, padding: [[spacing.space4, spacing.space8]], fontFamily: font, - fontSize: 14, + fontSize: fonts.size14, lineHeight: 1, color: link, border: [[1, border, 'solid']], @@ -55,7 +55,7 @@ const styles = ({ base, font, link, linkHover, border, baseBackground, codeBackg right: 0, padding: [[spacing.space4, spacing.space8]], fontFamily: font, - fontSize: 14, + fontSize: fonts.size14, opacity: 0, transition: 'opacity ease-in-out .15s .2s', }, diff --git a/src/rsg-components/PlaygroundError/PlaygroundErrorRenderer.js b/src/rsg-components/PlaygroundError/PlaygroundErrorRenderer.js index 8df493d24..c33a1b83c 100644 --- a/src/rsg-components/PlaygroundError/PlaygroundErrorRenderer.js +++ b/src/rsg-components/PlaygroundError/PlaygroundErrorRenderer.js @@ -2,15 +2,16 @@ import React from 'react'; import PropTypes from 'prop-types'; import Styled from 'rsg-components/Styled'; -const styles = ({ monospace, white, errorBackground, spacing }) => ({ +const styles = ({ monospace, white, errorBackground, spacing, fonts }) => ({ root: { - margin: [[-16, -16, -16]], + margin: `-${spacing.space16}`, + marginBottom: -20, // it needs this to fill all the space fontFamily: monospace, color: white, backgroundColor: errorBackground, padding: spacing.space16, lineHeight: 1.2, - fontSize: 13, + fontSize: fonts.size12, whiteSpace: 'pre', }, }); diff --git a/src/rsg-components/Props/PropsRenderer.js b/src/rsg-components/Props/PropsRenderer.js index 24102319f..3a6ff359f 100644 --- a/src/rsg-components/Props/PropsRenderer.js +++ b/src/rsg-components/Props/PropsRenderer.js @@ -6,7 +6,7 @@ import Styled from 'rsg-components/Styled'; import Group from 'react-group'; import { unquote, getType, showSpaces } from './util'; -const styles = ({ base, font, border, light, lightest, name, type, spacing }) => ({ +const styles = ({ base, font, border, light, lightest, name, type, spacing, fonts }) => ({ table: { width: '100%', borderCollapse: 'collapse', @@ -24,7 +24,7 @@ const styles = ({ base, font, border, light, lightest, name, type, spacing }) => paddingTop: spacing.space4, verticalAlign: 'top', fontFamily: font, - fontSize: 13, + fontSize: fonts.size12, }, cellHeading: { color: base, @@ -33,7 +33,7 @@ const styles = ({ base, font, border, light, lightest, name, type, spacing }) => textAlign: 'left', fontFamily: font, fontWeight: 'bold', - fontSize: 13, + fontSize: fonts.size12, }, cellDesc: { color: base, @@ -42,20 +42,20 @@ const styles = ({ base, font, border, light, lightest, name, type, spacing }) => }, 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, }, function: { fontFamily: font, - fontSize: 13, + fontSize: fonts.size12, color: light, borderBottom: `1px dotted ${lightest}`, }, diff --git a/src/rsg-components/ReactComponent/ReactComponentRenderer.js b/src/rsg-components/ReactComponent/ReactComponentRenderer.js index ebef21b44..87a11d334 100644 --- a/src/rsg-components/ReactComponent/ReactComponentRenderer.js +++ b/src/rsg-components/ReactComponent/ReactComponentRenderer.js @@ -4,10 +4,10 @@ import Link from 'rsg-components/Link'; import Heading from 'rsg-components/Heading'; import Styled from 'rsg-components/Styled'; -const styles = ({ base, font, monospace, light, spacing }) => ({ +const styles = ({ base, font, monospace, light, spacing, fonts }) => ({ root: { marginBottom: spacing.space48, - fontSize: 16, + fontSize: fonts.h6, '&:hover $isolatedLink': { isolate: false, opacity: 1, @@ -22,7 +22,7 @@ const styles = ({ base, font, monospace, light, spacing }) => ({ top: 0, right: 0, fontFamily: font, - fontSize: 14, + fontSize: fonts.size14, opacity: 0, transition: 'opacity ease-in-out .15s .2s', }, @@ -32,7 +32,7 @@ const styles = ({ base, font, monospace, light, spacing }) => ({ marginTop: 0, marginBottom: spacing.space8, fontFamily: font, - fontSize: 36, + fontSize: fonts.h1, fontWeight: 'normal', }, heading: { @@ -45,12 +45,12 @@ const styles = ({ base, font, monospace, light, spacing }) => ({ pathLine: { fontFamily: monospace, color: light, - fontSize: 14, + fontSize: fonts.size14, }, description: { color: base, marginBottom: spacing.space24, - fontSize: 16, + fontSize: fonts.h6, }, subsection: { marginBottom: spacing.space32, diff --git a/src/rsg-components/Section/SectionRenderer.js b/src/rsg-components/Section/SectionRenderer.js index eefcac6d7..dd481901f 100644 --- a/src/rsg-components/Section/SectionRenderer.js +++ b/src/rsg-components/Section/SectionRenderer.js @@ -3,14 +3,14 @@ import PropTypes from 'prop-types'; import Styled from 'rsg-components/Styled'; import Heading from 'rsg-components/Heading'; -const styles = ({ font, spacing }) => ({ +const styles = ({ font, spacing, fonts }) => ({ root: { marginBottom: 50, }, heading: { margin: [[0, 0, spacing.space24]], fontFamily: font, - fontSize: 38, + fontSize: fonts.h1 + 2, fontWeight: 'bold', }, }); diff --git a/src/rsg-components/StyleGuide/StyleGuideRenderer.js b/src/rsg-components/StyleGuide/StyleGuideRenderer.js index 42183d177..7fc9ff513 100644 --- a/src/rsg-components/StyleGuide/StyleGuideRenderer.js +++ b/src/rsg-components/StyleGuide/StyleGuideRenderer.js @@ -5,7 +5,7 @@ import Markdown from 'rsg-components/Markdown'; import Styled from 'rsg-components/Styled'; import cx from 'classnames'; -const styles = ({ font, base, light, sidebarWidth, border, baseBackground, codeBackground, small, spacing }) => ({ +const styles = ({ font, base, light, sidebarWidth, border, baseBackground, codeBackground, small, spacing, fonts }) => ({ root: { color: base, backgroundColor: baseBackground, @@ -50,7 +50,7 @@ const styles = ({ font, base, light, sidebarWidth, border, baseBackground, codeB display: 'block', color: light, fontFamily: font, - fontSize: 12, + fontSize: fonts.fontSize12, }, }); diff --git a/src/rsg-components/TableOfContents/TableOfContentsRenderer.js b/src/rsg-components/TableOfContents/TableOfContentsRenderer.js index fd81bceec..1a6f94dc7 100644 --- a/src/rsg-components/TableOfContents/TableOfContentsRenderer.js +++ b/src/rsg-components/TableOfContents/TableOfContentsRenderer.js @@ -2,7 +2,7 @@ import React from 'react'; import PropTypes from 'prop-types'; import Styled from 'rsg-components/Styled'; -const styles = ({ font, base, border, link, baseBackground, spacing }) => ({ +const styles = ({ font, base, border, link, baseBackground, spacing, fonts }) => ({ root: { fontFamily: font, }, @@ -16,7 +16,7 @@ const styles = ({ font, base, border, link, baseBackground, spacing }) => ({ color: base, backgroundColor: baseBackground, fontFamily: font, - fontSize: 15, + fontSize: fonts.size14, border: [[1, border, 'solid']], borderRadius: 2, transition: 'border-color ease-in-out .15s', diff --git a/src/styles/theme.js b/src/styles/theme.js index 39350c5ff..0ac902501 100644 --- a/src/styles/theme.js +++ b/src/styles/theme.js @@ -26,3 +26,15 @@ export const spacing = { space40: `${spacingFactor * 5}px`, // 40 space48: `${spacingFactor * 6}px`, // 48 }; + +export const fonts = { + size12: 12, + size14: 14, + size18: 18, + h6: 16, + h5: 16, + h4: 21, + h3: 26, + h2: 32, + h1: 36, +}; From 7ab7577a80936b2ae918bc6e5c594c37fd271371 Mon Sep 17 00:00:00 2001 From: Sara Vieira Date: Sun, 7 May 2017 12:39:21 +0100 Subject: [PATCH 3/5] rename spacing --- .../sections/src/components/Button/Readme.md | 2 +- .../ComponentsList/ComponentsListRenderer.js | 8 ++++---- .../Editor/EditorLoaderRenderer.js | 4 ++-- src/rsg-components/Heading/HeadingRenderer.js | 6 +++--- src/rsg-components/Markdown/Markdown.js | 10 +++++----- src/rsg-components/Message/MessageRenderer.js | 2 +- src/rsg-components/Methods/MethodsRenderer.js | 10 +++++----- .../Playground/PlaygroundRenderer.js | 12 ++++++------ .../PlaygroundError/PlaygroundErrorRenderer.js | 4 ++-- src/rsg-components/Props/PropsRenderer.js | 10 +++++----- .../ReactComponent/ReactComponentRenderer.js | 12 ++++++------ src/rsg-components/Section/SectionRenderer.js | 2 +- .../StyleGuide/StyleGuideRenderer.js | 8 ++++---- .../TableOfContents/TableOfContentsRenderer.js | 4 ++-- src/rsg-components/Welcome/WelcomeRenderer.js | 2 +- src/styles/theme.js | 16 ++++++++-------- 16 files changed, 56 insertions(+), 56 deletions(-) diff --git a/examples/sections/src/components/Button/Readme.md b/examples/sections/src/components/Button/Readme.md index 1fee45550..a584ff0c5 100644 --- a/examples/sections/src/components/Button/Readme.md +++ b/examples/sections/src/components/Button/Readme.md @@ -1,6 +1,6 @@ Basic button: - jhdsjk + Big pink button: diff --git a/src/rsg-components/ComponentsList/ComponentsListRenderer.js b/src/rsg-components/ComponentsList/ComponentsListRenderer.js index b685f1658..1a890dbe5 100644 --- a/src/rsg-components/ComponentsList/ComponentsListRenderer.js +++ b/src/rsg-components/ComponentsList/ComponentsListRenderer.js @@ -7,12 +7,12 @@ import Styled from 'rsg-components/Styled'; const styles = ({ base, font, small, spacing, fonts }) => ({ list: { margin: 0, - paddingLeft: spacing.space16, + paddingLeft: spacing[2], }, item: { color: base, display: 'block', - margin: [[spacing.space8, 0, spacing.space8, 0]], + margin: [[spacing[1], 0, spacing[1], 0]], fontFamily: font, fontSize: fonts.size14, listStyle: 'none', @@ -22,12 +22,12 @@ const styles = ({ base, font, small, spacing, fonts }) => ({ isChild: { [small]: { display: 'inline-block', - margin: [[0, spacing.space8, 0, 0]], + margin: [[0, spacing[1], 0, 0]], }, }, heading: { color: base, - marginTop: spacing.space8, + marginTop: spacing[1], fontFamily: font, fontWeight: 'bold', }, diff --git a/src/rsg-components/Editor/EditorLoaderRenderer.js b/src/rsg-components/Editor/EditorLoaderRenderer.js index 9d5477e53..776017f7a 100644 --- a/src/rsg-components/Editor/EditorLoaderRenderer.js +++ b/src/rsg-components/Editor/EditorLoaderRenderer.js @@ -4,7 +4,7 @@ import Styled from 'rsg-components/Styled'; const styles = ({ font, monospace, light, codeBackground, spacing, fonts }) => ({ root: { - padding: [[spacing.space8, spacing.space16, spacing.space8, spacing.space8]], + padding: [[spacing[1], spacing[2], spacing[1], spacing[1]]], fontFamily: font, fontSize: fonts.size12, color: light, @@ -15,7 +15,7 @@ const styles = ({ font, monospace, light, codeBackground, spacing, fonts }) => ( '.CodeMirror.CodeMirror': { fontFamily: monospace, height: 'auto', - padding: [[spacing.space4, spacing.space16]], + padding: [[spacing.half, spacing[2]]], fontSize: fonts.size12, }, '.CodeMirror-scroll.CodeMirror-scroll': { diff --git a/src/rsg-components/Heading/HeadingRenderer.js b/src/rsg-components/Heading/HeadingRenderer.js index 3123e6c18..70e4ff694 100644 --- a/src/rsg-components/Heading/HeadingRenderer.js +++ b/src/rsg-components/Heading/HeadingRenderer.js @@ -8,8 +8,8 @@ export const styles = ({ base, link, linkHover, spacing, fonts }) => ({ color: base, position: 'relative', overflow: 'visible', - marginLeft: `-${spacing.space32}`, - paddingLeft: spacing.space32, + marginLeft: `-${spacing[4]}`, + paddingLeft: spacing[4], '&:hover > $anchor': { isolate: false, visibility: 'visible', @@ -19,7 +19,7 @@ export const styles = ({ base, link, linkHover, spacing, fonts }) => ({ position: 'absolute', top: '50%', transform: 'translateY(-50%)', - left: spacing.space8, + left: spacing[1], display: 'block', color: link, fontSize: fonts.h3, diff --git a/src/rsg-components/Markdown/Markdown.js b/src/rsg-components/Markdown/Markdown.js index 70bd72342..b32a7e9cf 100644 --- a/src/rsg-components/Markdown/Markdown.js +++ b/src/rsg-components/Markdown/Markdown.js @@ -115,12 +115,12 @@ const styles = ({ base, font, fonts, monospace, link, linkHover, border, codeBac }, ul: { composes: '$para', - paddingLeft: spacing.space24, + paddingLeft: spacing[3], }, ol: { composes: '$para', listStyleType: 'decimal', - paddingLeft: spacing.space24, + paddingLeft: spacing[3], }, li: { composes: '$base', @@ -135,7 +135,7 @@ const styles = ({ base, font, fonts, monospace, link, linkHover, border, codeBac blockquote: { composes: '$para', fontSize: fonts.size14, - margin: [[spacing.space16, spacing.space32]], + margin: [[spacing[2], spacing[4]]], padding: 0, }, hr: { @@ -163,7 +163,7 @@ const styles = ({ base, font, fonts, monospace, link, linkHover, border, codeBac composes: '$para', backgroundColor: codeBackground, border: [[1, border, 'solid']], - padding: [[spacing.space8, spacing.space16]], + padding: [[spacing[1], spacing[2]]], fontSize: fonts.size12, borderRadius: 3, whiteSpace: 'pre', @@ -179,7 +179,7 @@ const styles = ({ base, font, fonts, monospace, link, linkHover, border, codeBac }, td: { fontFamily: font, - padding: [[spacing.space4, spacing.space16, spacing.space4, 0]], + padding: [[spacing.half, spacing[2], spacing.half, 0]], fontSize: fonts.size14, }, th: { diff --git a/src/rsg-components/Message/MessageRenderer.js b/src/rsg-components/Message/MessageRenderer.js index 0bd10769f..1cdc9c5be 100644 --- a/src/rsg-components/Message/MessageRenderer.js +++ b/src/rsg-components/Message/MessageRenderer.js @@ -5,7 +5,7 @@ import Styled from 'rsg-components/Styled'; const styles = (spacing) => ({ root: { - marginBottom: spacing.space32, + marginBottom: spacing[4], }, }); diff --git a/src/rsg-components/Methods/MethodsRenderer.js b/src/rsg-components/Methods/MethodsRenderer.js index 84828ed25..895c9ac37 100644 --- a/src/rsg-components/Methods/MethodsRenderer.js +++ b/src/rsg-components/Methods/MethodsRenderer.js @@ -20,16 +20,16 @@ const styles = ({ base, font, border, light, name, type, spacing, fonts }) => ({ }, cell: { color: base, - paddingRight: spacing.space16, - paddingTop: spacing.space8, + paddingRight: spacing[2], + paddingTop: spacing[1], verticalAlign: 'top', fontFamily: font, fontSize: fonts.size12, }, cellHeading: { color: base, - paddingRight: spacing.space16, - paddingBottom: spacing.space8, + paddingRight: spacing[2], + paddingBottom: spacing[1], textAlign: 'left', fontFamily: font, fontWeight: 'bold', @@ -37,7 +37,7 @@ const styles = ({ base, font, border, light, name, type, spacing, fonts }) => ({ }, cellDesc: { width: '70%', - paddingLeft: spacing.space16, + paddingLeft: spacing[2], }, required: { fontFamily: font, diff --git a/src/rsg-components/Playground/PlaygroundRenderer.js b/src/rsg-components/Playground/PlaygroundRenderer.js index bd531ef74..19e81c952 100644 --- a/src/rsg-components/Playground/PlaygroundRenderer.js +++ b/src/rsg-components/Playground/PlaygroundRenderer.js @@ -9,24 +9,24 @@ const styles = ({ base, font, link, linkHover, border, baseBackground, codeBackg root: { color: base, position: 'relative', - marginBottom: spacing.space32, + marginBottom: spacing[4], border: [[1, border, 'solid']], borderRadius: '3px 3px 0 3px', - marginTop: spacing.space4, + marginTop: spacing.half, '&:hover $isolatedLink': { isolate: false, opacity: 1, }, }, preview: { - marginBottom: spacing.space4, - padding: spacing.space16, + marginBottom: spacing.half, + padding: spacing[2], }, codeToggle: { position: 'absolute', right: -1, margin: 0, - padding: [[spacing.space4, spacing.space8]], + padding: [[spacing.half, spacing[1]]], fontFamily: font, fontSize: fonts.size14, lineHeight: 1, @@ -53,7 +53,7 @@ const styles = ({ base, font, link, linkHover, border, baseBackground, codeBackg position: 'absolute', top: 0, right: 0, - padding: [[spacing.space4, spacing.space8]], + padding: [[spacing.half, spacing[1]]], fontFamily: font, fontSize: fonts.size14, opacity: 0, diff --git a/src/rsg-components/PlaygroundError/PlaygroundErrorRenderer.js b/src/rsg-components/PlaygroundError/PlaygroundErrorRenderer.js index c33a1b83c..bb29bc32f 100644 --- a/src/rsg-components/PlaygroundError/PlaygroundErrorRenderer.js +++ b/src/rsg-components/PlaygroundError/PlaygroundErrorRenderer.js @@ -4,12 +4,12 @@ import Styled from 'rsg-components/Styled'; const styles = ({ monospace, white, errorBackground, spacing, fonts }) => ({ root: { - margin: `-${spacing.space16}`, + margin: `-${spacing[2]}`, marginBottom: -20, // it needs this to fill all the space fontFamily: monospace, color: white, backgroundColor: errorBackground, - padding: spacing.space16, + padding: spacing[2], lineHeight: 1.2, fontSize: fonts.size12, whiteSpace: 'pre', diff --git a/src/rsg-components/Props/PropsRenderer.js b/src/rsg-components/Props/PropsRenderer.js index 3a6ff359f..2021c8ba8 100644 --- a/src/rsg-components/Props/PropsRenderer.js +++ b/src/rsg-components/Props/PropsRenderer.js @@ -20,16 +20,16 @@ const styles = ({ base, font, border, light, lightest, name, type, spacing, font }, cell: { color: base, - paddingRight: spacing.space16, - paddingTop: spacing.space4, + paddingRight: spacing[2], + paddingTop: spacing.half, verticalAlign: 'top', fontFamily: font, fontSize: fonts.size12, }, cellHeading: { color: base, - paddingRight: spacing.space16, - paddingBottom: spacing.space4, + paddingRight: spacing[2], + paddingBottom: spacing.half, textAlign: 'left', fontFamily: font, fontWeight: 'bold', @@ -38,7 +38,7 @@ const styles = ({ base, font, border, light, lightest, name, type, spacing, font cellDesc: { color: base, width: '99%', - paddingLeft: spacing.space16, + paddingLeft: spacing[2], }, required: { fontFamily: font, diff --git a/src/rsg-components/ReactComponent/ReactComponentRenderer.js b/src/rsg-components/ReactComponent/ReactComponentRenderer.js index 87a11d334..b5006ebf7 100644 --- a/src/rsg-components/ReactComponent/ReactComponentRenderer.js +++ b/src/rsg-components/ReactComponent/ReactComponentRenderer.js @@ -6,7 +6,7 @@ import Styled from 'rsg-components/Styled'; const styles = ({ base, font, monospace, light, spacing, fonts }) => ({ root: { - marginBottom: spacing.space48, + marginBottom: spacing[6], fontSize: fonts.h6, '&:hover $isolatedLink': { isolate: false, @@ -15,7 +15,7 @@ const styles = ({ base, font, monospace, light, spacing, fonts }) => ({ }, header: { position: 'relative', - marginBottom: spacing.space24, + marginBottom: spacing[3], }, isolatedLink: { position: 'absolute', @@ -30,14 +30,14 @@ const styles = ({ base, font, monospace, light, spacing, fonts }) => ({ color: base, position: 'relative', marginTop: 0, - marginBottom: spacing.space8, + marginBottom: spacing[1], fontFamily: font, fontSize: fonts.h1, fontWeight: 'normal', }, heading: { color: base, - margin: [[0, 0, spacing.space8]], + margin: [[0, 0, spacing[1]]], fontFamily: font, fontSize: 20, fontWeight: 'normal', @@ -49,11 +49,11 @@ const styles = ({ base, font, monospace, light, spacing, fonts }) => ({ }, description: { color: base, - marginBottom: spacing.space24, + marginBottom: spacing[3], fontSize: fonts.h6, }, subsection: { - marginBottom: spacing.space32, + marginBottom: spacing[4], }, }); diff --git a/src/rsg-components/Section/SectionRenderer.js b/src/rsg-components/Section/SectionRenderer.js index dd481901f..489453156 100644 --- a/src/rsg-components/Section/SectionRenderer.js +++ b/src/rsg-components/Section/SectionRenderer.js @@ -8,7 +8,7 @@ const styles = ({ font, spacing, fonts }) => ({ marginBottom: 50, }, heading: { - margin: [[0, 0, spacing.space24]], + margin: [[0, 0, spacing[3]]], fontFamily: font, fontSize: fonts.h1 + 2, fontWeight: 'bold', diff --git a/src/rsg-components/StyleGuide/StyleGuideRenderer.js b/src/rsg-components/StyleGuide/StyleGuideRenderer.js index 7fc9ff513..f8c944bec 100644 --- a/src/rsg-components/StyleGuide/StyleGuideRenderer.js +++ b/src/rsg-components/StyleGuide/StyleGuideRenderer.js @@ -18,10 +18,10 @@ const styles = ({ font, base, light, sidebarWidth, border, baseBackground, codeB }, content: { maxWidth: 1000, - padding: [[spacing.space16, spacing.space32]], + padding: [[spacing[2], spacing[4]]], margin: [[0, 'auto']], [small]: { - padding: spacing.space16, + padding: spacing[2], }, display: 'block', }, @@ -39,11 +39,11 @@ const styles = ({ font, base, light, sidebarWidth, border, baseBackground, codeB position: 'static', width: 'auto', borderWidth: [[1, 0, 0, 0]], - paddingBottom: spacing.space4, + paddingBottom: spacing.half, }, }, logo: { - padding: spacing.space16, + padding: spacing[2], borderBottom: [[1, border, 'solid']], }, footer: { diff --git a/src/rsg-components/TableOfContents/TableOfContentsRenderer.js b/src/rsg-components/TableOfContents/TableOfContentsRenderer.js index 1a6f94dc7..06048e277 100644 --- a/src/rsg-components/TableOfContents/TableOfContentsRenderer.js +++ b/src/rsg-components/TableOfContents/TableOfContentsRenderer.js @@ -7,12 +7,12 @@ const styles = ({ font, base, border, link, baseBackground, spacing, fonts }) => fontFamily: font, }, search: { - padding: spacing.space16, + padding: spacing[2], }, input: { display: 'block', width: '100%', - padding: [[spacing.space4, spacing.space8]], + padding: [[spacing.half, spacing[1]]], color: base, backgroundColor: baseBackground, fontFamily: font, diff --git a/src/rsg-components/Welcome/WelcomeRenderer.js b/src/rsg-components/Welcome/WelcomeRenderer.js index f9548607d..c33615359 100644 --- a/src/rsg-components/Welcome/WelcomeRenderer.js +++ b/src/rsg-components/Welcome/WelcomeRenderer.js @@ -8,7 +8,7 @@ const styles = (spacing) => ({ root: { maxWidth: 900, margin: [[0, 'auto']], - padding: spacing.space32, + padding: spacing[4], }, }); diff --git a/src/styles/theme.js b/src/styles/theme.js index 0ac902501..1eace9b00 100644 --- a/src/styles/theme.js +++ b/src/styles/theme.js @@ -1,4 +1,4 @@ -const spacingFactor = 8; +export const spacingFactor = 8; export const white = '#fff'; export const base = '#333'; @@ -18,13 +18,13 @@ export const monospace = ['Consolas', '"Liberation Mono"', 'Menlo', 'monospace'] export const small = '@media (max-width: 600px)'; export const sidebarWidth = 200; export const spacing = { - space4: `${spacingFactor / 2}px`, // 4 - space8: `${spacingFactor}px`, // 8 - space16: `${spacingFactor * 2}px`, // 16 - space24: `${spacingFactor * 3}px`, // 24 - space32: `${spacingFactor * 4}px`, // 32 - space40: `${spacingFactor * 5}px`, // 40 - space48: `${spacingFactor * 6}px`, // 48 + half: `${spacingFactor / 2}px`, // 4 + 1: `${spacingFactor}px`, // 8 + 2: `${spacingFactor * 2}px`, // 16 + 3: `${spacingFactor * 3}px`, // 24 + 4: `${spacingFactor * 4}px`, // 32 + 5: `${spacingFactor * 5}px`, // 40 + 6: `${spacingFactor * 6}px`, // 48 }; export const fonts = { From 46e8cf5e915f31ea75c92d696d93e6bfcf4e255a Mon Sep 17 00:00:00 2001 From: Sara Vieira Date: Sun, 7 May 2017 12:46:37 +0100 Subject: [PATCH 4/5] rename spacing --- src/rsg-components/Editor/EditorLoaderRenderer.js | 2 +- src/rsg-components/Markdown/Markdown.js | 2 +- src/rsg-components/Playground/PlaygroundRenderer.js | 8 ++++---- src/rsg-components/Props/PropsRenderer.js | 4 ++-- src/rsg-components/StyleGuide/StyleGuideRenderer.js | 2 +- .../TableOfContents/TableOfContentsRenderer.js | 2 +- src/styles/theme.js | 2 +- 7 files changed, 11 insertions(+), 11 deletions(-) diff --git a/src/rsg-components/Editor/EditorLoaderRenderer.js b/src/rsg-components/Editor/EditorLoaderRenderer.js index 776017f7a..5506b3d58 100644 --- a/src/rsg-components/Editor/EditorLoaderRenderer.js +++ b/src/rsg-components/Editor/EditorLoaderRenderer.js @@ -15,7 +15,7 @@ const styles = ({ font, monospace, light, codeBackground, spacing, fonts }) => ( '.CodeMirror.CodeMirror': { fontFamily: monospace, height: 'auto', - padding: [[spacing.half, spacing[2]]], + padding: [[spacing[0], spacing[2]]], fontSize: fonts.size12, }, '.CodeMirror-scroll.CodeMirror-scroll': { diff --git a/src/rsg-components/Markdown/Markdown.js b/src/rsg-components/Markdown/Markdown.js index b32a7e9cf..ecad1aaab 100644 --- a/src/rsg-components/Markdown/Markdown.js +++ b/src/rsg-components/Markdown/Markdown.js @@ -179,7 +179,7 @@ const styles = ({ base, font, fonts, monospace, link, linkHover, border, codeBac }, td: { fontFamily: font, - padding: [[spacing.half, spacing[2], spacing.half, 0]], + padding: [[spacing[0], spacing[2], spacing[0], 0]], fontSize: fonts.size14, }, th: { diff --git a/src/rsg-components/Playground/PlaygroundRenderer.js b/src/rsg-components/Playground/PlaygroundRenderer.js index 19e81c952..49a6b3ce0 100644 --- a/src/rsg-components/Playground/PlaygroundRenderer.js +++ b/src/rsg-components/Playground/PlaygroundRenderer.js @@ -12,21 +12,21 @@ const styles = ({ base, font, link, linkHover, border, baseBackground, codeBackg marginBottom: spacing[4], border: [[1, border, 'solid']], borderRadius: '3px 3px 0 3px', - marginTop: spacing.half, + marginTop: spacing[0], '&:hover $isolatedLink': { isolate: false, opacity: 1, }, }, preview: { - marginBottom: spacing.half, + marginBottom: spacing[0], padding: spacing[2], }, codeToggle: { position: 'absolute', right: -1, margin: 0, - padding: [[spacing.half, spacing[1]]], + padding: [[spacing[0], spacing[1]]], fontFamily: font, fontSize: fonts.size14, lineHeight: 1, @@ -53,7 +53,7 @@ const styles = ({ base, font, link, linkHover, border, baseBackground, codeBackg position: 'absolute', top: 0, right: 0, - padding: [[spacing.half, spacing[1]]], + padding: [[spacing[0], spacing[1]]], fontFamily: font, fontSize: fonts.size14, opacity: 0, diff --git a/src/rsg-components/Props/PropsRenderer.js b/src/rsg-components/Props/PropsRenderer.js index 2021c8ba8..44843e26e 100644 --- a/src/rsg-components/Props/PropsRenderer.js +++ b/src/rsg-components/Props/PropsRenderer.js @@ -21,7 +21,7 @@ const styles = ({ base, font, border, light, lightest, name, type, spacing, font cell: { color: base, paddingRight: spacing[2], - paddingTop: spacing.half, + paddingTop: spacing[0], verticalAlign: 'top', fontFamily: font, fontSize: fonts.size12, @@ -29,7 +29,7 @@ const styles = ({ base, font, border, light, lightest, name, type, spacing, font cellHeading: { color: base, paddingRight: spacing[2], - paddingBottom: spacing.half, + paddingBottom: spacing[0], textAlign: 'left', fontFamily: font, fontWeight: 'bold', diff --git a/src/rsg-components/StyleGuide/StyleGuideRenderer.js b/src/rsg-components/StyleGuide/StyleGuideRenderer.js index f8c944bec..970b501d6 100644 --- a/src/rsg-components/StyleGuide/StyleGuideRenderer.js +++ b/src/rsg-components/StyleGuide/StyleGuideRenderer.js @@ -39,7 +39,7 @@ const styles = ({ font, base, light, sidebarWidth, border, baseBackground, codeB position: 'static', width: 'auto', borderWidth: [[1, 0, 0, 0]], - paddingBottom: spacing.half, + paddingBottom: spacing[0], }, }, logo: { diff --git a/src/rsg-components/TableOfContents/TableOfContentsRenderer.js b/src/rsg-components/TableOfContents/TableOfContentsRenderer.js index 06048e277..750d770ab 100644 --- a/src/rsg-components/TableOfContents/TableOfContentsRenderer.js +++ b/src/rsg-components/TableOfContents/TableOfContentsRenderer.js @@ -12,7 +12,7 @@ const styles = ({ font, base, border, link, baseBackground, spacing, fonts }) => input: { display: 'block', width: '100%', - padding: [[spacing.half, spacing[1]]], + padding: [[spacing[0], spacing[1]]], color: base, backgroundColor: baseBackground, fontFamily: font, diff --git a/src/styles/theme.js b/src/styles/theme.js index 1eace9b00..c02b0ebcf 100644 --- a/src/styles/theme.js +++ b/src/styles/theme.js @@ -18,7 +18,7 @@ export const monospace = ['Consolas', '"Liberation Mono"', 'Menlo', 'monospace'] export const small = '@media (max-width: 600px)'; export const sidebarWidth = 200; export const spacing = { - half: `${spacingFactor / 2}px`, // 4 + 0: `${spacingFactor / 2}px`, // 4 1: `${spacingFactor}px`, // 8 2: `${spacingFactor * 2}px`, // 16 3: `${spacingFactor * 3}px`, // 24 From a9a8c24c84ffbccf028e0af8c10035cf554bc83b Mon Sep 17 00:00:00 2001 From: Sara Vieira Date: Sun, 7 May 2017 19:39:03 +0100 Subject: [PATCH 5/5] fix fonts --- src/styles/theme.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/styles/theme.js b/src/styles/theme.js index c02b0ebcf..fc04c2ba9 100644 --- a/src/styles/theme.js +++ b/src/styles/theme.js @@ -12,7 +12,7 @@ export const type = '#b77daa'; export const baseBackground = '#fff'; export const errorBackground = '#c00'; export const codeBackground = '#f5f5f5'; -export const font = ['"Roboto"', '-apple-system', 'BlinkMacSystemFont', '"Segoe UI"', '"Roboto"', '"Oxygen"', '"Ubuntu"', +export const font = ['-apple-system', 'BlinkMacSystemFont', '"Segoe UI"', '"Roboto"', '"Oxygen"', '"Ubuntu"', '"Cantarell"', '"Fira Sans"', '"Droid Sans"', '"Helvetica Neue"', 'sans-serif']; export const monospace = ['Consolas', '"Liberation Mono"', 'Menlo', 'monospace']; export const small = '@media (max-width: 600px)';