@helpscout/hsds-react/styles/utilities/variableFontSize.js

React component library for Help Scout's Design System

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

exports.__esModule = true;
exports.default = exports.defaultProps = exports.BASE_FONT_SIZE = exports.GLOBAL_FONT_SIZE_NAMESPACE = void 0;

var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));

var _constants = require("../configs/constants");

var GLOBAL_FONT_SIZE_NAMESPACE = '--HSDSGlobalFontSize';
exports.GLOBAL_FONT_SIZE_NAMESPACE = GLOBAL_FONT_SIZE_NAMESPACE;
var BASE_FONT_SIZE = _constants.FONT_SIZE;
exports.BASE_FONT_SIZE = BASE_FONT_SIZE;
var defaultProps = {
  baseFontSize: BASE_FONT_SIZE,
  fontSize: BASE_FONT_SIZE
};
/**
 * Generates the CSS style rules for dynamic font-size based on the global
 * font-size. This function uses CSS variables + calc to determine the correct
 * font-size, with a fallback for a px font-size for browsers that don't
 * support CSS variables (IE).
 *
 * @param   {Object} props The properties.
 * @param   {string} props.varName The CSS variable namespace.
 * @param   {number} props.baseFontSize The base font size (13).
 * @param   {number} props.fontSize The desired font size.
 * @returns {string} The compiled CSS styles rules.
 */

exports.defaultProps = defaultProps;

var variableFontSize = function variableFontSize(props) {
  if (props === void 0) {
    props = defaultProps;
  }

  var _defaultProps$props = (0, _extends2.default)({}, defaultProps, props),
      varName = _defaultProps$props.varName,
      baseFontSize = _defaultProps$props.baseFontSize,
      fontSize = _defaultProps$props.fontSize;

  var variableNameSpace = "--" + varName + "-" + fontSize.toString();
  var dynamicProp = "calc(\n    " + fontSize + " / " + baseFontSize + " *\n    var(" + GLOBAL_FONT_SIZE_NAMESPACE + ", " + baseFontSize + "px)\n  )";

  if (varName) {
    return "\n      " + variableNameSpace + ": " + dynamicProp + ";\n      font-size: " + fontSize + "px;\n      font-size: var(" + variableNameSpace + ", " + fontSize + "px);\n    ";
  } else {
    return "\n      font-size: " + fontSize + "px;\n      font-size: " + dynamicProp + ";\n    ";
  }
};

var _default = variableFontSize;
exports.default = _default;