@atlaskit/editor-plugin-media 1.36.1 → 1.36.3

package/CHANGELOG.md

@@ -1,5 +1,26 @@
 # @atlaskit/editor-plugin-media
 
+## 1.36.3
+
+### Patch Changes
+
+- [#152851](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/152851)
+  [`caba4b5434f99`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/caba4b5434f99) -
+  Injects a custom interaction name to CardLoading component. This will individualise the experience
+  in Performance Portal
+- [#152823](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/152823)
+  [`0ec705650807f`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/0ec705650807f) -
+  [ux] ED-25090: ED-25090: Migrated link toolbar and panel toolbar to use the new icons
+- Updated dependencies
+
+## 1.36.2
+
+### Patch Changes
+
+- [#152594](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/152594)
+  [`4f17733c95c94`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/4f17733c95c94) -
+  [ux] ED-25093: Migrated media toolbar to use the new icons
+
 ## 1.36.1
 
 ### Patch Changes

package/dist/cjs/nodeviews/mediaNodeView/media.js

@@ -242,7 +242,9 @@ var MediaNode = exports.MediaNode = /*#__PURE__*/function (_Component) {
       if (isLoading || type !== 'external' && !viewMediaClientConfig) {
         return /*#__PURE__*/_react.default.createElement(_styles.MediaCardWrapper, {
           dimensions: originalDimensions
-        }, /*#__PURE__*/_react.default.createElement(_mediaCard.CardLoading, null));
+        }, /*#__PURE__*/_react.default.createElement(_mediaCard.CardLoading, {
+          interactionName: "editor-media-card-loading"
+        }));
       }
       var contextId = contextIdentifierProvider && contextIdentifierProvider.objectId;
       var identifier = type === 'external' ? {

package/dist/cjs/toolbar/comments.js

@@ -9,7 +9,8 @@ var _react = _interopRequireDefault(require("react"));
 var _analytics = require("@atlaskit/editor-common/analytics");
 var _keymaps = require("@atlaskit/editor-common/keymaps");
 var _media = require("@atlaskit/editor-common/media");
-var _comment = _interopRequireDefault(require("@atlaskit/icon/glyph/comment"));
+var _comment = _interopRequireDefault(require("@atlaskit/icon/core/comment"));
+var _comment2 = _interopRequireDefault(require("@atlaskit/icon/glyph/comment"));
 var _commentWithDotIcon = require("./assets/commentWithDotIcon");
 var _utils = require("./utils");
 var commentButton = exports.commentButton = function commentButton(intl, state, api) {
@@ -40,7 +41,8 @@ var commentButton = exports.commentButton = function commentButton(intl, state,
   return {
     type: 'button',
     testId: 'add-comment-media-button',
-    icon: hasActiveComments ? _commentWithDotIcon.CommentWithDotIcon : _comment.default,
+    icon: _comment.default,
+    iconFallback: hasActiveComments ? _commentWithDotIcon.CommentWithDotIcon : _comment2.default,
     title: title,
     onClick: onClickHandler,
     tooltipContent: /*#__PURE__*/_react.default.createElement(_keymaps.ToolTipContent, {

package/dist/cjs/toolbar/filePreviewItem.js

@@ -9,6 +9,7 @@ exports.FilePreviewItem = void 0;
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _react = _interopRequireWildcard(require("react"));
 var _ui = require("@atlaskit/editor-common/ui");
+var _maximize = _interopRequireDefault(require("@atlaskit/icon/core/maximize"));
 var _filePreview = _interopRequireDefault(require("@atlaskit/icon/glyph/editor/file-preview"));
 var _mediaUi = require("@atlaskit/media-ui");
 var _PortalWrapper = require("../ui/MediaViewer/PortalWrapper");
@@ -36,8 +37,11 @@ var FilePreviewItem = exports.FilePreviewItem = function FilePreviewItem(_ref) {
     testId: "file-preview-toolbar-button",
     key: "editor.media.card.preview",
     onClick: showMediaViewer,
-    icon: /*#__PURE__*/_react.default.createElement(_filePreview.default, {
-      label: "file preview"
+    icon: /*#__PURE__*/_react.default.createElement(_maximize.default, {
+      color: "currentColor",
+      spacing: "spacious",
+      label: "file preview",
+      LEGACY_fallbackIcon: _filePreview.default
     }),
     tooltipContent: tooltipContent
   }), shouldRenderMediaViewer && /*#__PURE__*/_react.default.createElement(_PortalWrapper.RenderMediaViewer, {

package/dist/cjs/toolbar/index.js

@@ -18,7 +18,11 @@ var _messages = _interopRequireWildcard(require("@atlaskit/editor-common/message
 var _state2 = require("@atlaskit/editor-prosemirror/state");
 var _utils = require("@atlaskit/editor-prosemirror/utils");
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
-var _download = _interopRequireDefault(require("@atlaskit/icon/glyph/download"));
+var _delete = _interopRequireDefault(require("@atlaskit/icon/core/delete"));
+var _imageFullscreen = _interopRequireDefault(require("@atlaskit/icon/core/image-fullscreen"));
+var _imageInline = _interopRequireDefault(require("@atlaskit/icon/core/image-inline"));
+var _maximize = _interopRequireDefault(require("@atlaskit/icon/core/maximize"));
+var _download = _interopRequireDefault(require("@atlaskit/icon/core/migration/download"));
 var _filePreview = _interopRequireDefault(require("@atlaskit/icon/glyph/editor/file-preview"));
 var _remove = _interopRequireDefault(require("@atlaskit/icon/glyph/editor/remove"));
 var _mediaFilmstrip = require("@atlaskit/media-filmstrip");
@@ -125,7 +129,8 @@ var generateMediaCardFloatingToolbar = function generateMediaCardFloatingToolbar
   }, (0, _platformFeatureFlags.fg)('platform_editor_media_previewer_bugfix') ? {
     id: 'editor.media.viewer',
     type: 'button',
-    icon: _filePreview.default,
+    icon: _maximize.default,
+    iconFallback: _filePreview.default,
     title: intl.formatMessage(_mediaUi.messages.preview),
     onClick: function onClick() {
       var _handleShowMediaViewe;
@@ -162,7 +167,8 @@ var generateMediaCardFloatingToolbar = function generateMediaCardFloatingToolbar
     type: 'button',
     appearance: 'danger',
     focusEditoronEnter: true,
-    icon: _remove.default,
+    icon: _delete.default,
+    iconFallback: _remove.default,
     onMouseEnter: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(mediaGroup, true),
     onMouseLeave: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(mediaGroup, false),
     onFocus: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(mediaGroup, true),
@@ -281,9 +287,12 @@ var generateMediaSingleFloatingToolbar = function generateMediaSingleFloatingToo
           id: 'editor.media.image.view.switcher.inline',
           title: inlineSwitcherTitle,
           icon: function icon() {
-            return /*#__PURE__*/_react.default.createElement(_card.IconInline, {
-              size: "medium",
-              label: inlineSwitcherTitle
+            return /*#__PURE__*/_react.default.createElement(_imageInline.default, {
+              color: "currentColor",
+              spacing: "spacious",
+              label: inlineSwitcherTitle,
+              LEGACY_size: "medium",
+              LEGACY_fallbackIcon: _card.IconInline
             });
           },
           onClick: (0, _commands.changeMediaSingleToMediaInline)(pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$a4 = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a4 === void 0 ? void 0 : _pluginInjectionApi$a4.actions),
@@ -293,9 +302,12 @@ var generateMediaSingleFloatingToolbar = function generateMediaSingleFloatingToo
           id: 'editor.media.image.view.switcher.floating',
           title: floatingSwitcherTitle,
           icon: function icon() {
-            return /*#__PURE__*/_react.default.createElement(_card.IconEmbed, {
-              size: "medium",
-              label: floatingSwitcherTitle
+            return /*#__PURE__*/_react.default.createElement(_imageFullscreen.default, {
+              color: "currentColor",
+              spacing: "spacious",
+              label: floatingSwitcherTitle,
+              LEGACY_size: "medium",
+              LEGACY_fallbackIcon: _card.IconEmbed
             });
           },
           onClick: function onClick() {
@@ -469,7 +481,8 @@ var generateMediaSingleFloatingToolbar = function generateMediaSingleFloatingToo
         toolbarButtons.push((0, _platformFeatureFlags.fg)('platform_editor_media_previewer_bugfix') ? {
           id: 'editor.media.viewer',
           type: 'button',
-          icon: _filePreview.default,
+          icon: _maximize.default,
+          iconFallback: _filePreview.default,
           title: intl.formatMessage(_mediaUi.messages.preview),
           onClick: function onClick() {
             var _handleShowMediaViewe2;

package/dist/cjs/toolbar/linking-toolbar-appearance.js

@@ -13,7 +13,8 @@ var _adfSchema = require("@atlaskit/adf-schema");
 var _keymaps = require("@atlaskit/editor-common/keymaps");
 var _messages = require("@atlaskit/editor-common/messages");
 var _ui = require("@atlaskit/editor-common/ui");
-var _link = _interopRequireDefault(require("@atlaskit/icon/glyph/editor/link"));
+var _linkExternal = _interopRequireDefault(require("@atlaskit/icon/core/link-external"));
+var _link = _interopRequireDefault(require("@atlaskit/icon/core/migration/link"));
 var _shortcut = _interopRequireDefault(require("@atlaskit/icon/glyph/shortcut"));
 var _pluginKey = require("../pm-plugins/plugin-key");
 var _checkMediaType = require("../utils/check-media-type");
@@ -83,8 +84,11 @@ var LinkToolbarAppearance = exports.LinkToolbarAppearance = function LinkToolbar
       disabled: !isValidUrl,
       onClick: onOpenLink,
       title: linkTitle,
-      icon: (0, _react2.jsx)(_shortcut.default, {
-        label: linkTitle
+      icon: (0, _react2.jsx)(_linkExternal.default, {
+        color: "currentColor",
+        spacing: "spacious",
+        label: linkTitle,
+        LEGACY_fallbackIcon: _shortcut.default
       })
       // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
       ,
@@ -101,6 +105,7 @@ var LinkToolbarAppearance = exports.LinkToolbarAppearance = function LinkToolbar
         keymap: _keymaps.addLink
       }),
       icon: (0, _react2.jsx)(_link.default, {
+        color: "currentColor",
         label: _title
       })
     }), (0, _react2.jsx)(_ui.FloatingToolbarSeparator, null)) : null;

package/dist/cjs/toolbar/mediaInline.js

@@ -11,7 +11,11 @@ var _analytics = require("@atlaskit/editor-common/analytics");
 var _card = require("@atlaskit/editor-common/card");
 var _messages = _interopRequireWildcard(require("@atlaskit/editor-common/messages"));
 var _state2 = require("@atlaskit/editor-prosemirror/state");
-var _download = _interopRequireDefault(require("@atlaskit/icon/glyph/download"));
+var _delete = _interopRequireDefault(require("@atlaskit/icon/core/delete"));
+var _imageFullscreen = _interopRequireDefault(require("@atlaskit/icon/core/image-fullscreen"));
+var _imageInline = _interopRequireDefault(require("@atlaskit/icon/core/image-inline"));
+var _download = _interopRequireDefault(require("@atlaskit/icon/core/migration/download"));
+var _smartLinkCard = _interopRequireDefault(require("@atlaskit/icon/core/smart-link-card"));
 var _filePreview = _interopRequireDefault(require("@atlaskit/icon/glyph/editor/file-preview"));
 var _remove = _interopRequireDefault(require("@atlaskit/icon/glyph/editor/remove"));
 var _mediaUi = require("@atlaskit/media-ui");
@@ -44,7 +48,8 @@ var generateMediaInlineFloatingToolbar = exports.generateMediaInlineFloatingTool
   var items = [{
     id: 'editor.media.view.switcher.inline',
     type: 'button',
-    icon: _card.IconInline,
+    icon: _imageInline.default,
+    iconFallback: _card.IconInline,
     selected: true,
     disabled: false,
     focusEditoronEnter: true,
@@ -57,7 +62,8 @@ var generateMediaInlineFloatingToolbar = exports.generateMediaInlineFloatingTool
   }, {
     id: 'editor.media.view.switcher.thumbnail',
     type: 'button',
-    icon: _card.IconCard,
+    icon: _smartLinkCard.default,
+    iconFallback: _card.IconCard,
     selected: false,
     disabled: false,
     focusEditoronEnter: true,
@@ -105,7 +111,8 @@ var generateMediaInlineFloatingToolbar = exports.generateMediaInlineFloatingTool
     type: 'button',
     appearance: 'danger',
     focusEditoronEnter: true,
-    icon: _remove.default,
+    icon: _delete.default,
+    iconFallback: _remove.default,
     onMouseEnter: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(mediaInline, true),
     onMouseLeave: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(mediaInline, false),
     onFocus: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(mediaInline, true),
@@ -159,9 +166,12 @@ var getMediaInlineImageToolbar = function getMediaInlineImageToolbar(state, intl
     type: 'button',
     title: mediaInlineImageTitle,
     icon: function icon() {
-      return /*#__PURE__*/_react.default.createElement(_card.IconInline, {
-        size: "medium",
-        label: mediaInlineImageTitle
+      return /*#__PURE__*/_react.default.createElement(_imageInline.default, {
+        color: "currentColor",
+        spacing: "spacious",
+        label: mediaInlineImageTitle,
+        LEGACY_size: "medium",
+        LEGACY_fallbackIcon: _card.IconInline
       });
     },
     onClick: function onClick() {
@@ -173,9 +183,12 @@ var getMediaInlineImageToolbar = function getMediaInlineImageToolbar(state, intl
     type: 'button',
     title: mediaSingleTitle,
     icon: function icon() {
-      return /*#__PURE__*/_react.default.createElement(_card.IconEmbed, {
-        size: "medium",
-        label: mediaSingleTitle
+      return /*#__PURE__*/_react.default.createElement(_imageFullscreen.default, {
+        color: "currentColor",
+        spacing: "spacious",
+        label: mediaSingleTitle,
+        LEGACY_size: "medium",
+        LEGACY_fallbackIcon: _card.IconEmbed
       });
     },
     onClick: (0, _commands.changeMediaInlineToMediaSingle)(editorAnalyticsAPI, widthPluginState, isNestingInQuoteSupported)
@@ -284,7 +297,8 @@ var getMediaInlineImageToolbar = function getMediaInlineImageToolbar(state, intl
     type: 'button',
     appearance: 'danger',
     focusEditoronEnter: true,
-    icon: _remove.default,
+    icon: _delete.default,
+    iconFallback: _remove.default,
     onMouseEnter: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(mediaInline, true),
     onMouseLeave: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(mediaInline, false),
     onFocus: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(mediaInline, true),

package/dist/cjs/ui/ImageBorder/index.js

@@ -15,7 +15,13 @@ var _ui = require("@atlaskit/editor-common/ui");
 var _uiColor = require("@atlaskit/editor-common/ui-color");
 var _uiMenu = require("@atlaskit/editor-common/ui-menu");
 var _editorPalette = require("@atlaskit/editor-palette");
+var _border = _interopRequireDefault(require("@atlaskit/icon/core/border"));
+var _borderWeightMedium = _interopRequireDefault(require("@atlaskit/icon/core/border-weight-medium"));
+var _borderWeightThick = _interopRequireDefault(require("@atlaskit/icon/core/border-weight-thick"));
+var _borderWeightThin = _interopRequireDefault(require("@atlaskit/icon/core/border-weight-thin"));
 var _chevronDown = _interopRequireDefault(require("@atlaskit/icon/glyph/chevron-down"));
+var _chevronDown2 = _interopRequireDefault(require("@atlaskit/icon/utility/chevron-down"));
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _primitives = require("@atlaskit/primitives");
 var _tooltip = _interopRequireDefault(require("@atlaskit/tooltip"));
 var _styles2 = require("./styles");
@@ -107,14 +113,20 @@ var ImageBorder = function ImageBorder(_ref) {
   }, [isColorSubmenuOpen, isSizeSubmenuOpen, isOpenByKeyboard]);
   var borderSizeOptions = [{
     name: formatMessage(_media.imageBorderMessages.borderSizeSubtle),
-    value: 1
+    value: 1,
+    icon: _borderWeightThin.default
   }, {
     name: formatMessage(_media.imageBorderMessages.borderSizeMedium),
-    value: 2
+    value: 2,
+    icon: _borderWeightMedium.default
   }, {
     name: formatMessage(_media.imageBorderMessages.borderSizeBold),
-    value: 3
+    value: 3,
+    icon: _borderWeightThick.default
   }];
+  var borderColorSelectStyles = function borderColorSelectStyles() {
+    return !(0, _platformFeatureFlags.fg)('platform-visual-refresh-icons') ? (0, _styles2.contextualMenuColorIcon)(color && (0, _editorPalette.hexToEditorBorderPaletteColor)(color)) : _styles2.contextualMenuArrow;
+  };
   var items = [{
     content: (0, _react2.jsx)("div", null, (0, _react2.jsx)("button", {
       ref: dropDownColorOptionButton,
@@ -131,7 +143,7 @@ var ImageBorder = function ImageBorder(_ref) {
         });
       }
     }, (0, _react2.jsx)(_primitives.Text, null, formatMessage(_media.imageBorderMessages.borderColor)), (0, _react2.jsx)("div", {
-      css: (0, _styles2.contextualMenuColorIcon)(color && (0, _editorPalette.hexToEditorBorderPaletteColor)(color))
+      css: borderColorSelectStyles
     })), (0, _react2.jsx)("div", {
       // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
       className: _styles.DropdownMenuSharedCssClassName.SUBMENU,
@@ -215,7 +227,9 @@ var ImageBorder = function ImageBorder(_ref) {
       ref: handleSubMenuRef
     }, borderSizeOptions.map(function (_ref2, idx) {
       var name = _ref2.name,
-        value = _ref2.value;
+        value = _ref2.value,
+        icon = _ref2.icon;
+      var ButtonIcon = icon;
       return (0, _react2.jsx)(_tooltip.default, {
         key: idx,
         content: name
@@ -249,9 +263,15 @@ var ImageBorder = function ImageBorder(_ref) {
         onMouseDown: function onMouseDown(e) {
           e.preventDefault();
         }
-      }, (0, _react2.jsx)("div", {
+      }, !(0, _platformFeatureFlags.fg)('platform-visual-refresh-icons') ?
+      //eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
+      (0, _react2.jsx)("div", {
         css: (0, _styles2.line)(value, value === size),
         role: "presentation"
+      }) : (0, _react2.jsx)(ButtonIcon, {
+        color: value === size ? "var(--ds-icon-inverse, #FFFFFF)" : 'currentColor',
+        spacing: "spacious",
+        label: name
       }))));
     }))))),
     'data-testid': 'dropdown-item__Size',
@@ -285,8 +305,11 @@ var ImageBorder = function ImageBorder(_ref) {
     onClick: toggleBorder,
     spacing: "compact",
     "aria-label": enabled ? formatMessage(_media.imageBorderMessages.removeBorder) : formatMessage(_media.imageBorderMessages.addBorder),
-    iconBefore: (0, _react2.jsx)(_icons.BorderIcon, {
-      label: ""
+    iconBefore: (0, _react2.jsx)(_border.default, {
+      color: "currentColor",
+      label: "",
+      spacing: "spacious",
+      LEGACY_fallbackIcon: _icons.BorderIcon
     }),
     title: enabled ? formatMessage(_media.imageBorderMessages.removeBorder) : formatMessage(_media.imageBorderMessages.addBorder)
   }), (0, _react2.jsx)("div", {
@@ -301,8 +324,11 @@ var ImageBorder = function ImageBorder(_ref) {
     "aria-label": formatMessage(_media.imageBorderMessages.borderOptions),
     title: formatMessage(_media.imageBorderMessages.borderOptions),
     spacing: "compact",
-    iconBefore: (0, _react2.jsx)(_chevronDown.default, {
-      label: ""
+    iconBefore: (0, _react2.jsx)(_chevronDown2.default, {
+      color: "currentColor",
+      spacing: "spacious",
+      label: "",
+      LEGACY_fallbackIcon: _chevronDown.default
     }),
     onClick: function onClick() {
       setIsOpen(!isOpen);

package/dist/es2019/nodeviews/mediaNodeView/media.js

@@ -181,7 +181,9 @@ export class MediaNode extends Component {
     if (isLoading || type !== 'external' && !viewMediaClientConfig) {
       return /*#__PURE__*/React.createElement(MediaCardWrapper, {
         dimensions: originalDimensions
-      }, /*#__PURE__*/React.createElement(CardLoading, null));
+      }, /*#__PURE__*/React.createElement(CardLoading, {
+        interactionName: "editor-media-card-loading"
+      }));
     }
     const contextId = contextIdentifierProvider && contextIdentifierProvider.objectId;
     const identifier = type === 'external' ? {

package/dist/es2019/toolbar/comments.js

@@ -2,7 +2,8 @@ import React from 'react';
 import { INPUT_METHOD, VIEW_METHOD } from '@atlaskit/editor-common/analytics';
 import { ToolTipContent } from '@atlaskit/editor-common/keymaps';
 import { commentMessages as messages } from '@atlaskit/editor-common/media';
-import CommentIcon from '@atlaskit/icon/glyph/comment';
+import CommentIcon from '@atlaskit/icon/core/comment';
+import LegacyCommentIcon from '@atlaskit/icon/glyph/comment';
 import { CommentWithDotIcon } from './assets/commentWithDotIcon';
 import { getSelectedMediaSingle } from './utils';
 export const commentButton = (intl, state, api) => {
@@ -32,7 +33,8 @@ export const commentButton = (intl, state, api) => {
   return {
     type: 'button',
     testId: 'add-comment-media-button',
-    icon: hasActiveComments ? CommentWithDotIcon : CommentIcon,
+    icon: CommentIcon,
+    iconFallback: hasActiveComments ? CommentWithDotIcon : LegacyCommentIcon,
     title,
     onClick: onClickHandler,
     tooltipContent: /*#__PURE__*/React.createElement(ToolTipContent, {

package/dist/es2019/toolbar/filePreviewItem.js

@@ -1,5 +1,6 @@
 import React, { useState } from 'react';
 import { FloatingToolbarButton as ToolbarButton } from '@atlaskit/editor-common/ui';
+import MaximizeIcon from '@atlaskit/icon/core/maximize';
 import FilePreviewIcon from '@atlaskit/icon/glyph/editor/file-preview';
 import { messages } from '@atlaskit/media-ui';
 import { RenderMediaViewer } from '../ui/MediaViewer/PortalWrapper';
@@ -23,8 +24,11 @@ export const FilePreviewItem = ({
     testId: "file-preview-toolbar-button",
     key: "editor.media.card.preview",
     onClick: showMediaViewer,
-    icon: /*#__PURE__*/React.createElement(FilePreviewIcon, {
-      label: "file preview"
+    icon: /*#__PURE__*/React.createElement(MaximizeIcon, {
+      color: "currentColor",
+      spacing: "spacious",
+      label: "file preview",
+      LEGACY_fallbackIcon: FilePreviewIcon
     }),
     tooltipContent: tooltipContent
   }), shouldRenderMediaViewer && /*#__PURE__*/React.createElement(RenderMediaViewer, {

package/dist/es2019/toolbar/index.js

@@ -8,7 +8,11 @@ import commonMessages, { cardMessages, mediaAndEmbedToolbarMessages } from '@atl
 import { NodeSelection } from '@atlaskit/editor-prosemirror/state';
 import { contains, findParentNodeOfType, hasParentNode, hasParentNodeOfType, removeSelectedNode } from '@atlaskit/editor-prosemirror/utils';
 import { akEditorDefaultLayoutWidth, akEditorFullWidthLayoutWidth } from '@atlaskit/editor-shared-styles';
-import DownloadIcon from '@atlaskit/icon/glyph/download';
+import DeleteIcon from '@atlaskit/icon/core/delete';
+import ImageFullscreenIcon from '@atlaskit/icon/core/image-fullscreen';
+import ImageInlineIcon from '@atlaskit/icon/core/image-inline';
+import MaximizeIcon from '@atlaskit/icon/core/maximize';
+import DownloadIcon from '@atlaskit/icon/core/migration/download';
 import FilePreviewIcon from '@atlaskit/icon/glyph/editor/file-preview';
 import RemoveIcon from '@atlaskit/icon/glyph/editor/remove';
 import { mediaFilmstripItemDOMSelector } from '@atlaskit/media-filmstrip';
@@ -112,7 +116,8 @@ const generateMediaCardFloatingToolbar = (state, intl, mediaPluginState, hoverDe
   }, fg('platform_editor_media_previewer_bugfix') ? {
     id: 'editor.media.viewer',
     type: 'button',
-    icon: FilePreviewIcon,
+    icon: MaximizeIcon,
+    iconFallback: FilePreviewIcon,
     title: intl.formatMessage(messages.preview),
     onClick: () => {
       var _handleShowMediaViewe;
@@ -149,7 +154,8 @@ const generateMediaCardFloatingToolbar = (state, intl, mediaPluginState, hoverDe
     type: 'button',
     appearance: 'danger',
     focusEditoronEnter: true,
-    icon: RemoveIcon,
+    icon: DeleteIcon,
+    iconFallback: RemoveIcon,
     onMouseEnter: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(mediaGroup, true),
     onMouseLeave: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(mediaGroup, false),
     onFocus: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(mediaGroup, true),
@@ -274,9 +280,12 @@ const generateMediaSingleFloatingToolbar = (state, intl, options, pluginState, m
           type: 'button',
           id: 'editor.media.image.view.switcher.inline',
           title: inlineSwitcherTitle,
-          icon: () => /*#__PURE__*/React.createElement(IconInline, {
-            size: "medium",
-            label: inlineSwitcherTitle
+          icon: () => /*#__PURE__*/React.createElement(ImageInlineIcon, {
+            color: "currentColor",
+            spacing: "spacious",
+            label: inlineSwitcherTitle,
+            LEGACY_size: "medium",
+            LEGACY_fallbackIcon: IconInline
           }),
           onClick: changeMediaSingleToMediaInline(pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$a4 = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a4 === void 0 ? void 0 : _pluginInjectionApi$a4.actions),
           testId: 'image-inline-appearance'
@@ -284,9 +293,12 @@ const generateMediaSingleFloatingToolbar = (state, intl, options, pluginState, m
           type: 'button',
           id: 'editor.media.image.view.switcher.floating',
           title: floatingSwitcherTitle,
-          icon: () => /*#__PURE__*/React.createElement(IconEmbed, {
-            size: "medium",
-            label: floatingSwitcherTitle
+          icon: () => /*#__PURE__*/React.createElement(ImageFullscreenIcon, {
+            color: "currentColor",
+            spacing: "spacious",
+            label: floatingSwitcherTitle,
+            LEGACY_size: "medium",
+            LEGACY_fallbackIcon: IconEmbed
           }),
           onClick: () => {
             return true;
@@ -473,7 +485,8 @@ const generateMediaSingleFloatingToolbar = (state, intl, options, pluginState, m
         toolbarButtons.push(fg('platform_editor_media_previewer_bugfix') ? {
           id: 'editor.media.viewer',
           type: 'button',
-          icon: FilePreviewIcon,
+          icon: MaximizeIcon,
+          iconFallback: FilePreviewIcon,
           title: intl.formatMessage(messages.preview),
           onClick: () => {
             var _handleShowMediaViewe2;

package/dist/es2019/toolbar/linking-toolbar-appearance.js

@@ -10,7 +10,8 @@ import { isSafeUrl } from '@atlaskit/adf-schema';
 import { addLink, ToolTipContent } from '@atlaskit/editor-common/keymaps';
 import { linkMessages, linkToolbarMessages } from '@atlaskit/editor-common/messages';
 import { FloatingToolbarSeparator as Separator, FloatingToolbarButton as ToolbarButton } from '@atlaskit/editor-common/ui';
-import LinkIcon from '@atlaskit/icon/glyph/editor/link';
+import LinkExternalIcon from '@atlaskit/icon/core/link-external';
+import LinkIcon from '@atlaskit/icon/core/migration/link';
 import OpenIcon from '@atlaskit/icon/glyph/shortcut';
 import { stateKey } from '../pm-plugins/plugin-key';
 import { checkMediaType } from '../utils/check-media-type';
@@ -69,8 +70,11 @@ export const LinkToolbarAppearance = ({
       disabled: !isValidUrl,
       onClick: onOpenLink,
       title: linkTitle,
-      icon: jsx(OpenIcon, {
-        label: linkTitle
+      icon: jsx(LinkExternalIcon, {
+        color: "currentColor",
+        spacing: "spacious",
+        label: linkTitle,
+        LEGACY_fallbackIcon: OpenIcon
       })
       // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
       ,
@@ -87,6 +91,7 @@ export const LinkToolbarAppearance = ({
         keymap: addLink
       }),
       icon: jsx(LinkIcon, {
+        color: "currentColor",
         label: title
       })
     }), jsx(Separator, null)) : null;

package/dist/es2019/toolbar/mediaInline.js

@@ -3,7 +3,11 @@ import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE } from '@atlaskit
 import { IconCard, IconEmbed, IconInline } from '@atlaskit/editor-common/card';
 import commonMessages, { cardMessages, mediaAndEmbedToolbarMessages } from '@atlaskit/editor-common/messages';
 import { NodeSelection } from '@atlaskit/editor-prosemirror/state';
-import DownloadIcon from '@atlaskit/icon/glyph/download';
+import DeleteIcon from '@atlaskit/icon/core/delete';
+import ImageFullscreenIcon from '@atlaskit/icon/core/image-fullscreen';
+import ImageInlineIcon from '@atlaskit/icon/core/image-inline';
+import DownloadIcon from '@atlaskit/icon/core/migration/download';
+import SmartLinkCardIcon from '@atlaskit/icon/core/smart-link-card';
 import FilePreviewIcon from '@atlaskit/icon/glyph/editor/file-preview';
 import RemoveIcon from '@atlaskit/icon/glyph/editor/remove';
 import { messages } from '@atlaskit/media-ui';
@@ -35,7 +39,8 @@ export const generateMediaInlineFloatingToolbar = (state, intl, mediaPluginState
   const items = [{
     id: 'editor.media.view.switcher.inline',
     type: 'button',
-    icon: IconInline,
+    icon: ImageInlineIcon,
+    iconFallback: IconInline,
     selected: true,
     disabled: false,
     focusEditoronEnter: true,
@@ -46,7 +51,8 @@ export const generateMediaInlineFloatingToolbar = (state, intl, mediaPluginState
   }, {
     id: 'editor.media.view.switcher.thumbnail',
     type: 'button',
-    icon: IconCard,
+    icon: SmartLinkCardIcon,
+    iconFallback: IconCard,
     selected: false,
     disabled: false,
     focusEditoronEnter: true,
@@ -94,7 +100,8 @@ export const generateMediaInlineFloatingToolbar = (state, intl, mediaPluginState
     type: 'button',
     appearance: 'danger',
     focusEditoronEnter: true,
-    icon: RemoveIcon,
+    icon: DeleteIcon,
+    iconFallback: RemoveIcon,
     onMouseEnter: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(mediaInline, true),
     onMouseLeave: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(mediaInline, false),
     onFocus: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(mediaInline, true),
@@ -150,9 +157,12 @@ const getMediaInlineImageToolbar = (state, intl, mediaPluginState, hoverDecorati
     id: 'editor.media.convert.mediainline',
     type: 'button',
     title: mediaInlineImageTitle,
-    icon: () => /*#__PURE__*/React.createElement(IconInline, {
-      size: "medium",
-      label: mediaInlineImageTitle
+    icon: () => /*#__PURE__*/React.createElement(ImageInlineIcon, {
+      color: "currentColor",
+      spacing: "spacious",
+      label: mediaInlineImageTitle,
+      LEGACY_size: "medium",
+      LEGACY_fallbackIcon: IconInline
     }),
     onClick: () => {
       return true;
@@ -162,9 +172,12 @@ const getMediaInlineImageToolbar = (state, intl, mediaPluginState, hoverDecorati
     id: 'editor.media.convert.mediasingle',
     type: 'button',
     title: mediaSingleTitle,
-    icon: () => /*#__PURE__*/React.createElement(IconEmbed, {
-      size: "medium",
-      label: mediaSingleTitle
+    icon: () => /*#__PURE__*/React.createElement(ImageFullscreenIcon, {
+      color: "currentColor",
+      spacing: "spacious",
+      label: mediaSingleTitle,
+      LEGACY_size: "medium",
+      LEGACY_fallbackIcon: IconEmbed
     }),
     onClick: changeMediaInlineToMediaSingle(editorAnalyticsAPI, widthPluginState, isNestingInQuoteSupported)
   }, {
@@ -278,7 +291,8 @@ const getMediaInlineImageToolbar = (state, intl, mediaPluginState, hoverDecorati
     type: 'button',
     appearance: 'danger',
     focusEditoronEnter: true,
-    icon: RemoveIcon,
+    icon: DeleteIcon,
+    iconFallback: RemoveIcon,
     onMouseEnter: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(mediaInline, true),
     onMouseLeave: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(mediaInline, false),
     onFocus: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(mediaInline, true),

package/dist/es2019/ui/ImageBorder/index.js

@@ -6,14 +6,20 @@ import { useCallback, useEffect, useRef, useState } from 'react';
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { jsx } from '@emotion/react';
-import { BorderIcon } from '@atlaskit/editor-common/icons';
+import { BorderIcon as LegacyBorderIcon } from '@atlaskit/editor-common/icons';
 import { imageBorderMessages as messages } from '@atlaskit/editor-common/media';
 import { DropdownMenuSharedCssClassName } from '@atlaskit/editor-common/styles';
 import { Popup } from '@atlaskit/editor-common/ui';
 import { borderColorPalette, borderPaletteTooltipMessages, ColorPalette } from '@atlaskit/editor-common/ui-color';
 import { ArrowKeyNavigationProvider, ArrowKeyNavigationType, DropdownMenu, ToolbarButton } from '@atlaskit/editor-common/ui-menu';
 import { hexToEditorBorderPaletteColor } from '@atlaskit/editor-palette';
+import BorderIcon from '@atlaskit/icon/core/border';
+import BorderWeightMediumIcon from '@atlaskit/icon/core/border-weight-medium';
+import BorderWeightThickIcon from '@atlaskit/icon/core/border-weight-thick';
+import BorderWeightThinIcon from '@atlaskit/icon/core/border-weight-thin';
 import ExpandIcon from '@atlaskit/icon/glyph/chevron-down';
+import ChevronDownIcon from '@atlaskit/icon/utility/chevron-down';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { Text } from '@atlaskit/primitives';
 import Tooltip from '@atlaskit/tooltip';
 import { buttonStyle, buttonWrapperStyle, contextualMenuArrow, contextualMenuColorIcon, contextualSubMenu, dropdownOptionButton, dropdownWrapper, itemSpacing, line, menuItemDimensions, toolbarButtonWrapper } from './styles';
@@ -89,14 +95,18 @@ const ImageBorder = ({
   }, [isColorSubmenuOpen, isSizeSubmenuOpen, isOpenByKeyboard]);
   const borderSizeOptions = [{
     name: formatMessage(messages.borderSizeSubtle),
-    value: 1
+    value: 1,
+    icon: BorderWeightThinIcon
   }, {
     name: formatMessage(messages.borderSizeMedium),
-    value: 2
+    value: 2,
+    icon: BorderWeightMediumIcon
   }, {
     name: formatMessage(messages.borderSizeBold),
-    value: 3
+    value: 3,
+    icon: BorderWeightThickIcon
   }];
+  const borderColorSelectStyles = () => !fg('platform-visual-refresh-icons') ? contextualMenuColorIcon(color && hexToEditorBorderPaletteColor(color)) : contextualMenuArrow;
   const items = [{
     content: jsx("div", null, jsx("button", {
       ref: dropDownColorOptionButton,
@@ -109,7 +119,7 @@ const ImageBorder = ({
       "aria-expanded": isColorSubmenuOpen,
       onKeyDown: e => handleTriggerByKeyboard(e, () => setIsColorSubmenuOpen(!isColorSubmenuOpen))
     }, jsx(Text, null, formatMessage(messages.borderColor)), jsx("div", {
-      css: contextualMenuColorIcon(color && hexToEditorBorderPaletteColor(color))
+      css: borderColorSelectStyles
     })), jsx("div", {
       // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
       className: DropdownMenuSharedCssClassName.SUBMENU,
@@ -189,44 +199,54 @@ const ImageBorder = ({
       ref: handleSubMenuRef
     }, borderSizeOptions.map(({
       name,
-      value
-    }, idx) => jsx(Tooltip, {
-      key: idx,
-      content: name
-    }, jsx("span", {
-      css: buttonWrapperStyle
-    }, jsx("button", {
-      type: "button"
-      /* eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766 */,
-      css: buttonStyle(value === size),
-      "aria-label": name,
-      role: "radio",
-      "aria-checked": value === size,
-      onClick: () => {
-        setBorder({
-          size: value
-        });
-        setIsOpen(false);
-      },
-      onKeyDown: event => {
-        if (event.key === 'Enter' || event.key === ' ') {
-          var _openDropdownButtonRe2;
+      value,
+      icon
+    }, idx) => {
+      const ButtonIcon = icon;
+      return jsx(Tooltip, {
+        key: idx,
+        content: name
+      }, jsx("span", {
+        css: buttonWrapperStyle
+      }, jsx("button", {
+        type: "button"
+        /* eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766 */,
+        css: buttonStyle(value === size),
+        "aria-label": name,
+        role: "radio",
+        "aria-checked": value === size,
+        onClick: () => {
           setBorder({
             size: value
           });
           setIsOpen(false);
-          setIsColorSubmenuOpen(false);
-          setIsSizeSubmenuOpen(false);
-          (_openDropdownButtonRe2 = openDropdownButtonRef.current) === null || _openDropdownButtonRe2 === void 0 ? void 0 : _openDropdownButtonRe2.focus();
+        },
+        onKeyDown: event => {
+          if (event.key === 'Enter' || event.key === ' ') {
+            var _openDropdownButtonRe2;
+            setBorder({
+              size: value
+            });
+            setIsOpen(false);
+            setIsColorSubmenuOpen(false);
+            setIsSizeSubmenuOpen(false);
+            (_openDropdownButtonRe2 = openDropdownButtonRef.current) === null || _openDropdownButtonRe2 === void 0 ? void 0 : _openDropdownButtonRe2.focus();
+          }
+        },
+        onMouseDown: e => {
+          e.preventDefault();
         }
-      },
-      onMouseDown: e => {
-        e.preventDefault();
-      }
-    }, jsx("div", {
-      css: line(value, value === size),
-      role: "presentation"
-    }))))))))),
+      }, !fg('platform-visual-refresh-icons') ?
+      //eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
+      jsx("div", {
+        css: line(value, value === size),
+        role: "presentation"
+      }) : jsx(ButtonIcon, {
+        color: value === size ? "var(--ds-icon-inverse, #FFFFFF)" : 'currentColor',
+        spacing: "spacious",
+        label: name
+      }))));
+    }))))),
     'data-testid': 'dropdown-item__Size',
     key: 'dropdown-menu-image-border-size-button',
     value: {
@@ -259,7 +279,10 @@ const ImageBorder = ({
     spacing: "compact",
     "aria-label": enabled ? formatMessage(messages.removeBorder) : formatMessage(messages.addBorder),
     iconBefore: jsx(BorderIcon, {
-      label: ""
+      color: "currentColor",
+      label: "",
+      spacing: "spacious",
+      LEGACY_fallbackIcon: LegacyBorderIcon
     }),
     title: enabled ? formatMessage(messages.removeBorder) : formatMessage(messages.addBorder)
   }), jsx("div", {
@@ -274,8 +297,11 @@ const ImageBorder = ({
     "aria-label": formatMessage(messages.borderOptions),
     title: formatMessage(messages.borderOptions),
     spacing: "compact",
-    iconBefore: jsx(ExpandIcon, {
-      label: ""
+    iconBefore: jsx(ChevronDownIcon, {
+      color: "currentColor",
+      spacing: "spacious",
+      label: "",
+      LEGACY_fallbackIcon: ExpandIcon
     }),
     onClick: () => {
       setIsOpen(!isOpen);

package/dist/esm/nodeviews/mediaNodeView/media.js

@@ -233,7 +233,9 @@ export var MediaNode = /*#__PURE__*/function (_Component) {
       if (isLoading || type !== 'external' && !viewMediaClientConfig) {
         return /*#__PURE__*/React.createElement(MediaCardWrapper, {
           dimensions: originalDimensions
-        }, /*#__PURE__*/React.createElement(CardLoading, null));
+        }, /*#__PURE__*/React.createElement(CardLoading, {
+          interactionName: "editor-media-card-loading"
+        }));
       }
       var contextId = contextIdentifierProvider && contextIdentifierProvider.objectId;
       var identifier = type === 'external' ? {

package/dist/esm/toolbar/comments.js

@@ -2,7 +2,8 @@ import React from 'react';
 import { INPUT_METHOD, VIEW_METHOD } from '@atlaskit/editor-common/analytics';
 import { ToolTipContent } from '@atlaskit/editor-common/keymaps';
 import { commentMessages as messages } from '@atlaskit/editor-common/media';
-import CommentIcon from '@atlaskit/icon/glyph/comment';
+import CommentIcon from '@atlaskit/icon/core/comment';
+import LegacyCommentIcon from '@atlaskit/icon/glyph/comment';
 import { CommentWithDotIcon } from './assets/commentWithDotIcon';
 import { getSelectedMediaSingle } from './utils';
 export var commentButton = function commentButton(intl, state, api) {
@@ -33,7 +34,8 @@ export var commentButton = function commentButton(intl, state, api) {
   return {
     type: 'button',
     testId: 'add-comment-media-button',
-    icon: hasActiveComments ? CommentWithDotIcon : CommentIcon,
+    icon: CommentIcon,
+    iconFallback: hasActiveComments ? CommentWithDotIcon : LegacyCommentIcon,
     title: title,
     onClick: onClickHandler,
     tooltipContent: /*#__PURE__*/React.createElement(ToolTipContent, {

package/dist/esm/toolbar/filePreviewItem.js

@@ -1,6 +1,7 @@
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import React, { useState } from 'react';
 import { FloatingToolbarButton as ToolbarButton } from '@atlaskit/editor-common/ui';
+import MaximizeIcon from '@atlaskit/icon/core/maximize';
 import FilePreviewIcon from '@atlaskit/icon/glyph/editor/file-preview';
 import { messages } from '@atlaskit/media-ui';
 import { RenderMediaViewer } from '../ui/MediaViewer/PortalWrapper';
@@ -26,8 +27,11 @@ export var FilePreviewItem = function FilePreviewItem(_ref) {
     testId: "file-preview-toolbar-button",
     key: "editor.media.card.preview",
     onClick: showMediaViewer,
-    icon: /*#__PURE__*/React.createElement(FilePreviewIcon, {
-      label: "file preview"
+    icon: /*#__PURE__*/React.createElement(MaximizeIcon, {
+      color: "currentColor",
+      spacing: "spacious",
+      label: "file preview",
+      LEGACY_fallbackIcon: FilePreviewIcon
     }),
     tooltipContent: tooltipContent
   }), shouldRenderMediaViewer && /*#__PURE__*/React.createElement(RenderMediaViewer, {

package/dist/esm/toolbar/index.js

@@ -12,7 +12,11 @@ import commonMessages, { cardMessages, mediaAndEmbedToolbarMessages } from '@atl
 import { NodeSelection } from '@atlaskit/editor-prosemirror/state';
 import { contains, findParentNodeOfType, hasParentNode, hasParentNodeOfType, removeSelectedNode } from '@atlaskit/editor-prosemirror/utils';
 import { akEditorDefaultLayoutWidth, akEditorFullWidthLayoutWidth } from '@atlaskit/editor-shared-styles';
-import DownloadIcon from '@atlaskit/icon/glyph/download';
+import DeleteIcon from '@atlaskit/icon/core/delete';
+import ImageFullscreenIcon from '@atlaskit/icon/core/image-fullscreen';
+import ImageInlineIcon from '@atlaskit/icon/core/image-inline';
+import MaximizeIcon from '@atlaskit/icon/core/maximize';
+import DownloadIcon from '@atlaskit/icon/core/migration/download';
 import FilePreviewIcon from '@atlaskit/icon/glyph/editor/file-preview';
 import RemoveIcon from '@atlaskit/icon/glyph/editor/remove';
 import { mediaFilmstripItemDOMSelector } from '@atlaskit/media-filmstrip';
@@ -115,7 +119,8 @@ var generateMediaCardFloatingToolbar = function generateMediaCardFloatingToolbar
   }, fg('platform_editor_media_previewer_bugfix') ? {
     id: 'editor.media.viewer',
     type: 'button',
-    icon: FilePreviewIcon,
+    icon: MaximizeIcon,
+    iconFallback: FilePreviewIcon,
     title: intl.formatMessage(messages.preview),
     onClick: function onClick() {
       var _handleShowMediaViewe;
@@ -152,7 +157,8 @@ var generateMediaCardFloatingToolbar = function generateMediaCardFloatingToolbar
     type: 'button',
     appearance: 'danger',
     focusEditoronEnter: true,
-    icon: RemoveIcon,
+    icon: DeleteIcon,
+    iconFallback: RemoveIcon,
     onMouseEnter: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(mediaGroup, true),
     onMouseLeave: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(mediaGroup, false),
     onFocus: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(mediaGroup, true),
@@ -271,9 +277,12 @@ var generateMediaSingleFloatingToolbar = function generateMediaSingleFloatingToo
           id: 'editor.media.image.view.switcher.inline',
           title: inlineSwitcherTitle,
           icon: function icon() {
-            return /*#__PURE__*/React.createElement(IconInline, {
-              size: "medium",
-              label: inlineSwitcherTitle
+            return /*#__PURE__*/React.createElement(ImageInlineIcon, {
+              color: "currentColor",
+              spacing: "spacious",
+              label: inlineSwitcherTitle,
+              LEGACY_size: "medium",
+              LEGACY_fallbackIcon: IconInline
             });
           },
           onClick: changeMediaSingleToMediaInline(pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$a4 = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a4 === void 0 ? void 0 : _pluginInjectionApi$a4.actions),
@@ -283,9 +292,12 @@ var generateMediaSingleFloatingToolbar = function generateMediaSingleFloatingToo
           id: 'editor.media.image.view.switcher.floating',
           title: floatingSwitcherTitle,
           icon: function icon() {
-            return /*#__PURE__*/React.createElement(IconEmbed, {
-              size: "medium",
-              label: floatingSwitcherTitle
+            return /*#__PURE__*/React.createElement(ImageFullscreenIcon, {
+              color: "currentColor",
+              spacing: "spacious",
+              label: floatingSwitcherTitle,
+              LEGACY_size: "medium",
+              LEGACY_fallbackIcon: IconEmbed
             });
           },
           onClick: function onClick() {
@@ -459,7 +471,8 @@ var generateMediaSingleFloatingToolbar = function generateMediaSingleFloatingToo
         toolbarButtons.push(fg('platform_editor_media_previewer_bugfix') ? {
           id: 'editor.media.viewer',
           type: 'button',
-          icon: FilePreviewIcon,
+          icon: MaximizeIcon,
+          iconFallback: FilePreviewIcon,
           title: intl.formatMessage(messages.preview),
           onClick: function onClick() {
             var _handleShowMediaViewe2;

package/dist/esm/toolbar/linking-toolbar-appearance.js

@@ -11,7 +11,8 @@ import { isSafeUrl } from '@atlaskit/adf-schema';
 import { addLink, ToolTipContent } from '@atlaskit/editor-common/keymaps';
 import { linkMessages, linkToolbarMessages } from '@atlaskit/editor-common/messages';
 import { FloatingToolbarSeparator as Separator, FloatingToolbarButton as ToolbarButton } from '@atlaskit/editor-common/ui';
-import LinkIcon from '@atlaskit/icon/glyph/editor/link';
+import LinkExternalIcon from '@atlaskit/icon/core/link-external';
+import LinkIcon from '@atlaskit/icon/core/migration/link';
 import OpenIcon from '@atlaskit/icon/glyph/shortcut';
 import { stateKey } from '../pm-plugins/plugin-key';
 import { checkMediaType } from '../utils/check-media-type';
@@ -72,8 +73,11 @@ export var LinkToolbarAppearance = function LinkToolbarAppearance(_ref) {
       disabled: !isValidUrl,
       onClick: onOpenLink,
       title: linkTitle,
-      icon: jsx(OpenIcon, {
-        label: linkTitle
+      icon: jsx(LinkExternalIcon, {
+        color: "currentColor",
+        spacing: "spacious",
+        label: linkTitle,
+        LEGACY_fallbackIcon: OpenIcon
       })
       // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
       ,
@@ -90,6 +94,7 @@ export var LinkToolbarAppearance = function LinkToolbarAppearance(_ref) {
         keymap: addLink
       }),
       icon: jsx(LinkIcon, {
+        color: "currentColor",
         label: _title
       })
     }), jsx(Separator, null)) : null;

package/dist/esm/toolbar/mediaInline.js

@@ -3,7 +3,11 @@ import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE } from '@atlaskit
 import { IconCard, IconEmbed, IconInline } from '@atlaskit/editor-common/card';
 import commonMessages, { cardMessages, mediaAndEmbedToolbarMessages } from '@atlaskit/editor-common/messages';
 import { NodeSelection } from '@atlaskit/editor-prosemirror/state';
-import DownloadIcon from '@atlaskit/icon/glyph/download';
+import DeleteIcon from '@atlaskit/icon/core/delete';
+import ImageFullscreenIcon from '@atlaskit/icon/core/image-fullscreen';
+import ImageInlineIcon from '@atlaskit/icon/core/image-inline';
+import DownloadIcon from '@atlaskit/icon/core/migration/download';
+import SmartLinkCardIcon from '@atlaskit/icon/core/smart-link-card';
 import FilePreviewIcon from '@atlaskit/icon/glyph/editor/file-preview';
 import RemoveIcon from '@atlaskit/icon/glyph/editor/remove';
 import { messages } from '@atlaskit/media-ui';
@@ -34,7 +38,8 @@ export var generateMediaInlineFloatingToolbar = function generateMediaInlineFloa
   var items = [{
     id: 'editor.media.view.switcher.inline',
     type: 'button',
-    icon: IconInline,
+    icon: ImageInlineIcon,
+    iconFallback: IconInline,
     selected: true,
     disabled: false,
     focusEditoronEnter: true,
@@ -47,7 +52,8 @@ export var generateMediaInlineFloatingToolbar = function generateMediaInlineFloa
   }, {
     id: 'editor.media.view.switcher.thumbnail',
     type: 'button',
-    icon: IconCard,
+    icon: SmartLinkCardIcon,
+    iconFallback: IconCard,
     selected: false,
     disabled: false,
     focusEditoronEnter: true,
@@ -95,7 +101,8 @@ export var generateMediaInlineFloatingToolbar = function generateMediaInlineFloa
     type: 'button',
     appearance: 'danger',
     focusEditoronEnter: true,
-    icon: RemoveIcon,
+    icon: DeleteIcon,
+    iconFallback: RemoveIcon,
     onMouseEnter: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(mediaInline, true),
     onMouseLeave: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(mediaInline, false),
     onFocus: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(mediaInline, true),
@@ -149,9 +156,12 @@ var getMediaInlineImageToolbar = function getMediaInlineImageToolbar(state, intl
     type: 'button',
     title: mediaInlineImageTitle,
     icon: function icon() {
-      return /*#__PURE__*/React.createElement(IconInline, {
-        size: "medium",
-        label: mediaInlineImageTitle
+      return /*#__PURE__*/React.createElement(ImageInlineIcon, {
+        color: "currentColor",
+        spacing: "spacious",
+        label: mediaInlineImageTitle,
+        LEGACY_size: "medium",
+        LEGACY_fallbackIcon: IconInline
       });
     },
     onClick: function onClick() {
@@ -163,9 +173,12 @@ var getMediaInlineImageToolbar = function getMediaInlineImageToolbar(state, intl
     type: 'button',
     title: mediaSingleTitle,
     icon: function icon() {
-      return /*#__PURE__*/React.createElement(IconEmbed, {
-        size: "medium",
-        label: mediaSingleTitle
+      return /*#__PURE__*/React.createElement(ImageFullscreenIcon, {
+        color: "currentColor",
+        spacing: "spacious",
+        label: mediaSingleTitle,
+        LEGACY_size: "medium",
+        LEGACY_fallbackIcon: IconEmbed
       });
     },
     onClick: changeMediaInlineToMediaSingle(editorAnalyticsAPI, widthPluginState, isNestingInQuoteSupported)
@@ -274,7 +287,8 @@ var getMediaInlineImageToolbar = function getMediaInlineImageToolbar(state, intl
     type: 'button',
     appearance: 'danger',
     focusEditoronEnter: true,
-    icon: RemoveIcon,
+    icon: DeleteIcon,
+    iconFallback: RemoveIcon,
     onMouseEnter: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(mediaInline, true),
     onMouseLeave: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(mediaInline, false),
     onFocus: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(mediaInline, true),

package/dist/esm/ui/ImageBorder/index.js

@@ -7,14 +7,20 @@ import { useCallback, useEffect, useRef, useState } from 'react';
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { jsx } from '@emotion/react';
-import { BorderIcon } from '@atlaskit/editor-common/icons';
+import { BorderIcon as LegacyBorderIcon } from '@atlaskit/editor-common/icons';
 import { imageBorderMessages as messages } from '@atlaskit/editor-common/media';
 import { DropdownMenuSharedCssClassName } from '@atlaskit/editor-common/styles';
 import { Popup } from '@atlaskit/editor-common/ui';
 import { borderColorPalette, borderPaletteTooltipMessages, ColorPalette } from '@atlaskit/editor-common/ui-color';
 import { ArrowKeyNavigationProvider, ArrowKeyNavigationType, DropdownMenu, ToolbarButton } from '@atlaskit/editor-common/ui-menu';
 import { hexToEditorBorderPaletteColor } from '@atlaskit/editor-palette';
+import BorderIcon from '@atlaskit/icon/core/border';
+import BorderWeightMediumIcon from '@atlaskit/icon/core/border-weight-medium';
+import BorderWeightThickIcon from '@atlaskit/icon/core/border-weight-thick';
+import BorderWeightThinIcon from '@atlaskit/icon/core/border-weight-thin';
 import ExpandIcon from '@atlaskit/icon/glyph/chevron-down';
+import ChevronDownIcon from '@atlaskit/icon/utility/chevron-down';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { Text } from '@atlaskit/primitives';
 import Tooltip from '@atlaskit/tooltip';
 import { buttonStyle, buttonWrapperStyle, contextualMenuArrow, contextualMenuColorIcon, contextualSubMenu, dropdownOptionButton, dropdownWrapper, itemSpacing, line, menuItemDimensions, toolbarButtonWrapper } from './styles';
@@ -99,14 +105,20 @@ var ImageBorder = function ImageBorder(_ref) {
   }, [isColorSubmenuOpen, isSizeSubmenuOpen, isOpenByKeyboard]);
   var borderSizeOptions = [{
     name: formatMessage(messages.borderSizeSubtle),
-    value: 1
+    value: 1,
+    icon: BorderWeightThinIcon
   }, {
     name: formatMessage(messages.borderSizeMedium),
-    value: 2
+    value: 2,
+    icon: BorderWeightMediumIcon
   }, {
     name: formatMessage(messages.borderSizeBold),
-    value: 3
+    value: 3,
+    icon: BorderWeightThickIcon
   }];
+  var borderColorSelectStyles = function borderColorSelectStyles() {
+    return !fg('platform-visual-refresh-icons') ? contextualMenuColorIcon(color && hexToEditorBorderPaletteColor(color)) : contextualMenuArrow;
+  };
   var items = [{
     content: jsx("div", null, jsx("button", {
       ref: dropDownColorOptionButton,
@@ -123,7 +135,7 @@ var ImageBorder = function ImageBorder(_ref) {
         });
       }
     }, jsx(Text, null, formatMessage(messages.borderColor)), jsx("div", {
-      css: contextualMenuColorIcon(color && hexToEditorBorderPaletteColor(color))
+      css: borderColorSelectStyles
     })), jsx("div", {
       // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
       className: DropdownMenuSharedCssClassName.SUBMENU,
@@ -207,7 +219,9 @@ var ImageBorder = function ImageBorder(_ref) {
       ref: handleSubMenuRef
     }, borderSizeOptions.map(function (_ref2, idx) {
       var name = _ref2.name,
-        value = _ref2.value;
+        value = _ref2.value,
+        icon = _ref2.icon;
+      var ButtonIcon = icon;
       return jsx(Tooltip, {
         key: idx,
         content: name
@@ -241,9 +255,15 @@ var ImageBorder = function ImageBorder(_ref) {
         onMouseDown: function onMouseDown(e) {
           e.preventDefault();
         }
-      }, jsx("div", {
+      }, !fg('platform-visual-refresh-icons') ?
+      //eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
+      jsx("div", {
         css: line(value, value === size),
         role: "presentation"
+      }) : jsx(ButtonIcon, {
+        color: value === size ? "var(--ds-icon-inverse, #FFFFFF)" : 'currentColor',
+        spacing: "spacious",
+        label: name
       }))));
     }))))),
     'data-testid': 'dropdown-item__Size',
@@ -278,7 +298,10 @@ var ImageBorder = function ImageBorder(_ref) {
     spacing: "compact",
     "aria-label": enabled ? formatMessage(messages.removeBorder) : formatMessage(messages.addBorder),
     iconBefore: jsx(BorderIcon, {
-      label: ""
+      color: "currentColor",
+      label: "",
+      spacing: "spacious",
+      LEGACY_fallbackIcon: LegacyBorderIcon
     }),
     title: enabled ? formatMessage(messages.removeBorder) : formatMessage(messages.addBorder)
   }), jsx("div", {
@@ -293,8 +316,11 @@ var ImageBorder = function ImageBorder(_ref) {
     "aria-label": formatMessage(messages.borderOptions),
     title: formatMessage(messages.borderOptions),
     spacing: "compact",
-    iconBefore: jsx(ExpandIcon, {
-      label: ""
+    iconBefore: jsx(ChevronDownIcon, {
+      color: "currentColor",
+      spacing: "spacious",
+      label: "",
+      LEGACY_fallbackIcon: ExpandIcon
     }),
     onClick: function onClick() {
       setIsOpen(!isOpen);

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-media",
-	"version": "1.36.1",
+	"version": "1.36.3",
 	"description": "Media plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -39,7 +39,7 @@
 		"@atlaskit/editor-common": "^93.5.0",
 		"@atlaskit/editor-palette": "1.6.1",
 		"@atlaskit/editor-plugin-analytics": "^1.10.0",
-		"@atlaskit/editor-plugin-annotation": "1.21.0",
+		"@atlaskit/editor-plugin-annotation": "1.21.1",
 		"@atlaskit/editor-plugin-decorations": "^1.3.0",
 		"@atlaskit/editor-plugin-editor-disabled": "^1.3.0",
 		"@atlaskit/editor-plugin-editor-viewmode": "^2.1.0",
@@ -54,14 +54,14 @@
 		"@atlaskit/editor-tables": "^2.8.0",
 		"@atlaskit/form": "^10.5.0",
 		"@atlaskit/icon": "^22.22.0",
-		"@atlaskit/media-card": "^78.6.0",
+		"@atlaskit/media-card": "^78.7.0",
 		"@atlaskit/media-client": "^28.0.0",
 		"@atlaskit/media-client-react": "^2.2.0",
 		"@atlaskit/media-common": "^11.6.0",
 		"@atlaskit/media-filmstrip": "^47.4.0",
 		"@atlaskit/media-picker": "^66.7.0",
-		"@atlaskit/media-ui": "^25.15.0",
-		"@atlaskit/media-viewer": "^49.1.0",
+		"@atlaskit/media-ui": "^25.16.0",
+		"@atlaskit/media-viewer": "^49.2.0",
 		"@atlaskit/platform-feature-flags": "^0.3.0",
 		"@atlaskit/primitives": "^12.2.0",
 		"@atlaskit/textfield": "^6.5.0",
@@ -139,6 +139,9 @@
 		},
 		"editor_nest_media_and_codeblock_in_quotes_jira": {
 			"type": "boolean"
+		},
+		"platform-visual-refresh-icons": {
+			"type": "boolean"
 		}
 	},
 	"stricter": {