@naarni/design-system/build/theme/typography.js

Naarni React Native Design System for EV Fleet Apps

import { Platform } from 'react-native';
// Font families
export const fontFamily = {
    sans: {
        regular: Platform.select({
            ios: 'SF Pro Text',
            android: 'Roboto',
            default: 'System',
        }),
        medium: Platform.select({
            ios: 'SF Pro Text',
            android: 'Roboto-Medium',
            default: 'System',
        }),
        semibold: Platform.select({
            ios: 'SF Pro Text',
            android: 'Roboto-Bold',
            default: 'System',
        }),
        bold: Platform.select({
            ios: 'SF Pro Text',
            android: 'Roboto-Bold',
            default: 'System',
        }),
    },
    mono: {
        regular: Platform.select({
            ios: 'SF Mono',
            android: 'Roboto Mono',
            default: 'Monospace',
        }),
        medium: Platform.select({
            ios: 'SF Mono',
            android: 'Roboto Mono Medium',
            default: 'Monospace',
        }),
        bold: Platform.select({
            ios: 'SF Mono',
            android: 'Roboto Mono Bold',
            default: 'Monospace',
        }),
    },
};
// Font weights
export const fontWeight = {
    thin: '100',
    extralight: '200',
    light: '300',
    regular: '400',
    medium: '500',
    semibold: '600',
    bold: '700',
    extrabold: '800',
    black: '900',
};
// Font sizes
export const fontSize = {
    xs: 12,
    sm: 14,
    base: 16,
    lg: 18,
    xl: 20,
    '2xl': 24,
    '3xl': 30,
    '4xl': 36,
    '5xl': 48,
    '6xl': 60,
};
// Line heights
export const lineHeight = {
    none: 1,
    tight: 1.25,
    snug: 1.375,
    normal: 1.5,
    relaxed: 1.625,
    loose: 2,
};
// Letter spacing
export const letterSpacing = {
    tighter: -0.8,
    tight: -0.4,
    normal: 0,
    wide: 0.4,
    wider: 0.8,
    widest: 1.6,
};
// Text styles
export const textStyle = {
    h1: {
        fontFamily: fontFamily.sans.bold,
        fontSize: fontSize['4xl'],
        lineHeight: lineHeight.tight,
        letterSpacing: letterSpacing.tight,
    },
    h2: {
        fontFamily: fontFamily.sans.bold,
        fontSize: fontSize['3xl'],
        lineHeight: lineHeight.tight,
        letterSpacing: letterSpacing.tight,
    },
    h3: {
        fontFamily: fontFamily.sans.bold,
        fontSize: fontSize['2xl'],
        lineHeight: lineHeight.snug,
        letterSpacing: letterSpacing.normal,
    },
    h4: {
        fontFamily: fontFamily.sans.semibold,
        fontSize: fontSize.xl,
        lineHeight: lineHeight.snug,
        letterSpacing: letterSpacing.normal,
    },
    h5: {
        fontFamily: fontFamily.sans.semibold,
        fontSize: fontSize.lg,
        lineHeight: lineHeight.normal,
        letterSpacing: letterSpacing.normal,
    },
    h6: {
        fontFamily: fontFamily.sans.semibold,
        fontSize: fontSize.base,
        lineHeight: lineHeight.normal,
        letterSpacing: letterSpacing.normal,
    },
    body1: {
        fontFamily: fontFamily.sans.regular,
        fontSize: fontSize.base,
        lineHeight: lineHeight.relaxed,
        letterSpacing: letterSpacing.normal,
    },
    body2: {
        fontFamily: fontFamily.sans.regular,
        fontSize: fontSize.sm,
        lineHeight: lineHeight.relaxed,
        letterSpacing: letterSpacing.normal,
    },
    subtitle1: {
        fontFamily: fontFamily.sans.medium,
        fontSize: fontSize.base,
        lineHeight: lineHeight.normal,
        letterSpacing: letterSpacing.wide,
    },
    subtitle2: {
        fontFamily: fontFamily.sans.medium,
        fontSize: fontSize.sm,
        lineHeight: lineHeight.normal,
        letterSpacing: letterSpacing.wide,
    },
    button: {
        fontFamily: fontFamily.sans.semibold,
        fontSize: fontSize.base,
        lineHeight: lineHeight.normal,
        letterSpacing: letterSpacing.wide,
    },
    caption: {
        fontFamily: fontFamily.sans.regular,
        fontSize: fontSize.xs,
        lineHeight: lineHeight.normal,
        letterSpacing: letterSpacing.normal,
    },
    overline: {
        fontFamily: fontFamily.sans.medium,
        fontSize: fontSize.xs,
        lineHeight: lineHeight.normal,
        letterSpacing: letterSpacing.widest,
    },
    code: {
        fontFamily: fontFamily.mono.regular,
        fontSize: fontSize.sm,
        lineHeight: lineHeight.normal,
    },
};
// Export the complete typography system
export const typography = {
    fontFamily,
    fontWeight,
    fontSize,
    lineHeight,
    letterSpacing,
    textStyle,
};