Update typography; fixes #2093

src/components/LabelValueMetadata.js

@@ -27,10 +27,10 @@ export class LabelValueMetadata extends Component {
       <dl>
         {labelValuePairs.reduce((acc, labelValuePair, i) => acc.concat([
           <dt key={`label-${i}`}>
-            <Typography variant="body2">{labelValuePair.label}</Typography>
+            <Typography variant="subtitle2" component="span">{labelValuePair.label}</Typography>
           </dt>,
           <dd key={`value-${i}`}>
-            <Typography variant="body2">
+            <Typography variant="body1">
               <SanitizedHtml htmlString={labelValuePair.value} ruleSet="iiif" />
             </Typography>
           </dd>,

src/components/WindowSideBarInfoPanel.js

@@ -34,7 +34,7 @@ export class WindowSideBarInfoPanel extends Component {
       <CompanionWindow title={t('aboutThisItem')} paperClassName={ns('window-sidebar-info-panel')} windowId={windowId} id={id}>
         {canvasLabel && (
           <>
-            <Typography id={`${id}-currentItem`} component="p" className={classes.sectionHeading}>{t('currentItem')}</Typography>
+            <Typography variant="overline" id={`${id}-currentItem`}>{t('currentItem')}</Typography>
             <Typography aria-labelledby={`${id}-currentItem`} variant="h4" className={classes.windowSideBarHeading}>
               {canvasLabel}
             </Typography>
@@ -55,7 +55,7 @@ export class WindowSideBarInfoPanel extends Component {
 
         {manifestLabel && (
           <>
-            <Typography id={`${id}-resource`} component="p" className={classes.sectionHeading}>{t('resource')}</Typography>
+            <Typography variant="overline" id={`${id}-resource`} component="p" className={classes.sectionHeading}>{t('resource')}</Typography>
             <Typography aria-labelledby={`${id}-resource`} variant="h4" className={classes.windowSideBarHeading}>
               {manifestLabel}
             </Typography>

src/components/WindowTopBar.js

@@ -37,7 +37,7 @@ export class WindowTopBar extends Component {
           >
             <MenuIcon />
           </IconButton>
-          <Typography variant="h2" noWrap color="inherit" className={classes.typographyBody}>
+          <Typography variant="h2" noWrap color="inherit" className={classes.title}>
             {manifestTitle}
           </Typography>
           <WindowTopBarButtons windowId={windowId} />

src/config/settings.js

@@ -21,6 +21,99 @@ export default {
       },
     },
     typography: {
+      fontSize: 16,
+      body1: {
+        fontSize: "0.878rem",
+        letterSpacing: "0em",
+        lineHeight: "1.6em",
+      },
+      body2: {
+        fontSize: "0.878rem",
+        letterSpacing: "0.015em",
+        lineHeight: "1.6em",
+      },
+      button: {
+        fontSize: "0.878rem",
+        letterSpacing: "0.9em",
+        lineHeight: "2.25rem",
+        textTransform: "uppercase",
+      },
+      caption: {
+        fontSize: "0.772rem",
+        letterSpacing: "0.33em",
+        lineHeight: "1.6rem",
+      },
+      body1Next: {
+        fontSize: "0.878rem",
+        letterSpacing: "0em",
+        lineHeight: "1.6em",
+      },
+      body2Next: {
+        fontSize: "0.878rem",
+        letterSpacing: "0.015em",
+        lineHeight: "1.6em",
+      },
+      buttonNext: {
+        fontSize: "0.878rem",
+        letterSpacing: "0.9em",
+        lineHeight: "2.25rem",
+      },
+      captionNext: {
+        fontSize: "0.772rem",
+        letterSpacing: "0.33em",
+        lineHeight: "1.6rem",
+      },
+      overline: {
+        fontSize: "0.678rem",
+        fontWeight: 500,
+        letterSpacing: "0.166em",
+        lineHeight: "2em",
+        textTransform: "uppercase",
+      },
+      h1: {
+        fontSize: "2.822rem",
+        letterSpacing: "-0.015em",
+        lineHeight: "1.2em",
+      },
+      h2: {
+        fontSize: "1.575rem",
+        letterSpacing: "0em",
+        lineHeight: "1.33em",
+      },
+      h3: {
+        fontSize: "1.383rem",
+        fontWeight: 300,
+        letterSpacing: "0em",
+        lineHeight: "1.33em",
+      },
+      h4: {
+        fontSize: "1.215rem",
+        letterSpacing: "0.007em",
+        lineHeight: "1.45em",
+      },
+      h5: {
+        fontSize: "1.138rem",
+        letterSpacing: "0.005em",
+        lineHeight: "1.55em",
+      },
+      h6: {
+        fontSize: "1.067rem",
+        fontWeight: 400,
+        letterSpacing: "0.01em",
+        lineHeight: "1.6em",
+      },
+      subtitle1: {
+        fontSize: "0.937rem",
+        letterSpacing: "0.015em",
+        lineHeight: "1.6em",
+        fontWeight: 300,
+      },
+      subtitle2: {
+        fontSize: "0.878rem",
+        fontWeight: 500,
+        letterSpacing: "0.02em",
+        lineHeight: "1.75em",
+      },
       useNextVariants: true // set so that console deprecation warning is removed
     }
   },

src/containers/CompanionWindow.js

@@ -40,7 +40,7 @@ const mapDispatchToProps = {
  */
 const styles = theme => ({
   windowSideBarTitle: {
-    ...theme.typography.h5,
+    ...theme.typography.subtitle1,
     flexGrow: 1,
   },
   root: {

src/containers/WindowSideBarInfoPanel.js

@@ -38,10 +38,6 @@ const mapStateToProps = (state, { windowId }) => ({
  */
 const styles = theme => ({
   windowSideBarHeading: theme.typography.h6,
-  sectionHeading: {
-    ...theme.typography.body2,
-    textTransform: 'uppercase',
-  },
 });
 
 const enhance = compose(

src/containers/WindowTopBar.js

@@ -31,9 +31,9 @@ const mapDispatchToProps = (dispatch, { windowId }) => ({
  * windowTopBarStyle: {minHeight: number, paddingLeft: number, backgroundColor: string}}}
  */
 const styles = theme => ({
-  typographyBody: {
+  title: {
+    ...theme.typography.h6,
     flexGrow: 1,
-    fontSize: '1em',
   },
   windowTopBarStyle: {
     minHeight: 32,