@carbon/type 10.0.0-rc.0 → 10.2.0

package/scss/_styles.scss

@@ -6,123 +6,192 @@
 //
 
 @import '@carbon/layout/scss/breakpoint';
-@import 'font-family';
 @import 'scale';
 
+/// @type Map
+/// @access public
+/// @group @carbon/type
 $caption-01: (
-  font-family: carbon--font-family('sans'),
   font-size: carbon--type-scale(1),
   font-weight: carbon--font-weight('regular'),
   line-height: carbon--rem(16px),
   letter-spacing: 0.32px,
 ) !default;
 
+/// @type Map
+/// @access public
+/// @group @carbon/type
 $label-01: (
-  font-family: carbon--font-family('sans'),
   font-size: carbon--type-scale(1),
   font-weight: carbon--font-weight('regular'),
   line-height: carbon--rem(16px),
   letter-spacing: 0.32px,
 ) !default;
 
+/// @type Map
+/// @access public
+/// @group @carbon/type
 $helper-text-01: (
-  font-family: carbon--font-family('sans'),
   font-size: carbon--type-scale(1),
   font-style: italic,
   line-height: carbon--rem(16px),
   letter-spacing: 0.32px,
 ) !default;
 
+/// @type Map
+/// @access public
+/// @group @carbon/type
 $body-short-01: (
-  font-family: carbon--font-family('sans'),
   font-size: carbon--type-scale(2),
   font-weight: carbon--font-weight('regular'),
   line-height: carbon--rem(18px),
   letter-spacing: 0.16px,
 ) !default;
 
+/// @type Map
+/// @access public
+/// @group @carbon/type
 $body-long-01: (
-  font-family: carbon--font-family('sans'),
   font-size: carbon--type-scale(2),
   font-weight: carbon--font-weight('regular'),
   line-height: carbon--rem(20px),
   letter-spacing: 0.16px,
 ) !default;
 
+/// @type Map
+/// @access public
+/// @group @carbon/type
 $body-short-02: (
-  font-family: carbon--font-family('sans'),
   font-size: carbon--type-scale(3),
   font-weight: carbon--font-weight('regular'),
   line-height: carbon--rem(22px),
   letter-spacing: 0,
 ) !default;
 
+/// @type Map
+/// @access public
+/// @group @carbon/type
 $body-long-02: (
-  font-family: carbon--font-family('sans'),
   font-size: carbon--type-scale(3),
   font-weight: carbon--font-weight('regular'),
   line-height: carbon--rem(24px),
   letter-spacing: 0,
 ) !default;
 
+/// @type Map
+/// @access public
+/// @group @carbon/type
 $code-01: (
-  font-family: carbon--font-family('mono'),
   font-size: carbon--type-scale(1),
   font-weight: carbon--font-weight('regular'),
   line-height: carbon--rem(16px),
   letter-spacing: 0.32px,
 ) !default;
 
+/// @type Map
+/// @access public
+/// @group @carbon/type
 $code-02: (
-  font-family: carbon--font-family('mono'),
   font-size: carbon--type-scale(2),
   font-weight: carbon--font-weight('regular'),
   line-height: carbon--rem(20px),
   letter-spacing: 0.32px,
 ) !default;
 
+/// @type Map
+/// @access public
+/// @group @carbon/type
 $heading-01: (
-  font-family: carbon--font-family('sans'),
   font-size: carbon--type-scale(2),
   font-weight: carbon--font-weight('semibold'),
   line-height: carbon--rem(18px),
   letter-spacing: 0.16px,
 ) !default;
 
+/// @type Map
+/// @access public
+/// @group @carbon/type
+$productive-heading-01: $heading-01 !default;
+
+/// @type Map
+/// @access public
+/// @group @carbon/type
 $heading-02: (
-  font-family: carbon--font-family('sans'),
   font-size: carbon--type-scale(3),
   font-weight: carbon--font-weight('semibold'),
   line-height: carbon--rem(22px),
   letter-spacing: 0,
 ) !default;
 
+/// @type Map
+/// @access public
+/// @group @carbon/type
+$productive-heading-02: $heading-02 !default;
+
+/// @type Map
+/// @access public
+/// @group @carbon/type
 $productive-heading-03: (
-  font-family: carbon--font-family('sans'),
   font-size: carbon--type-scale(5),
   font-weight: carbon--font-weight('regular'),
   line-height: carbon--rem(26px),
   letter-spacing: 0,
 ) !default;
 
+/// @type Map
+/// @access public
+/// @group @carbon/type
 $productive-heading-04: (
-  font-family: carbon--font-family('sans'),
   font-size: carbon--type-scale(7),
   font-weight: carbon--font-weight('regular'),
   line-height: carbon--rem(36px),
   letter-spacing: 0,
 ) !default;
 
+/// @type Map
+/// @access public
+/// @group @carbon/type
 $productive-heading-05: (
-  font-family: carbon--font-family('sans'),
   font-size: carbon--type-scale(8),
   font-weight: carbon--font-weight('regular'),
   line-height: carbon--rem(40px),
   letter-spacing: 0,
 ) !default;
 
+/// @type Map
+/// @access public
+/// @group @carbon/type
+$productive-heading-06: (
+  font-size: carbon--type-scale(8),
+  font-weight: carbon--font-weight('light'),
+  line-height: carbon--rem(50px),
+  letter-spacing: 0,
+) !default;
+
+/// @type Map
+/// @access public
+/// @group @carbon/type
+$productive-heading-07: (
+  font-size: carbon--type-scale(10),
+  font-weight: carbon--font-weight('light'),
+  line-height: carbon--rem(64px),
+  letter-spacing: 0,
+) !default;
+
+/// @type Map
+/// @access public
+/// @group @carbon/type
+$expressive-heading-01: $heading-01 !default;
+
+/// @type Map
+/// @access public
+/// @group @carbon/type
+$expressive-heading-02: $heading-02 !default;
+
+/// @type Map
+/// @access public
+/// @group @carbon/type
 $expressive-heading-03: (
-  font-family: carbon--font-family('sans'),
   font-size: carbon--type-scale(5),
   font-weight: carbon--font-weight('regular'),
   line-height: 130%,
@@ -138,8 +207,10 @@ $expressive-heading-03: (
   ),
 ) !default;
 
+/// @type Map
+/// @access public
+/// @group @carbon/type
 $expressive-heading-04: (
-  font-family: carbon--font-family('sans'),
   font-size: carbon--type-scale(7),
   font-weight: carbon--font-weight('regular'),
   line-height: 129%,
@@ -155,8 +226,10 @@ $expressive-heading-04: (
   ),
 ) !default;
 
+/// @type Map
+/// @access public
+/// @group @carbon/type
 $expressive-heading-05: (
-  font-family: carbon--font-family('sans'),
   font-size: carbon--type-scale(8),
   font-weight: carbon--font-weight('regular'),
   line-height: 125%,
@@ -180,8 +253,10 @@ $expressive-heading-05: (
   ),
 ) !default;
 
+/// @type Map
+/// @access public
+/// @group @carbon/type
 $expressive-heading-06: (
-  font-family: carbon--font-family('sans'),
   font-size: carbon--type-scale(8),
   font-weight: carbon--font-weight('semibold'),
   line-height: 125%,
@@ -205,8 +280,10 @@ $expressive-heading-06: (
   ),
 ) !default;
 
+/// @type Map
+/// @access public
+/// @group @carbon/type
 $expressive-paragraph-01: (
-  font-family: carbon--font-family('sans'),
   font-size: carbon--type-scale(6),
   font-weight: carbon--font-weight('light'),
   line-height: 125%,
@@ -223,8 +300,10 @@ $expressive-paragraph-01: (
   ),
 );
 
+/// @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: 130%,
@@ -248,8 +327,10 @@ $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: 125%,
@@ -273,8 +354,10 @@ $quotation-02: (
   ),
 ) !default;
 
+/// @type Map
+/// @access public
+/// @group @carbon/type
 $display-01: (
-  font-family: carbon--font-family('sans'),
   font-size: carbon--type-scale(10),
   font-weight: carbon--font-weight('light'),
   line-height: 119%,
@@ -297,8 +380,10 @@ $display-01: (
   ),
 ) !default;
 
+/// @type Map
+/// @access public
+/// @group @carbon/type
 $display-02: (
-  font-family: carbon--font-family('sans'),
   font-size: carbon--type-scale(10),
   font-weight: carbon--font-weight('semibold'),
   line-height: 119%,
@@ -321,8 +406,10 @@ $display-02: (
   ),
 ) !default;
 
+/// @type Map
+/// @access public
+/// @group @carbon/type
 $display-03: (
-  font-family: carbon--font-family('sans'),
   font-size: carbon--type-scale(10),
   font-weight: carbon--font-weight('light'),
   line-height: 119%,
@@ -350,8 +437,10 @@ $display-03: (
   ),
 ) !default;
 
+/// @type Map
+/// @access public
+/// @group @carbon/type
 $display-04: (
-  font-family: carbon--font-family('sans'),
   font-size: carbon--type-scale(10),
   font-weight: carbon--font-weight('semibold'),
   line-height: 119%,
@@ -379,53 +468,56 @@ $display-04: (
   ),
 ) !default;
 
-// prettier-ignore
+/// @type Map
+/// @access public
+/// @group @carbon/type
 $tokens: (
-  // Universal tokens
   caption-01: $caption-01,
   label-01: $label-01,
-
   helper-text-01: $helper-text-01,
-
   body-short-01: $body-short-01,
   body-short-02: $body-short-02,
-
   body-long-01: $body-long-01,
   body-long-02: $body-long-02,
-
   code-01: $code-01,
   code-02: $code-02,
-
   heading-01: $heading-01,
   heading-02: $heading-02,
-
-  // Product layout, fixed
+  productive-heading-01: $productive-heading-01,
+  productive-heading-02: $productive-heading-02,
   productive-heading-03: $productive-heading-03,
   productive-heading-04: $productive-heading-04,
   productive-heading-05: $productive-heading-05,
-
-  // Editorial layout, fluid
+  productive-heading-06: $productive-heading-06,
+  productive-heading-07: $productive-heading-07,
   expressive-paragraph-01: $expressive-paragraph-01,
+  expressive-heading-01: $expressive-heading-01,
+  expressive-heading-02: $expressive-heading-02,
   expressive-heading-03: $expressive-heading-03,
   expressive-heading-04: $expressive-heading-04,
   expressive-heading-05: $expressive-heading-05,
   expressive-heading-06: $expressive-heading-06,
-
   quotation-01: $quotation-01,
   quotation-02: $quotation-02,
-
   display-01: $display-01,
   display-02: $display-02,
   display-03: $display-03,
   display-04: $display-04,
 );
 
+/// @param {Map} $map
+/// @access public
+/// @group @carbon/type
 @mixin properties($map) {
   @each $name, $value in $map {
     #{$name}: $value;
   }
 }
 
+/// @param {Number} $value - Number with units
+/// @return {Number} Without units
+/// @access public
+/// @group @carbon/type
 @function strip-unit($value) {
   @return $value / ($value * 0 + 1);
 }
@@ -442,8 +534,10 @@ $tokens: (
 /// Most of the logic for this work comes from CSS Tricks:
 /// https://css-tricks.com/snippets/css/fluid-typography/
 ///
-/// @param {Map} $type-styles - the value of a given type token
-/// @param {?Map} $breakpoints - custom breakpoints to use
+/// @param {Map} $type-styles - The value of a given type token
+/// @param {Map} $breakpoints [$carbon--grid-breakpoints] - Custom breakpoints to use
+/// @access public
+/// @group @carbon/type
 @mixin fluid-type($type-styles, $breakpoints: $carbon--grid-breakpoints) {
   // Include the initial styles for the given token by default without any
   // media query guard. This includes `font-size` as a fallback in the case
@@ -465,10 +559,11 @@ $tokens: (
 }
 
 /// Computes the fluid `font-size` for a given type style and breakpoint
-/// @param {Map} $type-styles - the styles for a given token
-/// @param {String} $name - the name of the breakpoint to which we apply the fluid
-/// styles
-/// @param {?Map} $breakpoints - the breakpoints for the grid system
+/// @param {Map} $type-styles - The styles for a given token
+/// @param {String} $name - The name of the breakpoint to which we apply the fluid
+/// @param {Map} $breakpoints [$carbon--grid-breakpoints] - The breakpoints for the grid system
+/// @access public
+/// @group @carbon/type
 @mixin fluid-type-size(
   $type-styles,
   $name,
@@ -550,10 +645,11 @@ $tokens: (
 /// styles for the token if they are defined. Fluid styles will cause the
 /// token's font-size to be computed based on the viewport size. As a result, use
 /// with caution in fixed contexts.
-/// @param {String} $name - the name of the token to get the styles for
-/// @param {?Boolean} $fluid - specify whether to include fluid styles for the
-/// @param {?Map} $breakpoints - provide a custom breakpoint map to use
-/// token
+/// @param {String} $name - The name of the token to get the styles for
+/// @param {Boolean} $fluid [false] - Specify whether to include fluid styles for the
+/// @param {Map} $breakpoints [$carbon--grid-breakpoints] - Provide a custom breakpoint map to use
+/// @access public
+/// @group @carbon/type
 @mixin carbon--type-style(
   $name,
   $fluid: false,