@carbon/type 10.41.0 → 10.43.0

package/es/index.js

@@ -1,5 +1,3 @@
-import { px, baseFontSize, rem, breakpoint, breakpoints } from '@carbon/layout';
-
 /**
  * Copyright IBM Corp. 2018, 2018
  *
@@ -88,6 +86,79 @@ function paramCase(string) {
   return result;
 }
 
+/**
+ * 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.
+ */
+/**
+ * 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
  *

package/lib/index.js

@@ -2,8 +2,6 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var layout = require('@carbon/layout');
-
 /**
  * Copyright IBM Corp. 2018, 2018
  *
@@ -92,6 +90,79 @@ function paramCase(string) {
   return result;
 }
 
+/**
+ * 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.
+ */
+/**
+ * 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
  *
@@ -100,7 +171,7 @@ function paramCase(string) {
  */
 var reset = {
   html: {
-    fontSize: layout.px(layout.baseFontSize)
+    fontSize: px(baseFontSize)
   },
   body: {
     fontFamily: fontFamilies.sans,
@@ -234,127 +305,127 @@ function _objectWithoutProperties(source, excluded) {
 }
 
 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,
   lineHeight: 1.375,
   letterSpacing: 0
 };
 var bodyLong02$1 = {
-  fontSize: layout.rem(scale[2]),
+  fontSize: rem(scale[2]),
   fontWeight: fontWeights.regular,
   lineHeight: 1.5,
   letterSpacing: 0
 };
 var code01$1 = {
   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,
   lineHeight: 1.5,
   letterSpacing: 0
 };
 var productiveHeading02$1 = {
-  fontSize: layout.rem(scale[2]),
+  fontSize: rem(scale[2]),
   fontWeight: fontWeights.semibold,
   lineHeight: 1.375,
   letterSpacing: 0
 };
 var productiveHeading03$1 = {
-  fontSize: layout.rem(scale[4]),
+  fontSize: rem(scale[4]),
   fontWeight: fontWeights.regular,
   lineHeight: 1.4,
   letterSpacing: 0
 };
 var productiveHeading04$1 = {
-  fontSize: layout.rem(scale[6]),
+  fontSize: rem(scale[6]),
   fontWeight: fontWeights.regular,
   lineHeight: 1.28572,
   letterSpacing: 0
 };
 var productiveHeading05$1 = {
-  fontSize: layout.rem(scale[7]),
+  fontSize: rem(scale[7]),
   fontWeight: fontWeights.regular,
   lineHeight: 1.25,
   letterSpacing: 0
 };
 var productiveHeading06$1 = {
-  fontSize: layout.rem(scale[9]),
+  fontSize: rem(scale[9]),
   fontWeight: fontWeights.light,
   lineHeight: 1.199,
   letterSpacing: 0
 };
 var productiveHeading07$1 = {
-  fontSize: layout.rem(scale[11]),
+  fontSize: rem(scale[11]),
   fontWeight: fontWeights.light,
   lineHeight: 1.199,
   letterSpacing: 0
@@ -366,140 +437,140 @@ var expressiveHeading02$1 = _objectSpread2(_objectSpread2({}, heading02$1), {},
   lineHeight: 1.5
 });
 var expressiveHeading03$1 = {
-  fontSize: layout.rem(scale[4]),
+  fontSize: rem(scale[4]),
   fontWeight: fontWeights.regular,
   lineHeight: 1.4,
   letterSpacing: 0,
   breakpoints: {
     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
     }
   }
 };
 var expressiveHeading04$1 = {
-  fontSize: layout.rem(scale[6]),
+  fontSize: rem(scale[6]),
   fontWeight: fontWeights.regular,
   lineHeight: 1.28572,
   letterSpacing: 0,
   breakpoints: {
     xlg: {
-      fontSize: layout.rem(scale[6]),
+      fontSize: rem(scale[6]),
       lineHeight: 1.25
     },
     max: {
-      fontSize: layout.rem(scale[7])
+      fontSize: rem(scale[7])
     }
   }
 };
 var expressiveHeading05$1 = {
-  fontSize: layout.rem(scale[7]),
+  fontSize: rem(scale[7]),
   fontWeight: fontWeights.regular,
   lineHeight: 1.25,
   letterSpacing: 0,
   breakpoints: {
     md: {
-      fontSize: layout.rem(scale[8]),
+      fontSize: rem(scale[8]),
       fontWeight: fontWeights.light,
       lineHeight: 1.22,
       letterSpacing: 0
     },
     lg: {
-      fontSize: layout.rem(scale[9]),
+      fontSize: rem(scale[9]),
       fontWeight: fontWeights.light,
       lineHeight: 1.19,
       letterSpacing: 0
     },
     xlg: {
-      fontSize: layout.rem(scale[10]),
+      fontSize: rem(scale[10]),
       fontWeight: fontWeights.light,
       lineHeight: 1.17,
       letterSpacing: 0
     },
     max: {
-      fontSize: layout.rem(scale[12]),
+      fontSize: rem(scale[12]),
       fontWeight: fontWeights.light,
       letterSpacing: 0
     }
   }
 };
 var expressiveHeading06$1 = {
-  fontSize: layout.rem(scale[7]),
+  fontSize: rem(scale[7]),
   fontWeight: fontWeights.semibold,
   lineHeight: 1.25,
   letterSpacing: 0,
   breakpoints: {
     md: {
-      fontSize: layout.rem(scale[8]),
+      fontSize: rem(scale[8]),
       fontWeight: fontWeights.semibold,
       lineHeight: 1.22,
       letterSpacing: 0
     },
     lg: {
-      fontSize: layout.rem(scale[9]),
+      fontSize: rem(scale[9]),
       fontWeight: fontWeights.semibold,
       lineHeight: 1.19,
       letterSpacing: 0
     },
     xlg: {
-      fontSize: layout.rem(scale[10]),
+      fontSize: rem(scale[10]),
       fontWeight: fontWeights.semibold,
       lineHeight: 1.17,
       letterSpacing: 0
     },
     max: {
-      fontSize: layout.rem(scale[12]),
+      fontSize: rem(scale[12]),
       fontWeight: fontWeights.semibold,
       letterSpacing: 0
     }
   }
 };
 var expressiveParagraph01$1 = {
-  fontSize: layout.rem(scale[5]),
+  fontSize: rem(scale[5]),
   fontWeight: fontWeights.light,
   lineHeight: 1.334,
   letterSpacing: 0,
   breakpoints: {
     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
     }
   }
 };
 var quotation01$1 = {
   fontFamily: fontFamilies.serif,
-  fontSize: layout.rem(scale[4]),
+  fontSize: rem(scale[4]),
   fontWeight: fontWeights.regular,
   lineHeight: 1.3,
   letterSpacing: 0,
   breakpoints: {
     md: {
-      fontSize: layout.rem(scale[4]),
+      fontSize: rem(scale[4]),
       fontWeight: fontWeights.regular,
       letterSpacing: 0
     },
     lg: {
-      fontSize: layout.rem(scale[5]),
+      fontSize: rem(scale[5]),
       fontWeight: fontWeights.regular,
       lineHeight: 1.334,
       letterSpacing: 0
     },
     xlg: {
-      fontSize: layout.rem(scale[6]),
+      fontSize: rem(scale[6]),
       fontWeight: fontWeights.regular,
       lineHeight: 1.28572,
       letterSpacing: 0
     },
     max: {
-      fontSize: layout.rem(scale[7]),
+      fontSize: rem(scale[7]),
       fontWeight: fontWeights.regular,
       lineHeight: 1.25,
       letterSpacing: 0
@@ -508,122 +579,122 @@ var quotation01$1 = {
 };
 var quotation02$1 = {
   fontFamily: fontFamilies.serif,
-  fontSize: layout.rem(scale[7]),
+  fontSize: rem(scale[7]),
   fontWeight: fontWeights.light,
   lineHeight: 1.25,
   letterSpacing: 0,
   breakpoints: {
     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])
     }
   }
 };
 var display01$1 = {
-  fontSize: layout.rem(scale[9]),
+  fontSize: rem(scale[9]),
   fontWeight: fontWeights.light,
   lineHeight: 1.19,
   letterSpacing: 0,
   breakpoints: {
     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
     }
   }
 };
 var display02$1 = {
-  fontSize: layout.rem(scale[9]),
+  fontSize: rem(scale[9]),
   fontWeight: fontWeights.semibold,
   lineHeight: 1.19,
   letterSpacing: 0,
   breakpoints: {
     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
     }
   }
 };
 var display03$1 = {
-  fontSize: layout.rem(scale[9]),
+  fontSize: rem(scale[9]),
   fontWeight: fontWeights.light,
   lineHeight: 1.19,
   letterSpacing: 0,
   breakpoints: {
     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)
     }
   }
 };
 var display04$1 = {
-  fontSize: layout.rem(scale[9]),
+  fontSize: rem(scale[9]),
   fontWeight: fontWeights.semibold,
   lineHeight: 1.19,
   letterSpacing: 0,
   breakpoints: {
     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)
     }
   }
 }; // Type changes - V11
@@ -631,16 +702,16 @@ var display04$1 = {
 // No changes for code-01, code-02, label-01, label-02
 
 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
 
 var bodyCompact01$1 = bodyShort01$1;
@@ -732,7 +803,7 @@ var styles = /*#__PURE__*/Object.freeze({
 });
 
 var _excluded = ["breakpoints"];
-var breakpointNames = Object.keys(layout.breakpoints);
+var breakpointNames = Object.keys(breakpoints);
 
 function next(name) {
   return breakpointNames[breakpointNames.indexOf(name) + 1];
@@ -754,7 +825,7 @@ function fluid(selector) {
 
   styles.fontSize = fluidTypeSize(styles, 'sm', fluidBreakpoints);
   fluidBreakpointNames.forEach(function (name) {
-    styles[layout.breakpoint(name)] = _objectSpread2(_objectSpread2({}, fluidBreakpoints[name]), {}, {
+    styles[breakpoint(name)] = _objectSpread2(_objectSpread2({}, fluidBreakpoints[name]), {}, {
       fontSize: fluidTypeSize(styles, name, fluidBreakpoints)
     });
   });
@@ -762,7 +833,7 @@ function fluid(selector) {
 }
 
 function fluidTypeSize(defaultStyles, fluidBreakpointName, fluidBreakpoints) {
-  var breakpoint = layout.breakpoints[fluidBreakpointName];
+  var breakpoint = breakpoints[fluidBreakpointName];
   var fluidBreakpoint = fluidBreakpointName === 'sm' ? defaultStyles : fluidBreakpoints[fluidBreakpointName];
   var maxFontSize = defaultStyles.fontSize;
   var minFontSize = defaultStyles.fontSize;
@@ -786,7 +857,7 @@ function fluidTypeSize(defaultStyles, fluidBreakpointName, fluidBreakpoints) {
   }
 
   if (nextFluidBreakpointName) {
-    var nextFluidBreakpoint = layout.breakpoints[nextFluidBreakpointName];
+    var nextFluidBreakpoint = breakpoints[nextFluidBreakpointName];
     maxFontSize = fluidBreakpoints[nextFluidBreakpointName].fontSize;
     maxViewportWidth = nextFluidBreakpoint.width;
     return "calc(".concat(minFontSize, " + ").concat(subtract(maxFontSize, minFontSize), " * ((100vw - ").concat(minViewportWidth, ") / ").concat(subtract(maxViewportWidth, minViewportWidth), "))");