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

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

@@ -14,7 +14,7 @@
 @use '@carbon/styles/scss/theme' as *;
 @use '@carbon/styles/scss/spacing' as *;
 @use '@carbon/styles/scss/breakpoint' as *;
-@use '@carbon/react/scss/colors' as *;
+@use '@carbon/styles/scss/colors' as *;
 @use '@carbon/styles/scss/type';
 
 // InterstitialScreen uses the following Carbon for IBM Products components:
@@ -31,8 +31,8 @@ $one-grid-column: calc(100% / 16);
 
   .#{$carousel} {
     display: flex;
-    min-height: 100%;
     flex-direction: column;
+    min-block-size: 100%;
 
     &__elements-container {
       display: flex;
@@ -47,9 +47,8 @@ $one-grid-column: calc(100% / 16);
 
   position: fixed;
   z-index: 6001;
-  top: 0;
-  right: 0;
-  left: 0;
+  inset-block-start: 0;
+  inset-inline: 0;
 
   #{$block}--auto-height-container {
     flex: 1;
@@ -64,12 +63,12 @@ $one-grid-column: calc(100% / 16);
   }
 
   &--body-grid {
-    height: 100%;
     padding: 0 !important;
+    block-size: 100%;
   }
 
   &--body-row {
-    height: 100%;
+    block-size: 100%;
   }
 
   &--progress {
@@ -77,7 +76,7 @@ $one-grid-column: calc(100% / 16);
   }
 
   &__carousel {
-    height: 100%;
+    block-size: 100%;
     .#{$carousel-item} {
       flex: 0 0 100% !important;
       scroll-snap-align: start;
@@ -85,10 +84,10 @@ $one-grid-column: calc(100% / 16);
   }
 
   &--container {
-    min-width: 47rem;
-    max-width: 82rem;
     margin: calc($spacing-10 * 2) auto; // stylelint-disable-line carbon/layout-use
     background-color: $background;
+    max-inline-size: 82rem;
+    min-inline-size: 47rem;
   }
 
   &--media-container {
@@ -96,18 +95,18 @@ $one-grid-column: calc(100% / 16);
   }
 
   &--media {
-    width: 100%;
-    height: 100%;
+    block-size: 100%;
+    inline-size: 100%;
 
-    margin-right: calc($spacing-08 * -1);
+    margin-inline-end: calc($spacing-08 * -1);
     @include breakpoint-down(xlg) {
-      margin-right: calc($spacing-07 * -1);
+      margin-inline-end: calc($spacing-07 * -1);
     }
   }
 
   &--stepped-animated-media {
     overflow: hidden;
-    height: 100%;
+    block-size: 100%;
   }
 
   &--internal-body {
@@ -118,12 +117,12 @@ $one-grid-column: calc(100% / 16);
   // HEADER
   &--internal-header {
     position: relative;
-    min-height: $spacing-09;
-    margin-bottom: 0 !important;
     background-color: $background;
+    margin-block-end: 0 !important;
+    min-block-size: $spacing-09;
 
     &:empty {
-      min-height: 0;
+      min-block-size: 0;
     }
 
     h2 {
@@ -137,43 +136,43 @@ $one-grid-column: calc(100% / 16);
     }
 
     &--has-title {
-      border-bottom: 1px solid $border-subtle-01;
       background: $layer-01;
+      border-block-end: 1px solid $border-subtle-01;
 
       #{$block}--progress {
-        margin-top: 0;
+        margin-block-start: 0;
       }
     }
     > #{$block}--close-icon {
       position: absolute !important;
       z-index: 1;
-      top: 0;
-      right: 0;
-      width: $spacing-09;
+      inline-size: $spacing-09;
+      inset-block-start: 0;
+      inset-inline-end: 0;
     }
   }
 
   // FOOTER
   &--footer {
     display: flex;
-    width: 100%;
     flex-direction: row;
     justify-content: flex-end;
-    border-top: 1px solid $border-subtle-01;
     background: $background;
+    border-block-start: 1px solid $border-subtle-01;
+    inline-size: 100%;
 
     #{$block}--prev-btn,
     #{$block}--next-btn,
     #{$block}--start-btn {
-      width: calc($one-grid-column * 3);
-      min-width: 12.5rem;
+      inline-size: calc($one-grid-column * 3);
+      min-inline-size: 12.5rem;
       padding-block-end: $spacing-07;
     }
 
     #{$block}--skip-btn {
-      max-width: none;
       flex-grow: 1 !important;
-      padding-left: $spacing-07 !important;
+      max-inline-size: none;
+      padding-inline-start: $spacing-07 !important;
     }
   }
 
@@ -181,23 +180,23 @@ $one-grid-column: calc(100% / 16);
     display: flex;
     flex-direction: row;
     // flex: 1;
-    margin-left: auto;
+    margin-inline-start: auto;
   }
 
   // MODAL (settings exclusive of "FULL SCREEN")
   &--modal {
     #{$block}--content {
-      margin-top: 0;
+      margin-block-start: 0;
     }
 
     #{$block}--internal-header {
       &:has(> :nth-child(2)) {
-        min-height: initial;
+        min-block-size: initial;
       }
     }
 
     &:has(> :nth-child(1)) {
-      min-height: initial;
+      min-block-size: initial;
     }
   }
 
@@ -205,29 +204,29 @@ $one-grid-column: calc(100% / 16);
   &--full-screen {
     #{$block}--container {
       display: flex;
-      max-width: 100vw;
-      height: 100vh;
       flex-direction: column;
       padding: 0;
       margin: 0;
+      block-size: 100vh;
+      max-inline-size: 100vw;
     }
 
     // e.g. "IBM Cloud Pak | Product"
     // ..."IBM Cloud Pak"
     #{$block}--header {
       @include type.type-style('body-long-01');
-
-      height: $spacing-09;
-      padding-left: $spacing-05;
-      border-bottom: 1px solid $border-subtle-01;
       /* stylelint-disable-next-line carbon/theme-use */
       background-color: $gray-100;
+
+      block-size: $spacing-09;
+      border-block-end: 1px solid $border-subtle-01;
       /* stylelint-disable-next-line carbon/theme-use */
       color: $gray-10;
       /* stylelint-disable-next-line carbon/type-use */
       font-weight: normal !important; // overrides type style above
       /* stylelint-disable-next-line carbon/type-use */
       line-height: $spacing-09 !important;
+      padding-inline-start: $spacing-05;
 
       b {
         /* stylelint-disable-next-line carbon/type-use */
@@ -244,26 +243,26 @@ $one-grid-column: calc(100% / 16);
         margin: $spacing-10 $spacing-08 $spacing-04;
 
         @include breakpoint-down(xlg) {
-          margin-left: $spacing-07;
+          margin-inline-start: $spacing-07;
         }
       }
 
       &--has-title {
         #{$block}--progress {
-          margin-top: $spacing-06;
+          margin-block-start: $spacing-06;
         }
       }
 
       &:has(> :nth-child(1)) {
-        min-height: initial;
+        min-block-size: initial;
       }
     }
 
     #{$block}--footer {
       #{$block}--skip-btn {
-        padding-left: $spacing-08 !important;
+        padding-inline-start: $spacing-08 !important;
         @include breakpoint-down(xlg) {
-          padding-left: $spacing-07 !important;
+          padding-inline-start: $spacing-07 !important;
         }
       }
     }

package/scss/components/InterstitialScreenView/_interstitial-screen-view.scss

@@ -12,7 +12,7 @@
 // Other Carbon settings if needed
 // TODO: @use '@carbon/styles/scss/grid';
 // or
-// TODO: @use '@carbon/react/scss/grid';
+// TODO: @use '@carbon/styles/scss/grid';
 
 // InterstitialScreenView uses the following Carbon for IBM Products components:
 // TODO: @use(s) of IBM Products component styles used by InterstitialScreenView
@@ -21,5 +21,5 @@
 $block-class: #{c4p-settings.$pkg-prefix}--interstitial-screen-view;
 
 .#{$block-class} {
-  height: 100%;
+  block-size: 100%;
 }

package/scss/components/InterstitialScreenViewModule/_interstitial-screen-view-module.scss

@@ -17,7 +17,7 @@
 // Other Carbon settings if needed
 // TODO: @use '@carbon/styles/scss/grid';
 // or
-// TODO: @use '@carbon/react/scss/grid';
+// TODO: @use '@carbon/styles/scss/grid';
 
 // InterstitialScreenViewModule uses the following Carbon for IBM Products components:
 // TODO: @use(s) of IBM Products component styles used by InterstitialScreenViewModule
@@ -33,7 +33,7 @@ $block-class: #{c4p-settings.$pkg-prefix}--interstitial-screen-view-module;
   &--heading {
     @include type.type-style('heading-05');
 
-    margin-bottom: $spacing-07;
+    margin-block-end: $spacing-07;
   }
 
   &--body {

package/scss/components/Nav/_nav.scss

@@ -41,31 +41,30 @@ $nav__icon__position: translate3d(-50%, 0, 0);
 }
 
 .#{$block-class}:not(:first-of-type) {
-  padding-top: $spacing-05;
+  padding-block-start: $spacing-05;
 }
 
 .#{$block-class}:not(:last-of-type) {
-  padding-bottom: $spacing-05;
+  padding-block-end: $spacing-05;
 }
 
 .#{$block-class}:last-of-type {
-  padding-bottom: $spacing-07;
+  padding-block-end: $spacing-07;
 }
 
 .#{$block-class} + .#{$block-class} > .#{$nav__heading} {
-  padding-top: $spacing-02;
+  padding-block-start: $spacing-02;
 }
 
 .#{$block-class}::before {
   position: absolute;
-  right: $spacing-07;
-  bottom: 0;
-  left: $spacing-07;
   display: inline-block;
-  width: auto;
   /* stylelint-disable-next-line -- to-rem carbon replacement for rem */
-  border-bottom: to-rem(1px) solid $layer-02;
+  border-block-end: to-rem(1px) solid $layer-02;
   content: '';
+  inline-size: auto;
+  inset-block-end: 0;
+  inset-inline: $spacing-07;
 }
 
 .#{$block-class}:last-of-type::before {
@@ -73,13 +72,12 @@ $nav__icon__position: translate3d(-50%, 0, 0);
 }
 
 .#{$block-class}__wrapper {
-  padding-left: initial;
-  margin-top: initial;
-  margin-bottom: initial;
   list-style: none;
+  margin-block: initial;
+  padding-inline-start: initial;
 
   @include rtl {
-    padding-right: initial;
+    padding-inline-end: initial;
   }
 }
 
@@ -87,9 +85,8 @@ $nav__icon__position: translate3d(-50%, 0, 0);
   @include type.type-style('caption-01');
 
   padding: $spacing-04 $spacing-08;
-  margin-top: initial;
-  margin-bottom: initial;
   color: $text-secondary;
+  margin-block: initial;
 }
 
 // Navigation lists.
@@ -98,8 +95,8 @@ $nav__icon__position: translate3d(-50%, 0, 0);
 
   display: flex;
   flex-direction: column;
-  margin-bottom: $spacing-01;
   list-style: none;
+  margin-block-end: $spacing-01;
 }
 
 .#{$nav-list-block-class}:focus {
@@ -112,33 +109,32 @@ $nav__icon__position: translate3d(-50%, 0, 0);
 }
 
 .#{$nav-list-block-class}__icon {
-  margin-top: $spacing-01;
-  margin-left: auto;
+  margin-block-start: $spacing-01;
+  margin-inline-start: auto;
   transform: $nav__icon__position rotate(0deg);
   transition-duration: $duration-moderate-02;
   transition-property: transform;
   transition-timing-function: $standard-easing;
   @include rtl {
-    right: $spacing-02;
+    inset-inline-end: $spacing-02;
     transform: $nav__icon__position rotate(180deg);
   }
 }
 
 .#{$nav-list-block-class}--nested {
   overflow: hidden;
-  max-height: 0;
-  padding-left: 0;
-  margin-bottom: 0;
+  margin-block-end: 0;
+  max-block-size: 0;
   opacity: 0;
+  padding-inline-start: 0;
   transition-duration: $duration-moderate-02;
   $transition-property: (max-height, opacity);
   @include rtl {
-    padding-right: 0;
-    padding-left: initial;
+    padding-inline: initial 0;
   }
 
   > .#{$nav-item-block-class}:last-of-type {
-    margin-bottom: $spacing-03;
+    margin-block-end: $spacing-03;
   }
 }
 
@@ -147,7 +143,7 @@ $nav__icon__position: translate3d(-50%, 0, 0);
   @include type.type-style('body-short-01');
 
   position: relative;
-  margin-bottom: $spacing-01;
+  margin-block-end: $spacing-01;
 }
 
 // Content including text and sometimes a product icon.
@@ -157,14 +153,14 @@ $nav__icon__position: translate3d(-50%, 0, 0);
 
 .#{$nav-item-block-class}::before {
   position: absolute;
-  top: 0;
-  left: 0;
   display: inline-block;
-  /* stylelint-disable-next-line -- to-rem carbon replacement for rem */
-  width: to-rem(4px);
-  height: 100%;
   background-color: transparent;
+  block-size: 100%;
   content: '';
+  /* stylelint-disable-next-line -- to-rem carbon replacement for rem */
+  inline-size: to-rem(4px);
+  inset-block-start: 0;
+  inset-inline-start: 0;
   transform: translate3d(-100%, 0, 0);
   transition-property: transform;
 }
@@ -195,11 +191,11 @@ $nav__icon__position: translate3d(-50%, 0, 0);
 
 // Expanded navigation list.
 .#{$nav-item-block-class}--expanded {
-  margin-bottom: $spacing-03;
+  margin-block-end: $spacing-03;
 
   > .#{$nav-list-block-class}--nested {
     /* stylelint-disable-next-line -- to-rem carbon replacement for rem */
-    max-height: to-rem(320px);
+    max-block-size: to-rem(320px);
     opacity: 1;
     transition-timing-function: $ease-in;
   }
@@ -235,9 +231,8 @@ $nav__icon__position: translate3d(-50%, 0, 0);
 
 .#{$nav-item-block-class}__img {
   /* stylelint-disable-next-line -- to-rem carbon replacement for rem */
-  height: to-rem(20px);
-  margin-right: $spacing-04;
-  margin-left: -$spacing-07;
+  block-size: to-rem(20px);
+  margin-inline: -$spacing-07 $spacing-04;
 }
 
 //nav-item__link--external__icon
@@ -246,8 +241,8 @@ $nav__icon__position: translate3d(-50%, 0, 0);
 .#{$nav-item-block-class}__link--external__icon {
   flex-shrink: 0;
   align-self: center;
-  margin-left: $spacing-02;
   fill: $text-primary;
+  margin-inline-start: $spacing-02;
   opacity: 0;
 }
 

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

@@ -10,7 +10,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/components/button/tokens' as *;
 @use '@carbon/styles/scss/spacing' as *;
 @use '@carbon/styles/scss/theme' as *;
@@ -41,15 +41,15 @@ $block-class: #{c4p-settings.$pkg-prefix}--non-linear-reading;
 
 // CLOSED/COLLAPSED STATE, DEFAULT
 .#{$block-class} .#{$block-class}__keyword {
-  height: to-rem(20px);
-  padding-top: 0;
-  padding-right: to-rem(3px);
   border-width: to-rem(1px);
   border-style: solid;
   border-color: $button-tertiary;
   border-radius: $spacing-04;
   background-color: transparent;
+  block-size: to-rem(20px);
   color: $button-tertiary;
+  padding-block-start: 0;
+  padding-inline-end: to-rem(3px);
   white-space: nowrap;
 }
 .#{$block-class} .#{$block-class}__keyword:hover {
@@ -65,7 +65,9 @@ $block-class: #{c4p-settings.$pkg-prefix}--non-linear-reading;
 .#{$block-class} .#{$block-class}__keyword:focus {
   border-color: $text-inverse;
   background-color: $button-tertiary;
-  box-shadow: 0 0 0 1px $text-inverse, 0 0 0 3px $button-tertiary;
+  box-shadow:
+    0 0 0 1px $text-inverse,
+    0 0 0 3px $button-tertiary;
   color: $text-inverse;
 }
 // The "up" chevron
@@ -88,7 +90,9 @@ $block-class: #{c4p-settings.$pkg-prefix}--non-linear-reading;
 .#{$block-class} .#{$block-class}__keyword-open:focus {
   border-color: $text-inverse;
   background-color: transparent;
-  box-shadow: inset 0 0 0 1px $button-tertiary, 0 0 0 1px $text-inverse,
+  box-shadow:
+    inset 0 0 0 1px $button-tertiary,
+    0 0 0 1px $text-inverse,
     0 0 0 3px $button-tertiary;
   color: $button-tertiary;
 }
@@ -102,11 +106,11 @@ $block-class: #{c4p-settings.$pkg-prefix}--non-linear-reading;
 
   display: block;
   padding: $spacing-03 $spacing-04;
-  border-left: to-rem(1.25px) solid $text-primary;
   margin: $spacing-02 0;
   // Onboarding does not always use Carbon defaults/tokens
   // stylelint-disable-next-line carbon/motion-duration-use, carbon/motion-easing-use
   animation: fade 600ms;
+  border-inline-start: to-rem(1.25px) solid $text-primary;
 
   /* stylelint-disable-next-line max-nesting-depth */
   @media (prefers-reduced-motion: reduce) {

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

@@ -7,6 +7,6 @@
 
 // NotificationsPanel uses the following Carbon components:
 // Button, Link, Toggle
-@use '@carbon/react/scss/components/button';
-@use '@carbon/react/scss/components/link';
-@use '@carbon/react/scss/components/toggle';
+@use '@carbon/styles/scss/components/button';
+@use '@carbon/styles/scss/components/link';
+@use '@carbon/styles/scss/components/toggle';