refactor: update common typography (#4714)

update common typography
Co-authored-by: Charles Bachmeier <charlie@genie.xyz>

src/nft/components/bag/BagFooter.tsx

@@ -3,7 +3,7 @@ import ethereumLogoUrl from 'assets/images/ethereum-logo.png'
 import Loader from 'components/Loader'
 import { Box } from 'nft/components/Box'
 import { Column, Row } from 'nft/components/Flex'
-import { bodySmall, header2, subheadSmall } from 'nft/css/common.css'
+import { bodySmall, headlineMedium, subheadSmall } from 'nft/css/common.css'
 import { BagStatus } from 'nft/types'
 import { ethNumberStandardFormatter, formatWeiToDecimal } from 'nft/utils/currency'
 import { useModalIsOpen, useToggleWalletModal } from 'state/application/hooks'
@@ -66,7 +66,7 @@ export const BagFooter = ({
         </Box>
         <Column marginBottom="16">
           <Row justifyContent="space-between">
-            <Box className={header2}>{`${formatWeiToDecimal(totalEthPrice.toString())}`}</Box>
+            <Box className={headlineMedium}>{`${formatWeiToDecimal(totalEthPrice.toString())}`}</Box>
             <Row className={styles.ethPill}>
               <Box as="img" src={ethereumLogoUrl} alt="Ethereum" width="24" height="24" />
               ETH

src/nft/components/collection/CollectionNfts.tsx

@@ -7,7 +7,7 @@ import * as styles from 'nft/components/collection/CollectionNfts.css'
 import { SortDropdown } from 'nft/components/common/SortDropdown'
 import { Center, Row } from 'nft/components/Flex'
 import { NonRarityIcon, RarityIcon } from 'nft/components/icons'
-import { bodySmall, buttonTextMedium, header2 } from 'nft/css/common.css'
+import { bodySmall, buttonTextMedium, headlineMedium } from 'nft/css/common.css'
 import { vars } from 'nft/css/sprinkles.css'
 import {
   CollectionFilters,
@@ -258,7 +258,7 @@ export const CollectionNfts = ({ contractAddress, collectionStats, rarityVerifie
           !isLoading && (
             <Center width="full" color="textSecondary" style={{ height: '60vh' }}>
               <div style={{ display: 'block', textAlign: 'center' }}>
-                <p className={header2}>No NFTS found</p>
+                <p className={headlineMedium}>No NFTS found</p>
                 <Box className={clsx(bodySmall, buttonTextMedium)} color="blue" cursor="pointer">
                   View full collection
                 </Box>

src/nft/components/collection/CollectionStats.tsx

@@ -2,7 +2,7 @@ import clsx from 'clsx'
 import { Box, BoxProps } from 'nft/components/Box'
 import { Column, Row } from 'nft/components/Flex'
 import { Marquee } from 'nft/components/layout/Marquee'
-import { header2 } from 'nft/css/common.css'
+import { headlineMedium } from 'nft/css/common.css'
 import { themeVars } from 'nft/css/sprinkles.css'
 import { GenieCollection } from 'nft/types'
 import { ethNumberStandardFormatter } from 'nft/utils/currency'
@@ -129,7 +129,7 @@ const CollectionName = ({
       <Row minWidth="0">
         <Box
           marginRight={!isVerified ? '12' : '0'}
-          className={clsx(isMobile ? header2 : header2, styles.nameText)}
+          className={clsx(isMobile ? headlineMedium : headlineMedium, styles.nameText)}
           style={{ lineHeight: '32px' }}
         >
           {name}

src/nft/components/explore/Banner.tsx

@@ -3,7 +3,7 @@ import { useWindowSize } from 'hooks/useWindowSize'
 import { Box } from 'nft/components/Box'
 import { Center, Column, Row } from 'nft/components/Flex'
 import { VerifiedIcon } from 'nft/components/icons'
-import { bodySmall, buttonMedium, header1 } from 'nft/css/common.css'
+import { bodySmall, buttonMedium, headlineLarge } from 'nft/css/common.css'
 import { breakpoints, vars } from 'nft/css/sprinkles.css'
 import { ActivityFetcher, fetchTrendingCollections } from 'nft/queries'
 import { TimePeriod, TrendingCollection } from 'nft/types'
@@ -100,7 +100,7 @@ const CollectionDetails = ({
   <Column className={styles.collectionDetails} paddingTop="40">
     <div className={styles.volumeRank}>#{rank} volume in 24hr</div>
     <Row>
-      <Box as="span" marginTop="16" className={clsx(header1, styles.collectionName)}>
+      <Box as="span" marginTop="16" className={clsx(headlineLarge, styles.collectionName)}>
         {collection.name}
       </Box>
       {collection.isVerified && (

src/nft/css/common.css.ts

@@ -21,43 +21,70 @@ export const column = sprinkles({
 })
 
 // TYPOGRAPHY
-export const header1 = sprinkles({ fontWeight: 'normal', fontSize: '36' })
-export const header2 = sprinkles({ fontWeight: 'normal', fontSize: '28' })
-export const headlineSmall = sprinkles({ fontWeight: 'normal', fontSize: '20' })
-export const subhead = sprinkles({ fontWeight: 'medium', fontSize: '16' })
-export const subheadSmall = sprinkles({ fontWeight: 'medium', fontSize: '14' })
-export const body = sprinkles({ fontSize: '16' })
-export const bodySmall = sprinkles({
-  fontSize: '14',
-})
-export const caption = sprinkles({ fontWeight: 'bold', fontSize: '12' })
-export const badge = style([sprinkles({ fontWeight: 'semibold', fontSize: '10' }), { letterSpacing: '0.5px' }])
-export const buttonTextLarge = sprinkles({ fontWeight: 'medium', fontSize: '28' })
+export const headlineLarge = sprinkles({ fontWeight: 'normal', fontSize: '36', lineHeight: '44' })
+export const headlineMedium = sprinkles({ fontWeight: 'normal', fontSize: '28', lineHeight: '36' })
+export const headlineSmall = sprinkles({ fontWeight: 'normal', fontSize: '20', lineHeight: '28' })
 
-export const buttonTextMedium = sprinkles({ fontWeight: 'medium', fontSize: '16' })
-export const buttonMedium = style([
-  buttonTextMedium,
+export const subhead = sprinkles({ fontWeight: 'medium', fontSize: '16', lineHeight: '16' })
+export const subheadSmall = sprinkles({ fontWeight: 'medium', fontSize: '14', lineHeight: '14' })
+
+export const body = sprinkles({ fontWeight: 'normal', fontSize: '16', lineHeight: '24' })
+export const bodySmall = sprinkles({ fontWeight: 'normal', fontSize: '14', lineHeight: '20' })
+export const caption = sprinkles({ fontWeight: 'normal', fontSize: '12', lineHeight: '16' })
+export const badge = sprinkles({ fontWeight: 'semibold', fontSize: '10', lineHeight: '12' })
+
+export const buttonTextLarge = sprinkles({ fontWeight: 'semibold', fontSize: '20', lineHeight: '24' })
+export const buttonTextMedium = sprinkles({ fontWeight: 'semibold', fontSize: '16', lineHeight: '20' })
+export const buttonTextSmall = sprinkles({ fontWeight: 'semibold', fontSize: '14', lineHeight: '16' })
+
+const commonButtonStyles = style([
   sprinkles({
-    backgroundColor: 'blue',
     borderRadius: '12',
-    color: 'explicitWhite',
     transition: '250',
     boxShadow: { hover: 'elevation' },
   }),
   {
-    cursor: 'pointer',
-    padding: '14px 18px',
     border: 'none',
     ':hover': {
       cursor: 'pointer',
     },
     ':disabled': {
       cursor: 'auto',
+    },
+  },
+])
+
+export const buttonMedium = style([
+  buttonTextMedium,
+  commonButtonStyles,
+  sprinkles({
+    backgroundColor: 'blue',
+    color: 'explicitWhite',
+  }),
+  {
+    padding: '14px 18px',
+    ':disabled': {
       opacity: '0.3',
     },
   },
 ])
 
+export const buttonSmall = style([
+  buttonTextSmall,
+  commonButtonStyles,
+  sprinkles({
+    background: 'backgroundSurface',
+    color: 'genieBlue',
+  }),
+  {
+    padding: '2px 8px',
+    ':disabled': {
+      color: themeVars.colors.backgroundSurface,
+      backgroundColor: themeVars.colors.backgroundOutline,
+    },
+  },
+])
+
 export const buttonReset = sprinkles({
   border: 'none',
   background: 'none',
@@ -81,31 +108,6 @@ export const disabled = style([
   }),
 ])
 
-export const buttonTextSmall = sprinkles({ fontWeight: 'normal', fontSize: '14' })
-export const buttonSmall = style([
-  buttonTextSmall,
-  sprinkles({
-    background: 'backgroundSurface',
-    borderRadius: '12',
-    fontSize: '12',
-    color: 'genieBlue',
-    transition: '250',
-    boxShadow: { hover: 'elevation' },
-  }),
-  {
-    padding: '2px 8px',
-    border: 'none',
-    ':hover': {
-      cursor: 'pointer',
-    },
-    ':disabled': {
-      cursor: 'auto',
-      color: themeVars.colors.backgroundSurface,
-      backgroundColor: themeVars.colors.backgroundOutline,
-    },
-  },
-])
-
 export const imageHover = style({
   transform: 'scale(1.25)',
 })

src/nft/css/sprinkles.css.ts

@@ -211,6 +211,18 @@ export const vars = createGlobalTheme(':root', {
     '60': '60px',
     '96': '96px',
   },
+  lineHeight: {
+    auto: 'auto',
+    '1': '1px',
+    '12': '12px',
+    '14': '14px',
+    '16': '16px',
+    '20': '20px',
+    '24': '24px',
+    '28': '28px',
+    '36': '36px',
+    '44': '44px',
+  },
   fontWeight: {
     normal: '400',
     medium: '500',
@@ -377,7 +389,7 @@ const unresponsiveProperties = defineProperties({
     overflowX: overflow,
     overflowY: overflow,
     boxShadow: { ...themeVars.shadows, none: 'none', dropShadow: vars.color.dropShadow },
-    lineHeight: { '1': '1', auto: 'auto', '16': '16px', '20': '20px', '28': '28px', '36': '36px' },
+    lineHeight: vars.lineHeight,
     transition: vars.time,
     transitionDuration: vars.time,
     animationDuration: vars.time,

src/nft/pages/asset/Asset.tsx

@@ -16,7 +16,7 @@ import { Traits } from '../../components/details/Traits'
 import { Center, Column, Row } from '../../components/Flex'
 import { CloseDropDownIcon, CornerDownLeftIcon, Eth2Icon, ShareIcon, SuspiciousIcon } from '../../components/icons'
 import { ExpandableText } from '../../components/layout/ExpandableText'
-import { badge, bodySmall, caption, header2, subhead } from '../../css/common.css'
+import { badge, bodySmall, caption, headlineMedium, subhead } from '../../css/common.css'
 import { themeVars } from '../../css/sprinkles.css'
 import { useBag } from '../../hooks'
 import { useTimeout } from '../../hooks/useTimeout'
@@ -271,7 +271,7 @@ const Asset = () => {
                 </Center>
               </Row>
             </Row>
-            <Row as="h1" marginTop="0" marginBottom="12" gap="2" className={header2}>
+            <Row as="h1" marginTop="0" marginBottom="12" gap="2" className={headlineMedium}>
               {asset.openseaSusFlag && (
                 <Box marginTop="8">
                   <MouseoverTooltip text={<Box fontWeight="normal">Reported for suspicious activity on OpenSea</Box>}>

src/nft/pages/sell/sell.tsx

@@ -4,7 +4,7 @@ import { Center, Column, Row } from 'nft/components/Flex'
 import { ChevronLeftIcon, XMarkIcon } from 'nft/components/icons'
 import { ListPage } from 'nft/components/sell/list/ListPage'
 import { SelectPage } from 'nft/components/sell/select/SelectPage'
-import { buttonMedium, header2, headlineSmall } from 'nft/css/common.css'
+import { buttonMedium, headlineMedium, headlineSmall } from 'nft/css/common.css'
 import { themeVars } from 'nft/css/sprinkles.css'
 import { useBag, useNFTList, useSellAsset, useSellPageState, useWalletCollections } from 'nft/hooks'
 import { ListingStatus, SellPageStateType } from 'nft/types'
@@ -70,7 +70,7 @@ const Sell = () => {
         <Column as="section" gap="60" className={styles.section}>
           <div style={{ minHeight: '70vh' }}>
             <Center className={styles.notConnected} flexDirection="column">
-              <Box as="span" className={header2} color="textSecondary" marginBottom="24" display="block">
+              <Box as="span" className={headlineMedium} color="textSecondary" marginBottom="24" display="block">
                 No items to display
               </Box>
               <Box as="button" className={buttonMedium} onClick={toggleWalletModal}>