Fix: Add theme color to components (styleguidist#418)

Author: timsnadden

src/rsg-components/ComponentsList/ComponentsListRenderer.js

@@ -4,12 +4,13 @@ import cx from 'classnames';
 import Link from 'rsg-components/Link';
 import Styled from 'rsg-components/Styled';
 
-const styles = ({ font, small }) => ({
+const styles = ({ base, font, small }) => ({
 	list: {
 		margin: 0,
 		paddingLeft: 15,
 	},
 	item: {
+		color: base,
 		display: 'block',
 		margin: [[7, 0, 7, 0]],
 		fontFamily: font,
@@ -25,6 +26,7 @@ const styles = ({ font, small }) => ({
 		},
 	},
 	heading: {
+		color: base,
 		marginTop: 7,
 		fontFamily: font,
 		fontWeight: 'bold',

src/rsg-components/Heading/HeadingRenderer.js

@@ -3,8 +3,9 @@ import PropTypes from 'prop-types';
 import cx from 'classnames';
 import Styled from 'rsg-components/Styled';
 
-export const styles = ({ link, linkHover }) => ({
+export const styles = ({ base, link, linkHover }) => ({
 	heading: {
+		color: base,
 		position: 'relative',
 		overflow: 'visible',
 		marginLeft: -30,

src/rsg-components/Logo/LogoRenderer.js

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

src/rsg-components/Markdown/Markdown.js

@@ -65,12 +65,14 @@ const getInlineOverrides = memoize(classes => {
 	};
 }, () => 'getInlineOverrides');
 
-const styles = ({ font, monospace, link, linkHover, border, codeBackground }) => ({
+const styles = ({ base, font, monospace, link, linkHover, border, codeBackground }) => ({
 	base: {
+		color: base,
 		fontFamily: font,
 		fontSize: 'inherit',
 	},
 	para: {
+		color: base,
 		fontFamily: font,
 		fontSize: 'inherit',
 		margin: [[0, 0, 15, 0]],
@@ -125,6 +127,7 @@ const styles = ({ font, monospace, link, linkHover, border, codeBackground }) =>
 		listStyleType: 'inherit',
 	},
 	input: {
+		color: base,
 		display: 'inline-block',
 		margin: [[0, '0.35em', '0.25em', '-1.2em']],
 		verticalAlign: 'middle',

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 = ({ font, border, light, name, type }) => ({
+const styles = ({ base, font, border, light, name, type }) => ({
 	table: {
 		width: '100%',
 		borderCollapse: 'collapse',
@@ -19,13 +19,15 @@ const styles = ({ font, border, light, name, type }) => ({
 	row: {
 	},
 	cell: {
+		color: base,
 		paddingRight: 15,
 		paddingTop: 6,
 		verticalAlign: 'top',
 		fontFamily: font,
 		fontSize: 13,
 	},
 	cellHeading: {
+		color: base,
 		paddingRight: 15,
 		paddingBottom: 6,
 		textAlign: 'left',

src/rsg-components/Playground/PlaygroundRenderer.js

@@ -5,8 +5,9 @@ import Link from 'rsg-components/Link';
 import Preview from 'rsg-components/Preview';
 import Styled from 'rsg-components/Styled';
 
-const styles = ({ font, link, linkHover, border, baseBackground, codeBackground }) => ({
+const styles = ({ base, font, link, linkHover, border, baseBackground, codeBackground }) => ({
 	root: {
+		color: base,
 		position: 'relative',
 		marginBottom: 30,
 		border: [[1, border, 'solid']],

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 = ({ font, border, light, lightest, name, type }) => ({
+const styles = ({ base, font, border, light, lightest, name, type }) => ({
 	table: {
 		width: '100%',
 		borderCollapse: 'collapse',
@@ -19,13 +19,15 @@ const styles = ({ font, border, light, lightest, name, type }) => ({
 	row: {
 	},
 	cell: {
+		color: base,
 		paddingRight: 15,
 		paddingTop: 6,
 		verticalAlign: 'top',
 		fontFamily: font,
 		fontSize: 13,
 	},
 	cellHeading: {
+		color: base,
 		paddingRight: 15,
 		paddingBottom: 6,
 		textAlign: 'left',
@@ -34,6 +36,7 @@ const styles = ({ font, border, light, lightest, name, type }) => ({
 		fontSize: 13,
 	},
 	cellDesc: {
+		color: base,
 		width: '99%',
 		paddingLeft: 15,
 	},

src/rsg-components/ReactComponent/ReactComponentRenderer.js

@@ -4,7 +4,7 @@ import Link from 'rsg-components/Link';
 import Heading from 'rsg-components/Heading';
 import Styled from 'rsg-components/Styled';
 
-const styles = ({ font, monospace, light }) => ({
+const styles = ({ base, font, monospace, light }) => ({
 	root: {
 		marginBottom: 50,
 		fontSize: 16,
@@ -27,6 +27,7 @@ const styles = ({ font, monospace, light }) => ({
 		transition: 'opacity ease-in-out .15s .2s',
 	},
 	primaryHeading: {
+		color: base,
 		position: 'relative',
 		marginTop: 0,
 		marginBottom: 7,
@@ -35,6 +36,7 @@ const styles = ({ font, monospace, light }) => ({
 		fontWeight: 'normal',
 	},
 	heading: {
+		color: base,
 		margin: [[0, 0, 7]],
 		fontFamily: font,
 		fontSize: 20,
@@ -46,6 +48,7 @@ const styles = ({ font, monospace, light }) => ({
 		fontSize: 14,
 	},
 	description: {
+		color: base,
 		marginBottom: 20,
 		fontSize: 16,
 	},