@itwin/itwinui-css 0.43.0 → 0.45.0

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 (71) hide show
  1. package/css/alert.css +46 -61
  2. package/css/all.css +1065 -907
  3. package/css/breadcrumbs.css +7 -20
  4. package/css/button.css +48 -91
  5. package/css/carousel.css +97 -0
  6. package/css/code.css +6 -9
  7. package/css/color-picker.css +14 -14
  8. package/css/date-picker.css +91 -85
  9. package/css/expandable-block.css +13 -9
  10. package/css/file-upload.css +4 -3
  11. package/css/footer.css +7 -20
  12. package/css/global.css +7 -9
  13. package/css/header.css +4 -24
  14. package/css/inputs.css +121 -89
  15. package/css/popover.css +12 -0
  16. package/css/side-navigation.css +1 -16
  17. package/css/slider.css +7 -10
  18. package/css/table.css +160 -29
  19. package/css/tabs.css +8 -3
  20. package/css/tag.css +17 -18
  21. package/css/tile.css +340 -314
  22. package/css/time-picker.css +26 -18
  23. package/css/toast-notification.css +12 -49
  24. package/css/toggle-switch.css +7 -4
  25. package/css/tree.css +12 -8
  26. package/css/wizard.css +4 -4
  27. package/package.json +10 -9
  28. package/scss/alert/alert.scss +4 -2
  29. package/scss/button/borderless.scss +10 -26
  30. package/scss/button/button-group.scss +2 -2
  31. package/scss/button/cta.scss +10 -25
  32. package/scss/button/default.scss +22 -32
  33. package/scss/button/high-visibility.scss +10 -25
  34. package/scss/carousel/carousel.scss +119 -0
  35. package/scss/carousel/classes.scss +15 -0
  36. package/scss/carousel/index.scss +3 -0
  37. package/scss/classes.scss +2 -0
  38. package/scss/color-picker/color-picker.scss +2 -25
  39. package/scss/date-picker/classes.scss +20 -0
  40. package/scss/date-picker/date-picker.scss +88 -100
  41. package/scss/expandable-block/block.scss +1 -0
  42. package/scss/file-upload/file-upload.scss +2 -2
  43. package/scss/footer/footer.scss +0 -2
  44. package/scss/header/header.scss +1 -15
  45. package/scss/index.scss +2 -0
  46. package/scss/inputs/checkbox-radio.scss +28 -18
  47. package/scss/inputs/checkbox.scss +9 -8
  48. package/scss/inputs/input.scss +1 -14
  49. package/scss/inputs/labeled-inputs.scss +2 -1
  50. package/scss/inputs/radio-tile.scss +9 -4
  51. package/scss/inputs/select.scss +2 -1
  52. package/scss/popover/classes.scss +7 -0
  53. package/scss/popover/index.scss +3 -0
  54. package/scss/popover/popover.scss +22 -0
  55. package/scss/side-navigation/side-navigation.scss +1 -33
  56. package/scss/slider/slider.scss +1 -2
  57. package/scss/style/mixins.scss +14 -16
  58. package/scss/table/classes.scss +12 -0
  59. package/scss/table/paginator.scss +39 -31
  60. package/scss/table/table.scss +1 -1
  61. package/scss/tabs/default.scss +5 -0
  62. package/scss/tabs/tabs.scss +1 -8
  63. package/scss/tag/tag.scss +9 -1
  64. package/scss/tile/classes.scss +28 -0
  65. package/scss/tile/tile.scss +230 -235
  66. package/scss/time-picker/time-picker.scss +1 -0
  67. package/scss/toast-notification/categories.scss +5 -2
  68. package/scss/toast-notification/toast.scss +0 -1
  69. package/scss/toggle-switch/toggle-switch.scss +7 -3
  70. package/scss/tree/tree.scss +2 -14
  71. package/scss/wizard/wizard.scss +3 -3
package/css/breadcrumbs.css CHANGED
@@ -30,20 +30,18 @@
30
30
  max-width:192px;
31
31
  margin:0 12px; }
32
32
  .iui-breadcrumbs-item a{
33
+ border-radius:3px;
33
34
  text-decoration:none;
34
35
  cursor:pointer;
35
36
  color:#008BE1;
36
37
  color:var(--iui-color-foreground-primary); }
37
- .iui-breadcrumbs-item a:focus{
38
- outline:0;
39
- box-shadow:rgba(0, 139, 225, 0.2) 0 0 0 2px;
40
- box-shadow:var(--iui-focus-box-shadow); }
41
- .iui-breadcrumbs-item a:focus:not(:focus-visible){
42
- box-shadow:none; }
43
38
  .iui-breadcrumbs-item a:focus-visible{
44
- outline:0;
45
- box-shadow:rgba(0, 139, 225, 0.2) 0 0 0 2px;
46
- box-shadow:var(--iui-focus-box-shadow); }
39
+ outline:1px solid var(--iui-color-foreground-primary);
40
+ outline-offset:2px; }
41
+ @supports not selector(*:focus-visible){
42
+ .iui-breadcrumbs-item a:focus{
43
+ outline:1px solid var(--iui-color-foreground-primary);
44
+ outline-offset:2px; } }
47
45
  .iui-breadcrumbs-item a:hover{
48
46
  color:#006bae;
49
47
  color:var(--iui-color-foreground-primary-overlay);
@@ -58,17 +56,6 @@
58
56
  .iui-breadcrumbs-item .iui-button > .iui-button-icon:only-child{
59
57
  margin-left:3px;
60
58
  margin-right:3px; }
61
- .iui-breadcrumbs-item .iui-button:focus{
62
- background-color:rgba(0, 0, 0, 0.1);
63
- border-color:transparent;
64
- background-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-6));
65
- border-color:transparent; }
66
- .iui-breadcrumbs-item .iui-button:focus:where(:not(:focus-visible)){
67
- border-color:transparent;
68
- background-color:transparent; }
69
- .iui-breadcrumbs-item .iui-button:focus:where(:not(:focus-visible)) > .iui-button-icon:only-child{
70
- margin-left:3px;
71
- margin-right:3px; }
72
59
  .iui-breadcrumbs-item .iui-button:hover{
73
60
  background-color:rgba(0, 0, 0, 0.1);
74
61
  border-color:transparent;
package/css/button.css CHANGED
@@ -43,16 +43,13 @@
43
43
  text-decoration:none;
44
44
  color:black;
45
45
  color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-1)); }
46
- .iui-button:focus{
47
- outline:0;
48
- box-shadow:rgba(0, 139, 225, 0.2) 0 0 0 2px;
49
- box-shadow:var(--iui-focus-box-shadow); }
50
- .iui-button:focus:not(:focus-visible){
51
- box-shadow:none; }
52
46
  .iui-button:focus-visible{
53
- outline:0;
54
- box-shadow:rgba(0, 139, 225, 0.2) 0 0 0 2px;
55
- box-shadow:var(--iui-focus-box-shadow); }
47
+ outline:1px solid var(--iui-color-foreground-primary);
48
+ outline-offset:-1px; }
49
+ @supports not selector(*:focus-visible){
50
+ .iui-button:focus{
51
+ outline:1px solid var(--iui-color-foreground-primary);
52
+ outline-offset:-1px; } }
56
53
  .iui-button[disabled], .iui-button:disabled{
57
54
  cursor:not-allowed;
58
55
  background:#EEF0F3;
@@ -68,26 +65,13 @@
68
65
  background-color:var(--iui-color-background-1);
69
66
  border-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-4));
70
67
  color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-2)); }
71
- .iui-button.iui-default:focus{
72
- background-color:#f2f2f2;
73
- border-color:black;
74
- color:black;
75
- background-color:var(--iui-color-background-1-overlay);
76
- border-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-1));
77
- color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-1)); }
78
- .iui-button.iui-default:focus .iui-notification-primary::before,
79
- .iui-button.iui-default:focus .iui-notification-positive::before,
80
- .iui-button.iui-default:focus .iui-notification-warning::before,
81
- .iui-button.iui-default:focus .iui-notification-negative::before{
82
- border-color:#f2f2f2;
83
- border-color:var(--iui-color-background-1-overlay); }
84
- .iui-button.iui-default:focus:where(:not(:focus-visible)){
85
- background-color:#FFF;
86
- border-color:rgba(0, 0, 0, 0.4);
87
- color:rgba(0, 0, 0, 0.8);
88
- background-color:var(--iui-color-background-1);
89
- border-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-4));
90
- color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-2)); }
68
+ .iui-button.iui-default:focus-visible{
69
+ outline:2px solid var(--iui-color-foreground-primary);
70
+ outline-offset:-2px; }
71
+ @supports not selector(*:focus-visible){
72
+ .iui-button.iui-default:focus{
73
+ outline:2px solid var(--iui-color-foreground-primary);
74
+ outline-offset:-2px; } }
91
75
  .iui-button.iui-default:hover, .iui-button.iui-default:active{
92
76
  background-color:#f2f2f2;
93
77
  border-color:black;
@@ -110,11 +94,16 @@
110
94
  padding-right:4px; }
111
95
  .iui-button.iui-default.iui-dropdown.iui-large{
112
96
  padding-right:12px; }
113
- .iui-button.iui-default.iui-active{
114
- background:linear-gradient(rgba(0, 139, 225, 0.1), rgba(0, 139, 225, 0.1)), linear-gradient(#FFF, #FFF);
97
+ .iui-button.iui-default.iui-active:enabled{
98
+ position:relative;
115
99
  color:#008BE1;
116
- 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));
117
100
  color:var(--iui-color-foreground-primary); }
101
+ .iui-button.iui-default.iui-active:enabled::before{
102
+ content:'';
103
+ position:absolute;
104
+ inset:0;
105
+ background-color:rgba(0, 139, 225, 0.1);
106
+ background-color:rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-6)); }
118
107
  .iui-button.iui-default[disabled], .iui-button.iui-default:disabled{
119
108
  cursor:not-allowed;
120
109
  background:#EEF0F3;
@@ -130,20 +119,13 @@
130
119
  background-color:var(--iui-color-background-primary);
131
120
  border-color:var(--iui-color-background-primary);
132
121
  color:var(--iui-color-foreground-accessory); }
133
- .iui-button.iui-high-visibility:focus{
134
- background-color:#006bae;
135
- border-color:#006bae;
136
- color:#FFF;
137
- background-color:var(--iui-color-background-primary-overlay);
138
- border-color:var(--iui-color-background-primary-overlay);
139
- color:var(--iui-color-foreground-accessory); }
140
- .iui-button.iui-high-visibility:focus:where(:not(:focus-visible)){
141
- background-color:#008BE1;
142
- border-color:#008BE1;
143
- color:#FFF;
144
- background-color:var(--iui-color-background-primary);
145
- border-color:var(--iui-color-background-primary);
146
- color:var(--iui-color-foreground-accessory); }
122
+ .iui-button.iui-high-visibility:focus-visible{
123
+ outline:1px solid var(--iui-color-foreground-accessory);
124
+ outline-offset:-3px; }
125
+ @supports not selector(*:focus-visible){
126
+ .iui-button.iui-high-visibility:focus{
127
+ outline:1px solid var(--iui-color-foreground-accessory);
128
+ outline-offset:-3px; } }
147
129
  .iui-button.iui-high-visibility:hover, .iui-button.iui-high-visibility:active{
148
130
  background-color:#006bae;
149
131
  border-color:#006bae;
@@ -166,20 +148,13 @@
166
148
  background-color:var(--iui-color-background-positive);
167
149
  border-color:var(--iui-color-background-positive);
168
150
  color:var(--iui-color-foreground-accessory); }
169
- .iui-button.iui-cta:focus{
170
- background-color:#3c7613;
171
- border-color:#3c7613;
172
- color:#FFF;
173
- background-color:var(--iui-color-background-positive-overlay);
174
- border-color:var(--iui-color-background-positive-overlay);
175
- color:var(--iui-color-foreground-accessory); }
176
- .iui-button.iui-cta:focus:where(:not(:focus-visible)){
177
- background-color:#53A21A;
178
- border-color:#53A21A;
179
- color:#FFF;
180
- background-color:var(--iui-color-background-positive);
181
- border-color:var(--iui-color-background-positive);
182
- color:var(--iui-color-foreground-accessory); }
151
+ .iui-button.iui-cta:focus-visible{
152
+ outline:1px solid var(--iui-color-foreground-accessory);
153
+ outline-offset:-3px; }
154
+ @supports not selector(*:focus-visible){
155
+ .iui-button.iui-cta:focus{
156
+ outline:1px solid var(--iui-color-foreground-accessory);
157
+ outline-offset:-3px; } }
183
158
  .iui-button.iui-cta:hover, .iui-button.iui-cta:active{
184
159
  background-color:#3c7613;
185
160
  border-color:#3c7613;
@@ -207,20 +182,13 @@
207
182
  position:fixed;
208
183
  bottom:11px;
209
184
  right:16px; }
210
- .iui-button.iui-idea:focus{
211
- background-color:#006bae;
212
- border-color:#006bae;
213
- color:#FFF;
214
- background-color:var(--iui-color-background-primary-overlay);
215
- border-color:var(--iui-color-background-primary-overlay);
216
- color:var(--iui-color-foreground-accessory); }
217
- .iui-button.iui-idea:focus:where(:not(:focus-visible)){
218
- background-color:#008BE1;
219
- border-color:#008BE1;
220
- color:#FFF;
221
- background-color:var(--iui-color-background-primary);
222
- border-color:var(--iui-color-background-primary);
223
- color:var(--iui-color-foreground-accessory); }
185
+ .iui-button.iui-idea:focus-visible{
186
+ outline:1px solid var(--iui-color-foreground-accessory);
187
+ outline-offset:-3px; }
188
+ @supports not selector(*:focus-visible){
189
+ .iui-button.iui-idea:focus{
190
+ outline:1px solid var(--iui-color-foreground-accessory);
191
+ outline-offset:-3px; } }
224
192
  .iui-button.iui-idea:hover, .iui-button.iui-idea:active{
225
193
  background-color:#006bae;
226
194
  border-color:#006bae;
@@ -245,17 +213,6 @@
245
213
  .iui-button.iui-borderless > .iui-button-icon:only-child{
246
214
  margin-left:3px;
247
215
  margin-right:3px; }
248
- .iui-button.iui-borderless:focus{
249
- background-color:rgba(0, 0, 0, 0.1);
250
- border-color:transparent;
251
- background-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-6));
252
- border-color:transparent; }
253
- .iui-button.iui-borderless:focus:where(:not(:focus-visible)){
254
- border-color:transparent;
255
- background-color:transparent; }
256
- .iui-button.iui-borderless:focus:where(:not(:focus-visible)) > .iui-button-icon:only-child{
257
- margin-left:3px;
258
- margin-right:3px; }
259
216
  .iui-button.iui-borderless:hover{
260
217
  background-color:rgba(0, 0, 0, 0.1);
261
218
  border-color:transparent;
@@ -341,8 +298,8 @@
341
298
  .iui-button-group > *:last-child input, .iui-button-group > *:last-child button:not(.iui-borderless){
342
299
  border-top-right-radius:3px;
343
300
  border-bottom-right-radius:3px; }
344
- .iui-button-group > *:not(:last-child){
345
- margin-right:-1px; }
301
+ .iui-button-group > * + *{
302
+ margin-left:-1px; }
346
303
  .iui-button-group > *:not(:first-child) .iui-default:disabled{
347
304
  border-left-color:#DCE0E3;
348
305
  border-left-color:var(--iui-color-background-4); }
@@ -390,8 +347,8 @@
390
347
  .iui-button-split-menu > *:last-child input, .iui-button-split-menu > *:last-child button:not(.iui-borderless){
391
348
  border-top-right-radius:3px;
392
349
  border-bottom-right-radius:3px; }
393
- .iui-button-split-menu > *:not(:last-child){
394
- margin-right:-1px; }
350
+ .iui-button-split-menu > * + *{
351
+ margin-left:-1px; }
395
352
  .iui-button-split-menu > *:not(:first-child) .iui-default:disabled{
396
353
  border-left-color:#DCE0E3;
397
354
  border-left-color:var(--iui-color-background-4); }
@@ -431,8 +388,8 @@
431
388
  .iui-button-split-menu > *:last-child input, .iui-button-split-menu > *:last-child button:not(.iui-borderless){
432
389
  border-top-right-radius:3px;
433
390
  border-bottom-right-radius:3px; }
434
- .iui-button-split-menu > *:not(:last-child){
435
- margin-right:-1px; }
391
+ .iui-button-split-menu > * + *{
392
+ margin-left:-1px; }
436
393
  .iui-button-split-menu > *:not(:first-child) .iui-default:disabled{
437
394
  border-left-color:#DCE0E3;
438
395
  border-left-color:var(--iui-color-background-4); }
package/css/carousel.css ADDED
@@ -0,0 +1,97 @@
1
+ /*---------------------------------------------------------------------------------------------
2
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
3
+ * See LICENSE.md in the project root for license terms and full copyright notice.
4
+ *--------------------------------------------------------------------------------------------*/
5
+ .iui-carousel{
6
+ overflow:hidden;
7
+ border-radius:3px; }
8
+ .iui-carousel:focus-visible{
9
+ outline:1px solid var(--iui-color-foreground-primary);
10
+ outline-offset:4px; }
11
+ @supports not selector(*:focus-visible){
12
+ .iui-carousel:focus{
13
+ outline:1px solid var(--iui-color-foreground-primary);
14
+ outline-offset:4px; } }
15
+
16
+ .iui-carousel-slider{
17
+ display:flex;
18
+ list-style:none;
19
+ margin:0;
20
+ padding:0; }
21
+ @media (prefers-reduced-motion: no-preference){
22
+ .iui-carousel-slider{
23
+ transition:transform 0.8s ease-in-out; } }
24
+ .iui-carousel-slider-item{
25
+ width:100%;
26
+ flex-shrink:0;
27
+ box-sizing:border-box; }
28
+
29
+ .iui-carousel-navigation{
30
+ display:flex;
31
+ align-items:center;
32
+ height:33px;
33
+ box-sizing:border-box;
34
+ border-top:2px solid #DCE0E3;
35
+ border-top:2px solid var(--iui-color-background-4); }
36
+ .iui-carousel-navigation-dots, .iui-carousel-navigation-left, .iui-carousel-navigation-right{
37
+ display:flex;
38
+ align-items:center;
39
+ flex:1; }
40
+ .iui-carousel-navigation-dots button[data-pressed='true'], .iui-carousel-navigation-left button[data-pressed='true'], .iui-carousel-navigation-right button[data-pressed='true']{
41
+ outline-offset:-1px;
42
+ outline:1px solid #008BE1;
43
+ outline:1px solid var(--iui-color-foreground-primary); }
44
+ .iui-carousel-navigation-dots{
45
+ margin:0;
46
+ padding:0;
47
+ border:none;
48
+ vertical-align:baseline;
49
+ border-radius:3px;
50
+ white-space:nowrap;
51
+ overflow:hidden;
52
+ justify-content:center;
53
+ list-style:none; }
54
+ .iui-carousel-navigation-dots:focus-visible{
55
+ outline:1px solid var(--iui-color-foreground-primary);
56
+ outline-offset:-1px; }
57
+ @supports not selector(*:focus-visible){
58
+ .iui-carousel-navigation-dots:focus{
59
+ outline:1px solid var(--iui-color-foreground-primary);
60
+ outline-offset:-1px; } }
61
+ .iui-carousel-navigation-dot{
62
+ padding:0 8px;
63
+ height:27px;
64
+ gap:4px;
65
+ background-color:transparent;
66
+ border:none;
67
+ cursor:pointer; }
68
+ .iui-carousel-navigation-dot:hover::after{
69
+ background-color:rgba(0, 0, 0, 0.6);
70
+ background-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-3)); }
71
+ .iui-carousel-navigation-dot.iui-invisible{
72
+ display:none; }
73
+ .iui-carousel-navigation-dot::after{
74
+ content:'';
75
+ display:block;
76
+ width:12px;
77
+ height:12px;
78
+ border-radius:50%;
79
+ transition:background-color 0.2s ease;
80
+ background-color:rgba(0, 0, 0, 0.4);
81
+ background-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-4)); }
82
+ @media (prefers-reduced-motion: no-preference){
83
+ .iui-carousel-navigation-dot::after{
84
+ transition:background-color 0.2s 0.2s ease, transform 0.4s ease; } }
85
+ .iui-carousel-navigation-dot.iui-first::after{
86
+ transform:scale(0.5); }
87
+ .iui-carousel-navigation-dot.iui-second::after{
88
+ transform:scale(0.75); }
89
+ .iui-carousel-navigation-dot.iui-invisible::after{
90
+ transform:scale(0);
91
+ background-color:rgba(0, 0, 0, 0);
92
+ background-color:rgba(var(--iui-color-foreground-body-rgb), 0); }
93
+ .iui-carousel-navigation-dot.iui-active::after{
94
+ background-color:#008BE1;
95
+ background-color:var(--iui-color-foreground-primary); }
96
+ .iui-carousel-navigation-right{
97
+ justify-content:flex-end; }
package/css/code.css CHANGED
@@ -49,16 +49,13 @@
49
49
  white-space:normal;
50
50
  border:1px solid #EEF0F3;
51
51
  border:1px solid var(--iui-color-background-3); }
52
- .iui-codeblock > .iui-codeblock-content:focus{
53
- outline:0;
54
- box-shadow:rgba(0, 139, 225, 0.2) 0 0 0 2px;
55
- box-shadow:var(--iui-focus-box-shadow); }
56
- .iui-codeblock > .iui-codeblock-content:focus:not(:focus-visible){
57
- box-shadow:none; }
58
52
  .iui-codeblock > .iui-codeblock-content:focus-visible{
59
- outline:0;
60
- box-shadow:rgba(0, 139, 225, 0.2) 0 0 0 2px;
61
- box-shadow:var(--iui-focus-box-shadow); }
53
+ outline:1px solid var(--iui-color-foreground-primary);
54
+ outline-offset:-1px; }
55
+ @supports not selector(*:focus-visible){
56
+ .iui-codeblock > .iui-codeblock-content:focus{
57
+ outline:1px solid var(--iui-color-foreground-primary);
58
+ outline-offset:-1px; } }
62
59
  .iui-codeblock > .iui-codeblock-content > code{
63
60
  display:block;
64
61
  width:100%;
package/css/color-picker.css CHANGED
@@ -99,22 +99,19 @@
99
99
  .iui-color-swatch:hover{
100
100
  box-shadow:0 0 1px 3px rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-5)), inset 0 0 0 1px rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-5));
101
101
  box-shadow:0 0 1px 3px rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-5)), inset 0 0 0 1px rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-5)); }
102
- .iui-color-swatch:focus{
103
- outline:0;
104
- box-shadow:0 0 1px 3px rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-4)), inset 0 0 0 1px rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-5));
105
- box-shadow:0 0 1px 3px rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-4)), inset 0 0 0 1px rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-5)); }
102
+ .iui-color-swatch:focus-visible{
103
+ outline:2px solid var(--iui-color-foreground-primary);
104
+ outline-offset:0; }
105
+ @supports not selector(*:focus-visible){
106
+ .iui-color-swatch:focus{
107
+ outline:2px solid var(--iui-color-foreground-primary);
108
+ outline-offset:0; } }
106
109
  .iui-color-swatch.iui-active{
107
110
  box-shadow:0 0 0 2px rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-3)), inset 0 0 0 1px rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-5));
108
111
  box-shadow:0 0 0 2px rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-3)), inset 0 0 0 1px rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-5)); }
109
112
  .iui-color-swatch.iui-active:hover{
110
113
  box-shadow:0 0 1px 3px rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-5)), inset 0 0 0 1px rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-5)), 0 0 0 2px rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-3));
111
114
  box-shadow:0 0 1px 3px rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-5)), inset 0 0 0 1px rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-5)), 0 0 0 2px rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-3)); }
112
- .iui-color-swatch.iui-active:focus{
113
- box-shadow:0 0 1px 3px rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-4)), inset 0 0 0 1px rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-5)), 0 0 0 2px rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-3));
114
- box-shadow:0 0 1px 3px rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-4)), inset 0 0 0 1px rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-5)), 0 0 0 2px rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-3)); }
115
- .iui-color-swatch.iui-active:focus:not(:focus-visible){
116
- box-shadow:inset 0 0 0 1px rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-5)), 0 0 0 2px rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-3));
117
- box-shadow:inset 0 0 0 1px rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-5)), 0 0 0 2px rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-3)); }
118
115
 
119
116
  .iui-color-picker-section-label{
120
117
  margin-bottom:5.5px;
@@ -180,7 +177,10 @@
180
177
  .iui-color-dot:hover{
181
178
  box-shadow:0 0 1px 3px rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-5));
182
179
  box-shadow:0 0 1px 3px rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-5)); }
183
- .iui-color-dot:focus{
184
- outline:0;
185
- box-shadow:0 0 1px 3px rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-4));
186
- box-shadow:0 0 1px 3px rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-4)); }
180
+ .iui-color-dot:focus-visible{
181
+ outline:2px solid var(--iui-color-foreground-primary);
182
+ outline-offset:0; }
183
+ @supports not selector(*:focus-visible){
184
+ .iui-color-dot:focus{
185
+ outline:2px solid var(--iui-color-foreground-primary);
186
+ outline-offset:0; } }
package/css/date-picker.css CHANGED
@@ -22,90 +22,96 @@
22
22
  display:inline-flex;
23
23
  background-color:#FFF;
24
24
  background-color:var(--iui-color-background-1); }
25
- .iui-date-picker > .iui-calendar > .iui-header{
26
- border:none;
27
- padding:0;
28
- position:relative;
29
- font-weight:700;
30
- background-color:#FFF;
31
- background-color:var(--iui-color-background-1); }
32
- .iui-date-picker > .iui-calendar > .iui-header > .iui-month-year{
33
- display:inline-flex;
34
- width:100%;
35
- align-items:center;
36
- justify-content:space-between;
37
- padding:0 4px;
38
- box-sizing:border-box; }
39
- .iui-date-picker > .iui-calendar > .iui-header > .iui-month-year > span{
40
- margin:0 4px;
41
- width:156px;
42
- white-space:nowrap;
43
- display:inline-flex;
44
- flex-shrink:0;
45
- align-items:center;
46
- justify-content:center;
47
- line-height:44px; }
48
- .iui-date-picker > .iui-calendar > .iui-header > .iui-month-year .iui-month{
49
- overflow:hidden;
50
- max-width:15ch;
51
- text-overflow:ellipsis;
52
- white-space:nowrap;
53
- flex-shrink:0; }
54
- .iui-date-picker > .iui-calendar > .iui-header > .iui-weekdays{
55
- line-height:33px;
56
- display:flex;
57
- justify-content:space-evenly;
58
- align-items:center;
59
- padding:0 8px;
60
- background-color:#F8F9FB;
61
- background-color:var(--iui-color-background-2); }
62
- .iui-date-picker > .iui-calendar > .iui-header > .iui-weekdays > div{
63
- white-space:nowrap;
64
- overflow:hidden;
65
- width:32px;
66
- text-align:center; }
67
- .iui-date-picker > .iui-calendar > .iui-dates > .iui-week{
25
+
26
+ .iui-calendar-month-year{
27
+ display:inline-flex;
28
+ width:100%;
29
+ align-items:center;
30
+ justify-content:space-between;
31
+ padding:0 4px;
32
+ box-sizing:border-box;
33
+ font-weight:700;
34
+ background-color:#FFF;
35
+ background-color:var(--iui-color-background-1); }
36
+ .iui-calendar-month-year > span{
37
+ margin:0 4px;
38
+ width:156px;
68
39
  white-space:nowrap;
69
- height:33px;
70
- display:flex;
40
+ display:inline-flex;
41
+ flex-shrink:0;
71
42
  align-items:center;
72
- justify-content:space-evenly;
73
- padding:0 8px; }
74
- .iui-date-picker > .iui-calendar > .iui-dates > .iui-week > .iui-date{
75
- cursor:pointer;
76
- display:inline-block;
77
- width:33px;
78
- line-height:33px; }
79
- .iui-date-picker > .iui-calendar > .iui-dates > .iui-week > .iui-date:focus{
80
- outline:0;
81
- box-shadow:rgba(0, 139, 225, 0.2) 0 0 0 2px;
82
- box-shadow:var(--iui-focus-box-shadow); }
83
- .iui-date-picker > .iui-calendar > .iui-dates > .iui-week > .iui-date:focus:not(:focus-visible){
84
- box-shadow:none; }
85
- .iui-date-picker > .iui-calendar > .iui-dates > .iui-week > .iui-date:focus-visible{
86
- outline:0;
87
- box-shadow:rgba(0, 139, 225, 0.2) 0 0 0 2px;
88
- box-shadow:var(--iui-focus-box-shadow); }
89
- .iui-date-picker > .iui-calendar > .iui-dates > .iui-week > .iui-date:hover:not(.iui-selected){
90
- border-radius:3px;
91
- font-weight:600;
92
- color:#008BE1;
93
- background-color:rgba(0, 139, 225, 0.1);
94
- color:var(--iui-color-foreground-primary);
95
- background-color:rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-6)); }
96
- .iui-date-picker > .iui-calendar > .iui-dates > .iui-week > .iui-date.iui-today{
97
- font-weight:600;
98
- border-radius:50%;
99
- background-color:rgba(0, 0, 0, 0.1);
100
- background-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-6)); }
101
- .iui-date-picker > .iui-calendar > .iui-dates > .iui-week > .iui-date.iui-selected{
102
- font-weight:600;
103
- border-radius:3px;
104
- cursor:default;
105
- background-color:#008BE1;
106
- color:#FFF;
107
- background-color:var(--iui-color-background-primary);
108
- color:var(--iui-color-foreground-accessory); }
109
- .iui-date-picker > .iui-calendar > .iui-dates > .iui-week > .iui-date.iui-outside-month{
110
- color:rgba(0, 0, 0, 0.4);
111
- color:var(--iui-text-color-muted); }
43
+ justify-content:center;
44
+ line-height:44px; }
45
+
46
+ .iui-calendar-month{
47
+ overflow:hidden;
48
+ max-width:15ch;
49
+ text-overflow:ellipsis;
50
+ white-space:nowrap;
51
+ flex-shrink:0; }
52
+
53
+ .iui-calendar-weekdays{
54
+ line-height:33px;
55
+ display:flex;
56
+ justify-content:space-evenly;
57
+ align-items:center;
58
+ padding:0 8px;
59
+ font-weight:700;
60
+ background-color:#F8F9FB;
61
+ background-color:var(--iui-color-background-2); }
62
+ .iui-calendar-weekdays > div{
63
+ white-space:nowrap;
64
+ overflow:hidden;
65
+ width:32px;
66
+ text-align:center; }
67
+
68
+ .iui-calendar-week{
69
+ white-space:nowrap;
70
+ height:33px;
71
+ display:flex;
72
+ align-items:center;
73
+ justify-content:space-evenly;
74
+ padding:0 8px; }
75
+
76
+ .iui-calendar-day{
77
+ cursor:pointer;
78
+ display:inline-block;
79
+ width:33px;
80
+ line-height:33px;
81
+ border-radius:3px; }
82
+ .iui-calendar-day:focus-visible{
83
+ outline:1px solid var(--iui-color-foreground-primary);
84
+ outline-offset:-1px; }
85
+ @supports not selector(*:focus-visible){
86
+ .iui-calendar-day:focus{
87
+ outline:1px solid var(--iui-color-foreground-primary);
88
+ outline-offset:-1px; } }
89
+ .iui-calendar-day.iui-today{
90
+ font-weight:600;
91
+ border-radius:50%;
92
+ background-color:rgba(0, 0, 0, 0.1);
93
+ background-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-6)); }
94
+ .iui-calendar-day:hover{
95
+ font-weight:600;
96
+ color:#008BE1;
97
+ background-color:rgba(0, 139, 225, 0.1);
98
+ color:var(--iui-color-foreground-primary);
99
+ background-color:rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-6)); }
100
+ .iui-calendar-day.iui-selected{
101
+ font-weight:600;
102
+ border-radius:3px;
103
+ cursor:default;
104
+ background-color:#008BE1;
105
+ color:#FFF;
106
+ background-color:var(--iui-color-background-primary);
107
+ color:var(--iui-color-foreground-accessory); }
108
+ .iui-calendar-day.iui-selected:focus-visible{
109
+ outline:1px solid var(--iui-color-foreground-accessory);
110
+ outline-offset:-3px; }
111
+ @supports not selector(*:focus-visible){
112
+ .iui-calendar-day.iui-selected:focus{
113
+ outline:1px solid var(--iui-color-foreground-accessory);
114
+ outline-offset:-3px; } }
115
+ .iui-calendar-day.iui-outside-month{
116
+ color:rgba(0, 0, 0, 0.4);
117
+ color:var(--iui-text-color-muted); }
package/css/expandable-block.css CHANGED
@@ -29,6 +29,13 @@
29
29
  border:1px solid var(--iui-color-background-3);
30
30
  border-bottom-color:var(--iui-color-background-4);
31
31
  background-color:var(--iui-color-background-3); }
32
+ .iui-expandable-block > .iui-header:focus-visible{
33
+ outline:1px solid var(--iui-color-foreground-primary);
34
+ outline-offset:-1px; }
35
+ @supports not selector(*:focus-visible){
36
+ .iui-expandable-block > .iui-header:focus{
37
+ outline:1px solid var(--iui-color-foreground-primary);
38
+ outline-offset:-1px; } }
32
39
  @media (prefers-reduced-motion: no-preference){
33
40
  .iui-expandable-block > .iui-header{
34
41
  transition:background-color 0.2s ease-out; } }
@@ -82,16 +89,13 @@
82
89
  font-size:12px;
83
90
  color:rgba(0, 0, 0, 0.4);
84
91
  color:var(--iui-text-color-muted); }
85
- .iui-expandable-block > .iui-header:focus{
86
- outline:0;
87
- box-shadow:rgba(0, 139, 225, 0.2) 0 0 0 2px;
88
- box-shadow:var(--iui-focus-box-shadow); }
89
- .iui-expandable-block > .iui-header:focus:not(:focus-visible){
90
- box-shadow:none; }
91
92
  .iui-expandable-block > .iui-header:focus-visible{
92
- outline:0;
93
- box-shadow:rgba(0, 139, 225, 0.2) 0 0 0 2px;
94
- box-shadow:var(--iui-focus-box-shadow); }
93
+ outline:1px solid var(--iui-color-foreground-primary);
94
+ outline-offset:-1px; }
95
+ @supports not selector(*:focus-visible){
96
+ .iui-expandable-block > .iui-header:focus{
97
+ outline:1px solid var(--iui-color-foreground-primary);
98
+ outline-offset:-1px; } }
95
99
  .iui-expandable-block .iui-expandable-content{
96
100
  overflow:hidden;
97
101
  box-sizing:border-box;
package/css/file-upload.css CHANGED
@@ -69,9 +69,10 @@
69
69
  position:relative;
70
70
  flex-direction:row; }
71
71
  .iui-file-upload > .iui-content:only-child:focus-within{
72
- outline:0;
73
- box-shadow:rgba(0, 139, 225, 0.2) 0 0 0 2px;
74
- box-shadow:rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-5)) 0 0 0 2px; }
72
+ outline:2px solid #008BE1;
73
+ outline-offset:-2px;
74
+ outline:2px solid var(--iui-color-foreground-primary);
75
+ outline-offset:-2px; }
75
76
  .iui-file-upload > .iui-content .iui-template-text{
76
77
  margin-left:24px; }
77
78
  .iui-file-upload > .iui-content .iui-template-text > label{