@atlaskit/editor-plugin-media 10.1.3 → 10.1.4

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @atlaskit/editor-plugin-media
 
+## 10.1.4
+
+### 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
+
 ## 10.1.3
 
 ### Patch Changes

package/dist/cjs/nodeviews/toDOM-fixes/mediaSingle.js

@@ -8,7 +8,6 @@ exports.prepareWrapperContentDOM = exports.mediaWidthCSSCalc = exports.mediaSing
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _adfSchema = require("@atlaskit/adf-schema");
 var _lazyNodeView = require("@atlaskit/editor-common/lazy-node-view");
-var _colors = require("@atlaskit/theme/colors");
 var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
 var _toDOMAttrs = require("./toDOMAttrs");
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
@@ -152,7 +151,7 @@ var prepareWrapperContentDOM = exports.prepareWrapperContentDOM = function prepa
       borderRadius: "var(--ds-radius-small, 3px)",
       width: mediaWidthCalc,
       minWidth: mediaWidthCalc,
-      color: "var(--ds-icon, ".concat(_colors.N50, ")")
+      color: "var(--ds-icon, #292A2E)"
     })
   }, ['figure', {
     class: 'media-single-node',
@@ -207,7 +206,7 @@ var getToDom = exports.getToDom = function getToDom(allowPixelResizing) {
         '--ak-editor-media-card-display': 'block',
         '--ak-editor-media-single--gutter-size': GUTTER_SIZE,
         '--ak-editor-media-margin-right': '0',
-        '--ak-editor-media-card-background-color': "var(--ds-background-neutral, ".concat(_colors.N20, ")"),
+        '--ak-editor-media-card-background-color': "var(--ds-background-neutral, #0515240F)",
         marginTop: isMediaWrapped ? HALF_GUTTER_SIZE : "var(--ds-space-300, 24px)",
         marginBottom: isMediaWrapped ? HALF_GUTTER_SIZE : "var(--ds-space-300, 24px)",
         marginRight: isMediaWrapped ? layout === 'wrap-right' ? 'auto' : HALF_GUTTER_SIZE : 0,

package/dist/cjs/pm-plugins/alt-text/ui/AltTextEdit.js

@@ -23,7 +23,6 @@ var _ui = require("@atlaskit/editor-common/ui");
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
 var _chevronLeft = _interopRequireDefault(require("@atlaskit/icon/core/chevron-left"));
 var _crossCircle = _interopRequireDefault(require("@atlaskit/icon/core/cross-circle"));
-var _colors = require("@atlaskit/theme/colors");
 var _commands = require("../commands");
 function _callSuper(t, o, e) { return o = (0, _getPrototypeOf2.default)(o), (0, _possibleConstructorReturn2.default)(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], (0, _getPrototypeOf2.default)(t).constructor) : o.apply(t, e)); }
 function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); } /**
@@ -33,13 +32,13 @@ function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.
 var MAX_ALT_TEXT_LENGTH = exports.MAX_ALT_TEXT_LENGTH = 510; // double tweet length
 
 var supportTextStyles = (0, _react2.css)({
-  color: "var(--ds-text-subtlest, ".concat(_colors.N200, ")"),
+  color: "var(--ds-text-subtlest, #6B6E76)",
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
   fontSize: (0, _editorSharedStyles.relativeFontSizeToBase16)(12),
   padding: "var(--ds-space-150, 12px)".concat(" ", "var(--ds-space-500, 40px)"),
   // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
   lineHeight: '20px',
-  borderTop: "var(--ds-border-width, 1px)".concat(" solid ", "var(--ds-border, ".concat(_colors.N30, ")")),
+  borderTop: "var(--ds-border-width, 1px)".concat(" solid ", "var(--ds-border, #0B120E24)"),
   margin: 0
 });
 var containerStyles = (0, _react2.css)({
@@ -64,7 +63,7 @@ var validationWrapperStyles = (0, _react2.css)({
   lineHeight: 0,
   padding: "var(--ds-space-150, 12px)".concat(" ", "var(--ds-space-300, 24px)", " ", "var(--ds-space-150, 12px)", " 0"),
   margin: "0 ".concat("var(--ds-space-150, 12px)", " 0 ", "var(--ds-space-500, 40px)"),
-  borderTop: "var(--ds-border-width, 1px)".concat(" solid ", "var(--ds-border-danger, ".concat(_colors.R400, ")")),
+  borderTop: "var(--ds-border-width, 1px)".concat(" solid ", "var(--ds-border-danger, #E2483D)"),
   alignItems: 'start',
   flexDirection: 'column'
 });
@@ -73,7 +72,7 @@ var buttonWrapperStyles = (0, _react2.css)({
   padding: "var(--ds-space-050, 4px)".concat(" ", "var(--ds-space-100, 8px)")
 });
 var clearTextStyles = (0, _react2.css)({
-  color: "var(--ds-icon-subtle, ".concat(_colors.N80, ")")
+  color: "var(--ds-icon-subtle, #505258)"
 });
 // eslint-disable-next-line @repo/internal/react/no-class-components
 var AltTextEditComponent = exports.AltTextEditComponent = /*#__PURE__*/function (_React$Component) {

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

@@ -14,7 +14,6 @@ var _media = require("@atlaskit/editor-common/media");
 var _mediaSingle = require("@atlaskit/editor-common/media-single");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _primitives = require("@atlaskit/primitives");
-var _colors = require("@atlaskit/theme/colors");
 var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
 var _templateObject;
 /**
@@ -25,7 +24,7 @@ var _templateObject;
 // eslint-disable-next-line @atlaskit/design-system/no-emotion-primitives -- to be migrated to @atlaskit/primitives/compiled – go/akcss
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
 // eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression, @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
-var placeholder = (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n\tcolor: ", ";\n\twidth: 100%;\n\ttext-align: center;\n\tmargin-top: ", " !important;\n\tdisplay: block;\n"])), "var(--ds-text-subtlest, ".concat(_colors.N200, ")"), "var(--ds-space-100, 8px)");
+var placeholder = (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n\tcolor: ", ";\n\twidth: 100%;\n\ttext-align: center;\n\tmargin-top: ", " !important;\n\tdisplay: block;\n"])), "var(--ds-text-subtlest, #6B6E76)", "var(--ds-space-100, 8px)");
 var placeholderText = (0, _react2.css)({
   color: "var(--ds-text-subtlest, #6B6E76)"
 });

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

@@ -1,7 +1,6 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -9,14 +8,9 @@ exports.toolbarButtonWrapper = exports.menuItemDimensions = exports.line = expor
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 var _react = require("@emotion/react");
 var _uiColor = require("@atlaskit/editor-common/ui-color");
-var _colors = _interopRequireWildcard(require("@atlaskit/theme/colors"));
-var colors = _colors;
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9;
 /* eslint-disable @atlaskit/design-system/no-css-tagged-template-expression -- Needs manual remediation*/
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-// Ignored via go/ees005
-// eslint-disable-next-line import/no-namespace
-function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
 // menuItemDimensions and itemSpacing are copied from
 // packages/editor/editor-core/src/plugins/floating-toolbar/ui/DropdownMenu.tsx
 
@@ -29,24 +23,24 @@ var menuItemDimensions = exports.menuItemDimensions = {
 var itemSpacing = exports.itemSpacing = 4;
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
-var contextualMenuArrow = exports.contextualMenuArrow = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n\tdisplay: flex;\n\t&::after {\n\t\tcontent: '\u203A';\n\t\tmargin-left: ", ";\n\t\tline-height: 20px;\n\t\tcolor: ", ";\n\t}\n"])), "var(--ds-space-050, 4px)", "var(--ds-icon, ".concat(_colors.N90, ")"));
+var contextualMenuArrow = exports.contextualMenuArrow = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n\tdisplay: flex;\n\t&::after {\n\t\tcontent: '\u203A';\n\t\tmargin-left: ", ";\n\t\tline-height: 20px;\n\t\tcolor: ", ";\n\t}\n"])), "var(--ds-space-050, 4px)", "var(--ds-icon, #292A2E)");
 var contextualMenuColorIcon = exports.contextualMenuColorIcon = function contextualMenuColorIcon(color) {
-  return (0, _react.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n\t", "\n\t&::before {\n\t\tcontent: '';\n\t\tdisplay: block;\n\t\tborder: 1px solid ", ";\n\t\tborder-radius: ", ";\n\t\twidth: 20px;\n\t\theight: 20px;\n\t\t", "\n\t}\n"])), contextualMenuArrow, _uiColor.DEFAULT_BORDER_COLOR, "var(--ds-radius-small, 3px)", color && "background: ".concat(color));
+  return (0, _react.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n\t", "\n\t&::before {\n\t\tcontent: '';\n\t\tdisplay: block;\n\t\tborder: ", " solid ", ";\n\t\tborder-radius: ", ";\n\t\twidth: 20px;\n\t\theight: 20px;\n\t\t", "\n\t}\n"])), contextualMenuArrow, "var(--ds-border-width, 1px)", _uiColor.DEFAULT_BORDER_COLOR, "var(--ds-radius-small, 3px)", color && "background: ".concat(color));
 };
 var contextualSubMenu = exports.contextualSubMenu = function contextualSubMenu(index) {
-  return (0, _react.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n\tborder-radius: ", ";\n\tbackground: ", ";\n\tbox-shadow: ", ";\n\tdisplay: flex;\n\tposition: absolute;\n\ttop: ", "px;\n\tleft: ", "px;\n\tpadding: ", ";\n\n\t> div {\n\t\tpadding: 0;\n\t}\n"])), "var(--ds-radius-small, 3px)", "var(--ds-surface-overlay, white)", "var(--ds-shadow-overlay, ".concat("0 4px 8px -2px ".concat(_colors.N60A, ", 0 0 1px ").concat(_colors.N60A), ")"), index * (menuItemDimensions.height + itemSpacing * 2), menuItemDimensions.width, "var(--ds-space-100, 8px)");
+  return (0, _react.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n\tborder-radius: ", ";\n\tbackground: ", ";\n\tbox-shadow: ", ";\n\tdisplay: flex;\n\tposition: absolute;\n\ttop: ", "px;\n\tleft: ", "px;\n\tpadding: ", ";\n\n\t> div {\n\t\tpadding: 0;\n\t}\n"])), "var(--ds-radius-small, 3px)", "var(--ds-surface-overlay, #FFFFFF)", "var(--ds-shadow-overlay, 0px 8px 12px #1E1F2126, 0px 0px 1px #1E1F214f)", index * (menuItemDimensions.height + itemSpacing * 2), menuItemDimensions.width, "var(--ds-space-100, 8px)");
 };
 var buttonStyle = exports.buttonStyle = function buttonStyle(selected) {
-  return (0, _react.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n\theight: 26px;\n\twidth: 26px;\n\tpadding: 0;\n\tborder-radius: 4px;\n\tbackground-color: ", ";\n\tborder: 1px solid ", ";\n\tcursor: pointer;\n\tdisplay: block;\n"])), selected ? "var(--ds-text, ".concat(_colors.N800, ")") : "var(--ds-background-neutral, ".concat(_colors.N20A, ")"), _uiColor.DEFAULT_BORDER_COLOR);
+  return (0, _react.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n\theight: 26px;\n\twidth: 26px;\n\tpadding: 0;\n\tborder-radius: ", ";\n\tbackground-color: ", ";\n\tborder: 1px solid ", ";\n\tcursor: pointer;\n\tdisplay: block;\n"])), "var(--ds-radius-small, 4px)", selected ? "var(--ds-text, #292A2E)" : "var(--ds-background-neutral, #0515240F)", _uiColor.DEFAULT_BORDER_COLOR);
 };
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
-var buttonWrapperStyle = exports.buttonWrapperStyle = (0, _react.css)(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n\tborder: 1px solid transparent;\n\tmargin: ", ";\n\tfont-size: 0;\n\tdisplay: flex;\n\talign-items: center;\n\tpadding: ", ";\n\tborder-radius: 6px;\n\t&:focus-within,\n\t&:focus,\n\t&:hover {\n\t\tborder-color: ", " !important;\n\t}\n"])), "var(--ds-space-025, 2px)", "var(--ds-space-025, 2px)", "var(--ds-border, ".concat(_colors.N50, ")"));
+var buttonWrapperStyle = exports.buttonWrapperStyle = (0, _react.css)(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n\tborder: 1px solid transparent;\n\tmargin: ", ";\n\tfont-size: 0;\n\tdisplay: flex;\n\talign-items: center;\n\tpadding: ", ";\n\tborder-radius: ", ";\n\t&:focus-within,\n\t&:focus,\n\t&:hover {\n\t\tborder-color: ", " !important;\n\t}\n"])), "var(--ds-space-025, 2px)", "var(--ds-space-025, 2px)", "var(--ds-radius-medium, 6px)", "var(--ds-border, #0B120E24)");
 var line = exports.line = function line(size, selected) {
-  return (0, _react.css)(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n\tposition: relative;\n\t&:before {\n\t\tcontent: '';\n\t\tdisplay: block;\n\t\tposition: absolute;\n\t\ttop: 50%;\n\t\tleft: 50%;\n\t\twidth: 12px;\n\t\theight: ", "px;\n\t\tbackground-color: ", ";\n\t\tborder-radius: 90px;\n\t\ttransform: translate(-50%, -50%) rotate(135deg);\n\t}\n"])), size, selected ? "var(--ds-icon-inverse, ".concat(_colors.N0, ")") : "var(--ds-icon, #44546F)");
+  return (0, _react.css)(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n\tposition: relative;\n\t&:before {\n\t\tcontent: '';\n\t\tdisplay: block;\n\t\tposition: absolute;\n\t\ttop: 50%;\n\t\tleft: 50%;\n\t\twidth: 12px;\n\t\theight: ", "px;\n\t\tbackground-color: ", ";\n\t\tborder-radius: 90px;\n\t\ttransform: translate(-50%, -50%) rotate(135deg);\n\t}\n"])), size, selected ? "var(--ds-icon-inverse, #FFFFFF)" : "var(--ds-icon, #292A2E)");
 };
 var getHoverStyles = function getHoverStyles(selector) {
-  return "&:hover ".concat(selector, " {\n    background: ", "var(--ds-background-neutral-subtle-hovered, ".concat(colors.N20A, ")"), ";\n\n    &:hover {\n      background: ", "var(--ds-background-neutral-hovered, ".concat(colors.N30A, ")"), ";\n    }\n  }");
+  return "&:hover ".concat(selector, " {\n    background: ", "var(--ds-background-neutral-subtle-hovered, #0515240F)", ";\n\n    &:hover {\n      background: ", "var(--ds-background-neutral-hovered, #0B120E24)", ";\n    }\n  }");
 };
 var toolbarButtonWrapper = exports.toolbarButtonWrapper = function toolbarButtonWrapper(_ref) {
   var enabled = _ref.enabled,
@@ -55,7 +49,7 @@ var toolbarButtonWrapper = exports.toolbarButtonWrapper = function toolbarButton
 };
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles
-var dropdownOptionButton = exports.dropdownOptionButton = (0, _react.css)(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2.default)(["\n\tbackground: transparent;\n\tborder: 2px solid transparent;\n\tdisplay: flex;\n\twidth: 100%;\n\talign-items: center;\n\tjustify-content: space-between;\n\tpadding: 8px 16px;\n\n\t&:focus {\n\t\tbackground-color: ", ";\n\t\tborder: 2px solid ", ";\n\t}\n"])), "var(--ds-background-neutral-subtle-hovered, rgb(244, 245, 247))", "var(--ds-border-focused, #2684FF)");
+var dropdownOptionButton = exports.dropdownOptionButton = (0, _react.css)(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2.default)(["\n\tbackground: transparent;\n\tborder: ", " solid transparent;\n\tdisplay: flex;\n\twidth: 100%;\n\talign-items: center;\n\tjustify-content: space-between;\n\tpadding: 8px 16px;\n\n\t&:focus {\n\t\tbackground-color: ", ";\n\t\tborder: ", " solid ", ";\n\t}\n"])), "var(--ds-border-width-focused, 2px)", "var(--ds-background-neutral-subtle-hovered, #0515240F)", "var(--ds-border-width-focused, 2px)", "var(--ds-border-focused, #4688EC)");
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles
 var dropdownWrapper = exports.dropdownWrapper = (0, _react.css)(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2.default)(["\n\tspan[role='menuitem'] {\n\t\tpadding: 0;\n\t}\n"])));

package/dist/cjs/ui/Media/DropPlaceholder.js

@@ -7,10 +7,8 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _react = require("@emotion/react");
 var _reactIntlNext = require("react-intl-next");
-var _adfSchema = require("@atlaskit/adf-schema");
 var _media = require("@atlaskit/editor-common/media");
 var _file = _interopRequireDefault(require("@atlaskit/icon/core/file"));
-var _colors = require("@atlaskit/theme/colors");
 var _media2 = require("../../nodeviews/mediaNodeView/media");
 /**
  * @jsxRuntime classic
@@ -20,9 +18,9 @@ var _media2 = require("../../nodeviews/mediaNodeView/media");
 
 var iconWrapperStyles = (0, _react.css)({
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
-  color: "var(--ds-icon-accent-blue, ".concat((0, _adfSchema.hexToRgba)(_colors.B400, 0.4) || _colors.B400, ")"),
+  color: "var(--ds-icon-accent-blue, #357DE8)",
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
-  background: "var(--ds-background-accent-blue-subtle, ".concat((0, _adfSchema.hexToRgba)(_colors.B300, 0.6) || _colors.B300, ")"),
+  background: "var(--ds-background-accent-blue-subtle, #669DF1)",
   borderRadius: "var(--ds-radius-small, 3px)",
   margin: "var(--ds-space-075, 6px)".concat(" ", "var(--ds-space-050, 4px)", " ", "var(--ds-space-300, 24px)"),
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
@@ -34,7 +32,7 @@ var iconWrapperStyles = (0, _react.css)({
   justifyContent: 'center'
 });
 var dropLineStyles = (0, _react.css)({
-  background: "var(--ds-border-focused, ".concat(_colors.B200, ")"),
+  background: "var(--ds-border-focused, #4688EC)",
   borderRadius: "var(--ds-radius-small, 3px)",
   margin: "var(--ds-space-025, 2px)".concat(" 0"),
   width: '100%',

package/dist/cjs/ui/MediaLinkingToolbar.js

@@ -22,7 +22,6 @@ var _ui = require("@atlaskit/editor-common/ui");
 var _utils = require("@atlaskit/editor-common/utils");
 var _chevronLeft = _interopRequireDefault(require("@atlaskit/icon/core/chevron-left"));
 var _linkBroken = _interopRequireDefault(require("@atlaskit/icon/core/link-broken"));
-var _colors = require("@atlaskit/theme/colors");
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
 function _callSuper(t, o, e) { return o = (0, _getPrototypeOf2.default)(o), (0, _possibleConstructorReturn2.default)(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], (0, _getPrototypeOf2.default)(t).constructor) : o.apply(t, e)); }
 function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); } /**
@@ -34,7 +33,7 @@ var validationWrapper = (0, _react2.css)({
   lineHeight: 0,
   padding: "var(--ds-space-150, 12px)".concat(" ", "var(--ds-space-300, 24px)", " ", "var(--ds-space-150, 12px)", " 0"),
   margin: "0 ".concat("var(--ds-space-050, 4px)", " 0 ", "var(--ds-space-400, 32px)"),
-  borderTop: "var(--ds-border-width, 1px)".concat(" solid ", "var(--ds-border-danger, ".concat(_colors.R400, ")")),
+  borderTop: "var(--ds-border-width, 1px)".concat(" solid ", "var(--ds-border-danger, #E2483D)"),
   alignItems: 'start',
   display: 'flex',
   flexDirection: 'column'

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

@@ -396,11 +396,11 @@ var ResizableMediaSingle = exports.default = /*#__PURE__*/function (_React$Compo
         }
         return {
           left: {
-            left: "calc(".concat("var(--ds-space-025, 0.125em)", " * -0.5)"),
+            left: "calc(".concat("var(--ds-space-025, 2px)", " * -0.5)"),
             paddingLeft: '0px'
           },
           right: {
-            right: "calc(".concat("var(--ds-space-025, 0.125em)", " * -0.5)"),
+            right: "calc(".concat("var(--ds-space-025, 2px)", " * -0.5)"),
             paddingRight: '0px'
           }
         };

package/dist/cjs/ui/ResizableMediaSingle/styles.js

@@ -1,18 +1,12 @@
 "use strict";
 
-var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.resizableMediaMigrationNotificationStyle = void 0;
 var _react = require("@emotion/react");
-var colors = _interopRequireWildcard(require("@atlaskit/theme/colors"));
-function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 
-// Ignored via go/ees005
-// eslint-disable-next-line import/no-namespace
-
 var NOTIFICATION_SIZE = 8;
 var SPACE_FROM_EDGE = "var(--ds-space-100, 8px)";
 
@@ -22,7 +16,7 @@ var resizableMediaMigrationNotificationStyle = exports.resizableMediaMigrationNo
   top: SPACE_FROM_EDGE,
   right: "calc(".concat("var(--ds-space-150, 12px)", " + ", SPACE_FROM_EDGE, ")"),
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
-  backgroundColor: "var(--ds-background-warning-bold, ".concat(colors.Y300, ")"),
+  backgroundColor: "var(--ds-background-warning-bold, #FBC828)",
   borderRadius: "var(--ds-radius-full, 50%)",
   width: "".concat(NOTIFICATION_SIZE, "px"),
   height: "".concat(NOTIFICATION_SIZE, "px"),

package/dist/es2019/nodeviews/toDOM-fixes/mediaSingle.js

@@ -1,6 +1,5 @@
 import { mediaSingleSpec } from '@atlaskit/adf-schema';
 import { convertToInlineCss } from '@atlaskit/editor-common/lazy-node-view';
-import { N20, N50 } from '@atlaskit/theme/colors';
 import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { getAttrsFromNodeMediaSingle } from './toDOMAttrs';
 const WRAPPED_LAYOUTS = ['wrap-left', 'wrap-right'];
@@ -148,7 +147,7 @@ export const prepareWrapperContentDOM = ({
       borderRadius: "var(--ds-radius-small, 3px)",
       width: mediaWidthCalc,
       minWidth: mediaWidthCalc,
-      color: `var(--ds-icon, ${N50})`
+      color: "var(--ds-icon, #292A2E)"
     })
   }, ['figure', {
     class: 'media-single-node',
@@ -202,7 +201,7 @@ export const getToDom = allowPixelResizing => node => {
       '--ak-editor-media-card-display': 'block',
       '--ak-editor-media-single--gutter-size': GUTTER_SIZE,
       '--ak-editor-media-margin-right': '0',
-      '--ak-editor-media-card-background-color': `var(--ds-background-neutral, ${N20})`,
+      '--ak-editor-media-card-background-color': "var(--ds-background-neutral, #0515240F)",
       marginTop: isMediaWrapped ? HALF_GUTTER_SIZE : "var(--ds-space-300, 24px)",
       marginBottom: isMediaWrapped ? HALF_GUTTER_SIZE : "var(--ds-space-300, 24px)",
       marginRight: isMediaWrapped ? layout === 'wrap-right' ? 'auto' : HALF_GUTTER_SIZE : 0,

package/dist/es2019/pm-plugins/alt-text/ui/AltTextEdit.js

@@ -18,18 +18,17 @@ import { RECENT_SEARCH_WIDTH_IN_PX as CONTAINER_WIDTH_IN_PX, FloatingToolbarButt
 import { relativeFontSizeToBase16 } from '@atlaskit/editor-shared-styles';
 import ChevronLeftLargeIcon from '@atlaskit/icon/core/chevron-left';
 import CrossCircleIcon from '@atlaskit/icon/core/cross-circle';
-import { N200, N30, N80, R400 } from '@atlaskit/theme/colors';
 import { closeMediaAltTextMenu, closeMediaAltTextMenuAndSave } from '../commands';
 export const MAX_ALT_TEXT_LENGTH = 510; // double tweet length
 
 const supportTextStyles = css({
-  color: `var(--ds-text-subtlest, ${N200})`,
+  color: "var(--ds-text-subtlest, #6B6E76)",
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
   fontSize: relativeFontSizeToBase16(12),
   padding: `${"var(--ds-space-150, 12px)"} ${"var(--ds-space-500, 40px)"}`,
   // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
   lineHeight: '20px',
-  borderTop: `${"var(--ds-border-width, 1px)"} solid ${`var(--ds-border, ${N30})`}`,
+  borderTop: `${"var(--ds-border-width, 1px)"} solid ${"var(--ds-border, #0B120E24)"}`,
   margin: 0
 });
 const containerStyles = css({
@@ -54,7 +53,7 @@ const validationWrapperStyles = css({
   lineHeight: 0,
   padding: `${"var(--ds-space-150, 12px)"} ${"var(--ds-space-300, 24px)"} ${"var(--ds-space-150, 12px)"} 0`,
   margin: `0 ${"var(--ds-space-150, 12px)"} 0 ${"var(--ds-space-500, 40px)"}`,
-  borderTop: `${"var(--ds-border-width, 1px)"} solid ${`var(--ds-border-danger, ${R400})`}`,
+  borderTop: `${"var(--ds-border-width, 1px)"} solid ${"var(--ds-border-danger, #E2483D)"}`,
   alignItems: 'start',
   flexDirection: 'column'
 });
@@ -63,7 +62,7 @@ const buttonWrapperStyles = css({
   padding: `${"var(--ds-space-050, 4px)"} ${"var(--ds-space-100, 8px)"}`
 });
 const clearTextStyles = css({
-  color: `var(--ds-icon-subtle, ${N80})`
+  color: "var(--ds-icon-subtle, #505258)"
 });
 // eslint-disable-next-line @repo/internal/react/no-class-components
 export class AltTextEditComponent extends React.Component {

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

@@ -12,11 +12,10 @@ import { CAPTION_PLACEHOLDER_ID } from '@atlaskit/editor-common/media-single';
 import { fg } from '@atlaskit/platform-feature-flags';
 // eslint-disable-next-line @atlaskit/design-system/no-emotion-primitives -- to be migrated to @atlaskit/primitives/compiled – go/akcss
 import { Pressable, Text, xcss } from '@atlaskit/primitives';
-import { N200 } from '@atlaskit/theme/colors';
 import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 // eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression, @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
 const placeholder = css`
-	color: ${`var(--ds-text-subtlest, ${N200})`};
+	color: ${"var(--ds-text-subtlest, #6B6E76)"};
 	width: 100%;
 	text-align: center;
 	margin-top: ${"var(--ds-space-100, 8px)"} !important;

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

@@ -2,10 +2,6 @@
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css } from '@emotion/react';
 import { DEFAULT_BORDER_COLOR } from '@atlaskit/editor-common/ui-color';
-// Ignored via go/ees005
-// eslint-disable-next-line import/no-namespace
-import * as colors from '@atlaskit/theme/colors';
-import { N0, N20A, N50, N60A, N800, N90 } from '@atlaskit/theme/colors';
 // menuItemDimensions and itemSpacing are copied from
 // packages/editor/editor-core/src/plugins/floating-toolbar/ui/DropdownMenu.tsx
 
@@ -24,7 +20,7 @@ export const contextualMenuArrow = css`
 		content: '›';
 		margin-left: ${"var(--ds-space-050, 4px)"};
 		line-height: 20px;
-		color: ${`var(--ds-icon, ${N90})`};
+		color: ${"var(--ds-icon, #292A2E)"};
 	}
 `;
 export const contextualMenuColorIcon = color => css`
@@ -32,7 +28,7 @@ export const contextualMenuColorIcon = color => css`
 	&::before {
 		content: '';
 		display: block;
-		border: 1px solid ${DEFAULT_BORDER_COLOR};
+		border: ${"var(--ds-border-width, 1px)"} solid ${DEFAULT_BORDER_COLOR};
 		border-radius: ${"var(--ds-radius-small, 3px)"};
 		width: 20px;
 		height: 20px;
@@ -41,8 +37,8 @@ export const contextualMenuColorIcon = color => css`
 `;
 export const contextualSubMenu = index => css`
 	border-radius: ${"var(--ds-radius-small, 3px)"};
-	background: ${"var(--ds-surface-overlay, white)"};
-	box-shadow: ${`var(--ds-shadow-overlay, ${`0 4px 8px -2px ${N60A}, 0 0 1px ${N60A}`})`};
+	background: ${"var(--ds-surface-overlay, #FFFFFF)"};
+	box-shadow: ${"var(--ds-shadow-overlay, 0px 8px 12px #1E1F2126, 0px 0px 1px #1E1F214f)"};
 	display: flex;
 	position: absolute;
 	top: ${index * (menuItemDimensions.height + itemSpacing * 2)}px;
@@ -57,8 +53,8 @@ export const buttonStyle = selected => css`
 	height: 26px;
 	width: 26px;
 	padding: 0;
-	border-radius: 4px;
-	background-color: ${selected ? `var(--ds-text, ${N800})` : `var(--ds-background-neutral, ${N20A})`};
+	border-radius: ${"var(--ds-radius-small, 4px)"};
+	background-color: ${selected ? "var(--ds-text, #292A2E)" : "var(--ds-background-neutral, #0515240F)"};
 	border: 1px solid ${DEFAULT_BORDER_COLOR};
 	cursor: pointer;
 	display: block;
@@ -72,11 +68,11 @@ export const buttonWrapperStyle = css`
 	display: flex;
 	align-items: center;
 	padding: ${"var(--ds-space-025, 2px)"};
-	border-radius: 6px;
+	border-radius: ${"var(--ds-radius-medium, 6px)"};
 	&:focus-within,
 	&:focus,
 	&:hover {
-		border-color: ${`var(--ds-border, ${N50})`} !important;
+		border-color: ${"var(--ds-border, #0B120E24)"} !important;
 	}
 `;
 export const line = (size, selected) => css`
@@ -89,16 +85,16 @@ export const line = (size, selected) => css`
 		left: 50%;
 		width: 12px;
 		height: ${size}px;
-		background-color: ${selected ? `var(--ds-icon-inverse, ${N0})` : "var(--ds-icon, #44546F)"};
+		background-color: ${selected ? "var(--ds-icon-inverse, #FFFFFF)" : "var(--ds-icon, #292A2E)"};
 		border-radius: 90px;
 		transform: translate(-50%, -50%) rotate(135deg);
 	}
 `;
 const getHoverStyles = selector => `&:hover ${selector} {
-    background: ${`var(--ds-background-neutral-subtle-hovered, ${colors.N20A})`};
+    background: ${"var(--ds-background-neutral-subtle-hovered, #0515240F)"};
 
     &:hover {
-      background: ${`var(--ds-background-neutral-hovered, ${colors.N30A})`};
+      background: ${"var(--ds-background-neutral-hovered, #0B120E24)"};
     }
   }`;
 export const toolbarButtonWrapper = ({
@@ -138,7 +134,7 @@ export const toolbarButtonWrapper = ({
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles
 export const dropdownOptionButton = css`
 	background: transparent;
-	border: 2px solid transparent;
+	border: ${"var(--ds-border-width-focused, 2px)"} solid transparent;
 	display: flex;
 	width: 100%;
 	align-items: center;
@@ -146,8 +142,8 @@ export const dropdownOptionButton = css`
 	padding: 8px 16px;
 
 	&:focus {
-		background-color: ${"var(--ds-background-neutral-subtle-hovered, rgb(244, 245, 247))"};
-		border: 2px solid ${"var(--ds-border-focused, #2684FF)"};
+		background-color: ${"var(--ds-background-neutral-subtle-hovered, #0515240F)"};
+		border: ${"var(--ds-border-width-focused, 2px)"} solid ${"var(--ds-border-focused, #4688EC)"};
 	}
 `;
 

package/dist/es2019/ui/Media/DropPlaceholder.js

@@ -5,16 +5,14 @@
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled, @typescript-eslint/consistent-type-imports
 import { css, jsx } from '@emotion/react';
 import { injectIntl } from 'react-intl-next';
-import { hexToRgba } from '@atlaskit/adf-schema';
 import { dropPlaceholderMessages } from '@atlaskit/editor-common/media';
 import DocumentFilledIcon from '@atlaskit/icon/core/file';
-import { B200, B300, B400 } from '@atlaskit/theme/colors';
 import { FILE_WIDTH, MEDIA_HEIGHT } from '../../nodeviews/mediaNodeView/media';
 const iconWrapperStyles = css({
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
-  color: `var(--ds-icon-accent-blue, ${hexToRgba(B400, 0.4) || B400})`,
+  color: "var(--ds-icon-accent-blue, #357DE8)",
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
-  background: `var(--ds-background-accent-blue-subtle, ${hexToRgba(B300, 0.6) || B300})`,
+  background: "var(--ds-background-accent-blue-subtle, #669DF1)",
   borderRadius: "var(--ds-radius-small, 3px)",
   margin: `${"var(--ds-space-075, 6px)"} ${"var(--ds-space-050, 4px)"} ${"var(--ds-space-300, 24px)"}`,
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
@@ -26,7 +24,7 @@ const iconWrapperStyles = css({
   justifyContent: 'center'
 });
 const dropLineStyles = css({
-  background: `var(--ds-border-focused, ${B200})`,
+  background: "var(--ds-border-focused, #4688EC)",
   borderRadius: "var(--ds-radius-small, 3px)",
   margin: `${"var(--ds-space-025, 2px)"} 0`,
   width: '100%',

package/dist/es2019/ui/MediaLinkingToolbar.js

@@ -17,13 +17,12 @@ PanelTextInput } from '@atlaskit/editor-common/ui';
 import { normalizeUrl } from '@atlaskit/editor-common/utils';
 import ChevronLeftLargeIcon from '@atlaskit/icon/core/chevron-left';
 import EditorUnlinkIcon from '@atlaskit/icon/core/link-broken';
-import { R400 } from '@atlaskit/theme/colors';
 const validationWrapper = css({
   // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
   lineHeight: 0,
   padding: `${"var(--ds-space-150, 12px)"} ${"var(--ds-space-300, 24px)"} ${"var(--ds-space-150, 12px)"} 0`,
   margin: `0 ${"var(--ds-space-050, 4px)"} 0 ${"var(--ds-space-400, 32px)"}`,
-  borderTop: `${"var(--ds-border-width, 1px)"} solid ${`var(--ds-border-danger, ${R400})`}`,
+  borderTop: `${"var(--ds-border-width, 1px)"} solid ${"var(--ds-border-danger, #E2483D)"}`,
   alignItems: 'start',
   display: 'flex',
   flexDirection: 'column'

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

@@ -326,11 +326,11 @@ export default class ResizableMediaSingle extends React.Component {
       }
       return {
         left: {
-          left: `calc(${"var(--ds-space-025, 0.125em)"} * -0.5)`,
+          left: `calc(${"var(--ds-space-025, 2px)"} * -0.5)`,
           paddingLeft: '0px'
         },
         right: {
-          right: `calc(${"var(--ds-space-025, 0.125em)"} * -0.5)`,
+          right: `calc(${"var(--ds-space-025, 2px)"} * -0.5)`,
           paddingRight: '0px'
         }
       };

package/dist/es2019/ui/ResizableMediaSingle/styles.js

@@ -1,9 +1,5 @@
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css } from '@emotion/react';
-
-// Ignored via go/ees005
-// eslint-disable-next-line import/no-namespace
-import * as colors from '@atlaskit/theme/colors';
 const NOTIFICATION_SIZE = 8;
 const SPACE_FROM_EDGE = "var(--ds-space-100, 8px)";
 
@@ -13,7 +9,7 @@ export const resizableMediaMigrationNotificationStyle = css({
   top: SPACE_FROM_EDGE,
   right: `calc(${"var(--ds-space-150, 12px)"} + ${SPACE_FROM_EDGE})`,
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
-  backgroundColor: `var(--ds-background-warning-bold, ${colors.Y300})`,
+  backgroundColor: "var(--ds-background-warning-bold, #FBC828)",
   borderRadius: "var(--ds-radius-full, 50%)",
   width: `${NOTIFICATION_SIZE}px`,
   height: `${NOTIFICATION_SIZE}px`,

package/dist/esm/nodeviews/toDOM-fixes/mediaSingle.js

@@ -3,7 +3,6 @@ function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbol
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 import { mediaSingleSpec } from '@atlaskit/adf-schema';
 import { convertToInlineCss } from '@atlaskit/editor-common/lazy-node-view';
-import { N20, N50 } from '@atlaskit/theme/colors';
 import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { getAttrsFromNodeMediaSingle } from './toDOMAttrs';
 var WRAPPED_LAYOUTS = ['wrap-left', 'wrap-right'];
@@ -145,7 +144,7 @@ export var prepareWrapperContentDOM = function prepareWrapperContentDOM(_ref5) {
       borderRadius: "var(--ds-radius-small, 3px)",
       width: mediaWidthCalc,
       minWidth: mediaWidthCalc,
-      color: "var(--ds-icon, ".concat(N50, ")")
+      color: "var(--ds-icon, #292A2E)"
     })
   }, ['figure', {
     class: 'media-single-node',
@@ -200,7 +199,7 @@ export var getToDom = function getToDom(allowPixelResizing) {
         '--ak-editor-media-card-display': 'block',
         '--ak-editor-media-single--gutter-size': GUTTER_SIZE,
         '--ak-editor-media-margin-right': '0',
-        '--ak-editor-media-card-background-color': "var(--ds-background-neutral, ".concat(N20, ")"),
+        '--ak-editor-media-card-background-color': "var(--ds-background-neutral, #0515240F)",
         marginTop: isMediaWrapped ? HALF_GUTTER_SIZE : "var(--ds-space-300, 24px)",
         marginBottom: isMediaWrapped ? HALF_GUTTER_SIZE : "var(--ds-space-300, 24px)",
         marginRight: isMediaWrapped ? layout === 'wrap-right' ? 'auto' : HALF_GUTTER_SIZE : 0,

package/dist/esm/pm-plugins/alt-text/ui/AltTextEdit.js

@@ -25,18 +25,17 @@ import { RECENT_SEARCH_WIDTH_IN_PX as CONTAINER_WIDTH_IN_PX, FloatingToolbarButt
 import { relativeFontSizeToBase16 } from '@atlaskit/editor-shared-styles';
 import ChevronLeftLargeIcon from '@atlaskit/icon/core/chevron-left';
 import CrossCircleIcon from '@atlaskit/icon/core/cross-circle';
-import { N200, N30, N80, R400 } from '@atlaskit/theme/colors';
 import { closeMediaAltTextMenu, closeMediaAltTextMenuAndSave } from '../commands';
 export var MAX_ALT_TEXT_LENGTH = 510; // double tweet length
 
 var supportTextStyles = css({
-  color: "var(--ds-text-subtlest, ".concat(N200, ")"),
+  color: "var(--ds-text-subtlest, #6B6E76)",
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
   fontSize: relativeFontSizeToBase16(12),
   padding: "var(--ds-space-150, 12px)".concat(" ", "var(--ds-space-500, 40px)"),
   // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
   lineHeight: '20px',
-  borderTop: "var(--ds-border-width, 1px)".concat(" solid ", "var(--ds-border, ".concat(N30, ")")),
+  borderTop: "var(--ds-border-width, 1px)".concat(" solid ", "var(--ds-border, #0B120E24)"),
   margin: 0
 });
 var containerStyles = css({
@@ -61,7 +60,7 @@ var validationWrapperStyles = css({
   lineHeight: 0,
   padding: "var(--ds-space-150, 12px)".concat(" ", "var(--ds-space-300, 24px)", " ", "var(--ds-space-150, 12px)", " 0"),
   margin: "0 ".concat("var(--ds-space-150, 12px)", " 0 ", "var(--ds-space-500, 40px)"),
-  borderTop: "var(--ds-border-width, 1px)".concat(" solid ", "var(--ds-border-danger, ".concat(R400, ")")),
+  borderTop: "var(--ds-border-width, 1px)".concat(" solid ", "var(--ds-border-danger, #E2483D)"),
   alignItems: 'start',
   flexDirection: 'column'
 });
@@ -70,7 +69,7 @@ var buttonWrapperStyles = css({
   padding: "var(--ds-space-050, 4px)".concat(" ", "var(--ds-space-100, 8px)")
 });
 var clearTextStyles = css({
-  color: "var(--ds-icon-subtle, ".concat(N80, ")")
+  color: "var(--ds-icon-subtle, #505258)"
 });
 // eslint-disable-next-line @repo/internal/react/no-class-components
 export var AltTextEditComponent = /*#__PURE__*/function (_React$Component) {

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

@@ -14,10 +14,9 @@ import { CAPTION_PLACEHOLDER_ID } from '@atlaskit/editor-common/media-single';
 import { fg } from '@atlaskit/platform-feature-flags';
 // eslint-disable-next-line @atlaskit/design-system/no-emotion-primitives -- to be migrated to @atlaskit/primitives/compiled – go/akcss
 import { Pressable, Text, xcss } from '@atlaskit/primitives';
-import { N200 } from '@atlaskit/theme/colors';
 import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 // eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression, @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
-var placeholder = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n\tcolor: ", ";\n\twidth: 100%;\n\ttext-align: center;\n\tmargin-top: ", " !important;\n\tdisplay: block;\n"])), "var(--ds-text-subtlest, ".concat(N200, ")"), "var(--ds-space-100, 8px)");
+var placeholder = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n\tcolor: ", ";\n\twidth: 100%;\n\ttext-align: center;\n\tmargin-top: ", " !important;\n\tdisplay: block;\n"])), "var(--ds-text-subtlest, #6B6E76)", "var(--ds-space-100, 8px)");
 var placeholderText = css({
   color: "var(--ds-text-subtlest, #6B6E76)"
 });

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

@@ -4,10 +4,6 @@ var _templateObject, _templateObject2, _templateObject3, _templateObject4, _temp
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css } from '@emotion/react';
 import { DEFAULT_BORDER_COLOR } from '@atlaskit/editor-common/ui-color';
-// Ignored via go/ees005
-// eslint-disable-next-line import/no-namespace
-import * as colors from '@atlaskit/theme/colors';
-import { N0, N20A, N50, N60A, N800, N90 } from '@atlaskit/theme/colors';
 // menuItemDimensions and itemSpacing are copied from
 // packages/editor/editor-core/src/plugins/floating-toolbar/ui/DropdownMenu.tsx
 
@@ -20,24 +16,24 @@ export var menuItemDimensions = {
 export var itemSpacing = 4;
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
-export var contextualMenuArrow = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n\tdisplay: flex;\n\t&::after {\n\t\tcontent: '\u203A';\n\t\tmargin-left: ", ";\n\t\tline-height: 20px;\n\t\tcolor: ", ";\n\t}\n"])), "var(--ds-space-050, 4px)", "var(--ds-icon, ".concat(N90, ")"));
+export var contextualMenuArrow = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n\tdisplay: flex;\n\t&::after {\n\t\tcontent: '\u203A';\n\t\tmargin-left: ", ";\n\t\tline-height: 20px;\n\t\tcolor: ", ";\n\t}\n"])), "var(--ds-space-050, 4px)", "var(--ds-icon, #292A2E)");
 export var contextualMenuColorIcon = function contextualMenuColorIcon(color) {
-  return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n\t", "\n\t&::before {\n\t\tcontent: '';\n\t\tdisplay: block;\n\t\tborder: 1px solid ", ";\n\t\tborder-radius: ", ";\n\t\twidth: 20px;\n\t\theight: 20px;\n\t\t", "\n\t}\n"])), contextualMenuArrow, DEFAULT_BORDER_COLOR, "var(--ds-radius-small, 3px)", color && "background: ".concat(color));
+  return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n\t", "\n\t&::before {\n\t\tcontent: '';\n\t\tdisplay: block;\n\t\tborder: ", " solid ", ";\n\t\tborder-radius: ", ";\n\t\twidth: 20px;\n\t\theight: 20px;\n\t\t", "\n\t}\n"])), contextualMenuArrow, "var(--ds-border-width, 1px)", DEFAULT_BORDER_COLOR, "var(--ds-radius-small, 3px)", color && "background: ".concat(color));
 };
 export var contextualSubMenu = function contextualSubMenu(index) {
-  return css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n\tborder-radius: ", ";\n\tbackground: ", ";\n\tbox-shadow: ", ";\n\tdisplay: flex;\n\tposition: absolute;\n\ttop: ", "px;\n\tleft: ", "px;\n\tpadding: ", ";\n\n\t> div {\n\t\tpadding: 0;\n\t}\n"])), "var(--ds-radius-small, 3px)", "var(--ds-surface-overlay, white)", "var(--ds-shadow-overlay, ".concat("0 4px 8px -2px ".concat(N60A, ", 0 0 1px ").concat(N60A), ")"), index * (menuItemDimensions.height + itemSpacing * 2), menuItemDimensions.width, "var(--ds-space-100, 8px)");
+  return css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n\tborder-radius: ", ";\n\tbackground: ", ";\n\tbox-shadow: ", ";\n\tdisplay: flex;\n\tposition: absolute;\n\ttop: ", "px;\n\tleft: ", "px;\n\tpadding: ", ";\n\n\t> div {\n\t\tpadding: 0;\n\t}\n"])), "var(--ds-radius-small, 3px)", "var(--ds-surface-overlay, #FFFFFF)", "var(--ds-shadow-overlay, 0px 8px 12px #1E1F2126, 0px 0px 1px #1E1F214f)", index * (menuItemDimensions.height + itemSpacing * 2), menuItemDimensions.width, "var(--ds-space-100, 8px)");
 };
 export var buttonStyle = function buttonStyle(selected) {
-  return css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n\theight: 26px;\n\twidth: 26px;\n\tpadding: 0;\n\tborder-radius: 4px;\n\tbackground-color: ", ";\n\tborder: 1px solid ", ";\n\tcursor: pointer;\n\tdisplay: block;\n"])), selected ? "var(--ds-text, ".concat(N800, ")") : "var(--ds-background-neutral, ".concat(N20A, ")"), DEFAULT_BORDER_COLOR);
+  return css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n\theight: 26px;\n\twidth: 26px;\n\tpadding: 0;\n\tborder-radius: ", ";\n\tbackground-color: ", ";\n\tborder: 1px solid ", ";\n\tcursor: pointer;\n\tdisplay: block;\n"])), "var(--ds-radius-small, 4px)", selected ? "var(--ds-text, #292A2E)" : "var(--ds-background-neutral, #0515240F)", DEFAULT_BORDER_COLOR);
 };
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
-export var buttonWrapperStyle = css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n\tborder: 1px solid transparent;\n\tmargin: ", ";\n\tfont-size: 0;\n\tdisplay: flex;\n\talign-items: center;\n\tpadding: ", ";\n\tborder-radius: 6px;\n\t&:focus-within,\n\t&:focus,\n\t&:hover {\n\t\tborder-color: ", " !important;\n\t}\n"])), "var(--ds-space-025, 2px)", "var(--ds-space-025, 2px)", "var(--ds-border, ".concat(N50, ")"));
+export var buttonWrapperStyle = css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n\tborder: 1px solid transparent;\n\tmargin: ", ";\n\tfont-size: 0;\n\tdisplay: flex;\n\talign-items: center;\n\tpadding: ", ";\n\tborder-radius: ", ";\n\t&:focus-within,\n\t&:focus,\n\t&:hover {\n\t\tborder-color: ", " !important;\n\t}\n"])), "var(--ds-space-025, 2px)", "var(--ds-space-025, 2px)", "var(--ds-radius-medium, 6px)", "var(--ds-border, #0B120E24)");
 export var line = function line(size, selected) {
-  return css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n\tposition: relative;\n\t&:before {\n\t\tcontent: '';\n\t\tdisplay: block;\n\t\tposition: absolute;\n\t\ttop: 50%;\n\t\tleft: 50%;\n\t\twidth: 12px;\n\t\theight: ", "px;\n\t\tbackground-color: ", ";\n\t\tborder-radius: 90px;\n\t\ttransform: translate(-50%, -50%) rotate(135deg);\n\t}\n"])), size, selected ? "var(--ds-icon-inverse, ".concat(N0, ")") : "var(--ds-icon, #44546F)");
+  return css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n\tposition: relative;\n\t&:before {\n\t\tcontent: '';\n\t\tdisplay: block;\n\t\tposition: absolute;\n\t\ttop: 50%;\n\t\tleft: 50%;\n\t\twidth: 12px;\n\t\theight: ", "px;\n\t\tbackground-color: ", ";\n\t\tborder-radius: 90px;\n\t\ttransform: translate(-50%, -50%) rotate(135deg);\n\t}\n"])), size, selected ? "var(--ds-icon-inverse, #FFFFFF)" : "var(--ds-icon, #292A2E)");
 };
 var getHoverStyles = function getHoverStyles(selector) {
-  return "&:hover ".concat(selector, " {\n    background: ", "var(--ds-background-neutral-subtle-hovered, ".concat(colors.N20A, ")"), ";\n\n    &:hover {\n      background: ", "var(--ds-background-neutral-hovered, ".concat(colors.N30A, ")"), ";\n    }\n  }");
+  return "&:hover ".concat(selector, " {\n    background: ", "var(--ds-background-neutral-subtle-hovered, #0515240F)", ";\n\n    &:hover {\n      background: ", "var(--ds-background-neutral-hovered, #0B120E24)", ";\n    }\n  }");
 };
 export var toolbarButtonWrapper = function toolbarButtonWrapper(_ref) {
   var enabled = _ref.enabled,
@@ -46,7 +42,7 @@ export var toolbarButtonWrapper = function toolbarButtonWrapper(_ref) {
 };
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles
-export var dropdownOptionButton = css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n\tbackground: transparent;\n\tborder: 2px solid transparent;\n\tdisplay: flex;\n\twidth: 100%;\n\talign-items: center;\n\tjustify-content: space-between;\n\tpadding: 8px 16px;\n\n\t&:focus {\n\t\tbackground-color: ", ";\n\t\tborder: 2px solid ", ";\n\t}\n"])), "var(--ds-background-neutral-subtle-hovered, rgb(244, 245, 247))", "var(--ds-border-focused, #2684FF)");
+export var dropdownOptionButton = css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n\tbackground: transparent;\n\tborder: ", " solid transparent;\n\tdisplay: flex;\n\twidth: 100%;\n\talign-items: center;\n\tjustify-content: space-between;\n\tpadding: 8px 16px;\n\n\t&:focus {\n\t\tbackground-color: ", ";\n\t\tborder: ", " solid ", ";\n\t}\n"])), "var(--ds-border-width-focused, 2px)", "var(--ds-background-neutral-subtle-hovered, #0515240F)", "var(--ds-border-width-focused, 2px)", "var(--ds-border-focused, #4688EC)");
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles
 export var dropdownWrapper = css(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n\tspan[role='menuitem'] {\n\t\tpadding: 0;\n\t}\n"])));

package/dist/esm/ui/Media/DropPlaceholder.js

@@ -5,16 +5,14 @@
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled, @typescript-eslint/consistent-type-imports
 import { css, jsx } from '@emotion/react';
 import { injectIntl } from 'react-intl-next';
-import { hexToRgba } from '@atlaskit/adf-schema';
 import { dropPlaceholderMessages } from '@atlaskit/editor-common/media';
 import DocumentFilledIcon from '@atlaskit/icon/core/file';
-import { B200, B300, B400 } from '@atlaskit/theme/colors';
 import { FILE_WIDTH, MEDIA_HEIGHT } from '../../nodeviews/mediaNodeView/media';
 var iconWrapperStyles = css({
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
-  color: "var(--ds-icon-accent-blue, ".concat(hexToRgba(B400, 0.4) || B400, ")"),
+  color: "var(--ds-icon-accent-blue, #357DE8)",
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
-  background: "var(--ds-background-accent-blue-subtle, ".concat(hexToRgba(B300, 0.6) || B300, ")"),
+  background: "var(--ds-background-accent-blue-subtle, #669DF1)",
   borderRadius: "var(--ds-radius-small, 3px)",
   margin: "var(--ds-space-075, 6px)".concat(" ", "var(--ds-space-050, 4px)", " ", "var(--ds-space-300, 24px)"),
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
@@ -26,7 +24,7 @@ var iconWrapperStyles = css({
   justifyContent: 'center'
 });
 var dropLineStyles = css({
-  background: "var(--ds-border-focused, ".concat(B200, ")"),
+  background: "var(--ds-border-focused, #4688EC)",
   borderRadius: "var(--ds-radius-small, 3px)",
   margin: "var(--ds-space-025, 2px)".concat(" 0"),
   width: '100%',

package/dist/esm/ui/MediaLinkingToolbar.js

@@ -24,13 +24,12 @@ PanelTextInput } from '@atlaskit/editor-common/ui';
 import { normalizeUrl } from '@atlaskit/editor-common/utils';
 import ChevronLeftLargeIcon from '@atlaskit/icon/core/chevron-left';
 import EditorUnlinkIcon from '@atlaskit/icon/core/link-broken';
-import { R400 } from '@atlaskit/theme/colors';
 var validationWrapper = css({
   // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
   lineHeight: 0,
   padding: "var(--ds-space-150, 12px)".concat(" ", "var(--ds-space-300, 24px)", " ", "var(--ds-space-150, 12px)", " 0"),
   margin: "0 ".concat("var(--ds-space-050, 4px)", " 0 ", "var(--ds-space-400, 32px)"),
-  borderTop: "var(--ds-border-width, 1px)".concat(" solid ", "var(--ds-border-danger, ".concat(R400, ")")),
+  borderTop: "var(--ds-border-width, 1px)".concat(" solid ", "var(--ds-border-danger, #E2483D)"),
   alignItems: 'start',
   display: 'flex',
   flexDirection: 'column'

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

@@ -392,11 +392,11 @@ var ResizableMediaSingle = /*#__PURE__*/function (_React$Component) {
         }
         return {
           left: {
-            left: "calc(".concat("var(--ds-space-025, 0.125em)", " * -0.5)"),
+            left: "calc(".concat("var(--ds-space-025, 2px)", " * -0.5)"),
             paddingLeft: '0px'
           },
           right: {
-            right: "calc(".concat("var(--ds-space-025, 0.125em)", " * -0.5)"),
+            right: "calc(".concat("var(--ds-space-025, 2px)", " * -0.5)"),
             paddingRight: '0px'
           }
         };

package/dist/esm/ui/ResizableMediaSingle/styles.js

@@ -1,9 +1,5 @@
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css } from '@emotion/react';
-
-// Ignored via go/ees005
-// eslint-disable-next-line import/no-namespace
-import * as colors from '@atlaskit/theme/colors';
 var NOTIFICATION_SIZE = 8;
 var SPACE_FROM_EDGE = "var(--ds-space-100, 8px)";
 
@@ -13,7 +9,7 @@ export var resizableMediaMigrationNotificationStyle = css({
   top: SPACE_FROM_EDGE,
   right: "calc(".concat("var(--ds-space-150, 12px)", " + ", SPACE_FROM_EDGE, ")"),
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
-  backgroundColor: "var(--ds-background-warning-bold, ".concat(colors.Y300, ")"),
+  backgroundColor: "var(--ds-background-warning-bold, #FBC828)",
   borderRadius: "var(--ds-radius-full, 50%)",
   width: "".concat(NOTIFICATION_SIZE, "px"),
   height: "".concat(NOTIFICATION_SIZE, "px"),

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-media",
-	"version": "10.1.3",
+	"version": "10.1.4",
 	"description": "Media plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -52,8 +52,8 @@
 		"@atlaskit/editor-shared-styles": "^3.10.0",
 		"@atlaskit/editor-tables": "^2.9.0",
 		"@atlaskit/form": "^15.5.0",
-		"@atlaskit/icon": "^33.0.0",
-		"@atlaskit/icon-lab": "^6.1.0",
+		"@atlaskit/icon": "^33.1.0",
+		"@atlaskit/icon-lab": "^6.2.0",
 		"@atlaskit/media-card": "^79.16.0",
 		"@atlaskit/media-client": "^36.0.0",
 		"@atlaskit/media-client-react": "^5.0.0",
@@ -66,7 +66,7 @@
 		"@atlaskit/primitives": "^18.1.0",
 		"@atlaskit/textfield": "^8.2.0",
 		"@atlaskit/theme": "^22.0.0",
-		"@atlaskit/tmp-editor-statsig": "^46.0.0",
+		"@atlaskit/tmp-editor-statsig": "^46.1.0",
 		"@atlaskit/tokens": "^11.2.0",
 		"@atlaskit/tooltip": "^21.0.0",
 		"@babel/runtime": "^7.0.0",
@@ -78,7 +78,7 @@
 		"uuid": "^3.1.0"
 	},
 	"peerDependencies": {
-		"@atlaskit/editor-common": "^112.9.0",
+		"@atlaskit/editor-common": "^112.10.0",
 		"@atlaskit/media-core": "^37.0.0",
 		"react": "^18.2.0",
 		"react-dom": "^18.2.0",