@guardian/src-foundations - npm Package Compare versions

Comparing version 0.16.0-alpha.2 to 0.16.0-alpha.3

package.json

 {
 	"name": "@guardian/src-foundations",
-	"version": "0.16.0-alpha.2",
+	"version": "0.16.0-alpha.3",
 	"main": "foundations.js",
@@ -5,0 +5,0 @@ "module": "foundations.esm.js",

src/typography/api.ts

@@ -19,2 +19,3 @@ import {
 	italic: false,
+	unit: "rem",
 }
@@ -39,2 +40,3 @@ const titlepieceFs = fs.bind(null, "titlepiece")
 	italic: false,
+	unit: "rem",
 }
@@ -68,2 +70,3 @@ const headlineFs = fs.bind(null, "headline")
 	italic: false,
+	unit: "rem",
 }
@@ -87,2 +90,3 @@ const bodyFs = fs.bind(null, "body")
 	italic: false,
+	unit: "rem",
 }
@@ -89,0 +93,0 @@ const textSansFs = fs.bind(null, "textSans")

src/typography/data.ts

 import { fontSizes, fonts, lineHeights, fontWeights } from "../theme"
 
+export type ScaleUnit = "rem" | "px"
 export type Category = "titlepiece" | "headline" | "body" | "textSans"
@@ -25,3 +26,3 @@ export type LineHeight = "tight" | "regular" | "loose"
 	fontFamily: string
-	fontSize: string
+	fontSize: string | number
 	lineHeight: number
@@ -39,2 +40,3 @@ fontWeight?: number
 		italic,
+		unit,
 	}: {
@@ -44,2 +46,3 @@ lineHeight: LineHeight
 		italic: boolean
+		unit: ScaleUnit
 	},
@@ -52,36 +55,35 @@ ) => TypographyStyles
 	italic?: boolean
+	unit?: ScaleUnit
 }
 
-export const fontSizesRem = fontSizes.map(fontSize => fontSize / 16)
-
-export const titlepieceSizes: { [key in TitlepieceSizes]: number } = {
-	small: fontSizesRem[7], //42px
-	medium: fontSizesRem[8], //50px
-	large: fontSizesRem[9], //70px
+const titlepieceSizes: { [key in TitlepieceSizes]: number } = {
+	small: fontSizes[7], //42px
+	medium: fontSizes[8], //50px
+	large: fontSizes[9], //70px
 }
 
-export const headlineSizes: { [key in HeadlineSizes]: number } = {
-	xxxsmall: fontSizesRem[2], //17px
-	xxsmall: fontSizesRem[3], //20px
-	xsmall: fontSizesRem[4], //24px
-	small: fontSizesRem[5], //28px
-	medium: fontSizesRem[6], //34px
-	large: fontSizesRem[7], //42px
-	xlarge: fontSizesRem[8], //50px
+const headlineSizes: { [key in HeadlineSizes]: number } = {
+	xxxsmall: fontSizes[2], //17px
+	xxsmall: fontSizes[3], //20px
+	xsmall: fontSizes[4], //24px
+	small: fontSizes[5], //28px
+	medium: fontSizes[6], //34px
+	large: fontSizes[7], //42px
+	xlarge: fontSizes[8], //50px
 }
 
-export const bodySizes: { [key in BodySizes]: number } = {
-	small: fontSizesRem[1], //15px
-	medium: fontSizesRem[2], //17px
+const bodySizes: { [key in BodySizes]: number } = {
+	small: fontSizes[1], //15px
+	medium: fontSizes[2], //17px
 }
 
-export const textSansSizes: { [key in TextSansSizes]: number } = {
-	xsmall: fontSizesRem[0], //12px
-	small: fontSizesRem[1], //15px
-	medium: fontSizesRem[2], //17px
-	large: fontSizesRem[3], //20px
-	xlarge: fontSizesRem[4], //24px
+const textSansSizes: { [key in TextSansSizes]: number } = {
+	xsmall: fontSizes[0], //12px
+	small: fontSizes[1], //15px
+	medium: fontSizes[2], //17px
+	large: fontSizes[3], //20px
+	xlarge: fontSizes[4], //24px
 }
 
-export const fontSizeMapping: {
+const fontSizeMapping: {
 	[cat in Category]: { [level in string]: number }
@@ -95,3 +97,43 @@ } = {
 
-export const fontMapping: { [cat in Category]: string } = {
+const remFontSizes = fontSizes.map(fontSize => fontSize / 16)
+
+const remTitlepieceSizes: { [key in TitlepieceSizes]: number } = {
+	small: remFontSizes[7], //42px
+	medium: remFontSizes[8], //50px
+	large: remFontSizes[9], //70px
+}
+
+const remHeadlineSizes: { [key in HeadlineSizes]: number } = {
+	xxxsmall: remFontSizes[2], //17px
+	xxsmall: remFontSizes[3], //20px
+	xsmall: remFontSizes[4], //24px
+	small: remFontSizes[5], //28px
+	medium: remFontSizes[6], //34px
+	large: remFontSizes[7], //42px
+	xlarge: remFontSizes[8], //50px
+}
+
+const remBodySizes: { [key in BodySizes]: number } = {
+	small: remFontSizes[1], //15px
+	medium: remFontSizes[2], //17px
+}
+
+const remTextSansSizes: { [key in TextSansSizes]: number } = {
+	xsmall: remFontSizes[0], //12px
+	small: remFontSizes[1], //15px
+	medium: remFontSizes[2], //17px
+	large: remFontSizes[3], //20px
+	xlarge: remFontSizes[4], //24px
+}
+
+const remFontSizeMapping: {
+	[cat in Category]: { [level in string]: number }
+} = {
+	titlepiece: remTitlepieceSizes,
+	headline: remHeadlineSizes,
+	body: remBodySizes,
+	textSans: remTextSansSizes,
+}
+
+const fontMapping: { [cat in Category]: string } = {
 	titlepiece: fonts.titlepiece,
@@ -103,3 +145,3 @@ headline: fonts.headlineSerif,
 
-export const lineHeightMapping: { [lineHight in LineHeight]: number } = {
+const lineHeightMapping: { [lineHight in LineHeight]: number } = {
 	tight: lineHeights[0],
@@ -110,3 +152,3 @@ regular: lineHeights[1],
 
-export const fontWeightMapping: { [fontWeight in FontWeight]: number } = {
+const fontWeightMapping: { [fontWeight in FontWeight]: number } = {
 	light: fontWeights[0],
@@ -118,3 +160,3 @@ regular: fontWeights[1],
 
-export const availableFonts: {
+const availableFonts: {
 	[cat in Category]: {
@@ -157,1 +199,33 @@ [fontWeight in FontWeight]?: FontWeightDefinition
 }
+
+Object.freeze(titlepieceSizes)
+Object.freeze(headlineSizes)
+Object.freeze(bodySizes)
+Object.freeze(textSansSizes)
+Object.freeze(remTitlepieceSizes)
+Object.freeze(remHeadlineSizes)
+Object.freeze(remBodySizes)
+Object.freeze(remTextSansSizes)
+Object.freeze(fontMapping)
+Object.freeze(fontSizeMapping)
+Object.freeze(fontWeightMapping)
+Object.freeze(lineHeightMapping)
+Object.freeze(availableFonts)
+
+export {
+	titlepieceSizes,
+	headlineSizes,
+	bodySizes,
+	textSansSizes,
+	remFontSizes,
+	remTitlepieceSizes,
+	remHeadlineSizes,
+	remBodySizes,
+	remTextSansSizes,
+	remFontSizeMapping,
+	fontMapping,
+	fontSizeMapping,
+	lineHeightMapping,
+	fontWeightMapping,
+	availableFonts,
+}

src/typography/fs.ts

@@ -10,6 +10,16 @@ import {
 
-export const fs: Fs = (category, level, { lineHeight, fontWeight, italic }) => {
+export const fs: Fs = (
+	category,
+	level,
+	{ lineHeight, fontWeight, italic, unit },
+) => {
 	const fontFamilyValue = fontMapping[category]
-	const fontSizeValue = fontSizeMapping[category][level]
-	const lineHeightValue = lineHeightMapping[lineHeight]
+	const fontSizeValue =
+		unit === "px"
+			? fontSizeMapping[category][level]
+			: `${fontSizeMapping[category][level] / 16}rem`
+	const lineHeightValue =
+		unit === "px"
+			? lineHeightMapping[lineHeight] * fontSizeMapping[category][level]
+			: lineHeightMapping[lineHeight]
 	// TODO: consider logging an error in development if a requested
@@ -25,3 +35,3 @@ // font is unavailable
 			fontFamily: fontFamilyValue,
-			fontSize: `${fontSizeValue}rem`,
+			fontSize: fontSizeValue,
 			lineHeight: lineHeightValue,
@@ -28,0 +38,0 @@ },

src/typography/index.ts

@@ -13,12 +13,9 @@ import {
 	textSansSizes,
+	remTitlepieceSizes,
+	remHeadlineSizes,
+	remBodySizes,
+	remTextSansSizes,
 	fontMapping,
 	fontWeightMapping,
 	lineHeightMapping,
-	Category,
-	LineHeight,
-	FontWeight,
-	TitlepieceSizes,
-	HeadlineSizes,
-	BodySizes,
-	TextSansSizes,
 	FontScaleArgs,
@@ -31,3 +28,4 @@ } from "./data"
 			key,
-			(options?: FontScaleArgs) => objectStylesToString(func(options)),
+			(options: FontScaleArgs = {}) =>
+				objectStylesToString(func(options), options.unit),
 		]
@@ -40,3 +38,4 @@ }),
 			key,
-			(options?: FontScaleArgs) => objectStylesToString(func(options)),
+			(options: FontScaleArgs = {}) =>
+				objectStylesToString(func(options), options.unit),
 		]
@@ -49,3 +48,4 @@ }),
 			key,
-			(options?: FontScaleArgs) => objectStylesToString(func(options)),
+			(options: FontScaleArgs = {}) =>
+				objectStylesToString(func(options), options.unit),
 		]
@@ -58,3 +58,4 @@ }),
 			key,
-			(options?: FontScaleArgs) => objectStylesToString(func(options)),
+			(options: FontScaleArgs = {}) =>
+				objectStylesToString(func(options), options.unit),
 		]
@@ -64,10 +65,2 @@ }),
 
-Object.freeze(titlepieceSizes)
-Object.freeze(headlineSizes)
-Object.freeze(bodySizes)
-Object.freeze(textSansSizes)
-Object.freeze(fontMapping)
-Object.freeze(fontWeightMapping)
-Object.freeze(lineHeightMapping)
-
 export {
@@ -82,2 +75,6 @@ titlepiece,
 	textSansSizes,
+	remTitlepieceSizes,
+	remHeadlineSizes,
+	remBodySizes,
+	remTextSansSizes,
 	fontMapping as fonts,
@@ -84,0 +81,0 @@ fontWeightMapping as fontWeights,

src/typography/obj/index.ts

@@ -7,23 +7,11 @@ import { titlepiece, headline, body, textSans } from "../api"
 	textSansSizes,
+	remTitlepieceSizes,
+	remHeadlineSizes,
+	remBodySizes,
+	remTextSansSizes,
 	fontMapping,
 	fontWeightMapping,
 	lineHeightMapping,
-	TypographyStyles,
-	Category,
-	LineHeight,
-	FontWeight,
-	TitlepieceSizes,
-	HeadlineSizes,
-	BodySizes,
-	TextSansSizes,
 } from "../data"
 
-Object.freeze(titlepieceSizes)
-Object.freeze(headlineSizes)
-Object.freeze(bodySizes)
-Object.freeze(textSansSizes)
-Object.freeze(fontMapping)
-Object.freeze(fontWeightMapping)
-Object.freeze(lineHeightMapping)
-
 export {
@@ -38,2 +26,6 @@ titlepiece,
 	textSansSizes,
+	remTitlepieceSizes,
+	remHeadlineSizes,
+	remBodySizes,
+	remTextSansSizes,
 	fontMapping as fonts,
@@ -40,0 +32,0 @@ fontWeightMapping as fontWeights,

src/typography/obj/typography.obj.test.ts

@@ -5,2 +5,3 @@ import {
 	headlineSizes,
+	remHeadlineSizes,
 	fontWeights,
@@ -19,5 +20,11 @@ lineHeights,
 
-	expect(mediumHeadlineStyles.fontSize).toBe(`${headlineSizes.medium}rem`)
+	expect(mediumHeadlineStyles.fontSize).toBe(`${remHeadlineSizes.medium}rem`)
 })
 
+it("should return styles containing the specified font size in px if requested", () => {
+	const mediumHeadlineStyles = headline.medium({ unit: "px" })
+
+	expect(mediumHeadlineStyles.fontSize).toBe(headlineSizes.medium)
+})
+
 it("should return styles containing the specified font weight", () => {
@@ -35,2 +42,13 @@ const mediumHeadlineStyles = headline.medium({ fontWeight: "bold" })
 
+it("should return styles containing the specified line height in px if requested", () => {
+	const mediumHeadlineStyles = headline.medium({
+		lineHeight: "tight",
+		unit: "px",
+	})
+
+	expect(mediumHeadlineStyles.lineHeight).toBe(
+		lineHeights.tight * headlineSizes.medium,
+	)
+})
+
 it("should return italic styles if specified", () => {
@@ -37,0 +55,0 @@ const mediumHeadlineStyles = headline.medium({ italic: true })

src/typography/object-styles-to-string.ts

@@ -1,15 +0,18 @@
-import { TypographyStyles } from "./data"
+import { TypographyStyles, ScaleUnit } from "./data"
 
-export const objectStylesToString = ({
-	fontFamily,
-	fontSize,
-	lineHeight,
-	fontWeight,
-	fontStyle,
-}: TypographyStyles) => `
+export const objectStylesToString = (
+	{
+		fontFamily,
+		fontSize,
+		lineHeight,
+		fontWeight,
+		fontStyle,
+	}: TypographyStyles,
+	unit?: ScaleUnit,
+) => `
 	font-family: ${fontFamily};
-	font-size: ${fontSize};
-	line-height: ${lineHeight};
+	font-size: ${unit === "px" ? `${fontSize}px` : fontSize};
+	line-height: ${unit === "px" ? `${lineHeight}px` : lineHeight};
 	${fontWeight ? `font-weight: ${fontWeight}` : ""};
 	${fontStyle ? `font-style: ${fontStyle}` : ""};
 `

src/typography/typography.test.ts

@@ -5,2 +5,3 @@ import {
 	headlineSizes,
+	remHeadlineSizes,
 	fontWeights,
@@ -20,6 +21,14 @@ lineHeights,
 	expect(mediumHeadlineStyles).toContain(
-		`font-size: ${headlineSizes.medium}rem;`,
+		`font-size: ${remHeadlineSizes.medium}rem;`,
 	)
 })
 
+it("should return styles containing the specified font size in px if requested", () => {
+	const mediumHeadlineStyles = headline.medium({ unit: "px" })
+
+	expect(mediumHeadlineStyles).toContain(
+		`font-size: ${headlineSizes.medium}px;`,
+	)
+})
+
 it("should return styles containing the specified font weight", () => {
@@ -37,2 +46,13 @@ const mediumHeadlineStyles = headline.medium({ fontWeight: "bold" })
 
+it("should return styles containing the specified line height in px if requested", () => {
+	const mediumHeadlineStyles = headline.medium({
+		lineHeight: "tight",
+		unit: "px",
+	})
+
+	expect(mediumHeadlineStyles).toContain(
+		`line-height: ${lineHeights.tight * headlineSizes.medium}px;`,
+	)
+})
+
 it("should return italic styles if specified", () => {
@@ -39,0 +59,0 @@ const mediumHeadlineStyles = headline.medium({ italic: true })

typography/cjs/index.js

@@ -80,45 +80,42 @@ 'use strict';
 
-var fontSizesRem = fontSizes.map(function (fontSize) {
-  return fontSize / 16;
-});
 var titlepieceSizes = {
-  small: fontSizesRem[7],
+  small: fontSizes[7],
   //42px
-  medium: fontSizesRem[8],
+  medium: fontSizes[8],
   //50px
-  large: fontSizesRem[9] //70px
+  large: fontSizes[9] //70px
 
 };
 var headlineSizes = {
-  xxxsmall: fontSizesRem[2],
+  xxxsmall: fontSizes[2],
   //17px
-  xxsmall: fontSizesRem[3],
+  xxsmall: fontSizes[3],
   //20px
-  xsmall: fontSizesRem[4],
+  xsmall: fontSizes[4],
   //24px
-  small: fontSizesRem[5],
+  small: fontSizes[5],
   //28px
-  medium: fontSizesRem[6],
+  medium: fontSizes[6],
   //34px
-  large: fontSizesRem[7],
+  large: fontSizes[7],
   //42px
-  xlarge: fontSizesRem[8] //50px
+  xlarge: fontSizes[8] //50px
 
 };
 var bodySizes = {
-  small: fontSizesRem[1],
+  small: fontSizes[1],
   //15px
-  medium: fontSizesRem[2] //17px
+  medium: fontSizes[2] //17px
 
 };
 var textSansSizes = {
-  xsmall: fontSizesRem[0],
+  xsmall: fontSizes[0],
   //12px
-  small: fontSizesRem[1],
+  small: fontSizes[1],
   //15px
-  medium: fontSizesRem[2],
+  medium: fontSizes[2],
   //17px
-  large: fontSizesRem[3],
+  large: fontSizes[3],
   //20px
-  xlarge: fontSizesRem[4] //24px
+  xlarge: fontSizes[4] //24px
 
@@ -132,2 +129,47 @@ };
 };
+var remFontSizes = fontSizes.map(function (fontSize) {
+  return fontSize / 16;
+});
+var remTitlepieceSizes = {
+  small: remFontSizes[7],
+  //42px
+  medium: remFontSizes[8],
+  //50px
+  large: remFontSizes[9] //70px
+
+};
+var remHeadlineSizes = {
+  xxxsmall: remFontSizes[2],
+  //17px
+  xxsmall: remFontSizes[3],
+  //20px
+  xsmall: remFontSizes[4],
+  //24px
+  small: remFontSizes[5],
+  //28px
+  medium: remFontSizes[6],
+  //34px
+  large: remFontSizes[7],
+  //42px
+  xlarge: remFontSizes[8] //50px
+
+};
+var remBodySizes = {
+  small: remFontSizes[1],
+  //15px
+  medium: remFontSizes[2] //17px
+
+};
+var remTextSansSizes = {
+  xsmall: remFontSizes[0],
+  //12px
+  small: remFontSizes[1],
+  //15px
+  medium: remFontSizes[2],
+  //17px
+  large: remFontSizes[3],
+  //20px
+  xlarge: remFontSizes[4] //24px
+
+};
 var fontMapping = {
@@ -184,2 +226,15 @@ titlepiece: fonts.titlepiece,
 };
+Object.freeze(titlepieceSizes);
+Object.freeze(headlineSizes);
+Object.freeze(bodySizes);
+Object.freeze(textSansSizes);
+Object.freeze(remTitlepieceSizes);
+Object.freeze(remHeadlineSizes);
+Object.freeze(remBodySizes);
+Object.freeze(remTextSansSizes);
+Object.freeze(fontMapping);
+Object.freeze(fontSizeMapping);
+Object.freeze(fontWeightMapping);
+Object.freeze(lineHeightMapping);
+Object.freeze(availableFonts);
 
@@ -189,6 +244,7 @@ var fs = function fs(category, level, _ref) {
       fontWeight = _ref.fontWeight,
-      italic = _ref.italic;
+      italic = _ref.italic,
+      unit = _ref.unit;
   var fontFamilyValue = fontMapping[category];
-  var fontSizeValue = fontSizeMapping[category][level];
-  var lineHeightValue = lineHeightMapping[lineHeight]; // TODO: consider logging an error in development if a requested
+  var fontSizeValue = unit === "px" ? fontSizeMapping[category][level] : "".concat(fontSizeMapping[category][level] / 16, "rem");
+  var lineHeightValue = unit === "px" ? lineHeightMapping[lineHeight] * fontSizeMapping[category][level] : lineHeightMapping[lineHeight]; // TODO: consider logging an error in development if a requested
   // font is unavailable
@@ -201,3 +257,3 @@
     fontFamily: fontFamilyValue,
-    fontSize: "".concat(fontSizeValue, "rem"),
+    fontSize: fontSizeValue,
     lineHeight: lineHeightValue
@@ -214,3 +270,4 @@ }, fontWeightValue ? {
   fontWeight: "bold",
-  italic: false
+  italic: false,
+  unit: "rem"
 };
@@ -232,3 +289,4 @@ var titlepieceFs = fs.bind(null, "titlepiece");
   fontWeight: "medium",
-  italic: false
+  italic: false,
+  unit: "rem"
 };
@@ -262,3 +320,4 @@ var headlineFs = fs.bind(null, "headline");
   fontWeight: "regular",
-  italic: false
+  italic: false,
+  unit: "rem"
 };
@@ -277,3 +336,4 @@ var bodyFs = fs.bind(null, "body");
   fontWeight: "regular",
-  italic: false
+  italic: false,
+  unit: "rem"
 };
@@ -299,3 +359,3 @@ var textSansFs = fs.bind(null, "textSans");
 
-var objectStylesToString = function objectStylesToString(_ref) {
+var objectStylesToString = function objectStylesToString(_ref, unit) {
   var fontFamily = _ref.fontFamily,
@@ -306,3 +366,3 @@ fontSize = _ref.fontSize,
       fontStyle = _ref.fontStyle;
-  return "\n\tfont-family: ".concat(fontFamily, ";\n\tfont-size: ").concat(fontSize, ";\n\tline-height: ").concat(lineHeight, ";\n\t").concat(fontWeight ? "font-weight: ".concat(fontWeight) : "", ";\n\t").concat(fontStyle ? "font-style: ".concat(fontStyle) : "", ";\n");
+  return "\n\tfont-family: ".concat(fontFamily, ";\n\tfont-size: ").concat(unit === "px" ? "".concat(fontSize, "px") : fontSize, ";\n\tline-height: ").concat(unit === "px" ? "".concat(lineHeight, "px") : lineHeight, ";\n\t").concat(fontWeight ? "font-weight: ".concat(fontWeight) : "", ";\n\t").concat(fontStyle ? "font-style: ".concat(fontStyle) : "", ";\n");
 };
@@ -315,4 +375,5 @@
 
-  return [key, function (options) {
-    return objectStylesToString(func(options));
+  return [key, function () {
+    var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+    return objectStylesToString(func(options), options.unit);
   }];
@@ -325,4 +386,5 @@ }));
 
-  return [key, function (options) {
-    return objectStylesToString(func(options));
+  return [key, function () {
+    var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+    return objectStylesToString(func(options), options.unit);
   }];
@@ -335,4 +397,5 @@ }));
 
-  return [key, function (options) {
-    return objectStylesToString(func(options));
+  return [key, function () {
+    var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+    return objectStylesToString(func(options), options.unit);
   }];
@@ -345,13 +408,7 @@ }));
 
-  return [key, function (options) {
-    return objectStylesToString(func(options));
+  return [key, function () {
+    var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+    return objectStylesToString(func(options), options.unit);
   }];
 }));
-Object.freeze(titlepieceSizes);
-Object.freeze(headlineSizes);
-Object.freeze(bodySizes);
-Object.freeze(textSansSizes);
-Object.freeze(fontMapping);
-Object.freeze(fontWeightMapping);
-Object.freeze(lineHeightMapping);
 
@@ -365,2 +422,6 @@ exports.body = body$1;
 exports.lineHeights = lineHeightMapping;
+exports.remBodySizes = remBodySizes;
+exports.remHeadlineSizes = remHeadlineSizes;
+exports.remTextSansSizes = remTextSansSizes;
+exports.remTitlepieceSizes = remTitlepieceSizes;
 exports.textSans = textSans$1;
@@ -367,0 +428,0 @@ exports.textSansSizes = textSansSizes;

typography/data.d.ts

@@ -0,1 +1,2 @@
+export declare type ScaleUnit = "rem" | "px";
 export declare type Category = "titlepiece" | "headline" | "body" | "textSans";
@@ -13,3 +14,3 @@ export declare type LineHeight = "tight" | "regular" | "loose";
     fontFamily: string;
-    fontSize: string;
+    fontSize: string | number;
     lineHeight: number;
@@ -19,6 +20,7 @@ fontWeight?: number;
 };
-export declare type Fs = (category: Category, level: string, { lineHeight, fontWeight, italic, }: {
+export declare type Fs = (category: Category, level: string, { lineHeight, fontWeight, italic, unit, }: {
     lineHeight: LineHeight;
     fontWeight: FontWeight;
     italic: boolean;
+    unit: ScaleUnit;
 }) => TypographyStyles;
@@ -29,17 +31,17 @@ export interface FontScaleArgs {
     italic?: boolean;
+    unit?: ScaleUnit;
 }
-export declare const fontSizesRem: number[];
-export declare const titlepieceSizes: {
+declare const titlepieceSizes: {
     [key in TitlepieceSizes]: number;
 };
-export declare const headlineSizes: {
+declare const headlineSizes: {
     [key in HeadlineSizes]: number;
 };
-export declare const bodySizes: {
+declare const bodySizes: {
     [key in BodySizes]: number;
 };
-export declare const textSansSizes: {
+declare const textSansSizes: {
     [key in TextSansSizes]: number;
 };
-export declare const fontSizeMapping: {
+declare const fontSizeMapping: {
     [cat in Category]: {
@@ -49,12 +51,30 @@ [level in string]: number;
 };
-export declare const fontMapping: {
+declare const remFontSizes: number[];
+declare const remTitlepieceSizes: {
+    [key in TitlepieceSizes]: number;
+};
+declare const remHeadlineSizes: {
+    [key in HeadlineSizes]: number;
+};
+declare const remBodySizes: {
+    [key in BodySizes]: number;
+};
+declare const remTextSansSizes: {
+    [key in TextSansSizes]: number;
+};
+declare const remFontSizeMapping: {
+    [cat in Category]: {
+        [level in string]: number;
+    };
+};
+declare const fontMapping: {
     [cat in Category]: string;
 };
-export declare const lineHeightMapping: {
+declare const lineHeightMapping: {
     [lineHight in LineHeight]: number;
 };
-export declare const fontWeightMapping: {
+declare const fontWeightMapping: {
     [fontWeight in FontWeight]: number;
 };
-export declare const availableFonts: {
+declare const availableFonts: {
     [cat in Category]: {
@@ -64,1 +84,2 @@ [fontWeight in FontWeight]?: FontWeightDefinition;
 };
+export { titlepieceSizes, headlineSizes, bodySizes, textSansSizes, remFontSizes, remTitlepieceSizes, remHeadlineSizes, remBodySizes, remTextSansSizes, remFontSizeMapping, fontMapping, fontSizeMapping, lineHeightMapping, fontWeightMapping, availableFonts, };

typography/index.d.ts

@@ -1,2 +0,2 @@
-import { titlepieceSizes, headlineSizes, bodySizes, textSansSizes, fontMapping, fontWeightMapping, lineHeightMapping, FontScaleArgs } from "./data";
+import { titlepieceSizes, headlineSizes, bodySizes, textSansSizes, remTitlepieceSizes, remHeadlineSizes, remBodySizes, remTextSansSizes, fontMapping, fontWeightMapping, lineHeightMapping, FontScaleArgs } from "./data";
 declare const titlepiece: {
@@ -18,2 +18,2 @@ [x: string]: (options?: FontScaleArgs) => string;
 };
-export { titlepiece, headline, body, textSans, titlepieceSizes, headlineSizes, bodySizes, textSansSizes, fontMapping as fonts, fontWeightMapping as fontWeights, lineHeightMapping as lineHeights, };
+export { titlepiece, headline, body, textSans, titlepieceSizes, headlineSizes, bodySizes, textSansSizes, remTitlepieceSizes, remHeadlineSizes, remBodySizes, remTextSansSizes, fontMapping as fonts, fontWeightMapping as fontWeights, lineHeightMapping as lineHeights, };

typography/index.js

@@ -76,45 +76,42 @@ function _slicedToArray(arr, i) {
 
-var fontSizesRem = fontSizes.map(function (fontSize) {
-  return fontSize / 16;
-});
 var titlepieceSizes = {
-  small: fontSizesRem[7],
+  small: fontSizes[7],
   //42px
-  medium: fontSizesRem[8],
+  medium: fontSizes[8],
   //50px
-  large: fontSizesRem[9] //70px
+  large: fontSizes[9] //70px
 
 };
 var headlineSizes = {
-  xxxsmall: fontSizesRem[2],
+  xxxsmall: fontSizes[2],
   //17px
-  xxsmall: fontSizesRem[3],
+  xxsmall: fontSizes[3],
   //20px
-  xsmall: fontSizesRem[4],
+  xsmall: fontSizes[4],
   //24px
-  small: fontSizesRem[5],
+  small: fontSizes[5],
   //28px
-  medium: fontSizesRem[6],
+  medium: fontSizes[6],
   //34px
-  large: fontSizesRem[7],
+  large: fontSizes[7],
   //42px
-  xlarge: fontSizesRem[8] //50px
+  xlarge: fontSizes[8] //50px
 
 };
 var bodySizes = {
-  small: fontSizesRem[1],
+  small: fontSizes[1],
   //15px
-  medium: fontSizesRem[2] //17px
+  medium: fontSizes[2] //17px
 
 };
 var textSansSizes = {
-  xsmall: fontSizesRem[0],
+  xsmall: fontSizes[0],
   //12px
-  small: fontSizesRem[1],
+  small: fontSizes[1],
   //15px
-  medium: fontSizesRem[2],
+  medium: fontSizes[2],
   //17px
-  large: fontSizesRem[3],
+  large: fontSizes[3],
   //20px
-  xlarge: fontSizesRem[4] //24px
+  xlarge: fontSizes[4] //24px
 
@@ -128,2 +125,47 @@ };
 };
+var remFontSizes = fontSizes.map(function (fontSize) {
+  return fontSize / 16;
+});
+var remTitlepieceSizes = {
+  small: remFontSizes[7],
+  //42px
+  medium: remFontSizes[8],
+  //50px
+  large: remFontSizes[9] //70px
+
+};
+var remHeadlineSizes = {
+  xxxsmall: remFontSizes[2],
+  //17px
+  xxsmall: remFontSizes[3],
+  //20px
+  xsmall: remFontSizes[4],
+  //24px
+  small: remFontSizes[5],
+  //28px
+  medium: remFontSizes[6],
+  //34px
+  large: remFontSizes[7],
+  //42px
+  xlarge: remFontSizes[8] //50px
+
+};
+var remBodySizes = {
+  small: remFontSizes[1],
+  //15px
+  medium: remFontSizes[2] //17px
+
+};
+var remTextSansSizes = {
+  xsmall: remFontSizes[0],
+  //12px
+  small: remFontSizes[1],
+  //15px
+  medium: remFontSizes[2],
+  //17px
+  large: remFontSizes[3],
+  //20px
+  xlarge: remFontSizes[4] //24px
+
+};
 var fontMapping = {
@@ -180,2 +222,15 @@ titlepiece: fonts.titlepiece,
 };
+Object.freeze(titlepieceSizes);
+Object.freeze(headlineSizes);
+Object.freeze(bodySizes);
+Object.freeze(textSansSizes);
+Object.freeze(remTitlepieceSizes);
+Object.freeze(remHeadlineSizes);
+Object.freeze(remBodySizes);
+Object.freeze(remTextSansSizes);
+Object.freeze(fontMapping);
+Object.freeze(fontSizeMapping);
+Object.freeze(fontWeightMapping);
+Object.freeze(lineHeightMapping);
+Object.freeze(availableFonts);
 
@@ -185,6 +240,7 @@ var fs = function fs(category, level, _ref) {
       fontWeight = _ref.fontWeight,
-      italic = _ref.italic;
+      italic = _ref.italic,
+      unit = _ref.unit;
   var fontFamilyValue = fontMapping[category];
-  var fontSizeValue = fontSizeMapping[category][level];
-  var lineHeightValue = lineHeightMapping[lineHeight]; // TODO: consider logging an error in development if a requested
+  var fontSizeValue = unit === "px" ? fontSizeMapping[category][level] : "".concat(fontSizeMapping[category][level] / 16, "rem");
+  var lineHeightValue = unit === "px" ? lineHeightMapping[lineHeight] * fontSizeMapping[category][level] : lineHeightMapping[lineHeight]; // TODO: consider logging an error in development if a requested
   // font is unavailable
@@ -197,3 +253,3 @@
     fontFamily: fontFamilyValue,
-    fontSize: "".concat(fontSizeValue, "rem"),
+    fontSize: fontSizeValue,
     lineHeight: lineHeightValue
@@ -210,3 +266,4 @@ }, fontWeightValue ? {
   fontWeight: "bold",
-  italic: false
+  italic: false,
+  unit: "rem"
 };
@@ -228,3 +285,4 @@ var titlepieceFs = fs.bind(null, "titlepiece");
   fontWeight: "medium",
-  italic: false
+  italic: false,
+  unit: "rem"
 };
@@ -258,3 +316,4 @@ var headlineFs = fs.bind(null, "headline");
   fontWeight: "regular",
-  italic: false
+  italic: false,
+  unit: "rem"
 };
@@ -273,3 +332,4 @@ var bodyFs = fs.bind(null, "body");
   fontWeight: "regular",
-  italic: false
+  italic: false,
+  unit: "rem"
 };
@@ -295,3 +355,3 @@ var textSansFs = fs.bind(null, "textSans");
 
-var objectStylesToString = function objectStylesToString(_ref) {
+var objectStylesToString = function objectStylesToString(_ref, unit) {
   var fontFamily = _ref.fontFamily,
@@ -302,3 +362,3 @@ fontSize = _ref.fontSize,
       fontStyle = _ref.fontStyle;
-  return "\n\tfont-family: ".concat(fontFamily, ";\n\tfont-size: ").concat(fontSize, ";\n\tline-height: ").concat(lineHeight, ";\n\t").concat(fontWeight ? "font-weight: ".concat(fontWeight) : "", ";\n\t").concat(fontStyle ? "font-style: ".concat(fontStyle) : "", ";\n");
+  return "\n\tfont-family: ".concat(fontFamily, ";\n\tfont-size: ").concat(unit === "px" ? "".concat(fontSize, "px") : fontSize, ";\n\tline-height: ").concat(unit === "px" ? "".concat(lineHeight, "px") : lineHeight, ";\n\t").concat(fontWeight ? "font-weight: ".concat(fontWeight) : "", ";\n\t").concat(fontStyle ? "font-style: ".concat(fontStyle) : "", ";\n");
 };
@@ -311,4 +371,5 @@
 
-  return [key, function (options) {
-    return objectStylesToString(func(options));
+  return [key, function () {
+    var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+    return objectStylesToString(func(options), options.unit);
   }];
@@ -321,4 +382,5 @@ }));
 
-  return [key, function (options) {
-    return objectStylesToString(func(options));
+  return [key, function () {
+    var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+    return objectStylesToString(func(options), options.unit);
   }];
@@ -331,4 +393,5 @@ }));
 
-  return [key, function (options) {
-    return objectStylesToString(func(options));
+  return [key, function () {
+    var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+    return objectStylesToString(func(options), options.unit);
   }];
@@ -341,14 +404,8 @@ }));
 
-  return [key, function (options) {
-    return objectStylesToString(func(options));
+  return [key, function () {
+    var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+    return objectStylesToString(func(options), options.unit);
   }];
 }));
-Object.freeze(titlepieceSizes);
-Object.freeze(headlineSizes);
-Object.freeze(bodySizes);
-Object.freeze(textSansSizes);
-Object.freeze(fontMapping);
-Object.freeze(fontWeightMapping);
-Object.freeze(lineHeightMapping);
 
-export { body$1 as body, bodySizes, fontWeightMapping as fontWeights, fontMapping as fonts, headline$1 as headline, headlineSizes, lineHeightMapping as lineHeights, textSans$1 as textSans, textSansSizes, titlepiece$1 as titlepiece, titlepieceSizes };
+export { body$1 as body, bodySizes, fontWeightMapping as fontWeights, fontMapping as fonts, headline$1 as headline, headlineSizes, lineHeightMapping as lineHeights, remBodySizes, remHeadlineSizes, remTextSansSizes, remTitlepieceSizes, textSans$1 as textSans, textSansSizes, titlepiece$1 as titlepiece, titlepieceSizes };

typography/obj/cjs/index.js

@@ -38,45 +38,42 @@ 'use strict';
 
-var fontSizesRem = fontSizes.map(function (fontSize) {
-  return fontSize / 16;
-});
 var titlepieceSizes = {
-  small: fontSizesRem[7],
+  small: fontSizes[7],
   //42px
-  medium: fontSizesRem[8],
+  medium: fontSizes[8],
   //50px
-  large: fontSizesRem[9] //70px
+  large: fontSizes[9] //70px
 
 };
 var headlineSizes = {
-  xxxsmall: fontSizesRem[2],
+  xxxsmall: fontSizes[2],
   //17px
-  xxsmall: fontSizesRem[3],
+  xxsmall: fontSizes[3],
   //20px
-  xsmall: fontSizesRem[4],
+  xsmall: fontSizes[4],
   //24px
-  small: fontSizesRem[5],
+  small: fontSizes[5],
   //28px
-  medium: fontSizesRem[6],
+  medium: fontSizes[6],
   //34px
-  large: fontSizesRem[7],
+  large: fontSizes[7],
   //42px
-  xlarge: fontSizesRem[8] //50px
+  xlarge: fontSizes[8] //50px
 
 };
 var bodySizes = {
-  small: fontSizesRem[1],
+  small: fontSizes[1],
   //15px
-  medium: fontSizesRem[2] //17px
+  medium: fontSizes[2] //17px
 
 };
 var textSansSizes = {
-  xsmall: fontSizesRem[0],
+  xsmall: fontSizes[0],
   //12px
-  small: fontSizesRem[1],
+  small: fontSizes[1],
   //15px
-  medium: fontSizesRem[2],
+  medium: fontSizes[2],
   //17px
-  large: fontSizesRem[3],
+  large: fontSizes[3],
   //20px
-  xlarge: fontSizesRem[4] //24px
+  xlarge: fontSizes[4] //24px
 
@@ -90,2 +87,47 @@ };
 };
+var remFontSizes = fontSizes.map(function (fontSize) {
+  return fontSize / 16;
+});
+var remTitlepieceSizes = {
+  small: remFontSizes[7],
+  //42px
+  medium: remFontSizes[8],
+  //50px
+  large: remFontSizes[9] //70px
+
+};
+var remHeadlineSizes = {
+  xxxsmall: remFontSizes[2],
+  //17px
+  xxsmall: remFontSizes[3],
+  //20px
+  xsmall: remFontSizes[4],
+  //24px
+  small: remFontSizes[5],
+  //28px
+  medium: remFontSizes[6],
+  //34px
+  large: remFontSizes[7],
+  //42px
+  xlarge: remFontSizes[8] //50px
+
+};
+var remBodySizes = {
+  small: remFontSizes[1],
+  //15px
+  medium: remFontSizes[2] //17px
+
+};
+var remTextSansSizes = {
+  xsmall: remFontSizes[0],
+  //12px
+  small: remFontSizes[1],
+  //15px
+  medium: remFontSizes[2],
+  //17px
+  large: remFontSizes[3],
+  //20px
+  xlarge: remFontSizes[4] //24px
+
+};
 var fontMapping = {
@@ -142,2 +184,15 @@ titlepiece: fonts.titlepiece,
 };
+Object.freeze(titlepieceSizes);
+Object.freeze(headlineSizes);
+Object.freeze(bodySizes);
+Object.freeze(textSansSizes);
+Object.freeze(remTitlepieceSizes);
+Object.freeze(remHeadlineSizes);
+Object.freeze(remBodySizes);
+Object.freeze(remTextSansSizes);
+Object.freeze(fontMapping);
+Object.freeze(fontSizeMapping);
+Object.freeze(fontWeightMapping);
+Object.freeze(lineHeightMapping);
+Object.freeze(availableFonts);
 
@@ -147,6 +202,7 @@ var fs = function fs(category, level, _ref) {
       fontWeight = _ref.fontWeight,
-      italic = _ref.italic;
+      italic = _ref.italic,
+      unit = _ref.unit;
   var fontFamilyValue = fontMapping[category];
-  var fontSizeValue = fontSizeMapping[category][level];
-  var lineHeightValue = lineHeightMapping[lineHeight]; // TODO: consider logging an error in development if a requested
+  var fontSizeValue = unit === "px" ? fontSizeMapping[category][level] : "".concat(fontSizeMapping[category][level] / 16, "rem");
+  var lineHeightValue = unit === "px" ? lineHeightMapping[lineHeight] * fontSizeMapping[category][level] : lineHeightMapping[lineHeight]; // TODO: consider logging an error in development if a requested
   // font is unavailable
@@ -159,3 +215,3 @@
     fontFamily: fontFamilyValue,
-    fontSize: "".concat(fontSizeValue, "rem"),
+    fontSize: fontSizeValue,
     lineHeight: lineHeightValue
@@ -172,3 +228,4 @@ }, fontWeightValue ? {
   fontWeight: "bold",
-  italic: false
+  italic: false,
+  unit: "rem"
 };
@@ -190,3 +247,4 @@ var titlepieceFs = fs.bind(null, "titlepiece");
   fontWeight: "medium",
-  italic: false
+  italic: false,
+  unit: "rem"
 };
@@ -220,3 +278,4 @@ var headlineFs = fs.bind(null, "headline");
   fontWeight: "regular",
-  italic: false
+  italic: false,
+  unit: "rem"
 };
@@ -235,3 +294,4 @@ var bodyFs = fs.bind(null, "body");
   fontWeight: "regular",
-  italic: false
+  italic: false,
+  unit: "rem"
 };
@@ -257,10 +317,2 @@ var textSansFs = fs.bind(null, "textSans");
 
-Object.freeze(titlepieceSizes);
-Object.freeze(headlineSizes);
-Object.freeze(bodySizes);
-Object.freeze(textSansSizes);
-Object.freeze(fontMapping);
-Object.freeze(fontWeightMapping);
-Object.freeze(lineHeightMapping);
-
 exports.body = body;
@@ -273,2 +325,6 @@ exports.bodySizes = bodySizes;
 exports.lineHeights = lineHeightMapping;
+exports.remBodySizes = remBodySizes;
+exports.remHeadlineSizes = remHeadlineSizes;
+exports.remTextSansSizes = remTextSansSizes;
+exports.remTitlepieceSizes = remTitlepieceSizes;
 exports.textSans = textSans;
@@ -275,0 +331,0 @@ exports.textSansSizes = textSansSizes;

typography/obj/index.d.ts

 import { titlepiece, headline, body, textSans } from "../api";
-import { titlepieceSizes, headlineSizes, bodySizes, textSansSizes, fontMapping, fontWeightMapping, lineHeightMapping } from "../data";
-export { titlepiece, headline, body, textSans, titlepieceSizes, headlineSizes, bodySizes, textSansSizes, fontMapping as fonts, fontWeightMapping as fontWeights, lineHeightMapping as lineHeights, };
+import { titlepieceSizes, headlineSizes, bodySizes, textSansSizes, remTitlepieceSizes, remHeadlineSizes, remBodySizes, remTextSansSizes, fontMapping, fontWeightMapping, lineHeightMapping } from "../data";
+export { titlepiece, headline, body, textSans, titlepieceSizes, headlineSizes, bodySizes, textSansSizes, remTitlepieceSizes, remHeadlineSizes, remBodySizes, remTextSansSizes, fontMapping as fonts, fontWeightMapping as fontWeights, lineHeightMapping as lineHeights, };

typography/obj/index.js

@@ -34,45 +34,42 @@ // The theme file is based on the specification at https://system-ui.com/theme
 
-var fontSizesRem = fontSizes.map(function (fontSize) {
-  return fontSize / 16;
-});
 var titlepieceSizes = {
-  small: fontSizesRem[7],
+  small: fontSizes[7],
   //42px
-  medium: fontSizesRem[8],
+  medium: fontSizes[8],
   //50px
-  large: fontSizesRem[9] //70px
+  large: fontSizes[9] //70px
 
 };
 var headlineSizes = {
-  xxxsmall: fontSizesRem[2],
+  xxxsmall: fontSizes[2],
   //17px
-  xxsmall: fontSizesRem[3],
+  xxsmall: fontSizes[3],
   //20px
-  xsmall: fontSizesRem[4],
+  xsmall: fontSizes[4],
   //24px
-  small: fontSizesRem[5],
+  small: fontSizes[5],
   //28px
-  medium: fontSizesRem[6],
+  medium: fontSizes[6],
   //34px
-  large: fontSizesRem[7],
+  large: fontSizes[7],
   //42px
-  xlarge: fontSizesRem[8] //50px
+  xlarge: fontSizes[8] //50px
 
 };
 var bodySizes = {
-  small: fontSizesRem[1],
+  small: fontSizes[1],
   //15px
-  medium: fontSizesRem[2] //17px
+  medium: fontSizes[2] //17px
 
 };
 var textSansSizes = {
-  xsmall: fontSizesRem[0],
+  xsmall: fontSizes[0],
   //12px
-  small: fontSizesRem[1],
+  small: fontSizes[1],
   //15px
-  medium: fontSizesRem[2],
+  medium: fontSizes[2],
   //17px
-  large: fontSizesRem[3],
+  large: fontSizes[3],
   //20px
-  xlarge: fontSizesRem[4] //24px
+  xlarge: fontSizes[4] //24px
 
@@ -86,2 +83,47 @@ };
 };
+var remFontSizes = fontSizes.map(function (fontSize) {
+  return fontSize / 16;
+});
+var remTitlepieceSizes = {
+  small: remFontSizes[7],
+  //42px
+  medium: remFontSizes[8],
+  //50px
+  large: remFontSizes[9] //70px
+
+};
+var remHeadlineSizes = {
+  xxxsmall: remFontSizes[2],
+  //17px
+  xxsmall: remFontSizes[3],
+  //20px
+  xsmall: remFontSizes[4],
+  //24px
+  small: remFontSizes[5],
+  //28px
+  medium: remFontSizes[6],
+  //34px
+  large: remFontSizes[7],
+  //42px
+  xlarge: remFontSizes[8] //50px
+
+};
+var remBodySizes = {
+  small: remFontSizes[1],
+  //15px
+  medium: remFontSizes[2] //17px
+
+};
+var remTextSansSizes = {
+  xsmall: remFontSizes[0],
+  //12px
+  small: remFontSizes[1],
+  //15px
+  medium: remFontSizes[2],
+  //17px
+  large: remFontSizes[3],
+  //20px
+  xlarge: remFontSizes[4] //24px
+
+};
 var fontMapping = {
@@ -138,2 +180,15 @@ titlepiece: fonts.titlepiece,
 };
+Object.freeze(titlepieceSizes);
+Object.freeze(headlineSizes);
+Object.freeze(bodySizes);
+Object.freeze(textSansSizes);
+Object.freeze(remTitlepieceSizes);
+Object.freeze(remHeadlineSizes);
+Object.freeze(remBodySizes);
+Object.freeze(remTextSansSizes);
+Object.freeze(fontMapping);
+Object.freeze(fontSizeMapping);
+Object.freeze(fontWeightMapping);
+Object.freeze(lineHeightMapping);
+Object.freeze(availableFonts);
 
@@ -143,6 +198,7 @@ var fs = function fs(category, level, _ref) {
       fontWeight = _ref.fontWeight,
-      italic = _ref.italic;
+      italic = _ref.italic,
+      unit = _ref.unit;
   var fontFamilyValue = fontMapping[category];
-  var fontSizeValue = fontSizeMapping[category][level];
-  var lineHeightValue = lineHeightMapping[lineHeight]; // TODO: consider logging an error in development if a requested
+  var fontSizeValue = unit === "px" ? fontSizeMapping[category][level] : "".concat(fontSizeMapping[category][level] / 16, "rem");
+  var lineHeightValue = unit === "px" ? lineHeightMapping[lineHeight] * fontSizeMapping[category][level] : lineHeightMapping[lineHeight]; // TODO: consider logging an error in development if a requested
   // font is unavailable
@@ -155,3 +211,3 @@
     fontFamily: fontFamilyValue,
-    fontSize: "".concat(fontSizeValue, "rem"),
+    fontSize: fontSizeValue,
     lineHeight: lineHeightValue
@@ -168,3 +224,4 @@ }, fontWeightValue ? {
   fontWeight: "bold",
-  italic: false
+  italic: false,
+  unit: "rem"
 };
@@ -186,3 +243,4 @@ var titlepieceFs = fs.bind(null, "titlepiece");
   fontWeight: "medium",
-  italic: false
+  italic: false,
+  unit: "rem"
 };
@@ -216,3 +274,4 @@ var headlineFs = fs.bind(null, "headline");
   fontWeight: "regular",
-  italic: false
+  italic: false,
+  unit: "rem"
 };
@@ -231,3 +290,4 @@ var bodyFs = fs.bind(null, "body");
   fontWeight: "regular",
-  italic: false
+  italic: false,
+  unit: "rem"
 };
@@ -253,10 +313,2 @@ var textSansFs = fs.bind(null, "textSans");
 
-Object.freeze(titlepieceSizes);
-Object.freeze(headlineSizes);
-Object.freeze(bodySizes);
-Object.freeze(textSansSizes);
-Object.freeze(fontMapping);
-Object.freeze(fontWeightMapping);
-Object.freeze(lineHeightMapping);
-
-export { body, bodySizes, fontWeightMapping as fontWeights, fontMapping as fonts, headline, headlineSizes, lineHeightMapping as lineHeights, textSans, textSansSizes, titlepiece, titlepieceSizes };
+export { body, bodySizes, fontWeightMapping as fontWeights, fontMapping as fonts, headline, headlineSizes, lineHeightMapping as lineHeights, remBodySizes, remHeadlineSizes, remTextSansSizes, remTitlepieceSizes, textSans, textSansSizes, titlepiece, titlepieceSizes };

typography/object-styles-to-string.d.ts

@@ -1,2 +0,2 @@
-import { TypographyStyles } from "./data";
-export declare const objectStylesToString: ({ fontFamily, fontSize, lineHeight, fontWeight, fontStyle, }: TypographyStyles) => string;
+import { TypographyStyles, ScaleUnit } from "./data";
+export declare const objectStylesToString: ({ fontFamily, fontSize, lineHeight, fontWeight, fontStyle, }: TypographyStyles, unit?: ScaleUnit) => string;

No alert changes

Improved metrics

Total package byte prevSize

197743

increased by5.09%

Lines of code

6968

increased by5.15%

No dependency changes