@atlaskit/editor-shared-styles 2.3.0 → 2.3.2

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # @atlaskit/editor-shared-styles
 
+## 2.3.2
+
+### Patch Changes
+
+- [`0d93211414e`](https://bitbucket.org/atlassian/atlassian-frontend/commits/0d93211414e) - Updates usage of removed design token `utilities.UNSAFE_util.transparent` in favour of its replacement `utilities.UNSAFE.transparent`.
+- Updated dependencies
+
+## 2.3.1
+
+### Patch Changes
+
+- [`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.
+
 ## 2.3.0
 
 ### Minor Changes

package/dist/cjs/consts/consts.js

@@ -1,23 +1,17 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.editorFontSize = exports.breakoutWideScaleRatio = exports.blockNodesVerticalMargin = exports.akRichMediaResizeZIndex = exports.akLayoutGutterOffset = exports.akEditorWideLayoutWidth = exports.akEditorUnitZIndex = exports.akEditorToolbarKeylineHeight = exports.akEditorTableToolbarSize = exports.akEditorTableToolbarSelected = exports.akEditorTableToolbarDelete = exports.akEditorTableToolbarDark = exports.akEditorTableToolbar = exports.akEditorTableNumberColumnWidth = exports.akEditorTableLegacyCellMinWidth = exports.akEditorTableFloatingControls = exports.akEditorTableCellSelected = exports.akEditorTableCellMinWidth = exports.akEditorTableCellDelete = exports.akEditorTableCellBackgroundOpacity = exports.akEditorTableBorderSelected = exports.akEditorTableBorderRadius = exports.akEditorTableBorderDelete = exports.akEditorTableBorderDark = exports.akEditorTableBorder = exports.akEditorSwoopCubicBezier = exports.akEditorSubtleAccent = exports.akEditorStickyHeaderZIndex = exports.akEditorSmallZIndex = exports.akEditorShadowZIndex = exports.akEditorSelectedNodeClassName = exports.akEditorSelectedIconColor = exports.akEditorSelectedBoxShadow = exports.akEditorSelectedBorderSize = exports.akEditorSelectedBorderColor = exports.akEditorSelectedBorderBoldSize = exports.akEditorSelectedBorder = exports.akEditorSelectedBlanketOpacity = exports.akEditorSelectedBlanketColor = exports.akEditorSelectedBgColor = exports.akEditorRuleBorderRadius = exports.akEditorRuleBackground = exports.akEditorPrimaryButton = exports.akEditorPopupText = exports.akEditorPopupBackground = exports.akEditorMobileMaxWidth = exports.akEditorMobileBreakoutPoint = exports.akEditorMenuZIndex = exports.akEditorMentionSelected = exports.akEditorMediaResizeHandlerPaddingWide = exports.akEditorMediaResizeHandlerPadding = exports.akEditorLineHeight = exports.akEditorInactiveForeground = exports.akEditorGutterPadding = exports.akEditorGridLineZIndex = exports.akEditorFullWidthLayoutWidth = exports.akEditorFullWidthLayoutLineLength = exports.akEditorFullPageMaxWidth = exports.akEditorFullPageDefaultFontSize = exports.akEditorFocus = exports.akEditorFloatingPanelZIndex = exports.akEditorFloatingOverlapPanelZIndex = exports.akEditorFloatingDialogZIndex = exports.akEditorDropdownActiveBackground = exports.akEditorDeleteIconColor = exports.akEditorDeleteBorder = exports.akEditorDeleteBackgroundWithOpacity = exports.akEditorDeleteBackgroundShaded = exports.akEditorDeleteBackground = exports.akEditorDefaultLayoutWidth = exports.akEditorCustomIconSize = exports.akEditorContextPanelWidth = exports.akEditorCodeInlinePadding = exports.akEditorCodeFontFamily = exports.akEditorCodeBlockPadding = exports.akEditorCodeBackground = exports.akEditorBreakoutPadding = exports.akEditorBlockquoteBorderColor = exports.akEditorActiveForeground = exports.akEditorActiveBackground = exports.VIEWPORT_SIZES = exports.DEFAULT_EMBED_CARD_WIDTH = exports.DEFAULT_EMBED_CARD_HEIGHT = exports.ATLASSIAN_NAVIGATION_HEIGHT = void 0;
 exports.getTableCellBackgroundDarkModeColorCSS = getTableCellBackgroundDarkModeColorCSS;
 exports.relativeSize = exports.relativeFontSizeToBase16 = exports.gridMediumMaxWidth = exports.getTableCellBackgroundDarkModeColors = void 0;
-
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
-
 var _colors = require("@atlaskit/theme/colors");
-
 var _constants = require("@atlaskit/theme/constants");
-
-var _tokens = require("@atlaskit/tokens");
-
 /* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
+
 var akEditorFullPageDefaultFontSize = 16;
 exports.akEditorFullPageDefaultFontSize = akEditorFullPageDefaultFontSize;
 var akEditorCodeFontFamily = (0, _constants.codeFontFamily)();
@@ -53,7 +47,6 @@ exports.akEditorDeleteBackground = akEditorDeleteBackground;
 var akEditorDeleteBackgroundShaded = _colors.R50;
 exports.akEditorDeleteBackgroundShaded = akEditorDeleteBackgroundShaded;
 var akEditorDeleteBackgroundWithOpacity = 'rgba(255, 189, 173, 0.5)'; // R75 with 50% opacity
-
 exports.akEditorDeleteBackgroundWithOpacity = akEditorDeleteBackgroundWithOpacity;
 var akEditorDeleteBorder = _colors.R300;
 exports.akEditorDeleteBorder = akEditorDeleteBorder;
@@ -69,9 +62,9 @@ var akEditorSelectedBlanketColor = _colors.B75;
 exports.akEditorSelectedBlanketColor = akEditorSelectedBlanketColor;
 var akEditorSelectedBorderSize = 1;
 exports.akEditorSelectedBorderSize = akEditorSelectedBorderSize;
-var akEditorSelectedBorder = "".concat(akEditorSelectedBorderSize, "px solid ").concat((0, _tokens.token)('color.border.selected', akEditorSelectedBorderColor));
+var akEditorSelectedBorder = "".concat(akEditorSelectedBorderSize, "px solid ", "var(--ds-border-selected, ".concat(akEditorSelectedBorderColor, ")"));
 exports.akEditorSelectedBorder = akEditorSelectedBorder;
-var akEditorSelectedBoxShadow = "0 0 0 ".concat(akEditorSelectedBorderSize, "px ").concat((0, _tokens.token)('color.border.selected', akEditorSelectedBorderColor));
+var akEditorSelectedBoxShadow = "0 0 0 ".concat(akEditorSelectedBorderSize, "px ", "var(--ds-border-selected, ".concat(akEditorSelectedBorderColor, ")"));
 exports.akEditorSelectedBoxShadow = akEditorSelectedBoxShadow;
 var akEditorSelectedIconColor = _colors.B400;
 exports.akEditorSelectedIconColor = akEditorSelectedIconColor;
@@ -84,26 +77,21 @@ exports.akEditorUnitZIndex = akEditorUnitZIndex;
 var akEditorShadowZIndex = 2;
 exports.akEditorShadowZIndex = akEditorShadowZIndex;
 var akEditorStickyHeaderZIndex = 11; // filmstrip uses 10 for its shadow
-
 exports.akEditorStickyHeaderZIndex = akEditorStickyHeaderZIndex;
 var akEditorSmallZIndex = akEditorStickyHeaderZIndex + 1;
 exports.akEditorSmallZIndex = akEditorSmallZIndex;
-var akEditorGridLineZIndex = 9999; // z-index for main menu bar -
+var akEditorGridLineZIndex = 9999;
+// z-index for main menu bar -
 // this is highest as it should be above anything else in editor below.
-
 exports.akEditorGridLineZIndex = akEditorGridLineZIndex;
-
-var akEditorMenuZIndex = _constants.layers.blanket(); // z-index used for floating toolbars like code block, table etc
-
-
+var akEditorMenuZIndex = _constants.layers.blanket();
+// z-index used for floating toolbars like code block, table etc
 exports.akEditorMenuZIndex = akEditorMenuZIndex;
-
-var akEditorFloatingPanelZIndex = _constants.layers.layer(); // z-index used for pickers (date, emoji, mentions) and type-aheads, hyperlinks
-
-
+var akEditorFloatingPanelZIndex = _constants.layers.layer();
+// z-index used for pickers (date, emoji, mentions) and type-aheads, hyperlinks
 exports.akEditorFloatingPanelZIndex = akEditorFloatingPanelZIndex;
-var akEditorFloatingDialogZIndex = akEditorMenuZIndex + 10; // z-index used for floating toolbars table cell menu which are above block toolbars
-
+var akEditorFloatingDialogZIndex = akEditorMenuZIndex + 10;
+// z-index used for floating toolbars table cell menu which are above block toolbars
 exports.akEditorFloatingDialogZIndex = akEditorFloatingDialogZIndex;
 var akEditorFloatingOverlapPanelZIndex = akEditorFloatingPanelZIndex + 5;
 exports.akEditorFloatingOverlapPanelZIndex = akEditorFloatingOverlapPanelZIndex;
@@ -181,8 +169,9 @@ var akEditorRuleBorderRadius = '1px';
 exports.akEditorRuleBorderRadius = akEditorRuleBorderRadius;
 var akEditorToolbarKeylineHeight = 2;
 exports.akEditorToolbarKeylineHeight = akEditorToolbarKeylineHeight;
-var akEditorContextPanelWidth = 320; // @see typography spreadsheet: https://docs.google.com/spreadsheets/d/1iYusRGCT4PoPfvxbJ8NrgjtfFgXLm5lpDWXzjua1W2E/edit#gid=93913128
+var akEditorContextPanelWidth = 320;
 
+// @see typography spreadsheet: https://docs.google.com/spreadsheets/d/1iYusRGCT4PoPfvxbJ8NrgjtfFgXLm5lpDWXzjua1W2E/edit#gid=93913128
 exports.akEditorContextPanelWidth = akEditorContextPanelWidth;
 var blockNodesVerticalMargin = '0.75rem';
 exports.blockNodesVerticalMargin = blockNodesVerticalMargin;
@@ -194,14 +183,11 @@ var ATLASSIAN_NAVIGATION_HEIGHT = '56px';
 exports.ATLASSIAN_NAVIGATION_HEIGHT = ATLASSIAN_NAVIGATION_HEIGHT;
 var akEditorSelectedNodeClassName = 'ak-editor-selected-node';
 exports.akEditorSelectedNodeClassName = akEditorSelectedNodeClassName;
-
 var editorFontSize = function editorFontSize(_ref) {
   var theme = _ref.theme;
   return theme && theme.baseFontSize ? theme.baseFontSize : (0, _constants.fontSize)();
 };
-
 exports.editorFontSize = editorFontSize;
-
 var relativeSize = function relativeSize(multiplier) {
   return function (_ref2) {
     var theme = _ref2.theme;
@@ -210,21 +196,16 @@ var relativeSize = function relativeSize(multiplier) {
     }) * multiplier;
   };
 };
-
 exports.relativeSize = relativeSize;
-
 var relativeFontSizeToBase16 = function relativeFontSizeToBase16(px) {
   if (typeof px === 'string') {
     px = parseInt(px);
   }
-
   if (isNaN(px)) {
     throw new Error("Invalid font size: '".concat(px, "'"));
   }
-
   return "".concat(px / 16, "rem");
 };
-
 exports.relativeFontSizeToBase16 = relativeFontSizeToBase16;
 var VIEWPORT_SIZES = {
   laptopHiDPI: {
@@ -255,20 +236,19 @@ var VIEWPORT_SIZES = {
     width: 320,
     height: 568
   }
-}; // to be updated in ED-10790: this should be variable threshold based on how many buttons enabled on main toolbar
+};
 
+// to be updated in ED-10790: this should be variable threshold based on how many buttons enabled on main toolbar
 exports.VIEWPORT_SIZES = VIEWPORT_SIZES;
 var akEditorMobileMaxWidth = 0;
 exports.akEditorMobileMaxWidth = akEditorMobileMaxWidth;
 var getTableCellBackgroundDarkModeColors = [['White', '#000000'], ['Light blue', '#0C294F'], ['Light teal', '#0C343B'], ['Light green', '#052E21'], ['Light yellow', '#484123'], ['Light red', '#441C13'], ['Light purple', '#282249'], ['Light gray', '#202328'], ['Blue', '#0B3165'], ['Teal', '#044853'], ['Green', '#053927'], ['Yellow', '#6F5C25'], ['Red', '#582013'], ['Purple', '#3E327B'], ['Gray', '#475262'], ['Dark blue', '#003884'], ['Dark teal', '#055866'], ['Dark green', '#044932'], ['Dark yellow', '#82641C'], ['Dark red', '#6B2A19'], ['Dark purple', '#4D38B2']].map(function (_ref3) {
   var _ref4 = (0, _slicedToArray2.default)(_ref3, 2),
-      colorName = _ref4[0],
-      colorValue = _ref4[1];
-
+    colorName = _ref4[0],
+    colorValue = _ref4[1];
   return getTableCellBackgroundDarkModeColorCSS(colorName, colorValue);
 }).join('\n');
 exports.getTableCellBackgroundDarkModeColors = getTableCellBackgroundDarkModeColors;
-
 function getTableCellBackgroundDarkModeColorCSS(colorName, colorValue) {
   return "\n  &[colorname=\"".concat(colorName, "\"] {\n    background-color: ").concat(colorValue, " !important; // !important to override default style color\n  }\n  ");
 }

package/dist/cjs/consts/index.js

@@ -531,5 +531,4 @@ Object.defineProperty(exports, "relativeSize", {
     return _consts.relativeSize;
   }
 });
-
 var _consts = require("./consts");

package/dist/cjs/index.js

@@ -549,9 +549,6 @@ Object.defineProperty(exports, "relativeSize", {
     return _consts.relativeSize;
   }
 });
-
 var _consts = require("./consts");
-
 var _selection = require("./selection");
-
 var _overflowShadow = require("./overflow-shadow");

package/dist/cjs/overflow-shadow/index.js

@@ -9,5 +9,4 @@ Object.defineProperty(exports, "overflowShadow", {
     return _overflowShadow.overflowShadow;
   }
 });
-
 var _overflowShadow = require("./overflow-shadow");

package/dist/cjs/overflow-shadow/overflow-shadow.js

@@ -1,31 +1,22 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.overflowShadow = void 0;
-
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
-
 var _react = require("@emotion/react");
-
 var _constants = require("@atlaskit/theme/constants");
-
-var _tokens = require("@atlaskit/tokens");
-
 var _templateObject;
-
 var overflowShadow = function overflowShadow(_ref) {
   var background = _ref.background,
-      _ref$width = _ref.width,
-      width = _ref$width === void 0 ? "".concat((0, _constants.gridSize)(), "px") : _ref$width,
-      leftCoverWidth = _ref.leftCoverWidth,
-      rightCoverWidth = _ref.rightCoverWidth;
+    _ref$width = _ref.width,
+    width = _ref$width === void 0 ? "".concat((0, _constants.gridSize)(), "px") : _ref$width,
+    leftCoverWidth = _ref.leftCoverWidth,
+    rightCoverWidth = _ref.rightCoverWidth;
   var leftCoverWidthResolved = leftCoverWidth || width;
   var rightCoverWidthResolved = rightCoverWidth || width;
-  return (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n/* shadow cover left */\n  linear-gradient(\n    to right,\n    ", " ", ",\n    transparent ", "\n  ),\n/* shadow cover background left */\n  linear-gradient(\n    to right,\n    ", " ", ",\n    transparent ", "\n  ),\n/* shadow cover right */\n  linear-gradient(\n    to left,\n    ", " ", ",\n    transparent ", "\n  ),\n/* shadow cover background right */\n  linear-gradient(\n    to left,\n    ", " ", ",\n    transparent ", "\n  ),\n/* overflow shadow right spread */\n  linear-gradient(\n    to left,\n    ", " 0,\n    ", "  ", "\n  ),\n  /* overflow shadow right perimeter */\n  linear-gradient(\n    to left,\n    ", " 0,\n    ", "  ", "\n  ),\n  /* overflow shadow left spread */\n  linear-gradient(\n    to right,\n    ", " 0,\n    ", "  ", "\n  ),\n  /* overflow shadow left perimeter */\n  linear-gradient(\n    to right,\n    ", " 0,\n    ", "  ", "\n  )\n"])), background, leftCoverWidthResolved, leftCoverWidthResolved, (0, _tokens.token)('elevation.surface.raised', 'transparent'), leftCoverWidthResolved, leftCoverWidthResolved, background, rightCoverWidthResolved, rightCoverWidthResolved, (0, _tokens.token)('elevation.surface.raised', 'transparent'), rightCoverWidthResolved, rightCoverWidthResolved, (0, _tokens.token)('elevation.shadow.overflow.spread', 'rgba(9, 30, 66, 0.13)'), (0, _tokens.token)('utility.UNSAFE_util.transparent', 'rgba(99, 114, 130, 0)'), width, (0, _tokens.token)('elevation.shadow.overflow.perimeter', 'transparent'), (0, _tokens.token)('utility.UNSAFE_util.transparent', 'transparent'), width, (0, _tokens.token)('elevation.shadow.overflow.spread', 'rgba(9, 30, 66, 0.13)'), (0, _tokens.token)('utility.UNSAFE_util.transparent', 'rgba(99, 114, 130, 0)'), width, (0, _tokens.token)('elevation.shadow.overflow.perimeter', 'transparent'), (0, _tokens.token)('utility.UNSAFE_util.transparent', 'transparent'), width);
+  return (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n/* shadow cover left */\n  linear-gradient(\n    to right,\n    ", " ", ",\n    transparent ", "\n  ),\n/* shadow cover background left */\n  linear-gradient(\n    to right,\n    ", " ", ",\n    transparent ", "\n  ),\n/* shadow cover right */\n  linear-gradient(\n    to left,\n    ", " ", ",\n    transparent ", "\n  ),\n/* shadow cover background right */\n  linear-gradient(\n    to left,\n    ", " ", ",\n    transparent ", "\n  ),\n/* overflow shadow right spread */\n  linear-gradient(\n    to left,\n    ", " 0,\n    ", "  ", "\n  ),\n  /* overflow shadow right perimeter */\n  linear-gradient(\n    to left,\n    ", " 0,\n    ", "  ", "\n  ),\n  /* overflow shadow left spread */\n  linear-gradient(\n    to right,\n    ", " 0,\n    ", "  ", "\n  ),\n  /* overflow shadow left perimeter */\n  linear-gradient(\n    to right,\n    ", " 0,\n    ", "  ", "\n  )\n"])), background, leftCoverWidthResolved, leftCoverWidthResolved, "var(--ds-surface-raised, transparent)", leftCoverWidthResolved, leftCoverWidthResolved, background, rightCoverWidthResolved, rightCoverWidthResolved, "var(--ds-surface-raised, transparent)", rightCoverWidthResolved, rightCoverWidthResolved, "var(--ds-shadow-overflow-spread, rgba(9, 30, 66, 0.13))", "var(--ds-UNSAFE-transparent, rgba(99, 114, 130, 0))", width, "var(--ds-shadow-overflow-perimeter, transparent)", "var(--ds-UNSAFE-transparent, transparent)", width, "var(--ds-shadow-overflow-spread, rgba(9, 30, 66, 0.13))", "var(--ds-UNSAFE-transparent, rgba(99, 114, 130, 0))", width, "var(--ds-shadow-overflow-perimeter, transparent)", "var(--ds-UNSAFE-transparent, transparent)", width);
 };
-
 exports.overflowShadow = overflowShadow;

package/dist/cjs/scrollbar-styles.js

@@ -4,12 +4,9 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.scrollbarStyles = void 0;
-
 var _constants = require("@atlaskit/theme/constants");
+var akGridSize = (0, _constants.gridSize)() + 'px';
 
-var _tokens = require("@atlaskit/tokens");
-
-var akGridSize = (0, _constants.gridSize)() + 'px'; // TODO: https://product-fabric.atlassian.net/browse/DSP-4494
-
-var scrollbarStyles = "\n  -ms-overflow-style: -ms-autohiding-scrollbar;\n\n  &::-webkit-scrollbar {\n    height: ".concat(akGridSize, ";\n    width: ").concat(akGridSize, ";\n  }\n\n  &::-webkit-scrollbar-corner {\n    display: none;\n  }\n\n  &::-webkit-scrollbar-thumb {\n    background-color: ").concat((0, _tokens.token)('color.background.neutral.subtle', 'rgba(0, 0, 0, 0)'), ";\n  }\n\n  &:hover::-webkit-scrollbar-thumb {\n    background-color: ").concat((0, _tokens.token)('color.background.neutral.bold', 'rgba(0, 0, 0, 0.2)'), ";\n    border-radius: ").concat(akGridSize, ";\n  }\n\n  &::-webkit-scrollbar-thumb:hover {\n    background-color: ").concat((0, _tokens.token)('color.background.neutral.bold.hovered', 'rgba(0, 0, 0, 0.4)'), ";\n  }\n");
+// TODO: https://product-fabric.atlassian.net/browse/DSP-4494
+var scrollbarStyles = "\n  -ms-overflow-style: -ms-autohiding-scrollbar;\n\n  &::-webkit-scrollbar {\n    height: ".concat(akGridSize, ";\n    width: ").concat(akGridSize, ";\n  }\n\n  &::-webkit-scrollbar-corner {\n    display: none;\n  }\n\n  &::-webkit-scrollbar-thumb {\n    background-color: ", "var(--ds-background-neutral-subtle, rgba(0, 0, 0, 0))", ";\n  }\n\n  &:hover::-webkit-scrollbar-thumb {\n    background-color: ", "var(--ds-background-neutral-bold, rgba(0, 0, 0, 0.2))", ";\n    border-radius: ").concat(akGridSize, ";\n  }\n\n  &::-webkit-scrollbar-thumb:hover {\n    background-color: ", "var(--ds-background-neutral-bold-hovered, rgba(0, 0, 0, 0.4))", ";\n  }\n");
 exports.scrollbarStyles = scrollbarStyles;

package/dist/cjs/selection/index.js

@@ -21,7 +21,5 @@ Object.defineProperty(exports, "hideNativeBrowserTextSelectionStyles", {
     return _utils.hideNativeBrowserTextSelectionStyles;
   }
 });
-
 var _types = require("./types");
-
 var _utils = require("./utils");

package/dist/cjs/selection/types.js

@@ -4,7 +4,6 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.SelectionStyle = void 0;
-
 /**
  * These are generic selection styles for all nodes
  * If you have custom behaviour needed for a node, add that in the plugin's styles
@@ -12,7 +11,6 @@ exports.SelectionStyle = void 0;
  */
 var SelectionStyle;
 exports.SelectionStyle = SelectionStyle;
-
 (function (SelectionStyle) {
   SelectionStyle[SelectionStyle["Border"] = 0] = "Border";
   SelectionStyle[SelectionStyle["BoxShadow"] = 1] = "BoxShadow";

package/dist/cjs/selection/utils.js

@@ -4,13 +4,8 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.hideNativeBrowserTextSelectionStyles = exports.getSelectionStyles = void 0;
-
-var _tokens = require("@atlaskit/tokens");
-
 var _consts = require("../consts");
-
 var _types = require("./types");
-
 /**
  * Adds correct selection styling for a node
  * Pass in which selection style properties you want and it will return css string of necessary styles
@@ -26,25 +21,19 @@ var getSelectionStyles = function getSelectionStyles(selectionStyles) {
     return getSelectionStyle(selectionStyle);
   }).concat(hideNativeBrowserTextSelectionStyles).join('\n');
 };
-
 exports.getSelectionStyles = getSelectionStyles;
 var hideNativeBrowserTextSelectionStyles = "\n  ::selection,*::selection {\n    background-color: transparent;\n  }\n  ::-moz-selection,*::-moz-selection {\n    background-color: transparent;\n  }\n";
 exports.hideNativeBrowserTextSelectionStyles = hideNativeBrowserTextSelectionStyles;
-
 var getSelectionStyle = function getSelectionStyle(style) {
   switch (style) {
     case _types.SelectionStyle.Border:
       return "\n        border: ".concat(_consts.akEditorSelectedBorder, ";\n\n        // Fixes ED-15246: Trello card is visible through a border of a table border\n        &::after {\n          height: 100%;\n          content: '\\00a0';\n          background: ").concat(_consts.akEditorSelectedBorderColor, ";\n          position: absolute;\n          right: -1px;\n          top: 0;\n          bottom: 0;\n          width: 1px;\n          border: none;\n          display: inline-block;\n        }\n      ");
-
     case _types.SelectionStyle.BoxShadow:
       return "\n        box-shadow: ".concat(_consts.akEditorSelectedBoxShadow, ";\n        border-color: transparent;\n        ");
-
     case _types.SelectionStyle.Background:
-      return "background-color: ".concat((0, _tokens.token)('color.background.selected', _consts.akEditorSelectedBgColor), ";");
-
+      return "background-color: ".concat("var(--ds-background-selected, ".concat(_consts.akEditorSelectedBgColor, ")"), ";");
     case _types.SelectionStyle.Blanket:
-      return "\n        position: relative;\n\n        // Fixes ED-9263, where emoji or inline card in panel makes selection go outside the panel\n        // in Safari. Looks like it's caused by user-select: all in the emoji element\n        -webkit-user-select: text;\n\n        ::before {\n          position: absolute;\n          content: '';\n          left: 0;\n          right: 0;\n          top: 0;\n          bottom: 0;\n          width: 100%;\n          pointer-events: none;\n          z-index: ".concat(_consts.akEditorSmallZIndex, ";\n          background-color: ").concat((0, _tokens.token)('color.blanket.selected', '#B3D4FF4C'), "\n        }");
-
+      return "\n        position: relative;\n\n        // Fixes ED-9263, where emoji or inline card in panel makes selection go outside the panel\n        // in Safari. Looks like it's caused by user-select: all in the emoji element\n        -webkit-user-select: text;\n\n        ::before {\n          position: absolute;\n          content: '';\n          left: 0;\n          right: 0;\n          top: 0;\n          bottom: 0;\n          width: 100%;\n          pointer-events: none;\n          z-index: ".concat(_consts.akEditorSmallZIndex, ";\n          background-color: ", "var(--ds-blanket-selected, #B3D4FF4C)", "\n        }");
     default:
       return '';
   }

package/dist/cjs/shortcut/index.js

@@ -9,5 +9,4 @@ Object.defineProperty(exports, "shortcutStyle", {
     return _shortcut.shortcutStyle;
   }
 });
-
 var _shortcut = require("./shortcut");

package/dist/cjs/shortcut/shortcut.js

@@ -1,25 +1,15 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.shortcutStyle = void 0;
-
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
-
 var _react = require("@emotion/react");
-
 var _colors = require("@atlaskit/theme/colors");
-
 var _constants = require("@atlaskit/theme/constants");
-
-var _tokens = require("@atlaskit/tokens");
-
 var _consts = require("../consts");
-
 var _templateObject;
-
-var shortcutStyle = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  background-color: ", "; /* N60 at 50% */\n  color: ", ";\n  border-radius: ", "px;\n  padding: 4px;\n  line-height: 12px;\n  font-size: ", ";\n  align-self: flex-end;\n  @media (max-width: ", "px) {\n    display: none;\n  }\n"])), (0, _tokens.token)('color.background.neutral', 'rgba(223, 225, 229, 0.5)'), (0, _tokens.token)('color.text.subtle', _colors.N100), (0, _constants.borderRadius)(), (0, _consts.relativeFontSizeToBase16)(11.67), _consts.akEditorMobileMaxWidth);
+var shortcutStyle = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  background-color: ", "; /* N60 at 50% */\n  color: ", ";\n  border-radius: ", "px;\n  padding: 4px;\n  line-height: 12px;\n  font-size: ", ";\n  align-self: flex-end;\n  @media (max-width: ", "px) {\n    display: none;\n  }\n"])), "var(--ds-background-neutral, rgba(223, 225, 229, 0.5))", "var(--ds-text-subtle, ".concat(_colors.N100, ")"), (0, _constants.borderRadius)(), (0, _consts.relativeFontSizeToBase16)(11.67), _consts.akEditorMobileMaxWidth);
 exports.shortcutStyle = shortcutStyle;

package/dist/cjs/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/editor-shared-styles",
-	"version": "2.3.0",
+	"version": "2.3.2",
 	"sideEffects": false
 }

package/dist/es2019/consts/consts.js

@@ -1,7 +1,6 @@
 /* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
 import { B100, B300, B400, B50, B75, DN50, DN70, N0, N100, N20, N30, N40, N50, N500, N700, N900, R300, R400, R50, R75 } from '@atlaskit/theme/colors';
 import { codeFontFamily, fontSize as defaultFontSize, gridSize, layers } from '@atlaskit/theme/constants';
-import { token } from '@atlaskit/tokens';
 export const akEditorFullPageDefaultFontSize = 16;
 export const akEditorCodeFontFamily = codeFontFamily();
 export const akEditorInactiveForeground = N500;
@@ -20,7 +19,6 @@ export const akEditorCodeInlinePadding = '2px 4px';
 export const akEditorDeleteBackground = R50;
 export const akEditorDeleteBackgroundShaded = R50;
 export const akEditorDeleteBackgroundWithOpacity = 'rgba(255, 189, 173, 0.5)'; // R75 with 50% opacity
-
 export const akEditorDeleteBorder = R300;
 export const akEditorDeleteIconColor = R400;
 export const akEditorCustomIconSize = 20;
@@ -28,25 +26,24 @@ export const akEditorSelectedBorderColor = B300;
 export const akEditorSelectedBgColor = B50;
 export const akEditorSelectedBlanketColor = B75;
 export const akEditorSelectedBorderSize = 1;
-export const akEditorSelectedBorder = `${akEditorSelectedBorderSize}px solid ${token('color.border.selected', akEditorSelectedBorderColor)}`;
-export const akEditorSelectedBoxShadow = `0 0 0 ${akEditorSelectedBorderSize}px ${token('color.border.selected', akEditorSelectedBorderColor)}`;
+export const akEditorSelectedBorder = `${akEditorSelectedBorderSize}px solid ${`var(--ds-border-selected, ${akEditorSelectedBorderColor})`}`;
+export const akEditorSelectedBoxShadow = `0 0 0 ${akEditorSelectedBorderSize}px ${`var(--ds-border-selected, ${akEditorSelectedBorderColor})`}`;
 export const akEditorSelectedIconColor = B400;
 export const akEditorSelectedBorderBoldSize = 2;
 export const akEditorSelectedBlanketOpacity = 0.3;
 export const akEditorUnitZIndex = 1;
 export const akEditorShadowZIndex = 2;
 export const akEditorStickyHeaderZIndex = 11; // filmstrip uses 10 for its shadow
-
 export const akEditorSmallZIndex = akEditorStickyHeaderZIndex + 1;
-export const akEditorGridLineZIndex = 9999; // z-index for main menu bar -
+export const akEditorGridLineZIndex = 9999;
+// z-index for main menu bar -
 // this is highest as it should be above anything else in editor below.
-
-export const akEditorMenuZIndex = layers.blanket(); // z-index used for floating toolbars like code block, table etc
-
-export const akEditorFloatingPanelZIndex = layers.layer(); // z-index used for pickers (date, emoji, mentions) and type-aheads, hyperlinks
-
-export const akEditorFloatingDialogZIndex = akEditorMenuZIndex + 10; // z-index used for floating toolbars table cell menu which are above block toolbars
-
+export const akEditorMenuZIndex = layers.blanket();
+// z-index used for floating toolbars like code block, table etc
+export const akEditorFloatingPanelZIndex = layers.layer();
+// z-index used for pickers (date, emoji, mentions) and type-aheads, hyperlinks
+export const akEditorFloatingDialogZIndex = akEditorMenuZIndex + 10;
+// z-index used for floating toolbars table cell menu which are above block toolbars
 export const akEditorFloatingOverlapPanelZIndex = akEditorFloatingPanelZIndex + 5;
 export const akEditorMentionSelected = N100;
 export const akEditorTableToolbarSize = 11;
@@ -85,8 +82,9 @@ export const akEditorLineHeight = 1.714;
 export const akEditorRuleBackground = N30;
 export const akEditorRuleBorderRadius = '1px';
 export const akEditorToolbarKeylineHeight = 2;
-export const akEditorContextPanelWidth = 320; // @see typography spreadsheet: https://docs.google.com/spreadsheets/d/1iYusRGCT4PoPfvxbJ8NrgjtfFgXLm5lpDWXzjua1W2E/edit#gid=93913128
+export const akEditorContextPanelWidth = 320;
 
+// @see typography spreadsheet: https://docs.google.com/spreadsheets/d/1iYusRGCT4PoPfvxbJ8NrgjtfFgXLm5lpDWXzjua1W2E/edit#gid=93913128
 export const blockNodesVerticalMargin = '0.75rem';
 export const DEFAULT_EMBED_CARD_WIDTH = 680;
 export const DEFAULT_EMBED_CARD_HEIGHT = 480;
@@ -104,11 +102,9 @@ export const relativeFontSizeToBase16 = px => {
   if (typeof px === 'string') {
     px = parseInt(px);
   }
-
   if (isNaN(px)) {
     throw new Error(`Invalid font size: '${px}'`);
   }
-
   return `${px / 16}rem`;
 };
 export const VIEWPORT_SIZES = {
@@ -140,8 +136,9 @@ export const VIEWPORT_SIZES = {
     width: 320,
     height: 568
   }
-}; // to be updated in ED-10790: this should be variable threshold based on how many buttons enabled on main toolbar
+};
 
+// to be updated in ED-10790: this should be variable threshold based on how many buttons enabled on main toolbar
 export const akEditorMobileMaxWidth = 0;
 export const getTableCellBackgroundDarkModeColors = [['White', '#000000'], ['Light blue', '#0C294F'], ['Light teal', '#0C343B'], ['Light green', '#052E21'], ['Light yellow', '#484123'], ['Light red', '#441C13'], ['Light purple', '#282249'], ['Light gray', '#202328'], ['Blue', '#0B3165'], ['Teal', '#044853'], ['Green', '#053927'], ['Yellow', '#6F5C25'], ['Red', '#582013'], ['Purple', '#3E327B'], ['Gray', '#475262'], ['Dark blue', '#003884'], ['Dark teal', '#055866'], ['Dark green', '#044932'], ['Dark yellow', '#82641C'], ['Dark red', '#6B2A19'], ['Dark purple', '#4D38B2']].map(([colorName, colorValue]) => getTableCellBackgroundDarkModeColorCSS(colorName, colorValue)).join('\n');
 export function getTableCellBackgroundDarkModeColorCSS(colorName, colorValue) {

package/dist/es2019/overflow-shadow/overflow-shadow.js

@@ -1,7 +1,6 @@
 /* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
 import { css } from '@emotion/react';
 import { gridSize } from '@atlaskit/theme/constants';
-import { token } from '@atlaskit/tokens';
 export const overflowShadow = ({
   background,
   width = `${gridSize()}px`,
@@ -20,7 +19,7 @@ export const overflowShadow = ({
 /* shadow cover background left */
   linear-gradient(
     to right,
-    ${token('elevation.surface.raised', 'transparent')} ${leftCoverWidthResolved},
+    ${"var(--ds-surface-raised, transparent)"} ${leftCoverWidthResolved},
     transparent ${leftCoverWidthResolved}
   ),
 /* shadow cover right */
@@ -32,32 +31,32 @@ export const overflowShadow = ({
 /* shadow cover background right */
   linear-gradient(
     to left,
-    ${token('elevation.surface.raised', 'transparent')} ${rightCoverWidthResolved},
+    ${"var(--ds-surface-raised, transparent)"} ${rightCoverWidthResolved},
     transparent ${rightCoverWidthResolved}
   ),
 /* overflow shadow right spread */
   linear-gradient(
     to left,
-    ${token('elevation.shadow.overflow.spread', 'rgba(9, 30, 66, 0.13)')} 0,
-    ${token('utility.UNSAFE_util.transparent', 'rgba(99, 114, 130, 0)')}  ${width}
+    ${"var(--ds-shadow-overflow-spread, rgba(9, 30, 66, 0.13))"} 0,
+    ${"var(--ds-UNSAFE-transparent, rgba(99, 114, 130, 0))"}  ${width}
   ),
   /* overflow shadow right perimeter */
   linear-gradient(
     to left,
-    ${token('elevation.shadow.overflow.perimeter', 'transparent')} 0,
-    ${token('utility.UNSAFE_util.transparent', 'transparent')}  ${width}
+    ${"var(--ds-shadow-overflow-perimeter, transparent)"} 0,
+    ${"var(--ds-UNSAFE-transparent, transparent)"}  ${width}
   ),
   /* overflow shadow left spread */
   linear-gradient(
     to right,
-    ${token('elevation.shadow.overflow.spread', 'rgba(9, 30, 66, 0.13)')} 0,
-    ${token('utility.UNSAFE_util.transparent', 'rgba(99, 114, 130, 0)')}  ${width}
+    ${"var(--ds-shadow-overflow-spread, rgba(9, 30, 66, 0.13))"} 0,
+    ${"var(--ds-UNSAFE-transparent, rgba(99, 114, 130, 0))"}  ${width}
   ),
   /* overflow shadow left perimeter */
   linear-gradient(
     to right,
-    ${token('elevation.shadow.overflow.perimeter', 'transparent')} 0,
-    ${token('utility.UNSAFE_util.transparent', 'transparent')}  ${width}
+    ${"var(--ds-shadow-overflow-perimeter, transparent)"} 0,
+    ${"var(--ds-UNSAFE-transparent, transparent)"}  ${width}
   )
 `;
 };

package/dist/es2019/scrollbar-styles.js

@@ -1,7 +1,7 @@
 import { gridSize } from '@atlaskit/theme/constants';
-import { token } from '@atlaskit/tokens';
-const akGridSize = gridSize() + 'px'; // TODO: https://product-fabric.atlassian.net/browse/DSP-4494
+const akGridSize = gridSize() + 'px';
 
+// TODO: https://product-fabric.atlassian.net/browse/DSP-4494
 export const scrollbarStyles = `
   -ms-overflow-style: -ms-autohiding-scrollbar;
 
@@ -15,15 +15,15 @@ export const scrollbarStyles = `
   }
 
   &::-webkit-scrollbar-thumb {
-    background-color: ${token('color.background.neutral.subtle', 'rgba(0, 0, 0, 0)')};
+    background-color: ${"var(--ds-background-neutral-subtle, rgba(0, 0, 0, 0))"};
   }
 
   &:hover::-webkit-scrollbar-thumb {
-    background-color: ${token('color.background.neutral.bold', 'rgba(0, 0, 0, 0.2)')};
+    background-color: ${"var(--ds-background-neutral-bold, rgba(0, 0, 0, 0.2))"};
     border-radius: ${akGridSize};
   }
 
   &::-webkit-scrollbar-thumb:hover {
-    background-color: ${token('color.background.neutral.bold.hovered', 'rgba(0, 0, 0, 0.4)')};
+    background-color: ${"var(--ds-background-neutral-bold-hovered, rgba(0, 0, 0, 0.4))"};
   }
 `;

package/dist/es2019/selection/types.js

@@ -4,7 +4,6 @@
  * file in editor-core
  */
 export let SelectionStyle;
-
 (function (SelectionStyle) {
   SelectionStyle[SelectionStyle["Border"] = 0] = "Border";
   SelectionStyle[SelectionStyle["BoxShadow"] = 1] = "BoxShadow";

package/dist/es2019/selection/utils.js

@@ -1,6 +1,6 @@
-import { token } from '@atlaskit/tokens';
 import { akEditorSelectedBgColor, akEditorSelectedBorder, akEditorSelectedBorderColor, akEditorSelectedBoxShadow, akEditorSmallZIndex } from '../consts';
 import { SelectionStyle } from './types';
+
 /**
  * Adds correct selection styling for a node
  * Pass in which selection style properties you want and it will return css string of necessary styles
@@ -11,7 +11,6 @@ import { SelectionStyle } from './types';
  *  }
  *
  */
-
 export const getSelectionStyles = selectionStyles => selectionStyles.map(selectionStyle => getSelectionStyle(selectionStyle)).concat(hideNativeBrowserTextSelectionStyles).join('\n');
 export const hideNativeBrowserTextSelectionStyles = `
   ::selection,*::selection {
@@ -21,7 +20,6 @@ export const hideNativeBrowserTextSelectionStyles = `
     background-color: transparent;
   }
 `;
-
 const getSelectionStyle = style => {
   switch (style) {
     case SelectionStyle.Border:
@@ -42,16 +40,13 @@ const getSelectionStyle = style => {
           display: inline-block;
         }
       `;
-
     case SelectionStyle.BoxShadow:
       return `
         box-shadow: ${akEditorSelectedBoxShadow};
         border-color: transparent;
         `;
-
     case SelectionStyle.Background:
-      return `background-color: ${token('color.background.selected', akEditorSelectedBgColor)};`;
-
+      return `background-color: ${`var(--ds-background-selected, ${akEditorSelectedBgColor})`};`;
     case SelectionStyle.Blanket:
       return `
         position: relative;
@@ -70,9 +65,8 @@ const getSelectionStyle = style => {
           width: 100%;
           pointer-events: none;
           z-index: ${akEditorSmallZIndex};
-          background-color: ${token('color.blanket.selected', '#B3D4FF4C')}
+          background-color: ${"var(--ds-blanket-selected, #B3D4FF4C)"}
         }`;
-
     default:
       return '';
   }

package/dist/es2019/shortcut/shortcut.js

@@ -1,11 +1,10 @@
 import { css } from '@emotion/react';
 import { N100 } from '@atlaskit/theme/colors';
 import { borderRadius } from '@atlaskit/theme/constants';
-import { token } from '@atlaskit/tokens';
 import { akEditorMobileMaxWidth, relativeFontSizeToBase16 } from '../consts';
 export const shortcutStyle = css`
-  background-color: ${token('color.background.neutral', 'rgba(223, 225, 229, 0.5)')}; /* N60 at 50% */
-  color: ${token('color.text.subtle', N100)};
+  background-color: ${"var(--ds-background-neutral, rgba(223, 225, 229, 0.5))"}; /* N60 at 50% */
+  color: ${`var(--ds-text-subtle, ${N100})`};
   border-radius: ${borderRadius()}px;
   padding: 4px;
   line-height: 12px;

package/dist/es2019/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/editor-shared-styles",
-	"version": "2.3.0",
+	"version": "2.3.2",
 	"sideEffects": false
 }

package/dist/esm/consts/consts.js

@@ -1,9 +1,7 @@
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
-
 /* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
 import { B100, B300, B400, B50, B75, DN50, DN70, N0, N100, N20, N30, N40, N50, N500, N700, N900, R300, R400, R50, R75 } from '@atlaskit/theme/colors';
 import { codeFontFamily, fontSize as defaultFontSize, gridSize, layers } from '@atlaskit/theme/constants';
-import { token } from '@atlaskit/tokens';
 export var akEditorFullPageDefaultFontSize = 16;
 export var akEditorCodeFontFamily = codeFontFamily();
 export var akEditorInactiveForeground = N500;
@@ -22,7 +20,6 @@ export var akEditorCodeInlinePadding = '2px 4px';
 export var akEditorDeleteBackground = R50;
 export var akEditorDeleteBackgroundShaded = R50;
 export var akEditorDeleteBackgroundWithOpacity = 'rgba(255, 189, 173, 0.5)'; // R75 with 50% opacity
-
 export var akEditorDeleteBorder = R300;
 export var akEditorDeleteIconColor = R400;
 export var akEditorCustomIconSize = 20;
@@ -30,25 +27,24 @@ export var akEditorSelectedBorderColor = B300;
 export var akEditorSelectedBgColor = B50;
 export var akEditorSelectedBlanketColor = B75;
 export var akEditorSelectedBorderSize = 1;
-export var akEditorSelectedBorder = "".concat(akEditorSelectedBorderSize, "px solid ").concat(token('color.border.selected', akEditorSelectedBorderColor));
-export var akEditorSelectedBoxShadow = "0 0 0 ".concat(akEditorSelectedBorderSize, "px ").concat(token('color.border.selected', akEditorSelectedBorderColor));
+export var akEditorSelectedBorder = "".concat(akEditorSelectedBorderSize, "px solid ", "var(--ds-border-selected, ".concat(akEditorSelectedBorderColor, ")"));
+export var akEditorSelectedBoxShadow = "0 0 0 ".concat(akEditorSelectedBorderSize, "px ", "var(--ds-border-selected, ".concat(akEditorSelectedBorderColor, ")"));
 export var akEditorSelectedIconColor = B400;
 export var akEditorSelectedBorderBoldSize = 2;
 export var akEditorSelectedBlanketOpacity = 0.3;
 export var akEditorUnitZIndex = 1;
 export var akEditorShadowZIndex = 2;
 export var akEditorStickyHeaderZIndex = 11; // filmstrip uses 10 for its shadow
-
 export var akEditorSmallZIndex = akEditorStickyHeaderZIndex + 1;
-export var akEditorGridLineZIndex = 9999; // z-index for main menu bar -
+export var akEditorGridLineZIndex = 9999;
+// z-index for main menu bar -
 // this is highest as it should be above anything else in editor below.
-
-export var akEditorMenuZIndex = layers.blanket(); // z-index used for floating toolbars like code block, table etc
-
-export var akEditorFloatingPanelZIndex = layers.layer(); // z-index used for pickers (date, emoji, mentions) and type-aheads, hyperlinks
-
-export var akEditorFloatingDialogZIndex = akEditorMenuZIndex + 10; // z-index used for floating toolbars table cell menu which are above block toolbars
-
+export var akEditorMenuZIndex = layers.blanket();
+// z-index used for floating toolbars like code block, table etc
+export var akEditorFloatingPanelZIndex = layers.layer();
+// z-index used for pickers (date, emoji, mentions) and type-aheads, hyperlinks
+export var akEditorFloatingDialogZIndex = akEditorMenuZIndex + 10;
+// z-index used for floating toolbars table cell menu which are above block toolbars
 export var akEditorFloatingOverlapPanelZIndex = akEditorFloatingPanelZIndex + 5;
 export var akEditorMentionSelected = N100;
 export var akEditorTableToolbarSize = 11;
@@ -87,8 +83,9 @@ export var akEditorLineHeight = 1.714;
 export var akEditorRuleBackground = N30;
 export var akEditorRuleBorderRadius = '1px';
 export var akEditorToolbarKeylineHeight = 2;
-export var akEditorContextPanelWidth = 320; // @see typography spreadsheet: https://docs.google.com/spreadsheets/d/1iYusRGCT4PoPfvxbJ8NrgjtfFgXLm5lpDWXzjua1W2E/edit#gid=93913128
+export var akEditorContextPanelWidth = 320;
 
+// @see typography spreadsheet: https://docs.google.com/spreadsheets/d/1iYusRGCT4PoPfvxbJ8NrgjtfFgXLm5lpDWXzjua1W2E/edit#gid=93913128
 export var blockNodesVerticalMargin = '0.75rem';
 export var DEFAULT_EMBED_CARD_WIDTH = 680;
 export var DEFAULT_EMBED_CARD_HEIGHT = 480;
@@ -110,11 +107,9 @@ export var relativeFontSizeToBase16 = function relativeFontSizeToBase16(px) {
   if (typeof px === 'string') {
     px = parseInt(px);
   }
-
   if (isNaN(px)) {
     throw new Error("Invalid font size: '".concat(px, "'"));
   }
-
   return "".concat(px / 16, "rem");
 };
 export var VIEWPORT_SIZES = {
@@ -146,14 +141,14 @@ export var VIEWPORT_SIZES = {
     width: 320,
     height: 568
   }
-}; // to be updated in ED-10790: this should be variable threshold based on how many buttons enabled on main toolbar
+};
 
+// to be updated in ED-10790: this should be variable threshold based on how many buttons enabled on main toolbar
 export var akEditorMobileMaxWidth = 0;
 export var getTableCellBackgroundDarkModeColors = [['White', '#000000'], ['Light blue', '#0C294F'], ['Light teal', '#0C343B'], ['Light green', '#052E21'], ['Light yellow', '#484123'], ['Light red', '#441C13'], ['Light purple', '#282249'], ['Light gray', '#202328'], ['Blue', '#0B3165'], ['Teal', '#044853'], ['Green', '#053927'], ['Yellow', '#6F5C25'], ['Red', '#582013'], ['Purple', '#3E327B'], ['Gray', '#475262'], ['Dark blue', '#003884'], ['Dark teal', '#055866'], ['Dark green', '#044932'], ['Dark yellow', '#82641C'], ['Dark red', '#6B2A19'], ['Dark purple', '#4D38B2']].map(function (_ref3) {
   var _ref4 = _slicedToArray(_ref3, 2),
-      colorName = _ref4[0],
-      colorValue = _ref4[1];
-
+    colorName = _ref4[0],
+    colorValue = _ref4[1];
   return getTableCellBackgroundDarkModeColorCSS(colorName, colorValue);
 }).join('\n');
 export function getTableCellBackgroundDarkModeColorCSS(colorName, colorValue) {

package/dist/esm/overflow-shadow/overflow-shadow.js

@@ -1,18 +1,15 @@
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
-
 var _templateObject;
-
 /* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
 import { css } from '@emotion/react';
 import { gridSize } from '@atlaskit/theme/constants';
-import { token } from '@atlaskit/tokens';
 export var overflowShadow = function overflowShadow(_ref) {
   var background = _ref.background,
-      _ref$width = _ref.width,
-      width = _ref$width === void 0 ? "".concat(gridSize(), "px") : _ref$width,
-      leftCoverWidth = _ref.leftCoverWidth,
-      rightCoverWidth = _ref.rightCoverWidth;
+    _ref$width = _ref.width,
+    width = _ref$width === void 0 ? "".concat(gridSize(), "px") : _ref$width,
+    leftCoverWidth = _ref.leftCoverWidth,
+    rightCoverWidth = _ref.rightCoverWidth;
   var leftCoverWidthResolved = leftCoverWidth || width;
   var rightCoverWidthResolved = rightCoverWidth || width;
-  return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n/* shadow cover left */\n  linear-gradient(\n    to right,\n    ", " ", ",\n    transparent ", "\n  ),\n/* shadow cover background left */\n  linear-gradient(\n    to right,\n    ", " ", ",\n    transparent ", "\n  ),\n/* shadow cover right */\n  linear-gradient(\n    to left,\n    ", " ", ",\n    transparent ", "\n  ),\n/* shadow cover background right */\n  linear-gradient(\n    to left,\n    ", " ", ",\n    transparent ", "\n  ),\n/* overflow shadow right spread */\n  linear-gradient(\n    to left,\n    ", " 0,\n    ", "  ", "\n  ),\n  /* overflow shadow right perimeter */\n  linear-gradient(\n    to left,\n    ", " 0,\n    ", "  ", "\n  ),\n  /* overflow shadow left spread */\n  linear-gradient(\n    to right,\n    ", " 0,\n    ", "  ", "\n  ),\n  /* overflow shadow left perimeter */\n  linear-gradient(\n    to right,\n    ", " 0,\n    ", "  ", "\n  )\n"])), background, leftCoverWidthResolved, leftCoverWidthResolved, token('elevation.surface.raised', 'transparent'), leftCoverWidthResolved, leftCoverWidthResolved, background, rightCoverWidthResolved, rightCoverWidthResolved, token('elevation.surface.raised', 'transparent'), rightCoverWidthResolved, rightCoverWidthResolved, token('elevation.shadow.overflow.spread', 'rgba(9, 30, 66, 0.13)'), token('utility.UNSAFE_util.transparent', 'rgba(99, 114, 130, 0)'), width, token('elevation.shadow.overflow.perimeter', 'transparent'), token('utility.UNSAFE_util.transparent', 'transparent'), width, token('elevation.shadow.overflow.spread', 'rgba(9, 30, 66, 0.13)'), token('utility.UNSAFE_util.transparent', 'rgba(99, 114, 130, 0)'), width, token('elevation.shadow.overflow.perimeter', 'transparent'), token('utility.UNSAFE_util.transparent', 'transparent'), width);
+  return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n/* shadow cover left */\n  linear-gradient(\n    to right,\n    ", " ", ",\n    transparent ", "\n  ),\n/* shadow cover background left */\n  linear-gradient(\n    to right,\n    ", " ", ",\n    transparent ", "\n  ),\n/* shadow cover right */\n  linear-gradient(\n    to left,\n    ", " ", ",\n    transparent ", "\n  ),\n/* shadow cover background right */\n  linear-gradient(\n    to left,\n    ", " ", ",\n    transparent ", "\n  ),\n/* overflow shadow right spread */\n  linear-gradient(\n    to left,\n    ", " 0,\n    ", "  ", "\n  ),\n  /* overflow shadow right perimeter */\n  linear-gradient(\n    to left,\n    ", " 0,\n    ", "  ", "\n  ),\n  /* overflow shadow left spread */\n  linear-gradient(\n    to right,\n    ", " 0,\n    ", "  ", "\n  ),\n  /* overflow shadow left perimeter */\n  linear-gradient(\n    to right,\n    ", " 0,\n    ", "  ", "\n  )\n"])), background, leftCoverWidthResolved, leftCoverWidthResolved, "var(--ds-surface-raised, transparent)", leftCoverWidthResolved, leftCoverWidthResolved, background, rightCoverWidthResolved, rightCoverWidthResolved, "var(--ds-surface-raised, transparent)", rightCoverWidthResolved, rightCoverWidthResolved, "var(--ds-shadow-overflow-spread, rgba(9, 30, 66, 0.13))", "var(--ds-UNSAFE-transparent, rgba(99, 114, 130, 0))", width, "var(--ds-shadow-overflow-perimeter, transparent)", "var(--ds-UNSAFE-transparent, transparent)", width, "var(--ds-shadow-overflow-spread, rgba(9, 30, 66, 0.13))", "var(--ds-UNSAFE-transparent, rgba(99, 114, 130, 0))", width, "var(--ds-shadow-overflow-perimeter, transparent)", "var(--ds-UNSAFE-transparent, transparent)", width);
 };

package/dist/esm/scrollbar-styles.js

@@ -1,5 +1,5 @@
 import { gridSize } from '@atlaskit/theme/constants';
-import { token } from '@atlaskit/tokens';
-var akGridSize = gridSize() + 'px'; // TODO: https://product-fabric.atlassian.net/browse/DSP-4494
+var akGridSize = gridSize() + 'px';
 
-export var scrollbarStyles = "\n  -ms-overflow-style: -ms-autohiding-scrollbar;\n\n  &::-webkit-scrollbar {\n    height: ".concat(akGridSize, ";\n    width: ").concat(akGridSize, ";\n  }\n\n  &::-webkit-scrollbar-corner {\n    display: none;\n  }\n\n  &::-webkit-scrollbar-thumb {\n    background-color: ").concat(token('color.background.neutral.subtle', 'rgba(0, 0, 0, 0)'), ";\n  }\n\n  &:hover::-webkit-scrollbar-thumb {\n    background-color: ").concat(token('color.background.neutral.bold', 'rgba(0, 0, 0, 0.2)'), ";\n    border-radius: ").concat(akGridSize, ";\n  }\n\n  &::-webkit-scrollbar-thumb:hover {\n    background-color: ").concat(token('color.background.neutral.bold.hovered', 'rgba(0, 0, 0, 0.4)'), ";\n  }\n");
+// TODO: https://product-fabric.atlassian.net/browse/DSP-4494
+export var scrollbarStyles = "\n  -ms-overflow-style: -ms-autohiding-scrollbar;\n\n  &::-webkit-scrollbar {\n    height: ".concat(akGridSize, ";\n    width: ").concat(akGridSize, ";\n  }\n\n  &::-webkit-scrollbar-corner {\n    display: none;\n  }\n\n  &::-webkit-scrollbar-thumb {\n    background-color: ", "var(--ds-background-neutral-subtle, rgba(0, 0, 0, 0))", ";\n  }\n\n  &:hover::-webkit-scrollbar-thumb {\n    background-color: ", "var(--ds-background-neutral-bold, rgba(0, 0, 0, 0.2))", ";\n    border-radius: ").concat(akGridSize, ";\n  }\n\n  &::-webkit-scrollbar-thumb:hover {\n    background-color: ", "var(--ds-background-neutral-bold-hovered, rgba(0, 0, 0, 0.4))", ";\n  }\n");

package/dist/esm/selection/types.js

@@ -4,7 +4,6 @@
  * file in editor-core
  */
 export var SelectionStyle;
-
 (function (SelectionStyle) {
   SelectionStyle[SelectionStyle["Border"] = 0] = "Border";
   SelectionStyle[SelectionStyle["BoxShadow"] = 1] = "BoxShadow";

package/dist/esm/selection/utils.js

@@ -1,6 +1,6 @@
-import { token } from '@atlaskit/tokens';
 import { akEditorSelectedBgColor, akEditorSelectedBorder, akEditorSelectedBorderColor, akEditorSelectedBoxShadow, akEditorSmallZIndex } from '../consts';
 import { SelectionStyle } from './types';
+
 /**
  * Adds correct selection styling for a node
  * Pass in which selection style properties you want and it will return css string of necessary styles
@@ -11,28 +11,22 @@ import { SelectionStyle } from './types';
  *  }
  *
  */
-
 export var getSelectionStyles = function getSelectionStyles(selectionStyles) {
   return selectionStyles.map(function (selectionStyle) {
     return getSelectionStyle(selectionStyle);
   }).concat(hideNativeBrowserTextSelectionStyles).join('\n');
 };
 export var hideNativeBrowserTextSelectionStyles = "\n  ::selection,*::selection {\n    background-color: transparent;\n  }\n  ::-moz-selection,*::-moz-selection {\n    background-color: transparent;\n  }\n";
-
 var getSelectionStyle = function getSelectionStyle(style) {
   switch (style) {
     case SelectionStyle.Border:
       return "\n        border: ".concat(akEditorSelectedBorder, ";\n\n        // Fixes ED-15246: Trello card is visible through a border of a table border\n        &::after {\n          height: 100%;\n          content: '\\00a0';\n          background: ").concat(akEditorSelectedBorderColor, ";\n          position: absolute;\n          right: -1px;\n          top: 0;\n          bottom: 0;\n          width: 1px;\n          border: none;\n          display: inline-block;\n        }\n      ");
-
     case SelectionStyle.BoxShadow:
       return "\n        box-shadow: ".concat(akEditorSelectedBoxShadow, ";\n        border-color: transparent;\n        ");
-
     case SelectionStyle.Background:
-      return "background-color: ".concat(token('color.background.selected', akEditorSelectedBgColor), ";");
-
+      return "background-color: ".concat("var(--ds-background-selected, ".concat(akEditorSelectedBgColor, ")"), ";");
     case SelectionStyle.Blanket:
-      return "\n        position: relative;\n\n        // Fixes ED-9263, where emoji or inline card in panel makes selection go outside the panel\n        // in Safari. Looks like it's caused by user-select: all in the emoji element\n        -webkit-user-select: text;\n\n        ::before {\n          position: absolute;\n          content: '';\n          left: 0;\n          right: 0;\n          top: 0;\n          bottom: 0;\n          width: 100%;\n          pointer-events: none;\n          z-index: ".concat(akEditorSmallZIndex, ";\n          background-color: ").concat(token('color.blanket.selected', '#B3D4FF4C'), "\n        }");
-
+      return "\n        position: relative;\n\n        // Fixes ED-9263, where emoji or inline card in panel makes selection go outside the panel\n        // in Safari. Looks like it's caused by user-select: all in the emoji element\n        -webkit-user-select: text;\n\n        ::before {\n          position: absolute;\n          content: '';\n          left: 0;\n          right: 0;\n          top: 0;\n          bottom: 0;\n          width: 100%;\n          pointer-events: none;\n          z-index: ".concat(akEditorSmallZIndex, ";\n          background-color: ", "var(--ds-blanket-selected, #B3D4FF4C)", "\n        }");
     default:
       return '';
   }

package/dist/esm/shortcut/shortcut.js

@@ -1,10 +1,7 @@
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
-
 var _templateObject;
-
 import { css } from '@emotion/react';
 import { N100 } from '@atlaskit/theme/colors';
 import { borderRadius } from '@atlaskit/theme/constants';
-import { token } from '@atlaskit/tokens';
 import { akEditorMobileMaxWidth, relativeFontSizeToBase16 } from '../consts';
-export var shortcutStyle = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  background-color: ", "; /* N60 at 50% */\n  color: ", ";\n  border-radius: ", "px;\n  padding: 4px;\n  line-height: 12px;\n  font-size: ", ";\n  align-self: flex-end;\n  @media (max-width: ", "px) {\n    display: none;\n  }\n"])), token('color.background.neutral', 'rgba(223, 225, 229, 0.5)'), token('color.text.subtle', N100), borderRadius(), relativeFontSizeToBase16(11.67), akEditorMobileMaxWidth);
+export var shortcutStyle = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  background-color: ", "; /* N60 at 50% */\n  color: ", ";\n  border-radius: ", "px;\n  padding: 4px;\n  line-height: 12px;\n  font-size: ", ";\n  align-self: flex-end;\n  @media (max-width: ", "px) {\n    display: none;\n  }\n"])), "var(--ds-background-neutral, rgba(223, 225, 229, 0.5))", "var(--ds-text-subtle, ".concat(N100, ")"), borderRadius(), relativeFontSizeToBase16(11.67), akEditorMobileMaxWidth);

package/dist/esm/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/editor-shared-styles",
-	"version": "2.3.0",
+	"version": "2.3.2",
 	"sideEffects": false
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/editor-shared-styles",
-  "version": "2.3.0",
+  "version": "2.3.2",
   "description": "Style values used in the editor/renderer",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -28,7 +28,7 @@
   },
   "dependencies": {
     "@atlaskit/theme": "^12.2.0",
-    "@atlaskit/tokens": "^0.13.0",
+    "@atlaskit/tokens": "^1.0.0",
     "@babel/runtime": "^7.0.0",
     "@emotion/react": "^11.7.1"
   },

package/report.api.md

@@ -8,6 +8,7 @@
 ### Table of contents
 
 - [Main Entry Types](#main-entry-types)
+- [Peer Dependencies](#peer-dependencies)
 
 ### Main Entry Types
 
@@ -351,3 +352,13 @@ export const VIEWPORT_SIZES: {
 ```
 
 <!--SECTION END: Main Entry Types-->
+
+### Peer Dependencies
+
+<!--SECTION START: Peer Dependencies-->
+
+```json
+{}
+```
+
+<!--SECTION END: Peer Dependencies-->

package/src/overflow-shadow/overflow-shadow.ts

@@ -53,31 +53,25 @@ export const overflowShadow = ({
   linear-gradient(
     to left,
     ${token('elevation.shadow.overflow.spread', 'rgba(9, 30, 66, 0.13)')} 0,
-    ${token(
-      'utility.UNSAFE_util.transparent',
-      'rgba(99, 114, 130, 0)',
-    )}  ${width}
+    ${token('utility.UNSAFE.transparent', 'rgba(99, 114, 130, 0)')}  ${width}
   ),
   /* overflow shadow right perimeter */
   linear-gradient(
     to left,
     ${token('elevation.shadow.overflow.perimeter', 'transparent')} 0,
-    ${token('utility.UNSAFE_util.transparent', 'transparent')}  ${width}
+    ${token('utility.UNSAFE.transparent', 'transparent')}  ${width}
   ),
   /* overflow shadow left spread */
   linear-gradient(
     to right,
     ${token('elevation.shadow.overflow.spread', 'rgba(9, 30, 66, 0.13)')} 0,
-    ${token(
-      'utility.UNSAFE_util.transparent',
-      'rgba(99, 114, 130, 0)',
-    )}  ${width}
+    ${token('utility.UNSAFE.transparent', 'rgba(99, 114, 130, 0)')}  ${width}
   ),
   /* overflow shadow left perimeter */
   linear-gradient(
     to right,
     ${token('elevation.shadow.overflow.perimeter', 'transparent')} 0,
-    ${token('utility.UNSAFE_util.transparent', 'transparent')}  ${width}
+    ${token('utility.UNSAFE.transparent', 'transparent')}  ${width}
   )
 `;
 };