vcc-ui/dist/themes/getTypeScale.js

A React library for building user interfaces at Volvo Cars

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.FONT_WEIGHTS = void 0;
exports.getFontTypes = getFontTypes;
exports.getTypeScale = getTypeScale;
var _lineHeightToNumber = require("../utils/line-height-to-number");
var _sizeToRem = require("../utils/size-to-rem");
var _fonts = require("./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'
  } : {};
}
function getFontTypes(locale) {
  return {
    BROAD: 'Volvo Broad, Arial Black, sans-serif',
    NOVUM: (0, _fonts.isUnsupportedFontLocale)(locale) ? 'Arial, sans-serif' : 'Volvo Novum, Arial, sans-serif',
    SERIF: 'Volvo Serif, serif'
  };
}
const FONT_WEIGHTS = exports.FONT_WEIGHTS = {
  semiLight: 300,
  regular: 400,
  medium: 500,
  bold: 700
};
function getTypeScale(color, locale) {
  const loclFeatureSettings = getLoclFeatureSettings(locale);
  const fontTypes = getFontTypes(locale);
  return {
    /**
      Headings
    */
    peary: {
      standard: {
        element: 'h1',
        styles: {
          fontFamily: fontTypes.NOVUM,
          fontSize: (0, _sizeToRem.sizeToRem)(6),
          fontWeight: FONT_WEIGHTS.medium,
          lineHeight: (0, _lineHeightToNumber.lineHeightToNumber)(52, 6),
          ...loclFeatureSettings,
          fromM: {
            fontSize: (0, _sizeToRem.sizeToRem)(6.5),
            lineHeight: (0, _lineHeightToNumber.lineHeightToNumber)(56, 6.5)
          },
          fromL: {
            fontSize: (0, _sizeToRem.sizeToRem)(7),
            lineHeight: (0, _lineHeightToNumber.lineHeightToNumber)(60, 7)
          }
        }
      }
    },
    cook: {
      standard: {
        element: 'h2',
        styles: {
          fontFamily: fontTypes.NOVUM,
          fontSize: (0, _sizeToRem.sizeToRem)(4),
          fontWeight: FONT_WEIGHTS.medium,
          lineHeight: (0, _lineHeightToNumber.lineHeightToNumber)(36, 4),
          ...loclFeatureSettings,
          fromM: {
            fontSize: (0, _sizeToRem.sizeToRem)(4.5),
            lineHeight: (0, _lineHeightToNumber.lineHeightToNumber)(40, 4.5)
          },
          fromL: {
            fontSize: (0, _sizeToRem.sizeToRem)(5),
            lineHeight: (0, _lineHeightToNumber.lineHeightToNumber)(44, 5)
          }
        }
      }
    },
    ootah: {
      standard: {
        element: 'h3',
        styles: {
          fontFamily: fontTypes.NOVUM,
          fontSize: (0, _sizeToRem.sizeToRem)(3),
          fontWeight: FONT_WEIGHTS.semiLight,
          lineHeight: (0, _lineHeightToNumber.lineHeightToNumber)(28, 3),
          ...loclFeatureSettings,
          fromM: {
            fontSize: (0, _sizeToRem.sizeToRem)(3.5),
            lineHeight: (0, _lineHeightToNumber.lineHeightToNumber)(32, 3.5)
          },
          fromL: {
            fontSize: (0, _sizeToRem.sizeToRem)(4),
            lineHeight: (0, _lineHeightToNumber.lineHeightToNumber)(36, 4)
          }
        }
      },
      emphasis: {
        styles: {
          fontStyle: 'normal',
          fontWeight: FONT_WEIGHTS.medium
        }
      }
    },
    /**
      Sub-Headings
    */

    hillary: {
      standard: {
        element: 'p',
        styles: {
          fontFamily: fontTypes.NOVUM,
          fontSize: (0, _sizeToRem.sizeToRem)(2.5),
          fontWeight: FONT_WEIGHTS.semiLight,
          lineHeight: (0, _lineHeightToNumber.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: (0, _sizeToRem.sizeToRem)(2),
          lineHeight: (0, _lineHeightToNumber.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: (0, _sizeToRem.sizeToRem)(1.5),
          lineHeight: (0, _lineHeightToNumber.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: (0, _sizeToRem.sizeToRem)(2),
          lineHeight: (0, _lineHeightToNumber.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: (0, _sizeToRem.sizeToRem)(5),
          lineHeight: (0, _lineHeightToNumber.lineHeightToNumber)(40, 5),
          letterSpacing: '0.02em',
          fromM: {
            fontSize: (0, _sizeToRem.sizeToRem)(9),
            lineHeight: (0, _lineHeightToNumber.lineHeightToNumber)(72, 9)
          }
        }
      }
    },
    kelly: {
      standard: {
        element: 'p',
        styles: {
          fontFamily: fontTypes.NOVUM,
          fontWeight: FONT_WEIGHTS.semiLight,
          fontSize: (0, _sizeToRem.sizeToRem)(1.75),
          lineHeight: (0, _lineHeightToNumber.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: (0, _sizeToRem.sizeToRem)(1),
          lineHeight: (0, _lineHeightToNumber.lineHeightToNumber)(16, 1),
          ...loclFeatureSettings
        }
      }
    }
  };
}