@atlaskit/editor-plugin-table 1.5.0 → 1.5.1

package/src/__tests__/unit/commands/misc.ts

@@ -30,12 +30,14 @@ import tablePlugin from '../../../plugins/table';
 import { analyticsPlugin } from '@atlaskit/editor-plugin-analytics';
 import featureFlagsPlugin from '@atlaskit/editor-plugin-feature-flags';
 import { contentInsertionPlugin } from '@atlaskit/editor-plugin-content-insertion';
+import { decorationsPlugin } from '@atlaskit/editor-plugin-decorations';
 
 describe('table plugin: commands', () => {
   const createEditor = createProsemirrorEditorFactory();
   const preset = new Preset<LightEditorPlugin>()
     .add([featureFlagsPlugin, {}])
     .add([analyticsPlugin, {}])
+    .add(decorationsPlugin)
     .add(panelPlugin)
     .add(contentInsertionPlugin)
     .add([

package/src/__tests__/unit/commands.ts

@@ -65,6 +65,7 @@ import textFormattingPlugin from '@atlaskit/editor-core/src/plugins/text-formatt
 import featureFlagsPlugin from '@atlaskit/editor-plugin-feature-flags';
 import { analyticsPlugin } from '@atlaskit/editor-plugin-analytics';
 import { contentInsertionPlugin } from '@atlaskit/editor-plugin-content-insertion';
+import { decorationsPlugin } from '@atlaskit/editor-plugin-decorations';
 
 const TABLE_LOCAL_ID = 'test-table-local-id';
 
@@ -86,6 +87,7 @@ describe('table plugin: actions', () => {
         .add([featureFlagsPlugin, {}])
         .add([analyticsPlugin, {}])
         .add(contentInsertionPlugin)
+        .add(decorationsPlugin)
         .add(widthPlugin)
         .add(gridPlugin)
         .add(tablePlugin)

package/src/__tests__/unit/event-handlers.ts

@@ -40,6 +40,7 @@ import { gridPlugin } from '@atlaskit/editor-plugin-grid';
 import featureFlagsPlugin from '@atlaskit/editor-plugin-feature-flags';
 import { analyticsPlugin } from '@atlaskit/editor-plugin-analytics';
 import { contentInsertionPlugin } from '@atlaskit/editor-plugin-content-insertion';
+import { decorationsPlugin } from '@atlaskit/editor-plugin-decorations';
 
 describe('table plugin: decorations', () => {
   const createEditor = createProsemirrorEditorFactory();
@@ -166,6 +167,7 @@ describe('table event handlers', () => {
         .add([featureFlagsPlugin, {}])
         .add([analyticsPlugin, {}])
         .add(contentInsertionPlugin)
+        .add(decorationsPlugin)
         .add(widthPlugin)
         .add(gridPlugin)
         .add(tablePlugin)

package/src/__tests__/unit/get-toolbar-config.ts

@@ -32,6 +32,7 @@ import featureFlagsPlugin from '@atlaskit/editor-plugin-feature-flags';
 import { analyticsPlugin } from '@atlaskit/editor-plugin-analytics';
 import { contentInsertionPlugin } from '@atlaskit/editor-plugin-content-insertion';
 import { widthPlugin } from '@atlaskit/editor-plugin-width';
+import { decorationsPlugin } from '@atlaskit/editor-plugin-decorations';
 
 const formatMessage: (t: { id: string }) => string = (message) =>
   `${message.id}`;
@@ -80,6 +81,7 @@ describe('getToolbarConfig', () => {
         .add([featureFlagsPlugin, {}])
         .add([analyticsPlugin, {}])
         .add(contentInsertionPlugin)
+        .add(decorationsPlugin)
         .add(widthPlugin)
         .add(dataConsumerPlugin)
         .add(extensionPlugin)

package/src/__tests__/unit/index.ts

@@ -67,6 +67,7 @@ import type { GetEditorContainerWidth } from '@atlaskit/editor-common/types';
 import tablePlugin from '../../plugins/table-plugin';
 import featureFlagsPlugin from '@atlaskit/editor-plugin-feature-flags';
 import { contentInsertionPlugin } from '@atlaskit/editor-plugin-content-insertion';
+import { decorationsPlugin } from '@atlaskit/editor-plugin-decorations';
 
 const TABLE_LOCAL_ID = 'test-table-local-id';
 
@@ -100,6 +101,7 @@ describe('table plugin', () => {
       .add([analyticsPlugin, {}])
       .add([deprecatedAnalyticsPlugin, {}])
       .add(contentInsertionPlugin)
+      .add(decorationsPlugin)
       .add(widthPlugin)
       .add(gridPlugin)
       .add([tablePlugin, { tableOptions }])

package/src/__tests__/unit/keymap.ts

@@ -62,6 +62,7 @@ import { widthPlugin } from '@atlaskit/editor-plugin-width';
 import editorDisabledPlugin from '@atlaskit/editor-core/src/plugins/editor-disabled';
 import featureFlagsPlugin from '@atlaskit/editor-plugin-feature-flags';
 import { contentInsertionPlugin } from '@atlaskit/editor-plugin-content-insertion';
+import { decorationsPlugin } from '@atlaskit/editor-plugin-decorations';
 
 const TABLE_LOCAL_ID = 'test-table-local-id';
 
@@ -89,6 +90,7 @@ describe('table keymap', () => {
     .add([analyticsPlugin, { createAnalyticsEvent }])
     .add([deprecatedAnalyticsPlugin, { createAnalyticsEvent }])
     .add(contentInsertionPlugin)
+    .add(decorationsPlugin)
     .add(widthPlugin)
     .add(gridPlugin)
     .add(selectionPlugin)

package/src/__tests__/unit/layout.ts

@@ -39,6 +39,7 @@ import featureFlagsPlugin from '@atlaskit/editor-plugin-feature-flags';
 import { analyticsPlugin } from '@atlaskit/editor-plugin-analytics';
 import { contentInsertionPlugin } from '@atlaskit/editor-plugin-content-insertion';
 import { widthPlugin } from '@atlaskit/editor-plugin-width';
+import { decorationsPlugin } from '@atlaskit/editor-plugin-decorations';
 
 describe('table toolbar', () => {
   const tableOptions = {
@@ -53,6 +54,7 @@ describe('table toolbar', () => {
     .add([featureFlagsPlugin, {}])
     .add([analyticsPlugin, {}])
     .add(contentInsertionPlugin)
+    .add(decorationsPlugin)
     .add(widthPlugin)
     .add([tablePlugin, { tableOptions }])
     .add(expandPlugin)

package/src/__tests__/unit/pm-plugins/main-with-allow-collapse.ts

@@ -25,6 +25,7 @@ import featureFlagsPlugin from '@atlaskit/editor-plugin-feature-flags';
 import { analyticsPlugin } from '@atlaskit/editor-plugin-analytics';
 import { contentInsertionPlugin } from '@atlaskit/editor-plugin-content-insertion';
 import { widthPlugin } from '@atlaskit/editor-plugin-width';
+import { decorationsPlugin } from '@atlaskit/editor-plugin-decorations';
 
 describe('tables: main plugin with allowCollapse: true', () => {
   const createEditor = createProsemirrorEditorFactory();
@@ -35,6 +36,7 @@ describe('tables: main plugin with allowCollapse: true', () => {
         .add([featureFlagsPlugin, {}])
         .add([analyticsPlugin, {}])
         .add(contentInsertionPlugin)
+        .add(decorationsPlugin)
         .add(widthPlugin)
         .add(tablePlugin)
         .add(expandPlugin)

package/src/__tests__/unit/pm-plugins/table-resizing/event-handlers.ts

@@ -33,6 +33,7 @@ import {
 import { analyticsPlugin } from '@atlaskit/editor-plugin-analytics';
 import featureFlagsPlugin from '@atlaskit/editor-plugin-feature-flags';
 import { contentInsertionPlugin } from '@atlaskit/editor-plugin-content-insertion';
+import { decorationsPlugin } from '@atlaskit/editor-plugin-decorations';
 
 describe('table-resizing/event-handlers', () => {
   const editorAnalyticsAPIFake: EditorAnalyticsAPI = {
@@ -49,6 +50,7 @@ describe('table-resizing/event-handlers', () => {
           .add([featureFlagsPlugin, {}])
           .add([analyticsPlugin, {}])
           .add(contentInsertionPlugin)
+          .add(decorationsPlugin)
           .add([
             tablePlugin,
             {

package/src/__tests__/unit/pm-plugins/table-selection-keymap.ts

@@ -31,6 +31,7 @@ import type { EditorSelectionAPI } from '@atlaskit/editor-common/selection';
 import featureFlagsPlugin from '@atlaskit/editor-plugin-feature-flags';
 import { analyticsPlugin } from '@atlaskit/editor-plugin-analytics';
 import { contentInsertionPlugin } from '@atlaskit/editor-plugin-content-insertion';
+import { decorationsPlugin } from '@atlaskit/editor-plugin-decorations';
 
 const TABLE_LOCAL_ID = 'test-table-local-id';
 describe('table selection keymap', () => {
@@ -48,6 +49,7 @@ describe('table selection keymap', () => {
     .add([featureFlagsPlugin, {}])
     .add([analyticsPlugin, {}])
     .add(contentInsertionPlugin)
+    .add(decorationsPlugin)
     .add(selectionPlugin)
     .add([tablePlugin, { tableOptions: {}, editorSelectionAPI }])
     .add(panelPlugin)

package/src/__tests__/unit/utils/collapse.ts

@@ -21,6 +21,7 @@ import {
 import featureFlagsPlugin from '@atlaskit/editor-plugin-feature-flags';
 import { analyticsPlugin } from '@atlaskit/editor-plugin-analytics';
 import { contentInsertionPlugin } from '@atlaskit/editor-plugin-content-insertion';
+import { decorationsPlugin } from '@atlaskit/editor-plugin-decorations';
 
 describe('collapse', () => {
   const createEditor = createProsemirrorEditorFactory();
@@ -32,7 +33,9 @@ describe('collapse', () => {
       .add(contentInsertionPlugin)
       .add(tablePlugin);
 
-    const finalPreset = expandInPlugins ? preset.add(expandPlugin) : preset;
+    const finalPreset = expandInPlugins
+      ? preset.add(decorationsPlugin).add(expandPlugin)
+      : preset;
 
     return createEditor({ doc, preset: finalPreset });
   };

package/src/i18n/cs.ts

@@ -16,9 +16,9 @@ export default {
   'fabric.editor.cornerControl': 'Zvýraznit tabulku',
   'fabric.editor.distributeColumns': 'Rozložení sloupců',
   'fabric.editor.extension.confirmDeleteLinkedModalMessagePrefix': 'Odstraňování',
-  'fabric.editor.extension.deleteElementTitle': 'Vymazat prvek',
+  'fabric.editor.extension.deleteElementTitle': 'Odstranit prvek',
   'fabric.editor.extension.sourceNoTitledName': 'tento prvek',
-  'fabric.editor.floatingToolbar.confirmModalCheckboxLabel': 'Vymazat také všechny připojené prvky',
+  'fabric.editor.floatingToolbar.confirmModalCheckboxLabel': 'Odstranit také všechny připojené prvky',
   'fabric.editor.headerColumn': 'Sloupec záhlaví',
   'fabric.editor.headerRow': 'Řádek záhlaví',
   'fabric.editor.insertColumn': 'Vložit sloupec napravo',

package/src/i18n/en_ZZ.ts

@@ -0,0 +1,41 @@
+/* prettier-ignore */
+/**
+ * NOTE:
+ *
+ * This file is automatically generated by Traduki 2.0.
+ * DO NOT CHANGE IT BY HAND or your changes will be lost.
+ */
+//
+export default {
+  'fabric.editor.canNotSortTable': "⁣⁢⚠️ You can't sort a table with merged cells⁡⁡‌⁠⁠‌‍⁣⁤",
+  'fabric.editor.cellBackground': '⁣⁢Cell background‌؜‍⁠‌⁠⁡‍‍؜‍⁣⁤',
+  'fabric.editor.cellOptions': '⁣⁢Cell options؜؜⁠⁠‍⁡⁡⁣⁤',
+  'fabric.editor.clearCells':
+    '{0, plural, one {⁣⁢Clear cell؜⁡‍؜‌⁠‍⁠‌؜‌‍⁠⁣⁤} other {⁣⁢Clear cells؜⁡‍؜‌⁠‍⁠‌؜‌‍⁠⁣⁤}}',
+  'fabric.editor.collapseTable': '⁣⁢Collapse table‌؜⁡‍⁠⁡⁠‌؜‍‌⁡⁡⁣⁤',
+  'fabric.editor.cornerControl': '⁣⁢Highlight table؜⁡؜⁠⁠⁠‌⁣⁤',
+  'fabric.editor.distributeColumns': '⁣⁢Distribute columns؜‍‍⁡‍‌؜‍‍‌⁣⁤',
+  'fabric.editor.extension.confirmDeleteLinkedModalMessagePrefix': '⁣⁢Deleting؜‌‌⁠⁠؜‍؜⁡‌؜‌‌‌‌‌⁣⁤',
+  'fabric.editor.extension.deleteElementTitle': '⁣⁢Delete element؜‌⁠⁡‍‌⁠⁡‌؜؜؜‍⁣⁤',
+  'fabric.editor.extension.sourceNoTitledName': '⁣⁢this element⁠⁠‍⁡‍؜⁠‌⁡؜⁡؜‍⁣⁤',
+  'fabric.editor.floatingToolbar.confirmModalCheckboxLabel':
+    '⁣⁢Also delete connected elements‌⁡⁡‍‍⁡⁡⁠‌؜؜⁣⁤',
+  'fabric.editor.headerColumn': '⁣⁢Header column⁡⁡‌؜‌‌⁠⁠⁠⁡⁣⁤',
+  'fabric.editor.headerRow': '⁣⁢Header row‍‌⁠⁠⁡⁠⁡⁠⁠⁠‌⁣⁤',
+  'fabric.editor.insertColumn': '⁣⁢Insert column right⁠‍⁡⁠⁠؜⁡⁠⁡‌‌⁣⁤',
+  'fabric.editor.insertRow': '⁣⁢Insert row below⁡⁡⁠؜‌⁠⁡‌‍⁣⁤',
+  'fabric.editor.mergeCells': '⁣⁢Merge cells⁠‌⁡‍⁡⁡⁡؜⁣⁤',
+  'fabric.editor.numberedColumn': '⁣⁢Numbered column⁡؜؜⁡⁡‌؜؜‍‍‌‌‍⁡⁡⁣⁤',
+  'fabric.editor.removeColumns':
+    '{0, plural, one {⁣⁢Delete column‌‍؜‌‌⁠؜⁡⁣⁤} other {⁣⁢Delete columns‌‍؜‌‌⁠؜⁡⁣⁤}}',
+  'fabric.editor.removeRows':
+    '{0, plural, one {⁣⁢Delete row⁠‍‍‌‍⁠؜‌⁣⁤} other {⁣⁢Delete rows⁠‍‍‌‍⁠؜‌⁣⁤}}',
+  'fabric.editor.rowControl': '⁣⁢Highlight row‍‌⁠⁡⁠؜‌⁠؜؜؜؜؜⁣⁤',
+  'fabric.editor.sortColumnASC': '⁣⁢Sort column A → Z⁠؜‍⁠⁠‌‌⁡‌‍⁣⁤',
+  'fabric.editor.sortColumnDESC': '⁣⁢Sort column Z → A؜⁡‌؜‌‌‍⁡‌‌‍‍‌‍؜؜⁡⁣⁤',
+  'fabric.editor.splitCell': '⁣⁢Split cell⁠‌‍؜⁠⁠؜‍؜⁡؜‌‍⁣⁤',
+  'fabric.editor.tableOptions': '⁣⁢Table options؜؜‍‌؜⁡؜⁠⁣⁤',
+  'fabric.editor.tables.confirmDeleteLinkedModalMessage':
+    '⁣⁢Deleting {nodeName} will break anything connected to it.⁠⁡⁠‍‍⁠؜⁠⁡⁠⁣⁤',
+  'fabric.editor.tables.confirmDeleteLinkedModalOKButton': '⁣⁢Delete؜⁡‍؜؜⁡⁠⁣⁤',
+};

package/src/i18n/ja.ts

@@ -7,7 +7,7 @@
  */
 //Japanese
 export default {
-  'fabric.editor.canNotSortTable': '⚠️ 統合したセルで表を並べ替えることはできません',
+  'fabric.editor.canNotSortTable': '⚠️ 結合セルを含む表は並べ替えられません。',
   'fabric.editor.cellBackground': 'セルの背景',
   'fabric.editor.cellOptions': 'セルのオプション',
   'fabric.editor.clearCells': '{0, plural, other {セルをクリア}}',
@@ -22,13 +22,13 @@ export default {
   'fabric.editor.headerRow': 'ヘッダーの行',
   'fabric.editor.insertColumn': '列を右に挿入',
   'fabric.editor.insertRow': '行を下に挿入',
-  'fabric.editor.mergeCells': 'セルをマージ',
+  'fabric.editor.mergeCells': 'セルを結合',
   'fabric.editor.numberedColumn': '番号付き列',
   'fabric.editor.removeColumns': '{0, plural, other {列を削除}}',
   'fabric.editor.removeRows': '{0, plural, other {行を削除}}',
   'fabric.editor.rowControl': '行をハイライト',
-  'fabric.editor.sortColumnASC': '列の並べ替え A → Z',
-  'fabric.editor.sortColumnDESC': '列の並べ替え Z → A',
+  'fabric.editor.sortColumnASC': '列の並べ替え: 昇順',
+  'fabric.editor.sortColumnDESC': '列の並べ替え: 降順',
   'fabric.editor.splitCell': 'セルを分割',
   'fabric.editor.tableOptions': '表のオプション',
   'fabric.editor.tables.confirmDeleteLinkedModalMessage':

package/src/i18n/ko.ts

@@ -24,7 +24,7 @@ export default {
   'fabric.editor.numberedColumn': '번호 매기기 열',
   'fabric.editor.removeColumns': '{0, plural, other {열 삭제}}',
   'fabric.editor.removeRows': '{0, plural, other {행 삭제}}',
-  'fabric.editor.rowControl': '열 강조',
+  'fabric.editor.rowControl': '열 강조 표시',
   'fabric.editor.sortColumnASC': '열 정렬: 오름차순',
   'fabric.editor.sortColumnDESC': '열 정렬: 내림차순',
   'fabric.editor.splitCell': '셀 나누기',

package/src/i18n/sv.ts

@@ -10,7 +10,7 @@ export default {
   'fabric.editor.canNotSortTable': '⚠️ Du kan inte sortera en panelvy med sammanslagna celler',
   'fabric.editor.cellBackground': 'Cellbakgrund',
   'fabric.editor.cellOptions': 'Cellalternativ',
-  'fabric.editor.clearCells': '{0, plural, one {Rensa celler} other {Rensa celler}}',
+  'fabric.editor.clearCells': '{0, plural, one {Rensa cell} other {Rensa celler}}',
   'fabric.editor.collapseTable': 'Dölj tabell',
   'fabric.editor.cornerControl': 'Markera tabellen',
   'fabric.editor.distributeColumns': 'Fördela kolumner',

package/src/i18n/vi.ts

@@ -12,7 +12,7 @@ export default {
   'fabric.editor.cellOptions': 'Tùy chọn ô',
   'fabric.editor.clearCells': '{0, plural, other {Xóa ô}}',
   'fabric.editor.collapseTable': 'Thu gọn bảng',
-  'fabric.editor.cornerControl': 'Bảng nổi bật',
+  'fabric.editor.cornerControl': 'Làm nổi bật bảng',
   'fabric.editor.distributeColumns': 'Phân phối cột',
   'fabric.editor.extension.deleteElementTitle': 'Xóa thành phần',
   'fabric.editor.floatingToolbar.confirmModalCheckboxLabel': 'Đồng thời xóa các thành phần được kết nối',
@@ -24,7 +24,7 @@ export default {
   'fabric.editor.numberedColumn': 'Cột được đánh số',
   'fabric.editor.removeColumns': '{0, plural, other {Xóa cột}}',
   'fabric.editor.removeRows': '{0, plural, other {Xóa hàng}}',
-  'fabric.editor.rowControl': 'Hàng nổi bật',
+  'fabric.editor.rowControl': 'Làm nổi bật hàng',
   'fabric.editor.sortColumnASC': 'Sắp xếp cột A → Z',
   'fabric.editor.sortColumnDESC': 'Sắp xếp cột Z → A',
   'fabric.editor.splitCell': 'Tách ô',

package/src/i18n/zh.ts

@@ -18,8 +18,8 @@ export default {
   'fabric.editor.extension.deleteElementTitle': '删除元素',
   'fabric.editor.extension.sourceNoTitledName': '此元素',
   'fabric.editor.floatingToolbar.confirmModalCheckboxLabel': '同时删除已连接的元素',
-  'fabric.editor.headerColumn': '标头列',
-  'fabric.editor.headerRow': '表头行',
+  'fabric.editor.headerColumn': '标题列',
+  'fabric.editor.headerRow': '标题行',
   'fabric.editor.insertColumn': '在右侧插入列',
   'fabric.editor.insertRow': '在下方插入行',
   'fabric.editor.mergeCells': '合并单元格',
@@ -29,7 +29,7 @@ export default {
   'fabric.editor.rowControl': '突出显示行',
   'fabric.editor.sortColumnASC': '对列 A → Z 进行排序',
   'fabric.editor.sortColumnDESC': '对列 Z → A 进行排序',
-  'fabric.editor.splitCell': '分离单元格',
+  'fabric.editor.splitCell': '拆分单元格',
   'fabric.editor.tableOptions': '表格选项',
   'fabric.editor.tables.confirmDeleteLinkedModalMessage': '删除 {nodeName} 将断开与其连接的所有内容。',
   'fabric.editor.tables.confirmDeleteLinkedModalOKButton': '删除',

package/src/plugins/table/pm-plugins/table-resizing/utils/resize-state.ts

@@ -289,6 +289,12 @@ export const getNewResizeStateFromSelectedColumns = (
   domAtPos: (pos: number) => { node: Node; offset: number },
   getEditorContainerWidth: GetEditorContainerWidth,
 ): ResizeStateWithAnalytics | undefined => {
+  // Fail early so that we don't do complex calculations for no reason
+  const numColumnsSelected = rect.right - rect.left;
+  if (numColumnsSelected <= 1) {
+    return;
+  }
+
   const { totalRowCount, totalColumnCount, table } = getSelectedTableInfo(
     state.selection,
   );
@@ -297,6 +303,11 @@ export const getNewResizeStateFromSelectedColumns = (
     return;
   }
 
+  // Fail early so that we don't do complex calculations for no reason
+  if (!hasTableBeenResized(table.node)) {
+    return;
+  }
+
   const maybeTable = domAtPos(table.start).node as HTMLElement;
   const tableRef = maybeTable.closest('table');
 

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

@@ -24,7 +24,7 @@ import { TableCssClassName as ClassName } from '../types';
 
 import {
   tableCellBackgroundColor,
-  tableToolbarColor,
+  tableHeaderCellBackgroundColor,
   tableBorderColor,
   tableCellSelectedColor,
   tableToolbarSelectedColor,
@@ -481,7 +481,7 @@ export const tableStyles = (
       border: 1px solid ${tableBorderColor(props)};
       border-radius: 0;
       border-top-left-radius: ${tableBorderRadiusSize}px;
-      background: ${tableToolbarColor(props)};
+      background: ${tableHeaderCellBackgroundColor(props)};
       box-sizing: border-box;
       padding: 0;
       :focus {
@@ -598,7 +598,7 @@ export const tableStyles = (
       padding: 10px 2px;
       text-align: center;
       font-size: ${relativeFontSizeToBase16(fontSize())};
-      background-color: ${tableToolbarColor(props)};
+      background-color: ${tableHeaderCellBackgroundColor(props)};
       color: ${tableTextColor(props)};
       border-color: ${tableBorderColor(props)};
 

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

@@ -38,6 +38,10 @@ export const tableCellBackgroundColor = themed({
   light: token('elevation.surface', N0),
   dark: token('elevation.surface', DN30),
 });
+export const tableHeaderCellBackgroundColor = themed({
+  light: token('color.background.neutral', akEditorTableToolbar),
+  dark: token('color.background.neutral', akEditorTableToolbarDark),
+});
 export const tableToolbarColor = themed({
   light: token('color.background.neutral.subtle', akEditorTableToolbar),
   dark: token('color.background.neutral.subtle', akEditorTableToolbarDark),
@@ -47,8 +51,8 @@ export const tableTextColor = themed({
   dark: token('color.text.subtlest', DN400),
 });
 export const tableBorderColor = themed({
-  light: token('color.border', akEditorTableBorder),
-  dark: token('color.border', akEditorTableBorderDark),
+  light: token('color.background.accent.gray.subtler', akEditorTableBorder),
+  dark: token('color.background.accent.gray.subtler', akEditorTableBorderDark),
 });
 export const tableFloatingControlsColor = token(
   'color.background.neutral',

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

@@ -21,9 +21,9 @@ import {
   Y200,
 } from '@atlaskit/theme/colors';
 import {
-  tableToolbarColor,
   tableBorderColor,
   tableToolbarSelectedColor,
+  tableHeaderCellBackgroundColor,
   tableBorderSelectedColor,
   tableCellDeleteColor,
   tableBorderDeleteColor,
@@ -95,7 +95,7 @@ const Button = (cssString?: string) => css`
 
 export const HeaderButton = (props: ThemeProps, cssString?: string) => css`
   .${ClassName.CONTROLS_BUTTON} {
-    background: ${tableToolbarColor(props)};
+    background: ${tableHeaderCellBackgroundColor(props)};
     border: 1px solid ${tableBorderColor(props)};
     display: block;
     box-sizing: border-box;
@@ -297,7 +297,7 @@ export const OverflowShadow = (props: ThemeProps) => css`
 `;
 
 const columnHeaderButton = (props: ThemeProps, cssString?: string) => css`
-  background: ${tableToolbarColor(props)};
+  background: ${tableHeaderCellBackgroundColor(props)};
   border: 1px solid ${tableBorderColor(props)};
   display: block;
   box-sizing: border-box;