@atlaskit/editor-plugin-table 18.1.4 → 18.1.6

package/dist/cjs/ui/ui-styles.js

@@ -9,7 +9,6 @@ var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/hel
 var _react = require("@emotion/react");
 var _styles = require("@atlaskit/editor-common/styles");
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
-var _colors = require("@atlaskit/theme/colors");
 var _types = require("../types");
 var _consts = require("./consts");
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject0, _templateObject1, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19, _templateObject20, _templateObject21, _templateObject22, _templateObject23;
@@ -41,28 +40,28 @@ var Button = function Button(cssString) {
 // Explicit pixel values required here to ensure classic row controls align correctly
 // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
 var HeaderButton = exports.HeaderButton = function HeaderButton(cssString) {
-  return (0, _react.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n\t.", " {\n\t\tbackground: ", ";\n\t\tborder: 1px solid ", ";\n\t\tdisplay: block;\n\t\tbox-sizing: border-box;\n\t\tpadding: 0;\n\n\t\t:focus {\n\t\t\toutline: none;\n\t\t}\n\t\t", "\n\t}\n\n\t.", "::after {\n\t\tcontent: ' ';\n\t\tbackground-color: transparent;\n\t\tleft: -15px;\n\t\ttop: 0;\n\t\tposition: absolute;\n\t\twidth: 15px;\n\t\theight: 100%;\n\t\tz-index: 1;\n\t}\n\n\t.active .", " {\n\t\tcolor: ", ";\n\t\tbackground-color: ", ";\n\t\tborder-color: ", ";\n\t}\n"])), _types.TableCssClassName.CONTROLS_BUTTON, _consts.tableHeaderCellBackgroundColor, _consts.tableBorderColor, cssString, _types.TableCssClassName.ROW_CONTROLS_BUTTON, _types.TableCssClassName.CONTROLS_BUTTON, "var(--ds-icon-inverse, ".concat(_colors.N0, ")"), _consts.tableToolbarSelectedColor, _consts.tableBorderSelectedColor);
+  return (0, _react.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n\t.", " {\n\t\tbackground: ", ";\n\t\tborder: 1px solid ", ";\n\t\tdisplay: block;\n\t\tbox-sizing: border-box;\n\t\tpadding: 0;\n\n\t\t:focus {\n\t\t\toutline: none;\n\t\t}\n\t\t", "\n\t}\n\n\t.", "::after {\n\t\tcontent: ' ';\n\t\tbackground-color: transparent;\n\t\tleft: -15px;\n\t\ttop: 0;\n\t\tposition: absolute;\n\t\twidth: 15px;\n\t\theight: 100%;\n\t\tz-index: 1;\n\t}\n\n\t.active .", " {\n\t\tcolor: ", ";\n\t\tbackground-color: ", ";\n\t\tborder-color: ", ";\n\t}\n"])), _types.TableCssClassName.CONTROLS_BUTTON, _consts.tableHeaderCellBackgroundColor, _consts.tableBorderColor, cssString, _types.TableCssClassName.ROW_CONTROLS_BUTTON, _types.TableCssClassName.CONTROLS_BUTTON, "var(--ds-icon-inverse, #FFFFFF)", _consts.tableToolbarSelectedColor, _consts.tableBorderSelectedColor);
 };
 var HeaderButtonHover = exports.HeaderButtonHover = function HeaderButtonHover() {
-  return (0, _react.css)(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n\t.", ":hover {\n\t\tcolor: ", ";\n\t\tbackground-color: ", ";\n\t\tborder-color: ", ";\n\t\tcursor: pointer;\n\t}\n"])), _types.TableCssClassName.CONTROLS_BUTTON, "var(--ds-icon-inverse, ".concat(_colors.N0, ")"), _consts.tableToolbarSelectedColor, _consts.tableBorderSelectedColor);
+  return (0, _react.css)(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n\t.", ":hover {\n\t\tcolor: ", ";\n\t\tbackground-color: ", ";\n\t\tborder-color: ", ";\n\t\tcursor: pointer;\n\t}\n"])), _types.TableCssClassName.CONTROLS_BUTTON, "var(--ds-icon-inverse, #FFFFFF)", _consts.tableToolbarSelectedColor, _consts.tableBorderSelectedColor);
 };
 var HeaderButtonDanger = exports.HeaderButtonDanger = function HeaderButtonDanger() {
   return (0, _react.css)(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n\t.", " .", " {\n\t\tbackground-color: ", ";\n\t\tborder-color: ", ";\n\t\tposition: relative;\n\t\tz-index: ", ";\n\t}\n"])), _types.TableCssClassName.HOVERED_CELL_IN_DANGER, _types.TableCssClassName.CONTROLS_BUTTON, _consts.tableToolbarDeleteColor, _consts.tableBorderDeleteColor, _editorSharedStyles.akEditorUnitZIndex);
 };
 var InsertButton = function InsertButton() {
-  return (0, _react.css)(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n\t.", " {\n\t\tposition: absolute;\n\t\tz-index: ", ";\n\t\tbottom: 0;\n\t}\n\t.", ", .", " {\n\t\theight: ", "px;\n\t\twidth: ", "px;\n\t}\n\t.", " {\n\t\t", "\n\t}\n\t.", " {\n\t\tdisplay: none;\n\t}\n\t&:hover .", " {\n\t\tdisplay: flex;\n\t}\n"])), _types.TableCssClassName.CONTROLS_INSERT_BUTTON_INNER, _editorSharedStyles.akEditorUnitZIndex + 10, _types.TableCssClassName.CONTROLS_INSERT_BUTTON_INNER, _types.TableCssClassName.CONTROLS_INSERT_BUTTON, _consts.tableInsertColumnButtonSize, _consts.tableInsertColumnButtonSize, _types.TableCssClassName.CONTROLS_INSERT_BUTTON, Button("\n      background: ".concat("var(--ds-surface-overlay, white)", ";\n      box-shadow: ", "var(--ds-shadow-overlay, ".concat("0 4px 8px -2px ".concat(_colors.N60A, ", 0 0 1px ").concat(_colors.N60A), ")"), ";\n      color: ", "var(--ds-icon, ".concat(_colors.N300, ")"), ";\n    ")), _types.TableCssClassName.CONTROLS_INSERT_LINE, _types.TableCssClassName.CONTROLS_INSERT_LINE);
+  return (0, _react.css)(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n\t.", " {\n\t\tposition: absolute;\n\t\tz-index: ", ";\n\t\tbottom: 0;\n\t}\n\t.", ", .", " {\n\t\theight: ", "px;\n\t\twidth: ", "px;\n\t}\n\t.", " {\n\t\t", "\n\t}\n\t.", " {\n\t\tdisplay: none;\n\t}\n\t&:hover .", " {\n\t\tdisplay: flex;\n\t}\n"])), _types.TableCssClassName.CONTROLS_INSERT_BUTTON_INNER, _editorSharedStyles.akEditorUnitZIndex + 10, _types.TableCssClassName.CONTROLS_INSERT_BUTTON_INNER, _types.TableCssClassName.CONTROLS_INSERT_BUTTON, _consts.tableInsertColumnButtonSize, _consts.tableInsertColumnButtonSize, _types.TableCssClassName.CONTROLS_INSERT_BUTTON, Button("\n      background: ".concat("var(--ds-surface-overlay, #FFFFFF)", ";\n      box-shadow: ", "var(--ds-shadow-overlay, 0px 8px 12px #1E1F2126, 0px 0px 1px #1E1F214f)", ";\n      color: ", "var(--ds-icon, #292A2E)", ";\n    ")), _types.TableCssClassName.CONTROLS_INSERT_LINE, _types.TableCssClassName.CONTROLS_INSERT_LINE);
 };
 var InsertButtonHover = function InsertButtonHover() {
-  return (0, _react.css)(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2.default)(["\n\t.", ":hover {\n\t\tbackground: ", ";\n\t\tcolor: ", ";\n\t\tcursor: pointer;\n\t}\n"])), _types.TableCssClassName.CONTROLS_INSERT_BUTTON, "var(--ds-background-brand-bold, ".concat(_colors.B300, ")"), "var(--ds-icon-inverse, white)");
+  return (0, _react.css)(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2.default)(["\n\t.", ":hover {\n\t\tbackground: ", ";\n\t\tcolor: ", ";\n\t\tcursor: pointer;\n\t}\n"])), _types.TableCssClassName.CONTROLS_INSERT_BUTTON, "var(--ds-background-brand-bold, #1868DB)", "var(--ds-icon-inverse, #FFFFFF)");
 };
 var dragInsertButtonWrapper = exports.dragInsertButtonWrapper = function dragInsertButtonWrapper() {
-  return (0, _react.css)(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2.default)(["\n\t.", " {\n\t\tposition: absolute;\n\t\tz-index: ", ";\n\t}\n\n\t.", " {\n\t\tbottom: -3px;\n\t\tleft: 2px;\n\t}\n\n\t.", " {\n\t\tleft: -3px;\n\t\tbottom: -2px;\n\t}\n\t.", " {\n\t\tleft: 6px;\n\t\tbottom: -2px;\n\t}\n\n\t.", " {\n\t\t", "\n\t}\n\n\t.", ":hover {\n\t\tbackground: ", ";\n\t\tborder: 1px solid ", ";\n\t\tcolor: ", ";\n\t\tcursor: pointer;\n\t}\n"])), _types.TableCssClassName.DRAG_CONTROLS_INSERT_BUTTON_INNER, _editorSharedStyles.akEditorUnitZIndex + 10, _types.TableCssClassName.DRAG_CONTROLS_INSERT_BUTTON_INNER_COLUMN, _types.TableCssClassName.DRAG_CONTROLS_INSERT_BUTTON_INNER_ROW, _types.TableCssClassName.DRAG_CONTROLS_INSERT_BUTTON_INNER_ROW_CHROMELESS, _types.TableCssClassName.DRAG_CONTROLS_INSERT_BUTTON, Button("\n    background: ".concat("var(--ds-surface-overlay, white)", ";\n    color: ", "var(--ds-icon, ".concat(_colors.N300, ")"), ";\n    border: 1px solid ", "var(--ds-background-accent-gray-subtler, #C1C7D0)", ";\n    border-radius: 50%;\n    height: ", _consts.dragTableInsertColumnButtonSize, "px;\n    width: ").concat(_consts.dragTableInsertColumnButtonSize, "px;\n  ")), _types.TableCssClassName.DRAG_CONTROLS_INSERT_BUTTON, "var(--ds-background-brand-bold, ".concat(_colors.B300, ")"), "var(--ds-background-brand-bold, ".concat(_colors.B300, ")"), "var(--ds-icon-inverse, white)");
+  return (0, _react.css)(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2.default)(["\n\t.", " {\n\t\tposition: absolute;\n\t\tz-index: ", ";\n\t}\n\n\t.", " {\n\t\tbottom: -3px;\n\t\tleft: 2px;\n\t}\n\n\t.", " {\n\t\tleft: -3px;\n\t\tbottom: -2px;\n\t}\n\t.", " {\n\t\tleft: 6px;\n\t\tbottom: -2px;\n\t}\n\n\t.", " {\n\t\t", "\n\t}\n\n\t.", ":hover {\n\t\tbackground: ", ";\n\t\tborder: 1px solid ", ";\n\t\tcolor: ", ";\n\t\tcursor: pointer;\n\t}\n"])), _types.TableCssClassName.DRAG_CONTROLS_INSERT_BUTTON_INNER, _editorSharedStyles.akEditorUnitZIndex + 10, _types.TableCssClassName.DRAG_CONTROLS_INSERT_BUTTON_INNER_COLUMN, _types.TableCssClassName.DRAG_CONTROLS_INSERT_BUTTON_INNER_ROW, _types.TableCssClassName.DRAG_CONTROLS_INSERT_BUTTON_INNER_ROW_CHROMELESS, _types.TableCssClassName.DRAG_CONTROLS_INSERT_BUTTON, Button("\n    background: ".concat("var(--ds-surface-overlay, #FFFFFF)", ";\n    color: ", "var(--ds-icon, #292A2E)", ";\n    border: 1px solid ", "var(--ds-background-accent-gray-subtler, #DDDEE1)", ";\n    border-radius: 50%;\n    height: ", _consts.dragTableInsertColumnButtonSize, "px;\n    width: ").concat(_consts.dragTableInsertColumnButtonSize, "px;\n  ")), _types.TableCssClassName.DRAG_CONTROLS_INSERT_BUTTON, "var(--ds-background-brand-bold, #1868DB)", "var(--ds-background-brand-bold, #1868DB)", "var(--ds-icon-inverse, #FFFFFF)");
 };
 
 // Explicit pixel values required here to ensure corner button aligns correctly
 // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
 var dragCornerControlButton = exports.dragCornerControlButton = function dragCornerControlButton() {
-  return (0, _react.css)(_templateObject0 || (_templateObject0 = (0, _taggedTemplateLiteral2.default)(["\n\t.", " {\n\t\twidth: 15px;\n\t\theight: 15px;\n\t\tdisplay: flex;\n\t\tjustify-content: center;\n\t\talign-items: center;\n\t\tposition: absolute;\n\t\ttop: -17px;\n\t\tleft: -5px;\n\t\tbackground-color: transparent;\n\t\tborder: none;\n\t\tpadding: 0;\n\t\toutline: none;\n\t\tz-index: ", ";\n\n\t\t&.active .", " {\n\t\t\tbackground-color: ", ";\n\t\t\twidth: 10px;\n\t\t\theight: 10px;\n\t\t\tborder-width: 2px;\n\t\t\tborder-radius: 4px;\n\n\t\t\ttop: 3px;\n\t\t\tleft: 2px;\n\t\t}\n\n\t\t&:hover {\n\t\t\tcursor: pointer;\n\n\t\t\t.", " {\n\t\t\t\twidth: 10px;\n\t\t\t\theight: 10px;\n\t\t\t\tborder-radius: 4px;\n\t\t\t\ttop: 3px;\n\t\t\t\tleft: 2px;\n\t\t\t}\n\t\t}\n\t}\n\n\t.", " {\n\t\tborder: 1px solid ", ";\n\t\tbackground-color: ", ";\n\t\tborder-radius: 2px;\n\t\twidth: 5px;\n\t\theight: 5px;\n\t\tposition: relative;\n\t}\n"])), _types.TableCssClassName.DRAG_CORNER_BUTTON, _editorSharedStyles.akEditorUnitZIndex * 99, _types.TableCssClassName.DRAG_CORNER_BUTTON_INNER, "var(--ds-border-selected, #0C66E4)", _types.TableCssClassName.DRAG_CORNER_BUTTON_INNER, _types.TableCssClassName.DRAG_CORNER_BUTTON_INNER, "var(--ds-border-inverse, #FFF)", "var(--ds-background-accent-gray-subtler, #DCDFE4)");
+  return (0, _react.css)(_templateObject0 || (_templateObject0 = (0, _taggedTemplateLiteral2.default)(["\n\t.", " {\n\t\twidth: 15px;\n\t\theight: 15px;\n\t\tdisplay: flex;\n\t\tjustify-content: center;\n\t\talign-items: center;\n\t\tposition: absolute;\n\t\ttop: -17px;\n\t\tleft: -5px;\n\t\tbackground-color: transparent;\n\t\tborder: none;\n\t\tpadding: 0;\n\t\toutline: none;\n\t\tz-index: ", ";\n\n\t\t&.active .", " {\n\t\t\tbackground-color: ", ";\n\t\t\twidth: 10px;\n\t\t\theight: 10px;\n\t\t\tborder-width: 2px;\n\t\t\tborder-radius: 4px;\n\n\t\t\ttop: 3px;\n\t\t\tleft: 2px;\n\t\t}\n\n\t\t&:hover {\n\t\t\tcursor: pointer;\n\n\t\t\t.", " {\n\t\t\t\twidth: 10px;\n\t\t\t\theight: 10px;\n\t\t\t\tborder-radius: 4px;\n\t\t\t\ttop: 3px;\n\t\t\t\tleft: 2px;\n\t\t\t}\n\t\t}\n\t}\n\n\t.", " {\n\t\tborder: 1px solid ", ";\n\t\tbackground-color: ", ";\n\t\tborder-radius: 2px;\n\t\twidth: 5px;\n\t\theight: 5px;\n\t\tposition: relative;\n\t}\n"])), _types.TableCssClassName.DRAG_CORNER_BUTTON, _editorSharedStyles.akEditorUnitZIndex * 99, _types.TableCssClassName.DRAG_CORNER_BUTTON_INNER, "var(--ds-border-selected, #1868DB)", _types.TableCssClassName.DRAG_CORNER_BUTTON_INNER, _types.TableCssClassName.DRAG_CORNER_BUTTON_INNER, "var(--ds-border-inverse, #FFFFFF)", "var(--ds-background-accent-gray-subtler, #DDDEE1)");
 };
 var insertColumnButtonWrapper = exports.insertColumnButtonWrapper = function insertColumnButtonWrapper() {
   return (0, _react.css)(
@@ -89,7 +88,7 @@ var DeleteButton = exports.DeleteButton = function DeleteButton() {
   return (0, _react.css)(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2.default)(["\n\t.", ", .", " {\n\t\theight: ", "px;\n\t\twidth: ", "px;\n\t}\n\t.", " {\n\t\t.", " {\n\t\t\t", "\n\t\t}\n\t}\n\n\t.", ":hover {\n\t\tbackground: ", ";\n\t\tcolor: ", ";\n\t\tcursor: pointer;\n\t}\n"])), _types.TableCssClassName.CONTROLS_DELETE_BUTTON_WRAP, _types.TableCssClassName.CONTROLS_DELETE_BUTTON, _consts.tableDeleteButtonSize, _consts.tableDeleteButtonSize, _types.TableCssClassName.CONTROLS_DELETE_BUTTON_WRAP, _types.TableCssClassName.CONTROLS_DELETE_BUTTON, Button("\n        background: ".concat(_consts.tableCellSelectedDeleteIconBackground, ";\n        color: ").concat(_consts.tableCellSelectedDeleteIconColor, ";\n      ")), _types.TableCssClassName.CONTROLS_DELETE_BUTTON, _consts.tableCellHoverDeleteIconBackground, _consts.tableCellHoverDeleteIconColor);
 };
 var OverflowShadow = exports.OverflowShadow = function OverflowShadow(isDragAndDropEnabled) {
-  return (0, _react.css)(_templateObject11 || (_templateObject11 = (0, _taggedTemplateLiteral2.default)(["\n\t.", ", .", " {\n\t\tdisplay: block;\n\t\theight: calc(100% - ", "px);\n\t\tposition: absolute;\n\t\tpointer-events: none;\n\t\ttop: ", "px;\n\t\tz-index: ", ";\n\t\twidth: ", "px;\n\t}\n\t.", " {\n\t\tbackground:\n\t\t\tlinear-gradient(\n\t\t\t\tto left,\n\t\t\t\ttransparent 0,\n\t\t\t\t", " 140%\n\t\t\t),\n\t\t\tlinear-gradient(\n\t\t\t\tto right,\n\t\t\t\t", " 0px,\n\t\t\t\ttransparent 1px\n\t\t\t);\n\t\tleft: 0px;\n\t}\n\t.", "[data-number-column='true'] > :not(.", ").", " {\n\t\tleft: ", "px;\n\t}\n\t.", " {\n\t\tbackground:\n\t\t\tlinear-gradient(\n\t\t\t\tto right,\n\t\t\t\ttransparent 0,\n\t\t\t\t", " 140%\n\t\t\t),\n\t\t\tlinear-gradient(\n\t\t\t\tto left,\n\t\t\t\t", " 0px,\n\t\t\t\ttransparent 1px\n\t\t\t);\n\t\tleft: calc(100% - ", "px);\n\t}\n\t.", " {\n\t\t", "\n\t\t.", " {\n\t\t\tborder-left: 1px solid ", ";\n\t\t}\n\t}\n"])), _types.TableCssClassName.TABLE_RIGHT_SHADOW, _types.TableCssClassName.TABLE_LEFT_SHADOW, _styles.tableMarginTop, _styles.tableMarginTop, _editorSharedStyles.akEditorShadowZIndex, _consts.tableOverflowShadowWidthWide, _types.TableCssClassName.TABLE_LEFT_SHADOW, "var(--ds-shadow-overflow-spread, ".concat(_colors.N40A, ")"), "var(--ds-shadow-overflow-perimeter, transparent)", _types.TableCssClassName.TABLE_CONTAINER, _types.TableCssClassName.TABLE_STICKY_SHADOW, _types.TableCssClassName.TABLE_LEFT_SHADOW, _editorSharedStyles.akEditorTableNumberColumnWidth - 1, _types.TableCssClassName.TABLE_RIGHT_SHADOW, "var(--ds-shadow-overflow-spread, ".concat(_colors.N40A, ")"), "var(--ds-shadow-overflow-perimeter, transparent)", _consts.tableOverflowShadowWidthWide, _types.TableCssClassName.WITH_CONTROLS, overflowShadowWidhoutDnD(isDragAndDropEnabled), _types.TableCssClassName.TABLE_LEFT_SHADOW, _consts.tableBorderColor);
+  return (0, _react.css)(_templateObject11 || (_templateObject11 = (0, _taggedTemplateLiteral2.default)(["\n\t.", ", .", " {\n\t\tdisplay: block;\n\t\theight: calc(100% - ", "px);\n\t\tposition: absolute;\n\t\tpointer-events: none;\n\t\ttop: ", "px;\n\t\tz-index: ", ";\n\t\twidth: ", "px;\n\t}\n\t.", " {\n\t\tbackground:\n\t\t\tlinear-gradient(to left, transparent 0, ", " 140%),\n\t\t\tlinear-gradient(\n\t\t\t\tto right,\n\t\t\t\t", " 0px,\n\t\t\t\ttransparent 1px\n\t\t\t);\n\t\tleft: 0px;\n\t}\n\t.", "[data-number-column='true'] > :not(.", ").", " {\n\t\tleft: ", "px;\n\t}\n\t.", " {\n\t\tbackground:\n\t\t\tlinear-gradient(to right, transparent 0, ", " 140%),\n\t\t\tlinear-gradient(to left, ", " 0px, transparent 1px);\n\t\tleft: calc(100% - ", "px);\n\t}\n\t.", " {\n\t\t", "\n\t\t.", " {\n\t\t\tborder-left: 1px solid ", ";\n\t\t}\n\t}\n"])), _types.TableCssClassName.TABLE_RIGHT_SHADOW, _types.TableCssClassName.TABLE_LEFT_SHADOW, _styles.tableMarginTop, _styles.tableMarginTop, _editorSharedStyles.akEditorShadowZIndex, _consts.tableOverflowShadowWidthWide, _types.TableCssClassName.TABLE_LEFT_SHADOW, "var(--ds-shadow-overflow-spread, #1E1F2129)", "var(--ds-shadow-overflow-perimeter, #1E1F211f)", _types.TableCssClassName.TABLE_CONTAINER, _types.TableCssClassName.TABLE_STICKY_SHADOW, _types.TableCssClassName.TABLE_LEFT_SHADOW, _editorSharedStyles.akEditorTableNumberColumnWidth - 1, _types.TableCssClassName.TABLE_RIGHT_SHADOW, "var(--ds-shadow-overflow-spread, #1E1F2129)", "var(--ds-shadow-overflow-perimeter, #1E1F211f)", _consts.tableOverflowShadowWidthWide, _types.TableCssClassName.WITH_CONTROLS, overflowShadowWidhoutDnD(isDragAndDropEnabled), _types.TableCssClassName.TABLE_LEFT_SHADOW, _consts.tableBorderColor);
 };
 var overflowShadowWidhoutDnD = function overflowShadowWidhoutDnD(isDragAndDropEnabled) {
   if (!isDragAndDropEnabled) {
@@ -116,7 +115,7 @@ var columnHeaderButton = function columnHeaderButton(cssString) {
 };
 var columnHeaderButtonSelected = function columnHeaderButtonSelected() {
   return (0, _react.css)({
-    color: "var(--ds-text-inverse, ".concat(_colors.N0, ")"),
+    color: "var(--ds-text-inverse, #FFFFFF)",
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
     backgroundColor: _consts.tableToolbarSelectedColor,
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
@@ -145,7 +144,7 @@ var hoveredCell = exports.hoveredCell = function hoveredCell() {
 };
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
-var hoveredWarningCell = exports.hoveredWarningCell = (0, _react.css)(_templateObject20 || (_templateObject20 = (0, _taggedTemplateLiteral2.default)(["\n\t:not(.", ")\n\t\t.", ":not(.", ") {\n\t\ttd.", " {\n\t\t\tbackground-color: ", " !important; /* We need to override the background-color added to the cell */\n\t\t\tborder: 1px solid ", ";\n\t\t}\n\t}\n"])), _types.TableCssClassName.IS_RESIZING, _types.TableCssClassName.TABLE_CONTAINER, _types.TableCssClassName.HOVERED_DELETE_BUTTON, _types.TableCssClassName.HOVERED_CELL_WARNING, "var(--ds-background-warning, ".concat(_colors.Y50, ")"), "var(--ds-border-warning, ".concat(_colors.Y200, ")"));
+var hoveredWarningCell = exports.hoveredWarningCell = (0, _react.css)(_templateObject20 || (_templateObject20 = (0, _taggedTemplateLiteral2.default)(["\n\t:not(.", ")\n\t\t.", ":not(.", ") {\n\t\ttd.", " {\n\t\t\tbackground-color: ", " !important; /* We need to override the background-color added to the cell */\n\t\t\tborder: 1px solid ", ";\n\t\t}\n\t}\n"])), _types.TableCssClassName.IS_RESIZING, _types.TableCssClassName.TABLE_CONTAINER, _types.TableCssClassName.HOVERED_DELETE_BUTTON, _types.TableCssClassName.HOVERED_CELL_WARNING, "var(--ds-background-warning, #FFF5DB)", "var(--ds-border-warning, #E06C00)");
 
 // Explicit pixel values required here to ensure correct positioning and sizes of column resize handle
 // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
@@ -184,7 +183,7 @@ var insertLineActiveColor = (0, _react.css)({
 });
 var insertLineInactiveColor = (0, _react.css)({
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
-  backgroundColor: "var(--ds-background-accent-gray-subtler, ".concat(_editorSharedStyles.akEditorTableBorder, ")")
+  backgroundColor: "var(--ds-background-accent-gray-subtler, #DDDEE1)"
 });
 
 // Explicit pixel values required here to ensure correct positioning of line that is show on row

package/dist/es2019/nodeviews/TableComponent.js

@@ -712,7 +712,7 @@ class TableComponent extends React.Component {
     this.dispatchTableRefUpdate();
   }
   dispatchTableRefUpdate() {
-    if (this.table && this.table !== this.lastSetTableRef && this.props.view && expValEquals('platform_editor_fix_editor_unhandled_type_errors', 'isEnabled', true) && (expValEquals('platform_editor_table_update_table_ref', 'isEnabled', true) || fg('platform_editor_enable_table_update_ref_atlas'))) {
+    if (this.table && this.table !== this.lastSetTableRef && (!expValEquals('platform_editor_table_ref_optimisation', 'isEnabled', true) || this.props.tableActive) && this.props.view && expValEquals('platform_editor_fix_editor_unhandled_type_errors', 'isEnabled', true) && (expValEquals('platform_editor_table_update_table_ref', 'isEnabled', true) || fg('platform_editor_enable_table_update_ref_atlas'))) {
       this.lastSetTableRef = this.table;
       setTableRef(this.table)(this.props.view.state, this.props.view.dispatch);
     }
@@ -897,7 +897,7 @@ class TableComponent extends React.Component {
 
             // // Update tableRef in plugin state when table is properly mounted
             // // At this point, both table and wrapper are in DOM with correct parent-child relationship
-            if (this.table && this.props.view && !expValEquals('platform_editor_fix_editor_unhandled_type_errors', 'isEnabled', true) && (expValEquals('platform_editor_table_update_table_ref', 'isEnabled', true) || fg('platform_editor_enable_table_update_ref_atlas'))) {
+            if (this.table && (!expValEquals('platform_editor_table_ref_optimisation', 'isEnabled', true) || this.props.tableActive) && this.props.view && !expValEquals('platform_editor_fix_editor_unhandled_type_errors', 'isEnabled', true) && (expValEquals('platform_editor_table_update_table_ref', 'isEnabled', true) || fg('platform_editor_enable_table_update_ref_atlas'))) {
               setTableRef(this.table)(this.props.view.state, this.props.view.dispatch);
             }
           }

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

@@ -1,12 +1,11 @@
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css } from '@emotion/react';
-import { N0, N20, N30A, N700 } from '@atlaskit/theme/colors';
 import { contextualMenuTriggerSize } from '../consts';
 export const tableFloatingCellButtonStyles = () => css({
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
   '> div': {
     // Sits behind button to provide surface-color background
-    background: `var(--ds-surface, ${N20})`,
+    background: "var(--ds-surface, #FFFFFF)",
     borderRadius: "var(--ds-radius-small, 3px)",
     display: 'flex',
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
@@ -16,10 +15,10 @@ export const tableFloatingCellButtonStyles = () => css({
   },
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
   '&& button': {
-    background: "var(--ds-background-neutral, none)",
+    background: "var(--ds-background-neutral, #0515240F)",
     flexDirection: 'column',
     margin: "var(--ds-space-025, 2px)",
-    outline: `2px solid ${`var(--ds-surface, ${N0})`}`,
+    outline: `2px solid ${"var(--ds-surface, #FFFFFF)"}`,
     borderRadius: '1px',
     padding: 0,
     height: 'calc(100% - 4px)',
@@ -27,11 +26,11 @@ export const tableFloatingCellButtonStyles = () => css({
   },
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
   '&& button:hover': {
-    background: `var(--ds-background-neutral-hovered, ${N30A})`
+    background: "var(--ds-background-neutral-hovered, #0B120E24)"
   },
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
   '&& button:active': {
-    background: "var(--ds-background-neutral-pressed, rgba(179, 212, 255, 0.6))"
+    background: "var(--ds-background-neutral-pressed, #080F214A)"
   },
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
   '&& button > span': {
@@ -45,14 +44,14 @@ export const tableFloatingCellButtonStyles = () => css({
 export const tableFloatingCellButtonSelectedStyles = () => css({
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
   '&& button': {
-    background: `var(--ds-background-selected, ${N700})`
+    background: "var(--ds-background-selected, #E9F2FE)"
   },
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
   '&& button:hover': {
-    background: `var(--ds-background-selected-hovered, ${N700})`
+    background: "var(--ds-background-selected-hovered, #CFE1FD)"
   },
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
   '&& button:active': {
-    background: `var(--ds-background-selected-pressed, ${N700})`
+    background: "var(--ds-background-selected-pressed, #8FB8F6)"
   }
 });

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

@@ -1,7 +1,6 @@
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 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, contextualMenuDropdownWidthDnD } from '../consts';
 export const cellColourPreviewStyles = selectedColor => css({
@@ -15,8 +14,8 @@ export const tablePopupStyles = (isDragAndDropEnabled
 ) => css`
 	.${ClassName.CONTEXTUAL_SUBMENU} {
 		border-radius: ${"var(--ds-radius-small, 3px)"};
-		background: ${"var(--ds-surface-overlay, white)"};
-		box-shadow: ${`var(--ds-shadow-overlay, ${`0 4px 8px -2px ${N60A}, 0 0 1px ${N60A}`})`};
+		background: ${"var(--ds-surface-overlay, #FFFFFF)"};
+		box-shadow: ${"var(--ds-shadow-overlay, 0px 8px 12px #1E1F2126, 0px 0px 1px #1E1F214f)"};
 		display: block;
 		position: absolute;
 		top: 0;
@@ -44,7 +43,7 @@ export const tablePopupStyles = (isDragAndDropEnabled
 			content: '›';
 			margin-left: ${"var(--ds-space-050, 4px)"};
 			line-height: 20px;
-			color: ${`var(--ds-icon, ${N90})`};
+			color: ${"var(--ds-icon, #292A2E)"};
 		}
 	}
 
@@ -64,7 +63,7 @@ export const tablePopupStyles = (isDragAndDropEnabled
 			content: '›';
 			margin-left: ${"var(--ds-space-050, 4px)"};
 			line-height: 14px;
-			color: ${`var(--ds-icon, ${N90})`};
+			color: ${"var(--ds-icon, #292A2E)"};
 		}
 	}
 `;

package/dist/es2019/ui/FloatingDragMenu/styles.js

@@ -1,7 +1,6 @@
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 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 { dragMenuDropdownWidth, TABLE_DRAG_MENU_MENU_GROUP_BEFORE_HEIGHT, TABLE_DRAG_MENU_PADDING_TOP, TABLE_DRAG_MENU_SORT_GROUP_HEIGHT } from '../consts';
 export const cellColourPreviewStyles = selectedColor => css({
@@ -15,8 +14,8 @@ export const cellColourPreviewStyles = selectedColor => css({
 export const dragMenuBackgroundColorStyles = () => css`
 	.${ClassName.DRAG_SUBMENU} {
 		border-radius: ${"var(--ds-radius-small, 3px)"};
-		background: ${"var(--ds-surface-overlay, white)"};
-		box-shadow: ${`var(--ds-shadow-overlay, ${`0 4px 8px -2px ${N60A}, 0 0 1px ${N60A}`})`};
+		background: ${"var(--ds-surface-overlay, #FFFFFF)"};
+		box-shadow: ${"var(--ds-shadow-overlay, 0px 8px 12px #1E1F2126, 0px 0px 1px #1E1F214f)"};
 		display: block;
 		position: absolute;
 		top: ${TABLE_DRAG_MENU_PADDING_TOP + TABLE_DRAG_MENU_SORT_GROUP_HEIGHT + TABLE_DRAG_MENU_MENU_GROUP_BEFORE_HEIGHT}px; /* move the submenu down when 'sort increasing/decreasing' appear before background color picker */
@@ -44,7 +43,7 @@ export const dragMenuBackgroundColorStyles = () => css`
 			content: '›';
 			margin-left: ${"var(--ds-space-050, 4px)"};
 			line-height: 14px;
-			color: ${`var(--ds-icon, ${N90})`};
+			color: ${"var(--ds-icon, #292A2E)"};
 		}
 	}
 `;

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

@@ -12,7 +12,6 @@ import { akEditorSelectedNodeClassName, akEditorSmallZIndex, akEditorStickyHeade
 import { scrollbarStyles } from '@atlaskit/editor-shared-styles/scrollbar';
 import { hideNativeBrowserTextSelectionStyles } from '@atlaskit/editor-shared-styles/selection';
 import { fg } from '@atlaskit/platform-feature-flags';
-import { N0, N40A, R500 } from '@atlaskit/theme/colors';
 import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { SORTING_ICON_CLASS_NAME } from '../pm-plugins/view-mode-sort/consts';
@@ -36,7 +35,7 @@ const numberedColumnButtonSelectedStyles = `
 	background-color: ${tableToolbarSelectedColor};
 	position: relative;
 	z-index: ${akEditorUnitZIndex};
-	color: ${`var(--ds-text-selected, ${N0})`};
+	color: ${"var(--ds-text-selected, #1868DB)"};
 `;
 const rangeSelectionStyles = `
 .${ClassName.NODEVIEW_WRAPPER}.${akEditorSelectedNodeClassName} table tbody tr {
@@ -284,7 +283,7 @@ const baseTableStylesWithoutSharedStyle = props => {
 
 		position: fixed !important;
 		z-index: ${akEditorStickyHeaderZIndex} !important;
-		box-shadow: 0px -${stickyRowOffsetTop}px ${"var(--ds-surface, white)"};
+		box-shadow: 0px -${stickyRowOffsetTop}px ${"var(--ds-surface, #FFFFFF)"};
 		border-right: 0 none;
 		/* top set by NumberColumn component */
 	}
@@ -293,7 +292,7 @@ const baseTableStylesWithoutSharedStyle = props => {
 		position: fixed !important;
 		/* needs to be above row controls */
 		z-index: ${akEditorSmallZIndex} !important;
-		background: ${"var(--ds-surface, white)"};
+		background: ${"var(--ds-surface, #FFFFFF)"};
 
 		width: ${tableToolbarSize}px;
 		height: ${tableToolbarSize}px;
@@ -317,13 +316,13 @@ const baseTableStylesWithoutSharedStyle = props => {
 		position: fixed !important;
 		z-index: ${akEditorStickyHeaderZIndex} !important;
 		display: flex;
-		border-left: ${tableToolbarSize}px solid ${"var(--ds-surface, white)"};
+		border-left: ${tableToolbarSize}px solid ${"var(--ds-surface, #FFFFFF)"};
 		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 ${"var(--ds-surface, green)"};
+		border-right: 1px solid ${"var(--ds-surface, #FFFFFF)"};
 	}
 
 	tr.sticky {
@@ -340,9 +339,9 @@ const baseTableStylesWithoutSharedStyle = props => {
 		grid-auto-flow: column;
 
 		/* background for where controls apply */
-		background: ${"var(--ds-surface, white)"};
+		background: ${"var(--ds-surface, #FFFFFF)"};
 		box-sizing: content-box;
-		box-shadow: 0 6px 4px -4px ${`var(--ds-shadow-overflow-perimeter, ${N40A})`};
+		box-shadow: 0 6px 4px -4px ${"var(--ds-shadow-overflow-perimeter, #1E1F211f)"};
 
 		margin-left: -1px;
 
@@ -544,8 +543,7 @@ const baseTableStylesWithoutSharedStyle = props => {
 	}
 
 	.${ClassName.CORNER_CONTROLS}.sticky {
-		border-top: ${tableControlsSpacing - tableToolbarSize}px solid
-			${"var(--ds-surface, white)"};
+		border-top: ${tableControlsSpacing - tableToolbarSize}px solid ${"var(--ds-surface, #FFFFFF)"};
 	}
 
 	${sentinelStyles}
@@ -757,7 +755,7 @@ const baseTableStylesWithoutSharedStyle = props => {
 			position: absolute;
 			bottom: -3px;
 			left: 2px;
-			background-color: ${"var(--ds-background-accent-gray-subtler, #C1C7D0)"};
+			background-color: ${"var(--ds-background-accent-gray-subtler, #DDDEE1)"};
 			height: 4px;
 			width: 4px;
 			border-radius: 50%;
@@ -780,7 +778,7 @@ const baseTableStylesWithoutSharedStyle = props => {
 		}
 
 		.${ClassName.DRAG_COLUMN_FLOATING_INSERT_DOT} {
-			background-color: ${"var(--ds-background-accent-gray-subtler, #C1C7D0)"};
+			background-color: ${"var(--ds-background-accent-gray-subtler, #DDDEE1)"};
 			height: 4px;
 			width: 4px;
 			border-radius: 50%;
@@ -813,7 +811,7 @@ const baseTableStylesWithoutSharedStyle = props => {
 		padding: 0;
 		border-radius: 6px;
 		width: max-content;
-		border: 2px solid ${`var(--ds-surface, ${N0})`};
+		border: 2px solid ${"var(--ds-surface, #FFFFFF)"};
 
 		display: flex;
 		justify-content: center;
@@ -830,13 +828,13 @@ const baseTableStylesWithoutSharedStyle = props => {
 			cursor: pointer;
 			& svg {
 				& > rect.${ClassName.DRAG_HANDLE_MINIMISED} {
-					fill: ${"var(--ds-background-accent-gray-subtler, #DCDFE4)"};
+					fill: ${"var(--ds-background-accent-gray-subtler, #DDDEE1)"};
 				}
 				& > rect {
-					fill: ${"var(--ds-background-accent-gray-subtlest, #F4F5F7)"};
+					fill: ${"var(--ds-background-accent-gray-subtlest, #F0F1F2)"};
 				}
 				& > g > rect {
-					fill: ${"var(--ds-icon-disabled, #BFDBF847)"};
+					fill: ${"var(--ds-icon-disabled, #080F214A)"};
 				}
 			}
 		}
@@ -844,20 +842,20 @@ const baseTableStylesWithoutSharedStyle = props => {
 		&:not(.${ClassName.DRAG_HANDLE_DISABLED}) {
 			& svg {
 				rect {
-					fill: ${"var(--ds-background-accent-gray-subtler, #DCDFE4)"};
+					fill: ${"var(--ds-background-accent-gray-subtler, #DDDEE1)"};
 				}
 				g {
-					fill: ${"var(--ds-icon-subtle, #626f86)"};
+					fill: ${"var(--ds-icon-subtle, #505258)"};
 				}
 			}
 
 			&:hover {
 				svg {
 					rect {
-						fill: ${"var(--ds-background-accent-blue-subtle, #579DFF)"};
+						fill: ${"var(--ds-background-accent-blue-subtle, #669DF1)"};
 					}
 					g {
-						fill: ${"var(--ds-icon-inverse, #FFF)"};
+						fill: ${"var(--ds-icon-inverse, #FFFFFF)"};
 					}
 				}
 			}
@@ -868,7 +866,7 @@ const baseTableStylesWithoutSharedStyle = props => {
 
 			&.selected {
 				:focus {
-					outline: 2px solid ${"var(--ds-border-focused, #2684FF)"};
+					outline: 2px solid ${"var(--ds-border-focused, #4688EC)"};
 					outline-offset: 1px;
 				}
 
@@ -878,10 +876,10 @@ const baseTableStylesWithoutSharedStyle = props => {
 
 				svg {
 					rect {
-						fill: ${"var(--ds-background-accent-blue-subtle, #579dff)"};
+						fill: ${"var(--ds-background-accent-blue-subtle, #669DF1)"};
 					}
 					g {
-						fill: ${"var(--ds-icon-inverse, #fff)"};
+						fill: ${"var(--ds-icon-inverse, #FFFFFF)"};
 					}
 				}
 			}
@@ -889,10 +887,10 @@ const baseTableStylesWithoutSharedStyle = props => {
 			&.danger {
 				svg {
 					rect {
-						fill: ${"var(--ds-background-accent-red-subtler-pressed, #F87462)"};
+						fill: ${"var(--ds-background-accent-red-subtler-pressed, #FD9891)"};
 					}
 					g {
-						fill: ${"var(--ds-border-inverse, #FFF)"};
+						fill: ${"var(--ds-border-inverse, #FFFFFF)"};
 					}
 				}
 			}
@@ -947,7 +945,7 @@ const baseTableStylesWithoutSharedStyle = props => {
 			display: block;
 			height: 33px;
 			width: 100%;
-			background-color: ${"var(--ds-surface, white)"};
+			background-color: ${"var(--ds-surface, #FFFFFF)"};
 			position: absolute;
 
 			/* the extra pixel is accounting for borders */
@@ -1001,7 +999,7 @@ const baseTableStylesWithoutSharedStyle = props => {
 			background-color: ${tableToolbarDeleteColor};
 			border: 1px solid ${tableBorderDeleteColor};
 			border-left: 0;
-			color: ${`var(--ds-text-danger, ${R500})`};
+			color: ${"var(--ds-text-danger, #AE2E24)"};
 			position: relative;
 			z-index: ${akEditorUnitZIndex};
 		}
@@ -1013,7 +1011,7 @@ const baseTableStylesWithoutSharedStyle = props => {
 				background-color: ${tableToolbarDeleteColor};
 				border: 1px solid ${tableBorderDeleteColor};
 				border-left: 0;
-				color: ${`var(--ds-text-danger, ${R500})`};
+				color: ${"var(--ds-text-danger, #AE2E24)"};
 				position: relative;
 				z-index: ${akEditorUnitZIndex};
 			}

package/dist/es2019/ui/consts.js

@@ -2,8 +2,7 @@
 // Entry file in package.json
 
 import { tableCellBorderWidth, tableMarginTop } from '@atlaskit/editor-common/styles';
-import { akEditorTableBorder, akEditorTableBorderSelected, akEditorTableCellBlanketDeleted, akEditorTableCellBlanketSelected, akEditorTableCellOnStickyHeaderZIndex, akEditorTableHeaderCellBackground, akEditorTableToolbar, akEditorTableToolbarSize, akEditorUnitZIndex, akRichMediaResizeZIndex } from '@atlaskit/editor-shared-styles';
-import { B200, N0, N20, N200, N20A, N300, R300, R400, R75 } from '@atlaskit/theme/colors';
+import { akEditorTableCellOnStickyHeaderZIndex, akEditorTableToolbarSize, akEditorUnitZIndex, akRichMediaResizeZIndex } from '@atlaskit/editor-shared-styles';
 import { RESIZE_HANDLE_AREA_DECORATION_GAP } from '../types';
 
 /**
@@ -11,25 +10,25 @@ import { RESIZE_HANDLE_AREA_DECORATION_GAP } from '../types';
  */
 
 // TODO: DSP-4135 - Remove these tokens once the new elevation tokens are available
-export const tableCellBackgroundColor = `var(--ds-surface, ${N0})`;
-export const tableHeaderCellBackgroundColor = `var(--ds-background-accent-gray-subtlest, ${akEditorTableHeaderCellBackground})`;
-export const tableToolbarColor = `var(--ds-background-neutral-subtle, ${akEditorTableToolbar})`;
-export const tableTextColor = `var(--ds-text-subtlest, ${N200})`;
-export const tableBorderColor = `var(--ds-background-accent-gray-subtler, ${akEditorTableBorder})`;
-export const tableFloatingControlsColor = `var(--ds-background-neutral, ${N20})`;
+export const tableCellBackgroundColor = "var(--ds-surface, #FFFFFF)";
+export const tableHeaderCellBackgroundColor = "var(--ds-background-accent-gray-subtlest, #F0F1F2)";
+export const tableToolbarColor = "var(--ds-background-neutral-subtle, #00000000)";
+export const tableTextColor = "var(--ds-text-subtlest, #6B6E76)";
+export const tableBorderColor = "var(--ds-background-accent-gray-subtler, #DDDEE1)";
+export const tableFloatingControlsColor = "var(--ds-background-neutral, #0515240F)";
 
 // TODO: DSP-4461 - Remove these tokens once the new elevation tokens are available
-export const tableCellSelectedColor = `var(--ds-blanket-selected, ${akEditorTableCellBlanketSelected})`;
-export const tableHeaderCellSelectedColor = `var(--ds-background-selected-pressed, ${B200})`;
-export const tableToolbarSelectedColor = `var(--ds-background-selected-pressed, ${B200})`;
-export const tableBorderSelectedColor = `var(--ds-border-focused, ${akEditorTableBorderSelected})`;
-export const tableCellSelectedDeleteIconColor = `var(--ds-icon-subtle, ${N300})`;
-export const tableCellSelectedDeleteIconBackground = `var(--ds-background-accent-gray-subtlest, ${N20A})`;
-export const tableCellDeleteColor = `var(--ds-blanket-danger, ${akEditorTableCellBlanketDeleted})`;
-export const tableBorderDeleteColor = `var(--ds-border-danger, ${R400})`;
-export const tableToolbarDeleteColor = `var(--ds-background-danger-pressed, ${R75})`;
-export const tableCellHoverDeleteIconColor = "var(--ds-icon-inverse, white)";
-export const tableCellHoverDeleteIconBackground = `var(--ds-background-danger-bold, ${R300})`;
+export const tableCellSelectedColor = "var(--ds-blanket-selected, #388BFF14)";
+export const tableHeaderCellSelectedColor = "var(--ds-background-selected-pressed, #8FB8F6)";
+export const tableToolbarSelectedColor = "var(--ds-background-selected-pressed, #8FB8F6)";
+export const tableBorderSelectedColor = "var(--ds-border-focused, #4688EC)";
+export const tableCellSelectedDeleteIconColor = "var(--ds-icon-subtle, #505258)";
+export const tableCellSelectedDeleteIconBackground = "var(--ds-background-accent-gray-subtlest, #F0F1F2)";
+export const tableCellDeleteColor = "var(--ds-blanket-danger, #EF5C4814)";
+export const tableBorderDeleteColor = "var(--ds-border-danger, #E2483D)";
+export const tableToolbarDeleteColor = "var(--ds-background-danger-pressed, #FFB8B2)";
+export const tableCellHoverDeleteIconColor = "var(--ds-icon-inverse, #FFFFFF)";
+export const tableCellHoverDeleteIconBackground = "var(--ds-background-danger-bold, #C9372C)";
 export const tableBorderRadiusSize = 3;
 export const tablePadding = 8;
 export const tableScrollbarOffset = 15;

package/dist/es2019/ui/icons/DragInMotionIcon.js

@@ -16,7 +16,7 @@ export const DragInMotionIcon = ({
   width: "26",
   height: "18",
   rx: "5",
-  fill: "var(--ds-background-accent-blue-subtle, #579DFF)"
+  fill: "var(--ds-background-accent-blue-subtle, #669DF1)"
 }), /*#__PURE__*/React.createElement("rect", {
   x: "9",
   y: "6",