@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/radio-tile.css CHANGED
@@ -4,29 +4,29 @@
4
4
  *--------------------------------------------------------------------------------------------*/
5
5
  .iui-radio-tile{
6
6
  cursor:pointer;
7
- -webkit-tap-highlight-color:rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-6));
7
+ -webkit-tap-highlight-color:hsl(var(--iui-color-foreground-primary-hsl)/var(--iui-opacity-6));
8
8
  }
9
9
 
10
10
  .iui-radio-tile-content{
11
- width:160px;
11
+ width:calc(var(--iui-size-xl) * 5);
12
12
  height:100%;
13
- padding:8px;
13
+ padding:var(--iui-size-xs);
14
14
  position:relative;
15
15
  z-index:1;
16
- outline:1px solid rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-4));
16
+ outline:1px solid var(--iui-color-foreground-4);
17
17
  background-color:var(--iui-color-background-1);
18
18
  }
19
19
  @media (prefers-reduced-motion: no-preference){
20
20
  .iui-radio-tile-content{
21
- transition:outline-color 0.2s ease-out;
21
+ transition:outline-color var(--iui-duration-1) ease-out;
22
22
  }
23
23
  }
24
24
  .iui-radio-tile-content:hover{
25
25
  z-index:2;
26
- outline-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-2));
26
+ outline-color:var(--iui-color-foreground-2);
27
27
  }
28
28
  .iui-radio-tile-content:hover .iui-radio-tile-icon{
29
- fill:var(--iui-icon-color-actionable);
29
+ fill:var(--iui-color-foreground-2);
30
30
  }
31
31
  @media (forced-colors: active){
32
32
  .iui-radio-tile-content:hover .iui-radio-tile-icon{
@@ -56,9 +56,9 @@
56
56
  position:absolute;
57
57
  }
58
58
  .iui-radio-tile-input:checked + *{
59
- padding:8px;
59
+ padding:var(--iui-size-xs);
60
60
  z-index:3;
61
- outline:2px solid var(--iui-color-foreground-primary);
61
+ outline:var(--iui-size-3xs) solid var(--iui-color-foreground-primary);
62
62
  outline-offset:-1px;
63
63
  }
64
64
  @media (forced-colors: active){
@@ -67,7 +67,7 @@
67
67
  }
68
68
  }
69
69
  .iui-radio-tile-input:checked + * .iui-radio-tile-icon{
70
- fill:var(--iui-icon-color-primary);
70
+ fill:var(--iui-color-foreground-primary);
71
71
  }
72
72
  @media (forced-colors: active){
73
73
  .iui-radio-tile-input:checked + * .iui-radio-tile-icon{
@@ -77,12 +77,12 @@
77
77
  .iui-radio-tile-input:checked + *::after{
78
78
  display:flex;
79
79
  flex-shrink:0;
80
- width:16px;
81
- height:16px;
80
+ width:var(--iui-size-m);
81
+ height:var(--iui-size-m);
82
82
  content:"";
83
83
  position:absolute;
84
- top:8px;
85
- right:8px;
84
+ top:var(--iui-size-xs);
85
+ right:var(--iui-size-xs);
86
86
  -webkit-mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M6,14L0,8l2-2l4,4l8-8l2,2L6,14z" /></svg>');
87
87
  mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M6,14L0,8l2-2l4,4l8-8l2,2L6,14z" /></svg>');
88
88
  background-color:var(--iui-color-foreground-primary);
@@ -99,7 +99,7 @@
99
99
  background-color:var(--iui-color-background-disabled);
100
100
  }
101
101
  .iui-radio-tile-input:disabled + *::after{
102
- background-color:var(--iui-icon-color-actionable-disabled);
102
+ background-color:var(--iui-color-foreground-5);
103
103
  }
104
104
  @media (forced-colors: active){
105
105
  .iui-radio-tile-input:disabled + *::after{
@@ -108,7 +108,7 @@
108
108
  }
109
109
  .iui-radio-tile-input:disabled + * .iui-radio-tile-icon{
110
110
  filter:grayscale(100%);
111
- fill:var(--iui-icon-color-actionable-disabled);
111
+ fill:var(--iui-color-foreground-5);
112
112
  }
113
113
  @media (forced-colors: active){
114
114
  .iui-radio-tile-input:disabled + * .iui-radio-tile-icon{
@@ -116,7 +116,7 @@
116
116
  }
117
117
  }
118
118
  .iui-radio-tile-input:disabled + * .iui-radio-tile-label{
119
- color:var(--iui-text-color-muted);
119
+ color:var(--iui-color-foreground-4);
120
120
  }
121
121
  @media (forced-colors: active){
122
122
  .iui-radio-tile-input:disabled + * .iui-radio-tile-label,
@@ -126,7 +126,7 @@
126
126
  }
127
127
  .iui-radio-tile-input:disabled:checked + *{
128
128
  z-index:3;
129
- outline:2px solid rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-4));
129
+ outline:var(--iui-size-3xs) solid var(--iui-color-foreground-4);
130
130
  }
131
131
  @media (forced-colors: active){
132
132
  .iui-radio-tile-input:disabled:checked + *{
@@ -135,7 +135,7 @@
135
135
  }
136
136
  .iui-radio-tile-input:focus-visible + *{
137
137
  z-index:2;
138
- outline-offset:-2px;
138
+ outline-offset:calc(0px - var(--iui-size-3xs));
139
139
  outline:3px solid var(--iui-color-foreground-primary);
140
140
  }
141
141
  @media (forced-colors: active){
@@ -146,7 +146,7 @@
146
146
  @supports not selector(*:focus-visible){
147
147
  .iui-radio-tile-input:focus + *{
148
148
  z-index:2;
149
- outline-offset:-2px;
149
+ outline-offset:calc(0px - var(--iui-size-3xs));
150
150
  outline:3px solid var(--iui-color-foreground-primary);
151
151
  }
152
152
  @media (forced-colors: active){
@@ -159,11 +159,11 @@
159
159
  .iui-radio-tile-icon{
160
160
  display:flex;
161
161
  flex-shrink:0;
162
- width:32px;
163
- height:32px;
164
- fill:var(--iui-icon-color);
165
- margin:6px auto 12px;
166
- fill:var(--iui-icon-color);
162
+ width:var(--iui-size-xl);
163
+ height:var(--iui-size-xl);
164
+ fill:var(--iui-color-foreground-4);
165
+ margin:calc(var(--iui-size-s) * 0.5) auto var(--iui-size-s);
166
+ fill:var(--iui-color-foreground-4);
167
167
  }
168
168
  @media (forced-colors: active){
169
169
  .iui-radio-tile-icon{
@@ -172,7 +172,7 @@
172
172
  }
173
173
  @media (prefers-reduced-motion: no-preference){
174
174
  .iui-radio-tile-icon{
175
- transition:fill 0.2s ease-out;
175
+ transition:fill var(--iui-duration-1) ease-out;
176
176
  }
177
177
  }
178
178
  @media (forced-colors: active){
@@ -182,18 +182,18 @@
182
182
  }
183
183
 
184
184
  .iui-radio-tile-label{
185
- font-size:14px;
186
- font-weight:600;
187
- line-height:24px;
185
+ font-size:var(--iui-font-size-1);
186
+ font-weight:var(--iui-font-weight-semibold);
187
+ line-height:var(--iui-size-l);
188
188
  text-align:center;
189
189
  word-break:break-word;
190
- color:var(--iui-text-color);
190
+ color:var(--iui-color-foreground-2);
191
191
  }
192
192
 
193
193
  .iui-radio-tile-sublabel{
194
- font-size:12px;
195
- line-height:17px;
194
+ font-size:var(--iui-font-size-0);
195
+ line-height:calc(var(--iui-size-s) * 1.375);
196
196
  text-align:center;
197
197
  word-break:break-word;
198
- color:var(--iui-text-color-muted);
198
+ color:var(--iui-color-foreground-4);
199
199
  }
package/css/radio.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
  border-radius:50%;
@@ -31,7 +31,7 @@
31
31
  vertical-align:baseline;
32
32
  display:flex;
33
33
  align-items:center;
34
- font-size:14px;
34
+ font-size:var(--iui-font-size-1);
35
35
  width:-webkit-fit-content;
36
36
  width:-moz-fit-content;
37
37
  width:fit-content;
@@ -41,12 +41,12 @@
41
41
  user-select:none;
42
42
  position:relative;
43
43
  cursor:pointer;
44
- color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-2));
45
- gap:8px;
44
+ color:var(--iui-color-foreground-2);
45
+ gap:var(--iui-size-xs);
46
46
  }
47
47
  .iui-radio-wrapper.iui-loading{
48
48
  cursor:wait;
49
- color:var(--iui-text-color-muted);
49
+ color:var(--iui-color-foreground-4);
50
50
  }
51
51
  .iui-radio-wrapper > .iui-checkbox-label,
52
52
  .iui-radio-wrapper > .iui-radio-label{
@@ -57,17 +57,17 @@
57
57
  .iui-radio-wrapper > .iui-radio-label svg{
58
58
  display:flex;
59
59
  flex-shrink:0;
60
- width:16px;
61
- height:16px;
60
+ width:var(--iui-size-m);
61
+ height:var(--iui-size-m);
62
62
  vertical-align:middle;
63
63
  fill:currentColor;
64
64
  }
65
65
  .iui-radio-wrapper.iui-disabled{
66
66
  cursor:not-allowed;
67
- color:var(--iui-text-color-muted);
67
+ color:var(--iui-color-foreground-4);
68
68
  }
69
69
  .iui-radio-wrapper.iui-disabled svg{
70
- fill:var(--iui-icon-color-actionable-disabled);
70
+ fill:var(--iui-color-foreground-5);
71
71
  }
72
72
  .iui-radio-wrapper.iui-positive{
73
73
  color:var(--iui-color-foreground-positive);
@@ -82,7 +82,7 @@
82
82
  content:"";
83
83
  position:absolute;
84
84
  inset:0;
85
- transition:border-color 0.2s ease-out;
85
+ transition:border-color var(--iui-duration-1) ease-out;
86
86
  border-radius:inherit;
87
87
  border-style:solid;
88
88
  border-width:1px;
@@ -100,15 +100,15 @@
100
100
  --_iui-checkbox-mask-image:var(--_iui-checkbox-unchecked-svg);
101
101
  }
102
102
  .iui-radio:checked{
103
- --_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);
104
104
  --_iui-checkbox-mask-image:var(--_iui-checkbox-checkmark-svg);
105
105
  }
106
106
  .iui-radio:indeterminate{
107
- --_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);
108
108
  --_iui-checkbox-mask-image:var(--_iui-checkbox-indeterminate-svg);
109
109
  }
110
110
  .iui-radio:hover{
111
- --_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);
112
112
  }
113
113
  .iui-radio:focus-visible{
114
114
  outline:2px solid var(--iui-color-foreground-primary);
@@ -121,7 +121,7 @@
121
121
  }
122
122
  }
123
123
  .iui-radio:disabled{
124
- --_iui-checkbox-svg-color:var(--iui-icon-color-actionable-disabled);
124
+ --_iui-checkbox-svg-color:var(--iui-color-foreground-5);
125
125
  --_iui-checkbox-border-color:var(--iui-color-background-border);
126
126
  --_iui-checkbox-background-color:var(--iui-color-background-disabled);
127
127
  cursor:not-allowed;
@@ -134,14 +134,14 @@
134
134
  --_iui-checkbox-background-color:transparent;
135
135
  }
136
136
  .iui-radio.iui-checkbox-visibility:where(:not(:checked):not(:indeterminate)){
137
- --_iui-checkbox-svg-color:var(--iui-icon-color-actionable);
137
+ --_iui-checkbox-svg-color:var(--iui-color-foreground-2);
138
138
  }
139
139
  .iui-radio.iui-checkbox-visibility:where(:hover){
140
140
  --_iui-checkbox-border-color:transparent;
141
- --_iui-checkbox-background-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-6));
141
+ --_iui-checkbox-background-color:var(--iui-color-background-transparent-hover);
142
142
  }
143
143
  .iui-radio.iui-checkbox-visibility:where(:disabled){
144
- --_iui-checkbox-svg-color:var(--iui-icon-color-actionable-disabled);
144
+ --_iui-checkbox-svg-color:var(--iui-color-foreground-5);
145
145
  --_iui-checkbox-background-color:var(--iui-color-background-disabled);
146
146
  }
147
147
  .iui-radio.iui-loading{
package/css/select.css CHANGED
@@ -4,11 +4,11 @@
4
4
  *--------------------------------------------------------------------------------------------*/
5
5
  .iui-select-button{
6
6
  width:100%;
7
- margin:0;
8
- border-radius:4px;
9
- padding:7px 12px;
10
- min-height:40px;
11
- transition:border-color 0.2s ease-out;
7
+ border-radius:var(--iui-border-radius-1);
8
+ min-height:var(--_iui-select-min-height);
9
+ padding-block:var(--_iui-select-padding-block);
10
+ padding-inline:var(--iui-size-s);
11
+ transition:border-color var(--iui-duration-1) ease-out;
12
12
  display:flex;
13
13
  align-items:center;
14
14
  -webkit-user-select:none;
@@ -17,9 +17,11 @@
17
17
  user-select:none;
18
18
  position:relative;
19
19
  overflow:hidden;
20
- color:var(--iui-text-color);
20
+ color:var(--iui-color-foreground-2);
21
21
  background-color:var(--iui-color-background-1);
22
- border:1px solid rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-4));
22
+ border:1px solid var(--iui-color-foreground-4);
23
+ --_iui-select-padding-block:var(--iui-size-2xs);
24
+ --_iui-select-min-height:var(--iui-component-height);
23
25
  }
24
26
  .iui-select-button:focus-visible{
25
27
  outline:2px solid var(--iui-color-foreground-primary);
@@ -31,57 +33,56 @@
31
33
  outline-offset:-2px;
32
34
  }
33
35
  }
34
- .iui-select-button.iui-small{
35
- padding-top:1px;
36
- padding-bottom:1px;
37
- min-height:28px;
38
- }
39
- .iui-select-button.iui-large{
40
- padding-top:13px;
41
- padding-bottom:13px;
42
- min-height:52px;
43
- font-size:16px;
44
- }
45
36
  .iui-select-button.iui-disabled{
46
37
  background-color:var(--iui-color-background-disabled);
47
38
  border-color:var(--iui-color-background-disabled);
48
- --_hover-color:var(--iui-color-background-disabled);
39
+ --_iui-input-with-icon-hover-border-color:var(--iui-color-background-disabled);
49
40
  cursor:not-allowed;
50
41
  }
51
42
  .iui-select-button .iui-icon{
52
43
  display:flex;
53
44
  flex-shrink:0;
54
- width:16px;
55
- height:16px;
45
+ width:var(--iui-size-m);
46
+ height:var(--iui-size-m);
56
47
  flex:0 0 auto;
57
- fill:var(--iui-icon-color-actionable);
48
+ fill:var(--iui-color-foreground-2);
58
49
  fill:currentColor;
59
50
  }
60
51
  .iui-select-button .iui-icon + .iui-content{
61
- margin-left:8px;
52
+ margin-left:var(--iui-size-xs);
62
53
  }
63
54
  .iui-select-button .iui-content{
64
55
  overflow:hidden;
65
56
  white-space:nowrap;
66
57
  text-overflow:ellipsis;
58
+ min-height:var(--iui-size-l);
67
59
  }
68
60
  .iui-select-button.iui-placeholder{
69
- color:var(--iui-text-color-placeholder);
61
+ color:var(--iui-color-foreground-5);
62
+ }
63
+ .iui-select-button[data-iui-size=small]{
64
+ --_iui-select-padding-block:0;
65
+ --_iui-select-min-height:var(--iui-component-height-small);
66
+ }
67
+ .iui-select-button[data-iui-size=large]{
68
+ --_iui-select-padding-block:var(--iui-size-xs);
69
+ --_iui-select-min-height:var(--iui-component-height-large);
70
+ font-size:var(--iui-font-size-2);
70
71
  }
71
72
 
72
73
  .iui-select-tag-container{
73
74
  position:absolute;
74
- inset:0 40px 0 12px;
75
+ inset:0 calc(var(--iui-size-m) + var(--iui-size-l)) 0 var(--iui-size-s);
75
76
  height:100%;
76
77
  display:flex;
77
78
  align-items:center;
78
- gap:4px;
79
+ gap:var(--iui-size-2xs);
79
80
  overflow:hidden;
80
81
  }
81
82
  .iui-select-tag-container > * + *{
82
- margin-left:4px;
83
+ margin-left:var(--iui-size-2xs);
83
84
  }
84
- @supports (gap: 4px){
85
+ @supports (gap: var(--iui-size-2xs)){
85
86
  .iui-select-tag-container > * + *{
86
87
  margin-left:0;
87
88
  }
@@ -93,29 +94,28 @@
93
94
  user-select:all;
94
95
  text-transform:lowercase;
95
96
  display:inline-flex;
96
- height:36px;
97
- margin-top:4px;
98
- margin-bottom:4px;
99
- border-radius:9999px;
100
- padding:0 2px;
97
+ height:calc(var(--iui-size-s) * 3);
98
+ margin-block:var(--iui-size-2xs);
99
+ border-radius:var(--iui-border-radius-round);
100
+ padding:0 var(--iui-size-3xs);
101
101
  align-items:center;
102
- transition:border-color 0.2s ease-out;
103
- font-size:14px;
102
+ transition:border-color var(--iui-duration-1) ease-out;
103
+ font-size:var(--iui-font-size-1);
104
104
  text-transform:none;
105
105
  cursor:default;
106
106
  -webkit-tap-highlight-color:transparent;
107
- border:1px solid rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-4));
107
+ border:1px solid var(--iui-color-foreground-4);
108
108
  background-color:var(--iui-color-background-1);
109
- color:var(--iui-text-color);
109
+ color:var(--iui-color-foreground-2);
110
110
  margin-top:0;
111
111
  margin-bottom:0;
112
112
  display:inline-flex;
113
113
  align-items:center;
114
114
  height:80%;
115
- max-height:36px;
115
+ max-height:calc(var(--iui-size-s) * 3);
116
116
  }
117
117
  .iui-select-tag:hover{
118
- border-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-1));
118
+ border-color:var(--iui-color-foreground-1);
119
119
  }
120
120
 
121
121
  .iui-select-tag-label{
@@ -123,22 +123,22 @@
123
123
  padding:0;
124
124
  border:none;
125
125
  vertical-align:baseline;
126
- font-size:14px;
127
- font-weight:400;
128
- line-height:24px;
126
+ font-size:var(--iui-font-size-1);
127
+ font-weight:var(--iui-font-weight-normal);
128
+ line-height:var(--iui-size-l);
129
129
  white-space:nowrap;
130
130
  text-overflow:ellipsis;
131
131
  overflow:hidden;
132
- margin:0 4px 0 8px;
132
+ margin:0 var(--iui-size-2xs) 0 var(--iui-size-xs);
133
133
  display:inline-flex;
134
134
  align-items:center;
135
135
  }
136
136
  .iui-select-tag-label:only-child{
137
- margin:0 8px;
137
+ margin:0 var(--iui-size-xs);
138
138
  }
139
- .iui-select-button.iui-small .iui-select-tag-label{
140
- font-size:12px;
141
- line-height:18px;
139
+ .iui-select-button[data-iui-size=small] .iui-select-tag-label{
140
+ font-size:var(--iui-font-size-0);
141
+ line-height:calc(var(--iui-size-s) * 1.5);
142
142
  }
143
143
 
144
144
  .iui-select-tag-button{
@@ -148,14 +148,15 @@
148
148
  vertical-align:baseline;
149
149
  font-family:inherit;
150
150
  display:inline-flex;
151
+ flex-shrink:0;
151
152
  align-items:center;
152
153
  vertical-align:middle;
153
154
  justify-content:center;
154
155
  position:relative;
155
- border-radius:4px;
156
- line-height:24px;
157
- font-size:14px;
158
- font-weight:400;
156
+ border-radius:var(--iui-border-radius-1);
157
+ line-height:var(--iui-size-l);
158
+ font-size:var(--iui-font-size-1);
159
+ font-weight:var(--iui-font-weight-normal);
159
160
  -webkit-user-select:none;
160
161
  -moz-user-select:none;
161
162
  -ms-user-select:none;
@@ -166,24 +167,29 @@
166
167
  background:var(--_iui-button-background-color);
167
168
  color:var(--_iui-button-text-color);
168
169
  gap:var(--_iui-button-gap);
169
- height:var(--_iui-button-height);
170
+ min-height:var(--_iui-button-min-height);
171
+ min-width:var(--_iui-button-min-height);
172
+ padding-block:var(--_iui-button-padding-block);
170
173
  padding-inline:var(--_iui-button-padding-inline);
171
- transition:background-color 0.2s ease-out, border-color 0.2s ease-out;
174
+ transition:background-color var(--iui-duration-1) ease-out, border-color var(--iui-duration-1) ease-out;
172
175
  -webkit-tap-highlight-color:transparent;
173
176
  text-decoration:none;
174
- --_iui-button-gap:8px;
175
- --_iui-button-height:40px;
176
- --_iui-button-padding-inline:16px;
177
- --_iui-button-text-color:var(--iui-text-color);
177
+ --_iui-button-gap:var(--iui-size-xs);
178
+ --_iui-button-padding-block:var(--iui-size-2xs);
179
+ --_iui-button-padding-inline:var(--iui-size-m);
180
+ --_iui-button-min-height:var(--iui-component-height);
181
+ --_iui-button-text-color:var(--iui-color-foreground-2);
178
182
  --_iui-button-background-color:transparent;
179
183
  --_iui-button-border-color:transparent;
180
- --_iui-button-icon-margin-x:4px;
181
- --_iui-button-gap:8px;
182
- --_iui-button-height:40px;
183
- --_iui-button-padding-inline:16px;
184
- --_iui-button-padding-inline:8px;
185
- border-radius:50%;
186
- padding:0 4px;
184
+ --_iui-button-gap:var(--iui-size-xs);
185
+ --_iui-button-padding-block:var(--iui-size-2xs);
186
+ --_iui-button-padding-inline:var(--iui-size-m);
187
+ --_iui-button-min-height:var(--iui-component-height);
188
+ --_iui-button-padding-inline:var(--iui-size-xs);
189
+ border-radius:var(--iui-border-radius-round);
190
+ padding:0 var(--iui-size-2xs);
191
+ min-height:unset;
192
+ min-width:unset;
187
193
  height:100%;
188
194
  aspect-ratio:1/1;
189
195
  }
@@ -198,39 +204,36 @@
198
204
  }
199
205
  }
200
206
  .iui-select-tag-button:where(:hover, :active){
201
- --_iui-button-text-color:var(--iui-color-foreground-body);
202
- --_iui-button-background-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-6));
207
+ --_iui-button-text-color:var(--iui-color-foreground-1);
208
+ --_iui-button-background-color:var(--iui-color-background-transparent-hover);
203
209
  }
204
210
  .iui-select-tag-button:where(:focus){
205
211
  outline-offset:-1px;
206
212
  outline-width:1px;
207
213
  }
208
214
  .iui-select-tag-button:where([disabled], :disabled, [aria-disabled="true"]){
209
- --_iui-button-text-color:var(--iui-text-color-placeholder);
215
+ --_iui-button-text-color:var(--iui-color-foreground-5);
210
216
  --_iui-button-background-color:transparent;
211
217
  --_iui-button-border-color:transparent;
212
218
  }
213
- .iui-select-button.iui-small .iui-select-tag-button{
214
- font-size:12px;
215
- line-height:18px;
219
+ .iui-select-button[data-iui-size=small] .iui-select-tag-button{
220
+ font-size:var(--iui-font-size-0);
221
+ line-height:calc(var(--iui-size-s) * 1.5);
216
222
  }
217
223
 
218
224
  .iui-select-tag-button-icon{
219
225
  display:flex;
220
226
  flex-shrink:0;
221
- width:16px;
222
- height:16px;
223
- transition:fill 0.2s ease-out;
227
+ width:var(--iui-size-m);
228
+ height:var(--iui-size-m);
229
+ transition:fill var(--iui-duration-1) ease-out;
224
230
  fill:currentColor;
231
+ margin-block:var(--iui-size-2xs);
225
232
  flex-shrink:0;
226
233
  }
227
- .iui-select-tag-button-icon:only-child{
228
- margin-left:var(--_iui-button-icon-margin-x);
229
- margin-right:var(--_iui-button-icon-margin-x);
230
- }
231
- .iui-select-button.iui-small .iui-select-tag-button-icon{
234
+ .iui-select-button[data-iui-size=small] .iui-select-tag-button-icon{
232
235
  display:flex;
233
236
  flex-shrink:0;
234
- width:12px;
235
- height:12px;
237
+ width:var(--iui-size-s);
238
+ height:var(--iui-size-s);
236
239
  }