@itwin/itwinui-css 1.0.0-dev.1 → 1.0.0-dev.11

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 -79
  2. package/css/all.css +1824 -2303
  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 -90
  10. package/css/carousel.css +15 -15
  11. package/css/checkbox.css +23 -21
  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 +31 -32
  16. package/css/expandable-block.css +33 -43
  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 -55
  24. package/css/keyboard.css +6 -10
  25. package/css/location-marker.css +26 -18
  26. package/css/menu.css +35 -28
  27. package/css/non-ideal-state.css +12 -12
  28. package/css/progress-indicator.css +33 -35
  29. package/css/radio-tile.css +33 -41
  30. package/css/radio.css +23 -21
  31. package/css/select.css +85 -81
  32. package/css/side-navigation.css +32 -31
  33. package/css/skip-to-content.css +11 -11
  34. package/css/slider.css +75 -32
  35. package/css/stepper.css +15 -15
  36. package/css/surface.css +2 -2
  37. package/css/table.css +180 -144
  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 +135 -127
  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 -10
  46. package/css/tree.css +24 -22
  47. package/css/utils.css +162 -147
  48. package/css/workflow-diagram.css +8 -8
  49. package/package.json +2 -2
package/css/button.css CHANGED
@@ -9,14 +9,15 @@
9
9
  vertical-align:baseline;
10
10
  font-family:inherit;
11
11
  display:inline-flex;
12
+ flex-shrink:0;
12
13
  align-items:center;
13
14
  vertical-align:middle;
14
15
  justify-content:center;
15
16
  position:relative;
16
- border-radius:4px;
17
- line-height:24px;
18
- font-size:14px;
19
- font-weight:400;
17
+ border-radius:var(--iui-border-radius-1);
18
+ line-height:1.2;
19
+ font-size:var(--iui-font-size-1);
20
+ font-weight:var(--iui-font-weight-normal);
20
21
  -webkit-user-select:none;
21
22
  -moz-user-select:none;
22
23
  -ms-user-select:none;
@@ -27,17 +28,20 @@
27
28
  background:var(--_iui-button-background-color);
28
29
  color:var(--_iui-button-text-color);
29
30
  gap:var(--_iui-button-gap);
30
- height:var(--_iui-button-height);
31
+ min-height:var(--_iui-button-min-height);
32
+ min-width:var(--_iui-button-min-height);
33
+ padding-block:var(--_iui-button-padding-block);
31
34
  padding-inline:var(--_iui-button-padding-inline);
32
- transition:background-color 0.2s ease-out, border-color 0.2s ease-out;
35
+ transition:background-color var(--iui-duration-1) ease-out, border-color var(--iui-duration-1) ease-out;
33
36
  -webkit-tap-highlight-color:transparent;
34
37
  text-decoration:none;
35
- --_iui-button-gap:8px;
36
- --_iui-button-height:40px;
37
- --_iui-button-padding-inline:16px;
38
- --_iui-button-text-color:var(--iui-text-color);
38
+ --_iui-button-gap:var(--iui-size-xs);
39
+ --_iui-button-padding-block:var(--iui-size-2xs);
40
+ --_iui-button-padding-inline:var(--iui-size-m);
41
+ --_iui-button-min-height:var(--iui-component-height);
42
+ --_iui-button-text-color:var(--iui-color-foreground-2);
39
43
  --_iui-button-background-color:var(--iui-color-background-1);
40
- --_iui-button-border-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-4));
44
+ --_iui-button-border-color:var(--iui-color-foreground-4);
41
45
  }
42
46
  .iui-button:focus-visible{
43
47
  outline:1px solid var(--iui-color-foreground-primary);
@@ -50,9 +54,9 @@
50
54
  }
51
55
  }
52
56
  .iui-button:hover, .iui-button:active{
53
- --_iui-button-text-color:var(--iui-color-foreground-body);
54
- --_iui-button-background-color:var(--iui-color-background-1-overlay);
55
- --_iui-button-border-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-1));
57
+ --_iui-button-text-color:var(--iui-color-foreground-1);
58
+ --_iui-button-background-color:var(--iui-color-background-1-hover);
59
+ --_iui-button-border-color:var(--iui-color-foreground-1);
56
60
  }
57
61
  .iui-button:hover .iui-notification-primary::before,
58
62
  .iui-button:hover .iui-notification-positive::before,
@@ -61,14 +65,14 @@
61
65
  .iui-button:active .iui-notification-positive::before,
62
66
  .iui-button:active .iui-notification-warning::before,
63
67
  .iui-button:active .iui-notification-negative::before{
64
- border-color:var(--iui-color-background-1-overlay);
68
+ border-color:var(--iui-color-background-1-hover);
65
69
  }
66
70
  .iui-button:focus{
67
71
  outline-offset:-2px;
68
72
  outline-width:2px;
69
73
  }
70
74
  .iui-button[disabled], .iui-button:disabled, .iui-button[aria-disabled=true]{
71
- --_iui-button-text-color:var(--iui-text-color-placeholder);
75
+ --_iui-button-text-color:var(--iui-color-foreground-5);
72
76
  --_iui-button-background-color:var(--iui-color-background-disabled);
73
77
  --_iui-button-border-color:var(--iui-color-background-disabled);
74
78
  cursor:not-allowed;
@@ -77,61 +81,61 @@
77
81
  outline-color:var(--iui-color-foreground-primary);
78
82
  }
79
83
  .iui-button[data-iui-size=small]{
80
- --_iui-button-gap:4px;
81
- --_iui-button-height:28px;
82
- --_iui-button-padding-inline:8px;
84
+ --_iui-button-gap:var(--iui-size-2xs);
85
+ --_iui-button-padding-block:0;
86
+ --_iui-button-padding-inline:var(--iui-size-xs);
87
+ --_iui-button-min-height:var(--iui-component-height-small);
83
88
  }
84
89
  .iui-button[data-iui-size=large]{
85
- font-size:16px;
86
- --_iui-button-gap:12px;
87
- --_iui-button-height:52px;
88
- --_iui-button-padding-inline:24px;
90
+ font-size:var(--iui-font-size-2);
91
+ --_iui-button-gap:var(--iui-size-s);
92
+ --_iui-button-padding-block:var(--iui-size-xs);
93
+ --_iui-button-padding-inline:var(--iui-size-l);
94
+ --_iui-button-min-height:var(--iui-component-height-large);
89
95
  }
90
96
  .iui-button[data-iui-variant=borderless]{
91
- --_iui-button-text-color:var(--iui-text-color);
97
+ --_iui-button-text-color:var(--iui-color-foreground-2);
92
98
  --_iui-button-background-color:transparent;
93
99
  --_iui-button-border-color:transparent;
94
- --_iui-button-icon-margin-x:4px;
95
- --_iui-button-gap:8px;
96
- --_iui-button-height:40px;
97
- --_iui-button-padding-inline:16px;
98
- --_iui-button-padding-inline:8px;
100
+ --_iui-button-gap:var(--iui-size-xs);
101
+ --_iui-button-padding-block:var(--iui-size-2xs);
102
+ --_iui-button-padding-inline:var(--iui-size-m);
103
+ --_iui-button-min-height:var(--iui-component-height);
104
+ --_iui-button-padding-inline:var(--iui-size-xs);
99
105
  }
100
106
  .iui-button[data-iui-variant=borderless]:where(:hover, :active){
101
- --_iui-button-text-color:var(--iui-color-foreground-body);
102
- --_iui-button-background-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-6));
107
+ --_iui-button-text-color:var(--iui-color-foreground-1);
108
+ --_iui-button-background-color:var(--iui-color-background-transparent-hover);
103
109
  }
104
110
  .iui-button[data-iui-variant=borderless]:where(:focus){
105
111
  outline-offset:-1px;
106
112
  outline-width:1px;
107
113
  }
108
114
  .iui-button[data-iui-variant=borderless]:where([disabled], :disabled, [aria-disabled="true"]){
109
- --_iui-button-text-color:var(--iui-text-color-placeholder);
115
+ --_iui-button-text-color:var(--iui-color-foreground-5);
110
116
  --_iui-button-background-color:transparent;
111
117
  --_iui-button-border-color:transparent;
112
118
  }
113
119
  .iui-button[data-iui-variant=borderless][data-iui-size=small]{
114
- --_iui-button-gap:4px;
115
- --_iui-button-height:28px;
116
- --_iui-button-padding-inline:8px;
117
- --_iui-button-padding-inline:2px;
120
+ --_iui-button-gap:var(--iui-size-2xs);
121
+ --_iui-button-padding-block:0;
122
+ --_iui-button-padding-inline:var(--iui-size-xs);
123
+ --_iui-button-min-height:var(--iui-component-height-small);
124
+ --_iui-button-padding-inline:var(--iui-size-2xs);
118
125
  }
119
126
  .iui-button[data-iui-variant=borderless][data-iui-size=large]{
120
- font-size:16px;
121
- --_iui-button-gap:12px;
122
- --_iui-button-height:52px;
123
- --_iui-button-padding-inline:24px;
124
- --_iui-button-padding-inline:12px;
127
+ font-size:var(--iui-font-size-2);
128
+ --_iui-button-gap:var(--iui-size-s);
129
+ --_iui-button-padding-block:var(--iui-size-xs);
130
+ --_iui-button-padding-inline:var(--iui-size-l);
131
+ --_iui-button-min-height:var(--iui-component-height-large);
132
+ --_iui-button-padding-inline:var(--iui-size-s);
125
133
  }
126
134
  .iui-button[data-iui-active=true]{
127
135
  --_iui-button-active-stripe-inset:initial;
128
136
  --_iui-button-active-stripe-color:var(--iui-color-foreground-primary);
129
137
  --_iui-button-text-color:var(--iui-color-foreground-primary);
130
- --_iui-button-background-color:linear-gradient(
131
- rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-6)),
132
- rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-6))
133
- ),
134
- linear-gradient(var(--iui-color-background-1), var(--iui-color-background-1));
138
+ --_iui-button-background-color:var(--iui-color-background-subtle-primary);
135
139
  }
136
140
  .iui-button[data-iui-active=true]::after{
137
141
  content:"";
@@ -140,17 +144,14 @@
140
144
  background-color:var(--_iui-button-active-stripe-color);
141
145
  }
142
146
  .iui-button[data-iui-active=true][disabled], .iui-button[data-iui-active=true]:disabled, .iui-button[data-iui-active=true][aria-disabled=true]{
143
- --_iui-button-active-stripe-color:var(--iui-text-color-placeholder);
144
- --_iui-button-text-color:var(--iui-text-color-placeholder);
145
- }
146
- .iui-button[data-iui-active=true][disabled], .iui-button[data-iui-active=true]:disabled, .iui-button[data-iui-active=true][aria-disabled=true]{
147
- --_iui-button-background-color:var(--iui-color-background-disabled);
147
+ --_iui-button-active-stripe-color:var(--iui-color-foreground-5);
148
+ --_iui-button-text-color:var(--iui-color-foreground-5);
148
149
  }
149
150
  .iui-button[data-iui-active=true][data-iui-variant=borderless]{
150
- --_iui-button-background-color:rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-6));
151
+ --_iui-button-background-color:hsl(var(--iui-color-foreground-primary-hsl) / var(--iui-opacity-6));
151
152
  }
152
- .iui-button[data-iui-active=true][data-iui-variant=borderless]:where([disabled], :disabled, [aria-disabled="true"]){
153
- --_iui-button-background-color:rgba(var(--iui-color-foreground-body-rgb), 0.05);
153
+ .iui-button[data-iui-active=true][disabled], .iui-button[data-iui-active=true]:disabled, .iui-button[data-iui-active=true][aria-disabled=true]{
154
+ --_iui-button-background-color:var(--iui-color-background-disabled);
154
155
  }
155
156
  .iui-button[data-iui-variant=high-visibility]{
156
157
  --_iui-button-background-color:var(--iui-color-background-primary);
@@ -158,7 +159,7 @@
158
159
  --_iui-button-border-color:var(--_iui-button-background-color);
159
160
  }
160
161
  .iui-button[data-iui-variant=high-visibility]:hover, .iui-button[data-iui-variant=high-visibility]:active{
161
- --_iui-button-background-color:var(--iui-color-background-primary-overlay);
162
+ --_iui-button-background-color:var(--iui-color-background-primary-hover);
162
163
  }
163
164
  .iui-button[data-iui-variant=high-visibility]:focus{
164
165
  outline-color:var(--iui-color-foreground-accessory);
@@ -167,7 +168,7 @@
167
168
  }
168
169
  .iui-button[data-iui-variant=high-visibility][disabled], .iui-button[data-iui-variant=high-visibility]:disabled, .iui-button[data-iui-variant=high-visibility][aria-disabled=true]{
169
170
  --_iui-button-background-color:var(--iui-color-background-disabled);
170
- --_iui-button-text-color:var(--iui-text-color-placeholder);
171
+ --_iui-button-text-color:var(--iui-color-foreground-5);
171
172
  outline-offset:-1px;
172
173
  outline-width:1px;
173
174
  outline-color:var(--iui-color-foreground-primary);
@@ -178,7 +179,7 @@
178
179
  --_iui-button-border-color:var(--_iui-button-background-color);
179
180
  }
180
181
  .iui-button[data-iui-variant=cta]:hover, .iui-button[data-iui-variant=cta]:active{
181
- --_iui-button-background-color:var(--iui-color-background-positive-overlay);
182
+ --_iui-button-background-color:var(--iui-color-background-positive-hover);
182
183
  }
183
184
  .iui-button[data-iui-variant=cta]:focus{
184
185
  outline-color:var(--iui-color-foreground-accessory);
@@ -187,7 +188,7 @@
187
188
  }
188
189
  .iui-button[data-iui-variant=cta][disabled], .iui-button[data-iui-variant=cta]:disabled, .iui-button[data-iui-variant=cta][aria-disabled=true]{
189
190
  --_iui-button-background-color:var(--iui-color-background-disabled);
190
- --_iui-button-text-color:var(--iui-text-color-placeholder);
191
+ --_iui-button-text-color:var(--iui-color-foreground-5);
191
192
  outline-offset:-1px;
192
193
  outline-width:1px;
193
194
  outline-color:var(--iui-color-foreground-primary);
@@ -196,14 +197,14 @@
196
197
  --_iui-button-background-color:var(--iui-color-background-primary);
197
198
  --_iui-button-text-color:var(--iui-color-foreground-accessory);
198
199
  --_iui-button-border-color:var(--_iui-button-background-color);
199
- border-radius:9999px;
200
- box-shadow:0 9px 46px rgba(0, 0, 0, 0.25);
200
+ border-radius:var(--iui-border-radius-round);
201
+ box-shadow:var(--iui-shadow-5);
201
202
  position:fixed;
202
- bottom:12px;
203
- right:16px;
203
+ bottom:var(--iui-size-s);
204
+ right:var(--iui-size-m);
204
205
  }
205
206
  .iui-button[data-iui-variant=idea]:hover, .iui-button[data-iui-variant=idea]:active{
206
- --_iui-button-background-color:var(--iui-color-background-primary-overlay);
207
+ --_iui-button-background-color:var(--iui-color-background-primary-hover);
207
208
  }
208
209
  .iui-button[data-iui-variant=idea]:focus{
209
210
  outline-color:var(--iui-color-foreground-accessory);
@@ -212,33 +213,29 @@
212
213
  }
213
214
  .iui-button[data-iui-variant=idea][disabled], .iui-button[data-iui-variant=idea]:disabled, .iui-button[data-iui-variant=idea][aria-disabled=true]{
214
215
  --_iui-button-background-color:var(--iui-color-background-disabled);
215
- --_iui-button-text-color:var(--iui-text-color-placeholder);
216
+ --_iui-button-text-color:var(--iui-color-foreground-5);
216
217
  outline-offset:-1px;
217
218
  outline-width:1px;
218
219
  outline-color:var(--iui-color-foreground-primary);
219
220
  }
220
221
 
221
- .iui-button-icon{
222
+ .iui-button-icon svg{
222
223
  display:flex;
223
224
  flex-shrink:0;
224
- width:16px;
225
- height:16px;
226
- transition:fill 0.2s ease-out;
225
+ width:var(--iui-size-m);
226
+ height:var(--iui-size-m);
227
+ transition:fill var(--iui-duration-1) ease-out;
227
228
  fill:currentColor;
228
229
  }
229
- .iui-button-icon:only-child{
230
- margin-left:var(--_iui-button-icon-margin-x);
231
- margin-right:var(--_iui-button-icon-margin-x);
232
- }
233
230
 
234
231
  .iui-button-dropdown{
235
- --_iui-button-padding-inline:16px 8px;
232
+ padding-right:calc(var(--iui-size-xs) - 1px);
236
233
  }
237
234
  .iui-button-dropdown[data-iui-size=small]{
238
- --_iui-button-padding-inline:8px 4px;
235
+ padding-right:calc(var(--iui-size-2xs) - 1px);
239
236
  }
240
237
  .iui-button-dropdown[data-iui-size=large]{
241
- --_iui-button-padding-inline:24px 12px;
238
+ padding-right:calc(var(--iui-size-s) - 1px);
242
239
  }
243
240
 
244
241
  .iui-button-split{
@@ -261,10 +258,11 @@
261
258
  z-index:-1;
262
259
  }
263
260
  .iui-button-split :where(.iui-button:last-child){
264
- --_iui-button-padding-inline:4px;
261
+ --_iui-button-padding-inline:var(--iui-size-2xs);
265
262
  border-top-left-radius:0;
266
263
  border-bottom-left-radius:0;
267
264
  margin-left:-1px;
265
+ min-width:unset;
268
266
  }
269
267
  .iui-button-split :where(.iui-button:last-child)[data-iui-variant=high-visibility], .iui-button-split :where(.iui-button:last-child)[data-iui-variant=cta]{
270
268
  border-left-color:rgba(255, 255, 255, var(--iui-opacity-4));
@@ -274,10 +272,10 @@
274
272
  z-index:-1;
275
273
  }
276
274
  .iui-button-split :where(.iui-button:last-child)[data-iui-size=small]{
277
- --_iui-button-padding-inline:2px;
275
+ --_iui-button-padding-inline:var(--iui-size-3xs);
278
276
  }
279
277
  .iui-button-split :where(.iui-button:last-child)[data-iui-size=large]{
280
- --_iui-button-padding-inline:8px;
278
+ --_iui-button-padding-inline:var(--iui-size-xs);
281
279
  }
282
280
 
283
281
  .iui-button-group{
@@ -294,7 +292,9 @@
294
292
  }
295
293
  .iui-button-group > * .iui-input-container, .iui-button-group > * .iui-button, .iui-button-group > * .iui-input:where(:not(.iui-input-container .iui-input)){
296
294
  position:relative;
297
- --_iui-button-active-stripe-inset:2px 2px calc(100% - 4px);
295
+ --_iui-button-active-stripe-inset:var(--iui-size-3xs)
296
+ var(--iui-size-3xs)
297
+ calc(100% - var(--iui-size-2xs));
298
298
  }
299
299
  .iui-button-group > * .iui-input-container:hover, .iui-button-group > * .iui-button:hover, .iui-button-group > * .iui-input:where(:not(.iui-input-container .iui-input)):hover{
300
300
  z-index:1;
@@ -310,15 +310,15 @@
310
310
  transition-duration:0ms;
311
311
  }
312
312
  .iui-button-group > * .iui-input:hover, .iui-button-group > * .iui-input:focus, .iui-button-group > * .iui-button:where(:not([data-iui-variant="borderless"])):hover, .iui-button-group > * .iui-button:where(:not([data-iui-variant="borderless"])):focus{
313
- transition-duration:0.2s;
313
+ transition-duration:var(--iui-duration-1);
314
314
  }
315
315
  .iui-button-group > *:first-child .iui-input, .iui-button-group > *:first-child .iui-button:where(:not([data-iui-variant="borderless"])){
316
- border-top-left-radius:4px;
317
- border-bottom-left-radius:4px;
316
+ border-top-left-radius:var(--iui-border-radius-1);
317
+ border-bottom-left-radius:var(--iui-border-radius-1);
318
318
  }
319
319
  .iui-button-group > *:last-child .iui-input, .iui-button-group > *:last-child .iui-button:where(:not([data-iui-variant="borderless"])){
320
- border-bottom-right-radius:4px;
321
- border-top-right-radius:4px;
320
+ border-bottom-right-radius:var(--iui-border-radius-1);
321
+ border-top-right-radius:var(--iui-border-radius-1);
322
322
  }
323
323
  .iui-button-group > * + *{
324
324
  margin-left:-1px;
@@ -343,7 +343,10 @@
343
343
  }
344
344
  .iui-button-group-vertical > * .iui-input-container, .iui-button-group-vertical > * .iui-button, .iui-button-group-vertical > * .iui-input:where(:not(.iui-input-container .iui-input)){
345
345
  position:relative;
346
- --_iui-button-active-stripe-inset:2px calc(100% - 4px) 2px 2px;
346
+ --_iui-button-active-stripe-inset:var(--iui-size-3xs)
347
+ calc(100% - var(--iui-size-2xs))
348
+ var(--iui-size-3xs)
349
+ var(--iui-size-3xs);
347
350
  }
348
351
  .iui-button-group-vertical > * .iui-input-container:hover, .iui-button-group-vertical > * .iui-button:hover, .iui-button-group-vertical > * .iui-input:where(:not(.iui-input-container .iui-input)):hover{
349
352
  z-index:1;
@@ -359,15 +362,15 @@
359
362
  transition-duration:0ms;
360
363
  }
361
364
  .iui-button-group-vertical > * .iui-input:hover, .iui-button-group-vertical > * .iui-input:focus, .iui-button-group-vertical > * .iui-button:where(:not([data-iui-variant="borderless"])):hover, .iui-button-group-vertical > * .iui-button:where(:not([data-iui-variant="borderless"])):focus{
362
- transition-duration:0.2s;
365
+ transition-duration:var(--iui-duration-1);
363
366
  }
364
367
  .iui-button-group-vertical > *:first-child .iui-input, .iui-button-group-vertical > *:first-child .iui-button:where(:not([data-iui-variant="borderless"])){
365
- border-top-left-radius:4px;
366
- border-top-right-radius:4px;
368
+ border-top-left-radius:var(--iui-border-radius-1);
369
+ border-top-right-radius:var(--iui-border-radius-1);
367
370
  }
368
371
  .iui-button-group-vertical > *:last-child .iui-input, .iui-button-group-vertical > *:last-child .iui-button:where(:not([data-iui-variant="borderless"])){
369
- border-bottom-right-radius:4px;
370
- border-bottom-left-radius:4px;
372
+ border-bottom-right-radius:var(--iui-border-radius-1);
373
+ border-bottom-left-radius:var(--iui-border-radius-1);
371
374
  }
372
375
  .iui-button-group-vertical > * + *{
373
376
  margin-top:-1px;
package/css/carousel.css CHANGED
@@ -4,7 +4,7 @@
4
4
  *--------------------------------------------------------------------------------------------*/
5
5
  .iui-carousel{
6
6
  overflow:hidden;
7
- border-radius:4px;
7
+ border-radius:var(--iui-border-radius-1);
8
8
  }
9
9
  .iui-carousel:focus-visible{
10
10
  outline:1px solid var(--iui-color-foreground-primary);
@@ -19,7 +19,7 @@
19
19
 
20
20
  .iui-carousel-slider{
21
21
  display:flex;
22
- gap:8px;
22
+ gap:var(--iui-size-xs);
23
23
  list-style:none;
24
24
  margin:0;
25
25
  padding:0;
@@ -41,8 +41,8 @@
41
41
  .iui-carousel-navigation{
42
42
  display:flex;
43
43
  align-items:center;
44
- height:36px;
45
- border-top:2px solid var(--iui-color-background-4);
44
+ height:calc(var(--iui-size-s) * 3);
45
+ border-top:var(--iui-size-3xs) solid var(--iui-color-background-4);
46
46
  }
47
47
  .iui-carousel-navigation-left, .iui-carousel-navigation-right{
48
48
  display:flex;
@@ -58,9 +58,8 @@
58
58
  padding:0;
59
59
  border:none;
60
60
  vertical-align:baseline;
61
- flex:2;
62
- max-width:256px;
63
- border-radius:4px;
61
+ max-width:calc(var(--iui-size-2xl) * 4);
62
+ border-radius:var(--iui-border-radius-1);
64
63
  white-space:nowrap;
65
64
  overflow-x:auto;
66
65
  overflow-x:overlay;
@@ -80,9 +79,10 @@
80
79
  display:none;
81
80
  }
82
81
  .iui-carousel-navigation-dot{
83
- --_iui-button-gap:4px;
84
- --_iui-button-height:28px;
85
- --_iui-button-padding-inline:8px;
82
+ --_iui-button-gap:var(--iui-size-2xs);
83
+ --_iui-button-padding-block:0;
84
+ --_iui-button-padding-inline:var(--iui-size-xs);
85
+ --_iui-button-min-height:var(--iui-component-height-small);
86
86
  background-color:transparent;
87
87
  border:none;
88
88
  cursor:pointer;
@@ -91,17 +91,17 @@
91
91
  padding-right:var(--_iui-button-padding-inline);
92
92
  }
93
93
  .iui-carousel-navigation-dot:hover::after{
94
- background-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-3));
94
+ background-color:var(--iui-color-foreground-3);
95
95
  }
96
96
  .iui-carousel-navigation-dot::after{
97
97
  display:flex;
98
98
  flex-shrink:0;
99
- width:12px;
100
- height:12px;
99
+ width:var(--iui-size-s);
100
+ height:var(--iui-size-s);
101
101
  content:"";
102
102
  border-radius:50%;
103
103
  border:1px solid transparent;
104
- background-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-4));
104
+ background-color:var(--iui-color-foreground-4);
105
105
  box-shadow:inset 0 0 0 0 var(--iui-color-background-1);
106
106
  }
107
107
  .iui-carousel-navigation-dot.iui-first::after{
@@ -117,7 +117,7 @@
117
117
  }
118
118
  @media (forced-colors: active){
119
119
  .iui-carousel-navigation-dot.iui-active::after{
120
- border-width:6px;
120
+ border-width:var(--iui-size-xs);
121
121
  }
122
122
  }
123
123
  .iui-carousel-navigation-right{
package/css/checkbox.css CHANGED
@@ -7,19 +7,19 @@
7
7
  --_iui-checkbox-indeterminate-svg:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="m2.75 6.875h10.5v2.25h-10.5z" /></svg>');
8
8
  --_iui-checkbox-unchecked-svg:url('data:image/svg+xml;utf8,<svg viewBox="0 0 16 16"></svg>');
9
9
  --_iui-checkbox-svg-color:var(--iui-color-foreground-primary);
10
- --_iui-checkbox-border-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-4));
10
+ --_iui-checkbox-border-color:var(--iui-color-foreground-4);
11
11
  --_iui-checkbox-background-color:var(--iui-color-background-1);
12
12
  --_iui-checkbox-mask-image:initial;
13
13
  display:flex;
14
14
  flex-shrink:0;
15
- width:16px;
16
- height:16px;
15
+ width:var(--iui-size-m);
16
+ height:var(--iui-size-m);
17
17
  -webkit-appearance:none;
18
18
  -moz-appearance:none;
19
19
  appearance:none;
20
20
  margin:0;
21
21
  position:relative;
22
- border-radius:4px;
22
+ border-radius:var(--iui-border-radius-1);
23
23
  background-color:var(--_iui-checkbox-background-color);
24
24
  cursor:pointer;
25
25
  }
@@ -30,7 +30,7 @@
30
30
  vertical-align:baseline;
31
31
  display:flex;
32
32
  align-items:center;
33
- font-size:14px;
33
+ font-size:var(--iui-font-size-1);
34
34
  width:-webkit-fit-content;
35
35
  width:-moz-fit-content;
36
36
  width:fit-content;
@@ -40,12 +40,13 @@
40
40
  user-select:none;
41
41
  position:relative;
42
42
  cursor:pointer;
43
- color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-2));
44
- gap:8px;
43
+ color:var(--iui-color-foreground-2);
44
+ gap:var(--iui-size-xs);
45
45
  }
46
46
  .iui-checkbox-wrapper.iui-loading{
47
- cursor:wait;
48
- color:var(--iui-text-color-muted);
47
+ cursor:progress;
48
+ font-style:italic;
49
+ color:var(--iui-color-foreground-4);
49
50
  }
50
51
  .iui-checkbox-wrapper > .iui-checkbox-label,
51
52
  .iui-checkbox-wrapper > .iui-radio-label{
@@ -56,17 +57,17 @@
56
57
  .iui-checkbox-wrapper > .iui-radio-label svg{
57
58
  display:flex;
58
59
  flex-shrink:0;
59
- width:16px;
60
- height:16px;
60
+ width:var(--iui-size-m);
61
+ height:var(--iui-size-m);
61
62
  vertical-align:middle;
62
63
  fill:currentColor;
63
64
  }
64
65
  .iui-checkbox-wrapper.iui-disabled{
65
66
  cursor:not-allowed;
66
- color:var(--iui-text-color-muted);
67
+ color:var(--iui-color-foreground-4);
67
68
  }
68
69
  .iui-checkbox-wrapper.iui-disabled svg{
69
- fill:var(--iui-icon-color-actionable-disabled);
70
+ fill:var(--iui-color-foreground-5);
70
71
  }
71
72
  .iui-checkbox-wrapper.iui-positive{
72
73
  color:var(--iui-color-foreground-positive);
@@ -81,7 +82,7 @@
81
82
  content:"";
82
83
  position:absolute;
83
84
  inset:0;
84
- transition:border-color 0.2s ease-out;
85
+ transition:border-color var(--iui-duration-1) ease-out;
85
86
  border-radius:inherit;
86
87
  border-style:solid;
87
88
  border-width:1px;
@@ -99,15 +100,15 @@
99
100
  --_iui-checkbox-mask-image:var(--_iui-checkbox-unchecked-svg);
100
101
  }
101
102
  .iui-checkbox:checked{
102
- --_iui-checkbox-border-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-3));
103
+ --_iui-checkbox-border-color:var(--iui-color-foreground-3);
103
104
  --_iui-checkbox-mask-image:var(--_iui-checkbox-checkmark-svg);
104
105
  }
105
106
  .iui-checkbox:indeterminate{
106
- --_iui-checkbox-border-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-3));
107
+ --_iui-checkbox-border-color:var(--iui-color-foreground-3);
107
108
  --_iui-checkbox-mask-image:var(--_iui-checkbox-indeterminate-svg);
108
109
  }
109
110
  .iui-checkbox:hover{
110
- --_iui-checkbox-border-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-2));
111
+ --_iui-checkbox-border-color:var(--iui-color-foreground-2);
111
112
  }
112
113
  .iui-checkbox:focus-visible{
113
114
  outline:2px solid var(--iui-color-foreground-primary);
@@ -120,7 +121,7 @@
120
121
  }
121
122
  }
122
123
  .iui-checkbox:disabled{
123
- --_iui-checkbox-svg-color:var(--iui-icon-color-actionable-disabled);
124
+ --_iui-checkbox-svg-color:var(--iui-color-foreground-5);
124
125
  --_iui-checkbox-border-color:var(--iui-color-background-border);
125
126
  --_iui-checkbox-background-color:var(--iui-color-background-disabled);
126
127
  cursor:not-allowed;
@@ -131,16 +132,17 @@
131
132
  --_iui-checkbox-unchecked-svg:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="m1.70671 12.879 11.17218-11.17219 1.4142 1.4142-11.17218 11.17218zm.99329-1.679 1.1-1.1a5.06317 5.06317 0 0 1 -2-2.1 7.48268 7.48268 0 0 1 6.2-3.5 4.86877 4.86877 0 0 1 1.2.1l1.3-1.3a10.07431 10.07431 0 0 0 -2.5-.3 8.84129 8.84129 0 0 0 -8 5 8.42455 8.42455 0 0 0 2.7 3.2zm10.7-6.4-1.1 1.1a7.08625 7.08625 0 0 1 2 2.1 7.50323 7.50323 0 0 1 -6.2 3.5 8.31665 8.31665 0 0 1 -1.3-.2l-1.3 1.3a8.909 8.909 0 0 0 6.4-.5 9.04344 9.04344 0 0 0 4.1-4.1 9.168 9.168 0 0 0 -2.6-3.2z" /></svg>');
132
133
  --_iui-checkbox-border-color:transparent;
133
134
  --_iui-checkbox-background-color:transparent;
135
+ outline-width:1px;
134
136
  }
135
137
  .iui-checkbox.iui-checkbox-visibility:where(:not(:checked):not(:indeterminate)){
136
- --_iui-checkbox-svg-color:var(--iui-icon-color-actionable);
138
+ --_iui-checkbox-svg-color:var(--iui-color-foreground-2);
137
139
  }
138
140
  .iui-checkbox.iui-checkbox-visibility:where(:hover){
139
141
  --_iui-checkbox-border-color:transparent;
140
- --_iui-checkbox-background-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-6));
142
+ --_iui-checkbox-background-color:var(--iui-color-background-transparent-hover);
141
143
  }
142
144
  .iui-checkbox.iui-checkbox-visibility:where(:disabled){
143
- --_iui-checkbox-svg-color:var(--iui-icon-color-actionable-disabled);
145
+ --_iui-checkbox-svg-color:var(--iui-color-foreground-5);
144
146
  --_iui-checkbox-background-color:var(--iui-color-background-disabled);
145
147
  }
146
148
  .iui-checkbox.iui-loading{
package/css/code.css CHANGED
@@ -8,15 +8,15 @@
8
8
  border:none;
9
9
  vertical-align:baseline;
10
10
  display:inline-block;
11
- font-family:"Noto Sans Mono", ui-monospace, Menlo, "Segoe UI Mono", Consolas, "Roboto Mono", "Courier New", monospace;
12
- font-size:12px;
13
- padding:0 4px;
14
- border-radius:4px;
11
+ font-family:var(--iui-font-mono);
12
+ font-size:var(--iui-font-size-0);
13
+ padding:0 var(--iui-size-2xs);
14
+ border-radius:var(--iui-border-radius-1);
15
15
  -webkit-user-select:all;
16
16
  -moz-user-select:all;
17
17
  user-select:all;
18
18
  background-color:var(--iui-color-background-3);
19
- color:var(--iui-text-color);
19
+ color:var(--iui-color-foreground-2);
20
20
  }
21
21
 
22
22
  .iui-codeblock{
@@ -24,16 +24,16 @@
24
24
  padding:0;
25
25
  border:none;
26
26
  vertical-align:baseline;
27
- margin:6px 0;
27
+ margin:calc(var(--iui-size-s) * 0.5) 0;
28
28
  }
29
29
  .iui-codeblock > .iui-title-bar{
30
30
  display:flex;
31
31
  align-items:center;
32
- border-radius:4px 4px 0 0;
32
+ border-radius:var(--iui-border-radius-1) var(--iui-border-radius-1) 0 0;
33
33
  background-color:var(--iui-color-background-3);
34
34
  }
35
35
  .iui-codeblock > .iui-title-bar > .iui-title{
36
- margin-left:12px;
36
+ margin-left:var(--iui-size-s);
37
37
  -webkit-user-select:all;
38
38
  -moz-user-select:all;
39
39
  user-select:all;
@@ -46,7 +46,7 @@
46
46
  display:grid;
47
47
  overflow-x:auto;
48
48
  overflow-y:auto;
49
- border-radius:0 0 4px 4px;
49
+ border-radius:0 0 var(--iui-border-radius-1) var(--iui-border-radius-1);
50
50
  white-space:normal;
51
51
  border:1px solid var(--iui-color-background-3);
52
52
  }
@@ -68,18 +68,18 @@
68
68
  -ms-hyphens:auto;
69
69
  hyphens:auto;
70
70
  counter-increment:section;
71
- font-family:"Noto Sans Mono", ui-monospace, Menlo, "Segoe UI Mono", Consolas, "Roboto Mono", "Courier New", monospace;
71
+ font-family:var(--iui-font-mono);
72
72
  background-color:var(--iui-color-background-1);
73
73
  }
74
74
  .iui-codeblock > .iui-codeblock-content > code:nth-child(even){
75
- background:rgba(var(--iui-color-foreground-body-rgb), 0.02);
75
+ background-color:hsl(var(--iui-color-foreground-1-hsl)/0.02);
76
76
  }
77
77
  .iui-codeblock > .iui-codeblock-content > code::before{
78
78
  content:counter(section);
79
79
  text-align:right;
80
80
  display:inline-block;
81
- padding:0 8px;
82
- width:24px;
81
+ padding:0 var(--iui-size-xs);
82
+ width:calc(var(--iui-size-l) + 2 * var(--iui-size-xs));
83
83
  background-color:var(--iui-color-background-2);
84
- color:var(--iui-text-color-muted);
84
+ color:var(--iui-color-foreground-4);
85
85
  }