@carbon/type 10.14.0 → 10.16.0

package/lib/index.js

@@ -250,132 +250,133 @@ function _objectWithoutProperties(source, excluded) {
 var caption01 = {
   fontSize: layout.rem(scale[0]),
   fontWeight: fontWeights.regular,
-  lineHeight: layout.rem(16),
+  lineHeight: 1.34,
   letterSpacing: layout.px(0.32)
 };
 var label01 = {
   fontSize: layout.rem(scale[0]),
   fontWeight: fontWeights.regular,
-  lineHeight: layout.rem(16),
+  lineHeight: 1.34,
   letterSpacing: layout.px(0.32)
 };
 var helperText01 = {
   fontSize: layout.rem(scale[0]),
-  lineHeight: layout.rem(16),
+  lineHeight: 1.34,
   letterSpacing: layout.px(0.32)
 };
 var bodyShort01 = {
   fontSize: layout.rem(scale[1]),
   fontWeight: fontWeights.regular,
-  lineHeight: layout.rem(18),
+  lineHeight: 1.29,
   letterSpacing: layout.px(0.16)
 };
 var bodyLong01 = {
   fontSize: layout.rem(scale[1]),
   fontWeight: fontWeights.regular,
-  lineHeight: layout.rem(20),
+  lineHeight: 1.43,
   letterSpacing: layout.px(0.16)
 };
 var bodyShort02 = {
   fontSize: layout.rem(scale[2]),
   fontWeight: fontWeights.regular,
-  lineHeight: layout.rem(22),
+  lineHeight: 1.375,
   letterSpacing: 0
 };
 var bodyLong02 = {
   fontSize: layout.rem(scale[2]),
   fontWeight: fontWeights.regular,
-  lineHeight: layout.rem(24),
+  lineHeight: 1.5,
   letterSpacing: 0
 };
 var code01 = {
   fontFamily: fontFamilies.mono,
   fontSize: layout.rem(scale[0]),
   fontWeight: fontWeights.regular,
-  lineHeight: layout.rem(16),
+  lineHeight: 1.34,
   letterSpacing: layout.px(0.32)
 };
 var code02 = {
   fontFamily: fontFamilies.mono,
   fontSize: layout.rem(scale[1]),
   fontWeight: fontWeights.regular,
-  lineHeight: layout.rem(20),
+  lineHeight: 1.43,
   letterSpacing: layout.px(0.32)
 };
 var heading01 = {
   fontSize: layout.rem(scale[1]),
   fontWeight: fontWeights.semibold,
-  lineHeight: layout.rem(18),
+  lineHeight: 1.29,
   letterSpacing: layout.px(0.16)
 };
 var productiveHeading01 = heading01;
 var heading02 = {
   fontSize: layout.rem(scale[2]),
   fontWeight: fontWeights.semibold,
-  lineHeight: layout.rem(22),
+  lineHeight: 1.375,
   letterSpacing: 0
 };
 var productiveHeading02 = heading02;
 var productiveHeading03 = {
   fontSize: layout.rem(scale[4]),
   fontWeight: fontWeights.regular,
-  lineHeight: layout.rem(28),
+  lineHeight: 1.4,
   letterSpacing: 0
 };
 var productiveHeading04 = {
   fontSize: layout.rem(scale[6]),
   fontWeight: fontWeights.regular,
-  lineHeight: layout.rem(36),
+  lineHeight: 1.29,
   letterSpacing: 0
 };
 var productiveHeading05 = {
   fontSize: layout.rem(scale[7]),
   fontWeight: fontWeights.regular,
-  lineHeight: layout.rem(40),
+  lineHeight: 1.25,
   letterSpacing: 0
 };
 var productiveHeading06 = {
   fontSize: layout.rem(scale[9]),
   fontWeight: fontWeights.light,
-  lineHeight: layout.rem(50),
+  lineHeight: 1.199,
   letterSpacing: 0
 };
 var productiveHeading07 = {
   fontSize: layout.rem(scale[11]),
   fontWeight: fontWeights.light,
-  lineHeight: layout.rem(64),
+  lineHeight: 1.19,
   letterSpacing: 0
 };
 var expressiveHeading01 = _objectSpread2(_objectSpread2({}, heading01), {}, {
-  lineHeight: layout.rem(20)
+  lineHeight: 1.25
 });
 var expressiveHeading02 = _objectSpread2(_objectSpread2({}, heading02), {}, {
-  lineHeight: layout.rem(24)
+  lineHeight: 1.5
 });
 var expressiveHeading03 = {
   fontSize: layout.rem(scale[4]),
   fontWeight: fontWeights.regular,
-  lineHeight: '140%',
+  lineHeight: 1.4,
   letterSpacing: 0,
   breakpoints: {
     xlg: {
       fontSize: layout.rem(scale[4]),
-      lineHeight: '125%'
+      lineHeight: 1.25
     },
     max: {
-      fontSize: layout.rem(scale[5])
+      fontSize: layout.rem(scale[5]),
+      lineHeight: 1.334
     }
   }
 };
 var expressiveHeading04 = {
   fontSize: layout.rem(scale[6]),
   fontWeight: fontWeights.regular,
-  lineHeight: '129%',
+  lineHeight: 1.29,
   letterSpacing: 0,
   breakpoints: {
     xlg: {
       fontSize: layout.rem(scale[6]),
-      lineHeight: '125%'
+      lineHeight: 1.25
     },
     max: {
       fontSize: layout.rem(scale[7])
@@ -385,31 +386,30 @@ var expressiveHeading04 = {
 var expressiveHeading05 = {
   fontSize: layout.rem(scale[7]),
   fontWeight: fontWeights.regular,
-  lineHeight: '125%',
+  lineHeight: 1.25,
   letterSpacing: 0,
   breakpoints: {
     md: {
       fontSize: layout.rem(scale[8]),
       fontWeight: fontWeights.light,
-      lineHeight: '122%',
+      lineHeight: 1.22,
       letterSpacing: 0
     },
     lg: {
       fontSize: layout.rem(scale[9]),
       fontWeight: fontWeights.light,
-      lineHeight: '119%',
+      lineHeight: 1.19,
       letterSpacing: 0
     },
     xlg: {
       fontSize: layout.rem(scale[10]),
       fontWeight: fontWeights.light,
-      lineHeight: '117%',
+      lineHeight: 1.17,
       letterSpacing: 0
     },
     max: {
       fontSize: layout.rem(scale[12]),
       fontWeight: fontWeights.light,
-      lineHeight: layout.rem(70),
       letterSpacing: 0
     }
   }
@@ -417,31 +417,30 @@ var expressiveHeading05 = {
 var expressiveHeading06 = {
   fontSize: layout.rem(scale[7]),
   fontWeight: fontWeights.semibold,
-  lineHeight: '125%',
+  lineHeight: 1.25,
   letterSpacing: 0,
   breakpoints: {
     md: {
       fontSize: layout.rem(scale[8]),
       fontWeight: fontWeights.semibold,
-      lineHeight: '122%',
+      lineHeight: 1.22,
       letterSpacing: 0
     },
     lg: {
       fontSize: layout.rem(scale[9]),
       fontWeight: fontWeights.semibold,
-      lineHeight: '119%',
+      lineHeight: 1.19,
       letterSpacing: 0
     },
     xlg: {
       fontSize: layout.rem(scale[10]),
       fontWeight: fontWeights.semibold,
-      lineHeight: '117%',
+      lineHeight: 1.17,
       letterSpacing: 0
     },
     max: {
       fontSize: layout.rem(scale[12]),
       fontWeight: fontWeights.semibold,
-      lineHeight: layout.rem(70),
       letterSpacing: 0
     }
   }
@@ -449,21 +448,21 @@ var expressiveHeading06 = {
 var expressiveParagraph01 = {
   fontSize: layout.rem(scale[5]),
   fontWeight: fontWeights.light,
-  lineHeight: '125%',
+  lineHeight: 1.334,
   letterSpacing: 0,
   lg: {
     fontSize: layout.rem(scale[6]),
-    lineHeight: '129%'
+    lineHeight: 1.29
   },
   max: {
     fontSize: layout.rem(scale[7]),
-    lineHeight: '125%'
+    lineHeight: 1.25
   }
 };
 var quotation01 = {
   fontSize: layout.rem(scale[4]),
   fontWeight: fontWeights.regular,
-  lineHeight: '130%',
+  lineHeight: 1.3,
   letterSpacing: 0,
   breakpoints: {
     md: {
@@ -474,19 +473,19 @@ var quotation01 = {
     lg: {
       fontSize: layout.rem(scale[5]),
       fontWeight: fontWeights.regular,
-      lineHeight: '125%',
+      lineHeight: 1.334,
       letterSpacing: 0
     },
     xlg: {
       fontSize: layout.rem(scale[6]),
       fontWeight: fontWeights.regular,
-      lineHeight: '129%',
+      lineHeight: 1.29,
       letterSpacing: 0
     },
     max: {
       fontSize: layout.rem(scale[7]),
       fontWeight: fontWeights.regular,
-      lineHeight: '125%',
+      lineHeight: 1.25,
       letterSpacing: 0
     }
   }
@@ -494,20 +493,20 @@ var quotation01 = {
 var quotation02 = {
   fontSize: layout.rem(scale[7]),
   fontWeight: fontWeights.light,
-  lineHeight: '125%',
+  lineHeight: 1.25,
   letterSpacing: 0,
   breakpoints: {
     md: {
       fontSize: layout.rem(scale[8]),
-      lineHeight: '122%'
+      lineHeight: 1.22
     },
     lg: {
       fontSize: layout.rem(scale[9]),
-      lineHeight: '119%'
+      lineHeight: 1.19
     },
     xlg: {
       fontSize: layout.rem(scale[10]),
-      lineHeight: '117%'
+      lineHeight: 1.17
     },
     max: {
       fontSize: layout.rem(scale[12])
@@ -517,7 +516,7 @@ var quotation02 = {
 var display01 = {
   fontSize: layout.rem(scale[9]),
   fontWeight: fontWeights.light,
-  lineHeight: '119%',
+  lineHeight: 1.19,
   letterSpacing: 0,
   breakpoints: {
     md: {
@@ -528,18 +527,18 @@ var display01 = {
     },
     xlg: {
       fontSize: layout.rem(scale[12]),
-      lineHeight: '117%'
+      lineHeight: 1.17
     },
     max: {
       fontSize: layout.rem(scale[14]),
-      lineHeight: '113%'
+      lineHeight: 1.13
     }
   }
 };
 var display02 = {
   fontSize: layout.rem(scale[9]),
   fontWeight: fontWeights.semibold,
-  lineHeight: '119%',
+  lineHeight: 1.19,
   letterSpacing: 0,
   breakpoints: {
     md: {
@@ -550,36 +549,36 @@ var display02 = {
     },
     xlg: {
       fontSize: layout.rem(scale[12]),
-      lineHeight: '116%'
+      lineHeight: 1.16
     },
     max: {
       fontSize: layout.rem(scale[14]),
-      lineHeight: '113%'
+      lineHeight: 1.13
     }
   }
 };
 var display03 = {
   fontSize: layout.rem(scale[9]),
   fontWeight: fontWeights.light,
-  lineHeight: '119%',
+  lineHeight: 1.19,
   letterSpacing: 0,
   breakpoints: {
     md: {
       fontSize: layout.rem(scale[13]),
-      lineHeight: '115%'
+      lineHeight: 1.15
     },
     lg: {
       fontSize: layout.rem(scale[16]),
-      lineHeight: '111%',
+      lineHeight: 1.11,
       letterSpacing: layout.px(-0.64)
     },
     xlg: {
       fontSize: layout.rem(scale[19]),
-      lineHeight: '107%'
+      lineHeight: 1.07
     },
     max: {
       fontSize: layout.rem(scale[22]),
-      lineHeight: '105%',
+      lineHeight: 1.05,
       letterSpacing: layout.px(-0.96)
     }
   }
@@ -587,26 +586,26 @@ var display03 = {
 var display04 = {
   fontSize: layout.rem(scale[9]),
   fontWeight: fontWeights.semibold,
-  lineHeight: '119%',
+  lineHeight: 1.19,
   letterSpacing: 0,
   breakpoints: {
     md: {
       fontSize: layout.rem(scale[13]),
-      lineHeight: '115%'
+      lineHeight: 1.15
     },
     lg: {
       fontSize: layout.rem(scale[16]),
-      lineHeight: '111%',
+      lineHeight: 1.11,
       letterSpacing: layout.px(-0.64)
     },
     xlg: {
       fontSize: layout.rem(scale[19]),
-      lineHeight: '107%',
+      lineHeight: 1.07,
       letterSpacing: layout.px(-0.64)
     },
     max: {
       fontSize: layout.rem(scale[22]),
-      lineHeight: '105%',
+      lineHeight: 1.05,
       letterSpacing: layout.px(-0.96)
     }
   }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/type",
   "description": "Typography for digital and software products using the Carbon Design System",
-  "version": "10.14.0",
+  "version": "10.16.0",
   "license": "Apache-2.0",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -33,11 +33,11 @@
   },
   "dependencies": {
     "@carbon/import-once": "^10.3.0",
-    "@carbon/layout": "^10.12.0"
+    "@carbon/layout": "^10.13.0"
   },
   "devDependencies": {
     "@carbon/bundler": "^10.9.0",
-    "@carbon/test-utils": "^10.10.0",
+    "@carbon/test-utils": "^10.11.0",
     "change-case": "^4.1.1",
     "rimraf": "^3.0.0"
   },
@@ -47,5 +47,5 @@
     "sassDir": "scss",
     "needs": "^1.3.0"
   },
-  "gitHead": "213cbde854a4958334cff9914b91863ce6debb9d"
+  "gitHead": "4673aaf1e73fbfab199ff6daf846a0292c14d905"
 }

package/scss/_font-family.scss

@@ -23,7 +23,7 @@ $carbon--font-families: (
       "'IBM Plex Sans Hebrew', 'Helvetica Hebrew', 'Arial Hebrew', sans-serif"
     ),
   'serif': unquote("'IBM Plex Serif', 'Georgia', Times, serif"),
-);
+) !default;
 
 /// Get the font-family for an IBM Plex font
 /// @param {String} $name
@@ -50,7 +50,7 @@ $carbon--font-weights: (
   'light': 300,
   'regular': 400,
   'semibold': 600,
-);
+) !default;
 
 /// Retrieve the font-weight value for a given name
 /// @param {String} $weight

package/scss/_inlined/_font-family.scss

@@ -23,7 +23,7 @@ $carbon--font-families: (
       "'IBM Plex Sans Hebrew', 'Helvetica Hebrew', 'Arial Hebrew', sans-serif"
     ),
   'serif': unquote("'IBM Plex Serif', 'Georgia', Times, serif"),
-);
+) !default;
 
 /// Get the font-family for an IBM Plex font
 /// @param {String} $name
@@ -50,7 +50,7 @@ $carbon--font-weights: (
   'light': 300,
   'regular': 400,
   'semibold': 600,
-);
+) !default;
 
 /// Retrieve the font-weight value for a given name
 /// @param {String} $weight

package/scss/_inlined/_reset.scss

@@ -16,7 +16,7 @@
 /// @group @carbon/type
 @mixin carbon--type-reset(
   // TODO: remove in next major release. This has been replaced with 100%
-    $base-font-size: $carbon--base-font-size,
+  $base-font-size: $carbon--base-font-size,
   $body-font-family: carbon--font-family('sans'),
   $mono-font-family: carbon--font-family('mono')
 ) {

package/scss/_inlined/_scale.scss

@@ -20,7 +20,7 @@
   @return carbon--get-type-size($step - 1) + (floor(($step - 2) / 4) + 1) * 2;
 }
 
-/// Type scole follows a custom formula for determining each step size and supports sizes from 12px to 92px
+/// Type scale follows a custom formula for determining each step size and supports sizes from 12px to 92px
 /// @type Map
 /// @access public
 /// @group @carbon/type
@@ -32,7 +32,7 @@ $carbon--type-scale: ();
   );
 }
 
-/// Get the value of a specific step in the typescale
+/// Get the value of a specific step in the type scale
 /// @param {Number} $step
 /// @return {Number} In rem
 /// @access public