@carbon/type 10.34.0-rc.0 → 10.36.0

package/scss/modules/_styles.scss

@@ -5,6 +5,8 @@
 // LICENSE file in the root directory of this source tree.
 //
 
+/* stylelint-disable number-max-precision */
+
 @use 'sass:map';
 @use '@carbon/layout';
 @use 'font-family';
@@ -12,11 +14,12 @@
 
 /// @type Map
 /// @access public
+/// @deprecated
 /// @group @carbon/type
 $caption-01: (
   font-size: scale.type-scale(1),
   font-weight: font-family.font-weight('regular'),
-  line-height: 1.34,
+  line-height: 1.33333,
   letter-spacing: 0.32px,
 ) !default;
 
@@ -26,16 +29,37 @@ $caption-01: (
 $label-01: (
   font-size: scale.type-scale(1),
   font-weight: font-family.font-weight('regular'),
-  line-height: 1.34,
+  line-height: 1.33333,
   letter-spacing: 0.32px,
 ) !default;
 
 /// @type Map
 /// @access public
 /// @group @carbon/type
+$legal-01: (
+  font-size: scale.type-scale(1),
+  font-weight: font-family.font-weight('regular'),
+  line-height: 1.33333,
+  letter-spacing: 0.32px,
+) !default;
+
+/// @type Map
+/// @access public
+/// @group @carbon/type
+$legal-02: (
+  font-size: scale.type-scale(2),
+  font-weight: font-family.font-weight('regular'),
+  line-height: 1.28572,
+  letter-spacing: 0.16px,
+) !default;
+
+/// @type Map
+/// @access public
+/// @deprecated
+/// @group @carbon/type
 $helper-text-01: (
   font-size: scale.type-scale(1),
-  line-height: 1.34,
+  line-height: 1.33333,
   letter-spacing: 0.32px,
 ) !default;
 
@@ -45,20 +69,30 @@ $helper-text-01: (
 $body-short-01: (
   font-size: scale.type-scale(2),
   font-weight: font-family.font-weight('regular'),
-  line-height: 1.29,
+  line-height: 1.28572,
   letter-spacing: 0.16px,
 ) !default;
 
+/// @type Map
+/// @access public
+/// @group @carbon/type
+$body-compact-01: $body-short-01 !default;
+
 /// @type Map
 /// @access public
 /// @group @carbon/type
 $body-long-01: (
   font-size: scale.type-scale(2),
   font-weight: font-family.font-weight('regular'),
-  line-height: 1.43,
+  line-height: 1.42857,
   letter-spacing: 0.16px,
 ) !default;
 
+/// @type Map
+/// @access public
+/// @group @carbon/type
+$body-01: $body-long-01 !default;
+
 /// @type Map
 /// @access public
 /// @group @carbon/type
@@ -69,6 +103,11 @@ $body-short-02: (
   letter-spacing: 0,
 ) !default;
 
+/// @type Map
+/// @access public
+/// @group @carbon/type
+$body-compact-02: $body-short-02 !default;
+
 /// @type Map
 /// @access public
 /// @group @carbon/type
@@ -79,6 +118,11 @@ $body-long-02: (
   letter-spacing: 0,
 ) !default;
 
+/// @type Map
+/// @access public
+/// @group @carbon/type
+$body-02: $body-long-02 !default;
+
 /// @type Map
 /// @access public
 /// @group @carbon/type
@@ -86,7 +130,7 @@ $code-01: (
   font-family: font-family.font-family('mono'),
   font-size: scale.type-scale(1),
   font-weight: font-family.font-weight('regular'),
-  line-height: 1.34,
+  line-height: 1.33333,
   letter-spacing: 0.32px,
 ) !default;
 
@@ -97,7 +141,7 @@ $code-02: (
   font-family: font-family.font-family('mono'),
   font-size: scale.type-scale(2),
   font-weight: font-family.font-weight('regular'),
-  line-height: 1.43,
+  line-height: 1.42857,
   letter-spacing: 0.32px,
 ) !default;
 
@@ -107,19 +151,39 @@ $code-02: (
 $heading-01: (
   font-size: scale.type-scale(2),
   font-weight: font-family.font-weight('semibold'),
-  line-height: 1.29,
+  line-height: 1.42857,
   letter-spacing: 0.16px,
 ) !default;
 
 /// @type Map
 /// @access public
 /// @group @carbon/type
-$productive-heading-01: $heading-01 !default;
+$productive-heading-01: (
+  font-size: scale.type-scale(2),
+  font-weight: font-family.font-weight('semibold'),
+  line-height: 1.28572,
+  letter-spacing: 0.16px,
+) !default;
+
+/// @type Map
+/// @access public
+/// @group @carbon/type
+$heading-compact-01: $productive-heading-01 !default;
 
 /// @type Map
 /// @access public
 /// @group @carbon/type
 $heading-02: (
+  font-size: scale.type-scale(3),
+  font-weight: font-family.font-weight('semibold'),
+  line-height: 1.5,
+  letter-spacing: 0,
+) !default;
+
+/// @type Map
+/// @access public
+/// @group @carbon/type
+$productive-heading-02: (
   font-size: scale.type-scale(3),
   font-weight: font-family.font-weight('semibold'),
   line-height: 1.375,
@@ -129,7 +193,7 @@ $heading-02: (
 /// @type Map
 /// @access public
 /// @group @carbon/type
-$productive-heading-02: $heading-02 !default;
+$heading-compact-02: $productive-heading-02 !default;
 
 /// @type Map
 /// @access public
@@ -141,16 +205,26 @@ $productive-heading-03: (
   letter-spacing: 0,
 ) !default;
 
+/// @type Map
+/// @access public
+/// @group @carbon/type
+$heading-03: $productive-heading-03 !default;
+
 /// @type Map
 /// @access public
 /// @group @carbon/type
 $productive-heading-04: (
   font-size: scale.type-scale(7),
   font-weight: font-family.font-weight('regular'),
-  line-height: 1.29,
+  line-height: 1.28572,
   letter-spacing: 0,
 ) !default;
 
+/// @type Map
+/// @access public
+/// @group @carbon/type
+$heading-04: $productive-heading-04 !default;
+
 /// @type Map
 /// @access public
 /// @group @carbon/type
@@ -161,6 +235,11 @@ $productive-heading-05: (
   letter-spacing: 0,
 ) !default;
 
+/// @type Map
+/// @access public
+/// @group @carbon/type
+$heading-05: $productive-heading-05 !default;
+
 /// @type Map
 /// @access public
 /// @group @carbon/type
@@ -172,6 +251,11 @@ $productive-heading-06: (
   letter-spacing: 0,
 ) !default;
 
+/// @type Map
+/// @access public
+/// @group @carbon/type
+$heading-06: $productive-heading-06 !default;
+
 /// @type Map
 /// @access public
 /// @group @carbon/type
@@ -185,22 +269,17 @@ $productive-heading-07: (
 /// @type Map
 /// @access public
 /// @group @carbon/type
-$expressive-heading-01: map.merge(
-  $heading-01,
-  (
-    line-height: 1.25,
-  )
-) !default;
+$heading-07: $productive-heading-07 !default;
 
 /// @type Map
 /// @access public
 /// @group @carbon/type
-$expressive-heading-02: map.merge(
-  $heading-02,
-  (
-    line-height: 1.5,
-  )
-) !default;
+$expressive-heading-01: $heading-01 !default;
+
+/// @type Map
+/// @access public
+/// @group @carbon/type
+$expressive-heading-02: $heading-02 !default;
 
 /// @type Map
 /// @access public
@@ -222,13 +301,18 @@ $expressive-heading-03: (
   ),
 ) !default;
 
+/// @type Map
+/// @access public
+/// @group @carbon/type
+$fluid-heading-03: $expressive-heading-03 !default;
+
 /// @type Map
 /// @access public
 /// @group @carbon/type
 $expressive-heading-04: (
   font-size: scale.type-scale(7),
   font-weight: font-family.font-weight('regular'),
-  line-height: 1.29,
+  line-height: 1.28572,
   letter-spacing: 0,
   breakpoints: (
     xlg: (
@@ -241,6 +325,11 @@ $expressive-heading-04: (
   ),
 ) !default;
 
+/// @type Map
+/// @access public
+/// @group @carbon/type
+$fluid-heading-04: $expressive-heading-04 !default;
+
 /// @type Map
 /// @access public
 /// @group @carbon/type
@@ -269,6 +358,11 @@ $expressive-heading-05: (
   ),
 ) !default;
 
+/// @type Map
+/// @access public
+/// @group @carbon/type
+$fluid-heading-05: $expressive-heading-05 !default;
+
 /// @type Map
 /// @access public
 /// @group @carbon/type
@@ -296,6 +390,11 @@ $expressive-heading-06: (
   ),
 ) !default;
 
+/// @type Map
+/// @access public
+/// @group @carbon/type
+$fluid-heading-06: $expressive-heading-06 !default;
+
 /// @type Map
 /// @access public
 /// @group @carbon/type
@@ -307,7 +406,7 @@ $expressive-paragraph-01: (
   breakpoints: (
     lg: (
       font-size: scale.type-scale(7),
-      line-height: 1.29,
+      line-height: 1.28572,
     ),
     max: (
       font-size: scale.type-scale(8),
@@ -316,10 +415,16 @@ $expressive-paragraph-01: (
   ),
 );
 
+/// @type Map
+/// @access public
+/// @group @carbon/type
+$fluid-paragraph-01: $expressive-paragraph-01 !default;
+
 /// @type Map
 /// @access public
 /// @group @carbon/type
 $quotation-01: (
+  font-family: font-family.font-family('serif'),
   font-size: scale.type-scale(5),
   font-weight: font-family.font-weight('regular'),
   line-height: 1.3,
@@ -334,7 +439,7 @@ $quotation-01: (
     ),
     xlg: (
       font-size: scale.type-scale(7),
-      line-height: 1.29,
+      line-height: 1.28572,
     ),
     max: (
       font-size: scale.type-scale(8),
@@ -343,10 +448,16 @@ $quotation-01: (
   ),
 ) !default;
 
+/// @type Map
+/// @access public
+/// @group @carbon/type
+$fluid-quotation-01: $quotation-01 !default;
+
 /// @type Map
 /// @access public
 /// @group @carbon/type
 $quotation-02: (
+  font-family: font-family.font-family('serif'),
   font-size: scale.type-scale(8),
   font-weight: font-family.font-weight('light'),
   line-height: 1.25,
@@ -370,6 +481,11 @@ $quotation-02: (
   ),
 ) !default;
 
+/// @type Map
+/// @access public
+/// @group @carbon/type
+$fluid-quotation-02: $quotation-02 !default;
+
 /// @type Map
 /// @access public
 /// @group @carbon/type
@@ -396,6 +512,11 @@ $display-01: (
   ),
 ) !default;
 
+/// @type Map
+/// @access public
+/// @group @carbon/type
+$fluid-display-01: $display-01 !default;
+
 /// @type Map
 /// @access public
 /// @group @carbon/type
@@ -422,6 +543,11 @@ $display-02: (
   ),
 ) !default;
 
+/// @type Map
+/// @access public
+/// @group @carbon/type
+$fluid-display-02: $display-02 !default;
+
 /// @type Map
 /// @access public
 /// @group @carbon/type
@@ -453,6 +579,11 @@ $display-03: (
   ),
 ) !default;
 
+/// @type Map
+/// @access public
+/// @group @carbon/type
+$fluid-display-03: $display-03 !default;
+
 /// @type Map
 /// @access public
 /// @group @carbon/type
@@ -484,6 +615,11 @@ $display-04: (
   ),
 ) !default;
 
+/// @type Map
+/// @access public
+/// @group @carbon/type
+$fluid-display-04: $display-04 !default;
+
 /// @type Map
 /// @access public
 /// @group @carbon/type
@@ -519,6 +655,31 @@ $tokens: (
   display-02: $display-02,
   display-03: $display-03,
   display-04: $display-04,
+  // V11 Tokens
+  legal-01: $legal-01,
+  legal-02: $legal-02,
+  body-compact-01: $body-compact-01,
+  body-compact-02: $body-compact-02,
+  heading-compact-01: $heading-compact-01,
+  heading-compact-02: $heading-compact-02,
+  body-01: $body-01,
+  body-02: $body-02,
+  heading-03: $heading-03,
+  heading-04: $heading-04,
+  heading-05: $heading-05,
+  heading-06: $heading-06,
+  heading-07: $heading-07,
+  fluid-heading-03: $fluid-heading-03,
+  fluid-heading-04: $fluid-heading-04,
+  fluid-heading-05: $fluid-heading-05,
+  fluid-heading-06: $fluid-heading-06,
+  fluid-paragraph-01: $fluid-paragraph-01,
+  fluid-quotation-01: $fluid-quotation-01,
+  fluid-quotation-02: $fluid-quotation-02,
+  fluid-display-01: $fluid-display-01,
+  fluid-display-02: $fluid-display-02,
+  fluid-display-03: $fluid-display-03,
+  fluid-display-04: $fluid-display-04,
 );
 
 /// @param {Map} $map

package/scss/vendor/@carbon/layout/_convert.import.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.
+//
+//-------------------------------------------
+// Compatibility notes (*.import.scss)
+// ------------------------------------------
+//
+// This file is intended to be consumed and processed with dart-sass.
+// It is incompatible with node-sass/libsass as it contains sass language features
+// or functions that are unavailable in node-sass/libsass, such as `math.div`.
+//
+// The non-`.import` suffixed version of this file eg. `_filename.scss`
+// is intended to be compatible with node-sass/libsass.
+//
+// Styles authored within this file must be duplicated to the corresponding
+// compatibility file to ensure we continue to support node-sass and dart-sass
+// in v10.
+
+@use 'sass:math';
+
+/// Default font size
+/// @type Number
+/// @access public
+/// @group @carbon/layout
+$carbon--base-font-size: 16px !default;
+
+/// Convert a given px unit to a rem unit
+/// @param {Number} $px - Number with px unit
+/// @return {Number} Number with rem unit
+/// @access public
+/// @group @carbon/layout
+@function carbon--rem($px) {
+  @if unit($px) != 'px' {
+    // TODO: update to @error in v11
+    @warn "Expected argument $px to be of type `px`, instead received: `#{unit($px)}`";
+  }
+
+  @return math.div($px, $carbon--base-font-size) * 1rem;
+}
+
+/// Convert a given px unit to a em unit
+/// @param {Number} $px - Number with px unit
+/// @return {Number} Number with em unit
+/// @access public
+/// @group @carbon/layout
+@function carbon--em($px) {
+  @if unit($px) != 'px' {
+    // TODO: update to @error in v11
+    @warn "Expected argument $px to be of type `px`, instead received: `#{unit($px)}`";
+  }
+
+  @return math.div($px, $carbon--base-font-size) * 1em;
+}

package/scss/vendor/@carbon/layout/_convert.scss

@@ -4,6 +4,20 @@
 // This source code is licensed under the Apache-2.0 license found in the
 // LICENSE file in the root directory of this source tree.
 //
+//-------------------------------------------
+// Compatibility notes
+// ------------------------------------------
+//
+// This file is intended to be consumed and processed with node-sass/libsass.
+// Sass language features only available in dart-sass, such as `math.div`,
+// should not be used.
+//
+// The `.import` suffixed version of this file eg. `_filename.import.scss`
+// is intended to be compatible with dart-sass.
+//
+// Styles authored within this file must be duplicated to the corresponding
+// compatibility file to ensure we continue to support node-sass and dart-sass
+// in v10.
 
 /// Default font size
 /// @type Number

package/scss/vendor/@carbon/layout/_key-height.import.scss

@@ -0,0 +1,112 @@
+//
+// 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.
+//
+//-------------------------------------------
+// Compatibility notes (*.import.scss)
+// ------------------------------------------
+//
+// This file is intended to be consumed and processed with dart-sass.
+// It is incompatible with node-sass/libsass as it contains sass language features
+// or functions that are unavailable in node-sass/libsass, such as `math.div`.
+//
+// The non-`.import` suffixed version of this file eg. `_filename.scss`
+// is intended to be compatible with node-sass/libsass.
+//
+// Styles authored within this file must be duplicated to the corresponding
+// compatibility file to ensure we continue to support node-sass and dart-sass
+// in v10.
+
+@use "sass:math";
+@import 'breakpoint'; /* stylelint-disable-line no-invalid-position-at-import-rule */
+@import 'utilities'; /* stylelint-disable-line no-invalid-position-at-import-rule */
+
+/// Get the column width for a given breakpoint
+/// @param {String} $breakpoint
+/// @param {Map} $breakpoints [$carbon--grid-breakpoints]
+/// @return {Number} In rem
+/// @access public
+/// @group @carbon/layout
+@function carbon--get-column-width(
+  $breakpoint,
+  $breakpoints: $carbon--grid-breakpoints
+) {
+  @if map-has-key($breakpoints, $breakpoint) {
+    $values: map-get($breakpoints, $breakpoint);
+    $width: map-get($values, width);
+    $margin: map-get($values, margin);
+    $columns: map-get($values, columns);
+
+    @return math.div($width - (2 * $margin), $columns);
+  } @else {
+    @warn 'Breakpoint: `#{$breakpoint}` is not a valid breakpoint.';
+  }
+}
+
+/// @type Map
+/// @access public
+/// @group @carbon/layout
+$carbon--key-height-scales: (
+  sm: (
+    carbon--get-column-width(sm),
+    carbon--get-column-width(sm) * 2,
+    carbon--get-column-width(sm) * 3,
+    carbon--get-column-width(sm) * 4,
+    carbon--get-column-width(sm) * 5,
+    carbon--get-column-width(sm) * 6,
+  ),
+  md: (
+    carbon--get-column-width(md),
+    carbon--get-column-width(md) * 2,
+    carbon--get-column-width(md) * 3,
+    carbon--get-column-width(md) * 4,
+    carbon--get-column-width(md) * 5,
+    carbon--get-column-width(md) * 6,
+  ),
+  lg: (
+    carbon--get-column-width(lg),
+    carbon--get-column-width(lg) * 2,
+    carbon--get-column-width(lg) * 3,
+    carbon--get-column-width(lg) * 4,
+    carbon--get-column-width(lg) * 5,
+    carbon--get-column-width(lg) * 6,
+    carbon--get-column-width(lg) * 7,
+    carbon--get-column-width(lg) * 8,
+  ),
+  xlg: (
+    carbon--get-column-width(xlg),
+    carbon--get-column-width(xlg) * 2,
+    carbon--get-column-width(xlg) * 3,
+    carbon--get-column-width(xlg) * 4,
+    carbon--get-column-width(xlg) * 5,
+    carbon--get-column-width(xlg) * 6,
+    carbon--get-column-width(xlg) * 7,
+    carbon--get-column-width(xlg) * 8,
+  ),
+  max: (
+    carbon--get-column-width(max),
+    carbon--get-column-width(max) * 2,
+    carbon--get-column-width(max) * 3,
+    carbon--get-column-width(max) * 4,
+    carbon--get-column-width(max) * 5,
+    carbon--get-column-width(max) * 6,
+    carbon--get-column-width(max) * 7,
+    carbon--get-column-width(max) * 8,
+  ),
+);
+
+/// Get the value of a key height step at a given breakpoint
+/// @param {String} $breakpoint
+/// @param {Number} $step
+/// @return {Number} In rem
+/// @access public
+/// @group @carbon/layout
+@function carbon--key-height($breakpoint, $step) {
+  @if map-has-key($carbon--key-height-scales, $breakpoint) {
+    @return nth(map-get($carbon--key-height-scales, $breakpoint), $step);
+  } @else {
+    @warn 'Breakpoint: `#{$breakpoint}` is not a valid breakpoint.';
+  }
+}

package/scss/vendor/@carbon/layout/_key-height.scss

@@ -4,6 +4,20 @@
 // This source code is licensed under the Apache-2.0 license found in the
 // LICENSE file in the root directory of this source tree.
 //
+//-------------------------------------------
+// Compatibility notes
+// ------------------------------------------
+//
+// This file is intended to be consumed and processed with node-sass/libsass.
+// Sass language features only available in dart-sass, such as `math.div`,
+// should not be used.
+//
+// The `.import` suffixed version of this file eg. `_filename.import.scss`
+// is intended to be compatible with dart-sass.
+//
+// Styles authored within this file must be duplicated to the corresponding
+// compatibility file to ensure we continue to support node-sass and dart-sass
+// in v10.
 
 @import 'breakpoint';
 @import 'utilities';

package/scss/vendor/@carbon/layout/modules/_convert.scss

@@ -5,6 +5,8 @@
 // LICENSE file in the root directory of this source tree.
 //
 
+@use 'sass:math';
+
 /// Default font size
 /// @type Number
 /// @access public
@@ -22,7 +24,7 @@ $base-font-size: 16px !default;
     @warn "Expected argument $px to be of type `px`, instead received: `#{unit($px)}`";
   }
 
-  @return ($px / $base-font-size) * 1rem;
+  @return math.div($px, $base-font-size) * 1rem;
 }
 
 /// Convert a given px unit to a em unit
@@ -36,5 +38,5 @@ $base-font-size: 16px !default;
     @warn "Expected argument $px to be of type `px`, instead received: `#{unit($px)}`";
   }
 
-  @return ($px / $base-font-size) * 1em;
+  @return math.div($px, $base-font-size) * 1em;
 }