feat: added Inter fonts (#506)

.changeset/fuzzy-eggs-cross.md

@@ -0,0 +1,5 @@
+---
+"@coinbase/onchainkit": patch
+---
+
+- **feat**: introduce Inter font-family and internal text components. By @kyhyco #506

src/internal/text/TextBody.tsx

@@ -0,0 +1,13 @@
+import { ReactNode } from 'react';
+
+type TextBodyReact = {
+  children: ReactNode;
+};
+
+export function TextBody({ children }: TextBodyReact) {
+  return (
+    <span className="text-sans text-base leading-normal text-black">
+      {children}
+    </span>
+  );
+}

src/internal/text/TextCaption.tsx

@@ -0,0 +1,12 @@
+import { ReactNode } from 'react';
+
+type TextCaptionReact = {
+  children: ReactNode;
+};
+
+/* istanbul ignore next */
+export function TextCaption({ children }: TextCaptionReact) {
+  return (
+    <span className="text-sans text-bold text-xs leading-4">{children}</span>
+  );
+}

src/internal/text/TextHeadline.tsx

@@ -0,0 +1,13 @@
+import { ReactNode } from 'react';
+
+type TextHeadlineReact = {
+  children: ReactNode;
+};
+
+export function TextHeadline({ children }: TextHeadlineReact) {
+  return (
+    <span className="text-sans text-base leading-normal text-bold text-[#0A0B0D]">
+      {children}
+    </span>
+  );
+}

src/internal/text/TextLabel1.tsx

@@ -0,0 +1,14 @@
+import { ReactNode } from 'react';
+
+type TextLabel1React = {
+  children: ReactNode;
+};
+
+/* istanbul ignore next */
+export function TextLabel1({ children }: TextLabel1React) {
+  return (
+    <span className="text-sans text-bold text-sm leading-5 text-[#0A0B0D]">
+      {children}
+    </span>
+  );
+}

src/internal/text/TextLabel2.tsx

@@ -0,0 +1,14 @@
+import { ReactNode } from 'react';
+
+type TextLabel2React = {
+  children: ReactNode;
+};
+
+/* istanbul ignore next */
+export function TextLabel2({ children }: TextLabel2React) {
+  return (
+    <span className="text-sans text-sm leading-5 text-[#0A0B0D]">
+      {children}
+    </span>
+  );
+}

src/internal/text/TextLegal.tsx

@@ -0,0 +1,10 @@
+import { ReactNode } from 'react';
+
+type TextLegalReact = {
+  children: ReactNode;
+};
+
+/* istanbul ignore next */
+export function TextLegal({ children }: TextLegalReact) {
+  return <span className="text-sans text-xs leading-4">{children}</span>;
+}

src/internal/text/index.ts

@@ -0,0 +1,2 @@
+export { TextBody } from './TextBody';
+export { TextHeadline } from './TextHeadline';

src/styles/index-with-tailwind.css

@@ -1,2 +1,4 @@
+@import url('https://fonts.googleapis.com/css2?family=Inter&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@700&display=swap');
 @import url('./tailwind-base.css');
-@import url('./index.css');
+@import url('./index.css');

src/token/components/TokenChip.tsx

@@ -1,3 +1,4 @@
+import { TextBody } from '../../internal/text';
 import type { TokenChipReact } from '../types';
 
 /**
@@ -14,9 +15,7 @@ export function TokenChip({ token, onClick }: TokenChipReact) {
       onClick={() => onClick?.(token)}
     >
       <img className="mr-2 h-6 w-6" src={token.image || ''} />
-      <span className="font-medium text-base text-black leading-4">
-        {token.symbol}
-      </span>
+      <TextBody>{token.symbol}</TextBody>
     </button>
   );
 }

src/token/components/TokenRow.tsx

@@ -2,6 +2,7 @@ import { memo } from 'react';
 import type { TokenRowReact } from '../types';
 import { formatAmount } from '../core/formatAmount';
 import { TokenImage } from './TokenImage';
+import { TextHeadline } from '../../internal/text';
 
 export const TokenRow = memo(function TokenRow({
   token,
@@ -19,9 +20,7 @@ export const TokenRow = memo(function TokenRow({
       <span className="flex items-center gap-3">
         {!hideImage && <TokenImage token={token} size={48} />}
         <span className="flex flex-col items-start">
-          <span className="font-medium text-[#0A0B0D] leading-normal">
-            {token.name}
-          </span>
+          <TextHeadline>{token.name}</TextHeadline>
           {!hideSymbol && (
             <span className="font-normal text-[#5B616E] leading-normal">
               {token.symbol}

src/token/components/TokenSelectButton.tsx

@@ -1,6 +1,7 @@
 import { type ForwardedRef, forwardRef } from 'react';
 import type { TokenSelectButtonReact } from '../types';
 import { TokenImage } from './TokenImage';
+import { TextBody } from '../../internal/text';
 
 function CaretUp() {
   return (
@@ -52,17 +53,12 @@ export const TokenSelectButton = forwardRef(function TokenSelectButton(
       {token ? (
         <>
           <TokenImage token={token} size={16} />
-          <span
-            data-testid="ockTokenSelectButton_Symbol"
-            className="font-medium text-[#0a0b0d] text-base leading-normal"
-          >
+          <TextBody data-testid="ockTokenSelectButton_Symbol">
             {token.symbol}
-          </span>
+          </TextBody>
         </>
       ) : (
-        <span className="font-medium text-[#0a0b0d] text-base leading-normal">
-          Select
-        </span>
+        <TextBody>Select</TextBody>
       )}
       {isOpen ? <CaretUp /> : <CaretDown />}
     </button>

tailwind.config.js

@@ -2,6 +2,9 @@
 export default {
   content: ['./src/**/*.{ts,tsx}'],
   theme: {
+    fontFamily: {
+      sans: ['Inter', 'sans-serif'],
+    },
     extend: {},
   },
   plugins: [],