@atlaskit/editor-common 92.1.2 → 93.0.0

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/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',

package/dist/es2019/styles/shared/resizer.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 { akEditorDeleteIconColor } from '@atlaskit/editor-shared-styles';
-import { B200, B50, N60 } from '@atlaskit/theme/colors';
 /*
   Styles in this file are based on
   packages/editor/editor-core/src/plugins/media/styles.ts
@@ -34,7 +33,7 @@ export const resizerStyles = css`
 
 		&.is-resizing {
 			& .${resizerHandleThumbClassName} {
-				background: ${`var(--ds-border-focused, ${B200})`};
+				background: ${"var(--ds-border-focused, #388BFF)"};
 			}
 		}
 
@@ -115,7 +114,7 @@ export const resizerStyles = css`
 
 		&:hover {
 			& .${resizerHandleThumbClassName} {
-				background: ${`var(--ds-border-focused, ${B200})`};
+				background: ${"var(--ds-border-focused, #388BFF)"};
 			}
 
 			& .${resizerHandleTrackClassName} {
@@ -138,7 +137,7 @@ export const resizerStyles = css`
 		z-index: 2;
 		outline: none;
 		min-height: 24px;
-		background: ${`var(--ds-border, ${N60})`};
+		background: ${"var(--ds-border, #091E4224)"};
 
 		&:hover {
 			cursor: col-resize;
@@ -178,11 +177,11 @@ export const resizerStyles = css`
 		}
 
 		&.shadow {
-			background: ${`var(--ds-background-selected, ${B50})`};
+			background: ${"var(--ds-background-selected, #E9F2FF)"};
 		}
 
 		&.full-height {
-			background: ${`var(--ds-background-selected, ${B50})`};
+			background: ${"var(--ds-background-selected, #E9F2FF)"};
 			height: 100%;
 			min-height: 36px;
 		}
@@ -190,7 +189,7 @@ export const resizerStyles = css`
 
 	.${akEditorSelectedNodeClassName} {
 		& .${resizerHandleThumbClassName} {
-			background: ${`var(--ds-border-focused, ${B200})`};
+			background: ${"var(--ds-border-focused, #388BFF)"};
 		}
 	}
 

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

@@ -1,13 +1,12 @@
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css } from '@emotion/react';
 import { akEditorLineHeight } from '@atlaskit/editor-shared-styles';
-import { N30A } from '@atlaskit/theme/colors';
 // @see typography spreadsheet: https://docs.google.com/spreadsheets/d/1iYusRGCT4PoPfvxbJ8NrgjtfFgXLm5lpDWXzjua1W2E/edit#gid=93913128
 export const ruleSharedStyles = () => css({
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
   '& hr': {
     border: 'none',
-    backgroundColor: `var(--ds-border, ${N30A})`,
+    backgroundColor: "var(--ds-border, #091E4224)",
     // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview, @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
     margin: `${akEditorLineHeight}em 0`,
     height: '2px',

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

@@ -3,7 +3,6 @@
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css } from '@emotion/react';
 import { akEditorShadowZIndex } from '@atlaskit/editor-shared-styles';
-import { N40A } from '@atlaskit/theme/colors';
 import { shadowClassNames } from '../../ui/OverflowShadow';
 import { shadowObserverClassNames } from '../../ui/OverflowShadow/shadowObserver';
 const shadowWidth = 8;
@@ -40,14 +39,14 @@ const shadowSharedStyle = css({
   },
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
   [`& .${shadowClassNames.LEFT_SHADOW}::before`]: {
-    background: `linear-gradient( to left, transparent 0, ${`var(--ds-shadow-overflow-spread, ${N40A})`} 140% ), linear-gradient( to right, ${"var(--ds-shadow-overflow-perimeter, transparent)"} 0px, transparent 1px )`,
+    background: `linear-gradient( to left, transparent 0, ${"var(--ds-shadow-overflow-spread, #091e4229)"} 140% ), linear-gradient( to right, ${"var(--ds-shadow-overflow-perimeter, transparent)"} 0px, transparent 1px )`,
     top: '0px',
     left: 0,
     display: 'block'
   },
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
   [`& .${shadowClassNames.RIGHT_SHADOW}::after`]: {
-    background: `linear-gradient( to right, transparent 0, ${`var(--ds-shadow-overflow-spread, ${N40A})`} 140% ), linear-gradient( to left, ${"var(--ds-shadow-overflow-perimeter, transparent)"} 0px, transparent 1px )`,
+    background: `linear-gradient( to right, transparent 0, ${"var(--ds-shadow-overflow-spread, #091e4229)"} 140% ), linear-gradient( to left, ${"var(--ds-shadow-overflow-perimeter, transparent)"} 0px, transparent 1px )`,
     right: '0px',
     top: '0px',
     display: 'block'

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

@@ -2,8 +2,6 @@
 import { css } from '@emotion/react';
 import { akEditorDeleteBackground, akEditorDeleteBorder, akEditorSelectedNodeClassName, getSelectionStyles, SelectionStyle } from '@atlaskit/editor-shared-styles';
 import { fg } from '@atlaskit/platform-feature-flags';
-import { N0, N40 } from '@atlaskit/theme/colors';
-import { N60A, Y300, Y75 } from '@atlaskit/theme/colors';
 import { SmartCardSharedCssClassName } from './smart-card';
 export const DATASOURCE_INNER_CONTAINER_CLASSNAME = 'datasourceView-content-inner-wrap';
 export const FLOATING_TOOLBAR_LINKPICKER_CLASSNAME = 'card-floating-toolbar--link-picker';
@@ -15,9 +13,9 @@ export const smartCardStyles = () => css`
 		vertical-align: top;
 		word-break: break-all;
 		${fg('editor_inline_comments_on_inline_nodes') ? `.card-with-comment {
-          background: ${`var(--ds-background-accent-yellow-subtler, ${Y75})`};
-          border-bottom: 2px solid ${`var(--ds-border-accent-yellow, ${Y300})`};
-          box-shadow: ${`var(--ds-shadow-overlay, ${`1px 2px 3px ${N60A}, -1px 2px 3px ${N60A}`})`};
+          background: ${"var(--ds-background-accent-yellow-subtler, #F8E6A0)"};
+          border-bottom: 2px solid ${"var(--ds-border-accent-yellow, #B38600)"};
+          box-shadow: ${"var(--ds-shadow-overlay, 0px 8px 12px #091E4226, 0px 0px 1px #091E424f)"};
         }` : ''}
 		.card {
 			padding-left: ${"var(--ds-space-025, 2px)"};
@@ -83,9 +81,9 @@ fg('linking_platform_smart_links_in_live_pages') ? 'pointer' : 'auto'};
 
 		.${DATASOURCE_INNER_CONTAINER_CLASSNAME} {
 			cursor: pointer;
-			background-color: ${`var(--ds-background-neutral-subtle, ${N0})`};
+			background-color: ${"var(--ds-background-neutral-subtle, #00000000)"};
 			border-radius: ${"var(--ds-border-radius-200, 8px)"};
-			border: 1px solid ${`var(--ds-border, ${N40})`};
+			border: 1px solid ${"var(--ds-border, #091E4224)"};
 		}
 
 		&.${akEditorSelectedNodeClassName} {

package/dist/es2019/table/SortingIcon.js

@@ -6,7 +6,6 @@
 import { css, jsx } from '@emotion/react';
 import { injectIntl } from 'react-intl-next';
 import { fg } from '@atlaskit/platform-feature-flags';
-import { N20, N30 } from '@atlaskit/theme/colors';
 import Tooltip from '@atlaskit/tooltip';
 import { SortOrder } from '../types';
 import { SORTABLE_COLUMN_ICON_CLASSNAME } from './consts';
@@ -33,13 +32,13 @@ const buttonStyles = css`
 	top: 0;
 	border: 2px solid ${"var(--ds-border, #fff)"};
 	border-radius: ${"var(--ds-border-radius-100, 4px)"};
-	background-color: ${`var(--ds-surface-overlay, ${N20})`};
+	background-color: ${"var(--ds-surface-overlay, #FFFFFF)"};
 	justify-content: center;
 	align-items: center;
 	cursor: pointer;
 
 	&:hover {
-		background-color: ${`var(--ds-surface-overlay-hovered, ${N30})`};
+		background-color: ${"var(--ds-surface-overlay-hovered, #F1F2F4)"};
 	}
 
 	&:active {

package/dist/es2019/ui/BaseTheme/index.js

@@ -3,7 +3,6 @@ import React, { useMemo } from 'react';
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { ThemeProvider } from '@emotion/react';
 import { akEditorDefaultLayoutWidth } from '@atlaskit/editor-shared-styles';
-import { fontSize } from '@atlaskit/theme/constants';
 import { WidthConsumer } from '../WidthProvider';
 export function mapBreakpointToLayoutMaxWidth(breakpoint) {
   switch (breakpoint) {
@@ -19,7 +18,7 @@ export function BaseThemeWrapper({
   children
 }) {
   const memoizedTheme = useMemo(() => ({
-    baseFontSize: baseFontSize || fontSize(),
+    baseFontSize: baseFontSize || 14,
     layoutMaxWidth: akEditorDefaultLayoutWidth
   }), [baseFontSize]);
   return /*#__PURE__*/React.createElement(ThemeProvider, {

package/dist/es2019/ui/Caption/index.js

@@ -8,16 +8,15 @@ import React from 'react';
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css, jsx } from '@emotion/react';
 import { injectIntl } from 'react-intl-next';
-import { N200, N400 } from '@atlaskit/theme/colors';
 import { messages } from './messages';
 const captionWrapperStyle = css({
   marginTop: "var(--ds-space-100, 8px)",
   textAlign: 'center',
   position: 'relative',
-  color: `var(--ds-text-subtle, ${N400})`
+  color: "var(--ds-text-subtle, #44546F)"
 });
 const placeholderStyle = css({
-  color: `var(--ds-text-subtlest, ${N200})`,
+  color: "var(--ds-text-subtlest, #626F86)",
   position: 'absolute',
   top: 0,
   width: '100%'

package/dist/es2019/ui/DropList/index.js

@@ -11,10 +11,9 @@ import { css, jsx } from '@emotion/react';
 import createAndFireEvent from '@atlaskit/analytics-next/createAndFireEvents';
 import withAnalyticsContext from '@atlaskit/analytics-next/withAnalyticsContext';
 import withAnalyticsEvents from '@atlaskit/analytics-next/withAnalyticsEvents';
-import { N0, N50A, N60A, N900 } from '@atlaskit/theme/colors';
 import Layer from '../Layer';
 const packageName = "@atlaskit/editor-common";
-const packageVersion = "92.1.2";
+const packageVersion = "93.0.0";
 const halfFocusRing = 1;
 const dropOffset = '0, 8';
 class DropList extends Component {
@@ -39,10 +38,10 @@ class DropList extends Component {
     /* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
     _defineProperty(this, "menuWrapper", () => {
       return css({
-        color: `var(--ds-text, ${N900})`,
-        backgroundColor: `var(--ds-surface-overlay, ${N0})`,
+        color: "var(--ds-text, #172B4D)",
+        backgroundColor: "var(--ds-surface-overlay, #FFFFFF)",
         borderRadius: "var(--ds-border-radius, 3px)",
-        boxShadow: `var(--ds-shadow-overlay, ${`0 4px 8px calc(-1 * 2px) ${N50A}, 0 0 1px ${N60A}`})`,
+        boxShadow: "var(--ds-shadow-overlay, 0px 8px 12px #091E4226, 0px 0px 1px #091E424f)",
         boxSizing: 'border-box',
         overflow: 'auto',
         padding: `${"var(--ds-space-050, 4px)"} 0`,