@carbon/charts 0.58.0 → 0.58.1

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

@@ -6,121 +6,257 @@
 //
 
 @use 'sass:color';
+@use "sass:map";
+@use "sass:list";
 @use '../../colors';
-@use '../../theme' as *;
 @use '../../themes';
+@use '../../theme';
 @use '../../utilities/component-tokens';
+@use '../button/tokens' as button-tokens;
 
-// prettier-ignore
-$-tokens: (
-  'notification-background-error': (
-    fallback: colors.$red-10,
-    values: (
-      (
-        theme: themes.$white,
-        value: colors.$red-10,
-      ),
-      (
-        theme: themes.$g10,
-        value: colors.$red-10,
-      ),
-      (
-        theme: themes.$g90,
-        value: $layer,
-      ),
-      (
-        theme: themes.$g100,
-        value: $layer,
-      ),
+$notification-background-error: (
+  fallback: colors.$red-10,
+  values: (
+    (
+      theme: themes.$white,
+      value: colors.$red-10,
+    ),
+    (
+      theme: themes.$g10,
+      value: colors.$red-10,
+    ),
+    (
+      theme: themes.$g90,
+      value: theme.$layer,
+    ),
+    (
+      theme: themes.$g100,
+      value: theme.$layer,
     ),
   ),
-  'notification-background-success': (
-    fallback: colors.$green-10,
-    values: (
-      (
-        theme: themes.$white,
-        value: colors.$green-10,
-      ),
-      (
-        theme: themes.$g10,
-        value: colors.$green-10,
-      ),
-      (
-        theme: themes.$g90,
-        value: $layer,
-      ),
-      (
-        theme: themes.$g100,
-        value: $layer,
-      ),
+) !default;
+
+$notification-background-success: (
+  fallback: colors.$green-10,
+  values: (
+    (
+      theme: themes.$white,
+      value: colors.$green-10,
+    ),
+    (
+      theme: themes.$g10,
+      value: colors.$green-10,
+    ),
+    (
+      theme: themes.$g90,
+      value: theme.$layer,
+    ),
+    (
+      theme: themes.$g100,
+      value: theme.$layer,
     ),
   ),
-  'notification-background-info': (
-    fallback: colors.$blue-10,
-    values: (
-      (
-        theme: themes.$white,
-        value: colors.$blue-10,
-      ),
-      (
-        theme: themes.$g10,
-        value: colors.$blue-10,
-      ),
-      (
-        theme: themes.$g90,
-        value: $layer,
-      ),
-      (
-        theme: themes.$g100,
-        value: $layer,
-      ),
+) !default;
+
+$notification-background-info: (
+  fallback: colors.$blue-10,
+  values: (
+    (
+      theme: themes.$white,
+      value: colors.$blue-10,
+    ),
+    (
+      theme: themes.$g10,
+      value: colors.$blue-10,
+    ),
+    (
+      theme: themes.$g90,
+      value: theme.$layer,
+    ),
+    (
+      theme: themes.$g100,
+      value: theme.$layer,
     ),
   ),
-  'notification-background-warning': (
-    fallback: mix(colors.$yellow-30, colors.$white-0, 15%),
-    values: (
-      (
-        theme: themes.$white,
-        value: mix(colors.$yellow-30, colors.$white-0, 15%),
-      ),
-      (
-        theme: themes.$g10,
-        value: mix(colors.$yellow-30, colors.$white-0, 15%),
-      ),
-      (
-        theme: themes.$g90,
-        value: $layer,
-      ),
-      (
-        theme: themes.$g100,
-        value: $layer,
-      ),
+) !default;
+
+$notification-background-warning: (
+  fallback: color.mix(colors.$yellow-30, colors.$white-0, 15%),
+  values: (
+    (
+      theme: themes.$white,
+      value: color.mix(colors.$yellow-30, colors.$white-0, 15%),
+    ),
+    (
+      theme: themes.$g10,
+      value: color.mix(colors.$yellow-30, colors.$white-0, 15%),
+    ),
+    (
+      theme: themes.$g90,
+      value: theme.$layer,
+    ),
+    (
+      theme: themes.$g100,
+      value: theme.$layer,
     ),
   ),
-  'notification-action-hover': (
-    fallback: colors.$white-0,
-    values: (
-      (
-        theme: themes.$white,
-        value: colors.$white-0,
-      ),
-      (
-        theme: themes.$g10,
-        value: colors.$white-0,
-      ),
-      (
-        theme: themes.$g90,
-        value: $layer-hover,
-      ),
-      (
-        theme: themes.$g100,
-        value: $layer-hover,
-      ),
+) !default;
+
+$notification-action-hover: (
+  fallback: colors.$white-0,
+  values: (
+    (
+      theme: themes.$white,
+      value: colors.$white-0,
+    ),
+    (
+      theme: themes.$g10,
+      value: colors.$white-0,
+    ),
+    (
+      theme: themes.$g90,
+      value: theme.$layer-hover,
+    ),
+    (
+      theme: themes.$g100,
+      value: theme.$layer-hover,
     ),
   ),
+) !default;
+
+$notification-action-tertiary-inverse: (
+  fallback: map.get(button-tokens.$button-tokens, button-tertiary, fallback),
+  values:
+    component-tokens.get-inverse-theme-values(
+      map.get(button-tokens.$button-tokens, button-tertiary)
+    ),
+) !default;
+
+$notification-action-tertiary-inverse-active: (
+  fallback:
+    map.get(button-tokens.$button-tokens, button-tertiary-active, fallback),
+  values:
+    component-tokens.get-inverse-theme-values(
+      map.get(button-tokens.$button-tokens, button-tertiary-active)
+    ),
+) !default;
+
+$notification-action-tertiary-inverse-hover: (
+  fallback:
+    map.get(button-tokens.$button-tokens, button-tertiary-hover, fallback),
+  values:
+    component-tokens.get-inverse-theme-values(
+      map.get(button-tokens.$button-tokens, button-tertiary-hover)
+    ),
+) !default;
+
+$notification-action-tertiary-inverse-text: (
+  fallback: map.get(themes.$white, text-inverse),
+  values: (
+    (
+      theme: themes.$white,
+      value: map.get(themes.$g100, text-inverse),
+    ),
+    (
+      theme: themes.$g10,
+      value: map.get(themes.$g90, text-inverse),
+    ),
+    (
+      theme: themes.$g90,
+      value: map.get(themes.$g10, text-inverse),
+    ),
+    (
+      theme: themes.$g100,
+      value: map.get(themes.$white, text-inverse),
+    ),
+  ),
+) !default;
+
+$notification-action-tertiary-inverse-text-on-color-disabled: (
+  fallback: map.get(themes.$white, text-on-color-disabled),
+  values: (
+    (
+      theme: themes.$white,
+      value: map.get(themes.$g100, text-on-color-disabled),
+    ),
+    (
+      theme: themes.$g10,
+      value: map.get(themes.$g90, text-on-color-disabled),
+    ),
+    (
+      theme: themes.$g90,
+      value: map.get(themes.$g10, text-on-color-disabled),
+    ),
+    (
+      theme: themes.$g100,
+      value: map.get(themes.$white, text-on-color-disabled),
+    ),
+  ),
+) !default;
+
+$notification-tokens: (
+  notification-background-error: $notification-background-error,
+  notification-background-success: $notification-background-success,
+  notification-background-info: $notification-background-info,
+  notification-background-warning: $notification-background-warning,
+  notification-action-hover: $notification-action-hover,
+  notification-action-tertiary-inverse: $notification-action-tertiary-inverse,
+  notification-action-tertiary-inverse-active:
+    $notification-action-tertiary-inverse-active,
+  notification-action-tertiary-inverse-hover:
+    $notification-action-tertiary-inverse-hover,
+  notification-action-tertiary-inverse-text:
+    $notification-action-tertiary-inverse-text,
+  notification-action-tertiary-inverse-text-on-color-disabled:
+    $notification-action-tertiary-inverse-text-on-color-disabled,
+);
+
+$notification-background-error: component-tokens.get-var(
+  $notification-background-error,
+  'notification-background-error'
+);
+
+$notification-background-success: component-tokens.get-var(
+  $notification-background-success,
+  'notification-background-success'
+);
+
+$notification-background-info: component-tokens.get-var(
+  $notification-background-info,
+  'notification-background-info'
+);
+
+$notification-background-warning: component-tokens.get-var(
+  $notification-background-warning,
+  'notification-background-warning'
+);
+
+$notification-action-hover: component-tokens.get-var(
+  $notification-action-hover,
+  'notification-action-hover'
+);
+
+$notification-action-tertiary-inverse: component-tokens.get-var(
+  $notification-action-tertiary-inverse,
+  'notification-action-tertiary-inverse'
 );
 
-$white: component-tokens.get-tokens($-tokens, themes.$white);
-$g10: component-tokens.get-tokens($-tokens, themes.$g10);
-$g90: component-tokens.get-tokens($-tokens, themes.$g90);
-$g100: component-tokens.get-tokens($-tokens, themes.$g100);
+$notification-action-tertiary-inverse-active: component-tokens.get-var(
+  $notification-action-tertiary-inverse-active,
+  'notification-action-tertiary-inverse-active'
+);
+
+$notification-action-tertiary-inverse-hover: component-tokens.get-var(
+  $notification-action-tertiary-inverse-hover,
+  'notification-action-tertiary-inverse-hover'
+);
+
+$notification-action-tertiary-inverse-text: component-tokens.get-var(
+  $notification-action-tertiary-inverse-text,
+  'notification-action-tertiary-inverse-text'
+);
+
+$notification-action-tertiary-inverse-text-on-color-disabled: component-tokens.get-var(
+  $notification-action-tertiary-inverse-text-on-color-disabled,
+  'notification-action-tertiary-inverse-text-on-color-disabled'
+);

package/styles/vendor/carbon-components/src/globals/scss/vendor/@carbon/styles/scss/components/number-input/_number-input.scss

@@ -16,6 +16,7 @@
 @use '../../utilities/high-contrast-mode' as *;
 @use '../../utilities/focus-outline' as *;
 @use '../../utilities/convert' as *;
+@use '../../utilities/z-index' as *;
 
 /// Number input styles
 /// @access public
@@ -31,7 +32,7 @@
   }
 
   .#{$prefix}--number input[type='number'] {
-    @include type-style('body-short-01');
+    @include type-style('code-01');
     @include focus-outline('reset');
 
     display: inline-flex;
@@ -78,8 +79,6 @@
     }
   }
 
-  // TODO V11: Remove xl selector
-  .#{$prefix}--number--xl.#{$prefix}--number input[type='number'],
   .#{$prefix}--number--lg.#{$prefix}--number input[type='number'] {
     padding-right: rem(144px);
   }
@@ -88,10 +87,9 @@
     padding-right: rem(112px);
   }
 
-  .#{$prefix}--number input[type='number']:disabled,
-  .#{$prefix}--number--readonly input[type='number'] {
+  .#{$prefix}--number input[type='number']:disabled {
     border-bottom-color: transparent;
-    background-color: $field-disabled;
+    background-color: $field;
     color: $text-disabled;
     cursor: not-allowed;
   }
@@ -280,7 +278,7 @@
     .#{$prefix}--number__invalid
     + .#{$prefix}--number__controls
     .#{$prefix}--number__rule-divider:first-of-type {
-    background-color: $decorative-01;
+    background-color: $border-subtle-02;
   }
 
   .#{$prefix}--number
@@ -301,18 +299,12 @@
     background-color: transparent;
   }
 
-  .#{$prefix}--number--readonly .#{$prefix}--number__control-btn {
-    display: none;
-  }
-
   .#{$prefix}--number__invalid {
     position: absolute;
     right: rem(96px);
     fill: $support-error;
   }
 
-  // TODO V11: Remove xl selector
-  .#{$prefix}--number--xl .#{$prefix}--number__invalid,
   .#{$prefix}--number--lg .#{$prefix}--number__invalid {
     right: rem(112px);
   }
@@ -326,10 +318,6 @@
     right: rem(80px);
   }
 
-  // TODO V11: Remove xl selector
-  .#{$prefix}--number--xl
-    .#{$prefix}--number__invalid
-    + .#{$prefix}--number__rule-divider,
   .#{$prefix}--number--lg
     .#{$prefix}--number__invalid
     + .#{$prefix}--number__rule-divider {
@@ -368,10 +356,7 @@
   }
 
   // V11: Possibly deprecate
-  .#{$prefix}--number--light input[type='number']:disabled,
-  .#{$prefix}--number--light
-    .#{$prefix}--number--readonly
-    input[type='number'] {
+  .#{$prefix}--number--light input[type='number']:disabled {
     background-color: $field-02;
   }
 
@@ -381,33 +366,31 @@
     background-color: $field-02;
   }
 
-  // V11: Possibly deprecate
-  .#{$prefix}--number--light .#{$prefix}--number__control-btn:hover,
-  .#{$prefix}--number--light .#{$prefix}--number__control-btn:hover::before,
-  .#{$prefix}--number--light .#{$prefix}--number__control-btn:hover::after {
-    background-color: $hover-light-ui;
-  }
-
   .#{$prefix}--number--light .#{$prefix}--number__control-btn:focus::before,
   .#{$prefix}--number--light .#{$prefix}--number__control-btn:focus::after {
     background-color: transparent;
   }
 
+  // V11: Possibly deprecate
+  // We include `:not(:focus)` here because the pseudo elements will overlap the
+  // focus outline on the button if we set their background-color on focus
+  .#{$prefix}--number--light .#{$prefix}--number__control-btn:hover,
+  .#{$prefix}--number--light
+    .#{$prefix}--number__control-btn:not(:focus):hover::before,
+  .#{$prefix}--number--light
+    .#{$prefix}--number__control-btn:not(:focus):hover::after {
+    background-color: $layer-hover-02;
+  }
+
   // Size Variant styles
-  // TODO V11: Remove xl selector
-  .#{$prefix}--number--xl input[type='number'],
   .#{$prefix}--number--lg input[type='number'] {
     height: rem(48px);
   }
 
-  // TODO V11: Remove xl selector
-  .#{$prefix}--number--xl .#{$prefix}--number__controls,
   .#{$prefix}--number--lg .#{$prefix}--number__controls {
     width: rem(96px);
   }
 
-  // TODO V11: Remove xl selector
-  .#{$prefix}--number--xl .#{$prefix}--number__control-btn,
   .#{$prefix}--number--lg .#{$prefix}--number__control-btn {
     width: rem(48px);
 
@@ -437,7 +420,9 @@
   }
 
   //No label positioning adjustment
-  .#{$prefix}--number--nolabel .bx--label + .bx--form__helper-text {
+  .#{$prefix}--number--nolabel
+    .#{$prefix}--label
+    + .#{$prefix}--form__helper-text {
     margin-top: 0;
   }
 
@@ -450,6 +435,20 @@
     right: rem(16px);
   }
 
+  // Readonly
+  .#{$prefix}--number--readonly input[type='number'] {
+    background: transparent;
+  }
+
+  .#{$prefix}--number--readonly .#{$prefix}--number__controls {
+    display: none;
+  }
+
+  .#{$prefix}--number__readonly-icon {
+    position: absolute;
+    right: rem(16px);
+  }
+
   // Skeleton State
   .#{$prefix}--number.#{$prefix}--skeleton {
     @include skeleton;

package/styles/vendor/carbon-components/src/globals/scss/vendor/@carbon/styles/scss/components/overflow-menu/_overflow-menu.scss

@@ -16,6 +16,7 @@
 @use '../../utilities/focus-outline' as *;
 @use '../../utilities/high-contrast-mode' as *;
 @use '../../utilities/convert' as *;
+@use '../../utilities/z-index' as *;
 
 /// Overflow menu styles
 /// @access public
@@ -51,8 +52,6 @@
     height: rem(32px);
   }
 
-  // TODO V11: Remove xl selector
-  .#{$prefix}--overflow-menu--xl,
   .#{$prefix}--overflow-menu--lg {
     width: rem(48px);
     height: rem(48px);
@@ -79,7 +78,7 @@
   .#{$prefix}--overflow-menu--light.#{$prefix}--overflow-menu--open,
   .#{$prefix}--overflow-menu--light.#{$prefix}--overflow-menu--open
     .#{$prefix}--overflow-menu__trigger {
-    background-color: $field-02;
+    background-color: $layer;
   }
 
   .#{$prefix}--overflow-menu__icon {
@@ -110,6 +109,10 @@
       content: '';
       transition: background-color $duration-fast-02
         motion(entrance, productive);
+
+      @media screen and (prefers-reduced-motion: reduce) {
+        transition: none;
+      }
     }
   }
 
@@ -118,17 +121,18 @@
   }
 
   .#{$prefix}--overflow-menu-options--light {
-    background-color: $field-02;
+    background-color: $layer;
+
     &::after {
-      background-color: $field-02;
+      background-color: $layer;
     }
   }
 
   .#{$prefix}--overflow-menu.#{$prefix}--overflow-menu--light.#{$prefix}--overflow-menu--open:hover {
-    background-color: $field-02;
+    background-color: $layer;
   }
 
-  .#{$prefix}--overflow-menu-options[data-floating-menu-direction='bottom']::after {
+  .#{$prefix}--overflow-menu-options[data-floating-menu-direction='bottom']:not(.#{$prefix}--breadcrumb-menu-options)::after {
     top: rem(-3px);
     left: 0;
     width: rem(40px);
@@ -161,19 +165,19 @@
     &[data-floating-menu-direction='top']::after {
       width: rem(32px);
     }
+
     &[data-floating-menu-direction='left']::after,
     &[data-floating-menu-direction='right']::after {
       height: rem(32px);
     }
   }
 
-  // TODO V11: Remove xl selector
-  .#{$prefix}--overflow-menu-options--xl.#{$prefix}--overflow-menu-options,
   .#{$prefix}--overflow-menu-options--lg.#{$prefix}--overflow-menu-options {
     &[data-floating-menu-direction='bottom']::after,
     &[data-floating-menu-direction='top']::after {
       width: rem(48px);
     }
+
     &[data-floating-menu-direction='left']::after,
     &[data-floating-menu-direction='right']::after {
       height: rem(48px);
@@ -217,9 +221,6 @@
     height: rem(32px);
   }
 
-  // TODO V11: Remove xl selector
-  .#{$prefix}--overflow-menu-options--xl
-    .#{$prefix}--overflow-menu-options__option,
   .#{$prefix}--overflow-menu-options--lg
     .#{$prefix}--overflow-menu-options__option {
     height: rem(48px);
@@ -230,7 +231,7 @@
   }
 
   .#{$prefix}--overflow-menu--light .#{$prefix}--overflow-menu--divider {
-    border-top: 1px solid $decorative-01;
+    border-top: 1px solid $border-subtle;
   }
 
   a.#{$prefix}--overflow-menu-options__btn::before {
@@ -241,7 +242,7 @@
   }
 
   .#{$prefix}--overflow-menu-options__btn {
-    @include type-style('body-short-01');
+    @include type-style('body-compact-01');
     @include focus-outline('reset');
 
     display: inline-flex;
@@ -252,7 +253,7 @@
     padding: 0 $spacing-05;
     border: none;
     background-color: transparent;
-    color: $text-02;
+    color: $text-secondary;
     cursor: pointer;
     font-family: inherit;
     font-weight: 400;
@@ -262,7 +263,7 @@
       color $duration-fast-02 motion(entrance, productive);
 
     &:hover {
-      color: $text-01;
+      color: $text-primary;
     }
 
     &:focus {

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

@@ -6,6 +6,9 @@
 //
 
 @forward 'pagination';
+@forward 'unstable_pagination';
 @use 'pagination';
+@use 'unstable_pagination';
 
 @include pagination.pagination;
+@include unstable_pagination.unstable_pagination;