import _defineProperty from "@babel/runtime/helpers/esm/defineProperty"; export function isUnitless(value) { return String(parseFloat(value)).length === String(value).length; } // Ported from Compass // https://github.com/Compass/compass/blob/master/core/stylesheets/compass/typography/_units.scss // Emulate the sass function "unit" export function getUnit(input) { return String(input).match(/[\d.\-+]*\s*(.*)/)[1] || ''; } // Emulate the sass function "unitless" export function toUnitless(length) { return parseFloat(length); } // Convert any CSS or value to any another. // From https://github.com/KyleAMathews/convert-css-length export function convertLength(baseFontSize) { return function (length, toUnit) { var fromUnit = getUnit(length); // Optimize for cases where `from` and `to` units are accidentally the same. if (fromUnit === toUnit) { return length; } // Convert input length to pixels. var pxLength = toUnitless(length); if (fromUnit !== 'px') { if (fromUnit === 'em') { pxLength = toUnitless(length) * toUnitless(baseFontSize); } else if (fromUnit === 'rem') { pxLength = toUnitless(length) * toUnitless(baseFontSize); } } // Convert length in pixels to the output unit var outputLength = pxLength; if (toUnit !== 'px') { if (toUnit === 'em') { outputLength = pxLength / toUnitless(baseFontSize); } else if (toUnit === 'rem') { outputLength = pxLength / toUnitless(baseFontSize); } else { return length; } } return parseFloat(outputLength.toFixed(5)) + toUnit; }; } export function alignProperty(_ref) { var size = _ref.size, grid = _ref.grid; var sizeBelow = size - size % grid; var sizeAbove = sizeBelow + grid; return size - sizeBelow < sizeAbove - size ? sizeBelow : sizeAbove; } // fontGrid finds a minimal grid (in rem) for the fontSize values so that the // lineHeight falls under a x pixels grid, 4px in the case of Material Design, // without changing the relative line height export function fontGrid(_ref2) { var lineHeight = _ref2.lineHeight, pixels = _ref2.pixels, htmlFontSize = _ref2.htmlFontSize; return pixels / (lineHeight * htmlFontSize); } /** * generate a responsive version of a given CSS property * @example * responsiveProperty({ * cssProperty: 'fontSize', * min: 15, * max: 20, * unit: 'px', * breakpoints: [300, 600], * }) * * // this returns * * { * fontSize: '15px', * '@media (min-width:300px)': { * fontSize: '17.5px', * }, * '@media (min-width:600px)': { * fontSize: '20px', * }, * } * @param {Object} params * @param {string} params.cssProperty - The CSS property to be made responsive * @param {number} params.min - The smallest value of the CSS property * @param {number} params.max - The largest value of the CSS property * @param {string} [params.unit] - The unit to be used for the CSS property * @param {Array.number} [params.breakpoints] - An array of breakpoints * @param {number} [params.alignStep] - Round scaled value to fall under this grid * @returns {Object} responsive styles for {params.cssProperty} */ export function responsiveProperty(_ref3) { var cssProperty = _ref3.cssProperty, min = _ref3.min, max = _ref3.max, _ref3$unit = _ref3.unit, unit = _ref3$unit === void 0 ? 'rem' : _ref3$unit, _ref3$breakpoints = _ref3.breakpoints, breakpoints = _ref3$breakpoints === void 0 ? [600, 900, 1200] : _ref3$breakpoints, _ref3$transform = _ref3.transform, transform = _ref3$transform === void 0 ? null : _ref3$transform; var output = _defineProperty({}, cssProperty, "".concat(min).concat(unit)); var factor = (max - min) / breakpoints[breakpoints.length - 1]; breakpoints.forEach(function (breakpoint) { var value = min + factor * breakpoint; if (transform !== null) { value = transform(value); } output["@media (min-width:".concat(breakpoint, "px)")] = _defineProperty({}, cssProperty, "".concat(Math.round(value * 10000) / 10000).concat(unit)); }); return output; }