Use theme-level borderRadius instead of hardcoding

addons/a11y/src/components/Report/Tags.js

@@ -13,7 +13,7 @@ const Item = styled.div(({ theme }) => ({
   margin: '0 6px',
   padding: '5px',
   border: `1px solid ${theme.mainBorderColor}`,
-  borderRadius: 4,
+  borderRadius: theme.mainBorderRadius,
 }));
 
 function Tags({ tags }) {

addons/knobs/src/components/types/Color.js

@@ -14,8 +14,8 @@ const Swatch = styled.div(({ theme }) => ({
   top: '50%',
   transform: 'translateY(-50%)',
   left: 6,
-  width: 20,
-  height: 20,
+  width: 16,
+  height: 16,
   boxShadow: `${theme.mainBorderColor} 0 0 0 1px inset`,
   borderRadius: '1rem',
 }));

addons/storysource/src/StoryPanel.js

@@ -9,7 +9,7 @@ import { EVENT_ID } from './events';
 const StyledStoryLink = styled(Link)(({ theme }) => ({
   display: 'block',
   textDecoration: 'none',
-  borderRadius: 4,
+  borderRadius: theme.mainBorderRadius,
   '&:hover': {
     background: theme.background.select,
   },
@@ -17,7 +17,7 @@ const StyledStoryLink = styled(Link)(({ theme }) => ({
 
 const SelectedStoryHighlight = styled.div(({ theme }) => ({
   background: theme.background.select,
-  borderRadius: 4,
+  borderRadius: theme.mainBorderRadius,
 }));
 
 const StyledSyntaxHighlighter = styled(SyntaxHighlighter)(({ theme }) => ({

lib/components/src/form/input/input.js

@@ -25,7 +25,7 @@ const styles = ({ theme }) => ({
   color: theme.mainTextColor,
   background: theme.inputFill,
   boxShadow: `${theme.inputBorder} 0 0 0 1px inset`,
-  borderRadius: 4,
+  borderRadius: theme.mainBorderRadius,
   fontSize: theme.mainTextSize,
   lineHeight: '20px',
   padding: '.42em 1em', // 32
@@ -112,16 +112,20 @@ export const Textarea = styled(TextareaAutoResize)(styles, sizes, alignment, val
 Textarea.displayName = 'Textarea';
 
 export const Button = withProps({ tertiary: true, small: true, inForm: true })(
-  styled(StyledButton)(sizes, validation, {
-    borderRadius: 4,
-    userSelect: 'none',
-    overflow: 'visible',
-    zIndex: 2,
+  styled(StyledButton)(
+    sizes,
+    validation,
+    ({ theme }) => ({ borderRadius: theme.mainBorderRadius }),
+    {
+      userSelect: 'none',
+      overflow: 'visible',
+      zIndex: 2,
 
-    // overrides the default hover from Button
-    '&:hover': {
-      transform: 'none',
-    },
-  })
+      // overrides the default hover from Button
+      '&:hover': {
+        transform: 'none',
+      },
+    }
+  )
 );
 Button.displayName = 'Button';

lib/components/src/syntaxhighlighter/syntaxhighlighter.js

@@ -31,7 +31,7 @@ const Wrapper = styled.div(
     bordered
       ? {
           border: `1px solid ${theme.mainBorderColor}`,
-          borderRadius: 4,
+          borderRadius: theme.mainBorderRadius,
           background: theme.barFill,
         }
       : {}

lib/components/src/tabs/tabs.js

@@ -11,7 +11,7 @@ const Wrapper = styled.div(
     bordered
       ? {
           backgroundClip: 'padding-box',
-          borderRadius: 4,
+          borderRadius: theme.mainBorderRadius,
           border: `1px solid ${theme.mainBorderColor}`,
         }
       : {},

lib/components/src/tooltip/Tooltip.js

@@ -83,7 +83,7 @@ const Wrapper = styled.div(
             drop-shadow(0px 5px 15px rgba(0, 0, 0, 0.1))
             drop-shadow(0 2px 5px rgba(0, 0, 0, 0.05))
           `,
-          borderRadius: 4,
+          borderRadius: theme.mainBorderRadius,
           fontSize: `${theme.typography.size.s1}px`,
         }
       : {

lib/ui/src/components/layout/container.js

@@ -82,7 +82,7 @@ const Paper = styled.div(
     width: '100%',
     height: '100%',
   },
-  ({ isFullscreen }) =>
+  ({ isFullscreen, theme }) =>
     isFullscreen
       ? {
           boxShadow: 'none',
@@ -90,7 +90,7 @@ const Paper = styled.div(
         }
       : {
           background: 'white',
-          borderRadius: 4,
+          borderRadius: theme.mainBorderRadius,
           overflow: 'hidden',
           boxShadow: '0 1px 5px 0 rgba(0, 0, 0, 0.1)',
         }

lib/ui/src/components/sidebar/SidebarHeading.js

@@ -37,7 +37,7 @@ const MenuButton = styled(Button)(props => ({
       right: 0,
       width: 8,
       height: 8,
-      borderRadius: 4,
+      borderRadius: 8,
       background: `${props.theme.color.positive}`,
     },
   }),

lib/ui/src/settings/about.js

@@ -68,7 +68,7 @@ const UpdateMessage = styled.div(
     height: 40,
     padding: '10px 20px',
     marginBottom: 24,
-    borderRadius: 4,
+    borderRadius: theme.mainBorderRadius,
     border: `1px solid ${theme.mainBorderColor}`,
     textAlign: 'center',
   })