@atlaskit/editor-plugin-table/dist/es2019/ui/consts.js

Table plugin for the @atlaskit/editor

/* eslint-disable @atlaskit/editor/no-re-export */
// Entry file in package.json

import { tableCellBorderWidth, tableMarginTop } from '@atlaskit/editor-common/styles';
import { akEditorTableCellOnStickyHeaderZIndex, akEditorTableToolbarSize, akEditorUnitZIndex, akRichMediaResizeZIndex } from '@atlaskit/editor-shared-styles';
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 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, #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;
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 rowControlsZIndex = akEditorUnitZIndex * 10;
export const columnResizeHandleZIndex = columnControlsSelectedZIndex + 1;
export const insertLineWidth = 3;
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 contextualMenuDropdownWidthDnD = 250;
export const stickyRowZIndex = resizeHandlerZIndex + 2;
export const stickyRowOffsetTop = 8;
export const stickyHeaderBorderBottomWidth = 1;
export const tableOverflowShadowWidth = 8;
export const tableOverflowShadowWidthWide = 32;
export const tablePopupMenuFitHeight = 188;
export const tableColumnControlsHeight = 24;
export const nativeStickyHeaderZIndex = akEditorTableCellOnStickyHeaderZIndex - 5;
export const aboveNativeStickyHeaderZIndex = nativeStickyHeaderZIndex + 1;
export const belowNativeStickyHeaderZIndex = nativeStickyHeaderZIndex - 1;
export const dropTargetsZIndex = 14;
export const TABLE_SNAP_GAP = 9;
export const TABLE_HIGHLIGHT_GAP = 10;
export const TABLE_HIGHLIGHT_TOLERANCE = 2;
export const 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 const TABLE_GUIDELINE_VISIBLE_ADJUSTMENT = -68;
export const TABLE_DRAG_MENU_SORT_GROUP_HEIGHT = 92;
export const TABLE_DRAG_MENU_PADDING_TOP = 4;
export const TABLE_DRAG_MENU_MENU_GROUP_BEFORE_HEIGHT = 6;
export const dragMenuDropdownWidth = 250;
export const dragTableInsertColumnButtonSize = 16;
export const dropTargetExtendedWidth = 150;
export const dragRowControlsWidth = 14;
export const colorPalletteColumns = 7;
export const tableResizerWidth = 8;