@atlaskit/editor-core 177.0.0 → 178.0.0

package/dist/es2019/plugins/block-type/ui/ToolbarBlockType/styled.js

@@ -3,10 +3,9 @@ import { css } from '@emotion/react';
 import { N400 } from '@atlaskit/theme/colors';
 import { headingsSharedStyles } from '@atlaskit/editor-common/styles';
 import { shortcutStyle } from '../../../../ui/styles';
-import { token } from '@atlaskit/tokens';
 export const blockTypeMenuItemStyle = (tagName, selected) => {
   // TEMP FIX: See https://product-fabric.atlassian.net/browse/ED-13878
-  const selectedStyle = selected ? `${tagName} { color: ${token('color.text', 'white')} !important; }` : '';
+  const selectedStyle = selected ? `${tagName} { color: ${"var(--ds-text, white)"} !important; }` : '';
   return themeProps => css`
     ${headingsSharedStyles(themeProps)};
     > {
@@ -27,5 +26,5 @@ export const keyboardShortcut = css`
   margin-left: 16px;
 `;
 export const keyboardShortcutSelect = css`
-  color: ${token('color.icon', N400)};
+  color: ${`var(--ds-icon, ${N400})`};
 `;

package/dist/es2019/plugins/breakout/ui/LayoutButton.js

@@ -19,15 +19,14 @@ import { isBreakoutMarkAllowed } from '../utils/is-breakout-mark-allowed';
 import { getPluginState } from '../plugin-key';
 import { NodeSelection } from 'prosemirror-state';
 import { isSupportedNodeForBreakout } from '../utils/is-supported-node';
-import { token } from '@atlaskit/tokens';
 import { layers } from '@atlaskit/theme/constants';
 const toolbarButtonWrapper = css`
   && button {
-    background: ${token('color.background.neutral', N20A)};
-    color: ${token('color.icon', N300)};
+    background: ${`var(--ds-background-neutral, ${N20A})`};
+    color: ${`var(--ds-icon, ${N300})`};
     :hover {
-      background: ${token('color.background.neutral.hovered', B300)};
-      color: ${token('color.icon', 'white')} !important;
+      background: ${`var(--ds-background-neutral-hovered, ${B300})`};
+      color: ${"var(--ds-icon, white)"} !important;
     }
   }
 `;

package/dist/es2019/plugins/card/styles.js

@@ -3,7 +3,6 @@ import { SelectionStyle, getSelectionStyles, akEditorDeleteBorder, akEditorDelet
 import { N20 } from '@atlaskit/theme/colors';
 import { SmartCardSharedCssClassName } from '@atlaskit/editor-common/styles';
 import { akEditorSelectedNodeClassName } from '@atlaskit/editor-shared-styles';
-import { token } from '@atlaskit/tokens';
 export const FLOATING_TOOLBAR_LINKPICKER_CLASSNAME = 'card-floating-toolbar--link-picker';
 export const smartCardStyles = css`
   .${SmartCardSharedCssClassName.INLINE_CARD_CONTAINER} {
@@ -38,7 +37,7 @@ export const smartCardStyles = css`
     &.danger {
       .${SmartCardSharedCssClassName.LOADER_WRAPPER} > a {
         box-shadow: 0 0 0 1px
-          ${token('color.border.danger', akEditorDeleteBorder)};
+          ${`var(--ds-border-danger, ${akEditorDeleteBorder})`};
         /* EDM-1717: box-shadow Safari fix start */
         z-index: 2;
         /* EDM-1717: box-shadow Safari fix end */
@@ -50,7 +49,7 @@ export const smartCardStyles = css`
     .${SmartCardSharedCssClassName.LOADER_WRAPPER} > div {
       cursor: pointer;
       &:hover {
-        background-color: ${token('color.background.neutral.subtle.hovered', N20)};
+        background-color: ${`var(--ds-background-neutral-subtle-hovered, ${N20})`};
       }
     }
 
@@ -63,7 +62,7 @@ export const smartCardStyles = css`
     &.danger {
       .${SmartCardSharedCssClassName.LOADER_WRAPPER} > div {
         box-shadow: 0 0 0 1px
-          ${token('color.border.danger', akEditorDeleteBorder)} !important;
+          ${`var(--ds-border-danger, ${akEditorDeleteBorder})`} !important;
       }
     }
   }
@@ -90,12 +89,12 @@ export const smartCardStyles = css`
     &.danger {
       .media-card-frame::after {
         box-shadow: 0 0 0 1px
-          ${token('color.border.danger', akEditorDeleteBorder)} !important;
-        background: ${token('color.background.danger', akEditorDeleteBackground)} !important;
+          ${`var(--ds-border-danger, ${akEditorDeleteBorder})`} !important;
+        background: ${`var(--ds-background-danger, ${akEditorDeleteBackground})`} !important;
       }
       .richMedia-resize-handle-right::after,
       .richMedia-resize-handle-left::after {
-        background: ${token('color.border.danger', akEditorDeleteBorder)};
+        background: ${`var(--ds-border-danger, ${akEditorDeleteBorder})`};
       }
     }
   }

package/dist/es2019/plugins/code-block/styles.js

@@ -1,7 +1,6 @@
 import { css } from '@emotion/react';
 import { R75 } from '@atlaskit/theme/colors';
 import { akEditorDeleteBackground, akEditorDeleteBorder, akEditorSelectedBorderSize, akEditorDeleteIconColor, SelectionStyle, getSelectionStyles, akEditorSelectedNodeClassName, blockNodesVerticalMargin } from '@atlaskit/editor-shared-styles';
-import { token } from '@atlaskit/tokens';
 import { codeBlockClassNames } from './ui/class-names';
 import { codeBlockSharedStyles } from '@atlaskit/editor-common/styles';
 
@@ -13,7 +12,7 @@ const GutterDangerOverlay = () => css`
     left: 0;
     top: 0;
     width: 24px;
-    background-color: ${token('color.blanket.danger', 'none')};
+    background-color: ${"var(--ds-blanket-danger, none)"};
   }
 `;
 
@@ -44,29 +43,29 @@ export const codeBlockStyles = props => css`
   /* Danger when top level node */
   .ProseMirror .danger.code-block {
     box-shadow: 0 0 0 ${akEditorSelectedBorderSize}px
-      ${token('color.border.danger', akEditorDeleteBorder)};
+      ${`var(--ds-border-danger, ${akEditorDeleteBorder})`};
 
     .${codeBlockClassNames.gutter} {
-      background-color: ${token('color.background.danger', R75)};
-      color: ${token('color.text.danger', akEditorDeleteIconColor)};
+      background-color: ${`var(--ds-background-danger, ${R75})`};
+      color: ${`var(--ds-text-danger, ${akEditorDeleteIconColor})`};
       ${GutterDangerOverlay()};
     }
 
     .${codeBlockClassNames.content} {
-      background-color: ${token('color.blanket.danger', akEditorDeleteBackground)};
+      background-color: ${`var(--ds-blanket-danger, ${akEditorDeleteBackground})`};
     }
   }
 
   /* Danger when nested node */
   .ProseMirror .danger .code-block {
     .${codeBlockClassNames.gutter} {
-      background-color: ${token('color.background.danger', 'rgba(255, 143, 115, 0.5)')};
-      color: ${token('color.text.danger', akEditorDeleteIconColor)};
+      background-color: ${"var(--ds-background-danger, rgba(255, 143, 115, 0.5))"};
+      color: ${`var(--ds-text-danger, ${akEditorDeleteIconColor})`};
       ${GutterDangerOverlay()};
     }
 
     .${codeBlockClassNames.content} {
-      background-color: ${token('color.blanket.danger', 'rgba(255, 189, 173, 0.5)')};
+      background-color: ${"var(--ds-blanket-danger, rgba(255, 189, 173, 0.5))"};
     }
   }
 `;

package/dist/es2019/plugins/collab-edit/styles.js

@@ -2,14 +2,13 @@ import { css } from '@emotion/react';
 import { TELEPOINTER_DIM_CLASS } from './plugin-state';
 import { colors } from './utils';
 import { relativeFontSizeToBase16 } from '@atlaskit/editor-shared-styles';
-import { token } from '@atlaskit/tokens';
 
 const telepointerColorStyle = (color, index) => `
   &.color-${index} {
     background-color: ${color.selection};
     &::after {
       background-color: ${color.solid};
-      color: ${token('color.text.inverse', '#fff')};
+      color: ${"var(--ds-text-inverse, #fff)"};
       border-color: ${color.solid};
     }
   }
@@ -33,7 +32,7 @@ export const telepointerStyle = css`
       top: -14px;
       font-size: ${relativeFontSizeToBase16(9)};
       padding: 2px;
-      color: ${token('color.text.inverse', 'white')};
+      color: ${"var(--ds-text-inverse, white)"};
       left: -1px;
       border-radius: 2px 2px 2px 0;
       line-height: initial;

package/dist/es2019/plugins/collab-edit/ui/styles.js

@@ -2,9 +2,8 @@ import { css } from '@emotion/react';
 import { gridSize } from '@atlaskit/theme/constants';
 import { N20 } from '@atlaskit/theme/colors';
 import { akEditorSmallZIndex, relativeFontSizeToBase16 } from '@atlaskit/editor-shared-styles';
-import { token } from '@atlaskit/tokens';
 export const inviteTeamWrapper = css`
-  background: ${token('color.background.neutral', N20)};
+  background: ${`var(--ds-background-neutral, ${N20})`};
   border-radius: 50%;
   min-width: ${gridSize() * 4}px;
   margin-left: -${gridSize() / 2}px;
@@ -38,11 +37,11 @@ export const badge = color => css`
   z-index: ${akEditorSmallZIndex};
   border-radius: 3px;
   background: ${color};
-  color: ${token('color.text.inverse', '#fff')};
+  color: ${"var(--ds-text-inverse, #fff)"};
   font-size: ${relativeFontSizeToBase16(9)};
   line-height: 0;
   padding-top: 7px;
   text-align: center;
-  box-shadow: 0 0 1px ${token('color.border.inverse', '#fff')};
+  box-shadow: 0 0 1px ${"var(--ds-border-inverse, #fff)"};
   box-sizing: border-box;
 `;

package/dist/es2019/plugins/date/styles.js

@@ -1,6 +1,5 @@
 import { css } from '@emotion/react';
 import { DateSharedCssClassName } from '@atlaskit/editor-common/styles';
-import { token } from '@atlaskit/tokens';
 import { SelectionStyle, getSelectionStyles, akEditorSelectedBorderSize, akEditorDeleteBorder, akEditorSelectedNodeClassName } from '@atlaskit/editor-shared-styles';
 export const dateStyles = css`
   .${DateSharedCssClassName.DATE_CONTAINER} {
@@ -21,7 +20,7 @@ export const dateStyles = css`
       .${DateSharedCssClassName.DATE_WRAPPER}
       > span {
       box-shadow: 0 0 0 ${akEditorSelectedBorderSize}px
-        ${token('color.border.danger', akEditorDeleteBorder)};
+        ${`var(--ds-border-danger, ${akEditorDeleteBorder})`};
     }
   }
 `;

package/dist/es2019/plugins/date/ui/DatePicker/index.js

@@ -10,7 +10,6 @@ import { akEditorFloatingDialogZIndex } from '@atlaskit/editor-shared-styles';
 import Calendar from '@atlaskit/calendar';
 import { borderRadius } from '@atlaskit/theme/constants';
 import { N60A, N0 } from '@atlaskit/theme/colors';
-import { token } from '@atlaskit/tokens';
 import withOuterListeners from '../../../../ui/with-outer-listeners';
 const PopupWithListeners = withOuterListeners(Popup);
 import { INPUT_METHOD } from '../../../analytics/types/enums';
@@ -19,8 +18,8 @@ import DatePickerInput from './date-picker-input';
 const popupContentWrapper = css`
   padding: 2px;
   border-radius: ${borderRadius()}px;
-  box-shadow: ${token('elevation.shadow.overlay', `0 4px 8px -2px ${N60A}, 0 0 1px ${N60A}`)};
-  background-color: ${token('elevation.surface.overlay', N0)};
+  box-shadow: ${`var(--ds-shadow-overlay, ${`0 4px 8px -2px ${N60A}, 0 0 1px ${N60A}`})`};
+  background-color: ${`var(--ds-surface-overlay, ${N0})`};
 `;
 
 class DatePicker extends React.Component {

package/dist/es2019/plugins/expand/ui/styles.js

@@ -2,41 +2,40 @@ import { css } from '@emotion/react';
 import { themed } from '@atlaskit/theme/components';
 import { gridSize } from '@atlaskit/theme/constants';
 import { R50, R300, N40A, N50A, N80A, DN50, R200 } from '@atlaskit/theme/colors';
-import { token } from '@atlaskit/tokens';
 import { sharedExpandStyles } from '@atlaskit/editor-common/ui';
 import { SelectionStyle, getSelectionStyles, akLayoutGutterOffset, akEditorSelectedNodeClassName } from '@atlaskit/editor-shared-styles';
 import { BreakoutCssClassName } from '../../breakout/constants';
 import { expandClassNames } from './class-names';
 const EXPAND_SELECTED_BACKGROUND = themed({
-  light: token('color.background.neutral.subtle', 'rgba(255, 255, 255, 0.6)'),
-  dark: token('color.background.neutral.subtle', 'rgba(9, 10, 11, 0.29)')
+  light: "var(--ds-background-neutral-subtle, rgba(255, 255, 255, 0.6))",
+  dark: "var(--ds-background-neutral-subtle, rgba(9, 10, 11, 0.29))"
 });
 
 const EXPAND_ICON_COLOR = props => css`
   color: ${themed({
-  light: token('color.icon.subtle', N80A),
-  dark: token('color.icon.subtle', '#d9dde3')
+  light: `var(--ds-icon-subtle, ${N80A})`,
+  dark: "var(--ds-icon-subtle, #d9dde3)"
 })(props)};
 `;
 
 const ACTIVE_STATE_BACKGROUND_COLOR = themed({
-  dark: token('color.blanket.selected', `#0C294F4B`)
+  dark: `var(--ds-blanket-selected, ${`#0C294F4B`})`
 });
 const ACTIVE_STATE_BORDER = themed({
-  dark: `1px solid ${token('color.border.selected', `#4794ff4B`)}`
+  dark: `1px solid ${`var(--ds-border-selected, ${`#4794ff4B`})`}`
 });
 const ACTIVE_STATE_BORDER_RADIUS = themed({
   dark: '3px'
 });
 const DANGER_STATE_BACKGROUND_COLOR = themed({
-  light: token('color.background.danger', R50),
-  dark: token('color.background.danger', '#441C13')
+  light: `var(--ds-background-danger, ${R50})`,
+  dark: "var(--ds-background-danger, #441C13)"
 });
 const DANGER_STATE_BORDER = themed({
-  dark: `1px solid ${token('color.border.danger', R200)}`
+  dark: `1px solid ${`var(--ds-border-danger, ${R200})`}`
 });
 const DANGER_STATE_BORDER_COLOR = themed({
-  light: token('color.border.danger', R300)
+  light: `var(--ds-border-danger, ${R300})`
 });
 const DANGER_STATE_BORDER_RADIUS = themed({
   dark: '3px'
@@ -113,8 +112,8 @@ export const expandStyles = props => css`
   .${expandClassNames.expanded} {
     background: ${EXPAND_SELECTED_BACKGROUND(props)};
     border-color: ${themed({
-  light: token('color.border', N40A),
-  dark: token('color.border', DN50)
+  light: `var(--ds-border, ${N40A})`,
+  dark: `var(--ds-border, ${DN50})`
 })(props)};
 
     .${expandClassNames.content} {
@@ -155,8 +154,8 @@ export const expandStyles = props => css`
 
       &:hover {
         border-color: ${themed({
-  light: token('color.border', N50A),
-  dark: token('color.border', DN50)
+  light: `var(--ds-border, ${N50A})`,
+  dark: `var(--ds-border, ${DN50})`
 })(props)};
         background: ${EXPAND_SELECTED_BACKGROUND(props)};
       }

package/dist/es2019/plugins/extension/ui/Extension/Extension/styles.js

@@ -3,7 +3,6 @@ import { themed } from '@atlaskit/theme/components';
 import { borderRadius } from '@atlaskit/theme/constants';
 import { DN30, DN900, N30 } from '@atlaskit/theme/colors';
 import { wrapperDefault, padding } from '../styles';
-import { token } from '@atlaskit/tokens';
 export const widerLayoutClassName = 'wider-layout';
 export const wrapperStyle = theme => css`
   ${wrapperDefault(theme)}
@@ -32,13 +31,13 @@ export const header = css`
 export const content = theme => css`
   padding: ${padding}px;
   background: ${themed({
-  light: token('elevation.surface', 'white'),
-  dark: token('elevation.surface', DN30)
+  light: "var(--ds-surface, white)",
+  dark: `var(--ds-surface, ${DN30})`
 })(theme)};
   color: ${themed({
-  dark: token('color.text', DN900)
+  dark: `var(--ds-text, ${DN900})`
 })(theme)};
-  border: 1px solid ${token('color.border', N30)};
+  border: 1px solid ${`var(--ds-border, ${N30})`};
   border-radius: ${borderRadius()}px;
   cursor: initial;
 `;

package/dist/es2019/plugins/extension/ui/Extension/InlineExtension/styles.js

@@ -1,7 +1,6 @@
 import { css } from '@emotion/react';
 import { borderRadius } from '@atlaskit/theme/constants';
 import { wrapperDefault } from '../styles';
-import { token } from '@atlaskit/tokens';
 export const wrapperStyle = theme => css`
   ${wrapperDefault(theme)}
 
@@ -23,6 +22,6 @@ export const wrapperStyle = theme => css`
 
   &.with-children {
     padding: 0;
-    background: ${token('color.background.neutral.subtle', 'white')};
+    background: ${"var(--ds-background-neutral-subtle, white)"};
   }
 `;

package/dist/es2019/plugins/extension/ui/Extension/styles.js

@@ -2,29 +2,28 @@ import { css } from '@emotion/react';
 import { themed } from '@atlaskit/theme/components';
 import { borderRadius } from '@atlaskit/theme/constants';
 import { N20, DN50, DN700, B200, N20A, N70 } from '@atlaskit/theme/colors';
-import { token } from '@atlaskit/tokens';
 import { EXTENSION_PADDING, BODIED_EXT_PADDING } from '@atlaskit/editor-common/styles';
 export { EXTENSION_PADDING as padding, BODIED_EXT_PADDING };
 export const wrapperDefault = theme => css`
   background: ${themed({
-  light: token('color.background.neutral', N20),
-  dark: token('color.background.neutral', DN50)
+  light: `var(--ds-background-neutral, ${N20})`,
+  dark: `var(--ds-background-neutral, ${DN50})`
 })(theme)};
   border-radius: ${borderRadius()}px;
   color: ${themed({
-  dark: token('color.text', DN700)
+  dark: `var(--ds-text, ${DN700})`
 })(theme)};
   position: relative;
   vertical-align: middle;
 
   .ProseMirror-selectednode > span > & > .extension-overlay {
-    box-shadow: inset 0px 0px 0px 2px ${token('color.border.selected', B200)};
+    box-shadow: inset 0px 0px 0px 2px ${`var(--ds-border-selected, ${B200})`};
     opacity: 1;
   }
 
   &.with-overlay {
     .extension-overlay {
-      background: ${token('color.background.neutral.hovered', N20A)};
+      background: ${`var(--ds-background-neutral-hovered, ${N20A})`};
       color: transparent;
     }
 
@@ -57,7 +56,7 @@ export const placeholderFallbackParams = css`
   display: inline-block;
   max-width: 200px;
   margin-left: 5px;
-  color: ${token('color.text.subtlest', N70)};
+  color: ${`var(--ds-text-subtlest, ${N70})`};
   text-overflow: ellipsis;
   white-space: nowrap;
   overflow: hidden;

package/dist/es2019/plugins/extension/ui/SaveIndicator/SaveIndicator.js

@@ -5,7 +5,6 @@ import { G300, N0 } from '@atlaskit/theme/colors';
 import CheckCircleIcon from '@atlaskit/icon/glyph/check-circle';
 import { FormattedMessage } from 'react-intl-next';
 import { messages } from './messages';
-import { token } from '@atlaskit/tokens';
 
 const noop = () => {};
 
@@ -22,10 +21,10 @@ const saveIndicatorContent = css`
   align-items: center;
   padding: 6px 12px;
 
-  background: ${token('elevation.surface.overlay', N0)};
+  background: ${`var(--ds-surface-overlay, ${N0})`};
 
   /* E300 */
-  box-shadow: ${token('elevation.shadow.overlay', `0px 8px 12px rgba(9, 30, 66, 0.15), 0px 0px 1px rgba(9, 30, 66, 0.31)`)};
+  box-shadow: ${`var(--ds-shadow-overlay, ${`0px 8px 12px rgba(9, 30, 66, 0.15), 0px 0px 1px rgba(9, 30, 66, 0.31)`})`};
   border-radius: 16px;
 `;
 const saveIndicatorText = css`
@@ -62,7 +61,7 @@ export const SaveIndicator = ({
     "data-testid": "save-indicator-content"
   }, jsx(CheckCircleIcon, {
     label: "Saving",
-    primaryColor: token('color.icon.success', G300),
+    primaryColor: `var(--ds-icon-success, ${G300})`,
     size: "small"
   }), jsx("span", {
     css: saveIndicatorText

package/dist/es2019/plugins/extension/ui/styles.js

@@ -1,6 +1,5 @@
 import { css } from '@emotion/react';
 import { blockNodesVerticalMargin, akEditorSelectedBorderSize, akEditorDeleteBorder, akEditorDeleteBackground, SelectionStyle, getSelectionStyles, akEditorSelectedNodeClassName } from '@atlaskit/editor-shared-styles';
-import { token } from '@atlaskit/tokens';
 export const extensionStyles = css`
   .extensionView-content-wrap,
   .bodiedExtensionView-content-wrap {
@@ -22,8 +21,8 @@ export const extensionStyles = css`
 
     &.danger > span > .extension-container {
       box-shadow: 0 0 0 ${akEditorSelectedBorderSize}px
-        ${token('color.border.danger', akEditorDeleteBorder)};
-      background-color: ${token('color.background.danger', akEditorDeleteBackground)};
+        ${`var(--ds-border-danger, ${akEditorDeleteBorder})`};
+      background-color: ${`var(--ds-background-danger, ${akEditorDeleteBackground})`};
     }
 
     &.inline {

package/dist/es2019/plugins/fake-text-cursor/styles.js

@@ -1,6 +1,5 @@
 import { css } from '@emotion/react';
 import { B75 } from '@atlaskit/theme/colors';
-import { token } from '@atlaskit/tokens';
 export const fakeCursorStyles = css`
   .ProseMirror {
     .ProseMirror-fake-text-cursor {
@@ -14,14 +13,14 @@ export const fakeCursorStyles = css`
       display: inline;
       top: 0;
       position: absolute;
-      border-right: 1px solid ${token('color.border', 'rgba(0, 0, 0, 0.4)')};
+      border-right: 1px solid ${"var(--ds-border, rgba(0, 0, 0, 0.4))"};
     }
 
     .ProseMirror-fake-text-selection {
       display: inline;
       pointer-events: none;
       position: relative;
-      background-color: ${token('color.background.selected', B75)};
+      background-color: ${`var(--ds-background-selected, ${B75})`};
     }
   }
 `;

package/dist/es2019/plugins/feature-flags-context/feature-flags-from-props.js

@@ -26,7 +26,7 @@ function getSpellCheck(featureFlags) {
 
 
 export function createFeatureFlagsFromProps(props) {
-  var _props$featureFlags, _props$allowTextColor, _props$allowLayouts, _props$performanceTra, _props$performanceTra2, _props$featureFlags2, _props$featureFlags3, _props$allowTables, _props$featureFlags4, _props$featureFlags5, _props$allowTables2, _props$featureFlags6, _props$featureFlags7, _props$allowTables3, _props$featureFlags8, _props$featureFlags9, _props$allowTables4, _props$allowTables5, _props$featureFlags10, _props$featureFlags11, _props$allowTables6, _props$allowExtension, _props$featureFlags12, _props$featureFlags13, _props$featureFlags14, _props$featureFlags15, _props$featureFlags16, _props$featureFlags17, _props$featureFlags18, _props$featureFlags19, _props$featureFlags20, _props$featureFlags21, _props$featureFlags22, _props$featureFlags23, _props$featureFlags24, _props$featureFlags25, _props$featureFlags26, _props$featureFlags27, _props$collabEdit, _props$collabEdit2, _props$featureFlags28, _props$featureFlags29, _props$featureFlags30, _props$featureFlags31, _props$featureFlags32, _props$featureFlags33, _props$featureFlags34, _props$featureFlags35, _props$featureFlags36, _props$featureFlags37, _props$featureFlags38, _props$featureFlags39, _props$featureFlags40, _props$featureFlags41, _props$featureFlags42;
+  var _props$featureFlags, _props$allowLayouts, _props$performanceTra, _props$performanceTra2, _props$featureFlags2, _props$featureFlags3, _props$allowTables, _props$featureFlags4, _props$featureFlags5, _props$allowTables2, _props$featureFlags6, _props$featureFlags7, _props$allowTables3, _props$featureFlags8, _props$featureFlags9, _props$allowTables4, _props$allowTables5, _props$featureFlags10, _props$featureFlags11, _props$allowTables6, _props$allowExtension, _props$featureFlags12, _props$featureFlags13, _props$featureFlags14, _props$featureFlags15, _props$featureFlags16, _props$featureFlags17, _props$featureFlags18, _props$featureFlags19, _props$featureFlags20, _props$featureFlags21, _props$featureFlags22, _props$featureFlags23, _props$featureFlags24, _props$featureFlags25, _props$featureFlags26, _props$featureFlags27, _props$featureFlags28, _props$featureFlags29, _props$collabEdit, _props$collabEdit2, _props$featureFlags30, _props$featureFlags31, _props$featureFlags32, _props$featureFlags33, _props$featureFlags34, _props$featureFlags35, _props$featureFlags36, _props$featureFlags37, _props$featureFlags38, _props$featureFlags39, _props$featureFlags40, _props$featureFlags41, _props$featureFlags42, _props$featureFlags43, _props$featureFlags44;
 
   const normalizedFeatureFlags = normalizeFeatureFlags(props.featureFlags);
   const tableCellOptionsInFloatingToolbar = normalizedFeatureFlags.tableCellOptionsInFloatingToolbar || ((_props$featureFlags = props.featureFlags) === null || _props$featureFlags === void 0 ? void 0 : _props$featureFlags.tableCellOptionsInFloatingToolbar) || undefined;
@@ -34,7 +34,6 @@ export function createFeatureFlagsFromProps(props) {
     newInsertionBehaviour: props.allowNewInsertionBehaviour,
     interactiveExpand: typeof props.allowExpand === 'boolean' ? props.allowExpand : Boolean(props.allowExpand && props.allowExpand.allowInteractiveExpand !== false),
     placeholderBracketHint: !!props.placeholderBracketHint,
-    moreTextColors: typeof props.allowTextColor === 'boolean' ? false : Boolean(((_props$allowTextColor = props.allowTextColor) === null || _props$allowTextColor === void 0 ? void 0 : _props$allowTextColor.allowMoreTextColors) === true),
     findReplace: !!props.allowFindReplace,
     findReplaceMatchCase: typeof props.allowFindReplace === 'object' && Boolean(props.allowFindReplace.allowMatchCase),
     addColumnWithCustomStep: !props.allowTables || typeof props.allowTables === 'boolean' ? false : Boolean(props.allowTables.allowAddColumnWithCustomStep),
@@ -55,21 +54,22 @@ export function createFeatureFlagsFromProps(props) {
     ufo: Boolean(typeof ((_props$featureFlags22 = props.featureFlags) === null || _props$featureFlags22 === void 0 ? void 0 : _props$featureFlags22.ufo) === 'boolean' ? !!((_props$featureFlags23 = props.featureFlags) !== null && _props$featureFlags23 !== void 0 && _props$featureFlags23.ufo) : false),
     twoLineEditorToolbar: Boolean(typeof ((_props$featureFlags24 = props.featureFlags) === null || _props$featureFlags24 === void 0 ? void 0 : _props$featureFlags24.twoLineEditorToolbar) === 'boolean' ? !!((_props$featureFlags25 = props.featureFlags) !== null && _props$featureFlags25 !== void 0 && _props$featureFlags25.twoLineEditorToolbar) : false),
     saferDispatchedTransactions: Boolean(typeof normalizedFeatureFlags.saferDispatchedTransactions === 'boolean' && !!normalizedFeatureFlags.saferDispatchedTransactions || (typeof ((_props$featureFlags26 = props.featureFlags) === null || _props$featureFlags26 === void 0 ? void 0 : _props$featureFlags26.saferDispatchedTransactions) === 'boolean' ? !!((_props$featureFlags27 = props.featureFlags) !== null && _props$featureFlags27 !== void 0 && _props$featureFlags27.saferDispatchedTransactions) : false)),
+    saferDispatchedTransactionsAnalyticsOnly: Boolean(typeof normalizedFeatureFlags.saferDispatchedTransactionsAnalyticsOnly === 'boolean' && !!normalizedFeatureFlags.saferDispatchedTransactionsAnalyticsOnly || (typeof ((_props$featureFlags28 = props.featureFlags) === null || _props$featureFlags28 === void 0 ? void 0 : _props$featureFlags28.saferDispatchedTransactionsAnalyticsOnly) === 'boolean' ? !!((_props$featureFlags29 = props.featureFlags) !== null && _props$featureFlags29 !== void 0 && _props$featureFlags29.saferDispatchedTransactionsAnalyticsOnly) : false)),
     useNativeCollabPlugin: Boolean(typeof ((_props$collabEdit = props.collabEdit) === null || _props$collabEdit === void 0 ? void 0 : _props$collabEdit.useNativePlugin) === 'boolean' ? !!((_props$collabEdit2 = props.collabEdit) !== null && _props$collabEdit2 !== void 0 && _props$collabEdit2.useNativePlugin) : false),
-    chromeCursorHandlerFixedVersion: typeof ((_props$featureFlags28 = props.featureFlags) === null || _props$featureFlags28 === void 0 ? void 0 : _props$featureFlags28.chromeCursorHandlerFixedVersion) === 'string' ? Number(props.featureFlags.chromeCursorHandlerFixedVersion) || undefined : undefined,
+    chromeCursorHandlerFixedVersion: typeof ((_props$featureFlags30 = props.featureFlags) === null || _props$featureFlags30 === void 0 ? void 0 : _props$featureFlags30.chromeCursorHandlerFixedVersion) === 'string' ? Number(props.featureFlags.chromeCursorHandlerFixedVersion) || undefined : undefined,
     tableCellOptionsInFloatingToolbar: typeof tableCellOptionsInFloatingToolbar === 'boolean' ? tableCellOptionsInFloatingToolbar : false,
-    showHoverPreview: Boolean(typeof ((_props$featureFlags29 = props.featureFlags) === null || _props$featureFlags29 === void 0 ? void 0 : _props$featureFlags29.showHoverPreview) === 'boolean' ? !!((_props$featureFlags30 = props.featureFlags) !== null && _props$featureFlags30 !== void 0 && _props$featureFlags30.showHoverPreview) : false),
-    indentationButtonsInTheToolbar: Boolean(typeof normalizedFeatureFlags.indentationButtonsInTheToolbar === 'boolean' && !!normalizedFeatureFlags.indentationButtonsInTheToolbar || (typeof ((_props$featureFlags31 = props.featureFlags) === null || _props$featureFlags31 === void 0 ? void 0 : _props$featureFlags31.indentationButtonsInTheToolbar) === 'boolean' ? !!((_props$featureFlags32 = props.featureFlags) !== null && _props$featureFlags32 !== void 0 && _props$featureFlags32.indentationButtonsInTheToolbar) : false)),
-    floatingToolbarCopyButton: Boolean(typeof normalizedFeatureFlags.floatingToolbarCopyButton === 'boolean' && !!normalizedFeatureFlags.floatingToolbarCopyButton || (typeof ((_props$featureFlags33 = props.featureFlags) === null || _props$featureFlags33 === void 0 ? void 0 : _props$featureFlags33.floatingToolbarCopyButton) === 'boolean' ? !!((_props$featureFlags34 = props.featureFlags) !== null && _props$featureFlags34 !== void 0 && _props$featureFlags34.floatingToolbarCopyButton) : false)),
-    floatingToolbarLinkSettingsButton: typeof ((_props$featureFlags35 = props.featureFlags) === null || _props$featureFlags35 === void 0 ? void 0 : _props$featureFlags35['floating-toolbar-link-settings-button']) === 'string' ? props.featureFlags['floating-toolbar-link-settings-button'] || undefined : undefined,
+    showHoverPreview: Boolean(typeof ((_props$featureFlags31 = props.featureFlags) === null || _props$featureFlags31 === void 0 ? void 0 : _props$featureFlags31.showHoverPreview) === 'boolean' ? !!((_props$featureFlags32 = props.featureFlags) !== null && _props$featureFlags32 !== void 0 && _props$featureFlags32.showHoverPreview) : false),
+    indentationButtonsInTheToolbar: Boolean(typeof normalizedFeatureFlags.indentationButtonsInTheToolbar === 'boolean' && !!normalizedFeatureFlags.indentationButtonsInTheToolbar || (typeof ((_props$featureFlags33 = props.featureFlags) === null || _props$featureFlags33 === void 0 ? void 0 : _props$featureFlags33.indentationButtonsInTheToolbar) === 'boolean' ? !!((_props$featureFlags34 = props.featureFlags) !== null && _props$featureFlags34 !== void 0 && _props$featureFlags34.indentationButtonsInTheToolbar) : false)),
+    floatingToolbarCopyButton: Boolean(typeof normalizedFeatureFlags.floatingToolbarCopyButton === 'boolean' && !!normalizedFeatureFlags.floatingToolbarCopyButton || (typeof ((_props$featureFlags35 = props.featureFlags) === null || _props$featureFlags35 === void 0 ? void 0 : _props$featureFlags35.floatingToolbarCopyButton) === 'boolean' ? !!((_props$featureFlags36 = props.featureFlags) !== null && _props$featureFlags36 !== void 0 && _props$featureFlags36.floatingToolbarCopyButton) : false)),
+    floatingToolbarLinkSettingsButton: typeof ((_props$featureFlags37 = props.featureFlags) === null || _props$featureFlags37 === void 0 ? void 0 : _props$featureFlags37['floating-toolbar-link-settings-button']) === 'string' ? props.featureFlags['floating-toolbar-link-settings-button'] || undefined : undefined,
     disableSpellcheckByBrowser: getSpellCheck(props.featureFlags),
     // Including fallback to props.featureFlags so that mobile feature flags
     // are included (they are not kebab cased)
-    restartNumberedLists: normalizedFeatureFlags.restartNumberedLists === true || ((_props$featureFlags36 = props.featureFlags) === null || _props$featureFlags36 === void 0 ? void 0 : _props$featureFlags36.restartNumberedLists) === true,
-    listNumberContinuity: normalizedFeatureFlags.listNumberContinuity === true || ((_props$featureFlags37 = props.featureFlags) === null || _props$featureFlags37 === void 0 ? void 0 : _props$featureFlags37.listNumberContinuity) === true,
-    restartNumberedListsToolbar: normalizedFeatureFlags.restartNumberedListsToolbar === true || ((_props$featureFlags38 = props.featureFlags) === null || _props$featureFlags38 === void 0 ? void 0 : _props$featureFlags38.restartNumberedListsToolbar) === true,
-    useSomewhatSemanticTextColorNames: Boolean(typeof normalizedFeatureFlags.useSomewhatSemanticTextColorNames === 'boolean' && !!normalizedFeatureFlags.useSomewhatSemanticTextColorNames || (typeof ((_props$featureFlags39 = props.featureFlags) === null || _props$featureFlags39 === void 0 ? void 0 : _props$featureFlags39.useSomewhatSemanticTextColorNames) === 'boolean' ? !!((_props$featureFlags40 = props.featureFlags) !== null && _props$featureFlags40 !== void 0 && _props$featureFlags40.useSomewhatSemanticTextColorNames) : false)),
+    restartNumberedLists: normalizedFeatureFlags.restartNumberedLists === true || ((_props$featureFlags38 = props.featureFlags) === null || _props$featureFlags38 === void 0 ? void 0 : _props$featureFlags38.restartNumberedLists) === true,
+    listNumberContinuity: normalizedFeatureFlags.listNumberContinuity === true || ((_props$featureFlags39 = props.featureFlags) === null || _props$featureFlags39 === void 0 ? void 0 : _props$featureFlags39.listNumberContinuity) === true,
+    restartNumberedListsToolbar: normalizedFeatureFlags.restartNumberedListsToolbar === true || ((_props$featureFlags40 = props.featureFlags) === null || _props$featureFlags40 === void 0 ? void 0 : _props$featureFlags40.restartNumberedListsToolbar) === true,
+    useSomewhatSemanticTextColorNames: Boolean(typeof normalizedFeatureFlags.useSomewhatSemanticTextColorNames === 'boolean' && !!normalizedFeatureFlags.useSomewhatSemanticTextColorNames || (typeof ((_props$featureFlags41 = props.featureFlags) === null || _props$featureFlags41 === void 0 ? void 0 : _props$featureFlags41.useSomewhatSemanticTextColorNames) === 'boolean' ? !!((_props$featureFlags42 = props.featureFlags) !== null && _props$featureFlags42 !== void 0 && _props$featureFlags42.useSomewhatSemanticTextColorNames) : false)),
     lpLinkPickerFocusTrap: Boolean(normalizedFeatureFlags.lpLinkPickerFocusTrap),
-    preventPopupOverflow: Boolean(typeof ((_props$featureFlags41 = props.featureFlags) === null || _props$featureFlags41 === void 0 ? void 0 : _props$featureFlags41['prevent-popup-overflow']) === 'boolean' ? !!((_props$featureFlags42 = props.featureFlags) !== null && _props$featureFlags42 !== void 0 && _props$featureFlags42['prevent-popup-overflow']) : false)
+    preventPopupOverflow: Boolean(typeof ((_props$featureFlags43 = props.featureFlags) === null || _props$featureFlags43 === void 0 ? void 0 : _props$featureFlags43['prevent-popup-overflow']) === 'boolean' ? !!((_props$featureFlags44 = props.featureFlags) !== null && _props$featureFlags44 !== void 0 && _props$featureFlags44['prevent-popup-overflow']) : false)
   };
 }

package/dist/es2019/plugins/find-replace/ui/styles.js

@@ -1,7 +1,6 @@
 /** @jsx jsx */
 import { css } from '@emotion/react';
 import { N60, N30A } from '@atlaskit/theme/colors';
-import { token } from '@atlaskit/tokens';
 import { relativeFontSizeToBase16 } from '@atlaskit/editor-shared-styles';
 export const replaceSectionButtonStyles = css({
   marginLeft: '4px'
@@ -9,7 +8,7 @@ export const replaceSectionButtonStyles = css({
 export const ruleStyles = css({
   width: '100%',
   border: 'none',
-  backgroundColor: `${token('color.border', N30A)}`,
+  backgroundColor: `${`var(--ds-border, ${N30A})`}`,
   margin: '4px 0px',
   height: '1px',
   borderRadius: '1px'
@@ -36,7 +35,7 @@ export const sectionWrapperStyles = css`
   }
 `;
 export const countStyles = css({
-  color: `${token('color.text.subtlest', N60)}`,
+  color: `${`var(--ds-text-subtlest, ${N60})`}`,
   fontSize: `${relativeFontSizeToBase16(12)}`,
   flex: '0 0 auto',
   justifyContent: 'center',