@atlaskit/storybook-addon-design-system 0.6.0 → 0.7.1

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # @atlaskit/storybook-addon-design-system
 
+## 0.7.1
+
+### Patch Changes
+
+- [#93943](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/93943) [`611f5e98470c`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/611f5e98470c) - Removes fallback colors from styles
+
+## 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

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();

package/dist/cjs/tokens/decorator.js

@@ -13,8 +13,8 @@ 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 _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 = {
@@ -24,8 +24,8 @@ var splitColumnStyles = {
   height: '100vh',
   overflow: 'auto',
   padding: '10px',
-  background: (0, _tokens.token)('elevation.surface', 'white'),
-  color: (0, _tokens.token)('color.text', '#172B4D')
+  background: (0, _tokens.token)('elevation.surface'),
+  color: (0, _tokens.token)('color.text')
 };
 var stackColumnStyles = {
   position: 'absolute',
@@ -34,14 +34,14 @@ var stackColumnStyles = {
   height: '50%',
   overflow: 'auto',
   padding: '10px',
-  background: (0, _tokens.token)('elevation.surface', 'white'),
-  color: (0, _tokens.token)('color.text', '#172B4D')
+  background: (0, _tokens.token)('elevation.surface'),
+  color: (0, _tokens.token)('color.text')
 };
 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 () {
@@ -96,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",

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

@@ -9,8 +9,8 @@ const splitColumnStyles = {
   height: '100vh',
   overflow: 'auto',
   padding: '10px',
-  background: token('elevation.surface', 'white'),
-  color: token('color.text', '#172B4D')
+  background: token('elevation.surface'),
+  color: token('color.text')
 };
 const stackColumnStyles = {
   position: 'absolute',
@@ -19,14 +19,14 @@ const stackColumnStyles = {
   height: '50%',
   overflow: 'auto',
   padding: '10px',
-  background: token('elevation.surface', 'white'),
-  color: token('color.text', '#172B4D')
+  background: token('elevation.surface'),
+  color: token('color.text')
 };
 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(() => {
@@ -69,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

@@ -14,8 +14,8 @@ var splitColumnStyles = {
   height: '100vh',
   overflow: 'auto',
   padding: '10px',
-  background: token('elevation.surface', 'white'),
-  color: token('color.text', '#172B4D')
+  background: token('elevation.surface'),
+  color: token('color.text')
 };
 var stackColumnStyles = {
   position: 'absolute',
@@ -24,14 +24,14 @@ var stackColumnStyles = {
   height: '50%',
   overflow: 'auto',
   padding: '10px',
-  background: token('elevation.surface', 'white'),
-  color: token('color.text', '#172B4D')
+  background: token('elevation.surface'),
+  color: token('color.text')
 };
 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 () {
@@ -86,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.6.0",
+  "version": "0.7.1",
   "description": "Design token storybook addon",
   "author": "Atlassian Pty Ltd",
   "publishConfig": {
@@ -33,7 +33,7 @@
     ".": "./src/index.tsx"
   },
   "dependencies": {
-    "@atlaskit/tokens": "^1.38.0",
+    "@atlaskit/tokens": "^1.43.0",
     "@babel/runtime": "^7.0.0",
     "@storybook/addons": "^6.4.0",
     "@storybook/api": "^6.4.0",
@@ -57,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"
-}
+}