134 lines
4.3 KiB
JavaScript
134 lines
4.3 KiB
JavaScript
"use strict";
|
|
|
|
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
|
|
Object.defineProperty(exports, "__esModule", {
|
|
value: true
|
|
});
|
|
exports.default = createTypography;
|
|
|
|
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
|
|
|
|
var _deepmerge = _interopRequireDefault(require("deepmerge"));
|
|
|
|
// < 1kb payload overhead when lodash/merge is > 3kb.
|
|
function round(value) {
|
|
return Math.round(value * 1e5) / 1e5;
|
|
}
|
|
|
|
function createTypography(palette, typography) {
|
|
var _ref = typeof typography === 'function' ? typography(palette) : typography,
|
|
_ref$fontFamily = _ref.fontFamily,
|
|
fontFamily = _ref$fontFamily === void 0 ? '"Roboto", "Helvetica", "Arial", sans-serif' : _ref$fontFamily,
|
|
_ref$fontSize = _ref.fontSize,
|
|
fontSize = _ref$fontSize === void 0 ? 14 : _ref$fontSize,
|
|
_ref$fontWeightLight = _ref.fontWeightLight,
|
|
fontWeightLight = _ref$fontWeightLight === void 0 ? 300 : _ref$fontWeightLight,
|
|
_ref$fontWeightRegula = _ref.fontWeightRegular,
|
|
fontWeightRegular = _ref$fontWeightRegula === void 0 ? 400 : _ref$fontWeightRegula,
|
|
_ref$fontWeightMedium = _ref.fontWeightMedium,
|
|
fontWeightMedium = _ref$fontWeightMedium === void 0 ? 500 : _ref$fontWeightMedium,
|
|
_ref$htmlFontSize = _ref.htmlFontSize,
|
|
htmlFontSize = _ref$htmlFontSize === void 0 ? 16 : _ref$htmlFontSize,
|
|
other = (0, _objectWithoutProperties2.default)(_ref, ["fontFamily", "fontSize", "fontWeightLight", "fontWeightRegular", "fontWeightMedium", "htmlFontSize"]);
|
|
|
|
var coef = fontSize / 14;
|
|
|
|
function pxToRem(value) {
|
|
return "".concat(value / htmlFontSize * coef, "rem");
|
|
}
|
|
|
|
return (0, _deepmerge.default)({
|
|
pxToRem: pxToRem,
|
|
round: round,
|
|
fontFamily: fontFamily,
|
|
fontSize: fontSize,
|
|
fontWeightLight: fontWeightLight,
|
|
fontWeightRegular: fontWeightRegular,
|
|
fontWeightMedium: fontWeightMedium,
|
|
display4: {
|
|
fontSize: pxToRem(112),
|
|
fontWeight: fontWeightLight,
|
|
fontFamily: fontFamily,
|
|
letterSpacing: '-.04em',
|
|
lineHeight: "".concat(round(128 / 112), "em"),
|
|
marginLeft: '-.04em',
|
|
color: palette.text.secondary
|
|
},
|
|
display3: {
|
|
fontSize: pxToRem(56),
|
|
fontWeight: fontWeightRegular,
|
|
fontFamily: fontFamily,
|
|
letterSpacing: '-.02em',
|
|
lineHeight: "".concat(round(73 / 56), "em"),
|
|
marginLeft: '-.02em',
|
|
color: palette.text.secondary
|
|
},
|
|
display2: {
|
|
fontSize: pxToRem(45),
|
|
fontWeight: fontWeightRegular,
|
|
fontFamily: fontFamily,
|
|
lineHeight: "".concat(round(48 / 45), "em"),
|
|
marginLeft: '-.02em',
|
|
color: palette.text.secondary
|
|
},
|
|
display1: {
|
|
fontSize: pxToRem(34),
|
|
fontWeight: fontWeightRegular,
|
|
fontFamily: fontFamily,
|
|
lineHeight: "".concat(round(41 / 34), "em"),
|
|
color: palette.text.secondary
|
|
},
|
|
headline: {
|
|
fontSize: pxToRem(24),
|
|
fontWeight: fontWeightRegular,
|
|
fontFamily: fontFamily,
|
|
lineHeight: "".concat(round(32.5 / 24), "em"),
|
|
color: palette.text.primary
|
|
},
|
|
title: {
|
|
fontSize: pxToRem(21),
|
|
fontWeight: fontWeightMedium,
|
|
fontFamily: fontFamily,
|
|
lineHeight: "".concat(round(24.5 / 21), "em"),
|
|
color: palette.text.primary
|
|
},
|
|
subheading: {
|
|
fontSize: pxToRem(16),
|
|
fontWeight: fontWeightRegular,
|
|
fontFamily: fontFamily,
|
|
lineHeight: "".concat(round(24 / 16), "em"),
|
|
color: palette.text.primary
|
|
},
|
|
body2: {
|
|
fontSize: pxToRem(14),
|
|
fontWeight: fontWeightMedium,
|
|
fontFamily: fontFamily,
|
|
lineHeight: "".concat(round(24 / 14), "em"),
|
|
color: palette.text.primary
|
|
},
|
|
body1: {
|
|
fontSize: pxToRem(14),
|
|
fontWeight: fontWeightRegular,
|
|
fontFamily: fontFamily,
|
|
lineHeight: "".concat(round(20.5 / 14), "em"),
|
|
color: palette.text.primary
|
|
},
|
|
caption: {
|
|
fontSize: pxToRem(12),
|
|
fontWeight: fontWeightRegular,
|
|
fontFamily: fontFamily,
|
|
lineHeight: "".concat(round(16.5 / 12), "em"),
|
|
color: palette.text.secondary
|
|
},
|
|
button: {
|
|
fontSize: pxToRem(14),
|
|
textTransform: 'uppercase',
|
|
fontWeight: fontWeightMedium,
|
|
fontFamily: fontFamily
|
|
}
|
|
}, other, {
|
|
clone: false // No need to clone deep
|
|
|
|
});
|
|
} |