@atlaskit/onboarding 10.3.3 → 10.3.6

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/CHANGELOG.md CHANGED
@@ -1,5 +1,26 @@
1
1
  # @atlaskit/onboarding
2
2
 
3
+ ## 10.3.6
4
+
5
+ ### Patch Changes
6
+
7
+ - [`bd38851d12f`](https://bitbucket.org/atlassian/atlassian-frontend/commits/bd38851d12f) - [ux] Fixed the missing Spotlight button border by updating the token usages.
8
+ - Updated dependencies
9
+
10
+ ## 10.3.5
11
+
12
+ ### Patch Changes
13
+
14
+ - [`58884c2f6c1`](https://bitbucket.org/atlassian/atlassian-frontend/commits/58884c2f6c1) - Internal code change turning on a new linting rule.
15
+
16
+ ## 10.3.4
17
+
18
+ ### Patch Changes
19
+
20
+ - [`19d72473dfb`](https://bitbucket.org/atlassian/atlassian-frontend/commits/19d72473dfb) - The no-unsafe-design-token-usage eslint rule now respects the new token naming conventions when auto-fixing by correctly formatting token ids.
21
+ - [`19d72473dfb`](https://bitbucket.org/atlassian/atlassian-frontend/commits/19d72473dfb) - The no-unsafe-design-token-usage eslint rule now respects the new token naming conventions when auto-fixing by correctly formatting token ids.
22
+ - Updated dependencies
23
+
3
24
  ## 10.3.3
4
25
 
5
26
  ### Patch Changes
@@ -89,10 +89,10 @@ var SpotlightCard = /*#__PURE__*/function (_React$Component) {
89
89
  return _theme(function () {
90
90
  return _objectSpread(_objectSpread({}, others), {}, {
91
91
  container: _objectSpread({
92
- background: "var(--ds-background-boldDiscovery-resting, ".concat(_colors.P300, ")"),
93
- color: "var(--ds-text-onBold, ".concat(_colors.N0, ")"),
92
+ background: "var(--ds-background-discovery-bold, ".concat(_colors.P300, ")"),
93
+ color: "var(--ds-text-inverse, ".concat(_colors.N0, ")"),
94
94
  width: "".concat(Math.min(Math.max(width, 160), 600), "px"),
95
- boxShadow: isFlat ? undefined : "var(--ds-card, ".concat("0 4px 8px -2px ".concat(_colors.N50A, ", 0 0 1px ").concat(_colors.N60A), ")")
95
+ boxShadow: isFlat ? undefined : "var(--ds-shadow-raised, ".concat("0 4px 8px -2px ".concat(_colors.N50A, ", 0 0 1px ").concat(_colors.N60A), ")")
96
96
  }, container)
97
97
  });
98
98
  }, {});
@@ -54,7 +54,7 @@ function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflec
54
54
  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; } }
55
55
 
56
56
  var packageName = "@atlaskit/onboarding";
57
- var packageVersion = "10.3.3";
57
+ var packageVersion = "10.3.6";
58
58
 
59
59
  var SpotlightDialog = /*#__PURE__*/function (_Component) {
60
60
  (0, _inherits2.default)(SpotlightDialog, _Component);
@@ -31,26 +31,26 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
31
31
  var spotlightTheme = {
32
32
  default: {
33
33
  background: {
34
- default: "var(--ds-background-subtleNeutral-resting, ".concat(colors.P400, ")"),
35
- hover: "var(--ds-background-subtleNeutral-hover, ".concat(colors.P200, ")"),
36
- active: "var(--ds-background-subtleNeutral-pressed, ".concat(colors.P500, ")"),
34
+ default: "var(--ds-background-neutral, ".concat(colors.P400, ")"),
35
+ hover: "var(--ds-background-neutral-hovered, ".concat(colors.P200, ")"),
36
+ active: "var(--ds-background-neutral-pressed, ".concat(colors.P500, ")"),
37
37
  disabled: "var(--ds-background-disabled, ".concat(colors.P400, ")"),
38
- selected: "var(--ds-background-subtleNeutral-pressed, ".concat(colors.R500, ")"),
39
- focus: "var(--ds-background-subtleNeutral-resting, ".concat(colors.P400, ")")
38
+ selected: "var(--ds-background-neutral-pressed, ".concat(colors.R500, ")"),
39
+ focus: "var(--ds-background-neutral, ".concat(colors.P400, ")")
40
40
  },
41
41
  boxShadow: {
42
- focus: "0 0 0 2px ".concat("var(--ds-iconBorder-discovery, ".concat(colors.P100, ")"))
42
+ focus: "0 0 0 2px ".concat("var(--ds-border-discovery, ".concat(colors.P100, ")"))
43
43
  },
44
44
  color: {
45
- default: "var(--ds-text-onBold, ".concat(colors.N0, ")"),
46
- hover: "var(--ds-text-onBold, ".concat(colors.N0, ")"),
47
- active: "var(--ds-text-onBold, ".concat(colors.N0, ")"),
45
+ default: "var(--ds-text-inverse, ".concat(colors.N0, ")"),
46
+ hover: "var(--ds-text-inverse, ".concat(colors.N0, ")"),
47
+ active: "var(--ds-text-inverse, ".concat(colors.N0, ")"),
48
48
  disabled: {
49
49
  light: "var(--ds-text-disabled, ".concat(colors.N0, ")"),
50
50
  dark: "var(--ds-text-disabled, ".concat(colors.DN30, ")")
51
51
  },
52
- selected: "var(--ds-text-onBold, ".concat(colors.N0, ")"),
53
- focus: "var(--ds-text-onBold, ".concat(colors.N0, ")")
52
+ selected: "var(--ds-text-inverse, ".concat(colors.N0, ")"),
53
+ focus: "var(--ds-text-inverse, ".concat(colors.N0, ")")
54
54
  },
55
55
  outline: {
56
56
  focus: 'none'
@@ -59,28 +59,28 @@ var spotlightTheme = {
59
59
  subtle: {
60
60
  background: {
61
61
  default: 'none',
62
- hover: "var(--ds-background-subtleNeutral-hover, ".concat(colors.P200, ")"),
63
- active: "var(--ds-background-subtleNeutral-pressed, ".concat(colors.P500, ")"),
62
+ hover: "var(--ds-background-neutral-hovered, ".concat(colors.P200, ")"),
63
+ active: "var(--ds-background-neutral-pressed, ".concat(colors.P500, ")"),
64
64
  disabled: 'none',
65
65
  selected: {
66
- light: "var(--ds-background-selected-hover, ".concat(colors.N700, ")"),
67
- dark: "var(--ds-background-selected-hover, ".concat(colors.DN0, ")")
66
+ light: "var(--ds-background-brand-hovered, ".concat(colors.N700, ")"),
67
+ dark: "var(--ds-background-brand-hovered, ".concat(colors.DN0, ")")
68
68
  },
69
69
  focusSelected: {
70
- light: "var(--ds-background-selected-hover, ".concat(colors.N700, ")"),
71
- dark: "var(--ds-background-selected-hover, ".concat(colors.DN0, ")")
70
+ light: "var(--ds-background-brand-hovered, ".concat(colors.N700, ")"),
71
+ dark: "var(--ds-background-brand-hovered, ".concat(colors.DN0, ")")
72
72
  }
73
73
  },
74
74
  boxShadow: {
75
- focus: "0 0 0 2px ".concat("var(--ds-iconBorder-discovery, ".concat(colors.P100, ")"))
75
+ focus: "0 0 0 2px ".concat("var(--ds-icon-discovery, ".concat(colors.P100, ")"))
76
76
  },
77
77
  color: {
78
- default: "var(--ds-text-onBold, ".concat(colors.N0, ")"),
79
- hover: "var(--ds-text-onBold, ".concat(colors.N0, ")"),
80
- active: "var(--ds-text-onBold, ".concat(colors.N0, ")"),
78
+ default: "var(--ds-text-inverse, ".concat(colors.N0, ")"),
79
+ hover: "var(--ds-text-inverse, ".concat(colors.N0, ")"),
80
+ active: "var(--ds-text-inverse, ".concat(colors.N0, ")"),
81
81
  disabled: "var(--ds-text-disabled, ".concat(colors.N0, ")"),
82
- selected: "var(--ds-text-onBold, ".concat(colors.N0, ")"),
83
- focus: "var(--ds-text-onBold, ".concat(colors.N0, ")")
82
+ selected: "var(--ds-text-inverse, ".concat(colors.N0, ")"),
83
+ focus: "var(--ds-text-inverse, ".concat(colors.N0, ")")
84
84
  },
85
85
  outline: {
86
86
  focus: 'none'
@@ -94,45 +94,45 @@ var spotlightTheme = {
94
94
  active: 'none'
95
95
  },
96
96
  boxShadow: {
97
- focus: "0 0 0 2px ".concat("var(--ds-iconBorder-discovery, ".concat(colors.P100, ")"))
97
+ focus: "0 0 0 2px ".concat("var(--ds-border-discovery, ".concat(colors.P100, ")"))
98
98
  },
99
99
  color: {
100
- default: "var(--ds-text-onBold, ".concat(colors.N0, ")"),
101
- hover: "var(--ds-text-onBold, ".concat(colors.P75, ")"),
102
- active: "var(--ds-text-onBold, ".concat(colors.P100, ")"),
100
+ default: "var(--ds-text-inverse, ".concat(colors.N0, ")"),
101
+ hover: "var(--ds-text-inverse, ".concat(colors.P75, ")"),
102
+ active: "var(--ds-text-inverse, ".concat(colors.P100, ")"),
103
103
  disabled: "var(--ds-text-discovery, ".concat(colors.P500, ")"),
104
- selected: "var(--ds-text-selected, ".concat(colors.N0, ")"),
105
- focus: "var(--ds-text-onBold, ".concat(colors.N0, ")")
104
+ selected: "var(--ds-text-brand, ".concat(colors.N0, ")"),
105
+ focus: "var(--ds-text-inverse, ".concat(colors.N0, ")")
106
106
  }
107
107
  }
108
108
  };
109
109
  var modalTheme = {
110
110
  primary: {
111
111
  background: {
112
- default: "var(--ds-background-boldDiscovery-resting, ".concat(colors.P400, ")"),
113
- hover: "var(--ds-background-boldDiscovery-hover, ".concat(colors.P200, ")"),
114
- active: "var(--ds-background-boldDiscovery-pressed, ".concat(colors.P500, ")"),
112
+ default: "var(--ds-background-discovery-bold, ".concat(colors.P400, ")"),
113
+ hover: "var(--ds-background-discovery-bold-hovered, ".concat(colors.P200, ")"),
114
+ active: "var(--ds-background-discovery-bold-pressed, ".concat(colors.P500, ")"),
115
115
  disabled: {
116
116
  light: "var(--ds-background-disabled, ".concat(colors.N30, ")"),
117
117
  dark: "var(--ds-background-disabled, ".concat(colors.DN70, ")")
118
118
  },
119
- selected: "var(--ds-background-selected-hover, ".concat(colors.R500, ")"),
120
- focus: "var(--ds-background-boldDiscovery-hover, ".concat(colors.P400, ")")
119
+ selected: "var(--ds-background-brand-hovered, ".concat(colors.R500, ")"),
120
+ focus: "var(--ds-background-discovery-bold-hovered, ".concat(colors.P400, ")")
121
121
  },
122
122
  boxShadow: {
123
123
  focus: {
124
- light: "0 0 0 2px ".concat("var(--ds-iconBorder-discovery, ".concat(colors.P100, ")")),
125
- dark: "0 0 0 2px ".concat("var(--ds-iconBorder-discovery, ".concat(colors.P100, ")"))
124
+ light: "0 0 0 2px ".concat("var(--ds-border-discovery, ".concat(colors.P100, ")")),
125
+ dark: "0 0 0 2px ".concat("var(--ds-border-discovery, ".concat(colors.P100, ")"))
126
126
  }
127
127
  },
128
128
  color: {
129
- default: "var(--ds-text-onBold, ".concat(colors.N0, ")"),
129
+ default: "var(--ds-text-inverse, ".concat(colors.N0, ")"),
130
130
  disabled: {
131
131
  light: "var(--ds-text-disabled, ".concat(colors.N0, ")"),
132
132
  dark: "var(--ds-text-disabled, ".concat(colors.DN30, ")")
133
133
  },
134
- selected: "var(--ds-text-selected, ".concat(colors.N0, ")"),
135
- focus: "var(--ds-text-onBold, ".concat(colors.N0, ")")
134
+ selected: "var(--ds-text-brand, ".concat(colors.N0, ")"),
135
+ focus: "var(--ds-text-inverse, ".concat(colors.N0, ")")
136
136
  }
137
137
  }
138
138
  };
@@ -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 = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(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; }
23
23
 
24
24
  var backgroundColor = (0, _components.themed)({
25
- light: "var(--ds-background-blanket, ".concat(_colors.N100A, ")"),
26
- dark: "var(--ds-background-blanket, ".concat(_colors.DN90A, ")")
25
+ light: "var(--ds-blanket, ".concat(_colors.N100A, ")"),
26
+ dark: "var(--ds-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
 
@@ -29,11 +29,11 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
29
29
 
30
30
  // NOTE:
31
31
  // Pulse color "rgb(101, 84, 192)" derived from "colors.P300"
32
- var baseShadow = "var(--ds-overlay, ".concat("0 0 0 2px ".concat(_colors.P300), ")");
32
+ var baseShadow = "0 0 0 2px ".concat("var(--ds-border-discovery, ".concat(_colors.P300, ")"));
33
33
  var easing = 'cubic-bezier(0.55, 0.055, 0.675, 0.19)';
34
34
  var pulseKeyframes = (0, _core.keyframes)({
35
35
  '0%, 33%': {
36
- boxShadow: "".concat(baseShadow, ", 0 0 0 rgba(101, 84, 192, 1)")
36
+ boxShadow: "".concat(baseShadow, ", 0 0 0 ").concat("var(--ds-border-discovery, rgba(101, 84, 192, 1))")
37
37
  },
38
38
  '66%, 100%': {
39
39
  boxShadow: "".concat(baseShadow, ", 0 0 0 10px rgba(101, 84, 192, 0.01)")
@@ -64,7 +64,8 @@ var Base = function Base(_ref) {
64
64
  style: _objectSpread(_objectSpread({}, style), {}, {
65
65
  backgroundColor: bgColor,
66
66
  borderRadius: radius ? "".concat(radius, "px") : undefined
67
- })
67
+ }) // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
68
+
68
69
  }, props), children);
69
70
  };
70
71
  /**
@@ -80,9 +81,11 @@ var TargetInner = function TargetInner(_ref2) {
80
81
  var children = _ref2.children,
81
82
  pulse = _ref2.pulse,
82
83
  props = (0, _objectWithoutProperties2.default)(_ref2, _excluded2);
83
- return (0, _core.jsx)(Base, (0, _extends2.default)({}, props, {
84
- css: [pulse && animationStyles]
85
- }), children);
84
+ return (// eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
85
+ (0, _core.jsx)(Base, (0, _extends2.default)({}, props, {
86
+ css: [pulse && animationStyles]
87
+ }), children)
88
+ );
86
89
  };
87
90
 
88
91
  exports.TargetInner = TargetInner;
@@ -127,10 +130,12 @@ var Pulse = function Pulse(_ref3) {
127
130
  pulse = _ref3$pulse === void 0 ? true : _ref3$pulse,
128
131
  testId = _ref3.testId,
129
132
  props = (0, _objectWithoutProperties2.default)(_ref3, _excluded3);
130
- return (0, _core.jsx)(Base, (0, _extends2.default)({}, props, {
131
- css: [pulse && animationStyles],
132
- testId: testId
133
- }), children);
133
+ return (// eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
134
+ (0, _core.jsx)(Base, (0, _extends2.default)({}, props, {
135
+ css: [pulse && animationStyles],
136
+ testId: testId
137
+ }), children)
138
+ );
134
139
  };
135
140
 
136
141
  exports.Pulse = Pulse;
@@ -1,5 +1,5 @@
1
1
  {
2
2
  "name": "@atlaskit/onboarding",
3
- "version": "10.3.3",
3
+ "version": "10.3.6",
4
4
  "sideEffects": false
5
5
  }
@@ -41,10 +41,10 @@ class SpotlightCard extends React.Component {
41
41
  } = parent({});
42
42
  return theme(() => ({ ...others,
43
43
  container: {
44
- background: `var(--ds-background-boldDiscovery-resting, ${P300})`,
45
- color: `var(--ds-text-onBold, ${N0})`,
44
+ background: `var(--ds-background-discovery-bold, ${P300})`,
45
+ color: `var(--ds-text-inverse, ${N0})`,
46
46
  width: `${Math.min(Math.max(width, 160), 600)}px`,
47
- boxShadow: isFlat ? undefined : `var(--ds-card, ${`0 4px 8px -2px ${N50A}, 0 0 1px ${N60A}`})`,
47
+ boxShadow: isFlat ? undefined : `var(--ds-shadow-raised, ${`0 4px 8px -2px ${N50A}, 0 0 1px ${N60A}`})`,
48
48
  ...container
49
49
  }
50
50
  }), {});
@@ -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.3.3";
10
+ const packageVersion = "10.3.6";
11
11
 
12
12
  class SpotlightDialog extends Component {
13
13
  constructor(...args) {
@@ -2,26 +2,26 @@ import * as colors from '@atlaskit/theme/colors';
2
2
  const spotlightTheme = {
3
3
  default: {
4
4
  background: {
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})`,
5
+ default: `var(--ds-background-neutral, ${colors.P400})`,
6
+ hover: `var(--ds-background-neutral-hovered, ${colors.P200})`,
7
+ active: `var(--ds-background-neutral-pressed, ${colors.P500})`,
8
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})`
9
+ selected: `var(--ds-background-neutral-pressed, ${colors.R500})`,
10
+ focus: `var(--ds-background-neutral, ${colors.P400})`
11
11
  },
12
12
  boxShadow: {
13
- focus: `0 0 0 2px ${`var(--ds-iconBorder-discovery, ${colors.P100})`}`
13
+ focus: `0 0 0 2px ${`var(--ds-border-discovery, ${colors.P100})`}`
14
14
  },
15
15
  color: {
16
- default: `var(--ds-text-onBold, ${colors.N0})`,
17
- hover: `var(--ds-text-onBold, ${colors.N0})`,
18
- active: `var(--ds-text-onBold, ${colors.N0})`,
16
+ default: `var(--ds-text-inverse, ${colors.N0})`,
17
+ hover: `var(--ds-text-inverse, ${colors.N0})`,
18
+ active: `var(--ds-text-inverse, ${colors.N0})`,
19
19
  disabled: {
20
20
  light: `var(--ds-text-disabled, ${colors.N0})`,
21
21
  dark: `var(--ds-text-disabled, ${colors.DN30})`
22
22
  },
23
- selected: `var(--ds-text-onBold, ${colors.N0})`,
24
- focus: `var(--ds-text-onBold, ${colors.N0})`
23
+ selected: `var(--ds-text-inverse, ${colors.N0})`,
24
+ focus: `var(--ds-text-inverse, ${colors.N0})`
25
25
  },
26
26
  outline: {
27
27
  focus: 'none'
@@ -30,28 +30,28 @@ const spotlightTheme = {
30
30
  subtle: {
31
31
  background: {
32
32
  default: 'none',
33
- hover: `var(--ds-background-subtleNeutral-hover, ${colors.P200})`,
34
- active: `var(--ds-background-subtleNeutral-pressed, ${colors.P500})`,
33
+ hover: `var(--ds-background-neutral-hovered, ${colors.P200})`,
34
+ active: `var(--ds-background-neutral-pressed, ${colors.P500})`,
35
35
  disabled: 'none',
36
36
  selected: {
37
- light: `var(--ds-background-selected-hover, ${colors.N700})`,
38
- dark: `var(--ds-background-selected-hover, ${colors.DN0})`
37
+ light: `var(--ds-background-brand-hovered, ${colors.N700})`,
38
+ dark: `var(--ds-background-brand-hovered, ${colors.DN0})`
39
39
  },
40
40
  focusSelected: {
41
- light: `var(--ds-background-selected-hover, ${colors.N700})`,
42
- dark: `var(--ds-background-selected-hover, ${colors.DN0})`
41
+ light: `var(--ds-background-brand-hovered, ${colors.N700})`,
42
+ dark: `var(--ds-background-brand-hovered, ${colors.DN0})`
43
43
  }
44
44
  },
45
45
  boxShadow: {
46
- focus: `0 0 0 2px ${`var(--ds-iconBorder-discovery, ${colors.P100})`}`
46
+ focus: `0 0 0 2px ${`var(--ds-icon-discovery, ${colors.P100})`}`
47
47
  },
48
48
  color: {
49
- default: `var(--ds-text-onBold, ${colors.N0})`,
50
- hover: `var(--ds-text-onBold, ${colors.N0})`,
51
- active: `var(--ds-text-onBold, ${colors.N0})`,
49
+ default: `var(--ds-text-inverse, ${colors.N0})`,
50
+ hover: `var(--ds-text-inverse, ${colors.N0})`,
51
+ active: `var(--ds-text-inverse, ${colors.N0})`,
52
52
  disabled: `var(--ds-text-disabled, ${colors.N0})`,
53
- selected: `var(--ds-text-onBold, ${colors.N0})`,
54
- focus: `var(--ds-text-onBold, ${colors.N0})`
53
+ selected: `var(--ds-text-inverse, ${colors.N0})`,
54
+ focus: `var(--ds-text-inverse, ${colors.N0})`
55
55
  },
56
56
  outline: {
57
57
  focus: 'none'
@@ -65,45 +65,45 @@ const spotlightTheme = {
65
65
  active: 'none'
66
66
  },
67
67
  boxShadow: {
68
- focus: `0 0 0 2px ${`var(--ds-iconBorder-discovery, ${colors.P100})`}`
68
+ focus: `0 0 0 2px ${`var(--ds-border-discovery, ${colors.P100})`}`
69
69
  },
70
70
  color: {
71
- default: `var(--ds-text-onBold, ${colors.N0})`,
72
- hover: `var(--ds-text-onBold, ${colors.P75})`,
73
- active: `var(--ds-text-onBold, ${colors.P100})`,
71
+ default: `var(--ds-text-inverse, ${colors.N0})`,
72
+ hover: `var(--ds-text-inverse, ${colors.P75})`,
73
+ active: `var(--ds-text-inverse, ${colors.P100})`,
74
74
  disabled: `var(--ds-text-discovery, ${colors.P500})`,
75
- selected: `var(--ds-text-selected, ${colors.N0})`,
76
- focus: `var(--ds-text-onBold, ${colors.N0})`
75
+ selected: `var(--ds-text-brand, ${colors.N0})`,
76
+ focus: `var(--ds-text-inverse, ${colors.N0})`
77
77
  }
78
78
  }
79
79
  };
80
80
  const modalTheme = {
81
81
  primary: {
82
82
  background: {
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})`,
83
+ default: `var(--ds-background-discovery-bold, ${colors.P400})`,
84
+ hover: `var(--ds-background-discovery-bold-hovered, ${colors.P200})`,
85
+ active: `var(--ds-background-discovery-bold-pressed, ${colors.P500})`,
86
86
  disabled: {
87
87
  light: `var(--ds-background-disabled, ${colors.N30})`,
88
88
  dark: `var(--ds-background-disabled, ${colors.DN70})`
89
89
  },
90
- selected: `var(--ds-background-selected-hover, ${colors.R500})`,
91
- focus: `var(--ds-background-boldDiscovery-hover, ${colors.P400})`
90
+ selected: `var(--ds-background-brand-hovered, ${colors.R500})`,
91
+ focus: `var(--ds-background-discovery-bold-hovered, ${colors.P400})`
92
92
  },
93
93
  boxShadow: {
94
94
  focus: {
95
- light: `0 0 0 2px ${`var(--ds-iconBorder-discovery, ${colors.P100})`}`,
96
- dark: `0 0 0 2px ${`var(--ds-iconBorder-discovery, ${colors.P100})`}`
95
+ light: `0 0 0 2px ${`var(--ds-border-discovery, ${colors.P100})`}`,
96
+ dark: `0 0 0 2px ${`var(--ds-border-discovery, ${colors.P100})`}`
97
97
  }
98
98
  },
99
99
  color: {
100
- default: `var(--ds-text-onBold, ${colors.N0})`,
100
+ default: `var(--ds-text-inverse, ${colors.N0})`,
101
101
  disabled: {
102
102
  light: `var(--ds-text-disabled, ${colors.N0})`,
103
103
  dark: `var(--ds-text-disabled, ${colors.DN30})`
104
104
  },
105
- selected: `var(--ds-text-selected, ${colors.N0})`,
106
- focus: `var(--ds-text-onBold, ${colors.N0})`
105
+ selected: `var(--ds-text-brand, ${colors.N0})`,
106
+ focus: `var(--ds-text-inverse, ${colors.N0})`
107
107
  }
108
108
  }
109
109
  };
@@ -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: `var(--ds-background-blanket, ${N100A})`,
8
- dark: `var(--ds-background-blanket, ${DN90A})`
7
+ light: `var(--ds-blanket, ${N100A})`,
8
+ dark: `var(--ds-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
 
@@ -6,11 +6,11 @@ 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 = `var(--ds-overlay, ${`0 0 0 2px ${P300}`})`;
9
+ const baseShadow = `0 0 0 2px ${`var(--ds-border-discovery, ${P300})`}`;
10
10
  const easing = 'cubic-bezier(0.55, 0.055, 0.675, 0.19)';
11
11
  const pulseKeyframes = keyframes({
12
12
  '0%, 33%': {
13
- boxShadow: `${baseShadow}, 0 0 0 rgba(101, 84, 192, 1)`
13
+ boxShadow: `${baseShadow}, 0 0 0 ${"var(--ds-border-discovery, rgba(101, 84, 192, 1))"}`
14
14
  },
15
15
  '66%, 100%': {
16
16
  boxShadow: `${baseShadow}, 0 0 0 10px rgba(101, 84, 192, 0.01)`
@@ -40,7 +40,8 @@ const Base = ({
40
40
  style: { ...style,
41
41
  backgroundColor: bgColor,
42
42
  borderRadius: radius ? `${radius}px` : undefined
43
- }
43
+ } // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
44
+
44
45
  }, props), children);
45
46
  /**
46
47
  * __Target inner__
@@ -55,7 +56,8 @@ export const TargetInner = ({
55
56
  children,
56
57
  pulse,
57
58
  ...props
58
- }) => jsx(Base, _extends({}, props, {
59
+ }) => // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
60
+ jsx(Base, _extends({}, props, {
59
61
  css: [pulse && animationStyles]
60
62
  }), children);
61
63
  const targetOverlayStyles = css({
@@ -93,7 +95,8 @@ export const Pulse = ({
93
95
  pulse = true,
94
96
  testId,
95
97
  ...props
96
- }) => jsx(Base, _extends({}, props, {
98
+ }) => // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
99
+ jsx(Base, _extends({}, props, {
97
100
  css: [pulse && animationStyles],
98
101
  testId: testId
99
102
  }), children);
@@ -1,5 +1,5 @@
1
1
  {
2
2
  "name": "@atlaskit/onboarding",
3
- "version": "10.3.3",
3
+ "version": "10.3.6",
4
4
  "sideEffects": false
5
5
  }
@@ -69,10 +69,10 @@ var SpotlightCard = /*#__PURE__*/function (_React$Component) {
69
69
  return _theme(function () {
70
70
  return _objectSpread(_objectSpread({}, others), {}, {
71
71
  container: _objectSpread({
72
- background: "var(--ds-background-boldDiscovery-resting, ".concat(P300, ")"),
73
- color: "var(--ds-text-onBold, ".concat(N0, ")"),
72
+ background: "var(--ds-background-discovery-bold, ".concat(P300, ")"),
73
+ color: "var(--ds-text-inverse, ".concat(N0, ")"),
74
74
  width: "".concat(Math.min(Math.max(width, 160), 600), "px"),
75
- boxShadow: isFlat ? undefined : "var(--ds-card, ".concat("0 4px 8px -2px ".concat(N50A, ", 0 0 1px ").concat(N60A), ")")
75
+ boxShadow: isFlat ? undefined : "var(--ds-shadow-raised, ".concat("0 4px 8px -2px ".concat(N50A, ", 0 0 1px ").concat(N60A), ")")
76
76
  }, container)
77
77
  });
78
78
  }, {});
@@ -24,7 +24,7 @@ import { DialogImage } from '../styled/dialog';
24
24
  import SpotlightCard from './spotlight-card';
25
25
  import ValueChanged from './value-changed';
26
26
  var packageName = "@atlaskit/onboarding";
27
- var packageVersion = "10.3.3";
27
+ var packageVersion = "10.3.6";
28
28
 
29
29
  var SpotlightDialog = /*#__PURE__*/function (_Component) {
30
30
  _inherits(SpotlightDialog, _Component);
@@ -12,26 +12,26 @@ import * as colors from '@atlaskit/theme/colors';
12
12
  var spotlightTheme = {
13
13
  default: {
14
14
  background: {
15
- default: "var(--ds-background-subtleNeutral-resting, ".concat(colors.P400, ")"),
16
- hover: "var(--ds-background-subtleNeutral-hover, ".concat(colors.P200, ")"),
17
- active: "var(--ds-background-subtleNeutral-pressed, ".concat(colors.P500, ")"),
15
+ default: "var(--ds-background-neutral, ".concat(colors.P400, ")"),
16
+ hover: "var(--ds-background-neutral-hovered, ".concat(colors.P200, ")"),
17
+ active: "var(--ds-background-neutral-pressed, ".concat(colors.P500, ")"),
18
18
  disabled: "var(--ds-background-disabled, ".concat(colors.P400, ")"),
19
- selected: "var(--ds-background-subtleNeutral-pressed, ".concat(colors.R500, ")"),
20
- focus: "var(--ds-background-subtleNeutral-resting, ".concat(colors.P400, ")")
19
+ selected: "var(--ds-background-neutral-pressed, ".concat(colors.R500, ")"),
20
+ focus: "var(--ds-background-neutral, ".concat(colors.P400, ")")
21
21
  },
22
22
  boxShadow: {
23
- focus: "0 0 0 2px ".concat("var(--ds-iconBorder-discovery, ".concat(colors.P100, ")"))
23
+ focus: "0 0 0 2px ".concat("var(--ds-border-discovery, ".concat(colors.P100, ")"))
24
24
  },
25
25
  color: {
26
- default: "var(--ds-text-onBold, ".concat(colors.N0, ")"),
27
- hover: "var(--ds-text-onBold, ".concat(colors.N0, ")"),
28
- active: "var(--ds-text-onBold, ".concat(colors.N0, ")"),
26
+ default: "var(--ds-text-inverse, ".concat(colors.N0, ")"),
27
+ hover: "var(--ds-text-inverse, ".concat(colors.N0, ")"),
28
+ active: "var(--ds-text-inverse, ".concat(colors.N0, ")"),
29
29
  disabled: {
30
30
  light: "var(--ds-text-disabled, ".concat(colors.N0, ")"),
31
31
  dark: "var(--ds-text-disabled, ".concat(colors.DN30, ")")
32
32
  },
33
- selected: "var(--ds-text-onBold, ".concat(colors.N0, ")"),
34
- focus: "var(--ds-text-onBold, ".concat(colors.N0, ")")
33
+ selected: "var(--ds-text-inverse, ".concat(colors.N0, ")"),
34
+ focus: "var(--ds-text-inverse, ".concat(colors.N0, ")")
35
35
  },
36
36
  outline: {
37
37
  focus: 'none'
@@ -40,28 +40,28 @@ var spotlightTheme = {
40
40
  subtle: {
41
41
  background: {
42
42
  default: 'none',
43
- hover: "var(--ds-background-subtleNeutral-hover, ".concat(colors.P200, ")"),
44
- active: "var(--ds-background-subtleNeutral-pressed, ".concat(colors.P500, ")"),
43
+ hover: "var(--ds-background-neutral-hovered, ".concat(colors.P200, ")"),
44
+ active: "var(--ds-background-neutral-pressed, ".concat(colors.P500, ")"),
45
45
  disabled: 'none',
46
46
  selected: {
47
- light: "var(--ds-background-selected-hover, ".concat(colors.N700, ")"),
48
- dark: "var(--ds-background-selected-hover, ".concat(colors.DN0, ")")
47
+ light: "var(--ds-background-brand-hovered, ".concat(colors.N700, ")"),
48
+ dark: "var(--ds-background-brand-hovered, ".concat(colors.DN0, ")")
49
49
  },
50
50
  focusSelected: {
51
- light: "var(--ds-background-selected-hover, ".concat(colors.N700, ")"),
52
- dark: "var(--ds-background-selected-hover, ".concat(colors.DN0, ")")
51
+ light: "var(--ds-background-brand-hovered, ".concat(colors.N700, ")"),
52
+ dark: "var(--ds-background-brand-hovered, ".concat(colors.DN0, ")")
53
53
  }
54
54
  },
55
55
  boxShadow: {
56
- focus: "0 0 0 2px ".concat("var(--ds-iconBorder-discovery, ".concat(colors.P100, ")"))
56
+ focus: "0 0 0 2px ".concat("var(--ds-icon-discovery, ".concat(colors.P100, ")"))
57
57
  },
58
58
  color: {
59
- default: "var(--ds-text-onBold, ".concat(colors.N0, ")"),
60
- hover: "var(--ds-text-onBold, ".concat(colors.N0, ")"),
61
- active: "var(--ds-text-onBold, ".concat(colors.N0, ")"),
59
+ default: "var(--ds-text-inverse, ".concat(colors.N0, ")"),
60
+ hover: "var(--ds-text-inverse, ".concat(colors.N0, ")"),
61
+ active: "var(--ds-text-inverse, ".concat(colors.N0, ")"),
62
62
  disabled: "var(--ds-text-disabled, ".concat(colors.N0, ")"),
63
- selected: "var(--ds-text-onBold, ".concat(colors.N0, ")"),
64
- focus: "var(--ds-text-onBold, ".concat(colors.N0, ")")
63
+ selected: "var(--ds-text-inverse, ".concat(colors.N0, ")"),
64
+ focus: "var(--ds-text-inverse, ".concat(colors.N0, ")")
65
65
  },
66
66
  outline: {
67
67
  focus: 'none'
@@ -75,45 +75,45 @@ var spotlightTheme = {
75
75
  active: 'none'
76
76
  },
77
77
  boxShadow: {
78
- focus: "0 0 0 2px ".concat("var(--ds-iconBorder-discovery, ".concat(colors.P100, ")"))
78
+ focus: "0 0 0 2px ".concat("var(--ds-border-discovery, ".concat(colors.P100, ")"))
79
79
  },
80
80
  color: {
81
- default: "var(--ds-text-onBold, ".concat(colors.N0, ")"),
82
- hover: "var(--ds-text-onBold, ".concat(colors.P75, ")"),
83
- active: "var(--ds-text-onBold, ".concat(colors.P100, ")"),
81
+ default: "var(--ds-text-inverse, ".concat(colors.N0, ")"),
82
+ hover: "var(--ds-text-inverse, ".concat(colors.P75, ")"),
83
+ active: "var(--ds-text-inverse, ".concat(colors.P100, ")"),
84
84
  disabled: "var(--ds-text-discovery, ".concat(colors.P500, ")"),
85
- selected: "var(--ds-text-selected, ".concat(colors.N0, ")"),
86
- focus: "var(--ds-text-onBold, ".concat(colors.N0, ")")
85
+ selected: "var(--ds-text-brand, ".concat(colors.N0, ")"),
86
+ focus: "var(--ds-text-inverse, ".concat(colors.N0, ")")
87
87
  }
88
88
  }
89
89
  };
90
90
  var modalTheme = {
91
91
  primary: {
92
92
  background: {
93
- default: "var(--ds-background-boldDiscovery-resting, ".concat(colors.P400, ")"),
94
- hover: "var(--ds-background-boldDiscovery-hover, ".concat(colors.P200, ")"),
95
- active: "var(--ds-background-boldDiscovery-pressed, ".concat(colors.P500, ")"),
93
+ default: "var(--ds-background-discovery-bold, ".concat(colors.P400, ")"),
94
+ hover: "var(--ds-background-discovery-bold-hovered, ".concat(colors.P200, ")"),
95
+ active: "var(--ds-background-discovery-bold-pressed, ".concat(colors.P500, ")"),
96
96
  disabled: {
97
97
  light: "var(--ds-background-disabled, ".concat(colors.N30, ")"),
98
98
  dark: "var(--ds-background-disabled, ".concat(colors.DN70, ")")
99
99
  },
100
- selected: "var(--ds-background-selected-hover, ".concat(colors.R500, ")"),
101
- focus: "var(--ds-background-boldDiscovery-hover, ".concat(colors.P400, ")")
100
+ selected: "var(--ds-background-brand-hovered, ".concat(colors.R500, ")"),
101
+ focus: "var(--ds-background-discovery-bold-hovered, ".concat(colors.P400, ")")
102
102
  },
103
103
  boxShadow: {
104
104
  focus: {
105
- light: "0 0 0 2px ".concat("var(--ds-iconBorder-discovery, ".concat(colors.P100, ")")),
106
- dark: "0 0 0 2px ".concat("var(--ds-iconBorder-discovery, ".concat(colors.P100, ")"))
105
+ light: "0 0 0 2px ".concat("var(--ds-border-discovery, ".concat(colors.P100, ")")),
106
+ dark: "0 0 0 2px ".concat("var(--ds-border-discovery, ".concat(colors.P100, ")"))
107
107
  }
108
108
  },
109
109
  color: {
110
- default: "var(--ds-text-onBold, ".concat(colors.N0, ")"),
110
+ default: "var(--ds-text-inverse, ".concat(colors.N0, ")"),
111
111
  disabled: {
112
112
  light: "var(--ds-text-disabled, ".concat(colors.N0, ")"),
113
113
  dark: "var(--ds-text-disabled, ".concat(colors.DN30, ")")
114
114
  },
115
- selected: "var(--ds-text-selected, ".concat(colors.N0, ")"),
116
- focus: "var(--ds-text-onBold, ".concat(colors.N0, ")")
115
+ selected: "var(--ds-text-brand, ".concat(colors.N0, ")"),
116
+ focus: "var(--ds-text-inverse, ".concat(colors.N0, ")")
117
117
  }
118
118
  }
119
119
  };
@@ -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: "var(--ds-background-blanket, ".concat(N100A, ")"),
14
- dark: "var(--ds-background-blanket, ".concat(DN90A, ")")
13
+ light: "var(--ds-blanket, ".concat(N100A, ")"),
14
+ dark: "var(--ds-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
 
@@ -15,11 +15,11 @@ import { P300 } from '@atlaskit/theme/colors';
15
15
  import { layers } from '@atlaskit/theme/constants';
16
16
  // NOTE:
17
17
  // Pulse color "rgb(101, 84, 192)" derived from "colors.P300"
18
- var baseShadow = "var(--ds-overlay, ".concat("0 0 0 2px ".concat(P300), ")");
18
+ var baseShadow = "0 0 0 2px ".concat("var(--ds-border-discovery, ".concat(P300, ")"));
19
19
  var easing = 'cubic-bezier(0.55, 0.055, 0.675, 0.19)';
20
20
  var pulseKeyframes = keyframes({
21
21
  '0%, 33%': {
22
- boxShadow: "".concat(baseShadow, ", 0 0 0 rgba(101, 84, 192, 1)")
22
+ boxShadow: "".concat(baseShadow, ", 0 0 0 ").concat("var(--ds-border-discovery, rgba(101, 84, 192, 1))")
23
23
  },
24
24
  '66%, 100%': {
25
25
  boxShadow: "".concat(baseShadow, ", 0 0 0 10px rgba(101, 84, 192, 0.01)")
@@ -50,7 +50,8 @@ var Base = function Base(_ref) {
50
50
  style: _objectSpread(_objectSpread({}, style), {}, {
51
51
  backgroundColor: bgColor,
52
52
  borderRadius: radius ? "".concat(radius, "px") : undefined
53
- })
53
+ }) // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
54
+
54
55
  }, props), children);
55
56
  };
56
57
  /**
@@ -67,9 +68,11 @@ export var TargetInner = function TargetInner(_ref2) {
67
68
  pulse = _ref2.pulse,
68
69
  props = _objectWithoutProperties(_ref2, _excluded2);
69
70
 
70
- return jsx(Base, _extends({}, props, {
71
- css: [pulse && animationStyles]
72
- }), children);
71
+ return (// eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
72
+ jsx(Base, _extends({}, props, {
73
+ css: [pulse && animationStyles]
74
+ }), children)
75
+ );
73
76
  };
74
77
  var targetOverlayStyles = css({
75
78
  width: '100%',
@@ -110,8 +113,10 @@ export var Pulse = function Pulse(_ref3) {
110
113
  testId = _ref3.testId,
111
114
  props = _objectWithoutProperties(_ref3, _excluded3);
112
115
 
113
- return jsx(Base, _extends({}, props, {
114
- css: [pulse && animationStyles],
115
- testId: testId
116
- }), children);
116
+ return (// eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
117
+ jsx(Base, _extends({}, props, {
118
+ css: [pulse && animationStyles],
119
+ testId: testId
120
+ }), children)
121
+ );
117
122
  };
@@ -1,5 +1,5 @@
1
1
  {
2
2
  "name": "@atlaskit/onboarding",
3
- "version": "10.3.3",
3
+ "version": "10.3.6",
4
4
  "sideEffects": false
5
5
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/onboarding",
3
- "version": "10.3.3",
3
+ "version": "10.3.6",
4
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/"
@@ -25,12 +25,12 @@
25
25
  },
26
26
  "dependencies": {
27
27
  "@atlaskit/analytics-next": "^8.0.0",
28
- "@atlaskit/button": "^16.0.0",
28
+ "@atlaskit/button": "^16.2.0",
29
29
  "@atlaskit/modal-dialog": "^12.2.0",
30
30
  "@atlaskit/popper": "^5.0.0",
31
31
  "@atlaskit/portal": "^4.0.0",
32
32
  "@atlaskit/theme": "^12.1.0",
33
- "@atlaskit/tokens": "^0.5.0",
33
+ "@atlaskit/tokens": "^0.7.0",
34
34
  "@babel/runtime": "^7.0.0",
35
35
  "@emotion/core": "^10.0.9",
36
36
  "exenv": "^1.2.2",
@@ -49,7 +49,7 @@
49
49
  "@atlaskit/avatar": "^20.5.0",
50
50
  "@atlaskit/docs": "*",
51
51
  "@atlaskit/icon": "^21.10.0",
52
- "@atlaskit/progress-indicator": "^9.1.0",
52
+ "@atlaskit/progress-indicator": "^9.2.0",
53
53
  "@atlaskit/select": "^15.2.2",
54
54
  "@atlaskit/ssr": "*",
55
55
  "@atlaskit/visual-regression": "*",