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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (49) hide show
  1. package/css/alert.css +78 -78
  2. package/css/all.css +1814 -2296
  3. package/css/anchor.css +3 -3
  4. package/css/avatar.css +46 -46
  5. package/css/backdrop.css +6 -4
  6. package/css/badge.css +8 -8
  7. package/css/blockquote.css +6 -6
  8. package/css/breadcrumbs.css +57 -52
  9. package/css/button.css +93 -89
  10. package/css/carousel.css +15 -15
  11. package/css/checkbox.css +23 -21
  12. package/css/code.css +14 -14
  13. package/css/color-picker.css +36 -39
  14. package/css/date-picker.css +59 -88
  15. package/css/dialog.css +29 -32
  16. package/css/expandable-block.css +33 -43
  17. package/css/fieldset.css +7 -7
  18. package/css/file-upload.css +13 -12
  19. package/css/footer.css +11 -11
  20. package/css/global.css +50 -617
  21. package/css/header.css +52 -51
  22. package/css/information-panel.css +33 -32
  23. package/css/input.css +56 -56
  24. package/css/keyboard.css +6 -10
  25. package/css/location-marker.css +26 -18
  26. package/css/menu.css +35 -28
  27. package/css/non-ideal-state.css +12 -12
  28. package/css/progress-indicator.css +33 -35
  29. package/css/radio-tile.css +33 -41
  30. package/css/radio.css +23 -21
  31. package/css/select.css +83 -80
  32. package/css/side-navigation.css +27 -26
  33. package/css/skip-to-content.css +11 -11
  34. package/css/slider.css +75 -32
  35. package/css/stepper.css +15 -15
  36. package/css/surface.css +2 -2
  37. package/css/table.css +179 -143
  38. package/css/tabs.css +54 -47
  39. package/css/tag.css +24 -25
  40. package/css/text.css +24 -24
  41. package/css/tile.css +135 -127
  42. package/css/time-picker.css +16 -14
  43. package/css/toast.css +47 -47
  44. package/css/toggle-switch.css +26 -26
  45. package/css/tooltip.css +6 -10
  46. package/css/tree.css +24 -22
  47. package/css/utils.css +162 -148
  48. package/css/workflow-diagram.css +8 -8
  49. package/package.json +2 -2
package/css/table.css CHANGED
@@ -11,8 +11,8 @@
11
11
  display:flex;
12
12
  flex-direction:column;
13
13
  isolation:isolate;
14
- --_iui-table-header-size:60px;
15
- --_iui-table-row-size:62px;
14
+ --_iui-table-header-size:calc(var(--iui-size-s) * 5);
15
+ --_iui-table-row-size:calc(var(--iui-size-s) * 5 + 2px);
16
16
  }
17
17
  .iui-table .iui-table-cell-end-icon,
18
18
  .iui-table .iui-table-cell-start-icon{
@@ -20,33 +20,34 @@
20
20
  display:flex;
21
21
  align-items:center;
22
22
  justify-content:center;
23
+ fill:var(--_iui-table-cell-icon-fill);
23
24
  }
24
25
  .iui-table .iui-table-cell-end-icon svg:not(.iui-radial),
25
26
  .iui-table .iui-table-cell-start-icon svg:not(.iui-radial){
26
27
  display:flex;
27
28
  flex-shrink:0;
28
- width:16px;
29
- height:16px;
29
+ width:var(--iui-size-m);
30
+ height:var(--iui-size-m);
30
31
  }
31
32
  .iui-table .iui-table-cell-start-icon{
32
- margin-right:8px;
33
+ margin-right:var(--iui-size-xs);
33
34
  }
34
35
  .iui-table .iui-table-cell-end-icon{
35
- width:24px;
36
- height:24px;
37
- margin-right:12px;
36
+ width:var(--iui-size-l);
37
+ height:var(--iui-size-l);
38
+ margin-right:var(--iui-size-s);
38
39
  margin-left:auto;
39
40
  }
40
41
  .iui-table[data-iui-size=condensed]{
41
- --_iui-table-header-size:48px;
42
- --_iui-table-row-size:50px;
42
+ --_iui-table-header-size:calc(var(--iui-size-s) * 4);
43
+ --_iui-table-row-size:calc(var(--iui-size-s) * 4 + 2px);
43
44
  }
44
45
  .iui-table[data-iui-size=extra-condensed]{
45
- --_iui-table-header-size:36px;
46
- --_iui-table-row-size:38px;
46
+ --_iui-table-header-size:calc(var(--iui-size-s) * 3);
47
+ --_iui-table-row-size:calc(var(--iui-size-s) * 3 + 2px);
47
48
  }
48
49
  .iui-table[data-iui-size=extra-condensed] .iui-table-header .iui-table-cell{
49
- padding-block:3px;
50
+ padding-block:calc(var(--iui-size-s) * 0.25);
50
51
  }
51
52
  .iui-table .iui-table-header .iui-table-cell,
52
53
  .iui-table .iui-table-paginator{
@@ -60,6 +61,8 @@
60
61
  overflow:hidden;
61
62
  display:flex;
62
63
  flex-shrink:0;
64
+ border-top-left-radius:var(--iui-border-radius-1);
65
+ border-top-right-radius:var(--iui-border-radius-1);
63
66
  }
64
67
  @supports not (overflow: overlay){
65
68
  .iui-table-header-wrapper{
@@ -80,9 +83,9 @@
80
83
  background-color:var(--iui-color-background-3);
81
84
  }
82
85
  .iui-table-header .iui-table-cell:not(.iui-slot){
83
- -moz-column-gap:4px;
84
- column-gap:4px;
85
- padding-block:6px;
86
+ -moz-column-gap:var(--iui-size-2xs);
87
+ column-gap:var(--iui-size-2xs);
88
+ padding-block:calc(var(--iui-size-s) * 0.5);
86
89
  }
87
90
  .iui-table-header .iui-table-cell:not(.iui-slot):focus-visible{
88
91
  outline:1px solid var(--iui-color-foreground-primary);
@@ -102,11 +105,11 @@
102
105
  cursor:grabbing;
103
106
  }
104
107
  .iui-table-header .iui-table-cell:not(.iui-slot) .iui-table-filter-button:not([data-iui-active=true]){
105
- visibility:hidden;
108
+ opacity:0;
106
109
  }
107
110
  .iui-table-header .iui-table-cell:not(.iui-slot) > .iui-table-resizer{
108
111
  height:100%;
109
- width:16px;
112
+ width:var(--iui-size-m);
110
113
  position:absolute;
111
114
  top:0;
112
115
  right:0;
@@ -118,13 +121,13 @@
118
121
  }
119
122
  .iui-table-header .iui-table-cell:not(.iui-slot) > .iui-table-resizer > .iui-table-resizer-bar{
120
123
  height:100%;
121
- width:2px;
124
+ width:var(--iui-size-3xs);
122
125
  margin:0 auto;
123
- transition:background-color 0.2s ease-out, width 0.2s ease-out;
126
+ transition:background-color var(--iui-duration-1) ease-out, width var(--iui-duration-1) ease-out;
124
127
  background-color:var(--iui-color-background-border);
125
128
  }
126
129
  .iui-table-header .iui-table-cell:not(.iui-slot) > .iui-table-resizer:hover > .iui-table-resizer-bar{
127
- width:4px;
130
+ width:var(--iui-size-2xs);
128
131
  background-color:var(--iui-color-foreground-primary);
129
132
  }
130
133
  .iui-table-header .iui-table-cell:not(.iui-slot):hover > .iui-table-resizer{
@@ -137,12 +140,12 @@
137
140
  .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,
138
141
  .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,
139
142
  .iui-table-header .iui-table-cell:not(.iui-slot):focus-within .iui-table-filter-button{
140
- visibility:visible;
143
+ opacity:1;
141
144
  }
142
145
  .iui-table-header .iui-table-reorder-bar{
143
146
  position:absolute;
144
147
  height:100%;
145
- width:2px;
148
+ width:var(--iui-size-3xs);
146
149
  }
147
150
  .iui-table-header .iui-table-reorder-column-right > .iui-table-reorder-bar{
148
151
  right:0;
@@ -155,20 +158,24 @@
155
158
  background-color:var(--iui-color-foreground-primary);
156
159
  }
157
160
  .iui-table-header .iui-table-sort{
158
- visibility:hidden;
161
+ opacity:0;
159
162
  }
160
163
  .iui-table-header .iui-sorted{
164
+ --_iui-table-cell-icon-fill:var(--iui-color-foreground-2);
161
165
  background-color:var(--iui-color-background-4);
162
166
  }
163
167
  .iui-table-header .iui-sorted .iui-table-sort{
164
- visibility:visible;
165
- fill:var(--iui-icon-color-actionable);
168
+ opacity:1;
166
169
  }
167
170
 
168
171
  .iui-table-row{
172
+ --_iui-table-cell-icon-fill:var(--iui-color-foreground-4);
169
173
  min-width:100%;
170
174
  display:flex;
171
175
  }
176
+ .iui-table-row:last-of-type{
177
+ border-radius:inherit;
178
+ }
172
179
  .iui-table-header .iui-table-row{
173
180
  flex-grow:1;
174
181
  }
@@ -178,23 +185,20 @@
178
185
  border-bottom:solid 1px transparent;
179
186
  border-bottom-color:var(--iui-color-background-border);
180
187
  background-color:var(--iui-color-background-1);
181
- transition:border 0.2s ease-out;
188
+ transition:border var(--iui-duration-1) ease-out;
182
189
  }
183
190
  .iui-table-body .iui-table-row > .iui-slot > .iui-table-more-options{
184
- visibility:hidden;
185
- }
186
- .iui-table-body .iui-table-row:hover:not([aria-disabled=true]) .iui-table-cell{
187
- 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));
191
+ opacity:0;
188
192
  }
189
- .iui-table-body .iui-table-row:hover:not([aria-disabled=true]) > .iui-slot:not([aria-disabled=true]) > .iui-table-more-options{
190
- visibility:visible;
193
+ .iui-table-body .iui-table-row:where(:hover, :focus-within) > .iui-slot > .iui-table-more-options{
194
+ opacity:1;
191
195
  }
192
- .iui-table-body .iui-table-row:focus-within > .iui-slot:not([aria-disabled=true]) > .iui-table-more-options{
193
- visibility:visible;
196
+ .iui-table-body .iui-table-row:where(:hover:not(.iui-loading):not([aria-disabled="true"])) .iui-table-cell{
197
+ background-color:var(--iui-color-background-transparent-hover);
194
198
  }
195
199
  @media (prefers-reduced-motion: no-preference){
196
200
  .iui-table-body .iui-table-row .iui-table-row-expander > .iui-button-icon{
197
- transition:transform 0.2s ease-out;
201
+ transition:transform var(--iui-duration-1) ease-out;
198
202
  }
199
203
  }
200
204
  .iui-table-body .iui-table-row.iui-table-row-expanded{
@@ -226,7 +230,7 @@
226
230
  }
227
231
  @media (prefers-reduced-motion: no-preference){
228
232
  .iui-table-body .iui-table-row.iui-table-expanded-content.iui-enter-active{
229
- transition:opacity 0.2s ease-out, width 0.2s ease-out, height 0.2s ease-out;
233
+ transition:opacity var(--iui-duration-1) ease-out, width var(--iui-duration-1) ease-out, height var(--iui-duration-1) ease-out;
230
234
  }
231
235
  }
232
236
  .iui-table-body .iui-table-row.iui-table-expanded-content.iui-exit{
@@ -237,7 +241,7 @@
237
241
  }
238
242
  @media (prefers-reduced-motion: no-preference){
239
243
  .iui-table-body .iui-table-row.iui-table-expanded-content.iui-exit-active{
240
- transition:opacity 0.2s ease-out, width 0.2s ease-out, height 0.2s ease-out;
244
+ transition:opacity var(--iui-duration-1) ease-out, width var(--iui-duration-1) ease-out, height var(--iui-duration-1) ease-out;
241
245
  }
242
246
  }
243
247
  .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 @@
245
249
  }
246
250
  .iui-table-body .iui-table-row[aria-selected=true] .iui-table-cell{
247
251
  border-color:var(--iui-color-foreground-primary);
248
- 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));
252
+ background-color:var(--iui-color-background-subtle-primary);
249
253
  }
250
254
  .iui-table-body .iui-table-row[aria-selected=true] + [aria-selected=true] .iui-table-cell{
251
255
  border-bottom-color:transparent;
252
- border-top-color:rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-4));
256
+ border-top-color:hsl(var(--iui-color-foreground-primary-hsl)/var(--iui-opacity-4));
253
257
  }
254
258
  .iui-table-body .iui-table-row[aria-selected=true]:last-child .iui-table-cell{
255
259
  border-bottom-color:var(--iui-color-foreground-primary);
@@ -265,77 +269,97 @@
265
269
  border-bottom-color:var(--iui-color-foreground-primary);
266
270
  }
267
271
  .iui-table-body .iui-table-row.iui-new{
268
- font-weight:600;
272
+ font-weight:var(--iui-font-weight-semibold);
269
273
  }
270
274
  .iui-table-body .iui-table-row.iui-new > .iui-main-column::before{
271
275
  content:"•";
272
276
  position:absolute;
273
277
  left:0;
274
- font-size:24px;
278
+ font-size:var(--iui-font-size-4);
275
279
  color:var(--iui-color-foreground-positive);
276
280
  }
281
+ .iui-table-body .iui-table-row.iui-loading,
277
282
  .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]{
278
- font-style:italic;
279
- cursor:not-allowed;
280
- color:var(--iui-text-color-muted);
281
- }
282
- .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{
283
- visibility:hidden;
283
+ --_iui-table-cell-icon-fill:var(--iui-color-foreground-4);
284
+ --_iui-table-cell-image-filter:grayscale(100%);
285
+ color:var(--iui-color-foreground-4);
284
286
  }
287
+ .iui-table-body .iui-table-row.iui-loading img,
288
+ .iui-table-body .iui-table-row.iui-loading svg:not(.iui-radial),
289
+ .iui-table-body .iui-table-row.iui-loading .iui-avatar,
285
290
  .iui-table-body .iui-table-row .iui-table-cell[aria-disabled=true] img,
286
291
  .iui-table-body .iui-table-row .iui-table-cell[aria-disabled=true] svg:not(.iui-radial),
287
292
  .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,
288
293
  .iui-table-body .iui-table-row.iui-table-expanded-content[aria-disabled=true] svg:not(.iui-radial),
289
294
  .iui-table-body .iui-table-row.iui-table-expanded-content[aria-disabled=true] .iui-avatar{
290
- filter:grayscale(100%);
295
+ filter:var(--_iui-table-cell-image-filter);
296
+ }
297
+ .iui-table-body .iui-table-row.iui-loading{
298
+ font-style:italic;
299
+ }
300
+ .iui-table-body .iui-table-row.iui-loading,
301
+ .iui-table-body .iui-table-row.iui-loading .iui-checkbox{
302
+ cursor:progress;
303
+ }
304
+ .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]{
305
+ cursor:not-allowed;
291
306
  }
292
307
  .iui-table-body .iui-table-row[data-iui-status=positive] .iui-table-cell:first-of-type,
293
308
  .iui-table-body .iui-table-row[data-iui-status=positive] + .iui-table-expanded-content{
294
- box-shadow:inset 2px 0 0 0 var(--iui-icon-color-positive);
309
+ box-shadow:inset var(--iui-size-3xs) 0 0 0 var(--iui-color-foreground-positive);
295
310
  }
296
311
  .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{
297
- background-color:rgba(var(--iui-color-foreground-positive-rgb), var(--iui-opacity-5));
312
+ background-color:hsl(var(--iui-color-foreground-positive-hsl)/var(--iui-opacity-5));
298
313
  }
299
314
  .iui-table-body .iui-table-row[data-iui-status=positive] .iui-table-cell:first-of-type::selection,
300
315
  .iui-table-body .iui-table-row[data-iui-status=positive] .iui-table-cell:first-of-type *::selection,
301
316
  .iui-table-body .iui-table-row[data-iui-status=positive] + .iui-table-expanded-content::selection,
302
317
  .iui-table-body .iui-table-row[data-iui-status=positive] + .iui-table-expanded-content *::selection{
303
- background-color:rgba(var(--iui-color-foreground-positive-rgb), var(--iui-opacity-5));
318
+ background-color:hsl(var(--iui-color-foreground-positive-hsl)/var(--iui-opacity-5));
304
319
  }
305
- .iui-table-body .iui-table-row[data-iui-status=positive] .iui-table-cell-end-icon svg{
306
- fill:var(--iui-icon-color-positive);
320
+ .iui-table-body .iui-table-row[data-iui-status=positive] .iui-table-cell-end-icon{
321
+ --_iui-table-cell-icon-fill:var(--iui-color-foreground-positive);
322
+ }
323
+ .iui-table-body .iui-table-row[data-iui-status=positive] .iui-table-cell[aria-disabled=true] .iui-table-cell-end-icon{
324
+ --_iui-table-cell-image-filter:none;
307
325
  }
308
326
  .iui-table-body .iui-table-row[data-iui-status=warning] .iui-table-cell:first-of-type,
309
327
  .iui-table-body .iui-table-row[data-iui-status=warning] + .iui-table-expanded-content{
310
- box-shadow:inset 2px 0 0 0 var(--iui-icon-color-warning);
328
+ box-shadow:inset var(--iui-size-3xs) 0 0 0 var(--iui-color-foreground-warning);
311
329
  }
312
330
  .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{
313
- background-color:rgba(var(--iui-color-foreground-warning-rgb), var(--iui-opacity-5));
331
+ background-color:hsl(var(--iui-color-foreground-warning-hsl)/var(--iui-opacity-5));
314
332
  }
315
333
  .iui-table-body .iui-table-row[data-iui-status=warning] .iui-table-cell:first-of-type::selection,
316
334
  .iui-table-body .iui-table-row[data-iui-status=warning] .iui-table-cell:first-of-type *::selection,
317
335
  .iui-table-body .iui-table-row[data-iui-status=warning] + .iui-table-expanded-content::selection,
318
336
  .iui-table-body .iui-table-row[data-iui-status=warning] + .iui-table-expanded-content *::selection{
319
- background-color:rgba(var(--iui-color-foreground-warning-rgb), var(--iui-opacity-5));
337
+ background-color:hsl(var(--iui-color-foreground-warning-hsl)/var(--iui-opacity-5));
338
+ }
339
+ .iui-table-body .iui-table-row[data-iui-status=warning] .iui-table-cell-end-icon{
340
+ --_iui-table-cell-icon-fill:var(--iui-color-foreground-warning);
320
341
  }
321
- .iui-table-body .iui-table-row[data-iui-status=warning] .iui-table-cell-end-icon svg{
322
- fill:var(--iui-icon-color-warning);
342
+ .iui-table-body .iui-table-row[data-iui-status=warning] .iui-table-cell[aria-disabled=true] .iui-table-cell-end-icon{
343
+ --_iui-table-cell-image-filter:none;
323
344
  }
324
345
  .iui-table-body .iui-table-row[data-iui-status=negative] .iui-table-cell:first-of-type,
325
346
  .iui-table-body .iui-table-row[data-iui-status=negative] + .iui-table-expanded-content{
326
- box-shadow:inset 2px 0 0 0 var(--iui-icon-color-negative);
347
+ box-shadow:inset var(--iui-size-3xs) 0 0 0 var(--iui-color-foreground-negative);
327
348
  }
328
349
  .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{
329
- background-color:rgba(var(--iui-color-foreground-negative-rgb), var(--iui-opacity-5));
350
+ background-color:hsl(var(--iui-color-foreground-negative-hsl)/var(--iui-opacity-5));
330
351
  }
331
352
  .iui-table-body .iui-table-row[data-iui-status=negative] .iui-table-cell:first-of-type::selection,
332
353
  .iui-table-body .iui-table-row[data-iui-status=negative] .iui-table-cell:first-of-type *::selection,
333
354
  .iui-table-body .iui-table-row[data-iui-status=negative] + .iui-table-expanded-content::selection,
334
355
  .iui-table-body .iui-table-row[data-iui-status=negative] + .iui-table-expanded-content *::selection{
335
- background-color:rgba(var(--iui-color-foreground-negative-rgb), var(--iui-opacity-5));
356
+ background-color:hsl(var(--iui-color-foreground-negative-hsl)/var(--iui-opacity-5));
336
357
  }
337
- .iui-table-body .iui-table-row[data-iui-status=negative] .iui-table-cell-end-icon svg{
338
- fill:var(--iui-icon-color-negative);
358
+ .iui-table-body .iui-table-row[data-iui-status=negative] .iui-table-cell-end-icon{
359
+ --_iui-table-cell-icon-fill:var(--iui-color-foreground-negative);
360
+ }
361
+ .iui-table-body .iui-table-row[data-iui-status=negative] .iui-table-cell[aria-disabled=true] .iui-table-cell-end-icon{
362
+ --_iui-table-cell-image-filter:none;
339
363
  }
340
364
 
341
365
  .iui-table-header-actions-container{
@@ -344,7 +368,7 @@
344
368
  align-items:center;
345
369
  flex-wrap:wrap;
346
370
  justify-content:flex-end;
347
- margin-right:12px;
371
+ margin-right:var(--iui-size-s);
348
372
  }
349
373
  .iui-table-header-actions-container .iui-table-cell-end-icon{
350
374
  width:28px;
@@ -369,19 +393,26 @@
369
393
  .iui-table-body.iui-scroll-snapping .iui-table-row{
370
394
  scroll-snap-align:start none;
371
395
  }
372
- .iui-table-body.iui-zebra-striping .iui-table-row:nth-child(even):not([aria-selected=true]) .iui-table-cell{
373
- background:linear-gradient(rgba(var(--iui-color-foreground-body-rgb), 0.02), rgba(var(--iui-color-foreground-body-rgb), 0.02)), linear-gradient(var(--iui-color-background-1), var(--iui-color-background-1));
396
+ .iui-table-body:last-child{
397
+ border-bottom-left-radius:var(--iui-border-radius-1);
398
+ border-bottom-right-radius:var(--iui-border-radius-1);
399
+ }
400
+ .iui-table-body.iui-zebra-striping .iui-table-row:nth-child(even):not([aria-selected=true]) .iui-table-cell::before{
401
+ content:"";
402
+ position:absolute;
403
+ inset:0;
404
+ background-color:hsl(var(--iui-color-foreground-1-hsl)/0.02);
374
405
  }
375
406
  .iui-table-body > .iui-table-empty{
376
407
  text-align:center;
377
- padding:32px;
408
+ padding:var(--iui-size-xl);
378
409
  display:flex;
379
410
  flex-direction:column;
380
411
  justify-content:center;
381
412
  align-items:center;
382
413
  flex-grow:1;
383
414
  align-self:center;
384
- color:var(--iui-text-color-muted);
415
+ color:var(--iui-color-foreground-4);
385
416
  background-color:var(--iui-color-background-1);
386
417
  }
387
418
 
@@ -389,27 +420,28 @@
389
420
  align-items:center;
390
421
  display:flex;
391
422
  flex-grow:1;
392
- min-width:64px;
393
- padding-left:16px;
394
- flex-basis:64px;
423
+ min-width:var(--iui-size-2xl);
424
+ padding-left:var(--iui-size-m);
425
+ flex-basis:var(--iui-size-2xl);
395
426
  position:relative;
396
427
  word-break:break-word;
397
428
  }
398
429
  .iui-table-cell:first-of-type{
399
430
  border-left:solid 1px transparent;
431
+ border-bottom-left-radius:inherit;
400
432
  }
401
433
  .iui-table-cell:last-of-type{
402
434
  border-right:solid 1px transparent;
403
435
  }
404
436
  .iui-table-cell.iui-slot{
405
- width:48px;
437
+ width:calc(var(--iui-size-l) * 2);
406
438
  padding:0;
407
439
  flex-grow:0;
408
440
  min-width:0;
409
441
  display:flex;
410
442
  justify-content:center;
411
443
  align-items:center;
412
- flex-basis:48px;
444
+ flex-basis:calc(var(--iui-size-l) * 2);
413
445
  }
414
446
  .iui-table-cell.iui-table-cell-sticky{
415
447
  position:-webkit-sticky;
@@ -419,37 +451,46 @@
419
451
  right:var(--iui-table-sticky-right, initial);
420
452
  }
421
453
  .iui-table-cell:not(.iui-slot):last-child{
422
- padding-right:16px;
423
- }
424
- .iui-table-cell[data-iui-status=positive]{
425
- 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));
454
+ padding-right:var(--iui-size-m);
426
455
  }
427
456
  .iui-table-cell[data-iui-status=positive]::-moz-selection, .iui-table-cell[data-iui-status=positive] *::-moz-selection{
428
- background-color:rgba(var(--iui-color-foreground-positive-rgb), var(--iui-opacity-5));
457
+ background-color:hsl(var(--iui-color-foreground-positive-hsl)/var(--iui-opacity-5));
429
458
  }
430
459
  .iui-table-cell[data-iui-status=positive]::selection,
431
460
  .iui-table-cell[data-iui-status=positive] *::selection{
432
- background-color:rgba(var(--iui-color-foreground-positive-rgb), var(--iui-opacity-5));
461
+ background-color:hsl(var(--iui-color-foreground-positive-hsl)/var(--iui-opacity-5));
433
462
  }
434
- .iui-table-cell[data-iui-status=warning]{
435
- 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));
463
+ .iui-table-cell[data-iui-status=positive]::before{
464
+ content:"";
465
+ position:absolute;
466
+ inset:0;
467
+ background-color:hsl(var(--iui-color-foreground-positive-hsl)/var(--iui-opacity-6));
436
468
  }
437
469
  .iui-table-cell[data-iui-status=warning]::-moz-selection, .iui-table-cell[data-iui-status=warning] *::-moz-selection{
438
- background-color:rgba(var(--iui-color-foreground-warning-rgb), var(--iui-opacity-5));
470
+ background-color:hsl(var(--iui-color-foreground-warning-hsl)/var(--iui-opacity-5));
439
471
  }
440
472
  .iui-table-cell[data-iui-status=warning]::selection,
441
473
  .iui-table-cell[data-iui-status=warning] *::selection{
442
- background-color:rgba(var(--iui-color-foreground-warning-rgb), var(--iui-opacity-5));
474
+ background-color:hsl(var(--iui-color-foreground-warning-hsl)/var(--iui-opacity-5));
443
475
  }
444
- .iui-table-cell[data-iui-status=negative]{
445
- 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));
476
+ .iui-table-cell[data-iui-status=warning]::before{
477
+ content:"";
478
+ position:absolute;
479
+ inset:0;
480
+ background-color:hsl(var(--iui-color-foreground-warning-hsl)/var(--iui-opacity-6));
446
481
  }
447
482
  .iui-table-cell[data-iui-status=negative]::-moz-selection, .iui-table-cell[data-iui-status=negative] *::-moz-selection{
448
- background-color:rgba(var(--iui-color-foreground-negative-rgb), var(--iui-opacity-5));
483
+ background-color:hsl(var(--iui-color-foreground-negative-hsl)/var(--iui-opacity-5));
449
484
  }
450
485
  .iui-table-cell[data-iui-status=negative]::selection,
451
486
  .iui-table-cell[data-iui-status=negative] *::selection{
452
- background-color:rgba(var(--iui-color-foreground-negative-rgb), var(--iui-opacity-5));
487
+ background-color:hsl(var(--iui-color-foreground-negative-hsl)/var(--iui-opacity-5));
488
+ }
489
+ .iui-table-cell[data-iui-status=negative]::before{
490
+ content:"";
491
+ position:absolute;
492
+ inset:0;
493
+ background-color:hsl(var(--iui-color-foreground-negative-hsl)/var(--iui-opacity-6));
453
494
  }
454
495
  .iui-table-cell[contenteditable]{
455
496
  outline-offset:-1px;
@@ -465,11 +506,11 @@
465
506
  position:absolute;
466
507
  top:-1px;
467
508
  bottom:-1px;
468
- width:24px;
509
+ width:var(--iui-size-l);
469
510
  pointer-events:none;
470
511
  left:0;
471
512
  transform:translate(-100%);
472
- box-shadow:inset -10px 0 5px -10px rgba(0, 0, 0, 0.25);
513
+ box-shadow:inset -10px 0 5px -10px var(--iui-shadow-color);
473
514
  }
474
515
  .iui-table-header .iui-table-cell-shadow-left{
475
516
  top:0;
@@ -480,11 +521,11 @@
480
521
  position:absolute;
481
522
  top:-1px;
482
523
  bottom:-1px;
483
- width:24px;
524
+ width:var(--iui-size-l);
484
525
  pointer-events:none;
485
526
  right:0;
486
527
  transform:translate(100%);
487
- box-shadow:inset 10px 0 5px -10px rgba(0, 0, 0, 0.25);
528
+ box-shadow:inset 10px 0 5px -10px var(--iui-shadow-color);
488
529
  }
489
530
  .iui-table-header .iui-table-cell-shadow-right{
490
531
  top:0;
@@ -499,12 +540,14 @@
499
540
  display:flex;
500
541
  justify-content:space-between;
501
542
  align-items:center;
502
- padding:0 16px;
543
+ padding:0 var(--iui-size-m);
503
544
  -webkit-user-select:none;
504
545
  -moz-user-select:none;
505
546
  -ms-user-select:none;
506
547
  user-select:none;
507
548
  background-color:var(--iui-color-background-3);
549
+ border-bottom-left-radius:var(--iui-border-radius-1);
550
+ border-bottom-right-radius:var(--iui-border-radius-1);
508
551
  }
509
552
  .iui-table-paginator > .iui-left,
510
553
  .iui-table-paginator > .iui-center,
@@ -518,14 +561,14 @@
518
561
  .iui-table-paginator > .iui-center{
519
562
  justify-content:center;
520
563
  flex:2 1;
521
- color:var(--iui-text-color);
564
+ color:var(--iui-color-foreground-2);
522
565
  }
523
566
  .iui-table-paginator > .iui-right{
524
567
  justify-content:flex-end;
525
568
  }
526
569
 
527
570
  .iui-table-paginator-page-size-label{
528
- color:var(--iui-text-color-muted);
571
+ color:var(--iui-color-foreground-4);
529
572
  white-space:nowrap;
530
573
  overflow:hidden;
531
574
  text-overflow:ellipsis;
@@ -535,17 +578,17 @@
535
578
  display:flex;
536
579
  justify-content:center;
537
580
  align-items:center;
538
- width:40px;
539
- color:var(--iui-text-color-muted);
581
+ padding-inline:var(--iui-size-xs);
582
+ color:var(--iui-color-foreground-4);
540
583
  }
541
584
  .iui-table-paginator-ellipsis-small{
542
- width:28px;
585
+ padding-inline:var(--iui-size-2xs);
543
586
  }
544
587
 
545
588
  .iui-table-paginator-pages-group{
546
589
  display:inline-flex;
547
590
  align-items:center;
548
- margin:0 8px;
591
+ margin:0 var(--iui-size-xs);
549
592
  }
550
593
 
551
594
  .iui-table-paginator-page-button{
@@ -555,14 +598,15 @@
555
598
  vertical-align:baseline;
556
599
  font-family:inherit;
557
600
  display:inline-flex;
601
+ flex-shrink:0;
558
602
  align-items:center;
559
603
  vertical-align:middle;
560
604
  justify-content:center;
561
605
  position:relative;
562
- border-radius:4px;
563
- line-height:24px;
564
- font-size:14px;
565
- font-weight:400;
606
+ border-radius:var(--iui-border-radius-1);
607
+ line-height:var(--iui-size-l);
608
+ font-size:var(--iui-font-size-1);
609
+ font-weight:var(--iui-font-weight-normal);
566
610
  -webkit-user-select:none;
567
611
  -moz-user-select:none;
568
612
  -ms-user-select:none;
@@ -573,23 +617,25 @@
573
617
  background:var(--_iui-button-background-color);
574
618
  color:var(--_iui-button-text-color);
575
619
  gap:var(--_iui-button-gap);
576
- height:var(--_iui-button-height);
620
+ min-height:var(--_iui-button-min-height);
621
+ min-width:var(--_iui-button-min-height);
622
+ padding-block:var(--_iui-button-padding-block);
577
623
  padding-inline:var(--_iui-button-padding-inline);
578
- transition:background-color 0.2s ease-out, border-color 0.2s ease-out;
624
+ transition:background-color var(--iui-duration-1) ease-out, border-color var(--iui-duration-1) ease-out;
579
625
  -webkit-tap-highlight-color:transparent;
580
626
  text-decoration:none;
581
- --_iui-button-gap:8px;
582
- --_iui-button-height:40px;
583
- --_iui-button-padding-inline:16px;
584
- --_iui-button-text-color:var(--iui-text-color);
627
+ --_iui-button-gap:var(--iui-size-xs);
628
+ --_iui-button-padding-block:var(--iui-size-2xs);
629
+ --_iui-button-padding-inline:var(--iui-size-m);
630
+ --_iui-button-min-height:var(--iui-component-height);
631
+ --_iui-button-text-color:var(--iui-color-foreground-2);
585
632
  --_iui-button-background-color:transparent;
586
633
  --_iui-button-border-color:transparent;
587
- --_iui-button-icon-margin-x:4px;
588
- --_iui-button-gap:8px;
589
- --_iui-button-height:40px;
590
- --_iui-button-padding-inline:16px;
591
- --_iui-button-padding-inline:8px;
592
- width:40px;
634
+ --_iui-button-gap:var(--iui-size-xs);
635
+ --_iui-button-padding-block:var(--iui-size-2xs);
636
+ --_iui-button-padding-inline:var(--iui-size-m);
637
+ --_iui-button-min-height:var(--iui-component-height);
638
+ --_iui-button-padding-inline:var(--iui-size-xs);
593
639
  }
594
640
  .iui-table-paginator-page-button:focus-visible{
595
641
  outline:1px solid var(--iui-color-foreground-primary);
@@ -602,35 +648,31 @@
602
648
  }
603
649
  }
604
650
  .iui-table-paginator-page-button:where(:hover, :active){
605
- --_iui-button-text-color:var(--iui-color-foreground-body);
606
- --_iui-button-background-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-6));
651
+ --_iui-button-text-color:var(--iui-color-foreground-1);
652
+ --_iui-button-background-color:var(--iui-color-background-transparent-hover);
607
653
  }
608
654
  .iui-table-paginator-page-button:where(:focus){
609
655
  outline-offset:-1px;
610
656
  outline-width:1px;
611
657
  }
612
658
  .iui-table-paginator-page-button:where([disabled], :disabled, [aria-disabled="true"]){
613
- --_iui-button-text-color:var(--iui-text-color-placeholder);
659
+ --_iui-button-text-color:var(--iui-color-foreground-5);
614
660
  --_iui-button-background-color:transparent;
615
661
  --_iui-button-border-color:transparent;
616
662
  }
617
663
  .iui-table-paginator-page-button-small{
618
- --_iui-button-gap:4px;
619
- --_iui-button-height:28px;
620
- --_iui-button-padding-inline:8px;
621
- width:28px;
664
+ --_iui-button-gap:var(--iui-size-2xs);
665
+ --_iui-button-padding-block:0;
666
+ --_iui-button-padding-inline:var(--iui-size-xs);
667
+ --_iui-button-min-height:var(--iui-component-height-small);
622
668
  }
623
669
  .iui-table-paginator-page-button[data-iui-active=true]{
624
670
  --_iui-button-active-stripe-inset:initial;
625
671
  --_iui-button-active-stripe-color:var(--iui-color-foreground-primary);
626
672
  --_iui-button-text-color:var(--iui-color-foreground-primary);
627
- --_iui-button-background-color:linear-gradient(
628
- rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-6)),
629
- rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-6))
630
- ),
631
- linear-gradient(var(--iui-color-background-1), var(--iui-color-background-1));
632
- --_iui-button-background-color:rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-6));
633
- --_iui-button-active-stripe-inset:calc(100% - 4px) 2px 2px;
673
+ --_iui-button-background-color:var(--iui-color-background-subtle-primary);
674
+ --_iui-button-background-color:hsl(var(--iui-color-foreground-primary-hsl) / var(--iui-opacity-6));
675
+ --_iui-button-active-stripe-inset:calc(100% - var(--iui-size-2xs)) var(--iui-size-3xs) var(--iui-size-3xs);
634
676
  }
635
677
  .iui-table-paginator-page-button[data-iui-active=true]::after{
636
678
  content:"";
@@ -639,25 +681,19 @@
639
681
  background-color:var(--_iui-button-active-stripe-color);
640
682
  }
641
683
  .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]{
642
- --_iui-button-active-stripe-color:var(--iui-text-color-placeholder);
643
- --_iui-button-text-color:var(--iui-text-color-placeholder);
644
- }
645
- .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]{
646
- --_iui-button-background-color:var(--iui-color-background-disabled);
647
- }
648
- .iui-table-paginator-page-button[data-iui-active=true]:where([disabled], :disabled, [aria-disabled="true"]){
649
- --_iui-button-background-color:rgba(var(--iui-color-foreground-body-rgb), 0.05);
684
+ --_iui-button-active-stripe-color:var(--iui-color-foreground-5);
685
+ --_iui-button-text-color:var(--iui-color-foreground-5);
650
686
  }
651
687
 
652
688
  .iui-table-column-filter{
653
689
  --iui-surface-background-color:var(--iui-color-background-1);
654
- --iui-surface-border-radius:0;
655
- --iui-surface-elevation:0 1px 5px rgba(0, 0, 0, 0.25);
690
+ --iui-surface-border-radius:var(--iui-border-radius-1);
691
+ --iui-surface-elevation:var(--iui-shadow-1);
656
692
  background-color:var(--iui-surface-background-color);
657
693
  border-radius:var(--iui-surface-border-radius);
658
694
  box-shadow:var(--iui-surface-elevation);
659
- color:var(--iui-text-color);
660
- padding:12px 12px;
695
+ color:var(--iui-color-foreground-2);
696
+ padding:var(--iui-size-s) var(--iui-size-s);
661
697
  display:inline-flex;
662
698
  flex-direction:column;
663
699
  align-items:flex-end;
@@ -672,13 +708,13 @@
672
708
  }
673
709
  .iui-table-column-filter > .iui-input-container,
674
710
  .iui-table-column-filter > .iui-input{
675
- margin-bottom:12px;
711
+ margin-bottom:var(--iui-size-s);
676
712
  }
677
713
  .iui-table-column-filter > .iui-button-bar{
678
714
  display:flex;
679
715
  width:100%;
680
716
  align-content:center;
681
- gap:8px;
717
+ gap:var(--iui-size-xs);
682
718
  }
683
719
  .iui-table-column-filter > .iui-button-bar > .iui-button:first-of-type{
684
720
  margin-left:auto;