@itwin/itwinui-css 1.0.0-dev.8 → 1.0.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 (51) hide show
  1. package/CHANGELOG.md +39 -969
  2. package/README.md +50 -29
  3. package/css/alert.css +1 -387
  4. package/css/all.css +1 -9049
  5. package/css/anchor.css +1 -64
  6. package/css/avatar.css +1 -222
  7. package/css/backdrop.css +1 -22
  8. package/css/badge.css +1 -25
  9. package/css/blockquote.css +1 -22
  10. package/css/breadcrumbs.css +1 -372
  11. package/css/button.css +1 -381
  12. package/css/carousel.css +1 -121
  13. package/css/checkbox.css +1 -150
  14. package/css/code.css +1 -81
  15. package/css/color-picker.css +1 -203
  16. package/css/date-picker.css +1 -399
  17. package/css/dialog.css +1 -159
  18. package/css/expandable-block.css +1 -171
  19. package/css/fieldset.css +1 -27
  20. package/css/file-upload.css +1 -78
  21. package/css/footer.css +1 -91
  22. package/css/global.css +1 -59
  23. package/css/header.css +1 -432
  24. package/css/information-panel.css +1 -189
  25. package/css/input.css +1 -166
  26. package/css/keyboard.css +1 -27
  27. package/css/location-marker.css +1 -114
  28. package/css/menu.css +1 -171
  29. package/css/non-ideal-state.css +1 -61
  30. package/css/progress-indicator.css +1 -299
  31. package/css/radio-tile.css +1 -187
  32. package/css/radio.css +1 -157
  33. package/css/select.css +1 -235
  34. package/css/side-navigation.css +1 -198
  35. package/css/skip-to-content.css +1 -61
  36. package/css/slider.css +1 -258
  37. package/css/stepper.css +1 -137
  38. package/css/surface.css +1 -14
  39. package/css/table.css +1 -705
  40. package/css/tabs.css +1 -321
  41. package/css/tag.css +1 -140
  42. package/css/text.css +1 -115
  43. package/css/tile.css +1 -488
  44. package/css/time-picker.css +1 -128
  45. package/css/toast.css +1 -284
  46. package/css/toggle-switch.css +1 -212
  47. package/css/tooltip.css +1 -48
  48. package/css/tree.css +1 -124
  49. package/css/utils.css +1 -679
  50. package/css/workflow-diagram.css +1 -63
  51. package/package.json +8 -4
package/css/slider.css CHANGED
@@ -2,261 +2,4 @@
2
2
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
3
3
  * See LICENSE.md in the project root for license terms and full copyright notice.
4
4
  *--------------------------------------------------------------------------------------------*/
5
- .iui-slider-horizontal{
6
- min-height:calc(var(--iui-size-s) * 2);
7
- }
8
- .iui-slider-horizontal .iui-slider-rail{
9
- width:100%;
10
- height:var(--iui-size-2xs);
11
- top:var(--iui-size-s);
12
- }
13
- .iui-slider-horizontal .iui-slider-thumb{
14
- top:calc(var(--iui-size-2xs) + 1px);
15
- transform:translateX(-50%);
16
- }
17
- .iui-slider-horizontal .iui-slider-track{
18
- height:var(--iui-size-2xs);
19
- left:0;
20
- }
21
- .iui-slider-horizontal .iui-slider-ticks{
22
- padding-top:var(--iui-size-m);
23
- }
24
- .iui-slider-horizontal .iui-slider-ticks .iui-slider-tick{
25
- flex-direction:column;
26
- width:1px;
27
- }
28
- .iui-slider-horizontal .iui-slider-ticks .iui-slider-tick::before{
29
- content:"";
30
- width:1px;
31
- height:var(--iui-size-s);
32
- }
33
- .iui-slider-horizontal .iui-slider-min,
34
- .iui-slider-horizontal .iui-slider-max{
35
- margin-top:var(--iui-size-3xs);
36
- min-width:var(--iui-size-l);
37
- flex-direction:row;
38
- }
39
- .iui-slider-horizontal .iui-slider-min svg,
40
- .iui-slider-horizontal .iui-slider-max svg{
41
- margin-top:var(--iui-size-2xs);
42
- }
43
- .iui-slider-horizontal .iui-slider-min{
44
- margin-right:var(--iui-size-s);
45
- text-align:right;
46
- }
47
- .iui-slider-horizontal .iui-slider-max{
48
- margin-left:var(--iui-size-s);
49
- }
50
-
51
- .iui-slider-vertical{
52
- flex-direction:column-reverse;
53
- min-width:calc(var(--iui-size-s) * 2);
54
- height:100%;
55
- }
56
- .iui-slider-vertical .iui-slider-rail{
57
- width:var(--iui-size-2xs);
58
- height:100%;
59
- left:var(--iui-size-s);
60
- }
61
- .iui-slider-vertical .iui-slider-thumb{
62
- transform:translateY(50%);
63
- left:calc(var(--iui-size-2xs) + 1px);
64
- }
65
- .iui-slider-vertical .iui-slider-track{
66
- width:var(--iui-size-2xs);
67
- bottom:0;
68
- left:var(--iui-size-s);
69
- }
70
- .iui-slider-vertical .iui-slider-ticks{
71
- padding-left:var(--iui-size-m);
72
- flex-direction:column-reverse;
73
- align-items:flex-start;
74
- height:100%;
75
- }
76
- .iui-slider-vertical .iui-slider-ticks .iui-slider-tick{
77
- flex:row;
78
- height:1px;
79
- }
80
- .iui-slider-vertical .iui-slider-ticks .iui-slider-tick::before{
81
- content:"";
82
- width:var(--iui-size-s);
83
- height:1px;
84
- margin-right:var(--iui-size-s);
85
- }
86
- .iui-slider-vertical .iui-slider-min,
87
- .iui-slider-vertical .iui-slider-max{
88
- margin-left:calc(var(--iui-size-3xs) + var(--iui-size-s));
89
- text-align:center;
90
- transform:translate(-50%, 0);
91
- min-height:var(--iui-size-l);
92
- flex-direction:column;
93
- }
94
- .iui-slider-vertical .iui-slider-min{
95
- margin-top:var(--iui-size-s);
96
- }
97
- .iui-slider-vertical .iui-slider-max{
98
- margin-bottom:var(--iui-size-s);
99
- }
100
-
101
- .iui-slider-component-container{
102
- display:flex;
103
- align-items:start;
104
- }
105
- .iui-slider-component-container.iui-disabled{
106
- cursor:not-allowed;
107
- }
108
- .iui-slider-component-container.iui-disabled .iui-slider-container{
109
- cursor:not-allowed;
110
- pointer-events:none;
111
- }
112
- .iui-slider-component-container.iui-disabled .iui-slider-thumb{
113
- cursor:not-allowed;
114
- background-color:var(--iui-color-background-4);
115
- border-color:var(--iui-color-background-4);
116
- }
117
- @media (forced-colors: active){
118
- .iui-slider-component-container.iui-disabled .iui-slider-thumb{
119
- background-color:GrayText;
120
- border-color:GrayText;
121
- }
122
- }
123
- .iui-slider-component-container.iui-disabled .iui-slider-track{
124
- background-color:var(--iui-color-foreground-4);
125
- }
126
- @media (forced-colors: active){
127
- .iui-slider-component-container.iui-disabled .iui-slider-track{
128
- background-color:GrayText;
129
- }
130
- }
131
- .iui-slider-component-container.iui-disabled .iui-slider-min,
132
- .iui-slider-component-container.iui-disabled .iui-slider-max,
133
- .iui-slider-component-container.iui-disabled .iui-slider-tick{
134
- -webkit-user-select:none;
135
- -moz-user-select:none;
136
- -ms-user-select:none;
137
- user-select:none;
138
- color:var(--iui-color-foreground-4);
139
- }
140
- @media (forced-colors: active){
141
- .iui-slider-component-container.iui-disabled .iui-slider-min,
142
- .iui-slider-component-container.iui-disabled .iui-slider-max,
143
- .iui-slider-component-container.iui-disabled .iui-slider-tick{
144
- color:GrayText;
145
- }
146
- }
147
-
148
- .iui-slider-container{
149
- position:relative;
150
- flex-grow:1;
151
- cursor:pointer;
152
- touch-action:pan-y;
153
- isolation:isolate;
154
- }
155
- .iui-slider-container.iui-grabbing{
156
- cursor:-webkit-grabbing;
157
- cursor:grabbing;
158
- }
159
-
160
- .iui-slider-ticks{
161
- position:relative;
162
- display:flex;
163
- pointer-events:none;
164
- justify-content:space-between;
165
- -webkit-user-select:none;
166
- -moz-user-select:none;
167
- -ms-user-select:none;
168
- user-select:none;
169
- }
170
- .iui-slider-ticks .iui-slider-tick{
171
- position:relative;
172
- display:flex;
173
- pointer-events:none;
174
- justify-content:center;
175
- align-items:center;
176
- }
177
- .iui-slider-ticks .iui-slider-tick::before{
178
- background-color:var(--iui-color-background-4);
179
- }
180
- @media (forced-colors: active){
181
- .iui-slider-ticks .iui-slider-tick::before{
182
- background-color:CanvasText;
183
- }
184
- }
185
-
186
- .iui-slider-rail{
187
- position:absolute;
188
- background-color:var(--iui-color-background-border);
189
- }
190
- @media (forced-colors: active){
191
- .iui-slider-rail{
192
- background-color:CanvasText;
193
- }
194
- }
195
-
196
- .iui-slider-thumb{
197
- box-sizing:content-box;
198
- position:absolute;
199
- height:var(--iui-size-m);
200
- width:var(--iui-size-m);
201
- border-radius:100%;
202
- z-index:1;
203
- cursor:-webkit-grab;
204
- cursor:grab;
205
- background:var(--iui-color-background-1);
206
- border:1px solid var(--iui-color-background-border);
207
- }
208
- .iui-slider-thumb:focus-visible{
209
- outline:2px solid var(--iui-color-foreground-primary);
210
- outline-offset:-1px;
211
- }
212
- @supports not selector(*:focus-visible){
213
- .iui-slider-thumb:focus{
214
- outline:2px solid var(--iui-color-foreground-primary);
215
- outline-offset:-1px;
216
- }
217
- }
218
- @media (forced-colors: active){
219
- .iui-slider-thumb{
220
- background:Canvas;
221
- border:1px solid CanvasText;
222
- }
223
- }
224
- .iui-slider-thumb:active{
225
- cursor:-webkit-grabbing;
226
- cursor:grabbing;
227
- }
228
-
229
- .iui-slider-track{
230
- pointer-events:none;
231
- position:absolute;
232
- top:var(--iui-size-s);
233
- background-color:var(--iui-color-foreground-primary);
234
- }
235
- @media (forced-colors: active){
236
- .iui-slider-track{
237
- background-color:Highlight;
238
- }
239
- }
240
-
241
- .iui-slider-min,
242
- .iui-slider-max{
243
- -webkit-user-select:all;
244
- -moz-user-select:all;
245
- user-select:all;
246
- display:flex;
247
- justify-content:center;
248
- }
249
- .iui-slider-min svg,
250
- .iui-slider-max svg{
251
- display:flex;
252
- flex-shrink:0;
253
- width:var(--iui-size-m);
254
- height:var(--iui-size-m);
255
- fill:var(--iui-color-foreground-4);
256
- }
257
- @media (forced-colors: active){
258
- .iui-slider-min svg,
259
- .iui-slider-max svg{
260
- fill:CanvasText;
261
- }
262
- }
5
+ .iui-slider-horizontal{min-height:calc(var(--iui-size-s)*2)}.iui-slider-horizontal .iui-slider-rail{width:100%;height:var(--iui-size-2xs);top:var(--iui-size-s)}.iui-slider-horizontal .iui-slider-thumb{top:calc(var(--iui-size-2xs) + 1px);transform:translate(-50%)}.iui-slider-horizontal .iui-slider-track{height:var(--iui-size-2xs);left:0}.iui-slider-horizontal .iui-slider-ticks{padding-top:var(--iui-size-m)}.iui-slider-horizontal .iui-slider-ticks .iui-slider-tick{width:1px;flex-direction:column}.iui-slider-horizontal .iui-slider-ticks .iui-slider-tick:before{content:"";width:1px;height:var(--iui-size-s)}.iui-slider-horizontal .iui-slider-min,.iui-slider-horizontal .iui-slider-max{margin-top:var(--iui-size-3xs);min-width:var(--iui-size-l);flex-direction:row}.iui-slider-horizontal .iui-slider-min svg,.iui-slider-horizontal .iui-slider-max svg{margin-top:var(--iui-size-2xs)}.iui-slider-horizontal .iui-slider-min{margin-right:var(--iui-size-s);text-align:right}.iui-slider-horizontal .iui-slider-max{margin-left:var(--iui-size-s)}.iui-slider-vertical{min-width:calc(var(--iui-size-s)*2);height:100%;flex-direction:column-reverse}.iui-slider-vertical .iui-slider-rail{width:var(--iui-size-2xs);height:100%;left:var(--iui-size-s)}.iui-slider-vertical .iui-slider-thumb{left:calc(var(--iui-size-2xs) + 1px);transform:translateY(50%)}.iui-slider-vertical .iui-slider-track{width:var(--iui-size-2xs);bottom:0;left:var(--iui-size-s)}.iui-slider-vertical .iui-slider-ticks{padding-left:var(--iui-size-m);height:100%;flex-direction:column-reverse;align-items:flex-start}.iui-slider-vertical .iui-slider-ticks .iui-slider-tick{flex:row;height:1px}.iui-slider-vertical .iui-slider-ticks .iui-slider-tick:before{content:"";width:var(--iui-size-s);height:1px;margin-right:var(--iui-size-s)}.iui-slider-vertical .iui-slider-min,.iui-slider-vertical .iui-slider-max{margin-left:calc(var(--iui-size-3xs) + var(--iui-size-s));text-align:center;min-height:var(--iui-size-l);flex-direction:column;transform:translate(-50%)}.iui-slider-vertical .iui-slider-min{margin-top:var(--iui-size-s)}.iui-slider-vertical .iui-slider-max{margin-bottom:var(--iui-size-s)}.iui-slider-component-container{align-items:start;display:flex}.iui-slider-component-container.iui-disabled{cursor:not-allowed}.iui-slider-component-container.iui-disabled .iui-slider-container{cursor:not-allowed;pointer-events:none}.iui-slider-component-container.iui-disabled .iui-slider-rail{background-color:var(--iui-color-background-disabled)}.iui-slider-component-container.iui-disabled .iui-slider-thumb{cursor:not-allowed;background-color:var(--iui-color-border);border-color:var(--iui-color-border)}@media (forced-colors:active){.iui-slider-component-container.iui-disabled .iui-slider-thumb{background-color:GrayText;border-color:GrayText}}.iui-slider-component-container.iui-disabled .iui-slider-track{background-color:var(--iui-color-border)}@media (forced-colors:active){.iui-slider-component-container.iui-disabled .iui-slider-track{background-color:GrayText}}.iui-slider-component-container.iui-disabled .iui-slider-min,.iui-slider-component-container.iui-disabled .iui-slider-max,.iui-slider-component-container.iui-disabled .iui-slider-tick{-webkit-user-select:none;user-select:none;color:var(--iui-color-text-disabled)}@media (forced-colors:active){.iui-slider-component-container.iui-disabled .iui-slider-min,.iui-slider-component-container.iui-disabled .iui-slider-max,.iui-slider-component-container.iui-disabled .iui-slider-tick{color:GrayText}}.iui-slider-container{cursor:pointer;touch-action:pan-y;isolation:isolate;flex-grow:1;position:relative}.iui-slider-container.iui-grabbing{cursor:grabbing}.iui-slider-ticks{pointer-events:none;-webkit-user-select:none;user-select:none;justify-content:space-between;display:flex;position:relative}.iui-slider-ticks .iui-slider-tick{pointer-events:none;justify-content:center;align-items:center;display:flex;position:relative}.iui-slider-ticks .iui-slider-tick:before{background-color:var(--iui-color-border)}@media (forced-colors:active){.iui-slider-ticks .iui-slider-tick:before{background-color:CanvasText}}.iui-slider-rail{background-color:var(--iui-color-border);position:absolute}@media (forced-colors:active){.iui-slider-rail{background-color:CanvasText}}.iui-slider-thumb{box-sizing:content-box;height:var(--iui-size-m);width:var(--iui-size-m);z-index:1;cursor:grab;background:var(--iui-color-background);border:1px solid var(--iui-color-border-foreground);border-radius:100%;position:absolute}.iui-slider-thumb:focus-visible{outline:2px solid var(--iui-color-border-accent);outline-offset:-1px}@supports not selector(*:focus-visible){.iui-slider-thumb:focus{outline:2px solid var(--iui-color-border-accent);outline-offset:-1px}}@media (forced-colors:active){.iui-slider-thumb{background:Canvas;border:1px solid CanvasText}}.iui-slider-thumb:active{cursor:grabbing}.iui-slider-track{pointer-events:none;top:var(--iui-size-s);background-color:var(--iui-color-border-accent);position:absolute}@media (forced-colors:active){.iui-slider-track{background-color:Highlight}}.iui-slider-min,.iui-slider-max{-webkit-user-select:all;user-select:all;justify-content:center;display:flex}.iui-slider-min svg,.iui-slider-max svg{width:var(--iui-size-m);height:var(--iui-size-m);fill:var(--iui-color-icon-muted);flex-shrink:0;display:flex}@media (forced-colors:active){.iui-slider-min svg,.iui-slider-max svg{fill:CanvasText}}
package/css/stepper.css CHANGED
@@ -2,140 +2,4 @@
2
2
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
3
3
  * See LICENSE.md in the project root for license terms and full copyright notice.
4
4
  *--------------------------------------------------------------------------------------------*/
5
- .iui-stepper{
6
- display:flex;
7
- flex-direction:column;
8
- row-gap:calc(var(--iui-size-s) * 0.5);
9
- }
10
- .iui-stepper > ol{
11
- margin:0;
12
- padding:0;
13
- border:none;
14
- vertical-align:baseline;
15
- display:flex;
16
- justify-content:space-around;
17
- align-items:flex-start;
18
- width:100%;
19
- }
20
-
21
- .iui-stepper-step{
22
- --_iui-stepper-step-background-color:var(--iui-color-background-1);
23
- --_iui-stepper-step-border-color:var(--iui-color-foreground-positive);
24
- --_iui-stepper-step-number-color:var(--iui-color-foreground-positive);
25
- --_iui-stepper-step-text-color:var(--iui-color-foreground-positive);
26
- --_iui-stepper-step-track-before-color:var(--iui-color-foreground-positive);
27
- --_iui-stepper-step-track-after-color:var(--iui-color-foreground-positive);
28
- flex:1;
29
- align-items:center;
30
- display:flex;
31
- flex-direction:column;
32
- margin:0;
33
- padding:0;
34
- border:none;
35
- vertical-align:baseline;
36
- font-size:var(--iui-font-size-0);
37
- font-weight:var(--iui-font-weight-normal);
38
- line-height:var(--iui-size-l);
39
- color:var(--_iui-stepper-step-text-color);
40
- }
41
- .iui-stepper-step:first-of-type{
42
- --_iui-stepper-step-track-before-color:transparent;
43
- }
44
- .iui-stepper-step:last-of-type{
45
- --_iui-stepper-step-track-after-color:transparent;
46
- }
47
- .iui-stepper-step.iui-current{
48
- --_iui-stepper-step-background-color:var(--iui-color-background-positive);
49
- --_iui-stepper-step-border-color:var(--iui-color-background-positive);
50
- --_iui-stepper-step-number-color:var(--iui-color-foreground-accessory);
51
- --_iui-stepper-step-track-after-color:var(--iui-color-background-border);
52
- font-weight:var(--iui-font-weight-semibold);
53
- }
54
- .iui-stepper-step.iui-current ~ .iui-stepper-step{
55
- --_iui-stepper-step-background-color:var(--iui-color-background-1);
56
- --_iui-stepper-step-border-color:var(--iui-color-background-border);
57
- --_iui-stepper-step-number-color:var(--iui-color-foreground-4);
58
- --_iui-stepper-step-text-color:var(--iui-color-foreground-4);
59
- --_iui-stepper-step-track-before-color:var(--iui-color-background-border);
60
- }
61
- .iui-stepper-step.iui-current ~ .iui-stepper-step:not(:last-of-type){
62
- --_iui-stepper-step-track-after-color:var(--iui-color-background-border);
63
- }
64
- .iui-stepper-step.iui-clickable:focus{
65
- outline:0;
66
- }
67
-
68
- .iui-stepper-circle{
69
- align-items:center;
70
- border-radius:var(--iui-border-radius-round);
71
- display:flex;
72
- width:var(--iui-size-l);
73
- height:var(--iui-size-l);
74
- justify-content:center;
75
- overflow-wrap:break-word;
76
- -webkit-user-select:none;
77
- -moz-user-select:none;
78
- -ms-user-select:none;
79
- user-select:none;
80
- border:1px solid var(--_iui-stepper-step-border-color);
81
- background-color:var(--_iui-stepper-step-background-color);
82
- color:var(--_iui-stepper-step-number-color);
83
- }
84
- .iui-clickable .iui-stepper-circle{
85
- cursor:pointer;
86
- transition:background-color var(--iui-duration-1) ease-out, border-color var(--iui-duration-1) ease-out, color var(--iui-duration-1) ease-out;
87
- }
88
- .iui-clickable .iui-stepper-circle:hover{
89
- --_iui-stepper-step-background-color:var(--iui-color-background-positive);
90
- --_iui-stepper-step-border-color:var(--iui-color-background-positive);
91
- --_iui-stepper-step-number-color:var(--iui-color-foreground-accessory);
92
- }
93
-
94
- .iui-clickable:focus .iui-stepper-circle{
95
- outline:2px solid var(--iui-color-foreground-positive);
96
- outline-offset:-1px;
97
- }
98
-
99
- .iui-clickable:focus:not(:focus-visible) .iui-stepper-circle{
100
- outline:none;
101
- }
102
-
103
- .iui-stepper-track-content{
104
- display:flex;
105
- align-items:center;
106
- width:100%;
107
- }
108
- .iui-stepper-track-content::before, .iui-stepper-track-content::after{
109
- content:"";
110
- height:var(--iui-size-3xs);
111
- flex:1 2 auto;
112
- }
113
- .iui-stepper-track-content::before{
114
- background-color:var(--_iui-stepper-step-track-before-color);
115
- }
116
- .iui-stepper-track-content::after{
117
- background-color:var(--_iui-stepper-step-track-after-color);
118
- }
119
-
120
- .iui-stepper-step-name{
121
- text-align:center;
122
- -webkit-user-select:all;
123
- -moz-user-select:all;
124
- user-select:all;
125
- color:var(--_iui-stepper-step-text-color);
126
- }
127
-
128
- .iui-stepper-steps-label{
129
- display:block;
130
- font-size:var(--iui-font-size-3);
131
- text-align:center;
132
- }
133
-
134
- .iui-stepper-steps-label-count{
135
- -webkit-user-select:none;
136
- -moz-user-select:none;
137
- -ms-user-select:none;
138
- user-select:none;
139
- margin-right:var(--iui-size-xs);
140
- color:var(--iui-color-foreground-4);
141
- }
5
+ .iui-stepper{row-gap:calc(var(--iui-size-s)*.5);flex-direction:column;display:flex}.iui-stepper>ol{vertical-align:baseline;width:100%;border:none;justify-content:space-around;align-items:flex-start;margin:0;padding:0;display:flex}.iui-stepper-step{--_iui-stepper-step-background-color:var(--iui-color-background);--_iui-stepper-step-border-color:var(--iui-color-border-positive);--_iui-stepper-step-number-color:var(--iui-color-text-positive);--_iui-stepper-step-text-color:var(--iui-color-text-positive);--_iui-stepper-step-track-before-color:var(--iui-color-border-positive);--_iui-stepper-step-track-after-color:var(--iui-color-border-positive);vertical-align:baseline;font-size:var(--iui-font-size-0);font-weight:var(--iui-font-weight-normal);line-height:var(--iui-size-l);color:var(--_iui-stepper-step-text-color);border:none;flex-direction:column;flex:1;align-items:center;margin:0;padding:0;display:flex}.iui-stepper-step:first-of-type{--_iui-stepper-step-track-before-color:transparent}.iui-stepper-step:last-of-type{--_iui-stepper-step-track-after-color:transparent}.iui-stepper-step.iui-current{--_iui-stepper-step-background-color:var(--iui-color-background-positive);--_iui-stepper-step-border-color:var(--iui-color-background-positive);--_iui-stepper-step-number-color:var(--iui-color-white);--_iui-stepper-step-track-after-color:var(--iui-color-border);font-weight:var(--iui-font-weight-semibold)}.iui-stepper-step.iui-current~.iui-stepper-step{--_iui-stepper-step-background-color:var(--iui-color-background);--_iui-stepper-step-border-color:var(--iui-color-border);--_iui-stepper-step-number-color:var(--iui-color-text-muted);--_iui-stepper-step-text-color:var(--iui-color-text-muted);--_iui-stepper-step-track-before-color:var(--iui-color-border)}.iui-stepper-step.iui-current~.iui-stepper-step:not(:last-of-type){--_iui-stepper-step-track-after-color:var(--iui-color-border)}.iui-stepper-step.iui-clickable:focus{outline:0}.iui-stepper-circle{border-radius:var(--iui-border-radius-round);width:var(--iui-size-l);height:var(--iui-size-l);overflow-wrap:break-word;-webkit-user-select:none;user-select:none;border:1px solid var(--_iui-stepper-step-border-color);background-color:var(--_iui-stepper-step-background-color);color:var(--_iui-stepper-step-number-color);justify-content:center;align-items:center;display:flex}.iui-clickable .iui-stepper-circle{cursor:pointer;transition:background-color var(--iui-duration-1)ease-out,border-color var(--iui-duration-1)ease-out,color var(--iui-duration-1)ease-out}.iui-clickable .iui-stepper-circle:hover{--_iui-stepper-step-background-color:var(--iui-color-background-positive);--_iui-stepper-step-border-color:var(--iui-color-background-positive);--_iui-stepper-step-number-color:var(--iui-color-white)}.iui-clickable:focus .iui-stepper-circle{outline:2px solid var(--iui-color-border-positive);outline-offset:-1px}.iui-clickable:focus:not(:focus-visible) .iui-stepper-circle{outline:none}.iui-stepper-track-content{width:100%;align-items:center;display:flex}.iui-stepper-track-content:before,.iui-stepper-track-content:after{content:"";height:var(--iui-size-3xs);flex:1 2 auto}.iui-stepper-track-content:before{background-color:var(--_iui-stepper-step-track-before-color)}.iui-stepper-track-content:after{background-color:var(--_iui-stepper-step-track-after-color)}.iui-stepper-step-name{text-align:center;-webkit-user-select:all;user-select:all;color:var(--_iui-stepper-step-text-color)}.iui-stepper-steps-label{font-size:var(--iui-font-size-3);text-align:center;display:block}.iui-stepper-steps-label-count{-webkit-user-select:none;user-select:none;margin-right:var(--iui-size-xs);color:var(--iui-color-text-muted)}
package/css/surface.css CHANGED
@@ -2,17 +2,4 @@
2
2
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
3
3
  * See LICENSE.md in the project root for license terms and full copyright notice.
4
4
  *--------------------------------------------------------------------------------------------*/
5
- .iui-surface{
6
- --iui-surface-background-color:var(--iui-color-background-1);
7
- --iui-surface-border-radius:0;
8
- --iui-surface-elevation:var(--iui-shadow-1);
9
- background-color:var(--iui-surface-background-color);
10
- border-radius:var(--iui-surface-border-radius);
11
- box-shadow:var(--iui-surface-elevation);
12
- color:var(--iui-color-foreground-2);
13
- }
14
- @media (forced-colors: active){
15
- .iui-surface{
16
- border:1px solid transparent;
17
- }
18
- }
5
+ .iui-surface{--iui-surface-background-color:var(--iui-color-background);--iui-surface-border-color:var(--iui-color-border-subtle);--iui-surface-border-radius:var(--iui-border-radius-1);--iui-surface-elevation:var(--iui-shadow-1);background-color:var(--iui-surface-background-color);border:1px solid var(--iui-surface-border-color);border-radius:var(--iui-surface-border-radius);box-shadow:var(--iui-surface-elevation);color:var(--iui-color-text)}