onecart-ui/src/styles/tokens/typography.ts

Cross-platform React and React Native component library with white-label support

// This file maps the generated tokens to a structured format for Typography component
import * as tokens from "./tokens";
import { normalizeFontWeight } from "./utils/fontUtils";
import { pxToNumber } from "./utils/utils";

export const typographyTokens = {
  // Display variants
  display2xl: {
    fontFamily: tokens.DISPLAY_2XL_FONT_FAMILY,
    fontSize: pxToNumber(tokens.DISPLAY_2XL_FONT_SIZE),
    fontWeight: normalizeFontWeight(tokens.DISPLAY_2XL_FONT_WEIGHT),
    lineHeight: pxToNumber(tokens.LINE_HEIGHT_6XL),
    color: tokens.TEXT_HEADER,
    letterSpacing: tokens.DISPLAY_2XL_LETTER_SPACING,
    textDecoration: tokens.DISPLAY_2XL_TEXT_DECORATION,
    textCase: tokens.DISPLAY_2XL_TEXT_CASE,
  },
  displayXl: {
    fontFamily: tokens.DISPLAY_XL_FONT_FAMILY,
    fontSize: pxToNumber(tokens.DISPLAY_XL_FONT_SIZE),
    fontWeight: normalizeFontWeight(tokens.DISPLAY_XL_FONT_WEIGHT),
    lineHeight: pxToNumber(tokens.LINE_HEIGHT_5XL),
    color: tokens.TEXT_HEADER,
    letterSpacing: tokens.DISPLAY_XL_LETTER_SPACING,
    textDecoration: tokens.DISPLAY_XL_TEXT_DECORATION,
    textCase: tokens.DISPLAY_XL_TEXT_CASE,
  },

  // Heading variants
  headingXl: {
    fontFamily: tokens.HEADING_XL_FONT_FAMILY,
    fontSize: pxToNumber(tokens.HEADING_XL_FONT_SIZE),
    fontWeight: normalizeFontWeight(tokens.HEADING_XL_FONT_WEIGHT),
    lineHeight: pxToNumber(tokens.LINE_HEIGHT_4XL),
    color: tokens.TEXT_HEADER,
    letterSpacing: tokens.HEADING_XL_LETTER_SPACING,
    textDecoration: tokens.HEADING_XL_TEXT_DECORATION,
    textCase: tokens.HEADING_XL_TEXT_CASE,
  },
  headingLg: {
    fontFamily: tokens.HEADING_LG_FONT_FAMILY,
    fontSize: pxToNumber(tokens.HEADING_LG_FONT_SIZE),
    fontWeight: normalizeFontWeight(tokens.HEADING_LG_FONT_WEIGHT),
    lineHeight: pxToNumber(tokens.LINE_HEIGHT_3XL),
    color: tokens.TEXT_HEADER,
    letterSpacing: tokens.HEADING_LG_LETTER_SPACING,
    textDecoration: tokens.HEADING_LG_TEXT_DECORATION,
    textCase: tokens.HEADING_LG_TEXT_CASE,
  },
  headingMd: {
    fontFamily: tokens.HEADING_MD_FONT_FAMILY,
    fontSize: pxToNumber(tokens.HEADING_MD_FONT_SIZE),
    fontWeight: normalizeFontWeight(tokens.HEADING_MD_FONT_WEIGHT),
    lineHeight: pxToNumber(tokens.LINE_HEIGHT_2XL),
    color: tokens.TEXT_HEADER,
    letterSpacing: tokens.HEADING_MD_LETTER_SPACING,
    textDecoration: tokens.HEADING_MD_TEXT_DECORATION,
    textCase: tokens.HEADING_MD_TEXT_CASE,
  },
  headingSm: {
    fontFamily: tokens.HEADING_SM_FONT_FAMILY,
    fontSize: pxToNumber(tokens.HEADING_SM_FONT_SIZE),
    fontWeight: normalizeFontWeight(tokens.HEADING_SM_FONT_WEIGHT),
    lineHeight: pxToNumber(tokens.LINE_HEIGHT_XL),
    color: tokens.TEXT_HEADER,
    letterSpacing: tokens.HEADING_SM_LETTER_SPACING,
    textDecoration: tokens.HEADING_SM_TEXT_DECORATION,
    textCase: tokens.HEADING_SM_TEXT_CASE,
  },
  headingXs: {
    fontFamily: tokens.HEADING_XS_FONT_FAMILY,
    fontSize: pxToNumber(tokens.HEADING_XS_FONT_SIZE),
    fontWeight: normalizeFontWeight(tokens.HEADING_XS_FONT_WEIGHT),
    lineHeight: pxToNumber(tokens.LINE_HEIGHT_LG),
    color: tokens.TEXT_HEADER,
    letterSpacing: tokens.HEADING_XS_LETTER_SPACING,
    textDecoration: tokens.HEADING_XS_TEXT_DECORATION,
    textCase: tokens.HEADING_XS_TEXT_CASE,
  },

  // Body text variants
  bodyXl: {
    fontFamily: tokens.BODY_XL_FONT_FAMILY,
    fontSize: pxToNumber(tokens.BODY_XL_FONT_SIZE),
    fontWeight: normalizeFontWeight(tokens.BODY_XL_FONT_WEIGHT),
    lineHeight: pxToNumber(tokens.BODY_XL_LINE_HEIGHT),
    color: tokens.TEXT_BODY,
    letterSpacing: tokens.BODY_XL_LETTER_SPACING,
    textDecoration: tokens.BODY_XL_TEXT_DECORATION,
    textCase: tokens.BODY_XL_TEXT_CASE,
    paragraphIndent: tokens.BODY_XL_PARAGRAPH_INDENT,
  },
  bodyLg: {
    fontFamily: tokens.BODY_LG_FONT_FAMILY,
    fontSize: pxToNumber(tokens.BODY_LG_FONT_SIZE),
    fontWeight: normalizeFontWeight(tokens.BODY_LG_FONT_WEIGHT),
    lineHeight: pxToNumber(tokens.BODY_LG_LINE_HEIGHT),
    color: tokens.TEXT_BODY,
    letterSpacing: tokens.BODY_LG_LETTER_SPACING,
    textDecoration: tokens.BODY_LG_TEXT_DECORATION,
    textCase: tokens.BODY_LG_TEXT_CASE,
    paragraphIndent: tokens.BODY_LG_PARAGRAPH_INDENT,
  },
  bodyMd: {
    fontFamily: tokens.BODY_MD_FONT_FAMILY,
    fontSize: pxToNumber(tokens.BODY_MD_FONT_SIZE),
    fontWeight: normalizeFontWeight(tokens.BODY_MD_FONT_WEIGHT),
    lineHeight: pxToNumber(tokens.BODY_MD_LINE_HEIGHT),
    color: tokens.TEXT_BODY,
    letterSpacing: tokens.BODY_MD_LETTER_SPACING,
    textDecoration: tokens.BODY_MD_TEXT_DECORATION,
    textCase: tokens.BODY_MD_TEXT_CASE,
    paragraphIndent: tokens.BODY_MD_PARAGRAPH_INDENT,
  },
  bodySm: {
    fontFamily: tokens.BODY_SM_FONT_FAMILY,
    fontSize: pxToNumber(tokens.BODY_SM_FONT_SIZE),
    fontWeight: normalizeFontWeight(tokens.BODY_SM_FONT_WEIGHT),
    lineHeight: pxToNumber(tokens.BODY_SM_LINE_HEIGHT),
    color: tokens.TEXT_BODY,
    letterSpacing: tokens.BODY_SM_LETTER_SPACING,
    textDecoration: tokens.BODY_SM_TEXT_DECORATION,
    textCase: tokens.BODY_SM_TEXT_CASE,
    paragraphIndent: tokens.BODY_SM_PARAGRAPH_INDENT,
  },
  bodyXs: {
    // Map to utility-caption which is our smallest text style in Figma tokens
    fontFamily: tokens.UTILITY_CAPTION_FONT_FAMILY,
    fontSize: pxToNumber(tokens.UTILITY_CAPTION_FONT_SIZE),
    fontWeight: normalizeFontWeight(tokens.UTILITY_CAPTION_FONT_WEIGHT),
    lineHeight: pxToNumber(tokens.UTILITY_CAPTION_LINE_HEIGHT),
    color: tokens.TEXT_BODY,
    letterSpacing: tokens.UTILITY_CAPTION_LETTER_SPACING,
    textDecoration: tokens.UTILITY_CAPTION_TEXT_DECORATION,
    textCase: tokens.UTILITY_CAPTION_TEXT_CASE,
    paragraphIndent: tokens.UTILITY_CAPTION_PARAGRAPH_INDENT,
  },

  // Label variants - map to Utility tokens from Figma
  labelLg: {
    // Maps to utility-button
    fontFamily: tokens.UTILITY_BUTTON_FONT_FAMILY,
    fontSize: pxToNumber(tokens.UTILITY_BUTTON_FONT_SIZE),
    fontWeight: normalizeFontWeight(tokens.UTILITY_BUTTON_FONT_WEIGHT),
    lineHeight: pxToNumber(tokens.UTILITY_BUTTON_LINE_HEIGHT),
    color: tokens.TEXT_TERTIARY,
    letterSpacing: tokens.UTILITY_BUTTON_LETTER_SPACING,
    textDecoration: tokens.UTILITY_BUTTON_TEXT_DECORATION,
    textCase: tokens.UTILITY_BUTTON_TEXT_CASE,
  },
  labelMd: {
    // Maps to utility-link
    fontFamily: tokens.UTILITY_LINK_FONT_FAMILY,
    fontSize: pxToNumber(tokens.UTILITY_LINK_FONT_SIZE),
    fontWeight: normalizeFontWeight(tokens.UTILITY_LINK_FONT_WEIGHT),
    lineHeight: pxToNumber(tokens.UTILITY_LINK_LINE_HEIGHT),
    color: tokens.TEXT_TERTIARY,
    letterSpacing: tokens.UTILITY_LINK_LETTER_SPACING,
    textDecoration: tokens.TEXT_DECORATION_NONE, // Override the default underline from utility-link
    textCase: tokens.UTILITY_LINK_TEXT_CASE,
  },
  labelSm: {
    // Maps to utility-caption
    fontFamily: tokens.UTILITY_CAPTION_FONT_FAMILY,
    fontSize: pxToNumber(tokens.UTILITY_CAPTION_FONT_SIZE),
    fontWeight: normalizeFontWeight(tokens.UTILITY_CAPTION_FONT_WEIGHT),
    lineHeight: pxToNumber(tokens.UTILITY_CAPTION_LINE_HEIGHT),
    color: tokens.TEXT_TERTIARY,
    letterSpacing: tokens.UTILITY_CAPTION_LETTER_SPACING,
    textDecoration: tokens.UTILITY_CAPTION_TEXT_DECORATION,
    textCase: tokens.UTILITY_CAPTION_TEXT_CASE,
  },

  // Weights mapping for custom weight overrides
  weights: {
    normal: "400", // Regular weight
    medium: normalizeFontWeight(tokens.MEDIUM),
    semibold: normalizeFontWeight(tokens.SEMI_BOLD),
    bold: "700", // Bold weight (not directly defined in tokens)
  },
};

export default typographyTokens;