@carbon/type - npm Package Compare versions

Comparing version 10.41.0 to 10.42.0-rc.0

es/index.js

@@ -1,3 +0,1 @@
-import { px, baseFontSize, rem, breakpoint, breakpoints } from '@carbon/layout';
-
 /**
@@ -97,2 +95,75 @@ * 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 = {
@@ -99,0 +170,0 @@ html: {

lib/index.js

@@ -5,4 +5,2 @@ 'use strict';
 
-var layout = require('@carbon/layout');
-
 /**
@@ -102,5 +100,78 @@ * 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: layout.px(layout.baseFontSize)
+    fontSize: px(baseFontSize)
   },
@@ -239,49 +310,49 @@ body: {
 var caption01$1 = {
-  fontSize: layout.rem(scale[0]),
+  fontSize: rem(scale[0]),
   fontWeight: fontWeights.regular,
   lineHeight: 1.33333,
-  letterSpacing: layout.px(0.32)
+  letterSpacing: px(0.32)
 };
 var caption02$1 = {
-  fontSize: layout.rem(scale[1]),
+  fontSize: rem(scale[1]),
   fontWeight: fontWeights.regular,
   lineHeight: 1.28572,
-  letterSpacing: layout.px(0.32)
+  letterSpacing: px(0.32)
 };
 var label01$1 = {
-  fontSize: layout.rem(scale[0]),
+  fontSize: rem(scale[0]),
   fontWeight: fontWeights.regular,
   lineHeight: 1.33333,
-  letterSpacing: layout.px(0.32)
+  letterSpacing: px(0.32)
 };
 var label02$1 = {
-  fontSize: layout.rem(scale[1]),
+  fontSize: rem(scale[1]),
   fontWeight: fontWeights.regular,
   lineHeight: 1.28572,
-  letterSpacing: layout.px(0.16)
+  letterSpacing: px(0.16)
 };
 var helperText01$1 = {
-  fontSize: layout.rem(scale[0]),
+  fontSize: rem(scale[0]),
   lineHeight: 1.33333,
-  letterSpacing: layout.px(0.32)
+  letterSpacing: px(0.32)
 };
 var helperText02$1 = {
-  fontSize: layout.rem(scale[1]),
+  fontSize: rem(scale[1]),
   lineHeight: 1.28572,
-  letterSpacing: layout.px(0.16)
+  letterSpacing: px(0.16)
 };
 var bodyShort01$1 = {
-  fontSize: layout.rem(scale[1]),
+  fontSize: rem(scale[1]),
   fontWeight: fontWeights.regular,
   lineHeight: 1.28572,
-  letterSpacing: layout.px(0.16)
+  letterSpacing: px(0.16)
 };
 var bodyLong01$1 = {
-  fontSize: layout.rem(scale[1]),
+  fontSize: rem(scale[1]),
   fontWeight: fontWeights.regular,
   lineHeight: 1.42857,
-  letterSpacing: layout.px(0.16)
+  letterSpacing: px(0.16)
 };
 var bodyShort02$1 = {
-  fontSize: layout.rem(scale[2]),
+  fontSize: rem(scale[2]),
   fontWeight: fontWeights.regular,
@@ -292,3 +363,3 @@ lineHeight: 1.375,
 var bodyLong02$1 = {
-  fontSize: layout.rem(scale[2]),
+  fontSize: rem(scale[2]),
   fontWeight: fontWeights.regular,
@@ -300,28 +371,28 @@ lineHeight: 1.5,
   fontFamily: fontFamilies.mono,
-  fontSize: layout.rem(scale[0]),
+  fontSize: rem(scale[0]),
   fontWeight: fontWeights.regular,
   lineHeight: 1.33333,
-  letterSpacing: layout.px(0.32)
+  letterSpacing: px(0.32)
 };
 var code02$1 = {
   fontFamily: fontFamilies.mono,
-  fontSize: layout.rem(scale[1]),
+  fontSize: rem(scale[1]),
   fontWeight: fontWeights.regular,
   lineHeight: 1.42857,
-  letterSpacing: layout.px(0.32)
+  letterSpacing: px(0.32)
 };
 var heading01$1 = {
-  fontSize: layout.rem(scale[1]),
+  fontSize: rem(scale[1]),
   fontWeight: fontWeights.semibold,
   lineHeight: 1.42857,
-  letterSpacing: layout.px(0.16)
+  letterSpacing: px(0.16)
 };
 var productiveHeading01$1 = {
-  fontSize: layout.rem(scale[1]),
+  fontSize: rem(scale[1]),
   fontWeight: fontWeights.semibold,
   lineHeight: 1.28572,
-  letterSpacing: layout.px(0.16)
+  letterSpacing: px(0.16)
 };
 var heading02$1 = {
-  fontSize: layout.rem(scale[2]),
+  fontSize: rem(scale[2]),
   fontWeight: fontWeights.semibold,
@@ -332,3 +403,3 @@ lineHeight: 1.5,
 var productiveHeading02$1 = {
-  fontSize: layout.rem(scale[2]),
+  fontSize: rem(scale[2]),
   fontWeight: fontWeights.semibold,
@@ -339,3 +410,3 @@ lineHeight: 1.375,
 var productiveHeading03$1 = {
-  fontSize: layout.rem(scale[4]),
+  fontSize: rem(scale[4]),
   fontWeight: fontWeights.regular,
@@ -346,3 +417,3 @@ lineHeight: 1.4,
 var productiveHeading04$1 = {
-  fontSize: layout.rem(scale[6]),
+  fontSize: rem(scale[6]),
   fontWeight: fontWeights.regular,
@@ -353,3 +424,3 @@ lineHeight: 1.28572,
 var productiveHeading05$1 = {
-  fontSize: layout.rem(scale[7]),
+  fontSize: rem(scale[7]),
   fontWeight: fontWeights.regular,
@@ -360,3 +431,3 @@ lineHeight: 1.25,
 var productiveHeading06$1 = {
-  fontSize: layout.rem(scale[9]),
+  fontSize: rem(scale[9]),
   fontWeight: fontWeights.light,
@@ -367,3 +438,3 @@ lineHeight: 1.199,
 var productiveHeading07$1 = {
-  fontSize: layout.rem(scale[11]),
+  fontSize: rem(scale[11]),
   fontWeight: fontWeights.light,
@@ -380,3 +451,3 @@ lineHeight: 1.199,
 var expressiveHeading03$1 = {
-  fontSize: layout.rem(scale[4]),
+  fontSize: rem(scale[4]),
   fontWeight: fontWeights.regular,
@@ -387,7 +458,7 @@ lineHeight: 1.4,
     xlg: {
-      fontSize: layout.rem(scale[4]),
+      fontSize: rem(scale[4]),
       lineHeight: 1.25
     },
     max: {
-      fontSize: layout.rem(scale[5]),
+      fontSize: rem(scale[5]),
       lineHeight: 1.334
@@ -398,3 +469,3 @@ }
 var expressiveHeading04$1 = {
-  fontSize: layout.rem(scale[6]),
+  fontSize: rem(scale[6]),
   fontWeight: fontWeights.regular,
@@ -405,7 +476,7 @@ lineHeight: 1.28572,
     xlg: {
-      fontSize: layout.rem(scale[6]),
+      fontSize: rem(scale[6]),
       lineHeight: 1.25
     },
     max: {
-      fontSize: layout.rem(scale[7])
+      fontSize: rem(scale[7])
     }
@@ -415,3 +486,3 @@ }
 var expressiveHeading05$1 = {
-  fontSize: layout.rem(scale[7]),
+  fontSize: rem(scale[7]),
   fontWeight: fontWeights.regular,
@@ -422,3 +493,3 @@ lineHeight: 1.25,
     md: {
-      fontSize: layout.rem(scale[8]),
+      fontSize: rem(scale[8]),
       fontWeight: fontWeights.light,
@@ -429,3 +500,3 @@ lineHeight: 1.22,
     lg: {
-      fontSize: layout.rem(scale[9]),
+      fontSize: rem(scale[9]),
       fontWeight: fontWeights.light,
@@ -436,3 +507,3 @@ lineHeight: 1.19,
     xlg: {
-      fontSize: layout.rem(scale[10]),
+      fontSize: rem(scale[10]),
       fontWeight: fontWeights.light,
@@ -443,3 +514,3 @@ lineHeight: 1.17,
     max: {
-      fontSize: layout.rem(scale[12]),
+      fontSize: rem(scale[12]),
       fontWeight: fontWeights.light,
@@ -451,3 +522,3 @@ letterSpacing: 0
 var expressiveHeading06$1 = {
-  fontSize: layout.rem(scale[7]),
+  fontSize: rem(scale[7]),
   fontWeight: fontWeights.semibold,
@@ -458,3 +529,3 @@ lineHeight: 1.25,
     md: {
-      fontSize: layout.rem(scale[8]),
+      fontSize: rem(scale[8]),
       fontWeight: fontWeights.semibold,
@@ -465,3 +536,3 @@ lineHeight: 1.22,
     lg: {
-      fontSize: layout.rem(scale[9]),
+      fontSize: rem(scale[9]),
       fontWeight: fontWeights.semibold,
@@ -472,3 +543,3 @@ lineHeight: 1.19,
     xlg: {
-      fontSize: layout.rem(scale[10]),
+      fontSize: rem(scale[10]),
       fontWeight: fontWeights.semibold,
@@ -479,3 +550,3 @@ lineHeight: 1.17,
     max: {
-      fontSize: layout.rem(scale[12]),
+      fontSize: rem(scale[12]),
       fontWeight: fontWeights.semibold,
@@ -487,3 +558,3 @@ letterSpacing: 0
 var expressiveParagraph01$1 = {
-  fontSize: layout.rem(scale[5]),
+  fontSize: rem(scale[5]),
   fontWeight: fontWeights.light,
@@ -494,7 +565,7 @@ lineHeight: 1.334,
     lg: {
-      fontSize: layout.rem(scale[6]),
+      fontSize: rem(scale[6]),
       lineHeight: 1.28572
     },
     max: {
-      fontSize: layout.rem(scale[7]),
+      fontSize: rem(scale[7]),
       lineHeight: 1.25
@@ -506,3 +577,3 @@ }
   fontFamily: fontFamilies.serif,
-  fontSize: layout.rem(scale[4]),
+  fontSize: rem(scale[4]),
   fontWeight: fontWeights.regular,
@@ -513,3 +584,3 @@ lineHeight: 1.3,
     md: {
-      fontSize: layout.rem(scale[4]),
+      fontSize: rem(scale[4]),
       fontWeight: fontWeights.regular,
@@ -519,3 +590,3 @@ letterSpacing: 0
     lg: {
-      fontSize: layout.rem(scale[5]),
+      fontSize: rem(scale[5]),
       fontWeight: fontWeights.regular,
@@ -526,3 +597,3 @@ lineHeight: 1.334,
     xlg: {
-      fontSize: layout.rem(scale[6]),
+      fontSize: rem(scale[6]),
       fontWeight: fontWeights.regular,
@@ -533,3 +604,3 @@ lineHeight: 1.28572,
     max: {
-      fontSize: layout.rem(scale[7]),
+      fontSize: rem(scale[7]),
       fontWeight: fontWeights.regular,
@@ -543,3 +614,3 @@ lineHeight: 1.25,
   fontFamily: fontFamilies.serif,
-  fontSize: layout.rem(scale[7]),
+  fontSize: rem(scale[7]),
   fontWeight: fontWeights.light,
@@ -550,15 +621,15 @@ lineHeight: 1.25,
     md: {
-      fontSize: layout.rem(scale[8]),
+      fontSize: rem(scale[8]),
       lineHeight: 1.22
     },
     lg: {
-      fontSize: layout.rem(scale[9]),
+      fontSize: rem(scale[9]),
       lineHeight: 1.19
     },
     xlg: {
-      fontSize: layout.rem(scale[10]),
+      fontSize: rem(scale[10]),
       lineHeight: 1.17
     },
     max: {
-      fontSize: layout.rem(scale[12])
+      fontSize: rem(scale[12])
     }
@@ -568,3 +639,3 @@ }
 var display01$1 = {
-  fontSize: layout.rem(scale[9]),
+  fontSize: rem(scale[9]),
   fontWeight: fontWeights.light,
@@ -575,13 +646,13 @@ lineHeight: 1.19,
     md: {
-      fontSize: layout.rem(scale[9])
+      fontSize: rem(scale[9])
     },
     lg: {
-      fontSize: layout.rem(scale[11])
+      fontSize: rem(scale[11])
     },
     xlg: {
-      fontSize: layout.rem(scale[12]),
+      fontSize: rem(scale[12]),
       lineHeight: 1.17
     },
     max: {
-      fontSize: layout.rem(scale[14]),
+      fontSize: rem(scale[14]),
       lineHeight: 1.13
@@ -592,3 +663,3 @@ }
 var display02$1 = {
-  fontSize: layout.rem(scale[9]),
+  fontSize: rem(scale[9]),
   fontWeight: fontWeights.semibold,
@@ -599,13 +670,13 @@ lineHeight: 1.19,
     md: {
-      fontSize: layout.rem(scale[9])
+      fontSize: rem(scale[9])
     },
     lg: {
-      fontSize: layout.rem(scale[11])
+      fontSize: rem(scale[11])
     },
     xlg: {
-      fontSize: layout.rem(scale[12]),
+      fontSize: rem(scale[12]),
       lineHeight: 1.16
     },
     max: {
-      fontSize: layout.rem(scale[14]),
+      fontSize: rem(scale[14]),
       lineHeight: 1.13
@@ -616,3 +687,3 @@ }
 var display03$1 = {
-  fontSize: layout.rem(scale[9]),
+  fontSize: rem(scale[9]),
   fontWeight: fontWeights.light,
@@ -623,18 +694,18 @@ lineHeight: 1.19,
     md: {
-      fontSize: layout.rem(scale[13]),
+      fontSize: rem(scale[13]),
       lineHeight: 1.15
     },
     lg: {
-      fontSize: layout.rem(scale[16]),
+      fontSize: rem(scale[16]),
       lineHeight: 1.11,
-      letterSpacing: layout.px(-0.64)
+      letterSpacing: px(-0.64)
     },
     xlg: {
-      fontSize: layout.rem(scale[19]),
+      fontSize: rem(scale[19]),
       lineHeight: 1.07
     },
     max: {
-      fontSize: layout.rem(scale[22]),
+      fontSize: rem(scale[22]),
       lineHeight: 1.05,
-      letterSpacing: layout.px(-0.96)
+      letterSpacing: px(-0.96)
     }
@@ -644,3 +715,3 @@ }
 var display04$1 = {
-  fontSize: layout.rem(scale[9]),
+  fontSize: rem(scale[9]),
   fontWeight: fontWeights.semibold,
@@ -651,19 +722,19 @@ lineHeight: 1.19,
     md: {
-      fontSize: layout.rem(scale[13]),
+      fontSize: rem(scale[13]),
       lineHeight: 1.15
     },
     lg: {
-      fontSize: layout.rem(scale[16]),
+      fontSize: rem(scale[16]),
       lineHeight: 1.11,
-      letterSpacing: layout.px(-0.64)
+      letterSpacing: px(-0.64)
     },
     xlg: {
-      fontSize: layout.rem(scale[19]),
+      fontSize: rem(scale[19]),
       lineHeight: 1.07,
-      letterSpacing: layout.px(-0.64)
+      letterSpacing: px(-0.64)
     },
     max: {
-      fontSize: layout.rem(scale[22]),
+      fontSize: rem(scale[22]),
       lineHeight: 1.05,
-      letterSpacing: layout.px(-0.96)
+      letterSpacing: px(-0.96)
     }
@@ -676,12 +747,12 @@ }
 var legal01$1 = {
-  fontSize: layout.rem(scale[0]),
+  fontSize: rem(scale[0]),
   fontWeight: fontWeights.regular,
   lineHeight: 1.33333,
-  letterSpacing: layout.px(0.32)
+  letterSpacing: px(0.32)
 };
 var legal02$1 = {
-  fontSize: layout.rem(scale[1]),
+  fontSize: rem(scale[1]),
   fontWeight: fontWeights.regular,
   lineHeight: 1.28572,
-  letterSpacing: layout.px(0.16)
+  letterSpacing: px(0.16)
 }; // Body styles
@@ -778,3 +849,3 @@
 var _excluded = ["breakpoints"];
-var breakpointNames = Object.keys(layout.breakpoints);
+var breakpointNames = Object.keys(breakpoints);
 
@@ -801,3 +872,3 @@ function next(name) {
   fluidBreakpointNames.forEach(function (name) {
-    styles[layout.breakpoint(name)] = _objectSpread2(_objectSpread2({}, fluidBreakpoints[name]), {}, {
+    styles[breakpoint(name)] = _objectSpread2(_objectSpread2({}, fluidBreakpoints[name]), {}, {
       fontSize: fluidTypeSize(styles, name, fluidBreakpoints)
@@ -810,3 +881,3 @@ });
 function fluidTypeSize(defaultStyles, fluidBreakpointName, fluidBreakpoints) {
-  var breakpoint = layout.breakpoints[fluidBreakpointName];
+  var breakpoint = breakpoints[fluidBreakpointName];
   var fluidBreakpoint = fluidBreakpointName === 'sm' ? defaultStyles : fluidBreakpoints[fluidBreakpointName];
@@ -835,3 +906,3 @@ var maxFontSize = defaultStyles.fontSize;
   if (nextFluidBreakpointName) {
-    var nextFluidBreakpoint = layout.breakpoints[nextFluidBreakpointName];
+    var nextFluidBreakpoint = breakpoints[nextFluidBreakpointName];
     maxFontSize = fluidBreakpoints[nextFluidBreakpointName].fontSize;
@@ -838,0 +909,0 @@ maxViewportWidth = nextFluidBreakpoint.width;

package.json

 {
   "name": "@carbon/type",
   "description": "Typography for digital and software products using the Carbon Design System",
-  "version": "10.41.0",
+  "version": "10.42.0-rc.0",
   "license": "Apache-2.0",
@@ -40,7 +40,7 @@ "main": "lib/index.js",
   "dependencies": {
-    "@carbon/import-once": "^10.6.0",
-    "@carbon/layout": "^10.36.0"
+    "@carbon/grid": "^10.42.0-rc.0",
+    "@carbon/import-once": "^10.7.0-rc.0"
   },
   "devDependencies": {
-    "@carbon/cli": "^10.33.0",
+    "@carbon/cli": "^10.34.0-rc.0",
     "@carbon/test-utils": "^10.21.0",
@@ -56,3 +56,3 @@ "change-case": "^4.1.1",
   },
-  "gitHead": "6a49764a3df2cc3e3b8fce6575f4853d1400e183"
+  "gitHead": "e41618f5aaa9a10ce93edd844f1a280dc29eaf50"
 }

umd/index.js

 (function (global, factory) {
-  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';
+  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';
 
@@ -101,5 +101,78 @@ /**
    */
+  /**
+   * 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: layout.px(layout.baseFontSize)
+      fontSize: px(baseFontSize)
     },
@@ -238,49 +311,49 @@ body: {
   var caption01$1 = {
-    fontSize: layout.rem(scale[0]),
+    fontSize: rem(scale[0]),
     fontWeight: fontWeights.regular,
     lineHeight: 1.33333,
-    letterSpacing: layout.px(0.32)
+    letterSpacing: px(0.32)
   };
   var caption02$1 = {
-    fontSize: layout.rem(scale[1]),
+    fontSize: rem(scale[1]),
     fontWeight: fontWeights.regular,
     lineHeight: 1.28572,
-    letterSpacing: layout.px(0.32)
+    letterSpacing: px(0.32)
   };
   var label01$1 = {
-    fontSize: layout.rem(scale[0]),
+    fontSize: rem(scale[0]),
     fontWeight: fontWeights.regular,
     lineHeight: 1.33333,
-    letterSpacing: layout.px(0.32)
+    letterSpacing: px(0.32)
   };
   var label02$1 = {
-    fontSize: layout.rem(scale[1]),
+    fontSize: rem(scale[1]),
     fontWeight: fontWeights.regular,
     lineHeight: 1.28572,
-    letterSpacing: layout.px(0.16)
+    letterSpacing: px(0.16)
   };
   var helperText01$1 = {
-    fontSize: layout.rem(scale[0]),
+    fontSize: rem(scale[0]),
     lineHeight: 1.33333,
-    letterSpacing: layout.px(0.32)
+    letterSpacing: px(0.32)
   };
   var helperText02$1 = {
-    fontSize: layout.rem(scale[1]),
+    fontSize: rem(scale[1]),
     lineHeight: 1.28572,
-    letterSpacing: layout.px(0.16)
+    letterSpacing: px(0.16)
   };
   var bodyShort01$1 = {
-    fontSize: layout.rem(scale[1]),
+    fontSize: rem(scale[1]),
     fontWeight: fontWeights.regular,
     lineHeight: 1.28572,
-    letterSpacing: layout.px(0.16)
+    letterSpacing: px(0.16)
   };
   var bodyLong01$1 = {
-    fontSize: layout.rem(scale[1]),
+    fontSize: rem(scale[1]),
     fontWeight: fontWeights.regular,
     lineHeight: 1.42857,
-    letterSpacing: layout.px(0.16)
+    letterSpacing: px(0.16)
   };
   var bodyShort02$1 = {
-    fontSize: layout.rem(scale[2]),
+    fontSize: rem(scale[2]),
     fontWeight: fontWeights.regular,
@@ -291,3 +364,3 @@ lineHeight: 1.375,
   var bodyLong02$1 = {
-    fontSize: layout.rem(scale[2]),
+    fontSize: rem(scale[2]),
     fontWeight: fontWeights.regular,
@@ -299,28 +372,28 @@ lineHeight: 1.5,
     fontFamily: fontFamilies.mono,
-    fontSize: layout.rem(scale[0]),
+    fontSize: rem(scale[0]),
     fontWeight: fontWeights.regular,
     lineHeight: 1.33333,
-    letterSpacing: layout.px(0.32)
+    letterSpacing: px(0.32)
   };
   var code02$1 = {
     fontFamily: fontFamilies.mono,
-    fontSize: layout.rem(scale[1]),
+    fontSize: rem(scale[1]),
     fontWeight: fontWeights.regular,
     lineHeight: 1.42857,
-    letterSpacing: layout.px(0.32)
+    letterSpacing: px(0.32)
   };
   var heading01$1 = {
-    fontSize: layout.rem(scale[1]),
+    fontSize: rem(scale[1]),
     fontWeight: fontWeights.semibold,
     lineHeight: 1.42857,
-    letterSpacing: layout.px(0.16)
+    letterSpacing: px(0.16)
   };
   var productiveHeading01$1 = {
-    fontSize: layout.rem(scale[1]),
+    fontSize: rem(scale[1]),
     fontWeight: fontWeights.semibold,
     lineHeight: 1.28572,
-    letterSpacing: layout.px(0.16)
+    letterSpacing: px(0.16)
   };
   var heading02$1 = {
-    fontSize: layout.rem(scale[2]),
+    fontSize: rem(scale[2]),
     fontWeight: fontWeights.semibold,
@@ -331,3 +404,3 @@ lineHeight: 1.5,
   var productiveHeading02$1 = {
-    fontSize: layout.rem(scale[2]),
+    fontSize: rem(scale[2]),
     fontWeight: fontWeights.semibold,
@@ -338,3 +411,3 @@ lineHeight: 1.375,
   var productiveHeading03$1 = {
-    fontSize: layout.rem(scale[4]),
+    fontSize: rem(scale[4]),
     fontWeight: fontWeights.regular,
@@ -345,3 +418,3 @@ lineHeight: 1.4,
   var productiveHeading04$1 = {
-    fontSize: layout.rem(scale[6]),
+    fontSize: rem(scale[6]),
     fontWeight: fontWeights.regular,
@@ -352,3 +425,3 @@ lineHeight: 1.28572,
   var productiveHeading05$1 = {
-    fontSize: layout.rem(scale[7]),
+    fontSize: rem(scale[7]),
     fontWeight: fontWeights.regular,
@@ -359,3 +432,3 @@ lineHeight: 1.25,
   var productiveHeading06$1 = {
-    fontSize: layout.rem(scale[9]),
+    fontSize: rem(scale[9]),
     fontWeight: fontWeights.light,
@@ -366,3 +439,3 @@ lineHeight: 1.199,
   var productiveHeading07$1 = {
-    fontSize: layout.rem(scale[11]),
+    fontSize: rem(scale[11]),
     fontWeight: fontWeights.light,
@@ -379,3 +452,3 @@ lineHeight: 1.199,
   var expressiveHeading03$1 = {
-    fontSize: layout.rem(scale[4]),
+    fontSize: rem(scale[4]),
     fontWeight: fontWeights.regular,
@@ -386,7 +459,7 @@ lineHeight: 1.4,
       xlg: {
-        fontSize: layout.rem(scale[4]),
+        fontSize: rem(scale[4]),
         lineHeight: 1.25
       },
       max: {
-        fontSize: layout.rem(scale[5]),
+        fontSize: rem(scale[5]),
         lineHeight: 1.334
@@ -397,3 +470,3 @@ }
   var expressiveHeading04$1 = {
-    fontSize: layout.rem(scale[6]),
+    fontSize: rem(scale[6]),
     fontWeight: fontWeights.regular,
@@ -404,7 +477,7 @@ lineHeight: 1.28572,
       xlg: {
-        fontSize: layout.rem(scale[6]),
+        fontSize: rem(scale[6]),
         lineHeight: 1.25
       },
       max: {
-        fontSize: layout.rem(scale[7])
+        fontSize: rem(scale[7])
       }
@@ -414,3 +487,3 @@ }
   var expressiveHeading05$1 = {
-    fontSize: layout.rem(scale[7]),
+    fontSize: rem(scale[7]),
     fontWeight: fontWeights.regular,
@@ -421,3 +494,3 @@ lineHeight: 1.25,
       md: {
-        fontSize: layout.rem(scale[8]),
+        fontSize: rem(scale[8]),
         fontWeight: fontWeights.light,
@@ -428,3 +501,3 @@ lineHeight: 1.22,
       lg: {
-        fontSize: layout.rem(scale[9]),
+        fontSize: rem(scale[9]),
         fontWeight: fontWeights.light,
@@ -435,3 +508,3 @@ lineHeight: 1.19,
       xlg: {
-        fontSize: layout.rem(scale[10]),
+        fontSize: rem(scale[10]),
         fontWeight: fontWeights.light,
@@ -442,3 +515,3 @@ lineHeight: 1.17,
       max: {
-        fontSize: layout.rem(scale[12]),
+        fontSize: rem(scale[12]),
         fontWeight: fontWeights.light,
@@ -450,3 +523,3 @@ letterSpacing: 0
   var expressiveHeading06$1 = {
-    fontSize: layout.rem(scale[7]),
+    fontSize: rem(scale[7]),
     fontWeight: fontWeights.semibold,
@@ -457,3 +530,3 @@ lineHeight: 1.25,
       md: {
-        fontSize: layout.rem(scale[8]),
+        fontSize: rem(scale[8]),
         fontWeight: fontWeights.semibold,
@@ -464,3 +537,3 @@ lineHeight: 1.22,
       lg: {
-        fontSize: layout.rem(scale[9]),
+        fontSize: rem(scale[9]),
         fontWeight: fontWeights.semibold,
@@ -471,3 +544,3 @@ lineHeight: 1.19,
       xlg: {
-        fontSize: layout.rem(scale[10]),
+        fontSize: rem(scale[10]),
         fontWeight: fontWeights.semibold,
@@ -478,3 +551,3 @@ lineHeight: 1.17,
       max: {
-        fontSize: layout.rem(scale[12]),
+        fontSize: rem(scale[12]),
         fontWeight: fontWeights.semibold,
@@ -486,3 +559,3 @@ letterSpacing: 0
   var expressiveParagraph01$1 = {
-    fontSize: layout.rem(scale[5]),
+    fontSize: rem(scale[5]),
     fontWeight: fontWeights.light,
@@ -493,7 +566,7 @@ lineHeight: 1.334,
       lg: {
-        fontSize: layout.rem(scale[6]),
+        fontSize: rem(scale[6]),
         lineHeight: 1.28572
       },
       max: {
-        fontSize: layout.rem(scale[7]),
+        fontSize: rem(scale[7]),
         lineHeight: 1.25
@@ -505,3 +578,3 @@ }
     fontFamily: fontFamilies.serif,
-    fontSize: layout.rem(scale[4]),
+    fontSize: rem(scale[4]),
     fontWeight: fontWeights.regular,
@@ -512,3 +585,3 @@ lineHeight: 1.3,
       md: {
-        fontSize: layout.rem(scale[4]),
+        fontSize: rem(scale[4]),
         fontWeight: fontWeights.regular,
@@ -518,3 +591,3 @@ letterSpacing: 0
       lg: {
-        fontSize: layout.rem(scale[5]),
+        fontSize: rem(scale[5]),
         fontWeight: fontWeights.regular,
@@ -525,3 +598,3 @@ lineHeight: 1.334,
       xlg: {
-        fontSize: layout.rem(scale[6]),
+        fontSize: rem(scale[6]),
         fontWeight: fontWeights.regular,
@@ -532,3 +605,3 @@ lineHeight: 1.28572,
       max: {
-        fontSize: layout.rem(scale[7]),
+        fontSize: rem(scale[7]),
         fontWeight: fontWeights.regular,
@@ -542,3 +615,3 @@ lineHeight: 1.25,
     fontFamily: fontFamilies.serif,
-    fontSize: layout.rem(scale[7]),
+    fontSize: rem(scale[7]),
     fontWeight: fontWeights.light,
@@ -549,15 +622,15 @@ lineHeight: 1.25,
       md: {
-        fontSize: layout.rem(scale[8]),
+        fontSize: rem(scale[8]),
         lineHeight: 1.22
       },
       lg: {
-        fontSize: layout.rem(scale[9]),
+        fontSize: rem(scale[9]),
         lineHeight: 1.19
       },
       xlg: {
-        fontSize: layout.rem(scale[10]),
+        fontSize: rem(scale[10]),
         lineHeight: 1.17
       },
       max: {
-        fontSize: layout.rem(scale[12])
+        fontSize: rem(scale[12])
       }
@@ -567,3 +640,3 @@ }
   var display01$1 = {
-    fontSize: layout.rem(scale[9]),
+    fontSize: rem(scale[9]),
     fontWeight: fontWeights.light,
@@ -574,13 +647,13 @@ lineHeight: 1.19,
       md: {
-        fontSize: layout.rem(scale[9])
+        fontSize: rem(scale[9])
       },
       lg: {
-        fontSize: layout.rem(scale[11])
+        fontSize: rem(scale[11])
       },
       xlg: {
-        fontSize: layout.rem(scale[12]),
+        fontSize: rem(scale[12]),
         lineHeight: 1.17
       },
       max: {
-        fontSize: layout.rem(scale[14]),
+        fontSize: rem(scale[14]),
         lineHeight: 1.13
@@ -591,3 +664,3 @@ }
   var display02$1 = {
-    fontSize: layout.rem(scale[9]),
+    fontSize: rem(scale[9]),
     fontWeight: fontWeights.semibold,
@@ -598,13 +671,13 @@ lineHeight: 1.19,
       md: {
-        fontSize: layout.rem(scale[9])
+        fontSize: rem(scale[9])
       },
       lg: {
-        fontSize: layout.rem(scale[11])
+        fontSize: rem(scale[11])
       },
       xlg: {
-        fontSize: layout.rem(scale[12]),
+        fontSize: rem(scale[12]),
         lineHeight: 1.16
       },
       max: {
-        fontSize: layout.rem(scale[14]),
+        fontSize: rem(scale[14]),
         lineHeight: 1.13
@@ -615,3 +688,3 @@ }
   var display03$1 = {
-    fontSize: layout.rem(scale[9]),
+    fontSize: rem(scale[9]),
     fontWeight: fontWeights.light,
@@ -622,18 +695,18 @@ lineHeight: 1.19,
       md: {
-        fontSize: layout.rem(scale[13]),
+        fontSize: rem(scale[13]),
         lineHeight: 1.15
       },
       lg: {
-        fontSize: layout.rem(scale[16]),
+        fontSize: rem(scale[16]),
         lineHeight: 1.11,
-        letterSpacing: layout.px(-0.64)
+        letterSpacing: px(-0.64)
       },
       xlg: {
-        fontSize: layout.rem(scale[19]),
+        fontSize: rem(scale[19]),
         lineHeight: 1.07
       },
       max: {
-        fontSize: layout.rem(scale[22]),
+        fontSize: rem(scale[22]),
         lineHeight: 1.05,
-        letterSpacing: layout.px(-0.96)
+        letterSpacing: px(-0.96)
       }
@@ -643,3 +716,3 @@ }
   var display04$1 = {
-    fontSize: layout.rem(scale[9]),
+    fontSize: rem(scale[9]),
     fontWeight: fontWeights.semibold,
@@ -650,19 +723,19 @@ lineHeight: 1.19,
       md: {
-        fontSize: layout.rem(scale[13]),
+        fontSize: rem(scale[13]),
         lineHeight: 1.15
       },
       lg: {
-        fontSize: layout.rem(scale[16]),
+        fontSize: rem(scale[16]),
         lineHeight: 1.11,
-        letterSpacing: layout.px(-0.64)
+        letterSpacing: px(-0.64)
       },
       xlg: {
-        fontSize: layout.rem(scale[19]),
+        fontSize: rem(scale[19]),
         lineHeight: 1.07,
-        letterSpacing: layout.px(-0.64)
+        letterSpacing: px(-0.64)
       },
       max: {
-        fontSize: layout.rem(scale[22]),
+        fontSize: rem(scale[22]),
         lineHeight: 1.05,
-        letterSpacing: layout.px(-0.96)
+        letterSpacing: px(-0.96)
       }
@@ -675,12 +748,12 @@ }
   var legal01$1 = {
-    fontSize: layout.rem(scale[0]),
+    fontSize: rem(scale[0]),
     fontWeight: fontWeights.regular,
     lineHeight: 1.33333,
-    letterSpacing: layout.px(0.32)
+    letterSpacing: px(0.32)
   };
   var legal02$1 = {
-    fontSize: layout.rem(scale[1]),
+    fontSize: rem(scale[1]),
     fontWeight: fontWeights.regular,
     lineHeight: 1.28572,
-    letterSpacing: layout.px(0.16)
+    letterSpacing: px(0.16)
   }; // Body styles
@@ -777,3 +850,3 @@
   var _excluded = ["breakpoints"];
-  var breakpointNames = Object.keys(layout.breakpoints);
+  var breakpointNames = Object.keys(breakpoints);
 
@@ -800,3 +873,3 @@ function next(name) {
     fluidBreakpointNames.forEach(function (name) {
-      styles[layout.breakpoint(name)] = _objectSpread2(_objectSpread2({}, fluidBreakpoints[name]), {}, {
+      styles[breakpoint(name)] = _objectSpread2(_objectSpread2({}, fluidBreakpoints[name]), {}, {
         fontSize: fluidTypeSize(styles, name, fluidBreakpoints)
@@ -809,3 +882,3 @@ });
   function fluidTypeSize(defaultStyles, fluidBreakpointName, fluidBreakpoints) {
-    var breakpoint = layout.breakpoints[fluidBreakpointName];
+    var breakpoint = breakpoints[fluidBreakpointName];
     var fluidBreakpoint = fluidBreakpointName === 'sm' ? defaultStyles : fluidBreakpoints[fluidBreakpointName];
@@ -834,3 +907,3 @@ var maxFontSize = defaultStyles.fontSize;
     if (nextFluidBreakpointName) {
-      var nextFluidBreakpoint = layout.breakpoints[nextFluidBreakpointName];
+      var nextFluidBreakpoint = breakpoints[nextFluidBreakpointName];
       maxFontSize = fluidBreakpoints[nextFluidBreakpointName].fontSize;
@@ -837,0 +910,0 @@ maxViewportWidth = nextFluidBreakpoint.width;

New 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

Total package byte prevSize

539013

20.1%

Number of package files

101

18.82%

Lines of code

3883

5.14%

Worsened metrics

Number of low quality alerts

2

100%

Dependency changes

• + Added

  @carbon/grid@^10.42.0-rc.0

• + Added

  @carbon/grid@10.43.4
  (transitive)

• - Removed

  @carbon/layout@^10.36.0

• Updated

  @carbon/import-once@^10.7.0-rc.0