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

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