@carbon/ibm-products 2.93.0 → 2.94.0-rc.0

package/css/carbon.css

@@ -4118,6 +4118,11 @@ em {
   outline: none;
 }
 
+@media screen and (-ms-high-contrast: active), (forced-colors: active) {
+  .cds--accordion__heading:focus {
+    outline: 2px solid Highlight;
+  }
+}
 .cds--accordion__heading[disabled] {
   background-color: transparent;
   color: var(--cds-text-disabled, rgba(22, 22, 22, 0.25));
@@ -4440,6 +4445,18 @@ li.cds--accordion__item--disabled:last-of-type {
   --cds-popover-background-color: var(--cds-background-inverse, #393939);
   --cds-popover-text-color: var(--cds-text-inverse, #ffffff);
 }
+.cds--popover--high-contrast .cds--popover .cds--skeleton,
+.cds--popover--high-contrast .cds--popover .cds--skeleton__text,
+.cds--popover--high-contrast .cds--popover .cds--skeleton__placeholder,
+.cds--popover--high-contrast .cds--popover .cds--icon--skeleton {
+  background: var(--cds-background-inverse-hover, #474747);
+}
+.cds--popover--high-contrast .cds--popover .cds--skeleton::before,
+.cds--popover--high-contrast .cds--popover .cds--skeleton__text::before,
+.cds--popover--high-contrast .cds--popover .cds--skeleton__placeholder::before,
+.cds--popover--high-contrast .cds--popover .cds--icon--skeleton::before {
+  background: var(--cds-background-inverse, #393939);
+}
 
 .cds--popover--drop-shadow .cds--popover {
   filter: var(--cds-popover-drop-shadow, drop-shadow(0 0.125rem 0.125rem rgba(0, 0, 0, 0.2)));
@@ -6000,6 +6017,12 @@ li.cds--accordion__item--disabled:last-of-type {
   fill: var(--cds-icon-primary, #161616);
 }
 
+@media screen and (-ms-high-contrast: active), (forced-colors: active) {
+  .cds--toggletip-button:hover svg,
+  .cds--toggletip--open .cds--toggletip-button svg {
+    fill: Highlight;
+  }
+}
 .cds--toggletip-button:focus {
   outline: 1px solid var(--cds-focus, #0f62fe);
 }
@@ -8831,6 +8854,7 @@ fieldset[disabled] .cds--form__helper-text {
   background-color: var(--cds-layer);
   inline-size: 100%;
   max-inline-size: 48rem;
+  min-inline-size: 0;
   display: flex;
   align-items: center;
   block-size: 2.5rem;
@@ -8849,6 +8873,7 @@ fieldset[disabled] .cds--form__helper-text {
   display: flex;
   align-items: center;
   block-size: 100%;
+  min-inline-size: 0;
   overflow-x: auto;
   padding-inline-start: 1rem;
 }
@@ -8886,6 +8911,7 @@ fieldset[disabled] .cds--form__helper-text {
   background-color: var(--cds-layer);
   inline-size: 100%;
   max-inline-size: 48rem;
+  min-inline-size: 0;
   display: flex;
   padding: 1rem;
 }
@@ -14179,35 +14205,38 @@ tr.cds--parent-row:not(.cds--expandable-row):not(:first-of-type) td.cds--table-c
   position: relative;
 }
 
+.cds--table-toolbar {
+  --cds-layout-size-height-local: clamp(max(var(--cds-layout-size-height-min), var(--cds-layout-size-height-xs)), var(--cds-layout-size-height, var(--cds-layout-size-height-lg)), min(var(--cds-layout-size-height-max), var(--cds-layout-size-height-lg)));
+  --cds-layout-size-height-md: 3rem;
+}
+.cds--table-toolbar.cds--layout--size-md, .cds--layout--size-md :where(.cds--table-toolbar) {
+  --cds-layout-size-height: var(--cds-layout-size-height-md);
+}
+.cds--table-toolbar {
+  --cds-layout-size-height-xl: 3rem;
+}
+.cds--table-toolbar.cds--layout--size-xl, .cds--layout--size-xl :where(.cds--table-toolbar) {
+  --cds-layout-size-height: var(--cds-layout-size-height-xl);
+}
 .cds--table-toolbar {
   position: relative;
   z-index: 1;
   display: flex;
   background-color: var(--cds-layer);
+  block-size: var(--cds-layout-size-height-local);
   inline-size: 100%;
-  min-block-size: 3rem;
+  min-block-size: var(--cds-layout-size-height-local);
 }
 
 .cds--toolbar-content {
   display: flex;
   justify-content: flex-end;
-  block-size: 3rem;
+  block-size: var(--cds-layout-size-height-local);
   inline-size: 100%;
   transform: translate3d(0, 0, 0);
   transition: transform 110ms cubic-bezier(0.2, 0, 0.38, 0.9), clip-path 110ms cubic-bezier(0.2, 0, 0.38, 0.9);
 }
 
-.cds--toolbar-content .cds--search .cds--search-input {
-  padding: 0 3rem;
-  background-color: transparent;
-  block-size: 3rem;
-}
-
-.cds--toolbar-content .cds--overflow-menu {
-  block-size: 3rem;
-  inline-size: 3rem;
-}
-
 .cds--batch-actions ~ .cds--toolbar-search-container {
   display: flex;
   align-items: center;
@@ -14216,11 +14245,6 @@ tr.cds--parent-row:not(.cds--expandable-row):not(:first-of-type) td.cds--table-c
 }
 
 .cds--toolbar-search-container-expandable {
-  position: relative;
-  block-size: 3rem;
-  box-shadow: none;
-  cursor: pointer;
-  inline-size: 3rem;
   transition: width 300ms cubic-bezier(0.5, 0, 0.1, 1), background-color 110ms cubic-bezier(0, 0, 0.38, 0.9);
 }
 .cds--toolbar-search-container-expandable:hover {
@@ -14228,7 +14252,7 @@ tr.cds--parent-row:not(.cds--expandable-row):not(:first-of-type) td.cds--table-c
 }
 
 .cds--search.cds--toolbar-search-container-expandable {
-  inline-size: 3rem;
+  inline-size: var(--cds-layout-size-height-local);
 }
 
 .cds--toolbar-search-container-expandable .cds--search-input {
@@ -14249,46 +14273,6 @@ tr.cds--parent-row:not(.cds--expandable-row):not(:first-of-type) td.cds--table-c
   visibility: hidden;
 }
 
-.cds--toolbar-search-container-expandable.cds--search .cds--search-close {
-  block-size: 3rem;
-  inline-size: 3rem;
-}
-.cds--toolbar-search-container-expandable.cds--search .cds--search-close::before {
-  background-color: var(--cds-field-hover);
-  block-size: calc(100% - 0.25rem);
-  inset-block-start: 0.125rem;
-}
-
-.cds--toolbar-search-container-expandable.cds--search .cds--search-close:focus::before {
-  background-color: var(--cds-focus, #0f62fe);
-}
-
-.cds--table-toolbar .cds--search--lg .cds--search-magnifier-icon {
-  inset-inline-start: 0;
-}
-
-.cds--table-toolbar:not(.cds--table-toolbar--sm) .cds--toolbar-search-container-persistent.cds--search--lg .cds--search-magnifier-icon {
-  inset-inline-start: 1rem;
-}
-
-.cds--table-toolbar.cds--table-toolbar--sm .cds--search--sm:not(.cds--toolbar-search-container-active):not(.cds--toolbar-search-container-persistent) .cds--search-magnifier-icon {
-  inset-inline-start: 0;
-}
-
-.cds--table-toolbar.cds--table-toolbar--sm .cds--search--sm.cds--toolbar-search-container-active .cds--search-magnifier-icon {
-  inset-inline-start: 0.5rem;
-}
-
-.cds--table-toolbar .cds--toolbar-search-container-persistent.cds--search--sm .cds--search-magnifier-icon {
-  inset-inline-start: 0.5rem;
-}
-
-.cds--toolbar-search-container-expandable .cds--search-magnifier-icon {
-  padding: 1rem;
-  block-size: 3rem;
-  inline-size: 3rem;
-}
-
 .cds--toolbar-search-container-expandable.cds--search--disabled .cds--search-magnifier-icon {
   background-color: var(--cds-layer);
   cursor: not-allowed;
@@ -14313,7 +14297,7 @@ tr.cds--parent-row:not(.cds--expandable-row):not(:first-of-type) td.cds--table-c
 
 .cds--toolbar-search-container-active .cds--label,
 .cds--toolbar-search-container-active .cds--search-input {
-  padding: 0 3rem;
+  padding: 0 var(--cds-layout-size-height-local);
   cursor: text;
 }
 
@@ -14367,10 +14351,10 @@ tr.cds--parent-row:not(.cds--expandable-row):not(:first-of-type) td.cds--table-c
 }
 .cds--overflow-menu.cds--toolbar-action {
   display: flex;
-  padding: 1rem;
-  block-size: 3rem;
+  padding: calc(var(--cds-layout-size-height-local) / 2);
+  block-size: var(--cds-layout-size-height-local);
   cursor: pointer;
-  inline-size: 3rem;
+  inline-size: var(--cds-layout-size-height-local);
   transition: background 110ms cubic-bezier(0, 0, 0.38, 0.9);
 }
 
@@ -14401,9 +14385,9 @@ tr.cds--parent-row:not(.cds--expandable-row):not(:first-of-type) td.cds--table-c
 }
 .cds--toolbar-action {
   display: flex;
-  block-size: 3rem;
+  block-size: var(--cds-layout-size-height-local);
   cursor: pointer;
-  inline-size: 3rem;
+  inline-size: var(--cds-layout-size-height-local);
   transition: background 110ms cubic-bezier(0, 0, 0.38, 0.9);
 }
 
@@ -14465,7 +14449,6 @@ tr.cds--parent-row:not(.cds--expandable-row):not(:first-of-type) td.cds--table-c
 
 .cds--toolbar-search-container-persistent {
   position: relative;
-  block-size: 3rem;
   inline-size: 100%;
   opacity: 1;
 }
@@ -14479,14 +14462,8 @@ tr.cds--parent-row:not(.cds--expandable-row):not(:first-of-type) td.cds--table-c
   position: initial;
 }
 
-.cds--toolbar-search-container-persistent .cds--search-magnifier-icon {
-  inset-inline-start: 1rem;
-}
-
 .cds--toolbar-search-container-persistent .cds--search-input {
-  padding: 0 3rem;
   border: none;
-  block-size: 3rem;
 }
 
 .cds--toolbar-search-container-persistent .cds--search-input:focus:not([disabled]) {
@@ -14508,15 +14485,10 @@ tr.cds--parent-row:not(.cds--expandable-row):not(:first-of-type) td.cds--table-c
   background-color: var(--cds-field-hover);
 }
 
-.cds--toolbar-search-container-persistent .cds--search-close {
-  block-size: 3rem;
-  inline-size: 3rem;
-}
-
 .cds--batch-actions--active ~ .cds--toolbar-search-container,
 .cds--batch-actions--active ~ .cds--toolbar-content {
   clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
-  transform: translate3d(0, 48px, 0);
+  transform: translate3d(0, var(--cds-layout-size-height-local), 0);
   transition: transform 110ms cubic-bezier(0.2, 0, 0.38, 0.9), clip-path 110ms cubic-bezier(0.2, 0, 0.38, 0.9);
 }
 
@@ -14531,7 +14503,7 @@ tr.cds--parent-row:not(.cds--expandable-row):not(:first-of-type) td.cds--table-c
   inset-inline: 0;
   opacity: 0;
   pointer-events: none;
-  transform: translate3d(0, 48px, 0);
+  transform: translate3d(0, var(--cds-layout-size-height-local), 0);
   transition: transform 110ms cubic-bezier(0.2, 0, 0.38, 0.9), clip-path 110ms cubic-bezier(0.2, 0, 0.38, 0.9), opacity 110ms cubic-bezier(0.2, 0, 0.38, 0.9);
   will-change: transform;
 }
@@ -14650,112 +14622,36 @@ tr.cds--parent-row:not(.cds--expandable-row):not(:first-of-type) td.cds--table-c
   padding-inline-start: 0.5rem;
 }
 
-.cds--table-toolbar--sm {
-  block-size: 2rem;
-  min-block-size: 2rem;
-}
-.cds--table-toolbar--sm .cds--toolbar-search-container-expandable,
-.cds--table-toolbar--sm .cds--toolbar-search-container-persistent {
-  block-size: 2rem;
-}
-.cds--table-toolbar--sm .cds--toolbar-search-container-expandable .cds--search-input,
-.cds--table-toolbar--sm .cds--toolbar-search-container-persistent .cds--search-input {
-  block-size: 2rem;
-}
-.cds--table-toolbar--sm .cds--toolbar-search-container-expandable .cds--search-close,
-.cds--table-toolbar--sm .cds--toolbar-search-container-persistent .cds--search-close {
-  block-size: 2rem;
-  inline-size: 2rem;
-}
-.cds--table-toolbar--sm .cds--toolbar-search-container-expandable .cds--search-magnifier-icon,
-.cds--table-toolbar--sm .cds--toolbar-search-container-persistent .cds--search-magnifier-icon {
-  padding: 0.5rem;
-  block-size: 2rem;
-  inline-size: 2rem;
-}
-.cds--table-toolbar--sm .cds--toolbar-action.cds--toolbar-search-container-persistent {
-  inline-size: 100%;
-}
-.cds--table-toolbar--sm .cds--toolbar-search-container-expandable {
-  inline-size: 2rem;
-}
-.cds--table-toolbar--sm .cds--toolbar-search-container-expandable .cds--search .cds--search-input {
-  padding: 0 3rem;
-}
-.cds--table-toolbar--sm .cds--toolbar-search-container-active {
-  flex: auto;
-  transition: flex 175ms cubic-bezier(0.5, 0, 0.1, 1);
-}
-.cds--table-toolbar--sm .cds--toolbar-search-container-active .cds--search-input {
-  visibility: inherit;
-}
-.cds--table-toolbar--sm .cds--toolbar-search-container-active .cds--search-input:focus {
-  outline: 2px solid var(--cds-focus, #0f62fe);
-  outline-offset: -2px;
-}
-@media screen and (prefers-contrast) {
-  .cds--table-toolbar--sm .cds--toolbar-search-container-active .cds--search-input:focus {
-    outline-style: dotted;
-  }
-}
-.cds--table-toolbar--sm .cds--toolbar-search-container-active .cds--search-input:focus {
-  background-color: var(--cds-field-hover);
-}
-.cds--table-toolbar--sm .cds--toolbar-search-container-active .cds--search-input:active,
-.cds--table-toolbar--sm .cds--toolbar-search-container-active .cds--search-input:not(:placeholder-shown) {
-  background-color: var(--cds-field-hover);
-}
-.cds--table-toolbar--sm .cds--toolbar-search-container-active .cds--search-magnifier-icon:focus,
-.cds--table-toolbar--sm .cds--toolbar-search-container-active .cds--search-magnifier-icon:active,
-.cds--table-toolbar--sm .cds--toolbar-search-container-active .cds--search-magnifier-icon:hover {
-  outline: 2px solid transparent;
-  outline-offset: -2px;
-  background-color: transparent;
-}
-.cds--table-toolbar--sm .cds--overflow-menu.cds--toolbar-action {
-  block-size: 2rem;
-  inline-size: 2rem;
-  min-inline-size: 2rem;
-}
-.cds--table-toolbar--sm .cds--toolbar-content {
-  block-size: 2rem;
-}
-.cds--table-toolbar--sm .cds--toolbar-content .cds--overflow-menu {
-  block-size: 2rem;
-  inline-size: 2rem;
-}
-
-.cds--search--disabled .cds--search-magnifier-icon:hover {
-  background-color: transparent;
+.cds--table-toolbar .cds--batch-actions {
+  block-size: var(--cds-layout-size-height-local);
 }
 
-.cds--table-toolbar--sm .cds--batch-actions .cds--action-list {
-  block-size: 2rem;
+.cds--table-toolbar .cds--batch-actions .cds--action-list {
+  block-size: var(--cds-layout-size-height-local);
 }
 
-.cds--table-toolbar--sm .cds--toolbar-action {
+.cds--table-toolbar .cds--toolbar-action {
   padding: 0.5rem 0;
-  block-size: 2rem;
-  inline-size: 2rem;
+  block-size: var(--cds-layout-size-height-local);
+  inline-size: var(--cds-layout-size-height-local);
 }
 
-.cds--table-toolbar--sm .cds--btn--primary {
-  block-size: 2rem;
+.cds--table-toolbar .cds--btn--primary {
+  block-size: var(--cds-layout-size-height-local);
   min-block-size: auto;
-  padding-block: 0.375rem;
 }
 
-.cds--table-toolbar--sm .cds--btn--primary.cds--batch-summary__cancel::before {
-  inset-block-start: 0.5rem;
+.cds--table-toolbar .cds--btn--primary.cds--batch-summary__cancel::before {
+  inset-block-start: calc((var(--cds-layout-size-height-local) - 1rem) / 2);
 }
 
-.cds--table-toolbar--sm .cds--toolbar-action ~ .cds--btn {
+.cds--table-toolbar .cds--toolbar-action ~ .cds--btn {
   overflow: hidden;
-  block-size: 2rem;
+  block-size: var(--cds-layout-size-height-local);
 }
 
-.cds--table-toolbar--sm .cds--batch-summary {
-  min-block-size: 2rem;
+.cds--table-toolbar .cds--batch-summary {
+  min-block-size: var(--cds-layout-size-height-local);
 }
 
 .cds--data-table tr.cds--parent-row:first-of-type td {
@@ -16525,6 +16421,10 @@ because the nesting selector cannot represent pseudo-elements. */
   }
 }
 
+.cds--dialog.cds--modal-container {
+  border: none;
+}
+
 .cds--dialog-content {
   position: relative;
   grid-area: content;
@@ -17557,6 +17457,11 @@ button.cds--dropdown-text:focus {
   outline-width: 1px;
 }
 
+.cds--file__selected-file--disabled {
+  color: var(--cds-text-disabled, rgba(22, 22, 22, 0.25));
+  cursor: not-allowed;
+}
+
 .cds--file__selected-file--invalid {
   outline: 2px solid var(--cds-support-error, #da1e28);
   outline-offset: -2px;
@@ -17678,9 +17583,17 @@ button.cds--dropdown-text:focus {
   background-color: transparent;
   block-size: 1.5rem;
   cursor: pointer;
-  fill: var(--cds-icon-primary, #161616);
   inline-size: 1.5rem;
 }
+.cds--file__state-container .cds--file-close svg {
+  fill: var(--cds-icon-primary, #161616);
+}
+.cds--file__state-container .cds--file-close[disabled] {
+  cursor: not-allowed;
+}
+.cds--file__state-container .cds--file-close[disabled] svg {
+  fill: var(--cds-icon-disabled, rgba(22, 22, 22, 0.25));
+}
 .cds--file__state-container .cds--file-close:focus {
   outline: 2px solid var(--cds-focus, #0f62fe);
   outline-offset: -2px;
@@ -17691,10 +17604,6 @@ button.cds--dropdown-text:focus {
   }
 }
 
-.cds--file__state-container .cds--file-close svg path {
-  fill: var(--cds-icon-primary, #161616);
-}
-
 .cds--file__state-container .cds--inline-loading__animation {
   margin-inline-end: -0.5rem;
 }
@@ -21428,7 +21337,7 @@ optgroup.cds--select-optgroup:disabled,
 }
 
 .cds--modal-content .cds--form--fluid {
-  margin-inline: -2rem;
+  margin-inline: -1rem;
 }
 
 .cds--modal-content > p,
@@ -23669,7 +23578,7 @@ span.cds--pagination__text.cds--pagination__items-count {
 
 .cds--progress-bar__track {
   position: relative;
-  background-color: var(--cds-layer);
+  background-color: var(--cds-border-subtle);
   block-size: 0.5rem;
   inline-size: 100%;
   min-inline-size: 3rem;
@@ -26683,6 +26592,11 @@ span.cds--pagination__text.cds--pagination__items-count {
   transform: translateX(1.5rem);
 }
 
+@media screen and (-ms-high-contrast: active), (forced-colors: active) {
+  .cds--toggle__switch--checked {
+    background-color: Highlight;
+  }
+}
 .cds--toggle__text {
   font-size: var(--cds-body-01-font-size, 0.875rem);
   font-weight: var(--cds-body-01-font-weight, 400);