wip: desktop work

This commit is contained in:
Adam
2025-10-30 10:43:04 -05:00
parent dce287a42d
commit 582ed7c363
3 changed files with 15 additions and 2 deletions

View File

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

View File

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

View File

@@ -59,10 +59,14 @@
0 0 0 3px var(--border-weak-selected, rgba(1, 103, 255, 0.29)), 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 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); 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 { :root {
/* OC-1-Light */ /* OC-1-Light */
--text-mix-blend-mode: multiply;
color-scheme: light; color-scheme: light;
--background-base: #f8f7f7; --background-base: #f8f7f7;
--background-weak: var(--smoke-light-3); --background-weak: var(--smoke-light-3);
@@ -292,6 +296,8 @@
--button-ghost-hover2: var(--smoke-light-alpha-3); --button-ghost-hover2: var(--smoke-light-alpha-3);
@media (prefers-color-scheme: dark) { @media (prefers-color-scheme: dark) {
--text-mix-blend-mode: plus-lighter;
/* OC-1-Dark */ /* OC-1-Dark */
color-scheme: dark; color-scheme: dark;
--background-base: var(--smoke-dark-1); --background-base: var(--smoke-dark-1);