@carbon/charts 0.58.0 → 0.58.1

package/styles/vendor/carbon-components/src/globals/scss/vendor/@carbon/styles/scss/components/search/_search.scss

@@ -40,7 +40,7 @@
 
   .#{$prefix}--search-input {
     @include reset;
-    @include type.type-style('body-short-01');
+    @include type.type-style('body-compact-01');
     @include focus-outline('reset');
 
     width: 100%;
@@ -70,18 +70,22 @@
 
   .#{$prefix}--search-input[disabled] {
     border-bottom: 1px solid transparent;
-    background-color: $field-disabled;
-    color: $disabled-01;
+    background-color: $field;
+    color: $text-disabled;
     cursor: not-allowed;
 
     &::placeholder {
-      color: $disabled-01;
+      color: $field;
     }
   }
   .#{$prefix}--search--light .#{$prefix}--search-input {
     background: $field-02;
   }
 
+  .#{$prefix}--search--light .#{$prefix}--search-close::before {
+    background: $field-02;
+  }
+
   // Small styles
   .#{$prefix}--search--sm .#{$prefix}--search-input,
   .#{$prefix}--search--sm.#{$prefix}--search--expandable.#{$prefix}--search--expanded
@@ -95,24 +99,27 @@
     left: rem(8px);
   }
 
-  // Large styles
-  // V11: change lg to md
-  .#{$prefix}--search--lg .#{$prefix}--search-input,
-  .#{$prefix}--search--lg.#{$prefix}--search--expandable.#{$prefix}--search--expanded
+  // Medium styles
+  .#{$prefix}--search--md .#{$prefix}--search-input,
+  .#{$prefix}--search--md.#{$prefix}--search--expandable.#{$prefix}--search--expanded
     .#{$prefix}--search-input {
     height: rem(40px);
     // 12px padding on either side of icon + 16px icon (40px)
     padding: 0 $spacing-08;
   }
 
-  // V11: change lg to md
-  .#{$prefix}--search--lg .#{$prefix}--search-magnifier-icon {
+  .#{$prefix}--search--md .#{$prefix}--search-magnifier-icon {
     left: rem(12px);
   }
 
-  // V11: change xl to lg
-  .#{$prefix}--search--xl .#{$prefix}--search-input,
-  .#{$prefix}--search--xl.#{$prefix}--search--expandable.#{$prefix}--search--expanded
+  .#{$prefix}--search--md:not(.#{$prefix}--toolbar-search-container-active)
+    .#{$prefix}--search-magnifier-icon {
+    left: 0;
+  }
+
+  // Large styles
+  .#{$prefix}--search--lg .#{$prefix}--search-input,
+  .#{$prefix}--search--lg.#{$prefix}--search--expandable.#{$prefix}--search--expanded
     .#{$prefix}--search-input {
     height: rem(48px);
     // 16px padding on either side of icon + 16px icon (48px)
@@ -150,13 +157,17 @@
       content: '';
       transition: background-color $duration-fast-02
         motion(standard, productive);
+
+      @media screen and (prefers-reduced-motion: reduce) {
+        transition: none;
+      }
     }
 
     &:hover {
       border-bottom: 1px solid $border-strong;
 
       &::before {
-        background-color: $hover-field;
+        background-color: $field-hover;
       }
     }
   }
@@ -196,7 +207,7 @@
     visibility: inherit;
 
     &:hover {
-      background-color: $hover-field;
+      background-color: $field-hover;
     }
 
     &:focus {
@@ -227,7 +238,7 @@
   }
 
   .#{$prefix}--search--disabled svg {
-    fill: $disabled-01;
+    fill: $icon-on-color-disabled;
   }
 
   .#{$prefix}--search-close:focus,
@@ -241,6 +252,7 @@
     @include focus-outline('outline');
   }
 
+  // Small
   .#{$prefix}--search--sm {
     .#{$prefix}--search-close,
     ~ .#{$prefix}--search-button,
@@ -255,8 +267,8 @@
     }
   }
 
-  // V11: change lg to md
-  .#{$prefix}--search--lg {
+  // Medium
+  .#{$prefix}--search--md {
     .#{$prefix}--search-close,
     ~ .#{$prefix}--search-button,
     &.#{$prefix}--search--expandable,
@@ -270,8 +282,8 @@
     }
   }
 
-  // V11: change xl to lg
-  .#{$prefix}--search--xl {
+  // Large
+  .#{$prefix}--search--lg {
     .#{$prefix}--search-close,
     ~ .#{$prefix}--search-button,
     &.#{$prefix}--search--expandable,
@@ -290,9 +302,8 @@
     visibility: hidden;
   }
 
-  // V11: change xl to lg, lg to md
-  .#{$prefix}--search--xl.#{$prefix}--skeleton .#{$prefix}--search-input,
   .#{$prefix}--search--lg.#{$prefix}--skeleton .#{$prefix}--search-input,
+  .#{$prefix}--search--md.#{$prefix}--skeleton .#{$prefix}--search-input,
   .#{$prefix}--search--sm.#{$prefix}--skeleton .#{$prefix}--search-input {
     @include skeleton;
 

package/styles/vendor/carbon-components/src/globals/scss/vendor/@carbon/styles/scss/components/select/_select.scss

@@ -40,7 +40,7 @@
   }
 
   .#{$prefix}--select-input {
-    @include type-style('body-short-01');
+    @include type-style('body-compact-01');
     @include focus-outline('reset');
 
     display: block;
@@ -62,7 +62,7 @@
     transition: outline $duration-fast-01 motion(standard, productive);
 
     &:hover {
-      background-color: $background-hover;
+      background-color: $field-hover;
     }
 
     // Hide default select arrow in IE10+
@@ -89,8 +89,8 @@
 
     &:disabled,
     &:hover:disabled {
-      border-bottom-color: $border-disabled;
-      background-color: $field-disabled;
+      border-bottom-color: transparent;
+      background-color: $field;
       color: $text-disabled;
       cursor: not-allowed;
     }
@@ -101,8 +101,6 @@
     max-height: rem(32px);
   }
 
-  // TODO V11: Remove xl selector
-  .#{$prefix}--select-input--xl,
   .#{$prefix}--select-input--lg {
     height: rem(48px);
     max-height: rem(48px);
@@ -115,7 +113,7 @@
 
   .#{$prefix}--select-input__wrapper[data-invalid] .#{$prefix}--select-input,
   .#{$prefix}--select--warning .#{$prefix}--select-input {
-    padding-right: carbon--mini-units(9);
+    padding-right: $spacing-10;
   }
 
   .#{$prefix}--select-input:disabled ~ .#{$prefix}--select__arrow {
@@ -123,15 +121,15 @@
   }
 
   .#{$prefix}--select--light .#{$prefix}--select-input {
-    background-color: $field-02;
+    background-color: $field;
 
     &:hover {
-      background-color: $background-hover;
+      background-color: $field-hover;
     }
 
     &:disabled,
     &:hover:disabled {
-      background-color: $field-02;
+      background-color: $field;
       color: $text-disabled;
       cursor: not-allowed;
     }
@@ -175,10 +173,15 @@
     opacity: 1;
   }
 
-  .#{$prefix}--select-optgroup,
+  optgroup.#{$prefix}--select-optgroup,
   .#{$prefix}--select-option {
     // For the options to show in IE11
+    background-color: $layer-hover;
     color: $text-primary;
+
+    &:disabled {
+      color: $text-disabled;
+    }
   }
 
   .#{$prefix}--select--inline {
@@ -214,9 +217,15 @@
     color: $text-primary;
   }
 
+  .#{$prefix}--select--inline .#{$prefix}--select-input:focus,
+  .#{$prefix}--select--inline .#{$prefix}--select-input:focus option,
+  .#{$prefix}--select--inline .#{$prefix}--select-input:focus optgroup {
+    background-color: $background;
+  }
+
   .#{$prefix}--select--inline .#{$prefix}--select-input[disabled],
   .#{$prefix}--select--inline .#{$prefix}--select-input[disabled]:hover {
-    background-color: $field-disabled;
+    background-color: $field;
   }
 
   .#{$prefix}--select--inline .#{$prefix}--select__arrow {

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

package/styles/vendor/carbon-components/src/globals/scss/vendor/@carbon/styles/scss/components/skeleton-styles/_skeleton-styles.scss

@@ -0,0 +1,47 @@
+//
+// 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 '../../config' as *;
+@use '../../utilities/skeleton' as *;
+@use '../../utilities/convert' as *;
+@use '../../spacing' as *;
+
+/// Skeleton styles
+/// @access public
+/// @group skeleton
+@mixin skeleton-styles {
+  //skeleton icon
+  .#{$prefix}--icon--skeleton {
+    @include skeleton;
+
+    display: inline-block;
+    width: rem(16px);
+    height: rem(16px);
+  }
+
+  //skeleton placeholder
+  .#{$prefix}--skeleton__placeholder {
+    @include skeleton;
+
+    width: rem(100px);
+
+    height: rem(100px);
+  }
+
+  //skeleton text
+  .#{$prefix}--skeleton__text {
+    @include skeleton;
+
+    width: 100%;
+    height: 1rem;
+    margin-bottom: $spacing-03;
+  }
+
+  .#{$prefix}--skeleton__heading {
+    height: 1.5rem;
+  }
+}

package/styles/vendor/carbon-components/src/globals/scss/vendor/@carbon/styles/scss/components/slider/_slider.scss

@@ -38,7 +38,9 @@
     width: 100%;
     min-width: rem(200px);
     max-width: rem(640px);
+    padding: $spacing-05 0;
     margin: 0 $spacing-05;
+    cursor: pointer;
   }
 
   .#{$prefix}--slider__range-label {
@@ -57,7 +59,6 @@
     width: 100%;
     height: rem(2px);
     background: $border-subtle;
-    cursor: pointer;
     transform: translate(0%, -50%);
   }
 
@@ -87,13 +88,11 @@
   .#{$prefix}--slider__thumb {
     position: absolute;
     z-index: 3;
-    top: 0;
     width: rem(14px);
     height: rem(14px);
     background: $layer-selected-inverse;
     border-radius: 50%;
     box-shadow: inset 0 0 0 1px transparent, inset 0 0 0 2px transparent;
-    cursor: pointer;
     outline: none;
     transform: translate(-50%, -50%);
     transition: transform $duration-fast-02 motion(standard, productive),
@@ -124,7 +123,7 @@
 
   .#{$prefix}--slider-text-input,
   .#{$prefix}-slider-text-input {
-    width: auto;
+    width: rem(64px);
     height: rem(40px);
     -moz-appearance: textfield;
     text-align: center;
@@ -135,6 +134,10 @@
     }
   }
 
+  .#{$prefix}--slider-text-input.#{$prefix}--text-input--invalid {
+    padding-right: 1rem;
+  }
+
   .#{$prefix}--slider__thumb:focus ~ .#{$prefix}--slider__filled-track {
     background-color: $interactive;
   }
@@ -146,6 +149,10 @@
     color: $text-disabled;
   }
 
+  .#{$prefix}--slider--disabled.#{$prefix}--slider {
+    cursor: not-allowed;
+  }
+
   .#{$prefix}--slider--disabled .#{$prefix}--slider__thumb {
     background-color: $border-subtle;
 
@@ -173,7 +180,6 @@
     .#{$prefix}--slider__thumb:focus
     ~ .#{$prefix}--slider__filled-track {
     background-color: $border-subtle;
-    cursor: not-allowed;
   }
 
   .#{$prefix}--slider--disabled
@@ -181,7 +187,7 @@
     .#{$prefix}--slider-text-input,
   .#{$prefix}--slider--disabled ~ .#{$prefix}--slider-text-input {
     border: none;
-    background-color: $field-disabled;
+    background-color: $field;
     color: $text-disabled;
     cursor: not-allowed;
     transition: none;

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

package/styles/vendor/carbon-components/src/globals/scss/vendor/@carbon/styles/scss/components/stack/_stack.scss

@@ -0,0 +1,34 @@
+//
+// 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 '../../utilities/custom-property';
+
+@mixin stack() {
+  .#{$prefix}--stack-horizontal {
+    display: inline-grid;
+    column-gap: custom-property.get-var('stack-gap', 0);
+    grid-auto-flow: column;
+  }
+
+  .#{$prefix}--stack-vertical {
+    display: grid;
+    grid-auto-flow: row;
+    row-gap: custom-property.get-var('stack-gap', 0);
+  }
+
+  $index: 1;
+
+  @each $step, $value in spacing.$spacing {
+    .#{$prefix}--stack-scale-#{$index} {
+      @include custom-property.declaration('stack-gap', $value);
+    }
+
+    $index: $index + 1;
+  }
+}

package/styles/vendor/carbon-components/src/globals/scss/vendor/@carbon/styles/scss/components/structured-list/_mixins.scss

@@ -24,7 +24,7 @@ $structured-list-text-transform: none !default;
 /// @group structured-list
 /// @param {Number} $padding [$structured-list-padding]
 @mixin padding-td--condensed($padding: $structured-list-padding) {
-  padding: $padding / 4;
+  padding: $padding * 0.25;
 }
 
 /// Used only for [data-structured-list]
@@ -32,13 +32,13 @@ $structured-list-text-transform: none !default;
 /// @group structured-list
 /// @param {Number} $padding [$structured-list-padding]
 @mixin padding--data-structured-list($padding: $structured-list-padding) {
-  padding-right: $padding / 2;
-  padding-left: $padding / 2;
+  padding-right: $padding * 0.5;
+  padding-left: $padding * 0.5;
 
   // Controls gutter sizes for check
   &:first-child {
-    padding-right: $padding / 2;
-    padding-left: $padding / 2;
+    padding-right: $padding * 0.5;
+    padding-left: $padding * 0.5;
   }
 }
 

package/styles/vendor/carbon-components/src/globals/scss/vendor/@carbon/styles/scss/components/structured-list/_structured-list.scss

@@ -36,12 +36,14 @@
 
     display: table;
     width: 100%;
-    margin-bottom: 5rem;
+    @if not enabled('enable-v11-release') {
+      margin-bottom: 5rem;
+    }
+
     background-color: transparent;
     border-collapse: collapse;
     border-spacing: 0;
     overflow-x: auto;
-    overflow-y: hidden;
 
     // Condensed list
     &.#{$prefix}--structured-list--condensed .#{$prefix}--structured-list-td,
@@ -86,8 +88,8 @@
 
   .#{$prefix}--structured-list--selection
     .#{$prefix}--structured-list-row:hover:not(.#{$prefix}--structured-list-row--header-row):not(.#{$prefix}--structured-list-row--selected) {
-    border-bottom: 1px solid $hover-row;
-    background-color: $hover-row;
+    border-bottom: 1px solid $background-hover;
+    background-color: $background-hover;
     cursor: pointer;
   }
 
@@ -131,7 +133,7 @@
   .#{$prefix}--structured-list-th {
     @include reset;
     @include padding-th;
-    @include type-style('productive-heading-01');
+    @include type-style('heading-compact-01');
 
     display: table-cell;
     height: rem(40px);
@@ -149,7 +151,7 @@
 
   .#{$prefix}--structured-list-td {
     @include reset;
-    @include type-style('body-long-01');
+    @include type-style('body-01');
     @include padding-td;
 
     position: relative;