@carbon/type - npm Package Compare versions

Comparing version 11.10.0-rc.0 to 11.10.0

es/index.js

@@ -0,1 +1,3 @@
+import { px, baseFontSize, rem, breakpoint, breakpoints } from '@carbon/layout';
+
 /**
@@ -95,75 +97,2 @@ * Copyright IBM Corp. 2018, 2018
  */
-/**
- * Copyright IBM Corp. 2018, 2018
- *
- * This source code is licensed under the Apache-2.0 license found in the
- * LICENSE file in the root directory of this source tree.
- */
-// Default, Use with em() and rem() functions
-
-var baseFontSize = 16;
-/**
- * Convert a given px unit to a rem unit
- * @param {number} px
- * @returns {string}
- */
-
-function rem(px) {
-  return "".concat(px / baseFontSize, "rem");
-}
-/**
- * Convert a given px unit to its string representation
- * @param {number} value - number of pixels
- * @returns {string}
- */
-
-
-function px(value) {
-  return "".concat(value, "px");
-} // Breakpoint
-// Initial map of our breakpoints and their values
-
-
-var breakpoints = {
-  sm: {
-    width: rem(320),
-    columns: 4,
-    margin: '0'
-  },
-  md: {
-    width: rem(672),
-    columns: 8,
-    margin: rem(16)
-  },
-  lg: {
-    width: rem(1056),
-    columns: 16,
-    margin: rem(16)
-  },
-  xlg: {
-    width: rem(1312),
-    columns: 16,
-    margin: rem(16)
-  },
-  max: {
-    width: rem(1584),
-    columns: 16,
-    margin: rem(24)
-  }
-};
-
-function breakpointUp(name) {
-  return "@media (min-width: ".concat(breakpoints[name].width, ")");
-}
-
-function breakpoint() {
-  return breakpointUp.apply(void 0, arguments);
-} // Mini-unit
-
-/**
- * Copyright IBM Corp. 2018, 2018
- *
- * This source code is licensed under the Apache-2.0 license found in the
- * LICENSE file in the root directory of this source tree.
- */
 var reset = {
@@ -170,0 +99,0 @@ html: {

lib/index.js

@@ -5,2 +5,4 @@ 'use strict';
 
+var layout = require('@carbon/layout');
+
 /**
@@ -100,78 +102,5 @@ * Copyright IBM Corp. 2018, 2018
  */
-/**
- * Copyright IBM Corp. 2018, 2018
- *
- * This source code is licensed under the Apache-2.0 license found in the
- * LICENSE file in the root directory of this source tree.
- */
-// Default, Use with em() and rem() functions
-
-var baseFontSize = 16;
-/**
- * Convert a given px unit to a rem unit
- * @param {number} px
- * @returns {string}
- */
-
-function rem(px) {
-  return "".concat(px / baseFontSize, "rem");
-}
-/**
- * Convert a given px unit to its string representation
- * @param {number} value - number of pixels
- * @returns {string}
- */
-
-
-function px(value) {
-  return "".concat(value, "px");
-} // Breakpoint
-// Initial map of our breakpoints and their values
-
-
-var breakpoints = {
-  sm: {
-    width: rem(320),
-    columns: 4,
-    margin: '0'
-  },
-  md: {
-    width: rem(672),
-    columns: 8,
-    margin: rem(16)
-  },
-  lg: {
-    width: rem(1056),
-    columns: 16,
-    margin: rem(16)
-  },
-  xlg: {
-    width: rem(1312),
-    columns: 16,
-    margin: rem(16)
-  },
-  max: {
-    width: rem(1584),
-    columns: 16,
-    margin: rem(24)
-  }
-};
-
-function breakpointUp(name) {
-  return "@media (min-width: ".concat(breakpoints[name].width, ")");
-}
-
-function breakpoint() {
-  return breakpointUp.apply(void 0, arguments);
-} // Mini-unit
-
-/**
- * Copyright IBM Corp. 2018, 2018
- *
- * This source code is licensed under the Apache-2.0 license found in the
- * LICENSE file in the root directory of this source tree.
- */
 var reset = {
   html: {
-    fontSize: px(baseFontSize)
+    fontSize: layout.px(layout.baseFontSize)
   },
@@ -310,49 +239,49 @@ body: {
 var caption01$1 = {
-  fontSize: rem(scale[0]),
+  fontSize: layout.rem(scale[0]),
   fontWeight: fontWeights.regular,
   lineHeight: 1.33333,
-  letterSpacing: px(0.32)
+  letterSpacing: layout.px(0.32)
 };
 var caption02$1 = {
-  fontSize: rem(scale[1]),
+  fontSize: layout.rem(scale[1]),
   fontWeight: fontWeights.regular,
   lineHeight: 1.28572,
-  letterSpacing: px(0.32)
+  letterSpacing: layout.px(0.32)
 };
 var label01$1 = {
-  fontSize: rem(scale[0]),
+  fontSize: layout.rem(scale[0]),
   fontWeight: fontWeights.regular,
   lineHeight: 1.33333,
-  letterSpacing: px(0.32)
+  letterSpacing: layout.px(0.32)
 };
 var label02$1 = {
-  fontSize: rem(scale[1]),
+  fontSize: layout.rem(scale[1]),
   fontWeight: fontWeights.regular,
   lineHeight: 1.28572,
-  letterSpacing: px(0.16)
+  letterSpacing: layout.px(0.16)
 };
 var helperText01$1 = {
-  fontSize: rem(scale[0]),
+  fontSize: layout.rem(scale[0]),
   lineHeight: 1.33333,
-  letterSpacing: px(0.32)
+  letterSpacing: layout.px(0.32)
 };
 var helperText02$1 = {
-  fontSize: rem(scale[1]),
+  fontSize: layout.rem(scale[1]),
   lineHeight: 1.28572,
-  letterSpacing: px(0.16)
+  letterSpacing: layout.px(0.16)
 };
 var bodyShort01$1 = {
-  fontSize: rem(scale[1]),
+  fontSize: layout.rem(scale[1]),
   fontWeight: fontWeights.regular,
   lineHeight: 1.28572,
-  letterSpacing: px(0.16)
+  letterSpacing: layout.px(0.16)
 };
 var bodyLong01$1 = {
-  fontSize: rem(scale[1]),
+  fontSize: layout.rem(scale[1]),
   fontWeight: fontWeights.regular,
   lineHeight: 1.42857,
-  letterSpacing: px(0.16)
+  letterSpacing: layout.px(0.16)
 };
 var bodyShort02$1 = {
-  fontSize: rem(scale[2]),
+  fontSize: layout.rem(scale[2]),
   fontWeight: fontWeights.regular,
@@ -363,3 +292,3 @@ lineHeight: 1.375,
 var bodyLong02$1 = {
-  fontSize: rem(scale[2]),
+  fontSize: layout.rem(scale[2]),
   fontWeight: fontWeights.regular,
@@ -371,28 +300,28 @@ lineHeight: 1.5,
   fontFamily: fontFamilies.mono,
-  fontSize: rem(scale[0]),
+  fontSize: layout.rem(scale[0]),
   fontWeight: fontWeights.regular,
   lineHeight: 1.33333,
-  letterSpacing: px(0.32)
+  letterSpacing: layout.px(0.32)
 };
 var code02$1 = {
   fontFamily: fontFamilies.mono,
-  fontSize: rem(scale[1]),
+  fontSize: layout.rem(scale[1]),
   fontWeight: fontWeights.regular,
   lineHeight: 1.42857,
-  letterSpacing: px(0.32)
+  letterSpacing: layout.px(0.32)
 };
 var heading01$1 = {
-  fontSize: rem(scale[1]),
+  fontSize: layout.rem(scale[1]),
   fontWeight: fontWeights.semibold,
   lineHeight: 1.42857,
-  letterSpacing: px(0.16)
+  letterSpacing: layout.px(0.16)
 };
 var productiveHeading01$1 = {
-  fontSize: rem(scale[1]),
+  fontSize: layout.rem(scale[1]),
   fontWeight: fontWeights.semibold,
   lineHeight: 1.28572,
-  letterSpacing: px(0.16)
+  letterSpacing: layout.px(0.16)
 };
 var heading02$1 = {
-  fontSize: rem(scale[2]),
+  fontSize: layout.rem(scale[2]),
   fontWeight: fontWeights.semibold,
@@ -403,3 +332,3 @@ lineHeight: 1.5,
 var productiveHeading02$1 = {
-  fontSize: rem(scale[2]),
+  fontSize: layout.rem(scale[2]),
   fontWeight: fontWeights.semibold,
@@ -410,3 +339,3 @@ lineHeight: 1.375,
 var productiveHeading03$1 = {
-  fontSize: rem(scale[4]),
+  fontSize: layout.rem(scale[4]),
   fontWeight: fontWeights.regular,
@@ -417,3 +346,3 @@ lineHeight: 1.4,
 var productiveHeading04$1 = {
-  fontSize: rem(scale[6]),
+  fontSize: layout.rem(scale[6]),
   fontWeight: fontWeights.regular,
@@ -424,3 +353,3 @@ lineHeight: 1.28572,
 var productiveHeading05$1 = {
-  fontSize: rem(scale[7]),
+  fontSize: layout.rem(scale[7]),
   fontWeight: fontWeights.light,
@@ -431,3 +360,3 @@ lineHeight: 1.25,
 var productiveHeading06$1 = {
-  fontSize: rem(scale[9]),
+  fontSize: layout.rem(scale[9]),
   fontWeight: fontWeights.light,
@@ -438,3 +367,3 @@ lineHeight: 1.199,
 var productiveHeading07$1 = {
-  fontSize: rem(scale[11]),
+  fontSize: layout.rem(scale[11]),
   fontWeight: fontWeights.light,
@@ -451,3 +380,3 @@ lineHeight: 1.199,
 var expressiveHeading03$1 = {
-  fontSize: rem(scale[4]),
+  fontSize: layout.rem(scale[4]),
   fontWeight: fontWeights.regular,
@@ -458,7 +387,7 @@ lineHeight: 1.4,
     xlg: {
-      fontSize: rem(scale[4]),
+      fontSize: layout.rem(scale[4]),
       lineHeight: 1.25
     },
     max: {
-      fontSize: rem(scale[5]),
+      fontSize: layout.rem(scale[5]),
       lineHeight: 1.334
@@ -469,3 +398,3 @@ }
 var expressiveHeading04$1 = {
-  fontSize: rem(scale[6]),
+  fontSize: layout.rem(scale[6]),
   fontWeight: fontWeights.regular,
@@ -476,3 +405,3 @@ lineHeight: 1.28572,
     xlg: {
-      fontSize: rem(scale[7]),
+      fontSize: layout.rem(scale[7]),
       fontWeight: fontWeights.light,
@@ -482,3 +411,3 @@ lineHeight: 1.25
     max: {
-      fontSize: rem(scale[7]),
+      fontSize: layout.rem(scale[7]),
       fontWeight: fontWeights.light
@@ -489,3 +418,3 @@ }
 var expressiveHeading05$1 = {
-  fontSize: rem(scale[7]),
+  fontSize: layout.rem(scale[7]),
   fontWeight: fontWeights.light,
@@ -496,3 +425,3 @@ lineHeight: 1.25,
     md: {
-      fontSize: rem(scale[8]),
+      fontSize: layout.rem(scale[8]),
       lineHeight: 1.22,
@@ -502,3 +431,3 @@ letterSpacing: 0
     lg: {
-      fontSize: rem(scale[9]),
+      fontSize: layout.rem(scale[9]),
       lineHeight: 1.19,
@@ -508,3 +437,3 @@ letterSpacing: 0
     xlg: {
-      fontSize: rem(scale[10]),
+      fontSize: layout.rem(scale[10]),
       lineHeight: 1.17,
@@ -514,3 +443,3 @@ letterSpacing: 0
     max: {
-      fontSize: rem(scale[12]),
+      fontSize: layout.rem(scale[12]),
       letterSpacing: 0
@@ -521,3 +450,3 @@ }
 var expressiveHeading06$1 = {
-  fontSize: rem(scale[7]),
+  fontSize: layout.rem(scale[7]),
   fontWeight: fontWeights.semibold,
@@ -528,3 +457,3 @@ lineHeight: 1.25,
     md: {
-      fontSize: rem(scale[8]),
+      fontSize: layout.rem(scale[8]),
       fontWeight: fontWeights.semibold,
@@ -535,3 +464,3 @@ lineHeight: 1.22,
     lg: {
-      fontSize: rem(scale[9]),
+      fontSize: layout.rem(scale[9]),
       fontWeight: fontWeights.semibold,
@@ -542,3 +471,3 @@ lineHeight: 1.19,
     xlg: {
-      fontSize: rem(scale[10]),
+      fontSize: layout.rem(scale[10]),
       fontWeight: fontWeights.semibold,
@@ -549,3 +478,3 @@ lineHeight: 1.17,
     max: {
-      fontSize: rem(scale[12]),
+      fontSize: layout.rem(scale[12]),
       fontWeight: fontWeights.semibold,
@@ -557,3 +486,3 @@ letterSpacing: 0
 var expressiveParagraph01$1 = {
-  fontSize: rem(scale[5]),
+  fontSize: layout.rem(scale[5]),
   fontWeight: fontWeights.light,
@@ -564,7 +493,7 @@ lineHeight: 1.334,
     lg: {
-      fontSize: rem(scale[6]),
+      fontSize: layout.rem(scale[6]),
       lineHeight: 1.28572
     },
     max: {
-      fontSize: rem(scale[7]),
+      fontSize: layout.rem(scale[7]),
       lineHeight: 1.25
@@ -576,3 +505,3 @@ }
   fontFamily: fontFamilies.serif,
-  fontSize: rem(scale[4]),
+  fontSize: layout.rem(scale[4]),
   fontWeight: fontWeights.regular,
@@ -583,3 +512,3 @@ lineHeight: 1.3,
     md: {
-      fontSize: rem(scale[4]),
+      fontSize: layout.rem(scale[4]),
       fontWeight: fontWeights.regular,
@@ -589,3 +518,3 @@ letterSpacing: 0
     lg: {
-      fontSize: rem(scale[5]),
+      fontSize: layout.rem(scale[5]),
       fontWeight: fontWeights.regular,
@@ -596,3 +525,3 @@ lineHeight: 1.334,
     xlg: {
-      fontSize: rem(scale[6]),
+      fontSize: layout.rem(scale[6]),
       fontWeight: fontWeights.regular,
@@ -603,3 +532,3 @@ lineHeight: 1.28572,
     max: {
-      fontSize: rem(scale[7]),
+      fontSize: layout.rem(scale[7]),
       fontWeight: fontWeights.regular,
@@ -613,3 +542,3 @@ lineHeight: 1.25,
   fontFamily: fontFamilies.serif,
-  fontSize: rem(scale[7]),
+  fontSize: layout.rem(scale[7]),
   fontWeight: fontWeights.light,
@@ -620,15 +549,15 @@ lineHeight: 1.25,
     md: {
-      fontSize: rem(scale[8]),
+      fontSize: layout.rem(scale[8]),
       lineHeight: 1.22
     },
     lg: {
-      fontSize: rem(scale[9]),
+      fontSize: layout.rem(scale[9]),
       lineHeight: 1.19
     },
     xlg: {
-      fontSize: rem(scale[10]),
+      fontSize: layout.rem(scale[10]),
       lineHeight: 1.17
     },
     max: {
-      fontSize: rem(scale[12])
+      fontSize: layout.rem(scale[12])
     }
@@ -638,3 +567,3 @@ }
 var display01$1 = {
-  fontSize: rem(scale[9]),
+  fontSize: layout.rem(scale[9]),
   fontWeight: fontWeights.light,
@@ -645,13 +574,13 @@ lineHeight: 1.19,
     md: {
-      fontSize: rem(scale[9])
+      fontSize: layout.rem(scale[9])
     },
     lg: {
-      fontSize: rem(scale[11])
+      fontSize: layout.rem(scale[11])
     },
     xlg: {
-      fontSize: rem(scale[12]),
+      fontSize: layout.rem(scale[12]),
       lineHeight: 1.17
     },
     max: {
-      fontSize: rem(scale[14]),
+      fontSize: layout.rem(scale[14]),
       lineHeight: 1.13
@@ -662,3 +591,3 @@ }
 var display02$1 = {
-  fontSize: rem(scale[9]),
+  fontSize: layout.rem(scale[9]),
   fontWeight: fontWeights.semibold,
@@ -669,13 +598,13 @@ lineHeight: 1.19,
     md: {
-      fontSize: rem(scale[9])
+      fontSize: layout.rem(scale[9])
     },
     lg: {
-      fontSize: rem(scale[11])
+      fontSize: layout.rem(scale[11])
     },
     xlg: {
-      fontSize: rem(scale[12]),
+      fontSize: layout.rem(scale[12]),
       lineHeight: 1.16
     },
     max: {
-      fontSize: rem(scale[14]),
+      fontSize: layout.rem(scale[14]),
       lineHeight: 1.13
@@ -686,3 +615,3 @@ }
 var display03$1 = {
-  fontSize: rem(scale[9]),
+  fontSize: layout.rem(scale[9]),
   fontWeight: fontWeights.light,
@@ -693,18 +622,18 @@ lineHeight: 1.19,
     md: {
-      fontSize: rem(scale[11]),
+      fontSize: layout.rem(scale[11]),
       lineHeight: 1.18
     },
     lg: {
-      fontSize: rem(scale[12]),
+      fontSize: layout.rem(scale[12]),
       lineHeight: 1.16,
-      letterSpacing: px(-0.64)
+      letterSpacing: layout.px(-0.64)
     },
     xlg: {
-      fontSize: rem(scale[14]),
+      fontSize: layout.rem(scale[14]),
       lineHeight: 1.13
     },
     max: {
-      fontSize: rem(scale[15]),
+      fontSize: layout.rem(scale[15]),
       lineHeight: 1.11,
-      letterSpacing: px(-0.96)
+      letterSpacing: layout.px(-0.96)
     }
@@ -714,3 +643,3 @@ }
 var display04$1 = {
-  fontSize: rem(scale[9]),
+  fontSize: layout.rem(scale[9]),
   fontWeight: fontWeights.light,
@@ -721,19 +650,19 @@ lineHeight: 1.19,
     md: {
-      fontSize: rem(scale[13]),
+      fontSize: layout.rem(scale[13]),
       lineHeight: 1.15
     },
     lg: {
-      fontSize: rem(scale[16]),
+      fontSize: layout.rem(scale[16]),
       lineHeight: 1.11,
-      letterSpacing: px(-0.64)
+      letterSpacing: layout.px(-0.64)
     },
     xlg: {
-      fontSize: rem(scale[19]),
+      fontSize: layout.rem(scale[19]),
       lineHeight: 1.07,
-      letterSpacing: px(-0.64)
+      letterSpacing: layout.px(-0.64)
     },
     max: {
-      fontSize: rem(scale[22]),
+      fontSize: layout.rem(scale[22]),
       lineHeight: 1.05,
-      letterSpacing: px(-0.96)
+      letterSpacing: layout.px(-0.96)
     }
@@ -746,12 +675,12 @@ }
 var legal01$1 = {
-  fontSize: rem(scale[0]),
+  fontSize: layout.rem(scale[0]),
   fontWeight: fontWeights.regular,
   lineHeight: 1.33333,
-  letterSpacing: px(0.32)
+  letterSpacing: layout.px(0.32)
 };
 var legal02$1 = {
-  fontSize: rem(scale[1]),
+  fontSize: layout.rem(scale[1]),
   fontWeight: fontWeights.regular,
   lineHeight: 1.28572,
-  letterSpacing: px(0.16)
+  letterSpacing: layout.px(0.16)
 }; // Body styles
@@ -848,3 +777,3 @@
 var _excluded = ["breakpoints"];
-var breakpointNames = Object.keys(breakpoints);
+var breakpointNames = Object.keys(layout.breakpoints);
 
@@ -871,3 +800,3 @@ function next(name) {
   fluidBreakpointNames.forEach(function (name) {
-    styles[breakpoint(name)] = _objectSpread2(_objectSpread2({}, fluidBreakpoints[name]), {}, {
+    styles[layout.breakpoint(name)] = _objectSpread2(_objectSpread2({}, fluidBreakpoints[name]), {}, {
       fontSize: fluidTypeSize(styles, name, fluidBreakpoints)
@@ -880,3 +809,3 @@ });
 function fluidTypeSize(defaultStyles, fluidBreakpointName, fluidBreakpoints) {
-  var breakpoint = breakpoints[fluidBreakpointName];
+  var breakpoint = layout.breakpoints[fluidBreakpointName];
   var fluidBreakpoint = fluidBreakpointName === 'sm' ? defaultStyles : fluidBreakpoints[fluidBreakpointName];
@@ -905,3 +834,3 @@ var maxFontSize = defaultStyles.fontSize;
   if (nextFluidBreakpointName) {
-    var nextFluidBreakpoint = breakpoints[nextFluidBreakpointName];
+    var nextFluidBreakpoint = layout.breakpoints[nextFluidBreakpointName];
     maxFontSize = fluidBreakpoints[nextFluidBreakpointName].fontSize;
@@ -908,0 +837,0 @@ maxViewportWidth = nextFluidBreakpoint.width;

package.json

 {
   "name": "@carbon/type",
   "description": "Typography for digital and software products using the Carbon Design System",
-  "version": "11.10.0-rc.0",
+  "version": "11.10.0",
   "license": "Apache-2.0",
@@ -40,6 +40,7 @@ "main": "lib/index.js",
   "dependencies": {
-    "@carbon/grid": "^11.7.0-rc.0"
+    "@carbon/grid": "^11.7.0",
+    "@carbon/layout": "^11.7.0"
   },
   "devDependencies": {
-    "@carbon/cli": "^11.5.0-rc.0",
+    "@carbon/cli": "^11.5.0",
     "@carbon/test-utils": "^10.26.0",
@@ -56,3 +57,3 @@ "change-case": "^4.1.1",
   },
-  "gitHead": "06ebb59650784ee0bdb602a521e82383472f0487"
+  "gitHead": "dcf802a75caf0201ac831826f611d24dbe508859"
 }

umd/index.js

 (function (global, factory) {
-  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports) :
-  typeof define === 'function' && define.amd ? define(['exports'], factory) :
-  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.CarbonType = {}));
-})(this, (function (exports) { 'use strict';
+  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@carbon/layout')) :
+  typeof define === 'function' && define.amd ? define(['exports', '@carbon/layout'], factory) :
+  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.CarbonType = {}, global.CarbonLayout));
+})(this, (function (exports, layout) { 'use strict';
 
@@ -101,78 +101,5 @@ /**
    */
-  /**
-   * Copyright IBM Corp. 2018, 2018
-   *
-   * This source code is licensed under the Apache-2.0 license found in the
-   * LICENSE file in the root directory of this source tree.
-   */
-  // Default, Use with em() and rem() functions
-
-  var baseFontSize = 16;
-  /**
-   * Convert a given px unit to a rem unit
-   * @param {number} px
-   * @returns {string}
-   */
-
-  function rem(px) {
-    return "".concat(px / baseFontSize, "rem");
-  }
-  /**
-   * Convert a given px unit to its string representation
-   * @param {number} value - number of pixels
-   * @returns {string}
-   */
-
-
-  function px(value) {
-    return "".concat(value, "px");
-  } // Breakpoint
-  // Initial map of our breakpoints and their values
-
-
-  var breakpoints = {
-    sm: {
-      width: rem(320),
-      columns: 4,
-      margin: '0'
-    },
-    md: {
-      width: rem(672),
-      columns: 8,
-      margin: rem(16)
-    },
-    lg: {
-      width: rem(1056),
-      columns: 16,
-      margin: rem(16)
-    },
-    xlg: {
-      width: rem(1312),
-      columns: 16,
-      margin: rem(16)
-    },
-    max: {
-      width: rem(1584),
-      columns: 16,
-      margin: rem(24)
-    }
-  };
-
-  function breakpointUp(name) {
-    return "@media (min-width: ".concat(breakpoints[name].width, ")");
-  }
-
-  function breakpoint() {
-    return breakpointUp.apply(void 0, arguments);
-  } // Mini-unit
-
-  /**
-   * Copyright IBM Corp. 2018, 2018
-   *
-   * This source code is licensed under the Apache-2.0 license found in the
-   * LICENSE file in the root directory of this source tree.
-   */
   var reset = {
     html: {
-      fontSize: px(baseFontSize)
+      fontSize: layout.px(layout.baseFontSize)
     },
@@ -311,49 +238,49 @@ body: {
   var caption01$1 = {
-    fontSize: rem(scale[0]),
+    fontSize: layout.rem(scale[0]),
     fontWeight: fontWeights.regular,
     lineHeight: 1.33333,
-    letterSpacing: px(0.32)
+    letterSpacing: layout.px(0.32)
   };
   var caption02$1 = {
-    fontSize: rem(scale[1]),
+    fontSize: layout.rem(scale[1]),
     fontWeight: fontWeights.regular,
     lineHeight: 1.28572,
-    letterSpacing: px(0.32)
+    letterSpacing: layout.px(0.32)
   };
   var label01$1 = {
-    fontSize: rem(scale[0]),
+    fontSize: layout.rem(scale[0]),
     fontWeight: fontWeights.regular,
     lineHeight: 1.33333,
-    letterSpacing: px(0.32)
+    letterSpacing: layout.px(0.32)
   };
   var label02$1 = {
-    fontSize: rem(scale[1]),
+    fontSize: layout.rem(scale[1]),
     fontWeight: fontWeights.regular,
     lineHeight: 1.28572,
-    letterSpacing: px(0.16)
+    letterSpacing: layout.px(0.16)
   };
   var helperText01$1 = {
-    fontSize: rem(scale[0]),
+    fontSize: layout.rem(scale[0]),
     lineHeight: 1.33333,
-    letterSpacing: px(0.32)
+    letterSpacing: layout.px(0.32)
   };
   var helperText02$1 = {
-    fontSize: rem(scale[1]),
+    fontSize: layout.rem(scale[1]),
     lineHeight: 1.28572,
-    letterSpacing: px(0.16)
+    letterSpacing: layout.px(0.16)
   };
   var bodyShort01$1 = {
-    fontSize: rem(scale[1]),
+    fontSize: layout.rem(scale[1]),
     fontWeight: fontWeights.regular,
     lineHeight: 1.28572,
-    letterSpacing: px(0.16)
+    letterSpacing: layout.px(0.16)
   };
   var bodyLong01$1 = {
-    fontSize: rem(scale[1]),
+    fontSize: layout.rem(scale[1]),
     fontWeight: fontWeights.regular,
     lineHeight: 1.42857,
-    letterSpacing: px(0.16)
+    letterSpacing: layout.px(0.16)
   };
   var bodyShort02$1 = {
-    fontSize: rem(scale[2]),
+    fontSize: layout.rem(scale[2]),
     fontWeight: fontWeights.regular,
@@ -364,3 +291,3 @@ lineHeight: 1.375,
   var bodyLong02$1 = {
-    fontSize: rem(scale[2]),
+    fontSize: layout.rem(scale[2]),
     fontWeight: fontWeights.regular,
@@ -372,28 +299,28 @@ lineHeight: 1.5,
     fontFamily: fontFamilies.mono,
-    fontSize: rem(scale[0]),
+    fontSize: layout.rem(scale[0]),
     fontWeight: fontWeights.regular,
     lineHeight: 1.33333,
-    letterSpacing: px(0.32)
+    letterSpacing: layout.px(0.32)
   };
   var code02$1 = {
     fontFamily: fontFamilies.mono,
-    fontSize: rem(scale[1]),
+    fontSize: layout.rem(scale[1]),
     fontWeight: fontWeights.regular,
     lineHeight: 1.42857,
-    letterSpacing: px(0.32)
+    letterSpacing: layout.px(0.32)
   };
   var heading01$1 = {
-    fontSize: rem(scale[1]),
+    fontSize: layout.rem(scale[1]),
     fontWeight: fontWeights.semibold,
     lineHeight: 1.42857,
-    letterSpacing: px(0.16)
+    letterSpacing: layout.px(0.16)
   };
   var productiveHeading01$1 = {
-    fontSize: rem(scale[1]),
+    fontSize: layout.rem(scale[1]),
     fontWeight: fontWeights.semibold,
     lineHeight: 1.28572,
-    letterSpacing: px(0.16)
+    letterSpacing: layout.px(0.16)
   };
   var heading02$1 = {
-    fontSize: rem(scale[2]),
+    fontSize: layout.rem(scale[2]),
     fontWeight: fontWeights.semibold,
@@ -404,3 +331,3 @@ lineHeight: 1.5,
   var productiveHeading02$1 = {
-    fontSize: rem(scale[2]),
+    fontSize: layout.rem(scale[2]),
     fontWeight: fontWeights.semibold,
@@ -411,3 +338,3 @@ lineHeight: 1.375,
   var productiveHeading03$1 = {
-    fontSize: rem(scale[4]),
+    fontSize: layout.rem(scale[4]),
     fontWeight: fontWeights.regular,
@@ -418,3 +345,3 @@ lineHeight: 1.4,
   var productiveHeading04$1 = {
-    fontSize: rem(scale[6]),
+    fontSize: layout.rem(scale[6]),
     fontWeight: fontWeights.regular,
@@ -425,3 +352,3 @@ lineHeight: 1.28572,
   var productiveHeading05$1 = {
-    fontSize: rem(scale[7]),
+    fontSize: layout.rem(scale[7]),
     fontWeight: fontWeights.light,
@@ -432,3 +359,3 @@ lineHeight: 1.25,
   var productiveHeading06$1 = {
-    fontSize: rem(scale[9]),
+    fontSize: layout.rem(scale[9]),
     fontWeight: fontWeights.light,
@@ -439,3 +366,3 @@ lineHeight: 1.199,
   var productiveHeading07$1 = {
-    fontSize: rem(scale[11]),
+    fontSize: layout.rem(scale[11]),
     fontWeight: fontWeights.light,
@@ -452,3 +379,3 @@ lineHeight: 1.199,
   var expressiveHeading03$1 = {
-    fontSize: rem(scale[4]),
+    fontSize: layout.rem(scale[4]),
     fontWeight: fontWeights.regular,
@@ -459,7 +386,7 @@ lineHeight: 1.4,
       xlg: {
-        fontSize: rem(scale[4]),
+        fontSize: layout.rem(scale[4]),
         lineHeight: 1.25
       },
       max: {
-        fontSize: rem(scale[5]),
+        fontSize: layout.rem(scale[5]),
         lineHeight: 1.334
@@ -470,3 +397,3 @@ }
   var expressiveHeading04$1 = {
-    fontSize: rem(scale[6]),
+    fontSize: layout.rem(scale[6]),
     fontWeight: fontWeights.regular,
@@ -477,3 +404,3 @@ lineHeight: 1.28572,
       xlg: {
-        fontSize: rem(scale[7]),
+        fontSize: layout.rem(scale[7]),
         fontWeight: fontWeights.light,
@@ -483,3 +410,3 @@ lineHeight: 1.25
       max: {
-        fontSize: rem(scale[7]),
+        fontSize: layout.rem(scale[7]),
         fontWeight: fontWeights.light
@@ -490,3 +417,3 @@ }
   var expressiveHeading05$1 = {
-    fontSize: rem(scale[7]),
+    fontSize: layout.rem(scale[7]),
     fontWeight: fontWeights.light,
@@ -497,3 +424,3 @@ lineHeight: 1.25,
       md: {
-        fontSize: rem(scale[8]),
+        fontSize: layout.rem(scale[8]),
         lineHeight: 1.22,
@@ -503,3 +430,3 @@ letterSpacing: 0
       lg: {
-        fontSize: rem(scale[9]),
+        fontSize: layout.rem(scale[9]),
         lineHeight: 1.19,
@@ -509,3 +436,3 @@ letterSpacing: 0
       xlg: {
-        fontSize: rem(scale[10]),
+        fontSize: layout.rem(scale[10]),
         lineHeight: 1.17,
@@ -515,3 +442,3 @@ letterSpacing: 0
       max: {
-        fontSize: rem(scale[12]),
+        fontSize: layout.rem(scale[12]),
         letterSpacing: 0
@@ -522,3 +449,3 @@ }
   var expressiveHeading06$1 = {
-    fontSize: rem(scale[7]),
+    fontSize: layout.rem(scale[7]),
     fontWeight: fontWeights.semibold,
@@ -529,3 +456,3 @@ lineHeight: 1.25,
       md: {
-        fontSize: rem(scale[8]),
+        fontSize: layout.rem(scale[8]),
         fontWeight: fontWeights.semibold,
@@ -536,3 +463,3 @@ lineHeight: 1.22,
       lg: {
-        fontSize: rem(scale[9]),
+        fontSize: layout.rem(scale[9]),
         fontWeight: fontWeights.semibold,
@@ -543,3 +470,3 @@ lineHeight: 1.19,
       xlg: {
-        fontSize: rem(scale[10]),
+        fontSize: layout.rem(scale[10]),
         fontWeight: fontWeights.semibold,
@@ -550,3 +477,3 @@ lineHeight: 1.17,
       max: {
-        fontSize: rem(scale[12]),
+        fontSize: layout.rem(scale[12]),
         fontWeight: fontWeights.semibold,
@@ -558,3 +485,3 @@ letterSpacing: 0
   var expressiveParagraph01$1 = {
-    fontSize: rem(scale[5]),
+    fontSize: layout.rem(scale[5]),
     fontWeight: fontWeights.light,
@@ -565,7 +492,7 @@ lineHeight: 1.334,
       lg: {
-        fontSize: rem(scale[6]),
+        fontSize: layout.rem(scale[6]),
         lineHeight: 1.28572
       },
       max: {
-        fontSize: rem(scale[7]),
+        fontSize: layout.rem(scale[7]),
         lineHeight: 1.25
@@ -577,3 +504,3 @@ }
     fontFamily: fontFamilies.serif,
-    fontSize: rem(scale[4]),
+    fontSize: layout.rem(scale[4]),
     fontWeight: fontWeights.regular,
@@ -584,3 +511,3 @@ lineHeight: 1.3,
       md: {
-        fontSize: rem(scale[4]),
+        fontSize: layout.rem(scale[4]),
         fontWeight: fontWeights.regular,
@@ -590,3 +517,3 @@ letterSpacing: 0
       lg: {
-        fontSize: rem(scale[5]),
+        fontSize: layout.rem(scale[5]),
         fontWeight: fontWeights.regular,
@@ -597,3 +524,3 @@ lineHeight: 1.334,
       xlg: {
-        fontSize: rem(scale[6]),
+        fontSize: layout.rem(scale[6]),
         fontWeight: fontWeights.regular,
@@ -604,3 +531,3 @@ lineHeight: 1.28572,
       max: {
-        fontSize: rem(scale[7]),
+        fontSize: layout.rem(scale[7]),
         fontWeight: fontWeights.regular,
@@ -614,3 +541,3 @@ lineHeight: 1.25,
     fontFamily: fontFamilies.serif,
-    fontSize: rem(scale[7]),
+    fontSize: layout.rem(scale[7]),
     fontWeight: fontWeights.light,
@@ -621,15 +548,15 @@ lineHeight: 1.25,
       md: {
-        fontSize: rem(scale[8]),
+        fontSize: layout.rem(scale[8]),
         lineHeight: 1.22
       },
       lg: {
-        fontSize: rem(scale[9]),
+        fontSize: layout.rem(scale[9]),
         lineHeight: 1.19
       },
       xlg: {
-        fontSize: rem(scale[10]),
+        fontSize: layout.rem(scale[10]),
         lineHeight: 1.17
       },
       max: {
-        fontSize: rem(scale[12])
+        fontSize: layout.rem(scale[12])
       }
@@ -639,3 +566,3 @@ }
   var display01$1 = {
-    fontSize: rem(scale[9]),
+    fontSize: layout.rem(scale[9]),
     fontWeight: fontWeights.light,
@@ -646,13 +573,13 @@ lineHeight: 1.19,
       md: {
-        fontSize: rem(scale[9])
+        fontSize: layout.rem(scale[9])
       },
       lg: {
-        fontSize: rem(scale[11])
+        fontSize: layout.rem(scale[11])
       },
       xlg: {
-        fontSize: rem(scale[12]),
+        fontSize: layout.rem(scale[12]),
         lineHeight: 1.17
       },
       max: {
-        fontSize: rem(scale[14]),
+        fontSize: layout.rem(scale[14]),
         lineHeight: 1.13
@@ -663,3 +590,3 @@ }
   var display02$1 = {
-    fontSize: rem(scale[9]),
+    fontSize: layout.rem(scale[9]),
     fontWeight: fontWeights.semibold,
@@ -670,13 +597,13 @@ lineHeight: 1.19,
       md: {
-        fontSize: rem(scale[9])
+        fontSize: layout.rem(scale[9])
       },
       lg: {
-        fontSize: rem(scale[11])
+        fontSize: layout.rem(scale[11])
       },
       xlg: {
-        fontSize: rem(scale[12]),
+        fontSize: layout.rem(scale[12]),
         lineHeight: 1.16
       },
       max: {
-        fontSize: rem(scale[14]),
+        fontSize: layout.rem(scale[14]),
         lineHeight: 1.13
@@ -687,3 +614,3 @@ }
   var display03$1 = {
-    fontSize: rem(scale[9]),
+    fontSize: layout.rem(scale[9]),
     fontWeight: fontWeights.light,
@@ -694,18 +621,18 @@ lineHeight: 1.19,
       md: {
-        fontSize: rem(scale[11]),
+        fontSize: layout.rem(scale[11]),
         lineHeight: 1.18
       },
       lg: {
-        fontSize: rem(scale[12]),
+        fontSize: layout.rem(scale[12]),
         lineHeight: 1.16,
-        letterSpacing: px(-0.64)
+        letterSpacing: layout.px(-0.64)
       },
       xlg: {
-        fontSize: rem(scale[14]),
+        fontSize: layout.rem(scale[14]),
         lineHeight: 1.13
       },
       max: {
-        fontSize: rem(scale[15]),
+        fontSize: layout.rem(scale[15]),
         lineHeight: 1.11,
-        letterSpacing: px(-0.96)
+        letterSpacing: layout.px(-0.96)
       }
@@ -715,3 +642,3 @@ }
   var display04$1 = {
-    fontSize: rem(scale[9]),
+    fontSize: layout.rem(scale[9]),
     fontWeight: fontWeights.light,
@@ -722,19 +649,19 @@ lineHeight: 1.19,
       md: {
-        fontSize: rem(scale[13]),
+        fontSize: layout.rem(scale[13]),
         lineHeight: 1.15
       },
       lg: {
-        fontSize: rem(scale[16]),
+        fontSize: layout.rem(scale[16]),
         lineHeight: 1.11,
-        letterSpacing: px(-0.64)
+        letterSpacing: layout.px(-0.64)
       },
       xlg: {
-        fontSize: rem(scale[19]),
+        fontSize: layout.rem(scale[19]),
         lineHeight: 1.07,
-        letterSpacing: px(-0.64)
+        letterSpacing: layout.px(-0.64)
       },
       max: {
-        fontSize: rem(scale[22]),
+        fontSize: layout.rem(scale[22]),
         lineHeight: 1.05,
-        letterSpacing: px(-0.96)
+        letterSpacing: layout.px(-0.96)
       }
@@ -747,12 +674,12 @@ }
   var legal01$1 = {
-    fontSize: rem(scale[0]),
+    fontSize: layout.rem(scale[0]),
     fontWeight: fontWeights.regular,
     lineHeight: 1.33333,
-    letterSpacing: px(0.32)
+    letterSpacing: layout.px(0.32)
   };
   var legal02$1 = {
-    fontSize: rem(scale[1]),
+    fontSize: layout.rem(scale[1]),
     fontWeight: fontWeights.regular,
     lineHeight: 1.28572,
-    letterSpacing: px(0.16)
+    letterSpacing: layout.px(0.16)
   }; // Body styles
@@ -849,3 +776,3 @@
   var _excluded = ["breakpoints"];
-  var breakpointNames = Object.keys(breakpoints);
+  var breakpointNames = Object.keys(layout.breakpoints);
 
@@ -872,3 +799,3 @@ function next(name) {
     fluidBreakpointNames.forEach(function (name) {
-      styles[breakpoint(name)] = _objectSpread2(_objectSpread2({}, fluidBreakpoints[name]), {}, {
+      styles[layout.breakpoint(name)] = _objectSpread2(_objectSpread2({}, fluidBreakpoints[name]), {}, {
         fontSize: fluidTypeSize(styles, name, fluidBreakpoints)
@@ -881,3 +808,3 @@ });
   function fluidTypeSize(defaultStyles, fluidBreakpointName, fluidBreakpoints) {
-    var breakpoint = breakpoints[fluidBreakpointName];
+    var breakpoint = layout.breakpoints[fluidBreakpointName];
     var fluidBreakpoint = fluidBreakpointName === 'sm' ? defaultStyles : fluidBreakpoints[fluidBreakpointName];
@@ -906,3 +833,3 @@ var maxFontSize = defaultStyles.fontSize;
     if (nextFluidBreakpointName) {
-      var nextFluidBreakpoint = breakpoints[nextFluidBreakpointName];
+      var nextFluidBreakpoint = layout.breakpoints[nextFluidBreakpointName];
       maxFontSize = fluidBreakpoints[nextFluidBreakpointName].fontSize;
@@ -909,0 +836,0 @@ maxViewportWidth = nextFluidBreakpoint.width;

Fixed alerts

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Improved metrics

Number of low quality alerts

1

decreased by-50%

Worsened metrics

Total package byte prevSize

171778

decreased by-1.59%

Dependency count

2

increased by100%

Lines of code

3663

decreased by-4.93%

Dependency changes

• + Added@carbon/layout@^11.7.0

• Updated@carbon/grid@^11.7.0