@atlassian/aui 9.7.2 → 9.8.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 (35) hide show
  1. package/dist/aui/aui-prototyping-browserfocus.css +257 -516
  2. package/dist/aui/aui-prototyping-darkmode.css +5 -267
  3. package/dist/aui/aui-prototyping-design-tokens-api.js +1 -1
  4. package/dist/aui/aui-prototyping.css +9 -9
  5. package/dist/aui/aui-prototyping.css.map +1 -1
  6. package/dist/aui/aui-prototyping.js +6 -6
  7. package/dist/aui/aui-prototyping.js.map +1 -1
  8. package/dist/aui/aui-prototyping.nodeps.css +9 -9
  9. package/dist/aui/aui-prototyping.nodeps.css.map +1 -1
  10. package/dist/aui/aui-prototyping.nodeps.js +2 -2
  11. package/dist/aui/aui-prototyping.nodeps.js.map +1 -1
  12. package/entry/styles/aui.page.reset.js +0 -1
  13. package/package.json +1 -1
  14. package/src/js/aui/avatar-group.js +99 -86
  15. package/src/js/aui/banner.js +41 -33
  16. package/src/js/aui/dialog2.js +2 -2
  17. package/src/js/aui/flag.js +14 -15
  18. package/src/less/aui-appheader.less +1 -1
  19. package/src/less/aui-avatars.less +34 -34
  20. package/src/less/aui-banner.less +24 -16
  21. package/src/less/aui-dark-mode.less +2 -3
  22. package/src/less/aui-reset.less +1 -6
  23. package/src/less/aui-sidebar-navigation.less +10 -4
  24. package/src/less/aui-sidebar-skeleton.less +2 -1
  25. package/src/less/flag.less +28 -19
  26. package/src/less/imports/aui-theme/components/flag.less +3 -1
  27. package/src/less/imports/aui-theme/components/navigation.less +0 -1
  28. package/src/less/imports/aui-theme/components/sidebar.less +0 -1
  29. package/src/less/imports/aui-theme/core/colors.less +251 -237
  30. package/src/less/imports/aui-theme/core/spaces.less +14 -0
  31. package/src/less/imports/aui-theme/core-variables.less +1 -0
  32. package/src/less/imports/aui-theme/theme.less +14 -0
  33. package/src/less/imports/mixins/shadows.less +9 -0
  34. package/entry/styles/aui.page.design-tokens-mode.js +0 -1
  35. package/src/less/themes/themes.less +0 -2
@@ -1,270 +1,4 @@
1
- body.aui-theme-dark {
2
- color-scheme: dark;
3
- --aui-shadow1: rgba(9, 10, 11, 0.48);
4
- --aui-shadow2: rgba(9, 10, 11, 0.63);
5
- --aui-blanket: rgba(9, 10, 11, 0.73);
6
- --aui-body-text: #C7CED6;
7
- --aui-lesser-body-text: #65758B;
8
- --aui-lesser-header-text: #65758B;
9
- --aui-body-background: #202328;
10
- --aui-page-background: #202328;
11
- --aui-page-border: #202328;
12
- --aui-border: #2F353D;
13
- --aui-border-strong: #5A697C;
14
- --aui-focus: #4C9AFF;
15
- --aui-link-color: #4C9AFF;
16
- --aui-link-decoration: none;
17
- --aui-link-hover-color: #B3D4FF;
18
- --aui-link-active-color: #2684FF;
19
- --aui-link-hover-decoration: underline;
20
- --aui-link-visited-color: #998DD9;
21
- --aui-itemheading-text: #718298;
22
- --aui-item-bg: transparent;
23
- --aui-item-text: #A3AEBD;
24
- --aui-item-focus-bg: rgba(101, 117, 139, 0.3);
25
- --aui-item-focus-text: #A3AEBD;
26
- --aui-item-active-text: #0052CC;
27
- --aui-item-active-bg: #B3D4FF;
28
- --aui-item-selected-bg: var(--aui-item-focus-bg);
29
- --aui-item-selected-text: var(--aui-item-focus-text);
30
- --aui-item-disabled-bg: transparent;
31
- --aui-item-disabled-text: #5A697C;
32
- --aui-tooltip-bg-color: #D9DDE3;
33
- --aui-tooltip-border-color: #D9DDE3;
34
- --aui-tooltip-content-text-color: #262B31;
35
- --aui-tooltip-title-text-color: #101213;
36
- --aui-help-color: #6554C0;
37
- --aui-badge-bg-color: #3F4855;
38
- --aui-badge-text-color: #D9DDE3;
39
- --aui-badge-primary-bg-color: #4C9AFF;
40
- --aui-badge-primary-text-color: #090A0B;
41
- --aui-badge-added-bg-color: rgba(0, 102, 68, 0.33);
42
- --aui-badge-added-text-color: #ABF5D1;
43
- --aui-badge-removed-bg-color: rgba(191, 38, 0, 0.33);
44
- --aui-badge-removed-text-color: #FFBDAD;
45
- --aui-badge-important-bg-color: #FF5630;
46
- --aui-badge-important-text-color: #090A0B;
47
- --aui-badge-on-blue-text-color: #090A0B;
48
- --aui-badge-on-blue-bg-color: rgba(9, 10, 11, 0.25);
49
- --aui-avatar-outline: #090A0B;
50
- --aui-avatar-text: #5A697C;
51
- --aui-lozenge-bg-color: #929FB0;
52
- --aui-lozenge-text-color: #090A0B;
53
- --aui-lozenge-subtle-bg-color: #2F353D;
54
- --aui-lozenge-subtle-text-color: #A3AEBD;
55
- --aui-lozenge-success-bg-color: #57D9A3;
56
- --aui-lozenge-success-text-color: #090A0B;
57
- --aui-lozenge-success-subtle-bg-color: rgba(0, 102, 68, 0.33);
58
- --aui-lozenge-success-subtle-text-color: #ABF5D1;
59
- --aui-lozenge-current-bg-color: #2684FF;
60
- --aui-lozenge-current-text-color: #090A0B;
61
- --aui-lozenge-current-subtle-bg-color: rgba(7, 71, 166, 0.33);
62
- --aui-lozenge-current-subtle-text-color: #B3D4FF;
63
- --aui-lozenge-moved-bg-color: #FFAB00;
64
- --aui-lozenge-moved-text-color: #090A0B;
65
- --aui-lozenge-moved-subtle-bg-color: rgba(255, 139, 0, 0.22);
66
- --aui-lozenge-moved-subtle-text-color: #FFF0B3;
67
- --aui-lozenge-error-bg-color: #FF5630;
68
- --aui-lozenge-error-text-color: #090A0B;
69
- --aui-lozenge-error-subtle-bg-color: rgba(191, 38, 0, 0.33);
70
- --aui-lozenge-error-subtle-text-color: #FFBDAD;
71
- --aui-lozenge-new-bg-color: #8777D9;
72
- --aui-lozenge-new-text-color: #090A0B;
73
- --aui-lozenge-new-subtle-bg-color: rgba(64, 50, 148, 0.33);
74
- --aui-lozenge-new-subtle-text-color: #C0B6F2;
75
- --aui-message-info-bg-color: #0747A6;
76
- --aui-message-info-icon-color: initial;
77
- --aui-message-info-text-color: #E8EAEE;
78
- --aui-message-success-bg-color: #006644;
79
- --aui-message-success-icon-color: initial;
80
- --aui-message-success-text-color: #E8EAEE;
81
- --aui-message-warning-bg-color: #FF991F;
82
- --aui-message-warning-icon-color: initial;
83
- --aui-message-warning-text-color: #17191C;
84
- --aui-message-error-bg-color: #BF2600;
85
- --aui-message-error-icon-color: initial;
86
- --aui-message-error-text-color: #E8EAEE;
87
- --aui-message-change-bg-color: #5243AA;
88
- --aui-message-change-icon-color: initial;
89
- --aui-message-change-text-color: #E8EAEE;
90
- --aui-banner-error-bg-color: #DE350B;
91
- --aui-banner-error-text-color: #F6F7F8;
92
- --aui-flag-bg-color: var(--aui-dropdown-bg-color);
93
- --aui-flag-info-color: #2684FF;
94
- --aui-flag-success-color: #36B37E;
95
- --aui-flag-warning-color: #FFAB00;
96
- --aui-flag-error-color: #FF5630;
97
- --aui-button-default-bg-color: #373F49;
98
- --aui-button-default-text-color: #C7CED6;
99
- --aui-button-default-hover-bg-color: #515F70;
100
- --aui-button-default-active-bg-color: #B3D4FF;
101
- --aui-button-default-active-text-color: #C7CED6;
102
- --aui-button-default-selected-bg-color: #8392A5;
103
- --aui-button-default-selected-text-color: #C7CED6;
104
- --aui-button-default-disabled-bg-color: #3F4855;
105
- --aui-button-default-disabled-text-color: #202328;
106
- --aui-button-primary-bg-color: #4C9AFF;
107
- --aui-button-primary-text-color: #202328;
108
- --aui-button-primary-hover-bg-color: #B3D4FF;
109
- --aui-button-primary-active-bg-color: #2684FF;
110
- --aui-button-primary-active-text-color: #090A0B;
111
- --aui-button-primary-disabled-bg-color: var(--aui-button-default-disabled-bg-color);
112
- --aui-button-primary-disabled-text-color: var(--aui-button-default-disabled-text-color);
113
- --aui-button-light-bg-color: transparent;
114
- --aui-button-subtle-text-color: #A3AEBD;
115
- --aui-label-text-color: #C7CED6;
116
- --aui-label-link-color: #C7CED6;
117
- --aui-label-bg-color: #3F4855;
118
- --aui-label-hover-bg-color: #475262;
119
- --aui-label-close-hover-bg-color: #DE350B;
120
- --aui-label-close-hover-text-color: #202328;
121
- --aui-form-placeholder-text-color: #65758B;
122
- --aui-form-placeholder-disabled-text-color: #3F4855;
123
- --aui-form-label-text-color: #8392A5;
124
- --aui-form-error-text-color: #BF2600;
125
- --aui-form-description-text-color: #8392A5;
126
- --aui-form-disabled-field-bg-color: #202328;
127
- --aui-form-disabled-field-text-color: #475262;
128
- --aui-form-disabled-field-label-color: #475262;
129
- --aui-form-field-border-color: #475262;
130
- --aui-form-field-hover-border-color: #475262;
131
- --aui-form-field-default-text-color: #C7CED6;
132
- --aui-form-field-default-bg-color: #262B31;
133
- --aui-form-field-hover-text-color: var(--aui-form-field-default-text-color);
134
- --aui-form-field-hover-bg-color: #202328;
135
- --aui-form-field-focus-bg-color: #090A0B;
136
- --aui-form-select-bg-color: #3F4855;
137
- --aui-form-select-border-color: #3F4855;
138
- --aui-form-select-hover-bg-color: #262B31;
139
- --aui-form-checkbox-radio-active-bg-color: #4C9AFF;
140
- --aui-form-optgroup-text-color: #5A697C;
141
- --aui-form-optgroup-bg-color: #17191C;
142
- --aui-form-option-bg-color: #090A0B;
143
- --aui-form-pre-bg-color: #17191C;
144
- --aui-form-field-autofilled-bg-color: #403294;
145
- --aui-form-field-autofilled-border-color: #998DD9;
146
- --aui-form-field-autofilled-text-color: #C0B6F2;
147
- --aui-form-glyph-disabled-icon-color: #65758B;
148
- --aui-form-glyph-disabled-fill-color: #3F4855;
149
- --aui-form-glyph-icon-color: #D9DDE3;
150
- --aui-form-glyph-fill-color: #0052CC;
151
- --aui-form-checkbox-active-bg-color: #DEEBFF;
152
- --aui-form-checkbox-active-border-color: #DEEBFF;
153
- --aui-form-checkbox-active-icon-color: #2684FF;
154
- --aui-form-radio-unchecked-bg-color: #101213;
155
- --aui-form-radio-unchecked-border-color: #3F4855;
156
- --aui-toggle-default-bg-color: #515F70;
157
- --aui-toggle-default-bg-hover-color: #5A697C;
158
- --aui-toggle-button-color: #202328;
159
- --aui-toggle-on-color: #36B37E;
160
- --aui-toggle-on-hover-color: #57D9A3;
161
- --aui-toggle-disabled-overlay-color: rgba(32, 35, 40, 0.5);
162
- --aui-toggle-tick-color: #202328;
163
- --aui-toggle-cross-color: #202328;
164
- --aui-form-notification-info-color: #475262;
165
- --aui-form-notification-error-color: #FF5630;
166
- --aui-form-notification-success-color: #36B37E;
167
- --aui-progressbar-color: #C7CED6;
168
- --aui-progressbar-track-color: rgba(9, 10, 11, 0.85);
169
- --aui-spinner-color: #C7CED6;
170
- --aui-nav-pagination-text-color: #C7CED6;
171
- --aui-nav-pagination-active-text-color: #475262;
172
- --aui-appheader-bg-color: #0747A6;
173
- --aui-appheader-text-color: #DEEBFF;
174
- --aui-appheader-item-focus-bg-color: rgba(9, 10, 11, 0.36);
175
- --aui-appheader-item-focus-text-color: #DEEBFF;
176
- --aui-appheader-item-active-bg-color: rgba(9, 10, 11, 0.63);
177
- --aui-appheader-item-active-text-color: #DEEBFF;
178
- --aui-appheader-quicksearch-bg-color: rgba(9, 10, 11, 0.63);
179
- --aui-appheader-quicksearch-border-color: transparent;
180
- --aui-appheader-quicksearch-text-color: #DEEBFF;
181
- --aui-appheader-quicksearch-placeholder-text-color: #8392A5;
182
- --aui-appheader-quicksearch-focus-bg-color: var(--aui-appheader-quicksearch-bg-color);
183
- --aui-appheader-quicksearch-focus-text-color: #DEEBFF;
184
- --aui-sidebar-icon-color: #8392A5;
185
- --aui-sidebar-toggle-icon-color: #8392A5;
186
- --aui-sidebar-bg-color: #17191C;
187
- --aui-sidebar-dropdown-arrow-color: #8392A5;
188
- --aui-sidebar-tooltip-bg-color: rgba(9, 10, 11, 0.97);
189
- --aui-sidebar-badge-bg-color: rgba(246, 247, 248, 0.19);
190
- --aui-sidebar-badge-text-color: inherit;
191
- --aui-tabs-tab-border-color: #373F49;
192
- --aui-tabs-tab-text-color: #8392A5;
193
- --aui-tabs-tab-hover-text-color: #4C9AFF;
194
- --aui-tabs-tab-active-border-color: #4C9AFF;
195
- --aui-tabs-tab-active-text-color: #4C9AFF;
196
- --aui-progress-tracker-current-step-color: #0065FF;
197
- --aui-progress-tracker-current-step-text-color: var(--aui-progress-tracker-visited-step-text-color);
198
- --aui-progress-tracker-visited-step-text-color: #C7CED6;
199
- --aui-progress-tracker-visited-step-hover-text-color: var(--aui-link-hover-color);
200
- --aui-progress-tracker-visited-step-active-text-color: var(--aui-link-active-color);
201
- --aui-progress-tracker-future-step-color: #3F4855;
202
- --aui-progress-tracker-future-step-text-color: #718298;
203
- --aui-table-row-bg-color: transparent;
204
- --aui-table-row-text-color: #C7CED6;
205
- --aui-table-header-bg-color: transparent;
206
- --aui-table-heading-text-color: #8392A5;
207
- --aui-table-border-color: #2F353D;
208
- --aui-table-caption-bg-color: #17191C;
209
- --aui-table-caption-text-color: #5A697C;
210
- --aui-table-list-row-hover-color: #262B31;
211
- --aui-table-list-row-subtle-color: #373F49;
212
- --aui-table-sortable-hover-bg-color: rgba(9, 10, 11, 0.18);
213
- --aui-table-sortable-active-bg-color: #DEEBFF;
214
- --aui-table-sortable-active-border-color: #2684FF;
215
- --aui-table-sortable-active-text-color: #2684FF;
216
- --aui-table-sortable-selected-bg-color: transparent;
217
- --aui-table-sortable-selected-border-color: #8392A5;
218
- --aui-table-sortable-selected-text-color: #C7CED6;
219
- --aui-restfultable-row-focused-border-color: #373F49;
220
- --aui-restfultable-row-create-border-color: #262B31;
221
- --aui-restfultable-row-editable-hover-bg-color: var(--aui-form-field-hover-bg-color);
222
- --aui-restfultable-error-text-color: var(--aui-form-notification-error-color);
223
- --aui-restfultable-header-row-bg-color: #090A0B;
224
- --aui-restfultable-header-row-text-color: #65758B;
225
- --aui-restfultable-row-moving-bg-color: #17191C;
226
- --aui-restfultable-editable-em-text-color: #475262;
227
- --aui-restfultable-row-active-bg-color: #17191C;
228
- --aui-restfultable-row-hover-bg-color: #17191C;
229
- --aui-dropdown-bg-color: #2F353D;
230
- --aui-dropdown-border-color: #3F4855;
231
- --aui-select2-placeholder-text-color: #5A697C;
232
- --aui-select2-chosen-bg-color: #202328;
233
- --aui-select2-chosen-text-color: #C7CED6;
234
- --aui-select2-chosen-hover-bg-color: #475262;
235
- --aui-select2-chosen-hover-text-color: #C7CED6;
236
- --aui-select2-active-chosen-bg-color: #475262;
237
- --aui-select2-active-chosen-text-color: #C7CED6;
238
- --aui-select2-field-default-bg-color: var(--aui-form-select-bg-color);
239
- --aui-select2-field-border-color: var(--aui-form-select-border-color);
240
- --aui-select2-field-hover-bg-color: var(--aui-form-select-hover-bg-color);
241
- --aui-select2-drop-bg-color: var(--aui-dropdown-bg-color);
242
- --aui-dialog-bg-color: #262B31;
243
- --aui-dialog-border-color: #262B31;
244
- --aui-dialog-header-bg-color: var(--aui-dialog-bg-color);
245
- --aui-dialog-header-warning-bg-color: #FF7452;
246
- --aui-dialog-header-warning-text-color: #090A0B;
247
- --aui-dialog-button-hover-border-color: #475262;
248
- --aui-dialog-footer-hint-text-color: #8392A5;
249
- --aui-inline-dialog-bg-color: var(--aui-dropdown-bg-color);
250
- --aui-inline-dialog-border-color: var(--aui-dropdown-border-color);
251
- --aui-datepicker-panel-bg-color: #2F353D;
252
- --aui-datepicker-panel-divider-color: #2F353D;
253
- --aui-datepicker-heading-bg-color: #2F353D;
254
- --aui-datepicker-heading-text-color: #A3AEBD;
255
- --aui-datepicker-heading-weekdays-text-color: #718298;
256
- --aui-datepicker-option-bg-color: transparent;
257
- --aui-datepicker-option-text-color: #A3AEBD;
258
- --aui-datepicker-option-focus-bg-color: #3F4855;
259
- --aui-datepicker-option-focus-text-color: #A3AEBD;
260
- --aui-datepicker-option-selected-bg-color: #090A0B;
261
- --aui-datepicker-option-selected-text-color: #2684FF;
262
- --aui-datepicker-option-unselectable-bg-color: transparent;
263
- --aui-datepicker-option-unselectable-text-color: #5A697C;
264
- --aui-datepicker-disabled-text-color: #5A697C;
265
- --aui-datepicker-hint-text-color: #8392A5;
266
- }
267
- html[data-color-mode="dark"] body.aui-theme-design-tokens {
1
+ body.aui-theme-dark {
268
2
  color-scheme: dark;
269
3
  --aui-shadow1: rgba(9, 10, 11, 0.48);
270
4
  --aui-shadow2: rgba(9, 10, 11, 0.63);
@@ -355,6 +89,10 @@ html[data-color-mode="dark"] body.aui-theme-design-tokens {
355
89
  --aui-message-change-text-color: #E8EAEE;
356
90
  --aui-banner-error-bg-color: #DE350B;
357
91
  --aui-banner-error-text-color: #F6F7F8;
92
+ --aui-banner-warning-bg-color: #FFAB00;
93
+ --aui-banner-warning-text-color: #202328;
94
+ --aui-banner-announcement-bg-color: #3F4855;
95
+ --aui-banner-announcement-text-color: #F6F7F8;
358
96
  --aui-flag-bg-color: var(--aui-dropdown-bg-color);
359
97
  --aui-flag-info-color: #2684FF;
360
98
  --aui-flag-success-color: #36B37E;
@@ -1,6 +1,6 @@
1
1
  /*!!
2
2
  * @atlassian/aui - Atlassian User Interface library
3
- * @version v9.7.2
3
+ * @version v9.8.0
4
4
  * @link https://aui.atlassian.com
5
5
  * @license Apache-2.0
6
6
  * @author Atlassian Pty Ltd.