@atlaskit/editor-plugin-table 18.1.3 → 18.1.5

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

@@ -163,7 +163,9 @@ const FloatingContextualButtonInner = /*#__PURE__*/React.memo(props => {
     target: targetCellRef,
     mountTo: tableWrapper || mountPoint,
     boundariesElement: targetCellRef,
-    scrollableElement: scrollableElement,
+    scrollableElement: scrollableElement
+    // eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed) 
+    ,
     offset: [BUTTON_OFFSET, -BUTTON_OFFSET],
     forcePlacement: true,
     allowOutOfBounds: true,

package/dist/es2019/ui/FloatingContextualButton/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 { N0, N20, N30A, N700 } from '@atlaskit/theme/colors';
 import { contextualMenuTriggerSize } from '../consts';
 export const tableFloatingCellButtonStyles = () => css({
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
   '> div': {
     // Sits behind button to provide surface-color background
-    background: `var(--ds-surface, ${N20})`,
+    background: "var(--ds-surface, #FFFFFF)",
     borderRadius: "var(--ds-radius-small, 3px)",
     display: 'flex',
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
@@ -16,10 +15,10 @@ export const tableFloatingCellButtonStyles = () => css({
   },
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
   '&& button': {
-    background: "var(--ds-background-neutral, none)",
+    background: "var(--ds-background-neutral, #0515240F)",
     flexDirection: 'column',
     margin: "var(--ds-space-025, 2px)",
-    outline: `2px solid ${`var(--ds-surface, ${N0})`}`,
+    outline: `2px solid ${"var(--ds-surface, #FFFFFF)"}`,
     borderRadius: '1px',
     padding: 0,
     height: 'calc(100% - 4px)',
@@ -27,11 +26,11 @@ export const tableFloatingCellButtonStyles = () => css({
   },
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
   '&& button:hover': {
-    background: `var(--ds-background-neutral-hovered, ${N30A})`
+    background: "var(--ds-background-neutral-hovered, #0B120E24)"
   },
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
   '&& button:active': {
-    background: "var(--ds-background-neutral-pressed, rgba(179, 212, 255, 0.6))"
+    background: "var(--ds-background-neutral-pressed, #080F214A)"
   },
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
   '&& button > span': {
@@ -45,14 +44,14 @@ export const tableFloatingCellButtonStyles = () => css({
 export const tableFloatingCellButtonSelectedStyles = () => css({
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
   '&& button': {
-    background: `var(--ds-background-selected, ${N700})`
+    background: "var(--ds-background-selected, #E9F2FE)"
   },
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
   '&& button:hover': {
-    background: `var(--ds-background-selected-hovered, ${N700})`
+    background: "var(--ds-background-selected-hovered, #CFE1FD)"
   },
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
   '&& button:active': {
-    background: `var(--ds-background-selected-pressed, ${N700})`
+    background: "var(--ds-background-selected-pressed, #8FB8F6)"
   }
 });

package/dist/es2019/ui/FloatingContextualMenu/ContextualMenu.js

@@ -150,7 +150,9 @@ export class ContextualMenu extends Component {
           }, jsx(ArrowKeyNavigationProvider, {
             type: ArrowKeyNavigationType.COLOR,
             selectedRowIndex: selectedRowIndex || 0,
-            selectedColumnIndex: selectedColumnIndex || 0,
+            selectedColumnIndex: selectedColumnIndex || 0
+            // eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed) 
+            ,
             handleClose: () => {
               this.setState({
                 isSubmenuOpen: false
@@ -170,7 +172,9 @@ export class ContextualMenu extends Component {
           }, jsx(ColorPalette, {
             cols: 7,
             onClick: this.setColor,
-            selectedColor: (node === null || node === void 0 ? void 0 : (_node$attrs2 = node.attrs) === null || _node$attrs2 === void 0 ? void 0 : _node$attrs2.background) || '#ffffff',
+            selectedColor: (node === null || node === void 0 ? void 0 : (_node$attrs2 = node.attrs) === null || _node$attrs2 === void 0 ? void 0 : _node$attrs2.background) || '#ffffff'
+            // eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed) 
+            ,
             paletteOptions: {
               palette: cellBackgroundColorPalette,
               paletteColorTooltipMessages: backgroundPaletteTooltipMessages,
@@ -844,6 +848,7 @@ export class ContextualMenu extends Component {
     }, jsx(DropdownMenu
     //This needs be removed when the a11y is completely handled
     //Disabling key navigation now as it works only partially
+    // eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed) 
     , {
       arrowKeyNavigationProviderOptions: {
         type: ArrowKeyNavigationType.MENU,
@@ -856,7 +861,9 @@ export class ContextualMenu extends Component {
       onMouseEnter: this.handleItemMouseEnter,
       onMouseLeave: this.handleItemMouseLeave,
       fitHeight: 188,
-      fitWidth: isDragAndDropEnabled ? contextualMenuDropdownWidthDnD : contextualMenuDropdownWidth,
+      fitWidth: isDragAndDropEnabled ? contextualMenuDropdownWidthDnD : contextualMenuDropdownWidth
+      // eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed) 
+      ,
       shouldFocusFirstItem: () => {
         return Boolean(isCellMenuOpenByKeyboard);
       },

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

@@ -84,7 +84,9 @@ const FloatingContextualMenu = ({
     // in table, but below floating dialogs like typeaheads, pickers, etc.
     ,
     zIndex: parentSticky ? akEditorFloatingDialogZIndex : akEditorFloatingOverlapPanelZIndex,
-    forcePlacement: true,
+    forcePlacement: true
+    // eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed) 
+    ,
     offset: [-7, 0],
     stick: true
   }, jsx("div", {
@@ -93,7 +95,9 @@ const FloatingContextualMenu = ({
   // Remove ! during platform_editor_hydratable_ui cleanup
   // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
   , {
-    editorView: editorView,
+    editorView: editorView
+    // eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed) 
+    ,
     offset: [contextualMenuTriggerSize / 2, -contextualMenuTriggerSize],
     isOpen: isOpen,
     targetCellPosition: targetCellPosition,

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

@@ -1,7 +1,6 @@
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css } from '@emotion/react';
 import { tableBackgroundBorderColor } from '@atlaskit/adf-schema';
-import { N60A, N90 } from '@atlaskit/theme/colors';
 import { TableCssClassName as ClassName } from '../../types';
 import { contextualMenuDropdownWidth, contextualMenuDropdownWidthDnD } from '../consts';
 export const cellColourPreviewStyles = selectedColor => css({
@@ -15,8 +14,8 @@ export const tablePopupStyles = (isDragAndDropEnabled
 ) => css`
 	.${ClassName.CONTEXTUAL_SUBMENU} {
 		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: block;
 		position: absolute;
 		top: 0;
@@ -44,7 +43,7 @@ export const tablePopupStyles = (isDragAndDropEnabled
 			content: '›';
 			margin-left: ${"var(--ds-space-050, 4px)"};
 			line-height: 20px;
-			color: ${`var(--ds-icon, ${N90})`};
+			color: ${"var(--ds-icon, #292A2E)"};
 		}
 	}
 
@@ -64,7 +63,7 @@ export const tablePopupStyles = (isDragAndDropEnabled
 			content: '›';
 			margin-left: ${"var(--ds-space-050, 4px)"};
 			line-height: 14px;
-			color: ${`var(--ds-icon, ${N90})`};
+			color: ${"var(--ds-icon, #292A2E)"};
 		}
 	}
 `;

package/dist/es2019/ui/FloatingDragMenu/DragMenu.js

@@ -313,7 +313,9 @@ const DragMenu = /*#__PURE__*/React.memo(({
       }, jsx(ArrowKeyNavigationProvider, {
         type: ArrowKeyNavigationType.COLOR,
         selectedRowIndex: selectedRowIndex,
-        selectedColumnIndex: selectedColumnIndex,
+        selectedColumnIndex: selectedColumnIndex
+        // eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed) 
+        ,
         handleClose: () => {
           const keyboardEvent = new KeyboardEvent('keydown', {
             key: 'ArrowDown',
@@ -328,11 +330,15 @@ const DragMenu = /*#__PURE__*/React.memo(({
         isPopupPositioned: true,
         isOpenedByKeyboard: isKeyboardModeActive
       }, jsx(ColorPalette, {
-        cols: colorPalletteColumns,
+        cols: colorPalletteColumns
+        // eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed) 
+        ,
         onClick: color => {
           setColor(color);
         },
-        selectedColor: background,
+        selectedColor: background
+        // eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed) 
+        ,
         paletteOptions: {
           palette: cellBackgroundColorPalette,
           paletteColorTooltipMessages: backgroundPaletteTooltipMessages,
@@ -561,7 +567,9 @@ const DragMenu = /*#__PURE__*/React.memo(({
     api: api,
     userIntent: "tableDragMenuPopupOpen"
   }, jsx(DropdownMenu, {
-    disableKeyboardHandling: isSubmenuOpen,
+    disableKeyboardHandling: isSubmenuOpen
+    // eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed) 
+    ,
     section: {
       hasSeparator: true
     },

package/dist/es2019/ui/FloatingDragMenu/DropdownMenu.js

@@ -44,13 +44,19 @@ export const DropdownMenu = ({
     return /*#__PURE__*/React.createElement(DropListWithOutsideListeners, {
       isOpen: true,
       shouldFitContainer: true,
-      position: popupPlacement.join(' '),
-      handleClickOutside: () => handleClose('editor'),
+      position: popupPlacement.join(' ')
+      // eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed) 
+      ,
+      handleClickOutside: () => handleClose('editor')
+      // eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed) 
+      ,
       handleEscapeKeydown: () => {
         if (!disableKeyboardHandling) {
           handleClose('handle');
         }
-      },
+      }
+      // eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed) 
+      ,
       handleEnterKeydown: e => {
         if (!disableKeyboardHandling) {
           e.preventDefault();
@@ -140,13 +146,17 @@ export const DropdownMenu = ({
       target: targetRefDiv,
       mountTo: mountPoint,
       boundariesElement: boundariesElement,
-      scrollableElement: scrollableElement,
+      scrollableElement: scrollableElement
+      // eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed) 
+      ,
       onPlacementChanged: placement => {
         setPopupPlacement(placement);
       },
       fitHeight: fitHeight,
       fitWidth: fitWidth,
-      zIndex: akEditorFloatingPanelZIndex,
+      zIndex: akEditorFloatingPanelZIndex
+      // eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed) 
+      ,
       offset: [offsetX, offsetY],
       allowOutOfBounds: true // required as this popup is child of a parent popup, should be allowed to be out of bound of the parent popup, otherwise horizontal offset is not right
     }, /*#__PURE__*/React.createElement(ArrowKeyNavigationProvider, {

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

@@ -1,7 +1,6 @@
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css } from '@emotion/react';
 import { tableBackgroundBorderColor } from '@atlaskit/adf-schema';
-import { N60A, N90 } from '@atlaskit/theme/colors';
 import { TableCssClassName as ClassName } from '../../types';
 import { dragMenuDropdownWidth, TABLE_DRAG_MENU_MENU_GROUP_BEFORE_HEIGHT, TABLE_DRAG_MENU_PADDING_TOP, TABLE_DRAG_MENU_SORT_GROUP_HEIGHT } from '../consts';
 export const cellColourPreviewStyles = selectedColor => css({
@@ -15,8 +14,8 @@ export const cellColourPreviewStyles = selectedColor => css({
 export const dragMenuBackgroundColorStyles = () => css`
 	.${ClassName.DRAG_SUBMENU} {
 		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: block;
 		position: absolute;
 		top: ${TABLE_DRAG_MENU_PADDING_TOP + TABLE_DRAG_MENU_SORT_GROUP_HEIGHT + TABLE_DRAG_MENU_MENU_GROUP_BEFORE_HEIGHT}px; /* move the submenu down when 'sort increasing/decreasing' appear before background color picker */
@@ -44,7 +43,7 @@ export const dragMenuBackgroundColorStyles = () => css`
 			content: '›';
 			margin-left: ${"var(--ds-space-050, 4px)"};
 			line-height: 14px;
-			color: ${`var(--ds-icon, ${N90})`};
+			color: ${"var(--ds-icon, #292A2E)"};
 		}
 	}
 `;

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

@@ -43,7 +43,9 @@ export const SizeSelector = ({
   const onUnmount = () => {
     api === null || api === void 0 ? void 0 : api.core.actions.focus();
   };
-  return jsx(TableSelectorPopup, {
+  return jsx(TableSelectorPopup
+  // eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed) 
+  , {
     defaultSize: {
       row: DEFAULT_TABLE_SELECTOR_ROWS,
       col: DEFAULT_TABLE_SELECTOR_COLS

package/dist/es2019/ui/TableFloatingControls/RowControls/DragControls.js

@@ -250,7 +250,9 @@ export const DragControls = ({
   , {
     key: `drop-target-${index}`,
     index: index,
-    localId: currentNodeLocalId,
+    localId: currentNodeLocalId
+    // eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed) 
+    ,
     style: {
       // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
       gridColumn: '1 / span 3',

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

@@ -12,7 +12,6 @@ import { akEditorSelectedNodeClassName, akEditorSmallZIndex, akEditorStickyHeade
 import { scrollbarStyles } from '@atlaskit/editor-shared-styles/scrollbar';
 import { hideNativeBrowserTextSelectionStyles } from '@atlaskit/editor-shared-styles/selection';
 import { fg } from '@atlaskit/platform-feature-flags';
-import { N0, N40A, R500 } from '@atlaskit/theme/colors';
 import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { SORTING_ICON_CLASS_NAME } from '../pm-plugins/view-mode-sort/consts';
@@ -36,7 +35,7 @@ const numberedColumnButtonSelectedStyles = `
 	background-color: ${tableToolbarSelectedColor};
 	position: relative;
 	z-index: ${akEditorUnitZIndex};
-	color: ${`var(--ds-text-selected, ${N0})`};
+	color: ${"var(--ds-text-selected, #1868DB)"};
 `;
 const rangeSelectionStyles = `
 .${ClassName.NODEVIEW_WRAPPER}.${akEditorSelectedNodeClassName} table tbody tr {
@@ -284,7 +283,7 @@ const baseTableStylesWithoutSharedStyle = props => {
 
 		position: fixed !important;
 		z-index: ${akEditorStickyHeaderZIndex} !important;
-		box-shadow: 0px -${stickyRowOffsetTop}px ${"var(--ds-surface, white)"};
+		box-shadow: 0px -${stickyRowOffsetTop}px ${"var(--ds-surface, #FFFFFF)"};
 		border-right: 0 none;
 		/* top set by NumberColumn component */
 	}
@@ -293,7 +292,7 @@ const baseTableStylesWithoutSharedStyle = props => {
 		position: fixed !important;
 		/* needs to be above row controls */
 		z-index: ${akEditorSmallZIndex} !important;
-		background: ${"var(--ds-surface, white)"};
+		background: ${"var(--ds-surface, #FFFFFF)"};
 
 		width: ${tableToolbarSize}px;
 		height: ${tableToolbarSize}px;
@@ -317,13 +316,13 @@ const baseTableStylesWithoutSharedStyle = props => {
 		position: fixed !important;
 		z-index: ${akEditorStickyHeaderZIndex} !important;
 		display: flex;
-		border-left: ${tableToolbarSize}px solid ${"var(--ds-surface, white)"};
+		border-left: ${tableToolbarSize}px solid ${"var(--ds-surface, #FFFFFF)"};
 		margin-left: -${tableToolbarSize}px;
 	}
 
 	.${ClassName.TABLE_STICKY} col:first-of-type {
 		/* moving rows out of a table layout does weird things in Chrome */
-		border-right: 1px solid ${"var(--ds-surface, green)"};
+		border-right: 1px solid ${"var(--ds-surface, #FFFFFF)"};
 	}
 
 	tr.sticky {
@@ -340,9 +339,9 @@ const baseTableStylesWithoutSharedStyle = props => {
 		grid-auto-flow: column;
 
 		/* background for where controls apply */
-		background: ${"var(--ds-surface, white)"};
+		background: ${"var(--ds-surface, #FFFFFF)"};
 		box-sizing: content-box;
-		box-shadow: 0 6px 4px -4px ${`var(--ds-shadow-overflow-perimeter, ${N40A})`};
+		box-shadow: 0 6px 4px -4px ${"var(--ds-shadow-overflow-perimeter, #1E1F211f)"};
 
 		margin-left: -1px;
 
@@ -544,8 +543,7 @@ const baseTableStylesWithoutSharedStyle = props => {
 	}
 
 	.${ClassName.CORNER_CONTROLS}.sticky {
-		border-top: ${tableControlsSpacing - tableToolbarSize}px solid
-			${"var(--ds-surface, white)"};
+		border-top: ${tableControlsSpacing - tableToolbarSize}px solid ${"var(--ds-surface, #FFFFFF)"};
 	}
 
 	${sentinelStyles}
@@ -757,7 +755,7 @@ const baseTableStylesWithoutSharedStyle = props => {
 			position: absolute;
 			bottom: -3px;
 			left: 2px;
-			background-color: ${"var(--ds-background-accent-gray-subtler, #C1C7D0)"};
+			background-color: ${"var(--ds-background-accent-gray-subtler, #DDDEE1)"};
 			height: 4px;
 			width: 4px;
 			border-radius: 50%;
@@ -780,7 +778,7 @@ const baseTableStylesWithoutSharedStyle = props => {
 		}
 
 		.${ClassName.DRAG_COLUMN_FLOATING_INSERT_DOT} {
-			background-color: ${"var(--ds-background-accent-gray-subtler, #C1C7D0)"};
+			background-color: ${"var(--ds-background-accent-gray-subtler, #DDDEE1)"};
 			height: 4px;
 			width: 4px;
 			border-radius: 50%;
@@ -813,7 +811,7 @@ const baseTableStylesWithoutSharedStyle = props => {
 		padding: 0;
 		border-radius: 6px;
 		width: max-content;
-		border: 2px solid ${`var(--ds-surface, ${N0})`};
+		border: 2px solid ${"var(--ds-surface, #FFFFFF)"};
 
 		display: flex;
 		justify-content: center;
@@ -830,13 +828,13 @@ const baseTableStylesWithoutSharedStyle = props => {
 			cursor: pointer;
 			& svg {
 				& > rect.${ClassName.DRAG_HANDLE_MINIMISED} {
-					fill: ${"var(--ds-background-accent-gray-subtler, #DCDFE4)"};
+					fill: ${"var(--ds-background-accent-gray-subtler, #DDDEE1)"};
 				}
 				& > rect {
-					fill: ${"var(--ds-background-accent-gray-subtlest, #F4F5F7)"};
+					fill: ${"var(--ds-background-accent-gray-subtlest, #F0F1F2)"};
 				}
 				& > g > rect {
-					fill: ${"var(--ds-icon-disabled, #BFDBF847)"};
+					fill: ${"var(--ds-icon-disabled, #080F214A)"};
 				}
 			}
 		}
@@ -844,20 +842,20 @@ const baseTableStylesWithoutSharedStyle = props => {
 		&:not(.${ClassName.DRAG_HANDLE_DISABLED}) {
 			& svg {
 				rect {
-					fill: ${"var(--ds-background-accent-gray-subtler, #DCDFE4)"};
+					fill: ${"var(--ds-background-accent-gray-subtler, #DDDEE1)"};
 				}
 				g {
-					fill: ${"var(--ds-icon-subtle, #626f86)"};
+					fill: ${"var(--ds-icon-subtle, #505258)"};
 				}
 			}
 
 			&:hover {
 				svg {
 					rect {
-						fill: ${"var(--ds-background-accent-blue-subtle, #579DFF)"};
+						fill: ${"var(--ds-background-accent-blue-subtle, #669DF1)"};
 					}
 					g {
-						fill: ${"var(--ds-icon-inverse, #FFF)"};
+						fill: ${"var(--ds-icon-inverse, #FFFFFF)"};
 					}
 				}
 			}
@@ -868,7 +866,7 @@ const baseTableStylesWithoutSharedStyle = props => {
 
 			&.selected {
 				:focus {
-					outline: 2px solid ${"var(--ds-border-focused, #2684FF)"};
+					outline: 2px solid ${"var(--ds-border-focused, #4688EC)"};
 					outline-offset: 1px;
 				}
 
@@ -878,10 +876,10 @@ const baseTableStylesWithoutSharedStyle = props => {
 
 				svg {
 					rect {
-						fill: ${"var(--ds-background-accent-blue-subtle, #579dff)"};
+						fill: ${"var(--ds-background-accent-blue-subtle, #669DF1)"};
 					}
 					g {
-						fill: ${"var(--ds-icon-inverse, #fff)"};
+						fill: ${"var(--ds-icon-inverse, #FFFFFF)"};
 					}
 				}
 			}
@@ -889,10 +887,10 @@ const baseTableStylesWithoutSharedStyle = props => {
 			&.danger {
 				svg {
 					rect {
-						fill: ${"var(--ds-background-accent-red-subtler-pressed, #F87462)"};
+						fill: ${"var(--ds-background-accent-red-subtler-pressed, #FD9891)"};
 					}
 					g {
-						fill: ${"var(--ds-border-inverse, #FFF)"};
+						fill: ${"var(--ds-border-inverse, #FFFFFF)"};
 					}
 				}
 			}
@@ -947,7 +945,7 @@ const baseTableStylesWithoutSharedStyle = props => {
 			display: block;
 			height: 33px;
 			width: 100%;
-			background-color: ${"var(--ds-surface, white)"};
+			background-color: ${"var(--ds-surface, #FFFFFF)"};
 			position: absolute;
 
 			/* the extra pixel is accounting for borders */
@@ -1001,7 +999,7 @@ const baseTableStylesWithoutSharedStyle = props => {
 			background-color: ${tableToolbarDeleteColor};
 			border: 1px solid ${tableBorderDeleteColor};
 			border-left: 0;
-			color: ${`var(--ds-text-danger, ${R500})`};
+			color: ${"var(--ds-text-danger, #AE2E24)"};
 			position: relative;
 			z-index: ${akEditorUnitZIndex};
 		}
@@ -1013,7 +1011,7 @@ const baseTableStylesWithoutSharedStyle = props => {
 				background-color: ${tableToolbarDeleteColor};
 				border: 1px solid ${tableBorderDeleteColor};
 				border-left: 0;
-				color: ${`var(--ds-text-danger, ${R500})`};
+				color: ${"var(--ds-text-danger, #AE2E24)"};
 				position: relative;
 				z-index: ${akEditorUnitZIndex};
 			}

package/dist/es2019/ui/consts.js

@@ -2,8 +2,7 @@
 // Entry file in package.json
 
 import { tableCellBorderWidth, tableMarginTop } from '@atlaskit/editor-common/styles';
-import { akEditorTableBorder, akEditorTableBorderSelected, akEditorTableCellBlanketDeleted, akEditorTableCellBlanketSelected, akEditorTableCellOnStickyHeaderZIndex, akEditorTableHeaderCellBackground, akEditorTableToolbar, akEditorTableToolbarSize, akEditorUnitZIndex, akRichMediaResizeZIndex } from '@atlaskit/editor-shared-styles';
-import { B200, N0, N20, N200, N20A, N300, R300, R400, R75 } from '@atlaskit/theme/colors';
+import { akEditorTableCellOnStickyHeaderZIndex, akEditorTableToolbarSize, akEditorUnitZIndex, akRichMediaResizeZIndex } from '@atlaskit/editor-shared-styles';
 import { RESIZE_HANDLE_AREA_DECORATION_GAP } from '../types';
 
 /**
@@ -11,25 +10,25 @@ import { RESIZE_HANDLE_AREA_DECORATION_GAP } from '../types';
  */
 
 // TODO: DSP-4135 - Remove these tokens once the new elevation tokens are available
-export const tableCellBackgroundColor = `var(--ds-surface, ${N0})`;
-export const tableHeaderCellBackgroundColor = `var(--ds-background-accent-gray-subtlest, ${akEditorTableHeaderCellBackground})`;
-export const tableToolbarColor = `var(--ds-background-neutral-subtle, ${akEditorTableToolbar})`;
-export const tableTextColor = `var(--ds-text-subtlest, ${N200})`;
-export const tableBorderColor = `var(--ds-background-accent-gray-subtler, ${akEditorTableBorder})`;
-export const tableFloatingControlsColor = `var(--ds-background-neutral, ${N20})`;
+export const tableCellBackgroundColor = "var(--ds-surface, #FFFFFF)";
+export const tableHeaderCellBackgroundColor = "var(--ds-background-accent-gray-subtlest, #F0F1F2)";
+export const tableToolbarColor = "var(--ds-background-neutral-subtle, #00000000)";
+export const tableTextColor = "var(--ds-text-subtlest, #6B6E76)";
+export const tableBorderColor = "var(--ds-background-accent-gray-subtler, #DDDEE1)";
+export const tableFloatingControlsColor = "var(--ds-background-neutral, #0515240F)";
 
 // TODO: DSP-4461 - Remove these tokens once the new elevation tokens are available
-export const tableCellSelectedColor = `var(--ds-blanket-selected, ${akEditorTableCellBlanketSelected})`;
-export const tableHeaderCellSelectedColor = `var(--ds-background-selected-pressed, ${B200})`;
-export const tableToolbarSelectedColor = `var(--ds-background-selected-pressed, ${B200})`;
-export const tableBorderSelectedColor = `var(--ds-border-focused, ${akEditorTableBorderSelected})`;
-export const tableCellSelectedDeleteIconColor = `var(--ds-icon-subtle, ${N300})`;
-export const tableCellSelectedDeleteIconBackground = `var(--ds-background-accent-gray-subtlest, ${N20A})`;
-export const tableCellDeleteColor = `var(--ds-blanket-danger, ${akEditorTableCellBlanketDeleted})`;
-export const tableBorderDeleteColor = `var(--ds-border-danger, ${R400})`;
-export const tableToolbarDeleteColor = `var(--ds-background-danger-pressed, ${R75})`;
-export const tableCellHoverDeleteIconColor = "var(--ds-icon-inverse, white)";
-export const tableCellHoverDeleteIconBackground = `var(--ds-background-danger-bold, ${R300})`;
+export const tableCellSelectedColor = "var(--ds-blanket-selected, #388BFF14)";
+export const tableHeaderCellSelectedColor = "var(--ds-background-selected-pressed, #8FB8F6)";
+export const tableToolbarSelectedColor = "var(--ds-background-selected-pressed, #8FB8F6)";
+export const tableBorderSelectedColor = "var(--ds-border-focused, #4688EC)";
+export const tableCellSelectedDeleteIconColor = "var(--ds-icon-subtle, #505258)";
+export const tableCellSelectedDeleteIconBackground = "var(--ds-background-accent-gray-subtlest, #F0F1F2)";
+export const tableCellDeleteColor = "var(--ds-blanket-danger, #EF5C4814)";
+export const tableBorderDeleteColor = "var(--ds-border-danger, #E2483D)";
+export const tableToolbarDeleteColor = "var(--ds-background-danger-pressed, #FFB8B2)";
+export const tableCellHoverDeleteIconColor = "var(--ds-icon-inverse, #FFFFFF)";
+export const tableCellHoverDeleteIconBackground = "var(--ds-background-danger-bold, #C9372C)";
 export const tableBorderRadiusSize = 3;
 export const tablePadding = 8;
 export const tableScrollbarOffset = 15;

package/dist/es2019/ui/icons/DragInMotionIcon.js

@@ -16,7 +16,7 @@ export const DragInMotionIcon = ({
   width: "26",
   height: "18",
   rx: "5",
-  fill: "var(--ds-background-accent-blue-subtle, #579DFF)"
+  fill: "var(--ds-background-accent-blue-subtle, #669DF1)"
 }), /*#__PURE__*/React.createElement("rect", {
   x: "9",
   y: "6",

package/dist/es2019/ui/toolbar.js

@@ -548,12 +548,16 @@ export const getToolbarConfig = (getEditorContainerWidth, api, editorAnalyticsAP
             }
             return jsx(DropdownMenuExtensionItems, {
               node: tableObject.node,
-              editorView: editorView,
+              editorView: editorView
+              // eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed) 
+              ,
               extension: {
                 extensionProvider: extensionState !== null && extensionState !== void 0 && extensionState.extensionProvider ? Promise.resolve(extensionState.extensionProvider) : undefined,
                 extensionApi: extensionApi
               },
-              dropdownOptions: dropdownOptions,
+              dropdownOptions: dropdownOptions
+              // eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed) 
+              ,
               disabled: key => {
                 return isNestedTable && ['referentiality:connections', 'chart:insert-chart'].includes(key);
               },