Repository: uber-web/baseui
Pull request #927 (2019-02-21 21:08:30)

fix(radio, checkbox): Correct spacing and font weights for radios and checkboxes

#### Description

This PR fixes various, incredibly minor style inconsistencies on form controls—bear with me.

Currently, the left alignment for checkboxes looks strange, especially when stacked on top of other content (inputs, for example). This is because of a 6px left margin on checkboxes + radios that shouldn't exist. I changed the spacing of everything to match what's in Figma (2px margin around the checkbox, and then 8px between the checkbox and label). 

Hopefully this diagram helps (top, current in design; bottom, current in react):

<img width="1009" alt="screen shot 2019-02-21 at 12 20 46 pm" src="https://user-images.githubusercontent.com/6953488/53199189-43994300-35d3-11e9-8272-fcfcc7333f79.png">

I also fixed the radio font weight which was bugging me for a while; all form labels should be at medium as per Figma.

#### Scope

- [x] Patch: Bug Fix
- [ ] Minor: New Feature
- [ ] Major: Breaking Change



Patch:
diff --git a/documentation-site/static/examples/checkbox/alignment.js b/documentation-site/static/examples/checkbox/alignment.js
index 1d3f7ca68..dd362d734 100644
--- a/documentation-site/static/examples/checkbox/alignment.js
+++ b/documentation-site/static/examples/checkbox/alignment.js
@@ -3,9 +3,23 @@ import {StatefulCheckbox} from 'baseui/checkbox';
 
 export default () => (
   <React.Fragment>
-    <StatefulCheckbox onChange={console.log} labelPlacement="left">
-      Label on the left
+    <StatefulCheckbox onChange={console.log} labelPlacement="top">
+      Label on the top
     </StatefulCheckbox>
+    <div
+      style={{
+        display: 'flex',
+        justifyContent: 'center',
+        margin: '8px 0px 8px 12px',
+      }}
+    >
+      <StatefulCheckbox onChange={console.log} labelPlacement="left">
+        Label on the left
+      </StatefulCheckbox>
+      <StatefulCheckbox onChange={console.log} labelPlacement="right">
+        Label on the right
+      </StatefulCheckbox>
+    </div>
     <StatefulCheckbox onChange={console.log} labelPlacement="bottom">
       Label on the bottom
     </StatefulCheckbox>
diff --git a/src/checkbox/styled-components.js b/src/checkbox/styled-components.js
index b457786e6..d49a03494 100644
--- a/src/checkbox/styled-components.js
+++ b/src/checkbox/styled-components.js
@@ -24,12 +24,26 @@ function getBorderColor(props) {
 
 function getLabelPadding(props) {
   const {$labelPlacement = '', $theme} = props;
+  let paddingDirection;
+  switch ($labelPlacement) {
+    case 'top':
+      paddingDirection = 'Bottom';
+      break;
+    case 'bottom':
+      paddingDirection = 'Top';
+      break;
+    case 'left':
+      paddingDirection = 'Right';
+      break;
+    default:
+    case 'right':
+      paddingDirection = 'Left';
+      break;
+  }
   const {sizing} = $theme;
-  const {scale200} = sizing;
-  const paddingSide =
-    'padding' + $labelPlacement.replace(/^\w/, c => c.toUpperCase());
+  const {scale300} = sizing;
   return {
-    [paddingSide]: scale200,
+    [`padding${paddingDirection}`]: scale300,
   };
 }
 
@@ -168,8 +182,8 @@ export const Checkmark = styled('span', props => {
     backgroundPosition: 'center',
     marginTop: $theme.sizing.scale0,
     marginBottom: $theme.sizing.scale0,
-    marginLeft: $theme.sizing.scale200,
-    marginRight: $theme.sizing.scale200,
+    marginLeft: $theme.sizing.scale0,
+    marginRight: $theme.sizing.scale0,
   };
 });
 
@@ -194,6 +208,7 @@ export const Input = styled('input', {
   overflow: 'hidden',
   margin: 0,
   padding: 0,
+  position: 'absolute',
 });
 
 export const Toggle = styled('div', props => ({
diff --git a/src/radio/styled-components.js b/src/radio/styled-components.js
index 30c23ec91..cc9799bc6 100644
--- a/src/radio/styled-components.js
+++ b/src/radio/styled-components.js
@@ -19,13 +19,26 @@ function getBorderColor(props) {
 
 function getLabelPadding(props) {
   const {$labelPlacement = '', $theme} = props;
-  const {
-    sizing: {scale200},
-  } = $theme;
-  const paddingSide =
-    'padding' + $labelPlacement.replace(/^\w/, c => c.toUpperCase());
+  let paddingDirection;
+  switch ($labelPlacement) {
+    case 'top':
+      paddingDirection = 'Bottom';
+      break;
+    case 'bottom':
+      paddingDirection = 'Top';
+      break;
+    case 'left':
+      paddingDirection = 'Right';
+      break;
+    default:
+    case 'right':
+      paddingDirection = 'Left';
+      break;
+  }
+  const {sizing} = $theme;
+  const {scale300} = sizing;
   return {
-    [paddingSide]: scale200,
+    [`padding${paddingDirection}`]: scale300,
   };
 }
 
@@ -46,7 +59,8 @@ export const RadioGroupRoot = styled('div', props => {
 });
 
 export const Root = styled('label', props => {
-  const {$disabled, $labelPlacement} = props;
+  const {$disabled, $labelPlacement, $theme} = props;
+  const {sizing} = $theme;
   return {
     flexDirection:
       $labelPlacement === 'top' || $labelPlacement === 'bottom'
@@ -55,6 +69,8 @@ export const Root = styled('label', props => {
     display: 'flex',
     alignItems: 'center',
     cursor: $disabled ? 'not-allowed' : 'pointer',
+    marginTop: sizing.scale200,
+    marginBottom: sizing.scale200,
   };
 });
 
@@ -95,10 +111,10 @@ export const RadioMarkOuter = styled('div', props => {
     display: 'flex',
     height: sizing.scale700,
     justifyContent: 'center',
-    marginTop: sizing.scale200,
-    marginRight: sizing.scale200,
-    marginBottom: sizing.scale200,
-    marginLeft: sizing.scale200,
+    marginTop: sizing.scale0,
+    marginRight: sizing.scale0,
+    marginBottom: sizing.scale0,
+    marginLeft: sizing.scale0,
     verticalAlign: 'middle',
     width: sizing.scale700,
     flexShrink: 0,
@@ -113,7 +129,7 @@ export const Label = styled('div', props => {
     verticalAlign: 'middle',
     ...getLabelPadding(props),
     color: getLabelColor(props),
-    ...typography.font400,
+    ...typography.font450,
   };
 });
 
@@ -124,4 +140,5 @@ export const Input = styled('input', {
   overflow: 'hidden',
   margin: 0,
   padding: 0,
+  position: 'absolute',
 });


Test patch:
diff --git a/src/checkbox/__tests__/__snapshots__/styled-components.test.js.snap b/src/checkbox/__tests__/__snapshots__/styled-components.test.js.snap
index 09bbff943..b96dfdd0c 100644
--- a/src/checkbox/__tests__/__snapshots__/styled-components.test.js.snap
+++ b/src/checkbox/__tests__/__snapshots__/styled-components.test.js.snap
@@ -16,8 +16,8 @@ Object {
   "height": "$theme.sizing.scale700",
   "left": "4px",
   "marginBottom": "$theme.sizing.scale0",
-  "marginLeft": "$theme.sizing.scale200",
-  "marginRight": "$theme.sizing.scale200",
+  "marginLeft": "$theme.sizing.scale0",
+  "marginRight": "$theme.sizing.scale0",
   "marginTop": "$theme.sizing.scale0",
   "top": "4px",
   "transitionDuration": "$theme.animation.timing100",
@@ -43,8 +43,8 @@ Object {
   "height": "$theme.sizing.scale700",
   "left": "4px",
   "marginBottom": "$theme.sizing.scale0",
-  "marginLeft": "$theme.sizing.scale200",
-  "marginRight": "$theme.sizing.scale200",
+  "marginLeft": "$theme.sizing.scale0",
+  "marginRight": "$theme.sizing.scale0",
   "marginTop": "$theme.sizing.scale0",
   "top": "4px",
   "transitionDuration": "$theme.animation.timing100",
@@ -70,8 +70,8 @@ Object {
   "height": "$theme.sizing.scale700",
   "left": "4px",
   "marginBottom": "$theme.sizing.scale0",
-  "marginLeft": "$theme.sizing.scale200",
-  "marginRight": "$theme.sizing.scale200",
+  "marginLeft": "$theme.sizing.scale0",
+  "marginRight": "$theme.sizing.scale0",
   "marginTop": "$theme.sizing.scale0",
   "top": "4px",
   "transitionDuration": "$theme.animation.timing100",
@@ -97,8 +97,8 @@ Object {
   "height": "$theme.sizing.scale700",
   "left": "4px",
   "marginBottom": "$theme.sizing.scale0",
-  "marginLeft": "$theme.sizing.scale200",
-  "marginRight": "$theme.sizing.scale200",
+  "marginLeft": "$theme.sizing.scale0",
+  "marginRight": "$theme.sizing.scale0",
   "marginTop": "$theme.sizing.scale0",
   "top": "4px",
   "transitionDuration": "$theme.animation.timing100",
@@ -124,8 +124,8 @@ Object {
   "height": "$theme.sizing.scale700",
   "left": "4px",
   "marginBottom": "$theme.sizing.scale0",
-  "marginLeft": "$theme.sizing.scale200",
-  "marginRight": "$theme.sizing.scale200",
+  "marginLeft": "$theme.sizing.scale0",
+  "marginRight": "$theme.sizing.scale0",
   "marginTop": "$theme.sizing.scale0",
   "top": "4px",
   "transitionDuration": "$theme.animation.timing100",
@@ -151,8 +151,8 @@ Object {
   "height": "$theme.sizing.scale700",
   "left": "4px",
   "marginBottom": "$theme.sizing.scale0",
-  "marginLeft": "$theme.sizing.scale200",
-  "marginRight": "$theme.sizing.scale200",
+  "marginLeft": "$theme.sizing.scale0",
+  "marginRight": "$theme.sizing.scale0",
   "marginTop": "$theme.sizing.scale0",
   "top": "4px",
   "transitionDuration": "$theme.animation.timing100",
@@ -178,8 +178,8 @@ Object {
   "height": "$theme.sizing.scale700",
   "left": "4px",
   "marginBottom": "$theme.sizing.scale0",
-  "marginLeft": "$theme.sizing.scale200",
-  "marginRight": "$theme.sizing.scale200",
+  "marginLeft": "$theme.sizing.scale0",
+  "marginRight": "$theme.sizing.scale0",
   "marginTop": "$theme.sizing.scale0",
   "top": "4px",
   "transitionDuration": "$theme.animation.timing100",
@@ -205,8 +205,8 @@ Object {
   "height": "$theme.sizing.scale700",
   "left": "4px",
   "marginBottom": "$theme.sizing.scale0",
-  "marginLeft": "$theme.sizing.scale200",
-  "marginRight": "$theme.sizing.scale200",
+  "marginLeft": "$theme.sizing.scale0",
+  "marginRight": "$theme.sizing.scale0",
   "marginTop": "$theme.sizing.scale0",
   "top": "4px",
   "transitionDuration": "$theme.animation.timing100",
@@ -232,8 +232,8 @@ Object {
   "height": "$theme.sizing.scale700",
   "left": "4px",
   "marginBottom": "$theme.sizing.scale0",
-  "marginLeft": "$theme.sizing.scale200",
-  "marginRight": "$theme.sizing.scale200",
+  "marginLeft": "$theme.sizing.scale0",
+  "marginRight": "$theme.sizing.scale0",
   "marginTop": "$theme.sizing.scale0",
   "top": "4px",
   "transitionDuration": "$theme.animation.timing100",
@@ -259,8 +259,8 @@ Object {
   "height": "$theme.sizing.scale700",
   "left": "4px",
   "marginBottom": "$theme.sizing.scale0",
-  "marginLeft": "$theme.sizing.scale200",
-  "marginRight": "$theme.sizing.scale200",
+  "marginLeft": "$theme.sizing.scale0",
+  "marginRight": "$theme.sizing.scale0",
   "marginTop": "$theme.sizing.scale0",
   "top": "4px",
   "transitionDuration": "$theme.animation.timing100",
@@ -286,8 +286,8 @@ Object {
   "height": "$theme.sizing.scale700",
   "left": "4px",
   "marginBottom": "$theme.sizing.scale0",
-  "marginLeft": "$theme.sizing.scale200",
-  "marginRight": "$theme.sizing.scale200",
+  "marginLeft": "$theme.sizing.scale0",
+  "marginRight": "$theme.sizing.scale0",
   "marginTop": "$theme.sizing.scale0",
   "top": "4px",
   "transitionDuration": "$theme.animation.timing100",
@@ -313,8 +313,8 @@ Object {
   "height": "$theme.sizing.scale700",
   "left": "4px",
   "marginBottom": "$theme.sizing.scale0",
-  "marginLeft": "$theme.sizing.scale200",
-  "marginRight": "$theme.sizing.scale200",
+  "marginLeft": "$theme.sizing.scale0",
+  "marginRight": "$theme.sizing.scale0",
   "marginTop": "$theme.sizing.scale0",
   "top": "4px",
   "transitionDuration": "$theme.animation.timing100",
@@ -340,8 +340,8 @@ Object {
   "height": "$theme.sizing.scale700",
   "left": "4px",
   "marginBottom": "$theme.sizing.scale0",
-  "marginLeft": "$theme.sizing.scale200",
-  "marginRight": "$theme.sizing.scale200",
+  "marginLeft": "$theme.sizing.scale0",
+  "marginRight": "$theme.sizing.scale0",
   "marginTop": "$theme.sizing.scale0",
   "top": "4px",
   "transitionDuration": "$theme.animation.timing100",
@@ -367,8 +367,8 @@ Object {
   "height": "$theme.sizing.scale700",
   "left": "4px",
   "marginBottom": "$theme.sizing.scale0",
-  "marginLeft": "$theme.sizing.scale200",
-  "marginRight": "$theme.sizing.scale200",
+  "marginLeft": "$theme.sizing.scale0",
+  "marginRight": "$theme.sizing.scale0",
   "marginTop": "$theme.sizing.scale0",
   "top": "4px",
   "transitionDuration": "$theme.animation.timing100",
@@ -394,8 +394,8 @@ Object {
   "height": "$theme.sizing.scale700",
   "left": "4px",
   "marginBottom": "$theme.sizing.scale0",
-  "marginLeft": "$theme.sizing.scale200",
-  "marginRight": "$theme.sizing.scale200",
+  "marginLeft": "$theme.sizing.scale0",
+  "marginRight": "$theme.sizing.scale0",
   "marginTop": "$theme.sizing.scale0",
   "top": "4px",
   "transitionDuration": "$theme.animation.timing100",
@@ -421,8 +421,8 @@ Object {
   "height": "$theme.sizing.scale700",
   "left": "4px",
   "marginBottom": "$theme.sizing.scale0",
-  "marginLeft": "$theme.sizing.scale200",
-  "marginRight": "$theme.sizing.scale200",
+  "marginLeft": "$theme.sizing.scale0",
+  "marginRight": "$theme.sizing.scale0",
   "marginTop": "$theme.sizing.scale0",
   "top": "4px",
   "transitionDuration": "$theme.animation.timing100",
@@ -448,8 +448,8 @@ Object {
   "height": "$theme.sizing.scale700",
   "left": "4px",
   "marginBottom": "$theme.sizing.scale0",
-  "marginLeft": "$theme.sizing.scale200",
-  "marginRight": "$theme.sizing.scale200",
+  "marginLeft": "$theme.sizing.scale0",
+  "marginRight": "$theme.sizing.scale0",
   "marginTop": "$theme.sizing.scale0",
   "top": "4px",
   "transitionDuration": "$theme.animation.timing100",
@@ -475,8 +475,8 @@ Object {
   "height": "$theme.sizing.scale700",
   "left": "4px",
   "marginBottom": "$theme.sizing.scale0",
-  "marginLeft": "$theme.sizing.scale200",
-  "marginRight": "$theme.sizing.scale200",
+  "marginLeft": "$theme.sizing.scale0",
+  "marginRight": "$theme.sizing.scale0",
   "marginTop": "$theme.sizing.scale0",
   "top": "4px",
   "transitionDuration": "$theme.animation.timing100",
@@ -502,8 +502,8 @@ Object {
   "height": "$theme.sizing.scale700",
   "left": "4px",
   "marginBottom": "$theme.sizing.scale0",
-  "marginLeft": "$theme.sizing.scale200",
-  "marginRight": "$theme.sizing.scale200",
+  "marginLeft": "$theme.sizing.scale0",
+  "marginRight": "$theme.sizing.scale0",
   "marginTop": "$theme.sizing.scale0",
   "top": "4px",
   "transitionDuration": "$theme.animation.timing100",
@@ -520,6 +520,7 @@ Object {
   "opacity": 0,
   "overflow": "hidden",
   "padding": 0,
+  "position": "absolute",
   "width": 0,
 }
 `;
@@ -532,7 +533,7 @@ Object {
   "fontSize": "$theme.typography.font350.fontSize",
   "fontWeight": "$theme.typography.font350.fontWeight",
   "lineHeight": "24px",
-  "padding": "$theme.sizing.scale200",
+  "paddingLeft": "$theme.sizing.scale300",
   "verticalAlign": "middle",
 }
 `;
@@ -545,7 +546,7 @@ Object {
   "fontSize": "$theme.typography.font350.fontSize",
   "fontWeight": "$theme.typography.font350.fontWeight",
   "lineHeight": "24px",
-  "padding": "$theme.sizing.scale200",
+  "paddingLeft": "$theme.sizing.scale300",
   "verticalAlign": "middle",
 }
 `;
@@ -558,7 +559,7 @@ Object {
   "fontSize": "$theme.typography.font350.fontSize",
   "fontWeight": "$theme.typography.font350.fontWeight",
   "lineHeight": "24px",
-  "padding": "$theme.sizing.scale200",
+  "paddingLeft": "$theme.sizing.scale300",
   "verticalAlign": "middle",
 }
 `;
@@ -571,7 +572,7 @@ Object {
   "fontSize": "$theme.typography.font350.fontSize",
   "fontWeight": "$theme.typography.font350.fontWeight",
   "lineHeight": "24px",
-  "paddingBottom": "$theme.sizing.scale200",
+  "paddingTop": "$theme.sizing.scale300",
   "verticalAlign": "middle",
 }
 `;
@@ -584,7 +585,7 @@ Object {
   "fontSize": "$theme.typography.font350.fontSize",
   "fontWeight": "$theme.typography.font350.fontWeight",
   "lineHeight": "24px",
-  "paddingLeft": "$theme.sizing.scale200",
+  "paddingRight": "$theme.sizing.scale300",
   "verticalAlign": "middle",
 }
 `;
@@ -597,7 +598,7 @@ Object {
   "fontSize": "$theme.typography.font350.fontSize",
   "fontWeight": "$theme.typography.font350.fontWeight",
   "lineHeight": "24px",
-  "paddingRight": "$theme.sizing.scale200",
+  "paddingLeft": "$theme.sizing.scale300",
   "verticalAlign": "middle",
 }
 `;
@@ -610,7 +611,7 @@ Object {
   "fontSize": "$theme.typography.font350.fontSize",
   "fontWeight": "$theme.typography.font350.fontWeight",
   "lineHeight": "24px",
-  "paddingTop": "$theme.sizing.scale200",
+  "paddingBottom": "$theme.sizing.scale300",
   "verticalAlign": "middle",
 }
 `;
diff --git a/src/radio/__tests__/__snapshots__/styled-components.test.js.snap b/src/radio/__tests__/__snapshots__/styled-components.test.js.snap
index a1f922729..97d55f3bd 100644
--- a/src/radio/__tests__/__snapshots__/styled-components.test.js.snap
+++ b/src/radio/__tests__/__snapshots__/styled-components.test.js.snap
@@ -6,6 +6,7 @@ Object {
   "opacity": 0,
   "overflow": "hidden",
   "padding": 0,
+  "position": "absolute",
   "width": 0,
 }
 `;
@@ -13,11 +14,11 @@ Object {
 exports[`RadioGroup styled components StyledLabel : has correct styles when  1`] = `
 Object {
   "color": "$theme.colors.foreground",
-  "fontFamily": "$theme.typography.font400.fontFamily",
-  "fontSize": "$theme.typography.font400.fontSize",
-  "fontWeight": "$theme.typography.font400.fontWeight",
-  "lineHeight": "$theme.typography.font400.lineHeight",
-  "padding": "$theme.sizing.scale200",
+  "fontFamily": "$theme.typography.font450.fontFamily",
+  "fontSize": "$theme.typography.font450.fontSize",
+  "fontWeight": "$theme.typography.font450.fontWeight",
+  "lineHeight": "$theme.typography.font450.lineHeight",
+  "paddingLeft": "$theme.sizing.scale300",
   "verticalAlign": "middle",
 }
 `;
@@ -25,11 +26,11 @@ Object {
 exports[`RadioGroup styled components StyledLabel : has correct styles when $isError 1`] = `
 Object {
   "color": "$theme.colors.foreground",
-  "fontFamily": "$theme.typography.font400.fontFamily",
-  "fontSize": "$theme.typography.font400.fontSize",
-  "fontWeight": "$theme.typography.font400.fontWeight",
-  "lineHeight": "$theme.typography.font400.lineHeight",
-  "padding": "$theme.sizing.scale200",
+  "fontFamily": "$theme.typography.font450.fontFamily",
+  "fontSize": "$theme.typography.font450.fontSize",
+  "fontWeight": "$theme.typography.font450.fontWeight",
+  "lineHeight": "$theme.typography.font450.lineHeight",
+  "paddingLeft": "$theme.sizing.scale300",
   "verticalAlign": "middle",
 }
 `;
@@ -37,11 +38,11 @@ Object {
 exports[`RadioGroup styled components StyledLabel : has correct styles when disabled 1`] = `
 Object {
   "color": "$theme.colors.foreground",
-  "fontFamily": "$theme.typography.font400.fontFamily",
-  "fontSize": "$theme.typography.font400.fontSize",
-  "fontWeight": "$theme.typography.font400.fontWeight",
-  "lineHeight": "$theme.typography.font400.lineHeight",
-  "padding": "$theme.sizing.scale200",
+  "fontFamily": "$theme.typography.font450.fontFamily",
+  "fontSize": "$theme.typography.font450.fontSize",
+  "fontWeight": "$theme.typography.font450.fontWeight",
+  "lineHeight": "$theme.typography.font450.lineHeight",
+  "paddingLeft": "$theme.sizing.scale300",
   "verticalAlign": "middle",
 }
 `;
@@ -49,11 +50,11 @@ Object {
 exports[`RadioGroup styled components StyledLabel Label: StyledLabel has correct styles when set to bottom 1`] = `
 Object {
   "color": "$theme.colors.foreground",
-  "fontFamily": "$theme.typography.font400.fontFamily",
-  "fontSize": "$theme.typography.font400.fontSize",
-  "fontWeight": "$theme.typography.font400.fontWeight",
-  "lineHeight": "$theme.typography.font400.lineHeight",
-  "paddingBottom": "$theme.sizing.scale200",
+  "fontFamily": "$theme.typography.font450.fontFamily",
+  "fontSize": "$theme.typography.font450.fontSize",
+  "fontWeight": "$theme.typography.font450.fontWeight",
+  "lineHeight": "$theme.typography.font450.lineHeight",
+  "paddingTop": "$theme.sizing.scale300",
   "verticalAlign": "middle",
 }
 `;
@@ -61,11 +62,11 @@ Object {
 exports[`RadioGroup styled components StyledLabel Label: StyledLabel has correct styles when set to left 1`] = `
 Object {
   "color": "$theme.colors.foreground",
-  "fontFamily": "$theme.typography.font400.fontFamily",
-  "fontSize": "$theme.typography.font400.fontSize",
-  "fontWeight": "$theme.typography.font400.fontWeight",
-  "lineHeight": "$theme.typography.font400.lineHeight",
-  "paddingLeft": "$theme.sizing.scale200",
+  "fontFamily": "$theme.typography.font450.fontFamily",
+  "fontSize": "$theme.typography.font450.fontSize",
+  "fontWeight": "$theme.typography.font450.fontWeight",
+  "lineHeight": "$theme.typography.font450.lineHeight",
+  "paddingRight": "$theme.sizing.scale300",
   "verticalAlign": "middle",
 }
 `;
@@ -73,11 +74,11 @@ Object {
 exports[`RadioGroup styled components StyledLabel Label: StyledLabel has correct styles when set to right 1`] = `
 Object {
   "color": "$theme.colors.foreground",
-  "fontFamily": "$theme.typography.font400.fontFamily",
-  "fontSize": "$theme.typography.font400.fontSize",
-  "fontWeight": "$theme.typography.font400.fontWeight",
-  "lineHeight": "$theme.typography.font400.lineHeight",
-  "paddingRight": "$theme.sizing.scale200",
+  "fontFamily": "$theme.typography.font450.fontFamily",
+  "fontSize": "$theme.typography.font450.fontSize",
+  "fontWeight": "$theme.typography.font450.fontWeight",
+  "lineHeight": "$theme.typography.font450.lineHeight",
+  "paddingLeft": "$theme.sizing.scale300",
   "verticalAlign": "middle",
 }
 `;
@@ -85,11 +86,11 @@ Object {
 exports[`RadioGroup styled components StyledLabel Label: StyledLabel has correct styles when set to top 1`] = `
 Object {
   "color": "$theme.colors.foreground",
-  "fontFamily": "$theme.typography.font400.fontFamily",
-  "fontSize": "$theme.typography.font400.fontSize",
-  "fontWeight": "$theme.typography.font400.fontWeight",
-  "lineHeight": "$theme.typography.font400.lineHeight",
-  "paddingTop": "$theme.sizing.scale200",
+  "fontFamily": "$theme.typography.font450.fontFamily",
+  "fontSize": "$theme.typography.font450.fontSize",
+  "fontWeight": "$theme.typography.font450.fontWeight",
+  "lineHeight": "$theme.typography.font450.lineHeight",
+  "paddingBottom": "$theme.sizing.scale300",
   "verticalAlign": "middle",
 }
 `;
@@ -206,10 +207,10 @@ Object {
   "flexShrink": 0,
   "height": "$theme.sizing.scale700",
   "justifyContent": "center",
-  "marginBottom": "$theme.sizing.scale200",
-  "marginLeft": "$theme.sizing.scale200",
-  "marginRight": "$theme.sizing.scale200",
-  "marginTop": "$theme.sizing.scale200",
+  "marginBottom": "$theme.sizing.scale0",
+  "marginLeft": "$theme.sizing.scale0",
+  "marginRight": "$theme.sizing.scale0",
+  "marginTop": "$theme.sizing.scale0",
   "verticalAlign": "middle",
   "width": "$theme.sizing.scale700",
 }
@@ -221,6 +222,8 @@ Object {
   "cursor": "pointer",
   "display": "flex",
   "flexDirection": "row",
+  "marginBottom": "$theme.sizing.scale200",
+  "marginTop": "$theme.sizing.scale200",
 }
 `;
 
@@ -230,6 +233,8 @@ Object {
   "cursor": "pointer",
   "display": "flex",
   "flexDirection": "column",
+  "marginBottom": "$theme.sizing.scale200",
+  "marginTop": "$theme.sizing.scale200",
 }
 `;
 
@@ -239,6 +244,8 @@ Object {
   "cursor": "pointer",
   "display": "flex",
   "flexDirection": "row",
+  "marginBottom": "$theme.sizing.scale200",
+  "marginTop": "$theme.sizing.scale200",
 }
 `;
 
@@ -248,6 +255,8 @@ Object {
   "cursor": "pointer",
   "display": "flex",
   "flexDirection": "row",
+  "marginBottom": "$theme.sizing.scale200",
+  "marginTop": "$theme.sizing.scale200",
 }
 `;
 
@@ -257,5 +266,7 @@ Object {
   "cursor": "pointer",
   "display": "flex",
   "flexDirection": "column",
+  "marginBottom": "$theme.sizing.scale200",
+  "marginTop": "$theme.sizing.scale200",
 }
 `;