@itwin/itwinui-css 1.0.0-dev.12 → 1.0.0-dev.14

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 (46) hide show
  1. package/css/alert.css +149 -240
  2. package/css/all.css +1213 -1258
  3. package/css/anchor.css +7 -15
  4. package/css/avatar.css +19 -16
  5. package/css/blockquote.css +11 -5
  6. package/css/breadcrumbs.css +47 -73
  7. package/css/button.css +59 -42
  8. package/css/carousel.css +12 -12
  9. package/css/checkbox.css +18 -20
  10. package/css/code.css +16 -12
  11. package/css/color-picker.css +18 -21
  12. package/css/date-picker.css +54 -59
  13. package/css/dialog.css +4 -4
  14. package/css/expandable-block.css +19 -19
  15. package/css/fieldset.css +6 -5
  16. package/css/file-upload.css +8 -8
  17. package/css/footer.css +11 -19
  18. package/css/global.css +16 -16
  19. package/css/header.css +32 -27
  20. package/css/information-panel.css +8 -7
  21. package/css/input.css +23 -23
  22. package/css/keyboard.css +4 -4
  23. package/css/location-marker.css +9 -9
  24. package/css/menu.css +27 -29
  25. package/css/progress-indicator.css +27 -27
  26. package/css/radio-tile.css +21 -20
  27. package/css/radio.css +18 -20
  28. package/css/select.css +22 -19
  29. package/css/side-navigation.css +26 -13
  30. package/css/skip-to-content.css +3 -3
  31. package/css/slider.css +15 -12
  32. package/css/stepper.css +17 -17
  33. package/css/surface.css +5 -8
  34. package/css/table.css +91 -85
  35. package/css/tabs.css +36 -33
  36. package/css/tag.css +16 -24
  37. package/css/text.css +2 -2
  38. package/css/tile.css +65 -62
  39. package/css/time-picker.css +18 -18
  40. package/css/toast.css +102 -71
  41. package/css/toggle-switch.css +32 -37
  42. package/css/tooltip.css +1 -1
  43. package/css/tree.css +14 -12
  44. package/css/utils.css +99 -83
  45. package/css/workflow-diagram.css +6 -6
  46. package/package.json +1 -1
package/css/utils.css CHANGED
@@ -45,7 +45,7 @@
45
45
  }
46
46
 
47
47
  [data-iui-icon-color=default]{
48
- fill:var(--iui-color-foreground-4);
48
+ fill:var(--iui-color-icon-muted);
49
49
  }
50
50
  @media (forced-colors: active){
51
51
  [data-iui-icon-color=default]{
@@ -54,19 +54,19 @@
54
54
  }
55
55
 
56
56
  [data-iui-icon-color=informational]{
57
- fill:var(--iui-color-foreground-primary);
57
+ fill:var(--iui-color-icon-informational);
58
58
  }
59
59
 
60
60
  [data-iui-icon-color=positive]{
61
- fill:var(--iui-color-foreground-positive);
61
+ fill:var(--iui-color-icon-positive);
62
62
  }
63
63
 
64
64
  [data-iui-icon-color=warning]{
65
- fill:var(--iui-color-foreground-warning);
65
+ fill:var(--iui-color-icon-warning);
66
66
  }
67
67
 
68
68
  [data-iui-icon-color=negative]{
69
- fill:var(--iui-color-foreground-negative);
69
+ fill:var(--iui-color-icon-negative);
70
70
  }
71
71
 
72
72
  .iui-input-container{
@@ -128,20 +128,28 @@ label.iui-input-container.iui-disabled{
128
128
  .iui-input-container > .iui-label{
129
129
  font-weight:var(--iui-font-weight-semibold);
130
130
  margin-bottom:var(--iui-size-2xs);
131
+ color:var(--_iui-input-label-color);
131
132
  grid-area:label;
132
133
  align-self:center;
133
134
  }
134
135
  .iui-input-container > .iui-label.iui-required::after{
135
136
  content:"*";
136
137
  margin-left:var(--iui-size-2xs);
137
- color:var(--iui-color-foreground-negative);
138
+ color:var(--iui-color-text-negative);
138
139
  }
140
+ .iui-input-container > .iui-label.iui-disabled{
141
+ --_iui-input-label-color:var(--iui-color-text-disabled);
142
+ }
143
+ .iui-input-container.iui-disabled{
144
+ --_iui-input-label-color:var(--iui-color-text-disabled);
145
+ }
146
+
139
147
  .iui-input-container .iui-input-icon{
140
148
  display:flex;
141
149
  flex-shrink:0;
142
150
  width:var(--iui-size-m);
143
151
  height:var(--iui-size-m);
144
- fill:var(--iui-color-foreground-4);
152
+ fill:var(--iui-color-icon-muted);
145
153
  grid-area:icon;
146
154
  align-self:center;
147
155
  }
@@ -157,7 +165,7 @@ label.iui-input-container.iui-disabled{
157
165
  font-size:var(--iui-font-size-0);
158
166
  grid-area:message;
159
167
  margin-top:var(--iui-size-2xs);
160
- color:var(--iui-color-foreground-4);
168
+ color:var(--iui-color-text-muted);
161
169
  }
162
170
  .iui-input-container .iui-message a{
163
171
  -webkit-user-select:none;
@@ -200,15 +208,15 @@ label.iui-input-container.iui-disabled{
200
208
  transition:background var(--iui-duration-2) ease-out;
201
209
  }
202
210
  .iui-input-container.iui-inline-icon > .iui-input-icon.iui-actionable:hover{
203
- background:var(--iui-color-background-1) radial-gradient(circle, transparent 1%, var(--iui-color-background-1) 1%) center/15000%;
211
+ background:var(--iui-color-background) radial-gradient(circle, transparent 1%, var(--iui-color-background) 1%) center/15000%;
204
212
  }
205
213
  .iui-input-container.iui-inline-icon > .iui-input-icon.iui-actionable:active{
206
- background-color:var(--iui-color-background-2);
214
+ background-color:var(--iui-color-background-backdrop);
207
215
  background-size:100%;
208
216
  transition:background var(--iui-duration-0);
209
217
  }
210
218
  .iui-input-container.iui-inline-icon > .iui-input-icon.iui-actionable svg{
211
- fill:var(--iui-color-foreground-2);
219
+ fill:var(--iui-color-icon);
212
220
  transition:transform var(--iui-duration-1) ease-out;
213
221
  }
214
222
  .iui-input-container.iui-inline-icon > .iui-input-icon.iui-actionable.iui-open svg{
@@ -218,7 +226,7 @@ label.iui-input-container.iui-disabled{
218
226
  cursor:not-allowed;
219
227
  }
220
228
  .iui-input-container.iui-inline-icon > .iui-input-icon.iui-disabled svg{
221
- fill:var(--iui-color-foreground-5);
229
+ fill:var(--iui-color-icon-disabled);
222
230
  }
223
231
  .iui-input-container.iui-inline-label > .iui-label{
224
232
  margin:0 var(--iui-size-m) 0 0;
@@ -227,29 +235,29 @@ label.iui-input-container.iui-disabled{
227
235
  margin-right:calc(var(--iui-size-2xs) * 1.5 - 1px);
228
236
  }
229
237
  .iui-input-container.iui-positive::-moz-selection, .iui-input-container.iui-positive *::-moz-selection{
230
- background-color:hsl(var(--iui-color-foreground-positive-hsl)/var(--iui-opacity-5));
238
+ background-color:hsl(var(--iui-color-positive-hsl)/var(--iui-opacity-5));
231
239
  }
232
240
  .iui-input-container.iui-positive::selection,
233
241
  .iui-input-container.iui-positive *::selection{
234
- background-color:hsl(var(--iui-color-foreground-positive-hsl)/var(--iui-opacity-5));
242
+ background-color:hsl(var(--iui-color-positive-hsl)/var(--iui-opacity-5));
235
243
  }
236
244
  .iui-input-container.iui-positive .iui-input-icon{
237
- fill:var(--iui-color-foreground-positive);
245
+ fill:var(--iui-color-icon-positive);
238
246
  }
239
247
  .iui-input-container.iui-positive .iui-message{
240
- color:var(--iui-color-foreground-positive);
248
+ color:var(--iui-color-text-positive);
241
249
  }
242
250
  .iui-input-container.iui-positive .iui-message a{
243
251
  text-decoration:underline;
244
- color:var(--iui-color-foreground-positive);
252
+ color:var(--iui-color-text-positive);
245
253
  }
246
254
  .iui-input-container.iui-positive .iui-message a:hover{
247
255
  text-decoration:none;
248
- color:var(--iui-color-foreground-positive-hover);
256
+ color:var(--iui-color-text-positive-hover);
249
257
  }
250
258
  .iui-input-container.iui-positive .iui-input{
251
259
  padding-bottom:calc(var(--iui-size-2xs) - 1px);
252
- border-bottom:var(--iui-size-3xs) solid var(--iui-color-foreground-positive);
260
+ border-bottom:var(--iui-size-3xs) solid var(--iui-color-border-positive);
253
261
  }
254
262
  .iui-input-container.iui-positive .iui-input[data-iui-size=small]{
255
263
  padding-bottom:0;
@@ -258,13 +266,13 @@ label.iui-input-container.iui-disabled{
258
266
  padding-bottom:calc(var(--iui-size-xs) - 1px);
259
267
  }
260
268
  .iui-input-container.iui-positive .iui-input:focus{
261
- border-bottom:var(--iui-size-3xs) solid var(--iui-color-foreground-positive);
262
- outline:2px solid var(--iui-color-foreground-positive);
269
+ border-bottom:var(--iui-size-3xs) solid var(--iui-color-border-positive);
270
+ outline:2px solid var(--iui-color-text-positive);
263
271
  outline-offset:-2px;
264
272
  }
265
273
  .iui-input-container.iui-positive .iui-input-with-icon{
266
- --_iui-input-with-icon-hover-border-color:var(--iui-color-foreground-positive);
267
- --_focus-color:var(--iui-color-foreground-positive);
274
+ --_iui-input-with-icon-hover-border-color:var(--iui-color-border-positive);
275
+ --_focus-color:var(--iui-color-text-positive);
268
276
  }
269
277
  .iui-input-container.iui-positive .iui-select-button{
270
278
  border-bottom:transparent;
@@ -276,124 +284,132 @@ label.iui-input-container.iui-disabled{
276
284
  bottom:0;
277
285
  left:0;
278
286
  height:var(--iui-size-3xs);
279
- background-color:var(--iui-color-foreground-positive);
287
+ background-color:var(--iui-color-border-positive);
280
288
  }
281
- .iui-input-container.iui-negative::-moz-selection, .iui-input-container.iui-negative *::-moz-selection{
282
- background-color:hsl(var(--iui-color-foreground-negative-hsl)/var(--iui-opacity-5));
289
+ .iui-input-container.iui-warning::-moz-selection, .iui-input-container.iui-warning *::-moz-selection{
290
+ background-color:hsl(var(--iui-color-warning-hsl)/var(--iui-opacity-5));
283
291
  }
284
- .iui-input-container.iui-negative::selection,
285
- .iui-input-container.iui-negative *::selection{
286
- background-color:hsl(var(--iui-color-foreground-negative-hsl)/var(--iui-opacity-5));
292
+ .iui-input-container.iui-warning::selection,
293
+ .iui-input-container.iui-warning *::selection{
294
+ background-color:hsl(var(--iui-color-warning-hsl)/var(--iui-opacity-5));
287
295
  }
288
- .iui-input-container.iui-negative .iui-input-icon{
289
- fill:var(--iui-color-foreground-negative);
296
+ .iui-input-container.iui-warning .iui-input-icon{
297
+ fill:var(--iui-color-icon-warning);
290
298
  }
291
- .iui-input-container.iui-negative .iui-message{
292
- color:var(--iui-color-foreground-negative);
299
+ .iui-input-container.iui-warning .iui-message{
300
+ color:var(--iui-color-text-warning);
293
301
  }
294
- .iui-input-container.iui-negative .iui-message a{
302
+ .iui-input-container.iui-warning .iui-message a{
295
303
  text-decoration:underline;
296
- color:var(--iui-color-foreground-negative);
304
+ color:var(--iui-color-text-warning);
297
305
  }
298
- .iui-input-container.iui-negative .iui-message a:hover{
306
+ .iui-input-container.iui-warning .iui-message a:hover{
299
307
  text-decoration:none;
300
- color:var(--iui-color-foreground-negative-hover);
308
+ color:var(--iui-color-text-warning-hover);
301
309
  }
302
- .iui-input-container.iui-negative .iui-input{
310
+ .iui-input-container.iui-warning .iui-input{
303
311
  padding-bottom:calc(var(--iui-size-2xs) - 1px);
304
- border-bottom:var(--iui-size-3xs) solid var(--iui-color-foreground-negative);
312
+ border-bottom:var(--iui-size-3xs) solid var(--iui-color-border-warning);
305
313
  }
306
- .iui-input-container.iui-negative .iui-input[data-iui-size=small]{
314
+ .iui-input-container.iui-warning .iui-input[data-iui-size=small]{
307
315
  padding-bottom:0;
308
316
  }
309
- .iui-input-container.iui-negative .iui-input[data-iui-size=large]{
317
+ .iui-input-container.iui-warning .iui-input[data-iui-size=large]{
310
318
  padding-bottom:calc(var(--iui-size-xs) - 1px);
311
319
  }
312
- .iui-input-container.iui-negative .iui-input:focus{
313
- border-bottom:var(--iui-size-3xs) solid var(--iui-color-foreground-negative);
314
- outline:2px solid var(--iui-color-foreground-negative);
320
+ .iui-input-container.iui-warning .iui-input:focus{
321
+ border-bottom:var(--iui-size-3xs) solid var(--iui-color-border-warning);
322
+ outline:2px solid var(--iui-color-text-warning);
315
323
  outline-offset:-2px;
316
324
  }
317
- .iui-input-container.iui-negative .iui-input-with-icon{
318
- --_iui-input-with-icon-hover-border-color:var(--iui-color-foreground-negative);
319
- --_focus-color:var(--iui-color-foreground-negative);
325
+ .iui-input-container.iui-warning .iui-input-with-icon{
326
+ --_iui-input-with-icon-hover-border-color:var(--iui-color-border-warning);
327
+ --_focus-color:var(--iui-color-text-warning);
320
328
  }
321
- .iui-input-container.iui-negative .iui-select-button{
329
+ .iui-input-container.iui-warning .iui-select-button{
322
330
  border-bottom:transparent;
323
331
  }
324
- .iui-input-container.iui-negative .iui-select-button::after{
332
+ .iui-input-container.iui-warning .iui-select-button::after{
325
333
  content:"";
326
334
  width:100%;
327
335
  position:absolute;
328
336
  bottom:0;
329
337
  left:0;
330
338
  height:var(--iui-size-3xs);
331
- background-color:var(--iui-color-foreground-negative);
339
+ background-color:var(--iui-color-border-warning);
332
340
  }
333
- .iui-input-container.iui-warning::-moz-selection, .iui-input-container.iui-warning *::-moz-selection{
334
- background-color:hsl(var(--iui-color-foreground-warning-hsl)/var(--iui-opacity-5));
341
+ .iui-input-container.iui-negative::-moz-selection, .iui-input-container.iui-negative *::-moz-selection{
342
+ background-color:hsl(var(--iui-color-negative-hsl)/var(--iui-opacity-5));
335
343
  }
336
- .iui-input-container.iui-warning::selection,
337
- .iui-input-container.iui-warning *::selection{
338
- background-color:hsl(var(--iui-color-foreground-warning-hsl)/var(--iui-opacity-5));
344
+ .iui-input-container.iui-negative::selection,
345
+ .iui-input-container.iui-negative *::selection{
346
+ background-color:hsl(var(--iui-color-negative-hsl)/var(--iui-opacity-5));
339
347
  }
340
- .iui-input-container.iui-warning .iui-input-icon{
341
- fill:var(--iui-color-foreground-warning);
348
+ .iui-input-container.iui-negative .iui-input-icon{
349
+ fill:var(--iui-color-icon-negative);
342
350
  }
343
- .iui-input-container.iui-warning .iui-message{
344
- color:var(--iui-color-foreground-warning);
351
+ .iui-input-container.iui-negative .iui-message{
352
+ color:var(--iui-color-text-negative);
345
353
  }
346
- .iui-input-container.iui-warning .iui-message a{
354
+ .iui-input-container.iui-negative .iui-message a{
347
355
  text-decoration:underline;
348
- color:var(--iui-color-foreground-warning);
356
+ color:var(--iui-color-text-negative);
349
357
  }
350
- .iui-input-container.iui-warning .iui-message a:hover{
358
+ .iui-input-container.iui-negative .iui-message a:hover{
351
359
  text-decoration:none;
352
- color:var(--iui-color-foreground-warning-hover);
360
+ color:var(--iui-color-text-negative-hover);
353
361
  }
354
- .iui-input-container.iui-warning .iui-input{
362
+ .iui-input-container.iui-negative .iui-input{
355
363
  padding-bottom:calc(var(--iui-size-2xs) - 1px);
356
- border-bottom:var(--iui-size-3xs) solid var(--iui-color-foreground-warning);
364
+ border-bottom:var(--iui-size-3xs) solid var(--iui-color-border-negative);
357
365
  }
358
- .iui-input-container.iui-warning .iui-input[data-iui-size=small]{
366
+ .iui-input-container.iui-negative .iui-input[data-iui-size=small]{
359
367
  padding-bottom:0;
360
368
  }
361
- .iui-input-container.iui-warning .iui-input[data-iui-size=large]{
369
+ .iui-input-container.iui-negative .iui-input[data-iui-size=large]{
362
370
  padding-bottom:calc(var(--iui-size-xs) - 1px);
363
371
  }
364
- .iui-input-container.iui-warning .iui-input:focus{
365
- border-bottom:var(--iui-size-3xs) solid var(--iui-color-foreground-warning);
366
- outline:2px solid var(--iui-color-foreground-warning);
372
+ .iui-input-container.iui-negative .iui-input:focus{
373
+ border-bottom:var(--iui-size-3xs) solid var(--iui-color-border-negative);
374
+ outline:2px solid var(--iui-color-text-negative);
367
375
  outline-offset:-2px;
368
376
  }
369
- .iui-input-container.iui-warning .iui-input-with-icon{
370
- --_iui-input-with-icon-hover-border-color:var(--iui-color-foreground-warning);
371
- --_focus-color:var(--iui-color-foreground-warning);
377
+ .iui-input-container.iui-negative .iui-input-with-icon{
378
+ --_iui-input-with-icon-hover-border-color:var(--iui-color-border-negative);
379
+ --_focus-color:var(--iui-color-text-negative);
372
380
  }
373
- .iui-input-container.iui-warning .iui-select-button{
381
+ .iui-input-container.iui-negative .iui-select-button{
374
382
  border-bottom:transparent;
375
383
  }
376
- .iui-input-container.iui-warning .iui-select-button::after{
384
+ .iui-input-container.iui-negative .iui-select-button::after{
377
385
  content:"";
378
386
  width:100%;
379
387
  position:absolute;
380
388
  bottom:0;
381
389
  left:0;
382
390
  height:var(--iui-size-3xs);
383
- background-color:var(--iui-color-foreground-warning);
391
+ background-color:var(--iui-color-border-negative);
384
392
  }
385
393
 
386
394
  .iui-input-label{
387
395
  font-weight:var(--iui-font-weight-semibold);
388
396
  margin-bottom:var(--iui-size-2xs);
397
+ color:var(--_iui-input-label-color);
389
398
  cursor:default;
390
399
  display:block;
391
400
  }
392
401
  .iui-input-label.iui-required::after{
393
402
  content:"*";
394
403
  margin-left:var(--iui-size-2xs);
395
- color:var(--iui-color-foreground-negative);
404
+ color:var(--iui-color-text-negative);
396
405
  }
406
+ .iui-input-label.iui-disabled{
407
+ --_iui-input-label-color:var(--iui-color-text-disabled);
408
+ }
409
+ .iui-input-container.iui-disabled{
410
+ --_iui-input-label-color:var(--iui-color-text-disabled);
411
+ }
412
+
397
413
  label.iui-input-label{
398
414
  cursor:pointer;
399
415
  }
@@ -411,7 +427,7 @@ label.iui-input-label.iui-disabled{
411
427
  }
412
428
 
413
429
  .iui-notification-marker{
414
- --_iui-notification-marker-color:var(--iui-color-foreground-primary);
430
+ --_iui-notification-marker-color:var(--iui-color-icon-informational);
415
431
  position:relative;
416
432
  }
417
433
  .iui-notification-marker::before{
@@ -465,16 +481,16 @@ label.iui-input-label.iui-disabled{
465
481
  }
466
482
  }
467
483
  .iui-notification-marker[data-iui-variant=positive]{
468
- --_iui-notification-marker-color:var(--iui-color-foreground-positive);
484
+ --_iui-notification-marker-color:var(--iui-color-icon-positive);
469
485
  }
470
486
  .iui-notification-marker[data-iui-variant=warning]{
471
- --_iui-notification-marker-color:var(--iui-color-foreground-warning);
487
+ --_iui-notification-marker-color:var(--iui-color-icon-warning);
472
488
  }
473
489
  .iui-notification-marker[data-iui-variant=negative]{
474
- --_iui-notification-marker-color:var(--iui-color-foreground-negative);
490
+ --_iui-notification-marker-color:var(--iui-color-icon-negative);
475
491
  }
476
- .iui-notification-marker[data-iui-variant=accessory]{
477
- --_iui-notification-marker-color:var(--iui-color-foreground-accessory);
492
+ .iui-notification-marker[data-iui-variant=white]{
493
+ --_iui-notification-marker-color:var(--iui-color-white);
478
494
  }
479
495
  .iui-popover.tippy-box{
480
496
  all:revert;
package/css/workflow-diagram.css CHANGED
@@ -18,9 +18,9 @@
18
18
  --_iui-workflow-diagram-circle-background-color:var(--iui-color-background-positive);
19
19
  --_iui-workflow-diagram-circle-border-color:var(--iui-color-background-positive);
20
20
  --_iui-workflow-diagram-circle-border-radius:var(--iui-border-radius-1);
21
- --_iui-workflow-diagram-circle-text-color:var(--iui-color-foreground-accessory);
22
- --_iui-workflow-diagram-track-before-color:var(--iui-color-foreground-positive);
23
- --_iui-workflow-diagram-track-after-color:var(--iui-color-foreground-positive);
21
+ --_iui-workflow-diagram-circle-text-color:var(--iui-color-white);
22
+ --_iui-workflow-diagram-track-before-color:var(--iui-color-border-positive);
23
+ --_iui-workflow-diagram-track-after-color:var(--iui-color-border-positive);
24
24
  flex:1;
25
25
  align-items:center;
26
26
  display:flex;
@@ -34,10 +34,10 @@
34
34
  color:var(--_iui-workflow-diagram-circle-text-color);
35
35
  }
36
36
  .iui-workflow-diagram-step:first-of-type, .iui-workflow-diagram-step:last-of-type{
37
- --_iui-workflow-diagram-circle-background-color:var(--iui-color-background-1);
38
- --_iui-workflow-diagram-circle-border-color:var(--iui-color-foreground-positive);
37
+ --_iui-workflow-diagram-circle-background-color:var(--iui-color-background);
38
+ --_iui-workflow-diagram-circle-border-color:var(--iui-color-border-positive);
39
39
  --_iui-workflow-diagram-circle-border-radius:var(--iui-size-s);
40
- --_iui-workflow-diagram-circle-text-color:var(--iui-color-foreground-positive);
40
+ --_iui-workflow-diagram-circle-text-color:var(--iui-color-text-positive);
41
41
  }
42
42
  .iui-workflow-diagram-step::before, .iui-workflow-diagram-step::after{
43
43
  content:"";
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@itwin/itwinui-css",
3
- "version": "1.0.0-dev.12",
3
+ "version": "1.0.0-dev.14",
4
4
  "author": "Bentley Systems",
5
5
  "license": "MIT",
6
6
  "main": "css/all.css",