vcc-ui/dist/themes/getTheme.js

A React library for building user interfaces at Volvo Cars

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.getTheme = getTheme;
var _tokens = _interopRequireDefault(require("@volvo-cars/ui-design-tokens/build/web/volvo-dark/tokens.json"));
var _tokens2 = _interopRequireDefault(require("@volvo-cars/ui-design-tokens/build/web/volvo/tokens.json"));
var _buildTypeScale = require("./buildTypeScale");
var _fonts = require("./fonts");
var _getBreakpoints = require("./getBreakpoints");
var _getTokens = require("./getTokens");
var _getTypeScale = require("./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 */
function getTheme() {
  let {
    variant = 'light',
    locale,
    direction = isRtlLocale(locale) ? 'rtl' : 'ltr'
  } = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
  const designTokens = variant === 'light' ? _tokens2.default : _tokens.default;
  const tokens = (0, _getTokens.getTokens)(designTokens.color, variant);
  const typeScale = (0, _getTypeScale.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: _getBreakpoints.breakpoints,
    tokens,
    fonts: (0, _fonts.isUnsupportedFontLocale)(locale) ? [] : _fonts.fonts,
    fontsPath: `${domainName}/static/shared/fonts/`,
    fontTypes: (0, _getTypeScale.getFontTypes)(locale),
    logoImagesPath: `${domainName}/static/shared/images/`,
    iconsPath,
    typeScale: (0, _buildTypeScale.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;
}