UNPKG

vcc-ui

Version:

A React library for building user interfaces at Volvo Cars

68 lines 2.41 kB
import darkTokens from '@volvo-cars/ui-design-tokens/build/web/volvo-dark/tokens.json'; import lightTokens from '@volvo-cars/ui-design-tokens/build/web/volvo/tokens.json'; import { buildTypeScale } from './buildTypeScale'; import { fonts, isUnsupportedFontLocale } from './fonts'; import { breakpoints } from './getBreakpoints'; import { getTokens } from './getTokens'; import { getFontTypes, getTypeScale } from './getTypeScale'; function isRtlLocale(locale) { return typeof locale === 'string' && (locale.startsWith('ar') || locale.startsWith('he')); } const DOT_COM = 'https://www.volvocars.com'; const DOT_COM_CN = 'https://www.volvocars.com.cn'; function getDomainName(locale) { if (!locale) return DOT_COM; if (locale.toLowerCase() === 'zh-cn') return DOT_COM_CN; return DOT_COM; } /** @deprecated */ export function getTheme() { let { variant = 'light', locale, direction = isRtlLocale(locale) ? 'rtl' : 'ltr' } = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {}; const designTokens = variant === 'light' ? lightTokens : darkTokens; const tokens = getTokens(designTokens.color, variant); const typeScale = getTypeScale(designTokens.color, locale); const name = variant === 'light' ? 'volvo' : 'volvo-dark'; const domainName = getDomainName(locale); const iconsPath = `${domainName}/static/shared/icons/v2/`; const theme = { name, direction, baselineGrid: 8, baselineSubGrid: 4, breakpoints, tokens, fonts: isUnsupportedFontLocale(locale) ? [] : fonts, fontsPath: `${domainName}/static/shared/fonts/`, fontTypes: getFontTypes(locale), logoImagesPath: `${domainName}/static/shared/images/`, iconsPath, typeScale: buildTypeScale(typeScale), states: { focus: { outlineOffset: 2, outlineWidth: 2, outlineColor: designTokens.color.foreground.primary, outlineStyle: 'solid' } }, // New Design Tokens ...designTokens }; theme.getIcon = function (type) { let color = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'primary'; if (!type) { return ''; } if (type === 'thirdparty-twitter-24') { type = 'thirdparty-x-24'; } const isRTL = direction === 'rtl'; const path = `${iconsPath}${type}${isRTL ? '-rtl' : ''}`; return `${path}.svg#${variant}-${color}`; }; return theme; }