@atlaskit/onboarding 10.3.4 → 10.3.7

package/CHANGELOG.md

@@ -1,5 +1,27 @@
 # @atlaskit/onboarding
 
+## 10.3.7
+
+### Patch Changes
+
+- [`ac9343c3ed4`](https://bitbucket.org/atlassian/atlassian-frontend/commits/ac9343c3ed4) - Replaces usage of deprecated design tokens. No visual or functional changes
+- [`dcd92130cc4`](https://bitbucket.org/atlassian/atlassian-frontend/commits/dcd92130cc4) - Migrate deleted background accent tokens to replacements
+- [`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.
+- Updated dependencies
+
+## 10.3.6
+
+### Patch Changes
+
+- [`bd38851d12f`](https://bitbucket.org/atlassian/atlassian-frontend/commits/bd38851d12f) - [ux] Fixed the missing Spotlight button border by updating the token usages.
+- Updated dependencies
+
+## 10.3.5
+
+### Patch Changes
+
+- [`58884c2f6c1`](https://bitbucket.org/atlassian/atlassian-frontend/commits/58884c2f6c1) - Internal code change turning on a new linting rule.
+
 ## 10.3.4
 
 ### Patch Changes

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

@@ -54,7 +54,7 @@ function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflec
 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.3.4";
+var packageVersion = "10.3.7";
 
 var SpotlightDialog = /*#__PURE__*/function (_Component) {
   (0, _inherits2.default)(SpotlightDialog, _Component);

package/dist/cjs/components/theme.js

@@ -39,7 +39,7 @@ var spotlightTheme = {
       focus: "var(--ds-background-neutral, ".concat(colors.P400, ")")
     },
     boxShadow: {
-      focus: "0 0 0 2px ".concat("var(--ds-icon-discovery, ".concat(colors.P100, ")"))
+      focus: "0 0 0 2px ".concat("var(--ds-border-discovery, ".concat(colors.P100, ")"))
     },
     color: {
       default: "var(--ds-text-inverse, ".concat(colors.N0, ")"),
@@ -63,12 +63,12 @@ var spotlightTheme = {
       active: "var(--ds-background-neutral-pressed, ".concat(colors.P500, ")"),
       disabled: 'none',
       selected: {
-        light: "var(--ds-background-brand-hovered, ".concat(colors.N700, ")"),
-        dark: "var(--ds-background-brand-hovered, ".concat(colors.DN0, ")")
+        light: "var(--ds-background-selected-hovered, ".concat(colors.N700, ")"),
+        dark: "var(--ds-background-selected-hovered, ".concat(colors.DN0, ")")
       },
       focusSelected: {
-        light: "var(--ds-background-brand-hovered, ".concat(colors.N700, ")"),
-        dark: "var(--ds-background-brand-hovered, ".concat(colors.DN0, ")")
+        light: "var(--ds-background-selected-hovered, ".concat(colors.N700, ")"),
+        dark: "var(--ds-background-selected-hovered, ".concat(colors.DN0, ")")
       }
     },
     boxShadow: {
@@ -94,14 +94,14 @@ var spotlightTheme = {
       active: 'none'
     },
     boxShadow: {
-      focus: "0 0 0 2px ".concat("var(--ds-icon-discovery, ".concat(colors.P100, ")"))
+      focus: "0 0 0 2px ".concat("var(--ds-border-discovery, ".concat(colors.P100, ")"))
     },
     color: {
       default: "var(--ds-text-inverse, ".concat(colors.N0, ")"),
       hover: "var(--ds-text-inverse, ".concat(colors.P75, ")"),
       active: "var(--ds-text-inverse, ".concat(colors.P100, ")"),
       disabled: "var(--ds-text-discovery, ".concat(colors.P500, ")"),
-      selected: "var(--ds-text-brand, ".concat(colors.N0, ")"),
+      selected: "var(--ds-text-selected, ".concat(colors.N0, ")"),
       focus: "var(--ds-text-inverse, ".concat(colors.N0, ")")
     }
   }
@@ -116,13 +116,13 @@ var modalTheme = {
         light: "var(--ds-background-disabled, ".concat(colors.N30, ")"),
         dark: "var(--ds-background-disabled, ".concat(colors.DN70, ")")
       },
-      selected: "var(--ds-background-brand-hovered, ".concat(colors.R500, ")"),
+      selected: "var(--ds-background-selected-hovered, ".concat(colors.R500, ")"),
       focus: "var(--ds-background-discovery-bold-hovered, ".concat(colors.P400, ")")
     },
     boxShadow: {
       focus: {
-        light: "0 0 0 2px ".concat("var(--ds-icon-discovery, ".concat(colors.P100, ")")),
-        dark: "0 0 0 2px ".concat("var(--ds-icon-discovery, ".concat(colors.P100, ")"))
+        light: "0 0 0 2px ".concat("var(--ds-border-discovery, ".concat(colors.P100, ")")),
+        dark: "0 0 0 2px ".concat("var(--ds-border-discovery, ".concat(colors.P100, ")"))
       }
     },
     color: {
@@ -131,7 +131,7 @@ var modalTheme = {
         light: "var(--ds-text-disabled, ".concat(colors.N0, ")"),
         dark: "var(--ds-text-disabled, ".concat(colors.DN30, ")")
       },
-      selected: "var(--ds-text-brand, ".concat(colors.N0, ")"),
+      selected: "var(--ds-text-selected, ".concat(colors.N0, ")"),
       focus: "var(--ds-text-inverse, ".concat(colors.N0, ")")
     }
   }

package/dist/cjs/styled/target.js

@@ -29,11 +29,11 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 
 // NOTE:
 // Pulse color "rgb(101, 84, 192)" derived from "colors.P300"
-var baseShadow = "var(--ds-shadow-overlay, ".concat("0 0 0 2px ".concat(_colors.P300), ")");
+var baseShadow = "0 0 0 2px ".concat("var(--ds-border-discovery, ".concat(_colors.P300, ")"));
 var easing = 'cubic-bezier(0.55, 0.055, 0.675, 0.19)';
 var pulseKeyframes = (0, _core.keyframes)({
   '0%, 33%': {
-    boxShadow: "".concat(baseShadow, ", 0 0 0 rgba(101, 84, 192, 1)")
+    boxShadow: "".concat(baseShadow, ", 0 0 0 ").concat("var(--ds-border-discovery, rgba(101, 84, 192, 1))")
   },
   '66%, 100%': {
     boxShadow: "".concat(baseShadow, ", 0 0 0 10px rgba(101, 84, 192, 0.01)")
@@ -64,7 +64,8 @@ var Base = function Base(_ref) {
     style: _objectSpread(_objectSpread({}, style), {}, {
       backgroundColor: bgColor,
       borderRadius: radius ? "".concat(radius, "px") : undefined
-    })
+    }) // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
+
   }, props), children);
 };
 /**
@@ -80,9 +81,11 @@ var TargetInner = function TargetInner(_ref2) {
   var children = _ref2.children,
       pulse = _ref2.pulse,
       props = (0, _objectWithoutProperties2.default)(_ref2, _excluded2);
-  return (0, _core.jsx)(Base, (0, _extends2.default)({}, props, {
-    css: [pulse && animationStyles]
-  }), children);
+  return (// eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
+    (0, _core.jsx)(Base, (0, _extends2.default)({}, props, {
+      css: [pulse && animationStyles]
+    }), children)
+  );
 };
 
 exports.TargetInner = TargetInner;
@@ -127,10 +130,12 @@ var Pulse = function Pulse(_ref3) {
       pulse = _ref3$pulse === void 0 ? true : _ref3$pulse,
       testId = _ref3.testId,
       props = (0, _objectWithoutProperties2.default)(_ref3, _excluded3);
-  return (0, _core.jsx)(Base, (0, _extends2.default)({}, props, {
-    css: [pulse && animationStyles],
-    testId: testId
-  }), children);
+  return (// eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
+    (0, _core.jsx)(Base, (0, _extends2.default)({}, props, {
+      css: [pulse && animationStyles],
+      testId: testId
+    }), children)
+  );
 };
 
 exports.Pulse = Pulse;

package/dist/cjs/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/onboarding",
-	"version": "10.3.4",
+	"version": "10.3.7",
 	"sideEffects": false
 }

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

@@ -7,7 +7,7 @@ import { DialogImage } from '../styled/dialog';
 import SpotlightCard from './spotlight-card';
 import ValueChanged from './value-changed';
 const packageName = "@atlaskit/onboarding";
-const packageVersion = "10.3.4";
+const packageVersion = "10.3.7";
 
 class SpotlightDialog extends Component {
   constructor(...args) {

package/dist/es2019/components/theme.js

@@ -10,7 +10,7 @@ const spotlightTheme = {
       focus: `var(--ds-background-neutral, ${colors.P400})`
     },
     boxShadow: {
-      focus: `0 0 0 2px ${`var(--ds-icon-discovery, ${colors.P100})`}`
+      focus: `0 0 0 2px ${`var(--ds-border-discovery, ${colors.P100})`}`
     },
     color: {
       default: `var(--ds-text-inverse, ${colors.N0})`,
@@ -34,12 +34,12 @@ const spotlightTheme = {
       active: `var(--ds-background-neutral-pressed, ${colors.P500})`,
       disabled: 'none',
       selected: {
-        light: `var(--ds-background-brand-hovered, ${colors.N700})`,
-        dark: `var(--ds-background-brand-hovered, ${colors.DN0})`
+        light: `var(--ds-background-selected-hovered, ${colors.N700})`,
+        dark: `var(--ds-background-selected-hovered, ${colors.DN0})`
       },
       focusSelected: {
-        light: `var(--ds-background-brand-hovered, ${colors.N700})`,
-        dark: `var(--ds-background-brand-hovered, ${colors.DN0})`
+        light: `var(--ds-background-selected-hovered, ${colors.N700})`,
+        dark: `var(--ds-background-selected-hovered, ${colors.DN0})`
       }
     },
     boxShadow: {
@@ -65,14 +65,14 @@ const spotlightTheme = {
       active: 'none'
     },
     boxShadow: {
-      focus: `0 0 0 2px ${`var(--ds-icon-discovery, ${colors.P100})`}`
+      focus: `0 0 0 2px ${`var(--ds-border-discovery, ${colors.P100})`}`
     },
     color: {
       default: `var(--ds-text-inverse, ${colors.N0})`,
       hover: `var(--ds-text-inverse, ${colors.P75})`,
       active: `var(--ds-text-inverse, ${colors.P100})`,
       disabled: `var(--ds-text-discovery, ${colors.P500})`,
-      selected: `var(--ds-text-brand, ${colors.N0})`,
+      selected: `var(--ds-text-selected, ${colors.N0})`,
       focus: `var(--ds-text-inverse, ${colors.N0})`
     }
   }
@@ -87,13 +87,13 @@ const modalTheme = {
         light: `var(--ds-background-disabled, ${colors.N30})`,
         dark: `var(--ds-background-disabled, ${colors.DN70})`
       },
-      selected: `var(--ds-background-brand-hovered, ${colors.R500})`,
+      selected: `var(--ds-background-selected-hovered, ${colors.R500})`,
       focus: `var(--ds-background-discovery-bold-hovered, ${colors.P400})`
     },
     boxShadow: {
       focus: {
-        light: `0 0 0 2px ${`var(--ds-icon-discovery, ${colors.P100})`}`,
-        dark: `0 0 0 2px ${`var(--ds-icon-discovery, ${colors.P100})`}`
+        light: `0 0 0 2px ${`var(--ds-border-discovery, ${colors.P100})`}`,
+        dark: `0 0 0 2px ${`var(--ds-border-discovery, ${colors.P100})`}`
       }
     },
     color: {
@@ -102,7 +102,7 @@ const modalTheme = {
         light: `var(--ds-text-disabled, ${colors.N0})`,
         dark: `var(--ds-text-disabled, ${colors.DN30})`
       },
-      selected: `var(--ds-text-brand, ${colors.N0})`,
+      selected: `var(--ds-text-selected, ${colors.N0})`,
       focus: `var(--ds-text-inverse, ${colors.N0})`
     }
   }

package/dist/es2019/styled/target.js

@@ -6,11 +6,11 @@ import { P300 } from '@atlaskit/theme/colors';
 import { layers } from '@atlaskit/theme/constants';
 // NOTE:
 // Pulse color "rgb(101, 84, 192)" derived from "colors.P300"
-const baseShadow = `var(--ds-shadow-overlay, ${`0 0 0 2px ${P300}`})`;
+const baseShadow = `0 0 0 2px ${`var(--ds-border-discovery, ${P300})`}`;
 const easing = 'cubic-bezier(0.55, 0.055, 0.675, 0.19)';
 const pulseKeyframes = keyframes({
   '0%, 33%': {
-    boxShadow: `${baseShadow}, 0 0 0 rgba(101, 84, 192, 1)`
+    boxShadow: `${baseShadow}, 0 0 0 ${"var(--ds-border-discovery, rgba(101, 84, 192, 1))"}`
   },
   '66%, 100%': {
     boxShadow: `${baseShadow}, 0 0 0 10px rgba(101, 84, 192, 0.01)`
@@ -40,7 +40,8 @@ const Base = ({
   style: { ...style,
     backgroundColor: bgColor,
     borderRadius: radius ? `${radius}px` : undefined
-  }
+  } // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
+
 }, props), children);
 /**
  * __Target inner__
@@ -55,7 +56,8 @@ export const TargetInner = ({
   children,
   pulse,
   ...props
-}) => jsx(Base, _extends({}, props, {
+}) => // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
+jsx(Base, _extends({}, props, {
   css: [pulse && animationStyles]
 }), children);
 const targetOverlayStyles = css({
@@ -93,7 +95,8 @@ export const Pulse = ({
   pulse = true,
   testId,
   ...props
-}) => jsx(Base, _extends({}, props, {
+}) => // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
+jsx(Base, _extends({}, props, {
   css: [pulse && animationStyles],
   testId: testId
 }), children);

package/dist/es2019/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/onboarding",
-	"version": "10.3.4",
+	"version": "10.3.7",
 	"sideEffects": false
 }

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

@@ -24,7 +24,7 @@ import { DialogImage } from '../styled/dialog';
 import SpotlightCard from './spotlight-card';
 import ValueChanged from './value-changed';
 var packageName = "@atlaskit/onboarding";
-var packageVersion = "10.3.4";
+var packageVersion = "10.3.7";
 
 var SpotlightDialog = /*#__PURE__*/function (_Component) {
   _inherits(SpotlightDialog, _Component);

package/dist/esm/components/theme.js

@@ -20,7 +20,7 @@ var spotlightTheme = {
       focus: "var(--ds-background-neutral, ".concat(colors.P400, ")")
     },
     boxShadow: {
-      focus: "0 0 0 2px ".concat("var(--ds-icon-discovery, ".concat(colors.P100, ")"))
+      focus: "0 0 0 2px ".concat("var(--ds-border-discovery, ".concat(colors.P100, ")"))
     },
     color: {
       default: "var(--ds-text-inverse, ".concat(colors.N0, ")"),
@@ -44,12 +44,12 @@ var spotlightTheme = {
       active: "var(--ds-background-neutral-pressed, ".concat(colors.P500, ")"),
       disabled: 'none',
       selected: {
-        light: "var(--ds-background-brand-hovered, ".concat(colors.N700, ")"),
-        dark: "var(--ds-background-brand-hovered, ".concat(colors.DN0, ")")
+        light: "var(--ds-background-selected-hovered, ".concat(colors.N700, ")"),
+        dark: "var(--ds-background-selected-hovered, ".concat(colors.DN0, ")")
       },
       focusSelected: {
-        light: "var(--ds-background-brand-hovered, ".concat(colors.N700, ")"),
-        dark: "var(--ds-background-brand-hovered, ".concat(colors.DN0, ")")
+        light: "var(--ds-background-selected-hovered, ".concat(colors.N700, ")"),
+        dark: "var(--ds-background-selected-hovered, ".concat(colors.DN0, ")")
       }
     },
     boxShadow: {
@@ -75,14 +75,14 @@ var spotlightTheme = {
       active: 'none'
     },
     boxShadow: {
-      focus: "0 0 0 2px ".concat("var(--ds-icon-discovery, ".concat(colors.P100, ")"))
+      focus: "0 0 0 2px ".concat("var(--ds-border-discovery, ".concat(colors.P100, ")"))
     },
     color: {
       default: "var(--ds-text-inverse, ".concat(colors.N0, ")"),
       hover: "var(--ds-text-inverse, ".concat(colors.P75, ")"),
       active: "var(--ds-text-inverse, ".concat(colors.P100, ")"),
       disabled: "var(--ds-text-discovery, ".concat(colors.P500, ")"),
-      selected: "var(--ds-text-brand, ".concat(colors.N0, ")"),
+      selected: "var(--ds-text-selected, ".concat(colors.N0, ")"),
       focus: "var(--ds-text-inverse, ".concat(colors.N0, ")")
     }
   }
@@ -97,13 +97,13 @@ var modalTheme = {
         light: "var(--ds-background-disabled, ".concat(colors.N30, ")"),
         dark: "var(--ds-background-disabled, ".concat(colors.DN70, ")")
       },
-      selected: "var(--ds-background-brand-hovered, ".concat(colors.R500, ")"),
+      selected: "var(--ds-background-selected-hovered, ".concat(colors.R500, ")"),
       focus: "var(--ds-background-discovery-bold-hovered, ".concat(colors.P400, ")")
     },
     boxShadow: {
       focus: {
-        light: "0 0 0 2px ".concat("var(--ds-icon-discovery, ".concat(colors.P100, ")")),
-        dark: "0 0 0 2px ".concat("var(--ds-icon-discovery, ".concat(colors.P100, ")"))
+        light: "0 0 0 2px ".concat("var(--ds-border-discovery, ".concat(colors.P100, ")")),
+        dark: "0 0 0 2px ".concat("var(--ds-border-discovery, ".concat(colors.P100, ")"))
       }
     },
     color: {
@@ -112,7 +112,7 @@ var modalTheme = {
         light: "var(--ds-text-disabled, ".concat(colors.N0, ")"),
         dark: "var(--ds-text-disabled, ".concat(colors.DN30, ")")
       },
-      selected: "var(--ds-text-brand, ".concat(colors.N0, ")"),
+      selected: "var(--ds-text-selected, ".concat(colors.N0, ")"),
       focus: "var(--ds-text-inverse, ".concat(colors.N0, ")")
     }
   }

package/dist/esm/styled/target.js

@@ -15,11 +15,11 @@ import { P300 } from '@atlaskit/theme/colors';
 import { layers } from '@atlaskit/theme/constants';
 // NOTE:
 // Pulse color "rgb(101, 84, 192)" derived from "colors.P300"
-var baseShadow = "var(--ds-shadow-overlay, ".concat("0 0 0 2px ".concat(P300), ")");
+var baseShadow = "0 0 0 2px ".concat("var(--ds-border-discovery, ".concat(P300, ")"));
 var easing = 'cubic-bezier(0.55, 0.055, 0.675, 0.19)';
 var pulseKeyframes = keyframes({
   '0%, 33%': {
-    boxShadow: "".concat(baseShadow, ", 0 0 0 rgba(101, 84, 192, 1)")
+    boxShadow: "".concat(baseShadow, ", 0 0 0 ").concat("var(--ds-border-discovery, rgba(101, 84, 192, 1))")
   },
   '66%, 100%': {
     boxShadow: "".concat(baseShadow, ", 0 0 0 10px rgba(101, 84, 192, 0.01)")
@@ -50,7 +50,8 @@ var Base = function Base(_ref) {
     style: _objectSpread(_objectSpread({}, style), {}, {
       backgroundColor: bgColor,
       borderRadius: radius ? "".concat(radius, "px") : undefined
-    })
+    }) // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
+
   }, props), children);
 };
 /**
@@ -67,9 +68,11 @@ export var TargetInner = function TargetInner(_ref2) {
       pulse = _ref2.pulse,
       props = _objectWithoutProperties(_ref2, _excluded2);
 
-  return jsx(Base, _extends({}, props, {
-    css: [pulse && animationStyles]
-  }), children);
+  return (// eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
+    jsx(Base, _extends({}, props, {
+      css: [pulse && animationStyles]
+    }), children)
+  );
 };
 var targetOverlayStyles = css({
   width: '100%',
@@ -110,8 +113,10 @@ export var Pulse = function Pulse(_ref3) {
       testId = _ref3.testId,
       props = _objectWithoutProperties(_ref3, _excluded3);
 
-  return jsx(Base, _extends({}, props, {
-    css: [pulse && animationStyles],
-    testId: testId
-  }), children);
+  return (// eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
+    jsx(Base, _extends({}, props, {
+      css: [pulse && animationStyles],
+      testId: testId
+    }), children)
+  );
 };

package/dist/esm/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/onboarding",
-	"version": "10.3.4",
+	"version": "10.3.7",
 	"sideEffects": false
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/onboarding",
-  "version": "10.3.4",
+  "version": "10.3.7",
   "description": "An onboarding spotlight introduces new features to users through focused messages or multi-step tours.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -25,12 +25,12 @@
   },
   "dependencies": {
     "@atlaskit/analytics-next": "^8.0.0",
-    "@atlaskit/button": "^16.0.0",
+    "@atlaskit/button": "^16.2.0",
     "@atlaskit/modal-dialog": "^12.2.0",
     "@atlaskit/popper": "^5.0.0",
     "@atlaskit/portal": "^4.0.0",
     "@atlaskit/theme": "^12.1.0",
-    "@atlaskit/tokens": "^0.6.0",
+    "@atlaskit/tokens": "^0.8.0",
     "@babel/runtime": "^7.0.0",
     "@emotion/core": "^10.0.9",
     "exenv": "^1.2.2",
@@ -49,7 +49,7 @@
     "@atlaskit/avatar": "^20.5.0",
     "@atlaskit/docs": "*",
     "@atlaskit/icon": "^21.10.0",
-    "@atlaskit/progress-indicator": "^9.1.0",
+    "@atlaskit/progress-indicator": "^9.2.0",
     "@atlaskit/select": "^15.2.2",
     "@atlaskit/ssr": "*",
     "@atlaskit/visual-regression": "*",