@atlaskit/editor-common 72.0.0 → 72.0.1

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 # @atlaskit/editor-common
 
+## 72.0.1
+
+### Patch Changes
+
+- [`4a2a04ee176`](https://bitbucket.org/atlassian/atlassian-frontend/commits/4a2a04ee176) - Internal refactor of panel color logic to support design token babel plugin
+- [`6455cf006b3`](https://bitbucket.org/atlassian/atlassian-frontend/commits/6455cf006b3) - Builds for this package now pass through a tokens babel plugin, removing runtime invocations of the tokens() function and improving performance.
+
 ## 72.0.0
 
 ### Major Changes

package/dist/cjs/keymaps/index.js

@@ -106,8 +106,6 @@ var _react2 = require("@emotion/react");
 
 var _colors = require("@atlaskit/theme/colors");
 
-var _tokens = require("@atlaskit/tokens");
-
 var _utils = require("../utils");
 
 var _consts = require("./consts");
@@ -249,7 +247,7 @@ var arrowKeysMap = {
   ARROWUP: "\u2191",
   ARROWDOWN: "\u2193"
 };
-var tooltipShortcutStyle = (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  border-radius: 2px;\n  background-color: ", ";\n  padding: 0 2px;\n\n  /* TODO: fix in develop: https://atlassian.slack.com/archives/CFG3PSQ9E/p1647395052443259?thread_ts=1647394572.556029&cid=CFG3PSQ9E */\n  /* stylelint-disable-next-line */\n  label: tooltip-shortcut;\n"])), (0, _tokens.token)('color.background.inverse.subtle', _colors.N400));
+var tooltipShortcutStyle = (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  border-radius: 2px;\n  background-color: ", ";\n  padding: 0 2px;\n\n  /* TODO: fix in develop: https://atlassian.slack.com/archives/CFG3PSQ9E/p1647395052443259?thread_ts=1647394572.556029&cid=CFG3PSQ9E */\n  /* stylelint-disable-next-line */\n  label: tooltip-shortcut;\n"])), "var(--ds-background-inverse-subtle, ".concat(_colors.N400, ")"));
 /* eslint-enable @atlaskit/design-system/ensure-design-token-usage */
 
 function formatShortcut(keymap) {

package/dist/cjs/styles/shared/annotation.js

@@ -15,8 +15,6 @@ var _colors = require("@atlaskit/theme/colors");
 
 var _components = require("@atlaskit/theme/components");
 
-var _tokens = require("@atlaskit/tokens");
-
 var _templateObject, _templateObject2, _templateObject3;
 
 var annotationPrefix = 'ak-editor-annotation';
@@ -37,18 +35,18 @@ var DY200 = '#82641c';
 var AnnotationSharedCSSByState = function AnnotationSharedCSSByState(props) {
   return {
     focus: (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n    // Background is not coming through in confluence, suspecting to be caused by some specific combination of\n    // emotion and token look up\n\n    background: ", ";\n    border-bottom: 2px solid\n      ", ";\n    // TODO: https://product-fabric.atlassian.net/browse/DSP-4147\n    box-shadow: ", ";\n    cursor: pointer;\n  "])), (0, _components.themed)({
-      light: (0, _tokens.token)('color.background.accent.yellow.subtler', _colors.Y75),
-      dark: (0, _tokens.token)('color.background.accent.yellow.subtler', DY75)
+      light: "var(--ds-background-accent-yellow-subtler, ".concat(_colors.Y75, ")"),
+      dark: "var(--ds-background-accent-yellow-subtler, ".concat(DY75, ")")
     })(props), (0, _components.themed)({
-      light: (0, _tokens.token)('color.border.accent.yellow', _colors.Y300),
-      dark: (0, _tokens.token)('color.border.accent.yellow', DY300)
-    })(props), (0, _tokens.token)('elevation.shadow.overlay', "1px 2px 3px ".concat(_colors.N60A, ", -1px 2px 3px ").concat(_colors.N60A))),
+      light: "var(--ds-border-accent-yellow, ".concat(_colors.Y300, ")"),
+      dark: "var(--ds-border-accent-yellow, ".concat(DY300, ")")
+    })(props), "var(--ds-shadow-overlay, ".concat("1px 2px 3px ".concat(_colors.N60A, ", -1px 2px 3px ").concat(_colors.N60A), ")")),
     blur: (0, _react.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n    background: ", ";\n    border-bottom: 2px solid\n      ", ";\n    cursor: pointer;\n  "])), (0, _components.themed)({
-      light: (0, _tokens.token)('color.background.accent.yellow.subtlest', Y75a),
-      dark: (0, _tokens.token)('color.background.accent.yellow.subtlest', DY75a)
+      light: "var(--ds-background-accent-yellow-subtlest, ".concat(Y75a, ")"),
+      dark: "var(--ds-background-accent-yellow-subtlest, ".concat(DY75a, ")")
     })(props), (0, _components.themed)({
-      light: (0, _tokens.token)('color.border.accent.yellow', Y200a),
-      dark: (0, _tokens.token)('color.border.accent.yellow', DY200)
+      light: "var(--ds-border-accent-yellow, ".concat(Y200a, ")"),
+      dark: "var(--ds-border-accent-yellow, ".concat(DY200, ")")
     })(props))
   };
 };

package/dist/cjs/styles/shared/blockquote.js

@@ -15,9 +15,7 @@ var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
 
 var _constants = require("@atlaskit/theme/constants");
 
-var _tokens = require("@atlaskit/tokens");
-
 var _templateObject;
 
-var blockquoteSharedStyles = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  & blockquote {\n    box-sizing: border-box;\n    padding-left: ", "px;\n    border-left: 2px solid\n      ", ";\n    margin: ", " 0 0 0;\n    margin-right: 0;\n\n    [dir='rtl'] & {\n      padding-left: 0;\n      padding-right: ", "px;\n    }\n\n    &:first-child {\n      margin-top: 0;\n    }\n\n    &::before {\n      content: '';\n    }\n\n    &::after {\n      content: none;\n    }\n\n    & p {\n      display: block;\n    }\n\n    & table,\n    & table:last-child {\n      display: inline-table;\n    }\n  }\n"])), (0, _constants.gridSize)() * 2, (0, _tokens.token)('color.border', _editorSharedStyles.akEditorBlockquoteBorderColor), _editorSharedStyles.blockNodesVerticalMargin, (0, _constants.gridSize)() * 2);
+var blockquoteSharedStyles = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  & blockquote {\n    box-sizing: border-box;\n    padding-left: ", "px;\n    border-left: 2px solid\n      ", ";\n    margin: ", " 0 0 0;\n    margin-right: 0;\n\n    [dir='rtl'] & {\n      padding-left: 0;\n      padding-right: ", "px;\n    }\n\n    &:first-child {\n      margin-top: 0;\n    }\n\n    &::before {\n      content: '';\n    }\n\n    &::after {\n      content: none;\n    }\n\n    & p {\n      display: block;\n    }\n\n    & table,\n    & table:last-child {\n      display: inline-table;\n    }\n  }\n"])), (0, _constants.gridSize)() * 2, "var(--ds-border, ".concat(_editorSharedStyles.akEditorBlockquoteBorderColor, ")"), _editorSharedStyles.blockNodesVerticalMargin, (0, _constants.gridSize)() * 2);
 exports.blockquoteSharedStyles = blockquoteSharedStyles;

package/dist/cjs/styles/shared/code-block.js

@@ -19,8 +19,6 @@ var _components = require("@atlaskit/theme/components");
 
 var _constants = require("@atlaskit/theme/constants");
 
-var _tokens = require("@atlaskit/tokens");
-
 var _templateObject, _templateObject2;
 
 var CodeBlockSharedCssClassName = {
@@ -35,24 +33,24 @@ var CodeBlockSharedCssClassName = {
 exports.CodeBlockSharedCssClassName = CodeBlockSharedCssClassName;
 
 var codeBlockSharedStyles = function codeBlockSharedStyles(props) {
-  return (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  .", " {\n    position: relative;\n    background-color: ", ";\n    border-radius: ", "px;\n    margin: ", " 0 0 0;\n    font-family: ", ";\n    min-width: ", "px;\n    cursor: pointer;\n\n    --ds--code--bg-color: transparent;\n\n    /* This is necessary to allow for arrow key navigation in/out of code blocks in Firefox. */\n    white-space: normal;\n\n    .", " {\n      position: absolute;\n      visibility: hidden;\n      height: 1.5rem;\n      top: 0px;\n      left: 0px;\n    }\n\n    .", " {\n      position: absolute;\n      visibility: hidden;\n      height: 1.5rem;\n      bottom: 0px;\n      right: 0px;\n    }\n\n    .", " {\n      background-color: ", ";\n      display: flex;\n      border-radius: ", "px;\n      width: 100%;\n      counter-reset: line;\n      overflow-x: auto;\n\n      background-image: ", ";\n\n      background-repeat: no-repeat;\n      background-attachment: local, local, local, local, scroll, scroll, scroll,\n        scroll;\n      background-size: ", "px 100%, ", "px 100%,\n        ", "px 100%, ", "px 100%, ", "px 100%,\n        1px 100%, ", "px 100%, 1px 100%;\n      background-position: 0 0, 0 0, 100% 0, 100% 0, 100% 0, 100% 0, 0 0, 0 0;\n\n      /* Be careful if refactoring this; it is needed to keep arrow key navigation in Firefox consistent with other browsers. */\n      overflow-y: hidden;\n    }\n\n    .", " {\n      flex-shrink: 0;\n      text-align: right;\n      background-color: ", ";\n      padding: ", "px;\n      position: relative;\n\n      span {\n        display: block;\n        line-height: 0;\n        font-size: 0;\n\n        ::before {\n          display: inline-block;\n          content: counter(line);\n          counter-increment: line;\n          color: ", ";\n          font-size: ", ";\n          line-height: 1.5rem;\n        }\n      }\n    }\n\n    .", " {\n      display: flex;\n      flex: 1;\n\n      code {\n        flex-grow: 1;\n        tab-size: 4;\n        cursor: text;\n        color: ", ";\n        border-radius: ", "px;\n        margin: ", "px;\n        white-space: pre;\n        font-size: ", ";\n        line-height: 1.5rem;\n      }\n    }\n  }\n"])), CodeBlockSharedCssClassName.CODEBLOCK_CONTAINER, (0, _tokens.token)('elevation.surface.raised', 'transparent'), (0, _constants.borderRadius)(), _editorSharedStyles.blockNodesVerticalMargin, _editorSharedStyles.akEditorCodeFontFamily, _editorSharedStyles.akEditorTableCellMinWidth, CodeBlockSharedCssClassName.CODEBLOCK_START, CodeBlockSharedCssClassName.CODEBLOCK_END, CodeBlockSharedCssClassName.CODEBLOCK_CONTENT_WRAPPER, (0, _components.themed)({
-    light: (0, _tokens.token)('color.background.neutral', _colors.N20),
-    dark: (0, _tokens.token)('color.background.neutral', _colors.DN50)
+  return (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  .", " {\n    position: relative;\n    background-color: ", ";\n    border-radius: ", "px;\n    margin: ", " 0 0 0;\n    font-family: ", ";\n    min-width: ", "px;\n    cursor: pointer;\n\n    --ds--code--bg-color: transparent;\n\n    /* This is necessary to allow for arrow key navigation in/out of code blocks in Firefox. */\n    white-space: normal;\n\n    .", " {\n      position: absolute;\n      visibility: hidden;\n      height: 1.5rem;\n      top: 0px;\n      left: 0px;\n    }\n\n    .", " {\n      position: absolute;\n      visibility: hidden;\n      height: 1.5rem;\n      bottom: 0px;\n      right: 0px;\n    }\n\n    .", " {\n      background-color: ", ";\n      display: flex;\n      border-radius: ", "px;\n      width: 100%;\n      counter-reset: line;\n      overflow-x: auto;\n\n      background-image: ", ";\n\n      background-repeat: no-repeat;\n      background-attachment: local, local, local, local, scroll, scroll, scroll,\n        scroll;\n      background-size: ", "px 100%, ", "px 100%,\n        ", "px 100%, ", "px 100%, ", "px 100%,\n        1px 100%, ", "px 100%, 1px 100%;\n      background-position: 0 0, 0 0, 100% 0, 100% 0, 100% 0, 100% 0, 0 0, 0 0;\n\n      /* Be careful if refactoring this; it is needed to keep arrow key navigation in Firefox consistent with other browsers. */\n      overflow-y: hidden;\n    }\n\n    .", " {\n      flex-shrink: 0;\n      text-align: right;\n      background-color: ", ";\n      padding: ", "px;\n      position: relative;\n\n      span {\n        display: block;\n        line-height: 0;\n        font-size: 0;\n\n        ::before {\n          display: inline-block;\n          content: counter(line);\n          counter-increment: line;\n          color: ", ";\n          font-size: ", ";\n          line-height: 1.5rem;\n        }\n      }\n    }\n\n    .", " {\n      display: flex;\n      flex: 1;\n\n      code {\n        flex-grow: 1;\n        tab-size: 4;\n        cursor: text;\n        color: ", ";\n        border-radius: ", "px;\n        margin: ", "px;\n        white-space: pre;\n        font-size: ", ";\n        line-height: 1.5rem;\n      }\n    }\n  }\n"])), CodeBlockSharedCssClassName.CODEBLOCK_CONTAINER, "var(--ds-surface-raised, transparent)", (0, _constants.borderRadius)(), _editorSharedStyles.blockNodesVerticalMargin, _editorSharedStyles.akEditorCodeFontFamily, _editorSharedStyles.akEditorTableCellMinWidth, CodeBlockSharedCssClassName.CODEBLOCK_START, CodeBlockSharedCssClassName.CODEBLOCK_END, CodeBlockSharedCssClassName.CODEBLOCK_CONTENT_WRAPPER, (0, _components.themed)({
+    light: "var(--ds-background-neutral, ".concat(_colors.N20, ")"),
+    dark: "var(--ds-background-neutral, ".concat(_colors.DN50, ")")
   })(props), (0, _constants.borderRadius)(), (0, _editorSharedStyles.overflowShadow)({
     background: (0, _components.themed)({
-      light: (0, _tokens.token)('color.background.neutral', _colors.N20),
-      dark: (0, _tokens.token)('color.background.neutral', _colors.DN50)
+      light: "var(--ds-background-neutral, ".concat(_colors.N20, ")"),
+      dark: "var(--ds-background-neutral, ".concat(_colors.DN50, ")")
     })(props),
     leftCoverWidth: "".concat((0, _constants.gridSize)() * 3, "px")
   }), (0, _constants.gridSize)() * 3, (0, _constants.gridSize)() * 3, (0, _constants.gridSize)(), (0, _constants.gridSize)(), (0, _constants.gridSize)(), (0, _constants.gridSize)(), CodeBlockSharedCssClassName.CODEBLOCK_LINE_NUMBER_GUTTER, (0, _components.themed)({
-    light: (0, _tokens.token)('color.background.neutral', _colors.N30),
-    dark: (0, _tokens.token)('color.background.neutral', _colors.DN20)
+    light: "var(--ds-background-neutral, ".concat(_colors.N30, ")"),
+    dark: "var(--ds-background-neutral, ".concat(_colors.DN20, ")")
   })(props), (0, _constants.gridSize)(), (0, _components.themed)({
-    light: (0, _tokens.token)('color.text.subtlest', _colors.N400),
-    dark: (0, _tokens.token)('color.text.subtlest', _colors.DN400)
+    light: "var(--ds-text-subtlest, ".concat(_colors.N400, ")"),
+    dark: "var(--ds-text-subtlest, ".concat(_colors.DN400, ")")
   })(props), (0, _editorSharedStyles.relativeFontSizeToBase16)((0, _constants.fontSize)()), CodeBlockSharedCssClassName.CODEBLOCK_CONTENT, (0, _components.themed)({
-    light: (0, _tokens.token)('color.text', _colors.N800),
-    dark: (0, _tokens.token)('color.text', _colors.DN800)
+    light: "var(--ds-text, ".concat(_colors.N800, ")"),
+    dark: "var(--ds-text, ".concat(_colors.DN800, ")")
   })(props), (0, _constants.borderRadius)(), (0, _constants.gridSize)(), (0, _editorSharedStyles.relativeFontSizeToBase16)((0, _constants.fontSize)()));
 };
 

package/dist/cjs/styles/shared/code-mark.js

@@ -17,15 +17,13 @@ var _colors = require("@atlaskit/theme/colors");
 
 var _components = require("@atlaskit/theme/components");
 
-var _tokens = require("@atlaskit/tokens");
-
 var _templateObject;
 
 var codeMarkSharedStyles = function codeMarkSharedStyles(props) {
   var theme = (0, _components.getTheme)(props);
   return (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n    .code {\n      --ds--code--bg-color: ", ";\n      ", "\n    }\n  "])), (0, _components.themed)({
-    light: (0, _tokens.token)('color.background.neutral', _colors.N30A),
-    dark: (0, _tokens.token)('color.background.neutral', _colors.DN70)
+    light: "var(--ds-background-neutral, ".concat(_colors.N30A, ")"),
+    dark: "var(--ds-background-neutral, ".concat(_colors.DN70, ")")
   })(props), (0, _inline.getCodeStyles)(theme));
 };
 

package/dist/cjs/styles/shared/panel.js

@@ -33,23 +33,13 @@ var _components = require("@atlaskit/theme/components");
 
 var _constants = require("@atlaskit/theme/constants");
 
-var _tokens = require("@atlaskit/tokens");
-
 var _templateObject, _templateObject2;
 
 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; }
 
-var tokenPanelColor = {
-  info: 'color.background.information',
-  note: 'color.background.discovery',
-  tip: 'color.background.success',
-  success: 'color.background.success',
-  warning: 'color.background.warning',
-  error: 'color.background.danger'
-};
-var lightPanelColor = {
+var lightPanelColors = {
   info: colors.B50,
   note: colors.P50,
   tip: colors.G50,
@@ -121,20 +111,28 @@ var darkPanelColors = {
 };
 exports.darkPanelColors = darkPanelColors;
 var lightIconColor = {
-  info: (0, _tokens.token)('color.icon.information', colors.B400),
-  note: (0, _tokens.token)('color.icon.discovery', colors.P400),
-  tip: (0, _tokens.token)('color.icon.success', colors.G400),
-  success: (0, _tokens.token)('color.icon.success', colors.G400),
-  warning: (0, _tokens.token)('color.icon.warning', colors.Y400),
-  error: (0, _tokens.token)('color.icon.danger', colors.R400)
+  info: "var(--ds-icon-information, ".concat(colors.B400, ")"),
+  note: "var(--ds-icon-discovery, ".concat(colors.P400, ")"),
+  tip: "var(--ds-icon-success, ".concat(colors.G400, ")"),
+  success: "var(--ds-icon-success, ".concat(colors.G400, ")"),
+  warning: "var(--ds-icon-warning, ".concat(colors.Y400, ")"),
+  error: "var(--ds-icon-danger, ".concat(colors.R400, ")")
 };
 var darkIconColor = {
-  info: (0, _tokens.token)('color.icon.information', colors.B100),
-  note: (0, _tokens.token)('color.icon.discovery', colors.P100),
-  tip: (0, _tokens.token)('color.icon.success', colors.G200),
-  success: (0, _tokens.token)('color.icon.success', colors.G200),
-  warning: (0, _tokens.token)('color.icon.warning', colors.Y100),
-  error: (0, _tokens.token)('color.icon.danger', colors.R200)
+  info: "var(--ds-icon-information, ".concat(colors.B100, ")"),
+  note: "var(--ds-icon-discovery, ".concat(colors.P100, ")"),
+  tip: "var(--ds-icon-success, ".concat(colors.G200, ")"),
+  success: "var(--ds-icon-success, ".concat(colors.G200, ")"),
+  warning: "var(--ds-icon-warning, ".concat(colors.Y100, ")"),
+  error: "var(--ds-icon-danger, ".concat(colors.R200, ")")
+};
+var tokenDarkPanelColors = {
+  info: "var(--ds-background-information, ".concat(darkPanelColors['info'], ")"),
+  note: "var(--ds-background-discovery, ".concat(darkPanelColors['note'], ")"),
+  tip: "var(--ds-background-success, ".concat(darkPanelColors['tip'], ")"),
+  success: "var(--ds-background-success, ".concat(darkPanelColors['success'], ")"),
+  warning: "var(--ds-background-warning, ".concat(darkPanelColors['warning'], ")"),
+  error: "var(--ds-background-danger, ".concat(darkPanelColors['error'], ")")
 }; // New custom icons are a little smaller than predefined icons.
 // To fix alignment issues with custom icons, vertical alignment is updated.
 
@@ -212,7 +210,7 @@ var iconDynamicStyles = function iconDynamicStyles(panelType) {
 
 var getPanelTypeBackgroundNoTokens = function getPanelTypeBackgroundNoTokens(panelType) {
   var props = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
-  var light = lightPanelColor[panelType];
+  var light = lightPanelColors[panelType];
   var dark = darkPanelColors[panelType];
   var background = (0, _components.themed)({
     light: light,
@@ -225,11 +223,9 @@ exports.getPanelTypeBackgroundNoTokens = getPanelTypeBackgroundNoTokens;
 
 var getPanelTypeBackground = function getPanelTypeBackground(panelType) {
   var props = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
-  // TODO: https://product-fabric.atlassian.net/browse/DSP-4066
+  var light = (0, _editorPalette.hexToEditorBackgroundPaletteColor)(lightPanelColors[panelType]); // hexToEditorBackgroundPaletteColor has a light mode as a fallback color - for legacy dark mode we define the tokens locally
 
-  /* eslint-disable @atlaskit/design-system/no-unsafe-design-token-usage */
-  var light = (0, _editorPalette.hexToEditorBackgroundPaletteColor)(lightPanelColor[panelType]);
-  var dark = (0, _tokens.token)(tokenPanelColor[panelType], darkPanelColors[panelType]);
+  var dark = tokenDarkPanelColors[panelType];
   var background = (0, _components.themed)({
     light: light,
     dark: dark

package/dist/cjs/styles/shared/rule.js

@@ -17,13 +17,11 @@ var _colors = require("@atlaskit/theme/colors");
 
 var _components = require("@atlaskit/theme/components");
 
-var _tokens = require("@atlaskit/tokens");
-
 var _templateObject;
 
 var divider = (0, _components.themed)({
-  light: (0, _tokens.token)('color.border', _colors.N30A),
-  dark: (0, _tokens.token)('color.border', _colors.DN50)
+  light: "var(--ds-border, ".concat(_colors.N30A, ")"),
+  dark: "var(--ds-border, ".concat(_colors.DN50, ")")
 }); // @see typography spreadsheet: https://docs.google.com/spreadsheets/d/1iYusRGCT4PoPfvxbJ8NrgjtfFgXLm5lpDWXzjua1W2E/edit#gid=93913128
 
 var ruleSharedStyles = function ruleSharedStyles(props) {

package/dist/cjs/styles/shared/shadow.js

@@ -15,8 +15,6 @@ var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
 
 var _colors = require("@atlaskit/theme/colors");
 
-var _tokens = require("@atlaskit/tokens");
-
 var _OverflowShadow = require("../../ui/OverflowShadow");
 
 var _shadowObserver = require("../../ui/OverflowShadow/shadowObserver");
@@ -38,5 +36,5 @@ var shadowWidth = 8;
  *      background-attachment: local, local, scroll, scroll;
  */
 
-var shadowSharedStyle = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  &\n    .", "::before,\n    .", "::after,\n    .", "::before,\n    .", "::after {\n    display: none;\n    position: absolute;\n    pointer-events: none;\n    z-index: ", ";\n    width: ", "px;\n    content: '';\n    /* Scrollbar is outside the content in IE, inset in other browsers. */\n    height: calc(100%);\n  }\n\n  & .", ", .", " {\n    position: relative;\n  }\n\n  & .", "::before {\n    background: linear-gradient(\n        to left,\n        transparent 0,\n        ", " 100%\n      ),\n      linear-gradient(\n        to right,\n        ", " 0px,\n        transparent 1px\n      );\n    top: 0px;\n    left: 0;\n    display: block;\n  }\n\n  & .", "::after {\n    background: linear-gradient(\n        to right,\n        transparent 0,\n        ", " 100%\n      ),\n      linear-gradient(\n        to left,\n        ", " 0px,\n        transparent 1px\n      );\n    left: calc(100% - ", "px);\n    top: 0px;\n    display: block;\n  }\n\n  & .", " {\n    height: 100%;\n    width: 0px;\n    min-width: 0px;\n  }\n\n  & .", " {\n    height: 100%;\n    width: 0px;\n    min-width: 0px;\n  }\n"])), _OverflowShadow.shadowClassNames.RIGHT_SHADOW, _OverflowShadow.shadowClassNames.RIGHT_SHADOW, _OverflowShadow.shadowClassNames.LEFT_SHADOW, _OverflowShadow.shadowClassNames.LEFT_SHADOW, _editorSharedStyles.akEditorShadowZIndex, shadowWidth, _OverflowShadow.shadowClassNames.RIGHT_SHADOW, _OverflowShadow.shadowClassNames.LEFT_SHADOW, _OverflowShadow.shadowClassNames.LEFT_SHADOW, (0, _tokens.token)('elevation.shadow.overflow.spread', _colors.N40A), (0, _tokens.token)('elevation.shadow.overflow.perimeter', 'transparent'), _OverflowShadow.shadowClassNames.RIGHT_SHADOW, (0, _tokens.token)('elevation.shadow.overflow.spread', _colors.N40A), (0, _tokens.token)('elevation.shadow.overflow.perimeter', 'transparent'), shadowWidth, _shadowObserver.shadowObserverClassNames.SENTINEL_LEFT, _shadowObserver.shadowObserverClassNames.SENTINEL_RIGHT);
+var shadowSharedStyle = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  &\n    .", "::before,\n    .", "::after,\n    .", "::before,\n    .", "::after {\n    display: none;\n    position: absolute;\n    pointer-events: none;\n    z-index: ", ";\n    width: ", "px;\n    content: '';\n    /* Scrollbar is outside the content in IE, inset in other browsers. */\n    height: calc(100%);\n  }\n\n  & .", ", .", " {\n    position: relative;\n  }\n\n  & .", "::before {\n    background: linear-gradient(\n        to left,\n        transparent 0,\n        ", " 100%\n      ),\n      linear-gradient(\n        to right,\n        ", " 0px,\n        transparent 1px\n      );\n    top: 0px;\n    left: 0;\n    display: block;\n  }\n\n  & .", "::after {\n    background: linear-gradient(\n        to right,\n        transparent 0,\n        ", " 100%\n      ),\n      linear-gradient(\n        to left,\n        ", " 0px,\n        transparent 1px\n      );\n    left: calc(100% - ", "px);\n    top: 0px;\n    display: block;\n  }\n\n  & .", " {\n    height: 100%;\n    width: 0px;\n    min-width: 0px;\n  }\n\n  & .", " {\n    height: 100%;\n    width: 0px;\n    min-width: 0px;\n  }\n"])), _OverflowShadow.shadowClassNames.RIGHT_SHADOW, _OverflowShadow.shadowClassNames.RIGHT_SHADOW, _OverflowShadow.shadowClassNames.LEFT_SHADOW, _OverflowShadow.shadowClassNames.LEFT_SHADOW, _editorSharedStyles.akEditorShadowZIndex, shadowWidth, _OverflowShadow.shadowClassNames.RIGHT_SHADOW, _OverflowShadow.shadowClassNames.LEFT_SHADOW, _OverflowShadow.shadowClassNames.LEFT_SHADOW, "var(--ds-shadow-overflow-spread, ".concat(_colors.N40A, ")"), "var(--ds-shadow-overflow-perimeter, transparent)", _OverflowShadow.shadowClassNames.RIGHT_SHADOW, "var(--ds-shadow-overflow-spread, ".concat(_colors.N40A, ")"), "var(--ds-shadow-overflow-perimeter, transparent)", shadowWidth, _shadowObserver.shadowObserverClassNames.SENTINEL_LEFT, _shadowObserver.shadowObserverClassNames.SENTINEL_RIGHT);
 exports.shadowSharedStyle = shadowSharedStyle;

package/dist/cjs/styles/shared/table.js

@@ -21,8 +21,6 @@ var _components = require("@atlaskit/theme/components");
 
 var _constants = require("@atlaskit/theme/constants");
 
-var _tokens = require("@atlaskit/tokens");
-
 var _browser = _interopRequireDefault(require("../../utils/browser"));
 
 var _codeBlock = require("./code-block");
@@ -64,43 +62,43 @@ exports.TableSharedCssClassName = TableSharedCssClassName;
 
 var tableSharedStyle = function tableSharedStyle(props) {
   return (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  .", " {\n    position: relative;\n    margin: 0 auto ", "px;\n    box-sizing: border-box;\n\n    /**\n     * Fix block top alignment inside table cells.\n     */\n    .decisionItemView-content-wrap:first-of-type > div {\n      margin-top: 0;\n    }\n  }\n  .", "[data-number-column='true'] {\n    padding-left: ", "px;\n    clear: both;\n  }\n  .", " > table {\n    margin: ", "px 0 0 0;\n  }\n\n  .", " > table,\n  .", " > table {\n    margin: ", "px ", "px 0 0;\n  }\n\n  /* avoid applying styles to nested tables (possible via extensions) */\n  .", " > table,\n  .", " > table,\n  .", " > table {\n    border-collapse: collapse;\n    border: ", "px solid\n      ", ";\n    table-layout: fixed;\n    font-size: 1em;\n    width: 100%;\n\n    &[data-autosize='true'] {\n      table-layout: auto;\n    }\n\n    & {\n      * {\n        box-sizing: border-box;\n      }\n      hr {\n        box-sizing: content-box;\n      }\n\n      tbody {\n        border-bottom: none;\n      }\n      th td {\n        background-color: ", ";\n      }\n      th,\n      td {\n        min-width: ", "px;\n        font-weight: normal;\n        vertical-align: top;\n        border: 1px solid\n          ", ";\n        border-right-width: 0;\n        border-bottom-width: 0;\n        padding: ", "px;\n        /* https://stackoverflow.com/questions/7517127/borders-not-shown-in-firefox-with-border-collapse-on-table-position-relative-o */\n        ", "\n\n        ", ";\n\n        > :first-child:not(style),\n        > style:first-child + * {\n          margin-top: 0;\n        }\n\n        > .ProseMirror-gapcursor:first-child + *,\n        > style:first-child + .ProseMirror-gapcursor + * {\n          margin-top: 0;\n        }\n\n        > .ProseMirror-gapcursor:first-child + span + *,\n        > style:first-child + .ProseMirror-gapcursor + span + * {\n          margin-top: 0;\n        }\n\n        th p:not(:first-of-type),\n        td p:not(:first-of-type) {\n          margin-top: 12px;\n        }\n      }\n      th {\n        background-color: ", ";\n        text-align: left;\n\n        /* only apply this styling to codeblocks in default background headercells */\n        /* TODO this needs to be overhauled as it relies on unsafe selectors */\n        &:not([style]):not(.danger) {\n          .", ":not(.danger) {\n            background-color: ", ";\n\n            :not(.", ") {\n              box-shadow: 0px 0px 0px 1px\n                ", ";\n            }\n\n            .", " {\n              background-image: ", ";\n\n              background-color: ", ";\n            }\n\n            .", " {\n              background-color: ", ";\n            }\n\n            /* this is only relevant to the element taken care of by renderer */\n            > [data-ds--code--code-block] {\n              background-image: ", "!important;\n\n              background-color: ", "!important;\n\n              // selector lives inside @atlaskit/code\n              --ds--code--line-number-bg-color: ", ";\n            }\n          }\n        }\n      }\n    }\n  }\n"])), TableSharedCssClassName.TABLE_CONTAINER, tableMarginBottom, TableSharedCssClassName.TABLE_CONTAINER, _editorSharedStyles.akEditorTableNumberColumnWidth - 1, TableSharedCssClassName.TABLE_NODE_WRAPPER, tableMarginTop, TableSharedCssClassName.TABLE_CONTAINER, TableSharedCssClassName.TABLE_STICKY_WRAPPER, tableMarginTop, tableMarginSides, TableSharedCssClassName.TABLE_CONTAINER, TableSharedCssClassName.TABLE_NODE_WRAPPER, TableSharedCssClassName.TABLE_STICKY_WRAPPER, tableCellBorderWidth, (0, _components.themed)({
-    light: (0, _tokens.token)('color.border', _editorSharedStyles.akEditorTableBorder),
-    dark: (0, _tokens.token)('color.border', _editorSharedStyles.akEditorTableBorderDark)
-  })(props), (0, _tokens.token)('color.background.neutral.subtle', 'white'), tableCellMinWidth, (0, _components.themed)({
-    light: (0, _tokens.token)('color.border', _editorSharedStyles.akEditorTableBorder),
-    dark: (0, _tokens.token)('color.border', _editorSharedStyles.akEditorTableBorderDark)
+    light: "var(--ds-border, ".concat(_editorSharedStyles.akEditorTableBorder, ")"),
+    dark: "var(--ds-border, ".concat(_editorSharedStyles.akEditorTableBorderDark, ")")
+  })(props), "var(--ds-background-neutral-subtle, white)", tableCellMinWidth, (0, _components.themed)({
+    light: "var(--ds-border, ".concat(_editorSharedStyles.akEditorTableBorder, ")"),
+    dark: "var(--ds-border, ".concat(_editorSharedStyles.akEditorTableBorderDark, ")")
   })(props), tableCellPadding, _browser.default.gecko || _browser.default.ie || _browser.default.mac && _browser.default.chrome ? 'background-clip: padding-box;' : '', (0, _components.themed)({
     dark: _editorSharedStyles.getTableCellBackgroundDarkModeColors
   })(props), (0, _components.themed)({
-    light: (0, _tokens.token)('color.background.neutral', _editorSharedStyles.akEditorTableToolbar),
-    dark: (0, _tokens.token)('color.background.neutral', _editorSharedStyles.akEditorTableToolbarDark)
+    light: "var(--ds-background-neutral, ".concat(_editorSharedStyles.akEditorTableToolbar, ")"),
+    dark: "var(--ds-background-neutral, ".concat(_editorSharedStyles.akEditorTableToolbarDark, ")")
   })(props), _codeBlock.CodeBlockSharedCssClassName.CODEBLOCK_CONTAINER, (0, _components.themed)({
-    light: (0, _tokens.token)('elevation.surface.raised', 'rgb(235, 237, 240)'),
-    dark: (0, _tokens.token)('elevation.surface.raised', 'rgb(36, 47, 66)')
-  })(props), _editorSharedStyles.akEditorSelectedNodeClassName, (0, _tokens.token)('color.border', 'transparent'), _codeBlock.CodeBlockSharedCssClassName.CODEBLOCK_CONTENT_WRAPPER, (0, _editorSharedStyles.overflowShadow)({
+    light: "var(--ds-surface-raised, rgb(235, 237, 240))",
+    dark: "var(--ds-surface-raised, rgb(36, 47, 66))"
+  })(props), _editorSharedStyles.akEditorSelectedNodeClassName, "var(--ds-border, transparent)", _codeBlock.CodeBlockSharedCssClassName.CODEBLOCK_CONTENT_WRAPPER, (0, _editorSharedStyles.overflowShadow)({
     background: (0, _components.themed)({
-      light: (0, _tokens.token)('color.background.neutral', 'rgb(235, 237, 240)'),
-      dark: (0, _tokens.token)('color.background.neutral', 'rgb(36, 47, 66)')
+      light: "var(--ds-background-neutral, rgb(235, 237, 240))",
+      dark: "var(--ds-background-neutral, rgb(36, 47, 66))"
     })(props),
     leftCoverWidth: "".concat((0, _constants.gridSize)() * 3, "px")
   }), (0, _components.themed)({
-    light: (0, _tokens.token)('color.background.neutral', 'rgb(235, 237, 240)'),
-    dark: (0, _tokens.token)('color.background.neutral', 'rgb(36, 47, 66)')
+    light: "var(--ds-background-neutral, rgb(235, 237, 240))",
+    dark: "var(--ds-background-neutral, rgb(36, 47, 66))"
   })(props), _codeBlock.CodeBlockSharedCssClassName.CODEBLOCK_LINE_NUMBER_GUTTER, (0, _components.themed)({
-    light: (0, _tokens.token)('color.background.neutral', 'rgb(226, 229, 233)'),
-    dark: (0, _tokens.token)('color.background.neutral', _colors.DN20)
+    light: "var(--ds-background-neutral, rgb(226, 229, 233))",
+    dark: "var(--ds-background-neutral, ".concat(_colors.DN20, ")")
   })(props), (0, _editorSharedStyles.overflowShadow)({
     background: (0, _components.themed)({
-      light: (0, _tokens.token)('color.background.neutral', 'rgb(235, 237, 240)'),
-      dark: (0, _tokens.token)('color.background.neutral', 'rgb(36, 47, 66)')
+      light: "var(--ds-background-neutral, rgb(235, 237, 240))",
+      dark: "var(--ds-background-neutral, rgb(36, 47, 66))"
     })(props),
     leftCoverWidth: "".concat((0, _constants.gridSize)() * 3, "px")
   }), (0, _components.themed)({
-    light: (0, _tokens.token)('color.background.neutral', 'rgb(235, 237, 240)'),
-    dark: (0, _tokens.token)('color.background.neutral', 'rgb(36, 47, 66)')
+    light: "var(--ds-background-neutral, rgb(235, 237, 240))",
+    dark: "var(--ds-background-neutral, rgb(36, 47, 66))"
   })(props), (0, _components.themed)({
-    light: (0, _tokens.token)('color.background.neutral', 'rgb(226, 229, 233)'),
-    dark: (0, _tokens.token)('color.background.neutral', _colors.DN20)
+    light: "var(--ds-background-neutral, rgb(226, 229, 233))",
+    dark: "var(--ds-background-neutral, ".concat(_colors.DN20, ")")
   })(props));
 };
 

package/dist/cjs/ui/Caption/index.js

@@ -29,8 +29,6 @@ var _reactIntlNext = require("react-intl-next");
 
 var _colors = require("@atlaskit/theme/colors");
 
-var _tokens = require("@atlaskit/tokens");
-
 var _messages = require("./messages");
 
 var _templateObject, _templateObject2;
@@ -39,8 +37,8 @@ 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 captionWrapperStyle = (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  margin-top: 8px;\n  text-align: center;\n  position: relative;\n  color: ", ";\n"])), (0, _tokens.token)('color.text.subtle', _colors.N400));
-var placeholderStyle = (0, _react2.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  color: ", ";\n  position: absolute;\n  top: 0;\n  width: 100%;\n"])), (0, _tokens.token)('color.text.subtlest', _colors.N200));
+var captionWrapperStyle = (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  margin-top: 8px;\n  text-align: center;\n  position: relative;\n  color: ", ";\n"])), "var(--ds-text-subtle, ".concat(_colors.N400, ")"));
+var placeholderStyle = (0, _react2.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  color: ", ";\n  position: absolute;\n  top: 0;\n  width: 100%;\n"])), "var(--ds-text-subtlest, ".concat(_colors.N200, ")"));
 
 var CaptionComponent = /*#__PURE__*/function (_React$Component) {
   (0, _inherits2.default)(CaptionComponent, _React$Component);

package/dist/cjs/ui/DropList/index.js

@@ -35,8 +35,6 @@ var _components = require("@atlaskit/theme/components");
 
 var _constants = require("@atlaskit/theme/constants");
 
-var _tokens = require("@atlaskit/tokens");
-
 var _Layer = _interopRequireDefault(require("../Layer"));
 
 var _templateObject, _templateObject2, _templateObject3;
@@ -46,7 +44,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/editor-common";
-var packageVersion = "72.0.0";
+var packageVersion = "72.0.1";
 var halfFocusRing = 1;
 var dropOffset = "0, ".concat((0, _constants.gridSize)(), "px");
 
@@ -69,11 +67,11 @@ var DropList = /*#__PURE__*/function (_Component) {
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "triggerStyles", (0, _react2.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n    transition-duration: 0.2s;\n    transition: box-shadow 0.15s cubic-bezier(0.47, 0.03, 0.49, 1.38);\n    ", "\n  "])), _this.props.shouldFitContainer ? 'display: block; box-sizing: border-box;' : 'display: inline-flex;'));
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "menuWrapper", function (theme) {
       return (0, _react2.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n      color: ", ";\n      background-color: ", ";\n      border-radius: ", "px;\n      box-shadow: 0 ", "px ", "px -", "px ", ",\n        0 0 1px ", ";\n      box-sizing: border-box;\n      overflow: auto;\n      padding: ", "px 0;\n      max-height: 90vh;\n    "])), (0, _components.themed)({
-        light: (0, _tokens.token)('color.text', _colors.N900),
-        dark: (0, _tokens.token)('color.text', _colors.DN600)
+        light: "var(--ds-text, ".concat(_colors.N900, ")"),
+        dark: "var(--ds-text, ".concat(_colors.DN600, ")")
       })(theme), (0, _components.themed)({
-        light: (0, _tokens.token)('elevation.surface.overlay', _colors.N0),
-        dark: (0, _tokens.token)('elevation.surface.overlay', _colors.DN50)
+        light: "var(--ds-surface-overlay, ".concat(_colors.N0, ")"),
+        dark: "var(--ds-surface-overlay, ".concat(_colors.DN50, ")")
       })(theme), (0, _constants.borderRadius)(), (0, _constants.gridSize)() / 2, (0, _constants.gridSize)(), (0, _constants.gridSize)() / 4, _colors.N50A, _colors.N60A, (0, _constants.gridSize)() / 2);
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "componentDidMount", function () {

package/dist/cjs/ui/Expand/index.js

@@ -29,8 +29,6 @@ var _components = require("@atlaskit/theme/components");
 
 var _constants = require("@atlaskit/theme/constants");
 
-var _tokens = require("@atlaskit/tokens");
-
 var _excluded = ["children"];
 
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7;
@@ -63,16 +61,16 @@ var messages = (0, _reactIntlNext.defineMessages)({
 });
 exports.messages = messages;
 var BORDER_RADIUS = (0, _constants.gridSize)() / 2;
-var EXPAND_COLLAPSED_BACKGROUND = (0, _tokens.token)('color.background.neutral.subtle', 'transparent');
+var EXPAND_COLLAPSED_BACKGROUND = "var(--ds-background-neutral-subtle, transparent)";
 var EXPAND_SELECTED_BACKGROUND = (0, _components.themed)({
-  light: (0, _tokens.token)('elevation.surface', 'rgba(255, 255, 255, 0.6)'),
-  dark: (0, _tokens.token)('elevation.surface', 'rgba(9, 10, 11, 0.29)')
+  light: "var(--ds-surface, rgba(255, 255, 255, 0.6))",
+  dark: "var(--ds-surface, rgba(9, 10, 11, 0.29))"
 });
-var EXPAND_FOCUSED_BORDER_COLOR = (0, _tokens.token)('color.border.focused', colors.B300);
+var EXPAND_FOCUSED_BORDER_COLOR = "var(--ds-border-focused, ".concat(colors.B300, ")");
 var EXPAND_COLLAPSED_BORDER_COLOR = 'transparent';
 var EXPAND_EXPANDED_BORDER_COLOR = (0, _components.themed)({
-  light: (0, _tokens.token)('color.border', colors.N40A),
-  dark: (0, _tokens.token)('color.border', colors.DN50)
+  light: "var(--ds-border, ".concat(colors.N40A, ")"),
+  dark: "var(--ds-border, ".concat(colors.DN50, ")")
 });
 
 var ExpandIconWrapper = function ExpandIconWrapper(_ref) {
@@ -89,9 +87,9 @@ exports.ExpandIconWrapper = ExpandIconWrapper;
 
 var expandIconWrapperStyle = function expandIconWrapperStyle(props) {
   return (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  cursor: pointer;\n  display: flex;\n  color: ", ";\n  border-radius: ", "px;\n  width: 24px;\n  height: 24px;\n\n  &:hover {\n    background: ", ";\n  }\n\n  svg {\n    transition: transform 0.2s ", ";\n  }\n"])), (0, _components.themed)({
-    light: (0, _tokens.token)('color.icon', colors.N90),
-    dark: (0, _tokens.token)('color.icon', '#d9dde3')
-  })(props), (0, _constants.gridSize)() / 2, (0, _tokens.token)('color.background.neutral.subtle.hovered', colors.N30A), _editorSharedStyles.akEditorSwoopCubicBezier);
+    light: "var(--ds-icon, ".concat(colors.N90, ")"),
+    dark: "var(--ds-icon, #d9dde3)"
+  })(props), (0, _constants.gridSize)() / 2, "var(--ds-background-neutral-subtle-hovered, ".concat(colors.N30A, ")"), _editorSharedStyles.akEditorSwoopCubicBezier);
 };
 
 var expandIconWrapperExpandedStyle = (0, _react2.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  svg {\n    transform: rotate(90deg);\n  }\n"])));
@@ -119,8 +117,8 @@ var containerStyles = function containerStyles(styleProps) {
   var margin = "".concat(marginTop, " ").concat(marginHorizontal, " ").concat(marginBottom);
   return function (themeProps) {
     return (0, _react2.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n    border-width: 1px;\n    border-style: solid;\n    border-color: ", ";\n    border-radius: ", "px;\n    min-height: 25px;\n    background: ", ";\n    margin: ", ";\n\n    transition: background 0.3s ", ",\n      border-color 0.3s ", ";\n    padding: ", "px;\n\n    &:hover {\n      // TODO: Remove the border styles below once design tokens have been enabled and fallbacks are no longer triggered.\n      // This is because the default state already uses the same token and, as such, the hover style won't change anything.\n      // https://product-fabric.atlassian.net/browse/DSP-4152\n      border: 1px solid\n        ", ";\n      background: ", ";\n    }\n\n    td > :not(style):first-child,\n    td > style:first-child + * {\n      margin-top: 0;\n    }\n  "])), focused ? EXPAND_FOCUSED_BORDER_COLOR : expanded ? EXPAND_EXPANDED_BORDER_COLOR(themeProps) : EXPAND_COLLAPSED_BORDER_COLOR, BORDER_RADIUS, !expanded ? EXPAND_COLLAPSED_BACKGROUND : EXPAND_SELECTED_BACKGROUND(themeProps), margin, _editorSharedStyles.akEditorSwoopCubicBezier, _editorSharedStyles.akEditorSwoopCubicBezier, (0, _constants.gridSize)(), (0, _components.themed)({
-      light: (0, _tokens.token)('color.border', colors.N50A),
-      dark: (0, _tokens.token)('color.border', colors.DN50)
+      light: "var(--ds-border, ".concat(colors.N50A, ")"),
+      dark: "var(--ds-border, ".concat(colors.DN50, ")")
     })(themeProps), EXPAND_SELECTED_BACKGROUND(themeProps));
   };
 };
@@ -133,18 +131,18 @@ var contentStyles = function contentStyles(styleProps) {
 
 var titleInputStyles = function titleInputStyles(props) {
   return (0, _react2.css)(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n  outline: none;\n  border: none;\n  font-size: ", ";\n  line-height: ", ";\n  font-weight: normal;\n  color: ", ";\n  background: transparent;\n  display: flex;\n  flex: 1;\n  padding: 0 0 0 ", "px;\n  width: 100%;\n\n  &::placeholder {\n    opacity: 0.6;\n    color: ", ";\n  }\n"])), (0, _editorSharedStyles.relativeFontSizeToBase16)((0, _constants.fontSize)()), _editorSharedStyles.akEditorLineHeight, (0, _components.themed)({
-    light: (0, _tokens.token)('color.text.subtlest', colors.N200A),
-    dark: (0, _tokens.token)('color.text.subtlest', colors.DN600)
+    light: "var(--ds-text-subtlest, ".concat(colors.N200A, ")"),
+    dark: "var(--ds-text-subtlest, ".concat(colors.DN600, ")")
   })(props), (0, _constants.gridSize)() / 2, (0, _components.themed)({
-    light: (0, _tokens.token)('color.text.subtlest', colors.N200A),
-    dark: (0, _tokens.token)('color.text.subtlest', colors.DN600)
+    light: "var(--ds-text-subtlest, ".concat(colors.N200A, ")"),
+    dark: "var(--ds-text-subtlest, ".concat(colors.DN600, ")")
   })(props));
 };
 
 var titleContainerStyles = function titleContainerStyles(props) {
   return (0, _react2.css)(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n  padding: 0;\n  display: flex;\n  align-items: flex-start;\n  background: none;\n  border: none;\n  font-size: ", ";\n  width: 100%;\n  color: ", ";\n  overflow: hidden;\n  cursor: pointer;\n  // Prevent browser selection being inside the title container\n  user-select: none;\n\n  &:focus {\n    outline: 0;\n  }\n"])), (0, _editorSharedStyles.relativeFontSizeToBase16)((0, _constants.fontSize)()), (0, _components.themed)({
-    light: (0, _tokens.token)('color.text.subtle', colors.N300A),
-    dark: (0, _tokens.token)('color.text.subtle', colors.DN600)
+    light: "var(--ds-text-subtle, ".concat(colors.N300A, ")"),
+    dark: "var(--ds-text-subtle, ".concat(colors.DN600, ")")
   })(props));
 };
 

package/dist/cjs/ui/Messages/index.js

@@ -21,15 +21,13 @@ var _constants = require("@atlaskit/theme/constants");
 
 var _typography = require("@atlaskit/theme/typography");
 
-var _tokens = require("@atlaskit/tokens");
-
 var _templateObject, _templateObject2, _templateObject3, _templateObject4;
 
-var errorColor = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  color: ", ";\n"])), (0, _tokens.token)('color.text.danger', _colors.R400));
-var validColor = (0, _react.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  color: ", ";\n"])), (0, _tokens.token)('color.text.success', _colors.G400));
+var errorColor = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  color: ", ";\n"])), "var(--ds-text-danger, ".concat(_colors.R400, ")"));
+var validColor = (0, _react.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  color: ", ";\n"])), "var(--ds-text-success, ".concat(_colors.G400, ")"));
 
 var messageStyle = function messageStyle(props) {
-  return (0, _react.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  ", " font-weight: normal;\n  color: ", ";\n  margin-top: ", "px;\n  display: flex;\n  justify-content: baseline;\n"])), (0, _typography.h200)(props), (0, _tokens.token)('color.text.subtlest', _colors.N200), (0, _constants.gridSize)() / 2);
+  return (0, _react.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  ", " font-weight: normal;\n  color: ", ";\n  margin-top: ", "px;\n  display: flex;\n  justify-content: baseline;\n"])), (0, _typography.h200)(props), "var(--ds-text-subtlest, ".concat(_colors.N200, ")"), (0, _constants.gridSize)() / 2);
 };
 
 var iconWrapperStyle = (0, _react.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  margin-right: 4px;\n"])));

package/dist/cjs/ui/UnsupportedBlock/index.js

@@ -25,8 +25,6 @@ var _colors = require("@atlaskit/theme/colors");
 
 var _constants = require("@atlaskit/theme/constants");
 
-var _tokens = require("@atlaskit/tokens");
-
 var _tooltip = _interopRequireDefault(require("@atlaskit/tooltip"));
 
 var _analytics = require("../../analytics");
@@ -43,7 +41,7 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 
 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; }
 
-var blockNodeStyle = (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  background: ", ";\n  border: 1px dashed ", ";\n  border-radius: ", "px;\n  box-sizing: border-box;\n  cursor: default;\n  display: flex;\n  font-size: ", ";\n  margin: 10px 0;\n  min-height: 24px;\n  padding: 10px;\n  text-align: center;\n  vertical-align: text-bottom;\n  min-width: 120px;\n  align-items: center;\n  justify-content: center;\n"])), (0, _tokens.token)('color.background.disabled', _colors.N30), (0, _tokens.token)('color.border.disabled', _colors.N50), (0, _constants.borderRadius)(), (0, _editorSharedStyles.relativeFontSizeToBase16)((0, _constants.fontSize)()));
+var blockNodeStyle = (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  background: ", ";\n  border: 1px dashed ", ";\n  border-radius: ", "px;\n  box-sizing: border-box;\n  cursor: default;\n  display: flex;\n  font-size: ", ";\n  margin: 10px 0;\n  min-height: 24px;\n  padding: 10px;\n  text-align: center;\n  vertical-align: text-bottom;\n  min-width: 120px;\n  align-items: center;\n  justify-content: center;\n"])), "var(--ds-background-disabled, ".concat(_colors.N30, ")"), "var(--ds-border-disabled, ".concat(_colors.N50, ")"), (0, _constants.borderRadius)(), (0, _editorSharedStyles.relativeFontSizeToBase16)((0, _constants.fontSize)()));
 
 var UnsupportedBlockNode = function UnsupportedBlockNode(_ref) {
   var node = _ref.node,