@carbon/charts 0.41.88 → 0.41.92

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

@@ -43,27 +43,19 @@
 
 /// Adds placeholder text color
 /// @access public
-/// @param {String} $size ['small'] - Size of box shadow
 /// @example @include placeholder-colors;
 /// @group global-helpers
 @mixin placeholder-colors {
-  color: $text-03;
+  color: $text-05;
+  opacity: 1;
 }
 
-/// Adds small or large box shadow
+/// Adds box shadow
 /// @access public
-/// @param {String} $size ['small'] - size of box shadow
-/// @example @include box-shadow(); @include box-shadow('large');
+/// @example @include box-shadow;
 /// @group global-helpers
-@mixin box-shadow($size: 'small') {
-  // Large - For dropdowns
-  @if ($size == 'large') {
-    box-shadow: 6px 6px 6px 0 $box-shadow;
-  }
-
-  @if ($size == 'small') {
-    box-shadow: 0px 3px 3px 0 $box-shadow;
-  }
+@mixin box-shadow {
+  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
 }
 
 /// Adds outline styles depending on specific type
@@ -74,6 +66,10 @@
 @mixin focus-outline($type: 'border') {
   @if ($type == 'border') {
     outline: 1px solid $focus;
+
+    @media screen and (prefers-contrast) {
+      outline-style: dotted;
+    }
   }
 
   @if ($type == 'blurred') {
@@ -84,16 +80,28 @@
   @if ($type == 'outline') {
     outline: 2px solid $focus;
     outline-offset: -2px;
+
+    @media screen and (prefers-contrast) {
+      outline-style: dotted;
+    }
   }
 
   @if ($type == 'outline-compat') {
-    border: 2px solid $focus;
     box-sizing: border-box;
+    border: 2px solid $focus;
+
+    @media screen and (prefers-contrast) {
+      border-style: dotted;
+    }
   }
 
   @if ($type == 'invalid') {
     outline: 2px solid $support-01;
     outline-offset: -2px;
+
+    @media screen and (prefers-contrast) {
+      outline-style: dotted;
+    }
   }
 
   @if ($type == 'reset') {
@@ -111,8 +119,8 @@
 /// @group global-helpers
 @mixin rotate($deg, $speed, $origin: center) {
   transform: rotate($deg);
-  transition: transform $speed;
   transform-origin: $origin;
+  transition: transform $speed;
 }
 
 /// Adds styles to hide content
@@ -120,14 +128,14 @@
 /// @group global-helpers
 @mixin hidden {
   position: absolute;
+  overflow: hidden;
   width: 1px;
   height: 1px;
   padding: 0;
+  border: 0;
   margin: -1px;
-  overflow: hidden;
   clip: rect(0, 0, 0, 0);
-  border: 0;
-  visibility: visible;
+  visibility: inherit;
   white-space: nowrap;
 }
 
@@ -138,11 +146,12 @@
 /// @group global-helpers
 @mixin button-reset($width: true) {
   @include reset;
+
   display: inline-block;
-  background: none;
-  appearance: none;
-  border: 0;
   padding: 0;
+  border: 0;
+  appearance: none;
+  background: none;
   cursor: pointer;
 
   @if ($width == true) {
@@ -160,81 +169,106 @@
 /// @group global-helpers
 @mixin skeleton {
   position: relative;
-  border: none;
   padding: 0;
+  border: none;
+  background: $skeleton-01;
   box-shadow: none;
   pointer-events: none;
-  background: $skeleton-01;
 
   &:hover,
   &:focus,
   &:active {
     border: none;
-    outline: none;
     cursor: default;
+    outline: none;
   }
 
-  &:before {
-    content: '';
-    width: 0%;
-    height: 100%;
+  &::before {
     position: absolute;
-    top: 0;
-    left: 0;
-    background: $skeleton-02;
+    width: 100%;
+    height: 100%;
     animation: 3000ms ease-in-out skeleton infinite;
+    background: $skeleton-02;
+    content: '';
+    will-change: transform-origin, transform, opacity;
+
+    @media (prefers-reduced-motion: reduce) {
+      animation: none;
+    }
   }
 }
 
 @include exports('skeleton') {
   @keyframes skeleton {
     0% {
-      width: 0%;
-      left: 0;
-      right: auto;
       opacity: 0.3;
+      transform: scaleX(0);
+      transform-origin: left;
     }
     20% {
-      width: 100%;
-      left: 0;
-      right: auto;
       opacity: 1;
+      transform: scaleX(1);
+      transform-origin: left;
     }
     28% {
-      width: 100%;
-      left: auto;
-      right: 0;
+      transform: scaleX(1);
+      transform-origin: right;
     }
     51% {
-      width: 0%;
-      left: auto;
-      right: 0;
+      transform: scaleX(0);
+      transform-origin: right;
     }
     58% {
-      width: 0%;
-      left: auto;
-      right: 0;
+      transform: scaleX(0);
+      transform-origin: right;
     }
     82% {
-      width: 100%;
-      left: auto;
-      right: 0;
+      transform: scaleX(1);
+      transform-origin: right;
     }
     83% {
-      width: 100%;
-      left: 0;
-      right: auto;
+      transform: scaleX(1);
+      transform-origin: left;
     }
     96% {
-      width: 0%;
-      left: 0;
-      right: auto;
+      transform: scaleX(0);
+      transform-origin: left;
     }
     100% {
-      width: 0%;
-      left: 0;
-      right: auto;
       opacity: 0.3;
+      transform: scaleX(0);
+      transform-origin: left;
     }
   }
 }
+
+/// Windows HCM Mixin
+/// @access public
+/// @example @include high-contrast-mode;
+/// @group global-helpers
+/// We should set HCM styles at the end of each file to ensure they are not overridden
+@mixin high-contrast-mode($type: '') {
+  @media screen and (-ms-high-contrast: active),
+    (forced-colors: active),
+    (prefers-contrast) {
+    @if ($type == 'icon-fill') {
+      fill: ButtonText;
+    }
+
+    @if ($type == 'focus') {
+      color: Highlight;
+      outline: 1px solid Highlight;
+    }
+
+    @if ($type == 'outline') {
+      outline: 1px solid transparent;
+    }
+
+    @if ($type == 'disabled') {
+      color: GrayText;
+      fill: GrayText;
+    }
+
+    @content;
+  }
+}

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

@@ -0,0 +1,34 @@
+//
+// 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.
+//
+
+@mixin content-visible {
+  opacity: 1;
+  visibility: inherit;
+}
+
+@mixin content-hidden {
+  opacity: 0;
+  visibility: hidden;
+}
+
+@keyframes hide-feedback {
+  0% {
+    @include content-visible;
+  }
+  100% {
+    @include content-hidden;
+  }
+}
+
+@keyframes show-feedback {
+  0% {
+    @include content-hidden;
+  }
+  100% {
+    @include content-visible;
+  }
+}

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

@@ -28,37 +28,37 @@
 /// @type Value
 /// @group global-layer
 /// @example box-shadow: 0px 3px 3px 0 $box-shadow;
-$box-shadow: rgba(0, 0, 0, 0.1);
+$box-shadow: rgba(0, 0, 0, 0.2);
 
 /// Raised box shadow
 /// @access private
 /// @type Value
 /// @group global-layer
-$box-shadow--raised: 0 1px 2px 0 $box-shadow;
+$box-shadow--raised: 0 2px 6px 0 $box-shadow;
 
 /// Overlay box shadow
 /// @access private
 /// @type Value
 /// @group global-layer
-$box-shadow--overlay: 0 4px 8px 0 $box-shadow;
+$box-shadow--overlay: 0 2px 6px 0 $box-shadow;
 
 /// Sticky nav box shadow
 /// @access private
 /// @type Value
 /// @group global-layer
-$box-shadow--sticky-nav: 0 6px 12px 0 $box-shadow;
+$box-shadow--sticky-nav: 0 2px 6px 0 $box-shadow;
 
 /// Temporary nav box shadow
 /// @access private
 /// @type Value
 /// @group global-layer
-$box-shadow--temporary-nav: 0 8px 16px 0 $box-shadow;
+$box-shadow--temporary-nav: 0 2px 6px 0 $box-shadow;
 
 /// Pop out box shadow
 /// @access private
 /// @type Value
 /// @group global-layer
-$box-shadow--pop-out: 0 12px 24px 0 $box-shadow;
+$box-shadow--pop-out: 0 2px 6px 0 $box-shadow;
 
 // Layer box-shadow map
 

package/styles/vendor/carbon-components/scss/globals/scss/_layout.scss

@@ -6,19 +6,23 @@
 //
 
 @import 'helper-classes';
+@import './vendor/@carbon/elements/scss/layout/layout';
 
 /// @access private
 /// @type Map
 /// @group global-layout
 $z-indexes: (
-  modal: 9000,
-  overlay: 8000,
+  // Dropdowns that render outside of a Modal should render above a Modal.
+  // Dropdowns below the modal will close when the Modal is opened, so
+  // having a higher z-index *should* not cause issues.
   dropdown: 9100,
-  header: 6000,
+  modal: 9000,
+  header: 8000,
+  overlay: 6000,
+  floating: 6000,
   footer: 5000,
   hidden: - 1,
-  overflowHidden: - 1,
-  floating: 10000,
+  overflowHidden: - 1
 );
 
 /// @access public

package/styles/vendor/carbon-components/scss/globals/scss/_mixins.scss

@@ -11,4 +11,3 @@
 @import '../../components/notification/mixins';
 @import '../../components/tag/mixins';
 @import '../../components/structured-list/mixins';
-@import '../../components/modal/mixins';

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

@@ -109,40 +109,47 @@ $spacing-3xl: $spacing-baseline * 3 !default;
 /// @access public
 /// @type Number
 /// @group global-spacing
+/// @deprecated
 $layout-2xs: $spacing-baseline !default;
 
 /// 24px layout in rem units
 /// @access public
 /// @type Number
 /// @group global-spacing
+/// @deprecated
 $layout-xs: $spacing-baseline * 1.5 !default;
 
 /// 32px layout in rem units
 /// @access public
 /// @type Number
 /// @group global-spacing
+/// @deprecated
 $layout-sm: $spacing-baseline * 2 !default;
 
 /// 48px layout in rem units
 /// @access public
 /// @type Number
 /// @group global-spacing
+/// @deprecated
 $layout-md: $spacing-baseline * 3 !default;
 
 /// 64px layout in rem units
 /// @access public
 /// @type Number
 /// @group global-spacing
+/// @deprecated
 $layout-lg: $spacing-baseline * 4 !default;
 
 /// 96px layout in rem units
 /// @access public
 /// @type Number
 /// @group global-spacing
+/// @deprecated
 $layout-xl: $spacing-baseline * 6 !default;
 
 /// 160px layout in rem units
 /// @access public
 /// @type Number
 /// @group global-spacing
+/// @deprecated
 $layout-2xl: $spacing-baseline * 10 !default;

package/styles/vendor/carbon-components/scss/globals/scss/_theme-tokens.scss

@@ -7,9 +7,14 @@
 
 @import './vendor/@carbon/elements/scss/import-once/import-once';
 @import 'colors';
+@import 'feature-flags';
 @import 'spacing';
 @import './vendor/@carbon/elements/scss/themes/themes';
 
+// The load order of tokens versus themes matter, so we use `carbon--theme` here
+// to make sure that they're in sync if one has diverged from the other.
+@include carbon--theme();
+
 /// Theme variables
 
 /// @type Value
@@ -30,6 +35,7 @@ $disabled: $disabled-02 !default;
 /// @type Color
 /// @access public
 /// @group global-themes
+/// @deprecated
 $disabled-background-color: $disabled-01 !default;
 
 /// @type Color
@@ -37,12 +43,18 @@ $disabled-background-color: $disabled-01 !default;
 /// @group global-themes
 $focus: $ibm-color__blue-60 !default;
 
+/// @type Color
+/// @access public
+/// @group global-themes
+$inverse-focus-ui: $ibm-color__white-0 !default;
+
 // Link
 
 /// @type Color
 /// @access public
 /// @group link
-$link-visited: $ibm-color__purple-60 !default;
+/// @deprecated
+$link-visited: $visited-link !default;
 
 /// @type Color
 /// @access public
@@ -77,12 +89,12 @@ $button-border-radius: 0 !default;
 /// @type Number
 /// @access public
 /// @group button
-$button-height: 48px !default;
+$button-height: 3rem !default;
 
 /// @type Value
 /// @access public
 /// @group button
-$button-padding: calc(0.875rem - 3px) 60px calc(0.875rem - 3px) 12px !default;
+$button-padding: calc(0.875rem - 3px) 63px calc(0.875rem - 3px) 15px !default;
 
 /// @type Value
 /// @access public
@@ -103,24 +115,24 @@ $button-padding-lg: $carbon--spacing-04 !default;
 /// @access public
 /// @group button
 /// Uses the same padding-y as normal buttons, but removes extra padding-right
-$button-padding-ghost: calc(0.875rem - 3px) 12px !default;
+$button-padding-ghost: calc(0.875rem - 3px) 16px !default;
 
 /// @type Number
 /// @access public
 /// @group button
 /// Uses the same padding-y as field buttons, but removes extra padding-right
-$button-padding-ghost-field: calc(0.675rem - 3px) 12px !default;
+$button-padding-ghost-field: calc(0.675rem - 3px) 16px !default;
 
 /// @type Number
 /// @access public
 /// @group button
 /// Uses the same padding-y as small buttons, but removes extra padding-right
-$button-padding-ghost-sm: calc(0.375rem - 3px) 1rem !default;
+$button-padding-ghost-sm: calc(0.375rem - 3px) 16px !default;
 
 /// @type Number
 /// @access public
 /// @group button
-$button-border-width: 3px !default;
+$button-border-width: 2px !default;
 
 /// @type Number
 /// @access public
@@ -130,11 +142,13 @@ $button-outline-width: 1px !default;
 /// @type Number
 /// @access public
 /// @group button
+/// @deprecated
 $button-outline-offset: -5px !default;
 
 /// @type Value
 /// @access public
 /// @group button
+/// @deprecated
 $button-outline: 1px solid $ibm-color__white-0 !default;
 
 // Accordion
@@ -152,7 +166,7 @@ $accordion-justify-content: flex-start !default;
 /// @type Value
 /// @access public
 /// @group accordion
-$accordion-arrow-margin: 0 $carbon--spacing-05 0 0 !default;
+$accordion-arrow-margin: 2px $carbon--spacing-05 0 0 !default;
 
 /// @type Value
 /// @access public
@@ -176,19 +190,21 @@ $checkbox-border-width: 2px !default;
 /// @type Color
 /// @access public
 /// @group code-snippet
-$snippet-background-color: $ui-01 !default; // TODO: Define for experimental
+/// @deprecated
+$snippet-background-color: $field-01 !default;
 
 /// @type Color
 /// @access public
 /// @group code-snippet
-$snippet-border-color: $ui-03 !default; // TODO: Define for experimental
+/// TODO: Define for experimental
+$snippet-border-color: $ui-03 !default;
 
 // Content Switcher
 
 /// @type Number
 /// @access public
 /// @group content-switcher
-$content-switcher-border-radius: 0px !default;
+$content-switcher-border-radius: 0 !default;
 
 /// @type Number
 /// @access public
@@ -232,6 +248,7 @@ $data-table-column-hover: $hover-selected-ui !default;
 /// @type Color
 /// @access public
 /// @group date-picker
+/// @deprecated
 $date-picker-in-range-background-color: $ibm-color__blue-20 !default;
 
 // Modal
@@ -244,6 +261,7 @@ $modal-border-top: $brand-01 4px solid !default;
 /// @type Color
 /// @access public
 /// @group modal
+/// @deprecated
 $modal-footer-background-color: $ui-03 !default;
 
 // Notification
@@ -251,18 +269,21 @@ $modal-footer-background-color: $ui-03 !default;
 /// @type Color
 /// @access public
 /// @group notification
+/// @deprecated
 $notification-info-background-color: $ibm-color__blue-10 !default;
 
 /// @type Color
 /// @access public
 /// @group notification
+/// @deprecated
 $notification-error-background-color: $ibm-color__red-10 !default;
 
 /// @type Color
 /// @access public
 /// @group notification
+/// @deprecated
 $notification-warning-background-color: mix(
-  $ibm-color__yellow-20,
+  $ibm-color__yellow-30,
   $ibm-color__white-0,
   15%
 ) !default;
@@ -270,6 +291,7 @@ $notification-warning-background-color: mix(
 /// @type Color
 /// @access public
 /// @group notification
+/// @deprecated
 $notification-success-background-color: $ibm-color__green-10 !default;
 
 // Progress Indicator
@@ -325,26 +347,65 @@ $structured-list-text-transform: none !default;
 /// @type Value
 /// @access public
 /// @group tabs
-$tab-underline-color: 3px solid $ibm-color__gray-30 !default;
+$tab-underline-color: 2px solid $ui-03 !default;
 
 /// @type Value
 /// @access public
 /// @group tabs
-$tab-underline-color-hover: 3px solid $ibm-color__gray-60 !default;
+$tab-underline-color-hover: 2px solid $ui-04 !default;
 
 /// @type Color
 /// @access public
 /// @group tabs
-$tab-text-disabled: $ibm-color__gray-30 !default;
+$tab-text-disabled: $disabled-02 !default;
 
 /// @type Value
 /// @access public
 /// @group tabs
-$tab-underline-disabled: 3px solid $ibm-color__gray-10 !default;
+$tab-underline-disabled: 2px solid $disabled-01 !default;
 
 // Skeleton Loading
 
 /// @type Color
 /// @access public
 /// @group skeleton
-$skeleton: $skeleton-01 !default; // TODO: Remove this in next major release
+/// TODO: Remove this in next major release
+$skeleton: $skeleton-01 !default;
+
+// Light UI
+
+// Determine the "light" color for a given token.
+/// @param {String} $token The theme token.
+/// @return {String} The new color value as a hex code or a custom property.
+/// @access public
+/// @group light-ui
+@function get-light-value($token) {
+  $value: map-get($carbon--theme, $token);
+
+  @if $carbon--theme ==
+    $carbon--theme--white or
+    $carbon--theme ==
+    $carbon--theme--g10
+  {
+    $value: darken($value, 8%);
+  }
+
+  @if $carbon--theme ==
+    $carbon--theme--g90 or
+    $carbon--theme ==
+    $carbon--theme--g100
+  {
+    $value: lighten($value, 8%);
+  }
+
+  @if feature-flags-enabled('enable-css-custom-properties') {
+    @return var(--#{$custom-property-prefix}-#{$token}-light, $value);
+  }
+
+  @return $value;
+}
+
+/// @type Color
+/// @access public
+/// @group light-ui
+$hover-ui-light: get-light-value('ui-01');