@atlaskit/editor-common 92.1.1 → 93.0.0

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

@@ -1,4 +1,3 @@
-import { headingSizes } from '@atlaskit/theme/typography';
 export const DEFAULT_IMAGE_WIDTH = 250;
 export const DEFAULT_IMAGE_HEIGHT = 200;
 export const DEFAULT_INLINE_IMAGE_ASPECT_RATIO = DEFAULT_IMAGE_WIDTH / DEFAULT_IMAGE_HEIGHT;
@@ -12,13 +11,16 @@ export 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 const referenceHeights = {
-  p: headingSizes.h600.lineHeight - 2,
-  h1: headingSizes.h800.lineHeight + 4,
-  h2: headingSizes.h700.lineHeight + 3,
-  h3: headingSizes.h600.lineHeight + 1,
-  h4: headingSizes.h500.lineHeight + 3,
-  h5: headingSizes.h400.lineHeight + 4,
-  h6: 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/es2019/media-inline/styles.js

@@ -1,6 +1,5 @@
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css } from '@emotion/react';
-import { B300 } from '@atlaskit/theme/colors';
 import { DEFAULT_INLINE_IMAGE_ASPECT_RATIO, DEFAULT_INLINE_IMAGE_BORDER_SIZE, referenceHeights } from './constants';
 export const INLINE_IMAGE_WRAPPER_CLASS_NAME = 'media-inline-image-wrapper';
 export const INLINE_IMAGE_ASPECT_RATIO_CSS_VAR_KEY = '--editor-media-inline-image-aspect-ratio';
@@ -76,7 +75,7 @@ export const wrapperStyle = css({
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
 export const selectedStyle = css({
   cursor: 'pointer',
-  boxShadow: `0 0 0 1px ${`var(--ds-border-selected, ${B300})`}`,
+  boxShadow: `0 0 0 1px ${"var(--ds-border-selected, #0C66E4)"}`,
   outline: 'none'
 });
 

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

@@ -6,7 +6,6 @@
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { jsx } from '@emotion/react';
 import WarningIcon from '@atlaskit/icon/glyph/warning';
-import { R300 } from '@atlaskit/theme/colors';
 import Tooltip from '@atlaskit/tooltip';
 import { ICON_SIZE_THRESOLD } from './constants';
 import { Frame } from './frame';
@@ -27,6 +26,6 @@ export const InlineImageCardErrorView = ({
   }, jsx(IconWrapper, null, icon || jsx(WarningIcon, {
     label: "error",
     size: height > ICON_SIZE_THRESOLD ? 'medium' : 'small',
-    primaryColor: `var(--ds-icon-danger, ${R300})`
+    primaryColor: "var(--ds-icon-danger, #C9372C)"
   }))));
 };

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

@@ -1,6 +1,5 @@
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css } from '@emotion/react';
-import { N30A, N40A, N900 } from '@atlaskit/theme/colors';
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
 export const wrapperStyle = css({
   display: 'inline-flex',
@@ -10,11 +9,11 @@ export const wrapperStyle = css({
   justifyContent: 'center',
   boxDecorationBreak: 'clone',
   borderRadius: `${"var(--ds-border-radius, 3px)"}`,
-  color: `${`var(--ds-text, ${N900})`}`,
-  backgroundColor: `${`var(--ds-background-neutral, ${N30A})`}`,
+  color: `${"var(--ds-text, #172B4D)"}`,
+  backgroundColor: `${"var(--ds-background-neutral, #091E420F)"}`,
   transition: '0.1s all ease-in-out',
   cursor: 'pointer',
   '&:hover': {
-    backgroundColor: `${`var(--ds-background-neutral-hovered, ${N40A})`}`
+    backgroundColor: `${"var(--ds-background-neutral-hovered, #091E4224)"}`
   }
 });

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

@@ -10,7 +10,6 @@ import debounce from 'lodash/debounce';
 import CustomThemeButton from '@atlaskit/button/custom-theme-button';
 import { akEditorUnitZIndex } from '@atlaskit/editor-shared-styles';
 import CommentIcon from '@atlaskit/icon/glyph/comment';
-import { layers } from '@atlaskit/theme/constants';
 import Tooltip from '@atlaskit/tooltip';
 import { commentMessages as messages } from '../media';
 const commentBadgeWrapper = css({
@@ -25,7 +24,7 @@ const commentBadgeWrapper = css({
 const commentBadgeEditorOverrides = badgeOffsetRight => css({
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
   right: badgeOffsetRight,
-  zIndex: layers.card()
+  zIndex: 100
 });
 export const getBadgeSize = (width, height) => {
   // width is the original width of image, not resized or currently rendered to user. Defaulting to medium for now

package/dist/es2019/monitoring/error.js

@@ -1,7 +1,7 @@
 import { isFedRamp } from './environment';
 const SENTRY_DSN = 'https://0b10c8e02fb44d8796c047b102c9bee8@o55978.ingest.sentry.io/4505129224110080';
 const packageName = 'editor-common'; // Sentry doesn't accept '/' in its releases https://docs.sentry.io/platforms/javascript/configuration/releases/
-const packageVersion = "92.1.1";
+const packageVersion = "93.0.0";
 const sanitiseSentryEvents = (data, _hint) => {
   // Remove URL as it has UGC
   // TODO: Sanitise the URL instead of just removing it

package/dist/es2019/node-width/index.js

@@ -1,10 +1,9 @@
 import { findParentNodeOfTypeClosestToPos } from '@atlaskit/editor-prosemirror/utils';
 import { akEditorDefaultLayoutWidth, akEditorFullWidthLayoutWidth, akEditorWideLayoutWidth, akLayoutGutterOffset, gridMediumMaxWidth } from '@atlaskit/editor-shared-styles';
-// eslint-disable-next-line @atlaskit/design-system/no-deprecated-imports
-import { gridSize } from '@atlaskit/theme/constants';
 import { BODIED_EXT_PADDING } from '../styles/shared/extension';
 import { LAYOUT_COLUMN_PADDING, LAYOUT_SECTION_MARGIN } from '../styles/shared/layout';
 import { absoluteBreakoutWidth } from '../utils/breakout';
+const GRID_SIZE = 8;
 export const layoutToWidth = {
   default: akEditorDefaultLayoutWidth,
   wide: akEditorWideLayoutWidth,
@@ -71,18 +70,15 @@ export const getParentNodeWidth = (pos, state, containerWidth, isFullWidthModeEn
     case schema.nodes.extensionFrame:
       parentWidth -= BODIED_EXT_PADDING * 2;
       break;
-
-    // TODO: Migrate away from gridSize
-    // Recommendation: Replace gridSize with 8
     case schema.nodes.expand:
       // padding
-      parentWidth -= gridSize() * 2;
+      parentWidth -= GRID_SIZE * 2;
       // gutter offset
-      parentWidth += gridSize() * 1.5 * 2;
+      parentWidth += GRID_SIZE * 1.5 * 2;
       // padding right
-      parentWidth -= gridSize();
+      parentWidth -= GRID_SIZE;
       // padding left
-      parentWidth -= gridSize() * 4 - gridSize() / 2;
+      parentWidth -= GRID_SIZE * 4 - GRID_SIZE / 2;
       break;
   }
   parentWidth -= 2; // border

package/dist/es2019/panel.js

@@ -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/es2019/react-node-view/index.js

@@ -1,7 +1,6 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import React from 'react';
-import { fg } from '@atlaskit/platform-feature-flags';
 import { ACTION_SUBJECT, ACTION_SUBJECT_ID } from '../analytics';
 import { createDispatch } from '../event-dispatcher';
 import { ErrorBoundary } from '../ui/ErrorBoundary';
@@ -113,48 +112,44 @@ export default class ReactNodeView {
 
     // move the contentDOM node inside the inner reference after rendering
     if (node && contentDOM && !node.contains(contentDOM)) {
-      if (fg('platform_editor_react_18_prosemirror_sel_resync')) {
-        var _this$view$state$sele;
-        // @ts-ignore - ignoreMutation may not be declared
-        oldIgnoreMutation = this.ignoreMutation; // store ref to previous ignoreMutation
+      var _this$view$state$sele;
+      // @ts-ignore - ignoreMutation may not be declared
+      oldIgnoreMutation = this.ignoreMutation; // store ref to previous ignoreMutation
 
-        // ignore all mutations caused by ProseMirror's MutationObserver triggering
-        // after DOM change, except selection changes
-        // @ts-ignore ProseMirror adds selection type to MutationRecord
-        this.ignoreMutation = m => {
-          const isSelectionMutation = m.type === 'selection';
-          if (!isSelectionMutation) {
-            mutationsIgnored = true;
-          }
-          return !isSelectionMutation;
-        };
-
-        // capture document selection state before React DOM changes triggers ProseMirror selection change transaction
-        if (this.view.state.selection.visible) {
-          selectionBookmark = this.view.state.selection.getBookmark();
+      // ignore all mutations caused by ProseMirror's MutationObserver triggering
+      // after DOM change, except selection changes
+      // @ts-ignore ProseMirror adds selection type to MutationRecord
+      this.ignoreMutation = m => {
+        const isSelectionMutation = m.type === 'selection';
+        if (!isSelectionMutation) {
+          mutationsIgnored = true;
         }
+        return !isSelectionMutation;
+      };
 
-        // ... and capture parent offset before DOM change
-        if (((_this$view$state$sele = this.view.state.selection) === null || _this$view$state$sele === void 0 ? void 0 : _this$view$state$sele.ranges.length) > 0) {
-          var _this$view$state$sele2, _this$view$state$sele3, _this$view$state$sele4;
-          parentOffset = (_this$view$state$sele2 = (_this$view$state$sele3 = this.view.state.selection) === null || _this$view$state$sele3 === void 0 ? void 0 : (_this$view$state$sele4 = _this$view$state$sele3.ranges[0].$from) === null || _this$view$state$sele4 === void 0 ? void 0 : _this$view$state$sele4.parentOffset) !== null && _this$view$state$sele2 !== void 0 ? _this$view$state$sele2 : 0;
-        }
+      // capture document selection state before React DOM changes triggers ProseMirror selection change transaction
+      if (this.view.state.selection.visible) {
+        selectionBookmark = this.view.state.selection.getBookmark();
       }
-      node.appendChild(contentDOM);
-      if (fg('platform_editor_react_18_prosemirror_sel_resync')) {
-        requestAnimationFrame(() => {
-          // Reset ignoreMutation after frame ....
-          // @ts-ignore - this may not have been declared by implementing class
-          this.ignoreMutation = oldIgnoreMutation;
 
-          // only trigger selection re-sync if the selection is not at the start of the
-          // node, and DOM mutations were ignored
-          if (selectionBookmark && mutationsIgnored && parentOffset > 0) {
-            // ... and dispatch expected selection state
-            this.view.dispatch(this.view.state.tr.setSelection(selectionBookmark.resolve(this.view.state.tr.doc)));
-          }
-        });
+      // ... and capture parent offset before DOM change
+      if (((_this$view$state$sele = this.view.state.selection) === null || _this$view$state$sele === void 0 ? void 0 : _this$view$state$sele.ranges.length) > 0) {
+        var _this$view$state$sele2, _this$view$state$sele3, _this$view$state$sele4;
+        parentOffset = (_this$view$state$sele2 = (_this$view$state$sele3 = this.view.state.selection) === null || _this$view$state$sele3 === void 0 ? void 0 : (_this$view$state$sele4 = _this$view$state$sele3.ranges[0].$from) === null || _this$view$state$sele4 === void 0 ? void 0 : _this$view$state$sele4.parentOffset) !== null && _this$view$state$sele2 !== void 0 ? _this$view$state$sele2 : 0;
       }
+      node.appendChild(contentDOM);
+      requestAnimationFrame(() => {
+        // Reset ignoreMutation after frame ....
+        // @ts-ignore - this may not have been declared by implementing class
+        this.ignoreMutation = oldIgnoreMutation;
+
+        // only trigger selection re-sync if the selection is not at the start of the
+        // node, and DOM mutations were ignored
+        if (selectionBookmark && mutationsIgnored && parentOffset > 0) {
+          // ... and dispatch expected selection state
+          this.view.dispatch(this.view.state.tr.setSelection(selectionBookmark.resolve(this.view.state.tr.doc)));
+        }
+      });
     }
   }
   render(props, forwardRef) {

package/dist/es2019/styles/shared/annotation.js

@@ -1,7 +1,6 @@
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css } from '@emotion/react';
 import { fg } from '@atlaskit/platform-feature-flags';
-import { N60A, Y300, Y75 } from '@atlaskit/theme/colors';
 export const annotationPrefix = 'ak-editor-annotation';
 export const AnnotationSharedClassNames = {
   focus: `${annotationPrefix}-focus`,
@@ -14,8 +13,6 @@ export const BlockAnnotationSharedClassNames = {
   blur: `${blockAnnotationPrefix}-blur`,
   draft: `${blockAnnotationPrefix}-draft`
 };
-const Yellow100 = 'rgb(255, 247, 214)';
-const Y200a = 'rgba(255, 196, 0, 0.82)';
 export const AnnotationSharedCSSByState = () => {
   if (fg('editor_inline_comments_on_inline_nodes')) {
     // NOTE: These styles are shared between renderer and editor. Sometimes they
@@ -33,20 +30,20 @@ export const AnnotationSharedCSSByState = () => {
         } : {
           paddingTop: '4px',
           border: 'none',
-          boxShadow: `0 2px 0 0 ${`var(--ds-border-accent-yellow, ${Y200a})`}`
+          boxShadow: `0 2px 0 0 ${"var(--ds-border-accent-yellow, #B38600)"}`
         },
         '&:has(.date-lozenger-container)': {
           paddingTop: '2px'
         }
       },
       focus: css({
-        background: `var(--ds-background-accent-yellow-subtler, ${Y75})`,
-        borderBottomColor: `var(--ds-border-accent-yellow, ${Y300})`,
-        boxShadow: `var(--ds-shadow-overlay, ${`1px 2px 3px ${N60A}, -1px 2px 3px ${N60A}`})`
+        background: "var(--ds-background-accent-yellow-subtler, #F8E6A0)",
+        borderBottomColor: "var(--ds-border-accent-yellow, #B38600)",
+        boxShadow: "var(--ds-shadow-overlay, 0px 8px 12px #091E4226, 0px 0px 1px #091E424f)"
       }),
       blur: css({
-        background: `var(--ds-background-accent-yellow-subtlest, ${Yellow100})`,
-        borderBottomColor: `var(--ds-border-accent-yellow, ${Y200a})`
+        background: "var(--ds-background-accent-yellow-subtlest, #FFF7D6)",
+        borderBottomColor: "var(--ds-border-accent-yellow, #B38600)"
       })
     };
   } else {
@@ -54,15 +51,15 @@ export const AnnotationSharedCSSByState = () => {
       focus: css({
         // Background is not coming through in confluence, suspecting to be caused by some specific combination of
         // emotion and token look up
-        background: `var(--ds-background-accent-yellow-subtler, ${Y75})`,
-        borderBottom: `2px solid ${`var(--ds-border-accent-yellow, ${Y300})`}`,
+        background: "var(--ds-background-accent-yellow-subtler, #F8E6A0)",
+        borderBottom: `2px solid ${"var(--ds-border-accent-yellow, #B38600)"}`,
         // TODO: https://product-fabric.atlassian.net/browse/DSP-4147
-        boxShadow: `var(--ds-shadow-overlay, ${`1px 2px 3px ${N60A}, -1px 2px 3px ${N60A}`})`,
+        boxShadow: "var(--ds-shadow-overlay, 0px 8px 12px #091E4226, 0px 0px 1px #091E424f)",
         cursor: 'pointer'
       }),
       blur: css({
-        background: `var(--ds-background-accent-yellow-subtlest, ${Yellow100})`,
-        borderBottom: `2px solid ${`var(--ds-border-accent-yellow, ${Y200a})`}`,
+        background: "var(--ds-background-accent-yellow-subtlest, #FFF7D6)",
+        borderBottom: `2px solid ${"var(--ds-border-accent-yellow, #B38600)"}`,
         cursor: 'pointer'
       })
     };

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

@@ -2,8 +2,6 @@
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css } from '@emotion/react';
 import { akEditorCodeFontFamily, akEditorLineHeight, akEditorTableCellMinWidth, blockNodesVerticalMargin, overflowShadow, relativeFontSizeToBase16 } from '@atlaskit/editor-shared-styles';
-import { N20, N30, N400, N800 } from '@atlaskit/theme/colors';
-import { fontSize } from '@atlaskit/theme/constants';
 export const CodeBlockSharedCssClassName = {
   CODEBLOCK_CONTAINER: 'code-block',
   CODEBLOCK_START: 'code-block--start',
@@ -46,7 +44,7 @@ export const codeBlockSharedStyles = () => css`
 
 	.${CodeBlockSharedCssClassName.CODEBLOCK_CONTAINER} {
 		position: relative;
-		background-color: ${"var(--ds-surface-raised, transparent)"};
+		background-color: ${"var(--ds-surface-raised, #FFFFFF)"};
 		border-radius: ${"var(--ds-border-radius, 3px)"};
 		margin: ${blockNodesVerticalMargin} 0 0 0;
 		font-family: ${akEditorCodeFontFamily};
@@ -76,7 +74,7 @@ export const codeBlockSharedStyles = () => css`
 		}
 
 		.${CodeBlockSharedCssClassName.CODEBLOCK_CONTENT_WRAPPER} {
-			background-color: ${`var(--ds-background-neutral, ${N20})`};
+			background-color: ${"var(--ds-background-neutral, #091E420F)"};
 			display: flex;
 			border-radius: ${"var(--ds-border-radius, 3px)"};
 			width: 100%;
@@ -120,7 +118,7 @@ export const codeBlockSharedStyles = () => css`
 		.${CodeBlockSharedCssClassName.CODEBLOCK_LINE_NUMBER_GUTTER} {
 			flex-shrink: 0;
 			text-align: right;
-			background-color: ${`var(--ds-background-neutral, ${N30})`};
+			background-color: ${"var(--ds-background-neutral, #091E420F)"};
 			padding: ${"var(--ds-space-100, 8px)"};
 			position: relative;
 
@@ -133,20 +131,20 @@ export const codeBlockSharedStyles = () => css`
 					display: inline-block;
 					content: counter(line);
 					counter-increment: line;
-					color: ${`var(--ds-text-subtlest, ${N400})`};
-					font-size: ${relativeFontSizeToBase16(fontSize())};
+					color: ${"var(--ds-text-subtlest, #626F86)"};
+					font-size: ${relativeFontSizeToBase16(14)};
 					line-height: 1.5rem;
 				}
 			}
 		}
 
 		.${CodeBlockSharedCssClassName.CODEBLOCK_LINE_NUMBER_GUTTER_FG} {
-			background-color: ${`var(--ds-background-neutral, ${N30})`};
+			background-color: ${"var(--ds-background-neutral, #091E420F)"};
 			position: relative;
 			width: var(--lineNumberGutterWidth, 2rem);
 			padding: 0px ${"var(--ds-space-100, 8px)"};
 			flex-shrink: 0;
-			font-size: ${relativeFontSizeToBase16(fontSize())};
+			font-size: ${relativeFontSizeToBase16(14)};
 			box-sizing: content-box;
 		}
 
@@ -158,11 +156,11 @@ export const codeBlockSharedStyles = () => css`
 				flex-grow: 1;
 				tab-size: 4;
 				cursor: text;
-				color: ${`var(--ds-text, ${N800})`};
+				color: ${"var(--ds-text, #172B4D)"};
 				border-radius: ${"var(--ds-border-radius, 3px)"};
 				margin: ${"var(--ds-space-100, 8px)"};
 				white-space: pre;
-				font-size: ${relativeFontSizeToBase16(fontSize())};
+				font-size: ${relativeFontSizeToBase16(14)};
 				line-height: 1.5rem;
 			}
 		}
@@ -171,10 +169,10 @@ export const codeBlockSharedStyles = () => css`
 			code {
 				tab-size: 4;
 				cursor: text;
-				color: ${`var(--ds-text, ${N800})`};
+				color: ${"var(--ds-text, #172B4D)"};
 				border-radius: ${"var(--ds-border-radius, 3px)"};
 				margin: ${"var(--ds-space-100, 8px)"};
-				font-size: ${relativeFontSizeToBase16(fontSize())};
+				font-size: ${relativeFontSizeToBase16(14)};
 				line-height: 1.5rem;
 			}
 		}
@@ -185,7 +183,7 @@ export const codeBlockSharedStyles = () => css`
 			width: var(--lineNumberGutterWidth, 2rem);
 			left: 0;
 			position: absolute;
-			font-size: ${relativeFontSizeToBase16(fontSize())};
+			font-size: ${relativeFontSizeToBase16(14)};
 			padding: 0px ${"var(--ds-space-100, 8px)"};
 			line-height: 1.5rem;
 			text-align: right;

package/dist/es2019/styles/shared/code-mark.js

@@ -1,12 +1,11 @@
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css } from '@emotion/react';
 import { getCodeStyles } from '@atlaskit/code/inline';
-import { N30A } from '@atlaskit/theme/colors';
 export const codeMarkSharedStyles = () => {
   return css({
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
     '.code': {
-      '--ds--code--bg-color': `var(--ds-background-neutral, ${N30A})`,
+      '--ds--code--bg-color': "var(--ds-background-neutral, #091E420F)",
       // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
       ...getCodeStyles()
     }

package/dist/es2019/styles/shared/grid.js

@@ -1,7 +1,6 @@
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css } from '@emotion/react';
 import { akEditorGridLineZIndex } from '@atlaskit/editor-shared-styles';
-import { B200, N30A } from '@atlaskit/theme/colors';
 export const GRID_GUTTER = 12;
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
@@ -24,7 +23,7 @@ export const gridStyles = css({
   },
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
   '.gridLine': {
-    borderLeft: `1px solid ${`var(--ds-border, ${N30A})`}`,
+    borderLeft: `1px solid ${"var(--ds-border, #091E4224)"}`,
     display: 'inline-block',
     boxSizing: 'border-box',
     height: '100%',
@@ -35,6 +34,6 @@ export const gridStyles = css({
   },
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
   '.highlight': {
-    borderLeft: `1px solid ${`var(--ds-border-focused, ${B200})`}`
+    borderLeft: `1px solid ${"var(--ds-border-focused, #388BFF)"}`
   }
 });

package/dist/es2019/styles/shared/headings.js

@@ -1,49 +1,76 @@
 /* eslint-disable @atlaskit/design-system/use-tokens-space */
+/* eslint-disable @atlaskit/design-system/use-tokens-typography */
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css } from '@emotion/react';
-import { h100, h300, h400, h500, h600, h700 } from '@atlaskit/theme/typography';
-
 // @see typography spreadsheet: https://docs.google.com/spreadsheets/d/1iYusRGCT4PoPfvxbJ8NrgjtfFgXLm5lpDWXzjua1W2E/edit#gid=93913128
 // text sizing prototype: http://proto/fabricrender/
 export const headingsSharedStyles = () => css({
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
   '& h1': {
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
-    ...h700(),
+    fontSize: `${24 / 14}em`,
+    fontStyle: 'inherit',
+    lineHeight: 28 / 24,
+    color: "var(--ds-text, #172B4D)",
+    fontWeight: "var(--ds-font-weight-medium, 500)",
+    letterSpacing: `-0.01em`,
     marginBottom: 0,
     marginTop: '1.667em'
   },
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
   '& h2': {
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
-    ...h600(),
+    fontSize: `${20 / 14}em`,
+    fontStyle: 'inherit',
+    lineHeight: 24 / 20,
+    color: "var(--ds-text, #172B4D)",
+    fontWeight: "var(--ds-font-weight-medium, 500)",
+    letterSpacing: `-0.008em`,
     marginTop: '1.8em',
     marginBottom: 0
   },
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
   '& h3': {
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
-    ...h500(),
+    fontSize: `${16 / 14}em`,
+    fontStyle: 'inherit',
+    lineHeight: 20 / 16,
+    color: "var(--ds-text, #172B4D)",
+    fontWeight: "var(--ds-font-weight-semibold, 600)",
+    letterSpacing: `-0.006em`,
     marginTop: '2em',
     marginBottom: 0
   },
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
   '& h4': {
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
-    ...h400(),
+    fontSize: `${14 / 14}em`,
+    fontStyle: 'inherit',
+    lineHeight: 16 / 14,
+    color: "var(--ds-text, #172B4D)",
+    fontWeight: "var(--ds-font-weight-semibold, 600)",
+    letterSpacing: `-0.003em`,
     marginTop: '1.357em'
   },
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
   '& h5': {
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
-    ...h300(),
+    fontSize: `${12 / 14}em`,
+    fontStyle: 'inherit',
+    lineHeight: 16 / 12,
+    color: "var(--ds-text, #172B4D)",
+    fontWeight: "var(--ds-font-weight-semibold, 600)",
     marginTop: '1.667em',
     textTransform: 'none'
   },
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
   '& h6': {
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
-    ...h100(),
+    fontSize: `${11 / 14}em`,
+    fontStyle: 'inherit',
+    lineHeight: 16 / 11,
+    color: "var(--ds-text-subtlest, #626F86)",
+    fontWeight: "var(--ds-font-weight-bold, 700)",
     marginTop: '1.455em',
     textTransform: 'none'
   }

package/dist/es2019/styles/shared/panel.js

@@ -6,15 +6,14 @@ import { hexToEditorBackgroundPaletteColor } from '@atlaskit/editor-palette';
 import { akEditorTableCellMinWidth, blockNodesVerticalMargin } from '@atlaskit/editor-shared-styles';
 import { akEditorCustomIconSize } from '@atlaskit/editor-shared-styles/consts';
 import { emojiImage, emojiSprite } from '@atlaskit/emoji';
-import { B100, B400, B50, B75, G200, G400, G50, G75, N0, N20, N60, P100, P400, P50, P75, R100, R400, R50, R75, T100, T50, T75, Y200, Y400, Y50, Y75 } from '@atlaskit/theme/colors';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 const lightPanelColors = {
-  info: B50,
-  note: P50,
-  tip: G50,
-  success: G50,
-  warning: Y50,
-  error: R50
+  info: '#DEEBFF',
+  note: '#EAE6FF',
+  tip: '#E3FCEF',
+  success: '#E3FCEF',
+  warning: '#FFFAE6',
+  error: '#FFEBE6'
 };
 export const darkPanelColors = {
   // standard panels
@@ -79,30 +78,18 @@ export const darkPanelColors = {
   TextColor: '#D9DDE3'
 };
 const lightIconColor = {
-  info: `var(--ds-icon-information, ${B400})`,
-  note: `var(--ds-icon-discovery, ${P400})`,
-  tip: `var(--ds-icon-success, ${G400})`,
-  success: `var(--ds-icon-success, ${G400})`,
-  warning: `var(--ds-icon-warning, ${Y400})`,
-  error: `var(--ds-icon-danger, ${R400})`
+  info: "var(--ds-icon-information, #1D7AFC)",
+  note: "var(--ds-icon-discovery, #8270DB)",
+  tip: "var(--ds-icon-success, #22A06B)",
+  success: "var(--ds-icon-success, #22A06B)",
+  warning: "var(--ds-icon-warning, #E56910)",
+  error: "var(--ds-icon-danger, #C9372C)"
 };
 
 // New custom icons are a little smaller than predefined icons.
 // To fix alignment issues with custom icons, vertical alignment is updated.
 const panelEmojiSpriteVerticalAlignment = -(8 * 3 - akEditorCustomIconSize) / 2;
 const panelEmojiImageVerticalAlignment = panelEmojiSpriteVerticalAlignment - 1;
-
-// TODO: https://product-fabric.atlassian.net/browse/DSP-4066
-const panelDarkModeColors = [[B50, darkPanelColors.B1200S], [B75, darkPanelColors.B900], [B100, darkPanelColors.B800S], [N0, darkPanelColors.LightGray], [N20, darkPanelColors.Gray], [N60, darkPanelColors.DarkGray], [T50, darkPanelColors.T1200S], [T75, darkPanelColors.T900], [T100, darkPanelColors.T900S], [G50, darkPanelColors.G1200S], [G75, darkPanelColors.G900], [G200, darkPanelColors.G900S], [Y50, darkPanelColors.Y1200S], [Y75, darkPanelColors.Y900], [Y200, darkPanelColors.Y800S], [R50, darkPanelColors.R1200S], [R75, darkPanelColors.R900], [R100, darkPanelColors.R800S], [P50, darkPanelColors.P1200S], [P75, darkPanelColors.P900], [P100, darkPanelColors.P800S]];
-
-// used for custom panels
-export const getPanelDarkColor = panelColor => {
-  const colorObject = panelDarkModeColors.find(color => color[0] === panelColor || color[1] === panelColor);
-  return colorObject ? colorObject[1] : darkPanelColors.B1200S;
-};
-
-// used for custom panels
-export const getPanelBackgroundDarkModeColors = panelDarkModeColors.map(([colorName, colorValue]) => getPanelDarkModeCSS(colorName, colorValue)).join('\n');
 export function getPanelDarkModeCSS(colorName, colorValue) {
   return `
   &[data-panel-color="${colorName}"] {

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

@@ -1,6 +1,5 @@
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css } from '@emotion/react';
-import { N30 } from '@atlaskit/theme/colors';
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
 export const buttonGroupStyle = css({
   display: 'inline-flex',
@@ -14,7 +13,7 @@ export const buttonGroupStyle = css({
 // If you make change here, change in above file as well.
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
 export const separatorStyles = css({
-  background: `var(--ds-border, ${N30})`,
+  background: "var(--ds-border, #091E4224)",
   width: '1px',
   height: '24px',
   display: 'inline-block',