@atlaskit/editor-shared-styles 2.2.1 → 2.2.3

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @atlaskit/editor-shared-styles
 
+## 2.2.3
+
+### Patch Changes
+
+- [`977ac74443c`](https://bitbucket.org/atlassian/atlassian-frontend/commits/977ac74443c) - DSP-7235: Fixes issue with overflow shadows on code blocks due to layered transparent colors.
+
+## 2.2.2
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 2.2.1
 
 ### Patch Changes

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

@@ -11,12 +11,14 @@ var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/hel
 
 var _react = require("@emotion/react");
 
+var _tokens = require("@atlaskit/tokens");
+
 var _templateObject;
 
 var overflowShadow = function overflowShadow(_ref) {
   var background = _ref.background,
       width = _ref.width;
-  return (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n/* shadow cover right */\n  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);
+  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 */\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, (0, _tokens.token)('elevation.surface.raised', 'transparent'), width, width, background, width, width, (0, _tokens.token)('elevation.surface.raised', 'transparent'), width, width, width, width);
 };
 
 exports.overflowShadow = overflowShadow;

package/dist/cjs/version.json

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

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

@@ -1,15 +1,34 @@
 /* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
 import { css } from '@emotion/react';
+import { token } from '@atlaskit/tokens';
 export const overflowShadow = ({
   background,
   width
 }) => css`
+/* shadow cover left */
+  linear-gradient(
+    to right,
+    ${background} ${width},
+    transparent ${width}
+  ),
+/* shadow cover background left */
+  linear-gradient(
+    to right,
+    ${token('elevation.surface.raised', 'transparent')} ${width},
+    transparent ${width}
+  ),
 /* shadow cover right */
   linear-gradient(
     to left,
     ${background} ${width},
     transparent ${width}
   ),
+/* shadow cover background right */
+  linear-gradient(
+    to left,
+    ${token('elevation.surface.raised', 'transparent')} ${width},
+    transparent ${width}
+  ),
 /* overflow shadow right */
   linear-gradient(
     to left,

package/dist/es2019/version.json

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

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

@@ -4,8 +4,9 @@ var _templateObject;
 
 /* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
 import { css } from '@emotion/react';
+import { token } from '@atlaskit/tokens';
 export var overflowShadow = function overflowShadow(_ref) {
   var background = _ref.background,
       width = _ref.width;
-  return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n/* shadow cover right */\n  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);
+  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 */\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, token('elevation.surface.raised', 'transparent'), width, width, background, width, width, token('elevation.surface.raised', 'transparent'), width, width, width, width);
 };

package/dist/esm/version.json

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

package/dist/types/consts/consts.d.ts

@@ -84,7 +84,7 @@ export declare const akEditorSelectedNodeClassName = "ak-editor-selected-node";
 export declare const editorFontSize: ({ theme }: {
     theme: EditorTheme;
 }) => number;
-export declare const relativeSize: (multiplier: number) => ({ theme, }: {
+export declare const relativeSize: (multiplier: number) => ({ theme }: {
     theme: EditorTheme;
 }) => number;
 export declare const relativeFontSizeToBase16: (px: number | string) => string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/editor-shared-styles",
-  "version": "2.2.1",
+  "version": "2.2.3",
   "description": "Style values used in the editor/renderer",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -12,13 +12,6 @@
   "module": "dist/esm/index.js",
   "module:es2019": "dist/es2019/index.js",
   "types": "dist/types/index.d.ts",
-  "typesVersions": {
-    ">=4.0 <4.5": {
-      "*": [
-        "dist/types-ts4.0/*"
-      ]
-    }
-  },
   "sideEffects": false,
   "atlaskit:src": "src/index.ts",
   "atlassian": {
@@ -35,7 +28,7 @@
   },
   "dependencies": {
     "@atlaskit/theme": "^12.2.0",
-    "@atlaskit/tokens": "^0.10.0",
+    "@atlaskit/tokens": "^0.11.0",
     "@babel/runtime": "^7.0.0",
     "@emotion/react": "^11.7.1"
   },
@@ -53,8 +46,11 @@
     },
     "@repo/internal": {
       "deprecation": "no-deprecated-imports",
-      "theming": "tokens"
+      "theming": "tokens",
+      "styling": [
+        "emotion"
+      ]
     }
   },
   "prettier": "@atlassian/atlassian-frontend-prettier-config-1.0.1"
-}
+}

package/report.api.md

@@ -1,205 +1,289 @@
+<!-- API Report Version: 2.2 -->
+
 ## API Report File for "@atlaskit/editor-shared-styles"
 
-> Do not edit this file. It is a report generated by [API Extractor](https://api-extractor.com/).
+> Do not edit this file. This report is auto-generated using [API Extractor](https://api-extractor.com/).
+> [Learn more about API reports](https://hello.atlassian.net/wiki/spaces/UR/pages/1825484529/Package+API+Reports)
+
+### Table of contents
+
+- [Main Entry Types](#main-entry-types)
+
+### Main Entry Types
+
+<!--SECTION START: Main Entry Types-->
 
 ```ts
 import { SerializedStyles } from '@emotion/react';
 
-export declare const akEditorActiveBackground = '#42526E';
+// @public (undocumented)
+export const akEditorActiveBackground = '#42526E';
 
-export declare const akEditorActiveForeground = '#FFFFFF';
+// @public (undocumented)
+export const akEditorActiveForeground = '#FFFFFF';
 
-export declare const akEditorBlockquoteBorderColor = '#DFE1E6';
+// @public (undocumented)
+export const akEditorBlockquoteBorderColor = '#DFE1E6';
 
-export declare const akEditorBreakoutPadding = 96;
+// @public (undocumented)
+export const akEditorBreakoutPadding = 96;
 
-export declare const akEditorCodeBackground = '#F4F5F7';
+// @public (undocumented)
+export const akEditorCodeBackground = '#F4F5F7';
 
-export declare const akEditorCodeBlockPadding = '12px';
+// @public (undocumented)
+export const akEditorCodeBlockPadding = '12px';
 
-export declare const akEditorCodeFontFamily: string;
+// @public (undocumented)
+export const akEditorCodeFontFamily: string;
 
-export declare const akEditorCodeInlinePadding = '2px 4px';
+// @public (undocumented)
+export const akEditorCodeInlinePadding = '2px 4px';
 
-export declare const akEditorContextPanelWidth = 320;
+// @public (undocumented)
+export const akEditorContextPanelWidth = 320;
 
-export declare const akEditorDefaultLayoutWidth = 760;
+// @public (undocumented)
+export const akEditorDefaultLayoutWidth = 760;
 
-export declare const akEditorDeleteBackground = '#FFEBE6';
+// @public (undocumented)
+export const akEditorDeleteBackground = '#FFEBE6';
 
-export declare const akEditorDeleteBackgroundShaded = '#FFEBE6';
+// @public (undocumented)
+export const akEditorDeleteBackgroundShaded = '#FFEBE6';
 
-export declare const akEditorDeleteBackgroundWithOpacity =
-  'rgba(255, 189, 173, 0.5)';
+// @public (undocumented)
+export const akEditorDeleteBackgroundWithOpacity = 'rgba(255, 189, 173, 0.5)';
 
-export declare const akEditorDeleteBorder = '#FF5630';
+// @public (undocumented)
+export const akEditorDeleteBorder = '#FF5630';
 
-export declare const akEditorDeleteIconColor = '#DE350B';
+// @public (undocumented)
+export const akEditorDeleteIconColor = '#DE350B';
 
-export declare const akEditorDropdownActiveBackground = '#091E42';
+// @public (undocumented)
+export const akEditorDropdownActiveBackground = '#091E42';
 
-export declare const akEditorFloatingDialogZIndex: number;
+// @public (undocumented)
+export const akEditorFloatingDialogZIndex: number;
 
-export declare const akEditorFloatingOverlapPanelZIndex: number;
+// @public (undocumented)
+export const akEditorFloatingOverlapPanelZIndex: number;
 
-export declare const akEditorFloatingPanelZIndex: 400;
+// @public (undocumented)
+export const akEditorFloatingPanelZIndex: 400;
 
-export declare const akEditorFocus = '#4C9AFF';
+// @public (undocumented)
+export const akEditorFocus = '#4C9AFF';
 
-export declare const akEditorFullPageDefaultFontSize = 16;
+// @public (undocumented)
+export const akEditorFullPageDefaultFontSize = 16;
 
-export declare const akEditorFullPageMaxWidth = 680;
+// @public (undocumented)
+export const akEditorFullPageMaxWidth = 680;
 
-export declare const akEditorFullWidthLayoutLineLength = 1792;
+// @public (undocumented)
+export const akEditorFullWidthLayoutLineLength = 1792;
 
-export declare const akEditorFullWidthLayoutWidth = 1800;
+// @public (undocumented)
+export const akEditorFullWidthLayoutWidth = 1800;
 
-export declare const akEditorGridLineZIndex = 9999;
+// @public (undocumented)
+export const akEditorGridLineZIndex = 9999;
 
-export declare const akEditorGutterPadding = 32;
+// @public (undocumented)
+export const akEditorGutterPadding = 32;
 
-export declare const akEditorInactiveForeground = '#42526E';
+// @public (undocumented)
+export const akEditorInactiveForeground = '#42526E';
 
-export declare const akEditorLineHeight = 1.714;
+// @public (undocumented)
+export const akEditorLineHeight = 1.714;
 
-export declare const akEditorMediaResizeHandlerPadding = 4;
+// @public (undocumented)
+export const akEditorMediaResizeHandlerPadding = 4;
 
-export declare const akEditorMediaResizeHandlerPaddingWide = 12;
+// @public (undocumented)
+export const akEditorMediaResizeHandlerPaddingWide = 12;
 
-export declare const akEditorMentionSelected = '#7A869A';
+// @public (undocumented)
+export const akEditorMentionSelected = '#7A869A';
 
-export declare const akEditorMenuZIndex: 500;
+// @public (undocumented)
+export const akEditorMenuZIndex: 500;
 
-export declare const akEditorMobileBreakoutPoint = 720;
+// @public (undocumented)
+export const akEditorMobileBreakoutPoint = 720;
 
-export declare const akEditorMobileMaxWidth = 0;
+// @public (undocumented)
+export const akEditorMobileMaxWidth = 0;
 
-export declare const akEditorPopupBackground = '#253858';
+// @public (undocumented)
+export const akEditorPopupBackground = '#253858';
 
-export declare const akEditorPopupText = '#DEEBFF';
+// @public (undocumented)
+export const akEditorPopupText = '#DEEBFF';
 
-export declare const akEditorPrimaryButton = '#0052CC';
+// @public (undocumented)
+export const akEditorPrimaryButton = '#0052CC';
 
-export declare const akEditorRuleBackground = '#EBECF0';
+// @public (undocumented)
+export const akEditorRuleBackground = '#EBECF0';
 
-export declare const akEditorRuleBorderRadius = '1px';
+// @public (undocumented)
+export const akEditorRuleBorderRadius = '1px';
 
-export declare const akEditorSelectedBgColor = '#DEEBFF';
+// @public (undocumented)
+export const akEditorSelectedBgColor = '#DEEBFF';
 
-export declare const akEditorSelectedBlanketColor = '#B3D4FF';
+// @public (undocumented)
+export const akEditorSelectedBlanketColor = '#B3D4FF';
 
-export declare const akEditorSelectedBlanketOpacity = 0.3;
+// @public (undocumented)
+export const akEditorSelectedBlanketOpacity = 0.3;
 
-export declare const akEditorSelectedBorder: string;
+// @public (undocumented)
+export const akEditorSelectedBorder: string;
 
-export declare const akEditorSelectedBorderBoldSize = 2;
+// @public (undocumented)
+export const akEditorSelectedBorderBoldSize = 2;
 
-export declare const akEditorSelectedBorderColor = '#0065FF';
+// @public (undocumented)
+export const akEditorSelectedBorderColor = '#0065FF';
 
-export declare const akEditorSelectedBorderSize = 1;
+// @public (undocumented)
+export const akEditorSelectedBorderSize = 1;
 
-export declare const akEditorSelectedBoxShadow: string;
+// @public (undocumented)
+export const akEditorSelectedBoxShadow: string;
 
-export declare const akEditorSelectedIconColor = '#0052CC';
+// @public (undocumented)
+export const akEditorSelectedIconColor = '#0052CC';
 
-export declare const akEditorSelectedNodeClassName = 'ak-editor-selected-node';
+// @public (undocumented)
+export const akEditorSelectedNodeClassName = 'ak-editor-selected-node';
 
-export declare const akEditorShadowZIndex = 2;
+// @public (undocumented)
+export const akEditorShadowZIndex = 2;
 
-export declare const akEditorSmallZIndex: number;
+// @public (undocumented)
+export const akEditorSmallZIndex: number;
 
-export declare const akEditorStickyHeaderZIndex = 11;
+// @public (undocumented)
+export const akEditorStickyHeaderZIndex = 11;
 
-export declare const akEditorSubtleAccent = '#DFE1E6';
+// @public (undocumented)
+export const akEditorSubtleAccent = '#DFE1E6';
 
-export declare const akEditorSwoopCubicBezier = 'cubic-bezier(0.15, 1, 0.3, 1)';
+// @public (undocumented)
+export const akEditorSwoopCubicBezier = 'cubic-bezier(0.15, 1, 0.3, 1)';
 
-export declare const akEditorTableBorder = '#C1C7D0';
+// @public (undocumented)
+export const akEditorTableBorder = '#C1C7D0';
 
-export declare const akEditorTableBorderDark = '#3B475C';
+// @public (undocumented)
+export const akEditorTableBorderDark = '#3B475C';
 
-export declare const akEditorTableBorderDelete = '#FF5630';
+// @public (undocumented)
+export const akEditorTableBorderDelete = '#FF5630';
 
-export declare const akEditorTableBorderRadius = '3px';
+// @public (undocumented)
+export const akEditorTableBorderRadius = '3px';
 
-export declare const akEditorTableBorderSelected = '#0065FF';
+// @public (undocumented)
+export const akEditorTableBorderSelected = '#0065FF';
 
-export declare const akEditorTableCellBackgroundOpacity = 0.5;
+// @public (undocumented)
+export const akEditorTableCellBackgroundOpacity = 0.5;
 
-export declare const akEditorTableCellDelete = '#FFEBE6';
+// @public (undocumented)
+export const akEditorTableCellDelete = '#FFEBE6';
 
-export declare const akEditorTableCellMinWidth = 48;
+// @public (undocumented)
+export const akEditorTableCellMinWidth = 48;
 
-export declare const akEditorTableCellSelected = '#B3D4FF';
+// @public (undocumented)
+export const akEditorTableCellSelected = '#B3D4FF';
 
-export declare const akEditorTableFloatingControls = '#F4F5F7';
+// @public (undocumented)
+export const akEditorTableFloatingControls = '#F4F5F7';
 
-export declare const akEditorTableLegacyCellMinWidth = 128;
+// @public (undocumented)
+export const akEditorTableLegacyCellMinWidth = 128;
 
-export declare const akEditorTableNumberColumnWidth = 42;
+// @public (undocumented)
+export const akEditorTableNumberColumnWidth = 42;
 
-export declare const akEditorTableToolbar = '#F4F5F7';
+// @public (undocumented)
+export const akEditorTableToolbar = '#F4F5F7';
 
-export declare const akEditorTableToolbarDark = '#283447';
+// @public (undocumented)
+export const akEditorTableToolbarDark = '#283447';
 
-export declare const akEditorTableToolbarDelete = '#FFBDAD';
+// @public (undocumented)
+export const akEditorTableToolbarDelete = '#FFBDAD';
 
-export declare const akEditorTableToolbarSelected = '#4C9AFF';
+// @public (undocumented)
+export const akEditorTableToolbarSelected = '#4C9AFF';
 
-export declare const akEditorTableToolbarSize = 11;
+// @public (undocumented)
+export const akEditorTableToolbarSize = 11;
 
-export declare const akEditorToolbarKeylineHeight = 2;
+// @public (undocumented)
+export const akEditorToolbarKeylineHeight = 2;
 
-export declare const akEditorUnitZIndex = 1;
+// @public (undocumented)
+export const akEditorUnitZIndex = 1;
 
-export declare const akEditorWideLayoutWidth = 960;
+// @public (undocumented)
+export const akEditorWideLayoutWidth = 960;
 
-export declare const akLayoutGutterOffset: number;
+// @public (undocumented)
+export const akLayoutGutterOffset: number;
 
-export declare const akRichMediaResizeZIndex: number;
+// @public (undocumented)
+export const akRichMediaResizeZIndex: number;
 
-export declare const ATLASSIAN_NAVIGATION_HEIGHT = '56px';
+// @public (undocumented)
+export const ATLASSIAN_NAVIGATION_HEIGHT = '56px';
 
-export declare const blockNodesVerticalMargin = '0.75rem';
+// @public (undocumented)
+export const blockNodesVerticalMargin = '0.75rem';
 
-export declare const breakoutWideScaleRatio = 1.33;
+// @public (undocumented)
+export const breakoutWideScaleRatio = 1.33;
 
-export declare const DEFAULT_EMBED_CARD_HEIGHT = 480;
+// @public (undocumented)
+export const DEFAULT_EMBED_CARD_HEIGHT = 480;
 
-export declare const DEFAULT_EMBED_CARD_WIDTH = 680;
+// @public (undocumented)
+export const DEFAULT_EMBED_CARD_WIDTH = 680;
 
-export declare const editorFontSize: ({
-  theme,
-}: {
-  theme: EditorTheme;
-}) => number;
+// @public (undocumented)
+export const editorFontSize: ({ theme }: { theme: EditorTheme }) => number;
 
-export declare type EditorTheme = {
+// @public (undocumented)
+export type EditorTheme = {
   baseFontSize?: number;
 };
 
-/**
- * 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: (
+// @public
+export const getSelectionStyles: (
   selectionStyles: Array<SelectionStyle>,
 ) => string;
 
-export declare const getTableCellBackgroundDarkModeColors: string;
+// @public (undocumented)
+export const getTableCellBackgroundDarkModeColors: string;
 
-export declare const gridMediumMaxWidth = 1024;
+// @public (undocumented)
+export const gridMediumMaxWidth = 1024;
 
-export declare const hideNativeBrowserTextSelectionStyles =
+// @public (undocumented)
+export const hideNativeBrowserTextSelectionStyles =
   '\n  ::selection,*::selection {\n    background-color: transparent;\n  }\n  ::-moz-selection,*::-moz-selection {\n    background-color: transparent;\n  }\n';
 
-export declare const overflowShadow: ({
+// @public (undocumented)
+export const overflowShadow: ({
   background,
   width,
 }: {
@@ -207,25 +291,28 @@ export declare const overflowShadow: ({
   width: string;
 }) => SerializedStyles;
 
-export declare const relativeFontSizeToBase16: (px: number | string) => string;
+// @public (undocumented)
+export const relativeFontSizeToBase16: (px: number | string) => string;
 
-export declare const relativeSize: (
+// @public (undocumented)
+export const relativeSize: (
   multiplier: number,
 ) => ({ theme }: { theme: EditorTheme }) => number;
 
-/**
- * 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,
+// @public
+export enum SelectionStyle {
+  // (undocumented)
   Background = 2,
+  // (undocumented)
   Blanket = 3,
+  // (undocumented)
+  Border = 0,
+  // (undocumented)
+  BoxShadow = 1,
 }
 
-export declare const VIEWPORT_SIZES: {
+// @public (undocumented)
+export const VIEWPORT_SIZES: {
   laptopHiDPI: {
     width: number;
     height: number;
@@ -256,5 +343,7 @@ export declare const VIEWPORT_SIZES: {
   };
 };
 
-export {};
+// (No @packageDocumentation comment for this package)
 ```
+
+<!--SECTION END: Main Entry Types-->

package/src/consts/consts.ts

@@ -134,11 +134,10 @@ export const akEditorSelectedNodeClassName = 'ak-editor-selected-node';
 export const editorFontSize = ({ theme }: { theme: EditorTheme }) =>
   theme && theme.baseFontSize ? theme.baseFontSize : defaultFontSize();
 
-export const relativeSize = (multiplier: number) => ({
-  theme,
-}: {
-  theme: EditorTheme;
-}) => editorFontSize({ theme }) * multiplier;
+export const relativeSize =
+  (multiplier: number) =>
+  ({ theme }: { theme: EditorTheme }) =>
+    editorFontSize({ theme }) * multiplier;
 
 export const relativeFontSizeToBase16 = (px: number | string) => {
   if (typeof px === 'string') {

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

@@ -1,6 +1,8 @@
 /* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
 import { css } from '@emotion/react';
 
+import { token } from '@atlaskit/tokens';
+
 export const overflowShadow = ({
   background,
   width,
@@ -8,12 +10,30 @@ export const overflowShadow = ({
   background: string;
   width: string;
 }) => css`
+/* shadow cover left */
+  linear-gradient(
+    to right,
+    ${background} ${width},
+    transparent ${width}
+  ),
+/* shadow cover background left */
+  linear-gradient(
+    to right,
+    ${token('elevation.surface.raised', 'transparent')} ${width},
+    transparent ${width}
+  ),
 /* shadow cover right */
   linear-gradient(
     to left,
     ${background} ${width},
     transparent ${width}
   ),
+/* shadow cover background right */
+  linear-gradient(
+    to left,
+    ${token('elevation.surface.raised', 'transparent')} ${width},
+    transparent ${width}
+  ),
 /* overflow shadow right */
   linear-gradient(
     to left,

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

@@ -1,123 +0,0 @@
-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.0/consts/index.d.ts

@@ -1,2 +0,0 @@
-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.0/consts/types.d.ts

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

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

@@ -1,4 +0,0 @@
-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.0/overflow-shadow/index.d.ts

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

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

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

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

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

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

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

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

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

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

@@ -1,13 +0,0 @@
-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.0/shortcut/index.d.ts

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

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

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