diff options
| author | Adam <[email protected]> | 2025-10-30 10:43:04 -0500 |
|---|---|---|
| committer | Adam <[email protected]> | 2025-10-30 12:02:50 -0500 |
| commit | 582ed7c363fec4faa8cf393e023024ac90e65b82 (patch) | |
| tree | 33d4419ec54b6f9e39413ac5ba936ddbdc89a100 | |
| parent | dce287a42d5b4bb965ee74707bf7b0b0709d61f1 (diff) | |
| download | opencode-582ed7c363fec4faa8cf393e023024ac90e65b82.tar.gz opencode-582ed7c363fec4faa8cf393e023024ac90e65b82.zip | |
wip: desktop work
| -rw-r--r-- | packages/ui/src/components/diff.css | 4 | ||||
| -rw-r--r-- | packages/ui/src/components/diff.tsx | 7 | ||||
| -rw-r--r-- | packages/ui/src/styles/theme.css | 6 |
3 files changed, 15 insertions, 2 deletions
diff --git a/packages/ui/src/components/diff.css b/packages/ui/src/components/diff.css index c4e831879..860e3b1d1 100644 --- a/packages/ui/src/components/diff.css +++ b/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); + } } } diff --git a/packages/ui/src/components/diff.tsx b/packages/ui/src/components/diff.tsx index 36b57c56a..e9e46d6b0 100644 --- a/packages/ui/src/components/diff.tsx +++ b/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, diff --git a/packages/ui/src/styles/theme.css b/packages/ui/src/styles/theme.css index 600de584a..c401dcae9 100644 --- a/packages/ui/src/styles/theme.css +++ b/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); |