@atlaskit/editor-plugin-table 18.1.4 → 18.1.5

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 (23) hide show
  1. package/CHANGELOG.md +8 -0
  2. package/dist/cjs/ui/FloatingContextualButton/styles.js +8 -9
  3. package/dist/cjs/ui/FloatingContextualMenu/styles.js +1 -2
  4. package/dist/cjs/ui/FloatingDragMenu/styles.js +1 -2
  5. package/dist/cjs/ui/common-styles.js +2 -3
  6. package/dist/cjs/ui/consts.js +17 -18
  7. package/dist/cjs/ui/icons/DragInMotionIcon.js +1 -1
  8. package/dist/cjs/ui/ui-styles.js +10 -11
  9. package/dist/es2019/ui/FloatingContextualButton/styles.js +8 -9
  10. package/dist/es2019/ui/FloatingContextualMenu/styles.js +4 -5
  11. package/dist/es2019/ui/FloatingDragMenu/styles.js +3 -4
  12. package/dist/es2019/ui/common-styles.js +26 -28
  13. package/dist/es2019/ui/consts.js +18 -19
  14. package/dist/es2019/ui/icons/DragInMotionIcon.js +1 -1
  15. package/dist/es2019/ui/ui-styles.js +25 -38
  16. package/dist/esm/ui/FloatingContextualButton/styles.js +8 -9
  17. package/dist/esm/ui/FloatingContextualMenu/styles.js +1 -2
  18. package/dist/esm/ui/FloatingDragMenu/styles.js +1 -2
  19. package/dist/esm/ui/common-styles.js +2 -3
  20. package/dist/esm/ui/consts.js +18 -19
  21. package/dist/esm/ui/icons/DragInMotionIcon.js +1 -1
  22. package/dist/esm/ui/ui-styles.js +11 -12
  23. package/package.json +1 -2
package/dist/es2019/ui/FloatingContextualButton/styles.js CHANGED
@@ -1,12 +1,11 @@
1
1
  // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
2
2
  import { css } from '@emotion/react';
3
- import { N0, N20, N30A, N700 } from '@atlaskit/theme/colors';
4
3
  import { contextualMenuTriggerSize } from '../consts';
5
4
  export const tableFloatingCellButtonStyles = () => css({
6
5
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
7
6
  '> div': {
8
7
  // Sits behind button to provide surface-color background
9
- background: `var(--ds-surface, ${N20})`,
8
+ background: "var(--ds-surface, #FFFFFF)",
10
9
  borderRadius: "var(--ds-radius-small, 3px)",
11
10
  display: 'flex',
12
11
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
@@ -16,10 +15,10 @@ export const tableFloatingCellButtonStyles = () => css({
16
15
  },
17
16
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
18
17
  '&& button': {
19
- background: "var(--ds-background-neutral, none)",
18
+ background: "var(--ds-background-neutral, #0515240F)",
20
19
  flexDirection: 'column',
21
20
  margin: "var(--ds-space-025, 2px)",
22
- outline: `2px solid ${`var(--ds-surface, ${N0})`}`,
21
+ outline: `2px solid ${"var(--ds-surface, #FFFFFF)"}`,
23
22
  borderRadius: '1px',
24
23
  padding: 0,
25
24
  height: 'calc(100% - 4px)',
@@ -27,11 +26,11 @@ export const tableFloatingCellButtonStyles = () => css({
27
26
  },
28
27
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
29
28
  '&& button:hover': {
30
- background: `var(--ds-background-neutral-hovered, ${N30A})`
29
+ background: "var(--ds-background-neutral-hovered, #0B120E24)"
31
30
  },
32
31
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
33
32
  '&& button:active': {
34
- background: "var(--ds-background-neutral-pressed, rgba(179, 212, 255, 0.6))"
33
+ background: "var(--ds-background-neutral-pressed, #080F214A)"
35
34
  },
36
35
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
37
36
  '&& button > span': {
@@ -45,14 +44,14 @@ export const tableFloatingCellButtonStyles = () => css({
45
44
  export const tableFloatingCellButtonSelectedStyles = () => css({
46
45
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
47
46
  '&& button': {
48
- background: `var(--ds-background-selected, ${N700})`
47
+ background: "var(--ds-background-selected, #E9F2FE)"
49
48
  },
50
49
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
51
50
  '&& button:hover': {
52
- background: `var(--ds-background-selected-hovered, ${N700})`
51
+ background: "var(--ds-background-selected-hovered, #CFE1FD)"
53
52
  },
54
53
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
55
54
  '&& button:active': {
56
- background: `var(--ds-background-selected-pressed, ${N700})`
55
+ background: "var(--ds-background-selected-pressed, #8FB8F6)"
57
56
  }
58
57
  });
package/dist/es2019/ui/FloatingContextualMenu/styles.js CHANGED
@@ -1,7 +1,6 @@
1
1
  // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
2
2
  import { css } from '@emotion/react';
3
3
  import { tableBackgroundBorderColor } from '@atlaskit/adf-schema';
4
- import { N60A, N90 } from '@atlaskit/theme/colors';
5
4
  import { TableCssClassName as ClassName } from '../../types';
6
5
  import { contextualMenuDropdownWidth, contextualMenuDropdownWidthDnD } from '../consts';
7
6
  export const cellColourPreviewStyles = selectedColor => css({
@@ -15,8 +14,8 @@ export const tablePopupStyles = (isDragAndDropEnabled
15
14
  ) => css`
16
15
  .${ClassName.CONTEXTUAL_SUBMENU} {
17
16
  border-radius: ${"var(--ds-radius-small, 3px)"};
18
- background: ${"var(--ds-surface-overlay, white)"};
19
- box-shadow: ${`var(--ds-shadow-overlay, ${`0 4px 8px -2px ${N60A}, 0 0 1px ${N60A}`})`};
17
+ background: ${"var(--ds-surface-overlay, #FFFFFF)"};
18
+ box-shadow: ${"var(--ds-shadow-overlay, 0px 8px 12px #1E1F2126, 0px 0px 1px #1E1F214f)"};
20
19
  display: block;
21
20
  position: absolute;
22
21
  top: 0;
@@ -44,7 +43,7 @@ export const tablePopupStyles = (isDragAndDropEnabled
44
43
  content: '›';
45
44
  margin-left: ${"var(--ds-space-050, 4px)"};
46
45
  line-height: 20px;
47
- color: ${`var(--ds-icon, ${N90})`};
46
+ color: ${"var(--ds-icon, #292A2E)"};
48
47
  }
49
48
  }
50
49
 
@@ -64,7 +63,7 @@ export const tablePopupStyles = (isDragAndDropEnabled
64
63
  content: '›';
65
64
  margin-left: ${"var(--ds-space-050, 4px)"};
66
65
  line-height: 14px;
67
- color: ${`var(--ds-icon, ${N90})`};
66
+ color: ${"var(--ds-icon, #292A2E)"};
68
67
  }
69
68
  }
70
69
  `;
package/dist/es2019/ui/FloatingDragMenu/styles.js CHANGED
@@ -1,7 +1,6 @@
1
1
  // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
2
2
  import { css } from '@emotion/react';
3
3
  import { tableBackgroundBorderColor } from '@atlaskit/adf-schema';
4
- import { N60A, N90 } from '@atlaskit/theme/colors';
5
4
  import { TableCssClassName as ClassName } from '../../types';
6
5
  import { dragMenuDropdownWidth, TABLE_DRAG_MENU_MENU_GROUP_BEFORE_HEIGHT, TABLE_DRAG_MENU_PADDING_TOP, TABLE_DRAG_MENU_SORT_GROUP_HEIGHT } from '../consts';
7
6
  export const cellColourPreviewStyles = selectedColor => css({
@@ -15,8 +14,8 @@ export const cellColourPreviewStyles = selectedColor => css({
15
14
  export const dragMenuBackgroundColorStyles = () => css`
16
15
  .${ClassName.DRAG_SUBMENU} {
17
16
  border-radius: ${"var(--ds-radius-small, 3px)"};
18
- background: ${"var(--ds-surface-overlay, white)"};
19
- box-shadow: ${`var(--ds-shadow-overlay, ${`0 4px 8px -2px ${N60A}, 0 0 1px ${N60A}`})`};
17
+ background: ${"var(--ds-surface-overlay, #FFFFFF)"};
18
+ box-shadow: ${"var(--ds-shadow-overlay, 0px 8px 12px #1E1F2126, 0px 0px 1px #1E1F214f)"};
20
19
  display: block;
21
20
  position: absolute;
22
21
  top: ${TABLE_DRAG_MENU_PADDING_TOP + TABLE_DRAG_MENU_SORT_GROUP_HEIGHT + TABLE_DRAG_MENU_MENU_GROUP_BEFORE_HEIGHT}px; /* move the submenu down when 'sort increasing/decreasing' appear before background color picker */
@@ -44,7 +43,7 @@ export const dragMenuBackgroundColorStyles = () => css`
44
43
  content: '›';
45
44
  margin-left: ${"var(--ds-space-050, 4px)"};
46
45
  line-height: 14px;
47
- color: ${`var(--ds-icon, ${N90})`};
46
+ color: ${"var(--ds-icon, #292A2E)"};
48
47
  }
49
48
  }
50
49
  `;
package/dist/es2019/ui/common-styles.js CHANGED
@@ -12,7 +12,6 @@ import { akEditorSelectedNodeClassName, akEditorSmallZIndex, akEditorStickyHeade
12
12
  import { scrollbarStyles } from '@atlaskit/editor-shared-styles/scrollbar';
13
13
  import { hideNativeBrowserTextSelectionStyles } from '@atlaskit/editor-shared-styles/selection';
14
14
  import { fg } from '@atlaskit/platform-feature-flags';
15
- import { N0, N40A, R500 } from '@atlaskit/theme/colors';
16
15
  import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
17
16
  import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
18
17
  import { SORTING_ICON_CLASS_NAME } from '../pm-plugins/view-mode-sort/consts';
@@ -36,7 +35,7 @@ const numberedColumnButtonSelectedStyles = `
36
35
  background-color: ${tableToolbarSelectedColor};
37
36
  position: relative;
38
37
  z-index: ${akEditorUnitZIndex};
39
- color: ${`var(--ds-text-selected, ${N0})`};
38
+ color: ${"var(--ds-text-selected, #1868DB)"};
40
39
  `;
41
40
  const rangeSelectionStyles = `
42
41
  .${ClassName.NODEVIEW_WRAPPER}.${akEditorSelectedNodeClassName} table tbody tr {
@@ -284,7 +283,7 @@ const baseTableStylesWithoutSharedStyle = props => {
284
283
 
285
284
  position: fixed !important;
286
285
  z-index: ${akEditorStickyHeaderZIndex} !important;
287
- box-shadow: 0px -${stickyRowOffsetTop}px ${"var(--ds-surface, white)"};
286
+ box-shadow: 0px -${stickyRowOffsetTop}px ${"var(--ds-surface, #FFFFFF)"};
288
287
  border-right: 0 none;
289
288
  /* top set by NumberColumn component */
290
289
  }
@@ -293,7 +292,7 @@ const baseTableStylesWithoutSharedStyle = props => {
293
292
  position: fixed !important;
294
293
  /* needs to be above row controls */
295
294
  z-index: ${akEditorSmallZIndex} !important;
296
- background: ${"var(--ds-surface, white)"};
295
+ background: ${"var(--ds-surface, #FFFFFF)"};
297
296
 
298
297
  width: ${tableToolbarSize}px;
299
298
  height: ${tableToolbarSize}px;
@@ -317,13 +316,13 @@ const baseTableStylesWithoutSharedStyle = props => {
317
316
  position: fixed !important;
318
317
  z-index: ${akEditorStickyHeaderZIndex} !important;
319
318
  display: flex;
320
- border-left: ${tableToolbarSize}px solid ${"var(--ds-surface, white)"};
319
+ border-left: ${tableToolbarSize}px solid ${"var(--ds-surface, #FFFFFF)"};
321
320
  margin-left: -${tableToolbarSize}px;
322
321
  }
323
322
 
324
323
  .${ClassName.TABLE_STICKY} col:first-of-type {
325
324
  /* moving rows out of a table layout does weird things in Chrome */
326
- border-right: 1px solid ${"var(--ds-surface, green)"};
325
+ border-right: 1px solid ${"var(--ds-surface, #FFFFFF)"};
327
326
  }
328
327
 
329
328
  tr.sticky {
@@ -340,9 +339,9 @@ const baseTableStylesWithoutSharedStyle = props => {
340
339
  grid-auto-flow: column;
341
340
 
342
341
  /* background for where controls apply */
343
- background: ${"var(--ds-surface, white)"};
342
+ background: ${"var(--ds-surface, #FFFFFF)"};
344
343
  box-sizing: content-box;
345
- box-shadow: 0 6px 4px -4px ${`var(--ds-shadow-overflow-perimeter, ${N40A})`};
344
+ box-shadow: 0 6px 4px -4px ${"var(--ds-shadow-overflow-perimeter, #1E1F211f)"};
346
345
 
347
346
  margin-left: -1px;
348
347
 
@@ -544,8 +543,7 @@ const baseTableStylesWithoutSharedStyle = props => {
544
543
  }
545
544
 
546
545
  .${ClassName.CORNER_CONTROLS}.sticky {
547
- border-top: ${tableControlsSpacing - tableToolbarSize}px solid
548
- ${"var(--ds-surface, white)"};
546
+ border-top: ${tableControlsSpacing - tableToolbarSize}px solid ${"var(--ds-surface, #FFFFFF)"};
549
547
  }
550
548
 
551
549
  ${sentinelStyles}
@@ -757,7 +755,7 @@ const baseTableStylesWithoutSharedStyle = props => {
757
755
  position: absolute;
758
756
  bottom: -3px;
759
757
  left: 2px;
760
- background-color: ${"var(--ds-background-accent-gray-subtler, #C1C7D0)"};
758
+ background-color: ${"var(--ds-background-accent-gray-subtler, #DDDEE1)"};
761
759
  height: 4px;
762
760
  width: 4px;
763
761
  border-radius: 50%;
@@ -780,7 +778,7 @@ const baseTableStylesWithoutSharedStyle = props => {
780
778
  }
781
779
 
782
780
  .${ClassName.DRAG_COLUMN_FLOATING_INSERT_DOT} {
783
- background-color: ${"var(--ds-background-accent-gray-subtler, #C1C7D0)"};
781
+ background-color: ${"var(--ds-background-accent-gray-subtler, #DDDEE1)"};
784
782
  height: 4px;
785
783
  width: 4px;
786
784
  border-radius: 50%;
@@ -813,7 +811,7 @@ const baseTableStylesWithoutSharedStyle = props => {
813
811
  padding: 0;
814
812
  border-radius: 6px;
815
813
  width: max-content;
816
- border: 2px solid ${`var(--ds-surface, ${N0})`};
814
+ border: 2px solid ${"var(--ds-surface, #FFFFFF)"};
817
815
 
818
816
  display: flex;
819
817
  justify-content: center;
@@ -830,13 +828,13 @@ const baseTableStylesWithoutSharedStyle = props => {
830
828
  cursor: pointer;
831
829
  & svg {
832
830
  & > rect.${ClassName.DRAG_HANDLE_MINIMISED} {
833
- fill: ${"var(--ds-background-accent-gray-subtler, #DCDFE4)"};
831
+ fill: ${"var(--ds-background-accent-gray-subtler, #DDDEE1)"};
834
832
  }
835
833
  & > rect {
836
- fill: ${"var(--ds-background-accent-gray-subtlest, #F4F5F7)"};
834
+ fill: ${"var(--ds-background-accent-gray-subtlest, #F0F1F2)"};
837
835
  }
838
836
  & > g > rect {
839
- fill: ${"var(--ds-icon-disabled, #BFDBF847)"};
837
+ fill: ${"var(--ds-icon-disabled, #080F214A)"};
840
838
  }
841
839
  }
842
840
  }
@@ -844,20 +842,20 @@ const baseTableStylesWithoutSharedStyle = props => {
844
842
  &:not(.${ClassName.DRAG_HANDLE_DISABLED}) {
845
843
  & svg {
846
844
  rect {
847
- fill: ${"var(--ds-background-accent-gray-subtler, #DCDFE4)"};
845
+ fill: ${"var(--ds-background-accent-gray-subtler, #DDDEE1)"};
848
846
  }
849
847
  g {
850
- fill: ${"var(--ds-icon-subtle, #626f86)"};
848
+ fill: ${"var(--ds-icon-subtle, #505258)"};
851
849
  }
852
850
  }
853
851
 
854
852
  &:hover {
855
853
  svg {
856
854
  rect {
857
- fill: ${"var(--ds-background-accent-blue-subtle, #579DFF)"};
855
+ fill: ${"var(--ds-background-accent-blue-subtle, #669DF1)"};
858
856
  }
859
857
  g {
860
- fill: ${"var(--ds-icon-inverse, #FFF)"};
858
+ fill: ${"var(--ds-icon-inverse, #FFFFFF)"};
861
859
  }
862
860
  }
863
861
  }
@@ -868,7 +866,7 @@ const baseTableStylesWithoutSharedStyle = props => {
868
866
 
869
867
  &.selected {
870
868
  :focus {
871
- outline: 2px solid ${"var(--ds-border-focused, #2684FF)"};
869
+ outline: 2px solid ${"var(--ds-border-focused, #4688EC)"};
872
870
  outline-offset: 1px;
873
871
  }
874
872
 
@@ -878,10 +876,10 @@ const baseTableStylesWithoutSharedStyle = props => {
878
876
 
879
877
  svg {
880
878
  rect {
881
- fill: ${"var(--ds-background-accent-blue-subtle, #579dff)"};
879
+ fill: ${"var(--ds-background-accent-blue-subtle, #669DF1)"};
882
880
  }
883
881
  g {
884
- fill: ${"var(--ds-icon-inverse, #fff)"};
882
+ fill: ${"var(--ds-icon-inverse, #FFFFFF)"};
885
883
  }
886
884
  }
887
885
  }
@@ -889,10 +887,10 @@ const baseTableStylesWithoutSharedStyle = props => {
889
887
  &.danger {
890
888
  svg {
891
889
  rect {
892
- fill: ${"var(--ds-background-accent-red-subtler-pressed, #F87462)"};
890
+ fill: ${"var(--ds-background-accent-red-subtler-pressed, #FD9891)"};
893
891
  }
894
892
  g {
895
- fill: ${"var(--ds-border-inverse, #FFF)"};
893
+ fill: ${"var(--ds-border-inverse, #FFFFFF)"};
896
894
  }
897
895
  }
898
896
  }
@@ -947,7 +945,7 @@ const baseTableStylesWithoutSharedStyle = props => {
947
945
  display: block;
948
946
  height: 33px;
949
947
  width: 100%;
950
- background-color: ${"var(--ds-surface, white)"};
948
+ background-color: ${"var(--ds-surface, #FFFFFF)"};
951
949
  position: absolute;
952
950
 
953
951
  /* the extra pixel is accounting for borders */
@@ -1001,7 +999,7 @@ const baseTableStylesWithoutSharedStyle = props => {
1001
999
  background-color: ${tableToolbarDeleteColor};
1002
1000
  border: 1px solid ${tableBorderDeleteColor};
1003
1001
  border-left: 0;
1004
- color: ${`var(--ds-text-danger, ${R500})`};
1002
+ color: ${"var(--ds-text-danger, #AE2E24)"};
1005
1003
  position: relative;
1006
1004
  z-index: ${akEditorUnitZIndex};
1007
1005
  }
@@ -1013,7 +1011,7 @@ const baseTableStylesWithoutSharedStyle = props => {
1013
1011
  background-color: ${tableToolbarDeleteColor};
1014
1012
  border: 1px solid ${tableBorderDeleteColor};
1015
1013
  border-left: 0;
1016
- color: ${`var(--ds-text-danger, ${R500})`};
1014
+ color: ${"var(--ds-text-danger, #AE2E24)"};
1017
1015
  position: relative;
1018
1016
  z-index: ${akEditorUnitZIndex};
1019
1017
  }
package/dist/es2019/ui/consts.js CHANGED
@@ -2,8 +2,7 @@
2
2
  // Entry file in package.json
3
3
 
4
4
  import { tableCellBorderWidth, tableMarginTop } from '@atlaskit/editor-common/styles';
5
- import { akEditorTableBorder, akEditorTableBorderSelected, akEditorTableCellBlanketDeleted, akEditorTableCellBlanketSelected, akEditorTableCellOnStickyHeaderZIndex, akEditorTableHeaderCellBackground, akEditorTableToolbar, akEditorTableToolbarSize, akEditorUnitZIndex, akRichMediaResizeZIndex } from '@atlaskit/editor-shared-styles';
6
- import { B200, N0, N20, N200, N20A, N300, R300, R400, R75 } from '@atlaskit/theme/colors';
5
+ import { akEditorTableCellOnStickyHeaderZIndex, akEditorTableToolbarSize, akEditorUnitZIndex, akRichMediaResizeZIndex } from '@atlaskit/editor-shared-styles';
7
6
  import { RESIZE_HANDLE_AREA_DECORATION_GAP } from '../types';
8
7
 
9
8
  /**
@@ -11,25 +10,25 @@ import { RESIZE_HANDLE_AREA_DECORATION_GAP } from '../types';
11
10
  */
12
11
 
13
12
  // TODO: DSP-4135 - Remove these tokens once the new elevation tokens are available
14
- export const tableCellBackgroundColor = `var(--ds-surface, ${N0})`;
15
- export const tableHeaderCellBackgroundColor = `var(--ds-background-accent-gray-subtlest, ${akEditorTableHeaderCellBackground})`;
16
- export const tableToolbarColor = `var(--ds-background-neutral-subtle, ${akEditorTableToolbar})`;
17
- export const tableTextColor = `var(--ds-text-subtlest, ${N200})`;
18
- export const tableBorderColor = `var(--ds-background-accent-gray-subtler, ${akEditorTableBorder})`;
19
- export const tableFloatingControlsColor = `var(--ds-background-neutral, ${N20})`;
13
+ export const tableCellBackgroundColor = "var(--ds-surface, #FFFFFF)";
14
+ export const tableHeaderCellBackgroundColor = "var(--ds-background-accent-gray-subtlest, #F0F1F2)";
15
+ export const tableToolbarColor = "var(--ds-background-neutral-subtle, #00000000)";
16
+ export const tableTextColor = "var(--ds-text-subtlest, #6B6E76)";
17
+ export const tableBorderColor = "var(--ds-background-accent-gray-subtler, #DDDEE1)";
18
+ export const tableFloatingControlsColor = "var(--ds-background-neutral, #0515240F)";
20
19
 
21
20
  // TODO: DSP-4461 - Remove these tokens once the new elevation tokens are available
22
- export const tableCellSelectedColor = `var(--ds-blanket-selected, ${akEditorTableCellBlanketSelected})`;
23
- export const tableHeaderCellSelectedColor = `var(--ds-background-selected-pressed, ${B200})`;
24
- export const tableToolbarSelectedColor = `var(--ds-background-selected-pressed, ${B200})`;
25
- export const tableBorderSelectedColor = `var(--ds-border-focused, ${akEditorTableBorderSelected})`;
26
- export const tableCellSelectedDeleteIconColor = `var(--ds-icon-subtle, ${N300})`;
27
- export const tableCellSelectedDeleteIconBackground = `var(--ds-background-accent-gray-subtlest, ${N20A})`;
28
- export const tableCellDeleteColor = `var(--ds-blanket-danger, ${akEditorTableCellBlanketDeleted})`;
29
- export const tableBorderDeleteColor = `var(--ds-border-danger, ${R400})`;
30
- export const tableToolbarDeleteColor = `var(--ds-background-danger-pressed, ${R75})`;
31
- export const tableCellHoverDeleteIconColor = "var(--ds-icon-inverse, white)";
32
- export const tableCellHoverDeleteIconBackground = `var(--ds-background-danger-bold, ${R300})`;
21
+ export const tableCellSelectedColor = "var(--ds-blanket-selected, #388BFF14)";
22
+ export const tableHeaderCellSelectedColor = "var(--ds-background-selected-pressed, #8FB8F6)";
23
+ export const tableToolbarSelectedColor = "var(--ds-background-selected-pressed, #8FB8F6)";
24
+ export const tableBorderSelectedColor = "var(--ds-border-focused, #4688EC)";
25
+ export const tableCellSelectedDeleteIconColor = "var(--ds-icon-subtle, #505258)";
26
+ export const tableCellSelectedDeleteIconBackground = "var(--ds-background-accent-gray-subtlest, #F0F1F2)";
27
+ export const tableCellDeleteColor = "var(--ds-blanket-danger, #EF5C4814)";
28
+ export const tableBorderDeleteColor = "var(--ds-border-danger, #E2483D)";
29
+ export const tableToolbarDeleteColor = "var(--ds-background-danger-pressed, #FFB8B2)";
30
+ export const tableCellHoverDeleteIconColor = "var(--ds-icon-inverse, #FFFFFF)";
31
+ export const tableCellHoverDeleteIconBackground = "var(--ds-background-danger-bold, #C9372C)";
33
32
  export const tableBorderRadiusSize = 3;
34
33
  export const tablePadding = 8;
35
34
  export const tableScrollbarOffset = 15;
package/dist/es2019/ui/icons/DragInMotionIcon.js CHANGED
@@ -16,7 +16,7 @@ export const DragInMotionIcon = ({
16
16
  width: "26",
17
17
  height: "18",
18
18
  rx: "5",
19
- fill: "var(--ds-background-accent-blue-subtle, #579DFF)"
19
+ fill: "var(--ds-background-accent-blue-subtle, #669DF1)"
20
20
  }), /*#__PURE__*/React.createElement("rect", {
21
21
  x: "9",
22
22
  y: "6",
package/dist/es2019/ui/ui-styles.js CHANGED
@@ -2,8 +2,7 @@
2
2
  // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
3
3
  import { css } from '@emotion/react';
4
4
  import { tableCellBorderWidth, tableMarginTop, tableMarginTopWithControl } from '@atlaskit/editor-common/styles';
5
- import { akEditorShadowZIndex, akEditorTableBorder, akEditorTableNumberColumnWidth, akEditorUnitZIndex } from '@atlaskit/editor-shared-styles';
6
- import { B300, N0, N300, N40A, N60A, Y200, Y50 } from '@atlaskit/theme/colors';
5
+ import { akEditorShadowZIndex, akEditorTableNumberColumnWidth, akEditorUnitZIndex } from '@atlaskit/editor-shared-styles';
7
6
  import { TableCssClassName as ClassName } from '../types';
8
7
  import { columnControlsDecorationHeight, columnControlsSelectedZIndex, columnControlsZIndex, dragTableInsertColumnButtonSize, insertLineWidth, lineMarkerSize, resizeHandlerAreaWidth, resizeHandlerZIndex, resizeLineWidth, tableBorderColor, tableBorderDeleteColor, tableBorderSelectedColor, tableCellDeleteColor, tableCellHoverDeleteIconBackground, tableCellHoverDeleteIconColor, tableCellSelectedDeleteIconBackground, tableCellSelectedDeleteIconColor, tableDeleteButtonSize, tableHeaderCellBackgroundColor, tableInsertColumnButtonSize, tableOverflowShadowWidthWide, tableToolbarDeleteColor, tableToolbarSelectedColor, tableToolbarSize } from './consts';
9
8
  const InsertLine = cssString => css`
@@ -83,14 +82,14 @@ export const HeaderButton = cssString => css`
83
82
  }
84
83
 
85
84
  .active .${ClassName.CONTROLS_BUTTON} {
86
- color: ${`var(--ds-icon-inverse, ${N0})`};
85
+ color: ${"var(--ds-icon-inverse, #FFFFFF)"};
87
86
  background-color: ${tableToolbarSelectedColor};
88
87
  border-color: ${tableBorderSelectedColor};
89
88
  }
90
89
  `;
91
90
  export const HeaderButtonHover = () => css`
92
91
  .${ClassName.CONTROLS_BUTTON}:hover {
93
- color: ${`var(--ds-icon-inverse, ${N0})`};
92
+ color: ${"var(--ds-icon-inverse, #FFFFFF)"};
94
93
  background-color: ${tableToolbarSelectedColor};
95
94
  border-color: ${tableBorderSelectedColor};
96
95
  cursor: pointer;
@@ -116,9 +115,9 @@ const InsertButton = () => css`
116
115
  }
117
116
  .${ClassName.CONTROLS_INSERT_BUTTON} {
118
117
  ${Button(`
119
- background: ${"var(--ds-surface-overlay, white)"};
120
- box-shadow: ${`var(--ds-shadow-overlay, ${`0 4px 8px -2px ${N60A}, 0 0 1px ${N60A}`})`};
121
- color: ${`var(--ds-icon, ${N300})`};
118
+ background: ${"var(--ds-surface-overlay, #FFFFFF)"};
119
+ box-shadow: ${"var(--ds-shadow-overlay, 0px 8px 12px #1E1F2126, 0px 0px 1px #1E1F214f)"};
120
+ color: ${"var(--ds-icon, #292A2E)"};
122
121
  `)}
123
122
  }
124
123
  .${ClassName.CONTROLS_INSERT_LINE} {
@@ -130,8 +129,8 @@ const InsertButton = () => css`
130
129
  `;
131
130
  const InsertButtonHover = () => css`
132
131
  .${ClassName.CONTROLS_INSERT_BUTTON}:hover {
133
- background: ${`var(--ds-background-brand-bold, ${B300})`};
134
- color: ${"var(--ds-icon-inverse, white)"};
132
+ background: ${"var(--ds-background-brand-bold, #1868DB)"};
133
+ color: ${"var(--ds-icon-inverse, #FFFFFF)"};
135
134
  cursor: pointer;
136
135
  }
137
136
  `;
@@ -157,9 +156,9 @@ export const dragInsertButtonWrapper = () => css`
157
156
 
158
157
  .${ClassName.DRAG_CONTROLS_INSERT_BUTTON} {
159
158
  ${Button(`
160
- background: ${"var(--ds-surface-overlay, white)"};
161
- color: ${`var(--ds-icon, ${N300})`};
162
- border: 1px solid ${"var(--ds-background-accent-gray-subtler, #C1C7D0)"};
159
+ background: ${"var(--ds-surface-overlay, #FFFFFF)"};
160
+ color: ${"var(--ds-icon, #292A2E)"};
161
+ border: 1px solid ${"var(--ds-background-accent-gray-subtler, #DDDEE1)"};
163
162
  border-radius: 50%;
164
163
  height: ${dragTableInsertColumnButtonSize}px;
165
164
  width: ${dragTableInsertColumnButtonSize}px;
@@ -167,9 +166,9 @@ export const dragInsertButtonWrapper = () => css`
167
166
  }
168
167
 
169
168
  .${ClassName.DRAG_CONTROLS_INSERT_BUTTON}:hover {
170
- background: ${`var(--ds-background-brand-bold, ${B300})`};
171
- border: 1px solid ${`var(--ds-background-brand-bold, ${B300})`};
172
- color: ${"var(--ds-icon-inverse, white)"};
169
+ background: ${"var(--ds-background-brand-bold, #1868DB)"};
170
+ border: 1px solid ${"var(--ds-background-brand-bold, #1868DB)"};
171
+ color: ${"var(--ds-icon-inverse, #FFFFFF)"};
173
172
  cursor: pointer;
174
173
  }
175
174
  `;
@@ -193,7 +192,7 @@ export const dragCornerControlButton = () => css`
193
192
  z-index: ${akEditorUnitZIndex * 99};
194
193
 
195
194
  &.active .${ClassName.DRAG_CORNER_BUTTON_INNER} {
196
- background-color: ${"var(--ds-border-selected, #0C66E4)"};
195
+ background-color: ${"var(--ds-border-selected, #1868DB)"};
197
196
  width: 10px;
198
197
  height: 10px;
199
198
  border-width: 2px;
@@ -217,8 +216,8 @@ export const dragCornerControlButton = () => css`
217
216
  }
218
217
 
219
218
  .${ClassName.DRAG_CORNER_BUTTON_INNER} {
220
- border: 1px solid ${"var(--ds-border-inverse, #FFF)"};
221
- background-color: ${"var(--ds-background-accent-gray-subtler, #DCDFE4)"};
219
+ border: 1px solid ${"var(--ds-border-inverse, #FFFFFF)"};
220
+ background-color: ${"var(--ds-background-accent-gray-subtler, #DDDEE1)"};
222
221
  border-radius: 2px;
223
222
  width: 5px;
224
223
  height: 5px;
@@ -285,14 +284,10 @@ export const OverflowShadow = isDragAndDropEnabled => css`
285
284
  }
286
285
  .${ClassName.TABLE_LEFT_SHADOW} {
287
286
  background:
288
- linear-gradient(
289
- to left,
290
- transparent 0,
291
- ${`var(--ds-shadow-overflow-spread, ${N40A})`} 140%
292
- ),
287
+ linear-gradient(to left, transparent 0, ${"var(--ds-shadow-overflow-spread, #1E1F2129)"} 140%),
293
288
  linear-gradient(
294
289
  to right,
295
- ${"var(--ds-shadow-overflow-perimeter, transparent)"} 0px,
290
+ ${"var(--ds-shadow-overflow-perimeter, #1E1F211f)"} 0px,
296
291
  transparent 1px
297
292
  );
298
293
  left: 0px;
@@ -302,16 +297,8 @@ export const OverflowShadow = isDragAndDropEnabled => css`
302
297
  }
303
298
  .${ClassName.TABLE_RIGHT_SHADOW} {
304
299
  background:
305
- linear-gradient(
306
- to right,
307
- transparent 0,
308
- ${`var(--ds-shadow-overflow-spread, ${N40A})`} 140%
309
- ),
310
- linear-gradient(
311
- to left,
312
- ${"var(--ds-shadow-overflow-perimeter, transparent)"} 0px,
313
- transparent 1px
314
- );
300
+ linear-gradient(to right, transparent 0, ${"var(--ds-shadow-overflow-spread, #1E1F2129)"} 140%),
301
+ linear-gradient(to left, ${"var(--ds-shadow-overflow-perimeter, #1E1F211f)"} 0px, transparent 1px);
315
302
  left: calc(100% - ${tableOverflowShadowWidthWide}px);
316
303
  }
317
304
  .${ClassName.WITH_CONTROLS} {
@@ -366,7 +353,7 @@ const columnHeaderButton = cssString => {
366
353
  cssString);
367
354
  };
368
355
  const columnHeaderButtonSelected = () => css({
369
- color: `var(--ds-text-inverse, ${N0})`,
356
+ color: "var(--ds-text-inverse, #FFFFFF)",
370
357
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
371
358
  backgroundColor: tableToolbarSelectedColor,
372
359
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
@@ -595,8 +582,8 @@ export const hoveredWarningCell = css`
595
582
  :not(.${ClassName.IS_RESIZING})
596
583
  .${ClassName.TABLE_CONTAINER}:not(.${ClassName.HOVERED_DELETE_BUTTON}) {
597
584
  td.${ClassName.HOVERED_CELL_WARNING} {
598
- background-color: ${`var(--ds-background-warning, ${Y50})`} !important; /* We need to override the background-color added to the cell */
599
- border: 1px solid ${`var(--ds-border-warning, ${Y200})`};
585
+ background-color: ${"var(--ds-background-warning, #FFF5DB)"} !important; /* We need to override the background-color added to the cell */
586
+ border: 1px solid ${"var(--ds-border-warning, #E06C00)"};
600
587
  }
601
588
  }
602
589
  `;
@@ -756,7 +743,7 @@ const insertLineActiveColor = css({
756
743
  });
757
744
  const insertLineInactiveColor = css({
758
745
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
759
- backgroundColor: `var(--ds-background-accent-gray-subtler, ${akEditorTableBorder})`
746
+ backgroundColor: "var(--ds-background-accent-gray-subtler, #DDDEE1)"
760
747
  });
761
748
 
762
749
  // Explicit pixel values required here to ensure correct positioning of line that is show on row
package/dist/esm/ui/FloatingContextualButton/styles.js CHANGED
@@ -1,13 +1,12 @@
1
1
  // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
2
2
  import { css } from '@emotion/react';
3
- import { N0, N20, N30A, N700 } from '@atlaskit/theme/colors';
4
3
  import { contextualMenuTriggerSize } from '../consts';
5
4
  export var tableFloatingCellButtonStyles = function tableFloatingCellButtonStyles() {
6
5
  return css({
7
6
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
8
7
  '> div': {
9
8
  // Sits behind button to provide surface-color background
10
- background: "var(--ds-surface, ".concat(N20, ")"),
9
+ background: "var(--ds-surface, #FFFFFF)",
11
10
  borderRadius: "var(--ds-radius-small, 3px)",
12
11
  display: 'flex',
13
12
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
@@ -17,10 +16,10 @@ export var tableFloatingCellButtonStyles = function tableFloatingCellButtonStyle
17
16
  },
18
17
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
19
18
  '&& button': {
20
- background: "var(--ds-background-neutral, none)",
19
+ background: "var(--ds-background-neutral, #0515240F)",
21
20
  flexDirection: 'column',
22
21
  margin: "var(--ds-space-025, 2px)",
23
- outline: "2px solid ".concat("var(--ds-surface, ".concat(N0, ")")),
22
+ outline: "2px solid ".concat("var(--ds-surface, #FFFFFF)"),
24
23
  borderRadius: '1px',
25
24
  padding: 0,
26
25
  height: 'calc(100% - 4px)',
@@ -28,11 +27,11 @@ export var tableFloatingCellButtonStyles = function tableFloatingCellButtonStyle
28
27
  },
29
28
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
30
29
  '&& button:hover': {
31
- background: "var(--ds-background-neutral-hovered, ".concat(N30A, ")")
30
+ background: "var(--ds-background-neutral-hovered, #0B120E24)"
32
31
  },
33
32
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
34
33
  '&& button:active': {
35
- background: "var(--ds-background-neutral-pressed, rgba(179, 212, 255, 0.6))"
34
+ background: "var(--ds-background-neutral-pressed, #080F214A)"
36
35
  },
37
36
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
38
37
  '&& button > span': {
@@ -48,15 +47,15 @@ export var tableFloatingCellButtonSelectedStyles = function tableFloatingCellBut
48
47
  return css({
49
48
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
50
49
  '&& button': {
51
- background: "var(--ds-background-selected, ".concat(N700, ")")
50
+ background: "var(--ds-background-selected, #E9F2FE)"
52
51
  },
53
52
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
54
53
  '&& button:hover': {
55
- background: "var(--ds-background-selected-hovered, ".concat(N700, ")")
54
+ background: "var(--ds-background-selected-hovered, #CFE1FD)"
56
55
  },
57
56
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
58
57
  '&& button:active': {
59
- background: "var(--ds-background-selected-pressed, ".concat(N700, ")")
58
+ background: "var(--ds-background-selected-pressed, #8FB8F6)"
60
59
  }
61
60
  });
62
61
  };
package/dist/esm/ui/FloatingContextualMenu/styles.js CHANGED
@@ -3,7 +3,6 @@ var _templateObject;
3
3
  // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
4
4
  import { css } from '@emotion/react';
5
5
  import { tableBackgroundBorderColor } from '@atlaskit/adf-schema';
6
- import { N60A, N90 } from '@atlaskit/theme/colors';
7
6
  import { TableCssClassName as ClassName } from '../../types';
8
7
  import { contextualMenuDropdownWidth, contextualMenuDropdownWidthDnD } from '../consts';
9
8
  export var cellColourPreviewStyles = function cellColourPreviewStyles(selectedColor) {
@@ -17,5 +16,5 @@ export var cellColourPreviewStyles = function cellColourPreviewStyles(selectedCo
17
16
  export var tablePopupStyles = function tablePopupStyles(isDragAndDropEnabled
18
17
  // eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression -- needs manual remediation
19
18
  ) {
20
- return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n\t.", " {\n\t\tborder-radius: ", ";\n\t\tbackground: ", ";\n\t\tbox-shadow: ", ";\n\t\tdisplay: block;\n\t\tposition: absolute;\n\t\ttop: 0;\n\t\tleft: ", "px;\n\t\tpadding: ", ";\n\n\t\t> div {\n\t\t\tpadding: 0;\n\t\t}\n\t}\n\n\t.", " {\n\t\tdisplay: flex;\n\n\t\t&::before {\n\t\t\tcontent: '';\n\t\t\tdisplay: block;\n\t\t\tborder: 1px solid ", ";\n\t\t\tborder-radius: ", ";\n\t\t\twidth: 20px;\n\t\t\theight: 20px;\n\t\t}\n\n\t\t&::after {\n\t\t\tcontent: '\u203A';\n\t\t\tmargin-left: ", ";\n\t\t\tline-height: 20px;\n\t\t\tcolor: ", ";\n\t\t}\n\t}\n\n\t.", " {\n\t\tdisplay: flex;\n\n\t\t&::before {\n\t\t\tcontent: '';\n\t\t\tdisplay: block;\n\t\t\tborder: 1px solid ", ";\n\t\t\tborder-radius: ", ";\n\t\t\twidth: 14px;\n\t\t\theight: 14px;\n\t\t}\n\n\t\t&::after {\n\t\t\tcontent: '\u203A';\n\t\t\tmargin-left: ", ";\n\t\t\tline-height: 14px;\n\t\t\tcolor: ", ";\n\t\t}\n\t}\n"])), ClassName.CONTEXTUAL_SUBMENU, "var(--ds-radius-small, 3px)", "var(--ds-surface-overlay, white)", "var(--ds-shadow-overlay, ".concat("0 4px 8px -2px ".concat(N60A, ", 0 0 1px ").concat(N60A), ")"), isDragAndDropEnabled ? contextualMenuDropdownWidthDnD : contextualMenuDropdownWidth, "var(--ds-space-100, 8px)", ClassName.CONTEXTUAL_MENU_ICON, tableBackgroundBorderColor, "var(--ds-radius-small, 3px)", "var(--ds-space-050, 4px)", "var(--ds-icon, ".concat(N90, ")"), ClassName.CONTEXTUAL_MENU_ICON_SMALL, tableBackgroundBorderColor, "var(--ds-radius-small, 3px)", "var(--ds-space-050, 4px)", "var(--ds-icon, ".concat(N90, ")"));
19
+ return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n\t.", " {\n\t\tborder-radius: ", ";\n\t\tbackground: ", ";\n\t\tbox-shadow: ", ";\n\t\tdisplay: block;\n\t\tposition: absolute;\n\t\ttop: 0;\n\t\tleft: ", "px;\n\t\tpadding: ", ";\n\n\t\t> div {\n\t\t\tpadding: 0;\n\t\t}\n\t}\n\n\t.", " {\n\t\tdisplay: flex;\n\n\t\t&::before {\n\t\t\tcontent: '';\n\t\t\tdisplay: block;\n\t\t\tborder: 1px solid ", ";\n\t\t\tborder-radius: ", ";\n\t\t\twidth: 20px;\n\t\t\theight: 20px;\n\t\t}\n\n\t\t&::after {\n\t\t\tcontent: '\u203A';\n\t\t\tmargin-left: ", ";\n\t\t\tline-height: 20px;\n\t\t\tcolor: ", ";\n\t\t}\n\t}\n\n\t.", " {\n\t\tdisplay: flex;\n\n\t\t&::before {\n\t\t\tcontent: '';\n\t\t\tdisplay: block;\n\t\t\tborder: 1px solid ", ";\n\t\t\tborder-radius: ", ";\n\t\t\twidth: 14px;\n\t\t\theight: 14px;\n\t\t}\n\n\t\t&::after {\n\t\t\tcontent: '\u203A';\n\t\t\tmargin-left: ", ";\n\t\t\tline-height: 14px;\n\t\t\tcolor: ", ";\n\t\t}\n\t}\n"])), ClassName.CONTEXTUAL_SUBMENU, "var(--ds-radius-small, 3px)", "var(--ds-surface-overlay, #FFFFFF)", "var(--ds-shadow-overlay, 0px 8px 12px #1E1F2126, 0px 0px 1px #1E1F214f)", isDragAndDropEnabled ? contextualMenuDropdownWidthDnD : contextualMenuDropdownWidth, "var(--ds-space-100, 8px)", ClassName.CONTEXTUAL_MENU_ICON, tableBackgroundBorderColor, "var(--ds-radius-small, 3px)", "var(--ds-space-050, 4px)", "var(--ds-icon, #292A2E)", ClassName.CONTEXTUAL_MENU_ICON_SMALL, tableBackgroundBorderColor, "var(--ds-radius-small, 3px)", "var(--ds-space-050, 4px)", "var(--ds-icon, #292A2E)");
21
20
  };