@atlaskit/editor-plugin-table 0.0.0 → 0.0.2

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

@@ -0,0 +1,647 @@
+import { css } from '@emotion/react';
+import { tableMarginTop, tableSharedStyle } from '@atlaskit/editor-common/styles';
+import { fontSize } from '@atlaskit/theme/constants';
+import { N40A, B300, N300, N20A, N0, R500 } from '@atlaskit/theme/colors';
+import { SelectionStyle, getSelectionStyles, akEditorSmallZIndex, akEditorTableNumberColumnWidth, akEditorStickyHeaderZIndex, akEditorTableToolbarSize, akEditorUnitZIndex, akEditorSelectedNodeClassName, relativeFontSizeToBase16 } from '@atlaskit/editor-shared-styles';
+import { scrollbarStyles } from '@atlaskit/editor-shared-styles/scrollbar';
+import { TableCssClassName as ClassName } from '../types';
+import { tableCellBackgroundColor, tableToolbarColor, tableBorderColor, tableCellSelectedColor, tableToolbarSelectedColor, tableBorderSelectedColor, tableCellDeleteColor, tableBorderDeleteColor, tableToolbarDeleteColor, tableBorderRadiusSize, tablePadding, tableScrollbarOffset, resizeHandlerAreaWidth, resizeLineWidth, tableToolbarSize, tableInsertColumnButtonSize, tableControlsSpacing, tableTextColor, stickyRowZIndex, columnControlsDecorationHeight, stickyRowOffsetTop, stickyHeaderBorderBottomWidth } from './consts';
+import { HeaderButton, HeaderButtonHover, HeaderButtonDanger, insertColumnButtonWrapper, insertRowButtonWrapper, columnControlsLineMarker, DeleteButton, OverflowShadow, columnControlsDecoration, hoveredDeleteButton, hoveredCell, hoveredWarningCell, resizeHandle, InsertMarker } from './ui-styles';
+import { token } from '@atlaskit/tokens';
+const cornerControlHeight = tableToolbarSize + 1;
+const rangeSelectionStyles = `
+.${ClassName.NODEVIEW_WRAPPER}.${akEditorSelectedNodeClassName} table tbody tr {
+  th,td {
+    ${getSelectionStyles([SelectionStyle.Blanket, SelectionStyle.Border])}
+  }
+}
+`;
+const sentinelStyles = `.${ClassName.TABLE_CONTAINER} {
+  > .${ClassName.TABLE_STICKY_SENTINEL_TOP}, > .${ClassName.TABLE_STICKY_SENTINEL_BOTTOM} {
+    position: absolute;
+    width: 100%;
+    height: 1px;
+    margin-top: -1px;
+    // need this to avoid sentinel being focused via keyboard
+    // this still allows it to be detected by intersection observer
+    visibility: hidden;
+  }
+  > .${ClassName.TABLE_STICKY_SENTINEL_TOP} {
+    top: ${columnControlsDecorationHeight}px;
+  }
+  > .${ClassName.TABLE_STICKY_SENTINEL_BOTTOM} {
+      bottom: ${tableScrollbarOffset + stickyRowOffsetTop + tablePadding * 2 + 23}px;
+  }
+  &.${ClassName.WITH_CONTROLS} {
+    > .${ClassName.TABLE_STICKY_SENTINEL_TOP} {
+      top: 0px;
+    }
+    > .${ClassName.TABLE_STICKY_SENTINEL_BOTTOM} {
+      margin-bottom: ${columnControlsDecorationHeight}px;
+    }
+  }
+}`; // TODO: https://product-fabric.atlassian.net/browse/DSP-4139
+
+export const tableStyles = props => {
+  var _props$featureFlags;
+
+  return css`
+  .${ClassName.LAYOUT_BUTTON} button {
+    background: ${token('color.background.neutral', N20A)};
+    color: ${token('color.icon', N300)};
+    cursor: none;
+  }
+
+  .${ClassName.LAYOUT_BUTTON}:not(.${ClassName.IS_RESIZING}) button:hover {
+    background: ${token('color.background.neutral.hovered', B300)};
+    color: ${token('color.icon', 'white')} !important;
+    cursor: pointer;
+  }
+
+  .ProseMirror {
+    ${tableSharedStyle(props)};
+    ${columnControlsLineMarker(props)};
+    ${hoveredDeleteButton};
+    ${hoveredCell};
+    ${hoveredWarningCell};
+    ${resizeHandle};
+    ${rangeSelectionStyles};
+
+    .${ClassName.LAST_ITEM_IN_CELL} {
+      margin-bottom: 0;
+    }
+
+    .${ClassName.TABLE_NODE_WRAPPER} {
+      td.${ClassName.TABLE_CELL}, th.${ClassName.TABLE_HEADER_CELL} {
+        position: relative;
+        overflow: visible;
+      }
+
+      td.${ClassName.TABLE_CELL} {
+        background-color: ${tableCellBackgroundColor(props)};
+
+        // ED-15246: Trello card is visible through a border of a table border
+        // This fixes a border issue caused by relative positioned table cells
+        &::after {
+          height: 100%;
+          content: '';
+          border-left: 1px solid ${tableBorderColor(props)};
+          border-bottom: 1px solid ${tableBorderColor(props)};
+          position: absolute;
+          right: 0px;
+          top: 0px;
+          bottom: 0;
+          width: 100%;
+          display: inline-block;
+          pointer-events: none;
+        }
+      }
+    }
+
+    .${ClassName.CONTROLS_FLOATING_BUTTON_COLUMN} {
+      ${insertColumnButtonWrapper}
+    }
+
+    .${ClassName.CONTROLS_FLOATING_BUTTON_ROW} {
+      ${insertRowButtonWrapper}
+    }
+
+    /* Delete button */
+    ${DeleteButton}
+    /* Ends Delete button */
+
+    /* sticky styles */
+    .${ClassName.TABLE_STICKY} .${ClassName.NUMBERED_COLUMN} .${ClassName.NUMBERED_COLUMN_BUTTON}:first-of-type {
+      margin-top: ${stickyRowOffsetTop + 2}px;
+      width: ${akEditorTableNumberColumnWidth}px;
+
+      position: fixed !important;
+      z-index: ${akEditorStickyHeaderZIndex} !important;
+      box-shadow: 0px -${stickyRowOffsetTop}px ${token('elevation.surface', 'white')};
+      border-right: 0 none;
+      /* top set by NumberColumn component */
+    }
+
+    .${ClassName.TABLE_STICKY} .${ClassName.CORNER_CONTROLS}.sticky {
+      position: fixed !important;
+      /* needs to be above row controls */
+      z-index: ${akEditorSmallZIndex} !important;
+      background: ${token('elevation.surface', 'white')};
+
+      width: ${tableToolbarSize}px;
+      height: ${tableToolbarSize}px;
+    }
+
+    .${ClassName.CORNER_CONTROLS}.sticky .${ClassName.CONTROLS_CORNER_BUTTON} {
+      border-bottom: 0px none;
+      border-right: 0px none;
+
+      height: ${tableToolbarSize}px;
+      width: ${tableToolbarSize}px;
+    }
+
+    .${ClassName.TABLE_STICKY} .${ClassName.COLUMN_CONTROLS_DECORATIONS} {
+      z-index: 0;
+    }
+
+    .${ClassName.TABLE_STICKY}
+      .${ClassName.ROW_CONTROLS}
+      .${ClassName.ROW_CONTROLS_BUTTON_WRAP}.sticky {
+      position: fixed !important;
+      z-index: ${akEditorStickyHeaderZIndex} !important;
+      display: flex;
+      border-left: ${tableToolbarSize}px solid
+        ${token('elevation.surface', 'white')};
+      margin-left: -${tableToolbarSize}px;
+    }
+
+    .${ClassName.TABLE_STICKY} col:first-of-type {
+      /* moving rows out of a table layout does weird things in Chrome */
+      border-right: 1px solid ${token('elevation.surface', 'green')};
+    }
+
+    tr.sticky {
+      padding-top: ${stickyRowOffsetTop}px;
+      position: fixed;
+      display: grid;
+
+      /* to keep it above cell selection */
+      z-index: ${stickyRowZIndex};
+
+      overflow-y: visible;
+      overflow-x: hidden;
+
+      grid-auto-flow: column;
+
+      /* background for where controls apply */
+      background: ${token('elevation.surface', 'white')};
+      box-sizing: content-box;
+
+      margin-top: 2px;
+
+      box-shadow: ${token('elevation.shadow.overflow', `0 6px 4px -4px ${N40A}`)};
+      margin-left: -1px;
+
+      &.no-pointer-events {
+        pointer-events: none;
+      }
+    }
+
+    .${ClassName.TABLE_STICKY} .${ClassName.TABLE_STICKY_SHADOW} {
+      left: unset;
+      position: fixed;
+      z-index: ${stickyRowZIndex + 1};
+    }
+
+    .${ClassName.WITH_CONTROLS}.${ClassName.TABLE_STICKY}
+      .${ClassName.TABLE_STICKY_SHADOW} {
+      padding-bottom: ${tableToolbarSize}px;
+    }
+
+    tr.sticky th {
+      border-bottom: ${stickyHeaderBorderBottomWidth}px solid
+        ${tableBorderColor(props)};
+      margin-right: -1px;
+    }
+
+    .${ClassName.TABLE_STICKY} tr.sticky > th:last-child {
+      border-right-width: 1px;
+    }
+
+    /* add left edge for first cell */
+    .${ClassName.TABLE_STICKY} tr.sticky > th:first-of-type {
+      margin-left: 0px;
+    }
+
+    /* add a little bit so the scroll lines up with the table */
+    .${ClassName.TABLE_STICKY} tr.sticky::after {
+      content: ' ';
+      width: 1px;
+    }
+
+    /* To fix jumpiness caused in Chrome Browsers for sticky headers */
+    .${ClassName.TABLE_STICKY} .sticky + tr {
+      min-height: 0px;
+    }
+
+    /* move resize line a little in sticky bar */
+    .${ClassName.TABLE_CONTAINER}.${ClassName.TABLE_STICKY} {
+      tr.sticky
+        td.${ClassName.WITH_RESIZE_LINE},
+        tr.sticky
+        th.${ClassName.WITH_RESIZE_LINE} {
+        .${ClassName.RESIZE_HANDLE_DECORATION}::after {
+          right: ${(resizeHandlerAreaWidth - resizeLineWidth) / 2 + 1}px;
+        }
+      }
+
+      /* when selected put it back to normal -- :not selector would be nicer */
+      tr.sticky
+        td.${ClassName.WITH_RESIZE_LINE}.${ClassName.SELECTED_CELL},
+        tr.sticky
+        th.${ClassName.WITH_RESIZE_LINE}.${ClassName.SELECTED_CELL} {
+        .${ClassName.RESIZE_HANDLE_DECORATION}::after {
+          right: ${(resizeHandlerAreaWidth - resizeLineWidth) / 2}px;
+        }
+      }
+    }
+
+    tr.sticky
+      .${ClassName.HOVERED_CELL},
+      tr.sticky
+      .${ClassName.SELECTED_CELL} {
+      z-index: 1;
+    }
+
+    .${ClassName.WITH_CONTROLS} tr.sticky {
+      padding-top: ${tableControlsSpacing}px;
+    }
+
+    .${ClassName.WITH_CONTROLS}.${ClassName.TABLE_STICKY}
+      .${ClassName.NUMBERED_COLUMN}
+      .${ClassName.NUMBERED_COLUMN_BUTTON}:first-of-type {
+      margin-top: ${tableControlsSpacing + 2}px;
+    }
+
+    .${ClassName.CORNER_CONTROLS}.sticky {
+      border-top: ${tableControlsSpacing - tableToolbarSize + 2}px solid
+        ${token('elevation.surface', 'white')};
+    }
+
+    ${(_props$featureFlags = props.featureFlags) !== null && _props$featureFlags !== void 0 && _props$featureFlags.stickyHeadersOptimization ? sentinelStyles : ''}
+    ${OverflowShadow(props)}
+
+    .${ClassName.TABLE_STICKY} .${ClassName.TABLE_STICKY_SHADOW} {
+      height: 0; // stop overflow flash & set correct height in update-overflow-shadows.ts
+    }
+
+    .less-padding {
+      padding: 0 ${tablePadding}px;
+
+      .${ClassName.ROW_CONTROLS_WRAPPER} {
+        padding: 0 ${tablePadding}px;
+      }
+
+      &.${ClassName.TABLE_CONTAINER}[data-number-column='true'] {
+        padding-left: ${akEditorTableNumberColumnWidth + tablePadding - 1}px;
+      }
+
+      .${ClassName.TABLE_LEFT_SHADOW} {
+        left: 6px;
+      }
+
+      .${ClassName.TABLE_RIGHT_SHADOW} {
+        left: calc(100% - 6px);
+      }
+    }
+
+    > .${ClassName.NODEVIEW_WRAPPER} {
+      /**
+       * Prevent margins collapsing, aids with placing the gap-cursor correctly
+       * @see https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing
+       *
+       * TODO: Enable this, many tests will fail!
+       * border-top: 1px solid transparent;
+       */
+    }
+
+    /* Breakout only works on top level */
+    > * .${ClassName.NODEVIEW_WRAPPER} .${ClassName.TABLE_CONTAINER} {
+      margin-left: unset !important;
+      width: 100% !important;
+    }
+
+    ${columnControlsDecoration(props)};
+
+    /* Corner controls */
+    .${ClassName.CORNER_CONTROLS} {
+      width: ${tableToolbarSize + 1}px;
+      height: ${cornerControlHeight}px;
+      display: none;
+
+      .${ClassName.CORNER_CONTROLS_INSERT_ROW_MARKER} {
+        position: relative;
+
+        ${InsertMarker(props, `
+          left: -11px;
+          top: 9px;
+        `)};
+      }
+
+      .${ClassName.CORNER_CONTROLS_INSERT_COLUMN_MARKER} {
+        position: relative;
+
+        ${InsertMarker(props, `
+          right: -1px;
+          top: -12px;
+        `)};
+      }
+    }
+
+    .${ClassName.CORNER_CONTROLS}.sticky {
+      .${ClassName.CORNER_CONTROLS_INSERT_ROW_MARKER} {
+        /* sticky row insert dot overlaps other row insert and messes things up */
+        display: none !important;
+      }
+    }
+
+    .${ClassName.CONTROLS_CORNER_BUTTON} {
+      position: absolute;
+      top: 0;
+      width: ${tableToolbarSize + 1}px;
+      height: ${tableToolbarSize + 1}px;
+      border: 1px solid ${tableBorderColor(props)};
+      border-radius: 0;
+      border-top-left-radius: ${tableBorderRadiusSize}px;
+      background: ${tableToolbarColor(props)};
+      box-sizing: border-box;
+      padding: 0;
+      :focus {
+        outline: none;
+      }
+    }
+    .active .${ClassName.CONTROLS_CORNER_BUTTON} {
+      border-color: ${tableBorderSelectedColor};
+      background: ${tableToolbarSelectedColor};
+    }
+
+    .${ClassName.TABLE_CONTAINER}[data-number-column='true'] {
+      .${ClassName.CORNER_CONTROLS}, .${ClassName.CONTROLS_CORNER_BUTTON} {
+        width: ${akEditorTableToolbarSize + akEditorTableNumberColumnWidth}px;
+      }
+      .${ClassName.ROW_CONTROLS} .${ClassName.CONTROLS_BUTTON} {
+        border-right-width: 0;
+      }
+    }
+
+    :not(.${ClassName.IS_RESIZING}) .${ClassName.CONTROLS_CORNER_BUTTON}:hover {
+      border-color: ${tableBorderSelectedColor};
+      background: ${tableToolbarSelectedColor};
+      cursor: pointer;
+    }
+
+    :not(.${ClassName.IS_RESIZING})
+      .${ClassName.CONTROLS_CORNER_BUTTON}.${ClassName.HOVERED_CELL_IN_DANGER} {
+      border-color: ${tableBorderDeleteColor};
+      background: ${tableToolbarDeleteColor};
+    }
+
+    /* Row controls */
+    .${ClassName.ROW_CONTROLS} {
+      width: ${tableToolbarSize}px;
+      box-sizing: border-box;
+      display: none;
+      position: relative;
+
+      ${InsertMarker(props, `
+        bottom: -1px;
+        left: -11px;
+      `)};
+
+      .${ClassName.ROW_CONTROLS_INNER} {
+        display: flex;
+        flex-direction: column;
+      }
+      .${ClassName.ROW_CONTROLS_BUTTON_WRAP}:last-child > button {
+        border-bottom-left-radius: ${tableBorderRadiusSize}px;
+      }
+      .${ClassName.ROW_CONTROLS_BUTTON_WRAP} {
+        position: relative;
+        margin-top: -1px;
+      }
+      .${ClassName.ROW_CONTROLS_BUTTON_WRAP}:hover,
+        .${ClassName.ROW_CONTROLS_BUTTON_WRAP}.active,
+        .${ClassName.CONTROLS_BUTTON}:hover {
+        z-index: ${akEditorUnitZIndex};
+      }
+
+      ${HeaderButton(props, `
+        border-bottom: 1px solid ${tableBorderColor(props)};
+        border-right: 0px;
+        border-radius: 0;
+        height: 100%;
+        width: ${tableToolbarSize}px;
+
+        .${ClassName.CONTROLS_BUTTON_OVERLAY} {
+          position: absolute;
+          width: 30px;
+          height: 50%;
+          right: 0;
+          bottom: 0;
+        }
+        .${ClassName.CONTROLS_BUTTON_OVERLAY}:first-of-type {
+          top: 0;
+        }
+      `)}
+    }
+
+    :not(.${ClassName.IS_RESIZING}) .${ClassName.ROW_CONTROLS} {
+      ${HeaderButtonHover()}
+      ${HeaderButtonDanger()}
+    }
+
+    /* Numbered column */
+    .${ClassName.NUMBERED_COLUMN} {
+      position: relative;
+      float: right;
+      margin-left: ${akEditorTableToolbarSize - 1}px;
+      top: ${akEditorTableToolbarSize}px;
+      width: ${akEditorTableNumberColumnWidth + 1}px;
+      box-sizing: border-box;
+    }
+
+    .${ClassName.NUMBERED_COLUMN_BUTTON} {
+      border: 1px solid ${tableBorderColor(props)};
+      box-sizing: border-box;
+      margin-top: -1px;
+      padding-bottom: 2px;
+      padding: 10px 2px;
+      text-align: center;
+      font-size: ${relativeFontSizeToBase16(fontSize())};
+      background-color: ${tableToolbarColor(props)};
+      color: ${tableTextColor(props)};
+      border-color: ${tableBorderColor(props)};
+
+      :first-child:not(style),
+      style:first-child + * {
+        margin-top: 0;
+      }
+      :last-child {
+        border-bottom: 1px solid ${tableBorderColor(props)};
+      }
+    }
+
+    .${ClassName.WITH_CONTROLS} {
+      .${ClassName.CORNER_CONTROLS}, .${ClassName.ROW_CONTROLS} {
+        display: block;
+      }
+      .${ClassName.NUMBERED_COLUMN} {
+        padding-left: 1px;
+        .${ClassName.NUMBERED_COLUMN_BUTTON} {
+          border-left: 0 none;
+        }
+
+        .${ClassName.NUMBERED_COLUMN_BUTTON}.active {
+          border-bottom: 1px solid ${tableBorderSelectedColor};
+          border-color: ${tableBorderSelectedColor};
+          background-color: ${tableToolbarSelectedColor};
+          position: relative;
+          z-index: ${akEditorUnitZIndex};
+          color: ${token('color.text.inverse', N0)};
+        }
+      }
+    }
+    :not(.${ClassName.IS_RESIZING}) .${ClassName.WITH_CONTROLS} {
+      .${ClassName.NUMBERED_COLUMN_BUTTON} {
+        cursor: pointer;
+      }
+      .${ClassName.NUMBERED_COLUMN_BUTTON}:hover {
+        border-bottom: 1px solid ${tableBorderSelectedColor};
+        border-color: ${tableBorderSelectedColor};
+        background-color: ${tableToolbarSelectedColor};
+        position: relative;
+        z-index: ${akEditorUnitZIndex};
+        color: ${token('color.text.inverse', N0)};
+      }
+      .${ClassName.NUMBERED_COLUMN_BUTTON}.${ClassName.HOVERED_CELL_IN_DANGER} {
+        background-color: ${tableToolbarDeleteColor};
+        border: 1px solid ${tableBorderDeleteColor};
+        border-left: 0;
+        color: ${token('color.text.inverse', R500)};
+        position: relative;
+        z-index: ${akEditorUnitZIndex};
+      }
+    }
+
+    /* Table */
+    .${ClassName.TABLE_NODE_WRAPPER} > table {
+      table-layout: fixed;
+
+      .${ClassName.COLUMN_CONTROLS_DECORATIONS} + * {
+        margin-top: 0;
+      }
+
+      /*
+       * Headings have a top margin by default, but we don't want this on the
+       * first heading within table header cells.
+       *
+       * This specifically sets margin-top for the first heading within a header
+       * cell when center/right aligned.
+       */
+      th.${ClassName.TABLE_HEADER_CELL} > .fabric-editor-block-mark {
+        > h1:first-of-type,
+        > h2:first-of-type,
+        > h3:first-of-type,
+        > h4:first-of-type,
+        > h5:first-of-type,
+        > h6:first-of-type {
+          margin-top: 0;
+        }
+      }
+
+      .${ClassName.SELECTED_CELL}, .${ClassName.HOVERED_CELL_IN_DANGER} {
+        position: relative;
+      }
+      /* Give selected cells a blue overlay */
+      .${ClassName.SELECTED_CELL}::after,
+        .${ClassName.HOVERED_CELL_IN_DANGER}::after {
+        z-index: ${akEditorSmallZIndex};
+        position: absolute;
+        content: '';
+        left: 0;
+        right: 0;
+        top: 0;
+        bottom: 0;
+        width: 100%;
+        pointer-events: none;
+      }
+      .${ClassName.SELECTED_CELL} {
+        border: 1px solid ${tableBorderSelectedColor};
+      }
+      .${ClassName.SELECTED_CELL}::after {
+        background: ${tableCellSelectedColor};
+        z-index: ${akEditorSmallZIndex};
+      }
+      th.${ClassName.HOVERED_CELL_IN_DANGER}::after,
+        td.${ClassName.HOVERED_CELL_IN_DANGER}::after {
+        background: ${tableCellDeleteColor};
+        z-index: ${akEditorUnitZIndex * 100};
+      }
+      // ED-15246: Trello card is visible through a border of a table border
+      td.${ClassName.HOVERED_CELL}, td.${ClassName.SELECTED_CELL} {
+        &::after {
+          height: 100%;
+          width: 100%;
+          border: 1px solid ${tableBorderSelectedColor};
+          content: '';
+          position: absolute;
+          left: -1px;
+          top: -1px;
+          bottom: 0;
+          z-index: ${akEditorSmallZIndex};
+          display: inline-block;
+          pointer-events: none;
+        }
+        &.${ClassName.HOVERED_CELL_IN_DANGER}::after {
+          border: 1px solid ${tableBorderDeleteColor};
+          z-index: ${akEditorUnitZIndex * 100};
+        }
+      }
+    }
+    .${ClassName.ROW_CONTROLS_WRAPPER} {
+      position: absolute;
+      /* top of corner control is table margin top - corner control height + 1 pixel of table border. */
+      top: ${tableMarginTop - cornerControlHeight + 1}px;
+    }
+    .${ClassName.ROW_CONTROLS_WRAPPER}.${ClassName.TABLE_LEFT_SHADOW} {
+      z-index: ${akEditorUnitZIndex};
+    }
+    .${ClassName.ROW_CONTROLS_WRAPPER} {
+      left: -${tableToolbarSize}px;
+    }
+    .${ClassName.TABLE_NODE_WRAPPER} {
+      /*
+      compensating for half of the insert column button
+      that is aligned to the right edge initially on hover of the top right column control when table overflown,
+      its center should be aligned with the edge
+       */
+      padding-right: ${tableInsertColumnButtonSize / 2}px;
+      margin-right: -${tableInsertColumnButtonSize / 2}px;
+      padding-bottom: ${tableScrollbarOffset}px;
+      margin-bottom: -${tableScrollbarOffset}px;
+      /* fixes gap cursor height */
+      overflow: auto;
+      position: relative;
+    }
+  }
+
+  .ProseMirror.${ClassName.IS_RESIZING} {
+    .${ClassName.TABLE_NODE_WRAPPER} {
+      overflow-x: auto;
+      ${scrollbarStyles};
+    }
+  }
+
+  .ProseMirror.${ClassName.RESIZE_CURSOR} {
+    cursor: col-resize;
+  }
+
+  .ProseMirror .pm-table-cell-content-wrap ol[data-child-count='100+'] {
+    padding-left: revert;
+  }
+`;
+};
+export const tableFullPageEditorStyles = css`
+  .ProseMirror .${ClassName.TABLE_NODE_WRAPPER} > table {
+    margin-left: 0;
+    margin-right: 0;
+    width: 100%;
+  }
+`;
+export const tableCommentEditorStyles = css`
+  .ProseMirror .${ClassName.TABLE_NODE_WRAPPER} > table {
+    margin-left: 0;
+    margin-right: 0;
+    ${scrollbarStyles};
+  }
+`;

package/dist/es2019/plugins/table/ui/consts.js

@@ -0,0 +1,61 @@
+import { B200, B300, N0, N20, R400, R75, DN400, N200, DN30 } from '@atlaskit/theme/colors';
+import { tableCellBorderWidth, tableMarginTop } from '@atlaskit/editor-common/styles';
+import { akEditorTableBorder, akEditorTableBorderDark, akEditorTableToolbar, akEditorTableToolbarDark, akEditorTableToolbarSize, akEditorUnitZIndex, akRichMediaResizeZIndex } from '@atlaskit/editor-shared-styles';
+import { token } from '@atlaskit/tokens';
+import { RESIZE_HANDLE_AREA_DECORATION_GAP } from '../types';
+import { themed } from '@atlaskit/theme/components';
+/**
+ * Basic colors added to prevent content overflow in table cells.
+ */
+// TODO: https://product-fabric.atlassian.net/browse/DSP-4135
+// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
+
+export const tableCellBackgroundColor = themed({
+  light: N0,
+  dark: DN30
+});
+export const tableToolbarColor = themed({
+  light: akEditorTableToolbar,
+  dark: akEditorTableToolbarDark
+});
+export const tableTextColor = themed({
+  light: token('color.text.subtlest', N200),
+  dark: token('color.text.subtlest', DN400)
+});
+export const tableBorderColor = themed({
+  light: token('color.border', akEditorTableBorder),
+  dark: token('color.border', akEditorTableBorderDark)
+});
+export const tableFloatingControlsColor = token('color.background.neutral', 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 tableBorderRadiusSize = 3;
+export const tablePadding = 8;
+export const tableScrollbarOffset = 15;
+export const tableMarginFullWidthMode = 2;
+export const tableInsertColumnButtonSize = 20;
+export const tableDeleteButtonSize = 16;
+export const tableDeleteButtonOffset = 6;
+export const tableToolbarSize = akEditorTableToolbarSize;
+export const tableControlsSpacing = tableMarginTop + tablePadding - tableCellBorderWidth;
+export const tableInsertColumnButtonOffset = 3;
+export const layoutButtonSize = 32;
+export const lineMarkerOffsetFromColumnControls = 13;
+export const lineMarkerSize = 4;
+export const columnControlsDecorationHeight = 25;
+export const columnControlsZIndex = akEditorUnitZIndex * 10;
+export const columnControlsSelectedZIndex = columnControlsZIndex + 1;
+export const columnResizeHandleZIndex = columnControlsSelectedZIndex + 1;
+export const resizeHandlerAreaWidth = RESIZE_HANDLE_AREA_DECORATION_GAP / 3;
+export const resizeLineWidth = 2;
+export const resizeHandlerZIndex = columnControlsZIndex + akRichMediaResizeZIndex;
+export const contextualMenuTriggerSize = 16;
+export const contextualMenuDropdownWidth = 180;
+export const stickyRowZIndex = resizeHandlerZIndex + 2;
+export const stickyRowOffsetTop = 8;
+export const stickyHeaderBorderBottomWidth = 1;