@carbon/type - npm Package Compare versions

Comparing version 10.1.1 to 10.2.0

es/index.js

@@ -362,2 +362,3 @@ import { baseFontSize, px, breakpoint, breakpoints, rem } from '@carbon/layout';
 };
+var productiveHeading01 = heading01;
 var heading02 = {
@@ -369,2 +370,3 @@ fontSize: rem(scale[2]),
 };
+var productiveHeading02 = heading02;
 var productiveHeading03 = {
@@ -388,2 +390,16 @@ fontSize: rem(scale[4]),
 };
+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({
@@ -660,6 +676,12 @@ fontSize: rem(scale[4]),
   heading01: heading01,
+  productiveHeading01: productiveHeading01,
   heading02: heading02,
+  productiveHeading02: productiveHeading02,
   productiveHeading03: productiveHeading03,
   productiveHeading04: productiveHeading04,
   productiveHeading05: productiveHeading05,
+  productiveHeading06: productiveHeading06,
+  productiveHeading07: productiveHeading07,
+  expressiveHeading01: expressiveHeading01,
+  expressiveHeading02: expressiveHeading02,
   expressiveHeading03: expressiveHeading03,
@@ -685,2 +707,2 @@ expressiveHeading04: expressiveHeading04,
 
-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 };

lib/index.js

@@ -366,2 +366,3 @@ 'use strict';
 };
+var productiveHeading01 = heading01;
 var heading02 = {
@@ -373,2 +374,3 @@ fontSize: layout.rem(scale[2]),
 };
+var productiveHeading02 = heading02;
 var productiveHeading03 = {
@@ -392,2 +394,16 @@ fontSize: layout.rem(scale[4]),
 };
+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({
@@ -664,6 +680,12 @@ fontSize: layout.rem(scale[4]),
   heading01: heading01,
+  productiveHeading01: productiveHeading01,
   heading02: heading02,
+  productiveHeading02: productiveHeading02,
   productiveHeading03: productiveHeading03,
   productiveHeading04: productiveHeading04,
   productiveHeading05: productiveHeading05,
+  productiveHeading06: productiveHeading06,
+  productiveHeading07: productiveHeading07,
+  expressiveHeading01: expressiveHeading01,
+  expressiveHeading02: expressiveHeading02,
   expressiveHeading03: expressiveHeading03,
@@ -708,6 +730,12 @@ expressiveHeading04: expressiveHeading04,
 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;
@@ -714,0 +742,0 @@ exports.expressiveHeading04 = expressiveHeading04;

package.json

 {
   "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",
@@ -29,11 +29,11 @@ "main": "lib/index.js",
   "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"
@@ -47,3 +47,3 @@ },
   },
-  "gitHead": "0931cfcf4a7636d6e3f5aff3ab8d7d7f2d4ecb99"
+  "gitHead": "e71825a0cf44f6f41fee7d2b0dd9c57d7bda126a"
 }

README.md

 # @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/):
 
@@ -15,4 +14,4 @@ ```bash
 
-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:
 
@@ -25,5 +24,5 @@ ```bash
 
-`@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:
 
@@ -39,4 +38,4 @@ | Feature                       | Description                                                                                                  |
 
-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:
 
@@ -53,5 +52,5 @@ ```scss
 
-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.
 
@@ -70,8 +69,8 @@ If you are using `@carbon/elements`, the import paths become:
 
-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`:
 
@@ -89,9 +88,8 @@ ```js
 
-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) .
 
@@ -106,5 +104,5 @@ You can include a token in your Sass file by writing:
 
-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:
 
@@ -119,5 +117,4 @@ ```scss
 
-`@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:
 
@@ -128,16 +125,14 @@ - IBM Plex Mono
 
-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:
 
@@ -150,4 +145,3 @@ ```scss
 
-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:
 
@@ -166,9 +160,8 @@ ```scss
 
-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:
 
@@ -192,5 +185,5 @@ ```scss
 
-`@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:
 
@@ -201,4 +194,5 @@ ```scss
 
-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:
 
@@ -211,4 +205,4 @@ ```scss
 
-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:
 
@@ -221,10 +215,8 @@ ```scss
 
-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:
 
@@ -238,15 +230,13 @@ ```scss
 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:
 
@@ -257,3 +247,4 @@ ```scss
 
-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:
 
@@ -268,4 +259,3 @@ ```scss
 
-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:
 
@@ -288,4 +278,4 @@ ```scss
 
-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:
 
@@ -296,6 +286,5 @@ - [Styled-components](./examples/styled-components)
 
-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) ! 👀
 
@@ -302,0 +291,0 @@ ## 📝 License

src/__tests__/exports-test.js

@@ -15,40 +15,46 @@ /**
     expect(Object.keys(CarbonType)).toMatchInlineSnapshot(`
-Array [
-  "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",
-]
-`);
+      Array [
+        "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",
+      ]
+    `);
   });
 });

src/styles.js

@@ -83,2 +83,4 @@ /**
 
+export const productiveHeading01 = heading01;
+
 export const heading02 = {
@@ -91,2 +93,4 @@ fontSize: rem(scale[2]),
 
+export const productiveHeading02 = heading02;
+
 export const productiveHeading03 = {
@@ -113,2 +117,20 @@ fontSize: rem(scale[4]),
 
+export const productiveHeading06 = {
+  fontSize: rem(scale[9]),
+  fontWeight: fontWeights.light,
+  lineHeight: rem(50),
+  letterSpacing: 0,
+};
+
+export const productiveHeading07 = {
+  fontSize: rem(scale[11]),
+  fontWeight: fontWeights.light,
+  lineHeight: rem(64),
+  letterSpacing: 0,
+};
+
+export const expressiveHeading01 = heading01;
+
+export const expressiveHeading02 = heading02;
+
 export const expressiveHeading03 = fluid({
@@ -115,0 +137,0 @@ fontSize: rem(scale[4]),

umd/index.js

@@ -366,2 +366,3 @@ (function (global, factory) {
   };
+  var productiveHeading01 = heading01;
   var heading02 = {
@@ -373,2 +374,3 @@ fontSize: layout.rem(scale[2]),
   };
+  var productiveHeading02 = heading02;
   var productiveHeading03 = {
@@ -392,2 +394,16 @@ fontSize: layout.rem(scale[4]),
   };
+  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({
@@ -664,6 +680,12 @@ fontSize: layout.rem(scale[4]),
     heading01: heading01,
+    productiveHeading01: productiveHeading01,
     heading02: heading02,
+    productiveHeading02: productiveHeading02,
     productiveHeading03: productiveHeading03,
     productiveHeading04: productiveHeading04,
     productiveHeading05: productiveHeading05,
+    productiveHeading06: productiveHeading06,
+    productiveHeading07: productiveHeading07,
+    expressiveHeading01: expressiveHeading01,
+    expressiveHeading02: expressiveHeading02,
     expressiveHeading03: expressiveHeading03,
@@ -708,6 +730,12 @@ expressiveHeading04: expressiveHeading04,
   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;
@@ -714,0 +742,0 @@ exports.expressiveHeading04 = expressiveHeading04;

No alert changes

Improved metrics

Total package byte prevSize

316554

increased by50.15%

Number of package files

59

increased by55.26%

Lines of code

2897

increased by3.61%

Worsened metrics

Number of lines in readme file

274

decreased by-3.86%

Dependency changes

• + Added@carbon/import-once@10.2.0(transitive)

• + Added@carbon/layout@10.2.0(transitive)

• - Removed@carbon/import-once@10.1.0(transitive)

• - Removed@carbon/layout@10.1.1(transitive)

• Updated@carbon/import-once@10.2.0

• Updated@carbon/layout@10.2.0