@carbon/ibm-products 2.80.0 → 2.81.0

package/css/index-full-carbon.css

@@ -3525,7 +3525,7 @@ p.c4p--about-modal__copyright-text:first-child {
   --c4p--side-panel--actions-height: 3rem;
 }
 .c4p--side-panel:not(.c4p--side-panel--has-overlay) {
-  box-shadow: 0 0.125rem 0.25rem var(--cds-overlay, rgba(22, 22, 22, 0.5));
+  box-shadow: 0 0.125rem 0.25rem var(--cds-overlay, rgba(0, 0, 0, 0.6));
 }
 .c4p--side-panel.c4p--side-panel--slide-in, .c4p--side-panel.c4p--side-panel--slide-in:not(.c4p--side-panel--has-overlay) {
   box-shadow: none;
@@ -3864,7 +3864,7 @@ p.c4p--about-modal__copyright-text:first-child {
   position: fixed;
   z-index: 6000;
   animation: side-panel-overlay-entrance 150ms cubic-bezier(0, 0, 0.38, 0.9) forwards;
-  background-color: var(--cds-overlay, rgba(22, 22, 22, 0.5));
+  background-color: var(--cds-overlay, rgba(0, 0, 0, 0.6));
   block-size: 100%;
   inline-size: 100%;
   inset: 0;
@@ -4294,7 +4294,7 @@ p.c4p--about-modal__copyright-text:first-child {
   min-block-size: 0;
 }
 .c4p--tearsheet__next.c4p--tearsheet__next--stack-activated.is-visible {
-  --overlay-color: var(--cds-overlay, rgba(22, 22, 22, 0.5));
+  --overlay-color: var(--cds-overlay, rgba(0, 0, 0, 0.6));
   --overlay-alpha: 0.5;
   z-index: calc(9000 - var(--stack-depth, 0));
   background-color: initial;
@@ -4319,7 +4319,7 @@ p.c4p--about-modal__copyright-text:first-child {
 }
 
 .c4p--tearsheet.c4p--tearsheet {
-  --overlay-color: var(--cds-overlay, rgba(22, 22, 22, 0.5));
+  --overlay-color: var(--cds-overlay, rgba(0, 0, 0, 0.6));
   --overlay-opacity: 1;
 }
 .c4p--tearsheet.c4p--tearsheet::before {
@@ -5828,7 +5828,7 @@ button.c4p--add-select__global-filter-toggle--open {
   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));
+  box-shadow: 0 0.125rem 0.25rem var(--cds-overlay, rgba(0, 0, 0, 0.6));
   color: var(--cds-text-primary, #161616);
   inset-block-start: 3rem;
   inset-inline-end: 0;
@@ -9597,7 +9597,7 @@ button.c4p--add-select__global-filter-toggle--open {
   --cds-link-primary-hover: #a6c8ff;
   --cds-link-secondary: #a6c8ff;
   --cds-link-visited: #be95ff;
-  --cds-overlay: rgba(0, 0, 0, 0.65);
+  --cds-overlay: rgba(0, 0, 0, 0.6);
   --cds-shadow: rgba(0, 0, 0, 0.8);
   --cds-skeleton-background: #333333;
   --cds-skeleton-element: #525252;
@@ -10062,7 +10062,7 @@ button.c4p--add-select__global-filter-toggle--open {
   --cds-link-primary-hover: #a6c8ff;
   --cds-link-secondary: #a6c8ff;
   --cds-link-visited: #be95ff;
-  --cds-overlay: rgba(0, 0, 0, 0.65);
+  --cds-overlay: rgba(0, 0, 0, 0.6);
   --cds-shadow: rgba(0, 0, 0, 0.8);
   --cds-skeleton-background: #292929;
   --cds-skeleton-element: #393939;
@@ -12409,7 +12409,7 @@ button.c4p--add-select__global-filter-toggle--open {
  */
 .c4p--datagrid .c4p--datagrid__row-size-toggle-tip-content {
   background-color: var(--cds-layer-02, #ffffff);
-  box-shadow: 1px 4px 8px -3px var(--cds-overlay, rgba(22, 22, 22, 0.5)), -1px 6px 8px -5px var(--cds-overlay, rgba(22, 22, 22, 0.5));
+  box-shadow: 1px 4px 8px -3px var(--cds-overlay, rgba(0, 0, 0, 0.6)), -1px 6px 8px -5px var(--cds-overlay, rgba(0, 0, 0, 0.6));
 }
 
 .c4p--datagrid .c4p--datagrid__row-size-radio-button .cds--radio-button__label {
@@ -13905,7 +13905,7 @@ th.c4p--datagrid__select-all-toggle-on.button {
   --cds-link-primary-hover: #a6c8ff;
   --cds-link-secondary: #a6c8ff;
   --cds-link-visited: #be95ff;
-  --cds-overlay: rgba(0, 0, 0, 0.65);
+  --cds-overlay: rgba(0, 0, 0, 0.6);
   --cds-shadow: rgba(0, 0, 0, 0.8);
   --cds-skeleton-background: #292929;
   --cds-skeleton-element: #393939;
@@ -14233,12 +14233,10 @@ th.c4p--datagrid__select-all-toggle-on.button {
 
 .c4p--guidebanner__icon-idea {
   position: absolute;
+  color: #f4f4f4;
   inset-block-start: 1rem;
   inset-inline-start: 1rem;
 }
-.c4p--guidebanner__icon-idea path {
-  fill: #f4f4f4;
-}
 
 .c4p--guidebanner__title {
   font-size: var(--cds-heading-compact-02-font-size, 1rem);
@@ -14740,7 +14738,7 @@ th.c4p--datagrid__select-all-toggle-on.button {
   --cds-link-primary-hover: #a6c8ff;
   --cds-link-secondary: #a6c8ff;
   --cds-link-visited: #be95ff;
-  --cds-overlay: rgba(0, 0, 0, 0.65);
+  --cds-overlay: rgba(0, 0, 0, 0.6);
   --cds-shadow: rgba(0, 0, 0, 0.8);
   --cds-skeleton-background: #292929;
   --cds-skeleton-element: #393939;
@@ -15589,7 +15587,7 @@ th.c4p--datagrid__select-all-toggle-on.button {
   --cds-link-primary-hover: #0043ce;
   --cds-link-secondary: #0043ce;
   --cds-link-visited: #8a3ffc;
-  --cds-overlay: rgba(22, 22, 22, 0.5);
+  --cds-overlay: rgba(0, 0, 0, 0.6);
   --cds-shadow: rgba(0, 0, 0, 0.3);
   --cds-skeleton-background: #e8e8e8;
   --cds-skeleton-element: #c6c6c6;
@@ -16030,7 +16028,7 @@ th.c4p--datagrid__select-all-toggle-on.button {
   --cds-link-primary-hover: #a6c8ff;
   --cds-link-secondary: #a6c8ff;
   --cds-link-visited: #be95ff;
-  --cds-overlay: rgba(0, 0, 0, 0.65);
+  --cds-overlay: rgba(0, 0, 0, 0.6);
   --cds-shadow: rgba(0, 0, 0, 0.8);
   --cds-skeleton-background: #292929;
   --cds-skeleton-element: #393939;
@@ -20492,7 +20490,7 @@ em {
   --cds-link-primary-hover: #0043ce;
   --cds-link-secondary: #0043ce;
   --cds-link-visited: #8a3ffc;
-  --cds-overlay: rgba(22, 22, 22, 0.5);
+  --cds-overlay: rgba(0, 0, 0, 0.6);
   --cds-shadow: rgba(0, 0, 0, 0.3);
   --cds-skeleton-background: #e8e8e8;
   --cds-skeleton-element: #c6c6c6;
@@ -20731,7 +20729,7 @@ em {
   --cds-link-primary-hover: #0043ce;
   --cds-link-secondary: #0043ce;
   --cds-link-visited: #8a3ffc;
-  --cds-overlay: rgba(22, 22, 22, 0.5);
+  --cds-overlay: rgba(0, 0, 0, 0.6);
   --cds-shadow: rgba(0, 0, 0, 0.3);
   --cds-skeleton-background: #e8e8e8;
   --cds-skeleton-element: #c6c6c6;
@@ -20970,7 +20968,7 @@ em {
   --cds-link-primary-hover: #a6c8ff;
   --cds-link-secondary: #a6c8ff;
   --cds-link-visited: #be95ff;
-  --cds-overlay: rgba(0, 0, 0, 0.65);
+  --cds-overlay: rgba(0, 0, 0, 0.6);
   --cds-shadow: rgba(0, 0, 0, 0.8);
   --cds-skeleton-background: #333333;
   --cds-skeleton-element: #525252;
@@ -21208,7 +21206,7 @@ em {
   --cds-link-primary-hover: #a6c8ff;
   --cds-link-secondary: #a6c8ff;
   --cds-link-visited: #be95ff;
-  --cds-overlay: rgba(0, 0, 0, 0.65);
+  --cds-overlay: rgba(0, 0, 0, 0.6);
   --cds-shadow: rgba(0, 0, 0, 0.8);
   --cds-skeleton-background: #292929;
   --cds-skeleton-element: #393939;
@@ -28548,11 +28546,6 @@ fieldset[disabled] .cds--form__helper-text {
   inset-inline-end: 7.125rem;
 }
 
-.cds--list-box__wrapper--decorator .cds--list-box--invalid .cds--list-box__field:has(.cds--list-box__selection) ~ .cds--list-box__inner-wrapper--decorator > *,
-.cds--list-box__wrapper--decorator .cds--list-box--warning .cds--list-box__field:has(.cds--list-box__selection) ~ .cds--list-box__inner-wrapper--decorator > * {
-  inset-inline-end: 7.25rem;
-}
-
 @media screen and (-ms-high-contrast: active), (forced-colors: active) {
   .cds--list-box__field,
   .cds--list-box__menu,
@@ -31268,7 +31261,7 @@ tr.cds--parent-row:not(.cds--expandable-row):not(:first-of-type) td.cds--table-c
 .cds--search--expandable .cds--search-input {
   padding: 0;
   inline-size: 0;
-  transition: padding 70ms cubic-bezier(0.2, 0, 0.38, 0.9), width 0s linear 70ms;
+  transition: transform 70ms cubic-bezier(0.2, 0, 0.38, 0.9);
 }
 .cds--search--expandable .cds--search-input::placeholder {
   position: relative;
@@ -31316,6 +31309,15 @@ tr.cds--parent-row:not(.cds--expandable-row):not(:first-of-type) td.cds--table-c
   fill: var(--cds-icon-disabled, rgba(22, 22, 22, 0.25));
 }
 
+.cds--search-magnifier-tooltip {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.cds--search-magnifier-tooltip .cds--search-magnifier {
+  position: relative;
+}
+
 .cds--table-toolbar {
   position: relative;
   z-index: 1;
@@ -33559,7 +33561,7 @@ th .cds--table-sort__flex {
 }
 
 .cds--dialog::backdrop {
-  background-color: var(--cds-overlay, rgba(22, 22, 22, 0.5));
+  background-color: var(--cds-overlay, rgba(0, 0, 0, 0.6));
   opacity: 0;
 }
 
@@ -34384,7 +34386,7 @@ button.cds--dropdown-text:focus {
   display: flex;
   align-items: center;
   justify-content: center;
-  background-color: var(--cds-overlay, rgba(22, 22, 22, 0.5));
+  background-color: var(--cds-overlay, rgba(0, 0, 0, 0.6));
   block-size: 100%;
   inline-size: 100%;
   inset-block-start: 0;
@@ -37255,6 +37257,30 @@ optgroup.cds--select-optgroup:disabled,
   display: none;
 }
 
+.cds--select--fluid__skeleton {
+  position: relative;
+  background: var(--cds-skeleton-background, #e8e8e8);
+  block-size: 4rem;
+  border-block-end: 1px solid var(--cds-skeleton-element, #c6c6c6);
+}
+
+.cds--select--fluid__skeleton .cds--skeleton {
+  position: absolute;
+  block-size: 0.5rem;
+  inline-size: 25%;
+  inset-block-start: 1rem;
+  inset-inline-start: 1rem;
+}
+
+.cds--select--fluid__skeleton .cds--label {
+  position: absolute;
+  padding: 0;
+  block-size: 0.5rem;
+  inline-size: 50%;
+  inset-block-start: 2.25rem;
+  inset-inline-start: 1rem;
+}
+
 .cds--text-area {
   box-sizing: border-box;
   padding: 0;
@@ -38149,6 +38175,7 @@ optgroup.cds--select-optgroup:disabled,
 .cds--inline-loading {
   display: flex;
   align-items: center;
+  color: var(--cds-text-secondary, #525252);
   inline-size: 100%;
   min-block-size: 2rem;
 }
@@ -38158,7 +38185,6 @@ optgroup.cds--select-optgroup:disabled,
   font-weight: var(--cds-label-02-font-weight, 400);
   line-height: var(--cds-label-02-line-height, 1.28572);
   letter-spacing: var(--cds-label-02-letter-spacing, 0.16px);
-  color: var(--cds-text-secondary, #525252);
 }
 
 .cds--inline-loading__animation {
@@ -38349,7 +38375,7 @@ optgroup.cds--select-optgroup:disabled,
   display: flex;
   align-items: center;
   justify-content: center;
-  background-color: var(--cds-overlay, rgba(22, 22, 22, 0.5));
+  background-color: var(--cds-overlay, rgba(0, 0, 0, 0.6));
   block-size: 100vh;
   content: "";
   inline-size: 100vw;
@@ -38484,6 +38510,7 @@ optgroup.cds--select-optgroup:disabled,
 .cds--modal-container {
   position: fixed;
   display: grid;
+  border: 1px solid var(--cds-border-subtle-01, #c6c6c6);
   background-color: var(--cds-layer);
   grid-template-columns: 100%;
   grid-template-rows: auto 1fr auto;
@@ -44808,7 +44835,7 @@ a.cds--header__menu-item.cds--header__menu-item--current:focus {
 @media (max-width: 65.98rem) {
   .cds--side-nav__overlay-active {
     z-index: 6000;
-    background-color: var(--cds-overlay, rgba(22, 22, 22, 0.5));
+    background-color: var(--cds-overlay, rgba(0, 0, 0, 0.6));
     block-size: 100vh;
     inline-size: 100vw;
     opacity: 1;
@@ -45832,7 +45859,7 @@ a.cds--header__menu-item.cds--header__menu-item--current:focus {
 @media (max-width: 65.98rem) {
   .cds--side-nav__overlay-active {
     z-index: 6000;
-    background-color: var(--cds-overlay, rgba(22, 22, 22, 0.5));
+    background-color: var(--cds-overlay, rgba(0, 0, 0, 0.6));
     block-size: 100vh;
     inline-size: 100vw;
     opacity: 1;