@carbon/charts 0.57.1 → 0.58.1

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

@@ -15,7 +15,6 @@
 @use '../../utilities/focus-outline';
 @use '../../utilities/high-contrast-mode' as *;
 @use '../../utilities/skeleton' as *;
-@use '../../utilities/tooltip' as *;
 @use '../../utilities/visually-hidden' as *;
 @use 'tokens' as *;
 
@@ -24,7 +23,7 @@
     @include button-base;
   }
 
-  // Reset intrisic padding in Firefox (see #731)
+  // Reset intrinsic padding in Firefox (see #731)
   .#{$prefix}--btn::-moz-focus-inner {
     padding: 0;
     border: 0;
@@ -103,9 +102,9 @@
       transparent,
       transparent,
       $link-primary,
-      $background-hover,
+      $layer-hover,
       currentColor,
-      $background-active
+      $layer-active
     );
 
     padding: $button-padding-ghost;
@@ -145,118 +144,9 @@
     &.#{$prefix}--btn--md {
       padding: $button-padding-ghost-field;
     }
-  }
-
-  .#{$prefix}--btn.#{$prefix}--btn--icon-only.#{$prefix}--tooltip__trigger {
-    @include tooltip--trigger('icon', 'bottom');
-
-    svg,
-    &:hover svg,
-    &:focus svg {
-      fill: currentColor;
-    }
-
-    &.#{$prefix}--btn--disabled.#{$prefix}--tooltip--a11y::before,
-    &.#{$prefix}--btn--disabled.#{$prefix}--tooltip--a11y::after,
-    &.#{$prefix}--btn--disabled .#{$prefix}--assistive-text {
-      overflow: hidden;
-      margin: -1px;
-      clip: rect(0, 0, 0, 0);
-      opacity: 0;
-    }
-  }
-
-  // Allow pointer events on tooltip when tooltip is visible
-  .#{$prefix}--btn.#{$prefix}--btn--icon-only:not(.#{$prefix}--tooltip--hidden)
-    .#{$prefix}--assistive-text {
-    pointer-events: all;
-  }
-
-  .#{$prefix}--btn.#{$prefix}--btn--icon-only.#{$prefix}--tooltip__trigger:focus {
-    border-color: $focus;
-  }
-
-  .#{$prefix}--btn.#{$prefix}--btn--icon-only.#{$prefix}--tooltip__trigger:active:not([disabled]) {
-    border-color: transparent;
-  }
-
-  .#{$prefix}--btn.#{$prefix}--btn--icon-only.#{$prefix}--tooltip__trigger:focus
-    svg {
-    outline-color: transparent;
-  }
-
-  .#{$prefix}--btn.#{$prefix}--btn--icon-only.#{$prefix}--tooltip__trigger[disabled]:hover,
-  .#{$prefix}--btn.#{$prefix}--btn--icon-only.#{$prefix}--tooltip__trigger[disabled]:focus,
-  .#{$prefix}--btn.#{$prefix}--btn--icon-only.#{$prefix}--tooltip__trigger[disabled]:active {
-    cursor: not-allowed;
-    fill: $icon-on-color-disabled;
-  }
-
-  .#{$prefix}--tooltip__trigger.#{$prefix}--btn--icon-only--top {
-    @include tooltip--trigger('icon', 'top');
-    @include tooltip--placement('icon', 'top', 'center');
-
-    &.#{$prefix}--tooltip--align-start {
-      @include tooltip--placement('icon', 'top', 'start');
-    }
-
-    &.#{$prefix}--tooltip--align-center {
-      @include tooltip--placement('icon', 'top', 'center');
-    }
 
-    &.#{$prefix}--tooltip--align-end {
-      @include tooltip--placement('icon', 'top', 'end');
-    }
-  }
-
-  .#{$prefix}--tooltip__trigger.#{$prefix}--btn--icon-only--right {
-    @include tooltip--trigger('icon', 'right');
-    @include tooltip--placement('icon', 'right', 'center');
-
-    &.#{$prefix}--tooltip--align-start {
-      @include tooltip--placement('icon', 'right', 'start');
-    }
-
-    &.#{$prefix}--tooltip--align-center {
-      @include tooltip--placement('icon', 'right', 'center');
-    }
-
-    &.#{$prefix}--tooltip--align-end {
-      @include tooltip--placement('icon', 'right', 'end');
-    }
-  }
-
-  .#{$prefix}--tooltip__trigger.#{$prefix}--btn--icon-only--bottom {
-    @include tooltip--trigger('icon', 'bottom');
-    @include tooltip--placement('icon', 'bottom', 'center');
-
-    &.#{$prefix}--tooltip--align-start {
-      @include tooltip--placement('icon', 'bottom', 'start');
-    }
-
-    &.#{$prefix}--tooltip--align-center {
-      @include tooltip--placement('icon', 'bottom', 'center');
-    }
-
-    &.#{$prefix}--tooltip--align-end {
-      @include tooltip--placement('icon', 'bottom', 'end');
-    }
-  }
-
-  .#{$prefix}--tooltip__trigger.#{$prefix}--btn--icon-only--left {
-    @include tooltip--trigger('icon', 'left');
-    @include tooltip--placement('icon', 'left', 'center');
-
-    &.#{$prefix}--tooltip--align-start {
-      @include tooltip--placement('icon', 'left', 'start');
-    }
-
-    &.#{$prefix}--tooltip--align-center {
-      @include tooltip--placement('icon', 'left', 'center');
-    }
-
-    &.#{$prefix}--tooltip--align-end {
-      @include tooltip--placement('icon', 'left', 'end');
+    &:not([disabled]) svg {
+      fill: $icon-primary;
     }
   }
 
@@ -353,6 +243,7 @@
 
       &:active {
         border-color: $button-danger-active;
+        background-color: $button-danger-active;
         color: $text-on-color;
       }
 
@@ -444,7 +335,7 @@
 
   //expressive styles
   .#{$prefix}--btn--expressive {
-    @include type-style('body-short-02');
+    @include type-style('body-compact-02');
 
     min-height: 3rem;
   }
@@ -525,4 +416,13 @@
   .#{$prefix}--btn:focus {
     @include high-contrast-mode('focus');
   }
+
+  // Windows HCM fix
+  // stylelint-disable-next-line no-duplicate-selectors
+  .#{$prefix}--btn--ghost.#{$prefix}--btn--icon-only
+    .#{$prefix}--btn__icon
+    path:not([data-icon-path]):not([fill='none']),
+  .#{$prefix}--btn--ghost.#{$prefix}--btn--icon-only .#{$prefix}--btn__icon {
+    @include high-contrast-mode('icon-fill');
+  }
 }

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

@@ -8,6 +8,10 @@
 @forward 'vars';
 @forward 'button';
 @forward 'tokens';
+
+@use '../../theme';
 @use 'button';
+@use 'tokens';
 
+@include theme.add-component-tokens(tokens.$button-tokens);
 @include button.button;

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

@@ -13,14 +13,18 @@
 @use '../../type' as *;
 @use '../../utilities/component-reset';
 @use '../../utilities/convert' as *;
+@use '../../utilities/custom-property';
 @use 'tokens' as *;
 
+$button-focus-color: custom-property.get-var('button-focus-color', $focus);
+
 @mixin button-base {
   @include component-reset.reset;
-  @include type-style('body-short-01');
+  @include type-style('body-compact-01');
 
   position: relative;
   display: inline-flex;
+  width: max-content;
   max-width: rem(320px);
   min-height: $button-height;
   flex-shrink: 0;
@@ -84,8 +88,8 @@
   }
 
   &:focus {
-    border-color: $focus;
-    box-shadow: inset 0 0 0 $button-outline-width $focus,
+    border-color: $button-focus-color;
+    box-shadow: inset 0 0 0 $button-outline-width $button-focus-color,
       inset 0 0 0 $button-border-width $background;
   }
 

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

@@ -6,71 +6,419 @@
 //
 
 @use 'sass:map';
-@use '../../theme' as *;
-@use '../../utilities/custom-property';
-
-$white: (
-  button-separator: #e0e0e0,
-  button-primary: #0f62fe,
-  button-secondary: #393939,
-  button-tertiary: #0f62fe,
-  button-danger-primary: #da1e28,
-  button-danger-secondary: #da1e28,
-  button-danger-active: #750e13,
-  button-primary-active: #002d9c,
-  button-secondary-active: #6f6f6f,
-  button-tertiary-active: #002d9c,
-  button-danger-hover: #b81921,
-  button-primary-hover: #0353e9,
-  button-secondary-hover: #4c4c4c,
-  button-tertiary-hover: #0353e9,
-  button-disabled: #c6c6c6,
+@use '../../themes';
+@use '../../utilities/component-tokens';
+
+$button-separator: (
+  fallback: #e0e0e0,
+  values: (
+    (
+      theme: themes.$white,
+      value: #e0e0e0,
+    ),
+    (
+      theme: themes.$g10,
+      value: #e0e0e0,
+    ),
+    (
+      theme: themes.$g90,
+      value: #161616,
+    ),
+    (
+      theme: themes.$g100,
+      value: #161616,
+    ),
+  ),
+) !default;
+
+$button-primary: (
+  fallback: #0f62fe,
+  values: (
+    (
+      theme: themes.$white,
+      value: #0f62fe,
+    ),
+    (
+      theme: themes.$g10,
+      value: #0f62fe,
+    ),
+    (
+      theme: themes.$g90,
+      value: #0f62fe,
+    ),
+    (
+      theme: themes.$g100,
+      value: #0f62fe,
+    ),
+  ),
+) !default;
+
+$button-secondary: (
+  fallback: #393939,
+  values: (
+    (
+      theme: themes.$white,
+      value: #393939,
+    ),
+    (
+      theme: themes.$g10,
+      value: #393939,
+    ),
+    (
+      theme: themes.$g90,
+      value: #6f6f6f,
+    ),
+    (
+      theme: themes.$g100,
+      value: #6f6f6f,
+    ),
+  ),
+) !default;
+
+$button-tertiary: (
+  fallback: #0f62fe,
+  values: (
+    (
+      theme: themes.$white,
+      value: #0f62fe,
+    ),
+    (
+      theme: themes.$g10,
+      value: #0f62fe,
+    ),
+    (
+      theme: themes.$g90,
+      value: #ffffff,
+    ),
+    (
+      theme: themes.$g100,
+      value: #ffffff,
+    ),
+  ),
+) !default;
+
+$button-danger-primary: (
+  fallback: #da1e28,
+  values: (
+    (
+      theme: themes.$white,
+      value: #da1e28,
+    ),
+    (
+      theme: themes.$g10,
+      value: #da1e28,
+    ),
+    (
+      theme: themes.$g90,
+      value: #da1e28,
+    ),
+    (
+      theme: themes.$g100,
+      value: #da1e28,
+    ),
+  ),
+) !default;
+
+$button-danger-secondary: (
+  fallback: #da1e28,
+  values: (
+    (
+      theme: themes.$white,
+      value: #da1e28,
+    ),
+    (
+      theme: themes.$g10,
+      value: #da1e28,
+    ),
+    (
+      theme: themes.$g90,
+      value: #ff8389,
+    ),
+    (
+      theme: themes.$g100,
+      value: #fa4d56,
+    ),
+  ),
+) !default;
+
+$button-danger-active: (
+  fallback: #750e13,
+  values: (
+    (
+      theme: themes.$white,
+      value: #750e13,
+    ),
+    (
+      theme: themes.$g10,
+      value: #750e13,
+    ),
+    (
+      theme: themes.$g90,
+      value: #750e13,
+    ),
+    (
+      theme: themes.$g100,
+      value: #750e13,
+    ),
+  ),
+) !default;
+
+$button-primary-active: (
+  fallback: #002d9c,
+  values: (
+    (
+      theme: themes.$white,
+      value: #002d9c,
+    ),
+    (
+      theme: themes.$g10,
+      value: #002d9c,
+    ),
+    (
+      theme: themes.$g90,
+      value: #002d9c,
+    ),
+    (
+      theme: themes.$g100,
+      value: #002d9c,
+    ),
+  ),
+) !default;
+
+$button-secondary-active: (
+  fallback: #6f6f6f,
+  values: (
+    (
+      theme: themes.$white,
+      value: #6f6f6f,
+    ),
+    (
+      theme: themes.$g10,
+      value: #6f6f6f,
+    ),
+    (
+      theme: themes.$g90,
+      value: #393939,
+    ),
+    (
+      theme: themes.$g100,
+      value: #393939,
+    ),
+  ),
+) !default;
+
+$button-tertiary-active: (
+  fallback: #002d9c,
+  values: (
+    (
+      theme: themes.$white,
+      value: #002d9c,
+    ),
+    (
+      theme: themes.$g10,
+      value: #002d9c,
+    ),
+    (
+      theme: themes.$g90,
+      value: #c6c6c6,
+    ),
+    (
+      theme: themes.$g100,
+      value: #c6c6c6,
+    ),
+  ),
+) !default;
+
+$button-danger-hover: (
+  fallback: #b81922,
+  values: (
+    (
+      theme: themes.$white,
+      value: #b81922,
+    ),
+    (
+      theme: themes.$g10,
+      value: #b81922,
+    ),
+    (
+      theme: themes.$g90,
+      value: #b81921,
+    ),
+    (
+      theme: themes.$g100,
+      value: #b81921,
+    ),
+  ),
+) !default;
+
+$button-primary-hover: (
+  fallback: #0050e6,
+  values: (
+    (
+      theme: themes.$white,
+      value: #0050e6,
+    ),
+    (
+      theme: themes.$g10,
+      value: #0050e6,
+    ),
+    (
+      theme: themes.$g90,
+      value: #0050e6,
+    ),
+    (
+      theme: themes.$g100,
+      value: #0050e6,
+    ),
+  ),
+) !default;
+
+$button-secondary-hover: (
+  fallback: #474747,
+  values: (
+    (
+      theme: themes.$white,
+      value: #474747,
+    ),
+    (
+      theme: themes.$g10,
+      value: #474747,
+    ),
+    (
+      theme: themes.$g90,
+      value: #5e5e5e,
+    ),
+    (
+      theme: themes.$g100,
+      value: #5e5e5e,
+    ),
+  ),
+) !default;
+
+$button-tertiary-hover: (
+  fallback: #0050e6,
+  values: (
+    (
+      theme: themes.$white,
+      value: #0050e6,
+    ),
+    (
+      theme: themes.$g10,
+      value: #0050e6,
+    ),
+    (
+      theme: themes.$g90,
+      value: #f4f4f4,
+    ),
+    (
+      theme: themes.$g100,
+      value: #f4f4f4,
+    ),
+  ),
+) !default;
+
+$button-disabled: (
+  fallback: #c6c6c6,
+  values: (
+    (
+      theme: themes.$white,
+      value: #c6c6c6,
+    ),
+    (
+      theme: themes.$g10,
+      value: #c6c6c6,
+    ),
+    (
+      theme: themes.$g90,
+      value: rgb(141 141 141 / 30%),
+    ),
+    (
+      theme: themes.$g100,
+      value: rgb(141 141 141 / 30%),
+    ),
+  ),
+) !default;
+
+$button-tokens: (
+  button-separator: $button-separator,
+  button-primary: $button-primary,
+  button-secondary: $button-secondary,
+  button-tertiary: $button-tertiary,
+  button-danger-primary: $button-danger-primary,
+  button-danger-secondary: $button-danger-secondary,
+  button-danger-active: $button-danger-active,
+  button-primary-active: $button-primary-active,
+  button-secondary-active: $button-secondary-active,
+  button-tertiary-active: $button-tertiary-active,
+  button-danger-hover: $button-danger-hover,
+  button-primary-hover: $button-primary-hover,
+  button-secondary-hover: $button-secondary-hover,
+  button-tertiary-hover: $button-tertiary-hover,
+  button-disabled: $button-disabled,
+);
+
+$button-separator: component-tokens.get-var(
+  $button-separator,
+  'button-separator'
+);
+
+$button-primary: component-tokens.get-var($button-primary, 'button-primary');
+
+$button-secondary: component-tokens.get-var(
+  $button-secondary,
+  'button-secondary'
+);
+
+$button-tertiary: component-tokens.get-var($button-tertiary, 'button-tertiary');
+
+$button-danger-primary: component-tokens.get-var(
+  $button-danger-primary,
+  'button-danger-primary'
+);
+
+$button-danger-secondary: component-tokens.get-var(
+  $button-danger-secondary,
+  'button-danger-secondary'
+);
+
+$button-danger-active: component-tokens.get-var(
+  $button-danger-active,
+  'button-danger-active'
+);
+
+$button-primary-active: component-tokens.get-var(
+  $button-primary-active,
+  'button-primary-active'
+);
+
+$button-secondary-active: component-tokens.get-var(
+  $button-secondary-active,
+  'button-secondary-active'
+);
+
+$button-tertiary-active: component-tokens.get-var(
+  $button-tertiary-active,
+  'button-tertiary-active'
+);
+
+$button-danger-hover: component-tokens.get-var(
+  $button-danger-hover,
+  'button-danger-hover'
+);
+
+$button-primary-hover: component-tokens.get-var(
+  $button-primary-hover,
+  'button-primary-hover'
 );
 
-$g10: $white;
-
-$g90: map.merge(
-  $white,
-  (
-    button-separator: #161616,
-    button-secondary: #6f6f6f,
-    button-tertiary: #ffffff,
-    button-danger-secondary: #ff8389,
-    button-secondary-active: #393939,
-    button-tertiary-active: #c6c6c6,
-    button-secondary-hover: #606060,
-    button-tertiary-hover: #f4f4f4,
-    button-disabled: #6f6f6f,
-  )
+$button-secondary-hover: component-tokens.get-var(
+  $button-secondary-hover,
+  'button-secondary-hover'
 );
 
-$g100: map.merge(
-  $white,
-  (
-    button-separator: #161616,
-    button-secondary: #6f6f6f,
-    button-tertiary: #ffffff,
-    button-danger-secondary: #fa4d56,
-    button-secondary-active: #393939,
-    button-tertiary-active: #c6c6c6,
-    button-secondary-hover: #606060,
-    button-tertiary-hover: #f4f4f4,
-    button-disabled: #525252,
-  )
+$button-tertiary-hover: component-tokens.get-var(
+  $button-tertiary-hover,
+  'button-tertiary-hover'
 );
 
-$button-separator: custom-property.get-var('button-separator');
-$button-primary: custom-property.get-var('button-primary');
-$button-secondary: custom-property.get-var('button-secondary');
-$button-tertiary: custom-property.get-var('button-tertiary');
-$button-danger-primary: custom-property.get-var('button-danger-primary');
-$button-danger-secondary: custom-property.get-var('button-danger-secondary');
-$button-danger-active: custom-property.get-var('button-danger-active');
-$button-primary-active: custom-property.get-var('button-primary-active');
-$button-secondary-active: custom-property.get-var('button-secondary-active');
-$button-tertiary-active: custom-property.get-var('button-tertiary-active');
-$button-danger-hover: custom-property.get-var('button-danger-hover');
-$button-primary-hover: custom-property.get-var('button-primary-hover');
-$button-secondary-hover: custom-property.get-var('button-secondary-hover');
-$button-tertiary-hover: custom-property.get-var('button-tertiary-hover');
-$button-disabled: custom-property.get-var('button-disabled');
+$button-disabled: component-tokens.get-var($button-disabled, 'button-disabled');