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

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 +1744 -2220
  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 -14
  11. package/css/checkbox.css +20 -20
  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 +25 -25
  16. package/css/expandable-block.css +33 -30
  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 -6
  25. package/css/location-marker.css +26 -18
  26. package/css/menu.css +34 -27
  27. package/css/non-ideal-state.css +12 -12
  28. package/css/progress-indicator.css +33 -35
  29. package/css/radio-tile.css +33 -33
  30. package/css/radio.css +20 -20
  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 +59 -32
  35. package/css/stepper.css +15 -15
  36. package/css/surface.css +2 -2
  37. package/css/table.css +151 -133
  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 +120 -101
  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 -6
  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/tile.css CHANGED
@@ -8,15 +8,15 @@
8
8
  border:none;
9
9
  vertical-align:baseline;
10
10
  --iui-surface-background-color:var(--iui-color-background-1);
11
- --iui-surface-border-radius:0;
12
- --iui-surface-elevation:0 1px 5px rgba(0, 0, 0, 0.25);
11
+ --iui-surface-border-radius:var(--iui-border-radius-1);
12
+ --iui-surface-elevation:var(--iui-shadow-1);
13
13
  background-color:var(--iui-surface-background-color);
14
14
  border-radius:var(--iui-surface-border-radius);
15
15
  box-shadow:var(--iui-surface-elevation);
16
- color:var(--iui-text-color);
16
+ color:var(--iui-color-foreground-2);
17
17
  display:inline-flex;
18
18
  flex-direction:column;
19
- width:288px;
19
+ width:calc(var(--iui-size-3xl) * 3);
20
20
  -webkit-backface-visibility:hidden;
21
21
  backface-visibility:hidden;
22
22
  }
@@ -25,6 +25,14 @@
25
25
  border:1px solid transparent;
26
26
  }
27
27
  }
28
+ .iui-tile:where(:not(.iui-folder)) > :where(:first-child){
29
+ border-top-left-radius:inherit;
30
+ border-top-right-radius:inherit;
31
+ }
32
+ .iui-tile:where(:not(.iui-folder)) > :where(:last-child){
33
+ border-bottom-left-radius:inherit;
34
+ border-bottom-right-radius:inherit;
35
+ }
28
36
  .iui-tile:hover .iui-tile-more-options, .iui-tile:focus-within .iui-tile-more-options{
29
37
  -webkit-clip-path:revert;
30
38
  clip-path:revert;
@@ -38,46 +46,46 @@
38
46
  position:absolute;
39
47
  }
40
48
  .iui-tile:hover .iui-tile-metadata:not(:last-child), .iui-tile:focus-within .iui-tile-metadata:not(:last-child){
41
- width:calc(100% - 32px);
49
+ width:calc(100% - var(--iui-size-xl));
42
50
  }
43
51
  .iui-tile.iui-new{
44
52
  --_iui-tile-status-icon-fill:var(--iui-color-foreground-positive);
45
53
  }
46
54
  .iui-tile.iui-new .iui-tile-name,
47
55
  .iui-tile.iui-new .iui-tile-description{
48
- font-weight:600;
56
+ font-weight:var(--iui-font-weight-semibold);
49
57
  }
50
58
  .iui-tile.iui-selected{
51
59
  --_iui-tile-status-icon-fill:var(--iui-color-foreground-primary);
52
60
  outline:solid 2px var(--iui-color-foreground-primary);
53
- 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));
61
+ background-color:var(--iui-color-background-subtle-primary);
54
62
  }
55
63
  .iui-tile.iui-selected:focus-visible{
56
- outline:4px solid var(--iui-color-foreground-primary);
64
+ outline:var(--iui-size-2xs) solid var(--iui-color-foreground-primary);
57
65
  outline-offset:0;
58
66
  }
59
67
  @supports not selector(*:focus-visible){
60
68
  .iui-tile.iui-selected:focus{
61
- outline:4px solid var(--iui-color-foreground-primary);
69
+ outline:var(--iui-size-2xs) solid var(--iui-color-foreground-primary);
62
70
  outline-offset:0;
63
71
  }
64
72
  }
65
73
  .iui-tile.iui-actionable{
66
74
  cursor:pointer;
67
- transition:box-shadow 0.2s ease-in-out;
75
+ transition:box-shadow var(--iui-duration-1) ease-in-out;
68
76
  }
69
77
  .iui-tile.iui-actionable:focus-visible{
70
- outline:2px solid var(--iui-color-foreground-primary);
71
- outline-offset:2px;
78
+ outline:var(--iui-size-3xs) solid var(--iui-color-foreground-primary);
79
+ outline-offset:var(--iui-size-3xs);
72
80
  }
73
81
  @supports not selector(*:focus-visible){
74
82
  .iui-tile.iui-actionable:focus{
75
- outline:2px solid var(--iui-color-foreground-primary);
76
- outline-offset:2px;
83
+ outline:var(--iui-size-3xs) solid var(--iui-color-foreground-primary);
84
+ outline-offset:var(--iui-size-3xs);
77
85
  }
78
86
  }
79
87
  .iui-tile.iui-actionable:hover{
80
- box-shadow:0 3px 14px rgba(0, 0, 0, 0.25);
88
+ box-shadow:var(--iui-shadow-3);
81
89
  }
82
90
  .iui-tile.iui-actionable:hover .iui-tile-thumbnail-picture, .iui-tile.iui-actionable:focus-within .iui-tile-thumbnail-picture, .iui-tile.iui-actionable.iui-selected .iui-tile-thumbnail-picture{
83
91
  transform:translateZ(0) scale(1.1);
@@ -87,8 +95,16 @@
87
95
  flex-direction:row;
88
96
  flex-wrap:nowrap;
89
97
  }
98
+ .iui-tile.iui-folder > :where(:first-child){
99
+ border-top-left-radius:inherit;
100
+ border-bottom-left-radius:inherit;
101
+ }
102
+ .iui-tile.iui-folder > :where(:last-child){
103
+ border-top-right-radius:inherit;
104
+ border-bottom-right-radius:inherit;
105
+ }
90
106
  .iui-tile.iui-folder .iui-tile-thumbnail{
91
- height:120px;
107
+ height:calc(var(--iui-size-s) * 10);
92
108
  flex:1;
93
109
  border-bottom:none;
94
110
  border-right:1px solid var(--iui-color-background-border);
@@ -98,7 +114,7 @@
98
114
  }
99
115
  .iui-tile.iui-folder .iui-tile-description{
100
116
  height:100%;
101
- max-height:48px;
117
+ max-height:calc(var(--iui-size-s) * 4);
102
118
  margin-bottom:0;
103
119
  -webkit-line-clamp:2;
104
120
  }
@@ -110,7 +126,7 @@
110
126
  cursor:not-allowed;
111
127
  }
112
128
  .iui-tile[aria-disabled=true] .iui-tile-name-label{
113
- color:var(--iui-text-color-muted);
129
+ color:var(--iui-color-foreground-4);
114
130
  }
115
131
  .iui-tile[aria-disabled=true] .iui-thumbnail-icon,
116
132
  .iui-tile[aria-disabled=true] .iui-tile-thumbnail-picture{
@@ -126,17 +142,17 @@
126
142
  --_iui-tile-status-icon-fill:var(--iui-color-foreground-positive);
127
143
  }
128
144
  .iui-tile.iui-positive::-moz-selection, .iui-tile.iui-positive *::-moz-selection{
129
- background-color:rgba(var(--iui-color-foreground-positive-rgb), var(--iui-opacity-5));
145
+ background-color:hsl(var(--iui-color-foreground-positive-hsl)/var(--iui-opacity-5));
130
146
  }
131
147
  .iui-tile.iui-positive::selection,
132
148
  .iui-tile.iui-positive *::selection{
133
- background-color:rgba(var(--iui-color-foreground-positive-rgb), var(--iui-opacity-5));
149
+ background-color:hsl(var(--iui-color-foreground-positive-hsl)/var(--iui-opacity-5));
134
150
  }
135
151
  .iui-tile.iui-positive .iui-tile-thumbnail{
136
- box-shadow:0 4px 0 var(--iui-color-foreground-positive);
152
+ box-shadow:0 var(--iui-size-2xs) 0 var(--iui-color-foreground-positive);
137
153
  }
138
154
  .iui-tile.iui-positive.iui-folder .iui-tile-thumbnail{
139
- box-shadow:4px 0 0 var(--iui-color-foreground-positive);
155
+ box-shadow:var(--iui-size-2xs) 0 0 var(--iui-color-foreground-positive);
140
156
  }
141
157
 
142
158
  .iui-tile.iui-positive .iui-tile-name-label{
@@ -146,17 +162,17 @@
146
162
  --_iui-tile-status-icon-fill:var(--iui-color-foreground-warning);
147
163
  }
148
164
  .iui-tile.iui-warning::-moz-selection, .iui-tile.iui-warning *::-moz-selection{
149
- background-color:rgba(var(--iui-color-foreground-warning-rgb), var(--iui-opacity-5));
165
+ background-color:hsl(var(--iui-color-foreground-warning-hsl)/var(--iui-opacity-5));
150
166
  }
151
167
  .iui-tile.iui-warning::selection,
152
168
  .iui-tile.iui-warning *::selection{
153
- background-color:rgba(var(--iui-color-foreground-warning-rgb), var(--iui-opacity-5));
169
+ background-color:hsl(var(--iui-color-foreground-warning-hsl)/var(--iui-opacity-5));
154
170
  }
155
171
  .iui-tile.iui-warning .iui-tile-thumbnail{
156
- box-shadow:0 4px 0 var(--iui-color-foreground-warning);
172
+ box-shadow:0 var(--iui-size-2xs) 0 var(--iui-color-foreground-warning);
157
173
  }
158
174
  .iui-tile.iui-warning.iui-folder .iui-tile-thumbnail{
159
- box-shadow:4px 0 0 var(--iui-color-foreground-warning);
175
+ box-shadow:var(--iui-size-2xs) 0 0 var(--iui-color-foreground-warning);
160
176
  }
161
177
 
162
178
  .iui-tile.iui-warning .iui-tile-name-label{
@@ -166,17 +182,17 @@
166
182
  --_iui-tile-status-icon-fill:var(--iui-color-foreground-negative);
167
183
  }
168
184
  .iui-tile.iui-negative::-moz-selection, .iui-tile.iui-negative *::-moz-selection{
169
- background-color:rgba(var(--iui-color-foreground-negative-rgb), var(--iui-opacity-5));
185
+ background-color:hsl(var(--iui-color-foreground-negative-hsl)/var(--iui-opacity-5));
170
186
  }
171
187
  .iui-tile.iui-negative::selection,
172
188
  .iui-tile.iui-negative *::selection{
173
- background-color:rgba(var(--iui-color-foreground-negative-rgb), var(--iui-opacity-5));
189
+ background-color:hsl(var(--iui-color-foreground-negative-hsl)/var(--iui-opacity-5));
174
190
  }
175
191
  .iui-tile.iui-negative .iui-tile-thumbnail{
176
- box-shadow:0 4px 0 var(--iui-color-foreground-negative);
192
+ box-shadow:0 var(--iui-size-2xs) 0 var(--iui-color-foreground-negative);
177
193
  }
178
194
  .iui-tile.iui-negative.iui-folder .iui-tile-thumbnail{
179
- box-shadow:4px 0 0 var(--iui-color-foreground-negative);
195
+ box-shadow:var(--iui-size-2xs) 0 0 var(--iui-color-foreground-negative);
180
196
  }
181
197
 
182
198
  .iui-tile.iui-negative .iui-tile-name-label{
@@ -184,47 +200,48 @@
184
200
  }
185
201
 
186
202
  .iui-tile-thumbnail-type-indicator{
187
- --_iui-button-text-color:var(--iui-text-color);
203
+ --_iui-button-text-color:var(--iui-color-foreground-2);
188
204
  --_iui-button-background-color:transparent;
189
205
  --_iui-button-border-color:transparent;
190
- --_iui-button-icon-margin-x:4px;
191
- --_iui-button-gap:8px;
192
- --_iui-button-height:40px;
193
- --_iui-button-padding-inline:16px;
194
- --_iui-button-padding-inline:8px;
195
- --_iui-button-gap:4px;
196
- --_iui-button-height:28px;
197
- --_iui-button-padding-inline:8px;
198
- --_iui-button-padding-inline:2px;
206
+ --_iui-button-gap:var(--iui-size-xs);
207
+ --_iui-button-padding-block:var(--iui-size-2xs);
208
+ --_iui-button-padding-inline:var(--iui-size-m);
209
+ --_iui-button-min-height:var(--iui-component-height);
210
+ --_iui-button-padding-inline:var(--iui-size-xs);
211
+ --_iui-button-gap:var(--iui-size-2xs);
212
+ --_iui-button-padding-block:0;
213
+ --_iui-button-padding-inline:var(--iui-size-xs);
214
+ --_iui-button-min-height:var(--iui-component-height-small);
215
+ --_iui-button-padding-inline:var(--iui-size-2xs);
199
216
  position:absolute;
200
217
  border-radius:50%;
201
- top:6px;
202
- left:8px;
218
+ top:calc(var(--iui-size-s) * 0.5);
219
+ left:var(--iui-size-xs);
203
220
  }
204
221
  .iui-tile-thumbnail-type-indicator:where(:hover, :active){
205
- --_iui-button-text-color:var(--iui-color-foreground-body);
206
- --_iui-button-background-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-6));
222
+ --_iui-button-text-color:var(--iui-color-foreground-1);
223
+ --_iui-button-background-color:var(--iui-color-background-transparent-hover);
207
224
  }
208
225
  .iui-tile-thumbnail-type-indicator:where(:focus){
209
226
  outline-offset:-1px;
210
227
  outline-width:1px;
211
228
  }
212
229
  .iui-tile-thumbnail-type-indicator:where([disabled], :disabled, [aria-disabled="true"]){
213
- --_iui-button-text-color:var(--iui-text-color-placeholder);
230
+ --_iui-button-text-color:var(--iui-color-foreground-5);
214
231
  --_iui-button-background-color:transparent;
215
232
  --_iui-button-border-color:transparent;
216
233
  }
217
234
  .iui-tile-thumbnail-type-indicator[data-iui-active=true]{
218
235
  --_iui-button-text-color:var(--iui-color-foreground-primary);
219
- --_iui-button-background-color:rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-6));
236
+ --_iui-button-background-color:hsl(var(--iui-color-foreground-primary-hsl) / var(--iui-opacity-6));
220
237
  }
221
238
  .iui-tile-thumbnail-picture ~ .iui-tile-thumbnail-type-indicator{
222
- background-color:rgba(0, 0, 0, var(--iui-opacity-4));
239
+ background-color:Hsl(0 0% 0%/var(--iui-opacity-4));
223
240
  --_iui-button-text-color:var(--iui-color-foreground-accessory);
224
241
  }
225
242
  @supports ((-webkit-backdrop-filter: blur(5px)) or (backdrop-filter: blur(5px))){
226
243
  .iui-tile-thumbnail-picture ~ .iui-tile-thumbnail-type-indicator{
227
- background-color:rgba(0, 0, 0, var(--iui-opacity-5));
244
+ background-color:Hsl(0 0% 0%/var(--iui-opacity-5));
228
245
  -webkit-backdrop-filter:blur(5px);
229
246
  backdrop-filter:blur(5px);
230
247
  }
@@ -237,47 +254,48 @@
237
254
  }
238
255
 
239
256
  .iui-tile-thumbnail-quick-action{
240
- --_iui-button-text-color:var(--iui-text-color);
257
+ --_iui-button-text-color:var(--iui-color-foreground-2);
241
258
  --_iui-button-background-color:transparent;
242
259
  --_iui-button-border-color:transparent;
243
- --_iui-button-icon-margin-x:4px;
244
- --_iui-button-gap:8px;
245
- --_iui-button-height:40px;
246
- --_iui-button-padding-inline:16px;
247
- --_iui-button-padding-inline:8px;
248
- --_iui-button-gap:4px;
249
- --_iui-button-height:28px;
250
- --_iui-button-padding-inline:8px;
251
- --_iui-button-padding-inline:2px;
260
+ --_iui-button-gap:var(--iui-size-xs);
261
+ --_iui-button-padding-block:var(--iui-size-2xs);
262
+ --_iui-button-padding-inline:var(--iui-size-m);
263
+ --_iui-button-min-height:var(--iui-component-height);
264
+ --_iui-button-padding-inline:var(--iui-size-xs);
265
+ --_iui-button-gap:var(--iui-size-2xs);
266
+ --_iui-button-padding-block:0;
267
+ --_iui-button-padding-inline:var(--iui-size-xs);
268
+ --_iui-button-min-height:var(--iui-component-height-small);
269
+ --_iui-button-padding-inline:var(--iui-size-2xs);
252
270
  position:absolute;
253
271
  border-radius:50%;
254
- top:6px;
255
- right:8px;
272
+ top:calc(var(--iui-size-s) * 0.5);
273
+ right:var(--iui-size-xs);
256
274
  }
257
275
  .iui-tile-thumbnail-quick-action:where(:hover, :active){
258
- --_iui-button-text-color:var(--iui-color-foreground-body);
259
- --_iui-button-background-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-6));
276
+ --_iui-button-text-color:var(--iui-color-foreground-1);
277
+ --_iui-button-background-color:var(--iui-color-background-transparent-hover);
260
278
  }
261
279
  .iui-tile-thumbnail-quick-action:where(:focus){
262
280
  outline-offset:-1px;
263
281
  outline-width:1px;
264
282
  }
265
283
  .iui-tile-thumbnail-quick-action:where([disabled], :disabled, [aria-disabled="true"]){
266
- --_iui-button-text-color:var(--iui-text-color-placeholder);
284
+ --_iui-button-text-color:var(--iui-color-foreground-5);
267
285
  --_iui-button-background-color:transparent;
268
286
  --_iui-button-border-color:transparent;
269
287
  }
270
288
  .iui-tile-thumbnail-quick-action[data-iui-active=true]{
271
289
  --_iui-button-text-color:var(--iui-color-foreground-primary);
272
- --_iui-button-background-color:rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-6));
290
+ --_iui-button-background-color:hsl(var(--iui-color-foreground-primary-hsl) / var(--iui-opacity-6));
273
291
  }
274
292
  .iui-tile-thumbnail-picture ~ .iui-tile-thumbnail-quick-action{
275
- background-color:rgba(0, 0, 0, var(--iui-opacity-4));
293
+ background-color:Hsl(0 0% 0%/var(--iui-opacity-4));
276
294
  --_iui-button-text-color:var(--iui-color-foreground-accessory);
277
295
  }
278
296
  @supports ((-webkit-backdrop-filter: blur(5px)) or (backdrop-filter: blur(5px))){
279
297
  .iui-tile-thumbnail-picture ~ .iui-tile-thumbnail-quick-action{
280
- background-color:rgba(0, 0, 0, var(--iui-opacity-5));
298
+ background-color:Hsl(0 0% 0%/var(--iui-opacity-5));
281
299
  -webkit-backdrop-filter:blur(5px);
282
300
  backdrop-filter:blur(5px);
283
301
  }
@@ -291,14 +309,14 @@
291
309
 
292
310
  .iui-tile-thumbnail-badge-container{
293
311
  position:absolute;
294
- bottom:6px;
295
- width:calc(100% - 2 * 12px);
312
+ bottom:calc(var(--iui-size-s) * 0.5);
313
+ width:calc(100% - 2 * var(--iui-size-s));
296
314
  height:auto;
297
- right:12px;
315
+ right:var(--iui-size-s);
298
316
  display:flex;
299
317
  justify-content:flex-end;
300
318
  overflow:hidden;
301
- gap:4px;
319
+ gap:var(--iui-size-2xs);
302
320
  }
303
321
 
304
322
  .iui-tile-buttons{
@@ -309,12 +327,13 @@
309
327
  -ms-user-select:none;
310
328
  user-select:none;
311
329
  white-space:nowrap;
330
+ overflow:hidden;
312
331
  }
313
332
  .iui-tile-buttons > .iui-button{
314
- font-size:14px;
333
+ font-size:var(--iui-font-size-1);
315
334
  flex:1;
316
335
  height:auto;
317
- padding:12px 12px;
336
+ padding:var(--iui-size-s) var(--iui-size-s);
318
337
  overflow:hidden;
319
338
  white-space:nowrap;
320
339
  text-overflow:ellipsis;
@@ -334,22 +353,22 @@
334
353
  .iui-tile-thumbnail{
335
354
  box-sizing:content-box;
336
355
  width:100%;
337
- height:168px;
356
+ height:calc(var(--iui-size-s) * 14);
338
357
  flex-shrink:0;
339
358
  overflow:hidden;
340
359
  position:relative;
341
360
  display:flex;
342
361
  align-items:center;
343
362
  justify-content:center;
344
- background-color:var(--iui-color-background-1-overlay);
363
+ background-color:var(--iui-color-background-1-hover);
345
364
  border-bottom:1px solid var(--iui-color-background-border);
346
365
  }
347
366
  .iui-tile-thumbnail .iui-thumbnail-icon{
348
367
  display:flex;
349
368
  flex-shrink:0;
350
- width:64px;
351
- height:64px;
352
- fill:var(--iui-icon-color);
369
+ width:var(--iui-size-2xl);
370
+ height:var(--iui-size-2xl);
371
+ fill:var(--iui-color-foreground-4);
353
372
  }
354
373
  @media (forced-colors: active){
355
374
  .iui-tile-thumbnail .iui-thumbnail-icon{
@@ -366,7 +385,7 @@
366
385
  }
367
386
  @media (prefers-reduced-motion: no-preference){
368
387
  .iui-tile-thumbnail-picture{
369
- transition:transform 0.4s ease;
388
+ transition:transform var(--iui-duration-2) ease;
370
389
  }
371
390
  }
372
391
  div.iui-tile-thumbnail-picture{
@@ -376,20 +395,20 @@ div.iui-tile-thumbnail-picture{
376
395
 
377
396
  .iui-tile-thumbnail-picture ~ .iui-thumbnail-icon{
378
397
  cursor:pointer;
379
- fill:rgba(var(--iui-color-foreground-accessory-rgb), var(--iui-opacity-3));
398
+ fill:rgba(255, 255, 255, var(--iui-opacity-3));
380
399
  filter:drop-shadow(0 2px 1px rgba(0, 1, 5, var(--iui-opacity-5)));
381
400
  }
382
401
  @media (prefers-reduced-motion: no-preference){
383
402
  .iui-tile-thumbnail-picture ~ .iui-thumbnail-icon{
384
- transition:fill 0.2s ease;
403
+ transition:fill var(--iui-duration-1) ease;
385
404
  }
386
405
  }
387
406
  .iui-tile-thumbnail-picture ~ .iui-thumbnail-icon:hover{
388
- fill:rgba(var(--iui-color-foreground-accessory-rgb), var(--iui-opacity-2));
407
+ fill:rgba(255, 255, 255, var(--iui-opacity-2));
389
408
  }
390
409
 
391
410
  .iui-tile-content{
392
- padding:12px 12px;
411
+ padding:var(--iui-size-s) var(--iui-size-s);
393
412
  position:relative;
394
413
  display:flex;
395
414
  flex-direction:column;
@@ -400,19 +419,19 @@ div.iui-tile-thumbnail-picture{
400
419
  display:flex;
401
420
  flex-shrink:0;
402
421
  align-items:center;
403
- font-size:16px;
422
+ font-size:var(--iui-font-size-2);
404
423
  -webkit-user-select:all;
405
424
  -moz-user-select:all;
406
425
  user-select:all;
407
- margin-bottom:6px;
408
- color:var(--iui-text-color);
426
+ margin-bottom:calc(var(--iui-size-s) * 0.5);
427
+ color:var(--iui-color-foreground-2);
409
428
  }
410
429
  .iui-tile-content .iui-tile-status-icon{
411
430
  display:flex;
412
431
  flex-shrink:0;
413
- width:16px;
414
- height:16px;
415
- margin-right:8px;
432
+ width:var(--iui-size-m);
433
+ height:var(--iui-size-m);
434
+ margin-right:var(--iui-size-xs);
416
435
  fill:var(--_iui-tile-status-icon-fill);
417
436
  }
418
437
  .iui-tile-content .iui-tile-name-label{
@@ -421,37 +440,37 @@ div.iui-tile-thumbnail-picture{
421
440
  text-overflow:ellipsis;
422
441
  }
423
442
  .iui-tile-content .iui-tile-description{
424
- margin-bottom:12px;
425
- font-size:14px;
443
+ margin-bottom:var(--iui-size-s);
444
+ font-size:var(--iui-font-size-1);
426
445
  height:100%;
427
- max-height:72px;
446
+ max-height:calc(var(--iui-size-s) * 6);
428
447
  overflow:hidden;
429
448
  text-overflow:ellipsis;
430
449
  display:-webkit-box;
431
450
  -webkit-line-clamp:3;
432
451
  -webkit-box-orient:vertical;
433
- color:var(--iui-text-color-muted);
452
+ color:var(--iui-color-foreground-4);
434
453
  }
435
454
  .iui-tile-content .iui-tile-metadata{
436
- font-size:12px;
455
+ font-size:var(--iui-font-size-0);
437
456
  flex-shrink:0;
438
457
  overflow:hidden;
439
458
  text-overflow:ellipsis;
440
- height:24px;
459
+ height:var(--iui-size-l);
441
460
  width:100%;
442
461
  display:flex;
443
462
  align-items:center;
444
463
  margin-top:auto;
445
- color:var(--iui-text-color-muted);
464
+ color:var(--iui-color-foreground-4);
446
465
  }
447
466
  .iui-tile-content .iui-tile-metadata > svg,
448
467
  .iui-tile-content .iui-tile-metadata .iui-tile-metadata-icon{
449
468
  display:flex;
450
469
  flex-shrink:0;
451
- width:16px;
452
- height:16px;
453
- fill:var(--iui-icon-color);
454
- margin-right:8px;
470
+ width:var(--iui-size-m);
471
+ height:var(--iui-size-m);
472
+ fill:var(--iui-color-foreground-4);
473
+ margin-right:var(--iui-size-xs);
455
474
  }
456
475
  @media (forced-colors: active){
457
476
  .iui-tile-content .iui-tile-metadata > svg,
@@ -467,8 +486,8 @@ div.iui-tile-thumbnail-picture{
467
486
 
468
487
  .iui-tile-more-options{
469
488
  position:absolute;
470
- bottom:6px;
471
- right:8px;
489
+ bottom:calc(var(--iui-size-s) * 0.5);
490
+ right:var(--iui-size-xs);
472
491
  }
473
492
  .iui-tile-more-options:not(.iui-visible){
474
493
  -webkit-clip-path:inset(50%);
package/css/time-picker.css CHANGED
@@ -12,19 +12,23 @@
12
12
  -ms-user-select:none;
13
13
  user-select:none;
14
14
  text-align:center;
15
- height:312px;
15
+ height:calc(var(--iui-size-s) * 26);
16
16
  display:inline-flex;
17
17
  background-color:var(--iui-color-background-1);
18
+ border-top-right-radius:var(--iui-border-radius-1);
19
+ border-bottom-right-radius:var(--iui-border-radius-1);
18
20
  }
19
21
  .iui-time-picker:not(:first-child){
20
22
  border-left:1px solid var(--iui-color-background-border);
21
23
  }
22
24
  .iui-time-picker:first-child{
23
- box-shadow:0 1px 5px rgba(0, 0, 0, 0.25);
25
+ box-shadow:var(--iui-shadow-1);
26
+ border-top-left-radius:var(--iui-border-radius-1);
27
+ border-bottom-left-radius:var(--iui-border-radius-1);
24
28
  }
25
29
 
26
30
  .iui-time{
27
- padding:12px 8px;
31
+ padding:var(--iui-size-s) var(--iui-size-xs);
28
32
  overflow-y:auto;
29
33
  overflow-y:overlay;
30
34
  scrollbar-width:none;
@@ -40,8 +44,8 @@
40
44
  list-style:none;
41
45
  }
42
46
  .iui-time > ol > li{
43
- padding:6px 16px;
44
- border-radius:4px;
47
+ padding:calc(var(--iui-size-s) * 0.5) var(--iui-size-m);
48
+ border-radius:var(--iui-border-radius-1);
45
49
  }
46
50
  .iui-time > ol > li:focus-visible{
47
51
  outline:1px solid var(--iui-color-foreground-primary);
@@ -55,11 +59,10 @@
55
59
  }
56
60
  .iui-time > ol > li:hover{
57
61
  cursor:pointer;
58
- color:var(--iui-color-foreground-primary);
59
- background-color:rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-6));
62
+ background-color:var(--iui-color-background-transparent-hover);
60
63
  }
61
64
  .iui-time > ol > li.iui-selected{
62
- font-weight:600;
65
+ font-weight:var(--iui-font-weight-semibold);
63
66
  cursor:default;
64
67
  background-color:var(--iui-color-background-primary);
65
68
  color:var(--iui-color-foreground-accessory);
@@ -76,7 +79,7 @@
76
79
  }
77
80
 
78
81
  .iui-period{
79
- padding:12px 8px;
82
+ padding:var(--iui-size-s) var(--iui-size-xs);
80
83
  overflow-y:auto;
81
84
  overflow-y:overlay;
82
85
  scrollbar-width:none;
@@ -94,8 +97,8 @@
94
97
  list-style:none;
95
98
  }
96
99
  .iui-period > ol > li{
97
- padding:6px 16px;
98
- border-radius:4px;
100
+ padding:calc(var(--iui-size-s) * 0.5) var(--iui-size-m);
101
+ border-radius:var(--iui-border-radius-1);
99
102
  }
100
103
  .iui-period > ol > li:focus-visible{
101
104
  outline:1px solid var(--iui-color-foreground-primary);
@@ -109,11 +112,10 @@
109
112
  }
110
113
  .iui-period > ol > li:hover{
111
114
  cursor:pointer;
112
- color:var(--iui-color-foreground-primary);
113
- background-color:rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-6));
115
+ background-color:var(--iui-color-background-transparent-hover);
114
116
  }
115
117
  .iui-period > ol > li.iui-selected{
116
- font-weight:600;
118
+ font-weight:var(--iui-font-weight-semibold);
117
119
  cursor:default;
118
120
  background-color:var(--iui-color-background-primary);
119
121
  color:var(--iui-color-foreground-accessory);