@atlaskit/section-message 6.1.1 → 6.1.5

package/CHANGELOG.md

@@ -1,5 +1,30 @@
 # @atlaskit/section-message
 
+## 6.1.5
+
+### Patch Changes
+
+- [`f460cc7c411`](https://bitbucket.org/atlassian/atlassian-frontend/commits/f460cc7c411) - Builds for this package now pass through a tokens babel plugin, removing runtime invocations of the tokens() function and improving bundle size.
+- Updated dependencies
+
+## 6.1.4
+
+### Patch Changes
+
+- Updated dependencies
+
+## 6.1.3
+
+### Patch Changes
+
+- Updated dependencies
+
+## 6.1.2
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 6.1.1
 
 ### Patch Changes

package/codemods/internal/map-actions-prop.ts

@@ -119,13 +119,13 @@ export const mapActionsProp = (
     ? `Atlaskit${SECTION_MESSAGE_ACTION_COMPONENT_NAME}`
     : SECTION_MESSAGE_ACTION_COMPONENT_NAME;
 
-  let actionsAttributes = [];
+  let actionsAttributes: Collection<JSXAttribute> | null = null;
 
   source
     .findJSXElements(
       sectionMessageDefaultSpecifierName || sectionMessageDynamicImportName,
     )
-    .forEach((element: ASTPath<JSXElement>) => {
+    .forEach((element) => {
       const linkComponentAttributeValue = transferLinkComponentProp(j, element);
       actionsAttributes = getJSXAttributesByName(j, element, ACTIONS_PROP_NAME);
 
@@ -185,26 +185,33 @@ export const mapActionsProp = (
       });
     });
 
-  if (actionsAttributes.length > 0 && sectionMessageDefaultSpecifierName) {
-    addSectionMessageActionImportSpecifier(j, source, sectionMessageActionName);
-  }
-
-  if (actionsAttributes.length > 0 && sectionMessageDynamicImportName) {
-    addSectionMessageActionDynamicImport(
-      j,
-      source.find(j.VariableDeclaration).filter((variableDeclarationPath) => {
-        return (
-          j(variableDeclarationPath)
-            .find(j.VariableDeclarator)
-            .filter(
-              (variableDeclaratorPath) =>
-                variableDeclaratorPath.node.id.type === 'Identifier' &&
-                variableDeclaratorPath.node.id.name ===
-                  sectionMessageDynamicImportName,
-            ).length > 0
-        );
-      }),
-      sectionMessageActionName,
-    );
+  // @ts-ignore
+  if (actionsAttributes && actionsAttributes.length > 0) {
+    if (sectionMessageDefaultSpecifierName) {
+      addSectionMessageActionImportSpecifier(
+        j,
+        source,
+        sectionMessageActionName,
+      );
+    }
+
+    if (sectionMessageDynamicImportName) {
+      addSectionMessageActionDynamicImport(
+        j,
+        source.find(j.VariableDeclaration).filter((variableDeclarationPath) => {
+          return (
+            j(variableDeclarationPath)
+              .find(j.VariableDeclarator)
+              .filter(
+                (variableDeclaratorPath) =>
+                  variableDeclaratorPath.node.id.type === 'Identifier' &&
+                  variableDeclaratorPath.node.id.name ===
+                    sectionMessageDynamicImportName,
+              ).length > 0
+          );
+        }),
+        sectionMessageActionName,
+      );
+    }
   }
 };

package/dist/cjs/internal/appearance-icon.js

@@ -22,37 +22,35 @@ var _warning = _interopRequireDefault(require("@atlaskit/icon/glyph/warning"));
 
 var _colors = require("@atlaskit/theme/colors");
 
-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 appearanceIconSchema = {
   information: {
-    backgroundColor: (0, _tokens.token)('color.background.subtleBrand.resting', _colors.B50),
+    backgroundColor: "var(--ds-background-subtleBrand-resting, ".concat(_colors.B50, ")"),
     Icon: _info.default,
-    primaryIconColor: (0, _tokens.token)('color.iconBorder.brand', _colors.B500)
+    primaryIconColor: "var(--ds-iconBorder-brand, ".concat(_colors.B500, ")")
   },
   warning: {
-    backgroundColor: (0, _tokens.token)('color.background.subtleWarning.resting', _colors.Y50),
+    backgroundColor: "var(--ds-background-subtleWarning-resting, ".concat(_colors.Y50, ")"),
     Icon: _warning.default,
-    primaryIconColor: (0, _tokens.token)('color.iconBorder.warning', _colors.Y500)
+    primaryIconColor: "var(--ds-iconBorder-warning, ".concat(_colors.Y500, ")")
   },
   error: {
-    backgroundColor: (0, _tokens.token)('color.background.subtleDanger.resting', _colors.R50),
+    backgroundColor: "var(--ds-background-subtleDanger-resting, ".concat(_colors.R50, ")"),
     Icon: _error.default,
-    primaryIconColor: (0, _tokens.token)('color.iconBorder.danger', _colors.R500)
+    primaryIconColor: "var(--ds-iconBorder-danger, ".concat(_colors.R500, ")")
   },
   success: {
-    backgroundColor: (0, _tokens.token)('color.background.subtleSuccess.resting', _colors.G50),
+    backgroundColor: "var(--ds-background-subtleSuccess-resting, ".concat(_colors.G50, ")"),
     Icon: _checkCircle.default,
-    primaryIconColor: (0, _tokens.token)('color.iconBorder.success', _colors.G500)
+    primaryIconColor: "var(--ds-iconBorder-success, ".concat(_colors.G500, ")")
   },
   discovery: {
-    backgroundColor: (0, _tokens.token)('color.background.subtleDiscovery.resting', _colors.P50),
+    backgroundColor: "var(--ds-background-subtleDiscovery-resting, ".concat(_colors.P50, ")"),
     Icon: _questionCircle.default,
-    primaryIconColor: (0, _tokens.token)('color.iconBorder.discovery', _colors.P500)
+    primaryIconColor: "var(--ds-iconBorder-discovery, ".concat(_colors.P500, ")")
   }
 };
 exports.appearanceIconSchema = appearanceIconSchema;

package/dist/cjs/section-message-action.js

@@ -17,8 +17,6 @@ var _colors = require("@atlaskit/theme/colors");
 
 var _constants = require("@atlaskit/theme/constants");
 
-var _tokens = require("@atlaskit/tokens");
-
 /** @jsx jsx */
 var actionsSeparatorWidth = (0, _constants.gridSize)() * 2;
 var actionStyles = (0, _core.css)({
@@ -29,7 +27,7 @@ var actionStyles = (0, _core.css)({
   '& + &::before': {
     display: 'inline-block',
     width: "".concat(actionsSeparatorWidth, "px"),
-    color: "".concat((0, _tokens.token)('color.text.mediumEmphasis', _colors.N500)),
+    color: "".concat("var(--ds-text-mediumEmphasis, ".concat(_colors.N500, ")")),
     content: '"·"',
     textAlign: 'center',
     verticalAlign: 'middle'

package/dist/cjs/section-message.js

@@ -23,8 +23,6 @@ var _constants = require("@atlaskit/theme/constants");
 
 var _typography = require("@atlaskit/theme/typography");
 
-var _tokens = require("@atlaskit/tokens");
-
 var _appearanceIcon = require("./internal/appearance-icon");
 
 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); }
@@ -38,8 +36,8 @@ var containerPadding = spacing * 2;
 var actionMarginTop = spacing;
 var iconWrapperWidth = spacing * 5;
 var titleColor = {
-  light: (0, _tokens.token)('color.text.highEmphasis', _colors.N800),
-  dark: (0, _tokens.token)('color.text.highEmphasis', _colors.DN600)
+  light: "var(--ds-text-highEmphasis, ".concat(_colors.N800, ")"),
+  dark: "var(--ds-text-highEmphasis, ".concat(_colors.DN600, ")")
 };
 var containerStyles = (0, _core.css)({
   display: 'flex',

package/dist/cjs/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/section-message",
-	"version": "6.1.1",
+	"version": "6.1.5",
 	"sideEffects": false
 }

package/dist/es2019/internal/appearance-icon.js

@@ -4,32 +4,31 @@ import InfoIcon from '@atlaskit/icon/glyph/info';
 import QuestionCircleIcon from '@atlaskit/icon/glyph/question-circle';
 import WarningIcon from '@atlaskit/icon/glyph/warning';
 import { B50, B500, G50, G500, P50, P500, R50, R500, Y50, Y500 } from '@atlaskit/theme/colors';
-import { token } from '@atlaskit/tokens';
 export const appearanceIconSchema = {
   information: {
-    backgroundColor: token('color.background.subtleBrand.resting', B50),
+    backgroundColor: `var(--ds-background-subtleBrand-resting, ${B50})`,
     Icon: InfoIcon,
-    primaryIconColor: token('color.iconBorder.brand', B500)
+    primaryIconColor: `var(--ds-iconBorder-brand, ${B500})`
   },
   warning: {
-    backgroundColor: token('color.background.subtleWarning.resting', Y50),
+    backgroundColor: `var(--ds-background-subtleWarning-resting, ${Y50})`,
     Icon: WarningIcon,
-    primaryIconColor: token('color.iconBorder.warning', Y500)
+    primaryIconColor: `var(--ds-iconBorder-warning, ${Y500})`
   },
   error: {
-    backgroundColor: token('color.background.subtleDanger.resting', R50),
+    backgroundColor: `var(--ds-background-subtleDanger-resting, ${R50})`,
     Icon: ErrorIcon,
-    primaryIconColor: token('color.iconBorder.danger', R500)
+    primaryIconColor: `var(--ds-iconBorder-danger, ${R500})`
   },
   success: {
-    backgroundColor: token('color.background.subtleSuccess.resting', G50),
+    backgroundColor: `var(--ds-background-subtleSuccess-resting, ${G50})`,
     Icon: CheckCircleIcon,
-    primaryIconColor: token('color.iconBorder.success', G500)
+    primaryIconColor: `var(--ds-iconBorder-success, ${G500})`
   },
   discovery: {
-    backgroundColor: token('color.background.subtleDiscovery.resting', P50),
+    backgroundColor: `var(--ds-background-subtleDiscovery-resting, ${P50})`,
     Icon: QuestionCircleIcon,
-    primaryIconColor: token('color.iconBorder.discovery', P500)
+    primaryIconColor: `var(--ds-iconBorder-discovery, ${P500})`
   }
 };
 export function getAppearanceIconStyles(appearance, icon) {

package/dist/es2019/section-message-action.js

@@ -4,7 +4,6 @@ import { css, jsx } from '@emotion/core';
 import Button from '@atlaskit/button/standard-button';
 import { N500 } from '@atlaskit/theme/colors';
 import { gridSize } from '@atlaskit/theme/constants';
-import { token } from '@atlaskit/tokens';
 const actionsSeparatorWidth = gridSize() * 2;
 const actionStyles = css({
   display: 'flex',
@@ -14,7 +13,7 @@ const actionStyles = css({
   '& + &::before': {
     display: 'inline-block',
     width: `${actionsSeparatorWidth}px`,
-    color: `${token('color.text.mediumEmphasis', N500)}`,
+    color: `${`var(--ds-text-mediumEmphasis, ${N500})`}`,
     content: '"·"',
     textAlign: 'center',
     verticalAlign: 'middle'

package/dist/es2019/section-message.js

@@ -7,7 +7,6 @@ import { DN600, N800 } from '@atlaskit/theme/colors';
 import GlobalTheme from '@atlaskit/theme/components';
 import { borderRadius, fontSize, gridSize } from '@atlaskit/theme/constants';
 import { headingSizes } from '@atlaskit/theme/typography';
-import { token } from '@atlaskit/tokens';
 import { getAppearanceIconStyles } from './internal/appearance-icon';
 const spacing = gridSize();
 const titleMarginBottom = spacing;
@@ -15,8 +14,8 @@ const containerPadding = spacing * 2;
 const actionMarginTop = spacing;
 const iconWrapperWidth = spacing * 5;
 const titleColor = {
-  light: token('color.text.highEmphasis', N800),
-  dark: token('color.text.highEmphasis', DN600)
+  light: `var(--ds-text-highEmphasis, ${N800})`,
+  dark: `var(--ds-text-highEmphasis, ${DN600})`
 };
 const containerStyles = css({
   display: 'flex',

package/dist/es2019/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/section-message",
-	"version": "6.1.1",
+	"version": "6.1.5",
 	"sideEffects": false
 }

package/dist/esm/internal/appearance-icon.js

@@ -10,32 +10,31 @@ import InfoIcon from '@atlaskit/icon/glyph/info';
 import QuestionCircleIcon from '@atlaskit/icon/glyph/question-circle';
 import WarningIcon from '@atlaskit/icon/glyph/warning';
 import { B50, B500, G50, G500, P50, P500, R50, R500, Y50, Y500 } from '@atlaskit/theme/colors';
-import { token } from '@atlaskit/tokens';
 export var appearanceIconSchema = {
   information: {
-    backgroundColor: token('color.background.subtleBrand.resting', B50),
+    backgroundColor: "var(--ds-background-subtleBrand-resting, ".concat(B50, ")"),
     Icon: InfoIcon,
-    primaryIconColor: token('color.iconBorder.brand', B500)
+    primaryIconColor: "var(--ds-iconBorder-brand, ".concat(B500, ")")
   },
   warning: {
-    backgroundColor: token('color.background.subtleWarning.resting', Y50),
+    backgroundColor: "var(--ds-background-subtleWarning-resting, ".concat(Y50, ")"),
     Icon: WarningIcon,
-    primaryIconColor: token('color.iconBorder.warning', Y500)
+    primaryIconColor: "var(--ds-iconBorder-warning, ".concat(Y500, ")")
   },
   error: {
-    backgroundColor: token('color.background.subtleDanger.resting', R50),
+    backgroundColor: "var(--ds-background-subtleDanger-resting, ".concat(R50, ")"),
     Icon: ErrorIcon,
-    primaryIconColor: token('color.iconBorder.danger', R500)
+    primaryIconColor: "var(--ds-iconBorder-danger, ".concat(R500, ")")
   },
   success: {
-    backgroundColor: token('color.background.subtleSuccess.resting', G50),
+    backgroundColor: "var(--ds-background-subtleSuccess-resting, ".concat(G50, ")"),
     Icon: CheckCircleIcon,
-    primaryIconColor: token('color.iconBorder.success', G500)
+    primaryIconColor: "var(--ds-iconBorder-success, ".concat(G500, ")")
   },
   discovery: {
-    backgroundColor: token('color.background.subtleDiscovery.resting', P50),
+    backgroundColor: "var(--ds-background-subtleDiscovery-resting, ".concat(P50, ")"),
     Icon: QuestionCircleIcon,
-    primaryIconColor: token('color.iconBorder.discovery', P500)
+    primaryIconColor: "var(--ds-iconBorder-discovery, ".concat(P500, ")")
   }
 };
 export function getAppearanceIconStyles(appearance, icon) {

package/dist/esm/section-message-action.js

@@ -4,7 +4,6 @@ import { css, jsx } from '@emotion/core';
 import Button from '@atlaskit/button/standard-button';
 import { N500 } from '@atlaskit/theme/colors';
 import { gridSize } from '@atlaskit/theme/constants';
-import { token } from '@atlaskit/tokens';
 var actionsSeparatorWidth = gridSize() * 2;
 var actionStyles = css({
   display: 'flex',
@@ -14,7 +13,7 @@ var actionStyles = css({
   '& + &::before': {
     display: 'inline-block',
     width: "".concat(actionsSeparatorWidth, "px"),
-    color: "".concat(token('color.text.mediumEmphasis', N500)),
+    color: "".concat("var(--ds-text-mediumEmphasis, ".concat(N500, ")")),
     content: '"·"',
     textAlign: 'center',
     verticalAlign: 'middle'

package/dist/esm/section-message.js

@@ -7,7 +7,6 @@ import { DN600, N800 } from '@atlaskit/theme/colors';
 import GlobalTheme from '@atlaskit/theme/components';
 import { borderRadius, fontSize, gridSize } from '@atlaskit/theme/constants';
 import { headingSizes } from '@atlaskit/theme/typography';
-import { token } from '@atlaskit/tokens';
 import { getAppearanceIconStyles } from './internal/appearance-icon';
 var spacing = gridSize();
 var titleMarginBottom = spacing;
@@ -15,8 +14,8 @@ var containerPadding = spacing * 2;
 var actionMarginTop = spacing;
 var iconWrapperWidth = spacing * 5;
 var titleColor = {
-  light: token('color.text.highEmphasis', N800),
-  dark: token('color.text.highEmphasis', DN600)
+  light: "var(--ds-text-highEmphasis, ".concat(N800, ")"),
+  dark: "var(--ds-text-highEmphasis, ".concat(DN600, ")")
 };
 var containerStyles = css({
   display: 'flex',

package/dist/esm/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/section-message",
-	"version": "6.1.1",
+	"version": "6.1.5",
 	"sideEffects": false
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/section-message",
-  "version": "6.1.1",
+  "version": "6.1.5",
   "description": "A section message is used to alert users to a particular section of the screen.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -30,10 +30,10 @@
   },
   "dependencies": {
     "@atlaskit/button": "^16.1.0",
-    "@atlaskit/codemod-utils": "^3.3.0",
-    "@atlaskit/icon": "^21.8.0",
-    "@atlaskit/theme": "^11.5.0",
-    "@atlaskit/tokens": "^0.1.0",
+    "@atlaskit/codemod-utils": "^3.4.0",
+    "@atlaskit/icon": "^21.9.0",
+    "@atlaskit/theme": "^12.0.0",
+    "@atlaskit/tokens": "^0.4.0",
     "@babel/runtime": "^7.0.0",
     "@emotion/core": "^10.0.9"
   },
@@ -43,9 +43,9 @@
   "devDependencies": {
     "@atlaskit/analytics-next": "^8.1.2",
     "@atlaskit/build-utils": "*",
-    "@atlaskit/code": "^14.0.0",
+    "@atlaskit/code": "^14.3.0",
     "@atlaskit/docs": "*",
-    "@atlaskit/range": "^5.0.7",
+    "@atlaskit/range": "^5.1.0",
     "@atlaskit/ssr": "*",
     "@atlaskit/visual-regression": "*",
     "@atlaskit/webdriver-runner": "*",
@@ -66,7 +66,10 @@
     "@repo/internal": {
       "ui-components": "lite-mode",
       "analytics": "analytics-next",
-      "styling": "emotion",
+      "styling": [
+        "static",
+        "emotion"
+      ],
       "theming": "tokens",
       "deprecation": "no-deprecated-imports"
     }