Apply new text components to token kit

src/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/text/TextCaption.tsx

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

src/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/text/TextLabel1.tsx

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

src/text/TextLabel2.tsx

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

src/text/TextLegal.tsx

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

src/token/components/TokenChip.tsx

@@ -1,4 +1,5 @@
-import type { TokenChipReact } from '../types';
+import { TextBody } from "../../text/TextBody";
+import type { TokenChipReact } from "../types";
 
 /**
  * Small button that display a given token symbol and image.
@@ -13,10 +14,8 @@ export function TokenChip({ token, onClick }: TokenChipReact) {
       className="flex w-fit items-center rounded-2xl bg-[#eef0f3] py-1 pr-3 pl-1 hover:active:bg-[#bfc1c3] hover:bg-[#cacbce]"
       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>
+      <img className="mr-2 h-6 w-6" src={token.image || ""} />
+      <TextBody>{token.symbol}</TextBody>
     </button>
   );
 }

src/token/components/TokenRow.tsx

@@ -1,7 +1,8 @@
-import { memo } from 'react';
-import type { TokenRowReact } from '../types';
-import { formatAmount } from '../core/formatAmount';
-import { TokenImage } from './TokenImage';
+import { memo } from "react";
+import type { TokenRowReact } from "../types";
+import { formatAmount } from "../core/formatAmount";
+import { TokenImage } from "./TokenImage";
+import { TextHeadline } from "../../text/TextHeadline";
 
 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 { type ForwardedRef, forwardRef } from "react";
+import type { TokenSelectButtonReact } from "../types";
+import { TokenImage } from "./TokenImage";
+import { TextBody } from "../../text/TextBody";
 
 function CaretUp() {
   return (
@@ -40,7 +41,7 @@ function CaretDown() {
 
 export const TokenSelectButton = forwardRef(function TokenSelectButton(
   { onClick, token, isOpen }: TokenSelectButtonReact,
-  ref: ForwardedRef<HTMLButtonElement>,
+  ref: ForwardedRef<HTMLButtonElement>
 ) {
   return (
     <button
@@ -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>