@atlaskit/editor-common 92.1.2 → 93.1.0

package/dist/es2019/ui-color/ColorPalette/Palettes/panelBackgroundPalette.js

@@ -1,73 +1,70 @@
-// AFP-2532 TODO: Fix automatic suppressions below
-// eslint-disable-next-line @atlassian/tangerine/import/entry-points
-import { colors } from '@atlaskit/theme';
 import { darkPanelColors } from '../../../panel';
 import { DEFAULT_BORDER_COLOR } from './common';
 /** this is not new usage - old code extracted from editor-core */
 /* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
 export const panelBackgroundPalette = [{
   label: 'White',
-  value: colors.N0
+  value: '#FFFFFF'
 }, {
   label: 'Light blue',
-  value: colors.B50
+  value: '#DEEBFF'
 }, {
   label: 'Light teal',
-  value: colors.T50
+  value: '#E6FCFF'
 }, {
   label: 'Light green',
-  value: colors.G50
+  value: '#E3FCEF'
 }, {
   label: 'Light yellow',
-  value: colors.Y50
+  value: '#FFFAE6'
 }, {
   label: 'Light red',
-  value: colors.R50
+  value: '#FFEBE6'
 }, {
   label: 'Light purple',
-  value: colors.P50
+  value: '#EAE6FF'
 }, {
   label: 'Light gray',
-  value: colors.N20
+  value: '#F4F5F7'
 }, {
   label: 'Blue',
-  value: colors.B75
+  value: '#B3D4FF'
 }, {
   label: 'Teal',
-  value: colors.T75
+  value: '#B3F5FF'
 }, {
   label: 'Green',
-  value: colors.G75
+  value: '#ABF5D1'
 }, {
   label: 'Yellow',
-  value: colors.Y75
+  value: '#FFF0B3'
 }, {
   label: 'Red',
-  value: colors.R75
+  value: '#FFBDAD'
 }, {
   label: 'Purple',
-  value: colors.P75
+  value: '#C0B6F2'
 }, {
   label: 'Gray',
-  value: colors.N60
+  value: '#B3BAC5'
 }, {
   label: 'Dark blue',
-  value: colors.B100
+  value: '#4C9AFF'
 }, {
   label: 'Dark teal',
-  value: colors.T100
+  value: '#79E2F2'
 }, {
   label: 'Dark green',
-  value: colors.G200
+  value: '#57D9A3'
 }, {
   label: 'Dark yellow',
-  value: colors.Y200
+  value: '#FFC400'
 }, {
   label: 'Dark red',
-  value: colors.R100
+  value: '#FF8F73'
 }, {
   label: 'Dark purple',
-  value: colors.P100
+  value: '#998DD9'
 }].map(color => ({
   ...color,
   border: `var(--ds-border, ${DEFAULT_BORDER_COLOR})`

package/dist/es2019/ui-color/ColorPalette/index.js

@@ -8,7 +8,6 @@ import React from 'react';
 import { jsx } from '@emotion/react';
 import chromatism from 'chromatism';
 import { injectIntl } from 'react-intl-next';
-import { N0, N500 } from '@atlaskit/theme/colors';
 import { useThemeObserver } from '@atlaskit/tokens';
 import Color from './Color';
 import getColorMessage from './Palettes/getColorMessage';
@@ -27,7 +26,7 @@ function getCheckMarkColor(color, useIconToken) {
   const colorValue = !!tokenVal ? tokenVal : color;
 
   // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
-  const contrastColor = [N0, N500].sort((a, b) => chromatism.difference(b, colorValue) - chromatism.difference(a, colorValue))[0];
+  const contrastColor = ['#FFFFFF', '#42526E'].sort((a, b) => chromatism.difference(b, colorValue) - chromatism.difference(a, colorValue))[0];
   if (!useIconToken) {
     return contrastColor;
   }
@@ -36,7 +35,7 @@ function getCheckMarkColor(color, useIconToken) {
   // they are only intended for use with text colors (and there are different tokens
   // planned to be used when this extended to be used with other palettes).
   // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
-  return contrastColor === N0 ? `var(--ds-icon-inverse, ${N0})` : `var(--ds-icon, ${N500})`;
+  return contrastColor === '#FFFFFF' ? "var(--ds-icon-inverse, #FFFFFF)" : "var(--ds-icon, #44546F)";
 }
 const ColorPalette = props => {
   const {

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

@@ -4,7 +4,6 @@ export { DEFAULT_COLOR_PICKER_COLUMNS, getColorsPerRowFromPalette, getSelectedRo
 export { default as cellBackgroundColorPalette } from './ColorPalette/Palettes/cellBackgroundColorPalette';
 export { default as colorPaletteMessages } from './ColorPalette/Palettes/paletteMessages';
 export { panelBackgroundPalette, panelDarkModeBackgroundPalette } from './ColorPalette/Palettes/panelBackgroundPalette';
-export { lightModeStatusColorPalette, darkModeStatusColorPalette } from './ColorPalette/Palettes/statusColorPalette';
 export { textColorPalette } from './ColorPalette/Palettes/textColorPalette';
 export { highlightColorPalette, REMOVE_HIGHLIGHT_COLOR } from './ColorPalette/Palettes/highlightColorPalette';
 export { backgroundPaletteTooltipMessages, borderPaletteTooltipMessages, chartsColorPaletteTooltipMessages, textPaletteTooltipMessages } from './ColorPalette/Palettes';

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

@@ -10,7 +10,6 @@ import withAnalyticsContext from '@atlaskit/analytics-next/withAnalyticsContext'
 import withAnalyticsEvents from '@atlaskit/analytics-next/withAnalyticsEvents';
 import Button from '@atlaskit/button/standard-button';
 import ExpandIcon from '@atlaskit/icon/glyph/chevron-down';
-import { N0, N30A, N60A } from '@atlaskit/theme/colors';
 import Tooltip from '@atlaskit/tooltip';
 import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, editorAnalyticsChannel, EVENT_TYPE } from '../../analytics';
 import { ColorPalette, DEFAULT_BORDER_COLOR, getSelectedRowAndColumnFromPalette } from '../../ui-color';
@@ -33,8 +32,8 @@ const colorPickerExpandContainer = css({
 // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
 const colorPickerWrapper = () => css({
   borderRadius: "var(--ds-border-radius, 3px)",
-  backgroundColor: `var(--ds-surface-overlay, ${N0})`,
-  boxShadow: `var(--ds-shadow-overlay, ${`0 4px 8px -2px ${N60A}, 0 0 1px ${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)"} 0px`
 });
 /* eslint-enable @atlaskit/design-system/ensure-design-token-usage */
@@ -184,7 +183,7 @@ const ColorPickerButton = props => {
         margin: `0px ${"var(--ds-space-025, 2px)"}`
       },
       '&:hover': {
-        background: `var(--ds-background-neutral-subtle-hovered, ${N30A})`
+        background: "var(--ds-background-neutral-subtle-hovered, #091E420F)"
       }
     });
   };

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

@@ -10,7 +10,6 @@ import { css, jsx } from '@emotion/react';
 import { akEditorFloatingPanelZIndex } from '@atlaskit/editor-shared-styles';
 import { CustomItem, MenuGroup, Section } from '@atlaskit/menu';
 import { fg } from '@atlaskit/platform-feature-flags';
-import { B100, N70, N900 } from '@atlaskit/theme/colors';
 import Tooltip from '@atlaskit/tooltip';
 import { DropdownMenuSharedCssClassName } from '../../styles';
 import { KeyDownHandlerContext } from '../../ui-menu/ToolbarArrowKeyNavigationProvider';
@@ -27,7 +26,7 @@ const wrapper = css({
   }
 });
 const focusedMenuItemStyle = css({
-  boxShadow: `inset 0px 0px 0px 2px ${`var(--ds-border-focused, ${B100})`}`,
+  boxShadow: `inset 0px 0px 0px 2px ${"var(--ds-border-focused, #388BFF)"}`,
   outline: 'none'
 });
 const buttonStyles = (isActive, submenuActive) => {
@@ -55,7 +54,7 @@ const buttonStyles = (isActive, submenuActive) => {
     // eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression -- needs manual remediation
     return css`
 			> span:hover[aria-disabled='false'] {
-				color: ${`var(--ds-text, ${N900})`};
+				color: ${"var(--ds-text, #172B4D)"};
 				background-color: ${"var(--ds-background-neutral-subtle-hovered, rgb(244, 245, 247))"};
 			}
 			${!submenuActive && `
@@ -63,7 +62,7 @@ const buttonStyles = (isActive, submenuActive) => {
 						background-color: ${"var(--ds-background-neutral-subtle-pressed, rgb(179, 212, 255))"};
 					}`}
 			> span[aria-disabled='true'] {
-				color: ${`var(--ds-text-disabled, ${N70})`};
+				color: ${"var(--ds-text-disabled, #091E424F)"};
 			}
 			:focus > span[aria-disabled='false'] {
 				${focusedMenuItemStyle};

package/dist/esm/analytics/types/enums.js

@@ -219,6 +219,7 @@ export var ACTION_SUBJECT = /*#__PURE__*/function (ACTION_SUBJECT) {
   ACTION_SUBJECT["LIST"] = "list";
   ACTION_SUBJECT["MEDIA"] = "media";
   ACTION_SUBJECT["MEDIA_SINGLE"] = "mediaSingle";
+  ACTION_SUBJECT["MENTION"] = "mention";
   ACTION_SUBJECT["NESTED_EXPAND"] = "nestedExpand";
   ACTION_SUBJECT["PANEL"] = "panel";
   ACTION_SUBJECT["PICKER"] = "picker";
@@ -324,6 +325,7 @@ export var ACTION_SUBJECT_ID = /*#__PURE__*/function (ACTION_SUBJECT_ID) {
   ACTION_SUBJECT_ID["MEDIA_LINK"] = "mediaLink";
   ACTION_SUBJECT_ID["MEDIA_SINGLE"] = "mediaSingle";
   ACTION_SUBJECT_ID["MENTION"] = "mention";
+  ACTION_SUBJECT_ID["MENTION_PROVIDER"] = "mentionProvider";
   ACTION_SUBJECT_ID["NESTED_EXPAND"] = "nestedExpand";
   ACTION_SUBJECT_ID["NODE"] = "node";
   ACTION_SUBJECT_ID["OPEN_LINK"] = "openLink";

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

@@ -15,7 +15,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';
@@ -112,9 +111,9 @@ function CategoryListItem(_ref2) {
         marginLeft: "var(--ds-space-025, 2px)",
         height: '100%',
         width: '100%',
-        color: category.name !== selectedCategory ? "var(--ds-text, ".concat(N800, ")") : "var(--ds-text-selected, ".concat(B400, ")")
+        color: category.name !== selectedCategory ? "var(--ds-text, #172B4D)" : "var(--ds-text-selected, #0C66E4)"
       }, category.name === selectedCategory && {
-        background: "var(--ds-background-selected, ".concat(B50, ")")
+        background: "var(--ds-background-selected, #E9F2FF)"
       })
     }, rest);
   }, [category.name, selectedCategory]);

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

@@ -17,8 +17,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';
@@ -38,7 +36,7 @@ export var itemIcon = css({
   overflow: 'hidden',
   border: "1px solid ".concat("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: "".concat(borderRadius(), "px"),
+  borderRadius: "var(--ds-border-radius, 3px)",
   boxSizing: 'border-box',
   display: 'flex',
   justifyContent: 'center',
@@ -326,7 +324,7 @@ var 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 ".concat(ELEMENT_LIST_PADDING, "px ", "var(--ds-border-focused, ".concat(B100, ")"))
+      boxShadow: "0 0 0 ".concat(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
@@ -373,7 +371,7 @@ var 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, ".concat(N200, ")"),
+  color: "var(--ds-text-subtle, #44546F)",
   marginTop: "var(--ds-space-025, 2px)"
 });
 var itemText = css({

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

@@ -13,7 +13,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';
@@ -157,7 +156,7 @@ var wrapperInline = css({
 });
 var elementBeforeInput = css({
   margin: "1px ".concat("var(--ds-space-075, 6px)", " 0 ", "var(--ds-space-100, 8px)"),
-  color: "var(--ds-icon, ".concat(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/esm/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 var GRID_SIZE = gridSize();
+export var GRID_SIZE = 8;
 export var DEVICE_BREAKPOINT_NUMBERS = {
   small: GRID_SIZE * 40,
   medium: GRID_SIZE * 75,

package/dist/esm/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 var widerLayoutClassName = 'wider-layout';
 
@@ -18,11 +17,11 @@ export var 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 ".concat("var(--ds-border, ".concat(N30, ")"))
+    boxShadow: "0 0 0 1px ".concat("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 ".concat("var(--ds-border-input, ".concat(N500, ")"))
+    boxShadow: "0 0 0 1px ".concat("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 var header = css({
 export var content = css({
   padding: "var(--ds-space-100, 8px)",
   background: "var(--ds-surface, white)",
-  border: "1px solid ".concat("var(--ds-border, ".concat(N30, ")")),
+  border: "1px solid ".concat("var(--ds-border, #091E4224)"),
   borderRadius: "var(--ds-border-radius, 3px)",
   cursor: 'initial',
   width: '100%',

package/dist/esm/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 var 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 ".concat("var(--ds-border-input, ".concat(N500, ")"))
+    boxShadow: "0 0 0 1px ".concat("var(--ds-border-input, #8590A2)")
   }
 });
 

package/dist/esm/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';
 var containerStyles = css({
   textAlign: 'left',
@@ -47,11 +46,11 @@ var sharedLabelStyles = css({
   },
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
   '&.bodied-background': {
-    background: "var(--ds-surface, ".concat(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 ".concat("var(--ds-border, ".concat(N30, ")"))
+    boxShadow: "0 0 0 1px ".concat("var(--ds-border, #091E4224)")
   }
 });
 var buttonLabelStyles = css({
@@ -60,8 +59,8 @@ var 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, ".concat(N800, ")"),
-  backgroundColor: "var(--ds-background-accent-gray-subtlest, ".concat(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 @@ var textStyles = css({
   padding: "var(--ds-space-025, 2px)".concat(" ", "var(--ds-space-050, 4px)")
 });
 var originalLabelStyles = css({
-  background: "var(--ds-background-accent-gray-subtle-pressed, ".concat(N40, ")"),
+  background: "var(--ds-background-accent-gray-subtle-pressed, #DCDFE4)",
   borderRadius: "var(--ds-border-radius, 3px)".concat(" ", "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, ".concat(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/esm/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 var wrapperDefault = css({
-  background: "var(--ds-background-neutral, ".concat(N20, ")"),
+  background: "var(--ds-background-neutral, #091E420F)",
   borderRadius: "var(--ds-border-radius, 3px)",
   position: 'relative',
   verticalAlign: 'middle',
@@ -14,7 +13,7 @@ export var 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, ".concat(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 var placeholderFallbackParams = css({
   display: 'inline-block',
   maxWidth: '200px',
   marginLeft: "var(--ds-space-050, 4px)",
-  color: "var(--ds-text-subtlest, ".concat(N70, ")"),
+  color: "var(--ds-text-subtlest, #626F86)",
   textOverflow: 'ellipsis',
   whiteSpace: 'nowrap',
   overflow: 'hidden'

package/dist/esm/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 var 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 ".concat("var(--ds-border, ".concat(N30, ")"))
+    boxShadow: "0 0 0 1px ".concat("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 ".concat("var(--ds-border-input, ".concat(N500, ")"))
+    boxShadow: "0 0 0 1px ".concat("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/esm/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';
 var createSteppedRainbow = function createSteppedRainbow(colors) {
   return "\n    linear-gradient(\n      to right,\n      ".concat(colors.map(function (color, i) {
     var inc = 100 / colors.length;
@@ -18,8 +17,8 @@ var createSteppedRainbow = function createSteppedRainbow(colors) {
     return "\n            ".concat(color, " ").concat((pos - 1) * inc, "%,\n            ").concat(color, " ").concat(pos * inc, "%,\n          ");
   }).join('\n'), "\n    )");
 };
-var rainbow = createSteppedRainbow([P300, T300, Y400, R400]);
-var disabledRainbow = createSteppedRainbow([N80, N60, N40, N60]);
+var 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)"]);
+var 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)"]);
 var barStyles = css({
   position: 'absolute',
   left: 0,

package/dist/esm/keymaps/index.js

@@ -8,7 +8,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 var addAltText = makeKeyMapWithCommon('Add Alt Text', 'Mod-Alt-y');
@@ -102,6 +101,8 @@ export var toggleHighlightPalette = makeKeyMapWithCommon('Toggle Highlight Palet
 export var focusToContextMenuTrigger = makeKeyMapWithCommon('Focus table context menu trigger', 'Shift-F10');
 export var dragToMoveUp = makeKeyMapWithCommon('Move node up in the document', 'Ctrl-Shift-ArrowUp');
 export var dragToMoveDown = makeKeyMapWithCommon('Move node down in the document', 'Ctrl-Shift-ArrowDown');
+export var dragToMoveLeft = makeKeyMapWithCommon('Move node to the left column in the document', 'Mod-Ctrl-Shift-ArrowLeft');
+export var dragToMoveRight = makeKeyMapWithCommon('Move node to the right column in the document', 'Mod-Ctrl-Shift-ArrowRight');
 export var showElementDragHandle = makeKeyMapWithCommon('Show drag handle for editor element', 'Ctrl-Shift-h');
 export var continueInRovoChat = makeKeyMapWithCommon('Continue in Rovo chat', 'Alt-Enter');
 var arrowKeysMap = {
@@ -113,7 +114,7 @@ var arrowKeysMap = {
 };
 var tooltipShortcutStyle = css({
   borderRadius: '2px',
-  backgroundColor: "var(--ds-background-inverse-subtle, ".concat(N400, ")"),
+  backgroundColor: "var(--ds-background-inverse-subtle, #00000029)",
   padding: "0 ".concat("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/esm/link/ConfigureLinkOverlay/StyledButton.js

@@ -8,16 +8,15 @@ var _excluded = ["innerRef"];
 // 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';
 var buttonStyles = css({
   display: 'flex',
-  background: "var(--ds-background-neutral, ".concat(N30A, ")"),
-  color: "var(--ds-icon, ".concat(N700, ")"),
+  background: "var(--ds-background-neutral, #091E420F)",
+  color: "var(--ds-icon, #44546F)",
   '&:hover': {
-    background: "var(--ds-background-neutral-hovered, ".concat(N40A, ")")
+    background: "var(--ds-background-neutral-hovered, #091E4224)"
   },
   '&:active': {
-    background: "var(--ds-background-neutral-pressed, ".concat(N60A, ")")
+    background: "var(--ds-background-neutral-pressed, #091E424F)"
   },
   width: '1.375rem',
   height: '1.25rem'

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

@@ -11,8 +11,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';
@@ -20,11 +18,11 @@ import { StyledButton } from './StyledButton';
 import { useLinkOverlayAnalyticsEvents } from './useLinkOverlayAnalyticsEvents';
 var buttonWrapperStyles = css({
   position: 'absolute',
-  zIndex: layers.card(),
+  zIndex: 100,
   display: 'inline-flex',
   top: '50%',
   transform: 'translateY(-50%)',
-  background: "var(--ds-surface-raised, ".concat(N0, ")"),
+  background: "var(--ds-surface-raised, #FFFFFF)",
   borderRadius: "var(--ds-border-radius, 3px)"
 });
 var showDropdownThresholdPx = 50;

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

@@ -28,7 +28,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';
@@ -71,7 +70,7 @@ var textLabelMargin = css({
   marginTop: "var(--ds-space-150, 12px)"
 });
 var inputLabel = css({
-  color: "var(--ds-text-subtlest, ".concat(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/esm/link/LinkSearch/LinkSearchList.js

@@ -14,12 +14,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';
 var listContainer = css({
   paddingTop: 0,
   marginTop: "var(--ds-space-150, 12px)",
-  borderTop: "1px solid ".concat("var(--ds-border, ".concat(N30, ")"))
+  borderTop: "1px solid ".concat("var(--ds-border, #091E4224)")
 });
 var spinnerContainer = css({
   textAlign: 'center',

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

@@ -20,8 +20,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
@@ -35,7 +33,7 @@ export var container = css({
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
 export var containerSelected = css({
-  backgroundColor: "var(--ds-background-neutral-subtle-hovered, ".concat(N20, ")")
+  backgroundColor: "var(--ds-background-neutral-subtle-hovered, #091E420F)"
 });
 var nameWrapper = css({
   overflow: 'hidden'
@@ -43,7 +41,7 @@ var nameWrapper = css({
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
 export var nameStyle = css({
-  color: "var(--ds-text, ".concat(N800, ")"),
+  color: "var(--ds-text, #172B4D)",
   overflow: 'hidden',
   textOverflow: 'ellipsis',
   whiteSpace: 'nowrap',
@@ -52,10 +50,10 @@ export var nameStyle = css({
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
 export var containerName = css({
-  color: "var(--ds-text-subtlest, ".concat(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)
 });
 var iconStyle = css({
   minWidth: '16px',