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

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