[C-2890] Add first version of a typography component to web

packages/web/src/components/typography/Text.tsx

@@ -0,0 +1,72 @@
+import { CSSProperties, ReactNode } from 'react'
+
+import { getCurrentThemeColors, ThemeColor } from 'utils/theme/theme'
+
+import { fontWeightMap, variantInfoMap, variantStrengthMap } from './constants'
+import {
+  TextSizeInfo,
+  TextStrengthInfo,
+  TextVariant,
+  TextSize,
+  TextStrength
+} from './types'
+
+const defaultBodyInfo: TextSizeInfo & TextStrengthInfo = {
+  ...variantInfoMap.body.M!,
+  ...variantStrengthMap.body.default!
+}
+
+export type TextProps = {
+  className?: string
+  children?: ReactNode
+  variant?: TextVariant
+  size?: TextSize
+  strength?: TextStrength
+  color?: ThemeColor
+}
+
+export const Text = (props: TextProps) => {
+  const {
+    className,
+    children,
+    variant = 'body',
+    strength = 'default',
+    size = 'M',
+    color = '--neutral',
+    ...otherProps
+  } = props
+
+  const themeColors = getCurrentThemeColors()
+  const textColor = themeColors[color] ?? themeColors['--neutral']
+
+  const variantSizeInfo = variantInfoMap[variant][size] ?? {}
+  const variantStrengthInfo = variantStrengthMap[variant][strength] ?? {}
+
+  const {
+    tag: Tag,
+    fontSize,
+    lineHeight,
+    letterSpacing,
+    fontWeight,
+    textTransform
+  } = {
+    ...defaultBodyInfo,
+    ...variantSizeInfo,
+    ...variantStrengthInfo
+  }
+
+  const styleObject: CSSProperties = {
+    fontWeight: fontWeightMap[fontWeight].toString(),
+    fontSize,
+    lineHeight,
+    letterSpacing,
+    textTransform,
+    color: textColor
+  }
+
+  return (
+    <Tag className={className} style={styleObject} {...otherProps}>
+      {children}
+    </Tag>
+  )
+}

packages/web/src/components/typography/constants.ts

@@ -0,0 +1,170 @@
+import {
+  FontWeight,
+  TextVariant,
+  TextVariantSizeInfo,
+  TextVariantStrengthInfo
+} from './types'
+
+export const fontWeightMap: Record<FontWeight, number> = {
+  heavy: 900,
+  bold: 700,
+  demiBold: 600,
+  medium: 500,
+  regular: 400,
+  light: 300,
+  thin: 200,
+  ultraLight: 100
+}
+
+export const variantInfoMap: Record<TextVariant, TextVariantSizeInfo> = {
+  display: {
+    XL: {
+      tag: 'h1',
+      fontSize: '96px',
+      lineHeight: '120px'
+    },
+    L: {
+      tag: 'h1',
+      fontSize: '72px',
+      lineHeight: '88px'
+    },
+    M: {
+      tag: 'h1',
+      fontSize: '56px',
+      lineHeight: '68px'
+    },
+    S: {
+      tag: 'h1',
+      fontSize: '42px',
+      lineHeight: '52px'
+    }
+  },
+  heading: {
+    XL: {
+      tag: 'h1',
+      fontSize: '36px',
+      lineHeight: '40px'
+    },
+    L: {
+      tag: 'h2',
+      fontSize: '28px',
+      lineHeight: '32px'
+    },
+    M: {
+      tag: 'h3',
+      fontSize: '24px',
+      lineHeight: '32px'
+    },
+    S: {
+      tag: 'h4',
+      fontSize: '20px',
+      lineHeight: '24px'
+    }
+  },
+  title: {
+    L: {
+      tag: 'p',
+      fontSize: '18px',
+      lineHeight: '24px'
+    },
+    M: {
+      tag: 'p',
+      fontSize: '16px',
+      lineHeight: '20px'
+    },
+    S: {
+      tag: 'p',
+      fontSize: '14px',
+      lineHeight: '16px'
+    },
+    XS: {
+      tag: 'p',
+      fontSize: '12px',
+      lineHeight: '16px'
+    }
+  },
+  label: {
+    XL: {
+      tag: 'label',
+      fontSize: '20px',
+      lineHeight: '24px',
+      letterSpacing: '0.5px',
+      textTransform: 'uppercase'
+    },
+    L: {
+      tag: 'label',
+      fontSize: '16px',
+      lineHeight: '16px',
+      letterSpacing: '0.5px',
+      textTransform: 'uppercase'
+    },
+    M: {
+      tag: 'label',
+      fontSize: '14px',
+      lineHeight: '16px',
+      letterSpacing: '0.5px',
+      textTransform: 'uppercase'
+    },
+    S: {
+      tag: 'label',
+      fontSize: '12px',
+      lineHeight: '12px',
+      letterSpacing: '0.5px',
+      textTransform: 'uppercase'
+    },
+    XS: {
+      tag: 'label',
+      fontSize: '10px',
+      lineHeight: '12px',
+      letterSpacing: '0.5px',
+      textTransform: 'uppercase'
+    }
+  },
+  body: {
+    L: {
+      tag: 'p',
+      fontSize: '18px',
+      lineHeight: '24px'
+    },
+    M: {
+      tag: 'p',
+      fontSize: '16px',
+      lineHeight: '20px'
+    },
+    S: {
+      tag: 'p',
+      fontSize: '14px',
+      lineHeight: '20px'
+    },
+    XS: {
+      tag: 'p',
+      fontSize: '12px',
+      lineHeight: '20px'
+    }
+  }
+}
+
+export const variantStrengthMap: Record<TextVariant, TextVariantStrengthInfo> =
+  {
+    display: {
+      default: { fontWeight: 'bold' },
+      strong: { fontWeight: 'heavy' }
+    },
+    heading: {
+      default: { fontWeight: 'bold' },
+      strong: { fontWeight: 'heavy' }
+    },
+    title: {
+      weak: { fontWeight: 'demiBold' },
+      default: { fontWeight: 'bold' },
+      strong: { fontWeight: 'heavy' }
+    },
+    label: {
+      default: { fontWeight: 'bold' },
+      strong: { fontWeight: 'heavy' }
+    },
+    body: {
+      default: { fontWeight: 'medium' },
+      strong: { fontWeight: 'demiBold' }
+    }
+  }

packages/web/src/components/typography/index.ts

@@ -0,0 +1,2 @@
+export { Text } from './Text'
+export * from './types'

packages/web/src/components/typography/types.ts

@@ -0,0 +1,32 @@
+import { ElementType } from 'react'
+
+export type FontWeight =
+  | 'heavy' // 900
+  | 'bold' // 700
+  | 'demiBold' // 600
+  | 'medium' // 500
+  | 'regular' // 400
+  | 'light' // 300
+  | 'thin' // 200
+  | 'ultraLight' // 100
+
+export type TextStrength = 'weak' | 'default' | 'strong'
+export type TextStrengthInfo = {
+  fontWeight: FontWeight
+}
+type TextTransformValue = 'uppercase' | 'lowercase' | 'capitalize' | 'inherit'
+
+export type TextSize = 'XL' | 'L' | 'M' | 'S' | 'XS'
+export type TextSizeInfo = {
+  tag: ElementType
+  fontSize: string | number
+  lineHeight: string | number
+  letterSpacing?: string | number
+  textTransform?: TextTransformValue
+}
+
+export type TextVariant = 'display' | 'heading' | 'title' | 'label' | 'body'
+export type TextVariantSizeInfo = Partial<Record<TextSize, TextSizeInfo>>
+export type TextVariantStrengthInfo = Partial<
+  Record<TextStrength, TextStrengthInfo>
+>