diff --git a/src/Avatar.js b/src/Avatar.js index ffb2922bffd..e6cf8894311 100644 --- a/src/Avatar.js +++ b/src/Avatar.js @@ -1,6 +1,7 @@ import PropTypes from 'prop-types' import styled from 'styled-components' -import {themeGet, space} from 'styled-system' +import {get} from './constants' +import {space} from 'styled-system' import theme from './theme' function borderRadius({size}) { @@ -15,7 +16,7 @@ const Avatar = styled.img.attrs(props => ({ }))` display: inline-block; overflow: hidden; // Ensure page layout in Firefox should images fail to load - line-height: ${themeGet('lineHeights.condensedUltra', 1)}; + line-height: ${get('lineHeights.condensedUltra')}; vertical-align: middle; ${borderRadius}; ${space}; diff --git a/src/AvatarPair.js b/src/AvatarPair.js index fdbf8f068ad..87c374e0254 100644 --- a/src/AvatarPair.js +++ b/src/AvatarPair.js @@ -1,11 +1,11 @@ import React from 'react' import PropTypes from 'prop-types' import styled from 'styled-components' -import {themeGet} from 'styled-system' +import {get} from './constants' import Avatar from './Avatar' import theme from './theme' -const getBackgroundColor = themeGet('colors.white', '#fff') +const getBackgroundColor = get('colors.white') const Wrapper = styled('div')` display: inline-flex; @@ -15,7 +15,7 @@ const Wrapper = styled('div')` const childStyles = props => ({ display: 'inline-block', overflow: 'hidden', // Ensure page layout in Firefox should images fail to load - lineHeight: `${themeGet('lineHeights.condensedUltra', 1)}`, + lineHeight: `${get('lineHeights.condensedUltra')}`, verticalAlign: 'middle', borderRadius: '2px', position: 'absolute', diff --git a/src/BranchName.js b/src/BranchName.js index fa433843081..baff86cece1 100644 --- a/src/BranchName.js +++ b/src/BranchName.js @@ -1,14 +1,13 @@ import PropTypes from 'prop-types' import styled from 'styled-components' -import {themeGet} from 'styled-system' import theme from './theme' -import {COMMON, Base} from './constants' +import {COMMON, Base, get} from './constants' const BranchName = styled(Base)` display: inline-block; padding: 2px 6px; - font-size: ${themeGet('fontSizes.0', theme.fontSizes[0])}px; - font-family: ${themeGet('fonts.mono', theme.fonts.mono)}; + font-size: ${get('fontSizes.0')}px; + font-family: ${get('fonts.mono')}; color: rgba(27, 31, 35, 0.6); background-color: #eaf5ff; border-radius: 3px; diff --git a/src/Donut.js b/src/Donut.js index 548734fad8a..44e5c361f24 100644 --- a/src/Donut.js +++ b/src/Donut.js @@ -2,11 +2,12 @@ import React from 'react' import PropTypes from 'prop-types' import {arc as Arc, pie as Pie} from 'd3-shape' import styled from 'styled-components' -import {themeGet, space} from 'styled-system' +import {space} from 'styled-system' +import {get} from './constants' import theme from './theme' const defaultColor = '#666' -const getStateColors = themeGet('colors.state', {}) +const getStateColors = get('colors.state') function DonutBase(props) { const {className, data, children = mapData(data), size} = props diff --git a/src/__tests__/Donut.js b/src/__tests__/Donut.js index a4b16544938..74eb3c5a64c 100644 --- a/src/__tests__/Donut.js +++ b/src/__tests__/Donut.js @@ -74,10 +74,6 @@ describe('Donut', () => { expect(render().props.fill).toEqual(state.unknown) }) - it('renders the fallback color when no state color is found in the theme', () => { - expect(render().props.fill).toEqual('#666') - }) - it('respects the fill attribute', () => { expect(render().props.fill).toEqual('pink') })