@atlaskit/editor-common 92.1.2 → 93.0.0

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

@@ -1,5 +1,3 @@
-import { hexToRgba } from '@atlaskit/adf-schema';
-import { B75, DN400, N30A, N400, R400 } from '@atlaskit/theme/colors';
 export var iconOnlySpacing = {
   '&&': {
     padding: '0px',
@@ -35,28 +33,28 @@ var background = {
       dark: 'inherit'
     },
     hover: {
-      light: "var(--ds-background-neutral-subtle-hovered, ".concat(N30A, ")"),
-      dark: "var(--ds-background-neutral-subtle-hovered, ".concat(N30A, ")")
+      light: "var(--ds-background-neutral-subtle-hovered, #091E420F)",
+      dark: "var(--ds-background-neutral-subtle-hovered, #091E420F)"
     },
     active: {
-      light: "var(--ds-background-neutral-pressed, ".concat("".concat(hexToRgba(B75, 0.6)), ")"),
-      dark: "var(--ds-background-neutral-pressed, ".concat("".concat(hexToRgba(B75, 0.6)), ")")
+      light: "var(--ds-background-neutral-pressed, #091E424F)",
+      dark: "var(--ds-background-neutral-pressed, #091E424F)"
     }
   }
 };
 var color = {
   danger: {
     default: {
-      light: "var(--ds-icon, ".concat(N400, ")"),
-      dark: "var(--ds-icon, ".concat(DN400, ")")
+      light: "var(--ds-icon, #44546F)",
+      dark: "var(--ds-icon, #44546F)"
     },
     hover: {
-      light: "var(--ds-icon-danger, ".concat(R400, ")"),
-      dark: "var(--ds-icon-danger, ".concat(R400, ")")
+      light: "var(--ds-icon-danger, #C9372C)",
+      dark: "var(--ds-icon-danger, #C9372C)"
     },
     active: {
-      light: "var(--ds-icon-danger, ".concat(R400, ")"),
-      dark: "var(--ds-icon-danger, ".concat(R400, ")")
+      light: "var(--ds-icon-danger, #C9372C)",
+      dark: "var(--ds-icon-danger, #C9372C)"
     }
   }
 };

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

@@ -7,22 +7,24 @@
 import { css, jsx } from '@emotion/react';
 import SuccessIcon from '@atlaskit/icon/glyph/editor/success';
 import ErrorIcon from '@atlaskit/icon/glyph/error';
-import { G400, N200, R400 } from '@atlaskit/theme/colors';
-import { h200 } from '@atlaskit/theme/typography';
 var errorColor = css({
-  color: "var(--ds-text-danger, ".concat(R400, ")")
+  color: "var(--ds-text-danger, #AE2E24)"
 });
 var validColor = css({
-  color: "var(--ds-text-success, ".concat(G400, ")")
+  color: "var(--ds-text-success, #216E4E)"
 });
 
 // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
 var messageStyle = function messageStyle() {
   return (
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-    css(h200(), {
+    css({
+      // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
+      fontSize: "".concat(12 / 14, "em"),
+      fontStyle: 'inherit',
+      lineHeight: 16 / 12,
       fontWeight: 'normal',
-      color: "var(--ds-text-subtlest, ".concat(N200, ")"),
+      color: "var(--ds-text-subtlest, #626F86)",
       marginTop: "var(--ds-space-050, 4px)",
       display: 'flex',
       justifyContent: 'baseline'

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

@@ -1,17 +1,16 @@
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css } from '@emotion/react';
 import { relativeFontSizeToBase16 } from '@atlaskit/editor-shared-styles';
-import { B100, N100, N30, N400 } from '@atlaskit/theme/colors';
 // Normal .className gets overridden by input[type=text] hence this hack to produce input.className
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
 export var panelTextInput = css({
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
   'input&': {
     background: 'transparent',
-    border: "2px solid ".concat("var(--ds-border, ".concat(N30, ")")),
+    border: "2px solid ".concat("var(--ds-border, #091E4224)"),
     borderRadius: 0,
     boxSizing: 'content-box',
-    color: "var(--ds-text-subtle, ".concat(N400, ")"),
+    color: "var(--ds-text-subtle, #44546F)",
     flexGrow: 1,
     // 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: relativeFontSizeToBase16(13),
@@ -25,10 +24,10 @@ export var panelTextInput = css({
     },
     '&:focus': {
       outline: 'none',
-      borderColor: "var(--ds-border-focused, ".concat(B100, ")")
+      borderColor: "var(--ds-border-focused, #388BFF)"
     },
     '&::placeholder': {
-      color: "var(--ds-text-subtlest, ".concat(N100, ")")
+      color: "var(--ds-text-subtlest, #626F86)"
     }
   }
 });

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

@@ -9,23 +9,21 @@ import { css, jsx } from '@emotion/react';
 import { injectIntl } from 'react-intl-next';
 import { relativeFontSizeToBase16 } from '@atlaskit/editor-shared-styles';
 import QuestionsIcon from '@atlaskit/icon/glyph/question-circle';
-import { N30, N50 } from '@atlaskit/theme/colors';
-import { borderRadius, fontSize } from '@atlaskit/theme/constants';
 import Tooltip from '@atlaskit/tooltip';
 import { ACTION_SUBJECT_ID } from '../../analytics';
 import { unsupportedContentMessages } from '../../messages/unsupportedContent';
 import { trackUnsupportedContentTooltipDisplayedFor } from '../../utils/track-unsupported-content';
 import { getUnsupportedContent } from '../unsupported-content-helper';
 var blockNodeStyle = css({
-  background: "var(--ds-background-disabled, ".concat(N30, ")"),
-  border: "1px dashed ".concat("var(--ds-border-disabled, ".concat(N50, ")")),
+  background: "var(--ds-background-disabled, #091E4208)",
+  border: "1px dashed ".concat("var(--ds-border-disabled, #091E420F)"),
   // 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(borderRadius(), "px"),
+  borderRadius: "var(--ds-border-radius, 3px)",
   boxSizing: 'border-box',
   cursor: 'default',
   display: 'flex',
   // 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: relativeFontSizeToBase16(fontSize()),
+  fontSize: relativeFontSizeToBase16(14),
   margin: "var(--ds-space-100, 8px)".concat(" 0"),
   minHeight: '24px',
   padding: "var(--ds-space-150, 12px)",

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

@@ -9,8 +9,6 @@ import { css, jsx } from '@emotion/react';
 import { injectIntl } from 'react-intl-next';
 import { relativeFontSizeToBase16 } from '@atlaskit/editor-shared-styles';
 import QuestionsIcon from '@atlaskit/icon/glyph/question-circle';
-import { N30, N50 } from '@atlaskit/theme/colors';
-import { borderRadius, fontSize } from '@atlaskit/theme/constants';
 import Tooltip from '@atlaskit/tooltip';
 import { ACTION_SUBJECT_ID } from '../../analytics';
 import { unsupportedContentMessages } from '../../messages/unsupportedContent';
@@ -18,15 +16,15 @@ import { trackUnsupportedContentTooltipDisplayedFor } from '../../utils/track-un
 import { getUnsupportedContent } from '../unsupported-content-helper';
 var inlineNodeStyle = css({
   alignItems: 'center',
-  background: "var(--ds-background-disabled, ".concat(N30, ")"),
-  border: "1px dashed ".concat("var(--ds-border-disabled, ".concat(N50, ")")),
+  background: "var(--ds-background-disabled, #091E4208)",
+  border: "1px dashed ".concat("var(--ds-border-disabled, #091E420F)"),
   // 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(borderRadius(), "px"),
+  borderRadius: "var(--ds-border-radius, 3px)",
   boxSizing: 'border-box',
   cursor: 'default',
   display: 'inline-flex',
   // 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: relativeFontSizeToBase16(fontSize()),
+  fontSize: relativeFontSizeToBase16(14),
   margin: "0 ".concat("var(--ds-space-025, 2px)"),
   minHeight: '24px',
   padding: "0 ".concat("var(--ds-space-100, 8px)"),

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

@@ -9,10 +9,8 @@ import React, { Fragment, useContext, useMemo, useRef, useState } from 'react';
 import { css, jsx } from '@emotion/react';
 import memoizeOne from 'memoize-one';
 import rafSchedule from 'raf-schd';
-import { fg } from '@atlaskit/platform-feature-flags';
 import { WidthObserver } from '@atlaskit/width-detector';
 import { isSSR } from '../../core-utils/is-ssr';
-import { isSsrButNoBreakoutScriptObserved } from './isSsrButNoBreakoutScriptObserved';
 var styles = css({
   position: 'relative',
   width: '100%'
@@ -59,17 +57,11 @@ export var WidthProvider = function WidthProvider(_ref) {
   var className = _ref.className,
     shouldCheckExistingValue = _ref.shouldCheckExistingValue,
     children = _ref.children;
-  var shouldFixTableResizing = Boolean(fg('platform-fix-table-ssr-resizing'));
-  var containerRef = useRef(null);
   var existingContextValue = useContext(WidthContext);
-  var _useState = useState(false),
+  var _useState = useState(getBodyWidth),
     _useState2 = _slicedToArray(_useState, 2),
-    isInitialWidthUpdated = _useState2[0],
-    setIsInitialWidthUpdated = _useState2[1];
-  var _useState3 = useState(getBodyWidth),
-    _useState4 = _slicedToArray(_useState3, 2),
-    width = _useState4[0],
-    setWidth = _useState4[1];
+    width = _useState2[0],
+    setWidth = _useState2[1];
   var widthRef = useRef(width);
   var isMountedRef = useRef(true);
   var providerValue = useMemo(function () {
@@ -93,41 +85,15 @@ export var WidthProvider = function WidthProvider(_ref) {
   var skipWidthDetection = shouldCheckExistingValue && existingContextValue.width > 0;
   React.useLayoutEffect(function () {
     isMountedRef.current = true;
-    if (shouldFixTableResizing && !isInitialWidthUpdated) {
-      // useLayoutEffect is not run in SSR mode
-      // The visibility change for SSR is done in packages/editor/renderer/src/ui/Renderer/breakout-ssr.tsx
-      setIsInitialWidthUpdated(true);
-      if (containerRef.current) {
-        setWidth(containerRef.current.offsetWidth);
-      }
-    }
     return function () {
       isMountedRef.current = false;
     };
-  }, [isInitialWidthUpdated, shouldFixTableResizing, width]);
+  }, []);
   return jsx("div", {
     css: styles
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
     ,
-    className: className,
-    ref: containerRef
-    // Using style not css prop because we need to also reset these style in SSR
-    // It is done in packages/editor/renderer/src/ui/Renderer/breakout-ssr.tsx
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Intended
-    ,
-    style:
-    // The hidden visibility is relying on the observer in breakout-ssr.tsx to clear.
-    // Do not hide if the observer is not observed. This happens in editor SSR.
-    shouldFixTableResizing && !isSsrButNoBreakoutScriptObserved() && !isInitialWidthUpdated ? {
-      // Width is initialized with body width but in Confluence this is too wide as side nav takes some space.
-      // Putting the div into hidden until we can get the correct width.
-      // Only setting the visibility so children still takes space which will make scrollbar to correct appear.
-      // Scrollbar has width too it needs to be taken into account otherwise table is going to shrink after appeared.
-      visibility: 'hidden',
-      // Because the body width is too wide, the horizontal scrollbar gonna shown
-      // Temporary hide it until we get the correct width
-      overflowX: 'hidden'
-    } : {}
+    className: className
   }, !skipWidthDetection && jsx(Fragment, null, jsx(WidthObserver, {
     setWidth: updateWidth,
     offscreen: true

package/dist/esm/ui-color/ColorPalette/Color/index.js

@@ -7,7 +7,6 @@ import React from 'react';
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { jsx } from '@emotion/react';
 import EditorDoneIcon from '@atlaskit/icon/glyph/editor/done';
-import { N0 } from '@atlaskit/theme/colors';
 import Tooltip from '@atlaskit/tooltip';
 import { buttonStyle, buttonWrapperStyle } from './styles';
 var Color = function Color(props) {
@@ -18,7 +17,7 @@ var Color = function Color(props) {
     isSelected = props.isSelected,
     borderColor = props.borderColor,
     _props$checkMarkColor = props.checkMarkColor,
-    checkMarkColor = _props$checkMarkColor === void 0 ? N0 : _props$checkMarkColor,
+    checkMarkColor = _props$checkMarkColor === void 0 ? '#FFFFFF' : _props$checkMarkColor,
     hexToPaletteColor = props.hexToPaletteColor,
     decorator = props.decorator;
   var colorStyle = hexToPaletteColor ? hexToPaletteColor(value) : value;

package/dist/esm/ui-color/ColorPalette/Color/styles.js

@@ -1,16 +1,15 @@
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css } from '@emotion/react';
-import { N0, N50, N900 } from '@atlaskit/theme/colors';
 /** this is not new usage - old code extracted from editor-core */
 /* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
 export var buttonStyle = css({
   height: '26px',
   width: '26px',
-  background: "var(--ds-background-neutral, ".concat(N900, ")"),
+  background: "var(--ds-background-neutral, #091E420F)",
   padding: 0,
   borderRadius: '4px',
-  border: "1px solid ".concat("var(--ds-border-inverse, ".concat(N0, ")")),
+  border: "1px solid ".concat("var(--ds-border-inverse, #FFFFFF)"),
   cursor: 'pointer',
   display: 'block'
 });
@@ -28,7 +27,7 @@ export var buttonWrapperStyle = css({
   borderRadius: '6px',
   '&:focus-within, &:focus, &:hover': {
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles -- Ignored via go/DSP-18766
-    borderColor: "".concat("var(--ds-border, ".concat(N50, ")"), " !important")
+    borderColor: "var(--ds-border, #091E4224)".concat(" !important")
   }
 });
 /* eslint-enable @atlaskit/design-system/ensure-design-token-usage */

package/dist/esm/ui-color/ColorPalette/Palettes/common.js

@@ -1,5 +1,4 @@
 import chromatism from 'chromatism';
-import { N800 } from '@atlaskit/theme/colors';
 
 /**
  * For a given color set the alpha channel to alpha
@@ -18,5 +17,5 @@ function setAlpha(color, alpha) {
 
 /** this is not new usage - old code extracted from editor-core */
 /* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
-export var DEFAULT_BORDER_COLOR = setAlpha(N800, 0.12);
+export var DEFAULT_BORDER_COLOR = setAlpha('#172B4D', 0.12);
 /* eslint-enable @atlaskit/design-system/ensure-design-token-usage */

package/dist/esm/ui-color/ColorPalette/Palettes/panelBackgroundPalette.js

@@ -1,76 +1,73 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-// AFP-2532 TODO: Fix automatic suppressions below
-// eslint-disable-next-line @atlassian/tangerine/import/entry-points
-import { colors } from '@atlaskit/theme';
 import { darkPanelColors } from '../../../panel';
 import { DEFAULT_BORDER_COLOR } from './common';
 /** this is not new usage - old code extracted from editor-core */
 /* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
 export var panelBackgroundPalette = [{
   label: 'White',
-  value: colors.N0
+  value: '#FFFFFF'
 }, {
   label: 'Light blue',
-  value: colors.B50
+  value: '#DEEBFF'
 }, {
   label: 'Light teal',
-  value: colors.T50
+  value: '#E6FCFF'
 }, {
   label: 'Light green',
-  value: colors.G50
+  value: '#E3FCEF'
 }, {
   label: 'Light yellow',
-  value: colors.Y50
+  value: '#FFFAE6'
 }, {
   label: 'Light red',
-  value: colors.R50
+  value: '#FFEBE6'
 }, {
   label: 'Light purple',
-  value: colors.P50
+  value: '#EAE6FF'
 }, {
   label: 'Light gray',
-  value: colors.N20
+  value: '#F4F5F7'
 }, {
   label: 'Blue',
-  value: colors.B75
+  value: '#B3D4FF'
 }, {
   label: 'Teal',
-  value: colors.T75
+  value: '#B3F5FF'
 }, {
   label: 'Green',
-  value: colors.G75
+  value: '#ABF5D1'
 }, {
   label: 'Yellow',
-  value: colors.Y75
+  value: '#FFF0B3'
 }, {
   label: 'Red',
-  value: colors.R75
+  value: '#FFBDAD'
 }, {
   label: 'Purple',
-  value: colors.P75
+  value: '#C0B6F2'
 }, {
   label: 'Gray',
-  value: colors.N60
+  value: '#B3BAC5'
 }, {
   label: 'Dark blue',
-  value: colors.B100
+  value: '#4C9AFF'
 }, {
   label: 'Dark teal',
-  value: colors.T100
+  value: '#79E2F2'
 }, {
   label: 'Dark green',
-  value: colors.G200
+  value: '#57D9A3'
 }, {
   label: 'Dark yellow',
-  value: colors.Y200
+  value: '#FFC400'
 }, {
   label: 'Dark red',
-  value: colors.R100
+  value: '#FF8F73'
 }, {
   label: 'Dark purple',
-  value: colors.P100
+  value: '#998DD9'
 }].map(function (color) {
   return _objectSpread(_objectSpread({}, color), {}, {
     border: "var(--ds-border, ".concat(DEFAULT_BORDER_COLOR, ")")

package/dist/esm/ui-color/ColorPalette/index.js

@@ -8,7 +8,6 @@ import React from 'react';
 import { jsx } from '@emotion/react';
 import chromatism from 'chromatism';
 import { injectIntl } from 'react-intl-next';
-import { N0, N500 } from '@atlaskit/theme/colors';
 import { useThemeObserver } from '@atlaskit/tokens';
 import Color from './Color';
 import getColorMessage from './Palettes/getColorMessage';
@@ -27,7 +26,7 @@ function getCheckMarkColor(color, useIconToken) {
   var colorValue = !!tokenVal ? tokenVal : color;
 
   // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
-  var contrastColor = [N0, N500].sort(function (a, b) {
+  var contrastColor = ['#FFFFFF', '#42526E'].sort(function (a, b) {
     return chromatism.difference(b, colorValue) - chromatism.difference(a, colorValue);
   })[0];
   if (!useIconToken) {
@@ -38,7 +37,7 @@ function getCheckMarkColor(color, useIconToken) {
   // they are only intended for use with text colors (and there are different tokens
   // planned to be used when this extended to be used with other palettes).
   // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
-  return contrastColor === N0 ? "var(--ds-icon-inverse, ".concat(N0, ")") : "var(--ds-icon, ".concat(N500, ")");
+  return contrastColor === '#FFFFFF' ? "var(--ds-icon-inverse, #FFFFFF)" : "var(--ds-icon, #44546F)";
 }
 var ColorPalette = function ColorPalette(props) {
   var _props$cols = props.cols,

package/dist/esm/ui-color/index.js

@@ -4,7 +4,6 @@ export { DEFAULT_COLOR_PICKER_COLUMNS, getColorsPerRowFromPalette, getSelectedRo
 export { default as cellBackgroundColorPalette } from './ColorPalette/Palettes/cellBackgroundColorPalette';
 export { default as colorPaletteMessages } from './ColorPalette/Palettes/paletteMessages';
 export { panelBackgroundPalette, panelDarkModeBackgroundPalette } from './ColorPalette/Palettes/panelBackgroundPalette';
-export { lightModeStatusColorPalette, darkModeStatusColorPalette } from './ColorPalette/Palettes/statusColorPalette';
 export { textColorPalette } from './ColorPalette/Palettes/textColorPalette';
 export { highlightColorPalette, REMOVE_HIGHLIGHT_COLOR } from './ColorPalette/Palettes/highlightColorPalette';
 export { backgroundPaletteTooltipMessages, borderPaletteTooltipMessages, chartsColorPaletteTooltipMessages, textPaletteTooltipMessages } from './ColorPalette/Palettes';

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

@@ -11,7 +11,6 @@ import withAnalyticsContext from '@atlaskit/analytics-next/withAnalyticsContext'
 import withAnalyticsEvents from '@atlaskit/analytics-next/withAnalyticsEvents';
 import Button from '@atlaskit/button/standard-button';
 import ExpandIcon from '@atlaskit/icon/glyph/chevron-down';
-import { N0, N30A, N60A } from '@atlaskit/theme/colors';
 import Tooltip from '@atlaskit/tooltip';
 import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, editorAnalyticsChannel, EVENT_TYPE } from '../../analytics';
 import { ColorPalette, DEFAULT_BORDER_COLOR, getSelectedRowAndColumnFromPalette } from '../../ui-color';
@@ -35,8 +34,8 @@ var colorPickerExpandContainer = css({
 var colorPickerWrapper = function colorPickerWrapper() {
   return css({
     borderRadius: "var(--ds-border-radius, 3px)",
-    backgroundColor: "var(--ds-surface-overlay, ".concat(N0, ")"),
-    boxShadow: "var(--ds-shadow-overlay, ".concat("0 4px 8px -2px ".concat(N60A, ", 0 0 1px ").concat(N60A), ")"),
+    backgroundColor: "var(--ds-surface-overlay, #FFFFFF)",
+    boxShadow: "var(--ds-shadow-overlay, 0px 8px 12px #091E4226, 0px 0px 1px #091E424f)",
     padding: "var(--ds-space-100, 8px)".concat(" 0px")
   });
 };
@@ -197,7 +196,7 @@ var ColorPickerButton = function ColorPickerButton(props) {
         margin: "0px ".concat("var(--ds-space-025, 2px)")
       },
       '&:hover': {
-        background: "var(--ds-background-neutral-subtle-hovered, ".concat(N30A, ")")
+        background: "var(--ds-background-neutral-subtle-hovered, #091E420F)"
       }
     });
   };

package/dist/esm/ui-menu/DropdownMenu/index.js

@@ -26,7 +26,6 @@ import { css, jsx } from '@emotion/react';
 import { akEditorFloatingPanelZIndex } from '@atlaskit/editor-shared-styles';
 import { CustomItem, MenuGroup, Section } from '@atlaskit/menu';
 import { fg } from '@atlaskit/platform-feature-flags';
-import { B100, N70, N900 } from '@atlaskit/theme/colors';
 import Tooltip from '@atlaskit/tooltip';
 import { DropdownMenuSharedCssClassName } from '../../styles';
 import { KeyDownHandlerContext } from '../../ui-menu/ToolbarArrowKeyNavigationProvider';
@@ -43,7 +42,7 @@ var wrapper = css({
   }
 });
 var focusedMenuItemStyle = css({
-  boxShadow: "inset 0px 0px 0px 2px ".concat("var(--ds-border-focused, ".concat(B100, ")")),
+  boxShadow: "inset 0px 0px 0px 2px ".concat("var(--ds-border-focused, #388BFF)"),
   outline: 'none'
 });
 var buttonStyles = function buttonStyles(isActive, submenuActive) {
@@ -55,7 +54,7 @@ var buttonStyles = function buttonStyles(isActive, submenuActive) {
     return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n\t\t\t> span,\n\t\t\t> span:hover,\n\t\t\t> span:active {\n\t\t\t\tbackground: ", ";\n\t\t\t\tcolor: ", ";\n\t\t\t}\n\t\t\t:focus > span[aria-disabled='false'] {\n\t\t\t\t", ";\n\t\t\t}\n\t\t\t:focus-visible,\n\t\t\t:focus-visible > span[aria-disabled='false'] {\n\t\t\t\toutline: none;\n\t\t\t}\n\t\t"])), "var(--ds-background-selected, #6c798f)", "var(--ds-text, #fff)", focusedMenuItemStyle);
   } else {
     // eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression -- needs manual remediation
-    return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n\t\t\t> span:hover[aria-disabled='false'] {\n\t\t\t\tcolor: ", ";\n\t\t\t\tbackground-color: ", ";\n\t\t\t}\n\t\t\t", "\n\t\t\t> span[aria-disabled='true'] {\n\t\t\t\tcolor: ", ";\n\t\t\t}\n\t\t\t:focus > span[aria-disabled='false'] {\n\t\t\t\t", ";\n\t\t\t}\n\t\t\t:focus-visible,\n\t\t\t:focus-visible > span[aria-disabled='false'] {\n\t\t\t\toutline: none;\n\t\t\t}\n\t\t"])), "var(--ds-text, ".concat(N900, ")"), "var(--ds-background-neutral-subtle-hovered, rgb(244, 245, 247))", !submenuActive && "\n\t\t\t\t\t> span:active[aria-disabled='false'] {\n\t\t\t\t\t\tbackground-color: ".concat("var(--ds-background-neutral-subtle-pressed, rgb(179, 212, 255))", ";\n\t\t\t\t\t}"), "var(--ds-text-disabled, ".concat(N70, ")"), focusedMenuItemStyle); // The default focus-visible style is removed to ensure consistency across browsers
+    return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n\t\t\t> span:hover[aria-disabled='false'] {\n\t\t\t\tcolor: ", ";\n\t\t\t\tbackground-color: ", ";\n\t\t\t}\n\t\t\t", "\n\t\t\t> span[aria-disabled='true'] {\n\t\t\t\tcolor: ", ";\n\t\t\t}\n\t\t\t:focus > span[aria-disabled='false'] {\n\t\t\t\t", ";\n\t\t\t}\n\t\t\t:focus-visible,\n\t\t\t:focus-visible > span[aria-disabled='false'] {\n\t\t\t\toutline: none;\n\t\t\t}\n\t\t"])), "var(--ds-text, #172B4D)", "var(--ds-background-neutral-subtle-hovered, rgb(244, 245, 247))", !submenuActive && "\n\t\t\t\t\t> span:active[aria-disabled='false'] {\n\t\t\t\t\t\tbackground-color: ".concat("var(--ds-background-neutral-subtle-pressed, rgb(179, 212, 255))", ";\n\t\t\t\t\t}"), "var(--ds-text-disabled, #091E424F)", focusedMenuItemStyle); // The default focus-visible style is removed to ensure consistency across browsers
   }
 };
 var DropListWithOutsideListeners = withReactEditorViewOuterListeners(DropList);

package/dist/types/element-browser/constants.d.ts

@@ -1,4 +1,4 @@
-export declare const GRID_SIZE: number;
+export declare const GRID_SIZE = 8;
 export declare const DEVICE_BREAKPOINT_NUMBERS: {
     small: number;
     medium: number;
@@ -9,8 +9,8 @@ export declare const FLEX_ITEMS_CONTAINER_BREAKPOINT_NUMBERS: {
     medium: number;
     large: number;
 };
-export declare const SIDEBAR_WIDTH: string;
-export declare const SIDEBAR_HEADING_WRAPPER_HEIGHT: string;
+export declare const SIDEBAR_WIDTH = "200px";
+export declare const SIDEBAR_HEADING_WRAPPER_HEIGHT = "48px";
 export declare const SIDEBAR_HEADING_PADDING_LEFT = "12px";
 export declare const INLINE_SIDEBAR_HEIGHT = "54px";
 export declare const SEARCH_ITEM_HEIGHT_WIDTH = "20px";

package/dist/types/media-inline/constants.d.ts

@@ -10,6 +10,9 @@ export declare const DEFAULT_INLINE_IMAGE_BORDER_SIZE = 0;
  *
  * 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.
  */
 export declare const referenceHeights: {
     p: number;

package/dist/types/panel.d.ts

@@ -1 +1 @@
-export { getPanelTypeBackground, getPanelTypeBackgroundNoTokens, darkPanelColors, getPanelDarkColor, panelSharedStyles, panelSharedStylesWithoutPrefix, PanelSharedCssClassName, PanelSharedSelectors, getPanelBackgroundDarkModeColors, } from './styles/shared/panel';
+export { getPanelTypeBackground, getPanelTypeBackgroundNoTokens, darkPanelColors, panelSharedStyles, panelSharedStylesWithoutPrefix, PanelSharedCssClassName, PanelSharedSelectors, } from './styles/shared/panel';

package/dist/types/styles/shared/panel.d.ts

@@ -47,8 +47,6 @@ export declare const darkPanelColors: {
     LightGray: string;
     TextColor: string;
 };
-export declare const getPanelDarkColor: (panelColor: string) => string;
-export declare const getPanelBackgroundDarkModeColors: string;
 export declare function getPanelDarkModeCSS(colorName: string, colorValue: string): string;
 export declare const PanelSharedCssClassName: {
     prefix: string;

package/dist/types/ui/WidthProvider/index.d.ts

@@ -4,11 +4,6 @@
  */
 import React from 'react';
 import { jsx } from '@emotion/react';
-declare global {
-    interface Window {
-        __SSR_BREAKOUT_OBSERVED?: boolean;
-    }
-}
 export type Breakpoints = 'S' | 'M' | 'L';
 export type WidthConsumerContext = {
     width: number;

package/dist/types/ui-color/index.d.ts

@@ -4,7 +4,6 @@ export { DEFAULT_COLOR_PICKER_COLUMNS, getColorsPerRowFromPalette, getSelectedRo
 export { default as cellBackgroundColorPalette } from './ColorPalette/Palettes/cellBackgroundColorPalette';
 export { default as colorPaletteMessages } from './ColorPalette/Palettes/paletteMessages';
 export { panelBackgroundPalette, panelDarkModeBackgroundPalette, } from './ColorPalette/Palettes/panelBackgroundPalette';
-export { lightModeStatusColorPalette, darkModeStatusColorPalette, } from './ColorPalette/Palettes/statusColorPalette';
 export { textColorPalette } from './ColorPalette/Palettes/textColorPalette';
 export { highlightColorPalette, REMOVE_HIGHLIGHT_COLOR, } from './ColorPalette/Palettes/highlightColorPalette';
 export { backgroundPaletteTooltipMessages, borderPaletteTooltipMessages, chartsColorPaletteTooltipMessages, textPaletteTooltipMessages, } from './ColorPalette/Palettes';

package/dist/types-ts4.5/element-browser/constants.d.ts

@@ -1,4 +1,4 @@
-export declare const GRID_SIZE: number;
+export declare const GRID_SIZE = 8;
 export declare const DEVICE_BREAKPOINT_NUMBERS: {
     small: number;
     medium: number;
@@ -9,8 +9,8 @@ export declare const FLEX_ITEMS_CONTAINER_BREAKPOINT_NUMBERS: {
     medium: number;
     large: number;
 };
-export declare const SIDEBAR_WIDTH: string;
-export declare const SIDEBAR_HEADING_WRAPPER_HEIGHT: string;
+export declare const SIDEBAR_WIDTH = "200px";
+export declare const SIDEBAR_HEADING_WRAPPER_HEIGHT = "48px";
 export declare const SIDEBAR_HEADING_PADDING_LEFT = "12px";
 export declare const INLINE_SIDEBAR_HEIGHT = "54px";
 export declare const SEARCH_ITEM_HEIGHT_WIDTH = "20px";

package/dist/types-ts4.5/media-inline/constants.d.ts

@@ -10,6 +10,9 @@ export declare const DEFAULT_INLINE_IMAGE_BORDER_SIZE = 0;
  *
  * 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.
  */
 export declare const referenceHeights: {
     p: number;

package/dist/types-ts4.5/panel.d.ts

@@ -1 +1 @@
-export { getPanelTypeBackground, getPanelTypeBackgroundNoTokens, darkPanelColors, getPanelDarkColor, panelSharedStyles, panelSharedStylesWithoutPrefix, PanelSharedCssClassName, PanelSharedSelectors, getPanelBackgroundDarkModeColors, } from './styles/shared/panel';
+export { getPanelTypeBackground, getPanelTypeBackgroundNoTokens, darkPanelColors, panelSharedStyles, panelSharedStylesWithoutPrefix, PanelSharedCssClassName, PanelSharedSelectors, } from './styles/shared/panel';

package/dist/types-ts4.5/styles/shared/panel.d.ts

@@ -47,8 +47,6 @@ export declare const darkPanelColors: {
     LightGray: string;
     TextColor: string;
 };
-export declare const getPanelDarkColor: (panelColor: string) => string;
-export declare const getPanelBackgroundDarkModeColors: string;
 export declare function getPanelDarkModeCSS(colorName: string, colorValue: string): string;
 export declare const PanelSharedCssClassName: {
     prefix: string;

package/dist/types-ts4.5/ui/WidthProvider/index.d.ts

@@ -4,11 +4,6 @@
  */
 import React from 'react';
 import { jsx } from '@emotion/react';
-declare global {
-    interface Window {
-        __SSR_BREAKOUT_OBSERVED?: boolean;
-    }
-}
 export type Breakpoints = 'S' | 'M' | 'L';
 export type WidthConsumerContext = {
     width: number;

package/dist/types-ts4.5/ui-color/index.d.ts

@@ -4,7 +4,6 @@ export { DEFAULT_COLOR_PICKER_COLUMNS, getColorsPerRowFromPalette, getSelectedRo
 export { default as cellBackgroundColorPalette } from './ColorPalette/Palettes/cellBackgroundColorPalette';
 export { default as colorPaletteMessages } from './ColorPalette/Palettes/paletteMessages';
 export { panelBackgroundPalette, panelDarkModeBackgroundPalette, } from './ColorPalette/Palettes/panelBackgroundPalette';
-export { lightModeStatusColorPalette, darkModeStatusColorPalette, } from './ColorPalette/Palettes/statusColorPalette';
 export { textColorPalette } from './ColorPalette/Palettes/textColorPalette';
 export { highlightColorPalette, REMOVE_HIGHLIGHT_COLOR, } from './ColorPalette/Palettes/highlightColorPalette';
 export { backgroundPaletteTooltipMessages, borderPaletteTooltipMessages, chartsColorPaletteTooltipMessages, textPaletteTooltipMessages, } from './ColorPalette/Palettes';