@atlaskit/editor-shared-styles 1.6.0 → 2.1.0

package/CHANGELOG.md

@@ -1,5 +1,35 @@
 # @atlaskit/editor-shared-styles
 
+## 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
+
+- [`cb2392f6d33`](https://bitbucket.org/atlassian/atlassian-frontend/commits/cb2392f6d33) - Upgrade to TypeScript 4.2.4
+
+## 2.0.0
+
+### Major Changes
+
+- [`e22509504e8`](https://bitbucket.org/atlassian/atlassian-frontend/commits/e22509504e8) - ED-14255 migrate editor-shared-style to emotion
+
+### Patch Changes
+
+- [`9712e78abb0`](https://bitbucket.org/atlassian/atlassian-frontend/commits/9712e78abb0) - ED-14255 moved some usages of editor-shared-styles to emotion
+
 ## 1.6.0
 
 ### Minor 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,8 +5,9 @@ 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.getTableCellBackgroundDarkModeColorCSS = getTableCellBackgroundDarkModeColorCSS;
-exports.getTableCellBackgroundDarkModeColors = exports.akEditorMobileMaxWidth = exports.VIEWPORT_SIZES = exports.getAkEditorFullPageMaxWidth = exports.relativeFontSizeToBase16 = exports.relativeSize = exports.editorFontSize = exports.akEditorSelectedNodeClassName = exports.ATLASSIAN_NAVIGATION_HEIGHT = exports.DEFAULT_EMBED_CARD_HEIGHT = exports.DEFAULT_EMBED_CARD_WIDTH = exports.blockNodesVerticalMargin = exports.akEditorContextPanelWidth = exports.akEditorToolbarKeylineHeight = exports.akEditorRuleBorderRadius = exports.akEditorRuleBackground = exports.akEditorLineHeight = exports.akLayoutGutterOffset = exports.akRichMediaResizeZIndex = exports.breakoutWideScaleRatio = exports.gridMediumMaxWidth = exports.akEditorSwoopCubicBezier = exports.akEditorMediaResizeHandlerPadding = exports.akEditorMediaResizeHandlerPaddingWide = exports.akEditorTableLegacyCellMinWidth = exports.akEditorTableCellMinWidth = exports.akEditorMobileBreakoutPoint = exports.akEditorGutterPadding = exports.akEditorBreakoutPadding = exports.akEditorTableNumberColumnWidth = exports.akEditorFullWidthLayoutLineLength = exports.akEditorFullWidthLayoutWidth = exports.akEditorWideLayoutWidth = exports.akEditorDefaultLayoutWidth = exports.akEditorFullPageMaxWidth = exports.akEditorTableCellBackgroundOpacity = exports.akEditorTableBorderRadius = exports.akEditorTableToolbarDelete = exports.akEditorTableBorderDelete = exports.akEditorTableCellDelete = exports.akEditorTableBorderSelected = exports.akEditorTableToolbarSelected = exports.akEditorTableCellSelected = exports.akEditorTableFloatingControls = exports.akEditorTableToolbarDark = exports.akEditorTableToolbar = exports.akEditorTableBorderDark = exports.akEditorTableBorder = exports.akEditorTableToolbarSize = exports.akEditorMentionSelected = exports.akEditorFloatingOverlapPanelZIndex = exports.akEditorFloatingDialogZIndex = exports.akEditorFloatingPanelZIndex = exports.akEditorMenuZIndex = exports.akEditorGridLineZIndex = exports.akEditorSmallZIndex = exports.akEditorStickyHeaderZIndex = exports.akEditorShadowZIndex = exports.akEditorUnitZIndex = exports.akEditorSelectedBlanketOpacity = exports.akEditorSelectedBorderBoldSize = exports.akEditorSelectedIconColor = exports.akEditorSelectedBoxShadow = exports.akEditorSelectedBorder = exports.akEditorSelectedBorderSize = exports.akEditorSelectedBlanketColor = exports.akEditorSelectedBgColor = exports.akEditorSelectedBorderColor = exports.akEditorCustomIconSize = exports.akEditorDeleteIconColor = exports.akEditorDeleteBorder = exports.akEditorDeleteBackgroundWithOpacity = exports.akEditorDeleteBackgroundShaded = exports.akEditorDeleteBackground = exports.akEditorCodeInlinePadding = exports.akEditorCodeBlockPadding = exports.akEditorCodeBackground = exports.akEditorPrimaryButton = exports.akEditorPopupText = exports.akEditorPopupBackground = exports.akEditorDropdownActiveBackground = exports.akEditorBlockquoteBorderColor = exports.akEditorActiveForeground = exports.akEditorActiveBackground = exports.akEditorSubtleAccent = exports.akEditorFocus = exports.akEditorInactiveForeground = exports.akEditorCodeFontFamily = exports.akEditorFullPageDefaultFontSize = void 0;
+exports.relativeSize = exports.relativeFontSizeToBase16 = exports.gridMediumMaxWidth = exports.getTableCellBackgroundDarkModeColors = void 0;
 
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 
@@ -14,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)();
@@ -65,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;

package/dist/cjs/consts/index.js

@@ -3,6 +3,30 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+Object.defineProperty(exports, "ATLASSIAN_NAVIGATION_HEIGHT", {
+  enumerable: true,
+  get: function get() {
+    return _consts.ATLASSIAN_NAVIGATION_HEIGHT;
+  }
+});
+Object.defineProperty(exports, "DEFAULT_EMBED_CARD_HEIGHT", {
+  enumerable: true,
+  get: function get() {
+    return _consts.DEFAULT_EMBED_CARD_HEIGHT;
+  }
+});
+Object.defineProperty(exports, "DEFAULT_EMBED_CARD_WIDTH", {
+  enumerable: true,
+  get: function get() {
+    return _consts.DEFAULT_EMBED_CARD_WIDTH;
+  }
+});
+Object.defineProperty(exports, "VIEWPORT_SIZES", {
+  enumerable: true,
+  get: function get() {
+    return _consts.VIEWPORT_SIZES;
+  }
+});
 Object.defineProperty(exports, "akEditorActiveBackground", {
   enumerable: true,
   get: function get() {
@@ -57,6 +81,12 @@ Object.defineProperty(exports, "akEditorContextPanelWidth", {
     return _consts.akEditorContextPanelWidth;
   }
 });
+Object.defineProperty(exports, "akEditorCustomIconSize", {
+  enumerable: true,
+  get: function get() {
+    return _consts.akEditorCustomIconSize;
+  }
+});
 Object.defineProperty(exports, "akEditorDefaultLayoutWidth", {
   enumerable: true,
   get: function get() {
@@ -123,22 +153,16 @@ Object.defineProperty(exports, "akEditorFocus", {
     return _consts.akEditorFocus;
   }
 });
-Object.defineProperty(exports, "akEditorFullPageMaxWidth", {
-  enumerable: true,
-  get: function get() {
-    return _consts.akEditorFullPageMaxWidth;
-  }
-});
 Object.defineProperty(exports, "akEditorFullPageDefaultFontSize", {
   enumerable: true,
   get: function get() {
     return _consts.akEditorFullPageDefaultFontSize;
   }
 });
-Object.defineProperty(exports, "akEditorFullWidthLayoutWidth", {
+Object.defineProperty(exports, "akEditorFullPageMaxWidth", {
   enumerable: true,
   get: function get() {
-    return _consts.akEditorFullWidthLayoutWidth;
+    return _consts.akEditorFullPageMaxWidth;
   }
 });
 Object.defineProperty(exports, "akEditorFullWidthLayoutLineLength", {
@@ -147,6 +171,12 @@ Object.defineProperty(exports, "akEditorFullWidthLayoutLineLength", {
     return _consts.akEditorFullWidthLayoutLineLength;
   }
 });
+Object.defineProperty(exports, "akEditorFullWidthLayoutWidth", {
+  enumerable: true,
+  get: function get() {
+    return _consts.akEditorFullWidthLayoutWidth;
+  }
+});
 Object.defineProperty(exports, "akEditorGridLineZIndex", {
   enumerable: true,
   get: function get() {
@@ -165,6 +195,12 @@ Object.defineProperty(exports, "akEditorInactiveForeground", {
     return _consts.akEditorInactiveForeground;
   }
 });
+Object.defineProperty(exports, "akEditorLineHeight", {
+  enumerable: true,
+  get: function get() {
+    return _consts.akEditorLineHeight;
+  }
+});
 Object.defineProperty(exports, "akEditorMediaResizeHandlerPadding", {
   enumerable: true,
   get: function get() {
@@ -189,16 +225,16 @@ Object.defineProperty(exports, "akEditorMenuZIndex", {
     return _consts.akEditorMenuZIndex;
   }
 });
-Object.defineProperty(exports, "akEditorStickyHeaderZIndex", {
+Object.defineProperty(exports, "akEditorMobileBreakoutPoint", {
   enumerable: true,
   get: function get() {
-    return _consts.akEditorStickyHeaderZIndex;
+    return _consts.akEditorMobileBreakoutPoint;
   }
 });
-Object.defineProperty(exports, "akEditorMobileBreakoutPoint", {
+Object.defineProperty(exports, "akEditorMobileMaxWidth", {
   enumerable: true,
   get: function get() {
-    return _consts.akEditorMobileBreakoutPoint;
+    return _consts.akEditorMobileMaxWidth;
   }
 });
 Object.defineProperty(exports, "akEditorPopupBackground", {
@@ -219,22 +255,34 @@ Object.defineProperty(exports, "akEditorPrimaryButton", {
     return _consts.akEditorPrimaryButton;
   }
 });
-Object.defineProperty(exports, "akEditorSelectedBorderColor", {
+Object.defineProperty(exports, "akEditorRuleBackground", {
   enumerable: true,
   get: function get() {
-    return _consts.akEditorSelectedBorderColor;
+    return _consts.akEditorRuleBackground;
   }
 });
-Object.defineProperty(exports, "akEditorSelectedBorderBoldSize", {
+Object.defineProperty(exports, "akEditorRuleBorderRadius", {
   enumerable: true,
   get: function get() {
-    return _consts.akEditorSelectedBorderBoldSize;
+    return _consts.akEditorRuleBorderRadius;
   }
 });
-Object.defineProperty(exports, "akEditorSelectedBorderSize", {
+Object.defineProperty(exports, "akEditorSelectedBgColor", {
   enumerable: true,
   get: function get() {
-    return _consts.akEditorSelectedBorderSize;
+    return _consts.akEditorSelectedBgColor;
+  }
+});
+Object.defineProperty(exports, "akEditorSelectedBlanketColor", {
+  enumerable: true,
+  get: function get() {
+    return _consts.akEditorSelectedBlanketColor;
+  }
+});
+Object.defineProperty(exports, "akEditorSelectedBlanketOpacity", {
+  enumerable: true,
+  get: function get() {
+    return _consts.akEditorSelectedBlanketOpacity;
   }
 });
 Object.defineProperty(exports, "akEditorSelectedBorder", {
@@ -243,40 +291,46 @@ Object.defineProperty(exports, "akEditorSelectedBorder", {
     return _consts.akEditorSelectedBorder;
   }
 });
-Object.defineProperty(exports, "akEditorSelectedBoxShadow", {
+Object.defineProperty(exports, "akEditorSelectedBorderBoldSize", {
   enumerable: true,
   get: function get() {
-    return _consts.akEditorSelectedBoxShadow;
+    return _consts.akEditorSelectedBorderBoldSize;
   }
 });
-Object.defineProperty(exports, "akEditorSelectedIconColor", {
+Object.defineProperty(exports, "akEditorSelectedBorderColor", {
   enumerable: true,
   get: function get() {
-    return _consts.akEditorSelectedIconColor;
+    return _consts.akEditorSelectedBorderColor;
   }
 });
-Object.defineProperty(exports, "akEditorCustomIconSize", {
+Object.defineProperty(exports, "akEditorSelectedBorderSize", {
   enumerable: true,
   get: function get() {
-    return _consts.akEditorCustomIconSize;
+    return _consts.akEditorSelectedBorderSize;
   }
 });
-Object.defineProperty(exports, "akEditorSelectedBlanketColor", {
+Object.defineProperty(exports, "akEditorSelectedBoxShadow", {
   enumerable: true,
   get: function get() {
-    return _consts.akEditorSelectedBlanketColor;
+    return _consts.akEditorSelectedBoxShadow;
   }
 });
-Object.defineProperty(exports, "akEditorSelectedBgColor", {
+Object.defineProperty(exports, "akEditorSelectedIconColor", {
   enumerable: true,
   get: function get() {
-    return _consts.akEditorSelectedBgColor;
+    return _consts.akEditorSelectedIconColor;
   }
 });
-Object.defineProperty(exports, "akEditorSelectedBlanketOpacity", {
+Object.defineProperty(exports, "akEditorSelectedNodeClassName", {
   enumerable: true,
   get: function get() {
-    return _consts.akEditorSelectedBlanketOpacity;
+    return _consts.akEditorSelectedNodeClassName;
+  }
+});
+Object.defineProperty(exports, "akEditorShadowZIndex", {
+  enumerable: true,
+  get: function get() {
+    return _consts.akEditorShadowZIndex;
   }
 });
 Object.defineProperty(exports, "akEditorSmallZIndex", {
@@ -285,10 +339,10 @@ Object.defineProperty(exports, "akEditorSmallZIndex", {
     return _consts.akEditorSmallZIndex;
   }
 });
-Object.defineProperty(exports, "akEditorShadowZIndex", {
+Object.defineProperty(exports, "akEditorStickyHeaderZIndex", {
   enumerable: true,
   get: function get() {
-    return _consts.akEditorShadowZIndex;
+    return _consts.akEditorStickyHeaderZIndex;
   }
 });
 Object.defineProperty(exports, "akEditorSubtleAccent", {
@@ -405,6 +459,12 @@ Object.defineProperty(exports, "akEditorTableToolbarSize", {
     return _consts.akEditorTableToolbarSize;
   }
 });
+Object.defineProperty(exports, "akEditorToolbarKeylineHeight", {
+  enumerable: true,
+  get: function get() {
+    return _consts.akEditorToolbarKeylineHeight;
+  }
+});
 Object.defineProperty(exports, "akEditorUnitZIndex", {
   enumerable: true,
   get: function get() {
@@ -447,94 +507,34 @@ Object.defineProperty(exports, "editorFontSize", {
     return _consts.editorFontSize;
   }
 });
-Object.defineProperty(exports, "gridMediumMaxWidth", {
-  enumerable: true,
-  get: function get() {
-    return _consts.gridMediumMaxWidth;
-  }
-});
 Object.defineProperty(exports, "getAkEditorFullPageMaxWidth", {
   enumerable: true,
   get: function get() {
     return _consts.getAkEditorFullPageMaxWidth;
   }
 });
-Object.defineProperty(exports, "relativeSize", {
-  enumerable: true,
-  get: function get() {
-    return _consts.relativeSize;
-  }
-});
-Object.defineProperty(exports, "relativeFontSizeToBase16", {
-  enumerable: true,
-  get: function get() {
-    return _consts.relativeFontSizeToBase16;
-  }
-});
-Object.defineProperty(exports, "DEFAULT_EMBED_CARD_HEIGHT", {
-  enumerable: true,
-  get: function get() {
-    return _consts.DEFAULT_EMBED_CARD_HEIGHT;
-  }
-});
-Object.defineProperty(exports, "DEFAULT_EMBED_CARD_WIDTH", {
-  enumerable: true,
-  get: function get() {
-    return _consts.DEFAULT_EMBED_CARD_WIDTH;
-  }
-});
-Object.defineProperty(exports, "akEditorLineHeight", {
-  enumerable: true,
-  get: function get() {
-    return _consts.akEditorLineHeight;
-  }
-});
-Object.defineProperty(exports, "akEditorRuleBackground", {
-  enumerable: true,
-  get: function get() {
-    return _consts.akEditorRuleBackground;
-  }
-});
-Object.defineProperty(exports, "akEditorRuleBorderRadius", {
-  enumerable: true,
-  get: function get() {
-    return _consts.akEditorRuleBorderRadius;
-  }
-});
-Object.defineProperty(exports, "akEditorSelectedNodeClassName", {
-  enumerable: true,
-  get: function get() {
-    return _consts.akEditorSelectedNodeClassName;
-  }
-});
-Object.defineProperty(exports, "akEditorToolbarKeylineHeight", {
-  enumerable: true,
-  get: function get() {
-    return _consts.akEditorToolbarKeylineHeight;
-  }
-});
-Object.defineProperty(exports, "VIEWPORT_SIZES", {
+Object.defineProperty(exports, "getTableCellBackgroundDarkModeColors", {
   enumerable: true,
   get: function get() {
-    return _consts.VIEWPORT_SIZES;
+    return _consts.getTableCellBackgroundDarkModeColors;
   }
 });
-Object.defineProperty(exports, "akEditorMobileMaxWidth", {
+Object.defineProperty(exports, "gridMediumMaxWidth", {
   enumerable: true,
   get: function get() {
-    return _consts.akEditorMobileMaxWidth;
+    return _consts.gridMediumMaxWidth;
   }
 });
-Object.defineProperty(exports, "getTableCellBackgroundDarkModeColors", {
+Object.defineProperty(exports, "relativeFontSizeToBase16", {
   enumerable: true,
   get: function get() {
-    return _consts.getTableCellBackgroundDarkModeColors;
+    return _consts.relativeFontSizeToBase16;
   }
 });
-Object.defineProperty(exports, "ATLASSIAN_NAVIGATION_HEIGHT", {
+Object.defineProperty(exports, "relativeSize", {
   enumerable: true,
   get: function get() {
-    return _consts.ATLASSIAN_NAVIGATION_HEIGHT;
+    return _consts.relativeSize;
   }
 });
 

package/dist/cjs/index.js

@@ -3,6 +3,36 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+Object.defineProperty(exports, "ATLASSIAN_NAVIGATION_HEIGHT", {
+  enumerable: true,
+  get: function get() {
+    return _consts.ATLASSIAN_NAVIGATION_HEIGHT;
+  }
+});
+Object.defineProperty(exports, "DEFAULT_EMBED_CARD_HEIGHT", {
+  enumerable: true,
+  get: function get() {
+    return _consts.DEFAULT_EMBED_CARD_HEIGHT;
+  }
+});
+Object.defineProperty(exports, "DEFAULT_EMBED_CARD_WIDTH", {
+  enumerable: true,
+  get: function get() {
+    return _consts.DEFAULT_EMBED_CARD_WIDTH;
+  }
+});
+Object.defineProperty(exports, "SelectionStyle", {
+  enumerable: true,
+  get: function get() {
+    return _selection.SelectionStyle;
+  }
+});
+Object.defineProperty(exports, "VIEWPORT_SIZES", {
+  enumerable: true,
+  get: function get() {
+    return _consts.VIEWPORT_SIZES;
+  }
+});
 Object.defineProperty(exports, "akEditorActiveBackground", {
   enumerable: true,
   get: function get() {
@@ -123,22 +153,16 @@ Object.defineProperty(exports, "akEditorFocus", {
     return _consts.akEditorFocus;
   }
 });
-Object.defineProperty(exports, "akEditorFullPageMaxWidth", {
-  enumerable: true,
-  get: function get() {
-    return _consts.akEditorFullPageMaxWidth;
-  }
-});
 Object.defineProperty(exports, "akEditorFullPageDefaultFontSize", {
   enumerable: true,
   get: function get() {
     return _consts.akEditorFullPageDefaultFontSize;
   }
 });
-Object.defineProperty(exports, "akEditorFullWidthLayoutWidth", {
+Object.defineProperty(exports, "akEditorFullPageMaxWidth", {
   enumerable: true,
   get: function get() {
-    return _consts.akEditorFullWidthLayoutWidth;
+    return _consts.akEditorFullPageMaxWidth;
   }
 });
 Object.defineProperty(exports, "akEditorFullWidthLayoutLineLength", {
@@ -147,6 +171,12 @@ Object.defineProperty(exports, "akEditorFullWidthLayoutLineLength", {
     return _consts.akEditorFullWidthLayoutLineLength;
   }
 });
+Object.defineProperty(exports, "akEditorFullWidthLayoutWidth", {
+  enumerable: true,
+  get: function get() {
+    return _consts.akEditorFullWidthLayoutWidth;
+  }
+});
 Object.defineProperty(exports, "akEditorGridLineZIndex", {
   enumerable: true,
   get: function get() {
@@ -165,6 +195,12 @@ Object.defineProperty(exports, "akEditorInactiveForeground", {
     return _consts.akEditorInactiveForeground;
   }
 });
+Object.defineProperty(exports, "akEditorLineHeight", {
+  enumerable: true,
+  get: function get() {
+    return _consts.akEditorLineHeight;
+  }
+});
 Object.defineProperty(exports, "akEditorMediaResizeHandlerPadding", {
   enumerable: true,
   get: function get() {
@@ -189,16 +225,16 @@ Object.defineProperty(exports, "akEditorMenuZIndex", {
     return _consts.akEditorMenuZIndex;
   }
 });
-Object.defineProperty(exports, "akEditorStickyHeaderZIndex", {
+Object.defineProperty(exports, "akEditorMobileBreakoutPoint", {
   enumerable: true,
   get: function get() {
-    return _consts.akEditorStickyHeaderZIndex;
+    return _consts.akEditorMobileBreakoutPoint;
   }
 });
-Object.defineProperty(exports, "akEditorMobileBreakoutPoint", {
+Object.defineProperty(exports, "akEditorMobileMaxWidth", {
   enumerable: true,
   get: function get() {
-    return _consts.akEditorMobileBreakoutPoint;
+    return _consts.akEditorMobileMaxWidth;
   }
 });
 Object.defineProperty(exports, "akEditorPopupBackground", {
@@ -219,22 +255,34 @@ Object.defineProperty(exports, "akEditorPrimaryButton", {
     return _consts.akEditorPrimaryButton;
   }
 });
-Object.defineProperty(exports, "akEditorSelectedBorderColor", {
+Object.defineProperty(exports, "akEditorRuleBackground", {
   enumerable: true,
   get: function get() {
-    return _consts.akEditorSelectedBorderColor;
+    return _consts.akEditorRuleBackground;
   }
 });
-Object.defineProperty(exports, "akEditorSelectedBorderBoldSize", {
+Object.defineProperty(exports, "akEditorRuleBorderRadius", {
   enumerable: true,
   get: function get() {
-    return _consts.akEditorSelectedBorderBoldSize;
+    return _consts.akEditorRuleBorderRadius;
   }
 });
-Object.defineProperty(exports, "akEditorSelectedBorderSize", {
+Object.defineProperty(exports, "akEditorSelectedBgColor", {
   enumerable: true,
   get: function get() {
-    return _consts.akEditorSelectedBorderSize;
+    return _consts.akEditorSelectedBgColor;
+  }
+});
+Object.defineProperty(exports, "akEditorSelectedBlanketColor", {
+  enumerable: true,
+  get: function get() {
+    return _consts.akEditorSelectedBlanketColor;
+  }
+});
+Object.defineProperty(exports, "akEditorSelectedBlanketOpacity", {
+  enumerable: true,
+  get: function get() {
+    return _consts.akEditorSelectedBlanketOpacity;
   }
 });
 Object.defineProperty(exports, "akEditorSelectedBorder", {
@@ -243,40 +291,40 @@ Object.defineProperty(exports, "akEditorSelectedBorder", {
     return _consts.akEditorSelectedBorder;
   }
 });
-Object.defineProperty(exports, "akEditorSelectedBoxShadow", {
+Object.defineProperty(exports, "akEditorSelectedBorderBoldSize", {
   enumerable: true,
   get: function get() {
-    return _consts.akEditorSelectedBoxShadow;
+    return _consts.akEditorSelectedBorderBoldSize;
   }
 });
-Object.defineProperty(exports, "akEditorSelectedIconColor", {
+Object.defineProperty(exports, "akEditorSelectedBorderColor", {
   enumerable: true,
   get: function get() {
-    return _consts.akEditorSelectedIconColor;
+    return _consts.akEditorSelectedBorderColor;
   }
 });
-Object.defineProperty(exports, "akEditorSelectedBlanketColor", {
+Object.defineProperty(exports, "akEditorSelectedBorderSize", {
   enumerable: true,
   get: function get() {
-    return _consts.akEditorSelectedBlanketColor;
+    return _consts.akEditorSelectedBorderSize;
   }
 });
-Object.defineProperty(exports, "akEditorSelectedBgColor", {
+Object.defineProperty(exports, "akEditorSelectedBoxShadow", {
   enumerable: true,
   get: function get() {
-    return _consts.akEditorSelectedBgColor;
+    return _consts.akEditorSelectedBoxShadow;
   }
 });
-Object.defineProperty(exports, "akEditorSelectedBlanketOpacity", {
+Object.defineProperty(exports, "akEditorSelectedIconColor", {
   enumerable: true,
   get: function get() {
-    return _consts.akEditorSelectedBlanketOpacity;
+    return _consts.akEditorSelectedIconColor;
   }
 });
-Object.defineProperty(exports, "akEditorSmallZIndex", {
+Object.defineProperty(exports, "akEditorSelectedNodeClassName", {
   enumerable: true,
   get: function get() {
-    return _consts.akEditorSmallZIndex;
+    return _consts.akEditorSelectedNodeClassName;
   }
 });
 Object.defineProperty(exports, "akEditorShadowZIndex", {
@@ -285,6 +333,18 @@ Object.defineProperty(exports, "akEditorShadowZIndex", {
     return _consts.akEditorShadowZIndex;
   }
 });
+Object.defineProperty(exports, "akEditorSmallZIndex", {
+  enumerable: true,
+  get: function get() {
+    return _consts.akEditorSmallZIndex;
+  }
+});
+Object.defineProperty(exports, "akEditorStickyHeaderZIndex", {
+  enumerable: true,
+  get: function get() {
+    return _consts.akEditorStickyHeaderZIndex;
+  }
+});
 Object.defineProperty(exports, "akEditorSubtleAccent", {
   enumerable: true,
   get: function get() {
@@ -399,6 +459,12 @@ Object.defineProperty(exports, "akEditorTableToolbarSize", {
     return _consts.akEditorTableToolbarSize;
   }
 });
+Object.defineProperty(exports, "akEditorToolbarKeylineHeight", {
+  enumerable: true,
+  get: function get() {
+    return _consts.akEditorToolbarKeylineHeight;
+  }
+});
 Object.defineProperty(exports, "akEditorUnitZIndex", {
   enumerable: true,
   get: function get() {
@@ -441,82 +507,16 @@ Object.defineProperty(exports, "editorFontSize", {
     return _consts.editorFontSize;
   }
 });
-Object.defineProperty(exports, "gridMediumMaxWidth", {
-  enumerable: true,
-  get: function get() {
-    return _consts.gridMediumMaxWidth;
-  }
-});
 Object.defineProperty(exports, "getAkEditorFullPageMaxWidth", {
   enumerable: true,
   get: function get() {
     return _consts.getAkEditorFullPageMaxWidth;
   }
 });
-Object.defineProperty(exports, "relativeSize", {
-  enumerable: true,
-  get: function get() {
-    return _consts.relativeSize;
-  }
-});
-Object.defineProperty(exports, "relativeFontSizeToBase16", {
-  enumerable: true,
-  get: function get() {
-    return _consts.relativeFontSizeToBase16;
-  }
-});
-Object.defineProperty(exports, "DEFAULT_EMBED_CARD_HEIGHT", {
-  enumerable: true,
-  get: function get() {
-    return _consts.DEFAULT_EMBED_CARD_HEIGHT;
-  }
-});
-Object.defineProperty(exports, "DEFAULT_EMBED_CARD_WIDTH", {
-  enumerable: true,
-  get: function get() {
-    return _consts.DEFAULT_EMBED_CARD_WIDTH;
-  }
-});
-Object.defineProperty(exports, "akEditorLineHeight", {
-  enumerable: true,
-  get: function get() {
-    return _consts.akEditorLineHeight;
-  }
-});
-Object.defineProperty(exports, "akEditorRuleBackground", {
-  enumerable: true,
-  get: function get() {
-    return _consts.akEditorRuleBackground;
-  }
-});
-Object.defineProperty(exports, "akEditorRuleBorderRadius", {
-  enumerable: true,
-  get: function get() {
-    return _consts.akEditorRuleBorderRadius;
-  }
-});
-Object.defineProperty(exports, "akEditorSelectedNodeClassName", {
-  enumerable: true,
-  get: function get() {
-    return _consts.akEditorSelectedNodeClassName;
-  }
-});
-Object.defineProperty(exports, "akEditorToolbarKeylineHeight", {
-  enumerable: true,
-  get: function get() {
-    return _consts.akEditorToolbarKeylineHeight;
-  }
-});
-Object.defineProperty(exports, "VIEWPORT_SIZES", {
-  enumerable: true,
-  get: function get() {
-    return _consts.VIEWPORT_SIZES;
-  }
-});
-Object.defineProperty(exports, "akEditorMobileMaxWidth", {
+Object.defineProperty(exports, "getSelectionStyles", {
   enumerable: true,
   get: function get() {
-    return _consts.akEditorMobileMaxWidth;
+    return _selection.getSelectionStyles;
   }
 });
 Object.defineProperty(exports, "getTableCellBackgroundDarkModeColors", {
@@ -525,34 +525,34 @@ Object.defineProperty(exports, "getTableCellBackgroundDarkModeColors", {
     return _consts.getTableCellBackgroundDarkModeColors;
   }
 });
-Object.defineProperty(exports, "ATLASSIAN_NAVIGATION_HEIGHT", {
+Object.defineProperty(exports, "gridMediumMaxWidth", {
   enumerable: true,
   get: function get() {
-    return _consts.ATLASSIAN_NAVIGATION_HEIGHT;
+    return _consts.gridMediumMaxWidth;
   }
 });
-Object.defineProperty(exports, "SelectionStyle", {
+Object.defineProperty(exports, "hideNativeBrowserTextSelectionStyles", {
   enumerable: true,
   get: function get() {
-    return _selection.SelectionStyle;
+    return _selection.hideNativeBrowserTextSelectionStyles;
   }
 });
-Object.defineProperty(exports, "getSelectionStyles", {
+Object.defineProperty(exports, "overflowShadow", {
   enumerable: true,
   get: function get() {
-    return _selection.getSelectionStyles;
+    return _overflowShadow.overflowShadow;
   }
 });
-Object.defineProperty(exports, "hideNativeBrowserTextSelectionStyles", {
+Object.defineProperty(exports, "relativeFontSizeToBase16", {
   enumerable: true,
   get: function get() {
-    return _selection.hideNativeBrowserTextSelectionStyles;
+    return _consts.relativeFontSizeToBase16;
   }
 });
-Object.defineProperty(exports, "overflowShadow", {
+Object.defineProperty(exports, "relativeSize", {
   enumerable: true,
   get: function get() {
-    return _overflowShadow.overflowShadow;
+    return _consts.relativeSize;
   }
 });
 

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

@@ -9,14 +9,14 @@ exports.overflowShadow = void 0;
 
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 
-var _styledComponents = require("styled-components");
+var _react = require("@emotion/react");
 
 var _templateObject;
 
 var overflowShadow = function overflowShadow(_ref) {
   var background = _ref.background,
       width = _ref.width;
-  return (0, _styledComponents.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n/* shadow cover right */ linear-gradient(\n  to left,\n  ", " ", ",\n  transparent ", "\n),\n/* overflow shadow right */\n  linear-gradient(\n    to left,\n    rgba(9, 30, 66, 0.13) 0,\n    rgba(99, 114, 130, 0) ", "\n  ),\n/* overflow shadow left */\n  linear-gradient(\n    to right,\n    rgba(9, 30, 66, 0.13) 0,\n    rgba(99, 114, 130, 0) ", "\n  )\n"])), background, width, width, width, width);
+  return (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n/* shadow cover right */\n  linear-gradient(\n    to left,\n    ", " ", ",\n    transparent ", "\n  ),\n/* overflow shadow right */\n  linear-gradient(\n    to left,\n    rgba(9, 30, 66, 0.13) 0,\n    rgba(99, 114, 130, 0) ", "\n  ),\n/* overflow shadow left */\n  linear-gradient(\n    to right,\n    rgba(9, 30, 66, 0.13) 0,\n    rgba(99, 114, 130, 0) ", "\n  )\n"])), background, width, width, width, width);
 };
 
 exports.overflowShadow = overflowShadow;

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": "1.6.0",
+	"version": "2.1.0",
 	"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;

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

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

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": "1.6.0",
+	"version": "2.1.0",
 	"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;

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

@@ -2,9 +2,10 @@ import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral
 
 var _templateObject;
 
-import { css } from 'styled-components';
+/* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
+import { css } from '@emotion/react';
 export var overflowShadow = function overflowShadow(_ref) {
   var background = _ref.background,
       width = _ref.width;
-  return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n/* shadow cover right */ linear-gradient(\n  to left,\n  ", " ", ",\n  transparent ", "\n),\n/* overflow shadow right */\n  linear-gradient(\n    to left,\n    rgba(9, 30, 66, 0.13) 0,\n    rgba(99, 114, 130, 0) ", "\n  ),\n/* overflow shadow left */\n  linear-gradient(\n    to right,\n    rgba(9, 30, 66, 0.13) 0,\n    rgba(99, 114, 130, 0) ", "\n  )\n"])), background, width, width, width, width);
+  return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n/* shadow cover right */\n  linear-gradient(\n    to left,\n    ", " ", ",\n    transparent ", "\n  ),\n/* overflow shadow right */\n  linear-gradient(\n    to left,\n    rgba(9, 30, 66, 0.13) 0,\n    rgba(99, 114, 130, 0) ", "\n  ),\n/* overflow shadow left */\n  linear-gradient(\n    to right,\n    rgba(9, 30, 66, 0.13) 0,\n    rgba(99, 114, 130, 0) ", "\n  )\n"])), background, width, width, width, width);
 };

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": "1.6.0",
+	"version": "2.1.0",
 	"sideEffects": false
 }

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

@@ -1,5 +1,4 @@
-import { ThemedValue } from '@atlaskit/theme/types';
 export declare const overflowShadow: ({ background, width, }: {
-    background: ThemedValue<string> | string;
+    background: string;
     width: string;
-}) => import("styled-components").FlattenInterpolation<import("styled-components").ThemedStyledProps<import("@atlaskit/theme/types").AtlaskitThemeProps | import("@atlaskit/theme/types").CustomThemeProps | import("@atlaskit/theme/types").NoThemeProps | undefined, any>>[];
+}) => import("@emotion/react").SerializedStyles;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/editor-shared-styles",
-  "version": "1.6.0",
+  "version": "2.1.0",
   "description": "Style values used in the editor/renderer",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -25,14 +25,15 @@
     ".": "./src/index.ts"
   },
   "dependencies": {
-    "@atlaskit/theme": "^12.0.0",
+    "@atlaskit/theme": "^12.1.0",
+    "@atlaskit/tokens": "^0.9.0",
     "@babel/runtime": "^7.0.0",
-    "styled-components": "^3.2.6"
+    "@emotion/react": "^11.7.1"
   },
   "peerDependencies": {},
   "devDependencies": {
     "@atlassian/atlassian-frontend-prettier-config-1.0.1": "npm:@atlassian/atlassian-frontend-prettier-config@1.0.1",
-    "typescript": "3.9.6"
+    "typescript": "4.2.4"
   },
   "techstack": {
     "@atlassian/frontend": {
@@ -40,6 +41,10 @@
         "file-level"
       ],
       "import-structure": "atlassian-conventions"
+    },
+    "@repo/internal": {
+      "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;

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

@@ -1,19 +1,19 @@
-import { css } from 'styled-components';
-
-import { ThemedValue } from '@atlaskit/theme/types';
+/* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
+import { css } from '@emotion/react';
 
 export const overflowShadow = ({
   background,
   width,
 }: {
-  background: ThemedValue<string> | string;
+  background: string;
   width: string;
 }) => css`
-/* shadow cover right */ linear-gradient(
-  to left,
-  ${background} ${width},
-  transparent ${width}
-),
+/* shadow cover right */
+  linear-gradient(
+    to left,
+    ${background} ${width},
+    transparent ${width}
+  ),
 /* overflow shadow right */
   linear-gradient(
     to left,

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 '';

package/dist/cjs/consts/consts.test.js

@@ -1,25 +0,0 @@
-"use strict";
-
-var _consts = require("./consts");
-
-describe('consts', function () {
-  describe('relativeFontSizeToBase16', function () {
-    it('relativeFontSizeToBase16 should return 1rem with a base font size of 16px', function () {
-      expect((0, _consts.relativeFontSizeToBase16)(16)).toBe('1rem');
-    });
-    it('relativeFontSizeToBase16 should return 0.875rem with a base font size of 14px', function () {
-      expect((0, _consts.relativeFontSizeToBase16)(14)).toBe('0.875rem');
-    });
-    it('relativeFontSizeToBase16 should return 0.875rem with a base font size (string) of 14px', function () {
-      expect((0, _consts.relativeFontSizeToBase16)('14')).toBe('0.875rem');
-    });
-    it('relativeFontSizeToBase16 should return 0.875rem with a base font size (string) of 14px', function () {
-      expect((0, _consts.relativeFontSizeToBase16)('14px')).toBe('0.875rem');
-    });
-    it('relativeFontSizeToBase16 should throw an error for invalid string', function () {
-      expect(function () {
-        return (0, _consts.relativeFontSizeToBase16)('px');
-      }).toThrowError();
-    });
-  });
-});

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

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

package/dist/esm/consts/consts.test.js

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