@atlaskit/editor-plugin-block-controls 9.0.20 → 9.0.22

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # @atlaskit/editor-plugin-block-controls
 
+## 9.0.22
+
+### Patch Changes
+
+- [`5892e575833a1`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/5892e575833a1) -
+  Internal changes to remove unnecessary token fallbacks and imports from `@atlaskit/theme`
+- Updated dependencies
+
+## 9.0.21
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 9.0.20
 
 ### Patch Changes

package/dist/cjs/ui/consts.js

@@ -131,7 +131,7 @@ var topPositionAdjustment = exports.topPositionAdjustment = function topPosition
       return 0;
   }
 };
-var dropTargetMarginMap = exports.dropTargetMarginMap = (_dropTargetMarginMap = {}, (0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)(_dropTargetMarginMap, -24, "var(--ds-space-negative-300, -24px)"), -20, "var(--ds-space-negative-250, -20px)"), -16, "var(--ds-space-negative-200, -16px)"), -12, "var(--ds-space-negative-150, -12px)"), -8, "var(--ds-space-negative-100, -8px)"), -6, "var(--ds-space-negative-075, -6px)"), -4, "var(--ds-space-negative-050, -4px)"), -2, "var(--ds-space-negative-025, -2px)"), 0, "var(--ds-space-0, 0)"), 2, "var(--ds-space-025, 2px)"), (0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)(_dropTargetMarginMap, 4, "var(--ds-space-050, 4px)"), 6, "var(--ds-space-075, 6px)"), 8, "var(--ds-space-100, 8px)"), 12, "var(--ds-space-150, 12px)"), 16, "var(--ds-space-200, 16px)"), 20, "var(--ds-space-250, 20px)"), 24, "var(--ds-space-300, 24px)"));
+var dropTargetMarginMap = exports.dropTargetMarginMap = (_dropTargetMarginMap = {}, (0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)(_dropTargetMarginMap, -24, "var(--ds-space-negative-300, -24px)"), -20, "var(--ds-space-negative-250, -20px)"), -16, "var(--ds-space-negative-200, -16px)"), -12, "var(--ds-space-negative-150, -12px)"), -8, "var(--ds-space-negative-100, -8px)"), -6, "var(--ds-space-negative-075, -6px)"), -4, "var(--ds-space-negative-050, -4px)"), -2, "var(--ds-space-negative-025, -2px)"), 0, "var(--ds-space-0, 0px)"), 2, "var(--ds-space-025, 2px)"), (0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)(_dropTargetMarginMap, 4, "var(--ds-space-050, 4px)"), 6, "var(--ds-space-075, 6px)"), 8, "var(--ds-space-100, 8px)"), 12, "var(--ds-space-150, 12px)"), 16, "var(--ds-space-200, 16px)"), 20, "var(--ds-space-250, 20px)"), 24, "var(--ds-space-300, 24px)"));
 
 /**
  * This document serves as a quick reference map for correlating various space matches

package/dist/cjs/ui/drag-handle.js

@@ -119,23 +119,23 @@ var dragHandleButtonStyles = (0, _react2.css)({
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
   borderRadius: _consts2.DRAG_HANDLE_BORDER_RADIUS,
   // when platform_editor_controls is enabled, the drag handle color is overridden. Update color here when experiment is cleaned up.
-  color: "var(--ds-icon, #44546F)",
+  color: "var(--ds-icon, #292A2E)",
   cursor: 'grab',
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
   zIndex: _consts2.DRAG_HANDLE_ZINDEX,
   outline: 'none',
   '&:hover': {
-    backgroundColor: "var(--ds-background-neutral-subtle-hovered, #091E420F)"
+    backgroundColor: "var(--ds-background-neutral-subtle-hovered, #0515240F)"
   },
   '&:active': {
-    backgroundColor: "var(--ds-background-neutral-subtle-pressed, #091E4224)"
+    backgroundColor: "var(--ds-background-neutral-subtle-pressed, #0B120E24)"
   },
   '&:disabled': {
-    color: "var(--ds-icon-disabled, #8993A4)",
+    color: "var(--ds-icon-disabled, #080F214A)",
     backgroundColor: 'transparent'
   },
   '&:hover:disabled': {
-    backgroundColor: "var(--ds-background-disabled, transparent)"
+    backgroundColor: "var(--ds-background-disabled, #17171708)"
   }
 });
 
@@ -172,40 +172,40 @@ var dragHandleButtonStylesOld = (0, _react2.css)({
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
   borderRadius: _consts2.DRAG_HANDLE_BORDER_RADIUS,
   // when platform_editor_controls is enabled, the drag handle color is overridden. Update color here when experiment is cleaned up.
-  color: "var(--ds-icon, #44546F)",
+  color: "var(--ds-icon, #292A2E)",
   cursor: 'grab',
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
   zIndex: _consts2.DRAG_HANDLE_ZINDEX,
   outline: 'none',
   '&:hover': {
-    backgroundColor: "var(--ds-background-neutral-subtle-hovered, #091E420F)"
+    backgroundColor: "var(--ds-background-neutral-subtle-hovered, #0515240F)"
   },
   '&:active': {
-    backgroundColor: "var(--ds-background-neutral-subtle-pressed, #091E4224)"
+    backgroundColor: "var(--ds-background-neutral-subtle-pressed, #0B120E24)"
   },
   '&:focus': {
-    outline: "var(--ds-border-width-focused, 2px)".concat(" solid ", "var(--ds-border-focused, #388BFF)")
+    outline: "var(--ds-border-width-focused, 2px)".concat(" solid ", "var(--ds-border-focused, #4688EC)")
   },
   '&:disabled': {
-    color: "var(--ds-icon-disabled, #8993A4)",
+    color: "var(--ds-icon-disabled, #080F214A)",
     backgroundColor: 'transparent'
   },
   '&:hover:disabled': {
-    backgroundColor: "var(--ds-background-disabled, transparent)"
+    backgroundColor: "var(--ds-background-disabled, #17171708)"
   }
 });
 var focusedStylesOld = (0, _react2.css)({
   '&:focus': {
-    outline: "var(--ds-border-width-focused, 2px)".concat(" solid ", "var(--ds-border-focused, #388BFF)")
+    outline: "var(--ds-border-width-focused, 2px)".concat(" solid ", "var(--ds-border-focused, #4688EC)")
   }
 });
 var focusedStyles = (0, _react2.css)({
   '&:focus-visible': {
-    outline: "var(--ds-border-width-focused, 2px)".concat(" solid ", "var(--ds-border-focused, #388BFF)")
+    outline: "var(--ds-border-width-focused, 2px)".concat(" solid ", "var(--ds-border-focused, #4688EC)")
   }
 });
 var keyboardFocusedDragHandleStyles = (0, _react2.css)({
-  outline: "var(--ds-border-width-focused, 2px)".concat(" solid ", "var(--ds-border-focused, #388BFF)")
+  outline: "var(--ds-border-width-focused, 2px)".concat(" solid ", "var(--ds-border-focused, #4688EC)")
 });
 var dragHandleContainerStyles = (0, _primitives.xcss)({
   position: 'absolute',
@@ -295,8 +295,8 @@ var layoutColumnDragHandleStyles = (0, _react2.css)({
   transform: 'rotate(90deg)'
 });
 var selectedStyles = (0, _react2.css)({
-  backgroundColor: "var(--ds-background-selected, #E9F2FF)",
-  color: "var(--ds-icon-selected, #0C66E4)"
+  backgroundColor: "var(--ds-background-selected, #E9F2FE)",
+  color: "var(--ds-icon-selected, #1868DB)"
 });
 
 // [Chrome only] When selection contains multiple nodes and then drag a drag handle that is within the selection range,

package/dist/cjs/ui/drag-preview.js

@@ -7,14 +7,13 @@ Object.defineProperty(exports, "__esModule", {
 exports.dragPreview = void 0;
 var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
 var _browser = require("@atlaskit/editor-common/browser");
-var _colors = require("@atlaskit/theme/colors");
 var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
 var previewStyle = {
-  borderColor: "var(--ds-border, ".concat(_colors.N30, ")"),
+  borderColor: "var(--ds-border, #0B120E24)",
   borderStyle: 'solid',
   borderRadius: "var(--ds-radius-small, 3px)",
   borderWidth: "var(--ds-border-width-selected, 2px)",
-  backgroundColor: "var(--ds-skeleton-subtle, ".concat(_colors.N20, ")")
+  backgroundColor: "var(--ds-skeleton-subtle, #17171708)"
 };
 var getPreviewContainerDimensionsForSingle = function getPreviewContainerDimensionsForSingle(dom, nodeType) {
   var nodeContainer = dom;

package/dist/cjs/ui/drop-target-layout.js

@@ -12,7 +12,6 @@ var _react2 = require("@emotion/react");
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
 var _box = require("@atlaskit/pragmatic-drag-and-drop-react-drop-indicator/box");
 var _adapter = require("@atlaskit/pragmatic-drag-and-drop/element/adapter");
-var _colors = require("@atlaskit/theme/colors");
 var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
 var _decorationsCommon = require("../pm-plugins/decorations-common");
 var _activeAnchorTracker = require("../pm-plugins/utils/active-anchor-tracker");
@@ -40,7 +39,7 @@ var dropTargetLayoutStyle = (0, _react2.css)({
 var dropTargetLayoutHintStyle = (0, _react2.css)({
   height: '100%',
   position: 'relative',
-  borderRight: "var(--ds-border-width, 1px)".concat(" dashed ", "var(--ds-border-focused, ".concat(_colors.B200, ")")),
+  borderRight: "var(--ds-border-width, 1px)".concat(" dashed ", "var(--ds-border-focused, #4688EC)"),
   width: 0
 });
 var DropTargetLayout = exports.DropTargetLayout = function DropTargetLayout(props) {

package/dist/cjs/ui/global-styles.js

@@ -284,7 +284,7 @@ var quickInsertStyles = function quickInsertStyles() {
     },
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
     '.blocks-quick-insert-button:focus': {
-      outline: "var(--ds-border-width-focused, 2px)".concat(" solid ", "var(--ds-border-focused, #388BFF)")
+      outline: "var(--ds-border-width-focused, 2px)".concat(" solid ", "var(--ds-border-focused, #4688EC)")
     },
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
     '.blocks-quick-insert-visible-container': {

package/dist/cjs/ui/inline-drop-target.js

@@ -12,7 +12,6 @@ var _react2 = require("@emotion/react");
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
 var _box = require("@atlaskit/pragmatic-drag-and-drop-react-drop-indicator/box");
 var _adapter = require("@atlaskit/pragmatic-drag-and-drop/element/adapter");
-var _colors = require("@atlaskit/theme/colors");
 var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
 var _decorationsCommon = require("../pm-plugins/decorations-common");
 var _activeAnchorTracker = require("../pm-plugins/utils/active-anchor-tracker");
@@ -59,7 +58,7 @@ var GAP = 4;
 var dropTargetLayoutHintStyle = (0, _react2.css)({
   height: '100%',
   position: 'absolute',
-  borderRight: "var(--ds-border-width, 1px)".concat(" dashed ", "var(--ds-border-focused, ".concat(_colors.B200, ")")),
+  borderRight: "var(--ds-border-width, 1px)".concat(" dashed ", "var(--ds-border-focused, #4688EC)"),
   width: 0,
   left: 0
 });

package/dist/cjs/ui/quick-insert-button.js

@@ -62,7 +62,7 @@ var stickyButtonStyles = (0, _primitives.xcss)({
     backgroundColor: 'color.background.neutral.subtle.pressed'
   },
   ':focus': {
-    outline: "var(--ds-border-width-focused, 2px)".concat(" solid ", "var(--ds-border-focused, #388BFF)")
+    outline: "var(--ds-border-width-focused, 2px)".concat(" solid ", "var(--ds-border-focused, #4688EC)")
   }
 });
 

package/dist/es2019/ui/consts.js

@@ -131,7 +131,7 @@ export const dropTargetMarginMap = {
   [-6]: "var(--ds-space-negative-075, -6px)",
   [-4]: "var(--ds-space-negative-050, -4px)",
   [-2]: "var(--ds-space-negative-025, -2px)",
-  0: "var(--ds-space-0, 0)",
+  0: "var(--ds-space-0, 0px)",
   2: "var(--ds-space-025, 2px)",
   4: "var(--ds-space-050, 4px)",
   6: "var(--ds-space-075, 6px)",

package/dist/es2019/ui/drag-handle.js

@@ -111,23 +111,23 @@ const dragHandleButtonStyles = css({
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
   borderRadius: DRAG_HANDLE_BORDER_RADIUS,
   // when platform_editor_controls is enabled, the drag handle color is overridden. Update color here when experiment is cleaned up.
-  color: "var(--ds-icon, #44546F)",
+  color: "var(--ds-icon, #292A2E)",
   cursor: 'grab',
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
   zIndex: DRAG_HANDLE_ZINDEX,
   outline: 'none',
   '&:hover': {
-    backgroundColor: "var(--ds-background-neutral-subtle-hovered, #091E420F)"
+    backgroundColor: "var(--ds-background-neutral-subtle-hovered, #0515240F)"
   },
   '&:active': {
-    backgroundColor: "var(--ds-background-neutral-subtle-pressed, #091E4224)"
+    backgroundColor: "var(--ds-background-neutral-subtle-pressed, #0B120E24)"
   },
   '&:disabled': {
-    color: "var(--ds-icon-disabled, #8993A4)",
+    color: "var(--ds-icon-disabled, #080F214A)",
     backgroundColor: 'transparent'
   },
   '&:hover:disabled': {
-    backgroundColor: "var(--ds-background-disabled, transparent)"
+    backgroundColor: "var(--ds-background-disabled, #17171708)"
   }
 });
 
@@ -167,40 +167,40 @@ const dragHandleButtonStylesOld = css({
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
   borderRadius: DRAG_HANDLE_BORDER_RADIUS,
   // when platform_editor_controls is enabled, the drag handle color is overridden. Update color here when experiment is cleaned up.
-  color: "var(--ds-icon, #44546F)",
+  color: "var(--ds-icon, #292A2E)",
   cursor: 'grab',
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
   zIndex: DRAG_HANDLE_ZINDEX,
   outline: 'none',
   '&:hover': {
-    backgroundColor: "var(--ds-background-neutral-subtle-hovered, #091E420F)"
+    backgroundColor: "var(--ds-background-neutral-subtle-hovered, #0515240F)"
   },
   '&:active': {
-    backgroundColor: "var(--ds-background-neutral-subtle-pressed, #091E4224)"
+    backgroundColor: "var(--ds-background-neutral-subtle-pressed, #0B120E24)"
   },
   '&:focus': {
-    outline: `${"var(--ds-border-width-focused, 2px)"} solid ${"var(--ds-border-focused, #388BFF)"}`
+    outline: `${"var(--ds-border-width-focused, 2px)"} solid ${"var(--ds-border-focused, #4688EC)"}`
   },
   '&:disabled': {
-    color: "var(--ds-icon-disabled, #8993A4)",
+    color: "var(--ds-icon-disabled, #080F214A)",
     backgroundColor: 'transparent'
   },
   '&:hover:disabled': {
-    backgroundColor: "var(--ds-background-disabled, transparent)"
+    backgroundColor: "var(--ds-background-disabled, #17171708)"
   }
 });
 const focusedStylesOld = css({
   '&:focus': {
-    outline: `${"var(--ds-border-width-focused, 2px)"} solid ${"var(--ds-border-focused, #388BFF)"}`
+    outline: `${"var(--ds-border-width-focused, 2px)"} solid ${"var(--ds-border-focused, #4688EC)"}`
   }
 });
 const focusedStyles = css({
   '&:focus-visible': {
-    outline: `${"var(--ds-border-width-focused, 2px)"} solid ${"var(--ds-border-focused, #388BFF)"}`
+    outline: `${"var(--ds-border-width-focused, 2px)"} solid ${"var(--ds-border-focused, #4688EC)"}`
   }
 });
 const keyboardFocusedDragHandleStyles = css({
-  outline: `${"var(--ds-border-width-focused, 2px)"} solid ${"var(--ds-border-focused, #388BFF)"}`
+  outline: `${"var(--ds-border-width-focused, 2px)"} solid ${"var(--ds-border-focused, #4688EC)"}`
 });
 const dragHandleContainerStyles = xcss({
   position: 'absolute',
@@ -290,8 +290,8 @@ const layoutColumnDragHandleStyles = css({
   transform: 'rotate(90deg)'
 });
 const selectedStyles = css({
-  backgroundColor: "var(--ds-background-selected, #E9F2FF)",
-  color: "var(--ds-icon-selected, #0C66E4)"
+  backgroundColor: "var(--ds-background-selected, #E9F2FE)",
+  color: "var(--ds-icon-selected, #1868DB)"
 });
 
 // [Chrome only] When selection contains multiple nodes and then drag a drag handle that is within the selection range,

package/dist/es2019/ui/drag-preview.js

@@ -1,12 +1,11 @@
 import { browser as browserLegacy, getBrowserInfo } from '@atlaskit/editor-common/browser';
-import { N20, N30 } from '@atlaskit/theme/colors';
 import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 const previewStyle = {
-  borderColor: `var(--ds-border, ${N30})`,
+  borderColor: "var(--ds-border, #0B120E24)",
   borderStyle: 'solid',
   borderRadius: "var(--ds-radius-small, 3px)",
   borderWidth: "var(--ds-border-width-selected, 2px)",
-  backgroundColor: `var(--ds-skeleton-subtle, ${N20})`
+  backgroundColor: "var(--ds-skeleton-subtle, #17171708)"
 };
 const getPreviewContainerDimensionsForSingle = (dom, nodeType) => {
   let nodeContainer = dom;

package/dist/es2019/ui/drop-target-layout.js

@@ -9,7 +9,6 @@ import { css, jsx } from '@emotion/react';
 import { layoutBreakpointWidth } from '@atlaskit/editor-shared-styles';
 import { DropIndicator } from '@atlaskit/pragmatic-drag-and-drop-react-drop-indicator/box';
 import { dropTargetForElements } from '@atlaskit/pragmatic-drag-and-drop/element/adapter';
-import { B200 } from '@atlaskit/theme/colors';
 import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { getNodeAnchor } from '../pm-plugins/decorations-common';
 import { useActiveAnchorTracker } from '../pm-plugins/utils/active-anchor-tracker';
@@ -31,7 +30,7 @@ const dropTargetLayoutStyle = css({
 const dropTargetLayoutHintStyle = css({
   height: '100%',
   position: 'relative',
-  borderRight: `${"var(--ds-border-width, 1px)"} dashed ${`var(--ds-border-focused, ${B200})`}`,
+  borderRight: `${"var(--ds-border-width, 1px)"} dashed ${"var(--ds-border-focused, #4688EC)"}`,
   width: 0
 });
 export const DropTargetLayout = props => {

package/dist/es2019/ui/global-styles.js

@@ -335,7 +335,7 @@ const quickInsertStyles = () => css({
   },
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
   '.blocks-quick-insert-button:focus': {
-    outline: `${"var(--ds-border-width-focused, 2px)"} solid ${"var(--ds-border-focused, #388BFF)"}`
+    outline: `${"var(--ds-border-width-focused, 2px)"} solid ${"var(--ds-border-focused, #4688EC)"}`
   },
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
   '.blocks-quick-insert-visible-container': {

package/dist/es2019/ui/inline-drop-target.js

@@ -11,7 +11,6 @@ import { css, jsx } from '@emotion/react';
 import { akEditorBreakoutPadding } from '@atlaskit/editor-shared-styles';
 import { DropIndicator } from '@atlaskit/pragmatic-drag-and-drop-react-drop-indicator/box';
 import { dropTargetForElements } from '@atlaskit/pragmatic-drag-and-drop/element/adapter';
-import { B200 } from '@atlaskit/theme/colors';
 import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { getNodeAnchor } from '../pm-plugins/decorations-common';
 import { useActiveAnchorTracker } from '../pm-plugins/utils/active-anchor-tracker';
@@ -49,7 +48,7 @@ const GAP = 4;
 const dropTargetLayoutHintStyle = css({
   height: '100%',
   position: 'absolute',
-  borderRight: `${"var(--ds-border-width, 1px)"} dashed ${`var(--ds-border-focused, ${B200})`}`,
+  borderRight: `${"var(--ds-border-width, 1px)"} dashed ${"var(--ds-border-focused, #4688EC)"}`,
   width: 0,
   left: 0
 });

package/dist/es2019/ui/quick-insert-button.js

@@ -53,7 +53,7 @@ const stickyButtonStyles = xcss({
     backgroundColor: 'color.background.neutral.subtle.pressed'
   },
   ':focus': {
-    outline: `${"var(--ds-border-width-focused, 2px)"} solid ${"var(--ds-border-focused, #388BFF)"}`
+    outline: `${"var(--ds-border-width-focused, 2px)"} solid ${"var(--ds-border-focused, #4688EC)"}`
   }
 });
 

package/dist/esm/ui/consts.js

@@ -124,7 +124,7 @@ export var topPositionAdjustment = function topPositionAdjustment(nodeType) {
       return 0;
   }
 };
-export var dropTargetMarginMap = (_dropTargetMarginMap = {}, _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_dropTargetMarginMap, -24, "var(--ds-space-negative-300, -24px)"), -20, "var(--ds-space-negative-250, -20px)"), -16, "var(--ds-space-negative-200, -16px)"), -12, "var(--ds-space-negative-150, -12px)"), -8, "var(--ds-space-negative-100, -8px)"), -6, "var(--ds-space-negative-075, -6px)"), -4, "var(--ds-space-negative-050, -4px)"), -2, "var(--ds-space-negative-025, -2px)"), 0, "var(--ds-space-0, 0)"), 2, "var(--ds-space-025, 2px)"), _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_dropTargetMarginMap, 4, "var(--ds-space-050, 4px)"), 6, "var(--ds-space-075, 6px)"), 8, "var(--ds-space-100, 8px)"), 12, "var(--ds-space-150, 12px)"), 16, "var(--ds-space-200, 16px)"), 20, "var(--ds-space-250, 20px)"), 24, "var(--ds-space-300, 24px)"));
+export var dropTargetMarginMap = (_dropTargetMarginMap = {}, _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_dropTargetMarginMap, -24, "var(--ds-space-negative-300, -24px)"), -20, "var(--ds-space-negative-250, -20px)"), -16, "var(--ds-space-negative-200, -16px)"), -12, "var(--ds-space-negative-150, -12px)"), -8, "var(--ds-space-negative-100, -8px)"), -6, "var(--ds-space-negative-075, -6px)"), -4, "var(--ds-space-negative-050, -4px)"), -2, "var(--ds-space-negative-025, -2px)"), 0, "var(--ds-space-0, 0px)"), 2, "var(--ds-space-025, 2px)"), _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_dropTargetMarginMap, 4, "var(--ds-space-050, 4px)"), 6, "var(--ds-space-075, 6px)"), 8, "var(--ds-space-100, 8px)"), 12, "var(--ds-space-150, 12px)"), 16, "var(--ds-space-200, 16px)"), 20, "var(--ds-space-250, 20px)"), 24, "var(--ds-space-300, 24px)"));
 
 /**
  * This document serves as a quick reference map for correlating various space matches

package/dist/esm/ui/drag-handle.js

@@ -116,23 +116,23 @@ var dragHandleButtonStyles = css({
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
   borderRadius: DRAG_HANDLE_BORDER_RADIUS,
   // when platform_editor_controls is enabled, the drag handle color is overridden. Update color here when experiment is cleaned up.
-  color: "var(--ds-icon, #44546F)",
+  color: "var(--ds-icon, #292A2E)",
   cursor: 'grab',
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
   zIndex: DRAG_HANDLE_ZINDEX,
   outline: 'none',
   '&:hover': {
-    backgroundColor: "var(--ds-background-neutral-subtle-hovered, #091E420F)"
+    backgroundColor: "var(--ds-background-neutral-subtle-hovered, #0515240F)"
   },
   '&:active': {
-    backgroundColor: "var(--ds-background-neutral-subtle-pressed, #091E4224)"
+    backgroundColor: "var(--ds-background-neutral-subtle-pressed, #0B120E24)"
   },
   '&:disabled': {
-    color: "var(--ds-icon-disabled, #8993A4)",
+    color: "var(--ds-icon-disabled, #080F214A)",
     backgroundColor: 'transparent'
   },
   '&:hover:disabled': {
-    backgroundColor: "var(--ds-background-disabled, transparent)"
+    backgroundColor: "var(--ds-background-disabled, #17171708)"
   }
 });
 
@@ -169,40 +169,40 @@ var dragHandleButtonStylesOld = css({
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
   borderRadius: DRAG_HANDLE_BORDER_RADIUS,
   // when platform_editor_controls is enabled, the drag handle color is overridden. Update color here when experiment is cleaned up.
-  color: "var(--ds-icon, #44546F)",
+  color: "var(--ds-icon, #292A2E)",
   cursor: 'grab',
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
   zIndex: DRAG_HANDLE_ZINDEX,
   outline: 'none',
   '&:hover': {
-    backgroundColor: "var(--ds-background-neutral-subtle-hovered, #091E420F)"
+    backgroundColor: "var(--ds-background-neutral-subtle-hovered, #0515240F)"
   },
   '&:active': {
-    backgroundColor: "var(--ds-background-neutral-subtle-pressed, #091E4224)"
+    backgroundColor: "var(--ds-background-neutral-subtle-pressed, #0B120E24)"
   },
   '&:focus': {
-    outline: "var(--ds-border-width-focused, 2px)".concat(" solid ", "var(--ds-border-focused, #388BFF)")
+    outline: "var(--ds-border-width-focused, 2px)".concat(" solid ", "var(--ds-border-focused, #4688EC)")
   },
   '&:disabled': {
-    color: "var(--ds-icon-disabled, #8993A4)",
+    color: "var(--ds-icon-disabled, #080F214A)",
     backgroundColor: 'transparent'
   },
   '&:hover:disabled': {
-    backgroundColor: "var(--ds-background-disabled, transparent)"
+    backgroundColor: "var(--ds-background-disabled, #17171708)"
   }
 });
 var focusedStylesOld = css({
   '&:focus': {
-    outline: "var(--ds-border-width-focused, 2px)".concat(" solid ", "var(--ds-border-focused, #388BFF)")
+    outline: "var(--ds-border-width-focused, 2px)".concat(" solid ", "var(--ds-border-focused, #4688EC)")
   }
 });
 var focusedStyles = css({
   '&:focus-visible': {
-    outline: "var(--ds-border-width-focused, 2px)".concat(" solid ", "var(--ds-border-focused, #388BFF)")
+    outline: "var(--ds-border-width-focused, 2px)".concat(" solid ", "var(--ds-border-focused, #4688EC)")
   }
 });
 var keyboardFocusedDragHandleStyles = css({
-  outline: "var(--ds-border-width-focused, 2px)".concat(" solid ", "var(--ds-border-focused, #388BFF)")
+  outline: "var(--ds-border-width-focused, 2px)".concat(" solid ", "var(--ds-border-focused, #4688EC)")
 });
 var dragHandleContainerStyles = xcss({
   position: 'absolute',
@@ -292,8 +292,8 @@ var layoutColumnDragHandleStyles = css({
   transform: 'rotate(90deg)'
 });
 var selectedStyles = css({
-  backgroundColor: "var(--ds-background-selected, #E9F2FF)",
-  color: "var(--ds-icon-selected, #0C66E4)"
+  backgroundColor: "var(--ds-background-selected, #E9F2FE)",
+  color: "var(--ds-icon-selected, #1868DB)"
 });
 
 // [Chrome only] When selection contains multiple nodes and then drag a drag handle that is within the selection range,

package/dist/esm/ui/drag-preview.js

@@ -1,13 +1,12 @@
 import _typeof from "@babel/runtime/helpers/typeof";
 import { browser as browserLegacy, getBrowserInfo } from '@atlaskit/editor-common/browser';
-import { N20, N30 } from '@atlaskit/theme/colors';
 import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 var previewStyle = {
-  borderColor: "var(--ds-border, ".concat(N30, ")"),
+  borderColor: "var(--ds-border, #0B120E24)",
   borderStyle: 'solid',
   borderRadius: "var(--ds-radius-small, 3px)",
   borderWidth: "var(--ds-border-width-selected, 2px)",
-  backgroundColor: "var(--ds-skeleton-subtle, ".concat(N20, ")")
+  backgroundColor: "var(--ds-skeleton-subtle, #17171708)"
 };
 var getPreviewContainerDimensionsForSingle = function getPreviewContainerDimensionsForSingle(dom, nodeType) {
   var nodeContainer = dom;

package/dist/esm/ui/drop-target-layout.js

@@ -11,7 +11,6 @@ import { css, jsx } from '@emotion/react';
 import { layoutBreakpointWidth } from '@atlaskit/editor-shared-styles';
 import { DropIndicator } from '@atlaskit/pragmatic-drag-and-drop-react-drop-indicator/box';
 import { dropTargetForElements } from '@atlaskit/pragmatic-drag-and-drop/element/adapter';
-import { B200 } from '@atlaskit/theme/colors';
 import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { getNodeAnchor } from '../pm-plugins/decorations-common';
 import { useActiveAnchorTracker } from '../pm-plugins/utils/active-anchor-tracker';
@@ -33,7 +32,7 @@ var dropTargetLayoutStyle = css({
 var dropTargetLayoutHintStyle = css({
   height: '100%',
   position: 'relative',
-  borderRight: "var(--ds-border-width, 1px)".concat(" dashed ", "var(--ds-border-focused, ".concat(B200, ")")),
+  borderRight: "var(--ds-border-width, 1px)".concat(" dashed ", "var(--ds-border-focused, #4688EC)"),
   width: 0
 });
 export var DropTargetLayout = function DropTargetLayout(props) {

package/dist/esm/ui/global-styles.js

@@ -277,7 +277,7 @@ var quickInsertStyles = function quickInsertStyles() {
     },
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
     '.blocks-quick-insert-button:focus': {
-      outline: "var(--ds-border-width-focused, 2px)".concat(" solid ", "var(--ds-border-focused, #388BFF)")
+      outline: "var(--ds-border-width-focused, 2px)".concat(" solid ", "var(--ds-border-focused, #4688EC)")
     },
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
     '.blocks-quick-insert-visible-container': {

package/dist/esm/ui/inline-drop-target.js

@@ -13,7 +13,6 @@ import { css, jsx } from '@emotion/react';
 import { akEditorBreakoutPadding } from '@atlaskit/editor-shared-styles';
 import { DropIndicator } from '@atlaskit/pragmatic-drag-and-drop-react-drop-indicator/box';
 import { dropTargetForElements } from '@atlaskit/pragmatic-drag-and-drop/element/adapter';
-import { B200 } from '@atlaskit/theme/colors';
 import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { getNodeAnchor } from '../pm-plugins/decorations-common';
 import { useActiveAnchorTracker } from '../pm-plugins/utils/active-anchor-tracker';
@@ -51,7 +50,7 @@ var GAP = 4;
 var dropTargetLayoutHintStyle = css({
   height: '100%',
   position: 'absolute',
-  borderRight: "var(--ds-border-width, 1px)".concat(" dashed ", "var(--ds-border-focused, ".concat(B200, ")")),
+  borderRight: "var(--ds-border-width, 1px)".concat(" dashed ", "var(--ds-border-focused, #4688EC)"),
   width: 0,
   left: 0
 });

package/dist/esm/ui/quick-insert-button.js

@@ -57,7 +57,7 @@ var stickyButtonStyles = xcss({
     backgroundColor: 'color.background.neutral.subtle.pressed'
   },
   ':focus': {
-    outline: "var(--ds-border-width-focused, 2px)".concat(" solid ", "var(--ds-border-focused, #388BFF)")
+    outline: "var(--ds-border-width-focused, 2px)".concat(" solid ", "var(--ds-border-focused, #4688EC)")
   }
 });
 

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-block-controls",
-	"version": "9.0.20",
+	"version": "9.0.22",
 	"description": "Block controls plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -47,17 +47,17 @@
 		"@atlaskit/editor-prosemirror": "^7.3.0",
 		"@atlaskit/editor-shared-styles": "^3.10.0",
 		"@atlaskit/editor-tables": "^2.9.0",
-		"@atlaskit/icon": "^33.0.0",
-		"@atlaskit/icon-lab": "^6.0.0",
+		"@atlaskit/icon": "^33.1.0",
+		"@atlaskit/icon-lab": "^6.2.0",
 		"@atlaskit/link": "^3.3.0",
 		"@atlaskit/platform-feature-flags": "^1.1.0",
 		"@atlaskit/pragmatic-drag-and-drop": "^1.7.0",
 		"@atlaskit/pragmatic-drag-and-drop-auto-scroll": "^2.1.0",
 		"@atlaskit/pragmatic-drag-and-drop-react-drop-indicator": "^3.2.0",
-		"@atlaskit/primitives": "^18.0.0",
+		"@atlaskit/primitives": "^18.1.0",
 		"@atlaskit/theme": "^22.0.0",
-		"@atlaskit/tmp-editor-statsig": "^45.0.0",
-		"@atlaskit/tokens": "^11.1.0",
+		"@atlaskit/tmp-editor-statsig": "^46.1.0",
+		"@atlaskit/tokens": "^11.2.0",
 		"@atlaskit/tooltip": "^21.0.0",
 		"@babel/runtime": "^7.0.0",
 		"@emotion/react": "^11.7.1",
@@ -67,7 +67,7 @@
 		"uuid": "^3.1.0"
 	},
 	"peerDependencies": {
-		"@atlaskit/editor-common": "^112.8.0",
+		"@atlaskit/editor-common": "^112.10.0",
 		"react": "^18.2.0",
 		"react-dom": "^18.2.0",
 		"react-intl-next": "npm:react-intl@^5.18.1"