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