wip: desktop work

packages/ui/src/components/diff.css

@@ -22,5 +22,9 @@
     width: var(--pjs-column-content-width);
     left: var(--pjs-column-number-width);
     padding-left: 8px;
+
+    [data-slot="diff-hunk-separator-content-span"] {
+      mix-blend-mode: var(--text-mix-blend-mode);
+    }
   }
 }

packages/ui/src/components/diff.tsx

@@ -109,8 +109,11 @@ export function Diff<T>(props: DiffProps<T>) {
         numCol.dataset["slot"] = "diff-hunk-separator-line-number"
         fragment.appendChild(numCol)
         const contentCol = document.createElement("div")
-        contentCol.textContent = `${hunkData.lines} unmodified lines`
         contentCol.dataset["slot"] = "diff-hunk-separator-content"
+        const span = document.createElement("span")
+        span.dataset["slot"] = "diff-hunk-separator-content-span"
+        span.textContent = `${hunkData.lines} unmodified lines`
+        contentCol.appendChild(span)
         fragment.appendChild(contentCol)
         return fragment
       },
@@ -166,7 +169,7 @@ export function Diff<T>(props: DiffProps<T>) {
         "--pjs-font-family": "var(--font-family-mono)",
         "--pjs-font-size": "var(--font-size-small)",
         "--pjs-line-height": "24px",
-        "--pjs-tab-size": 4,
+        "--pjs-tab-size": 2,
         "--pjs-font-features": "var(--font-family-mono--font-feature-settings)",
         "--pjs-header-font-family": "var(--font-family-sans)",
         "--pjs-gap-block": 0,

packages/ui/src/styles/theme.css

@@ -59,10 +59,14 @@
     0 0 0 3px var(--border-weak-selected, rgba(1, 103, 255, 0.29)),
     0 0 0 1px var(--border-selected, rgba(0, 74, 255, 0.99)), 0 1px 2px -1px rgba(19, 16, 16, 0.25),
     0 1px 2px 0 rgba(19, 16, 16, 0.08), 0 1px 3px 0 rgba(19, 16, 16, 0.12);
+
+  --text-mix-blend-mode: multiply;
 }
 
 :root {
   /* OC-1-Light */
+  --text-mix-blend-mode: multiply;
+
   color-scheme: light;
   --background-base: #f8f7f7;
   --background-weak: var(--smoke-light-3);
@@ -292,6 +296,8 @@
   --button-ghost-hover2: var(--smoke-light-alpha-3);
 
   @media (prefers-color-scheme: dark) {
+    --text-mix-blend-mode: plus-lighter;
+
     /* OC-1-Dark */
     color-scheme: dark;
     --background-base: var(--smoke-dark-1);