New typography toolkit for MUI carto-theme (#498)

CHANGELOG.md

@@ -2,6 +2,7 @@
 
 ## Not released
 
+- New typography toolkit for MUI carto-theme [#498](https://github.com/CartoDB/carto-react/pull/498/)
 - New color palette for MUI carto-theme [#496](https://github.com/CartoDB/carto-react/pull/496/)
 - Split carto-theme into sections [#495](https://github.com/CartoDB/carto-react/pull/495)
 - Integration between Figma and Storybook through `addon-designs` [#488](https://github.com/CartoDB/carto-react/pull/488)

UPGRADE.md

@@ -14,6 +14,12 @@ Also added some files for shared constants (`themeConstants.js`) and useful func
 
 Removed unused custom `createTheme` function in `carto-theme.js`.
 
+# Typography
+
+`responsiveFontSizes` simplified due we want to resize only a few variants through the theme.
+
+Added several custom variants to the typography set. Note that MUI v5 is needed to register them properly.
+
 ## Colors
 
 Keys renamed:

packages/react-ui/__tests__/widgets/testUtils.js

@@ -24,24 +24,9 @@ export function getMaterialUIContext(children) {
 function getTheme() {
   let theme = createTheme(cartoThemeOptions);
   theme = responsiveFontSizes(theme, {
-    breakpoints: cartoThemeOptions.breakpoints.keys,
+    breakpoints: ['sm'],
     disableAlign: false,
-    factor: 2,
-    variants: [
-      'h1',
-      'h2',
-      'h3',
-      'h4',
-      'h5',
-      'h6',
-      'subtitle1',
-      'subtitle2',
-      'body1',
-      'body2',
-      'button',
-      'caption',
-      'overline'
-    ]
+    factor: 2
   });
   return theme;
 }

packages/react-ui/src/theme/sections/typography.js

@@ -1,6 +1,8 @@
-export const themeTypography = {
+import { getPixelToRem } from '../themeUtils';
+
+const baseTypography = {
   htmlFontSize: 16,
-  fontFamily: 'Montserrat, sans-serif',
+  fontFamily: 'Inter, sans-serif',
   fontSize: 16,
   lineHeight: 1.5,
   fontWeightLight: 300,
@@ -9,117 +11,191 @@ export const themeTypography = {
   fontWeightBold: 600,
   fontSmoothing: 'antialiased',
   h1: {
-    fontFamily: 'Montserrat, sans-serif',
+    fontFamily: 'Inter, sans-serif',
     fontWeight: 600,
-    fontSize: '6rem',
-    lineHeight: 1.084,
-    letterSpacing: '-0.016em',
-    fontSmoothing: 'antialiased'
+    fontSize: getPixelToRem(96),
+    lineHeight: 1.167,
+    letterSpacing: '-1.5px'
   },
   h2: {
-    fontFamily: 'Montserrat, sans-serif',
+    fontFamily: 'Inter, sans-serif',
     fontWeight: 600,
-    fontSize: '4rem',
-    lineHeight: 1.125,
-    letterSpacing: '-0.008em',
-    fontSmoothing: 'antialiased'
+    fontSize: getPixelToRem(60),
+    lineHeight: 1.2,
+    letterSpacing: '-0.5px'
   },
   h3: {
-    fontFamily: 'Montserrat, sans-serif',
+    fontFamily: 'Inter, sans-serif',
     fontWeight: 600,
-    fontSize: '3rem',
+    fontSize: getPixelToRem(48),
     lineHeight: 1.167,
-    letterSpacing: '0em',
-    fontSmoothing: 'antialiased'
+    letterSpacing: 0
   },
   h4: {
-    fontFamily: 'Montserrat, sans-serif',
+    fontFamily: 'Inter, sans-serif',
     fontWeight: 600,
-    fontSize: '2.125rem',
-    lineHeight: 1.177,
-    letterSpacing: '0.007em',
-    fontSmoothing: 'antialiased'
+    fontSize: getPixelToRem(32),
+    lineHeight: 1.25,
+    letterSpacing: '0.15px'
   },
   h5: {
-    fontFamily: 'Montserrat, sans-serif',
+    fontFamily: 'Inter, sans-serif',
     fontWeight: 600,
-    fontSize: '1.5rem',
-    lineHeight: 1.334,
-    letterSpacing: '0em',
-    fontSmoothing: 'antialiased'
+    fontSize: getPixelToRem(24),
+    lineHeight: 1.167,
+    letterSpacing: '0.15px'
   },
   h6: {
-    fontFamily: 'Montserrat, sans-serif',
-    fontWeight: 600,
-    fontSize: '1.25rem',
-    lineHeight: 1.2,
-    letterSpacing: '0.007em',
-    fontSmoothing: 'antialiased'
+    fontFamily: 'Inter, sans-serif',
+    fontWeight: 500,
+    fontSize: getPixelToRem(18),
+    lineHeight: 1.333,
+    letterSpacing: '0.15px'
   },
   subtitle1: {
-    fontFamily: 'Montserrat, sans-serif',
-    fontWeight: 600,
-    fontSize: '1rem',
+    fontFamily: 'Inter, sans-serif',
+    fontWeight: 500,
+    fontSize: getPixelToRem(16),
     lineHeight: 1.5,
-    letterSpacing: '0.009em',
-    fontSmoothing: 'antialiased'
+    letterSpacing: '0.15px'
   },
   subtitle2: {
-    fontFamily: '"Open Sans", sans-serif',
+    fontFamily: 'Inter, sans-serif',
     fontWeight: 600,
-    fontSize: '0.875rem',
-    lineHeight: 1.715,
-    letterSpacing: '0.007em',
-    fontSmoothing: 'antialiased'
+    fontSize: getPixelToRem(13),
+    lineHeight: 1.538,
+    letterSpacing: '0.1px'
   },
   body1: {
-    fontFamily: '"Open Sans", sans-serif',
+    fontFamily: 'Inter, sans-serif',
     fontWeight: 400,
-    fontSize: '1rem',
+    fontSize: getPixelToRem(16),
     lineHeight: 1.5,
-    letterSpacing: '0.028em',
-    fontSmoothing: 'antialiased'
+    letterSpacing: '0.4px'
   },
   body2: {
-    fontFamily: '"Open Sans", sans-serif',
+    fontFamily: 'Inter, sans-serif',
     fontWeight: 400,
-    fontSize: '0.875rem',
-    lineHeight: 1.429,
-    letterSpacing: '0.018em',
-    fontSmoothing: 'antialiased'
+    fontSize: getPixelToRem(13),
+    lineHeight: 1.538,
+    letterSpacing: '0.25px'
   },
   button: {
-    fontFamily: 'Montserrat, sans-serif',
-    fontWeight: 600,
-    fontSize: '0.875rem',
-    lineHeight: 1.715,
-    letterSpacing: '0.018em',
-    textTransform: 'inherit',
-    fontSmoothing: 'antialiased'
+    fontFamily: 'Inter, sans-serif',
+    fontWeight: 500,
+    fontSize: getPixelToRem(13),
+    lineHeight: 1.538,
+    letterSpacing: '0.25px',
+    textTransform: 'inherit'
   },
   caption: {
-    fontFamily: '"Open Sans", sans-serif',
-    fontWeight: 600,
-    fontSize: '0.75rem',
-    lineHeight: 1.334,
-    letterSpacing: '0.017em',
-    fontSmoothing: 'antialiased'
+    fontFamily: 'Inter, sans-serif',
+    fontWeight: 400,
+    fontSize: getPixelToRem(11),
+    lineHeight: 1.454,
+    letterSpacing: '0.2px'
   },
   overline: {
-    fontFamily: '"Open Sans", sans-serif',
+    fontFamily: '"Overpass Mono", monospace',
+    fontWeight: 600,
+    fontSize: getPixelToRem(10),
+    lineHeight: 1.2,
+    letterSpacing: '2px',
+    textTransform: 'uppercase'
+  }
+};
+
+const customTypography = {
+  // TODO: Create a wrapper for the Typography component to reduce the number of variants https://app.shortcut.com/cartoteam/story/265549/
+  body1Italic: {
+    ...baseTypography.body1,
+    fontStyle: 'italic'
+  },
+  body1Strong: {
+    ...baseTypography.body1,
+    fontWeight: 600
+  },
+  body1StrongItalic: {
+    ...baseTypography.body1,
+    fontWeight: 600,
+    fontStyle: 'italic'
+  },
+  body2Italic: {
+    ...baseTypography.body2,
+    fontStyle: 'italic'
+  },
+  body2Strong: {
+    ...baseTypography.body2,
+    fontWeight: 600
+  },
+  body2StrongItalic: {
+    ...baseTypography.body2,
+    fontWeight: 600,
+    fontStyle: 'italic'
+  },
+  captionItalic: {
+    ...baseTypography.caption,
+    fontStyle: 'italic'
+  },
+  captionStrong: {
+    ...baseTypography.caption,
+    fontWeight: 500
+  },
+  captionStrongItalic: {
+    ...baseTypography.caption,
+    fontWeight: 500,
+    fontStyle: 'italic'
+  },
+  overlineDelicate: {
+    ...baseTypography.overline,
+    fontWeight: 400,
+    letterSpacing: '1.2px'
+  },
+  code1: {
+    fontFamily: '"Overpass Mono", monospace',
+    fontWeight: 400,
+    fontSize: getPixelToRem(16),
+    lineHeight: 1.5,
+    letterSpacing: 0
+  },
+  code1Strong: {
+    fontFamily: '"Overpass Mono", monospace',
+    fontWeight: 600,
+    fontSize: getPixelToRem(16),
+    lineHeight: 1.5,
+    letterSpacing: 0
+  },
+  code2: {
+    fontFamily: '"Overpass Mono", monospace',
     fontWeight: 400,
-    fontSize: '0.625rem',
-    lineHeight: 1.6,
-    letterSpacing: '0.150em',
-    textTransform: 'uppercase',
-    fontSmoothing: 'antialiased'
-  },
-  charts: {
-    fontFamily: '"Open Sans", sans-serif',
+    fontSize: getPixelToRem(14),
+    lineHeight: 1.428,
+    letterSpacing: 0
+  },
+  code2Strong: {
+    fontFamily: '"Overpass Mono", monospace',
+    fontWeight: 600,
+    fontSize: getPixelToRem(14),
+    lineHeight: 1.428,
+    letterSpacing: 0
+  },
+  code3: {
+    fontFamily: '"Overpass Mono", monospace',
     fontWeight: 400,
-    fontSize: 10,
-    lineHeight: 1.6,
-    letterSpacing: '0.150em',
-    fontSmoothing: 'antialiased'
+    fontSize: getPixelToRem(12),
+    lineHeight: 1.333,
+    letterSpacing: 0
+  },
+  code3Strong: {
+    fontFamily: '"Overpass Mono", monospace',
+    fontWeight: 600,
+    fontSize: getPixelToRem(12),
+    lineHeight: 1.333,
+    letterSpacing: 0
   }
 };
+
+export const themeTypography = {
+  ...baseTypography,
+  ...customTypography
+};

packages/react-ui/src/theme/themeUtils.js

@@ -2,3 +2,11 @@ import createSpacing from '@material-ui/core/styles/createSpacing';
 import { SPACING } from './themeConstants';
 
 export const spacing = createSpacing(SPACING);
+
+// Convert pixels to rem
+export function getPixelToRem(px) {
+  const fontBase = 16;
+  const rem = (1 / fontBase) * px + 'rem';
+
+  return rem;
+}

packages/react-ui/src/widgets/BarWidgetUI.js

@@ -101,7 +101,7 @@ function BarWidgetUI(props) {
         show: false
       },
       axisLabel: {
-        ...theme.typography.charts,
+        ...theme.typography.overlineDelicate,
         padding: [theme.spacing(0.5), 0, 0, 0]
       },
       data: xAxisDataWithLabels
@@ -132,14 +132,14 @@ function BarWidgetUI(props) {
       axisLabel: {
         margin: 0,
         verticalAlign: 'bottom',
-        padding: [0, 0, theme.typography.charts.fontSize, 0],
+        padding: [0, 0, theme.typography.overlineDelicate.fontSize, 0],
         show: true,
         showMaxLabel: true,
         showMinLabel: false,
         inside: true,
         color: (value) =>
           value >= maxValue ? theme.palette.charts.maxLabel : 'transparent',
-        ...theme.typography.charts,
+        ...theme.typography.overlineDelicate,
         formatter: (v) => processFormatterRes(yAxisFormatter(v))
       },
       axisLine: {
@@ -160,7 +160,7 @@ function BarWidgetUI(props) {
       maxValue,
       theme.palette.charts.axisLine,
       theme.palette.charts.maxLabel,
-      theme.typography.charts,
+      theme.typography.overlineDelicate,
       yAxisFormatter
     ]
   );