@carbon/type 10.33.0 → 10.35.0

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/_breakpoint.scss

@@ -57,7 +57,7 @@ $grid-breakpoints: (
 ) !default;
 
 /// Get the value of the next breakpoint, or null for the last breakpoint
-/// @param {String} $name - The name of the brekapoint
+/// @param {String} $name - The name of the breakpoint
 /// @param {Map} $breakpoints [$grid-breakpoints] - A map of breakpoints where the key is the name of the breakpoint and the value is the values for the breakpoint
 /// @param {List} $breakpoint-names [map-keys($breakpoints)] - A list of names from the `$breakpoints` map
 /// @return {String}
@@ -76,7 +76,7 @@ $grid-breakpoints: (
 }
 
 /// Get the value of the previous breakpoint, or null for the first breakpoint
-/// @param {String} $name - The name of the brekapoint
+/// @param {String} $name - The name of the breakpoint
 /// @param {Map} $breakpoints [$grid-breakpoints] - A map of breakpoints where the key is the name of the breakpoint and the value is the values for the breakpoint
 /// @param {List} $breakpoint-names [map-keys($breakpoints)] - A list of names from the `$breakpoints` map
 /// @return {String}
@@ -95,7 +95,7 @@ $grid-breakpoints: (
 }
 
 /// Check to see if the given breakpoint name
-/// @param {String} $name - The name of the brekapoint
+/// @param {String} $name - The name of the breakpoint
 /// @param {Map} $breakpoints [$grid-breakpoints] - A map of breakpoints where the key is the name of the breakpoint and the value is the values for the breakpoint
 /// @return {Bool}
 /// @access public
@@ -114,7 +114,7 @@ $grid-breakpoints: (
   @return key-by-index($breakpoints, $total-breakpoints);
 }
 
-/// Get the infix for a given breakpoint in a list of breakpoints. Usesful for generate the size part in a selector, for example: `.prefix--col-sm-2`.
+/// Get the infix for a given breakpoint in a list of breakpoints. Useful for generating the size part in a selector, for example: `.prefix--col-sm-2`.
 /// @param {String} $name - The name of the breakpoint
 /// @return {String}
 /// @access public

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;
 }

package/src/__tests__/__snapshots__/styles-test.js.snap

@@ -1,9 +1,37 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`styles body01 should be printable 1`] = `
+"font-size: 0.875rem;
+font-weight: 400;
+line-height: 1.42857;
+letter-spacing: 0.16px;"
+`;
+
+exports[`styles body02 should be printable 1`] = `
+"font-size: 1rem;
+font-weight: 400;
+line-height: 1.5;
+letter-spacing: 0;"
+`;
+
+exports[`styles bodyCompact01 should be printable 1`] = `
+"font-size: 0.875rem;
+font-weight: 400;
+line-height: 1.28572;
+letter-spacing: 0.16px;"
+`;
+
+exports[`styles bodyCompact02 should be printable 1`] = `
+"font-size: 1rem;
+font-weight: 400;
+line-height: 1.375;
+letter-spacing: 0;"
+`;
+
 exports[`styles bodyLong01 should be printable 1`] = `
 "font-size: 0.875rem;
 font-weight: 400;
-line-height: 1.43;
+line-height: 1.42857;
 letter-spacing: 0.16px;"
 `;
 
@@ -17,7 +45,7 @@ letter-spacing: 0;"
 exports[`styles bodyShort01 should be printable 1`] = `
 "font-size: 0.875rem;
 font-weight: 400;
-line-height: 1.29;
+line-height: 1.28572;
 letter-spacing: 0.16px;"
 `;
 
@@ -31,14 +59,14 @@ letter-spacing: 0;"
 exports[`styles caption01 should be printable 1`] = `
 "font-size: 0.75rem;
 font-weight: 400;
-line-height: 1.34;
+line-height: 1.33333;
 letter-spacing: 0.32px;"
 `;
 
 exports[`styles caption02 should be printable 1`] = `
 "font-size: 0.875rem;
 font-weight: 400;
-line-height: 1.29;
+line-height: 1.28572;
 letter-spacing: 0.32px;"
 `;
 
@@ -46,7 +74,7 @@ exports[`styles code01 should be printable 1`] = `
 "font-family: 'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace;
 font-size: 0.75rem;
 font-weight: 400;
-line-height: 1.34;
+line-height: 1.33333;
 letter-spacing: 0.32px;"
 `;
 
@@ -54,7 +82,7 @@ exports[`styles code02 should be printable 1`] = `
 "font-family: 'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace;
 font-size: 0.875rem;
 font-weight: 400;
-line-height: 1.43;
+line-height: 1.42857;
 letter-spacing: 0.32px;"
 `;
 
@@ -110,7 +138,7 @@ letter-spacing: 0;"
 exports[`styles expressiveHeading04 should be printable 1`] = `
 "font-size: 1.75rem;
 font-weight: 400;
-line-height: 1.29;
+line-height: 1.28572;
 letter-spacing: 0;"
 `;
 
@@ -135,50 +163,192 @@ line-height: 1.334;
 letter-spacing: 0;"
 `;
 
+exports[`styles fluidDisplay01 should be printable 1`] = `
+"font-size: 2.625rem;
+font-weight: 300;
+line-height: 1.19;
+letter-spacing: 0;"
+`;
+
+exports[`styles fluidDisplay02 should be printable 1`] = `
+"font-size: 2.625rem;
+font-weight: 600;
+line-height: 1.19;
+letter-spacing: 0;"
+`;
+
+exports[`styles fluidDisplay03 should be printable 1`] = `
+"font-size: 2.625rem;
+font-weight: 300;
+line-height: 1.19;
+letter-spacing: 0;"
+`;
+
+exports[`styles fluidDisplay04 should be printable 1`] = `
+"font-size: 2.625rem;
+font-weight: 600;
+line-height: 1.19;
+letter-spacing: 0;"
+`;
+
+exports[`styles fluidHeading03 should be printable 1`] = `
+"font-size: 1.25rem;
+font-weight: 400;
+line-height: 1.4;
+letter-spacing: 0;"
+`;
+
+exports[`styles fluidHeading04 should be printable 1`] = `
+"font-size: 1.75rem;
+font-weight: 400;
+line-height: 1.28572;
+letter-spacing: 0;"
+`;
+
+exports[`styles fluidHeading05 should be printable 1`] = `
+"font-size: 2rem;
+font-weight: 400;
+line-height: 1.25;
+letter-spacing: 0;"
+`;
+
+exports[`styles fluidHeading06 should be printable 1`] = `
+"font-size: 2rem;
+font-weight: 600;
+line-height: 1.25;
+letter-spacing: 0;"
+`;
+
+exports[`styles fluidParagraph01 should be printable 1`] = `
+"font-size: 1.5rem;
+font-weight: 300;
+line-height: 1.334;
+letter-spacing: 0;"
+`;
+
+exports[`styles fluidQuotation01 should be printable 1`] = `
+"font-family: 'IBM Plex Serif', 'Georgia', Times, serif;
+font-size: 1.25rem;
+font-weight: 400;
+line-height: 1.3;
+letter-spacing: 0;"
+`;
+
+exports[`styles fluidQuotation02 should be printable 1`] = `
+"font-family: 'IBM Plex Serif', 'Georgia', Times, serif;
+font-size: 2rem;
+font-weight: 300;
+line-height: 1.25;
+letter-spacing: 0;"
+`;
+
 exports[`styles heading01 should be printable 1`] = `
 "font-size: 0.875rem;
 font-weight: 600;
-line-height: 1.29;
+line-height: 1.42857;
 letter-spacing: 0.16px;"
 `;
 
 exports[`styles heading02 should be printable 1`] = `
 "font-size: 1rem;
 font-weight: 600;
+line-height: 1.5;
+letter-spacing: 0;"
+`;
+
+exports[`styles heading03 should be printable 1`] = `
+"font-size: 1.25rem;
+font-weight: 400;
+line-height: 1.4;
+letter-spacing: 0;"
+`;
+
+exports[`styles heading04 should be printable 1`] = `
+"font-size: 1.75rem;
+font-weight: 400;
+line-height: 1.28572;
+letter-spacing: 0;"
+`;
+
+exports[`styles heading05 should be printable 1`] = `
+"font-size: 2rem;
+font-weight: 400;
+line-height: 1.25;
+letter-spacing: 0;"
+`;
+
+exports[`styles heading06 should be printable 1`] = `
+"font-size: 2.625rem;
+font-weight: 300;
+line-height: 1.199;
+letter-spacing: 0;"
+`;
+
+exports[`styles heading07 should be printable 1`] = `
+"font-size: 3.375rem;
+font-weight: 300;
+line-height: 1.199;
+letter-spacing: 0;"
+`;
+
+exports[`styles headingCompact01 should be printable 1`] = `
+"font-size: 0.875rem;
+font-weight: 600;
+line-height: 1.28572;
+letter-spacing: 0.16px;"
+`;
+
+exports[`styles headingCompact02 should be printable 1`] = `
+"font-size: 1rem;
+font-weight: 600;
 line-height: 1.375;
 letter-spacing: 0;"
 `;
 
 exports[`styles helperText01 should be printable 1`] = `
 "font-size: 0.75rem;
-line-height: 1.34;
+line-height: 1.33333;
 letter-spacing: 0.32px;"
 `;
 
 exports[`styles helperText02 should be printable 1`] = `
 "font-size: 0.875rem;
-line-height: 1.29;
-letter-spacing: 0.32px;"
+line-height: 1.28572;
+letter-spacing: 0.16px;"
 `;
 
 exports[`styles label01 should be printable 1`] = `
 "font-size: 0.75rem;
 font-weight: 400;
-line-height: 1.34;
+line-height: 1.33333;
 letter-spacing: 0.32px;"
 `;
 
 exports[`styles label02 should be printable 1`] = `
 "font-size: 0.875rem;
 font-weight: 400;
-line-height: 1.29;
+line-height: 1.28572;
+letter-spacing: 0.16px;"
+`;
+
+exports[`styles legal01 should be printable 1`] = `
+"font-size: 0.75rem;
+font-weight: 400;
+line-height: 1.33333;
 letter-spacing: 0.32px;"
 `;
 
+exports[`styles legal02 should be printable 1`] = `
+"font-size: 0.875rem;
+font-weight: 400;
+line-height: 1.28572;
+letter-spacing: 0.16px;"
+`;
+
 exports[`styles productiveHeading01 should be printable 1`] = `
 "font-size: 0.875rem;
 font-weight: 600;
-line-height: 1.29;
+line-height: 1.28572;
 letter-spacing: 0.16px;"
 `;
 
@@ -199,7 +369,7 @@ letter-spacing: 0;"
 exports[`styles productiveHeading04 should be printable 1`] = `
 "font-size: 1.75rem;
 font-weight: 400;
-line-height: 1.29;
+line-height: 1.28572;
 letter-spacing: 0;"
 `;
 
@@ -220,19 +390,21 @@ letter-spacing: 0;"
 exports[`styles productiveHeading07 should be printable 1`] = `
 "font-size: 3.375rem;
 font-weight: 300;
-line-height: 1.19;
+line-height: 1.199;
 letter-spacing: 0;"
 `;
 
 exports[`styles quotation01 should be printable 1`] = `
-"font-size: 1.25rem;
+"font-family: 'IBM Plex Serif', 'Georgia', Times, serif;
+font-size: 1.25rem;
 font-weight: 400;
 line-height: 1.3;
 letter-spacing: 0;"
 `;
 
 exports[`styles quotation02 should be printable 1`] = `
-"font-size: 2rem;
+"font-family: 'IBM Plex Serif', 'Georgia', Times, serif;
+font-size: 2rem;
 font-weight: 300;
 line-height: 1.25;
 letter-spacing: 0;"

package/src/__tests__/exports-test.js

@@ -12,53 +12,77 @@ import * as CarbonType from '../';
 describe('type', () => {
   it('should export type helpers', () => {
     expect(Object.keys(CarbonType)).toMatchInlineSnapshot(`
-      Array [
-        "fontFamilies",
-        "fontFamily",
-        "fontWeights",
-        "fontWeight",
-        "print",
-        "reset",
-        "getTypeSize",
-        "scale",
-        "fluid",
-        "unstable_tokens",
-        "styles",
-        "caption01",
-        "caption02",
-        "label01",
-        "label02",
-        "helperText01",
-        "helperText02",
-        "bodyShort01",
-        "bodyLong01",
-        "bodyShort02",
-        "bodyLong02",
-        "code01",
-        "code02",
-        "heading01",
-        "productiveHeading01",
-        "heading02",
-        "productiveHeading02",
-        "productiveHeading03",
-        "productiveHeading04",
-        "productiveHeading05",
-        "productiveHeading06",
-        "productiveHeading07",
-        "expressiveHeading01",
-        "expressiveHeading02",
-        "expressiveHeading03",
-        "expressiveHeading04",
-        "expressiveHeading05",
-        "expressiveHeading06",
-        "expressiveParagraph01",
-        "quotation01",
-        "quotation02",
-        "display01",
-        "display02",
-        "display03",
-        "display04",
-      ]
-    `);
+Array [
+  "fontFamilies",
+  "fontFamily",
+  "fontWeights",
+  "fontWeight",
+  "print",
+  "reset",
+  "getTypeSize",
+  "scale",
+  "fluid",
+  "unstable_tokens",
+  "styles",
+  "caption01",
+  "caption02",
+  "label01",
+  "label02",
+  "helperText01",
+  "helperText02",
+  "bodyShort01",
+  "bodyLong01",
+  "bodyShort02",
+  "bodyLong02",
+  "code01",
+  "code02",
+  "heading01",
+  "productiveHeading01",
+  "heading02",
+  "productiveHeading02",
+  "productiveHeading03",
+  "productiveHeading04",
+  "productiveHeading05",
+  "productiveHeading06",
+  "productiveHeading07",
+  "expressiveHeading01",
+  "expressiveHeading02",
+  "expressiveHeading03",
+  "expressiveHeading04",
+  "expressiveHeading05",
+  "expressiveHeading06",
+  "expressiveParagraph01",
+  "quotation01",
+  "quotation02",
+  "display01",
+  "display02",
+  "display03",
+  "display04",
+  "legal01",
+  "legal02",
+  "bodyCompact01",
+  "bodyCompact02",
+  "body01",
+  "body02",
+  "headingCompact01",
+  "headingCompact02",
+  "heading03",
+  "heading04",
+  "heading05",
+  "heading06",
+  "heading07",
+  "fluidHeading03",
+  "fluidHeading04",
+  "fluidHeading05",
+  "fluidHeading06",
+  "fluidParagraph01",
+  "fluidQuotation01",
+  "fluidQuotation02",
+  "fluidDisplay01",
+  "fluidDisplay02",
+  "fluidDisplay03",
+  "fluidDisplay04",
+]
+`);
   });
 });