@atlaskit/editor-shared-styles 2.3.0 → 2.3.1

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @atlaskit/editor-shared-styles
 
+## 2.3.1
+
+### Patch Changes
+
+- [`6455cf006b3`](https://bitbucket.org/atlassian/atlassian-frontend/commits/6455cf006b3) - Builds for this package now pass through a tokens babel plugin, removing runtime invocations of the tokens() function and improving performance.
+
 ## 2.3.0
 
 ### Minor Changes

package/dist/cjs/consts/consts.js

@@ -15,8 +15,6 @@ 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;
@@ -69,9 +67,9 @@ var akEditorSelectedBlanketColor = _colors.B75;
 exports.akEditorSelectedBlanketColor = akEditorSelectedBlanketColor;
 var akEditorSelectedBorderSize = 1;
 exports.akEditorSelectedBorderSize = akEditorSelectedBorderSize;
-var akEditorSelectedBorder = "".concat(akEditorSelectedBorderSize, "px solid ").concat((0, _tokens.token)('color.border.selected', akEditorSelectedBorderColor));
+var akEditorSelectedBorder = "".concat(akEditorSelectedBorderSize, "px solid ", "var(--ds-border-selected, ".concat(akEditorSelectedBorderColor, ")"));
 exports.akEditorSelectedBorder = akEditorSelectedBorder;
-var akEditorSelectedBoxShadow = "0 0 0 ".concat(akEditorSelectedBorderSize, "px ").concat((0, _tokens.token)('color.border.selected', akEditorSelectedBorderColor));
+var akEditorSelectedBoxShadow = "0 0 0 ".concat(akEditorSelectedBorderSize, "px ", "var(--ds-border-selected, ".concat(akEditorSelectedBorderColor, ")"));
 exports.akEditorSelectedBoxShadow = akEditorSelectedBoxShadow;
 var akEditorSelectedIconColor = _colors.B400;
 exports.akEditorSelectedIconColor = akEditorSelectedIconColor;

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

@@ -13,8 +13,6 @@ var _react = require("@emotion/react");
 
 var _constants = require("@atlaskit/theme/constants");
 
-var _tokens = require("@atlaskit/tokens");
-
 var _templateObject;
 
 var overflowShadow = function overflowShadow(_ref) {
@@ -25,7 +23,7 @@ var overflowShadow = function overflowShadow(_ref) {
       rightCoverWidth = _ref.rightCoverWidth;
   var leftCoverWidthResolved = leftCoverWidth || width;
   var rightCoverWidthResolved = rightCoverWidth || width;
-  return (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n/* shadow cover left */\n  linear-gradient(\n    to right,\n    ", " ", ",\n    transparent ", "\n  ),\n/* shadow cover background left */\n  linear-gradient(\n    to right,\n    ", " ", ",\n    transparent ", "\n  ),\n/* shadow cover right */\n  linear-gradient(\n    to left,\n    ", " ", ",\n    transparent ", "\n  ),\n/* shadow cover background right */\n  linear-gradient(\n    to left,\n    ", " ", ",\n    transparent ", "\n  ),\n/* overflow shadow right spread */\n  linear-gradient(\n    to left,\n    ", " 0,\n    ", "  ", "\n  ),\n  /* overflow shadow right perimeter */\n  linear-gradient(\n    to left,\n    ", " 0,\n    ", "  ", "\n  ),\n  /* overflow shadow left spread */\n  linear-gradient(\n    to right,\n    ", " 0,\n    ", "  ", "\n  ),\n  /* overflow shadow left perimeter */\n  linear-gradient(\n    to right,\n    ", " 0,\n    ", "  ", "\n  )\n"])), background, leftCoverWidthResolved, leftCoverWidthResolved, (0, _tokens.token)('elevation.surface.raised', 'transparent'), leftCoverWidthResolved, leftCoverWidthResolved, background, rightCoverWidthResolved, rightCoverWidthResolved, (0, _tokens.token)('elevation.surface.raised', 'transparent'), rightCoverWidthResolved, rightCoverWidthResolved, (0, _tokens.token)('elevation.shadow.overflow.spread', 'rgba(9, 30, 66, 0.13)'), (0, _tokens.token)('utility.UNSAFE_util.transparent', 'rgba(99, 114, 130, 0)'), width, (0, _tokens.token)('elevation.shadow.overflow.perimeter', 'transparent'), (0, _tokens.token)('utility.UNSAFE_util.transparent', 'transparent'), width, (0, _tokens.token)('elevation.shadow.overflow.spread', 'rgba(9, 30, 66, 0.13)'), (0, _tokens.token)('utility.UNSAFE_util.transparent', 'rgba(99, 114, 130, 0)'), width, (0, _tokens.token)('elevation.shadow.overflow.perimeter', 'transparent'), (0, _tokens.token)('utility.UNSAFE_util.transparent', 'transparent'), width);
+  return (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n/* shadow cover left */\n  linear-gradient(\n    to right,\n    ", " ", ",\n    transparent ", "\n  ),\n/* shadow cover background left */\n  linear-gradient(\n    to right,\n    ", " ", ",\n    transparent ", "\n  ),\n/* shadow cover right */\n  linear-gradient(\n    to left,\n    ", " ", ",\n    transparent ", "\n  ),\n/* shadow cover background right */\n  linear-gradient(\n    to left,\n    ", " ", ",\n    transparent ", "\n  ),\n/* overflow shadow right spread */\n  linear-gradient(\n    to left,\n    ", " 0,\n    ", "  ", "\n  ),\n  /* overflow shadow right perimeter */\n  linear-gradient(\n    to left,\n    ", " 0,\n    ", "  ", "\n  ),\n  /* overflow shadow left spread */\n  linear-gradient(\n    to right,\n    ", " 0,\n    ", "  ", "\n  ),\n  /* overflow shadow left perimeter */\n  linear-gradient(\n    to right,\n    ", " 0,\n    ", "  ", "\n  )\n"])), background, leftCoverWidthResolved, leftCoverWidthResolved, "var(--ds-surface-raised, transparent)", leftCoverWidthResolved, leftCoverWidthResolved, background, rightCoverWidthResolved, rightCoverWidthResolved, "var(--ds-surface-raised, transparent)", rightCoverWidthResolved, rightCoverWidthResolved, "var(--ds-shadow-overflow-spread, rgba(9, 30, 66, 0.13))", "var(--ds-UNSAFE_util-transparent, rgba(99, 114, 130, 0))", width, "var(--ds-shadow-overflow-perimeter, transparent)", "var(--ds-UNSAFE_util-transparent, transparent)", width, "var(--ds-shadow-overflow-spread, rgba(9, 30, 66, 0.13))", "var(--ds-UNSAFE_util-transparent, rgba(99, 114, 130, 0))", width, "var(--ds-shadow-overflow-perimeter, transparent)", "var(--ds-UNSAFE_util-transparent, transparent)", width);
 };
 
 exports.overflowShadow = overflowShadow;

package/dist/cjs/scrollbar-styles.js

@@ -7,9 +7,7 @@ exports.scrollbarStyles = void 0;
 
 var _constants = require("@atlaskit/theme/constants");
 
-var _tokens = require("@atlaskit/tokens");
-
 var akGridSize = (0, _constants.gridSize)() + 'px'; // TODO: https://product-fabric.atlassian.net/browse/DSP-4494
 
-var scrollbarStyles = "\n  -ms-overflow-style: -ms-autohiding-scrollbar;\n\n  &::-webkit-scrollbar {\n    height: ".concat(akGridSize, ";\n    width: ").concat(akGridSize, ";\n  }\n\n  &::-webkit-scrollbar-corner {\n    display: none;\n  }\n\n  &::-webkit-scrollbar-thumb {\n    background-color: ").concat((0, _tokens.token)('color.background.neutral.subtle', 'rgba(0, 0, 0, 0)'), ";\n  }\n\n  &:hover::-webkit-scrollbar-thumb {\n    background-color: ").concat((0, _tokens.token)('color.background.neutral.bold', 'rgba(0, 0, 0, 0.2)'), ";\n    border-radius: ").concat(akGridSize, ";\n  }\n\n  &::-webkit-scrollbar-thumb:hover {\n    background-color: ").concat((0, _tokens.token)('color.background.neutral.bold.hovered', 'rgba(0, 0, 0, 0.4)'), ";\n  }\n");
+var scrollbarStyles = "\n  -ms-overflow-style: -ms-autohiding-scrollbar;\n\n  &::-webkit-scrollbar {\n    height: ".concat(akGridSize, ";\n    width: ").concat(akGridSize, ";\n  }\n\n  &::-webkit-scrollbar-corner {\n    display: none;\n  }\n\n  &::-webkit-scrollbar-thumb {\n    background-color: ", "var(--ds-background-neutral-subtle, rgba(0, 0, 0, 0))", ";\n  }\n\n  &:hover::-webkit-scrollbar-thumb {\n    background-color: ", "var(--ds-background-neutral-bold, rgba(0, 0, 0, 0.2))", ";\n    border-radius: ").concat(akGridSize, ";\n  }\n\n  &::-webkit-scrollbar-thumb:hover {\n    background-color: ", "var(--ds-background-neutral-bold-hovered, rgba(0, 0, 0, 0.4))", ";\n  }\n");
 exports.scrollbarStyles = scrollbarStyles;

package/dist/cjs/selection/utils.js

@@ -5,8 +5,6 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.hideNativeBrowserTextSelectionStyles = exports.getSelectionStyles = void 0;
 
-var _tokens = require("@atlaskit/tokens");
-
 var _consts = require("../consts");
 
 var _types = require("./types");
@@ -40,10 +38,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((0, _tokens.token)('color.background.selected', _consts.akEditorSelectedBgColor), ";");
+      return "background-color: ".concat("var(--ds-background-selected, ".concat(_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        ::before {\n          position: absolute;\n          content: '';\n          left: 0;\n          right: 0;\n          top: 0;\n          bottom: 0;\n          width: 100%;\n          pointer-events: none;\n          z-index: ".concat(_consts.akEditorSmallZIndex, ";\n          background-color: ").concat((0, _tokens.token)('color.blanket.selected', '#B3D4FF4C'), "\n        }");
+      return "\n        position: relative;\n\n        // Fixes ED-9263, where emoji or inline card in panel makes selection go outside the panel\n        // in Safari. Looks like it's caused by user-select: all in the emoji element\n        -webkit-user-select: text;\n\n        ::before {\n          position: absolute;\n          content: '';\n          left: 0;\n          right: 0;\n          top: 0;\n          bottom: 0;\n          width: 100%;\n          pointer-events: none;\n          z-index: ".concat(_consts.akEditorSmallZIndex, ";\n          background-color: ", "var(--ds-blanket-selected, #B3D4FF4C)", "\n        }");
 
     default:
       return '';

package/dist/cjs/shortcut/shortcut.js

@@ -15,11 +15,9 @@ var _colors = require("@atlaskit/theme/colors");
 
 var _constants = require("@atlaskit/theme/constants");
 
-var _tokens = require("@atlaskit/tokens");
-
 var _consts = require("../consts");
 
 var _templateObject;
 
-var shortcutStyle = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  background-color: ", "; /* N60 at 50% */\n  color: ", ";\n  border-radius: ", "px;\n  padding: 4px;\n  line-height: 12px;\n  font-size: ", ";\n  align-self: flex-end;\n  @media (max-width: ", "px) {\n    display: none;\n  }\n"])), (0, _tokens.token)('color.background.neutral', 'rgba(223, 225, 229, 0.5)'), (0, _tokens.token)('color.text.subtle', _colors.N100), (0, _constants.borderRadius)(), (0, _consts.relativeFontSizeToBase16)(11.67), _consts.akEditorMobileMaxWidth);
+var shortcutStyle = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  background-color: ", "; /* N60 at 50% */\n  color: ", ";\n  border-radius: ", "px;\n  padding: 4px;\n  line-height: 12px;\n  font-size: ", ";\n  align-self: flex-end;\n  @media (max-width: ", "px) {\n    display: none;\n  }\n"])), "var(--ds-background-neutral, rgba(223, 225, 229, 0.5))", "var(--ds-text-subtle, ".concat(_colors.N100, ")"), (0, _constants.borderRadius)(), (0, _consts.relativeFontSizeToBase16)(11.67), _consts.akEditorMobileMaxWidth);
 exports.shortcutStyle = shortcutStyle;

package/dist/cjs/version.json

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

package/dist/es2019/consts/consts.js

@@ -1,7 +1,6 @@
 /* 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;
@@ -28,8 +27,8 @@ export const akEditorSelectedBorderColor = B300;
 export const akEditorSelectedBgColor = B50;
 export const akEditorSelectedBlanketColor = B75;
 export const akEditorSelectedBorderSize = 1;
-export const akEditorSelectedBorder = `${akEditorSelectedBorderSize}px solid ${token('color.border.selected', akEditorSelectedBorderColor)}`;
-export const akEditorSelectedBoxShadow = `0 0 0 ${akEditorSelectedBorderSize}px ${token('color.border.selected', akEditorSelectedBorderColor)}`;
+export const akEditorSelectedBorder = `${akEditorSelectedBorderSize}px solid ${`var(--ds-border-selected, ${akEditorSelectedBorderColor})`}`;
+export const akEditorSelectedBoxShadow = `0 0 0 ${akEditorSelectedBorderSize}px ${`var(--ds-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,7 +1,6 @@
 /* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
 import { css } from '@emotion/react';
 import { gridSize } from '@atlaskit/theme/constants';
-import { token } from '@atlaskit/tokens';
 export const overflowShadow = ({
   background,
   width = `${gridSize()}px`,
@@ -20,7 +19,7 @@ export const overflowShadow = ({
 /* shadow cover background left */
   linear-gradient(
     to right,
-    ${token('elevation.surface.raised', 'transparent')} ${leftCoverWidthResolved},
+    ${"var(--ds-surface-raised, transparent)"} ${leftCoverWidthResolved},
     transparent ${leftCoverWidthResolved}
   ),
 /* shadow cover right */
@@ -32,32 +31,32 @@ export const overflowShadow = ({
 /* shadow cover background right */
   linear-gradient(
     to left,
-    ${token('elevation.surface.raised', 'transparent')} ${rightCoverWidthResolved},
+    ${"var(--ds-surface-raised, transparent)"} ${rightCoverWidthResolved},
     transparent ${rightCoverWidthResolved}
   ),
 /* overflow shadow right spread */
   linear-gradient(
     to left,
-    ${token('elevation.shadow.overflow.spread', 'rgba(9, 30, 66, 0.13)')} 0,
-    ${token('utility.UNSAFE_util.transparent', 'rgba(99, 114, 130, 0)')}  ${width}
+    ${"var(--ds-shadow-overflow-spread, rgba(9, 30, 66, 0.13))"} 0,
+    ${"var(--ds-UNSAFE_util-transparent, rgba(99, 114, 130, 0))"}  ${width}
   ),
   /* overflow shadow right perimeter */
   linear-gradient(
     to left,
-    ${token('elevation.shadow.overflow.perimeter', 'transparent')} 0,
-    ${token('utility.UNSAFE_util.transparent', 'transparent')}  ${width}
+    ${"var(--ds-shadow-overflow-perimeter, transparent)"} 0,
+    ${"var(--ds-UNSAFE_util-transparent, transparent)"}  ${width}
   ),
   /* overflow shadow left spread */
   linear-gradient(
     to right,
-    ${token('elevation.shadow.overflow.spread', 'rgba(9, 30, 66, 0.13)')} 0,
-    ${token('utility.UNSAFE_util.transparent', 'rgba(99, 114, 130, 0)')}  ${width}
+    ${"var(--ds-shadow-overflow-spread, rgba(9, 30, 66, 0.13))"} 0,
+    ${"var(--ds-UNSAFE_util-transparent, rgba(99, 114, 130, 0))"}  ${width}
   ),
   /* overflow shadow left perimeter */
   linear-gradient(
     to right,
-    ${token('elevation.shadow.overflow.perimeter', 'transparent')} 0,
-    ${token('utility.UNSAFE_util.transparent', 'transparent')}  ${width}
+    ${"var(--ds-shadow-overflow-perimeter, transparent)"} 0,
+    ${"var(--ds-UNSAFE_util-transparent, transparent)"}  ${width}
   )
 `;
 };

package/dist/es2019/scrollbar-styles.js

@@ -1,5 +1,4 @@
 import { gridSize } from '@atlaskit/theme/constants';
-import { token } from '@atlaskit/tokens';
 const akGridSize = gridSize() + 'px'; // TODO: https://product-fabric.atlassian.net/browse/DSP-4494
 
 export const scrollbarStyles = `
@@ -15,15 +14,15 @@ export const scrollbarStyles = `
   }
 
   &::-webkit-scrollbar-thumb {
-    background-color: ${token('color.background.neutral.subtle', 'rgba(0, 0, 0, 0)')};
+    background-color: ${"var(--ds-background-neutral-subtle, rgba(0, 0, 0, 0))"};
   }
 
   &:hover::-webkit-scrollbar-thumb {
-    background-color: ${token('color.background.neutral.bold', 'rgba(0, 0, 0, 0.2)')};
+    background-color: ${"var(--ds-background-neutral-bold, rgba(0, 0, 0, 0.2))"};
     border-radius: ${akGridSize};
   }
 
   &::-webkit-scrollbar-thumb:hover {
-    background-color: ${token('color.background.neutral.bold.hovered', 'rgba(0, 0, 0, 0.4)')};
+    background-color: ${"var(--ds-background-neutral-bold-hovered, rgba(0, 0, 0, 0.4))"};
   }
 `;

package/dist/es2019/selection/utils.js

@@ -1,4 +1,3 @@
-import { token } from '@atlaskit/tokens';
 import { akEditorSelectedBgColor, akEditorSelectedBorder, akEditorSelectedBorderColor, akEditorSelectedBoxShadow, akEditorSmallZIndex } from '../consts';
 import { SelectionStyle } from './types';
 /**
@@ -50,7 +49,7 @@ const getSelectionStyle = style => {
         `;
 
     case SelectionStyle.Background:
-      return `background-color: ${token('color.background.selected', akEditorSelectedBgColor)};`;
+      return `background-color: ${`var(--ds-background-selected, ${akEditorSelectedBgColor})`};`;
 
     case SelectionStyle.Blanket:
       return `
@@ -70,7 +69,7 @@ const getSelectionStyle = style => {
           width: 100%;
           pointer-events: none;
           z-index: ${akEditorSmallZIndex};
-          background-color: ${token('color.blanket.selected', '#B3D4FF4C')}
+          background-color: ${"var(--ds-blanket-selected, #B3D4FF4C)"}
         }`;
 
     default:

package/dist/es2019/shortcut/shortcut.js

@@ -1,11 +1,10 @@
 import { css } from '@emotion/react';
 import { N100 } from '@atlaskit/theme/colors';
 import { borderRadius } from '@atlaskit/theme/constants';
-import { token } from '@atlaskit/tokens';
 import { akEditorMobileMaxWidth, relativeFontSizeToBase16 } from '../consts';
 export const shortcutStyle = css`
-  background-color: ${token('color.background.neutral', 'rgba(223, 225, 229, 0.5)')}; /* N60 at 50% */
-  color: ${token('color.text.subtle', N100)};
+  background-color: ${"var(--ds-background-neutral, rgba(223, 225, 229, 0.5))"}; /* N60 at 50% */
+  color: ${`var(--ds-text-subtle, ${N100})`};
   border-radius: ${borderRadius()}px;
   padding: 4px;
   line-height: 12px;

package/dist/es2019/version.json

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

package/dist/esm/consts/consts.js

@@ -3,7 +3,6 @@ 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;
@@ -30,8 +29,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(token('color.border.selected', akEditorSelectedBorderColor));
-export var akEditorSelectedBoxShadow = "0 0 0 ".concat(akEditorSelectedBorderSize, "px ").concat(token('color.border.selected', akEditorSelectedBorderColor));
+export var akEditorSelectedBorder = "".concat(akEditorSelectedBorderSize, "px solid ", "var(--ds-border-selected, ".concat(akEditorSelectedBorderColor, ")"));
+export var akEditorSelectedBoxShadow = "0 0 0 ".concat(akEditorSelectedBorderSize, "px ", "var(--ds-border-selected, ".concat(akEditorSelectedBorderColor, ")"));
 export var akEditorSelectedIconColor = B400;
 export var akEditorSelectedBorderBoldSize = 2;
 export var akEditorSelectedBlanketOpacity = 0.3;

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

@@ -5,7 +5,6 @@ var _templateObject;
 /* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
 import { css } from '@emotion/react';
 import { gridSize } from '@atlaskit/theme/constants';
-import { token } from '@atlaskit/tokens';
 export var overflowShadow = function overflowShadow(_ref) {
   var background = _ref.background,
       _ref$width = _ref.width,
@@ -14,5 +13,5 @@ export var overflowShadow = function overflowShadow(_ref) {
       rightCoverWidth = _ref.rightCoverWidth;
   var leftCoverWidthResolved = leftCoverWidth || width;
   var rightCoverWidthResolved = rightCoverWidth || width;
-  return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n/* shadow cover left */\n  linear-gradient(\n    to right,\n    ", " ", ",\n    transparent ", "\n  ),\n/* shadow cover background left */\n  linear-gradient(\n    to right,\n    ", " ", ",\n    transparent ", "\n  ),\n/* shadow cover right */\n  linear-gradient(\n    to left,\n    ", " ", ",\n    transparent ", "\n  ),\n/* shadow cover background right */\n  linear-gradient(\n    to left,\n    ", " ", ",\n    transparent ", "\n  ),\n/* overflow shadow right spread */\n  linear-gradient(\n    to left,\n    ", " 0,\n    ", "  ", "\n  ),\n  /* overflow shadow right perimeter */\n  linear-gradient(\n    to left,\n    ", " 0,\n    ", "  ", "\n  ),\n  /* overflow shadow left spread */\n  linear-gradient(\n    to right,\n    ", " 0,\n    ", "  ", "\n  ),\n  /* overflow shadow left perimeter */\n  linear-gradient(\n    to right,\n    ", " 0,\n    ", "  ", "\n  )\n"])), background, leftCoverWidthResolved, leftCoverWidthResolved, token('elevation.surface.raised', 'transparent'), leftCoverWidthResolved, leftCoverWidthResolved, background, rightCoverWidthResolved, rightCoverWidthResolved, token('elevation.surface.raised', 'transparent'), rightCoverWidthResolved, rightCoverWidthResolved, token('elevation.shadow.overflow.spread', 'rgba(9, 30, 66, 0.13)'), token('utility.UNSAFE_util.transparent', 'rgba(99, 114, 130, 0)'), width, token('elevation.shadow.overflow.perimeter', 'transparent'), token('utility.UNSAFE_util.transparent', 'transparent'), width, token('elevation.shadow.overflow.spread', 'rgba(9, 30, 66, 0.13)'), token('utility.UNSAFE_util.transparent', 'rgba(99, 114, 130, 0)'), width, token('elevation.shadow.overflow.perimeter', 'transparent'), token('utility.UNSAFE_util.transparent', 'transparent'), width);
+  return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n/* shadow cover left */\n  linear-gradient(\n    to right,\n    ", " ", ",\n    transparent ", "\n  ),\n/* shadow cover background left */\n  linear-gradient(\n    to right,\n    ", " ", ",\n    transparent ", "\n  ),\n/* shadow cover right */\n  linear-gradient(\n    to left,\n    ", " ", ",\n    transparent ", "\n  ),\n/* shadow cover background right */\n  linear-gradient(\n    to left,\n    ", " ", ",\n    transparent ", "\n  ),\n/* overflow shadow right spread */\n  linear-gradient(\n    to left,\n    ", " 0,\n    ", "  ", "\n  ),\n  /* overflow shadow right perimeter */\n  linear-gradient(\n    to left,\n    ", " 0,\n    ", "  ", "\n  ),\n  /* overflow shadow left spread */\n  linear-gradient(\n    to right,\n    ", " 0,\n    ", "  ", "\n  ),\n  /* overflow shadow left perimeter */\n  linear-gradient(\n    to right,\n    ", " 0,\n    ", "  ", "\n  )\n"])), background, leftCoverWidthResolved, leftCoverWidthResolved, "var(--ds-surface-raised, transparent)", leftCoverWidthResolved, leftCoverWidthResolved, background, rightCoverWidthResolved, rightCoverWidthResolved, "var(--ds-surface-raised, transparent)", rightCoverWidthResolved, rightCoverWidthResolved, "var(--ds-shadow-overflow-spread, rgba(9, 30, 66, 0.13))", "var(--ds-UNSAFE_util-transparent, rgba(99, 114, 130, 0))", width, "var(--ds-shadow-overflow-perimeter, transparent)", "var(--ds-UNSAFE_util-transparent, transparent)", width, "var(--ds-shadow-overflow-spread, rgba(9, 30, 66, 0.13))", "var(--ds-UNSAFE_util-transparent, rgba(99, 114, 130, 0))", width, "var(--ds-shadow-overflow-perimeter, transparent)", "var(--ds-UNSAFE_util-transparent, transparent)", width);
 };

package/dist/esm/scrollbar-styles.js

@@ -1,5 +1,4 @@
 import { gridSize } from '@atlaskit/theme/constants';
-import { token } from '@atlaskit/tokens';
 var akGridSize = gridSize() + 'px'; // TODO: https://product-fabric.atlassian.net/browse/DSP-4494
 
-export var scrollbarStyles = "\n  -ms-overflow-style: -ms-autohiding-scrollbar;\n\n  &::-webkit-scrollbar {\n    height: ".concat(akGridSize, ";\n    width: ").concat(akGridSize, ";\n  }\n\n  &::-webkit-scrollbar-corner {\n    display: none;\n  }\n\n  &::-webkit-scrollbar-thumb {\n    background-color: ").concat(token('color.background.neutral.subtle', 'rgba(0, 0, 0, 0)'), ";\n  }\n\n  &:hover::-webkit-scrollbar-thumb {\n    background-color: ").concat(token('color.background.neutral.bold', 'rgba(0, 0, 0, 0.2)'), ";\n    border-radius: ").concat(akGridSize, ";\n  }\n\n  &::-webkit-scrollbar-thumb:hover {\n    background-color: ").concat(token('color.background.neutral.bold.hovered', 'rgba(0, 0, 0, 0.4)'), ";\n  }\n");
+export var scrollbarStyles = "\n  -ms-overflow-style: -ms-autohiding-scrollbar;\n\n  &::-webkit-scrollbar {\n    height: ".concat(akGridSize, ";\n    width: ").concat(akGridSize, ";\n  }\n\n  &::-webkit-scrollbar-corner {\n    display: none;\n  }\n\n  &::-webkit-scrollbar-thumb {\n    background-color: ", "var(--ds-background-neutral-subtle, rgba(0, 0, 0, 0))", ";\n  }\n\n  &:hover::-webkit-scrollbar-thumb {\n    background-color: ", "var(--ds-background-neutral-bold, rgba(0, 0, 0, 0.2))", ";\n    border-radius: ").concat(akGridSize, ";\n  }\n\n  &::-webkit-scrollbar-thumb:hover {\n    background-color: ", "var(--ds-background-neutral-bold-hovered, rgba(0, 0, 0, 0.4))", ";\n  }\n");

package/dist/esm/selection/utils.js

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

package/dist/esm/shortcut/shortcut.js

@@ -5,6 +5,5 @@ var _templateObject;
 import { css } from '@emotion/react';
 import { N100 } from '@atlaskit/theme/colors';
 import { borderRadius } from '@atlaskit/theme/constants';
-import { token } from '@atlaskit/tokens';
 import { akEditorMobileMaxWidth, relativeFontSizeToBase16 } from '../consts';
-export var shortcutStyle = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  background-color: ", "; /* N60 at 50% */\n  color: ", ";\n  border-radius: ", "px;\n  padding: 4px;\n  line-height: 12px;\n  font-size: ", ";\n  align-self: flex-end;\n  @media (max-width: ", "px) {\n    display: none;\n  }\n"])), token('color.background.neutral', 'rgba(223, 225, 229, 0.5)'), token('color.text.subtle', N100), borderRadius(), relativeFontSizeToBase16(11.67), akEditorMobileMaxWidth);
+export var shortcutStyle = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  background-color: ", "; /* N60 at 50% */\n  color: ", ";\n  border-radius: ", "px;\n  padding: 4px;\n  line-height: 12px;\n  font-size: ", ";\n  align-self: flex-end;\n  @media (max-width: ", "px) {\n    display: none;\n  }\n"])), "var(--ds-background-neutral, rgba(223, 225, 229, 0.5))", "var(--ds-text-subtle, ".concat(N100, ")"), borderRadius(), relativeFontSizeToBase16(11.67), akEditorMobileMaxWidth);

package/dist/esm/version.json

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

package/package.json

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