@carbon/styles 1.49.0 → 1.50.0

package/css/styles.css

@@ -2764,6 +2764,7 @@ em {
   --cds-ai-aura-hover-end: rgba(255, 255, 255, 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-table: rgba(69, 137, 255, 0.15);
   --cds-ai-border-end: #d0e2ff;
   --cds-ai-border-start: #78a9ff;
   --cds-ai-border-strong: #4589ff;
@@ -2796,9 +2797,9 @@ em {
   --cds-border-tile-01: #c6c6c6;
   --cds-border-tile-02: #a8a8a8;
   --cds-border-tile-03: #c6c6c6;
-  --cds-chat-avatar-agent: #161616;
-  --cds-chat-avatar-bot: #0f62fe;
-  --cds-chat-avatar-user: #161616;
+  --cds-chat-avatar-agent: #393939;
+  --cds-chat-avatar-bot: #6f6f6f;
+  --cds-chat-avatar-user: #0f62fe;
   --cds-chat-bubble-agent: #ffffff;
   --cds-chat-bubble-agent-border: #e0e0e0;
   --cds-chat-bubble-user: #e0e0e0;
@@ -2983,6 +2984,7 @@ em {
   --cds-ai-aura-hover-end: rgba(255, 255, 255, 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-table: rgba(69, 137, 255, 0.15);
   --cds-ai-border-end: #d0e2ff;
   --cds-ai-border-start: #78a9ff;
   --cds-ai-border-strong: #4589ff;
@@ -3015,9 +3017,9 @@ em {
   --cds-border-tile-01: #a8a8a8;
   --cds-border-tile-02: #c6c6c6;
   --cds-border-tile-03: #a8a8a8;
-  --cds-chat-avatar-agent: #161616;
-  --cds-chat-avatar-bot: #0f62fe;
-  --cds-chat-avatar-user: #161616;
+  --cds-chat-avatar-agent: #393939;
+  --cds-chat-avatar-bot: #6f6f6f;
+  --cds-chat-avatar-user: #0f62fe;
   --cds-chat-bubble-agent: #ffffff;
   --cds-chat-bubble-agent-border: #e0e0e0;
   --cds-chat-bubble-user: #e0e0e0;
@@ -3202,6 +3204,7 @@ em {
   --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-table: rgba(69, 137, 255, 0.15);
   --cds-ai-border-end: rgba(166, 200, 255, 0.24);
   --cds-ai-border-start: #4589ff;
   --cds-ai-border-strong: #78a9ff;
@@ -3233,9 +3236,9 @@ em {
   --cds-border-tile-01: #6f6f6f;
   --cds-border-tile-02: #8d8d8d;
   --cds-border-tile-03: #a8a8a8;
-  --cds-chat-avatar-agent: #f4f4f4;
-  --cds-chat-avatar-bot: #4589ff;
-  --cds-chat-avatar-user: #f4f4f4;
+  --cds-chat-avatar-agent: #c6c6c6;
+  --cds-chat-avatar-bot: #8d8d8d;
+  --cds-chat-avatar-user: #4589ff;
   --cds-chat-bubble-agent: #262626;
   --cds-chat-bubble-agent-border: #525252;
   --cds-chat-bubble-user: #393939;
@@ -3417,6 +3420,7 @@ em {
   --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-table: rgba(69, 137, 255, 0.15);
   --cds-ai-border-end: rgba(166, 200, 255, 0.24);
   --cds-ai-border-start: #4589ff;
   --cds-ai-border-strong: #78a9ff;
@@ -3448,9 +3452,9 @@ em {
   --cds-border-tile-01: #525252;
   --cds-border-tile-02: #6f6f6f;
   --cds-border-tile-03: #8d8d8d;
-  --cds-chat-avatar-agent: #f4f4f4;
-  --cds-chat-avatar-bot: #4589ff;
-  --cds-chat-avatar-user: #f4f4f4;
+  --cds-chat-avatar-agent: #c6c6c6;
+  --cds-chat-avatar-bot: #8d8d8d;
+  --cds-chat-avatar-user: #4589ff;
   --cds-chat-bubble-agent: #262626;
   --cds-chat-bubble-agent-border: #525252;
   --cds-chat-bubble-user: #393939;
@@ -5337,6 +5341,14 @@ a.cds--overflow-menu-options__btn::before {
 }
 
 /*stylelint-enable */
+.cds--overflow-menu__top-start {
+  transform: translate(0, calc(-100% - var(--cds-popover-offset, 2.5rem)));
+}
+
+.cds--overflow-menu__top-end {
+  transform: translate(0, calc(-100% - var(--cds-popover-offset, 2.5rem)));
+}
+
 .cds--breadcrumb {
   box-sizing: border-box;
   padding: 0;
@@ -5624,6 +5636,60 @@ a.cds--overflow-menu-options__btn::before {
   margin-inline-start: 0.5rem;
 }
 
+.cds--chat-btn {
+  border-radius: 1.5rem;
+}
+
+.cds--chat-btn.cds--btn--md {
+  border-radius: 1.25rem;
+}
+
+.cds--chat-btn.cds--btn--sm {
+  border-radius: 1rem;
+}
+
+.cds--chat-btn--quick-action {
+  align-items: center;
+  border: 1px solid var(--cds-link-primary, #0f62fe);
+}
+
+.cds--chat-btn--quick-action:hover:not(:active):not([disabled]) {
+  border-color: transparent;
+  background: var(--cds-background-hover, rgba(141, 141, 141, 0.12));
+}
+
+.cds--chat-btn--quick-action.cds--btn--ghost:focus {
+  border-color: var(--cds-focus, #0f62fe);
+  box-shadow: inset 0 0 0 1px var(--cds-focus, #0f62fe);
+}
+
+.cds--chat-btn--quick-action.cds--btn--ghost:hover:focus {
+  border-color: var(--cds-focus, #0f62fe);
+  box-shadow: inset 0 0 0 1px var(--cds-focus-inset, #ffffff);
+}
+
+.cds--chat-btn--quick-action[disabled],
+.cds--chat-btn--quick-action[disabled]:hover {
+  border-color: var(--cds-button-disabled, #c6c6c6);
+  color: var(--cds-button-disabled, #c6c6c6);
+}
+
+.cds--chat-btn--quick-action--selected,
+.cds--chat-btn--quick-action--selected[disabled],
+.cds--chat-btn--quick-action--selected[disabled]:hover {
+  border-color: transparent;
+  background: var(--cds-background-selected, rgba(141, 141, 141, 0.2));
+  color: var(--cds-text-secondary, #525252);
+}
+
+.cds--chat-btn--quick-action--selected:hover {
+  color: var(--cds-text-secondary, #525252);
+}
+
+.cds--chat-btn.cds--skeleton {
+  overflow: hidden;
+}
+
 input:-webkit-autofill,
 input:-webkit-autofill:hover,
 input:-webkit-autofill:focus,
@@ -9084,19 +9150,28 @@ fieldset[disabled] .cds--form__helper-text {
 }
 
 .cds--combo-button__container--sm .cds--combo-button__primary-action {
-  min-inline-size: 9.9375rem;
+  min-inline-size: 7.9375rem;
 }
 
 .cds--combo-button__container--md .cds--combo-button__primary-action {
-  min-inline-size: 9.4375rem;
+  min-inline-size: 7.4375rem;
 }
 
 .cds--combo-button__container--lg .cds--combo-button__primary-action {
-  min-inline-size: 8.9375rem;
+  min-inline-size: 6.9375rem;
 }
 
 .cds--combo-button__primary-action .cds--btn {
   inline-size: 100%;
+  max-inline-size: 14.9375rem;
+  min-inline-size: 6.9375rem;
+}
+
+.cds--combo-button__primary-action button {
+  display: block;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 
 .cds--combo-button__trigger svg {
@@ -9107,6 +9182,18 @@ fieldset[disabled] .cds--form__helper-text {
   transform: rotate(180deg);
 }
 
+.cds--combo-button__top {
+  transform: translate(0, calc(-100% - var(--cds-popover-offset, 3rem)));
+}
+
+.cds--combo-button__top-start {
+  transform: translate(0, calc(-100% - var(--cds-popover-offset, 3rem)));
+}
+
+.cds--combo-button__top-end {
+  transform: translate(0, calc(-100% - var(--cds-popover-offset, 3rem)));
+}
+
 .cds--contained-list {
   --cds-layout-size-height-local: clamp(max(var(--cds-layout-size-height-min), var(--cds-layout-size-height-sm)), var(--cds-layout-size-height, var(--cds-layout-size-height-lg)), min(var(--cds-layout-size-height-max), var(--cds-layout-size-height-xl)));
   --cds-layout-density-padding-inline-local: clamp(var(--cds-layout-density-padding-inline-min), var(--cds-layout-density-padding-inline, var(--cds-layout-density-padding-inline-normal)), var(--cds-layout-density-padding-inline-max));
@@ -10652,20 +10739,67 @@ tr.cds--data-table--selected:last-of-type td {
   padding-inline-end: 0;
 }
 
-.cds--data-table tbody tr:has(> .cds--table-column-slug--active) {
-  background-image: linear-gradient(90deg, var(--cds-ai-inner-shadow, rgba(69, 137, 255, 0.2)) 0%, 15%, var(--cds-ai-aura-end, rgba(255, 255, 255, 0)) 50%, transparent 100%);
-  border-block-end-color: var(--cds-ai-border-strong, #4589ff);
+tr.cds--data-table--slug-row,
+tr.cds--data-table--slug-row + .cds--expandable-row {
+  background: linear-gradient(to right, var(--cds-ai-aura-start-table, rgba(69, 137, 255, 0.15)) 0%, var(--cds-ai-aura-end, rgba(255, 255, 255, 0)) 50%, transparent 50%);
   background-attachment: fixed;
 }
 
+.cds--data-table--slug-row {
+  box-shadow: inset 1px 0 var(--cds-ai-border-strong, #4589ff);
+}
+
+.cds--data-table tbody tr.cds--data-table--slug-row:hover td,
+tr.cds--data-table--slug-row.cds--expandable-row:hover + .cds--expandable-row[data-child-row] td,
+tr.cds--data-table--slug-row.cds--expandable-row--hover + .cds--expandable-row[data-child-row]:hover > td,
+tr.cds--data-table--slug-row.cds--expandable-row--hover > td,
+tr.cds--data-table--selected.cds--data-table--slug-row.cds--expandable-row + tr.cds--expandable-row[data-child-row] > td,
+tr.cds--data-table--slug-row.cds--parent-row.cds--data-table--selected.cds--expandable-row:hover td,
+tr.cds--data-table--slug-row.cds--parent-row.cds--data-table--selected.cds--expandable-row:hover td:first-of-type,
+tr.cds--data-table--slug-row.cds--parent-row.cds--data-table--selected:not(.cds--expandable-row):hover > td,
+tr.cds--data-table--slug-row.cds--parent-row.cds--data-table--selected.cds--expandable-row:hover + tr[data-child-row] > td,
+tr.cds--data-table--slug-row.cds--parent-row.cds--data-table--selected.cds--expandable-row--hover > td,
+tr.cds--data-table--slug-row.cds--parent-row.cds--data-table--selected.cds--expandable-row--hover > td:first-of-type {
+  background-color: transparent;
+}
+
+.cds--data-table tbody tr.cds--data-table--slug-row:hover,
+tr.cds--data-table--slug-row:hover + .cds--expandable-row[data-child-row],
+tr.cds--expandable-row--hover + .cds--expandable-row[data-child-row]:hover,
+tr.cds--expandable-row--hover.cds--data-table--slug-row,
+tr.cds--data-table--selected.cds--parent-row.cds--expandable-row--hover.cds--data-table--slug-row {
+  background: linear-gradient(to right, var(--cds-ai-aura-hover-start, rgba(69, 137, 255, 0.4)) 0%, 15%, var(--cds-ai-aura-hover-end, rgba(255, 255, 255, 0)) 50%), var(--cds-ai-aura-hover-background, #edf5ff);
+}
+
+tr.cds--parent-row.cds--data-table--selected.cds--data-table--slug-row,
+.cds--data-table--selected.cds--data-table--slug-row,
+tr.cds--data-table--selected.cds--data-table--slug-row + .cds--expandable-row {
+  background: linear-gradient(to right, var(--cds-ai-inner-shadow, rgba(69, 137, 255, 0.2)) 0%, var(--cds-ai-aura-end, rgba(255, 255, 255, 0)) 50%, transparent 50%), var(--cds-layer-selected);
+}
+
+tr.cds--data-table--slug-row.cds--data-table--selected td,
+tr.cds--data-table--slug-row.cds--data-table--selected:hover td,
+tbody tr.cds--data-table--slug-row:hover td,
+tr.cds--data-table--slug-row.cds--parent-row.cds--data-table--selected.cds--expandable-row:hover td:not(.cds--table-expand):not(.cds--table-column-checkbox):not(.cds--table-column-slug) {
+  border-block-end-color: var(--cds-border-subtle);
+}
+
+tr.cds--expandable-row.cds--data-table--selected.cds--data-table--slug-row[data-parent-row] > td:not(.cds--table-expand):not(.cds--table-column-checkbox):not(.cds--table-column-slug) {
+  border-block-end: 1px solid var(--cds-layer-selected);
+}
+
+tr.cds--parent-row.cds--data-table--slug-row.cds--expandable-row:hover td:first-of-type {
+  border-block-end: 1px solid transparent;
+}
+
 .cds--data-table thead th.cds--table-sort__header--slug .cds--table-sort,
 .cds--data-table thead th:has(> .cds--table-header-label--slug) {
-  background-image: linear-gradient(180deg, var(--cds-ai-inner-shadow, rgba(69, 137, 255, 0.2)) 0%, 15%, var(--cds-ai-aura-end, rgba(255, 255, 255, 0)) 100%, transparent 100%);
-  border-block-end-color: var(--cds-ai-border-strong, #4589ff);
+  background: linear-gradient(to right, var(--cds-ai-aura-start-table, rgba(69, 137, 255, 0.15)) 0%, var(--cds-ai-aura-end, rgba(255, 255, 255, 0)) 50%, transparent 50%);
 }
 
 .cds--table-column-slug .cds--slug {
   position: absolute;
+  z-index: 2;
   transform: translateY(-50%);
 }
 
@@ -10679,10 +10813,24 @@ th .cds--table-header-label.cds--table-header-label--slug {
 }
 
 th .cds--table-header-label.cds--table-header-label--slug .cds--slug {
-  margin-inline-start: 0.5rem;
+  margin-inline-start: auto;
+}
+
+th.cds--table-sort__header--slug,
+th:has(.cds--table-header-label--slug) {
+  box-shadow: inset 0 1px var(--cds-ai-border-strong, #4589ff);
+}
+
+td.cds--table-cell--column-slug {
+  background: linear-gradient(to right, var(--cds-ai-aura-start-table, rgba(69, 137, 255, 0.15)) 0%, var(--cds-ai-aura-end, rgba(255, 255, 255, 0)) 50%, transparent 50%);
+}
+
+tr.cds--parent-row:not(.cds--expandable-row):not(:first-of-type) td.cds--table-cell--column-slug {
+  border-block-start: linear-gradient(to right, var(--cds-ai-aura-start-table, rgba(69, 137, 255, 0.15)) 0%, var(--cds-ai-aura-end, rgba(255, 255, 255, 0)) 50%, transparent 50%);
 }
 
 @media screen and (-ms-high-contrast: active), (forced-colors: active) {
+  tr.cds--parent-row:not(.cds--expandable-row):not(:first-of-type) td.cds--table-cell--column-slug,
   .cds--data-table-content {
     outline: 1px solid transparent;
   }
@@ -11785,17 +11933,19 @@ tr.cds--parent-row.cds--expandable-row + tr[data-child-row] td {
   transition: padding-bottom 150ms cubic-bezier(0.2, 0, 0.38, 0.9), transform 150ms cubic-bezier(0.2, 0, 0.38, 0.9);
 }
 
-tbody:has(> tr.cds--parent-row--slug) > tr.cds--expandable-row[data-child-row] td,
+tbody:has(> tr.cds--data-table--slug-row) > tr.cds--expandable-row[data-child-row] td,
 tbody:has(td.cds--table-column-checkbox) > tr.cds--expandable-row[data-child-row] td {
   padding-inline-start: 5.5rem;
 }
 
-tbody:has(> tr.cds--parent-row--slug):has(td.cds--table-column-checkbox) > tr.cds--expandable-row[data-child-row] td {
+tbody:has(> tr.cds--data-table--slug-row):has(td.cds--table-column-checkbox) > tr.cds--expandable-row[data-child-row] td {
   padding-inline-start: 7.5rem;
 }
 
 tr.cds--parent-row.cds--expandable-row + tr[data-child-row] td .cds--child-row-inner-container {
   max-block-size: 100%;
+  padding-block: 1rem;
+  padding-block-end: 1.5rem;
 }
 
 .cds--parent-row.cds--expandable-row > td,
@@ -12083,8 +12233,8 @@ tr.cds--parent-row.cds--data-table--selected.cds--expandable-row--hover + tr[dat
   border-block-end: 1px solid transparent;
 }
 
-.cds--parent-row--slug td,
-.cds--data-table tr.cds--parent-row--slug:hover td {
+.cds--data-table--slug-row td,
+.cds--data-table tr.cds--data-table--slug-row:hover td {
   border-block-start: 1px solid transparent;
 }
 
@@ -12433,9 +12583,14 @@ th .cds--table-sort__flex {
   margin-block-start: 0.8125rem;
 }
 
+.cds--table-sort__header--slug .cds--table-sort__icon,
+.cds--table-sort__header--slug .cds--table-sort__icon-unsorted {
+  margin-inline-end: 0.5rem;
+  margin-inline-start: auto;
+}
+
 .cds--table-sort__header--slug .cds--slug {
-  margin-inline-end: auto;
-  margin-inline-start: 0.5rem;
+  margin-inline-end: 0.5rem;
 }
 
 @media screen and (-ms-high-contrast: active), (forced-colors: active) {
@@ -13999,6 +14154,7 @@ button.cds--dropdown-text:focus {
   color: var(--cds-text-disabled, rgba(22, 22, 22, 0.25));
   cursor: no-drop;
   text-decoration: none;
+  transition: none;
 }
 .cds--file-browse-btn--disabled:hover, .cds--file-browse-btn--disabled:focus {
   color: var(--cds-text-disabled, rgba(22, 22, 22, 0.25));
@@ -17197,6 +17353,18 @@ optgroup.cds--select-optgroup:disabled,
   transform: rotate(180deg);
 }
 
+.cds--menu-button__top {
+  transform: translate(0, calc(-100% - var(--cds-popover-offset, 3rem)));
+}
+
+.cds--menu-button__top-start {
+  transform: translate(0, calc(-100% - var(--cds-popover-offset, 3rem)));
+}
+
+.cds--menu-button__top-end {
+  transform: translate(0, calc(-100% - var(--cds-popover-offset, 3rem)));
+}
+
 .cds--modal {
   position: fixed;
   z-index: 9000;
@@ -17615,12 +17783,12 @@ optgroup.cds--select-optgroup:disabled,
 }
 
 .cds--modal--slug .cds--modal-container {
-  background: linear-gradient(to top, var(--cds-ai-aura-start, rgba(69, 137, 255, 0.1)) 0%, var(--cds-ai-aura-end, rgba(255, 255, 255, 0)) 50%) padding-box, linear-gradient(to top, var(--cds-background, #ffffff), var(--cds-background, #ffffff)) padding-box, linear-gradient(to bottom, var(--cds-ai-border-start, #78a9ff), var(--cds-ai-border-end, #d0e2ff)) border-box, linear-gradient(to top, var(--cds-background, #ffffff), var(--cds-background, #ffffff)) border-box;
+  background: linear-gradient(to top, var(--cds-ai-aura-start, rgba(69, 137, 255, 0.1)) 0%, var(--cds-ai-aura-end, rgba(255, 255, 255, 0)) 50%) padding-box, linear-gradient(to top, var(--cds-background, var(--cds-background, #ffffff)), var(--cds-background, var(--cds-background, #ffffff))) padding-box, linear-gradient(to bottom, var(--cds-ai-border-start, #78a9ff), var(--cds-ai-border-end, #d0e2ff)) border-box, linear-gradient(to top, var(--cds-background, var(--cds-background, #ffffff)), var(--cds-background, var(--cds-background, #ffffff))) border-box;
   background-color: var(--cds-layer);
 }
 
 .cds--modal--slug .cds--modal-container:has(.cds--btn-set:not(.cds--modal-footer--three-button) > button:not(:only-child)) {
-  background: linear-gradient(to top, var(--cds-ai-aura-start, rgba(69, 137, 255, 0.1)) calc(0% + 64px), var(--cds-ai-aura-end, rgba(255, 255, 255, 0)) 50%) padding-box, linear-gradient(to top, var(--cds-background, #ffffff), var(--cds-background, #ffffff)) padding-box, linear-gradient(to bottom, var(--cds-ai-border-start, #78a9ff), var(--cds-ai-border-end, #d0e2ff)) border-box, linear-gradient(to top, var(--cds-background, #ffffff), var(--cds-background, #ffffff)) border-box;
+  background: linear-gradient(to top, var(--cds-ai-aura-start, rgba(69, 137, 255, 0.1)) calc(0% + 64px), var(--cds-ai-aura-end, rgba(255, 255, 255, 0)) 50%) padding-box, linear-gradient(to top, var(--cds-background, var(--cds-background, #ffffff)), var(--cds-background, var(--cds-background, #ffffff))) padding-box, linear-gradient(to bottom, var(--cds-ai-border-start, #78a9ff), var(--cds-ai-border-end, #d0e2ff)) border-box, linear-gradient(to top, var(--cds-background, var(--cds-background, #ffffff)), var(--cds-background, var(--cds-background, #ffffff))) border-box;
   background-color: var(--cds-layer);
 }
 
@@ -20820,7 +20988,7 @@ span.cds--pagination__text.cds--pagination__items-count {
 }
 
 .cds--slug.cds--slug--enabled .cds--slug-content {
-  background: linear-gradient(to top, var(--cds-ai-aura-start, rgba(69, 137, 255, 0.1)) 0%, var(--cds-ai-aura-end, rgba(255, 255, 255, 0)) 50%) padding-box, linear-gradient(to top, var(--cds-background, #ffffff), var(--cds-background, #ffffff)) padding-box, linear-gradient(to bottom, var(--cds-ai-border-start, #78a9ff), var(--cds-ai-border-end, #d0e2ff)) border-box, linear-gradient(to top, var(--cds-background, #ffffff), var(--cds-background, #ffffff)) border-box;
+  background: linear-gradient(to top, var(--cds-ai-aura-start, rgba(69, 137, 255, 0.1)) 0%, var(--cds-ai-aura-end, rgba(255, 255, 255, 0)) 50%) padding-box, linear-gradient(to top, var(--cds-background, var(--cds-background, #ffffff)), var(--cds-background, var(--cds-background, #ffffff))) padding-box, linear-gradient(to bottom, var(--cds-ai-border-start, #78a9ff), var(--cds-ai-border-end, #d0e2ff)) border-box, linear-gradient(to top, var(--cds-background, var(--cds-background, #ffffff)), var(--cds-background, var(--cds-background, #ffffff))) border-box;
   border: 1px solid transparent;
   border-radius: 0.5rem;
   box-shadow: inset 0 -80px 70px -65px var(--cds-ai-inner-shadow, rgba(69, 137, 255, 0.2)), -40px 30px 100px -25px var(--cds-slug-callout-shadow-outer-01, rgba(0, 67, 206, 0.25)), -60px 80px 60px -45px var(--cds-slug-callout-shadow-outer-02, rgba(0, 0, 0, 0.1));
@@ -22226,13 +22394,13 @@ span.cds--pagination__text.cds--pagination__items-count {
 }
 
 .cds--tile--slug.cds--tile {
-  background: linear-gradient(to top, var(--cds-ai-aura-start, rgba(69, 137, 255, 0.1)) 0%, var(--cds-ai-aura-end, rgba(255, 255, 255, 0)) 50%) padding-box, linear-gradient(to top, var(--cds-layer), var(--cds-layer)) padding-box, linear-gradient(to bottom, var(--cds-ai-border-start, #78a9ff), var(--cds-ai-border-end, #d0e2ff)) border-box, linear-gradient(to top, var(--cds-layer), var(--cds-layer)) border-box;
+  background: linear-gradient(to top, var(--cds-ai-aura-start, rgba(69, 137, 255, 0.1)) 0%, var(--cds-ai-aura-end, rgba(255, 255, 255, 0)) 50%) padding-box, linear-gradient(to top, var(--cds-layer, var(--cds-background, #ffffff)), var(--cds-layer, var(--cds-background, #ffffff))) padding-box, linear-gradient(to bottom, var(--cds-ai-border-start, #78a9ff), var(--cds-ai-border-end, #d0e2ff)) border-box, linear-gradient(to top, var(--cds-layer, var(--cds-background, #ffffff)), var(--cds-layer, var(--cds-background, #ffffff))) border-box;
   border: 1px solid transparent;
   box-shadow: inset 0 -80px 70px -65px var(--cds-ai-inner-shadow, rgba(69, 137, 255, 0.2)), 0 4px 10px 2px var(--cds-ai-drop-shadow, rgba(15, 98, 254, 0.32));
 }
 
 .cds--tile--slug.cds--tile--expandable:hover {
-  background: linear-gradient(to top, var(--cds-ai-aura-start, rgba(69, 137, 255, 0.1)) 0%, var(--cds-ai-aura-end, rgba(255, 255, 255, 0)) 50%) padding-box, linear-gradient(to top, var(--cds-layer), var(--cds-layer)) padding-box, linear-gradient(to bottom, var(--cds-ai-border-start, #78a9ff), var(--cds-ai-border-end, #d0e2ff)) border-box, linear-gradient(to top, var(--cds-layer), var(--cds-layer)) border-box;
+  background: linear-gradient(to top, var(--cds-ai-aura-start, rgba(69, 137, 255, 0.1)) 0%, var(--cds-ai-aura-end, rgba(255, 255, 255, 0)) 50%) padding-box, linear-gradient(to top, var(--cds-layer, var(--cds-background, #ffffff)), var(--cds-layer, var(--cds-background, #ffffff))) padding-box, linear-gradient(to bottom, var(--cds-ai-border-start, #78a9ff), var(--cds-ai-border-end, #d0e2ff)) border-box, linear-gradient(to top, var(--cds-layer, var(--cds-background, #ffffff)), var(--cds-layer, var(--cds-background, #ffffff))) border-box;
 }
 
 .cds--tile--slug.cds--tile--selectable::before,