@atlaskit/editor-shared-styles 2.13.3 → 2.13.5

package/CHANGELOG.md

@@ -1,5 +1,22 @@
 # @atlaskit/editor-shared-styles
 
+## 2.13.5
+
+### Patch Changes
+
+- [#143733](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/143733)
+  [`db2f2648fd208`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/db2f2648fd208) -
+  [ux] Removing token fallbacks for styling. For apps supporting tokens this has no difference, for
+  those not there may be slight variations in colors to align with tokens.
+
+## 2.13.4
+
+### Patch Changes
+
+- [#137474](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/137474)
+  [`7ca1c34ebf2d5`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/7ca1c34ebf2d5) -
+  make breakout to use css to fix SSR issue on live edit page
+
 ## 2.13.3
 
 ### Patch Changes

package/dist/cjs/consts/consts.js

@@ -4,17 +4,16 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.editorFontSize = exports.breakoutWideScaleRatio = exports.blockNodesVerticalMargin = exports.avatarColors = 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.akEditorTableHeaderCellBackgroundDark = exports.akEditorTableHeaderCellBackground = exports.akEditorTableFloatingControls = exports.akEditorTableCellSelected = exports.akEditorTableCellOnStickyHeaderZIndex = exports.akEditorTableCellMinWidth = exports.akEditorTableCellDelete = exports.akEditorTableCellBlanketSelected = exports.akEditorTableCellBlanketDeleted = 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.akEditorGutterPaddingDynamic = 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.akEditorCalculatedWideLayoutWidth = exports.akEditorBreakoutPadding = exports.akEditorBlockquoteBorderColor = exports.akEditorActiveForeground = exports.akEditorActiveBackground = exports.VIEWPORT_SIZES = exports.MAX_BROWSER_SCROLLBAR_HEIGHT = exports.FULL_PAGE_EDITOR_TOOLBAR_HEIGHT = exports.DEFAULT_EMBED_CARD_WIDTH = exports.DEFAULT_EMBED_CARD_HEIGHT = exports.ATLASSIAN_NAVIGATION_HEIGHT = void 0;
+exports.editorFontSize = exports.breakoutWideScaleRatio = exports.blockNodesVerticalMargin = exports.avatarColors = 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.akEditorTableHeaderCellBackgroundDark = exports.akEditorTableHeaderCellBackground = exports.akEditorTableFloatingControls = exports.akEditorTableCellSelected = exports.akEditorTableCellOnStickyHeaderZIndex = exports.akEditorTableCellMinWidth = exports.akEditorTableCellDelete = exports.akEditorTableCellBlanketSelected = exports.akEditorTableCellBlanketDeleted = 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.akEditorGutterPaddingDynamic = 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.akEditorCalculatedWideLayoutWidthSmallViewport = exports.akEditorCalculatedWideLayoutWidth = exports.akEditorBreakoutPadding = exports.akEditorBlockquoteBorderColor = exports.akEditorActiveForeground = exports.akEditorActiveBackground = exports.VIEWPORT_SIZES = exports.MAX_BROWSER_SCROLLBAR_HEIGHT = exports.FULL_PAGE_EDITOR_TOOLBAR_HEIGHT = 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 _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _colors = require("@atlaskit/theme/colors");
-var _constants = require("@atlaskit/theme/constants");
 /* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
 
 var akEditorFullPageDefaultFontSize = exports.akEditorFullPageDefaultFontSize = 16;
-var akEditorCodeFontFamily = exports.akEditorCodeFontFamily = (0, _constants.codeFontFamily)();
+var akEditorCodeFontFamily = exports.akEditorCodeFontFamily = "var(--ds-font-family-code, ui-monospace, Menlo, \"Segoe UI Mono\", \"Ubuntu Mono\", monospace)";
 var akEditorInactiveForeground = exports.akEditorInactiveForeground = _colors.N500;
 var akEditorFocus = exports.akEditorFocus = _colors.B100;
 var akEditorSubtleAccent = exports.akEditorSubtleAccent = _colors.N40;
@@ -38,8 +37,8 @@ var akEditorSelectedBorderColor = exports.akEditorSelectedBorderColor = _colors.
 var akEditorSelectedBgColor = exports.akEditorSelectedBgColor = _colors.B50;
 var akEditorSelectedBlanketColor = exports.akEditorSelectedBlanketColor = _colors.B75;
 var akEditorSelectedBorderSize = exports.akEditorSelectedBorderSize = 1;
-var akEditorSelectedBorder = exports.akEditorSelectedBorder = "".concat(akEditorSelectedBorderSize, "px solid ", "var(--ds-border-selected, ".concat(akEditorSelectedBorderColor, ")"));
-var akEditorSelectedBoxShadow = exports.akEditorSelectedBoxShadow = "0 0 0 ".concat(akEditorSelectedBorderSize, "px ", "var(--ds-border-selected, ".concat(akEditorSelectedBorderColor, ")"));
+var akEditorSelectedBorder = exports.akEditorSelectedBorder = "".concat(akEditorSelectedBorderSize, "px solid ", "var(--ds-border-selected, #0C66E4)");
+var akEditorSelectedBoxShadow = exports.akEditorSelectedBoxShadow = "0 0 0 ".concat(akEditorSelectedBorderSize, "px ", "var(--ds-border-selected, #0C66E4)");
 var akEditorSelectedIconColor = exports.akEditorSelectedIconColor = _colors.B400;
 var akEditorSelectedBorderBoldSize = exports.akEditorSelectedBorderBoldSize = 2;
 var akEditorSelectedBlanketOpacity = exports.akEditorSelectedBlanketOpacity = 0.3;
@@ -50,9 +49,9 @@ var akEditorSmallZIndex = exports.akEditorSmallZIndex = akEditorStickyHeaderZInd
 var akEditorGridLineZIndex = exports.akEditorGridLineZIndex = 2;
 // z-index for main menu bar -
 // this is highest as it should be above anything else in editor below.
-var akEditorMenuZIndex = exports.akEditorMenuZIndex = _constants.layers.blanket();
+var akEditorMenuZIndex = exports.akEditorMenuZIndex = 500;
 // z-index used for floating toolbars like code block, table etc
-var akEditorFloatingPanelZIndex = exports.akEditorFloatingPanelZIndex = _constants.layers.layer();
+var akEditorFloatingPanelZIndex = exports.akEditorFloatingPanelZIndex = 400;
 // z-index used for pickers (date, emoji, mentions) and type-aheads, hyperlinks
 var akEditorFloatingDialogZIndex = exports.akEditorFloatingDialogZIndex = akEditorMenuZIndex + 10;
 // z-index used for table cell menu options button on a sticky header
@@ -95,9 +94,10 @@ var akEditorMediaResizeHandlerPadding = exports.akEditorMediaResizeHandlerPaddin
 var akEditorSwoopCubicBezier = exports.akEditorSwoopCubicBezier = "cubic-bezier(0.15, 1, 0.3, 1)";
 var gridMediumMaxWidth = exports.gridMediumMaxWidth = 1024;
 var breakoutWideScaleRatio = exports.breakoutWideScaleRatio = 1.33;
+var akEditorCalculatedWideLayoutWidthSmallViewport = exports.akEditorCalculatedWideLayoutWidthSmallViewport = 905; // from breakoutConsts.calcWideWidth, layoutMaxWidth * breakoutConsts.wideScaleRatio = 904.8 ~ 905 This is a resulting width value that is applied to nodes that currently use breakouts (except table) and are set to `wide` when the viewport's width is <= 1266px.
 var akEditorCalculatedWideLayoutWidth = exports.akEditorCalculatedWideLayoutWidth = 1011; // = akEditorDefaultLayoutWidth * breakoutWideScaleRatio = 1010.8 ~ 1011 This is a resulting width value that is applied to nodes that currently use breakouts (except table) and are set to `wide` when the viewport's width is > 1329px.
 var akRichMediaResizeZIndex = exports.akRichMediaResizeZIndex = akEditorUnitZIndex * 99;
-var akLayoutGutterOffset = exports.akLayoutGutterOffset = (0, _constants.gridSize)() * 1.5;
+var akLayoutGutterOffset = exports.akLayoutGutterOffset = 12;
 var akEditorLineHeight = exports.akEditorLineHeight = 1.714;
 var akEditorRuleBackground = exports.akEditorRuleBackground = _colors.N30;
 var akEditorRuleBorderRadius = exports.akEditorRuleBorderRadius = '1px';
@@ -114,13 +114,14 @@ var MAX_BROWSER_SCROLLBAR_HEIGHT = exports.MAX_BROWSER_SCROLLBAR_HEIGHT = 20;
 
 // @deprecated
 var ATLASSIAN_NAVIGATION_HEIGHT = exports.ATLASSIAN_NAVIGATION_HEIGHT = '56px';
+var DEFAULT_FONT_SIZE = 14;
 var FULL_PAGE_EDITOR_TOOLBAR_HEIGHT = exports.FULL_PAGE_EDITOR_TOOLBAR_HEIGHT = function FULL_PAGE_EDITOR_TOOLBAR_HEIGHT() {
   return (0, _platformFeatureFlags.fg)('platform.confluence.frontend.narrow-full-page-editor-toolbar') ? "var(--ds-space-500, 40px)" : '56px';
 };
 var akEditorSelectedNodeClassName = exports.akEditorSelectedNodeClassName = 'ak-editor-selected-node';
 var editorFontSize = exports.editorFontSize = function editorFontSize(_ref) {
   var theme = _ref.theme;
-  return theme && theme.baseFontSize ? theme.baseFontSize : (0, _constants.fontSize)();
+  return theme && theme.baseFontSize ? theme.baseFontSize : DEFAULT_FONT_SIZE;
 };
 var relativeSize = exports.relativeSize = function relativeSize(multiplier) {
   return function (_ref2) {
@@ -181,4 +182,4 @@ var getTableCellBackgroundDarkModeColors = exports.getTableCellBackgroundDarkMod
 function getTableCellBackgroundDarkModeColorCSS(colorName, colorValue) {
   return "\n  &[colorname=\"".concat(colorName, "\"] {\n    background-color: ").concat(colorValue, " !important; // !important to override default style color\n  }\n  ");
 }
-var avatarColors = exports.avatarColors = ["var(--ds-icon-accent-red, ".concat(_colors.R100, ")"), "var(--ds-background-accent-red-bolder-hovered, ".concat(_colors.R300, ")"), "var(--ds-icon-accent-magenta, ".concat(_colors.R500, ")"), "var(--ds-background-accent-magenta-bolder-hovered, ".concat(_colors.Y100, ")"), "var(--ds-icon-accent-orange, ".concat(_colors.Y300, ")"), "var(--ds-background-accent-orange-bolder-hovered, ".concat(_colors.Y500, ")"), "var(--ds-icon-accent-green, ".concat(_colors.G100, ")"), "var(--ds-background-accent-green-bolder-hovered, ".concat(_colors.G300, ")"), "var(--ds-icon-accent-blue, ".concat(_colors.G500, ")"), "var(--ds-background-accent-blue-bolder-hovered, ".concat(_colors.T100, ")"), "var(--ds-icon-accent-teal, ".concat(_colors.T300, ")"), "var(--ds-background-accent-teal-bolder-hovered, ".concat(_colors.T500, ")"), "var(--ds-icon-accent-lime, ".concat(_colors.B100, ")"), "var(--ds-background-accent-lime-bolder-hovered, ".concat(_colors.B300, ")"), "var(--ds-icon-accent-purple, ".concat(_colors.B500, ")"), "var(--ds-background-accent-purple-bolder-hovered, ".concat(_colors.N70, ")"), "var(--ds-icon-accent-gray, ".concat(_colors.N200, ")"), "var(--ds-background-accent-gray-bolder-hovered, ".concat(_colors.N800, ")"), "var(--ds-icon-accent-yellow, ".concat(_colors.P100, ")"), "var(--ds-background-accent-yellow-bolder-hovered, ".concat(_colors.P300, ")"), "var(--ds-background-accent-yellow-bolder-pressed, ".concat(_colors.P500, ")")];
+var avatarColors = exports.avatarColors = ["var(--ds-icon-accent-red, #C9372C)", "var(--ds-background-accent-red-bolder-hovered, #AE2E24)", "var(--ds-icon-accent-magenta, #CD519D)", "var(--ds-background-accent-magenta-bolder-hovered, #943D73)", "var(--ds-icon-accent-orange, #E56910)", "var(--ds-background-accent-orange-bolder-hovered, #A54800)", "var(--ds-icon-accent-green, #22A06B)", "var(--ds-background-accent-green-bolder-hovered, #216E4E)", "var(--ds-icon-accent-blue, #1D7AFC)", "var(--ds-background-accent-blue-bolder-hovered, #0055CC)", "var(--ds-icon-accent-teal, #2898BD)", "var(--ds-background-accent-teal-bolder-hovered, #206A83)", "var(--ds-icon-accent-lime, #6A9A23)", "var(--ds-background-accent-lime-bolder-hovered, #4C6B1F)", "var(--ds-icon-accent-purple, #8270DB)", "var(--ds-background-accent-purple-bolder-hovered, #5E4DB2)", "var(--ds-icon-accent-gray, #758195)", "var(--ds-background-accent-gray-bolder-hovered, #44546F)", "var(--ds-icon-accent-yellow, #B38600)", "var(--ds-background-accent-yellow-bolder-hovered, #7F5F01)", "var(--ds-background-accent-yellow-bolder-pressed, #533F04)"];

package/dist/cjs/consts/index.js

@@ -69,6 +69,12 @@ Object.defineProperty(exports, "akEditorCalculatedWideLayoutWidth", {
     return _consts.akEditorCalculatedWideLayoutWidth;
   }
 });
+Object.defineProperty(exports, "akEditorCalculatedWideLayoutWidthSmallViewport", {
+  enumerable: true,
+  get: function get() {
+    return _consts.akEditorCalculatedWideLayoutWidthSmallViewport;
+  }
+});
 Object.defineProperty(exports, "akEditorCodeBackground", {
   enumerable: true,
   get: function get() {

package/dist/cjs/index.js

@@ -75,6 +75,12 @@ Object.defineProperty(exports, "akEditorCalculatedWideLayoutWidth", {
     return _consts.akEditorCalculatedWideLayoutWidth;
   }
 });
+Object.defineProperty(exports, "akEditorCalculatedWideLayoutWidthSmallViewport", {
+  enumerable: true,
+  get: function get() {
+    return _consts.akEditorCalculatedWideLayoutWidthSmallViewport;
+  }
+});
 Object.defineProperty(exports, "akEditorCodeBackground", {
   enumerable: true,
   get: function get() {

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

@@ -7,7 +7,6 @@ Object.defineProperty(exports, "__esModule", {
 exports.overflowShadow = void 0;
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 var _react = require("@emotion/react");
-var _colors = require("@atlaskit/theme/colors");
 var _templateObject;
 /* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
@@ -19,5 +18,5 @@ var overflowShadow = exports.overflowShadow = function overflowShadow(_ref) {
   var rightCoverWidthResolved = rightCoverWidth || width;
 
   // eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression -- needs manual remediation
-  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"])), "var(--ds-background-neutral, ".concat(_colors.N20, ")"), leftCoverWidthResolved, leftCoverWidthResolved, "var(--ds-surface-raised, transparent)", leftCoverWidthResolved, leftCoverWidthResolved, "var(--ds-background-neutral, ".concat(_colors.N20, ")"), 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);
+  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"])), "var(--ds-background-neutral, #091E420F)", leftCoverWidthResolved, leftCoverWidthResolved, "var(--ds-surface-raised, #FFFFFF)", leftCoverWidthResolved, leftCoverWidthResolved, "var(--ds-background-neutral, #091E420F)", rightCoverWidthResolved, rightCoverWidthResolved, "var(--ds-surface-raised, #FFFFFF)", rightCoverWidthResolved, rightCoverWidthResolved, "var(--ds-shadow-overflow-spread, #091e4229)", "var(--ds-UNSAFE-transparent, transparent)", width, "var(--ds-shadow-overflow-perimeter, #091e421f)", "var(--ds-UNSAFE-transparent, transparent)", width, "var(--ds-shadow-overflow-spread, #091e4229)", "var(--ds-UNSAFE-transparent, transparent)", width, "var(--ds-shadow-overflow-perimeter, #091e421f)", "var(--ds-UNSAFE-transparent, transparent)", width);
 };

package/dist/cjs/scrollbar-styles.js

@@ -5,4 +5,4 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.scrollbarStyles = void 0;
 // TODO: https://product-fabric.atlassian.net/browse/DSP-4494
-var scrollbarStyles = exports.scrollbarStyles = "\n  -ms-overflow-style: -ms-autohiding-scrollbar;\n\n  &::-webkit-scrollbar {\n    overflow: hidden,\n  }\n\n  &::-webkit-scrollbar-corner {\n    display: none;\n  }\n\n  &::-webkit-scrollbar-thumb {\n    background-color: ".concat("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");
+var scrollbarStyles = exports.scrollbarStyles = "\n  -ms-overflow-style: -ms-autohiding-scrollbar;\n\n  &::-webkit-scrollbar {\n    overflow: hidden,\n  }\n\n  &::-webkit-scrollbar-corner {\n    display: none;\n  }\n\n  &::-webkit-scrollbar-thumb {\n    background-color: ".concat("var(--ds-background-neutral-subtle, #00000000)", ";\n  }\n\n  &:hover::-webkit-scrollbar-thumb {\n    background-color: ", "var(--ds-background-neutral-bold, #44546F)", ";\n    border-radius: 8px;\n  }\n\n  &::-webkit-scrollbar-thumb:hover {\n    background-color: ", "var(--ds-background-neutral-bold-hovered, #2C3E5D)", ";\n  }\n");

package/dist/cjs/selection/utils.js

@@ -29,9 +29,9 @@ var getSelectionStyle = function getSelectionStyle(style) {
     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, ")"), ";");
+      return "background-color: ".concat("var(--ds-background-selected, #E9F2FF)", ";");
     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        }");
+      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, #388BFF14)", "\n        }");
     default:
       return '';
   }

package/dist/cjs/shortcut/shortcut.js

@@ -7,9 +7,7 @@ Object.defineProperty(exports, "__esModule", {
 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; // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 // eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
-var shortcutStyle = exports.shortcutStyle = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n\tbackground-color: ", "; /* N60 at 50% */\n\tcolor: ", ";\n\tborder-radius: ", "px;\n\tpadding: ", ";\n\tline-height: 12px;\n\tfont-size: ", ";\n\talign-self: flex-end;\n\t@media (max-width: ", "px) {\n\t\tdisplay: none;\n\t}\n"])), "var(--ds-background-neutral, rgba(223, 225, 229, 0.5))", "var(--ds-text-subtle, ".concat(_colors.N100, ")"), (0, _constants.borderRadius)(), "var(--ds-space-050, 4px)", (0, _consts.relativeFontSizeToBase16)(11.67), _consts.akEditorMobileMaxWidth);
+var shortcutStyle = exports.shortcutStyle = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n\tbackground-color: ", ";\n\tcolor: ", ";\n\tborder-radius: ", ";\n\tpadding: ", ";\n\tline-height: 12px;\n\tfont-size: ", ";\n\talign-self: flex-end;\n\t@media (max-width: ", "px) {\n\t\tdisplay: none;\n\t}\n"])), "var(--ds-background-neutral, #091E420F)", "var(--ds-text-subtle, #44546F)", "var(--ds-border-radius, 3px)", "var(--ds-space-050, 4px)", (0, _consts.relativeFontSizeToBase16)(11.67), _consts.akEditorMobileMaxWidth);

package/dist/es2019/consts/consts.js

@@ -1,11 +1,8 @@
 import { fg } from '@atlaskit/platform-feature-flags';
 /* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
-import { B100, B300, B400, B50, B500, B75, DN50, DN70, G100, G300, G500, N0, N100, N20, N200, N30, N40, N50, N500, N70, N700, N800, N900, P100, P300, P500, R100, R300, R400, R50, R500, R75, T100, T300, T500, Y100, Y300, Y500 } from '@atlaskit/theme/colors';
-import { codeFontFamily, fontSize as defaultFontSize,
-// eslint-disable-next-line @atlaskit/design-system/no-deprecated-imports
-gridSize, layers } from '@atlaskit/theme/constants';
+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';
 export const akEditorFullPageDefaultFontSize = 16;
-export const akEditorCodeFontFamily = codeFontFamily();
+export const akEditorCodeFontFamily = "var(--ds-font-family-code, ui-monospace, Menlo, \"Segoe UI Mono\", \"Ubuntu Mono\", monospace)";
 export const akEditorInactiveForeground = N500;
 export const akEditorFocus = B100;
 export const akEditorSubtleAccent = N40;
@@ -29,8 +26,8 @@ export const akEditorSelectedBorderColor = B300;
 export const akEditorSelectedBgColor = B50;
 export const akEditorSelectedBlanketColor = B75;
 export const akEditorSelectedBorderSize = 1;
-export const akEditorSelectedBorder = `${akEditorSelectedBorderSize}px solid ${`var(--ds-border-selected, ${akEditorSelectedBorderColor})`}`;
-export const akEditorSelectedBoxShadow = `0 0 0 ${akEditorSelectedBorderSize}px ${`var(--ds-border-selected, ${akEditorSelectedBorderColor})`}`;
+export const akEditorSelectedBorder = `${akEditorSelectedBorderSize}px solid ${"var(--ds-border-selected, #0C66E4)"}`;
+export const akEditorSelectedBoxShadow = `0 0 0 ${akEditorSelectedBorderSize}px ${"var(--ds-border-selected, #0C66E4)"}`;
 export const akEditorSelectedIconColor = B400;
 export const akEditorSelectedBorderBoldSize = 2;
 export const akEditorSelectedBlanketOpacity = 0.3;
@@ -41,9 +38,9 @@ export const akEditorSmallZIndex = akEditorStickyHeaderZIndex + 1;
 export const akEditorGridLineZIndex = 2;
 // z-index for main menu bar -
 // this is highest as it should be above anything else in editor below.
-export const akEditorMenuZIndex = layers.blanket();
+export const akEditorMenuZIndex = 500;
 // z-index used for floating toolbars like code block, table etc
-export const akEditorFloatingPanelZIndex = layers.layer();
+export const akEditorFloatingPanelZIndex = 400;
 // z-index used for pickers (date, emoji, mentions) and type-aheads, hyperlinks
 export const akEditorFloatingDialogZIndex = akEditorMenuZIndex + 10;
 // z-index used for table cell menu options button on a sticky header
@@ -84,9 +81,10 @@ 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 akEditorCalculatedWideLayoutWidthSmallViewport = 905; // from breakoutConsts.calcWideWidth, layoutMaxWidth * breakoutConsts.wideScaleRatio = 904.8 ~ 905 This is a resulting width value that is applied to nodes that currently use breakouts (except table) and are set to `wide` when the viewport's width is <= 1266px.
 export const akEditorCalculatedWideLayoutWidth = 1011; // = akEditorDefaultLayoutWidth * breakoutWideScaleRatio = 1010.8 ~ 1011 This is a resulting width value that is applied to nodes that currently use breakouts (except table) and are set to `wide` when the viewport's width is > 1329px.
 export const akRichMediaResizeZIndex = akEditorUnitZIndex * 99;
-export const akLayoutGutterOffset = gridSize() * 1.5;
+export const akLayoutGutterOffset = 12;
 export const akEditorLineHeight = 1.714;
 export const akEditorRuleBackground = N30;
 export const akEditorRuleBorderRadius = '1px';
@@ -103,11 +101,12 @@ export const MAX_BROWSER_SCROLLBAR_HEIGHT = 20;
 
 // @deprecated
 export const ATLASSIAN_NAVIGATION_HEIGHT = '56px';
+const DEFAULT_FONT_SIZE = 14;
 export const FULL_PAGE_EDITOR_TOOLBAR_HEIGHT = () => fg('platform.confluence.frontend.narrow-full-page-editor-toolbar') ? "var(--ds-space-500, 40px)" : '56px';
 export const akEditorSelectedNodeClassName = 'ak-editor-selected-node';
 export const editorFontSize = ({
   theme
-}) => theme && theme.baseFontSize ? theme.baseFontSize : defaultFontSize();
+}) => theme && theme.baseFontSize ? theme.baseFontSize : DEFAULT_FONT_SIZE;
 export const relativeSize = multiplier => ({
   theme
 }) => editorFontSize({
@@ -163,4 +162,4 @@ export function getTableCellBackgroundDarkModeColorCSS(colorName, colorValue) {
   }
   `;
 }
-export const avatarColors = [`var(--ds-icon-accent-red, ${R100})`, `var(--ds-background-accent-red-bolder-hovered, ${R300})`, `var(--ds-icon-accent-magenta, ${R500})`, `var(--ds-background-accent-magenta-bolder-hovered, ${Y100})`, `var(--ds-icon-accent-orange, ${Y300})`, `var(--ds-background-accent-orange-bolder-hovered, ${Y500})`, `var(--ds-icon-accent-green, ${G100})`, `var(--ds-background-accent-green-bolder-hovered, ${G300})`, `var(--ds-icon-accent-blue, ${G500})`, `var(--ds-background-accent-blue-bolder-hovered, ${T100})`, `var(--ds-icon-accent-teal, ${T300})`, `var(--ds-background-accent-teal-bolder-hovered, ${T500})`, `var(--ds-icon-accent-lime, ${B100})`, `var(--ds-background-accent-lime-bolder-hovered, ${B300})`, `var(--ds-icon-accent-purple, ${B500})`, `var(--ds-background-accent-purple-bolder-hovered, ${N70})`, `var(--ds-icon-accent-gray, ${N200})`, `var(--ds-background-accent-gray-bolder-hovered, ${N800})`, `var(--ds-icon-accent-yellow, ${P100})`, `var(--ds-background-accent-yellow-bolder-hovered, ${P300})`, `var(--ds-background-accent-yellow-bolder-pressed, ${P500})`];
+export const avatarColors = ["var(--ds-icon-accent-red, #C9372C)", "var(--ds-background-accent-red-bolder-hovered, #AE2E24)", "var(--ds-icon-accent-magenta, #CD519D)", "var(--ds-background-accent-magenta-bolder-hovered, #943D73)", "var(--ds-icon-accent-orange, #E56910)", "var(--ds-background-accent-orange-bolder-hovered, #A54800)", "var(--ds-icon-accent-green, #22A06B)", "var(--ds-background-accent-green-bolder-hovered, #216E4E)", "var(--ds-icon-accent-blue, #1D7AFC)", "var(--ds-background-accent-blue-bolder-hovered, #0055CC)", "var(--ds-icon-accent-teal, #2898BD)", "var(--ds-background-accent-teal-bolder-hovered, #206A83)", "var(--ds-icon-accent-lime, #6A9A23)", "var(--ds-background-accent-lime-bolder-hovered, #4C6B1F)", "var(--ds-icon-accent-purple, #8270DB)", "var(--ds-background-accent-purple-bolder-hovered, #5E4DB2)", "var(--ds-icon-accent-gray, #758195)", "var(--ds-background-accent-gray-bolder-hovered, #44546F)", "var(--ds-icon-accent-yellow, #B38600)", "var(--ds-background-accent-yellow-bolder-hovered, #7F5F01)", "var(--ds-background-accent-yellow-bolder-pressed, #533F04)"];

package/dist/es2019/consts/index.js

@@ -1 +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, akEditorGutterPaddingDynamic, 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, akEditorTableCellOnStickyHeaderZIndex, akEditorTableCellSelected, akEditorTableFloatingControls, akEditorTableHeaderCellBackground, akEditorTableHeaderCellBackgroundDark, akEditorTableLegacyCellMinWidth, akEditorTableNumberColumnWidth, akEditorTableToolbar, akEditorTableToolbarDark, akEditorTableToolbarDelete, akEditorTableToolbarSelected, akEditorTableToolbarSize, akEditorUnitZIndex, akEditorCalculatedWideLayoutWidth, akEditorWideLayoutWidth, akLayoutGutterOffset, akRichMediaResizeZIndex, avatarColors, blockNodesVerticalMargin, breakoutWideScaleRatio, editorFontSize, gridMediumMaxWidth, relativeSize, relativeFontSizeToBase16, DEFAULT_EMBED_CARD_HEIGHT, DEFAULT_EMBED_CARD_WIDTH, akEditorLineHeight, akEditorRuleBackground, akEditorRuleBorderRadius, akEditorSelectedNodeClassName, akEditorToolbarKeylineHeight, MAX_BROWSER_SCROLLBAR_HEIGHT, VIEWPORT_SIZES, akEditorMobileMaxWidth, getTableCellBackgroundDarkModeColors, ATLASSIAN_NAVIGATION_HEIGHT, FULL_PAGE_EDITOR_TOOLBAR_HEIGHT, akEditorTableCellBlanketSelected, akEditorTableCellBlanketDeleted } from './consts';
+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, akEditorGutterPaddingDynamic, 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, akEditorTableCellOnStickyHeaderZIndex, akEditorTableCellSelected, akEditorTableFloatingControls, akEditorTableHeaderCellBackground, akEditorTableHeaderCellBackgroundDark, akEditorTableLegacyCellMinWidth, akEditorTableNumberColumnWidth, akEditorTableToolbar, akEditorTableToolbarDark, akEditorTableToolbarDelete, akEditorTableToolbarSelected, akEditorTableToolbarSize, akEditorUnitZIndex, akEditorCalculatedWideLayoutWidth, akEditorCalculatedWideLayoutWidthSmallViewport, akEditorWideLayoutWidth, akLayoutGutterOffset, akRichMediaResizeZIndex, avatarColors, blockNodesVerticalMargin, breakoutWideScaleRatio, editorFontSize, gridMediumMaxWidth, relativeSize, relativeFontSizeToBase16, DEFAULT_EMBED_CARD_HEIGHT, DEFAULT_EMBED_CARD_WIDTH, akEditorLineHeight, akEditorRuleBackground, akEditorRuleBorderRadius, akEditorSelectedNodeClassName, akEditorToolbarKeylineHeight, MAX_BROWSER_SCROLLBAR_HEIGHT, VIEWPORT_SIZES, akEditorMobileMaxWidth, getTableCellBackgroundDarkModeColors, ATLASSIAN_NAVIGATION_HEIGHT, FULL_PAGE_EDITOR_TOOLBAR_HEIGHT, akEditorTableCellBlanketSelected, akEditorTableCellBlanketDeleted } from './consts';

package/dist/es2019/index.js

@@ -1,3 +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, akEditorGutterPaddingDynamic, 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, akEditorTableCellOnStickyHeaderZIndex, akEditorTableCellSelected, akEditorTableFloatingControls, akEditorTableHeaderCellBackground, akEditorTableHeaderCellBackgroundDark, akEditorTableLegacyCellMinWidth, akEditorTableNumberColumnWidth, akEditorTableToolbar, akEditorTableToolbarDark, akEditorTableToolbarDelete, akEditorTableToolbarSelected, akEditorTableToolbarSize, akEditorUnitZIndex, akEditorCalculatedWideLayoutWidth, akEditorWideLayoutWidth, akLayoutGutterOffset, akRichMediaResizeZIndex, avatarColors, blockNodesVerticalMargin, breakoutWideScaleRatio, editorFontSize, gridMediumMaxWidth, relativeSize, relativeFontSizeToBase16, DEFAULT_EMBED_CARD_HEIGHT, DEFAULT_EMBED_CARD_WIDTH, akEditorLineHeight, akEditorRuleBackground, akEditorRuleBorderRadius, akEditorSelectedNodeClassName, akEditorToolbarKeylineHeight, MAX_BROWSER_SCROLLBAR_HEIGHT, VIEWPORT_SIZES, akEditorMobileMaxWidth, getTableCellBackgroundDarkModeColors, ATLASSIAN_NAVIGATION_HEIGHT, FULL_PAGE_EDITOR_TOOLBAR_HEIGHT, akEditorTableCellBlanketSelected, akEditorTableCellBlanketDeleted } from './consts';
+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, akEditorGutterPaddingDynamic, 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, akEditorTableCellOnStickyHeaderZIndex, akEditorTableCellSelected, akEditorTableFloatingControls, akEditorTableHeaderCellBackground, akEditorTableHeaderCellBackgroundDark, akEditorTableLegacyCellMinWidth, akEditorTableNumberColumnWidth, akEditorTableToolbar, akEditorTableToolbarDark, akEditorTableToolbarDelete, akEditorTableToolbarSelected, akEditorTableToolbarSize, akEditorUnitZIndex, akEditorCalculatedWideLayoutWidth, akEditorCalculatedWideLayoutWidthSmallViewport, akEditorWideLayoutWidth, akLayoutGutterOffset, akRichMediaResizeZIndex, avatarColors, blockNodesVerticalMargin, breakoutWideScaleRatio, editorFontSize, gridMediumMaxWidth, relativeSize, relativeFontSizeToBase16, DEFAULT_EMBED_CARD_HEIGHT, DEFAULT_EMBED_CARD_WIDTH, akEditorLineHeight, akEditorRuleBackground, akEditorRuleBorderRadius, akEditorSelectedNodeClassName, akEditorToolbarKeylineHeight, MAX_BROWSER_SCROLLBAR_HEIGHT, VIEWPORT_SIZES, akEditorMobileMaxWidth, getTableCellBackgroundDarkModeColors, ATLASSIAN_NAVIGATION_HEIGHT, FULL_PAGE_EDITOR_TOOLBAR_HEIGHT, akEditorTableCellBlanketSelected, akEditorTableCellBlanketDeleted } from './consts';
 export { SelectionStyle, getSelectionStyles, hideNativeBrowserTextSelectionStyles } from './selection';
 export { overflowShadow } from './overflow-shadow';

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

@@ -1,7 +1,6 @@
 /* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css } from '@emotion/react';
-import { N20 } from '@atlaskit/theme/colors';
 export const overflowShadow = ({
   leftCoverWidth,
   rightCoverWidth
@@ -15,49 +14,49 @@ export const overflowShadow = ({
 /* shadow cover left */
   linear-gradient(
     to right,
-    ${`var(--ds-background-neutral, ${N20})`} ${leftCoverWidthResolved},
+    ${"var(--ds-background-neutral, #091E420F)"} ${leftCoverWidthResolved},
     transparent ${leftCoverWidthResolved}
   ),
 /* shadow cover background left */
   linear-gradient(
     to right,
-    ${"var(--ds-surface-raised, transparent)"} ${leftCoverWidthResolved},
+    ${"var(--ds-surface-raised, #FFFFFF)"} ${leftCoverWidthResolved},
     transparent ${leftCoverWidthResolved}
   ),
 /* shadow cover right */
   linear-gradient(
     to left,
-    ${`var(--ds-background-neutral, ${N20})`} ${rightCoverWidthResolved},
+    ${"var(--ds-background-neutral, #091E420F)"} ${rightCoverWidthResolved},
     transparent ${rightCoverWidthResolved}
   ),
 /* shadow cover background right */
   linear-gradient(
     to left,
-    ${"var(--ds-surface-raised, transparent)"} ${rightCoverWidthResolved},
+    ${"var(--ds-surface-raised, #FFFFFF)"} ${rightCoverWidthResolved},
     transparent ${rightCoverWidthResolved}
   ),
 /* overflow shadow right spread */
   linear-gradient(
     to left,
-    ${"var(--ds-shadow-overflow-spread, rgba(9, 30, 66, 0.13))"} 0,
-    ${"var(--ds-UNSAFE-transparent, rgba(99, 114, 130, 0))"}  ${width}
+    ${"var(--ds-shadow-overflow-spread, #091e4229)"} 0,
+    ${"var(--ds-UNSAFE-transparent, transparent)"}  ${width}
   ),
   /* overflow shadow right perimeter */
   linear-gradient(
     to left,
-    ${"var(--ds-shadow-overflow-perimeter, transparent)"} 0,
+    ${"var(--ds-shadow-overflow-perimeter, #091e421f)"} 0,
     ${"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-transparent, rgba(99, 114, 130, 0))"}  ${width}
+    ${"var(--ds-shadow-overflow-spread, #091e4229)"} 0,
+    ${"var(--ds-UNSAFE-transparent, transparent)"}  ${width}
   ),
   /* overflow shadow left perimeter */
   linear-gradient(
     to right,
-    ${"var(--ds-shadow-overflow-perimeter, transparent)"} 0,
+    ${"var(--ds-shadow-overflow-perimeter, #091e421f)"} 0,
     ${"var(--ds-UNSAFE-transparent, transparent)"}  ${width}
   )
 `;

package/dist/es2019/scrollbar-styles.js

@@ -11,15 +11,15 @@ export const scrollbarStyles = `
   }
 
   &::-webkit-scrollbar-thumb {
-    background-color: ${"var(--ds-background-neutral-subtle, rgba(0, 0, 0, 0))"};
+    background-color: ${"var(--ds-background-neutral-subtle, #00000000)"};
   }
 
   &:hover::-webkit-scrollbar-thumb {
-    background-color: ${"var(--ds-background-neutral-bold, rgba(0, 0, 0, 0.2))"};
+    background-color: ${"var(--ds-background-neutral-bold, #44546F)"};
     border-radius: 8px;
   }
 
   &::-webkit-scrollbar-thumb:hover {
-    background-color: ${"var(--ds-background-neutral-bold-hovered, rgba(0, 0, 0, 0.4))"};
+    background-color: ${"var(--ds-background-neutral-bold-hovered, #2C3E5D)"};
   }
 `;

package/dist/es2019/selection/utils.js

@@ -1,4 +1,4 @@
-import { akEditorSelectedBgColor, akEditorSelectedBorder, akEditorSelectedBorderColor, akEditorSelectedBoxShadow, akEditorSmallZIndex } from '../consts';
+import { akEditorSelectedBorder, akEditorSelectedBorderColor, akEditorSelectedBoxShadow, akEditorSmallZIndex } from '../consts';
 import { SelectionStyle } from './types';
 
 /**
@@ -46,7 +46,7 @@ const getSelectionStyle = style => {
         border-color: transparent;
         `;
     case SelectionStyle.Background:
-      return `background-color: ${`var(--ds-background-selected, ${akEditorSelectedBgColor})`};`;
+      return `background-color: ${"var(--ds-background-selected, #E9F2FF)"};`;
     case SelectionStyle.Blanket:
       return `
         position: relative;
@@ -65,7 +65,7 @@ const getSelectionStyle = style => {
           width: 100%;
           pointer-events: none;
           z-index: ${akEditorSmallZIndex};
-          background-color: ${"var(--ds-blanket-selected, #B3D4FF4C)"}
+          background-color: ${"var(--ds-blanket-selected, #388BFF14)"}
         }`;
     default:
       return '';

package/dist/es2019/shortcut/shortcut.js

@@ -1,14 +1,12 @@
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css } from '@emotion/react';
-import { N100 } from '@atlaskit/theme/colors';
-import { borderRadius } from '@atlaskit/theme/constants';
 import { akEditorMobileMaxWidth, relativeFontSizeToBase16 } from '../consts';
 
 // eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
 export const shortcutStyle = css`
-	background-color: ${"var(--ds-background-neutral, rgba(223, 225, 229, 0.5))"}; /* N60 at 50% */
-	color: ${`var(--ds-text-subtle, ${N100})`};
-	border-radius: ${borderRadius()}px;
+	background-color: ${"var(--ds-background-neutral, #091E420F)"};
+	color: ${"var(--ds-text-subtle, #44546F)"};
+	border-radius: ${"var(--ds-border-radius, 3px)"};
 	padding: ${"var(--ds-space-050, 4px)"};
 	line-height: 12px;
 	font-size: ${relativeFontSizeToBase16(11.67)};

package/dist/esm/consts/consts.js

@@ -1,12 +1,9 @@
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import { fg } from '@atlaskit/platform-feature-flags';
 /* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
-import { B100, B300, B400, B50, B500, B75, DN50, DN70, G100, G300, G500, N0, N100, N20, N200, N30, N40, N50, N500, N70, N700, N800, N900, P100, P300, P500, R100, R300, R400, R50, R500, R75, T100, T300, T500, Y100, Y300, Y500 } from '@atlaskit/theme/colors';
-import { codeFontFamily, fontSize as defaultFontSize,
-// eslint-disable-next-line @atlaskit/design-system/no-deprecated-imports
-gridSize, layers } from '@atlaskit/theme/constants';
+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';
 export var akEditorFullPageDefaultFontSize = 16;
-export var akEditorCodeFontFamily = codeFontFamily();
+export var akEditorCodeFontFamily = "var(--ds-font-family-code, ui-monospace, Menlo, \"Segoe UI Mono\", \"Ubuntu Mono\", monospace)";
 export var akEditorInactiveForeground = N500;
 export var akEditorFocus = B100;
 export var akEditorSubtleAccent = N40;
@@ -30,8 +27,8 @@ export var akEditorSelectedBorderColor = B300;
 export var akEditorSelectedBgColor = B50;
 export var akEditorSelectedBlanketColor = B75;
 export var akEditorSelectedBorderSize = 1;
-export var akEditorSelectedBorder = "".concat(akEditorSelectedBorderSize, "px solid ", "var(--ds-border-selected, ".concat(akEditorSelectedBorderColor, ")"));
-export var akEditorSelectedBoxShadow = "0 0 0 ".concat(akEditorSelectedBorderSize, "px ", "var(--ds-border-selected, ".concat(akEditorSelectedBorderColor, ")"));
+export var akEditorSelectedBorder = "".concat(akEditorSelectedBorderSize, "px solid ", "var(--ds-border-selected, #0C66E4)");
+export var akEditorSelectedBoxShadow = "0 0 0 ".concat(akEditorSelectedBorderSize, "px ", "var(--ds-border-selected, #0C66E4)");
 export var akEditorSelectedIconColor = B400;
 export var akEditorSelectedBorderBoldSize = 2;
 export var akEditorSelectedBlanketOpacity = 0.3;
@@ -42,9 +39,9 @@ export var akEditorSmallZIndex = akEditorStickyHeaderZIndex + 1;
 export var akEditorGridLineZIndex = 2;
 // z-index for main menu bar -
 // this is highest as it should be above anything else in editor below.
-export var akEditorMenuZIndex = layers.blanket();
+export var akEditorMenuZIndex = 500;
 // z-index used for floating toolbars like code block, table etc
-export var akEditorFloatingPanelZIndex = layers.layer();
+export var akEditorFloatingPanelZIndex = 400;
 // z-index used for pickers (date, emoji, mentions) and type-aheads, hyperlinks
 export var akEditorFloatingDialogZIndex = akEditorMenuZIndex + 10;
 // z-index used for table cell menu options button on a sticky header
@@ -87,9 +84,10 @@ export var akEditorMediaResizeHandlerPadding = 4;
 export var akEditorSwoopCubicBezier = "cubic-bezier(0.15, 1, 0.3, 1)";
 export var gridMediumMaxWidth = 1024;
 export var breakoutWideScaleRatio = 1.33;
+export var akEditorCalculatedWideLayoutWidthSmallViewport = 905; // from breakoutConsts.calcWideWidth, layoutMaxWidth * breakoutConsts.wideScaleRatio = 904.8 ~ 905 This is a resulting width value that is applied to nodes that currently use breakouts (except table) and are set to `wide` when the viewport's width is <= 1266px.
 export var akEditorCalculatedWideLayoutWidth = 1011; // = akEditorDefaultLayoutWidth * breakoutWideScaleRatio = 1010.8 ~ 1011 This is a resulting width value that is applied to nodes that currently use breakouts (except table) and are set to `wide` when the viewport's width is > 1329px.
 export var akRichMediaResizeZIndex = akEditorUnitZIndex * 99;
-export var akLayoutGutterOffset = gridSize() * 1.5;
+export var akLayoutGutterOffset = 12;
 export var akEditorLineHeight = 1.714;
 export var akEditorRuleBackground = N30;
 export var akEditorRuleBorderRadius = '1px';
@@ -106,13 +104,14 @@ export var MAX_BROWSER_SCROLLBAR_HEIGHT = 20;
 
 // @deprecated
 export var ATLASSIAN_NAVIGATION_HEIGHT = '56px';
+var DEFAULT_FONT_SIZE = 14;
 export var FULL_PAGE_EDITOR_TOOLBAR_HEIGHT = function FULL_PAGE_EDITOR_TOOLBAR_HEIGHT() {
   return fg('platform.confluence.frontend.narrow-full-page-editor-toolbar') ? "var(--ds-space-500, 40px)" : '56px';
 };
 export var akEditorSelectedNodeClassName = 'ak-editor-selected-node';
 export var editorFontSize = function editorFontSize(_ref) {
   var theme = _ref.theme;
-  return theme && theme.baseFontSize ? theme.baseFontSize : defaultFontSize();
+  return theme && theme.baseFontSize ? theme.baseFontSize : DEFAULT_FONT_SIZE;
 };
 export var relativeSize = function relativeSize(multiplier) {
   return function (_ref2) {
@@ -173,4 +172,4 @@ export var getTableCellBackgroundDarkModeColors = [['White', '#000000'], ['Light
 export function getTableCellBackgroundDarkModeColorCSS(colorName, colorValue) {
   return "\n  &[colorname=\"".concat(colorName, "\"] {\n    background-color: ").concat(colorValue, " !important; // !important to override default style color\n  }\n  ");
 }
-export var avatarColors = ["var(--ds-icon-accent-red, ".concat(R100, ")"), "var(--ds-background-accent-red-bolder-hovered, ".concat(R300, ")"), "var(--ds-icon-accent-magenta, ".concat(R500, ")"), "var(--ds-background-accent-magenta-bolder-hovered, ".concat(Y100, ")"), "var(--ds-icon-accent-orange, ".concat(Y300, ")"), "var(--ds-background-accent-orange-bolder-hovered, ".concat(Y500, ")"), "var(--ds-icon-accent-green, ".concat(G100, ")"), "var(--ds-background-accent-green-bolder-hovered, ".concat(G300, ")"), "var(--ds-icon-accent-blue, ".concat(G500, ")"), "var(--ds-background-accent-blue-bolder-hovered, ".concat(T100, ")"), "var(--ds-icon-accent-teal, ".concat(T300, ")"), "var(--ds-background-accent-teal-bolder-hovered, ".concat(T500, ")"), "var(--ds-icon-accent-lime, ".concat(B100, ")"), "var(--ds-background-accent-lime-bolder-hovered, ".concat(B300, ")"), "var(--ds-icon-accent-purple, ".concat(B500, ")"), "var(--ds-background-accent-purple-bolder-hovered, ".concat(N70, ")"), "var(--ds-icon-accent-gray, ".concat(N200, ")"), "var(--ds-background-accent-gray-bolder-hovered, ".concat(N800, ")"), "var(--ds-icon-accent-yellow, ".concat(P100, ")"), "var(--ds-background-accent-yellow-bolder-hovered, ".concat(P300, ")"), "var(--ds-background-accent-yellow-bolder-pressed, ".concat(P500, ")")];
+export var avatarColors = ["var(--ds-icon-accent-red, #C9372C)", "var(--ds-background-accent-red-bolder-hovered, #AE2E24)", "var(--ds-icon-accent-magenta, #CD519D)", "var(--ds-background-accent-magenta-bolder-hovered, #943D73)", "var(--ds-icon-accent-orange, #E56910)", "var(--ds-background-accent-orange-bolder-hovered, #A54800)", "var(--ds-icon-accent-green, #22A06B)", "var(--ds-background-accent-green-bolder-hovered, #216E4E)", "var(--ds-icon-accent-blue, #1D7AFC)", "var(--ds-background-accent-blue-bolder-hovered, #0055CC)", "var(--ds-icon-accent-teal, #2898BD)", "var(--ds-background-accent-teal-bolder-hovered, #206A83)", "var(--ds-icon-accent-lime, #6A9A23)", "var(--ds-background-accent-lime-bolder-hovered, #4C6B1F)", "var(--ds-icon-accent-purple, #8270DB)", "var(--ds-background-accent-purple-bolder-hovered, #5E4DB2)", "var(--ds-icon-accent-gray, #758195)", "var(--ds-background-accent-gray-bolder-hovered, #44546F)", "var(--ds-icon-accent-yellow, #B38600)", "var(--ds-background-accent-yellow-bolder-hovered, #7F5F01)", "var(--ds-background-accent-yellow-bolder-pressed, #533F04)"];

package/dist/esm/consts/index.js

@@ -1 +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, akEditorGutterPaddingDynamic, 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, akEditorTableCellOnStickyHeaderZIndex, akEditorTableCellSelected, akEditorTableFloatingControls, akEditorTableHeaderCellBackground, akEditorTableHeaderCellBackgroundDark, akEditorTableLegacyCellMinWidth, akEditorTableNumberColumnWidth, akEditorTableToolbar, akEditorTableToolbarDark, akEditorTableToolbarDelete, akEditorTableToolbarSelected, akEditorTableToolbarSize, akEditorUnitZIndex, akEditorCalculatedWideLayoutWidth, akEditorWideLayoutWidth, akLayoutGutterOffset, akRichMediaResizeZIndex, avatarColors, blockNodesVerticalMargin, breakoutWideScaleRatio, editorFontSize, gridMediumMaxWidth, relativeSize, relativeFontSizeToBase16, DEFAULT_EMBED_CARD_HEIGHT, DEFAULT_EMBED_CARD_WIDTH, akEditorLineHeight, akEditorRuleBackground, akEditorRuleBorderRadius, akEditorSelectedNodeClassName, akEditorToolbarKeylineHeight, MAX_BROWSER_SCROLLBAR_HEIGHT, VIEWPORT_SIZES, akEditorMobileMaxWidth, getTableCellBackgroundDarkModeColors, ATLASSIAN_NAVIGATION_HEIGHT, FULL_PAGE_EDITOR_TOOLBAR_HEIGHT, akEditorTableCellBlanketSelected, akEditorTableCellBlanketDeleted } from './consts';
+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, akEditorGutterPaddingDynamic, 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, akEditorTableCellOnStickyHeaderZIndex, akEditorTableCellSelected, akEditorTableFloatingControls, akEditorTableHeaderCellBackground, akEditorTableHeaderCellBackgroundDark, akEditorTableLegacyCellMinWidth, akEditorTableNumberColumnWidth, akEditorTableToolbar, akEditorTableToolbarDark, akEditorTableToolbarDelete, akEditorTableToolbarSelected, akEditorTableToolbarSize, akEditorUnitZIndex, akEditorCalculatedWideLayoutWidth, akEditorCalculatedWideLayoutWidthSmallViewport, akEditorWideLayoutWidth, akLayoutGutterOffset, akRichMediaResizeZIndex, avatarColors, blockNodesVerticalMargin, breakoutWideScaleRatio, editorFontSize, gridMediumMaxWidth, relativeSize, relativeFontSizeToBase16, DEFAULT_EMBED_CARD_HEIGHT, DEFAULT_EMBED_CARD_WIDTH, akEditorLineHeight, akEditorRuleBackground, akEditorRuleBorderRadius, akEditorSelectedNodeClassName, akEditorToolbarKeylineHeight, MAX_BROWSER_SCROLLBAR_HEIGHT, VIEWPORT_SIZES, akEditorMobileMaxWidth, getTableCellBackgroundDarkModeColors, ATLASSIAN_NAVIGATION_HEIGHT, FULL_PAGE_EDITOR_TOOLBAR_HEIGHT, akEditorTableCellBlanketSelected, akEditorTableCellBlanketDeleted } from './consts';

package/dist/esm/index.js

@@ -1,3 +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, akEditorGutterPaddingDynamic, 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, akEditorTableCellOnStickyHeaderZIndex, akEditorTableCellSelected, akEditorTableFloatingControls, akEditorTableHeaderCellBackground, akEditorTableHeaderCellBackgroundDark, akEditorTableLegacyCellMinWidth, akEditorTableNumberColumnWidth, akEditorTableToolbar, akEditorTableToolbarDark, akEditorTableToolbarDelete, akEditorTableToolbarSelected, akEditorTableToolbarSize, akEditorUnitZIndex, akEditorCalculatedWideLayoutWidth, akEditorWideLayoutWidth, akLayoutGutterOffset, akRichMediaResizeZIndex, avatarColors, blockNodesVerticalMargin, breakoutWideScaleRatio, editorFontSize, gridMediumMaxWidth, relativeSize, relativeFontSizeToBase16, DEFAULT_EMBED_CARD_HEIGHT, DEFAULT_EMBED_CARD_WIDTH, akEditorLineHeight, akEditorRuleBackground, akEditorRuleBorderRadius, akEditorSelectedNodeClassName, akEditorToolbarKeylineHeight, MAX_BROWSER_SCROLLBAR_HEIGHT, VIEWPORT_SIZES, akEditorMobileMaxWidth, getTableCellBackgroundDarkModeColors, ATLASSIAN_NAVIGATION_HEIGHT, FULL_PAGE_EDITOR_TOOLBAR_HEIGHT, akEditorTableCellBlanketSelected, akEditorTableCellBlanketDeleted } from './consts';
+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, akEditorGutterPaddingDynamic, 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, akEditorTableCellOnStickyHeaderZIndex, akEditorTableCellSelected, akEditorTableFloatingControls, akEditorTableHeaderCellBackground, akEditorTableHeaderCellBackgroundDark, akEditorTableLegacyCellMinWidth, akEditorTableNumberColumnWidth, akEditorTableToolbar, akEditorTableToolbarDark, akEditorTableToolbarDelete, akEditorTableToolbarSelected, akEditorTableToolbarSize, akEditorUnitZIndex, akEditorCalculatedWideLayoutWidth, akEditorCalculatedWideLayoutWidthSmallViewport, akEditorWideLayoutWidth, akLayoutGutterOffset, akRichMediaResizeZIndex, avatarColors, blockNodesVerticalMargin, breakoutWideScaleRatio, editorFontSize, gridMediumMaxWidth, relativeSize, relativeFontSizeToBase16, DEFAULT_EMBED_CARD_HEIGHT, DEFAULT_EMBED_CARD_WIDTH, akEditorLineHeight, akEditorRuleBackground, akEditorRuleBorderRadius, akEditorSelectedNodeClassName, akEditorToolbarKeylineHeight, MAX_BROWSER_SCROLLBAR_HEIGHT, VIEWPORT_SIZES, akEditorMobileMaxWidth, getTableCellBackgroundDarkModeColors, ATLASSIAN_NAVIGATION_HEIGHT, FULL_PAGE_EDITOR_TOOLBAR_HEIGHT, akEditorTableCellBlanketSelected, akEditorTableCellBlanketDeleted } from './consts';
 export { SelectionStyle, getSelectionStyles, hideNativeBrowserTextSelectionStyles } from './selection';
 export { overflowShadow } from './overflow-shadow';

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

@@ -3,7 +3,6 @@ var _templateObject;
 /* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css } from '@emotion/react';
-import { N20 } from '@atlaskit/theme/colors';
 export var overflowShadow = function overflowShadow(_ref) {
   var leftCoverWidth = _ref.leftCoverWidth,
     rightCoverWidth = _ref.rightCoverWidth;
@@ -12,5 +11,5 @@ export var overflowShadow = function overflowShadow(_ref) {
   var rightCoverWidthResolved = rightCoverWidth || width;
 
   // eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression -- needs manual remediation
-  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"])), "var(--ds-background-neutral, ".concat(N20, ")"), leftCoverWidthResolved, leftCoverWidthResolved, "var(--ds-surface-raised, transparent)", leftCoverWidthResolved, leftCoverWidthResolved, "var(--ds-background-neutral, ".concat(N20, ")"), 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);
+  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"])), "var(--ds-background-neutral, #091E420F)", leftCoverWidthResolved, leftCoverWidthResolved, "var(--ds-surface-raised, #FFFFFF)", leftCoverWidthResolved, leftCoverWidthResolved, "var(--ds-background-neutral, #091E420F)", rightCoverWidthResolved, rightCoverWidthResolved, "var(--ds-surface-raised, #FFFFFF)", rightCoverWidthResolved, rightCoverWidthResolved, "var(--ds-shadow-overflow-spread, #091e4229)", "var(--ds-UNSAFE-transparent, transparent)", width, "var(--ds-shadow-overflow-perimeter, #091e421f)", "var(--ds-UNSAFE-transparent, transparent)", width, "var(--ds-shadow-overflow-spread, #091e4229)", "var(--ds-UNSAFE-transparent, transparent)", width, "var(--ds-shadow-overflow-perimeter, #091e421f)", "var(--ds-UNSAFE-transparent, transparent)", width);
 };

package/dist/esm/scrollbar-styles.js

@@ -1,2 +1,2 @@
 // TODO: https://product-fabric.atlassian.net/browse/DSP-4494
-export var scrollbarStyles = "\n  -ms-overflow-style: -ms-autohiding-scrollbar;\n\n  &::-webkit-scrollbar {\n    overflow: hidden,\n  }\n\n  &::-webkit-scrollbar-corner {\n    display: none;\n  }\n\n  &::-webkit-scrollbar-thumb {\n    background-color: ".concat("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");
+export var scrollbarStyles = "\n  -ms-overflow-style: -ms-autohiding-scrollbar;\n\n  &::-webkit-scrollbar {\n    overflow: hidden,\n  }\n\n  &::-webkit-scrollbar-corner {\n    display: none;\n  }\n\n  &::-webkit-scrollbar-thumb {\n    background-color: ".concat("var(--ds-background-neutral-subtle, #00000000)", ";\n  }\n\n  &:hover::-webkit-scrollbar-thumb {\n    background-color: ", "var(--ds-background-neutral-bold, #44546F)", ";\n    border-radius: 8px;\n  }\n\n  &::-webkit-scrollbar-thumb:hover {\n    background-color: ", "var(--ds-background-neutral-bold-hovered, #2C3E5D)", ";\n  }\n");

package/dist/esm/selection/utils.js

@@ -1,4 +1,4 @@
-import { akEditorSelectedBgColor, akEditorSelectedBorder, akEditorSelectedBorderColor, akEditorSelectedBoxShadow, akEditorSmallZIndex } from '../consts';
+import { akEditorSelectedBorder, akEditorSelectedBorderColor, akEditorSelectedBoxShadow, akEditorSmallZIndex } from '../consts';
 import { SelectionStyle } from './types';
 
 /**
@@ -24,9 +24,9 @@ var getSelectionStyle = function getSelectionStyle(style) {
     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, ")"), ";");
+      return "background-color: ".concat("var(--ds-background-selected, #E9F2FF)", ";");
     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        }");
+      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, #388BFF14)", "\n        }");
     default:
       return '';
   }

package/dist/esm/shortcut/shortcut.js

@@ -2,9 +2,7 @@ import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral
 var _templateObject;
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css } from '@emotion/react';
-import { N100 } from '@atlaskit/theme/colors';
-import { borderRadius } from '@atlaskit/theme/constants';
 import { akEditorMobileMaxWidth, relativeFontSizeToBase16 } from '../consts';
 
 // eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
-export var shortcutStyle = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n\tbackground-color: ", "; /* N60 at 50% */\n\tcolor: ", ";\n\tborder-radius: ", "px;\n\tpadding: ", ";\n\tline-height: 12px;\n\tfont-size: ", ";\n\talign-self: flex-end;\n\t@media (max-width: ", "px) {\n\t\tdisplay: none;\n\t}\n"])), "var(--ds-background-neutral, rgba(223, 225, 229, 0.5))", "var(--ds-text-subtle, ".concat(N100, ")"), borderRadius(), "var(--ds-space-050, 4px)", relativeFontSizeToBase16(11.67), akEditorMobileMaxWidth);
+export var shortcutStyle = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n\tbackground-color: ", ";\n\tcolor: ", ";\n\tborder-radius: ", ";\n\tpadding: ", ";\n\tline-height: 12px;\n\tfont-size: ", ";\n\talign-self: flex-end;\n\t@media (max-width: ", "px) {\n\t\tdisplay: none;\n\t}\n"])), "var(--ds-background-neutral, #091E420F)", "var(--ds-text-subtle, #44546F)", "var(--ds-border-radius, 3px)", "var(--ds-space-050, 4px)", relativeFontSizeToBase16(11.67), akEditorMobileMaxWidth);

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

@@ -1,6 +1,6 @@
 import type { EditorTheme } from './types';
 export declare const akEditorFullPageDefaultFontSize = 16;
-export declare const akEditorCodeFontFamily: string;
+export declare const akEditorCodeFontFamily: "var(--ds-font-family-code)";
 export declare const akEditorInactiveForeground = "#42526E";
 export declare const akEditorFocus = "#4C9AFF";
 export declare const akEditorSubtleAccent = "#DFE1E6";
@@ -34,8 +34,8 @@ export declare const akEditorShadowZIndex = 2;
 export declare const akEditorStickyHeaderZIndex = 11;
 export declare const akEditorSmallZIndex: number;
 export declare const akEditorGridLineZIndex = 2;
-export declare const akEditorMenuZIndex: 500;
-export declare const akEditorFloatingPanelZIndex: 400;
+export declare const akEditorMenuZIndex = 500;
+export declare const akEditorFloatingPanelZIndex = 400;
 export declare const akEditorFloatingDialogZIndex: number;
 export declare const akEditorTableCellOnStickyHeaderZIndex: number;
 export declare const akEditorFloatingOverlapPanelZIndex: number;
@@ -73,9 +73,10 @@ 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 akEditorCalculatedWideLayoutWidthSmallViewport = 905;
 export declare const akEditorCalculatedWideLayoutWidth = 1011;
 export declare const akRichMediaResizeZIndex: number;
-export declare const akLayoutGutterOffset: number;
+export declare const akLayoutGutterOffset = 12;
 export declare const akEditorLineHeight = 1.714;
 export declare const akEditorRuleBackground = "#EBECF0";
 export declare const akEditorRuleBorderRadius = "1px";

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

@@ -1,2 +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, akEditorGutterPaddingDynamic, 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, akEditorTableCellOnStickyHeaderZIndex, akEditorTableCellSelected, akEditorTableFloatingControls, akEditorTableHeaderCellBackground, akEditorTableHeaderCellBackgroundDark, akEditorTableLegacyCellMinWidth, akEditorTableNumberColumnWidth, akEditorTableToolbar, akEditorTableToolbarDark, akEditorTableToolbarDelete, akEditorTableToolbarSelected, akEditorTableToolbarSize, akEditorUnitZIndex, akEditorCalculatedWideLayoutWidth, akEditorWideLayoutWidth, akLayoutGutterOffset, akRichMediaResizeZIndex, avatarColors, blockNodesVerticalMargin, breakoutWideScaleRatio, editorFontSize, gridMediumMaxWidth, relativeSize, relativeFontSizeToBase16, DEFAULT_EMBED_CARD_HEIGHT, DEFAULT_EMBED_CARD_WIDTH, akEditorLineHeight, akEditorRuleBackground, akEditorRuleBorderRadius, akEditorSelectedNodeClassName, akEditorToolbarKeylineHeight, MAX_BROWSER_SCROLLBAR_HEIGHT, VIEWPORT_SIZES, akEditorMobileMaxWidth, getTableCellBackgroundDarkModeColors, ATLASSIAN_NAVIGATION_HEIGHT, FULL_PAGE_EDITOR_TOOLBAR_HEIGHT, akEditorTableCellBlanketSelected, akEditorTableCellBlanketDeleted, } from './consts';
+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, akEditorGutterPaddingDynamic, 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, akEditorTableCellOnStickyHeaderZIndex, akEditorTableCellSelected, akEditorTableFloatingControls, akEditorTableHeaderCellBackground, akEditorTableHeaderCellBackgroundDark, akEditorTableLegacyCellMinWidth, akEditorTableNumberColumnWidth, akEditorTableToolbar, akEditorTableToolbarDark, akEditorTableToolbarDelete, akEditorTableToolbarSelected, akEditorTableToolbarSize, akEditorUnitZIndex, akEditorCalculatedWideLayoutWidth, akEditorCalculatedWideLayoutWidthSmallViewport, akEditorWideLayoutWidth, akLayoutGutterOffset, akRichMediaResizeZIndex, avatarColors, blockNodesVerticalMargin, breakoutWideScaleRatio, editorFontSize, gridMediumMaxWidth, relativeSize, relativeFontSizeToBase16, DEFAULT_EMBED_CARD_HEIGHT, DEFAULT_EMBED_CARD_WIDTH, akEditorLineHeight, akEditorRuleBackground, akEditorRuleBorderRadius, akEditorSelectedNodeClassName, akEditorToolbarKeylineHeight, MAX_BROWSER_SCROLLBAR_HEIGHT, VIEWPORT_SIZES, akEditorMobileMaxWidth, getTableCellBackgroundDarkModeColors, ATLASSIAN_NAVIGATION_HEIGHT, FULL_PAGE_EDITOR_TOOLBAR_HEIGHT, akEditorTableCellBlanketSelected, akEditorTableCellBlanketDeleted, } from './consts';

package/dist/types/index.d.ts

@@ -1,4 +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, akEditorGutterPaddingDynamic, 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, akEditorTableCellOnStickyHeaderZIndex, akEditorTableCellSelected, akEditorTableFloatingControls, akEditorTableHeaderCellBackground, akEditorTableHeaderCellBackgroundDark, akEditorTableLegacyCellMinWidth, akEditorTableNumberColumnWidth, akEditorTableToolbar, akEditorTableToolbarDark, akEditorTableToolbarDelete, akEditorTableToolbarSelected, akEditorTableToolbarSize, akEditorUnitZIndex, akEditorCalculatedWideLayoutWidth, akEditorWideLayoutWidth, akLayoutGutterOffset, akRichMediaResizeZIndex, avatarColors, blockNodesVerticalMargin, breakoutWideScaleRatio, editorFontSize, gridMediumMaxWidth, relativeSize, relativeFontSizeToBase16, DEFAULT_EMBED_CARD_HEIGHT, DEFAULT_EMBED_CARD_WIDTH, akEditorLineHeight, akEditorRuleBackground, akEditorRuleBorderRadius, akEditorSelectedNodeClassName, akEditorToolbarKeylineHeight, MAX_BROWSER_SCROLLBAR_HEIGHT, VIEWPORT_SIZES, akEditorMobileMaxWidth, getTableCellBackgroundDarkModeColors, ATLASSIAN_NAVIGATION_HEIGHT, FULL_PAGE_EDITOR_TOOLBAR_HEIGHT, akEditorTableCellBlanketSelected, akEditorTableCellBlanketDeleted, } from './consts';
+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, akEditorGutterPaddingDynamic, 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, akEditorTableCellOnStickyHeaderZIndex, akEditorTableCellSelected, akEditorTableFloatingControls, akEditorTableHeaderCellBackground, akEditorTableHeaderCellBackgroundDark, akEditorTableLegacyCellMinWidth, akEditorTableNumberColumnWidth, akEditorTableToolbar, akEditorTableToolbarDark, akEditorTableToolbarDelete, akEditorTableToolbarSelected, akEditorTableToolbarSize, akEditorUnitZIndex, akEditorCalculatedWideLayoutWidth, akEditorCalculatedWideLayoutWidthSmallViewport, akEditorWideLayoutWidth, akLayoutGutterOffset, akRichMediaResizeZIndex, avatarColors, blockNodesVerticalMargin, breakoutWideScaleRatio, editorFontSize, gridMediumMaxWidth, relativeSize, relativeFontSizeToBase16, DEFAULT_EMBED_CARD_HEIGHT, DEFAULT_EMBED_CARD_WIDTH, akEditorLineHeight, akEditorRuleBackground, akEditorRuleBorderRadius, akEditorSelectedNodeClassName, akEditorToolbarKeylineHeight, MAX_BROWSER_SCROLLBAR_HEIGHT, VIEWPORT_SIZES, akEditorMobileMaxWidth, getTableCellBackgroundDarkModeColors, ATLASSIAN_NAVIGATION_HEIGHT, FULL_PAGE_EDITOR_TOOLBAR_HEIGHT, akEditorTableCellBlanketSelected, akEditorTableCellBlanketDeleted, } from './consts';
 export type { EditorTheme } from './consts';
 export { SelectionStyle, getSelectionStyles, hideNativeBrowserTextSelectionStyles, } from './selection';
 export { overflowShadow } from './overflow-shadow';

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

@@ -1,6 +1,6 @@
 import type { EditorTheme } from './types';
 export declare const akEditorFullPageDefaultFontSize = 16;
-export declare const akEditorCodeFontFamily: string;
+export declare const akEditorCodeFontFamily: "var(--ds-font-family-code)";
 export declare const akEditorInactiveForeground = "#42526E";
 export declare const akEditorFocus = "#4C9AFF";
 export declare const akEditorSubtleAccent = "#DFE1E6";
@@ -34,8 +34,8 @@ export declare const akEditorShadowZIndex = 2;
 export declare const akEditorStickyHeaderZIndex = 11;
 export declare const akEditorSmallZIndex: number;
 export declare const akEditorGridLineZIndex = 2;
-export declare const akEditorMenuZIndex: 500;
-export declare const akEditorFloatingPanelZIndex: 400;
+export declare const akEditorMenuZIndex = 500;
+export declare const akEditorFloatingPanelZIndex = 400;
 export declare const akEditorFloatingDialogZIndex: number;
 export declare const akEditorTableCellOnStickyHeaderZIndex: number;
 export declare const akEditorFloatingOverlapPanelZIndex: number;
@@ -73,9 +73,10 @@ 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 akEditorCalculatedWideLayoutWidthSmallViewport = 905;
 export declare const akEditorCalculatedWideLayoutWidth = 1011;
 export declare const akRichMediaResizeZIndex: number;
-export declare const akLayoutGutterOffset: number;
+export declare const akLayoutGutterOffset = 12;
 export declare const akEditorLineHeight = 1.714;
 export declare const akEditorRuleBackground = "#EBECF0";
 export declare const akEditorRuleBorderRadius = "1px";

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

@@ -1,2 +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, akEditorGutterPaddingDynamic, 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, akEditorTableCellOnStickyHeaderZIndex, akEditorTableCellSelected, akEditorTableFloatingControls, akEditorTableHeaderCellBackground, akEditorTableHeaderCellBackgroundDark, akEditorTableLegacyCellMinWidth, akEditorTableNumberColumnWidth, akEditorTableToolbar, akEditorTableToolbarDark, akEditorTableToolbarDelete, akEditorTableToolbarSelected, akEditorTableToolbarSize, akEditorUnitZIndex, akEditorCalculatedWideLayoutWidth, akEditorWideLayoutWidth, akLayoutGutterOffset, akRichMediaResizeZIndex, avatarColors, blockNodesVerticalMargin, breakoutWideScaleRatio, editorFontSize, gridMediumMaxWidth, relativeSize, relativeFontSizeToBase16, DEFAULT_EMBED_CARD_HEIGHT, DEFAULT_EMBED_CARD_WIDTH, akEditorLineHeight, akEditorRuleBackground, akEditorRuleBorderRadius, akEditorSelectedNodeClassName, akEditorToolbarKeylineHeight, MAX_BROWSER_SCROLLBAR_HEIGHT, VIEWPORT_SIZES, akEditorMobileMaxWidth, getTableCellBackgroundDarkModeColors, ATLASSIAN_NAVIGATION_HEIGHT, FULL_PAGE_EDITOR_TOOLBAR_HEIGHT, akEditorTableCellBlanketSelected, akEditorTableCellBlanketDeleted, } from './consts';
+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, akEditorGutterPaddingDynamic, 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, akEditorTableCellOnStickyHeaderZIndex, akEditorTableCellSelected, akEditorTableFloatingControls, akEditorTableHeaderCellBackground, akEditorTableHeaderCellBackgroundDark, akEditorTableLegacyCellMinWidth, akEditorTableNumberColumnWidth, akEditorTableToolbar, akEditorTableToolbarDark, akEditorTableToolbarDelete, akEditorTableToolbarSelected, akEditorTableToolbarSize, akEditorUnitZIndex, akEditorCalculatedWideLayoutWidth, akEditorCalculatedWideLayoutWidthSmallViewport, akEditorWideLayoutWidth, akLayoutGutterOffset, akRichMediaResizeZIndex, avatarColors, blockNodesVerticalMargin, breakoutWideScaleRatio, editorFontSize, gridMediumMaxWidth, relativeSize, relativeFontSizeToBase16, DEFAULT_EMBED_CARD_HEIGHT, DEFAULT_EMBED_CARD_WIDTH, akEditorLineHeight, akEditorRuleBackground, akEditorRuleBorderRadius, akEditorSelectedNodeClassName, akEditorToolbarKeylineHeight, MAX_BROWSER_SCROLLBAR_HEIGHT, VIEWPORT_SIZES, akEditorMobileMaxWidth, getTableCellBackgroundDarkModeColors, ATLASSIAN_NAVIGATION_HEIGHT, FULL_PAGE_EDITOR_TOOLBAR_HEIGHT, akEditorTableCellBlanketSelected, akEditorTableCellBlanketDeleted, } from './consts';

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

@@ -1,4 +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, akEditorGutterPaddingDynamic, 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, akEditorTableCellOnStickyHeaderZIndex, akEditorTableCellSelected, akEditorTableFloatingControls, akEditorTableHeaderCellBackground, akEditorTableHeaderCellBackgroundDark, akEditorTableLegacyCellMinWidth, akEditorTableNumberColumnWidth, akEditorTableToolbar, akEditorTableToolbarDark, akEditorTableToolbarDelete, akEditorTableToolbarSelected, akEditorTableToolbarSize, akEditorUnitZIndex, akEditorCalculatedWideLayoutWidth, akEditorWideLayoutWidth, akLayoutGutterOffset, akRichMediaResizeZIndex, avatarColors, blockNodesVerticalMargin, breakoutWideScaleRatio, editorFontSize, gridMediumMaxWidth, relativeSize, relativeFontSizeToBase16, DEFAULT_EMBED_CARD_HEIGHT, DEFAULT_EMBED_CARD_WIDTH, akEditorLineHeight, akEditorRuleBackground, akEditorRuleBorderRadius, akEditorSelectedNodeClassName, akEditorToolbarKeylineHeight, MAX_BROWSER_SCROLLBAR_HEIGHT, VIEWPORT_SIZES, akEditorMobileMaxWidth, getTableCellBackgroundDarkModeColors, ATLASSIAN_NAVIGATION_HEIGHT, FULL_PAGE_EDITOR_TOOLBAR_HEIGHT, akEditorTableCellBlanketSelected, akEditorTableCellBlanketDeleted, } from './consts';
+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, akEditorGutterPaddingDynamic, 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, akEditorTableCellOnStickyHeaderZIndex, akEditorTableCellSelected, akEditorTableFloatingControls, akEditorTableHeaderCellBackground, akEditorTableHeaderCellBackgroundDark, akEditorTableLegacyCellMinWidth, akEditorTableNumberColumnWidth, akEditorTableToolbar, akEditorTableToolbarDark, akEditorTableToolbarDelete, akEditorTableToolbarSelected, akEditorTableToolbarSize, akEditorUnitZIndex, akEditorCalculatedWideLayoutWidth, akEditorCalculatedWideLayoutWidthSmallViewport, akEditorWideLayoutWidth, akLayoutGutterOffset, akRichMediaResizeZIndex, avatarColors, blockNodesVerticalMargin, breakoutWideScaleRatio, editorFontSize, gridMediumMaxWidth, relativeSize, relativeFontSizeToBase16, DEFAULT_EMBED_CARD_HEIGHT, DEFAULT_EMBED_CARD_WIDTH, akEditorLineHeight, akEditorRuleBackground, akEditorRuleBorderRadius, akEditorSelectedNodeClassName, akEditorToolbarKeylineHeight, MAX_BROWSER_SCROLLBAR_HEIGHT, VIEWPORT_SIZES, akEditorMobileMaxWidth, getTableCellBackgroundDarkModeColors, ATLASSIAN_NAVIGATION_HEIGHT, FULL_PAGE_EDITOR_TOOLBAR_HEIGHT, akEditorTableCellBlanketSelected, akEditorTableCellBlanketDeleted, } from './consts';
 export type { EditorTheme } from './consts';
 export { SelectionStyle, getSelectionStyles, hideNativeBrowserTextSelectionStyles, } from './selection';
 export { overflowShadow } from './overflow-shadow';

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-shared-styles",
-	"version": "2.13.3",
+	"version": "2.13.5",
 	"description": "Style values used in the editor/renderer",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -23,9 +23,7 @@
 	"sideEffects": false,
 	"atlaskit:src": "src/index.ts",
 	"atlassian": {
-		"team": "Editor: Lego",
-		"inPublicMirror": true,
-		"releaseModel": "continuous"
+		"team": "Editor: Lego"
 	},
 	"platform-feature-flags": {
 		"platform.confluence.frontend.narrow-full-page-editor-toolbar": {
@@ -45,7 +43,7 @@
 	"dependencies": {
 		"@atlaskit/platform-feature-flags": "^0.3.0",
 		"@atlaskit/theme": "^13.0.0",
-		"@atlaskit/tokens": "^1.59.0",
+		"@atlaskit/tokens": "^1.61.0",
 		"@babel/runtime": "^7.0.0",
 		"@emotion/react": "^11.7.1"
 	},

package/src/consts/consts.ts

@@ -5,54 +5,29 @@ import {
 	B300,
 	B400,
 	B50,
-	B500,
 	B75,
 	DN50,
 	DN70,
-	G100,
-	G300,
-	G500,
 	N0,
 	N100,
 	N20,
-	N200,
 	N30,
 	N40,
 	N50,
 	N500,
-	N70,
 	N700,
-	N800,
 	N900,
-	P100,
-	P300,
-	P500,
-	R100,
 	R300,
 	R400,
 	R50,
-	R500,
 	R75,
-	T100,
-	T300,
-	T500,
-	Y100,
-	Y300,
-	Y500,
 } from '@atlaskit/theme/colors';
-import {
-	codeFontFamily,
-	fontSize as defaultFontSize,
-	// eslint-disable-next-line @atlaskit/design-system/no-deprecated-imports
-	gridSize,
-	layers,
-} from '@atlaskit/theme/constants';
 import { token } from '@atlaskit/tokens';
 
 import type { EditorTheme } from './types';
 
 export const akEditorFullPageDefaultFontSize = 16;
-export const akEditorCodeFontFamily = codeFontFamily();
+export const akEditorCodeFontFamily = token('font.family.code');
 export const akEditorInactiveForeground = N500;
 export const akEditorFocus = B100;
 export const akEditorSubtleAccent = N40;
@@ -78,11 +53,9 @@ export const akEditorSelectedBlanketColor = B75;
 export const akEditorSelectedBorderSize = 1;
 export const akEditorSelectedBorder = `${akEditorSelectedBorderSize}px solid ${token(
 	'color.border.selected',
-	akEditorSelectedBorderColor,
 )}`;
 export const akEditorSelectedBoxShadow = `0 0 0 ${akEditorSelectedBorderSize}px ${token(
 	'color.border.selected',
-	akEditorSelectedBorderColor,
 )}`;
 export const akEditorSelectedIconColor = B400;
 export const akEditorSelectedBorderBoldSize = 2;
@@ -94,9 +67,9 @@ export const akEditorSmallZIndex = akEditorStickyHeaderZIndex + 1;
 export const akEditorGridLineZIndex = 2;
 // z-index for main menu bar -
 // this is highest as it should be above anything else in editor below.
-export const akEditorMenuZIndex = layers.blanket();
+export const akEditorMenuZIndex = 500;
 // z-index used for floating toolbars like code block, table etc
-export const akEditorFloatingPanelZIndex = layers.layer();
+export const akEditorFloatingPanelZIndex = 400;
 // z-index used for pickers (date, emoji, mentions) and type-aheads, hyperlinks
 export const akEditorFloatingDialogZIndex = akEditorMenuZIndex + 10;
 // z-index used for table cell menu options button on a sticky header
@@ -138,9 +111,10 @@ 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 akEditorCalculatedWideLayoutWidthSmallViewport = 905; // from breakoutConsts.calcWideWidth, layoutMaxWidth * breakoutConsts.wideScaleRatio = 904.8 ~ 905 This is a resulting width value that is applied to nodes that currently use breakouts (except table) and are set to `wide` when the viewport's width is <= 1266px.
 export const akEditorCalculatedWideLayoutWidth = 1011; // = akEditorDefaultLayoutWidth * breakoutWideScaleRatio = 1010.8 ~ 1011 This is a resulting width value that is applied to nodes that currently use breakouts (except table) and are set to `wide` when the viewport's width is > 1329px.
 export const akRichMediaResizeZIndex = akEditorUnitZIndex * 99;
-export const akLayoutGutterOffset = gridSize() * 1.5;
+export const akLayoutGutterOffset = 12;
 export const akEditorLineHeight = 1.714;
 export const akEditorRuleBackground = N30;
 export const akEditorRuleBorderRadius = '1px';
@@ -160,6 +134,8 @@ export const MAX_BROWSER_SCROLLBAR_HEIGHT = 20;
 // @deprecated
 export const ATLASSIAN_NAVIGATION_HEIGHT = '56px';
 
+const DEFAULT_FONT_SIZE = 14;
+
 export const FULL_PAGE_EDITOR_TOOLBAR_HEIGHT = () =>
 	fg('platform.confluence.frontend.narrow-full-page-editor-toolbar')
 		? token('space.500', '40px')
@@ -168,7 +144,7 @@ export const FULL_PAGE_EDITOR_TOOLBAR_HEIGHT = () =>
 export const akEditorSelectedNodeClassName = 'ak-editor-selected-node';
 
 export const editorFontSize = ({ theme }: { theme: { baseFontSize?: number } | undefined }) =>
-	theme && theme.baseFontSize ? theme.baseFontSize : defaultFontSize();
+	theme && theme.baseFontSize ? theme.baseFontSize : DEFAULT_FONT_SIZE;
 
 export const relativeSize =
 	(multiplier: number) =>
@@ -238,25 +214,25 @@ export function getTableCellBackgroundDarkModeColorCSS(
 }
 
 export const avatarColors = [
-	token('color.icon.accent.red', R100),
-	token('color.background.accent.red.bolder.hovered', R300),
-	token('color.icon.accent.magenta', R500),
-	token('color.background.accent.magenta.bolder.hovered', Y100),
-	token('color.icon.accent.orange', Y300),
-	token('color.background.accent.orange.bolder.hovered', Y500),
-	token('color.icon.accent.green', G100),
-	token('color.background.accent.green.bolder.hovered', G300),
-	token('color.icon.accent.blue', G500),
-	token('color.background.accent.blue.bolder.hovered', T100),
-	token('color.icon.accent.teal', T300),
-	token('color.background.accent.teal.bolder.hovered', T500),
-	token('color.icon.accent.lime', B100),
-	token('color.background.accent.lime.bolder.hovered', B300),
-	token('color.icon.accent.purple', B500),
-	token('color.background.accent.purple.bolder.hovered', N70),
-	token('color.icon.accent.gray', N200),
-	token('color.background.accent.gray.bolder.hovered', N800),
-	token('color.icon.accent.yellow', P100),
-	token('color.background.accent.yellow.bolder.hovered', P300),
-	token('color.background.accent.yellow.bolder.pressed', P500),
+	token('color.icon.accent.red'),
+	token('color.background.accent.red.bolder.hovered'),
+	token('color.icon.accent.magenta'),
+	token('color.background.accent.magenta.bolder.hovered'),
+	token('color.icon.accent.orange'),
+	token('color.background.accent.orange.bolder.hovered'),
+	token('color.icon.accent.green'),
+	token('color.background.accent.green.bolder.hovered'),
+	token('color.icon.accent.blue'),
+	token('color.background.accent.blue.bolder.hovered'),
+	token('color.icon.accent.teal'),
+	token('color.background.accent.teal.bolder.hovered'),
+	token('color.icon.accent.lime'),
+	token('color.background.accent.lime.bolder.hovered'),
+	token('color.icon.accent.purple'),
+	token('color.background.accent.purple.bolder.hovered'),
+	token('color.icon.accent.gray'),
+	token('color.background.accent.gray.bolder.hovered'),
+	token('color.icon.accent.yellow'),
+	token('color.background.accent.yellow.bolder.hovered'),
+	token('color.background.accent.yellow.bolder.pressed'),
 ];

package/src/consts/index.ts

@@ -73,6 +73,7 @@ export {
 	akEditorTableToolbarSize,
 	akEditorUnitZIndex,
 	akEditorCalculatedWideLayoutWidth,
+	akEditorCalculatedWideLayoutWidthSmallViewport,
 	akEditorWideLayoutWidth,
 	akLayoutGutterOffset,
 	akRichMediaResizeZIndex,

package/src/index.ts

@@ -71,6 +71,7 @@ export {
 	akEditorTableToolbarSize,
 	akEditorUnitZIndex,
 	akEditorCalculatedWideLayoutWidth,
+	akEditorCalculatedWideLayoutWidthSmallViewport,
 	akEditorWideLayoutWidth,
 	akLayoutGutterOffset,
 	akRichMediaResizeZIndex,

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

@@ -2,7 +2,6 @@
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css } from '@emotion/react';
 
-import { N20 } from '@atlaskit/theme/colors';
 import { token } from '@atlaskit/tokens';
 
 export const overflowShadow = ({
@@ -21,50 +20,50 @@ export const overflowShadow = ({
 /* shadow cover left */
   linear-gradient(
     to right,
-    ${token('color.background.neutral', N20)} ${leftCoverWidthResolved},
+    ${token('color.background.neutral')} ${leftCoverWidthResolved},
     transparent ${leftCoverWidthResolved}
   ),
 /* shadow cover background left */
   linear-gradient(
     to right,
-    ${token('elevation.surface.raised', 'transparent')} ${leftCoverWidthResolved},
+    ${token('elevation.surface.raised')} ${leftCoverWidthResolved},
     transparent ${leftCoverWidthResolved}
   ),
 /* shadow cover right */
   linear-gradient(
     to left,
-    ${token('color.background.neutral', N20)} ${rightCoverWidthResolved},
+    ${token('color.background.neutral')} ${rightCoverWidthResolved},
     transparent ${rightCoverWidthResolved}
   ),
 /* shadow cover background right */
   linear-gradient(
     to left,
-    ${token('elevation.surface.raised', 'transparent')} ${rightCoverWidthResolved},
+    ${token('elevation.surface.raised')} ${rightCoverWidthResolved},
     transparent ${rightCoverWidthResolved}
   ),
 /* overflow shadow right spread */
   linear-gradient(
     to left,
-    ${token('elevation.shadow.overflow.spread', 'rgba(9, 30, 66, 0.13)')} 0,
-    ${token('utility.UNSAFE.transparent', 'rgba(99, 114, 130, 0)')}  ${width}
+    ${token('elevation.shadow.overflow.spread')} 0,
+    ${token('utility.UNSAFE.transparent')}  ${width}
   ),
   /* overflow shadow right perimeter */
   linear-gradient(
     to left,
-    ${token('elevation.shadow.overflow.perimeter', 'transparent')} 0,
-    ${token('utility.UNSAFE.transparent', 'transparent')}  ${width}
+    ${token('elevation.shadow.overflow.perimeter')} 0,
+    ${token('utility.UNSAFE.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.transparent', 'rgba(99, 114, 130, 0)')}  ${width}
+    ${token('elevation.shadow.overflow.spread')} 0,
+    ${token('utility.UNSAFE.transparent')}  ${width}
   ),
   /* overflow shadow left perimeter */
   linear-gradient(
     to right,
-    ${token('elevation.shadow.overflow.perimeter', 'transparent')} 0,
-    ${token('utility.UNSAFE.transparent', 'transparent')}  ${width}
+    ${token('elevation.shadow.overflow.perimeter')} 0,
+    ${token('utility.UNSAFE.transparent')}  ${width}
   )
 `;
 };

package/src/scrollbar-styles.ts

@@ -13,15 +13,15 @@ export const scrollbarStyles = `
   }
 
   &::-webkit-scrollbar-thumb {
-    background-color: ${token('color.background.neutral.subtle', 'rgba(0, 0, 0, 0)')};
+    background-color: ${token('color.background.neutral.subtle')};
   }
 
   &:hover::-webkit-scrollbar-thumb {
-    background-color: ${token('color.background.neutral.bold', 'rgba(0, 0, 0, 0.2)')};
+    background-color: ${token('color.background.neutral.bold')};
     border-radius: 8px;
   }
 
   &::-webkit-scrollbar-thumb:hover {
-    background-color: ${token('color.background.neutral.bold.hovered', 'rgba(0, 0, 0, 0.4)')};
+    background-color: ${token('color.background.neutral.bold.hovered')};
   }
 `;

package/src/selection/utils.ts

@@ -1,7 +1,6 @@
 import { token } from '@atlaskit/tokens';
 
 import {
-	akEditorSelectedBgColor,
 	akEditorSelectedBorder,
 	akEditorSelectedBorderColor,
 	akEditorSelectedBoxShadow,
@@ -61,7 +60,7 @@ const getSelectionStyle = (style: SelectionStyle): string => {
         border-color: transparent;
         `;
 		case SelectionStyle.Background:
-			return `background-color: ${token('color.background.selected', akEditorSelectedBgColor)};`;
+			return `background-color: ${token('color.background.selected')};`;
 		case SelectionStyle.Blanket:
 			return `
         position: relative;
@@ -80,7 +79,7 @@ const getSelectionStyle = (style: SelectionStyle): string => {
           width: 100%;
           pointer-events: none;
           z-index: ${akEditorSmallZIndex};
-          background-color: ${token('color.blanket.selected', '#B3D4FF4C')}
+          background-color: ${token('color.blanket.selected')}
         }`;
 		default:
 			return '';

package/src/shortcut/shortcut.ts

@@ -1,20 +1,15 @@
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css } from '@emotion/react';
 
-import { N100 } from '@atlaskit/theme/colors';
-import { borderRadius } from '@atlaskit/theme/constants';
 import { token } from '@atlaskit/tokens';
 
 import { akEditorMobileMaxWidth, relativeFontSizeToBase16 } from '../consts';
 
 // eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
 export const shortcutStyle = css`
-	background-color: ${token(
-		'color.background.neutral',
-		'rgba(223, 225, 229, 0.5)',
-	)}; /* N60 at 50% */
-	color: ${token('color.text.subtle', N100)};
-	border-radius: ${borderRadius()}px;
+	background-color: ${token('color.background.neutral')};
+	color: ${token('color.text.subtle')};
+	border-radius: ${token('border.radius', '3px')};
 	padding: ${token('space.050', '4px')};
 	line-height: 12px;
 	font-size: ${relativeFontSizeToBase16(11.67)};