@itwin/itwinui-css 0.54.1 → 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 (50) hide show
  1. package/css/all.css +872 -473
  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 +14 -17
  7. package/css/header.css +3 -2
  8. package/css/inputs.css +18 -168
  9. package/css/menu.css +21 -0
  10. package/css/popover.css +2 -2
  11. package/css/radio-tile.css +217 -0
  12. package/css/table.css +12 -11
  13. package/css/tabs.css +4 -0
  14. package/css/tag.css +55 -64
  15. package/css/text.css +9 -3
  16. package/css/tile.css +29 -17
  17. package/css/toast-notification.css +1 -1
  18. package/css/toggle-switch.css +65 -0
  19. package/package.json +5 -3
  20. package/scss/anchor/classes.scss +4 -0
  21. package/scss/breadcrumbs/breadcrumbs.scss +74 -18
  22. package/scss/breadcrumbs/classes.scss +9 -0
  23. package/scss/button/button.scss +17 -16
  24. package/scss/button/classes.scss +4 -0
  25. package/scss/button/cta.scss +3 -1
  26. package/scss/button/default.scss +0 -2
  27. package/scss/button/high-visibility.scss +3 -1
  28. package/scss/classes.scss +3 -2
  29. package/scss/header/header.scss +8 -1
  30. package/scss/index.scss +3 -2
  31. package/scss/inputs/checkbox.scss +11 -6
  32. package/scss/inputs/classes.scss +0 -4
  33. package/scss/inputs/index.scss +0 -1
  34. package/scss/inputs/labeled-inputs.scss +1 -1
  35. package/scss/menu/menu.scss +27 -0
  36. package/scss/popover/popover.scss +2 -2
  37. package/scss/radio-tile/classes.scss +31 -0
  38. package/scss/radio-tile/index.scss +3 -0
  39. package/scss/radio-tile/radio-tile.scss +209 -0
  40. package/scss/style/anchor.scss +19 -16
  41. package/scss/style/global.scss +4 -0
  42. package/scss/table/paginator.scss +4 -0
  43. package/scss/tabs/tabs.scss +6 -0
  44. package/scss/tag/classes.scss +14 -1
  45. package/scss/tag/tag.scss +45 -46
  46. package/scss/text/skeleton.scss +13 -7
  47. package/scss/tile/tile.scss +19 -13
  48. package/scss/toast-notification/classes.scss +1 -1
  49. package/scss/toggle-switch/toggle-switch.scss +50 -2
  50. package/scss/inputs/radio-tile.scss +0 -200
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
  }