@carbon/type 10.0.0-rc.0 → 10.2.0

package/scss/_inlined/font-face/_serif.scss

@@ -0,0 +1,430 @@
+//
+// 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.
+//
+
+@import 'settings';
+
+/// Serif `@font-face`'s
+/// @access public
+/// @group @carbon/type
+@mixin carbon--font-face-serif {
+  // .woff support for IE11
+  @font-face {
+    font-family: 'IBM Plex Serif';
+    font-style: italic;
+    font-weight: 300;
+    font-display: $carbon--font-display;
+    src: local('IBM Plex Serif Light Italic'), local('IBMPlexSerif-LightItalic'),
+      url(https://fonts.gstatic.com/s/ibmplexserif/v7/jizGREVNn1dOx-zrZ2X3pZvkTiUa454xm1npiw.woff)
+        format('woff');
+  }
+  @font-face {
+    font-family: 'IBM Plex Serif';
+    font-style: italic;
+    font-weight: 400;
+    font-display: $carbon--font-display;
+    src: local('IBM Plex Serif Italic'), local('IBMPlexSerif-Italic'),
+      url(https://fonts.gstatic.com/s/ibmplexserif/v7/jizBREVNn1dOx-zrZ2X3pZvkTiUa6zUTiA.woff)
+        format('woff');
+  }
+  @font-face {
+    font-family: 'IBM Plex Serif';
+    font-style: italic;
+    font-weight: 600;
+    font-display: $carbon--font-display;
+    src: local('IBM Plex Serif SemiBold Italic'),
+      local('IBMPlexSerif-SemiBoldItalic'),
+      url(https://fonts.gstatic.com/s/ibmplexserif/v7/jizGREVNn1dOx-zrZ2X3pZvkTiUa4-o3m1npiw.woff)
+        format('woff');
+  }
+  @font-face {
+    font-family: 'IBM Plex Serif';
+    font-style: normal;
+    font-weight: 300;
+    font-display: $carbon--font-display;
+    src: local('IBM Plex Serif Light'), local('IBMPlexSerif-Light'),
+      url(https://fonts.gstatic.com/s/ibmplexserif/v7/jizAREVNn1dOx-zrZ2X3pZvkTi20-SI0q10.woff)
+        format('woff');
+  }
+  @font-face {
+    font-family: 'IBM Plex Serif';
+    font-style: normal;
+    font-weight: 400;
+    font-display: $carbon--font-display;
+    src: local('IBM Plex Serif'), local('IBMPlexSerif'),
+      url(https://fonts.gstatic.com/s/ibmplexserif/v7/jizDREVNn1dOx-zrZ2X3pZvkTiUf2zE.woff)
+        format('woff');
+  }
+  @font-face {
+    font-family: 'IBM Plex Serif';
+    font-style: normal;
+    font-weight: 600;
+    font-display: $carbon--font-display;
+    src: local('IBM Plex Serif SemiBold'), local('IBMPlexSerif-SemiBold'),
+      url(https://fonts.gstatic.com/s/ibmplexserif/v7/jizAREVNn1dOx-zrZ2X3pZvkTi3A_yI0q10.woff)
+        format('woff');
+  }
+
+  /* cyrillic-ext */
+  @font-face {
+    font-family: 'IBM Plex Serif';
+    font-style: italic;
+    font-weight: 300;
+    font-display: $carbon--font-display;
+    src: local('IBM Plex Serif Light Italic'), local('IBMPlexSerif-LightItalic'),
+      url(https://fonts.gstatic.com/s/ibmplexserif/v7/jizGREVNn1dOx-zrZ2X3pZvkTiUa454xm1TpjfGj7oaMBg.woff2)
+        format('woff2');
+    unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F,
+      U+FE2E-FE2F;
+  }
+  /* cyrillic */
+  @font-face {
+    font-family: 'IBM Plex Serif';
+    font-style: italic;
+    font-weight: 300;
+    font-display: $carbon--font-display;
+    src: local('IBM Plex Serif Light Italic'), local('IBMPlexSerif-LightItalic'),
+      url(https://fonts.gstatic.com/s/ibmplexserif/v7/jizGREVNn1dOx-zrZ2X3pZvkTiUa454xm13pjfGj7oaMBg.woff2)
+        format('woff2');
+    unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
+  }
+  /* vietnamese */
+  @font-face {
+    font-family: 'IBM Plex Serif';
+    font-style: italic;
+    font-weight: 300;
+    font-display: $carbon--font-display;
+    src: local('IBM Plex Serif Light Italic'), local('IBMPlexSerif-LightItalic'),
+      url(https://fonts.gstatic.com/s/ibmplexserif/v7/jizGREVNn1dOx-zrZ2X3pZvkTiUa454xm1bpjfGj7oaMBg.woff2)
+        format('woff2');
+    unicode-range: U+0102-0103, U+0110-0111, U+1EA0-1EF9, U+20AB;
+  }
+  /* latin-ext */
+  @font-face {
+    font-family: 'IBM Plex Serif';
+    font-style: italic;
+    font-weight: 300;
+    font-display: $carbon--font-display;
+    src: local('IBM Plex Serif Light Italic'), local('IBMPlexSerif-LightItalic'),
+      url(https://fonts.gstatic.com/s/ibmplexserif/v7/jizGREVNn1dOx-zrZ2X3pZvkTiUa454xm1fpjfGj7oaMBg.woff2)
+        format('woff2');
+    unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB,
+      U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
+  }
+  /* latin */
+  @font-face {
+    font-family: 'IBM Plex Serif';
+    font-style: italic;
+    font-weight: 300;
+    font-display: $carbon--font-display;
+    src: local('IBM Plex Serif Light Italic'), local('IBMPlexSerif-LightItalic'),
+      url(https://fonts.gstatic.com/s/ibmplexserif/v7/jizGREVNn1dOx-zrZ2X3pZvkTiUa454xm1npjfGj7oY.woff2)
+        format('woff2');
+    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
+      U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212,
+      U+2215, U+FEFF, U+FFFD;
+  }
+  /* cyrillic-ext */
+  @font-face {
+    font-family: 'IBM Plex Serif';
+    font-style: italic;
+    font-weight: 400;
+    font-display: $carbon--font-display;
+    src: local('IBM Plex Serif Italic'), local('IBMPlexSerif-Italic'),
+      url(https://fonts.gstatic.com/s/ibmplexserif/v7/jizBREVNn1dOx-zrZ2X3pZvkTiUa6zgTjnTLgNuZ5w.woff2)
+        format('woff2');
+    unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F,
+      U+FE2E-FE2F;
+  }
+  /* cyrillic */
+  @font-face {
+    font-family: 'IBM Plex Serif';
+    font-style: italic;
+    font-weight: 400;
+    font-display: $carbon--font-display;
+    src: local('IBM Plex Serif Italic'), local('IBMPlexSerif-Italic'),
+      url(https://fonts.gstatic.com/s/ibmplexserif/v7/jizBREVNn1dOx-zrZ2X3pZvkTiUa6zETjnTLgNuZ5w.woff2)
+        format('woff2');
+    unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
+  }
+  /* vietnamese */
+  @font-face {
+    font-family: 'IBM Plex Serif';
+    font-style: italic;
+    font-weight: 400;
+    font-display: $carbon--font-display;
+    src: local('IBM Plex Serif Italic'), local('IBMPlexSerif-Italic'),
+      url(https://fonts.gstatic.com/s/ibmplexserif/v7/jizBREVNn1dOx-zrZ2X3pZvkTiUa6zoTjnTLgNuZ5w.woff2)
+        format('woff2');
+    unicode-range: U+0102-0103, U+0110-0111, U+1EA0-1EF9, U+20AB;
+  }
+  /* latin-ext */
+  @font-face {
+    font-family: 'IBM Plex Serif';
+    font-style: italic;
+    font-weight: 400;
+    font-display: $carbon--font-display;
+    src: local('IBM Plex Serif Italic'), local('IBMPlexSerif-Italic'),
+      url(https://fonts.gstatic.com/s/ibmplexserif/v7/jizBREVNn1dOx-zrZ2X3pZvkTiUa6zsTjnTLgNuZ5w.woff2)
+        format('woff2');
+    unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB,
+      U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
+  }
+  /* latin */
+  @font-face {
+    font-family: 'IBM Plex Serif';
+    font-style: italic;
+    font-weight: 400;
+    font-display: $carbon--font-display;
+    src: local('IBM Plex Serif Italic'), local('IBMPlexSerif-Italic'),
+      url(https://fonts.gstatic.com/s/ibmplexserif/v7/jizBREVNn1dOx-zrZ2X3pZvkTiUa6zUTjnTLgNs.woff2)
+        format('woff2');
+    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
+      U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212,
+      U+2215, U+FEFF, U+FFFD;
+  }
+  /* cyrillic-ext */
+  @font-face {
+    font-family: 'IBM Plex Serif';
+    font-style: italic;
+    font-weight: 600;
+    font-display: $carbon--font-display;
+    src: local('IBM Plex Serif SemiBold Italic'),
+      local('IBMPlexSerif-SemiBoldItalic'),
+      url(https://fonts.gstatic.com/s/ibmplexserif/v7/jizGREVNn1dOx-zrZ2X3pZvkTiUa4-o3m1TpjfGj7oaMBg.woff2)
+        format('woff2');
+    unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F,
+      U+FE2E-FE2F;
+  }
+  /* cyrillic */
+  @font-face {
+    font-family: 'IBM Plex Serif';
+    font-style: italic;
+    font-weight: 600;
+    font-display: $carbon--font-display;
+    src: local('IBM Plex Serif SemiBold Italic'),
+      local('IBMPlexSerif-SemiBoldItalic'),
+      url(https://fonts.gstatic.com/s/ibmplexserif/v7/jizGREVNn1dOx-zrZ2X3pZvkTiUa4-o3m13pjfGj7oaMBg.woff2)
+        format('woff2');
+    unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
+  }
+  /* vietnamese */
+  @font-face {
+    font-family: 'IBM Plex Serif';
+    font-style: italic;
+    font-weight: 600;
+    font-display: $carbon--font-display;
+    src: local('IBM Plex Serif SemiBold Italic'),
+      local('IBMPlexSerif-SemiBoldItalic'),
+      url(https://fonts.gstatic.com/s/ibmplexserif/v7/jizGREVNn1dOx-zrZ2X3pZvkTiUa4-o3m1bpjfGj7oaMBg.woff2)
+        format('woff2');
+    unicode-range: U+0102-0103, U+0110-0111, U+1EA0-1EF9, U+20AB;
+  }
+  /* latin-ext */
+  @font-face {
+    font-family: 'IBM Plex Serif';
+    font-style: italic;
+    font-weight: 600;
+    font-display: $carbon--font-display;
+    src: local('IBM Plex Serif SemiBold Italic'),
+      local('IBMPlexSerif-SemiBoldItalic'),
+      url(https://fonts.gstatic.com/s/ibmplexserif/v7/jizGREVNn1dOx-zrZ2X3pZvkTiUa4-o3m1fpjfGj7oaMBg.woff2)
+        format('woff2');
+    unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB,
+      U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
+  }
+  /* latin */
+  @font-face {
+    font-family: 'IBM Plex Serif';
+    font-style: italic;
+    font-weight: 600;
+    font-display: $carbon--font-display;
+    src: local('IBM Plex Serif SemiBold Italic'),
+      local('IBMPlexSerif-SemiBoldItalic'),
+      url(https://fonts.gstatic.com/s/ibmplexserif/v7/jizGREVNn1dOx-zrZ2X3pZvkTiUa4-o3m1npjfGj7oY.woff2)
+        format('woff2');
+    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
+      U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212,
+      U+2215, U+FEFF, U+FFFD;
+  }
+  /* cyrillic-ext */
+  @font-face {
+    font-family: 'IBM Plex Serif';
+    font-style: normal;
+    font-weight: 300;
+    font-display: $carbon--font-display;
+    src: local('IBM Plex Serif Light'), local('IBMPlexSerif-Light'),
+      url(https://fonts.gstatic.com/s/ibmplexserif/v7/jizAREVNn1dOx-zrZ2X3pZvkTi20-SI5q1vjitOh3oc.woff2)
+        format('woff2');
+    unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F,
+      U+FE2E-FE2F;
+  }
+  /* cyrillic */
+  @font-face {
+    font-family: 'IBM Plex Serif';
+    font-style: normal;
+    font-weight: 300;
+    font-display: $carbon--font-display;
+    src: local('IBM Plex Serif Light'), local('IBMPlexSerif-Light'),
+      url(https://fonts.gstatic.com/s/ibmplexserif/v7/jizAREVNn1dOx-zrZ2X3pZvkTi20-SIwq1vjitOh3oc.woff2)
+        format('woff2');
+    unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
+  }
+  /* vietnamese */
+  @font-face {
+    font-family: 'IBM Plex Serif';
+    font-style: normal;
+    font-weight: 300;
+    font-display: $carbon--font-display;
+    src: local('IBM Plex Serif Light'), local('IBMPlexSerif-Light'),
+      url(https://fonts.gstatic.com/s/ibmplexserif/v7/jizAREVNn1dOx-zrZ2X3pZvkTi20-SI7q1vjitOh3oc.woff2)
+        format('woff2');
+    unicode-range: U+0102-0103, U+0110-0111, U+1EA0-1EF9, U+20AB;
+  }
+  /* latin-ext */
+  @font-face {
+    font-family: 'IBM Plex Serif';
+    font-style: normal;
+    font-weight: 300;
+    font-display: $carbon--font-display;
+    src: local('IBM Plex Serif Light'), local('IBMPlexSerif-Light'),
+      url(https://fonts.gstatic.com/s/ibmplexserif/v7/jizAREVNn1dOx-zrZ2X3pZvkTi20-SI6q1vjitOh3oc.woff2)
+        format('woff2');
+    unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB,
+      U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
+  }
+  /* latin */
+  @font-face {
+    font-family: 'IBM Plex Serif';
+    font-style: normal;
+    font-weight: 300;
+    font-display: $carbon--font-display;
+    src: local('IBM Plex Serif Light'), local('IBMPlexSerif-Light'),
+      url(https://fonts.gstatic.com/s/ibmplexserif/v7/jizAREVNn1dOx-zrZ2X3pZvkTi20-SI0q1vjitOh.woff2)
+        format('woff2');
+    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
+      U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212,
+      U+2215, U+FEFF, U+FFFD;
+  }
+  /* cyrillic-ext */
+  @font-face {
+    font-family: 'IBM Plex Serif';
+    font-style: normal;
+    font-weight: 400;
+    font-display: $carbon--font-display;
+    src: local('IBM Plex Serif'), local('IBMPlexSerif'),
+      url(https://fonts.gstatic.com/s/ibmplexserif/v7/jizDREVNn1dOx-zrZ2X3pZvkTiUS2zcZiVbJsNo.woff2)
+        format('woff2');
+    unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F,
+      U+FE2E-FE2F;
+  }
+  /* cyrillic */
+  @font-face {
+    font-family: 'IBM Plex Serif';
+    font-style: normal;
+    font-weight: 400;
+    font-display: $carbon--font-display;
+    src: local('IBM Plex Serif'), local('IBMPlexSerif'),
+      url(https://fonts.gstatic.com/s/ibmplexserif/v7/jizDREVNn1dOx-zrZ2X3pZvkTiUb2zcZiVbJsNo.woff2)
+        format('woff2');
+    unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
+  }
+  /* vietnamese */
+  @font-face {
+    font-family: 'IBM Plex Serif';
+    font-style: normal;
+    font-weight: 400;
+    font-display: $carbon--font-display;
+    src: local('IBM Plex Serif'), local('IBMPlexSerif'),
+      url(https://fonts.gstatic.com/s/ibmplexserif/v7/jizDREVNn1dOx-zrZ2X3pZvkTiUQ2zcZiVbJsNo.woff2)
+        format('woff2');
+    unicode-range: U+0102-0103, U+0110-0111, U+1EA0-1EF9, U+20AB;
+  }
+  /* latin-ext */
+  @font-face {
+    font-family: 'IBM Plex Serif';
+    font-style: normal;
+    font-weight: 400;
+    font-display: $carbon--font-display;
+    src: local('IBM Plex Serif'), local('IBMPlexSerif'),
+      url(https://fonts.gstatic.com/s/ibmplexserif/v7/jizDREVNn1dOx-zrZ2X3pZvkTiUR2zcZiVbJsNo.woff2)
+        format('woff2');
+    unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB,
+      U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
+  }
+  /* latin */
+  @font-face {
+    font-family: 'IBM Plex Serif';
+    font-style: normal;
+    font-weight: 400;
+    font-display: $carbon--font-display;
+    src: local('IBM Plex Serif'), local('IBMPlexSerif'),
+      url(https://fonts.gstatic.com/s/ibmplexserif/v7/jizDREVNn1dOx-zrZ2X3pZvkTiUf2zcZiVbJ.woff2)
+        format('woff2');
+    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
+      U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212,
+      U+2215, U+FEFF, U+FFFD;
+  }
+  /* cyrillic-ext */
+  @font-face {
+    font-family: 'IBM Plex Serif';
+    font-style: normal;
+    font-weight: 600;
+    font-display: $carbon--font-display;
+    src: local('IBM Plex Serif SemiBold'), local('IBMPlexSerif-SemiBold'),
+      url(https://fonts.gstatic.com/s/ibmplexserif/v7/jizAREVNn1dOx-zrZ2X3pZvkTi3A_yI5q1vjitOh3oc.woff2)
+        format('woff2');
+    unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F,
+      U+FE2E-FE2F;
+  }
+  /* cyrillic */
+  @font-face {
+    font-family: 'IBM Plex Serif';
+    font-style: normal;
+    font-weight: 600;
+    font-display: $carbon--font-display;
+    src: local('IBM Plex Serif SemiBold'), local('IBMPlexSerif-SemiBold'),
+      url(https://fonts.gstatic.com/s/ibmplexserif/v7/jizAREVNn1dOx-zrZ2X3pZvkTi3A_yIwq1vjitOh3oc.woff2)
+        format('woff2');
+    unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
+  }
+  /* vietnamese */
+  @font-face {
+    font-family: 'IBM Plex Serif';
+    font-style: normal;
+    font-weight: 600;
+    font-display: $carbon--font-display;
+    src: local('IBM Plex Serif SemiBold'), local('IBMPlexSerif-SemiBold'),
+      url(https://fonts.gstatic.com/s/ibmplexserif/v7/jizAREVNn1dOx-zrZ2X3pZvkTi3A_yI7q1vjitOh3oc.woff2)
+        format('woff2');
+    unicode-range: U+0102-0103, U+0110-0111, U+1EA0-1EF9, U+20AB;
+  }
+  /* latin-ext */
+  @font-face {
+    font-family: 'IBM Plex Serif';
+    font-style: normal;
+    font-weight: 600;
+    font-display: $carbon--font-display;
+    src: local('IBM Plex Serif SemiBold'), local('IBMPlexSerif-SemiBold'),
+      url(https://fonts.gstatic.com/s/ibmplexserif/v7/jizAREVNn1dOx-zrZ2X3pZvkTi3A_yI6q1vjitOh3oc.woff2)
+        format('woff2');
+    unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB,
+      U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
+  }
+  /* latin */
+  @font-face {
+    font-family: 'IBM Plex Serif';
+    font-style: normal;
+    font-weight: 600;
+    font-display: $carbon--font-display;
+    src: local('IBM Plex Serif SemiBold'), local('IBMPlexSerif-SemiBold'),
+      url(https://fonts.gstatic.com/s/ibmplexserif/v7/jizAREVNn1dOx-zrZ2X3pZvkTi3A_yI0q1vjitOh.woff2)
+        format('woff2');
+    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
+      U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212,
+      U+2215, U+FEFF, U+FFFD;
+  }
+}

package/scss/_inlined/font-face/_settings.scss

@@ -0,0 +1,12 @@
+//
+// 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.
+//
+
+/// Defines how font files are loaded and displayed by the browser
+/// @link https://css-tricks.com/almanac/properties/f/font-display/
+/// @access public
+/// @group @carbon/type
+$carbon--font-display: auto !default;

package/scss/_prefix.scss

@@ -5,4 +5,7 @@
 // LICENSE file in the root directory of this source tree.
 //
 
+/// @type String
+/// @access public
+/// @group @carbon/type
 $prefix: 'bx' !default;

package/scss/_reset.scss

@@ -8,23 +8,36 @@
 @import '@carbon/layout/scss/convert';
 @import 'font-family';
 
-/// Include a type reset that individuals can use in their projects for
-/// consistent rendering
-@mixin carbon--type-reset() {
+/// Include a type reset for a given body and mono font family
+/// @param {Number} $base-font-size [$carbon--base-font-size] - The base font size for your document
+/// @param {String} $body-font-family [carbon--font-family('sans')] - The font family used on the `<body>` element
+/// @param {String} $mono-font-family [carbon--font-family('mono')] - The font family used on elements that require mono fonts, like the `<code>` element
+/// @access public
+/// @group @carbon/type
+@mixin carbon--type-reset(
+  $base-font-size: $carbon--base-font-size,
+  $body-font-family: carbon--font-family('sans'),
+  $mono-font-family: carbon--font-family('mono')
+) {
   html {
-    font-size: $carbon--base-font-size;
+    font-size: $base-font-size;
   }
 
   body {
-    @include carbon--font-family('sans');
-    @include carbon--font-weight('regular');
-
+    font-family: $body-font-family;
+    font-weight: 400;
     text-rendering: optimizeLegibility;
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
   }
 
+  // IBM Plex uses semibold instead of bold, as a result we need to map
+  // tags that use `font-weight: bold` to the semibold value
   strong {
     font-weight: 600;
   }
+
+  code {
+    font-family: $mono-font-family;
+  }
 }

package/scss/_scale.scss

@@ -9,7 +9,9 @@
 
 /// Compute the type size for the given type scale step
 /// @param {Number} $step
-/// @return {px}
+/// @return {Number} In px
+/// @access public
+/// @group @carbon/type
 @function carbon--get-type-size($step) {
   @if $step == 1 {
     @return 12px;
@@ -18,8 +20,10 @@
   @return carbon--get-type-size($step - 1) + (floor(($step - 2) / 4) + 1) * 2;
 }
 
-/// Our type scale. Follows a custom formula for determining each step size.
-/// Supports sizes from 12px to 92px.
+/// Type scole follows a custom formula for determining each step size and supports sizes from 12px to 92px
+/// @type Map
+/// @access public
+/// @group @carbon/type
 $carbon--type-scale: ();
 @for $i from 1 through 23 {
   $carbon--type-scale: append(
@@ -30,19 +34,26 @@ $carbon--type-scale: ();
 
 /// Get the value of a specific step in the typescale
 /// @param {Number} $step
-/// @return {rem}
+/// @return {Number} In rem
+/// @access public
+/// @group @carbon/type
 @function carbon--type-scale($step) {
   @return nth($carbon--type-scale, $step);
 }
 
-/// Set the font-size value of a selector with the value at the given $step
+/// Set the font-size value of a selector with the value at the given `$step`
 /// @param {Number} $step
+/// @access public
+/// @group @carbon/type
 @mixin carbon--type-scale($step) {
   font-size: carbon--type-scale($step);
 }
 
 /// Alias of `type-scale` mixin.
 /// @param {Number} $step
+/// @alias carbon--type-scale
+/// @access public
+/// @group @carbon/type
 @mixin carbon--font-size($step) {
   font-size: carbon--type-scale($step);
 }