@atlaskit/editor-plugin-table 5.6.5 → 5.6.7

package/dist/es2019/{plugins/table/ui → ui}/ui-styles.js

@@ -3,34 +3,33 @@ import { tableCellBorderWidth, tableMarginTop, tableMarginTopWithControl } from
 import { akEditorShadowZIndex, akEditorTableNumberColumnWidth, akEditorUnitZIndex } 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 { TableCssClassName as ClassName } from '../types';
 import { columnControlsDecorationHeight, columnControlsSelectedZIndex, columnControlsZIndex, dragTableInsertColumnButtonSize, insertLineWidth, lineMarkerSize, resizeHandlerAreaWidth, resizeHandlerZIndex, resizeLineWidth, tableBorderColor, tableBorderDeleteColor, tableBorderSelectedColor, tableCellDeleteColor, tableCellHoverDeleteIconBackground, tableCellHoverDeleteIconColor, tableCellSelectedDeleteIconBackground, tableCellSelectedDeleteIconColor, tableDeleteButtonSize, tableHeaderCellBackgroundColor, tableInsertColumnButtonSize, tableOverflowShadowWidth, tableOverflowShadowWidthWide, tableToolbarDeleteColor, tableToolbarSelectedColor, tableToolbarSize } from './consts';
-const InsertLine = (props, cssString) => css`
+const InsertLine = cssString => css`
   .${ClassName.CONTROLS_INSERT_LINE} {
-    background: ${tableBorderSelectedColor(props)};
+    background: ${tableBorderSelectedColor};
     display: none;
     position: absolute;
     z-index: ${akEditorUnitZIndex};
     ${cssString}
   }
 `;
-const Marker = props => css`
-  background-color: ${tableBorderColor(props)};
+const Marker = () => css`
+  background-color: ${tableBorderColor};
   position: absolute;
   height: ${lineMarkerSize}px;
   width: ${lineMarkerSize}px;
   border-radius: 50%;
   pointer-events: none;
 `;
-export const InsertMarker = (props, cssString) => css`
+export const InsertMarker = cssString => css`
   .${ClassName.CONTROLS_INSERT_MARKER} {
-    ${Marker(props)};
+    ${Marker()};
     ${cssString}
   }
 `;
 const Button = cssString => css`
-  border-radius: ${borderRadius()}px;
+  border-radius: ${"var(--ds-border-radius, 3px)"};
   border-width: 0px;
   display: inline-flex;
   max-width: 100%;
@@ -50,10 +49,10 @@ const Button = cssString => css`
   }
   ${cssString}
 `;
-export const HeaderButton = (props, cssString) => css`
+export const HeaderButton = cssString => 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;
@@ -77,22 +76,22 @@ export const HeaderButton = (props, cssString) => css`
 
   .active .${ClassName.CONTROLS_BUTTON} {
     color: ${`var(--ds-icon-inverse, ${N0})`};
-    background-color: ${tableToolbarSelectedColor(props)};
-    border-color: ${tableBorderSelectedColor(props)};
+    background-color: ${tableToolbarSelectedColor};
+    border-color: ${tableBorderSelectedColor};
   }
 `;
-export const HeaderButtonHover = props => css`
+export const HeaderButtonHover = () => css`
   .${ClassName.CONTROLS_BUTTON}:hover {
     color: ${`var(--ds-icon-inverse, ${N0})`};
-    background-color: ${tableToolbarSelectedColor(props)};
-    border-color: ${tableBorderSelectedColor(props)};
+    background-color: ${tableToolbarSelectedColor};
+    border-color: ${tableBorderSelectedColor};
     cursor: pointer;
   }
 `;
-export const HeaderButtonDanger = props => 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};
   }
@@ -129,7 +128,7 @@ const InsertButtonHover = () => css`
     cursor: pointer;
   }
 `;
-export const dragInsertButtonWrapper = props => css`
+export const dragInsertButtonWrapper = () => css`
   .${ClassName.DRAG_CONTROLS_INSERT_BUTTON_INNER} {
     position: absolute;
     z-index: ${akEditorUnitZIndex + 10};
@@ -166,7 +165,7 @@ export const dragInsertButtonWrapper = props => 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 => css`
+export const dragCornerControlButton = () => css`
   .${ClassName.DRAG_CORNER_BUTTON} {
     width: 15px;
     height: 15px;
@@ -215,18 +214,18 @@ export const dragCornerControlButton = props => css`
     position: relative;
   }
 `;
-export const insertColumnButtonWrapper = props => css`
+export const insertColumnButtonWrapper = () => css`
   ${InsertButton()}
   ${InsertButtonHover()}
-  ${InsertLine(props, `
+  ${InsertLine(`
     width: 2px;
     left: 9px;
   `)}
 `;
-export const insertRowButtonWrapper = props => css`
+export const insertRowButtonWrapper = () => css`
   ${InsertButton()}
   ${InsertButtonHover()}
-  ${InsertLine(props, `
+  ${InsertLine(`
     height: 2px;
     top: -11px;
     left: ${tableInsertColumnButtonSize - 1}px;
@@ -244,7 +243,7 @@ export const columnControlsLineMarker = () => css`
     position: relative;
   }
 `;
-export const DeleteButton = props => css`
+export const DeleteButton = () => css`
   .${ClassName.CONTROLS_DELETE_BUTTON_WRAP},
     .${ClassName.CONTROLS_DELETE_BUTTON} {
     height: ${tableDeleteButtonSize}px;
@@ -253,19 +252,19 @@ export const DeleteButton = props => 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 => css`
+export const OverflowShadow = () => css`
   .${ClassName.TABLE_RIGHT_SHADOW}, .${ClassName.TABLE_LEFT_SHADOW} {
     display: block;
     height: calc(100% - ${tableMarginTop}px);
@@ -309,7 +308,7 @@ export const OverflowShadow = props => css`
   .${ClassName.WITH_CONTROLS} {
     ${overflowShadowWidhoutDnD()}
     .${ClassName.TABLE_LEFT_SHADOW} {
-      border-left: 1px solid ${tableBorderColor(props)};
+      border-left: 1px solid ${tableBorderColor};
     }
   }
 `;
@@ -323,10 +322,10 @@ const overflowShadowWidhoutDnD = () => {
     `;
   }
 };
-const columnHeaderButton = (props, cssString) => {
+const columnHeaderButton = cssString => {
   if (getBooleanFF('platform.editor.table.column-controls-styles-updated')) {
     return css`
-      background: ${tableHeaderCellBackgroundColor(props)};
+      background: ${tableHeaderCellBackgroundColor};
       display: block;
       box-sizing: border-box;
       padding: 0;
@@ -339,8 +338,8 @@ const columnHeaderButton = (props, cssString) => {
     `;
   } 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;
@@ -353,13 +352,13 @@ const columnHeaderButton = (props, cssString) => {
     `;
   }
 };
-const columnHeaderButtonSelected = props => css`
+const columnHeaderButtonSelected = () => css`
   color: ${`var(--ds-text-inverse, ${N0})`};
-  background-color: ${tableToolbarSelectedColor(props)};
-  border-color: ${tableBorderSelectedColor(props)};
+  background-color: ${tableToolbarSelectedColor};
+  border-color: ${tableBorderSelectedColor};
   z-index: ${columnControlsSelectedZIndex};
 `;
-const getFloatingDotOverrides = props => {
+const getFloatingDotOverrides = () => {
   return getBooleanFF('platform.editor.custom-table-width') ? css`
         tr
           th:last-child
@@ -368,7 +367,7 @@ const getFloatingDotOverrides = props => {
           td:last-child
           .${ClassName.COLUMN_CONTROLS_DECORATIONS}::before {
           content: '';
-          background-color: ${tableBorderColor(props)};
+          background-color: ${tableBorderColor};
           position: absolute;
           height: ${lineMarkerSize}px;
           width: ${lineMarkerSize}px;
@@ -379,7 +378,7 @@ const getFloatingDotOverrides = props => {
         }
       ` : '';
 };
-export const floatingColumnControls = props => {
+export const floatingColumnControls = () => {
   return css`
     .${ClassName.DRAG_COLUMN_DROP_TARGET_CONTROLS} {
       box-sizing: border-box;
@@ -402,7 +401,7 @@ export const floatingColumnControls = props => {
     }
   `;
 };
-export const rowControlsWrapperDotStyle = props => {
+export const rowControlsWrapperDotStyle = () => {
   return css`
     // override for DnD controls
     div.${ClassName.WITH_CONTROLS}>.${ClassName.DRAG_ROW_CONTROLS_WRAPPER}::after {
@@ -411,7 +410,7 @@ export const rowControlsWrapperDotStyle = props => {
 
     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;
@@ -422,7 +421,7 @@ export const rowControlsWrapperDotStyle = props => {
     }
   `;
 };
-export const columnControlsDecoration = props => {
+export const columnControlsDecoration = () => {
   if (getBooleanFF('platform.editor.table.column-controls-styles-updated')) {
     return css`
       .${ClassName.COLUMN_CONTROLS_DECORATIONS} {
@@ -436,7 +435,7 @@ export const columnControlsDecoration = props => {
         // floating dot for adding column button
         &::before {
           content: ' ';
-          background-color: ${tableBorderColor(props)};
+          background-color: ${tableBorderColor};
           position: absolute;
           height: ${lineMarkerSize}px;
           width: ${lineMarkerSize}px;
@@ -449,10 +448,10 @@ export const columnControlsDecoration = props => {
         &::after {
           content: ' ';
 
-          ${columnHeaderButton(props, `
-        border-right: ${tableCellBorderWidth}px solid ${tableBorderColor(props)};
-        border-top: ${tableCellBorderWidth}px solid ${tableBorderColor(props)};
-        border-bottom: ${tableCellBorderWidth}px solid ${tableBorderColor(props)};
+          ${columnHeaderButton(`
+        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%;
@@ -465,7 +464,7 @@ export const columnControlsDecoration = props => {
       }
 
       // 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;
@@ -474,13 +473,13 @@ export const columnControlsDecoration = props => {
       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};
           }
         }
@@ -489,9 +488,9 @@ export const columnControlsDecoration = props => {
       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;
           }
         }
@@ -500,15 +499,15 @@ export const columnControlsDecoration = props => {
       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};
           }
@@ -524,7 +523,7 @@ export const columnControlsDecoration = props => {
         tr:first-of-type
         th.${ClassName.TABLE_HEADER_CELL} {
         .${ClassName.COLUMN_CONTROLS_DECORATIONS}::after {
-          ${columnHeaderButtonSelected(props)};
+          ${columnHeaderButtonSelected()};
         }
       }
     `;
@@ -541,7 +540,7 @@ export const columnControlsDecoration = props => {
         // floating dot for adding column button
         &::before {
           content: ' ';
-          background-color: ${tableBorderColor(props)};
+          background-color: ${tableBorderColor};
           position: absolute;
           height: ${lineMarkerSize}px;
           width: ${lineMarkerSize}px;
@@ -554,8 +553,8 @@ export const columnControlsDecoration = props => {
         &::after {
           content: ' ';
 
-          ${columnHeaderButton(props, `
-        border-right: ${tableCellBorderWidth}px solid ${tableBorderColor(props)};
+          ${columnHeaderButton(`
+        border-right: ${tableCellBorderWidth}px solid ${tableBorderColor};
         border-bottom: none;
         height: ${tableToolbarSize}px;
         width: 100%;
@@ -568,7 +567,7 @@ export const columnControlsDecoration = props => {
       }
 
       // 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;
@@ -584,13 +583,13 @@ export const columnControlsDecoration = props => {
           &.${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};
           }
@@ -606,48 +605,48 @@ export const columnControlsDecoration = props => {
         tr:first-of-type
         th.${ClassName.TABLE_HEADER_CELL} {
         .${ClassName.COLUMN_CONTROLS_DECORATIONS}::after {
-          ${columnHeaderButtonSelected(props)};
+          ${columnHeaderButtonSelected()};
         }
       }
     `;
   }
 };
-export const hoveredDeleteButton = props => 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 => 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};
     }
   }
 `;
@@ -681,7 +680,7 @@ const getLastColumnResizerOverrides = () => {
         }
       ` : '';
 };
-const resizeHandleOverrides = props => {
+const resizeHandleOverrides = () => {
   if (getBooleanFF('platform.editor.table.drag-and-drop')) {
     return css`
       th.${ClassName.WITH_RESIZE_LINE}::before,
@@ -692,7 +691,7 @@ const resizeHandleOverrides = props => {
         top: -1px;
         width: ${resizeLineWidth}px;
         height: calc(100% + 2px);
-        background-color: ${tableBorderSelectedColor(props)};
+        background-color: ${tableBorderSelectedColor};
         z-index: ${columnControlsZIndex * 2};
       }
 
@@ -704,7 +703,7 @@ const resizeHandleOverrides = props => {
         top: -1px;
         width: ${resizeLineWidth}px;
         height: calc(100% + 2px);
-        background-color: ${tableBorderSelectedColor(props)};
+        background-color: ${tableBorderSelectedColor};
         z-index: ${columnControlsZIndex * 2};
       }
     `;
@@ -717,7 +716,7 @@ const resizeHandleOverrides = props => {
       top: -1px;
       width: ${resizeLineWidth}px;
       height: calc(100% + 2px);
-      background-color: ${tableBorderSelectedColor(props)};
+      background-color: ${tableBorderSelectedColor};
       z-index: ${columnControlsZIndex * 2};
     }
 
@@ -727,7 +726,7 @@ const resizeHandleOverrides = props => {
       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;
     }
@@ -739,7 +738,7 @@ const resizeHandleOverrides = props => {
       top: -1px;
       width: ${resizeLineWidth}px;
       height: calc(100% + 2px);
-      background-color: ${tableBorderSelectedColor(props)};
+      background-color: ${tableBorderSelectedColor};
       z-index: ${columnControlsZIndex * 2};
     }
 
@@ -749,13 +748,13 @@ const resizeHandleOverrides = props => {
       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 => css`
+export const resizeHandle = () => css`
   .${ClassName.TABLE_CONTAINER} {
     .${ClassName.RESIZE_HANDLE_DECORATION} {
       background-color: transparent;
@@ -770,7 +769,7 @@ export const resizeHandle = props => css`
 
     ${getLastColumnResizerOverrides()}
 
-    ${resizeHandleOverrides(props)}
+    ${resizeHandleOverrides()}
 
     table
       tr:first-of-type
@@ -787,7 +786,7 @@ export const resizeHandle = props => css`
 `;
 
 // Drag and Drop: drop target insert line
-export const insertLine = props => css`
+export const insertLine = () => css`
   .${ClassName.TABLE_CONTAINER} {
     td.${ClassName.WITH_FIRST_COLUMN_INSERT_LINE}::before {
       content: ' ';
@@ -796,7 +795,7 @@ export const insertLine = props => css`
       top: -1px;
       width: ${insertLineWidth}px;
       height: calc(100% + ${tableCellBorderWidth * 2}px);
-      background-color: ${tableBorderSelectedColor(props)};
+      background-color: ${tableBorderSelectedColor};
       z-index: ${columnControlsZIndex * 2};
     }
 
@@ -806,7 +805,7 @@ export const insertLine = props => 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;
     }
@@ -818,7 +817,7 @@ export const insertLine = props => css`
       top: -1px;
       width: ${insertLineWidth}px;
       height: calc(100% + ${tableCellBorderWidth * 2}px);
-      background-color: ${tableBorderSelectedColor(props)};
+      background-color: ${tableBorderSelectedColor};
       z-index: ${columnControlsZIndex * 2};
     }
 
@@ -828,7 +827,7 @@ export const insertLine = props => 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;
     }
@@ -840,7 +839,7 @@ export const insertLine = props => css`
       top: -1px;
       width: ${insertLineWidth}px;
       height: calc(100% + ${tableCellBorderWidth * 2}px);
-      background-color: ${tableBorderSelectedColor(props)};
+      background-color: ${tableBorderSelectedColor};
       z-index: ${columnControlsZIndex * 2};
     }
 
@@ -850,7 +849,7 @@ export const insertLine = props => 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;
     }
@@ -862,7 +861,7 @@ export const insertLine = props => css`
       top: -1px;
       height: ${insertLineWidth}px;
       width: calc(100% + ${tableCellBorderWidth * 2}px);
-      background-color: ${tableBorderSelectedColor(props)};
+      background-color: ${tableBorderSelectedColor};
       z-index: ${columnControlsZIndex * 2};
     }
 
@@ -872,7 +871,7 @@ export const insertLine = props => 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;
     }
@@ -884,7 +883,7 @@ export const insertLine = props => css`
       bottom: 0;
       height: ${insertLineWidth}px;
       width: calc(100% + 2px);
-      background-color: ${tableBorderSelectedColor(props)};
+      background-color: ${tableBorderSelectedColor};
       z-index: ${columnControlsZIndex * 2};
     }
 
@@ -895,7 +894,7 @@ export const insertLine = props => css`
       position: absolute;
       height: ${insertLineWidth}px;
       width: calc(100% + ${tableCellBorderWidth * 2}px);
-      background-color: ${tableBorderSelectedColor(props)};
+      background-color: ${tableBorderSelectedColor};
       z-index: ${columnControlsZIndex * 2};
     }
   }

package/dist/esm/index.js

@@ -1 +1 @@
-export { default as tablesPlugin } from './plugins/table-plugin';
+export { default as tablesPlugin } from './plugin';

package/dist/esm/{plugins/table/ui → ui}/FloatingContextualButton/index.js

@@ -45,13 +45,7 @@ var FloatingContextualButtonInner = /*#__PURE__*/React.memo(function (props) {
   }
   var labelCellOptions = formatMessage(messages.cellOptions);
   var button = jsx("div", {
-    css: function css(theme) {
-      return [tableFloatingCellButtonStyles({
-        theme: theme
-      }), isContextualMenuOpen && tableFloatingCellButtonSelectedStyles({
-        theme: theme
-      })];
-    }
+    css: [tableFloatingCellButtonStyles(), isContextualMenuOpen && tableFloatingCellButtonSelectedStyles()]
   }, jsx(ToolbarButton, {
     className: ClassName.CONTEXTUAL_MENU_BUTTON,
     selected: isContextualMenuOpen,

package/dist/esm/ui/FloatingContextualButton/styles.js

@@ -0,0 +1,11 @@
+import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
+var _templateObject, _templateObject2;
+import { css } from '@emotion/react';
+import { N0, N20, N30A, N700 } from '@atlaskit/theme/colors';
+import { contextualMenuTriggerSize } from '../consts';
+export var tableFloatingCellButtonStyles = function tableFloatingCellButtonStyles() {
+  return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  > div {\n    // Sits behind button to provide surface-color background\n    background: ", ";\n    border-radius: ", ";\n    display: flex;\n    height: ", "px;\n    flex-direction: column;\n  }\n  && button {\n    background: ", ";\n    flex-direction: column;\n    margin: ", ";\n    outline: 2px solid ", ";\n    border-radius: 1px;\n    padding: 0;\n    height: calc(100% - 4px);\n    display: flex;\n  }\n  && button:hover {\n    background: ", ";\n  }\n  && button:active {\n    background: ", ";\n  }\n  && button > span {\n    margin: 0px ", ";\n  }\n  && span {\n    pointer-events: none;\n  }\n"])), "var(--ds-surface, ".concat(N20, ")"), "var(--ds-border-radius, 3px)", contextualMenuTriggerSize + 2, "var(--ds-background-neutral, none)", "var(--ds-space-025, 2px)", "var(--ds-surface, ".concat(N0, ")"), "var(--ds-background-neutral-hovered, ".concat(N30A, ")"), "var(--ds-background-neutral-pressed, rgba(179, 212, 255, 0.6))", "var(--ds-space-negative-050, -4px)");
+};
+export var tableFloatingCellButtonSelectedStyles = function tableFloatingCellButtonSelectedStyles() {
+  return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  && button {\n    background: ", ";\n  }\n  && button:hover {\n    background: ", ";\n  }\n  && button:active {\n    background: ", ";\n  }\n"])), "var(--ds-background-selected, ".concat(N700, ")"), "var(--ds-background-selected-hovered, ".concat(N700, ")"), "var(--ds-background-selected-pressed, ".concat(N700, ")"));
+};

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

@@ -0,0 +1,14 @@
+import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
+var _templateObject, _templateObject2;
+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 } from '../consts';
+export var cellColourPreviewStyles = function cellColourPreviewStyles(selectedColor) {
+  return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  &::before {\n    background: ", ";\n  }\n"])), selectedColor);
+};
+
+// TODO Delete this comment after verifying space token -> previous value `padding: 8px`
+// TODO Delete this comment after verifying space token -> previous value `margin-left: 4px`
+export var tablePopupStyles = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  .", " {\n    border-radius: ", ";\n    background: ", ";\n    box-shadow: ", ";\n    display: block;\n    position: absolute;\n    top: 0;\n    left: ", "px;\n    padding: ", ";\n\n    > div {\n      padding: 0;\n    }\n  }\n\n  .", " {\n    display: flex;\n\n    &::before {\n      content: '';\n      display: block;\n      border: 1px solid ", ";\n      border-radius: ", ";\n      width: 20px;\n      height: 20px;\n    }\n\n    &::after {\n      content: '\u203A';\n      margin-left: ", ";\n      line-height: 20px;\n      color: ", ";\n    }\n  }\n"])), ClassName.CONTEXTUAL_SUBMENU, "var(--ds-border-radius, 3px)", "var(--ds-surface-overlay, white)", "var(--ds-shadow-overlay, ".concat("0 4px 8px -2px ".concat(N60A, ", 0 0 1px ").concat(N60A), ")"), contextualMenuDropdownWidth, "var(--ds-space-100, 8px)", ClassName.CONTEXTUAL_MENU_ICON, tableBackgroundBorderColor, "var(--ds-border-radius, 3px)", "var(--ds-space-050, 4px)", "var(--ds-icon, ".concat(N90, ")"));