@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/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:var(--iui-size-l);
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,7 +213,7 @@
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);
@@ -221,24 +222,21 @@
221
222
  .iui-button-icon{
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
- .iui-button-icon:only-child{
230
- margin-left:var(--_iui-button-icon-margin-x);
231
- margin-right:var(--_iui-button-icon-margin-x);
229
+ margin-block:var(--iui-size-2xs);
232
230
  }
233
231
 
234
232
  .iui-button-dropdown{
235
- --_iui-button-padding-inline:16px 8px;
233
+ padding-right:calc(var(--iui-size-xs) - 1px);
236
234
  }
237
235
  .iui-button-dropdown[data-iui-size=small]{
238
- --_iui-button-padding-inline:8px 4px;
236
+ padding-right:calc(var(--iui-size-2xs) - 1px);
239
237
  }
240
238
  .iui-button-dropdown[data-iui-size=large]{
241
- --_iui-button-padding-inline:24px 12px;
239
+ padding-right:calc(var(--iui-size-s) - 1px);
242
240
  }
243
241
 
244
242
  .iui-button-split{
@@ -261,10 +259,11 @@
261
259
  z-index:-1;
262
260
  }
263
261
  .iui-button-split :where(.iui-button:last-child){
264
- --_iui-button-padding-inline:4px;
262
+ --_iui-button-padding-inline:var(--iui-size-2xs);
265
263
  border-top-left-radius:0;
266
264
  border-bottom-left-radius:0;
267
265
  margin-left:-1px;
266
+ min-width:unset;
268
267
  }
269
268
  .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
269
  border-left-color:rgba(255, 255, 255, var(--iui-opacity-4));
@@ -274,10 +273,10 @@
274
273
  z-index:-1;
275
274
  }
276
275
  .iui-button-split :where(.iui-button:last-child)[data-iui-size=small]{
277
- --_iui-button-padding-inline:2px;
276
+ --_iui-button-padding-inline:var(--iui-size-3xs);
278
277
  }
279
278
  .iui-button-split :where(.iui-button:last-child)[data-iui-size=large]{
280
- --_iui-button-padding-inline:8px;
279
+ --_iui-button-padding-inline:var(--iui-size-xs);
281
280
  }
282
281
 
283
282
  .iui-button-group{
@@ -294,7 +293,9 @@
294
293
  }
295
294
  .iui-button-group > * .iui-input-container, .iui-button-group > * .iui-button, .iui-button-group > * .iui-input:where(:not(.iui-input-container .iui-input)){
296
295
  position:relative;
297
- --_iui-button-active-stripe-inset:2px 2px calc(100% - 4px);
296
+ --_iui-button-active-stripe-inset:var(--iui-size-3xs)
297
+ var(--iui-size-3xs)
298
+ calc(100% - var(--iui-size-2xs));
298
299
  }
299
300
  .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
301
  z-index:1;
@@ -310,15 +311,15 @@
310
311
  transition-duration:0ms;
311
312
  }
312
313
  .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;
314
+ transition-duration:var(--iui-duration-1);
314
315
  }
315
316
  .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;
317
+ border-top-left-radius:var(--iui-border-radius-1);
318
+ border-bottom-left-radius:var(--iui-border-radius-1);
318
319
  }
319
320
  .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;
321
+ border-bottom-right-radius:var(--iui-border-radius-1);
322
+ border-top-right-radius:var(--iui-border-radius-1);
322
323
  }
323
324
  .iui-button-group > * + *{
324
325
  margin-left:-1px;
@@ -343,7 +344,10 @@
343
344
  }
344
345
  .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
346
  position:relative;
346
- --_iui-button-active-stripe-inset:2px calc(100% - 4px) 2px 2px;
347
+ --_iui-button-active-stripe-inset:var(--iui-size-3xs)
348
+ calc(100% - var(--iui-size-2xs))
349
+ var(--iui-size-3xs)
350
+ var(--iui-size-3xs);
347
351
  }
348
352
  .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
353
  z-index:1;
@@ -359,15 +363,15 @@
359
363
  transition-duration:0ms;
360
364
  }
361
365
  .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;
366
+ transition-duration:var(--iui-duration-1);
363
367
  }
364
368
  .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;
369
+ border-top-left-radius:var(--iui-border-radius-1);
370
+ border-top-right-radius:var(--iui-border-radius-1);
367
371
  }
368
372
  .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;
373
+ border-bottom-right-radius:var(--iui-border-radius-1);
374
+ border-bottom-left-radius:var(--iui-border-radius-1);
371
375
  }
372
376
  .iui-button-group-vertical > * + *{
373
377
  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;
@@ -59,8 +59,8 @@
59
59
  border:none;
60
60
  vertical-align:baseline;
61
61
  flex:2;
62
- max-width:256px;
63
- border-radius:4px;
62
+ max-width:calc(var(--iui-size-2xl) * 4);
63
+ border-radius:var(--iui-border-radius-1);
64
64
  white-space:nowrap;
65
65
  overflow-x:auto;
66
66
  overflow-x:overlay;
@@ -80,9 +80,10 @@
80
80
  display:none;
81
81
  }
82
82
  .iui-carousel-navigation-dot{
83
- --_iui-button-gap:4px;
84
- --_iui-button-height:28px;
85
- --_iui-button-padding-inline:8px;
83
+ --_iui-button-gap:var(--iui-size-2xs);
84
+ --_iui-button-padding-block:0;
85
+ --_iui-button-padding-inline:var(--iui-size-xs);
86
+ --_iui-button-min-height:var(--iui-component-height-small);
86
87
  background-color:transparent;
87
88
  border:none;
88
89
  cursor:pointer;
@@ -91,17 +92,17 @@
91
92
  padding-right:var(--_iui-button-padding-inline);
92
93
  }
93
94
  .iui-carousel-navigation-dot:hover::after{
94
- background-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-3));
95
+ background-color:var(--iui-color-foreground-3);
95
96
  }
96
97
  .iui-carousel-navigation-dot::after{
97
98
  display:flex;
98
99
  flex-shrink:0;
99
- width:12px;
100
- height:12px;
100
+ width:var(--iui-size-s);
101
+ height:var(--iui-size-s);
101
102
  content:"";
102
103
  border-radius:50%;
103
104
  border:1px solid transparent;
104
- background-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-4));
105
+ background-color:var(--iui-color-foreground-4);
105
106
  box-shadow:inset 0 0 0 0 var(--iui-color-background-1);
106
107
  }
107
108
  .iui-carousel-navigation-dot.iui-first::after{
@@ -117,7 +118,7 @@
117
118
  }
118
119
  @media (forced-colors: active){
119
120
  .iui-carousel-navigation-dot.iui-active::after{
120
- border-width:6px;
121
+ border-width:var(--iui-size-xs);
121
122
  }
122
123
  }
123
124
  .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,12 @@
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
47
  cursor:wait;
48
- color:var(--iui-text-color-muted);
48
+ color:var(--iui-color-foreground-4);
49
49
  }
50
50
  .iui-checkbox-wrapper > .iui-checkbox-label,
51
51
  .iui-checkbox-wrapper > .iui-radio-label{
@@ -56,17 +56,17 @@
56
56
  .iui-checkbox-wrapper > .iui-radio-label svg{
57
57
  display:flex;
58
58
  flex-shrink:0;
59
- width:16px;
60
- height:16px;
59
+ width:var(--iui-size-m);
60
+ height:var(--iui-size-m);
61
61
  vertical-align:middle;
62
62
  fill:currentColor;
63
63
  }
64
64
  .iui-checkbox-wrapper.iui-disabled{
65
65
  cursor:not-allowed;
66
- color:var(--iui-text-color-muted);
66
+ color:var(--iui-color-foreground-4);
67
67
  }
68
68
  .iui-checkbox-wrapper.iui-disabled svg{
69
- fill:var(--iui-icon-color-actionable-disabled);
69
+ fill:var(--iui-color-foreground-5);
70
70
  }
71
71
  .iui-checkbox-wrapper.iui-positive{
72
72
  color:var(--iui-color-foreground-positive);
@@ -81,7 +81,7 @@
81
81
  content:"";
82
82
  position:absolute;
83
83
  inset:0;
84
- transition:border-color 0.2s ease-out;
84
+ transition:border-color var(--iui-duration-1) ease-out;
85
85
  border-radius:inherit;
86
86
  border-style:solid;
87
87
  border-width:1px;
@@ -99,15 +99,15 @@
99
99
  --_iui-checkbox-mask-image:var(--_iui-checkbox-unchecked-svg);
100
100
  }
101
101
  .iui-checkbox:checked{
102
- --_iui-checkbox-border-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-3));
102
+ --_iui-checkbox-border-color:var(--iui-color-foreground-3);
103
103
  --_iui-checkbox-mask-image:var(--_iui-checkbox-checkmark-svg);
104
104
  }
105
105
  .iui-checkbox:indeterminate{
106
- --_iui-checkbox-border-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-3));
106
+ --_iui-checkbox-border-color:var(--iui-color-foreground-3);
107
107
  --_iui-checkbox-mask-image:var(--_iui-checkbox-indeterminate-svg);
108
108
  }
109
109
  .iui-checkbox:hover{
110
- --_iui-checkbox-border-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-2));
110
+ --_iui-checkbox-border-color:var(--iui-color-foreground-2);
111
111
  }
112
112
  .iui-checkbox:focus-visible{
113
113
  outline:2px solid var(--iui-color-foreground-primary);
@@ -120,7 +120,7 @@
120
120
  }
121
121
  }
122
122
  .iui-checkbox:disabled{
123
- --_iui-checkbox-svg-color:var(--iui-icon-color-actionable-disabled);
123
+ --_iui-checkbox-svg-color:var(--iui-color-foreground-5);
124
124
  --_iui-checkbox-border-color:var(--iui-color-background-border);
125
125
  --_iui-checkbox-background-color:var(--iui-color-background-disabled);
126
126
  cursor:not-allowed;
@@ -133,14 +133,14 @@
133
133
  --_iui-checkbox-background-color:transparent;
134
134
  }
135
135
  .iui-checkbox.iui-checkbox-visibility:where(:not(:checked):not(:indeterminate)){
136
- --_iui-checkbox-svg-color:var(--iui-icon-color-actionable);
136
+ --_iui-checkbox-svg-color:var(--iui-color-foreground-2);
137
137
  }
138
138
  .iui-checkbox.iui-checkbox-visibility:where(:hover){
139
139
  --_iui-checkbox-border-color:transparent;
140
- --_iui-checkbox-background-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-6));
140
+ --_iui-checkbox-background-color:var(--iui-color-background-transparent-hover);
141
141
  }
142
142
  .iui-checkbox.iui-checkbox-visibility:where(:disabled){
143
- --_iui-checkbox-svg-color:var(--iui-icon-color-actionable-disabled);
143
+ --_iui-checkbox-svg-color:var(--iui-color-foreground-5);
144
144
  --_iui-checkbox-background-color:var(--iui-color-background-disabled);
145
145
  }
146
146
  .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
  }