onecart-ui/src/styles/tokens/utils/fontUtils.ts

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

import { pxToNumber } from "./utils";

/**
 * Normalizes font weight to a string representation
 * Converts numeric values to string, handles special cases like "book"
 * @param weight The font weight value, can be a string or number
 * @returns Normalized font weight as a string
 */
export const normalizeFontWeight = (weight: string | number): string => {
  if (typeof weight === "number") {
    return weight.toString();
  }

  if (weight === "book") {
    return "400";
  }

  return weight;
};

/**
 * Calculates an appropriate line height based on font size
 * Uses a standard typographic ratio or falls back to a default multiplier
 *
 * @param fontSize The font size in pixels
 * @param ratio Optional ratio to calculate line height (default: 1.5)
 * @returns The calculated line height as a number
 */
export const calculateLineHeight = (
  fontSize: string | number,
  ratio: number = 1.5
): number => {
  const size = typeof fontSize === "string" ? pxToNumber(fontSize) : fontSize;
  return Math.round(size * ratio);
};

/**
 * Converts letter spacing percentage to a pixel value
 * Figma often uses percentage values for letter spacing
 *
 * @param letterSpacing The letter spacing value (e.g. "0%", "2%")
 * @param fontSize The font size to calculate relative to
 * @returns The letter spacing in pixels as a number
 */
export const letterSpacingToPixels = (
  letterSpacing: string,
  fontSize: string | number
): number => {
  // If letterSpacing is already a pixel value, convert and return
  if (letterSpacing.endsWith("px")) {
    return pxToNumber(letterSpacing);
  }

  // Handle percentage values
  if (letterSpacing.endsWith("%")) {
    const percentage = parseFloat(letterSpacing) / 100;
    const size = typeof fontSize === "string" ? pxToNumber(fontSize) : fontSize;
    return size * percentage;
  }

  // Default to 0 if format is not recognized
  return 0;
};