@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/radio-tile.css CHANGED
@@ -4,29 +4,25 @@
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
- }
19
- @media (prefers-reduced-motion: no-preference){
20
- .iui-radio-tile-content{
21
- transition:outline-color 0.2s ease-out;
22
- }
18
+ transition:outline-color var(--iui-duration-1) ease-out;
23
19
  }
24
20
  .iui-radio-tile-content:hover{
25
21
  z-index:2;
26
- outline-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-2));
22
+ outline-color:var(--iui-color-foreground-2);
27
23
  }
28
24
  .iui-radio-tile-content:hover .iui-radio-tile-icon{
29
- fill:var(--iui-icon-color-actionable);
25
+ fill:var(--iui-color-foreground-2);
30
26
  }
31
27
  @media (forced-colors: active){
32
28
  .iui-radio-tile-content:hover .iui-radio-tile-icon{
@@ -56,9 +52,9 @@
56
52
  position:absolute;
57
53
  }
58
54
  .iui-radio-tile-input:checked + *{
59
- padding:8px;
55
+ padding:var(--iui-size-xs);
60
56
  z-index:3;
61
- outline:2px solid var(--iui-color-foreground-primary);
57
+ outline:var(--iui-size-3xs) solid var(--iui-color-foreground-primary);
62
58
  outline-offset:-1px;
63
59
  }
64
60
  @media (forced-colors: active){
@@ -67,7 +63,7 @@
67
63
  }
68
64
  }
69
65
  .iui-radio-tile-input:checked + * .iui-radio-tile-icon{
70
- fill:var(--iui-icon-color-primary);
66
+ fill:var(--iui-color-foreground-primary);
71
67
  }
72
68
  @media (forced-colors: active){
73
69
  .iui-radio-tile-input:checked + * .iui-radio-tile-icon{
@@ -77,12 +73,12 @@
77
73
  .iui-radio-tile-input:checked + *::after{
78
74
  display:flex;
79
75
  flex-shrink:0;
80
- width:16px;
81
- height:16px;
76
+ width:var(--iui-size-m);
77
+ height:var(--iui-size-m);
82
78
  content:"";
83
79
  position:absolute;
84
- top:8px;
85
- right:8px;
80
+ top:var(--iui-size-xs);
81
+ right:var(--iui-size-xs);
86
82
  -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
83
  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
84
  background-color:var(--iui-color-foreground-primary);
@@ -99,7 +95,7 @@
99
95
  background-color:var(--iui-color-background-disabled);
100
96
  }
101
97
  .iui-radio-tile-input:disabled + *::after{
102
- background-color:var(--iui-icon-color-actionable-disabled);
98
+ background-color:var(--iui-color-foreground-5);
103
99
  }
104
100
  @media (forced-colors: active){
105
101
  .iui-radio-tile-input:disabled + *::after{
@@ -108,7 +104,7 @@
108
104
  }
109
105
  .iui-radio-tile-input:disabled + * .iui-radio-tile-icon{
110
106
  filter:grayscale(100%);
111
- fill:var(--iui-icon-color-actionable-disabled);
107
+ fill:var(--iui-color-foreground-5);
112
108
  }
113
109
  @media (forced-colors: active){
114
110
  .iui-radio-tile-input:disabled + * .iui-radio-tile-icon{
@@ -116,7 +112,7 @@
116
112
  }
117
113
  }
118
114
  .iui-radio-tile-input:disabled + * .iui-radio-tile-label{
119
- color:var(--iui-text-color-muted);
115
+ color:var(--iui-color-foreground-4);
120
116
  }
121
117
  @media (forced-colors: active){
122
118
  .iui-radio-tile-input:disabled + * .iui-radio-tile-label,
@@ -126,7 +122,7 @@
126
122
  }
127
123
  .iui-radio-tile-input:disabled:checked + *{
128
124
  z-index:3;
129
- outline:2px solid rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-4));
125
+ outline:var(--iui-size-3xs) solid var(--iui-color-foreground-4);
130
126
  }
131
127
  @media (forced-colors: active){
132
128
  .iui-radio-tile-input:disabled:checked + *{
@@ -135,7 +131,7 @@
135
131
  }
136
132
  .iui-radio-tile-input:focus-visible + *{
137
133
  z-index:2;
138
- outline-offset:-2px;
134
+ outline-offset:calc(0px - var(--iui-size-3xs));
139
135
  outline:3px solid var(--iui-color-foreground-primary);
140
136
  }
141
137
  @media (forced-colors: active){
@@ -146,7 +142,7 @@
146
142
  @supports not selector(*:focus-visible){
147
143
  .iui-radio-tile-input:focus + *{
148
144
  z-index:2;
149
- outline-offset:-2px;
145
+ outline-offset:calc(0px - var(--iui-size-3xs));
150
146
  outline:3px solid var(--iui-color-foreground-primary);
151
147
  }
152
148
  @media (forced-colors: active){
@@ -159,22 +155,18 @@
159
155
  .iui-radio-tile-icon{
160
156
  display:flex;
161
157
  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);
158
+ width:var(--iui-size-xl);
159
+ height:var(--iui-size-xl);
160
+ fill:var(--iui-color-foreground-4);
161
+ margin:calc(var(--iui-size-s) * 0.5) auto var(--iui-size-s);
162
+ fill:var(--iui-color-foreground-4);
163
+ transition:fill var(--iui-duration-1) ease-out;
167
164
  }
168
165
  @media (forced-colors: active){
169
166
  .iui-radio-tile-icon{
170
167
  fill:CanvasText;
171
168
  }
172
169
  }
173
- @media (prefers-reduced-motion: no-preference){
174
- .iui-radio-tile-icon{
175
- transition:fill 0.2s ease-out;
176
- }
177
- }
178
170
  @media (forced-colors: active){
179
171
  .iui-radio-tile-icon{
180
172
  fill:CanvasText;
@@ -182,18 +174,18 @@
182
174
  }
183
175
 
184
176
  .iui-radio-tile-label{
185
- font-size:14px;
186
- font-weight:600;
187
- line-height:24px;
177
+ font-size:var(--iui-font-size-1);
178
+ font-weight:var(--iui-font-weight-semibold);
179
+ line-height:var(--iui-size-l);
188
180
  text-align:center;
189
181
  word-break:break-word;
190
- color:var(--iui-text-color);
182
+ color:var(--iui-color-foreground-2);
191
183
  }
192
184
 
193
185
  .iui-radio-tile-sublabel{
194
- font-size:12px;
195
- line-height:17px;
186
+ font-size:var(--iui-font-size-0);
187
+ line-height:calc(var(--iui-size-s) * 1.25);
196
188
  text-align:center;
197
189
  word-break:break-word;
198
- color:var(--iui-text-color-muted);
190
+ color:var(--iui-color-foreground-4);
199
191
  }
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,13 @@
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
- cursor:wait;
49
- color:var(--iui-text-color-muted);
48
+ cursor:progress;
49
+ font-style:italic;
50
+ color:var(--iui-color-foreground-4);
50
51
  }
51
52
  .iui-radio-wrapper > .iui-checkbox-label,
52
53
  .iui-radio-wrapper > .iui-radio-label{
@@ -57,17 +58,17 @@
57
58
  .iui-radio-wrapper > .iui-radio-label svg{
58
59
  display:flex;
59
60
  flex-shrink:0;
60
- width:16px;
61
- height:16px;
61
+ width:var(--iui-size-m);
62
+ height:var(--iui-size-m);
62
63
  vertical-align:middle;
63
64
  fill:currentColor;
64
65
  }
65
66
  .iui-radio-wrapper.iui-disabled{
66
67
  cursor:not-allowed;
67
- color:var(--iui-text-color-muted);
68
+ color:var(--iui-color-foreground-4);
68
69
  }
69
70
  .iui-radio-wrapper.iui-disabled svg{
70
- fill:var(--iui-icon-color-actionable-disabled);
71
+ fill:var(--iui-color-foreground-5);
71
72
  }
72
73
  .iui-radio-wrapper.iui-positive{
73
74
  color:var(--iui-color-foreground-positive);
@@ -82,7 +83,7 @@
82
83
  content:"";
83
84
  position:absolute;
84
85
  inset:0;
85
- transition:border-color 0.2s ease-out;
86
+ transition:border-color var(--iui-duration-1) ease-out;
86
87
  border-radius:inherit;
87
88
  border-style:solid;
88
89
  border-width:1px;
@@ -100,15 +101,15 @@
100
101
  --_iui-checkbox-mask-image:var(--_iui-checkbox-unchecked-svg);
101
102
  }
102
103
  .iui-radio:checked{
103
- --_iui-checkbox-border-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-3));
104
+ --_iui-checkbox-border-color:var(--iui-color-foreground-3);
104
105
  --_iui-checkbox-mask-image:var(--_iui-checkbox-checkmark-svg);
105
106
  }
106
107
  .iui-radio:indeterminate{
107
- --_iui-checkbox-border-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-3));
108
+ --_iui-checkbox-border-color:var(--iui-color-foreground-3);
108
109
  --_iui-checkbox-mask-image:var(--_iui-checkbox-indeterminate-svg);
109
110
  }
110
111
  .iui-radio:hover{
111
- --_iui-checkbox-border-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-2));
112
+ --_iui-checkbox-border-color:var(--iui-color-foreground-2);
112
113
  }
113
114
  .iui-radio:focus-visible{
114
115
  outline:2px solid var(--iui-color-foreground-primary);
@@ -121,7 +122,7 @@
121
122
  }
122
123
  }
123
124
  .iui-radio:disabled{
124
- --_iui-checkbox-svg-color:var(--iui-icon-color-actionable-disabled);
125
+ --_iui-checkbox-svg-color:var(--iui-color-foreground-5);
125
126
  --_iui-checkbox-border-color:var(--iui-color-background-border);
126
127
  --_iui-checkbox-background-color:var(--iui-color-background-disabled);
127
128
  cursor:not-allowed;
@@ -132,16 +133,17 @@
132
133
  --_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>');
133
134
  --_iui-checkbox-border-color:transparent;
134
135
  --_iui-checkbox-background-color:transparent;
136
+ outline-width:1px;
135
137
  }
136
138
  .iui-radio.iui-checkbox-visibility:where(:not(:checked):not(:indeterminate)){
137
- --_iui-checkbox-svg-color:var(--iui-icon-color-actionable);
139
+ --_iui-checkbox-svg-color:var(--iui-color-foreground-2);
138
140
  }
139
141
  .iui-radio.iui-checkbox-visibility:where(:hover){
140
142
  --_iui-checkbox-border-color:transparent;
141
- --_iui-checkbox-background-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-6));
143
+ --_iui-checkbox-background-color:var(--iui-color-background-transparent-hover);
142
144
  }
143
145
  .iui-radio.iui-checkbox-visibility:where(:disabled){
144
- --_iui-checkbox-svg-color:var(--iui-icon-color-actionable-disabled);
146
+ --_iui-checkbox-svg-color:var(--iui-color-foreground-5);
145
147
  --_iui-checkbox-background-color:var(--iui-color-background-disabled);
146
148
  }
147
149
  .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:1.2;
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,37 @@
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{
225
+ flex-shrink:0;
226
+ }
227
+ .iui-select-tag-button-icon svg{
219
228
  display:flex;
220
229
  flex-shrink:0;
221
- width:16px;
222
- height:16px;
223
- transition:fill 0.2s ease-out;
230
+ width:var(--iui-size-m);
231
+ height:var(--iui-size-m);
232
+ transition:fill var(--iui-duration-1) ease-out;
224
233
  fill:currentColor;
225
- flex-shrink:0;
226
- }
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
234
  }
231
- .iui-select-button.iui-small .iui-select-tag-button-icon{
235
+ .iui-select-button[data-iui-size=small] .iui-select-tag-button-icon svg{
232
236
  display:flex;
233
237
  flex-shrink:0;
234
- width:12px;
235
- height:12px;
238
+ width:var(--iui-size-s);
239
+ height:var(--iui-size-s);
236
240
  }