baseTheme.js

import R from 'ramda';
import palettes from './palettes';

const palette = R.path(['monochrome', 'palette'], palettes);
const getColour = R.flip(R.prop)(palette);

const baseTheme = {
  palette: {
    role: {
      participant: getColour('silver'),
      staff: getColour('mineShaft'),
    },
    panel: getColour('silver'),
    border: getColour('gainsboro'),
    link: getColour('gallery'),
  },
};

export default baseTheme;

ListingPanel.js

const StyledListingPanel = styled(ListingPanel)`
  border-right: ${(props) => `1px solid ${props.theme.palette.border}`};
`;

StyledListingPanel.defaultProps = {
  theme: baseTheme,
};

export default StyledListingPanel;

Story.js

const gridTheme = {
  flexboxgrid: {
    outerMargin: 0.5,
  },
};

// const theme = { ...chosenTheme, ...gridTheme }; // Production
const theme = { ...gridTheme };

// I've hit an interesting issue with theming and defaultProps. 
// I'm using a grid system, which uses its own key within the `theme` object. 
// However, if I pass that in with `ThemeProvider`, then my `defaultProps` don't kick in, so I don't get my default theme.
// Now I'll be using ThemeProvider in production, which will pass in a full theme, but not always in my test sandbox (React Storybook).
// One idea I had was to include my grid settings in all my themes, which isn't that bad, but feels a bit off.
// Though I've just realised that I'll have to merge my grid theme with my app theme for production anyway, 
// So maybe my app theme should contain my grid theme too

// passing `theme` here raises "Cannot read property 'border' of undefined"
storiesOf('Communication Centre', module).addWithInfo('Main layout', () => (
  <ThemeProvider theme={theme}>
    <Grid fluid>
      <Row>
        <ListingPanel />
        <DetailPanel />
      </Row>
    </Grid>
  </ThemeProvider>
));