@atlaskit/onboarding 10.2.6 → 10.3.3

package/CHANGELOG.md

@@ -1,5 +1,37 @@
 # @atlaskit/onboarding
 
+## 10.3.3
+
+### Patch Changes
+
+- Updated dependencies
+
+## 10.3.2
+
+### Patch Changes
+
+- [`9a5740d1ec3`](https://bitbucket.org/atlassian/atlassian-frontend/commits/9a5740d1ec3) - [ux] The `pulse` prop now works correctly for `<SpotlightPulse />`. Previously, it was applying the pulse to the `SpotlightPulse` target regardless of the `pulse` value. Now it checks the value of `pulse` and applies the animation accordingly.
+
+## 10.3.1
+
+### Patch Changes
+
+- [`3fced6aa641`](https://bitbucket.org/atlassian/atlassian-frontend/commits/3fced6aa641) - Bumped `react-focus-lock` to version `^2.2.1`.
+- [`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.
+- Updated dependencies
+
+## 10.3.0
+
+### Minor Changes
+
+- [`50081f13de7`](https://bitbucket.org/atlassian/atlassian-frontend/commits/50081f13de7) - Instrumented `@atlaskit/onboarding` with the new theming package, `@atlaskit/tokens`.
+
+  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.
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 10.2.6
 
 ### Patch Changes

package/dist/cjs/components/animation.js

@@ -13,9 +13,9 @@ var _react = _interopRequireDefault(require("react"));
 
 var _reactTransitionGroup = require("react-transition-group");
 
-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; }
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
-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; }
+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; }
 
 var duration = {
   enter: 0,

package/dist/cjs/components/card.js

@@ -25,7 +25,8 @@ var _typography = require("@atlaskit/theme/typography");
 
 var _dialog = require("../styled/dialog");
 
-/** @jsx jsx */
+var _excluded = ["children", "theme"],
+    _excluded2 = ["text", "key"];
 var gridSize = (0, _constants.gridSize)(); // eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
 
 var lightH600Styles = (0, _core.css)((0, _typography.h600)({
@@ -43,7 +44,7 @@ var darkH600Styles = (0, _core.css)((0, _typography.h600)({
 var Container = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
   var children = _ref.children,
       theme = _ref.theme,
-      props = (0, _objectWithoutProperties2.default)(_ref, ["children", "theme"]);
+      props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   return (// eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
     (0, _core.jsx)("div", (0, _extends2.default)({
       css: theme,
@@ -146,7 +147,7 @@ var Card = /*#__PURE__*/_react.default.forwardRef(function (_ref4, ref) {
       }, heading), headingAfterElement) : null, children, actions.length > 0 || actionsBeforeElement ? (0, _core.jsx)(Footer, null, actionsBeforeElement || (0, _core.jsx)("span", null), (0, _core.jsx)(_dialog.DialogActionItemContainer, null, actions.map(function (_ref6, idx) {
         var text = _ref6.text,
             key = _ref6.key,
-            rest = (0, _objectWithoutProperties2.default)(_ref6, ["text", "key"]);
+            rest = (0, _objectWithoutProperties2.default)(_ref6, _excluded2);
         return (0, _core.jsx)(_dialog.DialogActionItem, {
           key: key || (typeof text === 'string' ? text : "".concat(idx))
         }, (0, _core.jsx)(_customThemeButton.default, rest, text));

package/dist/cjs/components/index.js

@@ -41,10 +41,10 @@ Object.defineProperty(exports, "SpotlightTransition", {
     return _spotlightTransition.default;
   }
 });
-Object.defineProperty(exports, "useSpotlight", {
+Object.defineProperty(exports, "modalButtonTheme", {
   enumerable: true,
   get: function get() {
-    return _useSpotlight.default;
+    return _theme.modalButtonTheme;
   }
 });
 Object.defineProperty(exports, "spotlightButtonTheme", {
@@ -53,10 +53,10 @@ Object.defineProperty(exports, "spotlightButtonTheme", {
     return _theme.spotlightButtonTheme;
   }
 });
-Object.defineProperty(exports, "modalButtonTheme", {
+Object.defineProperty(exports, "useSpotlight", {
   enumerable: true,
   get: function get() {
-    return _theme.modalButtonTheme;
+    return _useSpotlight.default;
   }
 });
 

package/dist/cjs/components/modal.js

@@ -39,6 +39,9 @@ var _modal = require("../styled/modal");
 
 var _theme = require("./theme");
 
+var _excluded = ["text", "key"],
+    _excluded2 = ["actions", "children", "heading"];
+
 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); }
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(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; }
@@ -100,7 +103,7 @@ var OnboardingModal = /*#__PURE__*/function (_Component) {
         }, actionList.map(function (_ref, idx) {
           var text = _ref.text,
               key = _ref.key,
-              rest = (0, _objectWithoutProperties2.default)(_ref, ["text", "key"]);
+              rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
           var variant = idx ? 'subtle-link' : 'primary';
           return (0, _core.jsx)(_modal.ModalActionItem, {
             key: key || (typeof text === 'string' ? text : "".concat(idx))
@@ -123,7 +126,7 @@ var OnboardingModal = /*#__PURE__*/function (_Component) {
           actions = _this$props.actions,
           children = _this$props.children,
           heading = _this$props.heading,
-          props = (0, _objectWithoutProperties2.default)(_this$props, ["actions", "children", "heading"]);
+          props = (0, _objectWithoutProperties2.default)(_this$props, _excluded2);
       var Header = this.headerComponent(this.props);
       var Footer = this.footerComponent(this.props);
       return (0, _core.jsx)(_modalDialog.default, (0, _extends2.default)({

package/dist/cjs/components/spotlight-card.js

@@ -33,9 +33,11 @@ var _card = _interopRequireDefault(require("./card"));
 
 var _theme2 = require("./theme");
 
-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; }
+var _excluded = ["container"];
 
-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; }
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+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; }
 
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(this, result); }; }
 
@@ -82,15 +84,15 @@ var SpotlightCard = /*#__PURE__*/function (_React$Component) {
         theme: function theme(parent) {
           var _parent = parent({}),
               container = _parent.container,
-              others = (0, _objectWithoutProperties2.default)(_parent, ["container"]);
+              others = (0, _objectWithoutProperties2.default)(_parent, _excluded);
 
           return _theme(function () {
             return _objectSpread(_objectSpread({}, others), {}, {
               container: _objectSpread({
-                background: _colors.P300,
-                color: _colors.N0,
+                background: "var(--ds-background-boldDiscovery-resting, ".concat(_colors.P300, ")"),
+                color: "var(--ds-text-onBold, ".concat(_colors.N0, ")"),
                 width: "".concat(Math.min(Math.max(width, 160), 600), "px"),
-                boxShadow: isFlat ? undefined : "0 4px 8px -2px ".concat(_colors.N50A, ", 0 0 1px ").concat(_colors.N60A)
+                boxShadow: isFlat ? undefined : "var(--ds-card, ".concat("0 4px 8px -2px ".concat(_colors.N50A, ", 0 0 1px ").concat(_colors.N60A), ")")
               }, container)
             });
           }, {});

package/dist/cjs/components/spotlight-dialog.js

@@ -39,20 +39,22 @@ var _spotlightCard = _interopRequireDefault(require("./spotlight-card"));
 
 var _valueChanged = _interopRequireDefault(require("./value-changed"));
 
+var _excluded = ["container"];
+
 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); }
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(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; }
 
-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; }
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
-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; }
+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; }
 
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(this, result); }; }
 
 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; } }
 
 var packageName = "@atlaskit/onboarding";
-var packageVersion = "10.2.6";
+var packageVersion = "10.3.3";
 
 var SpotlightDialog = /*#__PURE__*/function (_Component) {
   (0, _inherits2.default)(SpotlightDialog, _Component);
@@ -159,7 +161,7 @@ var SpotlightDialog = /*#__PURE__*/function (_Component) {
           theme: function theme(parent) {
             var _parent = parent({}),
                 container = _parent.container,
-                others = (0, _objectWithoutProperties2.default)(_parent, ["container"]);
+                others = (0, _objectWithoutProperties2.default)(_parent, _excluded);
 
             return _objectSpread(_objectSpread({}, others), {}, {
               container: _objectSpread(_objectSpread(_objectSpread({}, container), style), animationStyles)

package/dist/cjs/components/spotlight-inner.js

@@ -47,9 +47,9 @@ var _spotlightDialog = _interopRequireDefault(require("./spotlight-dialog"));
 
 var _spotlightTransition = require("./spotlight-transition");
 
-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; }
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
-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; }
+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; }
 
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(this, result); }; }
 

package/dist/cjs/components/spotlight-manager.js

@@ -7,7 +7,7 @@ var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = exports.SpotlightConsumer = exports.SpotlightContext = exports.TargetConsumer = void 0;
+exports.default = exports.TargetConsumer = exports.SpotlightContext = exports.SpotlightConsumer = void 0;
 
 var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
 
@@ -39,9 +39,9 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(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; }
 
-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; }
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
-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; }
+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; }
 
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(this, result); }; }
 

package/dist/cjs/components/spotlight.js

@@ -17,6 +17,8 @@ var _spotlightInner = _interopRequireDefault(require("./spotlight-inner"));
 
 var _spotlightManager = require("./spotlight-manager");
 
+var _excluded = ["dialogWidth", "pulse", "testId", "targetNode", "target"];
+
 /**
  * __Spotlight__
  *
@@ -35,7 +37,7 @@ var Spotlight = function Spotlight(_ref) {
       testId = _ref$testId === void 0 ? 'spotlight' : _ref$testId,
       targetNode = _ref.targetNode,
       target = _ref.target,
-      rest = (0, _objectWithoutProperties2.default)(_ref, ["dialogWidth", "pulse", "testId", "targetNode", "target"]);
+      rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   return /*#__PURE__*/_react.default.createElement(_spotlightManager.SpotlightConsumer, null, function (_ref2) {
     var opened = _ref2.opened,
         closed = _ref2.closed,

package/dist/cjs/components/theme.js

@@ -7,7 +7,7 @@ var _typeof3 = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.modalButtonTheme = exports.spotlightButtonTheme = void 0;
+exports.spotlightButtonTheme = exports.modalButtonTheme = void 0;
 
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 
@@ -17,245 +17,122 @@ var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
 
 var colors = _interopRequireWildcard(require("@atlaskit/theme/colors"));
 
+var _excluded = ["buttonStyles"],
+    _excluded2 = ["buttonStyles"];
+
 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); }
 
 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; }
 
-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; }
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
-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; }
+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; }
 
 var spotlightTheme = {
   default: {
     background: {
-      default: {
-        light: colors.P400,
-        dark: colors.P400
-      },
-      hover: {
-        light: colors.P200,
-        dark: colors.P200
-      },
-      active: {
-        light: colors.P500,
-        dark: colors.P500
-      },
-      disabled: {
-        light: colors.P400,
-        dark: colors.P400
-      },
-      selected: {
-        light: colors.R500,
-        dark: colors.R500
-      },
-      focus: {
-        light: colors.P400,
-        dark: colors.P400
-      }
+      default: "var(--ds-background-subtleNeutral-resting, ".concat(colors.P400, ")"),
+      hover: "var(--ds-background-subtleNeutral-hover, ".concat(colors.P200, ")"),
+      active: "var(--ds-background-subtleNeutral-pressed, ".concat(colors.P500, ")"),
+      disabled: "var(--ds-background-disabled, ".concat(colors.P400, ")"),
+      selected: "var(--ds-background-subtleNeutral-pressed, ".concat(colors.R500, ")"),
+      focus: "var(--ds-background-subtleNeutral-resting, ".concat(colors.P400, ")")
     },
     boxShadow: {
-      focus: {
-        light: "".concat(colors.P100, " 0 0 0 2px"),
-        dark: "".concat(colors.P100, " 0 0 0 2px")
-      }
+      focus: "0 0 0 2px ".concat("var(--ds-iconBorder-discovery, ".concat(colors.P100, ")"))
     },
     color: {
-      default: {
-        light: colors.N0,
-        dark: colors.N0
-      },
-      hover: {
-        light: colors.N0,
-        dark: colors.N0
-      },
-      active: {
-        light: colors.N0,
-        dark: colors.N0
-      },
+      default: "var(--ds-text-onBold, ".concat(colors.N0, ")"),
+      hover: "var(--ds-text-onBold, ".concat(colors.N0, ")"),
+      active: "var(--ds-text-onBold, ".concat(colors.N0, ")"),
       disabled: {
-        light: colors.N0,
-        dark: colors.DN30
-      },
-      selected: {
-        light: colors.N0,
-        dark: colors.N0
+        light: "var(--ds-text-disabled, ".concat(colors.N0, ")"),
+        dark: "var(--ds-text-disabled, ".concat(colors.DN30, ")")
       },
-      focus: {
-        light: colors.N0,
-        dark: colors.N0
-      }
+      selected: "var(--ds-text-onBold, ".concat(colors.N0, ")"),
+      focus: "var(--ds-text-onBold, ".concat(colors.N0, ")")
     },
     outline: {
-      focus: {
-        light: 'none',
-        dark: 'none'
-      }
+      focus: 'none'
     }
   },
   subtle: {
     background: {
-      default: {
-        light: 'none',
-        dark: 'none'
-      },
-      hover: {
-        light: colors.P200,
-        dark: colors.P200
-      },
-      active: {
-        light: colors.P500,
-        dark: colors.P500
-      },
-      disabled: {
-        light: 'none',
-        dark: 'none'
-      },
+      default: 'none',
+      hover: "var(--ds-background-subtleNeutral-hover, ".concat(colors.P200, ")"),
+      active: "var(--ds-background-subtleNeutral-pressed, ".concat(colors.P500, ")"),
+      disabled: 'none',
       selected: {
-        light: colors.N700,
-        dark: colors.DN0
+        light: "var(--ds-background-selected-hover, ".concat(colors.N700, ")"),
+        dark: "var(--ds-background-selected-hover, ".concat(colors.DN0, ")")
       },
       focusSelected: {
-        light: colors.N700,
-        dark: colors.DN0
+        light: "var(--ds-background-selected-hover, ".concat(colors.N700, ")"),
+        dark: "var(--ds-background-selected-hover, ".concat(colors.DN0, ")")
       }
     },
     boxShadow: {
-      focus: {
-        light: "".concat(colors.P100, " 0 0 0 2px"),
-        dark: "".concat(colors.P100, " 0 0 0 2px")
-      }
+      focus: "0 0 0 2px ".concat("var(--ds-iconBorder-discovery, ".concat(colors.P100, ")"))
     },
     color: {
-      default: {
-        light: colors.N0,
-        dark: colors.N0
-      },
-      hover: {
-        light: colors.N0,
-        dark: colors.N0
-      },
-      active: {
-        light: colors.N0,
-        dark: colors.N0
-      },
-      disabled: {
-        light: colors.N0,
-        dark: colors.N0
-      },
-      selected: {
-        light: colors.N0,
-        dark: colors.N0
-      },
-      focus: {
-        light: colors.N0,
-        dark: colors.N0
-      }
+      default: "var(--ds-text-onBold, ".concat(colors.N0, ")"),
+      hover: "var(--ds-text-onBold, ".concat(colors.N0, ")"),
+      active: "var(--ds-text-onBold, ".concat(colors.N0, ")"),
+      disabled: "var(--ds-text-disabled, ".concat(colors.N0, ")"),
+      selected: "var(--ds-text-onBold, ".concat(colors.N0, ")"),
+      focus: "var(--ds-text-onBold, ".concat(colors.N0, ")")
     },
     outline: {
-      focus: {
-        light: 'none',
-        dark: 'none'
-      }
+      focus: 'none'
     }
   },
   'subtle-link': {
     textDecoration: {
-      hover: {
-        light: "underline ".concat(colors.P75),
-        dark: "underline ".concat(colors.P75)
-      }
+      hover: "underline ".concat("var(--ds-text-discovery, ".concat(colors.P75, ")"))
     },
     textDecorationLine: {
-      active: {
-        light: 'none',
-        dark: 'none'
-      }
+      active: 'none'
     },
     boxShadow: {
-      focus: {
-        light: "".concat(colors.P100, " 0 0 0 2px"),
-        dark: "".concat(colors.P100, " 0 0 0 2px")
-      }
+      focus: "0 0 0 2px ".concat("var(--ds-iconBorder-discovery, ".concat(colors.P100, ")"))
     },
     color: {
-      default: {
-        light: colors.N0,
-        dark: colors.N0
-      },
-      hover: {
-        light: colors.P75,
-        dark: colors.P75
-      },
-      active: {
-        light: colors.P100,
-        dark: colors.P100
-      },
-      disabled: {
-        light: colors.P500,
-        dark: colors.P500
-      },
-      selected: {
-        light: colors.N0,
-        dark: colors.N0
-      },
-      focus: {
-        light: colors.N0,
-        dark: colors.N0
-      }
+      default: "var(--ds-text-onBold, ".concat(colors.N0, ")"),
+      hover: "var(--ds-text-onBold, ".concat(colors.P75, ")"),
+      active: "var(--ds-text-onBold, ".concat(colors.P100, ")"),
+      disabled: "var(--ds-text-discovery, ".concat(colors.P500, ")"),
+      selected: "var(--ds-text-selected, ".concat(colors.N0, ")"),
+      focus: "var(--ds-text-onBold, ".concat(colors.N0, ")")
     }
   }
 };
 var modalTheme = {
   primary: {
     background: {
-      default: {
-        light: colors.P400,
-        dark: colors.P400
-      },
-      hover: {
-        light: colors.P200,
-        dark: colors.P200
-      },
-      active: {
-        light: colors.P500,
-        dark: colors.P500
-      },
+      default: "var(--ds-background-boldDiscovery-resting, ".concat(colors.P400, ")"),
+      hover: "var(--ds-background-boldDiscovery-hover, ".concat(colors.P200, ")"),
+      active: "var(--ds-background-boldDiscovery-pressed, ".concat(colors.P500, ")"),
       disabled: {
-        light: colors.N30,
-        dark: colors.DN70
-      },
-      selected: {
-        light: colors.R500,
-        dark: colors.R500
+        light: "var(--ds-background-disabled, ".concat(colors.N30, ")"),
+        dark: "var(--ds-background-disabled, ".concat(colors.DN70, ")")
       },
-      focus: {
-        light: colors.P400,
-        dark: colors.P400
-      }
+      selected: "var(--ds-background-selected-hover, ".concat(colors.R500, ")"),
+      focus: "var(--ds-background-boldDiscovery-hover, ".concat(colors.P400, ")")
     },
     boxShadow: {
       focus: {
-        light: "".concat(colors.P100, " 0 0 0 2px"),
-        dark: "".concat(colors.P100, " 0 0 0 2px")
+        light: "0 0 0 2px ".concat("var(--ds-iconBorder-discovery, ".concat(colors.P100, ")")),
+        dark: "0 0 0 2px ".concat("var(--ds-iconBorder-discovery, ".concat(colors.P100, ")"))
       }
     },
     color: {
-      default: {
-        light: colors.N0,
-        dark: colors.N0
-      },
+      default: "var(--ds-text-onBold, ".concat(colors.N0, ")"),
       disabled: {
-        light: colors.N0,
-        dark: colors.DN30
+        light: "var(--ds-text-disabled, ".concat(colors.N0, ")"),
+        dark: "var(--ds-text-disabled, ".concat(colors.DN30, ")")
       },
-      selected: {
-        light: colors.N0,
-        dark: colors.N0
-      },
-      focus: {
-        light: colors.N0,
-        dark: colors.N0
-      }
+      selected: "var(--ds-text-selected, ".concat(colors.N0, ")"),
+      focus: "var(--ds-text-onBold, ".concat(colors.N0, ")")
     }
   }
 };
@@ -292,7 +169,7 @@ function extract(newTheme, _ref) {
 var spotlightButtonTheme = function spotlightButtonTheme(current, themeProps) {
   var _current = current(themeProps),
       buttonStyles = _current.buttonStyles,
-      rest = (0, _objectWithoutProperties2.default)(_current, ["buttonStyles"]);
+      rest = (0, _objectWithoutProperties2.default)(_current, _excluded);
 
   return _objectSpread({
     buttonStyles: _objectSpread(_objectSpread({}, buttonStyles), extract(spotlightTheme, themeProps))
@@ -304,7 +181,7 @@ exports.spotlightButtonTheme = spotlightButtonTheme;
 var modalButtonTheme = function modalButtonTheme(current, themeProps) {
   var _current2 = current(themeProps),
       buttonStyles = _current2.buttonStyles,
-      rest = (0, _objectWithoutProperties2.default)(_current2, ["buttonStyles"]);
+      rest = (0, _objectWithoutProperties2.default)(_current2, _excluded2);
 
   return _objectSpread({
     buttonStyles: _objectSpread(_objectSpread({}, buttonStyles), extract(modalTheme, themeProps))

package/dist/cjs/index.js

@@ -27,6 +27,12 @@ Object.defineProperty(exports, "SpotlightManager", {
     return _components.SpotlightManager;
   }
 });
+Object.defineProperty(exports, "SpotlightPulse", {
+  enumerable: true,
+  get: function get() {
+    return _target.Pulse;
+  }
+});
 Object.defineProperty(exports, "SpotlightTarget", {
   enumerable: true,
   get: function get() {
@@ -57,12 +63,6 @@ Object.defineProperty(exports, "useSpotlight", {
     return _components.useSpotlight;
   }
 });
-Object.defineProperty(exports, "SpotlightPulse", {
-  enumerable: true,
-  get: function get() {
-    return _target.Pulse;
-  }
-});
 
 var _components = require("./components");