@carbon/charts 0.58.0 → 0.58.1

package/styles/vendor/carbon-components/src/globals/scss/vendor/@carbon/styles/scss/components/text-area/_text-area.scss

@@ -22,7 +22,7 @@
 @mixin text-area {
   .#{$prefix}--text-area {
     @include reset;
-    @include type-style('body-long-01');
+    @include type-style('body-01');
     @include focus-outline('reset');
 
     width: 100%;
@@ -47,7 +47,7 @@
 
   .#{$prefix}--text-area::placeholder {
     @include placeholder-colors;
-    @include type-style('body-long-01');
+    @include type-style('body-01');
   }
 
   // V11: Possibly deprecate
@@ -77,7 +77,7 @@
   //-----------------------------
   .#{$prefix}--text-area:disabled {
     border-bottom: 1px solid transparent;
-    background-color: $field-disabled;
+    background-color: $field;
     color: $text-disabled;
     cursor: not-allowed;
     outline: none;
@@ -102,4 +102,10 @@
       color: transparent;
     }
   }
+
+  .#{$prefix}--text-area__label-wrapper {
+    display: flex;
+    width: 100%;
+    justify-content: space-between;
+  }
 }

package/styles/vendor/carbon-components/src/globals/scss/vendor/@carbon/styles/scss/components/text-input/_text-input.scss

@@ -32,7 +32,7 @@
 @mixin text-input {
   .#{$prefix}--text-input {
     @include reset;
-    @include type-style('body-short-01');
+    @include type-style('body-compact-01');
     @include focus-outline('reset');
 
     width: 100%;
@@ -96,15 +96,19 @@
     width: 100%;
   }
 
-  .#{$prefix}--text-input__invalid-icon {
+  .#{$prefix}--text-input__invalid-icon,
+  .#{$prefix}--text-input__readonly-icon {
     position: absolute;
     // top/transform used to center invalid icon in IE11
     top: 50%;
     right: $spacing-05;
-    fill: $support-error;
     transform: translateY(-50%);
   }
 
+  .#{$prefix}--text-input__invalid-icon {
+    fill: $support-error;
+  }
+
   .#{$prefix}--text-input__invalid-icon--warning {
     fill: $support-warning;
   }
@@ -175,7 +179,8 @@
   }
 
   .#{$prefix}--text-input--invalid,
-  .#{$prefix}--text-input--warning {
+  .#{$prefix}--text-input--warning,
+  .#{$prefix}--text-input-wrapper--readonly .#{$prefix}--text-input {
     padding-right: $spacing-08;
   }
 
@@ -216,7 +221,7 @@
     @include focus-outline('reset');
 
     border-bottom: 1px solid transparent;
-    background-color: $field-disabled;
+    background-color: $field;
     color: $text-disabled;
     cursor: not-allowed;
     // Needed to fix disabled text in Safari #6673
@@ -381,6 +386,15 @@
     flex-direction: column;
   }
 
+  //-----------------------------
+  // Readonly
+  //-----------------------------
+
+  .#{$prefix}--form--fluid .#{$prefix}--text-input-wrapper--readonly,
+  .#{$prefix}--text-input-wrapper--readonly .#{$prefix}--text-input {
+    background: transparent;
+  }
+
   // Windows HCM fix
   .#{$prefix}--text-input--password__visibility,
     // TODO: remove selector above

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

@@ -40,7 +40,7 @@
 
   // V11: Possibly deprecate
   .#{$prefix}--tile--light {
-    background-color: $ui-02;
+    background-color: $layer;
   }
 
   .#{$prefix}--tile--clickable,
@@ -75,7 +75,7 @@
 
   .#{$prefix}--tile--clickable {
     @include reset;
-    @include type-style('body-short-01');
+    @include type-style('body-compact-01');
 
     color: $text-primary;
     text-decoration: none;
@@ -93,7 +93,7 @@
   .#{$prefix}--tile--clickable.#{$prefix}--link--disabled,
   .#{$prefix}--tile--clickable:hover.#{$prefix}--link--disabled {
     display: block;
-    background-color: $layer-disabled;
+    background-color: $layer;
     color: $text-disabled;
   }
 
@@ -144,6 +144,10 @@
       transform-origin: center;
       transition: $duration-fast-02 motion(standard, productive);
 
+      @media screen and (prefers-reduced-motion: reduce) {
+        transition: none;
+      }
+
       // Windows, Firefox HCM Fix
       @media screen and (-ms-high-contrast: active),
         screen and (prefers-contrast) {
@@ -162,6 +166,7 @@
   }
 
   .#{$prefix}--tile--expandable {
+    position: relative;
     overflow: hidden;
     width: 100%;
     border: 0;
@@ -249,7 +254,7 @@
 
   // V11: Possibly deprecate
   .#{$prefix}--tile--disabled.#{$prefix}--tile--selectable.#{$prefix}--tile--light {
-    background-color: $ui-02;
+    background-color: $layer-02;
   }
 
   .#{$prefix}--tile--disabled.#{$prefix}--tile--is-selected {

package/styles/vendor/carbon-components/src/globals/scss/vendor/@carbon/styles/scss/components/time-picker/_time-picker.scss

@@ -83,9 +83,6 @@
     max-height: rem(32px);
   }
 
-  // TODO V11: Remove xl selector
-  .#{$prefix}--time-picker--xl .#{$prefix}--select-input,
-  .#{$prefix}--time-picker--xl .#{$prefix}--time-picker__input-field,
   .#{$prefix}--time-picker--lg .#{$prefix}--select-input,
   .#{$prefix}--time-picker--lg .#{$prefix}--time-picker__input-field {
     height: rem(48px);

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

@@ -6,7 +6,7 @@
 //3
 
 @use '../../config' as *;
-@use '../../feature-flags' as *;
+@use '../../feature-flags';
 @use '../../motion' as *;
 @use '../../spacing' as *;
 @use '../../theme' as *;
@@ -15,12 +15,13 @@
 @use '../../utilities/convert' as *;
 @use '../../utilities/high-contrast-mode' as *;
 @use '../../utilities/visually-hidden' as *;
+@use '../../utilities/skeleton' as *;
 
 /// Toggle styles
 /// @access public
 /// @group toggle
 @mixin toggle {
-  @if enabled('enable-v11-release') {
+  @if feature-flags.enabled('enable-v11-release') {
     .#{$prefix}--toggle__label-text {
       @include type-style('label-01');
 
@@ -63,6 +64,10 @@
         border-radius: 50%;
         content: '';
         transition: transform $duration-fast-01 motion(exit, productive);
+
+        @media screen and (prefers-reduced-motion: reduce) {
+          transition: none;
+        }
       }
     }
 
@@ -84,7 +89,7 @@
     }
 
     .#{$prefix}--toggle__text {
-      @include type-style('body-long-01');
+      @include type-style('body-01');
 
       color: $text-primary;
     }
@@ -198,6 +203,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
@@ -214,6 +223,10 @@
         content: '';
         cursor: pointer;
         transition: transform $duration-fast-01 motion(exit, productive);
+
+        @media screen and (prefers-reduced-motion: reduce) {
+          transition: none;
+        }
       }
     }
 
@@ -231,7 +244,7 @@
 
     .#{$prefix}--toggle__text--left,
     .#{$prefix}--toggle__text--right {
-      @include type-style('body-short-01');
+      @include type-style('body-compact-01');
 
       position: relative;
       margin-left: $spacing-03;
@@ -301,7 +314,7 @@
       + .#{$prefix}--toggle__label
       .#{$prefix}--toggle__appearance {
       &::before {
-        background-color: $layer-disabled;
+        background-color: $layer;
       }
 
       &::after {
@@ -312,6 +325,10 @@
       &::after {
         cursor: not-allowed;
         transition: $duration-fast-01 motion(exit, productive);
+
+        @media screen and (prefers-reduced-motion: reduce) {
+          transition: none;
+        }
       }
     }
 
@@ -431,6 +448,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
@@ -455,7 +476,7 @@
 
     .#{$prefix}--toggle__text--off,
     .#{$prefix}--toggle__text--on {
-      @include type-style('body-short-01');
+      @include type-style('body-compact-01');
 
       position: absolute;
       // top offset needed to vertically center absolutely positioned flex child in IE11
@@ -530,6 +551,10 @@
       &::after {
         cursor: not-allowed;
         transition: $duration-fast-01 motion(exit, productive);
+
+        @media screen and (prefers-reduced-motion: reduce) {
+          transition: none;
+        }
       }
     }
 
@@ -580,36 +605,97 @@
     .#{$prefix}--toggle-input--small:disabled:checked
       + .#{$prefix}--toggle-input__label
       .#{$prefix}--toggle__check {
-      fill: $layer-disabled;
+      fill: $layer;
     }
 
     //----------------------------------------------
     // 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: $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/globals/scss/vendor/@carbon/styles/scss/components/toggletip/_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 'toggletip';
+@use 'toggletip';
+
+@include toggletip.toggletip;

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

@@ -0,0 +1,81 @@
+//
+// 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 '../../config' as *;
+@use '../../spacing';
+@use '../../theme';
+@use '../../type';
+@use '../../utilities/button-reset';
+@use '../../utilities/convert';
+@use '../../utilities/custom-property';
+@use '../../utilities/focus-outline';
+
+@mixin toggletip() {
+  .#{$prefix}--toggletip-label {
+    @include type.type-style('label-01');
+
+    margin-right: spacing.$spacing-03;
+
+    color: theme.$text-secondary;
+  }
+
+  .#{$prefix}--toggletip-button {
+    @include button-reset.reset();
+
+    display: flex;
+    align-items: center;
+  }
+
+  .#{$prefix}--toggletip-button svg {
+    fill: theme.$icon-secondary;
+  }
+
+  .#{$prefix}--toggletip-button:hover svg,
+  .#{$prefix}--toggletip--open .#{$prefix}--toggletip-button svg {
+    fill: theme.$icon-primary;
+  }
+
+  .#{$prefix}--toggletip-button:focus {
+    @include focus-outline.focus-outline;
+  }
+
+  .#{$prefix}--toggletip {
+    @include custom-property.declaration('popover-offset', convert.rem(13px));
+  }
+
+  .#{$prefix}--toggletip-content {
+    @include custom-property.declaration(
+      'button-focus-color',
+      theme.$focus-inverse
+    );
+    @include custom-property.declaration(
+      'link-text-color',
+      theme.$link-inverse
+    );
+    @include custom-property.declaration(
+      'link-hover-text-color',
+      theme.$link-inverse
+    );
+    @include custom-property.declaration(
+      'link-focus-text-color',
+      theme.$focus-inverse
+    );
+    @include type.type-style('body-compact-01');
+
+    display: grid;
+    max-width: 18rem;
+    padding: spacing.$spacing-05;
+    row-gap: spacing.$spacing-05;
+  }
+
+  .#{$prefix}--toggletip-actions {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    column-gap: spacing.$spacing-05;
+  }
+}

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

@@ -9,3 +9,5 @@
 @use 'tooltip';
 
 @include tooltip.tooltip;
+@include tooltip.icon-tooltip;
+@include tooltip.definition-tooltip;