@greensight/gds/emotion/cjs/typography.js

Greensight Design System

var _rollupPluginBabelHelpers = require('./_rollupPluginBabelHelpers-mkWCC7yp.js');
var fastEquals = require('./fastEquals.js');
var baseTheme = require('./baseTheme.js');
require('./cjs-D_V_gH93.js');
require('./scale-D3jiQp7F.js');
require('react');

var _excluded = ["fontSize"],
  _excluded2 = ["fontSize"];
var cache = new Map();

/**
 * Helper for typography styles usage. Generate typography CSS rules by style name included mobile version, fluid typography and variable fonts support.
 *
 * By default helper uses GDS base theme. Recommended way to use this helper with your own theme is define wrapper with your theme as second argument:
 *
 * ```
 * import { typography as typographyHelper } from '@greensight/gds';
 * import theme from '@scripts/theme';
 *
 * const typography = (name: string) => typographyHelper(name, theme);
 *
 * export default typography;
 * ```
 */
var typography = function typography(name) {
  var _theme$global, _globalFontsTheme$fam, _globalFontsTheme$fam2;
  var theme = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : baseTheme.baseTheme;
  if (!name) {
    console.warn('"name" argument is not defined.');
    return;
  }
  if (!theme.typography || !theme.typography.styles[name]) {
    console.warn("Typography style ".concat(name, " is not defined."));
    return;
  }
  var cached = cache.get(name);
  if (cached && fastEquals.fastEquals(cached.theme, theme)) {
    return cached === null || cached === void 0 ? void 0 : cached.css;
  }
  var typographyStyle = theme.typography.styles[name];
  var fontName = typographyStyle.desktop.fontFamily;
  var globalFontsTheme = (_theme$global = theme.global) === null || _theme$global === void 0 ? void 0 : _theme$global.fonts;
  var stack = (globalFontsTheme === null || globalFontsTheme === void 0 || (_globalFontsTheme$fam = globalFontsTheme.families) === null || _globalFontsTheme$fam === void 0 || (_globalFontsTheme$fam = _globalFontsTheme$fam[fontName]) === null || _globalFontsTheme$fam === void 0 ? void 0 : _globalFontsTheme$fam.stack) || 'sans-serif';
  var fontFamilyStyles = {
    fontFamily: "\"".concat(fontName, "\", ").concat(stack)
  };
  var isVf = globalFontsTheme === null || globalFontsTheme === void 0 || (_globalFontsTheme$fam2 = globalFontsTheme.families) === null || _globalFontsTheme$fam2 === void 0 || (_globalFontsTheme$fam2 = _globalFontsTheme$fam2[fontName]) === null || _globalFontsTheme$fam2 === void 0 ? void 0 : _globalFontsTheme$fam2.vf;
  if (isVf) {
    fontFamilyStyles = _rollupPluginBabelHelpers._objectSpread2(_rollupPluginBabelHelpers._objectSpread2({}, fontFamilyStyles), {}, {
      '@supports (font-variation-settings: normal)': {
        fontFamily: "\"".concat(fontName, " VF\", ").concat(stack)
      }
    });
  }
  var desktopStyles = removeFontFamily(typographyStyle.desktop);
  var mqMobileStyles = {};
  var fluidStyles = {};
  var mainStyles = desktopStyles;
  var _theme$typography$bre = _rollupPluginBabelHelpers._slicedToArray(theme.typography.breakpoints, 2),
    maxVw = _theme$typography$bre[0],
    minVw = _theme$typography$bre[1];
  var mq = [maxVw, minVw].map(function (bp) {
    return "@media (max-width: ".concat(bp, "px)");
  });
  if (typographyStyle.mobile) {
    var mobileStyles = removeFontFamily(typographyStyle.mobile);
    var maxFs = desktopStyles.fontSize,
      desktopStylesWithoutFs = _rollupPluginBabelHelpers._objectWithoutProperties(desktopStyles, _excluded);
    var minFs = mobileStyles.fontSize,
      mobileStylesWithoutFs = _rollupPluginBabelHelpers._objectWithoutProperties(mobileStyles, _excluded2);
    var mobileStyleEntries = Object.entries(mobileStylesWithoutFs);
    var uniqueMobileStyles = Object.fromEntries(mobileStyleEntries.filter(function (_ref) {
      var _ref2 = _rollupPluginBabelHelpers._slicedToArray(_ref, 1),
        name = _ref2[0];
      return !desktopStylesWithoutFs[name] || desktopStylesWithoutFs[name] !== mobileStylesWithoutFs[name];
    }));
    mainStyles = desktopStylesWithoutFs;
    mqMobileStyles = uniqueMobileStyles;
    var isFluid = true;
    var fluidSettings = globalFontsTheme === null || globalFontsTheme === void 0 ? void 0 : globalFontsTheme.fluid;
    if (fluidSettings !== undefined) {
      isFluid = Array.isArray(fluidSettings) ? !fluidSettings.includes(name) : fluidSettings;
    }
    if (isFluid) {
      fluidStyles = _rollupPluginBabelHelpers._defineProperty({
        fontSize: maxFs
      }, mq[0], {
        fontSize: "calc(".concat(minFs, " + ((100vw - ").concat(pxToRem(minVw), "rem) / (").concat(pxToRem(maxVw), " - ").concat(pxToRem(minVw), ")) * (").concat(parseFloat(maxFs), " - ").concat(parseFloat(minFs), "))")
      });
    } else {
      fluidStyles = {
        fontSize: maxFs
      };
    }
    mqMobileStyles = _rollupPluginBabelHelpers._objectSpread2(_rollupPluginBabelHelpers._objectSpread2({}, mqMobileStyles), {}, {
      fontSize: minFs
    });
  }
  var result = _rollupPluginBabelHelpers._objectSpread2(_rollupPluginBabelHelpers._objectSpread2(_rollupPluginBabelHelpers._objectSpread2(_rollupPluginBabelHelpers._objectSpread2({}, fontFamilyStyles), mainStyles), fluidStyles), {}, _rollupPluginBabelHelpers._defineProperty({}, mq[1], mqMobileStyles));
  cache.set(name, {
    css: result,
    theme: theme
  });
  return result;
};
var pxToRem = function pxToRem(px) {
  return px / 16;
};
var removeFontFamily = function removeFontFamily(styles) {
  var entries = Object.entries(styles);
  var filteredEntries = entries.filter(function (_ref3) {
    var _ref4 = _rollupPluginBabelHelpers._slicedToArray(_ref3, 1),
      name = _ref4[0];
    return name !== 'fontFamily';
  });
  var filteredStyles = Object.fromEntries(filteredEntries);
  return filteredStyles;
};

exports.typography = typography;