@itwin/itwinui-css 0.63.1 → 1.0.0-dev.2

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