@itwin/itwinui-css 0.56.0 → 0.59.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 (39) hide show
  1. package/css/all.css +706 -346
  2. package/css/anchor.css +21 -17
  3. package/css/breadcrumbs.css +312 -57
  4. package/css/button.css +9 -12
  5. package/css/dialog.css +201 -0
  6. package/css/footer.css +1 -17
  7. package/css/global.css +1 -17
  8. package/css/information-panel.css +2 -2
  9. package/css/radio-tile.css +9 -13
  10. package/css/side-navigation.css +1 -1
  11. package/css/table.css +148 -61
  12. package/css/tag.css +1 -17
  13. package/package.json +1 -1
  14. package/scss/anchor/classes.scss +4 -0
  15. package/scss/breadcrumbs/breadcrumbs.scss +77 -18
  16. package/scss/breadcrumbs/classes.scss +12 -0
  17. package/scss/button/button.scss +17 -16
  18. package/scss/button/classes.scss +4 -0
  19. package/scss/button/cta.scss +3 -1
  20. package/scss/button/default.scss +0 -2
  21. package/scss/button/high-visibility.scss +3 -1
  22. package/scss/classes.scss +1 -1
  23. package/scss/dialog/classes.scss +47 -0
  24. package/scss/dialog/dialog.scss +213 -0
  25. package/scss/{modal → dialog}/index.scss +1 -1
  26. package/scss/index.scss +1 -1
  27. package/scss/information-panel/information-panel.scss +2 -2
  28. package/scss/radio-tile/radio-tile.scss +12 -17
  29. package/scss/side-navigation/side-navigation.scss +2 -2
  30. package/scss/style/anchor.scss +19 -16
  31. package/scss/style/elevation.scss +6 -5
  32. package/scss/table/classes.scss +16 -0
  33. package/scss/table/condensed.scss +4 -1
  34. package/scss/table/extra-condensed.scss +8 -1
  35. package/scss/table/paginator.scss +4 -0
  36. package/scss/table/table.scss +137 -37
  37. package/css/modal.css +0 -132
  38. package/scss/modal/classes.scss +0 -15
  39. package/scss/modal/modal.scss +0 -155
package/css/anchor.css CHANGED
@@ -3,12 +3,12 @@
3
3
  * See LICENSE.md in the project root for license terms and full copyright notice.
4
4
  *--------------------------------------------------------------------------------------------*/
5
5
  .iui-anchor{
6
- --_iui-anchor-external-svg:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='m16 0v5.4l-1.9-2-8.4 8.4-1.5-1.5 8.3-8.4-1.9-1.9m5.4 16v-9h-1v8h-14v-14h8v-1h-9v16z' /></svg>");
7
6
  color:#008ae0;
8
7
  -webkit-tap-highlight-color:rgba(0, 138, 224, 0.2);
9
8
  color:var(--iui-color-foreground-primary);
10
9
  -webkit-tap-highlight-color:rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-5));
11
10
  border-radius:3px;
11
+ box-sizing:border-box;
12
12
  cursor:pointer;
13
13
  text-decoration:none;
14
14
  }
@@ -26,22 +26,6 @@
26
26
  color:#006bad;
27
27
  color:var(--iui-color-foreground-primary-overlay);
28
28
  }
29
- .iui-anchor-external::after{
30
- content:"";
31
- display:inline-block;
32
- width:1.5ch;
33
- height:1.5ch;
34
- margin-left:0.5ch;
35
- vertical-align:-0.1ch;
36
- background-color:currentColor;
37
- -webkit-mask:var(--_iui-anchor-external-svg);
38
- mask:var(--_iui-anchor-external-svg);
39
- }
40
- @media (forced-colors: active){
41
- .iui-anchor-external::after{
42
- background-color:LinkText;
43
- }
44
- }
45
29
  .iui-anchor:hover{
46
30
  text-decoration:underline;
47
31
  }
@@ -65,4 +49,24 @@
65
49
  }
66
50
  .iui-theme-light-hc .iui-anchor:hover, .iui-theme-dark-hc .iui-anchor:hover{
67
51
  text-decoration:none;
52
+ }
53
+
54
+ .iui-anchor-external{
55
+ --_iui-anchor-external-svg:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='m16 0v5.4l-1.9-2-8.4 8.4-1.5-1.5 8.3-8.4-1.9-1.9m5.4 16v-9h-1v8h-14v-14h8v-1h-9v16z' /></svg>");
56
+ }
57
+ .iui-anchor-external::after{
58
+ content:"";
59
+ display:inline-block;
60
+ width:1.5ch;
61
+ height:1.5ch;
62
+ margin-left:0.5ch;
63
+ vertical-align:-0.1ch;
64
+ background-color:currentColor;
65
+ -webkit-mask:var(--_iui-anchor-external-svg);
66
+ mask:var(--_iui-anchor-external-svg);
67
+ }
68
+ @media (forced-colors: active){
69
+ .iui-anchor-external::after{
70
+ background-color:LinkText;
71
+ }
68
72
  }
package/css/breadcrumbs.css CHANGED
@@ -27,102 +27,198 @@
27
27
 
28
28
  .iui-breadcrumbs-item{
29
29
  display:flex;
30
+ align-items:center;
30
31
  line-height:38px;
31
32
  height:38px;
32
- max-width:192px;
33
- margin:0 12px;
34
33
  }
35
- .iui-breadcrumbs-item a{
36
- --_iui-anchor-external-svg:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='m16 0v5.4l-1.9-2-8.4 8.4-1.5-1.5 8.3-8.4-1.9-1.9m5.4 16v-9h-1v8h-14v-14h8v-1h-9v16z' /></svg>");
34
+ .iui-breadcrumbs-item > *{
35
+ max-width:26ch;
36
+ }
37
+
38
+ .iui-breadcrumbs-item-overrides > *{
39
+ padding:0 8px;
40
+ overflow:hidden;
41
+ white-space:nowrap;
42
+ text-overflow:ellipsis;
43
+ }
44
+ .iui-breadcrumbs-item-overrides > *:not(.iui-button){
45
+ color:rgba(0, 0, 0, 0.8);
46
+ color:var(--iui-text-color);
47
+ }
48
+ .iui-breadcrumbs-item-overrides > :-webkit-any-link{
49
+ color:#008ae0;
50
+ -webkit-tap-highlight-color:rgba(0, 138, 224, 0.2);
51
+ color:var(--iui-color-foreground-primary);
52
+ -webkit-tap-highlight-color:rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-5));
53
+ border-radius:3px;
54
+ box-sizing:border-box;
55
+ cursor:pointer;
56
+ text-decoration:none;
57
+ }
58
+ .iui-breadcrumbs-item-overrides > :-moz-any-link{
37
59
  color:#008ae0;
38
60
  -webkit-tap-highlight-color:rgba(0, 138, 224, 0.2);
39
61
  color:var(--iui-color-foreground-primary);
40
62
  -webkit-tap-highlight-color:rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-5));
41
63
  border-radius:3px;
64
+ box-sizing:border-box;
42
65
  cursor:pointer;
43
66
  text-decoration:none;
44
67
  }
45
- .iui-breadcrumbs-item a:focus-visible{
68
+ .iui-breadcrumbs-item-overrides > :any-link{
69
+ color:#008ae0;
70
+ -webkit-tap-highlight-color:rgba(0, 138, 224, 0.2);
71
+ color:var(--iui-color-foreground-primary);
72
+ -webkit-tap-highlight-color:rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-5));
73
+ border-radius:3px;
74
+ box-sizing:border-box;
75
+ cursor:pointer;
76
+ text-decoration:none;
77
+ }
78
+ .iui-breadcrumbs-item-overrides > :-webkit-any-link:focus-visible{
79
+ outline:1px solid var(--iui-color-foreground-primary);
80
+ outline-offset:1px;
81
+ }
82
+ .iui-breadcrumbs-item-overrides > :-moz-any-link:focus-visible{
83
+ outline:1px solid var(--iui-color-foreground-primary);
84
+ outline-offset:1px;
85
+ }
86
+ .iui-breadcrumbs-item-overrides > :any-link:focus-visible{
46
87
  outline:1px solid var(--iui-color-foreground-primary);
47
88
  outline-offset:1px;
48
89
  }
49
90
  @supports not selector(*:focus-visible){
50
- .iui-breadcrumbs-item a:focus{
91
+ .iui-breadcrumbs-item-overrides > :-webkit-any-link:focus{
51
92
  outline:1px solid var(--iui-color-foreground-primary);
52
93
  outline-offset:1px;
53
94
  }
95
+ .iui-breadcrumbs-item-overrides > :-moz-any-link:focus{
96
+ outline:1px solid var(--iui-color-foreground-primary);
97
+ outline-offset:1px;
98
+ }
99
+ .iui-breadcrumbs-item-overrides > :any-link:focus{
100
+ outline:1px solid var(--iui-color-foreground-primary);
101
+ outline-offset:1px;
102
+ }
103
+ }
104
+ .iui-breadcrumbs-item-overrides > :-webkit-any-link:hover{
105
+ color:#006bad;
106
+ color:var(--iui-color-foreground-primary-overlay);
54
107
  }
55
- .iui-breadcrumbs-item a:hover{
108
+ .iui-breadcrumbs-item-overrides > :-moz-any-link:hover{
56
109
  color:#006bad;
57
110
  color:var(--iui-color-foreground-primary-overlay);
58
111
  }
59
- .iui-breadcrumbs-item a-external::after{
60
- content:"";
61
- display:inline-block;
62
- width:1.5ch;
63
- height:1.5ch;
64
- margin-left:0.5ch;
65
- vertical-align:-0.1ch;
66
- background-color:currentColor;
67
- -webkit-mask:var(--_iui-anchor-external-svg);
68
- mask:var(--_iui-anchor-external-svg);
112
+ .iui-breadcrumbs-item-overrides > :any-link:hover{
113
+ color:#006bad;
114
+ color:var(--iui-color-foreground-primary-overlay);
69
115
  }
70
- @media (forced-colors: active){
71
- .iui-breadcrumbs-item a-external::after{
72
- background-color:LinkText;
73
- }
116
+ .iui-breadcrumbs-item-overrides > :-webkit-any-link:hover{
117
+ text-decoration:underline;
74
118
  }
75
- .iui-breadcrumbs-item a:hover{
119
+ .iui-breadcrumbs-item-overrides > :-moz-any-link:hover{
120
+ text-decoration:underline;
121
+ }
122
+ .iui-breadcrumbs-item-overrides > :any-link:hover{
76
123
  text-decoration:underline;
77
124
  }
78
125
  @media (prefers-contrast: more){
79
- .iui-breadcrumbs-item a{
126
+ .iui-breadcrumbs-item-overrides > :-webkit-any-link{
127
+ text-decoration:underline;
128
+ }
129
+ .iui-breadcrumbs-item-overrides > :-moz-any-link{
80
130
  text-decoration:underline;
81
131
  }
82
- .iui-breadcrumbs-item a:hover{
132
+ .iui-breadcrumbs-item-overrides > :any-link{
133
+ text-decoration:underline;
134
+ }
135
+ .iui-breadcrumbs-item-overrides > :-webkit-any-link:hover{
136
+ text-decoration:none;
137
+ }
138
+ .iui-breadcrumbs-item-overrides > :-moz-any-link:hover{
139
+ text-decoration:none;
140
+ }
141
+ .iui-breadcrumbs-item-overrides > :any-link:hover{
83
142
  text-decoration:none;
84
143
  }
85
144
  }
86
- .iui-theme-light .iui-breadcrumbs-item a, .iui-theme-dark .iui-breadcrumbs-item a{
145
+ .iui-theme-light .iui-breadcrumbs-item-overrides > :-webkit-any-link, .iui-theme-dark .iui-breadcrumbs-item-overrides > :-webkit-any-link{
146
+ text-decoration:none;
147
+ }
148
+ .iui-theme-light .iui-breadcrumbs-item-overrides > :-moz-any-link, .iui-theme-dark .iui-breadcrumbs-item-overrides > :-moz-any-link{
149
+ text-decoration:none;
150
+ }
151
+ .iui-theme-light .iui-breadcrumbs-item-overrides > :any-link, .iui-theme-dark .iui-breadcrumbs-item-overrides > :any-link{
87
152
  text-decoration:none;
88
153
  }
89
- .iui-theme-light .iui-breadcrumbs-item a:hover, .iui-theme-dark .iui-breadcrumbs-item a:hover{
154
+ .iui-theme-light .iui-breadcrumbs-item-overrides > :-webkit-any-link:hover, .iui-theme-dark .iui-breadcrumbs-item-overrides > :-webkit-any-link:hover{
155
+ text-decoration:underline;
156
+ }
157
+ .iui-theme-light .iui-breadcrumbs-item-overrides > :-moz-any-link:hover, .iui-theme-dark .iui-breadcrumbs-item-overrides > :-moz-any-link:hover{
158
+ text-decoration:underline;
159
+ }
160
+ .iui-theme-light .iui-breadcrumbs-item-overrides > :any-link:hover, .iui-theme-dark .iui-breadcrumbs-item-overrides > :any-link:hover{
161
+ text-decoration:underline;
162
+ }
163
+
164
+ .iui-theme-light-hc .iui-breadcrumbs-item-overrides > :-webkit-any-link, .iui-theme-dark-hc .iui-breadcrumbs-item-overrides > :-webkit-any-link{
165
+ text-decoration:underline;
166
+ }
167
+
168
+ .iui-theme-light-hc .iui-breadcrumbs-item-overrides > :-moz-any-link, .iui-theme-dark-hc .iui-breadcrumbs-item-overrides > :-moz-any-link{
90
169
  text-decoration:underline;
91
170
  }
92
171
 
93
- .iui-theme-light-hc .iui-breadcrumbs-item a, .iui-theme-dark-hc .iui-breadcrumbs-item a{
172
+ .iui-theme-light-hc .iui-breadcrumbs-item-overrides > :any-link, .iui-theme-dark-hc .iui-breadcrumbs-item-overrides > :any-link{
94
173
  text-decoration:underline;
95
174
  }
96
- .iui-theme-light-hc .iui-breadcrumbs-item a:hover, .iui-theme-dark-hc .iui-breadcrumbs-item a:hover{
175
+ .iui-theme-light-hc .iui-breadcrumbs-item-overrides > :-webkit-any-link:hover, .iui-theme-dark-hc .iui-breadcrumbs-item-overrides > :-webkit-any-link:hover{
97
176
  text-decoration:none;
98
177
  }
178
+ .iui-theme-light-hc .iui-breadcrumbs-item-overrides > :-moz-any-link:hover, .iui-theme-dark-hc .iui-breadcrumbs-item-overrides > :-moz-any-link:hover{
179
+ text-decoration:none;
180
+ }
181
+ .iui-theme-light-hc .iui-breadcrumbs-item-overrides > :any-link:hover, .iui-theme-dark-hc .iui-breadcrumbs-item-overrides > :any-link:hover{
182
+ text-decoration:none;
183
+ }
184
+
185
+ .iui-breadcrumbs-item-overrides > :-webkit-any-link:focus{
186
+ outline-offset:-1px;
187
+ }
99
188
 
100
- .iui-breadcrumbs-item .iui-button{
189
+ .iui-breadcrumbs-item-overrides > :-moz-any-link:focus{
190
+ outline-offset:-1px;
191
+ }
192
+
193
+ .iui-breadcrumbs-item-overrides > :any-link:focus{
194
+ outline-offset:-1px;
195
+ }
196
+ .iui-breadcrumbs-item-overrides .iui-button.iui-button{
101
197
  border-color:transparent;
102
198
  background-color:transparent;
103
199
  padding:0 8px;
104
200
  height:38px;
105
201
  gap:8px;
106
- margin:0 -9px;
202
+ border:none;
107
203
  }
108
- .iui-breadcrumbs-item .iui-button > .iui-button-icon:only-child{
204
+ .iui-breadcrumbs-item-overrides .iui-button.iui-button > .iui-button-icon:only-child{
109
205
  margin-left:3px;
110
206
  margin-right:3px;
111
207
  }
112
- .iui-breadcrumbs-item .iui-button:hover{
208
+ .iui-breadcrumbs-item-overrides .iui-button.iui-button:hover{
113
209
  background-color:rgba(0, 0, 0, 0.1);
114
210
  border-color:transparent;
115
211
  background-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-6));
116
212
  border-color:transparent;
117
213
  }
118
- .iui-breadcrumbs-item .iui-button.iui-active{
214
+ .iui-breadcrumbs-item-overrides .iui-button.iui-button.iui-active{
119
215
  background-color:rgba(0, 138, 224, 0.1);
120
216
  color:#008ae0;
121
217
  background-color:rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-6));
122
218
  color:var(--iui-color-foreground-primary);
123
219
  border-color:transparent;
124
220
  }
125
- .iui-breadcrumbs-item .iui-button[disabled], .iui-breadcrumbs-item .iui-button:disabled{
221
+ .iui-breadcrumbs-item-overrides .iui-button.iui-button[disabled], .iui-breadcrumbs-item-overrides .iui-button.iui-button:disabled{
126
222
  cursor:not-allowed;
127
223
  background:#edeff2;
128
224
  border-color:#edeff2;
@@ -135,49 +231,208 @@
135
231
  background-color:transparent;
136
232
  border-color:transparent;
137
233
  }
138
- .iui-breadcrumbs-item .iui-button[disabled].iui-active, .iui-breadcrumbs-item .iui-button:disabled.iui-active{
234
+ .iui-breadcrumbs-item-overrides .iui-button.iui-button[disabled].iui-active, .iui-breadcrumbs-item-overrides .iui-button.iui-button:disabled.iui-active{
139
235
  background-color:rgba(0, 0, 0, 0.05);
140
236
  background-color:rgba(var(--iui-color-foreground-body-rgb), 0.05);
141
237
  }
142
- .iui-breadcrumbs-item > *,
143
- .iui-breadcrumbs-item .iui-button-label{
238
+ .iui-breadcrumbs-item-overrides .iui-button.iui-button:focus-visible{
239
+ outline:1px solid var(--iui-color-foreground-primary);
240
+ outline-offset:-1px;
241
+ }
242
+ @supports not selector(*:focus-visible){
243
+ .iui-breadcrumbs-item-overrides .iui-button.iui-button:focus{
244
+ outline:1px solid var(--iui-color-foreground-primary);
245
+ outline-offset:-1px;
246
+ }
247
+ }
248
+ .iui-breadcrumbs-item-overrides .iui-button-label{
249
+ overflow:hidden;
250
+ white-space:nowrap;
251
+ text-overflow:ellipsis;
252
+ }
253
+ .iui-breadcrumbs-item-overrides .iui-button:not([aria-current]), .iui-breadcrumbs-item-overrides .iui-button:not([aria-current]):hover, .iui-breadcrumbs-item-overrides .iui-button:not([aria-current]):active{
254
+ --_iui-button-text-color:var(--iui-color-foreground-primary);
255
+ }
256
+
257
+ .iui-breadcrumbs-text{
258
+ padding:0 8px;
144
259
  overflow:hidden;
145
260
  white-space:nowrap;
146
261
  text-overflow:ellipsis;
147
262
  }
148
- .iui-breadcrumbs-item:not(.iui-current) > .iui-button{
263
+ a.iui-breadcrumbs-text{
149
264
  color:#008ae0;
265
+ -webkit-tap-highlight-color:rgba(0, 138, 224, 0.2);
150
266
  color:var(--iui-color-foreground-primary);
267
+ -webkit-tap-highlight-color:rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-5));
268
+ border-radius:3px;
269
+ box-sizing:border-box;
270
+ cursor:pointer;
271
+ text-decoration:none;
151
272
  }
152
- .iui-breadcrumbs-item:not(.iui-current) > .iui-button:hover{
273
+ a.iui-breadcrumbs-text:focus-visible{
274
+ outline:1px solid var(--iui-color-foreground-primary);
275
+ outline-offset:1px;
276
+ }
277
+ @supports not selector(*:focus-visible){
278
+ a.iui-breadcrumbs-text:focus{
279
+ outline:1px solid var(--iui-color-foreground-primary);
280
+ outline-offset:1px;
281
+ }
282
+ }
283
+ a.iui-breadcrumbs-text:hover{
153
284
  color:#006bad;
154
285
  color:var(--iui-color-foreground-primary-overlay);
155
286
  }
287
+ a.iui-breadcrumbs-text:hover{
288
+ text-decoration:underline;
289
+ }
290
+ @media (prefers-contrast: more){
291
+ a.iui-breadcrumbs-text{
292
+ text-decoration:underline;
293
+ }
294
+ a.iui-breadcrumbs-text:hover{
295
+ text-decoration:none;
296
+ }
297
+ }
298
+ .iui-theme-light a.iui-breadcrumbs-text, .iui-theme-dark a.iui-breadcrumbs-text{
299
+ text-decoration:none;
300
+ }
301
+ .iui-theme-light a.iui-breadcrumbs-text:hover, .iui-theme-dark a.iui-breadcrumbs-text:hover{
302
+ text-decoration:underline;
303
+ }
304
+
305
+ .iui-theme-light-hc a.iui-breadcrumbs-text, .iui-theme-dark-hc a.iui-breadcrumbs-text{
306
+ text-decoration:underline;
307
+ }
308
+ .iui-theme-light-hc a.iui-breadcrumbs-text:hover, .iui-theme-dark-hc a.iui-breadcrumbs-text:hover{
309
+ text-decoration:none;
310
+ }
311
+
312
+ a.iui-breadcrumbs-text:focus{
313
+ outline-offset:-1px;
314
+ }
315
+
316
+ .iui-breadcrumbs-button{
317
+ --_iui-button-active-stripe-inset:initial;
318
+ --_iui-button-text-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-2));
319
+ margin:0;
320
+ padding:0;
321
+ border:none;
322
+ vertical-align:baseline;
323
+ font-family:inherit;
324
+ display:inline-flex;
325
+ align-items:center;
326
+ vertical-align:middle;
327
+ justify-content:center;
328
+ position:relative;
329
+ box-sizing:border-box;
330
+ border-radius:3px;
331
+ line-height:22px;
332
+ box-shadow:none;
333
+ font-size:14px;
334
+ font-weight:400;
335
+ text-decoration:none;
336
+ -webkit-user-select:none;
337
+ -moz-user-select:none;
338
+ -ms-user-select:none;
339
+ user-select:none;
340
+ cursor:pointer;
341
+ white-space:nowrap;
342
+ border:1px solid transparent;
343
+ color:rgba(0, 0, 0, 0.8);
344
+ color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-2));
345
+ color:var(--_iui-button-text-color);
346
+ border-color:transparent;
347
+ background-color:transparent;
348
+ padding:0 8px;
349
+ height:38px;
350
+ gap:8px;
351
+ padding:0;
352
+ border:none;
353
+ color:#008ae0;
354
+ color:var(--iui-color-foreground-primary);
355
+ }
356
+ @media (prefers-reduced-motion: no-preference){
357
+ .iui-breadcrumbs-button{
358
+ transition:color 0.2s ease-out, background-color 0.2s ease-out, border-color 0.2s ease-out;
359
+ }
360
+ }
361
+ .iui-breadcrumbs-button:hover{
362
+ --_iui-button-text-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-1));
363
+ text-decoration:none;
364
+ }
365
+ .iui-breadcrumbs-button:focus-visible{
366
+ outline:1px solid var(--iui-color-foreground-primary);
367
+ outline-offset:-1px;
368
+ }
369
+ @supports not selector(*:focus-visible){
370
+ .iui-breadcrumbs-button:focus{
371
+ outline:1px solid var(--iui-color-foreground-primary);
372
+ outline-offset:-1px;
373
+ }
374
+ }
375
+ .iui-breadcrumbs-button[disabled], .iui-breadcrumbs-button:disabled{
376
+ cursor:not-allowed;
377
+ background:#edeff2;
378
+ border-color:#edeff2;
379
+ color:rgba(0, 0, 0, 0.2);
380
+ background:var(--iui-color-background-disabled);
381
+ border-color:var(--iui-color-background-disabled);
382
+ color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-5));
383
+ }
384
+ .iui-breadcrumbs-button > .iui-button-icon:only-child{
385
+ margin-left:3px;
386
+ margin-right:3px;
387
+ }
388
+ .iui-breadcrumbs-button:hover{
389
+ background-color:rgba(0, 0, 0, 0.1);
390
+ border-color:transparent;
391
+ background-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-6));
392
+ border-color:transparent;
393
+ }
394
+ .iui-breadcrumbs-button.iui-active{
395
+ background-color:rgba(0, 138, 224, 0.1);
396
+ color:#008ae0;
397
+ background-color:rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-6));
398
+ color:var(--iui-color-foreground-primary);
399
+ border-color:transparent;
400
+ }
401
+ .iui-breadcrumbs-button[disabled], .iui-breadcrumbs-button:disabled{
402
+ cursor:not-allowed;
403
+ background:#edeff2;
404
+ border-color:#edeff2;
405
+ color:rgba(0, 0, 0, 0.2);
406
+ background:var(--iui-color-background-disabled);
407
+ border-color:var(--iui-color-background-disabled);
408
+ color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-5));
409
+ background-color:transparent;
410
+ border-color:transparent;
411
+ background-color:transparent;
412
+ border-color:transparent;
413
+ }
414
+ .iui-breadcrumbs-button[disabled].iui-active, .iui-breadcrumbs-button:disabled.iui-active{
415
+ background-color:rgba(0, 0, 0, 0.05);
416
+ background-color:rgba(var(--iui-color-foreground-body-rgb), 0.05);
417
+ }
418
+ .iui-breadcrumbs-button[aria-current]{
419
+ color:rgba(0, 0, 0, 0.8);
420
+ color:var(--iui-text-color);
421
+ }
156
422
 
157
423
  .iui-breadcrumbs-separator{
158
424
  display:flex;
425
+ margin:0 2px;
159
426
  }
160
427
  .iui-breadcrumbs-separator svg{
161
- fill:rgba(0, 0, 0, 0.4);
162
- fill:var(--iui-icons-color);
163
- display:inline-flex;
164
428
  width:12px;
165
429
  height:12px;
166
430
  display:flex;
431
+ fill:rgba(0, 0, 0, 0.4);
432
+ fill:var(--iui-icons-color);
167
433
  }
168
- .iui-breadcrumbs-separator svg.iui-informational{
169
- fill:#008ae0;
170
- fill:var(--iui-icons-color-primary);
171
- }
172
- .iui-breadcrumbs-separator svg.iui-positive{
173
- fill:#53a21a;
174
- fill:var(--iui-icons-color-positive);
175
- }
176
- .iui-breadcrumbs-separator svg.iui-warning{
177
- fill:#f18d13;
178
- fill:var(--iui-icons-color-warning);
179
- }
180
- .iui-breadcrumbs-separator svg.iui-negative{
181
- fill:#d10a0a;
182
- fill:var(--iui-icons-color-negative);
434
+ @media (forced-colors: active){
435
+ .iui-breadcrumbs-separator svg{
436
+ fill:CanvasText;
437
+ }
183
438
  }
package/css/button.css CHANGED
@@ -4,6 +4,7 @@
4
4
  *--------------------------------------------------------------------------------------------*/
5
5
  .iui-button{
6
6
  --_iui-button-active-stripe-inset:initial;
7
+ --_iui-button-text-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-2));
7
8
  margin:0;
8
9
  padding:0;
9
10
  border:none;
@@ -30,6 +31,7 @@
30
31
  border:1px solid transparent;
31
32
  color:rgba(0, 0, 0, 0.8);
32
33
  color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-2));
34
+ color:var(--_iui-button-text-color);
33
35
  padding:0 16px;
34
36
  height:38px;
35
37
  gap:8px;
@@ -43,9 +45,8 @@
43
45
  }
44
46
  }
45
47
  .iui-button:hover{
48
+ --_iui-button-text-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-1));
46
49
  text-decoration:none;
47
- color:black;
48
- color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-1));
49
50
  }
50
51
  .iui-button:focus-visible{
51
52
  outline:1px solid var(--iui-color-foreground-primary);
@@ -78,10 +79,8 @@
78
79
  .iui-button.iui-default{
79
80
  background-color:white;
80
81
  border-color:rgba(0, 0, 0, 0.4);
81
- color:rgba(0, 0, 0, 0.8);
82
82
  background-color:var(--iui-color-background-1);
83
83
  border-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-4));
84
- color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-2));
85
84
  }
86
85
  .iui-button.iui-default:focus-visible{
87
86
  outline:2px solid var(--iui-color-foreground-primary);
@@ -96,10 +95,8 @@
96
95
  .iui-button.iui-default:hover, .iui-button.iui-default:active{
97
96
  background-color:#f2f2f2;
98
97
  border-color:black;
99
- color:black;
100
98
  background-color:var(--iui-color-background-1-overlay);
101
99
  border-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-1));
102
- color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-1));
103
100
  }
104
101
  .iui-button.iui-default:hover .iui-notification-primary::before,
105
102
  .iui-button.iui-default:hover .iui-notification-positive::before,
@@ -142,12 +139,14 @@
142
139
  color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-5));
143
140
  }
144
141
  .iui-button.iui-high-visibility{
142
+ --_iui-button-text-color:var(--iui-color-foreground-accessory);
145
143
  background-color:#008ae0;
146
144
  border-color:#008ae0;
147
145
  color:white;
148
146
  background-color:var(--iui-color-background-primary);
149
147
  border-color:var(--iui-color-background-primary);
150
148
  color:var(--iui-color-foreground-accessory);
149
+ color:var(--_iui-button-text-color);
151
150
  }
152
151
  .iui-button.iui-high-visibility:focus-visible{
153
152
  outline:1px solid var(--iui-color-foreground-accessory);
@@ -162,10 +161,8 @@
162
161
  .iui-button.iui-high-visibility:hover, .iui-button.iui-high-visibility:active{
163
162
  background-color:#006bad;
164
163
  border-color:#006bad;
165
- color:white;
166
164
  background-color:var(--iui-color-background-primary-overlay);
167
165
  border-color:var(--iui-color-background-primary-overlay);
168
- color:var(--iui-color-foreground-accessory);
169
166
  }
170
167
  .iui-button.iui-high-visibility[disabled], .iui-button.iui-high-visibility:disabled{
171
168
  cursor:not-allowed;
@@ -177,12 +174,14 @@
177
174
  color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-5));
178
175
  }
179
176
  .iui-button.iui-cta{
177
+ --_iui-button-text-color:var(--iui-color-foreground-accessory);
180
178
  background-color:#53a21a;
181
179
  border-color:#53a21a;
182
180
  color:white;
183
181
  background-color:var(--iui-color-background-positive);
184
182
  border-color:var(--iui-color-background-positive);
185
183
  color:var(--iui-color-foreground-accessory);
184
+ color:var(--_iui-button-text-color);
186
185
  }
187
186
  .iui-button.iui-cta:focus-visible{
188
187
  outline:1px solid var(--iui-color-foreground-accessory);
@@ -197,10 +196,8 @@
197
196
  .iui-button.iui-cta:hover, .iui-button.iui-cta:active{
198
197
  background-color:#3d7613;
199
198
  border-color:#3d7613;
200
- color:white;
201
199
  background-color:var(--iui-color-background-positive-overlay);
202
200
  border-color:var(--iui-color-background-positive-overlay);
203
- color:var(--iui-color-foreground-accessory);
204
201
  }
205
202
  .iui-button.iui-cta[disabled], .iui-button.iui-cta:disabled{
206
203
  cursor:not-allowed;
@@ -212,12 +209,14 @@
212
209
  color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-5));
213
210
  }
214
211
  .iui-button.iui-idea{
212
+ --_iui-button-text-color:var(--iui-color-foreground-accessory);
215
213
  background-color:#008ae0;
216
214
  border-color:#008ae0;
217
215
  color:white;
218
216
  background-color:var(--iui-color-background-primary);
219
217
  border-color:var(--iui-color-background-primary);
220
218
  color:var(--iui-color-foreground-accessory);
219
+ color:var(--_iui-button-text-color);
221
220
  border-radius:22px;
222
221
  box-shadow:0 9px 46px rgba(0, 0, 0, 0.25);
223
222
  position:fixed;
@@ -237,10 +236,8 @@
237
236
  .iui-button.iui-idea:hover, .iui-button.iui-idea:active{
238
237
  background-color:#006bad;
239
238
  border-color:#006bad;
240
- color:white;
241
239
  background-color:var(--iui-color-background-primary-overlay);
242
240
  border-color:var(--iui-color-background-primary-overlay);
243
- color:var(--iui-color-foreground-accessory);
244
241
  }
245
242
  .iui-button.iui-idea[disabled], .iui-button.iui-idea:disabled{
246
243
  cursor:not-allowed;