vcc-ui
Version:
A React library for building user interfaces at Volvo Cars
68 lines • 2.41 kB
JavaScript
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;
}