Typography

marsfoundation · Dec 6, 2024 · b52fdaf · b52fdaf
1 parent 6810124
commit b52fdaf
Show file tree

Hide file tree

Showing 16 changed files with 37 additions and 47 deletions.
diff --git a/packages/app/src/features/actions/settings-dialog/components/SettingsDialog.tsx b/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="text-primary">Use permits when available</h3>
-              <p className="text-secondary text-xs">
+              <h3 className="typography-label-4 text-primary">Use permits when available</h3>
+              <p className="typography-body-5 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>

diff --git a/packages/app/src/features/dialogs/e-mode/views/EModeView.tsx b/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="text-secondary text-sm leading-tight">
+        <p className="typography-body-5 text-secondary">
           E-Mode allows you to borrow assets belonging to the selected category.
           <br />
           Please visit our{' '}

diff --git a/...s/app/src/features/market-details/components/charts/interest-yield/InterestYieldChart.tsx b/...s/app/src/features/market-details/components/charts/interest-yield/InterestYieldChart.tsx
@@ -57,11 +57,11 @@ export function InterestYieldChart({
       <div className="ml-10 flex items-center gap-4">
         <div className="flex items-center gap-1.5">
           <Circle size={4} fill={colors.primary} stroke="0" />
-          <div className="text-slate-500 text-xs">Borrow APY</div>
+          <div className="typography-label-6 text-secondary">Borrow APY</div>
         </div>
         <div className="flex items-center gap-1.5">
           <Circle size={4} fill={colors.secondary} stroke="0" />
-          <div className="text-slate-500 text-xs">Utilization Rate</div>
+          <div className="typography-label-6 text-secondary">Utilization Rate</div>
         </div>
       </div>
       <Chart {...chartProps} />

diff --git a/...ges/app/src/features/market-details/components/charts/interest-yield/components/Chart.tsx b/...ges/app/src/features/market-details/components/charts/interest-yield/components/Chart.tsx
@@ -208,12 +208,12 @@ function Chart({
 
 function TooltipContent({ data }: { data: GraphDataPoint }) {
   return (
-    <div className="flex gap-3 rounded-xl border border-slate-700/10 bg-white p-3 shadow">
-      <div className="flex flex-col gap-3 text-slate-500 text-xs leading-none">
+    <div className="typography-label-6 flex gap-3 rounded-sm border border-primary bg-primary p-3 shadow">
+      <div className="flex flex-col gap-3 text-secondary">
         <p>Utilization Rate:</p>
         <p>Borrow APY:</p>
       </div>
-      <div className="flex flex-col gap-3 text-sky-950 text-xs leading-none">
+      <div className="flex flex-col gap-3 text-primary">
         <p>{formatPercentage(Percentage(data.x))}</p>
         <p>{formatPercentage(Percentage(data.y, true))}</p>
       </div>

diff --git a/packages/app/src/features/market-details/components/my-wallet/MyWallet.tsx b/packages/app/src/features/market-details/components/my-wallet/MyWallet.tsx
@@ -31,7 +31,7 @@ export interface MyWalletProps {
 export function MyWallet({ token, tokenBalance, lend, deposit, borrow, openDialog }: MyWalletProps) {
   return (
     <WalletPanelContent>
-      <h3 className="font-semibold text-base text-sky-950 md:text-xl">My Wallet</h3>
+      <h3 className="typography-heading-4 text-primary">My Wallet</h3>
       <TokenBalance token={token} balance={tokenBalance} />
       {lend && (
         <ActionRow

diff --git a/packages/app/src/features/market-details/components/my-wallet/MyWalletChainMismatch.tsx b/packages/app/src/features/market-details/components/my-wallet/MyWalletChainMismatch.tsx
@@ -3,8 +3,8 @@ import { Panel } from '@/ui/atoms/panel/Panel'
 export function MyWalletChainMismatch() {
   return (
     <Panel className="flex flex-col gap-4">
-      <h3 className="font-semibold text-base text-sky-950 md:text-xl">My Wallet</h3>
-      <p className="text-slate-500 text-sm">
+      <h3 className="typography-heading-4 text-primary">My Wallet</h3>
+      <p className="typography-label-5 text-secondary">
         To access this asset, please switch your wallet connection to the appropriate chain.
       </p>
     </Panel>

diff --git a/packages/app/src/features/market-details/components/my-wallet/components/ActionDetails.tsx b/packages/app/src/features/market-details/components/my-wallet/components/ActionDetails.tsx
@@ -9,12 +9,12 @@ interface ActionDetailsProps {
 
 export function ActionDetails({ label, token, value }: ActionDetailsProps) {
   return (
-    <div className="flex flex-col">
-      <p className="text-slate-500 text-xs leading-none">{label}</p>
-      <p className="text-base text-sky-950">
+    <div className="flex flex-col items-baseline">
+      <p className="typography-label-6 text-secondary">{label}</p>
+      <p className="typography-body-4 text-primary">
         {token.format(value, { style: 'auto' })} {token.symbol}
       </p>
-      <div className="text-slate-500 text-xs leading-none">{token.formatUSD(value)}</div>
+      <div className="typography-label-6 text-secondary">{token.formatUSD(value)}</div>
     </div>
   )
 }
diff --git a/packages/app/src/features/market-details/components/my-wallet/components/BorrowRow.tsx b/packages/app/src/features/market-details/components/my-wallet/components/BorrowRow.tsx
@@ -33,8 +33,8 @@ export function BorrowRow({ token, availableToBorrow, eligibility, onAction }: B
 
 function InfoWrapper({ children }: { children: React.ReactNode }) {
   return (
-    <div className="grid grid-cols-1 border-slate-700/10 border-t py-4">
-      <p className="text-slate-500 text-xs leading-none">{children}</p>
+    <div className="grid grid-cols-1 border-primary border-t py-4">
+      <p className="typography-body-6 text-secondary">{children}</p>
     </div>
   )
 }
diff --git a/packages/app/src/features/market-details/components/my-wallet/components/TokenBalance.tsx b/packages/app/src/features/market-details/components/my-wallet/components/TokenBalance.tsx
@@ -11,13 +11,10 @@ interface TokenBalanceProps {
 export function TokenBalance({ token, balance }: TokenBalanceProps) {
   return (
     <div className="my-4 flex flex-col gap-1">
-      <p className="text-slate-500 text-xs">Balance:</p>
+      <p className="typography-label-6 text-secondary">Balance:</p>
       <div className="flex items-center">
         <TokenIcon token={token} className="mr-2 h-6 w-6" />
-        <p
-          className="font-semibold text-base text-sky-950 md:text-xl"
-          data-testid={testIds.marketDetails.walletPanel.balance}
-        >
+        <p className="typography-body-3 text-primary" data-testid={testIds.marketDetails.walletPanel.balance}>
           {token.format(balance, { style: 'auto' })} {token.symbol}
         </p>
       </div>

diff --git a/...ages/app/src/features/market-details/components/oracle-panel/components/ProvidersList.tsx b/...ages/app/src/features/market-details/components/oracle-panel/components/ProvidersList.tsx
@@ -9,8 +9,8 @@ interface ProvidersListProps {
 
 export function ProvidersList({ providers }: ProvidersListProps) {
   return (
-    <div className="grid grid-cols-[auto_1fr] gap-2 border-gray-200 border-t pt-6 sm:gap-6">
-      <div className="my-auto text-slate-500 text-sm leading-none sm:text-xs sm:leading-none">Provided by</div>
+    <div className="grid grid-cols-[auto_1fr] gap-2 border-primary border-t pt-6 sm:gap-6">
+      <div className="typography-label-6 my-auto text-secondary">Provided by</div>
 
       <div
         className="mt-auto flex flex-row-reverse flex-wrap gap-2 place-self-end sm:flex-row sm:gap-4 sm:place-self-auto"

diff --git a/...c/features/market-details/components/oracle-panel/components/YieldingFixedOraclePanel.tsx b/...c/features/market-details/components/oracle-panel/components/YieldingFixedOraclePanel.tsx
@@ -24,11 +24,10 @@ export function YieldingFixedOraclePanel({
   return (
     <Panel className="flex flex-col gap-4">
       <div>
-        <div className="mb-1 text-secondary text-sm leading-none sm:text-xs sm:leading-none">Oracle type</div>
+        <div className="typography-label-5 mb-1 text-secondary">Oracle type</div>
         <div className="flex items-center gap-2">
-          <h3 className="typography-heading-5 text-primary">
-            Yielding Fixed Price{' '}
-            {providedBy.length > 1 && <span className="font-medium text-secondary">(Redundant)</span>}
+          <h3 className="typography-label-3 text-primary">
+            Yielding Fixed Price {providedBy.length > 1 && <span className="text-secondary">(Redundant)</span>}
           </h3>
           <Info size={16}>
             The asset price is calculated using both an exchange rate and a market price oracle. Sky Governance controls
@@ -45,7 +44,7 @@ export function YieldingFixedOraclePanel({
             >
               {ratio.toFixed(4)}
             </div>
-            <div className="md:-bottom-6 text-secondary text-xs md:absolute">
+            <div className="md:-bottom-6 typography-label-6 text-secondary md:absolute">
               <span data-testid={oracleTestIds.asset}>{token.symbol}</span> to {baseAssetSymbol} Ratio
             </div>
           </div>
@@ -57,7 +56,7 @@ export function YieldingFixedOraclePanel({
             >
               {formatUSDPriceWithPrecision(baseAssetPrice)}
             </div>
-            <div className="md:-bottom-6 text-secondary text-xs md:absolute">
+            <div className="md:-bottom-6 typography-label-6 text-secondary md:absolute">
               <span data-testid={oracleTestIds.yieldingFixed.baseAssetSymbol}>{baseAssetSymbol}</span> Oracle Price
             </div>
           </div>
@@ -69,7 +68,7 @@ export function YieldingFixedOraclePanel({
             >
               {formatUSDPriceWithPrecision(price)}
             </div>
-            <div className="md:-bottom-6 text-secondary text-xs md:absolute">Final Price</div>
+            <div className="md:-bottom-6 typography-label-6 text-secondary md:absolute">Final Price</div>
           </div>
         </div>
 

diff --git a/packages/app/src/features/markets/components/markets-table/components/AssetNameCell.tsx b/packages/app/src/features/markets/components/markets-table/components/AssetNameCell.tsx
@@ -30,9 +30,9 @@ export function AssetNameCell({ token, reserveStatus, 'data-testid': dataTestId
           </ColorFilter>
         </div>
       )}
-      <div className="flex min-w-0 flex-col">
+      <div className="flex min-w-0 items-baseline gap-2 xs:flex-row">
         <TokenName token={token} className={cn(isPaused && 'text-red-600')} />
-        <p className={cn('text-slate-500 text-sx leading-none', isPaused && 'text-red-300')}>{token.symbol}</p>
+        <p className={cn('typography-label-6 text-secondary', isPaused && 'text-red-300')}>{token.symbol}</p>
       </div>
       {isFrozen && <FrozenPill data-testid={testIds.markets.frozenPill} />}
       {isPaused && <PausedPill data-testid={testIds.markets.pausedPill} />}
@@ -51,7 +51,7 @@ export function TokenName({ token, className }: TokenNameProps) {
   return (
     <Tooltip open={!isTruncated ? false : undefined}>
       <TooltipTrigger asChild>
-        <p className={cn('truncate font-semibold text-base lg:text-base md:text-sm', className)} ref={tokenNameRef}>
+        <p className={cn('typography-label-4 truncate', className)} ref={tokenNameRef}>
           {token.name}
         </p>
       </TooltipTrigger>

diff --git a/packages/app/src/ui/atoms/accordion/Accordion.tsx b/packages/app/src/ui/atoms/accordion/Accordion.tsx
@@ -39,7 +39,7 @@ const AccordionContent = React.forwardRef<
 >(({ className, children, ...props }, ref) => (
   <Content
     ref={ref}
-    className="overflow-hidden text-slate-500 text-sm transition-all data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down"
+    className="typography-body-4 overflow-hidden text-secondary transition-all data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down"
     {...props}
   >
     <div className={cn('pt-0 pb-4', className)}>{children}</div>

diff --git a/packages/app/src/ui/atoms/dropdown/DropdownMenu.tsx b/packages/app/src/ui/atoms/dropdown/DropdownMenu.tsx
@@ -128,11 +128,6 @@ const DropdownMenuSeparator = React.forwardRef<
 ))
 DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName
 
-function DropdownMenuShortcut({ className, ...props }: React.HTMLAttributes<HTMLSpanElement>) {
-  return <span className={cn('ml-auto text-xs tracking-widest opacity-60', className)} {...props} />
-}
-DropdownMenuShortcut.displayName = 'DropdownMenuShortcut'
-
 export {
   DropdownMenu,
   DropdownMenuContent,
@@ -141,7 +136,6 @@ export {
   DropdownMenuLabel,
   DropdownMenuPortal,
   DropdownMenuSeparator,
-  DropdownMenuShortcut,
   DropdownMenuSub,
   DropdownMenuSubContent,
   DropdownMenuTrigger,

diff --git a/packages/app/src/ui/charts/ChartTooltipContent.tsx b/packages/app/src/ui/charts/ChartTooltipContent.tsx
@@ -3,20 +3,20 @@ import { ReactNode } from 'react'
 
 export function ChartTooltipContent({ children: [date, value] }: { children: ReactNode[] }) {
   return (
-    <div className="flex flex-col gap-3 rounded-xl border border-slate-700/10 bg-white p-3 shadow">
+    <div className="flex flex-col gap-3 rounded-sm border border-primary bg-primary p-3 shadow">
       {date}
       {value}
     </div>
   )
 }
 
 function TooltipDate({ children }: { children: ReactNode }) {
-  return <div className="flex flex-col gap-3 text-slate-500 text-xs leading-none">{children}</div>
+  return <div className="typography-label-6 flex flex-col gap-3 text-secondary">{children}</div>
 }
 
 function TooltipValue({ children, dotColor }: { children: ReactNode; dotColor: string }) {
   return (
-    <div className="flex items-center gap-1.5 text-sm leading-none">
+    <div className="typography-body-5 flex items-center gap-1.5">
       <Circle size={8} fill={dotColor} stroke="0" />
       <div>{children}</div>
     </div>

diff --git a/packages/app/src/ui/molecules/info-tile/InfoTile.tsx b/packages/app/src/ui/molecules/info-tile/InfoTile.tsx
@@ -19,14 +19,14 @@ export function InfoTile({ children, 'data-testid': dataTestId, className }: Inf
 }
 
 function Label({ children }: InfoTileProps) {
-  return <div className="my-auto text-slate-500 text-sm leading-none sm:text-xs sm:leading-none">{children}</div>
+  return <div className="typography-label-6 my-auto text-secondary">{children}</div>
 }
 
 function Value({ children, 'data-testid': dataTestId, className }: InfoTileProps) {
   return (
     <div
       className={cn(
-        'flex items-center gap-1 justify-self-end text-sky-950 text-sm leading-none sm:min-h-[26px] sm:justify-self-start sm:text-base sm:leading-none',
+        'typography-label-2 flex items-center gap-1 justify-self-end text-primary sm:min-h-[26px] sm:justify-self-start sm:text-base sm:leading-none',
         className,
       )}
       data-testid={dataTestId}
@@ -41,7 +41,7 @@ function ComplementaryLine({ children, 'data-testid': dataTestId, className }: I
     <p
       className={cn(
         'col-start-2 row-start-2 justify-self-end',
-        'text-slate-500 text-xs leading-none',
+        'typography-label-6 text-secondary',
         'sm:col-start-1 sm:row-start-3',
         'sm:justify-self-start sm:leading-none',
         className,