@carbon/charts 0.58.0 → 0.58.1

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

@@ -17,6 +17,7 @@
 @mixin checkbox {
   // Spacing between checkboxes
   .#{$prefix}--form-item.#{$prefix}--checkbox-wrapper {
+    position: relative;
     margin-bottom: $spacing-02;
   }
 
@@ -40,14 +41,17 @@
   // to match the specs.
   .#{$prefix}--checkbox {
     @include visually-hidden;
+    //even though its hidden, positioning is for native validation to be aligned to checkbox
+    top: 1.25rem;
+    left: 0.7rem;
   }
 
   // The label corresponds to the content inside of the `label` tag. Since we're
   // creating our own checkbox style, we'll need to position this in order to
-  // accomodate the spacing needed for the checkbox.
+  // accommodate the spacing needed for the checkbox.
   .#{$prefix}--checkbox-label {
     @include reset;
-    @include type-style('body-short-01');
+    @include type-style('body-compact-01');
 
     position: relative;
     display: flex;
@@ -193,4 +197,11 @@
     // Add extra spacing when label is present
     margin: rem(1px) 0 0 rem(6px);
   }
+
+  //-----------------------------------------------
+  // InlineCheckbox
+  //-----------------------------------------------
+  .#{$prefix}--checkbox--inline {
+    position: relative;
+  }
 }

package/styles/vendor/carbon-components/src/globals/scss/vendor/@carbon/styles/scss/components/code-snippet/_code-snippet.scss

@@ -5,13 +5,12 @@
 // LICENSE file in the root directory of this source tree.
 //
 
-@use 'mixins' as *;
-@use '../copy-button';
 @use '../../config' as *;
 @use '../../motion' as *;
 @use '../../spacing' as *;
 @use '../../theme' as *;
 @use '../../type' as *;
+@use '../copy-button';
 @use '../../utilities/convert' as *;
 @use '../../utilities/focus-outline' as *;
 @use '../../utilities/high-contrast-mode' as *;
@@ -19,6 +18,7 @@
 @use '../../utilities/skeleton' as *;
 @use '../../utilities/tooltip' as *;
 @use '../../utilities/z-index' as *;
+@use 'mixins' as *;
 
 /// @type Color
 /// @access public
@@ -38,13 +38,13 @@ $copy-btn-feedback: $background-inverse !default;
   .#{$prefix}--snippet--disabled,
   .#{$prefix}--snippet--disabled
     .#{$prefix}--btn.#{$prefix}--snippet-btn--expand {
-    background-color: $layer-disabled;
+    background-color: $layer;
     color: $text-disabled;
   }
 
   .#{$prefix}--snippet--disabled .#{$prefix}--snippet-btn--expand:hover,
   .#{$prefix}--snippet--disabled .#{$prefix}--copy-btn:hover {
-    background-color: $layer-disabled;
+    background-color: $layer;
     color: $text-disabled;
     cursor: not-allowed;
   }
@@ -68,17 +68,17 @@ $copy-btn-feedback: $background-inverse !default;
     display: inline;
     padding: 0;
     border: 2px solid transparent;
-    background-color: $field;
+    background-color: $layer;
     border-radius: 4px;
     color: $text-primary;
     cursor: pointer;
 
     &:hover {
-      background-color: $layer-accent;
+      background-color: $layer-hover;
     }
 
     &:active {
-      background-color: $copy-active;
+      background-color: $layer-active;
     }
 
     &:focus {
@@ -131,13 +131,13 @@ $copy-btn-feedback: $background-inverse !default;
     display: inline-block;
 
     &:hover {
-      background-color: $field;
+      background-color: $layer;
       cursor: auto;
     }
   }
 
   .#{$prefix}--snippet--light.#{$prefix}--snippet--inline.#{$prefix}--snippet--no-copy:hover {
-    background-color: $field-02;
+    background-color: $layer-hover;
     cursor: auto;
   }
 
@@ -241,7 +241,7 @@ $copy-btn-feedback: $background-inverse !default;
     width: rem(16px);
     height: 100%;
     // Safari interprets `transparent` differently, so make color token value transparent instead:
-    background-image: linear-gradient(to right, rgba($field, 0), $field);
+    background-image: linear-gradient(to right, rgba($layer, 0), $layer);
     content: '';
   }
 
@@ -271,7 +271,7 @@ $copy-btn-feedback: $background-inverse !default;
     justify-content: center;
     padding: 0;
     border: none;
-    background-color: $field;
+    background-color: $layer;
     cursor: pointer;
     outline: none;
 
@@ -290,7 +290,7 @@ $copy-btn-feedback: $background-inverse !default;
   }
 
   .#{$prefix}--snippet-button:hover {
-    background: $field-hover;
+    background: $layer-hover;
   }
 
   .#{$prefix}--snippet-button:active {
@@ -298,7 +298,7 @@ $copy-btn-feedback: $background-inverse !default;
   }
 
   .#{$prefix}--btn--copy__feedback {
-    @include type-style('body-short-01');
+    @include type-style('body-compact-01');
     @include font-family('sans');
 
     z-index: z('overlay');
@@ -328,7 +328,7 @@ $copy-btn-feedback: $background-inverse !default;
 
   // Show more / less button
   .#{$prefix}--snippet-btn--expand {
-    @include type-style('body-short-01');
+    @include type-style('body-compact-01');
     @include font-family('sans');
 
     position: absolute;
@@ -340,7 +340,7 @@ $copy-btn-feedback: $background-inverse !default;
 
     padding: $spacing-03 $spacing-05;
     border: 0;
-    background-color: $field;
+    background-color: $layer;
     color: $text-primary;
   }
 
@@ -361,12 +361,12 @@ $copy-btn-feedback: $background-inverse !default;
   }
 
   .#{$prefix}--snippet-btn--expand:hover {
-    background: $field-hover;
+    background: $layer-hover;
     color: $text-primary;
   }
 
   .#{$prefix}--snippet-btn--expand:active {
-    background-color: $copy-active;
+    background-color: $layer-active;
   }
 
   .#{$prefix}--snippet-btn--expand:focus {
@@ -379,7 +379,7 @@ $copy-btn-feedback: $background-inverse !default;
     .#{$prefix}--snippet-btn--expand
     .#{$prefix}--icon-chevron--down {
     transform: rotate(180deg);
-    transition: transform $transition--expansion;
+    transition: transform $transition-expansion;
   }
 
   // Light version
@@ -387,7 +387,7 @@ $copy-btn-feedback: $background-inverse !default;
   .#{$prefix}--snippet--light .#{$prefix}--snippet-button,
   .#{$prefix}--snippet--light .#{$prefix}--btn.#{$prefix}--snippet-btn--expand,
   .#{$prefix}--snippet--light .#{$prefix}--copy-btn {
-    background-color: $field-02;
+    background-color: $layer;
   }
 
   .#{$prefix}--snippet--light.#{$prefix}--snippet--inline:hover,
@@ -395,7 +395,7 @@ $copy-btn-feedback: $background-inverse !default;
   .#{$prefix}--snippet--light
     .#{$prefix}--btn.#{$prefix}--snippet-btn--expand:hover,
   .#{$prefix}--snippet--light .#{$prefix}--copy-btn:hover {
-    background-color: $hover-light-ui;
+    background-color: $layer-hover;
   }
 
   .#{$prefix}--snippet--light.#{$prefix}--snippet--inline:active,
@@ -403,7 +403,7 @@ $copy-btn-feedback: $background-inverse !default;
   .#{$prefix}--snippet--light
     .#{$prefix}--btn.#{$prefix}--snippet-btn--expand:active,
   .#{$prefix}--snippet--light .#{$prefix}--copy-btn:active {
-    background-color: $active-light-ui;
+    background-color: $layer-active;
   }
 
   .#{$prefix}--snippet--light.#{$prefix}--snippet--single::after,
@@ -411,7 +411,7 @@ $copy-btn-feedback: $background-inverse !default;
     .#{$prefix}--snippet-container
     pre::after {
     // Safari interprets `transparent` differently, so make color token value transparent instead:
-    background-image: linear-gradient(to right, rgba($field-02, 0), $field-02);
+    background-image: linear-gradient(to right, rgba($layer, 0), $layer);
   }
 
   // Skeleton State
@@ -469,13 +469,13 @@ $copy-btn-feedback: $background-inverse !default;
   .#{$prefix}--snippet__overflow-indicator--left {
     order: 0;
     margin-right: -$spacing-05;
-    background-image: linear-gradient(to left, transparent, $field);
+    background-image: linear-gradient(to left, transparent, $layer);
   }
 
   .#{$prefix}--snippet__overflow-indicator--right {
     order: 2;
     margin-left: -$spacing-05;
-    background-image: linear-gradient(to right, transparent, $field);
+    background-image: linear-gradient(to right, transparent, $layer);
   }
 
   .#{$prefix}--snippet--single .#{$prefix}--snippet__overflow-indicator--right,
@@ -507,11 +507,11 @@ $copy-btn-feedback: $background-inverse !default;
   }
 
   .#{$prefix}--snippet--light .#{$prefix}--snippet__overflow-indicator--left {
-    background-image: linear-gradient(to left, transparent, $field-02);
+    background-image: linear-gradient(to left, transparent, $layer);
   }
 
   .#{$prefix}--snippet--light .#{$prefix}--snippet__overflow-indicator--right {
-    background-image: linear-gradient(to right, transparent, $field-02);
+    background-image: linear-gradient(to right, transparent, $layer);
   }
 
   // Safari-only media query
@@ -520,11 +520,11 @@ $copy-btn-feedback: $background-inverse !default;
   @media not all and (min-resolution: 0.001dpcm) {
     @supports (-webkit-appearance: none) and (stroke-color: transparent) {
       .#{$prefix}--snippet__overflow-indicator--left {
-        background-image: linear-gradient(to left, rgba($field, 0), $field);
+        background-image: linear-gradient(to left, rgba($layer, 0), $layer);
       }
 
       .#{$prefix}--snippet__overflow-indicator--right {
-        background-image: linear-gradient(to right, rgba($field, 0), $field);
+        background-image: linear-gradient(to right, rgba($layer, 0), $layer);
       }
     }
   }

package/styles/vendor/carbon-components/src/globals/scss/vendor/@carbon/styles/scss/components/code-snippet/_mixins.scss

@@ -7,6 +7,7 @@
 
 @use '../../theme' as *;
 @use '../../type' as *;
+@use '../../utilities/convert' as *;
 
 /// Code snippet base styles
 /// @access private
@@ -17,5 +18,5 @@
   position: relative;
   width: 100%;
   max-width: rem(768px);
-  background-color: $field;
+  background-color: $layer;
 }

package/styles/vendor/carbon-components/src/globals/scss/vendor/@carbon/styles/scss/components/combo-box/_combo-box.scss

@@ -0,0 +1,45 @@
+//
+// 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.
+//
+
+@use '../list-box';
+@use '../../config' as *;
+@use '../../theme' as *;
+
+/// Combo box styles
+/// @access public
+/// @group combo-box
+@mixin combo-box {
+  .#{$prefix}--combo-box:hover {
+    background-color: $field;
+  }
+
+  // V11: Possibly deprecate
+  .#{$prefix}--combo-box.#{$prefix}--list-box--light:hover {
+    background-color: $field;
+  }
+
+  .#{$prefix}--combo-box .#{$prefix}--text-input::-ms-clear {
+    display: none;
+  }
+
+  .#{$prefix}--combo-box.#{$prefix}--list-box--expanded
+    .#{$prefix}--text-input {
+    border-bottom-color: $border-subtle;
+  }
+
+  .#{$prefix}--combo-box .#{$prefix}--list-box__field,
+  .#{$prefix}--combo-box.#{$prefix}--list-box[data-invalid]
+    .#{$prefix}--list-box__field,
+  .#{$prefix}--combo-box.#{$prefix}--list-box--warning
+    .#{$prefix}--list-box__field,
+  .#{$prefix}--combo-box.#{$prefix}--list-box--disabled.#{$prefix}--list-box[data-invalid]
+    .#{$prefix}--list-box__field,
+  .#{$prefix}--combo-box.#{$prefix}--list-box--disabled.#{$prefix}--list-box--warning
+    .#{$prefix}--list-box__field {
+    padding: 0;
+  }
+}

package/styles/vendor/carbon-components/src/globals/scss/vendor/@carbon/styles/scss/components/combo-box/_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 'combo-box';
+@use 'combo-box';
+
+@include combo-box.combo-box;

package/styles/vendor/carbon-components/src/globals/scss/vendor/@carbon/styles/scss/components/content-switcher/_content-switcher.scss

@@ -36,7 +36,7 @@
     @include reset;
     @include font-family('sans');
     @include focus-outline('reset');
-    @include type-style('body-short-01');
+    @include type-style('body-compact-01');
 
     position: relative;
     display: inline-flex;
@@ -52,15 +52,41 @@
     color: $text-secondary;
     text-align: left;
     text-decoration: none;
-    transition: all $duration-fast-01 motion(standard, productive);
+    transition: all $duration-moderate-01 motion(standard, productive);
     white-space: nowrap;
 
+    &::after {
+      position: absolute;
+      top: 0;
+      left: 0;
+      display: block;
+      width: 100%;
+      height: 100%;
+      background-color: $layer-selected-inverse;
+      content: '';
+      transform: scaleY(0);
+      transform-origin: bottom;
+      transition: all $duration-moderate-01 motion(standard, productive);
+
+      @media (prefers-reduced-motion: reduce) {
+        transition: none;
+      }
+    }
+
+    &:disabled::after {
+      display: none;
+    }
+
     &:focus {
       z-index: 3;
       border-color: $focus;
       box-shadow: inset 0 0 0 2px $focus, inset 0 0 0 3px $focus-inset;
     }
 
+    &:focus::after {
+      clip-path: inset(3px 3px 3px 3px);
+    }
+
     &:hover {
       color: $text-primary;
       cursor: pointer;
@@ -157,6 +183,7 @@
   }
 
   .#{$prefix}--content-switcher__label {
+    z-index: 1;
     overflow: hidden;
     max-width: 100%;
     text-overflow: ellipsis;
@@ -177,6 +204,10 @@
       background-color: $layer-selected-disabled;
       color: $text-disabled;
     }
+
+    &::after {
+      transform: scaleY(1);
+    }
   }
 
   .#{$prefix}--content-switcher-btn.#{$prefix}--content-switcher--selected

package/styles/vendor/carbon-components/src/globals/scss/vendor/@carbon/styles/scss/components/copy-button/_copy-button.scss

@@ -35,7 +35,7 @@
 
     &::before {
       @include box-shadow;
-      @include type-style('body-short-01');
+      @include type-style('body-compact-01');
 
       z-index: 2;
       top: 1.1rem;