@itwin/itwinui-css 1.0.0-dev.0 → 1.0.0-dev.10

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 (245) hide show
  1. package/CHANGELOG.md +26 -0
  2. package/css/alert.css +81 -92
  3. package/css/all.css +2143 -2719
  4. package/css/anchor.css +3 -3
  5. package/css/avatar.css +46 -46
  6. package/css/backdrop.css +6 -4
  7. package/css/badge.css +8 -8
  8. package/css/blockquote.css +6 -6
  9. package/css/breadcrumbs.css +63 -52
  10. package/css/button.css +113 -135
  11. package/css/carousel.css +17 -16
  12. package/css/checkbox.css +27 -22
  13. package/css/code.css +15 -14
  14. package/css/color-picker.css +41 -44
  15. package/css/date-picker.css +59 -88
  16. package/css/dialog.css +32 -32
  17. package/css/expandable-block.css +36 -57
  18. package/css/fieldset.css +7 -7
  19. package/css/file-upload.css +20 -28
  20. package/css/footer.css +35 -35
  21. package/css/global.css +50 -617
  22. package/css/header.css +58 -51
  23. package/css/information-panel.css +38 -32
  24. package/css/input.css +64 -56
  25. package/css/keyboard.css +6 -10
  26. package/css/location-marker.css +32 -18
  27. package/css/menu.css +41 -27
  28. package/css/non-ideal-state.css +12 -12
  29. package/css/progress-indicator.css +37 -35
  30. package/css/radio-tile.css +39 -38
  31. package/css/radio.css +27 -22
  32. package/css/select.css +89 -80
  33. package/css/side-navigation.css +34 -38
  34. package/css/skip-to-content.css +11 -11
  35. package/css/slider.css +166 -55
  36. package/css/stepper.css +17 -17
  37. package/css/surface.css +2 -2
  38. package/css/table.css +180 -144
  39. package/css/tabs.css +61 -47
  40. package/css/tag.css +24 -25
  41. package/css/text.css +24 -24
  42. package/css/tile.css +160 -176
  43. package/css/time-picker.css +16 -14
  44. package/css/toast.css +49 -47
  45. package/css/toggle-switch.css +26 -26
  46. package/css/tooltip.css +6 -10
  47. package/css/tree.css +30 -35
  48. package/css/utils.css +228 -154
  49. package/css/workflow-diagram.css +8 -8
  50. package/package.json +8 -11
  51. package/css/icon.css +0 -117
  52. package/css/textarea.css +0 -96
  53. package/scss/alert/alert.scss +0 -89
  54. package/scss/alert/classes.scss +0 -33
  55. package/scss/alert/index.scss +0 -3
  56. package/scss/anchor/anchor.scss +0 -78
  57. package/scss/anchor/classes.scss +0 -11
  58. package/scss/anchor/index.scss +0 -3
  59. package/scss/avatar/avatar-sizes.scss +0 -23
  60. package/scss/avatar/avatar.scss +0 -215
  61. package/scss/avatar/classes.scss +0 -27
  62. package/scss/avatar/index.scss +0 -3
  63. package/scss/backdrop/backdrop.scss +0 -27
  64. package/scss/backdrop/classes.scss +0 -7
  65. package/scss/backdrop/index.scss +0 -3
  66. package/scss/badge/badge.scss +0 -34
  67. package/scss/badge/classes.scss +0 -7
  68. package/scss/badge/index.scss +0 -3
  69. package/scss/blockquote/blockquote.scss +0 -26
  70. package/scss/blockquote/classes.scss +0 -7
  71. package/scss/blockquote/index.scss +0 -3
  72. package/scss/breadcrumbs/breadcrumbs.scss +0 -119
  73. package/scss/breadcrumbs/classes.scss +0 -31
  74. package/scss/breadcrumbs/index.scss +0 -3
  75. package/scss/button/borderless.scss +0 -36
  76. package/scss/button/button-group.scss +0 -118
  77. package/scss/button/button.scss +0 -119
  78. package/scss/button/classes.scss +0 -80
  79. package/scss/button/default.scss +0 -51
  80. package/scss/button/idea.scss +0 -12
  81. package/scss/button/index.scss +0 -9
  82. package/scss/button/split-button.scss +0 -45
  83. package/scss/button/variant.scss +0 -44
  84. package/scss/carousel/carousel.scss +0 -113
  85. package/scss/carousel/classes.scss +0 -15
  86. package/scss/carousel/index.scss +0 -3
  87. package/scss/checkbox/checkbox.scss +0 -154
  88. package/scss/checkbox/classes.scss +0 -7
  89. package/scss/checkbox/index.scss +0 -3
  90. package/scss/classes.scss +0 -52
  91. package/scss/code/classes.scss +0 -11
  92. package/scss/code/code.scss +0 -16
  93. package/scss/code/codeblock.scss +0 -59
  94. package/scss/code/index.scss +0 -4
  95. package/scss/color-picker/classes.scss +0 -43
  96. package/scss/color-picker/color-picker.scss +0 -241
  97. package/scss/color-picker/index.scss +0 -3
  98. package/scss/date-picker/classes.scss +0 -47
  99. package/scss/date-picker/date-picker.scss +0 -246
  100. package/scss/date-picker/index.scss +0 -3
  101. package/scss/dialog/classes.scss +0 -48
  102. package/scss/dialog/dialog.scss +0 -178
  103. package/scss/dialog/index.scss +0 -3
  104. package/scss/expandable-block/block.scss +0 -165
  105. package/scss/expandable-block/classes.scss +0 -7
  106. package/scss/expandable-block/index.scss +0 -3
  107. package/scss/fieldset/classes.scss +0 -7
  108. package/scss/fieldset/fieldset.scss +0 -29
  109. package/scss/fieldset/index.scss +0 -3
  110. package/scss/file-upload/classes.scss +0 -7
  111. package/scss/file-upload/file-upload.scss +0 -80
  112. package/scss/file-upload/index.scss +0 -3
  113. package/scss/footer/classes.scss +0 -7
  114. package/scss/footer/footer.scss +0 -55
  115. package/scss/footer/index.scss +0 -3
  116. package/scss/header/classes.scss +0 -79
  117. package/scss/header/header-buttons.scss +0 -316
  118. package/scss/header/header.scss +0 -75
  119. package/scss/header/index.scss +0 -4
  120. package/scss/icon/classes.scss +0 -27
  121. package/scss/icon/icon.scss +0 -65
  122. package/scss/icon/index.scss +0 -3
  123. package/scss/index.scss +0 -50
  124. package/scss/information-panel/classes.scss +0 -27
  125. package/scss/information-panel/index.scss +0 -3
  126. package/scss/information-panel/information-panel.scss +0 -215
  127. package/scss/input/classes.scss +0 -15
  128. package/scss/input/index.scss +0 -4
  129. package/scss/input/input-with-icon.scss +0 -37
  130. package/scss/input/input.scss +0 -70
  131. package/scss/keyboard/classes.scss +0 -7
  132. package/scss/keyboard/index.scss +0 -3
  133. package/scss/keyboard/keyboard.scss +0 -29
  134. package/scss/location-marker/classes.scss +0 -15
  135. package/scss/location-marker/data-rich.scss +0 -49
  136. package/scss/location-marker/default.scss +0 -19
  137. package/scss/location-marker/index.scss +0 -6
  138. package/scss/location-marker/location-marker.scss +0 -11
  139. package/scss/location-marker/me.scss +0 -29
  140. package/scss/menu/classes.scss +0 -21
  141. package/scss/menu/index.scss +0 -3
  142. package/scss/menu/menu.scss +0 -185
  143. package/scss/non-ideal-state/classes.scss +0 -7
  144. package/scss/non-ideal-state/index.scss +0 -3
  145. package/scss/non-ideal-state/non-ideal-state.scss +0 -56
  146. package/scss/progress-indicator/classes.scss +0 -31
  147. package/scss/progress-indicator/index.scss +0 -5
  148. package/scss/progress-indicator/linear.scss +0 -108
  149. package/scss/progress-indicator/overlay.scss +0 -51
  150. package/scss/progress-indicator/radial.scss +0 -155
  151. package/scss/radio/classes.scss +0 -7
  152. package/scss/radio/index.scss +0 -3
  153. package/scss/radio/radio.scss +0 -18
  154. package/scss/radio-tile/classes.scss +0 -31
  155. package/scss/radio-tile/index.scss +0 -3
  156. package/scss/radio-tile/radio-tile.scss +0 -167
  157. package/scss/select/classes.scss +0 -27
  158. package/scss/select/index.scss +0 -3
  159. package/scss/select/select.scss +0 -124
  160. package/scss/side-navigation/classes.scss +0 -15
  161. package/scss/side-navigation/index.scss +0 -3
  162. package/scss/side-navigation/side-navigation.scss +0 -202
  163. package/scss/skip-to-content/classes.scss +0 -7
  164. package/scss/skip-to-content/index.scss +0 -3
  165. package/scss/skip-to-content/skip-to-content.scss +0 -40
  166. package/scss/slider/classes.scss +0 -27
  167. package/scss/slider/index.scss +0 -3
  168. package/scss/slider/slider.scss +0 -135
  169. package/scss/stepper/classes.scss +0 -32
  170. package/scss/stepper/index.scss +0 -3
  171. package/scss/stepper/stepper.scss +0 -151
  172. package/scss/style/baseline.scss +0 -4
  173. package/scss/style/color.scss +0 -39
  174. package/scss/style/elevation.scss +0 -11
  175. package/scss/style/global-variables.scss +0 -23
  176. package/scss/style/global.scss +0 -69
  177. package/scss/style/icon-sizes.scss +0 -14
  178. package/scss/style/index.scss +0 -11
  179. package/scss/style/space.scss +0 -11
  180. package/scss/style/speed.scss +0 -8
  181. package/scss/style/theme.scss +0 -443
  182. package/scss/style/typography.scss +0 -55
  183. package/scss/surface/classes.scss +0 -7
  184. package/scss/surface/index.scss +0 -3
  185. package/scss/surface/surface.scss +0 -17
  186. package/scss/table/classes.scss +0 -64
  187. package/scss/table/column-filter.scss +0 -34
  188. package/scss/table/index.scss +0 -6
  189. package/scss/table/paginator.scss +0 -79
  190. package/scss/table/sizes.scss +0 -31
  191. package/scss/table/table-densities.scss +0 -11
  192. package/scss/table/table.scss +0 -482
  193. package/scss/tabs/borderless.scss +0 -59
  194. package/scss/tabs/classes.scss +0 -44
  195. package/scss/tabs/default.scss +0 -89
  196. package/scss/tabs/index.scss +0 -6
  197. package/scss/tabs/pill.scss +0 -38
  198. package/scss/tabs/tabs.scss +0 -192
  199. package/scss/tag/classes.scss +0 -30
  200. package/scss/tag/index.scss +0 -3
  201. package/scss/tag/tag.scss +0 -89
  202. package/scss/text/classes.scss +0 -40
  203. package/scss/text/index.scss +0 -5
  204. package/scss/text/mixins.scss +0 -43
  205. package/scss/text/muted.scss +0 -7
  206. package/scss/text/skeleton.scss +0 -43
  207. package/scss/textarea/classes.scss +0 -7
  208. package/scss/textarea/index.scss +0 -3
  209. package/scss/textarea/textarea.scss +0 -15
  210. package/scss/tile/classes.scss +0 -51
  211. package/scss/tile/index.scss +0 -3
  212. package/scss/tile/tile.scss +0 -340
  213. package/scss/time-picker/classes.scss +0 -16
  214. package/scss/time-picker/index.scss +0 -3
  215. package/scss/time-picker/time-picker.scss +0 -63
  216. package/scss/toast/categories.scss +0 -22
  217. package/scss/toast/classes.scss +0 -98
  218. package/scss/toast/index.scss +0 -4
  219. package/scss/toast/toast.scss +0 -70
  220. package/scss/toggle-switch/classes.scss +0 -11
  221. package/scss/toggle-switch/index.scss +0 -3
  222. package/scss/toggle-switch/toggle-switch.scss +0 -203
  223. package/scss/tooltip/classes.scss +0 -24
  224. package/scss/tooltip/index.scss +0 -3
  225. package/scss/tooltip/tooltip.scss +0 -40
  226. package/scss/tree/classes.scss +0 -19
  227. package/scss/tree/index.scss +0 -3
  228. package/scss/tree/tree.scss +0 -126
  229. package/scss/utils/classes.scss +0 -6
  230. package/scss/utils/index.scss +0 -6
  231. package/scss/utils/input-container/classes.scss +0 -39
  232. package/scss/utils/input-container/index.scss +0 -3
  233. package/scss/utils/input-container/input-container.scss +0 -285
  234. package/scss/utils/mixins.scss +0 -171
  235. package/scss/utils/notification-marker/classes.scss +0 -9
  236. package/scss/utils/notification-marker/index.scss +0 -3
  237. package/scss/utils/notification-marker/notification-marker.scss +0 -55
  238. package/scss/utils/popover/classes.scss +0 -7
  239. package/scss/utils/popover/index.scss +0 -3
  240. package/scss/utils/popover/popover.scss +0 -21
  241. package/scss/variables.scss +0 -3
  242. package/scss/workflow-diagram/classes.scss +0 -15
  243. package/scss/workflow-diagram/index.scss +0 -3
  244. package/scss/workflow-diagram/workflow-diagram.scss +0 -64
  245. package/src/index.scss +0 -50
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-icons-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-icons-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{
@@ -75,12 +71,14 @@
75
71
  }
76
72
  }
77
73
  .iui-radio-tile-input:checked + *::after{
74
+ display:flex;
75
+ flex-shrink:0;
76
+ width:var(--iui-size-m);
77
+ height:var(--iui-size-m);
78
78
  content:"";
79
- width:16px;
80
- height:16px;
81
79
  position:absolute;
82
- top:8px;
83
- right:8px;
80
+ top:var(--iui-size-xs);
81
+ right:var(--iui-size-xs);
84
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>');
85
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>');
86
84
  background-color:var(--iui-color-foreground-primary);
@@ -97,7 +95,7 @@
97
95
  background-color:var(--iui-color-background-disabled);
98
96
  }
99
97
  .iui-radio-tile-input:disabled + *::after{
100
- background-color:var(--iui-icons-color-actionable-disabled);
98
+ background-color:var(--iui-color-foreground-5);
101
99
  }
102
100
  @media (forced-colors: active){
103
101
  .iui-radio-tile-input:disabled + *::after{
@@ -106,7 +104,7 @@
106
104
  }
107
105
  .iui-radio-tile-input:disabled + * .iui-radio-tile-icon{
108
106
  filter:grayscale(100%);
109
- fill:var(--iui-icons-color-actionable-disabled);
107
+ fill:var(--iui-color-foreground-5);
110
108
  }
111
109
  @media (forced-colors: active){
112
110
  .iui-radio-tile-input:disabled + * .iui-radio-tile-icon{
@@ -114,7 +112,7 @@
114
112
  }
115
113
  }
116
114
  .iui-radio-tile-input:disabled + * .iui-radio-tile-label{
117
- color:var(--iui-text-color-muted);
115
+ color:var(--iui-color-foreground-4);
118
116
  }
119
117
  @media (forced-colors: active){
120
118
  .iui-radio-tile-input:disabled + * .iui-radio-tile-label,
@@ -124,7 +122,7 @@
124
122
  }
125
123
  .iui-radio-tile-input:disabled:checked + *{
126
124
  z-index:3;
127
- 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);
128
126
  }
129
127
  @media (forced-colors: active){
130
128
  .iui-radio-tile-input:disabled:checked + *{
@@ -133,7 +131,7 @@
133
131
  }
134
132
  .iui-radio-tile-input:focus-visible + *{
135
133
  z-index:2;
136
- outline-offset:-2px;
134
+ outline-offset:calc(0px - var(--iui-size-3xs));
137
135
  outline:3px solid var(--iui-color-foreground-primary);
138
136
  }
139
137
  @media (forced-colors: active){
@@ -144,7 +142,7 @@
144
142
  @supports not selector(*:focus-visible){
145
143
  .iui-radio-tile-input:focus + *{
146
144
  z-index:2;
147
- outline-offset:-2px;
145
+ outline-offset:calc(0px - var(--iui-size-3xs));
148
146
  outline:3px solid var(--iui-color-foreground-primary);
149
147
  }
150
148
  @media (forced-colors: active){
@@ -155,15 +153,18 @@
155
153
  }
156
154
 
157
155
  .iui-radio-tile-icon{
158
- width:32px;
159
- height:32px;
160
- display:block;
161
- margin:6px auto 11px;
162
- fill:var(--iui-icons-color);
156
+ display:flex;
157
+ flex-shrink:0;
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;
163
164
  }
164
- @media (prefers-reduced-motion: no-preference){
165
+ @media (forced-colors: active){
165
166
  .iui-radio-tile-icon{
166
- transition:fill 0.2s ease-out;
167
+ fill:CanvasText;
167
168
  }
168
169
  }
169
170
  @media (forced-colors: active){
@@ -173,18 +174,18 @@
173
174
  }
174
175
 
175
176
  .iui-radio-tile-label{
176
- font-size:14px;
177
- font-weight:600;
178
- line-height:22px;
177
+ font-size:var(--iui-font-size-1);
178
+ font-weight:var(--iui-font-weight-semibold);
179
+ line-height:var(--iui-size-l);
179
180
  text-align:center;
180
181
  word-break:break-word;
181
- color:var(--iui-text-color);
182
+ color:var(--iui-color-foreground-2);
182
183
  }
183
184
 
184
185
  .iui-radio-tile-sublabel{
185
- font-size:12px;
186
- line-height:15px;
186
+ font-size:var(--iui-font-size-0);
187
+ line-height:calc(var(--iui-size-s) * 1.25);
187
188
  text-align:center;
188
189
  word-break:break-word;
189
- color:var(--iui-text-color-muted);
190
+ color:var(--iui-color-foreground-4);
190
191
  }
package/css/radio.css CHANGED
@@ -7,19 +7,20 @@
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
+ display:flex;
14
+ flex-shrink:0;
15
+ width:var(--iui-size-m);
16
+ height:var(--iui-size-m);
13
17
  -webkit-appearance:none;
14
18
  -moz-appearance:none;
15
19
  appearance:none;
16
20
  margin:0;
17
- width:16px;
18
- height:16px;
19
21
  position:relative;
20
- border-radius:4px;
22
+ border-radius:var(--iui-border-radius-1);
21
23
  background-color:var(--_iui-checkbox-background-color);
22
- flex-shrink:0;
23
24
  cursor:pointer;
24
25
  border-radius:50%;
25
26
  }
@@ -30,7 +31,7 @@
30
31
  vertical-align:baseline;
31
32
  display:flex;
32
33
  align-items:center;
33
- font-size:14px;
34
+ font-size:var(--iui-font-size-1);
34
35
  width:-webkit-fit-content;
35
36
  width:-moz-fit-content;
36
37
  width:fit-content;
@@ -40,12 +41,13 @@
40
41
  user-select:none;
41
42
  position:relative;
42
43
  cursor:pointer;
43
- color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-2));
44
- gap:8px;
44
+ color:var(--iui-color-foreground-2);
45
+ gap:var(--iui-size-xs);
45
46
  }
46
47
  .iui-radio-wrapper.iui-loading{
47
- cursor:wait;
48
- color:var(--iui-text-color-muted);
48
+ cursor:progress;
49
+ font-style:italic;
50
+ color:var(--iui-color-foreground-4);
49
51
  }
50
52
  .iui-radio-wrapper > .iui-checkbox-label,
51
53
  .iui-radio-wrapper > .iui-radio-label{
@@ -54,17 +56,19 @@
54
56
  }
55
57
  .iui-radio-wrapper > .iui-checkbox-label svg,
56
58
  .iui-radio-wrapper > .iui-radio-label svg{
57
- width:16px;
58
- height:16px;
59
+ display:flex;
60
+ flex-shrink:0;
61
+ width:var(--iui-size-m);
62
+ height:var(--iui-size-m);
59
63
  vertical-align:middle;
60
64
  fill:currentColor;
61
65
  }
62
66
  .iui-radio-wrapper.iui-disabled{
63
67
  cursor:not-allowed;
64
- color:var(--iui-text-color-muted);
68
+ color:var(--iui-color-foreground-4);
65
69
  }
66
70
  .iui-radio-wrapper.iui-disabled svg{
67
- fill:var(--iui-icons-color-actionable-disabled);
71
+ fill:var(--iui-color-foreground-5);
68
72
  }
69
73
  .iui-radio-wrapper.iui-positive{
70
74
  color:var(--iui-color-foreground-positive);
@@ -79,7 +83,7 @@
79
83
  content:"";
80
84
  position:absolute;
81
85
  inset:0;
82
- transition:border-color 0.2s ease-out;
86
+ transition:border-color var(--iui-duration-1) ease-out;
83
87
  border-radius:inherit;
84
88
  border-style:solid;
85
89
  border-width:1px;
@@ -97,15 +101,15 @@
97
101
  --_iui-checkbox-mask-image:var(--_iui-checkbox-unchecked-svg);
98
102
  }
99
103
  .iui-radio:checked{
100
- --_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);
101
105
  --_iui-checkbox-mask-image:var(--_iui-checkbox-checkmark-svg);
102
106
  }
103
107
  .iui-radio:indeterminate{
104
- --_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);
105
109
  --_iui-checkbox-mask-image:var(--_iui-checkbox-indeterminate-svg);
106
110
  }
107
111
  .iui-radio:hover{
108
- --_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);
109
113
  }
110
114
  .iui-radio:focus-visible{
111
115
  outline:2px solid var(--iui-color-foreground-primary);
@@ -118,7 +122,7 @@
118
122
  }
119
123
  }
120
124
  .iui-radio:disabled{
121
- --_iui-checkbox-svg-color:var(--iui-icons-color-actionable-disabled);
125
+ --_iui-checkbox-svg-color:var(--iui-color-foreground-5);
122
126
  --_iui-checkbox-border-color:var(--iui-color-background-border);
123
127
  --_iui-checkbox-background-color:var(--iui-color-background-disabled);
124
128
  cursor:not-allowed;
@@ -129,16 +133,17 @@
129
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>');
130
134
  --_iui-checkbox-border-color:transparent;
131
135
  --_iui-checkbox-background-color:transparent;
136
+ outline-width:1px;
132
137
  }
133
138
  .iui-radio.iui-checkbox-visibility:where(:not(:checked):not(:indeterminate)){
134
- --_iui-checkbox-svg-color:var(--iui-icons-color-actionable);
139
+ --_iui-checkbox-svg-color:var(--iui-color-foreground-2);
135
140
  }
136
141
  .iui-radio.iui-checkbox-visibility:where(:hover){
137
142
  --_iui-checkbox-border-color:transparent;
138
- --_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);
139
144
  }
140
145
  .iui-radio.iui-checkbox-visibility:where(:disabled){
141
- --_iui-checkbox-svg-color:var(--iui-icons-color-actionable-disabled);
146
+ --_iui-checkbox-svg-color:var(--iui-color-foreground-5);
142
147
  --_iui-checkbox-background-color:var(--iui-color-background-disabled);
143
148
  }
144
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:38px;
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,55 +33,56 @@
31
33
  outline-offset:-2px;
32
34
  }
33
35
  }
34
- .iui-select-button.iui-small{
35
- padding-top:1.5px;
36
- padding-bottom:1.5px;
37
- min-height:27px;
38
- }
39
- .iui-select-button.iui-large{
40
- padding-top:12.5px;
41
- padding-bottom:12.5px;
42
- min-height:49px;
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
- width:16px;
53
- height:16px;
43
+ display:flex;
44
+ flex-shrink:0;
45
+ width:var(--iui-size-m);
46
+ height:var(--iui-size-m);
54
47
  flex:0 0 auto;
55
- fill:var(--iui-icons-color-actionable);
48
+ fill:var(--iui-color-foreground-2);
56
49
  fill:currentColor;
57
50
  }
58
51
  .iui-select-button .iui-icon + .iui-content{
59
- margin-left:8px;
52
+ margin-left:var(--iui-size-xs);
60
53
  }
61
54
  .iui-select-button .iui-content{
62
55
  overflow:hidden;
63
56
  white-space:nowrap;
64
57
  text-overflow:ellipsis;
58
+ min-height:var(--iui-size-l);
65
59
  }
66
60
  .iui-select-button.iui-placeholder{
67
- 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);
68
71
  }
69
72
 
70
73
  .iui-select-tag-container{
71
74
  position:absolute;
72
- inset:0 40px 0 12px;
75
+ inset:0 calc(var(--iui-size-m) + var(--iui-size-l)) 0 var(--iui-size-s);
73
76
  height:100%;
74
77
  display:flex;
75
78
  align-items:center;
76
- gap:4px;
79
+ gap:var(--iui-size-2xs);
77
80
  overflow:hidden;
78
81
  }
79
82
  .iui-select-tag-container > * + *{
80
- margin-left:4px;
83
+ margin-left:var(--iui-size-2xs);
81
84
  }
82
- @supports (gap: 4px){
85
+ @supports (gap: var(--iui-size-2xs)){
83
86
  .iui-select-tag-container > * + *{
84
87
  margin-left:0;
85
88
  }
@@ -91,29 +94,28 @@
91
94
  user-select:all;
92
95
  text-transform:lowercase;
93
96
  display:inline-flex;
94
- height:33px;
95
- margin-top:3px;
96
- margin-bottom:3px;
97
- border-radius:9999px;
98
- 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);
99
101
  align-items:center;
100
- transition:border-color 0.2s ease-out;
101
- font-size:14px;
102
+ transition:border-color var(--iui-duration-1) ease-out;
103
+ font-size:var(--iui-font-size-1);
102
104
  text-transform:none;
103
105
  cursor:default;
104
106
  -webkit-tap-highlight-color:transparent;
105
- border:1px solid rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-4));
107
+ border:1px solid var(--iui-color-foreground-4);
106
108
  background-color:var(--iui-color-background-1);
107
- color:var(--iui-text-color);
109
+ color:var(--iui-color-foreground-2);
108
110
  margin-top:0;
109
111
  margin-bottom:0;
110
112
  display:inline-flex;
111
113
  align-items:center;
112
114
  height:80%;
113
- max-height:33px;
115
+ max-height:calc(var(--iui-size-s) * 3);
114
116
  }
115
117
  .iui-select-tag:hover{
116
- border-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-1));
118
+ border-color:var(--iui-color-foreground-1);
117
119
  }
118
120
 
119
121
  .iui-select-tag-label{
@@ -121,22 +123,22 @@
121
123
  padding:0;
122
124
  border:none;
123
125
  vertical-align:baseline;
124
- font-size:14px;
125
- font-weight:400;
126
- line-height:22px;
126
+ font-size:var(--iui-font-size-1);
127
+ font-weight:var(--iui-font-weight-normal);
128
+ line-height:var(--iui-size-l);
127
129
  white-space:nowrap;
128
130
  text-overflow:ellipsis;
129
131
  overflow:hidden;
130
- margin:0 4px 0 8px;
132
+ margin:0 var(--iui-size-2xs) 0 var(--iui-size-xs);
131
133
  display:inline-flex;
132
134
  align-items:center;
133
135
  }
134
136
  .iui-select-tag-label:only-child{
135
- margin:0 8px;
137
+ margin:0 var(--iui-size-xs);
136
138
  }
137
- .iui-select-button.iui-small .iui-select-tag-label{
138
- font-size:12px;
139
- line-height:16px;
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);
140
142
  }
141
143
 
142
144
  .iui-select-tag-button{
@@ -146,14 +148,15 @@
146
148
  vertical-align:baseline;
147
149
  font-family:inherit;
148
150
  display:inline-flex;
151
+ flex-shrink:0;
149
152
  align-items:center;
150
153
  vertical-align:middle;
151
154
  justify-content:center;
152
155
  position:relative;
153
- border-radius:4px;
154
- line-height:22px;
155
- font-size:14px;
156
- 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);
157
160
  -webkit-user-select:none;
158
161
  -moz-user-select:none;
159
162
  -ms-user-select:none;
@@ -164,24 +167,29 @@
164
167
  background:var(--_iui-button-background-color);
165
168
  color:var(--_iui-button-text-color);
166
169
  gap:var(--_iui-button-gap);
167
- 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);
168
173
  padding-inline:var(--_iui-button-padding-inline);
169
- 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;
170
175
  -webkit-tap-highlight-color:transparent;
171
176
  text-decoration:none;
172
- --_iui-button-gap:8px;
173
- --_iui-button-height:38px;
174
- --_iui-button-padding-inline:16px;
175
- --_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);
176
182
  --_iui-button-background-color:transparent;
177
183
  --_iui-button-border-color:transparent;
178
- --_iui-button-icon-margin-x:3px;
179
- --_iui-button-gap:8px;
180
- --_iui-button-height:38px;
181
- --_iui-button-padding-inline:16px;
182
- --_iui-button-padding-inline:8px;
183
- border-radius:50%;
184
- 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;
185
193
  height:100%;
186
194
  aspect-ratio:1/1;
187
195
  }
@@ -196,35 +204,36 @@
196
204
  }
197
205
  }
198
206
  .iui-select-tag-button:where(:hover, :active){
199
- --_iui-button-text-color:var(--iui-color-foreground-body);
200
- --_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);
201
209
  }
202
210
  .iui-select-tag-button:where(:focus){
203
211
  outline-offset:-1px;
204
212
  outline-width:1px;
205
213
  }
206
214
  .iui-select-tag-button:where([disabled], :disabled, [aria-disabled="true"]){
207
- --_iui-button-text-color:var(--iui-text-color-placeholder);
215
+ --_iui-button-text-color:var(--iui-color-foreground-5);
208
216
  --_iui-button-background-color:transparent;
209
217
  --_iui-button-border-color:transparent;
210
218
  }
211
- .iui-select-button.iui-small .iui-select-tag-button{
212
- font-size:12px;
213
- line-height:16px;
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);
214
222
  }
215
223
 
216
224
  .iui-select-tag-button-icon{
217
- width:16px;
218
- height:16px;
219
- transition:fill 0.2s ease-out;
225
+ display:flex;
226
+ flex-shrink:0;
227
+ width:var(--iui-size-m);
228
+ height:var(--iui-size-m);
229
+ transition:fill var(--iui-duration-1) ease-out;
220
230
  fill:currentColor;
231
+ margin-block:var(--iui-size-2xs);
221
232
  flex-shrink:0;
222
233
  }
223
- .iui-select-tag-button-icon:only-child{
224
- margin-left:var(--_iui-button-icon-margin-x);
225
- margin-right:var(--_iui-button-icon-margin-x);
226
- }
227
- .iui-select-button.iui-small .iui-select-tag-button-icon{
228
- width:12px;
229
- height:12px;
234
+ .iui-select-button[data-iui-size=small] .iui-select-tag-button-icon{
235
+ display:flex;
236
+ flex-shrink:0;
237
+ width:var(--iui-size-s);
238
+ height:var(--iui-size-s);
230
239
  }