@atlaskit/onboarding 10.3.5 → 10.3.8

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,27 @@
1
1
  # @atlaskit/onboarding
2
2
 
3
+ ## 10.3.8
4
+
5
+ ### Patch Changes
6
+
7
+ - Updated dependencies
8
+
9
+ ## 10.3.7
10
+
11
+ ### Patch Changes
12
+
13
+ - [`ac9343c3ed4`](https://bitbucket.org/atlassian/atlassian-frontend/commits/ac9343c3ed4) - Replaces usage of deprecated design tokens. No visual or functional changes
14
+ - [`dcd92130cc4`](https://bitbucket.org/atlassian/atlassian-frontend/commits/dcd92130cc4) - Migrate deleted background accent tokens to replacements
15
+ - [`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.
16
+ - Updated dependencies
17
+
18
+ ## 10.3.6
19
+
20
+ ### Patch Changes
21
+
22
+ - [`bd38851d12f`](https://bitbucket.org/atlassian/atlassian-frontend/commits/bd38851d12f) - [ux] Fixed the missing Spotlight button border by updating the token usages.
23
+ - Updated dependencies
24
+
3
25
  ## 10.3.5
4
26
 
5
27
  ### Patch Changes
@@ -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.5";
57
+ var packageVersion = "10.3.8";
58
58
 
59
59
  var SpotlightDialog = /*#__PURE__*/function (_Component) {
60
60
  (0, _inherits2.default)(SpotlightDialog, _Component);
@@ -39,7 +39,7 @@ var spotlightTheme = {
39
39
  focus: "var(--ds-background-neutral, ".concat(colors.P400, ")")
40
40
  },
41
41
  boxShadow: {
42
- focus: "0 0 0 2px ".concat("var(--ds-icon-discovery, ".concat(colors.P100, ")"))
42
+ focus: "0 0 0 2px ".concat("var(--ds-border-discovery, ".concat(colors.P100, ")"))
43
43
  },
44
44
  color: {
45
45
  default: "var(--ds-text-inverse, ".concat(colors.N0, ")"),
@@ -63,12 +63,12 @@ var spotlightTheme = {
63
63
  active: "var(--ds-background-neutral-pressed, ".concat(colors.P500, ")"),
64
64
  disabled: 'none',
65
65
  selected: {
66
- light: "var(--ds-background-brand-hovered, ".concat(colors.N700, ")"),
67
- dark: "var(--ds-background-brand-hovered, ".concat(colors.DN0, ")")
66
+ light: "var(--ds-background-selected-hovered, ".concat(colors.N700, ")"),
67
+ dark: "var(--ds-background-selected-hovered, ".concat(colors.DN0, ")")
68
68
  },
69
69
  focusSelected: {
70
- light: "var(--ds-background-brand-hovered, ".concat(colors.N700, ")"),
71
- dark: "var(--ds-background-brand-hovered, ".concat(colors.DN0, ")")
70
+ light: "var(--ds-background-selected-hovered, ".concat(colors.N700, ")"),
71
+ dark: "var(--ds-background-selected-hovered, ".concat(colors.DN0, ")")
72
72
  }
73
73
  },
74
74
  boxShadow: {
@@ -94,14 +94,14 @@ var spotlightTheme = {
94
94
  active: 'none'
95
95
  },
96
96
  boxShadow: {
97
- focus: "0 0 0 2px ".concat("var(--ds-icon-discovery, ".concat(colors.P100, ")"))
97
+ focus: "0 0 0 2px ".concat("var(--ds-border-discovery, ".concat(colors.P100, ")"))
98
98
  },
99
99
  color: {
100
100
  default: "var(--ds-text-inverse, ".concat(colors.N0, ")"),
101
101
  hover: "var(--ds-text-inverse, ".concat(colors.P75, ")"),
102
102
  active: "var(--ds-text-inverse, ".concat(colors.P100, ")"),
103
103
  disabled: "var(--ds-text-discovery, ".concat(colors.P500, ")"),
104
- selected: "var(--ds-text-brand, ".concat(colors.N0, ")"),
104
+ selected: "var(--ds-text-selected, ".concat(colors.N0, ")"),
105
105
  focus: "var(--ds-text-inverse, ".concat(colors.N0, ")")
106
106
  }
107
107
  }
@@ -116,13 +116,13 @@ var modalTheme = {
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-brand-hovered, ".concat(colors.R500, ")"),
119
+ selected: "var(--ds-background-selected-hovered, ".concat(colors.R500, ")"),
120
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-icon-discovery, ".concat(colors.P100, ")")),
125
- dark: "0 0 0 2px ".concat("var(--ds-icon-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: {
@@ -131,7 +131,7 @@ var modalTheme = {
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-brand, ".concat(colors.N0, ")"),
134
+ selected: "var(--ds-text-selected, ".concat(colors.N0, ")"),
135
135
  focus: "var(--ds-text-inverse, ".concat(colors.N0, ")")
136
136
  }
137
137
  }
@@ -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-shadow-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)")
@@ -1,5 +1,5 @@
1
1
  {
2
2
  "name": "@atlaskit/onboarding",
3
- "version": "10.3.5",
3
+ "version": "10.3.8",
4
4
  "sideEffects": false
5
5
  }
@@ -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.5";
10
+ const packageVersion = "10.3.8";
11
11
 
12
12
  class SpotlightDialog extends Component {
13
13
  constructor(...args) {
@@ -10,7 +10,7 @@ const spotlightTheme = {
10
10
  focus: `var(--ds-background-neutral, ${colors.P400})`
11
11
  },
12
12
  boxShadow: {
13
- focus: `0 0 0 2px ${`var(--ds-icon-discovery, ${colors.P100})`}`
13
+ focus: `0 0 0 2px ${`var(--ds-border-discovery, ${colors.P100})`}`
14
14
  },
15
15
  color: {
16
16
  default: `var(--ds-text-inverse, ${colors.N0})`,
@@ -34,12 +34,12 @@ const spotlightTheme = {
34
34
  active: `var(--ds-background-neutral-pressed, ${colors.P500})`,
35
35
  disabled: 'none',
36
36
  selected: {
37
- light: `var(--ds-background-brand-hovered, ${colors.N700})`,
38
- dark: `var(--ds-background-brand-hovered, ${colors.DN0})`
37
+ light: `var(--ds-background-selected-hovered, ${colors.N700})`,
38
+ dark: `var(--ds-background-selected-hovered, ${colors.DN0})`
39
39
  },
40
40
  focusSelected: {
41
- light: `var(--ds-background-brand-hovered, ${colors.N700})`,
42
- dark: `var(--ds-background-brand-hovered, ${colors.DN0})`
41
+ light: `var(--ds-background-selected-hovered, ${colors.N700})`,
42
+ dark: `var(--ds-background-selected-hovered, ${colors.DN0})`
43
43
  }
44
44
  },
45
45
  boxShadow: {
@@ -65,14 +65,14 @@ const spotlightTheme = {
65
65
  active: 'none'
66
66
  },
67
67
  boxShadow: {
68
- focus: `0 0 0 2px ${`var(--ds-icon-discovery, ${colors.P100})`}`
68
+ focus: `0 0 0 2px ${`var(--ds-border-discovery, ${colors.P100})`}`
69
69
  },
70
70
  color: {
71
71
  default: `var(--ds-text-inverse, ${colors.N0})`,
72
72
  hover: `var(--ds-text-inverse, ${colors.P75})`,
73
73
  active: `var(--ds-text-inverse, ${colors.P100})`,
74
74
  disabled: `var(--ds-text-discovery, ${colors.P500})`,
75
- selected: `var(--ds-text-brand, ${colors.N0})`,
75
+ selected: `var(--ds-text-selected, ${colors.N0})`,
76
76
  focus: `var(--ds-text-inverse, ${colors.N0})`
77
77
  }
78
78
  }
@@ -87,13 +87,13 @@ const modalTheme = {
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-brand-hovered, ${colors.R500})`,
90
+ selected: `var(--ds-background-selected-hovered, ${colors.R500})`,
91
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-icon-discovery, ${colors.P100})`}`,
96
- dark: `0 0 0 2px ${`var(--ds-icon-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: {
@@ -102,7 +102,7 @@ const modalTheme = {
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-brand, ${colors.N0})`,
105
+ selected: `var(--ds-text-selected, ${colors.N0})`,
106
106
  focus: `var(--ds-text-inverse, ${colors.N0})`
107
107
  }
108
108
  }
@@ -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-shadow-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)`
@@ -1,5 +1,5 @@
1
1
  {
2
2
  "name": "@atlaskit/onboarding",
3
- "version": "10.3.5",
3
+ "version": "10.3.8",
4
4
  "sideEffects": false
5
5
  }
@@ -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.5";
27
+ var packageVersion = "10.3.8";
28
28
 
29
29
  var SpotlightDialog = /*#__PURE__*/function (_Component) {
30
30
  _inherits(SpotlightDialog, _Component);
@@ -20,7 +20,7 @@ var spotlightTheme = {
20
20
  focus: "var(--ds-background-neutral, ".concat(colors.P400, ")")
21
21
  },
22
22
  boxShadow: {
23
- focus: "0 0 0 2px ".concat("var(--ds-icon-discovery, ".concat(colors.P100, ")"))
23
+ focus: "0 0 0 2px ".concat("var(--ds-border-discovery, ".concat(colors.P100, ")"))
24
24
  },
25
25
  color: {
26
26
  default: "var(--ds-text-inverse, ".concat(colors.N0, ")"),
@@ -44,12 +44,12 @@ var spotlightTheme = {
44
44
  active: "var(--ds-background-neutral-pressed, ".concat(colors.P500, ")"),
45
45
  disabled: 'none',
46
46
  selected: {
47
- light: "var(--ds-background-brand-hovered, ".concat(colors.N700, ")"),
48
- dark: "var(--ds-background-brand-hovered, ".concat(colors.DN0, ")")
47
+ light: "var(--ds-background-selected-hovered, ".concat(colors.N700, ")"),
48
+ dark: "var(--ds-background-selected-hovered, ".concat(colors.DN0, ")")
49
49
  },
50
50
  focusSelected: {
51
- light: "var(--ds-background-brand-hovered, ".concat(colors.N700, ")"),
52
- dark: "var(--ds-background-brand-hovered, ".concat(colors.DN0, ")")
51
+ light: "var(--ds-background-selected-hovered, ".concat(colors.N700, ")"),
52
+ dark: "var(--ds-background-selected-hovered, ".concat(colors.DN0, ")")
53
53
  }
54
54
  },
55
55
  boxShadow: {
@@ -75,14 +75,14 @@ var spotlightTheme = {
75
75
  active: 'none'
76
76
  },
77
77
  boxShadow: {
78
- focus: "0 0 0 2px ".concat("var(--ds-icon-discovery, ".concat(colors.P100, ")"))
78
+ focus: "0 0 0 2px ".concat("var(--ds-border-discovery, ".concat(colors.P100, ")"))
79
79
  },
80
80
  color: {
81
81
  default: "var(--ds-text-inverse, ".concat(colors.N0, ")"),
82
82
  hover: "var(--ds-text-inverse, ".concat(colors.P75, ")"),
83
83
  active: "var(--ds-text-inverse, ".concat(colors.P100, ")"),
84
84
  disabled: "var(--ds-text-discovery, ".concat(colors.P500, ")"),
85
- selected: "var(--ds-text-brand, ".concat(colors.N0, ")"),
85
+ selected: "var(--ds-text-selected, ".concat(colors.N0, ")"),
86
86
  focus: "var(--ds-text-inverse, ".concat(colors.N0, ")")
87
87
  }
88
88
  }
@@ -97,13 +97,13 @@ var modalTheme = {
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-brand-hovered, ".concat(colors.R500, ")"),
100
+ selected: "var(--ds-background-selected-hovered, ".concat(colors.R500, ")"),
101
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-icon-discovery, ".concat(colors.P100, ")")),
106
- dark: "0 0 0 2px ".concat("var(--ds-icon-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: {
@@ -112,7 +112,7 @@ var modalTheme = {
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-brand, ".concat(colors.N0, ")"),
115
+ selected: "var(--ds-text-selected, ".concat(colors.N0, ")"),
116
116
  focus: "var(--ds-text-inverse, ".concat(colors.N0, ")")
117
117
  }
118
118
  }
@@ -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-shadow-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)")
@@ -1,5 +1,5 @@
1
1
  {
2
2
  "name": "@atlaskit/onboarding",
3
- "version": "10.3.5",
3
+ "version": "10.3.8",
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.5",
3
+ "version": "10.3.8",
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.6.0",
33
+ "@atlaskit/tokens": "^0.9.0",
34
34
  "@babel/runtime": "^7.0.0",
35
35
  "@emotion/core": "^10.0.9",
36
36
  "exenv": "^1.2.2",
@@ -60,7 +60,7 @@
60
60
  "raf-stub": "^2.0.1",
61
61
  "react-dom": "^16.8.0",
62
62
  "react-lorem-component": "^0.13.0",
63
- "typescript": "3.9.6"
63
+ "typescript": "3.9.10"
64
64
  },
65
65
  "techstack": {
66
66
  "@atlassian/frontend": {