@atlaskit/section-message 6.1.3 → 6.1.7

package/CHANGELOG.md

@@ -1,5 +1,32 @@
 # @atlaskit/section-message
 
+## 6.1.7
+
+### Patch Changes
+
+- [`19d72473dfb`](https://bitbucket.org/atlassian/atlassian-frontend/commits/19d72473dfb) - The no-unsafe-design-token-usage eslint rule now respects the new token naming conventions when auto-fixing by correctly formatting token ids.
+- [`19d72473dfb`](https://bitbucket.org/atlassian/atlassian-frontend/commits/19d72473dfb) - The no-unsafe-design-token-usage eslint rule now respects the new token naming conventions when auto-fixing by correctly formatting token ids.
+- Updated dependencies
+
+## 6.1.6
+
+### Patch Changes
+
+- Updated dependencies
+
+## 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

package/dist/cjs/index.js

@@ -5,16 +5,16 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-Object.defineProperty(exports, "default", {
+Object.defineProperty(exports, "SectionMessageAction", {
   enumerable: true,
   get: function get() {
-    return _sectionMessage.default;
+    return _sectionMessageAction.default;
   }
 });
-Object.defineProperty(exports, "SectionMessageAction", {
+Object.defineProperty(exports, "default", {
   enumerable: true,
   get: function get() {
-    return _sectionMessageAction.default;
+    return _sectionMessage.default;
   }
 });
 

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

@@ -5,8 +5,8 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.getAppearanceIconStyles = getAppearanceIconStyles;
 exports.appearanceIconSchema = void 0;
+exports.getAppearanceIconStyles = getAppearanceIconStyles;
 
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 
@@ -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 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 = 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; }
+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; }
 
 var appearanceIconSchema = {
   information: {
-    backgroundColor: (0, _tokens.token)('color.background.subtleBrand.resting', _colors.B50),
+    backgroundColor: "var(--ds-background-brand, ".concat(_colors.B50, ")"),
     Icon: _info.default,
-    primaryIconColor: (0, _tokens.token)('color.iconBorder.brand', _colors.B500)
+    primaryIconColor: "var(--ds-icon-brand, ".concat(_colors.B500, ")")
   },
   warning: {
-    backgroundColor: (0, _tokens.token)('color.background.subtleWarning.resting', _colors.Y50),
+    backgroundColor: "var(--ds-background-warning, ".concat(_colors.Y50, ")"),
     Icon: _warning.default,
-    primaryIconColor: (0, _tokens.token)('color.iconBorder.warning', _colors.Y500)
+    primaryIconColor: "var(--ds-icon-warning, ".concat(_colors.Y500, ")")
   },
   error: {
-    backgroundColor: (0, _tokens.token)('color.background.subtleDanger.resting', _colors.R50),
+    backgroundColor: "var(--ds-background-danger, ".concat(_colors.R50, ")"),
     Icon: _error.default,
-    primaryIconColor: (0, _tokens.token)('color.iconBorder.danger', _colors.R500)
+    primaryIconColor: "var(--ds-icon-danger, ".concat(_colors.R500, ")")
   },
   success: {
-    backgroundColor: (0, _tokens.token)('color.background.subtleSuccess.resting', _colors.G50),
+    backgroundColor: "var(--ds-background-success, ".concat(_colors.G50, ")"),
     Icon: _checkCircle.default,
-    primaryIconColor: (0, _tokens.token)('color.iconBorder.success', _colors.G500)
+    primaryIconColor: "var(--ds-icon-success, ".concat(_colors.G500, ")")
   },
   discovery: {
-    backgroundColor: (0, _tokens.token)('color.background.subtleDiscovery.resting', _colors.P50),
+    backgroundColor: "var(--ds-background-discovery, ".concat(_colors.P50, ")"),
     Icon: _questionCircle.default,
-    primaryIconColor: (0, _tokens.token)('color.iconBorder.discovery', _colors.P500)
+    primaryIconColor: "var(--ds-icon-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-subtle, ".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, ".concat(_colors.N800, ")"),
+  dark: "var(--ds-text, ".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.3",
+	"version": "6.1.7",
 	"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-brand, ${B50})`,
     Icon: InfoIcon,
-    primaryIconColor: token('color.iconBorder.brand', B500)
+    primaryIconColor: `var(--ds-icon-brand, ${B500})`
   },
   warning: {
-    backgroundColor: token('color.background.subtleWarning.resting', Y50),
+    backgroundColor: `var(--ds-background-warning, ${Y50})`,
     Icon: WarningIcon,
-    primaryIconColor: token('color.iconBorder.warning', Y500)
+    primaryIconColor: `var(--ds-icon-warning, ${Y500})`
   },
   error: {
-    backgroundColor: token('color.background.subtleDanger.resting', R50),
+    backgroundColor: `var(--ds-background-danger, ${R50})`,
     Icon: ErrorIcon,
-    primaryIconColor: token('color.iconBorder.danger', R500)
+    primaryIconColor: `var(--ds-icon-danger, ${R500})`
   },
   success: {
-    backgroundColor: token('color.background.subtleSuccess.resting', G50),
+    backgroundColor: `var(--ds-background-success, ${G50})`,
     Icon: CheckCircleIcon,
-    primaryIconColor: token('color.iconBorder.success', G500)
+    primaryIconColor: `var(--ds-icon-success, ${G500})`
   },
   discovery: {
-    backgroundColor: token('color.background.subtleDiscovery.resting', P50),
+    backgroundColor: `var(--ds-background-discovery, ${P50})`,
     Icon: QuestionCircleIcon,
-    primaryIconColor: token('color.iconBorder.discovery', P500)
+    primaryIconColor: `var(--ds-icon-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-subtle, ${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, ${N800})`,
+  dark: `var(--ds-text, ${DN600})`
 };
 const containerStyles = css({
   display: 'flex',

package/dist/es2019/version.json

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

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

@@ -1,8 +1,8 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 
-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 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 = 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; }
+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; }
 
 import CheckCircleIcon from '@atlaskit/icon/glyph/check-circle';
 import ErrorIcon from '@atlaskit/icon/glyph/error';
@@ -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-brand, ".concat(B50, ")"),
     Icon: InfoIcon,
-    primaryIconColor: token('color.iconBorder.brand', B500)
+    primaryIconColor: "var(--ds-icon-brand, ".concat(B500, ")")
   },
   warning: {
-    backgroundColor: token('color.background.subtleWarning.resting', Y50),
+    backgroundColor: "var(--ds-background-warning, ".concat(Y50, ")"),
     Icon: WarningIcon,
-    primaryIconColor: token('color.iconBorder.warning', Y500)
+    primaryIconColor: "var(--ds-icon-warning, ".concat(Y500, ")")
   },
   error: {
-    backgroundColor: token('color.background.subtleDanger.resting', R50),
+    backgroundColor: "var(--ds-background-danger, ".concat(R50, ")"),
     Icon: ErrorIcon,
-    primaryIconColor: token('color.iconBorder.danger', R500)
+    primaryIconColor: "var(--ds-icon-danger, ".concat(R500, ")")
   },
   success: {
-    backgroundColor: token('color.background.subtleSuccess.resting', G50),
+    backgroundColor: "var(--ds-background-success, ".concat(G50, ")"),
     Icon: CheckCircleIcon,
-    primaryIconColor: token('color.iconBorder.success', G500)
+    primaryIconColor: "var(--ds-icon-success, ".concat(G500, ")")
   },
   discovery: {
-    backgroundColor: token('color.background.subtleDiscovery.resting', P50),
+    backgroundColor: "var(--ds-background-discovery, ".concat(P50, ")"),
     Icon: QuestionCircleIcon,
-    primaryIconColor: token('color.iconBorder.discovery', P500)
+    primaryIconColor: "var(--ds-icon-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-subtle, ".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, ".concat(N800, ")"),
+  dark: "var(--ds-text, ".concat(DN600, ")")
 };
 var containerStyles = css({
   display: 'flex',

package/dist/esm/version.json

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/section-message",
-  "version": "6.1.3",
+  "version": "6.1.7",
   "description": "A section message is used to alert users to a particular section of the screen.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -16,7 +16,6 @@
   "atlaskit:src": "src/index.ts",
   "atlassian": {
     "team": "Design System Team",
-    "inPublicMirror": true,
     "releaseModel": "scheduled",
     "website": {
       "name": "Section message"
@@ -31,9 +30,9 @@
   "dependencies": {
     "@atlaskit/button": "^16.1.0",
     "@atlaskit/codemod-utils": "^3.4.0",
-    "@atlaskit/icon": "^21.9.0",
-    "@atlaskit/theme": "^12.0.0",
-    "@atlaskit/tokens": "^0.2.0",
+    "@atlaskit/icon": "^21.10.0",
+    "@atlaskit/theme": "^12.1.0",
+    "@atlaskit/tokens": "^0.6.0",
     "@babel/runtime": "^7.0.0",
     "@emotion/core": "^10.0.9"
   },
@@ -42,10 +41,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 +64,10 @@
     "@repo/internal": {
       "ui-components": "lite-mode",
       "analytics": "analytics-next",
-      "styling": "emotion",
+      "styling": [
+        "static",
+        "emotion"
+      ],
       "theming": "tokens",
       "deprecation": "no-deprecated-imports"
     }