@atlaskit/renderer 128.3.0 → 128.3.2

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

@@ -7,7 +7,6 @@ Object.defineProperty(exports, "__esModule", {
 exports.textHighlightPaddingStyles = exports.RendererStyleContainer = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = require("@emotion/react");
-var _colors = require("@atlaskit/theme/colors");
 var _style = require("./style");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _consts = require("../../consts");
@@ -75,7 +74,7 @@ var originalBaseFontLineHeight = (0, _react.css)({
 var baseStyles = (0, _react.css)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)({
   // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
   fontSize: 'var(--ak-renderer-base-font-size)',
-  color: "var(--ds-text, ".concat(_colors.N800, ")"),
+  color: "var(--ds-text, #292A2E)",
   '--ak-editor--full-width-layout-width': "".concat(_editorSharedStyles.akEditorFullWidthLayoutWidth, "px")
 }, ".".concat(_consts.RendererCssClassName.DOCUMENT, "::after"), {
   // we add a clearfix after ak-renderer-document in order to
@@ -108,18 +107,18 @@ var baseStyles = (0, _react.css)((0, _defineProperty2.default)((0, _defineProper
   height: '18px',
   transform: "translateY(-2px)"
 }))), "& span.akActionMark", {
-  color: "var(--ds-link, ".concat(_colors.B400, ")"),
+  color: "var(--ds-link, #1868DB)",
   textDecoration: 'none',
   cursor: 'pointer',
   '&:hover': {
-    color: "var(--ds-link, ".concat(_colors.B300, ")"),
+    color: "var(--ds-link, #1868DB)",
     textDecoration: 'underline'
   },
   '&:active': {
-    color: "var(--ds-link-pressed, ".concat(_colors.B500, ")")
+    color: "var(--ds-link-pressed, #1558BC)"
   }
 }), '& span[data-placeholder]', {
-  color: "var(--ds-text-subtlest, ".concat(_colors.N200, ")")
+  color: "var(--ds-text-subtlest, #6B6E76)"
 }));
 var headingAnchorStylesDuplicateAnchor = (0, _react.css)({
   '& h1, & h2, & h3, & h4, & h5, & h6': (0, _defineProperty2.default)((0, _defineProperty2.default)({}, ".".concat(_headingAnchor.HeadingAnchorWrapperClassName), {
@@ -352,7 +351,7 @@ var rovoTelepointerStyles = (0, _react.css)((0, _defineProperty2.default)({}, "#
     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,
@@ -379,7 +378,7 @@ var blockquoteSharedStyles = (0, _react.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(_editorSharedStyles.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(_editorSharedStyles.blockNodesVerticalMargin, " 0 0 0"),
     marginRight: 0,
@@ -456,7 +455,7 @@ var headingsSharedStyles = (0, _react.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)"
@@ -707,7 +706,7 @@ var listsSharedStylesForGekko = (0, _react.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 = (0, _react.css)({
   // Hide markers and remove spacing for wrapper list items (items containing only nested lists)
@@ -807,8 +806,8 @@ var codeMarkSharedStyles = (0, _react.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(_colors.N20, ")"), ")"),
-    color: "var(--ds-text, ".concat(_colors.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',
@@ -880,12 +879,12 @@ var shadowSharedStyle = (0, _react.css)((0, _defineProperty2.default)((0, _defin
 }), "& .".concat(_ui.shadowClassNames.RIGHT_SHADOW, ", .").concat(_ui.shadowClassNames.LEFT_SHADOW), {
   position: 'relative'
 }), "& .".concat(_ui.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(_ui.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'
@@ -1059,9 +1058,9 @@ var baseOtherStylesDuplicateAnchor = (0, _react.css)((0, _defineProperty2.defaul
     wordWrap: 'break-word'
   },
   '& span.date-node': {
-    backgroundColor: "var(--ds-background-neutral, ".concat(_colors.N30A, ")"),
+    backgroundColor: "var(--ds-background-neutral, #0515240F)",
     borderRadius: "var(--ds-radius-small, 3px)",
-    color: "var(--ds-text, ".concat(_colors.N800, ")"),
+    color: "var(--ds-text, #292A2E)",
     paddingTop: "var(--ds-space-025, 2px)",
     paddingRight: "var(--ds-space-050, 4px)",
     paddingBottom: "var(--ds-space-025, 2px)",
@@ -1070,8 +1069,8 @@ var baseOtherStylesDuplicateAnchor = (0, _react.css)((0, _defineProperty2.defaul
     transition: "background 0.3s"
   },
   '& span.date-node-highlighted': {
-    backgroundColor: "var(--ds-background-danger, ".concat(_colors.R50, ")"),
-    color: "var(--ds-text-danger, ".concat(_colors.R500, ")")
+    backgroundColor: "var(--ds-background-danger, #FFECEB)",
+    color: "var(--ds-text-danger, #AE2E24)"
   },
   '& .renderer-image': {
     maxWidth: '100%',
@@ -1149,9 +1148,9 @@ var baseOtherStyles = (0, _react.css)((0, _defineProperty2.default)((0, _defineP
     wordWrap: 'break-word'
   },
   '& span.date-node': {
-    backgroundColor: "var(--ds-background-neutral, ".concat(_colors.N30A, ")"),
+    backgroundColor: "var(--ds-background-neutral, #0515240F)",
     borderRadius: "var(--ds-radius-small, 3px)",
-    color: "var(--ds-text, ".concat(_colors.N800, ")"),
+    color: "var(--ds-text, #292A2E)",
     paddingTop: "var(--ds-space-025, 2px)",
     paddingRight: "var(--ds-space-050, 4px)",
     paddingBottom: "var(--ds-space-025, 2px)",
@@ -1160,8 +1159,8 @@ var baseOtherStyles = (0, _react.css)((0, _defineProperty2.default)((0, _defineP
     transition: "background 0.3s"
   },
   '& span.date-node-highlighted': {
-    backgroundColor: "var(--ds-background-danger, ".concat(_colors.R50, ")"),
-    color: "var(--ds-text-danger, ".concat(_colors.R500, ")")
+    backgroundColor: "var(--ds-background-danger, #FFECEB)",
+    color: "var(--ds-text-danger, #AE2E24)"
   },
   '& .renderer-image': {
     maxWidth: '100%',
@@ -1343,64 +1342,64 @@ var tableSharedStyle = (0, _react.css)((0, _defineProperty2.default)((0, _define
     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(_styles.TableSharedCssClassName.TABLE_CONTAINER), {
   position: 'relative',
@@ -1435,7 +1434,7 @@ var tableSharedStyle = (0, _react.css)((0, _defineProperty2.default)((0, _define
   marginLeft: 0
 }), ".".concat(_styles.TableSharedCssClassName.TABLE_CONTAINER, " > table,\n\t.").concat(_styles.TableSharedCssClassName.TABLE_NODE_WRAPPER, " > table,\n\t.").concat(_styles.TableSharedCssClassName.TABLE_STICKY_WRAPPER, " > table"), {
   borderCollapse: 'collapse',
-  border: "".concat(_styles.tableCellBorderWidth, "px solid ", "var(--ds-background-accent-gray-subtler, ".concat(_editorSharedStyles.akEditorTableBorder, ")")),
+  border: "".concat(_styles.tableCellBorderWidth, "px solid ", "var(--ds-background-accent-gray-subtler, #DDDEE1)"),
   tableLayout: 'fixed',
   // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
   fontSize: '1em',
@@ -1453,33 +1452,33 @@ var tableSharedStyle = (0, _react.css)((0, _defineProperty2.default)((0, _define
     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(_editorSharedStyles.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)': (0, _defineProperty2.default)({}, ".".concat(_styles.CodeBlockSharedCssClassName.CODEBLOCK_CONTAINER, ":not(.danger)"), (0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)({
-      backgroundColor: "var(--ds-surface-raised, rgb(235, 237, 240))"
+      backgroundColor: "var(--ds-surface-raised, #FFFFFF)"
     }, "&:not(.".concat(_editorSharedStyles.akEditorSelectedNodeClassName, ")"), {
-      boxShadow: "0px 0px 0px 1px ".concat("var(--ds-border, transparent)")
+      boxShadow: "0px 0px 0px 1px ".concat("var(--ds-border, #0B120E24)")
     }), ".".concat(_styles.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(_styles.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)"
     }))
   }
 }));
@@ -1488,7 +1487,7 @@ var tableRendererHeaderStylesForTableCellOnly = (0, _react.css)((0, _definePrope
     minWidth: "".concat(_styles.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(_editorSharedStyles.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)",
@@ -1502,7 +1501,7 @@ var tableRendererHeaderStylesForTableCellOnly = (0, _react.css)((0, _definePrope
   }
 }));
 var tableRendererNestedPanelStyles = (0, _react.css)((0, _defineProperty2.default)({}, ".".concat(_styles.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 = (0, _react.css)((0, _defineProperty2.default)({}, ".".concat(_styles.TableSharedCssClassName.TABLE_CONTAINER, " > table,\n\t\t.").concat(_styles.TableSharedCssClassName.TABLE_NODE_WRAPPER, " > table,\n\t\t.").concat(_styles.TableSharedCssClassName.TABLE_STICKY_WRAPPER, " > table"), {
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors
@@ -1543,9 +1542,9 @@ var rendererTableStyles = (0, _react.css)((0, _defineProperty2.default)({}, ".".
   height: "calc(100% - ".concat(_styles.tableMarginTop, "px)"),
   zIndex: "".concat(_editorSharedStyles.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(_colors.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(_ui.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(_colors.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(_ui.shadowObserverClassNames.SENTINEL_LEFT, ",\n          &\n          .").concat(_ui.shadowObserverClassNames.SENTINEL_RIGHT), {
   height: "calc(100% - ".concat(_styles.tableMarginTop, "px)")
@@ -1611,7 +1610,7 @@ var rendererTableSortableColumnStyles = (0, _react.css)((0, _defineProperty2.def
       outline: 'unset'
     },
     '&:focus-visible': {
-      borderColor: "".concat("var(--ds-border-focused, ".concat(_colors.B300, ")"))
+      borderColor: "var(--ds-border-focused, #4688EC)"
     }
   }
 }), "> .".concat(_consts.RendererCssClassName.SORTABLE_COLUMN, " > .").concat(_consts.RendererCssClassName.SORTABLE_COLUMN_ICON_WRAPPER), (0, _defineProperty2.default)({
@@ -1630,10 +1629,10 @@ var rendererTableSortableColumnStyles = (0, _react.css)((0, _defineProperty2.def
 var rendererTableColumnStyles = (0, _react.css)((0, _defineProperty2.default)({}, ".".concat(_consts.RendererCssClassName.DOCUMENT, " .").concat(_styles.TableSharedCssClassName.TABLE_CONTAINER), {
   'table[data-number-column="true"]': (0, _defineProperty2.default)((0, _defineProperty2.default)({}, ".".concat(_consts.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(_editorSharedStyles.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(_editorSharedStyles.akEditorTableNumberColumnWidth, "px"),
     textAlign: 'center',
-    color: "".concat("var(--ds-text-subtlest, ".concat(_colors.N200, ")")),
+    color: "var(--ds-text-subtlest, #6B6E76)",
     // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
     fontSize: "".concat(14 / 16, " rem")
   }), ".fixed .".concat(_consts.RendererCssClassName.NUMBER_COLUMN), {
@@ -1665,8 +1664,8 @@ var stickyHeaderStyles = (0, _react.css)({
     display: 'flex',
     overflow: 'hidden',
     zIndex: "".concat(_editorSharedStyles.akEditorStickyHeaderZIndex),
-    borderRight: "var(--ds-border-width, 1px)".concat(" solid ", "var(--ds-background-accent-gray-subtler, ".concat(_editorSharedStyles.akEditorTableBorder, ")")),
-    borderBottom: "var(--ds-border-width, 1px)".concat(" solid ", "var(--ds-background-accent-gray-subtler, ".concat(_editorSharedStyles.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)'
   },
@@ -1684,7 +1683,7 @@ var stickyHeaderStyles = (0, _react.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(_editorSharedStyles.akEditorTableBorder, ")"), ",\n\t\t\t0px -0.5px ", "var(--ds-background-accent-gray-subtler, ".concat(_editorSharedStyles.akEditorTableBorder, ")"), ",\n\t\t\tinset -1px 0px ", "var(--ds-background-accent-gray-subtler, ".concat(_editorSharedStyles.akEditorTableToolbar, ")"), ",\n\t\t\t0px -1px ", "var(--ds-background-accent-gray-subtler, ".concat(_editorSharedStyles.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': {
@@ -1824,9 +1823,9 @@ var columnLayoutResponsiveRendererStyles = (0, _react.css)({
 });
 var rendererAnnotationStylesOld = (0, _react.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(_colors.Y75, ")"),
-    borderBottom: "var(--ds-border-width-selected, 2px)".concat(" solid ", "var(--ds-border-accent-yellow, ".concat(_colors.Y300, ")")),
-    boxShadow: "var(--ds-shadow-overlay, ".concat("1px 2px 3px ".concat(_colors.N60A, ", -1px 2px 3px ").concat(_colors.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)",
@@ -1837,7 +1836,7 @@ var rendererAnnotationStylesOld = (0, _react.css)({
 var rendererAnnotationStyles = (0, _react.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(_colors.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)",
@@ -1846,7 +1845,7 @@ var rendererAnnotationStyles = (0, _react.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(_colors.N60A, ", -1px 2px 3px ").concat(_colors.N60A), ")")
+    boxShadow: "var(--ds-shadow-overlay, 0px 8px 12px #1E1F2126, 0px 0px 1px #1E1F214f)"
   }
 });
 var rendererAnnotationStylesCommentHeightFix = (0, _react.css)({
@@ -1859,9 +1858,9 @@ var rendererAnnotationStylesCommentHeightFix = (0, _react.css)({
     paddingRight: 0,
     paddingBottom: "var(--ds-space-025, 2px)",
     paddingLeft: 0,
-    backgroundColor: "var(--ds-background-accent-yellow-subtler, ".concat(_colors.Y75, ")"),
-    borderBottomColor: "var(--ds-border-accent-yellow, ".concat(_colors.Y300, ")"),
-    boxShadow: "var(--ds-shadow-overlay, ".concat("1px 2px 3px ".concat(_colors.N60A, ", -1px 2px 3px ").concat(_colors.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]': {
@@ -2029,7 +2028,7 @@ var RendererStyleContainer = exports.RendererStyleContainer = function RendererS
       '--ak-renderer-editor-font-heading-h6': "".concat((0, _ugcTokens.editorUGCToken)('editor.font.heading.h6')),
       '--ak-renderer-editor-font-normal-text': "".concat((0, _ugcTokens.editorUGCToken)('editor.font.body'))
     },
-    css: [(0, _expValEquals.expValEquals)('confluence_ttvc_inline_extensions', 'isEnabled', true) ? baseFontStyle : originalBaseFontLineHeight, baseStyles, (0, _expValEquals.expValEquals)('platform_editor_small_font_size', 'isEnabled', true) && smallTextStyle, (0, _expValEquals.expValEquals)('platform_editor_small_font_size', 'isEnabled', true) && fontSizeStyles, (0, _expValEquals.expValEquals)('platform_editor_copy_link_a11y_inconsistency_fix', 'isEnabled', true) ? headingAnchorStyles : headingAnchorStylesDuplicateAnchor, (0, _expValEquals.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' && ((0, _expValEquals.expValEquals)('platform_editor_remove_important_in_render_ext', 'isEnabled', true) ? rendererFullWidthStyles : oldRendererFullWidthStyles), (appearance === 'full-width' || appearance === 'max' && ((0, _expValEquals.expValEquals)('editor_tinymce_full_width_mode', 'isEnabled', true) || (0, _expValEquals.expValEquals)('confluence_max_width_content_appearance', 'isEnabled', true))) && !(0, _table.isTableResizingEnabled)(appearance) && rendererFullWidthStylesForTableResizing, appearance === 'max' && ((0, _expValEquals.expValEquals)('editor_tinymce_full_width_mode', 'isEnabled', true) || (0, _expValEquals.expValEquals)('confluence_max_width_content_appearance', 'isEnabled', true)) && ((0, _expValEquals.expValEquals)('platform_editor_remove_important_in_render_ext', 'isEnabled', true) ? rendererMaxWidthStyles : oldRendererMaxWidthStyles), rovoTelepointerStyles, whitespaceSharedStyles, blockquoteSharedStyles, headingsSharedStyles, (0, _expValEquals.expValEquals)('platform_editor_copy_link_a11y_inconsistency_fix', 'isEnabled', true) && headingWrapperInlineFlowStyles, (0, _expValEquals.expValEquals)('platform_editor_copy_link_a11y_inconsistency_fix', 'isEnabled', true) ? headingWithAlignmentStyles : headingWithAlignmentStylesDuplicateAnchor, ruleSharedStyles, contentMode === 'compact' && isCompactModeSupported && extensionStyle, (0, _platformFeatureFlags.fg)('platform_editor_typography_ugc') ? isCompactModeSupported ? paragraphStylesUGCScaledMargin : paragraphSharedStylesWithEditorUGC : isCompactModeSupported ? paragraphSharedStyleScaledMargin : paragraphSharedStyles, listsSharedStyles, browser.gecko && listsSharedStylesForGekko, (0, _expValEquals.expValEquals)('platform_editor_flexible_list_indentation', 'isEnabled', true) && listItemHiddenMarkerStyles, indentationSharedStyles, (0, _platformFeatureFlags.fg)('platform_editor__renderer_indentation_text_margin') && indentationSharedStylesWithMarginFix, (0, _expValEquals.expValEquals)('platform_editor_copy_link_a11y_inconsistency_fix', 'isEnabled', true) ? blockMarksSharedStyles : blockMarksSharedStylesDuplicateAnchor, codeMarkSharedStyles, shadowSharedStyle, dateSharedStyle, textColorStyles, backgroundColorStyles,
+    css: [(0, _expValEquals.expValEquals)('confluence_ttvc_inline_extensions', 'isEnabled', true) ? baseFontStyle : originalBaseFontLineHeight, baseStyles, (0, _expValEquals.expValEquals)('platform_editor_small_font_size', 'isEnabled', true) && smallTextStyle, (0, _expValEquals.expValEquals)('platform_editor_small_font_size', 'isEnabled', true) && fontSizeStyles, (0, _expValEquals.expValEquals)('platform_editor_copy_link_a11y_inconsistency_fix', 'isEnabled', true) ? headingAnchorStyles : headingAnchorStylesDuplicateAnchor, (0, _expValEquals.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' && ((0, _expValEquals.expValEquals)('platform_editor_remove_important_in_render_ext', 'isEnabled', true) ? rendererFullWidthStyles : oldRendererFullWidthStyles), (appearance === 'full-width' || appearance === 'max' && ((0, _expValEquals.expValEquals)('editor_tinymce_full_width_mode', 'isEnabled', true) || (0, _expValEquals.expValEquals)('confluence_max_width_content_appearance', 'isEnabled', true))) && !(0, _table.isTableResizingEnabled)(appearance) && rendererFullWidthStylesForTableResizing, appearance === 'max' && ((0, _expValEquals.expValEquals)('editor_tinymce_full_width_mode', 'isEnabled', true) || (0, _expValEquals.expValEquals)('confluence_max_width_content_appearance', 'isEnabled', true)) && ((0, _expValEquals.expValEquals)('platform_editor_remove_important_in_render_ext', 'isEnabled', true) ? rendererMaxWidthStyles : oldRendererMaxWidthStyles), rovoTelepointerStyles, whitespaceSharedStyles, blockquoteSharedStyles, headingsSharedStyles, (0, _expValEquals.expValEquals)('platform_editor_copy_link_a11y_inconsistency_fix', 'isEnabled', true) && headingWrapperInlineFlowStyles, (0, _expValEquals.expValEquals)('platform_editor_copy_link_a11y_inconsistency_fix', 'isEnabled', true) ? headingWithAlignmentStyles : headingWithAlignmentStylesDuplicateAnchor, ruleSharedStyles, contentMode === 'compact' && isCompactModeSupported && extensionStyle, (0, _platformFeatureFlags.fg)('platform_editor_typography_ugc') ? isCompactModeSupported ? paragraphStylesUGCScaledMargin : paragraphSharedStylesWithEditorUGC : isCompactModeSupported ? paragraphSharedStyleScaledMargin : paragraphSharedStyles, listsSharedStyles, browser.gecko && listsSharedStylesForGekko, (0, _expValEquals.expValEquals)('platform_editor_flexible_list_schema', 'isEnabled', true) && listItemHiddenMarkerStyles, indentationSharedStyles, (0, _platformFeatureFlags.fg)('platform_editor__renderer_indentation_text_margin') && indentationSharedStylesWithMarginFix, (0, _expValEquals.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, (0, _expValEquals.expValEquals)('platform_editor_copy_link_a11y_inconsistency_fix', 'isEnabled', true) && headingPanelStyles, smartCardStyles, smartCardStylesAvatarFix, (0, _experiments.editorExperiment)('platform_editor_preview_panel_linking_exp', true) && headerSmartCardStyles, smartCardStylesAvatarMarginFix, smartCardStylesAvatarListZeroMarginTop, (0, _platformFeatureFlags.fg)('editor_inline_comments_on_inline_nodes') && ((0, _expValEquals.expValEquals)('confluence_fe_renderer_inline_node_mark_color_fix', 'isEnabled', true) ? rendererAnnotationStyles : rendererAnnotationStylesOld),
     // eslint-disable-next-line @atlaskit/platform/no-preconditioning

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

@@ -71,7 +71,7 @@ var DEGRADED_SEVERITY_THRESHOLD = exports.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 = (0, _react2.css)({
   containerName: 'ak-renderer-wrapper',
   containerType: 'inline-size'

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

@@ -31,7 +31,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, " )")
     }
   });
 };
@@ -67,7 +68,7 @@ var TruncatedWrapper = exports.TruncatedWrapper = /*#__PURE__*/function (_Compon
         _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 (0, _react.jsx)(FadeOut, {
         height: height,

package/dist/es2019/react/marks/link.js

@@ -6,7 +6,6 @@ import _extends from "@babel/runtime/helpers/extends";
 import React, { Fragment } from 'react';
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css, jsx } from '@emotion/react';
-import { B400, B300, B500 } from '@atlaskit/theme/colors';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { getEventHandler } from '../../utils';
 import { PLATFORM, MODE } from '../../analytics/events';
@@ -14,13 +13,13 @@ import { ACTION, ACTION_SUBJECT, EVENT_TYPE } from '@atlaskit/editor-common/anal
 import LinkUrl from '@atlaskit/smart-card/link-url';
 import { AnalyticsContext } from '@atlaskit/analytics-next';
 const anchorStyles = css({
-  color: `var(--ds-link, ${B400})`,
+  color: "var(--ds-link, #1868DB)",
   '&: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)"
   }
 });
 export default function Link(props) {

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

@@ -16,37 +16,36 @@ import { DatasourceTableView } from '@atlaskit/link-datasource';
 import { CardSSR } from '@atlaskit/smart-card/ssr';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
-import { N40 } from '@atlaskit/theme/colors';
 import { calcBreakoutWidth, canRenderDatasource } from '@atlaskit/editor-common/utils';
 import { usePortal } from '../../ui/Renderer/PortalContext';
 import { RendererCssClassName } from '../../consts';
 const datasourceCenterWrapperStyles = css({
-  marginTop: "var(--ds-space-150, 0.75rem)",
-  marginBottom: "var(--ds-space-150, 0.75rem)"
+  marginTop: "var(--ds-space-150, 12px)",
+  marginBottom: "var(--ds-space-150, 12px)"
 });
 const datasourceContainerStyleWithMarginTop = css({
   borderRadius: `${"var(--ds-radius-large, 8px)"}`,
-  border: `${"var(--ds-border-width, 1px)"} solid ${`var(--ds-border, ${N40})`}`,
+  border: `${"var(--ds-border-width, 1px)"} solid ${"var(--ds-border, #0B120E24)"}`,
   overflow: 'hidden',
-  marginTop: `${"var(--ds-space-150, 0.75rem)"}`,
-  marginBottom: `${"var(--ds-space-150, 0.75rem)"}`
+  marginTop: `${"var(--ds-space-150, 12px)"}`,
+  marginBottom: `${"var(--ds-space-150, 12px)"}`
 });
 
 // No vertical margin when inside center wrapper (wrapper has margin so it participates in collapse). Styles from datasourceContainerStyleLegacy
 const datasourceContainerStyleNoVerticalMargin = css({
   borderRadius: `${"var(--ds-radius-large, 8px)"}`,
-  border: `${"var(--ds-border-width, 1px)"} solid ${`var(--ds-border, ${N40})`}`,
+  border: `${"var(--ds-border-width, 1px)"} solid ${"var(--ds-border, #0B120E24)"}`,
   overflow: 'hidden'
 });
 const datasourceContainerStyleLegacy = css({
   borderRadius: `${"var(--ds-radius-large, 8px)"}`,
-  border: `${"var(--ds-border-width, 1px)"} solid ${`var(--ds-border, ${N40})`}`,
+  border: `${"var(--ds-border-width, 1px)"} solid ${"var(--ds-border, #0B120E24)"}`,
   overflow: 'hidden',
   // eslint-disable-next-line @atlaskit/design-system/use-tokens-space
   marginLeft: '50%',
-  marginBottom: `${"var(--ds-space-150, 0.75rem)"}`,
+  marginBottom: `${"var(--ds-space-150, 12px)"}`,
   transform: 'translateX(-50%)',
-  marginTop: `${"var(--ds-space-150, 0.75rem)"}`
+  marginTop: `${"var(--ds-space-150, 12px)"}`
 });
 export default function BlockCard(props) {
   const {

package/dist/es2019/react/nodes/codeBlock/components/codeBlockButtonContainer.js

@@ -6,11 +6,10 @@
 import { jsx, css } from '@emotion/react';
 import CopyButton from './codeBlockCopyButton';
 import CodeWrapButton from './codeBlockWrapButton';
-import { N0, N20, N30, N700 } from '@atlaskit/theme/colors';
 const codeBlockButtonsWrapper = css({
   position: 'sticky',
   top: '0px',
-  background: `${`var(--ds-surface, ${N20})`}`
+  background: `${"var(--ds-surface, #FFFFFF)"}`
 });
 const codeBlockButtonsStyle = css({
   display: 'flex',
@@ -25,24 +24,24 @@ const codeBlockButtonsStyle = css({
   button: {
     height: '32px',
     width: '32px',
-    border: `${"var(--ds-border-width-selected, 2px)"} solid ${`var(--ds-border, ${N0})`}`,
+    border: `${"var(--ds-border-width-selected, 2px)"} solid ${"var(--ds-border, #0B120E24)"}`,
     borderRadius: "var(--ds-radius-small, 4px)",
     marginLeft: "var(--ds-space-050, 4px)",
     padding: "var(--ds-space-025, 2px)",
-    background: `${`var(--ds-surface-overlay, ${N20})`}`,
-    color: `${"var(--ds-icon, rgb(66, 82, 110))"}`,
+    background: `${"var(--ds-surface-overlay, #FFFFFF)"}`,
+    color: `${"var(--ds-icon, #292A2E)"}`,
     '&:hover': {
       borderWidth: "var(--ds-border-width-selected, 2px)",
-      backgroundColor: `${`var(--ds-surface-overlay-hovered, ${N30})`}`,
+      backgroundColor: `${"var(--ds-surface-overlay-hovered, #F0F1F2)"}`,
       height: '32px',
       width: '32px'
     },
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
     '&.clicked': {
-      backgroundColor: `${`var(--ds-background-neutral-bold-pressed, ${N700})`}`,
+      backgroundColor: `${"var(--ds-background-neutral-bold-pressed, #505258)"}`,
       borderRadius: "var(--ds-radius-small, 4px)",
       // eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles -- Ignored via go/DSP-18766
-      color: `${`var(--ds-icon-inverse, ${N0})`} !important`
+      color: `${"var(--ds-icon-inverse, #FFFFFF)"} !important`
     }
   }
 });

package/dist/es2019/react/nodes/codeBlock/components/codeBlockContainer.js

@@ -4,14 +4,13 @@
  */
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { jsx, css } from '@emotion/react';
-import { N20 } from '@atlaskit/theme/colors';
 import { CodeBlockSharedCssClassName } from '@atlaskit/editor-common/styles';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import CodeBlockButtonContainer from './codeBlockButtonContainer';
 const codeBlockStyleOverrides = css({
   tabSize: 4,
-  backgroundColor: `var(--ds-surface-raised, ${N20})`,
+  backgroundColor: "var(--ds-surface-raised, #FFFFFF)",
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
   button: {
     opacity: 0,

package/dist/es2019/react/nodes/codeBlock/components/lightWeightCodeBlock.js

@@ -139,7 +139,7 @@ const codeBlockSharedStyles = css({
       // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
       lineHeight: '1.5rem',
       textAlign: 'right',
-      color: "var(--ds-text-subtlest, #505F79)",
+      color: "var(--ds-text-subtlest, #6B6E76)",
       boxSizing: 'content-box'
     }
   }