@atlaskit/renderer 128.3.0 → 128.3.2

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

@@ -9,11 +9,10 @@ var _css8, _$concat3, _$concat6;
  */
 // 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';
@@ -68,7 +67,7 @@ var originalBaseFontLineHeight = css({
 var baseStyles = css(_defineProperty(_defineProperty(_defineProperty(_defineProperty({
   // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
   fontSize: 'var(--ak-renderer-base-font-size)',
-  color: "var(--ds-text, ".concat(N800, ")"),
+  color: "var(--ds-text, #292A2E)",
   '--ak-editor--full-width-layout-width': "".concat(akEditorFullWidthLayoutWidth, "px")
 }, ".".concat(RendererCssClassName.DOCUMENT, "::after"), {
   // we add a clearfix after ak-renderer-document in order to
@@ -101,18 +100,18 @@ var baseStyles = css(_defineProperty(_defineProperty(_defineProperty(_defineProp
   height: '18px',
   transform: "translateY(-2px)"
 }))), "& span.akActionMark", {
-  color: "var(--ds-link, ".concat(B400, ")"),
+  color: "var(--ds-link, #1868DB)",
   textDecoration: 'none',
   cursor: 'pointer',
   '&:hover': {
-    color: "var(--ds-link, ".concat(B300, ")"),
+    color: "var(--ds-link, #1868DB)",
     textDecoration: 'underline'
   },
   '&:active': {
-    color: "var(--ds-link-pressed, ".concat(B500, ")")
+    color: "var(--ds-link-pressed, #1558BC)"
   }
 }), '& span[data-placeholder]', {
-  color: "var(--ds-text-subtlest, ".concat(N200, ")")
+  color: "var(--ds-text-subtlest, #6B6E76)"
 }));
 var headingAnchorStylesDuplicateAnchor = css({
   '& h1, & h2, & h3, & h4, & h5, & h6': _defineProperty(_defineProperty({}, ".".concat(HeadingAnchorWrapperClassName), {
@@ -345,7 +344,7 @@ var rovoTelepointerStyles = css(_defineProperty({}, "#".concat(TELEPOINTER_ID),
     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,
@@ -372,7 +371,7 @@ var 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)".concat(" solid ", "var(--ds-border, ".concat(akEditorBlockquoteBorderColor, ")")),
+    borderLeft: "var(--ds-border-width-selected, 2px)".concat(" 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: "".concat(blockNodesVerticalMargin, " 0 0 0"),
     marginRight: 0,
@@ -449,7 +448,7 @@ var 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)"
@@ -700,7 +699,7 @@ var listsSharedStylesForGekko = css({
 /**
  * Hides list markers for "wrapper items" - list items that only contain nested lists with no other content.
  * These wrapper items have no meaningful content themselves, only nested lists below.
- * Applied when platform_editor_flexible_list_indentation experiment is enabled.
+ * Applied when platform_editor_flexible_list_schema experiment is enabled.
  */
 var listItemHiddenMarkerStyles = css({
   // Hide markers and remove spacing for wrapper list items (items containing only nested lists)
@@ -800,8 +799,8 @@ var 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,".concat("var(--ds-background-neutral, ".concat(N20, ")"), ")"),
-    color: "var(--ds-text, ".concat(N800, ")"),
+    backgroundColor: "var(--ds--code--bg-color,".concat("var(--ds-background-neutral, #0515240F)", ")"),
+    color: "var(--ds-text, #292A2E)",
     borderStyle: 'none',
     borderRadius: "var(--ds-radius-small, 3px)",
     display: 'inline',
@@ -873,12 +872,12 @@ var shadowSharedStyle = css(_defineProperty(_defineProperty(_defineProperty(_def
 }), "& .".concat(shadowClassNames.RIGHT_SHADOW, ", .").concat(shadowClassNames.LEFT_SHADOW), {
   position: 'relative'
 }), "& .".concat(shadowClassNames.LEFT_SHADOW, "::before"), {
-  background: "linear-gradient( to left, transparent 0, ".concat("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, ".concat("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'
 }), "& .".concat(shadowClassNames.RIGHT_SHADOW, "::after"), {
-  background: "linear-gradient( to right, transparent 0, ".concat("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, ".concat("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'
@@ -1052,9 +1051,9 @@ var baseOtherStylesDuplicateAnchor = css(_defineProperty(_defineProperty(_define
     wordWrap: 'break-word'
   },
   '& span.date-node': {
-    backgroundColor: "var(--ds-background-neutral, ".concat(N30A, ")"),
+    backgroundColor: "var(--ds-background-neutral, #0515240F)",
     borderRadius: "var(--ds-radius-small, 3px)",
-    color: "var(--ds-text, ".concat(N800, ")"),
+    color: "var(--ds-text, #292A2E)",
     paddingTop: "var(--ds-space-025, 2px)",
     paddingRight: "var(--ds-space-050, 4px)",
     paddingBottom: "var(--ds-space-025, 2px)",
@@ -1063,8 +1062,8 @@ var baseOtherStylesDuplicateAnchor = css(_defineProperty(_defineProperty(_define
     transition: "background 0.3s"
   },
   '& span.date-node-highlighted': {
-    backgroundColor: "var(--ds-background-danger, ".concat(R50, ")"),
-    color: "var(--ds-text-danger, ".concat(R500, ")")
+    backgroundColor: "var(--ds-background-danger, #FFECEB)",
+    color: "var(--ds-text-danger, #AE2E24)"
   },
   '& .renderer-image': {
     maxWidth: '100%',
@@ -1142,9 +1141,9 @@ var baseOtherStyles = css(_defineProperty(_defineProperty(_defineProperty(_defin
     wordWrap: 'break-word'
   },
   '& span.date-node': {
-    backgroundColor: "var(--ds-background-neutral, ".concat(N30A, ")"),
+    backgroundColor: "var(--ds-background-neutral, #0515240F)",
     borderRadius: "var(--ds-radius-small, 3px)",
-    color: "var(--ds-text, ".concat(N800, ")"),
+    color: "var(--ds-text, #292A2E)",
     paddingTop: "var(--ds-space-025, 2px)",
     paddingRight: "var(--ds-space-050, 4px)",
     paddingBottom: "var(--ds-space-025, 2px)",
@@ -1153,8 +1152,8 @@ var baseOtherStyles = css(_defineProperty(_defineProperty(_defineProperty(_defin
     transition: "background 0.3s"
   },
   '& span.date-node-highlighted': {
-    backgroundColor: "var(--ds-background-danger, ".concat(R50, ")"),
-    color: "var(--ds-text-danger, ".concat(R500, ")")
+    backgroundColor: "var(--ds-background-danger, #FFECEB)",
+    color: "var(--ds-text-danger, #AE2E24)"
   },
   '& .renderer-image': {
     maxWidth: '100%',
@@ -1336,64 +1335,64 @@ var tableSharedStyle = css(_defineProperty(_defineProperty(_defineProperty(_defi
     backgroundColor: "var(--ds-surface, #FFFFFF)".concat(" !important")
   },
   'td[colorname="light blue" i], th[colorname="light blue" i]': {
-    backgroundColor: "var(--ds-background-accent-blue-subtlest, #DEEBFF)".concat(" !important")
+    backgroundColor: "var(--ds-background-accent-blue-subtlest, #E9F2FE)".concat(" !important")
   },
   'td[colorname="light teal" i], th[colorname="light teal" i]': {
-    backgroundColor: "var(--ds-background-accent-teal-subtlest, #E6FCFF)".concat(" !important")
+    backgroundColor: "var(--ds-background-accent-teal-subtlest, #E7F9FF)".concat(" !important")
   },
   'td[colorname="light green" i], th[colorname="light green" i]': {
-    backgroundColor: "var(--ds-background-accent-green-subtlest, #E3FCEF)".concat(" !important")
+    backgroundColor: "var(--ds-background-accent-green-subtlest, #DCFFF1)".concat(" !important")
   },
   'td[colorname="light yellow" i], th[colorname="light yellow" i]': {
-    backgroundColor: "var(--ds-background-accent-yellow-subtlest, #FFFAE6)".concat(" !important")
+    backgroundColor: "var(--ds-background-accent-yellow-subtlest, #FEF7C8)".concat(" !important")
   },
   'td[colorname="light red" i], th[colorname="light red" i]': {
-    backgroundColor: "var(--ds-background-accent-red-subtlest, #FFEBE6)".concat(" !important")
+    backgroundColor: "var(--ds-background-accent-red-subtlest, #FFECEB)".concat(" !important")
   },
   'td[colorname="light purple" i], th[colorname="light purple" i]': {
-    backgroundColor: "var(--ds-background-accent-purple-subtlest, #EAE6FF)".concat(" !important")
+    backgroundColor: "var(--ds-background-accent-purple-subtlest, #F8EEFE)".concat(" !important")
   },
   'td[colorname="light gray" i], th[colorname="light gray" i]': {
-    backgroundColor: "var(--ds-background-accent-gray-subtlest, #F4F5F7)".concat(" !important")
+    backgroundColor: "var(--ds-background-accent-gray-subtlest, #F0F1F2)".concat(" !important")
   },
   'td[colorname="blue" i], th[colorname="blue" i]': {
-    backgroundColor: "var(--ds-background-accent-blue-subtler, #B3D4FF)".concat(" !important")
+    backgroundColor: "var(--ds-background-accent-blue-subtler, #CFE1FD)".concat(" !important")
   },
   'td[colorname="teal" i], th[colorname="teal" i]': {
-    backgroundColor: "var(--ds-background-accent-teal-subtler, #B3F5FF)".concat(" !important")
+    backgroundColor: "var(--ds-background-accent-teal-subtler, #C6EDFB)".concat(" !important")
   },
   'td[colorname="green" i], th[colorname="green" i]': {
-    backgroundColor: "var(--ds-background-accent-green-subtler, #ABF5D1)".concat(" !important")
+    backgroundColor: "var(--ds-background-accent-green-subtler, #BAF3DB)".concat(" !important")
   },
   'td[colorname="yellow" i], th[colorname="yellow" i]': {
-    backgroundColor: "var(--ds-background-accent-yellow-subtler, #FFF0B3)".concat(" !important")
+    backgroundColor: "var(--ds-background-accent-yellow-subtler, #F5E989)".concat(" !important")
   },
   'td[colorname="red" i], th[colorname="red" i]': {
-    backgroundColor: "var(--ds-background-accent-red-subtler, #FFBDAD)".concat(" !important")
+    backgroundColor: "var(--ds-background-accent-red-subtler, #FFD5D2)".concat(" !important")
   },
   'td[colorname="purple" i], th[colorname="purple" i]': {
-    backgroundColor: "var(--ds-background-accent-purple-subtler, #C0B6F2)".concat(" !important")
+    backgroundColor: "var(--ds-background-accent-purple-subtler, #EED7FC)".concat(" !important")
   },
   'td[colorname="gray" i], th[colorname="gray" i]': {
-    backgroundColor: "var(--ds-background-accent-gray-subtle, #B3BAC5)".concat(" !important")
+    backgroundColor: "var(--ds-background-accent-gray-subtle, #8C8F97)".concat(" !important")
   },
   'td[colorname="dark blue" i], th[colorname="dark blue" i]': {
-    backgroundColor: "var(--ds-background-accent-blue-subtle, #4C9AFF)".concat(" !important")
+    backgroundColor: "var(--ds-background-accent-blue-subtle, #669DF1)".concat(" !important")
   },
   'td[colorname="dark teal" i], th[colorname="dark teal" i]': {
-    backgroundColor: "var(--ds-background-accent-teal-subtle, #79E2F2)".concat(" !important")
+    backgroundColor: "var(--ds-background-accent-teal-subtle, #6CC3E0)".concat(" !important")
   },
   'td[colorname="dark green" i], th[colorname="dark green" i]': {
-    backgroundColor: "var(--ds-background-accent-green-subtle, #57D9A3)".concat(" !important")
+    backgroundColor: "var(--ds-background-accent-green-subtle, #4BCE97)".concat(" !important")
   },
   'td[colorname="dark yellow" i], th[colorname="dark yellow" i]': {
-    backgroundColor: "var(--ds-background-accent-orange-subtle, #FFC400)".concat(" !important")
+    backgroundColor: "var(--ds-background-accent-orange-subtle, #FCA700)".concat(" !important")
   },
   'td[colorname="dark red" i], th[colorname="dark red" i]': {
-    backgroundColor: "var(--ds-background-accent-red-subtle, #FF8F73)".concat(" !important")
+    backgroundColor: "var(--ds-background-accent-red-subtle, #F87168)".concat(" !important")
   },
   'td[colorname="dark purple" i], th[colorname="dark purple" i]': {
-    backgroundColor: "var(--ds-background-accent-purple-subtle, #998DD9)".concat(" !important")
+    backgroundColor: "var(--ds-background-accent-purple-subtle, #C97CF4)".concat(" !important")
   }
 }, ".".concat(TableSharedCssClassName.TABLE_CONTAINER), {
   position: 'relative',
@@ -1428,7 +1427,7 @@ var tableSharedStyle = css(_defineProperty(_defineProperty(_defineProperty(_defi
   marginLeft: 0
 }), ".".concat(TableSharedCssClassName.TABLE_CONTAINER, " > table,\n\t.").concat(TableSharedCssClassName.TABLE_NODE_WRAPPER, " > table,\n\t.").concat(TableSharedCssClassName.TABLE_STICKY_WRAPPER, " > table"), {
   borderCollapse: 'collapse',
-  border: "".concat(tableCellBorderWidth, "px solid ", "var(--ds-background-accent-gray-subtler, ".concat(akEditorTableBorder, ")")),
+  border: "".concat(tableCellBorderWidth, "px solid ", "var(--ds-background-accent-gray-subtler, #DDDEE1)"),
   tableLayout: 'fixed',
   // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
   fontSize: '1em',
@@ -1446,33 +1445,33 @@ var tableSharedStyle = css(_defineProperty(_defineProperty(_defineProperty(_defi
     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, ".concat(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)': _defineProperty({}, ".".concat(CodeBlockSharedCssClassName.CODEBLOCK_CONTAINER, ":not(.danger)"), _defineProperty(_defineProperty(_defineProperty(_defineProperty({
-      backgroundColor: "var(--ds-surface-raised, rgb(235, 237, 240))"
+      backgroundColor: "var(--ds-surface-raised, #FFFFFF)"
     }, "&:not(.".concat(akEditorSelectedNodeClassName, ")"), {
-      boxShadow: "0px 0px 0px 1px ".concat("var(--ds-border, transparent)")
+      boxShadow: "0px 0px 0px 1px ".concat("var(--ds-border, #0B120E24)")
     }), ".".concat(CodeBlockSharedCssClassName.CODEBLOCK_CONTENT_WRAPPER), {
       // originally copied from packages/editor/editor-shared-styles/src/overflow-shadow/overflow-shadow.ts
       backgroundImage: "linear-gradient(\n\t\t\t\t\t\t\tto right,\n\t\t\t\t\t\t\t".concat("var(--ds-background-neutral, #0515240F)", " ", "var(--ds-space-300, 24px)", ",\n\t\t\t\t\t\t\ttransparent ", "var(--ds-space-300, 24px)", "\n\t\t\t\t\t\t  ),linear-gradient(\n\t\t\t\t\t\t\tto right,\n\t\t\t\t\t\t\t", "var(--ds-surface-raised, #FFFFFF)", " ", "var(--ds-space-300, 24px)", ",\n\t\t\t\t\t\t\ttransparent ", "var(--ds-space-300, 24px)", "\n\t\t\t\t\t\t  ),linear-gradient(\n\t\t\t\t\t\t\tto left,\n\t\t\t\t\t\t\t", "var(--ds-background-neutral, #0515240F)", " ", "var(--ds-space-100, 8px)", ",\n\t\t\t\t\t\t\ttransparent ", "var(--ds-space-100, 8px)", "\n\t\t\t\t\t\t  ),linear-gradient(\n\t\t\t\t\t\t\tto left,\n\t\t\t\t\t\t\t", "var(--ds-surface-raised, #FFFFFF)", " ", "var(--ds-space-100, 8px)", ",\n\t\t\t\t\t\t\ttransparent ", "var(--ds-space-100, 8px)", "\n\t\t\t\t\t\t  ),linear-gradient(\n\t\t\t\t\t\t\tto left,\n\t\t\t\t\t\t\t", "var(--ds-shadow-overflow-spread, #1E1F2129)", " 0,\n\t\t\t\t\t\t\t", "var(--ds-UNSAFE-transparent, transparent)", "  ", "var(--ds-space-100, 8px)", "\n\t\t\t\t\t\t  ),linear-gradient(\n\t\t\t\t\t\t\tto left,\n\t\t\t\t\t\t\t", "var(--ds-shadow-overflow-perimeter, #1E1F211f)", " 0,\n\t\t\t\t\t\t\t", "var(--ds-UNSAFE-transparent, transparent)", "  ", "var(--ds-space-100, 8px)", "\n\t\t\t\t\t\t  ),linear-gradient(\n\t\t\t\t\t\t\tto right,\n\t\t\t\t\t\t\t", "var(--ds-shadow-overflow-spread, #1E1F2129)", " 0,\n\t\t\t\t\t\t\t", "var(--ds-UNSAFE-transparent, transparent)", "  ", "var(--ds-space-100, 8px)", "\n\t\t\t\t\t\t  ),linear-gradient(\n\t\t\t\t\t\t\tto right,\n\t\t\t\t\t\t\t", "var(--ds-shadow-overflow-perimeter, #1E1F211f)", " 0,\n\t\t\t\t\t\t\t", "var(--ds-UNSAFE-transparent, transparent)", "  ", "var(--ds-space-100, 8px)", "\n\t\t\t\t\t\t  )"),
-      backgroundColor: "var(--ds-background-neutral, rgb(235, 237, 240))"
+      backgroundColor: "var(--ds-background-neutral, #0515240F)"
     }), ".".concat(CodeBlockSharedCssClassName.CODEBLOCK_LINE_NUMBER_GUTTER), {
-      backgroundColor: "var(--ds-background-neutral, rgb(226, 229, 233))"
+      backgroundColor: "var(--ds-background-neutral, #0515240F)"
     }), '> [data-ds--code--code-block]', {
       // originally copied from packages/editor/editor-shared-styles/src/overflow-shadow/overflow-shadow.ts
       backgroundImage: "linear-gradient(\n\t\t\t\t\t\t\tto right,\n\t\t\t\t\t\t\t".concat("var(--ds-background-neutral, #0515240F)", " ", "var(--ds-space-300, 24px)", ",\n\t\t\t\t\t\t\ttransparent ", "var(--ds-space-300, 24px)", "\n\t\t\t\t\t\t  ),linear-gradient(\n\t\t\t\t\t\t\tto right,\n\t\t\t\t\t\t\t", "var(--ds-surface-raised, #FFFFFF)", " ", "var(--ds-space-300, 24px)", ",\n\t\t\t\t\t\t\ttransparent ", "var(--ds-space-300, 24px)", "\n\t\t\t\t\t\t  ),linear-gradient(\n\t\t\t\t\t\t\tto left,\n\t\t\t\t\t\t\t", "var(--ds-background-neutral, #0515240F)", " ", "var(--ds-space-100, 8px)", ",\n\t\t\t\t\t\t\ttransparent ", "var(--ds-space-100, 8px)", "\n\t\t\t\t\t\t  ),linear-gradient(\n\t\t\t\t\t\t\tto left,\n\t\t\t\t\t\t\t", "var(--ds-surface-raised, #FFFFFF)", " ", "var(--ds-space-100, 8px)", ",\n\t\t\t\t\t\t\ttransparent ", "var(--ds-space-100, 8px)", "\n\t\t\t\t\t\t  ),linear-gradient(\n\t\t\t\t\t\t\tto left,\n\t\t\t\t\t\t\t", "var(--ds-shadow-overflow-spread, #1E1F2129)", " 0,\n\t\t\t\t\t\t\t", "var(--ds-UNSAFE-transparent, transparent)", "  ", "var(--ds-space-100, 8px)", "\n\t\t\t\t\t\t  ),linear-gradient(\n\t\t\t\t\t\t\tto left,\n\t\t\t\t\t\t\t", "var(--ds-shadow-overflow-perimeter, #1E1F211f)", " 0,\n\t\t\t\t\t\t\t", "var(--ds-UNSAFE-transparent, transparent)", "  ", "var(--ds-space-100, 8px)", "\n\t\t\t\t\t\t  ),linear-gradient(\n\t\t\t\t\t\t\tto right,\n\t\t\t\t\t\t\t", "var(--ds-shadow-overflow-spread, #1E1F2129)", " 0,\n\t\t\t\t\t\t\t", "var(--ds-UNSAFE-transparent, transparent)", "  ", "var(--ds-space-100, 8px)", "\n\t\t\t\t\t\t  ),linear-gradient(\n\t\t\t\t\t\t\tto right,\n\t\t\t\t\t\t\t", "var(--ds-shadow-overflow-perimeter, #1E1F211f)", " 0,\n\t\t\t\t\t\t\t", "var(--ds-UNSAFE-transparent, transparent)", "  ", "var(--ds-space-100, 8px)", "\n\t\t\t\t\t\t  )"),
-      backgroundColor: "var(--ds-background-neutral, rgb(235, 237, 240))".concat("!important"),
+      backgroundColor: "var(--ds-background-neutral, #0515240F)".concat("!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)"
     }))
   }
 }));
@@ -1481,7 +1480,7 @@ var tableRendererHeaderStylesForTableCellOnly = css(_defineProperty({}, ".".conc
     minWidth: "".concat(tableCellMinWidth, "px"),
     fontWeight: "var(--ds-font-weight-regular, 400)",
     verticalAlign: 'top',
-    border: "var(--ds-border-width, 1px)".concat(" solid ", "var(--ds-background-accent-gray-subtler, ".concat(akEditorTableBorder, ")")),
+    border: "var(--ds-border-width, 1px)".concat(" solid ", "var(--ds-background-accent-gray-subtler, #DDDEE1)"),
     borderRightWidth: 0,
     borderBottomWidth: 0,
     paddingTop: "var(--ds-space-100, 8px)",
@@ -1495,7 +1494,7 @@ var tableRendererHeaderStylesForTableCellOnly = css(_defineProperty({}, ".".conc
   }
 }));
 var tableRendererNestedPanelStyles = css(_defineProperty({}, ".".concat(TableSharedCssClassName.TABLE_CONTAINER, " .ak-editor-panel"), {
-  border: "var(--ds-border-width, 1px)".concat(" solid ", "var(--ds-border, #d9dbea)")
+  border: "var(--ds-border-width, 1px)".concat(" solid ", "var(--ds-border, #0B120E24)")
 }));
 var tableStylesBackGroundClipForGeckoForTableCellOnly = css(_defineProperty({}, ".".concat(TableSharedCssClassName.TABLE_CONTAINER, " > table,\n\t\t.").concat(TableSharedCssClassName.TABLE_NODE_WRAPPER, " > table,\n\t\t.").concat(TableSharedCssClassName.TABLE_STICKY_WRAPPER, " > table"), {
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors
@@ -1536,9 +1535,9 @@ var rendererTableStyles = css(_defineProperty({}, ".".concat(RendererCssClassNam
   height: "calc(100% - ".concat(tableMarginTop, "px)"),
   zIndex: "".concat(akEditorStickyHeaderZIndex),
   width: "".concat(tableShadowWidth, "px"),
-  background: "linear-gradient(\n\t\t\t\t\tto left,\n\t\t\t\t\ttransparent 0,\n\t\t\t\t\t".concat("var(--ds-shadow-overflow-spread, ".concat(N40A, ")"), " 140%\n\t\t\t\t),\n\t\t\t\tlinear-gradient(\n\t\t\t\t\tto right,\n\t\t\t\t\t", "var(--ds-shadow-overflow-perimeter, transparent)", " 0px,\n\t\t\t\t\ttransparent 1px\n\t\t\t\t)")
+  background: "linear-gradient(\n\t\t\t\t\tto left,\n\t\t\t\t\ttransparent 0,\n\t\t\t\t\t".concat("var(--ds-shadow-overflow-spread, #1E1F2129)", " 140%\n\t\t\t\t),\n\t\t\t\tlinear-gradient(\n\t\t\t\t\tto right,\n\t\t\t\t\t", "var(--ds-shadow-overflow-perimeter, #1E1F211f)", " 0px,\n\t\t\t\t\ttransparent 1px\n\t\t\t\t)")
 }), "&.".concat(shadowClassNames.RIGHT_SHADOW, "::after"), {
-  background: "linear-gradient(\n\t\t\t\t\tto right,\n\t\t\t\t\ttransparent 0,\n\t\t\t\t\t".concat("var(--ds-shadow-overflow-spread, ".concat(N40A, ")"), " 140%\n\t\t\t\t),\n\t\t\t\tlinear-gradient(\n\t\t\t\t\tto left,\n\t\t\t\t\t", "var(--ds-shadow-overflow-perimeter, transparent)", " 0px,\n\t\t\t\t\ttransparent 1px\n\t\t\t\t)"),
+  background: "linear-gradient(\n\t\t\t\t\tto right,\n\t\t\t\t\ttransparent 0,\n\t\t\t\t\t".concat("var(--ds-shadow-overflow-spread, #1E1F2129)", " 140%\n\t\t\t\t),\n\t\t\t\tlinear-gradient(\n\t\t\t\t\tto left,\n\t\t\t\t\t", "var(--ds-shadow-overflow-perimeter, #1E1F211f)", " 0px,\n\t\t\t\t\ttransparent 1px\n\t\t\t\t)"),
   right: "0px"
 }), "&\n          .".concat(shadowObserverClassNames.SENTINEL_LEFT, ",\n          &\n          .").concat(shadowObserverClassNames.SENTINEL_RIGHT), {
   height: "calc(100% - ".concat(tableMarginTop, "px)")
@@ -1604,7 +1603,7 @@ var rendererTableSortableColumnStyles = css(_defineProperty({}, ".".concat(Rende
       outline: 'unset'
     },
     '&:focus-visible': {
-      borderColor: "".concat("var(--ds-border-focused, ".concat(B300, ")"))
+      borderColor: "var(--ds-border-focused, #4688EC)"
     }
   }
 }), "> .".concat(RendererCssClassName.SORTABLE_COLUMN, " > .").concat(RendererCssClassName.SORTABLE_COLUMN_ICON_WRAPPER), _defineProperty({
@@ -1623,10 +1622,10 @@ var rendererTableSortableColumnStyles = css(_defineProperty({}, ".".concat(Rende
 var rendererTableColumnStyles = css(_defineProperty({}, ".".concat(RendererCssClassName.DOCUMENT, " .").concat(TableSharedCssClassName.TABLE_CONTAINER), {
   'table[data-number-column="true"]': _defineProperty(_defineProperty({}, ".".concat(RendererCssClassName.NUMBER_COLUMN), {
     backgroundColor: "var(--ds-background-accent-gray-subtlest, #F0F1F2)",
-    borderRight: "var(--ds-border-width, 1px)".concat(" solid\n\t\t\t\t\t\t\t\t", "var(--ds-background-accent-gray-subtler, ".concat(akEditorTableBorder, ")")),
+    borderRight: "var(--ds-border-width, 1px)".concat(" solid\n\t\t\t\t\t\t\t\t", "var(--ds-background-accent-gray-subtler, #DDDEE1)"),
     width: "".concat(akEditorTableNumberColumnWidth, "px"),
     textAlign: 'center',
-    color: "".concat("var(--ds-text-subtlest, ".concat(N200, ")")),
+    color: "var(--ds-text-subtlest, #6B6E76)",
     // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
     fontSize: "".concat(14 / 16, " rem")
   }), ".fixed .".concat(RendererCssClassName.NUMBER_COLUMN), {
@@ -1658,8 +1657,8 @@ var stickyHeaderStyles = css({
     display: 'flex',
     overflow: 'hidden',
     zIndex: "".concat(akEditorStickyHeaderZIndex),
-    borderRight: "var(--ds-border-width, 1px)".concat(" solid ", "var(--ds-background-accent-gray-subtler, ".concat(akEditorTableBorder, ")")),
-    borderBottom: "var(--ds-border-width, 1px)".concat(" solid ", "var(--ds-background-accent-gray-subtler, ".concat(akEditorTableBorder, ")")),
+    borderRight: "var(--ds-border-width, 1px)".concat(" solid ", "var(--ds-background-accent-gray-subtler, #DDDEE1)"),
+    borderBottom: "var(--ds-border-width, 1px)".concat(" solid ", "var(--ds-background-accent-gray-subtler, #DDDEE1)"),
     /* this is to compensate for the table border */
     transform: 'translateX(-1px)'
   },
@@ -1677,7 +1676,7 @@ var 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 ".concat("var(--ds-background-accent-gray-subtler, ".concat(akEditorTableBorder, ")"), ",\n\t\t\t0px -0.5px ", "var(--ds-background-accent-gray-subtler, ".concat(akEditorTableBorder, ")"), ",\n\t\t\tinset -1px 0px ", "var(--ds-background-accent-gray-subtler, ".concat(akEditorTableToolbar, ")"), ",\n\t\t\t0px -1px ", "var(--ds-background-accent-gray-subtler, ".concat(akEditorTableToolbar, ")"))
+    boxShadow: "0px 1px ".concat("var(--ds-background-accent-gray-subtler, #DDDEE1)", ",\n\t\t\t0px -0.5px ", "var(--ds-background-accent-gray-subtler, #DDDEE1)", ",\n\t\t\tinset -1px 0px ", "var(--ds-background-accent-gray-subtler, #DDDEE1)", ",\n\t\t\t0px -1px ", "var(--ds-background-accent-gray-subtler, #DDDEE1)")
   },
   /* this will remove jumpiness caused in Chrome for sticky headers */
   '.fixed + tr': {
@@ -1817,9 +1816,9 @@ var columnLayoutResponsiveRendererStyles = css({
 });
 var 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, ".concat(Y75, ")"),
-    borderBottom: "var(--ds-border-width-selected, 2px)".concat(" solid ", "var(--ds-border-accent-yellow, ".concat(Y300, ")")),
-    boxShadow: "var(--ds-shadow-overlay, ".concat("1px 2px 3px ".concat(N60A, ", -1px 2px 3px ").concat(N60A), ")"),
+    background: "var(--ds-background-accent-yellow-subtler, #F5E989)",
+    borderBottom: "var(--ds-border-width-selected, 2px)".concat(" 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)",
@@ -1830,7 +1829,7 @@ var rendererAnnotationStylesOld = css({
 var 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)".concat(" solid ", "var(--ds-border-accent-yellow, ".concat(Y300, ")")),
+    borderBottom: "var(--ds-border-width-selected, 2px)".concat(" solid ", "var(--ds-border-accent-yellow, #B38600)"),
     cursor: 'pointer',
     paddingTop: "var(--ds-space-050, 4px)",
     paddingRight: "var(--ds-space-025, 2px)",
@@ -1839,7 +1838,7 @@ var 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, ".concat("1px 2px 3px ".concat(N60A, ", -1px 2px 3px ").concat(N60A), ")")
+    boxShadow: "var(--ds-shadow-overlay, 0px 8px 12px #1E1F2126, 0px 0px 1px #1E1F214f)"
   }
 });
 var rendererAnnotationStylesCommentHeightFix = css({
@@ -1852,9 +1851,9 @@ var rendererAnnotationStylesCommentHeightFix = css({
     paddingRight: 0,
     paddingBottom: "var(--ds-space-025, 2px)",
     paddingLeft: 0,
-    backgroundColor: "var(--ds-background-accent-yellow-subtler, ".concat(Y75, ")"),
-    borderBottomColor: "var(--ds-border-accent-yellow, ".concat(Y300, ")"),
-    boxShadow: "var(--ds-shadow-overlay, ".concat("1px 2px 3px ".concat(N60A, ", -1px 2px 3px ").concat(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]': {
@@ -2022,7 +2021,7 @@ export var RendererStyleContainer = function RendererStyleContainer(props) {
       '--ak-renderer-editor-font-heading-h6': "".concat(editorUGCToken('editor.font.heading.h6')),
       '--ak-renderer-editor-font-normal-text': "".concat(editorUGCToken('editor.font.body'))
     },
-    css: [expValEquals('confluence_ttvc_inline_extensions', 'isEnabled', true) ? baseFontStyle : originalBaseFontLineHeight, baseStyles, expValEquals('platform_editor_small_font_size', 'isEnabled', true) && smallTextStyle, expValEquals('platform_editor_small_font_size', 'isEnabled', true) && fontSizeStyles, expValEquals('platform_editor_copy_link_a11y_inconsistency_fix', 'isEnabled', true) ? headingAnchorStyles : headingAnchorStylesDuplicateAnchor, expValEquals('platform_editor_copy_link_a11y_inconsistency_fix', 'isEnabled', true) ? hideHeadingCopyLinkWrapperStyles : hideHeadingCopyLinkWrapperStylesDuplicateAnchor, appearance === 'full-page' && isPreviewPanelResponsivenessOn && rendererFullPageStylesWithReducedPadding, appearance === 'full-page' && !isPreviewPanelResponsivenessOn && rendererFullPageStyles, appearance === 'full-width' && (expValEquals('platform_editor_remove_important_in_render_ext', 'isEnabled', true) ? rendererFullWidthStyles : oldRendererFullWidthStyles), (appearance === 'full-width' || appearance === 'max' && (expValEquals('editor_tinymce_full_width_mode', 'isEnabled', true) || expValEquals('confluence_max_width_content_appearance', 'isEnabled', true))) && !isTableResizingEnabled(appearance) && rendererFullWidthStylesForTableResizing, appearance === 'max' && (expValEquals('editor_tinymce_full_width_mode', 'isEnabled', true) || expValEquals('confluence_max_width_content_appearance', 'isEnabled', true)) && (expValEquals('platform_editor_remove_important_in_render_ext', 'isEnabled', true) ? rendererMaxWidthStyles : oldRendererMaxWidthStyles), rovoTelepointerStyles, whitespaceSharedStyles, blockquoteSharedStyles, headingsSharedStyles, expValEquals('platform_editor_copy_link_a11y_inconsistency_fix', 'isEnabled', true) && headingWrapperInlineFlowStyles, expValEquals('platform_editor_copy_link_a11y_inconsistency_fix', 'isEnabled', true) ? headingWithAlignmentStyles : headingWithAlignmentStylesDuplicateAnchor, ruleSharedStyles, contentMode === 'compact' && isCompactModeSupported && extensionStyle, fg('platform_editor_typography_ugc') ? isCompactModeSupported ? paragraphStylesUGCScaledMargin : paragraphSharedStylesWithEditorUGC : isCompactModeSupported ? paragraphSharedStyleScaledMargin : paragraphSharedStyles, listsSharedStyles, browser.gecko && listsSharedStylesForGekko, expValEquals('platform_editor_flexible_list_indentation', 'isEnabled', true) && listItemHiddenMarkerStyles, indentationSharedStyles, fg('platform_editor__renderer_indentation_text_margin') && indentationSharedStylesWithMarginFix, expValEquals('platform_editor_copy_link_a11y_inconsistency_fix', 'isEnabled', true) ? blockMarksSharedStyles : blockMarksSharedStylesDuplicateAnchor, codeMarkSharedStyles, shadowSharedStyle, dateSharedStyle, textColorStyles, backgroundColorStyles,
+    css: [expValEquals('confluence_ttvc_inline_extensions', 'isEnabled', true) ? baseFontStyle : originalBaseFontLineHeight, baseStyles, expValEquals('platform_editor_small_font_size', 'isEnabled', true) && smallTextStyle, expValEquals('platform_editor_small_font_size', 'isEnabled', true) && fontSizeStyles, expValEquals('platform_editor_copy_link_a11y_inconsistency_fix', 'isEnabled', true) ? headingAnchorStyles : headingAnchorStylesDuplicateAnchor, expValEquals('platform_editor_copy_link_a11y_inconsistency_fix', 'isEnabled', true) ? hideHeadingCopyLinkWrapperStyles : hideHeadingCopyLinkWrapperStylesDuplicateAnchor, appearance === 'full-page' && isPreviewPanelResponsivenessOn && rendererFullPageStylesWithReducedPadding, appearance === 'full-page' && !isPreviewPanelResponsivenessOn && rendererFullPageStyles, appearance === 'full-width' && (expValEquals('platform_editor_remove_important_in_render_ext', 'isEnabled', true) ? rendererFullWidthStyles : oldRendererFullWidthStyles), (appearance === 'full-width' || appearance === 'max' && (expValEquals('editor_tinymce_full_width_mode', 'isEnabled', true) || expValEquals('confluence_max_width_content_appearance', 'isEnabled', true))) && !isTableResizingEnabled(appearance) && rendererFullWidthStylesForTableResizing, appearance === 'max' && (expValEquals('editor_tinymce_full_width_mode', 'isEnabled', true) || expValEquals('confluence_max_width_content_appearance', 'isEnabled', true)) && (expValEquals('platform_editor_remove_important_in_render_ext', 'isEnabled', true) ? rendererMaxWidthStyles : oldRendererMaxWidthStyles), rovoTelepointerStyles, whitespaceSharedStyles, blockquoteSharedStyles, headingsSharedStyles, expValEquals('platform_editor_copy_link_a11y_inconsistency_fix', 'isEnabled', true) && headingWrapperInlineFlowStyles, expValEquals('platform_editor_copy_link_a11y_inconsistency_fix', 'isEnabled', true) ? headingWithAlignmentStyles : headingWithAlignmentStylesDuplicateAnchor, ruleSharedStyles, contentMode === 'compact' && isCompactModeSupported && extensionStyle, fg('platform_editor_typography_ugc') ? isCompactModeSupported ? paragraphStylesUGCScaledMargin : paragraphSharedStylesWithEditorUGC : isCompactModeSupported ? paragraphSharedStyleScaledMargin : paragraphSharedStyles, listsSharedStyles, browser.gecko && listsSharedStylesForGekko, expValEquals('platform_editor_flexible_list_schema', 'isEnabled', true) && listItemHiddenMarkerStyles, indentationSharedStyles, fg('platform_editor__renderer_indentation_text_margin') && indentationSharedStylesWithMarginFix, expValEquals('platform_editor_copy_link_a11y_inconsistency_fix', 'isEnabled', true) ? blockMarksSharedStyles : blockMarksSharedStylesDuplicateAnchor, codeMarkSharedStyles, shadowSharedStyle, dateSharedStyle, textColorStyles, backgroundColorStyles,
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
     textHighlightPaddingStyles, tasksAndDecisionsStyles, expValEquals('platform_editor_copy_link_a11y_inconsistency_fix', 'isEnabled', true) && headingPanelStyles, smartCardStyles, smartCardStylesAvatarFix, editorExperiment('platform_editor_preview_panel_linking_exp', true) && headerSmartCardStyles, smartCardStylesAvatarMarginFix, smartCardStylesAvatarListZeroMarginTop, fg('editor_inline_comments_on_inline_nodes') && (expValEquals('confluence_fe_renderer_inline_node_mark_color_fix', 'isEnabled', true) ? rendererAnnotationStyles : rendererAnnotationStylesOld),
     // eslint-disable-next-line @atlaskit/platform/no-preconditioning

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

@@ -62,7 +62,7 @@ export var DEGRADED_SEVERITY_THRESHOLD = 3000;
 var TABLE_INFO_TIMEOUT = 10000;
 var RENDER_EVENT_SAMPLE_RATE = 0.2;
 var packageName = "@atlaskit/renderer";
-var packageVersion = "128.2.3";
+var packageVersion = "0.0.0-development";
 var setAsQueryContainerStyles = css({
   containerName: 'ak-renderer-wrapper',
   containerType: 'inline-size'

package/dist/esm/ui/Renderer/truncated-wrapper.js

@@ -26,7 +26,8 @@ var fadeOutStyles = function fadeOutStyles(maxHeight, top, backgroundColor) {
       bottom: 0,
       left: 0,
       right: 0,
-      backgroundImage: "linear-gradient( ".concat("var(--ds-background-neutral-subtle, rgba(255, 255, 255, 0))", ", ", backgroundColor, " )")
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
+      backgroundImage: "linear-gradient( ".concat("var(--ds-background-neutral-subtle, #00000000)", ", ", backgroundColor, " )")
     }
   });
 };
@@ -62,7 +63,7 @@ export var TruncatedWrapper = /*#__PURE__*/function (_Component) {
         _this$props$fadeHeigh = _this$props.fadeHeight,
         fadeHeight = _this$props$fadeHeigh === void 0 ? 24 : _this$props$fadeHeigh,
         _this$props$backgroun = _this$props.backgroundColor,
-        backgroundColor = _this$props$backgroun === void 0 ? "var(--ds-surface, white)" : _this$props$backgroun,
+        backgroundColor = _this$props$backgroun === void 0 ? "var(--ds-surface, #FFFFFF)" : _this$props$backgroun,
         children = _this$props.children;
       return jsx(FadeOut, {
         height: height,

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/renderer",
-	"version": "128.3.0",
+	"version": "128.3.2",
 	"description": "Renderer component",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -59,7 +59,7 @@
 		"@atlaskit/status": "^3.1.0",
 		"@atlaskit/task-decision": "^19.3.0",
 		"@atlaskit/theme": "^22.0.0",
-		"@atlaskit/tmp-editor-statsig": "^44.0.0",
+		"@atlaskit/tmp-editor-statsig": "^44.2.0",
 		"@atlaskit/tokens": "^11.1.0",
 		"@atlaskit/tooltip": "^21.0.0",
 		"@atlaskit/visually-hidden": "^3.0.0",
@@ -73,7 +73,7 @@
 		"uuid": "^3.1.0"
 	},
 	"peerDependencies": {
-		"@atlaskit/editor-common": "^112.7.0",
+		"@atlaskit/editor-common": "^112.8.0",
 		"@atlaskit/link-provider": "^4.2.0",
 		"@atlaskit/media-core": "^37.0.0",
 		"react": "^18.2.0",