@atlaskit/editor-plugin-table 5.6.6 → 5.7.0

package/src/ui/ui-styles.ts

@@ -12,8 +12,6 @@ import {
 } from '@atlaskit/editor-shared-styles';
 import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { B300, N0, N300, N40A, N60A, Y200, Y50 } from '@atlaskit/theme/colors';
-import { borderRadius } from '@atlaskit/theme/constants';
-import type { ThemeProps } from '@atlaskit/theme/types';
 import { token } from '@atlaskit/tokens';
 
 import { TableCssClassName as ClassName } from '../types';
@@ -46,9 +44,9 @@ import {
   tableToolbarSize,
 } from './consts';
 
-const InsertLine = (props: ThemeProps, cssString?: string) => css`
+const InsertLine = (cssString?: string) => css`
   .${ClassName.CONTROLS_INSERT_LINE} {
-    background: ${tableBorderSelectedColor(props)};
+    background: ${tableBorderSelectedColor};
     display: none;
     position: absolute;
     z-index: ${akEditorUnitZIndex};
@@ -56,8 +54,8 @@ const InsertLine = (props: ThemeProps, cssString?: string) => css`
   }
 `;
 
-const Marker = (props: ThemeProps) => css`
-  background-color: ${tableBorderColor(props)};
+const Marker = () => css`
+  background-color: ${tableBorderColor};
   position: absolute;
   height: ${lineMarkerSize}px;
   width: ${lineMarkerSize}px;
@@ -65,15 +63,15 @@ const Marker = (props: ThemeProps) => css`
   pointer-events: none;
 `;
 
-export const InsertMarker = (props: ThemeProps, cssString?: string) => css`
+export const InsertMarker = (cssString?: string) => css`
   .${ClassName.CONTROLS_INSERT_MARKER} {
-    ${Marker(props)};
+    ${Marker()};
     ${cssString}
   }
 `;
 
 const Button = (cssString?: string) => css`
-  border-radius: ${borderRadius()}px;
+  border-radius: ${token('border.radius', '3px')};
   border-width: 0px;
   display: inline-flex;
   max-width: 100%;
@@ -94,10 +92,10 @@ const Button = (cssString?: string) => css`
   ${cssString}
 `;
 
-export const HeaderButton = (props: ThemeProps, cssString?: string) => css`
+export const HeaderButton = (cssString?: string) => css`
   .${ClassName.CONTROLS_BUTTON} {
-    background: ${tableHeaderCellBackgroundColor(props)};
-    border: 1px solid ${tableBorderColor(props)};
+    background: ${tableHeaderCellBackgroundColor};
+    border: 1px solid ${tableBorderColor};
     display: block;
     box-sizing: border-box;
     padding: 0;
@@ -121,24 +119,24 @@ export const HeaderButton = (props: ThemeProps, cssString?: string) => css`
 
   .active .${ClassName.CONTROLS_BUTTON} {
     color: ${token('color.icon.inverse', N0)};
-    background-color: ${tableToolbarSelectedColor(props)};
-    border-color: ${tableBorderSelectedColor(props)};
+    background-color: ${tableToolbarSelectedColor};
+    border-color: ${tableBorderSelectedColor};
   }
 `;
 
-export const HeaderButtonHover = (props: ThemeProps) => css`
+export const HeaderButtonHover = () => css`
   .${ClassName.CONTROLS_BUTTON}:hover {
     color: ${token('color.icon.inverse', N0)};
-    background-color: ${tableToolbarSelectedColor(props)};
-    border-color: ${tableBorderSelectedColor(props)};
+    background-color: ${tableToolbarSelectedColor};
+    border-color: ${tableBorderSelectedColor};
     cursor: pointer;
   }
 `;
 
-export const HeaderButtonDanger = (props: ThemeProps) => css`
+export const HeaderButtonDanger = () => css`
   .${ClassName.HOVERED_CELL_IN_DANGER} .${ClassName.CONTROLS_BUTTON} {
-    background-color: ${tableToolbarDeleteColor(props)};
-    border-color: ${tableBorderDeleteColor(props)};
+    background-color: ${tableToolbarDeleteColor};
+    border-color: ${tableBorderDeleteColor};
     position: relative;
     z-index: ${akEditorUnitZIndex};
   }
@@ -181,7 +179,7 @@ const InsertButtonHover = () => css`
   }
 `;
 
-export const dragInsertButtonWrapper = (props: ThemeProps) => css`
+export const dragInsertButtonWrapper = () => css`
   .${ClassName.DRAG_CONTROLS_INSERT_BUTTON_INNER} {
     position: absolute;
     z-index: ${akEditorUnitZIndex + 10};
@@ -221,7 +219,7 @@ export const dragInsertButtonWrapper = (props: ThemeProps) => css`
 
 // Explicit pixel values required here to ensure corner button aligns correctly
 // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
-export const dragCornerControlButton = (props: ThemeProps) => css`
+export const dragCornerControlButton = () => css`
   .${ClassName.DRAG_CORNER_BUTTON} {
     width: 15px;
     height: 15px;
@@ -274,11 +272,10 @@ export const dragCornerControlButton = (props: ThemeProps) => css`
   }
 `;
 
-export const insertColumnButtonWrapper = (props: ThemeProps) => css`
+export const insertColumnButtonWrapper = () => css`
   ${InsertButton()}
   ${InsertButtonHover()}
   ${InsertLine(
-    props,
     `
     width: 2px;
     left: 9px;
@@ -286,11 +283,10 @@ export const insertColumnButtonWrapper = (props: ThemeProps) => css`
   )}
 `;
 
-export const insertRowButtonWrapper = (props: ThemeProps) => css`
+export const insertRowButtonWrapper = () => css`
   ${InsertButton()}
   ${InsertButtonHover()}
   ${InsertLine(
-    props,
     `
     height: 2px;
     top: -11px;
@@ -312,7 +308,7 @@ export const columnControlsLineMarker = () => css`
   }
 `;
 
-export const DeleteButton = (props: ThemeProps) => css`
+export const DeleteButton = () => css`
   .${ClassName.CONTROLS_DELETE_BUTTON_WRAP},
     .${ClassName.CONTROLS_DELETE_BUTTON} {
     height: ${tableDeleteButtonSize}px;
@@ -321,20 +317,20 @@ export const DeleteButton = (props: ThemeProps) => css`
   .${ClassName.CONTROLS_DELETE_BUTTON_WRAP} {
     .${ClassName.CONTROLS_DELETE_BUTTON} {
       ${Button(`
-        background: ${tableCellSelectedDeleteIconBackground(props)};
-        color: ${tableCellSelectedDeleteIconColor(props)};
+        background: ${tableCellSelectedDeleteIconBackground};
+        color: ${tableCellSelectedDeleteIconColor};
       `)}
     }
   }
 
   .${ClassName.CONTROLS_DELETE_BUTTON}:hover {
-    background: ${tableCellHoverDeleteIconBackground(props)};
-    color: ${tableCellHoverDeleteIconColor(props)};
+    background: ${tableCellHoverDeleteIconBackground};
+    color: ${tableCellHoverDeleteIconColor};
     cursor: pointer;
   }
 `;
 
-export const OverflowShadow = (props: ThemeProps) => css`
+export const OverflowShadow = () => css`
   .${ClassName.TABLE_RIGHT_SHADOW}, .${ClassName.TABLE_LEFT_SHADOW} {
     display: block;
     height: calc(100% - ${tableMarginTop}px);
@@ -400,7 +396,7 @@ export const OverflowShadow = (props: ThemeProps) => css`
   .${ClassName.WITH_CONTROLS} {
     ${overflowShadowWidhoutDnD()}
     .${ClassName.TABLE_LEFT_SHADOW} {
-      border-left: 1px solid ${tableBorderColor(props)};
+      border-left: 1px solid ${tableBorderColor};
     }
   }
 `;
@@ -416,10 +412,10 @@ const overflowShadowWidhoutDnD = () => {
   }
 };
 
-const columnHeaderButton = (props: ThemeProps, cssString?: string) => {
+const columnHeaderButton = (cssString?: string) => {
   if (getBooleanFF('platform.editor.table.column-controls-styles-updated')) {
     return css`
-      background: ${tableHeaderCellBackgroundColor(props)};
+      background: ${tableHeaderCellBackgroundColor};
       display: block;
       box-sizing: border-box;
       padding: 0;
@@ -432,8 +428,8 @@ const columnHeaderButton = (props: ThemeProps, cssString?: string) => {
     `;
   } else {
     return css`
-      background: ${tableHeaderCellBackgroundColor(props)};
-      border: 1px solid ${tableBorderColor(props)};
+      background: ${tableHeaderCellBackgroundColor};
+      border: 1px solid ${tableBorderColor};
       display: block;
       box-sizing: border-box;
       padding: 0;
@@ -447,14 +443,14 @@ const columnHeaderButton = (props: ThemeProps, cssString?: string) => {
   }
 };
 
-const columnHeaderButtonSelected = (props: ThemeProps) => css`
+const columnHeaderButtonSelected = () => css`
   color: ${token('color.text.inverse', N0)};
-  background-color: ${tableToolbarSelectedColor(props)};
-  border-color: ${tableBorderSelectedColor(props)};
+  background-color: ${tableToolbarSelectedColor};
+  border-color: ${tableBorderSelectedColor};
   z-index: ${columnControlsSelectedZIndex};
 `;
 
-const getFloatingDotOverrides = (props: ThemeProps) => {
+const getFloatingDotOverrides = () => {
   return getBooleanFF('platform.editor.custom-table-width')
     ? css`
         tr
@@ -464,7 +460,7 @@ const getFloatingDotOverrides = (props: ThemeProps) => {
           td:last-child
           .${ClassName.COLUMN_CONTROLS_DECORATIONS}::before {
           content: '';
-          background-color: ${tableBorderColor(props)};
+          background-color: ${tableBorderColor};
           position: absolute;
           height: ${lineMarkerSize}px;
           width: ${lineMarkerSize}px;
@@ -477,7 +473,7 @@ const getFloatingDotOverrides = (props: ThemeProps) => {
     : '';
 };
 
-export const floatingColumnControls = (props: ThemeProps) => {
+export const floatingColumnControls = () => {
   return css`
     .${ClassName.DRAG_COLUMN_DROP_TARGET_CONTROLS} {
       box-sizing: border-box;
@@ -501,7 +497,7 @@ export const floatingColumnControls = (props: ThemeProps) => {
   `;
 };
 
-export const rowControlsWrapperDotStyle = (props: ThemeProps) => {
+export const rowControlsWrapperDotStyle = () => {
   return css`
     // override for DnD controls
     div.${ClassName.WITH_CONTROLS}>.${ClassName.DRAG_ROW_CONTROLS_WRAPPER}::after {
@@ -510,7 +506,7 @@ export const rowControlsWrapperDotStyle = (props: ThemeProps) => {
 
     div.${ClassName.WITH_CONTROLS}>.${ClassName.ROW_CONTROLS_WRAPPER}::after {
       content: ' ';
-      background-color: ${tableBorderColor(props)};
+      background-color: ${tableBorderColor};
       position: absolute;
       height: ${lineMarkerSize}px;
       width: ${lineMarkerSize}px;
@@ -522,7 +518,7 @@ export const rowControlsWrapperDotStyle = (props: ThemeProps) => {
   `;
 };
 
-export const columnControlsDecoration = (props: ThemeProps) => {
+export const columnControlsDecoration = () => {
   if (getBooleanFF('platform.editor.table.column-controls-styles-updated')) {
     return css`
       .${ClassName.COLUMN_CONTROLS_DECORATIONS} {
@@ -536,7 +532,7 @@ export const columnControlsDecoration = (props: ThemeProps) => {
         // floating dot for adding column button
         &::before {
           content: ' ';
-          background-color: ${tableBorderColor(props)};
+          background-color: ${tableBorderColor};
           position: absolute;
           height: ${lineMarkerSize}px;
           width: ${lineMarkerSize}px;
@@ -550,15 +546,10 @@ export const columnControlsDecoration = (props: ThemeProps) => {
           content: ' ';
 
           ${columnHeaderButton(
-            props,
             `
-        border-right: ${tableCellBorderWidth}px solid ${tableBorderColor(
-              props,
-            )};
-        border-top: ${tableCellBorderWidth}px solid ${tableBorderColor(props)};
-        border-bottom: ${tableCellBorderWidth}px solid ${tableBorderColor(
-              props,
-            )};
+        border-right: ${tableCellBorderWidth}px solid ${tableBorderColor};
+        border-top: ${tableCellBorderWidth}px solid ${tableBorderColor};
+        border-bottom: ${tableCellBorderWidth}px solid ${tableBorderColor};
         box-sizing: content-box;
         height: ${tableToolbarSize - 1}px;
         width: 100%;
@@ -572,7 +563,7 @@ export const columnControlsDecoration = (props: ThemeProps) => {
       }
 
       // floating dot for adding column button - overriding style on last column to avoid scroll
-      ${getFloatingDotOverrides(props)}
+      ${getFloatingDotOverrides()}
 
       .${ClassName.WITH_CONTROLS} .${ClassName.COLUMN_CONTROLS_DECORATIONS} {
         display: block;
@@ -581,13 +572,13 @@ export const columnControlsDecoration = (props: ThemeProps) => {
       table tr:first-of-type th.${ClassName.TABLE_HEADER_CELL} {
         &.${ClassName.COLUMN_SELECTED}, &.${ClassName.HOVERED_TABLE} {
           .${ClassName.COLUMN_CONTROLS_DECORATIONS}::after {
-            ${columnHeaderButtonSelected(props)};
+            ${columnHeaderButtonSelected()};
           }
 
           &.${ClassName.HOVERED_CELL_IN_DANGER}
             .${ClassName.COLUMN_CONTROLS_DECORATIONS}::after {
-            background-color: ${tableToolbarDeleteColor(props)};
-            border-color: ${tableBorderDeleteColor(props)};
+            background-color: ${tableToolbarDeleteColor};
+            border-color: ${tableBorderDeleteColor};
             z-index: ${akEditorUnitZIndex * 100};
           }
         }
@@ -596,9 +587,9 @@ export const columnControlsDecoration = (props: ThemeProps) => {
       table tr:first-of-type th.${ClassName.TABLE_HEADER_CELL} {
         &.${ClassName.COLUMN_SELECTED}, &.${ClassName.HOVERED_COLUMN} {
           .${ClassName.COLUMN_CONTROLS_DECORATIONS}::after {
-            ${columnHeaderButtonSelected(props)};
+            ${columnHeaderButtonSelected()};
             border-left: ${tableCellBorderWidth}px solid
-              ${tableBorderSelectedColor(props)};
+              ${tableBorderSelectedColor};
             left: -${tableCellBorderWidth}px;
           }
         }
@@ -607,15 +598,15 @@ export const columnControlsDecoration = (props: ThemeProps) => {
       table tr:first-of-type th.${ClassName.TABLE_HEADER_CELL} {
         &.${ClassName.HOVERED_COLUMN} {
           .${ClassName.COLUMN_CONTROLS_DECORATIONS}::after {
-            ${columnHeaderButtonSelected(props)};
+            ${columnHeaderButtonSelected()};
           }
 
           &.${ClassName.HOVERED_CELL_IN_DANGER}
             .${ClassName.COLUMN_CONTROLS_DECORATIONS}::after {
-            background-color: ${tableToolbarDeleteColor(props)};
-            border-color: ${tableBorderDeleteColor(props)};
+            background-color: ${tableToolbarDeleteColor};
+            border-color: ${tableBorderDeleteColor};
             border-left: ${tableCellBorderWidth}px solid
-              ${tableBorderDeleteColor(props)};
+              ${tableBorderDeleteColor};
             left: -${tableCellBorderWidth}px;
             z-index: ${akEditorUnitZIndex * 100};
           }
@@ -631,7 +622,7 @@ export const columnControlsDecoration = (props: ThemeProps) => {
         tr:first-of-type
         th.${ClassName.TABLE_HEADER_CELL} {
         .${ClassName.COLUMN_CONTROLS_DECORATIONS}::after {
-          ${columnHeaderButtonSelected(props)};
+          ${columnHeaderButtonSelected()};
         }
       }
     `;
@@ -648,7 +639,7 @@ export const columnControlsDecoration = (props: ThemeProps) => {
         // floating dot for adding column button
         &::before {
           content: ' ';
-          background-color: ${tableBorderColor(props)};
+          background-color: ${tableBorderColor};
           position: absolute;
           height: ${lineMarkerSize}px;
           width: ${lineMarkerSize}px;
@@ -662,11 +653,8 @@ export const columnControlsDecoration = (props: ThemeProps) => {
           content: ' ';
 
           ${columnHeaderButton(
-            props,
             `
-        border-right: ${tableCellBorderWidth}px solid ${tableBorderColor(
-              props,
-            )};
+        border-right: ${tableCellBorderWidth}px solid ${tableBorderColor};
         border-bottom: none;
         height: ${tableToolbarSize}px;
         width: 100%;
@@ -680,7 +668,7 @@ export const columnControlsDecoration = (props: ThemeProps) => {
       }
 
       // floating dot for adding column button - overriding style on last column to avoid scroll
-      ${getFloatingDotOverrides(props)}
+      ${getFloatingDotOverrides()}
 
       .${ClassName.WITH_CONTROLS} .${ClassName.COLUMN_CONTROLS_DECORATIONS} {
         display: block;
@@ -696,13 +684,13 @@ export const columnControlsDecoration = (props: ThemeProps) => {
           &.${ClassName.HOVERED_COLUMN},
           &.${ClassName.HOVERED_TABLE} {
           .${ClassName.COLUMN_CONTROLS_DECORATIONS}::after {
-            ${columnHeaderButtonSelected(props)};
+            ${columnHeaderButtonSelected()};
           }
 
           &.${ClassName.HOVERED_CELL_IN_DANGER}
             .${ClassName.COLUMN_CONTROLS_DECORATIONS}::after {
-            background-color: ${tableToolbarDeleteColor(props)};
-            border: 1px solid ${tableBorderDeleteColor(props)};
+            background-color: ${tableToolbarDeleteColor};
+            border: 1px solid ${tableBorderDeleteColor};
             border-bottom: none;
             z-index: ${akEditorUnitZIndex * 100};
           }
@@ -718,50 +706,50 @@ export const columnControlsDecoration = (props: ThemeProps) => {
         tr:first-of-type
         th.${ClassName.TABLE_HEADER_CELL} {
         .${ClassName.COLUMN_CONTROLS_DECORATIONS}::after {
-          ${columnHeaderButtonSelected(props)};
+          ${columnHeaderButtonSelected()};
         }
       }
     `;
   }
 };
 
-export const hoveredDeleteButton = (props: ThemeProps) => css`
+export const hoveredDeleteButton = () => css`
   .${ClassName.TABLE_CONTAINER}.${ClassName.HOVERED_DELETE_BUTTON} {
     .${ClassName.SELECTED_CELL},
       .${ClassName.COLUMN_SELECTED},
       .${ClassName.HOVERED_CELL} {
-      border: 1px solid ${tableBorderDeleteColor(props)};
+      border: 1px solid ${tableBorderDeleteColor};
     }
     .${ClassName.SELECTED_CELL}::after {
-      background: ${tableCellDeleteColor(props)};
+      background: ${tableCellDeleteColor};
     }
 
     .${ClassName.TABLE_NODE_WRAPPER} > table {
       td.${ClassName.HOVERED_NO_HIGHLIGHT}::after {
-        background: ${tableCellDeleteColor(props)};
-        border: 1px solid ${tableBorderDeleteColor(props)};
+        background: ${tableCellDeleteColor};
+        border: 1px solid ${tableBorderDeleteColor};
       }
       th.${ClassName.HOVERED_NO_HIGHLIGHT} {
         background-color: unset;
       }
       th.${ClassName.HOVERED_NO_HIGHLIGHT}::after {
-        background: ${tableCellDeleteColor(props)};
-        border: 1px solid ${tableBorderDeleteColor(props)};
+        background: ${tableCellDeleteColor};
+        border: 1px solid ${tableBorderDeleteColor};
       }
     }
   }
 `;
 
-export const hoveredCell = (props: ThemeProps) => css`
+export const hoveredCell = () => css`
   :not(.${ClassName.IS_RESIZING})
     .${ClassName.TABLE_CONTAINER}:not(.${ClassName.HOVERED_DELETE_BUTTON}) {
     .${ClassName.HOVERED_CELL} {
       position: relative;
-      border: 1px solid ${tableBorderSelectedColor(props)};
+      border: 1px solid ${tableBorderSelectedColor};
     }
     .${ClassName.HOVERED_CELL}.${ClassName.HOVERED_NO_HIGHLIGHT} {
       position: relative;
-      border: 1px solid ${tableBorderColor(props)};
+      border: 1px solid ${tableBorderColor};
     }
   }
 `;
@@ -802,7 +790,7 @@ const getLastColumnResizerOverrides = () => {
     : '';
 };
 
-const resizeHandleOverrides = (props: ThemeProps) => {
+const resizeHandleOverrides = () => {
   if (getBooleanFF('platform.editor.table.drag-and-drop')) {
     return css`
       th.${ClassName.WITH_RESIZE_LINE}::before,
@@ -813,7 +801,7 @@ const resizeHandleOverrides = (props: ThemeProps) => {
         top: -1px;
         width: ${resizeLineWidth}px;
         height: calc(100% + 2px);
-        background-color: ${tableBorderSelectedColor(props)};
+        background-color: ${tableBorderSelectedColor};
         z-index: ${columnControlsZIndex * 2};
       }
 
@@ -825,7 +813,7 @@ const resizeHandleOverrides = (props: ThemeProps) => {
         top: -1px;
         width: ${resizeLineWidth}px;
         height: calc(100% + 2px);
-        background-color: ${tableBorderSelectedColor(props)};
+        background-color: ${tableBorderSelectedColor};
         z-index: ${columnControlsZIndex * 2};
       }
     `;
@@ -838,7 +826,7 @@ const resizeHandleOverrides = (props: ThemeProps) => {
       top: -1px;
       width: ${resizeLineWidth}px;
       height: calc(100% + 2px);
-      background-color: ${tableBorderSelectedColor(props)};
+      background-color: ${tableBorderSelectedColor};
       z-index: ${columnControlsZIndex * 2};
     }
 
@@ -848,7 +836,7 @@ const resizeHandleOverrides = (props: ThemeProps) => {
       position: absolute;
       width: ${resizeLineWidth}px;
       height: calc(100% + ${tableToolbarSize + tableCellBorderWidth}px);
-      background-color: ${tableBorderSelectedColor(props)};
+      background-color: ${tableBorderSelectedColor};
       z-index: ${columnControlsZIndex * 2};
       top: -${tableToolbarSize + tableCellBorderWidth}px;
     }
@@ -860,7 +848,7 @@ const resizeHandleOverrides = (props: ThemeProps) => {
       top: -1px;
       width: ${resizeLineWidth}px;
       height: calc(100% + 2px);
-      background-color: ${tableBorderSelectedColor(props)};
+      background-color: ${tableBorderSelectedColor};
       z-index: ${columnControlsZIndex * 2};
     }
 
@@ -870,14 +858,14 @@ const resizeHandleOverrides = (props: ThemeProps) => {
       position: absolute;
       width: ${resizeLineWidth}px;
       height: calc(100% + ${tableToolbarSize + tableCellBorderWidth}px);
-      background-color: ${tableBorderSelectedColor(props)};
+      background-color: ${tableBorderSelectedColor};
       z-index: ${columnControlsZIndex * 2};
       top: -${tableToolbarSize + tableCellBorderWidth}px;
     }
   `;
 };
 
-export const resizeHandle = (props: ThemeProps) => css`
+export const resizeHandle = () => css`
   .${ClassName.TABLE_CONTAINER} {
     .${ClassName.RESIZE_HANDLE_DECORATION} {
       background-color: transparent;
@@ -892,7 +880,7 @@ export const resizeHandle = (props: ThemeProps) => css`
 
     ${getLastColumnResizerOverrides()}
 
-    ${resizeHandleOverrides(props)}
+    ${resizeHandleOverrides()}
 
     table
       tr:first-of-type
@@ -909,7 +897,7 @@ export const resizeHandle = (props: ThemeProps) => css`
 `;
 
 // Drag and Drop: drop target insert line
-export const insertLine = (props: ThemeProps) => css`
+export const insertLine = () => css`
   .${ClassName.TABLE_CONTAINER} {
     td.${ClassName.WITH_FIRST_COLUMN_INSERT_LINE}::before {
       content: ' ';
@@ -918,7 +906,7 @@ export const insertLine = (props: ThemeProps) => css`
       top: -1px;
       width: ${insertLineWidth}px;
       height: calc(100% + ${tableCellBorderWidth * 2}px);
-      background-color: ${tableBorderSelectedColor(props)};
+      background-color: ${tableBorderSelectedColor};
       z-index: ${columnControlsZIndex * 2};
     }
 
@@ -928,7 +916,7 @@ export const insertLine = (props: ThemeProps) => css`
       position: absolute;
       width: ${insertLineWidth}px;
       height: calc(100% + ${tableCellBorderWidth * 2}px);
-      background-color: ${tableBorderSelectedColor(props)};
+      background-color: ${tableBorderSelectedColor};
       z-index: ${columnControlsZIndex * 2};
       top: -${tableCellBorderWidth}px;
     }
@@ -940,7 +928,7 @@ export const insertLine = (props: ThemeProps) => css`
       top: -1px;
       width: ${insertLineWidth}px;
       height: calc(100% + ${tableCellBorderWidth * 2}px);
-      background-color: ${tableBorderSelectedColor(props)};
+      background-color: ${tableBorderSelectedColor};
       z-index: ${columnControlsZIndex * 2};
     }
 
@@ -950,7 +938,7 @@ export const insertLine = (props: ThemeProps) => css`
       position: absolute;
       width: ${insertLineWidth}px;
       height: calc(100% + ${tableCellBorderWidth * 2}px);
-      background-color: ${tableBorderSelectedColor(props)};
+      background-color: ${tableBorderSelectedColor};
       z-index: ${columnControlsZIndex * 2};
       top: -${tableCellBorderWidth}px;
     }
@@ -962,7 +950,7 @@ export const insertLine = (props: ThemeProps) => css`
       top: -1px;
       width: ${insertLineWidth}px;
       height: calc(100% + ${tableCellBorderWidth * 2}px);
-      background-color: ${tableBorderSelectedColor(props)};
+      background-color: ${tableBorderSelectedColor};
       z-index: ${columnControlsZIndex * 2};
     }
 
@@ -972,7 +960,7 @@ export const insertLine = (props: ThemeProps) => css`
       position: absolute;
       width: ${insertLineWidth}px;
       height: calc(100% + ${tableCellBorderWidth * 2}px);
-      background-color: ${tableBorderSelectedColor(props)};
+      background-color: ${tableBorderSelectedColor};
       z-index: ${columnControlsZIndex * 2};
       top: -${tableCellBorderWidth}px;
     }
@@ -984,7 +972,7 @@ export const insertLine = (props: ThemeProps) => css`
       top: -1px;
       height: ${insertLineWidth}px;
       width: calc(100% + ${tableCellBorderWidth * 2}px);
-      background-color: ${tableBorderSelectedColor(props)};
+      background-color: ${tableBorderSelectedColor};
       z-index: ${columnControlsZIndex * 2};
     }
 
@@ -994,7 +982,7 @@ export const insertLine = (props: ThemeProps) => css`
       position: absolute;
       height: ${insertLineWidth}px;
       width: calc(100% + ${tableCellBorderWidth * 2}px);
-      background-color: ${tableBorderSelectedColor(props)};
+      background-color: ${tableBorderSelectedColor};
       z-index: ${columnControlsZIndex * 2};
       top: -1px;
     }
@@ -1006,7 +994,7 @@ export const insertLine = (props: ThemeProps) => css`
       bottom: 0;
       height: ${insertLineWidth}px;
       width: calc(100% + 2px);
-      background-color: ${tableBorderSelectedColor(props)};
+      background-color: ${tableBorderSelectedColor};
       z-index: ${columnControlsZIndex * 2};
     }
 
@@ -1017,7 +1005,7 @@ export const insertLine = (props: ThemeProps) => css`
       position: absolute;
       height: ${insertLineWidth}px;
       width: calc(100% + ${tableCellBorderWidth * 2}px);
-      background-color: ${tableBorderSelectedColor(props)};
+      background-color: ${tableBorderSelectedColor};
       z-index: ${columnControlsZIndex * 2};
     }
   }