diff --git a/src/rsg-components/ComponentsList/ComponentsListRenderer.js b/src/rsg-components/ComponentsList/ComponentsListRenderer.js index 5c3fa4314..1a890dbe5 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, 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', @@ -22,12 +22,12 @@ const styles = ({ base, font, small }) => ({ 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', }, diff --git a/src/rsg-components/Editor/EditorLoaderRenderer.js b/src/rsg-components/Editor/EditorLoaderRenderer.js index 3f2793a4d..5506b3d58 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 }) => ({ +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', 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 a37c415d3..70e4ff694 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, fonts }) => ({ heading: { color: base, position: 'relative', overflow: 'visible', - marginLeft: -30, - paddingLeft: 30, + marginLeft: `-${spacing[4]}`, + paddingLeft: spacing[4], '&:hover > $anchor': { isolate: false, visibility: 'visible', @@ -17,11 +17,12 @@ export const styles = ({ base, link, linkHover }) => ({ }, 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', 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 1e02d3ec2..ecad1aaab 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, 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', diff --git a/src/rsg-components/Message/MessageRenderer.js b/src/rsg-components/Message/MessageRenderer.js index e5c89e95d..1cdc9c5be 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[4], }, }); diff --git a/src/rsg-components/Methods/Methods.css b/src/rsg-components/Methods/Methods.css deleted file mode 100644 index 718d5ad64..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: 15px; - padding-top: 6px; - vertical-align: top; - font-size: 13px; -} -.cellHeading { - padding-right: 15px; - padding-bottom: 6px; - text-align: left; - font-size: 13px; -} -.cellDesc { - padding-left: 15px; -} - -.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 1a6802687..895c9ac37 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, 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, }, }); diff --git a/src/rsg-components/Playground/PlaygroundRenderer.js b/src/rsg-components/Playground/PlaygroundRenderer.js index aa23ef142..49a6b3ce0 100644 --- a/src/rsg-components/Playground/PlaygroundRenderer.js +++ b/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', }, diff --git a/src/rsg-components/PlaygroundError/PlaygroundErrorRenderer.js b/src/rsg-components/PlaygroundError/PlaygroundErrorRenderer.js index 798bdb7b4..bb29bc32f 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 }) => ({ +const styles = ({ monospace, white, errorBackground, spacing, fonts }) => ({ root: { - margin: [[-15, -15, -18]], + margin: `-${spacing[2]}`, + marginBottom: -20, // it needs this to fill all the space fontFamily: monospace, color: white, backgroundColor: errorBackground, - padding: 15, + padding: spacing[2], 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 91318b8bb..44843e26e 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, fonts }) => ({ table: { width: '100%', borderCollapse: 'collapse', @@ -20,42 +20,42 @@ const styles = ({ base, font, border, light, lightest, name, type }) => ({ }, cell: { color: base, - paddingRight: 15, - paddingTop: 6, + paddingRight: spacing[2], + paddingTop: spacing[0], verticalAlign: 'top', fontFamily: font, - fontSize: 13, + fontSize: fonts.size12, }, cellHeading: { color: base, - paddingRight: 15, - paddingBottom: 6, + paddingRight: spacing[2], + paddingBottom: spacing[0], textAlign: 'left', fontFamily: font, fontWeight: 'bold', - fontSize: 13, + fontSize: fonts.size12, }, cellDesc: { color: base, width: '99%', - 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, }, 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 923dfa9a0..b5006ebf7 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 }) => ({ +const styles = ({ base, font, monospace, light, spacing, fonts }) => ({ root: { - marginBottom: 50, - fontSize: 16, + marginBottom: spacing[6], + fontSize: fonts.h6, '&:hover $isolatedLink': { isolate: false, opacity: 1, @@ -15,14 +15,14 @@ const styles = ({ base, font, monospace, light }) => ({ }, header: { position: 'relative', - marginBottom: 20, + marginBottom: spacing[3], }, isolatedLink: { position: 'absolute', top: 0, right: 0, fontFamily: font, - fontSize: 14, + fontSize: fonts.size14, opacity: 0, transition: 'opacity ease-in-out .15s .2s', }, @@ -30,14 +30,14 @@ const styles = ({ base, font, monospace, light }) => ({ color: base, position: 'relative', marginTop: 0, - marginBottom: 7, + marginBottom: spacing[1], fontFamily: font, - fontSize: 36, + fontSize: fonts.h1, fontWeight: 'normal', }, heading: { color: base, - margin: [[0, 0, 7]], + margin: [[0, 0, spacing[1]]], fontFamily: font, fontSize: 20, fontWeight: 'normal', @@ -45,15 +45,15 @@ const styles = ({ base, font, monospace, light }) => ({ pathLine: { fontFamily: monospace, color: light, - fontSize: 14, + fontSize: fonts.size14, }, description: { color: base, - marginBottom: 20, - fontSize: 16, + marginBottom: spacing[3], + fontSize: fonts.h6, }, subsection: { - marginBottom: 30, + marginBottom: spacing[4], }, }); diff --git a/src/rsg-components/Section/SectionRenderer.js b/src/rsg-components/Section/SectionRenderer.js index 518874857..489453156 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 }) => ({ +const styles = ({ font, spacing, fonts }) => ({ root: { marginBottom: 50, }, heading: { - margin: [[0, 0, 20]], + margin: [[0, 0, spacing[3]]], 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 635eef9e1..970b501d6 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, fonts }) => ({ root: { color: base, backgroundColor: baseBackground, }, hasSidebar: { - paddingLeft: 200, + paddingLeft: sidebarWidth, [small]: { paddingLeft: 0, }, }, content: { maxWidth: 1000, - padding: [[15, 30]], + padding: [[spacing[2], spacing[4]]], margin: [[0, 'auto']], [small]: { - padding: 15, + padding: spacing[2], }, display: 'block', }, @@ -33,24 +33,24 @@ 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[0], }, }, logo: { - padding: 15, + padding: spacing[2], borderBottom: [[1, border, 'solid']], }, footer: { 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 a535d5b8a..750d770ab 100644 --- a/src/rsg-components/TableOfContents/TableOfContentsRenderer.js +++ b/src/rsg-components/TableOfContents/TableOfContentsRenderer.js @@ -2,21 +2,21 @@ 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, fonts }) => ({ root: { fontFamily: font, }, search: { - padding: 15, + padding: spacing[2], }, input: { display: 'block', width: '100%', - padding: [[6, 12]], + padding: [[spacing[0], spacing[1]]], 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/rsg-components/Welcome/WelcomeRenderer.js b/src/rsg-components/Welcome/WelcomeRenderer.js index 7c63d74d6..c33615359 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[4], }, }); diff --git a/src/styles/theme.js b/src/styles/theme.js index c312d3f34..fc04c2ba9 100644 --- a/src/styles/theme.js +++ b/src/styles/theme.js @@ -1,3 +1,5 @@ +export const spacingFactor = 8; + export const white = '#fff'; export const base = '#333'; export const light = '#999'; @@ -14,3 +16,25 @@ export const font = ['-apple-system', 'BlinkMacSystemFont', '"Segoe UI"', '"Robo '"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 = { + 0: `${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 = { + size12: 12, + size14: 14, + size18: 18, + h6: 16, + h5: 16, + h4: 21, + h3: 26, + h2: 32, + h1: 36, +};