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

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