@atlassian/aui 9.9.3 → 9.9.6

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 (31) hide show
  1. package/dist/aui/aui-prototyping-browserfocus.css +10 -10
  2. package/dist/aui/aui-prototyping-darkmode.css +6 -6
  3. package/dist/aui/aui-prototyping-design-tokens-api-full.js +1 -1
  4. package/dist/aui/aui-prototyping-design-tokens-api.js +1 -1
  5. package/dist/aui/aui-prototyping-design-tokens-base-themes-css.css +2 -2
  6. package/dist/aui/aui-prototyping-design-tokens-base-themes-css.css.map +1 -1
  7. package/dist/aui/aui-prototyping-design-tokens-base-themes-css.js +1 -1
  8. package/dist/aui/aui-prototyping-design-tokens-base-themes.js +1 -1
  9. package/dist/aui/aui-prototyping.css +8 -8
  10. package/dist/aui/aui-prototyping.css.map +1 -1
  11. package/dist/aui/aui-prototyping.js +23 -20
  12. package/dist/aui/aui-prototyping.js.map +1 -1
  13. package/dist/aui/aui-prototyping.nodeps.css +8 -8
  14. package/dist/aui/aui-prototyping.nodeps.css.map +1 -1
  15. package/dist/aui/aui-prototyping.nodeps.js +31 -28
  16. package/dist/aui/aui-prototyping.nodeps.js.map +1 -1
  17. package/entry/token-themes-generated/npm/aui-prototyping-design-tokens-base-themes.css +0 -969
  18. package/entry/token-themes-generated/p2/aui-prototyping-design-tokens-theme.css +0 -969
  19. package/package.json +1 -1
  20. package/src/js/aui/select2.js +30 -2
  21. package/src/js/aui/tables-sortable.js +1 -0
  22. package/src/js/aui/tooltip.js +41 -6
  23. package/src/js-vendor/jquery/jquery.tablesorter.js +1920 -1891
  24. package/src/less/aui-appheader.less +1 -1
  25. package/src/less/aui-experimental-labels.less +13 -6
  26. package/src/less/forms-radios-and-checkboxes.less +27 -30
  27. package/src/less/imports/aui-theme/adg/adg-colors.less +1 -0
  28. package/src/less/imports/aui-theme/components/forms.less +8 -0
  29. package/src/less/imports/aui-theme/components/label.less +2 -0
  30. package/src/less/imports/aui-theme/core/colors.less +16 -16
  31. package/src/less/imports/aui-theme/core/layers.less +3 -1
package/src/less/aui-appheader.less CHANGED
@@ -34,7 +34,7 @@ aui-header,
34
34
  @section-gap: 20px;
35
35
 
36
36
  box-sizing: border-box;
37
- padding: 0 @aui-grid;
37
+ padding: 7px @aui-grid 10px @aui-grid;
38
38
  position: relative;
39
39
 
40
40
  .aui-header-before {
package/src/less/aui-experimental-labels.less CHANGED
@@ -36,7 +36,7 @@ a.aui-label:active {
36
36
 
37
37
  .aui-label-split .aui-label-split-main:hover,
38
38
  .aui-label-split .aui-label-split-main:active,
39
- .aui-label-split .aui-label-split-main:focus{
39
+ .aui-label-split .aui-label-split-main:focus {
40
40
  text-decoration: none;
41
41
  }
42
42
 
@@ -55,7 +55,6 @@ a.aui-label:active {
55
55
  top: 0;
56
56
  bottom: 0;
57
57
  width: @aui-label-close-button-width;
58
- filter: opacity(0.5);
59
58
 
60
59
  //The close cross
61
60
  &::before {
@@ -64,10 +63,18 @@ a.aui-label:active {
64
63
  font-size: 10px;
65
64
  margin: auto;
66
65
  }
66
+ }
67
+
68
+ /*
69
+ * Hover pseudo class can't be triggered in automated tests
70
+ * As a workaround we use a normal css class for testing
71
+ */
72
+ .aui-label-closeable:has(.aui-icon-close:hover),
73
+ .aui-label-closeable:has(.aui-icon-close.hover) {
74
+ background: @aui-label-closable-bg-color;
75
+ color: @aui-label-closable-text-color;
67
76
 
68
- &:hover, &:focus {
69
- background: var(--aui-label-close-hover-bg-color);
70
- color: var(--aui-label-close-hover-text-color);
71
- filter: none;
77
+ a.aui-label-split-main {
78
+ color: @aui-label-closable-text-color;
72
79
  }
73
80
  }
package/src/less/forms-radios-and-checkboxes.less CHANGED
@@ -3,13 +3,14 @@
3
3
  @import (reference) './imports/aui-theme/components/forms';
4
4
 
5
5
  @label-left-offset: 20px;
6
- @button-border-width: 2px;
6
+ @button-border-width: @aui-form-button-border-width;
7
7
  @button-focus-size: 12px;
8
8
  @button-focus-border-color: @aui-focus-ring-color;
9
9
  @button-focus-border: @aui-form-button-focus-border-width solid @button-focus-border-color;
10
10
 
11
11
  @radio-offset-top: 4px;
12
12
  @radio-offset-left: 0px;
13
+ @radio-glyph-offset-adjustment: 2px;
13
14
 
14
15
  @checkbox-offset-top: 3px;
15
16
  @checkbox-offset-left: 0px;
@@ -48,26 +49,32 @@ form.aui:not(.aui-legacy-forms) {
48
49
  top: @radio-offset-top - 1px;
49
50
  }
50
51
  .aui-radio-position(iconfont) {
51
- @fudge: 2px; // the glyph renders in a slightly different position for font-related reasons.
52
52
  position: absolute;
53
- left: @radio-offset-left - @fudge/2;
54
- top: @radio-offset-top - @fudge;
53
+ left: @radio-offset-left - @radio-glyph-offset-adjustment/2;
54
+ top: @radio-offset-top - @radio-glyph-offset-adjustment;
55
+ }
56
+ .aui-radio-outline-position() {
57
+ position: absolute;
58
+ left: @radio-offset-left - @aui-form-button-border-width - @aui-form-radio-checkbox-outline-padding-space;
59
+ top: @radio-offset-top - 1px - @aui-form-button-border-width - @aui-form-radio-checkbox-outline-padding-space;
55
60
  }
56
61
  .aui-checkbox-position() {
57
62
  position: absolute;
58
63
  left: @checkbox-offset-left;
59
64
  top: @checkbox-offset-top;
60
65
  }
61
- .aui-checkbox-focus-position() {
66
+ .aui-checkbox-outline-position() {
62
67
  position: absolute;
63
- left: @checkbox-offset-left - @aui-form-button-focus-border-width + 1px;
64
- top: @checkbox-offset-top - @aui-form-button-focus-border-width + 1px;
68
+ left: @checkbox-offset-left - @aui-form-button-border-width - @aui-form-radio-checkbox-outline-padding-space;
69
+ top: @checkbox-offset-top - @aui-form-button-border-width - @aui-form-radio-checkbox-outline-padding-space;
65
70
  }
66
71
  .aui-radio-disabled-style() {
67
72
  & ~ label {
73
+ cursor: not-allowed;
68
74
  color: @aui-form-disabled-field-label-color;
69
75
  }
70
76
  & + .aui-form-glyph::before {
77
+ cursor: not-allowed;
71
78
  color: @radio-disabled-bg-color;
72
79
  border-color: transparent;
73
80
  background: transparent;
@@ -75,9 +82,11 @@ form.aui:not(.aui-legacy-forms) {
75
82
  }
76
83
  .aui-checkbox-disabled-style() {
77
84
  & ~ label {
85
+ cursor: not-allowed;
78
86
  color: @aui-form-disabled-field-label-color;
79
87
  }
80
88
  & + .aui-form-glyph::before {
89
+ cursor: not-allowed;
81
90
  color: @checkbox-disabled-icon-color;
82
91
  border-color: @checkbox-disabled-border-color;
83
92
  background: @checkbox-disabled-bg-color;
@@ -200,8 +209,8 @@ form.aui:not(.aui-legacy-forms) {
200
209
  }
201
210
 
202
211
  &:focus + .aui-form-glyph::after {
203
- .aui-radio-focus-size();
204
- .aui-radio-focus-position();
212
+ #aui-forms.aui-radio-checkbox-outline-size();
213
+ .aui-radio-outline-position();
205
214
 
206
215
  content: "";
207
216
 
@@ -209,10 +218,6 @@ form.aui:not(.aui-legacy-forms) {
209
218
  border-radius: @aui-form-button-size;
210
219
  background-color: transparent;
211
220
  }
212
-
213
- &:focus + .aui-form-glyph::before {
214
- border-color: @button-focus-border-color;
215
- }
216
221
  }
217
222
  }
218
223
 
@@ -269,25 +274,17 @@ form.aui:not(.aui-legacy-forms) {
269
274
  }
270
275
  }
271
276
 
272
- &:focus + .aui-form-glyph::before {
273
- border-color: @button-focus-border-color;
274
- }
275
- }
276
- }
277
+ &:focus + .aui-form-glyph::after {
278
+ #aui-forms.aui-radio-checkbox-outline-size();
279
+ .aui-checkbox-outline-position();
277
280
 
278
- //
279
- // Focus styles
280
- //
281
+ content: "";
281
282
 
282
- .aui-radio-focus-size() {
283
- display: inline-block;
284
- width: @aui-form-button-size;
285
- height: @aui-form-button-size;
286
- }
287
- .aui-radio-focus-position() {
288
- position: absolute;
289
- left: @radio-offset-left;
290
- top: @radio-offset-top - 1px;
283
+ border: @button-focus-border;
284
+ border-radius: @checkbox-border-radius;
285
+ background-color: transparent;
286
+ }
287
+ }
291
288
  }
292
289
 
293
290
  }
package/src/less/imports/aui-theme/adg/adg-colors.less CHANGED
@@ -32,6 +32,7 @@
32
32
  // Blues
33
33
  @ak-color-B50: #DEEBFF;
34
34
  @ak-color-B75: #B3D4FF;
35
+ @ak-color-B90: #60a4ff;
35
36
  @ak-color-B100: #4C9AFF;
36
37
  @ak-color-B200: #2684FF;
37
38
  @ak-color-B300: #0065FF;
package/src/less/imports/aui-theme/components/forms.less CHANGED
@@ -38,7 +38,9 @@
38
38
  @aui-form-transition-time: 0.2s;
39
39
 
40
40
  @aui-form-button-size: 10px;
41
+ @aui-form-button-border-width: 2px;
41
42
  @aui-form-button-focus-border-width: 2px;
43
+ @aui-form-radio-checkbox-outline-padding-space: 2px;
42
44
 
43
45
  #aui-forms {
44
46
  .aui-input-field-style(normal) {
@@ -73,6 +75,12 @@
73
75
  width: @aui-form-button-size;
74
76
  height: @aui-form-button-size;
75
77
  }
78
+
79
+ .aui-radio-checkbox-outline-size() {
80
+ display: inline-block;
81
+ width: @aui-form-button-size + @aui-form-button-border-width * 2 + (@aui-form-radio-checkbox-outline-padding-space * 2);
82
+ height: @aui-form-button-size + @aui-form-button-border-width * 2 + (@aui-form-radio-checkbox-outline-padding-space * 2);
83
+ }
76
84
  }
77
85
 
78
86
  #aui-legacy-forms {
package/src/less/imports/aui-theme/components/label.less CHANGED
@@ -6,5 +6,7 @@
6
6
  @aui-label-border-color: var(--aui-label-bg-color);
7
7
  @aui-label-hover-bg-color: var(--aui-label-hover-bg-color);
8
8
  @aui-label-hover-border-color: var(--aui-label-hover-bg-color);
9
+ @aui-label-closable-bg-color: var(--aui-label-close-hover-bg-color);
10
+ @aui-label-closable-text-color: var(--aui-label-close-hover-text-color);
9
11
 
10
12
  @aui-label-border-radius: @aui-border-radius-smallish;
package/src/less/imports/aui-theme/core/colors.less CHANGED
@@ -167,8 +167,8 @@
167
167
  --aui-label-link-color: inherit;
168
168
  --aui-label-bg-color: @ak-color-N20;
169
169
  --aui-label-hover-bg-color: @ak-color-N20;
170
- --aui-label-close-hover-bg-color: @ak-color-R75;
171
- --aui-label-close-hover-text-color: @ak-color-N800;
170
+ --aui-label-close-hover-bg-color: @ak-color-R50;
171
+ --aui-label-close-hover-text-color: @ak-color-R500;
172
172
 
173
173
  // Forms
174
174
  --aui-form-placeholder-text-color: @ak-color-N300;
@@ -210,8 +210,8 @@
210
210
  --aui-form-checkbox-active-bg-color: @ak-color-B50;
211
211
  --aui-form-checkbox-active-border-color: @ak-color-B50;
212
212
  --aui-form-checkbox-active-icon-color: @ak-color-B400;
213
- --aui-form-radio-unchecked-bg-color: @ak-color-N10;
214
- --aui-form-radio-unchecked-border-color: @ak-color-N40;
213
+ --aui-form-radio-unchecked-bg-color: @ak-color-N20;
214
+ --aui-form-radio-unchecked-border-color: @ak-color-N200;
215
215
 
216
216
  // Toggle
217
217
  --aui-toggle-default-bg-color: @ak-color-N200;
@@ -374,7 +374,7 @@
374
374
  --aui-border: @ak-color-N50;
375
375
  --aui-border-strong: @ak-color-N100;
376
376
  --aui-focus: @ak-color-B100;
377
- --aui-link-color: @ak-color-B100;
377
+ --aui-link-color: @ak-color-B90;
378
378
  --aui-link-decoration: none;
379
379
  --aui-link-hover-color: @ak-color-B75;
380
380
  --aui-link-active-color: @ak-color-B200;
@@ -516,10 +516,10 @@
516
516
  // "Labels" (e.g., page tags, selected values in components, etc.)
517
517
  --aui-label-text-color: @ak-color-N800;
518
518
  --aui-label-link-color: @ak-color-N800;
519
- --aui-label-bg-color: @ak-color-N70;
519
+ --aui-label-bg-color: @ak-color-N50;
520
520
  --aui-label-hover-bg-color: @ak-color-N80;
521
- --aui-label-close-hover-bg-color: @ak-color-R400;
522
- --aui-label-close-hover-text-color: @ak-color-N30;
521
+ --aui-label-close-hover-bg-color: @ak-color-R50;
522
+ --aui-label-close-hover-text-color: @ak-color-R500;
523
523
 
524
524
  // Forms
525
525
  --aui-form-placeholder-text-color: @ak-color-N200;
@@ -561,8 +561,8 @@
561
561
  --aui-form-checkbox-active-bg-color: @ak-color-B50;
562
562
  --aui-form-checkbox-active-border-color: @ak-color-B50;
563
563
  --aui-form-checkbox-active-icon-color: @ak-color-B200;
564
- --aui-form-radio-unchecked-bg-color: @ak-color-N10;
565
- --aui-form-radio-unchecked-border-color: @ak-color-N70;
564
+ --aui-form-radio-unchecked-bg-color: @ak-color-N20;
565
+ --aui-form-radio-unchecked-border-color: @ak-color-N200;
566
566
 
567
567
  // Toggle
568
568
  --aui-toggle-default-bg-color: @ak-color-N90;
@@ -868,8 +868,8 @@
868
868
  --aui-label-link-color: var(--ds-link);
869
869
  --aui-label-bg-color: var(--ds-background-neutral, @ak-color-N20);
870
870
  --aui-label-hover-bg-color: var(--ds-background-neutral, @ak-color-N20);
871
- --aui-label-close-hover-bg-color: var(--ds-background-accent-red-subtle, @ak-color-R75);
872
- --aui-label-close-hover-text-color: var(--ds-icon-accent-gray, @ak-color-N800);
871
+ --aui-label-close-hover-bg-color: var(--ds-background-danger, @ak-color-R50);
872
+ --aui-label-close-hover-text-color: var(--ds-text-danger, @ak-color-R500);
873
873
 
874
874
  // Forms
875
875
  --aui-form-placeholder-text-color: var(--ds-text-subtlest, @ak-color-N300);
@@ -877,9 +877,9 @@
877
877
  --aui-form-label-text-color: var(--ds-text-subtle, @ak-color-N200);
878
878
  --aui-form-error-text-color: var(--ds-text-danger, @ak-color-R400);
879
879
  --aui-form-description-text-color: var(--ds-text-subtlest, @ak-color-N200);
880
- --aui-form-disabled-field-bg-color: var(--ds-text-disabled, @ak-color-N20);
881
- --aui-form-disabled-field-text-color: var(--ds-text-subtlest, @ak-color-N80);
882
- --aui-form-disabled-field-label-color: var(--ds-text-subtle, @ak-color-N80);
880
+ --aui-form-disabled-field-bg-color: var(--ds-background-disabled, @ak-color-N20);
881
+ --aui-form-disabled-field-text-color: var(--ds-text-disabled, @ak-color-N80);
882
+ --aui-form-disabled-field-label-color: var(--ds-text-disabled, @ak-color-N80);
883
883
  --aui-form-field-border-color: var(--ds-border-input, @ak-color-N40);
884
884
  --aui-form-field-hover-border-color: var(--ds-border-focused, @ak-color-N40);
885
885
  --aui-form-field-default-text-color: var(--ds-text, @ak-color-N800);
@@ -912,7 +912,7 @@
912
912
  --aui-form-checkbox-active-border-color: var(--ds-border-accent-blue, @ak-color-B50);
913
913
  --aui-form-checkbox-active-icon-color: var(--ds-icon-information, @ak-color-B400);
914
914
  --aui-form-radio-unchecked-bg-color: var(--ds-background-input, @ak-color-N10);
915
- --aui-form-radio-unchecked-border-color: var(--ds-border-input, @ak-color-N40);
915
+ --aui-form-radio-unchecked-border-color: var(--ds-border-bold, @ak-color-N100);
916
916
 
917
917
  // Toggle
918
918
  --aui-toggle-default-bg-color: var(--ds-background-neutral-bold, @ak-color-N200);
package/src/less/imports/aui-theme/core/layers.less CHANGED
@@ -9,5 +9,7 @@
9
9
  @aui-z-blanket: @aui-z-layer-min - 500; // so it appears below modals
10
10
  @aui-z-skip: @aui-z-layer-min + 1000; // so they appear above modals
11
11
  @aui-z-flag-container: @aui-z-layer-min + 1000; // so they appear above modals
12
- @aui-z-select2: @aui-z-layer-min + 3; // so it can paint an "overlay" behind its suggestion dropdown
12
+ // default auiSelect2 z-index, so it can paint an "overlay" behind its suggestion dropdown
13
+ // overridden by select2.js based on layer z-index
14
+ @aui-z-select2: @aui-z-layer-min + 3;
13
15
  @aui-z-tooltip: @aui-z-layer-min + 2000; // so they appear over the top of pretty much everything