@itwin/itwinui-css 0.63.0 → 1.0.0-dev.1

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 (243) hide show
  1. package/CHANGELOG.md +8 -0
  2. package/README.md +1 -4
  3. package/css/alert.css +263 -145
  4. package/css/all.css +5470 -6944
  5. package/css/anchor.css +0 -4
  6. package/css/{user-icon.css → avatar.css} +52 -72
  7. package/css/badge.css +1 -1
  8. package/css/blockquote.css +2 -5
  9. package/css/breadcrumbs.css +68 -135
  10. package/css/button.css +237 -348
  11. package/css/carousel.css +10 -17
  12. package/css/checkbox.css +152 -0
  13. package/css/code.css +3 -10
  14. package/css/color-picker.css +9 -47
  15. package/css/date-picker.css +1 -60
  16. package/css/dialog.css +11 -13
  17. package/css/expandable-block.css +8 -55
  18. package/css/fieldset.css +2 -7
  19. package/css/file-upload.css +6 -36
  20. package/css/footer.css +2 -10
  21. package/css/global.css +73 -128
  22. package/css/header.css +318 -403
  23. package/css/information-panel.css +13 -22
  24. package/css/input.css +170 -0
  25. package/css/keyboard.css +1 -5
  26. package/css/location-marker.css +8 -13
  27. package/css/menu.css +14 -23
  28. package/css/non-ideal-state.css +5 -5
  29. package/css/progress-indicator.css +11 -99
  30. package/css/radio-tile.css +56 -74
  31. package/css/radio.css +159 -0
  32. package/css/select.css +236 -0
  33. package/css/side-navigation.css +15 -40
  34. package/css/skip-to-content.css +2 -5
  35. package/css/slider.css +11 -70
  36. package/css/stepper.css +141 -0
  37. package/css/surface.css +0 -1
  38. package/css/table.css +266 -353
  39. package/css/tabs.css +22 -58
  40. package/css/tag.css +8 -26
  41. package/css/text.css +7 -9
  42. package/css/tile.css +119 -231
  43. package/css/time-picker.css +3 -15
  44. package/css/{toast-notification.css → toast.css} +14 -54
  45. package/css/toggle-switch.css +17 -64
  46. package/css/tooltip.css +0 -3
  47. package/css/tree.css +9 -35
  48. package/css/utils.css +669 -0
  49. package/css/workflow-diagram.css +67 -0
  50. package/package.json +7 -10
  51. package/css/icon.css +0 -177
  52. package/css/inputs.css +0 -1339
  53. package/css/notification-marker.css +0 -293
  54. package/css/popover.css +0 -14
  55. package/css/reset-global-styles.css +0 -50
  56. package/css/wizard.css +0 -190
  57. package/scss/alert/alert.scss +0 -83
  58. package/scss/alert/classes.scss +0 -13
  59. package/scss/alert/index.scss +0 -3
  60. package/scss/anchor/anchor.scss +0 -3
  61. package/scss/anchor/classes.scss +0 -11
  62. package/scss/anchor/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 -32
  67. package/scss/badge/classes.scss +0 -7
  68. package/scss/badge/index.scss +0 -3
  69. package/scss/blockquote/blockquote.scss +0 -31
  70. package/scss/blockquote/classes.scss +0 -7
  71. package/scss/blockquote/index.scss +0 -3
  72. package/scss/breadcrumbs/breadcrumbs.scss +0 -124
  73. package/scss/breadcrumbs/classes.scss +0 -31
  74. package/scss/breadcrumbs/index.scss +0 -3
  75. package/scss/button/borderless.scss +0 -48
  76. package/scss/button/button-group.scss +0 -110
  77. package/scss/button/button-icon.scss +0 -12
  78. package/scss/button/button.scss +0 -97
  79. package/scss/button/classes.scss +0 -70
  80. package/scss/button/cta.scss +0 -31
  81. package/scss/button/default.scss +0 -59
  82. package/scss/button/disabled.scss +0 -13
  83. package/scss/button/high-visibility.scss +0 -31
  84. package/scss/button/idea.scss +0 -10
  85. package/scss/button/index.scss +0 -12
  86. package/scss/button/split-menu.scss +0 -66
  87. package/scss/carousel/carousel.scss +0 -124
  88. package/scss/carousel/classes.scss +0 -15
  89. package/scss/carousel/index.scss +0 -3
  90. package/scss/classes.scss +0 -48
  91. package/scss/code/classes.scss +0 -11
  92. package/scss/code/code.scss +0 -18
  93. package/scss/code/codeblock.scss +0 -73
  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 -274
  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 -280
  100. package/scss/date-picker/index.scss +0 -3
  101. package/scss/dialog/classes.scss +0 -48
  102. package/scss/dialog/dialog.scss +0 -183
  103. package/scss/dialog/index.scss +0 -3
  104. package/scss/expandable-block/block.scss +0 -193
  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 -35
  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 -90
  112. package/scss/file-upload/index.scss +0 -3
  113. package/scss/footer/classes.scss +0 -23
  114. package/scss/footer/footer.scss +0 -62
  115. package/scss/footer/index.scss +0 -3
  116. package/scss/header/classes.scss +0 -11
  117. package/scss/header/header.scss +0 -443
  118. package/scss/header/index.scss +0 -3
  119. package/scss/icon/classes.scss +0 -27
  120. package/scss/icon/index.scss +0 -4
  121. package/scss/icon/mixins.scss +0 -78
  122. package/scss/icon/variables.scss +0 -14
  123. package/scss/index.scss +0 -46
  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 -233
  127. package/scss/inputs/checkbox-radio.scss +0 -73
  128. package/scss/inputs/checkbox.scss +0 -106
  129. package/scss/inputs/classes.scss +0 -87
  130. package/scss/inputs/index.scss +0 -10
  131. package/scss/inputs/input-with-icon.scss +0 -36
  132. package/scss/inputs/input.scss +0 -80
  133. package/scss/inputs/labeled-inputs.scss +0 -382
  134. package/scss/inputs/radio.scss +0 -18
  135. package/scss/inputs/select.scss +0 -132
  136. package/scss/inputs/textarea.scss +0 -14
  137. package/scss/keyboard/classes.scss +0 -7
  138. package/scss/keyboard/index.scss +0 -3
  139. package/scss/keyboard/keyboard.scss +0 -33
  140. package/scss/location-marker/classes.scss +0 -15
  141. package/scss/location-marker/data-rich.scss +0 -58
  142. package/scss/location-marker/default.scss +0 -21
  143. package/scss/location-marker/index.scss +0 -6
  144. package/scss/location-marker/location-marker.scss +0 -13
  145. package/scss/location-marker/me.scss +0 -36
  146. package/scss/menu/classes.scss +0 -21
  147. package/scss/menu/index.scss +0 -3
  148. package/scss/menu/menu.scss +0 -205
  149. package/scss/non-ideal-state/classes.scss +0 -7
  150. package/scss/non-ideal-state/index.scss +0 -3
  151. package/scss/non-ideal-state/non-ideal-state.scss +0 -55
  152. package/scss/notification-marker/classes.scss +0 -9
  153. package/scss/notification-marker/index.scss +0 -3
  154. package/scss/notification-marker/notification-marker.scss +0 -63
  155. package/scss/popover/classes.scss +0 -7
  156. package/scss/popover/index.scss +0 -3
  157. package/scss/popover/popover.scss +0 -22
  158. package/scss/progress-indicator/classes.scss +0 -35
  159. package/scss/progress-indicator/index.scss +0 -5
  160. package/scss/progress-indicator/linear.scss +0 -126
  161. package/scss/progress-indicator/overlay.scss +0 -57
  162. package/scss/progress-indicator/radial.scss +0 -243
  163. package/scss/radio-tile/classes.scss +0 -31
  164. package/scss/radio-tile/index.scss +0 -3
  165. package/scss/radio-tile/radio-tile.scss +0 -209
  166. package/scss/reset-global-styles.scss +0 -33
  167. package/scss/side-navigation/classes.scss +0 -15
  168. package/scss/side-navigation/index.scss +0 -3
  169. package/scss/side-navigation/side-navigation.scss +0 -210
  170. package/scss/skip-to-content/classes.scss +0 -7
  171. package/scss/skip-to-content/index.scss +0 -3
  172. package/scss/skip-to-content/skip-to-content.scss +0 -41
  173. package/scss/slider/classes.scss +0 -40
  174. package/scss/slider/index.scss +0 -3
  175. package/scss/slider/slider.scss +0 -256
  176. package/scss/style/anchor.scss +0 -82
  177. package/scss/style/baseline.scss +0 -4
  178. package/scss/style/color.scss +0 -39
  179. package/scss/style/elevation.scss +0 -11
  180. package/scss/style/global.scss +0 -70
  181. package/scss/style/index.scss +0 -11
  182. package/scss/style/mixins.scss +0 -188
  183. package/scss/style/ripple.scss +0 -18
  184. package/scss/style/space.scss +0 -11
  185. package/scss/style/speed.scss +0 -8
  186. package/scss/style/theme.scss +0 -482
  187. package/scss/style/typography.scss +0 -54
  188. package/scss/style/variables.scss +0 -21
  189. package/scss/surface/classes.scss +0 -7
  190. package/scss/surface/index.scss +0 -3
  191. package/scss/surface/surface.scss +0 -18
  192. package/scss/table/classes.scss +0 -63
  193. package/scss/table/column-filter.scss +0 -37
  194. package/scss/table/condensed.scss +0 -15
  195. package/scss/table/extra-condensed.scss +0 -19
  196. package/scss/table/index.scss +0 -7
  197. package/scss/table/paginator.scss +0 -87
  198. package/scss/table/table.scss +0 -558
  199. package/scss/table/variables.scss +0 -10
  200. package/scss/tabs/borderless.scss +0 -71
  201. package/scss/tabs/classes.scss +0 -44
  202. package/scss/tabs/default.scss +0 -102
  203. package/scss/tabs/index.scss +0 -6
  204. package/scss/tabs/pill.scss +0 -48
  205. package/scss/tabs/tabs.scss +0 -220
  206. package/scss/tag/classes.scss +0 -29
  207. package/scss/tag/index.scss +0 -3
  208. package/scss/tag/tag.scss +0 -99
  209. package/scss/text/classes.scss +0 -40
  210. package/scss/text/index.scss +0 -5
  211. package/scss/text/mixins.scss +0 -42
  212. package/scss/text/muted.scss +0 -9
  213. package/scss/text/skeleton.scss +0 -46
  214. package/scss/tile/classes.scss +0 -51
  215. package/scss/tile/index.scss +0 -3
  216. package/scss/tile/tile.scss +0 -370
  217. package/scss/time-picker/classes.scss +0 -16
  218. package/scss/time-picker/index.scss +0 -3
  219. package/scss/time-picker/time-picker.scss +0 -72
  220. package/scss/toast-notification/categories.scss +0 -26
  221. package/scss/toast-notification/classes.scss +0 -98
  222. package/scss/toast-notification/index.scss +0 -4
  223. package/scss/toast-notification/toast.scss +0 -79
  224. package/scss/toggle-switch/classes.scss +0 -11
  225. package/scss/toggle-switch/index.scss +0 -3
  226. package/scss/toggle-switch/toggle-switch.scss +0 -222
  227. package/scss/tooltip/classes.scss +0 -24
  228. package/scss/tooltip/index.scss +0 -3
  229. package/scss/tooltip/tooltip.scss +0 -41
  230. package/scss/tree/classes.scss +0 -19
  231. package/scss/tree/index.scss +0 -3
  232. package/scss/tree/tree.scss +0 -138
  233. package/scss/user-icon/classes.scss +0 -27
  234. package/scss/user-icon/index.scss +0 -4
  235. package/scss/user-icon/sizes.scss +0 -22
  236. package/scss/user-icon/user-icon.scss +0 -250
  237. package/scss/variables.scss +0 -3
  238. package/scss/wizard/classes.scss +0 -27
  239. package/scss/wizard/index.scss +0 -5
  240. package/scss/wizard/long.scss +0 -19
  241. package/scss/wizard/wizard.scss +0 -160
  242. package/scss/wizard/workflow.scss +0 -43
  243. package/src/index.scss +0 -46
package/CHANGELOG.md CHANGED
@@ -1,5 +1,13 @@
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
+
3
11
  ## [0.63.0](https://www.github.com/iTwin/iTwinUI/compare/v0.62.0...v0.63.0) (2022-08-01)
4
12
 
5
13
  ### What's new
package/README.md CHANGED
@@ -53,10 +53,7 @@ You need to add `iui-body` class to your `<body>` element in order to get recomm
53
53
 
54
54
  .my-class {
55
55
  padding: $iui-m;
56
-
57
- @include themed {
58
- color: t(iui-text-color);
59
- }
56
+ color: var(--iui-text-color);
60
57
  }
61
58
  ```
62
59
 
package/css/alert.css CHANGED
@@ -8,266 +8,384 @@
8
8
  border:none;
9
9
  vertical-align:baseline;
10
10
  border-radius:4px;
11
- box-sizing:border-box;
12
11
  display:flex;
13
12
  align-items:center;
14
- border:1px solid #c7ccd1;
15
- color:rgba(0, 0, 0, 0.8);
16
- background-color:white;
17
13
  border:1px solid var(--iui-color-background-5);
18
14
  color:var(--iui-text-color);
19
15
  background-color:var(--iui-color-background-1);
20
16
  }
21
- .iui-alert-icon{
22
- fill:rgba(0, 0, 0, 0.4);
23
- fill:var(--iui-icons-color);
24
- display:inline-flex;
25
- width:16px;
26
- height:16px;
27
- flex-shrink:0;
28
- margin-left:16px;
29
- }
30
17
  @media (forced-colors: active){
31
- .iui-alert-icon{
32
- fill:CanvasText;
18
+ .iui-alert{
19
+ background-color:Canvas;
33
20
  }
34
21
  }
35
- .iui-alert-icon.iui-informational{
36
- fill:#008ae0;
37
- fill:var(--iui-icons-color-primary);
38
- }
39
- .iui-alert-icon.iui-positive{
40
- fill:#53a21a;
41
- fill:var(--iui-icons-color-positive);
42
- }
43
- .iui-alert-icon.iui-warning{
44
- fill:#f18d13;
45
- fill:var(--iui-icons-color-warning);
46
- }
47
- .iui-alert-icon.iui-negative{
48
- fill:#d10a0a;
49
- fill:var(--iui-icons-color-negative);
50
- }
51
- .iui-alert-message{
52
- margin:11px 16px;
53
- }
54
- .iui-alert-link{
55
- text-decoration:underline;
56
- border-radius:4px;
57
- cursor:pointer;
58
- margin-left:8px;
59
- -webkit-user-select:none;
60
- -moz-user-select:none;
61
- -ms-user-select:none;
62
- user-select:none;
63
- white-space:nowrap;
64
- }
65
- .iui-alert-link:hover{
66
- text-decoration:none;
67
- }
68
- .iui-alert > .iui-button{
69
- margin-left:auto;
70
- margin-right:8px;
71
- }
72
22
  .iui-alert.iui-sticky{
73
23
  border-radius:0;
74
- position:absolute;
24
+ position:-webkit-sticky;
25
+ position:sticky;
75
26
  top:0;
76
27
  left:0;
77
- width:100vw;
78
28
  }
79
- .iui-alert.iui-positive{
80
- background:linear-gradient(rgba(83, 162, 26, 0.1), rgba(83, 162, 26, 0.1)), linear-gradient(white, white);
81
- border-color:#53a21a;
29
+
30
+ .iui-alert-positive{
31
+ margin:0;
32
+ padding:0;
33
+ border:none;
34
+ vertical-align:baseline;
35
+ border-radius:4px;
36
+ display:flex;
37
+ align-items:center;
38
+ border:1px solid var(--iui-color-background-5);
39
+ color:var(--iui-text-color);
40
+ background-color:var(--iui-color-background-1);
82
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));
83
42
  border-color:var(--iui-color-foreground-positive);
84
43
  }
85
- .iui-alert.iui-positive .iui-alert-icon{
86
- fill:#53a21a;
87
- fill:var(--iui-icons-color-positive);
44
+ @media (forced-colors: active){
45
+ .iui-alert-positive{
46
+ background-color:Canvas;
47
+ }
48
+ }
49
+ .iui-alert-positive.iui-sticky{
50
+ border-radius:0;
51
+ position:-webkit-sticky;
52
+ position:sticky;
53
+ top:0;
54
+ left:0;
88
55
  }
89
- .iui-alert.iui-positive .iui-alert-message::-moz-selection, .iui-alert.iui-positive .iui-alert-message *::-moz-selection{
90
- background-color:rgba(83, 162, 26, 0.2);
56
+ .iui-alert-positive .iui-alert-icon{
57
+ fill:var(--iui-icon-color-positive);
58
+ }
59
+ .iui-alert-positive .iui-alert-message::-moz-selection, .iui-alert-positive .iui-alert-message *::-moz-selection{
91
60
  background-color:rgba(var(--iui-color-foreground-positive-rgb), var(--iui-opacity-5));
92
61
  }
93
- .iui-alert.iui-positive .iui-alert-message::selection,
94
- .iui-alert.iui-positive .iui-alert-message *::selection{
95
- background-color:rgba(83, 162, 26, 0.2);
62
+ .iui-alert-positive .iui-alert-message::selection,
63
+ .iui-alert-positive .iui-alert-message *::selection{
96
64
  background-color:rgba(var(--iui-color-foreground-positive-rgb), var(--iui-opacity-5));
97
65
  }
98
- .iui-alert.iui-positive .iui-alert-link{
99
- color:#53a21a;
100
- -webkit-tap-highlight-color:rgba(83, 162, 26, 0.2);
66
+ .iui-alert-positive .iui-alert-link{
101
67
  color:var(--iui-color-foreground-positive);
102
68
  -webkit-tap-highlight-color:rgba(var(--iui-color-foreground-positive-rgb), var(--iui-opacity-5));
103
69
  }
104
- .iui-alert.iui-positive .iui-alert-link:focus-visible{
70
+ .iui-alert-positive .iui-alert-link:focus-visible{
105
71
  outline:1px solid var(--iui-color-foreground-positive);
106
72
  outline-offset:1px;
107
73
  }
108
74
  @supports not selector(*:focus-visible){
109
- .iui-alert.iui-positive .iui-alert-link:focus{
75
+ .iui-alert-positive .iui-alert-link:focus{
110
76
  outline:1px solid var(--iui-color-foreground-positive);
111
77
  outline-offset:1px;
112
78
  }
113
79
  }
114
- .iui-alert.iui-positive .iui-alert-link::-moz-selection, .iui-alert.iui-positive .iui-alert-link *::-moz-selection{
115
- background-color:rgba(83, 162, 26, 0.2);
80
+ .iui-alert-positive .iui-alert-link::-moz-selection, .iui-alert-positive .iui-alert-link *::-moz-selection{
116
81
  background-color:rgba(var(--iui-color-foreground-positive-rgb), var(--iui-opacity-5));
117
82
  }
118
- .iui-alert.iui-positive .iui-alert-link::selection,
119
- .iui-alert.iui-positive .iui-alert-link *::selection{
120
- background-color:rgba(83, 162, 26, 0.2);
83
+ .iui-alert-positive .iui-alert-link::selection,
84
+ .iui-alert-positive .iui-alert-link *::selection{
121
85
  background-color:rgba(var(--iui-color-foreground-positive-rgb), var(--iui-opacity-5));
122
86
  }
123
- .iui-alert.iui-positive .iui-alert-link:hover{
124
- color:#3d7613;
87
+ .iui-alert-positive .iui-alert-link:hover{
125
88
  color:var(--iui-color-foreground-positive-overlay);
126
89
  }
127
- .iui-alert.iui-positive > .iui-button{
90
+ .iui-alert-positive .iui-alert-button{
128
91
  outline-color:var(--iui-color-foreground-positive);
129
92
  }
130
- .iui-alert.iui-negative{
131
- background:linear-gradient(rgba(209, 10, 10, 0.1), rgba(209, 10, 10, 0.1)), linear-gradient(white, white);
132
- border-color:#d10a0a;
93
+
94
+ .iui-alert-negative{
95
+ margin:0;
96
+ padding:0;
97
+ border:none;
98
+ vertical-align:baseline;
99
+ border-radius:4px;
100
+ display:flex;
101
+ align-items:center;
102
+ border:1px solid var(--iui-color-background-5);
103
+ color:var(--iui-text-color);
104
+ background-color:var(--iui-color-background-1);
133
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));
134
106
  border-color:var(--iui-color-foreground-negative);
135
107
  }
136
- .iui-alert.iui-negative .iui-alert-icon{
137
- fill:#d10a0a;
138
- fill:var(--iui-icons-color-negative);
108
+ @media (forced-colors: active){
109
+ .iui-alert-negative{
110
+ background-color:Canvas;
111
+ }
112
+ }
113
+ .iui-alert-negative.iui-sticky{
114
+ border-radius:0;
115
+ position:-webkit-sticky;
116
+ position:sticky;
117
+ top:0;
118
+ left:0;
119
+ }
120
+ .iui-alert-negative .iui-alert-icon{
121
+ fill:var(--iui-icon-color-negative);
139
122
  }
140
- .iui-alert.iui-negative .iui-alert-message::-moz-selection, .iui-alert.iui-negative .iui-alert-message *::-moz-selection{
141
- background-color:rgba(209, 10, 10, 0.2);
123
+ .iui-alert-negative .iui-alert-message::-moz-selection, .iui-alert-negative .iui-alert-message *::-moz-selection{
142
124
  background-color:rgba(var(--iui-color-foreground-negative-rgb), var(--iui-opacity-5));
143
125
  }
144
- .iui-alert.iui-negative .iui-alert-message::selection,
145
- .iui-alert.iui-negative .iui-alert-message *::selection{
146
- background-color:rgba(209, 10, 10, 0.2);
126
+ .iui-alert-negative .iui-alert-message::selection,
127
+ .iui-alert-negative .iui-alert-message *::selection{
147
128
  background-color:rgba(var(--iui-color-foreground-negative-rgb), var(--iui-opacity-5));
148
129
  }
149
- .iui-alert.iui-negative .iui-alert-link{
150
- color:#d10a0a;
151
- -webkit-tap-highlight-color:rgba(209, 10, 10, 0.2);
130
+ .iui-alert-negative .iui-alert-link{
152
131
  color:var(--iui-color-foreground-negative);
153
132
  -webkit-tap-highlight-color:rgba(var(--iui-color-foreground-negative-rgb), var(--iui-opacity-5));
154
133
  }
155
- .iui-alert.iui-negative .iui-alert-link:focus-visible{
134
+ .iui-alert-negative .iui-alert-link:focus-visible{
156
135
  outline:1px solid var(--iui-color-foreground-negative);
157
136
  outline-offset:1px;
158
137
  }
159
138
  @supports not selector(*:focus-visible){
160
- .iui-alert.iui-negative .iui-alert-link:focus{
139
+ .iui-alert-negative .iui-alert-link:focus{
161
140
  outline:1px solid var(--iui-color-foreground-negative);
162
141
  outline-offset:1px;
163
142
  }
164
143
  }
165
- .iui-alert.iui-negative .iui-alert-link::-moz-selection, .iui-alert.iui-negative .iui-alert-link *::-moz-selection{
166
- background-color:rgba(209, 10, 10, 0.2);
144
+ .iui-alert-negative .iui-alert-link::-moz-selection, .iui-alert-negative .iui-alert-link *::-moz-selection{
167
145
  background-color:rgba(var(--iui-color-foreground-negative-rgb), var(--iui-opacity-5));
168
146
  }
169
- .iui-alert.iui-negative .iui-alert-link::selection,
170
- .iui-alert.iui-negative .iui-alert-link *::selection{
171
- background-color:rgba(209, 10, 10, 0.2);
147
+ .iui-alert-negative .iui-alert-link::selection,
148
+ .iui-alert-negative .iui-alert-link *::selection{
172
149
  background-color:rgba(var(--iui-color-foreground-negative-rgb), var(--iui-opacity-5));
173
150
  }
174
- .iui-alert.iui-negative .iui-alert-link:hover{
175
- color:#a10808;
151
+ .iui-alert-negative .iui-alert-link:hover{
176
152
  color:var(--iui-color-foreground-negative-overlay);
177
153
  }
178
- .iui-alert.iui-negative > .iui-button{
154
+ .iui-alert-negative .iui-alert-button{
179
155
  outline-color:var(--iui-color-foreground-negative);
180
156
  }
181
- .iui-alert.iui-warning{
182
- background:linear-gradient(rgba(241, 141, 19, 0.1), rgba(241, 141, 19, 0.1)), linear-gradient(white, white);
183
- border-color:#f18d13;
157
+
158
+ .iui-alert-warning{
159
+ margin:0;
160
+ padding:0;
161
+ border:none;
162
+ vertical-align:baseline;
163
+ border-radius:4px;
164
+ display:flex;
165
+ align-items:center;
166
+ border:1px solid var(--iui-color-background-5);
167
+ color:var(--iui-text-color);
168
+ background-color:var(--iui-color-background-1);
184
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));
185
170
  border-color:var(--iui-color-foreground-warning);
186
171
  }
187
- .iui-alert.iui-warning .iui-alert-icon{
188
- fill:#f18d13;
189
- fill:var(--iui-icons-color-warning);
172
+ @media (forced-colors: active){
173
+ .iui-alert-warning{
174
+ background-color:Canvas;
175
+ }
176
+ }
177
+ .iui-alert-warning.iui-sticky{
178
+ border-radius:0;
179
+ position:-webkit-sticky;
180
+ position:sticky;
181
+ top:0;
182
+ left:0;
183
+ }
184
+ .iui-alert-warning .iui-alert-icon{
185
+ fill:var(--iui-icon-color-warning);
190
186
  }
191
- .iui-alert.iui-warning .iui-alert-message::-moz-selection, .iui-alert.iui-warning .iui-alert-message *::-moz-selection{
192
- background-color:rgba(241, 141, 19, 0.2);
187
+ .iui-alert-warning .iui-alert-message::-moz-selection, .iui-alert-warning .iui-alert-message *::-moz-selection{
193
188
  background-color:rgba(var(--iui-color-foreground-warning-rgb), var(--iui-opacity-5));
194
189
  }
195
- .iui-alert.iui-warning .iui-alert-message::selection,
196
- .iui-alert.iui-warning .iui-alert-message *::selection{
197
- background-color:rgba(241, 141, 19, 0.2);
190
+ .iui-alert-warning .iui-alert-message::selection,
191
+ .iui-alert-warning .iui-alert-message *::selection{
198
192
  background-color:rgba(var(--iui-color-foreground-warning-rgb), var(--iui-opacity-5));
199
193
  }
200
- .iui-alert.iui-warning .iui-alert-link{
201
- color:#f18d13;
202
- -webkit-tap-highlight-color:rgba(241, 141, 19, 0.2);
194
+ .iui-alert-warning .iui-alert-link{
203
195
  color:var(--iui-color-foreground-warning);
204
196
  -webkit-tap-highlight-color:rgba(var(--iui-color-foreground-warning-rgb), var(--iui-opacity-5));
205
197
  }
206
- .iui-alert.iui-warning .iui-alert-link:focus-visible{
198
+ .iui-alert-warning .iui-alert-link:focus-visible{
207
199
  outline:1px solid var(--iui-color-foreground-warning);
208
200
  outline-offset:1px;
209
201
  }
210
202
  @supports not selector(*:focus-visible){
211
- .iui-alert.iui-warning .iui-alert-link:focus{
203
+ .iui-alert-warning .iui-alert-link:focus{
212
204
  outline:1px solid var(--iui-color-foreground-warning);
213
205
  outline-offset:1px;
214
206
  }
215
207
  }
216
- .iui-alert.iui-warning .iui-alert-link::-moz-selection, .iui-alert.iui-warning .iui-alert-link *::-moz-selection{
217
- background-color:rgba(241, 141, 19, 0.2);
208
+ .iui-alert-warning .iui-alert-link::-moz-selection, .iui-alert-warning .iui-alert-link *::-moz-selection{
218
209
  background-color:rgba(var(--iui-color-foreground-warning-rgb), var(--iui-opacity-5));
219
210
  }
220
- .iui-alert.iui-warning .iui-alert-link::selection,
221
- .iui-alert.iui-warning .iui-alert-link *::selection{
222
- background-color:rgba(241, 141, 19, 0.2);
211
+ .iui-alert-warning .iui-alert-link::selection,
212
+ .iui-alert-warning .iui-alert-link *::selection{
223
213
  background-color:rgba(var(--iui-color-foreground-warning-rgb), var(--iui-opacity-5));
224
214
  }
225
- .iui-alert.iui-warning .iui-alert-link:hover{
226
- color:#c6720c;
215
+ .iui-alert-warning .iui-alert-link:hover{
227
216
  color:var(--iui-color-foreground-warning-overlay);
228
217
  }
229
- .iui-alert.iui-warning > .iui-button{
218
+ .iui-alert-warning .iui-alert-button{
230
219
  outline-color:var(--iui-color-foreground-warning);
231
220
  }
232
- .iui-alert.iui-informational{
233
- background:linear-gradient(rgba(0, 138, 224, 0.1), rgba(0, 138, 224, 0.1)), linear-gradient(white, white);
234
- border-color:#008ae0;
221
+
222
+ .iui-alert-informational{
223
+ margin:0;
224
+ padding:0;
225
+ border:none;
226
+ vertical-align:baseline;
227
+ border-radius:4px;
228
+ display:flex;
229
+ align-items:center;
230
+ border:1px solid var(--iui-color-background-5);
231
+ color:var(--iui-text-color);
232
+ background-color:var(--iui-color-background-1);
235
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));
236
234
  border-color:var(--iui-color-foreground-primary);
237
235
  }
238
- .iui-alert.iui-informational .iui-alert-icon{
239
- fill:#008ae0;
240
- fill:var(--iui-icons-color-primary);
236
+ @media (forced-colors: active){
237
+ .iui-alert-informational{
238
+ background-color:Canvas;
239
+ }
240
+ }
241
+ .iui-alert-informational.iui-sticky{
242
+ border-radius:0;
243
+ position:-webkit-sticky;
244
+ position:sticky;
245
+ top:0;
246
+ left:0;
247
+ }
248
+ .iui-alert-informational .iui-alert-icon{
249
+ fill:var(--iui-icon-color-primary);
241
250
  }
242
- .iui-alert.iui-informational .iui-alert-message::-moz-selection, .iui-alert.iui-informational .iui-alert-message *::-moz-selection{
243
- background-color:rgba(0, 138, 224, 0.2);
251
+ .iui-alert-informational .iui-alert-message::-moz-selection, .iui-alert-informational .iui-alert-message *::-moz-selection{
244
252
  background-color:rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-5));
245
253
  }
246
- .iui-alert.iui-informational .iui-alert-message::selection,
247
- .iui-alert.iui-informational .iui-alert-message *::selection{
248
- background-color:rgba(0, 138, 224, 0.2);
254
+ .iui-alert-informational .iui-alert-message::selection,
255
+ .iui-alert-informational .iui-alert-message *::selection{
249
256
  background-color:rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-5));
250
257
  }
251
- .iui-alert.iui-informational .iui-alert-link{
252
- color:#008ae0;
253
- -webkit-tap-highlight-color:rgba(0, 138, 224, 0.2);
258
+ .iui-alert-informational .iui-alert-link{
254
259
  color:var(--iui-color-foreground-primary);
255
260
  -webkit-tap-highlight-color:rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-5));
256
261
  }
257
- .iui-alert.iui-informational .iui-alert-link:focus-visible{
262
+ .iui-alert-informational .iui-alert-link:focus-visible{
258
263
  outline:1px solid var(--iui-color-foreground-primary);
259
264
  outline-offset:1px;
260
265
  }
261
266
  @supports not selector(*:focus-visible){
262
- .iui-alert.iui-informational .iui-alert-link:focus{
267
+ .iui-alert-informational .iui-alert-link:focus{
263
268
  outline:1px solid var(--iui-color-foreground-primary);
264
269
  outline-offset:1px;
265
270
  }
266
271
  }
267
- .iui-alert.iui-informational .iui-alert-link:hover{
268
- color:#006bad;
272
+ .iui-alert-informational .iui-alert-link:hover{
269
273
  color:var(--iui-color-foreground-primary-overlay);
270
274
  }
271
- .iui-alert.iui-informational > .iui-button{
275
+ .iui-alert-informational .iui-alert-button{
272
276
  outline-color:var(--iui-color-foreground-primary);
277
+ }
278
+
279
+ .iui-alert-icon{
280
+ display:flex;
281
+ flex-shrink:0;
282
+ width:16px;
283
+ height:16px;
284
+ margin-left:16px;
285
+ }
286
+
287
+ .iui-alert-message{
288
+ margin:12px 16px;
289
+ }
290
+
291
+ .iui-alert-link{
292
+ text-decoration:underline;
293
+ border-radius:4px;
294
+ cursor:pointer;
295
+ margin-left:8px;
296
+ -webkit-user-select:none;
297
+ -moz-user-select:none;
298
+ -ms-user-select:none;
299
+ user-select:none;
300
+ white-space:nowrap;
301
+ }
302
+ .iui-alert-link:hover{
303
+ text-decoration:none;
304
+ }
305
+
306
+ .iui-alert-button{
307
+ margin:0;
308
+ padding:0;
309
+ border:none;
310
+ vertical-align:baseline;
311
+ font-family:inherit;
312
+ display:inline-flex;
313
+ align-items:center;
314
+ vertical-align:middle;
315
+ justify-content:center;
316
+ position:relative;
317
+ border-radius:4px;
318
+ line-height:24px;
319
+ font-size:14px;
320
+ font-weight:400;
321
+ -webkit-user-select:none;
322
+ -moz-user-select:none;
323
+ -ms-user-select:none;
324
+ user-select:none;
325
+ cursor:pointer;
326
+ white-space:nowrap;
327
+ border:1px solid var(--_iui-button-border-color);
328
+ background:var(--_iui-button-background-color);
329
+ color:var(--_iui-button-text-color);
330
+ gap:var(--_iui-button-gap);
331
+ height:var(--_iui-button-height);
332
+ padding-inline:var(--_iui-button-padding-inline);
333
+ transition:background-color 0.2s ease-out, border-color 0.2s ease-out;
334
+ -webkit-tap-highlight-color:transparent;
335
+ text-decoration:none;
336
+ --_iui-button-gap:8px;
337
+ --_iui-button-height:40px;
338
+ --_iui-button-padding-inline:16px;
339
+ --_iui-button-text-color:var(--iui-text-color);
340
+ --_iui-button-background-color:transparent;
341
+ --_iui-button-border-color:transparent;
342
+ --_iui-button-icon-margin-x:4px;
343
+ --_iui-button-gap:8px;
344
+ --_iui-button-height:40px;
345
+ --_iui-button-padding-inline:16px;
346
+ --_iui-button-padding-inline:8px;
347
+ --_iui-button-gap:4px;
348
+ --_iui-button-height:28px;
349
+ --_iui-button-padding-inline:8px;
350
+ --_iui-button-padding-inline:2px;
351
+ margin-left:auto;
352
+ margin-right:8px;
353
+ }
354
+ .iui-alert-button:focus-visible{
355
+ outline:1px solid var(--iui-color-foreground-primary);
356
+ outline-offset:-1px;
357
+ }
358
+ @supports not selector(*:focus-visible){
359
+ .iui-alert-button:focus{
360
+ outline:1px solid var(--iui-color-foreground-primary);
361
+ outline-offset:-1px;
362
+ }
363
+ }
364
+ .iui-alert-button:where(:hover, :active){
365
+ --_iui-button-text-color:var(--iui-color-foreground-body);
366
+ --_iui-button-background-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-6));
367
+ }
368
+ .iui-alert-button:where(:focus){
369
+ outline-offset:-1px;
370
+ outline-width:1px;
371
+ }
372
+ .iui-alert-button:where([disabled], :disabled, [aria-disabled="true"]){
373
+ --_iui-button-text-color:var(--iui-text-color-placeholder);
374
+ --_iui-button-background-color:transparent;
375
+ --_iui-button-border-color:transparent;
376
+ }
377
+
378
+ .iui-alert-button-icon{
379
+ display:flex;
380
+ flex-shrink:0;
381
+ width:16px;
382
+ height:16px;
383
+ transition:fill 0.2s ease-out;
384
+ fill:currentColor;
385
+ margin-left:4px;
386
+ margin-right:4px;
387
+ }
388
+ .iui-alert-button-icon:only-child{
389
+ margin-left:var(--_iui-button-icon-margin-x);
390
+ margin-right:var(--_iui-button-icon-margin-x);
273
391
  }