@itwin/itwinui-css 0.61.0 → 1.0.0-dev.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (194) hide show
  1. package/README.md +1 -4
  2. package/css/alert.css +272 -138
  3. package/css/all.css +4070 -5172
  4. package/css/anchor.css +0 -4
  5. package/css/{user-icon.css → avatar.css} +51 -71
  6. package/css/badge.css +1 -1
  7. package/css/blockquote.css +0 -3
  8. package/css/breadcrumbs.css +59 -132
  9. package/css/button.css +255 -340
  10. package/css/carousel.css +6 -14
  11. package/css/checkbox.css +149 -0
  12. package/css/code.css +2 -10
  13. package/css/color-picker.css +5 -43
  14. package/css/date-picker.css +0 -59
  15. package/css/dialog.css +0 -5
  16. package/css/expandable-block.css +0 -31
  17. package/css/fieldset.css +0 -5
  18. package/css/file-upload.css +0 -15
  19. package/css/footer.css +0 -8
  20. package/css/global.css +8 -63
  21. package/css/header.css +312 -398
  22. package/css/icon.css +0 -30
  23. package/css/information-panel.css +1 -15
  24. package/css/input.css +162 -0
  25. package/css/keyboard.css +1 -5
  26. package/css/location-marker.css +0 -11
  27. package/css/menu.css +0 -16
  28. package/css/progress-indicator.css +1 -93
  29. package/css/radio-tile.css +38 -65
  30. package/css/radio.css +156 -0
  31. package/css/select.css +230 -0
  32. package/css/side-navigation.css +5 -20
  33. package/css/skip-to-content.css +0 -3
  34. package/css/slider.css +2 -14
  35. package/css/stepper.css +141 -0
  36. package/css/surface.css +0 -1
  37. package/css/table.css +251 -338
  38. package/css/tabs.css +6 -49
  39. package/css/tag.css +3 -21
  40. package/css/text.css +0 -2
  41. package/css/textarea.css +96 -0
  42. package/css/tile.css +169 -155
  43. package/css/time-picker.css +0 -12
  44. package/css/{toast-notification.css → toast.css} +1 -43
  45. package/css/toggle-switch.css +13 -60
  46. package/css/tooltip.css +0 -3
  47. package/css/tree.css +0 -14
  48. package/css/utils.css +609 -0
  49. package/css/workflow-diagram.css +67 -0
  50. package/package.json +11 -7
  51. package/scss/alert/alert.scss +50 -44
  52. package/scss/alert/classes.scss +24 -4
  53. package/scss/anchor/anchor.scss +76 -1
  54. package/scss/{user-icon/sizes.scss → avatar/avatar-sizes.scss} +6 -5
  55. package/scss/{user-icon/user-icon.scss → avatar/avatar.scss} +35 -70
  56. package/scss/avatar/classes.scss +27 -0
  57. package/scss/{user-icon → avatar}/index.scss +1 -2
  58. package/scss/badge/badge.scss +4 -2
  59. package/scss/blockquote/blockquote.scss +4 -9
  60. package/scss/breadcrumbs/breadcrumbs.scss +13 -18
  61. package/scss/button/borderless.scss +20 -32
  62. package/scss/button/button-group.scss +15 -7
  63. package/scss/button/button.scss +64 -42
  64. package/scss/button/classes.scss +47 -37
  65. package/scss/button/default.scss +33 -41
  66. package/scss/button/idea.scss +4 -2
  67. package/scss/button/index.scss +3 -6
  68. package/scss/button/split-button.scss +45 -0
  69. package/scss/button/variant.scss +44 -0
  70. package/scss/carousel/carousel.scss +12 -23
  71. package/scss/{inputs → checkbox}/checkbox.scss +50 -2
  72. package/scss/checkbox/classes.scss +7 -0
  73. package/scss/checkbox/index.scss +3 -0
  74. package/scss/classes.scss +10 -6
  75. package/scss/code/code.scss +3 -5
  76. package/scss/code/codeblock.scss +7 -21
  77. package/scss/color-picker/color-picker.scss +32 -61
  78. package/scss/date-picker/date-picker.scss +21 -55
  79. package/scss/dialog/dialog.scss +1 -6
  80. package/scss/expandable-block/block.scss +22 -50
  81. package/scss/fieldset/fieldset.scss +6 -12
  82. package/scss/file-upload/file-upload.scss +13 -23
  83. package/scss/footer/footer.scss +5 -15
  84. package/scss/header/classes.scss +70 -2
  85. package/scss/header/header-buttons.scss +316 -0
  86. package/scss/header/header.scss +40 -408
  87. package/scss/header/index.scss +1 -0
  88. package/scss/icon/{mixins.scss → icon.scss} +5 -15
  89. package/scss/icon/index.scss +1 -2
  90. package/scss/index.scss +10 -6
  91. package/scss/information-panel/information-panel.scss +8 -26
  92. package/scss/input/classes.scss +15 -0
  93. package/scss/input/index.scss +4 -0
  94. package/scss/{inputs → input}/input-with-icon.scss +1 -0
  95. package/scss/{inputs → input}/input.scss +15 -25
  96. package/scss/keyboard/keyboard.scss +5 -9
  97. package/scss/location-marker/data-rich.scss +5 -14
  98. package/scss/location-marker/default.scss +1 -3
  99. package/scss/location-marker/location-marker.scss +1 -3
  100. package/scss/location-marker/me.scss +7 -14
  101. package/scss/menu/menu.scss +16 -36
  102. package/scss/non-ideal-state/non-ideal-state.scss +2 -1
  103. package/scss/progress-indicator/classes.scss +0 -4
  104. package/scss/progress-indicator/linear.scss +9 -27
  105. package/scss/progress-indicator/overlay.scss +4 -10
  106. package/scss/progress-indicator/radial.scss +10 -98
  107. package/scss/radio/classes.scss +7 -0
  108. package/scss/radio/index.scss +3 -0
  109. package/scss/{inputs → radio}/radio.scss +1 -1
  110. package/scss/radio-tile/radio-tile.scss +41 -83
  111. package/scss/select/classes.scss +27 -0
  112. package/scss/select/index.scss +3 -0
  113. package/scss/{inputs → select}/select.scss +7 -15
  114. package/scss/side-navigation/side-navigation.scss +26 -34
  115. package/scss/skip-to-content/skip-to-content.scss +2 -3
  116. package/scss/slider/slider.scss +12 -23
  117. package/scss/stepper/classes.scss +32 -0
  118. package/scss/stepper/index.scss +3 -0
  119. package/scss/stepper/stepper.scss +151 -0
  120. package/scss/style/{variables.scss → global-variables.scss} +3 -1
  121. package/scss/style/global.scss +9 -10
  122. package/scss/{icon/variables.scss → style/icon-sizes.scss} +1 -1
  123. package/scss/style/index.scss +6 -6
  124. package/scss/style/theme.scss +0 -39
  125. package/scss/style/typography.scss +5 -4
  126. package/scss/surface/surface.scss +0 -1
  127. package/scss/table/classes.scss +24 -23
  128. package/scss/table/column-filter.scss +2 -5
  129. package/scss/table/index.scss +1 -2
  130. package/scss/table/paginator.scss +22 -30
  131. package/scss/table/sizes.scss +31 -0
  132. package/scss/table/{variables.scss → table-densities.scss} +2 -1
  133. package/scss/table/table.scss +156 -228
  134. package/scss/tabs/borderless.scss +6 -18
  135. package/scss/tabs/default.scss +8 -21
  136. package/scss/tabs/pill.scss +4 -14
  137. package/scss/tabs/tabs.scss +16 -44
  138. package/scss/tag/classes.scss +1 -0
  139. package/scss/tag/tag.scss +9 -19
  140. package/scss/text/mixins.scss +1 -0
  141. package/scss/text/muted.scss +2 -4
  142. package/scss/text/skeleton.scss +8 -11
  143. package/scss/textarea/classes.scss +7 -0
  144. package/scss/textarea/index.scss +3 -0
  145. package/scss/{inputs → textarea}/textarea.scss +2 -1
  146. package/scss/tile/classes.scss +14 -2
  147. package/scss/tile/tile.scss +99 -80
  148. package/scss/time-picker/time-picker.scss +8 -17
  149. package/scss/{toast-notification → toast}/categories.scss +3 -7
  150. package/scss/{toast-notification → toast}/classes.scss +0 -0
  151. package/scss/{toast-notification → toast}/index.scss +0 -0
  152. package/scss/{toast-notification → toast}/toast.scss +7 -16
  153. package/scss/toggle-switch/toggle-switch.scss +11 -30
  154. package/scss/tooltip/tooltip.scss +4 -5
  155. package/scss/tree/tree.scss +10 -22
  156. package/scss/utils/classes.scss +6 -0
  157. package/scss/utils/index.scss +6 -0
  158. package/scss/{inputs → utils/input-container}/classes.scss +0 -48
  159. package/scss/utils/input-container/index.scss +3 -0
  160. package/scss/{inputs/labeled-inputs.scss → utils/input-container/input-container.scss} +16 -113
  161. package/scss/{style → utils}/mixins.scss +26 -43
  162. package/scss/{notification-marker → utils/notification-marker}/classes.scss +0 -0
  163. package/scss/{notification-marker → utils/notification-marker}/index.scss +0 -0
  164. package/scss/{notification-marker → utils/notification-marker}/notification-marker.scss +11 -19
  165. package/scss/{popover → utils/popover}/classes.scss +0 -0
  166. package/scss/{popover → utils/popover}/index.scss +0 -0
  167. package/scss/{popover → utils/popover}/popover.scss +0 -1
  168. package/scss/workflow-diagram/classes.scss +15 -0
  169. package/scss/workflow-diagram/index.scss +3 -0
  170. package/scss/workflow-diagram/workflow-diagram.scss +64 -0
  171. package/src/index.scss +10 -6
  172. package/css/inputs.css +0 -1339
  173. package/css/notification-marker.css +0 -293
  174. package/css/popover.css +0 -14
  175. package/css/reset-global-styles.css +0 -50
  176. package/css/wizard.css +0 -190
  177. package/scss/button/button-icon.scss +0 -12
  178. package/scss/button/cta.scss +0 -31
  179. package/scss/button/disabled.scss +0 -13
  180. package/scss/button/high-visibility.scss +0 -31
  181. package/scss/button/split-menu.scss +0 -66
  182. package/scss/inputs/checkbox-radio.scss +0 -73
  183. package/scss/inputs/index.scss +0 -10
  184. package/scss/reset-global-styles.scss +0 -33
  185. package/scss/style/anchor.scss +0 -82
  186. package/scss/style/ripple.scss +0 -18
  187. package/scss/table/condensed.scss +0 -15
  188. package/scss/table/extra-condensed.scss +0 -19
  189. package/scss/user-icon/classes.scss +0 -27
  190. package/scss/wizard/classes.scss +0 -27
  191. package/scss/wizard/index.scss +0 -5
  192. package/scss/wizard/long.scss +0 -19
  193. package/scss/wizard/wizard.scss +0 -160
  194. package/scss/wizard/workflow.scss +0 -43
package/css/{toast-notification.css → toast.css} RENAMED
@@ -80,33 +80,26 @@
80
80
  vertical-align:baseline;
81
81
  display:inline-flex;
82
82
  align-items:center;
83
- box-sizing:border-box;
84
83
  pointer-events:all;
85
84
  margin:0 16px 11px 16px;
86
85
  min-height:44px;
87
86
  border-radius:4px;
88
- background-color:white;
89
- border:1px solid black;
90
- box-shadow:0 0 0 1px rgba(255, 255, 255, 0.4), 0 9px 46px rgba(0, 0, 0, 0.25);
91
87
  background-color:var(--iui-color-background-1);
92
88
  border:1px solid var(--iui-color-foreground-body);
93
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);
94
90
  }
95
91
  .iui-toast > .iui-status-area{
96
92
  display:flex;
97
- -ms-grid-row-align:stretch;
98
- align-self:stretch;
93
+ align-self:stretch;
99
94
  justify-content:center;
100
95
  align-items:center;
101
96
  width:48px;
102
97
  flex-shrink:0;
103
- background-color:#c7ccd1;
104
98
  background-color:var(--iui-color-background-5);
105
99
  }
106
100
  .iui-toast > .iui-status-area > .iui-icon{
107
101
  height:16px;
108
102
  width:16px;
109
- fill:white;
110
103
  fill:var(--iui-color-foreground-accessory);
111
104
  }
112
105
  .iui-toast > .iui-message{
@@ -119,7 +112,6 @@
119
112
  line-height:22px;
120
113
  font-weight:400;
121
114
  font-style:normal;
122
- color:rgba(0, 0, 0, 0.8);
123
115
  color:var(--iui-text-color);
124
116
  }
125
117
  .iui-toast-anchor{
@@ -152,25 +144,19 @@
152
144
  }
153
145
  }
154
146
  .iui-toast.iui-informational{
155
- border-color:#008ae0;
156
147
  border-color:var(--iui-color-foreground-primary);
157
148
  }
158
149
  .iui-toast.iui-informational > .iui-message::-moz-selection, .iui-toast.iui-informational > .iui-message *::-moz-selection{
159
- background-color:rgba(0, 138, 224, 0.2);
160
150
  background-color:rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-5));
161
151
  }
162
152
  .iui-toast.iui-informational > .iui-message::selection,
163
153
  .iui-toast.iui-informational > .iui-message *::selection{
164
- background-color:rgba(0, 138, 224, 0.2);
165
154
  background-color:rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-5));
166
155
  }
167
156
  .iui-toast.iui-informational > .iui-status-area{
168
- background-color:#008ae0;
169
157
  background-color:var(--iui-color-background-primary);
170
158
  }
171
159
  .iui-toast.iui-informational > .iui-toast-anchor{
172
- color:#008ae0;
173
- -webkit-tap-highlight-color:rgba(0, 138, 224, 0.2);
174
160
  color:var(--iui-color-foreground-primary);
175
161
  -webkit-tap-highlight-color:rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-5));
176
162
  }
@@ -185,29 +171,22 @@
185
171
  }
186
172
  }
187
173
  .iui-toast.iui-informational > .iui-toast-anchor:hover{
188
- color:#006bad;
189
174
  color:var(--iui-color-foreground-primary-overlay);
190
175
  }
191
176
  .iui-toast.iui-positive{
192
- border-color:#53a21a;
193
177
  border-color:var(--iui-color-foreground-positive);
194
178
  }
195
179
  .iui-toast.iui-positive > .iui-message::-moz-selection, .iui-toast.iui-positive > .iui-message *::-moz-selection{
196
- background-color:rgba(83, 162, 26, 0.2);
197
180
  background-color:rgba(var(--iui-color-foreground-positive-rgb), var(--iui-opacity-5));
198
181
  }
199
182
  .iui-toast.iui-positive > .iui-message::selection,
200
183
  .iui-toast.iui-positive > .iui-message *::selection{
201
- background-color:rgba(83, 162, 26, 0.2);
202
184
  background-color:rgba(var(--iui-color-foreground-positive-rgb), var(--iui-opacity-5));
203
185
  }
204
186
  .iui-toast.iui-positive > .iui-status-area{
205
- background-color:#53a21a;
206
187
  background-color:var(--iui-color-background-positive);
207
188
  }
208
189
  .iui-toast.iui-positive > .iui-toast-anchor{
209
- color:#53a21a;
210
- -webkit-tap-highlight-color:rgba(83, 162, 26, 0.2);
211
190
  color:var(--iui-color-foreground-positive);
212
191
  -webkit-tap-highlight-color:rgba(var(--iui-color-foreground-positive-rgb), var(--iui-opacity-5));
213
192
  }
@@ -222,38 +201,29 @@
222
201
  }
223
202
  }
224
203
  .iui-toast.iui-positive > .iui-toast-anchor::-moz-selection, .iui-toast.iui-positive > .iui-toast-anchor *::-moz-selection{
225
- background-color:rgba(83, 162, 26, 0.2);
226
204
  background-color:rgba(var(--iui-color-foreground-positive-rgb), var(--iui-opacity-5));
227
205
  }
228
206
  .iui-toast.iui-positive > .iui-toast-anchor::selection,
229
207
  .iui-toast.iui-positive > .iui-toast-anchor *::selection{
230
- background-color:rgba(83, 162, 26, 0.2);
231
208
  background-color:rgba(var(--iui-color-foreground-positive-rgb), var(--iui-opacity-5));
232
209
  }
233
210
  .iui-toast.iui-positive > .iui-toast-anchor:hover{
234
- color:#3d7613;
235
211
  color:var(--iui-color-foreground-positive-overlay);
236
212
  }
237
213
  .iui-toast.iui-negative{
238
- border-color:#d10a0a;
239
214
  border-color:var(--iui-color-foreground-negative);
240
215
  }
241
216
  .iui-toast.iui-negative > .iui-message::-moz-selection, .iui-toast.iui-negative > .iui-message *::-moz-selection{
242
- background-color:rgba(209, 10, 10, 0.2);
243
217
  background-color:rgba(var(--iui-color-foreground-negative-rgb), var(--iui-opacity-5));
244
218
  }
245
219
  .iui-toast.iui-negative > .iui-message::selection,
246
220
  .iui-toast.iui-negative > .iui-message *::selection{
247
- background-color:rgba(209, 10, 10, 0.2);
248
221
  background-color:rgba(var(--iui-color-foreground-negative-rgb), var(--iui-opacity-5));
249
222
  }
250
223
  .iui-toast.iui-negative > .iui-status-area{
251
- background-color:#d10a0a;
252
224
  background-color:var(--iui-color-background-negative);
253
225
  }
254
226
  .iui-toast.iui-negative > .iui-toast-anchor{
255
- color:#d10a0a;
256
- -webkit-tap-highlight-color:rgba(209, 10, 10, 0.2);
257
227
  color:var(--iui-color-foreground-negative);
258
228
  -webkit-tap-highlight-color:rgba(var(--iui-color-foreground-negative-rgb), var(--iui-opacity-5));
259
229
  }
@@ -268,38 +238,29 @@
268
238
  }
269
239
  }
270
240
  .iui-toast.iui-negative > .iui-toast-anchor::-moz-selection, .iui-toast.iui-negative > .iui-toast-anchor *::-moz-selection{
271
- background-color:rgba(209, 10, 10, 0.2);
272
241
  background-color:rgba(var(--iui-color-foreground-negative-rgb), var(--iui-opacity-5));
273
242
  }
274
243
  .iui-toast.iui-negative > .iui-toast-anchor::selection,
275
244
  .iui-toast.iui-negative > .iui-toast-anchor *::selection{
276
- background-color:rgba(209, 10, 10, 0.2);
277
245
  background-color:rgba(var(--iui-color-foreground-negative-rgb), var(--iui-opacity-5));
278
246
  }
279
247
  .iui-toast.iui-negative > .iui-toast-anchor:hover{
280
- color:#a10808;
281
248
  color:var(--iui-color-foreground-negative-overlay);
282
249
  }
283
250
  .iui-toast.iui-warning{
284
- border-color:#f18d13;
285
251
  border-color:var(--iui-color-foreground-warning);
286
252
  }
287
253
  .iui-toast.iui-warning > .iui-message::-moz-selection, .iui-toast.iui-warning > .iui-message *::-moz-selection{
288
- background-color:rgba(241, 141, 19, 0.2);
289
254
  background-color:rgba(var(--iui-color-foreground-warning-rgb), var(--iui-opacity-5));
290
255
  }
291
256
  .iui-toast.iui-warning > .iui-message::selection,
292
257
  .iui-toast.iui-warning > .iui-message *::selection{
293
- background-color:rgba(241, 141, 19, 0.2);
294
258
  background-color:rgba(var(--iui-color-foreground-warning-rgb), var(--iui-opacity-5));
295
259
  }
296
260
  .iui-toast.iui-warning > .iui-status-area{
297
- background-color:#f18d13;
298
261
  background-color:var(--iui-color-background-warning);
299
262
  }
300
263
  .iui-toast.iui-warning > .iui-toast-anchor{
301
- color:#f18d13;
302
- -webkit-tap-highlight-color:rgba(241, 141, 19, 0.2);
303
264
  color:var(--iui-color-foreground-warning);
304
265
  -webkit-tap-highlight-color:rgba(var(--iui-color-foreground-warning-rgb), var(--iui-opacity-5));
305
266
  }
@@ -314,15 +275,12 @@
314
275
  }
315
276
  }
316
277
  .iui-toast.iui-warning > .iui-toast-anchor::-moz-selection, .iui-toast.iui-warning > .iui-toast-anchor *::-moz-selection{
317
- background-color:rgba(241, 141, 19, 0.2);
318
278
  background-color:rgba(var(--iui-color-foreground-warning-rgb), var(--iui-opacity-5));
319
279
  }
320
280
  .iui-toast.iui-warning > .iui-toast-anchor::selection,
321
281
  .iui-toast.iui-warning > .iui-toast-anchor *::selection{
322
- background-color:rgba(241, 141, 19, 0.2);
323
282
  background-color:rgba(var(--iui-color-foreground-warning-rgb), var(--iui-opacity-5));
324
283
  }
325
284
  .iui-toast.iui-warning > .iui-toast-anchor:hover{
326
- color:#c6720c;
327
285
  color:var(--iui-color-foreground-warning-overlay);
328
286
  }
package/css/toggle-switch.css CHANGED
@@ -7,9 +7,8 @@
7
7
  padding:0;
8
8
  border:none;
9
9
  vertical-align:baseline;
10
- display:-ms-grid;
11
10
  display:grid;
12
- grid-template-areas:"toggle";
11
+ grid-template-areas:"toggle";
13
12
  align-items:center;
14
13
  gap:8px;
15
14
  font-size:14px;
@@ -22,20 +21,10 @@
22
21
  user-select:none;
23
22
  cursor:pointer;
24
23
  isolation:isolate;
25
- color:rgba(0, 0, 0, 0.8);
26
24
  color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-2));
27
25
  }
28
- .iui-toggle-switch-wrapper > * + *{
29
- margin-left:8px;
30
- }
31
- @supports (gap: 8px){
32
- .iui-toggle-switch-wrapper > * + *{
33
- margin-left:0;
34
- }
35
- }
36
26
  .iui-toggle-switch-wrapper.iui-disabled{
37
27
  cursor:not-allowed;
38
- color:rgba(0, 0, 0, 0.4);
39
28
  color:var(--iui-text-color-muted);
40
29
  }
41
30
  @media (forced-colors: active){
@@ -44,15 +33,13 @@
44
33
  }
45
34
  }
46
35
  .iui-toggle-switch-wrapper.iui-label-on-left{
47
- grid-template-areas:"label toggle";
36
+ grid-template-areas:"label toggle";
48
37
  }
49
38
  .iui-toggle-switch-wrapper.iui-label-on-right{
50
- grid-template-areas:"toggle label";
39
+ grid-template-areas:"toggle label";
51
40
  }
52
41
 
53
42
  .iui-toggle-switch{
54
- -ms-grid-row:1;
55
- -ms-grid-column:1;
56
43
  margin:0;
57
44
  padding:0;
58
45
  border:none;
@@ -61,21 +48,17 @@
61
48
  display:flex;
62
49
  position:relative;
63
50
  cursor:pointer;
64
- width:16px;
65
- height:16px;
51
+ -webkit-appearance:none;
52
+ -moz-appearance:none;
53
+ appearance:none;
54
+ width:44px;
55
+ border-radius:9999px;
56
+ transition:background-color 0.2s ease-out, border-color 0.2s ease-out;
57
+ background-color:var(--iui-color-background-1);
58
+ border:1px solid rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-4));
66
59
  background-color:var(--iui-color-background-1);
67
60
  border-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-4));
68
61
  }
69
-
70
- .iui-toggle-switch-wrapper.iui-label-on-left > .iui-toggle-switch{
71
- -ms-grid-row:1;
72
- -ms-grid-column:2;
73
- }
74
-
75
- .iui-toggle-switch-wrapper.iui-label-on-right > .iui-toggle-switch{
76
- -ms-grid-row:1;
77
- -ms-grid-column:1;
78
- }
79
62
  .iui-toggle-switch:focus-visible{
80
63
  outline:1px solid var(--iui-color-foreground-primary);
81
64
  outline-offset:1px;
@@ -86,29 +69,9 @@
86
69
  outline-offset:1px;
87
70
  }
88
71
  }
89
- @supports ((-webkit-appearance: none) or (-moz-appearance: none) or (appearance: none)){
90
- .iui-toggle-switch{
91
- -webkit-appearance:none;
92
- -moz-appearance:none;
93
- appearance:none;
94
- width:44px;
95
- height:auto;
96
- border-radius:9999px;
97
- box-sizing:border-box;
98
- transition:background-color 0.2s ease-out, border-color 0.2s ease-out;
99
- background-color:var(--iui-color-background-1);
100
- border:1px solid rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-4));
101
- }
102
- }
103
72
  .iui-toggle-switch-label{
104
- -ms-grid-row:1;
105
- -ms-grid-column:1;
106
73
  grid-area:label;
107
74
  }
108
- .iui-toggle-switch-wrapper.iui-label-on-right > .iui-toggle-switch-label{
109
- -ms-grid-row:1;
110
- -ms-grid-column:2;
111
- }
112
75
  .iui-toggle-switch::after{
113
76
  content:"";
114
77
  height:16px;
@@ -234,12 +197,10 @@
234
197
  }
235
198
  }
236
199
  .iui-toggle-switch-icon{
237
- -ms-grid-row:1;
238
- -ms-grid-column:1;
239
200
  opacity:0;
240
201
  grid-area:toggle;
241
- width:12px;
242
- height:12px;
202
+ width:16px;
203
+ height:16px;
243
204
  padding:2px;
244
205
  margin:4px;
245
206
  display:flex;
@@ -248,14 +209,6 @@
248
209
  pointer-events:none;
249
210
  fill:var(--iui-color-foreground-accessory);
250
211
  }
251
- .iui-toggle-switch-wrapper.iui-label-on-left > .iui-toggle-switch-icon{
252
- -ms-grid-row:1;
253
- -ms-grid-column:2;
254
- }
255
- .iui-toggle-switch-wrapper.iui-label-on-right > .iui-toggle-switch-icon{
256
- -ms-grid-row:1;
257
- -ms-grid-column:1;
258
- }
259
212
  @media (forced-colors: active){
260
213
  .iui-toggle-switch-icon{
261
214
  fill:HighlightText;
package/css/tooltip.css CHANGED
@@ -50,9 +50,6 @@
50
50
  z-index:999;
51
51
  box-shadow:0 3px 14px rgba(0, 0, 0, 0.25);
52
52
  pointer-events:none;
53
- background-color:rgba(0, 0, 0, 0.6);
54
- color:white;
55
- border:1px solid rgba(255, 255, 255, 0.4);
56
53
  background-color:rgba(0, 0, 0, var(--iui-opacity-3));
57
54
  color:var(--iui-color-foreground-accessory);
58
55
  border:1px solid rgba(var(--iui-color-foreground-accessory-rgb), var(--iui-opacity-4));
package/css/tree.css CHANGED
@@ -55,14 +55,12 @@
55
55
  .iui-tree-node-content{
56
56
  display:flex;
57
57
  align-items:center;
58
- box-sizing:border-box;
59
58
  min-height:33px;
60
59
  margin-left:calc(28px * (var(--level, 0)));
61
60
  overflow:hidden;
62
61
  padding-left:2px;
63
62
  }
64
63
  .iui-tree-node-content-icon{
65
- fill:rgba(0, 0, 0, 0.4);
66
64
  fill:var(--iui-icons-color);
67
65
  display:inline-flex;
68
66
  width:16px;
@@ -71,19 +69,15 @@
71
69
  flex-shrink:0;
72
70
  }
73
71
  .iui-tree-node-content-icon.iui-informational{
74
- fill:#008ae0;
75
72
  fill:var(--iui-icons-color-primary);
76
73
  }
77
74
  .iui-tree-node-content-icon.iui-positive{
78
- fill:#53a21a;
79
75
  fill:var(--iui-icons-color-positive);
80
76
  }
81
77
  .iui-tree-node-content-icon.iui-warning{
82
- fill:#f18d13;
83
78
  fill:var(--iui-icons-color-warning);
84
79
  }
85
80
  .iui-tree-node-content-icon.iui-negative{
86
- fill:#d10a0a;
87
81
  fill:var(--iui-icons-color-negative);
88
82
  }
89
83
  .iui-tree-node-content-icon:first-child{
@@ -114,22 +108,16 @@
114
108
  }
115
109
  .iui-tree-node-content-caption{
116
110
  font-size:12px;
117
- color:rgba(0, 0, 0, 0.4);
118
111
  color:var(--iui-text-color-muted);
119
112
  }
120
113
  .iui-tree-node:hover{
121
- background-color:rgba(0, 138, 224, 0.1);
122
114
  background-color:rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-6));
123
115
  }
124
116
  .iui-tree-node:hover .iui-tree-node-content-caption{
125
- color:black;
126
117
  color:var(--iui-color-foreground-body);
127
118
  transition:color 0.2s ease;
128
119
  }
129
120
  .iui-tree-node.iui-active{
130
- background-color:rgba(0, 138, 224, 0.2);
131
- outline:thin solid var(--iui-color-foreground-primary);
132
- outline-offset:-1px;
133
121
  background-color:rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-5));
134
122
  outline:thin solid var(--iui-color-foreground-primary);
135
123
  outline-offset:-1px;
@@ -138,10 +126,8 @@
138
126
  cursor:not-allowed;
139
127
  outline:none;
140
128
  background-color:transparent;
141
- color:rgba(0, 0, 0, 0.2);
142
129
  color:var(--iui-text-color-placeholder);
143
130
  }
144
131
  .iui-tree-node.iui-disabled .iui-tree-node-content-caption{
145
- color:rgba(0, 0, 0, 0.2);
146
132
  color:var(--iui-text-color-placeholder);
147
133
  }