Skip to content

Commit

Permalink
Refactor: Refactor theme (#432)
Browse files Browse the repository at this point in the history 
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.
  • Loading branch information
@sapegin
sapegin committed May 8, 2017
1 parent f4e894a commit 19ed879
Show file tree
Hide file tree
Showing 19 changed files with 244 additions and 236 deletions.
4 changes: 2 additions & 2 deletions src/rsg-components/Code/CodeRenderer.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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',
Expand Down
22 changes: 11 additions & 11 deletions src/rsg-components/ComponentsList/ComponentsListRenderer.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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',
},
});
Expand Down
18 changes: 9 additions & 9 deletions src/rsg-components/Editor/EditorLoaderRenderer.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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',
Expand Down
10 changes: 5 additions & 5 deletions src/rsg-components/ExamplePlaceholder/ExamplePlaceholderRenderer.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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,
},
},
});
Expand Down
16 changes: 8 additions & 8 deletions src/rsg-components/Heading/HeadingRenderer.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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',
Expand All @@ -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',
},
},
Expand Down
6 changes: 3 additions & 3 deletions src/rsg-components/Link/LinkRenderer.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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',
},
},
Expand Down
8 changes: 4 additions & 4 deletions src/rsg-components/Logo/LogoRenderer.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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',
},
});
Expand Down
56 changes: 28 additions & 28 deletions src/rsg-components/Markdown/Markdown.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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',
},
Expand All @@ -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: {
Expand All @@ -153,19 +153,19 @@ const styles = ({ base, font, fonts, monospace, link, linkHover, border, codeBac
fontWeight: 'bold',
},
code: {
fontFamily: monospace,
fontFamily: fontFamily.monospace,
fontSize: 'inherit',
color: 'inherit',
background: 'transparent',
whiteSpace: 'inherit',
},
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: {
Expand All @@ -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',
Expand Down
4 changes: 2 additions & 2 deletions src/rsg-components/Message/MessageRenderer.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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],
},
});

Expand Down
Loading

3 comments on commit 19ed879

@SaraVieira
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Great job! Way more consistency now :)

@SaraVieira
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Sidebar should have a variable by itself even if it's a copy from the code one so people can change that color, what do you think @sapegin?

@sapegin
Copy link
Member Author

@sapegin sapegin commented on 19ed879 May 8, 2017

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yeah, I’ll do that.

Please sign in to comment.