@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/CHANGELOG.md CHANGED
@@ -1,5 +1,31 @@
1
1
  # Changelog
2
2
 
3
+ ### [0.63.1](https://www.github.com/iTwin/iTwinUI/compare/v0.63.0...v0.63.1) (2022-08-11)
4
+
5
+ ### Fixes
6
+
7
+ * **Codeblock:** Striping with horizontal scroll ([#730](https://www.github.com/iTwin/iTwinUI/issues/730)) ([d2de81c](https://www.github.com/iTwin/iTwinUI/commit/d2de81caa0d77ebe4c3398fa733bdf27295a9981))
8
+ * **Dialog:** Changed `space-between` inside title bar ([#729](https://www.github.com/iTwin/iTwinUI/issues/729)) ([c6e6dc9](https://www.github.com/iTwin/iTwinUI/commit/c6e6dc977c2791d4ac4ef7498b3495cd5ef6d5c6))
9
+ * **Tabs:** Add max size for button within tab list ([#703](https://www.github.com/iTwin/iTwinUI/issues/703)) ([e6d5d1f](https://www.github.com/iTwin/iTwinUI/commit/e6d5d1f660dd4deee808831680915980f4032c57))
10
+
11
+ ## [0.63.0](https://www.github.com/iTwin/iTwinUI/compare/v0.62.0...v0.63.0) (2022-08-01)
12
+
13
+ ### What's new
14
+
15
+ * **Footer:** Footer refactor for better customization ([#717](https://www.github.com/iTwin/iTwinUI/issues/717)) ([aa04c38](https://www.github.com/iTwin/iTwinUI/commit/aa04c38fabecaafebe35e5ad42934e5544139094))
16
+
17
+
18
+ ### Fixes
19
+
20
+ * **Table:** Zebra stripes content no longer goes on top of stick column ([#727](https://www.github.com/iTwin/iTwinUI/issues/727)) ([152bede](https://www.github.com/iTwin/iTwinUI/commit/152bede43af3ae6b922d4b14dc01c693f7c81366))
21
+
22
+ ## [0.62.0](https://www.github.com/iTwin/iTwinUI/compare/v0.61.0...v0.62.0) (2022-07-27)
23
+
24
+ ### What's new
25
+
26
+ * **Slider:** Add vertical slider ([#707](https://www.github.com/iTwin/iTwinUI/issues/707)) ([2e9b150](https://www.github.com/iTwin/iTwinUI/commit/2e9b15026a7201be9e431ec0e6243436bb9d6f2a))
27
+ * **Tile:** Add new status states ([#689](https://www.github.com/iTwin/iTwinUI/issues/689)) ([db53ee8](https://www.github.com/iTwin/iTwinUI/commit/db53ee8839589cc51c7095794698375a616527c6))
28
+
3
29
  ## [0.61.0](https://www.github.com/iTwin/iTwinUI/compare/v0.60.0...v0.61.0) (2022-06-28)
4
30
 
5
31
  ### What's new
package/css/alert.css CHANGED
@@ -7,11 +7,11 @@
7
7
  padding:0;
8
8
  border:none;
9
9
  vertical-align:baseline;
10
- border-radius:4px;
10
+ border-radius:var(--iui-border-radius-1);
11
11
  display:flex;
12
12
  align-items:center;
13
13
  border:1px solid var(--iui-color-background-5);
14
- color:var(--iui-text-color);
14
+ color:var(--iui-color-foreground-2);
15
15
  background-color:var(--iui-color-background-1);
16
16
  }
17
17
  @media (forced-colors: active){
@@ -32,13 +32,13 @@
32
32
  padding:0;
33
33
  border:none;
34
34
  vertical-align:baseline;
35
- border-radius:4px;
35
+ border-radius:var(--iui-border-radius-1);
36
36
  display:flex;
37
37
  align-items:center;
38
38
  border:1px solid var(--iui-color-background-5);
39
- color:var(--iui-text-color);
39
+ color:var(--iui-color-foreground-2);
40
40
  background-color:var(--iui-color-background-1);
41
- background:linear-gradient(rgba(var(--iui-color-foreground-positive-rgb), var(--iui-opacity-6)), rgba(var(--iui-color-foreground-positive-rgb), var(--iui-opacity-6))), linear-gradient(var(--iui-color-background-1), var(--iui-color-background-1));
41
+ background-color:var(--iui-color-background-subtle-positive);
42
42
  border-color:var(--iui-color-foreground-positive);
43
43
  }
44
44
  @media (forced-colors: active){
@@ -54,18 +54,18 @@
54
54
  left:0;
55
55
  }
56
56
  .iui-alert-positive .iui-alert-icon{
57
- fill:var(--iui-icons-color-positive);
57
+ fill:var(--iui-color-foreground-positive);
58
58
  }
59
59
  .iui-alert-positive .iui-alert-message::-moz-selection, .iui-alert-positive .iui-alert-message *::-moz-selection{
60
- background-color:rgba(var(--iui-color-foreground-positive-rgb), var(--iui-opacity-5));
60
+ background-color:hsl(var(--iui-color-foreground-positive-hsl)/var(--iui-opacity-5));
61
61
  }
62
62
  .iui-alert-positive .iui-alert-message::selection,
63
63
  .iui-alert-positive .iui-alert-message *::selection{
64
- background-color:rgba(var(--iui-color-foreground-positive-rgb), var(--iui-opacity-5));
64
+ background-color:hsl(var(--iui-color-foreground-positive-hsl)/var(--iui-opacity-5));
65
65
  }
66
66
  .iui-alert-positive .iui-alert-link{
67
67
  color:var(--iui-color-foreground-positive);
68
- -webkit-tap-highlight-color:rgba(var(--iui-color-foreground-positive-rgb), var(--iui-opacity-5));
68
+ -webkit-tap-highlight-color:hsl(var(--iui-color-foreground-positive-hsl)/var(--iui-opacity-6));
69
69
  }
70
70
  .iui-alert-positive .iui-alert-link:focus-visible{
71
71
  outline:1px solid var(--iui-color-foreground-positive);
@@ -78,14 +78,14 @@
78
78
  }
79
79
  }
80
80
  .iui-alert-positive .iui-alert-link::-moz-selection, .iui-alert-positive .iui-alert-link *::-moz-selection{
81
- background-color:rgba(var(--iui-color-foreground-positive-rgb), var(--iui-opacity-5));
81
+ background-color:hsl(var(--iui-color-foreground-positive-hsl)/var(--iui-opacity-5));
82
82
  }
83
83
  .iui-alert-positive .iui-alert-link::selection,
84
84
  .iui-alert-positive .iui-alert-link *::selection{
85
- background-color:rgba(var(--iui-color-foreground-positive-rgb), var(--iui-opacity-5));
85
+ background-color:hsl(var(--iui-color-foreground-positive-hsl)/var(--iui-opacity-5));
86
86
  }
87
87
  .iui-alert-positive .iui-alert-link:hover{
88
- color:var(--iui-color-foreground-positive-overlay);
88
+ color:var(--iui-color-foreground-positive-hover);
89
89
  }
90
90
  .iui-alert-positive .iui-alert-button{
91
91
  outline-color:var(--iui-color-foreground-positive);
@@ -96,13 +96,13 @@
96
96
  padding:0;
97
97
  border:none;
98
98
  vertical-align:baseline;
99
- border-radius:4px;
99
+ border-radius:var(--iui-border-radius-1);
100
100
  display:flex;
101
101
  align-items:center;
102
102
  border:1px solid var(--iui-color-background-5);
103
- color:var(--iui-text-color);
103
+ color:var(--iui-color-foreground-2);
104
104
  background-color:var(--iui-color-background-1);
105
- background:linear-gradient(rgba(var(--iui-color-foreground-negative-rgb), var(--iui-opacity-6)), rgba(var(--iui-color-foreground-negative-rgb), var(--iui-opacity-6))), linear-gradient(var(--iui-color-background-1), var(--iui-color-background-1));
105
+ background-color:var(--iui-color-background-subtle-negative);
106
106
  border-color:var(--iui-color-foreground-negative);
107
107
  }
108
108
  @media (forced-colors: active){
@@ -118,18 +118,18 @@
118
118
  left:0;
119
119
  }
120
120
  .iui-alert-negative .iui-alert-icon{
121
- fill:var(--iui-icons-color-negative);
121
+ fill:var(--iui-color-foreground-negative);
122
122
  }
123
123
  .iui-alert-negative .iui-alert-message::-moz-selection, .iui-alert-negative .iui-alert-message *::-moz-selection{
124
- background-color:rgba(var(--iui-color-foreground-negative-rgb), var(--iui-opacity-5));
124
+ background-color:hsl(var(--iui-color-foreground-negative-hsl)/var(--iui-opacity-5));
125
125
  }
126
126
  .iui-alert-negative .iui-alert-message::selection,
127
127
  .iui-alert-negative .iui-alert-message *::selection{
128
- background-color:rgba(var(--iui-color-foreground-negative-rgb), var(--iui-opacity-5));
128
+ background-color:hsl(var(--iui-color-foreground-negative-hsl)/var(--iui-opacity-5));
129
129
  }
130
130
  .iui-alert-negative .iui-alert-link{
131
131
  color:var(--iui-color-foreground-negative);
132
- -webkit-tap-highlight-color:rgba(var(--iui-color-foreground-negative-rgb), var(--iui-opacity-5));
132
+ -webkit-tap-highlight-color:hsl(var(--iui-color-foreground-negative-hsl)/var(--iui-opacity-6));
133
133
  }
134
134
  .iui-alert-negative .iui-alert-link:focus-visible{
135
135
  outline:1px solid var(--iui-color-foreground-negative);
@@ -142,14 +142,14 @@
142
142
  }
143
143
  }
144
144
  .iui-alert-negative .iui-alert-link::-moz-selection, .iui-alert-negative .iui-alert-link *::-moz-selection{
145
- background-color:rgba(var(--iui-color-foreground-negative-rgb), var(--iui-opacity-5));
145
+ background-color:hsl(var(--iui-color-foreground-negative-hsl)/var(--iui-opacity-5));
146
146
  }
147
147
  .iui-alert-negative .iui-alert-link::selection,
148
148
  .iui-alert-negative .iui-alert-link *::selection{
149
- background-color:rgba(var(--iui-color-foreground-negative-rgb), var(--iui-opacity-5));
149
+ background-color:hsl(var(--iui-color-foreground-negative-hsl)/var(--iui-opacity-5));
150
150
  }
151
151
  .iui-alert-negative .iui-alert-link:hover{
152
- color:var(--iui-color-foreground-negative-overlay);
152
+ color:var(--iui-color-foreground-negative-hover);
153
153
  }
154
154
  .iui-alert-negative .iui-alert-button{
155
155
  outline-color:var(--iui-color-foreground-negative);
@@ -160,13 +160,13 @@
160
160
  padding:0;
161
161
  border:none;
162
162
  vertical-align:baseline;
163
- border-radius:4px;
163
+ border-radius:var(--iui-border-radius-1);
164
164
  display:flex;
165
165
  align-items:center;
166
166
  border:1px solid var(--iui-color-background-5);
167
- color:var(--iui-text-color);
167
+ color:var(--iui-color-foreground-2);
168
168
  background-color:var(--iui-color-background-1);
169
- background:linear-gradient(rgba(var(--iui-color-foreground-warning-rgb), var(--iui-opacity-6)), rgba(var(--iui-color-foreground-warning-rgb), var(--iui-opacity-6))), linear-gradient(var(--iui-color-background-1), var(--iui-color-background-1));
169
+ background-color:var(--iui-color-background-subtle-warning);
170
170
  border-color:var(--iui-color-foreground-warning);
171
171
  }
172
172
  @media (forced-colors: active){
@@ -182,18 +182,18 @@
182
182
  left:0;
183
183
  }
184
184
  .iui-alert-warning .iui-alert-icon{
185
- fill:var(--iui-icons-color-warning);
185
+ fill:var(--iui-color-foreground-warning);
186
186
  }
187
187
  .iui-alert-warning .iui-alert-message::-moz-selection, .iui-alert-warning .iui-alert-message *::-moz-selection{
188
- background-color:rgba(var(--iui-color-foreground-warning-rgb), var(--iui-opacity-5));
188
+ background-color:hsl(var(--iui-color-foreground-warning-hsl)/var(--iui-opacity-5));
189
189
  }
190
190
  .iui-alert-warning .iui-alert-message::selection,
191
191
  .iui-alert-warning .iui-alert-message *::selection{
192
- background-color:rgba(var(--iui-color-foreground-warning-rgb), var(--iui-opacity-5));
192
+ background-color:hsl(var(--iui-color-foreground-warning-hsl)/var(--iui-opacity-5));
193
193
  }
194
194
  .iui-alert-warning .iui-alert-link{
195
195
  color:var(--iui-color-foreground-warning);
196
- -webkit-tap-highlight-color:rgba(var(--iui-color-foreground-warning-rgb), var(--iui-opacity-5));
196
+ -webkit-tap-highlight-color:hsl(var(--iui-color-foreground-warning-hsl)/var(--iui-opacity-6));
197
197
  }
198
198
  .iui-alert-warning .iui-alert-link:focus-visible{
199
199
  outline:1px solid var(--iui-color-foreground-warning);
@@ -206,14 +206,14 @@
206
206
  }
207
207
  }
208
208
  .iui-alert-warning .iui-alert-link::-moz-selection, .iui-alert-warning .iui-alert-link *::-moz-selection{
209
- background-color:rgba(var(--iui-color-foreground-warning-rgb), var(--iui-opacity-5));
209
+ background-color:hsl(var(--iui-color-foreground-warning-hsl)/var(--iui-opacity-5));
210
210
  }
211
211
  .iui-alert-warning .iui-alert-link::selection,
212
212
  .iui-alert-warning .iui-alert-link *::selection{
213
- background-color:rgba(var(--iui-color-foreground-warning-rgb), var(--iui-opacity-5));
213
+ background-color:hsl(var(--iui-color-foreground-warning-hsl)/var(--iui-opacity-5));
214
214
  }
215
215
  .iui-alert-warning .iui-alert-link:hover{
216
- color:var(--iui-color-foreground-warning-overlay);
216
+ color:var(--iui-color-foreground-warning-hover);
217
217
  }
218
218
  .iui-alert-warning .iui-alert-button{
219
219
  outline-color:var(--iui-color-foreground-warning);
@@ -224,13 +224,13 @@
224
224
  padding:0;
225
225
  border:none;
226
226
  vertical-align:baseline;
227
- border-radius:4px;
227
+ border-radius:var(--iui-border-radius-1);
228
228
  display:flex;
229
229
  align-items:center;
230
230
  border:1px solid var(--iui-color-background-5);
231
- color:var(--iui-text-color);
231
+ color:var(--iui-color-foreground-2);
232
232
  background-color:var(--iui-color-background-1);
233
- background:linear-gradient(rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-6)), rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-6))), linear-gradient(var(--iui-color-background-1), var(--iui-color-background-1));
233
+ background-color:var(--iui-color-background-subtle-primary);
234
234
  border-color:var(--iui-color-foreground-primary);
235
235
  }
236
236
  @media (forced-colors: active){
@@ -246,18 +246,18 @@
246
246
  left:0;
247
247
  }
248
248
  .iui-alert-informational .iui-alert-icon{
249
- fill:var(--iui-icons-color-primary);
249
+ fill:var(--iui-color-foreground-primary);
250
250
  }
251
251
  .iui-alert-informational .iui-alert-message::-moz-selection, .iui-alert-informational .iui-alert-message *::-moz-selection{
252
- background-color:rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-5));
252
+ background-color:hsl(var(--iui-color-foreground-primary-hsl)/var(--iui-opacity-5));
253
253
  }
254
254
  .iui-alert-informational .iui-alert-message::selection,
255
255
  .iui-alert-informational .iui-alert-message *::selection{
256
- background-color:rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-5));
256
+ background-color:hsl(var(--iui-color-foreground-primary-hsl)/var(--iui-opacity-5));
257
257
  }
258
258
  .iui-alert-informational .iui-alert-link{
259
259
  color:var(--iui-color-foreground-primary);
260
- -webkit-tap-highlight-color:rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-5));
260
+ -webkit-tap-highlight-color:hsl(var(--iui-color-foreground-primary-hsl)/var(--iui-opacity-6));
261
261
  }
262
262
  .iui-alert-informational .iui-alert-link:focus-visible{
263
263
  outline:1px solid var(--iui-color-foreground-primary);
@@ -270,42 +270,29 @@
270
270
  }
271
271
  }
272
272
  .iui-alert-informational .iui-alert-link:hover{
273
- color:var(--iui-color-foreground-primary-overlay);
273
+ color:var(--iui-color-foreground-primary-hover);
274
274
  }
275
275
  .iui-alert-informational .iui-alert-button{
276
276
  outline-color:var(--iui-color-foreground-primary);
277
277
  }
278
278
 
279
279
  .iui-alert-icon{
280
- fill:var(--iui-icons-color);
281
- display:inline-flex;
282
- width:16px;
283
- height:16px;
280
+ display:flex;
284
281
  flex-shrink:0;
285
- margin-left:16px;
286
- }
287
- .iui-alert-icon.iui-informational{
288
- fill:var(--iui-icons-color-primary);
289
- }
290
- .iui-alert-icon.iui-positive{
291
- fill:var(--iui-icons-color-positive);
292
- }
293
- .iui-alert-icon.iui-warning{
294
- fill:var(--iui-icons-color-warning);
295
- }
296
- .iui-alert-icon.iui-negative{
297
- fill:var(--iui-icons-color-negative);
282
+ width:var(--iui-size-m);
283
+ height:var(--iui-size-m);
284
+ margin-left:var(--iui-size-m);
298
285
  }
299
286
 
300
287
  .iui-alert-message{
301
- margin:11px 16px;
288
+ margin:var(--iui-size-s) var(--iui-size-m);
302
289
  }
303
290
 
304
291
  .iui-alert-link{
305
292
  text-decoration:underline;
306
- border-radius:4px;
293
+ border-radius:var(--iui-border-radius-1);
307
294
  cursor:pointer;
308
- margin-left:8px;
295
+ margin-left:var(--iui-size-xs);
309
296
  -webkit-user-select:none;
310
297
  -moz-user-select:none;
311
298
  -ms-user-select:none;
@@ -323,14 +310,15 @@
323
310
  vertical-align:baseline;
324
311
  font-family:inherit;
325
312
  display:inline-flex;
313
+ flex-shrink:0;
326
314
  align-items:center;
327
315
  vertical-align:middle;
328
316
  justify-content:center;
329
317
  position:relative;
330
- border-radius:4px;
331
- line-height:22px;
332
- font-size:14px;
333
- font-weight:400;
318
+ border-radius:var(--iui-border-radius-1);
319
+ line-height:var(--iui-size-l);
320
+ font-size:var(--iui-font-size-1);
321
+ font-weight:var(--iui-font-weight-normal);
334
322
  -webkit-user-select:none;
335
323
  -moz-user-select:none;
336
324
  -ms-user-select:none;
@@ -341,28 +329,32 @@
341
329
  background:var(--_iui-button-background-color);
342
330
  color:var(--_iui-button-text-color);
343
331
  gap:var(--_iui-button-gap);
344
- height:var(--_iui-button-height);
332
+ min-height:var(--_iui-button-min-height);
333
+ min-width:var(--_iui-button-min-height);
334
+ padding-block:var(--_iui-button-padding-block);
345
335
  padding-inline:var(--_iui-button-padding-inline);
346
- transition:background-color 0.2s ease-out, border-color 0.2s ease-out;
336
+ transition:background-color var(--iui-duration-1) ease-out, border-color var(--iui-duration-1) ease-out;
347
337
  -webkit-tap-highlight-color:transparent;
348
338
  text-decoration:none;
349
- --_iui-button-gap:8px;
350
- --_iui-button-height:38px;
351
- --_iui-button-padding-inline:16px;
352
- --_iui-button-text-color:var(--iui-text-color);
339
+ --_iui-button-gap:var(--iui-size-xs);
340
+ --_iui-button-padding-block:var(--iui-size-2xs);
341
+ --_iui-button-padding-inline:var(--iui-size-m);
342
+ --_iui-button-min-height:var(--iui-component-height);
343
+ --_iui-button-text-color:var(--iui-color-foreground-2);
353
344
  --_iui-button-background-color:transparent;
354
345
  --_iui-button-border-color:transparent;
355
- --_iui-button-icon-margin-x:3px;
356
- --_iui-button-gap:8px;
357
- --_iui-button-height:38px;
358
- --_iui-button-padding-inline:16px;
359
- --_iui-button-padding-inline:8px;
360
- --_iui-button-gap:4px;
361
- --_iui-button-height:27px;
362
- --_iui-button-padding-inline:8px;
363
- --_iui-button-padding-inline:2px;
346
+ --_iui-button-gap:var(--iui-size-xs);
347
+ --_iui-button-padding-block:var(--iui-size-2xs);
348
+ --_iui-button-padding-inline:var(--iui-size-m);
349
+ --_iui-button-min-height:var(--iui-component-height);
350
+ --_iui-button-padding-inline:var(--iui-size-xs);
351
+ --_iui-button-gap:var(--iui-size-2xs);
352
+ --_iui-button-padding-block:0;
353
+ --_iui-button-padding-inline:var(--iui-size-xs);
354
+ --_iui-button-min-height:var(--iui-component-height-small);
355
+ --_iui-button-padding-inline:var(--iui-size-2xs);
364
356
  margin-left:auto;
365
- margin-right:8px;
357
+ margin-right:var(--iui-size-xs);
366
358
  }
367
359
  .iui-alert-button:focus-visible{
368
360
  outline:1px solid var(--iui-color-foreground-primary);
@@ -375,28 +367,25 @@
375
367
  }
376
368
  }
377
369
  .iui-alert-button:where(:hover, :active){
378
- --_iui-button-text-color:var(--iui-color-foreground-body);
379
- --_iui-button-background-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-6));
370
+ --_iui-button-text-color:var(--iui-color-foreground-1);
371
+ --_iui-button-background-color:var(--iui-color-background-transparent-hover);
380
372
  }
381
373
  .iui-alert-button:where(:focus){
382
374
  outline-offset:-1px;
383
375
  outline-width:1px;
384
376
  }
385
377
  .iui-alert-button:where([disabled], :disabled, [aria-disabled="true"]){
386
- --_iui-button-text-color:var(--iui-text-color-placeholder);
378
+ --_iui-button-text-color:var(--iui-color-foreground-5);
387
379
  --_iui-button-background-color:transparent;
388
380
  --_iui-button-border-color:transparent;
389
381
  }
390
382
 
391
383
  .iui-alert-button-icon{
392
- width:16px;
393
- height:16px;
394
- transition:fill 0.2s ease-out;
384
+ display:flex;
385
+ flex-shrink:0;
386
+ width:var(--iui-size-m);
387
+ height:var(--iui-size-m);
388
+ transition:fill var(--iui-duration-1) ease-out;
395
389
  fill:currentColor;
396
- margin-left:3px;
397
- margin-right:3px;
398
- }
399
- .iui-alert-button-icon:only-child{
400
- margin-left:var(--_iui-button-icon-margin-x);
401
- margin-right:var(--_iui-button-icon-margin-x);
390
+ margin-block:var(--iui-size-2xs);
402
391
  }