Rename theme to 'circuit' (#165)

* Rename theme file

* Fix theme usage

* Rename theme to 'circuit'

Author: connor-baer

.storybook/config.js

@@ -5,7 +5,7 @@ import { withKnobs } from '@storybook/addon-knobs';
 import { setOptions } from '@storybook/addon-options';
 import { ThemeProvider } from 'emotion-theming';
 
-import { standard } from '../src/themes';
+import { circuit } from '../src/themes';
 import injectGlobalStyles from '../src/styles/global-styles';
 
 // Dynamically decide wich styles to load.
@@ -14,7 +14,7 @@ if (PRODUCTION) {
 }
 
 if (!PRODUCTION) {
-  injectGlobalStyles({ theme: standard });
+  injectGlobalStyles({ theme: circuit });
 }
 
 // Sets the info addon's options.
@@ -32,7 +32,7 @@ setOptions({
 const req = require.context('../src/components', true, /\.story\.js$/);
 
 const withThemeProvider = storyFn => (
-  <ThemeProvider theme={standard}>{storyFn()}</ThemeProvider>
+  <ThemeProvider theme={circuit}>{storyFn()}</ThemeProvider>
 );
 
 const withStoryStyles = storyFn => {

build/global-styles

@@ -3,8 +3,8 @@ require('babel-register');
 
 const { format } = require('prettier');
 
-const { standard } = require('../src/themes');
+const { circuit } = require('../src/themes');
 const { createGlobalStyles } = require('../src/styles/global-styles');
 
-const globalStyles = createGlobalStyles({ theme: standard });
+const globalStyles = createGlobalStyles({ theme: circuit });
 console.log(format(globalStyles, { parser: 'css' }));

build/stylesheet/lib/extract-styles.js

@@ -3,17 +3,18 @@ import * as emotion from 'react-emotion';
 import * as ReactTestRenderer from 'react-test-renderer';
 import { ThemeProvider } from 'emotion-theming';
 
-import { standard } from '../../../src/themes';
+import { circuit } from '../../../src/themes';
 
 const adjustPath = path => `../../../${path}`;
 
 const renderComponent = async (Component, theme, props) => {
   try {
     ReactTestRenderer.create(
-      <ThemeProvider theme={standard}>
+      <ThemeProvider theme={circuit}>
         <Component {...{ theme, ...props }} />
       </ThemeProvider>
     );
+    // eslint-disable-next-line no-empty
   } catch (e) {}
 };
 
@@ -75,7 +76,7 @@ const extractStyles = async ({ path, propTypes }) => {
   const relativePath = adjustPath(path);
   const { default: Component } = await import(relativePath);
   const propGroups = createPropGroups(propTypes);
-  propGroups.forEach(props => renderComponent(Component, standard, props));
+  propGroups.forEach(props => renderComponent(Component, circuit, props));
   const { inserted } = emotion.caches;
   const regex = /-/;
   const filteredStyles = Object.entries(inserted).reduce(

jest.setup.js

@@ -9,22 +9,22 @@ import { create } from 'react-test-renderer';
 import * as emotion from 'emotion';
 import { ThemeProvider } from 'emotion-theming';
 
-import { standard } from './src/themes';
+import { circuit } from './src/themes';
 
 Enzyme.configure({ adapter: new Adapter() });
 
 const renderWithTheme = renderFn => (component, ...rest) =>
-  renderFn(<ThemeProvider theme={standard}>{component}</ThemeProvider>, rest);
+  renderFn(<ThemeProvider theme={circuit}>{component}</ThemeProvider>, rest);
 
 const shallowWithTheme = tree => {
-  const context = shallow(<ThemeProvider theme={standard} />)
+  const context = shallow(<ThemeProvider theme={circuit} />)
     .instance()
     .getChildContext();
   return shallow(tree, { context });
 };
 
 const mountWithTheme = tree => {
-  const context = shallow(<ThemeProvider theme={standard} />)
+  const context = shallow(<ThemeProvider theme={circuit} />)
     .instance()
     .getChildContext();
 

src/components/AutoCompleteInput/AutoCompleteInput.js

@@ -4,7 +4,6 @@ import styled, { css } from 'react-emotion';
 import Downshift from 'downshift';
 import { includes } from 'lodash/fp';
 
-import { zIndex } from '../../themes/default';
 import SearchInput from '../SearchInput';
 import Card from '../Card';
 import { textMega } from '../../styles/style-helpers';
@@ -18,14 +17,16 @@ const AutoCompleteWrapper = styled('div')`
   min-width: 150px;
 `;
 
-const ItemsWrapper = styled('div')`
+const baseItemsWrapperStyles = ({ theme }) => css`
   position: relative;
   height: 0px;
   overflow: visible;
   margin-top: ${props => props.theme.spacings.bit};
-  z-index: ${zIndex.popover};
+  z-index: ${theme.zIndex.popover};
 `;
 
+const ItemsWrapper = styled('div')(baseItemsWrapperStyles);
+
 const itemsBaseStyles = ({ theme }) => css`
   padding: ${theme.spacings.kilo} ${theme.spacings.mega};
   position: absolute;

src/components/Col/Col.story.js

@@ -4,14 +4,14 @@ import { storiesOf } from '@storybook/react';
 import { withInfo } from '@storybook/addon-info';
 import { GROUPS } from '../../../.storybook/hierarchySeparators';
 
-import { standard } from '../../themes';
+import { circuit } from '../../themes';
 
 import withTests from '../../util/withTests';
 import Col from './Col';
 
 const StyledCol = styled(Col)`
-  background-color: ${standard.colors.b500};
-  color: ${standard.colors.white};
+  background-color: ${circuit.colors.b500};
+  color: ${circuit.colors.white};
   font-size: 14px;
   font-weight: bold;
   line-height: 20px;

src/components/CreditCardDetails/components/CardNumberInput/CardNumberInput.story.js

@@ -10,7 +10,7 @@ import { reduce } from '../../../../util/fp';
 import { CardNumberInput, cardSchemeIcons } from '..';
 import { schemes as cardSchemes } from '../..';
 import Text from '../../../Text';
-import { standard } from '../../../../themes';
+import { circuit } from '../../../../themes';
 
 const { SCHEMES } = cardSchemes;
 
@@ -34,9 +34,9 @@ const manySchemes = [
 const manySchemeIcons = getIconComponents(manySchemes);
 
 const marginTopClassName = css`
-  width: calc(100vw - ${standard.spacings.byte});
+  width: calc(100vw - ${circuit.spacings.byte});
 
-  ${standard.mq.untilKilo`
+  ${circuit.mq.untilKilo`
     width: 75vw;
     max-width: 400px;
   `};

src/components/Grid/Grid.story.js

@@ -8,21 +8,21 @@ import withTests from '../../util/withTests';
 import Grid from './Grid';
 import Col from '../Col';
 import Row from '../Row';
-import { standard } from '../../themes';
+import { circuit } from '../../themes';
 
 const StyledCol = styled(Col)`
-  color: ${standard.colors.white};
+  color: ${circuit.colors.white};
   font-size: 14px;
   font-weight: bold;
   line-height: 20px;
   height: 40px;
   padding: 10px;
   &:nth-of-type(n) {
-    background-color: ${standard.colors.b500};
+    background-color: ${circuit.colors.b500};
   }
 
   &:nth-of-type(2n) {
-    background-color: ${standard.colors.b300};
+    background-color: ${circuit.colors.b300};
   }
 `;
 
@@ -31,7 +31,7 @@ StyledCol.defaultProps = {
 };
 
 const StyledRow = styled(Row)`
-  border: 2px solid ${standard.colors.y100};
+  border: 2px solid ${circuit.colors.y100};
   margin-bottom: 8px;
 `;
 

src/components/Popover/Popover.js

@@ -1,9 +1,7 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { Manager, Reference, Popper } from 'react-popper';
-import styled from 'react-emotion';
-
-import { zIndex } from '../../themes/default';
+import styled, { css } from 'react-emotion';
 
 import {
   TOP,
@@ -22,10 +20,13 @@ const ReferenceWrapper = styled('div')`
   display: inline-block;
 `;
 
-const PopoverWrapper = styled('div')`
-  z-index: ${zIndex.popover};
+const basePopoverWrapperStyles = ({ theme }) => css`
+  label: popover;
+  z-index: ${theme.zIndex.popover};
 `;
 
+const PopoverWrapper = styled('div')(basePopoverWrapperStyles);
+
 class Popover extends Component {
   static TOP = TOP;
   static BOTTOM = BOTTOM;

src/components/Row/Row.story.js

@@ -7,21 +7,21 @@ import { GROUPS } from '../../../.storybook/hierarchySeparators';
 import withTests from '../../util/withTests';
 import Row from './Row';
 import Col from '../Col';
-import { standard } from '../../themes';
+import { circuit } from '../../themes';
 
 const StyledCol = styled(Col)`
-  color: ${standard.colors.white};
+  color: ${circuit.colors.white};
   font-size: 14px;
   font-weight: bold;
   line-height: 20px;
   height: 40px;
   padding: 10px;
   &:nth-of-type(n) {
-    background-color: ${standard.colors.b500};
+    background-color: ${circuit.colors.b500};
   }
 
   &:nth-of-type(2n) {
-    background-color: ${standard.colors.b300};
+    background-color: ${circuit.colors.b300};
   }
 `;
 
@@ -30,7 +30,7 @@ StyledCol.defaultProps = {
 };
 
 const StyledRow = styled(Row)`
-  border: 2px solid ${standard.colors.y100};
+  border: 2px solid ${circuit.colors.y100};
   margin-bottom: 8px;
 `;
 

src/themes/default.js src/themes/circuit.js

@@ -1,3 +1,4 @@
-import * as standard from './default';
+import * as circuit from './circuit';
 
-export { standard };
+export { circuit };
+export { circuit as standard };