@carbon/type 11.0.0 → 11.2.0-rc.0

package/README.md

@@ -85,7 +85,7 @@ 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 on the
-[Carbon Design System website](https://www.carbondesignsystem.com/guidelines/typography/productive)
+[Carbon Design System website](https://www.carbondesignsystem.com/guidelines/typography/type-sets)
 .
 
 You can include a token in your Sass file by writing:

package/index.scss

@@ -5,12 +5,10 @@
 // LICENSE file in the root directory of this source tree.
 //
 
-@forward 'scss/prefix' with (
-  $prefix: 'bx' !default,
-);
-@forward 'scss/classes';
+@forward 'scss/prefix';
 @forward 'scss/font-family';
-@forward 'scss/reset';
 @forward 'scss/scale';
+@forward 'scss/reset';
 @forward 'scss/styles';
+@forward 'scss/classes';
 @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": "11.0.0",
+  "version": "11.2.0-rc.0",
   "license": "Apache-2.0",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -33,15 +33,15 @@
     "access": "public"
   },
   "scripts": {
-    "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"
+    "build": "yarn clean && carbon-cli bundle src/index.js --name CarbonType && carbon-cli check \"scss/*.scss\"",
+    "clean": "rimraf css es lib umd"
   },
   "dependencies": {
-    "@carbon/grid": "^11.0.0"
+    "@carbon/grid": "^11.1.0"
   },
   "devDependencies": {
     "@carbon/cli": "^11.0.0",
-    "@carbon/test-utils": "^10.22.0",
+    "@carbon/test-utils": "^10.23.0",
     "change-case": "^4.1.1",
     "css": "^3.0.0",
     "rimraf": "^3.0.0"
@@ -52,5 +52,5 @@
     "sassDir": "scss",
     "needs": "^1.3.0"
   },
-  "gitHead": "c88ac3391e9583e6e10e2de2c509b006f0d60cac"
+  "gitHead": "b429fb727138d42e93696ff4f8ab70d174dd7ac8"
 }

package/scss/_default-type.scss

@@ -12,31 +12,31 @@
 /// @group @carbon/type
 @mixin default-type {
   h1 {
-    @include type-style('productive-heading-06');
+    @include type-style('heading-06');
   }
 
   h2 {
-    @include type-style('productive-heading-05');
+    @include type-style('heading-05');
   }
 
   h3 {
-    @include type-style('productive-heading-04');
+    @include type-style('heading-04');
   }
 
   h4 {
-    @include type-style('productive-heading-03');
+    @include type-style('heading-03');
   }
 
   h5 {
-    @include type-style('productive-heading-02');
+    @include type-style('heading-02');
   }
 
   h6 {
-    @include type-style('productive-heading-01');
+    @include type-style('heading-01');
   }
 
   p {
-    @include type-style('body-long-02');
+    @include type-style('body-02');
   }
 
   a {

package/scss/_prefix.scss

@@ -5,7 +5,24 @@
 // LICENSE file in the root directory of this source tree.
 //
 
+@use 'sass:map';
+
 /// @type String
 /// @access public
 /// @group @carbon/type
-$prefix: 'bx' !default;
+$prefix: 'cds' !default;
+
+/// @type String
+/// @access public
+/// @group @carbon/type
+$custom-property-prefix: 'cds' !default;
+
+@mixin configure($values) {
+  @if map.has-key($values, 'prefix') {
+    $prefix: map.get($values, 'prefix') !global;
+  }
+
+  @if map.has-key($values, 'custom-property-prefix') {
+    $custom-property-prefix: map.get($values, 'custom-property-prefix') !global;
+  }
+}

package/scss/_styles.scss

@@ -11,6 +11,7 @@
 @use 'sass:math';
 @use '@carbon/grid/scss/config' as gridconfig;
 @use '@carbon/grid/scss/breakpoint' as grid;
+@use 'prefix' as *;
 @use 'font-family';
 @use 'scale';
 
@@ -810,10 +811,6 @@ $tokens: (
 // TODO move following variable and `custom-property` mixin into shared file for
 // both `@carbon/type` and `@carbon/themes`
 
-/// @access private
-/// @group @carbon/type
-$custom-property-prefix: 'cds' !default;
-
 /// @access private
 /// @group @carbon/type
 @mixin custom-properties($name, $value) {

package/scss/_inlined/_classes.scss

@@ -1,42 +0,0 @@
-//
-// 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/_inlined/_default-type.scss

@@ -1,49 +0,0 @@
-//
-// 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:meta';
-@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 {
-    color: var(--cds-link-primary, #0062fe);
-  }
-
-  em {
-    font-style: italic;
-  }
-}

package/scss/_inlined/_font-family.scss

@@ -1,104 +0,0 @@
-//
-// 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: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
-$font-families: (
-  'mono':
-    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-condensed':
-    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':
-    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"
-    ),
-) !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/_inlined/_prefix.scss

@@ -1,11 +0,0 @@
-//
-// 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/_inlined/_reset.scss

@@ -1,42 +0,0 @@
-//
-// 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 *;
-
-/// 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 reset(
-  $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;
-    -moz-osx-font-smoothing: grayscale;
-    -webkit-font-smoothing: antialiased;
-    text-rendering: optimizeLegibility;
-  }
-
-  code {
-    font-family: $mono-font-family;
-  }
-
-  strong {
-    @include font-weight('semibold');
-  }
-}

package/scss/_inlined/_scale.scss

@@ -1,57 +0,0 @@
-//
-// 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';
-@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 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) * 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
-$type-scale: ();
-@for $i from 1 through 23 {
-  $type-scale: list.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);
-}