@atlaskit/button 23.5.4 → 23.6.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 (36) hide show
  1. package/CHANGELOG.md +12 -0
  2. package/dist/cjs/new-button/containers/split-button/split-button.compiled.css +2 -6
  3. package/dist/cjs/new-button/containers/split-button/split-button.js +7 -14
  4. package/dist/cjs/new-button/variants/default/link.compiled.css +41 -68
  5. package/dist/cjs/new-button/variants/default/link.js +12 -22
  6. package/dist/cjs/new-button/variants/icon/link.compiled.css +30 -52
  7. package/dist/cjs/new-button/variants/icon/link.js +9 -17
  8. package/dist/cjs/new-button/variants/shared/button-base.compiled.css +14 -25
  9. package/dist/cjs/new-button/variants/shared/button-base.js +11 -17
  10. package/dist/cjs/old-button/shared/css.js +46 -129
  11. package/dist/es2019/new-button/containers/split-button/split-button.compiled.css +2 -6
  12. package/dist/es2019/new-button/containers/split-button/split-button.js +7 -14
  13. package/dist/es2019/new-button/variants/default/link.compiled.css +41 -68
  14. package/dist/es2019/new-button/variants/default/link.js +12 -22
  15. package/dist/es2019/new-button/variants/icon/link.compiled.css +30 -52
  16. package/dist/es2019/new-button/variants/icon/link.js +9 -17
  17. package/dist/es2019/new-button/variants/shared/button-base.compiled.css +14 -25
  18. package/dist/es2019/new-button/variants/shared/button-base.js +11 -17
  19. package/dist/es2019/old-button/shared/css.js +32 -132
  20. package/dist/esm/new-button/containers/split-button/split-button.compiled.css +2 -6
  21. package/dist/esm/new-button/containers/split-button/split-button.js +7 -14
  22. package/dist/esm/new-button/variants/default/link.compiled.css +41 -68
  23. package/dist/esm/new-button/variants/default/link.js +12 -22
  24. package/dist/esm/new-button/variants/icon/link.compiled.css +30 -52
  25. package/dist/esm/new-button/variants/icon/link.js +9 -17
  26. package/dist/esm/new-button/variants/shared/button-base.compiled.css +14 -25
  27. package/dist/esm/new-button/variants/shared/button-base.js +11 -17
  28. package/dist/esm/old-button/shared/css.js +46 -129
  29. package/dist/types/old-button/shared/css.d.ts +1 -1
  30. package/dist/types-ts4.5/old-button/shared/css.d.ts +1 -1
  31. package/package.json +7 -10
  32. package/dist/cjs/old-button/shared/colors.js +0 -328
  33. package/dist/es2019/old-button/shared/colors.js +0 -320
  34. package/dist/esm/old-button/shared/colors.js +0 -320
  35. package/dist/types/old-button/shared/colors.d.ts +0 -23
  36. package/dist/types-ts4.5/old-button/shared/colors.d.ts +0 -23
package/dist/es2019/new-button/variants/default/link.compiled.css CHANGED
@@ -9,8 +9,8 @@
9
9
  ._1rjcv77o{padding-block:var(--ds-space-025,2px)}
10
10
  ._1tv3nqa1:after{border-style:solid}
11
11
  ._39yqe4h9:after{border-width:var(--ds-border-width,1px)}
12
- ._8l3mcoux:after{border-color:var(--ds-border-selected,#0052cc)}
13
- ._8l3mmuej:after{border-color:var(--ds-border,#091e4224)}
12
+ ._8l3m1l7x:after{border-color:var(--ds-border,#0b120e24)}
13
+ ._8l3mq98m:after{border-color:var(--ds-border-selected,#1868db)}
14
14
  ._11fnglyw:after{pointer-events:none}
15
15
  ._18postnw:after{position:absolute}
16
16
  ._1bah1h6o{justify-content:center}
@@ -27,19 +27,13 @@
27
27
  ._aetrb3bt:after{content:""}
28
28
  ._aetrglyw:after{content:none}
29
29
  ._ajmmvv82{text-decoration-style:solid!important}
30
- ._bfhk1g49{background-color:var(--ds-background-selected,#403294)}
31
- ._bfhk1ikc{background-color:var(--ds-background-warning-bold,#ffab00)}
32
- ._bfhk1j54{background-color:var(--ds-background-neutral,rgba(9,30,66,.04))}
33
- ._bfhk1v7l{background-color:var(--ds-background-danger-bold,#de350b)}
34
- ._bfhk1vbi{background-color:var(--ds-background-discovery-bold,#5243aa)}
35
- ._bfhk7btw{background-color:var(--ds-background-selected,#253858)}
36
- ._bfhkbeib{background-color:var(--ds-background-selected,#bf2600)}
37
- ._bfhkfg4m{background-color:var(--ds-background-selected,#e9f2ff)}
38
- ._bfhkomb0{background-color:var(--ds-background-brand-bold,#0052cc)}
39
- ._bfhkqtfy{background-color:var(--ds-background-neutral-subtle,transparent)}
30
+ ._bfhk15s3{background-color:var(--ds-background-selected,#e9f2fe)}
31
+ ._bfhk1856{background-color:var(--ds-background-brand-bold,#1868db)}
32
+ ._bfhk1kmu{background-color:var(--ds-background-warning-bold,#fbc828)}
33
+ ._bfhkby5v{background-color:var(--ds-background-disabled,#17171708)}
40
34
  ._bfhksm61{background-color:var(--ds-background-neutral-subtle,#00000000)}
41
- ._bfhksyzs{background-color:var(--ds-background-disabled,#091e4208)}
42
- ._bfhkvdtc{background-color:var(--ds-background-selected,#ff991f)}
35
+ ._bfhku5tj{background-color:var(--ds-background-discovery-bold,#964ac0)}
36
+ ._bfhkybec{background-color:var(--ds-background-danger-bold,#c9372c)}
43
37
  ._bozgu2gc{padding-inline-start:var(--ds-space-100,8px)}
44
38
  ._bozgutpp{padding-inline-start:var(--ds-space-150,9pt)}
45
39
  ._gy1p1b66{column-gap:var(--ds-space-050,4px)}
@@ -47,74 +41,53 @@
47
41
  ._kqswh2mm{position:relative}
48
42
  ._p12f1osq{max-width:100%}
49
43
  ._s7n4nkob{vertical-align:middle}
50
- ._syaz10s3{color:var(--ds-text,#42526e)}
51
44
  ._syaz15cr{color:var(--ds-text-inverse,#fff)}
52
- ._syaz16q2{color:var(--ds-text-selected,#172b4d)}
53
- ._syaz1gjq{color:var(--ds-text-subtle,#44546f)}
54
- ._syaz1ldt{color:var(--ds-text-selected,#0052cc)}
55
- ._syaz1lh4{color:var(--ds-text-disabled,#091e424f)}
56
- ._syaz1pke{color:var(--ds-text-selected,#f4f5f7)}
57
- ._syazal3n{color:var(--ds-text-warning-inverse,#172b4d)}
45
+ ._syaz1gmx{color:var(--ds-text-disabled,#080f214a)}
46
+ ._syaz1yd3{color:var(--ds-text-warning-inverse,#292a2e)}
47
+ ._syaz6x5g{color:var(--ds-text-selected,#1868db)}
48
+ ._syazazsu{color:var(--ds-text-subtle,#505258)}
58
49
  ._vchhusvi{box-sizing:border-box}
59
50
  ._y3gn1h6o{text-align:center}
60
51
  ._y4tiu2gc{padding-inline-end:var(--ds-space-100,8px)}
61
- ._y4tiutpp{padding-inline-end:var(--ds-space-150,9pt)}._105310s3:visited{color:var(--ds-text,#42526e)}
62
- ._105315cr:visited{color:var(--ds-text-inverse,#fff)}
63
- ._10531gjq:visited{color:var(--ds-text-subtle,#44546f)}
64
- ._10531ldt:visited{color:var(--ds-text-selected,#0052cc)}
65
- ._10531pke:visited{color:var(--ds-text-selected,#f4f5f7)}
66
- ._1053al3n:visited{color:var(--ds-text-warning-inverse,#172b4d)}
52
+ ._y4tiutpp{padding-inline-end:var(--ds-space-150,9pt)}._105315cr:visited{color:var(--ds-text-inverse,#fff)}
53
+ ._10531yd3:visited{color:var(--ds-text-warning-inverse,#292a2e)}
54
+ ._10536x5g:visited{color:var(--ds-text-selected,#1868db)}
55
+ ._1053azsu:visited{color:var(--ds-text-subtle,#505258)}
67
56
  ._1a3b1r31:focus{text-decoration-color:currentColor}
68
57
  ._4fprglyw:focus{text-decoration-line:none}
69
58
  ._5goinqa1:focus{text-decoration-style:solid}
70
- ._f8pj10s3:focus{color:var(--ds-text,#42526e)}
71
59
  ._f8pj15cr:focus{color:var(--ds-text-inverse,#fff)}
72
- ._f8pj1gjq:focus{color:var(--ds-text-subtle,#44546f)}
73
- ._f8pj1ldt:focus{color:var(--ds-text-selected,#0052cc)}
74
60
  ._f8pj1mjl:focus{color:color.text.subtle}
75
- ._f8pj1pke:focus{color:var(--ds-text-selected,#f4f5f7)}
76
- ._f8pjal3n:focus{color:var(--ds-text-warning-inverse,#172b4d)}
61
+ ._f8pj1yd3:focus{color:var(--ds-text-warning-inverse,#292a2e)}
62
+ ._f8pj6x5g:focus{color:var(--ds-text-selected,#1868db)}
63
+ ._f8pjazsu:focus{color:var(--ds-text-subtle,#505258)}
77
64
  ._1bnxglyw:hover{text-decoration-line:none}
78
- ._30l310s3:hover{color:var(--ds-text,#42526e)}
79
65
  ._30l315cr:hover{color:var(--ds-text-inverse,#fff)}
80
- ._30l31gjq:hover{color:var(--ds-text-subtle,#44546f)}
81
- ._30l31ldt:hover{color:var(--ds-text-selected,#0052cc)}
82
- ._30l31lh4:hover{color:var(--ds-text-disabled,#091e424f)}
83
- ._30l31pke:hover{color:var(--ds-text-selected,#f4f5f7)}
84
- ._30l3al3n:hover{color:var(--ds-text-warning-inverse,#172b4d)}
66
+ ._30l31gmx:hover{color:var(--ds-text-disabled,#080f214a)}
67
+ ._30l31yd3:hover{color:var(--ds-text-warning-inverse,#292a2e)}
68
+ ._30l36x5g:hover{color:var(--ds-text-selected,#1868db)}
69
+ ._30l3azsu:hover{color:var(--ds-text-subtle,#505258)}
85
70
  ._9oik1r31:hover{text-decoration-color:currentColor}
86
- ._irr3166n:hover{background-color:var(--ds-background-neutral-subtle-hovered,#091e420f)}
87
- ._irr31g49:hover{background-color:var(--ds-background-selected,#403294)}
88
- ._irr31j43:hover{background-color:var(--ds-background-warning-bold-hovered,#ffc400)}
89
- ._irr31rwk:hover{background-color:var(--ds-background-danger-bold-hovered,#ff5630)}
90
- ._irr31wqm:hover{background-color:var(--ds-background-brand-bold-hovered,#0065ff)}
91
- ._irr34mfv:hover{background-color:var(--ds-background-neutral-subtle-hovered,#091e4214)}
92
- ._irr37gr8:hover{background-color:var(--ds-background-discovery-bold-hovered,#8777d9)}
93
- ._irr3beib:hover{background-color:var(--ds-background-selected,#bf2600)}
94
- ._irr3i1yw:hover{background-color:var(--ds-background-selected-hovered,#cce0ff)}
95
- ._irr3syzs:hover{background-color:var(--ds-background-disabled,#091e4208)}
96
- ._irr3vdtc:hover{background-color:var(--ds-background-selected,#ff991f)}
97
- ._irr3yw9d:hover{background-color:var(--ds-background-neutral-hovered,#091e4214)}
71
+ ._irr315s3:hover{background-color:var(--ds-background-selected,#e9f2fe)}
72
+ ._irr31dpa:hover{background-color:var(--ds-background-neutral-subtle-hovered,#0515240f)}
73
+ ._irr31spp:hover{background-color:var(--ds-background-warning-bold-hovered,#fca700)}
74
+ ._irr3by5v:hover{background-color:var(--ds-background-disabled,#17171708)}
75
+ ._irr3fqeg:hover{background-color:var(--ds-background-discovery-bold-hovered,#803fa5)}
76
+ ._irr3hf2y:hover{background-color:var(--ds-background-brand-bold-hovered,#1558bc)}
77
+ ._irr3s9hg:hover{background-color:var(--ds-background-danger-bold-hovered,#ae2e24)}
98
78
  ._jf4cnqa1:hover{text-decoration-style:solid}
99
- ._1di617hq:active{background-color:var(--ds-background-brand-bold-pressed,#0747a6)}
100
- ._1di619qy:active{background-color:var(--ds-background-neutral-subtle-pressed,#b3d4ff)}
101
- ._1di619ru:active{background-color:var(--ds-background-selected-pressed,#85b8ff)}
102
- ._1di61dty:active{background-color:var(--ds-background-neutral-subtle-pressed,#091e4224)}
103
- ._1di61g49:active{background-color:var(--ds-background-selected,#403294)}
104
- ._1di61wu2:active{background-color:var(--ds-background-discovery-bold-pressed,#5243aa)}
105
- ._1di6beib:active{background-color:var(--ds-background-selected,#bf2600)}
106
- ._1di6h4op:active{background-color:var(--ds-background-warning-bold-pressed,#ff991f)}
107
- ._1di6ip91:active{background-color:var(--ds-background-neutral-pressed,#091e424f)}
108
- ._1di6syzs:active{background-color:var(--ds-background-disabled,#091e4208)}
109
- ._1di6vdtc:active{background-color:var(--ds-background-selected,#ff991f)}
110
- ._1di6yycf:active{background-color:var(--ds-background-danger-bold-pressed,#bf2600)}
79
+ ._1di613a9:active{background-color:var(--ds-background-danger-bold-pressed,#872821)}
80
+ ._1di615s3:active{background-color:var(--ds-background-selected,#e9f2fe)}
81
+ ._1di61f1m:active{background-color:var(--ds-background-discovery-bold-pressed,#673286)}
82
+ ._1di64m4m:active{background-color:var(--ds-background-warning-bold-pressed,#f68909)}
83
+ ._1di6by5v:active{background-color:var(--ds-background-disabled,#17171708)}
84
+ ._1di6fcek:active{background-color:var(--ds-background-neutral-subtle-pressed,#0b120e24)}
85
+ ._1di6g6ey:active{background-color:var(--ds-background-brand-bold-pressed,#144794)}
111
86
  ._1iohnqa1:active{text-decoration-style:solid}
112
87
  ._1nrm1r31:active{text-decoration-color:currentColor}
113
- ._9h8h10s3:active{color:var(--ds-text,#42526e)}
114
88
  ._9h8h15cr:active{color:var(--ds-text-inverse,#fff)}
115
- ._9h8h1gjq:active{color:var(--ds-text-subtle,#44546f)}
116
- ._9h8h1ldt:active{color:var(--ds-text-selected,#0052cc)}
117
- ._9h8h1lh4:active{color:var(--ds-text-disabled,#091e424f)}
118
- ._9h8h1pke:active{color:var(--ds-text-selected,#f4f5f7)}
119
- ._9h8hal3n:active{color:var(--ds-text-warning-inverse,#172b4d)}
89
+ ._9h8h1gmx:active{color:var(--ds-text-disabled,#080f214a)}
90
+ ._9h8h1yd3:active{color:var(--ds-text-warning-inverse,#292a2e)}
91
+ ._9h8h6x5g:active{color:var(--ds-text-selected,#1868db)}
92
+ ._9h8hazsu:active{color:var(--ds-text-subtle,#505258)}
120
93
  ._c2waglyw:active{text-decoration-line:none}
package/dist/es2019/new-button/variants/default/link.js CHANGED
@@ -7,45 +7,41 @@ import { forwardRef, useRef } from 'react';
7
7
  import { cx } from '@atlaskit/css';
8
8
  import mergeRefs from '@atlaskit/ds-lib/merge-refs';
9
9
  import useAutoFocus from '@atlaskit/ds-lib/use-auto-focus';
10
- import { fg } from '@atlaskit/platform-feature-flags';
11
10
  import { Anchor } from '@atlaskit/primitives/compiled';
12
11
  import Content from '../shared/content';
13
12
  import IconRenderer from '../shared/icon-renderer';
14
13
  const styles = {
15
14
  base: "_2rkofajl _11c82smr _v5649dqc _189eidpf _1rjc12x7 _1e0c116y _vchhusvi _1bsb1wug _p12f1osq _kqswh2mm _4cvr1q9y _1bah1h6o _gy1p1b66 _1o9zidpf _4t3iviql _k48p1wq8 _y4tiutpp _bozgutpp _y3gn1h6o _s7n4nkob _14mj1kw7 _9v7aze3t _1tv3nqa1 _39yqe4h9 _11fnglyw _18postnw",
16
15
  linkDecorationUnset: "_4bfu1snc _1hmsagmp _ajmmvv82 _1a3b1r31 _4fprglyw _5goinqa1 _9oik1r31 _1bnxglyw _jf4cnqa1 _1nrm1r31 _c2waglyw _1iohnqa1",
17
- disabled: "_80om13gf _bfhksyzs _syaz1lh4 _aetrglyw _irr3syzs _30l31lh4 _1di6syzs _9h8h1lh4",
16
+ disabled: "_80om13gf _bfhkby5v _syaz1gmx _aetrglyw _irr3by5v _30l31gmx _1di6by5v _9h8h1gmx",
18
17
  spacingCompact: "_1rjcv77o _gy1p1b66 _4t3i1k8s _y4tiutpp _bozgutpp _s7n4nkob",
19
18
  buttonIconBefore: "_bozgu2gc",
20
19
  buttonIconAfter: "_y4tiu2gc",
21
20
  fullWidth: "_1bsb1osq"
22
21
  };
23
22
  const defaultStyles = {
24
- root: "_bfhk1j54 _syaz10s3 _105310s3 _f8pj10s3 _irr3yw9d _30l310s3 _1di6ip91 _9h8h10s3",
25
- rootRefreshed: "_bfhksm61 _syaz1gjq _8l3mmuej _aetrb3bt _10531gjq _f8pj1gjq _irr3166n _30l31gjq _1di61dty _9h8h1gjq"
23
+ root: "_bfhksm61 _syazazsu _8l3m1l7x _aetrb3bt _1053azsu _f8pjazsu _irr31dpa _30l3azsu _1di6fcek _9h8hazsu"
26
24
  };
27
25
  const primaryStyles = {
28
- root: "_bfhkomb0 _syaz15cr _105315cr _f8pj15cr _30l315cr _irr31wqm _9h8h15cr _1di617hq"
26
+ root: "_bfhk1856 _syaz15cr _105315cr _f8pj15cr _30l315cr _irr3hf2y _9h8h15cr _1di6g6ey"
29
27
  };
30
28
  const warningStyles = {
31
- root: "_bfhk1ikc _syazal3n _1053al3n _f8pjal3n _30l3al3n _irr31j43 _9h8hal3n _1di6h4op"
29
+ root: "_bfhk1kmu _syaz1yd3 _10531yd3 _f8pj1yd3 _30l31yd3 _irr31spp _9h8h1yd3 _1di64m4m"
32
30
  };
33
31
  const dangerStyles = {
34
- root: "_bfhk1v7l _syaz15cr _105315cr _f8pj15cr _30l315cr _irr31rwk _9h8h15cr _1di6yycf"
32
+ root: "_bfhkybec _syaz15cr _105315cr _f8pj15cr _30l315cr _irr3s9hg _9h8h15cr _1di613a9"
35
33
  };
36
34
  const discoveryStyles = {
37
- root: "_bfhk1vbi _syaz15cr _105315cr _f8pj15cr _30l315cr _irr37gr8 _9h8h15cr _1di61wu2"
35
+ root: "_bfhku5tj _syaz15cr _105315cr _f8pj15cr _30l315cr _irr3fqeg _9h8h15cr _1di61f1m"
38
36
  };
39
37
  const subtleStyles = {
40
- root: "_bfhkqtfy _syaz10s3 _105310s3 _f8pj10s3 _irr34mfv _30l310s3 _1di619qy _9h8h10s3",
41
- rootRefreshed: "_bfhkqtfy _syaz1gjq _10531gjq _f8pj1mjl _irr34mfv _30l31gjq _1di619qy _9h8h1gjq"
38
+ root: "_bfhksm61 _syazazsu _1053azsu _f8pj1mjl _irr31dpa _30l3azsu _1di6fcek _9h8hazsu"
42
39
  };
43
40
  const selectedStyles = {
44
- root: "_bfhk7btw _syaz1pke _10531pke _f8pj1pke _irr3i1yw _30l31pke _1di619ru _9h8h1pke",
45
- rootRefreshed: "_bfhkfg4m _syaz1ldt _8l3mcoux _aetrb3bt _10531ldt _f8pj1ldt _30l31ldt _9h8h1ldt",
46
- warning: "_bfhkvdtc _syaz16q2 _30l31pke _irr3vdtc _9h8h1pke _1di6vdtc",
47
- danger: "_bfhkbeib _syaz1pke _30l31pke _irr3beib _9h8h1pke _1di6beib",
48
- discovery: "_bfhk1g49 _syaz1pke _30l31pke _irr31g49 _9h8h1pke _1di61g49"
41
+ root: "_bfhk15s3 _syaz6x5g _8l3mq98m _aetrb3bt _10536x5g _f8pj6x5g _30l36x5g _9h8h6x5g",
42
+ warning: "_bfhk15s3 _syaz6x5g _30l36x5g _irr315s3 _9h8h6x5g _1di615s3",
43
+ danger: "_bfhk15s3 _syaz6x5g _30l36x5g _irr315s3 _9h8h6x5g _1di615s3",
44
+ discovery: "_bfhk15s3 _syaz6x5g _30l36x5g _irr315s3 _9h8h6x5g _1di615s3"
49
45
  };
50
46
 
51
47
  /**
@@ -127,13 +123,7 @@ const LinkButtonBase = ({
127
123
  interactionName: interactionName
128
124
  // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
129
125
  }, saferRest, {
130
- xcss: cx(styles.base, appearance === 'default' && (fg('platform-component-visual-refresh') ? defaultStyles.rootRefreshed : defaultStyles.root), appearance === 'primary' && primaryStyles.root, appearance === 'warning' && warningStyles.root, appearance === 'danger' && dangerStyles.root, appearance === 'discovery' && discoveryStyles.root, appearance === 'subtle' && (fg('platform-component-visual-refresh') ? subtleStyles.rootRefreshed : subtleStyles.root), styles.linkDecorationUnset, isSelected && (fg('platform-component-visual-refresh') ? selectedStyles.rootRefreshed : selectedStyles.root),
131
- // TODO: remove me once we kill color fallbacks
132
- isSelected && appearance === 'danger' && selectedStyles.danger,
133
- // TODO: remove me once we kill color fallbacks
134
- isSelected && appearance === 'warning' && selectedStyles.warning,
135
- // TODO: remove me once we kill color fallbacks
136
- isSelected && appearance === 'discovery' && selectedStyles.discovery, isDisabled && styles.disabled, spacing === 'compact' && styles.spacingCompact, hasIconBefore && styles.buttonIconBefore, hasIconAfter && styles.buttonIconAfter, shouldFitContainer && styles.fullWidth)
126
+ xcss: cx(styles.base, appearance === 'default' && defaultStyles.root, appearance === 'primary' && primaryStyles.root, appearance === 'warning' && warningStyles.root, appearance === 'danger' && dangerStyles.root, appearance === 'discovery' && discoveryStyles.root, appearance === 'subtle' && subtleStyles.root, styles.linkDecorationUnset, isSelected && selectedStyles.root, isSelected && appearance === 'danger' && selectedStyles.danger, isSelected && appearance === 'warning' && selectedStyles.warning, isSelected && appearance === 'discovery' && selectedStyles.discovery, isDisabled && styles.disabled, spacing === 'compact' && styles.spacingCompact, hasIconBefore && styles.buttonIconBefore, hasIconAfter && styles.buttonIconAfter, shouldFitContainer && styles.fullWidth)
137
127
  }), iconBefore && /*#__PURE__*/React.createElement(Content, {
138
128
  type: "icon",
139
129
  position: "before",
package/dist/es2019/new-button/variants/icon/link.compiled.css CHANGED
@@ -10,8 +10,8 @@
10
10
  ._1rjcv77o{padding-block:var(--ds-space-025,2px)}
11
11
  ._1tv3nqa1:after{border-style:solid}
12
12
  ._39yqe4h9:after{border-width:var(--ds-border-width,1px)}
13
- ._8l3mcoux:after{border-color:var(--ds-border-selected,#0052cc)}
14
- ._8l3mmuej:after{border-color:var(--ds-border,#091e4224)}
13
+ ._8l3m1l7x:after{border-color:var(--ds-border,#0b120e24)}
14
+ ._8l3mq98m:after{border-color:var(--ds-border-selected,#1868db)}
15
15
  ._11fnglyw:after{pointer-events:none}
16
16
  ._18postnw:after{position:absolute}
17
17
  ._1bah1h6o{justify-content:center}
@@ -29,15 +29,11 @@
29
29
  ._aetrb3bt:after{content:""}
30
30
  ._aetrglyw:after{content:none}
31
31
  ._ajmmvv82{text-decoration-style:solid!important}
32
- ._bfhk1g49{background-color:var(--ds-background-selected,#403294)}
33
- ._bfhk1j54{background-color:var(--ds-background-neutral,rgba(9,30,66,.04))}
34
- ._bfhk1vbi{background-color:var(--ds-background-discovery-bold,#5243aa)}
35
- ._bfhk7btw{background-color:var(--ds-background-selected,#253858)}
36
- ._bfhkfg4m{background-color:var(--ds-background-selected,#e9f2ff)}
37
- ._bfhkomb0{background-color:var(--ds-background-brand-bold,#0052cc)}
38
- ._bfhkqtfy{background-color:var(--ds-background-neutral-subtle,transparent)}
32
+ ._bfhk15s3{background-color:var(--ds-background-selected,#e9f2fe)}
33
+ ._bfhk1856{background-color:var(--ds-background-brand-bold,#1868db)}
34
+ ._bfhkby5v{background-color:var(--ds-background-disabled,#17171708)}
39
35
  ._bfhksm61{background-color:var(--ds-background-neutral-subtle,#00000000)}
40
- ._bfhksyzs{background-color:var(--ds-background-disabled,#091e4208)}
36
+ ._bfhku5tj{background-color:var(--ds-background-discovery-bold,#964ac0)}
41
37
  ._bozgutpp{padding-inline-start:var(--ds-space-150,9pt)}
42
38
  ._bozgze3t{padding-inline-start:var(--ds-space-0,0)}
43
39
  ._gy1p1b66{column-gap:var(--ds-space-050,4px)}
@@ -45,61 +41,43 @@
45
41
  ._kqswh2mm{position:relative}
46
42
  ._p12f1osq{max-width:100%}
47
43
  ._s7n4nkob{vertical-align:middle}
48
- ._syaz10s3{color:var(--ds-text,#42526e)}
49
44
  ._syaz15cr{color:var(--ds-text-inverse,#fff)}
50
- ._syaz1gjq{color:var(--ds-text-subtle,#44546f)}
51
- ._syaz1ldt{color:var(--ds-text-selected,#0052cc)}
52
- ._syaz1lh4{color:var(--ds-text-disabled,#091e424f)}
53
- ._syaz1pke{color:var(--ds-text-selected,#f4f5f7)}
45
+ ._syaz1gmx{color:var(--ds-text-disabled,#080f214a)}
46
+ ._syaz6x5g{color:var(--ds-text-selected,#1868db)}
47
+ ._syazazsu{color:var(--ds-text-subtle,#505258)}
54
48
  ._vchhusvi{box-sizing:border-box}
55
49
  ._y3gn1h6o{text-align:center}
56
50
  ._y4tiutpp{padding-inline-end:var(--ds-space-150,9pt)}
57
- ._y4tize3t{padding-inline-end:var(--ds-space-0,0)}._105310s3:visited{color:var(--ds-text,#42526e)}
58
- ._105315cr:visited{color:var(--ds-text-inverse,#fff)}
59
- ._10531gjq:visited{color:var(--ds-text-subtle,#44546f)}
60
- ._10531ldt:visited{color:var(--ds-text-selected,#0052cc)}
61
- ._10531pke:visited{color:var(--ds-text-selected,#f4f5f7)}
51
+ ._y4tize3t{padding-inline-end:var(--ds-space-0,0)}._105315cr:visited{color:var(--ds-text-inverse,#fff)}
52
+ ._10536x5g:visited{color:var(--ds-text-selected,#1868db)}
53
+ ._1053azsu:visited{color:var(--ds-text-subtle,#505258)}
62
54
  ._1a3b1r31:focus{text-decoration-color:currentColor}
63
55
  ._4fprglyw:focus{text-decoration-line:none}
64
56
  ._5goinqa1:focus{text-decoration-style:solid}
65
- ._f8pj10s3:focus{color:var(--ds-text,#42526e)}
66
- ._f8pj1gjq:focus{color:var(--ds-text-subtle,#44546f)}
67
- ._f8pj1ldt:focus{color:var(--ds-text-selected,#0052cc)}
68
57
  ._f8pj1mjl:focus{color:color.text.subtle}
69
- ._f8pj1pke:focus{color:var(--ds-text-selected,#f4f5f7)}
58
+ ._f8pj6x5g:focus{color:var(--ds-text-selected,#1868db)}
59
+ ._f8pjazsu:focus{color:var(--ds-text-subtle,#505258)}
70
60
  ._1bnxglyw:hover{text-decoration-line:none}
71
- ._30l310s3:hover{color:var(--ds-text,#42526e)}
72
61
  ._30l315cr:hover{color:var(--ds-text-inverse,#fff)}
73
- ._30l31gjq:hover{color:var(--ds-text-subtle,#44546f)}
74
- ._30l31ldt:hover{color:var(--ds-text-selected,#0052cc)}
75
- ._30l31lh4:hover{color:var(--ds-text-disabled,#091e424f)}
76
- ._30l31pke:hover{color:var(--ds-text-selected,#f4f5f7)}
77
- ._30l3aqb7:hover{color:var(--ds-text-selected,#0c66e4)}
62
+ ._30l31gmx:hover{color:var(--ds-text-disabled,#080f214a)}
63
+ ._30l36x5g:hover{color:var(--ds-text-selected,#1868db)}
64
+ ._30l3azsu:hover{color:var(--ds-text-subtle,#505258)}
78
65
  ._9oik1r31:hover{text-decoration-color:currentColor}
79
- ._irr3166n:hover{background-color:var(--ds-background-neutral-subtle-hovered,#091e420f)}
80
- ._irr31g49:hover{background-color:var(--ds-background-selected,#403294)}
81
- ._irr31wqm:hover{background-color:var(--ds-background-brand-bold-hovered,#0065ff)}
82
- ._irr34mfv:hover{background-color:var(--ds-background-neutral-subtle-hovered,#091e4214)}
83
- ._irr37gr8:hover{background-color:var(--ds-background-discovery-bold-hovered,#8777d9)}
84
- ._irr3i1yw:hover{background-color:var(--ds-background-selected-hovered,#cce0ff)}
85
- ._irr3syzs:hover{background-color:var(--ds-background-disabled,#091e4208)}
86
- ._irr3yw9d:hover{background-color:var(--ds-background-neutral-hovered,#091e4214)}
66
+ ._irr315s3:hover{background-color:var(--ds-background-selected,#e9f2fe)}
67
+ ._irr31dpa:hover{background-color:var(--ds-background-neutral-subtle-hovered,#0515240f)}
68
+ ._irr3by5v:hover{background-color:var(--ds-background-disabled,#17171708)}
69
+ ._irr3fqeg:hover{background-color:var(--ds-background-discovery-bold-hovered,#803fa5)}
70
+ ._irr3hf2y:hover{background-color:var(--ds-background-brand-bold-hovered,#1558bc)}
87
71
  ._jf4cnqa1:hover{text-decoration-style:solid}
88
- ._1di617hq:active{background-color:var(--ds-background-brand-bold-pressed,#0747a6)}
89
- ._1di619qy:active{background-color:var(--ds-background-neutral-subtle-pressed,#b3d4ff)}
90
- ._1di619ru:active{background-color:var(--ds-background-selected-pressed,#85b8ff)}
91
- ._1di61dty:active{background-color:var(--ds-background-neutral-subtle-pressed,#091e4224)}
92
- ._1di61g49:active{background-color:var(--ds-background-selected,#403294)}
93
- ._1di61wu2:active{background-color:var(--ds-background-discovery-bold-pressed,#5243aa)}
94
- ._1di6ip91:active{background-color:var(--ds-background-neutral-pressed,#091e424f)}
95
- ._1di6syzs:active{background-color:var(--ds-background-disabled,#091e4208)}
72
+ ._1di615s3:active{background-color:var(--ds-background-selected,#e9f2fe)}
73
+ ._1di61f1m:active{background-color:var(--ds-background-discovery-bold-pressed,#673286)}
74
+ ._1di6by5v:active{background-color:var(--ds-background-disabled,#17171708)}
75
+ ._1di6fcek:active{background-color:var(--ds-background-neutral-subtle-pressed,#0b120e24)}
76
+ ._1di6g6ey:active{background-color:var(--ds-background-brand-bold-pressed,#144794)}
96
77
  ._1iohnqa1:active{text-decoration-style:solid}
97
78
  ._1nrm1r31:active{text-decoration-color:currentColor}
98
- ._9h8h10s3:active{color:var(--ds-text,#42526e)}
99
79
  ._9h8h15cr:active{color:var(--ds-text-inverse,#fff)}
100
- ._9h8h1gjq:active{color:var(--ds-text-subtle,#44546f)}
101
- ._9h8h1ldt:active{color:var(--ds-text-selected,#0052cc)}
102
- ._9h8h1lh4:active{color:var(--ds-text-disabled,#091e424f)}
103
- ._9h8h1pke:active{color:var(--ds-text-selected,#f4f5f7)}
104
- ._9h8haqb7:active{color:var(--ds-text-selected,#0c66e4)}
80
+ ._9h8h1gmx:active{color:var(--ds-text-disabled,#080f214a)}
81
+ ._9h8h6x5g:active{color:var(--ds-text-selected,#1868db)}
82
+ ._9h8hazsu:active{color:var(--ds-text-subtle,#505258)}
105
83
  ._c2waglyw:active{text-decoration-line:none}
package/dist/es2019/new-button/variants/icon/link.js CHANGED
@@ -7,7 +7,6 @@ import { forwardRef, memo, useRef } from 'react';
7
7
  import { cx } from '@atlaskit/css';
8
8
  import mergeRefs from '@atlaskit/ds-lib/merge-refs';
9
9
  import useAutoFocus from '@atlaskit/ds-lib/use-auto-focus';
10
- import { fg } from '@atlaskit/platform-feature-flags';
11
10
  import { Anchor } from '@atlaskit/primitives/compiled';
12
11
  import Tooltip from '@atlaskit/tooltip';
13
12
  import VisuallyHidden from '@atlaskit/visually-hidden';
@@ -16,29 +15,26 @@ import IconRenderer from '../shared/icon-renderer';
16
15
  const styles = {
17
16
  base: "_2rkofajl _11c82smr _v5649dqc _189eidpf _1rjc12x7 _1e0c116y _vchhusvi _1bsb1wug _p12f1osq _kqswh2mm _4cvr1q9y _1bah1h6o _gy1p1b66 _1o9zidpf _4t3iviql _k48p1wq8 _y4tiutpp _bozgutpp _y3gn1h6o _s7n4nkob _14mj1kw7 _9v7aze3t _1tv3nqa1 _39yqe4h9 _11fnglyw _18postnw",
18
17
  linkDecorationUnset: "_4bfu1snc _1hmsagmp _ajmmvv82 _1a3b1r31 _4fprglyw _5goinqa1 _9oik1r31 _1bnxglyw _jf4cnqa1 _1nrm1r31 _c2waglyw _1iohnqa1",
19
- disabled: "_80om13gf _bfhksyzs _syaz1lh4 _aetrglyw _irr3syzs _30l31lh4 _1di6syzs _9h8h1lh4",
18
+ disabled: "_80om13gf _bfhkby5v _syaz1gmx _aetrglyw _irr3by5v _30l31gmx _1di6by5v _9h8h1gmx",
20
19
  spacingCompact: "_1rjcv77o _gy1p1b66 _y4tiutpp _bozgutpp _s7n4nkob _4t3i1k8s _1bsb1k8s",
21
20
  iconButton: "_4t3iviql _1bsbviql _y4tize3t _bozgze3t",
22
21
  circle: "_2rko1rr0"
23
22
  };
24
23
  const defaultStyles = {
25
- root: "_bfhk1j54 _syaz10s3 _105310s3 _f8pj10s3 _irr3yw9d _30l310s3 _1di6ip91 _9h8h10s3",
26
- rootRefreshed: "_bfhksm61 _syaz1gjq _8l3mmuej _aetrb3bt _10531gjq _f8pj1gjq _irr3166n _30l31gjq _1di61dty _9h8h1gjq"
24
+ root: "_bfhksm61 _syazazsu _8l3m1l7x _aetrb3bt _1053azsu _f8pjazsu _irr31dpa _30l3azsu _1di6fcek _9h8hazsu"
27
25
  };
28
26
  const primaryStyles = {
29
- root: "_bfhkomb0 _syaz15cr _105315cr _30l315cr _irr31wqm _9h8h15cr _1di617hq"
27
+ root: "_bfhk1856 _syaz15cr _105315cr _30l315cr _irr3hf2y _9h8h15cr _1di6g6ey"
30
28
  };
31
29
  const discoveryStyles = {
32
- root: "_bfhk1vbi _syaz15cr _105315cr _30l315cr _irr37gr8 _9h8h15cr _1di61wu2"
30
+ root: "_bfhku5tj _syaz15cr _105315cr _30l315cr _irr3fqeg _9h8h15cr _1di61f1m"
33
31
  };
34
32
  const subtleStyles = {
35
- root: "_bfhkqtfy _syaz10s3 _105310s3 _f8pj10s3 _irr34mfv _30l310s3 _1di619qy _9h8h10s3",
36
- rootRefreshed: "_bfhkqtfy _syaz1gjq _10531gjq _f8pj1mjl _irr34mfv _30l31gjq _1di619qy _9h8h1gjq"
33
+ root: "_bfhksm61 _syazazsu _1053azsu _f8pj1mjl _irr31dpa _30l3azsu _1di6fcek _9h8hazsu"
37
34
  };
38
35
  const selectedStyles = {
39
- root: "_bfhk7btw _syaz1pke _10531pke _f8pj1pke _irr3i1yw _30l3aqb7 _1di619ru _9h8haqb7",
40
- rootRefreshed: "_bfhkfg4m _syaz1ldt _8l3mcoux _aetrb3bt _10531ldt _f8pj1ldt _30l31ldt _9h8h1ldt",
41
- discovery: "_bfhk1g49 _syaz1pke _30l31pke _irr31g49 _9h8h1pke _1di61g49"
36
+ root: "_bfhk15s3 _syaz6x5g _8l3mq98m _aetrb3bt _10536x5g _f8pj6x5g _30l36x5g _9h8h6x5g",
37
+ discovery: "_bfhk15s3 _syaz6x5g _30l36x5g _irr315s3 _9h8h6x5g _1di615s3"
42
38
  };
43
39
  const LinkIconButtonBase = ({
44
40
  // Prevent duplicate labels being added.
@@ -146,9 +142,7 @@ const LinkIconButtonBase = ({
146
142
  ref: mergeRefs([localRef, ref, triggerProps.ref].filter(Boolean))
147
143
  // Base props only
148
144
  ,
149
- xcss: cx(styles.base, appearance === 'default' && (fg('platform-component-visual-refresh') ? defaultStyles.rootRefreshed : defaultStyles.root), appearance === 'primary' && primaryStyles.root, appearance === 'discovery' && discoveryStyles.root, appearance === 'subtle' && (fg('platform-component-visual-refresh') ? subtleStyles.rootRefreshed : subtleStyles.root), styles.linkDecorationUnset, isSelected && (fg('platform-component-visual-refresh') ? selectedStyles.rootRefreshed : selectedStyles.root),
150
- // TODO: remove me once we kill color fallbacks
151
- isSelected && appearance === 'discovery' && selectedStyles.discovery, isDisabled && styles.disabled, spacing === 'compact' && styles.spacingCompact, styles.iconButton, shape === 'circle' && styles.circle),
145
+ xcss: cx(styles.base, appearance === 'default' && defaultStyles.root, appearance === 'primary' && primaryStyles.root, appearance === 'discovery' && discoveryStyles.root, appearance === 'subtle' && subtleStyles.root, styles.linkDecorationUnset, isSelected && selectedStyles.root, isSelected && appearance === 'discovery' && selectedStyles.discovery, isDisabled && styles.disabled, spacing === 'compact' && styles.spacingCompact, styles.iconButton, shape === 'circle' && styles.circle),
152
146
  onMouseDownCapture: onMouseDownCapture,
153
147
  onMouseUpCapture: onMouseUpCapture,
154
148
  onKeyDownCapture: onKeyDownCapture,
@@ -180,9 +174,7 @@ const LinkIconButtonBase = ({
180
174
  // aria-label={preventedAriaLabel}
181
175
  "aria-labelledby": ariaLabelledBy,
182
176
  ref: mergeRefs([localRef, ref]),
183
- xcss: cx(styles.base, appearance === 'default' && (fg('platform-component-visual-refresh') ? defaultStyles.rootRefreshed : defaultStyles.root), appearance === 'primary' && primaryStyles.root, appearance === 'discovery' && discoveryStyles.root, appearance === 'subtle' && (fg('platform-component-visual-refresh') ? subtleStyles.rootRefreshed : subtleStyles.root), styles.linkDecorationUnset, isSelected && (fg('platform-component-visual-refresh') ? selectedStyles.rootRefreshed : selectedStyles.root),
184
- // TODO: remove me once we kill color fallbacks
185
- isSelected && appearance === 'discovery' && selectedStyles.discovery, isDisabled && styles.disabled, styles.iconButton, spacing === 'compact' && styles.spacingCompact, shape === 'circle' && styles.circle),
177
+ xcss: cx(styles.base, appearance === 'default' && defaultStyles.root, appearance === 'primary' && primaryStyles.root, appearance === 'discovery' && discoveryStyles.root, appearance === 'subtle' && subtleStyles.root, styles.linkDecorationUnset, isSelected && selectedStyles.root, isSelected && appearance === 'discovery' && selectedStyles.discovery, isDisabled && styles.disabled, styles.iconButton, spacing === 'compact' && styles.spacingCompact, shape === 'circle' && styles.circle),
186
178
  onClick: onClick,
187
179
  onMouseDownCapture: onMouseDownCapture,
188
180
  onMouseUpCapture: onMouseUpCapture,
package/dist/es2019/new-button/variants/shared/button-base.compiled.css CHANGED
@@ -10,9 +10,9 @@
10
10
  ._1rjcv77o{padding-block:var(--ds-space-025,2px)}
11
11
  ._1tv3nqa1:after{border-style:solid}
12
12
  ._39yqe4h9:after{border-width:var(--ds-border-width,1px)}
13
- ._8l3m13gt:after{border-color:var(--ds-border-disabled,#091e420f)}
13
+ ._8l3m1l7x:after{border-color:var(--ds-border,#0b120e24)}
14
+ ._8l3mbk0g:after{border-color:var(--ds-border-disabled,#0515240f)}
14
15
  ._8l3mcoux:after{border-color:var(--ds-border-selected,#0052cc)}
15
- ._8l3mmuej:after{border-color:var(--ds-border,#091e4224)}
16
16
  ._11fnglyw:after{pointer-events:none}
17
17
  ._152tze3t{inset-block-start:var(--ds-space-0,0)}
18
18
  ._18m915vq{overflow-y:hidden}
@@ -39,16 +39,14 @@
39
39
  ._80om15jw{cursor:progress}
40
40
  ._aetrb3bt:after{content:""}
41
41
  ._ajmmnqa1{text-decoration-style:solid}
42
+ ._bfhk15s3{background-color:var(--ds-background-selected,#e9f2fe)}
42
43
  ._bfhk1fvb{background-color:var(--ds-background-disabled,rgba(9,30,66,.04))}
43
44
  ._bfhk1g49{background-color:var(--ds-background-selected,#403294)}
44
45
  ._bfhk1ikc{background-color:var(--ds-background-warning-bold,#ffab00)}
45
46
  ._bfhk1j28{background-color:transparent}
46
- ._bfhk1j54{background-color:var(--ds-background-neutral,rgba(9,30,66,.04))}
47
47
  ._bfhk1v7l{background-color:var(--ds-background-danger-bold,#de350b)}
48
48
  ._bfhk1vbi{background-color:var(--ds-background-discovery-bold,#5243aa)}
49
- ._bfhk7btw{background-color:var(--ds-background-selected,#253858)}
50
49
  ._bfhkbeib{background-color:var(--ds-background-selected,#bf2600)}
51
- ._bfhkfg4m{background-color:var(--ds-background-selected,#e9f2ff)}
52
50
  ._bfhkomb0{background-color:var(--ds-background-brand-bold,#0052cc)}
53
51
  ._bfhkqtfy{background-color:var(--ds-background-neutral-subtle,transparent)}
54
52
  ._bfhksm61{background-color:var(--ds-background-neutral-subtle,#00000000)}
@@ -64,46 +62,40 @@
64
62
  ._p12f1osq{max-width:100%}
65
63
  ._rjxpze3t{inset-inline-end:var(--ds-space-0,0)}
66
64
  ._s7n4nkob{vertical-align:middle}
67
- ._syaz10s3{color:var(--ds-text,#42526e)}
68
65
  ._syaz15cr{color:var(--ds-text-inverse,#fff)}
69
66
  ._syaz16q2{color:var(--ds-text-selected,#172b4d)}
70
- ._syaz1gjq{color:var(--ds-text-subtle,#44546f)}
67
+ ._syaz1gmx{color:var(--ds-text-disabled,#080f214a)}
71
68
  ._syaz1ldt{color:var(--ds-text-selected,#0052cc)}
72
- ._syaz1lh4{color:var(--ds-text-disabled,#091e424f)}
73
69
  ._syaz1pke{color:var(--ds-text-selected,#f4f5f7)}
74
70
  ._syazal3n{color:var(--ds-text-warning-inverse,#172b4d)}
71
+ ._syazazsu{color:var(--ds-text-subtle,#505258)}
75
72
  ._u7coze3t{inset-block-end:var(--ds-space-0,0)}
76
73
  ._vchhusvi{box-sizing:border-box}
77
74
  ._y3gn1h6o{text-align:center}
78
75
  ._y4ti12x7{padding-inline-end:var(--ds-space-075,6px)}
79
76
  ._y4tiu2gc{padding-inline-end:var(--ds-space-100,8px)}
80
77
  ._y4tiutpp{padding-inline-end:var(--ds-space-150,9pt)}
81
- ._y4tize3t{padding-inline-end:var(--ds-space-0,0)}._105310s3:visited{color:var(--ds-text,#42526e)}
82
- ._105315cr:visited{color:var(--ds-text-inverse,#fff)}
83
- ._10531gjq:visited{color:var(--ds-text-subtle,#44546f)}
78
+ ._y4tize3t{padding-inline-end:var(--ds-space-0,0)}._105315cr:visited{color:var(--ds-text-inverse,#fff)}
84
79
  ._10531ldt:visited{color:var(--ds-text-selected,#0052cc)}
85
- ._10531pke:visited{color:var(--ds-text-selected,#f4f5f7)}
86
80
  ._1053al3n:visited{color:var(--ds-text-warning-inverse,#172b4d)}
81
+ ._1053azsu:visited{color:var(--ds-text-subtle,#505258)}
87
82
  ._1a3b1r31:focus{text-decoration-color:currentColor}
88
83
  ._4fprglyw:focus{text-decoration-line:none}
89
84
  ._5goinqa1:focus{text-decoration-style:solid}
90
- ._f8pj10s3:focus{color:var(--ds-text,#42526e)}
91
85
  ._f8pj15cr:focus{color:var(--ds-text-inverse,#fff)}
92
- ._f8pj1gjq:focus{color:var(--ds-text-subtle,#44546f)}
93
86
  ._f8pj1ldt:focus{color:var(--ds-text-selected,#0052cc)}
94
- ._f8pj1pke:focus{color:var(--ds-text-selected,#f4f5f7)}
95
87
  ._f8pjal3n:focus{color:var(--ds-text-warning-inverse,#172b4d)}
88
+ ._f8pjazsu:focus{color:var(--ds-text-subtle,#505258)}
96
89
  ._g0pbb4wl:focus-visible{z-index:100}
97
90
  ._1bnxglyw:hover{text-decoration-line:none}
98
- ._30l310s3:hover{color:var(--ds-text,#42526e)}
99
91
  ._30l315cr:hover{color:var(--ds-text-inverse,#fff)}
100
- ._30l31gjq:hover{color:var(--ds-text-subtle,#44546f)}
92
+ ._30l31gmx:hover{color:var(--ds-text-disabled,#080f214a)}
101
93
  ._30l31ldt:hover{color:var(--ds-text-selected,#0052cc)}
102
- ._30l31lh4:hover{color:var(--ds-text-disabled,#091e424f)}
103
94
  ._30l31pke:hover{color:var(--ds-text-selected,#f4f5f7)}
104
95
  ._30l3al3n:hover{color:var(--ds-text-warning-inverse,#172b4d)}
96
+ ._30l3azsu:hover{color:var(--ds-text-subtle,#505258)}
105
97
  ._9oik1r31:hover{text-decoration-color:currentColor}
106
- ._irr3166n:hover{background-color:var(--ds-background-neutral-subtle-hovered,#091e420f)}
98
+ ._irr31dpa:hover{background-color:var(--ds-background-neutral-subtle-hovered,#0515240f)}
107
99
  ._irr31fvb:hover{background-color:var(--ds-background-disabled,rgba(9,30,66,.04))}
108
100
  ._irr31g49:hover{background-color:var(--ds-background-selected,#403294)}
109
101
  ._irr31j28:hover{background-color:transparent}
@@ -115,28 +107,25 @@
115
107
  ._irr3beib:hover{background-color:var(--ds-background-selected,#bf2600)}
116
108
  ._irr3t71w:hover{background-color:var(--ds-background-selected-hovered,#253858)}
117
109
  ._irr3vdtc:hover{background-color:var(--ds-background-selected,#ff991f)}
118
- ._irr3yw9d:hover{background-color:var(--ds-background-neutral-hovered,#091e4214)}
119
110
  ._jf4cnqa1:hover{text-decoration-style:solid}
120
111
  ._1di617hq:active{background-color:var(--ds-background-brand-bold-pressed,#0747a6)}
121
112
  ._1di619qy:active{background-color:var(--ds-background-neutral-subtle-pressed,#b3d4ff)}
122
- ._1di61dty:active{background-color:var(--ds-background-neutral-subtle-pressed,#091e4224)}
123
113
  ._1di61fvb:active{background-color:var(--ds-background-disabled,rgba(9,30,66,.04))}
124
114
  ._1di61g49:active{background-color:var(--ds-background-selected,#403294)}
125
115
  ._1di61j28:active{background-color:transparent}
126
116
  ._1di61wu2:active{background-color:var(--ds-background-discovery-bold-pressed,#5243aa)}
127
117
  ._1di6beib:active{background-color:var(--ds-background-selected,#bf2600)}
118
+ ._1di6fcek:active{background-color:var(--ds-background-neutral-subtle-pressed,#0b120e24)}
128
119
  ._1di6h4op:active{background-color:var(--ds-background-warning-bold-pressed,#ff991f)}
129
- ._1di6ih13:active{background-color:var(--ds-background-neutral-pressed,#b3d4ff)}
130
120
  ._1di6vdtc:active{background-color:var(--ds-background-selected,#ff991f)}
131
121
  ._1di6yssv:active{background-color:var(--ds-background-selected-pressed,#253858)}
132
122
  ._1di6yycf:active{background-color:var(--ds-background-danger-bold-pressed,#bf2600)}
133
123
  ._1iohnqa1:active{text-decoration-style:solid}
134
124
  ._1nrm1r31:active{text-decoration-color:currentColor}
135
- ._9h8h10s3:active{color:var(--ds-text,#42526e)}
136
125
  ._9h8h15cr:active{color:var(--ds-text-inverse,#fff)}
137
- ._9h8h1gjq:active{color:var(--ds-text-subtle,#44546f)}
126
+ ._9h8h1gmx:active{color:var(--ds-text-disabled,#080f214a)}
138
127
  ._9h8h1ldt:active{color:var(--ds-text-selected,#0052cc)}
139
- ._9h8h1lh4:active{color:var(--ds-text-disabled,#091e424f)}
140
128
  ._9h8h1pke:active{color:var(--ds-text-selected,#f4f5f7)}
141
129
  ._9h8hal3n:active{color:var(--ds-text-warning-inverse,#172b4d)}
130
+ ._9h8hazsu:active{color:var(--ds-text-subtle,#505258)}
142
131
  ._c2waglyw:active{text-decoration-line:none}
package/dist/es2019/new-button/variants/shared/button-base.js CHANGED
@@ -7,7 +7,6 @@ import { cx } from '@atlaskit/css';
7
7
  import mergeRefs from '@atlaskit/ds-lib/merge-refs';
8
8
  import useAutoFocus from '@atlaskit/ds-lib/use-auto-focus';
9
9
  import { useId } from '@atlaskit/ds-lib/use-id';
10
- import { fg } from '@atlaskit/platform-feature-flags';
11
10
  import { Pressable } from '@atlaskit/primitives/compiled';
12
11
  import VisuallyHidden from '@atlaskit/visually-hidden';
13
12
  import { SplitButtonContext, useSplitButtonContext } from '../../containers/split-button/split-button-context';
@@ -17,7 +16,7 @@ const LOADING_LABEL = ', Loading';
17
16
  const styles = {
18
17
  base: "_2rkofajl _11c82smr _v5649dqc _189eidpf _1rjc12x7 _1e0c116y _vchhusvi _1bsb1wug _p12f1osq _kqswh2mm _4cvr1q9y _1bah1h6o _gy1p1b66 _1o9zidpf _4t3iviql _k48p1wq8 _y4tiutpp _bozgutpp _y3gn1h6o _s7n4nkob _14mj1kw7 _9v7aze3t _1tv3nqa1 _39yqe4h9 _11fnglyw _18postnw",
19
18
  linkDecorationUnset: "_4bfu1r31 _1hmsglyw _ajmmnqa1 _1a3b1r31 _4fprglyw _5goinqa1 _9oik1r31 _1bnxglyw _jf4cnqa1 _1nrm1r31 _c2waglyw _1iohnqa1",
20
- disabled: "_80om13gf _syaz1lh4 _30l31lh4 _9h8h1lh4",
19
+ disabled: "_80om13gf _syaz1gmx _30l31gmx _9h8h1gmx",
21
20
  sharedDisabled: "_bfhk1fvb _irr31fvb _1di61fvb",
22
21
  spacingCompact: "_1rjcv77o _gy1p1b66 _4t3i1k8s _y4tiutpp _bozgutpp _s7n4nkob",
23
22
  circle: "_2rko1rr0",
@@ -32,11 +31,9 @@ const styles = {
32
31
  navigationSplitButton: "_1bsb1tcg _bfhksm61 _y4ti12x7 _bozg12x7"
33
32
  };
34
33
  const defaultStyles = {
35
- root: "_bfhk1j54 _syaz10s3 _105310s3 _f8pj10s3 _30l310s3 _9h8h10s3",
36
- rootRefreshed: "_bfhksm61 _syaz1gjq _8l3mmuej _aetrb3bt _10531gjq _f8pj1gjq _30l31gjq _9h8h1gjq",
37
- interactive: "_irr3yw9d _30l310s3 _1di6ih13 _9h8h10s3",
38
- interactiveRefreshed: "_irr3166n _30l31gjq _1di61dty _9h8h1gjq",
39
- disabledRefreshed: "_bfhk1j28 _8l3m13gt _irr31j28 _1di61j28"
34
+ root: "_bfhksm61 _syazazsu _8l3m1l7x _aetrb3bt _1053azsu _f8pjazsu _30l3azsu _9h8hazsu",
35
+ interactive: "_irr31dpa _30l3azsu _1di6fcek _9h8hazsu",
36
+ disabled: "_bfhk1j28 _8l3mbk0g _irr31j28 _1di61j28"
40
37
  };
41
38
  const primaryStyles = {
42
39
  root: "_bfhkomb0 _syaz15cr _105315cr _f8pj15cr _30l315cr _9h8h15cr",
@@ -55,15 +52,12 @@ const discoveryStyles = {
55
52
  interactive: "_30l315cr _irr37gr8 _9h8h15cr _1di61wu2"
56
53
  };
57
54
  const subtleStyles = {
58
- root: "_bfhkqtfy _syaz10s3 _105310s3 _f8pj10s3 _30l310s3 _9h8h10s3",
59
- rootRefreshed: "_bfhkqtfy _syaz1gjq _10531gjq _f8pj1gjq _30l31gjq _9h8h1gjq",
60
- interactive: "_irr34mfv _30l310s3 _1di619qy _9h8h10s3",
61
- interactiveRefreshed: "_irr34mfv _30l31gjq _1di619qy _9h8h1gjq",
62
- disabledRefreshed: "_bfhk1j28 _8l3m13gt _irr31j28 _1di61j28"
55
+ root: "_bfhkqtfy _syazazsu _1053azsu _f8pjazsu _30l3azsu _9h8hazsu",
56
+ interactive: "_irr34mfv _30l3azsu _1di619qy _9h8hazsu",
57
+ disabled: "_bfhk1j28 _8l3mbk0g _irr31j28 _1di61j28"
63
58
  };
64
59
  const selectedStyles = {
65
- root: "_bfhk7btw _syaz1pke _10531pke _f8pj1pke _30l31pke _9h8h1pke",
66
- rootRefreshed: "_bfhkfg4m _syaz1ldt _8l3mcoux _aetrb3bt _10531ldt _f8pj1ldt _30l31ldt _9h8h1ldt",
60
+ root: "_bfhk15s3 _syaz1ldt _8l3mcoux _aetrb3bt _10531ldt _f8pj1ldt _30l31ldt _9h8h1ldt",
67
61
  insideSplitButton: "_1pbycs5v",
68
62
  interactive: "_irr3t71w _30l31pke _1di6yssv _9h8h1pke",
69
63
  warning: "_bfhkvdtc _syaz16q2 _30l31pke _irr3vdtc _9h8h1pke _1di6vdtc",
@@ -134,7 +128,7 @@ const ButtonBase = /*#__PURE__*/React.forwardRef(
134
128
  const isSplitButton = Boolean(splitButtonContext);
135
129
  const isNavigationSplitButton = (splitButtonContext === null || splitButtonContext === void 0 ? void 0 : splitButtonContext.isNavigationSplitButton) || false;
136
130
  const isDefaultAppearanceSplitButton = (splitButtonContext === null || splitButtonContext === void 0 ? void 0 : splitButtonContext.appearance) === 'default';
137
- const appearance = isDefaultAppearanceSplitButton && fg('platform-component-visual-refresh') ? 'subtle' : propAppearance || (splitButtonContext === null || splitButtonContext === void 0 ? void 0 : splitButtonContext.appearance) || 'default';
131
+ const appearance = isDefaultAppearanceSplitButton ? 'subtle' : propAppearance || (splitButtonContext === null || splitButtonContext === void 0 ? void 0 : splitButtonContext.appearance) || 'default';
138
132
  const spacing = (splitButtonContext === null || splitButtonContext === void 0 ? void 0 : splitButtonContext.spacing) || propSpacing;
139
133
  const isDisabled = (splitButtonContext === null || splitButtonContext === void 0 ? void 0 : splitButtonContext.isDisabled) || propIsDisabled;
140
134
  const isInteractive = !isDisabled && !isLoading;
@@ -156,13 +150,13 @@ const ButtonBase = /*#__PURE__*/React.forwardRef(
156
150
  analyticsContext: analyticsContext,
157
151
  role: role,
158
152
  ref: mergeRefs([localRef, ref]),
159
- xcss: cx(styles.base, appearance === 'default' && (fg('platform-component-visual-refresh') ? defaultStyles.rootRefreshed : defaultStyles.root), appearance === 'default' && isInteractive && (fg('platform-component-visual-refresh') ? defaultStyles.interactiveRefreshed : defaultStyles.interactive), appearance === 'primary' && primaryStyles.root, appearance === 'primary' && isInteractive && primaryStyles.interactive, appearance === 'warning' && warningStyles.root, appearance === 'warning' && isInteractive && warningStyles.interactive, appearance === 'danger' && dangerStyles.root, appearance === 'danger' && isInteractive && dangerStyles.interactive, appearance === 'discovery' && discoveryStyles.root, appearance === 'discovery' && isInteractive && discoveryStyles.interactive, appearance === 'subtle' && (fg('platform-component-visual-refresh') ? subtleStyles.rootRefreshed : subtleStyles.root), appearance === 'subtle' && isInteractive && (fg('platform-component-visual-refresh') ? subtleStyles.interactiveRefreshed : subtleStyles.interactive), styles.linkDecorationUnset, isSelected && (fg('platform-component-visual-refresh') ? selectedStyles.rootRefreshed : selectedStyles.root), isSelected && isSplitButton && selectedStyles.insideSplitButton, isSelected && isInteractive && selectedStyles.interactive,
153
+ xcss: cx(styles.base, appearance === 'default' && defaultStyles.root, appearance === 'default' && isInteractive && defaultStyles.interactive, appearance === 'primary' && primaryStyles.root, appearance === 'primary' && isInteractive && primaryStyles.interactive, appearance === 'warning' && warningStyles.root, appearance === 'warning' && isInteractive && warningStyles.interactive, appearance === 'danger' && dangerStyles.root, appearance === 'danger' && isInteractive && dangerStyles.interactive, appearance === 'discovery' && discoveryStyles.root, appearance === 'discovery' && isInteractive && discoveryStyles.interactive, appearance === 'subtle' && subtleStyles.root, appearance === 'subtle' && isInteractive && subtleStyles.interactive, styles.linkDecorationUnset, isSelected && selectedStyles.root, isSelected && isSplitButton && selectedStyles.insideSplitButton, isSelected && isInteractive && selectedStyles.interactive,
160
154
  // TODO: remove me once we kill color fallbacks
161
155
  isSelected && appearance === 'danger' && selectedStyles.danger,
162
156
  // TODO: remove me once we kill color fallbacks
163
157
  isSelected && appearance === 'warning' && selectedStyles.warning,
164
158
  // TODO: remove me once we kill color fallbacks
165
- isSelected && appearance === 'discovery' && selectedStyles.discovery, isDisabled && styles.disabled, isDisabled && (!fg('platform-component-visual-refresh') || appearance !== 'default' && appearance !== 'subtle') && styles.sharedDisabled, isDisabled && appearance === 'default' && (fg('platform-component-visual-refresh') ? defaultStyles.disabledRefreshed : defaultStyles.disabled), isCircle && !isSplitButton && styles.circle, spacing === 'compact' && styles.spacingCompact, hasIconBefore && styles.buttonIconBefore, shouldFitContainer && styles.fullWidth, hasIconAfter && styles.buttonIconAfter, isIconButton && styles.iconButton, isIconButton && spacing === 'compact' && styles.iconButtonCompact, isLoading && styles.loading, isSplitButton && styles.splitButton, isNavigationSplitButton && styles.navigationSplitButton),
159
+ isSelected && appearance === 'discovery' && selectedStyles.discovery, isDisabled && styles.disabled, isDisabled && appearance !== 'default' && appearance !== 'subtle' && styles.sharedDisabled, isDisabled && appearance === 'default' && defaultStyles.disabled, isCircle && !isSplitButton && styles.circle, spacing === 'compact' && styles.spacingCompact, hasIconBefore && styles.buttonIconBefore, shouldFitContainer && styles.fullWidth, hasIconAfter && styles.buttonIconAfter, isIconButton && styles.iconButton, isIconButton && spacing === 'compact' && styles.iconButtonCompact, isLoading && styles.loading, isSplitButton && styles.splitButton, isNavigationSplitButton && styles.navigationSplitButton),
166
160
  isDisabled: isEffectivelyDisabled,
167
161
  "aria-label": isLoading && ariaLabel && !ariaLabelledBy ? `${ariaLabel} ${LOADING_LABEL}` : ariaLabel,
168
162
  "aria-labelledby": isLoading && ariaLabelledBy ? `${ariaLabelledBy} ${loadingLabelId}` : ariaLabelledBy,