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

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