fix: imports of color (#630)

src/components/flag/flag.jsx

@@ -1,18 +1,19 @@
 import PropTypes from 'prop-types';
 import React from 'react';
+import { withTheme } from 'react-jss';
 import { SvgFlag, CurrencyFlag } from './flags';
 import FlagDeprecated from './flag-deprecated';
-import color from '../../styles/color';
 import { deprecatedProps } from '../deprecate';
 
 const addBorder = props => !props.hideBorder && !props.round && !props.secondaryCountryCode;
 
 const Flag = props => {
+  const borderColor = props.borderColor ? props.borderColor : props.theme.palette.gray7;
   /** Will be deprecated. This is here just for backwards compatibility. */
   const extendedStyle = {
     ...props.style,
-    border: addBorder(props) ? `1px solid ${props.borderColor}` : null,
-    backgroundColor: addBorder(props) ? props.borderColor : 'rgba(0,0,0,0)', // "fix" errors with subpixel coloring between flag and border
+    border: addBorder(props) ? `1px solid ${borderColor}` : null,
+    backgroundColor: addBorder(props) ? borderColor : 'rgba(0,0,0,0)', // "fix" errors with subpixel coloring between flag and border
   };
 
   /** Will be deprecated. */
@@ -28,7 +29,6 @@ const Flag = props => {
     size,
     round,
     hideBorder,
-    borderColor,
     ...rest
   } = props;
 
@@ -61,7 +61,7 @@ Flag.defaultProps = {
   size: 32,
   round: false,
   hideBorder: false,
-  borderColor: color.gray7,
+  borderColor: null,
 };
 
 const countryCodes = [
@@ -109,6 +109,7 @@ Flag.propTypes = {
   hideBorder: PropTypes.bool,
   /** Will be deprecated. borderColor can be passed together with `styles` object. */
   borderColor: PropTypes.string,
+  theme: PropTypes.shape(),
 };
 export { Flag as Component };
 export default deprecatedProps('Flag', [
@@ -117,4 +118,4 @@ export default deprecatedProps('Flag', [
     message:
       "size in Flag as a number is deprecated. Please use one of 'xs', 'sm', 'md', 'lg' instead",
   },
-])(Flag);
+])(withTheme(Flag));

src/components/input/checkbox.jsx

@@ -1,11 +1,11 @@
 import PropTypes from 'prop-types';
 import React from 'react';
 import classNames from 'classnames';
+import { withTheme } from 'react-jss';
 import { Icon } from '../..';
-import color from '../../styles/color';
 
 function Checkbox(props) {
-  const { checked, disabled } = props;
+  const { checked, disabled, theme } = props;
 
   const classes = classNames(
     'checkbox',
@@ -16,7 +16,7 @@ function Checkbox(props) {
     props.className,
   );
 
-  const icon = <Icon.Checkmark stroke={color.white} style={{ display: 'block' }} />;
+  const icon = <Icon.Checkmark stroke={theme.palette.white} style={{ display: 'block' }} />;
 
   return <span className={classes}>{checked ? icon : null}</span>;
 }
@@ -25,6 +25,8 @@ Checkbox.propTypes = {
   checked: PropTypes.bool,
   disabled: PropTypes.bool,
   className: PropTypes.string,
+  theme: PropTypes.shape(),
 };
 
-export default Checkbox;
+export { Checkbox as Component };
+export default withTheme(Checkbox);

src/components/input/checkbox.test.js

@@ -1,8 +1,9 @@
 import React from 'react';
 import { shallow } from 'enzyme';
-import Checkbox from './checkbox';
+import { Component as Checkbox } from './checkbox';
 
-const renderComponent = props => shallow(<Checkbox {...props} />);
+const renderComponent = props =>
+  shallow(<Checkbox {...props} theme={{ palette: { color: { white: '#FFFFFF' } } }} />);
 
 describe('<Checkbox />', () => {
   test('has class checkbox', () => {

src/components/table/tr/tr-styles.jsx

@@ -1,8 +1,7 @@
 import styleUtils from '../style-utilities';
-import color from '../../../styles/color';
 
 const normal = theme => {
-  const { mixins, typography } = theme;
+  const { mixins, typography, palette } = theme;
 
   return {
     tr: {
@@ -20,13 +19,13 @@ const normal = theme => {
     border: {
       borderStyle: 'solid',
       borderWidth: 1,
-      borderColor: color.grayLight,
+      borderColor: palette.gray5,
     },
     sticky: {
       '& td': {
         position: 'sticky',
         top: 0,
-        backgroundColor: color.white,
+        backgroundColor: palette.white,
       },
     },
     stickyBorder: {
@@ -37,7 +36,7 @@ const normal = theme => {
         left: 0,
         bottom: 0,
         width: '100%',
-        borderBottom: `2px solid ${color.grayDarker}`,
+        borderBottom: `2px solid ${palette.gray2}`,
       },
     },
   };