@atlaskit/button 16.1.1 → 16.1.5

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 (27) hide show
  1. package/CHANGELOG.md +26 -0
  2. package/dist/cjs/button.js +3 -1
  3. package/dist/cjs/custom-theme-button/custom-theme-button.js +5 -3
  4. package/dist/cjs/custom-theme-button/index.js +4 -4
  5. package/dist/cjs/custom-theme-button/theme.js +4 -4
  6. package/dist/cjs/entry-points/custom-theme-button.js +4 -4
  7. package/dist/cjs/index.js +8 -8
  8. package/dist/cjs/loading-button.js +3 -1
  9. package/dist/cjs/shared/button-base.js +22 -4
  10. package/dist/cjs/shared/colors.js +160 -163
  11. package/dist/cjs/shared/css.js +4 -4
  12. package/dist/cjs/shared/loading-spinner.js +3 -1
  13. package/dist/cjs/version.json +1 -1
  14. package/dist/es2019/shared/button-base.js +18 -2
  15. package/dist/es2019/shared/colors.js +160 -162
  16. package/dist/es2019/version.json +1 -1
  17. package/dist/esm/button.js +2 -1
  18. package/dist/esm/custom-theme-button/custom-theme-button.js +4 -3
  19. package/dist/esm/custom-theme-button/theme.js +2 -2
  20. package/dist/esm/loading-button.js +2 -1
  21. package/dist/esm/shared/button-base.js +20 -3
  22. package/dist/esm/shared/colors.js +160 -162
  23. package/dist/esm/shared/css.js +2 -2
  24. package/dist/esm/shared/loading-spinner.js +2 -1
  25. package/dist/esm/version.json +1 -1
  26. package/dist/types/shared/loading-spinner.d.ts +1 -0
  27. package/package.json +8 -7
package/dist/es2019/shared/colors.js CHANGED
@@ -1,114 +1,112 @@
1
1
  import * as colors from '@atlaskit/theme/colors';
2
- import { token } from '@atlaskit/tokens';
3
2
  // Hard coding the active rgba color value rather than using a helper to convert it
4
3
  // With helper it would be: hex2rgba(colors.B75, 0.6)
5
- // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
6
4
  const fadedB75 = 'rgba(179, 212, 255, 0.6)';
7
5
  const values = {
8
6
  // Default appearance
9
7
  background: {
10
8
  default: {
11
9
  default: {
12
- light: token('color.background.subtleNeutral.resting', colors.N20A),
13
- dark: token('color.background.subtleNeutral.resting', colors.DN70)
10
+ light: `var(--ds-background-subtleNeutral-resting, ${colors.N20A})`,
11
+ dark: `var(--ds-background-subtleNeutral-resting, ${colors.DN70})`
14
12
  },
15
13
  hover: {
16
- light: token('color.background.subtleNeutral.hover', colors.N30A),
17
- dark: token('color.background.subtleNeutral.hover', colors.DN60)
14
+ light: `var(--ds-background-subtleNeutral-hover, ${colors.N30A})`,
15
+ dark: `var(--ds-background-subtleNeutral-hover, ${colors.DN60})`
18
16
  },
19
17
  active: {
20
- light: token('color.background.subtleNeutral.pressed', fadedB75),
21
- dark: token('color.background.subtleNeutral.pressed', colors.B75)
18
+ light: `var(--ds-background-subtleNeutral-pressed, ${fadedB75})`,
19
+ dark: `var(--ds-background-subtleNeutral-pressed, ${colors.B75})`
22
20
  },
23
21
  disabled: {
24
- light: token('color.background.disabled', colors.N20A),
25
- dark: token('color.background.disabled', colors.DN70)
22
+ light: `var(--ds-background-disabled, ${colors.N20A})`,
23
+ dark: `var(--ds-background-disabled, ${colors.DN70})`
26
24
  },
27
25
  selected: {
28
- light: token('color.background.selected.resting', colors.N700),
29
- dark: token('color.background.selected.resting', colors.DN0)
26
+ light: `var(--ds-background-selected-resting, ${colors.N700})`,
27
+ dark: `var(--ds-background-selected-resting, ${colors.DN0})`
30
28
  },
31
29
  focusSelected: {
32
- light: token('color.background.selected.resting', colors.N700),
33
- dark: token('color.background.selected.resting', colors.DN0)
30
+ light: `var(--ds-background-selected-resting, ${colors.N700})`,
31
+ dark: `var(--ds-background-selected-resting, ${colors.DN0})`
34
32
  }
35
33
  },
36
34
  primary: {
37
35
  default: {
38
- light: token('color.background.boldBrand.resting', colors.B400),
39
- dark: token('color.background.boldBrand.resting', colors.B100)
36
+ light: `var(--ds-background-boldBrand-resting, ${colors.B400})`,
37
+ dark: `var(--ds-background-boldBrand-resting, ${colors.B100})`
40
38
  },
41
39
  hover: {
42
- light: token('color.background.boldBrand.hover', colors.B300),
43
- dark: token('color.background.boldBrand.hover', colors.B75)
40
+ light: `var(--ds-background-boldBrand-hover, ${colors.B300})`,
41
+ dark: `var(--ds-background-boldBrand-hover, ${colors.B75})`
44
42
  },
45
43
  active: {
46
- light: token('color.background.boldBrand.pressed', colors.B500),
47
- dark: token('color.background.boldBrand.pressed', colors.B200)
44
+ light: `var(--ds-background-boldBrand-pressed, ${colors.B500})`,
45
+ dark: `var(--ds-background-boldBrand-pressed, ${colors.B200})`
48
46
  },
49
47
  disabled: {
50
- light: token('color.background.disabled', colors.N20A),
51
- dark: token('color.background.disabled', colors.DN70)
48
+ light: `var(--ds-background-disabled, ${colors.N20A})`,
49
+ dark: `var(--ds-background-disabled, ${colors.DN70})`
52
50
  },
53
51
  selected: {
54
- light: token('color.background.selected.resting', colors.N700),
55
- dark: token('color.background.selected.resting', colors.DN0)
52
+ light: `var(--ds-background-selected-resting, ${colors.N700})`,
53
+ dark: `var(--ds-background-selected-resting, ${colors.DN0})`
56
54
  },
57
55
  focusSelected: {
58
- light: token('color.background.selected.resting', colors.N700),
59
- dark: token('color.background.selected.resting', colors.DN0)
56
+ light: `var(--ds-background-selected-resting, ${colors.N700})`,
57
+ dark: `var(--ds-background-selected-resting, ${colors.DN0})`
60
58
  }
61
59
  },
62
60
  warning: {
63
61
  default: {
64
- light: token('color.background.boldWarning.resting', colors.Y300),
65
- dark: token('color.background.boldWarning.resting', colors.Y300)
62
+ light: `var(--ds-background-boldWarning-resting, ${colors.Y300})`,
63
+ dark: `var(--ds-background-boldWarning-resting, ${colors.Y300})`
66
64
  },
67
65
  hover: {
68
- light: token('color.background.boldWarning.hover', colors.Y200),
69
- dark: token('color.background.boldWarning.hover', colors.Y200)
66
+ light: `var(--ds-background-boldWarning-hover, ${colors.Y200})`,
67
+ dark: `var(--ds-background-boldWarning-hover, ${colors.Y200})`
70
68
  },
71
69
  active: {
72
- light: token('color.background.boldWarning.pressed', colors.Y400),
73
- dark: token('color.background.boldWarning.pressed', colors.Y400)
70
+ light: `var(--ds-background-boldWarning-pressed, ${colors.Y400})`,
71
+ dark: `var(--ds-background-boldWarning-pressed, ${colors.Y400})`
74
72
  },
75
73
  disabled: {
76
- light: token('color.background.disabled', colors.N20A),
77
- dark: token('color.background.disabled', colors.DN70)
74
+ light: `var(--ds-background-disabled, ${colors.N20A})`,
75
+ dark: `var(--ds-background-disabled, ${colors.DN70})`
78
76
  },
79
77
  selected: {
80
- light: token('color.background.selected.resting', colors.Y400),
81
- dark: token('color.background.selected.resting', colors.Y400)
78
+ light: `var(--ds-background-selected-resting, ${colors.Y400})`,
79
+ dark: `var(--ds-background-selected-resting, ${colors.Y400})`
82
80
  },
83
81
  focusSelected: {
84
- light: token('color.background.selected.resting', colors.Y400),
85
- dark: token('color.background.selected.resting', colors.Y400)
82
+ light: `var(--ds-background-selected-resting, ${colors.Y400})`,
83
+ dark: `var(--ds-background-selected-resting, ${colors.Y400})`
86
84
  }
87
85
  },
88
86
  danger: {
89
87
  default: {
90
- light: token('color.background.boldDanger.resting', colors.R400),
91
- dark: token('color.background.boldDanger.resting', colors.R400)
88
+ light: `var(--ds-background-boldDanger-resting, ${colors.R400})`,
89
+ dark: `var(--ds-background-boldDanger-resting, ${colors.R400})`
92
90
  },
93
91
  hover: {
94
- light: token('color.background.boldDanger.hover', colors.R300),
95
- dark: token('color.background.boldDanger.hover', colors.R300)
92
+ light: `var(--ds-background-boldDanger-hover, ${colors.R300})`,
93
+ dark: `var(--ds-background-boldDanger-hover, ${colors.R300})`
96
94
  },
97
95
  active: {
98
- light: token('color.background.boldDanger.pressed', colors.R500),
99
- dark: token('color.background.boldDanger.pressed', colors.R500)
96
+ light: `var(--ds-background-boldDanger-pressed, ${colors.R500})`,
97
+ dark: `var(--ds-background-boldDanger-pressed, ${colors.R500})`
100
98
  },
101
99
  disabled: {
102
- light: token('color.background.disabled', colors.N20A),
103
- dark: token('color.background.disabled', colors.DN70)
100
+ light: `var(--ds-background-disabled, ${colors.N20A})`,
101
+ dark: `var(--ds-background-disabled, ${colors.DN70})`
104
102
  },
105
103
  selected: {
106
- light: token('color.background.selected.resting', colors.R500),
107
- dark: token('color.background.selected.resting', colors.R500)
104
+ light: `var(--ds-background-selected-resting, ${colors.R500})`,
105
+ dark: `var(--ds-background-selected-resting, ${colors.R500})`
108
106
  },
109
107
  focusSelected: {
110
- light: token('color.background.selected.resting', colors.R500),
111
- dark: token('color.background.selected.resting', colors.R500)
108
+ light: `var(--ds-background-selected-resting, ${colors.R500})`,
109
+ dark: `var(--ds-background-selected-resting, ${colors.R500})`
112
110
  }
113
111
  },
114
112
  link: {
@@ -117,12 +115,12 @@ const values = {
117
115
  dark: 'none'
118
116
  },
119
117
  selected: {
120
- light: token('color.background.selected.resting', colors.N700),
121
- dark: token('color.background.selected.resting', colors.N20)
118
+ light: `var(--ds-background-selected-resting, ${colors.N700})`,
119
+ dark: `var(--ds-background-selected-resting, ${colors.N20})`
122
120
  },
123
121
  focusSelected: {
124
- light: token('color.background.selected.resting', colors.N700),
125
- dark: token('color.background.selected.resting', colors.N20)
122
+ light: `var(--ds-background-selected-resting, ${colors.N700})`,
123
+ dark: `var(--ds-background-selected-resting, ${colors.N20})`
126
124
  }
127
125
  },
128
126
  subtle: {
@@ -131,24 +129,24 @@ const values = {
131
129
  dark: 'none'
132
130
  },
133
131
  hover: {
134
- light: token('color.background.transparentNeutral.hover', colors.N30A),
135
- dark: token('color.background.transparentNeutral.hover', colors.DN60)
132
+ light: `var(--ds-background-transparentNeutral-hover, ${colors.N30A})`,
133
+ dark: `var(--ds-background-transparentNeutral-hover, ${colors.DN60})`
136
134
  },
137
135
  active: {
138
- light: token('color.background.transparentNeutral.pressed', fadedB75),
139
- dark: token('color.background.transparentNeutral.pressed', colors.B75)
136
+ light: `var(--ds-background-transparentNeutral-pressed, ${fadedB75})`,
137
+ dark: `var(--ds-background-transparentNeutral-pressed, ${colors.B75})`
140
138
  },
141
139
  disabled: {
142
140
  light: 'none',
143
141
  dark: 'none'
144
142
  },
145
143
  selected: {
146
- light: token('color.background.selected.resting', colors.N700),
147
- dark: token('color.background.selected.resting', colors.DN0)
144
+ light: `var(--ds-background-selected-resting, ${colors.N700})`,
145
+ dark: `var(--ds-background-selected-resting, ${colors.DN0})`
148
146
  },
149
147
  focusSelected: {
150
- light: token('color.background.selected.resting', colors.N700),
151
- dark: token('color.background.selected.resting', colors.DN0)
148
+ light: `var(--ds-background-selected-resting, ${colors.N700})`,
149
+ dark: `var(--ds-background-selected-resting, ${colors.DN0})`
152
150
  }
153
151
  },
154
152
  'subtle-link': {
@@ -157,236 +155,236 @@ const values = {
157
155
  dark: 'none'
158
156
  },
159
157
  selected: {
160
- light: token('color.background.selected.resting', colors.N700),
161
- dark: token('color.background.selected.resting', colors.N20)
158
+ light: `var(--ds-background-selected-resting, ${colors.N700})`,
159
+ dark: `var(--ds-background-selected-resting, ${colors.N20})`
162
160
  },
163
161
  focusSelected: {
164
- light: token('color.background.selected.resting', colors.N700),
165
- dark: token('color.background.selected.resting', colors.N20)
162
+ light: `var(--ds-background-selected-resting, ${colors.N700})`,
163
+ dark: `var(--ds-background-selected-resting, ${colors.N20})`
166
164
  }
167
165
  }
168
166
  },
169
167
  boxShadowColor: {
170
168
  default: {
171
169
  focus: {
172
- light: token('color.border.focus', colors.B100),
173
- dark: token('color.border.focus', colors.B75)
170
+ light: `var(--ds-border-focus, ${colors.B100})`,
171
+ dark: `var(--ds-border-focus, ${colors.B75})`
174
172
  },
175
173
  focusSelected: {
176
- light: token('color.border.focus', colors.B100),
177
- dark: token('color.border.focus', colors.B75)
174
+ light: `var(--ds-border-focus, ${colors.B100})`,
175
+ dark: `var(--ds-border-focus, ${colors.B75})`
178
176
  }
179
177
  },
180
178
  primary: {
181
179
  focus: {
182
- light: token('color.border.focus', colors.B100),
183
- dark: token('color.border.focus', colors.B75)
180
+ light: `var(--ds-border-focus, ${colors.B100})`,
181
+ dark: `var(--ds-border-focus, ${colors.B75})`
184
182
  },
185
183
  focusSelected: {
186
- light: token('color.border.focus', colors.B100),
187
- dark: token('color.border.focus', colors.B75)
184
+ light: `var(--ds-border-focus, ${colors.B100})`,
185
+ dark: `var(--ds-border-focus, ${colors.B75})`
188
186
  }
189
187
  },
190
188
  warning: {
191
189
  focus: {
192
- light: token('color.border.focus', colors.Y500),
193
- dark: token('color.border.focus', colors.Y500)
190
+ light: `var(--ds-border-focus, ${colors.Y500})`,
191
+ dark: `var(--ds-border-focus, ${colors.Y500})`
194
192
  },
195
193
  focusSelected: {
196
- light: token('color.border.focus', colors.Y500),
197
- dark: token('color.border.focus', colors.Y500)
194
+ light: `var(--ds-border-focus, ${colors.Y500})`,
195
+ dark: `var(--ds-border-focus, ${colors.Y500})`
198
196
  }
199
197
  },
200
198
  danger: {
201
199
  focus: {
202
- light: token('color.border.focus', colors.R100),
203
- dark: token('color.border.focus', colors.R100)
200
+ light: `var(--ds-border-focus, ${colors.R100})`,
201
+ dark: `var(--ds-border-focus, ${colors.R100})`
204
202
  },
205
203
  focusSelected: {
206
- light: token('color.border.focus', colors.R100),
207
- dark: token('color.border.focus', colors.R100)
204
+ light: `var(--ds-border-focus, ${colors.R100})`,
205
+ dark: `var(--ds-border-focus, ${colors.R100})`
208
206
  }
209
207
  },
210
208
  link: {
211
209
  focus: {
212
- light: token('color.border.focus', colors.B100),
213
- dark: token('color.border.focus', colors.B75)
210
+ light: `var(--ds-border-focus, ${colors.B100})`,
211
+ dark: `var(--ds-border-focus, ${colors.B75})`
214
212
  },
215
213
  focusSelected: {
216
- light: token('color.border.focus', colors.B100),
217
- dark: token('color.border.focus', colors.B75)
214
+ light: `var(--ds-border-focus, ${colors.B100})`,
215
+ dark: `var(--ds-border-focus, ${colors.B75})`
218
216
  }
219
217
  },
220
218
  subtle: {
221
219
  focus: {
222
- light: token('color.border.focus', colors.B100),
223
- dark: token('color.border.focus', colors.B75)
220
+ light: `var(--ds-border-focus, ${colors.B100})`,
221
+ dark: `var(--ds-border-focus, ${colors.B75})`
224
222
  },
225
223
  focusSelected: {
226
- light: token('color.border.focus', colors.B100),
227
- dark: token('color.border.focus', colors.B75)
224
+ light: `var(--ds-border-focus, ${colors.B100})`,
225
+ dark: `var(--ds-border-focus, ${colors.B75})`
228
226
  }
229
227
  },
230
228
  'subtle-link': {
231
229
  focus: {
232
- light: token('color.border.focus', colors.B100),
233
- dark: token('color.border.focus', colors.B75)
230
+ light: `var(--ds-border-focus, ${colors.B100})`,
231
+ dark: `var(--ds-border-focus, ${colors.B75})`
234
232
  },
235
233
  focusSelected: {
236
- light: token('color.border.focus', colors.B100),
237
- dark: token('color.border.focus', colors.B75)
234
+ light: `var(--ds-border-focus, ${colors.B100})`,
235
+ dark: `var(--ds-border-focus, ${colors.B75})`
238
236
  }
239
237
  }
240
238
  },
241
239
  color: {
242
240
  default: {
243
241
  default: {
244
- light: token('color.text.highEmphasis', colors.N500),
245
- dark: token('color.text.highEmphasis', colors.DN400)
242
+ light: `var(--ds-text-highEmphasis, ${colors.N500})`,
243
+ dark: `var(--ds-text-highEmphasis, ${colors.DN400})`
246
244
  },
247
245
  active: {
248
- light: token('color.text.highEmphasis', colors.B400),
249
- dark: token('color.text.highEmphasis', colors.B400)
246
+ light: `var(--ds-text-highEmphasis, ${colors.B400})`,
247
+ dark: `var(--ds-text-highEmphasis, ${colors.B400})`
250
248
  },
251
249
  disabled: {
252
- light: token('color.text.disabled', colors.N70),
253
- dark: token('color.text.disabled', colors.DN30)
250
+ light: `var(--ds-text-disabled, ${colors.N70})`,
251
+ dark: `var(--ds-text-disabled, ${colors.DN30})`
254
252
  },
255
253
  selected: {
256
- light: token('color.text.selected', colors.N20),
257
- dark: token('color.text.selected', colors.DN400)
254
+ light: `var(--ds-text-selected, ${colors.N20})`,
255
+ dark: `var(--ds-text-selected, ${colors.DN400})`
258
256
  },
259
257
  focusSelected: {
260
- light: token('color.text.selected', colors.N20),
261
- dark: token('color.text.selected', colors.DN400)
258
+ light: `var(--ds-text-selected, ${colors.N20})`,
259
+ dark: `var(--ds-text-selected, ${colors.DN400})`
262
260
  }
263
261
  },
264
262
  primary: {
265
263
  default: {
266
- light: token('color.text.onBold', colors.N0),
267
- dark: token('color.text.onBold', colors.DN30)
264
+ light: `var(--ds-text-onBold, ${colors.N0})`,
265
+ dark: `var(--ds-text-onBold, ${colors.DN30})`
268
266
  },
269
267
  disabled: {
270
- light: token('color.text.disabled', colors.N70),
271
- dark: token('color.text.disabled', colors.DN30)
268
+ light: `var(--ds-text-disabled, ${colors.N70})`,
269
+ dark: `var(--ds-text-disabled, ${colors.DN30})`
272
270
  },
273
271
  selected: {
274
- light: token('color.text.selected', colors.N20),
275
- dark: token('color.text.selected', colors.DN400)
272
+ light: `var(--ds-text-selected, ${colors.N20})`,
273
+ dark: `var(--ds-text-selected, ${colors.DN400})`
276
274
  },
277
275
  focusSelected: {
278
- light: token('color.text.selected', colors.N20),
279
- dark: token('color.text.selected', colors.DN400)
276
+ light: `var(--ds-text-selected, ${colors.N20})`,
277
+ dark: `var(--ds-text-selected, ${colors.DN400})`
280
278
  }
281
279
  },
282
280
  warning: {
283
281
  default: {
284
- light: token('color.text.onBoldWarning', colors.N800),
285
- dark: token('color.text.onBoldWarning', colors.N800)
282
+ light: `var(--ds-text-onBoldWarning, ${colors.N800})`,
283
+ dark: `var(--ds-text-onBoldWarning, ${colors.N800})`
286
284
  },
287
285
  disabled: {
288
- light: token('color.text.disabled', colors.N70),
289
- dark: token('color.text.disabled', colors.DN30)
286
+ light: `var(--ds-text-disabled, ${colors.N70})`,
287
+ dark: `var(--ds-text-disabled, ${colors.DN30})`
290
288
  },
291
289
  selected: {
292
- light: token('color.text.selected', colors.N800),
293
- dark: token('color.text.selected', colors.N800)
290
+ light: `var(--ds-text-selected, ${colors.N800})`,
291
+ dark: `var(--ds-text-selected, ${colors.N800})`
294
292
  },
295
293
  focusSelected: {
296
- light: token('color.text.selected', colors.N800),
297
- dark: token('color.text.selected', colors.N800)
294
+ light: `var(--ds-text-selected, ${colors.N800})`,
295
+ dark: `var(--ds-text-selected, ${colors.N800})`
298
296
  }
299
297
  },
300
298
  danger: {
301
299
  default: {
302
- light: token('color.text.onBold', colors.N0),
303
- dark: token('color.text.onBold', colors.N0)
300
+ light: `var(--ds-text-onBold, ${colors.N0})`,
301
+ dark: `var(--ds-text-onBold, ${colors.N0})`
304
302
  },
305
303
  disabled: {
306
- light: token('color.text.disabled', colors.N70),
307
- dark: token('color.text.disabled', colors.DN30)
304
+ light: `var(--ds-text-disabled, ${colors.N70})`,
305
+ dark: `var(--ds-text-disabled, ${colors.DN30})`
308
306
  },
309
307
  selected: {
310
- light: token('color.text.selected', colors.N0),
311
- dark: token('color.text.selected', colors.N0)
308
+ light: `var(--ds-text-selected, ${colors.N0})`,
309
+ dark: `var(--ds-text-selected, ${colors.N0})`
312
310
  },
313
311
  focusSelected: {
314
- light: token('color.text.selected', colors.N0),
315
- dark: token('color.text.selected', colors.N0)
312
+ light: `var(--ds-text-selected, ${colors.N0})`,
313
+ dark: `var(--ds-text-selected, ${colors.N0})`
316
314
  }
317
315
  },
318
316
  link: {
319
317
  default: {
320
- light: token('color.text.link.resting', colors.B400),
321
- dark: token('color.text.link.resting', colors.B100)
318
+ light: `var(--ds-text-link-resting, ${colors.B400})`,
319
+ dark: `var(--ds-text-link-resting, ${colors.B100})`
322
320
  },
323
321
  hover: {
324
- light: token('color.text.link.resting', colors.B300),
325
- dark: token('color.text.link.resting', colors.B75)
322
+ light: `var(--ds-text-link-resting, ${colors.B300})`,
323
+ dark: `var(--ds-text-link-resting, ${colors.B75})`
326
324
  },
327
325
  active: {
328
- light: token('color.text.link.pressed', colors.B500),
329
- dark: token('color.text.link.pressed', colors.B200)
326
+ light: `var(--ds-text-link-pressed, ${colors.B500})`,
327
+ dark: `var(--ds-text-link-pressed, ${colors.B200})`
330
328
  },
331
329
  disabled: {
332
- light: token('color.text.disabled', colors.N70),
333
- dark: token('color.text.disabled', colors.DN100)
330
+ light: `var(--ds-text-disabled, ${colors.N70})`,
331
+ dark: `var(--ds-text-disabled, ${colors.DN100})`
334
332
  },
335
333
  selected: {
336
- light: token('color.text.selected', colors.N20),
337
- dark: token('color.text.selected', colors.N700)
334
+ light: `var(--ds-text-selected, ${colors.N20})`,
335
+ dark: `var(--ds-text-selected, ${colors.N700})`
338
336
  },
339
337
  focusSelected: {
340
- light: token('color.text.selected', colors.N20),
341
- dark: token('color.text.selected', colors.N700)
338
+ light: `var(--ds-text-selected, ${colors.N20})`,
339
+ dark: `var(--ds-text-selected, ${colors.N700})`
342
340
  }
343
341
  },
344
342
  subtle: {
345
343
  default: {
346
- light: token('color.text.highEmphasis', colors.N500),
347
- dark: token('color.text.highEmphasis', colors.DN400)
344
+ light: `var(--ds-text-highEmphasis, ${colors.N500})`,
345
+ dark: `var(--ds-text-highEmphasis, ${colors.DN400})`
348
346
  },
349
347
  active: {
350
- light: token('color.text.highEmphasis', colors.B400),
351
- dark: token('color.text.highEmphasis', colors.B400)
348
+ light: `var(--ds-text-highEmphasis, ${colors.B400})`,
349
+ dark: `var(--ds-text-highEmphasis, ${colors.B400})`
352
350
  },
353
351
  disabled: {
354
- light: token('color.text.disabled', colors.N70),
355
- dark: token('color.text.disabled', colors.DN100)
352
+ light: `var(--ds-text-disabled, ${colors.N70})`,
353
+ dark: `var(--ds-text-disabled, ${colors.DN100})`
356
354
  },
357
355
  selected: {
358
- light: token('color.text.selected', colors.N20),
359
- dark: token('color.text.selected', colors.DN400)
356
+ light: `var(--ds-text-selected, ${colors.N20})`,
357
+ dark: `var(--ds-text-selected, ${colors.DN400})`
360
358
  },
361
359
  focusSelected: {
362
- light: token('color.text.selected', colors.N20),
363
- dark: token('color.text.selected', colors.DN400)
360
+ light: `var(--ds-text-selected, ${colors.N20})`,
361
+ dark: `var(--ds-text-selected, ${colors.DN400})`
364
362
  }
365
363
  },
366
364
  'subtle-link': {
367
365
  default: {
368
- light: token('color.text.mediumEmphasis', colors.N200),
369
- dark: token('color.text.mediumEmphasis', colors.DN400)
366
+ light: `var(--ds-text-mediumEmphasis, ${colors.N200})`,
367
+ dark: `var(--ds-text-mediumEmphasis, ${colors.DN400})`
370
368
  },
371
369
  hover: {
372
- light: token('color.text.mediumEmphasis', colors.N90),
373
- dark: token('color.text.mediumEmphasis', colors.B50)
370
+ light: `var(--ds-text-mediumEmphasis, ${colors.N90})`,
371
+ dark: `var(--ds-text-mediumEmphasis, ${colors.B50})`
374
372
  },
375
373
  active: {
376
- light: token('color.text.highEmphasis', colors.N400),
377
- dark: token('color.text.highEmphasis', colors.DN300)
374
+ light: `var(--ds-text-highEmphasis, ${colors.N400})`,
375
+ dark: `var(--ds-text-highEmphasis, ${colors.DN300})`
378
376
  },
379
377
  disabled: {
380
- light: token('color.text.disabled', colors.N70),
381
- dark: token('color.text.disabled', colors.DN100)
378
+ light: `var(--ds-text-disabled, ${colors.N70})`,
379
+ dark: `var(--ds-text-disabled, ${colors.DN100})`
382
380
  },
383
381
  selected: {
384
- light: token('color.text.selected', colors.N20),
385
- dark: token('color.text.selected', colors.DN400)
382
+ light: `var(--ds-text-selected, ${colors.N20})`,
383
+ dark: `var(--ds-text-selected, ${colors.DN400})`
386
384
  },
387
385
  focusSelected: {
388
- light: token('color.text.selected', colors.N20),
389
- dark: token('color.text.selected', colors.DN400)
386
+ light: `var(--ds-text-selected, ${colors.N20})`,
387
+ dark: `var(--ds-text-selected, ${colors.DN400})`
390
388
  }
391
389
  }
392
390
  }
package/dist/es2019/version.json CHANGED
@@ -1,5 +1,5 @@
1
1
  {
2
2
  "name": "@atlaskit/button",
3
- "version": "16.1.1",
3
+ "version": "16.1.5",
4
4
  "sideEffects": false
5
5
  }
package/dist/esm/button.js CHANGED
@@ -1,6 +1,7 @@
1
1
  import _extends from "@babel/runtime/helpers/extends";
2
2
  import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
3
3
  import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
4
+ var _excluded = ["mode", "onMouseDown", "onMouseUp"];
4
5
  import React, { useCallback, useMemo, useState } from 'react';
5
6
  import GlobalTheme from '@atlaskit/theme/components';
6
7
  import ButtonBase from './shared/button-base';
@@ -16,7 +17,7 @@ var ButtonWithMode = /*#__PURE__*/React.forwardRef(function ButtonWithMode(_ref,
16
17
  providedOnMouseDown = _ref$onMouseDown === void 0 ? noop : _ref$onMouseDown,
17
18
  _ref$onMouseUp = _ref.onMouseUp,
18
19
  providedOnMouseUp = _ref$onMouseUp === void 0 ? noop : _ref$onMouseUp,
19
- rest = _objectWithoutProperties(_ref, ["mode", "onMouseDown", "onMouseUp"]);
20
+ rest = _objectWithoutProperties(_ref, _excluded);
20
21
 
21
22
  var appearance = rest.appearance || 'default';
22
23
  var spacing = rest.spacing || 'default';
package/dist/esm/custom-theme-button/custom-theme-button.js CHANGED
@@ -2,10 +2,11 @@ import _extends from "@babel/runtime/helpers/extends";
2
2
  import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
3
3
  import _defineProperty from "@babel/runtime/helpers/defineProperty";
4
4
  import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
5
+ var _excluded = ["appearance", "autoFocus", "isDisabled", "isSelected", "shouldFitContainer", "spacing", "isLoading", "onMouseEnter", "onMouseLeave", "onMouseDown", "onMouseUp", "onFocus", "onBlur", "theme"];
5
6
 
6
- function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
7
+ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
7
8
 
8
- function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
9
+ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
9
10
 
10
11
  import React, { useCallback, useState } from 'react';
11
12
  import GlobalTheme from '@atlaskit/theme/components';
@@ -84,7 +85,7 @@ var CustomThemeButton = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(f
84
85
  providedOnBlur = _ref2.onBlur,
85
86
  _ref2$theme = _ref2.theme,
86
87
  theme = _ref2$theme === void 0 ? defaultThemeFn : _ref2$theme,
87
- rest = _objectWithoutProperties(_ref2, ["appearance", "autoFocus", "isDisabled", "isSelected", "shouldFitContainer", "spacing", "isLoading", "onMouseEnter", "onMouseLeave", "onMouseDown", "onMouseUp", "onFocus", "onBlur", "theme"]);
88
+ rest = _objectWithoutProperties(_ref2, _excluded);
88
89
 
89
90
  // TODO is there a nicer way to do this?
90
91
  // Add default props back into object for spreading