modularScale.js 2.1 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788
  1. "use strict";
  2. exports.__esModule = true;
  3. exports["default"] = modularScale;
  4. exports.ratioNames = void 0;
  5. var _getValueAndUnit = /*#__PURE__*/_interopRequireDefault( /*#__PURE__*/require("./getValueAndUnit"));
  6. var _errors = /*#__PURE__*/_interopRequireDefault( /*#__PURE__*/require("../internalHelpers/_errors"));
  7. function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
  8. var ratioNames = {
  9. minorSecond: 1.067,
  10. majorSecond: 1.125,
  11. minorThird: 1.2,
  12. majorThird: 1.25,
  13. perfectFourth: 1.333,
  14. augFourth: 1.414,
  15. perfectFifth: 1.5,
  16. minorSixth: 1.6,
  17. goldenSection: 1.618,
  18. majorSixth: 1.667,
  19. minorSeventh: 1.778,
  20. majorSeventh: 1.875,
  21. octave: 2,
  22. majorTenth: 2.5,
  23. majorEleventh: 2.667,
  24. majorTwelfth: 3,
  25. doubleOctave: 4
  26. };
  27. exports.ratioNames = ratioNames;
  28. function getRatio(ratioName) {
  29. return ratioNames[ratioName];
  30. }
  31. /**
  32. * Establish consistent measurements and spacial relationships throughout your projects by incrementing an em or rem value up or down a defined scale. We provide a list of commonly used scales as pre-defined variables.
  33. * @example
  34. * // Styles as object usage
  35. * const styles = {
  36. * // Increment two steps up the default scale
  37. * 'fontSize': modularScale(2)
  38. * }
  39. *
  40. * // styled-components usage
  41. * const div = styled.div`
  42. * // Increment two steps up the default scale
  43. * fontSize: ${modularScale(2)}
  44. * `
  45. *
  46. * // CSS in JS Output
  47. *
  48. * element {
  49. * 'fontSize': '1.77689em'
  50. * }
  51. */
  52. function modularScale(steps, base, ratio) {
  53. if (base === void 0) {
  54. base = '1em';
  55. }
  56. if (ratio === void 0) {
  57. ratio = 1.333;
  58. }
  59. if (typeof steps !== 'number') {
  60. throw new _errors["default"](42);
  61. }
  62. if (typeof ratio === 'string' && !ratioNames[ratio]) {
  63. throw new _errors["default"](43);
  64. }
  65. var _ref = typeof base === 'string' ? (0, _getValueAndUnit["default"])(base) : [base, ''],
  66. realBase = _ref[0],
  67. unit = _ref[1];
  68. var realRatio = typeof ratio === 'string' ? getRatio(ratio) : ratio;
  69. if (typeof realBase === 'string') {
  70. throw new _errors["default"](44, base);
  71. }
  72. return "" + realBase * Math.pow(realRatio, steps) + (unit || '');
  73. }