@atlaskit/editor-shared-styles 1.6.0

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

@@ -0,0 +1,13 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "overflowShadow", {
+  enumerable: true,
+  get: function get() {
+    return _overflowShadow.overflowShadow;
+  }
+});
+
+var _overflowShadow = require("./overflow-shadow");

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

@@ -0,0 +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 _styledComponents = require("styled-components");
+
+var _templateObject;
+
+var overflowShadow = function overflowShadow(_ref) {
+  var background = _ref.background,
+      width = _ref.width;
+  return (0, _styledComponents.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n/* shadow cover right */ linear-gradient(\n  to left,\n  ", " ", ",\n  transparent ", "\n),\n/* overflow shadow right */\n  linear-gradient(\n    to left,\n    rgba(9, 30, 66, 0.13) 0,\n    rgba(99, 114, 130, 0) ", "\n  ),\n/* overflow shadow left */\n  linear-gradient(\n    to right,\n    rgba(9, 30, 66, 0.13) 0,\n    rgba(99, 114, 130, 0) ", "\n  )\n"])), background, width, width, width, width);
+};
+
+exports.overflowShadow = overflowShadow;

package/dist/cjs/selection/index.js

@@ -0,0 +1,27 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "SelectionStyle", {
+  enumerable: true,
+  get: function get() {
+    return _types.SelectionStyle;
+  }
+});
+Object.defineProperty(exports, "getSelectionStyles", {
+  enumerable: true,
+  get: function get() {
+    return _utils.getSelectionStyles;
+  }
+});
+Object.defineProperty(exports, "hideNativeBrowserTextSelectionStyles", {
+  enumerable: true,
+  get: function get() {
+    return _utils.hideNativeBrowserTextSelectionStyles;
+  }
+});
+
+var _types = require("./types");
+
+var _utils = require("./utils");

package/dist/cjs/selection/types.js

@@ -0,0 +1,21 @@
+"use strict";
+
+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
+ * file in editor-core
+ */
+var SelectionStyle;
+exports.SelectionStyle = SelectionStyle;
+
+(function (SelectionStyle) {
+  SelectionStyle[SelectionStyle["Border"] = 0] = "Border";
+  SelectionStyle[SelectionStyle["BoxShadow"] = 1] = "BoxShadow";
+  SelectionStyle[SelectionStyle["Background"] = 2] = "Background";
+  SelectionStyle[SelectionStyle["Blanket"] = 3] = "Blanket";
+})(SelectionStyle || (exports.SelectionStyle = SelectionStyle = {}));

package/dist/cjs/selection/utils.js

@@ -0,0 +1,49 @@
+"use strict";
+
+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
+ *
+ * eg.
+ *  .expand.ak-editor-selected-node {
+ *    ${getSelectionStyles([SelectionStyle.BoxShadow, SelectionStyle.Blanket])}
+ *  }
+ *
+ */
+var getSelectionStyles = function getSelectionStyles(selectionStyles) {
+  return selectionStyles.map(function (selectionStyle) {
+    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 "border: ".concat(_consts.akEditorSelectedBorder, ";");
+
+    case _types.SelectionStyle.BoxShadow:
+      return "\n        box-shadow: ".concat(_consts.akEditorSelectedBoxShadow, ";\n        border-color: transparent;\n        ");
+
+    case _types.SelectionStyle.Background:
+      return "background-color: ".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        ::after {\n          position: absolute;\n          content: '';\n          left: 0;\n          right: 0;\n          top: 0;\n          bottom: 0;\n          opacity: ".concat(_consts.akEditorSelectedBlanketOpacity, ";\n          pointer-events: none;\n          background-color: ").concat(_consts.akEditorSelectedBlanketColor, "\n        }");
+
+    default:
+      return '';
+  }
+};

package/dist/cjs/version.json

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

package/dist/es2019/consts/consts.js

@@ -0,0 +1,152 @@
+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';
+export const akEditorFullPageDefaultFontSize = 16;
+export const akEditorCodeFontFamily = codeFontFamily();
+export const akEditorInactiveForeground = N500;
+export const akEditorFocus = B100;
+export const akEditorSubtleAccent = N40;
+export const akEditorActiveBackground = N500;
+export const akEditorActiveForeground = N0;
+export const akEditorBlockquoteBorderColor = N40;
+export const akEditorDropdownActiveBackground = N900;
+export const akEditorPopupBackground = N700;
+export const akEditorPopupText = B50;
+export const akEditorPrimaryButton = B400;
+export const akEditorCodeBackground = N20;
+export const akEditorCodeBlockPadding = '12px';
+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;
+export const akEditorSelectedBorderColor = B300;
+export const akEditorSelectedBgColor = B50;
+export const akEditorSelectedBlanketColor = B75;
+export const akEditorSelectedBorderSize = 1;
+export const akEditorSelectedBorder = `${akEditorSelectedBorderSize}px solid ${akEditorSelectedBorderColor}`;
+export const akEditorSelectedBoxShadow = `0 0 0 ${akEditorSelectedBorderSize}px ${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 -
+// 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 = akEditorFloatingPanelZIndex + 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;
+export const akEditorTableBorder = N50;
+export const akEditorTableBorderDark = DN70;
+export const akEditorTableToolbar = N20;
+export const akEditorTableToolbarDark = DN50;
+export const akEditorTableFloatingControls = N20;
+export const akEditorTableCellSelected = B75;
+export const akEditorTableToolbarSelected = B100;
+export const akEditorTableBorderSelected = B300;
+export const akEditorTableCellDelete = R50;
+export const akEditorTableBorderDelete = R300;
+export const akEditorTableToolbarDelete = R75;
+export const akEditorTableBorderRadius = '3px';
+export const akEditorTableCellBackgroundOpacity = 0.5;
+export const akEditorFullPageMaxWidth = 680;
+export const akEditorDefaultLayoutWidth = 760;
+export const akEditorWideLayoutWidth = 960;
+export const akEditorFullWidthLayoutWidth = 1800;
+export const akEditorFullWidthLayoutLineLength = 1792;
+export const akEditorTableNumberColumnWidth = 42;
+export const akEditorBreakoutPadding = 96;
+export const akEditorGutterPadding = 32;
+export const akEditorMobileBreakoutPoint = 720;
+export const akEditorTableCellMinWidth = 48;
+export const akEditorTableLegacyCellMinWidth = 128;
+export const akEditorMediaResizeHandlerPaddingWide = 12;
+export const akEditorMediaResizeHandlerPadding = 4;
+export const akEditorSwoopCubicBezier = `cubic-bezier(0.15, 1, 0.3, 1)`;
+export const gridMediumMaxWidth = 1024;
+export const breakoutWideScaleRatio = 1.33;
+export const akRichMediaResizeZIndex = akEditorUnitZIndex * 99;
+export const akLayoutGutterOffset = gridSize() * 1.5;
+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 blockNodesVerticalMargin = '0.75rem';
+export const DEFAULT_EMBED_CARD_WIDTH = 680;
+export const DEFAULT_EMBED_CARD_HEIGHT = 480;
+export const ATLASSIAN_NAVIGATION_HEIGHT = '56px';
+export const akEditorSelectedNodeClassName = 'ak-editor-selected-node';
+export const editorFontSize = ({
+  theme
+}) => theme && theme.baseFontSize ? theme.baseFontSize : defaultFontSize();
+export const relativeSize = multiplier => ({
+  theme
+}) => editorFontSize({
+  theme
+}) * multiplier;
+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 getAkEditorFullPageMaxWidth = (allowDynamicTextSizing = false) => allowDynamicTextSizing ? akEditorFullPageMaxWidth : akEditorDefaultLayoutWidth;
+export const VIEWPORT_SIZES = {
+  laptopHiDPI: {
+    width: 1440,
+    height: 900
+  },
+  laptopMDPI: {
+    width: 1280,
+    height: 800
+  },
+  tabletL: {
+    width: 1024,
+    height: 1366
+  },
+  tabletS: {
+    width: 768,
+    height: 1024
+  },
+  mobileM: {
+    width: 414,
+    height: 736
+  },
+  mobileS: {
+    width: 375,
+    height: 667
+  },
+  mobileXS: {
+    width: 320,
+    height: 568
+  }
+}; // 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) {
+  return `
+  &[colorname="${colorName}"] {
+    background-color: ${colorValue} !important; // !important to override default style color
+  }
+  `;
+}

package/dist/es2019/consts/consts.test.js

@@ -0,0 +1,20 @@
+import { relativeFontSizeToBase16 } from './consts';
+describe('consts', () => {
+  describe('relativeFontSizeToBase16', () => {
+    it('relativeFontSizeToBase16 should return 1rem with a base font size of 16px', () => {
+      expect(relativeFontSizeToBase16(16)).toBe('1rem');
+    });
+    it('relativeFontSizeToBase16 should return 0.875rem with a base font size of 14px', () => {
+      expect(relativeFontSizeToBase16(14)).toBe('0.875rem');
+    });
+    it('relativeFontSizeToBase16 should return 0.875rem with a base font size (string) of 14px', () => {
+      expect(relativeFontSizeToBase16('14')).toBe('0.875rem');
+    });
+    it('relativeFontSizeToBase16 should return 0.875rem with a base font size (string) of 14px', () => {
+      expect(relativeFontSizeToBase16('14px')).toBe('0.875rem');
+    });
+    it('relativeFontSizeToBase16 should throw an error for invalid string', () => {
+      expect(() => relativeFontSizeToBase16('px')).toThrowError();
+    });
+  });
+});

package/dist/es2019/consts/index.js

@@ -0,0 +1 @@
+export { akEditorActiveBackground, akEditorActiveForeground, akEditorBlockquoteBorderColor, akEditorBreakoutPadding, akEditorCodeBackground, akEditorCodeBlockPadding, akEditorCodeFontFamily, akEditorCodeInlinePadding, akEditorContextPanelWidth, akEditorDefaultLayoutWidth, akEditorDeleteBackground, akEditorDeleteBackgroundShaded, akEditorDeleteBackgroundWithOpacity, akEditorDeleteBorder, akEditorDeleteIconColor, akEditorDropdownActiveBackground, akEditorFloatingDialogZIndex, akEditorFloatingOverlapPanelZIndex, akEditorFloatingPanelZIndex, akEditorFocus, akEditorFullPageMaxWidth, akEditorFullPageDefaultFontSize, akEditorFullWidthLayoutWidth, akEditorFullWidthLayoutLineLength, akEditorGridLineZIndex, akEditorGutterPadding, akEditorInactiveForeground, akEditorMediaResizeHandlerPadding, akEditorMediaResizeHandlerPaddingWide, akEditorMentionSelected, akEditorMenuZIndex, akEditorStickyHeaderZIndex, akEditorMobileBreakoutPoint, akEditorPopupBackground, akEditorPopupText, akEditorPrimaryButton, akEditorSelectedBorderColor, akEditorSelectedBorderBoldSize, akEditorSelectedBorderSize, akEditorSelectedBorder, akEditorSelectedBoxShadow, akEditorSelectedIconColor, akEditorCustomIconSize, akEditorSelectedBlanketColor, akEditorSelectedBgColor, akEditorSelectedBlanketOpacity, akEditorSmallZIndex, akEditorShadowZIndex, akEditorSubtleAccent, akEditorSwoopCubicBezier, akEditorTableBorder, akEditorTableBorderDark, akEditorTableBorderDelete, akEditorTableBorderRadius, akEditorTableBorderSelected, akEditorTableCellBackgroundOpacity, akEditorTableCellDelete, akEditorTableCellMinWidth, akEditorTableCellSelected, akEditorTableFloatingControls, akEditorTableLegacyCellMinWidth, akEditorTableNumberColumnWidth, akEditorTableToolbar, akEditorTableToolbarDark, akEditorTableToolbarDelete, akEditorTableToolbarSelected, akEditorTableToolbarSize, akEditorUnitZIndex, akEditorWideLayoutWidth, akLayoutGutterOffset, akRichMediaResizeZIndex, blockNodesVerticalMargin, breakoutWideScaleRatio, editorFontSize, gridMediumMaxWidth, getAkEditorFullPageMaxWidth, relativeSize, relativeFontSizeToBase16, DEFAULT_EMBED_CARD_HEIGHT, DEFAULT_EMBED_CARD_WIDTH, akEditorLineHeight, akEditorRuleBackground, akEditorRuleBorderRadius, akEditorSelectedNodeClassName, akEditorToolbarKeylineHeight, VIEWPORT_SIZES, akEditorMobileMaxWidth, getTableCellBackgroundDarkModeColors, ATLASSIAN_NAVIGATION_HEIGHT } from './consts';

package/dist/es2019/consts/types.js

@@ -0,0 +1 @@
+export {};

package/dist/es2019/index.js

@@ -0,0 +1,3 @@
+export { akEditorActiveBackground, akEditorActiveForeground, akEditorBlockquoteBorderColor, akEditorBreakoutPadding, akEditorCodeBackground, akEditorCodeBlockPadding, akEditorCodeFontFamily, akEditorCodeInlinePadding, akEditorContextPanelWidth, akEditorDefaultLayoutWidth, akEditorDeleteBackground, akEditorDeleteBackgroundShaded, akEditorDeleteBackgroundWithOpacity, akEditorDeleteBorder, akEditorDeleteIconColor, akEditorDropdownActiveBackground, akEditorFloatingDialogZIndex, akEditorFloatingOverlapPanelZIndex, akEditorFloatingPanelZIndex, akEditorFocus, akEditorFullPageMaxWidth, akEditorFullPageDefaultFontSize, akEditorFullWidthLayoutWidth, akEditorFullWidthLayoutLineLength, akEditorGridLineZIndex, akEditorGutterPadding, akEditorInactiveForeground, akEditorMediaResizeHandlerPadding, akEditorMediaResizeHandlerPaddingWide, akEditorMentionSelected, akEditorMenuZIndex, akEditorStickyHeaderZIndex, akEditorMobileBreakoutPoint, akEditorPopupBackground, akEditorPopupText, akEditorPrimaryButton, akEditorSelectedBorderColor, akEditorSelectedBorderBoldSize, akEditorSelectedBorderSize, akEditorSelectedBorder, akEditorSelectedBoxShadow, akEditorSelectedIconColor, akEditorSelectedBlanketColor, akEditorSelectedBgColor, akEditorSelectedBlanketOpacity, akEditorSmallZIndex, akEditorShadowZIndex, akEditorSubtleAccent, akEditorSwoopCubicBezier, akEditorTableBorder, akEditorTableBorderDark, akEditorTableBorderDelete, akEditorTableBorderRadius, akEditorTableBorderSelected, akEditorTableCellBackgroundOpacity, akEditorTableCellDelete, akEditorTableCellMinWidth, akEditorTableCellSelected, akEditorTableFloatingControls, akEditorTableLegacyCellMinWidth, akEditorTableNumberColumnWidth, akEditorTableToolbar, akEditorTableToolbarDark, akEditorTableToolbarDelete, akEditorTableToolbarSelected, akEditorTableToolbarSize, akEditorUnitZIndex, akEditorWideLayoutWidth, akLayoutGutterOffset, akRichMediaResizeZIndex, blockNodesVerticalMargin, breakoutWideScaleRatio, editorFontSize, gridMediumMaxWidth, getAkEditorFullPageMaxWidth, relativeSize, relativeFontSizeToBase16, DEFAULT_EMBED_CARD_HEIGHT, DEFAULT_EMBED_CARD_WIDTH, akEditorLineHeight, akEditorRuleBackground, akEditorRuleBorderRadius, akEditorSelectedNodeClassName, akEditorToolbarKeylineHeight, VIEWPORT_SIZES, akEditorMobileMaxWidth, getTableCellBackgroundDarkModeColors, ATLASSIAN_NAVIGATION_HEIGHT } from './consts';
+export { SelectionStyle, getSelectionStyles, hideNativeBrowserTextSelectionStyles } from './selection';
+export { overflowShadow } from './overflow-shadow';

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

@@ -0,0 +1 @@
+export { overflowShadow } from './overflow-shadow';

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

@@ -0,0 +1,23 @@
+import { css } from 'styled-components';
+export const overflowShadow = ({
+  background,
+  width
+}) => css`
+/* shadow cover right */ linear-gradient(
+  to left,
+  ${background} ${width},
+  transparent ${width}
+),
+/* overflow shadow right */
+  linear-gradient(
+    to left,
+    rgba(9, 30, 66, 0.13) 0,
+    rgba(99, 114, 130, 0) ${width}
+  ),
+/* overflow shadow left */
+  linear-gradient(
+    to right,
+    rgba(9, 30, 66, 0.13) 0,
+    rgba(99, 114, 130, 0) ${width}
+  )
+`;

package/dist/es2019/selection/index.js

@@ -0,0 +1,2 @@
+export { SelectionStyle } from './types';
+export { getSelectionStyles, hideNativeBrowserTextSelectionStyles } from './utils';

package/dist/es2019/selection/types.js

@@ -0,0 +1,13 @@
+/**
+ * These are generic selection styles for all nodes
+ * If you have custom behaviour needed for a node, add that in the plugin's styles
+ * file in editor-core
+ */
+export let SelectionStyle;
+
+(function (SelectionStyle) {
+  SelectionStyle[SelectionStyle["Border"] = 0] = "Border";
+  SelectionStyle[SelectionStyle["BoxShadow"] = 1] = "BoxShadow";
+  SelectionStyle[SelectionStyle["Background"] = 2] = "Background";
+  SelectionStyle[SelectionStyle["Blanket"] = 3] = "Blanket";
+})(SelectionStyle || (SelectionStyle = {}));

package/dist/es2019/selection/utils.js

@@ -0,0 +1,61 @@
+import { akEditorSelectedBgColor, akEditorSelectedBlanketColor, akEditorSelectedBlanketOpacity, akEditorSelectedBorder, akEditorSelectedBoxShadow } 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
+ *
+ * eg.
+ *  .expand.ak-editor-selected-node {
+ *    ${getSelectionStyles([SelectionStyle.BoxShadow, SelectionStyle.Blanket])}
+ *  }
+ *
+ */
+
+export const getSelectionStyles = selectionStyles => selectionStyles.map(selectionStyle => getSelectionStyle(selectionStyle)).concat(hideNativeBrowserTextSelectionStyles).join('\n');
+export const hideNativeBrowserTextSelectionStyles = `
+  ::selection,*::selection {
+    background-color: transparent;
+  }
+  ::-moz-selection,*::-moz-selection {
+    background-color: transparent;
+  }
+`;
+
+const getSelectionStyle = style => {
+  switch (style) {
+    case SelectionStyle.Border:
+      return `border: ${akEditorSelectedBorder};`;
+
+    case SelectionStyle.BoxShadow:
+      return `
+        box-shadow: ${akEditorSelectedBoxShadow};
+        border-color: transparent;
+        `;
+
+    case SelectionStyle.Background:
+      return `background-color: ${akEditorSelectedBgColor};`;
+
+    case SelectionStyle.Blanket:
+      return `
+        position: relative;
+
+        // Fixes ED-9263, where emoji or inline card in panel makes selection go outside the panel
+        // in Safari. Looks like it's caused by user-select: all in the emoji element
+        -webkit-user-select: text;
+
+        ::after {
+          position: absolute;
+          content: '';
+          left: 0;
+          right: 0;
+          top: 0;
+          bottom: 0;
+          opacity: ${akEditorSelectedBlanketOpacity};
+          pointer-events: none;
+          background-color: ${akEditorSelectedBlanketColor}
+        }`;
+
+    default:
+      return '';
+  }
+};

package/dist/es2019/version.json

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