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')
})