@atlaskit/editor-plugin-table
Version:
Table plugin for the @atlaskit/editor
80 lines (76 loc) • 5.04 kB
JavaScript
/* eslint-disable @atlaskit/editor/no-re-export */
// Entry file in package.json
import { tableCellBorderWidth, tableMarginTop } from '@atlaskit/editor-common/styles';
import { akEditorTableBorder, akEditorTableBorderSelected, akEditorTableCellBlanketDeleted, akEditorTableCellBlanketSelected, 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 { RESIZE_HANDLE_AREA_DECORATION_GAP } from '../types';
/**
* Basic colors added to prevent content overflow in table cells.
*/
// TODO: DSP-4135 - Remove these tokens once the new elevation tokens are available
export var tableCellBackgroundColor = "var(--ds-surface, ".concat(N0, ")");
export var tableHeaderCellBackgroundColor = "var(--ds-background-accent-gray-subtlest, ".concat(akEditorTableHeaderCellBackground, ")");
export var tableToolbarColor = "var(--ds-background-neutral-subtle, ".concat(akEditorTableToolbar, ")");
export var tableTextColor = "var(--ds-text-subtlest, ".concat(N200, ")");
export var tableBorderColor = "var(--ds-background-accent-gray-subtler, ".concat(akEditorTableBorder, ")");
export var tableFloatingControlsColor = "var(--ds-background-neutral, ".concat(N20, ")");
// TODO: DSP-4461 - Remove these tokens once the new elevation tokens are available
export var tableCellSelectedColor = "var(--ds-blanket-selected, ".concat(akEditorTableCellBlanketSelected, ")");
export var tableToolbarSelectedColor = "var(--ds-background-selected-pressed, ".concat(B200, ")");
export var tableBorderSelectedColor = "var(--ds-border-focused, ".concat(akEditorTableBorderSelected, ")");
export var tableCellSelectedDeleteIconColor = "var(--ds-icon-subtle, ".concat(N300, ")");
export var tableCellSelectedDeleteIconBackground = "var(--ds-background-accent-gray-subtlest, ".concat(N20A, ")");
export var tableCellDeleteColor = "var(--ds-blanket-danger, ".concat(akEditorTableCellBlanketDeleted, ")");
export var tableBorderDeleteColor = "var(--ds-border-danger, ".concat(R400, ")");
export var tableToolbarDeleteColor = "var(--ds-background-danger-pressed, ".concat(R75, ")");
export var tableCellHoverDeleteIconColor = "var(--ds-icon-inverse, white)";
export var tableCellHoverDeleteIconBackground = "var(--ds-background-danger-bold, ".concat(R300, ")");
export var tableBorderRadiusSize = 3;
export var tablePadding = 8;
export var tableScrollbarOffset = 15;
export var tableMarginFullWidthMode = 2;
export var tableInsertColumnButtonSize = 20;
export var tableDeleteButtonSize = 16;
export var tableDeleteButtonOffset = 6;
export var tableToolbarSize = akEditorTableToolbarSize;
export var tableControlsSpacing = tableMarginTop + tablePadding - tableCellBorderWidth;
export var tableInsertColumnButtonOffset = 3;
export var layoutButtonSize = 32;
export var lineMarkerOffsetFromColumnControls = 13;
export var lineMarkerSize = 4;
export var columnControlsDecorationHeight = 25;
export var columnControlsZIndex = akEditorUnitZIndex * 10;
export var columnControlsSelectedZIndex = columnControlsZIndex + 1;
export var rowControlsZIndex = akEditorUnitZIndex * 10;
export var columnResizeHandleZIndex = columnControlsSelectedZIndex + 1;
export var insertLineWidth = 3;
export var resizeHandlerAreaWidth = RESIZE_HANDLE_AREA_DECORATION_GAP / 3;
export var resizeLineWidth = 2;
export var resizeHandlerZIndex = columnControlsZIndex + akRichMediaResizeZIndex;
export var contextualMenuTriggerSize = 16;
export var contextualMenuDropdownWidth = 180;
export var contextualMenuDropdownWidthDnD = 250;
export var stickyRowZIndex = resizeHandlerZIndex + 2;
export var stickyRowOffsetTop = 8;
export var stickyHeaderBorderBottomWidth = 1;
export var tableOverflowShadowWidth = 8;
export var tableOverflowShadowWidthWide = 32;
export var tablePopupMenuFitHeight = 188;
export var dropTargetsZIndex = 14;
export var TABLE_SNAP_GAP = 9;
export var TABLE_HIGHLIGHT_GAP = 10;
export var TABLE_HIGHLIGHT_TOLERANCE = 2;
export var STICKY_HEADER_TOGGLE_TOLERANCE_MS = 5;
// This adjustment value represents a pixel amount by which the container width needs to be adjusted when determining
// which guidelines are visible and most importantly CAN BE snapped too within the view. This value can be affected by
// table margins and padding. For example a guideline at 1800px and the view at 1860px wide, means the guidelines is visible
// BUT it cannot be snapped to during resize due to padding being applied to the resizer wrapper. This accommodates that difference.
export var TABLE_GUIDELINE_VISIBLE_ADJUSTMENT = -68;
export var TABLE_DRAG_MENU_SORT_GROUP_HEIGHT = 92;
export var TABLE_DRAG_MENU_PADDING_TOP = 4;
export var TABLE_DRAG_MENU_MENU_GROUP_BEFORE_HEIGHT = 6;
export var dragMenuDropdownWidth = 250;
export var dragTableInsertColumnButtonSize = 16;
export var dropTargetExtendedWidth = 150;
export var colorPalletteColumns = 7;
export var tableResizerWidth = 8;