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

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

@@ -1,5 +1,5 @@
 //
-// Copyright IBM Corp. 2020, 2021
+// Copyright IBM Corp. 2020, 2025
 //
 // This source code is licensed under the Apache-2.0 license found in the
 // LICENSE file in the root directory of this source tree.
@@ -7,7 +7,6 @@
 
 // Standard imports.
 @use '@carbon/styles/scss/theme' as *;
-@use '@carbon/styles/scss/themes' as *;
 @use '@carbon/styles/scss/spacing' as *;
 @use '@carbon/styles/scss/motion' as *;
 @use '@carbon/styles/scss/type';
@@ -20,11 +19,13 @@
 @use '../EmptyStates/empty-state';
 
 $block-class: #{c4p-settings.$pkg-prefix}--notifications-panel;
+$block-size: 38.5rem;
+
 @keyframes fade-in {
   0% {
     opacity: 0;
     // stylelint-disable-next-line carbon/layout-use
-    transform: translateY(-38.5rem); // the height of the notification panel
+    transform: translateY(-$block-size); // the height of the notification panel
   }
 
   100% {
@@ -42,23 +43,37 @@ $block-class: #{c4p-settings.$pkg-prefix}--notifications-panel;
   100% {
     opacity: 0;
     // stylelint-disable-next-line carbon/layout-use
-    transform: translateY(-38.5rem); // the height of the notification panel
+    transform: translateY(-$block-size); // the height of the notification panel
   }
 }
+.#{$block-class}__entrance {
+  animation: fade-in $duration-moderate-02 motion(standard);
+}
 
-.#{$block-class}__container {
-  @include theme($g100);
+.#{$block-class}__exit {
+  animation: fade-out forwards $duration-moderate-02 motion(standard);
+}
 
+.#{$block-class} {
+  @media (prefers-reduced-motion) {
+    animation: none;
+  }
+}
+
+.#{$block-class}__container {
   position: fixed;
   z-index: 2;
   overflow: auto;
-  background-color: $background;
+  background-color: $layer-01;
+  border-block-end: 1px solid $border-subtle-02;
+  border-inline-start: 1px solid $border-subtle-02;
+  box-shadow: 0 $spacing-01 $spacing-02 $overlay;
   color: $text-primary;
   inset-block-start: $spacing-09;
   inset-inline-end: 0;
-  max-block-size: 38.5rem;
+  max-block-size: $block-size;
   max-inline-size: 22.75rem;
-  min-block-size: 38.5rem;
+  min-block-size: $block-size;
   min-inline-size: 20rem;
   transition: transform $duration-fast-02 motion(standard);
 
@@ -66,8 +81,8 @@ $block-class: #{c4p-settings.$pkg-prefix}--notifications-panel;
     position: sticky;
     z-index: 2;
     padding: $spacing-03 $spacing-05 $spacing-05;
-    background-color: $background;
-    border-block-end: 1px solid $layer-02;
+    background-color: $layer-01;
+    border-block-end: 1px solid $border-subtle-01;
     inset-block-start: 0;
     .#{$block-class}__header-flex {
       display: flex;
@@ -119,19 +134,19 @@ $block-class: #{c4p-settings.$pkg-prefix}--notifications-panel;
     align-items: flex-start;
     padding: $spacing-05;
     border: 0;
-    background-color: $background;
+    background-color: $layer-01;
     cursor: pointer;
     inline-size: 100%;
     min-block-size: 6.25rem;
     text-align: start;
     transition: background-color $duration-moderate-02 motion(standard);
     .#{$block-class}__notification-title {
-      color: $text-on-color;
+      color: $text-secondary;
       margin-block-end: $spacing-02;
       @include font-weight('regular');
     }
     .#{$block-class}__notification-title.#{$block-class}__notification-title-unread {
-      color: $text-on-color;
+      color: $text-secondary;
       margin-block-end: $spacing-02;
       @include font-weight('semibold');
     }
@@ -235,7 +250,7 @@ $block-class: #{c4p-settings.$pkg-prefix}--notifications-panel;
   .#{$block-class}__notification-previous:not(:first-of-type):before {
     position: absolute;
     margin: 0 auto;
-    background-color: $layer-02;
+    background-color: $border-subtle-01;
     block-size: 1px;
     content: '';
     inline-size: calc(100% - (2 * #{$spacing-05}));
@@ -269,18 +284,16 @@ $block-class: #{c4p-settings.$pkg-prefix}--notifications-panel;
     z-index: 2;
     display: flex;
     align-items: center;
-    background-color: $background;
+    background-color: $layer-01;
     block-size: 2.5rem;
-    border-block-start: 1px solid $layer-02;
+    border-block-start: 1px solid $border-subtle-01;
     inset-block-end: 0;
     min-block-size: 2.5rem;
     .#{$block-class}__view-all-button {
       display: flex;
-      width: 100%;
-      max-width: calc(100% - 2.5rem);
       align-items: center;
       block-size: 2.5rem;
-      border-inline-end: 1px solid $layer-02;
+      border-inline-end: 1px solid $border-subtle-01;
       color: $text-primary;
       inline-size: 100%;
       max-inline-size: calc(100% - 2.5rem);

package/scss/components/ScrollGradient/_scroll-gradient.scss

@@ -12,6 +12,7 @@
 @use '@carbon/styles/scss/spacing' as *;
 
 $block-class: #{c4p-settings.$pkg-prefix}--scroll-gradient;
+$intersection-value: 3rem;
 
 .#{$block-class} {
   position: relative;
@@ -22,15 +23,23 @@ $block-class: #{c4p-settings.$pkg-prefix}--scroll-gradient;
   inline-size: inherit;
 }
 .#{$block-class}__content {
+  display: grid;
   overflow: auto;
   block-size: inherit;
+  grid-template-columns: 1fr;
   inline-size: 100%;
 }
 
 .#{$block-class}__content-children {
   block-size: 100%;
+  grid-column-start: 1;
+  grid-row-start: 1;
   inline-size: 100%;
 }
+
+.#{$block-class}__content-children > * {
+  grid-area: 1 / 1;
+}
 // All gradients
 .#{$block-class}__start-vertical,
 .#{$block-class}__start-horizontal,
@@ -100,3 +109,24 @@ $block-class: #{c4p-settings.$pkg-prefix}--scroll-gradient;
   .#{$block-class}__end-horizontal {
   display: block;
 }
+
+.#{$block-class} [data-start-vertical],
+.#{$block-class} [data-end-vertical] {
+  block-size: $intersection-value;
+  grid-column-start: 1;
+  grid-row-start: 1;
+  inline-size: 100%;
+}
+
+.#{$block-class} [data-end-vertical],
+.#{$block-class} [data-end-horizontal] {
+  place-self: flex-end;
+}
+
+.#{$block-class} [data-start-horizontal],
+.#{$block-class} [data-end-horizontal] {
+  block-size: 100%;
+  grid-column-start: 1;
+  grid-row-start: 1;
+  inline-size: $intersection-value;
+}

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

@@ -72,9 +72,7 @@ $sizes: (
 @mixin setLightBg($order, $color) {
   :root .#{$block-class}--#{$order},
   .#{$carbon-prefix}--g10 .#{$block-class}--#{$order},
-  .#{$carbon-prefix}--white .#{$block-class}--#{$order},
-  [storybook-carbon-theme='g10'] .#{$block-class}--#{$order},
-  [storybook-carbon-theme='white'] .#{$block-class}--#{$order} {
+  .#{$carbon-prefix}--white .#{$block-class}--#{$order} {
     @include setBgColor($color);
   }
 }
@@ -82,9 +80,7 @@ $sizes: (
 //this mixin allows you to set background color based on the darker themes such as g90 and g100
 @mixin setDarkBg($order, $color) {
   .#{$carbon-prefix}--g90 .#{$block-class}--#{$order},
-  .#{$carbon-prefix}--g100 .#{$block-class}--#{$order},
-  [storybook-carbon-theme='g90'] .#{$block-class}--#{$order},
-  [storybook-carbon-theme='g100'] .#{$block-class}--#{$order} {
+  .#{$carbon-prefix}--g100 .#{$block-class}--#{$order} {
     @include setBgColor($color);
   }
 }

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

@@ -8,6 +8,7 @@
 // Standard imports.
 @use '@carbon/styles/scss/colors' as *;
 @use '@carbon/styles/scss/spacing' as *;
+@use '@carbon/styles/scss/motion' as *;
 @use '@carbon/styles/scss/themes' as *;
 @use '@carbon/styles/scss/theme' as *;
 @use '../../global/styles/project-settings' as *;
@@ -47,6 +48,14 @@ $block-class: #{$pkg-prefix}--web-terminal;
   despite of which carbon theme the user has.
 */
 
+.#{$block-class}--open {
+  animation: web-terminal-entrance $duration-moderate-02 motion(standard);
+}
+
+.#{$block-class}--closed {
+  animation: web-terminal-exit forwards $duration-moderate-02 motion(standard);
+}
+
 .#{$block-class} {
   @include theme($g90);
 
@@ -58,7 +67,10 @@ $block-class: #{$pkg-prefix}--web-terminal;
   inset-block-start: $spacing-09;
   inset-inline-end: 0;
   max-inline-size: $web-terminal-width;
-  /* stylelint-disable-next-line  */
+
+  @media (prefers-reduced-motion) {
+    animation: none;
+  }
 }
 
 .#{$block-class}__bar {