@atlaskit/renderer 128.3.0 → 128.3.1

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

@@ -35,7 +35,7 @@ const panelBaseStyles = css({
     position: 'relative',
     alignItems: 'normal',
     wordBreak: 'break-word',
-    backgroundColor: "var(--ds-background-accent-blue-subtlest, #DEEBFF)",
+    backgroundColor: "var(--ds-background-accent-blue-subtlest, #E9F2FE)",
     color: 'inherit',
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
     '.ak-editor-panel__icon': {
@@ -88,7 +88,7 @@ const panelBaseStyles = css({
     },
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
     '&[data-panel-type="note"]': {
-      backgroundColor: "var(--ds-background-accent-purple-subtlest, #EAE6FF)",
+      backgroundColor: "var(--ds-background-accent-purple-subtlest, #F8EEFE)",
       // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
       '.ak-editor-panel__icon': {
         color: "var(--ds-icon-discovery, #AF59E1)"
@@ -96,7 +96,7 @@ const panelBaseStyles = 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
     '&[data-panel-type="tip"]': {
-      backgroundColor: "var(--ds-background-accent-green-subtlest, #E3FCEF)",
+      backgroundColor: "var(--ds-background-accent-green-subtlest, #DCFFF1)",
       // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
       '.ak-editor-panel__icon': {
         color: "var(--ds-icon-success, #6A9A23)"
@@ -104,7 +104,7 @@ const panelBaseStyles = 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
     '&[data-panel-type="warning"]': {
-      backgroundColor: "var(--ds-background-accent-yellow-subtlest, #FFFAE6)",
+      backgroundColor: "var(--ds-background-accent-yellow-subtlest, #FEF7C8)",
       // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
       '.ak-editor-panel__icon': {
         color: "var(--ds-icon-warning, #E06C00)"
@@ -112,7 +112,7 @@ const panelBaseStyles = 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
     '&[data-panel-type="error"]': {
-      backgroundColor: "var(--ds-background-accent-red-subtlest, #FFEBE6)",
+      backgroundColor: "var(--ds-background-accent-red-subtlest, #FFECEB)",
       // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
       '.ak-editor-panel__icon': {
         color: "var(--ds-icon-danger, #C9372C)"
@@ -120,7 +120,7 @@ const panelBaseStyles = 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
     '&[data-panel-type="success"]': {
-      backgroundColor: "var(--ds-background-accent-green-subtlest, #E3FCEF)",
+      backgroundColor: "var(--ds-background-accent-green-subtlest, #DCFFF1)",
       // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
       '.ak-editor-panel__icon': {
         color: "var(--ds-icon-success, #6A9A23)"
@@ -148,7 +148,7 @@ const panelNestedIconStyles = css({
 const nestedPanelStyles = css({
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
   '.ak-editor-panel__content .ak-editor-panel': {
-    border: `${"var(--ds-border-width, 1px)"} solid ${"var(--ds-border, #091E42)"}`
+    border: `${"var(--ds-border-width, 1px)"} solid ${"var(--ds-border, #0B120E24)"}`
   }
 });
 const panelCustomBackground = css({

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

@@ -10,7 +10,6 @@ import React from 'react';
 import { css, jsx } from '@emotion/react';
 import { TableSharedCssClassName } from '@atlaskit/editor-common/styles';
 import { akEditorStickyHeaderZIndex } from '@atlaskit/editor-shared-styles';
-import { N40A } from '@atlaskit/theme/colors';
 import { Table } from './table';
 import { recursivelyInjectProps } from '../../utils/inject-props';
 export const tableStickyPadding = 8;
@@ -36,12 +35,12 @@ const fixedTableDivStaticStyles = css({
     marginBottom: 0,
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
     tr: {
-      background: "var(--ds-surface, white)"
+      background: "var(--ds-surface, #FFFFFF)"
     }
   },
-  borderTop: `${tableStickyPadding}px solid ${"var(--ds-surface, white)"}`,
-  background: "var(--ds-surface-overlay, white)",
-  boxShadow: `0 6px 4px -4px ${`var(--ds-shadow-overflow-perimeter, ${N40A})`}`,
+  borderTop: `${tableStickyPadding}px solid ${"var(--ds-surface, #FFFFFF)"}`,
+  background: "var(--ds-surface-overlay, #FFFFFF)",
+  boxShadow: `0 6px 4px -4px ${"var(--ds-shadow-overflow-perimeter, #1E1F211f)"}`,
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
   "div[data-expanded='false'] &": {
     display: 'none'

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)"
 });

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]': {

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

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

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

@@ -18,7 +18,8 @@ const fadeOutStyles = (maxHeight, top, backgroundColor) => css({
     bottom: 0,
     left: 0,
     right: 0,
-    backgroundImage: `linear-gradient( ${"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( ${"var(--ds-background-neutral-subtle, #00000000)"}, ${backgroundColor} )`
   }
 });
 const FadeOut = props => {
@@ -48,7 +49,7 @@ export class TruncatedWrapper extends Component {
     const {
       height = 95,
       fadeHeight = 24,
-      backgroundColor = "var(--ds-surface, white)",
+      backgroundColor = "var(--ds-surface, #FFFFFF)",
       children
     } = this.props;
     return jsx(FadeOut, {

package/dist/esm/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';
 var anchorStyles = css({
-  color: "var(--ds-link, ".concat(B400, ")"),
+  color: "var(--ds-link, #1868DB)",
   '&: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)"
   }
 });
 export default function Link(props) {