@atlaskit/onboarding 10.2.4 → 10.3.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 (21) hide show
  1. package/CHANGELOG.md +32 -0
  2. package/dist/cjs/components/spotlight-card.js +3 -3
  3. package/dist/cjs/components/spotlight-dialog.js +1 -1
  4. package/dist/cjs/components/theme.js +54 -180
  5. package/dist/cjs/styled/blanket.js +2 -2
  6. package/dist/cjs/styled/target.js +1 -1
  7. package/dist/cjs/version.json +1 -1
  8. package/dist/es2019/components/spotlight-card.js +3 -4
  9. package/dist/es2019/components/spotlight-dialog.js +1 -1
  10. package/dist/es2019/components/theme.js +54 -180
  11. package/dist/es2019/styled/blanket.js +2 -2
  12. package/dist/es2019/styled/target.js +1 -1
  13. package/dist/es2019/version.json +1 -1
  14. package/dist/esm/components/spotlight-card.js +3 -3
  15. package/dist/esm/components/spotlight-dialog.js +1 -1
  16. package/dist/esm/components/theme.js +54 -180
  17. package/dist/esm/styled/blanket.js +2 -2
  18. package/dist/esm/styled/target.js +1 -1
  19. package/dist/esm/version.json +1 -1
  20. package/dist/types/components/spotlight-manager.d.ts +2 -2
  21. package/package.json +16 -9
package/CHANGELOG.md CHANGED
@@ -1,5 +1,37 @@
1
1
  # @atlaskit/onboarding
2
2
 
3
+ ## 10.3.1
4
+
5
+ ### Patch Changes
6
+
7
+ - [`3fced6aa641`](https://bitbucket.org/atlassian/atlassian-frontend/commits/3fced6aa641) - Bumped `react-focus-lock` to version `^2.2.1`.
8
+ - [`f460cc7c411`](https://bitbucket.org/atlassian/atlassian-frontend/commits/f460cc7c411) - Builds for this package now pass through a tokens babel plugin, removing runtime invocations of the tokens() function and improving bundle size.
9
+ - Updated dependencies
10
+
11
+ ## 10.3.0
12
+
13
+ ### Minor Changes
14
+
15
+ - [`50081f13de7`](https://bitbucket.org/atlassian/atlassian-frontend/commits/50081f13de7) - Instrumented `@atlaskit/onboarding` with the new theming package, `@atlaskit/tokens`.
16
+
17
+ New tokens will be visible only in applications configured to use the new Tokens API (currently in alpha). These changes are intended to be interoperable with the legacy theme implementation. Legacy dark mode users should expect no visual or breaking changes.
18
+
19
+ ### Patch Changes
20
+
21
+ - Updated dependencies
22
+
23
+ ## 10.2.6
24
+
25
+ ### Patch Changes
26
+
27
+ - [`b85e7ce12cd`](https://bitbucket.org/atlassian/atlassian-frontend/commits/b85e7ce12cd) - Internal upgrade of memoize-one to 6.0.0
28
+
29
+ ## 10.2.5
30
+
31
+ ### Patch Changes
32
+
33
+ - [`34282240102`](https://bitbucket.org/atlassian/atlassian-frontend/commits/34282240102) - Adds explicit type to button usages components.
34
+
3
35
  ## 10.2.4
4
36
 
5
37
  ### Patch Changes
package/dist/cjs/components/spotlight-card.js CHANGED
@@ -87,10 +87,10 @@ var SpotlightCard = /*#__PURE__*/function (_React$Component) {
87
87
  return _theme(function () {
88
88
  return _objectSpread(_objectSpread({}, others), {}, {
89
89
  container: _objectSpread({
90
- background: _colors.P300,
91
- color: _colors.N0,
90
+ background: "var(--ds-background-boldDiscovery-resting, ".concat(_colors.P300, ")"),
91
+ color: "var(--ds-text-onBold, ".concat(_colors.N0, ")"),
92
92
  width: "".concat(Math.min(Math.max(width, 160), 600), "px"),
93
- boxShadow: isFlat ? undefined : "0 4px 8px -2px ".concat(_colors.N50A, ", 0 0 1px ").concat(_colors.N60A)
93
+ boxShadow: isFlat ? undefined : "var(--ds-card, ".concat("0 4px 8px -2px ".concat(_colors.N50A, ", 0 0 1px ").concat(_colors.N60A), ")")
94
94
  }, container)
95
95
  });
96
96
  }, {});
package/dist/cjs/components/spotlight-dialog.js CHANGED
@@ -52,7 +52,7 @@ function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflec
52
52
  function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
53
53
 
54
54
  var packageName = "@atlaskit/onboarding";
55
- var packageVersion = "10.2.4";
55
+ var packageVersion = "10.3.1";
56
56
 
57
57
  var SpotlightDialog = /*#__PURE__*/function (_Component) {
58
58
  (0, _inherits2.default)(SpotlightDialog, _Component);
package/dist/cjs/components/theme.js CHANGED
@@ -28,234 +28,108 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
28
28
  var spotlightTheme = {
29
29
  default: {
30
30
  background: {
31
- default: {
32
- light: colors.P400,
33
- dark: colors.P400
34
- },
35
- hover: {
36
- light: colors.P200,
37
- dark: colors.P200
38
- },
39
- active: {
40
- light: colors.P500,
41
- dark: colors.P500
42
- },
43
- disabled: {
44
- light: colors.P400,
45
- dark: colors.P400
46
- },
47
- selected: {
48
- light: colors.R500,
49
- dark: colors.R500
50
- },
51
- focus: {
52
- light: colors.P400,
53
- dark: colors.P400
54
- }
31
+ default: "var(--ds-background-subtleNeutral-resting, ".concat(colors.P400, ")"),
32
+ hover: "var(--ds-background-subtleNeutral-hover, ".concat(colors.P200, ")"),
33
+ active: "var(--ds-background-subtleNeutral-pressed, ".concat(colors.P500, ")"),
34
+ disabled: "var(--ds-background-disabled, ".concat(colors.P400, ")"),
35
+ selected: "var(--ds-background-subtleNeutral-pressed, ".concat(colors.R500, ")"),
36
+ focus: "var(--ds-background-subtleNeutral-resting, ".concat(colors.P400, ")")
55
37
  },
56
38
  boxShadow: {
57
- focus: {
58
- light: "".concat(colors.P100, " 0 0 0 2px"),
59
- dark: "".concat(colors.P100, " 0 0 0 2px")
60
- }
39
+ focus: "0 0 0 2px ".concat("var(--ds-iconBorder-discovery, ".concat(colors.P100, ")"))
61
40
  },
62
41
  color: {
63
- default: {
64
- light: colors.N0,
65
- dark: colors.N0
66
- },
67
- hover: {
68
- light: colors.N0,
69
- dark: colors.N0
70
- },
71
- active: {
72
- light: colors.N0,
73
- dark: colors.N0
74
- },
42
+ default: "var(--ds-text-onBold, ".concat(colors.N0, ")"),
43
+ hover: "var(--ds-text-onBold, ".concat(colors.N0, ")"),
44
+ active: "var(--ds-text-onBold, ".concat(colors.N0, ")"),
75
45
  disabled: {
76
- light: colors.N0,
77
- dark: colors.DN30
78
- },
79
- selected: {
80
- light: colors.N0,
81
- dark: colors.N0
46
+ light: "var(--ds-text-disabled, ".concat(colors.N0, ")"),
47
+ dark: "var(--ds-text-disabled, ".concat(colors.DN30, ")")
82
48
  },
83
- focus: {
84
- light: colors.N0,
85
- dark: colors.N0
86
- }
49
+ selected: "var(--ds-text-onBold, ".concat(colors.N0, ")"),
50
+ focus: "var(--ds-text-onBold, ".concat(colors.N0, ")")
87
51
  },
88
52
  outline: {
89
- focus: {
90
- light: 'none',
91
- dark: 'none'
92
- }
53
+ focus: 'none'
93
54
  }
94
55
  },
95
56
  subtle: {
96
57
  background: {
97
- default: {
98
- light: 'none',
99
- dark: 'none'
100
- },
101
- hover: {
102
- light: colors.P200,
103
- dark: colors.P200
104
- },
105
- active: {
106
- light: colors.P500,
107
- dark: colors.P500
108
- },
109
- disabled: {
110
- light: 'none',
111
- dark: 'none'
112
- },
58
+ default: 'none',
59
+ hover: "var(--ds-background-subtleNeutral-hover, ".concat(colors.P200, ")"),
60
+ active: "var(--ds-background-subtleNeutral-pressed, ".concat(colors.P500, ")"),
61
+ disabled: 'none',
113
62
  selected: {
114
- light: colors.N700,
115
- dark: colors.DN0
63
+ light: "var(--ds-background-selected-hover, ".concat(colors.N700, ")"),
64
+ dark: "var(--ds-background-selected-hover, ".concat(colors.DN0, ")")
116
65
  },
117
66
  focusSelected: {
118
- light: colors.N700,
119
- dark: colors.DN0
67
+ light: "var(--ds-background-selected-hover, ".concat(colors.N700, ")"),
68
+ dark: "var(--ds-background-selected-hover, ".concat(colors.DN0, ")")
120
69
  }
121
70
  },
122
71
  boxShadow: {
123
- focus: {
124
- light: "".concat(colors.P100, " 0 0 0 2px"),
125
- dark: "".concat(colors.P100, " 0 0 0 2px")
126
- }
72
+ focus: "0 0 0 2px ".concat("var(--ds-iconBorder-discovery, ".concat(colors.P100, ")"))
127
73
  },
128
74
  color: {
129
- default: {
130
- light: colors.N0,
131
- dark: colors.N0
132
- },
133
- hover: {
134
- light: colors.N0,
135
- dark: colors.N0
136
- },
137
- active: {
138
- light: colors.N0,
139
- dark: colors.N0
140
- },
141
- disabled: {
142
- light: colors.N0,
143
- dark: colors.N0
144
- },
145
- selected: {
146
- light: colors.N0,
147
- dark: colors.N0
148
- },
149
- focus: {
150
- light: colors.N0,
151
- dark: colors.N0
152
- }
75
+ default: "var(--ds-text-onBold, ".concat(colors.N0, ")"),
76
+ hover: "var(--ds-text-onBold, ".concat(colors.N0, ")"),
77
+ active: "var(--ds-text-onBold, ".concat(colors.N0, ")"),
78
+ disabled: "var(--ds-text-disabled, ".concat(colors.N0, ")"),
79
+ selected: "var(--ds-text-onBold, ".concat(colors.N0, ")"),
80
+ focus: "var(--ds-text-onBold, ".concat(colors.N0, ")")
153
81
  },
154
82
  outline: {
155
- focus: {
156
- light: 'none',
157
- dark: 'none'
158
- }
83
+ focus: 'none'
159
84
  }
160
85
  },
161
86
  'subtle-link': {
162
87
  textDecoration: {
163
- hover: {
164
- light: "underline ".concat(colors.P75),
165
- dark: "underline ".concat(colors.P75)
166
- }
88
+ hover: "underline ".concat("var(--ds-text-discovery, ".concat(colors.P75, ")"))
167
89
  },
168
90
  textDecorationLine: {
169
- active: {
170
- light: 'none',
171
- dark: 'none'
172
- }
91
+ active: 'none'
173
92
  },
174
93
  boxShadow: {
175
- focus: {
176
- light: "".concat(colors.P100, " 0 0 0 2px"),
177
- dark: "".concat(colors.P100, " 0 0 0 2px")
178
- }
94
+ focus: "0 0 0 2px ".concat("var(--ds-iconBorder-discovery, ".concat(colors.P100, ")"))
179
95
  },
180
96
  color: {
181
- default: {
182
- light: colors.N0,
183
- dark: colors.N0
184
- },
185
- hover: {
186
- light: colors.P75,
187
- dark: colors.P75
188
- },
189
- active: {
190
- light: colors.P100,
191
- dark: colors.P100
192
- },
193
- disabled: {
194
- light: colors.P500,
195
- dark: colors.P500
196
- },
197
- selected: {
198
- light: colors.N0,
199
- dark: colors.N0
200
- },
201
- focus: {
202
- light: colors.N0,
203
- dark: colors.N0
204
- }
97
+ default: "var(--ds-text-onBold, ".concat(colors.N0, ")"),
98
+ hover: "var(--ds-text-onBold, ".concat(colors.P75, ")"),
99
+ active: "var(--ds-text-onBold, ".concat(colors.P100, ")"),
100
+ disabled: "var(--ds-text-discovery, ".concat(colors.P500, ")"),
101
+ selected: "var(--ds-text-selected, ".concat(colors.N0, ")"),
102
+ focus: "var(--ds-text-onBold, ".concat(colors.N0, ")")
205
103
  }
206
104
  }
207
105
  };
208
106
  var modalTheme = {
209
107
  primary: {
210
108
  background: {
211
- default: {
212
- light: colors.P400,
213
- dark: colors.P400
214
- },
215
- hover: {
216
- light: colors.P200,
217
- dark: colors.P200
218
- },
219
- active: {
220
- light: colors.P500,
221
- dark: colors.P500
222
- },
109
+ default: "var(--ds-background-boldDiscovery-resting, ".concat(colors.P400, ")"),
110
+ hover: "var(--ds-background-boldDiscovery-hover, ".concat(colors.P200, ")"),
111
+ active: "var(--ds-background-boldDiscovery-pressed, ".concat(colors.P500, ")"),
223
112
  disabled: {
224
- light: colors.N30,
225
- dark: colors.DN70
226
- },
227
- selected: {
228
- light: colors.R500,
229
- dark: colors.R500
113
+ light: "var(--ds-background-disabled, ".concat(colors.N30, ")"),
114
+ dark: "var(--ds-background-disabled, ".concat(colors.DN70, ")")
230
115
  },
231
- focus: {
232
- light: colors.P400,
233
- dark: colors.P400
234
- }
116
+ selected: "var(--ds-background-selected-hover, ".concat(colors.R500, ")"),
117
+ focus: "var(--ds-background-boldDiscovery-hover, ".concat(colors.P400, ")")
235
118
  },
236
119
  boxShadow: {
237
120
  focus: {
238
- light: "".concat(colors.P100, " 0 0 0 2px"),
239
- dark: "".concat(colors.P100, " 0 0 0 2px")
121
+ light: "0 0 0 2px ".concat("var(--ds-iconBorder-discovery, ".concat(colors.P100, ")")),
122
+ dark: "0 0 0 2px ".concat("var(--ds-iconBorder-discovery, ".concat(colors.P100, ")"))
240
123
  }
241
124
  },
242
125
  color: {
243
- default: {
244
- light: colors.N0,
245
- dark: colors.N0
246
- },
126
+ default: "var(--ds-text-onBold, ".concat(colors.N0, ")"),
247
127
  disabled: {
248
- light: colors.N0,
249
- dark: colors.DN30
128
+ light: "var(--ds-text-disabled, ".concat(colors.N0, ")"),
129
+ dark: "var(--ds-text-disabled, ".concat(colors.DN30, ")")
250
130
  },
251
- selected: {
252
- light: colors.N0,
253
- dark: colors.N0
254
- },
255
- focus: {
256
- light: colors.N0,
257
- dark: colors.N0
258
- }
131
+ selected: "var(--ds-text-selected, ".concat(colors.N0, ")"),
132
+ focus: "var(--ds-text-onBold, ".concat(colors.N0, ")")
259
133
  }
260
134
  }
261
135
  };
package/dist/cjs/styled/blanket.js CHANGED
@@ -22,8 +22,8 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
22
22
  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) { (0, _defineProperty2.default)(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; }
23
23
 
24
24
  var backgroundColor = (0, _components.themed)({
25
- light: _colors.N100A,
26
- dark: _colors.DN90A
25
+ light: "var(--ds-background-blanket, ".concat(_colors.N100A, ")"),
26
+ dark: "var(--ds-background-blanket, ".concat(_colors.DN90A, ")")
27
27
  }); // IE11 and Edge: z-index needed because fixed position calculates z-index relative
28
28
  // to body instead of nearest stacking context (Portal in our case).
29
29
 
package/dist/cjs/styled/target.js CHANGED
@@ -25,7 +25,7 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
25
25
 
26
26
  // NOTE:
27
27
  // Pulse color "rgb(101, 84, 192)" derived from "colors.P300"
28
- var baseShadow = "0 0 0 2px ".concat(_colors.P300);
28
+ var baseShadow = "var(--ds-overlay, ".concat("0 0 0 2px ".concat(_colors.P300), ")");
29
29
  var easing = 'cubic-bezier(0.55, 0.055, 0.675, 0.19)';
30
30
  var pulseKeyframes = (0, _core.keyframes)({
31
31
  '0%, 33%': {
package/dist/cjs/version.json CHANGED
@@ -1,5 +1,5 @@
1
1
  {
2
2
  "name": "@atlaskit/onboarding",
3
- "version": "10.2.4",
3
+ "version": "10.3.1",
4
4
  "sideEffects": false
5
5
  }
package/dist/es2019/components/spotlight-card.js CHANGED
@@ -41,11 +41,10 @@ class SpotlightCard extends React.Component {
41
41
  } = parent({});
42
42
  return theme(() => ({ ...others,
43
43
  container: {
44
- background: P300,
45
- color: N0,
44
+ background: `var(--ds-background-boldDiscovery-resting, ${P300})`,
45
+ color: `var(--ds-text-onBold, ${N0})`,
46
46
  width: `${Math.min(Math.max(width, 160), 600)}px`,
47
- boxShadow: isFlat ? undefined : `0 4px 8px -2px ${N50A}, 0 0 1px ${N60A}`,
48
- // AK-5598
47
+ boxShadow: isFlat ? undefined : `var(--ds-card, ${`0 4px 8px -2px ${N50A}, 0 0 1px ${N60A}`})`,
49
48
  ...container
50
49
  }
51
50
  }), {});
package/dist/es2019/components/spotlight-dialog.js CHANGED
@@ -7,7 +7,7 @@ import { DialogImage } from '../styled/dialog';
7
7
  import SpotlightCard from './spotlight-card';
8
8
  import ValueChanged from './value-changed';
9
9
  const packageName = "@atlaskit/onboarding";
10
- const packageVersion = "10.2.4";
10
+ const packageVersion = "10.3.1";
11
11
 
12
12
  class SpotlightDialog extends Component {
13
13
  constructor(...args) {
package/dist/es2019/components/theme.js CHANGED
@@ -2,234 +2,108 @@ import * as colors from '@atlaskit/theme/colors';
2
2
  const spotlightTheme = {
3
3
  default: {
4
4
  background: {
5
- default: {
6
- light: colors.P400,
7
- dark: colors.P400
8
- },
9
- hover: {
10
- light: colors.P200,
11
- dark: colors.P200
12
- },
13
- active: {
14
- light: colors.P500,
15
- dark: colors.P500
16
- },
17
- disabled: {
18
- light: colors.P400,
19
- dark: colors.P400
20
- },
21
- selected: {
22
- light: colors.R500,
23
- dark: colors.R500
24
- },
25
- focus: {
26
- light: colors.P400,
27
- dark: colors.P400
28
- }
5
+ default: `var(--ds-background-subtleNeutral-resting, ${colors.P400})`,
6
+ hover: `var(--ds-background-subtleNeutral-hover, ${colors.P200})`,
7
+ active: `var(--ds-background-subtleNeutral-pressed, ${colors.P500})`,
8
+ disabled: `var(--ds-background-disabled, ${colors.P400})`,
9
+ selected: `var(--ds-background-subtleNeutral-pressed, ${colors.R500})`,
10
+ focus: `var(--ds-background-subtleNeutral-resting, ${colors.P400})`
29
11
  },
30
12
  boxShadow: {
31
- focus: {
32
- light: `${colors.P100} 0 0 0 2px`,
33
- dark: `${colors.P100} 0 0 0 2px`
34
- }
13
+ focus: `0 0 0 2px ${`var(--ds-iconBorder-discovery, ${colors.P100})`}`
35
14
  },
36
15
  color: {
37
- default: {
38
- light: colors.N0,
39
- dark: colors.N0
40
- },
41
- hover: {
42
- light: colors.N0,
43
- dark: colors.N0
44
- },
45
- active: {
46
- light: colors.N0,
47
- dark: colors.N0
48
- },
16
+ default: `var(--ds-text-onBold, ${colors.N0})`,
17
+ hover: `var(--ds-text-onBold, ${colors.N0})`,
18
+ active: `var(--ds-text-onBold, ${colors.N0})`,
49
19
  disabled: {
50
- light: colors.N0,
51
- dark: colors.DN30
52
- },
53
- selected: {
54
- light: colors.N0,
55
- dark: colors.N0
20
+ light: `var(--ds-text-disabled, ${colors.N0})`,
21
+ dark: `var(--ds-text-disabled, ${colors.DN30})`
56
22
  },
57
- focus: {
58
- light: colors.N0,
59
- dark: colors.N0
60
- }
23
+ selected: `var(--ds-text-onBold, ${colors.N0})`,
24
+ focus: `var(--ds-text-onBold, ${colors.N0})`
61
25
  },
62
26
  outline: {
63
- focus: {
64
- light: 'none',
65
- dark: 'none'
66
- }
27
+ focus: 'none'
67
28
  }
68
29
  },
69
30
  subtle: {
70
31
  background: {
71
- default: {
72
- light: 'none',
73
- dark: 'none'
74
- },
75
- hover: {
76
- light: colors.P200,
77
- dark: colors.P200
78
- },
79
- active: {
80
- light: colors.P500,
81
- dark: colors.P500
82
- },
83
- disabled: {
84
- light: 'none',
85
- dark: 'none'
86
- },
32
+ default: 'none',
33
+ hover: `var(--ds-background-subtleNeutral-hover, ${colors.P200})`,
34
+ active: `var(--ds-background-subtleNeutral-pressed, ${colors.P500})`,
35
+ disabled: 'none',
87
36
  selected: {
88
- light: colors.N700,
89
- dark: colors.DN0
37
+ light: `var(--ds-background-selected-hover, ${colors.N700})`,
38
+ dark: `var(--ds-background-selected-hover, ${colors.DN0})`
90
39
  },
91
40
  focusSelected: {
92
- light: colors.N700,
93
- dark: colors.DN0
41
+ light: `var(--ds-background-selected-hover, ${colors.N700})`,
42
+ dark: `var(--ds-background-selected-hover, ${colors.DN0})`
94
43
  }
95
44
  },
96
45
  boxShadow: {
97
- focus: {
98
- light: `${colors.P100} 0 0 0 2px`,
99
- dark: `${colors.P100} 0 0 0 2px`
100
- }
46
+ focus: `0 0 0 2px ${`var(--ds-iconBorder-discovery, ${colors.P100})`}`
101
47
  },
102
48
  color: {
103
- default: {
104
- light: colors.N0,
105
- dark: colors.N0
106
- },
107
- hover: {
108
- light: colors.N0,
109
- dark: colors.N0
110
- },
111
- active: {
112
- light: colors.N0,
113
- dark: colors.N0
114
- },
115
- disabled: {
116
- light: colors.N0,
117
- dark: colors.N0
118
- },
119
- selected: {
120
- light: colors.N0,
121
- dark: colors.N0
122
- },
123
- focus: {
124
- light: colors.N0,
125
- dark: colors.N0
126
- }
49
+ default: `var(--ds-text-onBold, ${colors.N0})`,
50
+ hover: `var(--ds-text-onBold, ${colors.N0})`,
51
+ active: `var(--ds-text-onBold, ${colors.N0})`,
52
+ disabled: `var(--ds-text-disabled, ${colors.N0})`,
53
+ selected: `var(--ds-text-onBold, ${colors.N0})`,
54
+ focus: `var(--ds-text-onBold, ${colors.N0})`
127
55
  },
128
56
  outline: {
129
- focus: {
130
- light: 'none',
131
- dark: 'none'
132
- }
57
+ focus: 'none'
133
58
  }
134
59
  },
135
60
  'subtle-link': {
136
61
  textDecoration: {
137
- hover: {
138
- light: `underline ${colors.P75}`,
139
- dark: `underline ${colors.P75}`
140
- }
62
+ hover: `underline ${`var(--ds-text-discovery, ${colors.P75})`}`
141
63
  },
142
64
  textDecorationLine: {
143
- active: {
144
- light: 'none',
145
- dark: 'none'
146
- }
65
+ active: 'none'
147
66
  },
148
67
  boxShadow: {
149
- focus: {
150
- light: `${colors.P100} 0 0 0 2px`,
151
- dark: `${colors.P100} 0 0 0 2px`
152
- }
68
+ focus: `0 0 0 2px ${`var(--ds-iconBorder-discovery, ${colors.P100})`}`
153
69
  },
154
70
  color: {
155
- default: {
156
- light: colors.N0,
157
- dark: colors.N0
158
- },
159
- hover: {
160
- light: colors.P75,
161
- dark: colors.P75
162
- },
163
- active: {
164
- light: colors.P100,
165
- dark: colors.P100
166
- },
167
- disabled: {
168
- light: colors.P500,
169
- dark: colors.P500
170
- },
171
- selected: {
172
- light: colors.N0,
173
- dark: colors.N0
174
- },
175
- focus: {
176
- light: colors.N0,
177
- dark: colors.N0
178
- }
71
+ default: `var(--ds-text-onBold, ${colors.N0})`,
72
+ hover: `var(--ds-text-onBold, ${colors.P75})`,
73
+ active: `var(--ds-text-onBold, ${colors.P100})`,
74
+ disabled: `var(--ds-text-discovery, ${colors.P500})`,
75
+ selected: `var(--ds-text-selected, ${colors.N0})`,
76
+ focus: `var(--ds-text-onBold, ${colors.N0})`
179
77
  }
180
78
  }
181
79
  };
182
80
  const modalTheme = {
183
81
  primary: {
184
82
  background: {
185
- default: {
186
- light: colors.P400,
187
- dark: colors.P400
188
- },
189
- hover: {
190
- light: colors.P200,
191
- dark: colors.P200
192
- },
193
- active: {
194
- light: colors.P500,
195
- dark: colors.P500
196
- },
83
+ default: `var(--ds-background-boldDiscovery-resting, ${colors.P400})`,
84
+ hover: `var(--ds-background-boldDiscovery-hover, ${colors.P200})`,
85
+ active: `var(--ds-background-boldDiscovery-pressed, ${colors.P500})`,
197
86
  disabled: {
198
- light: colors.N30,
199
- dark: colors.DN70
200
- },
201
- selected: {
202
- light: colors.R500,
203
- dark: colors.R500
87
+ light: `var(--ds-background-disabled, ${colors.N30})`,
88
+ dark: `var(--ds-background-disabled, ${colors.DN70})`
204
89
  },
205
- focus: {
206
- light: colors.P400,
207
- dark: colors.P400
208
- }
90
+ selected: `var(--ds-background-selected-hover, ${colors.R500})`,
91
+ focus: `var(--ds-background-boldDiscovery-hover, ${colors.P400})`
209
92
  },
210
93
  boxShadow: {
211
94
  focus: {
212
- light: `${colors.P100} 0 0 0 2px`,
213
- dark: `${colors.P100} 0 0 0 2px`
95
+ light: `0 0 0 2px ${`var(--ds-iconBorder-discovery, ${colors.P100})`}`,
96
+ dark: `0 0 0 2px ${`var(--ds-iconBorder-discovery, ${colors.P100})`}`
214
97
  }
215
98
  },
216
99
  color: {
217
- default: {
218
- light: colors.N0,
219
- dark: colors.N0
220
- },
100
+ default: `var(--ds-text-onBold, ${colors.N0})`,
221
101
  disabled: {
222
- light: colors.N0,
223
- dark: colors.DN30
102
+ light: `var(--ds-text-disabled, ${colors.N0})`,
103
+ dark: `var(--ds-text-disabled, ${colors.DN30})`
224
104
  },
225
- selected: {
226
- light: colors.N0,
227
- dark: colors.N0
228
- },
229
- focus: {
230
- light: colors.N0,
231
- dark: colors.N0
232
- }
105
+ selected: `var(--ds-text-selected, ${colors.N0})`,
106
+ focus: `var(--ds-text-onBold, ${colors.N0})`
233
107
  }
234
108
  }
235
109
  };
package/dist/es2019/styled/blanket.js CHANGED
@@ -4,8 +4,8 @@ import { DN90A, N100A } from '@atlaskit/theme/colors';
4
4
  import { themed, useGlobalTheme } from '@atlaskit/theme/components';
5
5
  import { layers } from '@atlaskit/theme/constants';
6
6
  const backgroundColor = themed({
7
- light: N100A,
8
- dark: DN90A
7
+ light: `var(--ds-background-blanket, ${N100A})`,
8
+ dark: `var(--ds-background-blanket, ${DN90A})`
9
9
  }); // IE11 and Edge: z-index needed because fixed position calculates z-index relative
10
10
  // to body instead of nearest stacking context (Portal in our case).
11
11
 
package/dist/es2019/styled/target.js CHANGED
@@ -6,7 +6,7 @@ import { P300 } from '@atlaskit/theme/colors';
6
6
  import { layers } from '@atlaskit/theme/constants';
7
7
  // NOTE:
8
8
  // Pulse color "rgb(101, 84, 192)" derived from "colors.P300"
9
- const baseShadow = `0 0 0 2px ${P300}`;
9
+ const baseShadow = `var(--ds-overlay, ${`0 0 0 2px ${P300}`})`;
10
10
  const easing = 'cubic-bezier(0.55, 0.055, 0.675, 0.19)';
11
11
  const pulseKeyframes = keyframes({
12
12
  '0%, 33%': {
package/dist/es2019/version.json CHANGED
@@ -1,5 +1,5 @@
1
1
  {
2
2
  "name": "@atlaskit/onboarding",
3
- "version": "10.2.4",
3
+ "version": "10.3.1",
4
4
  "sideEffects": false
5
5
  }
package/dist/esm/components/spotlight-card.js CHANGED
@@ -68,10 +68,10 @@ var SpotlightCard = /*#__PURE__*/function (_React$Component) {
68
68
  return _theme(function () {
69
69
  return _objectSpread(_objectSpread({}, others), {}, {
70
70
  container: _objectSpread({
71
- background: P300,
72
- color: N0,
71
+ background: "var(--ds-background-boldDiscovery-resting, ".concat(P300, ")"),
72
+ color: "var(--ds-text-onBold, ".concat(N0, ")"),
73
73
  width: "".concat(Math.min(Math.max(width, 160), 600), "px"),
74
- boxShadow: isFlat ? undefined : "0 4px 8px -2px ".concat(N50A, ", 0 0 1px ").concat(N60A)
74
+ boxShadow: isFlat ? undefined : "var(--ds-card, ".concat("0 4px 8px -2px ".concat(N50A, ", 0 0 1px ").concat(N60A), ")")
75
75
  }, container)
76
76
  });
77
77
  }, {});
package/dist/esm/components/spotlight-dialog.js CHANGED
@@ -23,7 +23,7 @@ import { DialogImage } from '../styled/dialog';
23
23
  import SpotlightCard from './spotlight-card';
24
24
  import ValueChanged from './value-changed';
25
25
  var packageName = "@atlaskit/onboarding";
26
- var packageVersion = "10.2.4";
26
+ var packageVersion = "10.3.1";
27
27
 
28
28
  var SpotlightDialog = /*#__PURE__*/function (_Component) {
29
29
  _inherits(SpotlightDialog, _Component);
package/dist/esm/components/theme.js CHANGED
@@ -10,234 +10,108 @@ import * as colors from '@atlaskit/theme/colors';
10
10
  var spotlightTheme = {
11
11
  default: {
12
12
  background: {
13
- default: {
14
- light: colors.P400,
15
- dark: colors.P400
16
- },
17
- hover: {
18
- light: colors.P200,
19
- dark: colors.P200
20
- },
21
- active: {
22
- light: colors.P500,
23
- dark: colors.P500
24
- },
25
- disabled: {
26
- light: colors.P400,
27
- dark: colors.P400
28
- },
29
- selected: {
30
- light: colors.R500,
31
- dark: colors.R500
32
- },
33
- focus: {
34
- light: colors.P400,
35
- dark: colors.P400
36
- }
13
+ default: "var(--ds-background-subtleNeutral-resting, ".concat(colors.P400, ")"),
14
+ hover: "var(--ds-background-subtleNeutral-hover, ".concat(colors.P200, ")"),
15
+ active: "var(--ds-background-subtleNeutral-pressed, ".concat(colors.P500, ")"),
16
+ disabled: "var(--ds-background-disabled, ".concat(colors.P400, ")"),
17
+ selected: "var(--ds-background-subtleNeutral-pressed, ".concat(colors.R500, ")"),
18
+ focus: "var(--ds-background-subtleNeutral-resting, ".concat(colors.P400, ")")
37
19
  },
38
20
  boxShadow: {
39
- focus: {
40
- light: "".concat(colors.P100, " 0 0 0 2px"),
41
- dark: "".concat(colors.P100, " 0 0 0 2px")
42
- }
21
+ focus: "0 0 0 2px ".concat("var(--ds-iconBorder-discovery, ".concat(colors.P100, ")"))
43
22
  },
44
23
  color: {
45
- default: {
46
- light: colors.N0,
47
- dark: colors.N0
48
- },
49
- hover: {
50
- light: colors.N0,
51
- dark: colors.N0
52
- },
53
- active: {
54
- light: colors.N0,
55
- dark: colors.N0
56
- },
24
+ default: "var(--ds-text-onBold, ".concat(colors.N0, ")"),
25
+ hover: "var(--ds-text-onBold, ".concat(colors.N0, ")"),
26
+ active: "var(--ds-text-onBold, ".concat(colors.N0, ")"),
57
27
  disabled: {
58
- light: colors.N0,
59
- dark: colors.DN30
60
- },
61
- selected: {
62
- light: colors.N0,
63
- dark: colors.N0
28
+ light: "var(--ds-text-disabled, ".concat(colors.N0, ")"),
29
+ dark: "var(--ds-text-disabled, ".concat(colors.DN30, ")")
64
30
  },
65
- focus: {
66
- light: colors.N0,
67
- dark: colors.N0
68
- }
31
+ selected: "var(--ds-text-onBold, ".concat(colors.N0, ")"),
32
+ focus: "var(--ds-text-onBold, ".concat(colors.N0, ")")
69
33
  },
70
34
  outline: {
71
- focus: {
72
- light: 'none',
73
- dark: 'none'
74
- }
35
+ focus: 'none'
75
36
  }
76
37
  },
77
38
  subtle: {
78
39
  background: {
79
- default: {
80
- light: 'none',
81
- dark: 'none'
82
- },
83
- hover: {
84
- light: colors.P200,
85
- dark: colors.P200
86
- },
87
- active: {
88
- light: colors.P500,
89
- dark: colors.P500
90
- },
91
- disabled: {
92
- light: 'none',
93
- dark: 'none'
94
- },
40
+ default: 'none',
41
+ hover: "var(--ds-background-subtleNeutral-hover, ".concat(colors.P200, ")"),
42
+ active: "var(--ds-background-subtleNeutral-pressed, ".concat(colors.P500, ")"),
43
+ disabled: 'none',
95
44
  selected: {
96
- light: colors.N700,
97
- dark: colors.DN0
45
+ light: "var(--ds-background-selected-hover, ".concat(colors.N700, ")"),
46
+ dark: "var(--ds-background-selected-hover, ".concat(colors.DN0, ")")
98
47
  },
99
48
  focusSelected: {
100
- light: colors.N700,
101
- dark: colors.DN0
49
+ light: "var(--ds-background-selected-hover, ".concat(colors.N700, ")"),
50
+ dark: "var(--ds-background-selected-hover, ".concat(colors.DN0, ")")
102
51
  }
103
52
  },
104
53
  boxShadow: {
105
- focus: {
106
- light: "".concat(colors.P100, " 0 0 0 2px"),
107
- dark: "".concat(colors.P100, " 0 0 0 2px")
108
- }
54
+ focus: "0 0 0 2px ".concat("var(--ds-iconBorder-discovery, ".concat(colors.P100, ")"))
109
55
  },
110
56
  color: {
111
- default: {
112
- light: colors.N0,
113
- dark: colors.N0
114
- },
115
- hover: {
116
- light: colors.N0,
117
- dark: colors.N0
118
- },
119
- active: {
120
- light: colors.N0,
121
- dark: colors.N0
122
- },
123
- disabled: {
124
- light: colors.N0,
125
- dark: colors.N0
126
- },
127
- selected: {
128
- light: colors.N0,
129
- dark: colors.N0
130
- },
131
- focus: {
132
- light: colors.N0,
133
- dark: colors.N0
134
- }
57
+ default: "var(--ds-text-onBold, ".concat(colors.N0, ")"),
58
+ hover: "var(--ds-text-onBold, ".concat(colors.N0, ")"),
59
+ active: "var(--ds-text-onBold, ".concat(colors.N0, ")"),
60
+ disabled: "var(--ds-text-disabled, ".concat(colors.N0, ")"),
61
+ selected: "var(--ds-text-onBold, ".concat(colors.N0, ")"),
62
+ focus: "var(--ds-text-onBold, ".concat(colors.N0, ")")
135
63
  },
136
64
  outline: {
137
- focus: {
138
- light: 'none',
139
- dark: 'none'
140
- }
65
+ focus: 'none'
141
66
  }
142
67
  },
143
68
  'subtle-link': {
144
69
  textDecoration: {
145
- hover: {
146
- light: "underline ".concat(colors.P75),
147
- dark: "underline ".concat(colors.P75)
148
- }
70
+ hover: "underline ".concat("var(--ds-text-discovery, ".concat(colors.P75, ")"))
149
71
  },
150
72
  textDecorationLine: {
151
- active: {
152
- light: 'none',
153
- dark: 'none'
154
- }
73
+ active: 'none'
155
74
  },
156
75
  boxShadow: {
157
- focus: {
158
- light: "".concat(colors.P100, " 0 0 0 2px"),
159
- dark: "".concat(colors.P100, " 0 0 0 2px")
160
- }
76
+ focus: "0 0 0 2px ".concat("var(--ds-iconBorder-discovery, ".concat(colors.P100, ")"))
161
77
  },
162
78
  color: {
163
- default: {
164
- light: colors.N0,
165
- dark: colors.N0
166
- },
167
- hover: {
168
- light: colors.P75,
169
- dark: colors.P75
170
- },
171
- active: {
172
- light: colors.P100,
173
- dark: colors.P100
174
- },
175
- disabled: {
176
- light: colors.P500,
177
- dark: colors.P500
178
- },
179
- selected: {
180
- light: colors.N0,
181
- dark: colors.N0
182
- },
183
- focus: {
184
- light: colors.N0,
185
- dark: colors.N0
186
- }
79
+ default: "var(--ds-text-onBold, ".concat(colors.N0, ")"),
80
+ hover: "var(--ds-text-onBold, ".concat(colors.P75, ")"),
81
+ active: "var(--ds-text-onBold, ".concat(colors.P100, ")"),
82
+ disabled: "var(--ds-text-discovery, ".concat(colors.P500, ")"),
83
+ selected: "var(--ds-text-selected, ".concat(colors.N0, ")"),
84
+ focus: "var(--ds-text-onBold, ".concat(colors.N0, ")")
187
85
  }
188
86
  }
189
87
  };
190
88
  var modalTheme = {
191
89
  primary: {
192
90
  background: {
193
- default: {
194
- light: colors.P400,
195
- dark: colors.P400
196
- },
197
- hover: {
198
- light: colors.P200,
199
- dark: colors.P200
200
- },
201
- active: {
202
- light: colors.P500,
203
- dark: colors.P500
204
- },
91
+ default: "var(--ds-background-boldDiscovery-resting, ".concat(colors.P400, ")"),
92
+ hover: "var(--ds-background-boldDiscovery-hover, ".concat(colors.P200, ")"),
93
+ active: "var(--ds-background-boldDiscovery-pressed, ".concat(colors.P500, ")"),
205
94
  disabled: {
206
- light: colors.N30,
207
- dark: colors.DN70
208
- },
209
- selected: {
210
- light: colors.R500,
211
- dark: colors.R500
95
+ light: "var(--ds-background-disabled, ".concat(colors.N30, ")"),
96
+ dark: "var(--ds-background-disabled, ".concat(colors.DN70, ")")
212
97
  },
213
- focus: {
214
- light: colors.P400,
215
- dark: colors.P400
216
- }
98
+ selected: "var(--ds-background-selected-hover, ".concat(colors.R500, ")"),
99
+ focus: "var(--ds-background-boldDiscovery-hover, ".concat(colors.P400, ")")
217
100
  },
218
101
  boxShadow: {
219
102
  focus: {
220
- light: "".concat(colors.P100, " 0 0 0 2px"),
221
- dark: "".concat(colors.P100, " 0 0 0 2px")
103
+ light: "0 0 0 2px ".concat("var(--ds-iconBorder-discovery, ".concat(colors.P100, ")")),
104
+ dark: "0 0 0 2px ".concat("var(--ds-iconBorder-discovery, ".concat(colors.P100, ")"))
222
105
  }
223
106
  },
224
107
  color: {
225
- default: {
226
- light: colors.N0,
227
- dark: colors.N0
228
- },
108
+ default: "var(--ds-text-onBold, ".concat(colors.N0, ")"),
229
109
  disabled: {
230
- light: colors.N0,
231
- dark: colors.DN30
110
+ light: "var(--ds-text-disabled, ".concat(colors.N0, ")"),
111
+ dark: "var(--ds-text-disabled, ".concat(colors.DN30, ")")
232
112
  },
233
- selected: {
234
- light: colors.N0,
235
- dark: colors.N0
236
- },
237
- focus: {
238
- light: colors.N0,
239
- dark: colors.N0
240
- }
113
+ selected: "var(--ds-text-selected, ".concat(colors.N0, ")"),
114
+ focus: "var(--ds-text-onBold, ".concat(colors.N0, ")")
241
115
  }
242
116
  }
243
117
  };
package/dist/esm/styled/blanket.js CHANGED
@@ -10,8 +10,8 @@ import { DN90A, N100A } from '@atlaskit/theme/colors';
10
10
  import { themed, useGlobalTheme } from '@atlaskit/theme/components';
11
11
  import { layers } from '@atlaskit/theme/constants';
12
12
  var backgroundColor = themed({
13
- light: N100A,
14
- dark: DN90A
13
+ light: "var(--ds-background-blanket, ".concat(N100A, ")"),
14
+ dark: "var(--ds-background-blanket, ".concat(DN90A, ")")
15
15
  }); // IE11 and Edge: z-index needed because fixed position calculates z-index relative
16
16
  // to body instead of nearest stacking context (Portal in our case).
17
17
 
package/dist/esm/styled/target.js CHANGED
@@ -12,7 +12,7 @@ import { P300 } from '@atlaskit/theme/colors';
12
12
  import { layers } from '@atlaskit/theme/constants';
13
13
  // NOTE:
14
14
  // Pulse color "rgb(101, 84, 192)" derived from "colors.P300"
15
- var baseShadow = "0 0 0 2px ".concat(P300);
15
+ var baseShadow = "var(--ds-overlay, ".concat("0 0 0 2px ".concat(P300), ")");
16
16
  var easing = 'cubic-bezier(0.55, 0.055, 0.675, 0.19)';
17
17
  var pulseKeyframes = keyframes({
18
18
  '0%, 33%': {
package/dist/esm/version.json CHANGED
@@ -1,5 +1,5 @@
1
1
  {
2
2
  "name": "@atlaskit/onboarding",
3
- "version": "10.2.4",
3
+ "version": "10.3.1",
4
4
  "sideEffects": false
5
5
  }
package/dist/types/components/spotlight-manager.d.ts CHANGED
@@ -55,10 +55,10 @@ export default class SpotlightManager extends PureComponent<SpotlightManagerProp
55
55
  targetRef: (name: string) => (element: HTMLElement | void) => void;
56
56
  spotlightOpen: () => void;
57
57
  spotlightClose: () => void;
58
- getStateProviderValue: (this: any, targets: any) => {
58
+ getStateProviderValue: import("memoize-one").MemoizedFn<(this: any, targets: any) => {
59
59
  opened: () => void;
60
60
  closed: () => void;
61
61
  targets: any;
62
- };
62
+ }>;
63
63
  render(): JSX.Element;
64
64
  }
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@atlaskit/onboarding",
3
- "version": "10.2.4",
4
- "description": "Highlight elements of the UI to the user and display a complementary dialog.",
3
+ "version": "10.3.1",
4
+ "description": "An onboarding spotlight introduces new features to users through focused messages or multi-step tours.",
5
5
  "publishConfig": {
6
6
  "registry": "https://registry.npmjs.org/"
7
7
  },
@@ -13,28 +13,30 @@
13
13
  "module:es2019": "dist/es2019/index.js",
14
14
  "types": "dist/types/index.d.ts",
15
15
  "sideEffects": false,
16
- "atlaskit:src": "src/index.ts",
16
+ "atlaskit:src": "src/index.tsx",
17
+ "homepage": "https://atlassian.design/components/onboarding/",
17
18
  "atlassian": {
18
19
  "team": "Design System Team",
19
20
  "deprecatedAutoEntryPoints": true,
20
21
  "inPublicMirror": true,
21
22
  "releaseModel": "scheduled",
22
23
  "website": {
23
- "name": "Onboarding"
24
+ "name": "Onboarding (spotlight)"
24
25
  }
25
26
  },
26
27
  "dependencies": {
27
28
  "@atlaskit/analytics-next": "^8.0.0",
28
29
  "@atlaskit/button": "^16.0.0",
29
- "@atlaskit/modal-dialog": "^12.0.0",
30
+ "@atlaskit/modal-dialog": "^12.2.0",
30
31
  "@atlaskit/popper": "^5.0.0",
31
32
  "@atlaskit/portal": "^4.0.0",
32
33
  "@atlaskit/theme": "^12.0.0",
34
+ "@atlaskit/tokens": "^0.4.0",
33
35
  "@babel/runtime": "^7.0.0",
34
36
  "@emotion/core": "^10.0.9",
35
37
  "exenv": "^1.2.2",
36
- "memoize-one": "^5.1.0",
37
- "react-focus-lock": "^1.19.1",
38
+ "memoize-one": "^6.0.0",
39
+ "react-focus-lock": "^2.5.2",
38
40
  "react-node-resolver": "^1.0.1",
39
41
  "react-scrolllock": "^5.0.1",
40
42
  "react-transition-group": "^4.4.1",
@@ -45,10 +47,12 @@
45
47
  "react-dom": "^16.8.0"
46
48
  },
47
49
  "devDependencies": {
50
+ "@atlaskit/avatar": "^20.5.0",
48
51
  "@atlaskit/build-utils": "*",
49
52
  "@atlaskit/docs": "*",
50
53
  "@atlaskit/icon": "^21.9.0",
51
54
  "@atlaskit/progress-indicator": "^9.1.0",
55
+ "@atlaskit/select": "^15.2.2",
52
56
  "@atlaskit/ssr": "*",
53
57
  "@atlaskit/visual-regression": "*",
54
58
  "@atlaskit/webdriver-runner": "*",
@@ -66,8 +70,11 @@
66
70
  },
67
71
  "@repo/internal": {
68
72
  "analytics": "analytics-next",
69
- "theming": "new-theming-api",
70
- "styling": "emotion",
73
+ "theming": "tokens",
74
+ "styling": [
75
+ "static",
76
+ "emotion"
77
+ ],
71
78
  "design-system": "v1",
72
79
  "deprecation": "no-deprecated-imports"
73
80
  }