@itwin/itwinui-css 1.0.0-dev.0 → 1.0.0-dev.10

package/css/table.css

@@ -11,8 +11,8 @@
   display:flex;
   flex-direction:column;
   isolation:isolate;
-  --_iui-table-header-size:55px;
-  --_iui-table-row-size:57px;
+  --_iui-table-header-size:calc(var(--iui-size-s) * 5);
+  --_iui-table-row-size:calc(var(--iui-size-s) * 5 + 2px);
 }
 .iui-table .iui-table-cell-end-icon,
 .iui-table .iui-table-cell-start-icon{
@@ -20,32 +20,34 @@
   display:flex;
   align-items:center;
   justify-content:center;
+  fill:var(--_iui-table-cell-icon-fill);
 }
 .iui-table .iui-table-cell-end-icon svg:not(.iui-radial),
 .iui-table .iui-table-cell-start-icon svg:not(.iui-radial){
   display:flex;
-  width:16px;
-  height:16px;
+  flex-shrink:0;
+  width:var(--iui-size-m);
+  height:var(--iui-size-m);
 }
 .iui-table .iui-table-cell-start-icon{
-  margin-right:8px;
+  margin-right:var(--iui-size-xs);
 }
 .iui-table .iui-table-cell-end-icon{
-  width:24px;
-  height:24px;
-  margin-right:12px;
+  width:var(--iui-size-l);
+  height:var(--iui-size-l);
+  margin-right:var(--iui-size-s);
   margin-left:auto;
 }
 .iui-table[data-iui-size=condensed]{
-  --_iui-table-header-size:44px;
-  --_iui-table-row-size:46px;
+  --_iui-table-header-size:calc(var(--iui-size-s) * 4);
+  --_iui-table-row-size:calc(var(--iui-size-s) * 4 + 2px);
 }
 .iui-table[data-iui-size=extra-condensed]{
-  --_iui-table-header-size:33px;
-  --_iui-table-row-size:35px;
+  --_iui-table-header-size:calc(var(--iui-size-s) * 3);
+  --_iui-table-row-size:calc(var(--iui-size-s) * 3 + 2px);
 }
 .iui-table[data-iui-size=extra-condensed] .iui-table-header .iui-table-cell{
-  padding-block:2.75px;
+  padding-block:calc(var(--iui-size-s) * 0.25);
 }
 .iui-table .iui-table-header .iui-table-cell,
 .iui-table .iui-table-paginator{
@@ -59,6 +61,8 @@
   overflow:hidden;
   display:flex;
   flex-shrink:0;
+  border-top-left-radius:var(--iui-border-radius-1);
+  border-top-right-radius:var(--iui-border-radius-1);
 }
 @supports not (overflow: overlay){
   .iui-table-header-wrapper{
@@ -79,9 +83,9 @@
   background-color:var(--iui-color-background-3);
 }
 .iui-table-header .iui-table-cell:not(.iui-slot){
-  -moz-column-gap:4px;
-       column-gap:4px;
-  padding-block:5.5px;
+  -moz-column-gap:var(--iui-size-2xs);
+       column-gap:var(--iui-size-2xs);
+  padding-block:calc(var(--iui-size-s) * 0.5);
 }
 .iui-table-header .iui-table-cell:not(.iui-slot):focus-visible{
   outline:1px solid var(--iui-color-foreground-primary);
@@ -101,11 +105,11 @@
   cursor:grabbing;
 }
 .iui-table-header .iui-table-cell:not(.iui-slot) .iui-table-filter-button:not([data-iui-active=true]){
-  visibility:hidden;
+  opacity:0;
 }
 .iui-table-header .iui-table-cell:not(.iui-slot) > .iui-table-resizer{
   height:100%;
-  width:16px;
+  width:var(--iui-size-m);
   position:absolute;
   top:0;
   right:0;
@@ -117,13 +121,13 @@
 }
 .iui-table-header .iui-table-cell:not(.iui-slot) > .iui-table-resizer > .iui-table-resizer-bar{
   height:100%;
-  width:2px;
+  width:var(--iui-size-3xs);
   margin:0 auto;
-  transition:background-color 0.2s ease-out, width 0.2s ease-out;
+  transition:background-color var(--iui-duration-1) ease-out, width var(--iui-duration-1) ease-out;
   background-color:var(--iui-color-background-border);
 }
 .iui-table-header .iui-table-cell:not(.iui-slot) > .iui-table-resizer:hover > .iui-table-resizer-bar{
-  width:4px;
+  width:var(--iui-size-2xs);
   background-color:var(--iui-color-foreground-primary);
 }
 .iui-table-header .iui-table-cell:not(.iui-slot):hover > .iui-table-resizer{
@@ -136,12 +140,12 @@
 .iui-table-header .iui-table-cell:not(.iui-slot):hover .iui-table-filter-button, .iui-table-header .iui-table-cell:not(.iui-slot):focus .iui-table-sort,
 .iui-table-header .iui-table-cell:not(.iui-slot):focus .iui-table-filter-button, .iui-table-header .iui-table-cell:not(.iui-slot):focus-within .iui-table-sort,
 .iui-table-header .iui-table-cell:not(.iui-slot):focus-within .iui-table-filter-button{
-  visibility:visible;
+  opacity:1;
 }
 .iui-table-header .iui-table-reorder-bar{
   position:absolute;
   height:100%;
-  width:2px;
+  width:var(--iui-size-3xs);
 }
 .iui-table-header .iui-table-reorder-column-right > .iui-table-reorder-bar{
   right:0;
@@ -154,21 +158,24 @@
   background-color:var(--iui-color-foreground-primary);
 }
 .iui-table-header .iui-table-sort{
-  visibility:hidden;
-  fill:var(--iui-icons-color);
+  opacity:0;
 }
 .iui-table-header .iui-sorted{
+  --_iui-table-cell-icon-fill:var(--iui-color-foreground-2);
   background-color:var(--iui-color-background-4);
 }
 .iui-table-header .iui-sorted .iui-table-sort{
-  visibility:visible;
-  fill:var(--iui-icons-color-actionable);
+  opacity:1;
 }
 
 .iui-table-row{
+  --_iui-table-cell-icon-fill:var(--iui-color-foreground-4);
   min-width:100%;
   display:flex;
 }
+.iui-table-row:last-of-type{
+  border-radius:inherit;
+}
 .iui-table-header .iui-table-row{
   flex-grow:1;
 }
@@ -178,23 +185,20 @@
   border-bottom:solid 1px transparent;
   border-bottom-color:var(--iui-color-background-border);
   background-color:var(--iui-color-background-1);
-  transition:border 0.2s ease-out;
+  transition:border var(--iui-duration-1) ease-out;
 }
 .iui-table-body .iui-table-row > .iui-slot > .iui-table-more-options{
-  visibility:hidden;
-}
-.iui-table-body .iui-table-row:hover:not([aria-disabled=true]) .iui-table-cell{
-  background:linear-gradient(rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-6)), rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-6))), linear-gradient(var(--iui-color-background-1), var(--iui-color-background-1));
+  opacity:0;
 }
-.iui-table-body .iui-table-row:hover:not([aria-disabled=true]) > .iui-slot:not([aria-disabled=true]) > .iui-table-more-options{
-  visibility:visible;
+.iui-table-body .iui-table-row:where(:hover, :focus-within) > .iui-slot > .iui-table-more-options{
+  opacity:1;
 }
-.iui-table-body .iui-table-row:focus-within > .iui-slot:not([aria-disabled=true]) > .iui-table-more-options{
-  visibility:visible;
+.iui-table-body .iui-table-row:where(:hover:not(.iui-loading):not([aria-disabled="true"])) .iui-table-cell{
+  background-color:var(--iui-color-background-transparent-hover);
 }
 @media (prefers-reduced-motion: no-preference){
   .iui-table-body .iui-table-row .iui-table-row-expander > .iui-button-icon{
-    transition:transform 0.2s ease-out;
+    transition:transform var(--iui-duration-1) ease-out;
   }
 }
 .iui-table-body .iui-table-row.iui-table-row-expanded{
@@ -226,7 +230,7 @@
 }
 @media (prefers-reduced-motion: no-preference){
   .iui-table-body .iui-table-row.iui-table-expanded-content.iui-enter-active{
-    transition:opacity 0.2s ease-out, width 0.2s ease-out, height 0.2s ease-out;
+    transition:opacity var(--iui-duration-1) ease-out, width var(--iui-duration-1) ease-out, height var(--iui-duration-1) ease-out;
   }
 }
 .iui-table-body .iui-table-row.iui-table-expanded-content.iui-exit{
@@ -237,7 +241,7 @@
 }
 @media (prefers-reduced-motion: no-preference){
   .iui-table-body .iui-table-row.iui-table-expanded-content.iui-exit-active{
-    transition:opacity 0.2s ease-out, width 0.2s ease-out, height 0.2s ease-out;
+    transition:opacity var(--iui-duration-1) ease-out, width var(--iui-duration-1) ease-out, height var(--iui-duration-1) ease-out;
   }
 }
 .iui-table-body .iui-table-row:not([aria-selected=true]) + [aria-selected=true] .iui-table-cell, .iui-table-body .iui-table-row[aria-selected=true]:first-child .iui-table-cell{
@@ -245,11 +249,11 @@
 }
 .iui-table-body .iui-table-row[aria-selected=true] .iui-table-cell{
   border-color:var(--iui-color-foreground-primary);
-  background:linear-gradient(rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-6)), rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-6))), linear-gradient(var(--iui-color-background-1), var(--iui-color-background-1));
+  background-color:var(--iui-color-background-subtle-primary);
 }
 .iui-table-body .iui-table-row[aria-selected=true] + [aria-selected=true] .iui-table-cell{
   border-bottom-color:transparent;
-  border-top-color:rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-4));
+  border-top-color:hsl(var(--iui-color-foreground-primary-hsl)/var(--iui-opacity-4));
 }
 .iui-table-body .iui-table-row[aria-selected=true]:last-child .iui-table-cell{
   border-bottom-color:var(--iui-color-foreground-primary);
@@ -265,77 +269,97 @@
   border-bottom-color:var(--iui-color-foreground-primary);
 }
 .iui-table-body .iui-table-row.iui-new{
-  font-weight:600;
+  font-weight:var(--iui-font-weight-semibold);
 }
 .iui-table-body .iui-table-row.iui-new > .iui-main-column::before{
   content:"•";
   position:absolute;
   left:0;
-  font-size:24px;
+  font-size:var(--iui-font-size-4);
   color:var(--iui-color-foreground-positive);
 }
+.iui-table-body .iui-table-row.iui-loading,
 .iui-table-body .iui-table-row .iui-table-cell[aria-disabled=true], .iui-table-body .iui-table-row.iui-table-expanded-content[aria-disabled=true]{
-  font-style:italic;
-  cursor:not-allowed;
-  color:var(--iui-text-color-muted);
-}
-.iui-table-body .iui-table-row .iui-table-cell[aria-disabled=true].iui-slot:hover > .iui-table-more-options, .iui-table-body .iui-table-row.iui-table-expanded-content[aria-disabled=true].iui-slot:hover > .iui-table-more-options{
-  visibility:hidden;
+  --_iui-table-cell-icon-fill:var(--iui-color-foreground-4);
+  --_iui-table-cell-image-filter:grayscale(100%);
+  color:var(--iui-color-foreground-4);
 }
+.iui-table-body .iui-table-row.iui-loading img,
+.iui-table-body .iui-table-row.iui-loading svg:not(.iui-radial),
+.iui-table-body .iui-table-row.iui-loading .iui-avatar,
 .iui-table-body .iui-table-row .iui-table-cell[aria-disabled=true] img,
 .iui-table-body .iui-table-row .iui-table-cell[aria-disabled=true] svg:not(.iui-radial),
 .iui-table-body .iui-table-row .iui-table-cell[aria-disabled=true] .iui-avatar, .iui-table-body .iui-table-row.iui-table-expanded-content[aria-disabled=true] img,
 .iui-table-body .iui-table-row.iui-table-expanded-content[aria-disabled=true] svg:not(.iui-radial),
 .iui-table-body .iui-table-row.iui-table-expanded-content[aria-disabled=true] .iui-avatar{
-  filter:grayscale(100%);
+  filter:var(--_iui-table-cell-image-filter);
+}
+.iui-table-body .iui-table-row.iui-loading{
+  font-style:italic;
+}
+.iui-table-body .iui-table-row.iui-loading,
+.iui-table-body .iui-table-row.iui-loading .iui-checkbox{
+  cursor:progress;
+}
+.iui-table-body .iui-table-row .iui-table-cell[aria-disabled=true], .iui-table-body .iui-table-row.iui-table-expanded-content[aria-disabled=true]{
+  cursor:not-allowed;
 }
 .iui-table-body .iui-table-row[data-iui-status=positive] .iui-table-cell:first-of-type,
 .iui-table-body .iui-table-row[data-iui-status=positive] + .iui-table-expanded-content{
-  box-shadow:inset 2px 0 0 0 var(--iui-icons-color-positive);
+  box-shadow:inset var(--iui-size-3xs) 0 0 0 var(--iui-color-foreground-positive);
 }
 .iui-table-body .iui-table-row[data-iui-status=positive] .iui-table-cell:first-of-type::-moz-selection, .iui-table-body .iui-table-row[data-iui-status=positive] .iui-table-cell:first-of-type *::-moz-selection, .iui-table-body .iui-table-row[data-iui-status=positive] + .iui-table-expanded-content::-moz-selection, .iui-table-body .iui-table-row[data-iui-status=positive] + .iui-table-expanded-content *::-moz-selection{
-  background-color:rgba(var(--iui-color-foreground-positive-rgb), var(--iui-opacity-5));
+  background-color:hsl(var(--iui-color-foreground-positive-hsl)/var(--iui-opacity-5));
 }
 .iui-table-body .iui-table-row[data-iui-status=positive] .iui-table-cell:first-of-type::selection,
 .iui-table-body .iui-table-row[data-iui-status=positive] .iui-table-cell:first-of-type *::selection,
 .iui-table-body .iui-table-row[data-iui-status=positive] + .iui-table-expanded-content::selection,
 .iui-table-body .iui-table-row[data-iui-status=positive] + .iui-table-expanded-content *::selection{
-  background-color:rgba(var(--iui-color-foreground-positive-rgb), var(--iui-opacity-5));
+  background-color:hsl(var(--iui-color-foreground-positive-hsl)/var(--iui-opacity-5));
 }
-.iui-table-body .iui-table-row[data-iui-status=positive] .iui-table-cell-end-icon svg{
-  fill:var(--iui-icons-color-positive);
+.iui-table-body .iui-table-row[data-iui-status=positive] .iui-table-cell-end-icon{
+  --_iui-table-cell-icon-fill:var(--iui-color-foreground-positive);
+}
+.iui-table-body .iui-table-row[data-iui-status=positive] .iui-table-cell[aria-disabled=true] .iui-table-cell-end-icon{
+  --_iui-table-cell-image-filter:none;
 }
 .iui-table-body .iui-table-row[data-iui-status=warning] .iui-table-cell:first-of-type,
 .iui-table-body .iui-table-row[data-iui-status=warning] + .iui-table-expanded-content{
-  box-shadow:inset 2px 0 0 0 var(--iui-icons-color-warning);
+  box-shadow:inset var(--iui-size-3xs) 0 0 0 var(--iui-color-foreground-warning);
 }
 .iui-table-body .iui-table-row[data-iui-status=warning] .iui-table-cell:first-of-type::-moz-selection, .iui-table-body .iui-table-row[data-iui-status=warning] .iui-table-cell:first-of-type *::-moz-selection, .iui-table-body .iui-table-row[data-iui-status=warning] + .iui-table-expanded-content::-moz-selection, .iui-table-body .iui-table-row[data-iui-status=warning] + .iui-table-expanded-content *::-moz-selection{
-  background-color:rgba(var(--iui-color-foreground-warning-rgb), var(--iui-opacity-5));
+  background-color:hsl(var(--iui-color-foreground-warning-hsl)/var(--iui-opacity-5));
 }
 .iui-table-body .iui-table-row[data-iui-status=warning] .iui-table-cell:first-of-type::selection,
 .iui-table-body .iui-table-row[data-iui-status=warning] .iui-table-cell:first-of-type *::selection,
 .iui-table-body .iui-table-row[data-iui-status=warning] + .iui-table-expanded-content::selection,
 .iui-table-body .iui-table-row[data-iui-status=warning] + .iui-table-expanded-content *::selection{
-  background-color:rgba(var(--iui-color-foreground-warning-rgb), var(--iui-opacity-5));
+  background-color:hsl(var(--iui-color-foreground-warning-hsl)/var(--iui-opacity-5));
+}
+.iui-table-body .iui-table-row[data-iui-status=warning] .iui-table-cell-end-icon{
+  --_iui-table-cell-icon-fill:var(--iui-color-foreground-warning);
 }
-.iui-table-body .iui-table-row[data-iui-status=warning] .iui-table-cell-end-icon svg{
-  fill:var(--iui-icons-color-warning);
+.iui-table-body .iui-table-row[data-iui-status=warning] .iui-table-cell[aria-disabled=true] .iui-table-cell-end-icon{
+  --_iui-table-cell-image-filter:none;
 }
 .iui-table-body .iui-table-row[data-iui-status=negative] .iui-table-cell:first-of-type,
 .iui-table-body .iui-table-row[data-iui-status=negative] + .iui-table-expanded-content{
-  box-shadow:inset 2px 0 0 0 var(--iui-icons-color-negative);
+  box-shadow:inset var(--iui-size-3xs) 0 0 0 var(--iui-color-foreground-negative);
 }
 .iui-table-body .iui-table-row[data-iui-status=negative] .iui-table-cell:first-of-type::-moz-selection, .iui-table-body .iui-table-row[data-iui-status=negative] .iui-table-cell:first-of-type *::-moz-selection, .iui-table-body .iui-table-row[data-iui-status=negative] + .iui-table-expanded-content::-moz-selection, .iui-table-body .iui-table-row[data-iui-status=negative] + .iui-table-expanded-content *::-moz-selection{
-  background-color:rgba(var(--iui-color-foreground-negative-rgb), var(--iui-opacity-5));
+  background-color:hsl(var(--iui-color-foreground-negative-hsl)/var(--iui-opacity-5));
 }
 .iui-table-body .iui-table-row[data-iui-status=negative] .iui-table-cell:first-of-type::selection,
 .iui-table-body .iui-table-row[data-iui-status=negative] .iui-table-cell:first-of-type *::selection,
 .iui-table-body .iui-table-row[data-iui-status=negative] + .iui-table-expanded-content::selection,
 .iui-table-body .iui-table-row[data-iui-status=negative] + .iui-table-expanded-content *::selection{
-  background-color:rgba(var(--iui-color-foreground-negative-rgb), var(--iui-opacity-5));
+  background-color:hsl(var(--iui-color-foreground-negative-hsl)/var(--iui-opacity-5));
+}
+.iui-table-body .iui-table-row[data-iui-status=negative] .iui-table-cell-end-icon{
+  --_iui-table-cell-icon-fill:var(--iui-color-foreground-negative);
 }
-.iui-table-body .iui-table-row[data-iui-status=negative] .iui-table-cell-end-icon svg{
-  fill:var(--iui-icons-color-negative);
+.iui-table-body .iui-table-row[data-iui-status=negative] .iui-table-cell[aria-disabled=true] .iui-table-cell-end-icon{
+  --_iui-table-cell-image-filter:none;
 }
 
 .iui-table-header-actions-container{
@@ -344,7 +368,7 @@
   align-items:center;
   flex-wrap:wrap;
   justify-content:flex-end;
-  margin-right:12px;
+  margin-right:var(--iui-size-s);
 }
 .iui-table-header-actions-container .iui-table-cell-end-icon{
   width:28px;
@@ -369,19 +393,26 @@
 .iui-table-body.iui-scroll-snapping .iui-table-row{
   scroll-snap-align:start none;
 }
-.iui-table-body.iui-zebra-striping .iui-table-row:nth-child(even):not([aria-selected=true]) .iui-table-cell{
-  background-color:rgba(var(--iui-color-foreground-body-rgb), 0.02);
+.iui-table-body:last-child{
+  border-bottom-left-radius:var(--iui-border-radius-1);
+  border-bottom-right-radius:var(--iui-border-radius-1);
+}
+.iui-table-body.iui-zebra-striping .iui-table-row:nth-child(even):not([aria-selected=true]) .iui-table-cell::before{
+  content:"";
+  position:absolute;
+  inset:0;
+  background-color:hsl(var(--iui-color-foreground-1-hsl)/0.02);
 }
 .iui-table-body > .iui-table-empty{
   text-align:center;
-  padding:32px;
+  padding:var(--iui-size-xl);
   display:flex;
   flex-direction:column;
   justify-content:center;
   align-items:center;
   flex-grow:1;
   align-self:center;
-  color:var(--iui-text-color-muted);
+  color:var(--iui-color-foreground-4);
   background-color:var(--iui-color-background-1);
 }
 
@@ -389,27 +420,28 @@
   align-items:center;
   display:flex;
   flex-grow:1;
-  min-width:64px;
-  padding-left:16px;
-  flex-basis:64px;
+  min-width:var(--iui-size-2xl);
+  padding-left:var(--iui-size-m);
+  flex-basis:var(--iui-size-2xl);
   position:relative;
   word-break:break-word;
 }
 .iui-table-cell:first-of-type{
   border-left:solid 1px transparent;
+  border-bottom-left-radius:inherit;
 }
 .iui-table-cell:last-of-type{
   border-right:solid 1px transparent;
 }
 .iui-table-cell.iui-slot{
-  width:48px;
+  width:calc(var(--iui-size-l) * 2);
   padding:0;
   flex-grow:0;
   min-width:0;
   display:flex;
   justify-content:center;
   align-items:center;
-  flex-basis:48px;
+  flex-basis:calc(var(--iui-size-l) * 2);
 }
 .iui-table-cell.iui-table-cell-sticky{
   position:-webkit-sticky;
@@ -419,37 +451,46 @@
   right:var(--iui-table-sticky-right, initial);
 }
 .iui-table-cell:not(.iui-slot):last-child{
-  padding-right:16px;
-}
-.iui-table-cell[data-iui-status=positive]{
-  background:linear-gradient(rgba(var(--iui-color-foreground-positive-rgb), var(--iui-opacity-6)), rgba(var(--iui-color-foreground-positive-rgb), var(--iui-opacity-6))), linear-gradient(var(--iui-color-background-1), var(--iui-color-background-1));
+  padding-right:var(--iui-size-m);
 }
 .iui-table-cell[data-iui-status=positive]::-moz-selection, .iui-table-cell[data-iui-status=positive] *::-moz-selection{
-  background-color:rgba(var(--iui-color-foreground-positive-rgb), var(--iui-opacity-5));
+  background-color:hsl(var(--iui-color-foreground-positive-hsl)/var(--iui-opacity-5));
 }
 .iui-table-cell[data-iui-status=positive]::selection,
 .iui-table-cell[data-iui-status=positive] *::selection{
-  background-color:rgba(var(--iui-color-foreground-positive-rgb), var(--iui-opacity-5));
+  background-color:hsl(var(--iui-color-foreground-positive-hsl)/var(--iui-opacity-5));
 }
-.iui-table-cell[data-iui-status=warning]{
-  background:linear-gradient(rgba(var(--iui-color-foreground-warning-rgb), var(--iui-opacity-6)), rgba(var(--iui-color-foreground-warning-rgb), var(--iui-opacity-6))), linear-gradient(var(--iui-color-background-1), var(--iui-color-background-1));
+.iui-table-cell[data-iui-status=positive]::before{
+  content:"";
+  position:absolute;
+  inset:0;
+  background-color:hsl(var(--iui-color-foreground-positive-hsl)/var(--iui-opacity-6));
 }
 .iui-table-cell[data-iui-status=warning]::-moz-selection, .iui-table-cell[data-iui-status=warning] *::-moz-selection{
-  background-color:rgba(var(--iui-color-foreground-warning-rgb), var(--iui-opacity-5));
+  background-color:hsl(var(--iui-color-foreground-warning-hsl)/var(--iui-opacity-5));
 }
 .iui-table-cell[data-iui-status=warning]::selection,
 .iui-table-cell[data-iui-status=warning] *::selection{
-  background-color:rgba(var(--iui-color-foreground-warning-rgb), var(--iui-opacity-5));
+  background-color:hsl(var(--iui-color-foreground-warning-hsl)/var(--iui-opacity-5));
 }
-.iui-table-cell[data-iui-status=negative]{
-  background:linear-gradient(rgba(var(--iui-color-foreground-negative-rgb), var(--iui-opacity-6)), rgba(var(--iui-color-foreground-negative-rgb), var(--iui-opacity-6))), linear-gradient(var(--iui-color-background-1), var(--iui-color-background-1));
+.iui-table-cell[data-iui-status=warning]::before{
+  content:"";
+  position:absolute;
+  inset:0;
+  background-color:hsl(var(--iui-color-foreground-warning-hsl)/var(--iui-opacity-6));
 }
 .iui-table-cell[data-iui-status=negative]::-moz-selection, .iui-table-cell[data-iui-status=negative] *::-moz-selection{
-  background-color:rgba(var(--iui-color-foreground-negative-rgb), var(--iui-opacity-5));
+  background-color:hsl(var(--iui-color-foreground-negative-hsl)/var(--iui-opacity-5));
 }
 .iui-table-cell[data-iui-status=negative]::selection,
 .iui-table-cell[data-iui-status=negative] *::selection{
-  background-color:rgba(var(--iui-color-foreground-negative-rgb), var(--iui-opacity-5));
+  background-color:hsl(var(--iui-color-foreground-negative-hsl)/var(--iui-opacity-5));
+}
+.iui-table-cell[data-iui-status=negative]::before{
+  content:"";
+  position:absolute;
+  inset:0;
+  background-color:hsl(var(--iui-color-foreground-negative-hsl)/var(--iui-opacity-6));
 }
 .iui-table-cell[contenteditable]{
   outline-offset:-1px;
@@ -465,11 +506,11 @@
   position:absolute;
   top:-1px;
   bottom:-1px;
-  width:24px;
+  width:var(--iui-size-l);
   pointer-events:none;
   left:0;
   transform:translate(-100%);
-  box-shadow:inset -10px 0 5px -10px rgba(0, 0, 0, 0.25);
+  box-shadow:inset -10px 0 5px -10px var(--iui-shadow-color);
 }
 .iui-table-header .iui-table-cell-shadow-left{
   top:0;
@@ -480,11 +521,11 @@
   position:absolute;
   top:-1px;
   bottom:-1px;
-  width:24px;
+  width:var(--iui-size-l);
   pointer-events:none;
   right:0;
   transform:translate(100%);
-  box-shadow:inset 10px 0 5px -10px rgba(0, 0, 0, 0.25);
+  box-shadow:inset 10px 0 5px -10px var(--iui-shadow-color);
 }
 .iui-table-header .iui-table-cell-shadow-right{
   top:0;
@@ -499,12 +540,14 @@
   display:flex;
   justify-content:space-between;
   align-items:center;
-  padding:0 16px;
+  padding:0 var(--iui-size-m);
   -webkit-user-select:none;
      -moz-user-select:none;
       -ms-user-select:none;
           user-select:none;
   background-color:var(--iui-color-background-3);
+  border-bottom-left-radius:var(--iui-border-radius-1);
+  border-bottom-right-radius:var(--iui-border-radius-1);
 }
 .iui-table-paginator > .iui-left,
 .iui-table-paginator > .iui-center,
@@ -518,14 +561,14 @@
 .iui-table-paginator > .iui-center{
   justify-content:center;
   flex:2 1;
-  color:var(--iui-text-color);
+  color:var(--iui-color-foreground-2);
 }
 .iui-table-paginator > .iui-right{
   justify-content:flex-end;
 }
 
 .iui-table-paginator-page-size-label{
-  color:var(--iui-text-color-muted);
+  color:var(--iui-color-foreground-4);
   white-space:nowrap;
   overflow:hidden;
   text-overflow:ellipsis;
@@ -535,17 +578,17 @@
   display:flex;
   justify-content:center;
   align-items:center;
-  width:38px;
-  color:var(--iui-text-color-muted);
+  padding-inline:var(--iui-size-xs);
+  color:var(--iui-color-foreground-4);
 }
 .iui-table-paginator-ellipsis-small{
-  width:27px;
+  padding-inline:var(--iui-size-2xs);
 }
 
 .iui-table-paginator-pages-group{
   display:inline-flex;
   align-items:center;
-  margin:0 8px;
+  margin:0 var(--iui-size-xs);
 }
 
 .iui-table-paginator-page-button{
@@ -555,14 +598,15 @@
   vertical-align:baseline;
   font-family:inherit;
   display:inline-flex;
+  flex-shrink:0;
   align-items:center;
   vertical-align:middle;
   justify-content:center;
   position:relative;
-  border-radius:4px;
-  line-height:22px;
-  font-size:14px;
-  font-weight:400;
+  border-radius:var(--iui-border-radius-1);
+  line-height:var(--iui-size-l);
+  font-size:var(--iui-font-size-1);
+  font-weight:var(--iui-font-weight-normal);
   -webkit-user-select:none;
      -moz-user-select:none;
       -ms-user-select:none;
@@ -573,23 +617,25 @@
   background:var(--_iui-button-background-color);
   color:var(--_iui-button-text-color);
   gap:var(--_iui-button-gap);
-  height:var(--_iui-button-height);
+  min-height:var(--_iui-button-min-height);
+  min-width:var(--_iui-button-min-height);
+  padding-block:var(--_iui-button-padding-block);
   padding-inline:var(--_iui-button-padding-inline);
-  transition:background-color 0.2s ease-out, border-color 0.2s ease-out;
+  transition:background-color var(--iui-duration-1) ease-out, border-color var(--iui-duration-1) ease-out;
   -webkit-tap-highlight-color:transparent;
   text-decoration:none;
-  --_iui-button-gap:8px;
-  --_iui-button-height:38px;
-  --_iui-button-padding-inline:16px;
-  --_iui-button-text-color:var(--iui-text-color);
+  --_iui-button-gap:var(--iui-size-xs);
+  --_iui-button-padding-block:var(--iui-size-2xs);
+  --_iui-button-padding-inline:var(--iui-size-m);
+  --_iui-button-min-height:var(--iui-component-height);
+  --_iui-button-text-color:var(--iui-color-foreground-2);
   --_iui-button-background-color:transparent;
   --_iui-button-border-color:transparent;
-  --_iui-button-icon-margin-x:3px;
-  --_iui-button-gap:8px;
-  --_iui-button-height:38px;
-  --_iui-button-padding-inline:16px;
-  --_iui-button-padding-inline:8px;
-  width:38px;
+  --_iui-button-gap:var(--iui-size-xs);
+  --_iui-button-padding-block:var(--iui-size-2xs);
+  --_iui-button-padding-inline:var(--iui-size-m);
+  --_iui-button-min-height:var(--iui-component-height);
+  --_iui-button-padding-inline:var(--iui-size-xs);
 }
 .iui-table-paginator-page-button:focus-visible{
   outline:1px solid var(--iui-color-foreground-primary);
@@ -602,35 +648,31 @@
   }
 }
 .iui-table-paginator-page-button:where(:hover, :active){
-  --_iui-button-text-color:var(--iui-color-foreground-body);
-  --_iui-button-background-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-6));
+  --_iui-button-text-color:var(--iui-color-foreground-1);
+  --_iui-button-background-color:var(--iui-color-background-transparent-hover);
 }
 .iui-table-paginator-page-button:where(:focus){
   outline-offset:-1px;
   outline-width:1px;
 }
 .iui-table-paginator-page-button:where([disabled], :disabled, [aria-disabled="true"]){
-  --_iui-button-text-color:var(--iui-text-color-placeholder);
+  --_iui-button-text-color:var(--iui-color-foreground-5);
   --_iui-button-background-color:transparent;
   --_iui-button-border-color:transparent;
 }
 .iui-table-paginator-page-button-small{
-  --_iui-button-gap:4px;
-  --_iui-button-height:27px;
-  --_iui-button-padding-inline:8px;
-  width:27px;
+  --_iui-button-gap:var(--iui-size-2xs);
+  --_iui-button-padding-block:0;
+  --_iui-button-padding-inline:var(--iui-size-xs);
+  --_iui-button-min-height:var(--iui-component-height-small);
 }
 .iui-table-paginator-page-button[data-iui-active=true]{
   --_iui-button-active-stripe-inset:initial;
   --_iui-button-active-stripe-color:var(--iui-color-foreground-primary);
   --_iui-button-text-color:var(--iui-color-foreground-primary);
-  --_iui-button-background-color:linear-gradient(
-    rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-6)),
-    rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-6))
-  ),
-    linear-gradient(var(--iui-color-background-1), var(--iui-color-background-1));
-  --_iui-button-background-color:rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-6));
-  --_iui-button-active-stripe-inset:calc(100% - 4px) 2px 2px;
+  --_iui-button-background-color:var(--iui-color-background-subtle-primary);
+  --_iui-button-background-color:hsl(var(--iui-color-foreground-primary-hsl) / var(--iui-opacity-6));
+  --_iui-button-active-stripe-inset:calc(100% - var(--iui-size-2xs)) var(--iui-size-3xs) var(--iui-size-3xs);
 }
 .iui-table-paginator-page-button[data-iui-active=true]::after{
   content:"";
@@ -639,25 +681,19 @@
   background-color:var(--_iui-button-active-stripe-color);
 }
 .iui-table-paginator-page-button[data-iui-active=true][disabled], .iui-table-paginator-page-button[data-iui-active=true]:disabled, .iui-table-paginator-page-button[data-iui-active=true][aria-disabled=true]{
-  --_iui-button-active-stripe-color:var(--iui-text-color-placeholder);
-  --_iui-button-text-color:var(--iui-text-color-placeholder);
-}
-.iui-table-paginator-page-button[data-iui-active=true][disabled], .iui-table-paginator-page-button[data-iui-active=true]:disabled, .iui-table-paginator-page-button[data-iui-active=true][aria-disabled=true]{
-  --_iui-button-background-color:var(--iui-color-background-disabled);
-}
-.iui-table-paginator-page-button[data-iui-active=true]:where([disabled], :disabled, [aria-disabled="true"]){
-  --_iui-button-background-color:rgba(var(--iui-color-foreground-body-rgb), 0.05);
+  --_iui-button-active-stripe-color:var(--iui-color-foreground-5);
+  --_iui-button-text-color:var(--iui-color-foreground-5);
 }
 
 .iui-table-column-filter{
   --iui-surface-background-color:var(--iui-color-background-1);
-  --iui-surface-border-radius:0;
-  --iui-surface-elevation:0 1px 5px rgba(0, 0, 0, 0.25);
+  --iui-surface-border-radius:var(--iui-border-radius-1);
+  --iui-surface-elevation:var(--iui-shadow-1);
   background-color:var(--iui-surface-background-color);
   border-radius:var(--iui-surface-border-radius);
   box-shadow:var(--iui-surface-elevation);
-  color:var(--iui-text-color);
-  padding:11px 12px;
+  color:var(--iui-color-foreground-2);
+  padding:var(--iui-size-s) var(--iui-size-s);
   display:inline-flex;
   flex-direction:column;
   align-items:flex-end;
@@ -672,13 +708,13 @@
 }
 .iui-table-column-filter > .iui-input-container,
 .iui-table-column-filter > .iui-input{
-  margin-bottom:11px;
+  margin-bottom:var(--iui-size-s);
 }
 .iui-table-column-filter > .iui-button-bar{
   display:flex;
   width:100%;
   align-content:center;
-  gap:8px;
+  gap:var(--iui-size-xs);
 }
 .iui-table-column-filter > .iui-button-bar > .iui-button:first-of-type{
   margin-left:auto;