vcc-ui
Version:
A React library for building user interfaces at Volvo Cars
289 lines (286 loc) • 7.13 kB
JavaScript
import { lineHeightToNumber } from '../utils/line-height-to-number';
import { sizeToRem } from '../utils/size-to-rem';
import { isUnsupportedFontLocale } from './fonts';
const UNSUPPORTED_LOCL_FEATURE_SETTINGS_LOCALES = ['bg-bg'];
function getLoclFeatureSettings(locale) {
return typeof locale === 'string' && UNSUPPORTED_LOCL_FEATURE_SETTINGS_LOCALES.includes(locale.toLowerCase()) ? {
fontFeatureSettings: '"locl" 0'
} : {};
}
export function getFontTypes(locale) {
return {
BROAD: 'Volvo Broad, Arial Black, sans-serif',
NOVUM: isUnsupportedFontLocale(locale) ? 'Arial, sans-serif' : 'Volvo Novum, Arial, sans-serif',
SERIF: 'Volvo Serif, serif'
};
}
export const FONT_WEIGHTS = {
semiLight: 300,
regular: 400,
medium: 500,
bold: 700
};
export function getTypeScale(color, locale) {
const loclFeatureSettings = getLoclFeatureSettings(locale);
const fontTypes = getFontTypes(locale);
return {
/**
Headings
*/
peary: {
standard: {
element: 'h1',
styles: {
fontFamily: fontTypes.NOVUM,
fontSize: sizeToRem(6),
fontWeight: FONT_WEIGHTS.medium,
lineHeight: lineHeightToNumber(52, 6),
...loclFeatureSettings,
fromM: {
fontSize: sizeToRem(6.5),
lineHeight: lineHeightToNumber(56, 6.5)
},
fromL: {
fontSize: sizeToRem(7),
lineHeight: lineHeightToNumber(60, 7)
}
}
}
},
cook: {
standard: {
element: 'h2',
styles: {
fontFamily: fontTypes.NOVUM,
fontSize: sizeToRem(4),
fontWeight: FONT_WEIGHTS.medium,
lineHeight: lineHeightToNumber(36, 4),
...loclFeatureSettings,
fromM: {
fontSize: sizeToRem(4.5),
lineHeight: lineHeightToNumber(40, 4.5)
},
fromL: {
fontSize: sizeToRem(5),
lineHeight: lineHeightToNumber(44, 5)
}
}
}
},
ootah: {
standard: {
element: 'h3',
styles: {
fontFamily: fontTypes.NOVUM,
fontSize: sizeToRem(3),
fontWeight: FONT_WEIGHTS.semiLight,
lineHeight: lineHeightToNumber(28, 3),
...loclFeatureSettings,
fromM: {
fontSize: sizeToRem(3.5),
lineHeight: lineHeightToNumber(32, 3.5)
},
fromL: {
fontSize: sizeToRem(4),
lineHeight: lineHeightToNumber(36, 4)
}
}
},
emphasis: {
styles: {
fontStyle: 'normal',
fontWeight: FONT_WEIGHTS.medium
}
}
},
/**
Sub-Headings
*/
hillary: {
standard: {
element: 'p',
styles: {
fontFamily: fontTypes.NOVUM,
fontSize: sizeToRem(2.5),
fontWeight: FONT_WEIGHTS.semiLight,
lineHeight: lineHeightToNumber(28, 2.5),
...loclFeatureSettings
}
},
'inline-link': {
element: 'a',
styles: {
color: color.foreground.secondary,
display: 'inline',
'[href]': {
textDecoration: 'underline'
},
'&:hover': {
color: color.foreground.primary,
textDecoration: 'none'
}
}
},
emphasis: {
element: 'em',
styles: {
fontStyle: 'normal',
fontWeight: FONT_WEIGHTS.medium
}
}
},
/**
Body
*/
columbus: {
standard: {
element: 'p',
styles: {
fontFamily: fontTypes.NOVUM,
fontSize: sizeToRem(2),
lineHeight: lineHeightToNumber(24, 2),
fontWeight: FONT_WEIGHTS.semiLight,
...loclFeatureSettings
}
},
'inline-link': {
element: 'a',
styles: {
color: color.foreground.secondary,
display: 'inline',
'[href]': {
textDecoration: 'underline'
},
'&:hover': {
color: color.foreground.primary,
textDecoration: 'none'
}
}
},
emphasis: {
element: 'em',
styles: {
fontStyle: 'normal',
fontWeight: FONT_WEIGHTS.medium
}
}
},
/**
Micro
*/
bates: {
standard: {
element: 'small',
styles: {
fontFamily: fontTypes.NOVUM,
fontSize: sizeToRem(1.5),
lineHeight: lineHeightToNumber(20, 1.5),
letterSpacing: '0.02em',
fontWeight: FONT_WEIGHTS.semiLight,
...loclFeatureSettings
}
},
'inline-link': {
element: 'a',
styles: {
color: color.foreground.secondary,
display: 'inline',
'[href]': {
textDecoration: 'underline'
},
'&:hover': {
color: color.foreground.primary,
textDecoration: 'none'
}
}
},
emphasis: {
element: 'em',
styles: {
fontStyle: 'normal',
fontWeight: FONT_WEIGHTS.medium
}
}
},
/**
ActionText
*/
amundsen: {
standard: {
element: 'span',
styles: {
fontFamily: fontTypes.NOVUM,
fontSize: sizeToRem(2),
lineHeight: lineHeightToNumber(24, 2),
letterSpacing: '0.04em',
fontWeight: FONT_WEIGHTS.medium,
...loclFeatureSettings
}
}
},
/**
Outliers
*/
yang: {
standard: {
element: 'p',
styles: {
fontWeight: FONT_WEIGHTS.regular,
fontFamily: fontTypes.BROAD,
fontSize: sizeToRem(5),
lineHeight: lineHeightToNumber(40, 5),
letterSpacing: '0.02em',
fromM: {
fontSize: sizeToRem(9),
lineHeight: lineHeightToNumber(72, 9)
}
}
}
},
kelly: {
standard: {
element: 'p',
styles: {
fontFamily: fontTypes.NOVUM,
fontWeight: FONT_WEIGHTS.semiLight,
fontSize: sizeToRem(1.75),
lineHeight: lineHeightToNumber(22, 1.75),
...loclFeatureSettings
}
},
emphasis: {
element: 'em',
styles: {
fontStyle: 'normal',
fontWeight: FONT_WEIGHTS.medium
}
},
'inline-link': {
element: 'a',
styles: {
color: color.foreground.secondary,
display: 'inline',
'[href]': {
textDecoration: 'underline'
},
'&:hover': {
color: color.foreground.primary,
textDecoration: 'none'
}
}
}
},
meir: {
standard: {
element: 'p',
styles: {
fontFamily: fontTypes.NOVUM,
fontWeight: FONT_WEIGHTS.semiLight,
fontSize: sizeToRem(1),
lineHeight: lineHeightToNumber(16, 1),
...loclFeatureSettings
}
}
}
};
}