@carbon/styles 1.31.0-rc.0 → 1.31.1

package/css/styles.css

@@ -8339,6 +8339,34 @@ fieldset[disabled] .cds--form__helper-text {
   vertical-align: middle;
 }
 
+.cds--data-table.cds--data-table--top-aligned-body.cds--data-table--lg tr:not([data-child-row]) td:not(.cds--table-expand) {
+  padding-top: 1rem;
+  padding-bottom: 1rem;
+}
+.cds--data-table.cds--data-table--top-aligned-body.cds--data-table--lg tr:not([data-child-row]) td:not(.cds--table-expand).cds--table-column-menu {
+  padding-top: 0.5rem;
+}
+.cds--data-table.cds--data-table--top-aligned-body.cds--data-table--lg tr:not([data-child-row]) td:not(.cds--table-expand).cds--table-column-checkbox:not(.cds--table-column-radio) {
+  padding-top: 0.8125rem;
+}
+.cds--data-table.cds--data-table--top-aligned-body td {
+  vertical-align: top;
+}
+
+.cds--data-table.cds--data-table--top-aligned-header.cds--data-table--lg th:not(.cds--table-expand):not(.cds--table-sort__header) {
+  padding-top: 1rem;
+  padding-bottom: 1rem;
+}
+.cds--data-table.cds--data-table--top-aligned-header.cds--data-table--lg th:not(.cds--table-expand):not(.cds--table-sort__header).cds--table-column-menu {
+  padding-top: 0.5rem;
+}
+.cds--data-table.cds--data-table--top-aligned-header.cds--data-table--lg th:not(.cds--table-expand):not(.cds--table-sort__header).cds--table-column-checkbox {
+  padding-top: 0.8125rem;
+}
+.cds--data-table.cds--data-table--top-aligned-header th {
+  vertical-align: top;
+}
+
 .cds--data-table th[align=right],
 .cds--data-table td[align=right] {
   text-align: right;
@@ -8619,7 +8647,8 @@ tr.cds--data-table--selected:last-of-type td {
   height: calc(100% + 1px);
 }
 
-.cds--data-table.cds--data-table--xs .cds--table-column-checkbox {
+.cds--data-table.cds--data-table--xs:not(.cds--data-table--top-aligned-body) td.cds--table-column-checkbox,
+.cds--data-table.cds--data-table--xs:not(.cds--data-table--top-aligned-header) th.cds--table-column-checkbox {
   padding-top: 0;
   padding-bottom: 0;
 }
@@ -8641,12 +8670,14 @@ tr.cds--data-table--selected:last-of-type td {
 }
 
 .cds--data-table--sm td,
-.cds--data-table--sm tbody tr th {
+.cds--data-table--sm tbody tr th,
+.cds--data-table--sm.cds--data-table--top-aligned-header th.cds--table-column-checkbox {
   padding-top: 0.4375rem;
   padding-bottom: 0.375rem;
 }
 
-.cds--data-table.cds--data-table--sm .cds--table-column-checkbox {
+.cds--data-table.cds--data-table--sm:not(.cds--data-table--top-aligned-body) td.cds--table-column-checkbox,
+.cds--data-table.cds--data-table--sm:not(.cds--data-table--top-aligned-header) th.cds--table-column-checkbox {
   padding-top: 0.1875rem;
   padding-bottom: 0.1875rem;
 }
@@ -8661,7 +8692,8 @@ tr.cds--data-table--selected:last-of-type td {
   height: 2.5rem;
 }
 
-.cds--data-table--md .cds--table-header-label {
+.cds--data-table--md .cds--table-header-label,
+.cds--data-table--md.cds--data-table--top-aligned-header th.cds--table-column-checkbox {
   padding-top: 0.4375rem;
   padding-bottom: 0.4375rem;
 }
@@ -8672,7 +8704,8 @@ tr.cds--data-table--selected:last-of-type td {
   padding-bottom: 0.375rem;
 }
 
-.cds--data-table.cds--data-table--md .cds--table-column-checkbox {
+.cds--data-table.cds--data-table--md:not(.cds--data-table--top-aligned-body) td.cds--table-column-checkbox,
+.cds--data-table.cds--data-table--md:not(.cds--data-table--top-aligned-header) th.cds--table-column-checkbox {
   padding-top: 0.1875rem;
   padding-bottom: 0.1875rem;
 }
@@ -8696,6 +8729,7 @@ tr.cds--data-table--selected:last-of-type td {
 .cds--data-table--xl td,
 .cds--data-table--xl tbody tr th {
   padding-top: 1rem;
+  padding-bottom: 1rem;
 }
 
 .cds--data-table--xl th,
@@ -9646,6 +9680,25 @@ tr.cds--parent-row.cds--expandable-row.cds--expandable-row--hover td:first-of-ty
   border: 0;
 }
 
+.cds--data-table--top-aligned-body td .cds--table-expand__button,
+.cds--data-table--top-aligned-header th .cds--table-expand__button {
+  height: 2rem;
+  align-items: start;
+  padding-top: 0.5rem;
+}
+
+.cds--data-table--top-aligned-body.cds--data-table--xs td .cds--table-expand__button,
+.cds--data-table--top-aligned-header.cds--data-table--xs th .cds--table-expand__button {
+  height: 1.5rem;
+  padding-top: 0.25rem;
+}
+
+.cds--data-table--top-aligned-body.cds--data-table--md td .cds--table-expand__button,
+.cds--data-table--top-aligned-header.cds--data-table--md th .cds--table-expand__button {
+  padding-top: 0.5rem;
+  margin-top: -0.25rem;
+}
+
 .cds--table-expand__button:focus {
   box-shadow: inset 0 0 0 2px var(--cds-focus, #0f62fe);
   outline: none;
@@ -9659,7 +9712,6 @@ tr.cds--parent-row.cds--expandable-row.cds--expandable-row--hover td:first-of-ty
 
 .cds--data-table--xl .cds--table-expand__button {
   width: 2rem;
-  padding: 0;
 }
 
 tr.cds--parent-row.cds--expandable-row td.cds--table-expand + td::after {
@@ -9996,6 +10048,30 @@ th .cds--table-sort__flex {
   justify-content: space-between;
 }
 
+.cds--data-table--top-aligned-header th .cds--table-sort__flex {
+  align-items: start;
+}
+
+.cds--data-table.cds--data-table--top-aligned-header.cds--data-table--lg th.cds--table-sort__header {
+  padding-top: 1rem;
+}
+
+.cds--data-table.cds--data-table--top-aligned-header.cds--data-table--sm th.cds--table-sort__header .cds--table-sort__flex .cds--table-header-label,
+.cds--data-table.cds--data-table--top-aligned-header.cds--data-table--xs th.cds--table-sort__header .cds--table-sort__flex .cds--table-header-label {
+  padding-top: 0;
+  padding-bottom: 0;
+}
+
+.cds--data-table.cds--data-table--top-aligned-header.cds--data-table--sm th.cds--table-sort__header {
+  padding-top: 0.4375rem;
+  padding-bottom: 0.4375rem;
+}
+
+.cds--data-table.cds--data-table--top-aligned-header.cds--data-table--xs th.cds--table-sort__header {
+  padding-top: 0.125rem;
+  padding-bottom: 0.125rem;
+}
+
 .cds--data-table--sort:not(.cds--data-table--xs):not(.cds--data-table--sm):not(.cds--data-table--md):not(.cds--data-table--xl) th .cds--table-sort__flex {
   /* IE11 workaround for align-items: center and min-height
       https://github.com/philipwalton/flexbugs/issues/231 */
@@ -17882,6 +17958,10 @@ span.cds--pagination__text.cds--pagination__items-count {
   fill: var(--cds-icon-primary, #161616);
 }
 
+.cds--progress-bar {
+  --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--progress-bar__label {
   font-size: var(--cds-body-compact-01-font-size, 0.875rem);
   font-weight: var(--cds-body-compact-01-font-weight, 400);
@@ -17890,8 +17970,9 @@ span.cds--pagination__text.cds--pagination__items-count {
   display: flex;
   min-width: 3rem;
   justify-content: space-between;
-  margin-bottom: 0.5rem;
   color: var(--cds-text-primary, #161616);
+  -webkit-margin-after: 0.5rem;
+          margin-block-end: 0.5rem;
 }
 
 .cds--progress-bar__label-text {
@@ -17953,7 +18034,8 @@ span.cds--pagination__text.cds--pagination__items-count {
 
 .cds--progress-bar__status-icon {
   flex-shrink: 0;
-  margin-left: 1rem;
+  -webkit-margin-start: var(--cds-layout-density-padding-inline-local);
+          margin-inline-start: var(--cds-layout-density-padding-inline-local);
 }
 
 .cds--progress-bar--finished .cds--progress-bar__bar,
@@ -17990,7 +18072,8 @@ span.cds--pagination__text.cds--pagination__items-count {
 .cds--progress-bar--error.cds--progress-bar--inline .cds--progress-bar__label {
   flex-shrink: 1;
   justify-content: flex-start;
-  margin-right: 0;
+  -webkit-margin-end: 0;
+          margin-inline-end: 0;
 }
 
 @keyframes progress-bar-indeterminate {
@@ -18009,8 +18092,8 @@ span.cds--pagination__text.cds--pagination__items-count {
 .cds--progress-bar--inline .cds--progress-bar__label {
   flex-shrink: 0;
   margin-bottom: 0;
-  -webkit-margin-end: 1rem;
-          margin-inline-end: 1rem;
+  -webkit-margin-end: var(--cds-layout-density-padding-inline-local);
+          margin-inline-end: var(--cds-layout-density-padding-inline-local);
 }
 
 .cds--progress-bar--inline .cds--progress-bar__track {
@@ -18033,7 +18116,7 @@ span.cds--pagination__text.cds--pagination__items-count {
 
 .cds--progress-bar--indented .cds--progress-bar__label,
 .cds--progress-bar--indented .cds--progress-bar__helper-text {
-  padding-inline: 1rem;
+  padding-inline: var(--cds-layout-density-padding-inline-local);
 }
 
 .cds--tooltip {
@@ -18818,11 +18901,10 @@ span.cds--pagination__text.cds--pagination__items-count {
 }
 
 .cds--slider__range-label {
-  font-family: var(--cds-code-02-font-family, 'IBM Plex Mono', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', monospace);
-  font-size: var(--cds-code-02-font-size, 0.875rem);
-  font-weight: var(--cds-code-02-font-weight, 400);
-  line-height: var(--cds-code-02-line-height, 1.42857);
-  letter-spacing: var(--cds-code-02-letter-spacing, 0.32px);
+  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);
   color: var(--cds-text-primary, #161616);
   white-space: nowrap;
 }
@@ -19612,7 +19694,6 @@ span.cds--pagination__text.cds--pagination__items-count {
 .cds--tabs .cds--tabs__nav-item--icon .cds--tabs__nav-item--close-icon {
   padding: 0.25rem;
   margin: -0.25rem;
-  cursor: pointer;
   line-height: 0;
   pointer-events: auto;
 }