@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/toast.css CHANGED
@@ -14,14 +14,14 @@
14
14
  @media screen and (max-width: 400px){
15
15
  .iui-toast-wrapper{
16
16
  width:calc(100vw - 36px);
17
- margin-top:12px;
17
+ margin-top:var(--iui-size-s);
18
18
  }
19
19
  }
20
20
  @media screen and (min-width: 401px){
21
21
  .iui-toast-wrapper{
22
22
  min-width:400px;
23
23
  max-width:640px;
24
- margin:24px 0;
24
+ margin:var(--iui-size-l) 0;
25
25
  }
26
26
  }
27
27
  @media (prefers-reduced-motion: no-preference){
@@ -54,7 +54,7 @@
54
54
  right:0;
55
55
  }
56
56
  .iui-toast-wrapper.iui-placement-bottom .iui-toast{
57
- margin:12px 16px 0 16px;
57
+ margin:var(--iui-size-s) var(--iui-size-m) 0 var(--iui-size-m);
58
58
  }
59
59
  .iui-toast-wrapper.iui-placement-bottom-start{
60
60
  bottom:0;
@@ -62,7 +62,7 @@
62
62
  align-items:flex-start;
63
63
  }
64
64
  .iui-toast-wrapper.iui-placement-bottom-start .iui-toast{
65
- margin:12px 16px 0 16px;
65
+ margin:var(--iui-size-s) var(--iui-size-m) 0 var(--iui-size-m);
66
66
  }
67
67
  .iui-toast-wrapper.iui-placement-bottom-end{
68
68
  bottom:0;
@@ -70,7 +70,7 @@
70
70
  align-items:flex-end;
71
71
  }
72
72
  .iui-toast-wrapper.iui-placement-bottom-end .iui-toast{
73
- margin:12px 16px 0 16px;
73
+ margin:var(--iui-size-s) var(--iui-size-m) 0 var(--iui-size-m);
74
74
  }
75
75
 
76
76
  .iui-toast{
@@ -81,47 +81,47 @@
81
81
  display:inline-flex;
82
82
  align-items:center;
83
83
  pointer-events:all;
84
- margin:0 16px 12px 16px;
85
- min-height:48px;
86
- border-radius:4px;
84
+ margin:0 var(--iui-size-m) var(--iui-size-s) var(--iui-size-m);
85
+ min-height:calc(var(--iui-size-s) * 4);
86
+ border-radius:var(--iui-border-radius-1);
87
87
  background-color:var(--iui-color-background-1);
88
- border:1px solid var(--iui-color-foreground-body);
89
- box-shadow:0 0 0 1px rgba(var(--iui-color-foreground-accessory-rgb), var(--iui-opacity-4)), 0 9px 46px rgba(0, 0, 0, 0.25);
88
+ border:1px solid var(--iui-color-foreground-1);
89
+ box-shadow:0 0 0 1px rgba(255, 255, 255, var(--iui-opacity-4)), var(--iui-shadow-5);
90
90
  }
91
91
  .iui-toast > .iui-status-area{
92
92
  display:flex;
93
93
  align-self:stretch;
94
94
  justify-content:center;
95
95
  align-items:center;
96
- width:48px;
96
+ width:calc(var(--iui-size-l) * 2);
97
97
  flex-shrink:0;
98
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
- width:16px;
104
- height:16px;
103
+ width:var(--iui-size-m);
104
+ height:var(--iui-size-m);
105
105
  fill:var(--iui-color-foreground-accessory);
106
106
  }
107
107
  .iui-toast > .iui-message{
108
108
  flex-grow:1;
109
- font-size:14px;
110
- margin-top:6px;
111
- margin-bottom:6px;
112
- margin-right:24px;
113
- margin-left:16px;
114
- line-height:24px;
115
- font-weight:400;
109
+ font-size:var(--iui-font-size-1);
110
+ margin-top:calc(var(--iui-size-s) * 0.5);
111
+ margin-bottom:calc(var(--iui-size-s) * 0.5);
112
+ margin-right:var(--iui-size-l);
113
+ margin-left:var(--iui-size-m);
114
+ line-height:var(--iui-size-l);
115
+ font-weight:var(--iui-font-weight-normal);
116
116
  font-style:normal;
117
- color:var(--iui-text-color);
117
+ color:var(--iui-color-foreground-2);
118
118
  }
119
119
  .iui-toast-anchor{
120
120
  text-decoration:underline;
121
- border-radius:4px;
121
+ border-radius:var(--iui-border-radius-1);
122
122
  cursor:pointer;
123
- font-size:12px;
124
- margin-right:16px;
123
+ font-size:var(--iui-font-size-0);
124
+ margin-right:var(--iui-size-m);
125
125
  -webkit-user-select:none;
126
126
  -moz-user-select:none;
127
127
  -ms-user-select:none;
@@ -132,7 +132,7 @@
132
132
  text-decoration:none;
133
133
  }
134
134
  .iui-toast > .iui-button{
135
- margin-right:8px;
135
+ margin-right:var(--iui-size-xs);
136
136
  }
137
137
  @media screen and (max-width: 400px){
138
138
  .iui-toast{
@@ -149,18 +149,18 @@
149
149
  border-color:var(--iui-color-foreground-primary);
150
150
  }
151
151
  .iui-toast.iui-informational > .iui-message::-moz-selection, .iui-toast.iui-informational > .iui-message *::-moz-selection{
152
- background-color:rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-5));
152
+ background-color:hsl(var(--iui-color-foreground-primary-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:rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-5));
156
+ background-color:hsl(var(--iui-color-foreground-primary-hsl)/var(--iui-opacity-5));
157
157
  }
158
158
  .iui-toast.iui-informational > .iui-status-area{
159
159
  background-color:var(--iui-color-background-primary);
160
160
  }
161
161
  .iui-toast.iui-informational > .iui-toast-anchor{
162
162
  color:var(--iui-color-foreground-primary);
163
- -webkit-tap-highlight-color:rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-5));
163
+ -webkit-tap-highlight-color:hsl(var(--iui-color-foreground-primary-hsl)/var(--iui-opacity-6));
164
164
  }
165
165
  .iui-toast.iui-informational > .iui-toast-anchor:focus-visible{
166
166
  outline:1px solid var(--iui-color-foreground-primary);
@@ -173,24 +173,24 @@
173
173
  }
174
174
  }
175
175
  .iui-toast.iui-informational > .iui-toast-anchor:hover{
176
- color:var(--iui-color-foreground-primary-overlay);
176
+ color:var(--iui-color-foreground-primary-hover);
177
177
  }
178
178
  .iui-toast.iui-positive{
179
179
  border-color:var(--iui-color-foreground-positive);
180
180
  }
181
181
  .iui-toast.iui-positive > .iui-message::-moz-selection, .iui-toast.iui-positive > .iui-message *::-moz-selection{
182
- background-color:rgba(var(--iui-color-foreground-positive-rgb), var(--iui-opacity-5));
182
+ background-color:hsl(var(--iui-color-foreground-positive-hsl)/var(--iui-opacity-5));
183
183
  }
184
184
  .iui-toast.iui-positive > .iui-message::selection,
185
185
  .iui-toast.iui-positive > .iui-message *::selection{
186
- background-color:rgba(var(--iui-color-foreground-positive-rgb), var(--iui-opacity-5));
186
+ background-color:hsl(var(--iui-color-foreground-positive-hsl)/var(--iui-opacity-5));
187
187
  }
188
188
  .iui-toast.iui-positive > .iui-status-area{
189
189
  background-color:var(--iui-color-background-positive);
190
190
  }
191
191
  .iui-toast.iui-positive > .iui-toast-anchor{
192
192
  color:var(--iui-color-foreground-positive);
193
- -webkit-tap-highlight-color:rgba(var(--iui-color-foreground-positive-rgb), var(--iui-opacity-5));
193
+ -webkit-tap-highlight-color:hsl(var(--iui-color-foreground-positive-hsl)/var(--iui-opacity-6));
194
194
  }
195
195
  .iui-toast.iui-positive > .iui-toast-anchor:focus-visible{
196
196
  outline:1px solid var(--iui-color-foreground-positive);
@@ -203,31 +203,31 @@
203
203
  }
204
204
  }
205
205
  .iui-toast.iui-positive > .iui-toast-anchor::-moz-selection, .iui-toast.iui-positive > .iui-toast-anchor *::-moz-selection{
206
- background-color:rgba(var(--iui-color-foreground-positive-rgb), var(--iui-opacity-5));
206
+ background-color:hsl(var(--iui-color-foreground-positive-hsl)/var(--iui-opacity-5));
207
207
  }
208
208
  .iui-toast.iui-positive > .iui-toast-anchor::selection,
209
209
  .iui-toast.iui-positive > .iui-toast-anchor *::selection{
210
- background-color:rgba(var(--iui-color-foreground-positive-rgb), var(--iui-opacity-5));
210
+ background-color:hsl(var(--iui-color-foreground-positive-hsl)/var(--iui-opacity-5));
211
211
  }
212
212
  .iui-toast.iui-positive > .iui-toast-anchor:hover{
213
- color:var(--iui-color-foreground-positive-overlay);
213
+ color:var(--iui-color-foreground-positive-hover);
214
214
  }
215
215
  .iui-toast.iui-negative{
216
216
  border-color:var(--iui-color-foreground-negative);
217
217
  }
218
218
  .iui-toast.iui-negative > .iui-message::-moz-selection, .iui-toast.iui-negative > .iui-message *::-moz-selection{
219
- background-color:rgba(var(--iui-color-foreground-negative-rgb), var(--iui-opacity-5));
219
+ background-color:hsl(var(--iui-color-foreground-negative-hsl)/var(--iui-opacity-5));
220
220
  }
221
221
  .iui-toast.iui-negative > .iui-message::selection,
222
222
  .iui-toast.iui-negative > .iui-message *::selection{
223
- background-color:rgba(var(--iui-color-foreground-negative-rgb), var(--iui-opacity-5));
223
+ background-color:hsl(var(--iui-color-foreground-negative-hsl)/var(--iui-opacity-5));
224
224
  }
225
225
  .iui-toast.iui-negative > .iui-status-area{
226
226
  background-color:var(--iui-color-background-negative);
227
227
  }
228
228
  .iui-toast.iui-negative > .iui-toast-anchor{
229
229
  color:var(--iui-color-foreground-negative);
230
- -webkit-tap-highlight-color:rgba(var(--iui-color-foreground-negative-rgb), var(--iui-opacity-5));
230
+ -webkit-tap-highlight-color:hsl(var(--iui-color-foreground-negative-hsl)/var(--iui-opacity-6));
231
231
  }
232
232
  .iui-toast.iui-negative > .iui-toast-anchor:focus-visible{
233
233
  outline:1px solid var(--iui-color-foreground-negative);
@@ -240,31 +240,31 @@
240
240
  }
241
241
  }
242
242
  .iui-toast.iui-negative > .iui-toast-anchor::-moz-selection, .iui-toast.iui-negative > .iui-toast-anchor *::-moz-selection{
243
- background-color:rgba(var(--iui-color-foreground-negative-rgb), var(--iui-opacity-5));
243
+ background-color:hsl(var(--iui-color-foreground-negative-hsl)/var(--iui-opacity-5));
244
244
  }
245
245
  .iui-toast.iui-negative > .iui-toast-anchor::selection,
246
246
  .iui-toast.iui-negative > .iui-toast-anchor *::selection{
247
- background-color:rgba(var(--iui-color-foreground-negative-rgb), var(--iui-opacity-5));
247
+ background-color:hsl(var(--iui-color-foreground-negative-hsl)/var(--iui-opacity-5));
248
248
  }
249
249
  .iui-toast.iui-negative > .iui-toast-anchor:hover{
250
- color:var(--iui-color-foreground-negative-overlay);
250
+ color:var(--iui-color-foreground-negative-hover);
251
251
  }
252
252
  .iui-toast.iui-warning{
253
253
  border-color:var(--iui-color-foreground-warning);
254
254
  }
255
255
  .iui-toast.iui-warning > .iui-message::-moz-selection, .iui-toast.iui-warning > .iui-message *::-moz-selection{
256
- background-color:rgba(var(--iui-color-foreground-warning-rgb), var(--iui-opacity-5));
256
+ background-color:hsl(var(--iui-color-foreground-warning-hsl)/var(--iui-opacity-5));
257
257
  }
258
258
  .iui-toast.iui-warning > .iui-message::selection,
259
259
  .iui-toast.iui-warning > .iui-message *::selection{
260
- background-color:rgba(var(--iui-color-foreground-warning-rgb), var(--iui-opacity-5));
260
+ background-color:hsl(var(--iui-color-foreground-warning-hsl)/var(--iui-opacity-5));
261
261
  }
262
262
  .iui-toast.iui-warning > .iui-status-area{
263
263
  background-color:var(--iui-color-background-warning);
264
264
  }
265
265
  .iui-toast.iui-warning > .iui-toast-anchor{
266
266
  color:var(--iui-color-foreground-warning);
267
- -webkit-tap-highlight-color:rgba(var(--iui-color-foreground-warning-rgb), var(--iui-opacity-5));
267
+ -webkit-tap-highlight-color:hsl(var(--iui-color-foreground-warning-hsl)/var(--iui-opacity-6));
268
268
  }
269
269
  .iui-toast.iui-warning > .iui-toast-anchor:focus-visible{
270
270
  outline:1px solid var(--iui-color-foreground-warning);
@@ -277,12 +277,12 @@
277
277
  }
278
278
  }
279
279
  .iui-toast.iui-warning > .iui-toast-anchor::-moz-selection, .iui-toast.iui-warning > .iui-toast-anchor *::-moz-selection{
280
- background-color:rgba(var(--iui-color-foreground-warning-rgb), var(--iui-opacity-5));
280
+ background-color:hsl(var(--iui-color-foreground-warning-hsl)/var(--iui-opacity-5));
281
281
  }
282
282
  .iui-toast.iui-warning > .iui-toast-anchor::selection,
283
283
  .iui-toast.iui-warning > .iui-toast-anchor *::selection{
284
- background-color:rgba(var(--iui-color-foreground-warning-rgb), var(--iui-opacity-5));
284
+ background-color:hsl(var(--iui-color-foreground-warning-hsl)/var(--iui-opacity-5));
285
285
  }
286
286
  .iui-toast.iui-warning > .iui-toast-anchor:hover{
287
- color:var(--iui-color-foreground-warning-overlay);
287
+ color:var(--iui-color-foreground-warning-hover);
288
288
  }
package/css/toggle-switch.css CHANGED
@@ -10,8 +10,8 @@
10
10
  display:grid;
11
11
  grid-template-areas:"toggle";
12
12
  align-items:center;
13
- gap:8px;
14
- font-size:14px;
13
+ gap:var(--iui-size-xs);
14
+ font-size:var(--iui-font-size-1);
15
15
  width:-webkit-fit-content;
16
16
  width:-moz-fit-content;
17
17
  width:fit-content;
@@ -21,11 +21,11 @@
21
21
  user-select:none;
22
22
  cursor:pointer;
23
23
  isolation:isolate;
24
- color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-2));
24
+ color:var(--iui-color-foreground-2);
25
25
  }
26
26
  .iui-toggle-switch-wrapper.iui-disabled{
27
27
  cursor:not-allowed;
28
- color:var(--iui-text-color-muted);
28
+ color:var(--iui-color-foreground-4);
29
29
  }
30
30
  @media (forced-colors: active){
31
31
  .iui-toggle-switch-wrapper.iui-disabled{
@@ -51,13 +51,13 @@
51
51
  -webkit-appearance:none;
52
52
  -moz-appearance:none;
53
53
  appearance:none;
54
- width:48px;
55
- border-radius:9999px;
56
- transition:background-color 0.2s ease-out, border-color 0.2s ease-out;
54
+ width:calc((var(--iui-size-m) + var(--iui-size-2xs) * 2) * 2);
55
+ border-radius:var(--iui-border-radius-round);
56
+ transition:background-color var(--iui-duration-1) ease-out, border-color var(--iui-duration-1) ease-out;
57
57
  background-color:var(--iui-color-background-1);
58
- border:1px solid rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-4));
58
+ border:1px solid var(--iui-color-foreground-4);
59
59
  background-color:var(--iui-color-background-1);
60
- border-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-4));
60
+ border-color:var(--iui-color-foreground-4);
61
61
  }
62
62
  .iui-toggle-switch:focus-visible{
63
63
  outline:1px solid var(--iui-color-foreground-primary);
@@ -74,17 +74,17 @@
74
74
  }
75
75
  .iui-toggle-switch::after{
76
76
  content:"";
77
- height:16px;
78
- width:16px;
79
- margin:4px;
77
+ height:var(--iui-size-m);
78
+ width:var(--iui-size-m);
79
+ margin:var(--iui-size-2xs);
80
80
  aspect-ratio:1/1;
81
81
  border-radius:50%;
82
- transition:background-color 0.2s ease-out, opacity 0.2s ease-out;
82
+ transition:background-color var(--iui-duration-1) ease-out, opacity 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 0.2s ease-out, background-color 0.2s ease-out, opacity 0.2s ease-out;
87
+ transition:transform var(--iui-duration-1) ease-out, background-color var(--iui-duration-1) ease-out, opacity var(--iui-duration-1) ease-out;
88
88
  }
89
89
  }
90
90
  @media (forced-colors: active){
@@ -93,7 +93,7 @@
93
93
  }
94
94
  }
95
95
  .iui-toggle-switch::after{
96
- background-color:var(--iui-color-foreground-body);
96
+ background-color:var(--iui-color-foreground-1);
97
97
  opacity:var(--iui-opacity-2);
98
98
  }
99
99
  @media (forced-colors: active){
@@ -103,7 +103,7 @@
103
103
  }
104
104
  }
105
105
  .iui-toggle-switch:hover{
106
- border-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-2));
106
+ border-color:var(--iui-color-foreground-2);
107
107
  }
108
108
  @media (forced-colors: active){
109
109
  .iui-toggle-switch:hover{
@@ -111,11 +111,11 @@
111
111
  }
112
112
  }
113
113
  .iui-toggle-switch:focus-visible{
114
- border-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-2));
114
+ border-color:var(--iui-color-foreground-2);
115
115
  }
116
116
  @supports not selector(*:focus-visible){
117
117
  .iui-toggle-switch:focus{
118
- border-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-2));
118
+ border-color:var(--iui-color-foreground-2);
119
119
  }
120
120
  }
121
121
  .iui-toggle-switch:checked{
@@ -129,7 +129,7 @@
129
129
  }
130
130
  }
131
131
  .iui-toggle-switch:checked::after{
132
- transform:translateX(20px);
132
+ transform:translateX(calc(var(--iui-size-m) + var(--iui-size-2xs)));
133
133
  background-color:var(--iui-color-foreground-accessory);
134
134
  opacity:var(--iui-opacity-2);
135
135
  }
@@ -164,7 +164,7 @@
164
164
  }
165
165
  }
166
166
  .iui-toggle-switch:disabled::after{
167
- background-color:var(--iui-color-foreground-body);
167
+ background-color:var(--iui-color-foreground-1);
168
168
  opacity:var(--iui-opacity-5);
169
169
  }
170
170
  @media (forced-colors: active){
@@ -175,7 +175,7 @@
175
175
  }
176
176
  .iui-toggle-switch:disabled ~ .iui-toggle-switch-icon{
177
177
  opacity:0;
178
- fill:var(--iui-icon-color-actionable);
178
+ fill:var(--iui-color-foreground-2);
179
179
  }
180
180
  @media (forced-colors: active){
181
181
  .iui-toggle-switch:disabled:checked{
@@ -199,13 +199,13 @@
199
199
  .iui-toggle-switch-icon{
200
200
  opacity:0;
201
201
  grid-area:toggle;
202
- width:16px;
203
- height:16px;
204
- padding:2px;
205
- margin:5px;
202
+ width:var(--iui-size-m);
203
+ height:var(--iui-size-m);
204
+ padding:calc(var(--iui-size-m) * 0.125);
205
+ margin:calc(var(--iui-size-2xs) + 1px);
206
206
  display:flex;
207
207
  z-index:1;
208
- transition:opacity 0.2s ease-out;
208
+ transition:opacity var(--iui-duration-1) ease-out;
209
209
  pointer-events:none;
210
210
  fill:var(--iui-color-foreground-accessory);
211
211
  }
package/css/tooltip.css CHANGED
@@ -22,7 +22,7 @@
22
22
  }
23
23
  @media (prefers-reduced-motion: no-preference){
24
24
  .iui-tooltip-container > .iui-tooltip{
25
- transition:visibility 0s linear 0.2s, opacity 0.2s ease-out;
25
+ transition:visibility var(--iui-duration-0) linear var(--iui-duration-1), opacity var(--iui-duration-1) ease-out;
26
26
  }
27
27
  }
28
28
  .iui-tooltip-container > .iui-tooltip.iui-tooltip-visible, .iui-tooltip-container:hover > .iui-tooltip{
@@ -37,8 +37,8 @@
37
37
  vertical-align:baseline;
38
38
  display:block;
39
39
  text-align:center;
40
- border-radius:4px;
41
- font-size:12px;
40
+ border-radius:var(--iui-border-radius-1);
41
+ font-size:var(--iui-font-size-0);
42
42
  overflow:hidden;
43
43
  max-width:400px;
44
44
  width:-webkit-max-content;
@@ -46,11 +46,11 @@
46
46
  width:max-content;
47
47
  overflow-wrap:break-word;
48
48
  box-sizing:content-box;
49
- padding:4px 8px;
49
+ padding:calc(var(--iui-size-s) * 0.33) var(--iui-size-xs);
50
50
  z-index:999;
51
- box-shadow:0 3px 14px rgba(0, 0, 0, 0.25);
51
+ box-shadow:var(--iui-shadow-3);
52
52
  pointer-events:none;
53
53
  background-color:rgba(0, 0, 0, var(--iui-opacity-3));
54
54
  color:var(--iui-color-foreground-accessory);
55
- border:1px solid rgba(var(--iui-color-foreground-accessory-rgb), var(--iui-opacity-4));
55
+ border:1px solid rgba(255, 255, 255, var(--iui-opacity-4));
56
56
  }
package/css/tree.css CHANGED
@@ -8,6 +8,7 @@
8
8
  border:none;
9
9
  vertical-align:baseline;
10
10
  list-style:none;
11
+ border-radius:var(--iui-border-radius-1);
11
12
  }
12
13
 
13
14
  .iui-sub-tree{
@@ -46,27 +47,28 @@
46
47
  .iui-tree-node{
47
48
  display:flex;
48
49
  cursor:pointer;
49
- padding:0 8px;
50
+ padding:0 var(--iui-size-xs);
50
51
  align-items:center;
52
+ border-radius:var(--iui-border-radius-1);
51
53
  }
52
54
  .iui-tree-node-checkbox{
53
- margin-right:8px;
55
+ margin-right:var(--iui-size-xs);
54
56
  }
55
57
  .iui-tree-node-content{
56
58
  display:flex;
57
59
  align-items:center;
58
- min-height:36px;
59
- margin-left:calc(30px * (var(--level, 0)));
60
+ min-height:calc(var(--iui-size-s) * 3);
61
+ margin-left:calc(calc(var(--iui-component-height-small) + 2px) * (var(--level, 0)));
60
62
  overflow:hidden;
61
- padding-left:2px;
63
+ padding-left:var(--iui-size-3xs);
62
64
  }
63
65
  .iui-tree-node-content-icon{
64
66
  display:flex;
65
67
  flex-shrink:0;
66
- width:16px;
67
- height:16px;
68
- fill:var(--iui-icon-color);
69
- margin:0 7px;
68
+ width:var(--iui-size-m);
69
+ height:var(--iui-size-m);
70
+ fill:var(--iui-color-foreground-4);
71
+ margin:0 calc(var(--iui-size-2xs) + 1px);
70
72
  }
71
73
  @media (forced-colors: active){
72
74
  .iui-tree-node-content-icon{
@@ -74,11 +76,11 @@
74
76
  }
75
77
  }
76
78
  .iui-tree-node-content-icon:first-child{
77
- margin-left:37px;
79
+ margin-left:calc(var(--iui-component-height-small) + 2px + var(--iui-size-2xs) + 1px);
78
80
  }
79
81
  @media (prefers-reduced-motion: no-preference){
80
82
  .iui-tree-node-content-expander-icon{
81
- transition:transform 0.2s ease-out;
83
+ transition:transform var(--iui-duration-1) ease-out;
82
84
  }
83
85
  }
84
86
  .iui-tree-node-content-expander-icon-expanded{
@@ -86,10 +88,10 @@
86
88
  }
87
89
  .iui-tree-node-content-label{
88
90
  min-width:0;
89
- padding-left:7px;
91
+ padding-left:calc(var(--iui-size-2xs) + 1px);
90
92
  }
91
93
  .iui-tree-node-content-label:first-child{
92
- margin-left:30px;
94
+ margin-left:calc(var(--iui-component-height-small) + 2px);
93
95
  }
94
96
  .iui-tree-node-content-title, .iui-tree-node-content-caption{
95
97
  white-space:nowrap;
@@ -97,21 +99,21 @@
97
99
  text-overflow:ellipsis;
98
100
  }
99
101
  .iui-tree-node-content-title{
100
- font-size:14px;
102
+ font-size:var(--iui-font-size-1);
101
103
  }
102
104
  .iui-tree-node-content-caption{
103
- font-size:12px;
104
- color:var(--iui-text-color-muted);
105
+ font-size:var(--iui-font-size-0);
106
+ color:var(--iui-color-foreground-4);
105
107
  }
106
108
  .iui-tree-node:hover{
107
- background-color:rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-6));
109
+ background-color:var(--iui-color-background-transparent-hover);
108
110
  }
109
111
  .iui-tree-node:hover .iui-tree-node-content-caption{
110
- color:var(--iui-color-foreground-body);
111
- transition:color 0.2s ease;
112
+ color:var(--iui-color-foreground-1);
113
+ transition:color var(--iui-duration-1) ease;
112
114
  }
113
115
  .iui-tree-node.iui-active{
114
- background-color:rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-5));
116
+ background-color:var(--iui-color-background-subtle-primary);
115
117
  outline:thin solid var(--iui-color-foreground-primary);
116
118
  outline-offset:-1px;
117
119
  }
@@ -119,8 +121,8 @@
119
121
  cursor:not-allowed;
120
122
  outline:none;
121
123
  background-color:transparent;
122
- color:var(--iui-text-color-placeholder);
124
+ color:var(--iui-color-foreground-5);
123
125
  }
124
126
  .iui-tree-node.iui-disabled .iui-tree-node-content-caption{
125
- color:var(--iui-text-color-placeholder);
127
+ color:var(--iui-color-foreground-5);
126
128
  }