@itwin/itwinui-css 1.0.0-dev.1 → 1.0.0-dev.2

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 (49) hide show
  1. package/css/alert.css +78 -78
  2. package/css/all.css +1744 -2220
  3. package/css/anchor.css +3 -3
  4. package/css/avatar.css +46 -46
  5. package/css/backdrop.css +6 -4
  6. package/css/badge.css +8 -8
  7. package/css/blockquote.css +6 -6
  8. package/css/breadcrumbs.css +57 -52
  9. package/css/button.css +93 -89
  10. package/css/carousel.css +15 -14
  11. package/css/checkbox.css +20 -20
  12. package/css/code.css +14 -14
  13. package/css/color-picker.css +36 -39
  14. package/css/date-picker.css +59 -88
  15. package/css/dialog.css +25 -25
  16. package/css/expandable-block.css +33 -30
  17. package/css/fieldset.css +7 -7
  18. package/css/file-upload.css +13 -12
  19. package/css/footer.css +11 -11
  20. package/css/global.css +50 -617
  21. package/css/header.css +52 -51
  22. package/css/information-panel.css +33 -32
  23. package/css/input.css +56 -56
  24. package/css/keyboard.css +6 -6
  25. package/css/location-marker.css +26 -18
  26. package/css/menu.css +34 -27
  27. package/css/non-ideal-state.css +12 -12
  28. package/css/progress-indicator.css +33 -35
  29. package/css/radio-tile.css +33 -33
  30. package/css/radio.css +20 -20
  31. package/css/select.css +83 -80
  32. package/css/side-navigation.css +27 -26
  33. package/css/skip-to-content.css +11 -11
  34. package/css/slider.css +59 -32
  35. package/css/stepper.css +15 -15
  36. package/css/surface.css +2 -2
  37. package/css/table.css +151 -133
  38. package/css/tabs.css +54 -47
  39. package/css/tag.css +24 -25
  40. package/css/text.css +24 -24
  41. package/css/tile.css +120 -101
  42. package/css/time-picker.css +16 -14
  43. package/css/toast.css +47 -47
  44. package/css/toggle-switch.css +26 -26
  45. package/css/tooltip.css +6 -6
  46. package/css/tree.css +24 -22
  47. package/css/utils.css +162 -148
  48. package/css/workflow-diagram.css +8 -8
  49. package/package.json +2 -2
package/css/anchor.css CHANGED
@@ -4,8 +4,8 @@
4
4
  *--------------------------------------------------------------------------------------------*/
5
5
  .iui-anchor{
6
6
  color:var(--iui-color-foreground-primary);
7
- -webkit-tap-highlight-color:rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-5));
8
- border-radius:4px;
7
+ -webkit-tap-highlight-color:hsl(var(--iui-color-foreground-primary-hsl)/var(--iui-opacity-6));
8
+ border-radius:var(--iui-border-radius-1);
9
9
  cursor:pointer;
10
10
  text-decoration:none;
11
11
  }
@@ -20,7 +20,7 @@
20
20
  }
21
21
  }
22
22
  .iui-anchor:hover{
23
- color:var(--iui-color-foreground-primary-overlay);
23
+ color:var(--iui-color-foreground-primary-hover);
24
24
  }
25
25
  .iui-anchor:hover{
26
26
  text-decoration:underline;
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 2px rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-6));
29
+ box-shadow:inset 0 0 0 var(--iui-size-3xs) var(--iui-color-background-transparent-hover);
30
30
  }
31
31
  .iui-avatar > .iui-initials{
32
32
  display:flex;
@@ -40,7 +40,7 @@
40
40
  margin:0;
41
41
  border-radius:50%;
42
42
  font-style:normal;
43
- font-weight:600;
43
+ font-weight:var(--iui-font-weight-semibold);
44
44
  text-align:center;
45
45
  text-decoration:none;
46
46
  text-transform:uppercase;
@@ -74,18 +74,18 @@
74
74
  align-items:center;
75
75
  justify-content:center;
76
76
  position:absolute;
77
- right:-2px;
78
- bottom:-2px;
77
+ right:calc(0px - var(--iui-size-3xs));
78
+ bottom:calc(0px - var(--iui-size-3xs));
79
79
  width:25%;
80
80
  height:25%;
81
81
  border-radius:50%;
82
- border:2px solid var(--iui-color-background-1);
82
+ border:var(--iui-size-3xs) solid var(--iui-color-background-1);
83
83
  background-color:var(--iui-color-background-5);
84
84
  }
85
85
  .iui-avatar > .iui-status::after{
86
86
  content:"";
87
- width:var(--_iui-avatar-status-size, 8px);
88
- height:var(--_iui-avatar-status-size, 8px);
87
+ width:var(--_iui-avatar-status-size, var(--iui-size-xs));
88
+ height:var(--_iui-avatar-status-size, var(--iui-size-xs));
89
89
  }
90
90
  .iui-avatar > .iui-status.iui-online{
91
91
  background-color:var(--iui-color-background-positive);
@@ -113,16 +113,16 @@
113
113
  }
114
114
  .iui-avatar > .iui-status.iui-offline{
115
115
  background-color:var(--iui-color-background-1);
116
- box-shadow:inset 0 0 0 1px rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-3));
116
+ box-shadow:inset 0 0 0 1px var(--iui-color-foreground-3);
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-icon-color);
121
+ background-color:var(--iui-color-foreground-4);
122
122
  }
123
123
  .iui-avatar.iui-avatar-count > .iui-initials{
124
124
  background-color:var(--iui-color-background-3);
125
- color:var(--iui-text-color-muted);
125
+ color:var(--iui-color-foreground-4);
126
126
  }
127
127
  .iui-avatar.iui-avatar-count:focus{
128
128
  outline:none;
@@ -134,43 +134,43 @@
134
134
  outline:none;
135
135
  }
136
136
  .iui-avatar.iui-avatar-count:focus:not(:focus-visible) > .iui-stroke{
137
- box-shadow:inset 0 0 0 2px rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-6));
137
+ box-shadow:inset 0 0 0 var(--iui-size-3xs) var(--iui-color-background-transparent-hover);
138
138
  }
139
139
  .iui-avatar.iui-avatar{
140
- width:32px;
141
- height:32px;
142
- --_iui-avatar-status-size:6px;
140
+ width:var(--iui-size-xl);
141
+ height:var(--iui-size-xl);
142
+ --_iui-avatar-status-size:calc(var(--iui-size-2xs) * 1.5);
143
143
  }
144
144
  .iui-avatar.iui-avatar > .iui-initials{
145
- line-height:32px;
146
- font-size:16px;
145
+ line-height:var(--iui-size-xl);
146
+ font-size:var(--iui-font-size-2);
147
147
  }
148
148
  .iui-avatar.iui-small{
149
- width:24px;
150
- height:24px;
151
- --_iui-avatar-status-size:4px;
149
+ width:calc(1.5 * var(--iui-size-m));
150
+ height:calc(1.5 * var(--iui-size-m));
151
+ --_iui-avatar-status-size:var(--iui-size-2xs);
152
152
  }
153
153
  .iui-avatar.iui-small > .iui-initials{
154
- line-height:24px;
155
- font-size:12px;
154
+ line-height:calc(1.5 * var(--iui-size-m));
155
+ font-size:var(--iui-font-size-0);
156
156
  }
157
157
  .iui-avatar.iui-large{
158
- width:48px;
159
- height:48px;
160
- --_iui-avatar-status-size:8px;
158
+ width:calc(3 * var(--iui-size-m));
159
+ height:calc(3 * var(--iui-size-m));
160
+ --_iui-avatar-status-size:var(--iui-size-xs);
161
161
  }
162
162
  .iui-avatar.iui-large > .iui-initials{
163
- line-height:48px;
164
- font-size:18px;
163
+ line-height:calc(3 * var(--iui-size-m));
164
+ font-size:var(--iui-font-size-3);
165
165
  }
166
166
  .iui-avatar.iui-x-large{
167
- width:64px;
168
- height:64px;
169
- --_iui-avatar-status-size:12px;
167
+ width:var(--iui-size-2xl);
168
+ height:var(--iui-size-2xl);
169
+ --_iui-avatar-status-size:var(--iui-size-s);
170
170
  }
171
171
  .iui-avatar.iui-x-large > .iui-initials{
172
- line-height:64px;
173
- font-size:24px;
172
+ line-height:var(--iui-size-2xl);
173
+ font-size:var(--iui-font-size-4);
174
174
  }
175
175
 
176
176
  .iui-avatar-list{
@@ -178,49 +178,49 @@
178
178
  flex-wrap:wrap;
179
179
  }
180
180
  .iui-avatar-list .iui-avatar:not(:first-child){
181
- margin-left:4px;
181
+ margin-left:var(--iui-size-2xs);
182
182
  }
183
183
  .iui-avatar-list .iui-avatar:not(:first-child).iui-small{
184
- margin-left:2px;
184
+ margin-left:var(--iui-size-3xs);
185
185
  }
186
186
  .iui-avatar-list .iui-avatar:not(:first-child).iui-large{
187
- margin-left:8px;
187
+ margin-left:var(--iui-size-xs);
188
188
  }
189
189
  .iui-avatar-list .iui-avatar:not(:first-child).iui-x-large{
190
- margin-left:12px;
190
+ margin-left:var(--iui-size-s);
191
191
  }
192
192
  .iui-avatar-list.iui-stacked .iui-avatar:not(:first-child){
193
- margin-left:-4px;
193
+ margin-left:calc(0px - var(--iui-size-2xs));
194
194
  }
195
195
  .iui-avatar-list.iui-stacked .iui-avatar:not(:first-child) .iui-initials{
196
- box-shadow:0 0 0 4px var(--iui-color-background-1);
196
+ box-shadow:0 0 0 var(--iui-size-2xs) var(--iui-color-background-1);
197
197
  }
198
198
  .iui-avatar-list.iui-stacked .iui-avatar:not(:first-child).iui-small{
199
- margin-left:-2px;
199
+ margin-left:calc(0px - var(--iui-size-3xs));
200
200
  }
201
201
  .iui-avatar-list.iui-stacked .iui-avatar:not(:first-child).iui-small .iui-initials{
202
- box-shadow:0 0 0 2px var(--iui-color-background-1);
202
+ box-shadow:0 0 0 var(--iui-size-3xs) var(--iui-color-background-1);
203
203
  }
204
204
  .iui-avatar-list.iui-stacked .iui-avatar:not(:first-child).iui-large{
205
- margin-left:-8px;
205
+ margin-left:calc(0px - var(--iui-size-xs));
206
206
  }
207
207
  .iui-avatar-list.iui-stacked .iui-avatar:not(:first-child).iui-x-large{
208
- margin-left:-12px;
208
+ margin-left:calc(0px - var(--iui-size-s));
209
209
  }
210
210
  @media (prefers-reduced-motion: no-preference){
211
211
  .iui-avatar-list.iui-stacked.iui-animated .iui-avatar{
212
- transition:margin-left 0.4s ease-out;
212
+ transition:margin-left var(--iui-duration-2) ease-out;
213
213
  }
214
214
  }
215
215
  .iui-avatar-list.iui-stacked.iui-animated:hover .iui-avatar:not(:first-child){
216
- margin-left:4px;
216
+ margin-left:var(--iui-size-2xs);
217
217
  }
218
218
  .iui-avatar-list.iui-stacked.iui-animated:hover .iui-avatar:not(:first-child).iui-small{
219
- margin-left:2px;
219
+ margin-left:var(--iui-size-3xs);
220
220
  }
221
221
  .iui-avatar-list.iui-stacked.iui-animated:hover .iui-avatar:not(:first-child).iui-large{
222
- margin-left:8px;
222
+ margin-left:var(--iui-size-xs);
223
223
  }
224
224
  .iui-avatar-list.iui-stacked.iui-animated:hover .iui-avatar:not(:first-child).iui-x-large{
225
- margin-left:12px;
225
+ margin-left:var(--iui-size-s);
226
226
  }
package/css/backdrop.css CHANGED
@@ -10,15 +10,17 @@
10
10
  left:0;
11
11
  width:100%;
12
12
  height:100%;
13
- background-color:rgba(0, 0, 0, 0.4);
14
13
  background-color:rgba(0, 0, 0, var(--iui-opacity-4));
15
- transition:visibility 0s linear, opacity 0.2s ease-out;
16
- transition-delay:0.2s, 0s;
14
+ transition:visibility var(--iui-duration-0) linear, opacity var(--iui-duration-1) ease-out;
15
+ transition-delay:var(--iui-duration-1), var(--iui-duration-0);
17
16
  }
18
17
  .iui-backdrop:not(.iui-backdrop-visible){
19
18
  visibility:hidden;
20
19
  opacity:0;
21
20
  }
22
21
  .iui-backdrop.iui-backdrop-visible{
23
- transition-delay:0s;
22
+ transition-delay:var(--iui-duration-0);
23
+ }
24
+ .iui-backdrop.iui-backdrop-fixed{
25
+ position:fixed;
24
26
  }
package/css/badge.css CHANGED
@@ -3,17 +3,17 @@
3
3
  * See LICENSE.md in the project root for license terms and full copyright notice.
4
4
  *--------------------------------------------------------------------------------------------*/
5
5
  .iui-badge{
6
- --iui-badge-background-color:#c7ccd1;
7
- --_iui-badge-text-color:rgba(0, 0, 0, 0.6);
6
+ --iui-badge-background-color:hsl(210, 10%, 80%);
7
+ --_iui-badge-text-color:hsl(0 0% 0% / 0.6);
8
8
  margin:0;
9
9
  padding:0;
10
10
  border:none;
11
11
  vertical-align:baseline;
12
12
  display:inline-block;
13
- font-size:12px;
14
- padding:0 6px;
15
- margin:6px 0;
16
- border-radius:4px;
13
+ font-size:var(--iui-font-size-0);
14
+ padding:0 calc(var(--iui-size-2xs) * 1.5);
15
+ margin:calc(var(--iui-size-s) * 0.5) 0;
16
+ border-radius:var(--iui-border-radius-1);
17
17
  background-color:var(--iui-badge-background-color);
18
18
  color:var(--_iui-badge-text-color);
19
19
  text-transform:uppercase;
@@ -21,9 +21,9 @@
21
21
  -moz-user-select:none;
22
22
  -ms-user-select:none;
23
23
  user-select:none;
24
- max-width:calc(20ch + 12px);
24
+ max-width:calc(20ch + var(--iui-size-2xs) * 1.5 * 2);
25
25
  white-space:nowrap;
26
26
  overflow:hidden;
27
27
  text-overflow:ellipsis;
28
- font-weight:600;
28
+ font-weight:var(--iui-font-weight-semibold);
29
29
  }
package/css/blockquote.css CHANGED
@@ -9,17 +9,17 @@
9
9
  vertical-align:baseline;
10
10
  display:block;
11
11
  position:relative;
12
- padding:12px 16px;
13
- margin:12px 0;
12
+ padding:var(--iui-size-s) var(--iui-size-m);
13
+ margin:var(--iui-size-s) 0;
14
14
  text-align:justify;
15
- box-shadow:0 1px 5px rgba(0, 0, 0, 0.25);
16
- border-radius:4px;
15
+ box-shadow:var(--iui-shadow-1);
16
+ border-radius:var(--iui-border-radius-1);
17
17
  background-color:var(--iui-color-background-1);
18
- border-left:8px solid var(--iui-color-foreground-primary);
18
+ border-left:var(--iui-size-xs) solid var(--iui-color-foreground-primary);
19
19
  }
20
20
  .iui-blockquote > footer{
21
21
  text-align:right;
22
- color:var(--iui-text-color-muted);
22
+ color:var(--iui-color-foreground-4);
23
23
  }
24
24
  .iui-blockquote > footer > cite{
25
25
  font-style:normal;
package/css/breadcrumbs.css CHANGED
@@ -3,13 +3,14 @@
3
3
  * See LICENSE.md in the project root for license terms and full copyright notice.
4
4
  *--------------------------------------------------------------------------------------------*/
5
5
  .iui-breadcrumbs{
6
+ --_iui-breadcrumbs-height:var(--iui-component-height);
6
7
  margin:0;
7
8
  padding:0;
8
9
  border:none;
9
10
  vertical-align:baseline;
10
11
  display:flex;
11
12
  align-items:center;
12
- height:40px;
13
+ height:var(--_iui-breadcrumbs-height);
13
14
  }
14
15
 
15
16
  .iui-breadcrumbs-list{
@@ -37,40 +38,40 @@
37
38
  }
38
39
 
39
40
  .iui-breadcrumbs-item-overrides > *{
40
- padding:0 8px;
41
+ padding:0 var(--iui-size-xs);
41
42
  overflow:hidden;
42
43
  white-space:nowrap;
43
44
  text-overflow:ellipsis;
44
45
  }
45
46
  .iui-breadcrumbs-item-overrides > *:not(.iui-button){
46
- color:var(--iui-text-color);
47
+ color:var(--iui-color-foreground-2);
47
48
  }
48
49
  .iui-breadcrumbs-item-overrides > :-webkit-any-link{
49
50
  color:var(--iui-color-foreground-primary);
50
- -webkit-tap-highlight-color:rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-5));
51
- border-radius:4px;
51
+ -webkit-tap-highlight-color:hsl(var(--iui-color-foreground-primary-hsl)/var(--iui-opacity-6));
52
+ border-radius:var(--iui-border-radius-1);
52
53
  cursor:pointer;
53
54
  text-decoration:none;
54
55
  box-sizing:border-box;
55
- line-height:40px;
56
+ line-height:var(--iui-component-height);
56
57
  }
57
58
  .iui-breadcrumbs-item-overrides > :-moz-any-link{
58
59
  color:var(--iui-color-foreground-primary);
59
- -webkit-tap-highlight-color:rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-5));
60
- border-radius:4px;
60
+ -webkit-tap-highlight-color:hsl(var(--iui-color-foreground-primary-hsl)/var(--iui-opacity-6));
61
+ border-radius:var(--iui-border-radius-1);
61
62
  cursor:pointer;
62
63
  text-decoration:none;
63
64
  box-sizing:border-box;
64
- line-height:40px;
65
+ line-height:var(--iui-component-height);
65
66
  }
66
67
  .iui-breadcrumbs-item-overrides > :any-link{
67
68
  color:var(--iui-color-foreground-primary);
68
- -webkit-tap-highlight-color:rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-5));
69
- border-radius:4px;
69
+ -webkit-tap-highlight-color:hsl(var(--iui-color-foreground-primary-hsl)/var(--iui-opacity-6));
70
+ border-radius:var(--iui-border-radius-1);
70
71
  cursor:pointer;
71
72
  text-decoration:none;
72
73
  box-sizing:border-box;
73
- line-height:40px;
74
+ line-height:var(--iui-component-height);
74
75
  }
75
76
  .iui-breadcrumbs-item-overrides > :-webkit-any-link:focus-visible{
76
77
  outline:1px solid var(--iui-color-foreground-primary);
@@ -99,13 +100,13 @@
99
100
  }
100
101
  }
101
102
  .iui-breadcrumbs-item-overrides > :-webkit-any-link:hover{
102
- color:var(--iui-color-foreground-primary-overlay);
103
+ color:var(--iui-color-foreground-primary-hover);
103
104
  }
104
105
  .iui-breadcrumbs-item-overrides > :-moz-any-link:hover{
105
- color:var(--iui-color-foreground-primary-overlay);
106
+ color:var(--iui-color-foreground-primary-hover);
106
107
  }
107
108
  .iui-breadcrumbs-item-overrides > :any-link:hover{
108
- color:var(--iui-color-foreground-primary-overlay);
109
+ color:var(--iui-color-foreground-primary-hover);
109
110
  }
110
111
  .iui-breadcrumbs-item-overrides > :-webkit-any-link:hover{
111
112
  text-decoration:underline;
@@ -188,26 +189,26 @@
188
189
  outline-offset:-1px;
189
190
  }
190
191
  .iui-breadcrumbs-item-overrides .iui-button.iui-button{
191
- --_iui-button-text-color:var(--iui-text-color);
192
+ --_iui-button-text-color:var(--iui-color-foreground-2);
192
193
  --_iui-button-background-color:transparent;
193
194
  --_iui-button-border-color:transparent;
194
- --_iui-button-icon-margin-x:4px;
195
- --_iui-button-gap:8px;
196
- --_iui-button-height:40px;
197
- --_iui-button-padding-inline:16px;
198
- --_iui-button-padding-inline:8px;
195
+ --_iui-button-gap:var(--iui-size-xs);
196
+ --_iui-button-padding-block:var(--iui-size-2xs);
197
+ --_iui-button-padding-inline:var(--iui-size-m);
198
+ --_iui-button-min-height:var(--iui-component-height);
199
+ --_iui-button-padding-inline:var(--iui-size-xs);
199
200
  border:none;
200
201
  }
201
202
  .iui-breadcrumbs-item-overrides .iui-button.iui-button:where(:hover, :active){
202
- --_iui-button-text-color:var(--iui-color-foreground-body);
203
- --_iui-button-background-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-6));
203
+ --_iui-button-text-color:var(--iui-color-foreground-1);
204
+ --_iui-button-background-color:var(--iui-color-background-transparent-hover);
204
205
  }
205
206
  .iui-breadcrumbs-item-overrides .iui-button.iui-button:where(:focus){
206
207
  outline-offset:-1px;
207
208
  outline-width:1px;
208
209
  }
209
210
  .iui-breadcrumbs-item-overrides .iui-button.iui-button:where([disabled], :disabled, [aria-disabled="true"]){
210
- --_iui-button-text-color:var(--iui-text-color-placeholder);
211
+ --_iui-button-text-color:var(--iui-color-foreground-5);
211
212
  --_iui-button-background-color:transparent;
212
213
  --_iui-button-border-color:transparent;
213
214
  }
@@ -221,16 +222,16 @@
221
222
  }
222
223
 
223
224
  .iui-breadcrumbs-text{
224
- padding:0 8px;
225
+ padding:0 var(--iui-size-xs);
225
226
  overflow:hidden;
226
227
  white-space:nowrap;
227
228
  text-overflow:ellipsis;
228
- line-height:40px;
229
+ line-height:var(--iui-component-height);
229
230
  }
230
231
  a.iui-breadcrumbs-text{
231
232
  color:var(--iui-color-foreground-primary);
232
- -webkit-tap-highlight-color:rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-5));
233
- border-radius:4px;
233
+ -webkit-tap-highlight-color:hsl(var(--iui-color-foreground-primary-hsl)/var(--iui-opacity-6));
234
+ border-radius:var(--iui-border-radius-1);
234
235
  cursor:pointer;
235
236
  text-decoration:none;
236
237
  }
@@ -245,7 +246,7 @@ a.iui-breadcrumbs-text:focus-visible{
245
246
  }
246
247
  }
247
248
  a.iui-breadcrumbs-text:hover{
248
- color:var(--iui-color-foreground-primary-overlay);
249
+ color:var(--iui-color-foreground-primary-hover);
249
250
  }
250
251
  a.iui-breadcrumbs-text:hover{
251
252
  text-decoration:underline;
@@ -283,14 +284,15 @@ a.iui-breadcrumbs-text:focus{
283
284
  vertical-align:baseline;
284
285
  font-family:inherit;
285
286
  display:inline-flex;
287
+ flex-shrink:0;
286
288
  align-items:center;
287
289
  vertical-align:middle;
288
290
  justify-content:center;
289
291
  position:relative;
290
- border-radius:4px;
291
- line-height:24px;
292
- font-size:14px;
293
- font-weight:400;
292
+ border-radius:var(--iui-border-radius-1);
293
+ line-height:var(--iui-size-l);
294
+ font-size:var(--iui-font-size-1);
295
+ font-weight:var(--iui-font-weight-normal);
294
296
  -webkit-user-select:none;
295
297
  -moz-user-select:none;
296
298
  -ms-user-select:none;
@@ -301,22 +303,25 @@ a.iui-breadcrumbs-text:focus{
301
303
  background:var(--_iui-button-background-color);
302
304
  color:var(--_iui-button-text-color);
303
305
  gap:var(--_iui-button-gap);
304
- height:var(--_iui-button-height);
306
+ min-height:var(--_iui-button-min-height);
307
+ min-width:var(--_iui-button-min-height);
308
+ padding-block:var(--_iui-button-padding-block);
305
309
  padding-inline:var(--_iui-button-padding-inline);
306
- transition:background-color 0.2s ease-out, border-color 0.2s ease-out;
310
+ transition:background-color var(--iui-duration-1) ease-out, border-color var(--iui-duration-1) ease-out;
307
311
  -webkit-tap-highlight-color:transparent;
308
312
  text-decoration:none;
309
- --_iui-button-gap:8px;
310
- --_iui-button-height:40px;
311
- --_iui-button-padding-inline:16px;
312
- --_iui-button-text-color:var(--iui-text-color);
313
+ --_iui-button-gap:var(--iui-size-xs);
314
+ --_iui-button-padding-block:var(--iui-size-2xs);
315
+ --_iui-button-padding-inline:var(--iui-size-m);
316
+ --_iui-button-min-height:var(--iui-component-height);
317
+ --_iui-button-text-color:var(--iui-color-foreground-2);
313
318
  --_iui-button-background-color:transparent;
314
319
  --_iui-button-border-color:transparent;
315
- --_iui-button-icon-margin-x:4px;
316
- --_iui-button-gap:8px;
317
- --_iui-button-height:40px;
318
- --_iui-button-padding-inline:16px;
319
- --_iui-button-padding-inline:8px;
320
+ --_iui-button-gap:var(--iui-size-xs);
321
+ --_iui-button-padding-block:var(--iui-size-2xs);
322
+ --_iui-button-padding-inline:var(--iui-size-m);
323
+ --_iui-button-min-height:var(--iui-component-height);
324
+ --_iui-button-padding-inline:var(--iui-size-xs);
320
325
  padding:0;
321
326
  border:none;
322
327
  color:var(--iui-color-foreground-primary);
@@ -332,32 +337,32 @@ a.iui-breadcrumbs-text:focus{
332
337
  }
333
338
  }
334
339
  .iui-breadcrumbs-button:where(:hover, :active){
335
- --_iui-button-text-color:var(--iui-color-foreground-body);
336
- --_iui-button-background-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-6));
340
+ --_iui-button-text-color:var(--iui-color-foreground-1);
341
+ --_iui-button-background-color:var(--iui-color-background-transparent-hover);
337
342
  }
338
343
  .iui-breadcrumbs-button:where(:focus){
339
344
  outline-offset:-1px;
340
345
  outline-width:1px;
341
346
  }
342
347
  .iui-breadcrumbs-button:where([disabled], :disabled, [aria-disabled="true"]){
343
- --_iui-button-text-color:var(--iui-text-color-placeholder);
348
+ --_iui-button-text-color:var(--iui-color-foreground-5);
344
349
  --_iui-button-background-color:transparent;
345
350
  --_iui-button-border-color:transparent;
346
351
  }
347
352
  .iui-breadcrumbs-button[aria-current]{
348
- color:var(--iui-text-color);
353
+ color:var(--iui-color-foreground-2);
349
354
  }
350
355
 
351
356
  .iui-breadcrumbs-separator{
352
357
  display:flex;
353
- margin:0 2px;
358
+ margin:0 var(--iui-size-3xs);
354
359
  }
355
360
  .iui-breadcrumbs-separator svg{
356
361
  display:flex;
357
362
  flex-shrink:0;
358
- width:12px;
359
- height:12px;
360
- fill:var(--iui-icon-color);
363
+ width:var(--iui-size-s);
364
+ height:var(--iui-size-s);
365
+ fill:var(--iui-color-foreground-4);
361
366
  }
362
367
  @media (forced-colors: active){
363
368
  .iui-breadcrumbs-separator svg{