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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (46) hide show
  1. package/css/alert.css +149 -240
  2. package/css/all.css +1213 -1258
  3. package/css/anchor.css +7 -15
  4. package/css/avatar.css +19 -16
  5. package/css/blockquote.css +11 -5
  6. package/css/breadcrumbs.css +47 -73
  7. package/css/button.css +59 -42
  8. package/css/carousel.css +12 -12
  9. package/css/checkbox.css +18 -20
  10. package/css/code.css +16 -12
  11. package/css/color-picker.css +18 -21
  12. package/css/date-picker.css +54 -59
  13. package/css/dialog.css +4 -4
  14. package/css/expandable-block.css +19 -19
  15. package/css/fieldset.css +6 -5
  16. package/css/file-upload.css +8 -8
  17. package/css/footer.css +11 -19
  18. package/css/global.css +16 -16
  19. package/css/header.css +32 -27
  20. package/css/information-panel.css +8 -7
  21. package/css/input.css +23 -23
  22. package/css/keyboard.css +4 -4
  23. package/css/location-marker.css +9 -9
  24. package/css/menu.css +27 -29
  25. package/css/progress-indicator.css +27 -27
  26. package/css/radio-tile.css +21 -20
  27. package/css/radio.css +18 -20
  28. package/css/select.css +22 -19
  29. package/css/side-navigation.css +26 -13
  30. package/css/skip-to-content.css +3 -3
  31. package/css/slider.css +15 -12
  32. package/css/stepper.css +17 -17
  33. package/css/surface.css +5 -8
  34. package/css/table.css +91 -85
  35. package/css/tabs.css +36 -33
  36. package/css/tag.css +16 -24
  37. package/css/text.css +2 -2
  38. package/css/tile.css +65 -62
  39. package/css/time-picker.css +18 -18
  40. package/css/toast.css +102 -71
  41. package/css/toggle-switch.css +32 -37
  42. package/css/tooltip.css +1 -1
  43. package/css/tree.css +14 -12
  44. package/css/utils.css +99 -83
  45. package/css/workflow-diagram.css +6 -6
  46. package/package.json +1 -1
package/css/anchor.css CHANGED
@@ -3,24 +3,24 @@
3
3
  * See LICENSE.md in the project root for license terms and full copyright notice.
4
4
  *--------------------------------------------------------------------------------------------*/
5
5
  .iui-anchor{
6
- color:var(--iui-color-foreground-primary);
7
- -webkit-tap-highlight-color:hsl(var(--iui-color-foreground-primary-hsl)/var(--iui-opacity-6));
6
+ color:var(--iui-color-text-accent);
7
+ -webkit-tap-highlight-color:hsl(var(--iui-color-accent-hsl)/var(--iui-opacity-6));
8
8
  border-radius:var(--iui-border-radius-1);
9
9
  cursor:pointer;
10
10
  text-decoration:none;
11
11
  }
12
12
  .iui-anchor:focus-visible{
13
- outline:1px solid var(--iui-color-foreground-primary);
13
+ outline:1px solid var(--iui-color-text-accent);
14
14
  outline-offset:1px;
15
15
  }
16
16
  @supports not selector(*:focus-visible){
17
17
  .iui-anchor:focus{
18
- outline:1px solid var(--iui-color-foreground-primary);
18
+ outline:1px solid var(--iui-color-text-accent);
19
19
  outline-offset:1px;
20
20
  }
21
21
  }
22
22
  .iui-anchor:hover{
23
- color:var(--iui-color-foreground-primary-hover);
23
+ color:var(--iui-color-text-accent-hover);
24
24
  }
25
25
  .iui-anchor:hover{
26
26
  text-decoration:underline;
@@ -33,20 +33,12 @@
33
33
  text-decoration:none;
34
34
  }
35
35
  }
36
- .iui-theme-light .iui-anchor, .iui-theme-dark .iui-anchor{
37
- text-decoration:none;
38
- }
39
- .iui-theme-light .iui-anchor:hover, .iui-theme-dark .iui-anchor:hover{
40
- text-decoration:underline;
41
- }
42
-
43
- .iui-theme-light-hc .iui-anchor, .iui-theme-dark-hc .iui-anchor{
36
+ [data-iui-contrast=high] .iui-anchor{
44
37
  text-decoration:underline;
45
38
  }
46
- .iui-theme-light-hc .iui-anchor:hover, .iui-theme-dark-hc .iui-anchor:hover{
39
+ [data-iui-contrast=high] .iui-anchor:hover{
47
40
  text-decoration:none;
48
41
  }
49
-
50
42
  .iui-anchor-external{
51
43
  --_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>");
52
44
  }
package/css/avatar.css CHANGED
@@ -26,7 +26,7 @@
26
26
  height:100%;
27
27
  margin:0;
28
28
  border-radius:50%;
29
- box-shadow:inset 0 0 0 var(--iui-size-3xs) var(--iui-color-background-transparent-hover);
29
+ box-shadow:inset 0 0 0 var(--iui-size-3xs) hsl(var(--iui-color-foreground-hsl)/var(--iui-opacity-5));
30
30
  }
31
31
  .iui-avatar > .iui-initials{
32
32
  display:flex;
@@ -46,14 +46,14 @@
46
46
  text-transform:uppercase;
47
47
  background-color:#b1c856;
48
48
  overflow:hidden;
49
- color:var(--iui-color-foreground-accessory);
49
+ color:var(--iui-color-white);
50
50
  }
51
51
  .iui-avatar > .iui-icon{
52
52
  display:inline-flex;
53
53
  width:50%;
54
54
  height:50%;
55
55
  position:absolute;
56
- fill:var(--iui-color-foreground-accessory);
56
+ fill:var(--iui-color-white);
57
57
  }
58
58
  .iui-avatar > img{
59
59
  display:block;
@@ -66,7 +66,7 @@
66
66
  height:100%;
67
67
  border-width:0;
68
68
  border-radius:50%;
69
- background-color:var(--iui-color-background-1);
69
+ background-color:var(--iui-color-background);
70
70
  }
71
71
  .iui-avatar > .iui-status{
72
72
  box-sizing:content-box;
@@ -79,8 +79,8 @@
79
79
  width:25%;
80
80
  height:25%;
81
81
  border-radius:50%;
82
- border:var(--iui-size-3xs) solid var(--iui-color-background-1);
83
- background-color:var(--iui-color-background-5);
82
+ border:var(--iui-size-3xs) solid var(--iui-color-background);
83
+ background-color:var(--iui-color-border);
84
84
  }
85
85
  .iui-avatar > .iui-status::after{
86
86
  content:"";
@@ -93,7 +93,7 @@
93
93
  .iui-avatar > .iui-status.iui-online::after{
94
94
  -webkit-mask:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M6,14L0,8l2-2l4,4l8-8l2,2L6,14z' /></svg>");
95
95
  mask:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M6,14L0,8l2-2l4,4l8-8l2,2L6,14z' /></svg>");
96
- background-color:var(--iui-color-foreground-accessory);
96
+ background-color:var(--iui-color-white);
97
97
  }
98
98
  .iui-avatar > .iui-status.iui-away{
99
99
  background-color:var(--iui-color-background-warning);
@@ -101,7 +101,7 @@
101
101
  .iui-avatar > .iui-status.iui-away::after{
102
102
  -webkit-mask:url("data:image/svg+xml,<svg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'><path d='m13.445 12.832-6.445-4.297v-7.535h2v6.465l5.555 3.703z' /></svg>");
103
103
  mask:url("data:image/svg+xml,<svg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'><path d='m13.445 12.832-6.445-4.297v-7.535h2v6.465l5.555 3.703z' /></svg>");
104
- background-color:var(--iui-color-foreground-accessory);
104
+ background-color:var(--iui-color-white);
105
105
  }
106
106
  .iui-avatar > .iui-status.iui-busy{
107
107
  background-color:var(--iui-color-background-negative);
@@ -109,20 +109,23 @@
109
109
  .iui-avatar > .iui-status.iui-busy::after{
110
110
  -webkit-mask:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><rect x='2' y='7' width='12' height='2'></rect></svg>");
111
111
  mask:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><rect x='2' y='7' width='12' height='2'></rect></svg>");
112
- background-color:var(--iui-color-foreground-accessory);
112
+ background-color:var(--iui-color-white);
113
113
  }
114
114
  .iui-avatar > .iui-status.iui-offline{
115
- background-color:var(--iui-color-background-1);
116
- box-shadow:inset 0 0 0 1px var(--iui-color-foreground-3);
115
+ background-color:var(--iui-color-background);
116
+ box-shadow:inset 0 0 0 1px var(--iui-color-text-muted);
117
117
  }
118
118
  .iui-avatar > .iui-status.iui-offline::after{
119
119
  -webkit-mask:url("data:image/svg+xml,<svg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'><path d='m12.5 2-4.5 4.5-4.5-4.5-1.5 1.5 4.5 4.5-4.5 4.5 1.5 1.5 4.5-4.5 4.5 4.5 1.5-1.5-4.5-4.5 4.5-4.5z' /></svg>");
120
120
  mask:url("data:image/svg+xml,<svg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'><path d='m12.5 2-4.5 4.5-4.5-4.5-1.5 1.5 4.5 4.5-4.5 4.5 1.5 1.5 4.5-4.5 4.5 4.5 1.5-1.5-4.5-4.5 4.5-4.5z' /></svg>");
121
- background-color:var(--iui-color-foreground-4);
121
+ background-color:var(--iui-color-icon-muted);
122
122
  }
123
123
  .iui-avatar.iui-avatar-count > .iui-initials{
124
- background-color:var(--iui-color-background-3);
125
- color:var(--iui-color-foreground-4);
124
+ background-color:var(--iui-color-background);
125
+ color:var(--iui-color-text-muted);
126
+ }
127
+ .iui-avatar.iui-avatar-count > .iui-stroke{
128
+ box-shadow:inset 0 0 0 var(--iui-size-3xs) var(--iui-color-border);
126
129
  }
127
130
  .iui-avatar.iui-avatar-count:focus{
128
131
  outline:none;
@@ -193,13 +196,13 @@
193
196
  margin-left:calc(0px - var(--iui-size-2xs));
194
197
  }
195
198
  .iui-avatar-list.iui-stacked .iui-avatar:not(:first-child) .iui-initials{
196
- box-shadow:0 0 0 var(--iui-size-2xs) var(--iui-color-background-1);
199
+ box-shadow:0 0 0 var(--iui-size-2xs) var(--iui-color-background);
197
200
  }
198
201
  .iui-avatar-list.iui-stacked .iui-avatar:not(:first-child).iui-small{
199
202
  margin-left:calc(0px - var(--iui-size-3xs));
200
203
  }
201
204
  .iui-avatar-list.iui-stacked .iui-avatar:not(:first-child).iui-small .iui-initials{
202
- box-shadow:0 0 0 var(--iui-size-3xs) var(--iui-color-background-1);
205
+ box-shadow:0 0 0 var(--iui-size-3xs) var(--iui-color-background);
203
206
  }
204
207
  .iui-avatar-list.iui-stacked .iui-avatar:not(:first-child).iui-large{
205
208
  margin-left:calc(0px - var(--iui-size-xs));
package/css/blockquote.css CHANGED
@@ -7,19 +7,25 @@
7
7
  padding:0;
8
8
  border:none;
9
9
  vertical-align:baseline;
10
+ --iui-surface-background-color:var(--iui-color-background);
11
+ --iui-surface-border-color:var(--iui-color-border-subtle);
12
+ --iui-surface-border-radius:var(--iui-border-radius-1);
13
+ --iui-surface-elevation:var(--iui-shadow-1);
14
+ background-color:var(--iui-surface-background-color);
15
+ border:1px solid var(--iui-surface-border-color);
16
+ border-radius:var(--iui-surface-border-radius);
17
+ box-shadow:var(--iui-surface-elevation);
18
+ color:var(--iui-color-text);
10
19
  display:block;
11
20
  position:relative;
12
21
  padding:var(--iui-size-s) var(--iui-size-m);
13
22
  margin:var(--iui-size-s) 0;
14
23
  text-align:justify;
15
- box-shadow:var(--iui-shadow-1);
16
- border-radius:var(--iui-border-radius-1);
17
- background-color:var(--iui-color-background-1);
18
- border-left:var(--iui-size-xs) solid var(--iui-color-foreground-primary);
24
+ border-left:var(--iui-size-xs) solid var(--iui-color-border);
19
25
  }
20
26
  .iui-blockquote > footer{
21
27
  text-align:right;
22
- color:var(--iui-color-foreground-4);
28
+ color:var(--iui-color-text-muted);
23
29
  }
24
30
  .iui-blockquote > footer > cite{
25
31
  font-style:normal;
package/css/breadcrumbs.css CHANGED
@@ -44,11 +44,11 @@
44
44
  text-overflow:ellipsis;
45
45
  }
46
46
  .iui-breadcrumbs-item-overrides > *:not(.iui-button){
47
- color:var(--iui-color-foreground-2);
47
+ color:var(--iui-color-text);
48
48
  }
49
49
  .iui-breadcrumbs-item-overrides > :-webkit-any-link{
50
- color:var(--iui-color-foreground-primary);
51
- -webkit-tap-highlight-color:hsl(var(--iui-color-foreground-primary-hsl)/var(--iui-opacity-6));
50
+ color:var(--iui-color-text-accent);
51
+ -webkit-tap-highlight-color:hsl(var(--iui-color-accent-hsl)/var(--iui-opacity-6));
52
52
  border-radius:var(--iui-border-radius-1);
53
53
  cursor:pointer;
54
54
  text-decoration:none;
@@ -56,8 +56,8 @@
56
56
  line-height:var(--iui-component-height);
57
57
  }
58
58
  .iui-breadcrumbs-item-overrides > :-moz-any-link{
59
- color:var(--iui-color-foreground-primary);
60
- -webkit-tap-highlight-color:hsl(var(--iui-color-foreground-primary-hsl)/var(--iui-opacity-6));
59
+ color:var(--iui-color-text-accent);
60
+ -webkit-tap-highlight-color:hsl(var(--iui-color-accent-hsl)/var(--iui-opacity-6));
61
61
  border-radius:var(--iui-border-radius-1);
62
62
  cursor:pointer;
63
63
  text-decoration:none;
@@ -65,8 +65,8 @@
65
65
  line-height:var(--iui-component-height);
66
66
  }
67
67
  .iui-breadcrumbs-item-overrides > :any-link{
68
- color:var(--iui-color-foreground-primary);
69
- -webkit-tap-highlight-color:hsl(var(--iui-color-foreground-primary-hsl)/var(--iui-opacity-6));
68
+ color:var(--iui-color-text-accent);
69
+ -webkit-tap-highlight-color:hsl(var(--iui-color-accent-hsl)/var(--iui-opacity-6));
70
70
  border-radius:var(--iui-border-radius-1);
71
71
  cursor:pointer;
72
72
  text-decoration:none;
@@ -74,39 +74,39 @@
74
74
  line-height:var(--iui-component-height);
75
75
  }
76
76
  .iui-breadcrumbs-item-overrides > :-webkit-any-link:focus-visible{
77
- outline:1px solid var(--iui-color-foreground-primary);
77
+ outline:1px solid var(--iui-color-text-accent);
78
78
  outline-offset:1px;
79
79
  }
80
80
  .iui-breadcrumbs-item-overrides > :-moz-any-link:focus-visible{
81
- outline:1px solid var(--iui-color-foreground-primary);
81
+ outline:1px solid var(--iui-color-text-accent);
82
82
  outline-offset:1px;
83
83
  }
84
84
  .iui-breadcrumbs-item-overrides > :any-link:focus-visible{
85
- outline:1px solid var(--iui-color-foreground-primary);
85
+ outline:1px solid var(--iui-color-text-accent);
86
86
  outline-offset:1px;
87
87
  }
88
88
  @supports not selector(*:focus-visible){
89
89
  .iui-breadcrumbs-item-overrides > :-webkit-any-link:focus{
90
- outline:1px solid var(--iui-color-foreground-primary);
90
+ outline:1px solid var(--iui-color-text-accent);
91
91
  outline-offset:1px;
92
92
  }
93
93
  .iui-breadcrumbs-item-overrides > :-moz-any-link:focus{
94
- outline:1px solid var(--iui-color-foreground-primary);
94
+ outline:1px solid var(--iui-color-text-accent);
95
95
  outline-offset:1px;
96
96
  }
97
97
  .iui-breadcrumbs-item-overrides > :any-link:focus{
98
- outline:1px solid var(--iui-color-foreground-primary);
98
+ outline:1px solid var(--iui-color-text-accent);
99
99
  outline-offset:1px;
100
100
  }
101
101
  }
102
102
  .iui-breadcrumbs-item-overrides > :-webkit-any-link:hover{
103
- color:var(--iui-color-foreground-primary-hover);
103
+ color:var(--iui-color-text-accent-hover);
104
104
  }
105
105
  .iui-breadcrumbs-item-overrides > :-moz-any-link:hover{
106
- color:var(--iui-color-foreground-primary-hover);
106
+ color:var(--iui-color-text-accent-hover);
107
107
  }
108
108
  .iui-breadcrumbs-item-overrides > :any-link:hover{
109
- color:var(--iui-color-foreground-primary-hover);
109
+ color:var(--iui-color-text-accent-hover);
110
110
  }
111
111
  .iui-breadcrumbs-item-overrides > :-webkit-any-link:hover{
112
112
  text-decoration:underline;
@@ -137,61 +137,38 @@
137
137
  text-decoration:none;
138
138
  }
139
139
  }
140
- .iui-theme-light .iui-breadcrumbs-item-overrides > :-webkit-any-link, .iui-theme-dark .iui-breadcrumbs-item-overrides > :-webkit-any-link{
141
- text-decoration:none;
142
- }
143
- .iui-theme-light .iui-breadcrumbs-item-overrides > :-moz-any-link, .iui-theme-dark .iui-breadcrumbs-item-overrides > :-moz-any-link{
144
- text-decoration:none;
145
- }
146
- .iui-theme-light .iui-breadcrumbs-item-overrides > :any-link, .iui-theme-dark .iui-breadcrumbs-item-overrides > :any-link{
147
- text-decoration:none;
148
- }
149
- .iui-theme-light .iui-breadcrumbs-item-overrides > :-webkit-any-link:hover, .iui-theme-dark .iui-breadcrumbs-item-overrides > :-webkit-any-link:hover{
150
- text-decoration:underline;
151
- }
152
- .iui-theme-light .iui-breadcrumbs-item-overrides > :-moz-any-link:hover, .iui-theme-dark .iui-breadcrumbs-item-overrides > :-moz-any-link:hover{
153
- text-decoration:underline;
154
- }
155
- .iui-theme-light .iui-breadcrumbs-item-overrides > :any-link:hover, .iui-theme-dark .iui-breadcrumbs-item-overrides > :any-link:hover{
156
- text-decoration:underline;
157
- }
158
-
159
- .iui-theme-light-hc .iui-breadcrumbs-item-overrides > :-webkit-any-link, .iui-theme-dark-hc .iui-breadcrumbs-item-overrides > :-webkit-any-link{
140
+ [data-iui-contrast=high] .iui-breadcrumbs-item-overrides > :-webkit-any-link{
160
141
  text-decoration:underline;
161
142
  }
162
-
163
- .iui-theme-light-hc .iui-breadcrumbs-item-overrides > :-moz-any-link, .iui-theme-dark-hc .iui-breadcrumbs-item-overrides > :-moz-any-link{
143
+ [data-iui-contrast=high] .iui-breadcrumbs-item-overrides > :-moz-any-link{
164
144
  text-decoration:underline;
165
145
  }
166
-
167
- .iui-theme-light-hc .iui-breadcrumbs-item-overrides > :any-link, .iui-theme-dark-hc .iui-breadcrumbs-item-overrides > :any-link{
146
+ [data-iui-contrast=high] .iui-breadcrumbs-item-overrides > :any-link{
168
147
  text-decoration:underline;
169
148
  }
170
- .iui-theme-light-hc .iui-breadcrumbs-item-overrides > :-webkit-any-link:hover, .iui-theme-dark-hc .iui-breadcrumbs-item-overrides > :-webkit-any-link:hover{
149
+ [data-iui-contrast=high] .iui-breadcrumbs-item-overrides > :-webkit-any-link:hover{
171
150
  text-decoration:none;
172
151
  }
173
- .iui-theme-light-hc .iui-breadcrumbs-item-overrides > :-moz-any-link:hover, .iui-theme-dark-hc .iui-breadcrumbs-item-overrides > :-moz-any-link:hover{
152
+ [data-iui-contrast=high] .iui-breadcrumbs-item-overrides > :-moz-any-link:hover{
174
153
  text-decoration:none;
175
154
  }
176
- .iui-theme-light-hc .iui-breadcrumbs-item-overrides > :any-link:hover, .iui-theme-dark-hc .iui-breadcrumbs-item-overrides > :any-link:hover{
155
+ [data-iui-contrast=high] .iui-breadcrumbs-item-overrides > :any-link:hover{
177
156
  text-decoration:none;
178
157
  }
179
-
180
158
  .iui-breadcrumbs-item-overrides > :-webkit-any-link:focus{
181
159
  outline-offset:-1px;
182
160
  }
183
-
184
161
  .iui-breadcrumbs-item-overrides > :-moz-any-link:focus{
185
162
  outline-offset:-1px;
186
163
  }
187
-
188
164
  .iui-breadcrumbs-item-overrides > :any-link:focus{
189
165
  outline-offset:-1px;
190
166
  }
191
167
  .iui-breadcrumbs-item-overrides .iui-button.iui-button{
192
- --_iui-button-text-color:var(--iui-color-foreground-2);
168
+ --_iui-button-text-color:var(--iui-color-text);
193
169
  --_iui-button-background-color:transparent;
194
170
  --_iui-button-border-color:transparent;
171
+ --_iui-button-icon-fill:var(--iui-color-icon);
195
172
  --_iui-button-gap:var(--iui-size-xs);
196
173
  --_iui-button-padding-block:var(--iui-size-2xs);
197
174
  --_iui-button-padding-inline:var(--iui-size-m);
@@ -200,17 +177,19 @@
200
177
  border:none;
201
178
  }
202
179
  .iui-breadcrumbs-item-overrides .iui-button.iui-button:where(:hover, :active){
203
- --_iui-button-text-color:var(--iui-color-foreground-1);
180
+ --_iui-button-text-color:var(--iui-color-text-hover);
204
181
  --_iui-button-background-color:var(--iui-color-background-transparent-hover);
182
+ --_iui-button-icon-fill:var(--iui-color-icon-hover);
205
183
  }
206
184
  .iui-breadcrumbs-item-overrides .iui-button.iui-button:where(:focus){
207
185
  outline-offset:-1px;
208
186
  outline-width:1px;
209
187
  }
210
188
  .iui-breadcrumbs-item-overrides .iui-button.iui-button:where([disabled], :disabled, [aria-disabled="true"]){
211
- --_iui-button-text-color:var(--iui-color-foreground-5);
189
+ --_iui-button-text-color:var(--iui-color-text-disabled);
212
190
  --_iui-button-background-color:transparent;
213
191
  --_iui-button-border-color:transparent;
192
+ --_iui-button-icon-fill:var(--iui-color-icon-disabled);
214
193
  }
215
194
  .iui-breadcrumbs-item-overrides .iui-button > span{
216
195
  overflow:hidden;
@@ -218,7 +197,7 @@
218
197
  text-overflow:ellipsis;
219
198
  }
220
199
  .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{
221
- --_iui-button-text-color:var(--iui-color-foreground-primary);
200
+ --_iui-button-text-color:var(--iui-color-text-accent);
222
201
  }
223
202
 
224
203
  .iui-breadcrumbs-text{
@@ -229,24 +208,24 @@
229
208
  line-height:var(--iui-component-height);
230
209
  }
231
210
  a.iui-breadcrumbs-text{
232
- color:var(--iui-color-foreground-primary);
233
- -webkit-tap-highlight-color:hsl(var(--iui-color-foreground-primary-hsl)/var(--iui-opacity-6));
211
+ color:var(--iui-color-text-accent);
212
+ -webkit-tap-highlight-color:hsl(var(--iui-color-accent-hsl)/var(--iui-opacity-6));
234
213
  border-radius:var(--iui-border-radius-1);
235
214
  cursor:pointer;
236
215
  text-decoration:none;
237
216
  }
238
217
  a.iui-breadcrumbs-text:focus-visible{
239
- outline:1px solid var(--iui-color-foreground-primary);
218
+ outline:1px solid var(--iui-color-text-accent);
240
219
  outline-offset:1px;
241
220
  }
242
221
  @supports not selector(*:focus-visible){
243
222
  a.iui-breadcrumbs-text:focus{
244
- outline:1px solid var(--iui-color-foreground-primary);
223
+ outline:1px solid var(--iui-color-text-accent);
245
224
  outline-offset:1px;
246
225
  }
247
226
  }
248
227
  a.iui-breadcrumbs-text:hover{
249
- color:var(--iui-color-foreground-primary-hover);
228
+ color:var(--iui-color-text-accent-hover);
250
229
  }
251
230
  a.iui-breadcrumbs-text:hover{
252
231
  text-decoration:underline;
@@ -259,20 +238,12 @@ a.iui-breadcrumbs-text:hover{
259
238
  text-decoration:none;
260
239
  }
261
240
  }
262
- .iui-theme-light a.iui-breadcrumbs-text, .iui-theme-dark a.iui-breadcrumbs-text{
263
- text-decoration:none;
264
- }
265
- .iui-theme-light a.iui-breadcrumbs-text:hover, .iui-theme-dark a.iui-breadcrumbs-text:hover{
266
- text-decoration:underline;
267
- }
268
-
269
- .iui-theme-light-hc a.iui-breadcrumbs-text, .iui-theme-dark-hc a.iui-breadcrumbs-text{
241
+ [data-iui-contrast=high] a.iui-breadcrumbs-text{
270
242
  text-decoration:underline;
271
243
  }
272
- .iui-theme-light-hc a.iui-breadcrumbs-text:hover, .iui-theme-dark-hc a.iui-breadcrumbs-text:hover{
244
+ [data-iui-contrast=high] a.iui-breadcrumbs-text:hover{
273
245
  text-decoration:none;
274
246
  }
275
-
276
247
  a.iui-breadcrumbs-text:focus{
277
248
  outline-offset:-1px;
278
249
  }
@@ -314,9 +285,10 @@ a.iui-breadcrumbs-text:focus{
314
285
  --_iui-button-padding-block:var(--iui-size-2xs);
315
286
  --_iui-button-padding-inline:var(--iui-size-m);
316
287
  --_iui-button-min-height:var(--iui-component-height);
317
- --_iui-button-text-color:var(--iui-color-foreground-2);
288
+ --_iui-button-text-color:var(--iui-color-text);
318
289
  --_iui-button-background-color:transparent;
319
290
  --_iui-button-border-color:transparent;
291
+ --_iui-button-icon-fill:var(--iui-color-icon);
320
292
  --_iui-button-gap:var(--iui-size-xs);
321
293
  --_iui-button-padding-block:var(--iui-size-2xs);
322
294
  --_iui-button-padding-inline:var(--iui-size-m);
@@ -324,33 +296,35 @@ a.iui-breadcrumbs-text:focus{
324
296
  --_iui-button-padding-inline:var(--iui-size-xs);
325
297
  padding:0;
326
298
  border:none;
327
- color:var(--iui-color-foreground-primary);
299
+ color:var(--iui-color-text-accent);
328
300
  }
329
301
  .iui-breadcrumbs-button:focus-visible{
330
- outline:1px solid var(--iui-color-foreground-primary);
302
+ outline:1px solid var(--iui-color-border-accent);
331
303
  outline-offset:-1px;
332
304
  }
333
305
  @supports not selector(*:focus-visible){
334
306
  .iui-breadcrumbs-button:focus{
335
- outline:1px solid var(--iui-color-foreground-primary);
307
+ outline:1px solid var(--iui-color-border-accent);
336
308
  outline-offset:-1px;
337
309
  }
338
310
  }
339
311
  .iui-breadcrumbs-button:where(:hover, :active){
340
- --_iui-button-text-color:var(--iui-color-foreground-1);
312
+ --_iui-button-text-color:var(--iui-color-text-hover);
341
313
  --_iui-button-background-color:var(--iui-color-background-transparent-hover);
314
+ --_iui-button-icon-fill:var(--iui-color-icon-hover);
342
315
  }
343
316
  .iui-breadcrumbs-button:where(:focus){
344
317
  outline-offset:-1px;
345
318
  outline-width:1px;
346
319
  }
347
320
  .iui-breadcrumbs-button:where([disabled], :disabled, [aria-disabled="true"]){
348
- --_iui-button-text-color:var(--iui-color-foreground-5);
321
+ --_iui-button-text-color:var(--iui-color-text-disabled);
349
322
  --_iui-button-background-color:transparent;
350
323
  --_iui-button-border-color:transparent;
324
+ --_iui-button-icon-fill:var(--iui-color-icon-disabled);
351
325
  }
352
326
  .iui-breadcrumbs-button[aria-current]{
353
- color:var(--iui-color-foreground-2);
327
+ color:var(--iui-color-text);
354
328
  }
355
329
 
356
330
  .iui-breadcrumbs-separator{
@@ -362,7 +336,7 @@ a.iui-breadcrumbs-text:focus{
362
336
  flex-shrink:0;
363
337
  width:var(--iui-size-s);
364
338
  height:var(--iui-size-s);
365
- fill:var(--iui-color-foreground-4);
339
+ fill:var(--iui-color-icon-muted);
366
340
  }
367
341
  @media (forced-colors: active){
368
342
  .iui-breadcrumbs-separator svg{