@carbon/styles 1.33.0 → 1.34.0-rc.0

package/css/styles.css

@@ -4116,6 +4116,10 @@ li.cds--accordion__item--disabled:last-of-type {
   border-radius: 0;
 }
 
+.cds--popover--tab-tip .cds--popover {
+  will-change: filter;
+}
+
 .cds--popover--tab-tip__button {
   box-sizing: border-box;
   padding: 0;
@@ -4269,6 +4273,9 @@ li.cds--accordion__item--disabled:last-of-type {
   --temp-1lh: (
     var(--cds-body-compact-01-line-height, 1.28572) * 1em
   );
+  --temp-expressive-1lh: (
+    var(--cds-body-compact-02-line-height, 1.375) * 1em
+  );
   --temp-padding-block-max: calc(
     (var(--cds-layout-size-height-lg) - var(--temp-1lh)) / 2 -
       0.0625rem
@@ -4289,15 +4296,14 @@ li.cds--accordion__item--disabled:last-of-type {
   width: -moz-max-content;
   width: max-content;
   max-width: 20rem;
-  height: var(--cds-layout-size-height-local);
+  min-height: var(--cds-layout-size-height-local);
   flex-shrink: 0;
   justify-content: space-between;
   margin: 0;
   border-radius: 0;
   cursor: pointer;
   outline: none;
-  -webkit-padding-before: min((var(--cds-layout-size-height-local) - var(--temp-1lh)) / 2 - 0.0625rem, var(--temp-padding-block-max));
-          padding-block-start: min((var(--cds-layout-size-height-local) - var(--temp-1lh)) / 2 - 0.0625rem, var(--temp-padding-block-max));
+  padding-block: min((var(--cds-layout-size-height-local) - var(--temp-1lh)) / 2 - 0.0625rem, var(--temp-padding-block-max));
   -webkit-padding-end: calc(var(--cds-layout-density-padding-inline-local) * 3 + 1rem - 0.0625rem);
           padding-inline-end: calc(var(--cds-layout-density-padding-inline-local) * 3 + 1rem - 0.0625rem);
   -webkit-padding-start: calc(var(--cds-layout-density-padding-inline-local) - 0.0625rem);
@@ -4623,6 +4629,7 @@ li.cds--accordion__item--disabled:last-of-type {
   font-weight: var(--cds-body-compact-02-font-weight, 400);
   line-height: var(--cds-body-compact-02-line-height, 1.375);
   letter-spacing: var(--cds-body-compact-02-letter-spacing, 0);
+  padding-block: min((var(--cds-layout-size-height-local) - var(--temp-expressive-1lh)) / 2 - 0.0625rem, var(--temp-padding-block-max));
 }
 
 .cds--btn--icon-only.cds--btn--expressive {
@@ -4758,6 +4765,7 @@ li.cds--accordion__item--disabled:last-of-type {
   display: flex;
   width: 2.5rem;
   height: 2.5rem;
+  min-height: 2.5rem;
   align-items: center;
   justify-content: center;
   cursor: pointer;
@@ -6458,6 +6466,7 @@ fieldset[disabled] .cds--form__helper-text {
 .cds--snippet--inline.cds--btn {
   width: initial;
   height: 1.25rem;
+  min-height: 1.25rem;
   padding-inline: 0;
 }
 
@@ -6485,6 +6494,7 @@ fieldset[disabled] .cds--form__helper-text {
   right: 0;
   bottom: 0;
   display: inline-flex;
+  height: 2rem;
   align-items: center;
   padding: 0.5rem 1rem;
   border: 0;
@@ -10613,6 +10623,9 @@ tr.cds--data-table--selected:last-of-type td {
   position: absolute;
   cursor: pointer;
 }
+.cds--search--expandable .cds--search-magnifier:focus {
+  outline: 2px solid var(--cds-focus, #0f62fe);
+}
 
 .cds--search--expandable .cds--search-magnifier:hover {
   background-color: var(--cds-background-hover, rgba(141, 141, 141, 0.12));
@@ -19763,17 +19776,28 @@ span.cds--pagination__text.cds--pagination__items-count {
   margin-left: auto;
 }
 
+.cds--tabs,
+.cds--tab-content {
+  --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));
+}
+
+.cds--tabs.cds--tabs--tall,
+.cds--tabs.cds--tabs--contained.cds--tabs--tall {
+  --cds-layout-size-height-local: clamp(max(var(--cds-layout-size-height-min), var(--cds-layout-size-height-lg)), var(--cds-layout-size-height, var(--cds-layout-size-height-xl)), min(var(--cds-layout-size-height-max), var(--cds-layout-size-height-xl)));
+}
+
 .cds--tabs {
   font-size: var(--cds-body-compact-01-font-size, 0.875rem);
   font-weight: var(--cds-body-compact-01-font-weight, 400);
   line-height: var(--cds-body-compact-01-line-height, 1.28572);
   letter-spacing: var(--cds-body-compact-01-letter-spacing, 0.16px);
+  --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-md)), min(var(--cds-layout-size-height-max), var(--cds-layout-size-height-lg)));
   position: relative;
   display: flex;
   width: 100%;
   height: auto;
-  min-height: 2.5rem;
-  max-height: 4rem;
+  min-height: var(--cds-layout-size-height-local);
+  max-height: var(--cds-layout-size-height-xl);
   color: var(--cds-text-primary, #161616);
 }
 .cds--tabs html {
@@ -19793,7 +19817,7 @@ span.cds--pagination__text.cds--pagination__items-count {
   font-weight: 600;
 }
 .cds--tabs.cds--tabs--contained {
-  min-height: 3rem;
+  --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--tabs .cds--tab--list {
   display: flex;
@@ -19941,6 +19965,10 @@ span.cds--pagination__text.cds--pagination__items-count {
 .cds--tabs .cds--tabs__nav-item-label-wrapper {
   display: flex;
 }
+.cds--tabs:not(.cds--tabs--contained) .cds--tabs__nav-item-label-wrapper {
+  position: relative;
+  top: 0.0625rem;
+}
 .cds--tabs .cds--tabs__nav-item {
   display: flex;
   flex: 1 0 auto;
@@ -19977,12 +20005,6 @@ span.cds--pagination__text.cds--pagination__items-count {
 .cds--tabs .cds--tabs__nav-item .cds--tabs__nav-link {
   transition: color 70ms cubic-bezier(0.2, 0, 0.38, 0.9), border-bottom-color 70ms cubic-bezier(0.2, 0, 0.38, 0.9), outline 70ms cubic-bezier(0.2, 0, 0.38, 0.9);
 }
-.cds--tabs.cds--tabs--contained .cds--tabs__nav-item:not(.cds--tabs__nav-item--disabled) .cds--tabs__nav-item--icon .cds--tabs__nav-item--close-icon {
-  padding: 1rem;
-  margin-top: -0.5rem;
-  margin-right: -1rem;
-  margin-left: -1rem;
-}
 .cds--tabs.cds--tabs--contained .cds--tabs__nav-item:not(.cds--tabs__nav-item--disabled) .cds--tabs__nav-item--icon .cds--tabs__nav-item--close-icon:hover {
   background-color: inherit;
 }
@@ -20019,7 +20041,8 @@ span.cds--pagination__text.cds--pagination__items-count {
   margin-top: -2px;
 }
 .cds--tabs.cds--tabs--contained .cds--tabs__nav-item--icon {
-  padding-left: 1rem;
+  -webkit-padding-start: var(--cds-layout-density-padding-inline-local);
+          padding-inline-start: var(--cds-layout-density-padding-inline-local);
 }
 .cds--tabs .cds--tabs__nav-link {
   box-sizing: border-box;
@@ -20045,9 +20068,9 @@ span.cds--pagination__text.cds--pagination__items-count {
   line-height: var(--cds-body-compact-01-line-height, 1.28572);
   letter-spacing: var(--cds-body-compact-01-letter-spacing, 0.16px);
   overflow: hidden;
-  padding: 0.75rem 1rem 0.5rem;
   border-bottom: 2px solid var(--cds-border-subtle);
   color: var(--cds-text-secondary, #525252);
+  padding-inline: var(--cds-layout-density-padding-inline-local);
   text-align: left;
   text-decoration: none;
   text-overflow: ellipsis;
@@ -20072,9 +20095,8 @@ span.cds--pagination__text.cds--pagination__items-count {
   }
 }
 .cds--tabs.cds--tabs--contained .cds--tabs__nav-link {
-  height: 3rem;
-  padding: 0.5rem 1rem;
   border-bottom: 0;
+  padding-inline: var(--cds-layout-density-padding-inline-local);
 }
 .cds--tabs.cds--tabs--contained:not(.cds--tabs--tall) .cds--tabs__nav-item-label {
   line-height: calc(3rem - (0.5rem * 2));
@@ -20086,16 +20108,13 @@ span.cds--pagination__text.cds--pagination__items-count {
   letter-spacing: var(--cds-label-01-letter-spacing, 0.32px);
   min-height: 1rem;
 }
-.cds--tabs.cds--tabs--contained.cds--tabs--tall .cds--tabs__nav-link {
-  height: 4rem;
-}
 .cds--tabs.cds--tabs__icon--default .cds--tab--list, .cds--tabs.cds--tabs__icon--lg .cds--tab--list {
   overflow-x: visible;
 }
 .cds--tabs .cds--tabs__nav-item--icon-only, .cds--tabs.cds--tabs--contained .cds--tabs__nav-item--icon-only {
   display: flex;
-  width: var(--cds-icon-tab-size, 2.5rem);
-  height: var(--cds-icon-tab-size, 2.5rem);
+  width: var(--cds-layout-size-height-local);
+  height: var(--cds-layout-size-height-local);
   align-items: center;
   justify-content: center;
   padding: 0;
@@ -20103,9 +20122,6 @@ span.cds--pagination__text.cds--pagination__items-count {
 .cds--tabs .cds--tabs__nav-item--icon-only .cds--tabs__nav-item-label, .cds--tabs.cds--tabs--contained .cds--tabs__nav-item--icon-only .cds--tabs__nav-item-label {
   line-height: 0;
 }
-.cds--tabs.cds--tabs__icon--lg {
-  --cds-icon-tab-size: 3rem;
-}
 .cds--tabs:not(.cds--tabs--contained) .cds--tabs__nav-item:not(.cds--tabs__nav-item--selected):not(.cds--tabs__nav-item--disabled):hover {
   border-bottom: 2px solid var(--cds-border-strong);
   color: var(--cds-text-primary, #161616);
@@ -20184,7 +20200,7 @@ span.cds--pagination__text.cds--pagination__items-count {
 }
 
 .cds--tab-content {
-  padding: 1rem;
+  padding: var(--cds-layout-density-padding-inline-local);
 }
 .cds--tab-content:focus {
   outline: 2px solid var(--cds-focus, #0f62fe);
@@ -20214,7 +20230,7 @@ span.cds--pagination__text.cds--pagination__items-count {
   width: 10rem;
   height: 100%;
   align-items: center;
-  padding: 0 1rem;
+  padding: 0 var(--cds-layout-density-padding-inline-local);
 }
 
 .cds--tabs.cds--skeleton .cds--tabs__nav-link span {
@@ -20370,6 +20386,7 @@ span.cds--pagination__text.cds--pagination__items-count {
 .cds--tile--clickable.cds--link--disabled,
 .cds--tile--clickable:hover.cds--link--disabled {
   display: block;
+  padding: var(--cds-layout-density-padding-inline-local);
   background-color: var(--cds-layer);
   color: var(--cds-text-disabled, rgba(22, 22, 22, 0.25));
   cursor: not-allowed;
@@ -20824,6 +20841,13 @@ span.cds--pagination__text.cds--pagination__items-count {
   row-gap: 1rem;
 }
 
+.cds--toggletip-content p {
+  font-size: var(--cds-body-01-font-size, 0.875rem);
+  font-weight: var(--cds-body-01-font-weight, 400);
+  line-height: var(--cds-body-01-line-height, 1.42857);
+  letter-spacing: var(--cds-body-01-letter-spacing, 0.16px);
+}
+
 .cds--toggletip-actions {
   display: flex;
   align-items: center;
@@ -21271,8 +21295,14 @@ span.cds--pagination__text.cds--pagination__items-count {
 
 .cds--tree--xs .cds--tree-node__label {
   min-height: 1.5rem;
-  padding-top: 0.25rem;
-  padding-bottom: 0.25rem;
+}
+
+.cds--tree--xs .cds--tree-node:not(.cds--tree-parent-node) .cds--tree-node__label {
+  padding: 0;
+}
+
+.cds--tree--xs .cds--tree-parent-node__toggle {
+  margin-top: 0;
 }
 
 .cds--content {