Update typography to match design system (#483)

* Update tw config typography

* Replace body typography classes

* Replace label classes

* Update mobile typography

* Update letter spacing

* Add minimum height to deposit benefits settings drawer

* Align text to right in ltv panel

* Remove duplicated classes

* Remove new line in inactive farm panel

* Fix typography in oracle panels

* Update error warning typography at actions component

* Add space between words

packages/app/.storybook/components/StoryGrid.tsx

@@ -9,7 +9,7 @@ export function StoryGrid({ children, className }: { children: React.ReactNode;
 }
 
 function GridLabel({ children }: { children: React.ReactNode }) {
-  return <div className="typography-label-6 text-neutral-500">{children}</div>
+  return <div className="typography-label-4 text-neutral-500">{children}</div>
 }
 
 StoryGrid.Label = GridLabel

packages/app/src/features/actions/components/action-row/ActionRow.tsx

@@ -51,7 +51,7 @@ function ActionRow({ children, actionHandlerState, actionIndex, onAction, layout
 
 const iconVariants = cva(
   cn(
-    'typography-label-5 grid h-6 w-12 grid-cols-[1fr_1px_1fr] items-center',
+    'typography-label-3 grid h-6 w-12 grid-cols-[1fr_1px_1fr] items-center',
     'justify-items-center rounded-xs transition-all delay-500 duration-200 sm:h-8 sm:w-16',
   ),
   {
@@ -88,7 +88,7 @@ function Title({ children }: { children: ReactNode }) {
   return (
     <HorizontalScroll
       className={cn(
-        'typography-label-4 col-span-2 flex items-center gap-1.5',
+        'typography-label-2 col-span-2 flex items-center gap-1.5',
         'md:col-span-1 sm:overflow-visible',
         actionHandlerState.status === 'success' && 'text-secondary',
       )}
@@ -122,7 +122,7 @@ function Amount({ token, amount }: { token: Token; amount: NormalizedUnitNumber
   return (
     <div
       className={cn(
-        'typography-label-4 col-span-full col-start-2 md:col-span-1',
+        'typography-label-2 col-span-full col-start-2 md:col-span-1',
         actionHandlerState.status === 'success' && 'text-secondary',
       )}
     >
@@ -147,7 +147,7 @@ function ErrorWarning() {
       <TooltipTrigger asChild>
         <div
           className={cn(
-            'typography-label-5 typography-label-4 col-span-full col-start-2 inline-flex min-w-0 text-secondary md:col-span-1',
+            'typography-body-3 col-span-full col-start-2 inline-flex min-w-0 text-secondary md:col-span-1',
             layout === 'compact' ? 'md:col-start-3' : 'md:col-start-4',
           )}
         >

packages/app/src/features/actions/settings-dialog/components/SettingsDialog.tsx

@@ -54,8 +54,8 @@ export function SettingsDialog(props: SettingsDialogProps) {
           <DialogTitle>Settings</DialogTitle>
           <div className="flex items-center gap-8 rounded-sm bg-secondary p-6">
             <div className="flex flex-col gap-2">
-              <h3 className="typography-label-4 text-primary">Use permits when available</h3>
-              <p className="typography-body-5 text-secondary">
+              <h3 className="typography-label-2 text-primary">Use permits when available</h3>
+              <p className="typography-body-3 text-secondary">
                 Permits are a way to save gas by avoiding on-chain approve transactions. Instead signed permits are
                 bundled with another transactions such as deposit or borrow.
               </p>

packages/app/src/features/actions/views/ActionsView.tsx

@@ -10,8 +10,8 @@ import { ActionsGridLayout } from '../types'
 const actionsTitleVariants = cva('', {
   variants: {
     layout: {
-      extended: 'typography-label-2 text-primary',
-      compact: 'typography-label-5 text-secondary',
+      extended: 'typography-heading-5 text-primary',
+      compact: 'typography-label-3 text-secondary',
     },
   },
 })

packages/app/src/features/compliance/components/TermsOfService.tsx

@@ -73,7 +73,7 @@ export function TermsOfService({ onAgree }: TermsOfServiceProps) {
   return (
     <MultiPanelDialog>
       <div className="typography-heading-5">Terms of Service and Disclaimer</div>
-      <div className="typography-body-4">
+      <div className="typography-body-2">
         By using this site, I represent that I have read and agree to the <ToSLink /> and{' '}
         <Link to={links.privacyPolicy} variant="secondary" external>
           Privacy Policy
@@ -82,7 +82,7 @@ export function TermsOfService({ onAgree }: TermsOfServiceProps) {
       </div>
       <ScrollArea
         viewportRef={scrollAreaRef}
-        className="typography-body-4 h-64 rounded-sm bg-secondary pr-3 pl-2 text-primary shadow-inner"
+        className="typography-body-2 h-64 rounded-sm bg-secondary pr-3 pl-2 text-primary shadow-inner"
         type="always"
       >
         <div className="grid grid-cols-[auto_1fr] gap-4">

packages/app/src/features/dialogs/claim-rewards/components/RewardsList.tsx

@@ -14,7 +14,7 @@ export function RewardsList({ rewards, className }: RewardsListProps) {
       {rewards.map(({ token, amount }, index) => (
         <div
           key={token.symbol}
-          className="typography-label-4 flex items-center justify-between border-b py-4 text-primary last:border-none"
+          className="typography-label-2 flex items-center justify-between border-b py-4 text-primary last:border-none"
           data-testid={testIds.dialog.claimRewards.transactionOverview.row(index)}
         >
           <TokenAmount

packages/app/src/features/dialogs/collateral/views/SuccessView.tsx

@@ -16,7 +16,7 @@ export function SuccessView({ collateralSetting, token, onProceed }: SuccessView
   return (
     <SuccessViewContent>
       <SuccessViewCheckmark />
-      <SuccessViewSummaryPanel className="typography-label-4 text-primary">
+      <SuccessViewSummaryPanel className="typography-label-2 text-primary">
         <div className="flex items-center gap-2">
           <TokenIcon token={token} className="h-5" />
           {token.symbol}

packages/app/src/features/dialogs/common/components/success-view/SuccessPanelTitle.tsx

@@ -3,5 +3,5 @@ export interface DialogSectionTitleProps {
 }
 
 export function SuccessViewPanelTitle({ children }: DialogSectionTitleProps) {
-  return <h3 className="typography-label-5 mt-4 mb-1 text-secondary first:mt-0">{children}</h3>
+  return <h3 className="typography-label-3 mt-4 mb-1 text-secondary first:mt-0">{children}</h3>
 }

packages/app/src/features/dialogs/common/components/success-view/SuccessViewTokenRow.tsx

@@ -12,11 +12,11 @@ export function SuccessViewTokenRow({ token, amount }: SuccessViewTokenRowProps)
     <div className="mb-2 flex w-full items-center justify-between">
       <div className="flex items-center gap-1">
         <TokenIcon token={token} className="h-5" />
-        <span className="typography-label-4 text-primary">{token.symbol}</span>
+        <span className="typography-label-2 text-primary">{token.symbol}</span>
       </div>
       <div className="flex grow flex-col text-right">
-        <div className="typography-label-4 text-primary">{token.format(amount, { style: 'auto' })}</div>
-        <div className="typography-label-5 text-secondary"> {token.formatUSD(amount)}</div>
+        <div className="typography-label-2 text-primary">{token.format(amount, { style: 'auto' })}</div>
+        <div className="typography-label-3 text-secondary"> {token.formatUSD(amount)}</div>
       </div>
     </div>
   )

packages/app/src/features/dialogs/e-mode/components/EModeCategoryTile.tsx

@@ -31,7 +31,7 @@ export function EModeCategoryTile({ eModeCategory }: EModeCategoryTileProps) {
       <Badge variant={variant === 'active' ? 'success' : 'neutral'} appearance="soft" size="sm">
         {variant === 'active' ? 'Active' : 'Inactive'}
       </Badge>
-      <h4 className="typography-label-6 sm:typography-label-3">{eModeCategory.name}</h4>
+      <h4 className="typography-label-4 sm:typography-label-1">{eModeCategory.name}</h4>
       <IconStack paths={iconPaths} maxIcons={4} />
     </button>
   )

packages/app/src/features/dialogs/e-mode/views/EModeView.tsx

@@ -43,7 +43,7 @@ export function EModeView({
     <MultiPanelDialog>
       <div className="flex flex-col gap-3">
         <DialogTitle>Set E-Mode Category</DialogTitle>
-        <p className="typography-body-5 text-secondary">
+        <p className="typography-body-3 text-secondary">
           E-Mode allows you to borrow assets belonging to the selected category.
           <br />
           Please visit our{' '}

packages/app/src/features/dialogs/e-mode/views/SuccessView.tsx

@@ -13,7 +13,7 @@ export function SuccessView({ eModeCategoryName, onProceed }: SuccessViewProps)
   return (
     <SuccessViewContent>
       <SuccessViewCheckmark />
-      <SuccessViewSummaryPanel className="typography-label-4 text-primary">
+      <SuccessViewSummaryPanel className="typography-label-2 text-primary">
         <div>{eModeCategoryName}</div>
         <h3>Option activated</h3>
       </SuccessViewSummaryPanel>

packages/app/src/features/dialogs/sandbox/views/SandboxDialogView.tsx

@@ -31,7 +31,7 @@ export function SandboxDialogView({
         <MagicWand className="icon-sm text-secondary" />
         Sandbox Mode
       </DialogTitle>
-      <p className="typography-body-4 text-secondary">
+      <p className="typography-body-2 text-secondary">
         Sandbox Mode is a risk-free environment where you can test the Spark App and understand how it works. When
         you're ready, you can switch back to the real world. Have fun exploring!
       </p>
@@ -42,7 +42,7 @@ export function SandboxDialogView({
           'No real assets involved',
           'Fast – no need to sign transactions',
         ].map((item, index) => (
-          <li key={index} className="typography-heading-6 flex items-center gap-2.5">
+          <li key={index} className="typography-label-2 flex items-center gap-2.5">
             <CheckIcon className="icon-sm icon-system-success-primary" />
             {item}
           </li>

packages/app/src/features/dialogs/savings/deposit/components/BenefitsDialog.tsx

@@ -31,7 +31,7 @@ export function BenefitsDialog({ portalContainerRef, apyImprovement }: BenefitsD
         <div className="flex flex-col gap-6 p-1">
           <div className="flex flex-col gap-2">
             <h2 className="typography-heading-4 text-primary">Deposit into Savings USDS</h2>
-            <p className="typography-body-5 text-secondary">
+            <p className="typography-body-3 text-secondary">
               By enabling this option, you will be depositing your stablecoins into Savings USDS, thus accessing the SSR
               (Sky Savings Rate), which provides the highest predictable rate in USDS. You can exit Savings USDS at any
               time at your sole discretion.

packages/app/src/features/dialogs/savings/deposit/components/UpgradeToSusdsSwitch.tsx

@@ -23,7 +23,7 @@ export function UpgradeToSusdsSwitch({
     <div className="flex w-full items-center justify-between rounded-sm bg-savings-100 px-4 py-5">
       <div className="flex items-center gap-2">
         <img src={assets.token.susds} className="h-5" />
-        <div className="typography-label-4 text-primary">
+        <div className="typography-label-2 text-primary">
           Deposit into Savings USDS and get{' '}
           {apyImprovement ? (
             <span className="text-savings-600">{formatPercentage(apyImprovement)} higher APY</span>

packages/app/src/features/dialogs/savings/deposit/views/SavingsDepositView.stories.tsx

@@ -116,7 +116,7 @@ export const WithSUSDSSwitchMobile = getMobileStory(WithSUSDSSwitch)
 export const WithSUSDSSwitchTablet = getTabletStory(WithSUSDSSwitch)
 
 export const WithBenefitsDrawerOpened: Story = {
-  decorators: [WithWrappingDialog()],
+  decorators: [WithWrappingDialog(), WithClassname('min-h-[900px]')],
   args: {
     savingsUsdsSwitchInfo: {
       showSwitch: true,

packages/app/src/features/dialogs/savings/migrate/downgrade/views/DowngradeUSDSToDaiView.tsx

@@ -41,7 +41,7 @@ export function DowngradeUSDSToDaiView({
         Downgrade {fromToken.symbol} to {toToken.symbol}
       </DialogTitle>
 
-      <div className="typography-label-5 mb-2 text-secondary">
+      <div className="typography-label-3 mb-2 text-secondary">
         You can downgrade from USDS to DAI whenever you choose, and you are free to switch back from DAI to USDS in the
         future, at your own sole discretion.{' '}
         <Link to={links.docs.downgradeUsds} external>

packages/app/src/features/dialogs/savings/withdraw/components/form/AddressInput.tsx

@@ -15,11 +15,11 @@ export const AddressInput = forwardRef<HTMLInputElement, AddressInputProps>(
   ({ error, blockExplorerUrl, label, ...rest }, ref) => {
     return (
       <div className="flex flex-col gap-2">
-        {label && <div className="typography-label-5 text-secondary">{label}</div>}
+        {label && <div className="typography-label-3 text-secondary">{label}</div>}
         <div
           className={cn(
             'grid h-14 grid-cols-[1fr_auto] gap-2',
-            'typography-label-6 sm:typography-label-4 text-primary',
+            'typography-label-4 sm:typography-label-2 text-primary',
             'rounded-sm border border-primary bg-secondary',
             'focus-within:border-brand-primary',
             'items-center rounded-sm px-3 sm:px-4',
@@ -44,7 +44,7 @@ export const AddressInput = forwardRef<HTMLInputElement, AddressInputProps>(
         </div>
         {error && (
           <div
-            className="typography-label-6 text-system-error-primary"
+            className="typography-label-4 text-system-error-primary"
             data-testid={testIds.component.AddressInput.error}
           >
             {error}

packages/app/src/features/dialogs/savings/withdraw/views/SuccessView.tsx

@@ -28,7 +28,7 @@ export function SuccessView({ tokenToWithdraw, closeDialog, sendModeExtension }:
             <SuccessViewPanelTitle>Recipient</SuccessViewPanelTitle>
             <BlockExplorerAddressLink
               address={sendModeExtension.receiver}
-              className="typography-label-4 text-primary"
+              className="typography-label-2 text-primary"
             />
           </>
         )}

packages/app/src/features/dialogs/select-network/components/NetworkStatusBadge.tsx

@@ -21,7 +21,7 @@ export function NetworkStatusBadge({ status }: NetworkStatusBadgeProps) {
   return (
     <div className={networkStatusBadgeVariants({ status })}>
       <Icon className={cn('icon-xxs', status === 'pending' && 'animate-[spin_2s_linear_infinite]')} />
-      <div className="typography-label-6">{text}</div>
+      <div className="typography-label-4">{text}</div>
     </div>
   )
 }

packages/app/src/features/dialogs/select-network/views/SelectNetworkDialogView.tsx

@@ -32,7 +32,7 @@ export function SelectNetworkDialogView({ chains }: SelectNetworkDialogViewProps
             key={chain.name}
           >
             <div className="flex w-full items-center justify-between border-b px-4 py-5">
-              <div className="typography-label-4 flex items-center gap-2">
+              <div className="typography-label-2 flex items-center gap-2">
                 <img src={chain.logo} className="h-6 w-6" />
                 {chain.name}
               </div>
@@ -42,7 +42,7 @@ export function SelectNetworkDialogView({ chains }: SelectNetworkDialogViewProps
                 <NetworkStatusBadge status="pending" />
               ) : undefined}
             </div>
-            <div className="typography-label-6 p-4">
+            <div className="typography-label-4 p-4">
               <span className="text-secondary">Network available for:</span> {chain.supportedPages.join(', ')}
             </div>
           </button>

packages/app/src/features/easy-borrow/components/form/Borrow.tsx

@@ -38,7 +38,7 @@ export function Borrow({
     <Panel className="flex flex-col" data-testid={testIds.easyBorrow.form.borrow} spacing="none">
       <Panel className={cn('flex flex-1 flex-col gap-4 bg-primary', showTokenSummary && 'rounded-b-none')}>
         <div className="flex items-center justify-between">
-          <h4 className="typography-label-2 h-8 text-primary">Borrow</h4>
+          <h4 className="typography-heading-5 h-8 text-primary">Borrow</h4>
           {pageStatus.state === 'confirmation' && (
             <IconButton onClick={pageStatus.onProceedToForm} variant="transparent" size="l" icon={XIcon} />
           )}

packages/app/src/features/easy-borrow/components/form/Deposits.tsx

@@ -47,7 +47,7 @@ export function Deposits({
       <Panel className={cn('flex flex-1 flex-col gap-4 bg-primary', showTokenSummary && 'rounded-b-none')}>
         <div className="flex items-center justify-between">
           <div className="flex h-8 flex-row items-center gap-1">
-            <h4 className="typography-label-2 text-primary">Deposit</h4>
+            <h4 className="typography-heading-5 text-primary">Deposit</h4>
             <Info>
               Some assets (e.g., isolated assets) are only accessible via the{' '}
               <Link to={paths.myPortfolio}>My portfolio</Link> at this time.

packages/app/src/features/easy-borrow/components/form/LoanToValuePanel.tsx

@@ -25,14 +25,14 @@ export function LoanToValuePanel({
     <Panel className={className}>
       <div className="flex flex-col gap-6">
         <div className="flex flex-col gap-1">
-          <div className="typography-label-2 flex flex-row justify-between text-primary">
+          <div className="typography-heading-5 flex flex-row justify-between text-primary">
             <h4>Loan to Value (LTV)</h4>
             <h4 data-testid={testIds.easyBorrow.form.ltv}>{formatPercentage(ltv)}</h4>
           </div>
 
-          <div className="typography-label-5 mt-2 flex flex-row justify-between text-secondary">
+          <div className="typography-label-3 mt-2 flex flex-row justify-between text-secondary">
             <div>Ratio of the collateral value to the borrowed value</div>
-            <div>max. {formatPercentage(maxLtv)}</div>
+            <div className="text-right">max. {formatPercentage(maxLtv)}</div>
           </div>
         </div>
 

packages/app/src/features/easy-borrow/components/form/LoanToValueSlider.tsx

@@ -69,7 +69,7 @@ export function LoanToValueSlider({
                   isLast && '-ml-0.5 -mr-1 rounded-e-full',
                 )}
               >
-                <div className={cn('-bottom-6 typography-label-6 absolute text-secondary', isActive && 'text-primary')}>
+                <div className={cn('-bottom-6 typography-label-4 absolute text-secondary', isActive && 'text-primary')}>
                   {step.label}
                 </div>
               </div>
@@ -95,7 +95,7 @@ export function LoanToValueSlider({
                 left: `${(maxSelectableValue / maxSliderValue) * 100}%`,
               }}
             />
-            <div className="typography-heading-7 absolute bottom-7 bg-gradient-spark-primary bg-clip-text text-transparent">
+            <div className="typography-label-4 absolute bottom-7 bg-gradient-spark-primary bg-clip-text text-transparent">
               {formatPercentage(liquidationLtv)}
             </div>
           </div>

packages/app/src/features/easy-borrow/components/form/TokenSummary.tsx

@@ -20,7 +20,7 @@ export function TokenSummary({ position, type, maxSymbols = 3 }: TokenSummaryPro
   return (
     <div className="flex w-fit items-center gap-2">
       <IconStack paths={tokenIconPaths} maxIcons={maxSymbols} />
-      <div className="typography-body-5 text-secondary">{summary}</div>
+      <div className="typography-body-3 text-secondary">{summary}</div>
     </div>
   )
 }

packages/app/src/features/easy-borrow/components/side-panel/EasyBorrowSidePanel.tsx

@@ -20,15 +20,15 @@ export function EasyBorrowSidePanel({ hf, liquidationDetails, borrowRate, dai, u
         </div>
       )}
       <Panel variant="quaternary" spacing="m" className="flex flex-col justify-end gap-3 only:col-span-2">
-        <h4 className="typography-label-2">Borrow Rate</h4>
+        <h4 className="typography-heading-5">Borrow Rate</h4>
         <div className="flex flex-col gap-3">
           <h3
             className="typography-display-3 bg-gradient-borrow-rate-orange bg-clip-text text-transparent"
             data-testid={testIds.easyBorrow.form.borrowRate}
           >
             {formatPercentage(borrowRate, { skipSign: true })}%
           </h3>
-          <div className="typography-body-5">
+          <div className="typography-body-3">
             Borrow {dai}
             {usds ? ` or ${usds}` : ''} directly from SKY
           </div>

packages/app/src/features/farm-details/components/farm-info-panel/active/ActiveFarmInfoPanel.tsx

@@ -101,27 +101,27 @@ export function ActiveFarmInfoPanel({
       <div className="flex divide-x divide-fg-secondary">
         {farm.depositors && (
           <DetailsItem title="Participants">
-            <div className="typography-label-5 lg:typography-label-3 xl:typography-label-2 text-primary-inverse">
+            <div className="typography-label-3 lg:typography-label-1 xl:typography-heading-5 text-primary-inverse">
               {farm.depositors}
             </div>
           </DetailsItem>
         )}
         <DetailsItem title="TVL">
-          <div className="typography-label-5 lg:typography-label-3 xl:typography-label-2 text-primary-inverse">
+          <div className="typography-label-3 lg:typography-label-1 xl:typography-heading-5 text-primary-inverse">
             {USD_MOCK_TOKEN.formatUSD(farm.totalSupply, { compact: true })}
           </div>
         </DetailsItem>
         {farm.apy?.gt(0) && (
           <DetailsItem title="APY" explainer={<ApyTooltip farmAddress={farm.address} />}>
-            <div className="typography-label-5 lg:typography-label-3 xl:typography-label-2 text-feature-farms-primary">
+            <div className="typography-label-3 lg:typography-label-1 xl:typography-heading-5 text-feature-farms-primary">
               {formatPercentage(farm.apy, { minimumFractionDigits: 0 })}
             </div>
           </DetailsItem>
         )}
         <DetailsItem title="My Deposit">
           <div
             className={cn(
-              'typography-label-5 lg:typography-label-3 xl:typography-label-2',
+              'typography-label-3 lg:typography-label-1 xl:typography-heading-5',
               'flex items-center gap-1 text-primary-inverse lg:gap-1.5',
             )}
             data-testid={testIds.farmDetails.activeFarmInfoPanel.staked}