vcc-ui/dist/esm/themes/getTheme.js

A React library for building user interfaces at Volvo Cars

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;
}