@atlaskit/editor-plugin-table 2.5.0 → 2.5.1

package/dist/types-ts4.5/plugins/table/ui/consts.d.ts

@@ -7,12 +7,16 @@ export declare const tableToolbarColor: import("@atlaskit/theme").ThemedValue<"v
 export declare const tableTextColor: import("@atlaskit/theme").ThemedValue<"var(--ds-text-subtlest)">;
 export declare const tableBorderColor: import("@atlaskit/theme").ThemedValue<"var(--ds-background-accent-gray-subtler)">;
 export declare const tableFloatingControlsColor: "var(--ds-background-neutral)";
-export declare const tableCellSelectedColor: "var(--ds-blanket-selected)";
-export declare const tableToolbarSelectedColor: "var(--ds-background-selected-bold)";
-export declare const tableBorderSelectedColor: "var(--ds-border-selected)";
-export declare const tableCellDeleteColor: "var(--ds-blanket-danger)";
-export declare const tableBorderDeleteColor: "var(--ds-border-danger)";
-export declare const tableToolbarDeleteColor: "var(--ds-background-danger-bold)";
+export declare const tableCellSelectedColor: import("@atlaskit/theme").ThemedValue<"var(--ds-blanket-selected)">;
+export declare const tableToolbarSelectedColor: import("@atlaskit/theme").ThemedValue<"var(--ds-background-selected-pressed)">;
+export declare const tableBorderSelectedColor: import("@atlaskit/theme").ThemedValue<"var(--ds-border-focused)">;
+export declare const tableCellSelectedDeleteIconColor: import("@atlaskit/theme").ThemedValue<"var(--ds-icon-subtle)">;
+export declare const tableCellSelectedDeleteIconBackground: import("@atlaskit/theme").ThemedValue<"var(--ds-background-accent-gray-subtlest)">;
+export declare const tableCellDeleteColor: import("@atlaskit/theme").ThemedValue<"var(--ds-blanket-danger)">;
+export declare const tableBorderDeleteColor: import("@atlaskit/theme").ThemedValue<"var(--ds-border-danger)">;
+export declare const tableToolbarDeleteColor: import("@atlaskit/theme").ThemedValue<"var(--ds-background-danger-pressed)">;
+export declare const tableCellHoverDeleteIconColor: import("@atlaskit/theme").ThemedValue<"var(--ds-icon-inverse)">;
+export declare const tableCellHoverDeleteIconBackground: import("@atlaskit/theme").ThemedValue<"var(--ds-background-danger-bold)">;
 export declare const tableBorderRadiusSize = 3;
 export declare const tablePadding = 8;
 export declare const tableScrollbarOffset = 15;

package/dist/types-ts4.5/plugins/table/ui/ui-styles.d.ts

@@ -1,15 +1,15 @@
 import { ThemeProps } from '@atlaskit/theme/types';
 export declare const InsertMarker: (props: ThemeProps, cssString?: string) => import("@emotion/react").SerializedStyles;
 export declare const HeaderButton: (props: ThemeProps, cssString?: string) => import("@emotion/react").SerializedStyles;
-export declare const HeaderButtonHover: () => import("@emotion/react").SerializedStyles;
-export declare const HeaderButtonDanger: () => import("@emotion/react").SerializedStyles;
-export declare const insertColumnButtonWrapper: import("@emotion/react").SerializedStyles;
-export declare const insertRowButtonWrapper: import("@emotion/react").SerializedStyles;
+export declare const HeaderButtonHover: (props: ThemeProps) => import("@emotion/react").SerializedStyles;
+export declare const HeaderButtonDanger: (props: ThemeProps) => import("@emotion/react").SerializedStyles;
+export declare const insertColumnButtonWrapper: (props: ThemeProps) => import("@emotion/react").SerializedStyles;
+export declare const insertRowButtonWrapper: (props: ThemeProps) => import("@emotion/react").SerializedStyles;
 export declare const columnControlsLineMarker: () => import("@emotion/react").SerializedStyles;
-export declare const DeleteButton: import("@emotion/react").SerializedStyles;
+export declare const DeleteButton: (props: ThemeProps) => import("@emotion/react").SerializedStyles;
 export declare const OverflowShadow: (props: ThemeProps) => import("@emotion/react").SerializedStyles;
 export declare const columnControlsDecoration: (props: ThemeProps) => import("@emotion/react").SerializedStyles;
-export declare const hoveredDeleteButton: import("@emotion/react").SerializedStyles;
-export declare const hoveredCell: import("@emotion/react").SerializedStyles;
+export declare const hoveredDeleteButton: (props: ThemeProps) => import("@emotion/react").SerializedStyles;
+export declare const hoveredCell: (props: ThemeProps) => import("@emotion/react").SerializedStyles;
 export declare const hoveredWarningCell: import("@emotion/react").SerializedStyles;
-export declare const resizeHandle: import("@emotion/react").SerializedStyles;
+export declare const resizeHandle: (props: ThemeProps) => import("@emotion/react").SerializedStyles;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/editor-plugin-table",
-  "version": "2.5.0",
+  "version": "2.5.1",
   "description": "Table plugin for the @atlaskit/editor",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -28,7 +28,7 @@
   },
   "dependencies": {
     "@atlaskit/adf-schema": "^26.2.0",
-    "@atlaskit/editor-common": "^74.24.0",
+    "@atlaskit/editor-common": "^74.26.0",
     "@atlaskit/editor-palette": "1.5.1",
     "@atlaskit/editor-plugin-analytics": "^0.1.0",
     "@atlaskit/editor-plugin-content-insertion": "^0.0.6",

package/src/__tests__/unit/pm-plugins/main.ts

@@ -34,6 +34,17 @@ import * as miscCommands from '../../../plugins/table/commands/misc';
 import { getPluginState } from '../../../plugins/table/pm-plugins/plugin-factory';
 import { pluginKey } from '../../../plugins/table/pm-plugins/plugin-key';
 
+jest.mock('prosemirror-utils', () => {
+  // Unblock prosemirror bump:
+  // Workaround to enable spy on prosemirror-utils cjs bundle
+  const originalModule = jest.requireActual('prosemirror-utils');
+
+  return {
+    __esModule: true,
+    ...originalModule,
+  };
+});
+
 describe('tables: main plugin', () => {
   const createEditor = createProsemirrorEditorFactory();
   const editor = (doc: DocBuilder) =>

package/src/__tests__/unit/ui/FloatingContextualButton.tsx

@@ -32,6 +32,17 @@ import FloatingContextualButton, {
   Props as FloatingContextualButtonProps,
 } from '../../../plugins/table/ui/FloatingContextualButton';
 
+jest.mock('prosemirror-utils', () => {
+  // Unblock prosemirror bump:
+  // Workaround to enable spy on prosemirror-utils cjs bundle
+  const originalModule = jest.requireActual('prosemirror-utils');
+
+  return {
+    __esModule: true,
+    ...originalModule,
+  };
+});
+
 const createEditor = createProsemirrorEditorFactory();
 let createAnalyticsEvent = jest.fn(() => ({ fire() {} } as UIAnalyticsEvent));
 const editor = (doc: DocBuilder) =>

package/src/__tests__/unit/ui/FloatingInsertButton.tsx

@@ -39,6 +39,17 @@ import {
   Props as FloatingInsertButtonProps,
 } from '../../../plugins/table/ui/FloatingInsertButton';
 
+jest.mock('prosemirror-utils', () => {
+  // Unblock prosemirror bump:
+  // Workaround to enable spy on prosemirror-utils cjs bundle
+  const originalModule = jest.requireActual('prosemirror-utils');
+
+  return {
+    __esModule: true,
+    ...originalModule,
+  };
+});
+
 const getEditorContainerWidth = () => ({ width: 500 });
 const createEditor = createEditorFactory<TablePluginState>();
 const createAnalyticsEvent = jest.fn(() => ({ fire() {} } as UIAnalyticsEvent));

package/src/plugins/table/ui/FloatingContextualButton/styles.ts

@@ -24,7 +24,7 @@ export const tableFloatingCellButtonStyles = (props: ThemeProps) => css`
     })(props)};
     flex-direction: column;
     margin: 2px;
-    outline: 2px solid ${token('color.border', N0)};
+    outline: 2px solid ${token('elevation.surface', N0)};
     border-radius: 1px;
     padding: 0;
     height: calc(100% - 4px);

package/src/plugins/table/ui/common-styles.ts

@@ -185,10 +185,10 @@ export const tableStyles = (
   .ProseMirror {
     ${tableSharedStyle(props)};
     ${columnControlsLineMarker()};
-    ${hoveredDeleteButton};
-    ${hoveredCell};
+    ${hoveredDeleteButton(props)};
+    ${hoveredCell(props)};
     ${hoveredWarningCell};
-    ${resizeHandle};
+    ${resizeHandle(props)};
     ${rangeSelectionStyles};
 
     .${ClassName.LAST_ITEM_IN_CELL} {
@@ -223,15 +223,15 @@ export const tableStyles = (
     }
 
     .${ClassName.CONTROLS_FLOATING_BUTTON_COLUMN} {
-      ${insertColumnButtonWrapper}
+      ${insertColumnButtonWrapper(props)}
     }
 
     .${ClassName.CONTROLS_FLOATING_BUTTON_ROW} {
-      ${insertRowButtonWrapper}
+      ${insertRowButtonWrapper(props)}
     }
 
     /* Delete button */
-    ${DeleteButton}
+    ${DeleteButton(props)}
     /* Ends Delete button */
 
     /* sticky styles */
@@ -485,11 +485,8 @@ export const tableStyles = (
       }
     }
     .active .${ClassName.CONTROLS_CORNER_BUTTON} {
-      border-color: ${tableBorderSelectedColor};
-      background: ${token(
-        'color.background.selected',
-        tableToolbarSelectedColor,
-      )};
+      border-color: ${tableBorderSelectedColor(props)};
+      background: ${tableToolbarSelectedColor(props)};
     }
 
     .${ClassName.TABLE_CONTAINER}[data-number-column='true'] {
@@ -502,18 +499,15 @@ export const tableStyles = (
     }
 
     :not(.${ClassName.IS_RESIZING}) .${ClassName.CONTROLS_CORNER_BUTTON}:hover {
-      border-color: ${tableBorderSelectedColor};
-      background: ${token(
-        'color.background.selected',
-        tableToolbarSelectedColor,
-      )};
+      border-color: ${tableBorderSelectedColor(props)};
+      background: ${tableToolbarSelectedColor(props)};
       cursor: pointer;
     }
 
     :not(.${ClassName.IS_RESIZING})
       .${ClassName.CONTROLS_CORNER_BUTTON}.${ClassName.HOVERED_CELL_IN_DANGER} {
-      border-color: ${tableBorderDeleteColor};
-      background: ${token('color.background.danger', tableToolbarDeleteColor)};
+      border-color: ${tableBorderDeleteColor(props)};
+      background: ${tableToolbarDeleteColor(props)};
     }
 
     /* Row controls */
@@ -572,8 +566,8 @@ export const tableStyles = (
     }
 
     :not(.${ClassName.IS_RESIZING}) .${ClassName.ROW_CONTROLS} {
-      ${HeaderButtonHover()}
-      ${HeaderButtonDanger()}
+      ${HeaderButtonHover(props)}
+      ${HeaderButtonDanger(props)}
     }
 
     /* Numbered column */
@@ -618,12 +612,9 @@ export const tableStyles = (
         }
 
         .${ClassName.NUMBERED_COLUMN_BUTTON}.active {
-          border-bottom: 1px solid ${tableBorderSelectedColor};
-          border-color: ${tableBorderSelectedColor};
-          background-color: ${token(
-            'color.background.selected',
-            tableToolbarSelectedColor,
-          )};
+          border-bottom: 1px solid ${tableBorderSelectedColor(props)};
+          border-color: ${tableBorderSelectedColor(props)};
+          background-color: ${tableToolbarSelectedColor(props)};
           position: relative;
           z-index: ${akEditorUnitZIndex};
           color: ${token('color.text.selected', N0)};
@@ -635,22 +626,16 @@ export const tableStyles = (
         cursor: pointer;
       }
       .${ClassName.NUMBERED_COLUMN_BUTTON}:hover {
-        border-bottom: 1px solid ${tableBorderSelectedColor};
-        border-color: ${tableBorderSelectedColor};
-        background-color: ${token(
-          'color.background.selected',
-          tableToolbarSelectedColor,
-        )};
+        border-bottom: 1px solid ${tableBorderSelectedColor(props)};
+        border-color: ${tableBorderSelectedColor(props)};
+        background-color: ${tableToolbarSelectedColor(props)};
         position: relative;
         z-index: ${akEditorUnitZIndex};
         color: ${token('color.text.selected', N0)};
       }
       .${ClassName.NUMBERED_COLUMN_BUTTON}.${ClassName.HOVERED_CELL_IN_DANGER} {
-        background-color: ${token(
-          'color.background.danger',
-          tableToolbarDeleteColor,
-        )};
-        border: 1px solid ${tableBorderDeleteColor};
+        background-color: ${tableToolbarDeleteColor(props)};
+        border: 1px solid ${tableBorderDeleteColor(props)};
         border-left: 0;
         color: ${token('color.text.danger', R500)};
         position: relative;
@@ -711,15 +696,15 @@ export const tableStyles = (
         pointer-events: none;
       }
       .${ClassName.SELECTED_CELL} {
-        border: 1px solid ${tableBorderSelectedColor};
+        border: 1px solid ${tableBorderSelectedColor(props)};
       }
       .${ClassName.SELECTED_CELL}::after {
-        background: ${tableCellSelectedColor};
+        background: ${tableCellSelectedColor(props)};
         z-index: ${akEditorSmallZIndex};
       }
       th.${ClassName.HOVERED_CELL_IN_DANGER}::after,
         td.${ClassName.HOVERED_CELL_IN_DANGER}::after {
-        background: ${tableCellDeleteColor};
+        background: ${tableCellDeleteColor(props)};
         z-index: ${akEditorUnitZIndex * 100};
       }
       // ED-15246: Trello card is visible through a border of a table border
@@ -727,7 +712,7 @@ export const tableStyles = (
         &::after {
           height: 100%;
           width: 100%;
-          border: 1px solid ${tableBorderSelectedColor};
+          border: 1px solid ${tableBorderSelectedColor(props)};
           content: '';
           position: absolute;
           left: -1px;
@@ -738,7 +723,7 @@ export const tableStyles = (
           pointer-events: none;
         }
         &.${ClassName.HOVERED_CELL_IN_DANGER}::after {
-          border: 1px solid ${tableBorderDeleteColor};
+          border: 1px solid ${tableBorderDeleteColor(props)};
           z-index: ${akEditorUnitZIndex * 100};
         }
       }

package/src/plugins/table/ui/consts.ts

@@ -5,6 +5,9 @@ import {
 import {
   akEditorTableBorder,
   akEditorTableBorderDark,
+  akEditorTableBorderSelected,
+  akEditorTableCellBlanketDeleted,
+  akEditorTableCellBlanketSelected,
   akEditorTableToolbar,
   akEditorTableToolbarDark,
   akEditorTableToolbarSize,
@@ -13,12 +16,14 @@ import {
 } from '@atlaskit/editor-shared-styles';
 import {
   B200,
-  B300,
   DN30,
   DN400,
   N0,
   N20,
   N200,
+  N20A,
+  N300,
+  R300,
   R400,
   R75,
 } from '@atlaskit/theme/colors';
@@ -58,24 +63,46 @@ export const tableFloatingControlsColor = token(
   N20,
 );
 // TODO: https://product-fabric.atlassian.net/browse/DSP-4461
-export const tableCellSelectedColor = token(
-  'color.blanket.selected',
-  'rgba(179, 212, 255, 0.3)',
-);
-export const tableToolbarSelectedColor = token(
-  'color.background.selected.bold',
-  B200,
-);
-export const tableBorderSelectedColor = token('color.border.selected', B300);
-export const tableCellDeleteColor = token(
-  'color.blanket.danger',
-  'rgba(255, 235, 230, 0.3)',
-);
-export const tableBorderDeleteColor = token('color.border.danger', R400);
-export const tableToolbarDeleteColor = token(
-  'color.background.danger.bold',
-  R75,
-);
+export const tableCellSelectedColor = themed({
+  light: token('color.blanket.selected', akEditorTableCellBlanketSelected),
+  dark: token('color.blanket.selected', akEditorTableCellBlanketSelected),
+});
+export const tableToolbarSelectedColor = themed({
+  light: token('color.background.selected.pressed', B200),
+  dark: token('color.background.selected.pressed', B200),
+});
+export const tableBorderSelectedColor = themed({
+  light: token('color.border.focused', akEditorTableBorderSelected),
+  dark: token('color.border.focused', akEditorTableBorderSelected),
+});
+export const tableCellSelectedDeleteIconColor = themed({
+  light: token('color.icon.subtle', N300),
+  dark: token('color.icon.subtle', N300),
+});
+export const tableCellSelectedDeleteIconBackground = themed({
+  light: token('color.background.accent.gray.subtlest', N20A),
+  dark: token('color.background.accent.gray.subtlest', N20A),
+});
+export const tableCellDeleteColor = themed({
+  light: token('color.blanket.danger', akEditorTableCellBlanketDeleted),
+  dark: token('color.blanket.danger', akEditorTableCellBlanketDeleted),
+});
+export const tableBorderDeleteColor = themed({
+  light: token('color.border.danger', R400),
+  dark: token('color.border.danger', R400),
+});
+export const tableToolbarDeleteColor = themed({
+  light: token('color.background.danger.pressed', R75),
+  dark: token('color.background.danger.pressed', R75),
+});
+export const tableCellHoverDeleteIconColor = themed({
+  light: token('color.icon.inverse', 'white'),
+  dark: token('color.icon.inverse', 'white'),
+});
+export const tableCellHoverDeleteIconBackground = themed({
+  light: token('color.background.danger.bold', R300),
+  dark: token('color.background.danger.bold', R300),
+});
 export const tableBorderRadiusSize = 3;
 export const tablePadding = 8;
 export const tableScrollbarOffset = 15;

package/src/plugins/table/ui/ui-styles.ts

@@ -10,17 +10,7 @@ import {
   akEditorTableNumberColumnWidth,
   akEditorUnitZIndex,
 } from '@atlaskit/editor-shared-styles';
-import {
-  B300,
-  N0,
-  N20A,
-  N300,
-  N40A,
-  N60A,
-  R300,
-  Y200,
-  Y50,
-} from '@atlaskit/theme/colors';
+import { B300, N0, N300, N40A, N60A, Y200, Y50 } from '@atlaskit/theme/colors';
 import { borderRadius } from '@atlaskit/theme/constants';
 import { ThemeProps } from '@atlaskit/theme/types';
 import { token } from '@atlaskit/tokens';
@@ -39,6 +29,10 @@ import {
   tableBorderDeleteColor,
   tableBorderSelectedColor,
   tableCellDeleteColor,
+  tableCellHoverDeleteIconBackground,
+  tableCellHoverDeleteIconColor,
+  tableCellSelectedDeleteIconBackground,
+  tableCellSelectedDeleteIconColor,
   tableDeleteButtonSize,
   tableHeaderCellBackgroundColor,
   tableInsertColumnButtonSize,
@@ -47,9 +41,9 @@ import {
   tableToolbarSize,
 } from './consts';
 
-const InsertLine = (cssString?: string) => css`
+const InsertLine = (props: ThemeProps, cssString?: string) => css`
   .${ClassName.CONTROLS_INSERT_LINE} {
-    background: ${tableBorderSelectedColor};
+    background: ${tableBorderSelectedColor(props)};
     display: none;
     position: absolute;
     z-index: ${akEditorUnitZIndex};
@@ -122,33 +116,24 @@ export const HeaderButton = (props: ThemeProps, cssString?: string) => css`
 
   .active .${ClassName.CONTROLS_BUTTON} {
     color: ${token('color.icon.inverse', N0)};
-    background-color: ${token(
-      'color.background.selected',
-      tableToolbarSelectedColor,
-    )};
-    border-color: ${tableBorderSelectedColor};
+    background-color: ${tableToolbarSelectedColor(props)};
+    border-color: ${tableBorderSelectedColor(props)};
   }
 `;
 
-export const HeaderButtonHover = () => css`
+export const HeaderButtonHover = (props: ThemeProps) => css`
   .${ClassName.CONTROLS_BUTTON}:hover {
     color: ${token('color.icon.inverse', N0)};
-    background-color: ${token(
-      'color.background.selected',
-      tableToolbarSelectedColor,
-    )};
-    border-color: ${tableBorderSelectedColor};
+    background-color: ${tableToolbarSelectedColor(props)};
+    border-color: ${tableBorderSelectedColor(props)};
     cursor: pointer;
   }
 `;
 
-export const HeaderButtonDanger = () => css`
+export const HeaderButtonDanger = (props: ThemeProps) => css`
   .${ClassName.HOVERED_CELL_IN_DANGER} .${ClassName.CONTROLS_BUTTON} {
-    background-color: ${token(
-      'color.background.danger',
-      tableToolbarDeleteColor,
-    )};
-    border-color: ${tableBorderDeleteColor};
+    background-color: ${tableToolbarDeleteColor(props)};
+    border-color: ${tableBorderDeleteColor(props)};
     position: relative;
     z-index: ${akEditorUnitZIndex};
   }
@@ -191,23 +176,29 @@ const InsertButtonHover = () => css`
   }
 `;
 
-export const insertColumnButtonWrapper = css`
+export const insertColumnButtonWrapper = (props: ThemeProps) => css`
   ${InsertButton()}
   ${InsertButtonHover()}
-  ${InsertLine(`
+  ${InsertLine(
+    props,
+    `
     width: 2px;
     left: 9px;
-  `)}
+  `,
+  )}
 `;
 
-export const insertRowButtonWrapper = css`
+export const insertRowButtonWrapper = (props: ThemeProps) => css`
   ${InsertButton()}
   ${InsertButtonHover()}
-  ${InsertLine(`
+  ${InsertLine(
+    props,
+    `
     height: 2px;
     top: -11px;
     left: ${tableInsertColumnButtonSize - 1}px;
-  `)}
+  `,
+  )}
 `;
 
 export const columnControlsLineMarker = () => css`
@@ -223,7 +214,7 @@ export const columnControlsLineMarker = () => css`
   }
 `;
 
-export const DeleteButton = css`
+export const DeleteButton = (props: ThemeProps) => css`
   .${ClassName.CONTROLS_DELETE_BUTTON_WRAP},
     .${ClassName.CONTROLS_DELETE_BUTTON} {
     height: ${tableDeleteButtonSize}px;
@@ -232,15 +223,15 @@ export const DeleteButton = css`
   .${ClassName.CONTROLS_DELETE_BUTTON_WRAP} {
     .${ClassName.CONTROLS_DELETE_BUTTON} {
       ${Button(`
-        background: ${token('color.background.neutral', N20A)};
-        color: ${token('color.icon', N300)};
+        background: ${tableCellSelectedDeleteIconBackground(props)};
+        color: ${tableCellSelectedDeleteIconColor(props)};
       `)}
     }
   }
 
   .${ClassName.CONTROLS_DELETE_BUTTON}:hover {
-    background: ${token('color.background.danger.bold', R300)};
-    color: ${token('color.icon.inverse', 'white')};
+    background: ${tableCellHoverDeleteIconBackground(props)};
+    color: ${tableCellHoverDeleteIconColor(props)};
     cursor: pointer;
   }
 `;
@@ -312,13 +303,10 @@ const columnHeaderButton = (props: ThemeProps, cssString?: string) => css`
   ${cssString}
 `;
 
-const columnHeaderButtonSelected = css`
+const columnHeaderButtonSelected = (props: ThemeProps) => css`
   color: ${token('color.text.inverse', N0)};
-  background-color: ${token(
-    'color.background.selected',
-    tableToolbarSelectedColor,
-  )};
-  border-color: ${tableBorderSelectedColor};
+  background-color: ${tableToolbarSelectedColor(props)};
+  border-color: ${tableBorderSelectedColor(props)};
   z-index: ${columnControlsSelectedZIndex};
 `;
 
@@ -392,16 +380,13 @@ export const columnControlsDecoration = (props: ThemeProps) => css`
       &.${ClassName.HOVERED_COLUMN},
       &.${ClassName.HOVERED_TABLE} {
       .${ClassName.COLUMN_CONTROLS_DECORATIONS}::after {
-        ${columnHeaderButtonSelected};
+        ${columnHeaderButtonSelected(props)};
       }
 
       &.${ClassName.HOVERED_CELL_IN_DANGER}
         .${ClassName.COLUMN_CONTROLS_DECORATIONS}::after {
-        background-color: ${token(
-          'color.background.danger',
-          tableToolbarDeleteColor,
-        )};
-        border: 1px solid ${tableBorderDeleteColor};
+        background-color: ${tableToolbarDeleteColor(props)};
+        border: 1px solid ${tableBorderDeleteColor(props)};
         border-bottom: none;
         z-index: ${akEditorUnitZIndex * 100};
       }
@@ -417,30 +402,30 @@ export const columnControlsDecoration = (props: ThemeProps) => css`
     tr:first-of-type
     th.${ClassName.TABLE_HEADER_CELL} {
     .${ClassName.COLUMN_CONTROLS_DECORATIONS}::after {
-      ${columnHeaderButtonSelected};
+      ${columnHeaderButtonSelected(props)};
     }
   }
 `;
 
-export const hoveredDeleteButton = css`
+export const hoveredDeleteButton = (props: ThemeProps) => css`
   .${ClassName.TABLE_CONTAINER}.${ClassName.HOVERED_DELETE_BUTTON} {
     .${ClassName.SELECTED_CELL},
       .${ClassName.COLUMN_SELECTED},
       .${ClassName.HOVERED_CELL} {
-      border: 1px solid ${tableBorderDeleteColor};
+      border: 1px solid ${tableBorderDeleteColor(props)};
     }
     .${ClassName.SELECTED_CELL}::after {
-      background: ${tableCellDeleteColor};
+      background: ${tableCellDeleteColor(props)};
     }
   }
 `;
 
-export const hoveredCell = css`
+export const hoveredCell = (props: ThemeProps) => css`
   :not(.${ClassName.IS_RESIZING})
     .${ClassName.TABLE_CONTAINER}:not(.${ClassName.HOVERED_DELETE_BUTTON}) {
     .${ClassName.HOVERED_CELL} {
       position: relative;
-      border: 1px solid ${tableBorderSelectedColor};
+      border: 1px solid ${tableBorderSelectedColor(props)};
     }
   }
 `;
@@ -458,7 +443,7 @@ export const hoveredWarningCell = css`
   }
 `;
 
-export const resizeHandle = css`
+export const resizeHandle = (props: ThemeProps) => css`
   .${ClassName.TABLE_CONTAINER} {
     .${ClassName.RESIZE_HANDLE_DECORATION} {
       background-color: transparent;
@@ -478,7 +463,7 @@ export const resizeHandle = css`
       top: -1px;
       width: ${resizeLineWidth}px;
       height: calc(100% + 2px);
-      background-color: ${tableBorderSelectedColor};
+      background-color: ${tableBorderSelectedColor(props)};
       z-index: ${columnControlsZIndex * 2};
     }
 
@@ -488,7 +473,7 @@ export const resizeHandle = css`
       position: absolute;
       width: ${resizeLineWidth}px;
       height: calc(100% + ${tableToolbarSize + tableCellBorderWidth}px);
-      background-color: ${tableBorderSelectedColor};
+      background-color: ${tableBorderSelectedColor(props)};
       z-index: ${columnControlsZIndex * 2};
       top: -${tableToolbarSize + tableCellBorderWidth}px;
     }
@@ -500,7 +485,7 @@ export const resizeHandle = css`
       top: -1px;
       width: ${resizeLineWidth}px;
       height: calc(100% + 2px);
-      background-color: ${tableBorderSelectedColor};
+      background-color: ${tableBorderSelectedColor(props)};
       z-index: ${columnControlsZIndex * 2};
     }
 
@@ -510,7 +495,7 @@ export const resizeHandle = css`
       position: absolute;
       width: ${resizeLineWidth}px;
       height: calc(100% + ${tableToolbarSize + tableCellBorderWidth}px);
-      background-color: ${tableBorderSelectedColor};
+      background-color: ${tableBorderSelectedColor(props)};
       z-index: ${columnControlsZIndex * 2};
       top: -${tableToolbarSize + tableCellBorderWidth}px;
     }