@atlaskit/editor-core 166.0.4 → 167.0.2

package/dist/es2019/plugins/table/pm-plugins/safari-delete-composition-text-issue-workaround.js

@@ -0,0 +1,106 @@
+/**
+ * Fix an issue that composition text replacement in Safari removes empty nodes during text composition text deletion.
+ * https://github.com/ProseMirror/prosemirror/issues/934
+ * We will remove this plugin when Webkit fix the problem itself.
+ */
+import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
+import { PluginKey } from 'prosemirror-state';
+import { Decoration, DecorationSet } from 'prosemirror-view';
+export const tableSafariDeleteCompositionTextIssueWorkaroundKey = new PluginKey('tableSafariDeleteCompositionTextIssueWorkaround');
+export const createPlugin = () => {
+  return new SafePlugin({
+    key: tableSafariDeleteCompositionTextIssueWorkaroundKey,
+    state: {
+      init: () => ({
+        renderSpan: false,
+        decorations: DecorationSet.empty
+      }),
+      apply: (tr, value) => {
+        const renderSpan = tr.getMeta(tableSafariDeleteCompositionTextIssueWorkaroundKey);
+
+        if (typeof renderSpan === 'undefined') {
+          return value;
+        }
+
+        let decorations;
+
+        if (renderSpan) {
+          // Find position of the first text node in case it has multiple text nodes created by Japanese IME
+          const {
+            $from
+          } = tr.selection;
+          const pos = $from.before($from.depth);
+          const spanDecoration = Decoration.widget(pos, () => {
+            const spanElement = document.createElement('span');
+            return spanElement;
+          });
+          decorations = DecorationSet.create(tr.doc, [spanDecoration]);
+        } else {
+          decorations = DecorationSet.empty;
+        }
+
+        return {
+          renderSpan,
+          decorations
+        };
+      }
+    },
+    props: {
+      decorations: state => tableSafariDeleteCompositionTextIssueWorkaroundKey.getState(state).decorations,
+      handleDOMEvents: {
+        beforeinput: (view, event) => {
+          if ((event === null || event === void 0 ? void 0 : event.inputType) !== 'deleteCompositionText') {
+            return false;
+          }
+
+          const selection = window.getSelection();
+
+          if (!selection || selection.rangeCount <= 0 || selection.type !== 'Range') {
+            return false;
+          }
+
+          const range = selection.getRangeAt(0);
+          const {
+            startContainer,
+            endContainer,
+            endOffset,
+            startOffset
+          } = range;
+          /**
+           * On Safari when composition text is deleted, it deletes any empty elements it finds up the dom tree. Prosemirror can sometimes be confused by this
+           * and will think that we meant to delete those elements. This fix forces the resulting node to not be empty.
+           * The condition here checks to see if the entire text node is about to be swapped inside of an element
+           */
+
+          if (startContainer.nodeType === Node.TEXT_NODE && startContainer === endContainer && startOffset === 0 && endOffset === startContainer.length) {
+            const {
+              tr
+            } = view.state;
+            tr.setMeta(tableSafariDeleteCompositionTextIssueWorkaroundKey, true);
+            view.dispatch(tr);
+          }
+
+          return false;
+        },
+        input: (view, event) => {
+          if ((event === null || event === void 0 ? void 0 : event.inputType) !== 'deleteCompositionText') {
+            return false;
+          }
+
+          const selection = window.getSelection();
+
+          if (!selection) {
+            return false;
+          }
+
+          const {
+            tr
+          } = view.state;
+          tr.setMeta(tableSafariDeleteCompositionTextIssueWorkaroundKey, false);
+          view.dispatch(tr);
+          return false;
+        }
+      }
+    }
+  });
+};

package/dist/es2019/plugins/table/pm-plugins/table-resizing/event-handlers.js

@@ -11,7 +11,7 @@ import { evenColumns, setDragging, stopResizing } from './commands';
 import { getPluginState } from './plugin-factory';
 import { currentColWidth, getLayoutSize, getResizeState, pointsAtCell, resizeColumn, updateControls } from './utils';
 import { ACTION_SUBJECT, addAnalytics, EVENT_TYPE, TABLE_ACTION } from '../../../analytics';
-export const handleMouseDown = (view, event, localResizeHandlePos, dynamicTextSizing) => {
+export const handleMouseDown = (view, event, localResizeHandlePos) => {
   const {
     state,
     dispatch
@@ -39,9 +39,7 @@ export const handleMouseDown = (view, event, localResizeHandlePos, dynamicTextSi
 
   const containerWidth = widthPluginKey.getState(state);
   const parentWidth = getParentNodeWidth(start, state, containerWidth);
-  let maxSize = parentWidth || getLayoutSize(dom.getAttribute('data-layout'), containerWidth.width, {
-    dynamicTextSizing
-  });
+  let maxSize = parentWidth || getLayoutSize(dom.getAttribute('data-layout'), containerWidth.width, {});
 
   if (originalTable.attrs.isNumberColumnEnabled) {
     maxSize -= akEditorTableNumberColumnWidth;

package/dist/es2019/plugins/table/pm-plugins/table-resizing/plugin.js

@@ -7,14 +7,12 @@ import { createPluginState, getPluginState } from './plugin-factory';
 import { pluginKey } from './plugin-key';
 import { getResizeCellPos } from './utils';
 export function createPlugin(dispatch, {
-  lastColumnResizable = true,
-  dynamicTextSizing = false
+  lastColumnResizable = true
 }) {
   return new SafePlugin({
     key: pluginKey,
     state: createPluginState(dispatch, {
       lastColumnResizable,
-      dynamicTextSizing,
       resizeHandlePos: null,
       dragging: null,
       lastClick: null
@@ -42,7 +40,7 @@ export function createPlugin(dispatch, {
           } = getPluginState(state);
 
           if (resizeHandlePos !== null && !dragging) {
-            if (handleMouseDown(view, event, resizeHandlePos, dynamicTextSizing)) {
+            if (handleMouseDown(view, event, resizeHandlePos)) {
               const {
                 state,
                 dispatch

package/dist/es2019/plugins/table/pm-plugins/table-resizing/utils/misc.js

@@ -12,7 +12,6 @@ export const tableLayoutToSize = {
 
 export function getLayoutSize(tableLayout, containerWidth = 0, options) {
   const {
-    dynamicTextSizing,
     isFullWidthModeEnabled
   } = options;
 
@@ -26,7 +25,7 @@ export function getLayoutSize(tableLayout, containerWidth = 0, options) {
     return parseInt(calculatedTableWidth, 10);
   }
 
-  if (dynamicTextSizing && tableLayout === 'default') {
+  if (tableLayout === 'default') {
     return getDefaultLayoutMaxWidth(containerWidth);
   }
 
@@ -77,14 +76,11 @@ export const getTableMaxWidth = ({
   table,
   tableStart,
   state,
-  layout,
-  dynamicTextSizing
+  layout
 }) => {
   const containerWidth = widthPluginKey.getState(state);
   const parentWidth = getParentNodeWidth(tableStart, state, containerWidth);
-  let maxWidth = parentWidth || getLayoutSize(layout, containerWidth.width, {
-    dynamicTextSizing
-  });
+  let maxWidth = parentWidth || getLayoutSize(layout, containerWidth.width, {});
 
   if (table.attrs.isNumberColumnEnabled) {
     maxWidth -= akEditorTableNumberColumnWidth;

package/dist/es2019/plugins/table/pm-plugins/table-resizing/utils/resize-state.js

@@ -222,7 +222,7 @@ export const normaliseTableLayout = input => {
       return 'default';
   }
 };
-export const getNewResizeStateFromSelectedColumns = (rect, state, domAtPos, dynamicTextSizing) => {
+export const getNewResizeStateFromSelectedColumns = (rect, state, domAtPos) => {
   const {
     totalRowCount,
     totalColumnCount,
@@ -245,8 +245,7 @@ export const getNewResizeStateFromSelectedColumns = (rect, state, domAtPos, dyna
     table: table.node,
     tableStart: table.start,
     state,
-    layout,
-    dynamicTextSizing
+    layout
   });
   const resizeState = getResizeState({
     minWidth: tableCellMinWidth,

package/dist/es2019/plugins/table/pm-plugins/table-resizing/utils/scale-table.js

@@ -15,19 +15,16 @@ export const scale = (tableRef, options, domAtPos) => {
     node,
     containerWidth,
     previousContainerWidth,
-    dynamicTextSizing,
     prevNode,
     start,
     isBreakoutEnabled,
     layoutChanged
   } = options;
   const maxSize = getLayoutSize(node.attrs.layout, containerWidth, {
-    dynamicTextSizing,
     isBreakoutEnabled
   });
   const prevTableWidth = getTableWidth(prevNode);
   const previousMaxSize = getLayoutSize(prevNode.attrs.layout, previousContainerWidth, {
-    dynamicTextSizing,
     isBreakoutEnabled
   });
   let newWidth = maxSize; // adjust table width if layout is updated

package/dist/es2019/plugins/table/transforms/column-width.js

@@ -140,8 +140,7 @@ export const rescaleColumns = (table, view) => tr => {
     table: table.node,
     tableStart: table.start,
     state,
-    layout,
-    dynamicTextSizing: true
+    layout
   });
   let resizeState = getResizeState({
     minWidth: tableCellMinWidth,

package/dist/es2019/plugins/table/transforms/fix-tables.js

@@ -117,9 +117,7 @@ export const fixAutoSizedTable = (view, tableNode, tableRef, tablePos, opts) =>
   const colWidths = parseDOMColumnWidths(domAtPos, tableNode, tableStart, tableRef);
   const totalContentWidth = colWidths.reduce((acc, current) => acc + current, 0);
   const tableLayout = getLayoutBasedOnWidth(totalContentWidth);
-  const maxLayoutSize = getLayoutSize(tableLayout, opts.containerWidth, {
-    dynamicTextSizing: opts.dynamicTextSizing
-  }); // Content width will generally not meet the constraints of the layout
+  const maxLayoutSize = getLayoutSize(tableLayout, opts.containerWidth, {}); // Content width will generally not meet the constraints of the layout
   // whether it be below or above, so we scale our columns widths
   // to meet these requirements
 

package/dist/es2019/plugins/table/ui/FloatingContextualButton/styles.js

@@ -2,11 +2,13 @@ import { css } from '@emotion/react';
 import { N0, N20 } from '@atlaskit/theme/colors';
 import { borderRadius } from '@atlaskit/theme/constants';
 import { contextualMenuTriggerSize } from '../consts';
+import { token } from '@atlaskit/tokens'; // TODO: https://product-fabric.atlassian.net/browse/DSP-4462
+
 export const tableFloatingCellButtonStyles = css`
   > div {
-    background: ${N20};
+    background: ${token('color.background.neutral', N20)};
     border-radius: ${borderRadius()}px;
-    border: 2px solid ${N0};
+    border: 2px solid ${token('color.border.inverse', N0)};
     display: flex;
     height: ${contextualMenuTriggerSize - 2}px;
     flex-direction: column;

package/dist/es2019/plugins/table/ui/FloatingContextualMenu/styles.js

@@ -4,11 +4,12 @@ import { N60A, N90 } from '@atlaskit/theme/colors';
 import { contextualMenuDropdownWidth } from '../consts';
 import { TableCssClassName as ClassName } from '../../types';
 import { borderRadius } from '@atlaskit/theme/constants';
+import { token } from '@atlaskit/tokens';
 export const tablePopupStyles = css`
   .${ClassName.CONTEXTUAL_SUBMENU} {
     border-radius: ${borderRadius()}px;
-    background: white;
-    box-shadow: 0 4px 8px -2px ${N60A}, 0 0 1px ${N60A};
+    background: ${token('elevation.surface.overlay', 'white')};
+    box-shadow: ${token('elevation.shadow.overlay', `0 4px 8px -2px ${N60A}, 0 0 1px ${N60A}`)};
     display: block;
     position: absolute;
     top: 0;
@@ -36,7 +37,7 @@ export const tablePopupStyles = css`
       content: '›';
       margin-left: 4px;
       line-height: 20px;
-      color: ${N90};
+      color: ${token('color.icon', N90)};
     }
   }
 `;

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

@@ -7,6 +7,7 @@ import { scrollbarStyles } from '../../../ui/styles';
 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 {
@@ -39,20 +40,21 @@ const sentinelStyles = `.${ClassName.TABLE_CONTAINER} {
       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: ${N20A};
-    color: ${N300};
+    background: ${token('color.background.neutral', N20A)};
+    color: ${token('color.icon', N300)};
     cursor: none;
   }
 
   .${ClassName.LAYOUT_BUTTON}:not(.${ClassName.IS_RESIZING}) button:hover {
-    background: ${B300};
-    color: white !important;
+    background: ${token('color.background.neutral.hovered', B300)};
+    color: ${token('color.icon', 'white')} !important;
     cursor: pointer;
   }
 
@@ -93,14 +95,13 @@ export const tableStyles = props => {
     /* Ends Delete button */
 
     /* sticky styles */
-    .${ClassName.TABLE_STICKY} .${ClassName.NUMBERED_COLUMN} .${ClassName.NUMBERED_COLUMN_BUTTON}:first-child {
+    .${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 white;
+      box-shadow: 0px -${stickyRowOffsetTop}px ${token('elevation.surface', 'white')};
       border-right: 0 none;
       /* top set by NumberColumn component */
     }
@@ -109,7 +110,7 @@ export const tableStyles = props => {
       position: fixed !important;
       /* needs to be above row controls */
       z-index: ${akEditorSmallZIndex} !important;
-      background: white;
+      background: ${token('elevation.surface', 'white')};
 
       width: ${tableToolbarSize}px;
       height: ${tableToolbarSize}px;
@@ -133,13 +134,14 @@ export const tableStyles = props => {
       position: fixed !important;
       z-index: ${akEditorStickyHeaderZIndex} !important;
       display: flex;
-      border-left: ${tableToolbarSize}px solid white;
+      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 green;
+      border-right: 1px solid ${token('elevation.surface', 'green')};
     }
 
     tr.sticky {
@@ -156,12 +158,12 @@ export const tableStyles = props => {
       grid-auto-flow: column;
 
       /* background for where controls apply */
-      background: white;
+      background: ${token('elevation.surface', 'white')};
       box-sizing: content-box;
 
       margin-top: 2px;
 
-      box-shadow: 0 6px 4px -4px ${N40A};
+      box-shadow: ${token('elevation.shadow.overflow', `0 6px 4px -4px ${N40A}`)};
       margin-left: -1px;
 
       &.no-pointer-events {
@@ -191,7 +193,7 @@ export const tableStyles = props => {
     }
 
     /* add left edge for first cell */
-    .${ClassName.TABLE_STICKY} tr.sticky > th:first-child {
+    .${ClassName.TABLE_STICKY} tr.sticky > th:first-of-type {
       margin-left: 0px;
     }
 
@@ -241,12 +243,13 @@ export const tableStyles = props => {
 
     .${ClassName.WITH_CONTROLS}.${ClassName.TABLE_STICKY}
       .${ClassName.NUMBERED_COLUMN}
-      .${ClassName.NUMBERED_COLUMN_BUTTON}:first-child {
+      .${ClassName.NUMBERED_COLUMN_BUTTON}:first-of-type {
       margin-top: ${tableControlsSpacing + 2}px;
     }
 
     .${ClassName.CORNER_CONTROLS}.sticky {
-      border-top: ${tableControlsSpacing - tableToolbarSize + 2}px solid white;
+      border-top: ${tableControlsSpacing - tableToolbarSize + 2}px solid
+        ${token('elevation.surface', 'white')};
     }
 
     ${(_props$featureFlags = props.featureFlags) !== null && _props$featureFlags !== void 0 && _props$featureFlags.stickyHeadersOptimization ? sentinelStyles : ''}
@@ -410,7 +413,7 @@ export const tableStyles = props => {
           right: 0;
           bottom: 0;
         }
-        .${ClassName.CONTROLS_BUTTON_OVERLAY}:first-child {
+        .${ClassName.CONTROLS_BUTTON_OVERLAY}:first-of-type {
           top: 0;
         }
       `)}
@@ -467,7 +470,7 @@ export const tableStyles = props => {
           background-color: ${tableToolbarSelectedColor};
           position: relative;
           z-index: ${akEditorUnitZIndex};
-          color: ${N0};
+          color: ${token('color.text.inverse', N0)};
         }
       }
     }
@@ -481,13 +484,13 @@ export const tableStyles = props => {
         background-color: ${tableToolbarSelectedColor};
         position: relative;
         z-index: ${akEditorUnitZIndex};
-        color: ${N0};
+        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: ${R500};
+        color: ${token('color.text.inverse', R500)};
         position: relative;
         z-index: ${akEditorUnitZIndex};
       }
@@ -509,12 +512,12 @@ export const tableStyles = props => {
        * cell when center/right aligned.
        */
       th.${ClassName.TABLE_HEADER_CELL} > .fabric-editor-block-mark {
-        > h1:first-child,
-        > h2:first-child,
-        > h3:first-child,
-        > h4:first-child,
-        > h5:first-child,
-        > h6:first-child {
+        > 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;
         }
       }
@@ -532,7 +535,6 @@ export const tableStyles = props => {
         right: 0;
         top: 0;
         bottom: 0;
-        opacity: 0.3;
         pointer-events: none;
       }
       .${ClassName.SELECTED_CELL} {

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

@@ -1,4 +1,4 @@
-import { B200, B300, B75, N0, N20, R50, R400, R75, DN400, N200, DN30 } from '@atlaskit/theme/colors';
+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';
@@ -7,30 +7,33 @@ 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: token('color.background.neutral', akEditorTableToolbar),
-  dark: token('color.background.neutral', akEditorTableToolbarDark)
+  light: akEditorTableToolbar,
+  dark: akEditorTableToolbarDark
 });
 export const tableTextColor = themed({
-  light: N200,
-  dark: DN400
+  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 = N20;
-export const tableCellSelectedColor = B75;
-export const tableToolbarSelectedColor = B200;
-export const tableBorderSelectedColor = B300;
-export const tableCellDeleteColor = R50;
-export const tableBorderDeleteColor = R400;
-export const tableToolbarDeleteColor = R75;
+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;

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

@@ -5,6 +5,7 @@ import { N40A, B300, N300, R300, N20A, N60A, N0, Y50, Y200 } from '@atlaskit/the
 import { tableToolbarColor, tableBorderColor, tableToolbarSelectedColor, tableBorderSelectedColor, tableCellDeleteColor, tableBorderDeleteColor, tableToolbarDeleteColor, lineMarkerOffsetFromColumnControls, lineMarkerSize, columnControlsDecorationHeight, columnControlsZIndex, columnControlsSelectedZIndex, resizeHandlerAreaWidth, resizeLineWidth, resizeHandlerZIndex, tableToolbarSize, tableInsertColumnButtonSize, tableDeleteButtonSize, tableControlsSpacing } from './consts';
 import { TableCssClassName as ClassName } from '../types';
 import { borderRadius } from '@atlaskit/theme/constants';
+import { token } from '@atlaskit/tokens';
 
 const InsertLine = cssString => css`
   .${ClassName.CONTROLS_INSERT_LINE} {
@@ -80,14 +81,14 @@ export const HeaderButton = (props, cssString) => css`
   }
 
   .active .${ClassName.CONTROLS_BUTTON} {
-    color: ${N0};
+    color: ${token('color.icon.inverse', N0)};
     background-color: ${tableToolbarSelectedColor};
     border-color: ${tableBorderSelectedColor};
   }
 `;
 export const HeaderButtonHover = () => css`
   .${ClassName.CONTROLS_BUTTON}:hover {
-    color: ${N0};
+    color: ${token('color.icon.inverse', N0)};
     background-color: ${tableToolbarSelectedColor};
     border-color: ${tableBorderSelectedColor};
     cursor: pointer;
@@ -115,9 +116,9 @@ const InsertButton = () => css`
   }
   .${ClassName.CONTROLS_INSERT_BUTTON} {
     ${Button(`
-      background: white;
-      box-shadow: 0 4px 8px -2px ${N60A}, 0 0 1px ${N60A};
-      color: ${N300};
+      background: ${token('elevation.surface.overlay', 'white')};
+      box-shadow: ${token('elevation.shadow.overlay', `0 4px 8px -2px ${N60A}, 0 0 1px ${N60A}`)};
+      color: ${token('color.icon', N300)};
     `)}
   }
   .${ClassName.CONTROLS_INSERT_LINE} {
@@ -130,8 +131,8 @@ const InsertButton = () => css`
 
 const InsertButtonHover = () => css`
   .${ClassName.CONTROLS_INSERT_BUTTON}:hover {
-    background: ${B300};
-    color: white;
+    background: ${token('color.background.brand.bold', B300)};
+    color: ${token('color.icon.inverse', 'white')};
     cursor: pointer;
   }
 `;
@@ -156,11 +157,11 @@ export const insertRowButtonWrapper = css`
 export const columnControlsLineMarker = props => css`
   .${ClassName.TABLE_CONTAINER}.${ClassName.WITH_CONTROLS}
     table
-    tr:first-child
+    tr:first-of-type
     td,
   .${ClassName.TABLE_CONTAINER}.${ClassName.WITH_CONTROLS}
     table
-    tr:first-child
+    tr:first-of-type
     th {
     position: relative;
 
@@ -181,18 +182,21 @@ export const DeleteButton = css`
   .${ClassName.CONTROLS_DELETE_BUTTON_WRAP} {
     .${ClassName.CONTROLS_DELETE_BUTTON} {
       ${Button(`
-        background: ${N20A};
-        color: ${N300};
+        background: ${token('color.background.neutral', N20A)};
+        color: ${token('color.icon', N300)};
       `)}
     }
   }
 
   .${ClassName.CONTROLS_DELETE_BUTTON}:hover {
-    background: ${R300};
-    color: white;
+    background: ${token('color.background.danger.bold', R300)};
+    color: ${token('color.icon.inverse', 'white')};
     cursor: pointer;
   }
-`;
+`; // TODO: https://product-fabric.atlassian.net/browse/DSP-4451
+
+/* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
+
 export const OverflowShadow = props => css`
   .${ClassName.TABLE_RIGHT_SHADOW}, .${ClassName.TABLE_LEFT_SHADOW} {
     display: block;
@@ -235,6 +239,7 @@ export const OverflowShadow = props => css`
     }
   }
 `;
+/* eslint-enable @atlaskit/design-system/ensure-design-token-usage */
 
 const columnHeaderButton = (props, cssString) => css`
   background: ${tableToolbarColor(props)};
@@ -251,7 +256,7 @@ const columnHeaderButton = (props, cssString) => css`
 `;
 
 const columnHeaderButtonSelected = css`
-  color: ${N0};
+  color: ${token('color.text.inverse', N0)};
   background-color: ${tableToolbarSelectedColor};
   border-color: ${tableBorderSelectedColor};
   z-index: ${columnControlsSelectedZIndex};
@@ -287,10 +292,10 @@ export const columnControlsDecoration = props => css`
   }
 
   table
-    tr:first-child
+    tr:first-of-type
     td.${ClassName.TABLE_CELL},
     table
-    tr:first-child
+    tr:first-of-type
     th.${ClassName.TABLE_HEADER_CELL} {
     &.${ClassName.COLUMN_SELECTED},
       &.${ClassName.HOVERED_COLUMN},
@@ -311,11 +316,11 @@ export const columnControlsDecoration = props => css`
 
   .${ClassName.TABLE_SELECTED}
     table
-    tr:first-child
+    tr:first-of-type
     td.${ClassName.TABLE_CELL},
     .${ClassName.TABLE_SELECTED}
     table
-    tr:first-child
+    tr:first-of-type
     th.${ClassName.TABLE_HEADER_CELL} {
     .${ClassName.COLUMN_CONTROLS_DECORATIONS}::after {
       ${columnHeaderButtonSelected};
@@ -347,8 +352,8 @@ export const hoveredWarningCell = css`
   :not(.${ClassName.IS_RESIZING})
     .${ClassName.TABLE_CONTAINER}:not(.${ClassName.HOVERED_DELETE_BUTTON}) {
     td.${ClassName.HOVERED_CELL_WARNING} {
-      background-color: ${Y50} !important; // We need to override the background-color added to the cell
-      border: 1px solid ${Y200};
+      background-color: ${token('color.background.warning', Y50)} !important; // We need to override the background-color added to the cell
+      border: 1px solid ${token('color.border.warning', Y200)};
     }
   }
 `;
@@ -379,11 +384,11 @@ export const resizeHandle = css`
     }
 
     table
-      tr:first-child
+      tr:first-of-type
       th.${ClassName.WITH_RESIZE_LINE}
       .${ClassName.RESIZE_HANDLE_DECORATION}::after,
       table
-      tr:first-child
+      tr:first-of-type
       td.${ClassName.WITH_RESIZE_LINE}
       .${ClassName.RESIZE_HANDLE_DECORATION}::after {
       top: -${tableToolbarSize + tableCellBorderWidth}px;