@carbon/type 10.20.0-rc.0 → 10.21.0

package/README.md

@@ -250,12 +250,6 @@ There is also a `type-scale` mixin that will set `font-size` for your directly:
 }
 ```
 
-## 📖 API Documentation
-
-If you're looking for `@carbon/type` API documentation, check out:
-
-- [Sass](./docs/sass.md)
-
 ## 📚 Examples
 
 If you're looking for more examples on how to use `@carbon/type`, we have some

package/es/index.js

@@ -715,6 +715,38 @@ function subtract(a, b) {
  * 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 unstable_tokens = ['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'];
+// Unstable tokens
+var caption01$1 = 'caption01';
+var label01$1 = 'label01';
+var helperText01$1 = 'helperText01';
+var bodyShort01$1 = 'bodyShort01';
+var bodyLong01$1 = 'bodyLong01';
+var bodyShort02$1 = 'bodyShort02';
+var bodyLong02$1 = 'bodyLong02';
+var code01$1 = 'code01';
+var code02$1 = 'code02';
+var heading01$1 = 'heading01';
+var productiveHeading01$1 = 'productiveHeading01';
+var heading02$1 = 'heading02';
+var productiveHeading02$1 = 'productiveHeading02';
+var productiveHeading03$1 = 'productiveHeading03';
+var productiveHeading04$1 = 'productiveHeading04';
+var productiveHeading05$1 = 'productiveHeading05';
+var productiveHeading06$1 = 'productiveHeading06';
+var productiveHeading07$1 = 'productiveHeading07';
+var expressiveHeading01$1 = 'expressiveHeading01';
+var expressiveHeading02$1 = 'expressiveHeading02';
+var expressiveHeading03$1 = 'expressiveHeading03';
+var expressiveHeading04$1 = 'expressiveHeading04';
+var expressiveHeading05$1 = 'expressiveHeading05';
+var expressiveHeading06$1 = 'expressiveHeading06';
+var expressiveParagraph01$1 = 'expressiveParagraph01';
+var quotation01$1 = 'quotation01';
+var quotation02$1 = 'quotation02';
+var display01$1 = 'display01';
+var display02$1 = 'display02';
+var display03$1 = 'display03';
+var display04$1 = 'display04';
+var unstable_tokens = [caption01$1, label01$1, helperText01$1, bodyShort01$1, bodyLong01$1, bodyShort02$1, bodyLong02$1, code01$1, code02$1, heading01$1, productiveHeading01$1, heading02$1, productiveHeading02$1, productiveHeading03$1, productiveHeading04$1, productiveHeading05$1, productiveHeading06$1, productiveHeading07$1, expressiveHeading01$1, expressiveHeading02$1, expressiveHeading03$1, expressiveHeading04$1, expressiveHeading05$1, expressiveHeading06$1, expressiveParagraph01$1, quotation01$1, quotation02$1, display01$1, display02$1, display03$1, display04$1];
 
 export { bodyLong01, bodyLong02, bodyShort01, bodyShort02, caption01, code01, code02, display01, display02, display03, display04, expressiveHeading01, expressiveHeading02, expressiveHeading03, expressiveHeading04, expressiveHeading05, expressiveHeading06, expressiveParagraph01, fluid, fontFamilies, fontFamily, fontWeight, fontWeights, getTypeSize, heading01, heading02, helperText01, label01, print, productiveHeading01, productiveHeading02, productiveHeading03, productiveHeading04, productiveHeading05, productiveHeading06, productiveHeading07, quotation01, quotation02, reset, scale, styles, unstable_tokens };

package/lib/index.js

@@ -719,7 +719,39 @@ function subtract(a, b) {
  * 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 unstable_tokens = ['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'];
+// Unstable tokens
+var caption01$1 = 'caption01';
+var label01$1 = 'label01';
+var helperText01$1 = 'helperText01';
+var bodyShort01$1 = 'bodyShort01';
+var bodyLong01$1 = 'bodyLong01';
+var bodyShort02$1 = 'bodyShort02';
+var bodyLong02$1 = 'bodyLong02';
+var code01$1 = 'code01';
+var code02$1 = 'code02';
+var heading01$1 = 'heading01';
+var productiveHeading01$1 = 'productiveHeading01';
+var heading02$1 = 'heading02';
+var productiveHeading02$1 = 'productiveHeading02';
+var productiveHeading03$1 = 'productiveHeading03';
+var productiveHeading04$1 = 'productiveHeading04';
+var productiveHeading05$1 = 'productiveHeading05';
+var productiveHeading06$1 = 'productiveHeading06';
+var productiveHeading07$1 = 'productiveHeading07';
+var expressiveHeading01$1 = 'expressiveHeading01';
+var expressiveHeading02$1 = 'expressiveHeading02';
+var expressiveHeading03$1 = 'expressiveHeading03';
+var expressiveHeading04$1 = 'expressiveHeading04';
+var expressiveHeading05$1 = 'expressiveHeading05';
+var expressiveHeading06$1 = 'expressiveHeading06';
+var expressiveParagraph01$1 = 'expressiveParagraph01';
+var quotation01$1 = 'quotation01';
+var quotation02$1 = 'quotation02';
+var display01$1 = 'display01';
+var display02$1 = 'display02';
+var display03$1 = 'display03';
+var display04$1 = 'display04';
+var unstable_tokens = [caption01$1, label01$1, helperText01$1, bodyShort01$1, bodyLong01$1, bodyShort02$1, bodyLong02$1, code01$1, code02$1, heading01$1, productiveHeading01$1, heading02$1, productiveHeading02$1, productiveHeading03$1, productiveHeading04$1, productiveHeading05$1, productiveHeading06$1, productiveHeading07$1, expressiveHeading01$1, expressiveHeading02$1, expressiveHeading03$1, expressiveHeading04$1, expressiveHeading05$1, expressiveHeading06$1, expressiveParagraph01$1, quotation01$1, quotation02$1, display01$1, display02$1, display03$1, display04$1];
 
 exports.bodyLong01 = bodyLong01;
 exports.bodyLong02 = bodyLong02;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/type",
   "description": "Typography for digital and software products using the Carbon Design System",
-  "version": "10.20.0-rc.0",
+  "version": "10.21.0",
   "license": "Apache-2.0",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -32,16 +32,16 @@
     "access": "public"
   },
   "scripts": {
-    "build": "yarn clean && carbon-cli bundle src/index.js --name CarbonType && carbon-cli sassdoc \"scss/**/*.scss\" -i \"**/{_inlined,vendor}**\" && carbon-cli inline && carbon-cli check \"scss/*.scss\"",
+    "build": "yarn clean && carbon-cli bundle src/index.js --name CarbonType && carbon-cli inline && carbon-cli check \"scss/*.scss\"",
     "clean": "rimraf css es lib umd scss/_inlined scss/vendor"
   },
   "dependencies": {
-    "@carbon/import-once": "^10.5.0-rc.0",
-    "@carbon/layout": "^10.17.0-rc.0"
+    "@carbon/import-once": "^10.6.0",
+    "@carbon/layout": "^10.18.0"
   },
   "devDependencies": {
-    "@carbon/cli": "^10.18.0-rc.0",
-    "@carbon/test-utils": "^10.14.0-rc.0",
+    "@carbon/cli": "^10.19.0",
+    "@carbon/test-utils": "^10.14.0",
     "change-case": "^4.1.1",
     "rimraf": "^3.0.0"
   },
@@ -51,5 +51,5 @@
     "sassDir": "scss",
     "needs": "^1.3.0"
   },
-  "gitHead": "09a37296c3862fd5d9e0b49f16b0ff5d074156dc"
+  "gitHead": "79db5535fee7f58e0fe21bac154b638cd17f659e"
 }

package/scss/modules/_classes.scss

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

package/scss/modules/_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
+$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"),
+) !default;
+
+/// Get the font-family for an IBM Plex font
+/// @param {String} $name
+/// @return {String}
+/// @access public
+/// @group @carbon/type
+@function font-family($name) {
+  @return map-get($font-families, $name);
+}
+
+/// Include the `font-family` definition for the given name in your selector
+/// @param {String} $name
+/// @access public
+/// @group @carbon/type
+@mixin font-family($name) {
+  font-family: font-family($name);
+}
+
+/// Suggested font weights to be used in product
+/// @type Map
+/// @access public
+/// @group @carbon/type
+$font-weights: (
+  'light': 300,
+  'regular': 400,
+  'semibold': 600,
+) !default;
+
+/// Retrieve the font-weight value for a given name
+/// @param {String} $weight
+/// @return {Number}
+/// @access public
+/// @group @carbon/type
+@function font-weight($weight) {
+  @return map-get($font-weights, $weight);
+}
+
+/// Set the `font-weight` property with the value for a given name
+/// @param {String} $weight
+/// @access public
+/// @group @carbon/type
+@mixin font-weight($weight) {
+  font-weight: font-weight($weight);
+}

package/scss/modules/_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/modules/_reset.scss

@@ -0,0 +1,92 @@
+//
+// 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.
+//
+
+@use 'sass:map';
+@use 'sass:meta';
+@use '@carbon/layout';
+@use 'font-family' as *;
+@use 'styles' as *;
+
+/// Include a type reset for a given body and mono font family
+/// @param {String} $body-font-family [font-family('sans')] - The font family used on the `<body>` element
+/// @param {String} $mono-font-family [font-family('mono')] - The font family used on elements that require mono fonts, like the `<code>` element
+/// @access public
+/// @group @carbon/type
+@mixin type-reset(
+  // TODO: remove in next major release. This has been replaced with 100%
+  $base-font-size: layout.$base-font-size,
+  $body-font-family: font-family('sans'),
+  $mono-font-family: font-family('mono')
+) {
+  html {
+    font-size: 100%;
+  }
+
+  body {
+    @include font-weight('regular');
+
+    font-family: $body-font-family;
+    text-rendering: optimizeLegibility;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+  }
+
+  code {
+    font-family: $mono-font-family;
+  }
+
+  strong {
+    @include font-weight('semibold');
+  }
+}
+
+/// Include default type styles
+/// @access public
+/// @group @carbon/type
+@mixin default-type {
+  h1 {
+    @include type-style('productive-heading-06');
+  }
+
+  h2 {
+    @include type-style('productive-heading-05');
+  }
+
+  h3 {
+    @include type-style('productive-heading-04');
+  }
+
+  h4 {
+    @include type-style('productive-heading-03');
+  }
+
+  h5 {
+    @include type-style('productive-heading-02');
+  }
+
+  h6 {
+    @include type-style('productive-heading-01');
+  }
+
+  p {
+    @include type-style('body-long-02');
+  }
+
+  a {
+    @if meta.global-variable-exists('carbon--theme') and
+      map.has-key($carbon--theme, 'link-01')
+    {
+      color: map.get($carbon--theme, 'link-01');
+    } @else {
+      color: #0062fe;
+    }
+  }
+
+  em {
+    font-style: italic;
+  }
+}

package/scss/modules/_scale.scss

@@ -0,0 +1,56 @@
+//
+// 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.
+//
+
+@use '@carbon/layout';
+
+/// Compute the type size for the given type scale step
+/// @param {Number} $step
+/// @return {Number} In px
+/// @access public
+/// @group @carbon/type
+@function get-type-size($step) {
+  @if $step == 1 {
+    @return 12px;
+  }
+  // Yn = Yn-1 + {INT[(n-2)/4] + 1} * 2
+  @return get-type-size($step - 1) + (floor(($step - 2) / 4) + 1) * 2;
+}
+
+/// Type scale follows a custom formula for determining each step size and supports sizes from 12px to 92px
+/// @type Map
+/// @access public
+/// @group @carbon/type
+$type-scale: ();
+@for $i from 1 through 23 {
+  $type-scale: append($type-scale, layout.rem(get-type-size($i)));
+}
+
+/// Get the value of a specific step in the type scale
+/// @param {Number} $step
+/// @return {Number} In rem
+/// @access public
+/// @group @carbon/type
+@function type-scale($step) {
+  @return nth($type-scale, $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 type-scale($step) {
+  font-size: type-scale($step);
+}
+
+/// Alias of `type-scale` mixin.
+/// @param {Number} $step
+/// @alias type-scale
+/// @access public
+/// @group @carbon/type
+@mixin font-size($step) {
+  font-size: type-scale($step);
+}