@carbon/styles 1.107.0-rc.0 → 1.108.0-rc.0

package/css/styles.css

@@ -14399,35 +14399,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;
@@ -14436,11 +14439,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 {
@@ -14448,7 +14446,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 {
@@ -14469,46 +14467,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;
@@ -14533,7 +14491,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;
 }
 
@@ -14594,10 +14552,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);
 }
 
@@ -14630,9 +14588,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);
 }
 
@@ -14694,7 +14652,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;
 }
@@ -14708,14 +14665,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]) {
@@ -14741,15 +14692,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);
 }
 
@@ -14764,7 +14710,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;
 }
@@ -14883,115 +14829,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:not(:-moz-placeholder-shown) {
-  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 {
@@ -21722,7 +21589,7 @@ optgroup.cds--select-optgroup:disabled,
 }
 
 .cds--modal-content .cds--form--fluid {
-  margin-inline: -2rem;
+  margin-inline: -1rem;
 }
 
 .cds--modal-content > p,