diff --git a/packages/ui/src/components/diff-ssr.tsx b/packages/ui/src/components/diff-ssr.tsx index 472c11f76d..9cb132698e 100644 --- a/packages/ui/src/components/diff-ssr.tsx +++ b/packages/ui/src/components/diff-ssr.tsx @@ -70,10 +70,10 @@ export function Diff(props: SSRDiffProps) { const root = getRoot() if (!root) return - const diffs = root.querySelector("[data-diffs]") + const diffs = root.querySelector("[data-diff]") if (!(diffs instanceof HTMLElement)) return - const split = diffs.dataset.type === "split" + const split = diffs.dataset.diffType === "split" const start = rowIndex(root, split, range.start, range.side) const end = rowIndex(root, split, range.end, range.endSide ?? range.side) @@ -132,10 +132,10 @@ export function Diff(props: SSRDiffProps) { node.removeAttribute("data-comment-selected") } - const diffs = root.querySelector("[data-diffs]") + const diffs = root.querySelector("[data-diff]") if (!(diffs instanceof HTMLElement)) return - const split = diffs.dataset.type === "split" + const split = diffs.dataset.diffType === "split" const rows = Array.from(diffs.querySelectorAll("[data-line-index]")).filter( (node): node is HTMLElement => node instanceof HTMLElement, diff --git a/packages/ui/src/components/diff.tsx b/packages/ui/src/components/diff.tsx index eabd0fd8b4..8e4fd64fbe 100644 --- a/packages/ui/src/components/diff.tsx +++ b/packages/ui/src/components/diff.tsx @@ -147,10 +147,10 @@ export function Diff(props: DiffProps) { const root = getRoot() if (!root) return - const diffs = root.querySelector("[data-diffs]") + const diffs = root.querySelector("[data-diff]") if (!(diffs instanceof HTMLElement)) return - const split = diffs.dataset.type === "split" + const split = diffs.dataset.diffType === "split" const start = rowIndex(root, split, range.start, range.side) const end = rowIndex(root, split, range.end, range.endSide ?? range.side) @@ -261,10 +261,10 @@ export function Diff(props: DiffProps) { node.removeAttribute("data-comment-selected") } - const diffs = root.querySelector("[data-diffs]") + const diffs = root.querySelector("[data-diff]") if (!(diffs instanceof HTMLElement)) return - const split = diffs.dataset.type === "split" + const split = diffs.dataset.diffType === "split" const rows = Array.from(diffs.querySelectorAll("[data-line-index]")).filter( (node): node is HTMLElement => node instanceof HTMLElement, diff --git a/packages/ui/src/pierre/index.ts b/packages/ui/src/pierre/index.ts index 6577ac7c45..137e3c3286 100644 --- a/packages/ui/src/pierre/index.ts +++ b/packages/ui/src/pierre/index.ts @@ -13,7 +13,7 @@ export type DiffProps = FileDiffOptions & { } const unsafeCSS = ` -[data-diffs] { +[data-diff] { --diffs-bg: light-dark(var(--diffs-light-bg), var(--diffs-dark-bg)); --diffs-bg-buffer: var(--diffs-bg-buffer-override, light-dark( color-mix(in lab, var(--diffs-bg) 92%, var(--diffs-mixer)), color-mix(in lab, var(--diffs-bg) 92%, var(--diffs-mixer)))); --diffs-bg-hover: var(--diffs-bg-hover-override, light-dark( color-mix(in lab, var(--diffs-bg) 97%, var(--diffs-mixer)), color-mix(in lab, var(--diffs-bg) 91%, var(--diffs-mixer)))); @@ -44,7 +44,7 @@ const unsafeCSS = ` --diffs-bg-selection-text: rgb(from var(--surface-warning-strong) r g b / 0.2); } -:host([data-color-scheme='dark']) [data-diffs] { +:host([data-color-scheme='dark']) [data-diff] { --diffs-selection-number-fg: #fdfbfb; --diffs-bg-selection: var(--diffs-bg-selection-override, rgb(from var(--solaris-dark-6) r g b / 0.65)); --diffs-bg-selection-number: var( @@ -53,7 +53,7 @@ const unsafeCSS = ` ); } -[data-diffs] ::selection { +[data-diff] ::selection { background-color: var(--diffs-bg-selection-text); } @@ -65,46 +65,46 @@ const unsafeCSS = ` background-color: rgb(from var(--surface-warning-strong) r g b / 0.55); } -[data-diffs] [data-line][data-comment-selected]:not([data-selected-line]) { +[data-diff] [data-line][data-comment-selected]:not([data-selected-line]) { box-shadow: inset 0 0 0 9999px var(--diffs-bg-selection); } -[data-diffs] [data-column-number][data-comment-selected]:not([data-selected-line]) { +[data-diff] [data-column-number][data-comment-selected]:not([data-selected-line]) { box-shadow: inset 0 0 0 9999px var(--diffs-bg-selection-number); color: var(--diffs-selection-number-fg); } -[data-diffs] [data-line-annotation][data-comment-selected]:not([data-selected-line]) [data-annotation-content] { +[data-diff] [data-line-annotation][data-comment-selected]:not([data-selected-line]) [data-annotation-content] { box-shadow: inset 0 0 0 9999px var(--diffs-bg-selection); } -[data-diffs] [data-line][data-selected-line] { +[data-diff] [data-line][data-selected-line] { background-color: var(--diffs-bg-selection); box-shadow: inset 2px 0 0 var(--diffs-selection-border); } -[data-diffs] [data-column-number][data-selected-line] { +[data-diff] [data-column-number][data-selected-line] { background-color: var(--diffs-bg-selection-number); color: var(--diffs-selection-number-fg); } -[data-diffs] [data-column-number][data-line-type='context'][data-selected-line], -[data-diffs] [data-column-number][data-line-type='context-expanded'][data-selected-line], -[data-diffs] [data-column-number][data-line-type='change-addition'][data-selected-line], -[data-diffs] [data-column-number][data-line-type='change-deletion'][data-selected-line] { +[data-diff] [data-column-number][data-line-type='context'][data-selected-line], +[data-diff] [data-column-number][data-line-type='context-expanded'][data-selected-line], +[data-diff] [data-column-number][data-line-type='change-addition'][data-selected-line], +[data-diff] [data-column-number][data-line-type='change-deletion'][data-selected-line] { color: var(--diffs-selection-number-fg); } /* The deletion word-diff emphasis is stronger than additions; soften it while selected so the selection highlight reads consistently. */ -[data-diffs] [data-line][data-line-type='change-deletion'][data-selected-line] { +[data-diff] [data-line][data-line-type='change-deletion'][data-selected-line] { --diffs-bg-deletion-emphasis: light-dark( rgb(from var(--diffs-deletion-base) r g b / 0.07), rgb(from var(--diffs-deletion-base) r g b / 0.1) ); } -[data-diffs-header], -[data-diffs] { +[data-diff-header], +[data-diff] { [data-separator-wrapper] { margin: 0 !important; border-radius: 0 !important;