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