@atlaskit/editor-plugin-show-diff 12.1.2 → 12.1.4

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

@@ -0,0 +1,625 @@
+import { convertToInlineCss } from '@atlaskit/editor-common/lazy-node-view';
+// token() is a build-time transform needing static literals, so pre-compute every colour's
+// tokens here and index by name at runtime.
+
+const bgSubtlestMap = {
+  green: "var(--ds-background-accent-green-subtlest, #DCFFF1)",
+  teal: "var(--ds-background-accent-teal-subtlest, #E7F9FF)",
+  blue: "var(--ds-background-accent-blue-subtlest, #E9F2FE)",
+  purple: "var(--ds-background-accent-purple-subtlest, #F8EEFE)",
+  red: "var(--ds-background-accent-red-subtlest, #FFECEB)",
+  orange: "var(--ds-background-accent-orange-subtlest, #FFF5DB)",
+  yellow: "var(--ds-background-accent-yellow-subtlest, #FEF7C8)",
+  magenta: "var(--ds-background-accent-magenta-subtlest, #FFECF8)",
+  gray: "var(--ds-background-accent-gray-subtlest, #F0F1F2)"
+};
+const bgSubtlestPressedMap = {
+  green: "var(--ds-background-accent-green-subtlest-pressed, #97EDC9)",
+  teal: "var(--ds-background-accent-teal-subtlest-pressed, #B1E4F7)",
+  blue: "var(--ds-background-accent-blue-subtlest-pressed, #ADCBFB)",
+  purple: "var(--ds-background-accent-purple-subtlest-pressed, #E3BDFA)",
+  red: "var(--ds-background-accent-red-subtlest-pressed, #FFB8B2)",
+  orange: "var(--ds-background-accent-orange-subtlest-pressed, #FBD779)",
+  yellow: "var(--ds-background-accent-yellow-subtlest-pressed, #EFDD4E)",
+  magenta: "var(--ds-background-accent-magenta-subtlest-pressed, #FCB6E1)",
+  gray: "var(--ds-background-accent-gray-subtlest-pressed, #B7B9BE)"
+};
+const bgSubtlerPressedMap = {
+  green: "var(--ds-background-accent-green-subtler-pressed, #7EE2B8)",
+  teal: "var(--ds-background-accent-teal-subtler-pressed, #9DD9EE)",
+  blue: "var(--ds-background-accent-blue-subtler-pressed, #8FB8F6)",
+  purple: "var(--ds-background-accent-purple-subtler-pressed, #D8A0F7)",
+  red: "var(--ds-background-accent-red-subtler-pressed, #FD9891)",
+  orange: "var(--ds-background-accent-orange-subtler-pressed, #FBC828)",
+  yellow: "var(--ds-background-accent-yellow-subtler-pressed, #EED12B)",
+  magenta: "var(--ds-background-accent-magenta-subtler-pressed, #F797D2)",
+  gray: "var(--ds-background-accent-gray-subtler-pressed, #8C8F97)"
+};
+const borderAccentMap = {
+  green: "var(--ds-border-accent-green, #22A06B)",
+  teal: "var(--ds-border-accent-teal, #2898BD)",
+  blue: "var(--ds-border-accent-blue, #357DE8)",
+  purple: "var(--ds-border-accent-purple, #AF59E1)",
+  red: "var(--ds-border-accent-red, #E2483D)",
+  orange: "var(--ds-border-accent-orange, #E06C00)",
+  yellow: "var(--ds-border-accent-yellow, #B38600)",
+  magenta: "var(--ds-border-accent-magenta, #CD519D)",
+  gray: "var(--ds-border-accent-gray, #7D818A)"
+};
+const textAccentMap = {
+  green: "var(--ds-text-accent-green, #216E4E)",
+  teal: "var(--ds-text-accent-teal, #206A83)",
+  blue: "var(--ds-text-accent-blue, #1558BC)",
+  purple: "var(--ds-text-accent-purple, #803FA5)",
+  red: "var(--ds-text-accent-red, #AE2E24)",
+  orange: "var(--ds-text-accent-orange, #9E4C00)",
+  yellow: "var(--ds-text-accent-yellow, #7F5F01)",
+  magenta: "var(--ds-text-accent-magenta, #943D73)",
+  gray: "var(--ds-text-accent-gray, #505258)"
+};
+function bgSubtlest(color) {
+  return bgSubtlestMap[color];
+}
+function bgSubtlestPressed(color) {
+  return bgSubtlestPressedMap[color];
+}
+function bgSubtlerPressed(color) {
+  return bgSubtlerPressedMap[color];
+}
+function borderAccent(color) {
+  return borderAccentMap[color];
+}
+function textAccent(color) {
+  return textAccentMap[color];
+}
+
+/** Outline colour for deleted table-cell overlays. */
+function deletedCellOutline(colors) {
+  return colors.deletedCellBorderProminence === 'subtle' ? "var(--ds-border-disabled, #0515240F)" : borderAccent(colors.deletedCellColor);
+}
+
+/** Ring colour for an active (scroll-target) deleted block outline. */
+function deletedBlockOutlineActiveRing(colors) {
+  return colors.deletedBlockOutlineActiveEmphasis === 'border' ? borderAccent(colors.deleteActiveColor) : bgSubtlerPressed(colors.deleteActiveColor);
+}
+
+// --- Inserted content styles ---
+
+/** Inline inserted content — default state. */
+export function buildInsertStyle(colors) {
+  return convertToInlineCss({
+    background: bgSubtlest(colors.insertColor),
+    textDecoration: 'underline',
+    textDecorationStyle: colors.insertUnderlineStyle,
+    textDecorationThickness: "var(--ds-space-025, 2px)",
+    textDecorationColor: borderAccent(colors.insertColor)
+  });
+}
+
+/** Inline insert style for content within a block node (no background, underline only). */
+export function buildInsertStyleInBlock(colors) {
+  return convertToInlineCss({
+    textDecoration: 'underline',
+    textDecorationStyle: colors.insertUnderlineStyle,
+    textDecorationThickness: "var(--ds-space-025, 2px)",
+    textDecorationColor: borderAccent(colors.insertColor)
+  });
+}
+
+/** Extended insert style — background + border-bottom underline. */
+export function buildInsertStyleExtended(colors) {
+  return convertToInlineCss({
+    background: bgSubtlest(colors.insertColor),
+    borderBottom: `2px solid ${borderAccent(colors.insertColor)}`,
+    padding: `1px 0 2px`
+  });
+}
+
+/** 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)}`,
+    padding: `1px 0 2px`
+  });
+}
+
+/** Active state of the extended insert style. */
+export function buildInsertStyleExtendedActive(colors) {
+  return convertToInlineCss({
+    background: bgSubtlerPressed(colors.insertActiveColor),
+    borderBottom: `2px solid ${borderAccent(colors.insertColor)}`,
+    padding: `1px 0 2px`
+  });
+}
+
+/** Extended insert style without underline — background + padding only. */
+export function buildInsertStyleExtendedNoUnderline(colors) {
+  return convertToInlineCss({
+    background: bgSubtlest(colors.insertColor),
+    padding: `1px 0 2px`
+  });
+}
+
+/** Active state of the no-underline extended insert style. */
+export function buildInsertStyleExtendedNoUnderlineActive(colors) {
+  return convertToInlineCss({
+    background: bgSubtlerPressed(colors.insertActiveColor),
+    padding: `1px 0 2px`
+  });
+}
+
+/** No-underline extended insert style for block content (padding only). */
+export function buildInsertStyleInBlockExtendedNoUnderline(_colors) {
+  return convertToInlineCss({
+    padding: `1px 0 2px`
+  });
+}
+
+/** Inline inserted content — active/focused state. */
+export function buildInsertStyleActive(colors) {
+  return convertToInlineCss({
+    background: bgSubtlerPressed(colors.insertActiveColor),
+    textDecoration: 'underline',
+    textDecorationStyle: colors.insertUnderlineStyle,
+    textDecorationThickness: "var(--ds-space-025, 2px)",
+    textDecorationColor: textAccent(colors.insertActiveColor)
+  });
+}
+
+// --- Deleted inline content styles ---
+
+function deletedInlineStyleBase(colors) {
+  return {
+    textDecorationColor: borderAccent(colors.deleteColor),
+    textDecoration: 'line-through',
+    position: 'relative',
+    opacity: 1
+  };
+}
+function deletedInlineStyleActiveBase(colors) {
+  return {
+    ...deletedInlineStyleBase(colors),
+    textDecorationThickness: '2px',
+    backgroundColor: bgSubtlestPressed(colors.deleteActiveColor)
+  };
+}
+
+/** Strikethrough for removed inline / widget content (non-marker decorations). */
+export function buildDeletedInlineStyle(colors, isActive) {
+  return isActive ? convertToInlineCss(deletedInlineStyleActiveBase(colors)) : convertToInlineCss(deletedInlineStyleBase(colors));
+}
+
+/** Strikethrough line (unbounded span) for deleted content — default state. */
+export function buildDeletedContentStyleUnbounded(colors) {
+  return convertToInlineCss({
+    position: 'absolute',
+    top: '50%',
+    width: '100%',
+    display: 'inline-block',
+    borderTop: `1px solid ${borderAccent(colors.deleteColor)}`,
+    pointerEvents: 'none',
+    zIndex: 1
+  });
+}
+
+/** Strikethrough line (unbounded span) for deleted content — active state. */
+export function buildDeletedContentStyleUnboundedActive(colors) {
+  return convertToInlineCss({
+    position: 'absolute',
+    top: '50%',
+    width: '100%',
+    display: 'inline-block',
+    borderTop: `2px solid ${borderAccent(colors.deleteColor)}`,
+    pointerEvents: 'none',
+    zIndex: 1
+  });
+}
+
+// --- Deleted block node styles — quote node ---
+
+/** Unbounded strikethrough overlay for deleted inline content (absolute positioned line). */
+export function buildDeletedInlineStyleUnbounded(colors) {
+  return convertToInlineCss({
+    position: 'absolute',
+    top: '50%',
+    width: '100%',
+    display: 'inline-block',
+    borderTop: `1px solid ${textAccent(colors.deleteColor)}`,
+    pointerEvents: 'none',
+    zIndex: 1
+  });
+}
+
+/** Deleted lozenge-style quote node with box-shadow ring. */
+export function buildDeletedStyleQuoteNodeWithLozenge(colors) {
+  return convertToInlineCss({
+    marginTop: "var(--ds-space-150, 12px)",
+    paddingTop: "var(--ds-space-025, 2px)",
+    paddingBottom: "var(--ds-space-025, 2px)",
+    paddingLeft: "var(--ds-space-025, 2px)",
+    boxShadow: `0 0 0 1px ${borderAccent(colors.deleteColor)}`,
+    borderRadius: "var(--ds-radius-small, 4px)"
+  });
+}
+
+/** Active state of the deleted lozenge-style quote node — stronger ring. */
+export function buildDeletedStyleQuoteNodeWithLozengeActive(colors) {
+  return convertToInlineCss({
+    marginTop: "var(--ds-space-150, 12px)",
+    paddingTop: "var(--ds-space-025, 2px)",
+    paddingBottom: "var(--ds-space-025, 2px)",
+    paddingLeft: "var(--ds-space-025, 2px)",
+    boxShadow: `0 0 0 4px ${borderAccent(colors.deleteActiveColor)}`,
+    borderRadius: "var(--ds-radius-small, 4px)"
+  });
+}
+
+/** Deleted quote node — a 2px left border, or a 1px ring with padding, per `deletedQuoteNodeShape`. */
+export function buildDeletedStyleQuoteNode(colors) {
+  if (colors.deletedQuoteNodeShape === 'borderLeft') {
+    return convertToInlineCss({
+      borderLeft: `2px solid ${borderAccent(colors.deleteColor)}`
+    });
+  }
+  return convertToInlineCss({
+    marginTop: "var(--ds-space-150, 12px)",
+    paddingTop: "var(--ds-space-025, 2px)",
+    paddingBottom: "var(--ds-space-025, 2px)",
+    paddingLeft: "var(--ds-space-025, 2px)",
+    boxShadow: `0 0 0 1px ${borderAccent(colors.deleteColor)}`,
+    borderRadius: "var(--ds-radius-small, 4px)"
+  });
+}
+
+/** Quote node outline for deleted content — active state. */
+export function buildDeletedStyleQuoteNodeActive(colors) {
+  return convertToInlineCss({
+    marginTop: "var(--ds-space-150, 12px)",
+    paddingTop: "var(--ds-space-025, 2px)",
+    paddingBottom: "var(--ds-space-025, 2px)",
+    paddingLeft: "var(--ds-space-025, 2px)",
+    boxShadow: `0 0 0 4px ${bgSubtlerPressed(colors.deleteActiveColor)}`,
+    borderRadius: "var(--ds-radius-small, 4px)"
+  });
+}
+
+// --- Deleted block node styles — generic block outline ---
+
+/** Generic block node outline for deleted content — default state (small radius). */
+export function buildDeletedBlockOutline(colors) {
+  return convertToInlineCss({
+    boxShadow: `0 0 0 1px ${borderAccent(colors.deleteColor)}`,
+    borderRadius: "var(--ds-radius-small, 4px)"
+  });
+}
+
+/** Generic block node outline for deleted content — active state (small radius). */
+export function buildDeletedBlockOutlineActive(colors) {
+  return convertToInlineCss({
+    boxShadow: `0 0 0 4px ${deletedBlockOutlineActiveRing(colors)}`,
+    borderRadius: "var(--ds-radius-small, 4px)"
+  });
+}
+
+/** Generic block node outline for deleted content — default state (rounded/xsmall+1px radius). */
+export function buildDeletedBlockOutlineRounded(colors) {
+  return convertToInlineCss({
+    boxShadow: `0 0 0 1px ${borderAccent(colors.deleteColor)}`,
+    borderRadius: `calc(${"var(--ds-radius-xsmall, 2px)"} + 1px)`
+  });
+}
+
+/** Generic block node outline for deleted content — active state (rounded/xsmall+1px radius). */
+export function buildDeletedBlockOutlineRoundedActive(colors) {
+  return convertToInlineCss({
+    boxShadow: `0 0 0 4px ${deletedBlockOutlineActiveRing(colors)}`,
+    borderRadius: `calc(${"var(--ds-radius-xsmall, 2px)"} + 1px)`
+  });
+}
+
+/** Scroll-navigation "new" emphasis: 4px ring — default state (small radius). */
+export function buildDeletedBlockOutlineNew(colors) {
+  return convertToInlineCss({
+    boxShadow: `0 0 0 4px ${bgSubtlest(colors.deleteColor)}`,
+    borderRadius: "var(--ds-radius-small, 4px)"
+  });
+}
+
+/** Scroll-navigation "new" emphasis: 4px ring — default state (rounded radius). */
+export function buildDeletedBlockOutlineRoundedNew(colors) {
+  return convertToInlineCss({
+    boxShadow: `0 0 0 4px ${bgSubtlest(colors.deleteColor)}`,
+    borderRadius: `calc(${"var(--ds-radius-xsmall, 2px)"} + 1px)`
+  });
+}
+
+// --- Deleted table row style ---
+
+/** Table row style for deleted rows. See `deletedRowTreatment`. */
+export function buildDeletedRowStyle(colors) {
+  const base = {
+    textDecoration: 'line-through',
+    opacity: 0.6,
+    display: 'table-row'
+  };
+  return colors.deletedRowTreatment === 'textTint' ? convertToInlineCss({
+    ...base,
+    color: textAccent(colors.deleteColor)
+  }) : convertToInlineCss({
+    ...base,
+    textDecorationColor: borderAccent(colors.deleteColor)
+  });
+}
+
+// --- Inserted block node styles — quote, rule, generic node, card ---
+
+/** Quote node (blockquote) left-border style for inserted content — default state. */
+export function buildInsertStyleQuoteNode(colors) {
+  return convertToInlineCss({
+    borderLeft: `2px solid ${borderAccent(colors.insertColor)}`
+  });
+}
+
+/** Quote node left-border style for inserted content — "new" scroll-nav state. */
+export function buildInsertStyleQuoteNodeNew(colors) {
+  return convertToInlineCss({
+    borderLeft: `4px solid ${bgSubtlest(colors.insertColor)}`
+  });
+}
+
+/** Quote node left-border style for inserted content — active state. */
+export function buildInsertStyleQuoteNodeActive(colors) {
+  return convertToInlineCss({
+    borderLeft: `4px solid ${bgSubtlerPressed(colors.insertActiveColor)}`
+  });
+}
+
+/** Horizontal rule style for inserted content — default state. */
+export function buildInsertStyleRuleNode(colors) {
+  return convertToInlineCss({
+    backgroundColor: borderAccent(colors.insertColor)
+  });
+}
+
+/** Horizontal rule style for inserted content — "new" scroll-nav state. */
+export function buildInsertStyleRuleNodeNew(colors) {
+  return convertToInlineCss({
+    backgroundColor: bgSubtlest(colors.insertColor),
+    border: 'none',
+    height: '4px',
+    borderRadius: "var(--ds-radius-small, 4px)"
+  });
+}
+
+/** Horizontal rule style for inserted content — active state. */
+export function buildInsertStyleRuleNodeActive(colors) {
+  return convertToInlineCss({
+    backgroundColor: bgSubtlerPressed(colors.insertActiveColor),
+    border: 'none',
+    height: '4px',
+    borderRadius: "var(--ds-radius-small, 4px)"
+  });
+}
+
+/** Generic node outline for inserted content — default state (small radius). */
+export function buildInsertStyleNode(colors) {
+  return convertToInlineCss({
+    boxShadow: `0 0 0 1px ${borderAccent(colors.insertColor)}`,
+    borderRadius: "var(--ds-radius-small, 4px)"
+  });
+}
+
+/** Generic node outline for inserted content — "new" scroll-nav state (small radius). */
+export function buildInsertStyleNodeNew(colors) {
+  return convertToInlineCss({
+    boxShadow: `0 0 0 4px ${bgSubtlest(colors.insertColor)}`,
+    borderRadius: "var(--ds-radius-small, 4px)"
+  });
+}
+
+/** Generic node outline for inserted content — active state (small radius). */
+export function buildInsertStyleNodeActive(colors) {
+  return convertToInlineCss({
+    boxShadow: `0 0 0 4px ${bgSubtlerPressed(colors.insertActiveColor)}`,
+    borderRadius: "var(--ds-radius-small, 4px)"
+  });
+}
+
+/** Card block node outline for inserted content — default state (medium radius). */
+export function buildInsertStyleCardBlockNode(colors) {
+  return convertToInlineCss({
+    boxShadow: `0 0 0 1px ${borderAccent(colors.insertColor)}`,
+    borderRadius: "var(--ds-radius-medium, 6px)"
+  });
+}
+
+/** Card block node outline for inserted content — "new" scroll-nav state (medium radius). */
+export function buildInsertStyleCardBlockNodeNew(colors) {
+  return convertToInlineCss({
+    boxShadow: `0 0 0 4px ${bgSubtlest(colors.insertColor)}`,
+    borderRadius: "var(--ds-radius-medium, 6px)"
+  });
+}
+
+/** Card block node outline for inserted content — active state (medium radius). */
+export function buildInsertStyleCardBlockNodeActive(colors) {
+  return convertToInlineCss({
+    boxShadow: `0 0 0 4px ${bgSubtlerPressed(colors.insertActiveColor)}`,
+    borderRadius: "var(--ds-radius-medium, 6px)"
+  });
+}
+
+// --- CSS custom properties ---
+// Applied inline on the decoration wrapper; cascade down to child/pseudo-element selectors in the
+// global stylesheet.
+
+/** CSS variables for an inserted node decoration marker — default state. */
+export function buildDecorationMarkerVariable(colors) {
+  return convertToInlineCss({
+    '--diff-decoration-marker-color': borderAccent(colors.insertColor),
+    '--diff-decoration-marker-ring-width': '1px'
+  });
+}
+
+/** CSS variables for an inserted node decoration marker — "new" scroll-nav state. */
+export function buildDecorationMarkerVariableNew(colors) {
+  return convertToInlineCss({
+    '--diff-decoration-marker-color': bgSubtlest(colors.insertColor),
+    '--diff-decoration-marker-ring-width': '4px'
+  });
+}
+
+/** CSS variables for an inserted node decoration marker — active state. */
+export function buildDecorationMarkerVariableActive(colors) {
+  return convertToInlineCss({
+    '--diff-decoration-marker-color': bgSubtlerPressed(colors.insertActiveColor),
+    '--diff-decoration-marker-ring-width': '4px'
+  });
+}
+
+/** Deleted node decoration marker (extension / embedCard / listItem) — default state. */
+export function buildDeletedDecorationMarkerVariable(colors) {
+  return convertToInlineCss({
+    ...deletedInlineStyleBase(colors),
+    '--diff-decoration-marker-color': borderAccent(colors.deleteColor),
+    '--diff-decoration-marker-ring-width': '1px'
+  });
+}
+
+/** Opacity only, no position or strikethrough. Used by the standard scheme. */
+export function buildDeletedDecorationMarkerVariableSimple(colors) {
+  return convertToInlineCss({
+    opacity: 0.8,
+    '--diff-decoration-marker-color': borderAccent(colors.deleteColor),
+    '--diff-decoration-marker-ring-width': '1px'
+  });
+}
+
+/** Extended deleted inline style — background highlight + border-bottom underline (standard scheme). */
+export function buildDeletedInlineContentStyleExtended(colors) {
+  return convertToInlineCss({
+    backgroundColor: bgSubtlest(colors.deleteColor),
+    borderBottom: `2px solid ${borderAccent(colors.deleteColor)}`,
+    padding: `1px 0 2px`
+  });
+}
+
+/** Standard deleted inline style — colours the glyph itself, not just the strikethrough. */
+export function buildDeletedInlineStyleStandard(colors, state) {
+  if (state === 'active') {
+    return convertToInlineCss({
+      color: "var(--ds-text, #292A2E)",
+      textDecoration: 'line-through',
+      textDecorationColor: textAccent(colors.deleteColor),
+      position: 'relative',
+      opacity: 1
+    });
+  }
+  return convertToInlineCss({
+    color: textAccent(colors.deleteColor),
+    textDecoration: 'line-through',
+    position: 'relative',
+    opacity: state === 'new' ? 0.83 : 0.6
+  });
+}
+
+/** Deleted node decoration marker — "new" state. */
+export function buildDeletedDecorationMarkerVariableNew(colors) {
+  return convertToInlineCss({
+    ...deletedInlineStyleBase(colors),
+    '--diff-decoration-marker-color': bgSubtlest(colors.deleteColor),
+    '--diff-decoration-marker-ring-width': '4px'
+  });
+}
+
+/** Deleted node decoration marker — active state. */
+export function buildDeletedDecorationMarkerVariableActive(colors) {
+  return convertToInlineCss({
+    ...deletedInlineStyleActiveBase(colors),
+    '--diff-decoration-marker-color': bgSubtlerPressed(colors.deleteActiveColor),
+    '--diff-decoration-marker-ring-width': '4px'
+  });
+}
+
+// --- Table cell overlay styles ---
+
+/** Cell overlay for added table cells — default state. Stacking order varies by scheme. */
+export function buildAddedCellOverlayStyle(colors) {
+  return convertToInlineCss({
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    width: '100%',
+    height: '100%',
+    backgroundColor: `rgba(from ${bgSubtlest(colors.insertColor)} r g b / ${colors.insertedCellOpacity})`,
+    zIndex: colors.addedCellOverlayZIndex,
+    outline: `1px solid ${borderAccent(colors.insertColor)}`,
+    pointerEvents: 'none'
+  });
+}
+
+/** Added cell overlay — rounded variant. See `roundedAddedCellOverlayInheritsBorder`. */
+export function buildAddedCellOverlayRoundedStyle(colors) {
+  return convertToInlineCss({
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    width: '100%',
+    height: '100%',
+    backgroundColor: `rgba(from ${bgSubtlest(colors.insertColor)} r g b / ${colors.insertedCellOpacity})`,
+    zIndex: 2,
+    outline: `1px solid ${borderAccent(colors.insertColor)}`,
+    pointerEvents: 'none',
+    ...(colors.roundedAddedCellOverlayInheritsBorder ? {
+      border: 'inherit'
+    } : {}),
+    borderRadius: 'inherit'
+  });
+}
+
+/** Cell overlay for added table cells — "new" scroll-nav state. */
+export function buildAddedCellOverlayStyleNew(colors) {
+  return convertToInlineCss({
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    width: '100%',
+    height: '100%',
+    backgroundColor: `rgba(from ${bgSubtlest(colors.insertColor)} r g b / ${colors.insertedCellOpacity})`,
+    zIndex: 1,
+    outline: `1px solid ${bgSubtlerPressed(colors.insertActiveColor)}`,
+    pointerEvents: 'none'
+  });
+}
+
+/** Cell overlay for deleted table cells — default state (zIndex 1). Uses deletedCellColor. */
+export function buildDeletedCellOverlayStyle(colors) {
+  return convertToInlineCss({
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    width: '100%',
+    height: '100%',
+    backgroundColor: `rgba(from ${bgSubtlest(colors.deletedCellColor)} r g b / 0.5)`,
+    zIndex: 1,
+    outline: `1px solid ${deletedCellOutline(colors)}`,
+    pointerEvents: 'none'
+  });
+}
+
+/** Cell overlay for deleted table cells — rounded variant (zIndex 2, inherits border/radius). */
+export function buildDeletedCellOverlayRoundedStyle(colors) {
+  return convertToInlineCss({
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    width: '100%',
+    height: '100%',
+    backgroundColor: `rgba(from ${bgSubtlest(colors.deletedCellColor)} r g b / 0.5)`,
+    zIndex: 2,
+    outline: `1px solid ${deletedCellOutline(colors)}`,
+    pointerEvents: 'none',
+    border: 'inherit',
+    borderRadius: 'inherit'
+  });
+}

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

@@ -0,0 +1,33 @@
+/** Green insertions, red deletions. */
+export const traditionalScheme = {
+  insertColor: 'green',
+  insertUnderlineStyle: 'solid',
+  insertActiveColor: 'green',
+  deleteColor: 'red',
+  deleteActiveColor: 'red',
+  deletedCellColor: 'gray',
+  insertedCellOpacity: 0.5,
+  deletedQuoteNodeShape: 'ring',
+  deletedCellBorderProminence: 'subtle',
+  deletedRowTreatment: 'strikeColor',
+  deletedBlockOutlineActiveEmphasis: 'background',
+  addedCellOverlayZIndex: 1,
+  roundedAddedCellOverlayInheritsBorder: true
+};
+
+/** Purple insertions, gray deletions (red on active). */
+export const standardScheme = {
+  insertColor: 'purple',
+  insertUnderlineStyle: 'dotted',
+  insertActiveColor: 'purple',
+  deleteColor: 'gray',
+  deleteActiveColor: 'red',
+  deletedCellColor: 'gray',
+  insertedCellOpacity: 0.2,
+  deletedQuoteNodeShape: 'borderLeft',
+  deletedCellBorderProminence: 'accent',
+  deletedRowTreatment: 'textTint',
+  deletedBlockOutlineActiveEmphasis: 'border',
+  addedCellOverlayZIndex: 2,
+  roundedAddedCellOverlayInheritsBorder: false
+};