@carbon/type 10.34.0-rc.0 → 10.36.0

package/scss/_styles.scss

@@ -4,6 +4,22 @@
 // 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.
+
+/* stylelint-disable number-max-precision */
 
 @import '@carbon/layout/scss/breakpoint';
 @import 'font-family';
@@ -11,21 +27,23 @@
 
 /// @type Map
 /// @access public
+/// @deprecated
 /// @group @carbon/type
 $caption-01: (
   font-size: carbon--type-scale(1),
   font-weight: carbon--font-weight('regular'),
-  line-height: 1.34,
+  line-height: 1.33333,
   letter-spacing: 0.32px,
 ) !default;
 
 /// @type Map
 /// @access public
+/// @deprecated
 /// @group @carbon/type
 $caption-02: (
   font-size: carbon--type-scale(2),
   font-weight: carbon--font-weight('regular'),
-  line-height: 1.29,
+  line-height: 1.28572,
   letter-spacing: 0.32px,
 ) !default;
 
@@ -35,7 +53,7 @@ $caption-02: (
 $label-01: (
   font-size: carbon--type-scale(1),
   font-weight: carbon--font-weight('regular'),
-  line-height: 1.34,
+  line-height: 1.33333,
   letter-spacing: 0.32px,
 ) !default;
 
@@ -45,27 +63,49 @@ $label-01: (
 $label-02: (
   font-size: carbon--type-scale(2),
   font-weight: carbon--font-weight('regular'),
-  line-height: 1.29,
+  line-height: 1.28572,
+  letter-spacing: 0.16px,
+) !default;
+
+/// @type Map
+/// @access public
+/// @group @carbon/type
+$legal-01: (
+  font-size: carbon--type-scale(1),
+  font-weight: carbon--font-weight('regular'),
+  line-height: 1.33333,
   letter-spacing: 0.32px,
 ) !default;
 
 /// @type Map
 /// @access public
 /// @group @carbon/type
+$legal-02: (
+  font-size: carbon--type-scale(2),
+  font-weight: carbon--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: carbon--type-scale(1),
-  line-height: 1.34,
+  line-height: 1.33333,
   letter-spacing: 0.32px,
 ) !default;
 
 /// @type Map
 /// @access public
+/// @deprecated
 /// @group @carbon/type
 $helper-text-02: (
   font-size: carbon--type-scale(2),
   font-weight: carbon--font-weight('regular'),
-  line-height: 1.29,
-  letter-spacing: 0.32px,
+  line-height: 1.28572,
+  letter-spacing: 0.16px,
 ) !default;
 
 /// @type Map
@@ -74,20 +114,30 @@ $helper-text-02: (
 $body-short-01: (
   font-size: carbon--type-scale(2),
   font-weight: carbon--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: carbon--type-scale(2),
   font-weight: carbon--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
@@ -98,6 +148,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
@@ -108,6 +163,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
@@ -115,7 +175,7 @@ $code-01: (
   font-family: carbon--font-family('mono'),
   font-size: carbon--type-scale(1),
   font-weight: carbon--font-weight('regular'),
-  line-height: 1.34,
+  line-height: 1.33333,
   letter-spacing: 0.32px,
 ) !default;
 
@@ -126,7 +186,7 @@ $code-02: (
   font-family: carbon--font-family('mono'),
   font-size: carbon--type-scale(2),
   font-weight: carbon--font-weight('regular'),
-  line-height: 1.43,
+  line-height: 1.42857,
   letter-spacing: 0.32px,
 ) !default;
 
@@ -136,14 +196,24 @@ $code-02: (
 $heading-01: (
   font-size: carbon--type-scale(2),
   font-weight: carbon--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: (
+  font-size: carbon--type-scale(2),
+  font-weight: carbon--font-weight('semibold'),
+  line-height: 1.28572,
   letter-spacing: 0.16px,
 ) !default;
 
 /// @type Map
 /// @access public
 /// @group @carbon/type
-$productive-heading-01: $heading-01 !default;
+$heading-compact-01: $productive-heading-01 !default;
 
 /// @type Map
 /// @access public
@@ -151,14 +221,25 @@ $productive-heading-01: $heading-01 !default;
 $heading-02: (
   font-size: carbon--type-scale(3),
   font-weight: carbon--font-weight('semibold'),
-  line-height: 1.375,
+  line-height: 1.5,
   letter-spacing: 0,
 ) !default;
 
 /// @type Map
 /// @access public
 /// @group @carbon/type
-$productive-heading-02: $heading-02 !default;
+$productive-heading-02: (
+  font-size: carbon--type-scale(3),
+  font-weight: carbon--font-weight('semibold'),
+  line-height: 1.375,
+  letter-spacing: 0,
+) !default;
+
+$heading-compact-02: $productive-heading-02 !default;
+
+// Question for designers:
+// heading-02 currently maps to productive heading-02
+// what are the styles for heading-compact-02?
 
 /// @type Map
 /// @access public
@@ -170,16 +251,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: carbon--type-scale(7),
   font-weight: carbon--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
@@ -190,22 +281,32 @@ $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
 $productive-heading-06: (
-  font-size: carbon--type-scale(8),
+  font-size: carbon--type-scale(10),
   font-weight: carbon--font-weight('light'),
   // Extra digit needed for precision in Chrome
   line-height: 1.199,
   letter-spacing: 0,
 ) !default;
 
+/// @type Map
+/// @access public
+/// @group @carbon/type
+$heading-06: $productive-heading-06 !default;
+
 /// @type Map
 /// @access public
 /// @group @carbon/type
 $productive-heading-07: (
-  font-size: carbon--type-scale(10),
+  font-size: carbon--type-scale(12),
   font-weight: carbon--font-weight('light'),
   line-height: 1.19,
   letter-spacing: 0,
@@ -214,22 +315,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
@@ -246,18 +342,23 @@ $expressive-heading-03: (
     ),
     max: (
       font-size: carbon--type-scale(6),
-      line-height: 1.334,
+      line-height: 1.33333,
     ),
   ),
 ) !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: carbon--type-scale(7),
   font-weight: carbon--font-weight('regular'),
-  line-height: 1.29,
+  line-height: 1.28572,
   letter-spacing: 0,
   breakpoints: (
     xlg: (
@@ -270,6 +371,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
@@ -298,6 +404,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
@@ -325,18 +436,23 @@ $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
 $expressive-paragraph-01: (
   font-size: carbon--type-scale(6),
   font-weight: carbon--font-weight('light'),
-  line-height: 1.334,
+  line-height: 1.33333,
   letter-spacing: 0,
   breakpoints: (
     lg: (
       font-size: carbon--type-scale(7),
-      line-height: 1.29,
+      line-height: 1.28572,
     ),
     max: (
       font-size: carbon--type-scale(8),
@@ -345,10 +461,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: carbon--font-family('serif'),
   font-size: carbon--type-scale(5),
   font-weight: carbon--font-weight('regular'),
   line-height: 1.3,
@@ -359,11 +481,11 @@ $quotation-01: (
     ),
     lg: (
       font-size: carbon--type-scale(6),
-      line-height: 1.334,
+      line-height: 1.33333,
     ),
     xlg: (
       font-size: carbon--type-scale(7),
-      line-height: 1.29,
+      line-height: 1.28572,
     ),
     max: (
       font-size: carbon--type-scale(8),
@@ -372,10 +494,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: carbon--font-family('serif'),
   font-size: carbon--type-scale(8),
   font-weight: carbon--font-weight('light'),
   line-height: 1.25,
@@ -399,6 +527,11 @@ $quotation-02: (
   ),
 ) !default;
 
+/// @type Map
+/// @access public
+/// @group @carbon/type
+$fluid-quotation-02: $quotation-02 !default;
+
 /// @type Map
 /// @access public
 /// @group @carbon/type
@@ -425,6 +558,11 @@ $display-01: (
   ),
 ) !default;
 
+/// @type Map
+/// @access public
+/// @group @carbon/type
+$fluid-display-01: $display-01 !default;
+
 /// @type Map
 /// @access public
 /// @group @carbon/type
@@ -451,6 +589,11 @@ $display-02: (
   ),
 ) !default;
 
+/// @type Map
+/// @access public
+/// @group @carbon/type
+$fluid-display-02: $display-02 !default;
+
 /// @type Map
 /// @access public
 /// @group @carbon/type
@@ -482,6 +625,11 @@ $display-03: (
   ),
 ) !default;
 
+/// @type Map
+/// @access public
+/// @group @carbon/type
+$fluid-display-03: $display-03 !default;
+
 /// @type Map
 /// @access public
 /// @group @carbon/type
@@ -513,6 +661,11 @@ $display-04: (
   ),
 ) !default;
 
+/// @type Map
+/// @access public
+/// @group @carbon/type
+$fluid-display-04: $display-04 !default;
+
 /// @type Map
 /// @access public
 /// @group @carbon/type
@@ -551,6 +704,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/modules/_scale.scss

@@ -17,7 +17,7 @@
     @return 12px;
   }
   // Yn = Yn-1 + {INT[(n-2)/4] + 1} * 2
-  @return get-type-size($step - 1) + (floor(($step - 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