@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/time-picker.css CHANGED
@@ -14,12 +14,12 @@
14
14
  text-align:center;
15
15
  height:calc(var(--iui-size-s) * 26);
16
16
  display:inline-flex;
17
- background-color:var(--iui-color-background-1);
17
+ background-color:var(--iui-color-background);
18
18
  border-top-right-radius:var(--iui-border-radius-1);
19
19
  border-bottom-right-radius:var(--iui-border-radius-1);
20
20
  }
21
21
  .iui-time-picker:not(:first-child){
22
- border-left:1px solid var(--iui-color-background-border);
22
+ border-left:1px solid var(--iui-color-border);
23
23
  }
24
24
  .iui-time-picker:first-child{
25
25
  box-shadow:var(--iui-shadow-1);
@@ -34,7 +34,7 @@
34
34
  scrollbar-width:none;
35
35
  }
36
36
  .iui-time:not(:first-child){
37
- border-left:1px solid var(--iui-color-background-border);
37
+ border-left:1px solid var(--iui-color-border);
38
38
  }
39
39
  .iui-time > ol{
40
40
  margin:0;
@@ -48,32 +48,32 @@
48
48
  border-radius:var(--iui-border-radius-1);
49
49
  }
50
50
  .iui-time > ol > li:focus-visible{
51
- outline:1px solid var(--iui-color-foreground-primary);
51
+ outline:1px solid var(--iui-color-border-accent);
52
52
  outline-offset:-1px;
53
53
  }
54
54
  @supports not selector(*:focus-visible){
55
55
  .iui-time > ol > li:focus{
56
- outline:1px solid var(--iui-color-foreground-primary);
56
+ outline:1px solid var(--iui-color-border-accent);
57
57
  outline-offset:-1px;
58
58
  }
59
59
  }
60
60
  .iui-time > ol > li:hover{
61
61
  cursor:pointer;
62
- background-color:var(--iui-color-background-transparent-hover);
62
+ background-color:var(--iui-color-background-hover);
63
63
  }
64
64
  .iui-time > ol > li.iui-selected{
65
65
  font-weight:var(--iui-font-weight-semibold);
66
66
  cursor:default;
67
- background-color:var(--iui-color-background-primary);
68
- color:var(--iui-color-foreground-accessory);
67
+ background-color:var(--iui-color-background-accent);
68
+ color:var(--iui-color-white);
69
69
  }
70
70
  .iui-time > ol > li.iui-selected:focus-visible{
71
- outline:1px solid var(--iui-color-foreground-accessory);
71
+ outline:1px solid var(--iui-color-white);
72
72
  outline-offset:-3px;
73
73
  }
74
74
  @supports not selector(*:focus-visible){
75
75
  .iui-time > ol > li.iui-selected:focus{
76
- outline:1px solid var(--iui-color-foreground-accessory);
76
+ outline:1px solid var(--iui-color-white);
77
77
  outline-offset:-3px;
78
78
  }
79
79
  }
@@ -87,7 +87,7 @@
87
87
  align-items:center;
88
88
  }
89
89
  .iui-period:not(:first-child){
90
- border-left:1px solid var(--iui-color-background-border);
90
+ border-left:1px solid var(--iui-color-border);
91
91
  }
92
92
  .iui-period > ol{
93
93
  margin:0;
@@ -101,32 +101,32 @@
101
101
  border-radius:var(--iui-border-radius-1);
102
102
  }
103
103
  .iui-period > ol > li:focus-visible{
104
- outline:1px solid var(--iui-color-foreground-primary);
104
+ outline:1px solid var(--iui-color-border-accent);
105
105
  outline-offset:-1px;
106
106
  }
107
107
  @supports not selector(*:focus-visible){
108
108
  .iui-period > ol > li:focus{
109
- outline:1px solid var(--iui-color-foreground-primary);
109
+ outline:1px solid var(--iui-color-border-accent);
110
110
  outline-offset:-1px;
111
111
  }
112
112
  }
113
113
  .iui-period > ol > li:hover{
114
114
  cursor:pointer;
115
- background-color:var(--iui-color-background-transparent-hover);
115
+ background-color:var(--iui-color-background-hover);
116
116
  }
117
117
  .iui-period > ol > li.iui-selected{
118
118
  font-weight:var(--iui-font-weight-semibold);
119
119
  cursor:default;
120
- background-color:var(--iui-color-background-primary);
121
- color:var(--iui-color-foreground-accessory);
120
+ background-color:var(--iui-color-background-accent);
121
+ color:var(--iui-color-white);
122
122
  }
123
123
  .iui-period > ol > li.iui-selected:focus-visible{
124
- outline:1px solid var(--iui-color-foreground-accessory);
124
+ outline:1px solid var(--iui-color-white);
125
125
  outline-offset:-3px;
126
126
  }
127
127
  @supports not selector(*:focus-visible){
128
128
  .iui-period > ol > li.iui-selected:focus{
129
- outline:1px solid var(--iui-color-foreground-accessory);
129
+ outline:1px solid var(--iui-color-white);
130
130
  outline-offset:-3px;
131
131
  }
132
132
  }
package/css/toast.css CHANGED
@@ -84,9 +84,10 @@
84
84
  margin:0 var(--iui-size-m) var(--iui-size-s) var(--iui-size-m);
85
85
  min-height:calc(var(--iui-size-s) * 4);
86
86
  border-radius:var(--iui-border-radius-1);
87
- background-color:var(--iui-color-background-1);
88
- border:1px solid var(--iui-color-foreground-1);
87
+ background-color:var(--iui-color-background);
88
+ border:1px solid var(--iui-color-border);
89
89
  box-shadow:0 0 0 1px rgba(255, 255, 255, var(--iui-opacity-4)), var(--iui-shadow-5);
90
+ overflow:hidden;
90
91
  }
91
92
  .iui-toast > .iui-status-area{
92
93
  display:flex;
@@ -95,14 +96,13 @@
95
96
  align-items:center;
96
97
  width:calc(var(--iui-size-l) * 2);
97
98
  flex-shrink:0;
98
- background-color:var(--iui-color-background-5);
99
99
  }
100
100
  .iui-toast > .iui-status-area > .iui-icon{
101
101
  display:flex;
102
102
  flex-shrink:0;
103
103
  width:var(--iui-size-m);
104
104
  height:var(--iui-size-m);
105
- fill:var(--iui-color-foreground-accessory);
105
+ fill:var(--iui-color-icon-muted);
106
106
  }
107
107
  .iui-toast > .iui-message{
108
108
  flex-grow:1;
@@ -114,7 +114,7 @@
114
114
  line-height:var(--iui-size-l);
115
115
  font-weight:var(--iui-font-weight-normal);
116
116
  font-style:normal;
117
- color:var(--iui-color-foreground-2);
117
+ color:var(--iui-color-text);
118
118
  }
119
119
  .iui-toast-anchor{
120
120
  text-decoration:underline;
@@ -146,143 +146,174 @@
146
146
  }
147
147
  }
148
148
  .iui-toast.iui-informational{
149
- border-color:var(--iui-color-foreground-primary);
149
+ border-color:var(--iui-color-border-informational);
150
150
  }
151
151
  .iui-toast.iui-informational > .iui-message::-moz-selection, .iui-toast.iui-informational > .iui-message *::-moz-selection{
152
- background-color:hsl(var(--iui-color-foreground-primary-hsl)/var(--iui-opacity-5));
152
+ background-color:hsl(var(--iui-color-informational-hsl)/var(--iui-opacity-5));
153
153
  }
154
154
  .iui-toast.iui-informational > .iui-message::selection,
155
155
  .iui-toast.iui-informational > .iui-message *::selection{
156
- background-color:hsl(var(--iui-color-foreground-primary-hsl)/var(--iui-opacity-5));
156
+ background-color:hsl(var(--iui-color-informational-hsl)/var(--iui-opacity-5));
157
157
  }
158
158
  .iui-toast.iui-informational > .iui-status-area{
159
- background-color:var(--iui-color-background-primary);
159
+ background-image:linear-gradient(to right, var(--iui-color-background-informational-muted), var(--iui-color-background));
160
+ }
161
+ .iui-toast.iui-informational > .iui-status-area > .iui-icon{
162
+ fill:var(--iui-color-icon-informational);
160
163
  }
161
164
  .iui-toast.iui-informational > .iui-toast-anchor{
162
- color:var(--iui-color-foreground-primary);
163
- -webkit-tap-highlight-color:hsl(var(--iui-color-foreground-primary-hsl)/var(--iui-opacity-6));
165
+ color:var(--iui-color-text-informational);
166
+ -webkit-tap-highlight-color:hsl(var(--iui-color-informational-hsl)/var(--iui-opacity-6));
164
167
  }
165
168
  .iui-toast.iui-informational > .iui-toast-anchor:focus-visible{
166
- outline:1px solid var(--iui-color-foreground-primary);
169
+ outline:1px solid var(--iui-color-text-informational);
167
170
  outline-offset:1px;
168
171
  }
169
172
  @supports not selector(*:focus-visible){
170
173
  .iui-toast.iui-informational > .iui-toast-anchor:focus{
171
- outline:1px solid var(--iui-color-foreground-primary);
174
+ outline:1px solid var(--iui-color-text-informational);
172
175
  outline-offset:1px;
173
176
  }
174
177
  }
178
+ .iui-toast.iui-informational > .iui-toast-anchor::-moz-selection, .iui-toast.iui-informational > .iui-toast-anchor *::-moz-selection{
179
+ background-color:hsl(var(--iui-color-informational-hsl)/var(--iui-opacity-5));
180
+ }
181
+ .iui-toast.iui-informational > .iui-toast-anchor::selection,
182
+ .iui-toast.iui-informational > .iui-toast-anchor *::selection{
183
+ background-color:hsl(var(--iui-color-informational-hsl)/var(--iui-opacity-5));
184
+ }
175
185
  .iui-toast.iui-informational > .iui-toast-anchor:hover{
176
- color:var(--iui-color-foreground-primary-hover);
186
+ color:var(--iui-color-text-informational-hover);
187
+ }
188
+ .iui-toast.iui-informational > button{
189
+ outline-color:var(--iui-color-text-informational);
177
190
  }
178
191
  .iui-toast.iui-positive{
179
- border-color:var(--iui-color-foreground-positive);
192
+ border-color:var(--iui-color-border-positive);
180
193
  }
181
194
  .iui-toast.iui-positive > .iui-message::-moz-selection, .iui-toast.iui-positive > .iui-message *::-moz-selection{
182
- background-color:hsl(var(--iui-color-foreground-positive-hsl)/var(--iui-opacity-5));
195
+ background-color:hsl(var(--iui-color-positive-hsl)/var(--iui-opacity-5));
183
196
  }
184
197
  .iui-toast.iui-positive > .iui-message::selection,
185
198
  .iui-toast.iui-positive > .iui-message *::selection{
186
- background-color:hsl(var(--iui-color-foreground-positive-hsl)/var(--iui-opacity-5));
199
+ background-color:hsl(var(--iui-color-positive-hsl)/var(--iui-opacity-5));
187
200
  }
188
201
  .iui-toast.iui-positive > .iui-status-area{
189
- background-color:var(--iui-color-background-positive);
202
+ background-image:linear-gradient(to right, var(--iui-color-background-positive-muted), var(--iui-color-background));
203
+ }
204
+ .iui-toast.iui-positive > .iui-status-area > .iui-icon{
205
+ fill:var(--iui-color-icon-positive);
190
206
  }
191
207
  .iui-toast.iui-positive > .iui-toast-anchor{
192
- color:var(--iui-color-foreground-positive);
193
- -webkit-tap-highlight-color:hsl(var(--iui-color-foreground-positive-hsl)/var(--iui-opacity-6));
208
+ color:var(--iui-color-text-positive);
209
+ -webkit-tap-highlight-color:hsl(var(--iui-color-positive-hsl)/var(--iui-opacity-6));
194
210
  }
195
211
  .iui-toast.iui-positive > .iui-toast-anchor:focus-visible{
196
- outline:1px solid var(--iui-color-foreground-positive);
212
+ outline:1px solid var(--iui-color-text-positive);
197
213
  outline-offset:1px;
198
214
  }
199
215
  @supports not selector(*:focus-visible){
200
216
  .iui-toast.iui-positive > .iui-toast-anchor:focus{
201
- outline:1px solid var(--iui-color-foreground-positive);
217
+ outline:1px solid var(--iui-color-text-positive);
202
218
  outline-offset:1px;
203
219
  }
204
220
  }
205
221
  .iui-toast.iui-positive > .iui-toast-anchor::-moz-selection, .iui-toast.iui-positive > .iui-toast-anchor *::-moz-selection{
206
- background-color:hsl(var(--iui-color-foreground-positive-hsl)/var(--iui-opacity-5));
222
+ background-color:hsl(var(--iui-color-positive-hsl)/var(--iui-opacity-5));
207
223
  }
208
224
  .iui-toast.iui-positive > .iui-toast-anchor::selection,
209
225
  .iui-toast.iui-positive > .iui-toast-anchor *::selection{
210
- background-color:hsl(var(--iui-color-foreground-positive-hsl)/var(--iui-opacity-5));
226
+ background-color:hsl(var(--iui-color-positive-hsl)/var(--iui-opacity-5));
211
227
  }
212
228
  .iui-toast.iui-positive > .iui-toast-anchor:hover{
213
- color:var(--iui-color-foreground-positive-hover);
229
+ color:var(--iui-color-text-positive-hover);
214
230
  }
215
- .iui-toast.iui-negative{
216
- border-color:var(--iui-color-foreground-negative);
231
+ .iui-toast.iui-positive > button{
232
+ outline-color:var(--iui-color-text-positive);
217
233
  }
218
- .iui-toast.iui-negative > .iui-message::-moz-selection, .iui-toast.iui-negative > .iui-message *::-moz-selection{
219
- background-color:hsl(var(--iui-color-foreground-negative-hsl)/var(--iui-opacity-5));
234
+ .iui-toast.iui-warning{
235
+ border-color:var(--iui-color-border-warning);
220
236
  }
221
- .iui-toast.iui-negative > .iui-message::selection,
222
- .iui-toast.iui-negative > .iui-message *::selection{
223
- background-color:hsl(var(--iui-color-foreground-negative-hsl)/var(--iui-opacity-5));
237
+ .iui-toast.iui-warning > .iui-message::-moz-selection, .iui-toast.iui-warning > .iui-message *::-moz-selection{
238
+ background-color:hsl(var(--iui-color-warning-hsl)/var(--iui-opacity-5));
224
239
  }
225
- .iui-toast.iui-negative > .iui-status-area{
226
- background-color:var(--iui-color-background-negative);
240
+ .iui-toast.iui-warning > .iui-message::selection,
241
+ .iui-toast.iui-warning > .iui-message *::selection{
242
+ background-color:hsl(var(--iui-color-warning-hsl)/var(--iui-opacity-5));
227
243
  }
228
- .iui-toast.iui-negative > .iui-toast-anchor{
229
- color:var(--iui-color-foreground-negative);
230
- -webkit-tap-highlight-color:hsl(var(--iui-color-foreground-negative-hsl)/var(--iui-opacity-6));
244
+ .iui-toast.iui-warning > .iui-status-area{
245
+ background-image:linear-gradient(to right, var(--iui-color-background-warning-muted), var(--iui-color-background));
231
246
  }
232
- .iui-toast.iui-negative > .iui-toast-anchor:focus-visible{
233
- outline:1px solid var(--iui-color-foreground-negative);
247
+ .iui-toast.iui-warning > .iui-status-area > .iui-icon{
248
+ fill:var(--iui-color-icon-warning);
249
+ }
250
+ .iui-toast.iui-warning > .iui-toast-anchor{
251
+ color:var(--iui-color-text-warning);
252
+ -webkit-tap-highlight-color:hsl(var(--iui-color-warning-hsl)/var(--iui-opacity-6));
253
+ }
254
+ .iui-toast.iui-warning > .iui-toast-anchor:focus-visible{
255
+ outline:1px solid var(--iui-color-text-warning);
234
256
  outline-offset:1px;
235
257
  }
236
258
  @supports not selector(*:focus-visible){
237
- .iui-toast.iui-negative > .iui-toast-anchor:focus{
238
- outline:1px solid var(--iui-color-foreground-negative);
259
+ .iui-toast.iui-warning > .iui-toast-anchor:focus{
260
+ outline:1px solid var(--iui-color-text-warning);
239
261
  outline-offset:1px;
240
262
  }
241
263
  }
242
- .iui-toast.iui-negative > .iui-toast-anchor::-moz-selection, .iui-toast.iui-negative > .iui-toast-anchor *::-moz-selection{
243
- background-color:hsl(var(--iui-color-foreground-negative-hsl)/var(--iui-opacity-5));
264
+ .iui-toast.iui-warning > .iui-toast-anchor::-moz-selection, .iui-toast.iui-warning > .iui-toast-anchor *::-moz-selection{
265
+ background-color:hsl(var(--iui-color-warning-hsl)/var(--iui-opacity-5));
244
266
  }
245
- .iui-toast.iui-negative > .iui-toast-anchor::selection,
246
- .iui-toast.iui-negative > .iui-toast-anchor *::selection{
247
- background-color:hsl(var(--iui-color-foreground-negative-hsl)/var(--iui-opacity-5));
267
+ .iui-toast.iui-warning > .iui-toast-anchor::selection,
268
+ .iui-toast.iui-warning > .iui-toast-anchor *::selection{
269
+ background-color:hsl(var(--iui-color-warning-hsl)/var(--iui-opacity-5));
248
270
  }
249
- .iui-toast.iui-negative > .iui-toast-anchor:hover{
250
- color:var(--iui-color-foreground-negative-hover);
271
+ .iui-toast.iui-warning > .iui-toast-anchor:hover{
272
+ color:var(--iui-color-text-warning-hover);
251
273
  }
252
- .iui-toast.iui-warning{
253
- border-color:var(--iui-color-foreground-warning);
274
+ .iui-toast.iui-warning > button{
275
+ outline-color:var(--iui-color-text-warning);
254
276
  }
255
- .iui-toast.iui-warning > .iui-message::-moz-selection, .iui-toast.iui-warning > .iui-message *::-moz-selection{
256
- background-color:hsl(var(--iui-color-foreground-warning-hsl)/var(--iui-opacity-5));
277
+ .iui-toast.iui-negative{
278
+ border-color:var(--iui-color-border-negative);
257
279
  }
258
- .iui-toast.iui-warning > .iui-message::selection,
259
- .iui-toast.iui-warning > .iui-message *::selection{
260
- background-color:hsl(var(--iui-color-foreground-warning-hsl)/var(--iui-opacity-5));
280
+ .iui-toast.iui-negative > .iui-message::-moz-selection, .iui-toast.iui-negative > .iui-message *::-moz-selection{
281
+ background-color:hsl(var(--iui-color-negative-hsl)/var(--iui-opacity-5));
261
282
  }
262
- .iui-toast.iui-warning > .iui-status-area{
263
- background-color:var(--iui-color-background-warning);
283
+ .iui-toast.iui-negative > .iui-message::selection,
284
+ .iui-toast.iui-negative > .iui-message *::selection{
285
+ background-color:hsl(var(--iui-color-negative-hsl)/var(--iui-opacity-5));
264
286
  }
265
- .iui-toast.iui-warning > .iui-toast-anchor{
266
- color:var(--iui-color-foreground-warning);
267
- -webkit-tap-highlight-color:hsl(var(--iui-color-foreground-warning-hsl)/var(--iui-opacity-6));
287
+ .iui-toast.iui-negative > .iui-status-area{
288
+ background-image:linear-gradient(to right, var(--iui-color-background-negative-muted), var(--iui-color-background));
268
289
  }
269
- .iui-toast.iui-warning > .iui-toast-anchor:focus-visible{
270
- outline:1px solid var(--iui-color-foreground-warning);
290
+ .iui-toast.iui-negative > .iui-status-area > .iui-icon{
291
+ fill:var(--iui-color-icon-negative);
292
+ }
293
+ .iui-toast.iui-negative > .iui-toast-anchor{
294
+ color:var(--iui-color-text-negative);
295
+ -webkit-tap-highlight-color:hsl(var(--iui-color-negative-hsl)/var(--iui-opacity-6));
296
+ }
297
+ .iui-toast.iui-negative > .iui-toast-anchor:focus-visible{
298
+ outline:1px solid var(--iui-color-text-negative);
271
299
  outline-offset:1px;
272
300
  }
273
301
  @supports not selector(*:focus-visible){
274
- .iui-toast.iui-warning > .iui-toast-anchor:focus{
275
- outline:1px solid var(--iui-color-foreground-warning);
302
+ .iui-toast.iui-negative > .iui-toast-anchor:focus{
303
+ outline:1px solid var(--iui-color-text-negative);
276
304
  outline-offset:1px;
277
305
  }
278
306
  }
279
- .iui-toast.iui-warning > .iui-toast-anchor::-moz-selection, .iui-toast.iui-warning > .iui-toast-anchor *::-moz-selection{
280
- background-color:hsl(var(--iui-color-foreground-warning-hsl)/var(--iui-opacity-5));
307
+ .iui-toast.iui-negative > .iui-toast-anchor::-moz-selection, .iui-toast.iui-negative > .iui-toast-anchor *::-moz-selection{
308
+ background-color:hsl(var(--iui-color-negative-hsl)/var(--iui-opacity-5));
281
309
  }
282
- .iui-toast.iui-warning > .iui-toast-anchor::selection,
283
- .iui-toast.iui-warning > .iui-toast-anchor *::selection{
284
- background-color:hsl(var(--iui-color-foreground-warning-hsl)/var(--iui-opacity-5));
310
+ .iui-toast.iui-negative > .iui-toast-anchor::selection,
311
+ .iui-toast.iui-negative > .iui-toast-anchor *::selection{
312
+ background-color:hsl(var(--iui-color-negative-hsl)/var(--iui-opacity-5));
285
313
  }
286
- .iui-toast.iui-warning > .iui-toast-anchor:hover{
287
- color:var(--iui-color-foreground-warning-hover);
314
+ .iui-toast.iui-negative > .iui-toast-anchor:hover{
315
+ color:var(--iui-color-text-negative-hover);
316
+ }
317
+ .iui-toast.iui-negative > button{
318
+ outline-color:var(--iui-color-text-negative);
288
319
  }
package/css/toggle-switch.css CHANGED
@@ -21,11 +21,11 @@
21
21
  user-select:none;
22
22
  cursor:pointer;
23
23
  isolation:isolate;
24
- color:var(--iui-color-foreground-2);
24
+ color:var(--iui-color-text);
25
25
  }
26
26
  .iui-toggle-switch-wrapper.iui-disabled{
27
27
  cursor:not-allowed;
28
- color:var(--iui-color-foreground-4);
28
+ color:var(--iui-color-text-disabled);
29
29
  }
30
30
  @media (forced-colors: active){
31
31
  .iui-toggle-switch-wrapper.iui-disabled{
@@ -54,18 +54,18 @@
54
54
  width:calc((var(--iui-size-m) + var(--iui-size-2xs) * 2) * 2);
55
55
  border-radius:var(--iui-border-radius-round);
56
56
  transition:background-color var(--iui-duration-1) ease-out, border-color var(--iui-duration-1) ease-out;
57
- background-color:var(--iui-color-background-1);
58
- border:1px solid var(--iui-color-foreground-4);
59
- background-color:var(--iui-color-background-1);
60
- border-color:var(--iui-color-foreground-4);
57
+ background-color:var(--iui-color-background);
58
+ border:1px solid var(--iui-color-border-foreground);
59
+ background-color:var(--iui-color-background);
60
+ border-color:var(--iui-color-border-foreground);
61
61
  }
62
62
  .iui-toggle-switch:focus-visible{
63
- outline:1px solid var(--iui-color-foreground-primary);
63
+ outline:1px solid var(--iui-color-border-accent);
64
64
  outline-offset:1px;
65
65
  }
66
66
  @supports not selector(*:focus-visible){
67
67
  .iui-toggle-switch:focus{
68
- outline:1px solid var(--iui-color-foreground-primary);
68
+ outline:1px solid var(--iui-color-border-accent);
69
69
  outline-offset:1px;
70
70
  }
71
71
  }
@@ -79,12 +79,12 @@
79
79
  margin:var(--iui-size-2xs);
80
80
  aspect-ratio:1/1;
81
81
  border-radius:50%;
82
- transition:background-color var(--iui-duration-1) ease-out, opacity var(--iui-duration-1) ease-out;
82
+ transition:background-color var(--iui-duration-1) ease-out;
83
83
  z-index:2;
84
84
  }
85
85
  @media (prefers-reduced-motion: no-preference){
86
86
  .iui-toggle-switch::after{
87
- transition:transform var(--iui-duration-1) ease-out, background-color var(--iui-duration-1) ease-out, opacity var(--iui-duration-1) ease-out;
87
+ transition:transform var(--iui-duration-1) ease-out, background-color var(--iui-duration-1) ease-out;
88
88
  }
89
89
  }
90
90
  @media (forced-colors: active){
@@ -93,34 +93,43 @@
93
93
  }
94
94
  }
95
95
  .iui-toggle-switch::after{
96
- background-color:var(--iui-color-foreground-1);
97
- opacity:var(--iui-opacity-2);
96
+ background-color:var(--iui-color-icon);
98
97
  }
99
98
  @media (forced-colors: active){
100
99
  .iui-toggle-switch::after{
101
100
  background-color:CanvasText;
102
- opacity:1;
103
101
  }
104
102
  }
105
103
  .iui-toggle-switch:hover{
106
- border-color:var(--iui-color-foreground-2);
104
+ border-color:var(--iui-color-border-foreground-hover);
107
105
  }
108
106
  @media (forced-colors: active){
109
107
  .iui-toggle-switch:hover{
110
108
  border-color:CanvasText;
111
109
  }
112
110
  }
111
+ .iui-toggle-switch:hover::after{
112
+ background-color:var(--iui-color-icon-hover);
113
+ }
114
+ .iui-toggle-switch:hover:focus-visible::after{
115
+ background-color:var(--iui-color-icon-hover);
116
+ }
117
+ @supports not selector(*:focus-visible){
118
+ .iui-toggle-switch:hover:focus::after{
119
+ background-color:var(--iui-color-icon-hover);
120
+ }
121
+ }
113
122
  .iui-toggle-switch:focus-visible{
114
- border-color:var(--iui-color-foreground-2);
123
+ border-color:var(--iui-color-border-foreground-hover);
115
124
  }
116
125
  @supports not selector(*:focus-visible){
117
126
  .iui-toggle-switch:focus{
118
- border-color:var(--iui-color-foreground-2);
127
+ border-color:var(--iui-color-border-foreground-hover);
119
128
  }
120
129
  }
121
130
  .iui-toggle-switch:checked{
122
- background-color:var(--iui-color-background-primary);
123
- border-color:var(--iui-color-background-primary);
131
+ background-color:var(--iui-color-background-accent);
132
+ border-color:var(--iui-color-background-accent);
124
133
  }
125
134
  @media (forced-colors: active){
126
135
  .iui-toggle-switch:checked{
@@ -130,33 +139,20 @@
130
139
  }
131
140
  .iui-toggle-switch:checked::after{
132
141
  transform:translateX(calc(var(--iui-size-m) + var(--iui-size-2xs)));
133
- background-color:var(--iui-color-foreground-accessory);
134
- opacity:var(--iui-opacity-2);
142
+ background-color:var(--iui-color-white);
135
143
  }
136
144
  @media (forced-colors: active){
137
145
  .iui-toggle-switch:checked::after{
138
146
  background-color:HighlightText;
139
- opacity:1;
140
147
  }
141
148
  }
142
149
  .iui-toggle-switch:checked ~ .iui-toggle-switch-icon{
143
150
  opacity:var(--iui-opacity-1);
144
151
  }
145
- .iui-toggle-switch:hover::after{
146
- opacity:var(--iui-opacity-1);
147
- }
148
- .iui-toggle-switch:focus-visible::after{
149
- opacity:var(--iui-opacity-1);
150
- }
151
- @supports not selector(*:focus-visible){
152
- .iui-toggle-switch:focus::after{
153
- opacity:var(--iui-opacity-1);
154
- }
155
- }
156
152
  .iui-toggle-switch:disabled{
157
153
  cursor:not-allowed;
158
154
  background-color:var(--iui-color-background-disabled);
159
- border-color:var(--iui-color-background-disabled);
155
+ border-color:var(--iui-color-border-disabled);
160
156
  }
161
157
  @media (forced-colors: active){
162
158
  .iui-toggle-switch:disabled{
@@ -164,8 +160,7 @@
164
160
  }
165
161
  }
166
162
  .iui-toggle-switch:disabled::after{
167
- background-color:var(--iui-color-foreground-1);
168
- opacity:var(--iui-opacity-5);
163
+ background-color:var(--iui-color-icon-disabled);
169
164
  }
170
165
  @media (forced-colors: active){
171
166
  .iui-toggle-switch:disabled::after{
@@ -175,7 +170,7 @@
175
170
  }
176
171
  .iui-toggle-switch:disabled ~ .iui-toggle-switch-icon{
177
172
  opacity:0;
178
- fill:var(--iui-color-foreground-2);
173
+ fill:var(--iui-color-icon);
179
174
  }
180
175
  @media (forced-colors: active){
181
176
  .iui-toggle-switch:disabled:checked{
@@ -207,7 +202,7 @@
207
202
  z-index:1;
208
203
  transition:opacity var(--iui-duration-1) ease-out;
209
204
  pointer-events:none;
210
- fill:var(--iui-color-foreground-accessory);
205
+ fill:var(--iui-color-white);
211
206
  }
212
207
  @media (forced-colors: active){
213
208
  .iui-toggle-switch-icon{
package/css/tooltip.css CHANGED
@@ -47,6 +47,6 @@
47
47
  box-shadow:var(--iui-shadow-3);
48
48
  pointer-events:none;
49
49
  background-color:rgba(0, 0, 0, var(--iui-opacity-3));
50
- color:var(--iui-color-foreground-accessory);
50
+ color:var(--iui-color-white);
51
51
  border:1px solid rgba(255, 255, 255, var(--iui-opacity-4));
52
52
  }
package/css/tree.css CHANGED
@@ -9,6 +9,7 @@
9
9
  vertical-align:baseline;
10
10
  list-style:none;
11
11
  border-radius:var(--iui-border-radius-1);
12
+ background-color:var(--iui-color-background);
12
13
  }
13
14
 
14
15
  .iui-sub-tree{
@@ -23,11 +24,11 @@
23
24
  outline:none;
24
25
  }
25
26
  .iui-tree-item:focus-visible > .iui-tree-node{
26
- outline:1px solid var(--iui-color-foreground-primary);
27
+ outline:1px solid var(--iui-color-border-accent);
27
28
  outline-offset:-1px;
28
29
  }
29
30
  .iui-tree-item:focus-visible > .iui-tree-node.iui-active{
30
- outline:2px solid var(--iui-color-foreground-primary);
31
+ outline:2px solid var(--iui-color-border-accent);
31
32
  outline-offset:-2px;
32
33
  }
33
34
  @supports not selector(*:focus-visible){
@@ -35,11 +36,11 @@
35
36
  outline:none;
36
37
  }
37
38
  .iui-tree-item:focus > .iui-tree-node{
38
- outline:1px solid var(--iui-color-foreground-primary);
39
+ outline:1px solid var(--iui-color-border-accent);
39
40
  outline-offset:-1px;
40
41
  }
41
42
  .iui-tree-item:focus > .iui-tree-node.iui-active{
42
- outline:2px solid var(--iui-color-foreground-primary);
43
+ outline:2px solid var(--iui-color-border-accent);
43
44
  outline-offset:-2px;
44
45
  }
45
46
  }
@@ -67,7 +68,7 @@
67
68
  flex-shrink:0;
68
69
  width:var(--iui-size-m);
69
70
  height:var(--iui-size-m);
70
- fill:var(--iui-color-foreground-4);
71
+ fill:var(--iui-color-icon-muted);
71
72
  margin:0 calc(var(--iui-size-2xs) + 1px);
72
73
  }
73
74
  @media (forced-colors: active){
@@ -103,26 +104,27 @@
103
104
  }
104
105
  .iui-tree-node-content-caption{
105
106
  font-size:var(--iui-font-size-0);
106
- color:var(--iui-color-foreground-4);
107
+ color:var(--iui-color-text-muted);
107
108
  }
108
109
  .iui-tree-node:hover{
109
- background-color:var(--iui-color-background-transparent-hover);
110
+ background-color:var(--iui-color-background-hover);
111
+ color:var(--iui-color-text-hover);
110
112
  }
111
113
  .iui-tree-node:hover .iui-tree-node-content-caption{
112
- color:var(--iui-color-foreground-1);
114
+ color:var(--iui-color-text-hover);
113
115
  transition:color var(--iui-duration-1) ease;
114
116
  }
115
117
  .iui-tree-node.iui-active{
116
- background-color:var(--iui-color-background-subtle-primary);
117
- outline:thin solid var(--iui-color-foreground-primary);
118
+ background-color:var(--iui-color-background-accent-muted);
119
+ outline:thin solid var(--iui-color-border-accent);
118
120
  outline-offset:-1px;
119
121
  }
120
122
  .iui-tree-node.iui-disabled{
121
123
  cursor:not-allowed;
122
124
  outline:none;
123
125
  background-color:transparent;
124
- color:var(--iui-color-foreground-5);
125
126
  }
127
+ .iui-tree-node.iui-disabled,
126
128
  .iui-tree-node.iui-disabled .iui-tree-node-content-caption{
127
- color:var(--iui-color-foreground-5);
129
+ color:var(--iui-color-text-disabled);
128
130
  }