@carbon/type 10.1.1 → 10.2.0

package/LICENSE

@@ -178,7 +178,7 @@
    APPENDIX: How to apply the Apache License to your work.
 
       To apply the Apache License to your work, attach the following
-      boilerplate notice, with the fields enclosed by brackets "[]"
+      boilerplate notice, with the fields enclosed by brackets "{}"
       replaced with your own identifying information. (Don't include
       the brackets!)  The text should be enclosed in the appropriate
       comment syntax for the file format. We also recommend that a
@@ -186,7 +186,7 @@
       same "printed page" as the copyright notice for easier
       identification within third-party archives.
 
-   Copyright 2018 IBM Corp.
+   Copyright 2015 IBM Corp.
 
    Licensed under the Apache License, Version 2.0 (the "License");
    you may not use this file except in compliance with the License.

package/README.md

@@ -1,19 +1,18 @@
 # @carbon/type
 
-> Typography for digital and software products using the Carbon Design
-> System
+> Typography for digital and software products using the Carbon Design System
 
 ## Getting started
 
-To install `@carbon/type` in your project, you will need to run the
-following command using [npm](https://www.npmjs.com/):
+To install `@carbon/type` in your project, you will need to run the following
+command using [npm](https://www.npmjs.com/):
 
 ```bash
 npm install -S @carbon/type
 ```
 
-If you prefer [Yarn](https://yarnpkg.com/en/), use the following
-command instead:
+If you prefer [Yarn](https://yarnpkg.com/en/), use the following command
+instead:
 
 ```bash
 yarn add @carbon/type
@@ -21,9 +20,9 @@ yarn add @carbon/type
 
 ## Usage
 
-`@carbon/type` provides a variety of ways to work with typography from
-the IBM Design Language. You can use all of these features either in
-JavaScript or Sass. These features include:
+`@carbon/type` provides a variety of ways to work with typography from the IBM
+Design Language. You can use all of these features either in JavaScript or Sass.
+These features include:
 
 | Feature                       | Description                                                                                                  |
 | ----------------------------- | ------------------------------------------------------------------------------------------------------------ |
@@ -34,8 +33,8 @@ JavaScript or Sass. These features include:
 | [Scale](#type-scale)          | Provides the type scale. Can access the size at any given step (step 1, 2, 3, etc)                           |
 | [Styles](#type-styles)        | Provides type styles for your application (heading-01, body-long-01, etc)                                    |
 
-To include `@carbon/type` in your project, you can write the following
-in your Sass file:
+To include `@carbon/type` in your project, you can write the following in your
+Sass file:
 
 ```scss
 @import '@carbon/type/scss/type';
@@ -47,9 +46,9 @@ in your Sass file:
 @include carbon--font-face-sans();
 ```
 
-This should include the default type reset from the project, in
-addition to font-face definitions for IBM Plex Mono and IBM Plex Sans
-that come from Google Fonts.
+This should include the default type reset from the project, in addition to
+font-face definitions for IBM Plex Mono and IBM Plex Sans that come from Google
+Fonts.
 
 If you are using `@carbon/elements`, the import paths become:
 
@@ -63,12 +62,12 @@ For example:
 @import '@carbon/elements/scss/type/styles';
 ```
 
-In addition, you will need to setup `node-sass` so that `node_modules`
-is included in the `includePaths` option. Often times, the tool that
-you are using to build Sass files in your project should expose this
-option for you to set.
+In addition, you will need to setup `node-sass` so that `node_modules` is
+included in the `includePaths` option. Often times, the tool that you are using
+to build Sass files in your project should expose this option for you to set.
 
-For example, if you are using Webpack you would use `node-sass` and `sass-loader` with the following configuration for `includePaths`:
+For example, if you are using Webpack you would use `node-sass` and
+`sass-loader` with the following configuration for `includePaths`:
 
 ```js
 {
@@ -81,13 +80,12 @@ For example, if you are using Webpack you would use `node-sass` and `sass-loader
 
 ### Type styles
 
-Instead of using a type scale, `@carbon/type` provides tokens that
-represent what we call type styles. These tokens have a variety of
-properties for styling how text is rendered on a page.
+Instead of using a type scale, `@carbon/type` provides tokens that represent
+what we call type styles. These tokens have a variety of properties for styling
+how text is rendered on a page.
 
 You can find a full reference of the type styles that are available
-[here](https://next.carbondesignsystem.com/guidelines/typography/productive)
-.
+[here](https://next.carbondesignsystem.com/guidelines/typography/productive) .
 
 You can include a token in your Sass file by writing:
 
@@ -97,9 +95,9 @@ You can include a token in your Sass file by writing:
 @include carbon--type-style('token-name');
 ```
 
-In addition, if the type style you are using has a fluid style then
-you can pass in `true` as the second argument to `carbon--type-style`
-to enable fluid styles. For example:
+In addition, if the type style you are using has a fluid style then you can pass
+in `true` as the second argument to `carbon--type-style` to enable fluid styles.
+For example:
 
 ```scss
 @import '@carbon/type/scss/styles';
@@ -109,28 +107,25 @@ to enable fluid styles. For example:
 
 ### Font-face
 
-`@carbon/type` supports three font-face definitions that you can use to
-add IBM Plex to your project. These font-face definitions include
-support for:
+`@carbon/type` supports three font-face definitions that you can use to add IBM
+Plex to your project. These font-face definitions include support for:
 
 - IBM Plex Mono
 - IBM Plex Sans
 - IBM Plex Serif
 
-For most projects, only IBM Plex Mono and IBM Plex Sans is necessary.
-We also provide IBM Plex Serif if you are building an editorial or
-marketing project.
+For most projects, only IBM Plex Mono and IBM Plex Sans is necessary. We also
+provide IBM Plex Serif if you are building an editorial or marketing project.
 
-These font-face definitions are pulling the above fonts from Google
-Fonts. As a result, they are not intended to be used as a production
-asset for your project. While you can depend on these for
-bootstrapping your project, we highly recommend using the fonts from
-the `@ibm/plex` package and hosting them on a global CDN.
+These font-face definitions are pulling the above fonts from Google Fonts. As a
+result, they are not intended to be used as a production asset for your project.
+While you can depend on these for bootstrapping your project, we highly
+recommend using the fonts from the `@ibm/plex` package and hosting them on a
+global CDN.
 
-You can include each font-face definition by including the
-corresponding file and calling its mixin. For example, if you wanted
-to include IBM Plex Mono in your project you would write the following
-in your Sass file:
+You can include each font-face definition by including the corresponding file
+and calling its mixin. For example, if you wanted to include IBM Plex Mono in
+your project you would write the following in your Sass file:
 
 ```scss
 @import '@carbon/type/scss/font-face/mono';
@@ -138,8 +133,7 @@ in your Sass file:
 @include carbon--font-face-mono();
 ```
 
-Similarly, you can include IBM Plex Sans and IBM Plex Serif by
-writing:
+Similarly, you can include IBM Plex Sans and IBM Plex Serif by writing:
 
 ```scss
 @import '@carbon/type/scss/font-face/mono';
@@ -153,13 +147,12 @@ writing:
 
 ### Type classes
 
-The recommended way to style your application will be to use our [type
-styles](#type-styles). However, we also offer helper CSS classes for
-specific use-cases. These are also helpful when quickly prototyping a
-project.
+The recommended way to style your application will be to use our
+[type styles](#type-styles). However, we also offer helper CSS classes for
+specific use-cases. These are also helpful when quickly prototyping a project.
 
-You can include type classes in your project by writing the following
-in your Sass file:
+You can include type classes in your project by writing the following in your
+Sass file:
 
 ```scss
 @import '@carbon/type/scss/classes';
@@ -178,16 +171,17 @@ in your Sass file:
 
 ### Font family
 
-`@carbon/type` provides the font stacks for all the IBM Plex fonts
-available. You can access the font family information by including the
-following import in your Sass file:
+`@carbon/type` provides the font stacks for all the IBM Plex fonts available.
+You can access the font family information by including the following import in
+your Sass file:
 
 ```scss
 @import '@carbon/type/scss/font-family';
 ```
 
-The font stacks are available under the `$carbon--font-families`
-variable. You can also access a specific font family by using the `carbon--font-family` function by doing:
+The font stacks are available under the `$carbon--font-families` variable. You
+can also access a specific font family by using the `carbon--font-family`
+function by doing:
 
 ```scss
 .my-selector {
@@ -195,8 +189,8 @@ variable. You can also access a specific font family by using the `carbon--font-
 }
 ```
 
-You can also use the `carbon--font-family` mixin to automatically set
-the `font-family` property for you:
+You can also use the `carbon--font-family` mixin to automatically set the
+`font-family` property for you:
 
 ```scss
 .my-selector {
@@ -204,14 +198,12 @@ the `font-family` property for you:
 }
 ```
 
-You can see all the available font families in `$carbon--font-families`
-.
+You can see all the available font families in `$carbon--font-families` .
 
 ### Reset
 
-An optional type reset is provided under the `carbon--type-reset`
-mixin. You can include this mixin by writing the following in your
-Sass file:
+An optional type reset is provided under the `carbon--type-reset` mixin. You can
+include this mixin by writing the following in your Sass file:
 
 ```scss
 @import '@carbon/type/scss/reset';
@@ -220,25 +212,24 @@ Sass file:
 ```
 
 This reset sets some top-level properties on `html` and `body`, namely
-`font-size`, `font-family`, and some `text-rendering` options. We also
-map the `strong` tag to the semibold font weight.
+`font-size`, `font-family`, and some `text-rendering` options. We also map the
+`strong` tag to the semibold font weight.
 
 ### Type scale
 
-A type scale is provided through the `$carbon--type-scale` variable
-and corresponding `carbon--type-scale` function and mixin. However,
-for specifying type styles, the recommendation is to use [type styles](#type-styles)
-.
+A type scale is provided through the `$carbon--type-scale` variable and
+corresponding `carbon--type-scale` function and mixin. However, for specifying
+type styles, the recommendation is to use [type styles](#type-styles) .
 
-If you are looking to use the type scale, you can include all the
-scale-related utilities and variables by writing the following in your
-Sass file:
+If you are looking to use the type scale, you can include all the scale-related
+utilities and variables by writing the following in your Sass file:
 
 ```scss
 @import '@carbon/type/scss/scale';
 ```
 
-You can access a specific step in the type scale by using the `carbon--type-scale` function:
+You can access a specific step in the type scale by using the
+`carbon--type-scale` function:
 
 ```scss
 @import '@carbon/type/scss/scale';
@@ -248,8 +239,7 @@ You can access a specific step in the type scale by using the `carbon--type-scal
 }
 ```
 
-There is also a `type-scale` mixin that will set `font-size` for your
-directly:
+There is also a `type-scale` mixin that will set `font-size` for your directly:
 
 ```scss
 @import '@carbon/type/scss/scale';
@@ -267,17 +257,16 @@ If you're looking for `@carbon/type` API documentation, check out:
 
 ## 📚 Examples
 
-If you're looking for more examples on how to use `@carbon/type`, we
-have some examples that you can check out:
+If you're looking for more examples on how to use `@carbon/type`, we have some
+examples that you can check out:
 
 - [Styled-components](./examples/styled-components)
 
 ## 🙌 Contributing
 
-We're always looking for contributors to help us fix bugs, build new
-features, or help us improve the project documentation. If you're
-interested, definitely check out our [Contributing Guide](/.github/CONTRIBUTING.md)
-! 👀
+We're always looking for contributors to help us fix bugs, build new features,
+or help us improve the project documentation. If you're interested, definitely
+check out our [Contributing Guide](/.github/CONTRIBUTING.md) ! 👀
 
 ## 📝 License
 

package/es/index.js

@@ -359,12 +359,14 @@ var heading01 = {
   lineHeight: rem(18),
   letterSpacing: px(0.16)
 };
+var productiveHeading01 = heading01;
 var heading02 = {
   fontSize: rem(scale[2]),
   fontWeight: fontWeights.semibold,
   lineHeight: rem(22),
   letterSpacing: 0
 };
+var productiveHeading02 = heading02;
 var productiveHeading03 = {
   fontSize: rem(scale[4]),
   fontWeight: fontWeights.regular,
@@ -383,6 +385,20 @@ var productiveHeading05 = {
   lineHeight: rem(40),
   letterSpacing: 0
 };
+var productiveHeading06 = {
+  fontSize: rem(scale[9]),
+  fontWeight: fontWeights.light,
+  lineHeight: rem(50),
+  letterSpacing: 0
+};
+var productiveHeading07 = {
+  fontSize: rem(scale[11]),
+  fontWeight: fontWeights.light,
+  lineHeight: rem(64),
+  letterSpacing: 0
+};
+var expressiveHeading01 = heading01;
+var expressiveHeading02 = heading02;
 var expressiveHeading03 = fluid({
   fontSize: rem(scale[4]),
   fontWeight: fontWeights.regular,
@@ -654,10 +670,16 @@ var styles = /*#__PURE__*/Object.freeze({
   code01: code01,
   code02: code02,
   heading01: heading01,
+  productiveHeading01: productiveHeading01,
   heading02: heading02,
+  productiveHeading02: productiveHeading02,
   productiveHeading03: productiveHeading03,
   productiveHeading04: productiveHeading04,
   productiveHeading05: productiveHeading05,
+  productiveHeading06: productiveHeading06,
+  productiveHeading07: productiveHeading07,
+  expressiveHeading01: expressiveHeading01,
+  expressiveHeading02: expressiveHeading02,
   expressiveHeading03: expressiveHeading03,
   expressiveHeading04: expressiveHeading04,
   expressiveHeading05: expressiveHeading05,
@@ -678,4 +700,4 @@ var styles = /*#__PURE__*/Object.freeze({
  * LICENSE file in the root directory of this source tree.
  */
 
-export { fontFamilies, fontFamily, fontWeights, fontWeight, print, reset, getTypeSize, scale, styles, caption01, label01, helperText01, bodyShort01, bodyLong01, bodyShort02, bodyLong02, code01, code02, heading01, heading02, productiveHeading03, productiveHeading04, productiveHeading05, expressiveHeading03, expressiveHeading04, expressiveHeading05, expressiveHeading06, expressiveParagraph01, quotation01, quotation02, display01, display02, display03, display04 };
+export { fontFamilies, fontFamily, fontWeights, fontWeight, print, reset, getTypeSize, scale, styles, caption01, label01, helperText01, bodyShort01, bodyLong01, bodyShort02, bodyLong02, code01, code02, heading01, productiveHeading01, heading02, productiveHeading02, productiveHeading03, productiveHeading04, productiveHeading05, productiveHeading06, productiveHeading07, expressiveHeading01, expressiveHeading02, expressiveHeading03, expressiveHeading04, expressiveHeading05, expressiveHeading06, expressiveParagraph01, quotation01, quotation02, display01, display02, display03, display04 };

package/lib/index.js

@@ -363,12 +363,14 @@ var heading01 = {
   lineHeight: layout.rem(18),
   letterSpacing: layout.px(0.16)
 };
+var productiveHeading01 = heading01;
 var heading02 = {
   fontSize: layout.rem(scale[2]),
   fontWeight: fontWeights.semibold,
   lineHeight: layout.rem(22),
   letterSpacing: 0
 };
+var productiveHeading02 = heading02;
 var productiveHeading03 = {
   fontSize: layout.rem(scale[4]),
   fontWeight: fontWeights.regular,
@@ -387,6 +389,20 @@ var productiveHeading05 = {
   lineHeight: layout.rem(40),
   letterSpacing: 0
 };
+var productiveHeading06 = {
+  fontSize: layout.rem(scale[9]),
+  fontWeight: fontWeights.light,
+  lineHeight: layout.rem(50),
+  letterSpacing: 0
+};
+var productiveHeading07 = {
+  fontSize: layout.rem(scale[11]),
+  fontWeight: fontWeights.light,
+  lineHeight: layout.rem(64),
+  letterSpacing: 0
+};
+var expressiveHeading01 = heading01;
+var expressiveHeading02 = heading02;
 var expressiveHeading03 = fluid({
   fontSize: layout.rem(scale[4]),
   fontWeight: fontWeights.regular,
@@ -658,10 +674,16 @@ var styles = /*#__PURE__*/Object.freeze({
   code01: code01,
   code02: code02,
   heading01: heading01,
+  productiveHeading01: productiveHeading01,
   heading02: heading02,
+  productiveHeading02: productiveHeading02,
   productiveHeading03: productiveHeading03,
   productiveHeading04: productiveHeading04,
   productiveHeading05: productiveHeading05,
+  productiveHeading06: productiveHeading06,
+  productiveHeading07: productiveHeading07,
+  expressiveHeading01: expressiveHeading01,
+  expressiveHeading02: expressiveHeading02,
   expressiveHeading03: expressiveHeading03,
   expressiveHeading04: expressiveHeading04,
   expressiveHeading05: expressiveHeading05,
@@ -701,10 +723,16 @@ exports.bodyLong02 = bodyLong02;
 exports.code01 = code01;
 exports.code02 = code02;
 exports.heading01 = heading01;
+exports.productiveHeading01 = productiveHeading01;
 exports.heading02 = heading02;
+exports.productiveHeading02 = productiveHeading02;
 exports.productiveHeading03 = productiveHeading03;
 exports.productiveHeading04 = productiveHeading04;
 exports.productiveHeading05 = productiveHeading05;
+exports.productiveHeading06 = productiveHeading06;
+exports.productiveHeading07 = productiveHeading07;
+exports.expressiveHeading01 = expressiveHeading01;
+exports.expressiveHeading02 = expressiveHeading02;
 exports.expressiveHeading03 = expressiveHeading03;
 exports.expressiveHeading04 = expressiveHeading04;
 exports.expressiveHeading05 = expressiveHeading05;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/type",
   "description": "Typography for digital and software products using the Carbon Design System",
-  "version": "10.1.1",
+  "version": "10.2.0",
   "license": "Apache-2.0",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -26,15 +26,15 @@
     "access": "public"
   },
   "scripts": {
-    "build": "yarn clean && bundler bundle src/index.js --name CarbonType && bundler sassdoc 'scss'",
-    "clean": "rimraf css es lib umd"
+    "build": "yarn clean && bundler bundle src/index.js --name CarbonType && bundler sassdoc 'scss/**/*.scss' -i '**/{_inlined,vendor}**' && bundler inline && bundler check 'scss/*.scss'",
+    "clean": "rimraf css es lib umd scss/_inlined scss/vendor"
   },
   "dependencies": {
-    "@carbon/import-once": "10.1.0",
-    "@carbon/layout": "10.1.1"
+    "@carbon/import-once": "10.2.0",
+    "@carbon/layout": "10.2.0"
   },
   "devDependencies": {
-    "@carbon/bundler": "10.1.1",
+    "@carbon/bundler": "10.2.0",
     "rimraf": "^2.6.2"
   },
   "eyeglass": {
@@ -43,5 +43,5 @@
     "sassDir": "scss",
     "needs": "^1.3.0"
   },
-  "gitHead": "0931cfcf4a7636d6e3f5aff3ab8d7d7f2d4ecb99"
+  "gitHead": "e71825a0cf44f6f41fee7d2b0dd9c57d7bda126a"
 }

package/scss/_inlined/_classes.scss

@@ -0,0 +1,41 @@
+//
+// 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 'prefix';
+@import 'styles';
+@import 'font-family';
+
+/// Create type classes for font families, weights, styles
+/// @access public
+/// @group @carbon/type
+@mixin carbon--type-classes {
+  // Font families
+  @each $name, $value in $carbon--font-families {
+    .#{$prefix}--type-#{$name} {
+      font-family: $value;
+    }
+  }
+
+  // Font weights
+  @each $name, $value in $carbon--font-weights {
+    .#{$prefix}--type-#{$name} {
+      font-weight: $value;
+    }
+  }
+
+  // Font styles
+  .#{$prefix}--type-italic {
+    font-style: italic;
+  }
+
+  // Type styles
+  @each $name, $value in $tokens {
+    .#{$prefix}--type-#{$name} {
+      @include carbon--type-style($name, map-has-key($value, breakpoints));
+    }
+  }
+}

package/scss/_inlined/_font-family.scss

@@ -0,0 +1,70 @@
+//
+// 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.
+//
+
+/// Font family fallbacks for: IBM Plex Mono, IBM Plex Sans, IBM Plex Sans
+/// Condensed, IBM Plex Sans Hebrew, and IBM Plex Serif
+/// @type Map
+/// @access public
+/// @group @carbon/type
+$carbon--font-families: (
+  'mono':
+    unquote(
+      "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace"
+    ),
+  'sans': unquote("'IBM Plex Sans', 'Helvetica Neue', Arial, sans-serif"),
+  'sans-condensed':
+    unquote("'IBM Plex Sans Condensed', 'Helvetica Neue', Arial, sans-serif"),
+  'sans-hebrew':
+    unquote(
+      "'IBM Plex Sans Hebrew', 'Helvetica Hebrew', 'Arial Hebrew', sans-serif"
+    ),
+  'serif': unquote("'IBM Plex Serif', 'Georgia', Times, serif"),
+);
+
+/// Get the font-family for an IBM Plex font
+/// @param {String} $name
+/// @return {String}
+/// @access public
+/// @group @carbon/type
+@function carbon--font-family($name) {
+  @return map-get($carbon--font-families, $name);
+}
+
+/// Include the `font-family` definition for the given name in your selector
+/// @param {String} $name
+/// @access public
+/// @group @carbon/type
+@mixin carbon--font-family($name) {
+  font-family: carbon--font-family($name);
+}
+
+/// Suggested font weights to be used in product
+/// @type Map
+/// @access public
+/// @group @carbon/type
+$carbon--font-weights: (
+  'light': 300,
+  'regular': 400,
+  'semibold': 600,
+);
+
+/// Retrieve the font-weight value for a given name
+/// @param {String} $weight
+/// @return {Number}
+/// @access public
+/// @group @carbon/type
+@function carbon--font-weight($weight) {
+  @return map-get($carbon--font-weights, $weight);
+}
+
+/// Set the `font-weight` property with the value for a given name
+/// @param {String} $weight
+/// @access public
+/// @group @carbon/type
+@mixin carbon--font-weight($weight) {
+  font-weight: carbon--font-weight($weight);
+}

package/scss/_inlined/_prefix.scss

@@ -0,0 +1,11 @@
+//
+// 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.
+//
+
+/// @type String
+/// @access public
+/// @group @carbon/type
+$prefix: 'bx' !default;

package/scss/_inlined/_reset.scss

@@ -0,0 +1,43 @@
+//
+// 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 '../vendor/@carbon/layout/convert';
+@import 'font-family';
+
+/// 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: $base-font-size;
+  }
+
+  body {
+    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;
+  }
+}