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

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

@@ -51,24 +51,24 @@ $block-class: #{c4p-settings.$pkg-prefix}--notifications-panel;
 
   position: fixed;
   z-index: 2;
-  top: $spacing-09;
-  right: 0;
   overflow: auto;
-  min-width: 20rem;
-  max-width: 22.75rem;
-  min-height: 38.5rem;
-  max-height: 38.5rem;
   background-color: $background;
   color: $text-primary;
+  inset-block-start: $spacing-09;
+  inset-inline-end: 0;
+  max-block-size: 38.5rem;
+  max-inline-size: 22.75rem;
+  min-block-size: 38.5rem;
+  min-inline-size: 20rem;
   transition: transform $duration-fast-02 motion(standard);
 
   .#{$block-class}__header-container {
     position: sticky;
     z-index: 2;
-    top: 0;
     padding: $spacing-03 $spacing-05 $spacing-05;
-    border-bottom: 1px solid $layer-02;
     background-color: $background;
+    border-block-end: 1px solid $layer-02;
+    inset-block-start: 0;
     .#{$block-class}__header-flex {
       display: flex;
       align-items: center;
@@ -93,11 +93,11 @@ $block-class: #{c4p-settings.$pkg-prefix}--notifications-panel;
 
     position: sticky;
     z-index: 2;
-    // stylelint-disable-next-line carbon/layout-use
-    top: 4.8125rem;
     padding: $spacing-03 $spacing-05;
     background-color: $layer-01;
     color: $text-secondary;
+    // stylelint-disable-next-line carbon/layout-use
+    inset-block-start: 4.8125rem;
   }
   .#{$block-class}__notification:hover,
   .#{$block-class}__notification:focus {
@@ -108,37 +108,39 @@ $block-class: #{c4p-settings.$pkg-prefix}--notifications-panel;
   }
   .#{$block-class}__notification:focus {
     border-color: $focus;
-    box-shadow: inset 0 0 0 2px $focus, inset 0 0 0 2px $background;
+    box-shadow:
+      inset 0 0 0 2px $focus,
+      inset 0 0 0 2px $background;
     outline: 0;
   }
   .#{$block-class}__notification {
     position: relative;
     display: flex;
-    width: 100%;
-    min-height: 6.25rem;
     align-items: flex-start;
     padding: $spacing-05;
     border: 0;
     background-color: $background;
     cursor: pointer;
-    text-align: left;
+    inline-size: 100%;
+    min-block-size: 6.25rem;
+    text-align: start;
     transition: background-color $duration-moderate-02 motion(standard);
     .#{$block-class}__notification-title {
-      margin-bottom: $spacing-02;
       color: $text-on-color;
+      margin-block-end: $spacing-02;
       @include font-weight('regular');
     }
     .#{$block-class}__notification-title.#{$block-class}__notification-title-unread {
-      margin-bottom: $spacing-02;
       color: $text-on-color;
+      margin-block-end: $spacing-02;
       @include font-weight('semibold');
     }
     .#{$block-class}__notifications-link {
       @include type.type-style('label-01');
     }
     .#{$block-class}__notification-status-icon {
-      min-width: 1rem;
-      margin-right: $spacing-03;
+      margin-inline-end: $spacing-03;
+      min-inline-size: 1rem;
       &.#{$block-class}__notification-status-icon-error {
         fill: $support-error;
       }
@@ -154,7 +156,7 @@ $block-class: #{c4p-settings.$pkg-prefix}--notifications-panel;
     }
     .#{$block-class}__notification-content {
       .#{$block-class}__notification-time-label {
-        margin-bottom: $spacing-03;
+        margin-block-end: $spacing-03;
       }
       .#{$block-class}__notification-time-label,
       .#{$block-class}__notification-description {
@@ -168,19 +170,23 @@ $block-class: #{c4p-settings.$pkg-prefix}--notifications-panel;
           overflow: hidden;
           -webkit-box-orient: vertical;
           -webkit-line-clamp: 2;
+          line-clamp: 2;
         }
         &.#{$block-class}__notification-long-description {
           display: block;
           overflow: initial;
           -webkit-line-clamp: initial;
+          line-clamp: initial;
         }
       }
       .#{$block-class}__notification-read-more-button,
       .#{$block-class}__notification-read-less-button {
         @include type.type-style('label-01');
 
-        min-width: 5.5rem;
+        display: flex;
+        align-items: center;
         padding: 0;
+        min-inline-size: 5.5rem;
 
         .#{c4p-settings.$carbon-prefix}--btn__icon {
           // stylelint-disable-next-line carbon/motion-easing-use
@@ -207,14 +213,14 @@ $block-class: #{c4p-settings.$pkg-prefix}--notifications-panel;
     }
     .#{$block-class}__dismiss-single-button {
       position: absolute;
-      top: 0;
-      right: 0;
       display: flex;
-      min-width: 2rem;
       align-items: center;
       justify-content: center;
       padding: 0;
       color: $text-primary;
+      inset-block-start: 0;
+      inset-inline-end: 0;
+      min-inline-size: 2rem;
       opacity: 0;
 
       /* stylelint-disable-next-line max-nesting-depth */
@@ -228,12 +234,12 @@ $block-class: #{c4p-settings.$pkg-prefix}--notifications-panel;
   .#{$block-class}__notification-yesterday:not(:first-of-type):before,
   .#{$block-class}__notification-previous:not(:first-of-type):before {
     position: absolute;
-    top: 0;
-    width: calc(100% - (2 * #{$spacing-05}));
-    height: 1px;
     margin: 0 auto;
     background-color: $layer-02;
+    block-size: 1px;
     content: '';
+    inline-size: calc(100% - (2 * #{$spacing-05}));
+    inset-block-start: 0;
     transition: background-color $duration-moderate-02 motion(standard);
   }
   .#{$block-class}__notification-today:hover
@@ -246,45 +252,49 @@ $block-class: #{c4p-settings.$pkg-prefix}--notifications-panel;
   }
   .#{$block-class}__main-section-empty.#{$block-class}__main-section {
     display: flex;
-    height: 100%;
-    min-height: initial;
     align-items: center;
     justify-content: center;
-    margin-top: $spacing-13;
+    block-size: 100%;
+    margin-block-start: $spacing-13;
+    min-block-size: initial;
     .#{c4p-settings.$pkg-prefix}-subtext {
       @include type.type-style('body-compact-01');
     }
   }
   .#{$block-class}__main-section {
-    min-height: 498px;
+    min-block-size: 498px;
   }
   .#{$block-class}__bottom-actions {
     position: sticky;
     z-index: 2;
-    bottom: 0;
     display: flex;
-    height: 2.5rem;
-    min-height: 2.5rem;
     align-items: center;
-    border-top: 1px solid $layer-02;
     background-color: $background;
+    block-size: 2.5rem;
+    border-block-start: 1px solid $layer-02;
+    inset-block-end: 0;
+    min-block-size: 2.5rem;
     .#{$block-class}__view-all-button {
+      display: flex;
       width: 100%;
       max-width: calc(100% - 2.5rem);
-      height: 2.5rem;
-      min-height: 2.5rem;
-      border-right: 1px solid $layer-02;
+      align-items: center;
+      block-size: 2.5rem;
+      border-inline-end: 1px solid $layer-02;
       color: $text-primary;
+      inline-size: 100%;
+      max-inline-size: calc(100% - 2.5rem);
+      min-block-size: 2.5rem;
     }
     .#{$block-class}__settings-button {
       display: flex;
-      min-width: 2.5rem;
-      height: 2.5rem;
-      min-height: 2.5rem;
       align-items: center;
       justify-content: center;
       padding: 0;
+      block-size: 2.5rem;
       color: $text-primary;
+      min-block-size: 2.5rem;
+      min-inline-size: 2.5rem;
     }
     .#{$block-class}__settings-button
       .#{c4p-settings.$carbon-prefix}--btn__icon {

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

@@ -7,4 +7,4 @@
 
 // OptionsTile uses the following Carbon components:
 // Toggle
-@use '@carbon/react/scss/components/toggle';
+@use '@carbon/styles/scss/components/toggle';

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

@@ -10,7 +10,7 @@
 @use '@carbon/styles/scss/spacing' as *;
 @use '@carbon/styles/scss/type';
 @use '@carbon/styles/scss/motion' as *;
-@use '@carbon/react/scss/colors' as *;
+@use '@carbon/styles/scss/colors' as *;
 @use '../../global/styles/project-settings' as c4p-settings;
 @use '../../global/styles/mixins' as *;
 
@@ -22,23 +22,23 @@ $block-class: #{c4p-settings.$pkg-prefix}--options-tile;
 
 .#{$block-class} {
   position: relative;
-  border-bottom: 1px solid $border-subtle;
   background-color: $layer;
+  border-block-end: 1px solid $border-subtle;
 }
 
 .#{$block-class}__toggle-container {
   position: absolute;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  width: calc(
+  inline-size: calc(
     #{$spacing-05} + 2rem + #{$spacing-05}
   ); // spacing + toggle width + spacing
+
+  inset-block: 0;
+  inset-inline-end: 0;
 }
 
 .#{$block-class}__toggle {
   position: absolute;
-  right: $spacing-05;
+  inset-inline-end: $spacing-05;
 }
 
 .#{$block-class}__toggle
@@ -56,8 +56,8 @@ $block-class: #{c4p-settings.$pkg-prefix}--options-tile;
   display: grid;
   box-sizing: border-box;
   align-items: center;
-  padding-right: $spacing-05;
   grid-template-columns: 3rem 1fr 2rem; // chevron container, heading, toggle width
+  padding-inline-end: $spacing-05;
 }
 
 .#{$block-class}__header {
@@ -92,9 +92,9 @@ $block-class: #{c4p-settings.$pkg-prefix}--options-tile;
   @include type.type-style('helper-text-01');
 
   display: grid;
-  height: $spacing-05;
-  margin-top: $spacing-02;
+  block-size: $spacing-05;
   color: $text-secondary;
+  margin-block-start: $spacing-02;
   opacity: 1;
   transition-duration: $duration-moderate-01;
   transition-property: height, opacity, margin-top;
@@ -132,10 +132,10 @@ $block-class: #{c4p-settings.$pkg-prefix}--options-tile;
 
 .#{$block-class}__summary-text {
   overflow: hidden;
-  height: max-content;
+  block-size: max-content;
   // spacing-05 + toggle width
   // stylelint-disable-next-line carbon/layout-use
-  padding-right: calc(#{$spacing-05} + 2rem);
+  padding-inline-end: calc(#{$spacing-05} + 2rem);
   text-overflow: ellipsis;
   white-space: nowrap;
 }
@@ -147,10 +147,9 @@ $block-class: #{c4p-settings.$pkg-prefix}--options-tile;
 }
 
 .#{$block-class}__content {
-  padding-right: $spacing-05;
+  padding-inline: $spacing-09 $spacing-05;
   // spacing-05 + chevron size + spacing-05
   // stylelint-disable-next-line carbon/layout-use
-  padding-left: calc(#{$spacing-05} * 2 + 1rem);
 }
 
 .#{$block-class}__content
@@ -167,8 +166,8 @@ $block-class: #{c4p-settings.$pkg-prefix}--options-tile;
     .#{$block-class}__summary--closing
   ),
 .#{$block-class}__summary--hidden {
-  height: 0;
-  margin-top: 0;
+  block-size: 0;
+  margin-block-start: 0;
   opacity: 0;
 }
 
@@ -179,8 +178,7 @@ $block-class: #{c4p-settings.$pkg-prefix}--options-tile;
 }
 
 .#{$block-class} > details[open] .#{$block-class}__content {
-  padding-top: $spacing-03;
-  padding-bottom: $spacing-06;
+  padding-block: $spacing-03 $spacing-06;
 }
 
 .#{$block-class}__locked-text {
@@ -188,36 +186,36 @@ $block-class: #{c4p-settings.$pkg-prefix}--options-tile;
 
   display: inline-flex;
   align-items: center;
-  margin-bottom: $spacing-06;
   color: $text-secondary;
+  margin-block-end: $spacing-06;
 }
 
 .#{$block-class}__locked-text > svg {
-  margin-right: $spacing-02;
+  margin-inline-end: $spacing-02;
 }
 
 .#{$block-class}--lg .#{$block-class}__header,
 .#{$block-class}--lg .#{$block-class}__static-content {
-  height: 3rem;
+  block-size: 3rem;
 }
 
 .#{$block-class}--xl .#{$block-class}__header,
 .#{$block-class}--xl .#{$block-class}__static-content {
-  height: 4rem;
+  block-size: 4rem;
 }
 
 .#{$block-class}--lg .#{$block-class}__toggle {
   // "top" shouldn't be spacing token as it depends on the toggle size
-  top: $spacing-05;
+  inset-block-start: $spacing-05;
 }
 
 .#{$block-class}--xl .#{$block-class}__toggle {
   // "top" shouldn't be spacing token as it depends on the toggle size
-  top: $spacing-06;
+  inset-block-start: $spacing-06;
 }
 
 .#{$block-class}--lg .#{$block-class}__summary {
-  margin-top: $spacing-01;
+  margin-block-start: $spacing-01;
 }
 
 @media (prefers-reduced-motion: reduce) {

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

@@ -7,7 +7,7 @@
 
 // PageHeader uses the following Carbon components:
 // BreadcrumbItem, Grid, Column, Row, Button, SkeletonText, Tag
-@use '@carbon/react/scss/components/breadcrumb';
-@use '@carbon/react/scss/components/button';
-@use '@carbon/react/scss/components/skeleton-styles';
-@use '@carbon/react/scss/components/tag';
+@use '@carbon/styles/scss/components/breadcrumb';
+@use '@carbon/styles/scss/components/button';
+@use '@carbon/styles/scss/components/skeleton-styles';
+@use '@carbon/styles/scss/components/tag';