@atlaskit/editor-shared-styles 2.3.1 → 2.3.2

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 # @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

package/dist/cjs/consts/consts.js

@@ -1,21 +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");
-
 /* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
+
 var akEditorFullPageDefaultFontSize = 16;
 exports.akEditorFullPageDefaultFontSize = akEditorFullPageDefaultFontSize;
 var akEditorCodeFontFamily = (0, _constants.codeFontFamily)();
@@ -51,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;
@@ -82,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;
@@ -179,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;
@@ -192,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;
@@ -208,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: {
@@ -253,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,29 +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 _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, "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_util-transparent, rgba(99, 114, 130, 0))", width, "var(--ds-shadow-overflow-perimeter, transparent)", "var(--ds-UNSAFE_util-transparent, transparent)", width, "var(--ds-shadow-overflow-spread, rgba(9, 30, 66, 0.13))", "var(--ds-UNSAFE_util-transparent, rgba(99, 114, 130, 0))", width, "var(--ds-shadow-overflow-perimeter, transparent)", "var(--ds-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,10 +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 akGridSize = (0, _constants.gridSize)() + 'px'; // TODO: https://product-fabric.atlassian.net/browse/DSP-4494
-
+// 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,11 +4,8 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.hideNativeBrowserTextSelectionStyles = exports.getSelectionStyles = void 0;
-
 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
@@ -24,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("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: ", "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,23 +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 _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"])), "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.1",
+	"version": "2.3.2",
 	"sideEffects": false
 }

package/dist/es2019/consts/consts.js

@@ -19,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;
@@ -35,17 +34,16 @@ 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;
@@ -84,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;
@@ -103,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 = {
@@ -139,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

@@ -38,25 +38,25 @@ export const overflowShadow = ({
   linear-gradient(
     to left,
     ${"var(--ds-shadow-overflow-spread, rgba(9, 30, 66, 0.13))"} 0,
-    ${"var(--ds-UNSAFE_util-transparent, rgba(99, 114, 130, 0))"}  ${width}
+    ${"var(--ds-UNSAFE-transparent, rgba(99, 114, 130, 0))"}  ${width}
   ),
   /* overflow shadow right perimeter */
   linear-gradient(
     to left,
     ${"var(--ds-shadow-overflow-perimeter, transparent)"} 0,
-    ${"var(--ds-UNSAFE_util-transparent, transparent)"}  ${width}
+    ${"var(--ds-UNSAFE-transparent, transparent)"}  ${width}
   ),
   /* overflow shadow left spread */
   linear-gradient(
     to right,
     ${"var(--ds-shadow-overflow-spread, rgba(9, 30, 66, 0.13))"} 0,
-    ${"var(--ds-UNSAFE_util-transparent, rgba(99, 114, 130, 0))"}  ${width}
+    ${"var(--ds-UNSAFE-transparent, rgba(99, 114, 130, 0))"}  ${width}
   ),
   /* overflow shadow left perimeter */
   linear-gradient(
     to right,
     ${"var(--ds-shadow-overflow-perimeter, transparent)"} 0,
-    ${"var(--ds-UNSAFE_util-transparent, transparent)"}  ${width}
+    ${"var(--ds-UNSAFE-transparent, transparent)"}  ${width}
   )
 `;
 };

package/dist/es2019/scrollbar-styles.js

@@ -1,6 +1,7 @@
 import { gridSize } from '@atlaskit/theme/constants';
-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;
 

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,5 +1,6 @@
 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
@@ -10,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 {
@@ -20,7 +20,6 @@ export const hideNativeBrowserTextSelectionStyles = `
     background-color: transparent;
   }
 `;
-
 const getSelectionStyle = style => {
   switch (style) {
     case SelectionStyle.Border:
@@ -41,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: ${`var(--ds-background-selected, ${akEditorSelectedBgColor})`};`;
-
     case SelectionStyle.Blanket:
       return `
         position: relative;
@@ -71,7 +67,6 @@ const getSelectionStyle = style => {
           z-index: ${akEditorSmallZIndex};
           background-color: ${"var(--ds-blanket-selected, #B3D4FF4C)"}
         }`;
-
     default:
       return '';
   }

package/dist/es2019/version.json

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

package/dist/esm/consts/consts.js

@@ -1,5 +1,4 @@
 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';
@@ -21,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;
@@ -37,17 +35,16 @@ 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;
@@ -86,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;
@@ -109,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 = {
@@ -145,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,17 +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';
 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, "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_util-transparent, rgba(99, 114, 130, 0))", width, "var(--ds-shadow-overflow-perimeter, transparent)", "var(--ds-UNSAFE_util-transparent, transparent)", width, "var(--ds-shadow-overflow-spread, rgba(9, 30, 66, 0.13))", "var(--ds-UNSAFE_util-transparent, rgba(99, 114, 130, 0))", width, "var(--ds-shadow-overflow-perimeter, transparent)", "var(--ds-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,4 +1,5 @@
 import { gridSize } from '@atlaskit/theme/constants';
-var akGridSize = gridSize() + 'px'; // TODO: https://product-fabric.atlassian.net/browse/DSP-4494
+var akGridSize = gridSize() + 'px';
 
+// 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,5 +1,6 @@
 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
@@ -10,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("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: ", "var(--ds-blanket-selected, #B3D4FF4C)", "\n        }");
-
     default:
       return '';
   }

package/dist/esm/shortcut/shortcut.js

@@ -1,7 +1,5 @@
 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';

package/dist/esm/version.json

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/editor-shared-styles",
-  "version": "2.3.1",
+  "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}
   )
 `;
 };