Merge pull request #106 from chain4travel/fonts-refactor

change the fonts to follow the style guide of Camino
chain4travel · Nov 8, 2023 · 4599849 · 4599849
2 parents cac4cdd + 6efffb0
commit 4599849
Show file tree

Hide file tree

Showing 4 changed files with 97 additions and 57 deletions.
diff --git a/src/app/components/CamAmount.tsx b/src/app/components/CamAmount.tsx
@@ -58,7 +58,8 @@ export function CamAmount({
             >
                 <Typography
                     data-cy={dataCy || getDataCYAmount()}
-                    variant="subtitle2"
+                    variant="body2"
+                    component="h6"
                     sx={{ whiteSpace: 'nowrap' }}
                 >
                     {roundedToLocaleString(
@@ -106,7 +107,12 @@ export function GasAmount({
                     alignItems: 'center',
                 }}
             >
-                <Typography data-cy={dataCy} variant="subtitle2" sx={{ whiteSpace: 'nowrap' }}>
+                <Typography
+                    data-cy={dataCy}
+                    variant="body2"
+                    component="h6"
+                    sx={{ whiteSpace: 'nowrap' }}
+                >
                     {roundedToLocaleString(amount, abbreviate ? 4 : 20, abbreviate)}
                 </Typography>
                 <GasStationOutline style={{ width: '24px', height: '24px', marginLeft: '3px' }} />

diff --git a/src/app/pages/CChainPages/LatestBlocksAndTransactionsList/Items/BlockItem.tsx b/src/app/pages/CChainPages/LatestBlocksAndTransactionsList/Items/BlockItem.tsx
@@ -51,7 +51,7 @@ const BlockItem: FC<BlockItemProps> = ({ block, to }) => {
                     typographyVariant="body1"
                     truncate={false}
                 />
-                <RelativeTime value={block.timestamp} variant="subtitle2" />
+                <RelativeTime value={block.timestamp} variant="body2" />
             </Grid>
             <Grid item xs={12} md={6} lg={5} xl={6.5}>
                 <Typography variant="body1">{block.numberOfTransactions} txs</Typography>

diff --git a/src/app/pages/CChainPages/LatestBlocksAndTransactionsList/Items/TransactionItem.tsx b/src/app/pages/CChainPages/LatestBlocksAndTransactionsList/Items/TransactionItem.tsx
@@ -16,7 +16,7 @@ interface TransactionItemProps {
 const TransactionItem: FC<TransactionItemProps> = ({ transaction }) => {
     const { isMobile, isTablet, isDesktop } = useWidth()
     const routesConfig = RoutesConfig()
-    
+
     return (
         <Grid
             container
@@ -53,7 +53,7 @@ const TransactionItem: FC<TransactionItemProps> = ({ transaction }) => {
                     truncate={true}
                     dataCy="transaction-hash"
                 />
-                <RelativeTime value={transaction.timestamp} variant="subtitle2" />
+                <RelativeTime value={transaction.timestamp} variant="body2" />
             </Grid>
             <Grid item xs={12} md={4} xl={5}>
                 <Grid container direction="row">

diff --git a/src/styles/theme/themes.ts b/src/styles/theme/themes.ts
@@ -1,6 +1,8 @@
-import { Palette, alpha } from '@mui/material/styles'
-import { createTheme } from '@mui/material/styles'
+import { Palette, alpha, createTheme } from '@mui/material/styles'
 
+function pxToRem(value: number) {
+    return `${value / 16}rem`
+}
 const grey = {
     50: '#F8FAFC',
     100: '#F1F5F9',
@@ -210,94 +212,126 @@ export const DarkThemePalette: Partial<PaletteWithCustomColors> = {
     },
 }
 
+const FONT = '"Inter", sans-serif'
+
 const defaultTheme = {
     typography: {
         fontSize: 16,
-        fontFamily: '"ClashDisplay", sans-serif',
+        fontFamily: FONT,
+        fontWeightLight: 300,
+        fontWeightRegular: 400,
+        fontWeightMedium: 500,
+        fontWeightSemiBold: 600,
+        fontWeightBold: 700,
+        fontVariantNumeric: 'lining-nums tabular-nums slashed-zero',
+        fontFeatureSettings: '"ss01" on',
         h1: {
-            fontFamily: 'ClashDisplay',
+            fontFamily: FONT,
             fontStyle: 'normal',
-            fontSize: '96px',
-            lineHeight: '96px',
-            letterSpacing: '-2px',
+            fontSize: pxToRem(64),
+            lineHeight: '83px',
+            letterSpacing: '-2.2%',
             fontWeight: '700',
+            fontVariantNumeric: 'lining-nums tabular-nums slashed-zero',
+            fontFeatureSettings: '"ss01" on',
         },
         h2: {
-            fontFamily: 'ClashDisplay',
+            fontFamily: FONT,
             fontStyle: 'normal',
-            fontSize: '60px',
-            lineHeight: '60px',
-            letterSpacing: '-0.5px',
+            fontSize: pxToRem(48),
+            lineHeight: '62px',
+            letterSpacing: '-2.2%',
             fontWeight: '700',
+            fontVariantNumeric: 'lining-nums tabular-nums slashed-zero',
+            fontFeatureSettings: '"ss01" on',
         },
         h3: {
-            fontFamily: 'ClashDisplay',
+            fontFamily: FONT,
             fontStyle: 'normal',
-            fontSize: '48px',
-            lineHeight: '50px',
-            fontWeight: '500',
+            fontSize: pxToRem(40),
+            lineHeight: '52px',
+            letterSpacing: '-1.1%',
+            fontWeight: '700',
+            fontVariantNumeric: 'lining-nums tabular-nums slashed-zero',
+            fontFeatureSettings: '"ss01" on',
         },
         h4: {
-            fontFamily: 'ClashDisplay',
+            fontFamily: FONT,
             fontStyle: 'normal',
-            fontSize: '34px',
-            lineHeight: '40px',
+            fontSize: pxToRem(34),
+            lineHeight: '42px',
+            letterSpacing: '-1.1%',
             fontWeight: '700',
+            fontVariantNumeric: 'lining-nums tabular-nums slashed-zero',
+            fontFeatureSettings: '"ss01" on',
         },
         h5: {
-            fontFamily: 'ClashDisplay',
+            fontFamily: FONT,
             fontStyle: 'normal',
+            fontSize: pxToRem(20),
+            lineHeight: '36px',
+            letterSpacing: '-1.1%',
             fontWeight: '700',
-            fontSize: '24px',
-            lineHeight: '32px',
+            fontVariantNumeric: 'lining-nums tabular-nums slashed-zero',
+            fontFeatureSettings: '"ss01" on',
         },
         h6: {
-            fontFamily: 'ClashDisplay',
+            fontFamily: FONT,
             fontStyle: 'normal',
+            fontSize: pxToRem(18),
+            lineHeight: '26px',
+            letterSpacing: '-1.1%',
             fontWeight: '700',
-            fontSize: '18px',
-            lineHeight: '150%',
+            fontVariantNumeric: 'lining-nums tabular-nums slashed-zero',
+            fontFeatureSettings: '"ss01" on',
         },
         subtitle1: {
-            fontFamily: 'ClashDisplay',
-            fontStyle: 'normal',
-            fontWeight: '500',
-            fontSize: '16px',
-            lineHeight: '28px',
+            fontFamily: FONT,
+            fontWeight: 500,
+            lineHeight: '36px',
+            letterSpacing: '-2.2%',
+            fontSize: pxToRem(20),
+            fontVariantNumeric: 'lining-nums tabular-nums slashed-zero',
+            fontFeatureSettings: '"ss01" on',
         },
         subtitle2: {
-            fontFamily: 'ClashDisplay',
-            fontStyle: 'normal',
-            fontWeight: '500',
-            fontSize: '14px',
-            lineHeight: '22px',
-            letterSpacing: '-0.25px',
+            fontFamily: FONT,
+            fontWeight: 500,
+            lineHeight: '30px',
+            letterSpacing: '-1.1%',
+            fontSize: pxToRem(18),
+            fontVariantNumeric: 'lining-nums tabular-nums slashed-zero',
+            fontFeatureSettings: '"ss01" on',
         },
         body1: {
-            fontFamily: 'Inter',
-            fontStyle: 'normal',
-            fontWeight: '500',
-            fontSize: '16px',
-            lineHeight: '24px',
+            fontFamily: FONT,
+            lineHeight: '28px',
+            letterSpacing: '-1.1%',
+            fontWeight: 500,
+            fontSize: pxToRem(16),
+            fontVariantNumeric: 'lining-nums tabular-nums slashed-zero',
+            fontFeatureSettings: '"ss01" on',
         },
         body2: {
-            fontFamily: 'Inter',
-            fontStyle: 'normal',
-            fontWeight: '500',
-            fontSize: '14px',
-            lineHeight: '20px',
-            letterSpacing: '-0.528px',
+            fontFamily: FONT,
+            lineHeight: '24px',
+            fontWeight: 500,
+            fontSize: pxToRem(14),
+            letterSpacing: '-1.1%',
+            fontVariantNumeric: 'lining-nums tabular-nums slashed-zero',
+            fontFeatureSettings: '"ss01" on',
         },
         caption: {
-            fontFamily: 'Inter',
-            fontStyle: 'normal',
-            fontWeight: '500',
-            fontSize: '12px',
-            lineHeight: '16px',
+            fontFamily: FONT,
+            lineHeight: '20px',
+            fontWeight: 500,
+            fontSize: pxToRem(12),
+            letterSpacing: '-1.1%',
+            fontVariantNumeric: 'lining-nums tabular-nums slashed-zero',
+            fontFeatureSettings: '"ss01" on',
         },
     },
 }
-
 const defaultComponents = {
     MuiSelect: {
         styleOverrides: {