From 19ed879b000d5f5c9b0d7d60578cdce969d24d20 Mon Sep 17 00:00:00 2001 From: Artem Sapegin Date: Mon, 8 May 2017 10:57:25 +0200 Subject: [PATCH] Refactor: Refactor theme (#432) 1. More consistent naming. 2. Use numbers instead of strings for spacing. 3. Group font families, media queries, colors. 4. Variable for border radius. 5. Fix bugs introduced in the previous commit. --- src/rsg-components/Code/CodeRenderer.js | 4 +- .../ComponentsList/ComponentsListRenderer.js | 22 +++--- .../Editor/EditorLoaderRenderer.js | 18 ++--- .../ExamplePlaceholderRenderer.js | 10 +-- src/rsg-components/Heading/HeadingRenderer.js | 16 ++-- src/rsg-components/Link/LinkRenderer.js | 6 +- src/rsg-components/Logo/LogoRenderer.js | 8 +- src/rsg-components/Markdown/Markdown.js | 56 ++++++------- src/rsg-components/Message/MessageRenderer.js | 4 +- src/rsg-components/Methods/MethodsRenderer.js | 40 +++++----- .../Playground/PlaygroundRenderer.js | 42 +++++----- .../PlaygroundErrorRenderer.js | 15 ++-- src/rsg-components/Props/PropsRenderer.js | 50 ++++++------ .../ReactComponent/ReactComponentRenderer.js | 42 +++++----- src/rsg-components/Section/SectionRenderer.js | 11 ++- .../StyleGuide/StyleGuideRenderer.js | 32 ++++---- .../TableOfContentsRenderer.js | 22 +++--- src/rsg-components/Welcome/WelcomeRenderer.js | 4 +- src/styles/theme.js | 78 +++++++++++-------- 19 files changed, 244 insertions(+), 236 deletions(-) diff --git a/src/rsg-components/Code/CodeRenderer.js b/src/rsg-components/Code/CodeRenderer.js index 35c4d6c2f..c40565ff7 100644 --- a/src/rsg-components/Code/CodeRenderer.js +++ b/src/rsg-components/Code/CodeRenderer.js @@ -2,10 +2,10 @@ import React from 'react'; import PropTypes from 'prop-types'; import Styled from 'rsg-components/Styled'; -const styles = ({ monospace }) => ({ +const styles = ({ fontFamily }) => ({ code: { display: 'inline', - fontFamily: monospace, + fontFamily: fontFamily.monospace, fontSize: 'inherit', color: 'inherit', background: 'transparent', diff --git a/src/rsg-components/ComponentsList/ComponentsListRenderer.js b/src/rsg-components/ComponentsList/ComponentsListRenderer.js index 1a890dbe5..06dc6c94c 100644 --- a/src/rsg-components/ComponentsList/ComponentsListRenderer.js +++ b/src/rsg-components/ComponentsList/ComponentsListRenderer.js @@ -4,31 +4,31 @@ import cx from 'classnames'; import Link from 'rsg-components/Link'; import Styled from 'rsg-components/Styled'; -const styles = ({ base, font, small, spacing, fonts }) => ({ +const styles = ({ color, fontFamily, fontSize, space, mq }) => ({ list: { margin: 0, - paddingLeft: spacing[2], + paddingLeft: space[2], }, item: { - color: base, + color: color.base, display: 'block', - margin: [[spacing[1], 0, spacing[1], 0]], - fontFamily: font, - fontSize: fonts.size14, + margin: [[space[1], 0, space[1], 0]], + fontFamily: fontFamily.base, + fontSize: fontSize.base, listStyle: 'none', overflow: 'hidden', textOverflow: 'ellipsis', }, isChild: { - [small]: { + [mq.small]: { display: 'inline-block', - margin: [[0, spacing[1], 0, 0]], + margin: [[0, space[1], 0, 0]], }, }, heading: { - color: base, - marginTop: spacing[1], - fontFamily: font, + color: color.base, + marginTop: space[1], + fontFamily: fontFamily.base, fontWeight: 'bold', }, }); diff --git a/src/rsg-components/Editor/EditorLoaderRenderer.js b/src/rsg-components/Editor/EditorLoaderRenderer.js index 5506b3d58..697e19906 100644 --- a/src/rsg-components/Editor/EditorLoaderRenderer.js +++ b/src/rsg-components/Editor/EditorLoaderRenderer.js @@ -2,21 +2,21 @@ import React from 'react'; import PropTypes from 'prop-types'; import Styled from 'rsg-components/Styled'; -const styles = ({ font, monospace, light, codeBackground, spacing, fonts }) => ({ +const styles = ({ fontFamily, color, space, fontSize }) => ({ root: { - padding: [[spacing[1], spacing[2], spacing[1], spacing[1]]], - fontFamily: font, - fontSize: fonts.size12, - color: light, - backgroundColor: codeBackground, + padding: [[space[1], space[2], space[1], space[1]]], + fontFamily: fontFamily.base, + fontSize: fontSize.small, + color: color.light, + backgroundColor: color.codeBackground, }, // Tweak CodeMirror styles. Duplicate selectors are for increased specificity '@global': { '.CodeMirror.CodeMirror': { - fontFamily: monospace, + fontFamily: fontFamily.monospace, height: 'auto', - padding: [[spacing[0], spacing[2]]], - fontSize: fonts.size12, + padding: [[space[0], space[2]]], + fontSize: fontSize.small, }, '.CodeMirror-scroll.CodeMirror-scroll': { height: 'auto', diff --git a/src/rsg-components/ExamplePlaceholder/ExamplePlaceholderRenderer.js b/src/rsg-components/ExamplePlaceholder/ExamplePlaceholderRenderer.js index 4cdb47be4..1431793bc 100644 --- a/src/rsg-components/ExamplePlaceholder/ExamplePlaceholderRenderer.js +++ b/src/rsg-components/ExamplePlaceholder/ExamplePlaceholderRenderer.js @@ -4,19 +4,19 @@ import Styled from 'rsg-components/Styled'; import Markdown from 'rsg-components/Markdown'; import { DOCS_DOCUMENTING } from '../../../scripts/consts'; -const styles = ({ font, light, lightest, fonts }) => ({ +const styles = ({ fontFamily, fontSize, color }) => ({ button: { padding: 0, - fontSize: fonts.size14, - fontFamily: font, + fontSize: fontSize.base, + fontFamily: fontFamily.base, textDecoration: 'underline', - color: light, + color: color.light, border: 0, cursor: 'pointer', background: 'transparent', '&:hover, &:active': { isolate: false, - color: lightest, + color: color.lightest, }, }, }); diff --git a/src/rsg-components/Heading/HeadingRenderer.js b/src/rsg-components/Heading/HeadingRenderer.js index 70e4ff694..19e1d06e3 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, spacing, fonts }) => ({ +export const styles = ({ color, space, fontSize }) => ({ heading: { - color: base, + color: color.base, position: 'relative', overflow: 'visible', - marginLeft: `-${spacing[4]}`, - paddingLeft: spacing[4], + marginLeft: -space[4], + paddingLeft: space[4], '&:hover > $anchor': { isolate: false, visibility: 'visible', @@ -19,16 +19,16 @@ export const styles = ({ base, link, linkHover, spacing, fonts }) => ({ position: 'absolute', top: '50%', transform: 'translateY(-50%)', - left: spacing[1], + left: space[1], display: 'block', - color: link, - fontSize: fonts.h3, + color: color.link, + fontSize: fontSize.h3, fontWeight: 'normal', textDecoration: 'none', visibility: 'hidden', '&:hover, &:active': { isolate: false, - color: linkHover, + color: color.linkHover, cursor: 'pointer', }, }, diff --git a/src/rsg-components/Link/LinkRenderer.js b/src/rsg-components/Link/LinkRenderer.js index e0506fc91..e208123bc 100644 --- a/src/rsg-components/Link/LinkRenderer.js +++ b/src/rsg-components/Link/LinkRenderer.js @@ -3,16 +3,16 @@ import PropTypes from 'prop-types'; import cx from 'classnames'; import Styled from 'rsg-components/Styled'; -export const styles = ({ link, linkHover }) => ({ +export const styles = ({ color }) => ({ link: { '&, &:link, &:visited': { fontSize: 'inherit', - color: link, + color: color.link, textDecoration: 'none', }, '&:hover, &:active': { isolate: false, - color: linkHover, + color: color.linkHover, cursor: 'pointer', }, }, diff --git a/src/rsg-components/Logo/LogoRenderer.js b/src/rsg-components/Logo/LogoRenderer.js index 28468a869..c49c558f3 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, fonts }) => ({ +const styles = ({ color, fontFamily, fontSize }) => ({ logo: { - color: base, + color: color.base, margin: 0, - fontFamily: font, - fontSize: fonts.size18, + fontFamily: fontFamily.base, + fontSize: fontSize.h4, fontWeight: 'normal', }, }); diff --git a/src/rsg-components/Markdown/Markdown.js b/src/rsg-components/Markdown/Markdown.js index ecad1aaab..9be4f317a 100644 --- a/src/rsg-components/Markdown/Markdown.js +++ b/src/rsg-components/Markdown/Markdown.js @@ -65,48 +65,48 @@ const getInlineOverrides = memoize(classes => { }; }, () => 'getInlineOverrides'); -const styles = ({ base, font, fonts, monospace, link, linkHover, border, codeBackground, spacing }) => ({ +const styles = ({ space, fontFamily, fontSize, color, borderRadius }) => ({ base: { - color: base, - fontFamily: font, + color: color.base, + fontFamily: fontFamily.base, fontSize: 'inherit', }, para: { - color: base, - fontFamily: font, + color: color.base, + fontFamily: fontFamily.base, fontSize: 'inherit', - margin: [[0, 0, spacing.spacing16, 0]], + margin: [[0, 0, space[2], 0]], lineHeight: 1.5, }, - a: linkStyles({ link, linkHover }).link, + a: linkStyles({ color }).link, h1: { composes: '$para', - fontSize: fonts.h1, + fontSize: fontSize.h1, fontWeight: 'normal', }, h2: { composes: '$para', - fontSize: fonts.h2, + fontSize: fontSize.h2, fontWeight: 'normal', }, h3: { composes: '$para', - fontSize: fonts.h3, + fontSize: fontSize.h3, fontWeight: 'normal', }, h4: { composes: '$para', - fontSize: fonts.h4, + fontSize: fontSize.h4, fontWeight: 'normal', }, h5: { composes: '$para', - fontSize: fonts.h5, + fontSize: fontSize.h5, fontWeight: 'normal', }, h6: { composes: '$para', - fontSize: fonts.h6, + fontSize: fontSize.h6, fontWeight: 'normal', fontStyle: 'italic', }, @@ -115,33 +115,33 @@ const styles = ({ base, font, fonts, monospace, link, linkHover, border, codeBac }, ul: { composes: '$para', - paddingLeft: spacing[3], + paddingLeft: space[3], }, ol: { composes: '$para', listStyleType: 'decimal', - paddingLeft: spacing[3], + paddingLeft: space[3], }, li: { composes: '$base', listStyleType: 'inherit', }, input: { - color: base, + color: color.base, display: 'inline-block', margin: [[0, '0.35em', '0.25em', '-1.2em']], verticalAlign: 'middle', }, blockquote: { composes: '$para', - fontSize: fonts.size14, - margin: [[spacing[2], spacing[4]]], + fontSize: fontSize.base, + margin: [[space[2], space[4]]], padding: 0, }, hr: { composes: '$para', borderWidth: [[0, 0, 1, 0]], - borderColor: border, + borderColor: color.border, borderStyle: 'solid', }, em: { @@ -153,7 +153,7 @@ const styles = ({ base, font, fonts, monospace, link, linkHover, border, codeBac fontWeight: 'bold', }, code: { - fontFamily: monospace, + fontFamily: fontFamily.monospace, fontSize: 'inherit', color: 'inherit', background: 'transparent', @@ -161,11 +161,11 @@ const styles = ({ base, font, fonts, monospace, link, linkHover, border, codeBac }, pre: { composes: '$para', - backgroundColor: codeBackground, - border: [[1, border, 'solid']], - padding: [[spacing[1], spacing[2]]], - fontSize: fonts.size12, - borderRadius: 3, + backgroundColor: color.codeBackground, + border: [[1, color.border, 'solid']], + padding: [[space[1], space[2]]], + fontSize: fontSize.small, + borderRadius, whiteSpace: 'pre', }, table: { @@ -178,9 +178,9 @@ const styles = ({ base, font, fonts, monospace, link, linkHover, border, codeBac tbody: { }, td: { - fontFamily: font, - padding: [[spacing[0], spacing[2], spacing[0], 0]], - fontSize: fonts.size14, + fontFamily: fontFamily.base, + padding: [[space[0], space[2], space[0], 0]], + fontSize: fontSize.base, }, th: { composes: '$td', diff --git a/src/rsg-components/Message/MessageRenderer.js b/src/rsg-components/Message/MessageRenderer.js index 1cdc9c5be..74894a072 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 = (spacing) => ({ +const styles = ({ space }) => ({ root: { - marginBottom: spacing[4], + marginBottom: space[4], }, }); diff --git a/src/rsg-components/Methods/MethodsRenderer.js b/src/rsg-components/Methods/MethodsRenderer.js index 895c9ac37..1bddc99f8 100644 --- a/src/rsg-components/Methods/MethodsRenderer.js +++ b/src/rsg-components/Methods/MethodsRenderer.js @@ -6,51 +6,51 @@ import Styled from 'rsg-components/Styled'; import Group from 'react-group'; import cx from 'classnames'; -const styles = ({ base, font, border, light, name, type, spacing, fonts }) => ({ +const styles = ({ space, color, fontFamily, fontSize }) => ({ table: { width: '100%', borderCollapse: 'collapse', }, tableHead: { - borderBottom: [[1, border, 'solid']], + borderBottom: [[1, color.border, 'solid']], }, tableBody: { }, row: { }, cell: { - color: base, - paddingRight: spacing[2], - paddingTop: spacing[1], + color: color.base, + paddingRight: space[2], + paddingTop: space[1], verticalAlign: 'top', - fontFamily: font, - fontSize: fonts.size12, + fontFamily: fontFamily.base, + fontSize: fontSize.small, }, cellHeading: { - color: base, - paddingRight: spacing[2], - paddingBottom: spacing[1], + color: color.base, + paddingRight: space[2], + paddingBottom: space[1], textAlign: 'left', - fontFamily: font, + fontFamily: fontFamily.base, fontWeight: 'bold', - fontSize: fonts.size12, + fontSize: fontSize.small, }, cellDesc: { width: '70%', - paddingLeft: spacing[2], + paddingLeft: space[2], }, required: { - fontFamily: font, - fontSize: fonts.size12, - color: light, + fontFamily: fontFamily.base, + fontSize: fontSize.small, + color: color.light, }, name: { - fontSize: fonts.size12, - color: name, + fontSize: fontSize.small, + color: color.name, }, type: { - fontSize: fonts.size12, - color: type, + fontSize: fontSize.small, + color: color.type, }, }); diff --git a/src/rsg-components/Playground/PlaygroundRenderer.js b/src/rsg-components/Playground/PlaygroundRenderer.js index 49a6b3ce0..441f1d8fb 100644 --- a/src/rsg-components/Playground/PlaygroundRenderer.js +++ b/src/rsg-components/Playground/PlaygroundRenderer.js @@ -5,57 +5,57 @@ 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, fonts }) => ({ +const styles = ({ space, color, fontFamily, fontSize, borderRadius }) => ({ root: { - color: base, + color: color.base, position: 'relative', - marginBottom: spacing[4], - border: [[1, border, 'solid']], - borderRadius: '3px 3px 0 3px', - marginTop: spacing[0], + marginBottom: space[4], + border: [[1, color.border, 'solid']], + borderRadius: [[borderRadius, borderRadius, 0, borderRadius]], + marginTop: space[0], '&:hover $isolatedLink': { isolate: false, opacity: 1, }, }, preview: { - marginBottom: spacing[0], - padding: spacing[2], + marginBottom: space[0], + padding: space[2], }, codeToggle: { position: 'absolute', right: -1, margin: 0, - padding: [[spacing[0], spacing[1]]], - fontFamily: font, - fontSize: fonts.size14, + padding: [[space[0], space[1]]], + fontFamily: fontFamily.base, + fontSize: fontSize.base, lineHeight: 1, - color: link, - border: [[1, border, 'solid']], + color: color.link, + border: [[1, color.border, 'solid']], borderTop: 0, - borderBottomLeftRadius: 3, - borderBottomRightRadius: 3, + borderBottomLeftRadius: borderRadius, + borderBottomRightRadius: borderRadius, cursor: 'pointer', '&:hover, &:active': { isolate: false, - color: linkHover, + color: color.linkHover, }, }, showCode: { composes: '$codeToggle', - backgroundColor: baseBackground, + backgroundColor: color.baseBackground, }, hideCode: { composes: '$codeToggle', - backgroundColor: codeBackground, + backgroundColor: color.codeBackground, }, isolatedLink: { position: 'absolute', top: 0, right: 0, - padding: [[spacing[0], spacing[1]]], - fontFamily: font, - fontSize: fonts.size14, + padding: [[space[0], space[1]]], + fontFamily: fontFamily.base, + fontSize: fontSize.base, 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 bb29bc32f..1e8ea517d 100644 --- a/src/rsg-components/PlaygroundError/PlaygroundErrorRenderer.js +++ b/src/rsg-components/PlaygroundError/PlaygroundErrorRenderer.js @@ -2,16 +2,15 @@ import React from 'react'; import PropTypes from 'prop-types'; import Styled from 'rsg-components/Styled'; -const styles = ({ monospace, white, errorBackground, spacing, fonts }) => ({ +const styles = ({ fontFamily, fontSize, color, space }) => ({ root: { - margin: `-${spacing[2]}`, - marginBottom: -20, // it needs this to fill all the space - fontFamily: monospace, - color: white, - backgroundColor: errorBackground, - padding: spacing[2], + margin: [[-space[2], -space[2], -(space[2] + space[0])]], + padding: space[2], lineHeight: 1.2, - fontSize: fonts.size12, + fontSize: fontSize.small, + fontFamily: fontFamily.monospace, + color: color.background, + backgroundColor: color.errorBackground, whiteSpace: 'pre', }, }); diff --git a/src/rsg-components/Props/PropsRenderer.js b/src/rsg-components/Props/PropsRenderer.js index 44843e26e..b7c7a3884 100644 --- a/src/rsg-components/Props/PropsRenderer.js +++ b/src/rsg-components/Props/PropsRenderer.js @@ -6,58 +6,58 @@ 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, fonts }) => ({ +const styles = ({ space, color, fontFamily, fontSize }) => ({ table: { width: '100%', borderCollapse: 'collapse', }, tableHead: { - borderBottom: [[1, border, 'solid']], + borderBottom: [[1, color.border, 'solid']], }, tableBody: { }, row: { }, cell: { - color: base, - paddingRight: spacing[2], - paddingTop: spacing[0], + color: color.base, + paddingRight: space[2], + paddingTop: space[1], verticalAlign: 'top', - fontFamily: font, - fontSize: fonts.size12, + fontFamily: fontFamily.base, + fontSize: fontSize.small, }, cellHeading: { - color: base, - paddingRight: spacing[2], - paddingBottom: spacing[0], + color: color.base, + paddingRight: space[2], + paddingBottom: space[1], textAlign: 'left', - fontFamily: font, + fontFamily: fontFamily.base, fontWeight: 'bold', - fontSize: fonts.size12, + fontSize: fontSize.small, }, cellDesc: { - color: base, + color: color.base, width: '99%', - paddingLeft: spacing[2], + paddingLeft: space[2], }, required: { - fontFamily: font, - fontSize: fonts.size12, - color: light, + fontFamily: fontFamily.base, + fontSize: fontSize.small, + color: color.light, }, name: { - fontSize: fonts.size12, - color: name, + fontSize: fontSize.small, + color: color.name, }, type: { - fontSize: fonts.size12, - color: type, + fontSize: fontSize.small, + color: color.type, }, function: { - fontFamily: font, - fontSize: fonts.size12, - color: light, - borderBottom: `1px dotted ${lightest}`, + fontFamily: fontFamily.base, + fontSize: fontSize.small, + color: color.light, + borderBottom: [[1, 'dotted', color.lightest]], }, }); diff --git a/src/rsg-components/ReactComponent/ReactComponentRenderer.js b/src/rsg-components/ReactComponent/ReactComponentRenderer.js index b5006ebf7..25840204c 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, fonts }) => ({ +const styles = ({ color, fontSize, fontFamily, space }) => ({ root: { - marginBottom: spacing[6], - fontSize: fonts.h6, + marginBottom: space[6], + fontSize: fontSize.text, '&:hover $isolatedLink': { isolate: false, opacity: 1, @@ -15,45 +15,45 @@ const styles = ({ base, font, monospace, light, spacing, fonts }) => ({ }, header: { position: 'relative', - marginBottom: spacing[3], + marginBottom: space[3], }, isolatedLink: { position: 'absolute', top: 0, right: 0, - fontFamily: font, - fontSize: fonts.size14, + fontFamily: fontFamily.base, + fontSize: fontSize.base, opacity: 0, transition: 'opacity ease-in-out .15s .2s', }, primaryHeading: { - color: base, + color: color.base, position: 'relative', marginTop: 0, - marginBottom: spacing[1], - fontFamily: font, - fontSize: fonts.h1, + marginBottom: space[1], + fontFamily: fontFamily.base, + fontSize: fontSize.h2, fontWeight: 'normal', }, heading: { - color: base, - margin: [[0, 0, spacing[1]]], - fontFamily: font, - fontSize: 20, + color: color.base, + margin: [[0, 0, space[1]]], + fontFamily: fontFamily.base, + fontSize: fontSize.h4, fontWeight: 'normal', }, pathLine: { - fontFamily: monospace, - color: light, - fontSize: fonts.size14, + fontFamily: fontFamily.monospace, + color: color.light, + fontSize: fontSize.small, }, description: { - color: base, - marginBottom: spacing[3], - fontSize: fonts.h6, + color: color.base, + marginBottom: space[3], + fontSize: fontSize.text, }, subsection: { - marginBottom: spacing[4], + marginBottom: space[4], }, }); diff --git a/src/rsg-components/Section/SectionRenderer.js b/src/rsg-components/Section/SectionRenderer.js index 489453156..e1e10d51e 100644 --- a/src/rsg-components/Section/SectionRenderer.js +++ b/src/rsg-components/Section/SectionRenderer.js @@ -3,15 +3,14 @@ import PropTypes from 'prop-types'; import Styled from 'rsg-components/Styled'; import Heading from 'rsg-components/Heading'; -const styles = ({ font, spacing, fonts }) => ({ +const styles = ({ space, fontFamily, fontSize }) => ({ root: { - marginBottom: 50, + marginBottom: space[4], }, heading: { - margin: [[0, 0, spacing[3]]], - fontFamily: font, - fontSize: fonts.h1 + 2, - fontWeight: 'bold', + margin: [[0, 0, space[2]]], + fontFamily: fontFamily.base, + fontSize: fontSize.h1, }, }); diff --git a/src/rsg-components/StyleGuide/StyleGuideRenderer.js b/src/rsg-components/StyleGuide/StyleGuideRenderer.js index 970b501d6..2aad85c90 100644 --- a/src/rsg-components/StyleGuide/StyleGuideRenderer.js +++ b/src/rsg-components/StyleGuide/StyleGuideRenderer.js @@ -5,29 +5,29 @@ 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, fonts }) => ({ +const styles = ({ color, fontFamily, fontSize, sidebarWidth, mq, space }) => ({ root: { - color: base, - backgroundColor: baseBackground, + color: color.base, + backgroundColor: color.baseBackground, }, hasSidebar: { paddingLeft: sidebarWidth, - [small]: { + [mq.small]: { paddingLeft: 0, }, }, content: { maxWidth: 1000, - padding: [[spacing[2], spacing[4]]], + padding: [[space[2], space[4]]], margin: [[0, 'auto']], - [small]: { - padding: spacing[2], + [mq.small]: { + padding: space[2], }, display: 'block', }, sidebar: { - backgroundColor: codeBackground, - border: [[border, 'solid']], + backgroundColor: color.codeBackground, + border: [[color.border, 'solid']], borderWidth: [[0, 1, 0, 0]], position: 'fixed', top: 0, @@ -35,22 +35,22 @@ const styles = ({ font, base, light, sidebarWidth, border, baseBackground, codeB bottom: 0, width: sidebarWidth, overflow: 'auto', - [small]: { + [mq.small]: { position: 'static', width: 'auto', borderWidth: [[1, 0, 0, 0]], - paddingBottom: spacing[0], + paddingBottom: space[0], }, }, logo: { - padding: spacing[2], - borderBottom: [[1, border, 'solid']], + padding: space[2], + borderBottom: [[1, color.border, 'solid']], }, footer: { display: 'block', - color: light, - fontFamily: font, - fontSize: fonts.fontSize12, + color: color.light, + fontFamily: fontFamily.base, + fontSize: fontSize.small, }, }); diff --git a/src/rsg-components/TableOfContents/TableOfContentsRenderer.js b/src/rsg-components/TableOfContents/TableOfContentsRenderer.js index 750d770ab..0b65d19fa 100644 --- a/src/rsg-components/TableOfContents/TableOfContentsRenderer.js +++ b/src/rsg-components/TableOfContents/TableOfContentsRenderer.js @@ -2,27 +2,27 @@ import React from 'react'; import PropTypes from 'prop-types'; import Styled from 'rsg-components/Styled'; -const styles = ({ font, base, border, link, baseBackground, spacing, fonts }) => ({ +const styles = ({ space, color, fontFamily, fontSize, borderRadius }) => ({ root: { - fontFamily: font, + fontFamily: fontFamily.base, }, search: { - padding: spacing[2], + padding: space[2], }, input: { display: 'block', width: '100%', - padding: [[spacing[0], spacing[1]]], - color: base, - backgroundColor: baseBackground, - fontFamily: font, - fontSize: fonts.size14, - border: [[1, border, 'solid']], - borderRadius: 2, + padding: space[1], + color: color.base, + backgroundColor: color.baseBackground, + fontFamily: fontFamily.base, + fontSize: fontSize.base, + border: [[1, color.border, 'solid']], + borderRadius, transition: 'border-color ease-in-out .15s', '&:focus': { isolate: false, - borderColor: link, + borderColor: color.link, outline: 0, }, }, diff --git a/src/rsg-components/Welcome/WelcomeRenderer.js b/src/rsg-components/Welcome/WelcomeRenderer.js index c33615359..139567f99 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 = (spacing) => ({ +const styles = ({ space }) => ({ root: { maxWidth: 900, margin: [[0, 'auto']], - padding: spacing[4], + padding: space[4], }, }); diff --git a/src/styles/theme.js b/src/styles/theme.js index fc04c2ba9..025ed2eea 100644 --- a/src/styles/theme.js +++ b/src/styles/theme.js @@ -1,40 +1,50 @@ export const spacingFactor = 8; +export const space = [ + spacingFactor / 2, // 4 + spacingFactor, // 8 + spacingFactor * 2, // 16 + spacingFactor * 3, // 24 + spacingFactor * 4, // 32 + spacingFactor * 5, // 40 + spacingFactor * 6, // 48 +]; -export const white = '#fff'; -export const base = '#333'; -export const light = '#999'; -export const lightest = '#ccc'; -export const link = '#1978c8'; -export const linkHover = '#f28a25'; -export const border = '#e8e8e8'; -export const name = '#7f9a44'; -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"', - '"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 color = { + background: '#fff', + base: '#333', + light: '#999', + lightest: '#ccc', + link: '#1978c8', + linkHover: '#f28a25', + border: '#e8e8e8', + name: '#7f9a44', + type: '#b77daa', + baseBackground: '#fff', + errorBackground: '#c00', + codeBackground: '#f5f5f5', }; -export const fonts = { - size12: 12, - size14: 14, - size18: 18, - h6: 16, +export const fontFamily = { + base: ['-apple-system', 'BlinkMacSystemFont', '"Segoe UI"', '"Roboto"', '"Oxygen"', '"Ubuntu"', + '"Cantarell"', '"Fira Sans"', '"Droid Sans"', '"Helvetica Neue"', 'sans-serif'], + monospace: ['Consolas', '"Liberation Mono"', 'Menlo', 'monospace'], +}; + +export const fontSize = { + base: 15, + text: 16, + small: 13, + h1: 48, + h2: 36, + h3: 24, + h4: 18, h5: 16, - h4: 21, - h3: 26, - h2: 32, - h1: 36, + h6: 16, }; + +export const mq = { + small: '@media (max-width: 600px)', +}; + +export const borderRadius = 3; +export const sidebarWidth = 200;