@carbon/charts 0.57.1 → 0.58.1

package/styles/vendor/carbon-components/scss/components/tag/_tokens.scss

@@ -25,11 +25,11 @@ $tag-colors: (
       ),
       (
         theme: $carbon--theme--g90,
-        value: $carbon__red-80,
+        value: $carbon__red-70,
       ),
       (
         theme: $carbon--theme--g100,
-        value: $carbon__red-80,
+        value: $carbon__red-70,
       ),
       (
         theme: $carbon--theme--v9,
@@ -50,11 +50,11 @@ $tag-colors: (
       ),
       (
         theme: $carbon--theme--g90,
-        value: $carbon__red-30,
+        value: $carbon__red-20,
       ),
       (
         theme: $carbon--theme--g100,
-        value: $carbon__red-30,
+        value: $carbon__red-20,
       ),
       (
         theme: $carbon--theme--v9,
@@ -75,11 +75,11 @@ $tag-colors: (
       ),
       (
         theme: $carbon--theme--g90,
-        value: $carbon__red-70,
+        value: $red-70-hover,
       ),
       (
         theme: $carbon--theme--g100,
-        value: $carbon__red-70,
+        value: $red-70-hover,
       ),
       (
         theme: $carbon--theme--v9,
@@ -102,11 +102,11 @@ $tag-colors: (
       ),
       (
         theme: $carbon--theme--g90,
-        value: $carbon__magenta-80,
+        value: $carbon__magenta-70,
       ),
       (
         theme: $carbon--theme--g100,
-        value: $carbon__magenta-80,
+        value: $carbon__magenta-70,
       ),
       (
         theme: $carbon--theme--v9,
@@ -127,11 +127,11 @@ $tag-colors: (
       ),
       (
         theme: $carbon--theme--g90,
-        value: $carbon__magenta-30,
+        value: $carbon__magenta-20,
       ),
       (
         theme: $carbon--theme--g100,
-        value: $carbon__magenta-30,
+        value: $carbon__magenta-20,
       ),
       (
         theme: $carbon--theme--v9,
@@ -152,11 +152,11 @@ $tag-colors: (
       ),
       (
         theme: $carbon--theme--g90,
-        value: $carbon__magenta-70,
+        value: $magenta-70-hover,
       ),
       (
         theme: $carbon--theme--g100,
-        value: $carbon__magenta-70,
+        value: $magenta-70-hover,
       ),
       (
         theme: $carbon--theme--v9,
@@ -179,11 +179,11 @@ $tag-colors: (
       ),
       (
         theme: $carbon--theme--g90,
-        value: $carbon__purple-80,
+        value: $carbon__purple-70,
       ),
       (
         theme: $carbon--theme--g100,
-        value: $carbon__purple-80,
+        value: $carbon__purple-70,
       ),
       (
         theme: $carbon--theme--v9,
@@ -204,11 +204,11 @@ $tag-colors: (
       ),
       (
         theme: $carbon--theme--g90,
-        value: $carbon__purple-30,
+        value: $carbon__purple-20,
       ),
       (
         theme: $carbon--theme--g100,
-        value: $carbon__purple-30,
+        value: $carbon__purple-20,
       ),
       (
         theme: $carbon--theme--v9,
@@ -229,11 +229,11 @@ $tag-colors: (
       ),
       (
         theme: $carbon--theme--g90,
-        value: $carbon__purple-70,
+        value: $purple-70-hover,
       ),
       (
         theme: $carbon--theme--g100,
-        value: $carbon__purple-70,
+        value: $purple-70-hover,
       ),
       (
         theme: $carbon--theme--v9,
@@ -256,11 +256,11 @@ $tag-colors: (
       ),
       (
         theme: $carbon--theme--g90,
-        value: $carbon__blue-80,
+        value: $carbon__blue-70,
       ),
       (
         theme: $carbon--theme--g100,
-        value: $carbon__blue-80,
+        value: $carbon__blue-70,
       ),
       (
         theme: $carbon--theme--v9,
@@ -281,11 +281,11 @@ $tag-colors: (
       ),
       (
         theme: $carbon--theme--g90,
-        value: $carbon__blue-30,
+        value: $carbon__blue-20,
       ),
       (
         theme: $carbon--theme--g100,
-        value: $carbon__blue-30,
+        value: $carbon__blue-20,
       ),
       (
         theme: $carbon--theme--v9,
@@ -306,11 +306,11 @@ $tag-colors: (
       ),
       (
         theme: $carbon--theme--g90,
-        value: $carbon__blue-70,
+        value: $blue-70-hover,
       ),
       (
         theme: $carbon--theme--g100,
-        value: $carbon__blue-70,
+        value: $blue-70-hover,
       ),
       (
         theme: $carbon--theme--v9,
@@ -333,11 +333,11 @@ $tag-colors: (
       ),
       (
         theme: $carbon--theme--g90,
-        value: $carbon__cyan-80,
+        value: $carbon__cyan-70,
       ),
       (
         theme: $carbon--theme--g100,
-        value: $carbon__cyan-80,
+        value: $carbon__cyan-70,
       ),
       (
         theme: $carbon--theme--v9,
@@ -358,11 +358,11 @@ $tag-colors: (
       ),
       (
         theme: $carbon--theme--g90,
-        value: $carbon__cyan-30,
+        value: $carbon__cyan-20,
       ),
       (
         theme: $carbon--theme--g100,
-        value: $carbon__cyan-30,
+        value: $carbon__cyan-20,
       ),
       (
         theme: $carbon--theme--v9,
@@ -383,11 +383,11 @@ $tag-colors: (
       ),
       (
         theme: $carbon--theme--g90,
-        value: $carbon__cyan-70,
+        value: $cyan-70-hover,
       ),
       (
         theme: $carbon--theme--g100,
-        value: $carbon__cyan-70,
+        value: $cyan-70-hover,
       ),
       (
         theme: $carbon--theme--v9,
@@ -410,11 +410,11 @@ $tag-colors: (
       ),
       (
         theme: $carbon--theme--g90,
-        value: $carbon__teal-80,
+        value: $carbon__teal-70,
       ),
       (
         theme: $carbon--theme--g100,
-        value: $carbon__teal-80,
+        value: $carbon__teal-70,
       ),
       (
         theme: $carbon--theme--v9,
@@ -435,11 +435,11 @@ $tag-colors: (
       ),
       (
         theme: $carbon--theme--g90,
-        value: $carbon__teal-30,
+        value: $carbon__teal-20,
       ),
       (
         theme: $carbon--theme--g100,
-        value: $carbon__teal-30,
+        value: $carbon__teal-20,
       ),
       (
         theme: $carbon--theme--v9,
@@ -460,11 +460,11 @@ $tag-colors: (
       ),
       (
         theme: $carbon--theme--g90,
-        value: $carbon__teal-70,
+        value: $teal-70-hover,
       ),
       (
         theme: $carbon--theme--g100,
-        value: $carbon__teal-70,
+        value: $teal-70-hover,
       ),
       (
         theme: $carbon--theme--v9,
@@ -487,11 +487,11 @@ $tag-colors: (
       ),
       (
         theme: $carbon--theme--g90,
-        value: $carbon__green-80,
+        value: $carbon__green-70,
       ),
       (
         theme: $carbon--theme--g100,
-        value: $carbon__green-80,
+        value: $carbon__green-70,
       ),
       (
         theme: $carbon--theme--v9,
@@ -512,11 +512,11 @@ $tag-colors: (
       ),
       (
         theme: $carbon--theme--g90,
-        value: $carbon__green-30,
+        value: $carbon__green-20,
       ),
       (
         theme: $carbon--theme--g100,
-        value: $carbon__green-30,
+        value: $carbon__green-20,
       ),
       (
         theme: $carbon--theme--v9,
@@ -537,11 +537,11 @@ $tag-colors: (
       ),
       (
         theme: $carbon--theme--g90,
-        value: $carbon__green-70,
+        value: $green-70-hover,
       ),
       (
         theme: $carbon--theme--g100,
-        value: $carbon__green-70,
+        value: $green-70-hover,
       ),
       (
         theme: $carbon--theme--v9,
@@ -564,11 +564,11 @@ $tag-colors: (
       ),
       (
         theme: $carbon--theme--g90,
-        value: $carbon__gray-80,
+        value: $carbon__gray-70,
       ),
       (
         theme: $carbon--theme--g100,
-        value: $carbon__gray-80,
+        value: $carbon__gray-70,
       ),
       (
         theme: $carbon--theme--v9,
@@ -589,11 +589,11 @@ $tag-colors: (
       ),
       (
         theme: $carbon--theme--g90,
-        value: $carbon__gray-30,
+        value: $carbon__gray-20,
       ),
       (
         theme: $carbon--theme--g100,
-        value: $carbon__gray-30,
+        value: $carbon__gray-20,
       ),
       (
         theme: $carbon--theme--v9,
@@ -614,11 +614,11 @@ $tag-colors: (
       ),
       (
         theme: $carbon--theme--g90,
-        value: $carbon__gray-70,
+        value: $gray-70-hover,
       ),
       (
         theme: $carbon--theme--g100,
-        value: $carbon__gray-70,
+        value: $gray-70-hover,
       ),
       (
         theme: $carbon--theme--v9,
@@ -641,11 +641,11 @@ $tag-colors: (
       ),
       (
         theme: $carbon--theme--g90,
-        value: $carbon__cool-gray-80,
+        value: $carbon__cool-gray-70,
       ),
       (
         theme: $carbon--theme--g100,
-        value: $carbon__cool-gray-80,
+        value: $carbon__cool-gray-70,
       ),
       (
         theme: $carbon--theme--v9,
@@ -666,11 +666,11 @@ $tag-colors: (
       ),
       (
         theme: $carbon--theme--g90,
-        value: $carbon__cool-gray-30,
+        value: $carbon__cool-gray-20,
       ),
       (
         theme: $carbon--theme--g100,
-        value: $carbon__cool-gray-30,
+        value: $carbon__cool-gray-20,
       ),
       (
         theme: $carbon--theme--v9,
@@ -691,11 +691,11 @@ $tag-colors: (
       ),
       (
         theme: $carbon--theme--g90,
-        value: $carbon__cool-gray-70,
+        value: $cool-gray-70-hover,
       ),
       (
         theme: $carbon--theme--g100,
-        value: $carbon__cool-gray-70,
+        value: $cool-gray-70-hover,
       ),
       (
         theme: $carbon--theme--v9,
@@ -718,11 +718,11 @@ $tag-colors: (
       ),
       (
         theme: $carbon--theme--g90,
-        value: $carbon__warm-gray-80,
+        value: $carbon__warm-gray-70,
       ),
       (
         theme: $carbon--theme--g100,
-        value: $carbon__warm-gray-80,
+        value: $carbon__warm-gray-70,
       ),
       (
         theme: $carbon--theme--v9,
@@ -743,11 +743,11 @@ $tag-colors: (
       ),
       (
         theme: $carbon--theme--g90,
-        value: $carbon__warm-gray-30,
+        value: $carbon__warm-gray-20,
       ),
       (
         theme: $carbon--theme--g100,
-        value: $carbon__warm-gray-30,
+        value: $carbon__warm-gray-20,
       ),
       (
         theme: $carbon--theme--v9,
@@ -768,11 +768,11 @@ $tag-colors: (
       ),
       (
         theme: $carbon--theme--g90,
-        value: $carbon__warm-gray-70,
+        value: $warm-gray-70-hover,
       ),
       (
         theme: $carbon--theme--g100,
-        value: $carbon__warm-gray-70,
+        value: $warm-gray-70-hover,
       ),
       (
         theme: $carbon--theme--v9,
@@ -780,4 +780,4 @@ $tag-colors: (
       ),
     ),
   ),
-);
+) !default;

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

@@ -99,6 +99,12 @@
       color: transparent;
     }
   }
+
+  .#{$prefix}--text-area__label-wrapper {
+    display: flex;
+    width: 100%;
+    justify-content: space-between;
+  }
 }
 
 @include exports('text-area') {

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

@@ -209,7 +209,7 @@
     @include focus-outline('reset');
 
     border-bottom: 1px solid transparent;
-    background-color: $field-disabled;
+    background-color: $field;
 
     color: $text-disabled;
     cursor: not-allowed;

package/styles/vendor/carbon-components/scss/components/tile/_tile.scss

@@ -23,11 +23,10 @@
   }
 
   .#{$prefix}--tile {
-    position: relative;
     display: block;
     min-width: 8rem;
     min-height: 4rem;
-    padding: $carbon--spacing-05;
+    padding: $spacing-05;
     background-color: $ui-01;
     outline: 2px solid transparent;
     outline-offset: -2px;
@@ -102,6 +101,7 @@
   }
 
   .#{$prefix}--tile--selectable {
+    position: relative;
     padding-right: $carbon--spacing-09;
     border: 1px solid transparent;
   }
@@ -148,6 +148,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) {
@@ -166,6 +170,7 @@
   }
 
   .#{$prefix}--tile--expandable {
+    position: relative;
     overflow: hidden;
     width: 100%;
     border: 0;
@@ -231,22 +236,6 @@
     }
   }
 
-  // Fix double border
-  .#{$prefix}--tile-input--checked + .#{$prefix}--tile--is-selected {
-    border-top: 1px solid $ui-01;
-  }
-
-  .#{$prefix}--tile:not(.#{$prefix}--tile--is-selected)
-    + .#{$prefix}--tile-input--checked
-    + .#{$prefix}--tile--is-selected {
-    border-top: 1px solid $ui-05;
-  }
-
-  .#{$prefix}--tile-input--checked:first-of-type
-    + .#{$prefix}--tile--is-selected {
-    border-top: 1px solid $ui-05;
-  }
-
   .#{$prefix}--tile-content {
     width: 100%;
     height: 100%;

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

@@ -42,7 +42,6 @@
     min-width: auto;
     padding-right: rem(48px);
     margin: 0;
-    line-height: 1;
   }
 
   .#{$prefix}--time-picker__input-field {

package/styles/vendor/carbon-components/scss/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;
     }
   }
 }