@atlaskit/renderer 128.2.3 → 128.3.1

package/dist/es2019/react/nodes/table.js

@@ -68,8 +68,7 @@ export const getRefTop = refElement => {
 export const shouldHeaderStick = (scrollTop, tableTop, tableBottom, rowHeight) => tableTop <= scrollTop && !(tableBottom - rowHeight <= scrollTop);
 export const shouldHeaderPinBottom = (scrollTop, tableBottom, rowHeight) => tableBottom - rowHeight <= scrollTop && !(tableBottom < scrollTop);
 export const addSortableColumn = (rows, tableOrderStatus, onSorting
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
+// eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/no-explicit-any
 ) => {
   return React.Children.map(rows, (row, index) => {
     if (index === 0) {
@@ -649,7 +648,9 @@ const TableWithShadows = overflowShadow(TableProcessor, {
 const TableWithWidth = props => {
   if (fg('platform-ssr-table-resize')) {
     var _props$columnWidths;
-    const colWidthsSum = ((_props$columnWidths = props.columnWidths) === null || _props$columnWidths === void 0 ? void 0 : _props$columnWidths.reduce((total, val) => total + val, 0)) || 0;
+    const colWidthsSum =
+    // eslint-disable-next-line @atlassian/perf-linting/no-expensive-computations-in-render -- Ignored via go/ees017 (to be fixed)
+    ((_props$columnWidths = props.columnWidths) === null || _props$columnWidths === void 0 ? void 0 : _props$columnWidths.reduce((total, val) => total + val, 0)) || 0;
     if (colWidthsSum || props.allowTableResizing) {
       // Ignored via go/ees005
       // eslint-disable-next-line react/jsx-props-no-spreading
@@ -665,7 +666,9 @@ const TableWithWidth = props => {
     }) => {
       var _props$columnWidths2;
       const renderWidth = props.rendererAppearance === 'full-page' ? width - FullPagePadding * 2 : width;
-      const colWidthsSum = ((_props$columnWidths2 = props.columnWidths) === null || _props$columnWidths2 === void 0 ? void 0 : _props$columnWidths2.reduce((total, val) => total + val, 0)) || 0;
+      const colWidthsSum =
+      // eslint-disable-next-line @atlassian/perf-linting/no-expensive-computations-in-render -- Ignored via go/ees017 (to be fixed)
+      ((_props$columnWidths2 = props.columnWidths) === null || _props$columnWidths2 === void 0 ? void 0 : _props$columnWidths2.reduce((total, val) => total + val, 0)) || 0;
       if (colWidthsSum || props.allowTableResizing) {
         // Ignored via go/ees005
         // eslint-disable-next-line react/jsx-props-no-spreading

package/dist/es2019/react/nodes/taskItem.js

@@ -29,7 +29,9 @@ export default class TaskItem extends PureComponent {
       if (rendererContext) {
         objectAri = rendererContext.objectAri || '';
       }
-      return /*#__PURE__*/React.createElement(FabricElementsAnalyticsContext, {
+      return /*#__PURE__*/React.createElement(FabricElementsAnalyticsContext
+      // eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed) 
+      , {
         data: {
           userContext: 'document'
         }
@@ -42,7 +44,9 @@ export default class TaskItem extends PureComponent {
         disableOnChange: disableOnChange,
         taskDecisionProvider: taskDecisionProvider,
         contextIdentifierProvider: contextIdentifierProvider,
-        dataAttributes: dataAttributes,
+        dataAttributes: dataAttributes
+        // eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed) 
+        ,
         onChange: (_, isChecked) => {
           dispatch(isChecked);
         }
@@ -58,7 +62,9 @@ export default class TaskItem extends PureComponent {
     }
   }
   render() {
-    return /*#__PURE__*/React.createElement(WithProviders, {
+    return /*#__PURE__*/React.createElement(WithProviders
+    // eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed) 
+    , {
       providers: ['taskDecisionProvider', 'contextIdentifierProvider'],
       providerFactory: this.providerFactory,
       renderNode: this.renderWithProvider

package/dist/es2019/ui/Expand.js

@@ -41,12 +41,12 @@ const containerStyles = css({
   borderColor: 'transparent',
   borderRadius: "var(--ds-radius-small, 4px)",
   minHeight: '25px',
-  background: "var(--ds-background-neutral-subtle, transparent)",
+  background: "var(--ds-background-neutral-subtle, #00000000)",
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
   transition: `background 0.3s ${akEditorSwoopCubicBezier}, border-color 0.3s ${akEditorSwoopCubicBezier}`,
   padding: "var(--ds-space-0, 0px)",
   paddingBottom: "var(--ds-space-0, 0px)",
-  marginTop: "var(--ds-space-050, 0.25rem)",
+  marginTop: "var(--ds-space-050, 4px)",
   marginBottom: 0,
   marginLeft: 0,
   marginRight: 0,
@@ -56,7 +56,7 @@ const containerStyles = css({
   }
 });
 const containerStylesExpanded = css({
-  background: "var(--ds-surface, rgba(255, 255, 255, 0.6))",
+  background: "var(--ds-surface, #FFFFFF)",
   paddingBottom: "var(--ds-space-100, 8px)",
   borderColor: "var(--ds-border, #0B120E24)"
 });
@@ -219,14 +219,18 @@ function Expand({
     expanded: expanded,
     focused: focused
   }, nestedHeaderIds && nestedHeaderIds.length > 0 ? jsx(ActiveHeaderIdConsumer, {
-    nestedHeaderIds: nestedHeaderIds,
+    nestedHeaderIds: nestedHeaderIds
+    // eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed) 
+    ,
     onNestedHeaderIdMatch: () => {
       if (!hasLoadedChildren) {
         setHasLoadedChildren(true);
       }
       setExpanded(true);
     }
-  }) : null, jsx(TitleContainer, {
+  }) : null, jsx(TitleContainer
+  // eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed) 
+  , {
     onClick: e => {
       e.preventDefault();
       e.stopPropagation();

package/dist/es2019/ui/ExtensionRenderer.js

@@ -124,7 +124,9 @@ export default function ExtensionRenderer(props) {
   if (!props.providers) {
     return setupAndRenderExtensionNode({});
   }
-  return jsx(WithProviders, {
+  return jsx(WithProviders
+  // eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed) 
+  , {
     providers: ['extensionProvider'],
     providerFactory: props.providers,
     renderNode: setupAndRenderExtensionNode

package/dist/es2019/ui/MediaCard.js

@@ -246,7 +246,8 @@ export class MediaCardView extends Component {
       mediaClient,
       dataAttributes,
       enableSyncMediaCard,
-      localId
+      localId,
+      mediaViewerExtensions
     } = this.props;
     const isMobile = false;
     const shouldPlayInline = useInlinePlayer !== undefined ? useInlinePlayer : true;
@@ -308,6 +309,7 @@ export class MediaCardView extends Component {
       shouldEnableDownloadButton: shouldEnableDownloadButton,
       ssr: ssr === null || ssr === void 0 ? void 0 : ssr.mode,
       shouldHideTooltip: isMobile,
+      mediaViewerExtensions: mediaViewerExtensions,
       onError: expValEquals('platform_editor_media_error_analytics', 'isEnabled', true) ? this.onError : undefined
     }));
   }

package/dist/es2019/ui/Renderer/RendererStyleContainer.js

@@ -7,11 +7,10 @@
  */
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled
 import { css, jsx } from '@emotion/react';
-import { B300, B400, B500, N20, N200, N30A, N40A, N60A, N800, R50, R500, Y300, Y75 } from '@atlaskit/theme/colors';
 import { FullPagePadding } from './style';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { RendererCssClassName } from '../../consts';
-import { akEditorBlockquoteBorderColor, akEditorCalculatedWideLayoutWidth, akEditorCalculatedWideLayoutWidthSmallViewport, akEditorFullPageNarrowBreakout, akEditorGutterPaddingReduced, akEditorDefaultLayoutWidth, akEditorFullWidthLayoutWidth, akEditorMaxWidthLayoutWidth, akEditorGutterPadding, akEditorLineHeight, akEditorSelectedNodeClassName, akEditorShadowZIndex, akEditorStickyHeaderZIndex, akEditorTableBorder, akEditorTableCellMinWidth, akEditorTableNumberColumnWidth, akEditorTableToolbar, blockNodesVerticalMargin, scaledBlockNodesVerticalMargin, gridMediumMaxWidth, akEditorFullPageDefaultFontSize, akEditorFullPageDenseFontSize } from '@atlaskit/editor-shared-styles';
+import { akEditorCalculatedWideLayoutWidth, akEditorCalculatedWideLayoutWidthSmallViewport, akEditorFullPageNarrowBreakout, akEditorGutterPaddingReduced, akEditorDefaultLayoutWidth, akEditorFullWidthLayoutWidth, akEditorMaxWidthLayoutWidth, akEditorGutterPadding, akEditorLineHeight, akEditorSelectedNodeClassName, akEditorShadowZIndex, akEditorStickyHeaderZIndex, akEditorTableCellMinWidth, akEditorTableNumberColumnWidth, blockNodesVerticalMargin, scaledBlockNodesVerticalMargin, gridMediumMaxWidth, akEditorFullPageDefaultFontSize, akEditorFullPageDenseFontSize } from '@atlaskit/editor-shared-styles';
 import { INLINE_IMAGE_WRAPPER_CLASS_NAME } from '@atlaskit/editor-common/media-inline';
 import { HeadingAnchorWrapperClassName } from '../../react/nodes/heading-anchor';
 import { CodeBlockSharedCssClassName, DateSharedCssClassName, listItemCounterPadding, richMediaClassName, SmartCardSharedCssClassName, tableCellBorderWidth, tableCellMinWidth, tableCellPadding, tableMarginTop, TableSharedCssClassName, TaskDecisionSharedCssClassName } from '@atlaskit/editor-common/styles';
@@ -66,7 +65,7 @@ const originalBaseFontLineHeight = css({
 const baseStyles = css({
   // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
   fontSize: 'var(--ak-renderer-base-font-size)',
-  color: `var(--ds-text, ${N800})`,
+  color: "var(--ds-text, #292A2E)",
   '--ak-editor--full-width-layout-width': `${akEditorFullWidthLayoutWidth}px`,
   [`.${RendererCssClassName.DOCUMENT}::after`]: {
     // we add a clearfix after ak-renderer-document in order to
@@ -140,19 +139,19 @@ const baseStyles = css({
     }
   },
   [`& span.akActionMark`]: {
-    color: `var(--ds-link, ${B400})`,
+    color: "var(--ds-link, #1868DB)",
     textDecoration: 'none',
     cursor: 'pointer',
     '&:hover': {
-      color: `var(--ds-link, ${B300})`,
+      color: "var(--ds-link, #1868DB)",
       textDecoration: 'underline'
     },
     '&:active': {
-      color: `var(--ds-link-pressed, ${B500})`
+      color: "var(--ds-link-pressed, #1558BC)"
     }
   },
   '& span[data-placeholder]': {
-    color: `var(--ds-text-subtlest, ${N200})`
+    color: "var(--ds-text-subtlest, #6B6E76)"
   }
 });
 const headingAnchorStylesDuplicateAnchor = css({
@@ -448,7 +447,7 @@ const rovoTelepointerStyles = css({
       position: 'absolute',
       fontFamily: "var(--ds-font-family-body, \"Atlassian Sans\", ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, \"Helvetica Neue\", sans-serif)",
       fontWeight: "var(--ds-font-weight-semibold, 600)",
-      color: "var(--ds-text-inverse, white)",
+      color: "var(--ds-text-inverse, #FFFFFF)",
       backgroundColor: "var(--ds-text, #292A2E)",
       top: 1,
       left: 1,
@@ -476,7 +475,7 @@ const blockquoteSharedStyles = css({
     display: 'inline-block',
     paddingLeft: "var(--ds-space-200, 16px)",
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
-    borderLeft: `${"var(--ds-border-width-selected, 2px)"} solid ${`var(--ds-border, ${akEditorBlockquoteBorderColor})`}`,
+    borderLeft: `${"var(--ds-border-width-selected, 2px)"} solid ${"var(--ds-border, #0B120E24)"}`,
     // 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: `${blockNodesVerticalMargin} 0 0 0`,
     marginRight: 0,
@@ -553,7 +552,7 @@ const headingsSharedStyles = css({
   '& h4': {
     // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
     font: `var(--ak-renderer-editor-font-heading-h4)`,
-    marginTop: "var(--ds-space-250, 1.25em)",
+    marginTop: "var(--ds-space-250, 20px)",
     '& strong': {
       // set all heading bold style to token font.weight.bold, as not matter what typography is used, the editorUGCToken will return the font weight 700
       fontWeight: "var(--ds-font-weight-bold, 653)"
@@ -954,8 +953,8 @@ const codeMarkSharedStyles = css({
     // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
     fontFamily: "var(--ds-font-family-code, \"Atlassian Mono\", ui-monospace, Menlo, \"Segoe UI Mono\", \"Ubuntu Mono\", monospace)",
     fontWeight: "var(--ds-font-weight-regular, 400)",
-    backgroundColor: `var(--ds--code--bg-color,${`var(--ds-background-neutral, ${N20})`})`,
-    color: `var(--ds-text, ${N800})`,
+    backgroundColor: `var(--ds--code--bg-color,${"var(--ds-background-neutral, #0515240F)"})`,
+    color: "var(--ds-text, #292A2E)",
     borderStyle: 'none',
     borderRadius: "var(--ds-radius-small, 3px)",
     display: 'inline',
@@ -1043,14 +1042,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, #1E1F2129)"} 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, #1E1F2129)"} 140% ), linear-gradient( to right, ${"var(--ds-shadow-overflow-perimeter, #1E1F211f)"} 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, #1E1F2129)"} 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, #1E1F2129)"} 140% ), linear-gradient( to left, ${"var(--ds-shadow-overflow-perimeter, #1E1F211f)"} 0px, transparent 1px )`,
     right: '0px',
     top: '0px',
     display: 'block'
@@ -1248,9 +1247,9 @@ const baseOtherStylesDuplicateAnchor = css({
     wordWrap: 'break-word'
   },
   '& span.date-node': {
-    backgroundColor: `var(--ds-background-neutral, ${N30A})`,
+    backgroundColor: "var(--ds-background-neutral, #0515240F)",
     borderRadius: "var(--ds-radius-small, 3px)",
-    color: `var(--ds-text, ${N800})`,
+    color: "var(--ds-text, #292A2E)",
     paddingTop: "var(--ds-space-025, 2px)",
     paddingRight: "var(--ds-space-050, 4px)",
     paddingBottom: "var(--ds-space-025, 2px)",
@@ -1259,8 +1258,8 @@ const baseOtherStylesDuplicateAnchor = css({
     transition: `background 0.3s`
   },
   '& span.date-node-highlighted': {
-    backgroundColor: `var(--ds-background-danger, ${R50})`,
-    color: `var(--ds-text-danger, ${R500})`
+    backgroundColor: "var(--ds-background-danger, #FFECEB)",
+    color: "var(--ds-text-danger, #AE2E24)"
   },
   '& .renderer-image': {
     maxWidth: '100%',
@@ -1376,9 +1375,9 @@ const baseOtherStyles = css({
     wordWrap: 'break-word'
   },
   '& span.date-node': {
-    backgroundColor: `var(--ds-background-neutral, ${N30A})`,
+    backgroundColor: "var(--ds-background-neutral, #0515240F)",
     borderRadius: "var(--ds-radius-small, 3px)",
-    color: `var(--ds-text, ${N800})`,
+    color: "var(--ds-text, #292A2E)",
     paddingTop: "var(--ds-space-025, 2px)",
     paddingRight: "var(--ds-space-050, 4px)",
     paddingBottom: "var(--ds-space-025, 2px)",
@@ -1387,8 +1386,8 @@ const baseOtherStyles = css({
     transition: `background 0.3s`
   },
   '& span.date-node-highlighted': {
-    backgroundColor: `var(--ds-background-danger, ${R50})`,
-    color: `var(--ds-text-danger, ${R500})`
+    backgroundColor: "var(--ds-background-danger, #FFECEB)",
+    color: "var(--ds-text-danger, #AE2E24)"
   },
   '& .renderer-image': {
     maxWidth: '100%',
@@ -1635,64 +1634,64 @@ const tableSharedStyle = css({
     backgroundColor: `${"var(--ds-surface, #FFFFFF)"} !important`
   },
   'td[colorname="light blue" i], th[colorname="light blue" i]': {
-    backgroundColor: `${"var(--ds-background-accent-blue-subtlest, #DEEBFF)"} !important`
+    backgroundColor: `${"var(--ds-background-accent-blue-subtlest, #E9F2FE)"} !important`
   },
   'td[colorname="light teal" i], th[colorname="light teal" i]': {
-    backgroundColor: `${"var(--ds-background-accent-teal-subtlest, #E6FCFF)"} !important`
+    backgroundColor: `${"var(--ds-background-accent-teal-subtlest, #E7F9FF)"} !important`
   },
   'td[colorname="light green" i], th[colorname="light green" i]': {
-    backgroundColor: `${"var(--ds-background-accent-green-subtlest, #E3FCEF)"} !important`
+    backgroundColor: `${"var(--ds-background-accent-green-subtlest, #DCFFF1)"} !important`
   },
   'td[colorname="light yellow" i], th[colorname="light yellow" i]': {
-    backgroundColor: `${"var(--ds-background-accent-yellow-subtlest, #FFFAE6)"} !important`
+    backgroundColor: `${"var(--ds-background-accent-yellow-subtlest, #FEF7C8)"} !important`
   },
   'td[colorname="light red" i], th[colorname="light red" i]': {
-    backgroundColor: `${"var(--ds-background-accent-red-subtlest, #FFEBE6)"} !important`
+    backgroundColor: `${"var(--ds-background-accent-red-subtlest, #FFECEB)"} !important`
   },
   'td[colorname="light purple" i], th[colorname="light purple" i]': {
-    backgroundColor: `${"var(--ds-background-accent-purple-subtlest, #EAE6FF)"} !important`
+    backgroundColor: `${"var(--ds-background-accent-purple-subtlest, #F8EEFE)"} !important`
   },
   'td[colorname="light gray" i], th[colorname="light gray" i]': {
-    backgroundColor: `${"var(--ds-background-accent-gray-subtlest, #F4F5F7)"} !important`
+    backgroundColor: `${"var(--ds-background-accent-gray-subtlest, #F0F1F2)"} !important`
   },
   'td[colorname="blue" i], th[colorname="blue" i]': {
-    backgroundColor: `${"var(--ds-background-accent-blue-subtler, #B3D4FF)"} !important`
+    backgroundColor: `${"var(--ds-background-accent-blue-subtler, #CFE1FD)"} !important`
   },
   'td[colorname="teal" i], th[colorname="teal" i]': {
-    backgroundColor: `${"var(--ds-background-accent-teal-subtler, #B3F5FF)"} !important`
+    backgroundColor: `${"var(--ds-background-accent-teal-subtler, #C6EDFB)"} !important`
   },
   'td[colorname="green" i], th[colorname="green" i]': {
-    backgroundColor: `${"var(--ds-background-accent-green-subtler, #ABF5D1)"} !important`
+    backgroundColor: `${"var(--ds-background-accent-green-subtler, #BAF3DB)"} !important`
   },
   'td[colorname="yellow" i], th[colorname="yellow" i]': {
-    backgroundColor: `${"var(--ds-background-accent-yellow-subtler, #FFF0B3)"} !important`
+    backgroundColor: `${"var(--ds-background-accent-yellow-subtler, #F5E989)"} !important`
   },
   'td[colorname="red" i], th[colorname="red" i]': {
-    backgroundColor: `${"var(--ds-background-accent-red-subtler, #FFBDAD)"} !important`
+    backgroundColor: `${"var(--ds-background-accent-red-subtler, #FFD5D2)"} !important`
   },
   'td[colorname="purple" i], th[colorname="purple" i]': {
-    backgroundColor: `${"var(--ds-background-accent-purple-subtler, #C0B6F2)"} !important`
+    backgroundColor: `${"var(--ds-background-accent-purple-subtler, #EED7FC)"} !important`
   },
   'td[colorname="gray" i], th[colorname="gray" i]': {
-    backgroundColor: `${"var(--ds-background-accent-gray-subtle, #B3BAC5)"} !important`
+    backgroundColor: `${"var(--ds-background-accent-gray-subtle, #8C8F97)"} !important`
   },
   'td[colorname="dark blue" i], th[colorname="dark blue" i]': {
-    backgroundColor: `${"var(--ds-background-accent-blue-subtle, #4C9AFF)"} !important`
+    backgroundColor: `${"var(--ds-background-accent-blue-subtle, #669DF1)"} !important`
   },
   'td[colorname="dark teal" i], th[colorname="dark teal" i]': {
-    backgroundColor: `${"var(--ds-background-accent-teal-subtle, #79E2F2)"} !important`
+    backgroundColor: `${"var(--ds-background-accent-teal-subtle, #6CC3E0)"} !important`
   },
   'td[colorname="dark green" i], th[colorname="dark green" i]': {
-    backgroundColor: `${"var(--ds-background-accent-green-subtle, #57D9A3)"} !important`
+    backgroundColor: `${"var(--ds-background-accent-green-subtle, #4BCE97)"} !important`
   },
   'td[colorname="dark yellow" i], th[colorname="dark yellow" i]': {
-    backgroundColor: `${"var(--ds-background-accent-orange-subtle, #FFC400)"} !important`
+    backgroundColor: `${"var(--ds-background-accent-orange-subtle, #FCA700)"} !important`
   },
   'td[colorname="dark red" i], th[colorname="dark red" i]': {
-    backgroundColor: `${"var(--ds-background-accent-red-subtle, #FF8F73)"} !important`
+    backgroundColor: `${"var(--ds-background-accent-red-subtle, #F87168)"} !important`
   },
   'td[colorname="dark purple" i], th[colorname="dark purple" i]': {
-    backgroundColor: `${"var(--ds-background-accent-purple-subtle, #998DD9)"} !important`
+    backgroundColor: `${"var(--ds-background-accent-purple-subtle, #C97CF4)"} !important`
   },
   [`.${TableSharedCssClassName.TABLE_CONTAINER}`]: {
     position: 'relative',
@@ -1737,7 +1736,7 @@ const tableSharedStyle = css({
 	.${TableSharedCssClassName.TABLE_NODE_WRAPPER} > table,
 	.${TableSharedCssClassName.TABLE_STICKY_WRAPPER} > table`]: {
     borderCollapse: 'collapse',
-    border: `${tableCellBorderWidth}px solid ${`var(--ds-background-accent-gray-subtler, ${akEditorTableBorder})`}`,
+    border: `${tableCellBorderWidth}px solid ${"var(--ds-background-accent-gray-subtler, #DDDEE1)"}`,
     tableLayout: 'fixed',
     // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
     fontSize: '1em',
@@ -1755,22 +1754,22 @@ const tableSharedStyle = css({
       borderBottom: 'none'
     },
     'th td': {
-      backgroundColor: "var(--ds-background-neutral-subtle, white)"
+      backgroundColor: "var(--ds-background-neutral-subtle, #00000000)"
     },
     '> tbody > tr > td': {
       backgroundColor: "var(--ds-surface, #FFFFFF)"
     },
     th: {
-      backgroundColor: `var(--ds-background-accent-gray-subtlest, ${akEditorTableToolbar})`,
+      backgroundColor: "var(--ds-background-accent-gray-subtlest, #F0F1F2)",
       textAlign: 'left',
       /* only apply this styling to codeblocks in default background headercells */
       /* TODO this needs to be overhauled as it relies on unsafe selectors */
       // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors
       '&:not([style]):not(.danger)': {
         [`.${CodeBlockSharedCssClassName.CODEBLOCK_CONTAINER}:not(.danger)`]: {
-          backgroundColor: "var(--ds-surface-raised, rgb(235, 237, 240))",
+          backgroundColor: "var(--ds-surface-raised, #FFFFFF)",
           [`&:not(.${akEditorSelectedNodeClassName})`]: {
-            boxShadow: `0px 0px 0px 1px ${"var(--ds-border, transparent)"}`
+            boxShadow: `0px 0px 0px 1px ${"var(--ds-border, #0B120E24)"}`
           },
           [`.${CodeBlockSharedCssClassName.CODEBLOCK_CONTENT_WRAPPER}`]: {
             // originally copied from packages/editor/editor-shared-styles/src/overflow-shadow/overflow-shadow.ts
@@ -1807,10 +1806,10 @@ const tableSharedStyle = css({
 							${"var(--ds-shadow-overflow-perimeter, #1E1F211f)"} 0,
 							${"var(--ds-UNSAFE-transparent, transparent)"}  ${"var(--ds-space-100, 8px)"}
 						  )`,
-            backgroundColor: "var(--ds-background-neutral, rgb(235, 237, 240))"
+            backgroundColor: "var(--ds-background-neutral, #0515240F)"
           },
           [`.${CodeBlockSharedCssClassName.CODEBLOCK_LINE_NUMBER_GUTTER}`]: {
-            backgroundColor: "var(--ds-background-neutral, rgb(226, 229, 233))"
+            backgroundColor: "var(--ds-background-neutral, #0515240F)"
           },
           /* this is only relevant to the element taken care of by renderer */
           '> [data-ds--code--code-block]': {
@@ -1848,9 +1847,9 @@ const tableSharedStyle = css({
 							${"var(--ds-shadow-overflow-perimeter, #1E1F211f)"} 0,
 							${"var(--ds-UNSAFE-transparent, transparent)"}  ${"var(--ds-space-100, 8px)"}
 						  )`,
-            backgroundColor: `${"var(--ds-background-neutral, rgb(235, 237, 240))"}!important`,
+            backgroundColor: `${"var(--ds-background-neutral, #0515240F)"}!important`,
             // selector lives inside @atlaskit/code
-            '--ds--code--line-number-bg-color': "var(--ds-background-neutral, rgb(226, 229, 233))"
+            '--ds--code--line-number-bg-color': "var(--ds-background-neutral, #0515240F)"
           }
         }
       }
@@ -1865,7 +1864,7 @@ const tableRendererHeaderStylesForTableCellOnly = css({
       minWidth: `${tableCellMinWidth}px`,
       fontWeight: "var(--ds-font-weight-regular, 400)",
       verticalAlign: 'top',
-      border: `${"var(--ds-border-width, 1px)"} solid ${`var(--ds-background-accent-gray-subtler, ${akEditorTableBorder})`}`,
+      border: `${"var(--ds-border-width, 1px)"} solid ${"var(--ds-background-accent-gray-subtler, #DDDEE1)"}`,
       borderRightWidth: 0,
       borderBottomWidth: 0,
       paddingTop: "var(--ds-space-100, 8px)",
@@ -1881,7 +1880,7 @@ const tableRendererHeaderStylesForTableCellOnly = css({
 });
 const tableRendererNestedPanelStyles = css({
   [`.${TableSharedCssClassName.TABLE_CONTAINER} .ak-editor-panel`]: {
-    border: `${"var(--ds-border-width, 1px)"} solid ${"var(--ds-border, #d9dbea)"}`
+    border: `${"var(--ds-border-width, 1px)"} solid ${"var(--ds-border, #0B120E24)"}`
   }
 });
 const tableStylesBackGroundClipForGeckoForTableCellOnly = css({
@@ -1941,11 +1940,11 @@ const rendererTableStyles = css({
       background: `linear-gradient(
 					to left,
 					transparent 0,
-					${`var(--ds-shadow-overflow-spread, ${N40A})`} 140%
+					${"var(--ds-shadow-overflow-spread, #1E1F2129)"} 140%
 				),
 				linear-gradient(
 					to right,
-					${"var(--ds-shadow-overflow-perimeter, transparent)"} 0px,
+					${"var(--ds-shadow-overflow-perimeter, #1E1F211f)"} 0px,
 					transparent 1px
 				)`
     },
@@ -1953,11 +1952,11 @@ const rendererTableStyles = css({
       background: `linear-gradient(
 					to right,
 					transparent 0,
-					${`var(--ds-shadow-overflow-spread, ${N40A})`} 140%
+					${"var(--ds-shadow-overflow-spread, #1E1F2129)"} 140%
 				),
 				linear-gradient(
 					to left,
-					${"var(--ds-shadow-overflow-perimeter, transparent)"} 0px,
+					${"var(--ds-shadow-overflow-perimeter, #1E1F211f)"} 0px,
 					transparent 1px
 				)`,
       right: `0px`
@@ -2047,7 +2046,7 @@ const rendererTableSortableColumnStyles = css({
               outline: 'unset'
             },
             '&:focus-visible': {
-              borderColor: `${`var(--ds-border-focused, ${B300})`}`
+              borderColor: `${"var(--ds-border-focused, #4688EC)"}`
             }
           }
         },
@@ -2089,10 +2088,10 @@ const rendererTableColumnStyles = css({
       [`.${RendererCssClassName.NUMBER_COLUMN}`]: {
         backgroundColor: `${"var(--ds-background-accent-gray-subtlest, #F0F1F2)"}`,
         borderRight: `${"var(--ds-border-width, 1px)"} solid
-								${`var(--ds-background-accent-gray-subtler, ${akEditorTableBorder})`}`,
+								${"var(--ds-background-accent-gray-subtler, #DDDEE1)"}`,
         width: `${akEditorTableNumberColumnWidth}px`,
         textAlign: 'center',
-        color: `${`var(--ds-text-subtlest, ${N200})`}`,
+        color: `${"var(--ds-text-subtlest, #6B6E76)"}`,
         // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
         fontSize: `${14 / 16} rem`
       },
@@ -2149,8 +2148,8 @@ const stickyHeaderStyles = css({
     display: 'flex',
     overflow: 'hidden',
     zIndex: `${akEditorStickyHeaderZIndex}`,
-    borderRight: `${"var(--ds-border-width, 1px)"} solid ${`var(--ds-background-accent-gray-subtler, ${akEditorTableBorder})`}`,
-    borderBottom: `${"var(--ds-border-width, 1px)"} solid ${`var(--ds-background-accent-gray-subtler, ${akEditorTableBorder})`}`,
+    borderRight: `${"var(--ds-border-width, 1px)"} solid ${"var(--ds-background-accent-gray-subtler, #DDDEE1)"}`,
+    borderBottom: `${"var(--ds-border-width, 1px)"} solid ${"var(--ds-background-accent-gray-subtler, #DDDEE1)"}`,
     /* this is to compensate for the table border */
     transform: 'translateX(-1px)'
   },
@@ -2168,10 +2167,10 @@ const stickyHeaderStyles = css({
   and work around background-clip: padding-box
   bug for FF causing box-shadow bug in Chrome */
   '.sticky th, .sticky td': {
-    boxShadow: `0px 1px ${`var(--ds-background-accent-gray-subtler, ${akEditorTableBorder})`},
-			0px -0.5px ${`var(--ds-background-accent-gray-subtler, ${akEditorTableBorder})`},
-			inset -1px 0px ${`var(--ds-background-accent-gray-subtler, ${akEditorTableToolbar})`},
-			0px -1px ${`var(--ds-background-accent-gray-subtler, ${akEditorTableToolbar})`}`
+    boxShadow: `0px 1px ${"var(--ds-background-accent-gray-subtler, #DDDEE1)"},
+			0px -0.5px ${"var(--ds-background-accent-gray-subtler, #DDDEE1)"},
+			inset -1px 0px ${"var(--ds-background-accent-gray-subtler, #DDDEE1)"},
+			0px -1px ${"var(--ds-background-accent-gray-subtler, #DDDEE1)"}`
   },
   /* this will remove jumpiness caused in Chrome for sticky headers */
   '.fixed + tr': {
@@ -2334,9 +2333,9 @@ const columnLayoutResponsiveRendererStyles = css({
 });
 const rendererAnnotationStylesOld = css({
   "& [data-mark-type='annotation'][data-mark-annotation-state='active'] [data-annotation-mark], & [data-annotation-draft-mark][data-annotation-inline-node]": {
-    background: `var(--ds-background-accent-yellow-subtler, ${Y75})`,
-    borderBottom: `${"var(--ds-border-width-selected, 2px)"} solid ${`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, #F5E989)",
+    borderBottom: `${"var(--ds-border-width-selected, 2px)"} solid ${"var(--ds-border-accent-yellow, #B38600)"}`,
+    boxShadow: "var(--ds-shadow-overlay, 0px 8px 12px #1E1F2126, 0px 0px 1px #1E1F214f)",
     cursor: 'pointer',
     paddingTop: "var(--ds-space-050, 4px)",
     paddingRight: "var(--ds-space-025, 2px)",
@@ -2347,7 +2346,7 @@ const rendererAnnotationStylesOld = css({
 const rendererAnnotationStyles = css({
   "& [data-mark-type='annotation'][data-mark-annotation-state='active'] [data-annotation-mark]": {
     background: "var(--ds-background-accent-yellow-subtlest, #FEF7C8)",
-    borderBottom: `${"var(--ds-border-width-selected, 2px)"} solid ${`var(--ds-border-accent-yellow, ${Y300})`}`,
+    borderBottom: `${"var(--ds-border-width-selected, 2px)"} solid ${"var(--ds-border-accent-yellow, #B38600)"}`,
     cursor: 'pointer',
     paddingTop: "var(--ds-space-050, 4px)",
     paddingRight: "var(--ds-space-025, 2px)",
@@ -2356,7 +2355,7 @@ const rendererAnnotationStyles = css({
   },
   "& [data-mark-type='annotation'][data-mark-annotation-state='active'][data-has-focus='true'] [data-annotation-mark]": {
     background: "var(--ds-background-accent-yellow-subtlest-pressed, #EFDD4E)",
-    boxShadow: `var(--ds-shadow-overlay, ${`1px 2px 3px ${N60A}, -1px 2px 3px ${N60A}`})`
+    boxShadow: "var(--ds-shadow-overlay, 0px 8px 12px #1E1F2126, 0px 0px 1px #1E1F214f)"
   }
 });
 const rendererAnnotationStylesCommentHeightFix = css({
@@ -2369,9 +2368,9 @@ const rendererAnnotationStylesCommentHeightFix = css({
     paddingRight: 0,
     paddingBottom: "var(--ds-space-025, 2px)",
     paddingLeft: 0,
-    backgroundColor: `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}`})`
+    backgroundColor: "var(--ds-background-accent-yellow-subtler, #F5E989)",
+    borderBottomColor: "var(--ds-border-accent-yellow, #B38600)",
+    boxShadow: "var(--ds-shadow-overlay, 0px 8px 12px #1E1F2126, 0px 0px 1px #1E1F214f)"
   },
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
   '& [data-annotation-draft-mark][data-annotation-inline-node][data-inline-card]': {