feat: add more CSS vars for track changes (#2715)

* feat: add more CSS vars for track changes

* fix(tracked-changes): reset deleted text decoration styling

Author: harbournick

apps/docs/guides/general/custom-themes.mdx

@@ -278,14 +278,46 @@ Insert, delete, and format change decorations in the document.
 | Variable | Default | Controls |
 |----------|---------|----------|
 | `--sd-tracked-changes-insert-background` | `#399c7222` | Insert highlight |
-| `--sd-tracked-changes-insert-border` | `#00853d` | Insert left border |
+| `--sd-tracked-changes-insert-border` | `#00853d` | Insert border color |
+| `--sd-tracked-changes-insert-border-width` | `1px` | Insert border width |
+| `--sd-tracked-changes-insert-focused-border-width` | `2px` | Focused insert border width |
+| `--sd-tracked-changes-insert-text` | `currentColor` | Insert text color |
+| `--sd-tracked-changes-insert-decoration-line` | `none` | Insert text decoration |
+| `--sd-tracked-changes-insert-decoration-thickness` | `1px` | Insert decoration thickness |
+| `--sd-tracked-changes-insert-underline-offset` | `0px` | Insert underline offset |
 | `--sd-tracked-changes-delete-background` | `#cb0e4722` | Delete highlight |
-| `--sd-tracked-changes-delete-border` | `#cb0e47` | Delete left border |
+| `--sd-tracked-changes-delete-border` | `#cb0e47` | Delete border color |
+| `--sd-tracked-changes-delete-border-width` | `1px` | Delete border width |
+| `--sd-tracked-changes-delete-focused-border-width` | `2px` | Focused delete border width |
+| `--sd-tracked-changes-delete-text` | `currentColor` | Delete text color |
+| `--sd-tracked-changes-delete-decoration-thickness` | `2px` | Delete strike thickness |
 | `--sd-tracked-changes-format-border` | `gold` | Format change border |
 | `--sd-tracked-changes-insert-background-focused` | `#399c7244` | Focused insert |
 | `--sd-tracked-changes-delete-background-focused` | `#cb0e4744` | Focused delete |
 | `--sd-tracked-changes-format-background-focused` | `#ffd70033` | Focused format change |
 
+Word-style redlines can be approximated with CSS vars only:
+
+```css
+.word-like-redlines {
+  --sd-tracked-changes-insert-border-width: 0px;
+  --sd-tracked-changes-insert-focused-border-width: 0px;
+  --sd-tracked-changes-insert-background: transparent;
+  --sd-tracked-changes-insert-text: #bf3848;
+  --sd-tracked-changes-insert-decoration-line: underline;
+  --sd-tracked-changes-insert-decoration-thickness: 1.5px;
+  --sd-tracked-changes-insert-underline-offset: 2px;
+
+  --sd-tracked-changes-delete-border-width: 0px;
+  --sd-tracked-changes-delete-focused-border-width: 0px;
+  --sd-tracked-changes-delete-background: transparent;
+  --sd-tracked-changes-delete-text: #2e64a8;
+  --sd-tracked-changes-delete-decoration-thickness: 1.5px;
+}
+```
+
+If you also want tracked-change text inside comment threads to match, set `--sd-ui-comments-insert-text` and `--sd-ui-comments-delete-text` too.
+
 ### Content controls
 
 DOCX content controls (SDTs) — form fields, dropdowns, date pickers.

packages/layout-engine/painters/dom/src/index.test.ts

@@ -3953,6 +3953,60 @@ describe('DomPainter', () => {
     expect(trackedSpan.classList.contains('highlighted')).toBe(true);
   });
 
+  it('injects a delete-decoration reset that overrides inherited underline metadata', () => {
+    document.body.appendChild(mount);
+    mount.style.setProperty('--sd-tracked-changes-delete-text', '#2e64a8');
+    mount.style.setProperty('--sd-tracked-changes-delete-decoration-thickness', '1.5px');
+
+    try {
+      const trackedDeleteBlock: FlowBlock = {
+        kind: 'paragraph',
+        id: 'tracked-delete-underline-reset',
+        runs: [
+          {
+            text: 'Deleted underlined text',
+            fontFamily: 'Arial',
+            fontSize: 16,
+            underline: {
+              style: 'wavy',
+              color: '#1f9d55',
+            },
+            trackedChange: {
+              kind: 'delete',
+              id: 'tracked-delete-1',
+            },
+          },
+        ],
+        attrs: {
+          trackedChangesMode: 'review',
+          trackedChangesEnabled: true,
+        },
+      };
+
+      const { paragraphMeasure, paragraphLayout } = buildSingleParagraphData(
+        trackedDeleteBlock.id,
+        trackedDeleteBlock.runs[0].text.length,
+      );
+
+      const painter = createTestPainter({ blocks: [trackedDeleteBlock], measures: [paragraphMeasure] });
+      painter.paint(paragraphLayout, mount);
+
+      const trackedSpan = mount.querySelector('[data-track-change-id="tracked-delete-1"]') as HTMLElement;
+      expect(trackedSpan).toBeTruthy();
+      expect(trackedSpan.style.textDecorationLine).toBe('underline');
+      expect(trackedSpan.style.textDecorationStyle).toBe('wavy');
+      expectCssColor(trackedSpan.style.textDecorationColor, '#1f9d55');
+
+      const styleEl = document.head.querySelector('[data-superdoc-track-change-styles="true"]') as HTMLStyleElement;
+      expect(styleEl).toBeTruthy();
+      expect(styleEl.textContent).toMatch(
+        /\.track-delete-dec\.highlighted\s*\{[\s\S]*text-decoration:\s*line-through\s+solid\s+var\(--sd-tracked-changes-delete-text,\s*currentColor\)\s+var\(--sd-tracked-changes-delete-decoration-thickness,\s*2px\)\s*!important;/,
+      );
+    } finally {
+      mount.remove();
+    }
+  });
+
   describe('token resolution tests', () => {
     it('renders footer with page numbers resolved', () => {
       const footerBlock: FlowBlock = {

packages/layout-engine/painters/dom/src/styles.ts

@@ -237,17 +237,26 @@ const TRACK_CHANGE_STYLES = `
 }
 
 .superdoc-layout .track-insert-dec.highlighted {
-  border-top: 1px dashed var(--sd-tracked-changes-insert-border, #00853d);
-  border-bottom: 1px dashed var(--sd-tracked-changes-insert-border, #00853d);
+  border-top: var(--sd-tracked-changes-insert-border-width, 1px) dashed var(--sd-tracked-changes-insert-border, #00853d);
+  border-bottom: var(--sd-tracked-changes-insert-border-width, 1px) dashed var(--sd-tracked-changes-insert-border, #00853d);
   background-color: var(--sd-tracked-changes-insert-background, #399c7222);
+  color: var(--sd-tracked-changes-insert-text, currentColor);
+  text-decoration-line: var(--sd-tracked-changes-insert-decoration-line, none);
+  text-decoration-color: var(--sd-tracked-changes-insert-text, currentColor);
+  text-decoration-thickness: var(--sd-tracked-changes-insert-decoration-thickness, 1px);
+  text-underline-offset: var(--sd-tracked-changes-insert-underline-offset, 0px);
 }
 
 .superdoc-layout .track-delete-dec.highlighted {
-  border-top: 1px dashed var(--sd-tracked-changes-delete-border, #cb0e47);
-  border-bottom: 1px dashed var(--sd-tracked-changes-delete-border, #cb0e47);
+  border-top: var(--sd-tracked-changes-delete-border-width, 1px) dashed var(--sd-tracked-changes-delete-border, #cb0e47);
+  border-bottom: var(--sd-tracked-changes-delete-border-width, 1px) dashed var(--sd-tracked-changes-delete-border, #cb0e47);
   background-color: var(--sd-tracked-changes-delete-background, #cb0e4722);
-  text-decoration: line-through !important;
-  text-decoration-thickness: 2px !important;
+  color: var(--sd-tracked-changes-delete-text, currentColor);
+  text-decoration:
+    line-through
+    solid
+    var(--sd-tracked-changes-delete-text, currentColor)
+    var(--sd-tracked-changes-delete-decoration-thickness, 2px) !important;
 }
 
 .superdoc-layout .track-format-dec.highlighted {
@@ -256,13 +265,13 @@ const TRACK_CHANGE_STYLES = `
 
 .superdoc-layout .track-insert-dec.highlighted.track-change-focused {
   border-style: solid;
-  border-width: 2px;
+  border-width: var(--sd-tracked-changes-insert-focused-border-width, 2px);
   background-color: var(--sd-tracked-changes-insert-background-focused, #399c7244);
 }
 
 .superdoc-layout .track-delete-dec.highlighted.track-change-focused {
   border-style: solid;
-  border-width: 2px;
+  border-width: var(--sd-tracked-changes-delete-focused-border-width, 2px);
   background-color: var(--sd-tracked-changes-delete-background-focused, #cb0e4744);
 }
 

packages/super-editor/src/editors/v1/assets/styles/elements/prosemirror.css

@@ -255,17 +255,25 @@ https://github.com/ProseMirror/prosemirror-tables/blob/master/demo/index.html
 }
 
 .sd-editor-scoped .ProseMirror .track-insert-dec.highlighted {
-  border-top: 1px dashed var(--sd-tracked-changes-insert-border, #00853d);
-  border-bottom: 1px dashed var(--sd-tracked-changes-insert-border, #00853d);
+  border-top: var(--sd-tracked-changes-insert-border-width, 1px) dashed var(--sd-tracked-changes-insert-border, #00853d);
+  border-bottom: var(--sd-tracked-changes-insert-border-width, 1px) dashed
+    var(--sd-tracked-changes-insert-border, #00853d);
   background-color: var(--sd-tracked-changes-insert-background, #399c7222);
+  color: var(--sd-tracked-changes-insert-text, currentColor);
+  text-decoration-line: var(--sd-tracked-changes-insert-decoration-line, none);
+  text-decoration-color: var(--sd-tracked-changes-insert-text, currentColor);
+  text-decoration-thickness: var(--sd-tracked-changes-insert-decoration-thickness, 1px);
+  text-underline-offset: var(--sd-tracked-changes-insert-underline-offset, 0px);
 }
 
 .sd-editor-scoped .ProseMirror .track-delete-dec.highlighted {
-  border-top: 1px dashed var(--sd-tracked-changes-delete-border, #cb0e47);
-  border-bottom: 1px dashed var(--sd-tracked-changes-delete-border, #cb0e47);
+  border-top: var(--sd-tracked-changes-delete-border-width, 1px) dashed var(--sd-tracked-changes-delete-border, #cb0e47);
+  border-bottom: var(--sd-tracked-changes-delete-border-width, 1px) dashed
+    var(--sd-tracked-changes-delete-border, #cb0e47);
   background-color: var(--sd-tracked-changes-delete-background, #cb0e4722);
-  text-decoration: line-through !important;
-  text-decoration-thickness: 2px !important;
+  color: var(--sd-tracked-changes-delete-text, currentColor);
+  text-decoration: line-through solid var(--sd-tracked-changes-delete-text, currentColor)
+    var(--sd-tracked-changes-delete-decoration-thickness, 2px) !important;
 }
 
 .sd-editor-scoped .ProseMirror .track-format-dec.highlighted {

packages/superdoc/src/assets/styles/helpers/variables.css

@@ -180,8 +180,18 @@
   /* Styles: tracked changes — old names honored via fallback */
   --sd-tracked-changes-insert-background: var(--sd-track-insert-bg, #399c7222);
   --sd-tracked-changes-insert-border: var(--sd-track-insert-border, #00853d);
+  --sd-tracked-changes-insert-border-width: 1px;
+  --sd-tracked-changes-insert-focused-border-width: 2px;
+  --sd-tracked-changes-insert-text: currentColor;
+  --sd-tracked-changes-insert-decoration-line: none;
+  --sd-tracked-changes-insert-decoration-thickness: 1px;
+  --sd-tracked-changes-insert-underline-offset: 0px;
   --sd-tracked-changes-delete-background: var(--sd-track-delete-bg, #cb0e4722);
   --sd-tracked-changes-delete-border: var(--sd-track-delete-border, #cb0e47);
+  --sd-tracked-changes-delete-border-width: 1px;
+  --sd-tracked-changes-delete-focused-border-width: 2px;
+  --sd-tracked-changes-delete-text: currentColor;
+  --sd-tracked-changes-delete-decoration-thickness: 2px;
   --sd-tracked-changes-format-border: var(--sd-track-format-border, gold);
   --sd-tracked-changes-insert-background-focused: #399c7244;
   --sd-tracked-changes-delete-background-focused: #cb0e4744;