@carbon/ibm-products-styles 2.55.0-rc.0 → 2.56.0-rc.0

package/scss/components/ConditionBuilder/styles/_conditionBuilderItem.scss

@@ -1,3 +1,4 @@
+// stylelint-disable carbon/theme-use, declaration-empty-line-before
 /**
  * Copyright IBM Corp. 2024
  *
@@ -8,17 +9,17 @@
 @use 'sass:list';
 @use 'sass:math';
 @use 'sass:string';
-@use '@carbon/react/scss/theme' as *;
+@use '@carbon/styles/scss/theme' as *;
 @use '../../../global/styles/project-settings' as c4p-settings;
 @use '@carbon/styles/scss/type';
-@use '@carbon/react/scss/spacing' as *;
-@use '@carbon/react/scss/utilities';
-@use '@carbon/react/scss/motion' as *;
-@use '@carbon/react/scss/utilities/focus-outline';
-@use '@carbon/styles/scss/components/tag';
+@use '@carbon/styles/scss/spacing' as *;
+@use '@carbon/styles/scss/utilities';
+@use '@carbon/styles/scss/motion' as *;
+@use '@carbon/styles/scss/utilities/focus-outline';
+@use '@carbon/styles/scss/components/tag/tokens' as *;
 
 @use '@carbon/styles/scss/type' as *;
-@use '@carbon/react/scss/colors' as *;
+@use '@carbon/styles/scss/colors' as *;
 
 $block-class: #{c4p-settings.$pkg-prefix}--condition-builder;
 
@@ -37,9 +38,9 @@ $block-class: #{c4p-settings.$pkg-prefix}--condition-builder;
 
 .#{$block-class}__popover-content-wrapper {
   overflow: auto;
-  min-width: $spacing-07 + $spacing-13;
-  max-width: $spacing-13 + $spacing-13;
-  max-height: $spacing-13 + $spacing-13 + $spacing-07;
+  max-block-size: $spacing-13 + $spacing-13 + $spacing-07;
+  max-inline-size: $spacing-13 + $spacing-13;
+  min-inline-size: $spacing-07 + $spacing-13;
 }
 
 .#{$block-class}__item__title {
@@ -55,8 +56,8 @@ $block-class: #{c4p-settings.$pkg-prefix}--condition-builder;
 
 .#{$block-class}__item-option__option {
   display: grid;
-  min-height: 2rem;
   cursor: pointer;
+  min-block-size: 2rem;
   padding-inline: $spacing-05;
 }
 
@@ -66,8 +67,8 @@ $block-class: #{c4p-settings.$pkg-prefix}--condition-builder;
 
 .#{$block-class}__item-option__option-content {
   display: flex;
-  height: 100%;
   align-items: center;
+  block-size: 100%;
 }
 
 .#{$block-class}__item-option__option-label {
@@ -120,16 +121,16 @@ $block-class: #{c4p-settings.$pkg-prefix}--condition-builder;
 }
 
 .#{$block-class}__checkmark {
-  margin-left: auto;
+  margin-inline-start: auto;
 }
 
 .#{$block-class}__button {
   @include utilities.button-reset();
 
   display: inline-flex;
-  height: $spacing-07;
   align-items: center;
   background-color: $layer;
+  block-size: $spacing-07;
   color: inherit;
   column-gap: $spacing-02;
   cursor: pointer;
@@ -155,20 +156,19 @@ $block-class: #{c4p-settings.$pkg-prefix}--condition-builder;
 
 .#{$block-class}__statement-button,
 .#{$block-class}__connector-button {
-  min-width: $spacing-10;
+  min-inline-size: $spacing-10;
   padding-inline: $spacing-03;
 }
 .#{$block-class}__property-field {
   @include type.type-style('heading-01');
 
-  padding-left: $spacing-03;
+  padding-inline-start: $spacing-03;
 }
 .#{$block-class}__close-condition {
-  padding-right: $spacing-03;
+  padding-inline-end: $spacing-03;
 }
 .#{$block-class}__add-button {
-  padding-right: $spacing-03;
-  padding-left: $spacing-03;
+  padding-inline: $spacing-03;
 }
 
 .#{$block-class}__multiselectSelectionStatusContainer {
@@ -176,7 +176,7 @@ $block-class: #{c4p-settings.$pkg-prefix}--condition-builder;
   align-items: center;
   padding-inline: $spacing-05;
   .#{$block-class}__selectAll-button {
-    margin-left: auto;
+    margin-inline-start: auto;
   }
 }
 
@@ -204,24 +204,20 @@ $colors: (
   //this is to select and add color to the new group preview
   .#{$block-class}__group-preview[data-color-index='#{($i%list.length($colors))}']
     button {
-    /* stylelint-disable-next-line carbon/theme-use */
     $next-group-color: list.nth($colors, (($i%list.length($colors)) + 1));
-    /* stylelint-disable-next-line carbon/theme-use */
     box-shadow: inset 0 #{$spacing-01} 0 0 list.nth($next-group-color, 1);
   }
 
   //we need to select the group color from the $colors array and need to repeat the colors after $colors.length subgroups
   @for $el-index from 1 through 50 {
     $item-index: $el-index;
-    /* stylelint-disable-next-line carbon/theme-use */
     $item-index: ((($item-index - 1) % $group-colors-length) + 1);
     #{$selector} {
       @if $item-index != 1 {
-        /* stylelint-disable-next-line carbon/theme-use */
         --#{$block-class}__condition-wrapper-color: #{list.nth(
             $group-colors,
             $item-index
-          )}; // stylelint-disable-line carbon/theme-use
+          )};
       }
     }
 
@@ -248,21 +244,21 @@ $colors: (
       .#{$block-class}__add-button,
       .#{$block-class}__add-condition-sub-group
     ) {
-    /* stylelint-disable-next-line carbon/theme-use */
-    box-shadow: inset 0 #{$spacing-01} 0 0 var(--#{$block-class}__condition-wrapper-color);
+    box-shadow: inset 0 #{$spacing-01} 0 0
+      var(--#{$block-class}__condition-wrapper-color);
   }
 }
 
 .#{$block-class}__groupOperatorConnector {
-  margin-bottom: $spacing-02;
+  margin-block-end: $spacing-02;
 }
 .#{$block-class}__option-check-box {
   display: flex;
-  margin-right: $spacing-03;
+  margin-inline-end: $spacing-03;
 }
 .#{$block-class}__option-icon {
   align-self: center;
-  margin-left: auto;
+  margin-inline-start: auto;
 }
 .#{$block-class}__content-container {
   .#{$block-class}__add-button-wrapper > :nth-child(1) {

package/scss/components/CreateFullPage/_carbon-imports.scss

@@ -9,9 +9,9 @@
 // Grid, Row, Column, Form, ProgressIndicator, ProgressStep, Toggle,
 // ComposedModal, ModalHeader, ModalBody, ModalFooter, Button
 // Other Carbon settings.
-@use '@carbon/react/scss/grid';
-@use '@carbon/react/scss/components/form';
-@use '@carbon/react/scss/components/progress-indicator';
-@use '@carbon/react/scss/components/toggle';
-@use '@carbon/react/scss/components/modal';
-@use '@carbon/react/scss/components/button';
+@use '@carbon/styles/scss/grid';
+@use '@carbon/styles/scss/components/form';
+@use '@carbon/styles/scss/components/progress-indicator';
+@use '@carbon/styles/scss/components/toggle';
+@use '@carbon/styles/scss/components/modal';
+@use '@carbon/styles/scss/components/button';

package/scss/components/CreateFullPage/_create-full-page.scss

@@ -23,7 +23,7 @@ $step-block-class: #{c4p-settings.$pkg-prefix}--create-full-page__step;
 
 .#{$block-class} {
   display: grid;
-  height: 100%;
+  block-size: 100%;
   color: $text-primary;
   grid-template-rows: minmax(auto, 100%);
 
@@ -35,9 +35,8 @@ $step-block-class: #{c4p-settings.$pkg-prefix}--create-full-page__step;
 .#{$block-class}
   .#{$block-class}__content
   .#{c4p-settings.$carbon-prefix}--grid {
-  padding-top: $spacing-06;
-  margin-right: 0;
-  margin-left: 0;
+  margin-inline: 0;
+  padding-block-start: $spacing-06;
 }
 
 .#{$block-class} .#{$step-block-class}__step--hidden-step {
@@ -51,21 +50,21 @@ $step-block-class: #{c4p-settings.$pkg-prefix}--create-full-page__step;
 .#{$block-class} .#{$block-class}__step-subtitle {
   @include type.type-style('heading-compact-01');
 
-  margin-bottom: $spacing-03;
+  margin-block-end: $spacing-03;
 }
 
 .#{$block-class} .#{$block-class}__step-description {
   @include type.type-style('body-01');
 
-  margin-bottom: $spacing-06;
+  margin-block-end: $spacing-06;
 }
 
 .#{$block-class} .#{c4p-settings.$carbon-prefix}--fieldset {
-  margin-bottom: 0;
+  margin-block-end: 0;
 }
 
 .#{$block-class} .#{$block-class}__step-fieldset > * {
-  margin-bottom: $spacing-05;
+  margin-block-end: $spacing-05;
 }
 
 .#{$block-class} .#{c4p-settings.$carbon-prefix}--modal-close {
@@ -75,15 +74,18 @@ $step-block-class: #{c4p-settings.$pkg-prefix}--create-full-page__step;
 .#{$block-class}__influencer-and-body-container {
   display: flex;
   overflow: hidden;
-  max-height: 100%;
   padding: 0;
   margin: 0;
+  max-block-size: 100%;
 }
 
 .#{$block-class} .#{$block-class}__left-nav {
   grid-column: 1 / -1;
   grid-row: 1 / -1;
   overflow-y: auto;
+  @supports (overflow-block: auto) {
+    overflow-block: auto;
+  }
 }
 
 .#{$block-class} .#{$block-class}__body {
@@ -94,70 +96,78 @@ $step-block-class: #{c4p-settings.$pkg-prefix}--create-full-page__step;
 
 .#{$block-class} .#{$block-class}__main {
   display: flex;
-  max-height: 100%;
   flex-direction: column;
   flex-grow: 1;
+  max-block-size: 100%;
 }
 
 .#{$block-class} .#{$block-class}__content {
   overflow: auto;
   flex-grow: 1;
-  padding-top: $spacing-06;
   background-color: $background;
   color: $text-primary;
   overflow-x: hidden;
+  @supports (overflow-inline: hidden) {
+    overflow-inline: hidden;
+  }
+
+  padding-block-start: $spacing-06;
 }
 
 .#{$block-class} .#{$block-class}__step {
   position: relative;
-  padding-bottom: $spacing-07;
+  padding-block-end: $spacing-07;
 }
 
 .#{$block-class}__step .#{c4p-settings.$carbon-prefix}--css-grid {
-  margin-left: 0;
+  margin-inline-start: 0;
 }
 
 .#{$block-class} .#{c4p-settings.$carbon-prefix}--side-nav--ux {
-  top: 0;
-  height: min-content;
-  padding-top: 0;
-  border-right: 1px solid $border-subtle-01;
   background-color: transparent;
+  block-size: min-content;
+  border-inline-end: 1px solid $border-subtle-01;
   grid-row: 1;
+  inset-block-start: 0;
   overflow-x: auto;
+  @supports (overflow-inline: auto) {
+    overflow-inline: auto;
+  }
+
+  padding-block-start: 0;
 }
 
 .#{$block-class} .#{$block-class}__section-divider {
   position: relative;
   display: block;
-  width: 0;
-  height: 1px;
   margin: $spacing-07 calc(-1 * #{$spacing-08}) $spacing-07
     calc(-1 * #{$spacing-08});
+  block-size: 1px;
+  inline-size: 0;
 
   /* stylelint-disable-next-line max-nesting-depth */
   &::after {
     position: absolute;
-    top: 0;
-    left: 0;
-    width: 100vw;
-    height: 1px;
     background-color: $layer-accent-01;
+    block-size: 1px;
     content: '';
+    inline-size: 100vw;
+    inset-block-start: 0;
+    inset-inline-start: 0;
   }
 }
 
 .#{$block-class} .#{$block-class}__step-title {
   @include type.type-style('heading-04');
 
-  margin-bottom: $spacing-05;
+  margin-block-end: $spacing-05;
 }
 
 .#{$block-class} .#{$block-class}__influencer {
   display: grid;
   flex: 0 0 257px;
-  border-right: 1px solid $layer-accent-01;
   background-color: $layer-01;
+  border-inline-end: 1px solid $layer-accent-01;
   grid-template-columns: 100%;
   grid-template-rows: 1fr auto;
 }
@@ -174,5 +184,5 @@ $step-block-class: #{c4p-settings.$pkg-prefix}--create-full-page__step;
 }
 
 .#{$block-class} .#{$block-class}__buttons {
-  border-top: 1px solid $layer-accent-01;
+  border-block-start: 1px solid $layer-accent-01;
 }

package/scss/components/CreateInfluencer/_carbon-imports.scss

@@ -7,4 +7,4 @@
 
 // CreateInfluencer uses the following Carbon components:
 // ProgressIndicator
-@use '@carbon/react/scss/components/progress-indicator';
+@use '@carbon/styles/scss/components/progress-indicator';

package/scss/components/CreateInfluencer/_create-influencer.scss

@@ -39,8 +39,8 @@ $influencerAnimationStart: calc(-1 * #{$spacing-05});
 }
 .#{$influencer-block-class} {
   display: grid;
-  height: 100%;
   padding: $spacing-06 $spacing-07;
+  block-size: 100%;
   grid-template-columns: 100%;
   grid-template-rows: 1fr auto;
 }
@@ -49,12 +49,15 @@ $influencerAnimationStart: calc(-1 * #{$spacing-05});
   grid-column: 1 / -1;
   grid-row: 1 / -1;
   overflow-y: auto;
+  @supports (overflow-block: auto) {
+    overflow-block: auto;
+  }
 }
 
 .#{$influencer-block-class}__title {
   @include type.type-style('heading-03');
 
-  margin-bottom: $spacing-06;
+  margin-block-end: $spacing-06;
 }
 
 .#{$influencer-block-class}__view-all-toggle {

package/scss/components/CreateModal/_carbon-imports.scss

@@ -7,6 +7,6 @@
 
 // CreateModal uses the following Carbon components:
 // ComposedModal, ModalHeader, ModalFooter, ModalBody, Form, Button
-@use '@carbon/react/scss/components/modal';
-@use '@carbon/react/scss/components/form';
-@use '@carbon/react/scss/components/button';
+@use '@carbon/styles/scss/components/modal';
+@use '@carbon/styles/scss/components/form';
+@use '@carbon/styles/scss/components/button';

package/scss/components/CreateModal/_create-modal.scss

@@ -20,58 +20,59 @@
 .#{c4p-settings.$pkg-prefix}--create-modal
   .#{c4p-settings.$carbon-prefix}--modal-container {
   @include breakpoint(md) {
-    max-height: 95%;
+    max-block-size: 95%;
   }
   @include breakpoint(lg) {
-    max-height: 95%;
+    max-block-size: 95%;
   }
 }
 
 .#{c4p-settings.$pkg-prefix}--create-modal
   .#{c4p-settings.$carbon-prefix}--modal-header {
-  padding-right: 20%;
-  padding-bottom: $spacing-03;
-  border-bottom: 1px solid $layer-accent-01;
-  margin-bottom: 0;
+  border-block-end: 1px solid $layer-accent-01;
+  margin-block-end: 0;
+  padding-block-end: $spacing-03;
+  padding-inline-end: 20%;
 }
 
 .#{c4p-settings.$pkg-prefix}--create-modal
   .#{c4p-settings.$carbon-prefix}--modal-footer
   .#{c4p-settings.$carbon-prefix}--btn {
-  max-width: none;
+  max-inline-size: none;
 }
 
 .#{c4p-settings.$pkg-prefix}--create-modal__title {
   @include type.type-style('heading-03');
 
-  margin-bottom: $spacing-02;
+  margin-block-end: $spacing-02;
 }
 
 .#{c4p-settings.$pkg-prefix}--create-modal__subtitle {
   @include type.type-style('body-compact-01');
 
-  margin-bottom: $spacing-03;
   color: $text-secondary;
+
+  margin-block-end: $spacing-03;
 }
 
 .#{c4p-settings.$pkg-prefix}--create-modal__description {
   @include type.type-style('body-01');
 
-  padding-right: calc(20% - #{$spacing-05});
   margin: $spacing-03 0 $spacing-05 0;
+  padding-inline-end: calc(20% - #{$spacing-05});
 }
 
 .#{c4p-settings.$pkg-prefix}--create-modal__form
   .#{c4p-settings.$carbon-prefix}--fieldset {
-  min-width: 100%;
-  margin-bottom: 0;
+  margin-block-end: 0;
+  min-inline-size: 100%;
 }
 
 .#{c4p-settings.$pkg-prefix}--create-modal__form > * {
-  margin-bottom: $spacing-05;
+  margin-block-end: $spacing-05;
 
   /* stylelint-disable-next-line max-nesting-depth */
   &:last-child {
-    margin-bottom: 0;
+    margin-block-end: 0;
   }
 }

package/scss/components/CreateSidePanel/_carbon-imports.scss

@@ -7,4 +7,4 @@
 
 // CreateSidePanel uses the following Carbon components:
 // Form
-@use '@carbon/react/scss/components/form';
+@use '@carbon/styles/scss/components/form';

package/scss/components/CreateSidePanel/_create-side-panel.scss

@@ -21,25 +21,25 @@ $side-panel-block-class: #{c4p-settings.$pkg-prefix}--side-panel;
 
 .#{$create-side-panel-block-class}.#{$side-panel-block-class}
   .#{$create-side-panel-block-class}__content-text {
-  padding-right: calc(20% - #{$spacing-05});
+  padding-inline-end: calc(20% - #{$spacing-05});
 }
 
 .#{c4p-settings.$carbon-prefix}--form.#{$create-side-panel-block-class}__form {
-  padding-top: $spacing-05;
+  padding-block-start: $spacing-05;
 }
 
 .#{$create-side-panel-block-class}__form.#{c4p-settings.$carbon-prefix}--fieldset {
-  padding-top: $spacing-03;
+  padding-block-start: $spacing-03;
 }
 
 .#{$create-side-panel-block-class}__form > * {
-  margin-bottom: $spacing-05;
+  margin-block-end: $spacing-05;
 }
 
 .#{$create-side-panel-block-class}__form-title-text {
   @include type.type-style('heading-compact-02');
 
-  padding-bottom: $spacing-03;
+  padding-block-end: $spacing-03;
 }
 
 .#{$create-side-panel-block-class}__form-description-text {

package/scss/components/CreateTearsheet/_carbon-imports.scss

@@ -7,4 +7,4 @@
 
 // CreateTearsheet uses the following Carbon components:
 // ProgressIndicator, ProgressStep
-@use '@carbon/react/scss/components/progress-indicator';
+@use '@carbon/styles/scss/components/progress-indicator';

package/scss/components/CreateTearsheet/_create-tearsheet.scss

@@ -7,8 +7,8 @@
 
 // Other Carbon settings.
 @use '@carbon/styles/scss/theme' as *;
-@use '@carbon/react/scss/components/button/tokens' as *;
-@use '@carbon/react/scss/grid' as *;
+@use '@carbon/styles/scss/components/button/tokens' as *;
+@use '@carbon/styles/scss/grid' as *;
 @use '@carbon/styles/scss/motion' as *;
 @use '@carbon/styles/scss/spacing' as *;
 @use '@carbon/styles/scss/type';
@@ -40,16 +40,15 @@ $tearsheet-divider-class: #{c4p-settings.$pkg-prefix}--tearsheet-create__section
 $tearsheet-fieldset-class: #{c4p-settings.$pkg-prefix}--tearsheet-create__step--fieldset;
 
 .#{$create-tearsheet-block-class} .#{$step-block-class}__step--visible-step {
-  padding-right: $spacing-03;
-  padding-left: $spacing-03;
-
-  margin-left: 0;
-
   // stylelint-disable-next-line carbon/motion-easing-use
   animation: step-content-entrance $duration-slow-01;
+
   animation-fill-mode: forwards;
   animation-timing-function: $standard-easing;
+
+  margin-inline-start: 0;
   opacity: 0;
+  padding-inline: $spacing-03;
 }
 
 .#{$create-tearsheet-block-class} {
@@ -57,7 +56,7 @@ $tearsheet-fieldset-class: #{c4p-settings.$pkg-prefix}--tearsheet-create__step--
 }
 
 .#{$step-block-class} .#{c4p-settings.$carbon-prefix}--css-grid {
-  margin-left: 0;
+  margin-inline-start: 0;
 }
 
 .#{$create-tearsheet-block-class} .#{$step-block-class}__step--hidden-step {
@@ -80,16 +79,19 @@ $tearsheet-fieldset-class: #{c4p-settings.$pkg-prefix}--tearsheet-create__step--
 }
 
 .#{$create-tearsheet-block-class} .#{$create-tearsheet-block-class}__content {
-  min-height: 100%;
-  padding-top: $spacing-06;
-  padding-bottom: $spacing-06;
+  min-block-size: 100%;
   overflow-x: hidden;
+  @supports (overflow-inline: hidden) {
+    overflow-inline: hidden;
+  }
+
+  padding-block: $spacing-06;
 }
 
 .#{$create-tearsheet-block-class}
   .#{$create-tearsheet-block-class}__content
   .#{c4p-settings.$carbon-prefix}--form {
-  height: inherit;
+  block-size: inherit;
 }
 
 .#{$create-tearsheet-block-class}
@@ -101,7 +103,7 @@ $tearsheet-fieldset-class: #{c4p-settings.$pkg-prefix}--tearsheet-create__step--
 
 .#{$create-tearsheet-block-class}
   .#{$create-tearsheet-block-class}__step--heading {
-  padding-bottom: $spacing-06;
+  padding-block-end: $spacing-06;
 }
 
 .#{$create-tearsheet-block-class}
@@ -120,18 +122,18 @@ $tearsheet-fieldset-class: #{c4p-settings.$pkg-prefix}--tearsheet-create__step--
   .#{$create-tearsheet-block-class}__section--divider {
   position: relative;
   display: block;
-  width: var(--#{$create-tearsheet-block-class}--total-width);
-  height: 1px;
   margin: $spacing-06 calc(-1 * #{$spacing-08}) $spacing-07
     calc(-1 * #{$spacing-06});
   background-color: $layer-accent-01;
+  block-size: 1px;
+  inline-size: var(--#{$create-tearsheet-block-class}--total-width);
 }
 
 .#{$create-tearsheet-block-class}
   .#{$create-tearsheet-block-class}__step--title,
 .#{$create-tearsheet-block-class}
   .#{$create-tearsheet-block-class}__section--title {
-  margin-bottom: $spacing-05;
+  margin-block-end: $spacing-05;
 }
 
 .#{$create-tearsheet-block-class}
@@ -140,7 +142,7 @@ $tearsheet-fieldset-class: #{c4p-settings.$pkg-prefix}--tearsheet-create__step--
   .#{$create-tearsheet-block-class}__step--subtitle {
   @include type.type-style('heading-compact-01');
 
-  margin-bottom: $spacing-03;
+  margin-block-end: $spacing-03;
 }
 
 .#{$create-tearsheet-block-class}
@@ -149,15 +151,15 @@ $tearsheet-fieldset-class: #{c4p-settings.$pkg-prefix}--tearsheet-create__step--
   .#{$create-tearsheet-block-class}__step--description {
   @include type.type-style('body-01');
 
-  margin-bottom: $spacing-06;
+  margin-block-end: $spacing-06;
 }
 
 .#{$create-tearsheet-block-class} .#{c4p-settings.$carbon-prefix}--fieldset {
-  margin-bottom: 0;
+  margin-block-end: 0;
 }
 
 .#{$create-tearsheet-block-class}
   .#{$create-tearsheet-block-class}__step--fieldset
   > * {
-  margin-bottom: $spacing-05;
+  margin-block-end: $spacing-05;
 }

package/scss/components/CreateTearsheetNarrow/_carbon-imports.scss

@@ -7,4 +7,4 @@
 
 // CreateTearsheetNarrow uses the following Carbon components:
 // Form
-@use '@carbon/react/scss/components/form';
+@use '@carbon/styles/scss/components/form';