@atlaskit/editor-common 72.0.0 → 72.1.0

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/PortalProvider/PortalProviderThemesProvider.js

@@ -45,16 +45,9 @@ function PortalProviderThemeProviders(props) {
     };
   }, [mode]);
 
-  return (
-    /*#__PURE__*/
-    // TODO: ED-15585
-    // import { ThemeProvider as DeprectateStyledComponentsProvider } from 'styled-components';
-    // <DeprectateStyledComponentsProvider theme={styledComponentsAndEmotionTheme}>
-    // </DeprectateStyledComponentsProvider>
-    _react.default.createElement(_react2.ThemeProvider, {
-      theme: styledComponentsAndEmotionTheme
-    }, /*#__PURE__*/_react.default.createElement(_components.default.Provider, {
-      value: atlaskitTheme
-    }, children))
-  );
+  return /*#__PURE__*/_react.default.createElement(_react2.ThemeProvider, {
+    theme: styledComponentsAndEmotionTheme
+  }, /*#__PURE__*/_react.default.createElement(_components.default.Provider, {
+    value: atlaskitTheme
+  }, children));
 }

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,

package/dist/cjs/ui/UnsupportedInline/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 inlineNodeStyle = (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  align-items: center;\n  background: ", ";\n  border: 1px dashed ", ";\n  border-radius: ", "px;\n  box-sizing: border-box;\n  cursor: default;\n  display: inline-flex;\n  font-size: ", ";\n  margin: 0 2px;\n  min-height: 24px;\n  padding: 0 10px;\n  vertical-align: middle;\n  white-space: nowrap;\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 inlineNodeStyle = (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  align-items: center;\n  background: ", ";\n  border: 1px dashed ", ";\n  border-radius: ", "px;\n  box-sizing: border-box;\n  cursor: default;\n  display: inline-flex;\n  font-size: ", ";\n  margin: 0 2px;\n  min-height: 24px;\n  padding: 0 10px;\n  vertical-align: middle;\n  white-space: nowrap;\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 UnsupportedInlineNode = function UnsupportedInlineNode(_ref) {
   var node = _ref.node,

package/dist/cjs/ui-color/ColorPalette/Palettes/textColorPalette.js

@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.textColorPaletteExtended = exports.textColorPalette = void 0;
+exports.textColorPalette = void 0;
 
 var _adfSchema = require("@atlaskit/adf-schema");
 
@@ -29,13 +29,7 @@ var mapPaletteColor = function mapPaletteColor(label, color) {
 
 var textColorPalette = [];
 exports.textColorPalette = textColorPalette;
-var textColorPaletteExtended = [];
-exports.textColorPaletteExtended = textColorPaletteExtended;
 
 _adfSchema.colorPalette.forEach(function (label, color) {
   textColorPalette.push(mapPaletteColor(label, color));
-});
-
-_adfSchema.colorPaletteExtended.forEach(function (label, color) {
-  textColorPaletteExtended.push(mapPaletteColor(label, color));
 });

package/dist/cjs/ui-color/ColorPalette/index.js

@@ -50,7 +50,7 @@ function getCheckMarkColor(color, textPalette) {
   // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
 
 
-  return contrastColor === _colors.N0 ? (0, _tokens.token)('color.icon.inverse', _colors.N0) : (0, _tokens.token)('color.icon', _colors.N500);
+  return contrastColor === _colors.N0 ? "var(--ds-icon-inverse, ".concat(_colors.N0, ")") : "var(--ds-icon, ".concat(_colors.N500, ")");
 }
 
 var ColorPalette = function ColorPalette(props) {

package/dist/cjs/ui-color/index.js

@@ -65,12 +65,6 @@ Object.defineProperty(exports, "textColorPalette", {
     return _textColorPalette.textColorPalette;
   }
 });
-Object.defineProperty(exports, "textColorPaletteExtended", {
-  enumerable: true,
-  get: function get() {
-    return _textColorPalette.textColorPaletteExtended;
-  }
-});
 
 var _ColorPalette = _interopRequireDefault(require("./ColorPalette"));
 

package/dist/cjs/ui-menu/DropdownMenu/index.js

@@ -41,8 +41,6 @@ var _colors = require("@atlaskit/theme/colors");
 
 var _components = require("@atlaskit/theme/components");
 
-var _tokens = require("@atlaskit/tokens");
-
 var _tooltip = _interopRequireDefault(require("@atlaskit/tooltip"));
 
 var _uiReact = require("../../ui-react");
@@ -66,7 +64,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 wrapper = (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  /* tooltip in ToolbarButton is display:block */\n  & > div > div {\n    display: flex;\n  }\n"])));
-var focusedMenuItemStyle = (0, _react2.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  box-shadow: inset 0px 0px 0px 2px ", ";\n  outline: none;\n"])), (0, _tokens.token)('color.border.focused', _colors.B100));
+var focusedMenuItemStyle = (0, _react2.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  box-shadow: inset 0px 0px 0px 2px ", ";\n  outline: none;\n"])), "var(--ds-border-focused, ".concat(_colors.B100, ")"));
 
 var buttonStyles = function buttonStyles(isActive) {
   return function (theme) {
@@ -74,20 +72,20 @@ var buttonStyles = function buttonStyles(isActive) {
       /**
        * Hack for item to imitate old dropdown-menu selected styles
        */
-      return (0, _react2.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n      > span,\n      > span:hover,\n      > span:active {\n        background: ", ";\n        color: ", ";\n      }\n      :focus > span[aria-disabled='false'] {\n        ", ";\n      }\n      :focus-visible,\n      :focus-visible > span[aria-disabled='false'] {\n        outline: none;\n      }\n    "])), (0, _tokens.token)('color.background.selected', '#6c798f'), (0, _tokens.token)('color.text', '#fff'), focusedMenuItemStyle);
+      return (0, _react2.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n      > span,\n      > span:hover,\n      > span:active {\n        background: ", ";\n        color: ", ";\n      }\n      :focus > span[aria-disabled='false'] {\n        ", ";\n      }\n      :focus-visible,\n      :focus-visible > span[aria-disabled='false'] {\n        outline: none;\n      }\n    "])), "var(--ds-background-selected, #6c798f)", "var(--ds-text, #fff)", focusedMenuItemStyle);
     } else {
       return (0, _react2.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n      > span:hover[aria-disabled='false'] {\n        color: ", ";\n        background-color: ", ";\n      }\n      > span:active[aria-disabled='false'] {\n        background-color: ", ";\n      }\n      > span[aria-disabled='true'] {\n        color: ", ";\n      }\n      :focus > span[aria-disabled='false'] {\n        ", ";\n      }\n      :focus-visible,\n      :focus-visible > span[aria-disabled='false'] {\n        outline: none;\n      }\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)('color.background.neutral.subtle.hovered', 'rgb(244, 245, 247)'),
-        dark: (0, _tokens.token)('color.background.neutral.subtle.hovered', 'rgb(59, 71, 92)')
+        light: "var(--ds-background-neutral-subtle-hovered, rgb(244, 245, 247))",
+        dark: "var(--ds-background-neutral-subtle-hovered, rgb(59, 71, 92))"
       })(theme), (0, _components.themed)({
-        light: (0, _tokens.token)('color.background.neutral.subtle.pressed', 'rgb(179, 212, 255)'),
-        dark: (0, _tokens.token)('color.background.neutral.subtle.pressed', 'rgb(179, 212, 255)')
+        light: "var(--ds-background-neutral-subtle-pressed, rgb(179, 212, 255))",
+        dark: "var(--ds-background-neutral-subtle-pressed, rgb(179, 212, 255))"
       })(theme), (0, _components.themed)({
-        light: (0, _tokens.token)('color.text.disabled', _colors.N70),
-        dark: (0, _tokens.token)('color.text.disabled', _colors.DN80)
+        light: "var(--ds-text-disabled, ".concat(_colors.N70, ")"),
+        dark: "var(--ds-text-disabled, ".concat(_colors.DN80, ")")
       })(theme), focusedMenuItemStyle); // The deafut focus-visible style is removed to ensure consistency across browsers
     }
   };

package/dist/cjs/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/editor-common",
-	"version": "72.0.0",
+	"version": "72.1.0",
 	"sideEffects": false
 }

package/dist/es2019/analytics/types/enums.js

@@ -39,7 +39,7 @@ export let ACTION;
   ACTION["DISPATCHED_VALID_TRANSACTION"] = "dispatchedValidTransaction";
   ACTION["EDITED"] = "edited";
   ACTION["EDITOR_CRASHED"] = "unhandledErrorCaught";
-  ACTION["EDITOR_CRASHED_ADDITIONAL_INFORMATION"] = "unhandledErrorCaughtAdditionalInfo";
+  ACTION["EDITOR_CRASHED_ADDITIONAL_INFORMATION"] = "unhandledErrorCaughtAdditionalInfov2";
   ACTION["EDITOR_MOUNTED"] = "mounted";
   ACTION["EDITOR_TTI"] = "tti";
   ACTION["EDITOR_CONTENT_RETRIEVAL_PERFORMED"] = "contentRetrievalPerformed";

package/dist/es2019/keymaps/index.js

@@ -2,7 +2,6 @@
 import React, { Fragment } from 'react';
 import { css, jsx } from '@emotion/react';
 import { N400 } from '@atlaskit/theme/colors';
-import { token } from '@atlaskit/tokens';
 import { browser } from '../utils';
 export const addAltText = makeKeyMapWithCommon('Add Alt Text', 'Mod-Alt-y');
 export const toggleBold = makeKeyMapWithCommon('Bold', 'Mod-b');
@@ -75,7 +74,7 @@ const arrowKeysMap = {
 };
 const tooltipShortcutStyle = css`
   border-radius: 2px;
-  background-color: ${token('color.background.inverse.subtle', N400)};
+  background-color: ${`var(--ds-background-inverse-subtle, ${N400})`};
   padding: 0 2px;
 
   /* TODO: fix in develop: https://atlassian.slack.com/archives/CFG3PSQ9E/p1647395052443259?thread_ts=1647394572.556029&cid=CFG3PSQ9E */

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

@@ -1,7 +1,6 @@
 import { css } from '@emotion/react';
 import { N60A, Y300, Y75 } from '@atlaskit/theme/colors';
 import { themed } from '@atlaskit/theme/components';
-import { token } from '@atlaskit/tokens';
 export const annotationPrefix = 'ak-editor-annotation';
 export const AnnotationSharedClassNames = {
   focus: `${annotationPrefix}-focus`,
@@ -20,27 +19,27 @@ export const AnnotationSharedCSSByState = props => ({
     // emotion and token look up
 
     background: ${themed({
-    light: token('color.background.accent.yellow.subtler', Y75),
-    dark: token('color.background.accent.yellow.subtler', DY75)
+    light: `var(--ds-background-accent-yellow-subtler, ${Y75})`,
+    dark: `var(--ds-background-accent-yellow-subtler, ${DY75})`
   })(props)};
     border-bottom: 2px solid
       ${themed({
-    light: token('color.border.accent.yellow', Y300),
-    dark: token('color.border.accent.yellow', DY300)
+    light: `var(--ds-border-accent-yellow, ${Y300})`,
+    dark: `var(--ds-border-accent-yellow, ${DY300})`
   })(props)};
     // TODO: https://product-fabric.atlassian.net/browse/DSP-4147
-    box-shadow: ${token('elevation.shadow.overlay', `1px 2px 3px ${N60A}, -1px 2px 3px ${N60A}`)};
+    box-shadow: ${`var(--ds-shadow-overlay, ${`1px 2px 3px ${N60A}, -1px 2px 3px ${N60A}`})`};
     cursor: pointer;
   `,
   blur: css`
     background: ${themed({
-    light: token('color.background.accent.yellow.subtlest', Y75a),
-    dark: token('color.background.accent.yellow.subtlest', DY75a)
+    light: `var(--ds-background-accent-yellow-subtlest, ${Y75a})`,
+    dark: `var(--ds-background-accent-yellow-subtlest, ${DY75a})`
   })(props)};
     border-bottom: 2px solid
       ${themed({
-    light: token('color.border.accent.yellow', Y200a),
-    dark: token('color.border.accent.yellow', DY200)
+    light: `var(--ds-border-accent-yellow, ${Y200a})`,
+    dark: `var(--ds-border-accent-yellow, ${DY200})`
   })(props)};
     cursor: pointer;
   `

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

@@ -1,13 +1,12 @@
 import { css } from '@emotion/react';
 import { akEditorBlockquoteBorderColor, blockNodesVerticalMargin } from '@atlaskit/editor-shared-styles';
 import { gridSize } from '@atlaskit/theme/constants';
-import { token } from '@atlaskit/tokens';
 export const blockquoteSharedStyles = css`
   & blockquote {
     box-sizing: border-box;
     padding-left: ${gridSize() * 2}px;
     border-left: 2px solid
-      ${token('color.border', akEditorBlockquoteBorderColor)};
+      ${`var(--ds-border, ${akEditorBlockquoteBorderColor})`};
     margin: ${blockNodesVerticalMargin} 0 0 0;
     margin-right: 0;
 

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

@@ -3,7 +3,6 @@ import { akEditorCodeFontFamily, akEditorLineHeight, akEditorTableCellMinWidth,
 import { DN20, DN400, DN50, DN800, N20, N30, N400, N800 } from '@atlaskit/theme/colors';
 import { themed } from '@atlaskit/theme/components';
 import { borderRadius, fontSize, gridSize } from '@atlaskit/theme/constants';
-import { token } from '@atlaskit/tokens';
 export const CodeBlockSharedCssClassName = {
   CODEBLOCK_CONTAINER: 'code-block',
   CODEBLOCK_START: 'code-block--start',
@@ -16,7 +15,7 @@ export const CodeBlockSharedCssClassName = {
 export const codeBlockSharedStyles = props => css`
   .${CodeBlockSharedCssClassName.CODEBLOCK_CONTAINER} {
     position: relative;
-    background-color: ${token('elevation.surface.raised', 'transparent')};
+    background-color: ${"var(--ds-surface-raised, transparent)"};
     border-radius: ${borderRadius()}px;
     margin: ${blockNodesVerticalMargin} 0 0 0;
     font-family: ${akEditorCodeFontFamily};
@@ -46,8 +45,8 @@ export const codeBlockSharedStyles = props => css`
 
     .${CodeBlockSharedCssClassName.CODEBLOCK_CONTENT_WRAPPER} {
       background-color: ${themed({
-  light: token('color.background.neutral', N20),
-  dark: token('color.background.neutral', DN50)
+  light: `var(--ds-background-neutral, ${N20})`,
+  dark: `var(--ds-background-neutral, ${DN50})`
 })(props)};
       display: flex;
       border-radius: ${borderRadius()}px;
@@ -57,8 +56,8 @@ export const codeBlockSharedStyles = props => css`
 
       background-image: ${overflowShadow({
   background: themed({
-    light: token('color.background.neutral', N20),
-    dark: token('color.background.neutral', DN50)
+    light: `var(--ds-background-neutral, ${N20})`,
+    dark: `var(--ds-background-neutral, ${DN50})`
   })(props),
   leftCoverWidth: `${gridSize() * 3}px`
 })};
@@ -79,8 +78,8 @@ export const codeBlockSharedStyles = props => css`
       flex-shrink: 0;
       text-align: right;
       background-color: ${themed({
-  light: token('color.background.neutral', N30),
-  dark: token('color.background.neutral', DN20)
+  light: `var(--ds-background-neutral, ${N30})`,
+  dark: `var(--ds-background-neutral, ${DN20})`
 })(props)};
       padding: ${gridSize()}px;
       position: relative;
@@ -95,8 +94,8 @@ export const codeBlockSharedStyles = props => css`
           content: counter(line);
           counter-increment: line;
           color: ${themed({
-  light: token('color.text.subtlest', N400),
-  dark: token('color.text.subtlest', DN400)
+  light: `var(--ds-text-subtlest, ${N400})`,
+  dark: `var(--ds-text-subtlest, ${DN400})`
 })(props)};
           font-size: ${relativeFontSizeToBase16(fontSize())};
           line-height: 1.5rem;
@@ -113,8 +112,8 @@ export const codeBlockSharedStyles = props => css`
         tab-size: 4;
         cursor: text;
         color: ${themed({
-  light: token('color.text', N800),
-  dark: token('color.text', DN800)
+  light: `var(--ds-text, ${N800})`,
+  dark: `var(--ds-text, ${DN800})`
 })(props)};
         border-radius: ${borderRadius()}px;
         margin: ${gridSize()}px;

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

@@ -2,14 +2,13 @@ import { css } from '@emotion/react';
 import { getCodeStyles } from '@atlaskit/code/inline';
 import { DN70, N30A } from '@atlaskit/theme/colors';
 import { getTheme, themed } from '@atlaskit/theme/components';
-import { token } from '@atlaskit/tokens';
 export const codeMarkSharedStyles = props => {
   const theme = getTheme(props);
   return css`
     .code {
       --ds--code--bg-color: ${themed({
-    light: token('color.background.neutral', N30A),
-    dark: token('color.background.neutral', DN70)
+    light: `var(--ds-background-neutral, ${N30A})`,
+    dark: `var(--ds-background-neutral, ${DN70})`
   })(props)};
       ${getCodeStyles(theme)}
     }

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

@@ -8,16 +8,7 @@ import { emojiImage, emojiSprite } from '@atlaskit/emoji';
 import * as colors from '@atlaskit/theme/colors';
 import { themed } from '@atlaskit/theme/components';
 import { borderRadius, gridSize } from '@atlaskit/theme/constants';
-import { token } from '@atlaskit/tokens';
-const 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'
-};
-const lightPanelColor = {
+const lightPanelColors = {
   info: colors.B50,
   note: colors.P50,
   tip: colors.G50,
@@ -88,20 +79,28 @@ export const darkPanelColors = {
   TextColor: '#D9DDE3'
 };
 const lightIconColor = {
-  info: token('color.icon.information', colors.B400),
-  note: token('color.icon.discovery', colors.P400),
-  tip: token('color.icon.success', colors.G400),
-  success: token('color.icon.success', colors.G400),
-  warning: token('color.icon.warning', colors.Y400),
-  error: token('color.icon.danger', colors.R400)
+  info: `var(--ds-icon-information, ${colors.B400})`,
+  note: `var(--ds-icon-discovery, ${colors.P400})`,
+  tip: `var(--ds-icon-success, ${colors.G400})`,
+  success: `var(--ds-icon-success, ${colors.G400})`,
+  warning: `var(--ds-icon-warning, ${colors.Y400})`,
+  error: `var(--ds-icon-danger, ${colors.R400})`
 };
 const darkIconColor = {
-  info: token('color.icon.information', colors.B100),
-  note: token('color.icon.discovery', colors.P100),
-  tip: token('color.icon.success', colors.G200),
-  success: token('color.icon.success', colors.G200),
-  warning: token('color.icon.warning', colors.Y100),
-  error: token('color.icon.danger', colors.R200)
+  info: `var(--ds-icon-information, ${colors.B100})`,
+  note: `var(--ds-icon-discovery, ${colors.P100})`,
+  tip: `var(--ds-icon-success, ${colors.G200})`,
+  success: `var(--ds-icon-success, ${colors.G200})`,
+  warning: `var(--ds-icon-warning, ${colors.Y100})`,
+  error: `var(--ds-icon-danger, ${colors.R200})`
+};
+const tokenDarkPanelColors = {
+  info: `var(--ds-background-information, ${darkPanelColors['info']})`,
+  note: `var(--ds-background-discovery, ${darkPanelColors['note']})`,
+  tip: `var(--ds-background-success, ${darkPanelColors['tip']})`,
+  success: `var(--ds-background-success, ${darkPanelColors['success']})`,
+  warning: `var(--ds-background-warning, ${darkPanelColors['warning']})`,
+  error: `var(--ds-background-danger, ${darkPanelColors['error']})`
 }; // New custom icons are a little smaller than predefined icons.
 // To fix alignment issues with custom icons, vertical alignment is updated.
 
@@ -168,7 +167,7 @@ const iconDynamicStyles = panelType => props => {
 
 
 export const getPanelTypeBackgroundNoTokens = (panelType, props = {}) => {
-  const light = lightPanelColor[panelType];
+  const light = lightPanelColors[panelType];
   const dark = darkPanelColors[panelType];
   const background = themed({
     light,
@@ -177,11 +176,9 @@ export const getPanelTypeBackgroundNoTokens = (panelType, props = {}) => {
   return background || 'none';
 };
 export const getPanelTypeBackground = (panelType, props = {}) => {
-  // TODO: https://product-fabric.atlassian.net/browse/DSP-4066
+  const light = 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 */
-  const light = hexToEditorBackgroundPaletteColor(lightPanelColor[panelType]);
-  const dark = token(tokenPanelColor[panelType], darkPanelColors[panelType]);
+  const dark = tokenDarkPanelColors[panelType];
   const background = themed({
     light,
     dark

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

@@ -2,10 +2,9 @@ import { css } from '@emotion/react';
 import { akEditorLineHeight } from '@atlaskit/editor-shared-styles';
 import { DN50, N30A } from '@atlaskit/theme/colors';
 import { themed } from '@atlaskit/theme/components';
-import { token } from '@atlaskit/tokens';
 const divider = themed({
-  light: token('color.border', N30A),
-  dark: token('color.border', DN50)
+  light: `var(--ds-border, ${N30A})`,
+  dark: `var(--ds-border, ${DN50})`
 }); // @see typography spreadsheet: https://docs.google.com/spreadsheets/d/1iYusRGCT4PoPfvxbJ8NrgjtfFgXLm5lpDWXzjua1W2E/edit#gid=93913128
 
 export const ruleSharedStyles = props => css`

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

@@ -2,7 +2,6 @@
 import { css } from '@emotion/react';
 import { akEditorShadowZIndex } from '@atlaskit/editor-shared-styles';
 import { N40A } from '@atlaskit/theme/colors';
-import { token } from '@atlaskit/tokens';
 import { shadowClassNames } from '../../ui/OverflowShadow';
 import { shadowObserverClassNames } from '../../ui/OverflowShadow/shadowObserver';
 const shadowWidth = 8;
@@ -44,11 +43,11 @@ const shadowSharedStyle = css`
     background: linear-gradient(
         to left,
         transparent 0,
-        ${token('elevation.shadow.overflow.spread', N40A)} 100%
+        ${`var(--ds-shadow-overflow-spread, ${N40A})`} 100%
       ),
       linear-gradient(
         to right,
-        ${token('elevation.shadow.overflow.perimeter', 'transparent')} 0px,
+        ${"var(--ds-shadow-overflow-perimeter, transparent)"} 0px,
         transparent 1px
       );
     top: 0px;
@@ -60,11 +59,11 @@ const shadowSharedStyle = css`
     background: linear-gradient(
         to right,
         transparent 0,
-        ${token('elevation.shadow.overflow.spread', N40A)} 100%
+        ${`var(--ds-shadow-overflow-spread, ${N40A})`} 100%
       ),
       linear-gradient(
         to left,
-        ${token('elevation.shadow.overflow.perimeter', 'transparent')} 0px,
+        ${"var(--ds-shadow-overflow-perimeter, transparent)"} 0px,
         transparent 1px
       );
     left: calc(100% - ${shadowWidth}px);