@atlaskit/onboarding 10.2.6 → 10.3.0

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @atlaskit/onboarding
 
+## 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/spotlight-card.js

@@ -29,6 +29,8 @@ var _customThemeButton = require("@atlaskit/button/custom-theme-button");
 
 var _colors = require("@atlaskit/theme/colors");
 
+var _tokens = require("@atlaskit/tokens");
+
 var _card = _interopRequireDefault(require("./card"));
 
 var _theme2 = require("./theme");
@@ -87,10 +89,10 @@ var SpotlightCard = /*#__PURE__*/function (_React$Component) {
           return _theme(function () {
             return _objectSpread(_objectSpread({}, others), {}, {
               container: _objectSpread({
-                background: _colors.P300,
-                color: _colors.N0,
+                background: (0, _tokens.token)('color.background.boldDiscovery.resting', _colors.P300),
+                color: (0, _tokens.token)('color.text.onBold', _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 : (0, _tokens.token)('shadow.card', "0 4px 8px -2px ".concat(_colors.N50A, ", 0 0 1px ").concat(_colors.N60A))
               }, container)
             });
           }, {});

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

@@ -52,7 +52,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.2.6";
+var packageVersion = "10.3.0";
 
 var SpotlightDialog = /*#__PURE__*/function (_Component) {
   (0, _inherits2.default)(SpotlightDialog, _Component);

package/dist/cjs/components/theme.js

@@ -17,6 +17,8 @@ var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
 
 var colors = _interopRequireWildcard(require("@atlaskit/theme/colors"));
 
+var _tokens = require("@atlaskit/tokens");
+
 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; }
@@ -28,234 +30,108 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 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: (0, _tokens.token)('color.background.subtleNeutral.resting', colors.P400),
+      hover: (0, _tokens.token)('color.background.subtleNeutral.hover', colors.P200),
+      active: (0, _tokens.token)('color.background.subtleNeutral.pressed', colors.P500),
+      disabled: (0, _tokens.token)('color.background.disabled', colors.P400),
+      selected: (0, _tokens.token)('color.background.subtleNeutral.pressed', colors.R500),
+      focus: (0, _tokens.token)('color.background.subtleNeutral.resting', 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((0, _tokens.token)('color.iconBorder.discovery', 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: (0, _tokens.token)('color.text.onBold', colors.N0),
+      hover: (0, _tokens.token)('color.text.onBold', colors.N0),
+      active: (0, _tokens.token)('color.text.onBold', colors.N0),
       disabled: {
-        light: colors.N0,
-        dark: colors.DN30
-      },
-      selected: {
-        light: colors.N0,
-        dark: colors.N0
+        light: (0, _tokens.token)('color.text.disabled', colors.N0),
+        dark: (0, _tokens.token)('color.text.disabled', colors.DN30)
       },
-      focus: {
-        light: colors.N0,
-        dark: colors.N0
-      }
+      selected: (0, _tokens.token)('color.text.onBold', colors.N0),
+      focus: (0, _tokens.token)('color.text.onBold', 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: (0, _tokens.token)('color.background.subtleNeutral.hover', colors.P200),
+      active: (0, _tokens.token)('color.background.subtleNeutral.pressed', colors.P500),
+      disabled: 'none',
       selected: {
-        light: colors.N700,
-        dark: colors.DN0
+        light: (0, _tokens.token)('color.background.selected.hover', colors.N700),
+        dark: (0, _tokens.token)('color.background.selected.hover', colors.DN0)
       },
       focusSelected: {
-        light: colors.N700,
-        dark: colors.DN0
+        light: (0, _tokens.token)('color.background.selected.hover', colors.N700),
+        dark: (0, _tokens.token)('color.background.selected.hover', 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((0, _tokens.token)('color.iconBorder.discovery', 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: (0, _tokens.token)('color.text.onBold', colors.N0),
+      hover: (0, _tokens.token)('color.text.onBold', colors.N0),
+      active: (0, _tokens.token)('color.text.onBold', colors.N0),
+      disabled: (0, _tokens.token)('color.text.disabled', colors.N0),
+      selected: (0, _tokens.token)('color.text.onBold', colors.N0),
+      focus: (0, _tokens.token)('color.text.onBold', 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((0, _tokens.token)('color.text.discovery', 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((0, _tokens.token)('color.iconBorder.discovery', 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: (0, _tokens.token)('color.text.onBold', colors.N0),
+      hover: (0, _tokens.token)('color.text.onBold', colors.P75),
+      active: (0, _tokens.token)('color.text.onBold', colors.P100),
+      disabled: (0, _tokens.token)('color.text.discovery', colors.P500),
+      selected: (0, _tokens.token)('color.text.selected', colors.N0),
+      focus: (0, _tokens.token)('color.text.onBold', 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: (0, _tokens.token)('color.background.boldDiscovery.resting', colors.P400),
+      hover: (0, _tokens.token)('color.background.boldDiscovery.hover', colors.P200),
+      active: (0, _tokens.token)('color.background.boldDiscovery.pressed', colors.P500),
       disabled: {
-        light: colors.N30,
-        dark: colors.DN70
-      },
-      selected: {
-        light: colors.R500,
-        dark: colors.R500
+        light: (0, _tokens.token)('color.background.disabled', colors.N30),
+        dark: (0, _tokens.token)('color.background.disabled', colors.DN70)
       },
-      focus: {
-        light: colors.P400,
-        dark: colors.P400
-      }
+      selected: (0, _tokens.token)('color.background.selected.hover', colors.R500),
+      focus: (0, _tokens.token)('color.background.boldDiscovery.hover', 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((0, _tokens.token)('color.iconBorder.discovery', colors.P100)),
+        dark: "0 0 0 2px ".concat((0, _tokens.token)('color.iconBorder.discovery', colors.P100))
       }
     },
     color: {
-      default: {
-        light: colors.N0,
-        dark: colors.N0
-      },
+      default: (0, _tokens.token)('color.text.onBold', colors.N0),
       disabled: {
-        light: colors.N0,
-        dark: colors.DN30
+        light: (0, _tokens.token)('color.text.disabled', colors.N0),
+        dark: (0, _tokens.token)('color.text.disabled', colors.DN30)
       },
-      selected: {
-        light: colors.N0,
-        dark: colors.N0
-      },
-      focus: {
-        light: colors.N0,
-        dark: colors.N0
-      }
+      selected: (0, _tokens.token)('color.text.selected', colors.N0),
+      focus: (0, _tokens.token)('color.text.onBold', colors.N0)
     }
   }
 };

package/dist/cjs/styled/blanket.js

@@ -17,13 +17,15 @@ var _components = require("@atlaskit/theme/components");
 
 var _constants = require("@atlaskit/theme/constants");
 
+var _tokens = require("@atlaskit/tokens");
+
 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 _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; }
 
 var backgroundColor = (0, _components.themed)({
-  light: _colors.N100A,
-  dark: _colors.DN90A
+  light: (0, _tokens.token)('color.background.blanket', _colors.N100A),
+  dark: (0, _tokens.token)('color.background.blanket', _colors.DN90A)
 }); // IE11 and Edge: z-index needed because fixed position calculates z-index relative
 // to body instead of nearest stacking context (Portal in our case).
 

package/dist/cjs/styled/target.js

@@ -19,13 +19,15 @@ var _colors = require("@atlaskit/theme/colors");
 
 var _constants = require("@atlaskit/theme/constants");
 
+var _tokens = require("@atlaskit/tokens");
+
 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 _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; }
 
 // NOTE:
 // Pulse color "rgb(101, 84, 192)" derived from "colors.P300"
-var baseShadow = "0 0 0 2px ".concat(_colors.P300);
+var baseShadow = (0, _tokens.token)('shadow.overlay', "0 0 0 2px ".concat(_colors.P300));
 var easing = 'cubic-bezier(0.55, 0.055, 0.675, 0.19)';
 var pulseKeyframes = (0, _core.keyframes)({
   '0%, 33%': {

package/dist/cjs/version.json

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

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

@@ -3,6 +3,7 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import React from 'react';
 import { Theme as ButtonTheme } from '@atlaskit/button/custom-theme-button';
 import { N0, N50A, N60A, P300 } from '@atlaskit/theme/colors';
+import { token } from '@atlaskit/tokens';
 import Card from './card';
 import { spotlightButtonTheme } from './theme';
 
@@ -41,11 +42,10 @@ class SpotlightCard extends React.Component {
         } = parent({});
         return theme(() => ({ ...others,
           container: {
-            background: P300,
-            color: N0,
+            background: token('color.background.boldDiscovery.resting', P300),
+            color: token('color.text.onBold', N0),
             width: `${Math.min(Math.max(width, 160), 600)}px`,
-            boxShadow: isFlat ? undefined : `0 4px 8px -2px ${N50A}, 0 0 1px ${N60A}`,
-            // AK-5598
+            boxShadow: isFlat ? undefined : token('shadow.card', `0 4px 8px -2px ${N50A}, 0 0 1px ${N60A}`),
             ...container
           }
         }), {});

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.2.6";
+const packageVersion = "10.3.0";
 
 class SpotlightDialog extends Component {
   constructor(...args) {

package/dist/es2019/components/theme.js

@@ -1,235 +1,110 @@
 import * as colors from '@atlaskit/theme/colors';
+import { token } from '@atlaskit/tokens';
 const 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: token('color.background.subtleNeutral.resting', colors.P400),
+      hover: token('color.background.subtleNeutral.hover', colors.P200),
+      active: token('color.background.subtleNeutral.pressed', colors.P500),
+      disabled: token('color.background.disabled', colors.P400),
+      selected: token('color.background.subtleNeutral.pressed', colors.R500),
+      focus: token('color.background.subtleNeutral.resting', colors.P400)
     },
     boxShadow: {
-      focus: {
-        light: `${colors.P100} 0 0 0 2px`,
-        dark: `${colors.P100} 0 0 0 2px`
-      }
+      focus: `0 0 0 2px ${token('color.iconBorder.discovery', 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: token('color.text.onBold', colors.N0),
+      hover: token('color.text.onBold', colors.N0),
+      active: token('color.text.onBold', colors.N0),
       disabled: {
-        light: colors.N0,
-        dark: colors.DN30
-      },
-      selected: {
-        light: colors.N0,
-        dark: colors.N0
+        light: token('color.text.disabled', colors.N0),
+        dark: token('color.text.disabled', colors.DN30)
       },
-      focus: {
-        light: colors.N0,
-        dark: colors.N0
-      }
+      selected: token('color.text.onBold', colors.N0),
+      focus: token('color.text.onBold', 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: token('color.background.subtleNeutral.hover', colors.P200),
+      active: token('color.background.subtleNeutral.pressed', colors.P500),
+      disabled: 'none',
       selected: {
-        light: colors.N700,
-        dark: colors.DN0
+        light: token('color.background.selected.hover', colors.N700),
+        dark: token('color.background.selected.hover', colors.DN0)
       },
       focusSelected: {
-        light: colors.N700,
-        dark: colors.DN0
+        light: token('color.background.selected.hover', colors.N700),
+        dark: token('color.background.selected.hover', colors.DN0)
       }
     },
     boxShadow: {
-      focus: {
-        light: `${colors.P100} 0 0 0 2px`,
-        dark: `${colors.P100} 0 0 0 2px`
-      }
+      focus: `0 0 0 2px ${token('color.iconBorder.discovery', 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: token('color.text.onBold', colors.N0),
+      hover: token('color.text.onBold', colors.N0),
+      active: token('color.text.onBold', colors.N0),
+      disabled: token('color.text.disabled', colors.N0),
+      selected: token('color.text.onBold', colors.N0),
+      focus: token('color.text.onBold', colors.N0)
     },
     outline: {
-      focus: {
-        light: 'none',
-        dark: 'none'
-      }
+      focus: 'none'
     }
   },
   'subtle-link': {
     textDecoration: {
-      hover: {
-        light: `underline ${colors.P75}`,
-        dark: `underline ${colors.P75}`
-      }
+      hover: `underline ${token('color.text.discovery', colors.P75)}`
     },
     textDecorationLine: {
-      active: {
-        light: 'none',
-        dark: 'none'
-      }
+      active: 'none'
     },
     boxShadow: {
-      focus: {
-        light: `${colors.P100} 0 0 0 2px`,
-        dark: `${colors.P100} 0 0 0 2px`
-      }
+      focus: `0 0 0 2px ${token('color.iconBorder.discovery', 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: token('color.text.onBold', colors.N0),
+      hover: token('color.text.onBold', colors.P75),
+      active: token('color.text.onBold', colors.P100),
+      disabled: token('color.text.discovery', colors.P500),
+      selected: token('color.text.selected', colors.N0),
+      focus: token('color.text.onBold', colors.N0)
     }
   }
 };
 const 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: token('color.background.boldDiscovery.resting', colors.P400),
+      hover: token('color.background.boldDiscovery.hover', colors.P200),
+      active: token('color.background.boldDiscovery.pressed', colors.P500),
       disabled: {
-        light: colors.N30,
-        dark: colors.DN70
-      },
-      selected: {
-        light: colors.R500,
-        dark: colors.R500
+        light: token('color.background.disabled', colors.N30),
+        dark: token('color.background.disabled', colors.DN70)
       },
-      focus: {
-        light: colors.P400,
-        dark: colors.P400
-      }
+      selected: token('color.background.selected.hover', colors.R500),
+      focus: token('color.background.boldDiscovery.hover', colors.P400)
     },
     boxShadow: {
       focus: {
-        light: `${colors.P100} 0 0 0 2px`,
-        dark: `${colors.P100} 0 0 0 2px`
+        light: `0 0 0 2px ${token('color.iconBorder.discovery', colors.P100)}`,
+        dark: `0 0 0 2px ${token('color.iconBorder.discovery', colors.P100)}`
       }
     },
     color: {
-      default: {
-        light: colors.N0,
-        dark: colors.N0
-      },
+      default: token('color.text.onBold', colors.N0),
       disabled: {
-        light: colors.N0,
-        dark: colors.DN30
+        light: token('color.text.disabled', colors.N0),
+        dark: token('color.text.disabled', colors.DN30)
       },
-      selected: {
-        light: colors.N0,
-        dark: colors.N0
-      },
-      focus: {
-        light: colors.N0,
-        dark: colors.N0
-      }
+      selected: token('color.text.selected', colors.N0),
+      focus: token('color.text.onBold', colors.N0)
     }
   }
 };

package/dist/es2019/styled/blanket.js

@@ -3,9 +3,10 @@ import { css, jsx } from '@emotion/core';
 import { DN90A, N100A } from '@atlaskit/theme/colors';
 import { themed, useGlobalTheme } from '@atlaskit/theme/components';
 import { layers } from '@atlaskit/theme/constants';
+import { token } from '@atlaskit/tokens';
 const backgroundColor = themed({
-  light: N100A,
-  dark: DN90A
+  light: token('color.background.blanket', N100A),
+  dark: token('color.background.blanket', DN90A)
 }); // IE11 and Edge: z-index needed because fixed position calculates z-index relative
 // to body instead of nearest stacking context (Portal in our case).
 

package/dist/es2019/styled/target.js

@@ -4,9 +4,10 @@ import _extends from "@babel/runtime/helpers/extends";
 import { css, jsx, keyframes } from '@emotion/core';
 import { P300 } from '@atlaskit/theme/colors';
 import { layers } from '@atlaskit/theme/constants';
+import { token } from '@atlaskit/tokens';
 // NOTE:
 // Pulse color "rgb(101, 84, 192)" derived from "colors.P300"
-const baseShadow = `0 0 0 2px ${P300}`;
+const baseShadow = token('shadow.overlay', `0 0 0 2px ${P300}`);
 const easing = 'cubic-bezier(0.55, 0.055, 0.675, 0.19)';
 const pulseKeyframes = keyframes({
   '0%, 33%': {

package/dist/es2019/version.json

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

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

@@ -18,6 +18,7 @@ function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Re
 import React from 'react';
 import { Theme as ButtonTheme } from '@atlaskit/button/custom-theme-button';
 import { N0, N50A, N60A, P300 } from '@atlaskit/theme/colors';
+import { token } from '@atlaskit/tokens';
 import Card from './card';
 import { spotlightButtonTheme } from './theme';
 
@@ -68,10 +69,10 @@ var SpotlightCard = /*#__PURE__*/function (_React$Component) {
           return _theme(function () {
             return _objectSpread(_objectSpread({}, others), {}, {
               container: _objectSpread({
-                background: P300,
-                color: N0,
+                background: token('color.background.boldDiscovery.resting', P300),
+                color: token('color.text.onBold', N0),
                 width: "".concat(Math.min(Math.max(width, 160), 600), "px"),
-                boxShadow: isFlat ? undefined : "0 4px 8px -2px ".concat(N50A, ", 0 0 1px ").concat(N60A)
+                boxShadow: isFlat ? undefined : token('shadow.card', "0 4px 8px -2px ".concat(N50A, ", 0 0 1px ").concat(N60A))
               }, container)
             });
           }, {});

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

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

package/dist/esm/components/theme.js

@@ -7,237 +7,112 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
 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; }
 
 import * as colors from '@atlaskit/theme/colors';
+import { token } from '@atlaskit/tokens';
 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: token('color.background.subtleNeutral.resting', colors.P400),
+      hover: token('color.background.subtleNeutral.hover', colors.P200),
+      active: token('color.background.subtleNeutral.pressed', colors.P500),
+      disabled: token('color.background.disabled', colors.P400),
+      selected: token('color.background.subtleNeutral.pressed', colors.R500),
+      focus: token('color.background.subtleNeutral.resting', 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(token('color.iconBorder.discovery', 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: token('color.text.onBold', colors.N0),
+      hover: token('color.text.onBold', colors.N0),
+      active: token('color.text.onBold', colors.N0),
       disabled: {
-        light: colors.N0,
-        dark: colors.DN30
-      },
-      selected: {
-        light: colors.N0,
-        dark: colors.N0
+        light: token('color.text.disabled', colors.N0),
+        dark: token('color.text.disabled', colors.DN30)
       },
-      focus: {
-        light: colors.N0,
-        dark: colors.N0
-      }
+      selected: token('color.text.onBold', colors.N0),
+      focus: token('color.text.onBold', 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: token('color.background.subtleNeutral.hover', colors.P200),
+      active: token('color.background.subtleNeutral.pressed', colors.P500),
+      disabled: 'none',
       selected: {
-        light: colors.N700,
-        dark: colors.DN0
+        light: token('color.background.selected.hover', colors.N700),
+        dark: token('color.background.selected.hover', colors.DN0)
       },
       focusSelected: {
-        light: colors.N700,
-        dark: colors.DN0
+        light: token('color.background.selected.hover', colors.N700),
+        dark: token('color.background.selected.hover', 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(token('color.iconBorder.discovery', 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: token('color.text.onBold', colors.N0),
+      hover: token('color.text.onBold', colors.N0),
+      active: token('color.text.onBold', colors.N0),
+      disabled: token('color.text.disabled', colors.N0),
+      selected: token('color.text.onBold', colors.N0),
+      focus: token('color.text.onBold', 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(token('color.text.discovery', 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(token('color.iconBorder.discovery', 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: token('color.text.onBold', colors.N0),
+      hover: token('color.text.onBold', colors.P75),
+      active: token('color.text.onBold', colors.P100),
+      disabled: token('color.text.discovery', colors.P500),
+      selected: token('color.text.selected', colors.N0),
+      focus: token('color.text.onBold', 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: token('color.background.boldDiscovery.resting', colors.P400),
+      hover: token('color.background.boldDiscovery.hover', colors.P200),
+      active: token('color.background.boldDiscovery.pressed', colors.P500),
       disabled: {
-        light: colors.N30,
-        dark: colors.DN70
-      },
-      selected: {
-        light: colors.R500,
-        dark: colors.R500
+        light: token('color.background.disabled', colors.N30),
+        dark: token('color.background.disabled', colors.DN70)
       },
-      focus: {
-        light: colors.P400,
-        dark: colors.P400
-      }
+      selected: token('color.background.selected.hover', colors.R500),
+      focus: token('color.background.boldDiscovery.hover', 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(token('color.iconBorder.discovery', colors.P100)),
+        dark: "0 0 0 2px ".concat(token('color.iconBorder.discovery', colors.P100))
       }
     },
     color: {
-      default: {
-        light: colors.N0,
-        dark: colors.N0
-      },
+      default: token('color.text.onBold', colors.N0),
       disabled: {
-        light: colors.N0,
-        dark: colors.DN30
+        light: token('color.text.disabled', colors.N0),
+        dark: token('color.text.disabled', colors.DN30)
       },
-      selected: {
-        light: colors.N0,
-        dark: colors.N0
-      },
-      focus: {
-        light: colors.N0,
-        dark: colors.N0
-      }
+      selected: token('color.text.selected', colors.N0),
+      focus: token('color.text.onBold', colors.N0)
     }
   }
 };

package/dist/esm/styled/blanket.js

@@ -9,9 +9,10 @@ import { css, jsx } from '@emotion/core';
 import { DN90A, N100A } from '@atlaskit/theme/colors';
 import { themed, useGlobalTheme } from '@atlaskit/theme/components';
 import { layers } from '@atlaskit/theme/constants';
+import { token } from '@atlaskit/tokens';
 var backgroundColor = themed({
-  light: N100A,
-  dark: DN90A
+  light: token('color.background.blanket', N100A),
+  dark: token('color.background.blanket', DN90A)
 }); // IE11 and Edge: z-index needed because fixed position calculates z-index relative
 // to body instead of nearest stacking context (Portal in our case).
 

package/dist/esm/styled/target.js

@@ -10,9 +10,10 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 import { css, jsx, keyframes } from '@emotion/core';
 import { P300 } from '@atlaskit/theme/colors';
 import { layers } from '@atlaskit/theme/constants';
+import { token } from '@atlaskit/tokens';
 // NOTE:
 // Pulse color "rgb(101, 84, 192)" derived from "colors.P300"
-var baseShadow = "0 0 0 2px ".concat(P300);
+var baseShadow = token('shadow.overlay', "0 0 0 2px ".concat(P300));
 var easing = 'cubic-bezier(0.55, 0.055, 0.675, 0.19)';
 var pulseKeyframes = keyframes({
   '0%, 33%': {

package/dist/esm/version.json

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/onboarding",
-  "version": "10.2.6",
+  "version": "10.3.0",
   "description": "An onboarding spotlight introduces new features to users through focused messages or multi-step tours.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -27,10 +27,11 @@
   "dependencies": {
     "@atlaskit/analytics-next": "^8.0.0",
     "@atlaskit/button": "^16.0.0",
-    "@atlaskit/modal-dialog": "^12.0.0",
+    "@atlaskit/modal-dialog": "^12.1.0",
     "@atlaskit/popper": "^5.0.0",
     "@atlaskit/portal": "^4.0.0",
     "@atlaskit/theme": "^12.0.0",
+    "@atlaskit/tokens": "^0.3.0",
     "@babel/runtime": "^7.0.0",
     "@emotion/core": "^10.0.9",
     "exenv": "^1.2.2",
@@ -69,7 +70,7 @@
     },
     "@repo/internal": {
       "analytics": "analytics-next",
-      "theming": "new-theming-api",
+      "theming": "tokens",
       "styling": "emotion",
       "design-system": "v1",
       "deprecation": "no-deprecated-imports"