Files F121915377

responsiveFontSizes.js
No OneTemporary
Actions

Subscribers

None

File Metadata

Created: Mon, Jul 14, 19:43

responsiveFontSizes.js
View Options

	import _extends from "@babel/runtime/helpers/esm/extends";
	import { formatMuiErrorMessage as _formatMuiErrorMessage } from "@mui/utils";
	import { isUnitless, convertLength, responsiveProperty, alignProperty, fontGrid } from './cssUtils';
	export default function responsiveFontSizes(themeInput, options = {}) {
	const {
	breakpoints = ['sm', 'md', 'lg'],
	disableAlign = false,
	factor = 2,
	variants = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'subtitle1', 'subtitle2', 'body1', 'body2', 'caption', 'button', 'overline']
	} = options;
	const theme = _extends({}, themeInput);
	theme.typography = _extends({}, theme.typography);
	const typography = theme.typography;

	// Convert between CSS lengths e.g. em->px or px->rem
	// Set the baseFontSize for your project. Defaults to 16px (also the browser default).
	const convert = convertLength(typography.htmlFontSize);
	const breakpointValues = breakpoints.map(x => theme.breakpoints.values[x]);
	variants.forEach(variant => {
	const style = typography[variant];
	const remFontSize = parseFloat(convert(style.fontSize, 'rem'));
	if (remFontSize <= 1) {
	return;
	}
	const maxFontSize = remFontSize;
	const minFontSize = 1 + (maxFontSize - 1) / factor;
	let {
	lineHeight
	} = style;
	if (!isUnitless(lineHeight) && !disableAlign) {
	throw new Error(process.env.NODE_ENV !== "production" ? `MUI: Unsupported non-unitless line height with grid alignment.
	Use unitless line heights instead.` : _formatMuiErrorMessage(6));
	}
	if (!isUnitless(lineHeight)) {
	// make it unitless
	lineHeight = parseFloat(convert(lineHeight, 'rem')) / parseFloat(remFontSize);
	}
	let transform = null;
	if (!disableAlign) {
	transform = value => alignProperty({
	size: value,
	grid: fontGrid({
	pixels: 4,
	lineHeight,
	htmlFontSize: typography.htmlFontSize
	})
	});
	}
	typography[variant] = _extends({}, style, responsiveProperty({
	cssProperty: 'fontSize',
	min: minFontSize,
	max: maxFontSize,
	unit: 'rem',
	breakpoints: breakpointValues,
	transform
	}));
	});
	return theme;
	}

Event Timeline