@atlaskit/button 16.1.5 → 16.2.1

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 (18) hide show
  1. package/CHANGELOG.md +25 -0
  2. package/dist/cjs/button.js +8 -15
  3. package/dist/cjs/entry-points/standard-button.js +2 -0
  4. package/dist/cjs/shared/button-base.js +2 -2
  5. package/dist/cjs/shared/colors.js +110 -110
  6. package/dist/cjs/version.json +1 -1
  7. package/dist/es2019/button.js +5 -13
  8. package/dist/es2019/entry-points/standard-button.js +5 -0
  9. package/dist/es2019/shared/button-base.js +2 -2
  10. package/dist/es2019/shared/colors.js +110 -110
  11. package/dist/es2019/version.json +1 -1
  12. package/dist/esm/button.js +7 -14
  13. package/dist/esm/entry-points/standard-button.js +5 -0
  14. package/dist/esm/shared/button-base.js +2 -2
  15. package/dist/esm/shared/colors.js +110 -110
  16. package/dist/esm/version.json +1 -1
  17. package/dist/types/entry-points/standard-button.d.ts +5 -0
  18. package/package.json +3 -3
package/CHANGELOG.md CHANGED
@@ -1,5 +1,30 @@
1
1
  # @atlaskit/button
2
2
 
3
+ ## 16.2.1
4
+
5
+ ### Patch Changes
6
+
7
+ - [`62edf20ab1e`](https://bitbucket.org/atlassian/atlassian-frontend/commits/62edf20ab1e) - Migrates all usage of brand tokens to either selected or information tokens. This change is purely for semantic reasons, there are no visual or behavioural changes.
8
+ - Updated dependencies
9
+
10
+ ## 16.2.0
11
+
12
+ ### Minor Changes
13
+
14
+ - [`dde969b6ef5`](https://bitbucket.org/atlassian/atlassian-frontend/commits/dde969b6ef5) - Fix type error with missing 'css' prop when importing Buttons directly from "@atlaskit/button/standard-button"
15
+
16
+ ### Patch Changes
17
+
18
+ - Updated dependencies
19
+
20
+ ## 16.1.6
21
+
22
+ ### Patch Changes
23
+
24
+ - [`19d72473dfb`](https://bitbucket.org/atlassian/atlassian-frontend/commits/19d72473dfb) - Performance optimisations (reduce tree size and improve style building)
25
+ - [`19d72473dfb`](https://bitbucket.org/atlassian/atlassian-frontend/commits/19d72473dfb) - Updates usage of deprecated token names so they're aligned with the latest naming conventions. No UI or visual changes
26
+ - Updated dependencies
27
+
3
28
  ## 16.1.5
4
29
 
5
30
  ### Patch Changes
package/dist/cjs/button.js CHANGED
@@ -17,7 +17,7 @@ var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/h
17
17
 
18
18
  var _react = _interopRequireWildcard(require("react"));
19
19
 
20
- var _components = _interopRequireDefault(require("@atlaskit/theme/components"));
20
+ var _components = require("@atlaskit/theme/components");
21
21
 
22
22
  var _buttonBase = _interopRequireDefault(require("./shared/button-base"));
23
23
 
@@ -25,7 +25,7 @@ var _css = require("./shared/css");
25
25
 
26
26
  var _getIsOnlySingleIcon = _interopRequireDefault(require("./shared/get-is-only-single-icon"));
27
27
 
28
- var _excluded = ["mode", "onMouseDown", "onMouseUp"];
28
+ var _excluded = ["onMouseDown", "onMouseUp"];
29
29
 
30
30
  function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
31
31
 
@@ -35,13 +35,16 @@ function noop() {}
35
35
 
36
36
  var isFirefox = typeof navigator !== 'undefined' && navigator.userAgent.toLowerCase().indexOf('firefox') > -1;
37
37
 
38
- var ButtonWithMode = /*#__PURE__*/_react.default.forwardRef(function ButtonWithMode(_ref, ref) {
39
- var mode = _ref.mode,
40
- _ref$onMouseDown = _ref.onMouseDown,
38
+ var Button = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.default.forwardRef(function Button(_ref, ref) {
39
+ var _ref$onMouseDown = _ref.onMouseDown,
41
40
  providedOnMouseDown = _ref$onMouseDown === void 0 ? noop : _ref$onMouseDown,
42
41
  _ref$onMouseUp = _ref.onMouseUp,
43
42
  providedOnMouseUp = _ref$onMouseUp === void 0 ? noop : _ref$onMouseUp,
44
43
  rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
44
+
45
+ var _useGlobalTheme = (0, _components.useGlobalTheme)(),
46
+ mode = _useGlobalTheme.mode;
47
+
45
48
  var appearance = rest.appearance || 'default';
46
49
  var spacing = rest.spacing || 'default';
47
50
  var shouldFitContainer = Boolean(rest.shouldFitContainer);
@@ -88,16 +91,6 @@ var ButtonWithMode = /*#__PURE__*/_react.default.forwardRef(function ButtonWithM
88
91
  onMouseDown: onMouseDown,
89
92
  onMouseUp: onMouseUp
90
93
  }));
91
- });
92
-
93
- var Button = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.default.forwardRef(function Button(props, ref) {
94
- return /*#__PURE__*/_react.default.createElement(_components.default.Consumer, null, function (_ref2) {
95
- var mode = _ref2.mode;
96
- return /*#__PURE__*/_react.default.createElement(ButtonWithMode, (0, _extends2.default)({}, props, {
97
- ref: ref,
98
- mode: mode
99
- }));
100
- });
101
94
  })); // Tools including enzyme rely on components having a display name
102
95
 
103
96
 
package/dist/cjs/entry-points/standard-button.js CHANGED
@@ -12,4 +12,6 @@ Object.defineProperty(exports, "default", {
12
12
  }
13
13
  });
14
14
 
15
+ require("@emotion/core");
16
+
15
17
  var _button = _interopRequireDefault(require("../button"));
package/dist/cjs/shared/button-base.js CHANGED
@@ -101,7 +101,7 @@ var _default = /*#__PURE__*/_react.default.forwardRef(function ButtonBase(props,
101
101
  action: 'clicked',
102
102
  componentName: 'button',
103
103
  packageName: "@atlaskit/button",
104
- packageVersion: "16.1.5",
104
+ packageVersion: "16.2.1",
105
105
  analyticsData: analyticsContext
106
106
  }); // Button currently calls preventDefault, which is not standard button behaviour
107
107
 
@@ -133,7 +133,7 @@ var _default = /*#__PURE__*/_react.default.forwardRef(function ButtonBase(props,
133
133
  if (isSelected || isDisabled || appearance === 'warning') {
134
134
  spinnerHackCss = {
135
135
  '[data-theme] & svg': {
136
- stroke: isSelected || isDisabled ? "var(--ds-text-mediumEmphasis, ".concat(_colors.N500, ")") : "var(--ds-text-onBoldWarning, ".concat(_colors.N500, ")")
136
+ stroke: isSelected || isDisabled ? "var(--ds-text-subtle, ".concat(_colors.N500, ")") : "var(--ds-text-warning-inverse, ".concat(_colors.N500, ")")
137
137
  }
138
138
  };
139
139
  }
package/dist/cjs/shared/colors.js CHANGED
@@ -21,106 +21,106 @@ var values = {
21
21
  background: {
22
22
  default: {
23
23
  default: {
24
- light: "var(--ds-background-subtleNeutral-resting, ".concat(colors.N20A, ")"),
25
- dark: "var(--ds-background-subtleNeutral-resting, ".concat(colors.DN70, ")")
24
+ light: "var(--ds-background-neutral, ".concat(colors.N20A, ")"),
25
+ dark: "var(--ds-background-neutral, ".concat(colors.DN70, ")")
26
26
  },
27
27
  hover: {
28
- light: "var(--ds-background-subtleNeutral-hover, ".concat(colors.N30A, ")"),
29
- dark: "var(--ds-background-subtleNeutral-hover, ".concat(colors.DN60, ")")
28
+ light: "var(--ds-background-neutral-hovered, ".concat(colors.N30A, ")"),
29
+ dark: "var(--ds-background-neutral-hovered, ".concat(colors.DN60, ")")
30
30
  },
31
31
  active: {
32
- light: "var(--ds-background-subtleNeutral-pressed, ".concat(fadedB75, ")"),
33
- dark: "var(--ds-background-subtleNeutral-pressed, ".concat(colors.B75, ")")
32
+ light: "var(--ds-background-neutral-pressed, ".concat(fadedB75, ")"),
33
+ dark: "var(--ds-background-neutral-pressed, ".concat(colors.B75, ")")
34
34
  },
35
35
  disabled: {
36
36
  light: "var(--ds-background-disabled, ".concat(colors.N20A, ")"),
37
37
  dark: "var(--ds-background-disabled, ".concat(colors.DN70, ")")
38
38
  },
39
39
  selected: {
40
- light: "var(--ds-background-selected-resting, ".concat(colors.N700, ")"),
41
- dark: "var(--ds-background-selected-resting, ".concat(colors.DN0, ")")
40
+ light: "var(--ds-background-selected, ".concat(colors.N700, ")"),
41
+ dark: "var(--ds-background-selected, ".concat(colors.DN0, ")")
42
42
  },
43
43
  focusSelected: {
44
- light: "var(--ds-background-selected-resting, ".concat(colors.N700, ")"),
45
- dark: "var(--ds-background-selected-resting, ".concat(colors.DN0, ")")
44
+ light: "var(--ds-background-selected, ".concat(colors.N700, ")"),
45
+ dark: "var(--ds-background-selected, ".concat(colors.DN0, ")")
46
46
  }
47
47
  },
48
48
  primary: {
49
49
  default: {
50
- light: "var(--ds-background-boldBrand-resting, ".concat(colors.B400, ")"),
51
- dark: "var(--ds-background-boldBrand-resting, ".concat(colors.B100, ")")
50
+ light: "var(--ds-background-brand-bold, ".concat(colors.B400, ")"),
51
+ dark: "var(--ds-background-brand-bold, ".concat(colors.B100, ")")
52
52
  },
53
53
  hover: {
54
- light: "var(--ds-background-boldBrand-hover, ".concat(colors.B300, ")"),
55
- dark: "var(--ds-background-boldBrand-hover, ".concat(colors.B75, ")")
54
+ light: "var(--ds-background-brand-bold-hovered, ".concat(colors.B300, ")"),
55
+ dark: "var(--ds-background-brand-bold-hovered, ".concat(colors.B75, ")")
56
56
  },
57
57
  active: {
58
- light: "var(--ds-background-boldBrand-pressed, ".concat(colors.B500, ")"),
59
- dark: "var(--ds-background-boldBrand-pressed, ".concat(colors.B200, ")")
58
+ light: "var(--ds-background-brand-bold-pressed, ".concat(colors.B500, ")"),
59
+ dark: "var(--ds-background-brand-bold-pressed, ".concat(colors.B200, ")")
60
60
  },
61
61
  disabled: {
62
62
  light: "var(--ds-background-disabled, ".concat(colors.N20A, ")"),
63
63
  dark: "var(--ds-background-disabled, ".concat(colors.DN70, ")")
64
64
  },
65
65
  selected: {
66
- light: "var(--ds-background-selected-resting, ".concat(colors.N700, ")"),
67
- dark: "var(--ds-background-selected-resting, ".concat(colors.DN0, ")")
66
+ light: "var(--ds-background-selected, ".concat(colors.N700, ")"),
67
+ dark: "var(--ds-background-selected, ".concat(colors.DN0, ")")
68
68
  },
69
69
  focusSelected: {
70
- light: "var(--ds-background-selected-resting, ".concat(colors.N700, ")"),
71
- dark: "var(--ds-background-selected-resting, ".concat(colors.DN0, ")")
70
+ light: "var(--ds-background-selected, ".concat(colors.N700, ")"),
71
+ dark: "var(--ds-background-selected, ".concat(colors.DN0, ")")
72
72
  }
73
73
  },
74
74
  warning: {
75
75
  default: {
76
- light: "var(--ds-background-boldWarning-resting, ".concat(colors.Y300, ")"),
77
- dark: "var(--ds-background-boldWarning-resting, ".concat(colors.Y300, ")")
76
+ light: "var(--ds-background-warning-bold, ".concat(colors.Y300, ")"),
77
+ dark: "var(--ds-background-warning-bold, ".concat(colors.Y300, ")")
78
78
  },
79
79
  hover: {
80
- light: "var(--ds-background-boldWarning-hover, ".concat(colors.Y200, ")"),
81
- dark: "var(--ds-background-boldWarning-hover, ".concat(colors.Y200, ")")
80
+ light: "var(--ds-background-warning-bold-hovered, ".concat(colors.Y200, ")"),
81
+ dark: "var(--ds-background-warning-bold-hovered, ".concat(colors.Y200, ")")
82
82
  },
83
83
  active: {
84
- light: "var(--ds-background-boldWarning-pressed, ".concat(colors.Y400, ")"),
85
- dark: "var(--ds-background-boldWarning-pressed, ".concat(colors.Y400, ")")
84
+ light: "var(--ds-background-warning-bold-pressed, ".concat(colors.Y400, ")"),
85
+ dark: "var(--ds-background-warning-bold-pressed, ".concat(colors.Y400, ")")
86
86
  },
87
87
  disabled: {
88
88
  light: "var(--ds-background-disabled, ".concat(colors.N20A, ")"),
89
89
  dark: "var(--ds-background-disabled, ".concat(colors.DN70, ")")
90
90
  },
91
91
  selected: {
92
- light: "var(--ds-background-selected-resting, ".concat(colors.Y400, ")"),
93
- dark: "var(--ds-background-selected-resting, ".concat(colors.Y400, ")")
92
+ light: "var(--ds-background-selected, ".concat(colors.Y400, ")"),
93
+ dark: "var(--ds-background-selected, ".concat(colors.Y400, ")")
94
94
  },
95
95
  focusSelected: {
96
- light: "var(--ds-background-selected-resting, ".concat(colors.Y400, ")"),
97
- dark: "var(--ds-background-selected-resting, ".concat(colors.Y400, ")")
96
+ light: "var(--ds-background-selected, ".concat(colors.Y400, ")"),
97
+ dark: "var(--ds-background-selected, ".concat(colors.Y400, ")")
98
98
  }
99
99
  },
100
100
  danger: {
101
101
  default: {
102
- light: "var(--ds-background-boldDanger-resting, ".concat(colors.R400, ")"),
103
- dark: "var(--ds-background-boldDanger-resting, ".concat(colors.R400, ")")
102
+ light: "var(--ds-background-danger-bold, ".concat(colors.R400, ")"),
103
+ dark: "var(--ds-background-danger-bold, ".concat(colors.R400, ")")
104
104
  },
105
105
  hover: {
106
- light: "var(--ds-background-boldDanger-hover, ".concat(colors.R300, ")"),
107
- dark: "var(--ds-background-boldDanger-hover, ".concat(colors.R300, ")")
106
+ light: "var(--ds-background-danger-bold-hovered, ".concat(colors.R300, ")"),
107
+ dark: "var(--ds-background-danger-bold-hovered, ".concat(colors.R300, ")")
108
108
  },
109
109
  active: {
110
- light: "var(--ds-background-boldDanger-pressed, ".concat(colors.R500, ")"),
111
- dark: "var(--ds-background-boldDanger-pressed, ".concat(colors.R500, ")")
110
+ light: "var(--ds-background-danger-bold-pressed, ".concat(colors.R500, ")"),
111
+ dark: "var(--ds-background-danger-bold-pressed, ".concat(colors.R500, ")")
112
112
  },
113
113
  disabled: {
114
114
  light: "var(--ds-background-disabled, ".concat(colors.N20A, ")"),
115
115
  dark: "var(--ds-background-disabled, ".concat(colors.DN70, ")")
116
116
  },
117
117
  selected: {
118
- light: "var(--ds-background-selected-resting, ".concat(colors.R500, ")"),
119
- dark: "var(--ds-background-selected-resting, ".concat(colors.R500, ")")
118
+ light: "var(--ds-background-selected, ".concat(colors.R500, ")"),
119
+ dark: "var(--ds-background-selected, ".concat(colors.R500, ")")
120
120
  },
121
121
  focusSelected: {
122
- light: "var(--ds-background-selected-resting, ".concat(colors.R500, ")"),
123
- dark: "var(--ds-background-selected-resting, ".concat(colors.R500, ")")
122
+ light: "var(--ds-background-selected, ".concat(colors.R500, ")"),
123
+ dark: "var(--ds-background-selected, ".concat(colors.R500, ")")
124
124
  }
125
125
  },
126
126
  link: {
@@ -129,12 +129,12 @@ var values = {
129
129
  dark: 'none'
130
130
  },
131
131
  selected: {
132
- light: "var(--ds-background-selected-resting, ".concat(colors.N700, ")"),
133
- dark: "var(--ds-background-selected-resting, ".concat(colors.N20, ")")
132
+ light: "var(--ds-background-selected, ".concat(colors.N700, ")"),
133
+ dark: "var(--ds-background-selected, ".concat(colors.N20, ")")
134
134
  },
135
135
  focusSelected: {
136
- light: "var(--ds-background-selected-resting, ".concat(colors.N700, ")"),
137
- dark: "var(--ds-background-selected-resting, ".concat(colors.N20, ")")
136
+ light: "var(--ds-background-selected, ".concat(colors.N700, ")"),
137
+ dark: "var(--ds-background-selected, ".concat(colors.N20, ")")
138
138
  }
139
139
  },
140
140
  subtle: {
@@ -143,24 +143,24 @@ var values = {
143
143
  dark: 'none'
144
144
  },
145
145
  hover: {
146
- light: "var(--ds-background-transparentNeutral-hover, ".concat(colors.N30A, ")"),
147
- dark: "var(--ds-background-transparentNeutral-hover, ".concat(colors.DN60, ")")
146
+ light: "var(--ds-background-neutral-subtle-hovered, ".concat(colors.N30A, ")"),
147
+ dark: "var(--ds-background-neutral-subtle-hovered, ".concat(colors.DN60, ")")
148
148
  },
149
149
  active: {
150
- light: "var(--ds-background-transparentNeutral-pressed, ".concat(fadedB75, ")"),
151
- dark: "var(--ds-background-transparentNeutral-pressed, ".concat(colors.B75, ")")
150
+ light: "var(--ds-background-neutral-subtle-pressed, ".concat(fadedB75, ")"),
151
+ dark: "var(--ds-background-neutral-subtle-pressed, ".concat(colors.B75, ")")
152
152
  },
153
153
  disabled: {
154
154
  light: 'none',
155
155
  dark: 'none'
156
156
  },
157
157
  selected: {
158
- light: "var(--ds-background-selected-resting, ".concat(colors.N700, ")"),
159
- dark: "var(--ds-background-selected-resting, ".concat(colors.DN0, ")")
158
+ light: "var(--ds-background-selected, ".concat(colors.N700, ")"),
159
+ dark: "var(--ds-background-selected, ".concat(colors.DN0, ")")
160
160
  },
161
161
  focusSelected: {
162
- light: "var(--ds-background-selected-resting, ".concat(colors.N700, ")"),
163
- dark: "var(--ds-background-selected-resting, ".concat(colors.DN0, ")")
162
+ light: "var(--ds-background-selected, ".concat(colors.N700, ")"),
163
+ dark: "var(--ds-background-selected, ".concat(colors.DN0, ")")
164
164
  }
165
165
  },
166
166
  'subtle-link': {
@@ -169,96 +169,96 @@ var values = {
169
169
  dark: 'none'
170
170
  },
171
171
  selected: {
172
- light: "var(--ds-background-selected-resting, ".concat(colors.N700, ")"),
173
- dark: "var(--ds-background-selected-resting, ".concat(colors.N20, ")")
172
+ light: "var(--ds-background-selected, ".concat(colors.N700, ")"),
173
+ dark: "var(--ds-background-selected, ".concat(colors.N20, ")")
174
174
  },
175
175
  focusSelected: {
176
- light: "var(--ds-background-selected-resting, ".concat(colors.N700, ")"),
177
- dark: "var(--ds-background-selected-resting, ".concat(colors.N20, ")")
176
+ light: "var(--ds-background-selected, ".concat(colors.N700, ")"),
177
+ dark: "var(--ds-background-selected, ".concat(colors.N20, ")")
178
178
  }
179
179
  }
180
180
  },
181
181
  boxShadowColor: {
182
182
  default: {
183
183
  focus: {
184
- light: "var(--ds-border-focus, ".concat(colors.B100, ")"),
185
- dark: "var(--ds-border-focus, ".concat(colors.B75, ")")
184
+ light: "var(--ds-border-focused, ".concat(colors.B100, ")"),
185
+ dark: "var(--ds-border-focused, ".concat(colors.B75, ")")
186
186
  },
187
187
  focusSelected: {
188
- light: "var(--ds-border-focus, ".concat(colors.B100, ")"),
189
- dark: "var(--ds-border-focus, ".concat(colors.B75, ")")
188
+ light: "var(--ds-border-focused, ".concat(colors.B100, ")"),
189
+ dark: "var(--ds-border-focused, ".concat(colors.B75, ")")
190
190
  }
191
191
  },
192
192
  primary: {
193
193
  focus: {
194
- light: "var(--ds-border-focus, ".concat(colors.B100, ")"),
195
- dark: "var(--ds-border-focus, ".concat(colors.B75, ")")
194
+ light: "var(--ds-border-focused, ".concat(colors.B100, ")"),
195
+ dark: "var(--ds-border-focused, ".concat(colors.B75, ")")
196
196
  },
197
197
  focusSelected: {
198
- light: "var(--ds-border-focus, ".concat(colors.B100, ")"),
199
- dark: "var(--ds-border-focus, ".concat(colors.B75, ")")
198
+ light: "var(--ds-border-focused, ".concat(colors.B100, ")"),
199
+ dark: "var(--ds-border-focused, ".concat(colors.B75, ")")
200
200
  }
201
201
  },
202
202
  warning: {
203
203
  focus: {
204
- light: "var(--ds-border-focus, ".concat(colors.Y500, ")"),
205
- dark: "var(--ds-border-focus, ".concat(colors.Y500, ")")
204
+ light: "var(--ds-border-focused, ".concat(colors.Y500, ")"),
205
+ dark: "var(--ds-border-focused, ".concat(colors.Y500, ")")
206
206
  },
207
207
  focusSelected: {
208
- light: "var(--ds-border-focus, ".concat(colors.Y500, ")"),
209
- dark: "var(--ds-border-focus, ".concat(colors.Y500, ")")
208
+ light: "var(--ds-border-focused, ".concat(colors.Y500, ")"),
209
+ dark: "var(--ds-border-focused, ".concat(colors.Y500, ")")
210
210
  }
211
211
  },
212
212
  danger: {
213
213
  focus: {
214
- light: "var(--ds-border-focus, ".concat(colors.R100, ")"),
215
- dark: "var(--ds-border-focus, ".concat(colors.R100, ")")
214
+ light: "var(--ds-border-focused, ".concat(colors.R100, ")"),
215
+ dark: "var(--ds-border-focused, ".concat(colors.R100, ")")
216
216
  },
217
217
  focusSelected: {
218
- light: "var(--ds-border-focus, ".concat(colors.R100, ")"),
219
- dark: "var(--ds-border-focus, ".concat(colors.R100, ")")
218
+ light: "var(--ds-border-focused, ".concat(colors.R100, ")"),
219
+ dark: "var(--ds-border-focused, ".concat(colors.R100, ")")
220
220
  }
221
221
  },
222
222
  link: {
223
223
  focus: {
224
- light: "var(--ds-border-focus, ".concat(colors.B100, ")"),
225
- dark: "var(--ds-border-focus, ".concat(colors.B75, ")")
224
+ light: "var(--ds-border-focused, ".concat(colors.B100, ")"),
225
+ dark: "var(--ds-border-focused, ".concat(colors.B75, ")")
226
226
  },
227
227
  focusSelected: {
228
- light: "var(--ds-border-focus, ".concat(colors.B100, ")"),
229
- dark: "var(--ds-border-focus, ".concat(colors.B75, ")")
228
+ light: "var(--ds-border-focused, ".concat(colors.B100, ")"),
229
+ dark: "var(--ds-border-focused, ".concat(colors.B75, ")")
230
230
  }
231
231
  },
232
232
  subtle: {
233
233
  focus: {
234
- light: "var(--ds-border-focus, ".concat(colors.B100, ")"),
235
- dark: "var(--ds-border-focus, ".concat(colors.B75, ")")
234
+ light: "var(--ds-border-focused, ".concat(colors.B100, ")"),
235
+ dark: "var(--ds-border-focused, ".concat(colors.B75, ")")
236
236
  },
237
237
  focusSelected: {
238
- light: "var(--ds-border-focus, ".concat(colors.B100, ")"),
239
- dark: "var(--ds-border-focus, ".concat(colors.B75, ")")
238
+ light: "var(--ds-border-focused, ".concat(colors.B100, ")"),
239
+ dark: "var(--ds-border-focused, ".concat(colors.B75, ")")
240
240
  }
241
241
  },
242
242
  'subtle-link': {
243
243
  focus: {
244
- light: "var(--ds-border-focus, ".concat(colors.B100, ")"),
245
- dark: "var(--ds-border-focus, ".concat(colors.B75, ")")
244
+ light: "var(--ds-border-focused, ".concat(colors.B100, ")"),
245
+ dark: "var(--ds-border-focused, ".concat(colors.B75, ")")
246
246
  },
247
247
  focusSelected: {
248
- light: "var(--ds-border-focus, ".concat(colors.B100, ")"),
249
- dark: "var(--ds-border-focus, ".concat(colors.B75, ")")
248
+ light: "var(--ds-border-focused, ".concat(colors.B100, ")"),
249
+ dark: "var(--ds-border-focused, ".concat(colors.B75, ")")
250
250
  }
251
251
  }
252
252
  },
253
253
  color: {
254
254
  default: {
255
255
  default: {
256
- light: "var(--ds-text-highEmphasis, ".concat(colors.N500, ")"),
257
- dark: "var(--ds-text-highEmphasis, ".concat(colors.DN400, ")")
256
+ light: "var(--ds-text, ".concat(colors.N500, ")"),
257
+ dark: "var(--ds-text, ".concat(colors.DN400, ")")
258
258
  },
259
259
  active: {
260
- light: "var(--ds-text-highEmphasis, ".concat(colors.B400, ")"),
261
- dark: "var(--ds-text-highEmphasis, ".concat(colors.B400, ")")
260
+ light: "var(--ds-text, ".concat(colors.B400, ")"),
261
+ dark: "var(--ds-text, ".concat(colors.B400, ")")
262
262
  },
263
263
  disabled: {
264
264
  light: "var(--ds-text-disabled, ".concat(colors.N70, ")"),
@@ -275,8 +275,8 @@ var values = {
275
275
  },
276
276
  primary: {
277
277
  default: {
278
- light: "var(--ds-text-onBold, ".concat(colors.N0, ")"),
279
- dark: "var(--ds-text-onBold, ".concat(colors.DN30, ")")
278
+ light: "var(--ds-text-inverse, ".concat(colors.N0, ")"),
279
+ dark: "var(--ds-text-inverse, ".concat(colors.DN30, ")")
280
280
  },
281
281
  disabled: {
282
282
  light: "var(--ds-text-disabled, ".concat(colors.N70, ")"),
@@ -293,8 +293,8 @@ var values = {
293
293
  },
294
294
  warning: {
295
295
  default: {
296
- light: "var(--ds-text-onBoldWarning, ".concat(colors.N800, ")"),
297
- dark: "var(--ds-text-onBoldWarning, ".concat(colors.N800, ")")
296
+ light: "var(--ds-text-warning-inverse, ".concat(colors.N800, ")"),
297
+ dark: "var(--ds-text-warning-inverse, ".concat(colors.N800, ")")
298
298
  },
299
299
  disabled: {
300
300
  light: "var(--ds-text-disabled, ".concat(colors.N70, ")"),
@@ -311,8 +311,8 @@ var values = {
311
311
  },
312
312
  danger: {
313
313
  default: {
314
- light: "var(--ds-text-onBold, ".concat(colors.N0, ")"),
315
- dark: "var(--ds-text-onBold, ".concat(colors.N0, ")")
314
+ light: "var(--ds-text-inverse, ".concat(colors.N0, ")"),
315
+ dark: "var(--ds-text-inverse, ".concat(colors.N0, ")")
316
316
  },
317
317
  disabled: {
318
318
  light: "var(--ds-text-disabled, ".concat(colors.N70, ")"),
@@ -329,16 +329,16 @@ var values = {
329
329
  },
330
330
  link: {
331
331
  default: {
332
- light: "var(--ds-text-link-resting, ".concat(colors.B400, ")"),
333
- dark: "var(--ds-text-link-resting, ".concat(colors.B100, ")")
332
+ light: "var(--ds-link, ".concat(colors.B400, ")"),
333
+ dark: "var(--ds-link, ".concat(colors.B100, ")")
334
334
  },
335
335
  hover: {
336
- light: "var(--ds-text-link-resting, ".concat(colors.B300, ")"),
337
- dark: "var(--ds-text-link-resting, ".concat(colors.B75, ")")
336
+ light: "var(--ds-link, ".concat(colors.B300, ")"),
337
+ dark: "var(--ds-link, ".concat(colors.B75, ")")
338
338
  },
339
339
  active: {
340
- light: "var(--ds-text-link-pressed, ".concat(colors.B500, ")"),
341
- dark: "var(--ds-text-link-pressed, ".concat(colors.B200, ")")
340
+ light: "var(--ds-link-pressed, ".concat(colors.B500, ")"),
341
+ dark: "var(--ds-link-pressed, ".concat(colors.B200, ")")
342
342
  },
343
343
  disabled: {
344
344
  light: "var(--ds-text-disabled, ".concat(colors.N70, ")"),
@@ -355,12 +355,12 @@ var values = {
355
355
  },
356
356
  subtle: {
357
357
  default: {
358
- light: "var(--ds-text-highEmphasis, ".concat(colors.N500, ")"),
359
- dark: "var(--ds-text-highEmphasis, ".concat(colors.DN400, ")")
358
+ light: "var(--ds-text, ".concat(colors.N500, ")"),
359
+ dark: "var(--ds-text, ".concat(colors.DN400, ")")
360
360
  },
361
361
  active: {
362
- light: "var(--ds-text-highEmphasis, ".concat(colors.B400, ")"),
363
- dark: "var(--ds-text-highEmphasis, ".concat(colors.B400, ")")
362
+ light: "var(--ds-text, ".concat(colors.B400, ")"),
363
+ dark: "var(--ds-text, ".concat(colors.B400, ")")
364
364
  },
365
365
  disabled: {
366
366
  light: "var(--ds-text-disabled, ".concat(colors.N70, ")"),
@@ -377,16 +377,16 @@ var values = {
377
377
  },
378
378
  'subtle-link': {
379
379
  default: {
380
- light: "var(--ds-text-mediumEmphasis, ".concat(colors.N200, ")"),
381
- dark: "var(--ds-text-mediumEmphasis, ".concat(colors.DN400, ")")
380
+ light: "var(--ds-text-subtle, ".concat(colors.N200, ")"),
381
+ dark: "var(--ds-text-subtle, ".concat(colors.DN400, ")")
382
382
  },
383
383
  hover: {
384
- light: "var(--ds-text-mediumEmphasis, ".concat(colors.N90, ")"),
385
- dark: "var(--ds-text-mediumEmphasis, ".concat(colors.B50, ")")
384
+ light: "var(--ds-text-subtle, ".concat(colors.N90, ")"),
385
+ dark: "var(--ds-text-subtle, ".concat(colors.B50, ")")
386
386
  },
387
387
  active: {
388
- light: "var(--ds-text-highEmphasis, ".concat(colors.N400, ")"),
389
- dark: "var(--ds-text-highEmphasis, ".concat(colors.DN300, ")")
388
+ light: "var(--ds-text, ".concat(colors.N400, ")"),
389
+ dark: "var(--ds-text, ".concat(colors.DN300, ")")
390
390
  },
391
391
  disabled: {
392
392
  light: "var(--ds-text-disabled, ".concat(colors.N70, ")"),
package/dist/cjs/version.json CHANGED
@@ -1,5 +1,5 @@
1
1
  {
2
2
  "name": "@atlaskit/button",
3
- "version": "16.1.5",
3
+ "version": "16.2.1",
4
4
  "sideEffects": false
5
5
  }
package/dist/es2019/button.js CHANGED
@@ -1,6 +1,6 @@
1
1
  import _extends from "@babel/runtime/helpers/extends";
2
2
  import React, { useCallback, useMemo, useState } from 'react';
3
- import GlobalTheme from '@atlaskit/theme/components';
3
+ import { useGlobalTheme } from '@atlaskit/theme/components';
4
4
  import ButtonBase from './shared/button-base';
5
5
  import { getCss } from './shared/css';
6
6
  import getIsOnlySingleIcon from './shared/get-is-only-single-icon';
@@ -8,12 +8,14 @@ import getIsOnlySingleIcon from './shared/get-is-only-single-icon';
8
8
  function noop() {}
9
9
 
10
10
  const isFirefox = typeof navigator !== 'undefined' && navigator.userAgent.toLowerCase().indexOf('firefox') > -1;
11
- const ButtonWithMode = /*#__PURE__*/React.forwardRef(function ButtonWithMode({
12
- mode,
11
+ const Button = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function Button({
13
12
  onMouseDown: providedOnMouseDown = noop,
14
13
  onMouseUp: providedOnMouseUp = noop,
15
14
  ...rest
16
15
  }, ref) {
16
+ const {
17
+ mode
18
+ } = useGlobalTheme();
17
19
  const appearance = rest.appearance || 'default';
18
20
  const spacing = rest.spacing || 'default';
19
21
  const shouldFitContainer = Boolean(rest.shouldFitContainer);
@@ -53,16 +55,6 @@ const ButtonWithMode = /*#__PURE__*/React.forwardRef(function ButtonWithMode({
53
55
  onMouseDown: onMouseDown,
54
56
  onMouseUp: onMouseUp
55
57
  }));
56
- });
57
- const Button = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function Button(props, ref) {
58
- return /*#__PURE__*/React.createElement(GlobalTheme.Consumer, null, ({
59
- mode
60
- }) => {
61
- return /*#__PURE__*/React.createElement(ButtonWithMode, _extends({}, props, {
62
- ref: ref,
63
- mode: mode
64
- }));
65
- });
66
58
  })); // Tools including enzyme rely on components having a display name
67
59
 
68
60
  Button.displayName = 'Button';
package/dist/es2019/entry-points/standard-button.js CHANGED
@@ -1 +1,6 @@
1
+ /**
2
+ * Must import '@emotion/core' in order to resolve type error
3
+ * https://product-fabric.atlassian.net/browse/DSP-3222
4
+ */
5
+ import '@emotion/core';
1
6
  export { default } from '../button';
package/dist/es2019/shared/button-base.js CHANGED
@@ -70,7 +70,7 @@ export default /*#__PURE__*/React.forwardRef(function ButtonBase(props, ref) {
70
70
  action: 'clicked',
71
71
  componentName: 'button',
72
72
  packageName: "@atlaskit/button",
73
- packageVersion: "16.1.5",
73
+ packageVersion: "16.2.1",
74
74
  analyticsData: analyticsContext
75
75
  }); // Button currently calls preventDefault, which is not standard button behaviour
76
76
 
@@ -102,7 +102,7 @@ export default /*#__PURE__*/React.forwardRef(function ButtonBase(props, ref) {
102
102
  if (isSelected || isDisabled || appearance === 'warning') {
103
103
  spinnerHackCss = {
104
104
  '[data-theme] & svg': {
105
- stroke: isSelected || isDisabled ? `var(--ds-text-mediumEmphasis, ${N500})` : `var(--ds-text-onBoldWarning, ${N500})`
105
+ stroke: isSelected || isDisabled ? `var(--ds-text-subtle, ${N500})` : `var(--ds-text-warning-inverse, ${N500})`
106
106
  }
107
107
  };
108
108
  }