From 3a3e22310ed5a17893cd478dd6a7ecf3e65e508c Mon Sep 17 00:00:00 2001
From: Max Korsunov <maxkors2014@gmail.com>
Date: Wed, 15 Jan 2025 14:45:23 +0400
Subject: [PATCH] feat(ui): add `bodyTechnical` text style

---
 packages/ui/src/Text/index.tsx      |  6 ++++--
 packages/ui/src/Text/types.ts       |  1 +
 packages/ui/src/utils/typography.ts | 12 +++++++-----
 3 files changed, 12 insertions(+), 7 deletions(-)

diff --git a/packages/ui/src/Text/index.tsx b/packages/ui/src/Text/index.tsx
index 36fb7f1d8..0ac534c5e 100644
--- 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
index f86727aed..ab9ec45f3 100644
--- 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
index 94ee730d2..d96e64c90 100644
--- 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');