@carbon/charts 0.57.1 → 0.58.1

package/styles/vendor/carbon-components/src/components/toggle/_toggle.scss

@@ -62,6 +62,10 @@
         border-radius: 50%;
         content: '';
         transition: transform $duration--fast-01 motion(exit, productive);
+
+        @media screen and (prefers-reduced-motion: reduce) {
+          transition: none;
+        }
       }
     }
 
@@ -197,6 +201,10 @@
         transition: box-shadow $duration--fast-01 motion(exit, productive),
           background-color $duration--fast-01 motion(exit, productive);
         will-change: box-shadow;
+
+        @media screen and (prefers-reduced-motion: reduce) {
+          transition: none;
+        }
       }
 
       // Toggle circle
@@ -311,6 +319,10 @@
       &::after {
         cursor: not-allowed;
         transition: $duration--fast-01 motion(exit, productive);
+
+        @media screen and (prefers-reduced-motion: reduce) {
+          transition: none;
+        }
       }
     }
 
@@ -430,6 +442,10 @@
         transition: box-shadow $duration--fast-01 motion(exit, productive),
           background-color $duration--fast-01 motion(exit, productive);
         will-change: box-shadow;
+
+        @media screen and (prefers-reduced-motion: reduce) {
+          transition: none;
+        }
       }
 
       // Toggle circle
@@ -518,17 +534,21 @@
       cursor: not-allowed;
 
       &::before {
-        background-color: $disabled-01;
+        background-color: $disabled-02;
       }
 
       &::after {
-        background-color: $disabled-02;
+        background-color: $disabled-03;
       }
 
       &::before,
       &::after {
         cursor: not-allowed;
         transition: $duration--fast-01 motion(exit, productive);
+
+        @media screen and (prefers-reduced-motion: reduce) {
+          transition: none;
+        }
       }
     }
 
@@ -585,30 +605,91 @@
     //----------------------------------------------
     // Skeleton
     // ---------------------------------------------
+    //md toggle input
+    .#{$prefix}--toggle.#{$prefix}--skeleton
+      + .#{$prefix}--toggle-input__label
+      .#{$prefix}--toggle__switch {
+      @include skeleton;
 
-    .#{$prefix}--toggle__label.#{$prefix}--skeleton {
-      flex-direction: column;
-      align-items: flex-start;
+      width: 3rem;
+      margin-top: 0.5rem;
+    }
 
-      .#{$prefix}--toggle__label-text {
-        margin-bottom: $carbon--spacing-03;
-      }
+    //md skeleton label text
+    .#{$prefix}--toggle.#{$prefix}--skeleton
+      + .#{$prefix}--toggle-input__label
+      > div {
+      overflow: hidden;
+      width: 1.5rem;
+      height: 0.5rem;
+      //hides text
+      font-size: 0%;
+      line-height: 0;
+
+      @include skeleton;
     }
 
-    // Windows HCM fix
-    .#{$prefix}--toggle__switch::after,
-    .#{$prefix}--toggle__switch::before {
-      @include high-contrast-mode('outline');
+    //small toggle input
+    .#{$prefix}--toggle-input--small.#{$prefix}--skeleton
+      + .#{$prefix}--toggle-input__label
+      .#{$prefix}--toggle__switch {
+      @include skeleton;
+
+      width: 2rem;
+      margin-top: 0.5rem;
     }
 
-    // stylelint-disable-next-line no-duplicate-selectors
-    .#{$prefix}--toggle-input:focus
+    //sm skeleton label text
+    .#{$prefix}--toggle-input--small.#{$prefix}--skeleton
       + .#{$prefix}--toggle-input__label
-      > .#{$prefix}--toggle__switch::before,
-    .#{$prefix}--toggle-input:active
+      > div {
+      overflow: hidden;
+      width: 1rem;
+      height: 0.5rem;
+      //hides text
+      font-size: 0%;
+      line-height: 0;
+
+      @include skeleton;
+    }
+
+    // on/off text skeleton
+    .#{$prefix}--toggle.#{$prefix}--skeleton
       + .#{$prefix}--toggle-input__label
-      > .#{$prefix}--toggle__switch::before {
-      @include high-contrast-mode('focus');
+      .#{$prefix}--toggle__switch
+      .#{$prefix}--toggle__text--left {
+      @include skeleton;
+
+      position: absolute;
+      width: 1rem;
+      height: 0.5rem;
+    }
+
+    .#{$prefix}--toggle-input--small.#{$prefix}--skeleton
+      + .#{$prefix}--toggle-input__label
+      .#{$prefix}--toggle__switch
+      .#{$prefix}--toggle__text--left {
+      left: 2rem;
+    }
+
+    //pseudo "toggle" button
+    .#{$prefix}--toggle.#{$prefix}--skeleton
+      + .#{$prefix}--toggle-input__label
+      .#{$prefix}--toggle__switch::after,
+    .#{$prefix}--toggle.#{$prefix}--skeleton
+      + .#{$prefix}--toggle-input__label
+      .#{$prefix}--toggle__appearance::after,
+    .#{$prefix}--toggle.#{$prefix}--skeleton
+      + .#{$prefix}--toggle-input__label
+      .#{$prefix}--toggle__appearance::before {
+      display: none;
+    }
+
+    //make it square
+    .#{$prefix}--toggle.#{$prefix}--skeleton
+      + .#{$prefix}--toggle-input__label
+      .#{$prefix}--toggle__switch::before {
+      border-radius: 0;
     }
   }
 }

package/styles/vendor/carbon-components/src/components/toolbar/toolbar.js

@@ -129,7 +129,7 @@ class Toolbar extends mixin(createComponent, initComponentBySearch, handles) {
   /**
    * The component options.
    * If `options` is specified in the constructor,
-   * properties in this object are overriden for the instance being created.
+   * properties in this object are overridden for the instance being created.
    * @property {string} selectorInit The CSS selector to find toolbar instances.
    * @property {string} selectorSearch The CSS selector to find search inputs in a toolbar.
    * @property {string} selectorRowHeight The CSS selector to find the row height inputs in a toolbar.

package/styles/vendor/carbon-components/src/components/tooltip/_tooltip.scss

@@ -38,6 +38,10 @@
     opacity: 0;
     pointer-events: none;
     transition: opacity $duration--fast-01 motion(standard, productive);
+
+    @media screen and (prefers-reduced-motion: reduce) {
+      transition: none;
+    }
   }
 
   &::before {
@@ -437,6 +441,8 @@
 
     p {
       @include type-style('body-short-01');
+
+      text-align: left;
     }
 
     button {
@@ -719,24 +725,6 @@
   }
 }
 
-/// Tooltip styles for v11
-/// @access private
-/// @group tooltip
-@mixin tooltip-next {
-  .#{$prefix}--tooltip {
-    display: inline-block;
-    position: relative;
-  }
-
-  .#{$prefix}--tooltip-content {
-    padding: $carbon--spacing-05;
-  }
-}
-
 @include exports('tooltip') {
-  @if feature-flag-enabled('enable-2021-release') {
-    @include tooltip-next;
-  } @else {
-    @include tooltip;
-  }
+  @include tooltip;
 }

package/styles/vendor/carbon-components/src/components/tooltip/tooltip--simple.js

@@ -94,7 +94,7 @@ export default class TooltipSimple extends mixin(
    * If `options` is specified in the constructor,
    * {@linkcode TooltipSimple.create .create()},
    * or {@linkcode TooltipSimple.init .init()},
-   * properties in this object are overriden for the instance being
+   * properties in this object are overridden for the instance being
    * created and how {@linkcode TooltipSimple.init .init()} works.
    * @property {string} selectorInit The CSS selector to find simple tooltip UIs.
    */

package/styles/vendor/carbon-components/src/components/ui-shell/_content.scss

@@ -15,7 +15,6 @@
 @mixin carbon-content {
   .#{$prefix}--content {
     padding: 2rem;
-    background: $ui-02;
     will-change: margin-left;
   }
 

package/styles/vendor/carbon-components/src/components/ui-shell/_header.scss

@@ -36,7 +36,7 @@
 
     width: mini-units(6);
     height: mini-units(6);
-    border: rem(2px) solid transparent;
+    border: rem(1px) solid transparent;
     transition: background-color $duration--fast-02,
       border-color $duration--fast-02;
   }
@@ -245,6 +245,25 @@
     position: relative;
   }
 
+  .#{$prefix}--header__submenu--current::after {
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    border-bottom: 3px solid $border-interactive;
+    content: '';
+  }
+
+  .#{$prefix}--header__submenu--current:focus {
+    border: 2px solid $focus;
+  }
+
+  .#{$prefix}--header__submenu--current:focus::after {
+    border: 0;
+  }
+
   .#{$prefix}--header__menu-title[aria-haspopup='true'] {
     position: relative;
   }

package/styles/vendor/carbon-components/src/components/ui-shell/_side-nav.scss

@@ -110,7 +110,7 @@
     width: 0;
   }
 
-  .#{$prefix}--side-nav.bx--side-nav--rail:not(.#{$prefix}--side-nav--fixed):hover,
+  .#{$prefix}--side-nav.#{$prefix}--side-nav--rail:not(.#{$prefix}--side-nav--fixed):hover,
   .#{$prefix}--side-nav--expanded {
     width: mini-units(32);
   }
@@ -419,6 +419,7 @@
     position: relative;
     background-color: $shell-side-nav-bg-04;
     color: $ibm-color__gray-100;
+
     &::before {
       position: absolute;
       top: 0;

package/styles/vendor/carbon-components/src/components/ui-shell/_variables.scss

@@ -5,7 +5,7 @@
 // LICENSE file in the root directory of this source tree.
 //
 
-/// Use rem here to accomodate zoom behavior
+/// Use rem here to accommodate zoom behavior
 /// @link https://github.com/IBM/carbon-components/pull/1032#discussion_r210418579
 /// @access private
 /// @group ui-shell

package/styles/vendor/carbon-components/src/components/ui-shell/header-nav.js

@@ -94,7 +94,7 @@ class HeaderNav extends mixin(createComponent, initComponentBySearch, handles) {
    * If `options` is specified in the constructor,
    * {@linkcode HeaderNav.create .create()}, or
    * {@linkcode HeaderNav.init .init()},
-   * properties in this object are overriden for the instance being create and
+   * properties in this object are overridden for the instance being create and
    * how {@linkcode HeaderNav.init .init()} works.
    * @member HeaderNav.options
    * @type {object}

package/styles/vendor/carbon-components/src/components/ui-shell/header-submenu.js

@@ -288,7 +288,7 @@ class HeaderSubmenu extends mixin(
    * If `options` is specified in the constructor,
    * {@linkcode HeaderSubmenu.create .create()}, or
    * {@linkcode HeaderSubmenu.init .init()},
-   * properties in this object are overriden for the instance being create and
+   * properties in this object are overridden for the instance being create and
    * how {@linkcode HeaderSubmenu.init .init()} works.
    * @member HeaderSubmenu.options
    * @type {object}

package/styles/vendor/carbon-components/src/components/ui-shell/navigation-menu-panel.js

@@ -80,7 +80,7 @@ export default class NavigationMenuPanel extends mixin(
    * If `options` is specified in the constructor,
    * {@linkcode NavigationMenuPanel.create .create()}, or
    * {@linkcode NavigationMenuPanel.init .init()},
-   * properties in this object are overriden for the instance being create and
+   * properties in this object are overridden for the instance being create and
    * how {@linkcode NavigationMenuPanel.init .init()} works.
    * @member NavigationMenuPanel.options
    * @type {object}

package/styles/vendor/carbon-components/src/components/ui-shell/navigation-menu.js

@@ -236,7 +236,7 @@ export default class NavigationMenu extends NavigationMenuPanel {
    * If `options` is specified in the constructor,
    * {@linkcode NavigationMenu.create .create()}, or
    * {@linkcode NavigationMenu.init .init()},
-   * properties in this object are overriden for the instance being create and
+   * properties in this object are overridden for the instance being create and
    * how {@linkcode NavigationMenu.init .init()} works.
    * @member NavigationMenu.options
    * @type {object}

package/styles/vendor/carbon-components/src/components/ui-shell/product-switcher.js

@@ -168,7 +168,7 @@ class ProductSwitcher extends NavigationMenuPanel {
    * If `options` is specified in the constructor,
    * {@linkcode ProductSwitcher.create .create()}, or
    * {@linkcode ProductSwitcher.init .init()},
-   * properties in this object are overriden for the instance being create and
+   * properties in this object are overridden for the instance being create and
    * how {@linkcode ProductSwitcher.init .init()} works.
    * @member ProductSwitcher.options
    * @type {object}

package/styles/vendor/carbon-components/src/components/ui-shell/side-nav.js

@@ -130,7 +130,7 @@ class SideNav extends mixin(createComponent, initComponentBySearch, handles) {
   /**
    * The component options.
    * If `options` is specified in the constructor, {@linkcode SideNav.create .create()}, or {@linkcode SideNav.init .init()},
-   * properties in this object are overriden for the instance being create and how {@linkcode SideNav.init .init()} works.
+   * properties in this object are overridden for the instance being create and how {@linkcode SideNav.init .init()} works.
    * @member SideNav.options
    * @type {object}
    * @property {string} selectorInit The data attribute to find side navs.

package/styles/vendor/carbon-components/src/globals/js/mixins/README.md

@@ -71,7 +71,7 @@ instead of introducing "fat base class".
   - [Clean-up](#clean-up)
   - [Registry of component instances](#registry-of-component-instances)
 - [Sugar layers for component instantiation](#sugar-layers-for-component-instantiation)
-  - [Searching for DOM nodes to intantiate components on (`init-component-by-search.js`)](#searching-for-dom-nodes-to-intantiate-components-on-init-component-by-searchjs)
+  - [Searching for DOM nodes to instantiate components on (`init-component-by-search.js`)](#searching-for-dom-nodes-to-instantiate-components-on-init-component-by-searchjs)
   - [Lazily instantiating a component upon an event on a root element (`init-component-by-event.js`)](#lazily-instantiating-a-component-upon-an-event-on-a-root-element-init-component-by-eventjs)
   - [Lazily instantiating a component upon an event on a launcher button (`init-component-by-launcher.js`)](#lazily-instantiating-a-component-upon-an-event-on-a-launcher-button-init-component-by-launcherjs)
 
@@ -120,7 +120,7 @@ The constructor in `create-component.js` mixin sets the following properties:
 | ---------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | `element`  | The root element of the component (see above).                                                                                                                                                                                                                                                                                                                                                     |
 | `options`  | The component options.                                                                                                                                                                                                                                                                                                                                                                             |
-| `children` | The array of Carbon component instances that has to be released along with this component. An exanple is with [overflow menu](http://www.carbondesignsystem.com/components/overflow-menu/code) component which creates another Carbon component called [floating menu](../../../components/floating-menu/floating-menu.js), and the floating menu has to be released along with the overflow menu. |
+| `children` | The array of Carbon component instances that has to be released along with this component. An example is with [overflow menu](http://www.carbondesignsystem.com/components/overflow-menu/code) component which creates another Carbon component called [floating menu](../../../components/floating-menu/floating-menu.js), and the floating menu has to be released along with the overflow menu. |
 
 The `.options` property inherits static `.options` property and merges in the
 2nd argument of static `.create()` method. In above example, `.options` will be
@@ -156,7 +156,7 @@ Carbon defines three types of mixins to allow applications to instantiate
 components in batch. A component can inherit one of those three mixins to
 support batch instantiation.
 
-### Searching for DOM nodes to intantiate components on ([`init-component-by-search.js`](./init-component-by-search.js))
+### Searching for DOM nodes to instantiate components on ([`init-component-by-search.js`](./init-component-by-search.js))
 
 The most basic one is
 [`init-component-by-search.js`](./init-component-by-search.js), which searches
@@ -201,7 +201,7 @@ delaying component instantiation until an event happens on a DOM element that
 will be the root element. For example, the static `.init()` method of Carbon
 [`Tooltip` component](http://www.carbondesignsystem.com/components/tooltip/code)
 delays instantiating the components until user hovers the mouse over a trigger
-button or user puts the keyboard focus on a trigger buton.
+button or user puts the keyboard focus on a trigger button.
 
 Given the same example HTML as the one for `init-component-by-search.js` above,
 the call of static `.init()` method below detects `click` events on DOM elements
@@ -255,7 +255,7 @@ caused instantiating the component.
 
 [`init-component-by-launcher.js`](./init-component-by-launcher.js) mix-in allows
 delaying component instantiation until an event happens on an element that has
-semantic association to the compoennt. For example, the static `.init()` method
+semantic association to the component. For example, the static `.init()` method
 of Carbon
 [`Modal` component](http://www.carbondesignsystem.com/components/modal/code)
 delays instantiating the components until user clicks on a launcher button.

package/styles/vendor/carbon-components/src/globals/js/mixins/create-component.js

@@ -17,7 +17,7 @@ export default function (ToMix) {
     /**
      * Mix-in class to manage lifecycle of component.
      * The constructor sets up this component's effective options,
-     * and registers this component't instance associated to an element.
+     * and registers this component's instance associated to an element.
      * @implements Handle
      * @param {HTMLElement} element The element working as this component.
      * @param {object} [options] The component options.

package/styles/vendor/carbon-components/src/globals/js/mixins/evented-state.js

@@ -23,7 +23,7 @@ export default function (ToMix) {
      */
     _changeState() {
       throw new Error(
-        '_changeState() should be overriden to perform actual change in state.'
+        '_changeState() should be overridden to perform actual change in state.'
       );
     }
 

package/styles/vendor/carbon-components/src/globals/scss/README.md

@@ -6,7 +6,7 @@ started with Carbon SCSS.
 ## Usage with another design system
 
 While we do _not_ recommend using Carbon along with another design system in one
-application because doing so loses coheisiveness in your application's user
+application because doing so loses cohesiveness in your application's user
 experience, you can use "selector namspacing" technique e.g. while you are
 migrating from another design system to Carbon and just flipping the switch at
 once is extremely hard.
@@ -65,7 +65,7 @@ gulp.task('postcss', ['postcss:carbon', 'postcss:another-design-system']);
 ```
 
 Below HTML is an example using a Carbon button is used along with a button with
-another design system, using what above build step generaes:
+another design system, using what above build step generates:
 
 ```html
 <!DOCTYPE html>

package/styles/vendor/carbon-components/src/globals/scss/_helper-mixins.scss

@@ -55,7 +55,7 @@
 /// @example @include box-shadow;
 /// @group global-helpers
 @mixin box-shadow {
-  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
+  box-shadow: 0 2px 6px $shadow;
 }
 
 /// Adds outline styles depending on specific type
@@ -185,6 +185,8 @@
 
   &::before {
     position: absolute;
+    top: 0;
+    left: 0;
     width: 100%;
     height: 100%;
     animation: 3000ms ease-in-out skeleton infinite;
@@ -205,35 +207,43 @@
       transform: scaleX(0);
       transform-origin: left;
     }
+
     20% {
       opacity: 1;
       transform: scaleX(1);
       transform-origin: left;
     }
+
     28% {
       transform: scaleX(1);
       transform-origin: right;
     }
+
     51% {
       transform: scaleX(0);
       transform-origin: right;
     }
+
     58% {
       transform: scaleX(0);
       transform-origin: right;
     }
+
     82% {
       transform: scaleX(1);
       transform-origin: right;
     }
+
     83% {
       transform: scaleX(1);
       transform-origin: left;
     }
+
     96% {
       transform: scaleX(0);
       transform-origin: left;
     }
+
     100% {
       opacity: 0.3;
       transform: scaleX(0);

package/styles/vendor/carbon-components/src/globals/scss/_keyframes.scss

@@ -19,6 +19,7 @@
   0% {
     @include content-visible;
   }
+
   100% {
     @include content-hidden;
   }
@@ -28,6 +29,7 @@
   0% {
     @include content-hidden;
   }
+
   100% {
     @include content-visible;
   }

package/styles/vendor/carbon-components/src/globals/scss/_tooltip.scss

@@ -89,6 +89,7 @@
 
   @if $tooltip-type == 'icon' {
     cursor: pointer;
+
     &:focus {
       outline: 1px solid transparent;
 
@@ -122,6 +123,10 @@
   &::before,
   &::after {
     transition: opacity $duration--fast-01 motion(standard, productive);
+
+    @media screen and (prefers-reduced-motion: reduce) {
+      transition: none;
+    }
   }
 
   &.#{$prefix}--tooltip--a11y::before,
@@ -177,6 +182,7 @@
       from {
         opacity: 0;
       }
+
       to {
         opacity: 1;
       }

package/styles/vendor/carbon-components/src/globals/scss/_typography.import.scss

@@ -0,0 +1,87 @@
+//
+// Copyright IBM Corp. 2016, 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:meta';
+@use 'sass:math';
+@import 'vars';
+
+/// Base font size in px
+/// @access public
+/// @group global-typography
+/// @type Number
+/// @deprecated (For v10) Superseded by `$carbon--base-font-size`
+$base-font-size: 16px !default;
+
+/// Convert px to rem
+/// @access public
+/// @param {Number} $px - Value of type in pixels
+/// @returns {Number} In rem
+/// @example rem(48px);
+/// @group global-typography
+/// @deprecated (For v10) Use `carbon--rem()`
+@function 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)}`";
+  }
+
+  @if meta.function-exists('div', 'math') {
+    @return math.div($px, $base-font-size) * 1rem;
+  } @else {
+    @return ($px / $base-font-size) * 1rem;
+  }
+}
+
+/// Convert px to em
+/// @access public
+/// @param {Number} $px - Value of type in pixels
+/// @returns {Number} In em
+/// @example em(48px);
+/// @group global-typography
+/// @deprecated (For v10) Use `carbon--em()`
+@function 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)}`";
+  }
+
+  @if meta.function-exists('div', 'math') {
+    @return math.div($px, $base-font-size) * 1em;
+  } @else {
+    @return ($px / $base-font-size) * 1em;
+  }
+}
+
+// 🔬 Experimental
+// stylelint-disable-next-line no-invalid-position-at-import-rule
+@import '../../globals/scss/vendor/@carbon/elements/scss/type/font-family';
+// stylelint-disable-next-line no-invalid-position-at-import-rule
+@import '../../globals/scss/vendor/@carbon/elements/scss/type/styles';
+
+/// Different type styles per token
+/// @access public
+/// @param {String} $name - The name of the token to get the styles for
+/// @param {Bool} $fluid [false] - Specify whether to include fluid styles
+/// @example @include type-style('body-short-01');
+/// @group global-typography
+@mixin type-style($name, $fluid: false) {
+  @include carbon--type-style($name, $fluid);
+}