Normalise border radii across components

src/components/Alert/index.js

@@ -1,7 +1,7 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 import styled, { css } from 'styled-components'
-import { color, space, fontWeight, transition } from '../../theme'
+import { color, space, fontWeight, transition, radius } from '../../theme'
 import { Icon } from '../Icon'
 
 const Container = styled.div`
@@ -13,7 +13,7 @@ const Container = styled.div`
       : props.variant === 'warning'
       ? color.sunLightest
       : color.earthLightest};
-  border-radius: ${space[4]};
+  border-radius: ${radius.md};
   min-height: ${space[56]};
   display: flex;
   align-items: flex-start;

src/components/Banner/index.js

@@ -1,7 +1,7 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 import styled, { css } from 'styled-components'
-import { color, space, device } from '../../theme'
+import { color, space, device, radius } from '../../theme'
 import { Icon } from '../Icon'
 import { Box } from '../Box'
 
@@ -35,7 +35,7 @@ const StyledBanner = styled.a`
   @media ${device.tablet} {
     padding-left: ${space[32]};
     padding-right: ${space[16]};
-    border-radius: ${space[4]};
+    border-radius: ${radius.md};
     width: auto;
     left: auto;
     right: auto;

src/components/Button/index.js

@@ -6,6 +6,7 @@ import { Spinner } from '../Spinner'
 import {
   color,
   space,
+  radius,
   fontSize,
   fontWeight,
   lineHeight,
@@ -27,7 +28,7 @@ const StyledButton = styled.button`
   background-color: ${color.earth};
   color: white;
   line-height: ${lineHeight.solid};
-  border-radius: ${props => (props.rounded ? space[32] : space[4])};
+  border-radius: ${props => (props.rounded ? space[32] : radius.md)};
   font-size: ${props => (props.size === 'small' ? fontSize[16] : fontSize[18])};
   width: ${props =>
     props.width === 'full'

src/components/CustomDropdown/index.js

@@ -9,6 +9,7 @@ import {
   fontWeight,
   lineHeight,
   transition,
+  radius,
 } from '../../theme'
 
 export const Menu = styled.ul`
@@ -19,7 +20,7 @@ export const Menu = styled.ul`
   list-style: none;
   left: 50%;
   transform: translateX(-50%);
-  border-radius: ${space[8]};
+  border-radius: ${radius.md};
   display: block;
   box-shadow: ${shadow.strong};
   background-color: white;
@@ -46,7 +47,7 @@ export const Item = styled.li`
   font-size: ${fontSize[24]};
   line-height: ${lineHeight.title};
   padding: ${space[4]} ${space[8]};
-  border-radius: ${space[4]};
+  border-radius: ${radius.sm};
   font-weight: ${fontWeight.regular};
   white-space: nowrap;
   color: ${props =>

src/components/Dialog/index.js

@@ -4,7 +4,14 @@ import { Transition } from 'react-spring'
 import PropTypes from 'prop-types'
 import { Portal } from '../Portal'
 import { callAll, stopPropagation } from '../../utils'
-import { space, device, sizes, fontWeight, easingFunctions } from '../../theme'
+import {
+  space,
+  device,
+  sizes,
+  fontWeight,
+  easingFunctions,
+  radius,
+} from '../../theme'
 
 const Overlay = styled.div`
   position: fixed;
@@ -29,11 +36,11 @@ const Overlay = styled.div`
 const Content = styled.div`
   width: 100%;
   background-color: white;
-  border-radius: ${space[8]} ${space[8]} 0 0;
+  border-radius: ${radius.lg} ${radius.lg} 0 0;
 
   @media ${device.mobileL} {
     width: ${sizes.mobileL / 16}em;
-    border-radius: ${space[8]};
+    border-radius: ${radius.lg};
   }
 `
 

src/components/Input/index.js

@@ -11,6 +11,7 @@ import {
   transition,
   fontSize,
   lineHeight,
+  radius,
 } from '../../theme'
 
 const InputWrapper = styled.div`
@@ -66,7 +67,7 @@ const FieldWrapper = styled.div`
 const Field = styled.input`
   font-family: inherit;
   background-color: ${color.stardust};
-  border-radius: ${props => (props.rounded ? space[32] : space[4])};
+  border-radius: ${props => (props.rounded ? space[32] : radius.md)};
   width: 100%;
   font-size: ${fontSize[18]};
   line-height: ${props =>

src/components/Toast/index.js

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types'
 import styled from 'styled-components'
 import { Transition, Spring, animated } from 'react-spring'
 import { Portal } from '../Portal'
-import { space, shadow, device, color } from '../../theme'
+import { space, shadow, device, color, radius } from '../../theme'
 
 const Container = styled.div`
   position: fixed;
@@ -27,7 +27,7 @@ const Item = styled(animated.div)`
 `
 
 export const Toast = styled.div`
-  border-radius: ${space[8]};
+  border-radius: ${radius.lg};
   background-color: ${color.stardustLight};
   box-shadow: ${shadow.strong};
   padding: ${space[16]};

src/theme.js

@@ -87,6 +87,12 @@ export const space = {
   768: '48rem',
 }
 
+export const radius = {
+  sm: space[4],
+  md: space[8],
+  lg: space[16],
+}
+
 export const easing = {
   easeInQuad: 'cubic-bezier(.55, .085, .68, .53)',
   easeInCubic: 'cubic-bezier(.550, .055, .675, .19)',