@atlaskit/editor-common 92.1.2 → 93.0.0

package/dist/cjs/ui-color/index.js

@@ -70,12 +70,6 @@ Object.defineProperty(exports, "colorPaletteMessages", {
     return _paletteMessages.default;
   }
 });
-Object.defineProperty(exports, "darkModeStatusColorPalette", {
-  enumerable: true,
-  get: function get() {
-    return _statusColorPalette.darkModeStatusColorPalette;
-  }
-});
 Object.defineProperty(exports, "getColorsPerRowFromPalette", {
   enumerable: true,
   get: function get() {
@@ -100,12 +94,6 @@ Object.defineProperty(exports, "highlightColorPalette", {
     return _highlightColorPalette.highlightColorPalette;
   }
 });
-Object.defineProperty(exports, "lightModeStatusColorPalette", {
-  enumerable: true,
-  get: function get() {
-    return _statusColorPalette.lightModeStatusColorPalette;
-  }
-});
 Object.defineProperty(exports, "panelBackgroundPalette", {
   enumerable: true,
   get: function get() {
@@ -136,7 +124,6 @@ var _utils = require("./ColorPalette/utils");
 var _cellBackgroundColorPalette = _interopRequireDefault(require("./ColorPalette/Palettes/cellBackgroundColorPalette"));
 var _paletteMessages = _interopRequireDefault(require("./ColorPalette/Palettes/paletteMessages"));
 var _panelBackgroundPalette = require("./ColorPalette/Palettes/panelBackgroundPalette");
-var _statusColorPalette = require("./ColorPalette/Palettes/statusColorPalette");
 var _textColorPalette = require("./ColorPalette/Palettes/textColorPalette");
 var _highlightColorPalette = require("./ColorPalette/Palettes/highlightColorPalette");
 var _Palettes = require("./ColorPalette/Palettes");

package/dist/cjs/ui-menu/ColorPickerButton/index.js

@@ -12,7 +12,6 @@ var _withAnalyticsContext = _interopRequireDefault(require("@atlaskit/analytics-
 var _withAnalyticsEvents = _interopRequireDefault(require("@atlaskit/analytics-next/withAnalyticsEvents"));
 var _standardButton = _interopRequireDefault(require("@atlaskit/button/standard-button"));
 var _chevronDown = _interopRequireDefault(require("@atlaskit/icon/glyph/chevron-down"));
-var _colors = require("@atlaskit/theme/colors");
 var _tooltip = _interopRequireDefault(require("@atlaskit/tooltip"));
 var _analytics = require("../../analytics");
 var _uiColor = require("../../ui-color");
@@ -42,8 +41,8 @@ var colorPickerExpandContainer = (0, _react2.css)({
 var colorPickerWrapper = function colorPickerWrapper() {
   return (0, _react2.css)({
     borderRadius: "var(--ds-border-radius, 3px)",
-    backgroundColor: "var(--ds-surface-overlay, ".concat(_colors.N0, ")"),
-    boxShadow: "var(--ds-shadow-overlay, ".concat("0 4px 8px -2px ".concat(_colors.N60A, ", 0 0 1px ").concat(_colors.N60A), ")"),
+    backgroundColor: "var(--ds-surface-overlay, #FFFFFF)",
+    boxShadow: "var(--ds-shadow-overlay, 0px 8px 12px #091E4226, 0px 0px 1px #091E424f)",
     padding: "var(--ds-space-100, 8px)".concat(" 0px")
   });
 };
@@ -204,7 +203,7 @@ var ColorPickerButton = function ColorPickerButton(props) {
         margin: "0px ".concat("var(--ds-space-025, 2px)")
       },
       '&:hover': {
-        background: "var(--ds-background-neutral-subtle-hovered, ".concat(_colors.N30A, ")")
+        background: "var(--ds-background-neutral-subtle-hovered, #091E420F)"
       }
     });
   };

package/dist/cjs/ui-menu/DropdownMenu/index.js

@@ -24,7 +24,6 @@ var _react2 = require("@emotion/react");
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
 var _menu = require("@atlaskit/menu");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
-var _colors = require("@atlaskit/theme/colors");
 var _tooltip = _interopRequireDefault(require("@atlaskit/tooltip"));
 var _styles = require("../../styles");
 var _ToolbarArrowKeyNavigationProvider = require("../../ui-menu/ToolbarArrowKeyNavigationProvider");
@@ -54,7 +53,7 @@ var wrapper = (0, _react2.css)({
   }
 });
 var focusedMenuItemStyle = (0, _react2.css)({
-  boxShadow: "inset 0px 0px 0px 2px ".concat("var(--ds-border-focused, ".concat(_colors.B100, ")")),
+  boxShadow: "inset 0px 0px 0px 2px ".concat("var(--ds-border-focused, #388BFF)"),
   outline: 'none'
 });
 var buttonStyles = function buttonStyles(isActive, submenuActive) {
@@ -66,7 +65,7 @@ var buttonStyles = function buttonStyles(isActive, submenuActive) {
     return (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n\t\t\t> span,\n\t\t\t> span:hover,\n\t\t\t> span:active {\n\t\t\t\tbackground: ", ";\n\t\t\t\tcolor: ", ";\n\t\t\t}\n\t\t\t:focus > span[aria-disabled='false'] {\n\t\t\t\t", ";\n\t\t\t}\n\t\t\t:focus-visible,\n\t\t\t:focus-visible > span[aria-disabled='false'] {\n\t\t\t\toutline: none;\n\t\t\t}\n\t\t"])), "var(--ds-background-selected, #6c798f)", "var(--ds-text, #fff)", focusedMenuItemStyle);
   } else {
     // eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression -- needs manual remediation
-    return (0, _react2.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n\t\t\t> span:hover[aria-disabled='false'] {\n\t\t\t\tcolor: ", ";\n\t\t\t\tbackground-color: ", ";\n\t\t\t}\n\t\t\t", "\n\t\t\t> span[aria-disabled='true'] {\n\t\t\t\tcolor: ", ";\n\t\t\t}\n\t\t\t:focus > span[aria-disabled='false'] {\n\t\t\t\t", ";\n\t\t\t}\n\t\t\t:focus-visible,\n\t\t\t:focus-visible > span[aria-disabled='false'] {\n\t\t\t\toutline: none;\n\t\t\t}\n\t\t"])), "var(--ds-text, ".concat(_colors.N900, ")"), "var(--ds-background-neutral-subtle-hovered, rgb(244, 245, 247))", !submenuActive && "\n\t\t\t\t\t> span:active[aria-disabled='false'] {\n\t\t\t\t\t\tbackground-color: ".concat("var(--ds-background-neutral-subtle-pressed, rgb(179, 212, 255))", ";\n\t\t\t\t\t}"), "var(--ds-text-disabled, ".concat(_colors.N70, ")"), focusedMenuItemStyle); // The default focus-visible style is removed to ensure consistency across browsers
+    return (0, _react2.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n\t\t\t> span:hover[aria-disabled='false'] {\n\t\t\t\tcolor: ", ";\n\t\t\t\tbackground-color: ", ";\n\t\t\t}\n\t\t\t", "\n\t\t\t> span[aria-disabled='true'] {\n\t\t\t\tcolor: ", ";\n\t\t\t}\n\t\t\t:focus > span[aria-disabled='false'] {\n\t\t\t\t", ";\n\t\t\t}\n\t\t\t:focus-visible,\n\t\t\t:focus-visible > span[aria-disabled='false'] {\n\t\t\t\toutline: none;\n\t\t\t}\n\t\t"])), "var(--ds-text, #172B4D)", "var(--ds-background-neutral-subtle-hovered, rgb(244, 245, 247))", !submenuActive && "\n\t\t\t\t\t> span:active[aria-disabled='false'] {\n\t\t\t\t\t\tbackground-color: ".concat("var(--ds-background-neutral-subtle-pressed, rgb(179, 212, 255))", ";\n\t\t\t\t\t}"), "var(--ds-text-disabled, #091E424F)", focusedMenuItemStyle); // The default focus-visible style is removed to ensure consistency across browsers
   }
 };
 var DropListWithOutsideListeners = (0, _uiReact.withReactEditorViewOuterListeners)(_DropList.default);

package/dist/es2019/element-browser/components/CategoryList.js

@@ -9,7 +9,6 @@ import React, { Fragment, memo, useCallback } from 'react';
 import { css, jsx } from '@emotion/react';
 import withAnalyticsContext from '@atlaskit/analytics-next/withAnalyticsContext';
 import Button from '@atlaskit/button/custom-theme-button';
-import { B400, B50, N800 } from '@atlaskit/theme/colors';
 import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE, fireAnalyticsEvent } from '../../analytics';
 import { DEVICE_BREAKPOINT_NUMBERS, GRID_SIZE } from '../constants';
 import useFocus from '../hooks/use-focus';
@@ -111,9 +110,9 @@ function CategoryListItem({
         marginLeft: "var(--ds-space-025, 2px)",
         height: '100%',
         width: '100%',
-        color: category.name !== selectedCategory ? `var(--ds-text, ${N800})` : `var(--ds-text-selected, ${B400})`,
+        color: category.name !== selectedCategory ? "var(--ds-text, #172B4D)" : "var(--ds-text-selected, #0C66E4)",
         ...(category.name === selectedCategory && {
-          background: `var(--ds-background-selected, ${B50})`
+          background: "var(--ds-background-selected, #E9F2FF)"
         })
       },
       ...rest

package/dist/es2019/element-browser/components/ElementList/ElementList.js

@@ -14,8 +14,6 @@ import withAnalyticsContext from '@atlaskit/analytics-next/withAnalyticsContext'
 import { relativeFontSizeToBase16 } from '@atlaskit/editor-shared-styles';
 import { shortcutStyle } from '@atlaskit/editor-shared-styles/shortcut';
 import { ButtonItem } from '@atlaskit/menu';
-import { B100, N200 } from '@atlaskit/theme/colors';
-import { borderRadius } from '@atlaskit/theme/constants';
 import Tooltip from '@atlaskit/tooltip';
 import { ACTION, ACTION_SUBJECT, EVENT_TYPE, fireAnalyticsEvent } from '../../../analytics';
 import { IconFallback } from '../../../quick-insert';
@@ -35,7 +33,7 @@ export const itemIcon = css({
   overflow: 'hidden',
   border: `1px solid ${"var(--ds-border, rgba(223, 225, 229, 0.5))"}`,
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-  borderRadius: `${borderRadius()}px`,
+  borderRadius: "var(--ds-border-radius, 3px)",
   boxSizing: 'border-box',
   display: 'flex',
   justifyContent: 'center',
@@ -319,7 +317,7 @@ const elementItemsWrapper = css({
     outline: 'none',
     '&:focus': {
       // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-      boxShadow: `0 0 0 ${ELEMENT_LIST_PADDING}px ${`var(--ds-border-focused, ${B100})`}`
+      boxShadow: `0 0 0 ${ELEMENT_LIST_PADDING}px ${"var(--ds-border-focused, #388BFF)"}`
     }
   },
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
@@ -366,7 +364,7 @@ const itemDescription = css(multilineStyle, {
   overflow: 'hidden',
   // 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(11.67),
-  color: `var(--ds-text-subtle, ${N200})`,
+  color: "var(--ds-text-subtle, #44546F)",
   marginTop: "var(--ds-space-025, 2px)"
 });
 const itemText = css({

package/dist/es2019/element-browser/components/ElementSearch.js

@@ -12,7 +12,6 @@ import { relativeFontSizeToBase16 } from '@atlaskit/editor-shared-styles';
 import { shortcutStyle } from '@atlaskit/editor-shared-styles/shortcut';
 import SearchIcon from '@atlaskit/icon/glyph/search';
 import Textfield from '@atlaskit/textfield';
-import { N200 } from '@atlaskit/theme/colors';
 import { GRID_SIZE, SEARCH_ITEM_HEIGHT_WIDTH } from '../constants';
 import useFocus from '../hooks/use-focus';
 import commonMessages from '../messages';
@@ -159,7 +158,7 @@ const wrapperInline = css({
 });
 const elementBeforeInput = css({
   margin: `1px ${"var(--ds-space-075, 6px)"} 0 ${"var(--ds-space-100, 8px)"}`,
-  color: `var(--ds-icon, ${N200})`,
+  color: "var(--ds-icon, #44546F)",
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
   'span, svg': {
     height: '20px',

package/dist/es2019/element-browser/constants.js

@@ -1,8 +1,4 @@
-// eslint-disable-next-line @atlaskit/design-system/no-deprecated-imports
-import { gridSize } from '@atlaskit/theme/constants';
-// TODO: Migrate away from deprecated gridSize
-// Recommendation: Replace gridSize with 8
-export const GRID_SIZE = gridSize();
+export const GRID_SIZE = 8;
 export const DEVICE_BREAKPOINT_NUMBERS = {
   small: GRID_SIZE * 40,
   medium: GRID_SIZE * 75,

package/dist/es2019/extensibility/Extension/Extension/styles.js

@@ -1,6 +1,5 @@
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css } from '@emotion/react';
-import { N30, N500 } from '@atlaskit/theme/colors';
 import { wrapperDefault } from '../styles';
 export const widerLayoutClassName = 'wider-layout';
 
@@ -18,11 +17,11 @@ export const wrapperStyle = css(wrapperDefault, {
   },
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
   '&.with-bodied-border': {
-    boxShadow: `0 0 0 1px ${`var(--ds-border, ${N30})`}`
+    boxShadow: `0 0 0 1px ${"var(--ds-border, #091E4224)"}`
   },
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
   '&.with-hover-border': {
-    boxShadow: `0 0 0 1px ${`var(--ds-border-input, ${N500})`}`
+    boxShadow: `0 0 0 1px ${"var(--ds-border-input, #8590A2)"}`
   },
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
   '&.with-margin-styles': {
@@ -49,7 +48,7 @@ export const header = css({
 export const content = css({
   padding: "var(--ds-space-100, 8px)",
   background: "var(--ds-surface, white)",
-  border: `1px solid ${`var(--ds-border, ${N30})`}`,
+  border: `1px solid ${"var(--ds-border, #091E4224)"}`,
   borderRadius: "var(--ds-border-radius, 3px)",
   cursor: 'initial',
   width: '100%',

package/dist/es2019/extensibility/Extension/InlineExtension/styles.js

@@ -1,6 +1,5 @@
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css } from '@emotion/react';
-import { N500 } from '@atlaskit/theme/colors';
 import { wrapperDefault } from '../styles';
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles, @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
@@ -24,7 +23,7 @@ export const wrapperStyle = css(wrapperDefault, {
   },
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
   '&.with-hover-border': {
-    boxShadow: `0 0 0 1px ${`var(--ds-border-input, ${N500})`}`
+    boxShadow: `0 0 0 1px ${"var(--ds-border-input, #8590A2)"}`
   }
 });
 

package/dist/es2019/extensibility/Extension/Lozenge/ExtensionLabel.js

@@ -9,7 +9,6 @@ import { css, jsx } from '@emotion/react';
 import classnames from 'classnames';
 import { defineMessages, FormattedMessage } from 'react-intl-next';
 import PreferencesIcon from '@atlaskit/icon/glyph/preferences';
-import { N0, N30, N40, N500, N800 } from '@atlaskit/theme/colors';
 import Tooltip from '@atlaskit/tooltip';
 const containerStyles = css({
   textAlign: 'left',
@@ -47,11 +46,11 @@ const sharedLabelStyles = css({
   },
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
   '&.bodied-background': {
-    background: `var(--ds-surface, ${N0})`
+    background: "var(--ds-surface, #FFFFFF)"
   },
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
   '&.bodied-border': {
-    boxShadow: `0 0 0 1px ${`var(--ds-border, ${N30})`}`
+    boxShadow: `0 0 0 1px ${"var(--ds-border, #091E4224)"}`
   }
 });
 const buttonLabelStyles = css({
@@ -60,8 +59,8 @@ const buttonLabelStyles = css({
   borderRadius: "var(--ds-border-radius, 3px)",
   paddingLeft: "var(--ds-space-100, 8px)",
   paddingRight: "var(--ds-space-100, 8px)",
-  color: `var(--ds-text-subtle, ${N800})`,
-  backgroundColor: `var(--ds-background-accent-gray-subtlest, ${N30})`,
+  color: "var(--ds-text-subtle, #44546F)",
+  backgroundColor: "var(--ds-background-accent-gray-subtlest, #F1F2F4)",
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
   '&.remove-left-margin': {
     marginLeft: "var(--ds-space-negative-150, -12px)"
@@ -83,11 +82,11 @@ const textStyles = css({
   padding: `${"var(--ds-space-025, 2px)"} ${"var(--ds-space-050, 4px)"}`
 });
 const originalLabelStyles = css({
-  background: `var(--ds-background-accent-gray-subtle-pressed, ${N40})`,
+  background: "var(--ds-background-accent-gray-subtle-pressed, #DCDFE4)",
   borderRadius: `${"var(--ds-border-radius, 3px)"} ${"var(--ds-border-radius, 3px)"} 0 0`,
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
   '&.show-label': {
-    color: `var(--ds-text-subtle, ${N500})`
+    color: "var(--ds-text-subtle, #44546F)"
   },
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
   '&.inline': {

package/dist/es2019/extensibility/Extension/styles.js

@@ -1,12 +1,11 @@
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css } from '@emotion/react';
-import { N20, N20A, N70 } from '@atlaskit/theme/colors';
 import { BODIED_EXT_PADDING, EXTENSION_PADDING } from '../../styles';
 export { EXTENSION_PADDING as padding, BODIED_EXT_PADDING };
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
 export const wrapperDefault = css({
-  background: `var(--ds-background-neutral, ${N20})`,
+  background: "var(--ds-background-neutral, #091E420F)",
   borderRadius: "var(--ds-border-radius, 3px)",
   position: 'relative',
   verticalAlign: 'middle',
@@ -14,7 +13,7 @@ export const wrapperDefault = css({
   '&.with-overlay': {
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
     '.extension-overlay': {
-      background: `var(--ds-background-neutral-hovered, ${N20A})`,
+      background: "var(--ds-background-neutral-hovered, #091E4224)",
       color: 'transparent'
     },
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
@@ -53,7 +52,7 @@ export const placeholderFallbackParams = css({
   display: 'inline-block',
   maxWidth: '200px',
   marginLeft: "var(--ds-space-050, 4px)",
-  color: `var(--ds-text-subtlest, ${N70})`,
+  color: "var(--ds-text-subtlest, #626F86)",
   textOverflow: 'ellipsis',
   whiteSpace: 'nowrap',
   overflow: 'hidden'

package/dist/es2019/extensibility/MultiBodiedExtension/styles.js

@@ -1,6 +1,5 @@
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css } from '@emotion/react';
-import { N30, N500 } from '@atlaskit/theme/colors';
 import { wrapperDefault } from '../Extension/styles';
 
 // Wrapper the extension title and extensionContainer
@@ -30,11 +29,11 @@ export const mbeExtensionWrapperCSSStyles = css(wrapperDefault, {
   },
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
   '&.with-border': {
-    boxShadow: `0 0 0 1px ${`var(--ds-border, ${N30})`}`
+    boxShadow: `0 0 0 1px ${"var(--ds-border, #091E4224)"}`
   },
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
   '&.with-hover-border': {
-    boxShadow: `0 0 0 1px ${`var(--ds-border-input, ${N500})`}`
+    boxShadow: `0 0 0 1px ${"var(--ds-border-input, #8590A2)"}`
   },
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
   '&.with-padding-background-styles': {

package/dist/es2019/icons/shared/SteppedRainbowIconDecoration.js

@@ -4,7 +4,6 @@
  */
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css, jsx } from '@emotion/react';
-import { N40, N60, N80, P300, R400, T300, Y400 } from '@atlaskit/theme/colors';
 const createSteppedRainbow = colors => {
   return `
     linear-gradient(
@@ -25,8 +24,8 @@ const createSteppedRainbow = colors => {
   }).join('\n')}
     )`;
 };
-const rainbow = createSteppedRainbow([P300, T300, Y400, R400]);
-const disabledRainbow = createSteppedRainbow([N80, N60, N40, N60]);
+const rainbow = createSteppedRainbow(["var(--ds-background-accent-purple-bolder, #6E5DC6)", "var(--ds-background-accent-teal-subtle, #6CC3E0)", "var(--ds-background-accent-orange-subtle, #FEA362)", "var(--ds-background-accent-red-bolder, #C9372C)"]);
+const disabledRainbow = createSteppedRainbow(["var(--ds-background-accent-gray-subtle, #8590A2)", "var(--ds-background-accent-gray-subtle-hovered, #B3B9C4)", "var(--ds-background-accent-gray-subtle-pressed, #DCDFE4)", "var(--ds-background-accent-gray-subtle-hovered, #B3B9C4)"]);
 const barStyles = css({
   position: 'absolute',
   left: 0,

package/dist/es2019/keymaps/index.js

@@ -7,7 +7,6 @@ import React, { Fragment } from 'react';
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css, jsx } from '@emotion/react';
 import { base, keyName } from 'w3c-keyname';
-import { N400 } from '@atlaskit/theme/colors';
 import { editorCommandToPMCommand } from '../preset/editor-commands';
 import { browser } from '../utils';
 export const addAltText = makeKeyMapWithCommon('Add Alt Text', 'Mod-Alt-y');
@@ -112,7 +111,7 @@ const arrowKeysMap = {
 };
 const tooltipShortcutStyle = css({
   borderRadius: '2px',
-  backgroundColor: `var(--ds-background-inverse-subtle, ${N400})`,
+  backgroundColor: "var(--ds-background-inverse-subtle, #00000029)",
   padding: `0 ${"var(--ds-space-025, 2px)"}`,
   // NOTE: This might not actually do anything: https://atlassian.slack.com/archives/CFG3PSQ9E/p1647395052443259?thread_ts=1647394572.556029&cid=CFG3PSQ9E
   label: 'tooltip-shortcut'

package/dist/es2019/link/ConfigureLinkOverlay/StyledButton.js

@@ -6,16 +6,15 @@ import _extends from "@babel/runtime/helpers/extends";
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css, jsx } from '@emotion/react';
 import Button from '@atlaskit/button';
-import { N30A, N40A, N60A, N700 } from '@atlaskit/theme/colors';
 const buttonStyles = css({
   display: 'flex',
-  background: `var(--ds-background-neutral, ${N30A})`,
-  color: `var(--ds-icon, ${N700})`,
+  background: "var(--ds-background-neutral, #091E420F)",
+  color: "var(--ds-icon, #44546F)",
   '&:hover': {
-    background: `var(--ds-background-neutral-hovered, ${N40A})`
+    background: "var(--ds-background-neutral-hovered, #091E4224)"
   },
   '&:active': {
-    background: `var(--ds-background-neutral-pressed, ${N60A})`
+    background: "var(--ds-background-neutral-pressed, #091E424F)"
   },
   width: '1.375rem',
   height: '1.25rem'

package/dist/es2019/link/ConfigureLinkOverlay/index.js

@@ -10,8 +10,6 @@ import { useIntl } from 'react-intl-next';
 import withAnalyticsContext from '@atlaskit/analytics-next/withAnalyticsContext';
 import { NodeSelection, TextSelection } from '@atlaskit/editor-prosemirror/state';
 import PreferencesIcon from '@atlaskit/icon/glyph/preferences';
-import { N0 } from '@atlaskit/theme/colors';
-import { layers } from '@atlaskit/theme/constants';
 import Tooltip from '@atlaskit/tooltip';
 import { cardMessages } from '../../messages';
 import Dropdown from './Dropdown';
@@ -19,11 +17,11 @@ import { StyledButton } from './StyledButton';
 import { useLinkOverlayAnalyticsEvents } from './useLinkOverlayAnalyticsEvents';
 const buttonWrapperStyles = css({
   position: 'absolute',
-  zIndex: layers.card(),
+  zIndex: 100,
   display: 'inline-flex',
   top: '50%',
   transform: 'translateY(-50%)',
-  background: `var(--ds-surface-raised, ${N0})`,
+  background: "var(--ds-surface-raised, #FFFFFF)",
   borderRadius: "var(--ds-border-radius, 3px)"
 });
 const showDropdownThresholdPx = 50;

package/dist/es2019/link/LinkPicker/HyperlinkAddToolbar/HyperlinkAddToolbar.js

@@ -16,7 +16,6 @@ import withAnalyticsEvents from '@atlaskit/analytics-next/withAnalyticsEvents';
 import Page16Icon from '@atlaskit/icon-object/glyph/page/16';
 import CrossCircleIcon from '@atlaskit/icon/glyph/cross-circle';
 import { Pressable, xcss } from '@atlaskit/primitives';
-import { N200 } from '@atlaskit/theme/colors';
 import Tooltip from '@atlaskit/tooltip';
 import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE, fireAnalyticsEvent, INPUT_METHOD } from '../../../analytics';
 import { Announcer, PanelTextInput } from '../../../ui';
@@ -59,7 +58,7 @@ const textLabelMargin = css({
   marginTop: "var(--ds-space-150, 12px)"
 });
 const inputLabel = css({
-  color: `var(--ds-text-subtlest, ${N200})`,
+  color: "var(--ds-text-subtlest, #626F86)",
   paddingBottom: "var(--ds-space-050, 4px)",
   font: "var(--ds-font-body-small, normal 400 11px/16px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
   fontWeight: "var(--ds-font-weight-medium, 500)"

package/dist/es2019/link/LinkSearch/LinkSearchList.js

@@ -7,12 +7,11 @@ import { PureComponent } from 'react';
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css, jsx } from '@emotion/react';
 import Spinner from '@atlaskit/spinner';
-import { N30 } from '@atlaskit/theme/colors';
 import LinkSearchListItem from './LinkSearchListItem';
 const listContainer = css({
   paddingTop: 0,
   marginTop: "var(--ds-space-150, 12px)",
-  borderTop: `1px solid ${`var(--ds-border, ${N30})`}`
+  borderTop: `1px solid ${"var(--ds-border, #091E4224)"}`
 });
 const spinnerContainer = css({
   textAlign: 'center',

package/dist/es2019/link/LinkSearch/LinkSearchListItem.js

@@ -12,8 +12,6 @@ import { css, jsx } from '@emotion/react';
 
 import { injectIntl } from 'react-intl-next';
 import { relativeFontSizeToBase16 } from '@atlaskit/editor-shared-styles';
-import { N20, N300, N800 } from '@atlaskit/theme/colors';
-import { fontSizeSmall } from '@atlaskit/theme/constants';
 import { getCorrectAltByIconUrl } from './listItemAlts';
 import { transformTimeStamp } from './transformTimeStamp';
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
@@ -27,7 +25,7 @@ export const container = css({
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
 export const containerSelected = css({
-  backgroundColor: `var(--ds-background-neutral-subtle-hovered, ${N20})`
+  backgroundColor: "var(--ds-background-neutral-subtle-hovered, #091E420F)"
 });
 const nameWrapper = css({
   overflow: 'hidden'
@@ -35,7 +33,7 @@ const nameWrapper = css({
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
 export const nameStyle = css({
-  color: `var(--ds-text, ${N800})`,
+  color: "var(--ds-text, #172B4D)",
   overflow: 'hidden',
   textOverflow: 'ellipsis',
   whiteSpace: 'nowrap',
@@ -44,10 +42,10 @@ export const nameStyle = css({
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
 export const containerName = css({
-  color: `var(--ds-text-subtlest, ${N300})`,
+  color: "var(--ds-text-subtlest, #626F86)",
   lineHeight: '14px',
   // 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(fontSizeSmall())
+  fontSize: relativeFontSizeToBase16(11)
 });
 const iconStyle = css({
   minWidth: '16px',

package/dist/es2019/media-inline/constants.js

@@ -1,4 +1,3 @@
-import { headingSizes } from '@atlaskit/theme/typography';
 export const DEFAULT_IMAGE_WIDTH = 250;
 export const DEFAULT_IMAGE_HEIGHT = 200;
 export const DEFAULT_INLINE_IMAGE_ASPECT_RATIO = DEFAULT_IMAGE_WIDTH / DEFAULT_IMAGE_HEIGHT;
@@ -12,13 +11,16 @@ export const DEFAULT_INLINE_IMAGE_BORDER_SIZE = 0;
  *
  * There is conversation about refactoring media inline nodes to conform to
  * aligning correctly with the surrounding text.
+ *
+ * These constants originally came from `headingSizes` from the `theme` package
+ * and have been copied here to remove this package.
  */
 export const referenceHeights = {
-  p: headingSizes.h600.lineHeight - 2,
-  h1: headingSizes.h800.lineHeight + 4,
-  h2: headingSizes.h700.lineHeight + 3,
-  h3: headingSizes.h600.lineHeight + 1,
-  h4: headingSizes.h500.lineHeight + 3,
-  h5: headingSizes.h400.lineHeight + 4,
-  h6: headingSizes.h300.lineHeight + 2
+  p: 24 - 2,
+  h1: 32 + 4,
+  h2: 28 + 3,
+  h3: 24 + 1,
+  h4: 20 + 3,
+  h5: 16 + 4,
+  h6: 16 + 2
 };

package/dist/es2019/media-inline/styles.js

@@ -1,6 +1,5 @@
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css } from '@emotion/react';
-import { B300 } from '@atlaskit/theme/colors';
 import { DEFAULT_INLINE_IMAGE_ASPECT_RATIO, DEFAULT_INLINE_IMAGE_BORDER_SIZE, referenceHeights } from './constants';
 export const INLINE_IMAGE_WRAPPER_CLASS_NAME = 'media-inline-image-wrapper';
 export const INLINE_IMAGE_ASPECT_RATIO_CSS_VAR_KEY = '--editor-media-inline-image-aspect-ratio';
@@ -76,7 +75,7 @@ export const wrapperStyle = css({
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
 export const selectedStyle = css({
   cursor: 'pointer',
-  boxShadow: `0 0 0 1px ${`var(--ds-border-selected, ${B300})`}`,
+  boxShadow: `0 0 0 1px ${"var(--ds-border-selected, #0C66E4)"}`,
   outline: 'none'
 });
 

package/dist/es2019/media-inline/views/error-view.js

@@ -6,7 +6,6 @@
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { jsx } from '@emotion/react';
 import WarningIcon from '@atlaskit/icon/glyph/warning';
-import { R300 } from '@atlaskit/theme/colors';
 import Tooltip from '@atlaskit/tooltip';
 import { ICON_SIZE_THRESOLD } from './constants';
 import { Frame } from './frame';
@@ -27,6 +26,6 @@ export const InlineImageCardErrorView = ({
   }, jsx(IconWrapper, null, icon || jsx(WarningIcon, {
     label: "error",
     size: height > ICON_SIZE_THRESOLD ? 'medium' : 'small',
-    primaryColor: `var(--ds-icon-danger, ${R300})`
+    primaryColor: "var(--ds-icon-danger, #C9372C)"
   }))));
 };

package/dist/es2019/media-inline/views/wrapper.js

@@ -1,6 +1,5 @@
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css } from '@emotion/react';
-import { N30A, N40A, N900 } from '@atlaskit/theme/colors';
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
 export const wrapperStyle = css({
   display: 'inline-flex',
@@ -10,11 +9,11 @@ export const wrapperStyle = css({
   justifyContent: 'center',
   boxDecorationBreak: 'clone',
   borderRadius: `${"var(--ds-border-radius, 3px)"}`,
-  color: `${`var(--ds-text, ${N900})`}`,
-  backgroundColor: `${`var(--ds-background-neutral, ${N30A})`}`,
+  color: `${"var(--ds-text, #172B4D)"}`,
+  backgroundColor: `${"var(--ds-background-neutral, #091E420F)"}`,
   transition: '0.1s all ease-in-out',
   cursor: 'pointer',
   '&:hover': {
-    backgroundColor: `${`var(--ds-background-neutral-hovered, ${N40A})`}`
+    backgroundColor: `${"var(--ds-background-neutral-hovered, #091E4224)"}`
   }
 });

package/dist/es2019/media-single/CommentBadge.js

@@ -10,7 +10,6 @@ import debounce from 'lodash/debounce';
 import CustomThemeButton from '@atlaskit/button/custom-theme-button';
 import { akEditorUnitZIndex } from '@atlaskit/editor-shared-styles';
 import CommentIcon from '@atlaskit/icon/glyph/comment';
-import { layers } from '@atlaskit/theme/constants';
 import Tooltip from '@atlaskit/tooltip';
 import { commentMessages as messages } from '../media';
 const commentBadgeWrapper = css({
@@ -25,7 +24,7 @@ const commentBadgeWrapper = css({
 const commentBadgeEditorOverrides = badgeOffsetRight => css({
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
   right: badgeOffsetRight,
-  zIndex: layers.card()
+  zIndex: 100
 });
 export const getBadgeSize = (width, height) => {
   // width is the original width of image, not resized or currently rendered to user. Defaulting to medium for now

package/dist/es2019/monitoring/error.js

@@ -1,7 +1,7 @@
 import { isFedRamp } from './environment';
 const SENTRY_DSN = 'https://0b10c8e02fb44d8796c047b102c9bee8@o55978.ingest.sentry.io/4505129224110080';
 const packageName = 'editor-common'; // Sentry doesn't accept '/' in its releases https://docs.sentry.io/platforms/javascript/configuration/releases/
-const packageVersion = "92.1.2";
+const packageVersion = "93.0.0";
 const sanitiseSentryEvents = (data, _hint) => {
   // Remove URL as it has UGC
   // TODO: Sanitise the URL instead of just removing it