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

package/css/index.css

@@ -3416,9 +3416,6 @@ fieldset[disabled] .cds--form__helper-text {
   justify-content: space-between;
   inline-size: 100%;
 }
-.cds--text-input__label-wrapper .cds--text-input__label-counter {
-  align-self: end;
-}
 
 @keyframes prefix--stroke {
   100% {
@@ -10633,433 +10630,28 @@ button.c4p--add-select__global-filter-toggle--open {
     transform: translateY(-38.5rem);
   }
 }
+.c4p--notifications-panel__entrance {
+  animation: fade-in 240ms cubic-bezier(0.2, 0, 0.38, 0.9);
+}
+
+.c4p--notifications-panel__exit {
+  animation: fade-out forwards 240ms cubic-bezier(0.2, 0, 0.38, 0.9);
+}
+
+@media (prefers-reduced-motion) {
+  .c4p--notifications-panel {
+    animation: none;
+  }
+}
+
 .c4p--notifications-panel__container {
-  --cds-ai-aura-end: rgba(0, 0, 0, 0);
-  --cds-ai-aura-hover-background: #333333;
-  --cds-ai-aura-hover-end: rgba(0, 0, 0, 0);
-  --cds-ai-aura-hover-start: rgba(69, 137, 255, 0.4);
-  --cds-ai-aura-start: rgba(69, 137, 255, 0.1);
-  --cds-ai-aura-start-sm: rgba(69, 137, 255, 0.16);
-  --cds-ai-border-end: #4589ff;
-  --cds-ai-border-start: rgba(166, 200, 255, 0.36);
-  --cds-ai-border-strong: #78a9ff;
-  --cds-ai-drop-shadow: rgba(0, 0, 0, 0.28);
-  --cds-ai-inner-shadow: rgba(69, 137, 255, 0.16);
-  --cds-ai-overlay: rgba(0, 0, 0, 0.5);
-  --cds-ai-popover-background: #161616;
-  --cds-ai-popover-caret-bottom: #4589ff;
-  --cds-ai-popover-caret-bottom-background: #202d45;
-  --cds-ai-popover-caret-bottom-background-actions: #1e283a;
-  --cds-ai-popover-caret-center: #4870b5;
-  --cds-ai-popover-shadow-outer-01: rgba(0, 0, 0, 0.12);
-  --cds-ai-popover-shadow-outer-02: rgba(0, 0, 0, 0.08);
-  --cds-ai-skeleton-background: rgba(120, 169, 255, 0.5);
-  --cds-ai-skeleton-element-background: rgba(120, 169, 255, 0.3);
-  --cds-background: #161616;
-  --cds-background-active: rgba(141, 141, 141, 0.4);
-  --cds-background-brand: #0f62fe;
-  --cds-background-hover: rgba(141, 141, 141, 0.16);
-  --cds-background-inverse: #f4f4f4;
-  --cds-background-inverse-hover: #e8e8e8;
-  --cds-background-selected: rgba(141, 141, 141, 0.24);
-  --cds-background-selected-hover: rgba(141, 141, 141, 0.32);
-  --cds-border-disabled: rgba(141, 141, 141, 0.5);
-  --cds-border-interactive: #4589ff;
-  --cds-border-inverse: #f4f4f4;
-  --cds-border-strong-01: #6f6f6f;
-  --cds-border-strong-02: #8d8d8d;
-  --cds-border-strong-03: #a8a8a8;
-  --cds-border-subtle-00: #393939;
-  --cds-border-subtle-01: #525252;
-  --cds-border-subtle-02: #6f6f6f;
-  --cds-border-subtle-03: #6f6f6f;
-  --cds-border-subtle-selected-01: #6f6f6f;
-  --cds-border-subtle-selected-02: #8d8d8d;
-  --cds-border-subtle-selected-03: #8d8d8d;
-  --cds-border-tile-01: #525252;
-  --cds-border-tile-02: #6f6f6f;
-  --cds-border-tile-03: #8d8d8d;
-  --cds-chat-avatar-agent: #c6c6c6;
-  --cds-chat-avatar-bot: #8d8d8d;
-  --cds-chat-avatar-user: #4589ff;
-  --cds-chat-bubble-agent: #262626;
-  --cds-chat-bubble-border: #525252;
-  --cds-chat-bubble-user: #393939;
-  --cds-chat-button: #78a9ff;
-  --cds-chat-button-active: rgba(141, 141, 141, 0.4);
-  --cds-chat-button-hover: rgba(141, 141, 141, 0.16);
-  --cds-chat-button-selected: rgba(141, 141, 141, 0.24);
-  --cds-chat-button-text-hover: #a6c8ff;
-  --cds-chat-button-text-selected: #c6c6c6;
-  --cds-chat-header-background: #262626;
-  --cds-chat-prompt-background: #161616;
-  --cds-chat-prompt-border-end: rgba(38, 38, 38, 0);
-  --cds-chat-prompt-border-start: #262626;
-  --cds-chat-shell-background: #262626;
-  --cds-field-01: #262626;
-  --cds-field-02: #393939;
-  --cds-field-03: #525252;
-  --cds-field-hover-01: #333333;
-  --cds-field-hover-02: #474747;
-  --cds-field-hover-03: #636363;
-  --cds-focus: #ffffff;
-  --cds-focus-inset: #161616;
-  --cds-focus-inverse: #0f62fe;
-  --cds-highlight: #001d6c;
-  --cds-icon-disabled: rgba(244, 244, 244, 0.25);
-  --cds-icon-interactive: #ffffff;
-  --cds-icon-inverse: #161616;
-  --cds-icon-on-color: #ffffff;
-  --cds-icon-on-color-disabled: rgba(255, 255, 255, 0.25);
-  --cds-icon-primary: #f4f4f4;
-  --cds-icon-secondary: #c6c6c6;
-  --cds-interactive: #4589ff;
-  --cds-layer-01: #262626;
-  --cds-layer-02: #393939;
-  --cds-layer-03: #525252;
-  --cds-layer-accent-01: #393939;
-  --cds-layer-accent-02: #525252;
-  --cds-layer-accent-03: #6f6f6f;
-  --cds-layer-accent-active-01: #6f6f6f;
-  --cds-layer-accent-active-02: #8d8d8d;
-  --cds-layer-accent-active-03: #393939;
-  --cds-layer-accent-hover-01: #474747;
-  --cds-layer-accent-hover-02: #636363;
-  --cds-layer-accent-hover-03: #5e5e5e;
-  --cds-layer-active-01: #525252;
-  --cds-layer-active-02: #6f6f6f;
-  --cds-layer-active-03: #8d8d8d;
-  --cds-layer-hover-01: #333333;
-  --cds-layer-hover-02: #474747;
-  --cds-layer-hover-03: #636363;
-  --cds-layer-selected-01: #393939;
-  --cds-layer-selected-02: #525252;
-  --cds-layer-selected-03: #6f6f6f;
-  --cds-layer-selected-disabled: #a8a8a8;
-  --cds-layer-selected-hover-01: #474747;
-  --cds-layer-selected-hover-02: #636363;
-  --cds-layer-selected-hover-03: #5e5e5e;
-  --cds-layer-selected-inverse: #f4f4f4;
-  --cds-link-inverse: #0f62fe;
-  --cds-link-inverse-active: #161616;
-  --cds-link-inverse-hover: #0043ce;
-  --cds-link-inverse-visited: #8a3ffc;
-  --cds-link-primary: #78a9ff;
-  --cds-link-primary-hover: #a6c8ff;
-  --cds-link-secondary: #a6c8ff;
-  --cds-link-visited: #be95ff;
-  --cds-overlay: rgba(0, 0, 0, 0.65);
-  --cds-shadow: rgba(0, 0, 0, 0.8);
-  --cds-skeleton-background: #292929;
-  --cds-skeleton-element: #393939;
-  --cds-support-caution-major: #ff832b;
-  --cds-support-caution-minor: #f1c21b;
-  --cds-support-caution-undefined: #a56eff;
-  --cds-support-error: #fa4d56;
-  --cds-support-error-inverse: #da1e28;
-  --cds-support-info: #4589ff;
-  --cds-support-info-inverse: #0043ce;
-  --cds-support-success: #42be65;
-  --cds-support-success-inverse: #24a148;
-  --cds-support-warning: #f1c21b;
-  --cds-support-warning-inverse: #f1c21b;
-  --cds-text-disabled: rgba(244, 244, 244, 0.25);
-  --cds-text-error: #ff8389;
-  --cds-text-helper: #a8a8a8;
-  --cds-text-inverse: #161616;
-  --cds-text-on-color: #ffffff;
-  --cds-text-on-color-disabled: rgba(255, 255, 255, 0.25);
-  --cds-text-placeholder: rgba(244, 244, 244, 0.4);
-  --cds-text-primary: #f4f4f4;
-  --cds-text-secondary: #c6c6c6;
-  --cds-toggle-off: #6f6f6f;
-  --cds-spacing-01: 0.125rem;
-  --cds-spacing-02: 0.25rem;
-  --cds-spacing-03: 0.5rem;
-  --cds-spacing-04: 0.75rem;
-  --cds-spacing-05: 1rem;
-  --cds-spacing-06: 1.5rem;
-  --cds-spacing-07: 2rem;
-  --cds-spacing-08: 2.5rem;
-  --cds-spacing-09: 3rem;
-  --cds-spacing-10: 4rem;
-  --cds-spacing-11: 5rem;
-  --cds-spacing-12: 6rem;
-  --cds-spacing-13: 10rem;
-  --cds-fluid-spacing-01: 0;
-  --cds-fluid-spacing-02: 2vw;
-  --cds-fluid-spacing-03: 5vw;
-  --cds-fluid-spacing-04: 10vw;
-  --cds-caption-01-font-size: 0.75rem;
-  --cds-caption-01-font-weight: 400;
-  --cds-caption-01-line-height: 1.33333;
-  --cds-caption-01-letter-spacing: 0.32px;
-  --cds-caption-02-font-size: 0.875rem;
-  --cds-caption-02-font-weight: 400;
-  --cds-caption-02-line-height: 1.28572;
-  --cds-caption-02-letter-spacing: 0.32px;
-  --cds-label-01-font-size: 0.75rem;
-  --cds-label-01-font-weight: 400;
-  --cds-label-01-line-height: 1.33333;
-  --cds-label-01-letter-spacing: 0.32px;
-  --cds-label-02-font-size: 0.875rem;
-  --cds-label-02-font-weight: 400;
-  --cds-label-02-line-height: 1.28572;
-  --cds-label-02-letter-spacing: 0.16px;
-  --cds-helper-text-01-font-size: 0.75rem;
-  --cds-helper-text-01-line-height: 1.33333;
-  --cds-helper-text-01-letter-spacing: 0.32px;
-  --cds-helper-text-02-font-size: 0.875rem;
-  --cds-helper-text-02-font-weight: 400;
-  --cds-helper-text-02-line-height: 1.28572;
-  --cds-helper-text-02-letter-spacing: 0.16px;
-  --cds-body-short-01-font-size: 0.875rem;
-  --cds-body-short-01-font-weight: 400;
-  --cds-body-short-01-line-height: 1.28572;
-  --cds-body-short-01-letter-spacing: 0.16px;
-  --cds-body-short-02-font-size: 1rem;
-  --cds-body-short-02-font-weight: 400;
-  --cds-body-short-02-line-height: 1.375;
-  --cds-body-short-02-letter-spacing: 0;
-  --cds-body-long-01-font-size: 0.875rem;
-  --cds-body-long-01-font-weight: 400;
-  --cds-body-long-01-line-height: 1.42857;
-  --cds-body-long-01-letter-spacing: 0.16px;
-  --cds-body-long-02-font-size: 1rem;
-  --cds-body-long-02-font-weight: 400;
-  --cds-body-long-02-line-height: 1.5;
-  --cds-body-long-02-letter-spacing: 0;
-  --cds-code-01-font-family: 'IBM Plex Mono', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', monospace;
-  --cds-code-01-font-size: 0.75rem;
-  --cds-code-01-font-weight: 400;
-  --cds-code-01-line-height: 1.33333;
-  --cds-code-01-letter-spacing: 0.32px;
-  --cds-code-02-font-family: 'IBM Plex Mono', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', monospace;
-  --cds-code-02-font-size: 0.875rem;
-  --cds-code-02-font-weight: 400;
-  --cds-code-02-line-height: 1.42857;
-  --cds-code-02-letter-spacing: 0.32px;
-  --cds-heading-01-font-size: 0.875rem;
-  --cds-heading-01-font-weight: 600;
-  --cds-heading-01-line-height: 1.42857;
-  --cds-heading-01-letter-spacing: 0.16px;
-  --cds-heading-02-font-size: 1rem;
-  --cds-heading-02-font-weight: 600;
-  --cds-heading-02-line-height: 1.5;
-  --cds-heading-02-letter-spacing: 0;
-  --cds-productive-heading-01-font-size: 0.875rem;
-  --cds-productive-heading-01-font-weight: 600;
-  --cds-productive-heading-01-line-height: 1.28572;
-  --cds-productive-heading-01-letter-spacing: 0.16px;
-  --cds-productive-heading-02-font-size: 1rem;
-  --cds-productive-heading-02-font-weight: 600;
-  --cds-productive-heading-02-line-height: 1.375;
-  --cds-productive-heading-02-letter-spacing: 0;
-  --cds-productive-heading-03-font-size: 1.25rem;
-  --cds-productive-heading-03-font-weight: 400;
-  --cds-productive-heading-03-line-height: 1.4;
-  --cds-productive-heading-03-letter-spacing: 0;
-  --cds-productive-heading-04-font-size: 1.75rem;
-  --cds-productive-heading-04-font-weight: 400;
-  --cds-productive-heading-04-line-height: 1.28572;
-  --cds-productive-heading-04-letter-spacing: 0;
-  --cds-productive-heading-05-font-size: 2rem;
-  --cds-productive-heading-05-font-weight: 400;
-  --cds-productive-heading-05-line-height: 1.25;
-  --cds-productive-heading-05-letter-spacing: 0;
-  --cds-productive-heading-06-font-size: 2.625rem;
-  --cds-productive-heading-06-font-weight: 300;
-  --cds-productive-heading-06-line-height: 1.199;
-  --cds-productive-heading-06-letter-spacing: 0;
-  --cds-productive-heading-07-font-size: 3.375rem;
-  --cds-productive-heading-07-font-weight: 300;
-  --cds-productive-heading-07-line-height: 1.19;
-  --cds-productive-heading-07-letter-spacing: 0;
-  --cds-expressive-paragraph-01-font-size: 1.5rem;
-  --cds-expressive-paragraph-01-font-weight: 300;
-  --cds-expressive-paragraph-01-line-height: 1.334;
-  --cds-expressive-paragraph-01-letter-spacing: 0;
-  --cds-expressive-heading-01-font-size: 0.875rem;
-  --cds-expressive-heading-01-font-weight: 600;
-  --cds-expressive-heading-01-line-height: 1.42857;
-  --cds-expressive-heading-01-letter-spacing: 0.16px;
-  --cds-expressive-heading-02-font-size: 1rem;
-  --cds-expressive-heading-02-font-weight: 600;
-  --cds-expressive-heading-02-line-height: 1.5;
-  --cds-expressive-heading-02-letter-spacing: 0;
-  --cds-expressive-heading-03-font-size: 1.25rem;
-  --cds-expressive-heading-03-font-weight: 400;
-  --cds-expressive-heading-03-line-height: 1.4;
-  --cds-expressive-heading-03-letter-spacing: 0;
-  --cds-expressive-heading-04-font-size: 1.75rem;
-  --cds-expressive-heading-04-font-weight: 400;
-  --cds-expressive-heading-04-line-height: 1.28572;
-  --cds-expressive-heading-04-letter-spacing: 0;
-  --cds-expressive-heading-05-font-size: 2rem;
-  --cds-expressive-heading-05-font-weight: 400;
-  --cds-expressive-heading-05-line-height: 1.25;
-  --cds-expressive-heading-05-letter-spacing: 0;
-  --cds-expressive-heading-06-font-size: 2rem;
-  --cds-expressive-heading-06-font-weight: 600;
-  --cds-expressive-heading-06-line-height: 1.25;
-  --cds-expressive-heading-06-letter-spacing: 0;
-  --cds-quotation-01-font-family: 'IBM Plex Serif', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', serif;
-  --cds-quotation-01-font-size: 1.25rem;
-  --cds-quotation-01-font-weight: 400;
-  --cds-quotation-01-line-height: 1.3;
-  --cds-quotation-01-letter-spacing: 0;
-  --cds-quotation-02-font-family: 'IBM Plex Serif', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', serif;
-  --cds-quotation-02-font-size: 2rem;
-  --cds-quotation-02-font-weight: 300;
-  --cds-quotation-02-line-height: 1.25;
-  --cds-quotation-02-letter-spacing: 0;
-  --cds-display-01-font-size: 2.625rem;
-  --cds-display-01-font-weight: 300;
-  --cds-display-01-line-height: 1.19;
-  --cds-display-01-letter-spacing: 0;
-  --cds-display-02-font-size: 2.625rem;
-  --cds-display-02-font-weight: 600;
-  --cds-display-02-line-height: 1.19;
-  --cds-display-02-letter-spacing: 0;
-  --cds-display-03-font-size: 2.625rem;
-  --cds-display-03-font-weight: 300;
-  --cds-display-03-line-height: 1.19;
-  --cds-display-03-letter-spacing: 0;
-  --cds-display-04-font-size: 2.625rem;
-  --cds-display-04-font-weight: 300;
-  --cds-display-04-line-height: 1.19;
-  --cds-display-04-letter-spacing: 0;
-  --cds-legal-01-font-size: 0.75rem;
-  --cds-legal-01-font-weight: 400;
-  --cds-legal-01-line-height: 1.33333;
-  --cds-legal-01-letter-spacing: 0.32px;
-  --cds-legal-02-font-size: 0.875rem;
-  --cds-legal-02-font-weight: 400;
-  --cds-legal-02-line-height: 1.28572;
-  --cds-legal-02-letter-spacing: 0.16px;
-  --cds-body-compact-01-font-size: 0.875rem;
-  --cds-body-compact-01-font-weight: 400;
-  --cds-body-compact-01-line-height: 1.28572;
-  --cds-body-compact-01-letter-spacing: 0.16px;
-  --cds-body-compact-02-font-size: 1rem;
-  --cds-body-compact-02-font-weight: 400;
-  --cds-body-compact-02-line-height: 1.375;
-  --cds-body-compact-02-letter-spacing: 0;
-  --cds-heading-compact-01-font-size: 0.875rem;
-  --cds-heading-compact-01-font-weight: 600;
-  --cds-heading-compact-01-line-height: 1.28572;
-  --cds-heading-compact-01-letter-spacing: 0.16px;
-  --cds-heading-compact-02-font-size: 1rem;
-  --cds-heading-compact-02-font-weight: 600;
-  --cds-heading-compact-02-line-height: 1.375;
-  --cds-heading-compact-02-letter-spacing: 0;
-  --cds-body-01-font-size: 0.875rem;
-  --cds-body-01-font-weight: 400;
-  --cds-body-01-line-height: 1.42857;
-  --cds-body-01-letter-spacing: 0.16px;
-  --cds-body-02-font-size: 1rem;
-  --cds-body-02-font-weight: 400;
-  --cds-body-02-line-height: 1.5;
-  --cds-body-02-letter-spacing: 0;
-  --cds-heading-03-font-size: 1.25rem;
-  --cds-heading-03-font-weight: 400;
-  --cds-heading-03-line-height: 1.4;
-  --cds-heading-03-letter-spacing: 0;
-  --cds-heading-04-font-size: 1.75rem;
-  --cds-heading-04-font-weight: 400;
-  --cds-heading-04-line-height: 1.28572;
-  --cds-heading-04-letter-spacing: 0;
-  --cds-heading-05-font-size: 2rem;
-  --cds-heading-05-font-weight: 400;
-  --cds-heading-05-line-height: 1.25;
-  --cds-heading-05-letter-spacing: 0;
-  --cds-heading-06-font-size: 2.625rem;
-  --cds-heading-06-font-weight: 300;
-  --cds-heading-06-line-height: 1.199;
-  --cds-heading-06-letter-spacing: 0;
-  --cds-heading-07-font-size: 3.375rem;
-  --cds-heading-07-font-weight: 300;
-  --cds-heading-07-line-height: 1.19;
-  --cds-heading-07-letter-spacing: 0;
-  --cds-fluid-heading-03-font-size: 1.25rem;
-  --cds-fluid-heading-03-font-weight: 400;
-  --cds-fluid-heading-03-line-height: 1.4;
-  --cds-fluid-heading-03-letter-spacing: 0;
-  --cds-fluid-heading-04-font-size: 1.75rem;
-  --cds-fluid-heading-04-font-weight: 400;
-  --cds-fluid-heading-04-line-height: 1.28572;
-  --cds-fluid-heading-04-letter-spacing: 0;
-  --cds-fluid-heading-05-font-size: 2rem;
-  --cds-fluid-heading-05-font-weight: 400;
-  --cds-fluid-heading-05-line-height: 1.25;
-  --cds-fluid-heading-05-letter-spacing: 0;
-  --cds-fluid-heading-06-font-size: 2rem;
-  --cds-fluid-heading-06-font-weight: 600;
-  --cds-fluid-heading-06-line-height: 1.25;
-  --cds-fluid-heading-06-letter-spacing: 0;
-  --cds-fluid-paragraph-01-font-size: 1.5rem;
-  --cds-fluid-paragraph-01-font-weight: 300;
-  --cds-fluid-paragraph-01-line-height: 1.334;
-  --cds-fluid-paragraph-01-letter-spacing: 0;
-  --cds-fluid-quotation-01-font-family: 'IBM Plex Serif', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', serif;
-  --cds-fluid-quotation-01-font-size: 1.25rem;
-  --cds-fluid-quotation-01-font-weight: 400;
-  --cds-fluid-quotation-01-line-height: 1.3;
-  --cds-fluid-quotation-01-letter-spacing: 0;
-  --cds-fluid-quotation-02-font-family: 'IBM Plex Serif', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', serif;
-  --cds-fluid-quotation-02-font-size: 2rem;
-  --cds-fluid-quotation-02-font-weight: 300;
-  --cds-fluid-quotation-02-line-height: 1.25;
-  --cds-fluid-quotation-02-letter-spacing: 0;
-  --cds-fluid-display-01-font-size: 2.625rem;
-  --cds-fluid-display-01-font-weight: 300;
-  --cds-fluid-display-01-line-height: 1.19;
-  --cds-fluid-display-01-letter-spacing: 0;
-  --cds-fluid-display-02-font-size: 2.625rem;
-  --cds-fluid-display-02-font-weight: 600;
-  --cds-fluid-display-02-line-height: 1.19;
-  --cds-fluid-display-02-letter-spacing: 0;
-  --cds-fluid-display-03-font-size: 2.625rem;
-  --cds-fluid-display-03-font-weight: 300;
-  --cds-fluid-display-03-line-height: 1.19;
-  --cds-fluid-display-03-letter-spacing: 0;
-  --cds-fluid-display-04-font-size: 2.625rem;
-  --cds-fluid-display-04-font-weight: 300;
-  --cds-fluid-display-04-line-height: 1.19;
-  --cds-fluid-display-04-letter-spacing: 0;
-  --cds-button-separator: #161616;
-  --cds-button-primary: #0f62fe;
-  --cds-button-secondary: #6f6f6f;
-  --cds-button-tertiary: #ffffff;
-  --cds-button-danger-primary: #da1e28;
-  --cds-button-danger-secondary: #fa4d56;
-  --cds-button-danger-active: #750e13;
-  --cds-button-primary-active: #002d9c;
-  --cds-button-secondary-active: #393939;
-  --cds-button-tertiary-active: #c6c6c6;
-  --cds-button-danger-hover: #b81921;
-  --cds-button-primary-hover: #0050e6;
-  --cds-button-secondary-hover: #5e5e5e;
-  --cds-button-tertiary-hover: #f4f4f4;
-  --cds-button-disabled: rgba(141, 141, 141, 0.3);
-  --cds-layer: var(--cds-layer-01, #f4f4f4);
-  --cds-layer-active: var(--cds-layer-active-01, #c6c6c6);
-  --cds-layer-hover: var(--cds-layer-hover-01, #e8e8e8);
-  --cds-layer-selected: var(--cds-layer-selected-01, #e0e0e0);
-  --cds-layer-selected-hover: var(--cds-layer-selected-hover-01, #d1d1d1);
-  --cds-layer-accent: var(--cds-layer-accent-01, #e0e0e0);
-  --cds-layer-accent-hover: var(--cds-layer-accent-hover-01, #d1d1d1);
-  --cds-layer-accent-active: var(--cds-layer-accent-active-01, #a8a8a8);
-  --cds-field: var(--cds-field-01, #f4f4f4);
-  --cds-field-hover: var(--cds-field-hover-01, #e8e8e8);
-  --cds-border-subtle: var(--cds-border-subtle-00, #e0e0e0);
-  --cds-border-subtle-selected: var(--cds-border-subtle-selected-01, #c6c6c6);
-  --cds-border-strong: var(--cds-border-strong-01, #8d8d8d);
-  --cds-border-tile: var(--cds-border-tile-01, #c6c6c6);
   position: fixed;
   z-index: 2;
   overflow: auto;
-  background-color: var(--cds-background, #ffffff);
+  background-color: var(--cds-layer-01, #f4f4f4);
+  border-block-end: 1px solid var(--cds-border-subtle-02, #e0e0e0);
+  border-inline-start: 1px solid var(--cds-border-subtle-02, #e0e0e0);
+  box-shadow: 0 0.125rem 0.25rem var(--cds-overlay, rgba(22, 22, 22, 0.5));
   color: var(--cds-text-primary, #161616);
   inset-block-start: 3rem;
   inset-inline-end: 0;
@@ -11073,8 +10665,8 @@ button.c4p--add-select__global-filter-toggle--open {
   position: sticky;
   z-index: 2;
   padding: 0.5rem 1rem 1rem;
-  background-color: var(--cds-background, #ffffff);
-  border-block-end: 1px solid var(--cds-layer-02, #ffffff);
+  background-color: var(--cds-layer-01, #f4f4f4);
+  border-block-end: 1px solid var(--cds-border-subtle-01, #c6c6c6);
   inset-block-start: 0;
 }
 .c4p--notifications-panel__container .c4p--notifications-panel__header-container .c4p--notifications-panel__header-flex {
@@ -11136,7 +10728,7 @@ button.c4p--add-select__global-filter-toggle--open {
   align-items: flex-start;
   padding: 1rem;
   border: 0;
-  background-color: var(--cds-background, #ffffff);
+  background-color: var(--cds-layer-01, #f4f4f4);
   cursor: pointer;
   inline-size: 100%;
   min-block-size: 6.25rem;
@@ -11144,12 +10736,12 @@ button.c4p--add-select__global-filter-toggle--open {
   transition: background-color 240ms cubic-bezier(0.2, 0, 0.38, 0.9);
 }
 .c4p--notifications-panel__container .c4p--notifications-panel__notification .c4p--notifications-panel__notification-title {
-  color: var(--cds-text-on-color, #ffffff);
+  color: var(--cds-text-secondary, #525252);
   margin-block-end: 0.25rem;
   font-weight: 400;
 }
 .c4p--notifications-panel__container .c4p--notifications-panel__notification .c4p--notifications-panel__notification-title.c4p--notifications-panel__notification-title-unread {
-  color: var(--cds-text-on-color, #ffffff);
+  color: var(--cds-text-secondary, #525252);
   margin-block-end: 0.25rem;
   font-weight: 600;
 }
@@ -11253,7 +10845,7 @@ button.c4p--add-select__global-filter-toggle--open {
 .c4p--notifications-panel__container .c4p--notifications-panel__notification-previous:not(:first-of-type):before {
   position: absolute;
   margin: 0 auto;
-  background-color: var(--cds-layer-02, #ffffff);
+  background-color: var(--cds-border-subtle-01, #c6c6c6);
   block-size: 1px;
   content: "";
   inline-size: calc(100% - 2 * 1rem);
@@ -11287,19 +10879,17 @@ button.c4p--add-select__global-filter-toggle--open {
   z-index: 2;
   display: flex;
   align-items: center;
-  background-color: var(--cds-background, #ffffff);
+  background-color: var(--cds-layer-01, #f4f4f4);
   block-size: 2.5rem;
-  border-block-start: 1px solid var(--cds-layer-02, #ffffff);
+  border-block-start: 1px solid var(--cds-border-subtle-01, #c6c6c6);
   inset-block-end: 0;
   min-block-size: 2.5rem;
 }
 .c4p--notifications-panel__container .c4p--notifications-panel__bottom-actions .c4p--notifications-panel__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 var(--cds-layer-02, #ffffff);
+  border-inline-end: 1px solid var(--cds-border-subtle-01, #c6c6c6);
   color: var(--cds-text-primary, #161616);
   inline-size: 100%;
   max-inline-size: calc(100% - 2.5rem);
@@ -15672,6 +15262,14 @@ button.c4p--add-select__global-filter-toggle--open {
   component is because we want these colors to always be the same
   despite of which carbon theme the user has.
 */
+.c4p--web-terminal--open {
+  animation: web-terminal-entrance 240ms cubic-bezier(0.2, 0, 0.38, 0.9);
+}
+
+.c4p--web-terminal--closed {
+  animation: web-terminal-exit forwards 240ms cubic-bezier(0.2, 0, 0.38, 0.9);
+}
+
 .c4p--web-terminal {
   --cds-ai-aura-end: rgba(0, 0, 0, 0);
   --cds-ai-aura-hover-background: #474747;
@@ -16143,7 +15741,11 @@ button.c4p--add-select__global-filter-toggle--open {
   inset-block-start: 3rem;
   inset-inline-end: 0;
   max-inline-size: 40rem;
-  /* stylelint-disable-next-line  */
+}
+@media (prefers-reduced-motion) {
+  .c4p--web-terminal {
+    animation: none;
+  }
 }
 
 .c4p--web-terminal__bar {
@@ -23084,181 +22686,133 @@ th.c4p--datagrid__select-all-toggle-on.button {
 
 :root .c4p--user-avatar--order-1-cyan,
 .cds--g10 .c4p--user-avatar--order-1-cyan,
-.cds--white .c4p--user-avatar--order-1-cyan,
-[storybook-carbon-theme=g10] .c4p--user-avatar--order-1-cyan,
-[storybook-carbon-theme=white] .c4p--user-avatar--order-1-cyan {
+.cds--white .c4p--user-avatar--order-1-cyan {
   background-color: #0072c3;
 }
 
 :root .c4p--user-avatar--order-2-gray,
 .cds--g10 .c4p--user-avatar--order-2-gray,
-.cds--white .c4p--user-avatar--order-2-gray,
-[storybook-carbon-theme=g10] .c4p--user-avatar--order-2-gray,
-[storybook-carbon-theme=white] .c4p--user-avatar--order-2-gray {
+.cds--white .c4p--user-avatar--order-2-gray {
   background-color: #6f6f6f;
 }
 
 :root .c4p--user-avatar--order-3-green,
 .cds--g10 .c4p--user-avatar--order-3-green,
-.cds--white .c4p--user-avatar--order-3-green,
-[storybook-carbon-theme=g10] .c4p--user-avatar--order-3-green,
-[storybook-carbon-theme=white] .c4p--user-avatar--order-3-green {
+.cds--white .c4p--user-avatar--order-3-green {
   background-color: #198038;
 }
 
 :root .c4p--user-avatar--order-4-magenta,
 .cds--g10 .c4p--user-avatar--order-4-magenta,
-.cds--white .c4p--user-avatar--order-4-magenta,
-[storybook-carbon-theme=g10] .c4p--user-avatar--order-4-magenta,
-[storybook-carbon-theme=white] .c4p--user-avatar--order-4-magenta {
+.cds--white .c4p--user-avatar--order-4-magenta {
   background-color: #d02670;
 }
 
 :root .c4p--user-avatar--order-5-purple,
 .cds--g10 .c4p--user-avatar--order-5-purple,
-.cds--white .c4p--user-avatar--order-5-purple,
-[storybook-carbon-theme=g10] .c4p--user-avatar--order-5-purple,
-[storybook-carbon-theme=white] .c4p--user-avatar--order-5-purple {
+.cds--white .c4p--user-avatar--order-5-purple {
   background-color: #8a3ffc;
 }
 
 :root .c4p--user-avatar--order-6-teal,
 .cds--g10 .c4p--user-avatar--order-6-teal,
-.cds--white .c4p--user-avatar--order-6-teal,
-[storybook-carbon-theme=g10] .c4p--user-avatar--order-6-teal,
-[storybook-carbon-theme=white] .c4p--user-avatar--order-6-teal {
+.cds--white .c4p--user-avatar--order-6-teal {
   background-color: #007d79;
 }
 
 :root .c4p--user-avatar--order-7-cyan,
 .cds--g10 .c4p--user-avatar--order-7-cyan,
-.cds--white .c4p--user-avatar--order-7-cyan,
-[storybook-carbon-theme=g10] .c4p--user-avatar--order-7-cyan,
-[storybook-carbon-theme=white] .c4p--user-avatar--order-7-cyan {
+.cds--white .c4p--user-avatar--order-7-cyan {
   background-color: #003a6d;
 }
 
 :root .c4p--user-avatar--order-8-gray,
 .cds--g10 .c4p--user-avatar--order-8-gray,
-.cds--white .c4p--user-avatar--order-8-gray,
-[storybook-carbon-theme=g10] .c4p--user-avatar--order-8-gray,
-[storybook-carbon-theme=white] .c4p--user-avatar--order-8-gray {
+.cds--white .c4p--user-avatar--order-8-gray {
   background-color: #393939;
 }
 
 :root .c4p--user-avatar--order-9-green,
 .cds--g10 .c4p--user-avatar--order-9-green,
-.cds--white .c4p--user-avatar--order-9-green,
-[storybook-carbon-theme=g10] .c4p--user-avatar--order-9-green,
-[storybook-carbon-theme=white] .c4p--user-avatar--order-9-green {
+.cds--white .c4p--user-avatar--order-9-green {
   background-color: #044317;
 }
 
 :root .c4p--user-avatar--order-10-magenta,
 .cds--g10 .c4p--user-avatar--order-10-magenta,
-.cds--white .c4p--user-avatar--order-10-magenta,
-[storybook-carbon-theme=g10] .c4p--user-avatar--order-10-magenta,
-[storybook-carbon-theme=white] .c4p--user-avatar--order-10-magenta {
+.cds--white .c4p--user-avatar--order-10-magenta {
   background-color: #740937;
 }
 
 :root .c4p--user-avatar--order-11-purple,
 .cds--g10 .c4p--user-avatar--order-11-purple,
-.cds--white .c4p--user-avatar--order-11-purple,
-[storybook-carbon-theme=g10] .c4p--user-avatar--order-11-purple,
-[storybook-carbon-theme=white] .c4p--user-avatar--order-11-purple {
+.cds--white .c4p--user-avatar--order-11-purple {
   background-color: #491d8b;
 }
 
 :root .c4p--user-avatar--order-12-teal,
 .cds--g10 .c4p--user-avatar--order-12-teal,
-.cds--white .c4p--user-avatar--order-12-teal,
-[storybook-carbon-theme=g10] .c4p--user-avatar--order-12-teal,
-[storybook-carbon-theme=white] .c4p--user-avatar--order-12-teal {
+.cds--white .c4p--user-avatar--order-12-teal {
   background-color: #004144;
 }
 
 .cds--g90 .c4p--user-avatar--order-1-cyan,
-.cds--g100 .c4p--user-avatar--order-1-cyan,
-[storybook-carbon-theme=g90] .c4p--user-avatar--order-1-cyan,
-[storybook-carbon-theme=g100] .c4p--user-avatar--order-1-cyan {
+.cds--g100 .c4p--user-avatar--order-1-cyan {
   background-color: #1192e8;
 }
 
 .cds--g90 .c4p--user-avatar--order-2-gray,
-.cds--g100 .c4p--user-avatar--order-2-gray,
-[storybook-carbon-theme=g90] .c4p--user-avatar--order-2-gray,
-[storybook-carbon-theme=g100] .c4p--user-avatar--order-2-gray {
+.cds--g100 .c4p--user-avatar--order-2-gray {
   background-color: #8d8d8d;
 }
 
 .cds--g90 .c4p--user-avatar--order-3-green,
-.cds--g100 .c4p--user-avatar--order-3-green,
-[storybook-carbon-theme=g90] .c4p--user-avatar--order-3-green,
-[storybook-carbon-theme=g100] .c4p--user-avatar--order-3-green {
+.cds--g100 .c4p--user-avatar--order-3-green {
   background-color: #24a148;
 }
 
 .cds--g90 .c4p--user-avatar--order-4-magenta,
-.cds--g100 .c4p--user-avatar--order-4-magenta,
-[storybook-carbon-theme=g90] .c4p--user-avatar--order-4-magenta,
-[storybook-carbon-theme=g100] .c4p--user-avatar--order-4-magenta {
+.cds--g100 .c4p--user-avatar--order-4-magenta {
   background-color: #ee5396;
 }
 
 .cds--g90 .c4p--user-avatar--order-5-purple,
-.cds--g100 .c4p--user-avatar--order-5-purple,
-[storybook-carbon-theme=g90] .c4p--user-avatar--order-5-purple,
-[storybook-carbon-theme=g100] .c4p--user-avatar--order-5-purple {
+.cds--g100 .c4p--user-avatar--order-5-purple {
   background-color: #a56eff;
 }
 
 .cds--g90 .c4p--user-avatar--order-6-teal,
-.cds--g100 .c4p--user-avatar--order-6-teal,
-[storybook-carbon-theme=g90] .c4p--user-avatar--order-6-teal,
-[storybook-carbon-theme=g100] .c4p--user-avatar--order-6-teal {
+.cds--g100 .c4p--user-avatar--order-6-teal {
   background-color: #009d9a;
 }
 
 .cds--g90 .c4p--user-avatar--order-7-cyan,
-.cds--g100 .c4p--user-avatar--order-7-cyan,
-[storybook-carbon-theme=g90] .c4p--user-avatar--order-7-cyan,
-[storybook-carbon-theme=g100] .c4p--user-avatar--order-7-cyan {
+.cds--g100 .c4p--user-avatar--order-7-cyan {
   background-color: #82cfff;
 }
 
 .cds--g90 .c4p--user-avatar--order-8-gray,
-.cds--g100 .c4p--user-avatar--order-8-gray,
-[storybook-carbon-theme=g90] .c4p--user-avatar--order-8-gray,
-[storybook-carbon-theme=g100] .c4p--user-avatar--order-8-gray {
+.cds--g100 .c4p--user-avatar--order-8-gray {
   background-color: #c6c6c6;
 }
 
 .cds--g90 .c4p--user-avatar--order-9-green,
-.cds--g100 .c4p--user-avatar--order-9-green,
-[storybook-carbon-theme=g90] .c4p--user-avatar--order-9-green,
-[storybook-carbon-theme=g100] .c4p--user-avatar--order-9-green {
+.cds--g100 .c4p--user-avatar--order-9-green {
   background-color: #6fdc8c;
 }
 
 .cds--g90 .c4p--user-avatar--order-10-magenta,
-.cds--g100 .c4p--user-avatar--order-10-magenta,
-[storybook-carbon-theme=g90] .c4p--user-avatar--order-10-magenta,
-[storybook-carbon-theme=g100] .c4p--user-avatar--order-10-magenta {
+.cds--g100 .c4p--user-avatar--order-10-magenta {
   background-color: #ffafd2;
 }
 
 .cds--g90 .c4p--user-avatar--order-11-purple,
-.cds--g100 .c4p--user-avatar--order-11-purple,
-[storybook-carbon-theme=g90] .c4p--user-avatar--order-11-purple,
-[storybook-carbon-theme=g100] .c4p--user-avatar--order-11-purple {
+.cds--g100 .c4p--user-avatar--order-11-purple {
   background-color: #d4bbff;
 }
 
 .cds--g90 .c4p--user-avatar--order-12-teal,
-.cds--g100 .c4p--user-avatar--order-12-teal,
-[storybook-carbon-theme=g90] .c4p--user-avatar--order-12-teal,
-[storybook-carbon-theme=g100] .c4p--user-avatar--order-12-teal {
+.cds--g100 .c4p--user-avatar--order-12-teal {
   background-color: #3ddbd9;
 }
 
@@ -23341,16 +22895,24 @@ th.c4p--datagrid__select-all-toggle-on.button {
 }
 
 .c4p--scroll-gradient__content {
+  display: grid;
   overflow: auto;
   block-size: inherit;
+  grid-template-columns: 1fr;
   inline-size: 100%;
 }
 
 .c4p--scroll-gradient__content-children {
   block-size: 100%;
+  grid-column-start: 1;
+  grid-row-start: 1;
   inline-size: 100%;
 }
 
+.c4p--scroll-gradient__content-children > * {
+  grid-area: 1/1;
+}
+
 .c4p--scroll-gradient__start-vertical,
 .c4p--scroll-gradient__start-horizontal,
 .c4p--scroll-gradient__end-vertical,
@@ -23405,6 +22967,27 @@ th.c4p--datagrid__select-all-toggle-on.button {
   display: block;
 }
 
+.c4p--scroll-gradient [data-start-vertical],
+.c4p--scroll-gradient [data-end-vertical] {
+  block-size: 3rem;
+  grid-column-start: 1;
+  grid-row-start: 1;
+  inline-size: 100%;
+}
+
+.c4p--scroll-gradient [data-end-vertical],
+.c4p--scroll-gradient [data-end-horizontal] {
+  place-self: flex-end;
+}
+
+.c4p--scroll-gradient [data-start-horizontal],
+.c4p--scroll-gradient [data-end-horizontal] {
+  block-size: 100%;
+  grid-column-start: 1;
+  grid-row-start: 1;
+  inline-size: 3rem;
+}
+
 /* stylelint-disable carbon/layout-use */
 /* stylelint-disable function-no-unknown */
 .c4p--status-indicator__title {