@carbon/ibm-products 2.54.0-canary.6 → 2.54.0-canary.60

package/scss/components/InlineTip/_inline-tip.scss

@@ -15,8 +15,8 @@
  * instead of many individual rules.
  */
 
-/* stylelint-disable carbon/layout-token-use */
-/* stylelint-disable carbon/theme-token-use */
+/* stylelint-disable carbon/layout-use */
+/* stylelint-disable carbon/theme-use */
 /* stylelint-disable declaration-no-important */
 /* stylelint-disable function-no-unknown */
 /* stylelint-disable max-nesting-depth */
@@ -177,7 +177,7 @@ $purple: #7f3ae7;
 }
 
 .#{$block-class} .#{$block-class}__close-icon {
-  padding: to-rem(6px) 0 0 0;
+  padding: to-rem(6px) 0 0;
   block-size: $spacing-07;
   color: $white-0;
   inline-size: $spacing-07;
@@ -221,7 +221,7 @@ $purple: #7f3ae7;
   // Repeating here.
   svg {
     position: absolute;
-    right: 1rem;
+    right: $spacing-05;
     width: 1rem;
     height: 1rem;
     flex-shrink: 0;

package/scss/components/InterstitialScreen/_interstitial-screen.scss

@@ -87,7 +87,7 @@ $one-grid-column: calc(100% / 16);
   &--container {
     min-width: 47rem;
     max-width: 82rem;
-    margin: calc($spacing-10 * 2) auto; // stylelint-disable-line carbon/layout-token-use
+    margin: calc($spacing-10 * 2) auto; // stylelint-disable-line carbon/layout-use
     background-color: $background;
   }
 
@@ -220,17 +220,17 @@ $one-grid-column: calc(100% / 16);
       height: $spacing-09;
       padding-left: $spacing-05;
       border-bottom: 1px solid $border-subtle-01;
-      /* stylelint-disable-next-line carbon/theme-token-use */
+      /* stylelint-disable-next-line carbon/theme-use */
       background-color: $gray-100;
-      /* stylelint-disable-next-line carbon/theme-token-use */
+      /* stylelint-disable-next-line carbon/theme-use */
       color: $gray-10;
-      /* stylelint-disable-next-line carbon/type-token-use */
+      /* stylelint-disable-next-line carbon/type-use */
       font-weight: normal !important; // overrides type style above
-      /* stylelint-disable-next-line carbon/type-token-use */
+      /* stylelint-disable-next-line carbon/type-use */
       line-height: $spacing-09 !important;
 
       b {
-        /* stylelint-disable-next-line carbon/type-token-use */
+        /* stylelint-disable-next-line carbon/type-use */
         font-weight: 600;
       }
     }

package/scss/components/NonLinearReading/_non-linear-reading.scss

@@ -5,7 +5,7 @@
 // LICENSE file in the root directory of this source tree.
 //
 
-/* stylelint-disable carbon/layout-token-use */
+/* stylelint-disable carbon/layout-use */
 /* stylelint-disable function-no-unknown */
 
 // Standard imports.
@@ -70,7 +70,7 @@ $block-class: #{c4p-settings.$pkg-prefix}--non-linear-reading;
 }
 // The "up" chevron
 .#{$block-class} .#{$block-class}__keyword svg {
-  margin: to-rem(1px) 0 0 0;
+  margin: to-rem(1px) 0 0;
   vertical-align: text-top;
 }
 

package/scss/components/NotificationsPanel/_notifications-panel.scss

@@ -23,7 +23,7 @@ $block-class: #{c4p-settings.$pkg-prefix}--notifications-panel;
 @keyframes fade-in {
   0% {
     opacity: 0;
-    // stylelint-disable-next-line carbon/layout-token-use
+    // stylelint-disable-next-line carbon/layout-use
     transform: translateY(-38.5rem); // the height of the notification panel
   }
 
@@ -41,7 +41,7 @@ $block-class: #{c4p-settings.$pkg-prefix}--notifications-panel;
 
   100% {
     opacity: 0;
-    // stylelint-disable-next-line carbon/layout-token-use
+    // stylelint-disable-next-line carbon/layout-use
     transform: translateY(-38.5rem); // the height of the notification panel
   }
 }
@@ -93,7 +93,7 @@ $block-class: #{c4p-settings.$pkg-prefix}--notifications-panel;
 
     position: sticky;
     z-index: 2;
-    // stylelint-disable-next-line carbon/layout-token-use
+    // stylelint-disable-next-line carbon/layout-use
     top: 4.8125rem;
     padding: $spacing-03 $spacing-05;
     background-color: $layer-01;

package/scss/components/OptionsTile/_options-tile.scss

@@ -121,12 +121,12 @@ $block-class: #{c4p-settings.$pkg-prefix}--options-tile;
 }
 
 .#{$block-class}__summary--warn svg path[fill='none'] {
-  /* stylelint-disable-next-line carbon/theme-token-use */
+  /* stylelint-disable-next-line carbon/theme-use */
   fill: $black-100;
 }
 
 .#{$block-class}__summary--warn svg path[fill='none'] {
-  /* stylelint-disable-next-line carbon/theme-token-use */
+  /* stylelint-disable-next-line carbon/theme-use */
   fill: $black-100;
 }
 
@@ -134,7 +134,7 @@ $block-class: #{c4p-settings.$pkg-prefix}--options-tile;
   overflow: hidden;
   height: max-content;
   // spacing-05 + toggle width
-  // stylelint-disable-next-line carbon/layout-token-use
+  // stylelint-disable-next-line carbon/layout-use
   padding-right: calc(#{$spacing-05} + 2rem);
   text-overflow: ellipsis;
   white-space: nowrap;
@@ -149,7 +149,7 @@ $block-class: #{c4p-settings.$pkg-prefix}--options-tile;
 .#{$block-class}__content {
   padding-right: $spacing-05;
   // spacing-05 + chevron size + spacing-05
-  // stylelint-disable-next-line carbon/layout-token-use
+  // stylelint-disable-next-line carbon/layout-use
   padding-left: calc(#{$spacing-05} * 2 + 1rem);
 }
 
@@ -208,14 +208,12 @@ $block-class: #{c4p-settings.$pkg-prefix}--options-tile;
 
 .#{$block-class}--lg .#{$block-class}__toggle {
   // "top" shouldn't be spacing token as it depends on the toggle size
-  // stylelint-disable-next-line carbon/layout-token-use
-  top: 1rem;
+  top: $spacing-05;
 }
 
 .#{$block-class}--xl .#{$block-class}__toggle {
   // "top" shouldn't be spacing token as it depends on the toggle size
-  // stylelint-disable-next-line carbon/layout-token-use
-  top: 1.5rem;
+  top: $spacing-06;
 }
 
 .#{$block-class}--lg .#{$block-class}__summary {

package/scss/components/PageHeader/_page-header.scss

@@ -38,27 +38,27 @@ $right-section-alt-width: 100% - $left-section-alt-width;
 
 @keyframes background-appear {
   from {
-    /* stylelint-disable-next-line carbon/theme-token-use */
+    /* stylelint-disable-next-line carbon/theme-use */
     background-color: var(--from-color);
   }
 
   to {
-    /* stylelint-disable-next-line carbon/theme-token-use */
+    /* stylelint-disable-next-line carbon/theme-use */
     background-color: var(--to-color);
   }
 }
 @keyframes background-and-shadow-appear {
   from {
-    /* stylelint-disable-next-line carbon/theme-token-use */
+    /* stylelint-disable-next-line carbon/theme-use */
     background-color: var(--from-color);
-    /* stylelint-disable-next-line carbon/theme-token-use */
+    /* stylelint-disable-next-line carbon/theme-use */
     box-shadow: 0 1px 0 var(--from-color);
   }
 
   to {
-    /* stylelint-disable-next-line carbon/theme-token-use */
+    /* stylelint-disable-next-line carbon/theme-use */
     background-color: var(--to-color);
-    /* stylelint-disable-next-line carbon/theme-token-use */
+    /* stylelint-disable-next-line carbon/theme-use */
     box-shadow: 0 1px 0 var(--to-color-shadow);
   }
 }
@@ -69,11 +69,11 @@ $right-section-alt-width: 100% - $left-section-alt-width;
   $to-color: $layer-01,
   $to-color-shadow: $layer-accent-01
 ) {
-  // stylelint-disable-next-line carbon/theme-token-use
+  // stylelint-disable-next-line carbon/theme-use
   --from-color: #{$from-color};
-  // stylelint-disable-next-line carbon/theme-token-use
+  // stylelint-disable-next-line carbon/theme-use
   --to-color: #{$to-color};
-  // stylelint-disable-next-line carbon/theme-token-use
+  // stylelint-disable-next-line carbon/theme-use
   --to-color-shadow: #{$to-color-shadow};
 
   position: absolute;
@@ -107,7 +107,7 @@ $right-section-alt-width: 100% - $left-section-alt-width;
     /* z-index used to raise above any position relative content as per Carbon header */
     /* dropped  1 below Carbon header so as not to overlay the side panel */
     z-index: $z-index-header-minus;
-    /* stylelint-disable-next-line carbon/layout-token-use */
+    /* stylelint-disable-next-line carbon/layout-use */
     top: var(--#{$block-class}--header-top);
     display: inline-block; /* cause top/bottom margin to reserve space */
     width: 100%;
@@ -417,7 +417,7 @@ $right-section-alt-width: 100% - $left-section-alt-width;
 
   .#{$block-class}__breadcrumb-row--has-breadcrumbs
     + .#{$block-class}__title-row--sticky {
-    // stylelint-disable-next-line carbon/layout-token-use
+    // stylelint-disable-next-line carbon/layout-use
     top: calc(
       var(--#{$block-class}--breadcrumb-top) - var(--title-row-margin-top)
     );
@@ -473,8 +473,10 @@ $right-section-alt-width: 100% - $left-section-alt-width;
 
   .#{$block-class}__title-icon {
     margin-right: $spacing-04;
-    // stylelint-disable-next-line carbon/layout-token-use
-    transform: translateY(-2px); // positional tweak requested by design review
+    // stylelint-disable-next-line carbon/layout-use
+    transform: translateY(
+      -$spacing-01
+    ); // positional tweak requested by design review
 
     vertical-align: middle;
   }
@@ -667,3 +669,8 @@ $right-section-alt-width: 100% - $left-section-alt-width;
 .#{$block-class}__button-set-menu-options.#{$carbon-prefix}--overflow-menu-options {
   z-index: $z-index-header-minus;
 }
+
+.#{$block-class}__button-set-menu-options
+  > button.#{$carbon-prefix}--menu-button__trigger {
+  min-inline-size: 0;
+}

package/scss/components/ProductiveCard/_productive-card.scss

@@ -52,9 +52,9 @@ $block-class: #{c4p-settings.$pkg-prefix}--card;
 
   .#{$block-class}__actions-header-ghost-button {
     min-height: $spacing-07;
-    // stylelint-disable-next-line carbon/layout-token-use
+    // stylelint-disable-next-line carbon/layout-use
     padding-right: calc($spacing-01 + $spacing-03);
-    // stylelint-disable-next-line carbon/layout-token-use
+    // stylelint-disable-next-line carbon/layout-use
     padding-left: calc($spacing-01 + $spacing-03);
 
     /* stylelint-disable-next-line max-nesting-depth */

package/scss/components/SidePanel/_side-panel.scss

@@ -5,6 +5,9 @@
 // LICENSE file in the root directory of this source tree.
 //
 
+@use 'sass:list';
+@use 'sass:map';
+
 // Other Carbon settings.
 @use '@carbon/styles/scss/theme' as *;
 @use '@carbon/styles/scss/spacing' as *;
@@ -22,12 +25,11 @@
 // SidePanel uses the following IBM Products components:
 // ActionSet
 @use '../ActionSet/action-set';
-@use 'sass:list';
 
 $block-class: #{c4p-settings.$pkg-prefix}--side-panel;
 $action-set-block-class: #{c4p-settings.$pkg-prefix}--action-set;
 
-@mixin setPanelSize($size: map-get($side-panel-sizes, md)) {
+@mixin setPanelSize($size: map.get($side-panel-sizes, md)) {
   /* any value is single value list */
   width: list.nth($size, 1);
   @if list.length($size) > 1 {
@@ -51,7 +53,7 @@ $action-set-block-class: #{c4p-settings.$pkg-prefix}--action-set;
 @mixin setCommonTitleStyles() {
   display: -webkit-box;
   overflow: hidden;
-  /* stylelint-disable-next-line carbon/layout-token-use -- custom css property set below */
+  /* stylelint-disable-next-line carbon/layout-use -- custom css property set below */
   padding-right: var(--#{$block-class}--title-padding-right);
   -webkit-box-orient: vertical;
   -webkit-line-clamp: 2;
@@ -121,7 +123,7 @@ $action-set-block-class: #{c4p-settings.$pkg-prefix}--action-set;
 
     position: sticky;
     z-index: 4;
-    /* stylelint-disable-next-line carbon/layout-token-use */
+    /* stylelint-disable-next-line carbon/layout-use */
     top: calc(-1px * var(--#{$block-class}--scroll-animation-distance));
     min-height: $spacing-08;
     padding: $spacing-05;
@@ -217,7 +219,7 @@ $action-set-block-class: #{c4p-settings.$pkg-prefix}--action-set;
   .#{$block-class}__title {
     position: sticky;
     z-index: 4;
-    /* stylelint-disable-next-line carbon/layout-token-use */
+    /* stylelint-disable-next-line carbon/layout-use */
     top: var(--#{$block-class}--title-stop);
 
     /* border-bottom used instead of padding which wrapped text shows through */
@@ -234,7 +236,7 @@ $action-set-block-class: #{c4p-settings.$pkg-prefix}--action-set;
   }
 
   .#{$block-class}__title--no-label .#{$block-class}__title-text {
-    /* stylelint-disable-next-line carbon/layout-token-use */
+    /* stylelint-disable-next-line carbon/layout-use */
     transform: translateY(
       calc(
         -1 * #{$spacing-05} * var(--#{$block-class}--scroll-animation-progress)
@@ -261,13 +263,12 @@ $action-set-block-class: #{c4p-settings.$pkg-prefix}--action-set;
     @include setCommonTitleStyles();
 
     position: absolute;
-    /* stylelint-disable-next-line carbon/layout-token-use */
     top: 0;
     opacity: var(--#{$block-class}--scroll-animation-progress);
   }
 
   .#{$block-class}__title--no-label .#{$block-class}__collapsed-title-text {
-    /* stylelint-disable-next-line carbon/layout-token-use */
+    /* stylelint-disable-next-line carbon/layout-use */
     transform: translateY(
       calc(
         #{$spacing-05} * (1 - var(--#{$block-class}--scroll-animation-progress))
@@ -409,7 +410,7 @@ $action-set-block-class: #{c4p-settings.$pkg-prefix}--action-set;
   }
   &.#{$block-class}.#{$block-class}--xs
     .#{$block-class}__actions-container.#{$action-set-block-class}--sm {
-    @include setPanelSize(map-get($side-panel-sizes, xs));
+    @include setPanelSize(map.get($side-panel-sizes, xs));
   }
 }
 
@@ -453,7 +454,7 @@ $action-set-block-class: #{c4p-settings.$pkg-prefix}--action-set;
   height: 1px;
   padding: 0;
   border: 0;
-  // stylelint-disable-next-line carbon/layout-token-use
+  // stylelint-disable-next-line carbon/layout-use
   margin: -1px;
   clip: rect(0, 0, 0, 0);
   visibility: inherit;
@@ -471,6 +472,5 @@ $action-set-block-class: #{c4p-settings.$pkg-prefix}--action-set;
 
 .#{$block-class}--has-slug + .#{$block-class}__overlay,
 .#{$block-class}--has-ai-label + .#{$block-class}__overlay {
-  /* stylelint-disable-next-line carbon/theme-token-use */
   background-color: $ai-overlay;
 }

package/scss/components/StatusIcon/_status-icon.scss

@@ -5,6 +5,8 @@
 // LICENSE file in the root directory of this source tree.
 //
 
+@use 'sass:map';
+
 // Standard imports.
 @use '@carbon/react/scss/colors' as *;
 @use '../../global/styles/project-settings' as *;
@@ -74,8 +76,8 @@ $themes: ('light', 'dark');
 $block-class: #{$pkg-prefix}--status-icon;
 
 @function carbon-clr($name, $theme: light) {
-  // stylelint-disable-next-line carbon/theme-token-use
-  $color: map-get(map-get($colors, $name), $theme);
+  // stylelint-disable-next-line carbon/theme-use
+  $color: map.get(map.get($colors, $name), $theme);
   @return $color;
 }
 
@@ -96,7 +98,7 @@ $block-class: #{$pkg-prefix}--status-icon;
 
 .#{$block-class}--light.#{$block-class}--light-minor-warning,
 .#{$block-class}--dark.#{$block-class}--dark-minor-warning {
-  // stylelint-disable-next-line carbon/theme-token-use
+  // stylelint-disable-next-line carbon/theme-use
   fill: $yellow-20;
 }
 
@@ -106,7 +108,7 @@ $block-class: #{$pkg-prefix}--status-icon;
 .#{$block-class}--light.#{$block-class}--light-minor-warning
   path:nth-of-type(1),
 .#{$block-class}--dark.#{$block-class}--dark-minor-warning path:nth-of-type(1) {
-  // stylelint-disable-next-line carbon/theme-token-use
+  // stylelint-disable-next-line carbon/theme-use
   fill: $gray-100;
 }
 
@@ -124,13 +126,13 @@ $block-class: #{$pkg-prefix}--status-icon;
           }
           // stylelint-disable-next-line carbon/motion-duration-use, carbon/motion-easing-use
           animation: rotating 8000ms infinite linear;
-          // stylelint-disable-next-line carbon/theme-token-use
+          // stylelint-disable-next-line carbon/theme-use
           fill: carbon-clr($icon, $theme);
         } @else if $icon == running {
-          // stylelint-disable-next-line carbon/theme-token-use
+          // stylelint-disable-next-line carbon/theme-use
           fill: carbon-clr($icon, $theme);
         } @else {
-          // stylelint-disable-next-line carbon/theme-token-use
+          // stylelint-disable-next-line carbon/theme-use
           fill: carbon-clr($icon, $theme);
           @media (prefers-reduced-motion) {
             .#{$block-class}--#{$theme}.#{$block-class}--#{$theme-key}-in-progress {

package/scss/components/StatusIndicator/_status-indicator.scss

@@ -5,7 +5,7 @@
 // LICENSE file in the root directory of this source tree.
 //
 
-/* stylelint-disable carbon/layout-token-use */
+/* stylelint-disable carbon/layout-use */
 /* stylelint-disable function-no-unknown */
 
 // Standard imports.

package/scss/components/Tearsheet/_tearsheet.scss

@@ -22,7 +22,7 @@
 
 $block-class: #{$pkg-prefix}--tearsheet;
 
-// stylelint-disable-next-line carbon/theme-token-use
+// stylelint-disable-next-line carbon/theme-use
 $motion-duration: $duration-moderate-02;
 
 @include block-wrap($block-class) {
@@ -105,7 +105,7 @@ $motion-duration: $duration-moderate-02;
     // viewport, capped at 500px to set an upper limit on the movement speed
     // For the reason for calc() see https://github.com/sass/sass/issues/2849
     // and https://github.com/sass/node-sass/issues/2815.
-    // stylelint-disable-next-line carbon/layout-token-use
+    // stylelint-disable-next-line carbon/layout-use
     transform: translate3d(0, calc(min(95vh, 500px)), 0);
   }
 
@@ -289,7 +289,7 @@ $motion-duration: $duration-moderate-02;
   &.#{$block-class}--wide.#{$block-class}--has-ai-label
     .#{$block-class}__header.#{$block-class}__header--with-close-icon {
     /* spacing 11 plus additional space for slug/close */
-    /* stylelint-disable-next-line carbon/layout-token-use */
+    /* stylelint-disable-next-line carbon/layout-use */
     padding-inline-end: calc(#{$spacing-11 + $spacing-09});
   }
 
@@ -427,7 +427,6 @@ $motion-duration: $duration-moderate-02;
 
   &.#{$block-class}--has-slug,
   &.#{$block-class}--has-ai-label {
-    /* stylelint-disable-next-line carbon/theme-token-use */
     --overlay-color: #{$ai-overlay};
   }
 
@@ -436,7 +435,8 @@ $motion-duration: $duration-moderate-02;
   &.#{$block-class}--has-ai-label:not(.#{$block-class}--has-close)
     .#{$carbon-prefix}--slug {
     inset-inline-end: 0;
+    /* stylelint-disable-next-line carbon/layout-use */
     margin-block: 6px;
-    margin-inline-end: 1rem;
+    margin-inline-end: $spacing-05;
   }
 }

package/scss/components/UserAvatar/_user-avatar.scss

@@ -5,6 +5,8 @@
 // LICENSE file in the root directory of this source tree.
 //
 
+@use 'sass:map';
+
 // Standard imports.
 @use '../../global/styles/project-settings' as *;
 @use '../../global/styles/mixins';
@@ -34,7 +36,7 @@ $sizes: (
 );
 
 @mixin size($size) {
-  $_size: map-get($sizes, $size);
+  $_size: map.get($sizes, $size);
 
   width: $_size;
   height: $_size;
@@ -60,7 +62,7 @@ $sizes: (
 
 .#{$block-class}__tooltip {
   &:focus-within .#{$block-class} {
-    // stylelint-disable-next-line carbon/theme-token-use
+    // stylelint-disable-next-line carbon/theme-use
     outline: 2px solid $focus;
     outline-offset: 1px;
   }
@@ -72,7 +74,7 @@ $sizes: (
 }
 
 @mixin setBgColor($color) {
-  // stylelint-disable-next-line carbon/theme-token-use
+  // stylelint-disable-next-line carbon/theme-use
   background-color: $color;
 }
 

package/scss/components/UserProfileImage/_user-profile-image.scss

@@ -5,6 +5,8 @@
 // LICENSE file in the root directory of this source tree.
 //
 
+@use 'sass:map';
+
 // Standard imports.
 @use '@carbon/styles/scss/theme' as *;
 @use '@carbon/styles/scss/spacing' as *;
@@ -24,7 +26,7 @@ $sizes: (
 );
 
 @mixin size($size) {
-  $_size: map-get($sizes, $size);
+  $_size: map.get($sizes, $size);
 
   width: $_size;
   height: $_size;
@@ -45,9 +47,9 @@ $themes: (
 $theme-keys: map-keys($themes);
 
 @function carbon-get-background-color($color, $key, $contrast-key) {
-  @return map-get(
+  @return map.get(
     $carbon-colors,
-    #{$color}#{map-get(map-get($themes, $key), #{$contrast-key}-contrast)}
+    #{$color}#{map.get(map.get($themes, $key), #{$contrast-key}-contrast)}
   );
 }
 
@@ -58,7 +60,7 @@ $theme-keys: map-keys($themes);
   @each $color in $base-colors {
     @each $contrast-key in $theme-keys {
       .#{$block-class}--#{$key}.#{$block-class}--#{$contrast-key}-#{$color} {
-        // stylelint-disable-next-line carbon/theme-token-use
+        // stylelint-disable-next-line carbon/theme-use
         background-color: carbon-get-background-color(
           $color,
           $key,

package/scss/components/WebTerminal/_web-terminal.scss

@@ -18,7 +18,7 @@ $block-class: #{$pkg-prefix}--web-terminal;
 @keyframes web-terminal-entrance {
   from {
     opacity: 0;
-    // stylelint-disable-next-line carbon/layout-token-use
+    // stylelint-disable-next-line carbon/layout-use
     transform: translateX(#{$web-terminal-width});
   }
 
@@ -36,7 +36,7 @@ $block-class: #{$pkg-prefix}--web-terminal;
 
   to {
     opacity: 0;
-    // stylelint-disable-next-line carbon/layout-token-use
+    // stylelint-disable-next-line carbon/layout-use
     transform: translateX(#{$web-terminal-width});
   }
 }

package/scss/components/_index-released-only.scss

@@ -39,3 +39,4 @@
 @use './Tearsheet';
 @use './UserProfileImage';
 @use './WebTerminal';
+@use './UserAvatar';