@atlaskit/editor-core 177.0.0 → 178.0.0

package/dist/esm/plugins/mentions/ui/InviteItem/index.js

@@ -4,7 +4,6 @@ import _extends from "@babel/runtime/helpers/extends";
 import { jsx } from '@emotion/react';
 import AddIcon from '@atlaskit/icon/glyph/add';
 import { N300 } from '@atlaskit/theme/colors';
-import { token } from '@atlaskit/tokens';
 import React, { useCallback, useEffect } from 'react';
 import { FormattedMessage, injectIntl } from 'react-intl-next';
 import { avatarStyle, capitalizedStyle, mentionItemStyle, nameSectionStyle, rowStyle, ROW_SIDE_PADDING, AVATAR_HEIGHT, mentionItemSelectedStyle } from './styles';
@@ -53,7 +52,7 @@ var InviteItem = function InviteItem(_ref) {
     css: avatarStyle
   }, jsx(AddIcon, {
     label: intl.formatMessage(messages.mentionsAddLabel),
-    primaryColor: token('color.icon.subtle', N300)
+    primaryColor: "var(--ds-icon-subtle, ".concat(N300, ")")
   })), jsx("div", {
     css: nameSectionStyle,
     "data-testid": "name-section"

package/dist/esm/plugins/mentions/ui/InviteItem/styles.js

@@ -4,12 +4,11 @@ var _templateObject, _templateObject2, _templateObject3, _templateObject4, _temp
 
 import { css } from '@emotion/react';
 import { N30, N300 } from '@atlaskit/theme/colors';
-import { token } from '@atlaskit/tokens';
 export var ROW_SIDE_PADDING = 14;
 export var rowStyle = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  align-items: center;\n  display: flex;\n  flex-direction: row;\n  flex-wrap: wrap;\n  overflow: hidden;\n  padding: 6px ", "px;\n  text-overflow: ellipsis;\n  vertical-align: middle;\n"])), ROW_SIDE_PADDING);
 export var AVATAR_HEIGHT = 36;
 export var avatarStyle = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  position: relative;\n  flex: initial;\n  opacity: inherit;\n  width: 36px;\n  height: ", "px;\n\n  > span {\n    width: 24px;\n    height: 24px;\n    padding: 6px;\n  }\n"])), AVATAR_HEIGHT);
-export var nameSectionStyle = css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  flex: 1;\n  min-width: 0;\n  margin-left: 14px;\n  color: ", ";\n  opacity: inherit;\n"])), token('color.text.subtle', N300));
+export var nameSectionStyle = css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  flex: 1;\n  min-width: 0;\n  margin-left: 14px;\n  color: ", ";\n  opacity: inherit;\n"])), "var(--ds-text-subtle, ".concat(N300, ")"));
 export var mentionItemStyle = css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  background-color: transparent;\n  display: block;\n  overflow: hidden;\n  list-style-type: none;\n  cursor: pointer;\n"])));
-export var mentionItemSelectedStyle = css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  background-color: ", ";\n"])), token('color.background.neutral.subtle.hovered', N30));
+export var mentionItemSelectedStyle = css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  background-color: ", ";\n"])), "var(--ds-background-neutral-subtle-hovered, ".concat(N30, ")"));
 export var capitalizedStyle = css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  text-transform: capitalize;\n"])));

package/dist/esm/plugins/panel/styles.js

@@ -5,7 +5,6 @@ var _templateObject;
 import { css } from '@emotion/react';
 import { panelSharedStyles, PanelSharedCssClassName } from '@atlaskit/editor-common/panel';
 import { SelectionStyle, getSelectionStyles, akEditorDeleteBackground, akEditorDeleteBackgroundWithOpacity, akEditorDeleteBorder, akEditorSelectedBorderSize, akEditorDeleteIconColor, akEditorSelectedNodeClassName } from '@atlaskit/editor-shared-styles';
-import { token } from '@atlaskit/tokens';
 export var panelStyles = function panelStyles(props) {
-  return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  .ProseMirror {\n    .", " {\n      cursor: pointer;\n\n      /* Danger when top level node */\n      &.danger {\n        box-shadow: 0 0 0 ", "px\n          ", ";\n        background-color: ", " !important;\n\n        .", " {\n          color: ", " !important;\n        }\n      }\n    }\n\n    .", " {\n      cursor: text;\n    }\n\n    /* Danger when nested node */\n    .danger .", " {\n      &[data-panel-type] {\n        background-color: ", ";\n\n        .", " {\n          color: ", ";\n        }\n      }\n    }\n\n    ", ";\n  }\n\n  .", ".", ":not(.danger) {\n    ", "\n  }\n"])), PanelSharedCssClassName.prefix, akEditorSelectedBorderSize, akEditorDeleteBorder, token('color.background.danger', akEditorDeleteBackground), PanelSharedCssClassName.icon, token('color.icon.danger', akEditorDeleteIconColor), PanelSharedCssClassName.content, PanelSharedCssClassName.prefix, token('color.blanket.danger', akEditorDeleteBackgroundWithOpacity), PanelSharedCssClassName.icon, token('color.icon.danger', akEditorDeleteIconColor), panelSharedStyles(props), PanelSharedCssClassName.prefix, akEditorSelectedNodeClassName, getSelectionStyles([SelectionStyle.BoxShadow, SelectionStyle.Blanket]));
+  return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  .ProseMirror {\n    .", " {\n      cursor: pointer;\n\n      /* Danger when top level node */\n      &.danger {\n        box-shadow: 0 0 0 ", "px\n          ", ";\n        background-color: ", " !important;\n\n        .", " {\n          color: ", " !important;\n        }\n      }\n    }\n\n    .", " {\n      cursor: text;\n    }\n\n    /* Danger when nested node */\n    .danger .", " {\n      &[data-panel-type] {\n        background-color: ", ";\n\n        .", " {\n          color: ", ";\n        }\n      }\n    }\n\n    ", ";\n  }\n\n  .", ".", ":not(.danger) {\n    ", "\n  }\n"])), PanelSharedCssClassName.prefix, akEditorSelectedBorderSize, akEditorDeleteBorder, "var(--ds-background-danger, ".concat(akEditorDeleteBackground, ")"), PanelSharedCssClassName.icon, "var(--ds-icon-danger, ".concat(akEditorDeleteIconColor, ")"), PanelSharedCssClassName.content, PanelSharedCssClassName.prefix, "var(--ds-blanket-danger, ".concat(akEditorDeleteBackgroundWithOpacity, ")"), PanelSharedCssClassName.icon, "var(--ds-icon-danger, ".concat(akEditorDeleteIconColor, ")"), panelSharedStyles(props), PanelSharedCssClassName.prefix, akEditorSelectedNodeClassName, getSelectionStyles([SelectionStyle.BoxShadow, SelectionStyle.Blanket]));
 };

package/dist/esm/plugins/placeholder/styles.js

@@ -4,5 +4,4 @@ var _templateObject;
 
 import { css } from '@emotion/react';
 import { N200 } from '@atlaskit/theme/colors';
-import { token } from '@atlaskit/tokens';
-export var placeholderStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  .ProseMirror .placeholder-decoration {\n    color: ", ";\n    width: 100%;\n    pointer-events: none;\n    user-select: none;\n  }\n"])), token('color.text.subtlest', N200));
+export var placeholderStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  .ProseMirror .placeholder-decoration {\n    color: ", ";\n    width: 100%;\n    pointer-events: none;\n    user-select: none;\n  }\n"])), "var(--ds-text-subtlest, ".concat(N200, ")"));

package/dist/esm/plugins/placeholder-text/styles.js

@@ -5,5 +5,4 @@ var _templateObject;
 import { css } from '@emotion/react';
 import { N300 } from '@atlaskit/theme/colors';
 import { SelectionStyle, getSelectionStyles, akEditorSelectedNodeClassName } from '@atlaskit/editor-shared-styles';
-import { token } from '@atlaskit/tokens';
-export var placeholderTextStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  .ProseMirror span[data-placeholder] {\n    color: ", ";\n    display: inline;\n  }\n\n  .ProseMirror span.pm-placeholder {\n    display: inline;\n    color: ", ";\n  }\n  .ProseMirror span.pm-placeholder__text {\n    display: inline;\n    color: ", ";\n  }\n\n  .ProseMirror span.pm-placeholder.", " {\n    ", "\n  }\n\n  .ProseMirror span.pm-placeholder__text[data-placeholder]::after {\n    color: ", ";\n    cursor: text;\n    content: attr(data-placeholder);\n    display: inline;\n  }\n"])), token('color.text.subtlest', N300), token('color.text.subtlest', N300), token('color.text.subtlest', N300), akEditorSelectedNodeClassName, getSelectionStyles([SelectionStyle.Background]), token('color.text.subtlest', N300));
+export var placeholderTextStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  .ProseMirror span[data-placeholder] {\n    color: ", ";\n    display: inline;\n  }\n\n  .ProseMirror span.pm-placeholder {\n    display: inline;\n    color: ", ";\n  }\n  .ProseMirror span.pm-placeholder__text {\n    display: inline;\n    color: ", ";\n  }\n\n  .ProseMirror span.pm-placeholder.", " {\n    ", "\n  }\n\n  .ProseMirror span.pm-placeholder__text[data-placeholder]::after {\n    color: ", ";\n    cursor: text;\n    content: attr(data-placeholder);\n    display: inline;\n  }\n"])), "var(--ds-text-subtlest, ".concat(N300, ")"), "var(--ds-text-subtlest, ".concat(N300, ")"), "var(--ds-text-subtlest, ".concat(N300, ")"), akEditorSelectedNodeClassName, getSelectionStyles([SelectionStyle.Background]), "var(--ds-text-subtlest, ".concat(N300, ")"));

package/dist/esm/plugins/rule/styles.js

@@ -5,7 +5,6 @@ var _templateObject;
 import { css } from '@emotion/react';
 import { ruleSharedStyles } from '@atlaskit/editor-common/styles';
 import { akEditorLineHeight, akEditorSelectedBorderColor, akEditorSelectedNodeClassName } from '@atlaskit/editor-shared-styles';
-import { token } from '@atlaskit/tokens';
 export var ruleStyles = function ruleStyles(props) {
-  return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  .ProseMirror {\n    ", ";\n\n    hr {\n      cursor: pointer;\n      padding: 4px 0;\n      margin: calc(", "em - 4px) 0;\n      background-clip: content-box;\n\n      &.", " {\n        outline: none;\n        background-color: ", ";\n      }\n    }\n  }\n"])), ruleSharedStyles(props), akEditorLineHeight, akEditorSelectedNodeClassName, token('color.border.selected', akEditorSelectedBorderColor));
+  return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  .ProseMirror {\n    ", ";\n\n    hr {\n      cursor: pointer;\n      padding: 4px 0;\n      margin: calc(", "em - 4px) 0;\n      background-clip: content-box;\n\n      &.", " {\n        outline: none;\n        background-color: ", ";\n      }\n    }\n  }\n"])), ruleSharedStyles(props), akEditorLineHeight, akEditorSelectedNodeClassName, "var(--ds-border-selected, ".concat(akEditorSelectedBorderColor, ")"));
 };

package/dist/esm/plugins/status/ui/statusPicker.js

@@ -25,7 +25,6 @@ import { N0 } from '@atlaskit/theme/colors';
 import withOuterListeners from '../../../ui/with-outer-listeners';
 import { DEFAULT_STATUS } from '../actions';
 import { analyticsState, createStatusAnalyticsAndFire } from '../analytics';
-import { token } from '@atlaskit/tokens';
 var PopupWithListeners = withOuterListeners(Popup);
 export var InputMethod;
 
@@ -35,7 +34,7 @@ export var InputMethod;
   InputMethod["enterKey"] = "enterKey";
 })(InputMethod || (InputMethod = {}));
 
-var pickerContainer = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  background: ", ";\n  padding: ", "px 0;\n  border-radius: ", "px;\n  box-shadow: ", ";\n  input {\n    text-transform: uppercase;\n  }\n"])), token('elevation.surface.overlay', N0), gridSize(), borderRadius(), token('elevation.shadow.overlay', '0 0 1px rgba(9, 30, 66, 0.31), 0 4px 8px -2px rgba(9, 30, 66, 0.25)'));
+var pickerContainer = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  background: ", ";\n  padding: ", "px 0;\n  border-radius: ", "px;\n  box-shadow: ", ";\n  input {\n    text-transform: uppercase;\n  }\n"])), "var(--ds-surface-overlay, ".concat(N0, ")"), gridSize(), borderRadius(), "var(--ds-shadow-overlay, 0 0 1px rgba(9, 30, 66, 0.31), 0 4px 8px -2px rgba(9, 30, 66, 0.25))");
 export var StatusPickerWithoutAnalytcs = /*#__PURE__*/function (_React$Component) {
   _inherits(StatusPickerWithoutAnalytcs, _React$Component);
 

package/dist/esm/plugins/tasks-and-decisions/styles.js

@@ -5,5 +5,4 @@ var _templateObject;
 import { css } from '@emotion/react';
 import { TaskDecisionSharedCssClassName } from '@atlaskit/editor-common/styles';
 import { SelectionStyle, getSelectionStyles, akEditorDeleteBackgroundWithOpacity, akEditorDeleteBorder, akEditorSelectedBorderSize, akEditorSelectedNodeClassName } from '@atlaskit/editor-shared-styles';
-import { token } from '@atlaskit/tokens';
-export var taskDecisionStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  [data-decision-wrapper] {\n    cursor: pointer;\n  }\n\n  .", " > [data-decision-wrapper],\n  ol[data-node-type='decisionList'].", " {\n    border-radius: 4px;\n    ", "\n  }\n\n  .danger {\n    .", ".", "\n      > div {\n      box-shadow: 0 0 0 ", "px\n        ", ";\n      background-color: ", ";\n      &::after {\n        content: none; /* reset the Blanket selection style */\n      }\n    }\n  }\n"])), akEditorSelectedNodeClassName, akEditorSelectedNodeClassName, getSelectionStyles([SelectionStyle.BoxShadow, SelectionStyle.Blanket]), TaskDecisionSharedCssClassName.DECISION_CONTAINER, akEditorSelectedNodeClassName, akEditorSelectedBorderSize, token('color.border.danger', akEditorDeleteBorder), token('color.blanket.danger', akEditorDeleteBackgroundWithOpacity));
+export var taskDecisionStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  [data-decision-wrapper] {\n    cursor: pointer;\n  }\n\n  .", " > [data-decision-wrapper],\n  ol[data-node-type='decisionList'].", " {\n    border-radius: 4px;\n    ", "\n  }\n\n  .danger {\n    .", ".", "\n      > div {\n      box-shadow: 0 0 0 ", "px\n        ", ";\n      background-color: ", ";\n      &::after {\n        content: none; /* reset the Blanket selection style */\n      }\n    }\n  }\n"])), akEditorSelectedNodeClassName, akEditorSelectedNodeClassName, getSelectionStyles([SelectionStyle.BoxShadow, SelectionStyle.Blanket]), TaskDecisionSharedCssClassName.DECISION_CONTAINER, akEditorSelectedNodeClassName, akEditorSelectedBorderSize, "var(--ds-border-danger, ".concat(akEditorDeleteBorder, ")"), "var(--ds-blanket-danger, ".concat(akEditorDeleteBackgroundWithOpacity, ")"));

package/dist/esm/plugins/text-color/commands/change-color.js

@@ -41,8 +41,7 @@ export var changeColor = function changeColor(color) {
     if (textColor) {
       var pluginState = pluginKey.getState(state);
       var activeColor = getActiveColor(state);
-      var withColorAnalytics = createWithColorAnalytics(color, activeColor, // palette is a subset of paletteExpanded
-      pluginState.paletteExpanded || pluginState.palette);
+      var withColorAnalytics = createWithColorAnalytics(color, activeColor, pluginState.palette);
 
       if (pluginState.disabled) {
         return false;

package/dist/esm/plugins/text-color/pm-plugins/main.js

@@ -7,7 +7,7 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 
 import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
 import { PluginKey } from 'prosemirror-state';
-import { textColorPaletteExtended } from '../../../ui/ColorPalette/Palettes/textColorPalette';
+import { textColorPalette } from '../../../ui/ColorPalette/Palettes/textColorPalette';
 import { DEFAULT_BORDER_COLOR } from '../../../ui/ColorPalette/Palettes/common';
 import { DEFAULT_COLOR, getActiveColor } from '../utils/color';
 import { getDisabledState } from '../utils/disabled';
@@ -18,7 +18,7 @@ export function createInitialPluginState(editorState, pluginConfig) {
     value: defaultColor.color,
     label: defaultColor.label,
     border: DEFAULT_BORDER_COLOR
-  }].concat(_toConsumableArray(textColorPaletteExtended));
+  }].concat(_toConsumableArray(textColorPalette));
   var state = {
     color: getActiveColor(editorState),
     disabled: getDisabledState(editorState),

package/dist/esm/plugins/text-color/ui/ToolbarTextColor/index.js

@@ -21,7 +21,6 @@ import { defineMessages, injectIntl } from 'react-intl-next';
 import { akEditorMenuZIndex } from '@atlaskit/editor-shared-styles';
 import ExpandIcon from '@atlaskit/icon/glyph/chevron-down';
 import ColorPalette from '../../../../ui/ColorPalette';
-import { textColorPalette as originalTextColors } from '../../../../ui/ColorPalette/Palettes/textColorPalette';
 import Dropdown from '../../../../ui/Dropdown';
 import { expandIconWrapperStyle, wrapperStyle, separatorStyles, triggerWrapperStyles } from '../../../../ui/styles';
 import ToolbarButton, { TOOLBAR_BUTTON } from '../../../../ui/ToolbarButton';
@@ -77,20 +76,14 @@ export var ToolbarTextColor = /*#__PURE__*/function (_React$Component) {
       if (!disabled) {
         var _this$props$editorVie;
 
-        var _this$props$pluginSta = _this.props.pluginState,
-            palette = _this$props$pluginSta.palette,
-            defaultColor = _this$props$pluginSta.defaultColor; // we store color names in analytics
+        var palette = _this.props.pluginState.palette; // we store color names in analytics
 
         var swatch = palette.find(function (sw) {
           return sw.value === color;
         });
-        var isNewColor = color !== defaultColor && !originalTextColors.some(function (col) {
-          return col.value === color;
-        });
 
         _this.dispatchAnalyticsEvent(_this.buildAnalyticsSelectColor({
-          color: (swatch ? swatch.label : color).toLowerCase(),
-          isNewColor: isNewColor
+          color: (swatch ? swatch.label : color).toLowerCase()
         }));
 
         _this.handleOpenChange({

package/dist/esm/plugins/type-ahead/pm-plugins/decorations.js

@@ -12,7 +12,6 @@ import { WrapperTypeAhead } from '../ui/WrapperTypeAhead';
 import { StatsModifier } from '../stats-modifier';
 import { getTypeAheadQuery } from '../utils';
 import { closeTypeAhead } from '../transforms/close-type-ahead';
-import { token } from '@atlaskit/tokens';
 export var factoryDecorations = function factoryDecorations(_ref) {
   var intl = _ref.intl,
       popupMountRef = _ref.popupMountRef,
@@ -51,7 +50,7 @@ export var factoryDecorations = function factoryDecorations(_ref) {
 
       typeaheadComponent.dataset.editorPopup = 'true';
       typeaheadComponent.dataset.typeAhead = TYPE_AHEAD_DECORATION_DATA_ATTRIBUTE;
-      typeaheadComponent.style.color = token('color.text.accent.blue', B400);
+      typeaheadComponent.style.color = "var(--ds-text-accent-blue, ".concat(B400, ")");
       typeaheadComponent.style.backgroundColor = 'transparent';
 
       var onUndoRedo = function onUndoRedo(inputType) {

package/dist/esm/plugins/type-ahead/ui/InputQuery.js

@@ -13,7 +13,6 @@ import { TYPE_AHEAD_DECORATION_ELEMENT_ID } from '../constants';
 import { AssistiveText } from './AssistiveText';
 import { typeAheadListMessages } from '../messages';
 import { useIntl } from 'react-intl-next';
-import { token } from '@atlaskit/tokens';
 import * as colors from '@atlaskit/theme/colors';
 
 var isNavigationKey = function isNavigationKey(event) {
@@ -251,7 +250,7 @@ export var InputQuery = /*#__PURE__*/React.memo(function (_ref) {
     background: 'transparent',
     border: 'none',
     '&&': {
-      color: "".concat(token('color.link', colors.B400))
+      color: "".concat("var(--ds-link, ".concat(colors.B400, ")"))
     }
   });
   useLayoutEffect(function () {

package/dist/esm/plugins/type-ahead/ui/TypeAheadListItem.js

@@ -13,24 +13,23 @@ import { relativeFontSizeToBase16 } from '@atlaskit/editor-shared-styles';
 import IconFallback from '../../quick-insert/assets/fallback';
 import { shortcutStyle } from '../../../ui/styles';
 import { SelectItemMode } from '@atlaskit/editor-common/type-ahead';
-import { token } from '@atlaskit/tokens';
 import { useIntl } from 'react-intl-next';
 import { typeAheadListMessages } from '../messages';
 export var ICON_HEIGHT = 40;
 export var ICON_WIDTH = 40;
 export var ITEM_PADDING = 12;
-export var itemIcon = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  width: ", "px;\n  height: ", "px;\n  overflow: hidden;\n  border: 1px solid ", "; /* N60 at 50% */\n  border-radius: ", "px;\n  box-sizing: border-box;\n\n  display: flex;\n  justify-content: center;\n  align-items: center;\n\n  div {\n    width: ", "px;\n    height: ", "px;\n  }\n"])), ICON_WIDTH, ICON_HEIGHT, token('color.border', 'rgba(223, 225, 229, 0.5)'), borderRadius(), ICON_WIDTH, ICON_HEIGHT);
+export var itemIcon = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  width: ", "px;\n  height: ", "px;\n  overflow: hidden;\n  border: 1px solid ", "; /* N60 at 50% */\n  border-radius: ", "px;\n  box-sizing: border-box;\n\n  display: flex;\n  justify-content: center;\n  align-items: center;\n\n  div {\n    width: ", "px;\n    height: ", "px;\n  }\n"])), ICON_WIDTH, ICON_HEIGHT, "var(--ds-border, rgba(223, 225, 229, 0.5))", borderRadius(), ICON_WIDTH, ICON_HEIGHT);
 var itemBody = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: row;\n  flex-wrap: nowrap;\n  justify-content: space-between;\n"])));
 
 var itemText = function itemText(theme) {
   return css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  white-space: initial;\n  color: ", ";\n  .item-title {\n    line-height: 1.4;\n  }\n  .item-description {\n    font-size: ", ";\n    color: ", ";\n    margin-top: 3px;\n  }\n"])), themed({
-    light: token('color.text', N800),
-    dark: token('color.text', DN600)
-  })(theme), relativeFontSizeToBase16(12), token('color.text.subtlest', N200));
+    light: "var(--ds-text, ".concat(N800, ")"),
+    dark: "var(--ds-text, ".concat(DN600, ")")
+  })(theme), relativeFontSizeToBase16(12), "var(--ds-text-subtlest, ".concat(N200, ")"));
 };
 
 var itemAfter = css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  flex: 0 0 auto;\n"])));
-var customRenderItemDivStyle = css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  overflow: hidden;\n  &:hover {\n    background-color: ", ";\n  }\n  &:focus {\n    box-shadow: inset 0px 0px 0px 2px ", ";\n    outline: none;\n  }\n"])), token('color.background.selected', N30), token('color.border.focused', B100));
+var customRenderItemDivStyle = css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  overflow: hidden;\n  &:hover {\n    background-color: ", ";\n  }\n  &:focus {\n    box-shadow: inset 0px 0px 0px 2px ", ";\n    outline: none;\n  }\n"])), "var(--ds-background-selected, ".concat(N30, ")"), "var(--ds-border-focused, ".concat(B100, ")"));
 /**
  * This CSS emulates the desired behaviour with :focus-visible for firefox.
  * Firefox unfortunately does not register keyboard focus if user mouseDown and drag a typeahead item
@@ -39,14 +38,14 @@ var customRenderItemDivStyle = css(_templateObject5 || (_templateObject5 = _tagg
 
 var selectionFrame = {
   '& > button:focus': {
-    boxShadow: "inset 0px 0px 0px 2px ".concat(token('color.border.focused', B100)),
+    boxShadow: "inset 0px 0px 0px 2px ".concat("var(--ds-border-focused, ".concat(B100, ")")),
     outline: 'none',
     '&:active': {
       boxShadow: 'none'
     }
   }
 };
-var selectedStyle = css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  background-color: ", ";\n"])), token('color.background.selected', N30));
+var selectedStyle = css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  background-color: ", ";\n"])), "var(--ds-background-selected, ".concat(N30, ")"));
 var FallbackIcon = /*#__PURE__*/React.memo(function (_ref) {
   var label = _ref.label;
   return jsx(IconFallback, null);

package/dist/esm/plugins/type-ahead/ui/TypeAheadPopup.js

@@ -15,9 +15,8 @@ import { ACTION, ACTION_SUBJECT, EVENT_TYPE } from '@atlaskit/editor-common/anal
 import { CloseSelectionOptions, TYPE_AHEAD_DECORATION_DATA_ATTRIBUTE, TYPE_AHEAD_POPUP_CONTENT_CLASS } from '../constants';
 import { TypeAheadList } from './TypeAheadList';
 import { ITEM_PADDING } from './TypeAheadListItem';
-import { token } from '@atlaskit/tokens';
 var DEFAULT_TYPEAHEAD_MENU_HEIGHT = 380;
-var typeAheadContent = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  background: ", ";\n  border-radius: ", "px;\n  box-shadow: ", ";\n  padding: ", "px 0;\n  width: 320px;\n  max-height: 380px; /* ~5.5 visibile items */\n  overflow-y: auto;\n  -ms-overflow-style: -ms-autohiding-scrollbar;\n  position: relative;\n"])), token('elevation.surface.overlay', N0), borderRadius(), token('elevation.shadow.overlay', "0 0 1px ".concat(N60A, ", 0 4px 8px -2px ").concat(N50A)), gridSize() / 2);
+var typeAheadContent = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  background: ", ";\n  border-radius: ", "px;\n  box-shadow: ", ";\n  padding: ", "px 0;\n  width: 320px;\n  max-height: 380px; /* ~5.5 visibile items */\n  overflow-y: auto;\n  -ms-overflow-style: -ms-autohiding-scrollbar;\n  position: relative;\n"])), "var(--ds-surface-overlay, ".concat(N0, ")"), borderRadius(), "var(--ds-shadow-overlay, ".concat("0 0 1px ".concat(N60A, ", 0 4px 8px -2px ").concat(N50A), ")"), gridSize() / 2);
 
 var Highlight = function Highlight(_ref) {
   var state = _ref.state,

package/dist/esm/plugins/unsupported-content/styles.js

@@ -4,11 +4,10 @@ var _templateObject;
 
 import { css } from '@emotion/react';
 import { SelectionStyle, getSelectionStyles, akEditorDeleteBackgroundWithOpacity, akEditorSelectedBorderSize, akEditorDeleteBorder, akEditorSelectedNodeClassName } from '@atlaskit/editor-shared-styles';
-import { token } from '@atlaskit/tokens';
 export var UnsupportedSharedCssClassName = {
   BLOCK_CONTAINER: 'unsupportedBlockView-content-wrap',
   INLINE_CONTAINER: 'unsupportedInlineView-content-wrap'
 };
 var inlineUnsupportedSelector = ".".concat(UnsupportedSharedCssClassName.INLINE_CONTAINER, " > span:nth-of-type(2)");
 var blockUnsupportedSelector = ".".concat(UnsupportedSharedCssClassName.BLOCK_CONTAINER, " > div");
-export var unsupportedStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  ", ", ", " {\n    cursor: pointer;\n  }\n\n  .", "", ",\n    .", "", " {\n    ", "\n  }\n\n  .danger {\n    .", "", ",\n      .", "", " {\n      border: ", "px solid\n        ", ";\n      background-color: ", ";\n    }\n  }\n"])), blockUnsupportedSelector, inlineUnsupportedSelector, akEditorSelectedNodeClassName, blockUnsupportedSelector, akEditorSelectedNodeClassName, inlineUnsupportedSelector, getSelectionStyles([SelectionStyle.Background, SelectionStyle.Border]), akEditorSelectedNodeClassName, blockUnsupportedSelector, akEditorSelectedNodeClassName, inlineUnsupportedSelector, akEditorSelectedBorderSize, token('color.border.danger', akEditorDeleteBorder), token('color.blanket.danger', akEditorDeleteBackgroundWithOpacity));
+export var unsupportedStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  ", ", ", " {\n    cursor: pointer;\n  }\n\n  .", "", ",\n    .", "", " {\n    ", "\n  }\n\n  .danger {\n    .", "", ",\n      .", "", " {\n      border: ", "px solid\n        ", ";\n      background-color: ", ";\n    }\n  }\n"])), blockUnsupportedSelector, inlineUnsupportedSelector, akEditorSelectedNodeClassName, blockUnsupportedSelector, akEditorSelectedNodeClassName, inlineUnsupportedSelector, getSelectionStyles([SelectionStyle.Background, SelectionStyle.Border]), akEditorSelectedNodeClassName, blockUnsupportedSelector, akEditorSelectedNodeClassName, inlineUnsupportedSelector, akEditorSelectedBorderSize, "var(--ds-border-danger, ".concat(akEditorDeleteBorder, ")"), "var(--ds-blanket-danger, ".concat(akEditorDeleteBackgroundWithOpacity, ")"));

package/dist/esm/ui/Addon/Dropdown/styles.js

@@ -5,5 +5,4 @@ var _templateObject;
 import { css } from '@emotion/react';
 import { borderRadius } from '@atlaskit/theme/constants';
 import { N60A } from '@atlaskit/theme/colors';
-import { token } from '@atlaskit/tokens';
-export var dropdown = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  background: ", ";\n  border-radius: ", "px;\n  box-shadow: ", ";\n  box-sizing: border-box;\n  padding: 4px 0;\n"])), token('elevation.surface.overlay', 'white'), borderRadius(), token('elevation.shadow.overlay', "0 4px 8px -2px ".concat(N60A, ", 0 0 1px ").concat(N60A)));
+export var dropdown = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  background: ", ";\n  border-radius: ", "px;\n  box-shadow: ", ";\n  box-sizing: border-box;\n  padding: 4px 0;\n"])), "var(--ds-surface-overlay, white)", borderRadius(), "var(--ds-shadow-overlay, ".concat("0 4px 8px -2px ".concat(N60A, ", 0 0 1px ").concat(N60A), ")"));

package/dist/esm/ui/Addon/DropdownItem/styles.js

@@ -4,5 +4,4 @@ var _templateObject;
 
 import { css } from '@emotion/react';
 import { N800, N20 } from '@atlaskit/theme/colors';
-import { token } from '@atlaskit/tokens';
-export var dropdownItem = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  cursor: pointer;\n  text-decoration: none;\n  padding: 8px 32px 8px 12px;\n  color: ", ";\n  > span {\n    display: flex;\n    margin-right: 8px;\n  }\n  &:hover {\n    background-color: ", ";\n  }\n"])), token('color.text', N800), token('color.background.neutral.subtle.hovered', N20));
+export var dropdownItem = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  cursor: pointer;\n  text-decoration: none;\n  padding: 8px 32px 8px 12px;\n  color: ", ";\n  > span {\n    display: flex;\n    margin-right: 8px;\n  }\n  &:hover {\n    background-color: ", ";\n  }\n"])), "var(--ds-text, ".concat(N800, ")"), "var(--ds-background-neutral-subtle-hovered, ".concat(N20, ")"));

package/dist/esm/ui/Appearance/Comment/Comment.js

@@ -20,7 +20,6 @@ import ButtonGroup from '@atlaskit/button/button-group';
 import Button from '@atlaskit/button/custom-theme-button';
 import { borderRadius } from '@atlaskit/theme/constants';
 import { N40 } from '@atlaskit/theme/colors';
-import { token } from '@atlaskit/tokens';
 import Toolbar from '../../Toolbar';
 import PluginSlot from '../../PluginSlot';
 import WithPluginState from '../../WithPluginState';
@@ -40,7 +39,7 @@ import { TableControlsPadding, MainToolbar, mainToolbarCustomComponentsSlotStyle
 import { createEditorContentStyle } from '../../ContentStyles';
 var CommentEditorMargin = 14;
 var CommentEditorSmallerMargin = 8;
-var commentEditorStyle = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n\n  .less-margin .ProseMirror {\n    margin: 12px ", "px ", "px;\n  }\n\n  min-width: 272px;\n  /* Border + Toolbar + Footer + (Paragraph + ((Paragraph + Margin) * (DefaultLines - 1)) */\n  /* calc(2px + 40px + 24px + ( 20px + (32px * 2))) */\n\n  height: auto;\n  background-color: ", ";\n  border: 1px solid ", ";\n  box-sizing: border-box;\n  border-radius: ", "px;\n\n  max-width: inherit;\n  word-wrap: break-word;\n"])), CommentEditorSmallerMargin, CommentEditorSmallerMargin, token('color.background.input', 'white'), token('color.border', N40), borderRadius());
+var commentEditorStyle = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n\n  .less-margin .ProseMirror {\n    margin: 12px ", "px ", "px;\n  }\n\n  min-width: 272px;\n  /* Border + Toolbar + Footer + (Paragraph + ((Paragraph + Margin) * (DefaultLines - 1)) */\n  /* calc(2px + 40px + 24px + ( 20px + (32px * 2))) */\n\n  height: auto;\n  background-color: ", ";\n  border: 1px solid ", ";\n  box-sizing: border-box;\n  border-radius: ", "px;\n\n  max-width: inherit;\n  word-wrap: break-word;\n"])), CommentEditorSmallerMargin, CommentEditorSmallerMargin, "var(--ds-background-input, white)", "var(--ds-border, ".concat(N40, ")"), borderRadius());
 var ContentArea = createEditorContentStyle(css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  flex-grow: 1;\n  overflow-x: hidden;\n  overflow-y: auto;\n  line-height: 24px;\n\n  /** Hack for Bitbucket to ensure entire editorView gets drop event; see ED-3294 **/\n  /** Hack for table controls. Otherwise margin collapse and controls are misplaced. **/\n  .ProseMirror {\n    margin: 12px ", "px ", "px;\n  }\n\n  .gridParent {\n    margin-left: ", "px;\n    margin-right: ", "px;\n    width: calc(100% + ", "px);\n  }\n\n  padding: ", "px;\n\n  ", ";\n"])), CommentEditorMargin, CommentEditorMargin, CommentEditorMargin - GRID_GUTTER, CommentEditorMargin - GRID_GUTTER, CommentEditorMargin - GRID_GUTTER, TableControlsPadding, tableCommentEditorStyles));
 ContentArea.displayName = 'ContentArea';
 var secondaryToolbarStyle = css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  box-sizing: border-box;\n  justify-content: flex-end;\n  align-items: center;\n  display: flex;\n  padding: 12px 1px;\n"])));

package/dist/esm/ui/Appearance/Comment/Toolbar.js

@@ -8,11 +8,10 @@ import React, { useEffect, useState } from 'react';
 import { css, jsx } from '@emotion/react';
 import { gridSize } from '@atlaskit/theme/constants';
 import { N30 } from '@atlaskit/theme/colors';
-import { token } from '@atlaskit/tokens';
 import { akEditorToolbarKeylineHeight, akEditorMenuZIndex } from '@atlaskit/editor-shared-styles';
 export var TableControlsPadding = 20;
-var mainToolbarWrapperStyle = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  position: relative;\n  align-items: center;\n  padding: ", "px ", "px 0;\n  display: flex;\n  height: auto;\n  background-color: ", ";\n  box-shadow: none;\n  padding-left: ", "px;\n\n  & > div {\n    > :first-child:not(style),\n    > style:first-child + * {\n      margin-left: 0;\n    }\n  }\n\n  .block-type-btn {\n    padding-left: 0;\n  }\n"])), gridSize(), gridSize(), token('elevation.surface', 'white'), TableControlsPadding);
-var stickyToolbarWrapperStyle = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  /* stylelint-disable declaration-block-no-duplicate-properties */\n  position: relative;\n  position: sticky;\n  /* stylelint-enable declaration-block-no-duplicate-properties */\n  padding-bottom: ", "px;\n  z-index: ", ";\n  transition: box-shadow ease-in-out 0.2s;\n  &.show-keyline {\n    box-shadow: 0 ", "px 0 0\n      ", ";\n  }\n"])), gridSize(), akEditorMenuZIndex, akEditorToolbarKeylineHeight, token('color.border', N30));
+var mainToolbarWrapperStyle = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  position: relative;\n  align-items: center;\n  padding: ", "px ", "px 0;\n  display: flex;\n  height: auto;\n  background-color: ", ";\n  box-shadow: none;\n  padding-left: ", "px;\n\n  & > div {\n    > :first-child:not(style),\n    > style:first-child + * {\n      margin-left: 0;\n    }\n  }\n\n  .block-type-btn {\n    padding-left: 0;\n  }\n"])), gridSize(), gridSize(), "var(--ds-surface, white)", TableControlsPadding);
+var stickyToolbarWrapperStyle = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  /* stylelint-disable declaration-block-no-duplicate-properties */\n  position: relative;\n  position: sticky;\n  /* stylelint-enable declaration-block-no-duplicate-properties */\n  padding-bottom: ", "px;\n  z-index: ", ";\n  transition: box-shadow ease-in-out 0.2s;\n  &.show-keyline {\n    box-shadow: 0 ", "px 0 0\n      ", ";\n  }\n"])), gridSize(), akEditorMenuZIndex, akEditorToolbarKeylineHeight, "var(--ds-border, ".concat(N30, ")"));
 
 var StickyToolbar = function StickyToolbar(props) {
   var _useState = useState(0),

package/dist/esm/ui/Appearance/FullPage/FullPageToolbar.js

@@ -73,13 +73,31 @@ export var EditorToolbar = /*#__PURE__*/React.memo(function (props) {
       };
     }
   });
+
+  var isShortcutToFocusToolbar = function isShortcutToFocusToolbar(event) {
+    //Alt + F9 to reach first element in this main toolbar
+    return event.altKey && (event.key === 'F9' || event.keyCode === 120);
+  };
+
+  var handleEscape = function handleEscape(event) {
+    var _props$editorView;
+
+    if (!((_props$editorView = props.editorView) !== null && _props$editorView !== void 0 && _props$editorView.hasFocus())) {
+      var _props$editorView2;
+
+      (_props$editorView2 = props.editorView) === null || _props$editorView2 === void 0 ? void 0 : _props$editorView2.focus();
+    }
+  };
+
   return jsx(ContextPanelConsumer, null, function (_ref) {
     var _props$featureFlags8, _props$featureFlags9, _props$featureFlags10;
 
     var contextPanelWidth = _ref.width;
     return jsx(ToolbarArrowKeyNavigationProvider, {
       editorView: props.editorView,
-      childComponentSelector: "[data-testid='ak-editor-main-toolbar']"
+      childComponentSelector: "[data-testid='ak-editor-main-toolbar']",
+      isShortcutToFocusToolbar: isShortcutToFocusToolbar,
+      handleEscape: handleEscape
     }, jsx("div", {
       css: mainToolbarStyle(props.showKeyline || contextPanelWidth > 0, !!((_props$featureFlags8 = props.featureFlags) !== null && _props$featureFlags8 !== void 0 && _props$featureFlags8.twoLineEditorToolbar)),
       "data-testid": "ak-editor-main-toolbar"

package/dist/esm/ui/Appearance/FullPage/MainToolbar.js

@@ -4,15 +4,14 @@ var _templateObject, _templateObject2, _templateObject3, _templateObject4, _temp
 
 import { css } from '@emotion/react';
 import { N30 } from '@atlaskit/theme/colors';
-import { token } from '@atlaskit/tokens';
 import { gridSize } from '@atlaskit/theme/constants';
 import { akEditorMenuZIndex, akEditorSwoopCubicBezier, akEditorToolbarKeylineHeight, akEditorMobileMaxWidth } from '@atlaskit/editor-shared-styles';
 export var MAXIMUM_TWO_LINE_TOOLBAR_BREAKPOINT = 868;
 var toolbarLineHeight = 56; // box-shadow is overriden by the mainToolbar
 
-var mainToolbarWithKeyline = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  box-shadow: 0 ", "px 0 0\n    ", ";\n"])), akEditorToolbarKeylineHeight, token('color.border', N30));
+var mainToolbarWithKeyline = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  box-shadow: 0 ", "px 0 0\n    ", ";\n"])), akEditorToolbarKeylineHeight, "var(--ds-border, ".concat(N30, ")"));
 var mainToolbarTwoLineStyle = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  @media (max-width: ", "px) {\n    flex-wrap: wrap;\n    height: calc(", "px * 2);\n  }\n"])), MAXIMUM_TWO_LINE_TOOLBAR_BREAKPOINT, toolbarLineHeight);
-var mainToolbar = css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  position: relative;\n  align-items: center;\n  box-shadow: none;\n  transition: box-shadow 200ms ", ";\n  z-index: ", ";\n  display: flex;\n  height: ", "px;\n  flex-shrink: 0;\n  // TODO: https://product-fabric.atlassian.net/browse/DSP-4456\n  background-color: ", ";\n\n  & object {\n    height: 0 !important;\n  }\n\n  @media (max-width: ", "px) {\n    display: grid;\n    height: calc(", "px * 2);\n  }\n"])), akEditorSwoopCubicBezier, akEditorMenuZIndex, toolbarLineHeight, token('elevation.surface', 'white'), akEditorMobileMaxWidth, toolbarLineHeight);
+var mainToolbar = css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  position: relative;\n  align-items: center;\n  box-shadow: none;\n  transition: box-shadow 200ms ", ";\n  z-index: ", ";\n  display: flex;\n  height: ", "px;\n  flex-shrink: 0;\n  // TODO: https://product-fabric.atlassian.net/browse/DSP-4456\n  background-color: ", ";\n\n  & object {\n    height: 0 !important;\n  }\n\n  @media (max-width: ", "px) {\n    display: grid;\n    height: calc(", "px * 2);\n  }\n"])), akEditorSwoopCubicBezier, akEditorMenuZIndex, toolbarLineHeight, "var(--ds-surface, white)", akEditorMobileMaxWidth, toolbarLineHeight);
 export var mainToolbarStyle = function mainToolbarStyle(showKeyline, twoLineEditorToolbar) {
   return [mainToolbar, showKeyline && mainToolbarWithKeyline, twoLineEditorToolbar && mainToolbarTwoLineStyle];
 };

package/dist/esm/ui/ChromeCollapsed/styles.js

@@ -6,5 +6,4 @@ import { css } from '@emotion/react';
 import { akEditorSubtleAccent, relativeFontSizeToBase16 } from '@atlaskit/editor-shared-styles';
 import { borderRadius } from '@atlaskit/theme/constants';
 import { N300, N50 } from '@atlaskit/theme/colors';
-import { token } from '@atlaskit/tokens';
-export var inputStyle = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  /* Normal .className gets overridden by input[type=text] hence this hack to produce input.className */\n  input& {\n    background-color: ", ";\n    border: 1px solid ", ";\n    border-radius: ", "px;\n    box-sizing: border-box;\n    height: 40px;\n    padding-left: 20px;\n    padding-top: 12px;\n    padding-bottom: 12px;\n    font-size: ", ";\n    width: 100%;\n    font-weight: 400;\n    line-height: 1.42857142857143;\n    letter-spacing: -0.005em;\n    color: ", ";\n\n    &:hover {\n      background-color: ", ";\n      border-color: ", ";\n      cursor: text;\n    }\n  }\n"])), token('color.background.input', 'white'), token('color.border.input', akEditorSubtleAccent), borderRadius(), relativeFontSizeToBase16(14), token('color.text.subtlest', N300), token('color.background.input.hovered', 'white'), token('color.border.input', N50));
+export var inputStyle = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  /* Normal .className gets overridden by input[type=text] hence this hack to produce input.className */\n  input& {\n    background-color: ", ";\n    border: 1px solid ", ";\n    border-radius: ", "px;\n    box-sizing: border-box;\n    height: 40px;\n    padding-left: 20px;\n    padding-top: 12px;\n    padding-bottom: 12px;\n    font-size: ", ";\n    width: 100%;\n    font-weight: 400;\n    line-height: 1.42857142857143;\n    letter-spacing: -0.005em;\n    color: ", ";\n\n    &:hover {\n      background-color: ", ";\n      border-color: ", ";\n      cursor: text;\n    }\n  }\n"])), "var(--ds-background-input, white)", "var(--ds-border-input, ".concat(akEditorSubtleAccent, ")"), borderRadius(), relativeFontSizeToBase16(14), "var(--ds-text-subtlest, ".concat(N300, ")"), "var(--ds-background-input-hovered, white)", "var(--ds-border-input, ".concat(N50, ")"));

package/dist/esm/ui/ColorPalette/Palettes/textColorPalette.js

@@ -1 +1 @@
-export { textColorPalette, textColorPaletteExtended } from '@atlaskit/editor-common/ui-color';
+export { textColorPalette } from '@atlaskit/editor-common/ui-color';

package/dist/esm/ui/ColorPickerButton/index.js

@@ -1,7 +1,7 @@
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
 
-var _templateObject, _templateObject2;
+var _templateObject, _templateObject2, _templateObject3;
 
 /** @jsx jsx */
 import React from 'react';
@@ -15,8 +15,8 @@ import ColorPalette from '../ColorPalette';
 import { DEFAULT_BORDER_COLOR } from '../ColorPalette/Palettes/common';
 import { withAnalyticsContext, withAnalyticsEvents } from '@atlaskit/analytics-next';
 import { editorAnalyticsChannel } from '../../plugins/analytics/consts';
-import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE } from '../../plugins/analytics/types'; // helps adjusts position of popup
-
+import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE } from '../../plugins/analytics/types';
+// helps adjusts position of popup
 var colorPickerButtonWrapper = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  position: relative;\n"]))); // Control the size of color picker buttons and preview
 // TODO: https://product-fabric.atlassian.net/browse/DSP-4134
 
@@ -104,6 +104,7 @@ var ColorPickerButton = function ColorPickerButton(props) {
   };
 
   var title = props.title || '';
+  var buttonStyle = css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n    padding: 6px;\n    background-color: ", ";\n    &:before {\n      display: flex;\n      justify-content: center;\n      align-items: center;\n      align-self: center;\n      content: '';\n      border: 1px solid ", ";\n      border-radius: ", "px;\n      background-color: ", ";\n      width: ", "px;\n      height: ", "px;\n      padding: 0;\n    }\n  "])), "var(--ds-background-neutral, transparent)", DEFAULT_BORDER_COLOR, borderRadius(), props.currentColor || 'transparent', ((_props$size = props.size) === null || _props$size === void 0 ? void 0 : _props$size.width) || 14, ((_props$size2 = props.size) === null || _props$size2 === void 0 ? void 0 : _props$size2.height) || 14);
   return jsx("div", {
     css: colorPickerButtonWrapper
   }, jsx(Tooltip, {
@@ -114,13 +115,7 @@ var ColorPickerButton = function ColorPickerButton(props) {
     "aria-label": title,
     spacing: "compact",
     onClick: togglePopup,
-    style: {
-      backgroundColor: props.currentColor || 'transparent',
-      border: "1px solid ".concat(DEFAULT_BORDER_COLOR),
-      width: "".concat(((_props$size = props.size) === null || _props$size === void 0 ? void 0 : _props$size.width) || 20, "px"),
-      height: "".concat(((_props$size2 = props.size) === null || _props$size2 === void 0 ? void 0 : _props$size2.height) || 20, "px"),
-      padding: 0
-    }
+    css: buttonStyle
   })), renderPopup());
 };
 

package/dist/esm/ui/ConfigPanel/Fields/CheckboxGroup.js

@@ -11,7 +11,6 @@ import { Fragment, useCallback } from 'react';
 import { css, jsx } from '@emotion/react';
 import { Checkbox as AKCheckbox } from '@atlaskit/checkbox';
 import { Field, Fieldset as AKFieldset } from '@atlaskit/form';
-import { token } from '@atlaskit/tokens';
 import { ValidationError } from '../types';
 import FieldMessages from '../FieldMessages';
 
@@ -21,7 +20,7 @@ function _validate(value, isRequired) {
   }
 }
 
-var requiredIndicator = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  color: ", ";\n"])), token('color.text.danger', '#bf2600'));
+var requiredIndicator = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  color: ", ";\n"])), "var(--ds-text-danger, #bf2600)");
 
 function CheckboxGroupInner(_ref) {
   var label = _ref.label,

package/dist/esm/ui/ConfigPanel/Fields/Expand.js

@@ -8,13 +8,12 @@ import React, { useState } from 'react';
 import { css, jsx } from '@emotion/react';
 import { injectIntl } from 'react-intl-next';
 import { N40 } from '@atlaskit/theme/colors';
-import { token } from '@atlaskit/tokens';
 import ChevronDownIcon from '@atlaskit/icon/glyph/chevron-down';
 import ChevronRightIcon from '@atlaskit/icon/glyph/chevron-right';
 import Button from '@atlaskit/button';
 import { gridSize } from '@atlaskit/theme/constants';
 import { messages } from '../messages';
-export var expandContainer = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  border-bottom: 1px solid ", ";\n"])), token('color.border', N40));
+export var expandContainer = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  border-bottom: 1px solid ", ";\n"])), "var(--ds-border, ".concat(N40, ")"));
 export var expandControl = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  display: flex;\n  height: ", "px;\n  justify-content: center;\n  padding-right: ", "px;\n"])), gridSize() * 6, gridSize());
 var chevronContainer = css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n\n  & > button {\n    width: ", "px;\n    height: ", "px;\n  }\n"])), gridSize() * 3, gridSize() * 3);
 var labelContainer = css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  width: 100%;\n  align-items: center;\n  display: flex;\n  font-weight: 500;\n"])));

package/dist/esm/ui/ConfigPanel/Fields/Fieldset.js

@@ -31,8 +31,7 @@ import { messages } from '../messages';
 import { getNameFromDuplicateField, isDuplicateField } from '../utils';
 import { gridSize } from '@atlaskit/theme/constants';
 import { N40A } from '@atlaskit/theme/colors';
-import { token } from '@atlaskit/tokens';
-var actionsWrapper = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  border-top: 1px solid ", ";\n  margin-top: ", "px;\n  padding-top: ", "px;\n"])), token('color.border', N40A), gridSize() * 2, gridSize() * 2);
+var actionsWrapper = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  border-top: 1px solid ", ";\n  margin-top: ", "px;\n  padding-top: ", "px;\n"])), "var(--ds-border, ".concat(N40A, ")"), gridSize() * 2, gridSize() * 2);
 
 var populateFromParameters = function populateFromParameters(parameters, fields) {
   if (Object.keys(parameters).length) {

package/dist/esm/ui/ConfigPanel/Fields/common/RequiredIndicator.js

@@ -4,5 +4,4 @@ var _templateObject;
 
 import { css } from '@emotion/react';
 import { R500 } from '@atlaskit/theme/colors';
-import { token } from '@atlaskit/tokens';
-export var requiredIndicator = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  color: ", ";\n"])), token('color.text.danger', R500));
+export var requiredIndicator = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  color: ", ";\n"])), "var(--ds-text-danger, ".concat(R500, ")"));

package/dist/esm/ui/ConfigPanel/Header.js

@@ -11,7 +11,6 @@ import Button from '@atlaskit/button/custom-theme-button';
 import CrossIcon from '@atlaskit/icon/glyph/cross';
 import { borderRadius } from '@atlaskit/theme/constants';
 import { N200 } from '@atlaskit/theme/colors';
-import { token } from '@atlaskit/tokens';
 import { relativeFontSizeToBase16 } from '@atlaskit/editor-shared-styles';
 import { messages } from './messages';
 var iconWidth = 40;
@@ -19,10 +18,10 @@ var buttonWidth = 40;
 var margin = 16;
 var gapSizeForEllipsis = iconWidth + buttonWidth + margin * 2;
 var item = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  margin-bottom: 24px;\n"])));
-var itemIcon = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  width: ", "px;\n  height: ", "px;\n  overflow: hidden;\n  border: 1px solid ", "; /* N60 at 50% */\n  border-radius: ", "px;\n  box-sizing: border-box;\n\n  display: flex;\n  justify-content: center;\n  align-items: center;\n\n  div {\n    width: ", "px;\n    height: ", "px;\n  }\n"])), iconWidth, iconWidth, token('color.border', 'rgba(223, 225, 229, 0.5)'), borderRadius(), iconWidth, iconWidth);
+var itemIcon = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  width: ", "px;\n  height: ", "px;\n  overflow: hidden;\n  border: 1px solid ", "; /* N60 at 50% */\n  border-radius: ", "px;\n  box-sizing: border-box;\n\n  display: flex;\n  justify-content: center;\n  align-items: center;\n\n  div {\n    width: ", "px;\n    height: ", "px;\n  }\n"])), iconWidth, iconWidth, "var(--ds-border, rgba(223, 225, 229, 0.5))", borderRadius(), iconWidth, iconWidth);
 var itemBody = css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: row;\n  flex-wrap: nowrap;\n  justify-content: space-between;\n  line-height: 1.4;\n  margin: 0 16px;\n  flex-grow: 3;\n  max-width: calc(100% - ", "px);\n"])), gapSizeForEllipsis);
 var centeredItemTitle = css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n"])));
-var itemText = css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  max-width: 100%;\n  white-space: initial;\n  .item-summary {\n    font-size: ", ";\n    color: ", ";\n    margin-top: 4px;\n\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n  }\n"])), relativeFontSizeToBase16(11.67), token('color.text.subtlest', N200));
+var itemText = css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  max-width: 100%;\n  white-space: initial;\n  .item-summary {\n    font-size: ", ";\n    color: ", ";\n    margin-top: 4px;\n\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n  }\n"])), relativeFontSizeToBase16(11.67), "var(--ds-text-subtlest, ".concat(N200, ")"));
 var descriptionStyle = css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  margin-bottom: 24px;\n"])));
 var closeButtonWrapper = css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n  width: ", "px;\n  text-align: right;\n"])), buttonWidth);
 

package/dist/esm/ui/ConfigPanel/NestedForms/RemovableField.js

@@ -10,11 +10,10 @@ import { gridSize } from '@atlaskit/theme/constants';
 import CrossCircleIcon from '@atlaskit/icon/glyph/cross-circle';
 import Tooltip from '@atlaskit/tooltip';
 import { N80, R300 } from '@atlaskit/theme/colors';
-import { token } from '@atlaskit/tokens';
 import { messages } from '../messages';
 var removableFieldWrapper = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  position: relative;\n  margin-bottom: 0;\n"])));
 var wrapperWithMarginBottom = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  margin-bottom: ", "px;\n"])), gridSize() * 2);
-var removeButtonWrapper = css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  position: absolute;\n  right: 0;\n  top: 0;\n  cursor: pointer;\n\n  color: ", ";\n\n  &:hover {\n    color: ", ";\n  }\n"])), token('color.icon.subtle', N80), token('color.icon.danger', R300));
+var removeButtonWrapper = css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  position: absolute;\n  right: 0;\n  top: 0;\n  cursor: pointer;\n\n  color: ", ";\n\n  &:hover {\n    color: ", ";\n  }\n"])), "var(--ds-icon-subtle, ".concat(N80, ")"), "var(--ds-icon-danger, ".concat(R300, ")"));
 
 var RemovableField = function RemovableField(_ref) {
   var _children$props$field;