@atlaskit/editor-plugin-show-diff 15.1.2 → 15.1.3

package/CHANGELOG.md

@@ -1,5 +1,20 @@
 # @atlaskit/editor-plugin-show-diff
 
+## 15.1.3
+
+### Patch Changes
+
+- [`98eda5f058f8e`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/98eda5f058f8e) -
+  Use gray text and strikethrough for attributed deletions with attribution-coloured backgrounds and
+  a background-matched bottom border to preserve highlight height, behind
+  confluence_ncs_step_diffing_version_history and platform_editor_show_diff_color_scheme_refactor.
+
+  Use the accent subtlest hovered token for resting attributed insertion underlines, with stronger
+  active insertion underlines and deletion backgrounds. Keep attributed deletion opacity at 0.83 in
+  both active and non-active states.
+
+- Updated dependencies
+
 ## 15.1.2
 
 ### Patch Changes

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

@@ -87,6 +87,18 @@ var bgSubtlestMap = {
   gray: "var(--ds-background-accent-gray-subtlest, #F0F1F2)",
   lime: "var(--ds-background-accent-lime-subtlest, #EFFFD6)"
 };
+var bgSubtlestHoveredMap = {
+  green: "var(--ds-background-accent-green-subtlest-hovered, #BAF3DB)",
+  teal: "var(--ds-background-accent-teal-subtlest-hovered, #C6EDFB)",
+  blue: "var(--ds-background-accent-blue-subtlest-hovered, #CFE1FD)",
+  purple: "var(--ds-background-accent-purple-subtlest-hovered, #EED7FC)",
+  red: "var(--ds-background-accent-red-subtlest-hovered, #FFD5D2)",
+  orange: "var(--ds-background-accent-orange-subtlest-hovered, #FCE4A6)",
+  yellow: "var(--ds-background-accent-yellow-subtlest-hovered, #F5E989)",
+  magenta: "var(--ds-background-accent-magenta-subtlest-hovered, #FDD0EC)",
+  gray: "var(--ds-background-accent-gray-subtlest-hovered, #DDDEE1)",
+  lime: "var(--ds-background-accent-lime-subtlest-hovered, #D3F1A7)"
+};
 var bgSubtlestPressedMap = {
   green: "var(--ds-background-accent-green-subtlest-pressed, #97EDC9)",
   teal: "var(--ds-background-accent-teal-subtlest-pressed, #B1E4F7)",
@@ -187,6 +199,10 @@ function deletedCellOutline(colors) {
 
 // --- Inserted content styles ---
 
+function insertedInlineBorderColor(colors) {
+  return colors.insertedInlineBorderTone === 'backgroundHovered' ? bgSubtlestHoveredMap[colors.insertColor] : borderAccent(colors.insertColor);
+}
+
 /** Inline inserted content — default state. */
 function buildInsertStyle(colors) {
   return (0, _lazyNodeView.convertToInlineCss)({
@@ -212,7 +228,7 @@ function buildInsertStyleInBlock(colors) {
 function buildInsertStyleExtended(colors) {
   return (0, _lazyNodeView.convertToInlineCss)({
     background: bgSubtlest(colors.insertColor),
-    borderBottom: "2px solid ".concat(borderAccent(colors.insertColor)),
+    borderBottom: "2px solid ".concat(insertedInlineBorderColor(colors)),
     padding: "1px 0 2px"
   });
 }
@@ -220,7 +236,7 @@ function buildInsertStyleExtended(colors) {
 /** Extended insert style for content within a block node (border-bottom only, no background). */
 function buildInsertStyleInBlockExtended(colors) {
   return (0, _lazyNodeView.convertToInlineCss)({
-    borderBottom: "2px solid ".concat(borderAccent(colors.insertColor)),
+    borderBottom: "2px solid ".concat(insertedInlineBorderColor(colors)),
     padding: "1px 0 2px"
   });
 }
@@ -272,8 +288,9 @@ function buildInsertStyleActive(colors) {
 
 /** Base deleted-inline-style object, shared by several exports. */
 function deletedInlineStyleBase(colors) {
+  var _colors$deleteTextCol;
   return {
-    textDecorationColor: borderAccent(colors.deleteColor),
+    textDecorationColor: borderAccent((_colors$deleteTextCol = colors.deleteTextColor) !== null && _colors$deleteTextCol !== void 0 ? _colors$deleteTextCol : colors.deleteColor),
     textDecoration: 'line-through',
     position: 'relative',
     opacity: 1
@@ -323,12 +340,13 @@ function buildDeletedContentStyleUnboundedActive(colors) {
 
 /** Unbounded strikethrough overlay for deleted inline content (absolute positioned line). */
 function buildDeletedInlineStyleUnbounded(colors) {
+  var _colors$deleteTextCol2;
   return (0, _lazyNodeView.convertToInlineCss)({
     position: 'absolute',
     top: '50%',
     width: '100%',
     display: 'inline-block',
-    borderTop: "1px solid ".concat(textAccent(colors.deleteColor)),
+    borderTop: "1px solid ".concat(textAccent((_colors$deleteTextCol2 = colors.deleteTextColor) !== null && _colors$deleteTextCol2 !== void 0 ? _colors$deleteTextCol2 : colors.deleteColor)),
     pointerEvents: 'none',
     zIndex: 1
   });
@@ -439,9 +457,10 @@ function buildDeletedBlockOutlineRoundedNew(colors) {
 
 /** Table row style for deleted rows. */
 function buildDeletedRowStyle(colors) {
+  var _colors$deleteTextCol3;
   // Each branch emits exactly the CSS the pre-factory shim did for its scheme.
   return colors.deletedRowTreatment === 'textTint' ? (0, _lazyNodeView.convertToInlineCss)({
-    color: textAccent(colors.deleteColor),
+    color: textAccent((_colors$deleteTextCol3 = colors.deleteTextColor) !== null && _colors$deleteTextCol3 !== void 0 ? _colors$deleteTextCol3 : colors.deleteColor),
     textDecoration: 'line-through',
     opacity: 0.6,
     display: 'table-row'
@@ -602,29 +621,33 @@ function buildDeletedDecorationMarkerVariableSimple(colors) {
  * 'glyphTint' deleted inline style — tints the glyph itself via `color:`. Opacity ramps 0.6
  * default, 0.83 "new", 1 active.
  */
-/** Extended deleted inline style — background highlight + border-bottom underline (standard scheme). */
+/** Extended deleted inline style — background highlight with an accent or background-matched bottom border. */
 function buildDeletedInlineContentStyleExtended(colors) {
+  var isActive = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
+  var backgroundColor = isActive && colors.deletedInlineBorderTone === 'background' ? bgSubtlerPressed(colors.deleteActiveColor) : bgSubtlest(colors.deleteColor);
   return (0, _lazyNodeView.convertToInlineCss)({
-    backgroundColor: bgSubtlest(colors.deleteColor),
-    borderBottom: "2px solid ".concat(borderAccent(colors.deleteColor)),
+    backgroundColor: backgroundColor,
+    borderBottom: "2px solid ".concat(colors.deletedInlineBorderTone === 'background' ? backgroundColor : borderAccent(colors.deleteColor)),
     padding: "1px 0 2px"
   });
 }
 function buildDeletedInlineStyleStandard(colors, state) {
+  var _colors$deleteTextCol5;
   if (state === 'active') {
+    var _colors$deleteTextCol4;
     return (0, _lazyNodeView.convertToInlineCss)({
-      color: "var(--ds-text, #292A2E)",
+      color: colors.deleteTextColor ? textAccent(colors.deleteTextColor) : "var(--ds-text, #292A2E)",
       textDecoration: 'line-through',
-      textDecorationColor: textAccent(colors.deleteColor),
+      textDecorationColor: textAccent((_colors$deleteTextCol4 = colors.deleteTextColor) !== null && _colors$deleteTextCol4 !== void 0 ? _colors$deleteTextCol4 : colors.deleteColor),
       position: 'relative',
-      opacity: 1
+      opacity: colors.deleteTextColor ? 0.83 : 1
     });
   }
   return (0, _lazyNodeView.convertToInlineCss)({
-    color: textAccent(colors.deleteColor),
+    color: textAccent((_colors$deleteTextCol5 = colors.deleteTextColor) !== null && _colors$deleteTextCol5 !== void 0 ? _colors$deleteTextCol5 : colors.deleteColor),
     textDecoration: 'line-through',
     position: 'relative',
-    opacity: state === 'new' ? 0.83 : 0.6
+    opacity: colors.deleteTextColor || state === 'new' ? 0.83 : 0.6
   });
 }
 

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

@@ -66,8 +66,11 @@ var standardScheme = exports.standardScheme = {
 var createAttributionScheme = function createAttributionScheme(color) {
   return _objectSpread(_objectSpread({}, standardScheme), {}, {
     insertColor: color,
+    insertedInlineBorderTone: 'backgroundHovered',
     insertActiveColor: color,
     deleteColor: color,
+    deletedInlineBorderTone: 'background',
+    deleteTextColor: 'gray',
     deleteActiveColor: color,
     deletedCellColor: color
   });

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

@@ -57,7 +57,7 @@ var getExtendedDeletedStyle = function getExtendedDeletedStyle(colors, isActive)
     // Identical in both states — the block decoration carries the active emphasis.
     return (0, _factory.buildDeletedInlineStyle)(colors, false);
   }
-  return (0, _factory.buildDeletedInlineStyleStandard)(colors, isActive ? 'active' : 'default') + (0, _factory.buildDeletedInlineContentStyleExtended)(colors);
+  return (0, _factory.buildDeletedInlineStyleStandard)(colors, isActive ? 'active' : 'default') + (0, _factory.buildDeletedInlineContentStyleExtended)(colors, isActive);
 };
 
 /** Registry-driven inline `style` for a changed-content decoration. */

package/dist/cjs/pm-plugins/decorations/utils/wrapBlockNodeViewStyles.js

@@ -112,7 +112,7 @@ var getDeletedContentStyleNext = function getDeletedContentStyleNext(colorScheme
 
   // glyphTint adds a background highlight and border-bottom over the tint; strikethrough does not.
   var needsExtendedHighlight = colors.deletedInlineTreatment === 'glyphTint' && (0, _isExtendedEnabled.isExtendedEnabled)(diffType) && !omitHighlight;
-  return needsExtendedHighlight ? base + (0, _factory.buildDeletedInlineContentStyleExtended)(colors) : base;
+  return needsExtendedHighlight ? base + (0, _factory.buildDeletedInlineContentStyleExtended)(colors, isActive) : base;
 };
 var resolveCellOverlayStyleNext = function resolveCellOverlayStyleNext(_ref) {
   var colorScheme = _ref.colorScheme,

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

@@ -14,6 +14,18 @@ const bgSubtlestMap = {
   gray: "var(--ds-background-accent-gray-subtlest, #F0F1F2)",
   lime: "var(--ds-background-accent-lime-subtlest, #EFFFD6)"
 };
+const bgSubtlestHoveredMap = {
+  green: "var(--ds-background-accent-green-subtlest-hovered, #BAF3DB)",
+  teal: "var(--ds-background-accent-teal-subtlest-hovered, #C6EDFB)",
+  blue: "var(--ds-background-accent-blue-subtlest-hovered, #CFE1FD)",
+  purple: "var(--ds-background-accent-purple-subtlest-hovered, #EED7FC)",
+  red: "var(--ds-background-accent-red-subtlest-hovered, #FFD5D2)",
+  orange: "var(--ds-background-accent-orange-subtlest-hovered, #FCE4A6)",
+  yellow: "var(--ds-background-accent-yellow-subtlest-hovered, #F5E989)",
+  magenta: "var(--ds-background-accent-magenta-subtlest-hovered, #FDD0EC)",
+  gray: "var(--ds-background-accent-gray-subtlest-hovered, #DDDEE1)",
+  lime: "var(--ds-background-accent-lime-subtlest-hovered, #D3F1A7)"
+};
 const bgSubtlestPressedMap = {
   green: "var(--ds-background-accent-green-subtlest-pressed, #97EDC9)",
   teal: "var(--ds-background-accent-teal-subtlest-pressed, #B1E4F7)",
@@ -114,6 +126,10 @@ function deletedCellOutline(colors) {
 
 // --- Inserted content styles ---
 
+function insertedInlineBorderColor(colors) {
+  return colors.insertedInlineBorderTone === 'backgroundHovered' ? bgSubtlestHoveredMap[colors.insertColor] : borderAccent(colors.insertColor);
+}
+
 /** Inline inserted content — default state. */
 export function buildInsertStyle(colors) {
   return convertToInlineCss({
@@ -139,7 +155,7 @@ export function buildInsertStyleInBlock(colors) {
 export function buildInsertStyleExtended(colors) {
   return convertToInlineCss({
     background: bgSubtlest(colors.insertColor),
-    borderBottom: `2px solid ${borderAccent(colors.insertColor)}`,
+    borderBottom: `2px solid ${insertedInlineBorderColor(colors)}`,
     padding: `1px 0 2px`
   });
 }
@@ -147,7 +163,7 @@ export function buildInsertStyleExtended(colors) {
 /** Extended insert style for content within a block node (border-bottom only, no background). */
 export function buildInsertStyleInBlockExtended(colors) {
   return convertToInlineCss({
-    borderBottom: `2px solid ${borderAccent(colors.insertColor)}`,
+    borderBottom: `2px solid ${insertedInlineBorderColor(colors)}`,
     padding: `1px 0 2px`
   });
 }
@@ -199,8 +215,9 @@ export function buildInsertStyleActive(colors) {
 
 /** Base deleted-inline-style object, shared by several exports. */
 function deletedInlineStyleBase(colors) {
+  var _colors$deleteTextCol;
   return {
-    textDecorationColor: borderAccent(colors.deleteColor),
+    textDecorationColor: borderAccent((_colors$deleteTextCol = colors.deleteTextColor) !== null && _colors$deleteTextCol !== void 0 ? _colors$deleteTextCol : colors.deleteColor),
     textDecoration: 'line-through',
     position: 'relative',
     opacity: 1
@@ -251,12 +268,13 @@ export function buildDeletedContentStyleUnboundedActive(colors) {
 
 /** Unbounded strikethrough overlay for deleted inline content (absolute positioned line). */
 export function buildDeletedInlineStyleUnbounded(colors) {
+  var _colors$deleteTextCol2;
   return convertToInlineCss({
     position: 'absolute',
     top: '50%',
     width: '100%',
     display: 'inline-block',
-    borderTop: `1px solid ${textAccent(colors.deleteColor)}`,
+    borderTop: `1px solid ${textAccent((_colors$deleteTextCol2 = colors.deleteTextColor) !== null && _colors$deleteTextCol2 !== void 0 ? _colors$deleteTextCol2 : colors.deleteColor)}`,
     pointerEvents: 'none',
     zIndex: 1
   });
@@ -367,9 +385,10 @@ export function buildDeletedBlockOutlineRoundedNew(colors) {
 
 /** Table row style for deleted rows. */
 export function buildDeletedRowStyle(colors) {
+  var _colors$deleteTextCol3;
   // Each branch emits exactly the CSS the pre-factory shim did for its scheme.
   return colors.deletedRowTreatment === 'textTint' ? convertToInlineCss({
-    color: textAccent(colors.deleteColor),
+    color: textAccent((_colors$deleteTextCol3 = colors.deleteTextColor) !== null && _colors$deleteTextCol3 !== void 0 ? _colors$deleteTextCol3 : colors.deleteColor),
     textDecoration: 'line-through',
     opacity: 0.6,
     display: 'table-row'
@@ -531,29 +550,32 @@ export function buildDeletedDecorationMarkerVariableSimple(colors) {
  * 'glyphTint' deleted inline style — tints the glyph itself via `color:`. Opacity ramps 0.6
  * default, 0.83 "new", 1 active.
  */
-/** Extended deleted inline style — background highlight + border-bottom underline (standard scheme). */
-export function buildDeletedInlineContentStyleExtended(colors) {
+/** Extended deleted inline style — background highlight with an accent or background-matched bottom border. */
+export function buildDeletedInlineContentStyleExtended(colors, isActive = false) {
+  const backgroundColor = isActive && colors.deletedInlineBorderTone === 'background' ? bgSubtlerPressed(colors.deleteActiveColor) : bgSubtlest(colors.deleteColor);
   return convertToInlineCss({
-    backgroundColor: bgSubtlest(colors.deleteColor),
-    borderBottom: `2px solid ${borderAccent(colors.deleteColor)}`,
+    backgroundColor,
+    borderBottom: `2px solid ${colors.deletedInlineBorderTone === 'background' ? backgroundColor : borderAccent(colors.deleteColor)}`,
     padding: `1px 0 2px`
   });
 }
 export function buildDeletedInlineStyleStandard(colors, state) {
+  var _colors$deleteTextCol5;
   if (state === 'active') {
+    var _colors$deleteTextCol4;
     return convertToInlineCss({
-      color: "var(--ds-text, #292A2E)",
+      color: colors.deleteTextColor ? textAccent(colors.deleteTextColor) : "var(--ds-text, #292A2E)",
       textDecoration: 'line-through',
-      textDecorationColor: textAccent(colors.deleteColor),
+      textDecorationColor: textAccent((_colors$deleteTextCol4 = colors.deleteTextColor) !== null && _colors$deleteTextCol4 !== void 0 ? _colors$deleteTextCol4 : colors.deleteColor),
       position: 'relative',
-      opacity: 1
+      opacity: colors.deleteTextColor ? 0.83 : 1
     });
   }
   return convertToInlineCss({
-    color: textAccent(colors.deleteColor),
+    color: textAccent((_colors$deleteTextCol5 = colors.deleteTextColor) !== null && _colors$deleteTextCol5 !== void 0 ? _colors$deleteTextCol5 : colors.deleteColor),
     textDecoration: 'line-through',
     position: 'relative',
-    opacity: state === 'new' ? 0.83 : 0.6
+    opacity: colors.deleteTextColor || state === 'new' ? 0.83 : 0.6
   });
 }
 

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

@@ -58,8 +58,11 @@ const createAttributionScheme = color => {
   return {
     ...standardScheme,
     insertColor: color,
+    insertedInlineBorderTone: 'backgroundHovered',
     insertActiveColor: color,
     deleteColor: color,
+    deletedInlineBorderTone: 'background',
+    deleteTextColor: 'gray',
     deleteActiveColor: color,
     deletedCellColor: color
   };

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

@@ -44,7 +44,7 @@ const getExtendedDeletedStyle = (colors, isActive) => {
     // Identical in both states — the block decoration carries the active emphasis.
     return buildDeletedInlineStyle(colors, false);
   }
-  return buildDeletedInlineStyleStandard(colors, isActive ? 'active' : 'default') + buildDeletedInlineContentStyleExtended(colors);
+  return buildDeletedInlineStyleStandard(colors, isActive ? 'active' : 'default') + buildDeletedInlineContentStyleExtended(colors, isActive);
 };
 
 /** Registry-driven inline `style` for a changed-content decoration. */

package/dist/es2019/pm-plugins/decorations/utils/wrapBlockNodeViewStyles.js

@@ -83,7 +83,7 @@ const getDeletedContentStyleNext = (colorScheme, isActive = false, diffType, omi
 
   // glyphTint adds a background highlight and border-bottom over the tint; strikethrough does not.
   const needsExtendedHighlight = colors.deletedInlineTreatment === 'glyphTint' && isExtendedEnabled(diffType) && !omitHighlight;
-  return needsExtendedHighlight ? base + buildDeletedInlineContentStyleExtended(colors) : base;
+  return needsExtendedHighlight ? base + buildDeletedInlineContentStyleExtended(colors, isActive) : base;
 };
 const resolveCellOverlayStyleNext = ({
   colorScheme,

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

@@ -17,6 +17,18 @@ var bgSubtlestMap = {
   gray: "var(--ds-background-accent-gray-subtlest, #F0F1F2)",
   lime: "var(--ds-background-accent-lime-subtlest, #EFFFD6)"
 };
+var bgSubtlestHoveredMap = {
+  green: "var(--ds-background-accent-green-subtlest-hovered, #BAF3DB)",
+  teal: "var(--ds-background-accent-teal-subtlest-hovered, #C6EDFB)",
+  blue: "var(--ds-background-accent-blue-subtlest-hovered, #CFE1FD)",
+  purple: "var(--ds-background-accent-purple-subtlest-hovered, #EED7FC)",
+  red: "var(--ds-background-accent-red-subtlest-hovered, #FFD5D2)",
+  orange: "var(--ds-background-accent-orange-subtlest-hovered, #FCE4A6)",
+  yellow: "var(--ds-background-accent-yellow-subtlest-hovered, #F5E989)",
+  magenta: "var(--ds-background-accent-magenta-subtlest-hovered, #FDD0EC)",
+  gray: "var(--ds-background-accent-gray-subtlest-hovered, #DDDEE1)",
+  lime: "var(--ds-background-accent-lime-subtlest-hovered, #D3F1A7)"
+};
 var bgSubtlestPressedMap = {
   green: "var(--ds-background-accent-green-subtlest-pressed, #97EDC9)",
   teal: "var(--ds-background-accent-teal-subtlest-pressed, #B1E4F7)",
@@ -117,6 +129,10 @@ function deletedCellOutline(colors) {
 
 // --- Inserted content styles ---
 
+function insertedInlineBorderColor(colors) {
+  return colors.insertedInlineBorderTone === 'backgroundHovered' ? bgSubtlestHoveredMap[colors.insertColor] : borderAccent(colors.insertColor);
+}
+
 /** Inline inserted content — default state. */
 export function buildInsertStyle(colors) {
   return convertToInlineCss({
@@ -142,7 +158,7 @@ export function buildInsertStyleInBlock(colors) {
 export function buildInsertStyleExtended(colors) {
   return convertToInlineCss({
     background: bgSubtlest(colors.insertColor),
-    borderBottom: "2px solid ".concat(borderAccent(colors.insertColor)),
+    borderBottom: "2px solid ".concat(insertedInlineBorderColor(colors)),
     padding: "1px 0 2px"
   });
 }
@@ -150,7 +166,7 @@ export function buildInsertStyleExtended(colors) {
 /** Extended insert style for content within a block node (border-bottom only, no background). */
 export function buildInsertStyleInBlockExtended(colors) {
   return convertToInlineCss({
-    borderBottom: "2px solid ".concat(borderAccent(colors.insertColor)),
+    borderBottom: "2px solid ".concat(insertedInlineBorderColor(colors)),
     padding: "1px 0 2px"
   });
 }
@@ -202,8 +218,9 @@ export function buildInsertStyleActive(colors) {
 
 /** Base deleted-inline-style object, shared by several exports. */
 function deletedInlineStyleBase(colors) {
+  var _colors$deleteTextCol;
   return {
-    textDecorationColor: borderAccent(colors.deleteColor),
+    textDecorationColor: borderAccent((_colors$deleteTextCol = colors.deleteTextColor) !== null && _colors$deleteTextCol !== void 0 ? _colors$deleteTextCol : colors.deleteColor),
     textDecoration: 'line-through',
     position: 'relative',
     opacity: 1
@@ -253,12 +270,13 @@ export function buildDeletedContentStyleUnboundedActive(colors) {
 
 /** Unbounded strikethrough overlay for deleted inline content (absolute positioned line). */
 export function buildDeletedInlineStyleUnbounded(colors) {
+  var _colors$deleteTextCol2;
   return convertToInlineCss({
     position: 'absolute',
     top: '50%',
     width: '100%',
     display: 'inline-block',
-    borderTop: "1px solid ".concat(textAccent(colors.deleteColor)),
+    borderTop: "1px solid ".concat(textAccent((_colors$deleteTextCol2 = colors.deleteTextColor) !== null && _colors$deleteTextCol2 !== void 0 ? _colors$deleteTextCol2 : colors.deleteColor)),
     pointerEvents: 'none',
     zIndex: 1
   });
@@ -369,9 +387,10 @@ export function buildDeletedBlockOutlineRoundedNew(colors) {
 
 /** Table row style for deleted rows. */
 export function buildDeletedRowStyle(colors) {
+  var _colors$deleteTextCol3;
   // Each branch emits exactly the CSS the pre-factory shim did for its scheme.
   return colors.deletedRowTreatment === 'textTint' ? convertToInlineCss({
-    color: textAccent(colors.deleteColor),
+    color: textAccent((_colors$deleteTextCol3 = colors.deleteTextColor) !== null && _colors$deleteTextCol3 !== void 0 ? _colors$deleteTextCol3 : colors.deleteColor),
     textDecoration: 'line-through',
     opacity: 0.6,
     display: 'table-row'
@@ -532,29 +551,33 @@ export function buildDeletedDecorationMarkerVariableSimple(colors) {
  * 'glyphTint' deleted inline style — tints the glyph itself via `color:`. Opacity ramps 0.6
  * default, 0.83 "new", 1 active.
  */
-/** Extended deleted inline style — background highlight + border-bottom underline (standard scheme). */
+/** Extended deleted inline style — background highlight with an accent or background-matched bottom border. */
 export function buildDeletedInlineContentStyleExtended(colors) {
+  var isActive = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
+  var backgroundColor = isActive && colors.deletedInlineBorderTone === 'background' ? bgSubtlerPressed(colors.deleteActiveColor) : bgSubtlest(colors.deleteColor);
   return convertToInlineCss({
-    backgroundColor: bgSubtlest(colors.deleteColor),
-    borderBottom: "2px solid ".concat(borderAccent(colors.deleteColor)),
+    backgroundColor: backgroundColor,
+    borderBottom: "2px solid ".concat(colors.deletedInlineBorderTone === 'background' ? backgroundColor : borderAccent(colors.deleteColor)),
     padding: "1px 0 2px"
   });
 }
 export function buildDeletedInlineStyleStandard(colors, state) {
+  var _colors$deleteTextCol5;
   if (state === 'active') {
+    var _colors$deleteTextCol4;
     return convertToInlineCss({
-      color: "var(--ds-text, #292A2E)",
+      color: colors.deleteTextColor ? textAccent(colors.deleteTextColor) : "var(--ds-text, #292A2E)",
       textDecoration: 'line-through',
-      textDecorationColor: textAccent(colors.deleteColor),
+      textDecorationColor: textAccent((_colors$deleteTextCol4 = colors.deleteTextColor) !== null && _colors$deleteTextCol4 !== void 0 ? _colors$deleteTextCol4 : colors.deleteColor),
       position: 'relative',
-      opacity: 1
+      opacity: colors.deleteTextColor ? 0.83 : 1
     });
   }
   return convertToInlineCss({
-    color: textAccent(colors.deleteColor),
+    color: textAccent((_colors$deleteTextCol5 = colors.deleteTextColor) !== null && _colors$deleteTextCol5 !== void 0 ? _colors$deleteTextCol5 : colors.deleteColor),
     textDecoration: 'line-through',
     position: 'relative',
-    opacity: state === 'new' ? 0.83 : 0.6
+    opacity: colors.deleteTextColor || state === 'new' ? 0.83 : 0.6
   });
 }
 

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

@@ -60,8 +60,11 @@ export var standardScheme = {
 var createAttributionScheme = function createAttributionScheme(color) {
   return _objectSpread(_objectSpread({}, standardScheme), {}, {
     insertColor: color,
+    insertedInlineBorderTone: 'backgroundHovered',
     insertActiveColor: color,
     deleteColor: color,
+    deletedInlineBorderTone: 'background',
+    deleteTextColor: 'gray',
     deleteActiveColor: color,
     deletedCellColor: color
   });

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

@@ -50,7 +50,7 @@ var getExtendedDeletedStyle = function getExtendedDeletedStyle(colors, isActive)
     // Identical in both states — the block decoration carries the active emphasis.
     return buildDeletedInlineStyle(colors, false);
   }
-  return buildDeletedInlineStyleStandard(colors, isActive ? 'active' : 'default') + buildDeletedInlineContentStyleExtended(colors);
+  return buildDeletedInlineStyleStandard(colors, isActive ? 'active' : 'default') + buildDeletedInlineContentStyleExtended(colors, isActive);
 };
 
 /** Registry-driven inline `style` for a changed-content decoration. */

package/dist/esm/pm-plugins/decorations/utils/wrapBlockNodeViewStyles.js

@@ -106,7 +106,7 @@ var getDeletedContentStyleNext = function getDeletedContentStyleNext(colorScheme
 
   // glyphTint adds a background highlight and border-bottom over the tint; strikethrough does not.
   var needsExtendedHighlight = colors.deletedInlineTreatment === 'glyphTint' && isExtendedEnabled(diffType) && !omitHighlight;
-  return needsExtendedHighlight ? base + buildDeletedInlineContentStyleExtended(colors) : base;
+  return needsExtendedHighlight ? base + buildDeletedInlineContentStyleExtended(colors, isActive) : base;
 };
 var resolveCellOverlayStyleNext = function resolveCellOverlayStyleNext(_ref) {
   var colorScheme = _ref.colorScheme,

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

@@ -90,8 +90,8 @@ export declare function buildDeletedDecorationMarkerVariableSimple(colors: DiffC
  * 'glyphTint' deleted inline style — tints the glyph itself via `color:`. Opacity ramps 0.6
  * default, 0.83 "new", 1 active.
  */
-/** Extended deleted inline style — background highlight + border-bottom underline (standard scheme). */
-export declare function buildDeletedInlineContentStyleExtended(colors: DiffColorScheme): string;
+/** Extended deleted inline style — background highlight with an accent or background-matched bottom border. */
+export declare function buildDeletedInlineContentStyleExtended(colors: DiffColorScheme, isActive?: boolean): string;
 export declare function buildDeletedInlineStyleStandard(colors: DiffColorScheme, state: 'default' | 'new' | 'active'): string;
 /** Deleted node decoration marker — "new" state. */
 export declare function buildDeletedDecorationMarkerVariableNew(colors: DiffColorScheme): string;

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

@@ -26,6 +26,8 @@ export type DiffColorScheme = {
     deletedCellColor: AdsAccentColor;
     /** Opacity of the deleted cell overlay background. Counterpart to `insertedCellOpacity`. */
     deletedCellOpacity: number;
+    /** Bottom border tone for deleted text highlights. Defaults to accent. */
+    deletedInlineBorderTone?: 'accent' | 'background';
     /** Deleted inline content: tint the strikethrough, or tint and dim the glyph itself. */
     deletedInlineTreatment: 'strikethrough' | 'glyphTint';
     /** Resting "REMOVED" lozenge tint. Gray in both current schemes; the active state uses `deleteActiveColor`. */
@@ -48,12 +50,16 @@ export type DiffColorScheme = {
     deletedQuoteNodeShape: 'ring' | 'borderLeft';
     /** Deleted row de-emphasis: tint the line-through, or tint the row text. Both read `deleteColor`. */
     deletedRowTreatment: 'strikeColor' | 'textTint';
+    /** Optional text and strikethrough hue, independent of deletion borders. */
+    deleteTextColor?: AdsAccentColor;
     /** Inserted content, active/focused state. */
     insertActiveColor: AdsAccentColor;
     /** Inserted content, default state. */
     insertColor: AdsAccentColor;
     /** Opacity of the inserted cell overlay background. */
     insertedCellOpacity: number;
+    /** Bottom border tone for inserted text highlights. Defaults to accent. */
+    insertedInlineBorderTone?: 'accent' | 'backgroundHovered';
     /** Inserted content under the extended experience: underline, or a border-bottom rule with padding. */
     insertedInlineTreatment: 'underline' | 'borderBottom';
     /** Inserted block ring: 4px stateful ring, or one static 1px accent ring. */

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-show-diff",
-	"version": "15.1.2",
+	"version": "15.1.3",
 	"description": "ShowDiff plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -31,7 +31,7 @@
 		"@atlaskit/platform-feature-experiments": "^0.3.0",
 		"@atlaskit/platform-feature-flags": "^2.2.0",
 		"@atlaskit/primitives": "^22.5.0",
-		"@atlaskit/tmp-editor-statsig": "^182.0.0",
+		"@atlaskit/tmp-editor-statsig": "^183.0.0",
 		"@atlaskit/tokens": "^16.11.0",
 		"@babel/runtime": "^7.0.0",
 		"@compiled/react": "^1.0.2",
@@ -63,7 +63,7 @@
 		"react-intl": "^7.0.0"
 	},
 	"peerDependencies": {
-		"@atlaskit/editor-common": "^121.1.0",
+		"@atlaskit/editor-common": "^121.2.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"