@carbon/charts 0.58.0 → 0.58.1

package/styles/vendor/carbon-components/src/globals/scss/vendor/@carbon/styles/scss/components/popover/_popover.scss

@@ -0,0 +1,372 @@
+//
+// 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 '../../theme';
+@use '../../utilities/box-shadow' as *;
+@use '../../utilities/custom-property';
+@use '../../utilities/high-contrast-mode' as *;
+@use '../../utilities/focus-outline' as *;
+@use '../../utilities/' as *;
+@use '../../utilities/convert' as *;
+
+/// The Popover component is used for triggering a pop-up next to a trigger
+/// element, typically a button, in a given direction. It is made up of several
+/// parts and includes a handful of modifiers to change the appearance.
+///
+/// The parts of a popover include:
+///   The popover container `.cds-popover-container`
+///   This container contains the trigger and the popover and is used to
+///   coordinate positioning relative to the trigger button
+///
+///   The popover
+///   This is an intermediate container that is used for the
+///   `filter: drop-shadow()` effect on the popover content and the caret. It is
+///   an absolutely positioned container that matches the dimensions of the
+///   container so that popover content and caret can be positioned absolutely.
+///
+///   Popover content
+///   This is the containing element for user-provided content and sets the
+///   background and text color for the area.
+///
+///   Popover caret
+///   This caret is an optional modifier that displays a character centered with
+///   respect to the trigger element
+
+// The background color for the popover container
+$popover-background-color: custom-property.get-var(
+  'popover-background-color',
+  theme.$layer
+);
+
+// The drop shadow value used for the popover container
+$popover-drop-shadow: custom-property.get-var('popover-drop-shadow', 'none');
+
+// The border radius value for the popover container
+$popover-border-radius: custom-property.get-var('popover-border-radius', 2px);
+
+// The text color used for text placed inside of the popover
+$popover-text-color: custom-property.get-var(
+  'popover-text-color',
+  theme.$text-primary
+);
+
+// The distance between the popover container and the triggering element
+// Specify the distance between the popover and the trigger. This value must
+// have a unit otherwise the `calc()` expression will not work
+// stylelint-disable-next-line length-zero-no-unit
+$popover-offset: custom-property.get-var('popover-offset', 0rem);
+
+// Customize the dimensions of the caret by specifying its width or height.
+// These values will be flipped in left or right directions to have the
+// correct dimensions
+$popover-caret-width: custom-property.get-var('popover-caret-width', rem(12px));
+$popover-caret-height: custom-property.get-var(
+  'popover-caret-height',
+  rem(6px)
+);
+
+@mixin popover {
+  // Container
+  .#{$prefix}--popover-container {
+    position: relative;
+    display: inline-block;
+  }
+
+  /// Modifiers
+
+  // High contrast modifier
+  .#{$prefix}--popover--high-contrast .#{$prefix}--popover {
+    @include custom-property.declaration(
+      'popover-background-color',
+      theme.$background-inverse
+    );
+    @include custom-property.declaration(
+      'popover-text-color',
+      theme.$text-inverse
+    );
+  }
+
+  // Drop shadow modifier
+  .#{$prefix}--popover--drop-shadow .#{$prefix}--popover {
+    @include custom-property.declaration(
+      'popover-drop-shadow',
+      drop-shadow(0 2px 2px rgba(0, 0, 0, 0.2))
+    );
+  }
+
+  // Caret tip modifier
+  .#{$prefix}--popover--caret {
+    @include custom-property.declaration('popover-offset', rem(10px));
+  }
+
+  // Popover, this element contains both the caret and the popover content
+  .#{$prefix}--popover {
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    filter: $popover-drop-shadow;
+    pointer-events: none;
+  }
+
+  // Popover content
+  .#{$prefix}--popover-content {
+    position: absolute;
+    z-index: z('floating');
+    display: none;
+    width: max-content;
+    max-width: rem(368px);
+    background-color: $popover-background-color;
+    border-radius: $popover-border-radius;
+    color: $popover-text-color;
+    pointer-events: auto;
+  }
+
+  .#{$prefix}--popover--open .#{$prefix}--popover-content {
+    display: block;
+  }
+
+  // We use a pseudo element inside of the popover to create a space between the
+  // target and the popover. This helps in situations like toolcarets where you do
+  // not want the toolcaret to disappear when the user moves from the target to
+  // the popover.
+  .#{$prefix}--popover-content::before {
+    position: absolute;
+    display: none;
+    content: '';
+  }
+
+  .#{$prefix}--popover--open .#{$prefix}--popover-content::before {
+    display: block;
+  }
+
+  // Popover caret
+  .#{$prefix}--popover-caret {
+    position: absolute;
+    z-index: z('floating');
+    display: none;
+    background-color: $popover-background-color;
+    // We use `will-change: transform` to prevent antialiasing when our caret
+    // has subpixel rendering. When this happens, a single pixel line appears
+    // between the caret and popover-content that we would like to avoid
+    will-change: transform;
+  }
+
+  .#{$prefix}--popover--open.#{$prefix}--popover--caret
+    .#{$prefix}--popover-caret {
+    display: block;
+  }
+
+  //-----------------------------------------------------------------------------
+  // Bottom
+  //-----------------------------------------------------------------------------
+
+  // Popover content placement
+  .#{$prefix}--popover--bottom .#{$prefix}--popover-content {
+    bottom: 0;
+    left: 50%;
+    transform: translate(-50%, calc(100% + $popover-offset));
+  }
+
+  .#{$prefix}--popover--bottom-left .#{$prefix}--popover-content {
+    bottom: 0;
+    left: 0;
+    transform: translate(
+      calc(-1 * $popover-offset),
+      calc(100% + $popover-offset)
+    );
+  }
+
+  .#{$prefix}--popover--bottom-right .#{$prefix}--popover-content {
+    right: 0;
+    bottom: 0;
+    transform: translate($popover-offset, calc(100% + $popover-offset));
+  }
+
+  // Popover hover area placement
+  .#{$prefix}--popover--bottom .#{$prefix}--popover-content::before,
+  .#{$prefix}--popover--bottom-left .#{$prefix}--popover-content::before,
+  .#{$prefix}--popover--bottom-right .#{$prefix}--popover-content::before {
+    top: 0;
+    right: 0;
+    left: 0;
+    height: $popover-offset;
+    transform: translateY(-100%);
+  }
+
+  // Caret placement
+  .#{$prefix}--popover--bottom .#{$prefix}--popover-caret,
+  .#{$prefix}--popover--bottom-left .#{$prefix}--popover-caret,
+  .#{$prefix}--popover--bottom-right .#{$prefix}--popover-caret {
+    bottom: 0;
+    left: 50%;
+    width: $popover-caret-width;
+    height: $popover-caret-height;
+    clip-path: polygon(0% 100%, 50% 0%, 100% 100%);
+    transform: translate(-50%, $popover-offset);
+  }
+
+  //-----------------------------------------------------------------------------
+  // Top
+  //-----------------------------------------------------------------------------
+
+  // Popover content placement
+  .#{$prefix}--popover--top .#{$prefix}--popover-content {
+    top: 0;
+    left: 50%;
+    transform: translate(-50%, calc(-100% - $popover-offset));
+  }
+
+  .#{$prefix}--popover--top-left .#{$prefix}--popover-content {
+    top: 0;
+    left: 0;
+    transform: translate(
+      calc(-1 * $popover-offset),
+      calc(-100% - $popover-offset)
+    );
+  }
+
+  .#{$prefix}--popover--top-right .#{$prefix}--popover-content {
+    top: 0;
+    right: 0;
+    transform: translate($popover-offset, calc(-100% - $popover-offset));
+  }
+
+  // Popover hover area placement
+  .#{$prefix}--popover--top .#{$prefix}--popover-content::before,
+  .#{$prefix}--popover--top-left .#{$prefix}--popover-content::before,
+  .#{$prefix}--popover--top-right .#{$prefix}--popover-content::before {
+    right: 0;
+    bottom: 0;
+    left: 0;
+    height: $popover-offset;
+    transform: translateY(100%);
+  }
+
+  // Caret placement
+  .#{$prefix}--popover--top .#{$prefix}--popover-caret,
+  .#{$prefix}--popover--top-left .#{$prefix}--popover-caret,
+  .#{$prefix}--popover--top-right .#{$prefix}--popover-caret {
+    top: 0;
+    left: 50%;
+    width: $popover-caret-width;
+    height: $popover-caret-height;
+    clip-path: polygon(0% 0%, 50% 100%, 100% 0%);
+    transform: translate(-50%, calc(-1 * $popover-offset));
+  }
+
+  //-----------------------------------------------------------------------------
+  // Right
+  //-----------------------------------------------------------------------------
+
+  // Popover content placement
+  .#{$prefix}--popover--right .#{$prefix}--popover-content {
+    top: 50%;
+    left: 100%;
+    // Add in 0.1px to prevent rounding errors where the content is
+    // moved farther than the caret
+    transform: translate($popover-offset, -50%);
+  }
+
+  .#{$prefix}--popover--right-top .#{$prefix}--popover-content {
+    top: 50%;
+    left: 100%;
+    transform: translate(
+      $popover-offset,
+      calc(0.5 * $popover-offset * -1 - 16px)
+    );
+  }
+
+  .#{$prefix}--popover--right-bottom .#{$prefix}--popover-content {
+    bottom: 50%;
+    left: 100%;
+    transform: translate($popover-offset, calc(0.5 * $popover-offset + 16px));
+  }
+
+  // Popover hover area placement
+  .#{$prefix}--popover--right .#{$prefix}--popover-content::before,
+  .#{$prefix}--popover--right-top .#{$prefix}--popover-content::before,
+  .#{$prefix}--popover--right-bottom .#{$prefix}--popover-content::before {
+    top: 0;
+    bottom: 0;
+    left: 0;
+    width: $popover-offset;
+    transform: translateX(-100%);
+  }
+
+  // Caret placement
+  .#{$prefix}--popover--right .#{$prefix}--popover-caret,
+  .#{$prefix}--popover--right-top .#{$prefix}--popover-caret,
+  .#{$prefix}--popover--right-bottom .#{$prefix}--popover-caret {
+    top: 50%;
+    left: 100%;
+    width: $popover-caret-height;
+    height: $popover-caret-width;
+    clip-path: polygon(0% 50%, 100% 0%, 100% 100%);
+    transform: translate(calc($popover-offset - 100%), -50%);
+  }
+
+  //-----------------------------------------------------------------------------
+  // Left
+  //-----------------------------------------------------------------------------
+
+  // Popover content placement
+  .#{$prefix}--popover--left .#{$prefix}--popover-content {
+    top: 50%;
+    right: 100%;
+    // Add in 0.1px to prevent rounding errors where the content is
+    // moved farther than the caret
+    transform: translate(calc(-1 * $popover-offset + 0.1px), -50%);
+  }
+
+  .#{$prefix}--popover--left-top .#{$prefix}--popover-content {
+    top: -50%;
+    right: 100%;
+    // Add in 0.1px to prevent rounding errors where the content is
+    // moved farther than the caret
+    transform: translate(
+      calc(-1 * $popover-offset),
+      calc(-1 * 0.5 * $popover-offset + 16px)
+    );
+  }
+
+  .#{$prefix}--popover--left-bottom .#{$prefix}--popover-content {
+    right: 100%;
+    bottom: -50%;
+    // Add in 0.1px to prevent rounding errors where the content is
+    // moved farther than the caret
+    transform: translate(
+      calc(-1 * $popover-offset),
+      calc(0.5 * $popover-offset - 16px)
+    );
+  }
+
+  // Popover hover area placement
+  .#{$prefix}--popover--left .#{$prefix}--popover-content::before,
+  .#{$prefix}--popover--left-top .#{$prefix}--popover-content::before,
+  .#{$prefix}--popover--left-bottom .#{$prefix}--popover-content::before {
+    top: 0;
+    right: 0;
+    bottom: 0;
+    width: $popover-offset;
+    transform: translateX(100%);
+  }
+
+  // Caret placement
+  .#{$prefix}--popover--left .#{$prefix}--popover-caret,
+  .#{$prefix}--popover--left-top .#{$prefix}--popover-caret,
+  .#{$prefix}--popover--left-bottom .#{$prefix}--popover-caret {
+    top: 50%;
+    right: 100%;
+    width: $popover-caret-height;
+    height: $popover-caret-width;
+    clip-path: polygon(0% 0%, 100% 50%, 0% 100%);
+    transform: translate(calc(-1 * $popover-offset + 100%), -50%);
+  }
+}

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

package/styles/vendor/carbon-components/src/globals/scss/vendor/@carbon/styles/scss/components/progress-bar/_progress-bar.scss

@@ -0,0 +1,111 @@
+//
+// Copyright IBM Corp. 2021
+//
+// 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 '../../motion' as *;
+@use '../../spacing' as *;
+@use '../../theme' as *;
+@use '../../type' as *;
+@use '../../utilities/convert' as *;
+@use '../../utilities/visually-hidden' as *;
+
+/// Progress Bar styles
+/// @access public
+/// @group progress-bar
+@mixin progress-bar {
+  .#{$prefix}--progress-bar__label {
+    @include type-style('body-compact-01');
+
+    display: block;
+    margin-bottom: $spacing-03;
+    color: $text-primary;
+  }
+
+  .#{$prefix}--progress-bar__track {
+    position: relative;
+    width: 100%;
+    height: rem(8px);
+    background-color: $layer;
+  }
+
+  .#{$prefix}--progress-bar--big .#{$prefix}--progress-bar__track {
+    height: rem(8px);
+  }
+
+  .#{$prefix}--progress-bar--small .#{$prefix}--progress-bar__track {
+    height: rem(4px);
+  }
+
+  .#{$prefix}--progress-bar__bar {
+    display: block;
+    width: 100%;
+    height: 100%;
+    background-color: $interactive;
+    transform: scaleX(0);
+    transform-origin: 0 center #{'/*rtl:100% center*/'};
+    transition: transform $duration-fast-02 motion(standard, productive);
+  }
+
+  .#{$prefix}--progress-bar--indeterminate
+    .#{$prefix}--progress-bar__track::after {
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    animation-duration: 1400ms;
+    animation-iteration-count: infinite;
+    animation-name: progress-bar-indeterminate;
+    animation-timing-function: linear;
+    background-image: linear-gradient(
+      90deg,
+      $interactive 12.5%,
+      transparent 12.5%
+    );
+    background-position-x: 0%;
+    background-size: 200% 100%;
+    content: '';
+  }
+
+  .#{$prefix}--progress-bar__helper-text {
+    @include type-style('helper-text-01');
+
+    margin-top: $spacing-02;
+    color: $text-secondary;
+  }
+
+  @keyframes progress-bar-indeterminate {
+    0% {
+      background-position-x: 25%;
+    }
+
+    80%,
+    100% {
+      background-position-x: -105%;
+    }
+  }
+
+  .#{$prefix}--progress-bar--inline {
+    display: flex;
+    align-items: center;
+  }
+
+  .#{$prefix}--progress-bar--inline .#{$prefix}--progress-bar__label {
+    flex-shrink: 0;
+    margin-bottom: 0;
+    margin-inline-end: $spacing-05;
+  }
+
+  .#{$prefix}--progress-bar--inline .#{$prefix}--progress-bar__helper-text {
+    @include visually-hidden;
+  }
+
+  .#{$prefix}--progress-bar--indented .#{$prefix}--progress-bar__label,
+  .#{$prefix}--progress-bar--indented .#{$prefix}--progress-bar__helper-text {
+    padding-inline: $spacing-05;
+  }
+}

package/styles/vendor/carbon-components/src/globals/scss/vendor/@carbon/styles/scss/components/progress-indicator/_progress-indicator.scss

@@ -78,7 +78,7 @@ $progress-indicator-bar-width: 1px inset transparent !default;
   }
 
   .#{$prefix}--progress-label {
-    @include type-style('body-short-01');
+    @include type-style('body-compact-01');
 
     overflow: hidden;
     max-width: rem(88px);
@@ -113,8 +113,8 @@ $progress-indicator-bar-width: 1px inset transparent !default;
     margin-right: 0.75rem;
   }
 
-  .#{$prefix}--progress-label:active {
-    //is this still a color token??
+  .#{$prefix}--progress-step-button:not(.#{$prefix}--progress-step-button--unclickable)
+    .#{$prefix}--progress-label:active {
     box-shadow: 0 rem(3px) 0 0 $background-brand;
     color: $background-brand;
   }
@@ -137,7 +137,7 @@ $progress-indicator-bar-width: 1px inset transparent !default;
 
   //single line tooltip
   .#{$prefix}--progress-step .#{$prefix}--tooltip {
-    @include type-style('body-long-01');
+    @include type-style('body-01');
 
     display: block;
     width: rem(125px);
@@ -153,7 +153,7 @@ $progress-indicator-bar-width: 1px inset transparent !default;
 
   //multiline tooltip
   .#{$prefix}--progress-step .#{$prefix}--tooltip_multi {
-    @include type-style('body-long-01');
+    @include type-style('body-01');
 
     width: rem(150px);
     height: auto;
@@ -280,12 +280,17 @@ $progress-indicator-bar-width: 1px inset transparent !default;
     flex-direction: column;
   }
 
+  .#{$prefix}--progress--vertical,
+  .#{$prefix}--progress-text {
+    display: flex;
+    flex-direction: column;
+  }
+
   .#{$prefix}--progress--vertical .#{$prefix}--progress-step,
   .#{$prefix}--progress--vertical .#{$prefix}--progress-step-button {
     width: initial;
     min-width: initial;
     min-height: 3.625rem;
-    flex-wrap: wrap;
     align-content: flex-start;
   }
 
@@ -305,15 +310,16 @@ $progress-indicator-bar-width: 1px inset transparent !default;
     white-space: initial;
   }
 
-  .#{$prefix}--progress--vertical .#{$prefix}--progress-step .bx--tooltip {
+  .#{$prefix}--progress--vertical
+    .#{$prefix}--progress-step
+    .#{$prefix}--tooltip {
     margin-top: 0.5rem;
   }
 
   .#{$prefix}--progress--vertical .#{$prefix}--progress-optional {
     position: static;
     width: 100%;
-    margin-top: auto;
-    margin-left: $spacing-07;
+    margin: auto 0;
   }
 
   .#{$prefix}--progress--vertical .#{$prefix}--progress-line {

package/styles/vendor/carbon-components/src/globals/scss/vendor/@carbon/styles/scss/components/radio-button/_radio-button.scss

@@ -20,6 +20,8 @@
 @use '../../config' as *;
 @use '../../spacing' as *;
 
+@use '../button/tokens' as *;
+
 /// @type Number
 /// @access public
 /// @group radio-button
@@ -32,6 +34,7 @@ $radio-border-width: 1px !default;
   .#{$prefix}--radio-button-group {
     @include reset;
 
+    position: relative;
     display: flex;
     align-items: center;
   }
@@ -52,7 +55,7 @@ $radio-border-width: 1px !default;
 
     .#{$prefix}--radio-button__label {
       margin-right: 0;
-      line-height: carbon-mini-units(2.5);
+      line-height: 1.25;
     }
 
     .#{$prefix}--radio-button__label:not(:last-of-type) {
@@ -67,7 +70,7 @@ $radio-border-width: 1px !default;
   }
 
   .#{$prefix}--radio-button__label {
-    @include type.type-style('body-short-01');
+    @include type.type-style('body-compact-01');
 
     display: flex;
     align-items: center;
@@ -107,33 +110,34 @@ $radio-border-width: 1px !default;
 
       // Allow the selected button to be seen in Windows HCM for IE/Edge
       @media screen and (-ms-high-contrast: active) {
-        // Utilize a system color variable to accomodate any user HCM theme
+        // Utilize a system color variable to accommodate any user HCM theme
         background-color: WindowText;
       }
 
       // Firefox only HCM solution
       @media screen and (prefers-contrast) {
-        // Utilize a system color variable to accomodate any user HCM theme
+        // Utilize a system color variable to accommodate any user HCM theme
         border: 2px solid WindowText;
       }
     }
   }
 
-  .#{$prefix}--radio-button:disabled-01 + .#{$prefix}--radio-button__label {
-    color: $disabled-01;
+  .#{$prefix}--radio-button:disabled + .#{$prefix}--radio-button__label {
+    color: $text-disabled;
     cursor: not-allowed;
   }
 
-  .#{$prefix}--radio-button:disabled-01
+  .#{$prefix}--radio-button:disabled
     + .#{$prefix}--radio-button__label
     .#{$prefix}--radio-button__appearance,
-  .#{$prefix}--radio-button:disabled-01:checked
+  .#{$prefix}--radio-button:disabled:checked
     + .#{$prefix}--radio-button__label
     .#{$prefix}--radio-button__appearance {
-    border-color: $disabled-01;
+    // Disabled radio button, checkbox fix #10913
+    border-color: $icon-disabled;
 
     &::before {
-      background-color: $disabled-01;
+      background-color: $text-disabled;
     }
   }
 
@@ -142,8 +146,8 @@ $radio-border-width: 1px !default;
   .#{$prefix}--radio-button:focus
     + .#{$prefix}--radio-button__label
     .#{$prefix}--radio-button__appearance {
-    box-shadow: 0 0 0 2px $focus;
-    outline: 1px solid transparent;
+    outline: 2px solid $focus;
+    outline-offset: 1.5px;
   }
 
   // Skeleton State