@carbon/type - npm Package Compare versions

Comparing version 0.0.1-alpha.31 to 0.0.1-alpha.32

es/index.js

@@ -1,2 +0,2 @@
-import { baseFontSize, px, rem, breakpoint, breakpoints } from '@carbon/layout';
+import { baseFontSize, px, breakpoint, breakpoints, rem } from '@carbon/layout';
 
@@ -142,17 +142,2 @@ /**
 
-/**
- * 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.
- */
-var spacing = {
-  margin01: rem(16),
-  margin02: rem(24),
-  margin03: rem(32),
-  layout01: rem(48),
-  layout02: rem(64),
-  layout03: rem(80)
-};
-
 function _typeof(obj) {
@@ -306,3 +291,3 @@ if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") {
 function subtract(a, b) {
-  return parseFloat(a, 10) - parseFloat(b, 10);
+  return parseFloat(a) - parseFloat(b);
 }
@@ -393,3 +378,3 @@
 };
-var heading03 = {
+var productiveHeading03 = {
   fontFamily: fontFamilies.sans,
@@ -415,2 +400,18 @@ fontSize: rem(scale[4]),
 };
+var expressiveHeading03 = fluid({
+  fontFamily: fontFamilies.sans,
+  fontSize: rem(scale[4]),
+  fontWeight: fontWeights.regular,
+  lineHeight: '130%',
+  letterSpacing: 0,
+  breakpoints: {
+    xlg: {
+      fontSize: rem(scale[4]),
+      lineHeight: '125%'
+    },
+    max: {
+      fontSize: rem(scale[5])
+    }
+  }
+});
 var expressiveHeading04 = fluid({
@@ -420,3 +421,3 @@ fontFamily: fontFamilies.sans,
   fontWeight: fontWeights.regular,
-  lineHeight: '107%',
+  lineHeight: '129%',
   letterSpacing: 0,
@@ -659,5 +660,6 @@ breakpoints: {
   heading02: heading02,
-  heading03: heading03,
+  productiveHeading03: productiveHeading03,
   productiveHeading04: productiveHeading04,
   productiveHeading05: productiveHeading05,
+  expressiveHeading03: expressiveHeading03,
   expressiveHeading04: expressiveHeading04,
@@ -681,2 +683,2 @@ expressiveHeading05: expressiveHeading05,
 
-export { fontFamilies, fontFamily, fontWeights, fontWeight, print, reset, getTypeSize, scale, styles, spacing, caption01, label01, helperText01, bodyShort01, bodyLong01, bodyShort02, bodyLong02, code01, code02, heading01, heading02, heading03, productiveHeading04, productiveHeading05, expressiveHeading04, expressiveHeading05, 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, heading02, productiveHeading03, productiveHeading04, productiveHeading05, expressiveHeading03, expressiveHeading04, expressiveHeading05, expressiveParagraph01, quotation01, quotation02, display01, display02, display03, display04 };

lib/index.js

@@ -146,17 +146,2 @@ 'use strict';
 
-/**
- * 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.
- */
-var spacing = {
-  margin01: layout.rem(16),
-  margin02: layout.rem(24),
-  margin03: layout.rem(32),
-  layout01: layout.rem(48),
-  layout02: layout.rem(64),
-  layout03: layout.rem(80)
-};
-
 function _typeof(obj) {
@@ -310,3 +295,3 @@ if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") {
 function subtract(a, b) {
-  return parseFloat(a, 10) - parseFloat(b, 10);
+  return parseFloat(a) - parseFloat(b);
 }
@@ -397,3 +382,3 @@
 };
-var heading03 = {
+var productiveHeading03 = {
   fontFamily: fontFamilies.sans,
@@ -419,2 +404,18 @@ fontSize: layout.rem(scale[4]),
 };
+var expressiveHeading03 = fluid({
+  fontFamily: fontFamilies.sans,
+  fontSize: layout.rem(scale[4]),
+  fontWeight: fontWeights.regular,
+  lineHeight: '130%',
+  letterSpacing: 0,
+  breakpoints: {
+    xlg: {
+      fontSize: layout.rem(scale[4]),
+      lineHeight: '125%'
+    },
+    max: {
+      fontSize: layout.rem(scale[5])
+    }
+  }
+});
 var expressiveHeading04 = fluid({
@@ -424,3 +425,3 @@ fontFamily: fontFamilies.sans,
   fontWeight: fontWeights.regular,
-  lineHeight: '107%',
+  lineHeight: '129%',
   letterSpacing: 0,
@@ -663,5 +664,6 @@ breakpoints: {
   heading02: heading02,
-  heading03: heading03,
+  productiveHeading03: productiveHeading03,
   productiveHeading04: productiveHeading04,
   productiveHeading05: productiveHeading05,
+  expressiveHeading03: expressiveHeading03,
   expressiveHeading04: expressiveHeading04,
@@ -694,3 +696,2 @@ expressiveHeading05: expressiveHeading05,
 exports.styles = styles;
-exports.spacing = spacing;
 exports.caption01 = caption01;
@@ -707,5 +708,6 @@ exports.label01 = label01;
 exports.heading02 = heading02;
-exports.heading03 = heading03;
+exports.productiveHeading03 = productiveHeading03;
 exports.productiveHeading04 = productiveHeading04;
 exports.productiveHeading05 = productiveHeading05;
+exports.expressiveHeading03 = expressiveHeading03;
 exports.expressiveHeading04 = expressiveHeading04;
@@ -712,0 +714,0 @@ exports.expressiveHeading05 = expressiveHeading05;

package.json

 {
   "name": "@carbon/type",
   "description": "Typography for digital and software products using the Carbon Design System",
-  "version": "0.0.1-alpha.31",
+  "version": "0.0.1-alpha.32",
   "license": "Apache-2.0",
@@ -33,7 +33,7 @@ "main": "lib/index.js",
   "dependencies": {
-    "@carbon/import-once": "0.0.1-alpha.31",
-    "@carbon/layout": "0.0.1-alpha.31"
+    "@carbon/import-once": "0.0.1-alpha.32",
+    "@carbon/layout": "0.0.1-alpha.32"
   },
   "devDependencies": {
-    "@carbon/bundler": "0.0.1-alpha.31",
+    "@carbon/bundler": "0.0.1-alpha.32",
     "rimraf": "^2.6.2"
@@ -40,0 +40,0 @@ },

README.md

@@ -28,12 +28,227 @@ # @carbon/type
 
-| Feature      | Description                                                                                                  |
-| ------------ | ------------------------------------------------------------------------------------------------------------ |
-| Font face    | Include IBM Plex™ font faces in your application. Uses Google fonts                                          |
-| Type classes | Helpers to use type styles directly. Not included by default                                                 |
-| Font family  | Defines the font stack for IBM Plex™ in your application, provides helpers for working with font definitions |
-| Reset        | Provides a high-level CSS Reset to use in your project                                                       |
-| Scale        | Provides the type scale. Can access the size at any given step                                               |
-| Spacing      | Provides a high-level spacing scale to be used when laying out type                                          |
-| Styles       | Provides type styles for your application                                                                    |
+| Feature                       | Description                                                                                                  |
+| ----------------------------- | ------------------------------------------------------------------------------------------------------------ |
+| [Font face](#font-face)       | Include IBM Plex™ font faces in your application. Uses Google fonts                                          |
+| [Type classes](#type-classes) | Helpers to use type styles directly. Not included by default                                                 |
+| [Font family](#font-family)   | Defines the font stack for IBM Plex™ in your application, provides helpers for working with font definitions |
+| [Reset](#reset)               | Provides a high-level CSS Reset to use in your project                                                       |
+| [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:
+
+```scss
+@import '@carbon/type/scss/type';
+@import '@carbon/type/scss/font-face/mono';
+@import '@carbon/type/scss/font-face/sans';
+
+@include carbon--type-reset();
+@include carbon--font-face-mono();
+@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.
+
+If you are using `@carbon/elements`, the import paths become:
+
+```scss
+@import '@carbon/elements/scss/type/path-to-import';
+```
+
+For example:
+
+```scss
+@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.
+
+For example, if you are using Webpack you would use `node-sass` and
+`sass-loader` with the following configuration for `includePaths`:
+
+```js
+{
+  loader: 'sass-loader',
+  options: {
+    includePaths: ['node_modules'],
+  },
+}
+```
+
+### 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.
+
+You can find a full reference of the type styles that are available
+[here](https://next.carbondesignsystem.com/guidelines/typography/productive).
+
+You can include a token in your Sass file by writing:
+
+```scss
+@import '@carbon/type/scss/styles';
+
+@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:
+
+```scss
+@import '@carbon/type/scss/styles';
+
+@include carbon--type-style('token-name', true);
+```
+
+### 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:
+
+- 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.
+
+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:
+
+```scss
+@import '@carbon/type/scss/font-face/mono';
+
+@include carbon--font-face-mono();
+```
+
+Similarly, you can include IBM Plex Sans and IBM Plex Serif by writing:
+
+```scss
+@import '@carbon/type/scss/font-face/mono';
+@import '@carbon/type/scss/font-face/sans';
+@import '@carbon/type/scss/font-face/serif';
+
+@include carbon--font-face-mono();
+@include carbon--font-face-sans();
+@include carbon--font-face-serif();
+```
+
+### 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.
+
+You can include type classes in your project by writing the following in your
+Sass file:
+
+```scss
+@import '@carbon/type/scss/classes';
+```
+
+| Selector                 | Description                               |
+| ------------------------ | ----------------------------------------- |
+| `.bx--type-mono`         | Specify the font face as IBM Plex Mono    |
+| `.bx--type-sans`         | Specify the font face as IBM Plex Sans    |
+| `.bx--type-serif`        | Specify the font face as IBM Plex Serif   |
+| `.bx--type-light`        | Specify the font weight as light (300)    |
+| `.bx--type-regular`      | Specify the font weight as regular (400)  |
+| `.bx--type-semibold`     | Specify the font weight as semibold (600) |
+| `.bx--type-italic`       | Specify the font style as italic          |
+| `.bx--type-<type-style>` | Set styles for the given type style       |
+
+### 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:
+
+```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:
+
+```scss
+.my-selector {
+  font-family: carbon--font-family('mono');
+}
+```
+
+You can also use the `carbon--font-family` mixin to automatically set the
+`font-family` property for you:
+
+```scss
+.my-selector {
+  @include carbon--font-family('mono');
+}
+```
+
+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:
+
+```scss
+@import '@carbon/type/scss/reset';
+
+@include carbon--type-reset();
+```
+
+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.
+
+### 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).
+
+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:
+
+```scss
+@import '@carbon/type/scss/scale';
+
+.my-selector {
+  font-size: carbon--type-scale(1);
+}
+```
+
+There is also a `type-scale` mixin that will set `font-size` for your directly:
+
+```scss
+@import '@carbon/type/scss/scale';
+
+.my-selector {
+  @include carbon--type-scale(1);
+}
+```
+
 ## 📚 Examples
@@ -40,0 +255,0 @@

src/__tests__/exports-test.js

@@ -24,3 +24,2 @@ /**
   "scale",
-  "spacing",
   "styles",
@@ -38,5 +37,6 @@ "caption01",
   "heading02",
-  "heading03",
+  "productiveHeading03",
   "productiveHeading04",
   "productiveHeading05",
+  "expressiveHeading03",
   "expressiveHeading04",
@@ -43,0 +43,0 @@ "expressiveHeading05",

src/fluid.js

@@ -85,3 +85,3 @@ /**
 function subtract(a, b) {
-  return parseFloat(a, 10) - parseFloat(b, 10);
+  return parseFloat(a) - parseFloat(b);
 }

src/index.js

@@ -13,3 +13,2 @@ /**
 import { getTypeSize, scale } from './scale';
-import { spacing } from './spacing';
 import * as styles from './styles';
@@ -28,3 +27,2 @@
   styles,
-  spacing,
 };

src/styles.js

@@ -102,3 +102,3 @@ /**
 
-export const heading03 = {
+export const productiveHeading03 = {
   fontFamily: fontFamilies.sans,
@@ -127,2 +127,19 @@ fontSize: rem(scale[4]),
 
+export const expressiveHeading03 = fluid({
+  fontFamily: fontFamilies.sans,
+  fontSize: rem(scale[4]),
+  fontWeight: fontWeights.regular,
+  lineHeight: '130%',
+  letterSpacing: 0,
+  breakpoints: {
+    xlg: {
+      fontSize: rem(scale[4]),
+      lineHeight: '125%',
+    },
+    max: {
+      fontSize: rem(scale[5]),
+    },
+  },
+});
+
 export const expressiveHeading04 = fluid({
@@ -132,3 +149,3 @@ fontFamily: fontFamilies.sans,
   fontWeight: fontWeights.regular,
-  lineHeight: '107%',
+  lineHeight: '129%',
   letterSpacing: 0,
@@ -135,0 +152,0 @@ breakpoints: {

umd/index.js

@@ -146,17 +146,2 @@ (function (global, factory) {
 
-  /**
-   * 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.
-   */
-  var spacing = {
-    margin01: layout.rem(16),
-    margin02: layout.rem(24),
-    margin03: layout.rem(32),
-    layout01: layout.rem(48),
-    layout02: layout.rem(64),
-    layout03: layout.rem(80)
-  };
-
   function _typeof(obj) {
@@ -310,3 +295,3 @@ if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") {
   function subtract(a, b) {
-    return parseFloat(a, 10) - parseFloat(b, 10);
+    return parseFloat(a) - parseFloat(b);
   }
@@ -397,3 +382,3 @@
   };
-  var heading03 = {
+  var productiveHeading03 = {
     fontFamily: fontFamilies.sans,
@@ -419,2 +404,18 @@ fontSize: layout.rem(scale[4]),
   };
+  var expressiveHeading03 = fluid({
+    fontFamily: fontFamilies.sans,
+    fontSize: layout.rem(scale[4]),
+    fontWeight: fontWeights.regular,
+    lineHeight: '130%',
+    letterSpacing: 0,
+    breakpoints: {
+      xlg: {
+        fontSize: layout.rem(scale[4]),
+        lineHeight: '125%'
+      },
+      max: {
+        fontSize: layout.rem(scale[5])
+      }
+    }
+  });
   var expressiveHeading04 = fluid({
@@ -424,3 +425,3 @@ fontFamily: fontFamilies.sans,
     fontWeight: fontWeights.regular,
-    lineHeight: '107%',
+    lineHeight: '129%',
     letterSpacing: 0,
@@ -663,5 +664,6 @@ breakpoints: {
     heading02: heading02,
-    heading03: heading03,
+    productiveHeading03: productiveHeading03,
     productiveHeading04: productiveHeading04,
     productiveHeading05: productiveHeading05,
+    expressiveHeading03: expressiveHeading03,
     expressiveHeading04: expressiveHeading04,
@@ -694,3 +696,2 @@ expressiveHeading05: expressiveHeading05,
   exports.styles = styles;
-  exports.spacing = spacing;
   exports.caption01 = caption01;
@@ -707,5 +708,6 @@ exports.label01 = label01;
   exports.heading02 = heading02;
-  exports.heading03 = heading03;
+  exports.productiveHeading03 = productiveHeading03;
   exports.productiveHeading04 = productiveHeading04;
   exports.productiveHeading05 = productiveHeading05;
+  exports.expressiveHeading03 = expressiveHeading03;
   exports.expressiveHeading04 = expressiveHeading04;
@@ -712,0 +714,0 @@ exports.expressiveHeading05 = expressiveHeading05;

No alert changes

Improved metrics

Total package byte prevSize

171352

increased by3.99%

Number of lines in readme file

270

increased by390.91%

Worsened metrics

Number of package files

35

decreased by-10.26%

Lines of code

2780

decreased by-0.25%

Dependency changes

• + Added@carbon/import-once@0.0.1-alpha.32(transitive)

• + Added@carbon/layout@0.0.1-alpha.32(transitive)

• - Removed@carbon/import-once@0.0.1-alpha.31(transitive)

• - Removed@carbon/layout@0.0.1-alpha.31(transitive)

• Updated@carbon/import-once@0.0.1-alpha.32

• Updated@carbon/layout@0.0.1-alpha.32