feat(ui): add bodyTechnical text style

penumbra-zone · Jan 15, 2025 · 3a3e223 · 3a3e223
1 parent fcf909a
commit 3a3e223
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 7 deletions.
diff --git a/packages/ui/src/Text/index.tsx b/packages/ui/src/Text/index.tsx
@@ -2,6 +2,7 @@ import cn from 'clsx';
 
 import {
   body,
+  bodyTechnical,
   detail,
   h1,
   h2,
@@ -10,7 +11,7 @@ import {
   large,
   small,
   detailTechnical,
-  strong,
+  bodyStrong,
   technical,
   xxl,
   p,
@@ -134,13 +135,14 @@ const VARIANT_MAP: Record<TextVariant, { element: ElementType; classes: string }
   xxl: { element: 'span', classes: xxl },
   large: { element: 'span', classes: large },
   p: { element: 'p', classes: p },
-  strong: { element: 'span', classes: strong },
+  strong: { element: 'span', classes: bodyStrong },
   detail: { element: 'span', classes: detail },
   xxs: { element: 'span', classes: xxs },
   small: { element: 'span', classes: small },
   detailTechnical: { element: 'span', classes: detailTechnical },
   technical: { element: 'span', classes: technical },
   body: { element: 'span', classes: body },
+  bodyTechnical: { element: 'span', classes: bodyTechnical },
   tableHeading: { element: 'span', classes: tableHeading },
   tableHeadingMedium: { element: 'span', classes: tableHeadingMedium },
   tableHeadingSmall: { element: 'span', classes: tableHeadingSmall },

diff --git a/packages/ui/src/Text/types.ts b/packages/ui/src/Text/types.ts
@@ -13,6 +13,7 @@ export type TextVariant =
   | 'detailTechnical'
   | 'technical'
   | 'body'
+  | 'bodyTechnical'
   | 'tableHeading'
   | 'tableHeadingMedium'
   | 'tableHeadingSmall'

diff --git a/packages/ui/src/utils/typography.ts b/packages/ui/src/utils/typography.ts
@@ -18,18 +18,22 @@ export const h3 = cn('font-heading text-text4xl font-medium leading-text4xl');
 
 export const h4 = cn('font-heading text-text3xl font-medium leading-text3xl');
 
+export const xxl = cn('font-default text-text2xl font-medium leading-text2xl');
+
 export const large = cn('font-default text-textLg font-medium leading-textLg');
 
 export const body = cn('font-default text-textBase font-normal leading-textBase');
 
-export const strong = cn('font-default text-textBase font-medium leading-textBase');
+export const bodyStrong = cn('font-default text-textBase font-medium leading-textBase');
+
+export const bodyTechnical = cn('font-mono text-textBase font-normal leading-textBase');
+
+export const small = cn('font-default text-textSm font-normal leading-textXs');
 
 export const detail = cn('font-default text-textXs font-medium leading-textXs');
 
 export const detailTechnical = cn('font-mono text-textXs font-normal leading-textXs');
 
-export const small = cn('font-default text-textSm font-normal leading-textXs');
-
 export const xxs = cn('font-default text-textXxs font-normal leading-textXxs');
 
 export const tab = cn('font-default text-textLg font-normal leading-textLg');
@@ -52,8 +56,6 @@ export const tableHeadingSmall = cn('font-default text-textXs font-medium leadin
 
 export const technical = cn('font-mono text-textBase font-medium leading-textBase');
 
-export const xxl = cn('font-default text-text2xl font-medium leading-text2xl');
-
 // equals to body with the bottom margin
 export const p = cn('font-default text-textBase font-normal leading-textBase mb-6 last:mb-0');