@carbon/charts 0.57.1 → 0.58.1

package/styles/vendor/carbon-components/src/globals/scss/vendor/@carbon/styles/scss/_layer.scss

@@ -0,0 +1,112 @@
+//
+// Copyright IBM Corp. 2021
+//
+// This source code is licensed under the Apache-2.0 license found in the
+// LICENSE file in the root directory of this source tree.
+//
+
+@use 'sass:list';
+@use 'sass:map';
+@use './config' as *;
+@use './theme';
+@use './utilities/custom-property';
+
+$-default-layer-sets: (
+  layer: (
+    theme.$layer-01,
+    theme.$layer-02,
+    theme.$layer-03,
+  ),
+  layer-active: (
+    theme.$layer-active-01,
+    theme.$layer-active-02,
+    theme.$layer-active-03,
+  ),
+  layer-hover: (
+    theme.$layer-hover-01,
+    theme.$layer-hover-02,
+    theme.$layer-hover-03,
+  ),
+  layer-selected: (
+    theme.$layer-selected-01,
+    theme.$layer-selected-02,
+    theme.$layer-selected-03,
+  ),
+  layer-selected-hover: (
+    theme.$layer-selected-hover-01,
+    theme.$layer-selected-hover-02,
+    theme.$layer-selected-hover-03,
+  ),
+  layer-accent: (
+    theme.$layer-accent-01,
+    theme.$layer-accent-02,
+    theme.$layer-accent-03,
+  ),
+  layer-accent-hover: (
+    theme.$layer-accent-hover-01,
+    theme.$layer-accent-hover-02,
+    theme.$layer-accent-hover-03,
+  ),
+  layer-accent-active: (
+    theme.$layer-accent-active-01,
+    theme.$layer-accent-active-02,
+    theme.$layer-accent-active-03,
+  ),
+  field: (
+    theme.$field-01,
+    theme.$field-02,
+    theme.$field-03,
+  ),
+  field-hover: (
+    theme.$field-hover-01,
+    theme.$field-hover-02,
+    theme.$field-hover-03,
+  ),
+  border-subtle: (
+    theme.$border-subtle-01,
+    theme.$border-subtle-02,
+    theme.$border-subtle-03,
+  ),
+  border-subtle-selected: (
+    theme.$border-subtle-selected-01,
+    theme.$border-subtle-selected-02,
+    theme.$border-subtle-selected-03,
+  ),
+  border-strong: (
+    theme.$border-strong-01,
+    theme.$border-strong-02,
+    theme.$border-strong-03,
+  ),
+);
+
+/// Define a map of layer sets, each set should have values for each layer in
+/// the application. The key of this map is used for the CSS Custom Property
+/// name whose value is updated as more layers are added.
+/// @type {Map}
+$layer-sets: () !default;
+$layer-sets: map.deep-merge($-default-layer-sets, $layer-sets);
+
+/// Emit the layer tokens defined in $layer-sets for the given $level
+/// @param {Number} $level
+@mixin -emit-layer-tokens($level) {
+  @each $key, $layer-set in $layer-sets {
+    $value: list.nth($layer-set, $level);
+    @include custom-property.declaration($key, $value);
+  }
+}
+
+:root {
+  @include -emit-layer-tokens(1);
+}
+
+.#{$prefix}--layer-one {
+  @include -emit-layer-tokens(1);
+}
+
+.#{$prefix}--layer-two {
+  @include -emit-layer-tokens(2);
+}
+
+.#{$prefix}--layer-three {
+  @include -emit-layer-tokens(3);
+}

package/styles/vendor/carbon-components/src/globals/scss/vendor/@carbon/styles/scss/_motion.scss

@@ -6,62 +6,33 @@
 //
 
 @forward '@carbon/motion';
-@use '@carbon/motion';
 
 /// Used primarily for removing elements from the screen
 /// @type Function
 /// @access public
-/// @group global-motion
+/// @group motion
 $ease-in: cubic-bezier(0.25, 0, 1, 1);
 
-/// Used for adding elements to the screen or changing on-screen states at a users's input
+/// Used for adding elements to the screen or changing on-screen states at a user's input
 /// @type Function
 /// @access public
-/// @group global-motion
+/// @group motion
 $ease-out: cubic-bezier(0, 0, 0.25, 1);
 
 /// Used for the majority of animations
 /// @type Function
 /// @access public
-/// @group global-motion
+/// @group motion
 $standard-easing: cubic-bezier(0.5, 0, 0.1, 1);
 
 /// Base transition duration
 /// @type Number
 /// @access public
-/// @group global-motion
-$transition--base: 250ms;
+/// @group motion
+$transition-base: 250ms;
 
 /// Expansion duration
 /// @type Number
 /// @access public
-/// @group global-motion
-$transition--expansion: 300ms;
-
-/// Default ease-in for components
-/// @access public
-/// @type Function
-/// @group global-motion
-$ease-in: cubic-bezier(0, 0, 0.38, 0.9);
-
-/// Default ease-out for components
-/// @access public
-/// @type Function
-/// @group global-motion
-$ease-out: cubic-bezier(0.2, 0, 1, 0.9);
-
-/// Default easing for components
-/// @access public
-/// @type Function
-/// @group global-motion
-$standard-easing: cubic-bezier(0.2, 0, 0.38, 0.9);
-
-/// @access public
-/// @group global-motion
-/// @alias duration--fast-02
-$transition--base: motion.$duration-fast-02;
-
-/// @access public
-/// @group global-motion
-/// @alias duration--moderate-02
-$transition--expansion: motion.$duration-moderate-02;
+/// @group motion
+$transition-expansion: 300ms;

package/styles/vendor/carbon-components/src/globals/scss/vendor/@carbon/styles/scss/_reset.scss

@@ -6,7 +6,7 @@
 //
 
 @use 'config';
-@use 'type';
+@use 'type/reset' as type;
 
 @mixin reset {
   /// http://meyerweb.com/eric/tools/css/reset/
@@ -144,8 +144,8 @@
     border-collapse: collapse;
     border-spacing: 0;
   }
-  /// End vendor reset
 
+  /// End vendor reset
   html {
     box-sizing: border-box;
   }

package/styles/vendor/carbon-components/src/globals/scss/vendor/@carbon/styles/scss/_spacing.scss

@@ -7,6 +7,7 @@
 
 @forward '@carbon/layout/scss/modules/spacing'
 show
+  $spacing,
   $spacing-01,
   $spacing-02,
   $spacing-03,

package/styles/vendor/carbon-components/src/globals/scss/vendor/@carbon/styles/scss/_theme.scss

@@ -9,79 +9,16 @@
 @use '@carbon/themes/scss/modules/config' with (
   $prefix: $prefix,
 );
-@use '@carbon/themes/scss/modules/tokens';
-@forward '@carbon/themes/scss/modules/theme';
+@use './compat/themes' as compat;
+@use './themes';
+
+@forward '@carbon/themes/scss/modules/theme' with (
+  $fallback: themes.$white !default,
+  $theme: compat.$white !default,
+);
 @forward '@carbon/themes/scss/modules/tokens';
+@use '@carbon/themes/scss/modules/tokens';
 @use './utilities/custom-property';
-@use './utilities/layer-set' with (
-  $layer-sets: (
-    layer: (
-      tokens.$layer-01,
-      tokens.$layer-02,
-      tokens.$layer-03,
-    ),
-    layer-active: (
-      tokens.$layer-active-01,
-      tokens.$layer-active-02,
-      tokens.$layer-active-03,
-    ),
-    layer-hover: (
-      tokens.$layer-hover-01,
-      tokens.$layer-hover-02,
-      tokens.$layer-hover-03,
-    ),
-    layer-selected: (
-      tokens.$layer-selected-01,
-      tokens.$layer-selected-02,
-      tokens.$layer-selected-03,
-    ),
-    layer-selected-hover: (
-      tokens.$layer-selected-hover-01,
-      tokens.$layer-selected-hover-02,
-      tokens.$layer-selected-hover-03,
-    ),
-    layer-accent: (
-      tokens.$layer-accent-01,
-      tokens.$layer-accent-02,
-      tokens.$layer-accent-03,
-    ),
-    layer-accent-hover: (
-      tokens.$layer-accent-hover-01,
-      tokens.$layer-accent-hover-02,
-      tokens.$layer-accent-hover-03,
-    ),
-    layer-accent-active: (
-      tokens.$layer-accent-active-01,
-      tokens.$layer-accent-active-02,
-      tokens.$layer-accent-active-03,
-    ),
-    field: (
-      tokens.$field-01,
-      tokens.$field-02,
-      tokens.$field-03,
-    ),
-    field-hover: (
-      tokens.$field-hover-01,
-      tokens.$field-hover-02,
-      tokens.$field-hover-03,
-    ),
-    border-subtle: (
-      tokens.$border-subtle-01,
-      tokens.$border-subtle-02,
-      tokens.$border-subtle-03,
-    ),
-    border-subtle-selected: (
-      tokens.$border-subtle-selected-01,
-      tokens.$border-subtle-selected-02,
-      tokens.$border-subtle-selected-03,
-    ),
-    border-strong: (
-      tokens.$border-strong-01,
-      tokens.$border-strong-02,
-      tokens.$border-strong-03,
-    ),
-  ),
-);
 
 // Layer sets
 $layer: custom-property.get-var('layer');
@@ -99,27 +36,3 @@ $field-hover: custom-property.get-var('field-hover');
 $border-subtle: custom-property.get-var('border-subtle');
 $border-subtle-selected: custom-property.get-var('border-subtle-selected');
 $border-strong: custom-property.get-var('border-strong');
-
-// TODO remove
-$interactive-01: #0f62fe;
-$interactive-04: #0f62fe;
-$decorative-01: #e0e0e0;
-$hover-row: #636363;
-$ui-01: #f4f4f4;
-$ui-02: #ffffff;
-$ui-05: #161616;
-$disabled-01: #f4f4f4;
-$disabled-02: #c6c6c6;
-$hover-field: #e5e5e5;
-$hover-ui: #e5e5e5;
-$selected-ui: #e0e0e0;
-$hover-selected-ui: #cacaca;
-$hover-light-ui: #e5e5e5;
-$active-light-ui: #c6c6c6;
-$text-01: #161616;
-$text-02: #525252;
-$text-04: #ffffff;
-$text-05: #6f6f6f;
-$icon-01: #f4f4f4;
-$icon-02: #525252;
-$link-01: #0f62fe;

package/styles/vendor/carbon-components/src/globals/scss/vendor/@carbon/styles/scss/_zone.scss

@@ -10,6 +10,8 @@
 @use './config';
 @use './themes';
 @use './theme';
+// Inline themes depend on layer styles to property reset the layer level
+@use './layer';
 @use './utilities/custom-property';
 
 /// Specify a Map of zones where the key will be used as part of the selector

package/styles/vendor/carbon-components/src/globals/scss/vendor/@carbon/styles/scss/compat/_theme.scss

@@ -0,0 +1,9 @@
+//
+// 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.
+//
+
+@forward '../theme';
+@forward '@carbon/themes/scss/compat/tokens';

package/styles/vendor/carbon-components/src/globals/scss/vendor/@carbon/styles/scss/compat/_themes.scss

@@ -0,0 +1,35 @@
+//
+// 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.
+//
+
+@use 'sass:map';
+@use '@carbon/themes/scss/compat/themes' as compat;
+@use '../themes';
+
+// For our compatability themes, we will merge the themes from v10 and v11 and
+// provide this combination as one of our four default themes.
+//
+// This is useful for situations where a user is trying to use the compatability
+// theme, for example:
+//
+// ```scss
+// @use '@carbon/styles/scss/reset';
+// @use '@carbon/styles/scss/compat/themes';
+// @use '@carbon/styles/scss/compat/theme' with (
+//   $theme: themes.$g100
+// );
+// ```
+//
+// Without merging these themes, then the value of a token in v11 would default
+// to our $white theme. As a result, the user would need to specify both the
+// `$theme` and the `$fallback` to the `scss/compat/theme` module.
+//
+// Now that we merge the themes, this code snippet will function as expected.
+
+$white: map.merge(themes.$white, compat.$white);
+$g10: map.merge(themes.$g10, compat.$g10);
+$g90: map.merge(themes.$g90, compat.$g90);
+$g100: map.merge(themes.$g100, compat.$g100);

package/styles/vendor/carbon-components/src/globals/scss/vendor/@carbon/styles/scss/components/_index.scss

@@ -6,41 +6,54 @@
 //
 
 @use 'accordion';
-@use 'button';
+@use 'aspect-ratio';
 @use 'breadcrumb';
+@use 'button';
 @use 'checkbox';
 @use 'code-snippet';
+@use 'combo-box';
 @use 'content-switcher';
+@use 'copy-button';
+@use 'data-table';
+@use 'data-table/action';
+@use 'data-table/expandable';
+@use 'data-table/skeleton';
+@use 'data-table/sort';
 @use 'date-picker';
+@use 'dropdown';
 @use 'file-uploader';
+@use 'form';
 @use 'inline-loading';
 @use 'link';
 @use 'list';
+@use 'list-box';
 @use 'loading';
 @use 'menu';
-@use 'tooltip';
-@use 'radio-button';
 @use 'modal';
+@use 'multiselect';
 @use 'notification';
+@use 'number-input';
+@use 'overflow-menu';
+@use 'pagination';
+@use 'pagination-nav';
+@use 'popover';
+@use 'progress-bar';
+@use 'progress-indicator';
+@use 'radio-button';
 @use 'search';
-@use 'data-table';
-@use 'data-table/action';
-@use 'data-table/expandable';
-@use 'data-table/skeleton';
-@use 'data-table/sort';
-@use "slider";
+@use 'select';
+@use 'skeleton-styles';
+@use 'slider';
+@use 'stack';
+@use 'structured-list';
+@use 'tabs';
+@use 'tag';
 @use 'text-area';
 @use 'text-input';
-@use 'structured-list';
-@use 'overflow-menu';
-@use 'number-input';
 @use 'tile';
 @use 'time-picker';
-@use 'treeview';
+@use 'toggletip';
 @use 'toggle';
-@use 'pagination';
-@use 'pagination-nav';
-@use 'select';
-@use 'progress-indicator';
-@use 'tabs';
+@use 'tooltip';
+@use 'treeview';
 @use 'ui-shell';

package/styles/vendor/carbon-components/src/globals/scss/vendor/@carbon/styles/scss/components/accordion/_accordion.scss

@@ -87,7 +87,7 @@ $content-padding: 0 0 0 $spacing-05 !default;
     }
 
     &:hover::before {
-      background-color: $background-hover;
+      background-color: $layer-hover;
     }
 
     &:focus {
@@ -125,11 +125,15 @@ $content-padding: 0 0 0 $spacing-05 !default;
 
   .#{$prefix}--accordion__item--disabled,
   .#{$prefix}--accordion__item--disabled + .#{$prefix}--accordion__item {
-    border-top: 1px solid $border-disabled;
+    // v10 icon doesn't have 1:1 translation, keeping color same as enabled state
+    // https://github.com/carbon-design-system/carbon/issues/10373#issuecomment-1021638147
+    border-top: 1px solid $border-subtle;
   }
 
   li.#{$prefix}--accordion__item--disabled:last-of-type {
-    border-bottom: 1px solid $border-disabled;
+    // v10 icon doesn't have 1:1 translation, keeping color same as enabled state
+    // https://github.com/carbon-design-system/carbon/issues/10373#issuecomment-1021638147
+    border-bottom: 1px solid $border-subtle;
   }
 
   .#{$prefix}--accordion__arrow {
@@ -147,7 +151,7 @@ $content-padding: 0 0 0 $spacing-05 !default;
   }
 
   .#{$prefix}--accordion__title {
-    @include type-style('body-long-01');
+    @include type-style('body-01');
 
     z-index: 1;
     width: 100%;
@@ -172,7 +176,7 @@ $content-padding: 0 0 0 $spacing-05 !default;
     }
 
     > p {
-      @include type-style('body-long-01');
+      @include type-style('body-01');
     }
   }
 
@@ -183,11 +187,15 @@ $content-padding: 0 0 0 $spacing-05 !default;
 
   .#{$prefix}--accordion--start .#{$prefix}--accordion__arrow {
     // Alters `$arrow-margin` token:
-    margin: 2px 0 0 $spacing-03;
+    margin: 2px 0 0 $spacing-05;
+  }
+
+  .#{$prefix}--accordion--start .#{$prefix}--accordion__title {
+    margin-right: $spacing-05;
   }
 
   .#{$prefix}--accordion--start .#{$prefix}--accordion__content {
-    margin-left: $spacing-06;
+    margin-left: $spacing-07;
   }
 
   .#{$prefix}--accordion__item--collapsing .#{$prefix}--accordion__content,
@@ -199,6 +207,7 @@ $content-padding: 0 0 0 $spacing-05 !default;
     0% {
       @include -content-visible;
     }
+
     100% {
       @include -content-hidden;
     }
@@ -208,6 +217,7 @@ $content-padding: 0 0 0 $spacing-05 !default;
     0% {
       @include -content-hidden;
     }
+
     100% {
       @include -content-visible;
     }

package/styles/vendor/carbon-components/src/globals/scss/vendor/@carbon/styles/scss/components/aspect-ratio/_aspect-ratio.scss

@@ -0,0 +1,73 @@
+//
+// 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.
+//
+
+@use 'sass:list';
+@use 'sass:math';
+@use 'sass:meta';
+@use '../../config' as *;
+
+/// The aspect ratios that are used to generate corresponding aspect ratio
+/// classes in code
+/// @type List
+/// @access public
+/// @group @carbon/grid
+$carbon--aspect-ratios: (
+  (16, 9),
+  (9, 16),
+  (2, 1),
+  (1, 2),
+  (4, 3),
+  (3, 4),
+  (3, 2),
+  (2, 3),
+  (1, 1)
+);
+
+/// Generates the CSS classname utilities for the aspect ratios
+///
+/// CSS Tricks article on aspect ratios and all the different ways it can be done.
+/// https://css-tricks.com/aspect-ratio-boxes/#article-header-id-6
+///
+/// That article references an earlier article on the topic.
+/// https://keithjgrant.com/posts/2017/03/aspect-ratios/
+///
+/// @param {Number} $width width from an aspect ratio
+/// @param {Number} $height height from an aspect ratio
+/// @access private
+/// @group @carbon/grid
+@mixin aspect-ratio($aspect-ratios: $carbon--aspect-ratios) {
+  .#{$prefix}--aspect-ratio {
+    position: relative;
+  }
+
+  .#{$prefix}--aspect-ratio::before {
+    width: 1px;
+    height: 0;
+    margin-left: -1px;
+    content: '';
+    float: left;
+  }
+
+  .#{$prefix}--aspect-ratio::after {
+    display: table;
+    clear: both;
+    content: '';
+  }
+
+  @each $aspect-ratio in $aspect-ratios {
+    $width: list.nth($aspect-ratio, 1);
+    $height: list.nth($aspect-ratio, 2);
+
+    .#{$prefix}--aspect-ratio--#{$width}x#{$height}::before {
+      @if meta.function-exists('div', 'math') {
+        padding-top: math.percentage(math.div($height, $width));
+      } @else {
+        padding-top: math.percentage(($height / $width));
+      }
+    }
+  }
+}

package/styles/vendor/carbon-components/src/globals/scss/vendor/@carbon/styles/scss/components/aspect-ratio/_index.scss

@@ -0,0 +1,11 @@
+//
+// 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.
+//
+
+@forward 'aspect-ratio';
+@use 'aspect-ratio';
+
+@include aspect-ratio.aspect-ratio;

package/styles/vendor/carbon-components/src/globals/scss/vendor/@carbon/styles/scss/components/breadcrumb/_breadcrumb.scss

@@ -17,7 +17,7 @@
 @mixin breadcrumb {
   .#{$prefix}--breadcrumb {
     @include reset;
-    @include type-style('body-short-01');
+    @include type-style('body-compact-01');
 
     display: inline;
 
@@ -97,6 +97,10 @@
       content: '';
       opacity: 0;
       transition: opacity $duration-fast-01 motion(standard, productive);
+
+      @media screen and (prefers-reduced-motion: reduce) {
+        transition: none;
+      }
     }
   }