@atlaskit/editor-common 92.1.2 → 93.0.0

package/CHANGELOG.md

@@ -1,5 +1,31 @@
 # @atlaskit/editor-common
 
+## 93.0.0
+
+### Major Changes
+
+- [#147736](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/147736)
+  [`b87d619f458cf`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/b87d619f458cf) -
+  [ux] Removed the `theme` package from editor-common. Some colours have been adjusted to use
+  tokens, and some unused code has been removed.
+
+  WHAT? We have removed the following exports:
+
+  - `getPanelDarkColor` and `getPanelBackgroundDarkModeColors`. Remedy: Was used for
+    `editor-mobile-bridge` and is no longer used. Use `panelDarkModeBackgroundPalette` to access
+    panel dark mode colors.
+  - `lightModeStatusColorPalette` and `darkModeStatusColorPalette` from `editor-common`. Remedy:
+    Status colours come from `@atlaskit/status/picker`.
+
+  WHY? Because styling is moving to tokens and we no longer require these.
+
+### Patch Changes
+
+- [#147736](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/147736)
+  [`b6868597a50cd`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/b6868597a50cd) -
+  [ux] Fix table resizing when rendering with AK renderer in SSR
+- Updated dependencies
+
 ## 92.1.2
 
 ### Patch Changes

package/afm-cc/tsconfig.json

@@ -135,9 +135,6 @@
         {
             "path": "../../../design-system/textfield/afm-cc/tsconfig.json"
         },
-        {
-            "path": "../../../design-system/theme/afm-cc/tsconfig.json"
-        },
         {
             "path": "../../tmp-editor-statsig/afm-cc/tsconfig.json"
         },

package/afm-jira/tsconfig.json

@@ -134,9 +134,6 @@
     {
       "path": "../../../design-system/textfield/afm-jira/tsconfig.json"
     },
-    {
-      "path": "../../../design-system/theme/afm-jira/tsconfig.json"
-    },
     {
       "path": "../../tmp-editor-statsig/afm-jira/tsconfig.json"
     },

package/afm-post-office/tsconfig.json

@@ -134,9 +134,6 @@
     {
       "path": "../../../design-system/textfield/afm-post-office/tsconfig.json"
     },
-    {
-      "path": "../../../design-system/theme/afm-post-office/tsconfig.json"
-    },
     {
       "path": "../../tmp-editor-statsig/afm-post-office/tsconfig.json"
     },

package/dist/cjs/element-browser/components/CategoryList.js

@@ -13,7 +13,6 @@ var _react = _interopRequireWildcard(require("react"));
 var _react2 = require("@emotion/react");
 var _withAnalyticsContext = _interopRequireDefault(require("@atlaskit/analytics-next/withAnalyticsContext"));
 var _customThemeButton = _interopRequireDefault(require("@atlaskit/button/custom-theme-button"));
-var _colors = require("@atlaskit/theme/colors");
 var _analytics = require("../../analytics");
 var _constants = require("../constants");
 var _useFocus = _interopRequireDefault(require("../hooks/use-focus"));
@@ -121,9 +120,9 @@ function CategoryListItem(_ref2) {
         marginLeft: "var(--ds-space-025, 2px)",
         height: '100%',
         width: '100%',
-        color: category.name !== selectedCategory ? "var(--ds-text, ".concat(_colors.N800, ")") : "var(--ds-text-selected, ".concat(_colors.B400, ")")
+        color: category.name !== selectedCategory ? "var(--ds-text, #172B4D)" : "var(--ds-text-selected, #0C66E4)"
       }, category.name === selectedCategory && {
-        background: "var(--ds-background-selected, ".concat(_colors.B50, ")")
+        background: "var(--ds-background-selected, #E9F2FF)"
       })
     }, rest);
   }, [category.name, selectedCategory]);

package/dist/cjs/element-browser/components/ElementList/ElementList.js

@@ -19,12 +19,10 @@ var _withAnalyticsContext = _interopRequireDefault(require("@atlaskit/analytics-
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
 var _shortcut = require("@atlaskit/editor-shared-styles/shortcut");
 var _menu = require("@atlaskit/menu");
-var _colors = require("@atlaskit/theme/colors");
-var _constants = require("@atlaskit/theme/constants");
 var _tooltip = _interopRequireDefault(require("@atlaskit/tooltip"));
 var _analytics = require("../../../analytics");
 var _quickInsert = require("../../../quick-insert");
-var _constants2 = require("../../constants");
+var _constants = require("../../constants");
 var _useContainerWidth2 = _interopRequireDefault(require("../../hooks/use-container-width"));
 var _useFocus = _interopRequireDefault(require("../../hooks/use-focus"));
 var _types = require("../../types");
@@ -48,7 +46,7 @@ var itemIcon = exports.itemIcon = (0, _react2.css)({
   overflow: 'hidden',
   border: "1px solid ".concat("var(--ds-border, rgba(223, 225, 229, 0.5))"),
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-  borderRadius: "".concat((0, _constants.borderRadius)(), "px"),
+  borderRadius: "var(--ds-border-radius, 3px)",
   boxSizing: 'border-box',
   display: 'flex',
   justifyContent: 'center',
@@ -77,7 +75,7 @@ function ElementList(_ref) {
   var _useContainerWidth = (0, _useContainerWidth2.default)(),
     containerWidth = _useContainerWidth.containerWidth,
     ContainerWidthMonitor = _useContainerWidth.ContainerWidthMonitor;
-  var _useState = (0, _react.useState)(_constants2.SCROLLBAR_WIDTH),
+  var _useState = (0, _react.useState)(_constants.SCROLLBAR_WIDTH),
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
     scrollbarWidth = _useState2[0],
     setScrollbarWidth = _useState2[1];
@@ -108,18 +106,18 @@ function ElementList(_ref) {
   // eslint-disable-next-line react-hooks/exhaustive-deps
   var cache = new _CellMeasurer.CellMeasurerCache({
     fixedWidth: true,
-    defaultHeight: _constants2.ELEMENT_ITEM_HEIGHT,
-    minHeight: _constants2.ELEMENT_ITEM_HEIGHT
+    defaultHeight: _constants.ELEMENT_ITEM_HEIGHT,
+    minHeight: _constants.ELEMENT_ITEM_HEIGHT
   });
-  var columnWidth = (containerWidth - _constants2.ELEMENT_ITEM_PADDING * 2) / columnCount;
+  var columnWidth = (containerWidth - _constants.ELEMENT_ITEM_PADDING * 2) / columnCount;
   var rowCount = Math.ceil(items.length / columnCount);
   var rowHeight = function rowHeight(_ref2) {
     var index = _ref2.index;
     return cache.rowHeight({
       index: index
-    }) <= _constants2.ELEMENT_ITEM_HEIGHT ? _constants2.ELEMENT_ITEM_HEIGHT : cache.rowHeight({
+    }) <= _constants.ELEMENT_ITEM_HEIGHT ? _constants.ELEMENT_ITEM_HEIGHT : cache.rowHeight({
       index: index
-    }) + _constants2.ELEMENT_ITEM_PADDING * 2;
+    }) + _constants.ELEMENT_ITEM_PADDING * 2;
   };
   var cellRenderer = (0, _react.useMemo)(function () {
     return function (_ref3) {
@@ -199,7 +197,7 @@ function ElementList(_ref) {
     return (0, _react2.jsx)(_reactVirtualized.Grid, (0, _extends2.default)({
       cellRenderer: cellRenderer,
       height: height,
-      width: containerWidth - _constants2.ELEMENT_LIST_PADDING * 2 // containerWidth - padding on Left/Right (for focus outline)
+      width: containerWidth - _constants.ELEMENT_LIST_PADDING * 2 // containerWidth - padding on Left/Right (for focus outline)
       /**
        * Refresh Grid on WidthObserver value change.
        * Length of the items used to force re-render to solve Firefox bug with react-virtualized retaining
@@ -336,7 +334,7 @@ var elementItemsWrapper = (0, _react2.css)({
     outline: 'none',
     '&:focus': {
       // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-      boxShadow: "0 0 0 ".concat(_constants2.ELEMENT_LIST_PADDING, "px ", "var(--ds-border-focused, ".concat(_colors.B100, ")"))
+      boxShadow: "0 0 0 ".concat(_constants.ELEMENT_LIST_PADDING, "px ", "var(--ds-border-focused, #388BFF)")
     }
   },
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
@@ -383,7 +381,7 @@ var itemDescription = (0, _react2.css)(multilineStyle, {
   overflow: 'hidden',
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
   fontSize: (0, _editorSharedStyles.relativeFontSizeToBase16)(11.67),
-  color: "var(--ds-text-subtle, ".concat(_colors.N200, ")"),
+  color: "var(--ds-text-subtle, #44546F)",
   marginTop: "var(--ds-space-025, 2px)"
 });
 var itemText = (0, _react2.css)({

package/dist/cjs/element-browser/components/ElementSearch.js

@@ -15,7 +15,6 @@ var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
 var _shortcut = require("@atlaskit/editor-shared-styles/shortcut");
 var _search = _interopRequireDefault(require("@atlaskit/icon/glyph/search"));
 var _textfield = _interopRequireDefault(require("@atlaskit/textfield"));
-var _colors = require("@atlaskit/theme/colors");
 var _constants = require("../constants");
 var _useFocus = _interopRequireDefault(require("../hooks/use-focus"));
 var _messages = _interopRequireDefault(require("../messages"));
@@ -168,7 +167,7 @@ var wrapperInline = (0, _react2.css)({
 });
 var elementBeforeInput = (0, _react2.css)({
   margin: "1px ".concat("var(--ds-space-075, 6px)", " 0 ", "var(--ds-space-100, 8px)"),
-  color: "var(--ds-icon, ".concat(_colors.N200, ")"),
+  color: "var(--ds-icon, #44546F)",
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
   'span, svg': {
     height: '20px',

package/dist/cjs/element-browser/constants.js

@@ -4,12 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.SIDEBAR_WIDTH = exports.SIDEBAR_HEADING_WRAPPER_HEIGHT = exports.SIDEBAR_HEADING_PADDING_LEFT = exports.SEARCH_ITEM_HEIGHT_WIDTH = exports.SCROLLBAR_WIDTH = exports.INLINE_SIDEBAR_HEIGHT = exports.GRID_SIZE = exports.FLEX_ITEMS_CONTAINER_BREAKPOINT_NUMBERS = exports.ELEMENT_LIST_PADDING = exports.ELEMENT_ITEM_PADDING = exports.ELEMENT_ITEM_HEIGHT = exports.ELEMENT_BROWSER_ID = exports.DEVICE_BREAKPOINT_NUMBERS = void 0;
-var _constants = require("@atlaskit/theme/constants");
-// eslint-disable-next-line @atlaskit/design-system/no-deprecated-imports
-
-// TODO: Migrate away from deprecated gridSize
-// Recommendation: Replace gridSize with 8
-var GRID_SIZE = exports.GRID_SIZE = (0, _constants.gridSize)();
+var GRID_SIZE = exports.GRID_SIZE = 8;
 var DEVICE_BREAKPOINT_NUMBERS = exports.DEVICE_BREAKPOINT_NUMBERS = {
   small: GRID_SIZE * 40,
   medium: GRID_SIZE * 75,

package/dist/cjs/extensibility/Extension/Extension/styles.js

@@ -5,7 +5,6 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.wrapperStyle = exports.widerLayoutClassName = exports.overflowWrapperStyles = exports.header = exports.contentWrapper = exports.content = void 0;
 var _react = require("@emotion/react");
-var _colors = require("@atlaskit/theme/colors");
 var _styles = require("../styles");
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 
@@ -25,11 +24,11 @@ var wrapperStyle = exports.wrapperStyle = (0, _react.css)(_styles.wrapperDefault
   },
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
   '&.with-bodied-border': {
-    boxShadow: "0 0 0 1px ".concat("var(--ds-border, ".concat(_colors.N30, ")"))
+    boxShadow: "0 0 0 1px ".concat("var(--ds-border, #091E4224)")
   },
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
   '&.with-hover-border': {
-    boxShadow: "0 0 0 1px ".concat("var(--ds-border-input, ".concat(_colors.N500, ")"))
+    boxShadow: "0 0 0 1px ".concat("var(--ds-border-input, #8590A2)")
   },
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
   '&.with-margin-styles': {
@@ -56,7 +55,7 @@ var header = exports.header = (0, _react.css)({
 var content = exports.content = (0, _react.css)({
   padding: "var(--ds-space-100, 8px)",
   background: "var(--ds-surface, white)",
-  border: "1px solid ".concat("var(--ds-border, ".concat(_colors.N30, ")")),
+  border: "1px solid ".concat("var(--ds-border, #091E4224)"),
   borderRadius: "var(--ds-border-radius, 3px)",
   cursor: 'initial',
   width: '100%',

package/dist/cjs/extensibility/Extension/InlineExtension/styles.js

@@ -5,7 +5,6 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.wrapperStyle = exports.inlineWrapperStyles = void 0;
 var _react = require("@emotion/react");
-var _colors = require("@atlaskit/theme/colors");
 var _styles = require("../styles");
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 
@@ -30,7 +29,7 @@ var wrapperStyle = exports.wrapperStyle = (0, _react.css)(_styles.wrapperDefault
   },
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
   '&.with-hover-border': {
-    boxShadow: "0 0 0 1px ".concat("var(--ds-border-input, ".concat(_colors.N500, ")"))
+    boxShadow: "0 0 0 1px ".concat("var(--ds-border-input, #8590A2)")
   }
 });
 

package/dist/cjs/extensibility/Extension/Lozenge/ExtensionLabel.js

@@ -11,7 +11,6 @@ var _react2 = require("@emotion/react");
 var _classnames = _interopRequireDefault(require("classnames"));
 var _reactIntlNext = require("react-intl-next");
 var _preferences = _interopRequireDefault(require("@atlaskit/icon/glyph/preferences"));
-var _colors = require("@atlaskit/theme/colors");
 var _tooltip = _interopRequireDefault(require("@atlaskit/tooltip"));
 /**
  * @jsxRuntime classic
@@ -56,11 +55,11 @@ var sharedLabelStyles = (0, _react2.css)({
   },
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
   '&.bodied-background': {
-    background: "var(--ds-surface, ".concat(_colors.N0, ")")
+    background: "var(--ds-surface, #FFFFFF)"
   },
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
   '&.bodied-border': {
-    boxShadow: "0 0 0 1px ".concat("var(--ds-border, ".concat(_colors.N30, ")"))
+    boxShadow: "0 0 0 1px ".concat("var(--ds-border, #091E4224)")
   }
 });
 var buttonLabelStyles = (0, _react2.css)({
@@ -69,8 +68,8 @@ var buttonLabelStyles = (0, _react2.css)({
   borderRadius: "var(--ds-border-radius, 3px)",
   paddingLeft: "var(--ds-space-100, 8px)",
   paddingRight: "var(--ds-space-100, 8px)",
-  color: "var(--ds-text-subtle, ".concat(_colors.N800, ")"),
-  backgroundColor: "var(--ds-background-accent-gray-subtlest, ".concat(_colors.N30, ")"),
+  color: "var(--ds-text-subtle, #44546F)",
+  backgroundColor: "var(--ds-background-accent-gray-subtlest, #F1F2F4)",
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
   '&.remove-left-margin': {
     marginLeft: "var(--ds-space-negative-150, -12px)"
@@ -92,11 +91,11 @@ var textStyles = (0, _react2.css)({
   padding: "var(--ds-space-025, 2px)".concat(" ", "var(--ds-space-050, 4px)")
 });
 var originalLabelStyles = (0, _react2.css)({
-  background: "var(--ds-background-accent-gray-subtle-pressed, ".concat(_colors.N40, ")"),
+  background: "var(--ds-background-accent-gray-subtle-pressed, #DCDFE4)",
   borderRadius: "var(--ds-border-radius, 3px)".concat(" ", "var(--ds-border-radius, 3px)", " 0 0"),
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
   '&.show-label': {
-    color: "var(--ds-text-subtle, ".concat(_colors.N500, ")")
+    color: "var(--ds-text-subtle, #44546F)"
   },
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
   '&.inline': {

package/dist/cjs/extensibility/Extension/styles.js

@@ -18,13 +18,12 @@ Object.defineProperty(exports, "padding", {
 });
 exports.wrapperDefault = exports.styledImage = exports.placeholderFallbackParams = exports.placeholderFallback = void 0;
 var _react = require("@emotion/react");
-var _colors = require("@atlaskit/theme/colors");
 var _styles = require("../../styles");
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
 var wrapperDefault = exports.wrapperDefault = (0, _react.css)({
-  background: "var(--ds-background-neutral, ".concat(_colors.N20, ")"),
+  background: "var(--ds-background-neutral, #091E420F)",
   borderRadius: "var(--ds-border-radius, 3px)",
   position: 'relative',
   verticalAlign: 'middle',
@@ -32,7 +31,7 @@ var wrapperDefault = exports.wrapperDefault = (0, _react.css)({
   '&.with-overlay': {
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
     '.extension-overlay': {
-      background: "var(--ds-background-neutral-hovered, ".concat(_colors.N20A, ")"),
+      background: "var(--ds-background-neutral-hovered, #091E4224)",
       color: 'transparent'
     },
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
@@ -71,7 +70,7 @@ var placeholderFallbackParams = exports.placeholderFallbackParams = (0, _react.c
   display: 'inline-block',
   maxWidth: '200px',
   marginLeft: "var(--ds-space-050, 4px)",
-  color: "var(--ds-text-subtlest, ".concat(_colors.N70, ")"),
+  color: "var(--ds-text-subtlest, #626F86)",
   textOverflow: 'ellipsis',
   whiteSpace: 'nowrap',
   overflow: 'hidden'

package/dist/cjs/extensibility/MultiBodiedExtension/styles.js

@@ -5,7 +5,6 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.overlayStyles = exports.mbeExtensionWrapperCSSStyles = void 0;
 var _react = require("@emotion/react");
-var _colors = require("@atlaskit/theme/colors");
 var _styles = require("../Extension/styles");
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 
@@ -36,11 +35,11 @@ var mbeExtensionWrapperCSSStyles = exports.mbeExtensionWrapperCSSStyles = (0, _r
   },
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
   '&.with-border': {
-    boxShadow: "0 0 0 1px ".concat("var(--ds-border, ".concat(_colors.N30, ")"))
+    boxShadow: "0 0 0 1px ".concat("var(--ds-border, #091E4224)")
   },
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
   '&.with-hover-border': {
-    boxShadow: "0 0 0 1px ".concat("var(--ds-border-input, ".concat(_colors.N500, ")"))
+    boxShadow: "0 0 0 1px ".concat("var(--ds-border-input, #8590A2)")
   },
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
   '&.with-padding-background-styles': {

package/dist/cjs/icons/shared/SteppedRainbowIconDecoration.js

@@ -5,7 +5,6 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.SteppedRainbowIconDecoration = void 0;
 var _react = require("@emotion/react");
-var _colors = require("@atlaskit/theme/colors");
 /**
  * @jsxRuntime classic
  * @jsx jsx
@@ -25,8 +24,8 @@ var createSteppedRainbow = function createSteppedRainbow(colors) {
     return "\n            ".concat(color, " ").concat((pos - 1) * inc, "%,\n            ").concat(color, " ").concat(pos * inc, "%,\n          ");
   }).join('\n'), "\n    )");
 };
-var rainbow = createSteppedRainbow([_colors.P300, _colors.T300, _colors.Y400, _colors.R400]);
-var disabledRainbow = createSteppedRainbow([_colors.N80, _colors.N60, _colors.N40, _colors.N60]);
+var rainbow = createSteppedRainbow(["var(--ds-background-accent-purple-bolder, #6E5DC6)", "var(--ds-background-accent-teal-subtle, #6CC3E0)", "var(--ds-background-accent-orange-subtle, #FEA362)", "var(--ds-background-accent-red-bolder, #C9372C)"]);
+var disabledRainbow = createSteppedRainbow(["var(--ds-background-accent-gray-subtle, #8590A2)", "var(--ds-background-accent-gray-subtle-hovered, #B3B9C4)", "var(--ds-background-accent-gray-subtle-pressed, #DCDFE4)", "var(--ds-background-accent-gray-subtle-hovered, #B3B9C4)"]);
 var barStyles = (0, _react.css)({
   position: 'absolute',
   left: 0,

package/dist/cjs/keymaps/index.js

@@ -110,7 +110,6 @@ var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
 var _react = _interopRequireWildcard(require("react"));
 var _react2 = require("@emotion/react");
 var _w3cKeyname = require("w3c-keyname");
-var _colors = require("@atlaskit/theme/colors");
 var _editorCommands = require("../preset/editor-commands");
 var _utils = require("../utils");
 var _consts = require("./consts");
@@ -226,7 +225,7 @@ var arrowKeysMap = {
 };
 var tooltipShortcutStyle = (0, _react2.css)({
   borderRadius: '2px',
-  backgroundColor: "var(--ds-background-inverse-subtle, ".concat(_colors.N400, ")"),
+  backgroundColor: "var(--ds-background-inverse-subtle, #00000029)",
   padding: "0 ".concat("var(--ds-space-025, 2px)"),
   // NOTE: This might not actually do anything: https://atlassian.slack.com/archives/CFG3PSQ9E/p1647395052443259?thread_ts=1647394572.556029&cid=CFG3PSQ9E
   label: 'tooltip-shortcut'

package/dist/cjs/link/ConfigureLinkOverlay/StyledButton.js

@@ -9,7 +9,6 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _react = require("@emotion/react");
 var _button = _interopRequireDefault(require("@atlaskit/button"));
-var _colors = require("@atlaskit/theme/colors");
 var _excluded = ["innerRef"];
 /**
  * @jsxRuntime classic
@@ -18,13 +17,13 @@ var _excluded = ["innerRef"];
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 var buttonStyles = (0, _react.css)({
   display: 'flex',
-  background: "var(--ds-background-neutral, ".concat(_colors.N30A, ")"),
-  color: "var(--ds-icon, ".concat(_colors.N700, ")"),
+  background: "var(--ds-background-neutral, #091E420F)",
+  color: "var(--ds-icon, #44546F)",
   '&:hover': {
-    background: "var(--ds-background-neutral-hovered, ".concat(_colors.N40A, ")")
+    background: "var(--ds-background-neutral-hovered, #091E4224)"
   },
   '&:active': {
-    background: "var(--ds-background-neutral-pressed, ".concat(_colors.N60A, ")")
+    background: "var(--ds-background-neutral-pressed, #091E424F)"
   },
   width: '1.375rem',
   height: '1.25rem'

package/dist/cjs/link/ConfigureLinkOverlay/index.js

@@ -12,8 +12,6 @@ var _reactIntlNext = require("react-intl-next");
 var _withAnalyticsContext = _interopRequireDefault(require("@atlaskit/analytics-next/withAnalyticsContext"));
 var _state = require("@atlaskit/editor-prosemirror/state");
 var _preferences = _interopRequireDefault(require("@atlaskit/icon/glyph/preferences"));
-var _colors = require("@atlaskit/theme/colors");
-var _constants = require("@atlaskit/theme/constants");
 var _tooltip = _interopRequireDefault(require("@atlaskit/tooltip"));
 var _messages = require("../../messages");
 var _Dropdown = _interopRequireDefault(require("./Dropdown"));
@@ -28,11 +26,11 @@ var _useLinkOverlayAnalyticsEvents = require("./useLinkOverlayAnalyticsEvents");
 
 var buttonWrapperStyles = (0, _react2.css)({
   position: 'absolute',
-  zIndex: _constants.layers.card(),
+  zIndex: 100,
   display: 'inline-flex',
   top: '50%',
   transform: 'translateY(-50%)',
-  background: "var(--ds-surface-raised, ".concat(_colors.N0, ")"),
+  background: "var(--ds-surface-raised, #FFFFFF)",
   borderRadius: "var(--ds-border-radius, 3px)"
 });
 var showDropdownThresholdPx = 50;

package/dist/cjs/link/LinkPicker/HyperlinkAddToolbar/HyperlinkAddToolbar.js

@@ -27,7 +27,6 @@ var _withAnalyticsEvents = _interopRequireDefault(require("@atlaskit/analytics-n
 var _ = _interopRequireDefault(require("@atlaskit/icon-object/glyph/page/16"));
 var _crossCircle = _interopRequireDefault(require("@atlaskit/icon/glyph/cross-circle"));
 var _primitives = require("@atlaskit/primitives");
-var _colors = require("@atlaskit/theme/colors");
 var _tooltip = _interopRequireDefault(require("@atlaskit/tooltip"));
 var _analytics = require("../../../analytics");
 var _ui = require("../../../ui");
@@ -76,7 +75,7 @@ var textLabelMargin = (0, _react2.css)({
   marginTop: "var(--ds-space-150, 12px)"
 });
 var inputLabel = (0, _react2.css)({
-  color: "var(--ds-text-subtlest, ".concat(_colors.N200, ")"),
+  color: "var(--ds-text-subtlest, #626F86)",
   paddingBottom: "var(--ds-space-050, 4px)",
   font: "var(--ds-font-body-small, normal 400 11px/16px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
   fontWeight: "var(--ds-font-weight-medium, 500)"

package/dist/cjs/link/LinkSearch/LinkSearchList.js

@@ -13,7 +13,6 @@ var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/ge
 var _react = require("react");
 var _react2 = require("@emotion/react");
 var _spinner = _interopRequireDefault(require("@atlaskit/spinner"));
-var _colors = require("@atlaskit/theme/colors");
 var _LinkSearchListItem = _interopRequireDefault(require("./LinkSearchListItem"));
 function _createSuper(t) { var r = _isNativeReflectConstruct(); return function () { var e, o = (0, _getPrototypeOf2.default)(t); if (r) { var s = (0, _getPrototypeOf2.default)(this).constructor; e = Reflect.construct(o, arguments, s); } else e = o.apply(this, arguments); return (0, _possibleConstructorReturn2.default)(this, e); }; }
 function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); } /**
@@ -23,7 +22,7 @@ function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.
 var listContainer = (0, _react2.css)({
   paddingTop: 0,
   marginTop: "var(--ds-space-150, 12px)",
-  borderTop: "1px solid ".concat("var(--ds-border, ".concat(_colors.N30, ")"))
+  borderTop: "1px solid ".concat("var(--ds-border, #091E4224)")
 });
 var spinnerContainer = (0, _react2.css)({
   textAlign: 'center',

package/dist/cjs/link/LinkSearch/LinkSearchListItem.js

@@ -17,8 +17,6 @@ var _react = _interopRequireWildcard(require("react"));
 var _react2 = require("@emotion/react");
 var _reactIntlNext = require("react-intl-next");
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
-var _colors = require("@atlaskit/theme/colors");
-var _constants = require("@atlaskit/theme/constants");
 var _listItemAlts = require("./listItemAlts");
 var _transformTimeStamp = require("./transformTimeStamp");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
@@ -41,7 +39,7 @@ var container = exports.container = (0, _react2.css)({
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
 var containerSelected = exports.containerSelected = (0, _react2.css)({
-  backgroundColor: "var(--ds-background-neutral-subtle-hovered, ".concat(_colors.N20, ")")
+  backgroundColor: "var(--ds-background-neutral-subtle-hovered, #091E420F)"
 });
 var nameWrapper = (0, _react2.css)({
   overflow: 'hidden'
@@ -49,7 +47,7 @@ var nameWrapper = (0, _react2.css)({
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
 var nameStyle = exports.nameStyle = (0, _react2.css)({
-  color: "var(--ds-text, ".concat(_colors.N800, ")"),
+  color: "var(--ds-text, #172B4D)",
   overflow: 'hidden',
   textOverflow: 'ellipsis',
   whiteSpace: 'nowrap',
@@ -58,10 +56,10 @@ var nameStyle = exports.nameStyle = (0, _react2.css)({
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
 var containerName = exports.containerName = (0, _react2.css)({
-  color: "var(--ds-text-subtlest, ".concat(_colors.N300, ")"),
+  color: "var(--ds-text-subtlest, #626F86)",
   lineHeight: '14px',
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-  fontSize: (0, _editorSharedStyles.relativeFontSizeToBase16)((0, _constants.fontSizeSmall)())
+  fontSize: (0, _editorSharedStyles.relativeFontSizeToBase16)(11)
 });
 var iconStyle = (0, _react2.css)({
   minWidth: '16px',

package/dist/cjs/media-inline/constants.js

@@ -4,7 +4,6 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.referenceHeights = exports.DEFAULT_INLINE_IMAGE_BORDER_SIZE = exports.DEFAULT_INLINE_IMAGE_ASPECT_RATIO = exports.DEFAULT_IMAGE_WIDTH = exports.DEFAULT_IMAGE_HEIGHT = void 0;
-var _typography = require("@atlaskit/theme/typography");
 var DEFAULT_IMAGE_WIDTH = exports.DEFAULT_IMAGE_WIDTH = 250;
 var DEFAULT_IMAGE_HEIGHT = exports.DEFAULT_IMAGE_HEIGHT = 200;
 var DEFAULT_INLINE_IMAGE_ASPECT_RATIO = exports.DEFAULT_INLINE_IMAGE_ASPECT_RATIO = DEFAULT_IMAGE_WIDTH / DEFAULT_IMAGE_HEIGHT;
@@ -18,13 +17,16 @@ var DEFAULT_INLINE_IMAGE_BORDER_SIZE = exports.DEFAULT_INLINE_IMAGE_BORDER_SIZE
  *
  * There is conversation about refactoring media inline nodes to conform to
  * aligning correctly with the surrounding text.
+ *
+ * These constants originally came from `headingSizes` from the `theme` package
+ * and have been copied here to remove this package.
  */
 var referenceHeights = exports.referenceHeights = {
-  p: _typography.headingSizes.h600.lineHeight - 2,
-  h1: _typography.headingSizes.h800.lineHeight + 4,
-  h2: _typography.headingSizes.h700.lineHeight + 3,
-  h3: _typography.headingSizes.h600.lineHeight + 1,
-  h4: _typography.headingSizes.h500.lineHeight + 3,
-  h5: _typography.headingSizes.h400.lineHeight + 4,
-  h6: _typography.headingSizes.h300.lineHeight + 2
+  p: 24 - 2,
+  h1: 32 + 4,
+  h2: 28 + 3,
+  h3: 24 + 1,
+  h4: 20 + 3,
+  h5: 16 + 4,
+  h6: 16 + 2
 };

package/dist/cjs/media-inline/styles.js

@@ -7,7 +7,6 @@ Object.defineProperty(exports, "__esModule", {
 exports.wrapperStyle = exports.selectedStyle = exports.mediaInlineImageStyles = exports.interactiveStyle = exports.borderStyle = exports.INLINE_IMAGE_WRAPPER_CLASS_NAME = exports.INLINE_IMAGE_BORDER_SIZE_CSS_VAR_KEY = exports.INLINE_IMAGE_BORDER_COLOR_CSS_VAR_KEY = exports.INLINE_IMAGE_ASPECT_RATIO_CSS_VAR_KEY = void 0;
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 var _react = require("@emotion/react");
-var _colors = require("@atlaskit/theme/colors");
 var _constants = require("./constants");
 var _templateObject, _templateObject2; // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 var INLINE_IMAGE_WRAPPER_CLASS_NAME = exports.INLINE_IMAGE_WRAPPER_CLASS_NAME = 'media-inline-image-wrapper';
@@ -47,7 +46,7 @@ var wrapperStyle = exports.wrapperStyle = (0, _react.css)({
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
 var selectedStyle = exports.selectedStyle = (0, _react.css)({
   cursor: 'pointer',
-  boxShadow: "0 0 0 1px ".concat("var(--ds-border-selected, ".concat(_colors.B300, ")")),
+  boxShadow: "0 0 0 1px ".concat("var(--ds-border-selected, #0C66E4)"),
   outline: 'none'
 });
 

package/dist/cjs/media-inline/views/error-view.js

@@ -7,7 +7,6 @@ Object.defineProperty(exports, "__esModule", {
 exports.InlineImageCardErrorView = void 0;
 var _react = require("@emotion/react");
 var _warning = _interopRequireDefault(require("@atlaskit/icon/glyph/warning"));
-var _colors = require("@atlaskit/theme/colors");
 var _tooltip = _interopRequireDefault(require("@atlaskit/tooltip"));
 var _constants = require("./constants");
 var _frame = require("./frame");
@@ -36,6 +35,6 @@ var InlineImageCardErrorView = exports.InlineImageCardErrorView = function Inlin
   }, (0, _react.jsx)(_iconWrapper.IconWrapper, null, icon || (0, _react.jsx)(_warning.default, {
     label: "error",
     size: height > _constants.ICON_SIZE_THRESOLD ? 'medium' : 'small',
-    primaryColor: "var(--ds-icon-danger, ".concat(_colors.R300, ")")
+    primaryColor: "var(--ds-icon-danger, #C9372C)"
   }))));
 };

package/dist/cjs/media-inline/views/wrapper.js

@@ -5,7 +5,6 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.wrapperStyle = void 0;
 var _react = require("@emotion/react");
-var _colors = require("@atlaskit/theme/colors");
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
@@ -17,11 +16,11 @@ var wrapperStyle = exports.wrapperStyle = (0, _react.css)({
   justifyContent: 'center',
   boxDecorationBreak: 'clone',
   borderRadius: "var(--ds-border-radius, 3px)",
-  color: "".concat("var(--ds-text, ".concat(_colors.N900, ")")),
-  backgroundColor: "".concat("var(--ds-background-neutral, ".concat(_colors.N30A, ")")),
+  color: "var(--ds-text, #172B4D)",
+  backgroundColor: "var(--ds-background-neutral, #091E420F)",
   transition: '0.1s all ease-in-out',
   cursor: 'pointer',
   '&:hover': {
-    backgroundColor: "".concat("var(--ds-background-neutral-hovered, ".concat(_colors.N40A, ")"))
+    backgroundColor: "var(--ds-background-neutral-hovered, #091E4224)"
   }
 });

package/dist/cjs/media-single/CommentBadge.js

@@ -12,7 +12,6 @@ var _debounce = _interopRequireDefault(require("lodash/debounce"));
 var _customThemeButton = _interopRequireDefault(require("@atlaskit/button/custom-theme-button"));
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
 var _comment = _interopRequireDefault(require("@atlaskit/icon/glyph/comment"));
-var _constants = require("@atlaskit/theme/constants");
 var _tooltip = _interopRequireDefault(require("@atlaskit/tooltip"));
 var _media = require("../media");
 /**
@@ -35,7 +34,7 @@ var commentBadgeEditorOverrides = function commentBadgeEditorOverrides(badgeOffs
   return (0, _react2.css)({
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
     right: badgeOffsetRight,
-    zIndex: _constants.layers.card()
+    zIndex: 100
   });
 };
 var getBadgeSize = exports.getBadgeSize = function getBadgeSize(width, height) {