@itwin/itwinui-css 1.0.0-dev.13 → 1.0.0-dev.15

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 (9) hide show
  1. package/css/alert.css +145 -252
  2. package/css/all.css +185 -278
  3. package/css/button.css +3 -3
  4. package/css/header.css +4 -2
  5. package/css/menu.css +1 -0
  6. package/css/non-ideal-state.css +13 -15
  7. package/css/side-navigation.css +16 -3
  8. package/css/table.css +3 -3
  9. package/package.json +1 -1
package/css/alert.css CHANGED
@@ -16,358 +16,245 @@
16
16
  border:1px solid var(--_iui-alert-border-color);
17
17
  box-shadow:inset var(--iui-size-2xs) 0 0 var(--_iui-alert-border-color);
18
18
  }
19
- @media (forced-colors: active){
20
- .iui-alert{
21
- background-color:Canvas;
22
- }
23
- }
24
- .iui-alert.iui-sticky{
25
- border-radius:0;
26
- position:-webkit-sticky;
27
- position:sticky;
28
- top:0;
29
- left:0;
30
- }
31
-
32
- .iui-alert-button{
33
- margin:0;
34
- padding:0;
35
- border:none;
36
- vertical-align:baseline;
37
- font-family:inherit;
38
- display:inline-flex;
39
- flex-shrink:0;
40
- align-items:center;
41
- vertical-align:middle;
42
- justify-content:center;
43
- position:relative;
44
- border-radius:var(--iui-border-radius-1);
45
- line-height:1.2;
46
- font-size:var(--iui-font-size-1);
47
- font-weight:var(--iui-font-weight-normal);
48
- -webkit-user-select:none;
49
- -moz-user-select:none;
50
- -ms-user-select:none;
51
- user-select:none;
52
- cursor:pointer;
53
- white-space:nowrap;
54
- border:1px solid var(--_iui-button-border-color);
55
- background:var(--_iui-button-background-color);
56
- color:var(--_iui-button-text-color);
57
- gap:var(--_iui-button-gap);
58
- min-height:var(--_iui-button-min-height);
59
- min-width:var(--_iui-button-min-height);
60
- padding-block:var(--_iui-button-padding-block);
61
- padding-inline:var(--_iui-button-padding-inline);
62
- transition:background-color var(--iui-duration-1) ease-out, border-color var(--iui-duration-1) ease-out;
63
- -webkit-tap-highlight-color:transparent;
64
- text-decoration:none;
65
- --_iui-button-gap:var(--iui-size-xs);
66
- --_iui-button-padding-block:var(--iui-size-2xs);
67
- --_iui-button-padding-inline:var(--iui-size-m);
68
- --_iui-button-min-height:var(--iui-component-height);
69
- --_iui-button-text-color:var(--iui-color-text);
70
- --_iui-button-background-color:transparent;
71
- --_iui-button-border-color:transparent;
72
- --_iui-button-icon-fill:var(--iui-color-icon);
73
- --_iui-button-gap:var(--iui-size-xs);
74
- --_iui-button-padding-block:var(--iui-size-2xs);
75
- --_iui-button-padding-inline:var(--iui-size-m);
76
- --_iui-button-min-height:var(--iui-component-height);
77
- --_iui-button-padding-inline:var(--iui-size-xs);
78
- --_iui-button-gap:var(--iui-size-2xs);
79
- --_iui-button-padding-block:0;
80
- --_iui-button-padding-inline:var(--iui-size-xs);
81
- --_iui-button-min-height:var(--iui-component-height-small);
82
- --_iui-button-padding-inline:var(--iui-size-2xs);
83
- margin-left:auto;
84
- margin-right:var(--iui-size-xs);
85
- }
86
- .iui-alert-button:focus-visible{
87
- outline:1px solid var(--iui-color-border-accent);
88
- outline-offset:-1px;
89
- }
90
- @supports not selector(*:focus-visible){
91
- .iui-alert-button:focus{
92
- outline:1px solid var(--iui-color-border-accent);
93
- outline-offset:-1px;
94
- }
95
- }
96
- .iui-alert-button:where(:hover, :active){
97
- --_iui-button-text-color:var(--iui-color-text-hover);
98
- --_iui-button-background-color:var(--iui-color-background-transparent-hover);
99
- --_iui-button-icon-fill:var(--iui-color-icon-hover);
100
- }
101
- .iui-alert-button:where(:focus){
102
- outline-offset:-1px;
103
- outline-width:1px;
104
- }
105
- .iui-alert-button:where([disabled], :disabled, [aria-disabled="true"]){
106
- --_iui-button-text-color:var(--iui-color-text-disabled);
107
- --_iui-button-background-color:transparent;
108
- --_iui-button-border-color:transparent;
109
- --_iui-button-icon-fill:var(--iui-color-icon-disabled);
110
- }
111
-
112
- .iui-alert-informational{
113
- margin:0;
114
- padding:0;
115
- border:none;
116
- vertical-align:baseline;
117
- --_iui-alert-border-color:var(--iui-color-border);
118
- border-radius:var(--iui-border-radius-1);
119
- display:flex;
120
- align-items:center;
121
- color:var(--iui-color-text);
122
- background-color:var(--iui-color-background);
123
- border:1px solid var(--_iui-alert-border-color);
124
- box-shadow:inset var(--iui-size-2xs) 0 0 var(--_iui-alert-border-color);
19
+ .iui-alert:where([data-iui-status="informational"]){
125
20
  --_iui-alert-border-color:var(--iui-color-border-informational);
21
+ --_iui-alert-icon-color:var(--iui-color-icon-informational);
126
22
  }
127
- @media (forced-colors: active){
128
- .iui-alert-informational{
129
- background-color:Canvas;
130
- }
131
- }
132
- .iui-alert-informational.iui-sticky{
133
- border-radius:0;
134
- position:-webkit-sticky;
135
- position:sticky;
136
- top:0;
137
- left:0;
138
- }
139
- .iui-alert-informational .iui-alert-icon{
140
- fill:var(--iui-color-icon-informational);
141
- }
142
- .iui-alert-informational .iui-alert-message::-moz-selection, .iui-alert-informational .iui-alert-message *::-moz-selection{
23
+ .iui-alert:where([data-iui-status="informational"])::-moz-selection, .iui-alert:where([data-iui-status="informational"]) *::-moz-selection{
143
24
  background-color:hsl(var(--iui-color-informational-hsl)/var(--iui-opacity-5));
144
25
  }
145
- .iui-alert-informational .iui-alert-message::selection,
146
- .iui-alert-informational .iui-alert-message *::selection{
26
+ .iui-alert:where([data-iui-status="informational"])::selection,
27
+ .iui-alert:where([data-iui-status="informational"]) *::selection{
147
28
  background-color:hsl(var(--iui-color-informational-hsl)/var(--iui-opacity-5));
148
29
  }
149
- .iui-alert-informational .iui-alert-link{
30
+ .iui-alert:where([data-iui-status="informational"]) .iui-alert-link{
150
31
  color:var(--iui-color-text-informational);
151
32
  -webkit-tap-highlight-color:hsl(var(--iui-color-informational-hsl)/var(--iui-opacity-6));
152
33
  }
153
- .iui-alert-informational .iui-alert-link:focus-visible{
34
+ .iui-alert:where([data-iui-status="informational"]) .iui-alert-link:focus-visible{
154
35
  outline:1px solid var(--iui-color-text-informational);
155
36
  outline-offset:1px;
156
37
  }
157
38
  @supports not selector(*:focus-visible){
158
- .iui-alert-informational .iui-alert-link:focus{
39
+ .iui-alert:where([data-iui-status="informational"]) .iui-alert-link:focus{
159
40
  outline:1px solid var(--iui-color-text-informational);
160
41
  outline-offset:1px;
161
42
  }
162
43
  }
163
- .iui-alert-informational .iui-alert-link::-moz-selection, .iui-alert-informational .iui-alert-link *::-moz-selection{
44
+ .iui-alert:where([data-iui-status="informational"]) .iui-alert-link::-moz-selection, .iui-alert:where([data-iui-status="informational"]) .iui-alert-link *::-moz-selection{
164
45
  background-color:hsl(var(--iui-color-informational-hsl)/var(--iui-opacity-5));
165
46
  }
166
- .iui-alert-informational .iui-alert-link::selection,
167
- .iui-alert-informational .iui-alert-link *::selection{
47
+ .iui-alert:where([data-iui-status="informational"]) .iui-alert-link::selection,
48
+ .iui-alert:where([data-iui-status="informational"]) .iui-alert-link *::selection{
168
49
  background-color:hsl(var(--iui-color-informational-hsl)/var(--iui-opacity-5));
169
50
  }
170
- .iui-alert-informational .iui-alert-link:hover{
51
+ .iui-alert:where([data-iui-status="informational"]) .iui-alert-link:hover{
171
52
  color:var(--iui-color-text-informational-hover);
172
53
  }
173
- .iui-alert-informational .iui-alert-button{
54
+ .iui-alert:where([data-iui-status="informational"]) .iui-alert-button{
174
55
  outline-color:var(--iui-color-text-informational);
175
56
  }
176
-
177
- .iui-alert-positive{
178
- margin:0;
179
- padding:0;
180
- border:none;
181
- vertical-align:baseline;
182
- --_iui-alert-border-color:var(--iui-color-border);
183
- border-radius:var(--iui-border-radius-1);
184
- display:flex;
185
- align-items:center;
186
- color:var(--iui-color-text);
187
- background-color:var(--iui-color-background);
188
- border:1px solid var(--_iui-alert-border-color);
189
- box-shadow:inset var(--iui-size-2xs) 0 0 var(--_iui-alert-border-color);
57
+ .iui-alert:where([data-iui-status="positive"]){
190
58
  --_iui-alert-border-color:var(--iui-color-border-positive);
59
+ --_iui-alert-icon-color:var(--iui-color-icon-positive);
191
60
  }
192
- @media (forced-colors: active){
193
- .iui-alert-positive{
194
- background-color:Canvas;
195
- }
196
- }
197
- .iui-alert-positive.iui-sticky{
198
- border-radius:0;
199
- position:-webkit-sticky;
200
- position:sticky;
201
- top:0;
202
- left:0;
203
- }
204
- .iui-alert-positive .iui-alert-icon{
205
- fill:var(--iui-color-icon-positive);
206
- }
207
- .iui-alert-positive .iui-alert-message::-moz-selection, .iui-alert-positive .iui-alert-message *::-moz-selection{
61
+ .iui-alert:where([data-iui-status="positive"])::-moz-selection, .iui-alert:where([data-iui-status="positive"]) *::-moz-selection{
208
62
  background-color:hsl(var(--iui-color-positive-hsl)/var(--iui-opacity-5));
209
63
  }
210
- .iui-alert-positive .iui-alert-message::selection,
211
- .iui-alert-positive .iui-alert-message *::selection{
64
+ .iui-alert:where([data-iui-status="positive"])::selection,
65
+ .iui-alert:where([data-iui-status="positive"]) *::selection{
212
66
  background-color:hsl(var(--iui-color-positive-hsl)/var(--iui-opacity-5));
213
67
  }
214
- .iui-alert-positive .iui-alert-link{
68
+ .iui-alert:where([data-iui-status="positive"]) .iui-alert-link{
215
69
  color:var(--iui-color-text-positive);
216
70
  -webkit-tap-highlight-color:hsl(var(--iui-color-positive-hsl)/var(--iui-opacity-6));
217
71
  }
218
- .iui-alert-positive .iui-alert-link:focus-visible{
72
+ .iui-alert:where([data-iui-status="positive"]) .iui-alert-link:focus-visible{
219
73
  outline:1px solid var(--iui-color-text-positive);
220
74
  outline-offset:1px;
221
75
  }
222
76
  @supports not selector(*:focus-visible){
223
- .iui-alert-positive .iui-alert-link:focus{
77
+ .iui-alert:where([data-iui-status="positive"]) .iui-alert-link:focus{
224
78
  outline:1px solid var(--iui-color-text-positive);
225
79
  outline-offset:1px;
226
80
  }
227
81
  }
228
- .iui-alert-positive .iui-alert-link::-moz-selection, .iui-alert-positive .iui-alert-link *::-moz-selection{
82
+ .iui-alert:where([data-iui-status="positive"]) .iui-alert-link::-moz-selection, .iui-alert:where([data-iui-status="positive"]) .iui-alert-link *::-moz-selection{
229
83
  background-color:hsl(var(--iui-color-positive-hsl)/var(--iui-opacity-5));
230
84
  }
231
- .iui-alert-positive .iui-alert-link::selection,
232
- .iui-alert-positive .iui-alert-link *::selection{
85
+ .iui-alert:where([data-iui-status="positive"]) .iui-alert-link::selection,
86
+ .iui-alert:where([data-iui-status="positive"]) .iui-alert-link *::selection{
233
87
  background-color:hsl(var(--iui-color-positive-hsl)/var(--iui-opacity-5));
234
88
  }
235
- .iui-alert-positive .iui-alert-link:hover{
89
+ .iui-alert:where([data-iui-status="positive"]) .iui-alert-link:hover{
236
90
  color:var(--iui-color-text-positive-hover);
237
91
  }
238
- .iui-alert-positive .iui-alert-button{
92
+ .iui-alert:where([data-iui-status="positive"]) .iui-alert-button{
239
93
  outline-color:var(--iui-color-text-positive);
240
94
  }
241
-
242
- .iui-alert-warning{
243
- margin:0;
244
- padding:0;
245
- border:none;
246
- vertical-align:baseline;
247
- --_iui-alert-border-color:var(--iui-color-border);
248
- border-radius:var(--iui-border-radius-1);
249
- display:flex;
250
- align-items:center;
251
- color:var(--iui-color-text);
252
- background-color:var(--iui-color-background);
253
- border:1px solid var(--_iui-alert-border-color);
254
- box-shadow:inset var(--iui-size-2xs) 0 0 var(--_iui-alert-border-color);
95
+ .iui-alert:where([data-iui-status="warning"]){
255
96
  --_iui-alert-border-color:var(--iui-color-border-warning);
97
+ --_iui-alert-icon-color:var(--iui-color-icon-warning);
256
98
  }
257
- @media (forced-colors: active){
258
- .iui-alert-warning{
259
- background-color:Canvas;
260
- }
261
- }
262
- .iui-alert-warning.iui-sticky{
263
- border-radius:0;
264
- position:-webkit-sticky;
265
- position:sticky;
266
- top:0;
267
- left:0;
268
- }
269
- .iui-alert-warning .iui-alert-icon{
270
- fill:var(--iui-color-icon-warning);
271
- }
272
- .iui-alert-warning .iui-alert-message::-moz-selection, .iui-alert-warning .iui-alert-message *::-moz-selection{
99
+ .iui-alert:where([data-iui-status="warning"])::-moz-selection, .iui-alert:where([data-iui-status="warning"]) *::-moz-selection{
273
100
  background-color:hsl(var(--iui-color-warning-hsl)/var(--iui-opacity-5));
274
101
  }
275
- .iui-alert-warning .iui-alert-message::selection,
276
- .iui-alert-warning .iui-alert-message *::selection{
102
+ .iui-alert:where([data-iui-status="warning"])::selection,
103
+ .iui-alert:where([data-iui-status="warning"]) *::selection{
277
104
  background-color:hsl(var(--iui-color-warning-hsl)/var(--iui-opacity-5));
278
105
  }
279
- .iui-alert-warning .iui-alert-link{
106
+ .iui-alert:where([data-iui-status="warning"]) .iui-alert-link{
280
107
  color:var(--iui-color-text-warning);
281
108
  -webkit-tap-highlight-color:hsl(var(--iui-color-warning-hsl)/var(--iui-opacity-6));
282
109
  }
283
- .iui-alert-warning .iui-alert-link:focus-visible{
110
+ .iui-alert:where([data-iui-status="warning"]) .iui-alert-link:focus-visible{
284
111
  outline:1px solid var(--iui-color-text-warning);
285
112
  outline-offset:1px;
286
113
  }
287
114
  @supports not selector(*:focus-visible){
288
- .iui-alert-warning .iui-alert-link:focus{
115
+ .iui-alert:where([data-iui-status="warning"]) .iui-alert-link:focus{
289
116
  outline:1px solid var(--iui-color-text-warning);
290
117
  outline-offset:1px;
291
118
  }
292
119
  }
293
- .iui-alert-warning .iui-alert-link::-moz-selection, .iui-alert-warning .iui-alert-link *::-moz-selection{
120
+ .iui-alert:where([data-iui-status="warning"]) .iui-alert-link::-moz-selection, .iui-alert:where([data-iui-status="warning"]) .iui-alert-link *::-moz-selection{
294
121
  background-color:hsl(var(--iui-color-warning-hsl)/var(--iui-opacity-5));
295
122
  }
296
- .iui-alert-warning .iui-alert-link::selection,
297
- .iui-alert-warning .iui-alert-link *::selection{
123
+ .iui-alert:where([data-iui-status="warning"]) .iui-alert-link::selection,
124
+ .iui-alert:where([data-iui-status="warning"]) .iui-alert-link *::selection{
298
125
  background-color:hsl(var(--iui-color-warning-hsl)/var(--iui-opacity-5));
299
126
  }
300
- .iui-alert-warning .iui-alert-link:hover{
127
+ .iui-alert:where([data-iui-status="warning"]) .iui-alert-link:hover{
301
128
  color:var(--iui-color-text-warning-hover);
302
129
  }
303
- .iui-alert-warning .iui-alert-button{
130
+ .iui-alert:where([data-iui-status="warning"]) .iui-alert-button{
304
131
  outline-color:var(--iui-color-text-warning);
305
132
  }
306
-
307
- .iui-alert-negative{
308
- margin:0;
309
- padding:0;
310
- border:none;
311
- vertical-align:baseline;
312
- --_iui-alert-border-color:var(--iui-color-border);
313
- border-radius:var(--iui-border-radius-1);
314
- display:flex;
315
- align-items:center;
316
- color:var(--iui-color-text);
317
- background-color:var(--iui-color-background);
318
- border:1px solid var(--_iui-alert-border-color);
319
- box-shadow:inset var(--iui-size-2xs) 0 0 var(--_iui-alert-border-color);
133
+ .iui-alert:where([data-iui-status="negative"]){
320
134
  --_iui-alert-border-color:var(--iui-color-border-negative);
135
+ --_iui-alert-icon-color:var(--iui-color-icon-negative);
321
136
  }
322
- @media (forced-colors: active){
323
- .iui-alert-negative{
324
- background-color:Canvas;
325
- }
326
- }
327
- .iui-alert-negative.iui-sticky{
328
- border-radius:0;
329
- position:-webkit-sticky;
330
- position:sticky;
331
- top:0;
332
- left:0;
333
- }
334
- .iui-alert-negative .iui-alert-icon{
335
- fill:var(--iui-color-icon-negative);
336
- }
337
- .iui-alert-negative .iui-alert-message::-moz-selection, .iui-alert-negative .iui-alert-message *::-moz-selection{
137
+ .iui-alert:where([data-iui-status="negative"])::-moz-selection, .iui-alert:where([data-iui-status="negative"]) *::-moz-selection{
338
138
  background-color:hsl(var(--iui-color-negative-hsl)/var(--iui-opacity-5));
339
139
  }
340
- .iui-alert-negative .iui-alert-message::selection,
341
- .iui-alert-negative .iui-alert-message *::selection{
140
+ .iui-alert:where([data-iui-status="negative"])::selection,
141
+ .iui-alert:where([data-iui-status="negative"]) *::selection{
342
142
  background-color:hsl(var(--iui-color-negative-hsl)/var(--iui-opacity-5));
343
143
  }
344
- .iui-alert-negative .iui-alert-link{
144
+ .iui-alert:where([data-iui-status="negative"]) .iui-alert-link{
345
145
  color:var(--iui-color-text-negative);
346
146
  -webkit-tap-highlight-color:hsl(var(--iui-color-negative-hsl)/var(--iui-opacity-6));
347
147
  }
348
- .iui-alert-negative .iui-alert-link:focus-visible{
148
+ .iui-alert:where([data-iui-status="negative"]) .iui-alert-link:focus-visible{
349
149
  outline:1px solid var(--iui-color-text-negative);
350
150
  outline-offset:1px;
351
151
  }
352
152
  @supports not selector(*:focus-visible){
353
- .iui-alert-negative .iui-alert-link:focus{
153
+ .iui-alert:where([data-iui-status="negative"]) .iui-alert-link:focus{
354
154
  outline:1px solid var(--iui-color-text-negative);
355
155
  outline-offset:1px;
356
156
  }
357
157
  }
358
- .iui-alert-negative .iui-alert-link::-moz-selection, .iui-alert-negative .iui-alert-link *::-moz-selection{
158
+ .iui-alert:where([data-iui-status="negative"]) .iui-alert-link::-moz-selection, .iui-alert:where([data-iui-status="negative"]) .iui-alert-link *::-moz-selection{
359
159
  background-color:hsl(var(--iui-color-negative-hsl)/var(--iui-opacity-5));
360
160
  }
361
- .iui-alert-negative .iui-alert-link::selection,
362
- .iui-alert-negative .iui-alert-link *::selection{
161
+ .iui-alert:where([data-iui-status="negative"]) .iui-alert-link::selection,
162
+ .iui-alert:where([data-iui-status="negative"]) .iui-alert-link *::selection{
363
163
  background-color:hsl(var(--iui-color-negative-hsl)/var(--iui-opacity-5));
364
164
  }
365
- .iui-alert-negative .iui-alert-link:hover{
165
+ .iui-alert:where([data-iui-status="negative"]) .iui-alert-link:hover{
366
166
  color:var(--iui-color-text-negative-hover);
367
167
  }
368
- .iui-alert-negative .iui-alert-button{
168
+ .iui-alert:where([data-iui-status="negative"]) .iui-alert-button{
369
169
  outline-color:var(--iui-color-text-negative);
370
170
  }
171
+ .iui-alert:where([data-iui-variant="sticky"]){
172
+ border-radius:0;
173
+ position:-webkit-sticky;
174
+ position:sticky;
175
+ top:0;
176
+ left:0;
177
+ }
178
+
179
+ .iui-alert-button{
180
+ margin:0;
181
+ padding:0;
182
+ border:none;
183
+ vertical-align:baseline;
184
+ font-family:inherit;
185
+ display:inline-flex;
186
+ flex-shrink:0;
187
+ align-items:center;
188
+ vertical-align:middle;
189
+ justify-content:center;
190
+ position:relative;
191
+ border-radius:var(--iui-border-radius-1);
192
+ line-height:1.2;
193
+ font-size:var(--iui-font-size-1);
194
+ font-weight:var(--iui-font-weight-normal);
195
+ -webkit-user-select:none;
196
+ -moz-user-select:none;
197
+ -ms-user-select:none;
198
+ user-select:none;
199
+ cursor:pointer;
200
+ white-space:nowrap;
201
+ border:1px solid var(--_iui-button-border-color);
202
+ background:var(--_iui-button-background-color);
203
+ color:var(--_iui-button-text-color);
204
+ gap:var(--_iui-button-gap);
205
+ min-height:var(--_iui-button-min-height);
206
+ min-width:var(--_iui-button-min-height);
207
+ padding-block:var(--_iui-button-padding-block);
208
+ padding-inline:var(--_iui-button-padding-inline);
209
+ transition:background-color var(--iui-duration-1) ease-out, border-color var(--iui-duration-1) ease-out;
210
+ -webkit-tap-highlight-color:transparent;
211
+ text-decoration:none;
212
+ --_iui-button-gap:var(--iui-size-xs);
213
+ --_iui-button-padding-block:var(--iui-size-2xs);
214
+ --_iui-button-padding-inline:var(--iui-size-m);
215
+ --_iui-button-min-height:var(--iui-component-height);
216
+ --_iui-button-text-color:var(--iui-color-text);
217
+ --_iui-button-background-color:transparent;
218
+ --_iui-button-border-color:transparent;
219
+ --_iui-button-icon-fill:var(--iui-color-icon);
220
+ --_iui-button-gap:var(--iui-size-xs);
221
+ --_iui-button-padding-block:var(--iui-size-2xs);
222
+ --_iui-button-padding-inline:var(--iui-size-m);
223
+ --_iui-button-min-height:var(--iui-component-height);
224
+ --_iui-button-padding-inline:var(--iui-size-xs);
225
+ --_iui-button-gap:var(--iui-size-2xs);
226
+ --_iui-button-padding-block:0;
227
+ --_iui-button-padding-inline:var(--iui-size-xs);
228
+ --_iui-button-min-height:var(--iui-component-height-small);
229
+ --_iui-button-padding-inline:var(--iui-size-2xs);
230
+ margin-left:auto;
231
+ margin-right:var(--iui-size-xs);
232
+ }
233
+ .iui-alert-button:focus-visible{
234
+ outline:1px solid var(--iui-color-border-accent);
235
+ outline-offset:-1px;
236
+ }
237
+ @supports not selector(*:focus-visible){
238
+ .iui-alert-button:focus{
239
+ outline:1px solid var(--iui-color-border-accent);
240
+ outline-offset:-1px;
241
+ }
242
+ }
243
+ .iui-alert-button:where(:hover, :active){
244
+ --_iui-button-text-color:var(--iui-color-text-hover);
245
+ --_iui-button-background-color:var(--iui-color-background-transparent-hover);
246
+ --_iui-button-icon-fill:var(--iui-color-icon-hover);
247
+ }
248
+ .iui-alert-button:where(:focus){
249
+ outline-offset:-1px;
250
+ outline-width:1px;
251
+ }
252
+ .iui-alert-button:where([disabled], :disabled, [aria-disabled="true"]){
253
+ --_iui-button-text-color:var(--iui-color-text-disabled);
254
+ --_iui-button-background-color:transparent;
255
+ --_iui-button-border-color:transparent;
256
+ --_iui-button-icon-fill:var(--iui-color-icon-disabled);
257
+ }
371
258
 
372
259
  .iui-alert-icon{
373
260
  display:flex;
@@ -375,6 +262,12 @@
375
262
  width:var(--iui-size-m);
376
263
  height:var(--iui-size-m);
377
264
  margin-left:var(--iui-size-m);
265
+ fill:var(--_iui-alert-icon-color, var(--iui-color-icon-muted));
266
+ }
267
+ @media (forced-colors: active){
268
+ .iui-alert-icon{
269
+ fill:CanvasText;
270
+ }
378
271
  }
379
272
 
380
273
  .iui-alert-message{