@itwin/itwinui-css 0.51.0 → 0.53.1

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 (77) hide show
  1. package/css/alert.css +44 -44
  2. package/css/all.css +1797 -982
  3. package/css/badge.css +1 -1
  4. package/css/blockquote.css +2 -2
  5. package/css/breadcrumbs.css +12 -12
  6. package/css/button.css +40 -39
  7. package/css/carousel.css +24 -36
  8. package/css/code.css +5 -5
  9. package/css/color-picker.css +14 -10
  10. package/css/date-picker.css +402 -46
  11. package/css/expandable-block.css +19 -19
  12. package/css/fieldset.css +4 -4
  13. package/css/file-upload.css +11 -11
  14. package/css/footer.css +2 -2
  15. package/css/global.css +539 -208
  16. package/css/header.css +50 -38
  17. package/css/icon.css +24 -24
  18. package/css/information-panel.css +15 -8
  19. package/css/inputs.css +72 -72
  20. package/css/keyboard.css +4 -4
  21. package/css/location-marker.css +9 -9
  22. package/css/menu.css +25 -12
  23. package/css/modal.css +65 -6
  24. package/css/notification-marker.css +28 -28
  25. package/css/progress-indicator.css +32 -32
  26. package/css/side-navigation.css +18 -18
  27. package/css/skip-to-content.css +1 -1
  28. package/css/slider.css +13 -13
  29. package/css/surface.css +19 -0
  30. package/css/table.css +78 -74
  31. package/css/tabs.css +23 -23
  32. package/css/tag.css +4 -4
  33. package/css/text.css +1 -1
  34. package/css/tile.css +35 -35
  35. package/css/time-picker.css +15 -15
  36. package/css/toast-notification.css +34 -34
  37. package/css/tooltip.css +3 -1
  38. package/css/tree.css +7 -7
  39. package/css/user-icon.css +50 -28
  40. package/css/wizard.css +26 -26
  41. package/package.json +1 -1
  42. package/scss/button/button-group.scss +5 -3
  43. package/scss/button/classes.scss +4 -0
  44. package/scss/carousel/carousel.scss +22 -28
  45. package/scss/classes.scss +1 -0
  46. package/scss/color-picker/color-picker.scss +2 -2
  47. package/scss/date-picker/classes.scss +20 -0
  48. package/scss/date-picker/date-picker.scss +194 -33
  49. package/scss/fieldset/fieldset.scss +1 -1
  50. package/scss/header/header.scss +15 -10
  51. package/scss/index.scss +1 -0
  52. package/scss/information-panel/information-panel.scss +10 -3
  53. package/scss/menu/classes.scss +2 -1
  54. package/scss/menu/menu.scss +8 -11
  55. package/scss/modal/classes.scss +8 -0
  56. package/scss/modal/modal.scss +81 -6
  57. package/scss/progress-indicator/linear.scss +1 -1
  58. package/scss/progress-indicator/radial.scss +1 -1
  59. package/scss/side-navigation/side-navigation.scss +5 -5
  60. package/scss/slider/slider.scss +2 -2
  61. package/scss/style/elevation.scss +5 -5
  62. package/scss/style/global.scss +32 -21
  63. package/scss/style/mixins.scss +1 -1
  64. package/scss/style/ripple.scss +1 -1
  65. package/scss/style/speed.scss +1 -0
  66. package/scss/style/theme.scss +248 -65
  67. package/scss/surface/classes.scss +7 -0
  68. package/scss/surface/index.scss +3 -0
  69. package/scss/surface/surface.scss +18 -0
  70. package/scss/table/column-filter.scss +2 -2
  71. package/scss/table/table.scss +3 -3
  72. package/scss/tile/tile.scss +5 -5
  73. package/scss/time-picker/time-picker.scss +2 -2
  74. package/scss/tooltip/tooltip.scss +2 -1
  75. package/scss/user-icon/sizes.scss +8 -0
  76. package/scss/user-icon/user-icon.scss +40 -21
  77. package/scss/wizard/wizard.scss +1 -1
package/css/date-picker.css CHANGED
@@ -3,25 +3,31 @@
3
3
  * See LICENSE.md in the project root for license terms and full copyright notice.
4
4
  *--------------------------------------------------------------------------------------------*/
5
5
  .iui-date-picker{
6
- margin:0;
7
- padding:0;
8
- border:none;
9
- vertical-align:baseline;
10
- box-shadow:0 1px 5px rgba(0, 0, 0, 0.25);
11
- background-color:#FFF;
12
- color:rgba(0, 0, 0, 0.8);
13
- background-color:var(--iui-color-background-1);
6
+ --iui-surface-background-color:var(--iui-color-background-1);
7
+ --iui-surface-border-radius:0;
8
+ --iui-surface-elevation:0 1px 5px rgba(0, 0, 0, 0.25);
9
+ background-color:var(--iui-surface-background-color);
10
+ border-radius:var(--iui-surface-border-radius);
11
+ box-shadow:var(--iui-surface-elevation);
12
+ box-sizing:border-box;
14
13
  color:var(--iui-text-color);
15
- box-shadow:0 1px 5px rgba(0, 0, 0, 0.25);
16
14
  -webkit-user-select:none;
17
15
  -moz-user-select:none;
18
16
  -ms-user-select:none;
19
17
  user-select:none;
20
- text-align:center;
21
- height:286px;
22
- display:inline-flex;
23
- background-color:#FFF;
24
- background-color:var(--iui-color-background-1);
18
+ display:-ms-inline-grid;
19
+ display:inline-grid;
20
+ -ms-grid-columns:1fr auto;
21
+ grid-template-columns:1fr auto;
22
+ }
23
+ @media (forced-colors: active){
24
+ .iui-date-picker{
25
+ border:1px solid transparent;
26
+ }
27
+ }
28
+ .iui-date-picker .iui-time-picker{
29
+ height:0;
30
+ min-height:100%;
25
31
  }
26
32
 
27
33
  .iui-calendar-month-year{
@@ -32,11 +38,9 @@
32
38
  padding:0 4px;
33
39
  box-sizing:border-box;
34
40
  font-weight:700;
35
- background-color:#FFF;
36
- background-color:var(--iui-color-background-1);
41
+ gap:4px;
37
42
  }
38
43
  .iui-calendar-month-year > span{
39
- margin:0 4px;
40
44
  width:156px;
41
45
  white-space:nowrap;
42
46
  display:inline-flex;
@@ -55,81 +59,433 @@
55
59
  }
56
60
 
57
61
  .iui-calendar-weekdays{
58
- line-height:33px;
62
+ line-height:36px;
59
63
  display:flex;
60
- justify-content:space-evenly;
61
- align-items:center;
62
64
  padding:0 8px;
63
65
  font-weight:700;
64
- background-color:#F8F9FB;
66
+ background-color:#f9f9fb;
65
67
  background-color:var(--iui-color-background-2);
66
68
  }
67
69
  .iui-calendar-weekdays > div{
68
70
  white-space:nowrap;
69
71
  overflow:hidden;
70
- width:32px;
72
+ width:40px;
71
73
  text-align:center;
72
74
  }
73
75
 
74
76
  .iui-calendar-week{
75
77
  white-space:nowrap;
76
- height:33px;
78
+ line-height:36px;
77
79
  display:flex;
78
- align-items:center;
79
- justify-content:space-evenly;
80
80
  padding:0 8px;
81
+ margin-bottom:2px;
81
82
  }
82
83
 
83
- .iui-calendar-day{
84
+ .iui-calendar-day, .iui-calendar-day-today{
84
85
  cursor:pointer;
85
- display:inline-block;
86
- width:33px;
87
- line-height:33px;
86
+ text-align:center;
87
+ width:40px;
88
+ height:36px;
88
89
  border-radius:3px;
90
+ font-variant-numeric:tabular-nums;
89
91
  }
90
- .iui-calendar-day:focus-visible{
92
+ .iui-calendar-day:focus-visible, .iui-calendar-day-today:focus-visible{
91
93
  outline:1px solid var(--iui-color-foreground-primary);
92
94
  outline-offset:-1px;
93
95
  }
94
96
  @supports not selector(*:focus-visible){
95
- .iui-calendar-day:focus{
97
+ .iui-calendar-day:focus, .iui-calendar-day-today:focus{
96
98
  outline:1px solid var(--iui-color-foreground-primary);
97
99
  outline-offset:-1px;
98
100
  }
99
101
  }
100
- .iui-calendar-day.iui-today{
102
+ .iui-calendar-day:hover, .iui-calendar-day-today:hover{
101
103
  font-weight:600;
102
- border-radius:50%;
103
- background-color:rgba(0, 0, 0, 0.1);
104
- background-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-6));
104
+ color:#008ae0;
105
+ background-color:rgba(0, 138, 224, 0.1);
106
+ color:var(--iui-color-foreground-primary);
107
+ background-color:rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-6));
105
108
  }
106
- .iui-calendar-day:hover{
109
+ .iui-calendar-day-today{
110
+ position:relative;
107
111
  font-weight:600;
108
- color:#008BE1;
109
- background-color:rgba(0, 139, 225, 0.1);
112
+ }
113
+ .iui-calendar-day-today::before{
114
+ content:"";
115
+ position:absolute;
116
+ display:block;
117
+ width:32px;
118
+ height:32px;
119
+ border-radius:9999px;
120
+ box-sizing:border-box;
121
+ top:50%;
122
+ left:50%;
123
+ transform:translate(-50%, -50%);
124
+ border:2px solid rgba(0, 0, 0, 0.2);
125
+ border:2px solid rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-5));
126
+ }
127
+ .iui-calendar-day-today:hover{
128
+ background-color:initial;
129
+ color:#008ae0;
110
130
  color:var(--iui-color-foreground-primary);
131
+ }
132
+ .iui-calendar-day-today:hover::before{
133
+ background-color:rgba(0, 138, 224, 0.1);
111
134
  background-color:rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-6));
112
135
  }
113
- .iui-calendar-day.iui-selected{
114
- font-weight:600;
136
+
137
+ .iui-calendar-day-selected, .iui-calendar-day-selected-today{
138
+ cursor:pointer;
139
+ text-align:center;
140
+ width:40px;
141
+ height:36px;
115
142
  border-radius:3px;
116
- cursor:default;
117
- background-color:#008BE1;
118
- color:#FFF;
143
+ font-variant-numeric:tabular-nums;
144
+ font-weight:600;
145
+ background-color:#008ae0;
146
+ color:white;
119
147
  background-color:var(--iui-color-background-primary);
120
148
  color:var(--iui-color-foreground-accessory);
149
+ cursor:default;
150
+ }
151
+ .iui-calendar-day-selected:focus-visible, .iui-calendar-day-selected-today:focus-visible{
152
+ outline:1px solid var(--iui-color-foreground-primary);
153
+ outline-offset:-1px;
121
154
  }
122
- .iui-calendar-day.iui-selected:focus-visible{
155
+ @supports not selector(*:focus-visible){
156
+ .iui-calendar-day-selected:focus, .iui-calendar-day-selected-today:focus{
157
+ outline:1px solid var(--iui-color-foreground-primary);
158
+ outline-offset:-1px;
159
+ }
160
+ }
161
+ .iui-calendar-day-selected:focus-visible, .iui-calendar-day-selected-today:focus-visible{
123
162
  outline:1px solid var(--iui-color-foreground-accessory);
124
163
  outline-offset:-3px;
125
164
  }
126
165
  @supports not selector(*:focus-visible){
127
- .iui-calendar-day.iui-selected:focus{
166
+ .iui-calendar-day-selected:focus, .iui-calendar-day-selected-today:focus{
128
167
  outline:1px solid var(--iui-color-foreground-accessory);
129
168
  outline-offset:-3px;
130
169
  }
131
170
  }
132
- .iui-calendar-day.iui-outside-month{
171
+ .iui-calendar-day-selected-today{
172
+ position:relative;
173
+ font-weight:600;
174
+ }
175
+ .iui-calendar-day-selected-today::before{
176
+ content:"";
177
+ position:absolute;
178
+ display:block;
179
+ width:32px;
180
+ height:32px;
181
+ border-radius:9999px;
182
+ box-sizing:border-box;
183
+ top:50%;
184
+ left:50%;
185
+ transform:translate(-50%, -50%);
186
+ border:2px solid rgba(0, 0, 0, 0.2);
187
+ border:2px solid rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-5));
188
+ }
189
+ .iui-calendar-day-selected-today:hover{
190
+ background-color:initial;
191
+ color:#008ae0;
192
+ color:var(--iui-color-foreground-primary);
193
+ }
194
+ .iui-calendar-day-selected-today:hover::before{
195
+ background-color:rgba(0, 138, 224, 0.1);
196
+ background-color:rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-6));
197
+ }
198
+ .iui-calendar-day-selected-today:hover{
199
+ background-color:#008ae0;
200
+ color:white;
201
+ background-color:var(--iui-color-background-primary);
202
+ color:var(--iui-color-foreground-accessory);
203
+ }
204
+ .iui-calendar-day-selected-today:hover::before{
205
+ background-color:initial;
206
+ background-color:initial;
207
+ }
208
+ .iui-calendar-day-selected-today::before{
209
+ border-color:rgba(255, 255, 255, 0.4);
210
+ border-color:rgba(var(--iui-color-foreground-accessory-rgb), var(--iui-opacity-4));
211
+ }
212
+
213
+ .iui-calendar-day-outside-month, .iui-calendar-day-outside-month-today{
214
+ cursor:pointer;
215
+ text-align:center;
216
+ width:40px;
217
+ height:36px;
218
+ border-radius:3px;
219
+ font-variant-numeric:tabular-nums;
133
220
  color:rgba(0, 0, 0, 0.4);
134
221
  color:var(--iui-text-color-muted);
222
+ }
223
+ .iui-calendar-day-outside-month:focus-visible, .iui-calendar-day-outside-month-today:focus-visible{
224
+ outline:1px solid var(--iui-color-foreground-primary);
225
+ outline-offset:-1px;
226
+ }
227
+ @supports not selector(*:focus-visible){
228
+ .iui-calendar-day-outside-month:focus, .iui-calendar-day-outside-month-today:focus{
229
+ outline:1px solid var(--iui-color-foreground-primary);
230
+ outline-offset:-1px;
231
+ }
232
+ }
233
+ .iui-calendar-day-outside-month:hover, .iui-calendar-day-outside-month-today:hover{
234
+ font-weight:600;
235
+ color:#008ae0;
236
+ background-color:rgba(0, 138, 224, 0.1);
237
+ color:var(--iui-color-foreground-primary);
238
+ background-color:rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-6));
239
+ }
240
+ .iui-calendar-day-outside-month-today{
241
+ position:relative;
242
+ font-weight:600;
243
+ }
244
+ .iui-calendar-day-outside-month-today::before{
245
+ content:"";
246
+ position:absolute;
247
+ display:block;
248
+ width:32px;
249
+ height:32px;
250
+ border-radius:9999px;
251
+ box-sizing:border-box;
252
+ top:50%;
253
+ left:50%;
254
+ transform:translate(-50%, -50%);
255
+ border:2px solid rgba(0, 0, 0, 0.2);
256
+ border:2px solid rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-5));
257
+ }
258
+ .iui-calendar-day-outside-month-today:hover{
259
+ background-color:initial;
260
+ color:#008ae0;
261
+ color:var(--iui-color-foreground-primary);
262
+ }
263
+ .iui-calendar-day-outside-month-today:hover::before{
264
+ background-color:rgba(0, 138, 224, 0.1);
265
+ background-color:rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-6));
266
+ }
267
+
268
+ .iui-calendar-day-range-start, .iui-calendar-day-range-start-today{
269
+ cursor:pointer;
270
+ text-align:center;
271
+ width:40px;
272
+ height:36px;
273
+ border-radius:3px;
274
+ font-variant-numeric:tabular-nums;
275
+ font-weight:600;
276
+ background-color:#008ae0;
277
+ color:white;
278
+ background-color:var(--iui-color-background-primary);
279
+ color:var(--iui-color-foreground-accessory);
280
+ border-top-right-radius:0;
281
+ border-bottom-right-radius:0;
282
+ cursor:pointer;
283
+ }
284
+ .iui-calendar-day-range-start:focus-visible, .iui-calendar-day-range-start-today:focus-visible{
285
+ outline:1px solid var(--iui-color-foreground-primary);
286
+ outline-offset:-1px;
287
+ }
288
+ @supports not selector(*:focus-visible){
289
+ .iui-calendar-day-range-start:focus, .iui-calendar-day-range-start-today:focus{
290
+ outline:1px solid var(--iui-color-foreground-primary);
291
+ outline-offset:-1px;
292
+ }
293
+ }
294
+ .iui-calendar-day-range-start:focus-visible, .iui-calendar-day-range-start-today:focus-visible{
295
+ outline:1px solid var(--iui-color-foreground-accessory);
296
+ outline-offset:-3px;
297
+ }
298
+ @supports not selector(*:focus-visible){
299
+ .iui-calendar-day-range-start:focus, .iui-calendar-day-range-start-today:focus{
300
+ outline:1px solid var(--iui-color-foreground-accessory);
301
+ outline-offset:-3px;
302
+ }
303
+ }
304
+ .iui-calendar-day-range-start-today{
305
+ position:relative;
306
+ font-weight:600;
307
+ }
308
+ .iui-calendar-day-range-start-today::before{
309
+ content:"";
310
+ position:absolute;
311
+ display:block;
312
+ width:32px;
313
+ height:32px;
314
+ border-radius:9999px;
315
+ box-sizing:border-box;
316
+ top:50%;
317
+ left:50%;
318
+ transform:translate(-50%, -50%);
319
+ border:2px solid rgba(0, 0, 0, 0.2);
320
+ border:2px solid rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-5));
321
+ }
322
+ .iui-calendar-day-range-start-today:hover{
323
+ background-color:initial;
324
+ color:#008ae0;
325
+ color:var(--iui-color-foreground-primary);
326
+ }
327
+ .iui-calendar-day-range-start-today:hover::before{
328
+ background-color:rgba(0, 138, 224, 0.1);
329
+ background-color:rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-6));
330
+ }
331
+ .iui-calendar-day-range-start-today:hover{
332
+ background-color:#008ae0;
333
+ color:white;
334
+ background-color:var(--iui-color-background-primary);
335
+ color:var(--iui-color-foreground-accessory);
336
+ }
337
+ .iui-calendar-day-range-start-today:hover::before{
338
+ background-color:initial;
339
+ background-color:initial;
340
+ }
341
+ .iui-calendar-day-range-start-today::before{
342
+ border-color:rgba(255, 255, 255, 0.4);
343
+ border-color:rgba(var(--iui-color-foreground-accessory-rgb), var(--iui-opacity-4));
344
+ }
345
+
346
+ .iui-calendar-day-range-end, .iui-calendar-day-range-end-today{
347
+ cursor:pointer;
348
+ text-align:center;
349
+ width:40px;
350
+ height:36px;
351
+ border-radius:3px;
352
+ font-variant-numeric:tabular-nums;
353
+ font-weight:600;
354
+ background-color:#008ae0;
355
+ color:white;
356
+ background-color:var(--iui-color-background-primary);
357
+ color:var(--iui-color-foreground-accessory);
358
+ border-top-left-radius:0;
359
+ border-bottom-left-radius:0;
360
+ }
361
+ .iui-calendar-day-range-end:focus-visible, .iui-calendar-day-range-end-today:focus-visible{
362
+ outline:1px solid var(--iui-color-foreground-primary);
363
+ outline-offset:-1px;
364
+ }
365
+ @supports not selector(*:focus-visible){
366
+ .iui-calendar-day-range-end:focus, .iui-calendar-day-range-end-today:focus{
367
+ outline:1px solid var(--iui-color-foreground-primary);
368
+ outline-offset:-1px;
369
+ }
370
+ }
371
+ .iui-calendar-day-range-end:focus-visible, .iui-calendar-day-range-end-today:focus-visible{
372
+ outline:1px solid var(--iui-color-foreground-accessory);
373
+ outline-offset:-3px;
374
+ }
375
+ @supports not selector(*:focus-visible){
376
+ .iui-calendar-day-range-end:focus, .iui-calendar-day-range-end-today:focus{
377
+ outline:1px solid var(--iui-color-foreground-accessory);
378
+ outline-offset:-3px;
379
+ }
380
+ }
381
+ .iui-calendar-day-range-end-today{
382
+ position:relative;
383
+ font-weight:600;
384
+ }
385
+ .iui-calendar-day-range-end-today::before{
386
+ content:"";
387
+ position:absolute;
388
+ display:block;
389
+ width:32px;
390
+ height:32px;
391
+ border-radius:9999px;
392
+ box-sizing:border-box;
393
+ top:50%;
394
+ left:50%;
395
+ transform:translate(-50%, -50%);
396
+ border:2px solid rgba(0, 0, 0, 0.2);
397
+ border:2px solid rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-5));
398
+ }
399
+ .iui-calendar-day-range-end-today:hover{
400
+ background-color:initial;
401
+ color:#008ae0;
402
+ color:var(--iui-color-foreground-primary);
403
+ }
404
+ .iui-calendar-day-range-end-today:hover::before{
405
+ background-color:rgba(0, 138, 224, 0.1);
406
+ background-color:rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-6));
407
+ }
408
+ .iui-calendar-day-range-end-today:hover{
409
+ background-color:#008ae0;
410
+ color:white;
411
+ background-color:var(--iui-color-background-primary);
412
+ color:var(--iui-color-foreground-accessory);
413
+ }
414
+ .iui-calendar-day-range-end-today:hover::before{
415
+ background-color:initial;
416
+ background-color:initial;
417
+ }
418
+ .iui-calendar-day-range-end-today::before{
419
+ border-color:rgba(255, 255, 255, 0.4);
420
+ border-color:rgba(var(--iui-color-foreground-accessory-rgb), var(--iui-opacity-4));
421
+ }
422
+
423
+ .iui-calendar-day-range, .iui-calendar-day-range-today{
424
+ cursor:pointer;
425
+ text-align:center;
426
+ width:40px;
427
+ height:36px;
428
+ border-radius:3px;
429
+ font-variant-numeric:tabular-nums;
430
+ border-radius:0;
431
+ background-color:rgba(0, 138, 224, 0.2);
432
+ color:rgba(0, 0, 0, 0.8);
433
+ background-color:rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-5));
434
+ color:var(--iui-text-color);
435
+ }
436
+ .iui-calendar-day-range:focus-visible, .iui-calendar-day-range-today:focus-visible{
437
+ outline:1px solid var(--iui-color-foreground-primary);
438
+ outline-offset:-1px;
439
+ }
440
+ @supports not selector(*:focus-visible){
441
+ .iui-calendar-day-range:focus, .iui-calendar-day-range-today:focus{
442
+ outline:1px solid var(--iui-color-foreground-primary);
443
+ outline-offset:-1px;
444
+ }
445
+ }
446
+ .iui-calendar-day-range:hover, .iui-calendar-day-range-today:hover{
447
+ font-weight:600;
448
+ background-color:rgba(0, 138, 224, 0.4);
449
+ background-color:rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-4));
450
+ }
451
+ .iui-calendar-day-range-today{
452
+ position:relative;
453
+ font-weight:600;
454
+ }
455
+ .iui-calendar-day-range-today::before{
456
+ content:"";
457
+ position:absolute;
458
+ display:block;
459
+ width:32px;
460
+ height:32px;
461
+ border-radius:9999px;
462
+ box-sizing:border-box;
463
+ top:50%;
464
+ left:50%;
465
+ transform:translate(-50%, -50%);
466
+ border:2px solid rgba(0, 0, 0, 0.2);
467
+ border:2px solid rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-5));
468
+ }
469
+ .iui-calendar-day-range-today:hover{
470
+ background-color:initial;
471
+ color:#008ae0;
472
+ color:var(--iui-color-foreground-primary);
473
+ }
474
+ .iui-calendar-day-range-today:hover::before{
475
+ background-color:rgba(0, 138, 224, 0.1);
476
+ background-color:rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-6));
477
+ }
478
+ .iui-calendar-day-range-today:hover{
479
+ background-color:rgba(0, 138, 224, 0.2);
480
+ color:rgba(0, 0, 0, 0.8);
481
+ background-color:rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-5));
482
+ color:var(--iui-text-color);
483
+ }
484
+ .iui-calendar-day-range-today:hover::before{
485
+ background-color:rgba(0, 138, 224, 0.4);
486
+ background-color:rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-4));
487
+ }
488
+ .iui-calendar-day-range-today::before{
489
+ border-color:rgba(0, 138, 224, 0.4);
490
+ border-color:rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-4));
135
491
  }
package/css/expandable-block.css CHANGED
@@ -11,7 +11,7 @@
11
11
  flex-direction:column;
12
12
  box-sizing:border-box;
13
13
  width:100%;
14
- background-color:#FFF;
14
+ background-color:white;
15
15
  background-color:var(--iui-color-background-1);
16
16
  }
17
17
  .iui-expandable-block > .iui-header{
@@ -24,9 +24,9 @@
24
24
  -moz-user-select:none;
25
25
  -ms-user-select:none;
26
26
  user-select:none;
27
- border:1px solid #EEF0F3;
28
- border-bottom-color:#DCE0E3;
29
- background-color:#EEF0F3;
27
+ border:1px solid #edeff2;
28
+ border-bottom-color:#dde1e4;
29
+ background-color:#edeff2;
30
30
  border:1px solid var(--iui-color-background-3);
31
31
  border-bottom-color:var(--iui-color-background-4);
32
32
  background-color:var(--iui-color-background-3);
@@ -68,19 +68,19 @@
68
68
  fill:var(--iui-icons-color);
69
69
  }
70
70
  .iui-expandable-block > .iui-header > .iui-status-icon.iui-informational{
71
- fill:#008BE1;
71
+ fill:#008ae0;
72
72
  fill:var(--iui-icons-color-primary);
73
73
  }
74
74
  .iui-expandable-block > .iui-header > .iui-status-icon.iui-positive{
75
- fill:#53A21A;
75
+ fill:#53a21a;
76
76
  fill:var(--iui-icons-color-positive);
77
77
  }
78
78
  .iui-expandable-block > .iui-header > .iui-status-icon.iui-warning{
79
- fill:#F18B12;
79
+ fill:#f18d13;
80
80
  fill:var(--iui-icons-color-warning);
81
81
  }
82
82
  .iui-expandable-block > .iui-header > .iui-status-icon.iui-negative{
83
- fill:#D30A0A;
83
+ fill:#d10a0a;
84
84
  fill:var(--iui-icons-color-negative);
85
85
  }
86
86
  .iui-expandable-block > .iui-header .iui-expandable-block-label{
@@ -124,9 +124,9 @@
124
124
  .iui-expandable-block .iui-expandable-content{
125
125
  overflow:hidden;
126
126
  box-sizing:border-box;
127
- border-bottom:1px solid #DCE0E3;
128
- border-right:1px solid #DCE0E3;
129
- border-left:1px solid #DCE0E3;
127
+ border-bottom:1px solid #dde1e4;
128
+ border-right:1px solid #dde1e4;
129
+ border-left:1px solid #dde1e4;
130
130
  border-bottom:1px solid var(--iui-color-background-4);
131
131
  border-right:1px solid var(--iui-color-background-4);
132
132
  border-left:1px solid var(--iui-color-background-4);
@@ -157,7 +157,7 @@
157
157
  padding:11px 12px;
158
158
  }
159
159
  .iui-expandable-block:hover > .iui-header{
160
- background-color:#DCE0E3;
160
+ background-color:#dde1e4;
161
161
  background-color:var(--iui-color-background-4);
162
162
  }
163
163
  .iui-expandable-block:hover > .iui-header > .iui-icon{
@@ -166,7 +166,7 @@
166
166
  }
167
167
  .iui-expandable-block:hover > .iui-header .iui-caption,
168
168
  .iui-expandable-block:hover > .iui-header .iui-title{
169
- color:#000;
169
+ color:black;
170
170
  color:var(--iui-color-foreground-body);
171
171
  }
172
172
  @media (prefers-reduced-motion: no-preference){
@@ -176,21 +176,21 @@
176
176
  }
177
177
  }
178
178
  .iui-expandable-block.iui-expanded > .iui-header{
179
- background-color:#EEF0F3;
180
- border-left:1px solid #DCE0E3;
181
- border-top:1px solid #DCE0E3;
182
- border-right:1px solid #DCE0E3;
179
+ background-color:#edeff2;
180
+ border-left:1px solid #dde1e4;
181
+ border-top:1px solid #dde1e4;
182
+ border-right:1px solid #dde1e4;
183
183
  background-color:var(--iui-color-background-3);
184
184
  border-left:1px solid var(--iui-color-background-4);
185
185
  border-top:1px solid var(--iui-color-background-4);
186
186
  border-right:1px solid var(--iui-color-background-4);
187
187
  }
188
188
  .iui-expandable-block.iui-expanded > .iui-header:hover{
189
- background-color:#DCE0E3;
189
+ background-color:#dde1e4;
190
190
  background-color:var(--iui-color-background-4);
191
191
  }
192
192
  .iui-expandable-block.iui-expanded > .iui-header:hover{
193
- background-color:#DCE0E3;
193
+ background-color:#dde1e4;
194
194
  background-color:var(--iui-color-background-4);
195
195
  }
196
196
  .iui-expandable-block.iui-expanded > .iui-header > .iui-icon{
package/css/fieldset.css CHANGED
@@ -9,9 +9,9 @@
9
9
  vertical-align:baseline;
10
10
  padding:11px 12px;
11
11
  border-radius:3px;
12
- border:1px solid #DCE0E3;
13
- background-color:#FFF;
14
- border:1px solid var(--iui-color-background-4);
12
+ border:1px solid #c7ccd1;
13
+ background-color:white;
14
+ border:1px solid var(--iui-color-background-border);
15
15
  background-color:var(--iui-color-background-1);
16
16
  }
17
17
  .iui-fieldset legend{
@@ -22,7 +22,7 @@
22
22
  -moz-user-select:none;
23
23
  -ms-user-select:none;
24
24
  user-select:none;
25
- background-color:#DCE0E3;
25
+ background-color:#dde1e4;
26
26
  color:rgba(0, 0, 0, 0.8);
27
27
  background-color:var(--iui-color-background-4);
28
28
  color:var(--iui-text-color);