@atlaskit/editor-plugin-table 2.5.0 → 2.5.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (29) hide show
  1. package/CHANGELOG.md +6 -0
  2. package/dist/cjs/plugins/table/ui/FloatingContextualButton/styles.js +1 -1
  3. package/dist/cjs/plugins/table/ui/common-styles.js +1 -1
  4. package/dist/cjs/plugins/table/ui/consts.js +45 -7
  5. package/dist/cjs/plugins/table/ui/ui-styles.js +29 -15
  6. package/dist/cjs/version.json +1 -1
  7. package/dist/es2019/plugins/table/ui/FloatingContextualButton/styles.js +1 -1
  8. package/dist/es2019/plugins/table/ui/common-styles.js +27 -27
  9. package/dist/es2019/plugins/table/ui/consts.js +42 -8
  10. package/dist/es2019/plugins/table/ui/ui-styles.js +38 -38
  11. package/dist/es2019/version.json +1 -1
  12. package/dist/esm/plugins/table/ui/FloatingContextualButton/styles.js +1 -1
  13. package/dist/esm/plugins/table/ui/common-styles.js +1 -1
  14. package/dist/esm/plugins/table/ui/consts.js +42 -8
  15. package/dist/esm/plugins/table/ui/ui-styles.js +31 -17
  16. package/dist/esm/version.json +1 -1
  17. package/dist/types/plugins/table/ui/consts.d.ts +10 -6
  18. package/dist/types/plugins/table/ui/ui-styles.d.ts +8 -8
  19. package/dist/types-ts4.5/plugins/table/ui/consts.d.ts +10 -6
  20. package/dist/types-ts4.5/plugins/table/ui/ui-styles.d.ts +8 -8
  21. package/package.json +2 -2
  22. package/src/__tests__/unit/pm-plugins/main.ts +11 -0
  23. package/src/__tests__/unit/ui/FloatingContextualButton.tsx +11 -0
  24. package/src/__tests__/unit/ui/FloatingInsertButton.tsx +11 -0
  25. package/src/plugins/table/ui/FloatingContextualButton/styles.ts +1 -1
  26. package/src/plugins/table/ui/common-styles.ts +27 -42
  27. package/src/plugins/table/ui/consts.ts +46 -19
  28. package/src/plugins/table/ui/ui-styles.ts +49 -64
  29. package/tmp/api-report-tmp.d.ts +108 -0
package/dist/es2019/plugins/table/ui/ui-styles.js CHANGED
@@ -1,13 +1,13 @@
1
1
  import { css } from '@emotion/react';
2
2
  import { tableCellBorderWidth, tableMarginTop, tableMarginTopWithControl } from '@atlaskit/editor-common/styles';
3
3
  import { akEditorShadowZIndex, akEditorTableNumberColumnWidth, akEditorUnitZIndex } from '@atlaskit/editor-shared-styles';
4
- import { B300, N0, N20A, N300, N40A, N60A, R300, Y200, Y50 } from '@atlaskit/theme/colors';
4
+ import { B300, N0, N300, N40A, N60A, Y200, Y50 } from '@atlaskit/theme/colors';
5
5
  import { borderRadius } from '@atlaskit/theme/constants';
6
6
  import { TableCssClassName as ClassName } from '../types';
7
- import { columnControlsDecorationHeight, columnControlsSelectedZIndex, columnControlsZIndex, lineMarkerSize, resizeHandlerAreaWidth, resizeHandlerZIndex, resizeLineWidth, tableBorderColor, tableBorderDeleteColor, tableBorderSelectedColor, tableCellDeleteColor, tableDeleteButtonSize, tableHeaderCellBackgroundColor, tableInsertColumnButtonSize, tableToolbarDeleteColor, tableToolbarSelectedColor, tableToolbarSize } from './consts';
8
- const InsertLine = cssString => css`
7
+ import { columnControlsDecorationHeight, columnControlsSelectedZIndex, columnControlsZIndex, lineMarkerSize, resizeHandlerAreaWidth, resizeHandlerZIndex, resizeLineWidth, tableBorderColor, tableBorderDeleteColor, tableBorderSelectedColor, tableCellDeleteColor, tableCellHoverDeleteIconBackground, tableCellHoverDeleteIconColor, tableCellSelectedDeleteIconBackground, tableCellSelectedDeleteIconColor, tableDeleteButtonSize, tableHeaderCellBackgroundColor, tableInsertColumnButtonSize, tableToolbarDeleteColor, tableToolbarSelectedColor, tableToolbarSize } from './consts';
8
+ const InsertLine = (props, cssString) => css`
9
9
  .${ClassName.CONTROLS_INSERT_LINE} {
10
- background: ${tableBorderSelectedColor};
10
+ background: ${tableBorderSelectedColor(props)};
11
11
  display: none;
12
12
  position: absolute;
13
13
  z-index: ${akEditorUnitZIndex};
@@ -76,22 +76,22 @@ export const HeaderButton = (props, cssString) => css`
76
76
 
77
77
  .active .${ClassName.CONTROLS_BUTTON} {
78
78
  color: ${`var(--ds-icon-inverse, ${N0})`};
79
- background-color: ${`var(--ds-background-selected, ${tableToolbarSelectedColor})`};
80
- border-color: ${tableBorderSelectedColor};
79
+ background-color: ${tableToolbarSelectedColor(props)};
80
+ border-color: ${tableBorderSelectedColor(props)};
81
81
  }
82
82
  `;
83
- export const HeaderButtonHover = () => css`
83
+ export const HeaderButtonHover = props => css`
84
84
  .${ClassName.CONTROLS_BUTTON}:hover {
85
85
  color: ${`var(--ds-icon-inverse, ${N0})`};
86
- background-color: ${`var(--ds-background-selected, ${tableToolbarSelectedColor})`};
87
- border-color: ${tableBorderSelectedColor};
86
+ background-color: ${tableToolbarSelectedColor(props)};
87
+ border-color: ${tableBorderSelectedColor(props)};
88
88
  cursor: pointer;
89
89
  }
90
90
  `;
91
- export const HeaderButtonDanger = () => css`
91
+ export const HeaderButtonDanger = props => css`
92
92
  .${ClassName.HOVERED_CELL_IN_DANGER} .${ClassName.CONTROLS_BUTTON} {
93
- background-color: ${`var(--ds-background-danger, ${tableToolbarDeleteColor})`};
94
- border-color: ${tableBorderDeleteColor};
93
+ background-color: ${tableToolbarDeleteColor(props)};
94
+ border-color: ${tableBorderDeleteColor(props)};
95
95
  position: relative;
96
96
  z-index: ${akEditorUnitZIndex};
97
97
  }
@@ -128,18 +128,18 @@ const InsertButtonHover = () => css`
128
128
  cursor: pointer;
129
129
  }
130
130
  `;
131
- export const insertColumnButtonWrapper = css`
131
+ export const insertColumnButtonWrapper = props => css`
132
132
  ${InsertButton()}
133
133
  ${InsertButtonHover()}
134
- ${InsertLine(`
134
+ ${InsertLine(props, `
135
135
  width: 2px;
136
136
  left: 9px;
137
137
  `)}
138
138
  `;
139
- export const insertRowButtonWrapper = css`
139
+ export const insertRowButtonWrapper = props => css`
140
140
  ${InsertButton()}
141
141
  ${InsertButtonHover()}
142
- ${InsertLine(`
142
+ ${InsertLine(props, `
143
143
  height: 2px;
144
144
  top: -11px;
145
145
  left: ${tableInsertColumnButtonSize - 1}px;
@@ -157,7 +157,7 @@ export const columnControlsLineMarker = () => css`
157
157
  position: relative;
158
158
  }
159
159
  `;
160
- export const DeleteButton = css`
160
+ export const DeleteButton = props => css`
161
161
  .${ClassName.CONTROLS_DELETE_BUTTON_WRAP},
162
162
  .${ClassName.CONTROLS_DELETE_BUTTON} {
163
163
  height: ${tableDeleteButtonSize}px;
@@ -166,15 +166,15 @@ export const DeleteButton = css`
166
166
  .${ClassName.CONTROLS_DELETE_BUTTON_WRAP} {
167
167
  .${ClassName.CONTROLS_DELETE_BUTTON} {
168
168
  ${Button(`
169
- background: ${`var(--ds-background-neutral, ${N20A})`};
170
- color: ${`var(--ds-icon, ${N300})`};
169
+ background: ${tableCellSelectedDeleteIconBackground(props)};
170
+ color: ${tableCellSelectedDeleteIconColor(props)};
171
171
  `)}
172
172
  }
173
173
  }
174
174
 
175
175
  .${ClassName.CONTROLS_DELETE_BUTTON}:hover {
176
- background: ${`var(--ds-background-danger-bold, ${R300})`};
177
- color: ${"var(--ds-icon-inverse, white)"};
176
+ background: ${tableCellHoverDeleteIconBackground(props)};
177
+ color: ${tableCellHoverDeleteIconColor(props)};
178
178
  cursor: pointer;
179
179
  }
180
180
  `;
@@ -243,10 +243,10 @@ const columnHeaderButton = (props, cssString) => css`
243
243
 
244
244
  ${cssString}
245
245
  `;
246
- const columnHeaderButtonSelected = css`
246
+ const columnHeaderButtonSelected = props => css`
247
247
  color: ${`var(--ds-text-inverse, ${N0})`};
248
- background-color: ${`var(--ds-background-selected, ${tableToolbarSelectedColor})`};
249
- border-color: ${tableBorderSelectedColor};
248
+ background-color: ${tableToolbarSelectedColor(props)};
249
+ border-color: ${tableBorderSelectedColor(props)};
250
250
  z-index: ${columnControlsSelectedZIndex};
251
251
  `;
252
252
  export const columnControlsDecoration = props => css`
@@ -314,13 +314,13 @@ export const columnControlsDecoration = props => css`
314
314
  &.${ClassName.HOVERED_COLUMN},
315
315
  &.${ClassName.HOVERED_TABLE} {
316
316
  .${ClassName.COLUMN_CONTROLS_DECORATIONS}::after {
317
- ${columnHeaderButtonSelected};
317
+ ${columnHeaderButtonSelected(props)};
318
318
  }
319
319
 
320
320
  &.${ClassName.HOVERED_CELL_IN_DANGER}
321
321
  .${ClassName.COLUMN_CONTROLS_DECORATIONS}::after {
322
- background-color: ${`var(--ds-background-danger, ${tableToolbarDeleteColor})`};
323
- border: 1px solid ${tableBorderDeleteColor};
322
+ background-color: ${tableToolbarDeleteColor(props)};
323
+ border: 1px solid ${tableBorderDeleteColor(props)};
324
324
  border-bottom: none;
325
325
  z-index: ${akEditorUnitZIndex * 100};
326
326
  }
@@ -336,28 +336,28 @@ export const columnControlsDecoration = props => css`
336
336
  tr:first-of-type
337
337
  th.${ClassName.TABLE_HEADER_CELL} {
338
338
  .${ClassName.COLUMN_CONTROLS_DECORATIONS}::after {
339
- ${columnHeaderButtonSelected};
339
+ ${columnHeaderButtonSelected(props)};
340
340
  }
341
341
  }
342
342
  `;
343
- export const hoveredDeleteButton = css`
343
+ export const hoveredDeleteButton = props => css`
344
344
  .${ClassName.TABLE_CONTAINER}.${ClassName.HOVERED_DELETE_BUTTON} {
345
345
  .${ClassName.SELECTED_CELL},
346
346
  .${ClassName.COLUMN_SELECTED},
347
347
  .${ClassName.HOVERED_CELL} {
348
- border: 1px solid ${tableBorderDeleteColor};
348
+ border: 1px solid ${tableBorderDeleteColor(props)};
349
349
  }
350
350
  .${ClassName.SELECTED_CELL}::after {
351
- background: ${tableCellDeleteColor};
351
+ background: ${tableCellDeleteColor(props)};
352
352
  }
353
353
  }
354
354
  `;
355
- export const hoveredCell = css`
355
+ export const hoveredCell = props => css`
356
356
  :not(.${ClassName.IS_RESIZING})
357
357
  .${ClassName.TABLE_CONTAINER}:not(.${ClassName.HOVERED_DELETE_BUTTON}) {
358
358
  .${ClassName.HOVERED_CELL} {
359
359
  position: relative;
360
- border: 1px solid ${tableBorderSelectedColor};
360
+ border: 1px solid ${tableBorderSelectedColor(props)};
361
361
  }
362
362
  }
363
363
  `;
@@ -370,7 +370,7 @@ export const hoveredWarningCell = css`
370
370
  }
371
371
  }
372
372
  `;
373
- export const resizeHandle = css`
373
+ export const resizeHandle = props => css`
374
374
  .${ClassName.TABLE_CONTAINER} {
375
375
  .${ClassName.RESIZE_HANDLE_DECORATION} {
376
376
  background-color: transparent;
@@ -390,7 +390,7 @@ export const resizeHandle = css`
390
390
  top: -1px;
391
391
  width: ${resizeLineWidth}px;
392
392
  height: calc(100% + 2px);
393
- background-color: ${tableBorderSelectedColor};
393
+ background-color: ${tableBorderSelectedColor(props)};
394
394
  z-index: ${columnControlsZIndex * 2};
395
395
  }
396
396
 
@@ -400,7 +400,7 @@ export const resizeHandle = css`
400
400
  position: absolute;
401
401
  width: ${resizeLineWidth}px;
402
402
  height: calc(100% + ${tableToolbarSize + tableCellBorderWidth}px);
403
- background-color: ${tableBorderSelectedColor};
403
+ background-color: ${tableBorderSelectedColor(props)};
404
404
  z-index: ${columnControlsZIndex * 2};
405
405
  top: -${tableToolbarSize + tableCellBorderWidth}px;
406
406
  }
@@ -412,7 +412,7 @@ export const resizeHandle = css`
412
412
  top: -1px;
413
413
  width: ${resizeLineWidth}px;
414
414
  height: calc(100% + 2px);
415
- background-color: ${tableBorderSelectedColor};
415
+ background-color: ${tableBorderSelectedColor(props)};
416
416
  z-index: ${columnControlsZIndex * 2};
417
417
  }
418
418
 
@@ -422,7 +422,7 @@ export const resizeHandle = css`
422
422
  position: absolute;
423
423
  width: ${resizeLineWidth}px;
424
424
  height: calc(100% + ${tableToolbarSize + tableCellBorderWidth}px);
425
- background-color: ${tableBorderSelectedColor};
425
+ background-color: ${tableBorderSelectedColor(props)};
426
426
  z-index: ${columnControlsZIndex * 2};
427
427
  top: -${tableToolbarSize + tableCellBorderWidth}px;
428
428
  }
package/dist/es2019/version.json CHANGED
@@ -1,5 +1,5 @@
1
1
  {
2
2
  "name": "@atlaskit/editor-plugin-table",
3
- "version": "2.5.0",
3
+ "version": "2.5.1",
4
4
  "sideEffects": false
5
5
  }
package/dist/esm/plugins/table/ui/FloatingContextualButton/styles.js CHANGED
@@ -9,7 +9,7 @@ export var tableFloatingCellButtonStyles = function tableFloatingCellButtonStyle
9
9
  return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n > div {\n // Sits behind button to provide surface-color background\n background: ", ";\n border-radius: ", "px;\n display: flex;\n height: ", "px;\n flex-direction: column;\n }\n && button {\n background: ", ";\n flex-direction: column;\n margin: 2px;\n outline: 2px solid ", ";\n border-radius: 1px;\n padding: 0;\n height: calc(100% - 4px);\n display: flex;\n }\n && button:hover {\n background: ", ";\n }\n && button:active {\n background: ", ";\n }\n && button > span {\n margin: 0px -4px;\n }\n && span {\n pointer-events: none;\n }\n"])), "var(--ds-surface, ".concat(N20, ")"), borderRadius(), contextualMenuTriggerSize + 2, themed({
10
10
  light: "var(--ds-background-neutral, none)",
11
11
  dark: "var(--ds-background-neutral, none)"
12
- })(props), "var(--ds-border, ".concat(N0, ")"), themed({
12
+ })(props), "var(--ds-surface, ".concat(N0, ")"), themed({
13
13
  light: "var(--ds-background-neutral-hovered, ".concat(N30A, ")"),
14
14
  dark: "var(--ds-background-neutral-hovered, ".concat(DN60, ")")
15
15
  })(props), themed({
package/dist/esm/plugins/table/ui/common-styles.js CHANGED
@@ -33,7 +33,7 @@ var breakoutWidthStyling = function breakoutWidthStyling(useFragmentMarkBreakout
33
33
  // TODO: https://product-fabric.atlassian.net/browse/DSP-4139
34
34
  export var tableStyles = function tableStyles(props) {
35
35
  var _props$featureFlags, _props$featureFlags$u, _props$featureFlags2, _props$featureFlags3;
36
- return css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n .", " button {\n background: ", ";\n color: ", ";\n cursor: none;\n }\n\n .", ":not(.", ") button:hover {\n background: ", ";\n color: ", " !important;\n cursor: pointer;\n }\n\n .ProseMirror {\n ", ";\n ", ";\n ", ";\n ", ";\n ", ";\n ", ";\n ", ";\n\n .", " {\n margin-bottom: 0;\n }\n\n .", " {\n td.", ", th.", " {\n position: relative;\n overflow: visible;\n }\n\n td.", " {\n background-color: ", ";\n\n // ED-15246: Trello card is visible through a border of a table border\n // This fixes a border issue caused by relative positioned table cells\n &::after {\n height: 100%;\n content: '';\n border-left: 1px solid ", ";\n border-bottom: 1px solid ", ";\n position: absolute;\n right: 0px;\n top: 0px;\n bottom: 0;\n width: 100%;\n display: inline-block;\n pointer-events: none;\n }\n }\n }\n\n .", " {\n ", "\n }\n\n .", " {\n ", "\n }\n\n /* Delete button */\n ", "\n /* Ends Delete button */\n\n /* sticky styles */\n .", " .", " .", ":first-of-type {\n margin-top: ", "px;\n width: ", "px;\n\n position: fixed !important;\n z-index: ", " !important;\n box-shadow: 0px -", "px ", ";\n border-right: 0 none;\n /* top set by NumberColumn component */\n }\n\n .", " .", ".sticky {\n position: fixed !important;\n /* needs to be above row controls */\n z-index: ", " !important;\n background: ", ";\n\n width: ", "px;\n height: ", "px;\n }\n\n .", ".sticky .", " {\n border-bottom: 0px none;\n border-right: 0px none;\n\n height: ", "px;\n width: ", "px;\n }\n\n .", " .", " {\n z-index: 0;\n }\n\n .", "\n .", "\n .", ".sticky {\n position: fixed !important;\n z-index: ", " !important;\n display: flex;\n border-left: ", "px solid\n ", ";\n margin-left: -", "px;\n }\n\n .", " col:first-of-type {\n /* moving rows out of a table layout does weird things in Chrome */\n border-right: 1px solid ", ";\n }\n\n tr.sticky {\n padding-top: ", "px;\n position: fixed;\n display: grid;\n\n /* to keep it above cell selection */\n z-index: ", ";\n\n overflow-y: visible;\n overflow-x: hidden;\n\n grid-auto-flow: column;\n\n /* background for where controls apply */\n background: ", ";\n box-sizing: content-box;\n\n margin-top: 2px;\n\n box-shadow: 0 6px 4px -4px ", ";\n margin-left: -1px;\n\n &.no-pointer-events {\n pointer-events: none;\n }\n }\n\n .", " .", " {\n left: unset;\n position: fixed;\n z-index: ", ";\n }\n\n .", ".", "\n .", " {\n padding-bottom: ", "px;\n }\n\n tr.sticky th {\n border-bottom: ", "px solid\n ", ";\n margin-right: -1px;\n }\n\n .", " tr.sticky > th:last-child {\n border-right-width: 1px;\n }\n\n /* add left edge for first cell */\n .", " tr.sticky > th:first-of-type {\n margin-left: 0px;\n }\n\n /* add a little bit so the scroll lines up with the table */\n .", " tr.sticky::after {\n content: ' ';\n width: ", "px;\n }\n\n /* To fix jumpiness caused in Chrome Browsers for sticky headers */\n .", " .sticky + tr {\n min-height: 0px;\n }\n\n /* move resize line a little in sticky bar */\n .", ".", " {\n tr.sticky\n td.", ",\n tr.sticky\n th.", " {\n .", "::after {\n right: ", "px;\n }\n }\n\n /* when selected put it back to normal -- :not selector would be nicer */\n tr.sticky\n td.", ".", ",\n tr.sticky\n th.", ".", " {\n .", "::after {\n right: ", "px;\n }\n }\n }\n\n tr.sticky\n .", ",\n tr.sticky\n .", " {\n z-index: 1;\n }\n\n .", " tr.sticky {\n padding-top: ", "px;\n }\n\n .", ".", "\n .", "\n .", ":first-of-type {\n margin-top: ", "px;\n }\n\n .", ".sticky {\n border-top: ", "px solid\n ", ";\n }\n\n ", "\n ", "\n\n .", " .", " {\n height: 0; // stop overflow flash & set correct height in update-overflow-shadows.ts\n }\n\n .less-padding {\n padding: 0 ", "px;\n\n .", " {\n padding: 0 ", "px;\n\n // https://product-fabric.atlassian.net/browse/ED-16386\n // Fixes issue where the extra padding that is added here throws off the position\n // of the rows control dot\n &::after {\n right: 6px !important;\n }\n }\n\n &.", "[data-number-column='true'] {\n padding-left: ", "px;\n }\n\n .", " {\n left: 6px;\n }\n\n .", " {\n left: calc(100% - 6px);\n }\n }\n\n > .", " {\n /**\n * Prevent margins collapsing, aids with placing the gap-cursor correctly\n * @see https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing\n *\n * TODO: Enable this, many tests will fail!\n * border-top: 1px solid transparent;\n */\n }\n\n /* Breakout only works on top level unless wrapped in fragment mark */\n ", "\n\n ", ";\n\n /* Corner controls */\n .", " {\n width: ", "px;\n height: ", "px;\n display: none;\n\n .", " {\n position: relative;\n\n ", ";\n }\n }\n\n .", ".sticky {\n .", " {\n /* sticky row insert dot overlaps other row insert and messes things up */\n display: none !important;\n }\n }\n\n .", " {\n position: absolute;\n top: 0;\n width: ", "px;\n height: ", "px;\n border: 1px solid ", ";\n border-radius: 0;\n border-top-left-radius: ", "px;\n background: ", ";\n box-sizing: border-box;\n padding: 0;\n :focus {\n outline: none;\n }\n }\n .active .", " {\n border-color: ", ";\n background: ", ";\n }\n\n .", "[data-number-column='true'] {\n .", ", .", " {\n width: ", "px;\n }\n .", " .", " {\n border-right-width: 0;\n }\n }\n\n :not(.", ") .", ":hover {\n border-color: ", ";\n background: ", ";\n cursor: pointer;\n }\n\n :not(.", ")\n .", ".", " {\n border-color: ", ";\n background: ", ";\n }\n\n /* Row controls */\n .", " {\n width: ", "px;\n box-sizing: border-box;\n display: none;\n position: relative;\n\n ", ";\n\n .", " {\n display: flex;\n flex-direction: column;\n }\n .", ":last-child > button {\n border-bottom-left-radius: ", "px;\n }\n .", " {\n position: relative;\n margin-top: -1px;\n }\n .", ":hover,\n .", ".active,\n .", ":hover {\n z-index: ", ";\n }\n\n ", "\n }\n\n :not(.", ") .", " {\n ", "\n ", "\n }\n\n /* Numbered column */\n .", " {\n position: relative;\n float: right;\n margin-left: ", "px;\n top: ", "px;\n width: ", "px;\n box-sizing: border-box;\n }\n\n .", " {\n border: 1px solid ", ";\n box-sizing: border-box;\n margin-top: -1px;\n padding-bottom: 2px;\n padding: 10px 2px;\n text-align: center;\n font-size: ", ";\n background-color: ", ";\n color: ", ";\n border-color: ", ";\n\n :first-child:not(style),\n style:first-child + * {\n margin-top: 0;\n }\n :last-child {\n border-bottom: 1px solid ", ";\n }\n }\n\n .", " {\n .", ", .", " {\n display: block;\n }\n .", " {\n padding-left: 1px;\n .", " {\n border-left: 0 none;\n }\n\n .", ".active {\n border-bottom: 1px solid ", ";\n border-color: ", ";\n background-color: ", ";\n position: relative;\n z-index: ", ";\n color: ", ";\n }\n }\n }\n :not(.", ") .", " {\n .", " {\n cursor: pointer;\n }\n .", ":hover {\n border-bottom: 1px solid ", ";\n border-color: ", ";\n background-color: ", ";\n position: relative;\n z-index: ", ";\n color: ", ";\n }\n .", ".", " {\n background-color: ", ";\n border: 1px solid ", ";\n border-left: 0;\n color: ", ";\n position: relative;\n z-index: ", ";\n }\n }\n\n /* Table */\n .", " > table {\n table-layout: fixed;\n white-space: normal;\n border-top: none;\n // 1px border width offset added here to prevent unwanted overflow and scolling - ED-16212\n margin-right: -1px;\n // Allows better positioning for the shadow sentinels - ED-16668\n position: relative;\n\n > tbody > tr {\n white-space: pre-wrap;\n }\n\n .", " + * {\n margin-top: 0;\n }\n\n /*\n * Headings have a top margin by default, but we don't want this on the\n * first heading within table header cells.\n *\n * This specifically sets margin-top for the first heading within a header\n * cell when center/right aligned.\n */\n th.", " > .fabric-editor-block-mark {\n > h1:first-of-type,\n > h2:first-of-type,\n > h3:first-of-type,\n > h4:first-of-type,\n > h5:first-of-type,\n > h6:first-of-type {\n margin-top: 0;\n }\n }\n\n .", ", .", " {\n position: relative;\n }\n /* Give selected cells a blue overlay */\n .", "::after,\n .", "::after {\n z-index: ", ";\n position: absolute;\n content: '';\n left: 0;\n right: 0;\n top: 0;\n bottom: 0;\n width: 100%;\n pointer-events: none;\n }\n .", " {\n border: 1px solid ", ";\n }\n .", "::after {\n background: ", ";\n z-index: ", ";\n }\n th.", "::after,\n td.", "::after {\n background: ", ";\n z-index: ", ";\n }\n // ED-15246: Trello card is visible through a border of a table border\n td.", ", td.", " {\n &::after {\n height: 100%;\n width: 100%;\n border: 1px solid ", ";\n content: '';\n position: absolute;\n left: -1px;\n top: -1px;\n bottom: 0;\n z-index: ", ";\n display: inline-block;\n pointer-events: none;\n }\n &.", "::after {\n border: 1px solid ", ";\n z-index: ", ";\n }\n }\n }\n .", " {\n position: absolute;\n /* top of corner control is table margin top - corner control height + 1 pixel of table border. */\n top: ", "px;\n }\n .", ".", " {\n z-index: ", ";\n }\n .", " {\n left: -", "px;\n }\n .", " {\n padding-right: ", "px;\n margin-right: -", "px;\n padding-bottom: 0px;\n /* fixes gap cursor height */\n overflow: auto;\n overflow-y: hidden;\n position: relative;\n }\n }\n\n .ProseMirror.", " {\n .", " {\n overflow-x: auto;\n ", ";\n }\n }\n\n .ProseMirror.", " {\n cursor: col-resize;\n }\n\n /*\n ED-15882: When custom start numbers is enabled for lists, we have\n styles that handle this generally (in editor-common) so we can\n throw away the older table-specific styles here.\n */\n ", "\n\n ", "\n"])), ClassName.LAYOUT_BUTTON, "var(--ds-background-neutral, ".concat(N20A, ")"), "var(--ds-icon, ".concat(N300, ")"), ClassName.LAYOUT_BUTTON, ClassName.IS_RESIZING, "var(--ds-background-neutral-hovered, ".concat(B300, ")"), "var(--ds-icon, white)", tableSharedStyle(props), columnControlsLineMarker(), hoveredDeleteButton, hoveredCell, hoveredWarningCell, resizeHandle, rangeSelectionStyles, ClassName.LAST_ITEM_IN_CELL, ClassName.TABLE_NODE_WRAPPER, ClassName.TABLE_CELL, ClassName.TABLE_HEADER_CELL, ClassName.TABLE_CELL, tableCellBackgroundColor(props), tableBorderColor(props), tableBorderColor(props), ClassName.CONTROLS_FLOATING_BUTTON_COLUMN, insertColumnButtonWrapper, ClassName.CONTROLS_FLOATING_BUTTON_ROW, insertRowButtonWrapper, DeleteButton, ClassName.TABLE_STICKY, ClassName.NUMBERED_COLUMN, ClassName.NUMBERED_COLUMN_BUTTON, stickyRowOffsetTop + 2, akEditorTableNumberColumnWidth, akEditorStickyHeaderZIndex, stickyRowOffsetTop, "var(--ds-surface, white)", ClassName.TABLE_STICKY, ClassName.CORNER_CONTROLS, akEditorSmallZIndex, "var(--ds-surface, white)", tableToolbarSize, tableToolbarSize, ClassName.CORNER_CONTROLS, ClassName.CONTROLS_CORNER_BUTTON, tableToolbarSize, tableToolbarSize, ClassName.TABLE_STICKY, ClassName.COLUMN_CONTROLS_DECORATIONS, ClassName.TABLE_STICKY, ClassName.ROW_CONTROLS, ClassName.ROW_CONTROLS_BUTTON_WRAP, akEditorStickyHeaderZIndex, tableToolbarSize, "var(--ds-surface, white)", tableToolbarSize, ClassName.TABLE_STICKY, "var(--ds-surface, green)", stickyRowOffsetTop, stickyRowZIndex, "var(--ds-surface, white)", "var(--ds-shadow-overflow-perimeter, ".concat(N40A, ")"), ClassName.TABLE_STICKY, ClassName.TABLE_STICKY_SHADOW, stickyRowZIndex + 1, ClassName.WITH_CONTROLS, ClassName.TABLE_STICKY, ClassName.TABLE_STICKY_SHADOW, tableToolbarSize, stickyHeaderBorderBottomWidth, tableBorderColor(props), ClassName.TABLE_STICKY, ClassName.TABLE_STICKY, ClassName.TABLE_STICKY, insertColumnButtonOffset + 1, ClassName.TABLE_STICKY, ClassName.TABLE_CONTAINER, ClassName.TABLE_STICKY, ClassName.WITH_RESIZE_LINE, ClassName.WITH_RESIZE_LINE, ClassName.RESIZE_HANDLE_DECORATION, (resizeHandlerAreaWidth - resizeLineWidth) / 2 + 1, ClassName.WITH_RESIZE_LINE, ClassName.SELECTED_CELL, ClassName.WITH_RESIZE_LINE, ClassName.SELECTED_CELL, ClassName.RESIZE_HANDLE_DECORATION, (resizeHandlerAreaWidth - resizeLineWidth) / 2, ClassName.HOVERED_CELL, ClassName.SELECTED_CELL, ClassName.WITH_CONTROLS, tableControlsSpacing, ClassName.WITH_CONTROLS, ClassName.TABLE_STICKY, ClassName.NUMBERED_COLUMN, ClassName.NUMBERED_COLUMN_BUTTON, tableControlsSpacing + 2, ClassName.CORNER_CONTROLS, tableControlsSpacing - tableToolbarSize + 2, "var(--ds-surface, white)", (_props$featureFlags = props.featureFlags) !== null && _props$featureFlags !== void 0 && _props$featureFlags.stickyHeadersOptimization ? sentinelStyles : '', OverflowShadow(props), ClassName.TABLE_STICKY, ClassName.TABLE_STICKY_SHADOW, tablePadding, ClassName.ROW_CONTROLS_WRAPPER, tablePadding, ClassName.TABLE_CONTAINER, akEditorTableNumberColumnWidth + tablePadding - 1, ClassName.TABLE_LEFT_SHADOW, ClassName.TABLE_RIGHT_SHADOW, ClassName.NODEVIEW_WRAPPER, breakoutWidthStyling((_props$featureFlags$u = (_props$featureFlags2 = props.featureFlags) === null || _props$featureFlags2 === void 0 ? void 0 : _props$featureFlags2.useFragmentMarkBreakoutWidthStylingFix) !== null && _props$featureFlags$u !== void 0 ? _props$featureFlags$u : true), columnControlsDecoration(props), ClassName.CORNER_CONTROLS, tableToolbarSize + 1, cornerControlHeight, ClassName.CORNER_CONTROLS_INSERT_ROW_MARKER, InsertMarker(props, "\n left: -11px;\n top: 9px;\n "), ClassName.CORNER_CONTROLS, ClassName.CORNER_CONTROLS_INSERT_ROW_MARKER, ClassName.CONTROLS_CORNER_BUTTON, tableToolbarSize + 1, tableToolbarSize + 1, tableBorderColor(props), tableBorderRadiusSize, tableHeaderCellBackgroundColor(props), ClassName.CONTROLS_CORNER_BUTTON, tableBorderSelectedColor, "var(--ds-background-selected, ".concat(tableToolbarSelectedColor, ")"), ClassName.TABLE_CONTAINER, ClassName.CORNER_CONTROLS, ClassName.CONTROLS_CORNER_BUTTON, akEditorTableToolbarSize + akEditorTableNumberColumnWidth, ClassName.ROW_CONTROLS, ClassName.CONTROLS_BUTTON, ClassName.IS_RESIZING, ClassName.CONTROLS_CORNER_BUTTON, tableBorderSelectedColor, "var(--ds-background-selected, ".concat(tableToolbarSelectedColor, ")"), ClassName.IS_RESIZING, ClassName.CONTROLS_CORNER_BUTTON, ClassName.HOVERED_CELL_IN_DANGER, tableBorderDeleteColor, "var(--ds-background-danger, ".concat(tableToolbarDeleteColor, ")"), ClassName.ROW_CONTROLS, tableToolbarSize, InsertMarker(props, "\n bottom: -1px;\n left: -11px;\n "), ClassName.ROW_CONTROLS_INNER, ClassName.ROW_CONTROLS_BUTTON_WRAP, tableBorderRadiusSize, ClassName.ROW_CONTROLS_BUTTON_WRAP, ClassName.ROW_CONTROLS_BUTTON_WRAP, ClassName.ROW_CONTROLS_BUTTON_WRAP, ClassName.CONTROLS_BUTTON, akEditorUnitZIndex, HeaderButton(props, "\n border-bottom: 1px solid ".concat(tableBorderColor(props), ";\n border-right: 0px;\n border-radius: 0;\n height: 100%;\n width: ").concat(tableToolbarSize, "px;\n\n .").concat(ClassName.CONTROLS_BUTTON_OVERLAY, " {\n position: absolute;\n width: 30px;\n height: 50%;\n right: 0;\n bottom: 0;\n }\n .").concat(ClassName.CONTROLS_BUTTON_OVERLAY, ":first-of-type {\n top: 0;\n }\n ")), ClassName.IS_RESIZING, ClassName.ROW_CONTROLS, HeaderButtonHover(), HeaderButtonDanger(), ClassName.NUMBERED_COLUMN, akEditorTableToolbarSize - 1, akEditorTableToolbarSize, akEditorTableNumberColumnWidth + 1, ClassName.NUMBERED_COLUMN_BUTTON, tableBorderColor(props), relativeFontSizeToBase16(fontSize()), tableHeaderCellBackgroundColor(props), tableTextColor(props), tableBorderColor(props), tableBorderColor(props), ClassName.WITH_CONTROLS, ClassName.CORNER_CONTROLS, ClassName.ROW_CONTROLS, ClassName.NUMBERED_COLUMN, ClassName.NUMBERED_COLUMN_BUTTON, ClassName.NUMBERED_COLUMN_BUTTON, tableBorderSelectedColor, tableBorderSelectedColor, "var(--ds-background-selected, ".concat(tableToolbarSelectedColor, ")"), akEditorUnitZIndex, "var(--ds-text-selected, ".concat(N0, ")"), ClassName.IS_RESIZING, ClassName.WITH_CONTROLS, ClassName.NUMBERED_COLUMN_BUTTON, ClassName.NUMBERED_COLUMN_BUTTON, tableBorderSelectedColor, tableBorderSelectedColor, "var(--ds-background-selected, ".concat(tableToolbarSelectedColor, ")"), akEditorUnitZIndex, "var(--ds-text-selected, ".concat(N0, ")"), ClassName.NUMBERED_COLUMN_BUTTON, ClassName.HOVERED_CELL_IN_DANGER, "var(--ds-background-danger, ".concat(tableToolbarDeleteColor, ")"), tableBorderDeleteColor, "var(--ds-text-danger, ".concat(R500, ")"), akEditorUnitZIndex, ClassName.TABLE_NODE_WRAPPER, ClassName.COLUMN_CONTROLS_DECORATIONS, ClassName.TABLE_HEADER_CELL, ClassName.SELECTED_CELL, ClassName.HOVERED_CELL_IN_DANGER, ClassName.SELECTED_CELL, ClassName.HOVERED_CELL_IN_DANGER, akEditorSmallZIndex, ClassName.SELECTED_CELL, tableBorderSelectedColor, ClassName.SELECTED_CELL, tableCellSelectedColor, akEditorSmallZIndex, ClassName.HOVERED_CELL_IN_DANGER, ClassName.HOVERED_CELL_IN_DANGER, tableCellDeleteColor, akEditorUnitZIndex * 100, ClassName.HOVERED_CELL, ClassName.SELECTED_CELL, tableBorderSelectedColor, akEditorSmallZIndex, ClassName.HOVERED_CELL_IN_DANGER, tableBorderDeleteColor, akEditorUnitZIndex * 100, ClassName.ROW_CONTROLS_WRAPPER, tableMarginTop - cornerControlHeight + 1, ClassName.ROW_CONTROLS_WRAPPER, ClassName.TABLE_LEFT_SHADOW, akEditorUnitZIndex, ClassName.ROW_CONTROLS_WRAPPER, tableToolbarSize, ClassName.TABLE_NODE_WRAPPER, insertColumnButtonOffset, insertColumnButtonOffset, ClassName.IS_RESIZING, ClassName.TABLE_NODE_WRAPPER, scrollbarStyles, ClassName.RESIZE_CURSOR, props !== null && props !== void 0 && (_props$featureFlags3 = props.featureFlags) !== null && _props$featureFlags3 !== void 0 && _props$featureFlags3.restartNumberedLists ? "" : listLargeNumericMarkersOldStyles, shadowSentinelStyles);
36
+ return css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n .", " button {\n background: ", ";\n color: ", ";\n cursor: none;\n }\n\n .", ":not(.", ") button:hover {\n background: ", ";\n color: ", " !important;\n cursor: pointer;\n }\n\n .ProseMirror {\n ", ";\n ", ";\n ", ";\n ", ";\n ", ";\n ", ";\n ", ";\n\n .", " {\n margin-bottom: 0;\n }\n\n .", " {\n td.", ", th.", " {\n position: relative;\n overflow: visible;\n }\n\n td.", " {\n background-color: ", ";\n\n // ED-15246: Trello card is visible through a border of a table border\n // This fixes a border issue caused by relative positioned table cells\n &::after {\n height: 100%;\n content: '';\n border-left: 1px solid ", ";\n border-bottom: 1px solid ", ";\n position: absolute;\n right: 0px;\n top: 0px;\n bottom: 0;\n width: 100%;\n display: inline-block;\n pointer-events: none;\n }\n }\n }\n\n .", " {\n ", "\n }\n\n .", " {\n ", "\n }\n\n /* Delete button */\n ", "\n /* Ends Delete button */\n\n /* sticky styles */\n .", " .", " .", ":first-of-type {\n margin-top: ", "px;\n width: ", "px;\n\n position: fixed !important;\n z-index: ", " !important;\n box-shadow: 0px -", "px ", ";\n border-right: 0 none;\n /* top set by NumberColumn component */\n }\n\n .", " .", ".sticky {\n position: fixed !important;\n /* needs to be above row controls */\n z-index: ", " !important;\n background: ", ";\n\n width: ", "px;\n height: ", "px;\n }\n\n .", ".sticky .", " {\n border-bottom: 0px none;\n border-right: 0px none;\n\n height: ", "px;\n width: ", "px;\n }\n\n .", " .", " {\n z-index: 0;\n }\n\n .", "\n .", "\n .", ".sticky {\n position: fixed !important;\n z-index: ", " !important;\n display: flex;\n border-left: ", "px solid\n ", ";\n margin-left: -", "px;\n }\n\n .", " col:first-of-type {\n /* moving rows out of a table layout does weird things in Chrome */\n border-right: 1px solid ", ";\n }\n\n tr.sticky {\n padding-top: ", "px;\n position: fixed;\n display: grid;\n\n /* to keep it above cell selection */\n z-index: ", ";\n\n overflow-y: visible;\n overflow-x: hidden;\n\n grid-auto-flow: column;\n\n /* background for where controls apply */\n background: ", ";\n box-sizing: content-box;\n\n margin-top: 2px;\n\n box-shadow: 0 6px 4px -4px ", ";\n margin-left: -1px;\n\n &.no-pointer-events {\n pointer-events: none;\n }\n }\n\n .", " .", " {\n left: unset;\n position: fixed;\n z-index: ", ";\n }\n\n .", ".", "\n .", " {\n padding-bottom: ", "px;\n }\n\n tr.sticky th {\n border-bottom: ", "px solid\n ", ";\n margin-right: -1px;\n }\n\n .", " tr.sticky > th:last-child {\n border-right-width: 1px;\n }\n\n /* add left edge for first cell */\n .", " tr.sticky > th:first-of-type {\n margin-left: 0px;\n }\n\n /* add a little bit so the scroll lines up with the table */\n .", " tr.sticky::after {\n content: ' ';\n width: ", "px;\n }\n\n /* To fix jumpiness caused in Chrome Browsers for sticky headers */\n .", " .sticky + tr {\n min-height: 0px;\n }\n\n /* move resize line a little in sticky bar */\n .", ".", " {\n tr.sticky\n td.", ",\n tr.sticky\n th.", " {\n .", "::after {\n right: ", "px;\n }\n }\n\n /* when selected put it back to normal -- :not selector would be nicer */\n tr.sticky\n td.", ".", ",\n tr.sticky\n th.", ".", " {\n .", "::after {\n right: ", "px;\n }\n }\n }\n\n tr.sticky\n .", ",\n tr.sticky\n .", " {\n z-index: 1;\n }\n\n .", " tr.sticky {\n padding-top: ", "px;\n }\n\n .", ".", "\n .", "\n .", ":first-of-type {\n margin-top: ", "px;\n }\n\n .", ".sticky {\n border-top: ", "px solid\n ", ";\n }\n\n ", "\n ", "\n\n .", " .", " {\n height: 0; // stop overflow flash & set correct height in update-overflow-shadows.ts\n }\n\n .less-padding {\n padding: 0 ", "px;\n\n .", " {\n padding: 0 ", "px;\n\n // https://product-fabric.atlassian.net/browse/ED-16386\n // Fixes issue where the extra padding that is added here throws off the position\n // of the rows control dot\n &::after {\n right: 6px !important;\n }\n }\n\n &.", "[data-number-column='true'] {\n padding-left: ", "px;\n }\n\n .", " {\n left: 6px;\n }\n\n .", " {\n left: calc(100% - 6px);\n }\n }\n\n > .", " {\n /**\n * Prevent margins collapsing, aids with placing the gap-cursor correctly\n * @see https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing\n *\n * TODO: Enable this, many tests will fail!\n * border-top: 1px solid transparent;\n */\n }\n\n /* Breakout only works on top level unless wrapped in fragment mark */\n ", "\n\n ", ";\n\n /* Corner controls */\n .", " {\n width: ", "px;\n height: ", "px;\n display: none;\n\n .", " {\n position: relative;\n\n ", ";\n }\n }\n\n .", ".sticky {\n .", " {\n /* sticky row insert dot overlaps other row insert and messes things up */\n display: none !important;\n }\n }\n\n .", " {\n position: absolute;\n top: 0;\n width: ", "px;\n height: ", "px;\n border: 1px solid ", ";\n border-radius: 0;\n border-top-left-radius: ", "px;\n background: ", ";\n box-sizing: border-box;\n padding: 0;\n :focus {\n outline: none;\n }\n }\n .active .", " {\n border-color: ", ";\n background: ", ";\n }\n\n .", "[data-number-column='true'] {\n .", ", .", " {\n width: ", "px;\n }\n .", " .", " {\n border-right-width: 0;\n }\n }\n\n :not(.", ") .", ":hover {\n border-color: ", ";\n background: ", ";\n cursor: pointer;\n }\n\n :not(.", ")\n .", ".", " {\n border-color: ", ";\n background: ", ";\n }\n\n /* Row controls */\n .", " {\n width: ", "px;\n box-sizing: border-box;\n display: none;\n position: relative;\n\n ", ";\n\n .", " {\n display: flex;\n flex-direction: column;\n }\n .", ":last-child > button {\n border-bottom-left-radius: ", "px;\n }\n .", " {\n position: relative;\n margin-top: -1px;\n }\n .", ":hover,\n .", ".active,\n .", ":hover {\n z-index: ", ";\n }\n\n ", "\n }\n\n :not(.", ") .", " {\n ", "\n ", "\n }\n\n /* Numbered column */\n .", " {\n position: relative;\n float: right;\n margin-left: ", "px;\n top: ", "px;\n width: ", "px;\n box-sizing: border-box;\n }\n\n .", " {\n border: 1px solid ", ";\n box-sizing: border-box;\n margin-top: -1px;\n padding-bottom: 2px;\n padding: 10px 2px;\n text-align: center;\n font-size: ", ";\n background-color: ", ";\n color: ", ";\n border-color: ", ";\n\n :first-child:not(style),\n style:first-child + * {\n margin-top: 0;\n }\n :last-child {\n border-bottom: 1px solid ", ";\n }\n }\n\n .", " {\n .", ", .", " {\n display: block;\n }\n .", " {\n padding-left: 1px;\n .", " {\n border-left: 0 none;\n }\n\n .", ".active {\n border-bottom: 1px solid ", ";\n border-color: ", ";\n background-color: ", ";\n position: relative;\n z-index: ", ";\n color: ", ";\n }\n }\n }\n :not(.", ") .", " {\n .", " {\n cursor: pointer;\n }\n .", ":hover {\n border-bottom: 1px solid ", ";\n border-color: ", ";\n background-color: ", ";\n position: relative;\n z-index: ", ";\n color: ", ";\n }\n .", ".", " {\n background-color: ", ";\n border: 1px solid ", ";\n border-left: 0;\n color: ", ";\n position: relative;\n z-index: ", ";\n }\n }\n\n /* Table */\n .", " > table {\n table-layout: fixed;\n white-space: normal;\n border-top: none;\n // 1px border width offset added here to prevent unwanted overflow and scolling - ED-16212\n margin-right: -1px;\n // Allows better positioning for the shadow sentinels - ED-16668\n position: relative;\n\n > tbody > tr {\n white-space: pre-wrap;\n }\n\n .", " + * {\n margin-top: 0;\n }\n\n /*\n * Headings have a top margin by default, but we don't want this on the\n * first heading within table header cells.\n *\n * This specifically sets margin-top for the first heading within a header\n * cell when center/right aligned.\n */\n th.", " > .fabric-editor-block-mark {\n > h1:first-of-type,\n > h2:first-of-type,\n > h3:first-of-type,\n > h4:first-of-type,\n > h5:first-of-type,\n > h6:first-of-type {\n margin-top: 0;\n }\n }\n\n .", ", .", " {\n position: relative;\n }\n /* Give selected cells a blue overlay */\n .", "::after,\n .", "::after {\n z-index: ", ";\n position: absolute;\n content: '';\n left: 0;\n right: 0;\n top: 0;\n bottom: 0;\n width: 100%;\n pointer-events: none;\n }\n .", " {\n border: 1px solid ", ";\n }\n .", "::after {\n background: ", ";\n z-index: ", ";\n }\n th.", "::after,\n td.", "::after {\n background: ", ";\n z-index: ", ";\n }\n // ED-15246: Trello card is visible through a border of a table border\n td.", ", td.", " {\n &::after {\n height: 100%;\n width: 100%;\n border: 1px solid ", ";\n content: '';\n position: absolute;\n left: -1px;\n top: -1px;\n bottom: 0;\n z-index: ", ";\n display: inline-block;\n pointer-events: none;\n }\n &.", "::after {\n border: 1px solid ", ";\n z-index: ", ";\n }\n }\n }\n .", " {\n position: absolute;\n /* top of corner control is table margin top - corner control height + 1 pixel of table border. */\n top: ", "px;\n }\n .", ".", " {\n z-index: ", ";\n }\n .", " {\n left: -", "px;\n }\n .", " {\n padding-right: ", "px;\n margin-right: -", "px;\n padding-bottom: 0px;\n /* fixes gap cursor height */\n overflow: auto;\n overflow-y: hidden;\n position: relative;\n }\n }\n\n .ProseMirror.", " {\n .", " {\n overflow-x: auto;\n ", ";\n }\n }\n\n .ProseMirror.", " {\n cursor: col-resize;\n }\n\n /*\n ED-15882: When custom start numbers is enabled for lists, we have\n styles that handle this generally (in editor-common) so we can\n throw away the older table-specific styles here.\n */\n ", "\n\n ", "\n"])), ClassName.LAYOUT_BUTTON, "var(--ds-background-neutral, ".concat(N20A, ")"), "var(--ds-icon, ".concat(N300, ")"), ClassName.LAYOUT_BUTTON, ClassName.IS_RESIZING, "var(--ds-background-neutral-hovered, ".concat(B300, ")"), "var(--ds-icon, white)", tableSharedStyle(props), columnControlsLineMarker(), hoveredDeleteButton(props), hoveredCell(props), hoveredWarningCell, resizeHandle(props), rangeSelectionStyles, ClassName.LAST_ITEM_IN_CELL, ClassName.TABLE_NODE_WRAPPER, ClassName.TABLE_CELL, ClassName.TABLE_HEADER_CELL, ClassName.TABLE_CELL, tableCellBackgroundColor(props), tableBorderColor(props), tableBorderColor(props), ClassName.CONTROLS_FLOATING_BUTTON_COLUMN, insertColumnButtonWrapper(props), ClassName.CONTROLS_FLOATING_BUTTON_ROW, insertRowButtonWrapper(props), DeleteButton(props), ClassName.TABLE_STICKY, ClassName.NUMBERED_COLUMN, ClassName.NUMBERED_COLUMN_BUTTON, stickyRowOffsetTop + 2, akEditorTableNumberColumnWidth, akEditorStickyHeaderZIndex, stickyRowOffsetTop, "var(--ds-surface, white)", ClassName.TABLE_STICKY, ClassName.CORNER_CONTROLS, akEditorSmallZIndex, "var(--ds-surface, white)", tableToolbarSize, tableToolbarSize, ClassName.CORNER_CONTROLS, ClassName.CONTROLS_CORNER_BUTTON, tableToolbarSize, tableToolbarSize, ClassName.TABLE_STICKY, ClassName.COLUMN_CONTROLS_DECORATIONS, ClassName.TABLE_STICKY, ClassName.ROW_CONTROLS, ClassName.ROW_CONTROLS_BUTTON_WRAP, akEditorStickyHeaderZIndex, tableToolbarSize, "var(--ds-surface, white)", tableToolbarSize, ClassName.TABLE_STICKY, "var(--ds-surface, green)", stickyRowOffsetTop, stickyRowZIndex, "var(--ds-surface, white)", "var(--ds-shadow-overflow-perimeter, ".concat(N40A, ")"), ClassName.TABLE_STICKY, ClassName.TABLE_STICKY_SHADOW, stickyRowZIndex + 1, ClassName.WITH_CONTROLS, ClassName.TABLE_STICKY, ClassName.TABLE_STICKY_SHADOW, tableToolbarSize, stickyHeaderBorderBottomWidth, tableBorderColor(props), ClassName.TABLE_STICKY, ClassName.TABLE_STICKY, ClassName.TABLE_STICKY, insertColumnButtonOffset + 1, ClassName.TABLE_STICKY, ClassName.TABLE_CONTAINER, ClassName.TABLE_STICKY, ClassName.WITH_RESIZE_LINE, ClassName.WITH_RESIZE_LINE, ClassName.RESIZE_HANDLE_DECORATION, (resizeHandlerAreaWidth - resizeLineWidth) / 2 + 1, ClassName.WITH_RESIZE_LINE, ClassName.SELECTED_CELL, ClassName.WITH_RESIZE_LINE, ClassName.SELECTED_CELL, ClassName.RESIZE_HANDLE_DECORATION, (resizeHandlerAreaWidth - resizeLineWidth) / 2, ClassName.HOVERED_CELL, ClassName.SELECTED_CELL, ClassName.WITH_CONTROLS, tableControlsSpacing, ClassName.WITH_CONTROLS, ClassName.TABLE_STICKY, ClassName.NUMBERED_COLUMN, ClassName.NUMBERED_COLUMN_BUTTON, tableControlsSpacing + 2, ClassName.CORNER_CONTROLS, tableControlsSpacing - tableToolbarSize + 2, "var(--ds-surface, white)", (_props$featureFlags = props.featureFlags) !== null && _props$featureFlags !== void 0 && _props$featureFlags.stickyHeadersOptimization ? sentinelStyles : '', OverflowShadow(props), ClassName.TABLE_STICKY, ClassName.TABLE_STICKY_SHADOW, tablePadding, ClassName.ROW_CONTROLS_WRAPPER, tablePadding, ClassName.TABLE_CONTAINER, akEditorTableNumberColumnWidth + tablePadding - 1, ClassName.TABLE_LEFT_SHADOW, ClassName.TABLE_RIGHT_SHADOW, ClassName.NODEVIEW_WRAPPER, breakoutWidthStyling((_props$featureFlags$u = (_props$featureFlags2 = props.featureFlags) === null || _props$featureFlags2 === void 0 ? void 0 : _props$featureFlags2.useFragmentMarkBreakoutWidthStylingFix) !== null && _props$featureFlags$u !== void 0 ? _props$featureFlags$u : true), columnControlsDecoration(props), ClassName.CORNER_CONTROLS, tableToolbarSize + 1, cornerControlHeight, ClassName.CORNER_CONTROLS_INSERT_ROW_MARKER, InsertMarker(props, "\n left: -11px;\n top: 9px;\n "), ClassName.CORNER_CONTROLS, ClassName.CORNER_CONTROLS_INSERT_ROW_MARKER, ClassName.CONTROLS_CORNER_BUTTON, tableToolbarSize + 1, tableToolbarSize + 1, tableBorderColor(props), tableBorderRadiusSize, tableHeaderCellBackgroundColor(props), ClassName.CONTROLS_CORNER_BUTTON, tableBorderSelectedColor(props), tableToolbarSelectedColor(props), ClassName.TABLE_CONTAINER, ClassName.CORNER_CONTROLS, ClassName.CONTROLS_CORNER_BUTTON, akEditorTableToolbarSize + akEditorTableNumberColumnWidth, ClassName.ROW_CONTROLS, ClassName.CONTROLS_BUTTON, ClassName.IS_RESIZING, ClassName.CONTROLS_CORNER_BUTTON, tableBorderSelectedColor(props), tableToolbarSelectedColor(props), ClassName.IS_RESIZING, ClassName.CONTROLS_CORNER_BUTTON, ClassName.HOVERED_CELL_IN_DANGER, tableBorderDeleteColor(props), tableToolbarDeleteColor(props), ClassName.ROW_CONTROLS, tableToolbarSize, InsertMarker(props, "\n bottom: -1px;\n left: -11px;\n "), ClassName.ROW_CONTROLS_INNER, ClassName.ROW_CONTROLS_BUTTON_WRAP, tableBorderRadiusSize, ClassName.ROW_CONTROLS_BUTTON_WRAP, ClassName.ROW_CONTROLS_BUTTON_WRAP, ClassName.ROW_CONTROLS_BUTTON_WRAP, ClassName.CONTROLS_BUTTON, akEditorUnitZIndex, HeaderButton(props, "\n border-bottom: 1px solid ".concat(tableBorderColor(props), ";\n border-right: 0px;\n border-radius: 0;\n height: 100%;\n width: ").concat(tableToolbarSize, "px;\n\n .").concat(ClassName.CONTROLS_BUTTON_OVERLAY, " {\n position: absolute;\n width: 30px;\n height: 50%;\n right: 0;\n bottom: 0;\n }\n .").concat(ClassName.CONTROLS_BUTTON_OVERLAY, ":first-of-type {\n top: 0;\n }\n ")), ClassName.IS_RESIZING, ClassName.ROW_CONTROLS, HeaderButtonHover(props), HeaderButtonDanger(props), ClassName.NUMBERED_COLUMN, akEditorTableToolbarSize - 1, akEditorTableToolbarSize, akEditorTableNumberColumnWidth + 1, ClassName.NUMBERED_COLUMN_BUTTON, tableBorderColor(props), relativeFontSizeToBase16(fontSize()), tableHeaderCellBackgroundColor(props), tableTextColor(props), tableBorderColor(props), tableBorderColor(props), ClassName.WITH_CONTROLS, ClassName.CORNER_CONTROLS, ClassName.ROW_CONTROLS, ClassName.NUMBERED_COLUMN, ClassName.NUMBERED_COLUMN_BUTTON, ClassName.NUMBERED_COLUMN_BUTTON, tableBorderSelectedColor(props), tableBorderSelectedColor(props), tableToolbarSelectedColor(props), akEditorUnitZIndex, "var(--ds-text-selected, ".concat(N0, ")"), ClassName.IS_RESIZING, ClassName.WITH_CONTROLS, ClassName.NUMBERED_COLUMN_BUTTON, ClassName.NUMBERED_COLUMN_BUTTON, tableBorderSelectedColor(props), tableBorderSelectedColor(props), tableToolbarSelectedColor(props), akEditorUnitZIndex, "var(--ds-text-selected, ".concat(N0, ")"), ClassName.NUMBERED_COLUMN_BUTTON, ClassName.HOVERED_CELL_IN_DANGER, tableToolbarDeleteColor(props), tableBorderDeleteColor(props), "var(--ds-text-danger, ".concat(R500, ")"), akEditorUnitZIndex, ClassName.TABLE_NODE_WRAPPER, ClassName.COLUMN_CONTROLS_DECORATIONS, ClassName.TABLE_HEADER_CELL, ClassName.SELECTED_CELL, ClassName.HOVERED_CELL_IN_DANGER, ClassName.SELECTED_CELL, ClassName.HOVERED_CELL_IN_DANGER, akEditorSmallZIndex, ClassName.SELECTED_CELL, tableBorderSelectedColor(props), ClassName.SELECTED_CELL, tableCellSelectedColor(props), akEditorSmallZIndex, ClassName.HOVERED_CELL_IN_DANGER, ClassName.HOVERED_CELL_IN_DANGER, tableCellDeleteColor(props), akEditorUnitZIndex * 100, ClassName.HOVERED_CELL, ClassName.SELECTED_CELL, tableBorderSelectedColor(props), akEditorSmallZIndex, ClassName.HOVERED_CELL_IN_DANGER, tableBorderDeleteColor(props), akEditorUnitZIndex * 100, ClassName.ROW_CONTROLS_WRAPPER, tableMarginTop - cornerControlHeight + 1, ClassName.ROW_CONTROLS_WRAPPER, ClassName.TABLE_LEFT_SHADOW, akEditorUnitZIndex, ClassName.ROW_CONTROLS_WRAPPER, tableToolbarSize, ClassName.TABLE_NODE_WRAPPER, insertColumnButtonOffset, insertColumnButtonOffset, ClassName.IS_RESIZING, ClassName.TABLE_NODE_WRAPPER, scrollbarStyles, ClassName.RESIZE_CURSOR, props !== null && props !== void 0 && (_props$featureFlags3 = props.featureFlags) !== null && _props$featureFlags3 !== void 0 && _props$featureFlags3.restartNumberedLists ? "" : listLargeNumericMarkersOldStyles, shadowSentinelStyles);
37
37
  };
38
38
  export var tableFullPageEditorStyles = css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n .ProseMirror .", " > table {\n margin-left: 0;\n // 1px border width offset added here to prevent unwanted overflow and scolling - ED-16212\n margin-right: -1px;\n width: 100%;\n }\n"])), ClassName.TABLE_NODE_WRAPPER);
39
39
  export var tableCommentEditorStyles = css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n .ProseMirror .", " > table {\n margin-left: 0;\n margin-right: 0;\n ", ";\n }\n"])), ClassName.TABLE_NODE_WRAPPER, scrollbarStyles);
package/dist/esm/plugins/table/ui/consts.js CHANGED
@@ -1,6 +1,6 @@
1
1
  import { tableCellBorderWidth, tableMarginTop } from '@atlaskit/editor-common/styles';
2
- import { akEditorTableBorder, akEditorTableBorderDark, akEditorTableToolbar, akEditorTableToolbarDark, akEditorTableToolbarSize, akEditorUnitZIndex, akRichMediaResizeZIndex } from '@atlaskit/editor-shared-styles';
3
- import { B200, B300, DN30, DN400, N0, N20, N200, R400, R75 } from '@atlaskit/theme/colors';
2
+ import { akEditorTableBorder, akEditorTableBorderDark, akEditorTableBorderSelected, akEditorTableCellBlanketDeleted, akEditorTableCellBlanketSelected, akEditorTableToolbar, akEditorTableToolbarDark, akEditorTableToolbarSize, akEditorUnitZIndex, akRichMediaResizeZIndex } from '@atlaskit/editor-shared-styles';
3
+ import { B200, DN30, DN400, N0, N20, N200, N20A, N300, R300, R400, R75 } from '@atlaskit/theme/colors';
4
4
  import { themed } from '@atlaskit/theme/components';
5
5
  import { RESIZE_HANDLE_AREA_DECORATION_GAP } from '../types';
6
6
 
@@ -32,12 +32,46 @@ export var tableBorderColor = themed({
32
32
  });
33
33
  export var tableFloatingControlsColor = "var(--ds-background-neutral, ".concat(N20, ")");
34
34
  // TODO: https://product-fabric.atlassian.net/browse/DSP-4461
35
- export var tableCellSelectedColor = "var(--ds-blanket-selected, rgba(179, 212, 255, 0.3))";
36
- export var tableToolbarSelectedColor = "var(--ds-background-selected-bold, ".concat(B200, ")");
37
- export var tableBorderSelectedColor = "var(--ds-border-selected, ".concat(B300, ")");
38
- export var tableCellDeleteColor = "var(--ds-blanket-danger, rgba(255, 235, 230, 0.3))";
39
- export var tableBorderDeleteColor = "var(--ds-border-danger, ".concat(R400, ")");
40
- export var tableToolbarDeleteColor = "var(--ds-background-danger-bold, ".concat(R75, ")");
35
+ export var tableCellSelectedColor = themed({
36
+ light: "var(--ds-blanket-selected, ".concat(akEditorTableCellBlanketSelected, ")"),
37
+ dark: "var(--ds-blanket-selected, ".concat(akEditorTableCellBlanketSelected, ")")
38
+ });
39
+ export var tableToolbarSelectedColor = themed({
40
+ light: "var(--ds-background-selected-pressed, ".concat(B200, ")"),
41
+ dark: "var(--ds-background-selected-pressed, ".concat(B200, ")")
42
+ });
43
+ export var tableBorderSelectedColor = themed({
44
+ light: "var(--ds-border-focused, ".concat(akEditorTableBorderSelected, ")"),
45
+ dark: "var(--ds-border-focused, ".concat(akEditorTableBorderSelected, ")")
46
+ });
47
+ export var tableCellSelectedDeleteIconColor = themed({
48
+ light: "var(--ds-icon-subtle, ".concat(N300, ")"),
49
+ dark: "var(--ds-icon-subtle, ".concat(N300, ")")
50
+ });
51
+ export var tableCellSelectedDeleteIconBackground = themed({
52
+ light: "var(--ds-background-accent-gray-subtlest, ".concat(N20A, ")"),
53
+ dark: "var(--ds-background-accent-gray-subtlest, ".concat(N20A, ")")
54
+ });
55
+ export var tableCellDeleteColor = themed({
56
+ light: "var(--ds-blanket-danger, ".concat(akEditorTableCellBlanketDeleted, ")"),
57
+ dark: "var(--ds-blanket-danger, ".concat(akEditorTableCellBlanketDeleted, ")")
58
+ });
59
+ export var tableBorderDeleteColor = themed({
60
+ light: "var(--ds-border-danger, ".concat(R400, ")"),
61
+ dark: "var(--ds-border-danger, ".concat(R400, ")")
62
+ });
63
+ export var tableToolbarDeleteColor = themed({
64
+ light: "var(--ds-background-danger-pressed, ".concat(R75, ")"),
65
+ dark: "var(--ds-background-danger-pressed, ".concat(R75, ")")
66
+ });
67
+ export var tableCellHoverDeleteIconColor = themed({
68
+ light: "var(--ds-icon-inverse, white)",
69
+ dark: "var(--ds-icon-inverse, white)"
70
+ });
71
+ export var tableCellHoverDeleteIconBackground = themed({
72
+ light: "var(--ds-background-danger-bold, ".concat(R300, ")"),
73
+ dark: "var(--ds-background-danger-bold, ".concat(R300, ")")
74
+ });
41
75
  export var tableBorderRadiusSize = 3;
42
76
  export var tablePadding = 8;
43
77
  export var tableScrollbarOffset = 15;
package/dist/esm/plugins/table/ui/ui-styles.js CHANGED
@@ -3,12 +3,12 @@ var _templateObject, _templateObject2, _templateObject3, _templateObject4, _temp
3
3
  import { css } from '@emotion/react';
4
4
  import { tableCellBorderWidth, tableMarginTop, tableMarginTopWithControl } from '@atlaskit/editor-common/styles';
5
5
  import { akEditorShadowZIndex, akEditorTableNumberColumnWidth, akEditorUnitZIndex } from '@atlaskit/editor-shared-styles';
6
- import { B300, N0, N20A, N300, N40A, N60A, R300, Y200, Y50 } from '@atlaskit/theme/colors';
6
+ import { B300, N0, N300, N40A, N60A, Y200, Y50 } from '@atlaskit/theme/colors';
7
7
  import { borderRadius } from '@atlaskit/theme/constants';
8
8
  import { TableCssClassName as ClassName } from '../types';
9
- import { columnControlsDecorationHeight, columnControlsSelectedZIndex, columnControlsZIndex, lineMarkerSize, resizeHandlerAreaWidth, resizeHandlerZIndex, resizeLineWidth, tableBorderColor, tableBorderDeleteColor, tableBorderSelectedColor, tableCellDeleteColor, tableDeleteButtonSize, tableHeaderCellBackgroundColor, tableInsertColumnButtonSize, tableToolbarDeleteColor, tableToolbarSelectedColor, tableToolbarSize } from './consts';
10
- var InsertLine = function InsertLine(cssString) {
11
- return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n .", " {\n background: ", ";\n display: none;\n position: absolute;\n z-index: ", ";\n ", "\n }\n"])), ClassName.CONTROLS_INSERT_LINE, tableBorderSelectedColor, akEditorUnitZIndex, cssString);
9
+ import { columnControlsDecorationHeight, columnControlsSelectedZIndex, columnControlsZIndex, lineMarkerSize, resizeHandlerAreaWidth, resizeHandlerZIndex, resizeLineWidth, tableBorderColor, tableBorderDeleteColor, tableBorderSelectedColor, tableCellDeleteColor, tableCellHoverDeleteIconBackground, tableCellHoverDeleteIconColor, tableCellSelectedDeleteIconBackground, tableCellSelectedDeleteIconColor, tableDeleteButtonSize, tableHeaderCellBackgroundColor, tableInsertColumnButtonSize, tableToolbarDeleteColor, tableToolbarSelectedColor, tableToolbarSize } from './consts';
10
+ var InsertLine = function InsertLine(props, cssString) {
11
+ return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n .", " {\n background: ", ";\n display: none;\n position: absolute;\n z-index: ", ";\n ", "\n }\n"])), ClassName.CONTROLS_INSERT_LINE, tableBorderSelectedColor(props), akEditorUnitZIndex, cssString);
12
12
  };
13
13
  var Marker = function Marker(props) {
14
14
  return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n background-color: ", ";\n position: absolute;\n height: ", "px;\n width: ", "px;\n border-radius: 50%;\n pointer-events: none;\n"])), tableBorderColor(props), lineMarkerSize, lineMarkerSize);
@@ -20,13 +20,13 @@ var Button = function Button(cssString) {
20
20
  return css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n border-radius: ", "px;\n border-width: 0px;\n display: inline-flex;\n max-width: 100%;\n text-align: center;\n margin: 0px;\n padding: 0px;\n text-decoration: none;\n transition: background 0.1s ease-out 0s,\n box-shadow 0.15s cubic-bezier(0.47, 0.03, 0.49, 1.38) 0s;\n outline: none !important;\n cursor: none;\n\n > .", " {\n display: inline-flex;\n max-height: 100%;\n max-width: 100%;\n }\n ", "\n"])), borderRadius(), ClassName.CONTROLS_BUTTON_ICON, cssString);
21
21
  };
22
22
  export var HeaderButton = function HeaderButton(props, cssString) {
23
- return css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n .", " {\n background: ", ";\n border: 1px solid ", ";\n display: block;\n box-sizing: border-box;\n padding: 0;\n\n :focus {\n outline: none;\n }\n ", "\n }\n\n .", "::after {\n content: ' ';\n background-color: transparent;\n left: -15px;\n top: 0;\n position: absolute;\n width: 15px;\n height: 100%;\n z-index: 1;\n }\n\n .active .", " {\n color: ", ";\n background-color: ", ";\n border-color: ", ";\n }\n"])), ClassName.CONTROLS_BUTTON, tableHeaderCellBackgroundColor(props), tableBorderColor(props), cssString, ClassName.ROW_CONTROLS_BUTTON, ClassName.CONTROLS_BUTTON, "var(--ds-icon-inverse, ".concat(N0, ")"), "var(--ds-background-selected, ".concat(tableToolbarSelectedColor, ")"), tableBorderSelectedColor);
23
+ return css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n .", " {\n background: ", ";\n border: 1px solid ", ";\n display: block;\n box-sizing: border-box;\n padding: 0;\n\n :focus {\n outline: none;\n }\n ", "\n }\n\n .", "::after {\n content: ' ';\n background-color: transparent;\n left: -15px;\n top: 0;\n position: absolute;\n width: 15px;\n height: 100%;\n z-index: 1;\n }\n\n .active .", " {\n color: ", ";\n background-color: ", ";\n border-color: ", ";\n }\n"])), ClassName.CONTROLS_BUTTON, tableHeaderCellBackgroundColor(props), tableBorderColor(props), cssString, ClassName.ROW_CONTROLS_BUTTON, ClassName.CONTROLS_BUTTON, "var(--ds-icon-inverse, ".concat(N0, ")"), tableToolbarSelectedColor(props), tableBorderSelectedColor(props));
24
24
  };
25
- export var HeaderButtonHover = function HeaderButtonHover() {
26
- return css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n .", ":hover {\n color: ", ";\n background-color: ", ";\n border-color: ", ";\n cursor: pointer;\n }\n"])), ClassName.CONTROLS_BUTTON, "var(--ds-icon-inverse, ".concat(N0, ")"), "var(--ds-background-selected, ".concat(tableToolbarSelectedColor, ")"), tableBorderSelectedColor);
25
+ export var HeaderButtonHover = function HeaderButtonHover(props) {
26
+ return css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n .", ":hover {\n color: ", ";\n background-color: ", ";\n border-color: ", ";\n cursor: pointer;\n }\n"])), ClassName.CONTROLS_BUTTON, "var(--ds-icon-inverse, ".concat(N0, ")"), tableToolbarSelectedColor(props), tableBorderSelectedColor(props));
27
27
  };
28
- export var HeaderButtonDanger = function HeaderButtonDanger() {
29
- return css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n .", " .", " {\n background-color: ", ";\n border-color: ", ";\n position: relative;\n z-index: ", ";\n }\n"])), ClassName.HOVERED_CELL_IN_DANGER, ClassName.CONTROLS_BUTTON, "var(--ds-background-danger, ".concat(tableToolbarDeleteColor, ")"), tableBorderDeleteColor, akEditorUnitZIndex);
28
+ export var HeaderButtonDanger = function HeaderButtonDanger(props) {
29
+ return css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n .", " .", " {\n background-color: ", ";\n border-color: ", ";\n position: relative;\n z-index: ", ";\n }\n"])), ClassName.HOVERED_CELL_IN_DANGER, ClassName.CONTROLS_BUTTON, tableToolbarDeleteColor(props), tableBorderDeleteColor(props), akEditorUnitZIndex);
30
30
  };
31
31
  var InsertButton = function InsertButton() {
32
32
  return css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n .", " {\n position: absolute;\n z-index: ", ";\n bottom: 0;\n }\n .", ",\n .", " {\n height: ", "px;\n width: ", "px;\n }\n .", " {\n ", "\n }\n .", " {\n display: none;\n }\n &:hover .", " {\n display: flex;\n }\n"])), ClassName.CONTROLS_INSERT_BUTTON_INNER, akEditorUnitZIndex + 10, ClassName.CONTROLS_INSERT_BUTTON_INNER, ClassName.CONTROLS_INSERT_BUTTON, tableInsertColumnButtonSize, tableInsertColumnButtonSize, ClassName.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(N60A, ", 0 0 1px ").concat(N60A), ")"), ";\n color: ", "var(--ds-icon, ".concat(N300, ")"), ";\n ")), ClassName.CONTROLS_INSERT_LINE, ClassName.CONTROLS_INSERT_LINE);
@@ -34,23 +34,37 @@ var InsertButton = function InsertButton() {
34
34
  var InsertButtonHover = function InsertButtonHover() {
35
35
  return css(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n .", ":hover {\n background: ", ";\n color: ", ";\n cursor: pointer;\n }\n"])), ClassName.CONTROLS_INSERT_BUTTON, "var(--ds-background-brand-bold, ".concat(B300, ")"), "var(--ds-icon-inverse, white)");
36
36
  };
37
- export var insertColumnButtonWrapper = css(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n ", "\n ", "\n ", "\n"])), InsertButton(), InsertButtonHover(), InsertLine("\n width: 2px;\n left: 9px;\n "));
38
- export var insertRowButtonWrapper = css(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n ", "\n ", "\n ", "\n"])), InsertButton(), InsertButtonHover(), InsertLine("\n height: 2px;\n top: -11px;\n left: ".concat(tableInsertColumnButtonSize - 1, "px;\n ")));
37
+ export var insertColumnButtonWrapper = function insertColumnButtonWrapper(props) {
38
+ return css(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n ", "\n ", "\n ", "\n"])), InsertButton(), InsertButtonHover(), InsertLine(props, "\n width: 2px;\n left: 9px;\n "));
39
+ };
40
+ export var insertRowButtonWrapper = function insertRowButtonWrapper(props) {
41
+ return css(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n ", "\n ", "\n ", "\n"])), InsertButton(), InsertButtonHover(), InsertLine(props, "\n height: 2px;\n top: -11px;\n left: ".concat(tableInsertColumnButtonSize - 1, "px;\n ")));
42
+ };
39
43
  export var columnControlsLineMarker = function columnControlsLineMarker() {
40
44
  return css(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["\n .", ".", "\n table\n tr:first-of-type\n td,\n .", ".", "\n table\n tr:first-of-type\n th {\n position: relative;\n }\n"])), ClassName.TABLE_CONTAINER, ClassName.WITH_CONTROLS, ClassName.TABLE_CONTAINER, ClassName.WITH_CONTROLS);
41
45
  };
42
- export var DeleteButton = css(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["\n .", ",\n .", " {\n height: ", "px;\n width: ", "px;\n }\n .", " {\n .", " {\n ", "\n }\n }\n\n .", ":hover {\n background: ", ";\n color: ", ";\n cursor: pointer;\n }\n"])), ClassName.CONTROLS_DELETE_BUTTON_WRAP, ClassName.CONTROLS_DELETE_BUTTON, tableDeleteButtonSize, tableDeleteButtonSize, ClassName.CONTROLS_DELETE_BUTTON_WRAP, ClassName.CONTROLS_DELETE_BUTTON, Button("\n background: ".concat("var(--ds-background-neutral, ".concat(N20A, ")"), ";\n color: ", "var(--ds-icon, ".concat(N300, ")"), ";\n ")), ClassName.CONTROLS_DELETE_BUTTON, "var(--ds-background-danger-bold, ".concat(R300, ")"), "var(--ds-icon-inverse, white)");
46
+ export var DeleteButton = function DeleteButton(props) {
47
+ return css(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["\n .", ",\n .", " {\n height: ", "px;\n width: ", "px;\n }\n .", " {\n .", " {\n ", "\n }\n }\n\n .", ":hover {\n background: ", ";\n color: ", ";\n cursor: pointer;\n }\n"])), ClassName.CONTROLS_DELETE_BUTTON_WRAP, ClassName.CONTROLS_DELETE_BUTTON, tableDeleteButtonSize, tableDeleteButtonSize, ClassName.CONTROLS_DELETE_BUTTON_WRAP, ClassName.CONTROLS_DELETE_BUTTON, Button("\n background: ".concat(tableCellSelectedDeleteIconBackground(props), ";\n color: ").concat(tableCellSelectedDeleteIconColor(props), ";\n ")), ClassName.CONTROLS_DELETE_BUTTON, tableCellHoverDeleteIconBackground(props), tableCellHoverDeleteIconColor(props));
48
+ };
43
49
  export var OverflowShadow = function OverflowShadow(props) {
44
50
  return css(_templateObject14 || (_templateObject14 = _taggedTemplateLiteral(["\n .", ", .", " {\n display: block;\n height: calc(100% - ", "px);\n position: absolute;\n pointer-events: none;\n top: ", "px;\n z-index: ", ";\n width: 8px;\n }\n .", " {\n background: linear-gradient(\n to left,\n transparent 0,\n ", " 100%\n ),\n linear-gradient(\n to right,\n ", " 0px,\n transparent 1px\n );\n left: 0px;\n }\n .", "[data-number-column='true'] > :not(.", ").", " {\n left: ", "px;\n }\n .", " {\n background: linear-gradient(\n to right,\n transparent 0,\n ", " 100%\n ),\n linear-gradient(\n to left,\n ", " 0px,\n transparent 1px\n );\n left: calc(100% + 2px);\n }\n .", " {\n z-index: 0;\n }\n .", " {\n .", ", .", " {\n height: calc(100% - ", "px);\n top: ", "px;\n }\n .", " {\n border-left: 1px solid ", ";\n }\n }\n"])), ClassName.TABLE_RIGHT_SHADOW, ClassName.TABLE_LEFT_SHADOW, tableMarginTop, tableMarginTop, akEditorShadowZIndex, ClassName.TABLE_LEFT_SHADOW, "var(--ds-shadow-overflow-spread, ".concat(N40A, ")"), "var(--ds-shadow-overflow-perimeter, transparent)", ClassName.TABLE_CONTAINER, ClassName.TABLE_STICKY_SHADOW, ClassName.TABLE_LEFT_SHADOW, akEditorTableNumberColumnWidth - 1, ClassName.TABLE_RIGHT_SHADOW, "var(--ds-shadow-overflow-spread, ".concat(N40A, ")"), "var(--ds-shadow-overflow-perimeter, transparent)", ClassName.TABLE_COLUMN_CONTROLS_DECORATIONS, ClassName.WITH_CONTROLS, ClassName.TABLE_RIGHT_SHADOW, ClassName.TABLE_LEFT_SHADOW, tableMarginTopWithControl, tableMarginTopWithControl, ClassName.TABLE_LEFT_SHADOW, tableBorderColor(props));
45
51
  };
46
52
  var columnHeaderButton = function columnHeaderButton(props, cssString) {
47
53
  return css(_templateObject15 || (_templateObject15 = _taggedTemplateLiteral(["\n background: ", ";\n border: 1px solid ", ";\n display: block;\n box-sizing: border-box;\n padding: 0;\n\n :focus {\n outline: none;\n }\n\n ", "\n"])), tableHeaderCellBackgroundColor(props), tableBorderColor(props), cssString);
48
54
  };
49
- var columnHeaderButtonSelected = css(_templateObject16 || (_templateObject16 = _taggedTemplateLiteral(["\n color: ", ";\n background-color: ", ";\n border-color: ", ";\n z-index: ", ";\n"])), "var(--ds-text-inverse, ".concat(N0, ")"), "var(--ds-background-selected, ".concat(tableToolbarSelectedColor, ")"), tableBorderSelectedColor, columnControlsSelectedZIndex);
55
+ var columnHeaderButtonSelected = function columnHeaderButtonSelected(props) {
56
+ return css(_templateObject16 || (_templateObject16 = _taggedTemplateLiteral(["\n color: ", ";\n background-color: ", ";\n border-color: ", ";\n z-index: ", ";\n"])), "var(--ds-text-inverse, ".concat(N0, ")"), tableToolbarSelectedColor(props), tableBorderSelectedColor(props), columnControlsSelectedZIndex);
57
+ };
50
58
  export var columnControlsDecoration = function columnControlsDecoration(props) {
51
- return css(_templateObject17 || (_templateObject17 = _taggedTemplateLiteral(["\n .", " {\n display: none;\n cursor: pointer;\n position: absolute;\n width: calc(100% + ", "px);\n left: -1px;\n top: -", "px;\n height: ", "px;\n z-index: 0;\n\n &::before {\n content: ' ';\n background-color: ", ";\n position: absolute;\n height: ", "px;\n width: ", "px;\n border-radius: 50%;\n pointer-events: none;\n top: 2px;\n right: -1px;\n }\n\n &::after {\n content: ' ';\n\n ", "\n }\n }\n\n div.", ">.", "::after {\n content: ' ';\n background-color: ", ";\n position: absolute;\n height: ", "px;\n width: ", "px;\n border-radius: 50%;\n pointer-events: none;\n top: -", "px;\n right: -1px;\n }\n\n .", " .", " {\n display: block;\n }\n\n table\n tr:first-of-type\n td.", ",\n table\n tr:first-of-type\n th.", " {\n &.", ",\n &.", ",\n &.", " {\n .", "::after {\n ", ";\n }\n\n &.", "\n .", "::after {\n background-color: ", ";\n border: 1px solid ", ";\n border-bottom: none;\n z-index: ", ";\n }\n }\n }\n\n .", "\n table\n tr:first-of-type\n td.", ",\n .", "\n table\n tr:first-of-type\n th.", " {\n .", "::after {\n ", ";\n }\n }\n"])), ClassName.COLUMN_CONTROLS_DECORATIONS, tableCellBorderWidth * 2, columnControlsDecorationHeight + tableCellBorderWidth, columnControlsDecorationHeight, tableBorderColor(props), lineMarkerSize, lineMarkerSize, columnHeaderButton(props, "\n border-right: ".concat(tableCellBorderWidth, "px solid ").concat(tableBorderColor(props), ";\n border-bottom: none;\n height: ").concat(tableToolbarSize, "px;\n width: 100%;\n position: absolute;\n top: ").concat(columnControlsDecorationHeight - tableToolbarSize, "px;\n left: 0px;\n z-index: ").concat(columnControlsZIndex, ";\n ")), ClassName.WITH_CONTROLS, ClassName.ROW_CONTROLS_WRAPPER, tableBorderColor(props), lineMarkerSize, lineMarkerSize, tableToolbarSize + tableCellBorderWidth, ClassName.WITH_CONTROLS, ClassName.COLUMN_CONTROLS_DECORATIONS, ClassName.TABLE_CELL, ClassName.TABLE_HEADER_CELL, ClassName.COLUMN_SELECTED, ClassName.HOVERED_COLUMN, ClassName.HOVERED_TABLE, ClassName.COLUMN_CONTROLS_DECORATIONS, columnHeaderButtonSelected, ClassName.HOVERED_CELL_IN_DANGER, ClassName.COLUMN_CONTROLS_DECORATIONS, "var(--ds-background-danger, ".concat(tableToolbarDeleteColor, ")"), tableBorderDeleteColor, akEditorUnitZIndex * 100, ClassName.TABLE_SELECTED, ClassName.TABLE_CELL, ClassName.TABLE_SELECTED, ClassName.TABLE_HEADER_CELL, ClassName.COLUMN_CONTROLS_DECORATIONS, columnHeaderButtonSelected);
59
+ return css(_templateObject17 || (_templateObject17 = _taggedTemplateLiteral(["\n .", " {\n display: none;\n cursor: pointer;\n position: absolute;\n width: calc(100% + ", "px);\n left: -1px;\n top: -", "px;\n height: ", "px;\n z-index: 0;\n\n &::before {\n content: ' ';\n background-color: ", ";\n position: absolute;\n height: ", "px;\n width: ", "px;\n border-radius: 50%;\n pointer-events: none;\n top: 2px;\n right: -1px;\n }\n\n &::after {\n content: ' ';\n\n ", "\n }\n }\n\n div.", ">.", "::after {\n content: ' ';\n background-color: ", ";\n position: absolute;\n height: ", "px;\n width: ", "px;\n border-radius: 50%;\n pointer-events: none;\n top: -", "px;\n right: -1px;\n }\n\n .", " .", " {\n display: block;\n }\n\n table\n tr:first-of-type\n td.", ",\n table\n tr:first-of-type\n th.", " {\n &.", ",\n &.", ",\n &.", " {\n .", "::after {\n ", ";\n }\n\n &.", "\n .", "::after {\n background-color: ", ";\n border: 1px solid ", ";\n border-bottom: none;\n z-index: ", ";\n }\n }\n }\n\n .", "\n table\n tr:first-of-type\n td.", ",\n .", "\n table\n tr:first-of-type\n th.", " {\n .", "::after {\n ", ";\n }\n }\n"])), ClassName.COLUMN_CONTROLS_DECORATIONS, tableCellBorderWidth * 2, columnControlsDecorationHeight + tableCellBorderWidth, columnControlsDecorationHeight, tableBorderColor(props), lineMarkerSize, lineMarkerSize, columnHeaderButton(props, "\n border-right: ".concat(tableCellBorderWidth, "px solid ").concat(tableBorderColor(props), ";\n border-bottom: none;\n height: ").concat(tableToolbarSize, "px;\n width: 100%;\n position: absolute;\n top: ").concat(columnControlsDecorationHeight - tableToolbarSize, "px;\n left: 0px;\n z-index: ").concat(columnControlsZIndex, ";\n ")), ClassName.WITH_CONTROLS, ClassName.ROW_CONTROLS_WRAPPER, tableBorderColor(props), lineMarkerSize, lineMarkerSize, tableToolbarSize + tableCellBorderWidth, ClassName.WITH_CONTROLS, ClassName.COLUMN_CONTROLS_DECORATIONS, ClassName.TABLE_CELL, ClassName.TABLE_HEADER_CELL, ClassName.COLUMN_SELECTED, ClassName.HOVERED_COLUMN, ClassName.HOVERED_TABLE, ClassName.COLUMN_CONTROLS_DECORATIONS, columnHeaderButtonSelected(props), ClassName.HOVERED_CELL_IN_DANGER, ClassName.COLUMN_CONTROLS_DECORATIONS, tableToolbarDeleteColor(props), tableBorderDeleteColor(props), akEditorUnitZIndex * 100, ClassName.TABLE_SELECTED, ClassName.TABLE_CELL, ClassName.TABLE_SELECTED, ClassName.TABLE_HEADER_CELL, ClassName.COLUMN_CONTROLS_DECORATIONS, columnHeaderButtonSelected(props));
60
+ };
61
+ export var hoveredDeleteButton = function hoveredDeleteButton(props) {
62
+ return css(_templateObject18 || (_templateObject18 = _taggedTemplateLiteral(["\n .", ".", " {\n .", ",\n .", ",\n .", " {\n border: 1px solid ", ";\n }\n .", "::after {\n background: ", ";\n }\n }\n"])), ClassName.TABLE_CONTAINER, ClassName.HOVERED_DELETE_BUTTON, ClassName.SELECTED_CELL, ClassName.COLUMN_SELECTED, ClassName.HOVERED_CELL, tableBorderDeleteColor(props), ClassName.SELECTED_CELL, tableCellDeleteColor(props));
63
+ };
64
+ export var hoveredCell = function hoveredCell(props) {
65
+ return css(_templateObject19 || (_templateObject19 = _taggedTemplateLiteral(["\n :not(.", ")\n .", ":not(.", ") {\n .", " {\n position: relative;\n border: 1px solid ", ";\n }\n }\n"])), ClassName.IS_RESIZING, ClassName.TABLE_CONTAINER, ClassName.HOVERED_DELETE_BUTTON, ClassName.HOVERED_CELL, tableBorderSelectedColor(props));
52
66
  };
53
- export var hoveredDeleteButton = css(_templateObject18 || (_templateObject18 = _taggedTemplateLiteral(["\n .", ".", " {\n .", ",\n .", ",\n .", " {\n border: 1px solid ", ";\n }\n .", "::after {\n background: ", ";\n }\n }\n"])), ClassName.TABLE_CONTAINER, ClassName.HOVERED_DELETE_BUTTON, ClassName.SELECTED_CELL, ClassName.COLUMN_SELECTED, ClassName.HOVERED_CELL, tableBorderDeleteColor, ClassName.SELECTED_CELL, tableCellDeleteColor);
54
- export var hoveredCell = css(_templateObject19 || (_templateObject19 = _taggedTemplateLiteral(["\n :not(.", ")\n .", ":not(.", ") {\n .", " {\n position: relative;\n border: 1px solid ", ";\n }\n }\n"])), ClassName.IS_RESIZING, ClassName.TABLE_CONTAINER, ClassName.HOVERED_DELETE_BUTTON, ClassName.HOVERED_CELL, tableBorderSelectedColor);
55
67
  export var hoveredWarningCell = css(_templateObject20 || (_templateObject20 = _taggedTemplateLiteral(["\n :not(.", ")\n .", ":not(.", ") {\n td.", " {\n background-color: ", " !important; // We need to override the background-color added to the cell\n border: 1px solid ", ";\n }\n }\n"])), ClassName.IS_RESIZING, ClassName.TABLE_CONTAINER, ClassName.HOVERED_DELETE_BUTTON, ClassName.HOVERED_CELL_WARNING, "var(--ds-background-warning, ".concat(Y50, ")"), "var(--ds-border-warning, ".concat(Y200, ")"));
56
- export var resizeHandle = css(_templateObject21 || (_templateObject21 = _taggedTemplateLiteral(["\n .", " {\n .", " {\n background-color: transparent;\n position: absolute;\n width: ", "px;\n height: 100%;\n top: 0;\n right: -", "px;\n cursor: col-resize;\n z-index: ", ";\n }\n\n td.", "::before {\n content: ' ';\n position: absolute;\n left: -2px;\n top: -1px;\n width: ", "px;\n height: calc(100% + 2px);\n background-color: ", ";\n z-index: ", ";\n }\n\n th.", "::before {\n content: ' ';\n left: -2px;\n position: absolute;\n width: ", "px;\n height: calc(100% + ", "px);\n background-color: ", ";\n z-index: ", ";\n top: -", "px;\n }\n\n td.", "::before {\n content: ' ';\n position: absolute;\n right: -1px;\n top: -1px;\n width: ", "px;\n height: calc(100% + 2px);\n background-color: ", ";\n z-index: ", ";\n }\n\n th.", "::before {\n content: ' ';\n right: -1px;\n position: absolute;\n width: ", "px;\n height: calc(100% + ", "px);\n background-color: ", ";\n z-index: ", ";\n top: -", "px;\n }\n\n table\n tr:first-of-type\n th.", "\n .", "::after,\n table\n tr:first-of-type\n td.", "\n .", "::after {\n top: -", "px;\n height: calc(100% + ", "px);\n }\n }\n"])), ClassName.TABLE_CONTAINER, ClassName.RESIZE_HANDLE_DECORATION, resizeHandlerAreaWidth, resizeHandlerAreaWidth / 2, resizeHandlerZIndex, ClassName.WITH_RESIZE_LINE, resizeLineWidth, tableBorderSelectedColor, columnControlsZIndex * 2, ClassName.WITH_RESIZE_LINE, resizeLineWidth, tableToolbarSize + tableCellBorderWidth, tableBorderSelectedColor, columnControlsZIndex * 2, tableToolbarSize + tableCellBorderWidth, ClassName.WITH_RESIZE_LINE_LAST_COLUMN, resizeLineWidth, tableBorderSelectedColor, columnControlsZIndex * 2, ClassName.WITH_RESIZE_LINE_LAST_COLUMN, resizeLineWidth, tableToolbarSize + tableCellBorderWidth, tableBorderSelectedColor, columnControlsZIndex * 2, tableToolbarSize + tableCellBorderWidth, ClassName.WITH_RESIZE_LINE, ClassName.RESIZE_HANDLE_DECORATION, ClassName.WITH_RESIZE_LINE, ClassName.RESIZE_HANDLE_DECORATION, tableToolbarSize + tableCellBorderWidth, tableToolbarSize + tableCellBorderWidth);
68
+ export var resizeHandle = function resizeHandle(props) {
69
+ return css(_templateObject21 || (_templateObject21 = _taggedTemplateLiteral(["\n .", " {\n .", " {\n background-color: transparent;\n position: absolute;\n width: ", "px;\n height: 100%;\n top: 0;\n right: -", "px;\n cursor: col-resize;\n z-index: ", ";\n }\n\n td.", "::before {\n content: ' ';\n position: absolute;\n left: -2px;\n top: -1px;\n width: ", "px;\n height: calc(100% + 2px);\n background-color: ", ";\n z-index: ", ";\n }\n\n th.", "::before {\n content: ' ';\n left: -2px;\n position: absolute;\n width: ", "px;\n height: calc(100% + ", "px);\n background-color: ", ";\n z-index: ", ";\n top: -", "px;\n }\n\n td.", "::before {\n content: ' ';\n position: absolute;\n right: -1px;\n top: -1px;\n width: ", "px;\n height: calc(100% + 2px);\n background-color: ", ";\n z-index: ", ";\n }\n\n th.", "::before {\n content: ' ';\n right: -1px;\n position: absolute;\n width: ", "px;\n height: calc(100% + ", "px);\n background-color: ", ";\n z-index: ", ";\n top: -", "px;\n }\n\n table\n tr:first-of-type\n th.", "\n .", "::after,\n table\n tr:first-of-type\n td.", "\n .", "::after {\n top: -", "px;\n height: calc(100% + ", "px);\n }\n }\n"])), ClassName.TABLE_CONTAINER, ClassName.RESIZE_HANDLE_DECORATION, resizeHandlerAreaWidth, resizeHandlerAreaWidth / 2, resizeHandlerZIndex, ClassName.WITH_RESIZE_LINE, resizeLineWidth, tableBorderSelectedColor(props), columnControlsZIndex * 2, ClassName.WITH_RESIZE_LINE, resizeLineWidth, tableToolbarSize + tableCellBorderWidth, tableBorderSelectedColor(props), columnControlsZIndex * 2, tableToolbarSize + tableCellBorderWidth, ClassName.WITH_RESIZE_LINE_LAST_COLUMN, resizeLineWidth, tableBorderSelectedColor(props), columnControlsZIndex * 2, ClassName.WITH_RESIZE_LINE_LAST_COLUMN, resizeLineWidth, tableToolbarSize + tableCellBorderWidth, tableBorderSelectedColor(props), columnControlsZIndex * 2, tableToolbarSize + tableCellBorderWidth, ClassName.WITH_RESIZE_LINE, ClassName.RESIZE_HANDLE_DECORATION, ClassName.WITH_RESIZE_LINE, ClassName.RESIZE_HANDLE_DECORATION, tableToolbarSize + tableCellBorderWidth, tableToolbarSize + tableCellBorderWidth);
70
+ };
package/dist/esm/version.json CHANGED
@@ -1,5 +1,5 @@
1
1
  {
2
2
  "name": "@atlaskit/editor-plugin-table",
3
- "version": "2.5.0",
3
+ "version": "2.5.1",
4
4
  "sideEffects": false
5
5
  }
package/dist/types/plugins/table/ui/consts.d.ts CHANGED
@@ -7,12 +7,16 @@ export declare const tableToolbarColor: import("@atlaskit/theme").ThemedValue<"v
7
7
  export declare const tableTextColor: import("@atlaskit/theme").ThemedValue<"var(--ds-text-subtlest)">;
8
8
  export declare const tableBorderColor: import("@atlaskit/theme").ThemedValue<"var(--ds-background-accent-gray-subtler)">;
9
9
  export declare const tableFloatingControlsColor: "var(--ds-background-neutral)";
10
- export declare const tableCellSelectedColor: "var(--ds-blanket-selected)";
11
- export declare const tableToolbarSelectedColor: "var(--ds-background-selected-bold)";
12
- export declare const tableBorderSelectedColor: "var(--ds-border-selected)";
13
- export declare const tableCellDeleteColor: "var(--ds-blanket-danger)";
14
- export declare const tableBorderDeleteColor: "var(--ds-border-danger)";
15
- export declare const tableToolbarDeleteColor: "var(--ds-background-danger-bold)";
10
+ export declare const tableCellSelectedColor: import("@atlaskit/theme").ThemedValue<"var(--ds-blanket-selected)">;
11
+ export declare const tableToolbarSelectedColor: import("@atlaskit/theme").ThemedValue<"var(--ds-background-selected-pressed)">;
12
+ export declare const tableBorderSelectedColor: import("@atlaskit/theme").ThemedValue<"var(--ds-border-focused)">;
13
+ export declare const tableCellSelectedDeleteIconColor: import("@atlaskit/theme").ThemedValue<"var(--ds-icon-subtle)">;
14
+ export declare const tableCellSelectedDeleteIconBackground: import("@atlaskit/theme").ThemedValue<"var(--ds-background-accent-gray-subtlest)">;
15
+ export declare const tableCellDeleteColor: import("@atlaskit/theme").ThemedValue<"var(--ds-blanket-danger)">;
16
+ export declare const tableBorderDeleteColor: import("@atlaskit/theme").ThemedValue<"var(--ds-border-danger)">;
17
+ export declare const tableToolbarDeleteColor: import("@atlaskit/theme").ThemedValue<"var(--ds-background-danger-pressed)">;
18
+ export declare const tableCellHoverDeleteIconColor: import("@atlaskit/theme").ThemedValue<"var(--ds-icon-inverse)">;
19
+ export declare const tableCellHoverDeleteIconBackground: import("@atlaskit/theme").ThemedValue<"var(--ds-background-danger-bold)">;
16
20
  export declare const tableBorderRadiusSize = 3;
17
21
  export declare const tablePadding = 8;
18
22
  export declare const tableScrollbarOffset = 15;
package/dist/types/plugins/table/ui/ui-styles.d.ts CHANGED
@@ -1,15 +1,15 @@
1
1
  import { ThemeProps } from '@atlaskit/theme/types';
2
2
  export declare const InsertMarker: (props: ThemeProps, cssString?: string) => import("@emotion/react").SerializedStyles;
3
3
  export declare const HeaderButton: (props: ThemeProps, cssString?: string) => import("@emotion/react").SerializedStyles;
4
- export declare const HeaderButtonHover: () => import("@emotion/react").SerializedStyles;
5
- export declare const HeaderButtonDanger: () => import("@emotion/react").SerializedStyles;
6
- export declare const insertColumnButtonWrapper: import("@emotion/react").SerializedStyles;
7
- export declare const insertRowButtonWrapper: import("@emotion/react").SerializedStyles;
4
+ export declare const HeaderButtonHover: (props: ThemeProps) => import("@emotion/react").SerializedStyles;
5
+ export declare const HeaderButtonDanger: (props: ThemeProps) => import("@emotion/react").SerializedStyles;
6
+ export declare const insertColumnButtonWrapper: (props: ThemeProps) => import("@emotion/react").SerializedStyles;
7
+ export declare const insertRowButtonWrapper: (props: ThemeProps) => import("@emotion/react").SerializedStyles;
8
8
  export declare const columnControlsLineMarker: () => import("@emotion/react").SerializedStyles;
9
- export declare const DeleteButton: import("@emotion/react").SerializedStyles;
9
+ export declare const DeleteButton: (props: ThemeProps) => import("@emotion/react").SerializedStyles;
10
10
  export declare const OverflowShadow: (props: ThemeProps) => import("@emotion/react").SerializedStyles;
11
11
  export declare const columnControlsDecoration: (props: ThemeProps) => import("@emotion/react").SerializedStyles;
12
- export declare const hoveredDeleteButton: import("@emotion/react").SerializedStyles;
13
- export declare const hoveredCell: import("@emotion/react").SerializedStyles;
12
+ export declare const hoveredDeleteButton: (props: ThemeProps) => import("@emotion/react").SerializedStyles;
13
+ export declare const hoveredCell: (props: ThemeProps) => import("@emotion/react").SerializedStyles;
14
14
  export declare const hoveredWarningCell: import("@emotion/react").SerializedStyles;
15
- export declare const resizeHandle: import("@emotion/react").SerializedStyles;
15
+ export declare const resizeHandle: (props: ThemeProps) => import("@emotion/react").SerializedStyles;