@atlaskit/editor-plugin-show-diff 16.0.7 → 16.0.8

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @atlaskit/editor-plugin-show-diff
 
+## 16.0.8
+
+### Patch Changes
+
+- [`7c955f7988148`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/7c955f7988148) -
+  Match show-diff indicator bars to contributor colors using theme-aware ADS border tokens.
+- Updated dependencies
+
 ## 16.0.7
 
 ### Patch Changes

package/dist/cjs/pm-plugins/decorations/colorSchemes/factory.js

@@ -66,6 +66,7 @@ exports.buildInsertStyleRuleNodeActive = buildInsertStyleRuleNodeActive;
 exports.buildInsertStyleRuleNodeNew = buildInsertStyleRuleNodeNew;
 exports.buildInsertedBlockNodeStyle = buildInsertedBlockNodeStyle;
 exports.buildInsertedInlineStyle = buildInsertedInlineStyle;
+exports.getAccentBorderColor = getAccentBorderColor;
 exports.getAccentTokens = getAccentTokens;
 exports.getDeletedHighlightHoverBorderColor = getDeletedHighlightHoverBorderColor;
 exports.getDeletedHighlightHoverColor = getDeletedHighlightHoverColor;
@@ -227,6 +228,11 @@ function getAccentTokens(color) {
   };
 }
 
+/** Border token for a contributor accent, used by the diff indicator. */
+function getAccentBorderColor(color) {
+  return borderAccent(color);
+}
+
 /** Ring colour for an active (scroll-target) deleted block outline. */
 function deletedBlockOutlineActiveRing(colors) {
   return colors.deletedBlockOutlineActiveEmphasis === 'border' ? borderAccent(colors.deleteActiveColor) : bgSubtlerPressed(colors.deleteActiveColor);

package/dist/cjs/pm-plugins/decorations/createBlockChangedDecoration.js

@@ -202,9 +202,11 @@ var createBlockChangedDecoration = exports.createBlockChangedDecoration = functi
     return [_view.Decoration.node(change.from, change.to, {
       style: displayNoneStyle
     }, (0, _decorationKeys.buildDiffDecorationSpec)({
+      colorScheme: colorScheme,
       decorationType: 'block',
       diffId: diffId,
       isActive: isActive,
+      isInserted: isInserted,
       nodeName: change.name,
       diffType: diffType
     }))];

package/dist/cjs/pm-plugins/decorations/createChangedRowDecorationWidgets.js

@@ -241,9 +241,11 @@ var createChangedRowDecorationWidgets = exports.createChangedRowDecorationWidget
     originalDoc.slice(changedRow.fromA, changedRow.toA));
     var diffId = crypto.randomUUID();
     return _view.Decoration.widget(safeInsertPos, rowDOM, _objectSpread({}, (0, _decorationKeys.buildDiffDecorationSpec)({
+      colorScheme: colorScheme,
       decorationType: 'widget',
       diffId: diffId,
       isActive: false,
+      isInserted: isInserted,
       diffType: diffType
     })));
   });

package/dist/cjs/pm-plugins/decorations/createNodeChangedDecorationWidget.js

@@ -84,8 +84,10 @@ var createTableCellContentWidgets = function createTableCellContentWidgets(_ref)
     // Skip findSafeInsertPos: it walks forward to a schema-valid cell-insert point
     // and pushes the widget into the next cell. `targetPos` is the correct spot.
     decorations.push(_view.Decoration.widget(targetPos, dom, _objectSpread({}, (0, _decorationKeys.buildDiffDecorationSpec)(_objectSpread({
+      colorScheme: colorScheme,
       decorationType: 'widget',
       diffId: crypto.randomUUID(),
+      isInserted: isInserted,
       diffType: diffType
     }, (0, _isExtendedEnabled.isExtendedEnabled)(diffType) && {
       side: -1
@@ -428,8 +430,10 @@ var createNodeChangedDecorationWidget = exports.createNodeChangedDecorationWidge
       defaultSpacer.style.display = 'block';
       defaultSpacer.style.marginTop = "var(--ds-space-100, 8px)";
       decorations.push(_view.Decoration.widget(safeInsertPos, defaultSpacer, _objectSpread({}, (0, _decorationKeys.buildDiffDecorationSpec)({
+        colorScheme: colorScheme,
         decorationType: 'widget',
         diffId: crypto.randomUUID(),
+        isInserted: isInserted,
         diffType: diffType
       }))));
     }

package/dist/cjs/pm-plugins/decorations/decorationKeys.js

@@ -89,9 +89,9 @@ var buildDiffDecorationSpec = exports.buildDiffDecorationSpec = function buildDi
     attributionKey: attributionKey
   } : {}), attributionKey && isActive !== undefined ? {
     isActive: isActive
-  } : {}), attributionKey && isInserted !== undefined ? {
+  } : {}), isInserted !== undefined ? {
     isInserted: isInserted
-  } : {}), attributionKey && colorScheme ? {
+  } : {}), colorScheme ? {
     colorScheme: colorScheme
   } : {}), nodeName ? {
     nodeName: nodeName
@@ -147,9 +147,14 @@ var isDiffDecoration = exports.isDiffDecoration = function isDiffDecoration(deco
 var extractDiffDescriptors = exports.extractDiffDescriptors = function extractDiffDescriptors(decorations) {
   return decorations.find(undefined, undefined, isDiffDecorationSpec).filter(isDiffDecoration).map(function (_ref5) {
     var spec = _ref5.spec;
-    return {
-      id: spec.diffId,
+    return _objectSpread(_objectSpread(_objectSpread({}, spec.colorScheme ? {
+      colorScheme: spec.colorScheme
+    } : {}), {}, {
+      id: spec.diffId
+    }, spec.isInserted !== undefined ? {
+      isInserted: spec.isInserted
+    } : {}), {}, {
       type: spec.decorationType
-    };
+    });
   });
 };

package/dist/cjs/ui/IndicatorBar/IndicatorBar.compiled.css

@@ -2,7 +2,6 @@
 ._18u0mgjw{margin-left:var(--ds-space-negative-200,-1pc)}
 ._19pk196n{margin-top:var(--ds-space-negative-075,-6px)}
 ._1bsb1l7b{width:3px}
-._bfhkvbh5{background-color:var(--ds-border-information,#357de8)}
 ._kqswstnw{position:absolute}
 ._lcxvglyw{pointer-events:none}
 ._otyr196n{margin-bottom:var(--ds-space-negative-075,-6px)}

package/dist/cjs/ui/IndicatorBar/IndicatorBar.js

@@ -9,25 +9,36 @@ exports.IndicatorBar = IndicatorBar;
 require("./IndicatorBar.compiled.css");
 var React = _interopRequireWildcard(require("react"));
 var _runtime = require("@compiled/react/runtime");
+var _factory = require("../../pm-plugins/decorations/colorSchemes/factory");
+var _schemes = require("../../pm-plugins/decorations/colorSchemes/schemes");
 var _decorationKeys = require("../../pm-plugins/decorations/decorationKeys");
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
 var barStyles = null;
+var getIndicatorColor = function getIndicatorColor(colorScheme, isInserted) {
+  if (colorScheme === undefined || colorScheme === 'standard' || colorScheme === 'traditional' || isInserted === undefined) {
+    return "var(--ds-border-information, #357DE8)";
+  }
+  return (0, _factory.getAccentBorderColor)(_schemes.colorSchemeRegistry[colorScheme][isInserted ? 'insertColor' : 'deleteColor']);
+};
 function IndicatorBar(_ref) {
   var anchorTop = _ref.anchorTop,
     anchorBottom = _ref.anchorBottom,
     anchorLeft = _ref.anchorLeft,
-    anchorLeftFallback = _ref.anchorLeftFallback;
+    anchorLeftFallback = _ref.anchorLeftFallback,
+    colorScheme = _ref.colorScheme,
+    isInserted = _ref.isInserted;
   var leftAnchors = [anchorLeft, anchorLeftFallback, _decorationKeys.AnchorDocMarginKey].filter(Boolean).map(function (anchor) {
     return "anchor(--".concat(anchor, " left)");
   }).join(', ');
   return /*#__PURE__*/React.createElement("span", {
     "data-testid": "diff-indicator-bar",
     style: {
+      backgroundColor: getIndicatorColor(colorScheme, isInserted),
       // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
       left: "min(".concat(leftAnchors, ")"),
       top: "anchor(--".concat(anchorTop, " top)"),
       bottom: "anchor(--".concat(anchorBottom, " bottom)")
     },
-    className: (0, _runtime.ax)(["_2rko1rr0 _kqswstnw _1bsb1l7b _bfhkvbh5 _lcxvglyw _18u0mgjw _17c61i8t _19pk196n _otyr196n"])
+    className: (0, _runtime.ax)(["_2rko1rr0 _kqswstnw _1bsb1l7b _lcxvglyw _18u0mgjw _17c61i8t _19pk196n _otyr196n"])
   });
 }

package/dist/cjs/ui/IndicatorBar/IndicatorBarContentComponent.js

@@ -17,6 +17,8 @@ var renderIndicatorBar = function renderIndicatorBar(descriptor) {
       {
         return /*#__PURE__*/_react.default.createElement(_IndicatorBar.IndicatorBar, {
           key: descriptor.id,
+          colorScheme: descriptor.colorScheme,
+          isInserted: descriptor.isInserted,
           anchorTop: (0, _decorationKeys.buildAnchorDecorationKey)({
             diffId: descriptor.id,
             anchorType: _decorationKeys.AnchorTypeKey.from
@@ -41,6 +43,8 @@ var renderIndicatorBar = function renderIndicatorBar(descriptor) {
         });
         return /*#__PURE__*/_react.default.createElement(_IndicatorBar.IndicatorBar, {
           key: descriptor.id,
+          colorScheme: descriptor.colorScheme,
+          isInserted: descriptor.isInserted,
           anchorTop: blockAnchor,
           anchorBottom: blockAnchor,
           anchorLeft: (0, _decorationKeys.buildAnchorDecorationKey)({
@@ -53,6 +57,8 @@ var renderIndicatorBar = function renderIndicatorBar(descriptor) {
       {
         return /*#__PURE__*/_react.default.createElement(_IndicatorBar.IndicatorBar, {
           key: descriptor.id,
+          colorScheme: descriptor.colorScheme,
+          isInserted: descriptor.isInserted,
           anchorTop: (0, _decorationKeys.buildAnchorDecorationKey)({
             diffId: descriptor.id
           }),

package/dist/es2019/pm-plugins/decorations/colorSchemes/factory.js

@@ -152,6 +152,11 @@ export function getAccentTokens(color) {
   };
 }
 
+/** Border token for a contributor accent, used by the diff indicator. */
+export function getAccentBorderColor(color) {
+  return borderAccent(color);
+}
+
 /** Ring colour for an active (scroll-target) deleted block outline. */
 function deletedBlockOutlineActiveRing(colors) {
   return colors.deletedBlockOutlineActiveEmphasis === 'border' ? borderAccent(colors.deleteActiveColor) : bgSubtlerPressed(colors.deleteActiveColor);

package/dist/es2019/pm-plugins/decorations/createBlockChangedDecoration.js

@@ -182,9 +182,11 @@ export const createBlockChangedDecoration = ({
     return [Decoration.node(change.from, change.to, {
       style: displayNoneStyle
     }, buildDiffDecorationSpec({
+      colorScheme,
       decorationType: 'block',
       diffId,
       isActive,
+      isInserted,
       nodeName: change.name,
       diffType
     }))];

package/dist/es2019/pm-plugins/decorations/createChangedRowDecorationWidgets.js

@@ -211,9 +211,11 @@ export const createChangedRowDecorationWidgets = ({
     const diffId = crypto.randomUUID();
     return Decoration.widget(safeInsertPos, rowDOM, {
       ...buildDiffDecorationSpec({
+        colorScheme,
         decorationType: 'widget',
         diffId,
         isActive: false,
+        isInserted,
         diffType
       })
     });

package/dist/es2019/pm-plugins/decorations/createNodeChangedDecorationWidget.js

@@ -74,8 +74,10 @@ const createTableCellContentWidgets = ({
     // and pushes the widget into the next cell. `targetPos` is the correct spot.
     decorations.push(Decoration.widget(targetPos, dom, {
       ...buildDiffDecorationSpec({
+        colorScheme,
         decorationType: 'widget',
         diffId: crypto.randomUUID(),
+        isInserted,
         diffType,
         ...(isExtendedEnabled(diffType) && {
           side: -1
@@ -414,8 +416,10 @@ export const createNodeChangedDecorationWidget = ({
       defaultSpacer.style.marginTop = "var(--ds-space-100, 8px)";
       decorations.push(Decoration.widget(safeInsertPos, defaultSpacer, {
         ...buildDiffDecorationSpec({
+          colorScheme,
           decorationType: 'widget',
           diffId: crypto.randomUUID(),
+          isInserted,
           diffType
         })
       }));

package/dist/es2019/pm-plugins/decorations/decorationKeys.js

@@ -77,14 +77,14 @@ export const buildDiffDecorationSpec = ({
   ...(attributionKey ? {
     attributionKey
   } : {}),
-  // Only alongside an attribution key, so the spec shape is unchanged when the gate is off.
+  // Active state is only needed by contributor tags, so keep it alongside an attribution key.
   ...(attributionKey && isActive !== undefined ? {
     isActive
   } : {}),
-  ...(attributionKey && isInserted !== undefined ? {
+  ...(isInserted !== undefined ? {
     isInserted
   } : {}),
-  ...(attributionKey && colorScheme ? {
+  ...(colorScheme ? {
     colorScheme
   } : {}),
   ...(nodeName ? {
@@ -138,7 +138,13 @@ export const extractDiffDescriptors = decorations => decorations.find(undefined,
   spec
 }) => {
   return {
+    ...(spec.colorScheme ? {
+      colorScheme: spec.colorScheme
+    } : {}),
     id: spec.diffId,
+    ...(spec.isInserted !== undefined ? {
+      isInserted: spec.isInserted
+    } : {}),
     type: spec.decorationType
   };
 });

package/dist/es2019/ui/IndicatorBar/IndicatorBar.compiled.css

@@ -2,7 +2,6 @@
 ._18u0mgjw{margin-left:var(--ds-space-negative-200,-1pc)}
 ._19pk196n{margin-top:var(--ds-space-negative-075,-6px)}
 ._1bsb1l7b{width:3px}
-._bfhkvbh5{background-color:var(--ds-border-information,#357de8)}
 ._kqswstnw{position:absolute}
 ._lcxvglyw{pointer-events:none}
 ._otyr196n{margin-bottom:var(--ds-space-negative-075,-6px)}

package/dist/es2019/ui/IndicatorBar/IndicatorBar.js

@@ -2,23 +2,34 @@
 import "./IndicatorBar.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
+import { getAccentBorderColor } from '../../pm-plugins/decorations/colorSchemes/factory';
+import { colorSchemeRegistry } from '../../pm-plugins/decorations/colorSchemes/schemes';
 import { AnchorDocMarginKey } from '../../pm-plugins/decorations/decorationKeys';
 const barStyles = null;
+const getIndicatorColor = (colorScheme, isInserted) => {
+  if (colorScheme === undefined || colorScheme === 'standard' || colorScheme === 'traditional' || isInserted === undefined) {
+    return "var(--ds-border-information, #357DE8)";
+  }
+  return getAccentBorderColor(colorSchemeRegistry[colorScheme][isInserted ? 'insertColor' : 'deleteColor']);
+};
 export function IndicatorBar({
   anchorTop,
   anchorBottom,
   anchorLeft,
-  anchorLeftFallback
+  anchorLeftFallback,
+  colorScheme,
+  isInserted
 }) {
   const leftAnchors = [anchorLeft, anchorLeftFallback, AnchorDocMarginKey].filter(Boolean).map(anchor => `anchor(--${anchor} left)`).join(', ');
   return /*#__PURE__*/React.createElement("span", {
     "data-testid": "diff-indicator-bar",
     style: {
+      backgroundColor: getIndicatorColor(colorScheme, isInserted),
       // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
       left: `min(${leftAnchors})`,
       top: `anchor(--${anchorTop} top)`,
       bottom: `anchor(--${anchorBottom} bottom)`
     },
-    className: ax(["_2rko1rr0 _kqswstnw _1bsb1l7b _bfhkvbh5 _lcxvglyw _18u0mgjw _17c61i8t _19pk196n _otyr196n"])
+    className: ax(["_2rko1rr0 _kqswstnw _1bsb1l7b _lcxvglyw _18u0mgjw _17c61i8t _19pk196n _otyr196n"])
   });
 }

package/dist/es2019/ui/IndicatorBar/IndicatorBarContentComponent.js

@@ -10,6 +10,8 @@ const renderIndicatorBar = descriptor => {
       {
         return /*#__PURE__*/React.createElement(IndicatorBar, {
           key: descriptor.id,
+          colorScheme: descriptor.colorScheme,
+          isInserted: descriptor.isInserted,
           anchorTop: buildAnchorDecorationKey({
             diffId: descriptor.id,
             anchorType: AnchorTypeKey.from
@@ -34,6 +36,8 @@ const renderIndicatorBar = descriptor => {
         });
         return /*#__PURE__*/React.createElement(IndicatorBar, {
           key: descriptor.id,
+          colorScheme: descriptor.colorScheme,
+          isInserted: descriptor.isInserted,
           anchorTop: blockAnchor,
           anchorBottom: blockAnchor,
           anchorLeft: buildAnchorDecorationKey({
@@ -46,6 +50,8 @@ const renderIndicatorBar = descriptor => {
       {
         return /*#__PURE__*/React.createElement(IndicatorBar, {
           key: descriptor.id,
+          colorScheme: descriptor.colorScheme,
+          isInserted: descriptor.isInserted,
           anchorTop: buildAnchorDecorationKey({
             diffId: descriptor.id
           }),

package/dist/esm/pm-plugins/decorations/colorSchemes/factory.js

@@ -155,6 +155,11 @@ export function getAccentTokens(color) {
   };
 }
 
+/** Border token for a contributor accent, used by the diff indicator. */
+export function getAccentBorderColor(color) {
+  return borderAccent(color);
+}
+
 /** Ring colour for an active (scroll-target) deleted block outline. */
 function deletedBlockOutlineActiveRing(colors) {
   return colors.deletedBlockOutlineActiveEmphasis === 'border' ? borderAccent(colors.deleteActiveColor) : bgSubtlerPressed(colors.deleteActiveColor);

package/dist/esm/pm-plugins/decorations/createBlockChangedDecoration.js

@@ -195,9 +195,11 @@ export var createBlockChangedDecoration = function createBlockChangedDecoration(
     return [Decoration.node(change.from, change.to, {
       style: displayNoneStyle
     }, buildDiffDecorationSpec({
+      colorScheme: colorScheme,
       decorationType: 'block',
       diffId: diffId,
       isActive: isActive,
+      isInserted: isInserted,
       nodeName: change.name,
       diffType: diffType
     }))];

package/dist/esm/pm-plugins/decorations/createChangedRowDecorationWidgets.js

@@ -234,9 +234,11 @@ export var createChangedRowDecorationWidgets = function createChangedRowDecorati
     originalDoc.slice(changedRow.fromA, changedRow.toA));
     var diffId = crypto.randomUUID();
     return Decoration.widget(safeInsertPos, rowDOM, _objectSpread({}, buildDiffDecorationSpec({
+      colorScheme: colorScheme,
       decorationType: 'widget',
       diffId: diffId,
       isActive: false,
+      isInserted: isInserted,
       diffType: diffType
     })));
   });

package/dist/esm/pm-plugins/decorations/createNodeChangedDecorationWidget.js

@@ -77,8 +77,10 @@ var createTableCellContentWidgets = function createTableCellContentWidgets(_ref)
     // Skip findSafeInsertPos: it walks forward to a schema-valid cell-insert point
     // and pushes the widget into the next cell. `targetPos` is the correct spot.
     decorations.push(Decoration.widget(targetPos, dom, _objectSpread({}, buildDiffDecorationSpec(_objectSpread({
+      colorScheme: colorScheme,
       decorationType: 'widget',
       diffId: crypto.randomUUID(),
+      isInserted: isInserted,
       diffType: diffType
     }, isExtendedEnabled(diffType) && {
       side: -1
@@ -421,8 +423,10 @@ export var createNodeChangedDecorationWidget = function createNodeChangedDecorat
       defaultSpacer.style.display = 'block';
       defaultSpacer.style.marginTop = "var(--ds-space-100, 8px)";
       decorations.push(Decoration.widget(safeInsertPos, defaultSpacer, _objectSpread({}, buildDiffDecorationSpec({
+        colorScheme: colorScheme,
         decorationType: 'widget',
         diffId: crypto.randomUUID(),
+        isInserted: isInserted,
         diffType: diffType
       }))));
     }

package/dist/esm/pm-plugins/decorations/decorationKeys.js

@@ -80,9 +80,9 @@ export var buildDiffDecorationSpec = function buildDiffDecorationSpec(_ref3) {
     attributionKey: attributionKey
   } : {}), attributionKey && isActive !== undefined ? {
     isActive: isActive
-  } : {}), attributionKey && isInserted !== undefined ? {
+  } : {}), isInserted !== undefined ? {
     isInserted: isInserted
-  } : {}), attributionKey && colorScheme ? {
+  } : {}), colorScheme ? {
     colorScheme: colorScheme
   } : {}), nodeName ? {
     nodeName: nodeName
@@ -138,9 +138,14 @@ export var isDiffDecoration = function isDiffDecoration(decoration) {
 export var extractDiffDescriptors = function extractDiffDescriptors(decorations) {
   return decorations.find(undefined, undefined, isDiffDecorationSpec).filter(isDiffDecoration).map(function (_ref5) {
     var spec = _ref5.spec;
-    return {
-      id: spec.diffId,
+    return _objectSpread(_objectSpread(_objectSpread({}, spec.colorScheme ? {
+      colorScheme: spec.colorScheme
+    } : {}), {}, {
+      id: spec.diffId
+    }, spec.isInserted !== undefined ? {
+      isInserted: spec.isInserted
+    } : {}), {}, {
       type: spec.decorationType
-    };
+    });
   });
 };

package/dist/esm/ui/IndicatorBar/IndicatorBar.compiled.css

@@ -2,7 +2,6 @@
 ._18u0mgjw{margin-left:var(--ds-space-negative-200,-1pc)}
 ._19pk196n{margin-top:var(--ds-space-negative-075,-6px)}
 ._1bsb1l7b{width:3px}
-._bfhkvbh5{background-color:var(--ds-border-information,#357de8)}
 ._kqswstnw{position:absolute}
 ._lcxvglyw{pointer-events:none}
 ._otyr196n{margin-bottom:var(--ds-space-negative-075,-6px)}

package/dist/esm/ui/IndicatorBar/IndicatorBar.js

@@ -2,24 +2,35 @@
 import "./IndicatorBar.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
+import { getAccentBorderColor } from '../../pm-plugins/decorations/colorSchemes/factory';
+import { colorSchemeRegistry } from '../../pm-plugins/decorations/colorSchemes/schemes';
 import { AnchorDocMarginKey } from '../../pm-plugins/decorations/decorationKeys';
 var barStyles = null;
+var getIndicatorColor = function getIndicatorColor(colorScheme, isInserted) {
+  if (colorScheme === undefined || colorScheme === 'standard' || colorScheme === 'traditional' || isInserted === undefined) {
+    return "var(--ds-border-information, #357DE8)";
+  }
+  return getAccentBorderColor(colorSchemeRegistry[colorScheme][isInserted ? 'insertColor' : 'deleteColor']);
+};
 export function IndicatorBar(_ref) {
   var anchorTop = _ref.anchorTop,
     anchorBottom = _ref.anchorBottom,
     anchorLeft = _ref.anchorLeft,
-    anchorLeftFallback = _ref.anchorLeftFallback;
+    anchorLeftFallback = _ref.anchorLeftFallback,
+    colorScheme = _ref.colorScheme,
+    isInserted = _ref.isInserted;
   var leftAnchors = [anchorLeft, anchorLeftFallback, AnchorDocMarginKey].filter(Boolean).map(function (anchor) {
     return "anchor(--".concat(anchor, " left)");
   }).join(', ');
   return /*#__PURE__*/React.createElement("span", {
     "data-testid": "diff-indicator-bar",
     style: {
+      backgroundColor: getIndicatorColor(colorScheme, isInserted),
       // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
       left: "min(".concat(leftAnchors, ")"),
       top: "anchor(--".concat(anchorTop, " top)"),
       bottom: "anchor(--".concat(anchorBottom, " bottom)")
     },
-    className: ax(["_2rko1rr0 _kqswstnw _1bsb1l7b _bfhkvbh5 _lcxvglyw _18u0mgjw _17c61i8t _19pk196n _otyr196n"])
+    className: ax(["_2rko1rr0 _kqswstnw _1bsb1l7b _lcxvglyw _18u0mgjw _17c61i8t _19pk196n _otyr196n"])
   });
 }

package/dist/esm/ui/IndicatorBar/IndicatorBarContentComponent.js

@@ -10,6 +10,8 @@ var renderIndicatorBar = function renderIndicatorBar(descriptor) {
       {
         return /*#__PURE__*/React.createElement(IndicatorBar, {
           key: descriptor.id,
+          colorScheme: descriptor.colorScheme,
+          isInserted: descriptor.isInserted,
           anchorTop: buildAnchorDecorationKey({
             diffId: descriptor.id,
             anchorType: AnchorTypeKey.from
@@ -34,6 +36,8 @@ var renderIndicatorBar = function renderIndicatorBar(descriptor) {
         });
         return /*#__PURE__*/React.createElement(IndicatorBar, {
           key: descriptor.id,
+          colorScheme: descriptor.colorScheme,
+          isInserted: descriptor.isInserted,
           anchorTop: blockAnchor,
           anchorBottom: blockAnchor,
           anchorLeft: buildAnchorDecorationKey({
@@ -46,6 +50,8 @@ var renderIndicatorBar = function renderIndicatorBar(descriptor) {
       {
         return /*#__PURE__*/React.createElement(IndicatorBar, {
           key: descriptor.id,
+          colorScheme: descriptor.colorScheme,
+          isInserted: descriptor.isInserted,
           anchorTop: buildAnchorDecorationKey({
             diffId: descriptor.id
           }),

package/dist/types/pm-plugins/decorations/colorSchemes/factory.d.ts

@@ -24,6 +24,8 @@ export declare function getAccentTokens(color: AdsAccentColor): {
     background: string;
     text: string;
 };
+/** Border token for a contributor accent, used by the diff indicator. */
+export declare function getAccentBorderColor(color: AdsAccentColor): string;
 /** Inline inserted content — default state. */
 export declare function buildInsertStyle(colors: DiffColorScheme): string;
 /** Inline insert style for content within a block node (no background, underline only). */

package/dist/types/showDiffPluginType.d.ts

@@ -103,7 +103,9 @@ export type DeletedDiffWidget = {
 };
 export type SmartDiffThresholds = SmartDiffThresholdsInternal;
 export type DiffDescriptor = {
+    colorScheme?: ColorScheme;
     id: string;
+    isInserted?: boolean;
     type: 'inline' | 'block' | 'widget';
 };
 /**

package/dist/types/ui/IndicatorBar/IndicatorBar.d.ts

@@ -2,9 +2,12 @@
  * @jsxRuntime classic
  * @jsx jsx
  */
-export declare function IndicatorBar({ anchorTop, anchorBottom, anchorLeft, anchorLeftFallback, }: {
+import type { ColorScheme } from '../../pm-plugins/decorations/colorSchemes/types';
+export declare function IndicatorBar({ anchorTop, anchorBottom, anchorLeft, anchorLeftFallback, colorScheme, isInserted, }: {
     anchorBottom: string;
     anchorLeft: string;
     anchorLeftFallback?: string;
     anchorTop: string;
+    colorScheme?: ColorScheme;
+    isInserted?: boolean;
 }): JSX.Element;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-show-diff",
-	"version": "16.0.7",
+	"version": "16.0.8",
 	"description": "ShowDiff plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -64,7 +64,7 @@
 		"react-intl": "^7.0.0"
 	},
 	"peerDependencies": {
-		"@atlaskit/editor-common": "^122.3.0",
+		"@atlaskit/editor-common": "^122.4.0",
 		"react": "^18.2.0 || ^19.2.0",
 		"react-dom": "^18.2.0 || ^19.2.0",
 		"react-intl": "^5.25.1 || ^6.0.0 || ^7.0.0"