@atlaskit/editor-shared-styles 2.0.1 → 2.1.2

package/CHANGELOG.md

@@ -1,5 +1,32 @@
 # @atlaskit/editor-shared-styles
 
+## 2.1.2
+
+### Patch Changes
+
+- [`17480b66f3e`](https://bitbucket.org/atlassian/atlassian-frontend/commits/17480b66f3e) - [ux][ed-9943] Fix to have the TypeAhead component appear above the main editor toolbar.
+- [`d8b3bc73330`](https://bitbucket.org/atlassian/atlassian-frontend/commits/d8b3bc73330) - [ED-14507] Deprecate the allowDynamicTextSizing editor prop and remove all code related to it. This feature has been unused since 2020.
+
+## 2.1.1
+
+### Patch Changes
+
+- Updated dependencies
+
+## 2.1.0
+
+### Minor Changes
+
+- [`02bfb564e45`](https://bitbucket.org/atlassian/atlassian-frontend/commits/02bfb564e45) - [ux] Instrumented `@atlaskit/editor-shared-styles` and partial `@atlaskit/editor-core` with the new theming package, `@atlaskit/tokens`.
+
+  New tokens will be visible only in applications configured to use the new Tokens API (currently in alpha).
+  These changes are intended to be interoperable with the legacy theme implementation. Legacy dark mode users should expect no visual or breaking changes.
+
+- [`5ab00fca118`](https://bitbucket.org/atlassian/atlassian-frontend/commits/5ab00fca118) - Instrumented `@atlaskit/editor-shared-styles` with the new theming package, `@atlaskit/tokens`.
+
+  New tokens will be visible only in applications configured to use the new Tokens API (currently in alpha).
+  These changes are intended to be interoperable with the legacy theme implementation. Legacy dark mode users should expect no visual or breaking changes.
+
 ## 2.0.1
 
 ### Patch Changes

package/consts/package.json

@@ -3,5 +3,6 @@
   "main": "../dist/cjs/consts/index.js",
   "module": "../dist/esm/consts/index.js",
   "module:es2019": "../dist/es2019/consts/index.js",
+  "sideEffects": false,
   "types": "../dist/types/consts/index.d.ts"
 }

package/dist/cjs/consts/consts.js

@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.getAkEditorFullPageMaxWidth = exports.editorFontSize = exports.breakoutWideScaleRatio = exports.blockNodesVerticalMargin = exports.akRichMediaResizeZIndex = exports.akLayoutGutterOffset = exports.akEditorWideLayoutWidth = exports.akEditorUnitZIndex = exports.akEditorToolbarKeylineHeight = exports.akEditorTableToolbarSize = exports.akEditorTableToolbarSelected = exports.akEditorTableToolbarDelete = exports.akEditorTableToolbarDark = exports.akEditorTableToolbar = exports.akEditorTableNumberColumnWidth = exports.akEditorTableLegacyCellMinWidth = exports.akEditorTableFloatingControls = exports.akEditorTableCellSelected = exports.akEditorTableCellMinWidth = exports.akEditorTableCellDelete = exports.akEditorTableCellBackgroundOpacity = exports.akEditorTableBorderSelected = exports.akEditorTableBorderRadius = exports.akEditorTableBorderDelete = exports.akEditorTableBorderDark = exports.akEditorTableBorder = exports.akEditorSwoopCubicBezier = exports.akEditorSubtleAccent = exports.akEditorStickyHeaderZIndex = exports.akEditorSmallZIndex = exports.akEditorShadowZIndex = exports.akEditorSelectedNodeClassName = exports.akEditorSelectedIconColor = exports.akEditorSelectedBoxShadow = exports.akEditorSelectedBorderSize = exports.akEditorSelectedBorderColor = exports.akEditorSelectedBorderBoldSize = exports.akEditorSelectedBorder = exports.akEditorSelectedBlanketOpacity = exports.akEditorSelectedBlanketColor = exports.akEditorSelectedBgColor = exports.akEditorRuleBorderRadius = exports.akEditorRuleBackground = exports.akEditorPrimaryButton = exports.akEditorPopupText = exports.akEditorPopupBackground = exports.akEditorMobileMaxWidth = exports.akEditorMobileBreakoutPoint = exports.akEditorMenuZIndex = exports.akEditorMentionSelected = exports.akEditorMediaResizeHandlerPaddingWide = exports.akEditorMediaResizeHandlerPadding = exports.akEditorLineHeight = exports.akEditorInactiveForeground = exports.akEditorGutterPadding = exports.akEditorGridLineZIndex = exports.akEditorFullWidthLayoutWidth = exports.akEditorFullWidthLayoutLineLength = exports.akEditorFullPageMaxWidth = exports.akEditorFullPageDefaultFontSize = exports.akEditorFocus = exports.akEditorFloatingPanelZIndex = exports.akEditorFloatingOverlapPanelZIndex = exports.akEditorFloatingDialogZIndex = exports.akEditorDropdownActiveBackground = exports.akEditorDeleteIconColor = exports.akEditorDeleteBorder = exports.akEditorDeleteBackgroundWithOpacity = exports.akEditorDeleteBackgroundShaded = exports.akEditorDeleteBackground = exports.akEditorDefaultLayoutWidth = exports.akEditorCustomIconSize = exports.akEditorContextPanelWidth = exports.akEditorCodeInlinePadding = exports.akEditorCodeFontFamily = exports.akEditorCodeBlockPadding = exports.akEditorCodeBackground = exports.akEditorBreakoutPadding = exports.akEditorBlockquoteBorderColor = exports.akEditorActiveForeground = exports.akEditorActiveBackground = exports.VIEWPORT_SIZES = exports.DEFAULT_EMBED_CARD_WIDTH = exports.DEFAULT_EMBED_CARD_HEIGHT = exports.ATLASSIAN_NAVIGATION_HEIGHT = void 0;
+exports.editorFontSize = exports.breakoutWideScaleRatio = exports.blockNodesVerticalMargin = exports.akRichMediaResizeZIndex = exports.akLayoutGutterOffset = exports.akEditorWideLayoutWidth = exports.akEditorUnitZIndex = exports.akEditorToolbarKeylineHeight = exports.akEditorTableToolbarSize = exports.akEditorTableToolbarSelected = exports.akEditorTableToolbarDelete = exports.akEditorTableToolbarDark = exports.akEditorTableToolbar = exports.akEditorTableNumberColumnWidth = exports.akEditorTableLegacyCellMinWidth = exports.akEditorTableFloatingControls = exports.akEditorTableCellSelected = exports.akEditorTableCellMinWidth = exports.akEditorTableCellDelete = exports.akEditorTableCellBackgroundOpacity = exports.akEditorTableBorderSelected = exports.akEditorTableBorderRadius = exports.akEditorTableBorderDelete = exports.akEditorTableBorderDark = exports.akEditorTableBorder = exports.akEditorSwoopCubicBezier = exports.akEditorSubtleAccent = exports.akEditorStickyHeaderZIndex = exports.akEditorSmallZIndex = exports.akEditorShadowZIndex = exports.akEditorSelectedNodeClassName = exports.akEditorSelectedIconColor = exports.akEditorSelectedBoxShadow = exports.akEditorSelectedBorderSize = exports.akEditorSelectedBorderColor = exports.akEditorSelectedBorderBoldSize = exports.akEditorSelectedBorder = exports.akEditorSelectedBlanketOpacity = exports.akEditorSelectedBlanketColor = exports.akEditorSelectedBgColor = exports.akEditorRuleBorderRadius = exports.akEditorRuleBackground = exports.akEditorPrimaryButton = exports.akEditorPopupText = exports.akEditorPopupBackground = exports.akEditorMobileMaxWidth = exports.akEditorMobileBreakoutPoint = exports.akEditorMenuZIndex = exports.akEditorMentionSelected = exports.akEditorMediaResizeHandlerPaddingWide = exports.akEditorMediaResizeHandlerPadding = exports.akEditorLineHeight = exports.akEditorInactiveForeground = exports.akEditorGutterPadding = exports.akEditorGridLineZIndex = exports.akEditorFullWidthLayoutWidth = exports.akEditorFullWidthLayoutLineLength = exports.akEditorFullPageMaxWidth = exports.akEditorFullPageDefaultFontSize = exports.akEditorFocus = exports.akEditorFloatingPanelZIndex = exports.akEditorFloatingOverlapPanelZIndex = exports.akEditorFloatingDialogZIndex = exports.akEditorDropdownActiveBackground = exports.akEditorDeleteIconColor = exports.akEditorDeleteBorder = exports.akEditorDeleteBackgroundWithOpacity = exports.akEditorDeleteBackgroundShaded = exports.akEditorDeleteBackground = exports.akEditorDefaultLayoutWidth = exports.akEditorCustomIconSize = exports.akEditorContextPanelWidth = exports.akEditorCodeInlinePadding = exports.akEditorCodeFontFamily = exports.akEditorCodeBlockPadding = exports.akEditorCodeBackground = exports.akEditorBreakoutPadding = exports.akEditorBlockquoteBorderColor = exports.akEditorActiveForeground = exports.akEditorActiveBackground = exports.VIEWPORT_SIZES = exports.DEFAULT_EMBED_CARD_WIDTH = exports.DEFAULT_EMBED_CARD_HEIGHT = exports.ATLASSIAN_NAVIGATION_HEIGHT = void 0;
 exports.getTableCellBackgroundDarkModeColorCSS = getTableCellBackgroundDarkModeColorCSS;
 exports.relativeSize = exports.relativeFontSizeToBase16 = exports.gridMediumMaxWidth = exports.getTableCellBackgroundDarkModeColors = void 0;
 
@@ -15,6 +15,9 @@ var _colors = require("@atlaskit/theme/colors");
 
 var _constants = require("@atlaskit/theme/constants");
 
+var _tokens = require("@atlaskit/tokens");
+
+/* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
 var akEditorFullPageDefaultFontSize = 16;
 exports.akEditorFullPageDefaultFontSize = akEditorFullPageDefaultFontSize;
 var akEditorCodeFontFamily = (0, _constants.codeFontFamily)();
@@ -66,9 +69,9 @@ var akEditorSelectedBlanketColor = _colors.B75;
 exports.akEditorSelectedBlanketColor = akEditorSelectedBlanketColor;
 var akEditorSelectedBorderSize = 1;
 exports.akEditorSelectedBorderSize = akEditorSelectedBorderSize;
-var akEditorSelectedBorder = "".concat(akEditorSelectedBorderSize, "px solid ").concat(akEditorSelectedBorderColor);
+var akEditorSelectedBorder = "".concat(akEditorSelectedBorderSize, "px solid ").concat((0, _tokens.token)('color.border.selected', akEditorSelectedBorderColor));
 exports.akEditorSelectedBorder = akEditorSelectedBorder;
-var akEditorSelectedBoxShadow = "0 0 0 ".concat(akEditorSelectedBorderSize, "px ").concat(akEditorSelectedBorderColor);
+var akEditorSelectedBoxShadow = "0 0 0 ".concat(akEditorSelectedBorderSize, "px ").concat((0, _tokens.token)('color.border.selected', akEditorSelectedBorderColor));
 exports.akEditorSelectedBoxShadow = akEditorSelectedBoxShadow;
 var akEditorSelectedIconColor = _colors.B400;
 exports.akEditorSelectedIconColor = akEditorSelectedIconColor;
@@ -99,7 +102,7 @@ var akEditorFloatingPanelZIndex = _constants.layers.layer(); // z-index used for
 
 
 exports.akEditorFloatingPanelZIndex = akEditorFloatingPanelZIndex;
-var akEditorFloatingDialogZIndex = akEditorFloatingPanelZIndex + 10; // z-index used for floating toolbars table cell menu which are above block toolbars
+var akEditorFloatingDialogZIndex = akEditorMenuZIndex + 10; // z-index used for floating toolbars table cell menu which are above block toolbars
 
 exports.akEditorFloatingDialogZIndex = akEditorFloatingDialogZIndex;
 var akEditorFloatingOverlapPanelZIndex = akEditorFloatingPanelZIndex + 5;
@@ -223,13 +226,6 @@ var relativeFontSizeToBase16 = function relativeFontSizeToBase16(px) {
 };
 
 exports.relativeFontSizeToBase16 = relativeFontSizeToBase16;
-
-var getAkEditorFullPageMaxWidth = function getAkEditorFullPageMaxWidth() {
-  var allowDynamicTextSizing = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
-  return allowDynamicTextSizing ? akEditorFullPageMaxWidth : akEditorDefaultLayoutWidth;
-};
-
-exports.getAkEditorFullPageMaxWidth = getAkEditorFullPageMaxWidth;
 var VIEWPORT_SIZES = {
   laptopHiDPI: {
     width: 1440,

package/dist/cjs/consts/index.js

@@ -507,12 +507,6 @@ Object.defineProperty(exports, "editorFontSize", {
     return _consts.editorFontSize;
   }
 });
-Object.defineProperty(exports, "getAkEditorFullPageMaxWidth", {
-  enumerable: true,
-  get: function get() {
-    return _consts.getAkEditorFullPageMaxWidth;
-  }
-});
 Object.defineProperty(exports, "getTableCellBackgroundDarkModeColors", {
   enumerable: true,
   get: function get() {

package/dist/cjs/index.js

@@ -507,12 +507,6 @@ Object.defineProperty(exports, "editorFontSize", {
     return _consts.editorFontSize;
   }
 });
-Object.defineProperty(exports, "getAkEditorFullPageMaxWidth", {
-  enumerable: true,
-  get: function get() {
-    return _consts.getAkEditorFullPageMaxWidth;
-  }
-});
 Object.defineProperty(exports, "getSelectionStyles", {
   enumerable: true,
   get: function get() {

package/dist/cjs/selection/utils.js

@@ -5,6 +5,8 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.hideNativeBrowserTextSelectionStyles = exports.getSelectionStyles = void 0;
 
+var _tokens = require("@atlaskit/tokens");
+
 var _consts = require("../consts");
 
 var _types = require("./types");
@@ -38,10 +40,10 @@ var getSelectionStyle = function getSelectionStyle(style) {
       return "\n        box-shadow: ".concat(_consts.akEditorSelectedBoxShadow, ";\n        border-color: transparent;\n        ");
 
     case _types.SelectionStyle.Background:
-      return "background-color: ".concat(_consts.akEditorSelectedBgColor, ";");
+      return "background-color: ".concat((0, _tokens.token)('color.background.selected', _consts.akEditorSelectedBgColor), ";");
 
     case _types.SelectionStyle.Blanket:
-      return "\n        position: relative;\n\n        // Fixes ED-9263, where emoji or inline card in panel makes selection go outside the panel\n        // in Safari. Looks like it's caused by user-select: all in the emoji element\n        -webkit-user-select: text;\n\n        ::after {\n          position: absolute;\n          content: '';\n          left: 0;\n          right: 0;\n          top: 0;\n          bottom: 0;\n          opacity: ".concat(_consts.akEditorSelectedBlanketOpacity, ";\n          pointer-events: none;\n          background-color: ").concat(_consts.akEditorSelectedBlanketColor, "\n        }");
+      return "\n        position: relative;\n\n        // Fixes ED-9263, where emoji or inline card in panel makes selection go outside the panel\n        // in Safari. Looks like it's caused by user-select: all in the emoji element\n        -webkit-user-select: text;\n\n        ::after {\n          position: absolute;\n          content: '';\n          left: 0;\n          right: 0;\n          top: 0;\n          bottom: 0;\n          pointer-events: none;\n          background-color: ".concat((0, _tokens.token)('color.blanket.selected', '#B3D4FF4C'), "\n        }");
 
     default:
       return '';

package/dist/cjs/version.json

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

package/dist/es2019/consts/consts.js

@@ -1,5 +1,7 @@
+/* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
 import { B100, B300, B400, B50, B75, DN50, DN70, N0, N100, N20, N30, N40, N50, N500, N700, N900, R300, R400, R50, R75 } from '@atlaskit/theme/colors';
 import { codeFontFamily, fontSize as defaultFontSize, gridSize, layers } from '@atlaskit/theme/constants';
+import { token } from '@atlaskit/tokens';
 export const akEditorFullPageDefaultFontSize = 16;
 export const akEditorCodeFontFamily = codeFontFamily();
 export const akEditorInactiveForeground = N500;
@@ -26,8 +28,8 @@ export const akEditorSelectedBorderColor = B300;
 export const akEditorSelectedBgColor = B50;
 export const akEditorSelectedBlanketColor = B75;
 export const akEditorSelectedBorderSize = 1;
-export const akEditorSelectedBorder = `${akEditorSelectedBorderSize}px solid ${akEditorSelectedBorderColor}`;
-export const akEditorSelectedBoxShadow = `0 0 0 ${akEditorSelectedBorderSize}px ${akEditorSelectedBorderColor}`;
+export const 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;
 export const akEditorSelectedBlanketOpacity = 0.3;
@@ -43,7 +45,7 @@ export const akEditorMenuZIndex = layers.blanket(); // z-index used for floating
 
 export const akEditorFloatingPanelZIndex = layers.layer(); // z-index used for pickers (date, emoji, mentions) and type-aheads, hyperlinks
 
-export const akEditorFloatingDialogZIndex = akEditorFloatingPanelZIndex + 10; // z-index used for floating toolbars table cell menu which are above block toolbars
+export const akEditorFloatingDialogZIndex = akEditorMenuZIndex + 10; // z-index used for floating toolbars table cell menu which are above block toolbars
 
 export const akEditorFloatingOverlapPanelZIndex = akEditorFloatingPanelZIndex + 5;
 export const akEditorMentionSelected = N100;
@@ -109,7 +111,6 @@ export const relativeFontSizeToBase16 = px => {
 
   return `${px / 16}rem`;
 };
-export const getAkEditorFullPageMaxWidth = (allowDynamicTextSizing = false) => allowDynamicTextSizing ? akEditorFullPageMaxWidth : akEditorDefaultLayoutWidth;
 export const VIEWPORT_SIZES = {
   laptopHiDPI: {
     width: 1440,

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

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

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

@@ -1,3 +1,4 @@
+/* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
 import { css } from '@emotion/react';
 export const overflowShadow = ({
   background,

package/dist/es2019/selection/utils.js

@@ -1,4 +1,5 @@
-import { akEditorSelectedBgColor, akEditorSelectedBlanketColor, akEditorSelectedBlanketOpacity, akEditorSelectedBorder, akEditorSelectedBoxShadow } from '../consts';
+import { token } from '@atlaskit/tokens';
+import { akEditorSelectedBgColor, akEditorSelectedBorder, akEditorSelectedBoxShadow } from '../consts';
 import { SelectionStyle } from './types';
 /**
  * Adds correct selection styling for a node
@@ -33,7 +34,7 @@ const getSelectionStyle = style => {
         `;
 
     case SelectionStyle.Background:
-      return `background-color: ${akEditorSelectedBgColor};`;
+      return `background-color: ${token('color.background.selected', akEditorSelectedBgColor)};`;
 
     case SelectionStyle.Blanket:
       return `
@@ -50,9 +51,8 @@ const getSelectionStyle = style => {
           right: 0;
           top: 0;
           bottom: 0;
-          opacity: ${akEditorSelectedBlanketOpacity};
           pointer-events: none;
-          background-color: ${akEditorSelectedBlanketColor}
+          background-color: ${token('color.blanket.selected', '#B3D4FF4C')}
         }`;
 
     default:

package/dist/es2019/version.json

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

package/dist/esm/consts/consts.js

@@ -1,6 +1,9 @@
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+
+/* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
 import { B100, B300, B400, B50, B75, DN50, DN70, N0, N100, N20, N30, N40, N50, N500, N700, N900, R300, R400, R50, R75 } from '@atlaskit/theme/colors';
 import { codeFontFamily, fontSize as defaultFontSize, gridSize, layers } from '@atlaskit/theme/constants';
+import { token } from '@atlaskit/tokens';
 export var akEditorFullPageDefaultFontSize = 16;
 export var akEditorCodeFontFamily = codeFontFamily();
 export var akEditorInactiveForeground = N500;
@@ -27,8 +30,8 @@ export var akEditorSelectedBorderColor = B300;
 export var akEditorSelectedBgColor = B50;
 export var akEditorSelectedBlanketColor = B75;
 export var akEditorSelectedBorderSize = 1;
-export var akEditorSelectedBorder = "".concat(akEditorSelectedBorderSize, "px solid ").concat(akEditorSelectedBorderColor);
-export var akEditorSelectedBoxShadow = "0 0 0 ".concat(akEditorSelectedBorderSize, "px ").concat(akEditorSelectedBorderColor);
+export var akEditorSelectedBorder = "".concat(akEditorSelectedBorderSize, "px solid ").concat(token('color.border.selected', akEditorSelectedBorderColor));
+export var akEditorSelectedBoxShadow = "0 0 0 ".concat(akEditorSelectedBorderSize, "px ").concat(token('color.border.selected', akEditorSelectedBorderColor));
 export var akEditorSelectedIconColor = B400;
 export var akEditorSelectedBorderBoldSize = 2;
 export var akEditorSelectedBlanketOpacity = 0.3;
@@ -44,7 +47,7 @@ export var akEditorMenuZIndex = layers.blanket(); // z-index used for floating t
 
 export var akEditorFloatingPanelZIndex = layers.layer(); // z-index used for pickers (date, emoji, mentions) and type-aheads, hyperlinks
 
-export var akEditorFloatingDialogZIndex = akEditorFloatingPanelZIndex + 10; // z-index used for floating toolbars table cell menu which are above block toolbars
+export var akEditorFloatingDialogZIndex = akEditorMenuZIndex + 10; // z-index used for floating toolbars table cell menu which are above block toolbars
 
 export var akEditorFloatingOverlapPanelZIndex = akEditorFloatingPanelZIndex + 5;
 export var akEditorMentionSelected = N100;
@@ -114,10 +117,6 @@ export var relativeFontSizeToBase16 = function relativeFontSizeToBase16(px) {
 
   return "".concat(px / 16, "rem");
 };
-export var getAkEditorFullPageMaxWidth = function getAkEditorFullPageMaxWidth() {
-  var allowDynamicTextSizing = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
-  return allowDynamicTextSizing ? akEditorFullPageMaxWidth : akEditorDefaultLayoutWidth;
-};
 export var VIEWPORT_SIZES = {
   laptopHiDPI: {
     width: 1440,

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

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

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

@@ -2,6 +2,7 @@ import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral
 
 var _templateObject;
 
+/* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
 import { css } from '@emotion/react';
 export var overflowShadow = function overflowShadow(_ref) {
   var background = _ref.background,

package/dist/esm/selection/utils.js

@@ -1,4 +1,5 @@
-import { akEditorSelectedBgColor, akEditorSelectedBlanketColor, akEditorSelectedBlanketOpacity, akEditorSelectedBorder, akEditorSelectedBoxShadow } from '../consts';
+import { token } from '@atlaskit/tokens';
+import { akEditorSelectedBgColor, akEditorSelectedBorder, akEditorSelectedBoxShadow } from '../consts';
 import { SelectionStyle } from './types';
 /**
  * Adds correct selection styling for a node
@@ -27,10 +28,10 @@ var getSelectionStyle = function getSelectionStyle(style) {
       return "\n        box-shadow: ".concat(akEditorSelectedBoxShadow, ";\n        border-color: transparent;\n        ");
 
     case SelectionStyle.Background:
-      return "background-color: ".concat(akEditorSelectedBgColor, ";");
+      return "background-color: ".concat(token('color.background.selected', akEditorSelectedBgColor), ";");
 
     case SelectionStyle.Blanket:
-      return "\n        position: relative;\n\n        // Fixes ED-9263, where emoji or inline card in panel makes selection go outside the panel\n        // in Safari. Looks like it's caused by user-select: all in the emoji element\n        -webkit-user-select: text;\n\n        ::after {\n          position: absolute;\n          content: '';\n          left: 0;\n          right: 0;\n          top: 0;\n          bottom: 0;\n          opacity: ".concat(akEditorSelectedBlanketOpacity, ";\n          pointer-events: none;\n          background-color: ").concat(akEditorSelectedBlanketColor, "\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        ::after {\n          position: absolute;\n          content: '';\n          left: 0;\n          right: 0;\n          top: 0;\n          bottom: 0;\n          pointer-events: none;\n          background-color: ".concat(token('color.blanket.selected', '#B3D4FF4C'), "\n        }");
 
     default:
       return '';

package/dist/esm/version.json

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

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

@@ -88,7 +88,6 @@ export declare const relativeSize: (multiplier: number) => ({ theme, }: {
     theme: EditorTheme;
 }) => number;
 export declare const relativeFontSizeToBase16: (px: number | string) => string;
-export declare const getAkEditorFullPageMaxWidth: (allowDynamicTextSizing?: boolean) => 680 | 760;
 export declare const VIEWPORT_SIZES: {
     laptopHiDPI: {
         width: number;

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

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/editor-shared-styles",
-  "version": "2.0.1",
+  "version": "2.1.2",
   "description": "Style values used in the editor/renderer",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -26,6 +26,7 @@
   },
   "dependencies": {
     "@atlaskit/theme": "^12.1.0",
+    "@atlaskit/tokens": "^0.10.0",
     "@babel/runtime": "^7.0.0",
     "@emotion/react": "^11.7.1"
   },
@@ -42,7 +43,8 @@
       "import-structure": "atlassian-conventions"
     },
     "@repo/internal": {
-      "deprecation": "no-deprecated-imports"
+      "deprecation": "no-deprecated-imports",
+      "theming": "tokens"
     }
   },
   "prettier": "@atlassian/atlassian-frontend-prettier-config-1.0.1"

package/selection/package.json

@@ -3,5 +3,6 @@
   "main": "../dist/cjs/selection/index.js",
   "module": "../dist/esm/selection/index.js",
   "module:es2019": "../dist/es2019/selection/index.js",
+  "sideEffects": false,
   "types": "../dist/types/selection/index.d.ts"
 }

package/src/consts/consts.ts

@@ -1,3 +1,4 @@
+/* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
 import {
   B100,
   B300,
@@ -26,6 +27,7 @@ import {
   gridSize,
   layers,
 } from '@atlaskit/theme/constants';
+import { token } from '@atlaskit/tokens';
 
 import { EditorTheme } from './types';
 
@@ -54,8 +56,14 @@ export const akEditorSelectedBorderColor = B300;
 export const akEditorSelectedBgColor = B50;
 export const akEditorSelectedBlanketColor = B75;
 export const akEditorSelectedBorderSize = 1;
-export const akEditorSelectedBorder = `${akEditorSelectedBorderSize}px solid ${akEditorSelectedBorderColor}`;
-export const akEditorSelectedBoxShadow = `0 0 0 ${akEditorSelectedBorderSize}px ${akEditorSelectedBorderColor}`;
+export const 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;
 export const akEditorSelectedBlanketOpacity = 0.3;
@@ -70,7 +78,7 @@ export const akEditorMenuZIndex = layers.blanket();
 // z-index used for floating toolbars like code block, table etc
 export const akEditorFloatingPanelZIndex = layers.layer();
 // z-index used for pickers (date, emoji, mentions) and type-aheads, hyperlinks
-export const akEditorFloatingDialogZIndex = akEditorFloatingPanelZIndex + 10;
+export const akEditorFloatingDialogZIndex = akEditorMenuZIndex + 10;
 // z-index used for floating toolbars table cell menu which are above block toolbars
 export const akEditorFloatingOverlapPanelZIndex =
   akEditorFloatingPanelZIndex + 5;
@@ -142,13 +150,6 @@ export const relativeFontSizeToBase16 = (px: number | string) => {
   return `${px / 16}rem`;
 };
 
-export const getAkEditorFullPageMaxWidth = (
-  allowDynamicTextSizing: boolean = false,
-) =>
-  allowDynamicTextSizing
-    ? akEditorFullPageMaxWidth
-    : akEditorDefaultLayoutWidth;
-
 export const VIEWPORT_SIZES = {
   laptopHiDPI: { width: 1440, height: 900 },
   laptopMDPI: { width: 1280, height: 800 },

package/src/consts/index.ts

@@ -75,7 +75,6 @@ export {
   breakoutWideScaleRatio,
   editorFontSize,
   gridMediumMaxWidth,
-  getAkEditorFullPageMaxWidth,
   relativeSize,
   relativeFontSizeToBase16,
   DEFAULT_EMBED_CARD_HEIGHT,

package/src/index.ts

@@ -73,7 +73,6 @@ export {
   breakoutWideScaleRatio,
   editorFontSize,
   gridMediumMaxWidth,
-  getAkEditorFullPageMaxWidth,
   relativeSize,
   relativeFontSizeToBase16,
   DEFAULT_EMBED_CARD_HEIGHT,

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

@@ -1,3 +1,4 @@
+/* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
 import { css } from '@emotion/react';
 
 export const overflowShadow = ({

package/src/selection/utils.ts

@@ -1,7 +1,7 @@
+import { token } from '@atlaskit/tokens';
+
 import {
   akEditorSelectedBgColor,
-  akEditorSelectedBlanketColor,
-  akEditorSelectedBlanketOpacity,
   akEditorSelectedBorder,
   akEditorSelectedBoxShadow,
 } from '../consts';
@@ -45,7 +45,10 @@ const getSelectionStyle = (style: SelectionStyle): string => {
         border-color: transparent;
         `;
     case SelectionStyle.Background:
-      return `background-color: ${akEditorSelectedBgColor};`;
+      return `background-color: ${token(
+        'color.background.selected',
+        akEditorSelectedBgColor,
+      )};`;
     case SelectionStyle.Blanket:
       return `
         position: relative;
@@ -61,9 +64,8 @@ const getSelectionStyle = (style: SelectionStyle): string => {
           right: 0;
           top: 0;
           bottom: 0;
-          opacity: ${akEditorSelectedBlanketOpacity};
           pointer-events: none;
-          background-color: ${akEditorSelectedBlanketColor}
+          background-color: ${token('color.blanket.selected', '#B3D4FF4C')}
         }`;
     default:
       return '';