@atlaskit/editor-shared-styles 2.4.1 → 2.4.3

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @atlaskit/editor-shared-styles
 
+## 2.4.3
+
+### Patch Changes
+
+- [`9d00501a414`](https://bitbucket.org/atlassian/atlassian-frontend/commits/9d00501a414) - Ensure legacy types are published for TS 4.5-4.8
+
+## 2.4.2
+
+### Patch Changes
+
+- [`9369cc38a68`](https://bitbucket.org/atlassian/atlassian-frontend/commits/9369cc38a68) - Migrated use of `gridSize` to space tokens where possible. There is no expected visual or behaviour change.
+
 ## 2.4.1
 
 ### Patch Changes

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

@@ -7,13 +7,12 @@ Object.defineProperty(exports, "__esModule", {
 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;
 /* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
 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,
+    width = _ref$width === void 0 ? "var(--ds-space-100, 8px)" : _ref$width,
     leftCoverWidth = _ref.leftCoverWidth,
     rightCoverWidth = _ref.rightCoverWidth;
   var leftCoverWidthResolved = leftCoverWidth || width;

package/dist/cjs/scrollbar-styles.js

@@ -4,9 +4,6 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.scrollbarStyles = void 0;
-var _constants = require("@atlaskit/theme/constants");
-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: ", "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");
+var scrollbarStyles = "\n  -ms-overflow-style: -ms-autohiding-scrollbar;\n\n  &::-webkit-scrollbar {\n    height: ".concat("var(--ds-space-100, 8px)", ";\n    width: ", "var(--ds-space-100, 8px)", ";\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: 8px;\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/version.json

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

package/dist/es2019/consts/consts.js

@@ -1,6 +1,8 @@
 /* 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 { codeFontFamily, fontSize as defaultFontSize,
+// eslint-disable-next-line @atlaskit/design-system/no-deprecated-imports
+gridSize, layers } from '@atlaskit/theme/constants';
 export const akEditorFullPageDefaultFontSize = 16;
 export const akEditorCodeFontFamily = codeFontFamily();
 export const akEditorInactiveForeground = N500;

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

@@ -1,9 +1,8 @@
 /* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
 import { css } from '@emotion/react';
-import { gridSize } from '@atlaskit/theme/constants';
 export const overflowShadow = ({
   background,
-  width = `${gridSize()}px`,
+  width = "var(--ds-space-100, 8px)",
   leftCoverWidth,
   rightCoverWidth
 }) => {

package/dist/es2019/scrollbar-styles.js

@@ -1,13 +1,10 @@
-import { gridSize } from '@atlaskit/theme/constants';
-const akGridSize = gridSize() + 'px';
-
 // TODO: https://product-fabric.atlassian.net/browse/DSP-4494
 export const scrollbarStyles = `
   -ms-overflow-style: -ms-autohiding-scrollbar;
 
   &::-webkit-scrollbar {
-    height: ${akGridSize};
-    width: ${akGridSize};
+    height: ${"var(--ds-space-100, 8px)"};
+    width: ${"var(--ds-space-100, 8px)"};
   }
 
   &::-webkit-scrollbar-corner {
@@ -20,7 +17,7 @@ export const scrollbarStyles = `
 
   &:hover::-webkit-scrollbar-thumb {
     background-color: ${"var(--ds-background-neutral-bold, rgba(0, 0, 0, 0.2))"};
-    border-radius: ${akGridSize};
+    border-radius: 8px;
   }
 
   &::-webkit-scrollbar-thumb:hover {

package/dist/es2019/version.json

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

package/dist/esm/consts/consts.js

@@ -1,7 +1,9 @@
 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 { codeFontFamily, fontSize as defaultFontSize,
+// eslint-disable-next-line @atlaskit/design-system/no-deprecated-imports
+gridSize, layers } from '@atlaskit/theme/constants';
 export var akEditorFullPageDefaultFontSize = 16;
 export var akEditorCodeFontFamily = codeFontFamily();
 export var akEditorInactiveForeground = N500;

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

@@ -2,11 +2,10 @@ 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,
+    width = _ref$width === void 0 ? "var(--ds-space-100, 8px)" : _ref$width,
     leftCoverWidth = _ref.leftCoverWidth,
     rightCoverWidth = _ref.rightCoverWidth;
   var leftCoverWidthResolved = leftCoverWidth || width;

package/dist/esm/scrollbar-styles.js

@@ -1,5 +1,2 @@
-import { gridSize } from '@atlaskit/theme/constants';
-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");
+export var scrollbarStyles = "\n  -ms-overflow-style: -ms-autohiding-scrollbar;\n\n  &::-webkit-scrollbar {\n    height: ".concat("var(--ds-space-100, 8px)", ";\n    width: ", "var(--ds-space-100, 8px)", ";\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: 8px;\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/version.json

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

package/dist/types-ts4.5/consts/consts.d.ts

@@ -0,0 +1,123 @@
+import { EditorTheme } from './types';
+export declare const akEditorFullPageDefaultFontSize = 16;
+export declare const akEditorCodeFontFamily: string;
+export declare const akEditorInactiveForeground = "#42526E";
+export declare const akEditorFocus = "#4C9AFF";
+export declare const akEditorSubtleAccent = "#DFE1E6";
+export declare const akEditorActiveBackground = "#42526E";
+export declare const akEditorActiveForeground = "#FFFFFF";
+export declare const akEditorBlockquoteBorderColor = "#DFE1E6";
+export declare const akEditorDropdownActiveBackground = "#091E42";
+export declare const akEditorPopupBackground = "#253858";
+export declare const akEditorPopupText = "#DEEBFF";
+export declare const akEditorPrimaryButton = "#0052CC";
+export declare const akEditorCodeBackground = "#F4F5F7";
+export declare const akEditorCodeBlockPadding = "12px";
+export declare const akEditorCodeInlinePadding = "2px 4px";
+export declare const akEditorDeleteBackground = "#FFEBE6";
+export declare const akEditorDeleteBackgroundShaded = "#FFEBE6";
+export declare const akEditorDeleteBackgroundWithOpacity = "rgba(255, 189, 173, 0.5)";
+export declare const akEditorDeleteBorder = "#FF5630";
+export declare const akEditorDeleteIconColor = "#DE350B";
+export declare const akEditorCustomIconSize = 20;
+export declare const akEditorSelectedBorderColor = "#0065FF";
+export declare const akEditorSelectedBgColor = "#DEEBFF";
+export declare const akEditorSelectedBlanketColor = "#B3D4FF";
+export declare const akEditorSelectedBorderSize = 1;
+export declare const akEditorSelectedBorder: string;
+export declare const akEditorSelectedBoxShadow: string;
+export declare const akEditorSelectedIconColor = "#0052CC";
+export declare const akEditorSelectedBorderBoldSize = 2;
+export declare const akEditorSelectedBlanketOpacity = 0.3;
+export declare const akEditorUnitZIndex = 1;
+export declare const akEditorShadowZIndex = 2;
+export declare const akEditorStickyHeaderZIndex = 11;
+export declare const akEditorSmallZIndex: number;
+export declare const akEditorGridLineZIndex = 9999;
+export declare const akEditorMenuZIndex: 500;
+export declare const akEditorFloatingPanelZIndex: 400;
+export declare const akEditorFloatingDialogZIndex: number;
+export declare const akEditorFloatingOverlapPanelZIndex: number;
+export declare const akEditorMentionSelected = "#7A869A";
+export declare const akEditorTableToolbarSize = 11;
+export declare const akEditorTableBorder = "#C1C7D0";
+export declare const akEditorTableBorderDark = "#3B475C";
+export declare const akEditorTableToolbar = "#F4F5F7";
+export declare const akEditorTableToolbarDark = "#283447";
+export declare const akEditorTableFloatingControls = "#F4F5F7";
+export declare const akEditorTableCellSelected = "#B3D4FF";
+export declare const akEditorTableToolbarSelected = "#4C9AFF";
+export declare const akEditorTableBorderSelected = "#0065FF";
+export declare const akEditorTableCellDelete = "#FFEBE6";
+export declare const akEditorTableBorderDelete = "#FF5630";
+export declare const akEditorTableToolbarDelete = "#FFBDAD";
+export declare const akEditorTableBorderRadius = "3px";
+export declare const akEditorTableCellBackgroundOpacity = 0.5;
+export declare const akEditorFullPageMaxWidth = 680;
+export declare const akEditorDefaultLayoutWidth = 760;
+export declare const akEditorWideLayoutWidth = 960;
+export declare const akEditorFullWidthLayoutWidth = 1800;
+export declare const akEditorFullWidthLayoutLineLength = 1792;
+export declare const akEditorTableNumberColumnWidth = 42;
+export declare const akEditorBreakoutPadding = 96;
+export declare const akEditorGutterPadding = 32;
+export declare const akEditorMobileBreakoutPoint = 720;
+export declare const akEditorTableCellMinWidth = 48;
+export declare const akEditorTableLegacyCellMinWidth = 128;
+export declare const akEditorMediaResizeHandlerPaddingWide = 12;
+export declare const akEditorMediaResizeHandlerPadding = 4;
+export declare const akEditorSwoopCubicBezier = "cubic-bezier(0.15, 1, 0.3, 1)";
+export declare const gridMediumMaxWidth = 1024;
+export declare const breakoutWideScaleRatio = 1.33;
+export declare const akRichMediaResizeZIndex: number;
+export declare const akLayoutGutterOffset: number;
+export declare const akEditorLineHeight = 1.714;
+export declare const akEditorRuleBackground = "#EBECF0";
+export declare const akEditorRuleBorderRadius = "1px";
+export declare const akEditorToolbarKeylineHeight = 2;
+export declare const akEditorContextPanelWidth = 320;
+export declare const blockNodesVerticalMargin = "0.75rem";
+export declare const DEFAULT_EMBED_CARD_WIDTH = 680;
+export declare const DEFAULT_EMBED_CARD_HEIGHT = 480;
+export declare const ATLASSIAN_NAVIGATION_HEIGHT = "56px";
+export declare const akEditorSelectedNodeClassName = "ak-editor-selected-node";
+export declare const editorFontSize: ({ theme }: {
+    theme: EditorTheme;
+}) => number;
+export declare const relativeSize: (multiplier: number) => ({ theme }: {
+    theme: EditorTheme;
+}) => number;
+export declare const relativeFontSizeToBase16: (px: number | string) => string;
+export declare const VIEWPORT_SIZES: {
+    laptopHiDPI: {
+        width: number;
+        height: number;
+    };
+    laptopMDPI: {
+        width: number;
+        height: number;
+    };
+    tabletL: {
+        width: number;
+        height: number;
+    };
+    tabletS: {
+        width: number;
+        height: number;
+    };
+    mobileM: {
+        width: number;
+        height: number;
+    };
+    mobileS: {
+        width: number;
+        height: number;
+    };
+    mobileXS: {
+        width: number;
+        height: number;
+    };
+};
+export declare const akEditorMobileMaxWidth = 0;
+export declare const getTableCellBackgroundDarkModeColors: string;
+export declare function getTableCellBackgroundDarkModeColorCSS(colorName: string, colorValue: string): string;

package/dist/types-ts4.5/consts/index.d.ts

@@ -0,0 +1,2 @@
+export type { EditorTheme } from './types';
+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, 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/types-ts4.5/consts/types.d.ts

@@ -0,0 +1,3 @@
+export type EditorTheme = {
+    baseFontSize?: number;
+};

package/dist/types-ts4.5/index.d.ts

@@ -0,0 +1,4 @@
+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, 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 type { EditorTheme } from './consts';
+export { SelectionStyle, getSelectionStyles, hideNativeBrowserTextSelectionStyles, } from './selection';
+export { overflowShadow } from './overflow-shadow';

package/dist/types-ts4.5/overflow-shadow/index.d.ts

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

package/dist/types-ts4.5/overflow-shadow/overflow-shadow.d.ts

@@ -0,0 +1,6 @@
+export declare const overflowShadow: ({ background, width, leftCoverWidth, rightCoverWidth, }: {
+    background: string;
+    width?: string | undefined;
+    leftCoverWidth?: string | undefined;
+    rightCoverWidth?: string | undefined;
+}) => import("@emotion/react").SerializedStyles;

package/dist/types-ts4.5/scrollbar-styles.d.ts

@@ -0,0 +1 @@
+export declare const scrollbarStyles: string;

package/dist/types-ts4.5/selection/index.d.ts

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

package/dist/types-ts4.5/selection/types.d.ts

@@ -0,0 +1,11 @@
+/**
+ * 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 declare enum SelectionStyle {
+    Border = 0,
+    BoxShadow = 1,
+    Background = 2,
+    Blanket = 3
+}

package/dist/types-ts4.5/selection/utils.d.ts

@@ -0,0 +1,13 @@
+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 declare const getSelectionStyles: (selectionStyles: Array<SelectionStyle>) => string;
+export declare const hideNativeBrowserTextSelectionStyles = "\n  ::selection,*::selection {\n    background-color: transparent;\n  }\n  ::-moz-selection,*::-moz-selection {\n    background-color: transparent;\n  }\n";

package/dist/types-ts4.5/shortcut/index.d.ts

@@ -0,0 +1 @@
+export { shortcutStyle } from './shortcut';

package/dist/types-ts4.5/shortcut/shortcut.d.ts

@@ -0,0 +1 @@
+export declare const shortcutStyle: import("@emotion/react").SerializedStyles;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/editor-shared-styles",
-  "version": "2.4.1",
+  "version": "2.4.3",
   "description": "Style values used in the editor/renderer",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"

package/src/consts/consts.ts

@@ -24,6 +24,7 @@ import {
 import {
   codeFontFamily,
   fontSize as defaultFontSize,
+  // eslint-disable-next-line @atlaskit/design-system/no-deprecated-imports
   gridSize,
   layers,
 } from '@atlaskit/theme/constants';

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

@@ -1,12 +1,11 @@
 /* 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`,
+  width = token('space.100', '8px'),
   leftCoverWidth,
   rightCoverWidth,
 }: {

package/src/scrollbar-styles.ts

@@ -1,15 +1,12 @@
-import { gridSize } from '@atlaskit/theme/constants';
 import { token } from '@atlaskit/tokens';
 
-const akGridSize = gridSize() + 'px';
-
 // TODO: https://product-fabric.atlassian.net/browse/DSP-4494
 export const scrollbarStyles = `
   -ms-overflow-style: -ms-autohiding-scrollbar;
 
   &::-webkit-scrollbar {
-    height: ${akGridSize};
-    width: ${akGridSize};
+    height: ${token('space.100', '8px')};
+    width: ${token('space.100', '8px')};
   }
 
   &::-webkit-scrollbar-corner {
@@ -28,7 +25,7 @@ export const scrollbarStyles = `
       'color.background.neutral.bold',
       'rgba(0, 0, 0, 0.2)',
     )};
-    border-radius: ${akGridSize};
+    border-radius: 8px;
   }
 
   &::-webkit-scrollbar-thumb:hover {