Use tokens as prescribed

src/components/general/Typography/Typography.tsx

@@ -1,10 +1,18 @@
-import { Typography as AntTypography, type TypographyProps as AntTypographyProps } from 'antd'
+import {
+  Typography as AntTypography,
+  type TypographyProps as AntTypographyProps,
+  theme,
+  ConfigProvider as AntConfigProvider,
+} from 'antd'
 import { ConfigProvider } from 'src/components'
 import { type ReactNode } from 'react'
 import { type TextProps as AntTextProps } from 'antd/es/typography/Text'
 import { type TitleProps as AntTitleProps } from 'antd/es/typography/Title'
 import { type LinkProps as AntLinkProps } from 'antd/es/typography/Link'
 import { type ParagraphProps as AntParagraphProps } from 'antd/es/typography/Paragraph'
+import type { FontMapToken } from 'antd/es/theme/interface'
+
+const { useToken } = theme
 
 export interface ITypographyProps extends AntTypographyProps {
   children: ReactNode
@@ -21,25 +29,38 @@ export interface ITextProps extends AntTextProps {
   size?: TypographySize
 }
 
-const getFontSizeVariable = (size: TypographySize): string => `--font-size${size === 'base' ? '' : `-${size}`}`
+const getFontSizeToken = (size: TypographySize): keyof FontMapToken => {
+  if (size === 'base') return 'fontSize'
+  if (size === 'sm') return 'fontSizeSM'
+  if (size === 'lg') return 'fontSizeLG'
+  return 'fontSizeXL'
+}
 
-const getLineHeightVariable = (size: TypographySize): string => {
-  if (size === 'sm') return `--line-height-sm`
-  if (size === 'lg' || size === 'xl') return '--line-height-lg'
-  return `--line-height`
+const getLineHeightToken = (size: TypographySize): keyof FontMapToken => {
+  if (size === 'base') return 'lineHeight'
+  if (size === 'sm') return 'lineHeightSM'
+  return 'lineHeightLG'
 }
 
 const Text = ({ size = 'base', ...props }: ITextProps) => {
+  const { token } = useToken()
+
+  const fontSize = getFontSizeToken(size)
+  const lineHeight = getLineHeightToken(size)
+
   return (
     <ConfigProvider>
-      <AntTypography.Text
-        style={{
-          fontSize: `var(${getFontSizeVariable(size)})`,
-          lineHeight: `var(${getLineHeightVariable(size)})`,
-        }}
-        {...props}>
-        {props.children}
-      </AntTypography.Text>
+      <AntConfigProvider
+        theme={{
+          components: {
+            Typography: {
+              fontSize: token[fontSize],
+              lineHeight: token[lineHeight],
+            },
+          },
+        }}>
+        <AntTypography.Text {...props}>{props.children}</AntTypography.Text>
+      </AntConfigProvider>
     </ConfigProvider>
   )
 }