@atlaskit/onboarding 10.3.0 → 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.
- package/CHANGELOG.md +8 -0
- package/dist/cjs/components/spotlight-card.js +3 -5
- package/dist/cjs/components/spotlight-dialog.js +1 -1
- package/dist/cjs/components/theme.js +49 -51
- package/dist/cjs/styled/blanket.js +2 -4
- package/dist/cjs/styled/target.js +1 -3
- package/dist/cjs/version.json +1 -1
- package/dist/es2019/components/spotlight-card.js +3 -4
- package/dist/es2019/components/spotlight-dialog.js +1 -1
- package/dist/es2019/components/theme.js +49 -50
- package/dist/es2019/styled/blanket.js +2 -3
- package/dist/es2019/styled/target.js +1 -2
- package/dist/es2019/version.json +1 -1
- package/dist/esm/components/spotlight-card.js +3 -4
- package/dist/esm/components/spotlight-dialog.js +1 -1
- package/dist/esm/components/theme.js +49 -50
- package/dist/esm/styled/blanket.js +2 -3
- package/dist/esm/styled/target.js +1 -2
- package/dist/esm/version.json +1 -1
- package/package.json +8 -5
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,13 @@
|
|
|
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
|
+
|
|
3
11
|
## 10.3.0
|
|
4
12
|
|
|
5
13
|
### Minor Changes
|
|
@@ -29,8 +29,6 @@ var _customThemeButton = require("@atlaskit/button/custom-theme-button");
|
|
|
29
29
|
|
|
30
30
|
var _colors = require("@atlaskit/theme/colors");
|
|
31
31
|
|
|
32
|
-
var _tokens = require("@atlaskit/tokens");
|
|
33
|
-
|
|
34
32
|
var _card = _interopRequireDefault(require("./card"));
|
|
35
33
|
|
|
36
34
|
var _theme2 = require("./theme");
|
|
@@ -89,10 +87,10 @@ var SpotlightCard = /*#__PURE__*/function (_React$Component) {
|
|
|
89
87
|
return _theme(function () {
|
|
90
88
|
return _objectSpread(_objectSpread({}, others), {}, {
|
|
91
89
|
container: _objectSpread({
|
|
92
|
-
background: (
|
|
93
|
-
color: (
|
|
90
|
+
background: "var(--ds-background-boldDiscovery-resting, ".concat(_colors.P300, ")"),
|
|
91
|
+
color: "var(--ds-text-onBold, ".concat(_colors.N0, ")"),
|
|
94
92
|
width: "".concat(Math.min(Math.max(width, 160), 600), "px"),
|
|
95
|
-
boxShadow: isFlat ? undefined : (
|
|
93
|
+
boxShadow: isFlat ? undefined : "var(--ds-card, ".concat("0 4px 8px -2px ".concat(_colors.N50A, ", 0 0 1px ").concat(_colors.N60A), ")")
|
|
96
94
|
}, container)
|
|
97
95
|
});
|
|
98
96
|
}, {});
|
|
@@ -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.3.
|
|
55
|
+
var packageVersion = "10.3.1";
|
|
56
56
|
|
|
57
57
|
var SpotlightDialog = /*#__PURE__*/function (_Component) {
|
|
58
58
|
(0, _inherits2.default)(SpotlightDialog, _Component);
|
|
@@ -17,8 +17,6 @@ var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
|
|
|
17
17
|
|
|
18
18
|
var colors = _interopRequireWildcard(require("@atlaskit/theme/colors"));
|
|
19
19
|
|
|
20
|
-
var _tokens = require("@atlaskit/tokens");
|
|
21
|
-
|
|
22
20
|
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
|
|
23
21
|
|
|
24
22
|
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof3(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
|
|
@@ -30,26 +28,26 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
|
|
|
30
28
|
var spotlightTheme = {
|
|
31
29
|
default: {
|
|
32
30
|
background: {
|
|
33
|
-
default: (
|
|
34
|
-
hover: (
|
|
35
|
-
active: (
|
|
36
|
-
disabled: (
|
|
37
|
-
selected: (
|
|
38
|
-
focus: (
|
|
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, ")")
|
|
39
37
|
},
|
|
40
38
|
boxShadow: {
|
|
41
|
-
focus: "0 0 0 2px ".concat((
|
|
39
|
+
focus: "0 0 0 2px ".concat("var(--ds-iconBorder-discovery, ".concat(colors.P100, ")"))
|
|
42
40
|
},
|
|
43
41
|
color: {
|
|
44
|
-
default: (
|
|
45
|
-
hover: (
|
|
46
|
-
active: (
|
|
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, ")"),
|
|
47
45
|
disabled: {
|
|
48
|
-
light: (
|
|
49
|
-
dark: (
|
|
46
|
+
light: "var(--ds-text-disabled, ".concat(colors.N0, ")"),
|
|
47
|
+
dark: "var(--ds-text-disabled, ".concat(colors.DN30, ")")
|
|
50
48
|
},
|
|
51
|
-
selected: (
|
|
52
|
-
focus: (
|
|
49
|
+
selected: "var(--ds-text-onBold, ".concat(colors.N0, ")"),
|
|
50
|
+
focus: "var(--ds-text-onBold, ".concat(colors.N0, ")")
|
|
53
51
|
},
|
|
54
52
|
outline: {
|
|
55
53
|
focus: 'none'
|
|
@@ -58,28 +56,28 @@ var spotlightTheme = {
|
|
|
58
56
|
subtle: {
|
|
59
57
|
background: {
|
|
60
58
|
default: 'none',
|
|
61
|
-
hover: (
|
|
62
|
-
active: (
|
|
59
|
+
hover: "var(--ds-background-subtleNeutral-hover, ".concat(colors.P200, ")"),
|
|
60
|
+
active: "var(--ds-background-subtleNeutral-pressed, ".concat(colors.P500, ")"),
|
|
63
61
|
disabled: 'none',
|
|
64
62
|
selected: {
|
|
65
|
-
light: (
|
|
66
|
-
dark: (
|
|
63
|
+
light: "var(--ds-background-selected-hover, ".concat(colors.N700, ")"),
|
|
64
|
+
dark: "var(--ds-background-selected-hover, ".concat(colors.DN0, ")")
|
|
67
65
|
},
|
|
68
66
|
focusSelected: {
|
|
69
|
-
light: (
|
|
70
|
-
dark: (
|
|
67
|
+
light: "var(--ds-background-selected-hover, ".concat(colors.N700, ")"),
|
|
68
|
+
dark: "var(--ds-background-selected-hover, ".concat(colors.DN0, ")")
|
|
71
69
|
}
|
|
72
70
|
},
|
|
73
71
|
boxShadow: {
|
|
74
|
-
focus: "0 0 0 2px ".concat((
|
|
72
|
+
focus: "0 0 0 2px ".concat("var(--ds-iconBorder-discovery, ".concat(colors.P100, ")"))
|
|
75
73
|
},
|
|
76
74
|
color: {
|
|
77
|
-
default: (
|
|
78
|
-
hover: (
|
|
79
|
-
active: (
|
|
80
|
-
disabled: (
|
|
81
|
-
selected: (
|
|
82
|
-
focus: (
|
|
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, ")")
|
|
83
81
|
},
|
|
84
82
|
outline: {
|
|
85
83
|
focus: 'none'
|
|
@@ -87,51 +85,51 @@ var spotlightTheme = {
|
|
|
87
85
|
},
|
|
88
86
|
'subtle-link': {
|
|
89
87
|
textDecoration: {
|
|
90
|
-
hover: "underline ".concat((
|
|
88
|
+
hover: "underline ".concat("var(--ds-text-discovery, ".concat(colors.P75, ")"))
|
|
91
89
|
},
|
|
92
90
|
textDecorationLine: {
|
|
93
91
|
active: 'none'
|
|
94
92
|
},
|
|
95
93
|
boxShadow: {
|
|
96
|
-
focus: "0 0 0 2px ".concat((
|
|
94
|
+
focus: "0 0 0 2px ".concat("var(--ds-iconBorder-discovery, ".concat(colors.P100, ")"))
|
|
97
95
|
},
|
|
98
96
|
color: {
|
|
99
|
-
default: (
|
|
100
|
-
hover: (
|
|
101
|
-
active: (
|
|
102
|
-
disabled: (
|
|
103
|
-
selected: (
|
|
104
|
-
focus: (
|
|
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, ")")
|
|
105
103
|
}
|
|
106
104
|
}
|
|
107
105
|
};
|
|
108
106
|
var modalTheme = {
|
|
109
107
|
primary: {
|
|
110
108
|
background: {
|
|
111
|
-
default: (
|
|
112
|
-
hover: (
|
|
113
|
-
active: (
|
|
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, ")"),
|
|
114
112
|
disabled: {
|
|
115
|
-
light: (
|
|
116
|
-
dark: (
|
|
113
|
+
light: "var(--ds-background-disabled, ".concat(colors.N30, ")"),
|
|
114
|
+
dark: "var(--ds-background-disabled, ".concat(colors.DN70, ")")
|
|
117
115
|
},
|
|
118
|
-
selected: (
|
|
119
|
-
focus: (
|
|
116
|
+
selected: "var(--ds-background-selected-hover, ".concat(colors.R500, ")"),
|
|
117
|
+
focus: "var(--ds-background-boldDiscovery-hover, ".concat(colors.P400, ")")
|
|
120
118
|
},
|
|
121
119
|
boxShadow: {
|
|
122
120
|
focus: {
|
|
123
|
-
light: "0 0 0 2px ".concat((
|
|
124
|
-
dark: "0 0 0 2px ".concat((
|
|
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, ")"))
|
|
125
123
|
}
|
|
126
124
|
},
|
|
127
125
|
color: {
|
|
128
|
-
default: (
|
|
126
|
+
default: "var(--ds-text-onBold, ".concat(colors.N0, ")"),
|
|
129
127
|
disabled: {
|
|
130
|
-
light: (
|
|
131
|
-
dark: (
|
|
128
|
+
light: "var(--ds-text-disabled, ".concat(colors.N0, ")"),
|
|
129
|
+
dark: "var(--ds-text-disabled, ".concat(colors.DN30, ")")
|
|
132
130
|
},
|
|
133
|
-
selected: (
|
|
134
|
-
focus: (
|
|
131
|
+
selected: "var(--ds-text-selected, ".concat(colors.N0, ")"),
|
|
132
|
+
focus: "var(--ds-text-onBold, ".concat(colors.N0, ")")
|
|
135
133
|
}
|
|
136
134
|
}
|
|
137
135
|
};
|
|
@@ -17,15 +17,13 @@ var _components = require("@atlaskit/theme/components");
|
|
|
17
17
|
|
|
18
18
|
var _constants = require("@atlaskit/theme/constants");
|
|
19
19
|
|
|
20
|
-
var _tokens = require("@atlaskit/tokens");
|
|
21
|
-
|
|
22
20
|
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
|
|
23
21
|
|
|
24
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; }
|
|
25
23
|
|
|
26
24
|
var backgroundColor = (0, _components.themed)({
|
|
27
|
-
light: (
|
|
28
|
-
dark: (
|
|
25
|
+
light: "var(--ds-background-blanket, ".concat(_colors.N100A, ")"),
|
|
26
|
+
dark: "var(--ds-background-blanket, ".concat(_colors.DN90A, ")")
|
|
29
27
|
}); // IE11 and Edge: z-index needed because fixed position calculates z-index relative
|
|
30
28
|
// to body instead of nearest stacking context (Portal in our case).
|
|
31
29
|
|
|
@@ -19,15 +19,13 @@ var _colors = require("@atlaskit/theme/colors");
|
|
|
19
19
|
|
|
20
20
|
var _constants = require("@atlaskit/theme/constants");
|
|
21
21
|
|
|
22
|
-
var _tokens = require("@atlaskit/tokens");
|
|
23
|
-
|
|
24
22
|
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
|
|
25
23
|
|
|
26
24
|
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; }
|
|
27
25
|
|
|
28
26
|
// NOTE:
|
|
29
27
|
// Pulse color "rgb(101, 84, 192)" derived from "colors.P300"
|
|
30
|
-
var baseShadow = (
|
|
28
|
+
var baseShadow = "var(--ds-overlay, ".concat("0 0 0 2px ".concat(_colors.P300), ")");
|
|
31
29
|
var easing = 'cubic-bezier(0.55, 0.055, 0.675, 0.19)';
|
|
32
30
|
var pulseKeyframes = (0, _core.keyframes)({
|
|
33
31
|
'0%, 33%': {
|
package/dist/cjs/version.json
CHANGED
|
@@ -3,7 +3,6 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
|
|
|
3
3
|
import React from 'react';
|
|
4
4
|
import { Theme as ButtonTheme } from '@atlaskit/button/custom-theme-button';
|
|
5
5
|
import { N0, N50A, N60A, P300 } from '@atlaskit/theme/colors';
|
|
6
|
-
import { token } from '@atlaskit/tokens';
|
|
7
6
|
import Card from './card';
|
|
8
7
|
import { spotlightButtonTheme } from './theme';
|
|
9
8
|
|
|
@@ -42,10 +41,10 @@ class SpotlightCard extends React.Component {
|
|
|
42
41
|
} = parent({});
|
|
43
42
|
return theme(() => ({ ...others,
|
|
44
43
|
container: {
|
|
45
|
-
background:
|
|
46
|
-
color:
|
|
44
|
+
background: `var(--ds-background-boldDiscovery-resting, ${P300})`,
|
|
45
|
+
color: `var(--ds-text-onBold, ${N0})`,
|
|
47
46
|
width: `${Math.min(Math.max(width, 160), 600)}px`,
|
|
48
|
-
boxShadow: isFlat ? undefined :
|
|
47
|
+
boxShadow: isFlat ? undefined : `var(--ds-card, ${`0 4px 8px -2px ${N50A}, 0 0 1px ${N60A}`})`,
|
|
49
48
|
...container
|
|
50
49
|
}
|
|
51
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.
|
|
10
|
+
const packageVersion = "10.3.1";
|
|
11
11
|
|
|
12
12
|
class SpotlightDialog extends Component {
|
|
13
13
|
constructor(...args) {
|
|
@@ -1,28 +1,27 @@
|
|
|
1
1
|
import * as colors from '@atlaskit/theme/colors';
|
|
2
|
-
import { token } from '@atlaskit/tokens';
|
|
3
2
|
const spotlightTheme = {
|
|
4
3
|
default: {
|
|
5
4
|
background: {
|
|
6
|
-
default:
|
|
7
|
-
hover:
|
|
8
|
-
active:
|
|
9
|
-
disabled:
|
|
10
|
-
selected:
|
|
11
|
-
focus:
|
|
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})`
|
|
12
11
|
},
|
|
13
12
|
boxShadow: {
|
|
14
|
-
focus: `0 0 0 2px ${
|
|
13
|
+
focus: `0 0 0 2px ${`var(--ds-iconBorder-discovery, ${colors.P100})`}`
|
|
15
14
|
},
|
|
16
15
|
color: {
|
|
17
|
-
default:
|
|
18
|
-
hover:
|
|
19
|
-
active:
|
|
16
|
+
default: `var(--ds-text-onBold, ${colors.N0})`,
|
|
17
|
+
hover: `var(--ds-text-onBold, ${colors.N0})`,
|
|
18
|
+
active: `var(--ds-text-onBold, ${colors.N0})`,
|
|
20
19
|
disabled: {
|
|
21
|
-
light:
|
|
22
|
-
dark:
|
|
20
|
+
light: `var(--ds-text-disabled, ${colors.N0})`,
|
|
21
|
+
dark: `var(--ds-text-disabled, ${colors.DN30})`
|
|
23
22
|
},
|
|
24
|
-
selected:
|
|
25
|
-
focus:
|
|
23
|
+
selected: `var(--ds-text-onBold, ${colors.N0})`,
|
|
24
|
+
focus: `var(--ds-text-onBold, ${colors.N0})`
|
|
26
25
|
},
|
|
27
26
|
outline: {
|
|
28
27
|
focus: 'none'
|
|
@@ -31,28 +30,28 @@ const spotlightTheme = {
|
|
|
31
30
|
subtle: {
|
|
32
31
|
background: {
|
|
33
32
|
default: 'none',
|
|
34
|
-
hover:
|
|
35
|
-
active:
|
|
33
|
+
hover: `var(--ds-background-subtleNeutral-hover, ${colors.P200})`,
|
|
34
|
+
active: `var(--ds-background-subtleNeutral-pressed, ${colors.P500})`,
|
|
36
35
|
disabled: 'none',
|
|
37
36
|
selected: {
|
|
38
|
-
light:
|
|
39
|
-
dark:
|
|
37
|
+
light: `var(--ds-background-selected-hover, ${colors.N700})`,
|
|
38
|
+
dark: `var(--ds-background-selected-hover, ${colors.DN0})`
|
|
40
39
|
},
|
|
41
40
|
focusSelected: {
|
|
42
|
-
light:
|
|
43
|
-
dark:
|
|
41
|
+
light: `var(--ds-background-selected-hover, ${colors.N700})`,
|
|
42
|
+
dark: `var(--ds-background-selected-hover, ${colors.DN0})`
|
|
44
43
|
}
|
|
45
44
|
},
|
|
46
45
|
boxShadow: {
|
|
47
|
-
focus: `0 0 0 2px ${
|
|
46
|
+
focus: `0 0 0 2px ${`var(--ds-iconBorder-discovery, ${colors.P100})`}`
|
|
48
47
|
},
|
|
49
48
|
color: {
|
|
50
|
-
default:
|
|
51
|
-
hover:
|
|
52
|
-
active:
|
|
53
|
-
disabled:
|
|
54
|
-
selected:
|
|
55
|
-
focus:
|
|
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})`
|
|
56
55
|
},
|
|
57
56
|
outline: {
|
|
58
57
|
focus: 'none'
|
|
@@ -60,51 +59,51 @@ const spotlightTheme = {
|
|
|
60
59
|
},
|
|
61
60
|
'subtle-link': {
|
|
62
61
|
textDecoration: {
|
|
63
|
-
hover: `underline ${
|
|
62
|
+
hover: `underline ${`var(--ds-text-discovery, ${colors.P75})`}`
|
|
64
63
|
},
|
|
65
64
|
textDecorationLine: {
|
|
66
65
|
active: 'none'
|
|
67
66
|
},
|
|
68
67
|
boxShadow: {
|
|
69
|
-
focus: `0 0 0 2px ${
|
|
68
|
+
focus: `0 0 0 2px ${`var(--ds-iconBorder-discovery, ${colors.P100})`}`
|
|
70
69
|
},
|
|
71
70
|
color: {
|
|
72
|
-
default:
|
|
73
|
-
hover:
|
|
74
|
-
active:
|
|
75
|
-
disabled:
|
|
76
|
-
selected:
|
|
77
|
-
focus:
|
|
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})`
|
|
78
77
|
}
|
|
79
78
|
}
|
|
80
79
|
};
|
|
81
80
|
const modalTheme = {
|
|
82
81
|
primary: {
|
|
83
82
|
background: {
|
|
84
|
-
default:
|
|
85
|
-
hover:
|
|
86
|
-
active:
|
|
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})`,
|
|
87
86
|
disabled: {
|
|
88
|
-
light:
|
|
89
|
-
dark:
|
|
87
|
+
light: `var(--ds-background-disabled, ${colors.N30})`,
|
|
88
|
+
dark: `var(--ds-background-disabled, ${colors.DN70})`
|
|
90
89
|
},
|
|
91
|
-
selected:
|
|
92
|
-
focus:
|
|
90
|
+
selected: `var(--ds-background-selected-hover, ${colors.R500})`,
|
|
91
|
+
focus: `var(--ds-background-boldDiscovery-hover, ${colors.P400})`
|
|
93
92
|
},
|
|
94
93
|
boxShadow: {
|
|
95
94
|
focus: {
|
|
96
|
-
light: `0 0 0 2px ${
|
|
97
|
-
dark: `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})`}`
|
|
98
97
|
}
|
|
99
98
|
},
|
|
100
99
|
color: {
|
|
101
|
-
default:
|
|
100
|
+
default: `var(--ds-text-onBold, ${colors.N0})`,
|
|
102
101
|
disabled: {
|
|
103
|
-
light:
|
|
104
|
-
dark:
|
|
102
|
+
light: `var(--ds-text-disabled, ${colors.N0})`,
|
|
103
|
+
dark: `var(--ds-text-disabled, ${colors.DN30})`
|
|
105
104
|
},
|
|
106
|
-
selected:
|
|
107
|
-
focus:
|
|
105
|
+
selected: `var(--ds-text-selected, ${colors.N0})`,
|
|
106
|
+
focus: `var(--ds-text-onBold, ${colors.N0})`
|
|
108
107
|
}
|
|
109
108
|
}
|
|
110
109
|
};
|
|
@@ -3,10 +3,9 @@ import { css, jsx } from '@emotion/core';
|
|
|
3
3
|
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
|
-
import { token } from '@atlaskit/tokens';
|
|
7
6
|
const backgroundColor = themed({
|
|
8
|
-
light:
|
|
9
|
-
dark:
|
|
7
|
+
light: `var(--ds-background-blanket, ${N100A})`,
|
|
8
|
+
dark: `var(--ds-background-blanket, ${DN90A})`
|
|
10
9
|
}); // IE11 and Edge: z-index needed because fixed position calculates z-index relative
|
|
11
10
|
// to body instead of nearest stacking context (Portal in our case).
|
|
12
11
|
|
|
@@ -4,10 +4,9 @@ import _extends from "@babel/runtime/helpers/extends";
|
|
|
4
4
|
import { css, jsx, keyframes } from '@emotion/core';
|
|
5
5
|
import { P300 } from '@atlaskit/theme/colors';
|
|
6
6
|
import { layers } from '@atlaskit/theme/constants';
|
|
7
|
-
import { token } from '@atlaskit/tokens';
|
|
8
7
|
// NOTE:
|
|
9
8
|
// Pulse color "rgb(101, 84, 192)" derived from "colors.P300"
|
|
10
|
-
const baseShadow =
|
|
9
|
+
const baseShadow = `var(--ds-overlay, ${`0 0 0 2px ${P300}`})`;
|
|
11
10
|
const easing = 'cubic-bezier(0.55, 0.055, 0.675, 0.19)';
|
|
12
11
|
const pulseKeyframes = keyframes({
|
|
13
12
|
'0%, 33%': {
|
package/dist/es2019/version.json
CHANGED
|
@@ -18,7 +18,6 @@ function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Re
|
|
|
18
18
|
import React from 'react';
|
|
19
19
|
import { Theme as ButtonTheme } from '@atlaskit/button/custom-theme-button';
|
|
20
20
|
import { N0, N50A, N60A, P300 } from '@atlaskit/theme/colors';
|
|
21
|
-
import { token } from '@atlaskit/tokens';
|
|
22
21
|
import Card from './card';
|
|
23
22
|
import { spotlightButtonTheme } from './theme';
|
|
24
23
|
|
|
@@ -69,10 +68,10 @@ var SpotlightCard = /*#__PURE__*/function (_React$Component) {
|
|
|
69
68
|
return _theme(function () {
|
|
70
69
|
return _objectSpread(_objectSpread({}, others), {}, {
|
|
71
70
|
container: _objectSpread({
|
|
72
|
-
background:
|
|
73
|
-
color:
|
|
71
|
+
background: "var(--ds-background-boldDiscovery-resting, ".concat(P300, ")"),
|
|
72
|
+
color: "var(--ds-text-onBold, ".concat(N0, ")"),
|
|
74
73
|
width: "".concat(Math.min(Math.max(width, 160), 600), "px"),
|
|
75
|
-
boxShadow: isFlat ? undefined :
|
|
74
|
+
boxShadow: isFlat ? undefined : "var(--ds-card, ".concat("0 4px 8px -2px ".concat(N50A, ", 0 0 1px ").concat(N60A), ")")
|
|
76
75
|
}, container)
|
|
77
76
|
});
|
|
78
77
|
}, {});
|
|
@@ -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.3.
|
|
26
|
+
var packageVersion = "10.3.1";
|
|
27
27
|
|
|
28
28
|
var SpotlightDialog = /*#__PURE__*/function (_Component) {
|
|
29
29
|
_inherits(SpotlightDialog, _Component);
|
|
@@ -7,30 +7,29 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
|
|
|
7
7
|
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
|
|
8
8
|
|
|
9
9
|
import * as colors from '@atlaskit/theme/colors';
|
|
10
|
-
import { token } from '@atlaskit/tokens';
|
|
11
10
|
var spotlightTheme = {
|
|
12
11
|
default: {
|
|
13
12
|
background: {
|
|
14
|
-
default:
|
|
15
|
-
hover:
|
|
16
|
-
active:
|
|
17
|
-
disabled:
|
|
18
|
-
selected:
|
|
19
|
-
focus:
|
|
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, ")")
|
|
20
19
|
},
|
|
21
20
|
boxShadow: {
|
|
22
|
-
focus: "0 0 0 2px ".concat(
|
|
21
|
+
focus: "0 0 0 2px ".concat("var(--ds-iconBorder-discovery, ".concat(colors.P100, ")"))
|
|
23
22
|
},
|
|
24
23
|
color: {
|
|
25
|
-
default:
|
|
26
|
-
hover:
|
|
27
|
-
active:
|
|
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, ")"),
|
|
28
27
|
disabled: {
|
|
29
|
-
light:
|
|
30
|
-
dark:
|
|
28
|
+
light: "var(--ds-text-disabled, ".concat(colors.N0, ")"),
|
|
29
|
+
dark: "var(--ds-text-disabled, ".concat(colors.DN30, ")")
|
|
31
30
|
},
|
|
32
|
-
selected:
|
|
33
|
-
focus:
|
|
31
|
+
selected: "var(--ds-text-onBold, ".concat(colors.N0, ")"),
|
|
32
|
+
focus: "var(--ds-text-onBold, ".concat(colors.N0, ")")
|
|
34
33
|
},
|
|
35
34
|
outline: {
|
|
36
35
|
focus: 'none'
|
|
@@ -39,28 +38,28 @@ var spotlightTheme = {
|
|
|
39
38
|
subtle: {
|
|
40
39
|
background: {
|
|
41
40
|
default: 'none',
|
|
42
|
-
hover:
|
|
43
|
-
active:
|
|
41
|
+
hover: "var(--ds-background-subtleNeutral-hover, ".concat(colors.P200, ")"),
|
|
42
|
+
active: "var(--ds-background-subtleNeutral-pressed, ".concat(colors.P500, ")"),
|
|
44
43
|
disabled: 'none',
|
|
45
44
|
selected: {
|
|
46
|
-
light:
|
|
47
|
-
dark:
|
|
45
|
+
light: "var(--ds-background-selected-hover, ".concat(colors.N700, ")"),
|
|
46
|
+
dark: "var(--ds-background-selected-hover, ".concat(colors.DN0, ")")
|
|
48
47
|
},
|
|
49
48
|
focusSelected: {
|
|
50
|
-
light:
|
|
51
|
-
dark:
|
|
49
|
+
light: "var(--ds-background-selected-hover, ".concat(colors.N700, ")"),
|
|
50
|
+
dark: "var(--ds-background-selected-hover, ".concat(colors.DN0, ")")
|
|
52
51
|
}
|
|
53
52
|
},
|
|
54
53
|
boxShadow: {
|
|
55
|
-
focus: "0 0 0 2px ".concat(
|
|
54
|
+
focus: "0 0 0 2px ".concat("var(--ds-iconBorder-discovery, ".concat(colors.P100, ")"))
|
|
56
55
|
},
|
|
57
56
|
color: {
|
|
58
|
-
default:
|
|
59
|
-
hover:
|
|
60
|
-
active:
|
|
61
|
-
disabled:
|
|
62
|
-
selected:
|
|
63
|
-
focus:
|
|
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, ")")
|
|
64
63
|
},
|
|
65
64
|
outline: {
|
|
66
65
|
focus: 'none'
|
|
@@ -68,51 +67,51 @@ var spotlightTheme = {
|
|
|
68
67
|
},
|
|
69
68
|
'subtle-link': {
|
|
70
69
|
textDecoration: {
|
|
71
|
-
hover: "underline ".concat(
|
|
70
|
+
hover: "underline ".concat("var(--ds-text-discovery, ".concat(colors.P75, ")"))
|
|
72
71
|
},
|
|
73
72
|
textDecorationLine: {
|
|
74
73
|
active: 'none'
|
|
75
74
|
},
|
|
76
75
|
boxShadow: {
|
|
77
|
-
focus: "0 0 0 2px ".concat(
|
|
76
|
+
focus: "0 0 0 2px ".concat("var(--ds-iconBorder-discovery, ".concat(colors.P100, ")"))
|
|
78
77
|
},
|
|
79
78
|
color: {
|
|
80
|
-
default:
|
|
81
|
-
hover:
|
|
82
|
-
active:
|
|
83
|
-
disabled:
|
|
84
|
-
selected:
|
|
85
|
-
focus:
|
|
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, ")")
|
|
86
85
|
}
|
|
87
86
|
}
|
|
88
87
|
};
|
|
89
88
|
var modalTheme = {
|
|
90
89
|
primary: {
|
|
91
90
|
background: {
|
|
92
|
-
default:
|
|
93
|
-
hover:
|
|
94
|
-
active:
|
|
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, ")"),
|
|
95
94
|
disabled: {
|
|
96
|
-
light:
|
|
97
|
-
dark:
|
|
95
|
+
light: "var(--ds-background-disabled, ".concat(colors.N30, ")"),
|
|
96
|
+
dark: "var(--ds-background-disabled, ".concat(colors.DN70, ")")
|
|
98
97
|
},
|
|
99
|
-
selected:
|
|
100
|
-
focus:
|
|
98
|
+
selected: "var(--ds-background-selected-hover, ".concat(colors.R500, ")"),
|
|
99
|
+
focus: "var(--ds-background-boldDiscovery-hover, ".concat(colors.P400, ")")
|
|
101
100
|
},
|
|
102
101
|
boxShadow: {
|
|
103
102
|
focus: {
|
|
104
|
-
light: "0 0 0 2px ".concat(
|
|
105
|
-
dark: "0 0 0 2px ".concat(
|
|
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, ")"))
|
|
106
105
|
}
|
|
107
106
|
},
|
|
108
107
|
color: {
|
|
109
|
-
default:
|
|
108
|
+
default: "var(--ds-text-onBold, ".concat(colors.N0, ")"),
|
|
110
109
|
disabled: {
|
|
111
|
-
light:
|
|
112
|
-
dark:
|
|
110
|
+
light: "var(--ds-text-disabled, ".concat(colors.N0, ")"),
|
|
111
|
+
dark: "var(--ds-text-disabled, ".concat(colors.DN30, ")")
|
|
113
112
|
},
|
|
114
|
-
selected:
|
|
115
|
-
focus:
|
|
113
|
+
selected: "var(--ds-text-selected, ".concat(colors.N0, ")"),
|
|
114
|
+
focus: "var(--ds-text-onBold, ".concat(colors.N0, ")")
|
|
116
115
|
}
|
|
117
116
|
}
|
|
118
117
|
};
|
|
@@ -9,10 +9,9 @@ import { css, jsx } from '@emotion/core';
|
|
|
9
9
|
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
|
-
import { token } from '@atlaskit/tokens';
|
|
13
12
|
var backgroundColor = themed({
|
|
14
|
-
light:
|
|
15
|
-
dark:
|
|
13
|
+
light: "var(--ds-background-blanket, ".concat(N100A, ")"),
|
|
14
|
+
dark: "var(--ds-background-blanket, ".concat(DN90A, ")")
|
|
16
15
|
}); // IE11 and Edge: z-index needed because fixed position calculates z-index relative
|
|
17
16
|
// to body instead of nearest stacking context (Portal in our case).
|
|
18
17
|
|
|
@@ -10,10 +10,9 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
|
|
|
10
10
|
import { css, jsx, keyframes } from '@emotion/core';
|
|
11
11
|
import { P300 } from '@atlaskit/theme/colors';
|
|
12
12
|
import { layers } from '@atlaskit/theme/constants';
|
|
13
|
-
import { token } from '@atlaskit/tokens';
|
|
14
13
|
// NOTE:
|
|
15
14
|
// Pulse color "rgb(101, 84, 192)" derived from "colors.P300"
|
|
16
|
-
var baseShadow =
|
|
15
|
+
var baseShadow = "var(--ds-overlay, ".concat("0 0 0 2px ".concat(P300), ")");
|
|
17
16
|
var easing = 'cubic-bezier(0.55, 0.055, 0.675, 0.19)';
|
|
18
17
|
var pulseKeyframes = keyframes({
|
|
19
18
|
'0%, 33%': {
|
package/dist/esm/version.json
CHANGED
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@atlaskit/onboarding",
|
|
3
|
-
"version": "10.3.
|
|
3
|
+
"version": "10.3.1",
|
|
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/"
|
|
@@ -27,16 +27,16 @@
|
|
|
27
27
|
"dependencies": {
|
|
28
28
|
"@atlaskit/analytics-next": "^8.0.0",
|
|
29
29
|
"@atlaskit/button": "^16.0.0",
|
|
30
|
-
"@atlaskit/modal-dialog": "^12.
|
|
30
|
+
"@atlaskit/modal-dialog": "^12.2.0",
|
|
31
31
|
"@atlaskit/popper": "^5.0.0",
|
|
32
32
|
"@atlaskit/portal": "^4.0.0",
|
|
33
33
|
"@atlaskit/theme": "^12.0.0",
|
|
34
|
-
"@atlaskit/tokens": "^0.
|
|
34
|
+
"@atlaskit/tokens": "^0.4.0",
|
|
35
35
|
"@babel/runtime": "^7.0.0",
|
|
36
36
|
"@emotion/core": "^10.0.9",
|
|
37
37
|
"exenv": "^1.2.2",
|
|
38
38
|
"memoize-one": "^6.0.0",
|
|
39
|
-
"react-focus-lock": "^
|
|
39
|
+
"react-focus-lock": "^2.5.2",
|
|
40
40
|
"react-node-resolver": "^1.0.1",
|
|
41
41
|
"react-scrolllock": "^5.0.1",
|
|
42
42
|
"react-transition-group": "^4.4.1",
|
|
@@ -71,7 +71,10 @@
|
|
|
71
71
|
"@repo/internal": {
|
|
72
72
|
"analytics": "analytics-next",
|
|
73
73
|
"theming": "tokens",
|
|
74
|
-
"styling":
|
|
74
|
+
"styling": [
|
|
75
|
+
"static",
|
|
76
|
+
"emotion"
|
|
77
|
+
],
|
|
75
78
|
"design-system": "v1",
|
|
76
79
|
"deprecation": "no-deprecated-imports"
|
|
77
80
|
}
|