@carbon/type 10.44.0 → 11.0.0-rc.0

package/README.md

@@ -26,7 +26,7 @@ These features include:
 
 | Feature                       | Description                                                                                                  |
 | ----------------------------- | ------------------------------------------------------------------------------------------------------------ |
-| [Font face](#font-face)       | Include IBM Plex™ font faces in your application. Uses Google fonts                                          |
+| [Font face](#font-face)       | Include IBM Plex™ font faces in your application. Uses Akamai CDN                                            |
 | [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                                                       |
@@ -118,11 +118,7 @@ Plex to your project. These font-face definitions include support for:
 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 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

package/index.scss

@@ -5,12 +5,12 @@
 // LICENSE file in the root directory of this source tree.
 //
 
-@forward 'scss/modules/prefix' with (
+@forward 'scss/prefix' with (
   $prefix: 'bx' !default,
 );
-@forward 'scss/modules/classes';
-@forward 'scss/modules/font-family';
-@forward 'scss/modules/reset';
-@forward 'scss/modules/scale';
-@forward 'scss/modules/styles';
-@forward 'scss/modules/default-type';
+@forward 'scss/classes';
+@forward 'scss/font-family';
+@forward 'scss/reset';
+@forward 'scss/scale';
+@forward 'scss/styles';
+@forward 'scss/default-type';

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/type",
   "description": "Typography for digital and software products using the Carbon Design System",
-  "version": "10.44.0",
+  "version": "11.0.0-rc.0",
   "license": "Apache-2.0",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -37,13 +37,13 @@
     "clean": "rimraf css es lib umd scss/_inlined scss/vendor"
   },
   "dependencies": {
-    "@carbon/grid": "^10.43.0",
-    "@carbon/import-once": "^10.7.0"
+    "@carbon/grid": "^11.0.0-rc.0"
   },
   "devDependencies": {
-    "@carbon/cli": "^10.34.0",
-    "@carbon/test-utils": "^10.21.0",
+    "@carbon/cli": "^11.0.0-rc.0",
+    "@carbon/test-utils": "^10.22.0-rc.0",
     "change-case": "^4.1.1",
+    "css": "^3.0.0",
     "rimraf": "^3.0.0"
   },
   "eyeglass": {
@@ -52,5 +52,5 @@
     "sassDir": "scss",
     "needs": "^1.3.0"
   },
-  "gitHead": "9db9b14761bfaabde5cd54e1f47957d243d90321"
+  "gitHead": "e4894776a4996c10bfc8f9a724532a25966aa622"
 }

package/scss/_classes.scss

@@ -5,23 +5,24 @@
 // LICENSE file in the root directory of this source tree.
 //
 
-@import 'prefix';
-@import 'styles';
-@import 'font-family';
+@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 carbon--type-classes {
+@mixin type-classes {
   // Font families
-  @each $name, $value in $carbon--font-families {
+  @each $name, $value in $font-families {
     .#{$prefix}--type-#{$name} {
       font-family: $value;
     }
   }
 
   // Font weights
-  @each $name, $value in $carbon--font-weights {
+  @each $name, $value in $font-weights {
     .#{$prefix}--type-#{$name} {
       font-weight: $value;
     }
@@ -35,7 +36,7 @@
   // Type styles
   @each $name, $value in $tokens {
     .#{$prefix}--type-#{$name} {
-      @include carbon--type-style($name, map-has-key($value, breakpoints));
+      @include type-style($name, map.has-key($value, breakpoints));
     }
   }
 }

package/scss/_font-family.scss

@@ -5,24 +5,58 @@
 // LICENSE file in the root directory of this source tree.
 //
 
+@use 'sass:string';
+
 /// 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: (
+$font-families: (
   'mono':
-    unquote(
-      "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace"
+    string.unquote(
+      "'IBM Plex Mono', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', monospace"
+    ),
+  'sans':
+    string.unquote(
+      "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif"
     ),
-  'sans': unquote("'IBM Plex Sans', 'Helvetica Neue', Arial, sans-serif"),
   'sans-condensed':
-    unquote("'IBM Plex Sans Condensed', 'Helvetica Neue', Arial, sans-serif"),
+    string.unquote(
+      "'IBM Plex Sans Condensed', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif"
+    ),
+  'sans-arabic':
+    string.unquote(
+      "'IBM Plex Sans Arabic', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif"
+    ),
+  'sans-devanagari':
+    string.unquote(
+      "'IBM Plex Sans Devanagari', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif"
+    ),
   'sans-hebrew':
-    unquote(
-      "'IBM Plex Sans Hebrew', 'Helvetica Hebrew', 'Arial Hebrew', sans-serif"
+    string.unquote(
+      "'IBM Plex Sans Hebrew', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif"
+    ),
+  'sans-jp':
+    string.unquote(
+      "'IBM Plex Sans JP', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif"
+    ),
+  'sans-kr':
+    string.unquote(
+      "'IBM Plex Sans KR', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif"
+    ),
+  'sans-thai-looped':
+    string.unquote(
+      "'IBM Plex Sans Thai Looped', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif"
+    ),
+  'sans-thai':
+    string.unquote(
+      "'IBM Plex Sans Thai', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif"
+    ),
+  'serif':
+    string.unquote(
+      "'IBM Plex Serif', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', serif"
     ),
-  'serif': unquote("'IBM Plex Serif', 'Georgia', Times, serif"),
 ) !default;
 
 /// Get the font-family for an IBM Plex font
@@ -30,23 +64,23 @@ $carbon--font-families: (
 /// @return {String}
 /// @access public
 /// @group @carbon/type
-@function carbon--font-family($name) {
-  @return map-get($carbon--font-families, $name);
+@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 carbon--font-family($name) {
-  font-family: carbon--font-family($name);
+@mixin font-family($name) {
+  font-family: font-family($name);
 }
 
 /// Suggested font weights to be used in product
 /// @type Map
 /// @access public
 /// @group @carbon/type
-$carbon--font-weights: (
+$font-weights: (
   'light': 300,
   'regular': 400,
   'semibold': 600,
@@ -57,14 +91,14 @@ $carbon--font-weights: (
 /// @return {Number}
 /// @access public
 /// @group @carbon/type
-@function carbon--font-weight($weight) {
-  @return map-get($carbon--font-weights, $weight);
+@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 carbon--font-weight($weight) {
-  font-weight: carbon--font-weight($weight);
+@mixin font-weight($weight) {
+  font-weight: font-weight($weight);
 }

package/scss/_inlined/_classes.scss

@@ -5,23 +5,24 @@
 // LICENSE file in the root directory of this source tree.
 //
 
-@import 'prefix';
-@import 'styles';
-@import 'font-family';
+@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 carbon--type-classes {
+@mixin type-classes {
   // Font families
-  @each $name, $value in $carbon--font-families {
+  @each $name, $value in $font-families {
     .#{$prefix}--type-#{$name} {
       font-family: $value;
     }
   }
 
   // Font weights
-  @each $name, $value in $carbon--font-weights {
+  @each $name, $value in $font-weights {
     .#{$prefix}--type-#{$name} {
       font-weight: $value;
     }
@@ -35,7 +36,7 @@
   // Type styles
   @each $name, $value in $tokens {
     .#{$prefix}--type-#{$name} {
-      @include carbon--type-style($name, map-has-key($value, breakpoints));
+      @include type-style($name, map.has-key($value, breakpoints));
     }
   }
 }

package/scss/_inlined/_default-type.scss

@@ -0,0 +1,55 @@
+//
+// 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 'styles' as *;
+
+/// 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/_inlined/_font-family.scss

@@ -5,24 +5,58 @@
 // LICENSE file in the root directory of this source tree.
 //
 
+@use 'sass:string';
+
 /// 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: (
+$font-families: (
   'mono':
-    unquote(
-      "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace"
+    string.unquote(
+      "'IBM Plex Mono', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', monospace"
+    ),
+  'sans':
+    string.unquote(
+      "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif"
     ),
-  'sans': unquote("'IBM Plex Sans', 'Helvetica Neue', Arial, sans-serif"),
   'sans-condensed':
-    unquote("'IBM Plex Sans Condensed', 'Helvetica Neue', Arial, sans-serif"),
+    string.unquote(
+      "'IBM Plex Sans Condensed', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif"
+    ),
+  'sans-arabic':
+    string.unquote(
+      "'IBM Plex Sans Arabic', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif"
+    ),
+  'sans-devanagari':
+    string.unquote(
+      "'IBM Plex Sans Devanagari', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif"
+    ),
   'sans-hebrew':
-    unquote(
-      "'IBM Plex Sans Hebrew', 'Helvetica Hebrew', 'Arial Hebrew', sans-serif"
+    string.unquote(
+      "'IBM Plex Sans Hebrew', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif"
+    ),
+  'sans-jp':
+    string.unquote(
+      "'IBM Plex Sans JP', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif"
+    ),
+  'sans-kr':
+    string.unquote(
+      "'IBM Plex Sans KR', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif"
+    ),
+  'sans-thai-looped':
+    string.unquote(
+      "'IBM Plex Sans Thai Looped', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif"
+    ),
+  'sans-thai':
+    string.unquote(
+      "'IBM Plex Sans Thai', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif"
+    ),
+  'serif':
+    string.unquote(
+      "'IBM Plex Serif', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', serif"
     ),
-  'serif': unquote("'IBM Plex Serif', 'Georgia', Times, serif"),
 ) !default;
 
 /// Get the font-family for an IBM Plex font
@@ -30,23 +64,23 @@ $carbon--font-families: (
 /// @return {String}
 /// @access public
 /// @group @carbon/type
-@function carbon--font-family($name) {
-  @return map-get($carbon--font-families, $name);
+@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 carbon--font-family($name) {
-  font-family: carbon--font-family($name);
+@mixin font-family($name) {
+  font-family: font-family($name);
 }
 
 /// Suggested font weights to be used in product
 /// @type Map
 /// @access public
 /// @group @carbon/type
-$carbon--font-weights: (
+$font-weights: (
   'light': 300,
   'regular': 400,
   'semibold': 600,
@@ -57,14 +91,14 @@ $carbon--font-weights: (
 /// @return {Number}
 /// @access public
 /// @group @carbon/type
-@function carbon--font-weight($weight) {
-  @return map-get($carbon--font-weights, $weight);
+@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 carbon--font-weight($weight) {
-  font-weight: carbon--font-weight($weight);
+@mixin font-weight($weight) {
+  font-weight: font-weight($weight);
 }

package/scss/_inlined/_reset.scss

@@ -5,27 +5,26 @@
 // LICENSE file in the root directory of this source tree.
 //
 
-@import '@carbon/layout/scss/convert';
-@import 'font-family';
-@import 'styles';
+@use 'sass:map';
+@use 'sass:meta';
+@use '@carbon/layout';
+@use 'font-family' as *;
 
 /// Include a type reset for a given body and mono font family
-/// @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
+/// @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 carbon--type-reset(
-  // TODO: remove in next major release. This has been replaced with 100%
-  $base-font-size: $carbon--base-font-size,
-  $body-font-family: carbon--font-family('sans'),
-  $mono-font-family: carbon--font-family('mono')
+@mixin reset(
+  $body-font-family: font-family('sans'),
+  $mono-font-family: font-family('mono')
 ) {
   html {
     font-size: 100%;
   }
 
   body {
-    @include carbon--font-weight('regular');
+    @include font-weight('regular');
 
     font-family: $body-font-family;
     -moz-osx-font-smoothing: grayscale;
@@ -38,53 +37,6 @@
   }
 
   strong {
-    @include carbon--font-weight('semibold');
-  }
-}
-
-/// Include default type styles
-/// @access public
-/// @group @carbon/type
-@mixin carbon--default-type {
-  h1 {
-    @include carbon--type-style('productive-heading-06');
-  }
-
-  h2 {
-    @include carbon--type-style('productive-heading-05');
-  }
-
-  h3 {
-    @include carbon--type-style('productive-heading-04');
-  }
-
-  h4 {
-    @include carbon--type-style('productive-heading-03');
-  }
-
-  h5 {
-    @include carbon--type-style('productive-heading-02');
-  }
-
-  h6 {
-    @include carbon--type-style('productive-heading-01');
-  }
-
-  p {
-    @include carbon--type-style('body-long-02');
-  }
-
-  a {
-    @if 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;
+    @include font-weight('semibold');
   }
 }

package/scss/_inlined/_scale.scss

@@ -5,31 +5,29 @@
 // LICENSE file in the root directory of this source tree.
 //
 
-@import '@carbon/layout/scss/convert';
+@use '@carbon/layout';
+@use 'sass:list';
 
 /// Compute the type size for the given type scale step
 /// @param {Number} $step
 /// @return {Number} In px
 /// @access public
 /// @group @carbon/type
-@function carbon--get-type-size($step) {
+@function get-type-size($step) {
   @if $step == 1 {
     @return 12px;
   }
   // Yn = Yn-1 + {INT[(n-2)/4] + 1} * 2
-  @return carbon--get-type-size($step - 1) + (floor(($step - 2) * 0.25) + 1) * 2;
+  @return get-type-size($step - 1) + (floor(($step - 2) * 0.25) + 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
-$carbon--type-scale: ();
+$type-scale: ();
 @for $i from 1 through 23 {
-  $carbon--type-scale: append(
-    $carbon--type-scale,
-    carbon--rem(carbon--get-type-size($i))
-  );
+  $type-scale: list.append($type-scale, layout.rem(get-type-size($i)));
 }
 
 /// Get the value of a specific step in the type scale
@@ -37,23 +35,23 @@ $carbon--type-scale: ();
 /// @return {Number} In rem
 /// @access public
 /// @group @carbon/type
-@function carbon--type-scale($step) {
-  @return nth($carbon--type-scale, $step);
+@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 carbon--type-scale($step) {
-  font-size: carbon--type-scale($step);
+@mixin type-scale($step) {
+  font-size: type-scale($step);
 }
 
 /// Alias of `type-scale` mixin.
 /// @param {Number} $step
-/// @alias carbon--type-scale
+/// @alias type-scale
 /// @access public
 /// @group @carbon/type
-@mixin carbon--font-size($step) {
-  font-size: carbon--type-scale($step);
+@mixin font-size($step) {
+  font-size: type-scale($step);
 }