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

package/scss/components/GetStartedCard/_get-started-card.scss

@@ -13,7 +13,7 @@
 @use '@carbon/styles/scss/spacing' as *;
 @use '@carbon/styles/scss/type' as *;
 @use '@carbon/styles/scss/theme' as *;
-@use '@carbon/react/scss/colors' as *;
+@use '@carbon/styles/scss/colors' as *;
 @use '@carbon/layout/scss/convert' as *;
 @use '@carbon/styles/scss/breakpoint' as *;
 
@@ -39,15 +39,15 @@ $block-class: #{c4p-settings.$pkg-prefix}--card;
   .#{$block-class}__sequence {
     @include type-style('heading-05');
 
-    padding-top: $spacing-05;
-    padding-left: $spacing-05;
+    padding-block-start: $spacing-05;
+    padding-inline-start: $spacing-05;
   }
 
   .#{$block-class}__status {
     position: absolute;
     z-index: 2;
-    top: $spacing-05;
-    right: $spacing-05;
+    inset-block-start: $spacing-05;
+    inset-inline-end: $spacing-05;
   }
 
   .#{$block-class}__header-body-container {
@@ -55,10 +55,10 @@ $block-class: #{c4p-settings.$pkg-prefix}--card;
   }
 
   .#{$block-class}__header {
-    padding-right: $spacing-09;
+    padding-inline-end: $spacing-09;
 
     @include breakpoint-down(lg) {
-      padding-bottom: 0;
+      padding-block-end: 0;
     }
   }
 
@@ -78,16 +78,14 @@ $block-class: #{c4p-settings.$pkg-prefix}--card;
   .#{$block-class}__pictogram ~ .#{$block-class}__content-container {
     .#{$block-class}__media {
       /* stylelint-disable-next-line function-no-unknown */
-      margin-top: to-rem(-50px);
-      margin-bottom: -$spacing-09;
+      margin-block: to-rem(-50px) -$spacing-09;
     }
   }
 
   .#{$block-class}__sequence ~ .#{$block-class}__content-container {
     .#{$block-class}__media {
       /* stylelint-disable-next-line function-no-unknown */
-      margin-top: to-rem(-56px);
-      margin-bottom: -$spacing-09;
+      margin-block: to-rem(-56px) -$spacing-09;
     }
   }
 
@@ -100,11 +98,11 @@ $block-class: #{c4p-settings.$pkg-prefix}--card;
     .#{$block-class}__icon {
       display: flex;
       padding: 0;
-      margin-right: 0;
+      margin-inline-end: 0;
     }
 
     .#{$block-class}__icon svg {
-      margin-right: $spacing-02;
+      margin-inline-end: $spacing-02;
     }
 
     .#{$block-class}__icon:hover {
@@ -121,7 +119,7 @@ $block-class: #{c4p-settings.$pkg-prefix}--card;
     .#{$block-class}__action-icon {
       display: flex;
       align-self: center;
-      padding-right: $spacing-05;
+      padding-inline-end: $spacing-05;
     }
   }
 }

package/scss/components/Guidebanner/_guidebanner.scss

@@ -6,12 +6,12 @@
 //
 
 /**
- * The Guidebanner specifically is theme-agnostic, and so we have to 
- * use color tokens to keep the colors static instead of theme tokens 
+ * The Guidebanner specifically is theme-agnostic, and so we have to
+ * use color tokens to keep the colors static instead of theme tokens
  * that will change depending on the selected theme.
- * 
+ *
  * Because of this, we are triggering a *large* amount of linting errors.
- * So, we're adding a few "disable" rules for the file instead of 60 
+ * So, we're adding a few "disable" rules for the file instead of 60
  * individual rules.
  */
 
@@ -24,7 +24,7 @@
 
 // Standard imports.
 @use '@carbon/layout/scss/convert' as *;
-@use '@carbon/react/scss/colors' as *;
+@use '@carbon/styles/scss/colors' as *;
 @use '@carbon/styles/scss/motion' as *;
 @use '@carbon/styles/scss/spacing' as *;
 @use '@carbon/styles/scss/theme' as *;
@@ -67,8 +67,8 @@ $purple-3: #7433e3;
 
 .#{$block-class}__icon-idea {
   position: absolute;
-  top: $spacing-05;
-  left: $spacing-05;
+  inset-block-start: $spacing-05;
+  inset-inline-start: $spacing-05;
 
   path {
     fill: $gray-10;
@@ -84,14 +84,14 @@ $purple-3: #7433e3;
 
 .#{$block-class}__close-button {
   position: absolute;
-  top: 0;
-  right: 0;
+  inset-block-start: 0;
+  inset-inline-end: 0;
 }
 .#{$block-class}__close-button button {
-  width: $spacing-07;
-  height: $spacing-07;
-  min-height: $spacing-07;
-  padding-top: 6px;
+  block-size: $spacing-07;
+  inline-size: $spacing-07;
+  min-block-size: $spacing-07;
+  padding-block-start: 6px;
 
   &:active,
   &:hover {
@@ -109,7 +109,7 @@ $purple-3: #7433e3;
   color: $gray-10;
 
   @include when-collapsed() {
-    margin-bottom: 0;
+    margin-block-end: 0;
   }
 }
 
@@ -117,21 +117,22 @@ $purple-3: #7433e3;
 // except the last one (see below).
 .#{$block-class}__carousel .#{$carousel-item} .#{$block-class}__element {
   display: flex;
-  width: to-rem(400px); // 25rem
-  max-height: to-rem(512px); // 32rem
   flex-flow: column;
   flex-shrink: 0;
-  padding-left: $horizontal-margin;
   margin: $spacing-05 0 0 0;
+  inline-size: to-rem(400px); // 25rem
+  max-block-size: to-rem(512px); // 32rem
   opacity: 1;
+  padding-inline-start: $horizontal-margin;
   scroll-snap-align: start;
-  transition: max-height 50ms motion(exit, productive),
+  transition:
+    max-height 50ms motion(exit, productive),
     margin-top 50ms motion(exit, productive),
     opacity 300ms motion(exit, productive);
 
   @include when-collapsed() {
-    max-height: $spacing-03;
-    margin-top: 0;
+    margin-block-start: 0;
+    max-block-size: $spacing-03;
     opacity: 0;
   }
 }
@@ -140,8 +141,8 @@ $purple-3: #7433e3;
 .#{$block-class}__carousel
   .#{$carousel-item}:last-child
   .#{$block-class}__element {
-  width: to-rem(448px); // 28rem
-  padding-right: $horizontal-margin;
+  inline-size: to-rem(448px); // 28rem
+  padding-inline-end: $horizontal-margin;
 }
 
 .#{$block-class}__carousel .#{$carousel-item} .#{$block-class}__element-title {
@@ -153,7 +154,7 @@ $purple-3: #7433e3;
 .#{$block-class}__carousel .#{$block-class}__element-content {
   @include type-style('body-01');
 
-  margin-bottom: $spacing-05;
+  margin-block-end: $spacing-05;
 }
 
 // Button with crossroads icon
@@ -173,16 +174,16 @@ $purple-3: #7433e3;
   // Repeating here.
   svg {
     position: absolute;
-    right: $spacing-05;
-    width: 1rem;
-    height: 1rem;
     flex-shrink: 0;
+    block-size: 1rem;
+    inline-size: 1rem;
+    inset-inline-end: $spacing-05;
   }
 }
 
 .#{$block-class}__carousel .#{c4p-settings.$carbon-prefix}--btn--ghost {
-  margin-left: calc(-1 * $spacing-05);
   color: $blue-30;
+  margin-inline-start: calc(-1 * $spacing-05);
 
   &:active,
   &:hover {
@@ -206,15 +207,15 @@ $purple-3: #7433e3;
 
 .#{$block-class}__navigation {
   display: flex;
-  border-top: to-rem(1px) solid $purple-60;
+  border-block-start: to-rem(1px) solid $purple-60;
 
   @include when-collapsed() {
-    border-top: none;
+    border-block-start: none;
   }
 }
 .#{$block-class}__navigation .#{$block-class}__toggle-button {
-  margin-left: calc($horizontal-margin - to-rem(18px));
   color: $blue-30;
+  margin-inline-start: calc($horizontal-margin - to-rem(18px));
 
   &:active,
   &:hover {
@@ -225,7 +226,7 @@ $purple-3: #7433e3;
 
 // Push navigation buttons to the right
 .#{$block-class}__navigation .#{$block-class}__back-button {
-  margin-left: auto;
+  margin-inline-start: auto;
 }
 // Hide navigation buttons when collapsed
 .#{$block-class}__navigation .#{$block-class}__back-button,
@@ -255,22 +256,22 @@ $purple-3: #7433e3;
 // - insert 1 rem of more "space" on the left.
 // - move icon 1 rem more to the right.
 .#{$block-class}__with-left-gutter .#{$block-class}__icon-idea {
-  left: $spacing-07;
+  inset-inline-start: $spacing-07;
 }
 .#{$block-class}__with-left-gutter .#{$block-class}__title {
-  padding-left: calc($horizontal-margin + $spacing-05);
+  padding-inline-start: calc($horizontal-margin + $spacing-05);
 }
 .#{$block-class}__with-left-gutter .#{$block-class}__navigation {
-  padding-left: $spacing-05;
+  padding-inline-start: $spacing-05;
 }
 // Override Carousel settings
 // - insert 1 rem of more "space" on the left.
 .#{$block-class}__with-left-gutter
   .#{c4p-settings.$pkg-prefix}--carousel__elements-container {
-  padding-left: $spacing-05;
+  padding-inline-start: $spacing-05;
 }
 // - expand "fade" to cover more of the left side of the carousel.
 .#{$block-class}__with-left-gutter
   .#{c4p-settings.$pkg-prefix}--carousel__elements-container--scrolled {
-  width: $spacing-10;
+  inline-size: $spacing-10;
 }

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

@@ -7,4 +7,4 @@
 
 // HTTP errors use the following Carbon components:
 // Link
-@use '@carbon/react/scss/components/link';
+@use '@carbon/styles/scss/components/link';

package/scss/components/HTTPErrors/_http-errors.scss

@@ -20,8 +20,8 @@ $block-class-other: #{c4p-settings.$pkg-prefix}--http-errors-other;
 .#{$block-class} .#{$block-class}__content {
   position: fixed;
   z-index: 2;
-  top: 50%;
-  left: 50%;
+  inset-block-start: 50%;
+  inset-inline-start: 50%;
   transform: translate(-50%, -75%);
   @include breakpoint(md) {
     transform: translate(-50%, -100%);
@@ -34,19 +34,19 @@ $block-class-other: #{c4p-settings.$pkg-prefix}--http-errors-other;
 .#{$block-class} .#{$block-class}__error-code-label {
   @include type.type-style('heading-compact-02');
 
-  margin-bottom: $spacing-02;
+  margin-block-end: $spacing-02;
 }
 
 .#{$block-class} .#{$block-class}__title {
   @include type.type-style('heading-05');
 
-  margin-bottom: $spacing-04;
+  margin-block-end: $spacing-04;
 }
 
 .#{$block-class} .#{$block-class}__description {
   @include type.type-style('body-compact-01');
 
-  margin-bottom: $spacing-06;
+  margin-block-end: $spacing-06;
 }
 
 .#{$block-class} .#{$block-class}__error-code-label,
@@ -56,16 +56,16 @@ $block-class-other: #{c4p-settings.$pkg-prefix}--http-errors-other;
 }
 .#{$block-class} .#{$block-class}__link {
   display: block;
-  margin-bottom: $spacing-02;
+  margin-block-end: $spacing-02;
 }
 .#{$block-class} .#{$block-class}__image {
   position: fixed;
-  bottom: 0;
-  left: 0;
-  width: 100%;
-  max-height: 100%;
+  inline-size: 100%;
+  inset-block-end: 0;
+  inset-inline-start: 0;
+  max-block-size: 100%;
   @include breakpoint-down(md) {
-    left: 10%;
+    inset-inline-start: 10%;
     transform: scale(1.5);
   }
 }

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

@@ -8,7 +8,7 @@
 // ImportModal uses the following Carbon components:
 // ComposedModal, ModalHeader, ModalFooter, ModalBody,
 // FileUploaderDropContainer, FileUploaderItem, TextInput, Button
-@use '@carbon/react/scss/components/modal';
-@use '@carbon/react/scss/components/file-uploader';
-@use '@carbon/react/scss/components/text-input';
-@use '@carbon/react/scss/components/button';
+@use '@carbon/styles/scss/components/modal';
+@use '@carbon/styles/scss/components/file-uploader';
+@use '@carbon/styles/scss/components/text-input';
+@use '@carbon/styles/scss/components/button';

package/scss/components/ImportModal/_import-modal.scss

@@ -20,24 +20,24 @@ $block-class: #{c4p-settings.$pkg-prefix}--import-modal;
 .#{$block-class}
   .#{c4p-settings.$carbon-prefix}--modal-footer
   .#{c4p-settings.$carbon-prefix}--btn {
-  max-width: none;
+  max-inline-size: none;
 }
 
 .#{$block-class}.#{c4p-settings.$carbon-prefix}--modal
   .#{c4p-settings.$carbon-prefix}--modal-content {
-  padding-right: $spacing-05;
+  padding-inline-end: $spacing-05;
 }
 
 .#{c4p-settings.$carbon-prefix}--file
   .#{c4p-settings.$carbon-prefix}--file-container,
 .#{c4p-settings.$carbon-prefix}--file
   ~ .#{c4p-settings.$carbon-prefix}--file-container {
-  margin-top: 0;
+  margin-block-start: 0;
 }
 
 .#{c4p-settings.$carbon-prefix}--modal-container--sm
   .#{c4p-settings.$carbon-prefix}--modal-header {
-  padding-right: calc(20% - #{$spacing-05});
+  padding-inline-end: calc(20% - #{$spacing-05});
 }
 
 .#{$block-class}__input-group {
@@ -45,37 +45,36 @@ $block-class: #{c4p-settings.$pkg-prefix}--import-modal;
 }
 
 .#{$block-class}__import-button.#{c4p-settings.$carbon-prefix}--btn {
-  margin-left: $spacing-03;
+  margin-inline-start: $spacing-03;
 }
 
 .#{$block-class}__file-container {
-  width: 100%;
+  inline-size: 100%;
 }
 
 .#{$block-class} .#{$block-class}__file-drop-header,
 .#{$block-class} .#{$block-class}__label {
-  margin-bottom: $spacing-03;
+  margin-block-end: $spacing-03;
   @include type.type-style('heading-compact-01');
 }
 
 .#{$block-class}__helper-text {
-  margin-top: $spacing-06;
-  margin-bottom: $spacing-03;
+  margin-block: $spacing-06 $spacing-03;
   @include type.type-style('helper-text-01');
 }
 
 .#{$block-class}__body {
-  padding-right: calc(20% - #{$spacing-05});
-  margin-bottom: $spacing-06;
+  margin-block-end: $spacing-06;
+  padding-inline-end: calc(20% - #{$spacing-05});
 }
 
 .#{$block-class} .#{c4p-settings.$carbon-prefix}--file__selected-file {
-  max-width: none;
   background: $layer-02;
+  max-inline-size: none;
 }
 
 .#{$block-class} .#{c4p-settings.$carbon-prefix}--file {
-  margin-bottom: $spacing-05;
+  margin-block-end: $spacing-05;
 }
 
 .#{$block-class} .#{c4p-settings.$carbon-prefix}--text-input:disabled {

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

@@ -23,7 +23,7 @@
 
 // Standard imports.
 @use '../../global/styles/project-settings' as c4p-settings;
-@use '@carbon/react/scss/colors' as *;
+@use '@carbon/styles/scss/colors' as *;
 @use '@carbon/layout/scss/convert' as *;
 @use '@carbon/styles/scss/spacing' as *;
 @use '@carbon/styles/scss/theme' as *;
@@ -46,22 +46,22 @@ $purple: #7f3ae7;
 }
 // layout: wide, with image
 .#{$block-class}__wide.#{$block-class}__has-media {
-  padding-right: $spacing-09;
+  padding-inline-end: $spacing-09;
 }
 
 .#{$block-class}__wide.#{$block-class}__has-media .#{$block-class}__media {
-  padding-left: $spacing-10;
+  padding-inline-start: $spacing-10;
 }
 
 .#{$block-class}__wide.#{$block-class}__has-media .#{$block-class}__media img {
   display: block;
-  height: $media-height;
+  block-size: $media-height;
 }
 
 .#{$block-class}__wide.#{$block-class}__has-media .#{$block-class}__media svg {
+  block-size: $media-height !important;
   // Overrides the inline CSS of "100%".
-  width: $media-width !important;
-  height: $media-height !important;
+  inline-size: $media-width !important;
 }
 
 // layout only: narrow
@@ -71,20 +71,20 @@ $purple: #7f3ae7;
 }
 // layout: narrow, with image
 .#{$block-class}__narrow.#{$block-class}__has-media {
-  padding-top: $spacing-07;
-  padding-right: $spacing-05;
+  padding-block-start: $spacing-07;
+  padding-inline-end: $spacing-05;
 }
 
 .#{$block-class}__narrow.#{$block-class}__has-media .#{$block-class}__media {
-  padding-bottom: $spacing-05;
+  padding-block-end: $spacing-05;
 
   img {
-    width: 100%;
+    inline-size: 100%;
   }
 }
 
 .#{$block-class}__narrow.#{$block-class}__has-media .#{$block-class}__content {
-  padding-right: $spacing-05;
+  padding-inline-end: $spacing-05;
 }
 
 .#{$block-class}__narrow.#{$block-class}__has-media .#{$block-class}__footer {
@@ -93,7 +93,7 @@ $purple: #7f3ae7;
 .#{$block-class}__narrow.#{$block-class}__has-media
   .#{$block-class}__footer
   .#{$block-class}__close-btn {
-  margin-right: calc(-1 * $spacing-05);
+  margin-inline-end: calc(-1 * $spacing-05);
 }
 
 // All links in use by this component and provided by the user must reflect the 'dark' theme.
@@ -121,23 +121,24 @@ $purple: #7f3ae7;
 .#{$block-class}__body p {
   @include type-style('body-short-01');
 
-  margin-bottom: $spacing-03;
   font-size: inherit;
   line-height: inherit;
 
+  margin-block-end: $spacing-03;
+
   &:last-of-type {
-    margin-bottom: 0;
+    margin-block-end: 0;
   }
 }
 
 .#{$block-class}__body .#{$block-class}__secondary-btn {
-  margin-top: $spacing-03;
+  margin-block-start: $spacing-03;
 }
 .#{$block-class}__body
   .#{$block-class}__secondary-btn
   .#{$block-class}__button {
-  margin-left: calc(-1 * $spacing-05);
   color: $blue-30;
+  margin-inline-start: calc(-1 * $spacing-05);
 
   &:active,
   &:hover {
@@ -148,7 +149,7 @@ $purple: #7f3ae7;
 
 .#{$block-class}__footer {
   display: flex;
-  padding-top: $spacing-05;
+  padding-block-start: $spacing-05;
 
   &:empty {
     display: none;
@@ -165,15 +166,15 @@ $purple: #7f3ae7;
 
 .#{$block-class}__icon-idea {
   position: absolute;
-  width: to-rem(20px);
   color: $white-0;
+  inline-size: to-rem(20px);
   inset: $spacing-05 0 0 $spacing-05;
 }
 
 .#{$block-class}__close-icon-wrapper {
   position: absolute;
-  top: 0;
-  right: 0;
+  inset-block-start: 0;
+  inset-inline-end: 0;
 }
 
 .#{$block-class} .#{$block-class}__close-icon {
@@ -221,10 +222,10 @@ $purple: #7f3ae7;
   // Repeating here.
   svg {
     position: absolute;
-    right: $spacing-05;
-    width: 1rem;
-    height: 1rem;
     flex-shrink: 0;
+    block-size: 1rem;
+    inline-size: 1rem;
+    inset-inline-end: $spacing-05;
   }
 }
 
@@ -233,9 +234,9 @@ $purple: #7f3ae7;
 // - insert 1 rem of more "space" on the left.
 // - move icon 1 rem more to the right.
 .#{$block-class}__wide.#{$block-class}__with-left-gutter {
-  padding-left: $spacing-10;
+  padding-inline-start: $spacing-10;
 }
 .#{$block-class}__wide.#{$block-class}__with-left-gutter
   .#{$block-class}__icon-idea {
-  left: $spacing-07;
+  inset-inline-start: $spacing-07;
 }