@itwin/itwinui-css 0.52.0 → 0.53.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 (70) hide show
  1. package/css/alert.css +44 -44
  2. package/css/all.css +1946 -1215
  3. package/css/badge.css +1 -1
  4. package/css/blockquote.css +2 -2
  5. package/css/breadcrumbs.css +12 -12
  6. package/css/button.css +37 -37
  7. package/css/carousel.css +24 -36
  8. package/css/code.css +5 -5
  9. package/css/color-picker.css +14 -10
  10. package/css/date-picker.css +402 -46
  11. package/css/expandable-block.css +19 -19
  12. package/css/fieldset.css +4 -4
  13. package/css/file-upload.css +11 -11
  14. package/css/footer.css +2 -2
  15. package/css/global.css +539 -208
  16. package/css/header.css +49 -38
  17. package/css/icon.css +24 -24
  18. package/css/information-panel.css +15 -8
  19. package/css/inputs.css +72 -72
  20. package/css/keyboard.css +4 -4
  21. package/css/location-marker.css +9 -9
  22. package/css/menu.css +25 -12
  23. package/css/modal.css +1 -1
  24. package/css/notification-marker.css +28 -28
  25. package/css/progress-indicator.css +32 -32
  26. package/css/side-navigation.css +18 -18
  27. package/css/skip-to-content.css +1 -1
  28. package/css/slider.css +13 -13
  29. package/css/surface.css +19 -0
  30. package/css/table.css +78 -74
  31. package/css/tabs.css +23 -23
  32. package/css/tag.css +4 -4
  33. package/css/text.css +1 -1
  34. package/css/tile.css +35 -35
  35. package/css/time-picker.css +15 -15
  36. package/css/toast-notification.css +34 -34
  37. package/css/tooltip.css +3 -1
  38. package/css/tree.css +7 -7
  39. package/css/user-icon.css +15 -16
  40. package/css/wizard.css +26 -26
  41. package/package.json +1 -1
  42. package/scss/carousel/carousel.scss +22 -28
  43. package/scss/classes.scss +1 -0
  44. package/scss/color-picker/color-picker.scss +2 -2
  45. package/scss/date-picker/classes.scss +20 -0
  46. package/scss/date-picker/date-picker.scss +194 -33
  47. package/scss/fieldset/fieldset.scss +1 -1
  48. package/scss/header/header.scss +15 -10
  49. package/scss/index.scss +1 -0
  50. package/scss/information-panel/information-panel.scss +10 -3
  51. package/scss/menu/classes.scss +2 -1
  52. package/scss/menu/menu.scss +8 -11
  53. package/scss/modal/modal.scss +2 -1
  54. package/scss/progress-indicator/linear.scss +1 -1
  55. package/scss/progress-indicator/radial.scss +1 -1
  56. package/scss/side-navigation/side-navigation.scss +5 -5
  57. package/scss/slider/slider.scss +2 -2
  58. package/scss/style/elevation.scss +5 -5
  59. package/scss/style/global.scss +32 -21
  60. package/scss/style/mixins.scss +1 -1
  61. package/scss/style/theme.scss +248 -65
  62. package/scss/surface/classes.scss +7 -0
  63. package/scss/surface/index.scss +3 -0
  64. package/scss/surface/surface.scss +18 -0
  65. package/scss/table/column-filter.scss +2 -2
  66. package/scss/table/table.scss +3 -3
  67. package/scss/tile/tile.scss +5 -5
  68. package/scss/time-picker/time-picker.scss +2 -2
  69. package/scss/tooltip/tooltip.scss +1 -0
  70. package/scss/wizard/wizard.scss +1 -1
package/css/alert.css CHANGED
@@ -11,9 +11,9 @@
11
11
  box-sizing:border-box;
12
12
  display:flex;
13
13
  align-items:center;
14
- border:1px solid #C7CCD1;
14
+ border:1px solid #c7ccd1;
15
15
  color:rgba(0, 0, 0, 0.8);
16
- background-color:#FFF;
16
+ background-color:white;
17
17
  border:1px solid var(--iui-color-background-5);
18
18
  color:var(--iui-text-color);
19
19
  background-color:var(--iui-color-background-1);
@@ -28,19 +28,19 @@
28
28
  margin-left:16px;
29
29
  }
30
30
  .iui-alert-icon.iui-informational{
31
- fill:#008BE1;
31
+ fill:#008ae0;
32
32
  fill:var(--iui-icons-color-primary);
33
33
  }
34
34
  .iui-alert-icon.iui-positive{
35
- fill:#53A21A;
35
+ fill:#53a21a;
36
36
  fill:var(--iui-icons-color-positive);
37
37
  }
38
38
  .iui-alert-icon.iui-warning{
39
- fill:#F18B12;
39
+ fill:#f18d13;
40
40
  fill:var(--iui-icons-color-warning);
41
41
  }
42
42
  .iui-alert-icon.iui-negative{
43
- fill:#D30A0A;
43
+ fill:#d10a0a;
44
44
  fill:var(--iui-icons-color-negative);
45
45
  }
46
46
  .iui-alert-message{
@@ -55,7 +55,7 @@
55
55
  -ms-user-select:none;
56
56
  user-select:none;
57
57
  white-space:nowrap;
58
- color:#008BE1;
58
+ color:#008ae0;
59
59
  color:var(--iui-color-foreground-primary);
60
60
  }
61
61
  .iui-alert-link:focus-visible{
@@ -70,7 +70,7 @@
70
70
  }
71
71
  .iui-alert-link:hover{
72
72
  text-decoration:none;
73
- color:#006bae;
73
+ color:#006bad;
74
74
  color:var(--iui-color-foreground-primary-overlay);
75
75
  }
76
76
  .iui-alert > .iui-button{
@@ -85,31 +85,31 @@
85
85
  width:100vw;
86
86
  }
87
87
  .iui-alert.iui-positive{
88
- background:linear-gradient(rgba(83, 162, 26, 0.1), rgba(83, 162, 26, 0.1)), linear-gradient(#FFF, #FFF);
89
- border-color:#53A21A;
88
+ background:linear-gradient(rgba(83, 162, 26, 0.1), rgba(83, 162, 26, 0.1)), linear-gradient(white, white);
89
+ border-color:#53a21a;
90
90
  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));
91
91
  border-color:var(--iui-color-foreground-positive);
92
92
  }
93
93
  .iui-alert.iui-positive .iui-alert-icon{
94
- fill:#53A21A;
94
+ fill:#53a21a;
95
95
  fill:var(--iui-icons-color-positive);
96
96
  }
97
97
  .iui-alert.iui-positive .iui-alert-message::-moz-selection, .iui-alert.iui-positive .iui-alert-message *::-moz-selection{
98
- background-color:rgba(83, 162, 26, 0.4);
99
- background-color:rgba(var(--iui-color-foreground-positive-rgb), var(--iui-opacity-4));
98
+ background-color:rgba(83, 162, 26, 0.2);
99
+ background-color:rgba(var(--iui-color-foreground-positive-rgb), var(--iui-opacity-5));
100
100
  }
101
101
  .iui-alert.iui-positive .iui-alert-message::selection,
102
102
  .iui-alert.iui-positive .iui-alert-message *::selection{
103
- background-color:rgba(83, 162, 26, 0.4);
104
- background-color:rgba(var(--iui-color-foreground-positive-rgb), var(--iui-opacity-4));
103
+ background-color:rgba(83, 162, 26, 0.2);
104
+ background-color:rgba(var(--iui-color-foreground-positive-rgb), var(--iui-opacity-5));
105
105
  }
106
106
  .iui-alert.iui-positive .iui-alert-link{
107
107
  border-radius:3px;
108
- color:#53A21A;
108
+ color:#53a21a;
109
109
  color:var(--iui-color-foreground-positive);
110
110
  }
111
111
  .iui-alert.iui-positive .iui-alert-link:hover{
112
- color:#3c7613;
112
+ color:#3d7613;
113
113
  color:var(--iui-color-foreground-positive-overlay);
114
114
  }
115
115
  .iui-alert.iui-positive .iui-alert-link:focus-visible{
@@ -126,31 +126,31 @@
126
126
  outline-color:var(--iui-color-foreground-positive);
127
127
  }
128
128
  .iui-alert.iui-negative{
129
- background:linear-gradient(rgba(211, 10, 10, 0.1), rgba(211, 10, 10, 0.1)), linear-gradient(#FFF, #FFF);
130
- border-color:#D30A0A;
129
+ background:linear-gradient(rgba(209, 10, 10, 0.1), rgba(209, 10, 10, 0.1)), linear-gradient(white, white);
130
+ border-color:#d10a0a;
131
131
  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));
132
132
  border-color:var(--iui-color-foreground-negative);
133
133
  }
134
134
  .iui-alert.iui-negative .iui-alert-icon{
135
- fill:#D30A0A;
135
+ fill:#d10a0a;
136
136
  fill:var(--iui-icons-color-negative);
137
137
  }
138
138
  .iui-alert.iui-negative .iui-alert-message::-moz-selection, .iui-alert.iui-negative .iui-alert-message *::-moz-selection{
139
- background-color:rgba(211, 10, 10, 0.4);
140
- background-color:rgba(var(--iui-color-foreground-negative-rgb), var(--iui-opacity-4));
139
+ background-color:rgba(209, 10, 10, 0.2);
140
+ background-color:rgba(var(--iui-color-foreground-negative-rgb), var(--iui-opacity-5));
141
141
  }
142
142
  .iui-alert.iui-negative .iui-alert-message::selection,
143
143
  .iui-alert.iui-negative .iui-alert-message *::selection{
144
- background-color:rgba(211, 10, 10, 0.4);
145
- background-color:rgba(var(--iui-color-foreground-negative-rgb), var(--iui-opacity-4));
144
+ background-color:rgba(209, 10, 10, 0.2);
145
+ background-color:rgba(var(--iui-color-foreground-negative-rgb), var(--iui-opacity-5));
146
146
  }
147
147
  .iui-alert.iui-negative .iui-alert-link{
148
148
  border-radius:3px;
149
- color:#D30A0A;
149
+ color:#d10a0a;
150
150
  color:var(--iui-color-foreground-negative);
151
151
  }
152
152
  .iui-alert.iui-negative .iui-alert-link:hover{
153
- color:#a20808;
153
+ color:#a10808;
154
154
  color:var(--iui-color-foreground-negative-overlay);
155
155
  }
156
156
  .iui-alert.iui-negative .iui-alert-link:focus-visible{
@@ -167,31 +167,31 @@
167
167
  outline-color:var(--iui-color-foreground-negative);
168
168
  }
169
169
  .iui-alert.iui-warning{
170
- background:linear-gradient(rgba(241, 139, 18, 0.1), rgba(241, 139, 18, 0.1)), linear-gradient(#FFF, #FFF);
171
- border-color:#F18B12;
170
+ background:linear-gradient(rgba(241, 141, 19, 0.1), rgba(241, 141, 19, 0.1)), linear-gradient(white, white);
171
+ border-color:#f18d13;
172
172
  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));
173
173
  border-color:var(--iui-color-foreground-warning);
174
174
  }
175
175
  .iui-alert.iui-warning .iui-alert-icon{
176
- fill:#F18B12;
176
+ fill:#f18d13;
177
177
  fill:var(--iui-icons-color-warning);
178
178
  }
179
179
  .iui-alert.iui-warning .iui-alert-message::-moz-selection, .iui-alert.iui-warning .iui-alert-message *::-moz-selection{
180
- background-color:rgba(241, 139, 18, 0.4);
181
- background-color:rgba(var(--iui-color-foreground-warning-rgb), var(--iui-opacity-4));
180
+ background-color:rgba(241, 141, 19, 0.2);
181
+ background-color:rgba(var(--iui-color-foreground-warning-rgb), var(--iui-opacity-5));
182
182
  }
183
183
  .iui-alert.iui-warning .iui-alert-message::selection,
184
184
  .iui-alert.iui-warning .iui-alert-message *::selection{
185
- background-color:rgba(241, 139, 18, 0.4);
186
- background-color:rgba(var(--iui-color-foreground-warning-rgb), var(--iui-opacity-4));
185
+ background-color:rgba(241, 141, 19, 0.2);
186
+ background-color:rgba(var(--iui-color-foreground-warning-rgb), var(--iui-opacity-5));
187
187
  }
188
188
  .iui-alert.iui-warning .iui-alert-link{
189
189
  border-radius:3px;
190
- color:#F18B12;
190
+ color:#f18d13;
191
191
  color:var(--iui-color-foreground-warning);
192
192
  }
193
193
  .iui-alert.iui-warning .iui-alert-link:hover{
194
- color:#c4700c;
194
+ color:#c6720c;
195
195
  color:var(--iui-color-foreground-warning-overlay);
196
196
  }
197
197
  .iui-alert.iui-warning .iui-alert-link:focus-visible{
@@ -208,31 +208,31 @@
208
208
  outline-color:var(--iui-color-foreground-warning);
209
209
  }
210
210
  .iui-alert.iui-informational{
211
- background:linear-gradient(rgba(0, 139, 225, 0.1), rgba(0, 139, 225, 0.1)), linear-gradient(#FFF, #FFF);
212
- border-color:#008BE1;
211
+ background:linear-gradient(rgba(0, 138, 224, 0.1), rgba(0, 138, 224, 0.1)), linear-gradient(white, white);
212
+ border-color:#008ae0;
213
213
  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));
214
214
  border-color:var(--iui-color-foreground-primary);
215
215
  }
216
216
  .iui-alert.iui-informational .iui-alert-icon{
217
- fill:#008BE1;
217
+ fill:#008ae0;
218
218
  fill:var(--iui-icons-color-primary);
219
219
  }
220
220
  .iui-alert.iui-informational .iui-alert-message::-moz-selection, .iui-alert.iui-informational .iui-alert-message *::-moz-selection{
221
- background-color:rgba(0, 139, 225, 0.4);
222
- background-color:rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-4));
221
+ background-color:rgba(0, 138, 224, 0.2);
222
+ background-color:rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-5));
223
223
  }
224
224
  .iui-alert.iui-informational .iui-alert-message::selection,
225
225
  .iui-alert.iui-informational .iui-alert-message *::selection{
226
- background-color:rgba(0, 139, 225, 0.4);
227
- background-color:rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-4));
226
+ background-color:rgba(0, 138, 224, 0.2);
227
+ background-color:rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-5));
228
228
  }
229
229
  .iui-alert.iui-informational .iui-alert-link{
230
230
  border-radius:3px;
231
- color:#008BE1;
231
+ color:#008ae0;
232
232
  color:var(--iui-color-foreground-primary);
233
233
  }
234
234
  .iui-alert.iui-informational .iui-alert-link:hover{
235
- color:#006bae;
235
+ color:#006bad;
236
236
  color:var(--iui-color-foreground-primary-overlay);
237
237
  }
238
238
  .iui-alert.iui-informational .iui-alert-link:focus-visible{