Repository: uber-web/baseui
Pull request #648 (2018-12-13 20:47:47)

fix: Various type fixes
Fixes lots of little type/style bugs that became inconsistent with Figma.

- Uber Move theme uses 500 instead of 700 for bold. I kept the default light theme at 700 since fonts without a 500 weight fall back to regular weight.

- Buttons use a slightly bigger label font

- Toasts/inline notifs become bold

- Checkboxes use same fill/stroke when disabled

- Cards have consistent heading sizes

- Tags use font250 instead of font200 + bold

gergelyke: thanks @nguyensomniac ! would you mind either splitting into multiple PRs, or add the affected components to the commit message?
nguyensomniac: > thanks @nguyensomniac ! would you mind either splitting into multiple PRs, or add the affected components to the commit message?

done 👍 

Patch:
diff --git a/src/button/styled-components.js b/src/button/styled-components.js
index 0ac3dcd54..cf823524d 100644
--- a/src/button/styled-components.js
+++ b/src/button/styled-components.js
@@ -20,7 +20,7 @@ export const BaseButton = styled(
     position: 'relative',
     ...($size === SIZE.compact
       ? $theme.typography.font250
-      : $theme.typography.font350),
+      : $theme.typography.font450),
     display: 'inline-flex',
     alignItems: 'center',
     justifyContent: 'center',
diff --git a/src/card/styled-components.js b/src/card/styled-components.js
index 238458203..55070a0b5 100644
--- a/src/card/styled-components.js
+++ b/src/card/styled-components.js
@@ -71,9 +71,8 @@ Thumbnail.displayName = 'StyledThumbnail';
 export const Title = styled('h1', ({$hasThumbnail, $theme}) => {
   const {colors, sizing, typography} = $theme;
   return {
-    ...typography.font600,
+    ...typography.font500,
     color: colors.foreground,
-    fontSize: $hasThumbnail ? sizing.scale600 : sizing.scale700,
     fontWeight: 500,
     margin: `0 0 ${sizing.scale300} 0`,
     padding: 0,
diff --git a/src/checkbox/styled-components.js b/src/checkbox/styled-components.js
index 6288e7921..416a5ac74 100644
--- a/src/checkbox/styled-components.js
+++ b/src/checkbox/styled-components.js
@@ -12,7 +12,7 @@ function getBorderColor(props) {
   const {$disabled, $checked, $isError, $isIndeterminate, $theme} = props;
   const {colors} = $theme;
   if ($disabled) {
-    return colors.mono300;
+    return colors.tickFillDisabled;
   } else if ($checked || $isIndeterminate) {
     return 'transparent';
   } else if ($isError) {
diff --git a/src/tag/styled-components.js b/src/tag/styled-components.js
index 90c7cffbb..a23c1437a 100644
--- a/src/tag/styled-components.js
+++ b/src/tag/styled-components.js
@@ -67,14 +67,13 @@ export const Root = styled('span', props => {
   const {$color, $disabled, $kind, $theme} = props;
   const {
     sizing: {scale800, scale100, scale500},
-    typography: {font200},
+    typography: {font250},
   } = $theme;
   const color = getColor($theme, $kind, $color);
   return {
-    ...font200,
+    ...font250,
     display: 'inline-flex',
     height: scale800,
-    fontWeight: 'bold',
     marginTop: '5px',
     marginBottom: '5px',
     marginLeft: '5px',
diff --git a/src/themes/light-theme-with-move.js b/src/themes/light-theme-with-move.js
index e8801a163..7482a1bb6 100644
--- a/src/themes/light-theme-with-move.js
+++ b/src/themes/light-theme-with-move.js
@@ -30,7 +30,7 @@ export const LightThemeMove = createTheme(
       font250: {
         fontFamily: primaryFontFamily,
         fontSize: '12px',
-        fontWeight: 'bold',
+        fontWeight: 500,
         lineHeight: '20px',
       },
       font300: {
@@ -42,7 +42,7 @@ export const LightThemeMove = createTheme(
       font350: {
         fontFamily: primaryFontFamily,
         fontSize: '14px',
-        fontWeight: 'bold',
+        fontWeight: 500,
         lineHeight: '20px',
       },
       font400: {
@@ -54,37 +54,37 @@ export const LightThemeMove = createTheme(
       font450: {
         fontFamily: primaryFontFamily,
         fontSize: '16px',
-        fontWeight: 'bold',
+        fontWeight: 500,
         lineHeight: '24px',
       },
       font500: {
         fontFamily: primaryFontFamily,
         fontSize: '20px',
-        fontWeight: 'bold',
+        fontWeight: 500,
         lineHeight: '28px',
       },
       font600: {
         fontFamily: primaryFontFamily,
         fontSize: '24px',
-        fontWeight: 'bold',
+        fontWeight: 500,
         lineHeight: '36px',
       },
       font700: {
         fontFamily: primaryFontFamily,
         fontSize: '32px',
-        fontWeight: 'bold',
+        fontWeight: 500,
         lineHeight: '48px',
       },
       font800: {
         fontFamily: primaryFontFamily,
         fontSize: '40px',
-        fontWeight: 'bold',
+        fontWeight: 500,
         lineHeight: '56px',
       },
       font900: {
         fontFamily: primaryFontFamily,
         fontSize: '52px',
-        fontWeight: 'bold',
+        fontWeight: 500,
         lineHeight: '68px',
       },
       font1000: {
diff --git a/src/toast/styled-components.js b/src/toast/styled-components.js
index be786aa96..c8e164593 100644
--- a/src/toast/styled-components.js
+++ b/src/toast/styled-components.js
@@ -110,7 +110,7 @@ export const Body = styled('div', (props: SharedStylePropsT) => {
   const {$isVisible, $kind, $type, $theme} = props;
   const isInline = $type === TYPE.inline;
   return {
-    ...$theme.typography.font300,
+    ...$theme.typography.font350,
     pointerEvents: 'auto',
     color: isInline ? getFontColor($kind, $theme) : $theme.colors.toastText,
     height: 'auto',


Test patch:
diff --git a/src/button/__tests__/__snapshots__/styled-components.test.js.snap b/src/button/__tests__/__snapshots__/styled-components.test.js.snap
index 0c954d7e6..587b74c3c 100644
--- a/src/button/__tests__/__snapshots__/styled-components.test.js.snap
+++ b/src/button/__tests__/__snapshots__/styled-components.test.js.snap
@@ -13,11 +13,11 @@ Object {
   "borderRadius": "$theme.borders.radius200",
   "cursor": "pointer",
   "display": "inline-flex",
-  "fontFamily": "$theme.typography.font350.fontFamily",
-  "fontSize": "$theme.typography.font350.fontSize",
-  "fontWeight": "$theme.typography.font350.fontWeight",
+  "fontFamily": "$theme.typography.font450.fontFamily",
+  "fontSize": "$theme.typography.font450.fontSize",
+  "fontWeight": "$theme.typography.font450.fontWeight",
   "justifyContent": "center",
-  "lineHeight": "$theme.typography.font350.lineHeight",
+  "lineHeight": "$theme.typography.font450.lineHeight",
   "outline": "none",
   "paddingBottom": "$theme.sizing.scale300",
   "paddingLeft": "$theme.sizing.scale600",
@@ -44,11 +44,11 @@ Object {
   "borderRadius": "$theme.borders.radius200",
   "cursor": "pointer",
   "display": "inline-flex",
-  "fontFamily": "$theme.typography.font350.fontFamily",
-  "fontSize": "$theme.typography.font350.fontSize",
-  "fontWeight": "$theme.typography.font350.fontWeight",
+  "fontFamily": "$theme.typography.font450.fontFamily",
+  "fontSize": "$theme.typography.font450.fontSize",
+  "fontWeight": "$theme.typography.font450.fontWeight",
   "justifyContent": "center",
-  "lineHeight": "$theme.typography.font350.lineHeight",
+  "lineHeight": "$theme.typography.font450.lineHeight",
   "outline": "none",
   "paddingBottom": "$theme.sizing.scale300",
   "paddingLeft": "$theme.sizing.scale600",
@@ -75,11 +75,11 @@ Object {
   "borderRadius": "$theme.borders.radius200",
   "cursor": "pointer",
   "display": "inline-flex",
-  "fontFamily": "$theme.typography.font350.fontFamily",
-  "fontSize": "$theme.typography.font350.fontSize",
-  "fontWeight": "$theme.typography.font350.fontWeight",
+  "fontFamily": "$theme.typography.font450.fontFamily",
+  "fontSize": "$theme.typography.font450.fontSize",
+  "fontWeight": "$theme.typography.font450.fontWeight",
   "justifyContent": "center",
-  "lineHeight": "$theme.typography.font350.lineHeight",
+  "lineHeight": "$theme.typography.font450.lineHeight",
   "outline": "none",
   "paddingBottom": "$theme.sizing.scale300",
   "paddingLeft": "$theme.sizing.scale600",
diff --git a/src/checkbox/__tests__/__snapshots__/styled-components.test.js.snap b/src/checkbox/__tests__/__snapshots__/styled-components.test.js.snap
index 1784c38da..9f861dabc 100644
--- a/src/checkbox/__tests__/__snapshots__/styled-components.test.js.snap
+++ b/src/checkbox/__tests__/__snapshots__/styled-components.test.js.snap
@@ -141,7 +141,7 @@ Object {
   "backgroundImage": "url('data:image/svg+xml;utf8,<svg width=\\"11\\" height=\\"10\\" viewBox=\\"0 0 11 10\\" fill=\\"none\\" xmlns=\\"http://www.w3.org/2000/svg\\"><path fill-rule=\\"evenodd\\" clip-rule=\\"evenodd\\" d=\\"M10.6 0.200059C11.0418 0.53143 11.1314 1.15823 10.8 1.60006L4.8 9.60006C4.62607 9.83197 4.36005 9.97699 4.07089 9.99754C3.78173 10.0181 3.49788 9.91215 3.29289 9.70717L0.292893 6.70717C-0.0976311 6.31664 -0.0976311 5.68348 0.292893 5.29295C0.683417 4.90243 1.31658 4.90243 1.70711 5.29295L3.89181 7.47765L9.2 0.400059C9.53137 -0.0417689 10.1582 -0.131312 10.6 0.200059Z\\" fill=\\"%24theme.colors.mono600\\"/></svg>');",
   "backgroundPosition": "center",
   "backgroundRepeat": "no-repeat",
-  "borderColor": "$theme.colors.mono300",
+  "borderColor": "$theme.colors.tickFillDisabled",
   "borderRadius": "$theme.borders.radius200",
   "borderStyle": "solid",
   "borderWidth": "2px",
@@ -168,7 +168,7 @@ Object {
   "backgroundImage": null,
   "backgroundPosition": "center",
   "backgroundRepeat": "no-repeat",
-  "borderColor": "$theme.colors.mono300",
+  "borderColor": "$theme.colors.tickFillDisabled",
   "borderRadius": "$theme.borders.radius200",
   "borderStyle": "solid",
   "borderWidth": "2px",
diff --git a/src/tag/__tests__/__snapshots__/styled-components.test.js.snap b/src/tag/__tests__/__snapshots__/styled-components.test.js.snap
index ad5682aa1..fbaacca3f 100644
--- a/src/tag/__tests__/__snapshots__/styled-components.test.js.snap
+++ b/src/tag/__tests__/__snapshots__/styled-components.test.js.snap
@@ -50,12 +50,12 @@ Object {
   "color": undefined,
   "cursor": "auto",
   "display": "inline-flex",
-  "fontFamily": "$theme.typography.font200.fontFamily",
-  "fontSize": "$theme.typography.font200.fontSize",
-  "fontWeight": "bold",
+  "fontFamily": "$theme.typography.font250.fontFamily",
+  "fontSize": "$theme.typography.font250.fontSize",
+  "fontWeight": "$theme.typography.font250.fontWeight",
   "height": "$theme.sizing.scale800",
   "justifyContent": "space-between",
-  "lineHeight": "$theme.typography.font200.lineHeight",
+  "lineHeight": "$theme.typography.font250.lineHeight",
   "marginBottom": "5px",
   "marginLeft": "5px",
   "marginRight": "5px",
@@ -81,12 +81,12 @@ Object {
   "color": undefined,
   "cursor": "not-allowed",
   "display": "inline-flex",
-  "fontFamily": "$theme.typography.font200.fontFamily",
-  "fontSize": "$theme.typography.font200.fontSize",
-  "fontWeight": "bold",
+  "fontFamily": "$theme.typography.font250.fontFamily",
+  "fontSize": "$theme.typography.font250.fontSize",
+  "fontWeight": "$theme.typography.font250.fontWeight",
   "height": "$theme.sizing.scale800",
   "justifyContent": "space-between",
-  "lineHeight": "$theme.typography.font200.lineHeight",
+  "lineHeight": "$theme.typography.font250.lineHeight",
   "marginBottom": "5px",
   "marginLeft": "5px",
   "marginRight": "5px",
@@ -112,12 +112,12 @@ Object {
   "color": undefined,
   "cursor": "auto",
   "display": "inline-flex",
-  "fontFamily": "$theme.typography.font200.fontFamily",
-  "fontSize": "$theme.typography.font200.fontSize",
-  "fontWeight": "bold",
+  "fontFamily": "$theme.typography.font250.fontFamily",
+  "fontSize": "$theme.typography.font250.fontSize",
+  "fontWeight": "$theme.typography.font250.fontWeight",
   "height": "$theme.sizing.scale800",
   "justifyContent": "space-between",
-  "lineHeight": "$theme.typography.font200.lineHeight",
+  "lineHeight": "$theme.typography.font250.lineHeight",
   "marginBottom": "5px",
   "marginLeft": "5px",
   "marginRight": "5px",
@@ -143,12 +143,12 @@ Object {
   "color": undefined,
   "cursor": "auto",
   "display": "inline-flex",
-  "fontFamily": "$theme.typography.font200.fontFamily",
-  "fontSize": "$theme.typography.font200.fontSize",
-  "fontWeight": "bold",
+  "fontFamily": "$theme.typography.font250.fontFamily",
+  "fontSize": "$theme.typography.font250.fontSize",
+  "fontWeight": "$theme.typography.font250.fontWeight",
   "height": "$theme.sizing.scale800",
   "justifyContent": "space-between",
-  "lineHeight": "$theme.typography.font200.lineHeight",
+  "lineHeight": "$theme.typography.font250.lineHeight",
   "marginBottom": "5px",
   "marginLeft": "5px",
   "marginRight": "5px",
diff --git a/src/toast/__tests__/__snapshots__/styled-components.test.js.snap b/src/toast/__tests__/__snapshots__/styled-components.test.js.snap
index db25feb37..ff9c4cd9e 100644
--- a/src/toast/__tests__/__snapshots__/styled-components.test.js.snap
+++ b/src/toast/__tests__/__snapshots__/styled-components.test.js.snap
@@ -6,11 +6,11 @@ Object {
   "borderRadius": "$theme.borders.radius200",
   "boxShadow": "$theme.lighting.shadow600",
   "color": "$theme.colors.toastText",
-  "fontFamily": "$theme.typography.font300.fontFamily",
-  "fontSize": "$theme.typography.font300.fontSize",
-  "fontWeight": "$theme.typography.font300.fontWeight",
+  "fontFamily": "$theme.typography.font350.fontFamily",
+  "fontSize": "$theme.typography.font350.fontSize",
+  "fontWeight": "$theme.typography.font350.fontWeight",
   "height": "auto",
-  "lineHeight": "$theme.typography.font300.lineHeight",
+  "lineHeight": "$theme.typography.font350.lineHeight",
   "marginBottom": "$theme.sizing.scale300",
   "marginTop": "$theme.sizing.scale300",
   "opacity": 0,
@@ -32,11 +32,11 @@ Object {
   "borderRadius": "$theme.borders.radius200",
   "boxShadow": "$theme.lighting.shadow600",
   "color": "$theme.colors.toastText",
-  "fontFamily": "$theme.typography.font300.fontFamily",
-  "fontSize": "$theme.typography.font300.fontSize",
-  "fontWeight": "$theme.typography.font300.fontWeight",
+  "fontFamily": "$theme.typography.font350.fontFamily",
+  "fontSize": "$theme.typography.font350.fontSize",
+  "fontWeight": "$theme.typography.font350.fontWeight",
   "height": "auto",
-  "lineHeight": "$theme.typography.font300.lineHeight",
+  "lineHeight": "$theme.typography.font350.lineHeight",
   "marginBottom": "$theme.sizing.scale300",
   "marginTop": "$theme.sizing.scale300",
   "opacity": 0,