@janiscommerce/ui-native
Version:
components library for Janis app
95 lines (94 loc) • 2.23 kB
JavaScript
import { moderateScale, scaledForDevice } from '../scale';
const scaleSize = (size) => scaledForDevice(size, moderateScale);
const typography = {
display: {
medium: {
fontSize: scaleSize(42),
fontWeight: '400',
lineHeight: 50,
},
},
heading: {
large: {
fontSize: scaleSize(34),
fontWeight: '500',
lineHeight: 40,
},
medium: {
fontSize: scaleSize(26),
fontWeight: '500',
lineHeight: 32,
},
small: {
fontSize: scaleSize(24),
fontWeight: '400',
lineHeight: 28,
},
},
title: {
large: {
fontSize: scaleSize(20),
fontWeight: '400',
lineHeight: 24,
},
medium: {
fontSize: scaleSize(18),
fontWeight: '700',
lineHeight: 22,
},
small: {
fontSize: scaleSize(14),
fontWeight: '700',
lineHeight: 16,
},
},
label: {
large: {
fontSize: scaleSize(16),
fontWeight: '500',
lineHeight: 18,
},
medium: {
fontSize: scaleSize(14),
fontWeight: '500',
lineHeight: 16,
},
small: {
fontSize: scaleSize(12),
fontWeight: '500',
lineHeight: 14,
},
},
body: {
large: {
fontSize: scaleSize(16),
fontWeight: '400',
lineHeight: 20,
},
medium: {
fontSize: scaleSize(14),
fontWeight: '400',
lineHeight: 18,
},
small: {
fontSize: scaleSize(12),
fontWeight: '400',
lineHeight: 16,
},
},
overline: {
large: {
fontSize: scaleSize(14),
fontWeight: '500',
lineHeight: 16,
letterSpacing: 1,
},
small: {
fontSize: scaleSize(12),
fontWeight: '500',
lineHeight: 14,
letterSpacing: 0.7,
},
},
};
export default typography;