@atlaskit/storybook-addon-design-system 0.5.2 → 0.7.0

package/CHANGELOG.md

@@ -1,32 +1,47 @@
 # @atlaskit/storybook-addon-design-system
 
+## 0.7.0
+
+### Minor Changes
+
+- [#94436](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/94436) [`c652e1c27a4d`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/c652e1c27a4d) - Updates the default theme to 'auto' to ensure tokens are always applied. "Unthemed" or "No theme" is now considered an unsafe appearance.
+
+  If you prefer to use a different theme, you can still override the default theme by setting the `adeTheme.defaultValue: 'none'` as mentioned in [the documentation](https://staging.atlassian.design/components/storybook-addon-design-system/code#storybook-v7-and-above).
+
+## 0.6.0
+
+### Minor Changes
+
+- [#77691](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/77691) [`14d18ea34852`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/14d18ea34852) - - Enables new `typography` and `shape` themes
+  - Sets the color theme to `auto` by default
+
 ## 0.5.2
 
 ### Patch Changes
 
-- [`b1bdec7cce2`](https://bitbucket.org/atlassian/atlassian-frontend/commits/b1bdec7cce2) - Internal change to enforce token usage for spacing properties. There is no expected visual or behaviour change.
+- [#32935](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/32935) [`b1bdec7cce2`](https://bitbucket.org/atlassian/atlassian-frontend/commits/b1bdec7cce2) - Internal change to enforce token usage for spacing properties. There is no expected visual or behaviour change.
 
 ## 0.5.1
 
 ### Patch Changes
 
-- [`9d00501a414`](https://bitbucket.org/atlassian/atlassian-frontend/commits/9d00501a414) - Ensure legacy types are published for TS 4.5-4.8
+- [#33793](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/33793) [`9d00501a414`](https://bitbucket.org/atlassian/atlassian-frontend/commits/9d00501a414) - Ensure legacy types are published for TS 4.5-4.8
 
 ## 0.5.0
 
 ### Minor Changes
 
-- [`389ab86b2a3`](https://bitbucket.org/atlassian/atlassian-frontend/commits/389ab86b2a3) - Adding spacing tokens to storybook addon so that users spacing tokens appear in storybook
+- [#33632](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/33632) [`389ab86b2a3`](https://bitbucket.org/atlassian/atlassian-frontend/commits/389ab86b2a3) - Adding spacing tokens to storybook addon so that users spacing tokens appear in storybook
 
 ### Patch Changes
 
-- [`41fae2c6f68`](https://bitbucket.org/atlassian/atlassian-frontend/commits/41fae2c6f68) - Upgrade Typescript from `4.5.5` to `4.9.5`
+- [#33649](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/33649) [`41fae2c6f68`](https://bitbucket.org/atlassian/atlassian-frontend/commits/41fae2c6f68) - Upgrade Typescript from `4.5.5` to `4.9.5`
 
 ## 0.4.0
 
 ### Minor Changes
 
-- [`56507598609`](https://bitbucket.org/atlassian/atlassian-frontend/commits/56507598609) - Skip minor dependency bump
+- [#33258](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/33258) [`56507598609`](https://bitbucket.org/atlassian/atlassian-frontend/commits/56507598609) - Skip minor dependency bump
 
 ### Patch Changes
 
@@ -36,7 +51,7 @@
 
 ### Patch Changes
 
-- [`718d5ad3044`](https://bitbucket.org/atlassian/atlassian-frontend/commits/718d5ad3044) - Updates to support the new `@atlaskit/tokens` theming API.
+- [#27634](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/27634) [`718d5ad3044`](https://bitbucket.org/atlassian/atlassian-frontend/commits/718d5ad3044) - Updates to support the new `@atlaskit/tokens` theming API.
 - Updated dependencies
 
 ## 0.3.8
@@ -55,7 +70,7 @@
 
 ### Patch Changes
 
-- [`f824dcfff6e`](https://bitbucket.org/atlassian/atlassian-frontend/commits/f824dcfff6e) - Internal changes to satisfy various lint warnings & errors
+- [#27629](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/27629) [`f824dcfff6e`](https://bitbucket.org/atlassian/atlassian-frontend/commits/f824dcfff6e) - Internal changes to satisfy various lint warnings & errors
 
 ## 0.3.5
 
@@ -67,31 +82,31 @@
 
 ### Patch Changes
 
-- [`43464a5fb17`](https://bitbucket.org/atlassian/atlassian-frontend/commits/43464a5fb17) - Update split and stack theme settings to use tilde selectors
+- [#26467](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/26467) [`43464a5fb17`](https://bitbucket.org/atlassian/atlassian-frontend/commits/43464a5fb17) - Update split and stack theme settings to use tilde selectors
 
 ## 0.3.3
 
 ### Patch Changes
 
-- [`9827dcb82b8`](https://bitbucket.org/atlassian/atlassian-frontend/commits/9827dcb82b8) - No-op change to introduce spacing tokens to design system components.
+- [#26303](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/26303) [`9827dcb82b8`](https://bitbucket.org/atlassian/atlassian-frontend/commits/9827dcb82b8) - No-op change to introduce spacing tokens to design system components.
 
 ## 0.3.2
 
 ### Patch Changes
 
-- [`d4be43fdc44`](https://bitbucket.org/atlassian/atlassian-frontend/commits/d4be43fdc44) - Set the innerText in our hack correctly - oops!
+- [#24660](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/24660) [`d4be43fdc44`](https://bitbucket.org/atlassian/atlassian-frontend/commits/d4be43fdc44) - Set the innerText in our hack correctly - oops!
 
 ## 0.3.1
 
 ### Patch Changes
 
-- [`6dd7050ad7a`](https://bitbucket.org/atlassian/atlassian-frontend/commits/6dd7050ad7a) - Reimplement the style tag hack required for enabling split & stack view in the Storybook addon
+- [#24626](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/24626) [`6dd7050ad7a`](https://bitbucket.org/atlassian/atlassian-frontend/commits/6dd7050ad7a) - Reimplement the style tag hack required for enabling split & stack view in the Storybook addon
 
 ## 0.3.0
 
 ### Minor Changes
 
-- [`6c65a3147c1`](https://bitbucket.org/atlassian/atlassian-frontend/commits/6c65a3147c1) - Removes root selector hack from lightmode, this is no longer necessary since the default theme no longer enables tokens by default
+- [#21484](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/21484) [`6c65a3147c1`](https://bitbucket.org/atlassian/atlassian-frontend/commits/6c65a3147c1) - Removes root selector hack from lightmode, this is no longer necessary since the default theme no longer enables tokens by default
 
 ### Patch Changes
 
@@ -101,7 +116,7 @@
 
 ### Patch Changes
 
-- [`4942487a9f6`](https://bitbucket.org/atlassian/atlassian-frontend/commits/4942487a9f6) - Fixes internal representation of CSS entrypoints for themes. This is an internal change only and does not effect public APIs.
+- [#21487](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/21487) [`4942487a9f6`](https://bitbucket.org/atlassian/atlassian-frontend/commits/4942487a9f6) - Fixes internal representation of CSS entrypoints for themes. This is an internal change only and does not effect public APIs.
 
 ## 0.2.5
 
@@ -137,16 +152,16 @@
 
 ### Minor Changes
 
-- [`068c9a0b770`](https://bitbucket.org/atlassian/atlassian-frontend/commits/068c9a0b770) - Refactors the storybook addon into a "tool addon"
+- [#18080](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/18080) [`068c9a0b770`](https://bitbucket.org/atlassian/atlassian-frontend/commits/068c9a0b770) - Refactors the storybook addon into a "tool addon"
 
 ## 0.1.1
 
 ### Patch Changes
 
-- [`32f8832d6c5`](https://bitbucket.org/atlassian/atlassian-frontend/commits/32f8832d6c5) - Temporarily disable css imports to side-step recent changes to the monorepo which trigged a bug
+- [#18020](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/18020) [`32f8832d6c5`](https://bitbucket.org/atlassian/atlassian-frontend/commits/32f8832d6c5) - Temporarily disable css imports to side-step recent changes to the monorepo which trigged a bug
 
 ## 0.1.0
 
 ### Minor Changes
 
-- [`ddbec37a16c`](https://bitbucket.org/atlassian/atlassian-frontend/commits/ddbec37a16c) - Initial release of the design system storybook addon package. Intended to be a generic package for all storybook releated DS tooling
+- [#17460](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/17460) [`ddbec37a16c`](https://bitbucket.org/atlassian/atlassian-frontend/commits/ddbec37a16c) - Initial release of the design system storybook addon package. Intended to be a generic package for all storybook releated DS tooling

package/constellation/index/props.mdx

@@ -0,0 +1,55 @@
+After installing the package, register the addon with your Storybook configuration in the `.storybook/main.js` file.
+
+```diff
+module.exports = {
+  addons: [
++    '@atlaskit/storybook-addon-design-system'
+  ]
+};
+```
+
+## Storybook v6 and below
+
+Add the decorator to `.storybook/preview.js`, which is responsible for applying the logic which has the ability to modify the DOM of your stories.
+
+```diff
++ import { withDesignTokens } from '@atlaskit/storybook-addon-design-system';
+
+const { addDecorator } = require('@storybook/react');
+
++ addDecorator(withDesignTokens);
+```
+
+## Storybook v7 and above
+
+For Storybook version 7, the following changes are necessary:
+
+1. Initialising the `globalTypes.adsTheme` property in the global context
+2. Disable the [built in `backgrounds` add on](https://storybook.js.org/docs/essentials/backgrounds#disable-backgrounds), as it conflicts with the ADS theming
+
+Both of these can be done in [the `preview` file](https://storybook.js.org/docs/configure#configure-story-rendering):
+
+```diff
++ import { withDesignTokens } from '@atlaskit/storybook-addon-design-system';
+
+const preview = {
+  globalTypes: {
++     adsTheme: {
++       description: 'Atlassian Design System theming options',
++       defaultValue: 'light',
+    },
+  },
+  decorators: [
++     withDesignTokens
+  ],
+  parameters: {
++     /**
++      * Disabling the builtin backgrounds addon so it doesn't override the ADS theming
++      * See: https://storybook.js.org/docs/essentials/backgrounds#disable-backgrounds
++      */
++     backgrounds: { disable: true },
+  },
+};
+
+export default preview;
+```

package/constellation/index/usage.mdx

@@ -1,5 +1,13 @@
 ---
-order: 2
+order: 0
 ---
 
-usage
+The Design System Storybook Addon allows you to test your UI components in various themes, directly in Storybook.
+It allows you to visualize and compare component appearances across different themes, ensuring correct and consistent design token application.
+
+![Design tokens storybook addon screenshot](../images/storybook-addon.png 'Design tokens storybook addon screenshot')
+
+## Features
+
+- **Theme Testing:** Test UI components in multiple themes to ensure they look good across various styles and branding choices.
+- **Split View:** The split view functionality allows you compare components side-by-side in different themes.

package/dist/cjs/tokens/components/tool.js

@@ -11,16 +11,12 @@ var _react = _interopRequireWildcard(require("react"));
 var _api = require("@storybook/api");
 var _components = require("@storybook/components");
 var _constants = require("../constants");
-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 _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 var themeOptions = [{
-  id: 'none',
-  title: 'Disable',
-  icon: 'cross'
-}, {
   id: 'auto',
   title: 'Same as system',
-  icon: 'circlehollow'
+  icon: 'mirror'
 }, {
   id: 'light',
   title: 'Light theme',
@@ -37,6 +33,10 @@ var themeOptions = [{
   id: 'stack',
   title: 'Stacked',
   icon: 'bottombar'
+}, {
+  id: 'none',
+  title: 'Disable (Unsafe)',
+  icon: 'cross'
 }];
 
 /**
@@ -71,17 +71,16 @@ var Tool = function Tool() {
           var id = _ref2.id,
             title = _ref2.title,
             icon = _ref2.icon;
-          var Icon = /*#__PURE__*/_react.default.createElement(_components.Icons, {
-            style: {
-              opacity: 1
-            },
-            icon: icon
-          });
           return {
             id: id,
             title: title,
             active: adsTheme === id,
-            right: Icon,
+            right: /*#__PURE__*/_react.default.createElement(_components.Icons, {
+              style: {
+                opacity: 1
+              },
+              icon: icon
+            }),
             onClick: function onClick() {
               setTheme(id);
               onHide();
@@ -101,5 +100,4 @@ var Tool = function Tool() {
     })) === null || _themeOptions$find === void 0 ? void 0 : _themeOptions$find.icon) || 'circlehollow'
   }), '\xa0ADS Theme'));
 };
-var _default = Tool;
-exports.default = _default;
+var _default = exports.default = Tool;

package/dist/cjs/tokens/constants.js

@@ -4,13 +4,8 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.TOOL_ID = exports.TITLE = exports.DECORATOR_PARAM = exports.DECORATOR_ID = exports.ADDON_ID = void 0;
-var ADDON_ID = 'ads-tokens';
-exports.ADDON_ID = ADDON_ID;
-var TOOL_ID = "".concat(ADDON_ID, "/tool");
-exports.TOOL_ID = TOOL_ID;
-var TITLE = 'Design Tokens';
-exports.TITLE = TITLE;
-var DECORATOR_ID = 'withDesignTokens';
-exports.DECORATOR_ID = DECORATOR_ID;
-var DECORATOR_PARAM = 'DesignTokens';
-exports.DECORATOR_PARAM = DECORATOR_PARAM;
+var ADDON_ID = exports.ADDON_ID = 'ads-tokens';
+var TOOL_ID = exports.TOOL_ID = "".concat(ADDON_ID, "/tool");
+var TITLE = exports.TITLE = 'Design Tokens';
+var DECORATOR_ID = exports.DECORATOR_ID = 'withDesignTokens';
+var DECORATOR_PARAM = exports.DECORATOR_PARAM = 'DesignTokens';

package/dist/cjs/tokens/decorator.js

@@ -13,10 +13,10 @@ var _react = _interopRequireWildcard(require("react"));
 var _addons = require("@storybook/addons");
 var _tokens = require("@atlaskit/tokens");
 var _constants = require("./constants");
-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); 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 _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var splitColumnStyles = {
   position: 'absolute',
   boxSizing: 'border-box',
@@ -41,7 +41,7 @@ var withDesignTokens = (0, _addons.makeDecorator)({
   name: _constants.DECORATOR_ID,
   parameterName: _constants.DECORATOR_PARAM,
   wrapper: function wrapper(storyFn, context) {
-    var theme = context.globals.adsTheme;
+    var theme = context.globals.adsTheme || 'auto';
 
     // eslint-disable-next-line react-hooks/rules-of-hooks
     (0, _addons.useEffect)(function () {
@@ -56,7 +56,9 @@ var withDesignTokens = (0, _addons.makeDecorator)({
               _context.next = 5;
               return (0, _tokens.setGlobalTheme)({
                 colorMode: theme,
-                spacing: 'spacing'
+                spacing: 'spacing',
+                shape: 'shape',
+                typography: 'typography-minor3'
               });
             case 5:
               return _context.abrupt("break", 15);
@@ -64,7 +66,9 @@ var withDesignTokens = (0, _addons.makeDecorator)({
               _context.next = 8;
               return (0, _tokens.setGlobalTheme)({
                 colorMode: 'light',
-                spacing: 'spacing'
+                spacing: 'spacing',
+                shape: 'shape',
+                typography: 'typography-minor3'
               });
             case 8:
               document.documentElement.querySelectorAll('style[data-theme]').forEach(function (el) {
@@ -92,7 +96,11 @@ var withDesignTokens = (0, _addons.makeDecorator)({
       }))();
     }, [context.id, theme]);
     function renderStory() {
-      var story = storyFn(context);
+      var story = storyFn(_objectSpread(_objectSpread({}, context), {}, {
+        globals: _objectSpread(_objectSpread({}, context.globals), {}, {
+          adsTheme: theme
+        })
+      }));
       if (theme === 'split' || theme === 'stack') {
         return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
           "data-theme": "light:light",
@@ -117,5 +125,4 @@ var withDesignTokens = (0, _addons.makeDecorator)({
     return renderStory();
   }
 });
-var _default = withDesignTokens;
-exports.default = _default;
+var _default = exports.default = withDesignTokens;

package/dist/cjs/tokens/types.js

@@ -1,5 +1 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
+"use strict";

package/dist/es2019/tokens/components/tool.js

@@ -3,13 +3,9 @@ import { useGlobals } from '@storybook/api';
 import { IconButton, Icons, TooltipLinkList, WithTooltip } from '@storybook/components';
 import { TOOL_ID } from '../constants';
 const themeOptions = [{
-  id: 'none',
-  title: 'Disable',
-  icon: 'cross'
-}, {
   id: 'auto',
   title: 'Same as system',
-  icon: 'circlehollow'
+  icon: 'mirror'
 }, {
   id: 'light',
   title: 'Light theme',
@@ -26,6 +22,10 @@ const themeOptions = [{
   id: 'stack',
   title: 'Stacked',
   icon: 'bottombar'
+}, {
+  id: 'none',
+  title: 'Disable (Unsafe)',
+  icon: 'cross'
 }];
 
 /**
@@ -54,24 +54,21 @@ const Tool = () => {
         id,
         title,
         icon
-      }) => {
-        const Icon = /*#__PURE__*/React.createElement(Icons, {
+      }) => ({
+        id,
+        title,
+        active: adsTheme === id,
+        right: /*#__PURE__*/React.createElement(Icons, {
           style: {
             opacity: 1
           },
           icon: icon
-        });
-        return {
-          id,
-          title,
-          active: adsTheme === id,
-          right: Icon,
-          onClick: () => {
-            setTheme(id);
-            onHide();
-          }
-        };
-      })
+        }),
+        onClick: () => {
+          setTheme(id);
+          onHide();
+        }
+      }))
     })
   }, /*#__PURE__*/React.createElement(IconButton, {
     key: TOOL_ID,

package/dist/es2019/tokens/decorator.js

@@ -26,7 +26,7 @@ const withDesignTokens = makeDecorator({
   name: DECORATOR_ID,
   parameterName: DECORATOR_PARAM,
   wrapper: (storyFn, context) => {
-    const theme = context.globals.adsTheme;
+    const theme = context.globals.adsTheme || 'auto';
 
     // eslint-disable-next-line react-hooks/rules-of-hooks
     useEffect(() => {
@@ -37,14 +37,18 @@ const withDesignTokens = makeDecorator({
           case 'auto':
             await setGlobalTheme({
               colorMode: theme,
-              spacing: 'spacing'
+              spacing: 'spacing',
+              shape: 'shape',
+              typography: 'typography-minor3'
             });
             break;
           case 'split':
           case 'stack':
             await setGlobalTheme({
               colorMode: 'light',
-              spacing: 'spacing'
+              spacing: 'spacing',
+              shape: 'shape',
+              typography: 'typography-minor3'
             });
             document.documentElement.querySelectorAll('style[data-theme]').forEach(el => {
               const clone = el.cloneNode(true);
@@ -65,7 +69,13 @@ const withDesignTokens = makeDecorator({
       })();
     }, [context.id, theme]);
     function renderStory() {
-      const story = storyFn(context);
+      const story = storyFn({
+        ...context,
+        globals: {
+          ...context.globals,
+          adsTheme: theme
+        }
+      });
       if (theme === 'split' || theme === 'stack') {
         return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement("div", {
           "data-theme": "light:light",

package/dist/es2019/tokens/types.js

@@ -1 +0,0 @@
-export {};

package/dist/esm/tokens/components/tool.js

@@ -4,13 +4,9 @@ import { useGlobals } from '@storybook/api';
 import { IconButton, Icons, TooltipLinkList, WithTooltip } from '@storybook/components';
 import { TOOL_ID } from '../constants';
 var themeOptions = [{
-  id: 'none',
-  title: 'Disable',
-  icon: 'cross'
-}, {
   id: 'auto',
   title: 'Same as system',
-  icon: 'circlehollow'
+  icon: 'mirror'
 }, {
   id: 'light',
   title: 'Light theme',
@@ -27,6 +23,10 @@ var themeOptions = [{
   id: 'stack',
   title: 'Stacked',
   icon: 'bottombar'
+}, {
+  id: 'none',
+  title: 'Disable (Unsafe)',
+  icon: 'cross'
 }];
 
 /**
@@ -61,17 +61,16 @@ var Tool = function Tool() {
           var id = _ref2.id,
             title = _ref2.title,
             icon = _ref2.icon;
-          var Icon = /*#__PURE__*/React.createElement(Icons, {
-            style: {
-              opacity: 1
-            },
-            icon: icon
-          });
           return {
             id: id,
             title: title,
             active: adsTheme === id,
-            right: Icon,
+            right: /*#__PURE__*/React.createElement(Icons, {
+              style: {
+                opacity: 1
+              },
+              icon: icon
+            }),
             onClick: function onClick() {
               setTheme(id);
               onHide();

package/dist/esm/tokens/decorator.js

@@ -1,7 +1,7 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
-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) { _defineProperty(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 ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 import _regeneratorRuntime from "@babel/runtime/regenerator";
 import React, { Fragment } from 'react';
 import { makeDecorator, useEffect } from '@storybook/addons';
@@ -31,7 +31,7 @@ var withDesignTokens = makeDecorator({
   name: DECORATOR_ID,
   parameterName: DECORATOR_PARAM,
   wrapper: function wrapper(storyFn, context) {
-    var theme = context.globals.adsTheme;
+    var theme = context.globals.adsTheme || 'auto';
 
     // eslint-disable-next-line react-hooks/rules-of-hooks
     useEffect(function () {
@@ -46,7 +46,9 @@ var withDesignTokens = makeDecorator({
               _context.next = 5;
               return setGlobalTheme({
                 colorMode: theme,
-                spacing: 'spacing'
+                spacing: 'spacing',
+                shape: 'shape',
+                typography: 'typography-minor3'
               });
             case 5:
               return _context.abrupt("break", 15);
@@ -54,7 +56,9 @@ var withDesignTokens = makeDecorator({
               _context.next = 8;
               return setGlobalTheme({
                 colorMode: 'light',
-                spacing: 'spacing'
+                spacing: 'spacing',
+                shape: 'shape',
+                typography: 'typography-minor3'
               });
             case 8:
               document.documentElement.querySelectorAll('style[data-theme]').forEach(function (el) {
@@ -82,7 +86,11 @@ var withDesignTokens = makeDecorator({
       }))();
     }, [context.id, theme]);
     function renderStory() {
-      var story = storyFn(context);
+      var story = storyFn(_objectSpread(_objectSpread({}, context), {}, {
+        globals: _objectSpread(_objectSpread({}, context.globals), {}, {
+          adsTheme: theme
+        })
+      }));
       if (theme === 'split' || theme === 'stack') {
         return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement("div", {
           "data-theme": "light:light",

package/dist/esm/tokens/types.js

@@ -1 +0,0 @@
-export {};

package/dist/types/tokens/constants.d.ts

@@ -1,5 +1,5 @@
 export declare const ADDON_ID = "ads-tokens";
-export declare const TOOL_ID: string;
+export declare const TOOL_ID = "ads-tokens/tool";
 export declare const TITLE = "Design Tokens";
 export declare const DECORATOR_ID = "withDesignTokens";
 export declare const DECORATOR_PARAM = "DesignTokens";

package/dist/types-ts4.5/tokens/constants.d.ts

@@ -1,5 +1,5 @@
 export declare const ADDON_ID = "ads-tokens";
-export declare const TOOL_ID: string;
+export declare const TOOL_ID = "ads-tokens/tool";
 export declare const TITLE = "Design Tokens";
 export declare const DECORATOR_ID = "withDesignTokens";
 export declare const DECORATOR_PARAM = "DesignTokens";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/storybook-addon-design-system",
-  "version": "0.5.2",
+  "version": "0.7.0",
   "description": "Design token storybook addon",
   "author": "Atlassian Pty Ltd",
   "publishConfig": {
@@ -8,13 +8,10 @@
   },
   "atlassian": {
     "team": "Design System Team",
-    "releaseModel": "scheduled",
+    "releaseModel": "continuous",
     "website": {
       "name": "Storybook addon",
-      "category": "Tooling",
-      "status": {
-        "type": "alpha"
-      }
+      "category": "Tooling"
     }
   },
   "repository": "https://bitbucket.org/atlassian/atlassian-frontend-mirror",
@@ -36,7 +33,7 @@
     ".": "./src/index.tsx"
   },
   "dependencies": {
-    "@atlaskit/tokens": "^1.4.0",
+    "@atlaskit/tokens": "^1.43.0",
     "@babel/runtime": "^7.0.0",
     "@storybook/addons": "^6.4.0",
     "@storybook/api": "^6.4.0",
@@ -60,9 +57,11 @@
         "spacing"
       ],
       "deprecation": "no-deprecated-imports",
-      "styling": "emotion"
+      "styling": [
+        "emotion"
+      ]
     }
   },
   "homepage": "https://atlassian.design/components/storybook-addon-design-system",
   "prettier": "@atlassian/atlassian-frontend-prettier-config-1.0.1"
-}
+}

package/constellation/index/examples.mdx

@@ -1,5 +0,0 @@
----
-order: 0
----
-
-examples

package/dist/cjs/version.json

@@ -1,5 +0,0 @@
-{
-	"name": "@atlaskit/storybook-addon-design-system",
-	"version": "0.5.2",
-	"sideEffects": false
-}

package/dist/es2019/version.json

@@ -1,5 +0,0 @@
-{
-	"name": "@atlaskit/storybook-addon-design-system",
-	"version": "0.5.2",
-	"sideEffects": false
-}

package/dist/esm/version.json

@@ -1,5 +0,0 @@
-{
-	"name": "@atlaskit/storybook-addon-design-system",
-	"version": "0.5.2",
-	"sideEffects": false
-}