@carbon/elements 10.41.0-rc.0 → 10.43.0

package/scss/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/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/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/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/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/scss/themes/generated/_mixins.scss

@@ -226,6 +226,30 @@
   $display-02: map-get($theme, 'display-02') !global;
   $display-03: map-get($theme, 'display-03') !global;
   $display-04: map-get($theme, 'display-04') !global;
+  $legal-01: map-get($theme, 'legal-01') !global;
+  $legal-02: map-get($theme, 'legal-02') !global;
+  $body-compact-01: map-get($theme, 'body-compact-01') !global;
+  $body-compact-02: map-get($theme, 'body-compact-02') !global;
+  $body-01: map-get($theme, 'body-01') !global;
+  $body-02: map-get($theme, 'body-02') !global;
+  $heading-compact-01: map-get($theme, 'heading-compact-01') !global;
+  $heading-compact-02: map-get($theme, 'heading-compact-02') !global;
+  $heading-03: map-get($theme, 'heading-03') !global;
+  $heading-04: map-get($theme, 'heading-04') !global;
+  $heading-05: map-get($theme, 'heading-05') !global;
+  $heading-06: map-get($theme, 'heading-06') !global;
+  $heading-07: map-get($theme, 'heading-07') !global;
+  $fluid-heading-03: map-get($theme, 'fluid-heading-03') !global;
+  $fluid-heading-04: map-get($theme, 'fluid-heading-04') !global;
+  $fluid-heading-05: map-get($theme, 'fluid-heading-05') !global;
+  $fluid-heading-06: map-get($theme, 'fluid-heading-06') !global;
+  $fluid-paragraph-01: map-get($theme, 'fluid-paragraph-01') !global;
+  $fluid-quotation-01: map-get($theme, 'fluid-quotation-01') !global;
+  $fluid-quotation-02: map-get($theme, 'fluid-quotation-02') !global;
+  $fluid-display-01: map-get($theme, 'fluid-display-01') !global;
+  $fluid-display-02: map-get($theme, 'fluid-display-02') !global;
+  $fluid-display-03: map-get($theme, 'fluid-display-03') !global;
+  $fluid-display-04: map-get($theme, 'fluid-display-04') !global;
   $spacing-01: map-get($theme, 'spacing-01') !global;
   $spacing-02: map-get($theme, 'spacing-02') !global;
   $spacing-03: map-get($theme, 'spacing-03') !global;
@@ -3005,6 +3029,269 @@
       @include custom-property('display-04', map-get($theme, 'display-04'));
     }
 
+    @if should-emit($theme, $parent-carbon-theme, 'legal-01', $emit-difference)
+    {
+      @include custom-property('legal-01', map-get($theme, 'legal-01'));
+    }
+
+    @if should-emit($theme, $parent-carbon-theme, 'legal-02', $emit-difference)
+    {
+      @include custom-property('legal-02', map-get($theme, 'legal-02'));
+    }
+
+    @if should-emit(
+      $theme,
+      $parent-carbon-theme,
+      'body-compact-01',
+      $emit-difference
+    )
+    {
+      @include custom-property(
+        'body-compact-01',
+        map-get($theme, 'body-compact-01')
+      );
+    }
+
+    @if should-emit(
+      $theme,
+      $parent-carbon-theme,
+      'body-compact-02',
+      $emit-difference
+    )
+    {
+      @include custom-property(
+        'body-compact-02',
+        map-get($theme, 'body-compact-02')
+      );
+    }
+
+    @if should-emit($theme, $parent-carbon-theme, 'body-01', $emit-difference) {
+      @include custom-property('body-01', map-get($theme, 'body-01'));
+    }
+
+    @if should-emit($theme, $parent-carbon-theme, 'body-02', $emit-difference) {
+      @include custom-property('body-02', map-get($theme, 'body-02'));
+    }
+
+    @if should-emit(
+      $theme,
+      $parent-carbon-theme,
+      'heading-compact-01',
+      $emit-difference
+    )
+    {
+      @include custom-property(
+        'heading-compact-01',
+        map-get($theme, 'heading-compact-01')
+      );
+    }
+
+    @if should-emit(
+      $theme,
+      $parent-carbon-theme,
+      'heading-compact-02',
+      $emit-difference
+    )
+    {
+      @include custom-property(
+        'heading-compact-02',
+        map-get($theme, 'heading-compact-02')
+      );
+    }
+
+    @if should-emit(
+      $theme,
+      $parent-carbon-theme,
+      'heading-03',
+      $emit-difference
+    )
+    {
+      @include custom-property('heading-03', map-get($theme, 'heading-03'));
+    }
+
+    @if should-emit(
+      $theme,
+      $parent-carbon-theme,
+      'heading-04',
+      $emit-difference
+    )
+    {
+      @include custom-property('heading-04', map-get($theme, 'heading-04'));
+    }
+
+    @if should-emit(
+      $theme,
+      $parent-carbon-theme,
+      'heading-05',
+      $emit-difference
+    )
+    {
+      @include custom-property('heading-05', map-get($theme, 'heading-05'));
+    }
+
+    @if should-emit(
+      $theme,
+      $parent-carbon-theme,
+      'heading-06',
+      $emit-difference
+    )
+    {
+      @include custom-property('heading-06', map-get($theme, 'heading-06'));
+    }
+
+    @if should-emit(
+      $theme,
+      $parent-carbon-theme,
+      'heading-07',
+      $emit-difference
+    )
+    {
+      @include custom-property('heading-07', map-get($theme, 'heading-07'));
+    }
+
+    @if should-emit(
+      $theme,
+      $parent-carbon-theme,
+      'fluid-heading-03',
+      $emit-difference
+    )
+    {
+      @include custom-property(
+        'fluid-heading-03',
+        map-get($theme, 'fluid-heading-03')
+      );
+    }
+
+    @if should-emit(
+      $theme,
+      $parent-carbon-theme,
+      'fluid-heading-04',
+      $emit-difference
+    )
+    {
+      @include custom-property(
+        'fluid-heading-04',
+        map-get($theme, 'fluid-heading-04')
+      );
+    }
+
+    @if should-emit(
+      $theme,
+      $parent-carbon-theme,
+      'fluid-heading-05',
+      $emit-difference
+    )
+    {
+      @include custom-property(
+        'fluid-heading-05',
+        map-get($theme, 'fluid-heading-05')
+      );
+    }
+
+    @if should-emit(
+      $theme,
+      $parent-carbon-theme,
+      'fluid-heading-06',
+      $emit-difference
+    )
+    {
+      @include custom-property(
+        'fluid-heading-06',
+        map-get($theme, 'fluid-heading-06')
+      );
+    }
+
+    @if should-emit(
+      $theme,
+      $parent-carbon-theme,
+      'fluid-paragraph-01',
+      $emit-difference
+    )
+    {
+      @include custom-property(
+        'fluid-paragraph-01',
+        map-get($theme, 'fluid-paragraph-01')
+      );
+    }
+
+    @if should-emit(
+      $theme,
+      $parent-carbon-theme,
+      'fluid-quotation-01',
+      $emit-difference
+    )
+    {
+      @include custom-property(
+        'fluid-quotation-01',
+        map-get($theme, 'fluid-quotation-01')
+      );
+    }
+
+    @if should-emit(
+      $theme,
+      $parent-carbon-theme,
+      'fluid-quotation-02',
+      $emit-difference
+    )
+    {
+      @include custom-property(
+        'fluid-quotation-02',
+        map-get($theme, 'fluid-quotation-02')
+      );
+    }
+
+    @if should-emit(
+      $theme,
+      $parent-carbon-theme,
+      'fluid-display-01',
+      $emit-difference
+    )
+    {
+      @include custom-property(
+        'fluid-display-01',
+        map-get($theme, 'fluid-display-01')
+      );
+    }
+
+    @if should-emit(
+      $theme,
+      $parent-carbon-theme,
+      'fluid-display-02',
+      $emit-difference
+    )
+    {
+      @include custom-property(
+        'fluid-display-02',
+        map-get($theme, 'fluid-display-02')
+      );
+    }
+
+    @if should-emit(
+      $theme,
+      $parent-carbon-theme,
+      'fluid-display-03',
+      $emit-difference
+    )
+    {
+      @include custom-property(
+        'fluid-display-03',
+        map-get($theme, 'fluid-display-03')
+      );
+    }
+
+    @if should-emit(
+      $theme,
+      $parent-carbon-theme,
+      'fluid-display-04',
+      $emit-difference
+    )
+    {
+      @include custom-property(
+        'fluid-display-04',
+        map-get($theme, 'fluid-display-04')
+      );
+    }
+
     @if should-emit(
       $theme,
       $parent-carbon-theme,