@abdalla-1/swisco/src/config/tokens/fonts.ts

Swiscare Components Kit

// Tamagui heading and body font declarations.

import { createFont, isWeb } from '@tamagui/core';
import { fontSize, fontWeight, letterSpacing, lineHeight } from './typography';

// Required for Tamagui.
const modernEraFontFaces = {
  100: { normal: 'ModernEra-Regular' },
  200: { normal: 'ModernEra-Regular' },
  300: { normal: 'ModernEra-Regular' },
  400: { normal: 'ModernEra-Regular' },
  500: { normal: 'ModernEra-Medium' },
  600: { normal: 'ModernEra-Medium' },
  700: { normal: 'ModernEra-Bold' },
  800: { normal: 'ModernEra-Bold' },
  900: { normal: 'ModernEra-Bold' },
};

export const headingFont = createFont({
  family: isWeb
    // TODO: update once perf-testing of fonts (ModernEra vs. Roboto) is done
    //       the next value here will be either 'ModernEra' or 'Roboto'
    ? 'var(--nb-font-family, Roboto)'
    : 'ModernEra-Bold',
  size: {
    desktop1: fontSize.xxxxlarge,
    desktop2: fontSize.xxxlarge,
    desktop3: fontSize.xxlarge,
    desktop4: fontSize.xlarge,

    mobile1: fontSize.xxxlarge,
    mobile2: fontSize.xxlarge,
    mobile3: fontSize.xlarge,
    mobile4: fontSize.large,
  },
  lineHeight: {
    desktop1: lineHeight.tight * fontSize.xxxxlarge, // 1.25 * 40 = 50
    desktop2: lineHeight.tight * fontSize.xxxlarge,
    desktop3: lineHeight.tight * fontSize.xxlarge,
    desktop4: lineHeight.tight * fontSize.xlarge,

    mobile1: lineHeight.tight * fontSize.xxxlarge,
    mobile2: lineHeight.tight * fontSize.xxlarge,
    mobile3: lineHeight.tight * fontSize.xlarge,
    mobile4: lineHeight.tight * fontSize.large,
  },
  weight: {
    desktop1: fontWeight.bold,
    desktop2: fontWeight.bold,
    desktop3: fontWeight.bold,
    desktop4: fontWeight.bold,

    mobile1: fontWeight.bold,
    mobile2: fontWeight.bold,
    mobile3: fontWeight.bold,
    mobile4: fontWeight.bold,
  },
  letterSpacing: {
    desktop1: letterSpacing.tightest * fontSize.xxxxlarge, // -1px = 40 * -0.025
    desktop2: letterSpacing.tight * fontSize.xxxlarge,
    desktop3: letterSpacing.snug * fontSize.xxlarge,
    desktop4: letterSpacing.compact * fontSize.xlarge,

    mobile1: letterSpacing.tight * fontSize.xxxlarge, // -0.64px = 32 * -0.02
    mobile2: letterSpacing.snug * fontSize.xxlarge,
    mobile3: letterSpacing.compact * fontSize.xlarge,
    mobile4: letterSpacing.normal,
  },

  // for native only, alternate family based on weight/style
  face: modernEraFontFaces,
});
export const bodyFont = createFont({
  family: isWeb
    // TODO: update once perf-testing of fonts (ModernEra vs. Roboto) is done.
    //       Issue: https://finder.atlassian.net/browse/CONT-565
    //       The next value here for web will be either 'ModernEra' or 'Roboto'.
    ? 'var(--nb-font-family)'
    : 'ModernEra-Regular',
  size: {
    large: fontSize.large,
    largeMedium: fontSize.large,
    largeBold: fontSize.large,

    regular: fontSize.regular,
    regularMedium: fontSize.regular,
    regularBold: fontSize.regular,

    small: fontSize.small,
    smallMedium: fontSize.small,
    smallBold: fontSize.small,

    tiny: fontSize.tiny,
    tinyMedium: fontSize.tiny,
    tinyBold: fontSize.tiny,

    micro: fontSize.micro,
    microMedium: fontSize.micro,
    microBold: fontSize.micro,

    /** @deprecated */
    1: 10,
    /** @deprecated */
    2: 12,
    /** @deprecated */
    3: 14,
    /** @deprecated */
    4: 16,
    /** @deprecated */
    5: 18,
    /** @deprecated */
    6: 20,
    /** @deprecated */
    7: 24,
    /** @deprecated */
    8: 32,
    /** @deprecated */
    9: 40,
  },
  lineHeight: {
    large: lineHeight.regular * fontSize.large, // 1.5 * 18 = 27
    largeMedium: lineHeight.regular * fontSize.large,
    largeBold: lineHeight.regular * fontSize.large,

    regular: lineHeight.regular * fontSize.regular,
    regularMedium: lineHeight.regular * fontSize.regular,
    regularBold: lineHeight.regular * fontSize.regular,

    small: lineHeight.compact * fontSize.small,
    smallMedium: lineHeight.compact * fontSize.small,
    smallBold: lineHeight.compact * fontSize.small,

    tiny: lineHeight.snug * fontSize.tiny,
    tinyMedium: lineHeight.snug * fontSize.tiny,
    tinyBold: lineHeight.snug * fontSize.tiny,

    micro: lineHeight.snug * fontSize.micro,
    microMedium: lineHeight.snug * fontSize.micro,
    microBold: lineHeight.snug * fontSize.micro,

    /** @deprecated */
    1: 13,
    /** @deprecated */
    2: 20,
    /** @deprecated */
    3: 20,
    /** @deprecated */
    4: 24,
    /** @deprecated */
    5: 22.5,
    /** @deprecated */
    6: 25,
    /** @deprecated */
    7: 30,
    /** @deprecated */
    8: 40,
    /** @deprecated */
    9: 50,
  },
  weight: {
    large: fontWeight.regular,
    largeMedium: fontWeight.medium,
    largeBold: fontWeight.bold,

    regular: fontWeight.regular,
    regularMedium: fontWeight.medium,
    regularBold: fontWeight.bold,

    small: fontWeight.regular,
    smallMedium: fontWeight.medium,
    smallBold: fontWeight.bold,

    tiny: fontWeight.regular,
    tinyMedium: fontWeight.medium,
    tinyBold: fontWeight.bold,

    micro: fontWeight.regular,
    microMedium: fontWeight.medium,
    microBold: fontWeight.bold,

    /** @deprecated */
    4: '300',
    /** @deprecated */
    6: '700',
  },
  letterSpacing: {
    large: letterSpacing.normal,
    largeMedium: letterSpacing.normal,
    largeBold: letterSpacing.normal,

    regular: letterSpacing.normal,
    regularMedium: letterSpacing.normal,
    regularBold: letterSpacing.normal,

    small: letterSpacing.normal,
    smallMedium: letterSpacing.normal,
    smallBold: letterSpacing.normal,

    tiny: letterSpacing.normal,
    tinyMedium: letterSpacing.normal,
    tinyBold: letterSpacing.normal,

    micro: letterSpacing.normal,
    microMedium: letterSpacing.normal,
    microBold: letterSpacing.normal,

    /** @deprecated */
    1: 0,
    /** @deprecated */
    6: -0.05,
    /** @deprecated */
    7: -0.12,
    /** @deprecated */
    8: -0.64,
    /** @deprecated */
    9: -1,
  },

  // for native only, alternate family based on weight/style
  face: modernEraFontFaces,
});

export const fonts = {
  heading: headingFont,
  body: bodyFont,
};