@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/header.css CHANGED
@@ -3,8 +3,8 @@
3
3
  * See LICENSE.md in the project root for license terms and full copyright notice.
4
4
  *--------------------------------------------------------------------------------------------*/
5
5
  .iui-page-header{
6
- --_iui-header-brand-label-font-size:16px;
7
- --_iui-header-height:60px;
6
+ --_iui-header-brand-label-font-size:var(--iui-font-size-2);
7
+ --_iui-header-height:calc(var(--iui-size-s) * 5);
8
8
  --_iui-header-icon-scale:none;
9
9
  margin:0;
10
10
  padding:0;
@@ -19,18 +19,18 @@
19
19
  -ms-user-select:none;
20
20
  user-select:none;
21
21
  background-color:var(--iui-color-background-1);
22
- border-bottom:2px solid var(--iui-color-background-border);
23
- color:var(--iui-text-color);
22
+ border-bottom:var(--iui-size-3xs) solid var(--iui-color-background-border);
23
+ color:var(--iui-color-foreground-2);
24
24
  padding:env(safe-area-inset-top) env(safe-area-inset-right) 0 env(safe-area-inset-left);
25
25
  }
26
26
  @media (prefers-reduced-motion: no-preference){
27
27
  .iui-page-header{
28
- transition:height 0.2s ease-out;
28
+ transition:height var(--iui-duration-1) ease-out;
29
29
  }
30
30
  }
31
31
  .iui-page-header[data-iui-size=slim]{
32
- --_iui-header-brand-label-font-size:14px;
33
- --_iui-header-height:36px;
32
+ --_iui-header-brand-label-font-size:var(--iui-font-size-1);
33
+ --_iui-header-height:calc(var(--iui-size-s) * 3);
34
34
  --_iui-header-icon-scale:scale(0.66666);
35
35
  }
36
36
 
@@ -55,12 +55,12 @@
55
55
  @media (prefers-reduced-motion: no-preference){
56
56
  .iui-page-header-right .iui-avatar,
57
57
  .iui-page-header-right .iui-avatar *{
58
- transition:width 0.2s ease-out, height 0.2s ease-out, font-size 0.2s ease-out;
58
+ transition:width var(--iui-duration-1) ease-out, height var(--iui-duration-1) ease-out, font-size var(--iui-duration-1) ease-out;
59
59
  }
60
60
  }
61
61
 
62
62
  .iui-page-header-divider{
63
- height:24px;
63
+ height:calc(var(--iui-size-s) * 2);
64
64
  border-left:1px solid var(--iui-color-background-border);
65
65
  }
66
66
  @media (forced-colors: active){
@@ -70,13 +70,14 @@
70
70
  }
71
71
 
72
72
  .iui-header-breadcrumbs{
73
+ --_iui-breadcrumbs-height:100%;
73
74
  margin:0;
74
75
  padding:0;
75
76
  border:none;
76
77
  vertical-align:baseline;
77
78
  display:flex;
78
79
  align-items:center;
79
- height:100%;
80
+ height:var(--_iui-breadcrumbs-height);
80
81
  }
81
82
 
82
83
  .iui-header-brand{
@@ -92,7 +93,7 @@ a.iui-header-brand,
92
93
  button.iui-header-brand, .iui-header-brand[role=button]{
93
94
  cursor:pointer;
94
95
  -webkit-tap-highlight-color:transparent;
95
- transition:background-color 0.2s ease-out;
96
+ transition:background-color var(--iui-duration-1) ease-out;
96
97
  margin:0;
97
98
  padding:0;
98
99
  border:none;
@@ -123,7 +124,7 @@ button.iui-header-brand, .iui-header-brand[role=button]{
123
124
  }
124
125
  a.iui-header-brand:hover,
125
126
  button.iui-header-brand:hover, .iui-header-brand[role=button]:hover{
126
- background-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-6));
127
+ background-color:var(--iui-color-background-transparent-hover);
127
128
  }
128
129
 
129
130
  a.iui-header-brand{
@@ -133,26 +134,26 @@ a.iui-header-brand{
133
134
  .iui-header-brand-icon{
134
135
  display:flex;
135
136
  flex-shrink:0;
136
- width:24px;
137
- height:24px;
138
- margin:0 24px;
139
- fill:var(--iui-icon-color-actionable);
137
+ width:calc(1.5 * var(--iui-size-m));
138
+ height:calc(1.5 * var(--iui-size-m));
139
+ margin:0 calc(1.5 * var(--iui-size-m));
140
+ fill:var(--iui-color-foreground-2);
140
141
  will-change:transform;
141
142
  transform:var(--_iui-header-icon-scale);
142
143
  }
143
144
  @media (prefers-reduced-motion: no-preference){
144
145
  .iui-header-brand-icon{
145
- transition:transform 0.2s ease-out;
146
+ transition:transform var(--iui-duration-1) ease-out;
146
147
  }
147
148
  }
148
149
 
149
150
  .iui-header-brand-label{
150
- margin-right:12px;
151
+ margin-right:var(--iui-size-s);
151
152
  font-size:var(--_iui-header-brand-label-font-size);
152
153
  }
153
154
  @media (prefers-reduced-motion: no-preference){
154
155
  .iui-header-brand-label{
155
- transition:font-size 0.2s ease-out;
156
+ transition:font-size var(--iui-duration-1) ease-out;
156
157
  }
157
158
  }
158
159
  @media (max-width: 991px){
@@ -181,8 +182,8 @@ a.iui-header-brand{
181
182
  .iui-header-breadcrumbs-list{
182
183
  overflow:hidden;
183
184
  box-sizing:content-box;
184
- margin-bottom:-4px;
185
- padding-bottom:4px;
185
+ margin-bottom:calc(0px - var(--iui-size-2xs));
186
+ padding-bottom:var(--iui-size-2xs);
186
187
  }
187
188
 
188
189
  .iui-header-breadcrumb-button{
@@ -198,14 +199,14 @@ a.iui-header-brand{
198
199
  border-radius:0;
199
200
  max-width:25vw;
200
201
  overflow:hidden;
201
- padding-left:12px;
202
- padding-right:12px;
202
+ padding-left:var(--iui-size-s);
203
+ padding-right:var(--iui-size-s);
203
204
  box-sizing:border-box;
204
205
  font-family:inherit;
205
206
  -webkit-tap-highlight-color:transparent;
206
- transition:background-color 0.2s ease-out;
207
+ transition:background-color var(--iui-duration-1) ease-out;
207
208
  color:inherit;
208
- gap:12px;
209
+ gap:var(--iui-size-s);
209
210
  cursor:pointer;
210
211
  }
211
212
  .iui-header-breadcrumb-button:focus-visible{
@@ -236,15 +237,15 @@ a.iui-header-brand{
236
237
  }
237
238
 
238
239
  .iui-header-breadcrumb-button-split{
239
- padding:0 8px;
240
- margin-left:-8px;
240
+ padding:0 var(--iui-size-xs);
241
+ margin-left:calc(0px - var(--iui-size-xs));
241
242
  flex-shrink:0;
242
243
  }
243
244
  .iui-header-breadcrumb-button-split:hover{
244
- background-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-6));
245
+ background-color:hsl(var(--iui-color-foreground-1-hsl)/var(--iui-opacity-6));
245
246
  }
246
247
  [aria-current] .iui-header-breadcrumb-button-split:hover{
247
- background-color:rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-6));
248
+ background-color:hsl(var(--iui-color-foreground-primary-hsl)/var(--iui-opacity-6));
248
249
  }
249
250
 
250
251
  .iui-header-breadcrumb-button-split:disabled, .iui-header-breadcrumb-button-split[aria-disabled=true]{
@@ -256,12 +257,12 @@ a.iui-header-brand{
256
257
 
257
258
  .iui-header-breadcrumb-item{
258
259
  max-width:25vw;
259
- transition:background-color 0.2s ease-out;
260
+ transition:background-color var(--iui-duration-1) ease-out;
260
261
  height:100%;
261
262
  display:flex;
262
263
  overflow:hidden;
263
264
  position:relative;
264
- color:var(--iui-text-color);
265
+ color:var(--iui-color-foreground-2);
265
266
  box-sizing:border-box;
266
267
  }
267
268
  @media (forced-colors: active){
@@ -271,11 +272,11 @@ a.iui-header-brand{
271
272
  }
272
273
  }
273
274
  .iui-header-breadcrumb-item:hover{
274
- background-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-6));
275
+ background-color:var(--iui-color-background-transparent-hover);
275
276
  }
276
277
  .iui-header-breadcrumb-item[aria-current]{
277
- background-color:rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-6));
278
- box-shadow:0 2px 0 0 currentColor;
278
+ background-color:var(--iui-color-background-subtle-primary);
279
+ box-shadow:0 var(--iui-size-3xs) 0 0 currentColor;
279
280
  color:var(--iui-color-foreground-primary);
280
281
  }
281
282
  @media (forced-colors: active){
@@ -287,7 +288,7 @@ a.iui-header-brand{
287
288
  .iui-header-breadcrumb-item[aria-disabled=true]{
288
289
  cursor:not-allowed;
289
290
  background-color:transparent;
290
- color:var(--iui-text-color-placeholder);
291
+ color:var(--iui-color-foreground-5);
291
292
  }
292
293
  .iui-header-breadcrumb-item[aria-disabled=true][aria-current]{
293
294
  box-shadow:none;
@@ -308,21 +309,21 @@ a.iui-header-brand{
308
309
  .iui-header-breadcrumb-button-icon{
309
310
  display:flex;
310
311
  flex-shrink:0;
311
- width:24px;
312
- height:24px;
312
+ width:calc(1.5 * var(--iui-size-m));
313
+ height:calc(1.5 * var(--iui-size-m));
313
314
  background-color:var(--iui-color-background-3);
314
- border-radius:4px;
315
+ border-radius:var(--iui-border-radius-1);
315
316
  display:inline-flex;
316
317
  flex-shrink:0;
317
318
  box-sizing:border-box;
318
- padding:4px;
319
- fill:var(--iui-icon-color);
319
+ padding:var(--iui-size-2xs);
320
+ fill:var(--iui-color-foreground-4);
320
321
  will-change:transform;
321
322
  transform:var(--_iui-header-icon-scale);
322
323
  }
323
324
  @media (prefers-reduced-motion: no-preference){
324
325
  .iui-header-breadcrumb-button-icon{
325
- transition:transform 0.2s ease-out;
326
+ transition:transform var(--iui-duration-1) ease-out;
326
327
  }
327
328
  }
328
329
  @media (forced-colors: active){
@@ -333,12 +334,12 @@ a.iui-header-brand{
333
334
  img.iui-header-breadcrumb-button-icon,
334
335
  div.iui-header-breadcrumb-button-icon{
335
336
  padding:0;
336
- transition:filter 0.2s ease-out;
337
+ transition:filter var(--iui-duration-1) ease-out;
337
338
  }
338
339
  @media (prefers-reduced-motion: no-preference){
339
340
  img.iui-header-breadcrumb-button-icon,
340
341
  div.iui-header-breadcrumb-button-icon{
341
- transition:filter 0.2s ease-out, transform 0.2s ease-out;
342
+ transition:filter var(--iui-duration-1) ease-out, transform var(--iui-duration-1) ease-out;
342
343
  }
343
344
  }
344
345
 
@@ -360,7 +361,7 @@ div.iui-header-breadcrumb-button-icon{
360
361
 
361
362
  :disabled .iui-header-breadcrumb-button-icon, [aria-disabled=true] .iui-header-breadcrumb-button-icon{
362
363
  background-color:var(--iui-color-background-2);
363
- fill:var(--iui-icon-color-actionable-disabled);
364
+ fill:var(--iui-color-foreground-5);
364
365
  }
365
366
  @media (forced-colors: active){
366
367
  :disabled .iui-header-breadcrumb-button-icon, [aria-disabled=true] .iui-header-breadcrumb-button-icon{
@@ -384,11 +385,11 @@ div.iui-header-breadcrumb-button-icon{
384
385
  .iui-header-breadcrumb-button-dropdown-icon{
385
386
  display:flex;
386
387
  flex-shrink:0;
387
- width:16px;
388
- height:16px;
388
+ width:var(--iui-size-m);
389
+ height:var(--iui-size-m);
389
390
  fill:currentColor;
390
391
  flex-shrink:0;
391
- margin-right:-4px;
392
+ margin-right:calc(0px - var(--iui-size-2xs));
392
393
  }
393
394
  .iui-header-breadcrumb-button-split .iui-header-breadcrumb-button-dropdown-icon{
394
395
  margin-right:0;
@@ -404,10 +405,10 @@ div.iui-header-breadcrumb-button-icon{
404
405
  display:flex;
405
406
  flex-direction:column;
406
407
  justify-content:center;
407
- font-size:14px;
408
+ font-size:var(--iui-font-size-1);
408
409
  text-align:left;
409
410
  overflow:hidden;
410
- transition:color 0.2s ease-out;
411
+ transition:color var(--iui-duration-1) ease-out;
411
412
  }
412
413
  .iui-header-breadcrumb-button-text-label, .iui-header-breadcrumb-button-text-sublabel{
413
414
  overflow:hidden;
@@ -415,12 +416,12 @@ div.iui-header-breadcrumb-button-icon{
415
416
  text-overflow:ellipsis;
416
417
  }
417
418
  .iui-header-breadcrumb-button-text-sublabel{
418
- font-size:12px;
419
+ font-size:var(--iui-font-size-0);
419
420
  opacity:var(--iui-opacity-3);
420
421
  }
421
422
  @media (prefers-reduced-motion: no-preference){
422
423
  .iui-header-breadcrumb-button-text-sublabel{
423
- transition:visibility 0s linear 0s, width 0.2s ease-out, height 0.2s ease-out, opacity 0.2s ease-out;
424
+ transition:visibility 0s linear 0s, width var(--iui-duration-1) ease-out, height var(--iui-duration-1) ease-out, opacity var(--iui-duration-1) ease-out;
424
425
  }
425
426
  }
426
427
  .iui-active .iui-header-breadcrumb-button-text-sublabel, [aria-current] .iui-header-breadcrumb-button-text-sublabel{
package/css/information-panel.css CHANGED
@@ -5,6 +5,7 @@
5
5
  .iui-information-panel-wrapper{
6
6
  position:relative;
7
7
  overflow:hidden;
8
+ border-radius:var(--iui-border-radius-1);
8
9
  }
9
10
 
10
11
  .iui-information-panel{
@@ -19,7 +20,7 @@
19
20
  }
20
21
  @media (prefers-reduced-motion: no-preference){
21
22
  .iui-information-panel{
22
- transition:visibility 0s 0.2s ease-in, transform 0.2s ease-out, opacity 0.2s ease;
23
+ transition:visibility var(--iui-duration-0) var(--iui-duration-1) ease-in, transform var(--iui-duration-1) ease-out, opacity var(--iui-duration-1) ease;
23
24
  }
24
25
  }
25
26
  .iui-information-panel > .iui-resizer{
@@ -35,11 +36,11 @@
35
36
  }
36
37
  .iui-information-panel .iui-information-header,
37
38
  .iui-information-panel .iui-information-body{
38
- padding-left:12px;
39
- padding-right:12px;
39
+ padding-left:var(--iui-size-s);
40
+ padding-right:var(--iui-size-s);
40
41
  }
41
42
  .iui-information-panel .iui-information-header{
42
- height:60px;
43
+ height:calc(var(--iui-size-s) * 5);
43
44
  flex-shrink:0;
44
45
  display:flex;
45
46
  align-items:center;
@@ -62,10 +63,10 @@
62
63
  .iui-information-panel .iui-information-header .iui-information-header-label svg{
63
64
  display:flex;
64
65
  flex-shrink:0;
65
- width:24px;
66
- height:24px;
67
- fill:var(--iui-icon-color);
68
- margin-right:8px;
66
+ width:calc(1.5 * var(--iui-size-m));
67
+ height:calc(1.5 * var(--iui-size-m));
68
+ fill:var(--iui-color-foreground-4);
69
+ margin-right:var(--iui-size-xs);
69
70
  }
70
71
  @media (forced-colors: active){
71
72
  .iui-information-panel .iui-information-header .iui-information-header-label svg{
@@ -74,11 +75,11 @@
74
75
  }
75
76
  .iui-information-panel .iui-information-header .iui-information-header-actions{
76
77
  flex-shrink:0;
77
- margin-left:8px;
78
+ margin-left:var(--iui-size-xs);
78
79
  }
79
80
  .iui-information-panel .iui-information-body{
80
- padding-top:12px;
81
- padding-bottom:12px;
81
+ padding-top:var(--iui-size-s);
82
+ padding-bottom:var(--iui-size-s);
82
83
  height:100%;
83
84
  overflow-x:hidden;
84
85
  overflow-y:auto;
@@ -90,17 +91,17 @@
90
91
  .iui-information-panel.iui-right{
91
92
  top:0;
92
93
  right:0;
93
- width:384px;
94
- min-width:192px;
94
+ width:calc(var(--iui-size-3xl) * 4);
95
+ min-width:calc(var(--iui-size-3xl) * 2);
95
96
  height:100%;
96
97
  transform:translateX(100%);
97
- box-shadow:-1px 0 10px rgba(0, 0, 0, 0.25);
98
+ box-shadow:-1px 0 10px var(--iui-shadow-color);
98
99
  -webkit-clip-path:inset(0 0 0 -15px);
99
100
  clip-path:inset(0 0 0 -15px);
100
101
  }
101
102
  .iui-information-panel.iui-right > .iui-resizer{
102
103
  height:100%;
103
- width:16px;
104
+ width:var(--iui-size-m);
104
105
  top:0;
105
106
  cursor:ew-resize;
106
107
  justify-content:center;
@@ -111,29 +112,29 @@
111
112
  }
112
113
  @media (prefers-reduced-motion: no-preference){
113
114
  .iui-information-panel.iui-right > .iui-resizer > .iui-resizer-bar{
114
- transition:background-color 0.2s ease-out, width 0.2s ease-out;
115
+ transition:background-color var(--iui-duration-1) ease-out, width var(--iui-duration-1) ease-out;
115
116
  }
116
117
  }
117
118
  .iui-information-panel.iui-right > .iui-resizer:hover > .iui-resizer-bar{
118
- width:4px;
119
+ width:var(--iui-size-2xs);
119
120
  }
120
121
  .iui-information-panel.iui-right > .iui-resizer{
121
- left:-8px;
122
+ left:calc(var(--iui-size-m) * -0.5);
122
123
  }
123
124
  .iui-information-panel.iui-bottom{
124
125
  left:0;
125
126
  bottom:0;
126
- height:384px;
127
- min-height:192px;
127
+ height:calc(var(--iui-size-3xl) * 4);
128
+ min-height:calc(var(--iui-size-3xl) * 2);
128
129
  width:100%;
129
130
  transform:translateY(100%);
130
- box-shadow:0 -1px 10px rgba(0, 0, 0, 0.25);
131
+ box-shadow:0 -1px 10px var(--iui-shadow-color);
131
132
  -webkit-clip-path:inset(-15px 0 0 0);
132
133
  clip-path:inset(-15px 0 0 0);
133
134
  }
134
135
  .iui-information-panel.iui-bottom > .iui-resizer{
135
136
  width:100%;
136
- height:16px;
137
+ height:var(--iui-size-m);
137
138
  left:0;
138
139
  cursor:ns-resize;
139
140
  align-items:center;
@@ -144,14 +145,14 @@
144
145
  }
145
146
  @media (prefers-reduced-motion: no-preference){
146
147
  .iui-information-panel.iui-bottom > .iui-resizer > .iui-resizer-bar{
147
- transition:background-color 0.2s ease-out, height 0.2s ease-out;
148
+ transition:background-color var(--iui-duration-1) ease-out, height var(--iui-duration-1) ease-out;
148
149
  }
149
150
  }
150
151
  .iui-information-panel.iui-bottom > .iui-resizer:hover > .iui-resizer-bar{
151
- height:4px;
152
+ height:var(--iui-size-2xs);
152
153
  }
153
154
  .iui-information-panel.iui-bottom > .iui-resizer{
154
- top:-8px;
155
+ top:calc(var(--iui-size-m) * -0.5);
155
156
  }
156
157
  .iui-information-panel.iui-visible{
157
158
  opacity:1;
@@ -160,7 +161,7 @@
160
161
  }
161
162
  @media (prefers-reduced-motion: no-preference){
162
163
  .iui-information-panel.iui-visible{
163
- transition:transform 0.2s ease-out, opacity 0.2s ease;
164
+ transition:transform var(--iui-duration-1) ease-out, opacity var(--iui-duration-1) ease;
164
165
  }
165
166
  }
166
167
  .iui-information-panel.iui-visible > .iui-resizer{
@@ -171,22 +172,22 @@
171
172
  display:grid;
172
173
  }
173
174
  .iui-information-body-content .iui-input-label{
174
- font-weight:400;
175
- color:var(--iui-text-color-muted);
175
+ font-weight:var(--iui-font-weight-normal);
176
+ color:var(--iui-color-foreground-4);
176
177
  }
177
178
  .iui-information-body-content:not(.iui-inline) > *:nth-child(even):not(:last-child){
178
- margin-bottom:12px;
179
+ margin-bottom:var(--iui-size-s);
179
180
  }
180
181
  .iui-information-body-content.iui-inline{
181
- row-gap:12px;
182
+ row-gap:var(--iui-size-s);
182
183
  grid-template-columns:auto 1fr;
183
184
  align-items:center;
184
185
  }
185
186
  .iui-information-body-content.iui-inline .iui-input-label{
186
- margin:0 16px 0 0;
187
+ margin:0 var(--iui-size-m) 0 0;
187
188
  justify-self:end;
188
189
  text-align:end;
189
190
  }
190
191
  .iui-information-body-content.iui-inline .iui-input-label.iui-required{
191
- margin-right:6px;
192
+ margin-right:calc(var(--iui-size-2xs) * 1.5 - 1px);
192
193
  }
package/css/input.css CHANGED
@@ -3,24 +3,31 @@
3
3
  * See LICENSE.md in the project root for license terms and full copyright notice.
4
4
  *--------------------------------------------------------------------------------------------*/
5
5
  .iui-input{
6
+ --_iui-input-background-color:var(--iui-color-background-1);
7
+ --_iui-input-border-color:var(--iui-color-foreground-4);
8
+ --_iui-input-text-color:var(--iui-color-foreground-2);
6
9
  margin:0;
7
10
  padding:0;
8
11
  border:none;
9
12
  vertical-align:baseline;
10
13
  width:100%;
11
14
  font-family:inherit;
12
- font-size:14px;
13
- font-weight:400;
14
- line-height:24px;
15
- border-radius:4px;
15
+ font-size:var(--iui-font-size-1);
16
+ font-weight:var(--iui-font-weight-normal);
17
+ line-height:var(--iui-size-l);
18
+ border-radius:var(--iui-border-radius-1);
16
19
  -webkit-appearance:none;
17
20
  -moz-appearance:none;
18
21
  appearance:none;
19
- padding:7px 12px;
20
- min-height:40px;
21
- color:var(--iui-text-color);
22
- background-color:var(--iui-color-background-1);
23
- border:1px solid rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-4));
22
+ min-height:var(--_iui-input-min-height);
23
+ padding-block:var(--_iui-input-padding-block);
24
+ padding-inline:var(--iui-size-s);
25
+ color:var(--_iui-input-text-color);
26
+ background-color:var(--_iui-input-background-color);
27
+ border:1px solid var(--_iui-input-border-color);
28
+ transition:border-color var(--iui-duration-1) ease-out;
29
+ --_iui-input-padding-block:var(--iui-size-2xs);
30
+ --_iui-input-min-height:var(--iui-component-height);
24
31
  }
25
32
  .iui-input:focus-visible{
26
33
  outline:2px solid var(--iui-color-foreground-primary);
@@ -32,62 +39,44 @@
32
39
  outline-offset:-2px;
33
40
  }
34
41
  }
35
- @media (prefers-reduced-motion: no-preference){
36
- .iui-input{
37
- transition:border-color 0.2s ease-out;
38
- }
39
- }
40
- .iui-input.iui-small{
41
- padding-top:1px;
42
- padding-bottom:1px;
43
- min-height:28px;
44
- }
45
- .iui-input.iui-large{
46
- padding-top:13px;
47
- padding-bottom:13px;
48
- min-height:52px;
49
- font-size:16px;
50
- }
51
42
  .iui-input::-moz-placeholder{
43
+ --_iui-input-text-color:var(--iui-color-foreground-5);
52
44
  -moz-user-select:none;
53
45
  user-select:none;
54
- color:var(--iui-text-color-placeholder);
46
+ color:var(--_iui-input-text-color);
55
47
  }
56
48
  .iui-input:-ms-input-placeholder{
49
+ --_iui-input-text-color:var(--iui-color-foreground-5);
57
50
  -ms-user-select:none;
58
51
  user-select:none;
59
- color:var(--iui-text-color-placeholder);
52
+ color:var(--_iui-input-text-color);
60
53
  }
61
54
  .iui-input::placeholder{
55
+ --_iui-input-text-color:var(--iui-color-foreground-5);
62
56
  -webkit-user-select:none;
63
57
  -moz-user-select:none;
64
58
  -ms-user-select:none;
65
59
  user-select:none;
66
- color:var(--iui-text-color-placeholder);
60
+ color:var(--_iui-input-text-color);
67
61
  }
68
62
  .iui-input:-webkit-autofill{
69
- border-color:rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-1));
70
- color:rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-1));
71
- background:linear-gradient(rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-6)), rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-6))), linear-gradient(var(--iui-color-background-1), var(--iui-color-background-1));
63
+ --_iui-input-background-color:var(--iui-color-background-subtle-primary);
64
+ --_iui-input-border-color:rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-1));
65
+ --_iui-input-text-color:rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-1));
72
66
  }
73
67
  .iui-input:autofill{
74
- border-color:rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-1));
75
- color:rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-1));
76
- background:linear-gradient(rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-6)), rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-6))), linear-gradient(var(--iui-color-background-1), var(--iui-color-background-1));
68
+ --_iui-input-background-color:var(--iui-color-background-subtle-primary);
69
+ --_iui-input-border-color:rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-1));
70
+ --_iui-input-text-color:rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-1));
77
71
  }
78
72
  .iui-input:hover{
79
- border-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-2));
80
- }
81
- @media (prefers-reduced-motion: no-preference){
82
- .iui-input:hover{
83
- transition:border-color 0.2s ease-out;
84
- }
73
+ --_iui-input-border-color:var(--iui-color-foreground-2);
85
74
  }
86
75
  .iui-input[disabled]{
87
- background-color:var(--iui-color-background-disabled);
88
- border-color:var(--iui-color-background-disabled);
76
+ --_iui-input-background-color:var(--iui-color-background-disabled);
77
+ --_iui-input-border-color:var(--iui-color-background-disabled);
78
+ --_iui-input-with-icon-hover-border-color:var(--iui-color-background-disabled);
89
79
  cursor:not-allowed;
90
- --_hover-color:var(--iui-color-background-disabled);
91
80
  }
92
81
  :where(textarea.iui-input){
93
82
  resize:vertical;
@@ -96,6 +85,16 @@
96
85
  resize:none;
97
86
  }
98
87
 
88
+ .iui-input[data-iui-size=small]{
89
+ --_iui-input-padding-block:0;
90
+ --_iui-input-min-height:var(--iui-component-height-small);
91
+ }
92
+ .iui-input[data-iui-size=large]{
93
+ --_iui-input-padding-block:var(--iui-size-xs);
94
+ --_iui-input-min-height:var(--iui-component-height-large);
95
+ font-size:var(--iui-font-size-2);
96
+ }
97
+
99
98
  .iui-input-with-icon.iui-input-with-icon{
100
99
  display:grid;
101
100
  align-items:center;
@@ -103,20 +102,20 @@
103
102
  }
104
103
  .iui-input-with-icon.iui-input-with-icon > :first-child{
105
104
  grid-area:1/-1;
106
- padding-right:40px;
105
+ padding-right:var(--iui-component-height);
107
106
  }
108
107
  .iui-input-with-icon.iui-input-with-icon:focus-within > :first-child{
109
108
  outline:2px solid var(--_focus-color, var(--iui-color-foreground-primary));
110
109
  outline-offset:-2px;
111
110
  }
112
111
  .iui-input-with-icon.iui-input-with-icon:hover > :first-child{
113
- border-color:var(--_hover-color, rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-2)));
112
+ border-color:var(--_iui-input-with-icon-hover-border-color, var(--iui-color-foreground-2));
114
113
  }
115
114
 
116
115
  .iui-end-icon{
117
116
  grid-area:inputs;
118
117
  justify-self:end;
119
- margin:0 14px 0 0;
118
+ margin:0 calc(var(--iui-size-xs) + 1px) 0 0;
120
119
  position:relative;
121
120
  display:flex;
122
121
  grid-area:1/-1;
@@ -124,8 +123,8 @@
124
123
  .iui-end-icon svg{
125
124
  display:flex;
126
125
  flex-shrink:0;
127
- width:16px;
128
- height:16px;
126
+ width:var(--iui-size-m);
127
+ height:var(--iui-size-m);
129
128
  }
130
129
  .iui-end-icon.iui-button{
131
130
  height:100%;
@@ -140,12 +139,13 @@
140
139
  }
141
140
  .iui-end-icon.iui-actionable{
142
141
  align-items:center;
143
- height:90%;
144
- margin-right:2px;
145
- padding:0 12px;
142
+ height:calc(100% - 4px);
143
+ margin-right:1px;
144
+ padding-inline:calc(var(--iui-size-xs) + 1px);
146
145
  cursor:pointer;
146
+ box-sizing:content-box;
147
147
  background-position:center;
148
- transition:background 0.4s ease-out;
148
+ transition:background var(--iui-duration-2) ease-out;
149
149
  }
150
150
  .iui-end-icon.iui-actionable:hover{
151
151
  background:var(--iui-color-background-1) radial-gradient(circle, transparent 1%, var(--iui-color-background-1) 1%) center/15000%;
@@ -153,11 +153,11 @@
153
153
  .iui-end-icon.iui-actionable:active{
154
154
  background-color:var(--iui-color-background-2);
155
155
  background-size:100%;
156
- transition:background 0s;
156
+ transition:background var(--iui-duration-0);
157
157
  }
158
158
  .iui-end-icon.iui-actionable svg{
159
- fill:var(--iui-icon-color-actionable);
160
- transition:transform 0.2s ease-out;
159
+ fill:var(--iui-color-foreground-2);
160
+ transition:transform var(--iui-duration-1) ease-out;
161
161
  }
162
162
  .iui-end-icon.iui-actionable.iui-open svg{
163
163
  transform:rotate(180deg);
@@ -166,5 +166,5 @@
166
166
  cursor:not-allowed;
167
167
  }
168
168
  .iui-end-icon.iui-disabled svg{
169
- fill:var(--iui-icon-color-actionable-disabled);
169
+ fill:var(--iui-color-foreground-5);
170
170
  }