@atlaskit/dynamic-table 14.4.2 → 14.4.3

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 # @atlaskit/dynamic-table
 
+## 14.4.3
+
+### 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
+
 ## 14.4.2
 
 ### Patch Changes

package/dist/cjs/components/Stateless.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/dynamic-table";
-var packageVersion = "14.4.2";
+var packageVersion = "14.4.3";
 
 function toggleSortOrder(currentSortOrder) {
   switch (currentSortOrder) {

package/dist/cjs/styled/TableHead.js

@@ -23,8 +23,6 @@ var _components = require("@atlaskit/theme/components");
 
 var _constants = require("@atlaskit/theme/constants");
 
-var _tokens = require("@atlaskit/tokens");
-
 var _constants2 = require("../internal/constants");
 
 var _theme = require("../theme");
@@ -43,9 +41,9 @@ var rankingStyles = (0, _core.css)({
 
 var getHeadStyles = function getHeadStyles(theme) {
   return (0, _core.css)({
-    borderBottom: "2px solid ".concat((0, _tokens.token)('color.border.neutral', _theme.head.borderColor({
+    borderBottom: "2px solid ".concat("var(--ds-border-neutral, ".concat(_theme.head.borderColor({
       theme: theme
-    })))
+    }), ")"))
   });
 };
 
@@ -67,9 +65,9 @@ var headCellStyles = (0, _core.css)([_constants3.cellStyles, {
   position: 'relative',
   textAlign: 'left',
   verticalAlign: 'top',
-  color: (0, _tokens.token)('color.text.lowEmphasis', "var(".concat(CSS_VAR_TEXT_COLOR, ")")),
+  color: "var(--ds-text-lowEmphasis, ".concat("var(".concat(CSS_VAR_TEXT_COLOR, ")"), ")"),
   '&:focus': {
-    outline: "solid 2px ".concat((0, _tokens.token)('color.border.focus', _colors.B100))
+    outline: "solid 2px ".concat("var(--ds-border-focus, ".concat(_colors.B100, ")"))
   }
 }]); // this needs to be made static: https://product-fabric.atlassian.net/browse/DSP-2011
 
@@ -153,7 +151,7 @@ exports.getArrowStyles = getArrowStyles;
 var onClickStyles = (0, _core.css)({
   '&:hover': {
     cursor: 'pointer',
-    backgroundColor: (0, _tokens.token)('color.background.subtleNeutral.hover', _colors.N30A)
+    backgroundColor: "var(--ds-background-subtleNeutral-hover, ".concat(_colors.N30A, ")")
   }
 });
 var HeadCell = /*#__PURE__*/(0, _react.forwardRef)(function (_ref2, ref) {

package/dist/cjs/styled/TableRow.js

@@ -15,26 +15,24 @@ var _react = require("react");
 
 var _core = require("@emotion/core");
 
-var _tokens = require("@atlaskit/tokens");
-
 var _DynamicTable = require("./DynamicTable");
 
 /** @jsx jsx */
 var rowStyles = (0, _core.css)({
   '&:focus': {
-    outline: "2px solid ".concat((0, _tokens.token)('color.border.focus', "var(".concat(_DynamicTable.tableRowCSSVars.CSS_VAR_HOVER_BACKGROUND, ")"))),
+    outline: "2px solid ".concat("var(--ds-border-focus, ".concat("var(".concat(_DynamicTable.tableRowCSSVars.CSS_VAR_HOVER_BACKGROUND, ")"), ")")),
     outlineOffset: "-2px"
   }
 });
 var rowBackgroundStyles = (0, _core.css)({
   '&:hover': {
-    backgroundColor: (0, _tokens.token)('color.background.transparentNeutral.hover', "var(".concat(_DynamicTable.tableRowCSSVars.CSS_VAR_HOVER_BACKGROUND, ")"))
+    backgroundColor: "var(--ds-background-transparentNeutral-hover, ".concat("var(".concat(_DynamicTable.tableRowCSSVars.CSS_VAR_HOVER_BACKGROUND, ")"), ")")
   }
 });
 var rowHighlightedBackgroundStyles = (0, _core.css)({
-  backgroundColor: (0, _tokens.token)('color.background.selected.resting', "var(".concat(_DynamicTable.tableRowCSSVars.CSS_VAR_HIGHLIGHTED_BACKGROUND, ")")),
+  backgroundColor: "var(--ds-background-selected-resting, ".concat("var(".concat(_DynamicTable.tableRowCSSVars.CSS_VAR_HIGHLIGHTED_BACKGROUND, ")"), ")"),
   '&:hover': {
-    backgroundColor: (0, _tokens.token)('color.background.selected.hover', "var(".concat(_DynamicTable.tableRowCSSVars.CSS_VAR_HOVER_HIGHLIGHTED_BACKGROUND, ")"))
+    backgroundColor: "var(--ds-background-selected-hover, ".concat("var(".concat(_DynamicTable.tableRowCSSVars.CSS_VAR_HOVER_HIGHLIGHTED_BACKGROUND, ")"), ")")
   }
 });
 var TableBodyRow = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {

package/dist/cjs/styled/rankable/TableRow.js

@@ -17,29 +17,27 @@ var _core = require("@emotion/core");
 
 var _colors = require("@atlaskit/theme/colors");
 
-var _tokens = require("@atlaskit/tokens");
-
 var _TableRow = require("../TableRow");
 
 /** @jsx jsx */
 var rankingStyles = (0, _core.css)({
   display: 'block'
 });
-var elevationStyle = (0, _tokens.token)('shadow.overlay', "0 20px 32px -8px ".concat(_colors.N50A, ", 0 0 1px ").concat(_colors.N60A));
+var elevationStyle = "var(--ds-overlay, ".concat("0 20px 32px -8px ".concat(_colors.N50A, ", 0 0 1px ").concat(_colors.N60A), ")");
 /**
  * TODO: Pass the props here to get particular theme for the table
  * Skipping it for now as it may impact migration as util-shared-styles does not support this feature
  */
 
 var rankingItemStyles = (0, _core.css)({
-  backgroundColor: (0, _tokens.token)('color.background.subtleNeutral.resting', _colors.N20),
+  backgroundColor: "var(--ds-background-subtleNeutral-resting, ".concat(_colors.N20, ")"),
   boxShadow: elevationStyle,
   borderRadius: '2px'
 });
 var draggableStyles = (0, _core.css)({
   '&:focus': {
     outlineStyle: 'solid',
-    outlineColor: (0, _tokens.token)('color.border.focus', _colors.B100)
+    outlineColor: "var(--ds-border-focus, ".concat(_colors.B100, ")")
   },
   outlineWidth: '2px'
 });

package/dist/cjs/theme.js

@@ -11,8 +11,6 @@ var colors = _interopRequireWildcard(require("@atlaskit/theme/colors"));
 
 var _components = require("@atlaskit/theme/components");
 
-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 || _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; }
@@ -26,46 +24,46 @@ var MSThemeColors = {
 exports.MSThemeColors = MSThemeColors;
 var arrow = {
   defaultColor: (0, _components.themed)({
-    light: (0, _tokens.token)('color.background.subtleNeutral.resting', colors.N40),
-    dark: (0, _tokens.token)('color.background.subtleNeutral.resting', colors.DN40)
+    light: "var(--ds-background-subtleNeutral-resting, ".concat(colors.N40, ")"),
+    dark: "var(--ds-background-subtleNeutral-resting, ".concat(colors.DN40, ")")
   }),
   selectedColor: (0, _components.themed)({
-    light: (0, _tokens.token)('color.text.lowEmphasis', colors.N300),
-    dark: (0, _tokens.token)('color.text.lowEmphasis', colors.DN300)
+    light: "var(--ds-text-lowEmphasis, ".concat(colors.N300, ")"),
+    dark: "var(--ds-text-lowEmphasis, ".concat(colors.DN300, ")")
   }),
   hoverColor: (0, _components.themed)({
-    light: (0, _tokens.token)('color.background.subtleNeutral.pressed', colors.N60),
-    dark: (0, _tokens.token)('color.background.subtleNeutral.pressed', colors.DN60)
+    light: "var(--ds-background-subtleNeutral-pressed, ".concat(colors.N60, ")"),
+    dark: "var(--ds-background-subtleNeutral-pressed, ".concat(colors.DN60, ")")
   })
 };
 exports.arrow = arrow;
 var row = {
   focusOutline: (0, _components.themed)({
-    light: (0, _tokens.token)('color.border.focus', colors.B100),
-    dark: (0, _tokens.token)('color.border.focus', colors.B100)
+    light: "var(--ds-border-focus, ".concat(colors.B100, ")"),
+    dark: "var(--ds-border-focus, ".concat(colors.B100, ")")
   }),
   highlightedBackground: (0, _components.themed)({
-    light: (0, _tokens.token)('color.background.selected.resting', colors.B50),
-    dark: (0, _tokens.token)('color.background.selected.resting', colors.DN50)
+    light: "var(--ds-background-selected-resting, ".concat(colors.B50, ")"),
+    dark: "var(--ds-background-selected-resting, ".concat(colors.DN50, ")")
   }),
   hoverBackground: (0, _components.themed)({
-    light: (0, _tokens.token)('color.background.subtleBorderedNeutral.resting', colors.N10),
-    dark: (0, _tokens.token)('color.background.subtleBorderedNeutral.resting', colors.DN40)
+    light: "var(--ds-background-subtleBorderedNeutral-resting, ".concat(colors.N10, ")"),
+    dark: "var(--ds-background-subtleBorderedNeutral-resting, ".concat(colors.DN40, ")")
   }),
   hoverHighlightedBackground: (0, _components.themed)({
-    light: (0, _tokens.token)('color.background.selected.hover', colors.B75),
-    dark: (0, _tokens.token)('color.background.selected.hover', colors.DN60)
+    light: "var(--ds-background-selected-hover, ".concat(colors.B75, ")"),
+    dark: "var(--ds-background-selected-hover, ".concat(colors.DN60, ")")
   })
 };
 exports.row = row;
 var head = {
   borderColor: (0, _components.themed)({
-    light: (0, _tokens.token)('color.border.neutral', colors.N40),
-    dark: (0, _tokens.token)('color.border.neutral', colors.DN50)
+    light: "var(--ds-border-neutral, ".concat(colors.N40, ")"),
+    dark: "var(--ds-border-neutral, ".concat(colors.DN50, ")")
   }),
   textColor: (0, _components.themed)({
-    light: (0, _tokens.token)('color.text.lowEmphasis', colors.N300),
-    dark: (0, _tokens.token)('color.text.lowEmphasis', colors.DN300)
+    light: "var(--ds-text-lowEmphasis, ".concat(colors.N300, ")"),
+    dark: "var(--ds-text-lowEmphasis, ".concat(colors.DN300, ")")
   })
 };
 exports.head = head;

package/dist/cjs/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/dynamic-table",
-	"version": "14.4.2",
+	"version": "14.4.3",
 	"sideEffects": false
 }

package/dist/es2019/components/Stateless.js

@@ -13,7 +13,7 @@ import ManagedPagination from './managed-pagination';
 import RankableTableBody from './rankable/Body';
 import TableHead from './TableHead';
 const packageName = "@atlaskit/dynamic-table";
-const packageVersion = "14.4.2";
+const packageVersion = "14.4.3";
 
 function toggleSortOrder(currentSortOrder) {
   switch (currentSortOrder) {

package/dist/es2019/styled/TableHead.js

@@ -6,7 +6,6 @@ import { css, jsx } from '@emotion/core';
 import { B100, N30A } from '@atlaskit/theme/colors';
 import { useGlobalTheme } from '@atlaskit/theme/components';
 import { gridSize as getGridSize } from '@atlaskit/theme/constants';
-import { token } from '@atlaskit/tokens';
 import { ASC, DESC } from '../internal/constants';
 import { arrow, head, MSThemeColors } from '../theme';
 import { cellStyles, fixedSizeTruncateStyles, getTruncationStyleVars, overflowTruncateStyles, truncationWidthStyles } from './constants';
@@ -17,9 +16,9 @@ const rankingStyles = css({
 });
 
 const getHeadStyles = theme => css({
-  borderBottom: `2px solid ${token('color.border.neutral', head.borderColor({
+  borderBottom: `2px solid ${`var(--ds-border-neutral, ${head.borderColor({
     theme
-  }))}`
+  })})`}`
 });
 
 export const Head = ({
@@ -39,9 +38,9 @@ const headCellStyles = css([cellStyles, {
   position: 'relative',
   textAlign: 'left',
   verticalAlign: 'top',
-  color: token('color.text.lowEmphasis', `var(${CSS_VAR_TEXT_COLOR})`),
+  color: `var(--ds-text-lowEmphasis, ${`var(${CSS_VAR_TEXT_COLOR})`})`,
   '&:focus': {
-    outline: `solid 2px ${token('color.border.focus', B100)}`
+    outline: `solid 2px ${`var(--ds-border-focus, ${B100})`}`
   }
 }]); // this needs to be made static: https://product-fabric.atlassian.net/browse/DSP-2011
 
@@ -129,7 +128,7 @@ export const getArrowStyles = (isSortable, sortOrder, theme) => {
 const onClickStyles = css({
   '&:hover': {
     cursor: 'pointer',
-    backgroundColor: token('color.background.subtleNeutral.hover', N30A)
+    backgroundColor: `var(--ds-background-subtleNeutral-hover, ${N30A})`
   }
 });
 export const HeadCell = /*#__PURE__*/forwardRef(({

package/dist/es2019/styled/TableRow.js

@@ -3,23 +3,22 @@ import _extends from "@babel/runtime/helpers/extends";
 /** @jsx jsx */
 import { forwardRef } from 'react';
 import { css, jsx } from '@emotion/core';
-import { token } from '@atlaskit/tokens';
 import { tableRowCSSVars as cssVars } from './DynamicTable';
 const rowStyles = css({
   '&:focus': {
-    outline: `2px solid ${token('color.border.focus', `var(${cssVars.CSS_VAR_HOVER_BACKGROUND})`)}`,
+    outline: `2px solid ${`var(--ds-border-focus, ${`var(${cssVars.CSS_VAR_HOVER_BACKGROUND})`})`}`,
     outlineOffset: `-2px`
   }
 });
 const rowBackgroundStyles = css({
   '&:hover': {
-    backgroundColor: token('color.background.transparentNeutral.hover', `var(${cssVars.CSS_VAR_HOVER_BACKGROUND})`)
+    backgroundColor: `var(--ds-background-transparentNeutral-hover, ${`var(${cssVars.CSS_VAR_HOVER_BACKGROUND})`})`
   }
 });
 const rowHighlightedBackgroundStyles = css({
-  backgroundColor: token('color.background.selected.resting', `var(${cssVars.CSS_VAR_HIGHLIGHTED_BACKGROUND})`),
+  backgroundColor: `var(--ds-background-selected-resting, ${`var(${cssVars.CSS_VAR_HIGHLIGHTED_BACKGROUND})`})`,
   '&:hover': {
-    backgroundColor: token('color.background.selected.hover', `var(${cssVars.CSS_VAR_HOVER_HIGHLIGHTED_BACKGROUND})`)
+    backgroundColor: `var(--ds-background-selected-hover, ${`var(${cssVars.CSS_VAR_HOVER_HIGHLIGHTED_BACKGROUND})`})`
   }
 });
 export const TableBodyRow = /*#__PURE__*/forwardRef(({

package/dist/es2019/styled/rankable/TableRow.js

@@ -4,26 +4,25 @@ import _extends from "@babel/runtime/helpers/extends";
 import { forwardRef } from 'react';
 import { css, jsx } from '@emotion/core';
 import { B100, N20, N50A, N60A } from '@atlaskit/theme/colors';
-import { token } from '@atlaskit/tokens';
 import { TableBodyRow } from '../TableRow';
 const rankingStyles = css({
   display: 'block'
 });
-const elevationStyle = token('shadow.overlay', `0 20px 32px -8px ${N50A}, 0 0 1px ${N60A}`);
+const elevationStyle = `var(--ds-overlay, ${`0 20px 32px -8px ${N50A}, 0 0 1px ${N60A}`})`;
 /**
  * TODO: Pass the props here to get particular theme for the table
  * Skipping it for now as it may impact migration as util-shared-styles does not support this feature
  */
 
 const rankingItemStyles = css({
-  backgroundColor: token('color.background.subtleNeutral.resting', N20),
+  backgroundColor: `var(--ds-background-subtleNeutral-resting, ${N20})`,
   boxShadow: elevationStyle,
   borderRadius: '2px'
 });
 const draggableStyles = css({
   '&:focus': {
     outlineStyle: 'solid',
-    outlineColor: token('color.border.focus', B100)
+    outlineColor: `var(--ds-border-focus, ${B100})`
   },
   outlineWidth: '2px'
 });

package/dist/es2019/theme.js

@@ -1,6 +1,5 @@
 import * as colors from '@atlaskit/theme/colors';
 import { themed } from '@atlaskit/theme/components';
-import { token } from '@atlaskit/tokens';
 export const MSThemeColors = {
   Background: 'Canvas',
   Text: 'CanvasText',
@@ -9,43 +8,43 @@ export const MSThemeColors = {
 };
 export const arrow = {
   defaultColor: themed({
-    light: token('color.background.subtleNeutral.resting', colors.N40),
-    dark: token('color.background.subtleNeutral.resting', colors.DN40)
+    light: `var(--ds-background-subtleNeutral-resting, ${colors.N40})`,
+    dark: `var(--ds-background-subtleNeutral-resting, ${colors.DN40})`
   }),
   selectedColor: themed({
-    light: token('color.text.lowEmphasis', colors.N300),
-    dark: token('color.text.lowEmphasis', colors.DN300)
+    light: `var(--ds-text-lowEmphasis, ${colors.N300})`,
+    dark: `var(--ds-text-lowEmphasis, ${colors.DN300})`
   }),
   hoverColor: themed({
-    light: token('color.background.subtleNeutral.pressed', colors.N60),
-    dark: token('color.background.subtleNeutral.pressed', colors.DN60)
+    light: `var(--ds-background-subtleNeutral-pressed, ${colors.N60})`,
+    dark: `var(--ds-background-subtleNeutral-pressed, ${colors.DN60})`
   })
 };
 export const row = {
   focusOutline: themed({
-    light: token('color.border.focus', colors.B100),
-    dark: token('color.border.focus', colors.B100)
+    light: `var(--ds-border-focus, ${colors.B100})`,
+    dark: `var(--ds-border-focus, ${colors.B100})`
   }),
   highlightedBackground: themed({
-    light: token('color.background.selected.resting', colors.B50),
-    dark: token('color.background.selected.resting', colors.DN50)
+    light: `var(--ds-background-selected-resting, ${colors.B50})`,
+    dark: `var(--ds-background-selected-resting, ${colors.DN50})`
   }),
   hoverBackground: themed({
-    light: token('color.background.subtleBorderedNeutral.resting', colors.N10),
-    dark: token('color.background.subtleBorderedNeutral.resting', colors.DN40)
+    light: `var(--ds-background-subtleBorderedNeutral-resting, ${colors.N10})`,
+    dark: `var(--ds-background-subtleBorderedNeutral-resting, ${colors.DN40})`
   }),
   hoverHighlightedBackground: themed({
-    light: token('color.background.selected.hover', colors.B75),
-    dark: token('color.background.selected.hover', colors.DN60)
+    light: `var(--ds-background-selected-hover, ${colors.B75})`,
+    dark: `var(--ds-background-selected-hover, ${colors.DN60})`
   })
 };
 export const head = {
   borderColor: themed({
-    light: token('color.border.neutral', colors.N40),
-    dark: token('color.border.neutral', colors.DN50)
+    light: `var(--ds-border-neutral, ${colors.N40})`,
+    dark: `var(--ds-border-neutral, ${colors.DN50})`
   }),
   textColor: themed({
-    light: token('color.text.lowEmphasis', colors.N300),
-    dark: token('color.text.lowEmphasis', colors.DN300)
+    light: `var(--ds-text-lowEmphasis, ${colors.N300})`,
+    dark: `var(--ds-text-lowEmphasis, ${colors.DN300})`
   })
 };

package/dist/es2019/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/dynamic-table",
-	"version": "14.4.2",
+	"version": "14.4.3",
 	"sideEffects": false
 }

package/dist/esm/components/Stateless.js

@@ -24,7 +24,7 @@ import ManagedPagination from './managed-pagination';
 import RankableTableBody from './rankable/Body';
 import TableHead from './TableHead';
 var packageName = "@atlaskit/dynamic-table";
-var packageVersion = "14.4.2";
+var packageVersion = "14.4.3";
 
 function toggleSortOrder(currentSortOrder) {
   switch (currentSortOrder) {

package/dist/esm/styled/TableHead.js

@@ -12,7 +12,6 @@ import { css, jsx } from '@emotion/core';
 import { B100, N30A } from '@atlaskit/theme/colors';
 import { useGlobalTheme } from '@atlaskit/theme/components';
 import { gridSize as getGridSize } from '@atlaskit/theme/constants';
-import { token } from '@atlaskit/tokens';
 import { ASC, DESC } from '../internal/constants';
 import { arrow, head, MSThemeColors } from '../theme';
 import { cellStyles, fixedSizeTruncateStyles, getTruncationStyleVars, overflowTruncateStyles, truncationWidthStyles } from './constants';
@@ -24,9 +23,9 @@ var rankingStyles = css({
 
 var getHeadStyles = function getHeadStyles(theme) {
   return css({
-    borderBottom: "2px solid ".concat(token('color.border.neutral', head.borderColor({
+    borderBottom: "2px solid ".concat("var(--ds-border-neutral, ".concat(head.borderColor({
       theme: theme
-    })))
+    }), ")"))
   });
 };
 
@@ -47,9 +46,9 @@ var headCellStyles = css([cellStyles, {
   position: 'relative',
   textAlign: 'left',
   verticalAlign: 'top',
-  color: token('color.text.lowEmphasis', "var(".concat(CSS_VAR_TEXT_COLOR, ")")),
+  color: "var(--ds-text-lowEmphasis, ".concat("var(".concat(CSS_VAR_TEXT_COLOR, ")"), ")"),
   '&:focus': {
-    outline: "solid 2px ".concat(token('color.border.focus', B100))
+    outline: "solid 2px ".concat("var(--ds-border-focus, ".concat(B100, ")"))
   }
 }]); // this needs to be made static: https://product-fabric.atlassian.net/browse/DSP-2011
 
@@ -131,7 +130,7 @@ export var getArrowStyles = function getArrowStyles(isSortable, sortOrder, theme
 var onClickStyles = css({
   '&:hover': {
     cursor: 'pointer',
-    backgroundColor: token('color.background.subtleNeutral.hover', N30A)
+    backgroundColor: "var(--ds-background-subtleNeutral-hover, ".concat(N30A, ")")
   }
 });
 export var HeadCell = /*#__PURE__*/forwardRef(function (_ref2, ref) {

package/dist/esm/styled/TableRow.js

@@ -4,23 +4,22 @@ import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProper
 /** @jsx jsx */
 import { forwardRef } from 'react';
 import { css, jsx } from '@emotion/core';
-import { token } from '@atlaskit/tokens';
 import { tableRowCSSVars as cssVars } from './DynamicTable';
 var rowStyles = css({
   '&:focus': {
-    outline: "2px solid ".concat(token('color.border.focus', "var(".concat(cssVars.CSS_VAR_HOVER_BACKGROUND, ")"))),
+    outline: "2px solid ".concat("var(--ds-border-focus, ".concat("var(".concat(cssVars.CSS_VAR_HOVER_BACKGROUND, ")"), ")")),
     outlineOffset: "-2px"
   }
 });
 var rowBackgroundStyles = css({
   '&:hover': {
-    backgroundColor: token('color.background.transparentNeutral.hover', "var(".concat(cssVars.CSS_VAR_HOVER_BACKGROUND, ")"))
+    backgroundColor: "var(--ds-background-transparentNeutral-hover, ".concat("var(".concat(cssVars.CSS_VAR_HOVER_BACKGROUND, ")"), ")")
   }
 });
 var rowHighlightedBackgroundStyles = css({
-  backgroundColor: token('color.background.selected.resting', "var(".concat(cssVars.CSS_VAR_HIGHLIGHTED_BACKGROUND, ")")),
+  backgroundColor: "var(--ds-background-selected-resting, ".concat("var(".concat(cssVars.CSS_VAR_HIGHLIGHTED_BACKGROUND, ")"), ")"),
   '&:hover': {
-    backgroundColor: token('color.background.selected.hover', "var(".concat(cssVars.CSS_VAR_HOVER_HIGHLIGHTED_BACKGROUND, ")"))
+    backgroundColor: "var(--ds-background-selected-hover, ".concat("var(".concat(cssVars.CSS_VAR_HOVER_HIGHLIGHTED_BACKGROUND, ")"), ")")
   }
 });
 export var TableBodyRow = /*#__PURE__*/forwardRef(function (_ref, ref) {

package/dist/esm/styled/rankable/TableRow.js

@@ -5,26 +5,25 @@ import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProper
 import { forwardRef } from 'react';
 import { css, jsx } from '@emotion/core';
 import { B100, N20, N50A, N60A } from '@atlaskit/theme/colors';
-import { token } from '@atlaskit/tokens';
 import { TableBodyRow } from '../TableRow';
 var rankingStyles = css({
   display: 'block'
 });
-var elevationStyle = token('shadow.overlay', "0 20px 32px -8px ".concat(N50A, ", 0 0 1px ").concat(N60A));
+var elevationStyle = "var(--ds-overlay, ".concat("0 20px 32px -8px ".concat(N50A, ", 0 0 1px ").concat(N60A), ")");
 /**
  * TODO: Pass the props here to get particular theme for the table
  * Skipping it for now as it may impact migration as util-shared-styles does not support this feature
  */
 
 var rankingItemStyles = css({
-  backgroundColor: token('color.background.subtleNeutral.resting', N20),
+  backgroundColor: "var(--ds-background-subtleNeutral-resting, ".concat(N20, ")"),
   boxShadow: elevationStyle,
   borderRadius: '2px'
 });
 var draggableStyles = css({
   '&:focus': {
     outlineStyle: 'solid',
-    outlineColor: token('color.border.focus', B100)
+    outlineColor: "var(--ds-border-focus, ".concat(B100, ")")
   },
   outlineWidth: '2px'
 });

package/dist/esm/theme.js

@@ -1,6 +1,5 @@
 import * as colors from '@atlaskit/theme/colors';
 import { themed } from '@atlaskit/theme/components';
-import { token } from '@atlaskit/tokens';
 export var MSThemeColors = {
   Background: 'Canvas',
   Text: 'CanvasText',
@@ -9,43 +8,43 @@ export var MSThemeColors = {
 };
 export var arrow = {
   defaultColor: themed({
-    light: token('color.background.subtleNeutral.resting', colors.N40),
-    dark: token('color.background.subtleNeutral.resting', colors.DN40)
+    light: "var(--ds-background-subtleNeutral-resting, ".concat(colors.N40, ")"),
+    dark: "var(--ds-background-subtleNeutral-resting, ".concat(colors.DN40, ")")
   }),
   selectedColor: themed({
-    light: token('color.text.lowEmphasis', colors.N300),
-    dark: token('color.text.lowEmphasis', colors.DN300)
+    light: "var(--ds-text-lowEmphasis, ".concat(colors.N300, ")"),
+    dark: "var(--ds-text-lowEmphasis, ".concat(colors.DN300, ")")
   }),
   hoverColor: themed({
-    light: token('color.background.subtleNeutral.pressed', colors.N60),
-    dark: token('color.background.subtleNeutral.pressed', colors.DN60)
+    light: "var(--ds-background-subtleNeutral-pressed, ".concat(colors.N60, ")"),
+    dark: "var(--ds-background-subtleNeutral-pressed, ".concat(colors.DN60, ")")
   })
 };
 export var row = {
   focusOutline: themed({
-    light: token('color.border.focus', colors.B100),
-    dark: token('color.border.focus', colors.B100)
+    light: "var(--ds-border-focus, ".concat(colors.B100, ")"),
+    dark: "var(--ds-border-focus, ".concat(colors.B100, ")")
   }),
   highlightedBackground: themed({
-    light: token('color.background.selected.resting', colors.B50),
-    dark: token('color.background.selected.resting', colors.DN50)
+    light: "var(--ds-background-selected-resting, ".concat(colors.B50, ")"),
+    dark: "var(--ds-background-selected-resting, ".concat(colors.DN50, ")")
   }),
   hoverBackground: themed({
-    light: token('color.background.subtleBorderedNeutral.resting', colors.N10),
-    dark: token('color.background.subtleBorderedNeutral.resting', colors.DN40)
+    light: "var(--ds-background-subtleBorderedNeutral-resting, ".concat(colors.N10, ")"),
+    dark: "var(--ds-background-subtleBorderedNeutral-resting, ".concat(colors.DN40, ")")
   }),
   hoverHighlightedBackground: themed({
-    light: token('color.background.selected.hover', colors.B75),
-    dark: token('color.background.selected.hover', colors.DN60)
+    light: "var(--ds-background-selected-hover, ".concat(colors.B75, ")"),
+    dark: "var(--ds-background-selected-hover, ".concat(colors.DN60, ")")
   })
 };
 export var head = {
   borderColor: themed({
-    light: token('color.border.neutral', colors.N40),
-    dark: token('color.border.neutral', colors.DN50)
+    light: "var(--ds-border-neutral, ".concat(colors.N40, ")"),
+    dark: "var(--ds-border-neutral, ".concat(colors.DN50, ")")
   }),
   textColor: themed({
-    light: token('color.text.lowEmphasis', colors.N300),
-    dark: token('color.text.lowEmphasis', colors.DN300)
+    light: "var(--ds-text-lowEmphasis, ".concat(colors.N300, ")"),
+    dark: "var(--ds-text-lowEmphasis, ".concat(colors.DN300, ")")
   })
 };

package/dist/esm/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/dynamic-table",
-	"version": "14.4.2",
+	"version": "14.4.3",
 	"sideEffects": false
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/dynamic-table",
-  "version": "14.4.2",
+  "version": "14.4.3",
   "description": "A dynamic table displays rows of data with built-in pagination, sorting, and re-ordering functionality.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -29,7 +29,7 @@
     "@atlaskit/pagination": "^14.0.0",
     "@atlaskit/spinner": "^15.0.0",
     "@atlaskit/theme": "^12.0.0",
-    "@atlaskit/tokens": "^0.3.0",
+    "@atlaskit/tokens": "^0.4.0",
     "@babel/runtime": "^7.0.0",
     "@emotion/core": "^10.0.9",
     "react-beautiful-dnd": "^12.1.1"
@@ -43,7 +43,7 @@
     "@atlaskit/build-utils": "*",
     "@atlaskit/button": "^16.0.0",
     "@atlaskit/docs": "*",
-    "@atlaskit/dropdown-menu": "^10.1.0",
+    "@atlaskit/dropdown-menu": "^11.0.0",
     "@atlaskit/ssr": "*",
     "@atlaskit/toggle": "^12.3.0",
     "@atlaskit/visual-regression": "*",
@@ -62,8 +62,12 @@
       "import-structure": "atlassian-conventions"
     },
     "@repo/internal": {
-      "theming": "tokens"
+      "theming": "tokens",
+      "deprecation": "no-deprecated-imports",
+      "styling": [
+        "emotion"
+      ]
     }
   },
   "prettier": "@atlassian/atlassian-frontend-prettier-config-1.0.1"
-}
+}