@carbon/type 11.25.1 → 11.26.0-rc.0

package/README.md

@@ -33,49 +33,39 @@ 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:
+The `@carbon/type` package enables you to use typography from the IBM Design
+Language, including the type scale and fonts, along with typography design
+tokens from the Carbon Design System. It also comes with opinionated defaults
+for type styles on common elements like `h1`, `h2`, `p`, etc.
+
+You can use this package by writing the following:
 
 ```scss
-@import '@carbon/type/scss/type';
-@import '@carbon/type/scss/font-face/mono';
-@import '@carbon/type/scss/font-face/sans';
+@use '@carbon/type';
+
+// Include type reset
+@include type.reset();
+
+// Include default type styles, targets h1, h2, h3, etc
+@include type.default-type();
+
+// Include utility classes for type-related properties
+@include type.type-classes();
 
-@include carbon--type-reset();
-@include carbon--font-face-mono();
-@include carbon--font-face-sans();
+.selector {
+  // Include a type style
+  @include type.type-style('productive-heading-01');
+}
 ```
 
 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:
+If you are using `@carbon/react`, the import paths become:
 
 ```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'],
-  },
-}
+@use '@carbon/react/scss/type';
 ```
 
 ### Type styles
@@ -91,55 +81,19 @@ You can find a full reference of the type styles that are available on the
 You can include a token in your Sass file by writing:
 
 ```scss
-@import '@carbon/type/scss/styles';
+@use '@carbon/type';
 
-@include carbon--type-style('token-name');
+@include type.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 an Akamai 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:
+in `true` as the second argument to `type-style` to enable fluid styles. For
+example:
 
 ```scss
-@import '@carbon/type/scss/font-face/mono';
-@import '@carbon/type/scss/font-face/sans';
-@import '@carbon/type/scss/font-face/serif';
+@use '@carbon/type';
 
-@include carbon--font-face-mono();
-@include carbon--font-face-sans();
-@include carbon--font-face-serif();
+@include type.type-style('token-name', true);
 ```
 
 ### Type classes
@@ -152,19 +106,29 @@ You can include type classes in your project by writing the following in your
 Sass file:
 
 ```scss
-@import '@carbon/type/scss/classes';
+@use '@carbon/type';
+
+:root {
+  @include type.type-classes();
+}
+```
+
+And then add the appropriate classes to the element you want to style
+
+```html
+<span className="cds--type-mono">Test sentence</span>
 ```
 
-| 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       |
+| Selector                  | Description                               |
+| ------------------------- | ----------------------------------------- |
+| `.cds--type-mono`         | Specify the font face as IBM Plex Mono    |
+| `.cds--type-sans`         | Specify the font face as IBM Plex Sans    |
+| `.cds--type-serif`        | Specify the font face as IBM Plex Serif   |
+| `.cds--type-light`        | Specify the font weight as light (300)    |
+| `.cds--type-regular`      | Specify the font weight as regular (400)  |
+| `.cds--type-semibold`     | Specify the font weight as semibold (600) |
+| `.cds--type-italic`       | Specify the font style as italic          |
+| `.cds--type-<type-style>` | Set styles for the given type style       |
 
 ### Font family
 
@@ -173,39 +137,40 @@ You can access the font family information by including the following import in
 your Sass file:
 
 ```scss
-@import '@carbon/type/scss/font-family';
+@use '@carbon/type';
 ```
 
-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 `$font-families` variable. You can also
+access a specific font family by using the `font-family` function by doing:
 
 ```scss
 .my-selector {
-  font-family: carbon--font-family('mono');
+  font-family: type.font-family('mono');
 }
 ```
 
-You can also use the `carbon--font-family` mixin to automatically set the
-`font-family` property for you:
+You can also use the `font-family` mixin to automatically set the `font-family`
+property for you:
 
 ```scss
 .my-selector {
-  @include carbon--font-family('mono');
+  @include type.font-family('serif');
 }
 ```
 
-You can see all the available font families in `$carbon--font-families` .
+You can see all the available font families in `$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 `reset` mixin. You can include this
+mixin by writing the following in your Sass file:
 
 ```scss
-@import '@carbon/type/scss/reset';
+@use '@carbon/type';
 
-@include carbon--type-reset();
+:root {
+  @include type.reset();
+}
 ```
 
 This reset sets some top-level properties on `html` and `body`, namely
@@ -214,35 +179,33 @@ This reset sets some top-level properties on `html` and `body`, namely
 
 ### 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 `$type-scale` variable and corresponding
+`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';
+@use '@carbon/type';
 ```
 
-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 `type-scale`
+function:
 
 ```scss
-@import '@carbon/type/scss/scale';
-
 .my-selector {
-  font-size: carbon--type-scale(1);
+  font-size: type.type-scale(1);
 }
 ```
 
 There is also a `type-scale` mixin that will set `font-size` for your directly:
 
 ```scss
-@import '@carbon/type/scss/scale';
+@use '@carbon/type';
 
 .my-selector {
-  @include carbon--type-scale(1);
+  @include type.type-scale(4);
 }
 ```
 
@@ -251,7 +214,10 @@ There is also a `type-scale` mixin that will set `font-size` for your directly:
 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)
+- [Stackblitz](https://stackblitz.com/edit/github-wdcdqx?file=src%2Findex.scss)
+
+You can also see more documentation regarding the available tokens
+[here](./docs/sass.md)
 
 ## 🙌 Contributing
 
@@ -262,3 +228,12 @@ check out our [Contributing Guide](/.github/CONTRIBUTING.md)! 👀
 ## 📝 License
 
 Licensed under the [Apache 2.0 License](/LICENSE).
+
+## <picture><source height="20" width="20" media="(prefers-color-scheme: dark)" srcset="https://raw.githubusercontent.com/ibm-telemetry/telemetry-js/main/docs/images/ibm-telemetry-dark.svg"><source height="20" width="20" media="(prefers-color-scheme: light)" srcset="https://raw.githubusercontent.com/ibm-telemetry/telemetry-js/main/docs/images/ibm-telemetry-light.svg"><img height="20" width="20" alt="IBM Telemetry" src="https://raw.githubusercontent.com/ibm-telemetry/telemetry-js/main/docs/images/ibm-telemetry-light.svg"></picture> IBM Telemetry
+
+This package uses IBM Telemetry to collect metrics data. By installing this
+package as a dependency you are agreeing to telemetry collection. To opt out,
+see
+[Opting out of IBM Telemetry data collection](https://github.com/ibm-telemetry/telemetry-js/tree/main#opting-out-of-ibm-telemetry-data-collection).
+For more information on the data being collected, please see the
+[IBM Telemetry documentation](https://github.com/ibm-telemetry/telemetry-js/tree/main#ibm-telemetry-collection-basics).

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/type",
   "description": "Typography for digital and software products using the Carbon Design System",
-  "version": "11.25.1",
+  "version": "11.26.0-rc.0",
   "license": "Apache-2.0",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -17,7 +17,8 @@
     "scss",
     "src",
     "umd",
-    "index.scss"
+    "index.scss",
+    "telemetry.yml"
   ],
   "keywords": [
     "eyeglass-module",
@@ -35,14 +36,16 @@
   },
   "scripts": {
     "build": "yarn clean && carbon-cli bundle src/index.js --name CarbonType && carbon-cli check \"scss/*.scss\"",
-    "clean": "rimraf css es lib umd"
+    "clean": "rimraf css es lib umd",
+    "postinstall": "ibmtelemetry --config=telemetry.yml"
   },
   "dependencies": {
-    "@carbon/grid": "^11.21.1",
-    "@carbon/layout": "^11.20.1"
+    "@carbon/grid": "^11.22.0-rc.0",
+    "@carbon/layout": "^11.21.0-rc.0",
+    "@ibm/telemetry-js": "^1.2.1"
   },
   "devDependencies": {
-    "@carbon/cli": "^11.15.1",
+    "@carbon/cli": "^11.16.0-rc.0",
     "@carbon/test-utils": "^10.30.0",
     "change-case": "^4.1.1",
     "css": "^3.0.0",
@@ -54,5 +57,5 @@
     "sassDir": "scss",
     "needs": "^1.3.0"
   },
-  "gitHead": "d6904c019acc9b8cb8f5a01732bc963a71fa93bf"
+  "gitHead": "fd9030978919c8d2ce0c102db94aeabf88563c34"
 }

package/telemetry.yml

@@ -0,0 +1,7 @@
+# yaml-language-server: $schema=https://unpkg.com/@ibm/telemetry-config-schema@v1/dist/config.schema.json
+version: 1
+projectId: 43a17f29-6354-4c01-b4ec-920a1248f0f7
+endpoint: https://collector-prod.1am6wm210aow.us-south.codeengine.appdomain.cloud/v1/metrics
+collect:
+  npm:
+    dependencies: null